/* ==========================================================================
   Page /connexion — layout split (dégradé de marque | carte de connexion)
   ========================================================================== */

.cnx {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - var(--header-h));
  /* Tout le fond est en dégradé ; la carte de connexion « flotte » par-dessus. */
  background: var(--grad-brand);
}

/* ---- Panneau gauche : texte blanc directement sur le dégradé ---- */
.cnx__aside {
  color: #fff;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: var(--sp-8) clamp(2rem, 5vw, 5rem);
}
.cnx__aside-inner { max-width: 460px; }
.cnx__welcome { color: #fff; font-size: var(--fs-hero); font-weight: var(--fw-bold); margin-bottom: var(--sp-5); }
.cnx__lead { font-size: var(--fs-lg); font-weight: var(--fw-light); line-height: 1.6; color: rgba(255,255,255,.92); margin-bottom: var(--sp-7); }
.cnx__features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.cnx__features li { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-body); font-weight: var(--fw-normal); }
.cnx__feature-ico {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.16); color: #fff;
}

/* ---- Panneau droit : carte flottante (fond transparent = le dégradé transparaît) ---- */
.cnx__panel { display: flex; align-items: center; justify-content: center; min-width: 0; padding: var(--sp-7) var(--sp-5); background: transparent; }
.cnx__card { width: 100%; max-width: 430px; }
.cnx__title { text-align: center; font-size: var(--fs-h1); font-weight: var(--fw-bold); color: var(--c-heading); }
.cnx__subtitle { text-align: center; font-size: var(--fs-sm); color: var(--c-muted); margin-top: 6px; margin-bottom: var(--sp-6); }

.cnx__forgot { text-align: right; margin-top: calc(var(--sp-3) * -1); margin-bottom: var(--sp-4); font-size: var(--fs-xs); }

/* Boutons de la carte : rayon un peu plus rond que le défaut (fidèle au design) */
.cnx__submit, .cnx__create { border-radius: 14px; padding-block: 14px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.cnx__create { color: var(--c-heading); }

.cnx__error {
  margin: 0 0 var(--sp-4); padding: 10px 14px; border-radius: var(--r-sm);
  background: var(--c-danger-bg); color: #b42318; font-size: var(--fs-xs); font-weight: var(--fw-medium);
}

.cnx__back { text-align: center; margin-top: var(--sp-5); font-size: var(--fs-xs); }
.cnx__back a { display: inline-flex; align-items: center; gap: 6px; }
.cnx__pro { text-align: center; margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--c-muted); }

/* ---- Responsive : sous 900px, le dégradé passe en bandeau haut ---- */
@media (max-width: 900px) {
  .cnx { grid-template-columns: 1fr; }
  .cnx__aside { padding: var(--sp-7) var(--sp-5); }
  .cnx__aside-inner { max-width: none; }
  .cnx__welcome { font-size: 2rem; margin-bottom: var(--sp-3); }
  .cnx__lead { margin-bottom: var(--sp-5); }
  .cnx__features { flex-direction: row; flex-wrap: wrap; gap: var(--sp-4); }
  .cnx__features li { font-size: var(--fs-xs); }
}
@media (max-width: 560px) {
  .cnx__features { flex-direction: column; }
  .cnx__card { box-shadow: none; padding: var(--sp-6) var(--sp-5); }
  .cnx__panel { padding-top: var(--sp-5); }
}