/* ==========================================================================
   QuizQuest — Tokens identité visuelle
   Univers : game-show plateau TV, vibe Buzz! (PS3)
   Famille : LiveQuest (ancrage cascade 3 couches)

   Usage :
     • Charger CE fichier avant app.css / host.css / play.css
     • Les variables --bg/--accent/--text sont les noms sémantiques LiveQuest
       → compatibles avec la cascade [data-universe] de LiveQuest parent
     • Override white-label : [data-tenant] { --accent: #your; }
   ========================================================================== */

/* --------------------------------------------------------------------------
   @font-face — self-hostées, souveraines, CSP-safe (pas de CDN externe)
   Licences : Lexend = SIL OFL 1.1 ; Barlow Condensed = SIL OFL 1.1
   Sources woff2 dans public/fonts/
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Lexend";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/lexend-bold.woff2") format("woff2");
}

@font-face {
  font-family: "Lexend";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/lexend-extrabold.woff2") format("woff2");
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/barlow-condensed-bold.woff2") format("woff2");
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/barlow-condensed-extrabold.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   TOKENS — :root
   Nommage sémantique LiveQuest-compatible
   -------------------------------------------------------------------------- */

:root {

  /* --- Fond / surface --- */
  --bg:       #0e0b1a;   /* nuit violette profonde — fond global */
  --bg-2:     #1a1440;   /* fond secondaire (cards, panels) */
  --surface:  #241a47;   /* surface surélevée (modales, inputs) */

  /* --- Accent primaire --- */
  --accent:     #6c3bff; /* violet électrique — CTA, focus, glow */
  --accent-hot: #ff3c80; /* magenta — chrono, tension, urgence */

  /* --- Texte --- */
  --text:     #ffffff;
  --text-dim: #c7bdf0;   /* texte secondaire, labels, hints */

  /* --- États --- */
  --ok:   #16c172;       /* bonne réponse, succès */
  --bad:  #ff3b5c;       /* mauvaise réponse, erreur */

  /* --- État DÉSACTIVÉ (boutons) ---
     Couleurs EXPLICITES, jamais d'`opacity` : voir la note sur
     `.qq-btn:disabled` plus bas. Ratio texte/fond garanti par construction,
     indépendamment du fond de page derrière le bouton.
     #b8b1d6 sur #312b4e = 6,49:1 (AA large ET AA texte normal). */
  --btn-disabled-bg:   #312b4e;
  --btn-disabled-text: #b8b1d6;
  --btn-disabled-line: rgba(255, 255, 255, 0.12);

  /* --- 4 couleurs de réponses — palette Buzz! (PAS Kahoot)
         Accessibilité : chaque bouton porte aussi une FORME (svg) distincte
         pour les utilisateurs daltoniens (voir .answer--shape-* ci-dessous)
         A1 bleu  = triangle ▲  | A2 orange = cercle   ●
         A3 vert  = losange  ◆  | A4 or     = carré    ■
     --- */
  --a1: #1368ce;  /* bleu   ▲ — texte blanc OK (5.39:1) */
  --a2: #f4900c;  /* orange ● — texte foncé OBLIGATOIRE (blanc=2.38 FAIL) */
  --a3: #26890c;  /* vert   ◆ — texte blanc OK (4.50:1, juste AA) */
  --a4: #ffd21a;  /* jaune  ■ — franc jaune, distinct de l'orange ; texte foncé OBLIGATOIRE */

  /* Couleur de texte par bouton-réponse (contraste AA garanti) */
  --a1-text: #ffffff;  /* blanc sur bleu     : 5.39:1  PASS */
  --a2-text: #0e0b1a;  /* sombre sur orange  : 8.18:1  PASS */
  --a3-text: #ffffff;  /* blanc sur vert     : 4.50:1  PASS */
  --a4-text: #0e0b1a;  /* sombre sur jaune   : ~14:1   PASS */

  /* --- Typographie --- */
  --font-display: "Lexend", system-ui, sans-serif;         /* titres, questions */
  --font-score:   "Barlow Condensed", system-ui, sans-serif; /* chrono, scores, PIN */

  /* --- Échelle typographique (base 4px) --- */
  --text-xs:  0.75rem;  /* 12px */
  --text-sm:  0.875rem; /* 14px */
  --text-md:  1rem;     /* 16px */
  --text-lg:  1.25rem;  /* 20px */
  --text-xl:  1.5rem;   /* 24px */
  --text-2xl: 2rem;     /* 32px */
  --text-3xl: 2.5rem;   /* 40px */
  --text-4xl: 3.5rem;   /* 56px */
  --text-hero: clamp(3rem, 10vw, 7rem); /* PIN, score géant */

  /* --- Espacements (échelle 4px) --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* --- Rayons --- */
  --radius-sm: 8px;
  --radius:    16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* --- Ombres (teintées violet, pas grises) --- */
  --shadow-sm:  0 2px 8px  rgba(108, 59, 255, 0.20);
  --shadow-md:  0 4px 20px rgba(108, 59, 255, 0.30);
  --shadow-lg:  0 8px 40px rgba(108, 59, 255, 0.45);
  --shadow-hot: 0 0 32px   rgba(255, 60, 128, 0.55);  /* magenta glow chrono */
  --shadow-ok:  0 0 20px   rgba(22, 193, 114, 0.45);  /* vert succès */
  --shadow-bad: 0 0 20px   rgba(255, 59, 92, 0.45);   /* rouge erreur */

  /* --- Cible tactile joueur --- */
  --tap: 64px;

  /* --- Transitions --- */
  --ease: cubic-bezier(.25, .46, .45, .94);
  --t-fast:   150ms;
  --t-normal: 200ms;
  --t-slow:   350ms;
}

