/* Pages publiques et d'accueil (inscription, bienvenue, documents juridiques) : mêmes couleurs que le cockpit
   (web/static/index.html), thème galaxie par défaut, clair si choisi sur cet appareil. */
:root{
  --bg:#0D0A26; --bg-hi:#2B1B5E; --surface:#151037; --plate:rgba(22,17,56,.88); --plate-soft:rgba(22,17,56,.6); --plate-line:rgba(170,178,255,.15);
  --field:rgba(185,190,230,.07); --raise:rgba(143,208,255,.16); --ink:#EEF0FF; --mist:#B9BEE6; --muted:#8A90C2;
  --beam:#4FB3FF; --beam-rgb:79,179,255; --beam-ink:#8FD0FF; --btn:#4FB3FF; --on-btn:#06132E;
  --gain-ink:#3EE6B0; --gain-soft:rgba(62,230,176,.13); --loss:#FF6B81; --loss-ink:#FF6B81; --loss-soft:rgba(255,107,129,.14);
  --warn:#FFC861; --caution-ink:#FFB46B; --caution-soft:rgba(255,162,76,.15);
  --grid:rgba(185,190,230,.08); --shadow:0 24px 48px -34px rgba(0,0,0,.9);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#D8E2ED; --bg-hi:#EAF0F6; --surface:#EDF2F7; --plate:rgba(255,255,255,.86); --plate-soft:rgba(255,255,255,.6); --plate-line:rgba(11,34,56,.11);
  --field:rgba(11,34,56,.05); --raise:#FFFFFF; --ink:#0B2238; --mist:#2F455C; --muted:#4D6178;
  --beam:#1F7FD1; --beam-rgb:31,127,209; --beam-ink:#155FA6; --btn:#1868B6; --on-btn:#FFFFFF;
  --gain-ink:#05664B; --gain-soft:rgba(10,132,98,.1); --loss:#C42A44; --loss-ink:#B3263E; --loss-soft:rgba(196,42,68,.09);
  --warn:#B56C00; --caution-ink:#A34E00; --caution-soft:rgba(194,94,0,.1);
  --grid:rgba(11,34,56,.07); --shadow:0 20px 40px -30px rgba(11,34,56,.5);
  color-scheme:light;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ min-height:100%; }
body{ margin:0; min-height:100vh; min-height:100svh; color:var(--ink); font:400 15px/1.55 "Sora",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased; display:flex; flex-direction:column; align-items:center;
  padding:calc(12px + env(safe-area-inset-top,0px)) 16px calc(32px + env(safe-area-inset-bottom,0px));
  background:radial-gradient(90% 55% at 20% -10%, var(--bg-hi) 0%, transparent 70%), radial-gradient(60% 45% at 100% 0%, rgba(var(--beam-rgb),.12) 0%, transparent 62%), var(--bg); }
