/* Pages d'authentification (connexion, inscription, 2FA, mot de passe) : écran partagé.
   Panneau de marque crème à gauche, formulaire sur blanc à droite ; en-tête compact sous 760 px. Voir DESIGN.md. */
body.auth-page { background: var(--bg); }
.auth-split { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  max-width: none; width: 100%; margin: 0; padding: 0; }

/* ─── Panneau de marque ─── */
/* Sur grand écran, le panneau reste à l'écran pendant que le formulaire défile. */
.auth-panel { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; background: var(--bg-alt); padding: var(--s6) clamp(32px, 5vw, 72px);
  display: flex; flex-direction: column; gap: var(--s5); }
.auth-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-size: 1.25rem; letter-spacing: -.03em; color: var(--text); width: fit-content; }
.auth-logo, .auth-logo:hover { text-decoration: none; }
.auth-logo svg { width: 36px; height: 36px; }
.auth-panel-copy { margin-top: auto; }
.auth-display { margin: 0; font-weight: 500; font-size: clamp(3rem, 5.6vw, 5.25rem); line-height: .95; letter-spacing: -.04em; color: var(--text); }
.auth-tagline { margin: var(--s4) 0 0; font-size: 1.1875rem; line-height: 1.45; color: var(--text-2); max-width: 30ch; }
.auth-panel-foot { margin: 0; font-size: .8125rem; color: var(--muted); }

/* Illustration : commentaire → DM, en HTML/CSS. Le lime n'y apparaît que comme élément d'interface (bouton, logo). */
.auth-art { position: relative; width: 100%; max-width: 440px; min-height: 280px; margin-bottom: auto; }
.art-logo { position: absolute; right: 0; top: -8px; transform: rotate(8deg); }
.art-logo svg { width: 112px; height: 112px; display: block; }
.art-comment { position: relative; display: flex; gap: var(--s3); align-items: center; width: fit-content; max-width: 78%;
  background: var(--bg); border-radius: var(--r-lg); padding: 14px 18px 14px 14px; transform: rotate(-2deg); margin-top: var(--s6); }
.art-av { width: 40px; height: 40px; border-radius: 50%; background: var(--fill); display: grid; place-items: center; font-weight: 500; color: var(--text-2); flex: none; }
.art-name { margin: 0; font-size: .8125rem; font-weight: 500; color: var(--text); }
.art-text { margin: 2px 0 0; font-size: 1rem; color: var(--text-2); }
.art-arrow { margin: var(--s4) 0 var(--s4) 40px; font-size: .8125rem; color: var(--muted); display: flex; align-items: center; gap: var(--s2); }
.art-arrow::before { content: ""; width: 28px; height: 28px; border-left: 1.75px solid var(--stone); border-bottom: 1.75px solid var(--stone); border-bottom-left-radius: 14px; transform: translateY(-12px); }
.art-arrow span { padding: 4px 12px; border-radius: var(--r-pill); background: var(--bg); border: 1px solid var(--hairline); }
.art-dm { width: fit-content; max-width: 82%; margin-left: auto; background: var(--island); color: var(--bg-alt); border-radius: var(--r-lg) var(--r-lg) 6px var(--r-lg);
  padding: 16px 18px; transform: rotate(1.5deg); }
.art-dm p { margin: 0 0 var(--s3); font-size: 1rem; line-height: 1.4; }
.art-btn { display: block; text-align: center; background: var(--accent); color: var(--accent-ink); border-radius: var(--r-pill); padding: 9px 16px; font-weight: 500; font-size: .875rem; }

/* ─── Formulaire ─── */
.auth-main { display: flex; align-items: center; justify-content: center; padding: var(--s7) var(--s5); }
.auth-box { width: 100%; max-width: 420px; }
.auth-box h1 { font-size: 2rem; letter-spacing: -.03em; margin: 0 0 var(--s2); }
.auth-intro { margin: 0 0 var(--s5); color: var(--muted); }
.auth-box .flash.inline, .auth-box .alert-error.inline { margin: 0 0 var(--s4); }
.auth-form .field { margin-bottom: var(--s4); }
.auth-form .btn.block { margin-top: var(--s2); }
.label-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); }
.label-row label { margin-bottom: 6px; }
.label-row a { color: var(--text-2); }
.auth-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: .875rem; line-height: 1.45; color: var(--text-2); margin: var(--s1) 0 var(--s4); cursor: pointer; }
.auth-check input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--text); -webkit-appearance: auto; appearance: auto; }
.auth-note { color: var(--text-2); margin: 0 0 var(--s4); }
.auth-note.small { margin: var(--s4) 0 0; text-align: center; }
.code-input { font-size: 1.5rem; letter-spacing: .25em; text-align: center; font-variant-numeric: tabular-nums; }

.auth-divider { display: flex; align-items: center; gap: var(--s3); margin: var(--s5) 0 var(--s4); }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; border-top: 1px solid var(--hairline); }
.auth-divider span { font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.auth-providers { display: grid; gap: var(--s3); }
.auth-providers.two { grid-template-columns: 1fr 1fr; }
.btn.provider { min-height: 48px; gap: 10px; }
.btn.provider svg { flex: none; }
.auth-legal { margin: var(--s4) 0 0; font-size: .8125rem; color: var(--muted); text-align: center; line-height: 1.5; }
.auth-legal a, .auth-check a { color: inherit; }
.auth-switch { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--hairline-soft); text-align: center; font-size: .9375rem; color: var(--muted); }
.auth-switch p { margin: 0; }
.auth-switch a, .auth-switch .link { color: var(--text); font-weight: 500; }
.auth-switch form { margin: 0; }

/* Robustesse du mot de passe : trois segments (trop court / correct / bon / excellent). */
.pw-meter { display: flex; gap: 4px; margin-top: var(--s2); }
.pw-meter[hidden], .pw-meter[data-score=""] { display: none; }
.pw-meter i { flex: 1; height: 4px; border-radius: var(--r-pill); background: var(--fill); transition: background .2s var(--ease); }
.pw-meter[data-score="0"] i:nth-child(1) { background: var(--danger); }
.pw-meter[data-score="1"] i:nth-child(1) { background: var(--warn); }
.pw-meter[data-score="2"] i:nth-child(-n+2), .pw-meter[data-score="3"] i { background: var(--ok); }

/* Champ piège invisible pour les robots. */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ─── Tablette : panneau plus étroit ─── */
@media (max-width: 1080px) {
  .auth-split { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); }
  .art-logo svg { width: 88px; height: 88px; }
}

/* ─── Mobile : le panneau devient un en-tête compact ─── */
@media (max-width: 760px) {
  .auth-split { grid-template-columns: 1fr; min-height: 0; }
  /* En-tête compact : logo puis grand titre ; le titre du formulaire reste lisible par les lecteurs d'écran. */
  .auth-panel { position: static; height: auto; padding: var(--s4) var(--s4) var(--s5); gap: var(--s5); }
  .auth-logo svg { width: 32px; height: 32px; }
  .auth-panel-copy { margin-top: 0; }
  .auth-display { font-size: 2.5rem; letter-spacing: -.035em; }
  .auth-tagline, .auth-art, .auth-panel-foot { display: none; }
  .auth-main { padding: var(--s5) var(--s4) var(--s7); align-items: flex-start; }
  .auth-box h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .auth-intro { color: var(--text-2); }
  .auth-switch { margin-top: var(--s5); }
}
@media (max-width: 359px) {
  .auth-providers.two { grid-template-columns: 1fr; }
}