/* ═══════════════════════════════════════════════════════════════════════════
   LE PARCOURS D'AUTHENTIFICATION — une feuille, sept écrans.

   POURQUOI CETTE REFONTE ET PAS UN ALIGNEMENT (2026-09-08). Les sept gabarits
   de app/templates/auth/ portaient chacun sa copie du même écran : 1 891 lignes
   au total, dont près de 1 100 de CSS recopié. La passe de jetons du 2026-09-07
   les a mis sur la même palette — et c'est précisément ce qui a rendu le défaut
   visible au lieu de le régler : mêmes couleurs, mais une carte à 420 px ici et
   une à 440 là, un --rayon-xl sur l'une et un --rayon-lg sur l'autre, deux
   halos dorés en fond de la connexion et aucun ailleurs, un panneau sombre à
   gauche de la seule inscription, quatre pictogrammes à trois échelles.

   ⚠ CE PARCOURS SE TRAVERSE, IL NE SE VISITE PAS. Quelqu'un qui crée un compte
   voit quatre de ces écrans d'affilée — inscription, vérification, connexion,
   puis l'un des écrans de reprise. Un enchaînement qui change de mise en page à
   chaque étape ne dit pas « des pages différentes » : il dit quelque chose du
   produit derrière. C'est le seul endroit du site où la cohérence n'est pas une
   question de goût mais de crédibilité.

   ⚠ ILS SUIVENT LE THÈME CLAIR, ET C'EST LA RÈGLE DU DEHORS ET DU DEDANS.
   `data-theme="light"` est posé sur <html> par le socle, jamais laissé au
   localStorage : ces écrans appartiennent à la vitrine, pas à l'outil. On y
   entre en blanc, on en sort dans le sombre de l'application.

   Le balisage commun est dans app/templates/auth/_socle.html ; les sept pages
   n'écrivent plus que leur contenu, et aucune ne porte de bloc <style>.

   ⚠ AUCUNE COULEUR N'EST ÉCRITE ICI. Tout vient de systeme.css. Les seuls
   littéraux du fichier sont les quatre teintes du logo Google, qui est une
   marque tierce et ne se thème pas.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── LE SOL ──────────────────────────────────────────────────────────────── */

/*  La page est en --surface et la carte en --bg : en clair, c'est ce léger
    retrait du fond qui détache la carte. L'inverse — une carte grise sur une
    page blanche — la ferait passer pour un encart désactivé. */
body.auth {
  min-height: 100vh;
  background: var(--surface);
  display: flex;
  flex-direction: column;
}

/* ─── LA BARRE ────────────────────────────────────────────────────────────── */

/*  Ce n'est PAS la barre de la vitrine, et c'est délibéré : un tunnel
    d'inscription n'offre pas les cinq entrées du menu. Elle porte le retour à
    l'accueil, la contre-proposition (« déjà un compte ? ») et la langue, rien
    d'autre. Le sélecteur est ICI et non en panneau flottant : sur ces pages
    sans pied, le panneau fixe de _lang_switch.html venait se poser exactement
    sur le lien de droite. */
.a-barre {
  height: var(--barre);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  padding: 0 var(--esp-5);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.a-logo { display: inline-flex; align-items: center; gap: var(--esp-2); text-decoration: none; }
.a-logo-p { width: 26px; height: auto; display: block; }
/*  Le « P » suit le thème : un aplat d'or, et le creux prend le fond de la page.
    Le dégradé à trois arrêts qu'il portait était la rampe du thème SOMBRE — sur
    le blanc de la vitrine, son creux #0c0d12 faisait un trou noir. */
.a-logo-p .corps { fill: var(--or); }
.a-logo-p .trou  { fill: var(--bg); }
.a-logo-txt {
  font-size: var(--txt-lg);
  font-weight: 600;
  letter-spacing: var(--appr-titre);
  color: var(--text);
}

.a-barre-fin { display: flex; align-items: center; gap: var(--esp-4); }

.a-contre {
  font-size: var(--txt-sm);
  color: var(--text-ter);
  text-decoration: none;
  white-space: nowrap;
}
.a-contre strong { color: var(--or-texte); font-weight: 600; }
.a-contre:hover strong { text-decoration: underline; }

.a-langue {
  height: 32px;
  padding: 0 var(--esp-2);
  background: var(--surface);
  color: var(--text-sec);
  border: 1px solid var(--border);
  border-radius: var(--rayon-sm);
  font-size: var(--txt-2xs);
  font-family: var(--f-sans);
  cursor: pointer;
}

/* ─── LA CARTE ────────────────────────────────────────────────────────────── */

.a-scene {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--esp-7) var(--esp-4);
  gap: var(--esp-5);
}

