/* ============================================================================
   QZR — Solo : habillage « Playground » (maquette validée, 24/10/2026)
   ----------------------------------------------------------------------------
   Peau du solo Compagnon, posée par quizz.online.realtime-solo-habillage.js
   (classe .qzr-habillage sur #quizRealTimeContainer). Chargée APRÈS
   vnext-play.css : chaque règle est portée par
   #quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage, plus
   spécifique que la peau Compagnon qu'elle recouvre.

   Contours : 2 px nets, à la couleur du thème ; ombre courte, peu diffuse,
   marquée, teintée du thème (noire sur l'Ardoise). Les couleurs passent par
   les jetons --qz-* : elles suivent le thème de l'app et le mode sombre.
   ============================================================================ */

/* Palette propre aux fonds et aux lettres, déclarée UNE fois : le reste
   passe par les jetons --qz-* (accent, énergie, danger, écran). */
:root {
  --hb-cahier: #FBFAF4;
  --hb-cahier-nuit: #141C19;
  --hb-ardoise: #22362F;
  --hb-craie: #F4F1E6;
  --hb-trait-nuit: #9FD9C2;
  --hb-orange: #E8873A;
  --hb-goutte: #5AA9E6;
  --hb-lettre-b: #2D6CDF;
  --hb-lettre-c: #A9520A;
  --hb-lettre-d: #B03A85;
}

/* Hors de la portée, les éléments de l'habillage n'existent pas à l'écran. */
.qzr-hb-decor,
.qzr-hb-vignette,
.qzr-hb-bandeau,
.qzr-hb-bulle,
.qzr-hb-bas { display: none; }

#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage {
  --hb-ligne: color-mix(in srgb, var(--qz-accent-deep) 48%, var(--qz-surface));
  --hb-ombre-c: color-mix(in srgb, var(--qz-accent-deep) 32%, transparent);
  --hb-ombre: 0 2px 3px var(--hb-ombre-c);
  --hb-ombre-h: 0 3px 4px var(--hb-ombre-c);
  --hb-ombre-a: 0 1px 1px var(--hb-ombre-c);
  --hb-bas: max(14px, var(--qzr-safe-bottom, env(safe-area-inset-bottom, 0px)));  /* inset NATIF en Android bord à bord : env() y vaut 0 */
  /* Le bouton de réglages s'aligne sur la colonne de jeu (620 px), pas sur
     le bord de l'écran : à côté de la barre d'objectif, même sur ordinateur. */
  --hb-droite-fab: max(16px, calc(50% - 298px));
  position: relative;
}

/* ── Fonds ──────────────────────────────────────────────────────────────── */
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-decor {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--qz-screen);
}
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage #viewPlayground { position: relative; z-index: 1; }
/* .glass-panel floute ce qui est DERRIÈRE la vue (backdrop-filter) : il
   masquait le fond. Neutralisé ici seulement — en multijoueur, ce filtre fait
   de #viewPlayground le cadre de la bulle de feedback (position: fixed), qui
   se recalerait sur le bord de l'écran sans lui. */
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage #viewPlayground.glass-panel { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.qzr-hb-decor__trame { position: absolute; inset: 0; }
.qzr-hb-decor__marge { display: none; position: absolute; top: 0; bottom: 0; left: max(28px, calc(50% - 282px)); width: 2px; background: rgba(210, 96, 58, .38); }

/* Cahier : papier à petits carreaux et sa marge. */
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage.qzr-fond-cahier .qzr-hb-decor { background-color: var(--hb-cahier); }
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage.qzr-fond-cahier .qzr-hb-decor__trame {
  background-image:
    linear-gradient(color-mix(in srgb, var(--qz-accent-deep) 10%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--qz-accent-deep) 10%, transparent) 1px, transparent 1px);
  background-size: 18px 18px;
  background-position: -1px -1px;
}
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage.qzr-fond-cahier .qzr-hb-decor__marge { display: block; }
/* Ardoise : tableau noir vert, voile de craie à peine essuyé. */
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage.qzr-fond-ardoise .qzr-hb-decor { background: var(--hb-ardoise); }
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage.qzr-fond-ardoise .qzr-hb-decor__trame {
  background-image:
    radial-gradient(ellipse at 18% 12%, rgba(255, 255, 255, .07), transparent 45%),
    radial-gradient(ellipse at 85% 62%, rgba(255, 255, 255, .05), transparent 50%),
    radial-gradient(ellipse at 40% 96%, rgba(255, 255, 255, .06), transparent 45%);
}
/* Calme : la trame seule, rien ne bouge. */
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage.qzr-fond-calme .qzr-hb-decor__trame {
  background-image: radial-gradient(color-mix(in srgb, var(--qz-accent-deep) 17%, transparent) 1px, transparent 1.3px);
  background-size: 18px 18px;
}

