/* css/raid-arene.css — habillage « Siège » commun des épreuves de raid (refonte 20/10/2026).
 *
 * Va avec js/raid-arene.js. La page pose <html class="rx"> et range son contenu dans des blocs
 * .rx-zone (la page, l'aide, le bilan de fin). Jetons et polices repris de raid/siege.css pour que
 * l'épreuve prolonge la page du Siège : nuit, or, acier ; Cinzel pour les titres, Inter pour le texte.
 *
 * Mise en page : TOUT tient dans la hauteur de l'écran (100dvh) — en-tête, arène, question,
 * 4 réponses, barre du bas — sans défiler, sur iPad paysage 1024×768, portrait 768×1024 et
 * téléphone 390×844. Si l'écran est plus petit encore, seule la zone de question défile.
 *
 * ⚠️ Garde-fous thèmes : plusieurs thèmes de css/themes.css imposent
 * `body.theme-X:not([data-allow-theme]) * { color:#000 !important }` (spécificité 0,2,1).
 * Ici le fond est TOUJOURS sombre : `html.rx body .rx-zone *` (0,2,2) les bat, et chaque
 * couleur explicite est en !important avec une spécificité supérieure.
 * ⚠️ La barre du bas réserve la place des pastilles flottantes du site (🐛 en bas à gauche,
 * 🔍 déplacée à côté d'elle, Ardoise en bas à droite) : elles ne recouvrent plus les réponses.
 */

