/* ZIKUNIX : jetons sémantiques, composants et préférences partagés, sans police distante. */
:root {
  color-scheme:dark;
  --bg:#0A1226;--bg-secondary:#0F1B3D;--panel:#08182f;--panel-raised:#0c2545;
  --text:#E6F1FF;--muted:#8AA1C1;--border:#203b61;
  --accent:#00D4FF;--accent-secondary:#7C3AED;--accent-ink:#031321;
  --accent-tint:rgb(0 212 255 / 10%);--glow:rgb(0 133 255 / 18%);
  --positive:#229C65;--positive-text:#79dfb0;--positive-surface:var(--positive);--positive-ink:#03110b;--positive-tint:rgb(34 156 101 / 14%);
  --danger:#EF4444;--report-red:var(--danger);--danger-ink:#200606;--danger-text:#ff9292;
  --answer-positive-start:#04362b;--answer-positive-end:#08784c;--answer-positive-edge:#42d99e;--answer-positive-ink:#e6fff3;--answer-positive-glow:rgb(32 203 128 / 22%);
  --answer-negative-start:#471722;--answer-negative-end:#b53b48;--answer-negative-edge:#f27680;--answer-negative-ink:#fff0f1;--answer-negative-glow:rgb(239 90 105 / 19%);
  --bonus:#ffe37a;--warning:#ffc469;--backdrop:rgb(3 7 18 / 82%);
  --timer-step-10:var(--accent);--timer-step-9:#80ddeb;--timer-step-8:#9edbd4;--timer-step-7:#bad7b3;--timer-step-6:#d6d38f;
  --timer-step-5:#f0cd76;--timer-step-4:#f4b974;--timer-step-3:#f3a274;--timer-step-2:#ee8875;--timer-step-1:#f57878;--timer-step-0:#f57878;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;
  --radius-sm:8px;--radius-md:14px;--radius-lg:24px;--radius-pill:999px;
  --shadow:0 16px 38px rgb(0 4 17 / 38%);--shadow-focus:0 0 0 4px var(--accent-tint);
  --edge:color-mix(in srgb,var(--accent) 26%,var(--border));--neon-soft:0 0 24px color-mix(in srgb,var(--accent) 14%,transparent);
  --surface-sheen:linear-gradient(145deg,color-mix(in srgb,var(--panel-raised) 88%,var(--accent)),var(--panel) 72%);--record-filter:none;
  --motion:160ms;--ease:cubic-bezier(.2,.7,.3,1);
  --font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-display:"Bahnschrift","Aptos Display",var(--font);--font-mono:ui-monospace,"Cascadia Code",Consolas,monospace;
  font-family:var(--font);color:var(--text);background:var(--bg);
}
:root[data-theme="rose"] { --bg:#160f20;--bg-secondary:#21172e;--panel:#261c33;--panel-raised:#332440;--border:#513d60;--accent:#f7a8d9;--accent-secondary:#d4b3ff;--accent-ink:#261020;--accent-tint:rgb(247 168 217 / 9%);--glow:rgb(226 107 197 / 16%);--record-filter:hue-rotate(72deg); }
:root[data-theme="green"] { --bg:#091813;--bg-secondary:#10241d;--panel:#142b24;--panel-raised:#1c382e;--border:#345447;--accent:#8ae6ba;--accent-secondary:#a0dace;--accent-ink:#071c11;--accent-tint:rgb(138 230 186 / 9%);--glow:rgb(80 183 139 / 16%);--record-filter:hue-rotate(290deg); }
:root[data-theme="yellow"] { --bg:#19160d;--bg-secondary:#242014;--panel:#2b2619;--panel-raised:#39311e;--border:#534a31;--accent:#f4d47b;--accent-secondary:#ffb88a;--accent-ink:#201a08;--accent-tint:rgb(244 212 123 / 9%);--glow:rgb(217 178 76 / 16%);--record-filter:hue-rotate(185deg); }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
body { margin:0;min-height:100dvh;isolation:isolate;background:radial-gradient(ellipse at 12% 0,var(--glow),transparent 60%);line-height:1.5;padding-bottom:env(safe-area-inset-bottom); }
/* Vinyle purement décoratif, fixe et sans animation. */
body::before { content:"";position:fixed;z-index:-1;pointer-events:none;width:min(64vw,860px);aspect-ratio:1;right:-24vw;top:12vh;border-radius:50%;opacity:.12;background:radial-gradient(circle,transparent 0 2%,var(--accent) 2.2% 2.5%,var(--bg) 2.6% 14%,transparent 14.5%),repeating-radial-gradient(circle,transparent 0 4px,var(--border) 5px 6px,transparent 7px 11px);box-shadow:inset 0 0 0 1px var(--border); }
body::after { content:"";position:fixed;z-index:-1;pointer-events:none;right:var(--space-5);bottom:var(--space-5);width:80px;height:80px;background:center/contain no-repeat;opacity:.32; }
:root[data-decoration="halloween"] body::after { background-image:url('/images/season-halloween.svg'); }
:root[data-decoration="winter"] body::after { background-image:url('/images/season-winter.svg'); }
:root[data-decoration="summer"] body::after { background-image:url('/images/season-summer.svg'); }
main,.top { width:min(1440px,100%);margin-inline:auto;padding:var(--space-5) var(--space-6); }
main,.top { padding-left:max(var(--space-6),env(safe-area-inset-left));padding-right:max(var(--space-6),env(safe-area-inset-right)); }
main { min-width:0; }
a { color:var(--accent);text-underline-offset:4px; }
button,input,select,textarea { font:inherit;color:inherit; }
button { min-height:44px;max-width:100%;padding:11px 17px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-sheen);box-shadow:inset 0 1px rgb(255 255 255 / 5%);cursor:pointer;transition:background var(--motion),border-color var(--motion),box-shadow var(--motion); }
button:hover:enabled { border-color:var(--accent);background:var(--bg-secondary); }
button:disabled { opacity:.5;cursor:default; }
button.primary { background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:750; }
button.primary:hover:enabled { background:var(--accent);box-shadow:var(--shadow-focus),var(--neon-soft); }
button[aria-pressed="true"] { border-color:var(--accent);background:var(--accent-tint);color:var(--accent); }
button.danger { border-color:var(--danger);background:var(--danger);color:var(--danger-ink);font-weight:750; }
button.danger:hover:enabled { background:var(--danger);border-color:var(--danger);box-shadow:var(--shadow-focus); }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex="0"]:focus-visible { outline:2px solid var(--accent);outline-offset:4px;box-shadow:var(--shadow-focus); }
input,select,textarea { width:100%;min-width:0;min-height:48px;padding:11px 13px;border:1px solid var(--border);border-radius:var(--radius-sm);background:linear-gradient(180deg,var(--bg),var(--bg-secondary));box-shadow:inset 0 2px 8px rgb(0 0 0 / 15%);font-size:16px;accent-color:var(--accent); }
input[type="checkbox"],input[type="radio"] { width:20px;min-height:20px;flex-shrink:0; }
input:disabled,select:disabled { color:var(--muted);opacity:.8; }
textarea { resize:vertical; }
label { display:block;margin-bottom:var(--space-2);font-size:.9rem;color:var(--muted); }
fieldset { min-width:0;border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-4);margin:var(--space-4) 0; }
legend { color:var(--text);padding-inline:var(--space-2);font-weight:650; }
h1,h2,h3 { font-family:var(--font-display);line-height:1.2;overflow-wrap:anywhere; }
h1 { font-size:clamp(1.9rem,3.6vw,3rem);letter-spacing:-.045em; }
h2 { font-size:1.2rem;letter-spacing:-.02em; }
h3 { font-size:1rem; }
p { color:var(--muted);line-height:1.65; }
summary { min-height:44px;padding-block:var(--space-3);cursor:pointer;overflow-wrap:anywhere; }
.panel { padding:var(--space-5);border:1px solid var(--edge);border-radius:var(--radius-lg);background:var(--surface-sheen);box-shadow:inset 0 1px rgb(255 255 255 / 4%),var(--shadow);min-width:0; }
.actions { display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2); }
.small { font-size:.83rem; }.eyebrow,.tag { font:650 .68rem var(--font-mono);letter-spacing:.16em;color:var(--accent);text-transform:uppercase; }
.top { display:flex;align-items:center;gap:var(--space-5);min-height:100px;flex-wrap:wrap;border-bottom:1px solid var(--edge);background:linear-gradient(180deg,var(--panel-raised),var(--bg));box-shadow:0 6px 24px rgb(0 4 17 / 24%); }
.brand { display:inline-flex;align-items:center;flex-shrink:0;text-decoration:none; }.brand img { width:174px;height:36px;display:block; }
.site-navigation { display:flex;align-items:center;gap:var(--space-4);margin-left:auto;flex-wrap:wrap;min-width:0;font-size:.85rem; }
.site-navigation > a { text-decoration:none;color:var(--muted);padding:12px 0; }.site-navigation > a:hover { color:var(--accent); }
.account-menu,.appearance-menu { position:relative;min-width:0; }
.account-menu summary,.appearance-menu summary { list-style:none;border:1px solid var(--border);border-radius:var(--radius-sm);padding:11px 14px;max-width:200px;overflow-wrap:anywhere;color:var(--text); }
.account-menu summary::-webkit-details-marker,.appearance-menu summary::-webkit-details-marker { display:none; }
.account-menu summary::after,.appearance-menu summary::after { content:'⌄';margin-left:12px;color:var(--accent); }
.account-menu[open],.appearance-menu[open] { z-index:15; }
.account-menu-body,.appearance-menu-body { position:absolute;right:0;top:calc(100% + 8px);width:min(280px,calc(100vw - 32px));padding:var(--space-4);border:1px solid var(--edge);border-radius:var(--radius-md);background:var(--surface-sheen);box-shadow:var(--shadow),var(--neon-soft);display:grid;gap:var(--space-3); }
.account-menu-body a,.account-menu-body button { display:block;padding:10px;text-align:left;text-decoration:none; }
.appearance-menu-body label { margin:0;display:grid;gap:var(--space-2); }
dialog.panel { color:var(--text);width:min(620px,calc(100% - 32px));max-width:calc(100% - 32px);max-height:calc(100dvh - 32px);overflow:auto;padding:var(--space-5); }
dialog::backdrop { background:var(--backdrop); }
dialog h1,dialog h2 { margin-top:0; }dialog .actions { margin-top:var(--space-5); }
#admin-confirm-dialog { width:min(480px,calc(100% - 32px)); }
#admin-confirm-text { white-space:pre-line; }
table { border-collapse:collapse;text-align:left;width:100%;font-size:.87rem; }
th,td { padding:14px 12px;border-bottom:1px solid var(--border);overflow-wrap:anywhere;vertical-align:top; }
th { color:var(--muted);font-size:.72rem;font-weight:650;text-transform:uppercase;letter-spacing:.05em;background:var(--bg-secondary); }
tbody tr:hover { background:var(--accent-tint); }
progress { width:100%;height:10px;accent-color:var(--accent);border:0;border-radius:var(--radius-pill); }
progress::-webkit-progress-bar { background:var(--panel-raised);border-radius:var(--radius-pill); }progress::-webkit-progress-value { background:var(--accent);border-radius:var(--radius-pill); }progress::-moz-progress-bar { background:var(--accent);border-radius:var(--radius-pill); }
pre { max-width:100%;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere; }
[role="alert"],.admin-message[data-error="true"] { color:var(--danger-text); }
[role="status"]:empty { display:none; }
#notice:not(:empty) { border:1px solid var(--border);border-left:3px solid var(--accent);padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);background:var(--bg-secondary); }
footer { padding:var(--space-6);text-align:center;color:var(--muted);font-size:.75rem; }
.visually-hidden { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.skip-link { position:fixed;left:16px;top:-100px;z-index:50;padding:12px 20px;background:var(--panel-raised);border:1px solid var(--accent);border-radius:var(--radius-sm); }.skip-link:focus { top:12px; }
.diagnostic main { max-width:1100px; }.diagnostic fieldset input { margin-bottom:var(--space-2); }.diagnostic #messages { max-height:300px;overflow:auto; }
@media(max-width:900px) { .top .tag { display:none; }.top { gap:var(--space-4); }.site-navigation { gap:var(--space-3); } }
@media(max-width:600px) { main,.top { padding:var(--space-4); }.top { min-height:88px;gap:var(--space-3); }.brand img { width:148px;height:auto; }.site-navigation { width:100%;margin:0;gap:var(--space-3);justify-content:flex-start; }.site-navigation > a { padding:4px 0;min-height:36px;display:flex;align-items:center; }.account-menu { margin-left:auto; }.account-menu summary,.appearance-menu summary { font-size:.75rem;max-width:175px;padding:10px; }.appearance-menu-body { left:0;right:auto; }.panel { padding:var(--space-4);border-radius:var(--radius-md); }body::before { width:100vw;right:-65vw;opacity:.12; }body::after { width:48px;height:48px; }.actions { gap:var(--space-2); }dialog.panel { padding:var(--space-4); } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important;transition:none!important;scroll-behavior:auto!important; } }
@media(max-width:600px) { main,.top { padding-left:max(var(--space-4),env(safe-area-inset-left));padding-right:max(var(--space-4),env(safe-area-inset-right)); } }

@media(max-width:600px) { .top { position:relative; }.site-navigation { gap:var(--space-3);font-size:.75rem; }.site-navigation > a { min-height:44px; }.account-menu { position:absolute;right:max(var(--space-4),env(safe-area-inset-right));top:var(--space-4); }.appearance-menu { margin-left:auto; }.appearance-menu-body { left:auto;right:0; }.brand { margin-bottom:var(--space-2); } }