/* Ogrelo · LE player de quiz (composant commun, chargé en DERNIER : il l'emporte sur les anciens styles de chaque mode).
   Référence : le quiz de fiche de cours (landing/img/app-fiche-quiz.webp). Mode d'emploi : docs/PLAYER-QUIZ.md ; aides HTML : player.js (window.PlayerQuiz).
   Nouvelles classes : .qp-fond .qp-tete .qp-retour .qp-titre .qp-barre .qp-prog .qp-num .qp-sig .qp-jeu .qp-pts .qp-chrono .qp-question .qp-tag
   .qp-choix .qp-opt .qp-l .qp-valider .qp-expl .qp-fin. Les anciens players (fiche, exercices, cartes, langues, invité, défi, classe) sont
   rattachés ici par leurs classes existantes : mêmes jetons, même allure, en clair et en sombre. Couleurs : UNIQUEMENT des variables. */

/* ---------- 1. jetons (clair) ---------- */
:root{
  --qp-fond:var(--paper);
  --qp-b1:color-mix(in srgb,var(--sun) 22%,transparent);
  --qp-b2:color-mix(in srgb,var(--ogre) 14%,transparent);
  --qp-b3:color-mix(in srgb,var(--grape) 9%,transparent);
  --qp-bulles:radial-gradient(circle at 0% 0%,var(--qp-b1) 0 170px,transparent 171px),radial-gradient(circle at 108% 36%,var(--qp-b2) 0 150px,transparent 151px),radial-gradient(circle at -8% 102%,var(--qp-b3) 0 150px,transparent 151px);
  --qp-carte:var(--card);
  --qp-bord:var(--line);
  --qp-ombre:color-mix(in srgb,var(--ink) 16%,var(--line));
  --qp-h:5px;
  --qp-r:18px;
  /* pastilles de lettre : lettre blanche lisible (contraste ≥ 4,5:1) */
  --qp-la:#1F72B0;--qp-lb:#B4520F;--qp-lc:#B82A5C;--qp-ld:#6A3AB0;
  --qp-lettre:var(--card);
  --qp-sel:var(--sky);
  --qp-sel-bg:color-mix(in srgb,var(--sky) 13%,var(--card));
  --qp-ok:var(--ok);--qp-ok-bg:var(--ok-bg);--qp-ko:var(--ko);--qp-ko-bg:var(--ko-bg);
  --qp-valider:var(--ogre-d);
  --qp-valider-ombre:color-mix(in srgb,var(--ogre-d) 62%,var(--ink));
  --qp-valider-txt:var(--card);
  --qp-sig:var(--sun);
  --qp-sig-ombre:color-mix(in srgb,var(--sun) 55%,var(--ink));
  --qp-sig-txt:var(--ink);
  --qp-pts:var(--grape);
  --qp-pts-txt:color-mix(in srgb,var(--grape) 82%,var(--ink));
  --qp-serie:linear-gradient(90deg,var(--sun),var(--pumpkin) 45%,var(--ko));
  --qp-piste:color-mix(in srgb,var(--ink) 9%,var(--line));
  --qp-focus:var(--sky);
  --qp-fonce:var(--ink);
  /* carte question (mêmes valeurs que tuiles.css, ici pour les pages qui ne la chargent pas : /classe, /prof) */
  --q-bg:color-mix(in srgb,var(--ogre) 9%,var(--card));--q-bord:color-mix(in srgb,var(--ogre) 42%,var(--line));--q-ombre:color-mix(in srgb,var(--ogre-d) 55%,var(--line));--q-tag:var(--ogre-d);
}
/* ---------- 1 bis. jetons (sombre) : fond teinté, bulles atténuées, cartes sombres en relief ---------- */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --qp-b1:color-mix(in srgb,var(--sun) 7%,transparent);--qp-b2:color-mix(in srgb,var(--ogre) 9%,transparent);--qp-b3:color-mix(in srgb,var(--grape) 9%,transparent);
  --qp-ombre:var(--line);--qp-fonce:var(--paper);
  --q-bg:color-mix(in srgb,var(--ogre) 12%,var(--card));--q-bord:color-mix(in srgb,var(--ogre) 40%,var(--line));--q-ombre:color-mix(in srgb,var(--ogre-d) 45%,var(--paper));--q-tag:var(--ogre);
