/* =====================================================================
   JEUX EN CLASSE — LA PASSE VISUELLE (26 octobre 2026)
   « Améliorer le visuel, que ce soit simple d'y jouer, des vignettes
   plus attirantes. » Chargé en dernier : il l'emporte sur les styles
   d'origine. 1. le menu du choix du jeu ; 2. le langage commun des
   parties ; 3. les décors propres à chaque jeu.
   ===================================================================== */

/* =====================================================================
   1. LE MENU : vignettes de jeu, carte « à la une », familles
   ===================================================================== */
.mj-familles{gap:52px}
.mj-type.vg{border-radius:24px;background:linear-gradient(180deg,#1f2560,#171b47);border:1.5px solid rgba(255,255,255,.1);
  box-shadow:0 18px 40px -26px rgba(0,0,0,.9);transition:transform .25s cubic-bezier(.2,.8,.3,1),box-shadow .25s,border-color .25s}
.mj-type.vg:hover,.mj-type.vg:focus-within{transform:translateY(-6px);border-color:color-mix(in srgb,var(--c1) 70%,transparent);box-shadow:0 30px 60px -26px var(--c2),0 0 0 1px var(--c1)}
.mj-type.vg[aria-current="true"]{border-color:var(--mj-jaune)}
.mj-type.vg .mj-choisir{display:flex;flex-direction:column}
.vg-scene{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--c2)}
.vg-scene svg{position:absolute;inset:0;width:100%;height:100%;display:block;transition:transform .7s cubic-bezier(.2,.8,.3,1)}
.vg:hover .vg-scene svg,.vg:focus-within .vg-scene svg{transform:scale(1.045)}
.vg-scene::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(180deg,transparent,rgba(16,20,60,.55));pointer-events:none}
.vg-lustre{position:absolute;inset:0;z-index:2;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.22) 48%,transparent 60%);transform:translateX(-120%);transition:transform .8s ease;pointer-events:none}
.vg:hover .vg-lustre,.vg:focus-within .vg-lustre{transform:translateX(120%)}
.vg-badge{position:absolute;left:14px;top:14px;z-index:3;font:700 .72rem/1 'Space Grotesk',sans-serif;letter-spacing:.12em;text-transform:uppercase;padding:6px 11px;border-radius:99px;background:#FFD54A;color:#2A1D00;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.vg-corps{display:flex;flex-direction:column;gap:9px;flex:1;padding:16px 18px 4px}
.vg-pastilles{margin-bottom:6px}
.vg-titre{font-family:'Baloo 2','Nunito',sans-serif;font-weight:800;font-size:1.5rem;line-height:1.05;color:#fff}
.vg-accroche{color:#C9C7E8;font-size:.95rem;line-height:1.42;font-weight:600}
.vg-pastilles{display:flex;flex-wrap:wrap;gap:6px}
.vg-pastille{font-weight:800;font-size:.76rem;line-height:1;padding:6px 10px;border-radius:99px;color:#fff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);white-space:nowrap}
.vg-pastille:first-child{border-color:color-mix(in srgb,var(--c1) 70%,transparent);background:color-mix(in srgb,var(--c1) 18%,transparent)}
.vg .mj-go{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:auto;width:100%;min-height:46px;border-radius:14px;font-size:1.1rem}
.vg .mj-go svg{width:14px;height:14px;fill:currentColor}
.vg .mj-type-bas{display:flex;align-items:center;gap:12px;padding:10px 18px 16px;min-height:44px}
.vg .mj-type-bas .lien{margin-left:auto;font-size:.9rem}
.mj-demo{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:99px;border:1.5px solid rgba(79,216,240,.6);background:transparent;color:#F3F1FF;font:800 .86rem 'Nunito',sans-serif;cursor:pointer}
.mj-demo svg{width:18px;height:18px;fill:none;stroke:#4FD8F0;stroke-width:2;stroke-linejoin:round}
.mj-demo:focus-visible{outline:3px solid #4FD8F0;outline-offset:2px}
/* La carte « à la une » */
.mj-une{margin-bottom:-8px}
.mj-type.vedette .mj-choisir{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:stretch}
.mj-type.vedette .vg-scene{aspect-ratio:16/8.4}
.mj-type.vedette .vg-scene::after{display:none}
.mj-type.vedette .vg-corps{justify-content:center;gap:14px;padding:28px 32px}
.mj-type.vedette .vg-titre{font-size:clamp(2rem,3.4vw,2.8rem)}
.mj-type.vedette .vg-accroche{font-size:1.08rem}
.mj-type.vedette .mj-go{width:auto;align-self:flex-start;padding:0 30px;min-height:52px;font-size:1.2rem}
.mj-type.vedette .mj-type-bas{position:absolute;right:16px;bottom:8px;padding:0}
.mj-type.vedette .vg-badge{font-size:.8rem;padding:7px 13px}
/* Les familles */
.mj-famille-tete{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:16px;align-items:baseline;border-bottom:0;padding-bottom:0;margin-bottom:18px}
.mj-famille-sur{grid-row:1/3;align-self:center;font:700 .72rem/1 'Space Grotesk',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#2A1D00;background:#FFD54A;padding:7px 10px;border-radius:10px}
.mj-famille-tete h2{font-size:1.75rem}
.mj-famille-tete p{grid-column:2;margin-top:2px}
@media (max-width:820px){
  .mj-type.vedette .mj-choisir{grid-template-columns:1fr}
  .mj-type.vedette .vg-scene{aspect-ratio:16/10}
  .mj-type.vedette .vg-corps{padding:18px 18px 8px}
  .mj-type.vedette .mj-type-bas{position:static;padding:8px 18px 16px}
  .mj-type.vedette .mj-go{width:100%}
}
@media (max-width:560px){
  .mj-famille-tete{grid-template-columns:1fr}
  .mj-famille-sur{grid-row:auto;justify-self:start;margin-bottom:8px}
  .mj-famille-tete p{grid-column:1}
  .vg-titre{font-size:1.4rem}
}

/* --- Les animations des vignettes : au survol ou au focus seulement --- */
.vg [class*="va-"]{animation-play-state:paused}
.vg:hover [class*="va-"],.vg:focus-within [class*="va-"]{animation-play-state:running}
.va-scint{animation:vgScint 1.6s ease-in-out infinite}
@keyframes vgScint{0%,100%{opacity:.7}50%{opacity:.15}}
.va-projo{animation:vgProjo 2.6s ease-in-out infinite}
.va-projo.b{animation-delay:-1.3s}
@keyframes vgProjo{0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}
.va-case{transform-box:fill-box;transform-origin:center;animation:vgPouls 1.1s ease-in-out infinite}
@keyframes vgPouls{0%,100%{transform:scale(1);filter:none}50%{transform:scale(1.1);filter:brightness(1.25)}}
.va-etoile{transform-box:fill-box;transform-origin:center;animation:vgTourne 3.5s linear infinite}
@keyframes vgTourne{to{transform:rotate(360deg)}}
.va-corde{animation:vgCorde 1.5s ease-in-out infinite}
@keyframes vgCorde{0%,100%{transform:translateX(0)}30%{transform:translateX(-20px)}70%{transform:translateX(16px)}}
.va-tire{transform-box:fill-box;transform-origin:50% 100%;animation:vgPenche 1.5s ease-in-out infinite}
@keyframes vgPenche{0%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}70%{transform:rotate(7deg)}}
.va-trace{animation:vgTrace 2.4s ease-in-out infinite}
@keyframes vgTrace{0%{stroke-dashoffset:0}15%{stroke-dashoffset:1}70%,100%{stroke-dashoffset:0}}
.va-anneau{animation:vgAnneau 3s linear infinite}
@keyframes vgAnneau{0%{stroke-dashoffset:28}85%{stroke-dashoffset:99}100%{stroke-dashoffset:28}}
.va-aiguille{animation:vgTourne 1.8s linear infinite}
.va-eclair{transform-box:fill-box;transform-origin:center;animation:vgEclair 1.2s steps(1) infinite}
@keyframes vgEclair{0%,100%{opacity:1;transform:scale(1)}40%{opacity:.55;transform:scale(1.06)}55%{opacity:1;transform:scale(1)}70%{opacity:.7}}
.va-rep{transform-box:fill-box;transform-origin:center;animation:vgSaute 2.4s ease-in-out infinite}
.va-rep.r1{animation-delay:.15s}.va-rep.r2{animation-name:vgBonne;animation-delay:.3s}.va-rep.r3{animation-delay:.45s}
@keyframes vgSaute{0%,30%,100%{transform:none}12%{transform:translateY(-8px)}}
@keyframes vgBonne{0%,30%,100%{transform:none;filter:none}12%{transform:translateY(-8px)}55%,85%{transform:scale(1.06);filter:brightness(1.3) drop-shadow(0 0 10px #fff)}}
.va-auto{animation:vgRoule 2.2s ease-in-out infinite}
.va-auto.a1{--loin:150px}.va-auto.a2{--loin:90px;animation-delay:.2s}.va-auto.a3{--loin:200px;animation-delay:.1s}
@keyframes vgRoule{0%,100%{transform:translateX(0)}55%{transform:translateX(var(--loin))}}
.va-vitesse{animation:vgScint .4s linear infinite}
.va-grimpe{animation:vgGrimpe 2.4s ease-in-out infinite}
@keyframes vgGrimpe{0%,100%{transform:translateY(0)}40%,60%{transform:translateY(-48px)}}
.va-drapeau{transform-box:fill-box;transform-origin:left center;animation:vgDrapeau .9s ease-in-out infinite}
@keyframes vgDrapeau{0%,100%{transform:skewY(0)}50%{transform:skewY(-8deg) scaleX(.92)}}
.va-pion{transform-box:fill-box;transform-origin:center;animation:vgPion 2s ease-in-out infinite}
@keyframes vgPion{0%,100%{transform:scale(1)}25%{transform:scale(0)}55%{transform:scale(1.25)}}
.va-boule{animation:vgBoule 2s ease-in-out infinite}
@keyframes vgBoule{0%,100%{transform:translate(0,0)}35%{transform:translate(-24px,-34px)}70%{transform:translate(-46px,0)}85%{transform:translate(-50px,-8px)}}
.va-eleve{animation:vgVaAuCoin 2.8s ease-in-out infinite}
.va-eleve.e1{--x:-120px;--y:-66px}.va-eleve.e2{--x:116px;--y:-84px}.va-eleve.e3{--x:-146px;--y:42px}.va-eleve.e4{--x:136px;--y:88px}.va-eleve.e5{--x:-170px;--y:20px}
@keyframes vgVaAuCoin{0%,100%{transform:translate(0,0)}45%,70%{transform:translate(var(--x),var(--y))}}
.va-indice{transform-box:fill-box;transform-origin:center;animation:vgRetourne 2.4s ease-in-out infinite}
.va-indice.i2{animation-delay:.3s}.va-indice.i3{animation-delay:.6s}
@keyframes vgRetourne{0%,40%,100%{transform:scaleY(1)}20%{transform:scaleY(.05)}}
.va-loupe{animation:vgLoupe 2.6s ease-in-out infinite}
@keyframes vgLoupe{0%,100%{transform:translate(0,0)}33%{transform:translate(40px,-60px)}66%{transform:translate(70px,-130px)}}
.va-point{transform-box:fill-box;transform-origin:center;animation:vgPouls 1.2s ease-in-out infinite}
.va-jeton{animation:vgTombe 2.2s cubic-bezier(.5,0,.8,1) infinite}
@keyframes vgTombe{0%,10%{transform:translateY(0)}45%{transform:translateY(156px)}52%{transform:translateY(144px)}60%,88%{transform:translateY(156px);opacity:1}95%{opacity:0;transform:translateY(156px)}100%{opacity:1;transform:translateY(0)}}
.va-vagues{animation:vgVague 1.6s linear infinite}
@keyframes vgVague{to{transform:translateX(-40px)}}
.va-bateau{animation:vgFlotte 2s ease-in-out infinite}
@keyframes vgFlotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.va-cible{transform-box:fill-box;transform-origin:center;animation:vgPouls 1s ease-in-out infinite}
.va-boum{transform-box:fill-box;transform-origin:center;animation:vgBoum 1.4s ease-out infinite}
@keyframes vgBoum{0%,100%{transform:scale(1)}15%{transform:scale(1.5) rotate(15deg)}40%{transform:scale(.9)}}
.va-carte{animation:vgFlip 2.6s ease-in-out infinite}
.va-carte.c2{animation-delay:.35s}
@keyframes vgFlip{0%,35%,100%{transform:scaleX(1)}18%{transform:scaleX(0)}}
.va-lien{animation:vgLien 1.2s linear infinite}
@keyframes vgLien{to{stroke-dashoffset:-30}}
.va-bouton{animation:vgAppui 1.2s ease-in-out infinite}
.va-bouton.b2{animation-delay:.6s}
@keyframes vgAppui{0%,40%,100%{transform:translateY(0)}20%{transform:translateY(8px)}}
.va-roue{animation:vgTourne 4s cubic-bezier(.5,0,.5,1) infinite}
.va-cadenas{animation:vgCadenas 1.4s ease-in-out infinite}
@keyframes vgCadenas{0%,100%{transform:translateY(0)}30%{transform:translateY(-8px) rotate(-6deg)}}
.va-lumiere{animation:vgLumiere 2s ease-in-out infinite}
@keyframes vgLumiere{0%,100%{opacity:1}50%{opacity:.55}}
.va-lettre{animation:vgFlip 2.8s ease-in-out infinite}
.va-lettre.l1{animation-delay:.2s}.va-lettre.l2{animation-delay:.4s}.va-lettre.l3{animation-delay:.6s}.va-lettre.l4{animation-delay:.8s}
@media (prefers-reduced-motion:reduce){
  .vg [class*="va-"]{animation:none !important}
  .vg-scene svg,.vg-lustre,.mj-type.vg{transition:none !important}
  .vg:hover .vg-scene svg{transform:none}
}

/* =====================================================================
   2. EN PARTIE : un seul langage visuel, plus grand, plus simple
   ===================================================================== */
/* La ligne-guide : ce qu'il faut faire maintenant, toujours visible sous la barre du haut. */
.scene-guide{display:flex;align-items:center;gap:10px;margin:-2px 0 clamp(8px,1vw,12px);padding:8px 14px;border-radius:14px;background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.12);
  font-weight:700;font-size:clamp(.95rem,1.35cqi,1.15rem);line-height:1.3;color:rgba(255,255,255,.92)}
.scene-guide::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--or);box-shadow:0 0 0 4px rgba(255,209,102,.18);animation:guidePouls 1.8s ease-in-out infinite}
.scene-guide:empty{display:none}
.scene-guide kbd{font:700 .78em/1 var(--techno);padding:.25em .5em;border-radius:6px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3)}
@keyframes guidePouls{50%{transform:scale(.7);opacity:.6}}

/* La barre du haut : des boutons plus nets */
.btn-scene{min-height:42px;border-radius:12px;font-size:.86rem}

/* Les boutons du prof : un seul bouton principal à chaque étape.
   Tant que la réponse n'est pas affichée, « Afficher la réponse » est le bouton
   principal ; Bonne / Mauvaise restent là, en contour. Ensuite ils prennent la couleur. */
.bs{min-height:54px;font-size:clamp(1rem,1.5cqi,1.25rem);border-radius:16px}
.bs.or{box-shadow:0 5px 0 #c9a13f,0 14px 28px -12px var(--or);font-size:clamp(1.05rem,1.6cqi,1.32rem)}
.bs.or:active{transform:translateY(3px);box-shadow:0 2px 0 #c9a13f}
.bs.bon{box-shadow:0 5px 0 #0f6e43}
.bs.faux{box-shadow:0 5px 0 #8e2722}
.bs.discret,.bs.neutre{min-height:46px}
:is(.carte-q,.question,.mp-cote,.co-bas,.ech-droite,.du,.ev,.nv,.p4,.qs):has(.bs.or) .bs.bon:not(.or){background:transparent;border:2px solid #34c486;color:#9ff2c8;box-shadow:none}
:is(.carte-q,.question,.mp-cote,.co-bas,.ech-droite,.du,.ev,.nv,.p4,.qs):has(.bs.or) .bs.faux{background:transparent;border:2px solid #e2564d;color:#ffb3a9;box-shadow:none}

/* Plus grand au fond de la classe (1366 et plus) : question ≥ 44 px, réponses ≥ 30 px */
@media (min-width:1200px){
  .scene .q-texte.t-xl{font-size:clamp(56px,min(6cqi,10vh),112px)}
  .scene .q-texte.t-l{font-size:clamp(50px,min(4.6cqi,8vh),84px)}
  .scene .q-texte.t-m{font-size:clamp(46px,min(3.6cqi,6.4vh),62px)}
  .scene .q-texte.t-s{font-size:clamp(44px,min(3cqi,5.4vh),50px);line-height:1.12}
  .scene .carte-q .q-texte.t-xl{font-size:clamp(52px,min(5cqi,8.4vh),90px)}
  .scene .carte-q .q-texte.t-l{font-size:clamp(48px,min(4cqi,6.8vh),70px)}
  .scene .carte-q .q-texte.t-m,.scene .carte-q .q-texte.t-s{font-size:44px;line-height:1.12}
  .scene .q-rep{font-size:clamp(32px,min(3.3cqi,6vh),56px)}
  .scene .carte-q .q-rep{font-size:clamp(30px,min(2.6cqi,4.6vh),46px)}
  .scene .qz-txt{font-size:max(30px,1em)}
  .scene .cn-txt{font-size:clamp(30px,2.3cqi,40px)}
  .scene .qs-q{font-size:max(44px,1em);line-height:1.15}
  .scene .q-corps .q-texte.t-xl,.scene .q-corps .q-texte.t-l{font-size:clamp(48px,min(4cqi,7vh),72px)}
}
/* La réponse révélée : une carte dorée, nette, avec un petit rebond */
.q-rep{border:2px solid rgba(255,255,255,.55);box-shadow:0 14px 34px -14px var(--or),inset 0 2px 0 rgba(255,255,255,.5)}
.q-rep-sur{font-size:max(.78rem,.28em)}

/* Les cartes d'équipe et les scores : partout la même carte */
.equipe,.qz-eq,.fn-carte,.mp-eq,.tir-eq{border-radius:18px}
.equipe .pts{font-size:clamp(2rem,3.8cqi,3.4rem)}
.equipe.au-tour{transform:translateY(-3px)}
.badge-tour{font-size:.72rem}

/* Le podium : une marche plus franche */
.fin h3{font-size:clamp(2.2rem,5cqi,4.8rem)}
.marche-nom{font-size:clamp(1.2rem,2.2cqi,2rem)}

/* La minuterie (texte) : plus lisible */
.minuterie{font-size:clamp(1.15rem,2.1cqi,1.8rem)}

/* =====================================================================
   3. LES DÉCORS : chaque jeu a ses couleurs, celles de sa vignette
   ===================================================================== */
#vuePartie .scene[data-mode="jeopardy"]{--scene-a:#3b2a9a;--scene-b:#1a1450;--scene-c:#0b0828;--case:#4F6BFF;--case-b:#2A3FB8}
#vuePartie .scene[data-mode="tir"]{--scene-a:#7a2f9a;--scene-b:#2a1250;--scene-c:#140826}
#vuePartie .scene[data-mode="morpion"]{--scene-a:#136b9a;--scene-b:#06223f;--scene-c:#03121f}
#vuePartie .scene[data-mode="eclair"]{--scene-a:#159a72;--scene-b:#063a2e;--scene-c:#021c16}
#vuePartie .scene[data-mode="quiz"]{--scene-a:#8a2a7a;--scene-b:#2b0f55;--scene-c:#140628}
#vuePartie .scene[data-mode="course"]{--scene-a:#2f8f4e;--scene-b:#0d3a1f;--scene-c:#051a0d}
#vuePartie .scene[data-mode="echelle"]{--scene-a:#5b4fd9;--scene-b:#1b2a7a;--scene-c:#0b1236}
#vuePartie .scene[data-mode="bingo"]{--scene-a:#a8621a;--scene-b:#4a2306;--scene-c:#231002}
#vuePartie .scene[data-mode="coins"]{--scene-a:#9a3a24;--scene-b:#3a1006;--scene-c:#1c0703}
#vuePartie .scene[data-mode="qui"]{--scene-a:#5a3ab0;--scene-b:#1d1250;--scene-c:#0c0828}
#vuePartie .scene[data-mode="p4"]{--scene-a:#2a5fd0;--scene-b:#0b2260;--scene-c:#04102e}
#vuePartie .scene[data-mode="navale"]{--scene-a:#0d6aa8;--scene-b:#05264a;--scene-c:#021326}
#vuePartie .scene[data-mode="memoire"]{--scene-a:#6a3ed6;--scene-b:#22106a;--scene-c:#0f0636}
#vuePartie .scene[data-mode="duel"]{--scene-a:#3a3fb0;--scene-b:#161048;--scene-c:#0a0824}
#vuePartie .scene[data-mode="evasion"]{--scene-a:#3a4590;--scene-b:#11163f;--scene-c:#070a20}

/* --- Au téléphone : des vignettes en largeur, compactes (la carte « à la une » reste grande) --- */
@media (max-width:560px){
  .mj-famille .mj-type.vg .mj-choisir{display:grid;grid-template-columns:132px minmax(0,1fr);align-items:stretch}
  .mj-famille .vg-scene{aspect-ratio:auto;min-height:100%}
  .mj-famille .vg-scene svg{object-fit:cover}
  .mj-famille .vg-scene::after{display:none}
  .mj-famille .vg-badge{left:8px;top:8px;font-size:.62rem;padding:4px 7px}
  .mj-famille .vg-corps{padding:12px 12px 4px;gap:6px}
  .mj-famille .vg-titre{font-size:1.2rem}
  .mj-famille .vg-accroche{font-size:.84rem;line-height:1.35}
  .mj-famille .vg-pastille{font-size:.7rem;padding:4px 8px}
  .mj-famille .vg .mj-go{min-height:40px;font-size:1rem}
  .mj-famille .vg .mj-type-bas{padding:6px 12px 10px;min-height:0}
  .mj-familles{gap:36px}
  .mj-famille .mj-types{gap:12px}
}
@media (max-width:760px){ .mj-boite-btn{bottom:96px} }

/* =====================================================================
   4. TOUT TIENT DANS L'ÉCRAN (1366 × 768) : rien ne déborde, rien ne se chevauche
   ===================================================================== */
.scene-guide{padding:5px 12px;margin:0 0 8px;min-height:34px}
/* Les panneaux par-dessus le plateau (Jeopardy) commencent sous la ligne-guide. */
.scene .question{top:var(--haut-guide,0)}
/* Les boutons du prof sur une seule rangée quand la place le permet. */
.scene .q-bas{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 12px}
.scene .q-bas > .juge{flex:0 1 auto}
/* Les mots ne se coupent jamais au milieu. */
.scene .qz-txt,.scene .q-texte,.scene .q-rep{overflow-wrap:break-word;word-break:normal;hyphens:manual}
/* Quiz : les équipes et « Révéler la réponse » sur la même rangée. */
.scene .qz{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-auto-rows:auto;align-content:start;column-gap:14px}
.scene .qz > *{grid-column:1 / -1}
.scene .qz > .qz-equipes{grid-column:1;justify-content:flex-start;align-self:center}
.scene .qz > .qz-outils{grid-column:2;align-self:center}
/* La course : les choix en colonne, plus lisibles. */
.scene .co-choix{grid-template-columns:1fr;gap:8px;align-content:center}
.scene .co-choix .qz-rep{min-height:0;padding:8px 14px}
.scene .co-choix .qz-lettre{width:42px}
/* La consigne écrite sous la question répète la ligne-guide : on la retire sur grand écran. */
@media (min-width:1200px){
  .scene .ech-bas .qz-consigne,.scene .co-bas > .qz-consigne,.scene .qz-centre > .qz-consigne{display:none}
}
.scene .ech-bas{flex-wrap:nowrap}
.scene .ech-bas .q-bas{flex:0 1 auto;justify-content:flex-end}
.scene .co-bas{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px 14px}
@media (max-height:820px) and (min-width:701px){
  .scene .co-piste{--hv:clamp(34px,calc(20vh / var(--n)),46px);padding:8px 12px}
  .scene .mp-grille{width:clamp(270px,min(40cqi,calc(100vh - 320px)),780px)}
  .scene .p4{grid-template-columns:minmax(0,.9fr) minmax(320px,1.1fr)}
  .scene .p4-grille{width:min(100%,calc((100vh - 330px) * 1.05))}
  .scene .nv-grille{width:min(100%,25vh)}
  .scene .nv-mer{padding:6px 10px;gap:4px}
}
.scene .qz > .qz-equipes{justify-content:center}
.scene .mp-cat{overflow-wrap:break-word;word-break:normal;hyphens:auto;font-size:clamp(.8rem,1.35cqi,1.25rem)}
@media (max-height:820px) and (min-width:1200px){
  /* Tic-tac-toe : les boutons du prof sur une seule rangée sous « Pour la case… ». */
  .scene .mp-q .q-bas > .juge,.scene .mp-q .q-bas > .q-outils{display:contents}
  .scene .mp-eq{padding:6px 12px}
  .scene .qz-question.t-xl,.scene .qz-question.t-l{font-size:clamp(48px,min(4.4cqi,7vh),60px)}
  .scene .nv-grille{width:min(100%,22vh)}
}
/* La musique dans la barre : allumée = verte ; coupée = barrée. */
.mj-musique.dans-barre[aria-pressed="false"]{text-decoration:line-through;text-decoration-thickness:2px;color:rgba(255,255,255,.7)}
@media (max-height:820px) and (min-width:1200px){
  .scene .qz-rep{padding:8px 14px;line-height:1.12}
  .scene .qz-lettre{width:44px}
  .scene .qz-reponses{gap:10px}
  .scene .ech-joker{padding:4px 10px 4px 4px}
}
@media (max-height:820px) and (min-width:1200px){ .scene .piste{height:clamp(84px,13vh,130px)} }
/* La barre du jeu tient sur une ligne : le titre se raccourcit au besoin, les boutons restent. */
@media (min-width:1100px){
  .scene-haut{flex-wrap:nowrap}
  .scene-titre{flex:1 1 0;flex-wrap:nowrap;min-width:0}
  .scene-titre .badge-mode{flex:none}
  .scene-haut h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .scene-haut .groupe{flex:none;flex-wrap:nowrap;gap:5px}
}
@media (min-width:1100px) and (max-width:1500px){ .btn-scene{padding:6px 10px;gap:5px} }
/* Le duel : l'étiquette « Répond » ne mord plus sur la ligne-guide. */
.scene .du{padding-top:12px}
/* Les 4 coins : la question au milieu, en bande, entre les quatre coins ; rien ne se chevauche. */
@media (min-width:1000px){
  .scene .cn{grid-template-rows:minmax(84px,auto) auto minmax(84px,auto);grid-template-areas:"a b" "m m" "c d";min-height:0;gap:10px}
  .scene .cn-coin.c0{grid-area:a}.scene .cn-coin.c1{grid-area:b}.scene .cn-coin.c2{grid-area:c}.scene .cn-coin.c3{grid-area:d}
  .scene .cn-coin{align-items:center;padding:10px 18px}
  .scene .cn-coin.c2 .cn-txt,.scene .cn-coin.c3 .cn-txt{flex-direction:column}
  .scene .cn-forme{width:clamp(44px,4.4cqi,72px);height:clamp(44px,4.4cqi,72px)}
  .scene .cn-txt{max-width:none}
  .scene .cn-centre{grid-area:m;position:relative;left:auto;top:auto;transform:none;width:auto;max-height:none;overflow:visible;box-shadow:0 20px 40px -24px rgba(0,0,0,.7)}
}
@media (min-width:1200px){
  .scene .cn-centre .q-texte.t-xl,.scene .cn-centre .q-texte.t-l{font-size:clamp(46px,min(3.6cqi,6.4vh),62px)}
  .scene .cn-centre .q-texte.t-m,.scene .cn-centre .q-texte.t-s{font-size:44px}
}
@media (min-width:1000px){ .scene .cn-txt{flex:1 1 auto;min-width:0;text-wrap:pretty} }