:root{--bg:#eef4f6;--card:#fff;--ink:#1b2a33;--mute:#62737c;--line:#c8d6dc;--teal:#0e7c86;--teal-soft:#dcedef;--deep:#0e4d64;--ok:#2e9e63;--ok-soft:#e1f3e9;--bad:#bf4a3c;--bad-soft:#f7e3e0;--amber:#d9822b}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#10181d;--card:#18232a;--ink:#e6eef1;--mute:#94a6ae;--line:#2b3b44;--teal:#3fb5bf;--teal-soft:#16343a;--deep:#9fd3dc;--ok:#5fcf93;--ok-soft:#173327;--bad:#ef8a7c;--bad-soft:#3a201c;--amber:#f0a65a}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;min-height:100vh}
h1,h2{font-family:Cambria,Georgia,serif;color:var(--deep);margin:0}
.wrap{max-width:760px;margin:0 auto;padding:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
.mute{color:var(--mute)}
.small{font-size:13px}
input{font:inherit;width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)}
input:focus,button:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
button{font:inherit;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;padding:10px 14px;cursor:pointer}
button.primary{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:600}
button:disabled{opacity:.5;cursor:default}
.err{color:var(--bad);font-size:14px;min-height:20px}
.tag{display:inline-block;font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--teal-soft);color:var(--teal)}
.tag.calc{background:transparent;border:1px solid var(--amber);color:var(--amber)}
.top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.stem{font-size:19px;margin:10px 0 16px}
.opts{display:grid;gap:10px}
.opt{position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;text-align:left;padding:12px 14px;font-size:19px;font-weight:600;border-radius:12px}
.opt .l{flex:none;width:34px;height:34px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-size:16px}
.opt.sel{border-color:var(--teal);background:var(--teal-soft);box-shadow:0 0 0 2px var(--teal) inset}
.opt.good{border-color:var(--ok);background:var(--ok-soft)}
.opt.good .l{background:var(--ok)}
.opt.wrong{border-color:var(--bad);background:var(--bad-soft)}
.opt.wrong .l{background:var(--bad)}
.opt:disabled{opacity:1;cursor:default}
.banner{border-radius:12px;padding:10px 14px;margin-top:14px;font-size:15px}
.banner.info{background:var(--teal-soft)}
.banner.ok{background:var(--ok-soft);color:var(--ok);font-weight:600}
.banner.bad{background:var(--bad-soft);color:var(--bad);font-weight:600}
.center{text-align:center;padding:40px 18px}
.big{font-size:44px;font-weight:700;color:var(--teal);font-family:Cambria,Georgia,serif}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);margin-right:6px}
.opt .pbar{position:absolute;inset:0 auto 0 0;background:var(--ink);opacity:.07;pointer-events:none}
.opt .pct{margin-left:auto;font-size:15px;font-variant-numeric:tabular-nums;color:var(--mute)}
.opt>.l,.opt>span{position:relative}
.wr-row{display:grid;grid-template-columns:1fr auto 40px 40px;gap:8px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.wr-row:first-of-type{margin-top:8px}
.wr-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wr-ok,.wr-no{padding:6px 0;font-weight:700;font-size:16px}
.wr-ok{background:var(--ok);border-color:var(--ok);color:#fff}
.wr-no{color:var(--bad)}
.wr-badge{display:inline-block;min-width:22px;padding:0 6px;border-radius:11px;background:var(--amber);color:#fff;font-size:13px;text-align:center}
.waitcard{border:2px solid var(--amber)}
.hand{display:block;width:100%;margin:12px 0 4px;padding:16px;font-size:20px;font-weight:700;border-radius:16px;border:3px solid var(--amber);background:#fff7e8;color:#9a5b00;animation:handpulse 1.2s infinite}
.hand small{font-size:13px;font-weight:600;opacity:.85}
.hand.on{background:var(--amber);color:#fff;animation:none}
@keyframes handpulse{50%{box-shadow:0 0 0 8px rgba(224,145,32,.18)}}
@media (prefers-reduced-motion:reduce){.hand{animation:none}}
.banner.pickme{background:#fff3d6;border:2px solid var(--amber);color:#7a4a00;font-size:17px}
.tuto .tstep{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)}
.tuto .tstep:first-of-type{border-top:0}.tuto .te{font-size:26px;line-height:1;flex:none;width:34px;text-align:center}
.tag.exam{background:#fde8e8;color:var(--bad)}
.qtype{color:var(--teal)}
.opt.gone{opacity:.35;text-decoration:line-through}
.qform{color:#b45309}
.xpad{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:-2px 0 8px}
.xpad button{padding:10px 0;font-size:18px;font-weight:700;border-radius:10px}
.xprev{min-height:1.6em;margin:0 0 10px;padding:8px 12px;border-radius:10px;background:#f6f7f9;font-size:20px;font-family:Cambria,Georgia,serif}
.opt.idk{margin-top:10px;border-style:dashed;width:100%;display:flex}
.opt.idk .l{background:#eef1f5;font-size:18px}
.opt.idk.sel{border-style:solid}
.opt .tick{margin-left:auto;font-weight:700;font-size:20px;color:var(--teal)}
.joker{display:block;width:100%;margin:10px 0 2px;padding:12px;border-radius:14px;border:2px dashed #7c3aed;background:#f5f0ff;color:#5b21b6;font-weight:700;font-size:16px}
.joker small{display:block;font-weight:600;font-size:12px;opacity:.8}
.numrow{display:flex;gap:8px;align-items:center;margin:12px 0}
.numrow .infield{flex:1;position:relative;display:flex;align-items:center}
.numrow input{flex:1;width:100%;font-size:22px;padding:12px 14px;text-align:center;font-variant-numeric:tabular-nums}
.infield:has(.unit) input{padding-right:4.2em}
.infield .unit{position:absolute;right:12px;pointer-events:none;font-size:20px;font-weight:700;color:var(--deep);background:var(--teal-soft);padding:2px 10px;border-radius:8px}
.numrow .unit{font-weight:700;color:var(--mute)}
.numres{margin:12px 0;padding:12px 14px;border-radius:12px;border:2px solid var(--line);background:var(--card);font-size:16px;line-height:1.5}
.numres.good{border-color:var(--ok);background:var(--ok-soft)} .numres.wrong{border-color:var(--bad);background:var(--bad-soft)}
.nums{display:grid;gap:6px;margin-bottom:10px}
.nrow{position:relative;overflow:hidden;display:flex;justify-content:space-between;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.nrow.ok{border-color:var(--ok)} .nrow>span{position:relative} .nrow .pbar{position:absolute;inset:0 auto 0 0;background:var(--teal-soft)}
.nrow.ok .pbar{background:color-mix(in srgb,var(--ok) 20%,transparent)}
.banner.streak{background:#fff1e6;border:2px solid #f97316;color:#9a3412;font-size:17px}
.sbar{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:6px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:rgba(255,255,255,.94);border-top:1px solid var(--line);backdrop-filter:blur(6px);z-index:20}
.sbar button{font-size:26px;line-height:1;width:48px;height:48px;padding:0;border-radius:50%;display:grid;place-items:center;transition:transform .15s}
.sbar button.sent{transform:scale(1.3) translateY(-6px)}
.sbar button:disabled{opacity:.4;filter:grayscale(1)}
.sbar::before{content:"";position:absolute;left:0;top:-1px;height:3px;width:var(--rxp,0%);background:var(--teal);opacity:0;transition:opacity .2s}
.sbar.cool::before{opacity:1}
body:has(.sbar){padding-bottom:76px}
.seg3{display:flex;gap:0}.seg3 button{flex:1;border-radius:0}.seg3 button:first-child{border-radius:8px 0 0 8px}.seg3 button:last-child{border-radius:0 8px 8px 0}
.seg3 button.on{background:var(--deep);color:#fff;border-color:var(--deep)}
.rk{margin:10px 0 6px;padding:0;list-style:none;display:grid;gap:3px;font-size:14px}
.rk li{display:flex;gap:6px;align-items:center}.rk li span{min-width:1.6em;font-weight:700;color:var(--teal)}.rk li b{margin-left:auto}
.endbtn{width:100%;margin:-4px 0 12px;padding:10px;border-radius:12px;border:2px solid var(--bad);background:#fff;color:var(--bad);font-weight:700}
.rbar{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.rbar button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:12px;transition:transform .15s}
.rbar button span{font-size:26px;line-height:1}
.rbar button small{font-size:11px;color:var(--mute)}
.rbar button.sent{transform:scale(1.12);background:var(--teal-soft);border-color:var(--teal)}
.handsbox{margin-top:10px;display:grid;gap:4px}
.handsbox .pk{padding:8px 10px;border-radius:10px;background:#fff3d6;border:1px solid var(--amber);color:#7a4a00}
.clock{display:inline-flex;align-items:center;gap:.5em;padding:.3em .8em;border-radius:999px;background:var(--teal-soft);color:var(--deep);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.clock .cb{width:5em;height:.45em;border-radius:1em;background:rgba(0,0,0,.08);overflow:hidden}
.clock .cb i{display:block;height:100%;background:var(--teal);transition:width .25s linear}
.clock.warn{background:#fdf0dc;color:var(--amber)} .clock.warn .cb i{background:var(--amber)}
.clock.danger{background:var(--bad-soft);color:var(--bad);animation:clockpulse 1s infinite} .clock.danger .cb i{background:var(--bad)}
.ckb{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.clock.wide{display:flex;margin:10px 0 2px} .clock.wide .cb{flex:1}
@keyframes clockpulse{50%{opacity:.6}}
@media (prefers-reduced-motion:reduce){.clock.danger{animation:none}}
.tx{display:inline-block;max-width:100%;height:auto;vertical-align:middle}
.tx.txs,.tx.txe{display:block}
.tx.txe{font-size:max(1em,15px)}
.qimg{display:block;width:min(100%, calc(var(--h,200px) * var(--s,1) * var(--r,1.5)));height:auto;margin:0 auto 16px;border-radius:10px}

/* question ouverte : réponses de la classe en nuage */
.cloud{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:baseline;margin:8px 0}
.cloud .w{display:inline-flex;align-items:baseline;gap:5px;padding:4px 10px;border-radius:999px;background:#eef1f5;color:var(--deep);font-weight:600;line-height:1.2}
.cloud .w small{font-size:11px;font-weight:600;color:var(--mute)}
.cloud .w.ok{background:var(--ok-soft);color:var(--ok)} .cloud .w.ko{background:var(--bad-soft);color:var(--bad)}
/* mode autonome : navigation entre les questions */
.anav{display:flex;align-items:center;gap:8px;margin:8px 0 4px;flex-wrap:wrap}
.adots{display:flex;flex-wrap:wrap;gap:4px;flex:1;min-width:120px}
.adot{width:28px;height:28px;padding:0;border-radius:50%;border:2px solid var(--line);background:#fff;font-size:12px;font-weight:700;color:var(--mute);cursor:pointer}
.adot.done{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.adot.cur{border-color:var(--teal);color:var(--teal);box-shadow:0 0 0 2px var(--teal-soft)}
.adot.done.cur{background:var(--ok-soft)}

.stats3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:4px 0 8px;padding:10px 12px;border-radius:12px;background:var(--bg)}
.stats3 .kpi{font-family:Cambria,Georgia,serif;font-size:26px;font-weight:700;color:var(--deep);line-height:1.1}