/* --------------------------------------------------------------------------
   RESET minimal
   -------------------------------------------------------------------------- */

*, *::before, *::after {
  box-sizing: border-box;
}

/* P4 WCAG 2.4.7 — focus-visible global (invisible sur fond sombre sans ça)
   Les composants spécifiques (.qq-btn, .qq-answer) peuvent surcharger. */
:focus-visible {
  outline: 2px solid var(--accent, #6c3bff);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   TYPOGRAPHIE — règles globales
   -------------------------------------------------------------------------- */

body {
  font-family: var(--font-display);
  background: var(--bg);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  min-height: 100dvh;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-4);
}

/* Chrono, score, PIN — condensé gras */
.qq-numeric {
  font-family: var(--font-score);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   COMPOSANTS DE BASE
   -------------------------------------------------------------------------- */

/* Bouton primaire */
.qq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-lg);
  padding: var(--space-4) var(--space-8);
  min-height: 56px;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--text);
  cursor: pointer;
  transition:
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    filter var(--t-fast) var(--ease);
  box-shadow: var(--shadow-md);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
/* BUG RÉEL CONSTATÉ EN DIRECT (2026-09-04, jeu QA host) : `.qq-btn` pose
   `display:inline-flex` sans jamais restaurer `display:none` pour l'état
   [hidden] — une règle d'auteur bat toujours le défaut UA `[hidden]{display:
   none}`. Conséquence vécue : #btn-pause / #btn-skip / #btn-next / #btn-ldb-next
   (host.html) basculent bien leur `.hidden` en JS (armed/reveal/click, cf.
   host.js) mais restent visibles EN PERMANENCE dès leur écran affiché — dont
   « Suivant » pendant une question active pas encore révélée, où un clic
   devient un no-op silencieux côté serveur (mauvaise phase), lu à tort comme
   « le bouton ne répond pas ». Même piège déjà documenté et corrigé au cas
   par cas ailleurs dans le repo (cf. #screen-*[hidden] etc. dans host.html) —
   fixé ici une fois pour toutes, à la source, pour TOUT .qq-btn actuel et à venir. */