--qp-bord:color-mix(in srgb,var(--line) 70%,var(--card));
  --qp-sel-bg:color-mix(in srgb,var(--sky) 22%,var(--card));
  --qp-lettre:var(--ink);
  --qp-valider-txt:var(--ink);
  --qp-valider:color-mix(in srgb,var(--ogre-d) 72%,var(--paper));
  --qp-valider-ombre:color-mix(in srgb,var(--ogre-d) 40%,var(--paper));
  --qp-sig-txt:var(--paper);
  --qp-sig-ombre:color-mix(in srgb,var(--sun) 45%,var(--paper));
  --qp-pts-txt:color-mix(in srgb,var(--grape) 55%,var(--ink));
  --qp-piste:color-mix(in srgb,var(--ink) 12%,var(--card))}}
:root[data-theme="dark"]{
  --qp-b1:color-mix(in srgb,var(--sun) 7%,transparent);--qp-b2:color-mix(in srgb,var(--ogre) 9%,transparent);--qp-b3:color-mix(in srgb,var(--grape) 9%,transparent);
  --qp-ombre:var(--line);--qp-fonce:var(--paper);
  --q-bg:color-mix(in srgb,var(--ogre) 12%,var(--card));--q-bord:color-mix(in srgb,var(--ogre) 40%,var(--line));--q-ombre:color-mix(in srgb,var(--ogre-d) 45%,var(--paper));--q-tag:var(--ogre);
--qp-bord:color-mix(in srgb,var(--line) 70%,var(--card));
  --qp-sel-bg:color-mix(in srgb,var(--sky) 22%,var(--card));
  --qp-lettre:var(--ink);
  --qp-valider-txt:var(--ink);
  --qp-valider:color-mix(in srgb,var(--ogre-d) 72%,var(--paper));
  --qp-valider-ombre:color-mix(in srgb,var(--ogre-d) 40%,var(--paper));
  --qp-sig-txt:var(--paper);
  --qp-sig-ombre:color-mix(in srgb,var(--sun) 45%,var(--paper));
  --qp-pts-txt:color-mix(in srgb,var(--grape) 55%,var(--ink));
  --qp-piste:color-mix(in srgb,var(--ink) 12%,var(--card))}

/* ---------- 2. fond à bulles (plein écran : exercices, cartes, langues, défi, classe) ---------- */
.qp-fond,.exo-full{background-color:var(--qp-fond);background-image:var(--qp-bulles);background-attachment:fixed;background-repeat:no-repeat}

/* ---------- 3. en-tête : retour rond, titre display ---------- */
.qp-tete,.exo-full-top{display:flex!important;align-items:center;gap:12px;margin:0 0 12px}
.exo-full-top{flex-direction:row-reverse;justify-content:flex-end}
.qp-titre,.exo-full-top b{flex:1;min-width:0;font-family:var(--display);font-weight:800;font-size:1.3rem!important;line-height:1.2;color:var(--ink);overflow-wrap:anywhere}
.qp-retour,.exo-full-top .g-x{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--qp-bord)!important;background:var(--qp-carte)!important;color:var(--ink)!important;box-shadow:0 4px 0 var(--qp-ombre)!important;transition:transform .08s ease,box-shadow .08s ease}
.qp-retour:active,.exo-full-top .g-x:active{transform:translateY(3px);box-shadow:0 1px 0 var(--qp-ombre)!important}

/* ---------- 4. barre de progression + numéro + bouton « signaler » jaune ---------- */
.qp-barre,.qbar{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.qp-prog,.exo-full .exo-bar{flex:1;height:16px!important;border-radius:999px!important;background:var(--qp-piste)!important;overflow:hidden;margin:0 0 14px!important}
.qp-barre .qp-prog{margin:0}
.qp-prog i,.exo-full .exo-bar i{display:block;height:100%;min-width:10px;border-radius:999px!important;background:var(--ogre)!important;box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--qp-fonce) 14%,transparent);transition:width .3s ease}
.qp-num,.qnum{font-family:var(--display);font-weight:800;white-space:nowrap;color:var(--ink)}
.qp-sig .sig-btn,.qbar .sig-btn,.exo-top .sig-btn,.df-q .sig-btn,.lg-qbar .sig-btn,.bv-q .sig-btn,.qp-sig.sig-btn{
  width:44px!important;height:44px!important;min-width:44px!important;padding:0!important;margin:0!important;border-radius:50%!important;opacity:1!important;
  background:var(--qp-sig)!important;color:var(--qp-sig-txt)!important;border:0!important;box-shadow:0 4px 0 var(--qp-sig-ombre)!important;transition:transform .08s ease,box-shadow .08s ease}