/* Signes griffonnés (?, étoile, éclair…) qui flottent aux bords. */
.qzr-hb-glyphe {
  position: absolute;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--qz-accent-deep);
  opacity: .18;
  animation: qzrHbFlotte 9s ease-in-out infinite;
}
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage.qzr-fond-ardoise .qzr-hb-glyphe { color: var(--hb-craie); opacity: .28; }
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage.qzr-fond-calme .qzr-hb-glyphe { display: none; }
@keyframes qzrHbFlotte {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50% { transform: translateY(-16px) rotate(calc(var(--r, 0deg) + 14deg)); }
}
/* Bonne réponse : les signes font un bond. */
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage.qzr-hb-fete .qzr-hb-glyphe { animation: qzrHbBond .7s ease-out, qzrHbFlotte 9s ease-in-out infinite; }
@keyframes qzrHbBond { 40% { transform: scale(1.7) rotate(20deg); opacity: .5; } }

/* Mode sombre : le Cahier passe au papier sombre, les signes s'éclaircissent. */
:root[data-mode="dark"] #quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage.qzr-fond-cahier .qzr-hb-decor { background-color: var(--hb-cahier-nuit); }
:root[data-mode="dark"] #quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage.qzr-fond-cahier .qzr-hb-decor__trame {
  background-image: linear-gradient(rgba(127, 188, 163, .10) 1px, transparent 1px), linear-gradient(90deg, rgba(127, 188, 163, .10) 1px, transparent 1px);
}
:root[data-mode="dark"] #quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage.qzr-fond-calme .qzr-hb-decor__trame { background-image: radial-gradient(rgba(127, 188, 163, .2) 1px, transparent 1.3px); }
:root[data-mode="dark"] #quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage:not(.qzr-fond-ardoise) .qzr-hb-glyphe { color: var(--hb-trait-nuit); }
:root[data-mode="dark"] #quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage { --hb-ombre-c: rgba(0, 0, 0, .5); }
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) #quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage.qzr-fond-cahier .qzr-hb-decor { background-color: var(--hb-cahier-nuit); }
  :root:not([data-mode="light"]) #quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage.qzr-fond-cahier .qzr-hb-decor__trame {
    background-image: linear-gradient(rgba(127, 188, 163, .10) 1px, transparent 1px), linear-gradient(90deg, rgba(127, 188, 163, .10) 1px, transparent 1px);
  }
  :root:not([data-mode="light"]) #quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage.qzr-fond-calme .qzr-hb-decor__trame { background-image: radial-gradient(rgba(127, 188, 163, .2) 1px, transparent 1.3px); }
  :root:not([data-mode="light"]) #quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage:not(.qzr-fond-ardoise) .qzr-hb-glyphe { color: var(--hb-trait-nuit); }
  :root:not([data-mode="light"]) #quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage { --hb-ombre-c: rgba(0, 0, 0, .5); }
}

/* ── En-tête : mascotte + bulle · chrono, puis « Question n/N » · Série · XP ── */
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .playground-header {
  grid-template-columns: 54px minmax(0, 1fr) auto;
  grid-template-areas:
    "masc bulle chrono"
    "puces puces puces";
  column-gap: 10px;
  row-gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .playground-header > .solo-mascot { grid-area: masc; width: 54px; height: 64px; }
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .playground-header > .qzr-hb-bulle { grid-area: bulle; }
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .playground-header > #timerWrap { grid-area: chrono; width: 56px; height: 56px; }
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .playground-header > #qzrPlayHud { grid-area: puces; justify-self: stretch; align-self: center; display: flex; flex-wrap: wrap; gap: 6px; }
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage #qzrPlayHud > .question-number-tracket { width: auto; margin: 0; }
/* La bulle de la mascotte vit dans l'en-tête : l'ancienne, posée au-dessus
   de la mascotte, n'est plus créée (SoloMascot.say). */
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .solo-mascot .qzr-m-bubble { display: none !important; }

/* Pastilles « Question n/N », Série, XP. */
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-play-chip,
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .question-number-tracket {
  background: var(--qz-surface) !important;
  border: 2px solid var(--hb-ligne) !important;
  border-radius: 999px !important;
  box-shadow: var(--hb-ombre) !important;
  color: var(--qz-accent-ink) !important;
  font-size: .76rem;
  font-weight: 800;
  line-height: 1.2;
  padding: 5px 10px;
}
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-play-chip--streak[data-hot="1"] { border-color: var(--qzr-flamme) !important; }

/* Chrono : un cercle blanc net, plus petit. */
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage #timerWrap {
  box-sizing: border-box;
  padding: 3px;
  border-radius: 50%;
  background: var(--qz-surface);
  border: 2px solid var(--hb-ligne);
  box-shadow: var(--hb-ombre);
}
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage #timerWrap .timer-circle-svg { filter: none; }
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage #timerWrap .timer-text { font-size: 1.05rem; font-weight: 900; }