.qq-btn[hidden] { display: none; }
.qq-btn:hover      { filter: brightness(1.15); box-shadow: var(--shadow-lg); }
.qq-btn:active     { transform: scale(0.96); box-shadow: var(--shadow-sm); }
.qq-btn:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 3px;
}
/* État désactivé — SURTOUT PAS `opacity`.
   `opacity` dilue le bouton ENTIER (fond + texte) avec ce qu'il y a DERRIÈRE :
   le ratio texte/fond obtenu dépend donc du fond de PAGE, pas du bouton. Bug
   réel constaté sur l'écran d'accueil en thème clair : `opacity:.45` sur un
   bouton --accent-hot (#c2003a, blanc dessus = 7,4:1 à pleine opacité) mélangé
   au lavande clair du body donnait un rose délavé, texte blanc à ~1,5:1 —
   illisible. En thème sombre la même règle « passait » : la dilution vers un
   fond sombre conserve le contraste, elle l'écrase vers un fond clair.
   Un fond ET un texte explicites donnent le MÊME ratio quel que soit le fond
   de page — et le gris neutre désaturé reste un signal de désactivation clair,
   puisque l'état actif est violet/magenta saturé. */
.qq-btn:disabled {
  background: var(--btn-disabled-bg);
  color: var(--btn-disabled-text);
  border-color: var(--btn-disabled-bg);   /* neutralise le liseré de --outline */
  box-shadow: inset 0 0 0 1px var(--btn-disabled-line); /* détoure sans changer la taille */
  filter: none;
  transform: none;
  cursor: default;
  pointer-events: none;
}

/* Bouton secondaire (outline) */
.qq-btn--outline {
  background: transparent;
  border: 2px solid var(--accent);
  color: var(--text);
  box-shadow: none;
}
.qq-btn--outline:hover { background: rgba(108, 59, 255, 0.15); box-shadow: none; }

/* Bouton danger */
.qq-btn--hot {
  background: var(--accent-hot);
  box-shadow: var(--shadow-hot);
}

/* Card */
.qq-card {
  background: var(--bg-2);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(108, 59, 255, 0.12);
}

/* Input / Select */
.qq-input {
  width: 100%;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius);
  border: 2px solid rgba(199, 189, 240, 0.20);
  background: var(--surface);
  color: var(--text);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.qq-input::placeholder { color: var(--text-dim); opacity: 0.6; }
.qq-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(108, 59, 255, 0.25);
}
.qq-input:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 1px;
}

/* Badge état */
.qq-badge {
  display: inline-block;
  font-family: var(--font-score);
  font-size: var(--text-sm);
  font-weight: 700;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.qq-badge--ok  { background: rgba(22, 193, 114, 0.20); color: var(--ok); }
.qq-badge--hot { background: rgba(255, 60, 128, 0.20); color: var(--accent-hot); }

/* --------------------------------------------------------------------------
   BOUTONS RÉPONSE — palette Buzz! avec formes daltonisme-safe
   Chaque bouton = couleur + symbole SVG en pseudo-élément + label texte
   -------------------------------------------------------------------------- */

.qq-answer {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--tap);
  padding: var(--space-4) var(--space-5);
  border: none;
  border-radius: var(--radius-lg);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition:
    transform var(--t-fast) var(--ease),
    filter var(--t-fast) var(--ease);
  box-shadow: 0 4px 0 rgba(0,0,0,0.35);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  position: relative;
}
.qq-answer:hover { filter: brightness(1.10); transform: translateY(-2px); }
.qq-answer:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,0.35); }
.qq-answer:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 3px;
}
/* Boutons de réponse désactivés (après avoir répondu).
   Ici on NE PEUT PAS repeindre en gris neutre comme `.qq-btn:disabled` : la
   couleur porte une INFORMATION (la palette Buzz! à 4 couleurs, doublée d'une
   forme). On remplace donc `opacity` — qui mélangeait le bouton au fond de page
   et faisait tomber la réponse verte à 2,17:1 en thème clair et 3,05:1 en
   sombre — par un filtre, qui n'agit QUE sur l'élément : le rapport texte/fond
   reste interne au bouton, quel que soit ce qu'il y a derrière.
   Mesuré au pixel, sur les 4 couleurs, dans les 2 thèmes : 4,99:1 minimum en
   sombre et 5,95:1 en clair — soit MIEUX que l'état actif (4,50:1 pour le vert).
   La désaturation reste un signal d'extinction net (couleurs vives → ternes).
   ⚠ Ne pas revenir à `opacity` : cf. la note sur `.qq-btn:disabled`. */