button{ font:inherit; color:inherit; }
a{ color:var(--beam-ink); }
.top{ width:min(560px,100%); display:flex; align-items:center; justify-content:space-between; gap:12px; margin:6px 0 16px; }
.top.wide{ width:min(760px,100%); }
.brand{ display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; }
.brand svg{ width:34px; height:28px; }
.brand b{ font:700 22px/1 "Chakra Petch",sans-serif; }
.link{ color:var(--muted); font-size:13.5px; text-decoration:none; text-align:right; }
.link span{ color:var(--beam-ink); font-weight:600; }
.card{ width:min(560px,100%); background:var(--plate); border:1px solid var(--plate-line); border-radius:22px; padding:26px 22px 24px; box-shadow:var(--shadow); }
.card.wide{ width:min(760px,100%); }
.eyebrow{ margin:0 0 8px; font:600 12.5px/1 "Chakra Petch",sans-serif; letter-spacing:.16em; text-transform:uppercase; color:var(--beam-ink); }
h1{ margin:0 0 6px; font:700 26px/1.15 "Chakra Petch",sans-serif; }
h2{ margin:0 0 6px; font:600 19px/1.3 "Chakra Petch",sans-serif; }
h3{ margin:18px 0 6px; font:600 15.5px/1.3 "Chakra Petch",sans-serif; }
.sub{ margin:0 0 16px; color:var(--muted); font-size:14px; }
.hint{ margin:0 0 12px; font-size:13.5px; color:var(--muted); }
.center{ text-align:center; }
.progress{ list-style:none; display:flex; gap:6px; margin:4px 0 20px; padding:0; counter-reset:p; }
.progress li{ flex:1; counter-increment:p; font:600 12.5px/1.2 "Chakra Petch",sans-serif; color:var(--muted); padding-top:9px; border-top:3px solid var(--grid); }
.progress li::before{ content:counter(p) ". "; }
.progress li[aria-current]{ color:var(--ink); border-color:var(--beam); }
.progress li.done{ color:var(--mist); border-color:rgba(var(--beam-rgb),.45); }
.field{ display:grid; gap:6px; margin-bottom:14px; font-size:13.5px; color:var(--mist); }
.field input,.field select,.field textarea{ font:500 16px/1.3 "Sora",sans-serif; color:var(--ink); background:var(--field); border:1px solid var(--plate-line); border-radius:12px; padding:12px 14px; width:100%; }
.field textarea{ min-height:150px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:2px solid var(--beam); outline-offset:1px; }
.field small{ color:var(--muted); font-size:12.5px; }
.trap{ position:absolute !important; left:-10000px; width:1px; height:1px; overflow:hidden; }
.check{ display:grid; grid-template-columns:24px 1fr; gap:10px; align-items:start; margin:0 0 12px; font-size:14px; color:var(--mist); cursor:pointer; }
.check input{ width:20px; height:20px; margin:1px 0 0; accent-color:var(--beam); }
.btn{ all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; justify-content:center; align-items:center; gap:8px; min-height:46px; padding:0 18px;
  border-radius:12px; font:600 15px/1.2 "Sora",sans-serif; background:var(--btn); color:var(--on-btn); text-align:center; }