/* Bulle permanente. */
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-bulle {
  display: block;
  position: relative;
  min-width: 0;
  background: var(--qz-surface);
  color: var(--qz-text);
  border: 2px solid var(--hb-ligne);
  border-radius: 14px;
  padding: 7px 12px;
  font-size: .86rem;
  font-weight: 800;
  line-height: 1.3;
  box-shadow: var(--hb-ombre);
}
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-bulle:empty { visibility: hidden; }
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-bulle::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -6px;
  background: inherit;
  border-left: 2px solid var(--hb-ligne);
  border-bottom: 2px solid var(--hb-ligne);
  transform: rotate(45deg);
}
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-bulle.is-succes { background: var(--qz-accent-soft); border-color: var(--qz-accent); }
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-bulle.is-succes::before { border-color: var(--qz-accent); }
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-bulle.is-erreur {
  background: color-mix(in srgb, var(--hb-orange) 12%, var(--qz-surface));
  border-color: color-mix(in srgb, var(--hb-orange) 65%, var(--qz-surface));
}
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-bulle.is-erreur::before { border-color: color-mix(in srgb, var(--hb-orange) 65%, var(--qz-surface)); }
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-bulle.is-pop { animation: qzrHbPop .35s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes qzrHbPop { from { transform: scale(.94); opacity: .4; } }

/* ── Carte de la question, tampon et choc ─────────────────────────────────── */
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .question-box {
  position: relative;
  background: var(--qz-surface) !important;
  border: 2px solid var(--hb-ligne) !important;
  border-radius: 22px !important;
  box-shadow: var(--hb-ombre) !important;
}
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .question-box.qzr-hb-choc { animation: qzrHbChoc .35s .28s; }
@keyframes qzrHbChoc { 30% { transform: translateY(3px) scale(.995); } }
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-tampon {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 2;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 3px solid var(--qz-accent-deep);
  color: var(--qz-accent-deep);
  background: color-mix(in srgb, var(--qz-surface) 75%, transparent);
  display: grid;
  place-items: center;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .08em;
  transform: rotate(-14deg);
  pointer-events: none;
  animation: qzrHbTampon .45s cubic-bezier(.2, 1.6, .4, 1) both;
}
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-tampon::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 1.5px dashed currentColor;
}
@keyframes qzrHbTampon {
  0% { transform: rotate(-14deg) scale(2.4); opacity: 0; }
  60% { transform: rotate(-14deg) scale(.92); opacity: 1; }
  100% { transform: rotate(-14deg) scale(1); }
}