/* ⚠ UNE OMBRE ET UNE BORDURE SUR LE MÊME OBJET EST L'INTERDIT I-17, et ici
   c'est la bordure qui travaille : la carte vaut `--bg` (#ffffff) sur une page
   qui vaut `--surface` (#fafafa) — deux blancs à un centième l'un de l'autre.
   Sans le filet, la carte n'a pas de bord ; sans l'ombre, elle en a un.
   Le § 2.5 le dit dans l'autre sens : « une ombre marque un objet qui FLOTTE
   au-dessus des autres » — il n'y a rien sous celle-ci. */
.a-carte {
  width: 100%;
  max-width: 400px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--rayon-lg);
  padding: var(--esp-6);
}
/*  L'inscription, et elle seule, met deux champs sur une ligne. */
.a-carte.large { max-width: 448px; }

/* ─── L'EN-TÊTE DE CARTE ──────────────────────────────────────────────────── */

/*  ⚠ UN SEUL PICTOGRAMME, À UNE SEULE ÉCHELLE. Les sept écrans en portaient
    quatre dessins à trois tailles (28, 56 et 72 px) et deux traitements —
    cerclé ici, en pastille pleine là. Il est cadré une fois : 44 px, un aplat
    teinté, un trait de 1,6. Une page qui n'a rien à montrer n'en met pas. */
.a-pito {
  width: 44px; height: 44px;
  margin: 0 auto var(--esp-4);
  border-radius: var(--rayon);
  display: flex; align-items: center; justify-content: center;
  background: var(--or-light);
  color: var(--or-texte);
}
.a-pito svg { width: 22px; height: 22px; }
.a-pito.ok   { background: var(--green-soft); color: var(--green); }
.a-pito.attn { background: var(--warn-soft);  color: var(--warn); }

.a-titre {
  font-size: var(--txt-2xl);
  font-weight: 600;
  letter-spacing: var(--appr-titre);
  line-height: var(--inter-titre);
  color: var(--text);
  text-align: center;
}
.a-sous {
  margin-top: var(--esp-2);
  font-size: var(--txt-sm);
  line-height: var(--inter-ui);
  color: var(--text-sec);
  text-align: center;
  text-wrap: pretty;
}
.a-sous strong { color: var(--text); font-weight: 600; }
.a-tete { margin-bottom: var(--esp-5); }

/* ─── LES CHAMPS ──────────────────────────────────────────────────────────── */

.a-champ { margin-bottom: var(--esp-4); }

.a-libelle-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: var(--esp-3); }
.a-libelle {
  display: block;
  margin-bottom: var(--esp-2);
  font-size: var(--txt-2xs);
  font-weight: 600;
  color: var(--text-sec);
}
.a-lien-libelle { font-size: var(--txt-2xs); color: var(--or-texte); text-decoration: none; font-weight: 500; }
.a-lien-libelle:hover { text-decoration: underline; }
.a-option { font-weight: 400; color: var(--text-ter); }

.a-saisie {
  width: 100%;
  height: 42px;
  padding: 0 var(--esp-3);
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: var(--rayon-sm);
  color: var(--text);
  font-size: var(--txt-sm);
  font-family: var(--f-sans);
  transition: border-color var(--vite) var(--ease);
}
.a-saisie::placeholder { color: var(--text-ter); }
.a-saisie:hover { border-color: var(--text-ter); }
/*  Le focus est celui du système — un seul anneau sur tout le site. */
.a-saisie:focus-visible { border-color: var(--or); }
.a-saisie.faux { border-color: var(--red); }

.a-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-3); }
.a-duo .a-champ { margin-bottom: 0; }

/*  Le champ à œil. */
.a-mdp { position: relative; }
.a-mdp .a-saisie { padding-right: 42px; }
.a-oeil {
  position: absolute; right: 4px; top: 4px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--text-ter);
  border-radius: var(--rayon-xs);
}
.a-oeil:hover { color: var(--text-sec); background: var(--survol); }
.a-oeil svg { width: 17px; height: 17px; }
.a-oeil[aria-pressed="true"] { color: var(--or-texte); }

/* ─── LES BOUTONS ─────────────────────────────────────────────────────────── */

/*  ⚠ L'ACTION PRIMAIRE EST UN APLAT D'OR AVEC L'ENCRE --on-or, ET C'EST UNE
    CORRECTION DE CONTRASTE, PAS UN GOÛT. Un libellé doré sur fond clair tient à
    2,8:1 ; l'encre sur l'aplat mesure 6,36:1. C'est le bouton qui décide de
    tout le reste du parcours : il se lit. */
.a-btn {
  width: 100%;
  height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
  border: 1px solid transparent;
  border-radius: var(--rayon-sm);
  font-size: var(--txt-sm);
  font-weight: 600;
  font-family: var(--f-sans);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--vite) var(--ease), border-color var(--vite) var(--ease);
}
.a-btn-or { background: var(--or); color: var(--on-or); box-shadow: var(--ombre-or); }
.a-btn-or:hover { background: var(--or-vif); }
.a-btn-or:active { background: var(--or-dark); }

