/* Écrans auth (js/auth/auth-ui.js) — carte centrée, mobile-first, réutilise .btn/.eyebrow/label/input
   de css/style.css pour rester visuellement cohérent avec le reste de Cap Forme sans dupliquer le style. */
/* Tant que le gate auth est actif (voir js/auth/auth-gate.js), le chrome de l'app existante (topbar,
   nav) reste dans le DOM (index.html est statique) mais ne doit ni s'afficher ni rester cliquable —
   sinon "Nutrition"/"Recettes" etc. contourneraient l'auth en appelant directement le render() de l'app
   réelle, qui n'a pourtant aucune notion d'auth. */
body.auth-gate-active .topbar, body.auth-gate-active .bottom-nav { display: none; }

.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.auth-card { width: 100%; max-width: 380px; background: linear-gradient(145deg, var(--card2), var(--card)); border: 1px solid #ffffff0d; border-radius: var(--radius); padding: 26px 22px; box-shadow: 0 16px 38px #0006; }
.auth-brand { margin-bottom: 6px; }
.auth-card h2 { font-size: 22px; margin: 0 0 18px; }
.auth-card form { display: grid; gap: 14px; }
.auth-card .btn { width: 100%; margin-top: 4px; }
.auth-link { background: none; border: 0; color: var(--green); font-weight: 600; padding: 6px 0; text-align: left; }
.auth-footer { margin-top: 16px; font-size: 13px; color: var(--muted); text-align: center; }
.auth-hint { color: var(--muted); font-size: 12px; margin: 4px 0 0; }
.auth-error { background: #3a1c22; border: 1px solid #6b2530; color: #ffb3bd; border-radius: 12px; padding: 10px 12px; font-size: 13px; margin-bottom: 14px; }
#auth-change-password-box { margin: 4px 0 14px; }