/* ── Réponses ─────────────────────────────────────────────────────────────── */
/* Un peu d'air sur les côtés : le trait du stylo déborde de la tuile. */
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .questions-answers-container { padding-left: 8px; padding-right: 8px; margin-left: -8px; margin-right: -8px; }
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .answers-grid .answer-btn {
  position: relative;
  background: var(--qz-surface);
  border: 2px solid var(--hb-ligne) !important;
  border-radius: 18px !important;
  box-shadow: var(--hb-ombre) !important;
  transition: transform .12s, box-shadow .12s, border-color .2s, background .2s, opacity .2s;
}
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .answers-grid .answer-btn:not(.disabled):active { transform: translateY(1px); box-shadow: var(--hb-ombre-a) !important; }
@media (hover: hover) {
  #quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .answers-grid .answer-btn:not(.disabled):hover { transform: translateY(-1px); box-shadow: var(--hb-ombre-h) !important; }
}
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .answers-grid .answer-btn.selected { border-color: var(--qz-accent) !important; }
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .answers-grid .answer-btn.correct { border-color: var(--qz-success) !important; }
/* Choix faux : ORANGE (--qz-error, la famille « erreur » de l'app), plus le
   rouge --qz-danger — demande du propriétaire, 27/10. Bordure, pastille et
   croix. */
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .answers-grid .answer-btn.wrong { border-color: var(--qz-error) !important; }
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .answers-grid .answer-btn.wrong::after { color: var(--qz-error-ink) !important; }
/* Une couleur par lettre (A teal, B bleu, C ocre, D prune). */
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .answers-grid .answer-btn .answer-key { border-radius: 9px; color: var(--qz-on-accent) !important; font-weight: 900; }
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .answers-grid .answer-btn:nth-child(4n+1) .answer-key { background: var(--qz-accent-deep) !important; }
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .answers-grid .answer-btn:nth-child(4n+2) .answer-key { background: var(--hb-lettre-b) !important; }
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .answers-grid .answer-btn:nth-child(4n+3) .answer-key { background: var(--hb-lettre-c) !important; }
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .answers-grid .answer-btn:nth-child(4n+4) .answer-key { background: var(--hb-lettre-d) !important; }
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .answers-grid .answer-btn.correct .answer-key { background: var(--qz-success) !important; }
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .answers-grid .answer-btn.wrong .answer-key { background: var(--qz-error) !important; }

/* Propositions courtes : grille 2 x 2, lettre en haut, texte dessous. */
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .answers-grid.qzr-hb-grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .answers-grid.qzr-hb-grille .answer-btn {
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-height: 96px;
  padding: 12px;
}
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .answers-grid.qzr-hb-grille .answer-btn > span { font-size: 1rem; font-weight: 800; }
/* Propositions longues : une colonne ; très longues : police resserrée. */
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .answers-grid.qzr-hb-liste { grid-template-columns: minmax(0, 1fr); gap: 8px; }
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .answers-grid.qzr-hb-liste .answer-btn { min-height: 56px; }
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .answers-grid.qzr-hb-dense .answer-btn > span { font-size: .875rem; line-height: 1.3; }

/* Questions à trous : les tuiles de la banque de mots et le « Valider » au
   repos prennent le contour des tuiles de réponse, au thème de l'app (31/10). */
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage {
  --qzr-tuile-ligne: var(--hb-ligne);
  --qzr-tuile-socle: var(--hb-ligne);
}
/* La consigne « Touche un blanc… » se perdait sur les décors sombres. */
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .realtime-wordbank__hint {
  align-self: center;
  padding: 5px 12px;
  border-radius: var(--qz-r-pill);
  background: var(--qz-surface);
  color: var(--qz-muted);
  opacity: 1;
}

/* Onde au toucher. */
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-onde-cadre { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-onde {
  position: absolute;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--qz-accent) 30%, transparent);
  animation: qzrHbOnde .6s ease-out forwards;
}
@keyframes qzrHbOnde { to { transform: scale(14); opacity: 0; } }

/* Correction au stylo autour de la bonne réponse. */
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-stylo {
  position: absolute;
  left: -7px;
  top: -7px;
  z-index: 2;
  width: calc(100% + 14px);
  height: calc(100% + 14px);
  overflow: visible;
  pointer-events: none;
}
/* Le stylo entoure la BONNE réponse, révélée après une erreur : orange
   (--qz-error) et non plus rouge — demande du propriétaire, 27/10. */
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-stylo path {
  fill: none;
  stroke: var(--qz-error);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: qzrHbTrait .7s .35s ease-out forwards;
}
@keyframes qzrHbTrait { to { stroke-dashoffset: 0; } }

/* ── Mini feu d'artifice sur la bonne réponse ─────────────────────────────── */
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-gerbe { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-gerbe i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--qz-success);
  animation: qzrHbGerbe .9s ease-out forwards;
}
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-gerbe i:nth-child(2) { background: var(--qz-energy); }
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-gerbe i:nth-child(3) { background: var(--hb-lettre-b); }
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-gerbe i:nth-child(4) { background: var(--hb-lettre-d); }
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-gerbe i:nth-child(5) { background: var(--hb-lettre-c); }
@keyframes qzrHbGerbe {
  0% { transform: translate(-50%, -50%); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(220deg) scale(.5); opacity: 0; }
}

