/* =========================================================
   THÈME « Quiz arène » — la BASE commune de Doujani.fr (toutes les pages du thème).
   Le design de l'accueil, inspiré d'un jeu de quiz télévisé : grandes tuiles de couleur vive, arête sombre dessous.
   Aucun logo, aucun nom de marque. Choisi par l'utilisateur le 11/10/2026 après l'essai de dix directions artistiques,
   puis étendu à tout le site (plan _plan-1.0/rapports-1.0/plan-quiz-partout.md, lot S « socle » : cette feuille a été découpée).

   COMMENT UNE PAGE LE CHARGE (patron unique, sans script, marche aussi en file://) :
     <html lang="fr" data-theme="quiz">
     … <link rel="stylesheet" href="css/atelier.css">
     … <link rel="stylesheet" href="css/<feuilles propres à la page>.css">     (s'il y en a)
     … <link rel="stylesheet" href="css/themes/quiz.css">                        (cette BASE)
     … <link rel="stylesheet" href="css/themes/quiz-<groupe>.css">               (UN seul fichier de groupe par page)
   Fichiers : quiz.css (BASE) · quiz-accueil.css (index.html seulement) · puis, un par groupe : quiz-espace.css (moi, aquarium, collection,
   bilan, reglages) · quiz-info.css (accessibilite, donnees, guide) · quiz-portails.css (studio, monde, pix, techno, lecture, anglais, projets,
   vallee, ninja) · quiz-adultes.css (adultes). ia.html charge quiz.css et css/ia.css. Les activités (activites/**) ne chargent rien du thème.

   RÈGLES D'ÉCRITURE (toutes les feuilles du thème ; contrôle : _outils/test/quiz/prefixe.py) :
   1. Chaque sélecteur commence par html[data-theme="quiz"], même dans un @media : retirer data-theme="quiz" d'une page la ramène en arrière.
   2. Les couleurs viennent des jetons --q-*. Un jeton nouveau ne se crée QUE dans cette feuille (lot S, puis gelée).
   3. Pour colorer un .btn ou une .tile : poser --bg, --sh et --fg (fond, arête, texte), jamais background en direct.
   4. Une règle de page qui colore .btn, .tile, .card, .bubble, .modal, .overlay ou .toast perd contre cette BASE (0,2,1) : la réécrire
      dans la feuille de groupe, avec --bg / --sh / --fg.
   5. !important seulement pour répondre à un !important du cœur (anneau de focus de atelier.css, .mt-play).
   6. Aucune forme décorative (triangle, rond, losange, carré, motif de fond), aucune animation nouvelle, jamais background-attachment: fixed.
   7. Classes utilitaires nouvelles : préfixe qz- (le préfixe q- est pris dans les activités : .q-label, .q-text, .q-opts, .q-visual).
   8. Ne jamais changer la hauteur de .topbar, ni la taille de .pix-act, .pix-ecran, .pix-principal, .stage (le tableau et la Vallée les mesurent ;
      la hauteur de l'écran d'une activité se calcule avec --barre-site-bas et --barre-act-h, posées par le cœur).
      Barre de l'activité (« le personnage en grand », 02/11 : .pix-act.en-barre, .coach.en-barre, .c-rouvrir, .pix-coach-bas) et fenêtre du
      personnage (.perso-voile, .perso-fenetre, .perso-carte) : le thème n'y règle que des COULEURS (pointe de bulle, focus). Jamais sa hauteur,
      sa position collante (sticky, top), la taille de la bulle (2 lignes fixes, --bulle-barre), du rond (60 px, 44 px sur téléphone) ou de la
      fenêtre, ni son z-index (--z-perso) : la page ne doit jamais sauter d'une phrase à l'autre.
   9. Le focus du cœur sert aussi à la manette (.pad-focus) : il se règle par la variable --focus (le cœur la lit pour :focus-visible ET .pad-focus).

   Palette (texte blanc sur couleur foncée, texte #230a55 sur couleur claire : 4,5:1 au moins, mesuré) :
   - fond violet profond #35107b (barre du haut #1d0749) ;
   - classes, prénoms, années et mois : rouge #c0122d, bleu #1257b8, jaune #ffc82c, vert #17700a ;
   - les 8 portails : chacun SA couleur, jamais deux pareilles (rouge, bleu, jaune, vert, orange, turquoise, rose, violet) ;
   - trois couleurs de plus pour les rubriques de l'espace adultes : ardoise, indigo, ciel ;
   - boutons « de jeu » : une arête plus sombre en dessous qui s'écrase à l'appui ;
   - focus en DEUX valeurs : jaune #ffe14d sur le violet et la barre, bleu #1257b8 sur toute surface claire (carte, bulle, fenêtre, menu).
   Polices : Nunito (titres et boutons, très grasse et ronde, SIL OFL 1.1, fonts/quiz/) ; le texte reste en Lexend (ou Andika avec « Aa »).
   Aucune animation ajoutée (le cœur coupe déjà les siennes en « calme » et en prefers-reduced-motion).

   OUTILS QUE CETTE BASE OFFRE AUX PAGES (classes utilitaires) :
   - .qz-pt-<couleur> (sur <body>) : la couleur de la pastille d'icône de la barre du haut (.world-dot) pour une page qui n'est pas un portail ;
   - .qz-sur-fond   : texte posé directement sur le violet (clair, titres blancs, .muted clair) — jamais color:#fff sur body ;
   - .qz-entete     : bande de titre de page, de la couleur de la rubrique (--rub) ou violet foncé ;
   - .qz-titre      : titre de carte en pastille de la couleur de la rubrique ;
   - .qz-rouge … .qz-ciel (11) : posent --rub, --rub-o, --rub-fg (fond, arête, texte) pour .qz-entete, .qz-titre et les tuiles ;
   - .qz-clair      : un groupe sur fond clair (focus bleu) qui n'est ni .card ni .bubble (ou : html[data-theme="quiz"] .ma-surface { --focus: var(--q-bleu); } dans la feuille de groupe).
   ========================================================= */

