/* Escape game Wood'Up — feuille commune (élève, tableau, prof) */
@import url("https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil+Display:wght@700;900&family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400&family=JetBrains+Mono:wght@500;700&display=swap");
:root{
  color-scheme: dark;
  --ground:#172226; --panel:#1f2e33; --panel-2:#26383e; --line:#35505a; --well:#0d1416;
  --ink:#eef1ec; --muted:#a3b4b3; --ply:#e3c48f; --ply-dark:#b8945a;
  --warn:#f2c230; --ok:#6fd08c; --bad:#ff7a6b; --bonus:#e59ad9;
  --c-a:#e8a33d; --c-b:#5fb4e8; --c-c:#8fd46b; --c-d:#b391f5; --c-e:#eef1ec;
  --display:"Big Shoulders Stencil Display", Impact, "Arial Narrow", sans-serif;
  --body:"Atkinson Hyperlegible", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--ground);color:var(--ink);font:17px/1.5 var(--body);
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:40px 40px;background-position:-1px -1px;background-attachment:fixed}
body::before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse at 50% 15%,transparent 0,var(--ground) 75%);pointer-events:none;z-index:0}
[hidden]{display:none!important}
.wrap{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding-inline:16px;padding-block:0 60px;display:flex;flex-direction:column;gap:22px}

.bar{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  background:color-mix(in srgb,var(--ground) 90%,transparent);backdrop-filter:blur(6px);border-bottom:2px solid var(--ply-dark);padding-block:10px}
.bar h1{font:900 clamp(24px,4.5vw,36px)/1 var(--display);letter-spacing:.04em;margin:0;color:var(--ply);text-transform:uppercase;flex:1 1 220px}
.bar h1 small{display:block;font:700 12px/1.4 var(--body);letter-spacing:.14em;color:var(--muted)}
.timer{font:700 clamp(26px,4.5vw,38px)/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--warn);background:var(--well);border:2px solid #0a0f10;border-radius:6px;padding:6px 12px}
.timer.late{color:var(--bad)} .timer.paused{opacity:.45}
.stat{font-size:12px;color:var(--muted);line-height:1.25;letter-spacing:.06em;text-transform:uppercase}
.stat b{display:block;font:700 20px var(--mono);color:var(--ink);letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums}
.stat b.score{color:var(--ok)}

.btn{font:700 15px var(--body);color:var(--ground);background:var(--ply);border:0;border-radius:6px;padding:10px 16px;cursor:pointer;box-shadow:0 3px 0 var(--ply-dark)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ply-dark)}
.btn.ghost{background:transparent;color:var(--ply);box-shadow:inset 0 0 0 2px var(--ply-dark)}
.btn.small{font-size:13px;padding:6px 10px}
.btn.danger{background:transparent;color:var(--bad);box-shadow:inset 0 0 0 2px var(--bad)}
.btn:disabled{opacity:.45;cursor:default}
.btn:focus-visible,input:focus-visible,summary:focus-visible,.choice:focus-visible{outline:3px solid var(--warn);outline-offset:2px}