/* ── Éclair : la pastille XP flashe, une étiquette saute ──────────────────── */
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-play-chip--xp { position: relative; }
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-play-chip.qzr-hb-zap { animation: qzrHbZap .7s ease-out 2; }
@keyframes qzrHbZap { 30% { background: color-mix(in srgb, var(--qz-energy) 25%, white); border-color: var(--qz-energy); box-shadow: 0 0 0 4px color-mix(in srgb, var(--qz-energy) 35%, transparent); } }
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-eclair {
  position: absolute;
  right: -8px;
  top: -16px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--qz-energy) 60%, white);
  border: 2px solid color-mix(in srgb, var(--qz-energy) 75%, black);
  color: color-mix(in srgb, var(--qz-energy) 22%, black);
  font-size: .7rem;
  font-weight: 900;
  white-space: nowrap;
  animation: qzrHbSaute .45s cubic-bezier(.2, 1.6, .4, 1) both;
}
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-eclair i { color: color-mix(in srgb, var(--qz-energy) 22%, black) !important; }
@keyframes qzrHbSaute { from { transform: scale(.3); opacity: 0; } }

/* ── Bandeau des paliers de série (×3, ×5, ×7, ×10) ───────────────────────── */
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-bandeau {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  top: 38%;
  z-index: 70;
  justify-content: center;
  pointer-events: none;
  visibility: hidden;
}
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-bandeau.is-visible { visibility: visible; }
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-bandeau span {
  background: var(--qz-accent-deep);
  color: var(--qz-on-accent);
  font-size: 1.4rem;
  font-weight: 900;
  padding: 10px 22px;
  border-radius: 16px;
  border: 2px solid color-mix(in srgb, var(--qz-accent-deep) 70%, black);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--qz-accent-deep) 70%, black);
  transform: rotate(-3deg);
}
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-bandeau.is-visible span { animation: qzrHbBandeau .45s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes qzrHbBandeau { from { transform: rotate(-3deg) scale(.4); opacity: 0; } }

/* ── Tension : les bords pulsent en orange, la mascotte transpire ─────────── */
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-vignette {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 59;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage.qzr-hb-tension .qzr-hb-vignette { opacity: 1; animation: qzrHbVignette 1s ease-in-out infinite; }
@keyframes qzrHbVignette {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(232, 115, 59, 0); }
  50% { box-shadow: inset 0 0 70px 6px rgba(232, 115, 59, .38); }
}
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage.qzr-hb-tension .playground-header > .solo-mascot::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 6px;
  z-index: 3;
  width: 8px;
  height: 11px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: var(--hb-goutte);
  animation: qzrHbGoutte 1s ease-in infinite;
}
@keyframes qzrHbGoutte {
  0% { transform: translateY(0); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(9px); opacity: 0; }
}

/* ── Ligne du bas : objectif + bouton de réglages ─────────────────────────── */
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-bas {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 8px 56px var(--hb-bas) 0;
}
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-bas > #realtimeGoalHudList { flex: 1; min-width: 0; margin: 0; }
body.theme-1 #quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-bas .realtime-goal-hud-card {
  display: flex;
  align-items: center;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0 14px;
  border: 2px solid var(--hb-ligne) !important;
  border-radius: 999px !important;
  box-shadow: var(--hb-ombre);
}
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-bas .realtime-goal-hud-track { flex: 1; display: flex; align-items: center; gap: 10px; }
/* La carte n'a pas de libellé : une cible dit « objectif » sans texte. */
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-bas .realtime-goal-hud-track::before {
  content: "\f140";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: .9rem;
  color: var(--qz-accent-deep);
}
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-bas .realtime-goal-hud-track .progress { flex: 1; }
/* La barre de relance prend la place de l'objectif. */
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage.qzr-relance-ouverte .qzr-hb-bas { visibility: hidden; }

/* Bouton de réglages : sur la ligne de l'objectif (puis de la relance), il
   ne remonte plus au-dessus de la barre. Sa place est MESURÉE
   (rt.alignerPiedSolo) : --hb-pied cale son centre sur celui de la carte
   d'objectif, --hb-col-d son bord droit sur celui de la colonne. Le conteneur
   a une marge intérieure (16 à 24 px selon l'écran) qu'un élément fixe ignore :
   un calcul en CSS seul le décalait d'autant. */
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage #btnSessionInfo.realtime-session-info-btn,
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage.qzr-relance-ouverte #btnSessionInfo.realtime-session-info-btn {
  right: var(--hb-col-d, var(--hb-droite-fab)) !important;
  bottom: var(--hb-pied, var(--hb-bas)) !important;
  background: var(--qz-surface) !important;
  color: var(--qz-accent-ink) !important;
  border: 2px solid var(--hb-ligne) !important;
  box-shadow: var(--hb-ombre) !important;
}

