/* Statsmaker v2 — famille « authentification » (design partie 7).
 *
 * Feuille PARTAGÉE par les six gabarits d'authentification : connexion,
 * inscription (à venir) et les quatre écrans de réinitialisation. Une seule
 * feuille, parce qu'ils partagent tout le contenant — coquille réduite, carte,
 * grammaire de champ, gestion d'erreur.
 *
 * ⚠️ Elle ne contient QUE des classes `.sm-auth-*` (plus une règle d'alignement
 * pour l'en-tête réduit). Aucune règle générique — pas de `a`, pas de `.btn` :
 * elle est chargée APRÈS `sm-shell.css` et rebattrait les classes de composant.
 * C'est le mécanisme exact qui avait peint `.sm-hd-signin` bleu sur bleu, sur
 * le bouton le plus important d'un produit fermé (`test_v2_css.py` échoue si la
 * règle revient).
 *
 * ⚠️ Aucun `outline: none`, nulle part : `ds-tokens.css:109` pose déjà l'anneau
 * de focus (6,17:1 en clair, 6,89:1 en sombre). Il n'y a rien à ajouter et rien
 * à écraser.
 *
 * Aucune valeur de couleur, de rayon ou de taille en dur : tout vient de
 * `sm-tokens.css` et de `sm-theme.css`.
 */

/* ── L'en-tête réduit ────────────────────────────────────────────────
 * `.sm-hd-acts` (la fente d'actions) porte le `margin-left: auto` sur
 * l'en-tête complet. L'en-tête réduit n'a pas de fente : sans cette ligne, le
 * groupe de droite se colle au logo. La règle vit ICI et non dans
 * `sm-shell.css` : sa portée est la famille auth, et elle n'a pas à peser sur
 * la coquille de tous les écrans. */
.sm-hd-min .sm-hd-wrap { margin-left: auto; }

/* ── La grille de l'écran ────────────────────────────────────────────
 * Trois variables LOCALES, déclarées sur la racine de l'écran : elles ne
 * servent qu'ici et n'ont pas à polluer la couche sémantique. */
.sm-auth {
  --auth-carte:   420px;   /* largeur de la carte */
  --auth-max:     960px;   /* largeur de l'ensemble deux colonnes */
  --auth-bascule: 900px;   /* point de repli — voir la note de la media query */

  display: grid;
  grid-template-columns: minmax(0, var(--auth-carte)) minmax(0, 1fr);
  gap: var(--sp-10);
  align-items: start;
  max-width: var(--auth-max);
  margin: 0 auto;
  /* Alignement en HAUT, jamais centré : un centrage vertical fait sauter la
     carte d'une cinquantaine de pixels au moment où un message d'erreur
     apparaît — c'est-à-dire exactement quand l'utilisateur relit. */
  padding-block-start: clamp(var(--sp-9), 6vh, 56px);
}

/* ⚠️ Une media query ne peut PAS lire une variable CSS : `--auth-bascule`
   documente la valeur, ce `900px` la répète. C'est la seule duplication tolérée
   du fichier — un futur ajustement doit changer les DEUX. */
@media (max-width: 900px) {
  .sm-auth {
    grid-template-columns: minmax(0, 1fr);
    max-width: var(--auth-carte);
    gap: var(--sp-9);
  }
}

/* Variante à carte seule : les quatre écrans « mot de passe oublié » sont des
   étapes d'un tunnel, pas des pages d'entrée — il n'y a rien à y vendre. */
.sm-auth-solo {
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--auth-carte);
}

/* Règles de mot de passe affichées d'avance (lues dans
   `AUTH_PASSWORD_VALIDATORS`, jamais recopiées dans un gabarit). */
.sm-auth-regles {
  margin: 0;
  padding-inline-start: var(--sp-8);
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--color-neutral-700);
}

/* ── La carte (colonne 1 : la tâche) ─────────────────────────────── */
.sm-auth-carte { padding: var(--sp-9); gap: var(--sp-5); }

@media (max-width: 640px) {
  /* À pleine largeur, une ombre ne sépare plus rien : elle salit. */
  .sm-auth-carte { padding: var(--sp-7); box-shadow: none; }
}

.sm-auth-titre {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  color: var(--color-text);
}

.sm-auth-intro {
  margin: 0;
  font-size: var(--fs-meta);
  color: var(--color-neutral-700);
  text-wrap: pretty;
}

