/* ═══════════════════════════════════════════════════════════════════════════
   ACCÈS — les écrans de la porte (connexion, code, mot de passe, activation,
   lien, refus) et l'écran du compte. Jetons seulement.

   Au centre de la porte : le PATRON D'AUTHENTIFICATION du système
   (patrons/authentification). Sa feuille vit dans la page du patron, pas dans
   les feuilles du système : elle est reprise ici telle quelle (.auth,
   .auth__boite, .auth__marque, .auth__note) — à remonter dans composants.css.
   Le code à chiffres est le code à usage unique du système (.code-uu,
   champs.css), pas le .code2fa du patron, qui en est une copie antérieure.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── la porte : la toile du système, la carte au centre ─────────────────── */
.toile__corps.porte { min-height: 100%; display: grid; place-items: center; padding-block: var(--e-6); }
.porte__carte { width: min(27rem, 100%); }

/* ── le patron d'authentification du système, tel quel ─────────────────── */
.auth { display: grid; place-items: center; }
.auth__boite { width: min(22rem, 100%); }
.auth__marque { display: flex; justify-content: center; margin-bottom: var(--e-4); }
.auth__boite h3 { margin: 0 0 var(--e-4); text-align: center; font-size: var(--t-sous); font-weight: var(--g-moyen); }
.auth__note { margin: var(--e-4) 0 0; text-align: center; font-size: var(--t-menu); color: var(--encre-douce); }
.auth__note a { color: var(--accent); }

/* ── ce que la porte ajoute au patron ───────────────────────────────────── */
/* Le titre d'une page entière est un h1 : la voix du titre du patron, un cran plus haut. */
.auth__boite h1 {
  margin: 0 0 var(--e-2); text-align: center;
  font-family: var(--police-titre); font-size: var(--t-section); font-weight: var(--g-moyen); line-height: var(--i-titre);
}
/* La phrase sous le titre (le patron l'écrit en ligne : marge basse, encre douce). */
.auth__txt { margin: 0 0 var(--e-4); text-align: center; color: var(--encre-douce); }
/* textes courts et centrés : des lignes égales (« Cette adresse ne mène nulle part. / Elle a peut-être changé. »)
   plutôt qu'un « peut- » en bout de ligne */
.auth__txt, .auth__note { text-wrap: balance; }
.auth__marque .marque { margin: 0; }
.auth__boite .alerte { margin-bottom: var(--e-4); }
.auth__boite .code-uu { justify-content: center; }
.auth__boite form + form, .auth__boite .btn + form, .auth__boite form + .btn { margin-top: var(--e-2); }
.auth__note form { display: inline; margin: 0; }
/* Un lien qui envoie un formulaire (« Renvoyer un code ») : la voix du lien du système, portée
   par un bouton — un envoi ne se fait jamais par un simple lien. */
button.lien { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; }
button.lien:disabled { color: var(--encre-faible); text-decoration-line: none; cursor: default; }

/* ── le compte ──────────────────────────────────────────────────────────── */
.compte__note { margin: var(--e-3) 0 0; font-size: var(--t-menu); color: var(--encre-douce); }
.rang > .compte__note { margin: 0; }