/* Pages publiques (bienvenue, connexion) : préfixe auth-, enrichi par le lot D. Surcharge pages.css sans le modifier. */

/* Place pour l'œil à droite du mot de passe (sur mobile, connect.css le fait déjà). */
.auth-login .input-wrap .input { padding-right: 40px; }
.auth-login .btn[aria-busy="true"] { cursor: progress; }
/* « .login p » (pages.css) l'emporte sur « .login__error » : l'erreur restait grise, on lui rend sa couleur. */
.auth-login .login__error { color: var(--bad); font-size: var(--t-sm); font-weight: 500; }

.auth-back {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: fit-content; margin: var(--sp-3) auto 0; color: var(--muted);
  font-size: var(--t-xs); font-weight: 600; transition: color var(--dur-fast);
}
.auth-back:hover { color: var(--ink); }
.auth-back svg { width: 14px; height: 14px; }

.auth-cta { width: 100%; }

/* ---------- Carte des pages publiques (les deux thèmes) ---------- */
/* Arête claire en haut, comme les autres surfaces de verre ; pied lisible (--faint passait sous 3:1). */
.login-wrap .login { border-top-color: var(--edge-top, var(--line-strong)); }
.login-wrap .login__foot { color: var(--muted); }

/* ---------- Accueil (#/bienvenue) : marque (icône + nom), une phrase, un bouton, la mention d'invitation ---------- */
/* 500 px : le lockup lg (≈ 9em à 46 px) tient dans la carte sans revenir à la ligne. */
.auth-hero { width: min(100%, 500px); padding: 44px var(--sp-7) var(--sp-6); text-align: center; }
.auth-hero h1 { margin: 0 0 var(--sp-5); line-height: 1; }
.auth-hero .auth-hero__lead {
  max-width: 38ch; margin: 0 auto var(--sp-6); color: var(--ink-2); font-size: 0.9375rem; line-height: 1.55; text-wrap: balance;
}
.auth-hero__lead strong { color: var(--ink); font-weight: 650; }
.auth-hero .auth-cta { height: 44px; margin: 0; font-size: var(--t-base); }
.auth-cta svg { transition: transform var(--dur-fast) var(--ease); }
.auth-cta:hover svg { transform: translateX(3px); }
.auth-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.auth-hero .auth-invite {
  margin: var(--sp-6) 0 0; padding-top: var(--sp-4); border-top: 1px solid var(--line); font-size: var(--t-xs); line-height: 1.55; text-wrap: balance;
}
.auth-invite svg { display: inline-block; width: 13px; height: 13px; margin-right: 6px; vertical-align: -2px; }

/* ---------- Thème sombre : carte presque pleine, les arêtes du fond ne traversent plus le texte ---------- */
:root[data-theme="dark"] .login-wrap .login {
  background: color-mix(in srgb, var(--panel-solid, var(--select-bg)) 95%, transparent);
  border-color: var(--line-strong); border-top-color: var(--edge-top, var(--line-strong));
}
/* Champs creusés (plus sombres que la carte) au lieu de se fondre dedans ; texte d'exemple lisible. */
:root[data-theme="dark"] .login-wrap .input { background: color-mix(in srgb, var(--bg) 60%, transparent); }
:root[data-theme="dark"] .login-wrap .input::placeholder { color: var(--muted); }
:root[data-theme="dark"] .login-wrap .login > p:not([class]) { color: var(--ink-2); }

/* ---------- Petits écrans : gouttière de 16 px, carte moins rembourrée ---------- */
@media (max-width: 480px) {
  .login-wrap { padding: var(--sp-4); }
  .auth-hero { padding: var(--sp-7) var(--sp-5) var(--sp-5); }
}