/* Réseau Mistral V2 — feuille de style (reprise et extension du socle V1) */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; }
body { font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif; background:#0b2740; display:flex; align-items:center; justify-content:center; }
#app { width:min(1080px,100vw); height:min(100vh, calc(100vw*0.60)); min-height:480px; position:relative; overflow:hidden; background:#7db8dd; }
@media (min-width:1100px){ #app{ border-radius:14px; box-shadow:0 16px 46px rgba(0,0,0,.5);} }
button { font-family:inherit; }

/* bandeaux système */
#sndWarn { display:none; position:absolute; left:0; right:0; top:0; z-index:55; background:#7a2f2f; color:#ffe4e4; font-size:11.5px; padding:7px 14px; }
#offBadge { display:none; position:absolute; left:0; right:0; bottom:0; z-index:55; background:#28455c; color:#cfe3f2; font-size:11px; padding:6px 14px; text-align:center; letter-spacing:.04em; }
#updBar { display:none; position:absolute; left:50%; transform:translateX(-50%); top:8px; z-index:80; background:#123c36; border:1px solid #57c2a8; color:#d8f5ec; font-size:12px; padding:9px 14px; border-radius:9px; }
#updBar button { margin-left:8px; border:1px solid #57c2a8; background:rgba(87,194,168,.15); color:#d8f5ec; border-radius:6px; padding:5px 10px; cursor:pointer; font-size:11.5px; }
#updBar #updNo { border-color:#3a5a54; background:none; }

/* overlays */
.ov { position:absolute; inset:0; z-index:60; background:rgba(8,20,32,.93); display:none; flex-direction:column; align-items:center; justify-content:center; gap:16px; text-align:center; padding:20px; }
.ov.show { display:flex; }
.ov .t { color:#eef4f8; font-size:17px; letter-spacing:.03em; max-width:560px; line-height:1.5; }
.ov .s { color:#9fb4c5; font-size:12px; max-width:540px; line-height:1.6; }
.ov .big { font-size:16px; letter-spacing:.1em; padding:15px 32px; border-radius:8px; border:1px solid #57c2a8; background:rgba(87,194,168,.14); color:#e8f5f1; cursor:pointer; text-transform:uppercase; }
.ov .big.ghost { border-color:#3a4a58; background:none; }
.ov input { font-size:18px; padding:11px 14px; border-radius:8px; border:1px solid #3a4a58; background:#101b27; color:#eaf2f8; text-align:center; letter-spacing:.1em; width:230px; }

/* header */
.hd { position:absolute; top:0; left:0; right:0; z-index:20; display:flex; align-items:center; gap:12px; padding:12px 18px; }
.hd .sig { font-size:13px; letter-spacing:.1em; color:#123246; font-weight:700; text-shadow:0 1px 4px rgba(255,255,255,.4); }
.hd .sub { font-size:11px; color:#2c4a60; text-shadow:0 1px 3px rgba(255,255,255,.4); }
.hd .sp { flex:1; }
.hd .live { display:flex; align-items:center; gap:6px; font-size:10.5px; letter-spacing:.14em; color:#1d3a4e; font-weight:600; }
.hd .dot { width:8px; height:8px; border-radius:50%; background:#2e8f5f; animation:pl 2.2s infinite; }
@keyframes pl { 0%,100%{opacity:.35} 50%{opacity:1} }
.menuBtn { border:1px solid rgba(18,50,70,.4); background:rgba(255,255,255,.55); color:#123246; border-radius:6px; padding:6px 12px; font-size:14px; cursor:pointer; }
#menu { display:none; position:absolute; top:52px; right:16px; z-index:50; background:#14242f; border:1px solid #31404f; border-radius:8px; padding:10px; min-width:250px; }
#menu button { display:block; width:100%; text-align:left; background:none; border:none; color:#d6e1ea; font-size:12.5px; padding:9px 10px; border-radius:5px; cursor:pointer; }
#menu button:hover { background:#1d2f3c; }
#menu .sep { border-top:1px solid #2a3a47; margin:6px 0; }
#menu .mVol { display:flex; align-items:center; gap:10px; color:#9fb4c5; font-size:11.5px; padding:8px 10px; }
#menu .mVol input { flex:1; }

/* scène */
.scene { position:absolute; inset:0; }
.scene svg { width:100%; height:100%; display:block; }
.win { fill:#ffd479; opacity:.95; } .g-off .win { fill:#3a4a58; opacity:1; }
.halo { opacity:.55; } .g-off .halo { opacity:0; }
.g-hide { display:none; } .g-hide.on { display:block; }
.blink { animation:bk 1.1s infinite; }
@keyframes bk { 0%,100%{opacity:.25} 50%{opacity:1} }
.dropzone { fill:transparent; pointer-events:all; cursor:pointer; }
.zoneHint { stroke:#ffd479; stroke-width:3; fill:none; opacity:0; }
.zoneHint.show { opacity:.9; animation:bk 1.2s infinite; }
.waveRing { fill:none; stroke:#7fe0c8; stroke-width:2; opacity:0; }
.feu { opacity:0; }
#fxFete.on .feu { animation:feu 2.4s infinite; }
#fxFete.on .f2 { animation-delay:.8s; }
#fxFete.on .f3 { animation-delay:1.6s; }
@keyframes feu { 0%{opacity:0; r:3} 25%{opacity:1; r:22} 55%{opacity:.3; r:34} 100%{opacity:0; r:40} }

/* accueil */
.homeUI { position:absolute; left:0; right:0; bottom:0; z-index:20; padding:14px 18px 16px; display:flex; gap:14px; align-items:flex-end; background:linear-gradient(transparent, rgba(10,26,38,.78) 42%); }
.homeCard { color:#e6eef4; }
.homeCard .k { font-size:10px; letter-spacing:.2em; color:#a5c3d4; text-transform:uppercase; margin-bottom:4px; }
.homeCard .v { font-size:13px; line-height:1.5; max-width:470px; }
.homeCard .v b { color:#ffd479; font-weight:600; }
.recs { font-size:10.5px; color:#8fb0c2; letter-spacing:.06em; margin-top:6px; }
.go { margin-left:auto; border:none; border-radius:10px; padding:16px 24px; font-size:14.5px; letter-spacing:.07em; text-transform:uppercase; cursor:pointer; color:#0d1723; background:linear-gradient(160deg,#ffd479,#f0a63c); box-shadow:0 6px 22px rgba(240,166,60,.4); font-weight:700; display:flex; align-items:center; gap:10px; }
.go .tri { width:0; height:0; border-top:7px solid transparent; border-bottom:7px solid transparent; border-left:11px solid #0d1723; }
.go small { display:block; font-size:9.5px; letter-spacing:.14em; font-weight:600; opacity:.75; }
.go:disabled { filter:grayscale(.7); opacity:.6; cursor:default; }

/* mission — couche non bloquante, enfants interactifs (règle validée en V1) */
.mUI { position:absolute; inset:0; z-index:25; display:none; pointer-events:none; }
.mUI.show { display:block; }
.mUI .brief, .mUI .panel, #token { pointer-events:auto; }
.brief { position:absolute; top:54px; left:50%; transform:translateX(-50%); width:min(800px,94%); background:rgba(10,22,32,.87); border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:13px 16px; display:flex; align-items:center; gap:12px; }
.brief .kara { flex:1; font-size:18px; line-height:1.45; color:#f2f6f9; font-weight:600; }
.brief .kara span { padding:1px 4px; border-radius:4px; }
.brief .kara span.hot { background:rgba(255,212,121,.34); }
.aid { border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.07); color:#cfdae3; border-radius:8px; padding:9px 12px; font-size:10.5px; letter-spacing:.09em; cursor:pointer; text-transform:uppercase; white-space:nowrap; }
.aid.gold { border-color:rgba(255,212,121,.4); background:rgba(255,212,121,.08); color:#ffd479; }
.fb { position:absolute; bottom:96px; left:50%; transform:translateX(-50%); font-size:13.5px; color:#bdf0d2; text-shadow:0 1px 6px rgba(0,0,0,.75); min-height:18px; text-align:center; width:92%; z-index:26; pointer-events:none; font-weight:600; }
.fb.err { color:#ffc4b0; }
.steps { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:7px; }
.steps i { width:26px; height:5px; border-radius:3px; background:rgba(255,255,255,.35); }
.steps i.on { background:#ffd479; }

#token { position:absolute; z-index:40; width:70px; height:70px; cursor:grab; touch-action:none; filter:drop-shadow(0 6px 14px rgba(0,0,0,.45)); display:none; }
#token.pulse { animation:tk 1.6s infinite; }
@keyframes tk { 0%,100%{transform:scale(1)} 50%{transform:scale(1.09)} }
.tok .lbl { position:absolute; left:50%; transform:translateX(-50%); top:72px; font-size:9px; letter-spacing:.16em; color:#0f3246; background:rgba(255,255,255,.75); padding:2px 7px; border-radius:5px; white-space:nowrap; font-weight:700; }
#tokArt, #tokArt svg { width:70px; height:70px; display:block; }

/* panneaux d'étape */
.panel { position:absolute; top:50%; left:50%; transform:translate(-50%,-46%); width:min(640px,92%); background:rgba(11,22,32,.94); border:1px solid rgba(255,255,255,.16); border-radius:14px; padding:22px; text-align:center; display:none; z-index:30; max-height:76%; overflow:auto; }
.panel.show { display:block; }
.panel .k { font-size:10.5px; letter-spacing:.22em; color:#9db4c4; text-transform:uppercase; margin-bottom:10px; }
.panel .row { display:flex; gap:10px; justify-content:center; margin-top:16px; flex-wrap:wrap; }
.panel .row button { border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.06); color:#dfe8f0; border-radius:8px; padding:12px 16px; font-size:12px; letter-spacing:.07em; cursor:pointer; text-transform:uppercase; }
.panel .row .main { border-color:#57c2a8; background:rgba(87,194,168,.14); color:#c9f2e7; }
.note { background:#f2ecda; color:#2c2a24; border-radius:6px; padding:16px 18px; font-size:16.5px; line-height:1.7; text-align:left; box-shadow:0 4px 14px rgba(0,0,0,.4); font-family:Georgia,serif; }
.note .syll { color:#8a5a10; }
.note h4 { font-size:12px; letter-spacing:.14em; color:#6d5a2e; margin:0 0 8px; }
.codeTxt { font-family:Consolas,monospace; font-size:46px; letter-spacing:.16em; color:#ffe9bd; margin:8px 0 4px; }
.codeTxt .sy2 { color:#8fd8ff; } .codeTxt .sy3 { color:#a5f0b8; }
.codeTxt .dotsep { color:#57c2a8; padding:0 8px; }
.triPhrase { font-size:23px; color:#f2f6f9; margin:14px 0 4px; font-weight:600; line-height:1.5; }
.triPhrase u { text-decoration:none; border-bottom:3px solid #ffd479; }
.triBtns { display:flex; gap:14px; justify-content:center; margin-top:14px; flex-wrap:wrap; }
.triBtns button { font-size:20px; padding:13px 26px; border-radius:10px; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.07); color:#eaf2f8; cursor:pointer; font-weight:700; }
.triBtns button.ok { border-color:#57d08a; background:rgba(87,208,138,.18); }
.triBtns button.ko { border-color:#ff8d75; background:rgba(255,109,82,.15); }
.triProg { font-size:10.5px; letter-spacing:.18em; color:#9db4c4; margin-top:12px; }
.mcqQ { font-size:18px; color:#f2f6f9; font-weight:600; margin-top:14px; line-height:1.5; }
.mcqOpts { display:flex; flex-direction:column; gap:9px; margin-top:14px; }
.mcqOpts button { font-size:15.5px; padding:13px 16px; border-radius:9px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.06); color:#eaf2f8; cursor:pointer; text-align:left; line-height:1.4; }
.mcqOpts button.ok { border-color:#57d08a; background:rgba(87,208,138,.18); }
.mcqOpts button.ko { border-color:#ff8d75; background:rgba(255,109,82,.15); }
.ordPicked { min-height:40px; display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.ordPicked div { background:rgba(87,194,168,.12); border:1px solid #3a6a60; color:#d8f5ec; border-radius:7px; padding:9px 12px; font-size:14.5px; text-align:left; }
.ordPicked div b { color:#7fe0c8; margin-right:8px; }
.ordPool { display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-top:14px; }
.ordPool button { font-size:14.5px; padding:11px 14px; border-radius:8px; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.07); color:#eaf2f8; cursor:pointer; }
.ordPool button:disabled { opacity:.25; cursor:default; }
#typeIn { width:100%; font-size:19px; padding:12px 14px; border-radius:8px; border:1px solid #3a4a58; background:#101b27; color:#eaf2f8; margin-top:12px; text-align:center; }
#typeDiff { margin-top:10px; font-size:17px; min-height:22px; letter-spacing:.03em; color:#dfe8f0; }
#typeDiff b { color:#8fe0ae; } #typeDiff s { color:#ff9a86; text-decoration:none; border-bottom:2px solid #ff9a86; }
.evals { display:flex; gap:12px; justify-content:center; margin-top:12px; }
.evals button { width:52px; height:44px; border-radius:8px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.05); cursor:pointer; color:#dfe8f0; font-size:18px; }
.evals button.sel { border-color:#57c2a8; background:rgba(87,194,168,.15); }
.dbBig { font-size:17px; color:#bdf0d2; letter-spacing:.05em; font-weight:600; }
.dbNx { font-size:12.5px; color:#c2cfd9; line-height:1.6; margin-top:6px; }
.dbNx b { color:#ffd479; }
#reacBody { color:#eaf2f8; font-size:17px; line-height:1.6; }

/* espace adulte */
#adult { position:absolute; inset:0; z-index:70; background:rgba(7,16,24,.97); display:none; padding:22px; overflow:auto; color:#dfe8f0; }
#adult.show { display:block; }
#adult h2 { font-size:13px; letter-spacing:.2em; color:#9fdcff; margin:16px 0 8px; }
#adult h2:first-child { margin-top:0; }
#adult .adMeta { font-size:12.5px; color:#c9d6e0; }
#adult .adMeta select { background:#14242f; color:#dfe8f0; border:1px solid #3a4a58; border-radius:5px; padding:4px 8px; font-size:12px; }
#adult table { width:100%; border-collapse:collapse; font-size:12px; margin:4px 0 10px; }
#adult th,#adult td { border:1px solid #2a3a47; padding:6px 8px; text-align:left; color:#c9d6e0; }
#adult th { background:#14242f; font-weight:600; letter-spacing:.05em; }
#adult td.frag { color:#ffb9a3; font-weight:600; }
#adult .obsRow { display:flex; gap:8px; margin:4px 0 8px; }
#adult .obsRow input { flex:1; font-size:13px; padding:9px 12px; border-radius:7px; border:1px solid #3a4a58; background:#101b27; color:#eaf2f8; }
#adult .obsRow button { border:1px solid #3a4a58; background:#14242f; color:#dfe8f0; border-radius:7px; padding:9px 14px; cursor:pointer; }
#obsList { font-size:12px; color:#aebfcc; line-height:1.8; }
#adult .abtns { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
#adult .abtns button, #adult .abtns label { border:1px solid #3a4a58; background:#14242f; color:#dfe8f0; border-radius:7px; padding:10px 14px; font-size:12px; cursor:pointer; }
#adult .abtns label input { display:none; }
#adult .warn { color:#ffb9a3; font-size:11.5px; margin-top:10px; line-height:1.6; }

/* écrans étroits */
@media (max-width:640px){
  .brief .kara { font-size:15px; }
  .aid { padding:8px 9px; font-size:9.5px; }
  .panel { padding:14px; }
  .triPhrase { font-size:19px; }
  .codeTxt { font-size:34px; }
  .go { padding:13px 16px; font-size:12.5px; }
  .homeCard .v { font-size:12px; }
}

/* ═════════════════ V2.1 — ajouts communs ═════════════════ */
#sndWarn { display:none; align-items:center; gap:10px; z-index:45; } /* sous le menu (z 50) : ne masque jamais ≡ */
#sndWarn button { margin-left:auto; border:1px solid rgba(255,255,255,.4); background:none; color:#ffe4e4; border-radius:5px; padding:2px 9px; cursor:pointer; font-size:12px; }
#typeEye { border-color:rgba(255,212,121,.4); color:#ffd479; }
.adMWrap { display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 10px; }
.adMWrap .adM { border:1px solid #57c2a8; background:rgba(87,194,168,.10); color:#d8f5ec; border-radius:8px; padding:10px 13px; font-size:12.5px; cursor:pointer; }
#sndHelp .s b { color:#ffd479; }
/* cible « armée » (toucher-toucher) : les zones deviennent visibles et pulsent légèrement */
.scene.armed .dropzone { fill:rgba(255,212,121,.14); stroke:#ffd479; stroke-width:2; stroke-dasharray:6 5; }
@media (pointer:coarse){
  .aid { min-height:44px; }
  .panel .row button, .triBtns button, .mcqOpts button, .ordPool button { min-height:46px; }
  #menu button { padding:13px 12px; }
  .evals button { width:60px; height:52px; }
}

/* ═════════════════ V2.1 — VRAIE MISE EN PAGE MOBILE ═════════════════
   body.m = petit écran / portrait. La page devient une COLONNE qui défile :
   [bandeau] [notification éventuelle] [consigne] [scène entière] [panneau] [retour] [étapes]
   La scène montre TOUT le panorama (meet), les textes SVG sont retirés,
   les zones tactiles sont gonflées côté moteur, la saisie se fait aussi
   par « toucher le jeton puis toucher la cible ». */
body.m { display:block; background:#0b2740; }
body.m #app { width:100vw; height:auto; min-height:100dvh; display:flex; flex-direction:column; overflow:visible; border-radius:0; }
body.m .hd { position:static; order:1; background:#0e3050; padding:10px 12px; }
body.m .hd .sig { color:#eaf2f8; text-shadow:none; }
body.m .hd .sub { color:#a5c3d4; text-shadow:none; }
body.m .hd .live { display:none; }
body.m .menuBtn { background:rgba(255,255,255,.14); color:#eaf2f8; border-color:rgba(255,255,255,.3); padding:8px 14px; font-size:16px; }
body.m #menu { top:56px; right:8px; left:8px; min-width:0; }
body.m #sndWarn, body.m #updBar, body.m #offBadge { position:static; order:2; transform:none; width:auto; margin:0; border-radius:0; }
body.m #offBadge { order:8; }
body.m .mUI { display:none; }
body.m .mUI.show { display:contents; }
body.m .brief { position:static; order:3; transform:none; width:auto; margin:8px 8px 0; flex-wrap:wrap; padding:11px 12px; }
body.m .brief .kara { flex:1 1 100%; font-size:16px; margin-bottom:6px; }
body.m .brief .aid { flex:1 1 auto; text-align:center; }
body.m .scene { position:relative; order:4; inset:auto; width:100%; aspect-ratio:1000/562; background:linear-gradient(#7db8dd,#bcd9e8); margin-top:8px; }
body.m .scene svg text { display:none; }           /* plus aucun libellé qui se chevauche */
body.m #token { width:84px; height:84px; }
body.m #tokArt, body.m #tokArt svg { width:84px; height:84px; }
body.m .tok .lbl { top:86px; font-size:10px; }
body.m .panel { position:static; order:5; transform:none; width:auto; max-height:none; margin:10px 8px 0; }
body.m .panel.show { display:block; }
body.m .fb { position:static; order:6; transform:none; width:auto; margin:8px 12px 0; min-height:20px; }
body.m .steps { position:static; order:7; transform:none; justify-content:center; margin:10px 0 14px; }
body.m .homeUI { position:static; order:5; background:none; flex-direction:column; align-items:stretch; gap:12px; padding:12px; }
body.m .homeCard .v { max-width:none; font-size:14px; }
body.m .go { margin-left:0; justify-content:center; padding:18px; font-size:16px; }
body.m .ov { position:fixed; }
body.m #adult { position:fixed; }
body.m .note { font-size:15.5px; }
body.m .codeTxt { font-size:38px; letter-spacing:.12em; }
body.m .triPhrase { font-size:20px; }
body.m .triBtns button { flex:1 1 40%; }
body.m .mcqOpts button { font-size:16px; }
body.m #typeIn { font-size:17px; }
body.m .panel .row { gap:8px; }
body.m .panel .row button { flex:1 1 45%; }


/* V2.1.1 — dictées : surlignage du mot à corriger */
.wdLine{font-size:19px;line-height:1.6;color:#e8f1f6}
.wdKo{color:#ff9b8a;font-weight:700;text-decoration:underline wavy #ff9b8a 2px;padding:0 2px}
.wdMiss{color:#ffd479;font-weight:700;letter-spacing:2px}
.wdHint{margin-top:7px;color:#a5c3d4;font-size:15px}
.wdFix{margin-top:5px;color:#7fe0a0;font-size:21px;font-weight:800}