/* 2026.07.17 - account_shell.css */
/* ══════════════════════════════════════════════════════════════
   EA Osiris — Shell PUBLIC : accueil `/` + /account/* (fork réduit, lots F1/F3/F4)
   Troisième fork assumé du système de design (.osh-*), après admin_shell.css
   (Lot A) et app_shell.css (D2, §11) : aucun fichier partagé à l'exécution.
   Servi par liste blanche sur /account/assets/<name>, PUBLIC (aucune session) —
   les pages /account/* sont par nature pré-authentification. CSP stricte
   (style-src 'self') : aucun style inline, tout passe par cette feuille.

   Périmètre VOLONTAIREMENT réduit vs app_shell.css : tokens + formulaires +
   boutons + cartes. Pas de sidebar, pas de filterbar, pas de tables, pas
   d'ECharts — les pages /account/* sont des formulaires courts et centrés.
   Aucune ligne body[data-space="live"|"intel"] : les espaces du portail
   connecté n'existent pas ici (--accent reste la marque).

   Le bloc :root ci-dessous est IDENTIQUE OCTET POUR OCTET à celui de
   admin_shell.css et app_shell.css — verrouillé par test_shell_tokens.py (F1).
   Ne jamais le modifier ici seul : les trois forks bougent ensemble.
   ══════════════════════════════════════════════════════════════ */
:root{
  --bg:#0B0E14; --surface:#121722; --surface2:#171D2B; --inset:#0D121C;
  --line:#232C3E; --line-soft:#1B2334;
  --txt:#E8ECF4; --muted:#8C97AB; --faint:#5C6680;
  /* Marque commune + action premium */
  --brand:#C9A961; --brand-dim:rgba(201,169,97,.16); --brand-ink:#14100A;
  /* Sémantique — statuts uniquement, jamais décoratif */
  --green:#2FBF71; --green-dim:rgba(47,191,113,.14);
  --red:#E5484D;   --red-dim:rgba(229,72,77,.14);
  --orange:#F0A32E;--orange-dim:rgba(240,163,46,.14);
  --blue:#4C9AFF;  --blue-dim:rgba(76,154,255,.14);
  --violet:#9B7DE8;--violet-dim:rgba(155,125,232,.14);
  --grey:#6B7688;  --grey-dim:rgba(107,118,136,.16);
  /* Accents d'espace (référence fixe pour les liens croisés) */
  --live:#3DC5E8;  --live-dim:rgba(61,197,232,.14);
  --intel:#9B7DE8; --intel-dim:rgba(155,125,232,.14);
  /* Lot UI-3 — couleurs de référence des 6 entrées principales de la sidebar */
  --c-ea:#3DC5E8;    --c-ea-dim:rgba(61,197,232,.14);
  --c-intel:#9B7DE8; --c-intel-dim:rgba(155,125,232,.14);
  --c-ana:#E0679E;   --c-ana-dim:rgba(224,103,158,.14);
  --c-exp:#35C8A8;   --c-exp-dim:rgba(53,200,168,.14);
  --c-gov:#6E7BD9;   --c-gov-dim:rgba(110,123,217,.14);
  --c-fia:#8CA0B3;   --c-fia-dim:rgba(140,160,179,.14);
  --accent:var(--brand); --accent-dim:var(--brand-dim);
  --r-lg:16px; --r-md:12px; --r-sm:8px;
  --shadow:0 10px 28px rgba(3,6,12,.35);
  --ui:"Segoe UI Variable","Segoe UI","SF Pro Text",Inter,system-ui,sans-serif;
  --mono:"Cascadia Code","SF Mono",ui-monospace,Menlo,Consolas,monospace;
  --sidebar-w:248px;
}

/* ── Base ───────────────────────────────────────────────────── */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--txt);font-family:var(--ui);font-size:14px;line-height:1.45;
  -webkit-text-size-adjust:100%}

/* Accessibilité — focus TOUJOURS visible (critère F2). Un seul style pour tous
   les éléments interactifs, y compris au clavier seul. */
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-sm)}

/* ── Mise en page : une carte centrée ───────────────────────── */
.osh-shell{min-height:100vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:24px 16px;gap:16px}
.osh-card{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow);padding:28px}
.osh-brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:15px;
  letter-spacing:.04em;color:var(--brand);margin:0 0 18px}
.osh-card h1{margin:0 0 8px;font-size:20px;font-weight:800;letter-spacing:-.01em}
.osh-card p{margin:0 0 14px;color:var(--muted)}
.osh-muted{color:var(--muted)}
.osh-foot{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;font-size:12px}
.osh-foot a,.osh-card a{color:var(--brand);text-decoration:none}
.osh-foot a:hover,.osh-card a:hover{text-decoration:underline}

/* ── Formulaires ────────────────────────────────────────────── */
.osh-field{margin:0 0 14px}
.osh-field label{display:block;margin:0 0 6px;font-size:12px;font-weight:700;color:var(--muted)}
.osh-input{width:100%;background:var(--inset);color:var(--txt);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:10px 12px;font-size:14px;font-family:var(--ui)}
.osh-input:hover{border-color:var(--line-soft)}
.osh-input::placeholder{color:var(--faint)}
/* Champ en erreur — l'erreur est ASSOCIÉE au champ via aria-describedby côté HTML
   (critère F2) ; ici on ne fait que la signaler visuellement. */
