/* ==========================================================================
   pages/auth.css — Parcours d'authentification
   Écran scindé : panneau marine d'appui à gauche, formulaire à droite.
   N'ajoute que des composants propres à ce parcours ; components.css
   n'est pas modifié.
   ========================================================================== */

/* ==========================================================================
   Mise en page
   ========================================================================== */

.auth-layout { display: grid; min-height: 100vh; }

@media (min-width: 940px) {
  .auth-layout {
    grid-template-columns: 0.86fr 1.14fr;
    align-items: start;          /* empêche la colonne marine de s'étirer */
  }
}

/* --- Panneau d'appui ------------------------------------------------------
   Sur mobile il coiffe le formulaire ; sur desktop il devient un panneau
   collant de la hauteur de l'écran, ce qui supprime le vide qui se creusait
   sous lui quand le formulaire était plus long que son contenu. */

.auth-aside {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding: var(--sp-7) var(--gutter);
}

@media (min-width: 940px) {
  .auth-aside {
    position: sticky;
    top: 0;
    height: 100vh;
    justify-content: space-between;
    padding: var(--sp-10) clamp(1.75rem, 1rem + 2.6vw, 3.25rem);
  }
}

.auth-aside .glow {
  top: -46%; left: -22%;
  width: min(150%, 720px);
  aspect-ratio: 1;
}

/* Fond photographique : la façade historique de la BNC, sous le même voile
   marine dégradé que la hero de l'accueil. Il garde l'image visible tout en
   laissant le texte blanc lisible. En ::before (z-index 0), il reste SOUS le
   glow et le contenu (.auth-aside__inner). */
.auth-aside::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(180deg, rgba(14, 46, 94, 0.76) 0%, rgba(9, 31, 66, 0.90) 100%),
    url("/atouts/img/bnc-background.jpg");
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
}

.auth-aside__inner { position: relative; z-index: var(--z-base); }

.auth-aside__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  text-decoration: none;
  color: inherit;
}

/* --- Argumentaire --------------------------------------------------------- */

.auth-aside__pitch { margin-top: var(--sp-6); }

@media (min-width: 940px) {
  .auth-aside__pitch { margin-block: var(--sp-12) 0; }
}

.auth-aside__pitch h1 {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  max-width: 16ch;
}

.auth-aside__pitch > p {
  margin-top: var(--sp-4);
  max-width: 42ch;
  font-size: var(--fs-sm);
  color: var(--c-muted);
  line-height: var(--lh-relaxed);
}

/* Trois points d'appui. En colonne sur desktop, sur une grille compacte
   en dessous, pour rester lisibles sans allonger l'écran mobile. */
.auth-points { margin-top: var(--sp-6); display: grid; gap: var(--sp-4); }

@media (min-width: 620px) and (max-width: 939px) {
  .auth-points { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
  .auth-point { flex-direction: column; gap: var(--sp-3); }
}

@media (min-width: 940px) { .auth-points { margin-top: var(--sp-8); gap: var(--sp-5); } }

.auth-point { display: flex; gap: var(--sp-3); align-items: flex-start; }

.auth-point__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: var(--r-xs);
  background-color: var(--c-amber-soft);
  color: var(--c-amber);
}

.auth-point__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--c-text-2);
}

.auth-aside__foot {
  position: relative;
  z-index: var(--z-base);
  font-size: var(--fs-xs);
  color: var(--c-faint);
}

/* --- Colonne du formulaire ------------------------------------------------ */

.auth-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-10) var(--gutter) var(--sp-12);
  background-color: var(--c-bg);
}

.auth-card { width: 100%; max-width: 27rem; }

/* L'inscription compte davantage de champs : la carte s'élargit pour
   permettre deux colonnes, ce qui raccourcit le formulaire d'autant. */
.auth-card--large { max-width: 33rem; }

.auth-back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--c-muted);
  text-decoration: none;
}
.auth-back:hover { color: var(--c-text); }
.auth-back svg { transition: transform var(--t-med) var(--ease-out); }
.auth-back:hover svg { transform: translateX(-3px); }