/* ── Bandeau de motif (`?raison=`) ───────────────────────────────── */
.sm-auth-motif {
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-sm);
  font-size: var(--fs-meta);
  line-height: 1.45;
  text-wrap: pretty;
}
.sm-auth-motif[data-sm-ton="accent"] {
  background: var(--color-accent-100);
  color: var(--color-accent-800);
}
/* Le vert du produit = « c'est fait, tout va bien ». */
.sm-auth-motif[data-sm-ton="succes"] {
  background: var(--sm-scope-bg);
  color: var(--sm-scope-fg);
  border: 1px solid var(--sm-scope-border);
}
.sm-auth-motif strong { font-weight: 700; }

/* ── Résumé d'erreur ─────────────────────────────────────────────── */
.sm-auth-alerte {
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--sm-loss);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--sm-loss) 10%, transparent);
  color: var(--sm-loss-text);
  font-size: var(--fs-body-sm);
  line-height: 1.45;
  text-wrap: pretty;
}
.sm-auth-alerte p { margin: 0; }
.sm-auth-alerte p + p { margin-top: var(--sp-1); }
.sm-auth-alerte a { color: inherit; }
/* Variante « attente » de l'anti-force-brute (§4.6) : la brique serveur
   n'existe pas encore, l'habillage est prêt pour qu'elle n'exige aucune reprise
   graphique. ⚠️ `--sm-draw` est un REMPLISSAGE : en texte il tombe à 2,58:1 en
   mode clair (F-1). Le texte prend `--sm-draw-text`. */
.sm-auth-alerte[data-sm-gravite="attente"] {
  border-left-color: var(--sm-draw);
  background: color-mix(in srgb, var(--sm-draw) 12%, transparent);
  color: var(--sm-draw-text);
}

/* ── Le formulaire ───────────────────────────────────────────────── */
.sm-auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  margin: 0;
}

/* Le champ de mot de passe et son œil. L'œil est positionné DANS le champ ;
   le champ lui réserve sa place, pour que le texte ne passe pas dessous.
   ⚠️ Le repère de position est la BOÎTE du champ, pas le `<p>` : celui-ci porte
   aussi l'étiquette et le message d'erreur, et l'œil s'y ancrerait de travers
   dès qu'une erreur apparaît. */
.sm-auth-pw .input { padding-inline-end: 48px; }
.sm-auth-pw-boite { position: relative; display: block; }

.sm-auth-oeil {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: var(--sm-tap-min);
  min-height: var(--sm-tap-min);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-neutral-700);
  cursor: pointer;
  border-radius: var(--r-pill);
}
.sm-auth-oeil[hidden] { display: none; }
/* L'œil est À L'INTÉRIEUR du champ : un anneau posé à 2 px de décalage
   déborderait sous la bordure. Même exception que pour les cellules de bord du
   tableau dense — on ne SUPPRIME pas l'anneau, on le ramène au ras. */
.sm-auth-oeil:focus-visible { outline-offset: 0; outline-width: 3px; }
.sm-auth-oeil svg { display: block; }
/* L'état pressé passe par `aria-pressed` ET par le changement d'icône :
   aucune couleur n'est le seul porteur d'information (1.4.1). */
.sm-auth-oeil .sm-auth-oeil-off { display: none; }
.sm-auth-oeil[aria-pressed="true"] .sm-auth-oeil-on { display: none; }
.sm-auth-oeil[aria-pressed="true"] .sm-auth-oeil-off { display: block; }

/* Le lien « Mot de passe oublié ? » est APRÈS le champ : rien ne s'intercale
   entre une étiquette et sa saisie dans l'ordre de tabulation. */
.sm-auth-oubli { margin: 0; font-size: var(--fs-meta); }
/* 🔴 Sur la page la plus traversée du produit, ce lien portait `.sm-touch` : une
 * zone de 44 px centrée sur une ligne de 17, donc 13,5 px de débord qui
 * recouvraient la case « Se souvenir de moi » juste dessous — on cochait sans
 * le vouloir en visant le lien. La cible est reprise DANS le lien : même
 * 44 px, mais qui poussent au lieu de recouvrir (R-T, corollaire 2). */
.sm-auth-oubli-a {
  display: inline-flex; align-items: center; min-height: var(--sm-tap-min);
}

.sm-auth-rester { margin: 0; }
.sm-auth-rester .radio {
  /* La pastille fait 16 px : c'est le LABEL entier qui est la cible. */
  min-height: var(--sm-tap-min);
  align-items: center;
  font-size: var(--fs-meta);
}

