/* =========================================================
   Écrans d'authentification (connexion, inscription, mot de
   passe oublié) : connexion, création de compte, email de
   validation, demande/réinitialisation, succès, lien expiré.
   Carte centrée, charte dark + accents dorés. Tokens : tokens.css.
   Portés depuis design-poc/reset-password.html et
   design-poc/connexion-inscription.html.
   ========================================================= */
/* grid-template-columns:minmax(0,1fr) : sans ça, la colonne implicite se
   dimensionne sur le contenu (jusqu'à max-width:620px) et la carte déborde à
   droite sur mobile (coupée par main{overflow-x:hidden}). La colonne bornée à
   la largeur du conteneur garde la carte dans l'écran. */
.auth-page { display:grid; place-items:center; grid-template-columns:minmax(0,1fr); padding:2rem 1rem 3rem; }

.auth-card {
    width:100%; max-width:620px; margin:0 auto;
    background:var(--surface-2); border:1px solid var(--border);
    border-radius:var(--radius); box-shadow:var(--shadow);
    padding:2.6rem 2.8rem;
}
@media (max-width:560px){ .auth-card{ padding:1.8rem 1.4rem; } }

.auth-eyebrow { font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); font-weight:600; text-align:center; margin:0; }
.auth-title { font-size:1.3rem; font-weight:600; text-align:center; margin:.15rem 0 .3rem; }
.auth-lede { font-size:.9rem; color:var(--text-muted); text-align:center; margin:0 0 1.3rem; }

/* Champs (thème bootstrap_5 : .form-control) */
.auth-card .form-label { font-size:.8rem; color:var(--text-muted); font-weight:500; margin-bottom:.3rem; }
.auth-card .form-control {
    font-size:.95rem; color:var(--text); background:var(--surface-3);
    border:1px solid var(--border-strong); border-radius:var(--radius-sm); padding:.6rem .75rem;
}
.auth-card .form-control:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 .1rem rgba(230,201,138,.35); background:var(--surface-3); color:var(--text); }
.auth-field { margin-bottom:1rem; }

/* Connexion / inscription : deux champs sur une ligne (nom / prénom) */
.auth-field-row { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
@media (max-width:460px){ .auth-field-row{ grid-template-columns:1fr; gap:0; } }

/* Lien discret sous un champ (« Mot de passe oublié ? ») */
.auth-link-row { text-align:center; font-size:.85rem; margin:.2rem 0 .4rem; }

/* Note de consentement (création de compte) */
.auth-consent { font-size:.8rem; color:var(--text-muted); margin:.5rem 0 .2rem; }

/* Pastille d'info (durée de validité) */
.auth-pill {
    display:flex; width:fit-content; margin:0 auto 1.1rem; align-items:center; gap:.4rem;
    font-size:.78rem; color:var(--text-muted); background:var(--surface-3);
    border:1px solid var(--border); border-radius:999px; padding:.25rem .7rem;
}

/* Actions */
.auth-actions { display:flex; gap:.6rem; margin-top:1.2rem; }
.auth-actions.stack { flex-direction:column; }
.auth-actions .ui-btn { flex:1; justify-content:center; }
.auth-foot { text-align:center; font-size:.85rem; color:var(--text-muted); margin-top:1.3rem; }

/* Bandeau d'état (envoyé / succès / expiré) */
.auth-banner { text-align:center; }
.auth-banner .ico { width:56px; height:56px; margin:0 auto .9rem; border-radius:50%; display:grid; place-items:center; font-size:1.6rem; }
.auth-banner .ico.ok   { background:var(--success-soft); color:var(--success); border:1px solid rgba(79,174,139,.35); }
.auth-banner .ico.mail { background:var(--gold-soft); color:var(--gold-strong); border:1px solid var(--border-strong); }
.auth-banner .ico.warn { background:var(--warning-soft); color:var(--warning); border:1px solid rgba(224,171,51,.35); }

.auth-notes { list-style:none; padding:0; margin:.6rem 0 0; font-size:.84rem; color:var(--text-muted); }
.auth-notes li { position:relative; padding:.3rem 0 .3rem 1.3rem; border-top:1px solid var(--border); text-align:left; }
.auth-notes li:first-child { border-top:none; }
.auth-notes li::before { content:"›"; position:absolute; left:.2rem; color:var(--gold); }

/* Champ mot de passe + bouton afficher/masquer */
.pwd-input { position:relative; display:flex; }
.pwd-input .form-control { flex:1; padding-right:2.6rem; }
.pwd-eye {
    position:absolute; right:.2rem; top:0; bottom:0; width:2.4rem; display:grid; place-items:center;
    background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:1rem;
}

/* Jauge de robustesse */
.pwd-meter { display:flex; gap:.3rem; margin:.5rem 0 .4rem; }
.pwd-meter span { flex:1; height:5px; border-radius:3px; background:var(--surface-3); border:1px solid var(--border); transition:background .2s; }
.pwd-meter.s1 span:nth-child(-n+1) { background:var(--danger); border-color:transparent; }
.pwd-meter.s2 span:nth-child(-n+2) { background:var(--warning); border-color:transparent; }
.pwd-meter.s3 span:nth-child(-n+3) { background:#c9b24e; border-color:transparent; }
.pwd-meter.s4 span:nth-child(-n+4) { background:var(--success); border-color:transparent; }
.pwd-meter-label { font-size:.76rem; color:var(--text-muted); margin:0 0 .8rem; }

/* Checklist des règles */
.pwd-rules { list-style:none; padding:0; margin:.2rem 0 1rem; display:grid; gap:.25rem; }
.pwd-rules li { font-size:.8rem; color:var(--text-faint); display:flex; align-items:center; gap:.45rem; }
.pwd-rules li .tick { width:16px; height:16px; border-radius:50%; border:1.5px solid var(--border-strong); display:grid; place-items:center; font-size:.6rem; color:transparent; flex:0 0 auto; }
.pwd-rules li.ok { color:var(--text); }
.pwd-rules li.ok .tick { background:var(--success); border-color:var(--success); color:#04140d; }

.match-msg { display:block; font-size:.78rem; color:var(--text-faint); margin-top:.35rem; }

/* Erreurs de validation (rendu maison, toujours visible) */
.auth-error {
    margin:.2rem 0 1rem; padding:.6rem .8rem; font-size:.82rem; color:var(--danger);
    background:var(--danger-soft); border:1px solid rgba(226,98,91,.3); border-radius:var(--radius-sm);
}
.auth-error p { margin:.15rem 0; }
.auth-card .form-control.is-invalid { border-color:var(--danger); }
.auth-card .invalid-feedback { color:var(--danger); font-size:.8rem; }