/* ── Polices hébergées (OFL, voir raid/fonts/OFL-*.txt) ───────────────── */
@font-face{font-family:"Cinzel";font-style:normal;font-weight:700;font-display:swap;
  src:url(/raid/fonts/cinzel-700-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/raid/fonts/inter-var-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ── Jetons ───────────────────────────────────────────────────────────── */
html.rx{
  --nuit:#10111F; --nuit-p:#0A0B15; --acier:#262B3C; --acier-c:#363D54;
  --or:#D9AD63; --or-c:#F3D79A; --or-f:#8A6424;
  --lum:#59BFFF; --lum-c:#A9DEFF; --omb:#EA6659; --omb-c:#FFB0A6;
  --ok:#5BD99A; --ok-f:#1d5a3c; --bad:#FF7A86; --bad-f:#5a1d26;
  --ivoire:#F2E6C9; --doux:#BDB6CB; --pale:#9A94AB;
  --titre:"Cinzel",Georgia,"Times New Roman",serif;
  --texte:"Inter","Nunito Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --h-tete:54px; --h-bas:64px; --h-arene:clamp(200px,45vh,460px);
  height:100%;
}
html.rx body{margin:0;min-height:100%;background:var(--nuit-p)!important;color:var(--ivoire);font-family:var(--texte);
  -webkit-text-size-adjust:100%;overflow-x:hidden}
html.rx body::before,html.rx body::after{display:none!important}

/* ── Garde-fous thèmes ────────────────────────────────────────────────── */
html.rx body .rx-zone{color:var(--ivoire)!important;font-family:var(--texte)}
html.rx body .rx-zone *{color:inherit!important;-webkit-text-fill-color:currentColor!important;text-shadow:none}
html.rx body .rx-zone *,html.rx body .rx-zone *::before,html.rx body .rx-zone *::after{box-sizing:border-box}
html.rx body .rx-zone [hidden]{display:none!important}

/* ── Charpente de la page ─────────────────────────────────────────────── */
html.rx .rx{display:flex;flex-direction:column;height:100vh;height:100dvh;max-width:1280px;margin:0 auto;position:relative;
  background:radial-gradient(120% 60% at 50% 100%,rgba(217,173,99,.07),transparent 60%),var(--nuit-p)}

/* En-tête */
html.rx .rx-tete{flex:0 0 var(--h-tete);display:flex;align-items:center;gap:10px;padding:0 12px;
  background:#0B0C17;border-bottom:1px solid rgba(217,173,99,.28);box-shadow:0 6px 20px rgba(0,0,0,.45);position:relative;z-index:3}
html.rx .rx-titre{flex:1;min-width:0}
html.rx body .rx-zone .rx-titre h1{margin:0;font-family:var(--titre);font-weight:700;font-size:19px;letter-spacing:.05em;line-height:1.15;
  color:var(--or-c)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.rx body .rx-zone .rx-notion{font-size:12px;color:var(--pale)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.rx .rx-pills{display:flex;align-items:center;gap:8px;flex:none}
html.rx body .rx-zone .rx-pill{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:999px;border:1px solid rgba(217,173,99,.35);
  background:rgba(255,255,255,.04);font-size:13px;font-weight:700;white-space:nowrap;color:var(--doux)!important;font-variant-numeric:tabular-nums}
html.rx body .rx-zone .rx-pill b{color:var(--ivoire)!important}
html.rx .rx-btn{font:inherit;font-weight:700;font-size:15px;cursor:pointer;border-radius:12px;border:1px solid rgba(217,173,99,.38);
  background:rgba(255,255,255,.05);padding:9px 14px;line-height:1.1;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background .15s,border-color .15s,transform .08s}
html.rx .rx-btn:hover{background:rgba(217,173,99,.14)}
html.rx .rx-btn:active{transform:translateY(1px)}
html.rx .rx-btn:disabled{opacity:.45;cursor:default}
html.rx .rx-btn:focus-visible,html.rx .choice:focus-visible{outline:3px solid var(--or-c);outline-offset:2px}
html.rx .rx-rond{width:40px;height:40px;padding:0;border-radius:50%;font-size:18px}
html.rx body .rx-zone .rx-retour{color:var(--or-c)!important;border-color:rgba(217,173,99,.6);background:rgba(217,173,99,.1)}

/* Arène */
html.rx .rx-arene{flex:0 0 var(--h-arene);position:relative;border-bottom:1px solid rgba(217,173,99,.35);
  box-shadow:0 10px 30px rgba(0,0,0,.5);z-index:2}

/* Zone de jeu */
html.rx .rx-jeu{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;justify-content:center;
  padding:6px 16px 6px;gap:6px}
html.rx .rx-gemmes{display:flex;justify-content:center;align-items:center;flex-wrap:nowrap;gap:4px;height:28px;flex:none;overflow:visible}
/* la flamme de série ne doit pas décaler la question (un doigt viserait la mauvaise réponse) */
html.rx .rx-gemmes .fvj-flamme{font-size:13px;padding:2px 8px;min-width:0;line-height:1.3}
html.rx .rx-gemmes .fvj-gemmes{margin:0}
html.rx .rx-gemmes .fvj-gemmes span{width:15px;height:15px;border-color:rgba(217,173,99,.55)}
html.rx .rx-carte{flex:0 1 auto;min-height:0;display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:16px;
  background:linear-gradient(180deg,rgba(38,43,60,.9),rgba(16,17,31,.96));border:1px solid rgba(217,173,99,.32);
  box-shadow:0 14px 34px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05);width:100%;max-width:980px;margin:0 auto}
html.rx .rx-qhaut{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none;flex-wrap:wrap}
html.rx body .rx-zone .rx-tag{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--or)!important}
html.rx .rx-compteurs{display:flex;gap:12px;font-size:13px;font-variant-numeric:tabular-nums}
html.rx body .rx-zone .rx-compteurs span{color:var(--pale)!important}
html.rx body .rx-zone .rx-compteurs b{font-weight:800;color:var(--ivoire)!important}
html.rx body .rx-zone .rx-compteurs b#kScore{color:var(--or-c)!important}
html.rx body .rx-zone .rx-compteurs b#kErr{color:var(--bad)!important}
html.rx body .rx-zone .q-text{font-size:22px;font-weight:800;line-height:1.25;margin:2px 0 0;color:var(--ivoire)!important;flex:none}
html.rx body .rx-zone .q-text:empty{display:none}
html.rx .choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;flex:none}
html.rx body .rx-zone .choice{font:inherit;font-weight:800;font-size:20px;min-height:58px;padding:10px 12px;border-radius:14px;cursor:pointer;
  border:1px solid rgba(217,173,99,.38);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  color:var(--ivoire)!important;text-align:center;line-height:1.15;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:background .15s,border-color .15s,transform .08s,box-shadow .2s;font-variant-numeric:tabular-nums}
html.rx .choice:hover:not(:disabled){background:rgba(217,173,99,.16);border-color:var(--or);box-shadow:0 0 18px rgba(217,173,99,.22)}
html.rx .choice:active:not(:disabled){transform:scale(.98)}
html.rx .choice:disabled{cursor:default}
html.rx body .rx-zone .choice.correct{border-color:var(--ok);background:rgba(91,217,154,.2);box-shadow:0 0 22px rgba(91,217,154,.35);color:#E6FFF1!important}
html.rx body .rx-zone .choice.wrong{border-color:var(--bad);background:rgba(255,122,134,.18);color:#FFE3E6!important}
html.rx body .rx-zone .hint{display:flex;justify-content:space-between;gap:10px;font-size:13px;min-height:18px;color:var(--doux)!important;flex:none}
html.rx .hint span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.rx .hint #hintRight{text-align:right}

/* Avant la partie */
html.rx .rx-intro{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;flex:1;padding:4px}
html.rx body .rx-zone .rx-intro p{margin:0;font-size:15px;line-height:1.4;color:var(--doux)!important;max-width:560px}
html.rx body .rx-zone .rx-intro p b{color:var(--ivoire)!important}
html.rx body .rx-zone .rx-go{font-family:var(--titre);font-size:19px;letter-spacing:.04em;padding:14px 26px;border-radius:14px;
  background:linear-gradient(180deg,#e9c27a,#b9862f);border-color:#f3d79a;color:#241604!important;box-shadow:0 8px 26px rgba(217,173,99,.35)}
html.rx .rx-go:hover{filter:brightness(1.08);background:linear-gradient(180deg,#f0cd8a,#c08f37)}
html.rx body.rx-en-jeu .rx-intro{display:none}
html.rx body:not(.rx-en-jeu) .rx-qhaut .rx-compteurs{visibility:hidden}

/* Barre du bas : réserve les pastilles flottantes (🐛 🔍 à gauche, Ardoise à droite) */
html.rx .rx-bas{flex:0 0 var(--h-bas);display:flex;align-items:center;justify-content:center;gap:10px;padding:0 150px 0 112px}
html.rx #btnRestart:disabled,html.rx body.rx-fini #btnSkip{display:none}
html.rx .rx-bas .rx-btn{white-space:nowrap}
html.rx body.rx-en-jeu .rx-intro{display:none}
html.rx body #_fvloupe-btn{bottom:12px!important;left:58px!important}

/* ── Aide ⓘ ───────────────────────────────────────────────────────────── */
html.rx dialog.rx-aide{border:1px solid rgba(217,173,99,.45);border-radius:18px;padding:18px 18px 14px;max-width:min(520px,92vw);
  background:linear-gradient(180deg,#1b1e2c,#0f101c)!important;box-shadow:0 30px 80px rgba(0,0,0,.6)}
html.rx dialog.rx-aide::backdrop{background:rgba(5,6,12,.65)}
html.rx body .rx-zone.rx-aide h2{margin:0 0 8px;font-family:var(--titre);font-size:20px;color:var(--or-c)!important}
html.rx body .rx-zone.rx-aide p{margin:6px 0;font-size:14.5px;line-height:1.45;color:var(--doux)!important}
html.rx body .rx-zone.rx-aide b{color:var(--ivoire)!important}
html.rx .rx-aide .rx-lignes{display:grid;grid-template-columns:1fr auto;gap:4px 14px;margin:10px 0;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.04);font-size:14px}
html.rx .rx-aide .rx-paliers span{display:inline-block;padding:1px 8px;border-radius:999px;font-size:12px;font-weight:700;margin-right:6px}
html.rx body .rx-zone .rx-aide .p1{background:rgba(91,217,154,.18);color:var(--ok)!important}
html.rx body .rx-zone .rx-aide .p2{background:rgba(217,173,99,.2);color:var(--or-c)!important}
html.rx body .rx-zone .rx-aide .p3{background:rgba(255,122,134,.18);color:var(--bad)!important}
html.rx .rx-aide form{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px}

/* ── Arène (DOM par-dessus le canvas) ─────────────────────────────────── */
html.rx .rxa{position:relative;overflow:hidden;background:#0A0B15;isolation:isolate}
html.rx .rxa-toile{position:absolute;inset:0;width:100%;height:100%;display:block}
html.rx .rxa-plaque{position:absolute;left:12px;top:10px;z-index:2;max-width:min(48%,380px);padding:7px 12px 9px;border-radius:12px;
  background:linear-gradient(180deg,rgba(10,11,21,.82),rgba(10,11,21,.55));border:1px solid rgba(217,173,99,.42);box-shadow:0 8px 24px rgba(0,0,0,.4)}
html.rx body .rx-zone .rxa-sur{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--or)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.rx body .rx-zone .rxa[data-cite-boss="lum"] .rxa-sur{color:var(--lum-c)!important}
html.rx body .rx-zone .rxa[data-cite-boss="omb"] .rxa-sur{color:var(--omb-c)!important}
html.rx body .rx-zone .rxa-nom{font-family:var(--titre);font-weight:700;font-size:23px;line-height:1.15;letter-spacing:.04em;color:var(--or-c)!important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;filter:drop-shadow(0 2px 0 rgba(0,0,0,.6))}
html.rx .rxa-jauge{--k:0;position:relative;margin-top:6px;height:16px;min-width:170px;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.08);border:1px solid rgba(217,173,99,.35)}
html.rx .rxa-jauge i{position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--k));transition:transform .45s cubic-bezier(.3,1.3,.5,1);
  background:linear-gradient(90deg,#8A6424,#D9AD63 60%,#F3D79A)}
html.rx .rxa[data-role="soin"] .rxa-jauge i{background:linear-gradient(90deg,#1d5a3c,#5BD99A 60%,#d8f5c0)}
html.rx body .rx-zone .rxa-jauge span{position:relative;display:block;text-align:center;font-size:11px;font-weight:800;line-height:14px;letter-spacing:.04em;
  color:#fff8e6!important;text-shadow:0 1px 2px rgba(0,0,0,.9)!important;font-variant-numeric:tabular-nums}
html.rx .rxa-camp{position:absolute;right:58px;top:12px;z-index:2;display:flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:999px;
  background:rgba(10,11,21,.72);border:1px solid rgba(217,173,99,.35);font-size:12.5px;font-weight:700;white-space:nowrap}
html.rx .rxa-camp img{width:28px;height:28px;object-fit:contain}
html.rx body .rx-zone .rxa[data-role="soin"] .rxa-camp{color:#bff0d2!important;border-color:rgba(91,217,154,.5)}
html.rx .rxa-son{position:absolute;right:10px;top:10px;z-index:2;width:38px;height:38px;border-radius:50%;border:1px solid rgba(217,173,99,.4);
  background:rgba(10,11,21,.7);font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
html.rx body .rx-zone .rxa-annonce{position:absolute;left:58%;top:40%;z-index:2;transform:translate(-50%,-50%) scale(.6);opacity:0;pointer-events:none;
  font-family:var(--titre);font-weight:700;font-size:32px;letter-spacing:.05em;white-space:nowrap;color:var(--or-c)!important;
  text-shadow:0 0 18px rgba(217,173,99,.8),0 3px 0 rgba(0,0,0,.7)!important}
html.rx body .rx-zone .rxa-annonce.soin{color:#d8f5c0!important;text-shadow:0 0 18px rgba(91,217,154,.8),0 3px 0 rgba(0,0,0,.7)!important}
html.rx .rxa-annonce.on{animation:rxaAnnonce 1.3s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes rxaAnnonce{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
  30%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-62%) scale(1)}}

/* ── Bilan de fin ─────────────────────────────────────────────────────── */
html.rx .rxf{position:fixed;inset:0;z-index:9850;display:flex;align-items:flex-end;justify-content:center;padding:12px 12px 74px;
  background:linear-gradient(180deg,rgba(5,6,12,0) 0,rgba(5,6,12,.15) 30%,rgba(5,6,12,.72) 70%);opacity:0;transition:opacity .35s}
html.rx .rxf.ouvert{opacity:1}
html.rx .rxf-carte{width:min(560px,100%);max-height:calc(100dvh - 90px);overflow:auto;text-align:center;padding:16px 18px 16px;border-radius:20px;
  background:linear-gradient(180deg,rgba(30,33,48,.97),rgba(12,13,24,.98));border:1px solid rgba(217,173,99,.55);
  box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);
  transform:translateY(40px) scale(.96);transition:transform .45s cubic-bezier(.2,1.3,.4,1)}
html.rx .rxf.ouvert .rxf-carte{transform:none}
html.rx body .rx-zone .rxf-sur{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--or)!important}
html.rx body .rx-zone .rxf h2{margin:2px 0 4px;font-family:var(--titre);font-size:25px;letter-spacing:.03em;color:var(--or-c)!important}
html.rx .rxf-score{display:flex;align-items:baseline;justify-content:center;gap:8px;flex-wrap:wrap}
html.rx body .rx-zone .rxf-score b{font-family:var(--titre);font-size:44px;line-height:1;color:var(--ivoire)!important;font-variant-numeric:tabular-nums}
html.rx body .rx-zone .rxf-score span{font-size:15px;color:var(--pale)!important}
html.rx body .rx-zone .rxf-score em{font-style:normal;font-size:12.5px;font-weight:800;padding:3px 10px;border-radius:999px;background:linear-gradient(90deg,#e9c27a,#b9862f);color:#241604!important}
html.rx body .rx-zone .rxf-ligne{font-size:14px;margin:4px 0 10px;color:var(--doux)!important}
html.rx .rxf-degats{margin:0 auto 12px;padding:12px;border-radius:14px;background:rgba(0,0,0,.28);border:1px solid rgba(217,173,99,.25);min-height:64px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
html.rx body .rx-zone .rxf-valeur{font-family:var(--titre);font-size:30px;line-height:1.1;color:#FFE1B0!important;font-variant-numeric:tabular-nums}
html.rx body .rx-zone .rxf-valeur small{font-family:var(--texte);font-size:14px;font-weight:700;color:var(--doux)!important}
html.rx body .rx-zone .rxf-valeur.soin{color:#CFF7DD!important}
html.rx body .rx-zone .rxf-crit{font-weight:800;font-size:14px;color:#FFB36B!important}
html.rx .rxf-detail{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}
html.rx body .rx-zone .rxf-detail span{font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:var(--doux)!important}
html.rx body .rx-zone .rxf-pm{font-size:14px;font-weight:800;color:#9FD8FF!important}
html.rx body .rx-zone .rxf-conseil{margin:2px 0 0;font-size:13.5px;color:var(--or-c)!important}
html.rx body .rx-zone .rxf-info{font-size:14px;line-height:1.4;color:var(--doux)!important;max-width:460px}
html.rx body .rx-zone .rxf-attente{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:700;color:var(--doux)!important}
html.rx .rxf-attente i{width:18px;height:18px;border-radius:50%;border:3px solid rgba(217,173,99,.25);border-top-color:var(--or);animation:rxfTourne .8s linear infinite}
@keyframes rxfTourne{to{transform:rotate(360deg)}}
html.rx .rxf-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
html.rx body .rx-zone .rxf-btn{font:inherit;font-weight:800;font-size:16px;padding:12px 18px;border-radius:14px;cursor:pointer;text-decoration:none;
  border:1px solid rgba(217,173,99,.45);background:rgba(255,255,255,.05);color:var(--ivoire)!important;display:inline-flex;align-items:center;gap:6px}
html.rx body .rx-zone .rxf-btn.or{font-family:var(--titre);letter-spacing:.03em;background:linear-gradient(180deg,#e9c27a,#b9862f);border-color:#f3d79a;color:#241604!important;
  box-shadow:0 8px 26px rgba(217,173,99,.35)}

/* ── Téléphone ────────────────────────────────────────────────────────── */
@media (max-width:599px){
  html.rx{--h-tete:48px;--h-bas:60px;--h-arene:clamp(176px,30vh,262px)}
  html.rx .rx-tete{gap:6px;padding:0 8px}
  html.rx body .rx-zone .rx-titre h1{font-size:14px;letter-spacing:.02em;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.08}
  html.rx .rx-tete #btnHome{display:none}
  html.rx .rx-notion,html.rx #rxBonus{display:none}
  html.rx body .rx-zone .rx-pill{padding:5px 8px;font-size:12px}
  html.rx .rx-btn{font-size:14px;padding:8px 10px}
  html.rx .rx-rond{width:36px;height:36px}
  html.rx .rx-retour span{display:none}
  html.rx .rx-jeu{padding:4px 10px 4px;gap:4px}
  html.rx .rx-carte{padding:10px 10px;gap:7px;border-radius:14px}
  html.rx body .rx-zone .q-text{font-size:19px}
  html.rx .choices{gap:8px}
  html.rx body .rx-zone .choice{font-size:17px;min-height:54px;padding:8px}
  html.rx .rx-compteurs{gap:9px;font-size:12px}
  html.rx .rx-compteurs .rx-temps{display:none}
  html.rx .rx-bas{padding:0 70px 0 104px}
  html.rx .rxa-plaque{left:8px;top:8px;max-width:62%;padding:5px 9px 7px}
  html.rx body .rx-zone .rxa-nom{font-size:17px}
  html.rx body .rx-zone .rxa-sur{font-size:10px}
  html.rx .rxa-jauge{min-width:120px;height:14px}
  html.rx body .rx-zone .rxa-jauge span{font-size:10px;line-height:12px}
  html.rx .rxa-camp{top:auto;bottom:8px;right:8px;font-size:11px;padding:3px 8px 3px 3px}
  html.rx .rxa-camp img{width:22px;height:22px}
  html.rx .rxa-son{width:34px;height:34px;right:8px;top:8px;font-size:15px}
  html.rx body .rx-zone .rxa-annonce{font-size:23px}
  html.rx .rxf{padding:10px 8px 66px}
  html.rx body .rx-zone .rxf h2{font-size:21px}
  html.rx body .rx-zone .rxf-score b{font-size:38px}
  html.rx body .rx-zone .rxf-valeur{font-size:25px}
  html.rx body .rx-zone .rxf-btn{font-size:15px;padding:11px 14px}
}
/* Tablette en portrait : plus de hauteur pour la question */
@media (min-width:600px) and (orientation:portrait){
  html.rx{--h-arene:clamp(240px,36vh,420px)}
}
/* Écran bas (téléphone couché) */
@media (max-height:500px) and (orientation:landscape){
  html.rx{--h-tete:44px;--h-bas:52px;--h-arene:38vh}
  html.rx .rx-notion{display:none}
  html.rx body .rx-zone .choice{min-height:44px;font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  html.rx .rxa-annonce.on{animation:none;opacity:1;transform:translate(-50%,-50%)}
  html.rx .rxf,html.rx .rxf-carte,html.rx .rxa-jauge i{transition:none}
}

/* ── Épreuves à figure (repère ; plus tard parchemin, angles, aire…) ─────
 * La figure et les réponses tiennent ensemble à l'écran : figure carrée à gauche, question et
 * réponses à droite (tablette), ou empilées (téléphone). La taille de la figure se CALCULE à partir
 * de la hauteur restante, pour ne jamais pousser les réponses sous la ligne de flottaison. */
html.rx body.rx-figure-page{--h-arene:clamp(180px,28vh,300px);
  --fig:min(calc(100vh - var(--h-tete) - var(--h-arene) - var(--h-bas) - 96px),56vw);
  --fig:min(calc(100dvh - var(--h-tete) - var(--h-arene) - var(--h-bas) - 96px),56vw)}
html.rx body.rx-figure-page .rx-carte{flex:1 1 auto}
html.rx .rx-corps{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;flex:1 1 auto;min-height:0}
html.rx body:not(.rx-en-jeu) .rx-corps{display:none}
html.rx .rx-figure{display:flex;align-items:center;justify-content:center}
html.rx .rx-figure svg{display:block;width:var(--fig);height:var(--fig);border-radius:12px;background:radial-gradient(circle at 50% 40%,rgba(38,43,60,.55),rgba(10,11,21,.6));
  border:1px solid rgba(217,173,99,.28);touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:box-shadow .25s}
html.rx .rx-figure svg.isPlace{cursor:crosshair;box-shadow:0 0 0 2px var(--or),0 0 26px rgba(217,173,99,.35)}
html.rx .rx-colonne{display:flex;flex-direction:column;justify-content:center;gap:12px;min-width:0}
html.rx body.rx-figure-page .q-text{font-size:21px}
html.rx body.rx-figure-page .choices{grid-template-columns:repeat(2,minmax(0,1fr))}
html.rx body.rx-figure-page .hint span{white-space:normal}
html.rx body.rx-placement .rx-colonne .choices{display:none}
@media (max-width:599px){
  html.rx body.rx-figure-page{--h-arene:clamp(150px,22vh,200px);
    --fig:min(calc(100vw - 40px),calc(100vh - var(--h-tete) - var(--h-arene) - var(--h-bas) - 200px));
    --fig:min(calc(100vw - 40px),calc(100dvh - var(--h-tete) - var(--h-arene) - var(--h-bas) - 200px))}
  html.rx .rx-corps{grid-template-columns:1fr;gap:8px;align-content:start}
  html.rx .rx-colonne{display:contents}
  html.rx .rx-corps .q-text{order:1}
  html.rx .rx-corps .rx-figure{order:2}
  html.rx .rx-corps .choices{order:3}
  html.rx .rx-corps .hint{order:4}
  html.rx body.rx-figure-page .q-text{font-size:17px}
  html.rx body.rx-figure-page .choices{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  html.rx body.rx-figure-page .rx-zone .choice{font-size:15px;min-height:46px;padding:6px 2px;letter-spacing:-.02em}
}
@media (min-width:600px) and (orientation:portrait){
  html.rx body.rx-figure-page{--h-arene:clamp(220px,29vh,330px);
    --fig:min(calc(100vh - var(--h-tete) - var(--h-arene) - var(--h-bas) - 96px),59vw);
    --fig:min(calc(100dvh - var(--h-tete) - var(--h-arene) - var(--h-bas) - 96px),59vw)}
}

/* ── Lot 2 (20/10/2026) : briques communes des 12 autres épreuves ─────────
 * Tout est facultatif : une page qui ne les utilise pas (les 2 modèles) ne change pas. */
/* Figure facultative (angles : figure aux Q1-4 seulement) : sans figure, la colonne prend toute la largeur */
html.rx .rx-corps.sans-fig{grid-template-columns:minmax(0,1fr)}
html.rx .rx-corps.sans-fig .rx-colonne{max-width:880px;margin:0 auto;width:100%}
/* Figure en demi-plan (angles) : pleine largeur de figure, hauteur réduite d'un tiers */
html.rx .rx-figure svg.rx-angle{height:auto;aspect-ratio:220/150}
/* Énoncé plus long (tableau, recette, problème) : arène un peu plus basse pour que les réponses restent visibles */
html.rx body.rx-compact{--h-arene:clamp(180px,34vh,340px)}
/* Fraction empilée (affichage seulement : la réponse comparée reste « a/b ») */
html.rx .rx-frac{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1.02;margin:0 .14em;font-variant-numeric:tabular-nums}
html.rx .rx-frac>span{display:block;padding:0 .2em}
html.rx .rx-frac>span:first-child{border-bottom:.09em solid currentColor;padding-bottom:.06em}
html.rx .rx-frac>span:last-child{padding-top:.06em}
html.rx body .rx-zone .choice .rx-frac{font-size:.95em}
/* Consigne courte + ligne mathématique mise en avant (équations, calculs) */
html.rx body .rx-zone .rx-consigne{display:block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pale)!important;margin-bottom:2px}
html.rx body .rx-zone .rx-eq{display:block;font-family:Georgia,"Times New Roman",serif;font-size:32px;font-weight:700;line-height:1.2;letter-spacing:.02em;color:var(--or-c)!important;font-variant-numeric:tabular-nums}
html.rx sup.rx-sup{font-size:.62em;line-height:0}
/* Tableau (proportionnalité) */
html.rx .rx-table{border-collapse:separate;border-spacing:0;margin:0 auto 4px;border:1px solid rgba(217,173,99,.42);border-radius:12px;overflow:hidden;font-variant-numeric:tabular-nums}
html.rx body .rx-zone .rx-table th{padding:7px 14px;background:rgba(217,173,99,.14);color:var(--or-c)!important;font-size:15px;font-weight:700;text-align:left;white-space:nowrap}
html.rx body .rx-zone .rx-table td{padding:7px 18px;min-width:60px;text-align:center;font-size:21px;font-weight:800;border-left:1px solid rgba(217,173,99,.22)}
html.rx .rx-table tr+tr>*{border-top:1px solid rgba(217,173,99,.22)}
html.rx body .rx-zone .rx-table td.manque{color:#241604!important;background:linear-gradient(180deg,#e9c27a,#b9862f)}
/* Chrono par question (format Rush) */
html.rx .rx-rush{--k:1;position:relative;height:10px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.08);border:1px solid rgba(217,173,99,.3);flex:none}
html.rx .rx-rush i{position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--k));background:linear-gradient(90deg,#b9862f,#F3D79A)}
html.rx .rx-rush.urgent i{background:linear-gradient(90deg,#a3252f,#FF7A86)}
html.rx body .rx-zone .rx-rush-txt{font-weight:800;color:var(--or-c)!important;font-variant-numeric:tabular-nums}
html.rx body .rx-zone .rx-rush-txt.urgent{color:var(--bad)!important}
html.rx .rx-rush-ligne{display:flex;align-items:center;gap:10px;flex:none}
html.rx .rx-rush-ligne .rx-rush{flex:1}
html.rx body .rx-zone .rx-rush-txt{min-width:3.6em;font-size:15px}
html.rx body:not(.rx-en-jeu) .rx-rush-ligne,html.rx body.rx-fini .rx-rush-ligne{display:none}
/* Réponses longues (affirmations, énigmes) : plus petites, alignées à gauche, sur plusieurs lignes */
html.rx body .rx-zone .choices.longs .choice{font-size:15.5px;font-weight:700;line-height:1.28;text-align:left;padding:9px 12px}
/* Carte (Parchemin) : les étiquettes de lieux restent lisibles même petites */
html.rx .rx-figure svg.rx-carte-svg{background:none;border-color:rgba(138,100,36,.7)}
@media (max-width:599px){
  html.rx body.rx-compact{--h-arene:clamp(150px,22vh,200px)}
  html.rx body .rx-zone .rx-eq{font-size:26px}
  html.rx body .rx-zone .rx-table th{padding:6px 8px;font-size:13px}
  html.rx body .rx-zone .rx-table td{padding:6px 10px;min-width:44px;font-size:18px}
  html.rx body .rx-zone .choices.longs .choice{font-size:13.5px;padding:7px 9px}
  /* Indice utile à la réponse (« 3 nombres sont des carrés parfaits ») : jamais tronqué sur téléphone */
  html.rx body:not(.rx-figure-page) .rx-zone .hint{flex-wrap:wrap;row-gap:2px}
  html.rx body:not(.rx-figure-page) .hint span{white-space:normal}
  /* Figure + énoncé sur deux lignes (Parchemin) : la figure laisse la place d'une ligne de plus */
  html.rx body.rx-figure-page.rx-enonce-long{
    --fig:min(calc(100vw - 40px),calc(100vh - var(--h-tete) - var(--h-arene) - var(--h-bas) - 236px));
    --fig:min(calc(100vw - 40px),calc(100dvh - var(--h-tete) - var(--h-arene) - var(--h-bas) - 236px))}
}
@media (min-width:600px) and (orientation:portrait){
  html.rx body.rx-compact{--h-arene:clamp(220px,30vh,340px)}
}
/* Téléphone (21/10/2026) : la question centrée laissait un grand vide sous le gardien (sans figure),
 * ou au fond de la carte (figure plus basse que prévu : angles, aire). La scène prend la hauteur libre
 * (le canvas suit son hôte, ResizeObserver) et la question se colle dessous ; --fig reste calculée sur
 * --h-arene, donc la figure garde sa taille ; question longue → scène à --h-arene, la question défile. */
@media (max-width:599px) and (orientation:portrait){
  html.rx .rx-arene{flex:1 1 auto;min-height:var(--h-arene);max-height:60vh;max-height:60dvh}
  html.rx .rx-jeu{flex:0 1 auto}
  html.rx body.rx-figure-page .rx-carte{flex:0 1 auto}
  html.rx .rx-bas{margin-top:auto} /* scène au maximum + question courte : la barre reste en bas, alignée sur les boutons ronds */
}