.qp-sig .sig-btn:active,.qbar .sig-btn:active,.exo-top .sig-btn:active,.df-q .sig-btn:active,.lg-qbar .sig-btn:active,.bv-q .sig-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--qp-sig-ombre)!important}
.qp-sig .sig-btn.fait,.qbar .sig-btn.fait,.exo-top .sig-btn.fait,.df-q .sig-btn.fait{background:var(--ogre)!important;color:var(--qp-valider-txt)!important}
.exo-top .exo-top-d{gap:10px!important;font-family:var(--display);font-size:.95rem;color:var(--ink)}
.df-q .sig-btn{top:-14px!important;right:-8px!important}
.df-q.petit .sig-btn{top:4px!important;right:4px!important}

/* ---------- 5. points + barre de série / chrono multicolore avec compteur ---------- */
.qp-jeu,.q-jeu{display:flex;gap:10px;justify-content:space-between;align-items:center;margin:4px 2px 8px;font-family:var(--display);font-weight:800}
.qp-pts,.q-pts{display:flex;gap:6px;align-items:center;color:var(--qp-pts-txt)!important}
.qp-chrono,.q-chrono,.df .df-chrono{position:relative!important;height:22px!important;border-radius:999px!important;background:var(--qp-piste)!important;overflow:visible!important;margin:0 34px 16px 0!important;animation:none}
.qp-chrono i,.q-chrono i,.df .df-chrono i{position:absolute!important;inset:0 auto 0 0!important;border-radius:999px!important;background:var(--qp-serie)!important;box-shadow:inset 0 -4px 0 color-mix(in srgb,var(--qp-fonce) 14%,transparent),inset 0 4px 0 color-mix(in srgb,var(--card) 30%,transparent)}
.qp-chrono b,.q-chrono b,.df .df-chrono b{position:absolute!important;inset:auto!important;left:calc(100% + 10px)!important;top:50%!important;transform:translateY(-50%)!important;display:block!important;background:none!important;padding:0!important;min-width:0!important;color:var(--ink)!important;font-family:var(--display);font-size:1rem!important;text-shadow:none!important}

/* ---------- 6. carte question : vert pâle (vert sombre en sombre), étiquette, énoncé gras ---------- */
.qp-question,.df .df-q,.df-q,.ie-enonce{background:var(--q-bg)!important;border:2px solid var(--q-bord)!important;border-radius:var(--qp-r)!important;box-shadow:0 4px 0 var(--q-ombre)!important;color:var(--ink)!important;
  font-family:var(--display);font-weight:800;font-size:1.25rem!important;line-height:1.35;padding:18px!important;margin:0 0 22px!important;text-align:left!important;overflow-wrap:anywhere;position:relative}
.qp-question h2{font:inherit;margin:10px 0 0}
.qp-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;background:var(--card);border:2px solid var(--q-bord);color:var(--q-tag);font-size:.76rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;line-height:1.2}

/* ---------- 7. réponses : cartes blanches en relief, pastille de couleur par lettre ---------- */
.qp-choix,.opts,.ie-choix{display:grid;gap:12px;margin:0 0 14px}
.qp-opt,.opt,.ie-c,.exo-ch button:not([data-carte]),.df-choix:not(.cl-tt) .df-c{
  background:var(--qp-carte)!important;color:var(--ink)!important;border:2px solid var(--qp-bord)!important;border-radius:var(--qp-r)!important;
  box-shadow:0 var(--qp-h) 0 var(--qp-ombre)!important;min-height:56px;min-width:0;text-align:left;font-weight:700;overflow-wrap:anywhere;opacity:1;transition:transform .08s ease,box-shadow .08s ease,background-color .15s}
