/* ═══════════════════════════════════════════════════════════════════════════
   MODE D'EMPLOI « STYLE SEUL » (mise en commun du 25/10/2026) — habiller une page classique en 5 minutes
   Gabarit complet, pièges et outils de test : admin/_dev_modernisation/GABARIT_HABILLAGE.md
   1. <head>, APRÈS themes.css : <link rel="stylesheet" href="/css/arena.css?v=2">
        <link rel="stylesheet" href="/css/express-mages.css?v=3"> <script src="/js/express-mages.js?v=2"></script>
   2. <body class="fv-arena xm xm-classique" data-allow-theme data-no-jus> + <div class="arena-vignette"></div>
      → « xm-classique » allume TOUT le bloc commun de la fin de ce fichier (rien ne change sans elle).
   3. En-tête .fv-header (.left 🏠 / .center titre / .right menu ⚔️ + bouton Aide éventuel : restent sur une ligne).
   4. .wrap > .card (LA carte d'or ; les .card internes d'un jeu — cartes à trier… — ne sont plus touchées)
        .xm-heros (img.guide-portrait + h1 + .bulle consigne)
        .xm-bandeau > .xm-score (#score) · .xm-prog (Question n/10) · .xm-record (#xmRecord + #score-max hidden)
        .question (tablette)  ·  .input-row > input  (deux cases h/min : les grouper dans <span class="xm-duo">)
        .feedback  ·  explication après erreur : .ysa (parchemin + portrait en CSS, sur un bloc existant)
                      ou .xm-expl rempli par XM.expliquer()  ·  bouton Continuer : button.primary.btn-cont
        sceau de fin : <div id="xmFin" hidden></div> rempli par XM.sceauFin(…)
   5. Petits plus : .pw (puissance insécable), .xm-parchemin (table d'aide sur parchemin), toasts du site en or,
      gemmes de jus-jeu en or, pastille « nouveau » posée sur 🏠, pavé tactile masqué pendant l'explication.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
   css/express-mages.css — « L'Arène des Mages » : habillage commun des jeux Express
   (maquette validée le 25/10/2026 : admin/_dev_express/, direction « nuit-or »).
   Même langage que l'Horlogerie des Mages (css/exo-mages.css) : or chaud, Georgia,
   Maître Ysaline, bulles de parchemin. À charger APRÈS css/themes.css et css/arena.css,
   avec js/express-mages.js, sur <body class="fv-arena xm" data-allow-theme data-no-jus>.

   Look par défaut = carte sombre de l'arène + or chaud du parchemin (variables de :root).
   HABILLAGES : html[data-xm-dir="…"] ne fait que surcharger les variables (et quelques
   règles fines) ; un seul est livré, « parchemin », non utilisé pour l'instant (XM.habillage()).
   La voix de la guide (explications, conseils de fin) est TOUJOURS sur parchemin clair.

   Classes reprises du gabarit Express : .card .question .qindex .qcat .qtext .qprompt
   #answer .feedback .end-screen .end-score .end-detail ; nouvelles : .xm-heros .xm-bandeau
   .xm-gemmes .xm-sablier .xm-expl .xm-verdict .xm-pourquoi .xm-astuce .xm-sceau .xm-bilan .xm-recap.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --or:#d9a521; --or-clair:#ffcc3d; --or-fonce:#9a6a12;
  --carte:linear-gradient(170deg,rgba(30,22,40,.96),rgba(16,11,22,.97));
  --carte-solide:#17111f;
  --encre:#f6ecd6; --encre-douce:#cdbb98; --titre:#ffd970;
  --tablette:linear-gradient(180deg,#0d0a13,#151020); --tablette-bord:rgba(217,165,33,.75);
  --chiffre:#fff3d6; --chiffre-lueur:0 0 18px rgba(255,200,90,.35);
  --chip:rgba(255,204,61,.10); --chip-bord:rgba(255,204,61,.5);
  --ok:#5fd38a; --ko:#ff9a8a; --saisie:#0b0810; --saisie-texte:#fff3d6;
  --gemme-vide:rgba(255,255,255,.08); --gemme-bord:rgba(255,204,61,.6);
  --gemme-ok:linear-gradient(135deg,#ffd84a,#c98e0c);
  --bouton:linear-gradient(180deg,#ffd447,#d39a14); --bouton-ombre:#7a5a1c;
  --sablier:linear-gradient(90deg,#c98e0c,#ffd447); --sablier-fond:rgba(0,0,0,.25);
  --halo-carte:rgba(217,165,33,.18);
  /* fractions et parts coloriées (pizzas…) des jeux Express */
  --part:#e0a417; --part-trait:#1a1220; --part-vide:rgba(255,255,255,.06); --plat:rgba(0,0,0,.35);
}
/* Habillage « parchemin » (disponible, non utilisé) : carte claire sur ciel étoilé */
html[data-xm-dir="parchemin"]{
  --or:#c9a14a; --or-clair:#ffd76a; --or-fonce:#8a6510;
  --carte:linear-gradient(180deg,#fbf3dc,#f1e2b9); --carte-solide:#fbf3dc;
  --encre:#3b2708; --encre-douce:#7a5f32; --titre:#5a3a0c;
  --tablette:#fffdf5; --tablette-bord:#d9b96b;
  --chiffre:#3b2708; --chiffre-lueur:none;
  --chip:#fffaf0; --chip-bord:#d9b96b;
  --ok:#1f7a3a; --ko:#a11d1d; --saisie:#fffdf5; --saisie-texte:#3b2708;
  --gemme-vide:#efe0b8; --gemme-bord:#b0832a; --gemme-ok:linear-gradient(135deg,#ffe58a,#d4a017);
  --bouton:linear-gradient(180deg,#e8c66a,#b8892c); --sablier:linear-gradient(90deg,#d4a017,#ffe58a); --sablier-fond:#efe0b8;
  --halo-carte:rgba(201,161,74,.16);
  --part:#d4a017; --part-trait:#7a5a1c; --part-vide:#fff6dc; --plat:#f1e2b9;
}
html[data-xm-dir="parchemin"] body.xm.fv-arena:not([class*="theme-"]){ background:radial-gradient(ellipse at 50% 0%,#2b2350 0%,#12102a 60%,#07060f 100%) fixed; }
html[data-xm-dir="parchemin"] body.xm.fv-arena::after,
html[data-xm-dir="parchemin"] body.xm .arena-vignette{ display:none; }
html[data-xm-dir="parchemin"] .xm .question{ box-shadow:inset 0 2px 6px rgba(120,80,20,.1); }
html[data-xm-dir="parchemin"] .xm .qcat{ color:#8a5a0c; background:#fff6dc; }
html[data-xm-dir="parchemin"] .xm-sablier-txt b, html[data-xm-dir="parchemin"] .xm .target-unit{ color:#8a5a0c; }
html[data-xm-dir="parchemin"] .xm .end-cell.ok{ background:#e9f7ec; border-color:#9fd4ad; }
html[data-xm-dir="parchemin"] .xm .end-cell.ko{ background:#fdeaea; border-color:#e6a5a5; }

body.xm{ margin:0; min-height:100vh; padding:70px 0 0; box-sizing:border-box; color:var(--encre);
  font-family:"Segoe UI",system-ui,Arial,sans-serif; }
body.xm *{ box-sizing:border-box; }
body.xm [hidden]{ display:none !important; }

/* ── en-tête : UNE ligne partout, les liens de l'arène rangés dans un menu ── */
.xm .fv-header{ position:fixed; top:0; left:0; width:100%; z-index:1000; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px;
  padding:9px 16px; background:linear-gradient(135deg,#1a1a2e,#16213e); color:#fff; box-shadow:0 2px 10px rgba(0,0,0,.35); border-bottom:2px solid var(--or); }
.xm .fv-header .left{ justify-self:start; } .xm .fv-header .right{ justify-self:end; }
.xm .fv-header .center{ font-family:Georgia,"Times New Roman",serif; font-weight:700; font-size:1.05em; color:#ffe9b0; letter-spacing:.02em; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.xm .btn-nav{ display:inline-block; padding:6px 13px; border-radius:8px; border:1px solid rgba(255,233,176,.4); background:rgba(255,255,255,.1); color:#fff;
  font:inherit; font-size:.9em; text-decoration:none; white-space:nowrap; cursor:pointer; list-style:none; }
.xm .btn-nav::-webkit-details-marker{ display:none; }
.xm .btn-nav:hover{ background:rgba(255,255,255,.2); }
.xm-menu{ position:relative; }
.xm-menu nav{ position:absolute; right:0; top:calc(100% + 8px); display:grid; gap:6px; min-width:150px; padding:8px; border-radius:12px;
  background:#16213e; border:1px solid var(--or); box-shadow:0 12px 30px rgba(0,0,0,.5); }
.xm-menu nav a{ color:#fff; text-decoration:none; padding:7px 10px; border-radius:8px; white-space:nowrap; }
.xm-menu nav a:hover{ background:rgba(255,255,255,.1); }
@media (max-width:640px){
  body.xm{ padding-top:58px; }
  .xm .fv-header{ padding:8px 10px; gap:8px; }
  .xm .fv-header .center{ font-size:.92em; }
  .xm .btn-nav{ padding:6px 10px; font-size:.84em; }
  .xm .btn-nav .txt{ display:none; }
}

/* ── la carte ── */
.xm .wrap{ position:relative; z-index:2; max-width:640px; margin:0 auto; padding:18px 14px 50px; }
.xm .card:not(:where(.xm-classique .card:not(.wrap > .card, main > .card, .xm-carte))){ position:relative; padding:18px 20px 22px; border-radius:20px; background:var(--carte); color:var(--encre);
  border:2px solid var(--or); box-shadow:0 0 0 5px var(--halo-carte), 0 20px 50px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,217,112,.15); }
.xm .card:not(:where(.xm-classique .card:not(.wrap > .card, main > .card, .xm-carte)))::before, .xm .card:not(:where(.xm-classique .card:not(.wrap > .card, main > .card, .xm-carte)))::after{ content:"✦"; position:absolute; top:7px; color:var(--or); font-size:16px; opacity:.85; }
.xm .card:not(:where(.xm-classique .card:not(.wrap > .card, main > .card, .xm-carte)))::before{ left:11px; } .xm .card:not(:where(.xm-classique .card:not(.wrap > .card, main > .card, .xm-carte)))::after{ right:11px; }

/* la guide et le titre */
.xm-heros{ display:flex; align-items:center; gap:12px; margin:0 0 12px; }
.xm .guide-portrait{ flex:none; width:64px; height:64px; border-radius:50%; object-fit:cover; background:#f5d98a;
  border:3px solid var(--or); box-shadow:0 0 0 3px rgba(251,243,220,.85), 0 6px 14px rgba(0,0,0,.35); }
.xm-heros h1{ margin:0 0 6px; font-family:Georgia,"Times New Roman",serif; font-size:1.45em; line-height:1.1; color:var(--titre); letter-spacing:.02em; }
.xm .bulle{ position:relative; background:#fffaf0; border:2px solid #b0832a; border-radius:13px; padding:8px 12px; color:#3b2708;
  font-weight:600; font-size:.9em; line-height:1.42; box-shadow:3px 3px 0 #b0832a; }
.xm .bulle b{ color:#8b1d1d; }
.xm .bulle::before{ content:""; position:absolute; left:-11px; top:14px; border:9px solid transparent; border-right-color:#b0832a; border-left:0; }

/* ── le bandeau : score · gemmes · record ── */
.xm-bandeau{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:8px 12px; margin:0 0 8px;
  border-radius:14px; background:var(--chip); border:1.5px solid var(--chip-bord); }
.xm-bandeau .lbl{ display:block; font-size:.68em; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--encre-douce); }
.xm-score strong, .xm-record strong{ font-family:Georgia,serif; font-size:1.45em; font-weight:900; color:var(--titre); font-variant-numeric:tabular-nums lining-nums; }
.xm-record{ text-align:right; } .xm-record strong{ font-size:1.05em; }
.xm-gemmes{ display:flex; justify-content:center; gap:6px; flex-wrap:wrap; }
.xm-gemmes i{ width:15px; height:15px; transform:rotate(45deg); border-radius:3px; border:2px solid var(--gemme-bord); background:var(--gemme-vide); transition:all .3s; }
.xm-gemmes i.cours{ border-color:var(--or-clair); box-shadow:0 0 0 3px rgba(255,215,106,.25); }
.xm-gemmes i.ok{ background:var(--gemme-ok); border-color:var(--or-fonce); box-shadow:0 0 9px rgba(245,200,66,.6); animation:xmPop .4s; }
.xm-gemmes i.rate{ background:linear-gradient(135deg,#d77a6e,#9b3328); border-color:#6e1d14; animation:xmPop .4s; }
@keyframes xmPop{ 50%{ transform:rotate(45deg) scale(1.4); } }
.xm-serie{ display:inline-block; margin-left:6px; padding:2px 9px; border-radius:999px; font-size:.78em; font-weight:800; vertical-align:middle;
  background:linear-gradient(90deg,#fde047,#fb923c); color:#5a1e05; box-shadow:0 0 12px rgba(251,146,60,.5); transform:scale(0); transition:transform .3s cubic-bezier(.3,1.6,.5,1); }
.xm-serie.on{ transform:scale(1); }

/* ── le sablier : un bonus, jamais une alarme ── */
.xm-sablier{ display:flex; align-items:center; gap:10px; margin:0 0 12px; }
.xm .timer-bar{ flex:1; height:8px; border-radius:999px; overflow:hidden; background:var(--sablier-fond); border:1px solid var(--chip-bord); }
.xm .timer-fill{ height:100%; width:100%; background:var(--sablier); transition:width .12s linear; }
.xm .timer-fill.urgent{ animation:none; }
.xm-sablier-txt{ flex:none; min-width:9.5em; text-align:right; font-size:.86em; font-weight:800; color:var(--encre-douce); font-variant-numeric:tabular-nums; }
.xm-sablier-txt b{ color:var(--or-clair); }
.xm-sablier.vide .timer-bar{ opacity:.35; }
.xm-sablier.vide .xm-sablier-txt{ color:var(--encre); }

/* ── la question, gravée sur une tablette ── */
.xm .question{ position:relative; text-align:center; padding:16px 12px 20px; margin:0 0 14px; border-radius:16px; background:var(--tablette);
  border:2px solid var(--tablette-bord); box-shadow:inset 0 2px 10px rgba(0,0,0,.35); }
.xm .qindex{ font-size:.74em; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--encre-douce); margin-bottom:8px; }
.xm .qcat{ display:inline-block; margin-bottom:10px; padding:3px 12px; border-radius:999px; font-size:.74em; font-weight:800; letter-spacing:.06em;
  color:var(--or-clair); border:1px solid var(--chip-bord); background:rgba(255,215,106,.08); }
.xm .qcat::before{ content:"✦ "; } .xm .qcat::after{ content:" ✦"; }
.xm .qtext{ font-family:Georgia,"Times New Roman",serif; font-size:clamp(1.6em,7.4vw,2.6em); font-weight:800; line-height:1.2; color:var(--chiffre);
  text-shadow:var(--chiffre-lueur); font-variant-numeric:tabular-nums lining-nums; overflow-wrap:anywhere; }
.xm .qtext.long{ font-size:clamp(1.25em,5.2vw,1.75em); }
.xm .qtext sup{ font-size:.6em; line-height:0; }
.xm .qprompt{ font-family:Georgia,"Times New Roman",serif; font-size:1.2em; font-weight:700; color:var(--chiffre); }
.xm .question.tremble{ animation:xmKo .3s ease 2; }
@keyframes xmKo{ 25%{ transform:translateX(-6px); } 75%{ transform:translateX(6px); } }

/* ── saisie ── */
.xm .input-row{ display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap; margin-bottom:4px; }
.xm #answer, .xm .frac-input input{ width:220px; max-width:100%; padding:11px 14px; font:inherit; font-size:1.6em; font-weight:800; text-align:center; outline:none;
  color:var(--saisie-texte); background:var(--saisie); border:2px solid var(--or); border-radius:14px; font-variant-numeric:tabular-nums;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.25); transition:border-color .15s, background .15s; }
.xm #answer::placeholder, .xm .frac-input input::placeholder{ color:var(--encre-douce); opacity:.6; font-weight:600; }
.xm #answer:focus, .xm .frac-input input:focus{ border-color:var(--or-clair); box-shadow:0 0 0 4px rgba(255,215,106,.18); }
.xm #answer.correct, .xm .frac-input input.correct{ border-color:var(--ok); color:var(--ok); }
.xm #answer.wrong, .xm .frac-input input.wrong{ border-color:var(--ko); color:var(--ko); }
.xm .target-unit{ font-family:Georgia,serif; font-size:1.3em; font-weight:800; color:var(--or-clair); }
.xm .target-unit:empty{ display:none; }
.xm button.primary, .xm .btn{ font:inherit; font-size:1.05em; font-weight:800; padding:12px 26px; border:none; border-radius:14px; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; gap:6px; justify-content:center;
  background:var(--bouton); color:#2b1b08; box-shadow:0 5px 0 var(--bouton-ombre); transition:transform .1s, box-shadow .1s, filter .12s; }
.xm button.primary:hover, .xm .btn:hover{ filter:brightness(1.06); }
.xm button.primary:active, .xm .btn:active{ transform:translateY(3px); box-shadow:0 2px 0 var(--bouton-ombre); }
.xm button.primary:disabled{ opacity:.5; cursor:not-allowed; }
.xm .btn.clair{ background:transparent; color:var(--encre); border:2px solid var(--or); box-shadow:none; }
.xm .feedback{ min-height:1.5em; margin-top:8px; text-align:center; font-size:1.1em; font-weight:800; }
.xm .feedback.ok{ color:var(--ok); } .xm .feedback.ko{ color:var(--ko); }

/* pavé tactile (js/pave-reponse.js) : touches de parchemin */
.xm .pave-rep button{ background:linear-gradient(180deg,#fffaf0,#f3e3bd); border:1.5px solid #c9a14a; box-shadow:0 4px 0 #a07a2c; color:#3b2708; }
.xm .pave-rep button:active:not(:disabled){ box-shadow:0 1px 0 #a07a2c; }
.xm .pave-rep .p-eff{ background:linear-gradient(180deg,#c0392b,#8b1d1d); border-color:#7b1d14; box-shadow:0 4px 0 #5c140e; color:#fff; }
.xm .pave-rep .p-ok{ background:var(--bouton); border-color:#7a5a1c; box-shadow:0 4px 0 #7a5a1c; color:#2b1b08; }
/* touche « − » : fond bleu (sinon texte blanc forcé par pave-reponse.js sur parchemin clair = invisible, 11/11/2026) */
.xm .pave-rep .p-moins{ background:linear-gradient(180deg,#3b82f6,#1d4ed8); border-color:#1e40af; box-shadow:0 4px 0 #1e3a8a; color:#fff; }

/* ── après une erreur : la guide explique, on avance quand on veut ── */
.xm-expl{ display:flex; gap:10px; align-items:flex-start; margin:12px 0 4px; text-align:left; animation:xmEntre .35s ease; }
.xm-expl .guide-portrait{ width:52px; height:52px; margin-top:2px; }
.xm-expl .bulle{ flex:1; min-width:0; font-weight:500; font-size:.98em; }
.xm-verdict{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-bottom:6px; font-weight:700; }
.xm-verdict s{ color:#a11d1d; text-decoration-thickness:2px; }
.xm-verdict .bonne b{ color:#1f7a3a; font-size:1.15em; }
.xm-pourquoi{ font-family:Georgia,serif; font-size:1.05em; line-height:1.55; }
.xm-pourquoi b{ color:#1f7a3a !important; }
.xm-pourquoi sup, .xm-verdict sup, .xm .end-cell sup{ font-size:.7em; line-height:0; }
.xm-astuce{ margin-top:7px; padding:6px 10px; border-radius:10px; background:#fff1c9; border:1px dashed #c9a14a; font-weight:600; }
.xm #xmContinuer, .xm #btnContFv{ display:flex; margin:12px auto 0; }
@keyframes xmEntre{ from{ opacity:0; transform:translateY(8px); } }

/* ── étincelles et gain qui s'envole ── */
.xm-etincelle{ position:fixed; z-index:2000; pointer-events:none; font-size:20px; animation:xmVol 1s ease-out forwards; }
@keyframes xmVol{ to{ transform:translate(var(--dx),var(--dy)) scale(.4) rotate(var(--r)); opacity:0; } }
.xm-gain{ position:fixed; z-index:2001; pointer-events:none; font-family:Georgia,serif; font-size:28px; font-weight:900; color:#ffe58a;
  text-shadow:0 2px 0 #7a5a1c, 0 0 18px rgba(255,200,80,.7); animation:xmMonte 1s ease-out forwards; }
@keyframes xmMonte{ from{ transform:translate(-50%,0) scale(.7); opacity:0; } 20%{ transform:translate(-50%,-10px) scale(1.15); opacity:1; } to{ transform:translate(-50%,-70px) scale(1); opacity:0; } }
.xm-rebond{ animation:xmRebond .4s ease; } @keyframes xmRebond{ 40%{ transform:scale(1.18); } }

/* ── fin de partie : le sceau ── */
.xm .end-screen{ display:none; text-align:center; animation:xmEntre .4s ease; }
.xm .end-screen.show{ display:block; }
.xm-sceau{ width:150px; height:150px; margin:4px auto 10px; border-radius:50%; display:grid; place-items:center; position:relative;
  background:radial-gradient(circle at 35% 30%,#ffe9a0,#d4a017 55%,#8a6510 100%); box-shadow:0 0 0 6px rgba(201,161,74,.25), 0 0 40px rgba(255,190,70,.45), inset 0 -6px 12px rgba(0,0,0,.25); }
.xm-sceau::before{ content:""; position:absolute; inset:9px; border-radius:50%; border:2px dashed rgba(90,58,12,.55); }
.xm-sceau .end-score{ font-family:Georgia,serif; font-size:2.6em; font-weight:900; color:#3b2408; line-height:1; font-variant-numeric:tabular-nums lining-nums; text-shadow:0 1px 0 rgba(255,240,190,.7); }
.xm-sceau .u{ display:block; font-size:1.3em; margin-top:2px; }
.xm .end-title{ font-family:Georgia,serif; font-size:1.55em; font-weight:800; color:var(--titre); margin:4px 0 8px; }
.xm-bilan{ display:flex; flex-wrap:wrap; justify-content:center; gap:7px; margin:0 0 12px; }
.xm-bilan span{ padding:5px 12px; border-radius:999px; font-size:.88em; font-weight:800; background:var(--chip); border:1.5px solid var(--chip-bord); color:var(--encre); }
.xm-bilan span.record{ background:linear-gradient(90deg,#fde047,#f59e0b); border-color:#b45309; color:#451a03; }
.xm .end-screen .xm-expl{ justify-content:center; align-items:center; max-width:540px; margin:0 auto 12px; }
.xm-recap{ text-align:left; margin:8px 0 14px; border-radius:14px; border:1.5px solid var(--chip-bord); background:var(--chip); }
.xm-recap summary{ cursor:pointer; padding:9px 14px; font-weight:800; color:var(--titre); font-family:Georgia,serif; }
.xm .end-detail{ list-style:none; margin:0; padding:0 10px 10px; display:grid; gap:5px; }
.xm .end-cell{ display:grid; grid-template-columns:22px 1fr auto; gap:8px; align-items:center; padding:7px 10px; border-radius:10px; font-size:.9em; font-variant-numeric:tabular-nums; }
.xm .end-cell .q{ font-weight:600; min-width:0; overflow-wrap:anywhere; } .xm .end-cell .c{ display:block; font-size:.78em; opacity:.75; font-weight:700; letter-spacing:.03em; }
.xm .end-cell .q span[style]{ font-size:1em !important; opacity:1 !important; }
.xm .end-cell .r{ text-align:right; font-weight:800; white-space:nowrap; }
.xm .end-cell.ok{ background:rgba(95,211,138,.12); border:1px solid rgba(95,211,138,.4); }
.xm .end-cell.ko{ background:rgba(255,154,138,.12); border:1px solid rgba(255,154,138,.45); }
.xm .end-cell.ok .r{ color:var(--ok); } .xm .end-cell.ko .r{ color:var(--ko); }
.xm .end-cell s{ opacity:.8; margin-right:4px; }
.xm .end-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.xm.fini .xm-sablier{ display:none; }
/* pendant l'explication, le pavé (grisé) s'efface : la bulle de la guide remonte à l'écran */
.xm.attente .pave-rep{ display:none !important; }

/* ═══ THÈMES (data-allow-theme) — garde-fous .wrap ET .fv-header ═══
   themes.css pose un panneau (#fff ou #0e1424) sur « body > .wrap » : ici la carte EST la surface,
   le .wrap redevient transparent mais passe au-dessus du décor du thème (z-index).
   (Le décor de l'arène s'efface de lui-même sous un thème : css/arena.css.) */
body.xm.xm[data-allow-theme][class*="theme-"] > .wrap{ background:transparent !important; border:0 !important; box-shadow:none !important;
  padding:18px 14px 50px !important; color:var(--encre) !important; position:relative; z-index:2; }
body.xm[class*="theme-"] .fv-header, body.xm[class*="theme-"] .fv-header *{ color:#fff !important; -webkit-text-fill-color:#fff !important; text-shadow:none !important; }
body.xm[class*="theme-"] .fv-header{ background:linear-gradient(135deg,#1a1a2e,#16213e) !important; }
body.xm[class*="theme-"] .fv-header .center{ color:#ffe9b0 !important; -webkit-text-fill-color:#ffe9b0 !important; }
body.xm[class*="theme-"] .card:not(:where(.xm-classique .card:not(.wrap > .card, main > .card, .xm-carte))){ background-color:var(--carte-solide); color:var(--encre) !important; }
body.xm[class*="theme-"] .bulle, body.xm[class*="theme-"] .bulle *{ -webkit-text-fill-color:currentColor; text-shadow:none !important; }

@media (max-width:640px){
  .xm .wrap{ padding:12px 8px 40px; }
  body.xm.xm[data-allow-theme][class*="theme-"] > .wrap{ padding:12px 8px 40px !important; }
  .xm .card:not(:where(.xm-classique .card:not(.wrap > .card, main > .card, .xm-carte))){ padding:14px 12px 18px; border-radius:16px; }
  .xm .guide-portrait{ width:46px; height:46px; }
  .xm-heros{ gap:9px; margin-bottom:10px; }
  .xm-heros h1{ font-size:1.15em; margin-bottom:4px; }
  .xm .bulle{ font-size:.82em; padding:6px 10px; }
  .xm-bandeau{ grid-template-columns:auto auto; padding:7px 10px; gap:6px 10px; }
  .xm-gemmes{ grid-column:1 / -1; order:3; gap:5px; }
  .xm-gemmes i{ width:13px; height:13px; }
  .xm-score strong{ font-size:1.25em; }
  .xm .question{ padding:12px 8px 14px; margin-bottom:10px; }
  .xm #answer{ width:100%; font-size:1.4em; padding:9px; }
  .xm .input-row{ flex-wrap:nowrap; }
  .xm-sablier-txt{ min-width:0; font-size:.78em; }
  .xm-expl .guide-portrait{ width:38px; height:38px; }
  .xm-sceau{ width:124px; height:124px; } .xm-sceau .end-score{ font-size:2.1em; }
  .xm .end-cell{ font-size:.84em; }
}
@media (prefers-reduced-motion:reduce){
  .xm *, .xm *::before{ animation:none !important; transition:none !important; }
  .xm-etincelle, .xm-gain{ display:none; }
}

/* (25/10/2026, après la phase 2) chiffres droits partout où Georgia dessinait un 0 comme un « o » ;
   mots clés des énoncés en phrase dans l'or clair */
.xm-expl .bulle, .xm .end-cell, .xm .feedback, .xm .xm-bilan, .xm .end-detail{ font-variant-numeric:lining-nums tabular-nums; }
.xm .qprompt b{ color:var(--or-clair); }


/* ═══════════════════════════════════════════════════════════════════════════
   BLOC COMMUN « STYLE SEUL » (mise en commun du 25/10/2026) — UNIQUEMENT sous <body class="… xm xm-classique">.
   Ces règles étaient recopiées dans chaque page habillée par les agents des lots 1 à 3 (les copies restent dans
   les pages déjà validées : aucune n'a xm-classique, rien ne change pour elles). Préfixe .xm:where(.xm-classique) :
   même spécificité qu'un « .xm .truc », donc le <style> propre à une page (chargé après) a toujours le dernier mot.
   ═══════════════════════════════════════════════════════════════════════════ */
/* le titre ne touche pas l'étoile du coin (390 px) ; « Aide » et le menu de l'Arène sur une ligne */
.xm:where(.xm-classique) .xm-heros{ text-align:left; }
.xm:where(.xm-classique) .xm-heros h1{ padding-right:14px; }
.xm:where(.xm-classique) .fv-header .right{ display:flex; align-items:center; gap:8px; }
/* la pastille « nouveau » de js/fv-news.js : posée sur le coin du bouton 🏠, elle ne cache plus l'icône (texte masqué sur téléphone) */
.xm:where(.xm-classique) .fv-header .btn-nav .fv-new-badge{ top:-8px; right:-9px; min-width:18px; height:18px; padding:0 4px; font-size:10px; border-width:1.5px; }
body.xm:where(.xm-classique)[class*="theme-"] .fv-header .btn-nav .fv-new-badge{ color:#1a0800 !important; -webkit-text-fill-color:#1a0800 !important; }

/* bandeau à 3 cases sans gemmes : Score · Question n/10 · Record */
.xm:where(.xm-classique) .xm-bandeau:where(:has(> .xm-prog)){ grid-template-columns:auto 1fr auto; }
.xm:where(.xm-classique) .xm-prog{ text-align:center; }
.xm:where(.xm-classique) .xm-prog strong{ font-family:Georgia,serif; font-size:1.15em; font-weight:900; color:var(--titre); font-variant-numeric:tabular-nums lining-nums; }

/* exposants et puissances */
.xm:where(.xm-classique) .pw{ white-space:nowrap; }   /* une puissance (base + exposant) ne se coupe jamais */
.xm:where(.xm-classique) .bulle sup, .xm:where(.xm-classique) .ysa sup, .xm:where(.xm-classique) .xm-expl sup{ font-size:.7em; line-height:0; }

/* les saisies : même case d'or partout ; deux cases liées (h / min…) dans <span class="xm-duo"> ne se séparent jamais */
.xm:where(.xm-classique) .input-row{ flex-wrap:wrap; margin-top:12px; margin-bottom:10px; }
.xm:where(.xm-classique) .input-row input{ width:130px; max-width:100%; padding:11px 12px; font:inherit; font-size:1.5em; font-weight:800; text-align:center; outline:none;
  color:var(--saisie-texte); background:var(--saisie); border:2px solid var(--or); border-radius:14px; font-variant-numeric:tabular-nums lining-nums;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.25); transition:border-color .15s, background .15s; }
.xm:where(.xm-classique) .input-row input::placeholder{ color:var(--encre-douce); opacity:.6; font-weight:600; }
.xm:where(.xm-classique) .input-row input:focus{ border-color:var(--or-clair); box-shadow:0 0 0 4px rgba(255,215,106,.18); }
.xm:where(.xm-classique) .input-row input.correct, .xm:where(.xm-classique) .input-row input.ok, .xm:where(.xm-classique) .input-row input.good{ border-color:var(--ok); color:var(--ok); }
.xm:where(.xm-classique) .input-row input.wrong, .xm:where(.xm-classique) .input-row input.ko, .xm:where(.xm-classique) .input-row input.bad{ border-color:var(--ko); color:var(--ko); }
.xm:where(.xm-classique) .xm-duo{ display:inline-flex; align-items:center; gap:6px; flex-wrap:nowrap; white-space:nowrap; }
.xm:where(.xm-classique) .xm-duo input{ width:96px; }
.xm:where(.xm-classique) .xm-unite{ font-family:Georgia,serif; font-size:1.25em; font-weight:800; color:var(--or-clair); }
.xm:where(.xm-classique) .feedback{ font-variant-numeric:lining-nums; }
.xm:where(.xm-classique) .feedback.attends, .xm:where(.xm-classique) #feedback.attends{ color:var(--encre); }   /* « Écris ta réponse, puis valide. » : ni vert ni rouge */

/* la voix de la guide posée sur une explication EXISTANTE : <div class="ysa">…</div> (portrait de Maître Ysaline en CSS) */
.xm:where(.xm-classique) .ysa{ position:relative; margin:12px auto 0; max-width:600px; padding:10px 12px 10px 68px; border-radius:13px; text-align:left;
  background:#fffaf0; color:#3b2708; border:2px solid #b0832a; box-shadow:3px 3px 0 #b0832a; font-weight:500; line-height:1.5; font-variant-numeric:lining-nums; }
.xm:where(.xm-classique) .ysa::before{ content:""; position:absolute; left:8px; top:9px; width:48px; height:48px; border-radius:50%;
  background:#f5d98a url(/icone/classes/mage_f.png) center/cover no-repeat; border:3px solid var(--or); box-shadow:0 0 0 2px rgba(251,243,220,.85); }
.xm:where(.xm-classique) .ysa b{ color:#8b1d1d; }
.xm:where(.xm-classique) .ysa .diag, .xm:where(.xm-classique) .ysa .astuce{ margin-top:7px; padding:6px 10px; border-radius:10px; background:#fff1c9; border:1px dashed #c9a14a; font-weight:600; text-align:left; }
.xm:where(.xm-classique) .ysa .ok, .xm:where(.xm-classique) .ysa .juste{ color:#1f7a3a; font-weight:800; }
.xm:where(.xm-classique) .ysa .ko, .xm:where(.xm-classique) .ysa .faux{ color:#a11d1d; font-weight:800; }
.xm:where(.xm-classique) .ysa.xm-entre{ animation:xmEntre .35s ease; }
/* bulle remplie par XM.expliquer() (.xm-expl) : texte à gauche, largeur de lecture */
.xm:where(.xm-classique) .xm-expl{ max-width:640px; margin-left:auto; margin-right:auto; }
.xm:where(.xm-classique) .xm-expl .bulle{ text-align:left; }
/* message d'erreur classique (js/erreurs-types.js) : même parchemin que la guide */
.xm:where(.xm-classique) .fv-erreur-type{ background:#fff1c9 !important; color:#5a3a0c !important; border:1px dashed #c9a14a !important; border-radius:10px !important; font-variant-numeric:lining-nums; }
.xm:where(.xm-classique) .xm-expl .fv-erreur-type, .xm:where(.xm-classique) .ysa .fv-erreur-type{ margin-top:8px !important; }

/* la table d'aide sur parchemin : <div class="xm-parchemin"><table>…</table></div> (lisible sous tous les thèmes) */
.xm:where(.xm-classique) .xm-parchemin{ margin:14px auto 0; max-width:100%; padding:12px 14px; border-radius:13px; text-align:center; overflow-x:auto;
  background:#fffaf0; color:#3b2708; border:2px solid #b0832a; box-shadow:3px 3px 0 #b0832a; font-family:Georgia,"Times New Roman",serif; line-height:1.6; }
.xm:where(.xm-classique) .xm-parchemin table{ margin:0 auto; border-collapse:collapse; font-variant-numeric:lining-nums tabular-nums; }
.xm:where(.xm-classique) .xm-parchemin th, .xm:where(.xm-classique) .xm-parchemin td{ padding:4px 9px; min-width:18px; text-align:center; border:1px solid #d9b96b; color:#3b2708; }
.xm:where(.xm-classique) .xm-parchemin th{ font-weight:800; background:#f6e3bb; }
.xm:where(.xm-classique) .xm-parchemin td{ font-weight:700; background:#fffdf5; }
.xm:where(.xm-classique) .xm-parchemin .hl{ background:#fde68a; box-shadow:inset 0 0 0 2px #c98e0c; }
.xm:where(.xm-classique) .xm-parchemin .lbl{ text-align:left; white-space:nowrap; font-family:"Segoe UI",system-ui,sans-serif; font-size:.85em; background:#fff1c9; }

/* le bouton « Continuer » centré, où qu'il soit (après la bulle de la guide, ou .btn-cont / .btn-continuer) */
.xm:where(.xm-classique) .xm-expl + button.primary, .xm:where(.xm-classique) .ysa + button.primary, .xm:where(.xm-classique) button.btn-cont, .xm:where(.xm-classique) button.btn-continuer, .xm:where(.xm-classique) #xmContinuer, .xm:where(.xm-classique) #btnContinuer, .xm:where(.xm-classique) #btnCont{ display:flex; margin:12px auto 0; }

/* pendant l'explication (et sur le sceau), le pavé tactile (inutile : cases verrouillées) s'efface : la bulle remonte à l'écran */
.xm:where(.xm-classique):has(.xm-expl:not([hidden], .end-screen .xm-expl, .xm-fin .xm-expl)) .pave-rep,
.xm:where(.xm-classique):has(.ysa.xm-attente:not([hidden])) .pave-rep,
.xm:where(.xm-classique):has(.end-screen.show) .pave-rep, .xm:where(.xm-classique):has(.xm-fin:not([hidden])) .pave-rep{ display:none !important; }
.xm:where(.xm-classique) .card:has(.end-screen.show) .xm-sablier, .xm:where(.xm-classique) .card:has(.xm-fin:not([hidden])) .xm-sablier{ display:none; }

/* le sceau d'or de fin pour les pages SANS écran de fin : <div id="xmFin" hidden></div> + XM.sceauFin(…) */
.xm:where(.xm-classique) .xm-fin{ text-align:center; margin:14px 0 6px; animation:xmEntre .4s ease; }
.xm:where(.xm-classique) .xm-fin .end-title{ margin:2px 0 4px; }
.xm:where(.xm-classique) .xm-fin .xm-recap{ max-width:600px; margin:8px auto 14px; }
.xm:where(.xm-classique) .xm-fin .xm-expl{ justify-content:center; align-items:center; max-width:540px; margin:0 auto 12px; }
.xm:where(.xm-classique) .end-sub{ display:inline-block; margin:0 0 12px; padding:5px 14px; border-radius:999px; font-size:.92em; font-weight:800;
  background:var(--chip); border:1.5px solid var(--chip-bord); color:var(--encre); font-variant-numeric:lining-nums; }
/* un sceau qui accepte un texte long (« 12 500 », « Bravo ! ») : XM.sceauFin pose .long / .tres-long tout seul */
.xm:where(.xm-classique) .xm-sceau.long .end-score{ font-size:1.9em; }
.xm:where(.xm-classique) .xm-sceau.tres-long .end-score{ font-size:1.35em; overflow-wrap:anywhere; padding:0 14px; }
.xm:where(.xm-classique) .end-cell{ grid-template-columns:22px minmax(38%,1fr) auto; }   /* la question garde sa place quand la réponse est longue */
.xm:where(.xm-classique) .end-cell .r{ white-space:normal; overflow-wrap:anywhere; }   /* une saisie très longue ne déborde pas à 390 px */
.xm:where(.xm-classique) .end-cell .rep{ display:block; margin-top:2px; font-weight:600; font-size:.92em; opacity:.9; }

/* les petits messages du site (js/fv-toast.js : #fvtoast .fvtoast) et des jeux (.toast) : plaquettes d'or, en haut au centre
   (ils ne cachent plus « Suivant » ni l'Ardoise en bas à droite) et ils ne bloquent jamais un bouton sous le doigt */
.xm:where(.xm-classique) #fvtoast, .xm:where(.xm-classique) .fvtoast, .xm:where(.xm-classique) .toast{ pointer-events:none; }
.xm:where(.xm-classique) #fvtoast{ top:76px !important; bottom:auto !important; left:50% !important; right:auto !important; transform:translateX(-50%); align-items:center; z-index:4000; }
.xm:where(.xm-classique) .toast{ top:76px !important; bottom:auto !important; left:50% !important; right:auto !important; transform:translateX(-50%) !important; text-align:center; z-index:4000; }
.xm:where(.xm-classique) .fvtoast, .xm:where(.xm-classique) .toast{ background:#17111f; color:var(--encre); border:1.5px solid var(--or); border-radius:12px; font-weight:700;
  box-shadow:0 10px 26px rgba(0,0,0,.5); font-variant-numeric:lining-nums; }
.xm:where(.xm-classique) .toast{ position:fixed; padding:13px 18px; opacity:0; transition:opacity .5s ease; }   /* #toast des badges (badges.js), invisible au repos */
.xm:where(.xm-classique) .toast.show{ opacity:1; }
.xm:where(.xm-classique) .fvtoast.success{ background:linear-gradient(180deg,#1f3a27,#14261a); border-color:var(--ok); color:#e8ffef; }
.xm:where(.xm-classique) .fvtoast.info{ background:linear-gradient(180deg,#2a1d12,#1a120b); border-color:var(--or-clair); color:#fff3d6; }
.xm:where(.xm-classique) .fvtoast.warn{ background:linear-gradient(180deg,#3a1a14,#24100b); border-color:var(--ko); color:#ffe6df; }

/* les gemmes de progression de js/jus-jeu.js (F.serie) : losanges d'or comme le bandeau Express */
.xm:where(.xm-classique) .fvj-gemmes span{ border-color:var(--gemme-bord); background:var(--gemme-vide); }
.xm:where(.xm-classique) .fvj-gemmes span.cours{ border-color:var(--or-clair); box-shadow:0 0 0 3px rgba(255,215,106,.25); }
.xm:where(.xm-classique) .fvj-gemmes span.ok{ background:var(--gemme-ok); border-color:var(--or-fonce); box-shadow:0 0 9px rgba(245,200,66,.6); }
.xm:where(.xm-classique) .fvj-gemmes span.moyen{ background:linear-gradient(135deg,#fff2b0,#e8b84a); border-color:#9a6a12; }
.xm:where(.xm-classique) .fvj-gemmes span.rate{ background:linear-gradient(135deg,#d77a6e,#9b3328); border-color:#6e1d14; }

@media (max-width:640px){
  .xm:where(.xm-classique) .input-row input{ width:110px; font-size:1.35em; padding:9px 8px; }
  .xm:where(.xm-classique) .input-row{ flex-wrap:wrap; }
  .xm:where(.xm-classique) .xm-duo input{ width:84px; }
  .xm:where(.xm-classique) .ysa{ padding:8px 10px 8px 52px; font-size:.95em; }
  .xm:where(.xm-classique) .ysa::before{ width:36px; height:36px; left:6px; top:8px; border-width:2px; }
  .xm:where(.xm-classique) .fvtoast{ min-width:0 !important; max-width:calc(100vw - 32px) !important; }
  .xm:where(.xm-classique) #fvtoast, .xm:where(.xm-classique) .toast{ top:66px !important; }
}
@media (prefers-reduced-motion:reduce){ .xm:where(.xm-classique) .ysa, .xm:where(.xm-classique) .xm-fin{ animation:none !important; opacity:1 !important; } }

/* THÈMES (data-allow-theme) */
/* themes.css repasse « body > main > .card » en blanc (0,3,2) : la carte d'or garde sa surface sombre sur les pages en <main> */
body.xm:where(.xm-classique)[class*="theme-"] > main > .card{ background-color:var(--carte-solide); }
/* le parchemin garde son encre sombre ; les touches de couleur internes restent les leurs (currentColor, aucune couleur
   forcée sur les enfants : une règle « .xm .ysa .truc{color:…} » de la page s'applique aussi sous un thème) */
body.xm:where(.xm-classique)[class*="theme-"] .ysa, body.xm:where(.xm-classique)[class*="theme-"] .xm-parchemin, body.xm:where(.xm-classique)[class*="theme-"] .xm-expl .bulle, body.xm:where(.xm-classique)[class*="theme-"] .fv-erreur-type{ color:#3b2708 !important; text-shadow:none !important; }
body.xm:where(.xm-classique)[class*="theme-"] .ysa *, body.xm:where(.xm-classique)[class*="theme-"] .xm-parchemin *, body.xm:where(.xm-classique)[class*="theme-"] .xm-expl .bulle *{ -webkit-text-fill-color:currentColor; text-shadow:none !important; }
body.xm:where(.xm-classique)[class*="theme-"] .xm-verdict s{ color:#a11d1d !important; -webkit-text-fill-color:#a11d1d !important; }
body.xm:where(.xm-classique)[class*="theme-"] .xm-verdict .bonne b, body.xm:where(.xm-classique)[class*="theme-"] .xm-pourquoi b{ color:#1f7a3a !important; -webkit-text-fill-color:#1f7a3a !important; }
body.xm:where(.xm-classique)[class*="theme-"] .fvtoast, body.xm:where(.xm-classique)[class*="theme-"] .fvtoast *, body.xm:where(.xm-classique)[class*="theme-"] .toast{ color:#fff3d6 !important; -webkit-text-fill-color:#fff3d6 !important; text-shadow:none !important; }
body.xm:where(.xm-classique)[class*="theme-"] .xm-fin .end-score{ -webkit-text-fill-color:currentColor; }