.qq-answer:disabled {
  filter: saturate(0.30) brightness(0.92);
  cursor: default;
  pointer-events: none;
}

/* Couleurs Buzz! — avec texte contrasté par couleur (AA garanti) */
.qq-answer--a1 { background: var(--a1); color: var(--a1-text); }
.qq-answer--a2 { background: var(--a2); color: var(--a2-text); }
.qq-answer--a3 { background: var(--a3); color: var(--a3-text); }
.qq-answer--a4 { background: var(--a4); color: var(--a4-text); }

/* Icône forme (daltonisme) — inline SVG via conteneur */
.qq-answer-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qq-answer-icon svg {
  width: 28px;
  height: 28px;
  fill: rgba(255,255,255,0.90); /* surcharger par .qq-answer--a2/.qq-answer--a4 ci-dessous */
}

/* Icônes formes sur fond clair (A2 orange, A4 or) — fill foncé */
.qq-answer--a2 .qq-answer-icon svg,
.qq-answer--a4 .qq-answer-icon svg {
  fill: rgba(14, 11, 26, 0.80);
}

/* Masquage des couleurs (phase BUZZ avant reveal) */
.qq-answers--masked .qq-answer {
  background: var(--surface);
  border: 2px solid rgba(199, 189, 240, 0.15);
  color: var(--text-dim);
}
.qq-answers--masked .qq-answer-icon svg { fill: var(--text-dim); }

/* État répondu */
.qq-answer--selected::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255,255,255,0.15);
  pointer-events: none;
}

/* Grille réponses */
.qq-answers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 420px) {
  .qq-answers { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   ANCRAGE LIVEQUEST
   -------------------------------------------------------------------------- */

/* Footer « une expérience LiveQuest » */
.qq-livequest-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-dim);
  opacity: 0.55;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.qq-livequest-footer img,
.qq-livequest-footer svg {
  width: 16px;
  height: 16px;
  opacity: 0.7;
}

/* Logo LiveQuest coin (host.html) — superposé en bas à gauche */
.qq-livequest-logo-corner {
  position: fixed;
  bottom: var(--space-4);
  left: var(--space-4);
  width: 34px;
  height: 34px;
  opacity: 0.85;
  z-index: 100;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   UTILITAIRES
   -------------------------------------------------------------------------- */

.qq-hidden  { display: none !important; }
.qq-center  { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.qq-muted   { color: var(--text-dim); }
.qq-dimmed  { opacity: 0.5; }
.qq-gap-4   { gap: var(--space-4); }

/* Glow accent (pour le PIN géant, le chrono) */
.qq-glow {
  text-shadow: 0 0 24px rgba(108, 59, 255, 0.75);
}
.qq-glow--hot {
  text-shadow: 0 0 32px rgba(255, 60, 128, 0.85), 0 0 8px rgba(255, 60, 128, 0.50);
}

/* Animations de base */
@keyframes qq-pulse-hot {
  0%, 100% { text-shadow: 0 0 20px rgba(255, 60, 128, 0.60); }
  50%       { text-shadow: 0 0 48px rgba(255, 60, 128, 1),
                            0 0 16px rgba(255, 60, 128, 0.80); }
}
@keyframes qq-pop-in {
  0%   { transform: scale(0.6); opacity: 0; }
  65%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes qq-fade-up {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes qq-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-8px); }
  40%       { transform: translateX(8px); }
  60%       { transform: translateX(-5px); }
  80%       { transform: translateX(5px); }
}

/* Chrono pulsant */
.qq-chrono-pulse { animation: qq-pulse-hot 1s ease-in-out infinite; }

/* Chrono EN PAUSE — clignotement (demande utilisateur 2026-08-05).
   Un chrono simplement figé est indistinguable d'un chrono qui tourne quand on
   regarde l'écran de loin : l'animateur ne voyait l'état que par le libellé
   « Reprendre » en bas à droite, hors de son champ de vision quand il parle à
   la salle. Le clignotement est LENT (1,4 s) et ne descend pas sous 0,35
   d'opacité : assez visible de loin, sans effet stroboscopique. */
@keyframes qq-blink-paused {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
.qq-chrono-paused { animation: qq-blink-paused 1.4s ease-in-out infinite; }
/* La barre de progression clignote en contrepoint (décalage d'une demi-période)
   pour que l'état soit lisible même si le regard est sur la barre. */
.qq-chrono-bar-paused { animation: qq-blink-paused 1.4s ease-in-out infinite; animation-delay: 0.7s; }

/* Un clignotement imposé peut provoquer un malaise (vestibulaire, migraine) et
   WCAG 2.3.x le déconseille : sous prefers-reduced-motion on garde
   l'information par une opacité FIXE atténuée, sans mouvement. */
@media (prefers-reduced-motion: reduce) {
  .qq-chrono-paused,
  .qq-chrono-bar-paused { animation: none !important; opacity: 0.55; }
}

/* Entrée pop */
.qq-pop  { animation: qq-pop-in  var(--t-slow) var(--ease) both; }
.qq-up   { animation: qq-fade-up var(--t-slow) var(--ease) both; }
.qq-shake { animation: qq-shake 400ms var(--ease); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* --------------------------------------------------------------------------
   EXTENSIONS SPECTACLE — tokens animations plateau
   (utilisés par host.html inline style + qq-sfx.js)
   -------------------------------------------------------------------------- */

/* Count-up number — mise en valeur */
@keyframes qq-countup-flash {
  0%   { color: var(--accent-hot); text-shadow: 0 0 16px rgba(255,60,128,0.8); }
  100% { color: var(--accent); text-shadow: none; }
}
.qq-countup-done {
  animation: qq-countup-flash 300ms ease forwards;
}

/* Pulse slow (leaderboard entrée) */
@keyframes qq-pulse-slow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(108,59,255,0); }
  50%       { box-shadow: 0 0 0 4px rgba(108,59,255,0.35); }
}

/* Reveal bonne reponse -- glow vert */
.answer-pill--correct {
  animation: qq-correct-glow 600ms cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes qq-correct-glow {
  0%   { transform: scale(0.97); box-shadow: 0 0 0 0 rgba(22,193,114,0); }
  50%  { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(22,193,114,0.7); }
  100% { transform: scale(1.03); box-shadow: 0 0 0 3px rgba(22,193,114,0.5); }
}

/* Mauvaise reponse -- fondu gris */
.answer-pill--wrong {
  transition: opacity 400ms ease;
  opacity: 0.35 !important;
  filter: grayscale(0.6);
}

/* ==========================================================================
   THÈME PLEIN JOUR — body.theme-day
   Activé via ?theme=day (URL) ou bouton bascule — persisté localStorage qq_theme.
   Conçu usage extérieur, plein soleil : fond clair, texte très contrasté, pas de glow.
   ========================================================================== */

body.theme-day {
  /* --- Fond / surface (inversé light) --- */
  --bg:       #f8f7ff;
  --bg-2:     #edeaf8;
  --surface:  #ddd6f5;

  /* --- Accent plus soutenu (AA sur fond clair) --- */
  --accent:     #4218c2;
  --accent-hot: #c2003a;

  /* --- Texte foncé très contrasté --- */
  --text:     #12103a;
  --text-dim: #45386e;

  /* --- État désactivé, version fond clair ---
     #45386e sur #d6d2e6 = 6,96:1. Le liseré passe en sombre : sur un body
     lavande très clair, un contour blanc à 12 % n'existe pas. */
  --btn-disabled-bg:   #d6d2e6;
  --btn-disabled-text: #45386e;
  --btn-disabled-line: rgba(18, 16, 58, 0.28);

  /* --- Ombres neutres (teinte violette retirée) --- */
  --shadow-sm:  0 2px 8px  rgba(0,0,0,0.12);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.16);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.20);
  --shadow-hot: 0 2px 8px  rgba(194, 0, 58, 0.25);
  --shadow-ok:  0 2px 8px  rgba(22, 193, 114, 0.30);
  --shadow-bad: 0 2px 8px  rgba(255, 59, 92, 0.30);

  background: var(--bg);
  color: var(--text);
}

/* Glow : supprimé en plein jour */
body.theme-day .qq-glow      { text-shadow: none !important; }
body.theme-day .qq-glow--hot { text-shadow: none !important; }
body.theme-day .qq-chrono-pulse { animation: none !important; }
/* ⚠ La règle ci-dessus coupe l'animation avec !important. Sans ce rappel, un
   chrono à la fois EN PAUSE et sous les 5 s (donc porteur des deux classes)
   perdait son clignotement en thème clair : la pulsation « chaude » est
   décorative et peut disparaître, l'état de pause est une INFORMATION et doit
   survivre au thème. Le !important est donc nécessaire ici, pas cosmétique. */
body.theme-day .qq-chrono-paused { animation: qq-blink-paused 1.4s ease-in-out infinite !important; }
@media (prefers-reduced-motion: reduce) {
  body.theme-day .qq-chrono-paused { animation: none !important; opacity: 0.55; }
}

/* Card — fond clair */
body.theme-day .qq-card {
  background: var(--bg-2);
  border-color: rgba(66, 24, 194, 0.15);
}

/* Badge — fond clair */
body.theme-day .qq-badge { background: var(--surface); color: var(--text-dim); }
body.theme-day .qq-badge--ok  { background: rgba(22, 193, 114, 0.15); color: #0d7a48; }
body.theme-day .qq-badge--hot { background: rgba(194, 0, 58, 0.12);  color: var(--accent-hot); }

/* Boutons */
body.theme-day .qq-btn { color: #fff; }
body.theme-day .qq-btn--outline {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: none;
}
body.theme-day .qq-btn--outline:hover { background: rgba(66, 24, 194, 0.08); }
body.theme-day .qq-btn--hot { color: #fff; }
/* ⚠ NÉCESSAIRE, pas redondant : les trois règles ci-dessus forcent une couleur
   de texte avec une spécificité (0,2,1) SUPÉRIEURE à `.qq-btn:disabled`
   (0,2,0). Sans ce rappel, un bouton désactivé en thème clair garderait un
   texte blanc (ou accent) sur le fond gris clair de l'état désactivé — soit
   exactement le défaut de contraste qu'on corrige, déplacé d'un cran. */
body.theme-day .qq-btn:disabled,
body.theme-day .qq-btn--hot:disabled,
body.theme-day .qq-btn--outline:disabled {
  background: var(--btn-disabled-bg);
  color: var(--btn-disabled-text);
  border-color: var(--btn-disabled-bg);
  box-shadow: inset 0 0 0 1px var(--btn-disabled-line);
}

/* Input */
body.theme-day .qq-input {
  background: var(--bg);
  border-color: rgba(66, 24, 194, 0.25);
  color: var(--text);
}
body.theme-day .qq-input::placeholder { color: var(--text-dim); opacity: 0.7; }
body.theme-day .qq-input:focus { border-color: var(--accent); }

/* Réponses masquées — fond clair neutre */
body.theme-day .qq-answers--masked .qq-answer {
  background: var(--surface);
  border: 2px solid rgba(66, 24, 194, 0.18);
  color: var(--text);
}
body.theme-day .qq-answers--masked .qq-answer-icon svg { fill: var(--text-dim); }

/* Footer LiveQuest */
body.theme-day .qq-livequest-footer { color: var(--text-dim); }

/* Focus-visible sur fond clair */
body.theme-day :focus-visible { outline-color: var(--accent); }

/* ═══════════════════════════════════════════════════════════════════════════
   THÈME PLEIN SOLEIL — direction « Plateau / Jeton » (2026-08-05)
   ═══════════════════════════════════════════════════════════════════════════
   POURQUOI ces tokens existent : sur fond clair, la LUEUR n'est plus un moyen
   d'expression — un halo lumineux ne se lit pas comme de la lumière mais comme
   un flou sale. Le thème clair ne peut donc pas être « le sombre sans les
   halos » sous peine d'être un mode dégradé. Il lui faut ses PROPRES moyens :
   le poids graphique du jeton de plateau — ombre DURE, décalée, SANS flou, et
   bordure PLEINE épaisse au lieu d'un filet translucide (un bord à 12 %
   d'opacité disparaît purement et simplement en plein soleil).
   Ce réflexe existait déjà dans le produit, isolé, sur les boutons de réponse
   (`box-shadow: 0 4px 0`) : on le généralise au lieu d'inventer un vocabulaire
   parallèle.

   ⚠ CE BLOC NE CONTIENT QUE DES DÉCLARATIONS DE VARIABLES, VOLONTAIREMENT.
   qq-tokens.css est chargé par SIX pages (play, host, admin, index, landing,
   cgv). Une custom property qui n'est lue nulle part ne change aucun pixel :
   la déclarer globalement est donc sans risque. En revanche, APPLIQUER ces
   tokens à un composant (`.qq-card`, `.qq-btn`…) ici repeindrait les six pages,
   y compris la landing commerciale et la console d'administration, qui n'ont
   rien demandé — et passerait l'écran ANIMATEUR en blanc pur, l'inverse exact
   de l'arbitrage retenu (l'animateur est presque toujours à l'intérieur, le
   reflet ne s'y pose pas).
   Les applications vivent donc dans play.html, scopées `body.qq-play.theme-day`.
   ═══════════════════════════════════════════════════════════════════════════ */
body.theme-day {
  /* Ombres DURES : décalage franc, flou nul. Un objet posé sur une table a un
     bord net, pas une aura. */
  --day-shadow-sm:     3px 3px 0 rgba(18, 16, 58, 0.90);
  --day-shadow-md:     4px 4px 0 rgba(18, 16, 58, 0.90);
  --day-shadow-lg:     6px 6px 0 rgba(18, 16, 58, 0.90);
  --day-shadow-accent: 4px 4px 0 #4218c2;
  --day-shadow-hot:    4px 4px 0 #c2003a;
  --day-shadow-ok:     4px 4px 0 #0d7a48;

  /* Bordure pleine, en remplacement des filets translucides. */
  --day-line:       3px;
  --day-line-color: rgba(18, 16, 58, 0.85);

  /* Vert de validation lisible sur fond clair. #16c172 (thème sombre) tombe à
     2,22:1 sur blanc — échec AA même en gros caractères. #0d7a48 = 5,39:1.
     Nommé ici parce qu'il était codé en dur à plusieurs endroits de play.html. */
  --ok-day: #0d7a48;
}