.btn.full{ width:100%; }
.btn.ghost{ background:transparent; color:var(--mist); border:1px solid var(--plate-line); }
.btn:focus-visible,.linkbtn:focus-visible,.opt:focus-visible,.tab:focus-visible{ outline:2px solid var(--beam); outline-offset:2px; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }
.linkbtn{ all:unset; cursor:pointer; color:var(--beam-ink); font-weight:600; font-size:14px; padding:10px 4px; }
.linkbtn[disabled]{ color:var(--muted); cursor:default; font-weight:500; }
.qr{ display:grid; place-items:center; margin:4px auto 12px; width:200px; max-width:100%; padding:10px; border-radius:14px; background:#FFFFFF; }
.qr svg{ display:block; width:100%; height:auto; }
.qr[hidden]{ display:none; }
.key{ display:flex; gap:8px; align-items:center; margin:0 0 14px; padding:10px 12px; border-radius:12px; background:var(--field); border:1px dashed var(--plate-line); }
.key code{ flex:1; font:600 14px/1.4 "Chakra Petch",monospace; letter-spacing:.06em; overflow-wrap:anywhere; color:var(--ink); }
.key button{ all:unset; cursor:pointer; font-size:13px; font-weight:600; color:var(--beam-ink); }
.row{ display:grid; gap:8px; margin-bottom:12px; }
.seg{ display:flex; gap:4px; padding:4px; border-radius:12px; background:var(--grid); margin-bottom:12px; }
.seg button{ all:unset; cursor:pointer; flex:1; text-align:center; padding:12px 0; border-radius:9px; font:600 14px/1 "Chakra Petch",sans-serif; color:var(--muted); }
.seg button[aria-checked="true"]{ background:var(--raise); color:var(--ink); box-shadow:0 1px 0 var(--plate-line); }
.seg button:focus-visible{ outline:2px solid var(--beam); outline-offset:2px; }
.err{ color:var(--loss-ink); font-size:13.5px; min-height:20px; margin:4px 0 10px; }
.notice{ margin:0 0 14px; padding:12px 14px; border-radius:12px; background:var(--field); border:1px solid var(--plate-line); color:var(--mist); font-size:14px; }
.note{ margin:18px 0 0; font-size:12.5px; color:var(--muted); }
.legal-links{ margin:10px 0 0; font-size:12.5px; color:var(--muted); }
.legal-links a{ color:var(--muted); }
.ok{ color:var(--gain-ink); }
.hide{ display:none !important; }

/* accueil : quiz, choix du mode, règles */
.qcount{ margin:0 0 6px; font:600 12.5px/1 "Chakra Petch",sans-serif; color:var(--muted); letter-spacing:.06em; }
.opts{ display:grid; gap:10px; margin:14px 0 6px; }
.opt{ all:unset; box-sizing:border-box; cursor:pointer; display:block; width:100%; padding:15px 16px; border-radius:14px; border:1px solid var(--plate-line);
  background:var(--plate-soft); font-size:15px; color:var(--ink); }
.opt[aria-pressed="true"]{ border-color:var(--beam); box-shadow:inset 0 0 0 1px var(--beam); background:rgba(var(--beam-rgb),.1); }
.nav{ display:flex; gap:10px; justify-content:space-between; margin-top:14px; }
.nav .btn{ flex:1; }
.modes{ display:grid; gap:10px; margin:12px 0 16px; }
.mode{ all:unset; box-sizing:border-box; cursor:pointer; display:grid; grid-template-columns:1fr auto; gap:4px 10px; padding:14px 15px; border-radius:16px;
  border:1px solid var(--plate-line); background:var(--plate-soft); }
.mode[aria-checked="true"]{ border-color:var(--beam); box-shadow:inset 0 0 0 1px var(--beam); }
.mode:focus-visible{ outline:2px solid var(--beam); outline-offset:2px; }
.mode b{ font:700 18px/1.2 "Chakra Petch",sans-serif; }
.mode.hard b{ color:var(--loss-ink); }
.mode .tag{ justify-self:end; align-self:center; font-size:12px; padding:3px 9px; border-radius:999px; color:var(--beam-ink); background:rgba(var(--beam-rgb),.12); }
.mode .tag:empty{ display:none; }
.mode .facts{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:4px 14px; font-size:13px; color:var(--mist); }
.mode .line{ grid-column:1 / -1; font-size:12.5px; color:var(--muted); }
.why{ margin:0 0 6px; padding:12px 14px; border-radius:12px; background:rgba(var(--beam-rgb),.08); border:1px solid rgba(var(--beam-rgb),.3); font-size:14px; color:var(--mist); }
.rules{ margin:8px 0 14px; padding:4px 16px 12px; border-radius:16px; background:var(--field); border:1px solid var(--plate-line); }
.rules h3:first-child{ margin-top:12px; }
.rules ul,.rules ol{ margin:0; padding-left:20px; font-size:14px; color:var(--mist); }
.rules li{ margin:4px 0; }
.rules .intro{ margin:0 0 4px; font-size:13px; color:var(--muted); }
.ver{ display:flex; flex-wrap:wrap; gap:6px 12px; align-items:baseline; margin:0 0 8px; font-size:13px; color:var(--muted); }
.ver b{ font:600 14px/1.3 "Chakra Petch",sans-serif; color:var(--ink); }
.warn{ margin:0 0 14px; padding:12px 14px; border-radius:12px; background:var(--caution-soft); border:1px solid rgba(255,162,76,.45); color:var(--ink); font-size:14px; }
.warn.hard{ background:var(--loss-soft); border-color:var(--loss); }
.choices{ display:grid; gap:12px; margin:14px 0; }
.choice{ position:relative; padding:16px; border-radius:16px; border:1px solid var(--plate-line); background:var(--plate-soft); }
.choice.on{ border-color:var(--beam); box-shadow:inset 0 0 0 1px var(--beam); }
.choice.off{ opacity:.72; }
.choice h2{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.badge{ font:600 11.5px/1 "Sora",sans-serif; padding:5px 9px; border-radius:999px; color:var(--beam-ink); background:rgba(var(--beam-rgb),.14); }
.badge.soon{ color:var(--caution-ink); background:var(--caution-soft); }
.choice p{ margin:0 0 10px; font-size:14px; color:var(--mist); }

/* documents juridiques */
.doc{ width:min(760px,100%); background:var(--plate); border:1px solid var(--plate-line); border-radius:22px; padding:26px 24px; box-shadow:var(--shadow); }
.doc h2{ margin:26px 0 8px; }
.doc p,.doc li{ font-size:15px; color:var(--mist); }
.doc .meta{ font-size:13px; color:var(--muted); }
.draft{ margin:0 0 18px; padding:12px 14px; border-radius:12px; background:var(--caution-soft); border:1px solid rgba(255,162,76,.5); color:var(--ink); font-size:14px; }
mark{ background:rgba(255,200,97,.28); color:inherit; padding:0 3px; border-radius:4px; }

@media (max-width:420px){ .card,.doc{ padding:22px 16px 20px; } body{ padding-left:12px; padding-right:12px; } }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }