/* ══════════════════════════════════════════════════════════════════
RÉSEAU MISTRAL V3 — habillage « pupitre radio, Marseille à l'heure dorée »
Bleu nuit profond + ambre + cyan signal. Aucune dépendance, polices système.
══════════════════════════════════════════════════════════════════ */
:root{
  --bg0:#081c30; --bg1:#0a2238; --bg2:#0e2c46;
  --panel:#0d2740; --panel2:#11314f; --line:#1d4066; --line2:#2a5580;
  --txt:#e8f1f8; --txt2:#aac3d6; --txt3:#7f9cb2;
  --amber:#f2b24a; --amber2:#ffd479; --cyan:#5ad0b8; --cyan2:#8fe8d8;
  --red:#e2705c; --green:#57d08a;
  --r:12px; --shadow:0 10px 30px rgba(2,10,20,.45);
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;background:var(--bg0);color:var(--txt);
  font-family:var(--sans);overflow:hidden;
  -webkit-user-select:none;user-select:none}
#app{position:relative;width:100vw;height:100vh;height:100dvh;overflow:hidden;
  background:
    radial-gradient(1200px 500px at 70% -10%, #14395c 0%, transparent 60%),
    linear-gradient(180deg,#0a2238 0%, #081c30 100%)}

/* bandeaux système */
#sndWarn{display:none;position:absolute;z-index:60;top:58px;left:12px;right:12px;
  background:#3b2f14;color:#ffe9ad;font-size:13px;padding:9px 12px;gap:10px;
  align-items:center;justify-content:center;border:1px solid #6b5a2a;border-radius:10px;
  box-shadow:0 8px 22px rgba(0,0,0,.4)}
#sndWarn button{background:none;border:none;color:#ffe9ad;font-size:15px;cursor:pointer}
#offBadge{display:none;position:absolute;z-index:59;top:0;left:0;right:0;text-align:center;
  background:#123a2c;color:#9fe8c8;font-size:12px;letter-spacing:.6px;padding:6px;border-bottom:1px solid #1e5c44}
#updBar{display:none;position:absolute;z-index:61;top:0;left:0;right:0;text-align:center;
  background:#14355c;color:#cfe6fa;font-size:13px;padding:8px;border-bottom:1px solid #2a5580}
#updBar button{margin-left:8px;background:#2a5580;border:1px solid #3f6fae;color:#eaf4ff;
  border-radius:7px;padding:5px 12px;font-size:12.5px;cursor:pointer}

/* ─── scène panorama ─── */
.scene{position:absolute;inset:0;z-index:1}
.scene svg{width:100%;height:100%;display:block}
.scene::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(8,20,34,.35) 0%, transparent 18%, transparent 70%, rgba(8,20,34,.55) 100%)}
.scene.armed{cursor:crosshair}
.g-off{opacity:.5;filter:saturate(.55) brightness(.82)}
.g-off .halo{display:none}
.g-hide{display:none}
.g-hide.on{display:block}
.win{fill:#3d4a56;transition:fill .8s}
g:not(.g-off) .win{fill:#ffd479}
.halo{opacity:.9}
.blink{animation:bl 1.2s infinite}
@keyframes bl{0%,100%{opacity:1}50%{opacity:.25}}
.waveRing{fill:none;stroke:#8fd8ff;stroke-width:2;opacity:0}
.dropzone{fill:transparent;stroke:none;cursor:pointer}
.zoneHint{fill:none;stroke:#ffd479;stroke-width:2.6;stroke-dasharray:8 7;opacity:0;pointer-events:none}
.zoneHint.show{opacity:.95;animation:zh 1.1s infinite}
@keyframes zh{50%{stroke-opacity:.35}}
.feu{opacity:0}
#fxFete.on .feu{animation:feu 1.9s infinite}
#fxFete.on .f2{animation-delay:.5s}
#fxFete.on .f3{animation-delay:1.1s}
@keyframes feu{0%{opacity:0;r:3}18%{opacity:1;r:5}60%{opacity:.9;r:26}100%{opacity:0;r:34}}
#vigieBeam.on{display:block;animation:beam 5.5s infinite}
@keyframes beam{0%,100%{opacity:.12}50%{opacity:.5}}
#centralDish{display:none}#centralDish.on{display:block}
#fxLiaison.on,#fxFerry.on,#fxTrain.on{display:block}

/* ─── header ─── */
.hd{position:absolute;z-index:20;top:0;left:0;right:0;display:flex;align-items:center;gap:14px;
  padding:12px 18px;background:linear-gradient(180deg, rgba(8,18,30,.88), rgba(8,18,30,.42) 78%, transparent);
  pointer-events:none}
.hd>*{pointer-events:auto}
.sig{font-weight:800;letter-spacing:3.2px;font-size:15.5px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.sig::before{content:"◉ ";color:var(--cyan);font-size:12px}
.sub{font-size:11.5px;color:var(--txt2);letter-spacing:1.1px;margin-top:2px}
.sp{flex:1}
.live{display:flex;align-items:center;gap:7px;font-size:11px;letter-spacing:2px;color:#ffb9a3;
  background:rgba(30,12,10,.5);border:1px solid rgba(226,112,92,.4);padding:5px 11px;border-radius:20px}
.live .dot{width:7px;height:7px;border-radius:50%;background:#e2593f;animation:bl 1.6s infinite}
.menuBtn{background:rgba(13,39,64,.85);border:1px solid var(--line2);color:var(--txt);
  font-size:19px;border-radius:9px;width:40px;height:40px;cursor:pointer}
#menu{display:none;position:absolute;z-index:55;top:58px;right:16px;width:270px;
  background:var(--panel);border:1px solid var(--line2);border-radius:var(--r);box-shadow:var(--shadow);padding:8px}
#menu button{display:block;width:100%;text-align:left;background:none;border:none;color:var(--txt);
  font-size:13.5px;padding:11px 12px;border-radius:8px;cursor:pointer}
#menu button:hover{background:var(--panel2)}
#menu .sep{height:1px;background:var(--line);margin:6px 4px}
#menu .mVol{display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:12.5px;color:var(--txt2)}
#menu input[type=range]{flex:1;accent-color:var(--amber)}

/* ─── accueil ─── */
.homeUI{position:absolute;z-index:15;left:0;right:0;bottom:0;display:none;
  padding:18px;gap:14px;align-items:flex-end;justify-content:space-between;
  flex-wrap:wrap}
.homeCard{background:rgba(10,30,50,.92);border:1px solid var(--line2);border-radius:var(--r);
  padding:16px 18px;max-width:520px;box-shadow:var(--shadow);backdrop-filter:blur(6px)}
.homeCard .k{font-size:10.5px;letter-spacing:2.4px;color:var(--amber);font-weight:700}
.homeCard .v{font-size:14.5px;line-height:1.55;margin-top:7px;color:var(--txt)}
.prog{display:flex;align-items:center;gap:10px;margin-top:12px}
.progBar{flex:1;height:7px;background:#12314e;border-radius:5px;overflow:hidden;border:1px solid var(--line)}
.progBar i{display:block;height:100%;width:0;border-radius:5px;
  background:linear-gradient(90deg,var(--cyan),var(--amber2));transition:width .8s}
.prog span{font-size:10.5px;color:var(--txt3);letter-spacing:1px;white-space:nowrap}
.recs{font-size:10px;color:var(--txt3);letter-spacing:1.6px;margin-top:11px}
.homeBtns{display:flex;flex-direction:column;gap:10px}
.go{display:flex;align-items:center;gap:13px;background:linear-gradient(135deg,#153a5e,#0f2c48);
  border:1px solid #2a5580;border-radius:14px;color:#fff;padding:15px 22px;cursor:pointer;
  box-shadow:0 8px 26px rgba(4,12,24,.55), inset 0 1px 0 rgba(255,255,255,.07);
  transition:transform .15s, box-shadow .15s}
.go:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(4,12,24,.65)}
.go:active{transform:translateY(1px)}
.go:disabled{opacity:.45;cursor:default;transform:none}
.go .tri{width:0;height:0;border-left:15px solid var(--amber2);border-top:10px solid transparent;border-bottom:10px solid transparent}
.go span:last-child{display:flex;flex-direction:column;align-items:flex-start;font-weight:700;letter-spacing:1.2px;font-size:14.5px}
.go small{font-weight:400;font-size:10.5px;color:var(--txt2);letter-spacing:1px;margin-top:2px}
.go.defi{background:linear-gradient(135deg,#3b2f14,#2a2210);border-color:#6b5a2a;padding:11px 18px}
.go.defi .defiIco{font-size:19px}
.go.defi span:last-child{font-size:12.5px}
.replayBtn{margin:4px 6px 0 0;padding:9px 12px;border-radius:8px;border:1px solid var(--cyan);
  background:rgba(87,194,168,.12);color:#d8f5ec;cursor:pointer;font-size:12.5px}

/* ─── mission ─── */
.mUI{display:none;position:absolute;z-index:15;inset:0;pointer-events:none}
.mUI.show{display:block}
.mUI>*{pointer-events:auto}
.brief{position:absolute;top:64px;left:16px;right:16px;display:flex;gap:10px;align-items:flex-start}
.kara{flex:1;background:rgba(8,22,38,.92);border:1px solid var(--line2);border-left:4px solid var(--amber);
  border-radius:10px;padding:11px 14px;font-size:15.5px;line-height:1.55;box-shadow:var(--shadow)}
.kara span.hot{color:var(--amber2);text-shadow:0 0 12px rgba(255,212,121,.55)}
.aid{background:rgba(13,39,64,.94);border:1px solid var(--line2);color:var(--txt2);border-radius:9px;
  padding:10px 13px;font-size:12px;cursor:pointer;white-space:nowrap}
.aid.gold{border-color:#6b5a2a;color:#ffe9ad;background:rgba(59,47,20,.9)}
.aid:active{transform:translateY(1px)}
.tok{display:none;position:absolute;z-index:30;width:84px;text-align:center;cursor:grab;touch-action:none}
.tok:active{cursor:grabbing}
.tok.pulse{animation:tokp 1.4s infinite}
@keyframes tokp{50%{transform:scale(1.07)}}
.tok svg{width:70px;height:70px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}
.tok .lbl{font-size:9px;letter-spacing:1.4px;color:#ffe9ad;background:rgba(8,20,34,.85);
  border-radius:6px;padding:3px 6px;margin-top:3px}
.panel{display:none;position:absolute;z-index:25;left:50%;bottom:18px;transform:translateX(-50%);
  width:min(680px, calc(100vw - 28px));max-height:62vh;overflow:auto;
  background:linear-gradient(180deg, rgba(13,39,64,.97), rgba(9,28,47,.97));
  border:1px solid var(--line2);border-radius:16px;box-shadow:var(--shadow);padding:16px 18px;
  backdrop-filter:blur(8px)}
.panel.show{display:block;animation:pin .28s ease-out}
@keyframes pin{from{opacity:0;transform:translateX(-50%) translateY(16px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.panel .k{font-size:10.5px;letter-spacing:2.2px;color:var(--amber);font-weight:700;margin-bottom:10px}
.note{background:#f4ecd7;color:#3d3323;border-radius:9px;padding:13px 15px;font-size:15px;line-height:1.65;
  box-shadow:inset 0 0 0 1px #d9cba4, 0 3px 10px rgba(0,0,0,.25);white-space:pre-line}
.note h4{margin:0 0 6px;font-size:11px;letter-spacing:2px;color:#8a6d35}
.syll{color:#b8503f;font-weight:700;letter-spacing:1px}
.row{display:flex;gap:10px;margin-top:13px;flex-wrap:wrap}
.row button{background:var(--panel2);border:1px solid var(--line2);color:var(--txt);border-radius:9px;
  padding:11px 16px;font-size:13.5px;cursor:pointer}
.row button.main{background:linear-gradient(135deg,#1d5c4c,#14453a);border-color:#2e8f6f;color:#d8f5ec;font-weight:700}
.row button:active{transform:translateY(1px)}
.codeTxt{font-size:44px;font-weight:800;letter-spacing:7px;text-align:center;color:#fff;margin:10px 0 4px;
  text-shadow:0 0 24px rgba(90,208,184,.35)}
.codeTxt .sy2{color:var(--cyan2)} .codeTxt .sy3{color:var(--amber2)}
.dotsep{color:var(--txt3);margin:0 6px}
.triPhrase{font-size:19px;text-align:center;margin:8px 0 14px;line-height:1.6}
.triPhrase u{color:var(--amber2);text-decoration:none;border-bottom:2px dashed var(--amber);padding:0 6px}
.triBtns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.triBtns button{min-width:84px;font-size:19px;background:var(--panel2);border:1px solid var(--line2);
  color:var(--txt);border-radius:10px;padding:13px 18px;cursor:pointer}
.triBtns button.ok{background:#14453a;border-color:#2e8f6f;color:#9fe8c8}
.triBtns button.ko{background:#4a1f18;border-color:#8a3527;color:#ffb9a3}
.triProg{text-align:center;font-size:11px;color:var(--txt3);letter-spacing:1.6px;margin-top:11px}
.ordPicked{min-height:30px;margin-bottom:10px}
.ordPicked div{background:#14453a;border:1px solid #2e8f6f;border-radius:8px;padding:8px 12px;
  font-size:13.5px;margin-bottom:6px;color:#d8f5ec}
.ordPicked b{color:#9fe8c8;margin-right:8px}
.ordPool{display:flex;flex-wrap:wrap;gap:9px}
.ordPool button{background:var(--panel2);border:1px solid var(--line2);color:var(--txt);
  border-radius:9px;padding:11px 14px;font-size:13.5px;cursor:pointer}
.ordPool button:disabled{opacity:.28}
.mcqQ{font-size:16.5px;font-weight:700;margin:12px 0 10px;line-height:1.5}
.mcqOpts{display:flex;flex-direction:column;gap:9px}
.mcqOpts button{text-align:left;background:var(--panel2);border:1px solid var(--line2);color:var(--txt);
  border-radius:9px;padding:12px 15px;font-size:14.5px;cursor:pointer}
.mcqOpts button.ok{background:#14453a;border-color:#2e8f6f;color:#9fe8c8}
.mcqOpts button.ko{background:#4a1f18;border-color:#8a3527;color:#ffb9a3}
#pType input{width:100%;background:#081826;border:1px solid var(--line2);border-radius:10px;color:#fff;
  font-size:17px;padding:13px 14px;margin-top:11px;outline:none;
  -webkit-user-select:text;user-select:text}
#pType input:focus{border-color:var(--cyan)}
#typeDiff{margin-top:11px;font-size:15px;line-height:1.7;min-height:22px}
.wdLine{font-size:16.5px;letter-spacing:.4px}
.wdKo{background:#4a1f18;border-bottom:2px solid #e2705c;border-radius:4px;padding:1px 4px;color:#ffcdc2}
.wdMiss{background:#3b2f14;border-bottom:2px dashed var(--amber);border-radius:4px;padding:1px 6px;color:#ffe9ad}
.wdHint{margin-top:8px;color:var(--txt2);font-size:13.5px}
.wdFix{margin-top:7px;color:#9fe8c8;font-size:15px;font-weight:700}
.spotTxt span.w{cursor:pointer;border-radius:5px;padding:1px 3px}
.spotTxt span.w:hover{background:#e8dcb4}
.spotTxt span.w.ko{background:#e8c4b4;color:#8a3527;text-decoration:line-through}
.spotTxt span.w.ok{background:#cfead8;color:#1d5c3a;font-weight:700}
.pairsWrap{display:flex;gap:12px}
.pairsCol{flex:1;display:flex;flex-direction:column;gap:8px}
.pairsCol button{background:var(--panel2);border:1px solid var(--line2);color:var(--txt);border-radius:9px;
  padding:12px 10px;font-size:14px;cursor:pointer}
.pairsCol button.sel{border-color:var(--amber);background:#3b2f14;color:#ffe9ad}
.pairsCol button.done{opacity:.35;pointer-events:none;background:#14453a;border-color:#2e8f6f;color:#9fe8c8}
.pairsCol button.ko{background:#4a1f18;border-color:#8a3527}
.buildOut{min-height:52px;text-align:center;font-size:34px;font-weight:800;letter-spacing:5px;color:#fff;
  border-bottom:2px dashed var(--line2);padding:6px 0;margin-bottom:14px}
.fb{position:absolute;z-index:26;left:50%;transform:translateX(-50%);bottom:calc(62vh + 26px);
  max-width:min(600px, calc(100vw - 40px));text-align:center;font-size:14px;color:#9fe8c8;
  background:rgba(8,25,20,.9);border:1px solid #1e5c44;border-radius:10px;padding:8px 16px;
  opacity:0;transition:opacity .25s;pointer-events:none}
.fb:not(:empty){opacity:1}
.fb.err{color:#ffcdc2;background:rgba(40,12,8,.9);border-color:#8a3527}
.steps{position:absolute;z-index:24;top:52px;left:50%;transform:translateX(-50%);display:flex;gap:5px}
.steps i{width:26px;height:5px;border-radius:3px;background:#1d4066}
.steps i.on{background:var(--amber);box-shadow:0 0 10px rgba(242,178,74,.6)}
.dbBig{font-size:26px;font-weight:800;letter-spacing:2.6px;text-align:center;color:#fff;
  text-shadow:0 0 26px rgba(90,208,184,.5);margin-top:6px}
.dbNx{font-size:14.5px;line-height:1.65;color:var(--txt2);text-align:center;margin-top:12px}
.evals{display:flex;gap:12px;justify-content:center;margin-top:8px}
.evals button{width:60px;height:48px;font-size:19px;background:var(--panel2);border:1px solid var(--line2);
  color:var(--txt2);border-radius:10px;cursor:pointer}
.evals button.sel{border-color:var(--amber);color:var(--amber2);background:#3b2f14}
.evalWhy{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:11px;min-height:0}
.evalWhy button{background:none;border:1px solid var(--line);border-radius:16px;color:var(--txt3);
  font-size:11.5px;padding:6px 12px;cursor:pointer}
.evalWhy button.sel{border-color:var(--cyan);color:var(--cyan2);background:rgba(90,208,184,.1)}

/* ─── espace adulte ─── */
#adult{display:none;position:absolute;z-index:70;inset:0;background:#f5f1e6;color:#2c2c2c;
  overflow:auto;padding:22px 26px 40px;-webkit-user-select:text;user-select:text}
#adult.show{display:block}
.adHead{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
#adult h1{font-size:19px;margin:0;letter-spacing:1.4px;color:#1d3a52}
.adTabs{display:flex;gap:6px;background:#e6dfc9;border-radius:10px;padding:4px}
.adTabs button{border:none;background:none;font-size:13px;padding:8px 16px;border-radius:8px;cursor:pointer;color:#5d5647}
.adTabs button.on{background:#fff;color:#1d3a52;font-weight:700;box-shadow:0 2px 6px rgba(0,0,0,.12)}
#adult h2{font-size:14px;margin:26px 0 8px;border-bottom:2px solid #d9a441;padding-bottom:4px;color:#1d3a52}
#adult h3{font-size:12px;margin:0 0 8px;color:#5d5647;letter-spacing:.6px}
.adMeta{font-size:13px;color:#555;margin-top:10px;line-height:1.8}
.adCards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:18px}
.adC{background:#fff;border-radius:12px;padding:14px 16px;box-shadow:0 3px 12px rgba(0,0,0,.08);border-top:4px solid #d9a441}
.adC.good{border-top-color:#2e8f5f}.adC.warn{border-top-color:#c2554b}.adC.info{border-top-color:#3f6fae}
.adC .t{font-size:11px;letter-spacing:1.6px;font-weight:700;color:#8a7a55;margin-bottom:7px}
.adC .b{font-size:13.5px;line-height:1.6;color:#333}
.adC .b b{color:#1d3a52}
.adGraphs{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-top:18px}
.adG{background:#fff;border-radius:12px;padding:14px 16px;box-shadow:0 3px 12px rgba(0,0,0,.08)}
.adG svg{width:100%;height:auto;display:block}
.adShare{margin-top:22px;background:#fff;border-radius:12px;padding:18px;box-shadow:0 3px 12px rgba(0,0,0,.08);
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.bigShare{background:linear-gradient(135deg,#1d5c4c,#14453a);color:#d8f5ec;border:none;border-radius:12px;
  font-size:16px;font-weight:700;padding:15px 30px;cursor:pointer;box-shadow:0 5px 16px rgba(20,69,58,.35)}
.adShare .s{font-size:12px;color:#777;max-width:420px}
#adult table{border-collapse:collapse;width:100%;font-size:12.5px;background:#fff;border-radius:8px;overflow:hidden}
#adult td,#adult th{border:1px solid #ddd4bc;padding:6px 9px;text-align:left}
#adult th{background:#efe8d2;font-size:11px;letter-spacing:.6px}
#adult .frag{color:#b8503f;font-weight:700}
.adMWrap{display:flex;flex-wrap:wrap;gap:8px}
.adM{background:#fff;border:1px solid #cbbd97;border-radius:8px;padding:9px 13px;font-size:12.5px;cursor:pointer}
.adM:hover{background:#f8f3e4}
.obsRow{display:flex;gap:8px;margin:8px 0}
.obsRow input{flex:1;border:1px solid #cbbd97;border-radius:8px;padding:9px 12px;font-size:13px;background:#fff}
.obsRow button{background:#1d3a52;color:#fff;border:none;border-radius:8px;padding:9px 16px;cursor:pointer}
#obsList{font-size:12.5px;color:#555;line-height:1.9}
.abtns{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.abtns button,.abtns label{background:#fff;border:1px solid #cbbd97;border-radius:9px;padding:10px 15px;
  font-size:12.5px;cursor:pointer;color:#333}
.abtns button.main{background:#1d3a52;border-color:#1d3a52;color:#fff;font-weight:700}
.abtns label input{display:none}
#adult .warn{font-size:11px;color:#8a7a55;margin-top:18px;line-height:1.7}

/* ─── overlays ─── */
.ov{display:none;position:absolute;z-index:80;inset:0;background:rgba(5,14,24,.9);backdrop-filter:blur(5px);
  flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:22px;text-align:center}
.ov.show{display:flex}
.ov .t{font-size:19px;font-weight:700;max-width:480px;line-height:1.5}
.ov .s{font-size:12.5px;color:var(--txt3);line-height:1.7}
.ov input{background:#081826;border:1px solid var(--line2);border-radius:10px;color:#fff;font-size:20px;
  text-align:center;padding:12px 16px;width:230px;outline:none;letter-spacing:3px;
  -webkit-user-select:text;user-select:text}
.ov .big{background:linear-gradient(135deg,#1d5c4c,#14453a);border:1px solid #2e8f6f;color:#d8f5ec;
  font-size:15px;font-weight:700;letter-spacing:1.6px;border-radius:12px;padding:14px 26px;cursor:pointer}
.ov .big.ghost{background:rgba(13,39,64,.7);border-color:var(--line2);color:var(--txt2)}

/* ─── mobile : réorganisation réelle ─── */
body.m .scene{inset:auto 0 auto 0;top:0;height:44dvh}
body.m .scene::after{background:linear-gradient(180deg, rgba(8,20,34,.4) 0%, transparent 24%, transparent 82%, rgba(8,20,34,.7) 100%)}
body.m .hd{padding:8px 10px}
body.m .sig{font-size:12.5px;letter-spacing:2.2px}
body.m .sub{font-size:9.5px}
body.m .live{display:none}
body.m .homeUI{flex-direction:column;align-items:stretch;padding:12px;gap:10px;top:44dvh;bottom:0;justify-content:flex-start;overflow:auto}
body.m .homeCard{max-width:none}
body.m .homeBtns{flex-direction:column}
body.m .go{justify-content:center}
body.m.mission .scene{height:30dvh}
body.m .brief{top:calc(30dvh + 6px);left:10px;right:10px;flex-wrap:wrap}
body.m .kara{font-size:13.5px;padding:9px 12px;flex-basis:100%;max-height:26dvh;overflow:auto}
body.m .aid{font-size:11px;padding:8px 11px}
body.m .panel{bottom:8px;max-height:52dvh;width:calc(100vw - 16px);padding:13px 14px}
body.m .fb{bottom:auto;top:calc(30dvh - 42px);z-index:40}
body.m .steps{top:auto;bottom:calc(46dvh + 14px);display:none}
body.m #sndWarn{top:50px}
body.m .codeTxt{font-size:32px;letter-spacing:5px}
body.m .triPhrase{font-size:16.5px}
body.m .mcqOpts button{font-size:13.5px;padding:11px 12px}
body.m #adult{padding:14px 12px 40px}
body.m .adGraphs{grid-template-columns:1fr}
body.m .pairsWrap{gap:8px}
body.m .pairsCol button{font-size:12.5px;padding:10px 8px}
@media (max-height:430px){ /* téléphone en paysage */
  .panel{max-height:74vh;bottom:8px}
  .brief{top:52px}
  .steps{display:none}
}

/* ══════════ V3.1 « FUN & ÉMOTION » — vie, lumière, récompenses ══════════ */
/* Monde vivant (décoratif, léger, coupé si l'utilisateur préfère moins de mouvement) */
.cloud{animation:drift 140s linear infinite alternate}
.cB{animation-duration:180s;animation-delay:-60s}
.cC{animation-duration:110s;animation-delay:-30s}
.cD{animation-duration:200s;animation-delay:-90s}
@keyframes drift{from{transform:translateX(-30px)}to{transform:translateX(70px)}}
.gull{animation:gullB 7s ease-in-out infinite alternate}
.g2{animation-duration:9s;animation-delay:-3s}
.g3{animation-duration:8s;animation-delay:-5s}
.g4{animation-duration:11s;animation-delay:-2s}
@keyframes gullB{from{transform:translate(0,0)}50%{transform:translate(9px,-5px)}to{transform:translate(20px,2px)}}
.sunGlow{animation:sunB 9s ease-in-out infinite alternate;transform-origin:828px 86px}
@keyframes sunB{from{opacity:.85}to{opacity:1}}
.shimmerA{animation:shimB 6s ease-in-out infinite alternate}
@keyframes shimB{from{opacity:.38}to{opacity:.66}}
.waves path{animation:waveB 5s ease-in-out infinite alternate}
.waves path:nth-child(2n){animation-delay:-2.6s}
.waves path:nth-child(3n){animation-delay:-1.4s}
@keyframes waveB{from{transform:translateX(0);opacity:.4}to{transform:translateX(7px);opacity:.62}}
.rock{transform-box:fill-box;transform-origin:center 80%;animation:rockB 5.4s ease-in-out infinite alternate}
.r2{animation-duration:6.6s;animation-delay:-2s}
.r3{animation-duration:4.8s;animation-delay:-1s}
@keyframes rockB{from{transform:rotate(-1.3deg) translateY(0)}to{transform:rotate(1.3deg) translateY(1px)}}
.roueSpokes{transform-box:fill-box;transform-origin:center;animation:spinB 46s linear infinite}
@keyframes spinB{to{transform:rotate(360deg)}}
.puff{opacity:0;animation:puffB 7s ease-out infinite}
.p2{animation-delay:2.4s}.p3{animation-delay:4.2s;animation-duration:8s}
@keyframes puffB{0%{opacity:0;transform:translate(0,0) scale(.6)}12%{opacity:.55}100%{opacity:0;transform:translate(10px,-26px) scale(1.7)}}
.glint{opacity:0;animation:glintB 12s ease-in-out infinite}
@keyframes glintB{0%,92%,100%{opacity:0}95%{opacity:1;transform:scale(1.4);transform-box:fill-box;transform-origin:center}}
#cargoFlag,#voilierFanion{transform-box:fill-box;transform-origin:left center;animation:flagB 3.2s ease-in-out infinite alternate}
@keyframes flagB{from{transform:skewY(-4deg)}to{transform:skewY(4deg)}}
#ferryBoat>path:first-child{}
/* halo de scène adouci */
.halo{animation:haloB 5s ease-in-out infinite alternate}
@keyframes haloB{from{opacity:.7}to{opacity:1}}

/* Récompenses des interactions */
.pop{animation:popB .3s ease-out}
@keyframes popB{0%{transform:scale(1)}45%{transform:scale(1.12)}100%{transform:scale(1)}}
.mcqOpts button.ok,.triBtns button.ok,.pairsCol button.done{animation:popB .32s ease-out}
.tok.shake{animation:shakeB .4s}
@keyframes shakeB{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}55%{transform:translateX(5px)}80%{transform:translateX(-3px)}}
.spark{position:absolute;z-index:33;width:9px;height:9px;border-radius:50%;pointer-events:none;
  animation:sparkB .75s ease-out forwards}
@keyframes sparkB{0%{opacity:1;transform:translate(0,0) scale(1)}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.35)}}
.chip{position:absolute;z-index:34;pointer-events:none;background:rgba(8,25,20,.92);border:1px solid #2e8f6f;
  color:#9fe8c8;font-size:12.5px;font-weight:700;letter-spacing:1.6px;border-radius:20px;padding:7px 14px;
  animation:chipB 1.9s ease-out forwards;white-space:nowrap}
@keyframes chipB{0%{opacity:0;transform:translate(-50%,8px) scale(.8)}14%{opacity:1;transform:translate(-50%,-4px) scale(1.05)}
  26%{transform:translate(-50%,-6px) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-34px)}}
.steps i.on{transition:background .3s, box-shadow .3s}
.steps i.ping{animation:pingB .5s ease-out}
@keyframes pingB{40%{transform:scaleY(2.1);box-shadow:0 0 16px rgba(255,212,121,.9)}}
.steps i.cur{animation:curB 1.6s ease-in-out infinite alternate}
@keyframes curB{from{opacity:.55}to{opacity:1}}
.dbBig{animation:stampB .55s cubic-bezier(.2,1.6,.4,1)}
@keyframes stampB{0%{opacity:0;transform:scale(1.7)}60%{opacity:1;transform:scale(.96)}100%{transform:scale(1)}}
.dbSeal{display:block;margin:2px auto 0;width:54px;height:54px;animation:sealB .8s cubic-bezier(.2,1.5,.4,1) .25s backwards}
@keyframes sealB{0%{opacity:0;transform:scale(.2) rotate(-30deg)}70%{opacity:1;transform:scale(1.12) rotate(4deg)}100%{transform:scale(1)}}
#debNext{animation:invitB 1.8s ease-in-out .9s infinite alternate}
@keyframes invitB{from{box-shadow:0 0 0 rgba(87,208,138,0)}to{box-shadow:0 0 18px rgba(87,208,138,.45)}}
.go .tri{transition:transform .2s}
.go:hover .tri{transform:translateX(3px)}
.go.defi .defiIco{animation:zapB 4s ease-in-out infinite}
@keyframes zapB{0%,88%,100%{opacity:1}92%{opacity:.4}95%{opacity:1}97%{opacity:.5}}
.homeCard{animation:riseB .5s ease-out}
@keyframes riseB{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
#progFill{transition:width 1.1s cubic-bezier(.3,1.2,.4,1)}
.note{transform:rotate(-.35deg);position:relative}
.note::before{content:"";position:absolute;top:-7px;left:50%;transform:translateX(-50%) rotate(1.5deg);
  width:74px;height:15px;background:rgba(226,214,180,.6);border-left:1px dashed rgba(150,130,90,.4);
  border-right:1px dashed rgba(150,130,90,.4)}
#mcqDoc.note{transform:rotate(.3deg)}
.row button,.mcqOpts button,.triBtns button,.ordPool button,.pairsCol button,.evals button{transition:transform .1s}
.row button:active,.mcqOpts button:active,.triBtns button:active,.ordPool button:active{transform:scale(.97)}
#menu{animation:menuB .18s ease-out;transform-origin:top right}
@keyframes menuB{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
#sndWarn{animation:riseB .35s ease-out}
.wdFocusOkFx{color:#9fe8c8;font-weight:700}
/* respect du réglage « réduire les animations » */
@media (prefers-reduced-motion: reduce){
  .cloud,.gull,.sunGlow,.shimmerA,.waves path,.rock,.roueSpokes,.puff,.glint,
  #cargoFlag,#voilierFanion,.halo,.steps i.cur,#debNext,.go.defi .defiIco{animation:none}
}
.gateLogo{width:76px;height:76px;border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.5);
  animation:riseB .6s ease-out}