/* Ogrelo · tuiles (jetons communs) : cartes bien rondes, contour franc, ombre PLEINE dessous dans une teinte plus foncée de la carte
   (pas de flou) ; on appuie : la carte descend et l'ombre rétrécit. Mise en page et logique des écrans inchangées.
   Utilisé par : Langues (langues.css, tuiles pleines), cartes du jour (Devoirs), Contrôles, matières de Cours, menu d'Ogrelo. */
:root{--tuile-r:20px;--tuile-h:5px;--tuile-bord:2px}

/* cartes claires teintées : la couleur de la carte (--c) donne le contour et l'ombre */
.h-card,.cz-l,.ct-card,.j-choix,.ct-rev{
  --tc-c:var(--c,#8A8799);
  border:var(--tuile-bord) solid color-mix(in srgb,var(--tc-c) 38%,var(--line))!important;
  border-radius:var(--tuile-r)!important;
  box-shadow:0 var(--tuile-h) 0 color-mix(in srgb,var(--tc-c) 45%,var(--line))!important;
  transition:transform .08s ease,box-shadow .08s ease}
.cz-l,.j-choix{background:color-mix(in srgb,var(--tc-c) 6%,var(--card))!important;margin-bottom:var(--tuile-h)}
.cz-l b,.j-choix .tx b{font-family:var(--display);font-weight:800;font-size:1.04rem}
.cz-liste{gap:14px!important}
.cz-li{border-radius:13px!important;box-shadow:0 3px 0 color-mix(in srgb,var(--c,#8A8799) 40%,var(--line))}
/* appui : la carte descend */
.cz-l:active,.j-choix:active,.ct-rev:active,.h-card:has(.j-main:active),.h-card:has(.ct-h:active),button.h-card:active{
  transform:translateY(calc(var(--tuile-h) - 1px));box-shadow:0 1px 0 color-mix(in srgb,var(--tc-c) 45%,var(--line))!important}
.j-card.passe,.j-card.done{box-shadow:0 2px 0 color-mix(in srgb,var(--tc-c) 30%,var(--line))!important}

/* menu d'Ogrelo : pastilles pleines avec la même ombre dessous */
.om-r{box-shadow:0 5px 0 color-mix(in srgb,var(--c) 58%,#000),0 12px 22px rgba(0,0,0,.28)!important;transition:transform .08s ease,box-shadow .08s ease}
.om-i:active .om-r{transform:translateY(4px)!important;box-shadow:0 1px 0 color-mix(in srgb,var(--c) 58%,#000),0 6px 12px rgba(0,0,0,.25)!important}

/* Cours · l'examen de l'année (brevet, puis bac) : grosse tuile dorée pleine, plus visible que les matières ; J-xxx en pastille */
.cz-exam{--c:#F29A0E;position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:96px;margin:4px 0 22px!important;padding:16px 16px 16px 14px!important;
  border:0!important;border-radius:22px!important;color:#fff!important;text-align:left;cursor:pointer;
  background:linear-gradient(150deg,#FFC23A 0%,#F7A21B 45%,#EC820C 100%)!important;box-shadow:0 6px 0 #B85F00!important;transition:transform .08s ease,box-shadow .08s ease}
.cz-exam .i{width:58px!important;height:58px!important;border-radius:18px!important;background:rgba(255,255,255,.25)!important;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.cz-exam .i svg{width:38px;height:38px;filter:drop-shadow(0 2px 0 rgba(140,70,0,.35))}
.cz-exam .tx b{font-family:var(--display);font-weight:800;font-size:1.5rem;line-height:1.1;text-shadow:0 2px 0 rgba(150,75,0,.35)}
.cz-exam .tx small{color:#fff!important;font-weight:800;font-size:.98rem;opacity:1;text-shadow:0 1px 0 rgba(150,75,0,.4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cz-j{position:absolute;top:12px;right:14px;background:#fff;color:#B35A00;font-family:var(--display);font-weight:800;font-size:1.02rem;border-radius:999px;padding:6px 12px;box-shadow:0 3px 0 #B85F00;white-space:nowrap}
.cz-exam:active{transform:translateY(5px);box-shadow:0 1px 0 #B85F00!important}

/* Cours · mes matières : toutes les tuiles ont exactement la même taille (nom sur une ligne, une ligne d'info au plus) */
.cz-liste{grid-template-columns:minmax(0,1fr)}
.cz-exam .tx{flex:1;min-width:0}
.cz-mat{min-width:0;height:76px;min-height:76px!important;padding:0 14px 0 12px!important}
.cz-mat .tx{justify-content:center}
.cz-mat .tx b,.cz-mat .tx small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}
.cz-mat .tx b{font-size:1.08rem;line-height:1.25}
.cz-mat .tx small{line-height:1.3}
.cz-mat .cz-li{width:44px;height:44px}

@media (prefers-reduced-motion: reduce){.cz-exam,.h-card,.cz-l,.ct-card,.j-choix,.ct-rev,.om-r{transition:none}}

/* ======================================================================================================================
   Ogrelo · le style « Duolingo » partout (jetons communs + composants). Seulement l'apparence : mises en page et logique inchangées.
   Règle : carte bien ronde, contour franc, ombre PLEINE dessous (jamais floue) ; on appuie → ça descend et l'ombre rétrécit.
   Rouge réservé aux erreurs. Chargé après le style de la page (index.html) : il l'emporte à spécificité égale.
   ====================================================================================================================== */
:root{
  --duo-r:20px;--duo-r-s:14px;--duo-r-xl:24px;            /* rayons : cartes, petits éléments, grandes cartes */
  --duo-h:4px;--duo-h-btn:5px;--duo-bord:2px;               /* profondeur de l'ombre (cartes, boutons), épaisseur du contour */
  --duo-ombre:color-mix(in srgb,var(--line) 82%,#000);     /* ombre pleine d'une carte neutre : le contour, un cran plus foncé */
  --duo-press:translateY(3px);                              /* appui */
  --duo-anim:transform .08s ease,box-shadow .08s ease,background-color .15s ease;
  --duo-focus:color-mix(in srgb,var(--sky) 70%,#000);       /* ombre 3D d'un champ actif */
  --duo-poignee:color-mix(in srgb,var(--ink) 18%,transparent);
  /* couleurs d'identité des onglets (calmes, saturées, jamais rouges) */
  --tab-accueil:#2D7FE0;--tab-notes:#E8810C;--tab-grignon:#3E9A35;--tab-reviser:#8455D8;--tab-langues:#0E9A8C;--tab-moi:#C98A04;
  --tc-mix:#000;--tc-part:68%;                              /* texte coloré lisible (AA) : la couleur foncée en clair, éclaircie en sombre */
}
:root,:root:not([data-theme="light"]),:root[data-theme="dark"]{--shadow:0 var(--duo-h) 0 var(--duo-ombre)}   /* l'ombre commune devient pleine */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--duo-ombre:color-mix(in srgb,var(--line) 85%,#000);--tc-mix:#fff;--tc-part:62%;--duo-focus:color-mix(in srgb,var(--sky) 60%,#000)}}
:root[data-theme="dark"]{--duo-ombre:color-mix(in srgb,var(--line) 85%,#000);--tc-mix:#fff;--tc-part:62%;--duo-focus:color-mix(in srgb,var(--sky) 60%,#000)}

/* ---------- 1. en-tête d'onglet : bandeau reconnaissable, même composant partout ---------- */
[data-k="accueil"],[data-tab="accueil"]{--tc:var(--tab-accueil)}[data-k="notes"],[data-tab="notes"]{--tc:var(--tab-notes)}
[data-k="grignon"],[data-tab="grignon"]{--tc:var(--tab-grignon)}[data-k="reviser"],[data-tab="reviser"]{--tc:var(--tab-reviser)}
[data-k="langues"],[data-tab="langues"]{--tc:var(--tab-langues)}[data-k="moi"],[data-tab="moi"]{--tc:var(--tab-moi)}
.h-sheet{padding-top:18px!important}
.h-q.h-tete{--tc-t:color-mix(in srgb,var(--tc) var(--tc-part),var(--tc-mix));display:flex;align-items:center;gap:12px;min-height:64px;margin:0 0 18px!important;padding:8px 14px 8px 8px;
  background:color-mix(in srgb,var(--tc) 11%,var(--card));border:var(--duo-bord) solid color-mix(in srgb,var(--tc) 40%,var(--line));border-radius:var(--duo-r);
  box-shadow:0 var(--duo-h) 0 color-mix(in srgb,var(--tc) 55%,var(--line));font-size:1.4rem!important;line-height:1.1;color:var(--ink)}
.h-tete-i{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--tc);color:#fff;box-shadow:inset 0 -4px 0 rgba(0,0,0,.18)}
.h-tete-i svg{width:26px;height:26px;margin-top:-2px}
.h-tete-i svg [fill^="var"]{fill:var(--tc)}
.h-tete-i .ogre{width:40px;height:40px;margin-top:0}
.h-tete-t{display:flex;flex-direction:column;min-width:0;font-weight:800}
.h-tete-t small{font-family:var(--body);font-size:.84rem;font-weight:700;color:var(--tc-t);line-height:1.25;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* barre du bas : l'onglet actif prend la couleur de son onglet */
.h-tab[data-tab]{--tc-t:color-mix(in srgb,var(--tc) var(--tc-part),var(--tc-mix))}
.h-tab[data-tab][aria-current="page"]{color:var(--tc-t)!important}
.h-tab[data-tab][aria-current="page"]::before{background:var(--tc)!important;height:4px!important;width:32px!important}
.h-tab[data-tab][aria-current="page"] svg{stroke-width:2.2}

/* ---------- 2. boutons : gros, ronds, en relief ---------- */
.btn{border-radius:18px;min-height:52px;letter-spacing:.01em;box-shadow:0 var(--duo-h-btn) 0 color-mix(in srgb,var(--ogre-d) 60%,#000);transition:var(--duo-anim)}
.btn:not(:disabled):active{transform:translateY(calc(var(--duo-h-btn) - 1px));box-shadow:0 1px 0 color-mix(in srgb,var(--ogre-d) 60%,#000)}
.btn.alt{border:var(--duo-bord) solid var(--line);box-shadow:0 var(--duo-h-btn) 0 var(--duo-ombre)}
.btn.alt:not(:disabled):active{box-shadow:0 1px 0 var(--duo-ombre)}
.btn:disabled{box-shadow:0 var(--duo-h) 0 var(--duo-ombre)}
.back,.cm-x,.pq-x,.sig-x,.abo-x,.h-arrows button,.g-x,.df-son,.g-cam{border:var(--duo-bord) solid var(--line)!important;background:var(--card)!important;box-shadow:0 3px 0 var(--duo-ombre)!important;transition:var(--duo-anim)}
.back:active,.cm-x:active,.pq-x:active,.sig-x:active,.abo-x:active,.h-arrows button:active,.g-x:active,.df-son:active,.g-cam:active{transform:var(--duo-press)!important;box-shadow:0 0 0 var(--duo-ombre)!important}
.h-arrows button{color:var(--sky)!important;border-radius:14px!important}
.h-arrows .j-auj{border-radius:999px!important;color:color-mix(in srgb,var(--sky) 72%,#000)!important}
:root[data-theme="dark"] .h-arrows .j-auj{color:color-mix(in srgb,var(--sky) 60%,#fff)!important}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .h-arrows .j-auj{color:color-mix(in srgb,var(--sky) 60%,#fff)!important}}

/* ---------- 3. semaine (Devoirs, Contrôles) : les jours deviennent des pastilles en relief ---------- */
.h-sheet{--tc-t:color-mix(in srgb,var(--tc,var(--ogre)) var(--tc-part),var(--tc-mix))}
.h-week{padding:2px 2px 6px}
.h-day .n{border-radius:15px!important;border:var(--duo-bord) solid var(--line)!important;background:var(--card);box-shadow:0 3px 0 var(--duo-ombre);transition:var(--duo-anim)}
.h-day:active .n{transform:var(--duo-press);box-shadow:0 0 0 var(--duo-ombre)}
.h-day.today .n{border-color:color-mix(in srgb,var(--tc,var(--ogre)) 60%,var(--line))!important;color:var(--tc-t)}
.h-day[aria-pressed="true"] .n{background:var(--tc,var(--navink))!important;border-color:var(--tc,var(--navink))!important;color:#fff!important;box-shadow:0 3px 0 color-mix(in srgb,var(--tc,var(--navink)) 60%,#000)}
.h-day[aria-pressed="true"]{color:var(--tc-t)!important}

/* ---------- 4. cartes neutres (encadrés, blocs, actions) : contour franc + ombre pleine ---------- */
.d-box,.dv-plus,.moi-kpi,.blk,.tile,.qcard,.result,.recap details,.cm-carte:not([style*="--c"]),.plat-c,.mem-tuile,.doc-rg,.dv-act,.gr-carte,.rg-page .moi-card{
  border-width:var(--duo-bord)!important;border-style:solid!important;border-radius:var(--duo-r)!important}
.d-box,.dv-plus,.tile,.qcard,.result,.recap details,.cm-carte:not([style*="--c"]),.plat-c,.doc-rg,.gr-carte{border-color:var(--line)!important;box-shadow:0 var(--duo-h) 0 var(--duo-ombre)!important}
.qcard,.result{border-radius:var(--duo-r-xl)!important}
.dv-act{box-shadow:0 var(--duo-h) 0 var(--duo-ombre);transition:var(--duo-anim)}
.dv-act:not(.gris):not(.busy):active,.plat-c:active,.doc-rg:active,.gr-carte:active,.tile:active,.mem-tuile:active{transform:var(--duo-press);box-shadow:0 1px 0 var(--duo-ombre)!important}
.dv-act .i,.moi-kpi .ki{box-shadow:inset 0 -3px 0 rgba(0,0,0,.08)}
.dv-plus>summary{color:var(--ink)!important}
/* encadrés de fiche : l'ombre prend la couleur de l'encadré */
.blk{box-shadow:0 var(--duo-h) 0 var(--duo-ombre)}
.retiens{box-shadow:0 var(--duo-h) 0 color-mix(in srgb,var(--ogre) 50%,var(--line))}
.exemple{box-shadow:0 var(--duo-h) 0 color-mix(in srgb,var(--sky) 50%,var(--line))}
.piege{box-shadow:0 var(--duo-h) 0 color-mix(in srgb,var(--berry) 45%,var(--line))}
.astuce{box-shadow:0 var(--duo-h) 0 color-mix(in srgb,var(--sun) 60%,var(--line))}
/* cartes pleines de couleur (en-tête de devoir, de fiche, gros boutons) : le bas de la carte, plus foncé */
.d-head,.fhero{box-shadow:inset 0 -6px 0 rgba(0,0,0,.16)!important;padding-bottom:20px!important}
.bigbtn{box-shadow:0 var(--duo-h-btn) 0 rgba(0,0,0,.28)}
.playbtn{box-shadow:0 4px 0 color-mix(in srgb,var(--ogre-d) 60%,#000)}
/* « J'ai terminé » : une grosse case en relief */
.knowbtn{border:var(--duo-bord) solid color-mix(in srgb,var(--ogre) 55%,var(--line))!important;box-shadow:0 var(--duo-h) 0 color-mix(in srgb,var(--ogre) 45%,var(--line));transition:var(--duo-anim)}
.knowbtn:active{transform:var(--duo-press);box-shadow:0 1px 0 color-mix(in srgb,var(--ogre) 45%,var(--line))}
.knowbtn .box{border-width:var(--duo-bord)!important;border-radius:11px!important;box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--ogre) 22%,transparent)}
.knowbtn.on{box-shadow:0 var(--duo-h) 0 color-mix(in srgb,var(--ogre-d) 55%,var(--line))}
/* jour vide : un cadre plein et doux plutôt que des pointillés */
.j-vide{border:var(--duo-bord) solid var(--line)!important;background:color-mix(in srgb,var(--tc,var(--ogre)) 4%,var(--card))!important;border-radius:var(--duo-r-xl)!important;box-shadow:0 var(--duo-h) 0 var(--duo-ombre)}
.j-titre{font-size:1.12rem!important;color:var(--ink)!important}
/* à compléter (Contrôles) : pastille en relief */
.j-pl{border:var(--duo-bord) solid color-mix(in srgb,var(--t-warn,#C77700) 35%,var(--line))!important;border-radius:var(--duo-r-s)!important;box-shadow:0 3px 0 color-mix(in srgb,var(--t-warn,#C77700) 35%,var(--line));transition:var(--duo-anim)}
.j-pl:active{transform:var(--duo-press);box-shadow:0 0 0 transparent}

/* onglet Ogrelo : les 3 cartes (parler, défier, groupe), ombre pleine de leur couleur */
.gt-c{border-width:var(--duo-bord)!important;border-radius:var(--duo-r)!important;box-shadow:0 var(--duo-h) 0 color-mix(in srgb,var(--c) 50%,var(--line))!important;transition:var(--duo-anim)}
.gt-c:active{transform:var(--duo-press);box-shadow:0 1px 0 color-mix(in srgb,var(--c) 50%,var(--line))!important}
.gt-c .i{box-shadow:inset 0 -4px 0 rgba(0,0,0,.18)}

/* ---------- 5. pastilles (choix, réglages, suggestions du chat) ---------- */
.rg-seg button,.seg button,.g-chip,.r-roles .btn{border:var(--duo-bord) solid var(--line)!important;border-radius:999px!important;box-shadow:0 3px 0 var(--duo-ombre);transition:var(--duo-anim);min-height:40px}
.rg-seg button:not(:disabled):active,.seg button:active,.g-chip:active{transform:var(--duo-press);box-shadow:0 0 0 transparent}
.rg-seg button[aria-checked="true"],.seg button[aria-pressed="true"]{border-color:color-mix(in srgb,var(--ogre) 70%,var(--line))!important;box-shadow:0 3px 0 color-mix(in srgb,var(--ogre-d) 70%,var(--line))}
.g-chip{border-color:color-mix(in srgb,var(--ogre) 55%,var(--line))!important;box-shadow:0 3px 0 color-mix(in srgb,var(--ogre) 40%,var(--line));font-weight:700;padding:8px 14px!important;background:var(--card)}
.h-tag,.badge{font-family:var(--display);letter-spacing:.03em}

.sig-puce{box-shadow:0 3px 0 var(--duo-ombre);transition:var(--duo-anim)}
.sig-puce:active{transform:var(--duo-press);box-shadow:0 0 0 transparent}
.sig-puce.on{box-shadow:0 3px 0 color-mix(in srgb,var(--ogre) 55%,var(--line))}

/* ---------- 6. barres de progression : épaisses, bouts ronds, reflet ---------- */
.prog,.cm-barre,.gr-bar,.lbar,.m-bar{border-radius:999px!important;background:color-mix(in srgb,var(--ink) 9%,var(--line))!important;overflow:hidden}
.prog{height:16px!important}.cm-barre{height:14px!important}.gr-bar{height:12px!important}.gr-bar.gros{height:16px!important}.m-bar{height:10px!important}
.prog i,.cm-barre i,.gr-bar i,.lbar i,.m-bar i{border-radius:999px!important;min-width:10px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12),inset 0 3px 0 rgba(255,255,255,.28)}
.m-bar i{box-shadow:inset 0 -2px 0 rgba(0,0,0,.12)}

/* ---------- 7. champs : contour épais, coins ronds, relief bleu quand on écrit ---------- */
.exo-in,.g-type input,.g-type textarea,.cm input[type="text"],.cm input:not([type]),.cm textarea,.cm select,.sig-feuille textarea,.sig-mot textarea,.abo-feuille input,.l-sheet input[type="text"],.l-sheet input[type="email"],.l-sheet input[type="password"],.l-sheet input:not([type]),.df-code-in input{
  border:var(--duo-bord) solid var(--line)!important;border-radius:var(--duo-r-s);background:var(--card);color:var(--ink);box-shadow:inset 0 2px 0 color-mix(in srgb,var(--ink) 5%,transparent);transition:border-color .15s ease,box-shadow .15s ease}
.exo-in:focus,.g-type input:focus,.g-type textarea:focus,.cm input:focus,.cm textarea:focus,.cm select:focus,.sig-feuille textarea:focus,.sig-mot textarea:focus,.abo-feuille input:focus,.l-sheet input:focus,.df-code-in input:focus{
  outline:none;border-color:var(--sky)!important;box-shadow:0 3px 0 var(--duo-focus)}
.g-type input{border-radius:999px!important;min-height:48px}
.g-type button:not(.g-cam){border-radius:16px!important;box-shadow:0 4px 0 color-mix(in srgb,var(--ogre-d) 60%,#000);transition:var(--duo-anim)}
.g-type button:not(.g-cam):active{transform:var(--duo-press);box-shadow:0 1px 0 color-mix(in srgb,var(--ogre-d) 60%,#000)}
.g-bar,.g-panel.g-texte .g-type{border-top-width:var(--duo-bord)!important}

/* ---------- 8. quiz : réponses en grosses tuiles en relief ---------- */
.opt{border-width:var(--duo-bord)!important;border-radius:var(--duo-r-s)!important;box-shadow:0 var(--duo-h) 0 var(--duo-ombre)!important;transition:var(--duo-anim);min-height:60px}
.opt:not(.dim):active{transform:var(--duo-press);box-shadow:0 1px 0 var(--duo-ombre)!important}
.opt .l{box-shadow:inset 0 -3px 0 rgba(0,0,0,.2)}
.opt.good{box-shadow:0 var(--duo-h) 0 color-mix(in srgb,var(--ok) 60%,var(--line))!important}
.opt.bad{box-shadow:0 var(--duo-h) 0 color-mix(in srgb,var(--ko) 55%,var(--line))!important}
.feedback{border-width:var(--duo-bord)!important;box-shadow:0 var(--duo-h) 0 color-mix(in srgb,currentColor 0%,var(--duo-ombre))}
.feedback.good{box-shadow:0 var(--duo-h) 0 color-mix(in srgb,var(--ok) 55%,var(--line))}
.feedback.bad{box-shadow:0 var(--duo-h) 0 color-mix(in srgb,var(--ko) 50%,var(--line))}
.chip{border-width:var(--duo-bord)!important;box-shadow:0 3px 0 var(--duo-ombre)}

/* ---------- 8 bis. carte QUESTION (tous les quiz) : fond doux vert Grignon, contour 2 px, ombre 3D pleine, énoncé gros et gras ----------
   Un seul endroit : .exo-q (lecteur d exercices : QCM, vrai/faux, trous, relier, ordre, classer, droite, écoute, dialogue…, groupes en direct)
   et .qcard (quiz des fiches, exercices en images, écoute Langues). La liste « test » des groupes (.gr-tq) et les rappels (.petit) restent sobres. */
:root{
  --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)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--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%,#000);--q-tag:var(--ogre)}}
:root[data-theme="dark"]{--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%,#000);--q-tag:var(--ogre)}
.exo-q:not(.petit),.qcard{background:var(--q-bg)!important;border:2px solid var(--q-bord)!important;border-radius:18px!important;box-shadow:0 4px 0 var(--q-ombre)!important;color:var(--ink)}
.exo-q:not(.petit){font-family:var(--display);font-weight:800;font-size:1.2rem;line-height:1.4;padding:16px 18px;margin:6px 0 20px}
.exo-full .exo-q:not(.petit){font-size:1.3rem}
.exo-q:empty{display:none}
.gr-tq .exo-q{background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0 0 0 36px;margin:0 0 10px;font-size:1.08rem}
.qcard{padding:18px 18px 20px;margin-bottom:22px}
.qcard:not(.xi-carte) h2{font-family:var(--display);font-weight:800;font-size:1.3rem;line-height:1.35;margin:10px 0 0;color:var(--ink)}
/* pastille matière / type : pilule claire, texte vert, intégrée en haut de la carte */
.qcard .tag,.exo-top>span:first-child{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)!important;font-size:.76rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;line-height:1.2}
.exo-top{align-items:center}

/* ---------- 9. feuilles du bas : coins ronds en haut, poignée, ombre ---------- */
@media (max-width:559px){.sig-feuille,.pq-feuille,.abo-feuille,.cp-feuille,.mc-feuille,.mem-sheet,.dm-in,.lu-feuille-in{border-radius:28px 28px 0 0!important;border-top:var(--duo-bord) solid var(--line)}}
.mem-sheet,.mc-feuille{position:relative}
.sig-feuille::before,.pq-feuille::before,.abo-feuille::before,.cp-feuille::before,.mc-feuille::before,.mem-sheet::before,.dm-in::before{
  content:"";position:absolute;top:9px;left:50%;width:44px;height:5px;margin-left:-22px;border-radius:999px;background:var(--duo-poignee);pointer-events:none}
@media (min-width:560px){.sig-feuille,.pq-feuille,.abo-feuille{border-radius:28px!important;border:var(--duo-bord) solid var(--line);box-shadow:0 6px 0 var(--duo-ombre),0 20px 40px rgba(0,0,0,.2)!important}
  .sig-feuille::before,.pq-feuille::before,.abo-feuille::before{display:none}}
.pq-bulle{border-radius:20px 20px 20px 6px!important;box-shadow:0 3px 0 var(--duo-ombre)}
.pq-minis img{border-radius:var(--duo-r-s)!important;box-shadow:0 3px 0 var(--duo-ombre)}

/* ---------- 10. petits messages (toasts) : pilules arrondies, ombre pleine ---------- */
.h-toast,.mem-toast{border-radius:999px!important;padding:12px 20px!important;font-family:var(--display);font-weight:800;box-shadow:0 4px 0 color-mix(in srgb,var(--ink) 55%,#000)!important}
.df-toast,.iv-toast{border-radius:999px!important;box-shadow:0 4px 0 color-mix(in srgb,var(--ogre-d) 55%,#000)!important}
.t-demo{box-shadow:inset 0 5px 0 rgba(255,255,255,.12),0 -6px 0 rgba(30,60,20,.18)!important}
.t-demo .t-co{box-shadow:0 3px 0 rgba(0,0,0,.2)}

/* ---------- 11. écrans plein écran (cartes, défi, groupes) et chargement ---------- */
.cm-top b{font-size:1.3rem!important;font-weight:800}
.moi-card{border-radius:var(--duo-r-xl)!important}
.moi-load{justify-content:center;font-family:var(--display);font-weight:700}
.h-empty{border:var(--duo-bord) solid var(--line);border-radius:var(--duo-r);background:var(--card);box-shadow:0 var(--duo-h) 0 var(--duo-ombre);margin:6px 0 14px}

@media (prefers-reduced-motion: reduce){
  .btn,.back,.cm-x,.pq-x,.h-arrows button,.g-x,.df-son,.g-cam,.h-day .n,.gt-c,.dv-act,.knowbtn,.j-pl,.rg-seg button,.seg button,.g-chip,.opt,.g-type button{transition:none}
  .btn:active,.back:active,.cm-x:active,.h-day:active .n,.dv-act:active,.knowbtn:active,.j-pl:active,.rg-seg button:active,.g-chip:active,.opt:active,.gt-c:active,.plat-c:active,.doc-rg:active,.gr-carte:active,.tile:active{transform:none!important}}
/* plus de contour bleu autour des boutons : rien au toucher / à la souris ; au clavier, un anneau vert discret (accessibilité) */
html{-webkit-tap-highlight-color:transparent}
button:focus,a:focus,[role=button]:focus,input:focus,select:focus,textarea:focus,label:focus,summary:focus{outline:none}
:focus:not(:focus-visible){outline:none!important}
:focus-visible{outline:2px solid rgba(62,154,53,.55)!important;outline-offset:2px}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none!important}

/* Moi : fenêtre plein écran, croix en haut à gauche */
.moi-modal{position:fixed;inset:0;z-index:60;background:var(--bg,var(--sheet));overflow-y:auto;overscroll-behavior:contain;padding-bottom:40px}
.moi-top{display:flex;align-items:stretch;position:sticky;top:0;z-index:2;background:var(--bg,var(--sheet))}
.moi-x{flex:none;width:56px;border:0;background:color-mix(in srgb,var(--tc,var(--tab-moi)) 11%,var(--card));color:var(--ink);display:grid;place-items:center;cursor:pointer;border-bottom:var(--duo-bord,2px) solid color-mix(in srgb,var(--tc,var(--tab-moi)) 40%,var(--line))}
.moi-x svg{width:26px;height:26px}
.moi-top .h-q.h-tete{flex:1;margin:0!important;width:auto}
.moi-corps{max-width:640px;margin:0 auto;padding:18px 16px 0}
/* en-têtes pleine largeur, collés en haut, sans arrondi bas */
.wrap>.h-q.h-tete,.wrap .h-q.h-tete{margin:-12px calc(50% - 50vw) 18px!important;width:100vw;max-width:100vw;box-sizing:border-box;border-radius:0!important;border-top:0;border-left:0;border-right:0;padding-inline:max(14px,calc(50vw - 320px + 8px))}
.moi-top .h-q.h-tete{margin:0!important;width:auto;max-width:none;padding-inline:8px 14px}
.moi-top{flex-direction:row-reverse}
.wrap .h-q.h-tete,.moi-top .h-q.h-tete{border-radius:0!important}

.lv-barre,.moi-top{border-radius:0!important}

/* Ogrelo · maîtrise et jeu (progres.js) : bandeau, session parfaite, Mes progrès, boutique, quêtes, ligue, fêtes. Tuiles façon tuiles.css, clair + sombre, 360 px. */
:root{--pg-or:#F7B733;--pg-or-d:#C98A10;--pg-feu:#FF8A1F;--pg-bleu:#2E7DD7;--pg-violet:#8E44EC;--pg-vert:#2F8540;--pg-fond:var(--card,#fff);--pg-trait:var(--line,#E4E2DA);--pg-doux:var(--soft,#6B6880)}
.pg-ic{width:1.25em;height:1.25em;flex:none;vertical-align:-.25em}

/* bandeau : série · objectif · niveau · crocs */
.pg-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:2px 0 14px}
.pg-chips-vide span{height:44px;border-radius:14px;background:var(--pg-trait);opacity:.5}
.pg-chip{display:flex;align-items:center;justify-content:center;gap:5px;min-height:44px;padding:6px 4px;border-radius:14px;border:2px solid var(--pg-trait);background:var(--pg-fond);color:var(--ink);
  font:800 .92rem var(--display,inherit);box-shadow:0 3px 0 var(--pg-trait);cursor:pointer;min-width:0;white-space:nowrap}
.pg-chip:active{transform:translateY(2px);box-shadow:0 1px 0 var(--pg-trait)}
.pg-chip small{font-size:.66rem;font-weight:700;color:var(--pg-doux)}
.pg-ch-niv b{font-size:.8rem}
.pg-ch-serie:not(.on) .pg-flamme{filter:grayscale(.85);opacity:.6}
.pg-ch-serie.on{border-color:color-mix(in srgb,var(--pg-feu) 55%,var(--pg-trait));box-shadow:0 3px 0 color-mix(in srgb,var(--pg-feu) 55%,var(--pg-trait))}
.pg-gel-mini .pg-ic{width:.9em;height:.9em}
.pg-anneau{--p:0;width:18px;height:18px;border-radius:50%;flex:none;background:conic-gradient(var(--ok,#1F8A4C) calc(var(--p)*1%),color-mix(in srgb,var(--pg-trait) 80%,transparent) 0);
  -webkit-mask:radial-gradient(circle,transparent 5px,#000 6px);mask:radial-gradient(circle,transparent 5px,#000 6px)}
.pg-ch-obj.on{border-color:color-mix(in srgb,var(--ok,#1F8A4C) 50%,var(--pg-trait))}

/* tuile « Ma session parfaite » : grosse, dorée, la première chose qu'on voit */
.pg-sp{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:92px;margin:0 0 16px;padding:14px 14px 14px 12px;border:0;border-radius:22px;color:#fff;text-align:left;cursor:pointer;
  background:linear-gradient(150deg,#FFC23A 0%,#F7A21B 50%,#EC820C 100%);box-shadow:0 6px 0 #B85F00;transition:transform .08s ease,box-shadow .08s ease}
.pg-sp:active{transform:translateY(5px);box-shadow:0 1px 0 #B85F00}
.pg-sp.faite{background:linear-gradient(150deg,#5CC46A,#2F9B48);box-shadow:0 6px 0 #1E6B30}
.pg-sp.faite:active{box-shadow:0 1px 0 #1E6B30}
.pg-sp-i{width:58px;height:58px;flex:none;border-radius:18px;background:rgba(255,255,255,.25);display:grid;place-items:center;overflow:hidden}
.pg-sp-i svg{width:48px;height:48px}
.pg-sp .tx{flex:1;min-width:0}.pg-sp .tx b{display:block;font:800 1.3rem/1.1 var(--display,inherit);text-shadow:0 2px 0 rgba(150,75,0,.3)}
.pg-sp .tx small{display:block;margin-top:4px;font-weight:700;font-size:.86rem;opacity:.95}
.pg-sp-go{width:40px;height:40px;border-radius:50%;background:#fff;color:#E07B00;display:grid;place-items:center;flex:none;font-size:1.2rem}
.pg-sp.faite .pg-sp-go{color:#2F9B48}
.pg-sp .go{display:none}
.pg-tuiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.pg-t{--tc:var(--c,#8A8799);display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;padding:12px 10px;border-radius:18px;text-align:left;cursor:pointer;color:var(--ink);
  border:2px solid color-mix(in srgb,var(--tc) 38%,var(--pg-trait));background:color-mix(in srgb,var(--tc) 7%,var(--pg-fond));box-shadow:0 4px 0 color-mix(in srgb,var(--tc) 45%,var(--pg-trait))}
.pg-t:active{transform:translateY(3px);box-shadow:0 1px 0 color-mix(in srgb,var(--tc) 45%,var(--pg-trait))}
.pg-t .i{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--tc);color:#fff;font-size:1.1rem}
.pg-t .i .pg-ic{width:26px;height:26px}
.pg-t:has(.pg-croc) .i{background:color-mix(in srgb,var(--tc) 18%,var(--pg-fond))}
.pg-t b{font:800 .9rem/1.15 var(--display,inherit)}.pg-t small{font-size:.72rem;line-height:1.2;color:var(--pg-doux)}

/* plein écran */
html.pg-ouvert{overflow:hidden}
.pg-full{position:fixed;inset:0;z-index:900;background:var(--paper,#F6F5F0);overflow:auto;-webkit-overflow-scrolling:touch}
.pg-in{max-width:560px;margin:0 auto;padding:0 16px calc(28px + env(safe-area-inset-bottom))}
.pg-top{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 0 10px;background:var(--paper,#F6F5F0)}
.pg-top>b{flex:1;font:800 1.15rem var(--display,inherit);display:flex;align-items:center;gap:6px}
.pg-x{width:44px;height:44px;border-radius:14px;border:2px solid var(--pg-trait);background:var(--pg-fond);color:var(--ink);display:grid;place-items:center;font-size:1.2rem;cursor:pointer}
.pg-top-crocs{display:flex;align-items:center;gap:4px;font-weight:800}
.pg-full.pg-jeu .pg-top-crocs{visibility:hidden}
.pg-corps h4{margin:20px 0 8px;font:800 1rem var(--display,inherit)}
.pg-charge{display:grid;place-items:center;min-height:120px}
.pg-bulle{display:flex;align-items:flex-start;gap:10px;margin:8px 0 14px}
.pg-bulle .f{width:58px;height:58px;flex:none}.pg-bulle .f svg{width:100%;height:100%}
.pg-bulle-t{position:relative;flex:1;padding:12px 14px;border-radius:18px;border-top-left-radius:6px;background:var(--pg-fond);border:2px solid var(--pg-trait);box-shadow:0 3px 0 var(--pg-trait)}
.pg-bulle-t p{margin:0;font-weight:700;line-height:1.35}.pg-bulle-t small{display:block;margin-top:6px;color:var(--pg-doux);line-height:1.35}
.pg-note{font-size:.86rem;color:var(--pg-doux);line-height:1.4;margin:8px 2px}
.pg-note .gi-idee,.pg-note .gi-wait{color:var(--pg-or-d)}
.pg-ok,.pg-go{width:100%;margin-top:14px}
.pg-err{color:var(--ko,#C2362C);font-weight:700;min-height:1.2em}
.pg-deux{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.pg-deux .btn{margin:0}

/* session : les blocs du jour */
.pg-blocs{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pg-blocs li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--pg-fond);border:2px solid var(--pg-trait);font-weight:700}
.pg-blocs .i{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--pg-or) 25%,var(--pg-fond));color:var(--pg-or-d);flex:none}
.pg-exo{margin-top:4px}
.pg-fin{text-align:left}
.pg-gain{display:flex;align-items:center;justify-content:center;gap:6px;margin:6px auto 10px;padding:10px 16px;width:max-content;max-width:100%;border-radius:999px;font:800 1.15rem var(--display,inherit);
  background:color-mix(in srgb,var(--pg-or) 22%,var(--pg-fond));color:color-mix(in srgb,var(--pg-or-d) 80%,var(--ink));border:2px solid color-mix(in srgb,var(--pg-or) 50%,var(--pg-trait))}
.pg-fin-serie{display:flex;align-items:center;justify-content:center;gap:6px;font-weight:800;margin:4px 0 10px}.pg-fin-serie .pg-ic{width:1.6em;height:1.6em}
.pg-montees{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.pg-montees li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-radius:12px;background:var(--pg-fond);border:2px solid var(--pg-trait)}
.pg-montees b{min-width:0;overflow:hidden;text-overflow:ellipsis}
.pg-niv{flex:none;font-size:.72rem;font-weight:800;padding:3px 8px;border-radius:999px;background:var(--t-mute-bg,#EFEDF3);color:var(--t-mute,#6B6880)}
.pg-niv.n2{background:var(--t-warn-bg,#FFF1D6);color:var(--t-warn,#A86A00)}.pg-niv.n3{background:var(--t-info-bg,#E3ECF8);color:var(--t-info,#2F5E9E)}.pg-niv.n4{background:var(--t-good-bg,#E1F4E8);color:var(--t-good,#1F8A4C)}

/* fêtes */
.pg-fete{position:fixed;inset:0;z-index:950;display:grid;place-items:center;padding:16px;background:rgba(20,18,30,.45)}
.pg-fete-in{width:min(420px,100%);padding:18px 16px 16px;border-radius:24px;background:var(--paper,#F6F5F0);border:2px solid var(--pg-trait);box-shadow:0 8px 0 rgba(0,0,0,.18)}
.pg-fete-ogre{display:block;width:120px;height:120px;margin:0 auto 4px}.pg-fete-ogre svg{width:100%;height:100%}
.pg-petit{position:fixed;left:50%;bottom:calc(86px + env(safe-area-inset-bottom));z-index:960;transform:translateX(-50%);display:flex;align-items:center;gap:8px;max-width:calc(100% - 32px);
  padding:10px 16px;border-radius:999px;background:var(--ink,#22261F);color:var(--paper,#fff);font-weight:800;box-shadow:0 6px 18px rgba(0,0,0,.25);transition:opacity .4s,transform .4s}
.pg-petit.va{opacity:0;transform:translate(-50%,10px)}

/* série et réglages */
.pg-serie-h{display:flex;flex-direction:column;align-items:center;gap:2px;margin:6px 0 4px}
.pg-serie-h .pg-ic{width:64px;height:64px}.pg-serie-h b{font:800 1.4rem var(--display,inherit)}.pg-serie-h small{color:var(--pg-doux);font-weight:700}
.pg-gels{display:flex;align-items:center;gap:8px;justify-content:center;margin:4px 0}
.pg-gels span .pg-ic{width:30px;height:30px;filter:grayscale(1);opacity:.35}.pg-gels span.on .pg-ic{filter:none;opacity:1}
.pg-gels small{color:var(--pg-doux);font-weight:700}
.pg-choix{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
.pg-choix button{min-height:44px;padding:8px 14px;border-radius:14px;border:2px solid var(--pg-trait);background:var(--pg-fond);color:var(--ink);font-weight:800;cursor:pointer}
.pg-choix button.on{border-color:var(--ogre,#3E7F31);background:color-mix(in srgb,var(--ogre,#3E7F31) 14%,var(--pg-fond))}
.pg-switch{display:flex;align-items:flex-start;gap:12px;padding:12px;border-radius:14px;border:2px solid var(--pg-trait);background:var(--pg-fond);cursor:pointer}
.pg-switch input{width:24px;height:24px;margin:2px 0 0;accent-color:var(--ogre,#3E7F31);flex:none}
.pg-switch small{display:block;color:var(--pg-doux);margin-top:2px}

/* boutique */
.pg-gel-a{display:flex;align-items:center;gap:10px;padding:12px;border-radius:16px;border:2px solid color-mix(in srgb,var(--pg-bleu) 35%,var(--pg-trait));background:color-mix(in srgb,var(--pg-bleu) 6%,var(--pg-fond));box-shadow:0 4px 0 color-mix(in srgb,var(--pg-bleu) 35%,var(--pg-trait))}
.pg-gel-i .pg-ic{width:40px;height:40px}.pg-gel-a .tx{flex:1;min-width:0}.pg-gel-a small{display:block;color:var(--pg-doux);font-size:.8rem}
.pg-grille{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (min-width:480px){.pg-grille{grid-template-columns:repeat(3,1fr)}}
.pg-art{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 8px;border-radius:16px;border:2px solid var(--pg-trait);background:var(--pg-fond);box-shadow:0 3px 0 var(--pg-trait);text-align:center;min-width:0}
.pg-art.porte{border-color:var(--ogre,#3E7F31);box-shadow:0 3px 0 color-mix(in srgb,var(--ogre,#3E7F31) 50%,var(--pg-trait))}
.pg-art b{font-size:.86rem}
.pg-art-v{display:grid;place-items:center;width:100%}
.pg-art .pg-deco{width:76px;height:76px}
.pg-prix,.pg-porter,.pg-offrir{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:40px;width:100%;padding:6px 10px;border-radius:12px;font-weight:800;cursor:pointer;border:2px solid var(--pg-trait);background:var(--pg-fond);color:var(--ink)}
.pg-prix{background:color-mix(in srgb,var(--pg-or) 22%,var(--pg-fond));border-color:color-mix(in srgb,var(--pg-or) 55%,var(--pg-trait))}
.pg-gel-a .pg-prix{width:auto;flex:none}
.pg-prix:disabled{opacity:.5;cursor:default}.pg-porter:disabled{opacity:.8;color:var(--ok,#1F8A4C)}
.pg-offrir{min-height:36px;font-size:.78rem;font-weight:700;color:var(--pg-doux)}
.pg-manque{font-size:.7rem;color:var(--pg-doux)}
/* aperçu des effets */
.pg-effet-v{position:relative;display:block;width:76px;height:76px;border-radius:50%;background:color-mix(in srgb,var(--pg-violet) 10%,var(--pg-fond));overflow:hidden}
.pg-effet-v i{position:absolute;width:10px;height:10px;border-radius:2px}
.pg-effet-v i:nth-child(1){left:14px;top:18px;background:#F25F5C}.pg-effet-v i:nth-child(2){left:44px;top:12px;background:#3BB273}.pg-effet-v i:nth-child(3){left:30px;top:40px;background:#2E7DD7}
.pg-effet-v i:nth-child(4){left:54px;top:46px;background:#F7B733}.pg-effet-v i:nth-child(5){left:18px;top:54px;background:#8E44EC}
.pg-ev-bulles i{border-radius:50%!important;background:transparent!important;border:2px solid #2E9BD7}
.pg-ev-etoiles i{clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);background:#F7B733!important;width:14px;height:14px}
.pg-ev-feux i{border-radius:50%;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 0%,transparent),0 0 10px 2px #FF8A1F;background:#FFD25A!important;width:6px;height:6px}

/* ogre décoré : fond + cadre (cosmétiques) */
.pg-deco{position:relative;display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:50%;overflow:hidden;border:3px solid #fff;box-shadow:0 0 0 2px var(--pg-trait)}
.pg-deco svg,.pg-deco img{width:88%;height:88%;margin-top:12%}
.pg-fond-prairie,.df-av.df-deco.pg-fond-prairie{background:linear-gradient(180deg,#DFF3D2 0 60%,#9ED37E 60%)}
.pg-fond-ciel,.df-av.df-deco.pg-fond-ciel{background:radial-gradient(circle at 25% 25%,#fff 0 7%,transparent 8%),radial-gradient(circle at 70% 35%,#fff 0 6%,transparent 7%),linear-gradient(180deg,#9FD4FF,#DDF0FF)}
.pg-fond-plage,.df-av.df-deco.pg-fond-plage{background:linear-gradient(180deg,#8FD3F5 0 45%,#4FB3E0 45% 62%,#F6DCA0 62%)}
.pg-fond-foret,.df-av.df-deco.pg-fond-foret{background:radial-gradient(circle at 20% 70%,#2E7D32 0 18%,transparent 19%),radial-gradient(circle at 80% 65%,#388E3C 0 20%,transparent 21%),linear-gradient(180deg,#C8E6C9,#81C784)}
.pg-fond-nuit,.df-av.df-deco.pg-fond-nuit{background:radial-gradient(circle at 20% 20%,#fff 0 3%,transparent 4%),radial-gradient(circle at 75% 30%,#fff 0 2.5%,transparent 3.5%),radial-gradient(circle at 55% 12%,#FFE08A 0 3%,transparent 4%),linear-gradient(180deg,#1B2A5A,#3B2E7A)}
.pg-fond-volcan,.df-av.df-deco.pg-fond-volcan{background:radial-gradient(circle at 50% 30%,#FFB347 0 12%,transparent 13%),linear-gradient(180deg,#FFCF9E,#E2583E 70%,#7A2E1F)}
.pg-fond-aurore,.df-av.df-deco.pg-fond-aurore{background:linear-gradient(160deg,#1E3A5F 0%,#2BD9A6 35%,#8E44EC 65%,#1E3A5F 100%)}
.pg-fond-galaxie,.df-av.df-deco.pg-fond-galaxie{background:radial-gradient(circle at 30% 30%,#fff 0 2%,transparent 3%),radial-gradient(circle at 70% 60%,#fff 0 2%,transparent 3%),radial-gradient(ellipse at 50% 50%,#C86DD7 0 20%,#3B1E6E 55%,#0E0A24 100%)}
.pg-cadre-feuilles{border-color:#6DBF59;box-shadow:0 0 0 3px #2F8540}
.pg-cadre-etoiles{border-color:#FFE08A;box-shadow:0 0 0 3px #F7B733,0 0 10px 1px rgba(247,183,51,.6)}
.pg-cadre-arcenciel{border-color:transparent;background-clip:padding-box;box-shadow:0 0 0 3px #F25F5C,0 0 0 6px #F7B733,0 0 0 9px #3BB273}
.pg-cadre-or{border-color:#FFD25A;box-shadow:0 0 0 3px #C98A10,0 0 14px 2px rgba(255,210,90,.75)}

/* quêtes */
.pg-quete{padding:12px;margin:10px 0;border-radius:18px;border:2px solid color-mix(in srgb,var(--pg-bleu) 35%,var(--pg-trait));background:color-mix(in srgb,var(--pg-bleu) 5%,var(--pg-fond));box-shadow:0 4px 0 color-mix(in srgb,var(--pg-bleu) 35%,var(--pg-trait))}
.pg-quete.reussie{border-color:color-mix(in srgb,var(--ok,#1F8A4C) 45%,var(--pg-trait));box-shadow:0 4px 0 color-mix(in srgb,var(--ok,#1F8A4C) 45%,var(--pg-trait))}
.pg-q-h{display:flex;align-items:center;gap:6px}.pg-q-h .tx{flex:1;min-width:0;margin-left:6px}.pg-q-h small{display:block;color:var(--pg-doux);font-size:.82rem;line-height:1.3}
.pg-q-plus{font-weight:800;color:var(--pg-doux)}
.pg-q-bar{height:12px;border-radius:999px;background:color-mix(in srgb,var(--pg-trait) 80%,transparent);margin:10px 0 6px;overflow:hidden}
.pg-q-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#4FA3F0,var(--pg-bleu))}
.pg-q-l{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.84rem;font-weight:700;align-items:center}
.pg-coffre{margin-left:auto;display:inline-flex;align-items:center;gap:3px}
.pg-ok-t{color:var(--ok,#1F8A4C);font-weight:800;margin:8px 0 0}
.pg-amis{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.pg-ami{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-radius:14px;border:2px solid var(--pg-trait);background:var(--pg-fond);color:var(--ink);cursor:pointer;min-height:44px}
.pg-ami.on{border-color:var(--pg-bleu);background:color-mix(in srgb,var(--pg-bleu) 12%,var(--pg-fond))}
.pg-ami b{font-size:.84rem;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.pg-types{display:grid;gap:8px}
.pg-type{text-align:left;min-height:44px;padding:10px 12px;border-radius:14px;border:2px solid var(--pg-trait);background:var(--pg-fond);color:var(--ink);font-weight:700;cursor:pointer}
.pg-type.on{border-color:var(--pg-bleu);background:color-mix(in srgb,var(--pg-bleu) 12%,var(--pg-fond))}

/* ligue */
.pg-cercle{font-weight:800;margin:4px 2px}
.pg-paliers{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:8px 0}
.pg-paliers span{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border-radius:12px;opacity:.45}
.pg-paliers span.passe{opacity:.75}.pg-paliers span.on{opacity:1;background:color-mix(in srgb,var(--pg-vert) 14%,var(--pg-fond));border:2px solid color-mix(in srgb,var(--pg-vert) 45%,var(--pg-trait))}
.pg-paliers small{font-size:.7rem;font-weight:800}
.pg-pal{display:inline-block;width:26px;height:26px;flex:none;background:center/contain no-repeat}
.pg-pal-graine{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='15' rx='6' ry='7' fill='%23B9824B' stroke='%237A5230' stroke-width='1.4'/%3E%3Cpath d='M12 8c0-2 1-3.5 3-4' stroke='%233BB273' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
.pg-pal-pousse{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22v-9' stroke='%232F8540' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M12 14c-5 0-7-3-7-7 4 0 7 2 7 7zM12 12c0-4 2-6 6-6 0 4-2 6-6 6z' fill='%235CC46A' stroke='%232F8540' stroke-width='1.3'/%3E%3C/svg%3E")}
.pg-pal-fleur{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22v-8' stroke='%232F8540' stroke-width='2' stroke-linecap='round'/%3E%3Cg fill='%23F25F9C' stroke='%23B8326C' stroke-width='1'%3E%3Ccircle cx='12' cy='5.5' r='3'/%3E%3Ccircle cx='17' cy='9.5' r='3'/%3E%3Ccircle cx='7' cy='9.5' r='3'/%3E%3Ccircle cx='9' cy='14' r='3'/%3E%3Ccircle cx='15' cy='14' r='3'/%3E%3C/g%3E%3Ccircle cx='12' cy='10.5' r='2.6' fill='%23FFD25A'/%3E%3C/svg%3E")}
.pg-pal-arbre{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='10.5' y='14' width='3' height='8' rx='1' fill='%238A5A2B'/%3E%3Ccircle cx='12' cy='9' r='7' fill='%233BB273' stroke='%232F8540' stroke-width='1.4'/%3E%3C/svg%3E")}
.pg-pal-foret{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3 2 13h3l-3 6h10l-3-6h3z' fill='%232F8540'/%3E%3Cpath d='M17 2l-5 10h3l-3 7h10l-3-7h3z' fill='%233BB273' stroke='%232F8540' stroke-width='1'/%3E%3Cpath d='M17 1.5l.6 1.3 1.4.2-1 1 .2 1.4-1.2-.7-1.2.7.2-1.4-1-1 1.4-.2z' fill='%23FFD25A'/%3E%3C/svg%3E")}
.pg-ligue{list-style:none;padding:0;margin:10px 0;display:grid;gap:8px}
.pg-ligue li{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:16px;border:2px solid var(--pg-trait);background:var(--pg-fond);min-width:0}
.pg-ligue li.moi{border-color:var(--pg-vert);background:color-mix(in srgb,var(--pg-vert) 10%,var(--pg-fond))}
.pg-ligue li.monte{box-shadow:inset 4px 0 0 var(--pg-vert)}
.pg-ligue b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-ligue .pg-pal{width:22px;height:22px}
.pg-rang{width:26px;flex:none;display:grid;place-items:center}
.pg-med{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;font-size:.82rem}
.pg-med.m1{background:#E8B520}.pg-med.m2{background:#A7B0BA}.pg-med.m3{background:#CD8A4E}
.pg-lxp{flex:none;font-weight:800;font-size:.86rem;text-align:right}
.pg-monte{display:block;color:var(--pg-vert);font-size:.7rem}

/* Moi : Mes progrès */
.pg-moi{margin:16px 0;padding:16px 14px;border-radius:20px;border:2px solid color-mix(in srgb,var(--pg-bleu) 30%,var(--pg-trait));background:var(--pg-fond);box-shadow:0 5px 0 color-mix(in srgb,var(--pg-bleu) 30%,var(--pg-trait))}
.pg-moi h4{margin:18px 0 8px;font:800 .98rem var(--display,inherit)}
.pg-moi-h{display:flex;align-items:center;gap:12px}.pg-moi-h>div{flex:1;min-width:0}
.pg-moi-h b{display:block;font:800 1.2rem var(--display,inherit)}.pg-moi-h small{display:block;color:var(--pg-doux);font-size:.84rem}
.pg-moi-av .pg-deco{width:64px;height:64px}
.pg-niv-l{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;margin-top:6px;font-weight:800;font-size:.84rem}
.pg-niv-bar{flex:1;min-width:80px;height:8px;border-radius:999px;background:color-mix(in srgb,var(--pg-trait) 80%,transparent);overflow:hidden}
.pg-niv-bar i{display:block;height:100%;background:var(--pg-violet);border-radius:999px}
.pg-niv-l small{flex-basis:100%;margin:0;font-weight:700}
.pg-gros{margin:14px 0 4px;padding:12px 14px;border-radius:16px;background:color-mix(in srgb,var(--pg-bleu) 10%,var(--pg-fond));font-weight:700;line-height:1.35}
.pg-gros.up{background:color-mix(in srgb,var(--ok,#1F8A4C) 13%,var(--pg-fond))}.pg-gros b{font:800 1.5rem var(--display,inherit);color:var(--t-good,#1F8A4C)}
.pg-ks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.pg-k{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px;border-radius:14px;border:2px solid var(--pg-trait);min-width:0}
.pg-k .i{color:var(--pg-bleu)}.pg-k b{font:800 1.3rem var(--display,inherit)}.pg-k small{font-size:.72rem;line-height:1.2;color:var(--pg-doux)}
.pg-sems{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;align-items:end;height:120px}
.pg-sem{display:flex;flex-direction:column;align-items:center;gap:3px;height:100%;min-width:0}
.pg-sem b{font-size:.8rem}.pg-sem small{font-size:.64rem;color:var(--pg-doux);white-space:nowrap}
.pg-sem .col{flex:1;width:70%;display:flex;align-items:flex-end;border-radius:8px;background:color-mix(in srgb,var(--pg-trait) 50%,transparent)}
.pg-sem .col i{display:block;width:100%;border-radius:8px;background:color-mix(in srgb,var(--pg-bleu) 55%,var(--pg-fond))}
.pg-sem.now .col i{background:var(--pg-bleu)}
.pg-nouv{display:flex;flex-wrap:wrap;gap:6px}
.pg-nouv span{display:inline-flex;align-items:center;gap:4px;padding:6px 10px;border-radius:999px;background:var(--t-good-bg,#E1F4E8);color:var(--t-good,#1F8A4C);font-weight:700;font-size:.82rem}
.pg-mat{border:2px solid var(--pg-trait);border-radius:14px;margin:8px 0;padding:0 10px}
.pg-mat summary{display:flex;justify-content:space-between;align-items:center;min-height:44px;cursor:pointer;list-style:none}
.pg-mat summary::-webkit-details-marker{display:none}.pg-mat summary small{color:var(--pg-doux);font-weight:800}
.pg-aa{display:grid;grid-template-columns:1fr auto;gap:4px 8px;align-items:center;padding:8px 0;border-top:1px solid var(--pg-trait)}
.pg-aa .nm{font-weight:700;font-size:.88rem;min-width:0}
.pg-aa-bar{grid-column:1/-1;position:relative;height:10px;border-radius:999px;background:color-mix(in srgb,var(--pg-trait) 60%,transparent);overflow:hidden}
.pg-aa-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:999px}
.pg-aa-bar .ap{background:var(--pg-bleu)}.pg-aa-bar .av{background:color-mix(in srgb,var(--pg-bleu) 35%,var(--pg-fond));z-index:1;border-right:2px solid var(--ink);border-radius:999px 0 0 999px}
.pg-aa .pg-niv{grid-row:1;grid-column:2}
.pg-notes{display:flex;gap:6px;align-items:flex-start;margin:6px 0;font-weight:700;font-size:.88rem}.pg-notes.up i{color:var(--t-good,#1F8A4C)}

/* effet de fête choisi (confettis : couleur dominante) */
html[data-pg-effet="bulles"] canvas{filter:hue-rotate(160deg)}
html[data-pg-effet="etoiles"] canvas{filter:sepia(1) saturate(4) hue-rotate(5deg)}
html[data-pg-effet="feux"] canvas{filter:saturate(2) contrast(1.2)}

@media (prefers-reduced-motion: reduce){.pg-sp,.pg-chip,.pg-t{transition:none}.pg-petit{transition:none}.pop{animation:none!important}}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--pg-or-d:#F2C46B}
  :root:not([data-theme="light"]) .pg-fete{background:rgba(0,0,0,.6)}
  :root:not([data-theme="light"]) .pg-deco{border-color:#2A2838}}
:root[data-theme="dark"]{--pg-or-d:#F2C46B}
:root[data-theme="dark"] .pg-fete{background:rgba(0,0,0,.6)}
:root[data-theme="dark"] .pg-deco{border-color:#2A2838}

/* menu Ogrelo (bouton du milieu) : la session parfaite en tête, au-dessus de l'éventail */
.om-sp{position:absolute;left:50%;top:calc(var(--cy) - 395px);transform:translate(-50%,8px);opacity:0;transition:.25s .05s;display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;text-align:left;
  width:min(300px,calc(100vw - 32px));padding:10px 16px;border:0;border-radius:20px;color:#fff;cursor:pointer;background:linear-gradient(150deg,#FFC23A,#EC820C);box-shadow:0 5px 0 #B85F00,0 12px 22px rgba(0,0,0,.28)}
.om-sp .om-sp-ic{grid-row:span 2;width:34px;height:34px}.om-sp b{font:800 1.05rem var(--display,inherit)}.om-sp small{font-weight:700;font-size:.78rem;opacity:.95}
.om.ouvert .om-sp{opacity:1;transform:translate(-50%,0)}
.om:has(.om-sp) .om-t{top:calc(var(--cy) - 445px)}
.om-sp .om-sp-ic svg{width:100%;height:100%}
@media (prefers-reduced-motion:reduce){.om-sp{transition:none}}

/* phase 2 : rappel doux, émotes, looks achetables, fond / cadre dans les défis et les groupes */
.pg-revoir{display:inline-flex;align-items:center;gap:4px;margin-top:4px;padding:2px 9px;border-radius:999px;font-size:.78rem;font-weight:800;background:color-mix(in srgb,var(--pg-bleu) 14%,var(--pg-fond));color:color-mix(in srgb,var(--pg-bleu) 80%,var(--ink));border:1.5px solid color-mix(in srgb,var(--pg-bleu) 35%,var(--pg-trait));width:max-content}
.pg-emo{width:1.6em;height:1.6em}
.pg-emo-v{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:color-mix(in srgb,var(--pg-or) 12%,var(--pg-fond))}.pg-emo-v .pg-emo{width:46px;height:46px}
.pg-a-toi{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:40px;width:100%;font-weight:800;color:var(--pg-vert)}
.df-av.df-deco{border:2px solid #fff;box-shadow:0 0 0 1.5px var(--line,#E4E2DA)}
.df-av.df-deco.pg-cadre-feuilles{border-color:#6DBF59;box-shadow:0 0 0 2px #2F8540}.df-av.df-deco.pg-cadre-etoiles{border-color:#FFE08A;box-shadow:0 0 0 2px #F7B733,0 0 8px 1px rgba(247,183,51,.6)}
.df-av.df-deco.pg-cadre-arcenciel{border-color:#fff;box-shadow:0 0 0 2px #F25F5C,0 0 0 4px #F7B733,0 0 0 6px #3BB273}.df-av.df-deco.pg-cadre-or{border-color:#FFD25A;box-shadow:0 0 0 2px #C98A10,0 0 10px 2px rgba(255,210,90,.7)}

.df-fab-menu .df-emo-l{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:250px}.df-fab-menu .df-emo-l:empty{display:none}
.df-fab-menu .df-emo-l button.df-emo{padding:6px;border-radius:50%;width:46px;height:46px;justify-content:center}.df-emo .pg-emo{width:30px;height:30px}
.df-emo-b{display:block}.df-emo-b .pg-emo{width:30px;height:30px}
.av-look.ferme.achat svg{filter:saturate(.7);opacity:.7}
.av-prix{position:absolute;right:2px;bottom:2px;display:inline-flex;align-items:center;gap:2px;padding:1px 6px 1px 2px;border-radius:999px;background:#fff;color:#7A5200;font-size:.72rem;font-weight:800;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.av-croc{width:14px;height:14px;vertical-align:-2px}
.av-acheter{margin-left:6px;min-height:36px;padding:4px 12px;border-radius:12px;border:2px solid color-mix(in srgb,var(--pg-or) 55%,var(--pg-trait));background:color-mix(in srgb,var(--pg-or) 22%,var(--pg-fond));color:var(--ink);font:inherit;font-weight:800;cursor:pointer}
.av-buy-err{color:var(--crit,#C2412F);font-weight:700}

.av-look .av-prix svg.av-croc{width:14px;height:14px}
/* ogre dessiné (Nano Banana) dans un petit rond : zoom sur le buste selon l'étape (le dessin occupe le bas de sa case) */
.pg-deco svg.ogre-art,.df-av svg.ogre-art{margin-top:0;width:100%;height:100%}

/* bandeau dans Moi : icône dans un rond teinté, bien séparée du texte ; 2 × 2 sur téléphone, 4 de front sur grand écran */
.pg-moi .pg-chips{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 16px}
@media (min-width:560px){.pg-moi .pg-chips{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pg-moi .pg-chip{justify-content:flex-start;gap:10px;min-height:56px;padding:8px 12px;font-size:1rem}
.pg-moi .pg-chip>.pg-ic{width:34px;height:34px;padding:6px;border-radius:50%;flex:none;box-sizing:border-box}
.pg-moi .pg-ch-serie>.pg-ic{background:color-mix(in srgb,#FF8A1F 16%,transparent)}
.pg-moi .pg-ch-niv>.pg-ic{background:color-mix(in srgb,#8E44EC 15%,transparent)}
.pg-moi .pg-ch-crocs>.pg-ic{background:color-mix(in srgb,#F7B733 20%,transparent)}
.pg-moi .pg-anneau{width:34px;height:34px;-webkit-mask:radial-gradient(circle,transparent 11px,#000 12px);mask:radial-gradient(circle,transparent 11px,#000 12px)}
.pg-moi .pg-ch-niv b{font-size:.92rem}
.pg-moi .pg-chip small{margin-left:-6px}

/* ---------- boutique (progres.js boutique) : grandes cartes, prix lisible, états porté / à moi / à acheter / pas assez / bientôt / verrouillé ---------- */
.pg-bq .pg-in{max-width:880px}
.bq-hero{display:flex;align-items:center;gap:16px;padding:14px;border-radius:22px;border:2px solid color-mix(in srgb,var(--pg-or) 45%,var(--pg-trait));background:color-mix(in srgb,var(--pg-or) 9%,var(--pg-fond));box-shadow:0 5px 0 color-mix(in srgb,var(--pg-or) 45%,var(--pg-trait))}
.bq-hero-av .pg-deco{width:112px;height:112px;border-width:4px}
.bq-hero-tx{flex:1;min-width:0}.bq-hero-tx b{display:block;font:800 1.25rem/1.1 var(--display,inherit)}
.bq-hero-tx small{display:inline-flex;align-items:center;gap:4px;margin-top:4px;font-weight:800;color:var(--pg-violet)}.bq-hero-tx small .pg-ic{width:18px;height:18px}
.bq-hero-tx p{margin:8px 0 0;font-size:.9rem;line-height:1.35;color:var(--pg-doux);font-weight:600}
.bq-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:26px 0 10px!important;font:800 1.12rem var(--display,inherit)}
.bq-h small{font:700 .82rem var(--body,inherit);color:var(--pg-doux)}
.bq-grille{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:560px){.bq-grille{grid-template-columns:repeat(3,1fr)}.bq-grille.petite{grid-template-columns:repeat(4,1fr)}}
@media (min-width:760px){.bq-grille{grid-template-columns:repeat(4,1fr)}.bq-grille.petite{grid-template-columns:repeat(5,1fr)}}
.bq-c{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:12px 10px 12px;border-radius:20px;border:2px solid var(--pg-trait);background:var(--pg-fond);
  box-shadow:0 4px 0 var(--pg-trait);color:var(--ink);cursor:pointer;text-align:center;font:inherit;transition:transform .08s}
.bq-c:active{transform:translateY(3px);box-shadow:0 1px 0 var(--pg-trait)}
.bq-c:focus-visible,.bq-et:focus-visible{outline:3px solid var(--pg-bleu);outline-offset:2px}
.bq-v{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1;max-width:150px;border-radius:16px;background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--pg-or) 14%,var(--pg-fond)),var(--pg-fond) 70%)}
.bq-v>svg{width:100%;height:100%}
.bq-grille.petite .bq-v{max-width:96px;background:none}.bq-grille.petite .pg-deco{width:76px;height:76px}
.bq-nom{font:800 .95rem/1.15 var(--display,inherit)}
.bq-e{display:inline-flex;align-items:center;justify-content:center;gap:5px;width:100%;min-height:40px;padding:6px 8px;border-radius:12px;font-weight:800;font-size:.95rem;border:2px solid var(--pg-trait)}
.bq-e.prix{background:color-mix(in srgb,var(--pg-or) 24%,var(--pg-fond));border-color:color-mix(in srgb,var(--pg-or) 60%,var(--pg-trait));color:color-mix(in srgb,var(--pg-or-d) 70%,var(--ink));font-size:1.08rem}
.bq-e.prix .pg-ic{width:22px;height:22px}
.bq-e.a{color:var(--pg-bleu);border-color:color-mix(in srgb,var(--pg-bleu) 45%,var(--pg-trait))}
.bq-e.porte{color:#fff;background:var(--ok,#1F8A4C);border-color:var(--ok,#1F8A4C)}
.bq-e.bientot{color:var(--pg-doux);background:color-mix(in srgb,var(--pg-trait) 50%,var(--pg-fond))}
.bq-encore{font-size:.74rem;font-weight:700;color:var(--pg-doux);margin-top:-2px}
.bq-c.manque .bq-e.prix{opacity:.6}
.bq-c.porte{border-color:var(--ok,#1F8A4C);box-shadow:0 4px 0 color-mix(in srgb,var(--ok,#1F8A4C) 60%,var(--pg-trait));background:color-mix(in srgb,var(--ok,#1F8A4C) 6%,var(--pg-fond))}
.bq-c.a{border-color:color-mix(in srgb,var(--pg-bleu) 35%,var(--pg-trait))}
.bq-pastille{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--ok,#1F8A4C);color:#fff;font-size:.95rem;box-shadow:0 2px 0 rgba(0,0,0,.15)}
.bq-c.bientot,.bq-et.bientot{border-style:dashed;box-shadow:none;background:color-mix(in srgb,var(--pg-trait) 25%,var(--pg-fond))}
.bq-c.bientot .bq-v>svg,.bq-et.bientot .bq-v>svg{filter:grayscale(1);opacity:.45}
.bq-c.bientot .bq-nom,.bq-et.bientot .bq-nom{color:var(--pg-doux)}
.bq-ruban{position:absolute;top:10px;left:50%;transform:translateX(-50%);padding:3px 10px;border-radius:999px;background:var(--ink,#22261F);color:var(--paper,#fff);font:800 .72rem var(--display,inherit);letter-spacing:.02em;white-space:nowrap}
.bq-c.verrou .bq-v>svg,.bq-et.verrou .bq-v>svg{filter:saturate(.35) brightness(.98);opacity:.7}
.bq-cad{position:absolute;right:6%;bottom:6%;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--ink,#22261F);color:var(--paper,#fff);font-size:1rem;box-shadow:0 0 0 3px var(--pg-fond)}
.bq-cond{font-size:.8rem;font-weight:700;line-height:1.25;color:var(--pg-doux)}
.bq-bar{display:block;width:100%;height:10px;border-radius:999px;background:color-mix(in srgb,var(--pg-trait) 80%,transparent);overflow:hidden}
.bq-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#B07CF5,var(--pg-violet))}
.bq-bar.gros{height:14px;margin:6px 0 2px}
.bq-etapes{display:flex;align-items:stretch;gap:6px;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x proximity}
.bq-fl{align-self:center;flex:none;color:var(--pg-doux);font-size:1rem}
.bq-et{position:relative;flex:1 0 112px;display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 8px;border-radius:18px;border:2px solid var(--pg-trait);background:var(--pg-fond);box-shadow:0 4px 0 var(--pg-trait);color:var(--ink);cursor:pointer;font:inherit;text-align:center;scroll-snap-align:start}
.bq-et .bq-v{max-width:92px;border-radius:50%}
.bq-et.actuelle{border-color:var(--pg-violet);box-shadow:0 4px 0 color-mix(in srgb,var(--pg-violet) 55%,var(--pg-trait));background:color-mix(in srgb,var(--pg-violet) 8%,var(--pg-fond))}
.bq-et.actuelle .bq-cond{color:var(--pg-violet)}
.bq-et.passe .bq-cond{color:var(--ok,#1F8A4C)}
.bq-demo{padding:8px 12px;border-radius:12px;background:color-mix(in srgb,var(--pg-or) 14%,var(--pg-fond))}
/* la fiche d'un objet : aperçu en grand, une décision */
.bq-fiche{position:fixed;inset:0;z-index:950;display:flex;align-items:flex-end;justify-content:center;background:rgba(20,22,18,.45);opacity:0;transition:opacity .18s}
.bq-fiche.on{opacity:1}
.bq-fiche-in{position:relative;width:min(520px,100%);max-height:92vh;overflow:auto;display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 16px calc(18px + env(safe-area-inset-bottom));
  border-radius:26px 26px 0 0;background:var(--paper,#F6F5F0);border:2px solid var(--pg-trait);border-bottom:0;text-align:center;transform:translateY(24px);transition:transform .2s}
.bq-fiche.on .bq-fiche-in{transform:none}
@media (min-width:640px){.bq-fiche{align-items:center}.bq-fiche-in{border-radius:26px;border-bottom:2px solid var(--pg-trait)}}
.bq-fiche-x{position:absolute;top:10px;right:10px;width:44px;height:44px;border-radius:14px;border:2px solid var(--pg-trait);background:var(--pg-fond);color:var(--ink);display:grid;place-items:center;font-size:1.1rem;cursor:pointer}
.bq-apercu{display:grid;place-items:center;width:min(220px,62vw);aspect-ratio:1;border-radius:28px;background:radial-gradient(circle at 50% 58%,color-mix(in srgb,var(--pg-or) 22%,var(--pg-fond)),var(--pg-fond) 72%);border:2px solid var(--pg-trait)}
.bq-apercu>svg{width:100%;height:100%}.bq-apercu .pg-deco{width:78%;height:78%;border-width:5px}
.bq-apercu.bientot>svg{filter:grayscale(1);opacity:.45}.bq-apercu.verrou>svg{filter:saturate(.5)}
.bq-apercu.gagne{border-color:var(--ok,#1F8A4C);animation:bqPop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes bqPop{0%{transform:scale(.7)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.bq-apercu.gagne{animation:none}.bq-fiche,.bq-fiche-in{transition:none}}
.bq-fiche h3{margin:6px 0 0;font:800 1.35rem var(--display,inherit)}
.bq-fiche-s{margin:0;color:var(--pg-doux);font-weight:700;line-height:1.4;max-width:42ch}
.bq-fiche-s .gi-check{color:var(--ok,#1F8A4C)}
.bq-fiche-prix{display:flex;align-items:center;gap:6px;margin:0;font:800 1.6rem var(--display,inherit);color:color-mix(in srgb,var(--pg-or-d) 75%,var(--ink))}.bq-fiche-prix .pg-ic{width:30px;height:30px}
.bq-fiche .btn{width:100%;max-width:360px;display:inline-flex;align-items:center;justify-content:center;gap:6px}.bq-fiche .btn .pg-ic{width:22px;height:22px}
.bq-fiche .linkbtn2{min-height:44px}
.bq-reste{color:var(--pg-doux);font-weight:700}
.bq-comment{display:flex;align-items:center;gap:6px;margin:4px 0 0;font-size:1.02rem}
.bq-manque{margin:2px 0 0;line-height:1.4;max-width:44ch}
.bq-gagner{list-style:none;margin:2px 0 6px;padding:0;width:100%;max-width:400px;display:grid;gap:6px}
.bq-gagner li{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:14px;background:var(--pg-fond);border:2px solid var(--pg-trait);font-weight:700;text-align:left}
.bq-gagner li span:nth-child(2){flex:1}.bq-gagner .i{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--pg-or) 25%,var(--pg-fond));color:var(--pg-or-d);flex:none}
.bq-gagner b{display:inline-flex;align-items:center;gap:3px;color:color-mix(in srgb,var(--pg-or-d) 75%,var(--ink))}.bq-gagner b .pg-ic{width:18px;height:18px}
.bq-gel-gros .pg-ic{width:110px;height:110px}
.pg-effet-v.gros,.pg-emo-v.gros{width:150px;height:150px}.pg-emo-v.gros .pg-ic{width:96px;height:96px}
@media (max-height:760px){.bq-apercu{width:min(150px,30vh)}.bq-fiche-in{gap:6px}}
.bq-journal{margin:12px 0 0;border:2px solid var(--pg-trait);border-radius:16px;background:var(--pg-fond)}
.bq-journal summary{display:flex;align-items:center;gap:8px;min-height:48px;padding:8px 14px;cursor:pointer;list-style:none}
.bq-journal summary::-webkit-details-marker{display:none}.bq-journal summary b{flex:1}.bq-journal summary .pg-ic{width:22px;height:22px}
.bq-journal[open] summary .gi-bas{transform:rotate(180deg)}
.bq-journal ul{list-style:none;margin:0;padding:0 14px 10px}
.bq-journal li{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--pg-trait)}
.bq-journal li span{flex:1;font-weight:700}.bq-journal li small{color:var(--pg-doux)}
.bq-journal li b{min-width:52px;text-align:right;font-weight:800}.bq-journal li b.plus{color:var(--ok,#1F8A4C)}.bq-journal li b.moins{color:var(--pg-doux)}

/* Ogrelo · LA bulle d'Ogrelo (composant commun, chargé en dernier : il l'emporte sur les anciens styles de chaque page).
   Même forme partout : fond vert très doux, contour vert, coins arrondis, queue qui pointe vers le visage d'Ogrelo (à gauche, en bas),
   texte « écrit à la main », bien aéré ; contraste vérifié en clair et en sombre. Le texte s'écrit lettre par lettre (bubble.js · ecrireLettre).
   Nouvelles bulles : <div class="og-dit"><span class="f">${ogreSVG('happy')}</span><div class="og-bulle"><p>…</p></div></div> */
:root{--bul-bg:#F1F9EC;--bul-bd:#9FD08F;--bul-ink:#24323A;--bul-fort:#2F6E24;--bul-ombre:0 6px 0 #DCEFD3,0 10px 22px rgba(46,110,36,.12)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bul-bg:#26362C;--bul-bd:#4F8A43;--bul-ink:#F2F5EC;--bul-fort:#A6E394;--bul-ombre:0 6px 0 #1A251E,0 10px 22px rgba(0,0,0,.35)}}
:root[data-theme="dark"]{--bul-bg:#26362C;--bul-bd:#4F8A43;--bul-ink:#F2F5EC;--bul-fort:#A6E394;--bul-ombre:0 6px 0 #1A251E,0 10px 22px rgba(0,0,0,.35)}

/* 1. l'ensemble visage + bulle : visage en bas à gauche, bulle à côté (la queue a sa place) */
.og-dit,.hello,.g-say,.gt-dit,.lg-dit,.ec-grignon,.pm-bulle,.h-conn,.h-mood,.c-him,.r-him{display:flex;align-items:flex-end!important;gap:14px!important}
.og-dit{margin:6px 0 24px}
.og-dit>.f,.gt-dit>.f,.lg-dit>.f,.ec-grignon>.f,.h-conn>.f,.h-mood>.f{flex:none;width:60px;height:60px}
.og-dit>.f svg,.gt-dit>.f svg,.lg-dit>.f svg,.ec-grignon>.f svg,.h-conn>.f svg,.h-mood>.f svg,.og-dit>.f .ogre,.h-conn .f .ogre,.h-mood .f .ogre{width:100%!important;height:100%!important}
.pm-bulle>svg{width:56px!important;height:56px!important}
/* les anciens cadres autour du visage disparaissent : seule la bulle reste */
.h-conn,.h-mood{background:none!important;border:0!important;padding:0!important;box-shadow:none!important}

/* 2. la bulle */
.og-bulle,.bubble,.g-say-b,.gt-dit>p,.lg-dit>p,.lg-dit>.lg-dd,.ec-dit,.pm-bulle>p,.h-conn>.t,.h-mood>.t,.lg-chat .lui>div{
  position:relative;flex:1;min-width:0;margin:0 0 4px 0!important;background:var(--bul-bg)!important;color:var(--bul-ink)!important;
  border:2px solid var(--bul-bd)!important;border-radius:22px 22px 22px 8px!important;padding:14px 18px!important;box-shadow:var(--bul-ombre)!important;filter:none!important;
  animation:bIn .4s cubic-bezier(.2,1.4,.4,1) both;transform-origin:0 100%;text-align:left}
.og-bulle p,.bubble p,.g-say-b p,.gt-dit>p,.lg-dit>p,.lg-dit>.lg-dd,.ec-dit p,.pm-bulle>p,.h-conn>.t p,.h-mood>.t p,.lg-chat .lui p.tw,.og-bulle .big,.bubble .big{
  font-family:"Patrick Hand","Comic Sans MS",cursive;font-size:1.16rem;line-height:1.4;letter-spacing:.01em;color:var(--bul-ink)}
.og-bulle p,.bubble p,.g-say-b p,.ec-dit p,.h-conn>.t p,.h-mood>.t p{margin:0}
.og-bulle p+p,.bubble p+p,.g-say-b p+p,.ec-dit p+p{margin-top:8px}
.og-bulle b,.bubble b,.g-say-b b,.gt-dit>p b,.lg-dit>p b,.lg-dit>.lg-dd p b,.ec-dit b,.pm-bulle>p b,.h-conn>.t b,.h-mood>.t b{color:var(--bul-fort)}
.h-conn>.t>b,.bubble .big{font-family:var(--display);font-size:1.15rem;display:block;margin-bottom:4px}
.h-conn>.t .btn,.h-mood>.t .btn{margin:12px 0 0}
.ec-dit .rel{color:color-mix(in srgb,var(--bul-ink) 70%,transparent)}
/* la queue : un petit losange qui continue le contour, pointé vers la bouche d'Ogrelo */
.og-bulle::before,.bubble::before,.g-say-b::before,.gt-dit>p::before,.lg-dit>p::before,.lg-dit>.lg-dd::before,.ec-dit::before,.pm-bulle>p::before,.h-conn>.t::before,.h-mood>.t::before,.lg-chat .lui>div::before{
  content:""!important;position:absolute!important;left:-9px!important;right:auto!important;top:auto!important;bottom:14px!important;width:16px!important;height:16px!important;
  background:var(--bul-bg)!important;border:0!important;border-left:2px solid var(--bul-bd)!important;border-bottom:2px solid var(--bul-bd)!important;
  clip-path:polygon(0 0,0 100%,100% 100%)!important;transform:rotate(45deg) skew(8deg,8deg)!important;border-radius:0 0 0 4px!important}
.og-bulle::after,.bubble::after,.g-say-b::after,.gt-dit>p::after,.lg-dit>p::after,.lg-dit>.lg-dd::after,.lg-chat .lui>div::after{content:none!important}
/* bulle sans visage à côté (consigne, prononciation) : pas de queue */
.og-bulle.seule::before{display:none!important}

/* 3. le chat d'Ogrelo : mini-visage à gauche de chaque série de messages, même bulle ; l'élève à droite, en bleu */
.g-body .g-msg.him{position:relative;margin-left:44px;max-width:calc(100% - 56px);background:var(--bul-bg)!important;color:var(--bul-ink)!important;border:2px solid var(--bul-bd)!important;
  border-radius:20px 20px 20px 8px!important;padding:12px 16px!important;box-shadow:var(--bul-ombre);animation:bIn .3s cubic-bezier(.2,1.3,.4,1) both;transform-origin:0 100%}
.g-body .g-msg.him::before{content:"";position:absolute;left:-46px;bottom:-2px;width:34px;height:34px;border-radius:50%;background:var(--card) var(--ogre-mini,none) center/88% no-repeat;box-shadow:0 0 0 2px var(--bul-bd)}
.g-body .g-msg.him+.g-msg.him::before{visibility:hidden}
.g-body .g-msg.him:not(.g-flux)::after{content:"";position:absolute;left:-9px;bottom:8px;width:16px;height:16px;background:var(--bul-bg);border-left:2px solid var(--bul-bd);border-bottom:2px solid var(--bul-bd);clip-path:polygon(0 0,0 100%,100% 100%);transform:rotate(45deg) skew(8deg,8deg);border-radius:0 0 0 4px}
.g-body .g-msg.me{position:relative;background:linear-gradient(150deg,#3A86D6,#2471AE);color:#fff;border-radius:20px 20px 8px 20px;padding:11px 16px;box-shadow:0 4px 0 #1B5687;animation:bIn .3s ease both;transform-origin:100% 100%}
.g-body .g-msg.g-typing{display:flex;gap:5px;align-items:center;min-height:46px;align-self:flex-start}
.lg-chat .lui{gap:12px!important;align-items:flex-end}
.lg-chat .lui>div{padding:11px 15px!important}

/* 4. la visite guidée : même teinte de texte, écriture à la main */
.vg-txt{font-family:"Patrick Hand","Comic Sans MS",cursive;font-size:1.12rem!important;line-height:1.4}

/* 5. état vide (cartes, défis, groupes) : la phrase d'Ogrelo devient une bulle, queue vers le haut (Ogrelo est au-dessus) */
.cm-vide>p{position:relative;max-width:440px;margin:14px auto 22px!important;background:var(--bul-bg);color:var(--bul-ink)!important;border:2px solid var(--bul-bd);border-radius:22px;padding:14px 18px;box-shadow:var(--bul-ombre);
  font-family:"Patrick Hand","Comic Sans MS",cursive;font-size:1.12rem;line-height:1.4}
.cm-vide>p::before{content:"";position:absolute;left:50%;top:-9px;width:16px;height:16px;margin-left:-8px;background:var(--bul-bg);border-left:2px solid var(--bul-bd);border-top:2px solid var(--bul-bd);transform:rotate(45deg);clip-path:polygon(0 0,100% 0,0 100%)}

@media (max-width:380px){.og-dit>.f,.gt-dit>.f,.lg-dit>.f,.ec-grignon>.f,.h-conn>.f,.h-mood>.f{width:50px;height:50px}
  .og-bulle,.bubble,.g-say-b,.gt-dit>p,.lg-dit>p,.lg-dit>.lg-dd,.ec-dit,.pm-bulle>p,.h-conn>.t,.h-mood>.t{padding:12px 15px!important}
  .og-bulle p,.bubble p,.g-say-b p,.gt-dit>p,.lg-dit>p,.lg-dit>.lg-dd,.ec-dit p,.pm-bulle>p,.h-conn>.t p,.h-mood>.t p{font-size:1.08rem}}
@media (prefers-reduced-motion: reduce){.og-bulle,.bubble,.g-say-b,.gt-dit>p,.lg-dit>p,.lg-dit>.lg-dd,.ec-dit,.pm-bulle>p,.h-conn>.t,.h-mood>.t,.lg-chat .lui>div,.g-body .g-msg{animation:none}}

/* Ogrelo · texte « aéré » (aerer.js) : paragraphes courts, listes, cartes douces (À retenir, Attention, Exemple, Astuce),
   définitions, citations, dates et nombres dans la couleur de la matière. Clair et sombre ; contrastes AA vérifiés
   (couleur de matière mêlée à l'encre : ≥ 4,5:1 sur la carte et sur les fonds teintés, dans les deux thèmes). */
:root{
  --ae-retenir:#2E7D32;--ae-attention:#B54708;--ae-exemple:#1D63A6;--ae-astuce:#8A5A00;   /* textes des étiquettes (clair) */
  --ae-retenir-f:var(--ogre,#5BA84A);--ae-attention-f:var(--pumpkin,#FF8A3D);--ae-exemple-f:var(--sky,#3C9DE0);--ae-astuce-f:var(--sun,#FFC83D);   /* teinte des cartes */
  --ae-n-mix:64%;--ae-n-vers:var(--ink,#2B2A3A)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--ae-retenir:#8FD88A;--ae-attention:#FFB077;--ae-exemple:#8CC8F5;--ae-astuce:#FFD36B;--ae-n-mix:45%;--ae-n-vers:#F5F1E6}}
:root[data-theme="dark"]{--ae-retenir:#8FD88A;--ae-attention:#FFB077;--ae-exemple:#8CC8F5;--ae-astuce:#FFD36B;--ae-n-mix:45%;--ae-n-vers:#F5F1E6}

/* lecture confortable : lignes de 65 caractères au plus, interligne large, de l'air entre les paragraphes */
.ae{line-height:1.6;hyphens:manual;overflow-wrap:break-word;white-space:normal}
.ae>p,.ae-carte p,.ae-cite p,.ae-liste{max-width:65ch}
.ae>p{margin:0 0 .75em}
.ae>:last-child,.ae-carte>div>:last-child,.ae-cite>:last-child{margin-bottom:0}
.ae>:first-child{margin-top:0}
.blk .ae+.ae{margin-top:.75em}
.ae b{font-weight:800}

/* listes issues d'une énumération : puces rondes de la couleur de la matière */
.ae-liste{margin:.2em 0 .85em;padding-left:1.45em}
.ae-liste li{margin:.35em 0;padding-left:.15em}
ul.ae-liste li::marker{color:color-mix(in srgb,var(--ae-c,var(--ogre,#5BA84A)) 80%,var(--ink));font-size:1.15em}
ol.ae-liste li::marker{color:color-mix(in srgb,var(--ae-c,var(--ogre,#5BA84A)) var(--ae-n-mix),var(--ae-n-vers));font-weight:800}

/* définition : petit trait de couleur à gauche, le mot en gras, la phrase surlignée (mark.hl) */
.ae-def{border-left:4px solid color-mix(in srgb,var(--ae-c,var(--ogre,#5BA84A)) 70%,var(--line));padding:.1em 0 .1em .7em;border-radius:2px}

/* surligneur doux (même jaune que les cartes, clair et sombre) */
html:root .ae mark.hl{--hl:#FFE27A;background:linear-gradient(transparent 12%,var(--hl) 12%,var(--hl) 90%,transparent 90%);color:inherit;border-radius:4px;padding:0 .15em;-webkit-box-decoration-break:clone;box-decoration-break:clone;font-weight:inherit}   /* plus fort que mark.hl de connexion.css (gras 800) : le mot défini reste seul en gras */
@media (prefers-color-scheme: dark){html:root:not([data-theme="light"]) .ae mark.hl{--hl:#7A6514;color:#FFF6D6}}
html:root[data-theme="dark"] .ae mark.hl{--hl:#7A6514;color:#FFF6D6}

/* dates et nombres avec unité : couleur de la matière, assombrie (clair) ou éclaircie (sombre) pour rester lisible */
.ae-n{color:color-mix(in srgb,var(--ae-c,#1F78B8) var(--ae-n-mix),var(--ae-n-vers));font-weight:700;white-space:nowrap}
.ae mark .ae-n{color:inherit}

/* étiquettes en couleur (« Attention : », « Exemple : »…) */
.ae-lab{font-weight:800}
.ae-lab.ae-retenir{color:var(--ae-retenir)}.ae-lab.ae-attention{color:var(--ae-attention)}.ae-lab.ae-exemple{color:var(--ae-exemple)}.ae-lab.ae-astuce{color:var(--ae-astuce)}

/* cartes douces façon Duolingo : contour franc, fond à peine teinté, ombre pleine dessous, icône SVG */
.ae-carte{--k:var(--ae-retenir-f);--kt:var(--ae-retenir);display:flex;gap:10px;align-items:flex-start;margin:.2em 0 .85em;padding:10px 12px 11px;
  background:color-mix(in srgb,var(--k) 10%,var(--card));border:var(--duo-bord,2px) solid color-mix(in srgb,var(--k) 42%,var(--line));
  border-radius:var(--duo-r-s,14px);box-shadow:0 3px 0 color-mix(in srgb,var(--k) 38%,var(--line))}
.ae-carte>i{flex:none;width:1.25em;height:1.25em;margin-top:.15em;font-size:1.05em;color:var(--kt)}
.ae-carte>div{min-width:0;flex:1}
.ae-carte p{margin:0 0 .5em}
.ae-carte .ae-liste{margin-bottom:.2em}
.ae-carte.ae-attention{--k:var(--ae-attention-f);--kt:var(--ae-attention)}
.ae-carte.ae-exemple{--k:var(--ae-exemple-f);--kt:var(--ae-exemple)}
.ae-carte.ae-astuce{--k:var(--ae-astuce-f);--kt:var(--ae-astuce)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ae-carte{background:color-mix(in srgb,var(--k) 14%,var(--card))}}
:root[data-theme="dark"] .ae-carte{background:color-mix(in srgb,var(--k) 14%,var(--card))}

/* longue citation : retrait, trait gris, italique léger */
.ae-cite{margin:.2em 0 .85em;padding:.15em 0 .15em .85em;border-left:4px solid color-mix(in srgb,var(--soft) 55%,var(--line));color:var(--ink);font-style:italic}
.ae-cite p{margin:0 0 .6em}
.ae-brut{white-space:normal}

/* dans une bulle de chat : un peu plus serré */
.g-msg .ae>p{margin-bottom:.6em}
.g-msg .ae-carte{padding:8px 10px}

/* brevet : une longue consigne de partie se lit comme un texte (encre, pas gris) */
.bv-partie-t .ae p,.bv-partie-t .ae li{color:var(--ink);font-size:.98rem;line-height:1.55}

/* 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}
/* une seule barre pendant le quiz : le temps. La question et le score sont écrits au milieu */
html body .qp-prog{display:none!important}
html body .qp-barre{position:relative;justify-content:center;min-height:26px;margin:0 0 4px}
html body .qp-num{font-family:var(--display);font-size:1.15rem;font-weight:800}
html body .qp-barre .qp-sig{position:absolute;right:0;top:0}
html body .qp-pts{justify-content:center;text-align:center;width:100%}
/* numéro de la question, dans la bulle */
.qp-question{position:relative}.qp-q-num{position:absolute;top:12px;right:14px;font-family:var(--display);font-size:.95rem;font-weight:800;color:var(--q-tag,var(--soft))}.qp-q-num+h2{padding-right:52px}
/* figure d'une question (partie, défi, essai sans compte) : dans la carte, jamais plus large que l'écran */
.qp-question .fig,.df-q+.fig,.pa-erreurs .fig{max-width:340px;margin:10px auto 0}.df-q+.fig{margin-bottom:12px}

/* Ogrelo · garde des contenus (public/filigrane.js) : filigrane, pas de sélection sur les questions et corrigés, impression masquée, flou d'épreuve */
.garde-filigrane{position:fixed;inset:0;pointer-events:none;z-index:2147483000;background-repeat:repeat;display:none}
.garde-filigrane.on{display:block}
:is(.qp-jeu,.qp-choix,.qp-opt,.qp-titre,.exo,.exo-q,.exo-ch,.exo-corr,.exo-rep,.bv-doc,.bv-bonne,#mQuiz,#iFiche,#grFiche,.blk,.fhero,[data-protege]){-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
:is(.qp-jeu,.exo,.bv-doc,#mQuiz,#iFiche,#grFiche,.blk,.fhero,[data-protege]) :is(input,textarea,select,[contenteditable="true"]){-webkit-user-select:text;user-select:text}
.garde-flou-actif [data-garde-flou]{filter:blur(9px);transition:filter .15s}
.garde-verif{position:fixed;inset:0;z-index:2147483001;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);padding:16px}
.garde-verif>div{background:#fff;color:#1d1d1f;border-radius:16px;padding:20px;max-width:340px;text-align:center;font:16px/1.4 system-ui,sans-serif}
.garde-verif button{margin-top:12px;padding:10px 22px;border:0;border-radius:999px;background:#6c4cf1;color:#fff;font:600 16px system-ui,sans-serif}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .garde-verif>div{background:#22222a;color:#f2f2f5}}
:root[data-theme="dark"] .garde-verif>div{background:#22222a;color:#f2f2f5}
@media print{
  .garde-impr :is(.qp-jeu,.exo,.bv-doc,.bv-bonne,#mQuiz,#iFiche,#grFiche,.blk,.fhero,[data-protege],[data-garde-flou]){visibility:hidden!important}
  .garde-impr body::after{content:"Contenu protégé, © Ogrelo. L'impression des questions et des corrigés est désactivée.";display:block;font:14px system-ui,sans-serif;padding:16px}
}