.a-btn-nu { background: var(--bg); color: var(--text); border-color: var(--border-2); }
.a-btn-nu:hover { background: var(--survol); border-color: var(--text-ter); }
.a-btn-nu svg { width: 18px; height: 18px; flex: none; }

form .a-btn, .a-champ + .a-btn, .a-btn + .a-btn { margin-top: var(--esp-4); }

/*  Le retour d'étape. Un lien qui aurait la forme d'un bouton serait un second
    appel à l'action, et il n'y en a qu'un par écran. */
.a-retour {
  display: inline-flex; align-items: center; gap: var(--esp-1);
  margin-bottom: var(--esp-4);
  background: none; border: none; padding: 0;
  font-size: var(--txt-xs); font-family: var(--f-sans); color: var(--text-ter);
  cursor: pointer; text-decoration: none;
}
.a-retour:hover { color: var(--text-sec); }
.a-retour svg { width: 13px; height: 13px; }

/* ─── LE SÉPARATEUR ───────────────────────────────────────────────────────── */

.a-ou {
  display: flex; align-items: center; gap: var(--esp-3);
  margin: var(--esp-4) 0;
  font-size: var(--txt-3xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-ter);
}
.a-ou::before, .a-ou::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ─── LES MESSAGES ────────────────────────────────────────────────────────── */

.a-msg {
  display: flex; align-items: flex-start; gap: var(--esp-2);
  margin-bottom: var(--esp-4);
  padding: var(--esp-3);
  border: 1px solid;
  border-radius: var(--rayon-sm);
  font-size: var(--txt-xs);
  line-height: var(--inter-ui);
}
.a-msg svg { flex: none; margin-top: 1px; }
.a-msg-err { background: var(--red-soft);   border-color: var(--red-border);   color: var(--red); }
.a-msg-ok  { background: var(--green-soft); border-color: var(--green-border); color: var(--green); }

/*  L'erreur d'un champ, sous le champ. Elle est masquée par DÉFAUT ici et non
    par un attribut de style : une page qui tomberait sans JavaScript afficherait
    sinon en permanence un message d'erreur sur un formulaire intact. */
.a-err-champ {
  display: none;
  margin-top: var(--esp-2);
  font-size: var(--txt-2xs);
  color: var(--red);
}

/* ─── LE BAS DE CARTE ─────────────────────────────────────────────────────── */

.a-pied {
  margin-top: var(--esp-5);
  padding-top: var(--esp-4);
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: var(--txt-sm);
  color: var(--text-sec);
}
.a-pied a { color: var(--or-texte); text-decoration: none; font-weight: 600; }
.a-pied a:hover { text-decoration: underline; }

.a-sorties { display: flex; flex-direction: column; align-items: center; gap: var(--esp-3); }
.a-sorties a { color: var(--or-texte); text-decoration: none; font-size: var(--txt-sm); font-weight: 600; }
.a-sorties a.discret { color: var(--text-ter); font-weight: 400; }
.a-sorties a:hover { text-decoration: underline; }

/* ─── LES CASES ET LES MENTIONS ───────────────────────────────────────────── */

.a-case {
  display: flex; align-items: flex-start; gap: var(--esp-2);
  margin-bottom: var(--esp-4);
  font-size: var(--txt-xs);
  line-height: var(--inter-ui);
  color: var(--text-sec);
  cursor: pointer;
}
.a-case input { margin-top: 2px; width: 15px; height: 15px; accent-color: var(--or); flex: none; cursor: pointer; }
.a-case a { color: var(--or-texte); font-weight: 500; }

.a-mention {
  margin-top: var(--esp-3);
  font-size: var(--txt-3xs);
  line-height: var(--inter-ui);
  color: var(--text-ter);
  text-align: center;
}
.a-mention a { color: var(--text-ter); text-decoration: underline; }

/* ─── LA JAUGE DE MOT DE PASSE ────────────────────────────────────────────── */

/*  ⚠ QUATRE SEGMENTS, ET LES COULEURS VIENNENT DES JETONS. Les deux versions
    d'avant écrivaient cinq hexadécimaux Tailwind dans leur JavaScript
    (#ef4444, #f97316, #eab308, #22c55e, #16a34a) — cinq couleurs qu'aucun thème
    ne pouvait suivre, posées sur les deux seules pages où l'on choisit un
    secret. La force se lit maintenant dans un attribut, et le CSS la peint. */