@font-face { font-family: 'Nunito Quiz'; font-style: normal; font-weight: 800 1000; font-display: swap;
  src: url('../../fonts/quiz/nunito-latin-ext.woff2?v=2c8d7928') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Nunito Quiz'; font-style: normal; font-weight: 800 1000; font-display: swap;
  src: url('../../fonts/quiz/nunito-latin.woff2?v=ba344451') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

html[data-theme="quiz"] {
  --font-title: 'Nunito Quiz', 'Fredoka', 'Segoe UI', Verdana, sans-serif;
  --q-fond: #35107b; --q-barre: #1d0749; --q-encre: #230a55;
  --q-rouge: #c0122d; --q-rouge-o: #740a1b;
  --q-bleu: #1257b8; --q-bleu-o: #0a3472;
  --q-jaune: #ffc82c; --q-jaune-o: #a87800;
  --q-vert: #17700a; --q-vert-o: #0b4205;
  --q-orange: #ff8a1f; --q-orange-o: #a84b00;
  --q-turq: #14c4b6; --q-turq-o: #0a7a70;
  --q-rose: #ff5fa8; --q-rose-o: #b02468;
  --q-violet: #8f35e0; --q-violet-o: #4f1690;
  --q-ardoise: #5b6488; --q-ardoise-o: #2f3556;   /* blanc dessus 5,8:1 */
  --q-indigo: #4338ca; --q-indigo-o: #231c80;     /* blanc dessus 7,9:1 */
  --q-ciel: #3fb4f5; --q-ciel-o: #1c6fa3;         /* encre dessus 7,3:1 */
  --q-lav: #ece4ff; --q-lav-o: #b4a3e0;
  --q-sur-fond: #f0e8ff;                       /* texte posé directement sur le violet (5,0:1 au point le plus clair du dégradé) */
  --q-ombre: rgba(12, 2, 40, .42);
  --qz-gap: 28px;                              /* l'air entre deux cartes, deux tuiles d'une grille */
  --qz-pad: 24px 28px;                         /* le remplissage d'une carte aérée */
  --line: #230a55;
  --paper-2: #efe8ff;
  --focus: #ffe14d;
  /* l'orange de la marque devient le violet du thème (blanc dessus 5,6:1 ; 8,5:1 pour --marque-pleine, qui porte du texte blanc) */
  --marque: var(--q-violet);
  --marque-pleine: #6a1fb5;
  --shadow: 0 6px 0 var(--q-ombre);
  --shadow-sm: 0 4px 0 var(--q-ombre);
  background: var(--q-fond);
}
/* Le fond : le dégradé n'est posé qu'en haut de la page (une hauteur d'écran, sans « fixed » : le défilement ne repeint plus tout) ; dessous, le violet uni */
html[data-theme="quiz"] body {
  color: var(--ink);
  background-color: var(--q-fond);
  background-image: radial-gradient(ellipse 95% 75% at 50% -8%, #7a38e6 0%, #4e1fae 38%, #35107b 80%);
  background-size: 100% 100vh;
  background-repeat: no-repeat;
  background-attachment: scroll;
}
html[data-theme="quiz"].aff-contraste body { background-image: none; background-color: #1a0640; }
html[data-theme="quiz"] h1, html[data-theme="quiz"] h2, html[data-theme="quiz"] h3 { font-weight: 900; }

/* ---------- Texte posé directement sur le violet (T1) ----------
   Jamais color:#fff sur body : tout ce qui hérite (.choice, .tag, .tile .t-sub…) deviendrait blanc sur blanc.
   Une surface claire (carte, bulle) posée DANS un groupe .qz-sur-fond reprend l'encre. */
html[data-theme="quiz"] .qz-sur-fond { color: var(--q-sur-fond); }
html[data-theme="quiz"] .qz-sur-fond :where(h1, h2, h3) { color: #fff; }
html[data-theme="quiz"] .qz-sur-fond .muted, html[data-theme="quiz"] .qz-sur-fond.muted { color: var(--q-sur-fond); }
html[data-theme="quiz"] .qz-sur-fond :is(.card, .qz-clair) { color: var(--ink); }
html[data-theme="quiz"] .qz-sur-fond :where(.card, .bubble, .qz-clair) :where(h1, h2, h3) { color: inherit; }   /* (:where : un .qz-titre posé dans la carte garde son texte --rub-fg) */
html[data-theme="quiz"] .qz-sur-fond :is(.card, .bubble, .qz-clair) .muted { color: var(--muted); }

/* ---------- Bande de titre de page et titre de carte en pastille ---------- */
html[data-theme="quiz"] .qz-entete { padding: 14px 24px; border-radius: 22px; margin: 0 0 24px; background: var(--rub, var(--q-barre)); color: var(--rub-fg, #fff); box-shadow: 0 5px 0 var(--rub-o, var(--q-ombre)); }
html[data-theme="quiz"] .qz-entete :is(h1, h2, h3), html[data-theme="quiz"] .qz-entete .muted { color: inherit; }   /* (le titre d'une bande reprend la couleur de la bande, même posée dans un groupe .qz-sur-fond) */
html[data-theme="quiz"] .qz-entete > :last-child { margin-bottom: 0; }
html[data-theme="quiz"] .qz-titre { display: inline-flex; align-items: center; padding: 6px 16px; border-radius: 14px; margin: 0 0 16px; background: var(--rub, var(--q-barre)); color: var(--rub-fg, #fff); box-shadow: 0 4px 0 var(--rub-o, var(--q-ombre)); }
/* les couleurs de rubrique : fond (--rub), arête (--rub-o), texte (--rub-fg) ; blanc sur rouge, bleu, vert, violet, ardoise, indigo ; encre sur jaune, orange, turquoise, rose, ciel */
html[data-theme="quiz"] .qz-rouge     { --rub: var(--q-rouge);   --rub-o: var(--q-rouge-o);   --rub-fg: #fff; }
html[data-theme="quiz"] .qz-bleu      { --rub: var(--q-bleu);    --rub-o: var(--q-bleu-o);    --rub-fg: #fff; }
html[data-theme="quiz"] .qz-jaune     { --rub: var(--q-jaune);   --rub-o: var(--q-jaune-o);   --rub-fg: var(--q-encre); }
html[data-theme="quiz"] .qz-vert      { --rub: var(--q-vert);    --rub-o: var(--q-vert-o);    --rub-fg: #fff; }
html[data-theme="quiz"] .qz-orange    { --rub: var(--q-orange);  --rub-o: var(--q-orange-o);  --rub-fg: var(--q-encre); }
html[data-theme="quiz"] .qz-turquoise { --rub: var(--q-turq);    --rub-o: var(--q-turq-o);    --rub-fg: var(--q-encre); }
html[data-theme="quiz"] .qz-rose      { --rub: var(--q-rose);    --rub-o: var(--q-rose-o);    --rub-fg: var(--q-encre); }
html[data-theme="quiz"] .qz-violet    { --rub: var(--q-violet);  --rub-o: var(--q-violet-o);  --rub-fg: #fff; }
html[data-theme="quiz"] .qz-ardoise   { --rub: var(--q-ardoise); --rub-o: var(--q-ardoise-o); --rub-fg: #fff; }
html[data-theme="quiz"] .qz-indigo    { --rub: var(--q-indigo);  --rub-o: var(--q-indigo-o);  --rub-fg: #fff; }
html[data-theme="quiz"] .qz-ciel      { --rub: var(--q-ciel);    --rub-o: var(--q-ciel-o);    --rub-fg: var(--q-encre); }

/* ---------- Barre du haut : la MÊME hauteur sur toutes les pages (83 px, celle d'avant le thème) ----------
   Le trait du bas (3 px) devient transparent au lieu de disparaître : le fond de la barre passe dessous, rien ne se voit de plus, mais la hauteur ne change pas
   (la Vallée mesure cette hauteur, --v-haut ; le mode tableau compte « barre + marges + barre du tableau = 204 px » ; le canevas de l'aquarium se règle sur ce qui reste).
   min-height : 83 px aussi sur une page dont la barre est plus courte par construction (sans étoiles ni pastille d'élève : accessibilité, données ; l'assistant ;
   le bilan en démonstration ; l'accueil ; l'espace adultes) : on ne change pas de barre en changeant de page. */
html[data-theme="quiz"] .topbar { background: var(--q-barre); border-bottom: var(--border); border-bottom-color: transparent; min-height: 83px; box-sizing: border-box; box-shadow: 0 5px 0 var(--q-ombre); }
html[data-theme="quiz"] .topbar .tb-title { color: #fff; }
html[data-theme="quiz"] .topbar .tb-title .t { font-weight: 900; }
html[data-theme="quiz"] .topbar .stars-count { color: #fff; } /* (T3 : le compteur d'étoiles héritait de l'encre : 1,06:1 sur la barre) */

/* ---------- Boutons « de jeu » : une arête plus sombre dessous, qui s'écrase à l'appui ---------- */
html[data-theme="quiz"] .btn {
  --bg: #fff; --sh: var(--q-lav-o); --fg: var(--q-encre);
  background: var(--bg); color: var(--fg); border-color: transparent; border-radius: 18px;
  box-shadow: 0 5px 0 var(--sh); font-weight: 900;
  transition: transform .07s ease, box-shadow .07s ease, filter .15s;
}
html[data-theme="quiz"] .btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--sh); filter: brightness(1.07); }
html[data-theme="quiz"] .btn:active, html[data-theme="quiz"] .btn.is-pressed { transform: translateY(5px); box-shadow: 0 0 0 var(--sh); filter: none; }
html[data-theme="quiz"] .btn-primary, html[data-theme="quiz"] .btn-ok { --bg: var(--q-vert); --sh: var(--q-vert-o); --fg: #fff; }
/* le bouton principal de la couleur du portail (« ▶ conseillé »…) : la couleur de la tuile d'accueil du portail (--pg-*, plus bas), vert hors portail */
html[data-theme="quiz"] .btn-world { --bg: var(--pg-bg, var(--q-vert)); --sh: var(--pg-sh, var(--q-vert-o)); --fg: var(--pg-fg, #fff); }
html[data-theme="quiz"] .btn-yellow { --bg: var(--q-jaune); --sh: var(--q-jaune-o); --fg: var(--q-encre); }
/* dans une fenêtre, un menu ou une carte blanche : bouton lavande (il se voit sur le blanc).
   :where() : aucun poids en plus, pour qu'une règle de page (--bg posé sur une classe) l'emporte sans guerre de spécificité (0,2,1, comme .btn) */
html[data-theme="quiz"] :where(.modal, .moi-menu, .card, .aff-panneau) .btn:where(:not(.btn-primary, .btn-ok, .btn-world, .btn-yellow)) { --bg: var(--q-lav); }
html[data-theme="quiz"] .say-btn { background: var(--q-jaune); color: var(--q-encre); border-color: transparent; box-shadow: 0 4px 0 var(--q-jaune-o); }
html[data-theme="quiz"] .say-btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--q-jaune-o); }

/* un bouton désactivé (« 👀 Montre-moi » avant le moment où il sert, « Recopier dans mon cahier » du bilan) : lavande pâle, partout pareil.
   Le cœur le met à 45 % d'opacité : le jaune ou le vert à 45 % sur le violet donnait un brun sale, un gris-ardoise terne à texte violet. */
html[data-theme="quiz"] .btn[disabled] { --bg: #ddd5f2; --sh: #b3a6d8; --fg: #5d5a78; opacity: .85; }

/* ---------- États du cœur que .btn et .tile écrasaient (T5) : rendus avec --bg / --sh / --fg ---------- */
html[data-theme="quiz"] .btn-bilan { --bg: #e3edff; --sh: #9db4e6; }
html[data-theme="quiz"] .btn-bilan:hover, html[data-theme="quiz"] .btn-bilan:focus-visible { --bg: #cfe0ff; }
html[data-theme="quiz"] .btn-aide.levee { --bg: var(--q-jaune); --sh: var(--q-jaune-o); --fg: var(--q-encre); }
html[data-theme="quiz"] .mt-barre .btn { border-color: #000; --sh: #000; }                /* mode tableau : contour et arête noirs */
html[data-theme="quiz"] .mt-barre .mt-play { --bg: var(--q-jaune); --sh: var(--q-jaune-o); --fg: var(--q-encre); } /* ▶ Play : jaune */
html[data-theme="quiz"] .mt-barre .mt-play.en-play { --bg: #fff; --sh: var(--q-lav-o); }
html[data-theme="quiz"] .tile.done { --sh: var(--ok); border-color: var(--ok); }           /* tuile « faite » : cadre et arête vert « réussi » */
html[data-theme="quiz"] .tile.done.e3 { --sh: #e0a100; border-color: #e0a100; }           /* … or pour les trois étoiles */

/* ---------- Bulle de consigne et cartes : blanc franc, arête sombre dessous ---------- */
html[data-theme="quiz"] .bubble { background: #fff; color: var(--q-encre); border-color: transparent; border-radius: 20px; box-shadow: 0 6px 0 var(--q-ombre); font-weight: 600; }
html[data-theme="quiz"] .card { background: #fff; border-color: transparent; border-radius: 24px; box-shadow: 0 7px 0 var(--q-ombre); }
html[data-theme="quiz"] .poste-repere { border-color: transparent; border-radius: 16px; box-shadow: 0 4px 0 var(--q-ombre); color: var(--q-encre); font-weight: 900; }
html[data-theme="quiz"] .toast { border-color: transparent; border-radius: 20px; box-shadow: 0 6px 0 var(--q-ombre); color: var(--q-encre); }
html[data-theme="quiz"] .moi-menu { border-color: transparent; border-radius: 18px; box-shadow: 0 7px 0 var(--q-ombre); }
html[data-theme="quiz"] .moi-adultes { min-height: 60px; padding: 6px 14px; }   /* (le lien « 🔐 Adultes » du menu de la pastille faisait 34 px : cible de 60 px, comme les autres) */
html[data-theme="quiz"] .overlay { background: rgba(24, 5, 66, .84); }
html[data-theme="quiz"] .modal { border-color: transparent; border-radius: 26px; box-shadow: 0 10px 0 rgba(12, 2, 40, .6); color: var(--q-encre); }
/* La pointe de la bulle du coach (atelier.css) : blanche, comme la bulle (elle était sombre, collée à une bulle sans contour) */
html[data-theme="quiz"] .coach .bubble::before { border-right-color: #fff; }
/* « L'enseignant arrive. » : tout l'écran du poste est NOIR (décision du 10/10), anneau de focus blanc sur « Suivant » */
html[data-theme="quiz"] .overlay.arrivee { background: #000; --focus: #fff; }

/* ---------- Focus en deux valeurs (T4) ----------
   Le cœur dessine l'anneau avec var(--focus) (atelier.css : :focus-visible ET .pad-focus, en !important) : poser --focus suffit pour les deux.
   Jaune #ffe14d par défaut (sur le violet et la barre : 10:1) ; BLEU sur toute surface claire (le jaune y faisait 1,2:1). */
html[data-theme="quiz"] :is(.card, .bubble, .modal, .moi-menu, .aff-panneau, .toast, .poste-repere, .pix-ecran, .qz-clair) { --focus: var(--q-bleu); }
/* (.pix-ecran = l'écran blanc d'un exercice de la coque PIX/Techno/Lecture/Anglais/Projets et d'un TP de la Vallée/Ninjas : les feuilles de groupe n'ont aucune règle sous lui, le focus
   bleu se pose donc ici. La page d'un TP (.v-tp) est violette depuis le lot C : son focus est réglé dans quiz-portails.css. Les autres surfaces claires des pages
   (.b-carte, .info-carte, .pix-monde…) se posent dans leur feuille de groupe, ou avec .qz-clair.) */

/* ---------- Les tuiles (studio, monde, coque Pix, accueil) : sans contour, arête de la couleur --sh, texte --fg ---------- */
html[data-theme="quiz"] .tile { border-color: rgba(255, 255, 255, .32); border-radius: 22px; box-shadow: 0 7px 0 var(--sh, var(--q-ombre)); color: var(--fg, var(--q-encre)); }
html[data-theme="quiz"] .tile:hover { transform: translateY(-3px); box-shadow: 0 10px 0 var(--sh, var(--q-ombre)); filter: brightness(1.07); }
html[data-theme="quiz"] .tile:active { transform: translateY(6px); box-shadow: 0 1px 0 var(--sh, var(--q-ombre)); filter: none; }

/* ---------- Petits objets du cœur (T15) : étiquette, barre d'XP, compteur d'activités faites ---------- */
html[data-theme="quiz"] .tag { background: var(--q-lav); color: var(--q-encre); border-color: var(--q-lav-o); }
html[data-theme="quiz"] .tag.mt-tag { background: #dcefff; }
html[data-theme="quiz"] .xpbar { background: var(--q-lav); border-color: var(--q-lav-o); }
html[data-theme="quiz"] .compte-faites { border-color: var(--q-lav-o); color: var(--q-encre); }
html[data-theme="quiz"] .compte-faites .barre { background: var(--q-lav); border-color: var(--q-lav-o); }
html[data-theme="quiz"] .compte-faites.tout { border-color: var(--ok); }
/* (le contour brun des étoiles dorées, .t-stars span.on, reste celui du cœur : il les rend lisibles sur blanc) */

/* ---------- Couleur du portail (T13) : la couleur de SA tuile d'accueil, posée par la classe de <body> ----------
   .btn-world, la bande de titre et les accents d'un portail lisent --pg-bg / --pg-sh / --pg-fg. NE PAS toucher --world :
   le cœur le pose en ligne sur <html> (A.appliquerCouleur) et les exercices le lisent. */
html[data-theme="quiz"] body.portail-studio  { --pg-bg: var(--q-rouge);  --pg-sh: var(--q-rouge-o);  --pg-fg: #fff; }
html[data-theme="quiz"] body.portail-pix     { --pg-bg: var(--q-bleu);   --pg-sh: var(--q-bleu-o);   --pg-fg: #fff; }
html[data-theme="quiz"] body.portail-techno  { --pg-bg: var(--q-jaune);  --pg-sh: var(--q-jaune-o);  --pg-fg: var(--q-encre); }
html[data-theme="quiz"] body.portail-lecture { --pg-bg: var(--q-vert);   --pg-sh: var(--q-vert-o);   --pg-fg: #fff; }
html[data-theme="quiz"] body.portail-anglais { --pg-bg: var(--q-orange); --pg-sh: var(--q-orange-o); --pg-fg: var(--q-encre); }
html[data-theme="quiz"] body.portail-projets { --pg-bg: var(--q-turq);   --pg-sh: var(--q-turq-o);   --pg-fg: var(--q-encre); }
html[data-theme="quiz"] body.portail-jeuxtechno { --pg-bg: var(--q-ciel); --pg-sh: var(--q-ciel-o); --pg-fg: var(--q-encre); }   /* (Jeux techno, 02/11) */
html[data-theme="quiz"] body.v-page          { --pg-bg: var(--q-rose);   --pg-sh: var(--q-rose-o);   --pg-fg: var(--q-encre); }
html[data-theme="quiz"] body.v-page.nj, html[data-theme="quiz"] body.nj { --pg-bg: var(--q-violet); --pg-sh: var(--q-violet-o); --pg-fg: #fff; }

/* ---------- La pastille d'icône de la barre du haut (.world-dot) : la couleur de la PAGE ----------
   Un portail : celle de sa tuile d'accueil (--pg-bg, ci-dessus). Les autres pages posent qz-pt-<couleur> sur <body> : la couleur de leur bande ou de leur tuile
   (moi violet · aquarium turquoise · collection rouge · bilan vert · réglages bleu · accessibilité rose · données turquoise · guide et assistant ciel). Sans rien : lavande.
   Ne pas toucher --world : le cœur le pose en ligne sur <html> et les exercices le lisent. Dans la pastille il n'y a qu'un émoji : aucune couleur de texte à régler. */
html[data-theme="quiz"] .topbar .world-dot { background: var(--pg-bg, var(--pt-bg, var(--q-lav))); border-color: transparent; }
html[data-theme="quiz"] body.qz-pt-rouge     { --pt-bg: var(--q-rouge); }
html[data-theme="quiz"] body.qz-pt-bleu      { --pt-bg: var(--q-bleu); }
html[data-theme="quiz"] body.qz-pt-jaune     { --pt-bg: var(--q-jaune); }
html[data-theme="quiz"] body.qz-pt-vert      { --pt-bg: var(--q-vert); }
html[data-theme="quiz"] body.qz-pt-orange    { --pt-bg: var(--q-orange); }
html[data-theme="quiz"] body.qz-pt-turquoise { --pt-bg: var(--q-turq); }
html[data-theme="quiz"] body.qz-pt-rose      { --pt-bg: var(--q-rose); }
html[data-theme="quiz"] body.qz-pt-violet    { --pt-bg: var(--q-violet); }
html[data-theme="quiz"] body.qz-pt-ciel      { --pt-bg: var(--q-ciel); }

/* ---------- Couleurs très contrastées (Aa) : 7:1 partout, contours noirs de 4 px (T9) ---------- */
html[data-theme="quiz"].aff-contraste { --q-rouge: #9d0f25; --q-bleu: #0e4590; --q-vert: #0f5a07; --q-rose: #ff94c4; --q-violet: #6a1fb5; --q-ardoise: #46506e; --line: #000; }
/* (le thème enlève les contours : en contraste fort, le cœur les demande noirs et épais) */
html[data-theme="quiz"].aff-contraste :is(.btn, .card, .bubble, .modal, .tile, .toast, .moi-menu, .poste-repere, .tag, .xpbar, .compte-faites) { border-color: #000; }

/* ---------- Impression : page blanche, texte noir, ni bande ni arête ni fond violet (T11) ---------- */
@media print {
  html[data-theme="quiz"], html[data-theme="quiz"] body { background: #fff; }
  html[data-theme="quiz"] body { background-image: none; }
  html[data-theme="quiz"] :is(.qz-sur-fond, .qz-entete, .qz-titre), html[data-theme="quiz"] .qz-sur-fond.muted { color: #000; background: none; box-shadow: none; }
  html[data-theme="quiz"] .qz-sur-fond :is(h1, h2, h3), html[data-theme="quiz"] .qz-sur-fond .muted, html[data-theme="quiz"] .qz-entete .muted { color: #000; }
  html[data-theme="quiz"] :is(.btn, .card, .bubble, .modal, .tile, .toast, .tag, .poste-repere, .moi-menu) { box-shadow: none; }
  /* Boutons et tuiles à texte BLANC sur un fond de couleur (vert, rouge, bleu, violet) : leur fond s'imprime toujours. Sans cela, avec le réglage par défaut des navigateurs
     (« fonds non imprimés »), le texte blanc sortait gris très pâle sur le papier. Inherited : le tampon « ✔ Fait » (.tile.done::after) suit. */
  html[data-theme="quiz"] :is(.btn, .tile) { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}