/* Hallmark · checked: 2026-11-13 · genre: modern-minimal (inferred) · shape: app screen
 * floor: tokens, 4px scale, no gradient, no glass, no card in card; focus, hover and active on every control; reduced motion respected
 * built: the project · scope: login, sign-up, password and access-gate screens */
/* CASPer Trainer: login, sign-up, password and access-gate screens (see js/authscreen.js).

   These screens use the dashboard design system as is: css/tokens.css, layout.css, glass.css and editorial.css,
   which index.html links in <head> before any script runs (so there is no unstyled flash and the theme set by
   js/theme-init.js applies at once). Components come from those files: .bar, .wordmark, .theme-btn, .page, .col, .entete,
   .surtitre, .carte, .champ, .connexion-champ, .seg, .btn (--primaire, --secondaire, --texte, --grand), .lien, .alerte.
   This file only lays out the auth card and the few small pieces the dashboard has no equivalent for.
   No colour, font, radius or shadow is defined here: tokens only. */

.auth-page { min-height: 100dvh; }
.auth-top { padding-top: clamp(16px, 2vw, 24px); }
.auth-bar .bar-droite { grid-column: 3; }
.auth-col { display: grid; gap: 16px; align-content: start; min-width: 0; max-width: 34rem; }
.auth-col--attente { padding-top: clamp(40px, 8vh, 88px); }
.auth-col .entete { padding-bottom: 12px; }
.auth-titre { overflow-wrap: anywhere; }

/* The dashboard .carte is a selectable choice card (pointer, accent border on hover): here it is a plain container. */
.auth-carte { display: grid; gap: 16px; align-content: start; cursor: default; padding: 24px; min-width: 0; }
.auth-carte:hover { border-color: var(--verre-bord); }
.auth-carte p { margin: 0; }
.auth-attente { display: flex; align-items: center; gap: 16px; }

.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.auth-tabs .seg__b { padding: 0 12px; }

.auth-form { display: grid; gap: 16px; margin: 0; }
.auth-ligne { display: grid; gap: 8px; }
.auth-ligne label, .auth-form > label { color: var(--ardoise); font-size: var(--t15); }
.auth-champ { min-height: 48px; font-size: var(--t17); }
.auth-aide { color: var(--ardoise); font-size: var(--t13); line-height: 1.4; }
.auth-actions { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.auth-actions .btn { white-space: normal; text-align: center; }
.auth-liens { font-size: var(--t15); }

.auth-msg { font-size: var(--t15); line-height: 1.4; }
.auth-msg:empty { display: none; }
.auth-msg--ok { color: var(--accent); }

.auth-code { width: 100%; font-variant-numeric: tabular-nums; }

.auth-etapes { margin: 0; padding: 0; list-style: none; counter-reset: etape; display: grid; gap: 16px; }
.auth-etapes li { position: relative; padding-left: 40px; counter-increment: etape; display: grid; gap: 12px; }
.auth-etapes li::before {
  content: counter(etape);
  position: absolute; left: 0; top: -1px;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent); font: 600 var(--t13) / 1 var(--sans);
}
.auth-copie, .auth-confirm { background: var(--verre-fort); border: 1px solid var(--verre-bord); border-radius: var(--r-champ); }
.auth-copie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px; }
.auth-copie-etiquette { flex: 1 0 100%; font-size: var(--t13); color: var(--ardoise); }
.auth-copie-valeur { flex: 1 1 12rem; min-width: 0; font: 600 var(--t17) / 1.3 var(--sans); font-variant-numeric: tabular-nums; color: var(--encre); overflow-wrap: anywhere; user-select: all; }
.auth-copier { min-height: 38px; padding: 0 16px; }
.auth-validite { color: var(--ardoise); }
.auth-confirm { display: grid; gap: 12px; padding: 12px 16px; }
.auth-confirm[hidden] { display: none; }
.auth-pied { color: var(--ardoise); font-size: var(--t13); padding: 0 8px; overflow-wrap: anywhere; }
.auth-pied .lien { color: var(--encre); cursor: pointer; }

.auth-spin { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 3px solid var(--filet); border-top-color: var(--accent); animation: auth-tourne 0.9s linear infinite; }
@keyframes auth-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .auth-spin { animation-duration: 3s; } }

@media (max-width: 760px) {
  .auth-bar .bar-droite { grid-column: 2; }
  .auth-carte { padding: 16px; }
}

.auth-liens--rang { display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* Focus et appui des éléments propres à ces écrans (les boutons .btn, .seg et .lien suivent editorial.css) */
.auth-copie-valeur:focus-visible, .auth-pied .lien:focus-visible, .auth-champ:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.auth-pied .lien:active { background: var(--presse); }