.a-jauge { display: flex; gap: var(--esp-1); margin-top: var(--esp-2); }
.a-jauge span {
  flex: 1; height: 3px;
  background: var(--surface-3);
  border-radius: var(--rayon-pilule);
  transition: background var(--vite) var(--ease);
}
.a-jauge[data-force="1"] span:nth-child(-n+1) { background: var(--red); }
.a-jauge[data-force="2"] span:nth-child(-n+2) { background: var(--red); }
.a-jauge[data-force="3"] span:nth-child(-n+3) { background: var(--warn); }
.a-jauge[data-force="4"] span                 { background: var(--green); }

.a-criteres {
  display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-3);
  margin-top: var(--esp-2);
  font-size: var(--txt-3xs);
  color: var(--text-ter);
}
.a-critere { display: inline-flex; align-items: center; gap: var(--esp-1); }
.a-critere::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--text-ter); opacity: .5;
}
.a-critere.tenu { color: var(--green); }
.a-critere.tenu::before { background: var(--green); opacity: 1; }

/* ─── LES ÉTAPES ──────────────────────────────────────────────────────────── */

.a-etapes { display: flex; align-items: center; gap: var(--esp-2); margin-bottom: var(--esp-5); }
.a-etapes i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--surface-3); border: 1px solid var(--border-2);
}
.a-etapes i.ici, .a-etapes i.faite { background: var(--or); border-color: var(--or); }
.a-etapes b { flex: 1; height: 1px; background: var(--border); }
.a-etapes b.faite { background: var(--or); }
.a-etape { display: none; }
.a-etape.ici { display: block; }

/* ─── LA RASSURANCE ───────────────────────────────────────────────────────── */

/*  ⚠ CE BLOC A REMPLACÉ UN PANNEAU SOMBRE. L'inscription était le seul écran en
    deux colonnes, avec à gauche un panneau #0c0d12 portant trois arguments — au
    milieu d'un parcours blanc, et sur la page même où l'on accepte les CGU.
    Les trois arguments restent, mot pour mot : ils passent SOUS la carte, dans
    le thème de la page. Ce qui tombe est le panneau, pas le contenu. */
.a-dessous { width: 100%; max-width: 448px; }
.a-atouts { display: grid; gap: var(--esp-3); }
.a-atout { display: flex; align-items: flex-start; gap: var(--esp-3); }
/* ⚠ TROIS PASTILLES CARRÉES À FOND D'OR, UNE PAR ARGUMENT. L'or paraît à
   QUATRE endroits sur ce site (§ 3.4) — le « P », l'action primaire, l'état
   suivi, le filet de la section courante — et « le fond de chaque icône de la
   liste » n'en est aucun. Un aplat qui revient à chaque ligne ne distingue
   rien : c'est une atmosphère, pas une marque. Le pictogramme reste, dessiné,
   dans l'encre des mentions ; le carré teinté part. */
.a-atout-p {
  flex: none; width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-ter);
}
.a-atout-p svg { width: 15px; height: 15px; }
.a-atout strong { display: block; font-size: var(--txt-xs); font-weight: 600; color: var(--text); }
.a-atout span   { display: block; margin-top: 2px; font-size: var(--txt-2xs);
                  line-height: var(--inter-ui); color: var(--text-ter); }

/* ⚠ LES DEUX COCHES VERTES SONT PARTIES DU BALISAGE (INTERDIT I-15) : une
   coche qui n'a jamais de jumelle DÉCOCHÉE n'encode aucune information, elle
   décore. Les deux mentions restent, mot pour mot, séparées par un filet —
   la même écriture que `.v-friction` de la vitrine. */
.a-gages {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--esp-2) var(--esp-4);
  margin-top: var(--esp-4); font-size: var(--txt-2xs); color: var(--text-ter);
}
.a-gage { display: inline-flex; align-items: center; }
.a-gage + .a-gage { padding-left: var(--esp-4); border-left: 1px solid var(--border); }

/* ─── L'ATTENTE ───────────────────────────────────────────────────────────── */

.a-note {
  margin-top: var(--esp-4);
  padding: var(--esp-3);
  background: var(--surface);
  border-radius: var(--rayon-sm);
  font-size: var(--txt-2xs);
  line-height: var(--inter-ui);
  color: var(--text-ter);
  text-align: center;
}

/* ─── PETITS ÉCRANS ───────────────────────────────────────────────────────── */

@media (max-width: 520px) {
  .a-barre { padding: 0 var(--esp-4); gap: var(--esp-3); }
  .a-logo-txt { display: none; }          /* le « P » suffit à 420 px */
  .a-scene { padding: var(--esp-5) var(--esp-3); }
  .a-carte { padding: var(--esp-5) var(--esp-4); }
  .a-titre { font-size: var(--txt-xl); }
  .a-duo { grid-template-columns: 1fr; gap: 0; }
  .a-duo .a-champ { margin-bottom: var(--esp-4); }
}