:where(.qp-opt,.opt,.ie-c,.df-c){--qp-c:var(--qp-la)}
.qp-choix>:nth-child(4n+2),.opts>.opt:nth-child(4n+2),.ie-choix>.ie-c:nth-child(4n+2),.df-choix .df-c.c1{--qp-c:var(--qp-lb)}
.qp-choix>:nth-child(4n+3),.opts>.opt:nth-child(4n+3),.ie-choix>.ie-c:nth-child(4n+3),.df-choix .df-c.c2{--qp-c:var(--qp-lc)}
.qp-choix>:nth-child(4n+4),.opts>.opt:nth-child(4n+4),.ie-choix>.ie-c:nth-child(4n+4),.df-choix .df-c.c3{--qp-c:var(--qp-ld)}
.qp-l,.opt .l,.ie-l,.df-choix:not(.cl-tt) .df-c .sh{flex:none;width:36px!important;height:36px!important;border-radius:12px!important;display:grid;place-items:center;background:var(--qp-c)!important;color:var(--qp-lettre)!important;
  font-family:var(--display);font-weight:800;box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--qp-fonce) 25%,transparent)}
.df-choix:not(.cl-tt) .df-c .sh svg,.df-choix:not(.cl-tt) .df-c .sh i{fill:var(--qp-lettre)!important;color:var(--qp-lettre)!important}
.exo-ch button:not([data-carte]):nth-child(4n+1)::before{background:var(--qp-la)!important}.exo-ch button:not([data-carte]):nth-child(4n+2)::before{background:var(--qp-lb)!important}
.exo-ch button:not([data-carte]):nth-child(4n+3)::before{background:var(--qp-lc)!important}.exo-ch button:not([data-carte]):nth-child(4n+4)::before{background:var(--qp-ld)!important}
.exo-ch button:not([data-carte])::before{width:36px!important;height:36px!important;border-radius:12px!important;color:var(--qp-lettre)!important;box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--qp-fonce) 25%,transparent)}
.ie-c,.df-choix:not(.cl-tt) .df-c{display:flex!important;flex-direction:row!important;align-items:center!important;gap:12px!important;padding:12px 14px!important;font-size:1rem!important}
.df-choix:not(.cl-tt) .df-c>span:not(.sh):not(.df-mk),.df-choix:not(.cl-tt) .df-c .tx{flex:1;text-align:left!important}
.df-choix.damier:not(.cl-tt) .df-c{min-height:72px}
.df-choix:not(.cl-tt) .df-c :not(.sh):not(.sh *):not(.df-mk):not(.df-mk *){color:inherit!important}
/* appui : la carte descend */
.qp-opt:not(:disabled):active,.opt:not(:disabled):active,.ie-c:not(:disabled):active,.exo-ch button:not(:disabled):active,.df-choix:not(.cl-tt) .df-c:not(:disabled):active{transform:translateY(calc(var(--qp-h) - 1px));box-shadow:0 1px 0 var(--qp-ombre)!important}
/* sélectionné : bleu clair */
.qp-opt.sel,.qp-opt[aria-checked="true"],.opt.sel,.exo-ch button.sel,.df-choix:not(.cl-tt) .df-c.pris{background:var(--qp-sel-bg)!important;border-color:var(--qp-sel)!important;box-shadow:0 var(--qp-h) 0 color-mix(in srgb,var(--qp-sel) 55%,var(--qp-ombre))!important;transform:none}
/* corrigé : juste / faux / atténué */
.qp-opt.good,.opt.good,.ie-c.ok,.exo-ch button.good,.df-choix:not(.cl-tt) .df-c.bon{background:var(--qp-ok-bg)!important;border-color:var(--qp-ok)!important;box-shadow:0 var(--qp-h) 0 color-mix(in srgb,var(--qp-ok) 60%,var(--qp-ombre))!important;animation:none}
.qp-opt.bad,.opt.bad,.ie-c.ko,.exo-ch button.bad,.df-choix:not(.cl-tt) .df-c.faux{background:var(--qp-ko-bg)!important;border-color:var(--qp-ko)!important;box-shadow:0 var(--qp-h) 0 color-mix(in srgb,var(--qp-ko) 55%,var(--qp-ombre))!important;text-decoration:none}
.qp-opt.good .qp-l,.opt.good .l,.ie-c.ok .ie-l,.df-choix:not(.cl-tt) .df-c.bon .sh{background:var(--qp-ok)!important}
.qp-opt.bad .qp-l,.opt.bad .l,.ie-c.ko .ie-l,.df-choix:not(.cl-tt) .df-c.faux .sh{background:var(--qp-ko)!important}
.qp-opt.dim,.opt.dim,.exo-ch button.dim,.df-choix:not(.cl-tt) .df-c.eteint{opacity:.55!important}
/* direct : sur le téléphone de l'élève, les grandes tuiles sans texte gardent la couleur et le symbole de la réponse (mêmes couleurs que les pastilles du tableau) */
.cl-tt .df-c.c0{--qp-c:var(--qp-la)}.cl-tt .df-c.c1{--qp-c:var(--qp-lb)}.cl-tt .df-c.c2{--qp-c:var(--qp-lc)}.cl-tt .df-c.c3{--qp-c:var(--qp-ld)}
.cl-tt .df-c{background:var(--qp-c)!important;box-shadow:0 6px 0 color-mix(in srgb,var(--qp-c) 60%,var(--qp-fonce))!important;color:var(--qp-lettre)!important;border-color:transparent!important}
.cl-tt .df-c.pris{border-color:var(--card)!important;box-shadow:0 0 0 4px var(--qp-sel),0 6px 0 color-mix(in srgb,var(--qp-c) 60%,var(--qp-fonce))!important}
.cl-tt .df-c.eteint{opacity:.35!important}