/* ── Barre de relance : une carte nette sur toute la colonne ────────────────
   Le bouton de réglages s'efface tant qu'elle est là (règle plus bas) : elle
   reprend sa place à droite. */
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-relance {
  left: var(--hb-col-g, max(12px, calc(50% - 298px)));
  right: var(--hb-col-d, var(--hb-droite-fab));
  bottom: var(--hb-pied, var(--hb-bas));
  max-width: none;
  margin: 0;
  border: 2px solid var(--hb-ligne);
  border-radius: 20px;
  padding: 12px 14px 14px;
  box-shadow: var(--hb-ombre);
  transform: translateY(140%);
}
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-relance.is-visible { transform: none; }
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-relance__btn {
  border-width: 2px;
  border-style: solid;
  border-color: var(--hb-ligne);
  box-shadow: var(--hb-ombre);
}
/* Objectif atteint : la jauge passe à l'or et scintille. */
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-relance__piste.is-or i {
  background: linear-gradient(90deg, var(--qz-energy), color-mix(in srgb, var(--qz-energy) 45%, white), var(--qz-energy)) !important;
  background-size: 200% 100% !important;
  animation: qzrHbOr 1.2s linear infinite;
}
@keyframes qzrHbOr { to { background-position: -200% 0; } }
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-etincelle {
  position: absolute;
  width: 14px;
  height: 14px;
  color: var(--qz-energy);
  pointer-events: none;
  animation: qzrHbEtincelle 1.1s ease-out infinite;
}
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-etincelle svg { width: 100%; height: 100%; fill: currentColor; display: block; }
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-etincelle--0 { right: 16px; top: 10px; }
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-etincelle--1 { right: 44px; top: 24px; width: 10px; height: 10px; animation-delay: .35s; }
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-etincelle--2 { right: 26px; top: 40px; width: 12px; height: 12px; animation-delay: .7s; }
@keyframes qzrHbEtincelle {
  0% { transform: scale(0) rotate(0); opacity: 0; }
  40% { transform: scale(1.2) rotate(40deg); opacity: 1; }
  100% { transform: scale(.6) rotate(90deg); opacity: 0; }
}


/* ── Moins d'animations : tout s'arrête, les états restent lisibles ───────── */
@media (prefers-reduced-motion: reduce) {
  #quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-gerbe { display: none; }
  #quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-glyphe,
  #quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-bulle,
  #quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .question-box.qzr-hb-choc,
  #quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-tampon,
  #quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-onde,
  #quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-stylo path,
  #quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-play-chip.qzr-hb-zap,
  #quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-eclair,
  #quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-bandeau.is-visible span,
  #quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-relance__piste.is-or i,
  #quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-etincelle,
  #quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage.qzr-hb-tension .qzr-hb-vignette,
  #quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage.qzr-hb-tension .playground-header > .solo-mascot::after {
    animation: none !important;
  }
  #quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage .qzr-hb-stylo path { stroke-dashoffset: 0; }
  #quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage.qzr-hb-tension .qzr-hb-vignette { box-shadow: inset 0 0 50px 4px rgba(232, 115, 59, .3); }
}

/* ── « Cette partie » : sélecteur de thème ───────────────────────────────── */
#sessionInfoModal .qzs-fonds__choix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#sessionInfoModal .qzs-fond {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-height: 44px;
  padding: 6px 6px 8px;
  border: 2px solid var(--qz-line);
  border-radius: 14px;
  background: var(--qz-surface);
  color: var(--qz-text);
  font: inherit;
  font-size: .8rem;
  font-weight: 800;
  cursor: pointer;
}
#sessionInfoModal .qzs-fond[aria-checked="true"] {
  border-color: var(--qz-accent-deep);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--qz-accent-deep) 18%, transparent);
}
#sessionInfoModal .qzs-fond__apercu { position: relative; display: block; height: 48px; border-radius: 9px; overflow: hidden; border: 1px solid var(--qz-line); }
#sessionInfoModal .qzs-fond__apercu::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 8px; height: 12px; border-radius: 5px; background: var(--qz-surface); opacity: .95; }
#sessionInfoModal .qzs-fond__apercu--cahier {
  background-color: var(--hb-cahier);
  background-image:
    linear-gradient(90deg, transparent 9px, rgba(210, 96, 58, .45) 9px, rgba(210, 96, 58, .45) 10.5px, transparent 10.5px),
    linear-gradient(rgba(15, 110, 86, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 110, 86, .16) 1px, transparent 1px);
  background-size: 100% 100%, 7px 7px, 7px 7px;
}
#sessionInfoModal .qzs-fond__apercu--ardoise { background: radial-gradient(ellipse at 25% 20%, rgba(255, 255, 255, .12), transparent 55%), var(--hb-ardoise); }
#sessionInfoModal .qzs-fond__apercu--calme {
  background-color: var(--qz-screen);
  background-image: radial-gradient(rgba(15, 110, 86, .25) 1px, transparent 1.4px);
  background-size: 8px 8px;
}

