/* ===================================================================
   Auth DA 2.0 — layout split immersif (inscription / connexion / reset)
   Sans chrome site. Réutilise les tokens --v2-* (ds-v2.css) et .chk-field.
   =================================================================== */
.auth-body { margin: 0; min-height: 100vh; background: var(--v2-forge, #15130F); font-family: var(--v2-font-sans, 'Inter', sans-serif); color: var(--v2-ink, #191713); }

.auth-shell { display: grid; grid-template-columns: 1.02fr 1fr; min-height: 100vh; }

/* ---------- Aside visuel (forge) ---------- */
.auth-aside {
    position: relative; display: flex; flex-direction: column; justify-content: space-between;
    gap: 28px; padding: clamp(28px, 4vw, 58px); color: var(--v2-paper, #EDEBE5);
    background: var(--v2-forge, #15130F); overflow: hidden;
}
.auth-aside::before {
    content: ""; position: absolute; inset: 0;
    background: url('/assets/logo-sf2.webp') center 38%/cover no-repeat; opacity: 0.16;
}
.auth-aside::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(175deg, rgba(21,19,15,0.30) 0%, rgba(21,19,15,0.78) 62%, rgba(21,19,15,0.94) 100%);
}
.auth-aside > * { position: relative; z-index: 1; }
/* Le logo est un SVG détouré (pas une plaque pleine) : pas de border-radius —
   il n'aurait rien à rogner — et l'ombre suit l'alpha via drop-shadow. */
.auth-brand img { width: clamp(58px, 7vw, 84px); filter: drop-shadow(0 4px 14px rgba(0,0,0,0.45)); }
.auth-aside-copy { margin-top: auto; }
.auth-aside-eyebrow {
    display: inline-block; margin-bottom: 14px; font-family: var(--v2-font-mono, 'IBM Plex Mono', monospace);
    font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--v2-green-glow, #37B457);
}
.auth-aside-copy h2 {
    font-family: var(--v2-font-display, 'Fraunces', serif); font-weight: 600;
    font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.04; margin: 0 0 16px; color: #fff;
}
.auth-aside-copy h2 em { font-style: italic; color: var(--v2-green-glow, #37B457); }
.auth-aside-copy p { color: rgba(237,235,229,0.74); font-size: 1.02rem; line-height: 1.65; max-width: 40ch; margin: 0; }
.auth-aside-back {
    align-self: flex-start; font-family: var(--v2-font-mono, 'IBM Plex Mono', monospace);
    font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: rgba(237,235,229,0.6); text-decoration: none; transition: color 0.2s ease;
}
.auth-aside-back:hover { color: var(--v2-paper, #EDEBE5); }

/* ---------- Panneau formulaire ---------- */
.auth-panel {
    display: flex; align-items: center; justify-content: center;
    background: var(--v2-paper, #EDEBE5);
    padding: clamp(30px, 5vw, 64px) clamp(20px, 4vw, 56px);
}
.auth-panel-inner { width: 100%; max-width: 424px; }
.auth-eyebrow { font-family: var(--v2-font-mono, 'IBM Plex Mono', monospace); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--v2-green-deep, #1C6E34); }
.auth-panel-inner h1 {
    font-family: var(--v2-font-display, 'Fraunces', serif); font-weight: 600;
    font-size: clamp(1.75rem, 3vw, 2.35rem); line-height: 1.1; color: var(--v2-ink, #191713); margin: 8px 0 6px;
}
.auth-alt-link { display: inline-block; margin-bottom: 26px; font-size: 0.9rem; color: var(--v2-green-deep, #1C6E34); text-decoration: underline; text-underline-offset: 3px; }
.auth-alt-link:hover { color: var(--v2-green, #2D9446); }

.auth-form { display: flex; flex-direction: column; gap: 9px; }
/* rangée deux colonnes (nom / prénom) */
.auth-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }

/* jauge force mot de passe */
.auth-strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: -6px; }
.auth-strength span { height: 4px; border-radius: 3px; background: var(--v2-steel-200, #DFE1DC); transition: background 0.25s ease; }
.auth-strength span.on-1 { background: #D9534F; }
.auth-strength span.on-2 { background: var(--v2-ember, #D9622B); }
.auth-strength span.on-3 { background: #D3B13A; }
.auth-strength span.on-4 { background: var(--v2-green, #2D9446); }

/* Ligne de message sous chaque champ. Elle est TOUJOURS dans le flux, hauteur
   réservée : une erreur qui apparaît (serveur ou validation JS) colore la ligne
   au lieu de l'insérer, et le formulaire ne bouge pas d'un pixel. Sur le mot de
   passe, la même phrase sert de consigne en gris puis d'erreur en rouge — même
   longueur, donc même hauteur dans les deux états. */
.auth-field-msg {
    min-height: 15px; margin: 4px 0 0 2px;
    font-size: 0.76rem; line-height: 15px;
    color: var(--v2-ink-soft, #565248);
    transition: color 0.2s ease;
}
.auth-field-msg.is-error { color: #D9534F; }

/* messages de formulaire (inline, remplacent les anciennes pages d'erreur) */
.auth-banner {
    padding: 12px 15px; border-radius: 10px; font-size: 0.87rem; line-height: 1.5;
    background: rgba(217,83,79,0.09); border: 1px solid rgba(217,83,79,0.28);
    color: #B0413E; margin: 0 0 18px;
}
.auth-banner--info {
    background: rgba(45,148,70,0.08); border-color: rgba(45,148,70,0.28);
    color: var(--v2-green-deep, #1C6E34);
}
.auth-info-note { font-size: 0.82rem; line-height: 1.5; color: var(--v2-green-deep, #1C6E34); margin: -6px 0 0 2px; }
.auth-form .nhp-btn { width: 100%; justify-content: center; margin-top: 8px; }
.auth-foot-link { margin-top: 4px; font-size: 0.86rem; color: var(--v2-ink-soft, #565248); }
.auth-foot-link a { color: var(--v2-green-deep, #1C6E34); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Pages résultat (succès / info) ---------- */
.auth-result { text-align: center; }
.auth-result-ico { width: 62px; height: 62px; margin: 0 auto 20px; display: grid; place-items: center; border-radius: 50%; background: rgba(45,148,70,0.12); color: var(--v2-green, #2D9446); }
.auth-result-ico svg { width: 30px; height: 30px; }
.auth-result h1 { margin-bottom: 12px; }
.auth-result p { color: var(--v2-ink-soft, #565248); line-height: 1.6; margin: 0 0 24px; }
.auth-result .hl { color: var(--v2-green-deep, #1C6E34); font-weight: 600; }
/* variantes d'icône : info (vert profond) / attention (braise) — jamais de rouge agressif */
.auth-result-ico--info { background: rgba(28,110,52,0.10); color: var(--v2-green-deep, #1C6E34); }
.auth-result-ico--warn { background: rgba(217,98,43,0.12); color: var(--v2-ember, #D9622B); }
.auth-result-actions { display: flex; flex-direction: column; gap: 10px; }
.auth-result-actions .nhp-btn { width: 100%; justify-content: center; margin-top: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .auth-shell { grid-template-columns: 1fr; }
    .auth-aside { min-height: 32vh; order: 0; }
    .auth-aside-copy p { max-width: none; }
}
@media (max-width: 460px) {
    .auth-row2 { grid-template-columns: 1fr; }
}