/* ---------- 8. bouton Valider : gros, vert, en relief ---------- */
.qp-valider,#qVal,.exo-valide,.exo-ok2{display:block;width:100%;min-height:56px;margin-top:18px;border:0;border-radius:var(--qp-r);background:var(--qp-valider)!important;color:var(--qp-valider-txt)!important;
  font-family:var(--display);font-weight:800;font-size:1.15rem;box-shadow:0 5px 0 var(--qp-valider-ombre)!important;transition:transform .08s ease,box-shadow .08s ease}
.qp-valider:not(:disabled):active,#qVal:not(:disabled):active,.exo-valide:not(:disabled):active,.exo-ok2:not(:disabled):active{transform:translateY(4px);box-shadow:0 1px 0 var(--qp-valider-ombre)!important}
.qp-valider:disabled,#qVal:disabled,.exo-valide:disabled,.exo-ok2:disabled{opacity:.5;box-shadow:0 5px 0 var(--qp-valider-ombre)!important}

/* ---------- 9. explication après la réponse + écran de fin ---------- */
.qp-expl{display:flex;gap:10px;align-items:flex-start;border:2px solid;border-radius:20px;padding:12px 14px;margin:0 0 14px;color:var(--ink)}
.qp-expl.good{background:var(--qp-ok-bg);border-color:var(--qp-ok);box-shadow:0 var(--qp-h) 0 color-mix(in srgb,var(--qp-ok) 55%,var(--qp-ombre))}
.qp-expl.bad{background:var(--qp-ko-bg);border-color:var(--qp-ko);box-shadow:0 var(--qp-h) 0 color-mix(in srgb,var(--qp-ko) 50%,var(--qp-ombre))}
.ie-expl{border-radius:16px}
.qp-fin{background:var(--qp-carte);border:2px solid var(--qp-bord);border-radius:24px;box-shadow:0 var(--qp-h) 0 var(--qp-ombre);padding:22px;text-align:center}

/* ---------- 10. textes longs : formules, arabe, chinois, japonais ---------- */
.qp-opt>span,.opt>span:not(.l),.ie-c>span:not(.ie-l),.exo-ch button,.df-c .tx{min-width:0;overflow-wrap:anywhere;word-break:normal;line-break:auto}
.qp-question .katex-display,.qcard .katex-display,.exo-q .katex-display,.df-q .katex-display,.opt .katex-display,.exo-ch .katex-display{overflow-x:auto;overflow-y:hidden;max-width:100%}
.qp-opt :lang(ar),.opt :lang(ar),.exo-ch :lang(ar){line-height:1.7}
.qp-opt :is(:lang(zh),:lang(ja)),.opt :is(:lang(zh),:lang(ja)),.exo-ch :is(:lang(zh),:lang(ja)){word-break:break-all;line-break:strict}

/* ---------- 11. accessibilité : focus visible, cibles ≥ 44 px, mouvement réduit ---------- */
.qp-opt:focus-visible,.opt:focus-visible,.ie-c:focus-visible,.exo-ch button:focus-visible,.df-c:focus-visible,.qp-valider:focus-visible,#qVal:focus-visible,.exo-valide:focus-visible,.exo-ok2:focus-visible,.qp-retour:focus-visible,.exo-full-top .g-x:focus-visible,.sig-btn:focus-visible{
  outline:3px solid var(--qp-focus)!important;outline-offset:3px!important}
