/*
 * LA NÔTRE — ne fait pas partie de la référence.
 *
 * `css/flac.css`, `css/reset.css`, `img/` et `fnt/` sont des copies conformes
 * de ChadiZarkal/redorgreenorigin et doivent le rester à l'octet près, pour
 * qu'une version plus récente s'installe par simple écrasure. Tout ce que
 * l'application hôte casse se répare donc ici, ce qui garde la frontière
 * visible.
 *
 * Ordre de chargement : reset.css → flac.css → adapter.css
 */

/*
 * L'application hôte pose une classe de police sur <body>, et une classe
 * (0,1,0) l'emporte sur le `html body` de flac.css (0,0,2) : tout ce qui hérite
 * recevait la typographie du site au lieu d'Agdasima. La poser sur le conteneur
 * règle tout le sous-arbre par héritage — sans !important, sans course à la
 * spécificité.
 */
.main-container {
  font-family: 'Agdasima', sans-serif;
}

/*
 * L'application hôte fixe `html { height: 100% }` et un fond sombre sur <body>
 * via Tailwind ; la référence attend un <body> de la hauteur de l'écran, qu'elle
 * peint elle-même. Sans cette ligne le conteneur flotte sur le fond du site.
 */
body:has(.main-container) {
  background-color: var(--color-bg-desktop);
  min-height: 100svh;
}

/*
 * La référence écrit `.main-container { min-height: 100% }`, et comptait sur un
 * <main> enfant direct de <body>. Ici il est enveloppé par les fournisseurs de
 * l'application (bornage d'erreurs, analytique, préférences de mouvement), dont
 * les div n'ont pas de hauteur définie : un pourcentage n'a alors plus rien
 * contre quoi se résoudre et retombe sur `auto`. Sur une question courte, le
 * conteneur sombre s'arrêtait à 594 px et le fond brun du bureau occupait le
 * dernier quart de l'écran, mesureur compris.
 *
 * Les unités de fenêtre ne dépendent d'aucun parent : elles traversent les
 * enveloppes sans rien leur demander.
 */
.main-container {
  /* Moins la barre du site, rendue au-dessus : sans cette soustraction,
     chaque écran du test défilait de la hauteur de la barre. */
  min-height: calc(100svh - var(--header-h, 3rem));
}

/*
 * COLLISION DE NOMS — la seule entre les deux feuilles, et elle est franche.
 *
 * `globals.css` de l'application et `flac.css` déclarent tous deux `.site-header`.
 * Côté application c'est la barre de navigation du site : hauteur fixe de 3rem,
 * fond opaque, flou d'arrière-plan, bordure basse. Côté référence c'est le bloc
 * logo + accroche, qui doit se dimensionner sur son contenu. Résultat sans cette
 * règle : l'en-tête est écrasé à 48 px, le logo de 96 px en déborde et recouvre
 * l'accroche, la barre de progression et le début de la question.
 *
 * Réparé plutôt que renommé : c'est `.site-header` que `flac.css` stylise, et
 * renommer la classe ferait perdre tout le reste de sa mise en forme. La règle
 * est portée à (0,2,0) par `.main-container`, qui n'existe que sur cette route.
 */
.main-container .site-header {
  height: auto;
  border-bottom: none;
  background: none;
  backdrop-filter: none;
  z-index: auto;
  padding-top: var(--spacing);
}

/* ---------------------------------------------------------------------------
 * Blocs auxquels la référence ne donne pas de classe, parce que son markup ne
 * les avait pas. Écrits dans son idiome plutôt qu'inventés.
 * ------------------------------------------------------------------------- */

/*
 * Le mesureur est en position absolue, calé en bas du `client-container`, et il
 * mesure 4.5rem. La référence ne réservait que `margin-bottom: spacing * 1.5`
 * sous les réponses — 24 px pour 72 px d'aiguille. Tant que les réponses
 * tiennent en un mot, personne ne s'en aperçoit ; dès qu'une réponse fait trois
 * lignes, la dernière passe sous la règle graduée.
 *
 * La réserve est posée sur le conteneur plutôt que sur les boutons, pour qu'elle
 * profite aussi au récap, dont le dernier bloc tombait au même endroit.
 */
.main-container .client-container {
  padding-bottom: calc(4.5rem + var(--spacing));
}

/* Deuxième ligne d'un énoncé, plus petite et grise. */
.prompt-helper {
  margin-top: calc(var(--spacing) * 0.35);
  color: var(--grey);
  font-size: var(--font-size-s);
}

/* Réponse déjà cliquée, le temps que la question quitte l'écran. */
.button-answer.is-picked {
  filter: brightness(1.35);
}

/*
 * Le bloc texte d'un highlight. `.stats-rare li` est un flex qui sépare le
 * texte de la pastille de pourcentage : sans `flex: 1`, le texte se serre à
 * droite et la pastille dérive au milieu de la ligne.
 */
.question-answer {
  flex: 1;
  text-align: left;
}

/*
 * La référence dessinait le radar avec Chart.js dans un <canvas> et lui donnait
 * `height: 100%`. Ici c'est un SVG, qui se dimensionne seul — il ne manque que
 * l'air autour.
 */
.spider-chart-container {
  padding: calc(var(--spacing) * 0.5);
  box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
  .redflag-o-meter .meter-cursor,
  .progress-bar .score-cursor {
    transition-duration: 1ms;
  }
}

/*
 * Une cohorte trop mince, déclarée plutôt que cachée. Un rang sur quatre
 * joueurs reste un rang ; le présenter comme un rang sur mille serait le seul
 * mensonge que cet écran ne peut pas se permettre.
 */
.low-sample-warning {
  color: var(--grey);
  font-style: italic;
  font-size: calc(var(--font-size-s) * 0.85);
}

/*
 * Le repli du radar sous trois axes : deux points ne forment pas un polygone.
 * Des barres disent la même chose sans prétendre à une forme.
 */
.subscore-bars {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 0.4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.subscore-bars li {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 0.5);
}

.subscore-label {
  flex: 0 0 8rem;
  text-align: left;
  font-size: var(--font-size-s);
}

.subscore-track {
  flex: 1;
  height: 0.75rem;
  overflow: hidden;
  border-radius: 1000px;
  background-color: var(--blueish-grey);
}

.subscore-fill {
  display: block;
  height: 100%;
}

.subscore-value {
  flex: 0 0 3.5rem;
  text-align: right;
  font-size: var(--font-size-s);
}



