/* =====================================================================
   Écrans d'authentification — 13 des 16 gabarits du socle.
   Porté de `css/login.css` de la charte fournie, avec UNE différence de
   structure qui n'est pas cosmétique : la maquette posait
   `#login{position:fixed;inset:0;z-index:100}` parce qu'elle logeait la
   connexion et l'application dans un même document HTML, l'une masquant
   l'autre en JavaScript. Recopiée dans un socle multi-routes, cette règle
   superpose l'écran de connexion à TOUTES les pages — et l'échec est muet,
   sans erreur en console. La mise en page est donc en flux normal.

   Ces écrans sont traversés par les DEUX populations : les membres qui
   administrent, et les acheteurs d'une boutique. Ils ne portent donc aucun
   élément de back-office — ni menu latéral, ni barre supérieure.
   ===================================================================== */
.auth{min-height:100dvh;display:flex;flex-direction:column;background:var(--marque)}

/* Le volet de marque ne disparaît PLUS sous 880px : il s'y réduit à un bandeau
   qui ne porte que le nom ou le logo. Le faire disparaître entièrement laissait
   un écran de connexion sans aucune identité sur téléphone — inacceptable pour
   un socle revendu en marque blanche, où c'est la seule identité visible.
   Seule l'accroche s'efface : elle, volerait la place au formulaire.

   Le texte du volet suit --accroche-encre — BLANCHE aujourd'hui, sur décision du client
   prise en voyant les deux versions. La première écriture imposait le charbon (7,32:1 contre
   1,97:1 pour le blanc) et ce commentaire disait « jamais blanc » : la mesure reste vraie, la
   règle a cédé devant la maquette validée. Le jeton documente le choix et le chemin de
   retour ; ici on ne fait que le suivre. */
.auth-visuel{display:flex;flex-direction:column;gap:var(--e-6);position:relative;overflow:hidden;color:var(--accroche-encre);padding:var(--e-4)}
/* La marque du volet s'écrit en capitales, comme la base fournie : c'est une enseigne, pas une
   phrase. La casse vient du jeton des étiquettes — une charte qui la débraye la débraye
   partout d'un coup. */
.auth-marque{display:flex;align-items:center;gap:var(--e-3);font-weight:700;font-size:var(--fs-md);
  text-transform:var(--casse-etiquette);letter-spacing:var(--interlettrage-etiquette)}
.auth-marque small{font-weight:400}
/* `height="32"` sur la balise ne suffit pas : `img{height:auto}` de base.css le
   bat, un attribut de présentation ayant la priorité la plus basse. Sans cette
   règle, un logo client s'affiche à sa hauteur intrinsèque. */
.auth-marque img{height:var(--e-8);width:auto}
/* Le DÉCOR du volet — le dessin de la base fournie, servi tel quel. Purement décoratif, dans
   un conteneur `aria-hidden` : il disparaît avec le volet sous 880 px.

   C'est un FOND, pas un élément du flux — le positionnement exact de la base fournie
   (`.lentille{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}`). Posé dans
   la colonne flex, il restait borné par la place que marque et accroche lui laissaient et
   flottait, petit, au milieu du volet. En absolu il HABITE le volet, passe sous les textes, et
   se découpe à l'`overflow:hidden` sur un écran court — le comportement du fichier de 760 px
   dans la maquette. */
.auth-decor{display:none}
.auth-decor img{width:100%;max-width:var(--l-decor);height:auto;display:block;margin:0 auto}

.auth-accroche{display:none;max-width:var(--l-accroche)}
.auth-accroche h2{font-size:var(--fs-xl);font-weight:600;line-height:1.3;color:var(--accroche-encre)}
.auth-accroche p{margin-top:var(--e-3);font-size:var(--fs-base);color:var(--accroche-encre)}

@media (min-width:880px){
  .auth{flex-direction:row}
  .auth-visuel{flex:1.1;justify-content:space-between;padding:var(--e-12)}
  .auth-accroche{display:block}
  .auth-decor{display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%}
}

.auth-panneau{flex:1;background:var(--surface);display:flex;align-items:center;justify-content:center;padding:var(--e-8) var(--e-4)}
/* La marque AU-DESSUS du formulaire. Le volet gauche est `aria-hidden` et disparaît sous
   880 px : sans cette ligne, ni un lecteur d'écran ni un téléphone ne savaient chez qui ils
   arrivaient. La suite s'écrit en gélule, comme la base fournie. */
.auth-carte-marque{display:flex;align-items:center;gap:var(--e-2);margin-bottom:var(--e-6);
  font-weight:700;font-size:var(--fs-md);color:var(--texte-fort);
  text-transform:var(--casse-etiquette);letter-spacing:var(--interlettrage-etiquette)}
.auth-carte-marque img{height:var(--e-8);width:auto}
.auth-carte-marque small{font-weight:600;font-size:var(--fs-xs);color:var(--marque-encre);
  border:1px solid var(--marque);border-radius:var(--radius-gelule);padding:0 var(--e-2)}
.auth-carte{width:100%;max-width:var(--l-carte-auth)}
.auth-carte h1{margin-bottom:var(--e-2)}
.auth-carte .sous{margin-bottom:var(--e-6);font-size:var(--fs-base)}

.auth-options{display:flex;justify-content:space-between;align-items:center;gap:var(--e-3);flex-wrap:wrap;margin:var(--e-2) 0 var(--e-6);font-size:var(--fs-sm)}

.auth-pied{margin-top:var(--e-6);font-size:var(--fs-sm);text-align:center}
.auth-pied a{font-weight:600}
/* Le RETOUR d'un écran de connexion : le composant `.btn-retour`, EN HAUT de la carte, avant le titre
   — la règle de tout retour du socle (docs/methode-de-travail.md § 3.8). Il vivait en pied, en lien. */
.auth-retour{margin:0 0 var(--e-6)}

/* Les codes de secours : lus une seule fois, recopiés à la main ou imprimés.
   Chasse fixe pour qu'un 0 ne se confonde pas avec un O. */
.codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--l-code-secours),1fr));gap:var(--e-2);margin:var(--e-4) 0}
.codes li{background:var(--bg);border:1px solid var(--ligne);border-radius:var(--radius-sm);padding:var(--e-2) var(--e-3)}
.codes code{font-family:var(--font-mono);font-size:var(--fs-base);letter-spacing:.04em;color:var(--texte-fort)}


@media print{
  .auth{background:none;min-height:0}
  .auth-visuel,.auth-pied{display:none}
  .auth-panneau{padding:0}
}

/* Le bouton plein prend toute la largeur ICI, et nulle part ailleurs : la carte
   d'authentification est étroite, le bouton y est seul, et l'aligner sur le bord des champs
   est ce qui donne au formulaire sa colonne. Dans le back-office, la même règle produisait un
   bandeau noir sur toute la page. */
.auth-carte .btn-primaire{width:100%}