.qp-opt,.opt,.ie-c,.exo-ch button,.df-c{min-height:56px}
@media (prefers-reduced-motion: reduce){
  .qp-opt,.opt,.ie-c,.exo-ch button,.df-c,.qp-valider,#qVal,.exo-valide,.exo-ok2,.qp-retour,.exo-full-top .g-x,.sig-btn,.qp-prog i,.exo-full .exo-bar i{transition:none!important;animation:none!important}
  .qp-opt:active,.opt:active,.ie-c:active,.exo-ch button:active,.df-c:active,.qp-valider:active,#qVal:active,.exo-valide:active,.exo-ok2:active{transform:none!important}
  .q-chrono,.q-chrono.urgent,.df-chrono,.df-chrono.urgent,.q-serie{animation:none!important}}

/* ---------- 12. écran de fin PODIUM (tout défi) : 3 marches animées, 1er au centre et plus haut, confettis, classement complet, actions ---------- */
.qp-podium{text-align:center;padding:4px 0 8px}
.qp-pod-titre{font-family:var(--display);font-weight:800;font-size:1.6rem;line-height:1.2;margin:4px 0 6px;color:var(--ink)}
.qp-pod-attente{display:inline-flex;align-items:center;gap:8px;margin:0 0 6px;padding:6px 14px;border-radius:999px;background:var(--qp-sel-bg);border:2px solid var(--qp-sel);color:var(--ink);font-weight:800;font-size:.92rem}
.qp-pod-attente i{width:10px;height:10px;border-radius:50%;background:var(--qp-sel);animation:qpPouls 1.2s ease-in-out infinite}
.qp-pod-scene{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:8px;margin:22px 0 22px;min-height:240px}
.qp-pod-scene.n1{grid-template-columns:minmax(0,1fr);max-width:140px;margin-inline:auto}.qp-pod-scene.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.qp-pod-place{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.qp-pod-av{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:var(--qp-carte);border:3px solid var(--qp-bord);box-shadow:0 4px 0 var(--qp-ombre);margin-bottom:4px;animation:qpSaute .5s calc(var(--i) * .15s + .5s) both}
.qp-pod-av svg,.qp-pod-av img{width:100%;height:100%;display:block}
.qp-pod-place.r1 .qp-pod-av{width:76px;height:76px;border-color:var(--sun)}
.qp-pod-place.moi .qp-pod-av{border-color:var(--qp-sel);box-shadow:0 0 0 3px var(--qp-sel-bg),0 4px 0 var(--qp-ombre)}
.qp-pod-ini{font-family:var(--display);font-weight:800;font-size:1.6rem;color:var(--ink)}
.qp-pod-nom{font-family:var(--display);font-weight:800;font-size:.98rem;line-height:1.15;max-width:100%;overflow-wrap:anywhere;color:var(--ink)}
.qp-pod-nom small{font-family:var(--body);font-weight:700;color:var(--soft)}
.qp-pod-pts{font-weight:800;font-size:.86rem;color:var(--qp-pts-txt)}
.qp-pod-marche{width:100%;height:var(--h);margin-top:6px;border-radius:16px 16px 6px 6px;display:grid;place-items:start center;padding-top:8px;font-family:var(--display);font-weight:800;font-size:1.7rem;
  transform-origin:bottom;animation:qpMonte .6s calc(var(--i) * .15s) cubic-bezier(.2,.9,.3,1.2) both;box-shadow:inset 0 -6px 0 color-mix(in srgb,var(--qp-fonce) 18%,transparent)}
.qp-pod-place.r1{--h:132px}.qp-pod-place.r2{--h:96px}.qp-pod-place.r3{--h:72px}
.qp-pod-place.r1 .qp-pod-marche{background:var(--sun);color:var(--qp-sig-txt)}
.qp-pod-place.r2 .qp-pod-marche{background:color-mix(in srgb,var(--sky) 30%,var(--qp-carte));color:var(--ink)}
.qp-pod-place.r3 .qp-pod-marche{background:color-mix(in srgb,var(--pumpkin) 45%,var(--qp-carte));color:var(--ink)}
.qp-pod-place.moi .qp-pod-marche{outline:3px solid var(--qp-sel);outline-offset:-3px}
.qp-podium.provisoire .qp-pod-marche{background-image:repeating-linear-gradient(135deg,transparent 0 10px,color-mix(in srgb,var(--qp-carte) 30%,transparent) 10px 20px)}
/* confettis du 1er */
.qp-confettis{position:absolute;inset:-34px -24px auto;height:190px;pointer-events:none}
.qp-confettis i{position:absolute;top:0;width:8px;height:12px;border-radius:2px;background:var(--qp-la);opacity:0;animation:qpConfetti 1.8s calc(.9s + var(--d,0s)) ease-in 2 both}
.qp-confettis i:nth-child(6n+2){background:var(--qp-lb)}.qp-confettis i:nth-child(6n+3){background:var(--qp-lc)}.qp-confettis i:nth-child(6n+4){background:var(--qp-ld)}.qp-confettis i:nth-child(6n+5){background:var(--sun)}.qp-confettis i:nth-child(6n){background:var(--ogre)}
.qp-confettis i:nth-child(1){left:4%}.qp-confettis i:nth-child(2){left:12%;--d:.3s}.qp-confettis i:nth-child(3){left:20%;--d:.1s}.qp-confettis i:nth-child(4){left:28%;--d:.5s}.qp-confettis i:nth-child(5){left:36%;--d:.2s}.qp-confettis i:nth-child(6){left:44%;--d:.6s}.qp-confettis i:nth-child(7){left:52%;--d:.15s}
.qp-confettis i:nth-child(8){left:60%;--d:.45s}.qp-confettis i:nth-child(9){left:68%;--d:.05s}.qp-confettis i:nth-child(10){left:76%;--d:.35s}.qp-confettis i:nth-child(11){left:84%;--d:.25s}.qp-confettis i:nth-child(12){left:92%;--d:.55s}.qp-confettis i:nth-child(13){left:16%;--d:.7s}.qp-confettis i:nth-child(14){left:72%;--d:.8s}
/* classement complet (plus de 3 joueurs) : la ligne du joueur mise en avant */
.qp-pod-st{font-family:var(--display);font-size:1.05rem;text-align:left;margin:0 0 8px;color:var(--ink)}
.qp-classement{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:8px;text-align:left}
.qp-classement li{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 12px;border-radius:16px;background:var(--qp-carte);border:2px solid var(--qp-bord);box-shadow:0 3px 0 var(--qp-ombre);color:var(--ink)}
.qp-classement li.moi{background:var(--qp-sel-bg);border-color:var(--qp-sel);box-shadow:0 3px 0 color-mix(in srgb,var(--qp-sel) 55%,var(--qp-ombre))}
.qp-cl-r{flex:none;width:28px;font-family:var(--display);font-weight:800;text-align:center}
.qp-cl-av{flex:none;width:36px;height:36px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--qp-piste)}
.qp-cl-av svg,.qp-cl-av img{width:100%;height:100%}.qp-cl-av .qp-pod-ini{font-size:1rem}
.qp-classement b{flex:1;min-width:0;overflow-wrap:anywhere}
.qp-cl-p{flex:none;font-weight:800;color:var(--qp-pts-txt)}
.qp-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* actions : Revanche (vert), Nouveau défi, Garde tes scores (invité) */
.qp-pod-actions{display:grid;gap:12px}
.qp-pod-actions .qp-valider{margin-top:0}
.qp-btn2{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;border-radius:var(--qp-r);border:2px solid var(--qp-bord);background:var(--qp-carte);color:var(--ink);font-family:var(--display);font-weight:800;font-size:1.05rem;box-shadow:0 4px 0 var(--qp-ombre);transition:transform .08s ease,box-shadow .08s ease}
.qp-btn2:active{transform:translateY(3px);box-shadow:0 1px 0 var(--qp-ombre)}
.qp-btn2.qp-garder{border-color:var(--sun);background:color-mix(in srgb,var(--sun) 16%,var(--qp-carte))}
.qp-btn2:focus-visible{outline:3px solid var(--qp-focus);outline-offset:3px}
/* écran de résultats du quiz solo (fiche, exercices) : même carte que le player */
.result{background:var(--qp-carte)!important;border:2px solid var(--qp-bord)!important;box-shadow:0 var(--qp-h) 0 var(--qp-ombre)!important;border-radius:24px!important}
@keyframes qpMonte{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes qpSaute{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
@keyframes qpConfetti{0%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translateY(180px) rotate(540deg)}}
@keyframes qpPouls{50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){.qp-pod-marche,.qp-pod-av,.qp-pod-attente i,.qp-btn2{animation:none!important;transition:none!important}.qp-confettis{display:none}.qp-btn2:active{transform:none}}
/* podiums existants (défi, classe) : mêmes marches, mêmes couleurs que le podium commun */
.df-pod .socle{border-radius:16px 16px 6px 6px!important;font-family:var(--display);box-shadow:inset 0 -6px 0 color-mix(in srgb,var(--qp-fonce) 18%,transparent)!important}
.df-pod.p1 .socle{background:var(--sun)!important;color:var(--qp-sig-txt)!important}
.df-pod.p2 .socle{background:color-mix(in srgb,var(--sky) 30%,var(--qp-carte))!important;color:var(--ink)!important}
.df-pod.p3 .socle{background:color-mix(in srgb,var(--pumpkin) 45%,var(--qp-carte))!important;color:var(--ink)!important}
.df-pod.moi .df-av{box-shadow:0 0 0 3px var(--qp-sel)}

/* ---------- 13. points + barre de série multicolore ajoutées à tous les players (player.js : affichage seulement) ---------- */
.qp-jeu.qp-auto{margin:2px 2px 16px;gap:14px}
.qp-serie{flex:1;display:flex;align-items:center;gap:10px;max-width:72%;min-width:0}
.qp-serie-p{flex:1;height:16px;border-radius:999px;background:var(--qp-piste);overflow:hidden}
.qp-serie-p i{display:block;height:100%;min-width:10px;border-radius:999px;background:var(--qp-serie);box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--qp-fonce) 14%,transparent),inset 0 3px 0 color-mix(in srgb,var(--card) 30%,transparent);transition:width .35s ease}
.qp-serie b{min-width:1.2em;text-align:right;font-family:var(--display);font-weight:800;color:var(--ink)}
.df-haut:has(+.qp-auto) .df-pts{display:none}
@media (prefers-reduced-motion: reduce){.qp-serie-p i{transition:none}}
/* réponses construites avec PlayerQuiz.choix : pastille à gauche, texte à droite */
.qp-opt{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;font:inherit;font-size:1rem;cursor:pointer}
.qp-opt>span:not(.qp-l){flex:1;min-width:0}
/* choix multiple (PlayerQuiz.choix({multi:true}), règle des QCM) : mention et cases à cocher carrées à la place des pastilles rondes */
.qp-multi-mention{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-weight:700;color:var(--qp-fonce,var(--ink))}
.qp-multi .qp-case{border-radius:6px}
.qp-multi .qp-opt[aria-checked="true"] .qp-case,.qp-multi .qp-opt.good .qp-case{box-shadow:inset 0 0 0 3px var(--qp-carte,var(--card))}
.qp-multi .qp-opt.rate{opacity:.85;outline:2px dashed var(--qp-ok,var(--ok));outline-offset:-4px}
/* ---------- énoncés longs repliables (player.js : replier) ---------- */
.qp-replie{overflow:hidden;-webkit-mask-image:linear-gradient(#000 45%,transparent);mask-image:linear-gradient(#000 45%,transparent)}
.qp-suite{display:inline-flex;align-items:center;gap:4px;margin:6px 0 0;padding:6px 14px;min-height:44px;border-radius:999px;border:2px solid var(--q-bord);background:var(--card);color:var(--q-tag);font:inherit;font-size:.9rem;font-weight:800;cursor:pointer}
.qp-suite:focus-visible{outline:3px solid var(--qp-focus);outline-offset:2px}
/* consigne des QCM (« Choisis la bonne réponse ») : plus affichée, lue par les lecteurs d'écran seulement ; le compteur reste à droite */
.qp-vh{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
.exo-top-d{margin-left:auto}
.qp-multi-mention{display:inline-flex;align-items:center;gap:6px;margin:0 0 10px;padding:4px 12px;border-radius:999px;background:var(--card);border:2px solid var(--q-bord);font-size:.85rem;font-weight:800}