/* La ligne sous les deux menus du préambule. */
.intro-note {
  margin: 0 var(--spacing);
  color: var(--grey);
  font-size: calc(var(--font-size-s) * 0.9);
  text-align: center;
}

/*
 * Un test sans question, une base injoignable : la référence n'avait pas prévu
 * l'écran, parce que son contenu était dans les fichiers.
 */
.error-message {
  margin: auto 0;
  padding: var(--spacing);
  text-align: center;
}

.error-message a {
  color: var(--white);
  text-decoration: underline;
}

.loading-message {
  margin: auto 0;
  text-align: center;
  font-size: var(--font-size-l);
}

/* ---------------------------------------------------------------------------
 * Le récap enrichi : archétype, réponse décisive, ressources, partage.
 *
 * Aucun de ces blocs n'existe dans la feuille de référence, dont le récap
 * s'arrêtait au score, aux drapeaux et aux highlights. Ils sont écrits dans son
 * idiome — coins à 5 px, palette de variables, majuscules condensées — plutôt
 * qu'inventés à côté.
 * ------------------------------------------------------------------------- */


/*
 * Le moment où le test cesse de faire de l'humour. Encadré d'orange et non de
 * rouge : le rouge est la couleur du score, et cette boîte ne doit pas se lire
 * comme une sanction de plus.
 */
.stats-ressource {
  margin: var(--spacing) 0 0;
  padding: var(--spacing);
  border: 1px solid var(--orange);
  border-radius: var(--border-radius);
  text-align: left;
  font-size: var(--font-size-s);
}

.stats-ressource-cat {
  margin: 0 0 calc(var(--spacing) * 0.25) 0;
  color: var(--orange);
  font-size: calc(var(--font-size-s) * 0.85);
  font-weight: bold;
  text-transform: uppercase;
}

.stats-ressource p {
  margin: 0;
}