.sm-auth-submit { margin-top: var(--sp-1); }

.sm-auth-bascule {
  margin: 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--color-divider);
  font-size: var(--fs-meta);
  color: var(--color-neutral-700);
  text-align: center;
}

/* ── Colonne 2 : le produit ──────────────────────────────────────── */
.sm-auth-produit {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding-block-start: var(--sp-3);
}
.sm-auth-sourcil {
  margin: 0;
  font-size: var(--fs-cap);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
}
.sm-auth-phrase {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-h2-sec);
  line-height: 1.25;
  color: var(--color-text);
  text-wrap: balance;
}
.sm-auth-chiffres {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5);
  margin: var(--sp-2) 0;
  padding: 0;
}
.sm-auth-chiffre-v {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-num-lg);
  line-height: 1.1;
  color: var(--color-text);
}
.sm-auth-chiffre-l {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-cap);
  line-height: 1.3;
  color: var(--color-neutral-700);
  text-wrap: pretty;
}
.sm-auth-liens {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  font-size: var(--fs-meta);
}

@media (max-width: 900px) {
  /* Le panneau passe SOUS la carte et se compacte. Rien n'est masqué :
     `display: none` sur du contenu textuel est une perte sèche pour le
     référencement de l'une des six pages publiques du produit. */
  .sm-auth-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Écran d'inscription (design partie 8 §3.4) ──────────────────────
 * ~50 lignes, toutes en `.sm-auth-*`, aucune règle générique, aucune valeur
 * en dur. Aucun token global nouveau : l'inscription réutilise le contenant
 * de la connexion, c'est tout l'intérêt de la partager. */

/* Aide sous un champ (« Sert à adapter le contenu. Modifiable à tout
   moment. »). Ce n'est PAS un message d'erreur : ni rouge, ni conditionnel. */
.sm-auth-aide {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-cap);
  color: var(--color-neutral-700);
}

/* Règle de mot de passe SATISFAITE. 🛑 Il n'existe volontairement AUCUN état
   « échouée » : « non satisfaite » a exactement le rendu de « neutre ». On ne
   reproche rien à quelqu'un qui est en train de taper — le rouge n'apparaît
   qu'après l'envoi, et c'est alors le message du serveur qui le porte.
   La couleur n'est pas seule porteuse d'information : l'îlot insère aussi un
   texte masqué (« Fait : »), et la puce change de forme. */
.sm-auth-regles [data-sm-satisfaite] {
  color: var(--sm-scope-fg);
  /* La PUCE change de forme, pas seulement de couleur (1.4.1). Un navigateur
     qui ne sait pas rendre une puce textuelle garde la puce ronde : le sens
     reste porté par le texte masqué que l'îlot insère (« Fait : »), jamais par
     la couleur seule. */
  list-style-type: "\2713  ";
}

/* Bloc CGU. La cible tactile est le LABEL ENTIER : la pastille fait 16 px. */
.sm-auth-cgu { margin: 0; font-size: var(--fs-meta); }
.sm-auth-cgu .radio {
  min-height: var(--sm-tap-min);
  /* En haut, jamais centré : le texte fait 2 à 3 lignes, et un centrage
     vertical décalerait la pastille par rapport à sa première ligne. */
  align-items: flex-start;
}
/* Erreur du bloc CGU : un liseré, PAS un fond rouge. La case est déjà signalée
   par `aria-invalid` et par son message ; un aplat de plus ferait du
   consentement la faute la plus voyante du formulaire. */
.sm-auth-cgu-err {
  border-left: 3px solid var(--sm-loss);
  padding-inline-start: var(--sp-4);
}

/* ── Modale des documents légaux ─────────────────────────────────── */
.sm-auth-legal {
  max-width: 720px;
  width: calc(100% - var(--sp-9));
  padding: var(--sp-7);
  border: 0;
  border-radius: var(--r-card);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
}
.sm-auth-legal::backdrop {
  background: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.sm-auth-legal-titre {
  margin: 0 0 var(--sp-5);
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
}
/* Zone défilante : elle porte `tabindex="0"` dans le gabarit, sans quoi elle
   serait inatteignable au clavier. */
.sm-auth-legal-corps {
  max-height: 70vh;
  overflow: auto;
  font-size: var(--fs-body-sm);
  line-height: 1.55;
}
.sm-auth-legal-echec { margin: var(--sp-5) 0 0; font-size: var(--fs-meta); }
.sm-auth-legal-pied {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}