.osh-input[aria-invalid="true"]{border-color:var(--red)}
.osh-hint{display:block;margin:6px 0 0;font-size:12px;color:var(--faint)}
.osh-error{display:block;margin:6px 0 0;font-size:12px;color:var(--red);font-weight:600}
/* Code à usage unique (MFA, jumelage) — chiffres en chasse fixe, bien espacés. */
.osh-input.code{font-family:var(--mono);font-size:18px;letter-spacing:.22em;text-align:center}
.osh-check{display:flex;align-items:flex-start;gap:9px;margin:0 0 16px;font-size:13px;color:var(--muted)}
.osh-check input{margin:2px 0 0;flex:none;accent-color:var(--brand);width:15px;height:15px}

/* ── Boutons (fork de .osh-btn — pleine largeur par défaut ici) ── */
button.osh-btn{font-family:var(--ui)}
.osh-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 14px;
  background:var(--surface2);color:var(--txt);font-weight:700;font-size:13px;
  cursor:pointer;text-decoration:none;white-space:nowrap}
.osh-btn:hover{border-color:var(--brand);color:var(--brand)}
.osh-btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.osh-btn.primary:hover{filter:brightness(1.08);color:var(--brand-ink)}
.osh-btn.block{width:100%}
.osh-btn.danger{border-color:rgba(229,72,77,.45);color:var(--red)}
.osh-btn.danger:hover{background:var(--red-dim);border-color:var(--red)}
.osh-btn[disabled]{opacity:.5;cursor:not-allowed}
.osh-btn[disabled]:hover{border-color:var(--line);color:var(--txt)}
/* Prochaine action après un succès/échec (critère F2) — lien discret sous le bouton. */
.osh-next{margin:16px 0 0;text-align:center;font-size:13px}
/* Pile d'actions de l'accueil (F3) — les deux parcours publics, empilés à toutes
   les largeurs : à 440px de carte, deux boutons côte à côte serreraient le libellé
   « Activer mon accès » sans rien gagner. */
.osh-actions{display:flex;flex-direction:column;gap:10px;margin:18px 0 0}

/* ── Indicateur d'étape du parcours d'activation (F4) ───────── */
/* Rendu au-dessus du <h1>, d'où la marge basse plutôt que haute. Le résumé textuel
   « Étape 3 sur 6 — Jumelage » porte l'information à lui seul : si cette feuille ne
   charge pas, la page reste compréhensible sans lui. */
.osh-step-count{margin:0 0 10px;font-size:12px;font-weight:700;color:var(--brand)}
.osh-steps{display:flex;align-items:center;list-style:none;margin:0 0 18px;padding:0}
.osh-steps li{display:flex;align-items:center;gap:7px;min-width:0}
/* Trait de liaison entre pastilles — décoratif, donc en ::before plutôt qu'en
   caractère : jamais lu par un lecteur d'écran. */
.osh-steps li+li{margin-left:7px}
.osh-steps li+li::before{content:"";flex:none;width:10px;height:1px;background:var(--line);
  margin-right:7px}
.osh-step-n{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:999px;border:1px solid var(--line);
  background:var(--inset);color:var(--faint);font-size:11px;font-weight:700}
.osh-steps li.done .osh-step-n{border-color:rgba(47,191,113,.4);color:var(--green);
  background:var(--green-dim)}
.osh-steps li.current .osh-step-n{border-color:var(--brand);background:var(--brand);
  color:var(--brand-ink)}
.osh-step-l{font-size:11px;font-weight:700;color:var(--txt);white-space:nowrap}
/* Six libellés ne tiennent pas dans une carte de 440px : seul celui de l'étape
   courante s'affiche. Les autres sont retirés de l'ÉCRAN, jamais de l'arbre
   d'accessibilité (ni display:none ni visibility:hidden, qui les masqueraient aussi
   aux lecteurs d'écran et priveraient l'<ol> de son sens). */
.osh-steps li:not(.current) .osh-step-l{position:absolute;width:1px;height:1px;padding:0;
  margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* ── Alertes & badges ───────────────────────────────────────── */
.osh-alert{border:1px solid var(--line);border-left-width:3px;border-radius:var(--r-sm);
  padding:11px 13px;margin:0 0 16px;font-size:13px}
.osh-alert.bad{border-left-color:var(--red);background:var(--red-dim)}
.osh-alert.warn{border-left-color:var(--orange);background:var(--orange-dim)}
.osh-alert.ok{border-left-color:var(--green);background:var(--green-dim)}
.osh-alert.info{border-left-color:var(--blue);background:var(--blue-dim)}
.osh-badge{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
  border-radius:999px;padding:6px 11px;font-weight:600;font-size:12px;white-space:nowrap;color:var(--txt)}
.osh-badge.ok{border-color:rgba(47,191,113,.4);color:var(--green)}
.osh-badge.warn{border-color:rgba(240,163,46,.45);color:var(--orange)}
.osh-badge.bad{border-color:rgba(229,72,77,.45);color:var(--red)}
.osh-badge.info{border-color:rgba(76,154,255,.45);color:var(--blue)}

/* ── Listes (codes de récupération, sessions actives) ───────── */
.osh-list{list-style:none;margin:0 0 16px;padding:0;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--inset)}
.osh-list li{padding:10px 12px;border-bottom:1px solid var(--line-soft);font-size:13px}
.osh-list li:last-child{border-bottom:none}
.osh-codes{font-family:var(--mono);letter-spacing:.06em}

/* ── Responsive (critère F2 : mobile + clavier) ─────────────── */
@media(max-width:520px){
  .osh-shell{padding:16px 12px;justify-content:flex-start}
  .osh-card{padding:20px;border-radius:var(--r-md)}
  .osh-card h1{font-size:18px}
}