.zone{display:flex;flex-direction:column;gap:14px;scroll-margin-top:110px}
.zone-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;border-bottom:1px dashed var(--line);padding-bottom:8px}
.zone-head .num{font:900 54px/.8 var(--display);color:var(--ply-dark)}
.zone-head h2{font:900 clamp(26px,4vw,34px)/1 var(--display);letter-spacing:.04em;text-transform:uppercase;margin:0;color:var(--ply)}
.zone-head p{margin:0;color:var(--muted);flex-basis:100%;max-width:70ch}
.zone.locked .zone-head{opacity:.5}
.lockedNote{background:var(--well);border:2px dashed var(--line);border-radius:8px;padding:16px;color:var(--muted)}
.zone.cleared .zone-head .num{color:var(--ok)}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;align-items:start}
.card{background:var(--panel);border:2px solid var(--line);border-radius:8px;display:flex;flex-direction:column;overflow:hidden}
.card header{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:10px 14px;background:var(--panel-2);border-bottom:2px solid var(--line)}
.tag{width:18px;height:18px;border-radius:3px;background:var(--c);flex:none;display:grid;place-items:center;font:700 11px/1 var(--body);color:var(--ground)}
.card h3{font:700 22px/1 var(--display);letter-spacing:.05em;text-transform:uppercase;margin:0;flex:1 1 auto;min-width:55%}
.notion{margin-left:auto;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:right}
.card .body{padding:14px;display:flex;flex-direction:column;gap:12px}
.card p{margin:0}
.card.bonus{border-style:dashed;border-color:var(--bonus)}
.card.bonus header{background:color-mix(in srgb,var(--bonus) 14%,var(--panel-2))}
.card.bonus .tag{border-radius:50%;background:var(--bonus)}
.bonus-flag{margin-left:auto;white-space:nowrap;font:900 14px/1 var(--display);letter-spacing:.1em;color:var(--ground);background:var(--bonus);padding:4px 7px;border-radius:3px}
.fig{background:#f4efe4;border-radius:6px;padding:8px;color:#1c2426;overflow-x:auto}
.fig svg{display:block;width:100%;height:auto}
.fig table{width:100%;border-collapse:collapse;font:500 14px var(--mono);font-variant-numeric:tabular-nums}
.fig th,.fig td{padding:5px 6px;border-bottom:1px solid #cfc6b3;text-align:left}
.fig th{font:700 12px var(--body);letter-spacing:.06em;text-transform:uppercase;color:#6b5a3a}
.fig td.r,.fig th.r{text-align:right;white-space:nowrap}
.fig .paper{font:14px/1.45 var(--body)}
.ask{font-weight:700}
.answer{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
.field{display:flex;align-items:center;flex:1 1 140px;background:var(--well);border:2px solid var(--line);border-radius:6px}
.field input{flex:1;min-width:0;background:transparent;border:0;color:var(--ink);font:700 20px var(--mono);padding:8px 10px}
.field span{padding-right:10px;color:var(--muted);font:500 15px var(--mono)}
.choices{display:grid;gap:8px}
.choice{text-align:left;font:700 16px var(--body);color:var(--ink);background:var(--well);border:2px solid var(--line);border-radius:6px;padding:10px 12px;cursor:pointer}
.choice:hover:not(:disabled){border-color:var(--ply-dark)}
.choice.right{border-color:var(--ok);color:var(--ok)}
.meta{display:flex;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.meta span{background:var(--well);border-radius:4px;padding:2px 8px}
.msg{min-height:1.5em;font-size:15px;margin:0}
.msg.bad{color:var(--bad)} .msg.ok{color:var(--ok)} .msg.wait{color:var(--warn)}
.hints{display:flex;flex-direction:column;gap:6px}
.hint{font-size:15px;background:rgba(242,194,48,.08);border-left:3px solid var(--warn);padding:6px 10px;border-radius:0 4px 4px 0}
.hintbtn{align-self:flex-start}
.card.solved{border-color:var(--c)}
.card.bonus.solved{border-style:solid}
.card.done .answer,.card.done .choices .choice:not(.right),.card.done .hintbtn{display:none}
.card.missed{opacity:.6}
.reveal{display:flex;align-items:center;gap:12px;background:var(--well);border-radius:6px;padding:10px 12px;animation:pop .4s ease-out}
.reveal .digit{font:900 44px/1 var(--display);color:var(--c);min-width:1ch;text-align:center}
.reveal small{color:var(--muted);font-size:14px}
.reveal .pts{margin-left:auto;font:700 20px var(--mono);color:var(--ok)}
.shake{animation:shake .35s}

.lock{background:var(--panel);border:2px solid var(--ply-dark);border-radius:8px;padding:16px 18px;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
.lock svg{width:76px;height:auto}
.lock h3{font:900 24px/1 var(--display);letter-spacing:.05em;text-transform:uppercase;margin:0 0 4px;color:var(--ply)}
.lock p{margin:0 0 10px;color:var(--muted)}
.dials{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.dial::placeholder{color:var(--c);opacity:.9}
.dial{width:58px;text-align:center;font:700 32px var(--mono);color:var(--ink);background:var(--well);border:3px solid var(--c);border-radius:6px;padding:4px 0}
.dial:disabled{opacity:.9}
.shackle{transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.lock.open .shackle{transform:translateY(-14px)}
.lock.open{border-color:var(--ok)}
.lock.waiting .dials{opacity:.4;pointer-events:none}
@media (max-width:520px){.lock{grid-template-columns:1fr}.lock svg{width:60px}}

.screen{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:16px;background:rgba(10,15,16,.9);backdrop-filter:blur(4px)}
.sheet{max-width:660px;width:100%;background:var(--panel);border:2px solid var(--ply-dark);border-radius:10px;padding:clamp(18px,4vw,32px);display:flex;flex-direction:column;gap:14px;max-height:100%;overflow:auto}
.sheet h2{font:900 clamp(34px,7vw,52px)/.95 var(--display);text-transform:uppercase;letter-spacing:.03em;margin:0;color:var(--ply);text-wrap:balance}
.sheet p{margin:0}
.kicker{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--warn);font-weight:700}
.rules{margin:0;padding-left:1.2em;color:var(--muted);display:flex;flex-direction:column;gap:4px}
.rules strong{color:var(--ink)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.team{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted)}
.team input{font:700 18px var(--body);color:var(--ink);background:var(--well);border:2px solid var(--line);border-radius:6px;padding:8px 10px}
.recap{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.recap div{background:var(--well);border-radius:6px;padding:10px;font-size:12px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.recap b{display:block;font:700 24px var(--mono);color:var(--ink);letter-spacing:0;text-transform:none}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:20;background:var(--ok);color:var(--ground);font:700 18px var(--body);padding:10px 18px;border-radius:8px;box-shadow:0 6px 24px rgba(0,0,0,.4);animation:pop .3s}

@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes pop{from{transform:scale(.9);opacity:.3}to{transform:none;opacity:1}}
@keyframes pulse{50%{opacity:.5}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Progression (tableau et admin) */
.lane{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.zone-seg{display:flex;gap:5px;align-items:center;padding:6px 8px;border-radius:6px;background:var(--well)}
.zone-seg.closed{opacity:.35}
.pip{display:inline-block;width:18px;height:18px;border-radius:4px;background:var(--line)}
.pip.ok{background:var(--ok)}
.pip.bonus{border-radius:50%;width:14px;height:14px;background:transparent;border:2px dashed var(--bonus)}
.pip.bonus.ok{background:var(--bonus);border-style:solid} .pip.bonus.rate{border-color:var(--bad);opacity:.6}
.lk{width:18px;height:22px;margin-left:3px}
.lk path{fill:none;stroke:var(--muted);stroke-width:3} .lk rect{fill:var(--line)}
.lk.open path{stroke:var(--ok);transform:translateY(-3px)} .lk.open rect{fill:var(--ok)}
.star{font:900 28px/1 var(--display);color:var(--line)} .star.ok{color:var(--warn)}
.reprise{font:500 12px var(--mono);color:var(--muted)}
.reprise b{color:var(--ink)}
select,.inp{font:600 16px var(--body);color:var(--ink);background:var(--well);border:2px solid var(--line);border-radius:6px;padding:8px 10px}
select:focus-visible,.inp:focus-visible{outline:3px solid var(--warn);outline-offset:2px}

/* Cartes bonus face cachée */
.card.cachee{border-style:dashed;border-color:var(--bonus);background:repeating-linear-gradient(45deg,var(--panel) 0 14px,color-mix(in srgb,var(--bonus) 8%,var(--panel)) 14px 28px)}
.card.cachee .body{align-items:flex-start}
.dos{font:900 54px/1 var(--display);color:var(--bonus);letter-spacing:.1em;opacity:.85}
.dos-notion{font-weight:700;color:var(--ink)}
.dos-aide{color:var(--muted);font-size:15px}
.rapidite{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.rapidite .barre{height:8px;border-radius:4px;background:var(--well);overflow:hidden}
.rapidite .barre i{display:block;height:100%;background:var(--bonus);transition:width .5s linear}
.pip.bonus.vu{border-style:solid}