/* 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: locked account banner, guest and free exam screens */
/* CASPer Trainer : comptes à activer, examen gratuit, invité.
   Jetons éditoriaux seulement (tokens.css). Pas de couleur écrite en dur : le sombre et le noir et blanc suivent les jetons. */

.insecable { white-space: nowrap; }

/* ---------- Bandeau « accès à activer » (haut de chaque écran) ---------- */
.compte-bandeau-hote { padding-bottom: 0; }
.compte-bandeau-hote .col { padding-top: 20px; }
.compte-bandeau {
  display: grid; gap: 12px;
  padding: 16px 20px;
  border: 1px solid var(--filet);
  border-radius: var(--r-carte);
  background: var(--surface);
  color: var(--encre);
}
.compte-bandeau--expired { border-color: var(--alerte); }
.compte-bandeau__texte { margin: 0; font-size: var(--t17); line-height: 1.5; color: var(--encre); max-width: 70ch; overflow-wrap: anywhere; }
.compte-bandeau__ref { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--ardoise); font-size: var(--t15); }
.compte-bandeau__ref code { font: 600 var(--t15) / 1.2 var(--mono, ui-monospace, monospace); color: var(--encre); padding: 2px 8px; border-radius: 8px; background: var(--surface2); }

.compte-msg { margin: 0; font-size: var(--t15); line-height: 1.45; }
.compte-msg:empty { display: none; }
.compte-msg--ok { color: var(--accent); }
.compte-aide { margin: 20px 0 0; color: var(--ardoise); font-size: var(--t15); line-height: 1.5; max-width: 64ch; }

/* Saisie du code d'activation */
.compte-code-form { display: grid; gap: 8px; max-width: 520px; }
.compte-code-form label { color: var(--ardoise); font-size: var(--t15); }
.compte-code-form > .btn { justify-self: start; }
.compte-code-rang { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.compte-code { min-height: 48px; width: 13rem; max-width: 100%; font-size: var(--t17); font-variant-numeric: tabular-nums; }
.compte-code-msg:empty { display: none; }

/* ---------- Accueil d'un compte à activer ---------- */
.page--verrou .col, .page--gratuit .col { padding-bottom: 8px; }
.compte-gratuit, .compte-appel {
  display: grid; gap: 12px;
  margin-top: 8px; padding: 24px;
  border: 1px solid var(--filet); border-radius: var(--r-carte);
  background: var(--surface);
}
.compte-gratuit h2, .compte-appel h2 { margin: 0; text-wrap: balance; }
.compte-gratuit p, .compte-appel p { margin: 0; color: var(--ardoise); max-width: 62ch; }
.compte-gratuit .actions, .compte-appel .actions { margin-top: 12px; }

.compte-verrous { margin-top: 36px; }
.compte-verrous h2 { margin: 0 0 12px; font-size: var(--t17); color: var(--ardoise); font-weight: 500; }
.compte-verrous ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 24px; }
.compte-verrous li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--filet); color: var(--ardoise); }
.compte-verrou, .nav-verrou { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Barre : sections verrouillées */
.nav-btn--verrou { color: var(--ardoise); cursor: not-allowed; display: inline-flex; align-items: center; gap: 4px; }
.bar-droite--invite { gap: 12px; }

/* ---------- Examen gratuit ---------- */
.compte-faits { margin: 0 0 8px; max-width: 520px; }
.compte-faits > div { border-top: 1px solid var(--filet); padding: 12px 0; }
.compte-correction { display: grid; gap: 0; }
.compte-statut { display: grid; gap: 12px; margin-top: 8px; }
.compte-statut:empty { display: none; }
.compte-progres { height: 6px; border-radius: 999px; background: var(--surface2); overflow: hidden; max-width: 420px; }
.compte-progres__trait { display: block; height: 100%; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform .4s ease; }
.compte-resultat { margin-top: 32px; }
.compte-resultat:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .compte-progres__trait { transition: none; } }

/* Focus et appui des éléments propres à ces écrans (les boutons .btn et .lien suivent editorial.css) */
.compte-bandeau a:focus-visible, .compte-code:focus-visible, .compte-appel a:focus-visible, .compte-gratuit a:focus-visible, .nav-btn--verrou:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.compte-bandeau a:active, .compte-appel a:active, .compte-gratuit a:active { color: var(--encre); background: var(--presse); }
.nav-btn--verrou:active { background: var(--presse); }

@media (max-width: 640px) {
  .compte-bandeau { padding: 16px; }
  .compte-gratuit, .compte-appel { padding: 20px 16px; }
  .compte-code-rang .btn { flex: 1 1 100%; }
  .compte-code { width: 100%; }
}

/* Téléphone : la barre de l'invité garde le nom, le thème et « Créer un compte » ; « Se connecter » reste dans l'écran. */
@media (max-width: 560px) {
  /* Barre d'un compte à activer : quatre entrées tiennent dans 390 px sans icône de cadenas ni grand remplissage. */
  .bar nav:has(.nav-btn--verrou) .nav-lien, .bar nav:has(.nav-btn--verrou) .nav-btn { padding: 0 8px; }
  .nav-btn--verrou .nav-verrou { display: none; }
  .bar-droite--invite { gap: 8px; }
  .bar-droite--invite .btn--texte { display: none; }
}