/* ============================================================================
   Connexion / Inscription — carte large, onglets segmentés (CSS pur), champs
   lisibles. Complément à app.css.
   ========================================================================== */

/* Layout : la carte respire en haut, pas de grand vide vertical inutile. */
.wrap--auth{ justify-content:flex-start; min-height:0;
  padding-top:clamp(24px,5vw,52px); padding-bottom:clamp(36px,6vw,64px); }

.authcard{ width:min(520px,100%); margin:0 auto; position:relative; overflow:hidden;
  padding:clamp(28px,4vw,44px);
  background:radial-gradient(130% 90% at 50% -10%,rgba(231,201,140,.10),transparent 60%),linear-gradient(180deg,var(--panel),rgba(14,19,34,.7));
  border:1px solid var(--line-2); border-radius:var(--r-lg); box-shadow:var(--shadow); }

.authcard__head{ text-align:center; margin-bottom:24px; }
.authcard__head .step__badge{ margin:0 auto 14px; }
.authcard__kicker{ justify-content:center; margin-bottom:10px; }
.authcard__title{ font-size:clamp(1.5rem,1.2rem + 1.3vw,2rem); line-height:1.1; }
.authcard__lead{ margin:.6rem auto 0; max-width:40ch; color:var(--text-dim); font-size:.95rem; }

/* ── Onglets segmentés (radios cachés, labels cliquables) ─────────────────── */
.auth{ position:relative; }
.auth__radio{ position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; clip:rect(0 0 0 0); }
.auth__tabs{ display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; margin:0 0 22px;
  border:1px solid var(--line); border-radius:var(--r-pill); background:rgba(8,12,22,.5); }
.auth__tab{ text-align:center; padding:11px 12px; border-radius:var(--r-pill);
  font-size:.82rem; font-weight:600; letter-spacing:.02em; color:var(--text-dim); cursor:pointer;
  transition:color .3s var(--ease),background-color .3s var(--ease),box-shadow .3s var(--ease); }
.auth__tab:hover{ color:var(--cream); }
#tab-login:checked ~ .auth__tabs .auth__tab[for="tab-login"],
#tab-register:checked ~ .auth__tabs .auth__tab[for="tab-register"]{
  color:#1a1407; background:linear-gradient(135deg,var(--gold-bright),var(--gold));
  box-shadow:0 8px 20px -10px rgba(205,162,95,.6); }
.auth__radio:focus-visible ~ .auth__tabs .auth__tab[for="tab-login"],
.auth__radio:focus-visible ~ .auth__tabs .auth__tab[for="tab-register"]{ outline:2px solid var(--gold-bright); outline-offset:2px; }

/* Masquage : .auth .auth__panel (0,2,0) doit battre .authform (0,1,0). */
.auth .auth__panel{ display:none; animation:stepIn .4s var(--ease) both; }
#tab-login:checked ~ .auth__panel--login{ display:grid; }
#tab-register:checked ~ .auth__panel--register{ display:grid; }

/* ── Champs ───────────────────────────────────────────────────────────────── */
.authform{ display:grid; gap:16px; }
.authfield{ display:grid; gap:8px; }
.authfield label{ font-size:.82rem; font-weight:500; color:var(--cream); letter-spacing:.01em; }
.authfield__row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.authfield__link{ font-size:.78rem; color:var(--gold); }
.authfield__link:hover{ color:var(--gold-bright); text-decoration:underline; text-underline-offset:3px; }
.authfield input{ width:100%; padding:14px 16px; color:var(--cream); font-family:inherit; font-size:1rem;
  background:rgba(8,12,22,.55); border:1px solid var(--line); border-radius:var(--r-sm);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background-color .3s; }
.authfield input::placeholder{ color:var(--text-mute); }
.authfield input:focus{ outline:none; border-color:var(--line-3);
  box-shadow:0 0 0 3px rgba(205,162,95,.14); background:rgba(8,12,22,.8); }
.authform .btn{ margin-top:4px; }

/* Bas de formulaire : bascule vers l'autre onglet (label = lien). */
.authform__foot{ margin:2px 0 0; text-align:center; font-size:.86rem; color:var(--text-dim); }
.authlink{ color:var(--gold-bright); cursor:pointer; }
.authlink:hover{ text-decoration:underline; text-underline-offset:3px; }

/* Réassurance : icône INLINE dans le texte (jamais sur sa propre ligne). */
.authreassure{ margin:22px 0 0; padding-top:18px; border-top:1px solid var(--line);
  font-size:.8rem; color:var(--text-mute); text-align:center; line-height:1.6; }
.authreassure svg{ display:inline-block; width:13px; height:13px; vertical-align:-2px; margin-right:5px;
  color:var(--gold); fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

/* Mot de passe oublié : note de confirmation + retour. */
.authnote{ display:flex; align-items:flex-start; gap:10px; margin:0 0 6px; padding:14px 16px;
  border:1px solid var(--line-2); border-radius:var(--r); background:rgba(205,162,95,.07);
  color:var(--text); font-size:.9rem; line-height:1.55; }
.authnote--ok svg{ width:18px; height:18px; color:var(--ok); flex:0 0 auto; margin-top:1px;
  fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.authswitch{ margin:16px 0 0; text-align:center; font-size:.86rem; }
.authswitch a{ color:var(--gold-bright); }
.authswitch a:hover{ text-decoration:underline; text-underline-offset:3px; }