:root{
  --bg:#f4f7fb;--card:#fff;--ink:#16263a;--mute:#5b6b7e;--line:#dbe4ee;--accent:#215e99;--accent2:#0f4761;
  --ok:#2f7d32;--okbg:#e6f4e7;--ko:#c00000;--kobg:#fdeaea;--shadow:0 1px 2px rgba(15,40,70,.06),0 8px 24px rgba(15,40,70,.07);
  --c0:#2b7bd0;--c1:#d9822b;--c2:#7c4dcc;--c3:#2f9e6b;--c4:#d6437a;--c5:#a39100;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#0e1520;--card:#162131;--ink:#e8eef6;--mute:#9db0c6;--line:#27384d;--accent:#5aa2e6;--accent2:#8cc4f5;
  --ok:#6fcf74;--okbg:#17321a;--ko:#ff7b7b;--kobg:#3a1a1a;--shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.3);
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;min-height:100vh;display:flex;flex-direction:column}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;line-height:1.2;margin:0}
.top{display:flex;justify-content:space-between;align-items:center;padding:14px max(16px,calc((100vw - 880px)/2));background:var(--card);border-bottom:1px solid var(--line)}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--ink);font-family:Georgia,serif;font-size:1.2rem}
.brand b{color:var(--accent)}
.logo{font-size:1.5rem}
.top-right{display:flex;gap:12px;align-items:center;color:var(--mute);font-size:.9rem}
.bar{height:5px;background:var(--line)}.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--ok));transition:width .35s}
main{flex:1;width:100%;max-width:880px;margin:0 auto;padding:24px 16px 40px}
footer{text-align:center;color:var(--mute);font-size:.8rem;padding:16px}
.hero{text-align:center;padding:12px 0 22px}
.hero h1{font-size:clamp(1.8rem,5vw,2.6rem)}
.hero p{color:var(--mute);max-width:560px;margin:10px auto 0}
.section-t{font-family:Georgia,serif;font-size:1.15rem;margin:26px 0 10px;display:flex;align-items:center;gap:10px}
.section-t small{font-family:system-ui;font-size:.8rem;color:var(--mute);font-weight:400}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;border:2px solid var(--line);background:var(--card);cursor:pointer;font:inherit;color:var(--ink);transition:.15s}
.chip[aria-pressed=true]{border-color:var(--c,var(--accent));background:color-mix(in srgb,var(--c,var(--accent)) 14%,var(--card));font-weight:600}
.chip:hover{transform:translateY(-1px)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.game{background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:18px;border:1px solid var(--line);cursor:pointer;text-align:left;font:inherit;color:inherit;transition:.15s;display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden}
.game:before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--g,var(--accent))}
.game:hover{transform:translateY(-3px)}
.game .ic{font-size:1.8rem}
.game h3{font-size:1.1rem}
.game p{margin:0;color:var(--mute);font-size:.9rem}
.game .best{margin-top:auto;padding-top:8px;font-size:.8rem;color:var(--mute)}
.game.big{grid-column:1/-1;background:linear-gradient(135deg,#215e99,#0f4761);color:#fff;border:0}
.game.big p,.game.big .best{color:rgba(255,255,255,.85)}.game.big:before{display:none}
.card{background:var(--card);border-radius:18px;box-shadow:var(--shadow);border:1px solid var(--line);padding:22px}
.tag{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 10px;border-radius:999px;color:#fff;background:var(--c,var(--accent))}
.qtype{color:var(--mute);font-size:.85rem;margin-left:8px}
.q{font-family:Georgia,serif;font-size:1.3rem;margin:14px 0 18px;line-height:1.35}
.q .blank{display:inline-block;min-width:90px;border-bottom:3px solid var(--accent);text-align:center;color:var(--accent);font-weight:700}
.opts{display:grid;gap:10px}
.opt{display:flex;gap:12px;align-items:center;text-align:left;padding:13px 16px;border-radius:12px;border:2px solid var(--line);background:var(--card);color:var(--ink);font:inherit;cursor:pointer;transition:.12s}
.opt:hover:not(:disabled){border-color:var(--accent);transform:translateX(2px)}
.opt .k{flex:none;width:28px;height:28px;border-radius:8px;background:var(--bg);display:grid;place-items:center;font-weight:700;font-size:.85rem;color:var(--mute)}
.opt.ok{border-color:var(--ok);background:var(--okbg)}.opt.ok .k{background:var(--ok);color:#fff}
.opt.ko{border-color:var(--ko);background:var(--kobg)}.opt.ko .k{background:var(--ko);color:#fff}
.opts.row2{grid-template-columns:1fr 1fr}
.opts.imgs{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.opts.imgs .opt{flex-direction:column;justify-content:center;text-align:center}
.opts.imgs svg{width:100%;max-width:130px;height:auto}
.figure{display:flex;justify-content:center;margin:0 0 16px}
.figure svg{max-width:100%;height:auto;max-height:300px;border-radius:12px;background:var(--bg)}
.chipw{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.chipw .opt{padding:10px 18px}
.fb{margin-top:16px;padding:14px 16px;border-radius:12px;font-size:.95rem}
.fb.ok{background:var(--okbg);color:var(--ok)}.fb.ko{background:var(--kobg);color:var(--ko)}
.fb b{display:block;margin-bottom:2px}.fb span{color:var(--ink)}
.actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;flex-wrap:wrap}
.btn{border:0;border-radius:12px;padding:12px 22px;font:inherit;font-weight:700;cursor:pointer;background:var(--accent);color:#fff;transition:.12s}
.btn:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--accent);border:2px solid var(--line)}
.btn.small{padding:6px 12px;font-size:.85rem}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cols .opt{font-size:.95rem;padding:11px 12px;position:relative}
.cols .opt.sel{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.cols .opt .b{margin-left:auto;flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.75rem;color:#fff;font-weight:700}
.cols .sol{font-size:.8rem;color:var(--ko);margin:-4px 0 0 4px}
.order{display:grid;gap:10px}
.order .opt .k{background:var(--accent);color:#fff;visibility:hidden}.order .opt.picked .k{visibility:visible}
.order .opt.picked{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--card))}
.hint{color:var(--mute);font-size:.88rem;margin:-6px 0 14px}
.cls{display:grid;gap:10px}
.cls .row{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:10px 14px;border:2px solid var(--line);border-radius:12px}
.cls .row.ok{border-color:var(--ok);background:var(--okbg)}.cls .row.ko{border-color:var(--ko);background:var(--kobg)}
.cls .lab{font-weight:600;flex:1 1 180px}
.cls .cats{display:flex;gap:6px;flex-wrap:wrap}
.cls .cat{border:2px solid var(--line);background:var(--card);color:var(--ink);padding:6px 12px;border-radius:999px;font:inherit;font-size:.88rem;cursor:pointer}
.cls .cat[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}
.cls .ans{flex-basis:100%;font-size:.82rem;color:var(--ko)}
/* résultats */
.res{text-align:center}
.ring{--p:0;width:170px;height:170px;border-radius:50%;margin:10px auto 6px;display:grid;place-items:center;background:conic-gradient(var(--rc,var(--accent)) calc(var(--p)*1%),var(--line) 0)}
.ring div{width:134px;height:134px;border-radius:50%;background:var(--card);display:grid;place-items:center;align-content:center}
.ring b{font-family:Georgia,serif;font-size:2.6rem;line-height:1}.ring small{color:var(--mute)}
.mention{font-family:Georgia,serif;font-size:1.7rem;margin:6px 0}
.sub{color:var(--mute);max-width:520px;margin:0 auto}
.stats{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:16px 0}
.stat{background:var(--bg);border-radius:12px;padding:8px 16px}.stat b{display:block;font-size:1.2rem}
.bars{max-width:560px;margin:18px auto;text-align:left;display:grid;gap:10px}
.bars .l{display:flex;justify-content:space-between;font-size:.9rem;margin-bottom:3px}
.bars .t{height:10px;border-radius:6px;background:var(--line);overflow:hidden}.bars .t i{display:block;height:100%;background:var(--c)}
.review{text-align:left;margin-top:22px}
.review h3{margin-bottom:10px}
.rv{border:1px solid var(--line);border-left:5px solid var(--ko);border-radius:10px;padding:10px 14px;margin-bottom:10px;background:var(--card)}
.rv.half{border-left-color:#d9822b}
.rv small{color:var(--mute)}.rv .a{color:var(--ok);font-weight:600}
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:9}
.confetti i{position:absolute;top:-12px;width:9px;height:14px;opacity:.9;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg)}}
.pop{animation:pop .25s}@keyframes pop{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
@media (max-width:560px){.opts.row2{grid-template-columns:1fr}.cols{gap:8px}.cols .opt{font-size:.85rem;padding:9px 8px}.q{font-size:1.15rem}.card{padding:16px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin-top:8px}
.catcard{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:26px;text-align:left;cursor:pointer;font:inherit;color:inherit;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:8px;transition:.15s}
.catcard:before{content:"";position:absolute;inset:0 0 auto 0;height:7px;background:var(--g)}
.catcard:hover{transform:translateY(-4px)}
.catcard .ic{font-size:2.6rem}.catcard h2{font-size:1.5rem}.catcard p{margin:0;color:var(--mute)}
.catcard .best{margin-top:auto;padding-top:10px;font-size:.85rem;color:var(--mute)}
#back{margin-bottom:6px}

/* ---- tableau blanc de brouillon */
.wb-fab{position:fixed;left:16px;bottom:16px;z-index:20;border:0;border-radius:999px;padding:12px 18px;font:inherit;font-weight:700;background:var(--accent);color:#fff;box-shadow:var(--shadow);cursor:pointer;display:flex;gap:8px;align-items:center}
body.wb-open .wb-fab{background:var(--accent2);color:#fff}
#wb{position:fixed;z-index:30;left:0;right:0;bottom:0;height:55vh;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:18px 18px 0 0;box-shadow:0 -6px 30px rgba(0,0,0,.22)}
#wb[hidden]{display:none}
.wb-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--line)}
.wb-tools{display:flex;align-items:center;gap:4px;flex-wrap:wrap;flex:1 1 0;min-width:0}#wb-close{flex:none;align-self:flex-start}
.wb-tools button,#wb-close{width:36px;height:36px;border-radius:10px;border:2px solid transparent;background:transparent;color:var(--ink);font:inherit;font-size:1rem;cursor:pointer;display:grid;place-items:center;padding:0}
.wb-tools button:hover,#wb-close:hover{background:var(--bg)}
.wb-tools button[aria-pressed=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--card))}
.wb-c:after{content:"";width:18px;height:18px;border-radius:50%;background:var(--c);display:block;box-shadow:0 0 0 2px color-mix(in srgb,var(--ink) 35%,transparent)}
.wb-s i{display:block;border-radius:50%;background:var(--ink)}
.wb-sep{width:1px;height:22px;background:var(--line);margin:0 4px}
.wb-stage{position:relative;flex:1;min-height:0;background-color:#fffdf6;background-image:linear-gradient(#cfe0f0 1px,transparent 1px);background-size:100% 28px;border-radius:0 0 0 0;overflow:hidden}
.wb-stage canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;display:block}
.wb-text{position:absolute;z-index:2;min-width:140px;max-width:80%;padding:0;margin:0;border:0;border-bottom:2px dashed var(--accent);background:rgba(255,255,255,.6);outline:none;line-height:1.2;height:1.2em;font-family:"Segoe UI",system-ui,sans-serif}
body.wb-open{padding-bottom:55vh}
body.wb-open .wb-fab{display:none}
@media (min-width:1000px){
  #wb{left:auto;top:62px;bottom:0;height:auto;width:min(460px,38vw);border-radius:18px 0 0 0;box-shadow:-6px 0 30px rgba(0,0,0,.18)}
  body.wb-open{padding-bottom:0}
  body.wb-open main{margin-right:calc(min(460px,38vw) + 12px)}
  body.wb-open .wb-fab{display:flex}
}
@media (max-width:420px){.wb-tools button,#wb-close{width:32px;height:32px}.wb-sep{margin:0 1px}}
/* pas de sélection de texte ni de menu contextuel en écrivant (doigt, stylet, souris) */
#wb,#wb *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#wb .wb-text{-webkit-user-select:text;user-select:text}
#wb{overscroll-behavior:contain;touch-action:manipulation}
.wb-stage,.wb-stage canvas{touch-action:none}
body.wb-draw,body.wb-draw *{-webkit-user-select:none!important;user-select:none!important}