.auth-head { margin-bottom: var(--sp-6); }
.auth-head h2 { font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem); }
.auth-head p {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-muted);
  line-height: var(--lh-relaxed);
}

.auth-foot {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-sm);
  color: var(--c-muted);
  text-align: center;
}
.auth-foot a { font-weight: var(--fw-semi); }

/* ==========================================================================
   Champs propres au parcours
   ========================================================================== */

/* Ligne d'entête de champ : libellé à gauche, lien d'aide à droite */
.field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
}
.field-head .label { margin-bottom: var(--sp-2); }
.field-head a { font-size: var(--fs-sm); font-weight: var(--fw-semi); }

/* --- Mot de passe : bouton d'affichage intégré ---------------------------- */

.password-wrap { position: relative; }
.password-wrap .input { padding-right: var(--sp-10); }

.password-toggle {
  position: absolute;
  top: 50%; right: var(--sp-2);
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: var(--r-xs);
  color: var(--c-muted);
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.password-toggle:hover { color: var(--c-text); background-color: var(--c-surface-2); }
.password-toggle .icon-hide { display: none; }
.password-toggle[aria-pressed="true"] .icon-hide { display: block; }
.password-toggle[aria-pressed="true"] .icon-show { display: none; }

/* --- Jauge de robustesse -------------------------------------------------- */

.strength {
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xs);
  background-color: var(--c-surface);
}

.strength__bars { display: flex; gap: var(--sp-2); }

.strength__bars i {
  flex: 1;
  height: 4px;
  border-radius: var(--r-full);
  background-color: var(--c-line-strong);
  transition: background-color var(--t-med) var(--ease);
}

.strength[data-niveau="1"] i:nth-child(1) { background-color: var(--c-danger); }
.strength[data-niveau="2"] i:nth-child(-n+2) { background-color: var(--c-warning); }
.strength[data-niveau="3"] i:nth-child(-n+3) { background-color: var(--c-amber); }
.strength[data-niveau="4"] i { background-color: var(--c-success); }

.strength__label {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--c-muted);
}
.strength__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-2);
}
.strength__head p { margin: 0; }

/* Liste des règles : une puce par critère, cochée dès qu'il est rempli */
.strength__rules {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
  margin-top: var(--sp-3);
}

.strength__rule {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--c-faint);
  transition: color var(--t-fast) var(--ease);
}
.strength__rule svg { flex: none; opacity: .45; transition: opacity var(--t-fast) var(--ease); }
.strength__rule.is-ok { color: var(--c-success); }
.strength__rule.is-ok svg { opacity: 1; }

/* ==========================================================================
   États de page (confirmation, lien envoyé, jeton expiré)
   ========================================================================== */

.state { text-align: center; }

.state__icon {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  margin: 0 auto var(--sp-5);
  border-radius: var(--r-full);
}
.state__icon--success { background-color: var(--c-success-soft); color: var(--c-success); }
.state__icon--warning { background-color: var(--c-warning-soft); color: var(--c-warning); }
.state__icon--danger  { background-color: var(--c-danger-soft);  color: var(--c-danger); }
.state__icon--info    { background-color: var(--c-info-soft);    color: var(--c-info); }

.state h2 { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); }
.state > p { margin-top: var(--sp-4); color: var(--c-muted); line-height: var(--lh-relaxed); }
.state .cluster { justify-content: center; margin-top: var(--sp-8); }

/* Adresse rappelée dans un encadré, pour que l'utilisateur vérifie la saisie */
.state__mail {
  display: inline-block;
  margin-top: var(--sp-5);
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-full);
  background-color: var(--c-surface);
  font-weight: var(--fw-semi);
  font-size: var(--fs-sm);
  color: var(--c-text);
  word-break: break-all;
}

/* ==========================================================================
   Encart de démonstration — à supprimer au passage en production
   ========================================================================== */

.demo-hint {
  margin-top: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--c-muted);
}
.demo-hint strong { display: block; margin-bottom: var(--sp-2); color: var(--c-text); font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.demo-hint code {
  font-family: var(--ff-body);
  font-weight: var(--fw-semi);
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}
.demo-hint button {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--c-amber);
  text-decoration: underline;
  text-underline-offset: 3px;
}