/* ── THÈMES IMMERSIFS (qzr-solo-decors.js) : profondeur de champ ──────────
   Trois plans : LOIN flou (hors de la mise au point), MILIEU à peine flou,
   PREMIER PLAN net qui cadre l'écran par les bords ; chacun dérive à sa
   vitesse (parallaxe), des particules donnent l'ambiance. Les couleurs sont
   posées par le module (données de palette) : ici, structure et mouvement. */
.qzr-hb-decor .qzr-sc { position: absolute; inset: 0; overflow: hidden; }
.qzr-hb-decor .qzr-sc__ciel { position: absolute; inset: 0; }
/* La scène ne s'étire pas sur grand écran : une boîte centrée, le ciel seul
   couvre toute la largeur. */
.qzr-hb-decor .qzr-sc__cadre { position: absolute; top: 0; bottom: 0; left: 50%; width: min(100%, 900px); transform: translateX(-50%); }
.qzr-hb-decor .qzr-sc__plan { position: absolute; left: -4%; width: 108%; bottom: 0; display: block; }
.qzr-hb-decor .qzr-sc__plan--loin { filter: blur(3px); opacity: .95; animation: qzrScDerive 46s ease-in-out infinite alternate; }
.qzr-hb-decor .qzr-sc__plan--milieu { filter: blur(1.2px); animation: qzrScDerive 30s ease-in-out infinite alternate-reverse; }
.qzr-hb-decor .qzr-sc__plan--pres { animation: qzrScDerive 22s ease-in-out infinite alternate; }
@keyframes qzrScDerive { from { transform: translateX(-1.6%); } to { transform: translateX(1.6%); } }
.qzr-hb-decor .qzr-sc__pt { position: absolute; border-radius: 50%; pointer-events: none; }
.qzr-hb-decor .qzr-sc__pt--luciole { background: rgba(255, 241, 166, 1); box-shadow: 0 0 10px 3px rgba(255, 236, 140, .75); animation: qzrScLuciole 6s ease-in-out infinite; }
.qzr-hb-decor .qzr-sc__pt--luciole-ville { background: rgba(255, 224, 138, 1); box-shadow: 0 0 12px 4px rgba(255, 214, 120, .6); animation: qzrScLuciole 7s ease-in-out infinite; }
@keyframes qzrScLuciole { 0%, 100% { opacity: .15; transform: translate(0, 0); } 50% { opacity: 1; transform: translate(10px, -14px); } }
.qzr-hb-decor .qzr-sc__pt--etoile { background: white; box-shadow: 0 0 6px 1px rgba(255, 255, 255, .8); animation: qzrScScintille 3s ease-in-out infinite; }
@keyframes qzrScScintille { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }
.qzr-hb-decor .qzr-sc__pt--filante { width: 90px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), white); transform: rotate(-24deg); animation: qzrScFilante 7s ease-in infinite; }
@keyframes qzrScFilante { 0%, 80% { opacity: 0; translate: 0 0; } 85% { opacity: 1; } 100% { opacity: 0; translate: -160px 70px; } }
.qzr-hb-decor .qzr-sc__pt--sable { background: rgba(185, 120, 62, 1); opacity: .55; border-radius: 1px; animation: qzrScSable 9s linear infinite; }
@keyframes qzrScSable { from { transform: translateX(-30px); opacity: 0; } 20% { opacity: .6; } to { transform: translateX(120px); opacity: 0; } }
.qzr-hb-decor .qzr-sc__pt--bulle { border: 1.5px solid rgba(220, 246, 255, .75); background: rgba(220, 246, 255, .12); animation: qzrScBulle 7s linear infinite; }
@keyframes qzrScBulle { from { transform: translateY(40px); opacity: 0; } 15% { opacity: 1; } to { transform: translateY(-260px); opacity: 0; } }
.qzr-hb-decor .qzr-sc__pt--flocon { background: white; box-shadow: 0 0 4px rgba(150, 190, 220, .6); animation: qzrScFlocon 10s linear infinite; }
@keyframes qzrScFlocon { from { transform: translate(0, -40px); opacity: 0; } 10% { opacity: 1; } to { transform: translate(24px, 320px); opacity: .2; } }
.qzr-hb-decor .qzr-sc__brume { position: absolute; left: 0; right: 0; height: 16%; background: linear-gradient(transparent, rgba(240, 250, 244, .7), transparent); filter: blur(6px); }
.qzr-hb-decor .qzr-sc__nebuleuse { position: absolute; border-radius: 50%; filter: blur(26px); opacity: .5; animation: qzrScDerive 36s ease-in-out infinite alternate; }
.qzr-hb-decor .qzr-sc__soleil { position: absolute; border-radius: 50%; filter: blur(11px); opacity: .88; }
.qzr-hb-decor .qzr-sc__rais { position: absolute; inset: -10% 0 30% 0; background: repeating-linear-gradient(100deg, rgba(255, 255, 255, .11) 0 18px, transparent 18px 64px); filter: blur(5px); animation: qzrScRais 9s ease-in-out infinite alternate; }
@keyframes qzrScRais { from { opacity: .5; transform: translateX(-12px); } to { opacity: 1; transform: translateX(12px); } }
.qzr-hb-decor .qzr-sc__bokeh { position: absolute; border-radius: 50%; filter: blur(8px); opacity: .5; animation: qzrScBokeh 14s ease-in-out infinite alternate; }
@keyframes qzrScBokeh { from { transform: translate(0, 0); } to { transform: translate(18px, -22px); } }
.qzr-hb-decor .qzr-sc__nuage { position: absolute; height: 22px; border-radius: 999px; background: white; filter: blur(4px); opacity: .75; animation: qzrScNuage 40s linear infinite; }
@keyframes qzrScNuage { from { transform: translateX(-40px); } to { transform: translateX(60px); } }
.qzr-hb-decor .qzr-sc__oiseau { position: absolute; animation: qzrScOiseau 10s ease-in-out infinite; }
@keyframes qzrScOiseau { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(26px, -8px); } }
@media (prefers-reduced-motion: reduce) {
  .qzr-hb-decor .qzr-sc *, .qzr-hb-decor .qzr-sc { animation: none !important; }
}
/* Thèmes sombres (Ardoise, Espace, Océan, Ville) : ombre noire, et les aides
   posées à même le fond prennent une pastille claire. */
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage.qzr-fond-sombre { --hb-ombre-c: rgba(0, 0, 0, .45); }
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage.qzr-fond-sombre .realtime-match-help {
  background: var(--qz-surface);
  border-radius: 12px;
  padding: 6px 10px;
}