.stats-ressource-lien {
  display: inline-block;
  margin-top: calc(var(--spacing) * 0.5);
  color: var(--white);
  font-weight: bold;
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Partage
 * ------------------------------------------------------------------------- */

.partage {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.partage-copier {
  margin-top: calc(var(--spacing) * 0.75);
  border: 1px solid var(--grey);
  border-radius: var(--border-radius);
  padding: var(--spacing-text-y) var(--spacing);
  background: none;
  color: var(--white);
  font-family: 'Agdasima', sans-serif;
  font-size: var(--font-size-s);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.partage-copier:hover {
  border-color: var(--white);
}

.partage-note {
  margin: calc(var(--spacing) * 0.5) 0 0;
  color: var(--grey);
  font-size: calc(var(--font-size-s) * 0.85);
  text-align: center;
}

/* ---------------------------------------------------------------------------
 * La devinette d'un résultat partagé
 * ------------------------------------------------------------------------- */

.guess-value {
  margin: 0;
  color: var(--red);
  font-size: var(--font-size-xxl);
  font-weight: bold;
  line-height: 1;
}

.guess-slider {
  width: 100%;
  max-width: 22rem;
  margin: var(--spacing) 0;
  accent-color: var(--red);
}

.guess-verdict {
  margin: 0 var(--spacing);
  padding: var(--spacing);
  border: 1px solid var(--yellow);
  border-radius: var(--border-radius);
  font-size: var(--font-size-m);
}

.guess-skip {
  margin-top: calc(var(--spacing) * 0.5);
  border: none;
  background: none;
  color: var(--grey);
  font-family: 'Agdasima', sans-serif;
  font-size: var(--font-size-s);
  text-decoration: underline;
  cursor: pointer;
}

.guess-skip:hover {
  color: var(--white);
}

/* ---------------------------------------------------------------------------
 * Progression
 * ------------------------------------------------------------------------- */

/*
 * Le compteur remplace ce que les cellules ne peuvent plus dire au-delà de
 * quinze questions. Il reste utile en deçà : « question 3 sur 5 » se lit plus
 * vite qu'on ne compte des cases.
 */
.progress-count {
  margin: 0;
  color: var(--grey);
  font-size: var(--font-size-s);
  text-align: center;
}

.progress-count strong {
  color: var(--white);
  font-weight: bold;
}

/* La barre pleine, quand les cellules deviendraient des rayures de 5 px. */
.progress-bar-fill {
  display: block;
  height: 100%;
  background-color: var(--red);
  transition: width 300ms cubic-bezier(0.86, 0, 0.07, 1);
}

/* Retour en arrière, et sortie discrète de l'écran de reprise. */
.button-back {
  margin-top: var(--spacing);
  border: none;
  background: none;
  color: var(--grey);
  font-family: 'Agdasima', sans-serif;
  font-size: var(--font-size-s);
  text-transform: uppercase;
  cursor: pointer;
}

.button-back:hover {
  color: var(--white);
}

/* ---------------------------------------------------------------------------
 * La page publique de statistiques
 * ------------------------------------------------------------------------- */

.stats-page {
  display: flex;
  flex-direction: column;
  gap: var(--spacing);
  text-align: left;
}

.stats-page-tri {
  display: flex;
  gap: calc(var(--spacing) * 0.5);
  justify-content: center;
}

.stats-page-tri button {
  border: 1px solid var(--blueish-grey);
  border-radius: var(--border-radius);
  padding: calc(var(--spacing-text-y) * 0.6) var(--spacing);
  background: none;
  color: var(--grey);
  font-family: 'Agdasima', sans-serif;
  font-size: var(--font-size-s);
  cursor: pointer;
}

.stats-page-tri .stats-tri-actif {
  border-color: var(--red);
  background-color: var(--red);
  color: #fff;
}

.stats-question {
  padding: var(--spacing);
  border: 1px solid var(--blueish-grey);
  border-radius: var(--border-radius);
}

.stats-question h3 {
  margin: 0;
  font-size: var(--font-size-m);
  font-weight: bold;
  line-height: 1.2;
}

.stats-question-base {
  margin: calc(var(--spacing) * 0.25) 0 var(--spacing) 0;
  color: var(--grey);
  font-size: calc(var(--font-size-s) * 0.85);
}

/* L'écart qui fait la valeur de la page : il se voit avant d'être lu. */
.stats-question-divise {
  color: var(--yellow);
  font-weight: bold;
}

.stats-barres {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 0.75);
  margin: 0;
  padding: 0;
  list-style: none;
}

.stats-barre-texte {
  margin: 0 0 calc(var(--spacing) * 0.2) 0;
  font-size: var(--font-size-s);
}

.stats-barre {
  position: relative;
  display: flex;
  align-items: center;
  height: 1.4rem;
  border-radius: calc(var(--border-radius) * 0.75);
  background-color: var(--blueish-grey);
  overflow: hidden;
}

.stats-barre-fond {
  position: absolute;
  inset: 0 auto 0 0;
  background-color: var(--red);
}

.stats-barre-valeur {
  position: relative;
  padding: 0 calc(var(--spacing) * 0.5);
  font-size: var(--font-size-s);
  font-weight: bold;
}

.stats-barre-sexes {
  display: flex;
  gap: var(--spacing);
  margin: calc(var(--spacing) * 0.25) 0 0 0;
  font-size: calc(var(--font-size-s) * 0.85);
}

/* Deux teintes distinctes, et jamais le rouge : il appartient au total. */
.stats-sexe-h { color: #7dd3fc; }
.stats-sexe-f { color: #f9a8d4; }

/* ===========================================================================
 * LES STORIES — le résultat plein écran, un écran à la fois (voir
 * `Stories.tsx`).
 *
 * LE PROBLÈME QU'ELLES RÉSOLVENT
 *   La carte qui les a précédées réunissait verdict, score, jauge, trois
 *   drapeaux, écart à la moyenne et point noir dans trois cents pixels. Rien
 *   n'y manquait et rien ne s'y lisait. Chaque écran pose désormais UNE question
 *   et y répond en très gros caractères.
 *
 * PLEIN ÉCRAN
 *   Fixées sur toute la fenêtre, barre du site comprise : une capture d'écran
 *   de téléphone attrape exactement un écran, logo en tête et adresse au pied.
 *   `100dvh` et non `100vh` : sur iOS, `vh` compte la barre d'adresse repliée,
 *   et le pied de la story passerait dessous.
 *
 * LES TAILLES SUIVENT LA HAUTEUR DE L'ÉCRAN
 *   En `svh` plutôt qu'en `vw` : c'est la hauteur qui manque sur un petit
 *   téléphone, et la largeur qui abonde sur un grand. Les bornes de `clamp`
 *   tiennent les extrêmes.
 * ======================================================================== */

/* Les enveloppes du portail : leurs classes, sans leurs boîtes. */
.rft-portail.main-container,
.rft-portail.main-container > .client-container,
.rft-portail.main-container > .client-container > .game-wrapper,
.rft-portail.main-container > .client-container > .game-wrapper > .finish-block {
  display: contents;
}

.stories {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  justify-content: center;
  height: 100dvh;
  background-color: #0d0c0c;
  overscroll-behavior: contain;
}

/*
 * Le fond change d'un écran à l'autre : une lueur de la teinte de l'écran,
 * posée sur le gris de la référence. Au premier écran, c'est la couleur du
 * score elle-même — vert, orange ou rouge — que le joueur voit avant de lire
 * le nombre.
 */
.stories-cadre {
  --fond: 187, 32, 64;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 30rem;
  height: 100%;
  box-sizing: border-box;
  padding:
    max(0.4rem, env(safe-area-inset-top))
    1.25rem
    max(0.5rem, env(safe-area-inset-bottom));
  background:
    radial-gradient(130% 65% at 50% 32%, rgba(var(--fond), 0.34) 0%, transparent 72%),
    linear-gradient(180deg, var(--dark-grey) 0%, #121111 100%);
  overflow: hidden;
  outline: none;
  /* Un tap rapide sur le titre le sélectionnerait au lieu d'avancer. */
  user-select: none;
  -webkit-user-select: none;
}

.stories-cadre[data-ecran="verdict"] { --fond: var(--teinte); }
.stories-cadre[data-ecran="pari"] { --fond: 247, 201, 20; }
.stories-cadre[data-ecran="moyennes"] { --fond: 187, 32, 64; }
.stories-cadre[data-ecran="classement"] { --fond: 139, 58, 159; }
.stories-cadre[data-ecran="axes"] { --fond: 187, 32, 64; }
.stories-cadre[data-ecran="reponse"] { --fond: 139, 58, 159; }
.stories-cadre[data-ecran="ressource"] { --fond: 226, 124, 33; }
.stories-cadre[data-ecran="fin"] { --fond: 187, 32, 64; }

/*
 * Les segments sont de vrais boutons, qui sautent à leur écran. Le trait ne
 * fait que trois pixels ; la zone de tap, elle, en fait vingt-huit de haut.
 */
.stories-segments {
  display: flex;
  gap: 4px;
}

.stories-segment {
  position: relative;
  flex: 1;
  height: 1.75rem;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.stories-segment::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 0.22);
  transition: background-color 400ms cubic-bezier(0.86, 0, 0.07, 1);
}

.stories-segment.is-vu::before {
  background-color: var(--white);
}

.stories-tete {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.stories-logo {
  height: 2rem;
  width: auto;
  margin-right: auto;
}

.stories-compte {
  color: var(--grey);
  font-size: 1rem;
  letter-spacing: 0.1em;
}

.stories-fermer {
  width: 44px;
  height: 44px;
  margin-right: -0.6rem;
  border: none;
  background: none;
  color: var(--white);
  font-family: 'Agdasima', sans-serif;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.85;
}

.stories-fermer:hover { opacity: 1; }

.stories-scene {
  display: flex;
  flex: 1;
  min-height: 0;
  cursor: pointer;
}

/*
 * Centré verticalement par des marges automatiques et non par
 * `justify-content: center` : un écran plus haut que sa scène — un petit
 * téléphone, une longue réponse — doit défiler depuis son haut, alors qu'un
 * centrage flex en couperait le début.
 */
.story {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.3rem, 1.1svh, 0.7rem);
  min-width: 0;
  padding: 0.5rem 0;
  overflow-y: auto;
  text-align: center;
}

.story > :first-child { margin-top: auto; }
.story > :last-child { margin-bottom: auto; }

.story p {
  margin: 0;
}

.vient-de-droite { animation: story-depuis-droite 400ms cubic-bezier(0.86, 0, 0.07, 1); }
.vient-de-gauche { animation: story-depuis-gauche 400ms cubic-bezier(0.86, 0, 0.07, 1); }

@keyframes story-depuis-droite {
  from { opacity: 0; transform: translateX(1.5rem); }
  to { opacity: 1; transform: none; }
}

@keyframes story-depuis-gauche {
  from { opacity: 0; transform: translateX(-1.5rem); }
  to { opacity: 1; transform: none; }
}

/* --- Typographie commune ------------------------------------------------ */

.story-surtitre {
  color: var(--grey);
  font-size: clamp(0.95rem, 2.1svh, 1.2rem);
  font-weight: bold;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-wrap: balance;
}

.story-emoji {
  font-size: clamp(3.5rem, 11svh, 6.5rem);
  line-height: 1.1;
}

/* `clamp` : « LE DONNEUR DE LEÇONS » fait deux fois « LE CROISÉ ». */
.story-titre {
  font-size: clamp(2.1rem, min(11vw, 6.5svh), 3.6rem);
  font-weight: bold;
  line-height: 0.98;
  text-wrap: balance;
}

.story-texte {
  max-width: 24rem;
  color: var(--grey);
  font-size: clamp(1.15rem, 2.6svh, 1.5rem);
  line-height: 1.2;
  text-wrap: balance;
}

.story-texte-fort {
  font-size: clamp(1.15rem, 2.6svh, 1.5rem);
  line-height: 1.2;
  text-wrap: balance;
}

/* La phrase qui dit ce que montre l'écran, avant le visuel. */
.story-phrase {
  max-width: 26rem;
  font-size: clamp(1.35rem, 3.3svh, 2rem);
  font-weight: bold;
  line-height: 1.12;
  text-wrap: balance;
}

.story-phrase strong {
  font-size: 1.3em;
}

.story-geant {
  font-size: clamp(5rem, 15svh, 9rem);
  font-weight: bold;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}

.story-geant span,
.story-score strong span {
  font-size: 0.5em;
  margin-left: 0.05em;
}

.story-majuscules { text-transform: uppercase; }

.story .rouge { color: var(--light-red); }
.story .vert { color: var(--light-green); }
.story .jaune { color: var(--yellow); }

.story-note {
  max-width: 24rem;
  color: var(--grey);
  font-size: clamp(0.85rem, 1.9svh, 1rem);
  line-height: 1.25;
  text-wrap: balance;
}

.story-encart {
  width: 100%;
  margin-top: 0.5rem;
  box-sizing: border-box;
  padding: 0.75rem 0.9rem;
  border-left: 3px solid var(--purple);
  border-radius: var(--border-radius);
  background-color: rgba(43, 41, 48, 0.85);
  font-size: clamp(1rem, 2.2svh, 1.2rem);
  line-height: 1.3;
  text-align: left;
}

.story-encart strong { font-weight: bold; }

.story-encart-titre {
  color: var(--grey);
  font-size: 0.8em;
  font-weight: bold;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.story-encart-pique {
  margin-top: 0.2rem !important;
  color: var(--grey);
  font-style: italic;
}

/* --- Écran 1 : le verdict ----------------------------------------------- */

.story-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(0.6rem, 2.5svh, 1.6rem) !important;
  line-height: 0.88;
}

.story-score strong {
  color: rgb(var(--teinte));
  font-size: clamp(5rem, 15svh, 9rem);
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 2.5rem rgba(var(--teinte), 0.45);
}

.story-score-unite {
  color: var(--white);
  font-size: clamp(1.1rem, 2.4svh, 1.45rem);
  font-weight: bold;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/*
 * La jauge : une échelle, pas un remplissage. Le dégradé situe le curseur
 * avant même qu'on lise le nombre ; le curseur est celui de la référence, avec
 * la même seconde et demie de course.
 */
.story-jauge {
  position: relative;
  width: 100%;
  height: 1.1rem;
  margin: clamp(1rem, 3svh, 1.8rem) 0 1.6rem;
  border-radius: 1000px;
  background: linear-gradient(
    90deg,
    var(--light-green) 0%,
    var(--yellow) 48%,
    var(--orange) 66%,
    var(--light-red) 100%
  );
}

.story-jauge-curseur {
  position: absolute;
  top: -0.75rem;
  bottom: 0.35rem;
  width: 24px;
  background-image: url("./img/score-cursor.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform: translateX(-50%);
  transition: left 1500ms cubic-bezier(0.86, 0, 0.07, 1);
  filter: drop-shadow(0 0 0.3rem var(--dark-grey));
}

.story-jauge-gauche,
.story-jauge-droite {
  position: absolute;
  top: 100%;
  margin-top: 5px;
  color: var(--grey);
  font-size: 0.95rem;
}

.story-jauge-gauche { left: 0; }
.story-jauge-droite { right: 0; }

/*
 * --- L'écran du pari ----------------------------------------------------
 * La jauge du verdict, avec deux repères : le score plein, étiqueté
 * au-dessus ; le pari en contour, étiqueté en dessous. Deux valeurs voisines
 * ne se chevauchent donc jamais.
 */
.story-duel {
  position: relative;
  width: 100%;
  height: 1.1rem;
  margin: clamp(2.6rem, 6svh, 3.4rem) 0 clamp(2.6rem, 6svh, 3.4rem);
  border-radius: 1000px;
  background: linear-gradient(
    90deg,
    var(--light-green) 0%,
    var(--yellow) 48%,
    var(--orange) 66%,
    var(--light-red) 100%
  );
}

.story-duel-marque {
  position: absolute;
  top: 50%;
  width: 1.5rem;
  height: 1.5rem;
  box-sizing: border-box;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.story-duel-marque em {
  position: absolute;
  left: 50%;
  font-size: clamp(0.95rem, 2.2svh, 1.15rem);
  font-style: normal;
  font-weight: bold;
  white-space: nowrap;
  transform: translateX(-50%);
}

.story-duel-marque.is-score {
  z-index: 1;
  border: 3px solid var(--white);
  background-color: var(--light-red);
  box-shadow: 0 0 1rem rgba(219, 50, 84, 0.8);
}

.story-duel-marque.is-score em {
  bottom: calc(100% + 0.4rem);
  color: var(--white);
}

.story-duel-marque.is-pari {
  border: 3px dashed var(--yellow);
  background-color: var(--dark-grey);
}

.story-duel-marque.is-pari em {
  top: calc(100% + 0.4rem);
  color: var(--yellow);
}

/* Aux extrémités, l'étiquette se cale sur le bord plutôt que de déborder. */
.story-duel-marque.cale-gauche em { left: 0; transform: none; }
.story-duel-marque.cale-droite em { left: auto; right: 0; transform: none; }

/*
 * --- Écran 2 : toi face aux autres --------------------------------------
 * Une échelle verticale : le tube à gauche, les étiquettes à droite, reliées
 * à leur vraie valeur par un trait quand il a fallu les écarter.
 */
.story-echelle {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 14rem;
  margin: clamp(0.8rem, 2.5svh, 1.6rem) 0 0.6rem;
}

.story-tube {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2.6rem;
  width: 1rem;
  border-radius: 1rem;
  overflow: hidden;
  background: linear-gradient(
    0deg,
    var(--light-green) 0%,
    var(--yellow) 45%,
    var(--orange) 65%,
    var(--light-red) 100%
  );
}

/* Au-delà de 100 : hors barème, hachuré. */
.story-tube-hors {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: repeating-linear-gradient(135deg, #5b0f22 0 5px, #3b0a17 5px 10px);
}

.story-graduation {
  position: absolute;
  left: 0;
  width: 2rem;
  color: var(--grey);
  font-size: 0.85rem;
  text-align: right;
  transform: translateY(-50%);
}

.story-liens {
  position: absolute;
  top: 0;
  left: 3.6rem;
  width: 1.6rem;
  height: 100%;
  overflow: visible;
}

.story-liens .lien { stroke: rgba(255, 255, 255, 0.45); stroke-width: 1.5; }
.story-liens .lien-moi { stroke: var(--white); stroke-width: 2.5; }

.story-marque {
  position: absolute;
  left: 2.35rem;
  width: 1.5rem;
  height: 3px;
  background-color: var(--white);
  transform: translateY(-50%);
}

.story-marque.is-moi {
  left: 3.1rem;
  width: 1.5rem;
  height: 1.5rem;
  box-sizing: border-box;
  border: 3px solid var(--white);
  border-radius: 50%;
  background-color: var(--light-red);
  box-shadow: 0 0 1rem rgba(219, 50, 84, 0.8);
  transform: translate(-50%, -50%);
}

.story-etiquette {
  position: absolute;
  left: 5.4rem;
  right: 0;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  line-height: 1.05;
  text-align: left;
  transform: translateY(-50%);
}

.story-etiquette strong {
  font-size: clamp(1.45rem, 3.4svh, 2rem);
  font-weight: bold;
  white-space: nowrap;
}

.story-etiquette span {
  color: var(--grey);
  font-size: clamp(0.95rem, 2svh, 1.15rem);
}

.story-etiquette.is-moi {
  right: auto;
  padding: 0.35rem 0.75rem;
  border-radius: var(--border-radius);
  background-color: var(--red);
  box-shadow: 0 0.3rem 1.2rem rgba(187, 32, 64, 0.55);
}

.story-etiquette.is-moi strong {
  color: var(--white);
  font-size: clamp(1.7rem, 4svh, 2.4rem);
}

.story-etiquette.is-moi span {
  color: #ffd6de;
  font-weight: bold;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* --- Écran 3 : le classement -------------------------------------------- */

.story-place {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.9;
}

.story-place strong {
  color: var(--light-red);
  font-size: clamp(3.6rem, 11svh, 7rem);
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 2.5rem rgba(219, 50, 84, 0.4);
}

.story-place span {
  margin-top: 0.3rem;
  font-size: clamp(1.25rem, 2.9svh, 1.65rem);
  font-weight: bold;
}

.story-onglets {
  display: flex;
  gap: 0.4rem;
  width: 100%;
  margin: clamp(0.3rem, 1.5svh, 0.9rem) 0;
}

.story-onglet {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0.25rem 0.4rem;
  border: 1px solid #45414b;
  border-radius: var(--border-radius);
  background: none;
  color: var(--grey);
  font-family: 'Agdasima', sans-serif;
  font-size: 1.05rem;
  white-space: nowrap;
  cursor: pointer;
}

.story-onglet img {
  width: 1.45rem;
  height: auto;
}

.story-onglet.is-actif {
  border-color: var(--white);
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--white);
  font-weight: bold;
}

/* Cent joueurs, le joueur en jaune. Bornée par la hauteur sur petit écran. */
.story-foule {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
  width: min(100%, 31svh);
  margin: clamp(0.3rem, 1.2svh, 0.8rem) auto 0.3rem;
}

.story-foule i {
  aspect-ratio: 1;
  border-radius: 2px;
  animation: story-case 350ms cubic-bezier(0.86, 0, 0.07, 1) backwards;
}

.story-foule .is-devant { background-color: var(--red); }
.story-foule .is-derriere { background-color: #24493c; }

.story-foule .is-moi {
  position: relative;
  z-index: 1;
  background-color: var(--yellow);
  box-shadow: 0 0 0 2px var(--dark-grey), 0 0 0 4px var(--white), 0 0 1rem rgba(247, 201, 20, 0.8);
}

@keyframes story-case {
  from { opacity: 0; transform: scale(0.3); }
}

.story-legende {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1rem;
  color: var(--grey);
  font-size: 0.95rem;
}

.story-legende span::before {
  content: '';
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 0.35rem;
  border-radius: 2px;
  vertical-align: -0.05rem;
}

.story-legende .l-devant::before { background-color: var(--red); }
.story-legende .l-moi::before { background-color: var(--yellow); }
.story-legende .l-derriere::before { background-color: #24493c; }

/* --- Écran 4 : les catégories ------------------------------------------- */

.story-axes {
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1.6svh, 0.95rem);
  width: 100%;
  margin: clamp(0.6rem, 2.5svh, 1.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.story-axes li {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-align: left;
}

.story-axe-tete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: clamp(1.1rem, 2.5svh, 1.35rem);
}

.story-axe-tete strong {
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}

.story-axe-piste {
  position: relative;
  height: 0.8rem;
  border-radius: 1000px;
  background-color: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.story-axe-barre {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 1000px;
  transform-origin: left;
  animation: story-barre 900ms cubic-bezier(0.86, 0, 0.07, 1);
}

@keyframes story-barre {
  from { transform: scaleX(0); }
}

/* --- Écran 5 : la réponse ----------------------------------------------- */

.story-question {
  max-width: 24rem;
  color: var(--grey);
  font-size: clamp(1rem, 2.3svh, 1.25rem);
  line-height: 1.25;
  text-wrap: balance;
}

.story-citation {
  margin: clamp(0.2rem, 1svh, 0.6rem) 0 !important;
  font-size: clamp(1.8rem, 5svh, 2.9rem);
  font-style: italic;
  font-weight: bold;
  line-height: 1.05;
  text-wrap: balance;
}

/* Une réponse de trois lignes à la taille d'une réponse d'un mot pousserait
   le coût hors de l'écran. */
.story-citation.is-longue {
  font-size: clamp(1.35rem, 3.6svh, 2rem);
}

.story-cout {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.9;
}

.story-cout strong {
  color: var(--light-red);
  font-size: clamp(4rem, 12svh, 7rem);
  font-weight: bold;
}

.story-cout span {
  margin-top: 0.2rem;
  font-size: clamp(1.15rem, 2.6svh, 1.45rem);
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/*
 * --- Écran des ressources -----------------------------------------------
 * Encadré d'orange et non de rouge, comme dans le détail : le rouge est la
 * couleur du score, et cet écran ne doit pas se lire comme une sanction de
 * plus.
 */
.story-ressource {
  width: 100%;
  box-sizing: border-box;
  padding: 1rem 1.1rem;
  border-left: 3px solid var(--orange);
  border-radius: var(--border-radius);
  background-color: rgba(43, 41, 48, 0.9);
  font-size: clamp(1.15rem, 2.6svh, 1.4rem);
  line-height: 1.3;
  text-align: left;
}

.story-ressource-cat {
  margin-bottom: 0.35rem !important;
  color: var(--orange);
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.story-ressource-lien {
  display: inline-block;
  padding: 0.7rem 0 0.1rem;
  color: var(--white);
  font-weight: bold;
  text-decoration: underline;
}

/* --- Dernier écran : le partage ----------------------------------------- */

.story-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.story-lien {
  padding: 0.65rem 1rem;
  border: none;
  background: none;
  color: var(--white);
  font-family: 'Agdasima', sans-serif;
  font-size: 1.05rem;
  text-decoration: underline;
  cursor: pointer;
  opacity: 0.8;
}

.story-lien:hover { opacity: 1; }

/* Le bouton café : fin des stories et bas du détail. Jaune du test, en
   contour, pour ne pas concurrencer « Refaire le test ». */
.rft-cafe {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  margin: 0.6rem auto;
  padding: 0.5rem 1.4rem;
  border: 2px solid var(--yellow);
  border-radius: var(--border-radius, 0.6rem);
  color: var(--yellow);
  font-family: 'Agdasima', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  width: fit-content;
}

.rft-cafe:hover { background: rgba(247, 201, 20, 0.12); }

/* --- Le pied ------------------------------------------------------------ */

.stories-pied {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stories-continuer {
  min-height: 44px;
  padding: 0.4rem 1rem;
  border: none;
  background: none;
  color: var(--white);
  font-family: 'Agdasima', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0.7;
}

.stories-continuer:hover { opacity: 1; }

.stories-signature {
  margin: 0;
  color: var(--grey);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  opacity: 0.8;
}

/* --- Le bouton qui rouvre les stories, en tête du détail ---------------- */

.stories-rouvrir {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 3.25rem;
  margin-top: var(--spacing);
  border: none;
  border-radius: var(--border-radius);
  background-color: var(--red);
  color: var(--white);
  font-family: 'Agdasima', sans-serif;
  font-size: var(--font-size-l);
  font-weight: bold;
  cursor: pointer;
}

.stories-rouvrir span {
  font-size: 0.8em;
}

/*
 * Les petits écrans — moins de 680 px de haut. L'écran du classement porte
 * une place, des onglets, une phrase et cent cases : tout se resserre d'un
 * cran plutôt que de défiler à l'intérieur de la story.
 */
/* Sous 760 px de haut, le classement perd sa note : « 1er » se lit seul. */
@media (max-height: 760px) {
  .story-note-place { display: none; }
  .story-phrase { font-size: clamp(1.2rem, 3svh, 1.6rem); }
  .story-onglets { margin: 0.25rem 0; }
}

@media (max-height: 680px) {
  .stories-segment { height: 1.4rem; }
  .stories-logo { height: 1.6rem; }
  .story-emoji { font-size: 3rem; }
  .story-jauge { margin-bottom: 1.4rem; }
  .story-echelle { min-height: 11rem; }
  .story-legende { font-size: 0.85rem; }
  .story { gap: 0.3rem; padding: 0.25rem 0; }
  .story-place span { font-size: 1.15rem; }
  .story .share-btn { margin-top: calc(var(--spacing) * 0.5); }
}

@media (max-height: 600px) {
  /* L'écran du pari, avec les paris des autres, est le plus long. */
  [data-ecran="pari"] .story-geant { font-size: 3.6rem; }
  .story-duel { margin: 1.9rem 0; }
  .story-paris { padding: 0.5rem 0.75rem; }
  .story-paris .paris-ligne { margin-top: 0.2rem !important; }
  .story-foule { width: min(100%, 27svh); }
  .story-cout strong { font-size: 3.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .vient-de-droite,
  .vient-de-gauche,
  .story-axe-barre,
  .story-foule i { animation: none; }
  .story-jauge-curseur { transition-duration: 1ms; }
}

/* ---------------------------------------------------------------------------
 * Sous les stories : le detail.
 * ------------------------------------------------------------------------- */

.detail-titre {
  margin: calc(var(--spacing) * 1.25) 0 0;
  padding-top: var(--spacing);
  border-top: 2px solid var(--blueish-grey);
  color: var(--grey);
  font-size: calc(var(--font-size-s) * 0.85);
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * Resserrement general du recap.
 *
 * La feuille de reference espace chaque bloc de `--spacing` (16 a 20 px) et
 * ajoute ses propres marges par-dessus. Cumule sur huit blocs, cela faisait
 * plus de trois cents pixels de vide. Les ecarts sont divises par deux : la
 * page reste aeree, elle tient simplement sur un tiers de hauteur en moins.
 * ------------------------------------------------------------------------- */

.switch-quiz-end .client-container .game-wrapper .finish-block {
  gap: calc(var(--spacing) * 0.5);
}

/*
 * Le mesureur n'est visible que pendant la partie : la reserve de 4.5rem qu'on
 * lui garde en bas du conteneur n'a aucune raison d'exister sur le recap, ou
 * elle ajoutait 72 px de vide sous le dernier bouton.
 */
.switch-quiz-end .main-container .client-container {
  padding-bottom: var(--spacing);
}

/* Le radar n'a plus de titre au-dessus de lui : il n'a plus besoin de marge. */
.client-container .game-wrapper .finish-block .stats-subscores {
  margin-top: calc(var(--spacing) * 0.5);
}

/*
 * Uniquement les titres de section du detail. Ecrite en fourre-tout sur `h3`,
 * cette regle rattraperait n'importe quel titre du recap — a specificite egale,
 * la derniere feuille chargee l'emporte, et c'est celle-ci.
 */
.switch-quiz-end .client-container .game-wrapper .finish-block .stats-rare-section h3 {
  margin-bottom: calc(var(--spacing) * 0.35);
  font-size: var(--font-size-m);
}

.switch-quiz-end .client-container .game-wrapper .finish-block .stats-rare-section .subtitle {
  margin-bottom: calc(var(--spacing) * 0.5);
  font-size: calc(var(--font-size-s) * 0.85);
}

.stats-ressource {
  margin-top: calc(var(--spacing) * 0.75);
  padding: calc(var(--spacing) * 0.75);
  font-size: calc(var(--font-size-s) * 0.9);
}

.partage {
  margin-top: calc(var(--spacing) * 0.5);
}

/*
 * Le bouton de partage de la reference reserve deux fois `--spacing` au-dessus
 * de lui. Sous le titre du dernier ecran des stories, c'est un trou.
 */
.client-container .game-wrapper .finish-block .share-btn {
  margin-top: var(--spacing);
}

/* ========== Presentation du test (voir `Presentation.tsx`) ==========
 * Rendue cote serveur, sous l'ecran de profil : c'est le texte que Google lit.
 * Palette et angles de la reference — rien d'arrondi, rien de nouveau. */
.rft-presentation {
  max-width: 34rem;
  margin: calc(var(--spacing, 1rem) * 2) auto 0;
  padding: calc(var(--spacing, 1rem) * 1.25) var(--spacing, 1rem) calc(var(--spacing, 1rem) * 5.5);
  border-top: 1px solid var(--blueish-grey);
  color: var(--white);
  font-size: var(--font-size-s);
  line-height: var(--line-height);
  text-align: left;
}
.rft-presentation h2 {
  margin: 0 0 calc(var(--spacing, 1rem) * 0.6);
  font-size: var(--font-size-l);
  text-transform: uppercase;
}
.rft-presentation h3 {
  margin: calc(var(--spacing, 1rem) * 1.2) 0 calc(var(--spacing, 1rem) * 0.4);
  font-size: var(--font-size-m);
  text-transform: uppercase;
}
.rft-presentation p {
  margin: 0 0 calc(var(--spacing, 1rem) * 0.6);
  color: var(--grey);
}
.rft-presentation a,
.rft-stats-intro a {
  color: var(--light-red);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rft-stats-intro {
  max-width: 34rem;
  margin: 0 auto var(--spacing, 1rem);
  padding: 0 var(--spacing, 1rem);
  color: var(--grey);
  font-size: var(--font-size-s);
  line-height: var(--line-height);
}

/* ---------------------------------------------------------------------------
 * Le badge du mode test (voir `BadgeModeTest.tsx`).
 *
 * Jaune, comme l'avertissement d'une cohorte mince : un signal, pas une
 * alarme. Au-dessus des stories (2000), pour qu'on le voie sur le résultat.
 * ------------------------------------------------------------------------- */

.rft-badge-test {
  /* En haut, au centre : l'espace libre entre le logo et le compteur des
     stories, et entre le logo et le menu de la barre du site. En bas, il
     recouvrait le bouton « continuer ». */
  position: fixed;
  /* Centré sur la ligne du logo des stories, sous leurs segments. */
  top: calc(max(0.4rem, env(safe-area-inset-top)) + 2.2rem);
  left: 50%;
  z-index: 2100;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 30px;
  padding: 0 0.6rem;
  border: none;
  border-radius: 5px;
  background-color: #f7c914;
  color: #1d1c1c;
  font-family: 'Agdasima', sans-serif;
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 0.08em;
  white-space: nowrap;
  text-transform: uppercase;
  transform: translateX(-50%);
  box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * L'écran du pari, avant la première question (voir `Pari.tsx`).
 *
 * Le drapeau, le chiffre et le curseur prennent la couleur de la jauge à la
 * valeur pariée (`--pari-couleur`, calculée dans le composant). Rien d'autre
 * ne change : aucun nom de verdict, aucune phrase de fin n'est montrée avant
 * l'heure.
 * ------------------------------------------------------------------------- */

.pari {
  --pari-couleur: var(--light-red);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.pari-question {
  max-width: 22rem;
  margin: 0;
  color: var(--white);
  font-size: var(--font-size-m);
  line-height: 1.25;
  text-wrap: balance;
}

.pari-drapeau {
  width: clamp(4rem, 12svh, 5.5rem);
  height: auto;
  margin-top: calc(var(--spacing) * 1.2);
  color: var(--pari-couleur);
  transform-origin: 6% 92%;
  transition: color 200ms ease-out;
  animation: pari-flotte 2.4s ease-in-out infinite;
  filter: drop-shadow(0 0 1.2rem color-mix(in srgb, var(--pari-couleur) 45%, transparent));
}

@keyframes pari-flotte {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg) translateY(-2px); }
}

.pari-valeur {
  margin: calc(var(--spacing) * 0.3) 0 0;
  color: var(--pari-couleur);
  font-size: clamp(4.5rem, 14svh, 6.5rem);
  font-weight: bold;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  transition: color 200ms ease-out;
}

.pari-valeur span {
  margin-left: 0.05em;
  font-size: 0.45em;
}

/*
 * Le curseur : la piste en dégradé de la jauge des stories, et une pastille
 * cerclée de blanc, teinte de la valeur. 44 px de haut pour le pouce.
 */
.pari-jauge {
  position: relative;
  width: 100%;
  max-width: 24rem;
  margin-top: calc(var(--spacing) * 1.2);
}

.pari-curseur {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.pari-curseur:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

.pari-curseur::-webkit-slider-runnable-track {
  height: 14px;
  border-radius: 1000px;
  background: linear-gradient(90deg, #2aa048 0%, #f7c914 40%, #e27c21 55%, #db3254 83.3%, #8b3a9f 90%, #4a145a 95.8%, #18081e 100%);
}

.pari-curseur::-moz-range-track {
  height: 14px;
  border-radius: 1000px;
  background: linear-gradient(90deg, #2aa048 0%, #f7c914 40%, #e27c21 55%, #db3254 83.3%, #8b3a9f 90%, #4a145a 95.8%, #18081e 100%);
}

.pari-curseur::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 32px;
  height: 32px;
  margin-top: -9px;
  border: 4px solid var(--white);
  border-radius: 50%;
  background: var(--pari-couleur);
  box-shadow: 0 0 0.9rem color-mix(in srgb, var(--pari-couleur) 70%, transparent), 0 2px 6px rgba(0, 0, 0, 0.5);
}

.pari-curseur::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: 4px solid var(--white);
  border-radius: 50%;
  background: var(--pari-couleur);
  box-shadow: 0 0 0.9rem color-mix(in srgb, var(--pari-couleur) 70%, transparent), 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* Les graduations, alignées sous la course de la pastille (16 px de marge
   de chaque côté : la moitié de sa largeur). */
.pari-graduations {
  position: relative;
  height: 1.2rem;
  margin: 0 16px;
}

.pari-graduations span {
  position: absolute;
  top: 0;
  color: var(--grey);
  font-size: 0.8rem;
  transform: translateX(-50%);
}

.pari-bornes {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 24rem;
  margin-top: calc(var(--spacing) * 0.2);
  color: var(--grey);
  font-size: calc(var(--font-size-s) * 0.9);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pari-actions {
  width: 100%;
  margin-top: calc(var(--spacing) * 1.2);
}

.pari-note {
  margin-top: calc(var(--spacing) * 0.4);
}

/*
 * Hors barème (au-delà de 100) : la couleur vire au violet puis au presque
 * noir, qui disparaîtrait sur le fond sombre. Un halo violet et un fin
 * contour clair gardent le chiffre et le drapeau lisibles.
 */
.pari.is-hors-bareme .pari-valeur {
  -webkit-text-stroke: 1px rgba(214, 170, 255, 0.55);
  text-shadow: 0 0 1.4rem rgba(160, 80, 220, 0.75), 0 0 0.3rem rgba(160, 80, 220, 0.6);
}

.pari.is-hors-bareme .pari-drapeau {
  filter: drop-shadow(0 0 0.15rem rgba(214, 170, 255, 0.9)) drop-shadow(0 0 1.2rem rgba(160, 80, 220, 0.8));
}

.pari.is-hors-bareme .pari-curseur::-webkit-slider-thumb {
  box-shadow: 0 0 1rem rgba(160, 80, 220, 0.9), 0 2px 6px rgba(0, 0, 0, 0.5);
}

.pari.is-hors-bareme .pari-curseur::-moz-range-thumb {
  box-shadow: 0 0 1rem rgba(160, 80, 220, 0.9), 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* Les petits écrans : « Passer » doit rester visible sans défiler. */
@media (max-height: 680px) {
  .pari-drapeau { width: 3.2rem; margin-top: calc(var(--spacing) * 0.6); }
  .pari-valeur { font-size: 4rem; }
  .pari-jauge { margin-top: calc(var(--spacing) * 0.6); }
  .pari-actions { margin-top: calc(var(--spacing) * 0.6); }
  .pari .intro-wrapper h2, .pari > h2 { margin-bottom: calc(var(--spacing) * 0.6); }
}

@media (prefers-reduced-motion: reduce) {
  .pari-drapeau { animation: none; }
}

/* ---------------------------------------------------------------------------
 * Ce que les autres parient (voir `ParisDesAutres` dans `Stories.tsx`) : dans
 * la story « Ton pari », et dans le détail sous les stories.
 * ------------------------------------------------------------------------- */

.paris-ligne {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "nom pari" "fin fin";
  align-items: baseline;
  column-gap: 0.6rem;
  margin: 0.45rem 0 0 !important;
}

.paris-ligne span { grid-area: nom; }

.paris-ligne strong {
  grid-area: pari;
  color: var(--yellow);
  font-size: 1.35em;
  font-weight: bold;
}

.paris-ligne em {
  grid-area: fin;
  color: var(--grey);
  font-size: 0.9em;
  font-style: normal;
}

.story-paris {
  border-left-color: var(--yellow);
}

.detail-paris {
  width: 100%;
  box-sizing: border-box;
  margin-top: var(--spacing);
  padding: calc(var(--spacing) * 0.85) var(--spacing);
  border-left: 3px solid var(--yellow);
  border-radius: var(--border-radius);
  background-color: var(--blueish-grey);
  text-align: left;
}

.detail-paris .story-encart-titre {
  margin: 0;
  color: var(--grey);
  font-size: calc(var(--font-size-s) * 0.85);
  font-weight: bold;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * La pause publicitaire avant le résultat (voir `Interstitiel.tsx`).
 *
 * Le bouton est au-dessus de l'encart : il reste à sa place quand la publicité
 * se charge, et le joueur le voit sans faire défiler. L'encart garde une
 * hauteur réservée pour que l'écran ne saute pas quand elle arrive.
 * ------------------------------------------------------------------------- */

.interstitiel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.interstitiel-texte {
  margin: 0;
  color: var(--grey);
  font-size: var(--font-size-m);
  animation: interstitiel-pulse 1.6s ease-in-out infinite;
}

@keyframes interstitiel-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.interstitiel-pub {
  width: 100%;
  max-width: 24rem;
  min-height: 16rem;
  margin-top: calc(var(--spacing) * 1.2);
  box-sizing: border-box;
  padding: calc(var(--spacing) * 0.5);
  border: 1px dashed #45414b;
  border-radius: var(--border-radius);
  overflow: hidden;
}

.interstitiel-etiquette {
  margin: 0 0 calc(var(--spacing) * 0.4);
  color: var(--grey);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-align: left;
  text-transform: uppercase;
}

.intro-wrapper .intro-form.interstitiel-actions {
  /* `.intro-wrapper .intro-form` s'étire dans la référence : ici, il pousserait
     l'encart en bas de l'écran, loin du bouton. */
  flex-grow: 0;
  width: 100%;
  margin-top: calc(var(--spacing) * 1.2);
}

.interstitiel-actions .button-start:disabled {
  cursor: default;
  filter: grayscale(0.6) brightness(0.75);
}

@media (prefers-reduced-motion: reduce) {
  .interstitiel-texte { animation: none; }
}

/* Le libellé change avec le compte à rebours : une largeur fixe évite que le
   bouton se redimensionne à chaque seconde, et qu'il passe sur deux lignes. */
.interstitiel-actions .button-start {
  min-width: min(100%, 17rem);
  white-space: nowrap;
}