/* ── Barre de relance affichée, transition vers la question suivante,
   feuille des réglages ou écran de fin ouvert : le bouton s'efface ──────── */
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage.qzr-relance-ouverte #btnSessionInfo.realtime-session-info-btn,
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage.qzr-hb-transition #btnSessionInfo.realtime-session-info-btn,
#quizRealTimeContainer.qzr-play-hd.qzr-compagnon.qzr-habillage.qzr-hb-modale #btnSessionInfo.realtime-session-info-btn {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .18s ease;
}

/* ── Sélecteur de thème : un rail qui défile, boutons sur grand écran ───── */
#sessionInfoModal .qzs-fonds .qzs-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#sessionInfoModal .qzs-fonds__nav { display: none; gap: 6px; }
@media (min-width: 768px) {
  #sessionInfoModal .qzs-fonds__nav { display: inline-flex; }
}
#sessionInfoModal .qzs-fonds__navbtn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--qz-line);
  background: var(--qz-surface);
  color: var(--qz-accent-ink);
  display: inline-grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
}
#sessionInfoModal .qzs-fonds__navbtn:disabled { opacity: .4; cursor: default; }
#sessionInfoModal .qzs-fonds .qzs-fonds__choix {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 2px 2px 8px;
  margin: 0 -2px;
  scrollbar-width: thin;
}
#sessionInfoModal .qzs-fonds .qzs-fond { flex: 0 0 92px; scroll-snap-align: start; }
#sessionInfoModal .qzs-fond__nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }