/* « Saurez-vous fixer le bon prix ? » — jeu public /jeu-encheres-immobilieres
   (2026-09-27 ; première version « Le Marteau » du 2026-09-26 ; refonte du
   2026-09-28 après l'audit UX, data/tmp/jeu-audit/AUDIT-UX.md ; habillage du
   site le 2026-09-28 au soir ; refonte visuelle du 2026-09-30 d'après la
   maquette Claude Design validée par Baptiste).

   Tout est cloisonné sous .jeu, à une exception près, signalée plus bas : la
   bulle « Une idée ? » du site, masquée pendant une partie. Cette feuille n'est
   chargée que par jeu.html.

   Habillage du site (Baptiste, 2026-09-28 : « unifie le css du jeu au reste du
   site, fond blanc absolument ») : page blanche, titres en Archivo, texte en
   Hanken Grotesk, chiffres en Spline Sans Mono et palette émeraude/laiton.
   Les blocs se distinguent par des filets, jamais par un fond ; une teinte ne
   sert qu'à porter un sens (vert = réussite, laiton = presque, rouge = écart).

   Refonte du 30/09, en quatre idées :
   - une couleur par coût, partout : vert le prix, violet les frais, bleu les
     travaux, orange l'attente — dans la règle de l'accueil, en filet sur les
     blocs d'une manche, dans le graphique de la correction ;
   - la décision (budget, question, montant, boutons) tient dans UN panneau,
     qui reste à l'écran pendant qu'on lit le bien ;
   - le prix où l'enchère est tombée est le grand moment de la correction, et
     une réglette le place face à votre plafond et au bon prix ;
   - l'accueil et le bilan montrent les quatre ventes en cartes, avec leur photo.

   Principes de la refonte UX, inchangés : textes secondaires contrastés
   (≥ 4,5:1 sur blanc) ; deux colonnes quand la place le permet (le bien à
   gauche, la décision à droite), une colonne sur téléphone avec la barre
   d'actions collée en bas. Les tailles suivent le conteneur `jeu` (.wrap),
   pas l'écran : le rail du site mange une part variable de la largeur. */

/* ── Jetons : ceux du thème émeraude du site, repris par leur nom ── */
.jeu {
  --paper: var(--em-paper, #ffffff);
  /* Même piste neutre et mêmes couleurs de graphique que le simulateur. */
  --band: #eef1ef;
  --ink: var(--em-ink, #16201b); --ink-2: var(--em-ink-2, #45524b);
  --muted: var(--em-muted, #616a63); --brass: var(--em-brass, #7c5e24);
  --line: var(--em-line-soft, #e6ddc9); --line-strong: var(--em-line, #d7ccb4);
  --emerald: var(--em-emerald, #0c6e4e); --emerald-deep: var(--em-emerald-deep, #0a5840);
  --emerald-soft: var(--em-emerald-soft, #e3efe6);
  --brass-bright: var(--em-brass-bright, #cfa44e); --brass-soft: var(--em-brass-soft, #f2e8cf);
  --miss: var(--c-danger, #a62418); --miss-soft: var(--c-danger-bg, #f4e1dc);
  --btn-ink: #ffffff;
  /* Angles du thème : carrés, comme les cartes, pastilles et boutons du site. */
  --r: var(--rad-lg, 3px); --r-sm: var(--rad, 2px);
  /* Les quatre coûts reprennent la palette du graphique du simulateur ; ils
     gardent la même couleur d'un écran à l'autre. */
  --seg-prix: #138a5f; --seg-frais: #8a74c9;
  --seg-travaux: #3f78b5; --seg-attente: #d06a4a;
  /* L'attente se paie au fil des mois : hachurée, comme dans le simulateur. */
  --hachures-attente: repeating-linear-gradient(135deg, var(--seg-attente) 0 4px, var(--miss-soft) 4px 7px);
  --tag-bg: rgba(22, 32, 27, .78); --tag-ink: #ffffff;
  --voile: rgba(10, 16, 13, .9);
  --display: var(--f-display, var(--f-sans, sans-serif));
  --body: var(--f-sans, sans-serif);
  --mono: var(--f-mono, monospace);
  /* Hauteurs de ce qui colle en haut de l'écran : l'en-tête du site, puis la
     barre de progression (56 px en deux colonnes, plus bas). Tout écran qui
     s'ouvre défile SOUS les deux. */
  --jeu-top: var(--appbar-h, 64px);
  --barre-h: 44px;
  /* Gouttière de la page : nulle quand le conteneur du site pose la sienne,
     16 px sous 720 px (plus bas). Les barres d'actions collées la franchissent
     pour toucher les bords de l'écran. */
  --pad: 0px;
}
body.en-apercu .jeu { --jeu-top: calc(var(--appbar-h, 64px) + var(--apercu-h, 44px)); }

.jeu * { box-sizing: border-box; }
.jeu [hidden] { display: none !important; }
.jeu {
  margin: 0; padding-bottom: var(--jeu-bas, 0px); /* le bandeau cookies ne cache jamais la fin de page */
  background: var(--paper); color: var(--ink);
  font-family: var(--body); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.jeu a { color: var(--emerald); text-underline-offset: 2px; }
.jeu a:hover { color: var(--emerald-deep); }
.jeu button, .jeu input, .jeu select { font: inherit; }
.jeu :focus-visible { outline: 2px solid var(--emerald); outline-offset: 3px; }
/* Titres qui reçoivent le focus à l'ouverture d'un écran : pas de cadre à la souris. */
.jeu [tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
.jeu [data-ancre] { scroll-margin-top: calc(var(--jeu-top) + var(--barre-h) + 16px); }
.jeu .sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Même cadre que la page des enchères (Baptiste, 2026-09-30) : le conteneur du
   site (.app-main__inner : 1 200 px au plus, gouttières de 48 px sur ordinateur)
   borne aussi le jeu, comme le pied de page. À l'intérieur de ce cadre, ni les
   blocs ni les paragraphes n'ont de largeur maximale (demande du 2026-09-28). */
.jeu .wrap { margin: 0; padding: 12px 0 48px; container: jeu / inline-size; }
/* Sous 720 px, le conteneur du site retire sa gouttière (app_shell.css) : la
   page pose la sienne, 16 px, comme le simulateur. */
@media (max-width: 720px) {
  .jeu { --pad: 16px; }
  .jeu .wrap { padding-inline: var(--pad); }
}

/* ── Les briques communes ── */
.jeu .sheet { background: var(--paper); }

.jeu .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 22px; border: 1px solid var(--emerald); border-radius: var(--r-sm); cursor: pointer;
  background: var(--emerald); color: var(--btn-ink);
  font-family: var(--body); font-weight: 700; font-size: 16px; letter-spacing: .01em;
  transition: background .2s, border-color .2s;
}
.jeu .btn:hover { background: var(--emerald-deep); border-color: var(--emerald-deep); }
.jeu .btn:disabled { opacity: .5; cursor: default; }
.jeu .btn--ghost { background: var(--paper); color: var(--emerald); }
.jeu .btn--ghost:hover { background: var(--emerald-soft); color: var(--emerald-deep); }
.jeu .btn .material-symbols-outlined { font-size: 20px; }

/* Le surtitre du site (guide, fiches) : capitales en chasse fixe, laiton, filet devant. */
.jeu .eyebrow, .jeu .brief__eyebrow {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brass);
}
.jeu .eyebrow::before, .jeu .brief__eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--brass-bright); flex: none; }

/* Petits intitulés : phrase ordinaire, gras, sombre — plus de capitales espacées. */
.jeu .bloc-t { display: block; margin: 0 0 8px; font-family: var(--body); font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ink-2); }

/* Plusieurs informations = une par ligne, derrière un tiret (Baptiste, 30/09) :
   on les lit d'un coup d'œil, là où un paragraphe les enchaînait. Le tiret pend
   dans la marge pour que le texte reste aligné sur lui-même quand il passe à la
   ligne. Une seule information reste une phrase, sans tiret. Ces règles viennent
   avant les composants : chacun garde la main sur ses propres marges. */
.jeu .tirets { margin: 0; padding: 0; list-style: none; }
.jeu .tirets > li { position: relative; padding-left: 1.05em; }
.jeu .tirets > li + li { margin-top: .3em; }
.jeu .tirets > li::before { content: "–"; position: absolute; left: 0; font-weight: 700; color: var(--brass); }
/* Un texte du jeu (jeu.js, texte()) : une phrase ou une liste, parfois
   introduite par une phrase qui finit par « : », parfois suivie d'un total. */
.jeu .txt > * { margin: 0; }
.jeu .txt > * + * { margin-top: .3em; }
.jeu .txt > .tirets__intro + .tirets { margin-top: .2em; }

/* Ce qui se lit à la demande : un « + » cerclé qui devient « − » */
.jeu details.plus { margin: 10px 0 0; }
.jeu details.plus > summary, .jeu .sources > summary {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 15px; color: var(--emerald);
}
.jeu details.plus > summary::-webkit-details-marker, .jeu .sources > summary::-webkit-details-marker { display: none; }
.jeu details.plus > summary::before, .jeu .sources > summary::before { content: "+"; display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid currentColor; border-radius: 50%; font-size: 15px; line-height: 1; flex: none; }
.jeu details.plus[open] > summary::before, .jeu .sources[open] > summary::before { content: "−"; }
.jeu details.plus > p, .jeu details.plus > .txt { margin: 4px 0 0; font-size: 14.5px; color: var(--ink-2); }

/* ── L'accueil : la question et la méthode d'un côté, la règle et l'action de
   l'autre ; puis les quatre ventes en cartes ── */
.jeu .intro { padding: 20px 0 8px; }
.jeu .intro__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.jeu .intro__main, .jeu .intro__aside { min-width: 0; }
.jeu .intro h1 {
  margin: 0 0 22px; font-family: var(--display); font-weight: 800; letter-spacing: -.025em; line-height: 1.0;
  font-size: clamp(2.3rem, 5.2vw, 4rem); text-wrap: balance;
}
.jeu .intro h1 em { color: var(--emerald); font-style: normal; }
.jeu .lead { margin: 0; font-size: 18px; color: var(--ink-2); }
.jeu .lead.tirets > li + li { margin-top: .45em; }

/* La règle : un cadre à filet vert, comme le panneau de décision des manches. */
.jeu .regle { margin: 0; padding: 20px 22px 22px; border: 1px solid var(--line-strong); border-top: 4px solid var(--emerald); background: var(--paper); font-size: 16px; line-height: 1.45; }
.jeu .regle__t { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--emerald-deep); }
.jeu .regle .tirets__intro { margin-top: 8px; font-size: 17px; font-weight: 600; color: var(--ink); }
/* (.regle.txt : passe devant l'espacement générique de .txt.) */
.jeu .regle.txt > .regle__postes { margin-top: 10px; }
/* Chaque coût, sa couleur à droite : la légende du graphique, apprise dès l'accueil. */
.jeu .regle__postes > li { display: flex; align-items: center; gap: 12px; font-size: 15.5px; }
.jeu .regle__cle { flex: none; margin-left: auto; width: 22px; height: 8px; }
.jeu .regle__cle--prix { background: var(--seg-prix); }
.jeu .regle__cle--frais { background: var(--seg-frais); }
.jeu .regle__cle--travaux { background: var(--seg-travaux); }
.jeu .regle__cle--attente { background: var(--hachures-attente); }
/* Le schéma de la règle : les quatre coûts sous le budget (pointillé), le
   budget à 10 % sous le prix du quartier (trait plein). Sans échelle ni chiffre :
   il montre la règle, pas une vente. */
.jeu .regle__schema { position: relative; height: 50px; }
.jeu .regle.txt > .regle__schema { margin-top: 18px; }
.jeu .regle__piste { position: absolute; left: 0; right: 0; top: 24px; display: flex; height: 18px; background: var(--band); }
.jeu .regle__piste i { display: block; height: 100%; }
.jeu .regle__piste i:nth-child(1) { width: 62%; }
.jeu .regle__piste i:nth-child(2) { width: 6%; }
.jeu .regle__piste i:nth-child(3) { width: 16%; }
.jeu .regle__piste i:nth-child(4) { width: 11%; }
.jeu .regle__trait { position: absolute; top: 18px; height: 30px; }
.jeu .regle__trait--quartier { right: 0; width: 2px; background: var(--ink); }
.jeu .regle__quartier { position: absolute; font-size: 12.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.jeu .regle__quartier { right: 0; top: 0; color: var(--ink-2); }

.jeu .start-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.jeu .start-row .btn { flex: 1 1 100%; justify-content: space-between; min-height: 56px; font-size: 17px; }
.jeu .start-row .btn--ghost { justify-content: center; min-height: 48px; font-size: 15.5px; }
.jeu .start-note { margin: 10px 0 0; font-size: 14px; color: var(--muted); }

/* Les quatre ventes en cartes : photo, lieu, titre, ce que le niveau fait faire. */
.jeu .niveaux { margin-top: 48px; }
.jeu .niveaux__tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.jeu .niveaux__t { margin: 0; font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.jeu .niveaux__s { margin: 0; font-size: 14px; color: var(--muted); }
.jeu .niveaux__liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 18px 0 0; padding: 0; list-style: none; }
.jeu .niveau { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); background: var(--paper); }
.jeu .niveau__photo { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--band); }
.jeu .niveau__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jeu .niveau__n { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 38px; height: 38px; background: var(--paper); font-family: var(--mono); font-size: 18px; font-weight: 700; color: var(--emerald); }
.jeu .niveau__corps { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 14px 16px 16px; }
.jeu .niveau__lieu { margin: 0; font-size: 13px; color: var(--muted); }
.jeu .niveau__t { margin: 0; font-family: var(--display); font-size: 19px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.jeu .niveau__contexte { flex: 1; margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.jeu .niveau__action { margin: 8px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--emerald-deep); }

.jeu .intro > details.plus { margin-top: 32px; padding: 10px 0; border-top: 1px solid var(--line); }
.jeu .intro > details.plus > summary { font-size: 16px; }
.jeu .intro > details.plus > .txt { padding-left: 30px; }
/* Chaque temps du barème de points : son titre en gras, ses règles dessous. */
.jeu .points__t { color: var(--ink); }
.jeu .txt > .points__t:not(:first-child) { margin-top: 12px; }
.jeu .noscript { margin: 12px 0 0; color: var(--miss); }

@container jeu (max-width: 899.98px) {
  .jeu .niveaux__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container jeu (max-width: 779.98px) {
  .jeu .intro__grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  /* Une colonne : « Commencer » reste collé au bas de l'écran tant qu'on lit
     l'accueil, comme les boutons pendant les niveaux. */
  .jeu .start-row {
    position: sticky; bottom: var(--jeu-bas, 0px); z-index: 6;
    margin: 12px calc(-1 * var(--pad)) 0; padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--paper); border-top: 1px solid var(--line-strong);
    box-shadow: 0 -12px 24px -20px rgba(0, 0, 0, .45);
  }
}
@container jeu (max-width: 519.98px) {
  /* Sur un téléphone, une carte par ligne : la photo à gauche, le texte à droite. */
  .jeu .niveaux__liste { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .jeu .niveau { flex-direction: row; }
  .jeu .niveau__photo { flex: none; width: 104px; aspect-ratio: auto; }
  .jeu .niveau__n { width: 30px; height: 30px; font-size: 15px; }
  .jeu .niveau__corps { gap: 3px; padding: 10px 12px 12px; }
  .jeu .niveau__t { font-size: 17px; }
  .jeu .niveau__contexte { font-size: 13.5px; }
  .jeu .niveau__action { margin-top: 4px; padding-top: 6px; }
}

/* ── Barre de progression : visible pendant toute la partie ──
   Sur téléphone, quatre petits traits ; en deux colonnes, les quatre niveaux
   nommés, chacun avec ses points. */
.jeu .barre {
  position: sticky; top: var(--jeu-top); z-index: 20;
  display: flex; align-items: center; gap: 14px; height: var(--barre-h);
  margin: 0 0 18px; padding: 0 14px;
  background: var(--paper); border: 1px solid var(--line); border-bottom: 2px solid var(--emerald);
}
.jeu .barre__niv { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 14.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jeu .barre__niv b { color: var(--ink); }
.jeu .barre__etapes { display: flex; gap: 4px; flex: none; margin: 0; padding: 0; list-style: none; }
.jeu .barre__num, .jeu .barre__nom, .jeu .barre__pts { display: none; }
.jeu .barre__score { flex: none; margin: 0; font-family: var(--mono); font-size: 13.5px; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.jeu .barre__score b { font-size: 18px; font-weight: 600; color: var(--emerald-deep); }
.jeu .barre__score span { color: var(--muted); }

@container jeu (max-width: 879.98px) {
  .jeu .barre__etapes li { width: 22px; height: 8px; background: var(--line-strong); }
  .jeu .barre__etapes li[data-state="current"] { background: transparent; box-shadow: inset 0 0 0 2px var(--emerald); }
  .jeu .barre__etapes li[data-state="hit"] { background: var(--emerald); }
  .jeu .barre__etapes li[data-state="near"] { background: var(--brass-bright); }
  .jeu .barre__etapes li[data-state="miss"] { background: var(--miss); }
}
@container jeu (min-width: 880px) {
  .jeu .barre, .jeu .sheet { --barre-h: 56px; }
  .jeu .barre { align-items: stretch; gap: 0; padding: 0; }
  .jeu .barre__niv { display: none; }
  .jeu .barre__etapes { flex: 1 1 auto; gap: 0; }
  .jeu .barre__etapes li { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-right: 1px solid var(--line); }
  .jeu .barre__etapes li[aria-current] { background: var(--emerald-soft); }
  .jeu .barre__num { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border: 1px solid var(--line-strong); font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--muted); }
  .jeu .barre__num .material-symbols-outlined { font-size: 18px; }
  .jeu .barre__nom { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600; color: var(--muted); }
  .jeu .barre__pts { display: block; margin-left: auto; font-family: var(--mono); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .jeu .barre__etapes li[data-state="current"] .barre__num { border: 2px solid var(--emerald); background: var(--paper); color: var(--emerald); }
  .jeu .barre__etapes li[aria-current] .barre__nom { font-weight: 700; color: var(--emerald-deep); }
  .jeu .barre__etapes li[data-state="hit"] .barre__num { border-color: var(--emerald); background: var(--emerald); color: #ffffff; }
  .jeu .barre__etapes li[data-state="near"] .barre__num { border-color: var(--brass-bright); background: var(--brass-bright); color: var(--ink); }
  .jeu .barre__etapes li[data-state="miss"] .barre__num { border-color: var(--miss); background: var(--miss); color: #ffffff; }
  .jeu .barre__etapes li:is([data-state="hit"], [data-state="near"], [data-state="miss"]) .barre__nom { color: var(--ink); }
  .jeu .barre__etapes li[data-state="hit"] .barre__pts { color: var(--emerald-deep); }
  .jeu .barre__etapes li[data-state="near"] .barre__pts { color: var(--brass); }
  .jeu .barre__etapes li[data-state="miss"] .barre__pts { color: var(--miss); }
  .jeu .barre__score { display: flex; align-items: center; justify-content: center; gap: 6px; width: 172px; }
  .jeu .barre__score b { font-size: 22px; }
}

/* ── Une manche : le contexte et l'objectif, puis le bien et l'achat à
   gauche, la décision à droite ── */
.jeu .brief { padding: 8px 0 24px; }
.jeu .brief__eyebrow { margin-bottom: 10px; }
/* À l'ouverture d'un niveau, on défile jusqu'au titre : on garde au-dessus la
   place du surtitre « Niveau n sur 4 », sinon il passe sous la barre. */
.jeu .brief__n[data-ancre] { scroll-margin-top: calc(var(--jeu-top) + var(--barre-h) + 48px); }
.jeu .brief__n { margin: 0; font-family: var(--display); font-size: clamp(27px, 3.4vw, 42px); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.jeu .brief__contexte { margin: 10px 0 0; font-size: 17px; line-height: 1.45; color: var(--ink-2); }
/* L'objectif : un encadré à filet laiton, sans fond. */
.jeu .brief__mission { margin-top: 18px; padding: 14px 18px 16px; border: 1px solid var(--line); border-top: 3px solid var(--brass-bright); }
.jeu .brief__mission .brief__eyebrow { margin-bottom: 6px; }
.jeu .brief__mission .brief__eyebrow::before { display: none; }
.jeu .brief__action { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--ink); text-wrap: pretty; }

.jeu .manche__grid { padding: 24px 0; border-top: 1px solid var(--line); }
/* Une colonne : le panneau de décision s'efface pour que sa barre d'actions
   colle au bas de l'écran pendant TOUTE la manche (son bloc conteneur devient
   la grille entière), pas seulement quand on arrive au réglage du prix. */
.jeu .manche__choix { display: contents; }

@container jeu (min-width: 880px) {
  .jeu .brief { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(360px, 1fr); gap: 40px; align-items: end; }
  .jeu .brief__mission { margin-top: 0; }
  .jeu .manche__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(360px, 1fr); gap: 40px; align-items: start; padding-top: 32px; }
  /* Le panneau reste à l'écran pendant qu'on lit le bien : --choix-top est
     calé par jeu.js (suivrePanneau) — sous la barre de progression, ou par le
     bas quand le panneau est plus haut que l'écran. Son filet prend la couleur
     du résultat à la correction. */
  .jeu .manche__choix {
    display: block; position: sticky; top: var(--choix-top, calc(var(--jeu-top) + var(--barre-h) + 16px));
    border: 1px solid var(--line-strong); border-top: 4px solid var(--emerald); background: var(--paper);
  }
  .jeu .manche[data-etat="near"] .manche__choix { border-top-color: var(--brass-bright); }
  .jeu .manche[data-etat="miss"] .manche__choix { border-top-color: var(--miss); }
  .jeu .manche__choix > .question:not(:first-child), .jeu .manche__choix > .ask { border-top: 1px solid var(--line); }
}
@container jeu (max-width: 879.98px) {
  /* Une colonne : « Vous » et la question forment le même panneau, bordé comme
     en deux colonnes ; la correction garde le filet de couleur du résultat. */
  .jeu .manche__choix > .question { border: 1px solid var(--line-strong); }
  .jeu .manche__choix > :first-child { margin-top: 32px; border-top: 4px solid var(--emerald); }
}

/* Les rubriques : un titre à icône souligné d'un filet, sans cadre autour. */
.jeu .groupe { background: var(--paper); }
.jeu .groupe--achat { margin-top: 44px; }
.jeu .groupe__tete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.jeu .groupe__t { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; margin: 0; font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.jeu .groupe__t .material-symbols-outlined { font-size: 24px; color: var(--emerald); }
.jeu .groupe__aparte { margin: 0; font-size: 14px; color: var(--ink-2); }
.jeu .groupe__aparte b { color: var(--ink); }
/* « Vous » ouvre le panneau de décision : titre plus petit, sans filet. */
.jeu .groupe--achat h3.bloc-t { margin: 24px 0 8px; }

/* Les photos en mosaïque : la première en grand, deux à côté ; la dernière
   annonce les autres. Chacune ouvre la loupe. */
.jeu .galerie { display: grid; gap: 6px; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: repeat(2, clamp(130px, 15vw, 180px)); }
.jeu .galerie--1 { grid-template-columns: minmax(0, 1fr); grid-template-rows: clamp(240px, 30vw, 366px); }
.jeu .galerie--2 { grid-template-rows: clamp(220px, 26vw, 320px); }
.jeu .galerie--3 .galerie__photo:first-child { grid-row: span 2; }
.jeu .galerie__photo { position: relative; display: block; min-width: 0; padding: 0; border: 0; overflow: hidden; background: var(--band); cursor: zoom-in; }
.jeu .galerie__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.jeu .galerie__photo:hover img { transform: scale(1.03); }
.jeu .galerie__loupe { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 34px; height: 34px; background: var(--tag-bg); color: var(--tag-ink); pointer-events: none; }
.jeu .galerie__loupe .material-symbols-outlined { font-size: 20px; }
.jeu .galerie__plus { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(10, 16, 13, .58); color: #ffffff; font-size: 16px; font-weight: 700; }
.jeu .galerie__plus .material-symbols-outlined { font-size: 22px; }
@container jeu (max-width: 559.98px) {
  .jeu .galerie--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 230px 110px; }
  .jeu .galerie--3 .galerie__photo:first-child { grid-row: auto; grid-column: 1 / -1; }
  .jeu .galerie--2 { grid-template-rows: 200px; }
}

/* Le bien en pastilles, lu d'un coup d'œil (Baptiste, 28/09) : la surface en
   neutre, ce qui rassure en vert (libre, en bon état), l'occupation en rouge.
   Angles carrés, comme les étiquettes des cartes du site. */
.jeu .pastilles { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.jeu .pastilles li { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 5px 12px 5px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--paper); font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.jeu .pastilles .material-symbols-outlined { font-size: 19px; color: var(--ink-2); }
.jeu .pastilles li.is-bon { border-color: var(--emerald-soft); background: var(--emerald-soft); color: var(--emerald-deep); }
.jeu .pastilles li.is-bon .material-symbols-outlined { color: var(--emerald); }
.jeu .pastilles li.is-occupe { border-color: var(--miss); background: var(--miss-soft); color: var(--miss); }
.jeu .pastilles li.is-occupe .material-symbols-outlined { color: var(--miss); }
.jeu .bien__description { margin: 14px 0 0; font-size: 17px; line-height: 1.5; color: var(--ink); }

/* État du bien : les constats décisifs d'emblée, les autres à la demande. Un
   constat par ligne, derrière un tiret, comme toutes les listes du jeu. */
.jeu .groupe--bien .etat { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.jeu .etat li { font-size: 16px; color: var(--ink); }
.jeu .etat .tirets > li + li { margin-top: 8px; }
.jeu .etat details.plus { margin-top: 8px; }
.jeu .etat details.plus > ul { margin-top: 4px; }

/* Ce qui s'ajoute au prix : travaux (le bien), frais, frais préalables et
   attente (l'achat). Chaque coût est un bloc bordé, coiffé du filet de SA
   couleur ; celui que le niveau apprend (is-foyer) est bordé tout entier de
   cette couleur. La page reste blanche. */
.jeu .postes { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.jeu .poste { padding: 14px 18px 16px; border: 1px solid var(--line-strong); border-top: 4px solid var(--line-strong); background: var(--paper); font-size: 15px; }
.jeu .poste--travaux { margin-top: 18px; border-top-color: var(--seg-travaux); }
.jeu .poste--frais { border-top-color: var(--seg-frais); }
.jeu .poste--attente { border-top-color: var(--seg-attente); }
.jeu .poste--travaux.is-foyer { border-color: var(--seg-travaux); }
.jeu .poste--frais.is-foyer { border-color: var(--seg-frais); }
.jeu .poste--attente.is-foyer { border-color: var(--seg-attente); }
/* Les frais préalables ne sont pas comptés par le jeu : un bloc discret. */
.jeu .poste--prealables { padding: 12px 18px; border: 1px solid var(--line); }
.jeu .poste > b { display: block; font-size: 16px; font-weight: 700; color: var(--ink); }
.jeu .poste--prealables > b { font-size: 15px; }
.jeu .poste__tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.jeu .poste__tete .bloc-t, .jeu .poste__tete > b { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.jeu .poste__v { margin: 0; font-family: var(--mono); font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.jeu .poste .poste__d { display: block; margin-top: 2px; font-size: 14px; color: var(--ink-2); }
.jeu .poste > .txt, .jeu .poste > p { margin: 6px 0 0; color: var(--ink); }
.jeu .poste .tirets__intro { font-size: 14px; color: var(--muted); }
.jeu .tag-new { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px solid var(--brass-bright); border-radius: var(--r-sm); background: var(--paper); font-family: var(--mono); font-size: 11px; font-weight: 600; line-height: 18px; color: var(--brass); vertical-align: 2px; }
.jeu .deja-vu { margin: 6px 0 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--ink-2); }
.jeu .deja-vu li::before { content: "↺ "; color: var(--emerald); }
/* L'aide des niveaux d'un coût seul (Baptiste, 28/09) : un poste par ligne, son
   taux ou son prix à droite, jamais le montant. Sur un écran étroit, le prix
   passe sous l'intitulé plutôt que de l'écraser. */
.jeu .bareme { margin: 6px 0 0; padding: 0; list-style: none; }
.jeu .bareme li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink); }
.jeu .bareme li:first-child { border-top: 0; }
.jeu .bareme > li > span { flex: 1 1 13em; min-width: 0; font-weight: 600; }
.jeu .bareme small { display: block; font-size: 13px; font-weight: 400; color: var(--ink-2); }
.jeu .bareme b { flex: 0 1 auto; margin-left: auto; text-align: right; font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--emerald-deep); font-variant-numeric: tabular-nums; }
.jeu .poste > p + .bareme { margin-top: 4px; }
/* Un montant donné pour le calcul : lisible d'un coup d'œil. */
.jeu .chiffre { font-family: var(--mono); font-weight: 600; color: var(--emerald-deep); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* La vente : mise à prix et audience, séparées d'un filet. */
.jeu .faits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; }
.jeu .faits > div { min-width: 0; padding-right: 20px; }
.jeu .faits > div + div { padding: 0 0 0 20px; border-left: 1px solid var(--line); }
.jeu .faits dt { font-size: 13.5px; color: var(--muted); }
.jeu .faits dd { margin: 2px 0 0; font-size: 19px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.jeu .faits dd.faits__v { font-family: var(--mono); font-size: 24px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.jeu .faits dd.faits__s { margin: 0; font-size: 13.5px; font-weight: 400; color: var(--muted); }

/* Votre budget : le nom, le chiffre, d'où il vient. */
.jeu .info { margin: 0; }
.jeu .info__l { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.jeu .info__l .tag-new { margin-left: 0; }
.jeu .info__v { margin: 2px 0 0; font-family: var(--mono); font-size: 34px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; color: var(--emerald-deep); font-variant-numeric: tabular-nums; white-space: nowrap; }
.jeu .info__s { margin: 8px 0 0; font-size: 14.5px; color: var(--ink-2); }

/* La question : dans le panneau, sous « Vous » quand il y est. */
.jeu .question { padding: 20px 22px 22px; background: var(--paper); }
.jeu .question__label { margin: 0 0 6px; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--emerald-deep); }
.jeu .question__q { margin: 0 0 12px; font-family: var(--display); font-size: clamp(24px, 2.5vw, 30px); font-weight: 800; line-height: 1.1; letter-spacing: -.015em; text-wrap: balance; }
/* Ce dont part la question (le prix atteint, le prix du quartier) se lit avant elle. */
.jeu .question__premisse { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 18px; padding: 0 0 16px; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.jeu .question__premisse .material-symbols-outlined { flex: none; display: grid; place-items: center; width: 34px; height: 34px; background: var(--brass-soft); font-size: 20px; color: var(--brass); }
.jeu .question__premisse b { font-family: var(--mono); font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Ce que la question compte, et ce qu'elle laisse de côté. */
.jeu .question__q:has(+ .question__s) { margin-bottom: 8px; }
.jeu .question__s { margin: 0 0 18px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }

/* Le montant : on le tape, on le glisse, ou on l'ajuste au pas annoncé. Vide,
   le champ est en pointillé ; choisi, il prend le filet vert. */
.jeu .plafond { padding: 0; }
.jeu .plafond__row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; gap: 8px; align-items: stretch; }
.jeu .plafond__champ { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 68px; padding: 4px 10px; border: 2px solid var(--emerald); border-radius: var(--r-sm); background: var(--paper); cursor: text; }
.jeu .plafond.is-vide .plafond__champ { border: 1px dashed var(--line-strong); }
.jeu .plafond__champ:focus-within { border: 2px solid var(--emerald); box-shadow: 0 0 0 3px var(--emerald-soft); }
.jeu .plafond__champ input {
  width: 100%; min-width: 0; padding: 2px 0; border: 0; border-radius: 0;
  background: transparent; color: var(--ink); text-align: center;
  font-family: var(--mono); font-size: clamp(28px, 3.4vw, 34px); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
/* Le cadre vert du champ suffit : ni contour, ni l'anneau bleu des formulaires du site. */
.jeu .plafond__champ input:focus { outline: none; box-shadow: none; }
.jeu .plafond__champ input::placeholder { color: var(--muted); font-family: var(--body); font-size: 22px; font-weight: 600; letter-spacing: 0; }
.jeu .plafond__champ > span { font-family: var(--mono); font-size: 24px; color: var(--muted); }
.jeu .pm { min-height: 68px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--paper); color: var(--emerald); font-size: 26px; font-weight: 600; cursor: pointer; }
.jeu .pm:hover:not(:disabled) { background: var(--emerald-soft); }
.jeu .pm:disabled { opacity: .4; cursor: default; }
/* Curseur dessiné : sans montant choisi, la poignée ne s'affiche pas (rien
   n'est suggéré) ; la piste reste active, un toucher y pose une valeur. */
.jeu .plafond input[type="range"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 32px; margin: 14px 0 2px; background: transparent; cursor: pointer; }
.jeu .plafond input[type="range"]::-webkit-slider-runnable-track { height: 6px; background: linear-gradient(to right, var(--emerald) var(--pos, 0%), var(--band) var(--pos, 0%)); }
.jeu .plafond input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border: 2px solid var(--emerald); border-radius: var(--r-sm); background: var(--paper); }
.jeu .plafond input[type="range"]::-moz-range-track { height: 6px; background: var(--band); }
.jeu .plafond input[type="range"]::-moz-range-progress { height: 6px; background: var(--emerald); }
.jeu .plafond input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border: 2px solid var(--emerald); border-radius: var(--r-sm); background: var(--paper); }
.jeu .plafond.is-vide input[type="range"]::-webkit-slider-thumb { opacity: 0; }
.jeu .plafond.is-vide input[type="range"]::-moz-range-thumb { opacity: 0; }
.jeu .plafond.is-vide input[type="range"]::-moz-range-progress { background: transparent; }
.jeu .plafond__bornes { display: flex; justify-content: space-between; gap: 10px; font-family: var(--mono); font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.jeu .plafond__aide { margin: 8px 0 0; font-size: 13.5px; color: var(--muted); }
.jeu .plafond__msg { margin: 4px 0 0; font-size: 13.5px; font-weight: 600; color: var(--miss); }
.jeu .plafond__msg:empty { display: none; }

.jeu .indice { margin: 16px 0 0; }
.jeu .indice__btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); color: var(--emerald);
  font-family: var(--body); font-size: 15px; font-weight: 600; cursor: pointer;
}
.jeu .indice__btn:hover { border-color: var(--emerald); }
.jeu .indice__btn .material-symbols-outlined { font-size: 20px; }
/* Le coût de l'indice, en chasse fixe laiton. (:not : l'icône garde sa police.) */
.jeu .indice__btn span:not(.material-symbols-outlined) { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--brass); }
.jeu .indice__btn.is-ouvert { border-color: var(--brass-bright); }
.jeu .indice__corps { margin-top: 8px; padding: 12px 14px; border: 1px solid var(--line); border-top: 3px solid var(--brass-bright); background: var(--paper); font-size: 14px; color: var(--ink-2); animation: rise .35s ease both; }
.jeu .indice__corps b { font-family: var(--mono); font-weight: 600; color: var(--ink); }

/* Les actions : au pied du panneau en deux colonnes ; collées au bas de
   l'écran sinon — au-dessus du bandeau cookies (--jeu-bas, posé par jeu.js). */
.jeu .ask { display: flex; gap: 10px; margin: 0; padding: 16px 22px 20px; background: var(--paper); }
.jeu .ask .btn { flex: 1 1 auto; }
.jeu .ask .btn--ghost { flex: 0 1 auto; }
.jeu .next { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
@container jeu (max-width: 879.98px) {
  .jeu .ask, .jeu .next {
    position: sticky; bottom: var(--jeu-bas, 0px); z-index: 6;
    margin: 16px calc(-1 * var(--pad)) -24px; padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--paper); border-top: 1px solid var(--line-strong);
    box-shadow: 0 -12px 24px -20px rgba(0, 0, 0, .45);
  }
  /* Deux boutons côte à côte, sur deux lignes au besoin mais serrées : la
     barre ne mange pas un dixième de l'écran. */
  .jeu .ask .btn, .jeu .next .btn { flex: 1 1 auto; min-height: 50px; padding: 8px 12px; font-size: 15.5px; line-height: 1.15; }
  .jeu .ask .btn--ghost { flex: 0 1 auto; font-size: 14.5px; }
}

/* ── La correction : deux questions, une leçon, le reste à la demande ── */
.jeu .correction { padding: 20px 22px 22px; }
.jeu .correction:focus { outline: none; }
@container jeu (max-width: 879.98px) {
  /* Une colonne : la correction n'a pas de cadre, seulement le filet de la
     couleur du résultat ; le bouton suivant, collé en bas, touche les bords. */
  .jeu .correction { margin-top: 32px; padding: 18px 0 0; border-top: 4px solid var(--emerald); }
  .jeu .manche[data-etat="near"] .correction { border-top-color: var(--brass-bright); }
  .jeu .manche[data-etat="miss"] .correction { border-top-color: var(--miss); }
}
.jeu .corr__q { margin: 0 0 12px; font-family: var(--display); font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.jeu .corr__q:not(:first-child) { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }

/* Le verdict : les points dans un carré teinté du résultat, puis ce qu'ils veulent dire. */
.jeu .verdict { display: flex; gap: 16px; align-items: flex-start; }
.jeu .verdict__pts { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 84px; min-height: 84px; max-width: 110px; margin: 0; padding: 8px; border: 1px solid var(--emerald); background: var(--emerald-soft); color: var(--emerald-deep); text-align: center; }
.jeu .verdict__pts b { font-family: var(--mono); font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.jeu .verdict__pts small { margin-top: 4px; font-size: 12.5px; font-weight: 600; line-height: 1.25; }
/* « Presque » : filet laiton sur blanc, jamais de fond jaune. */
.jeu .verdict--near .verdict__pts { border-color: var(--brass-bright); background: var(--paper); color: var(--brass); }
.jeu .verdict--miss .verdict__pts { border-color: var(--miss); background: var(--miss-soft); color: var(--miss); }
.jeu .verdict__t { margin: 0; font-family: var(--display); font-size: 20px; font-weight: 700; line-height: 1.2; }
.jeu .verdict__p { margin: 6px 0 0; font-size: 15px; color: var(--ink-2); }

/* Votre réponse face à la bonne : deux cases dans un même cadre. */
.jeu .deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 18px 0 0; border: 1px solid var(--line); }
.jeu .deux > div { min-width: 0; padding: 12px 16px 14px; }
.jeu .deux > div + div { border-left: 1px solid var(--line); }
.jeu .deux dt { font-size: 13.5px; color: var(--muted); }
.jeu .deux dd { margin: 2px 0 0; font-family: var(--mono); font-size: clamp(21px, 2.4vw, 26px); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.jeu .deux__bon dt { font-weight: 700; color: var(--emerald-deep); }
.jeu .deux__bon dd:not(.deux__def) { color: var(--emerald-deep); }
.jeu .deux dd.deux__def { font-family: var(--body); font-size: 12.5px; font-weight: 400; line-height: 1.35; letter-spacing: 0; color: var(--muted); }

/* Comment se compose chaque coût complet : la barre empilée, face au budget et
   au prix du quartier — deux traits légendés sous le graphique, à toute largeur. */
.jeu .barres { margin: 24px 0 0; }
.jeu .barres > figcaption.bloc-t { margin-bottom: 10px; }
.jeu .barres__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; padding: 6px 0; }
.jeu .barres__l { font-size: 14px; font-weight: 600; color: var(--ink); }
.jeu .barres__row--bon .barres__l { font-weight: 700; color: var(--emerald-deep); }
.jeu .barres__v { font-family: var(--mono); font-size: 14px; font-weight: 600; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.jeu .barres__row--bon .barres__v { color: var(--emerald-deep); }
.jeu .barres__v.is-over { color: var(--miss); }
.jeu .barres__track { grid-column: 1 / -1; position: relative; display: flex; height: 16px; background: var(--band); }
.jeu .seg { display: block; height: 100%; }
.jeu .seg--prix { background: var(--seg-prix); }
.jeu .seg--frais { background: var(--seg-frais); }
.jeu .seg--travaux { background: var(--seg-travaux); }
.jeu .seg--attente { background: var(--hachures-attente); }
.jeu .mark { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 2px solid var(--ink); pointer-events: none; }
/* Au survol, le morceau s'éclaire et une bulle dit ce qu'il compte (jeu.js). */
.jeu .barres__track .seg[data-bulle]:hover { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6); }
.jeu .bulle { position: fixed; z-index: 60; padding: 5px 9px; background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap; pointer-events: none; }
.jeu .bulle[hidden] { display: none; }
.jeu .barres__legende { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--ink-2); }
.jeu .barres__legende li { display: flex; align-items: center; gap: 6px; }
.jeu .barres__legende .seg { width: 12px; height: 12px; }
.jeu .ligne { display: inline-block; width: 0; height: 14px; border-left: 2px solid var(--ink); }

/* Le marteau : le grand moment de la correction, ce que la salle a fait ce jour-là. */
.jeu .marteau { padding: 18px 20px 20px; border: 2px solid var(--emerald); background: var(--paper); }
.jeu .marteau__l { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.jeu .marteau__v { margin: 12px 0 0; font-family: var(--mono); font-size: clamp(38px, 4.6vw, 54px); font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--emerald-deep); font-variant-numeric: tabular-nums; white-space: nowrap; }
.jeu .marteau__s { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.jeu .gavel { flex: none; display: grid; place-items: center; width: 36px; height: 36px; background: var(--emerald); color: #ffffff; }
.jeu .gavel .material-symbols-outlined { font-size: 22px; transform-origin: 80% 90%; }
.jeu .strike .gavel .material-symbols-outlined { animation: strike .55s cubic-bezier(.3, 1.4, .5, 1) 1; }
/* Validé : les points arrivent d'un bond, le score de la barre saute (Baptiste, 30/09). */
.jeu .strike .verdict__pts { animation: bond .6s cubic-bezier(.3, 1.5, .5, 1) .15s both; }
.jeu .barre__score.is-saut b { display: inline-block; animation: saut .5s cubic-bezier(.3, 1.5, .5, 1) 1; }
@keyframes bond { 0% { opacity: 0; transform: scale(.4) rotate(-8deg); } 60% { opacity: 1; transform: scale(1.12) rotate(2deg); } 100% { transform: none; } }
@keyframes saut { 0% { transform: none; } 40% { transform: translateY(-5px) scale(1.25); color: var(--emerald); } 100% { transform: none; } }
/* Les confettis : une toile posée sur l'écran, qui ne gêne aucun clic. */
.jeu .confettis { position: fixed; inset: 0; z-index: 70; width: 100vw; height: 100vh; pointer-events: none; }
@keyframes strike { 0% { transform: rotate(-38deg); } 55% { transform: rotate(8deg); } 100% { transform: rotate(0); } }

/* La réglette « Jusqu'où est montée la salle » : une piste, des traits, des
   étiquettes rangées par jeu.js (placerSalle) dessus ou dessous, sur une ou
   deux rangées (--rangs-haut, --rangs-bas), selon la place. */
.jeu .salle { margin: 22px 0 0; }
.jeu .salle__piste { --rh: 38px; position: relative; height: calc((var(--rangs-haut, 1) + var(--rangs-bas, 1)) * var(--rh) + 30px); margin-top: 6px; }
.jeu .salle__rail, .jeu .salle__zone { position: absolute; top: calc(var(--rangs-haut, 1) * var(--rh) + 11px); height: 8px; }
.jeu .salle__rail { left: 0; right: 0; background: var(--band); }
/* En vert, ce que la salle a parcouru : de la mise à prix au prix atteint. */
.jeu .salle__zone--salle { background: var(--emerald); }
/* Entre votre plafond et le bon prix : de la marge laissée (pointillé), ou le budget dépassé (rouge). */
.jeu .salle__zone--reste, .jeu .salle__zone--trop { top: calc(var(--rangs-haut, 1) * var(--rh) + 10px); height: 10px; }
.jeu .salle__zone--reste { border: 1px dashed var(--emerald-deep); }
.jeu .salle__zone--trop { border: 1px solid var(--miss); background: var(--miss-soft); }
.jeu .salle__trait { position: absolute; top: calc(var(--rangs-haut, 1) * var(--rh) + 3px); width: 2px; height: 24px; margin-left: -1px; background: var(--ink-2); }
.jeu .salle__trait--adj { top: calc(var(--rangs-haut, 1) * var(--rh) - 1px); width: 3px; height: 32px; background: var(--emerald-deep); }
.jeu .salle__trait--vous { background: var(--ink); }
.jeu .salle__trait--bon { background: var(--emerald-deep); }
.jeu .salle__etiq { position: absolute; left: 0; top: 0; visibility: hidden; font-size: 12px; line-height: 1.3; text-align: center; white-space: nowrap; color: var(--ink-2); }
.jeu .salle__etiq[data-cote] { visibility: visible; }
.jeu .salle__etiq b { display: block; font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.jeu .salle__etiq--adj b, .jeu .salle__etiq--bon b { color: var(--emerald-deep); }
.jeu .salle__etiq[data-cote="haut"] { top: calc((var(--rangs-haut, 1) - 1 - var(--rang, 0)) * var(--rh)); }
.jeu .salle__etiq[data-cote="bas"] { top: calc(var(--rangs-haut, 1) * var(--rh) + 32px + var(--rang, 0) * var(--rh)); }

.jeu .course { margin: 14px 0 0; font-size: 15px; color: var(--ink); }

/* À retenir : filet laiton en tête, intitulé en surtitre. */
.jeu .retenir { margin: 22px 0 0; padding: 14px 18px 12px; border: 1px solid var(--line); border-top: 3px solid var(--brass-bright); background: var(--paper); }
.jeu .retenir__t { margin: 0 0 8px; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--brass); }
.jeu .retenir > .txt { font-size: 15px; color: var(--ink); }
.jeu .retenir details.plus { margin-top: 6px; }
/* Le renvoi vers l'article du guide qui explique la leçon. */
.jeu .retenir__guide { margin: 10px 0 2px; font-size: 14.5px; color: var(--ink-2); }
.jeu .retenir__guide a { font-weight: 600; }
.jeu .retenir__guide .material-symbols-outlined { margin-left: 2px; font-size: 16px; vertical-align: -3px; }

/* Ce qui se rouvre sous la leçon (le détail du calcul, les autres joueurs) :
   des rangées séparées de filets. */
.jeu .correction > details.plus { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--line); }
.jeu .correction > .retenir + details.plus { margin-top: 14px; border-top: 1px solid var(--line); }

/* Le détail du bon prix : replié, pour qui veut refaire le calcul. Aux niveaux
   d'un coût seul, le détail de ce coût est ouvert d'emblée : c'est la leçon. */
.jeu .detail__titre { margin-top: 18px; }
.jeu .detail__t { width: 100%; margin-top: 6px; border-collapse: collapse; font-size: 14px; background: var(--paper); }
.jeu .detail__t td { padding: 8px 10px; border-top: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
.jeu .detail__t td:last-child { text-align: right; white-space: nowrap; font-family: var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.jeu .detail__t small { display: block; font-size: 12.5px; color: var(--muted); }
.jeu .detail__t tr.is-sous td { font-weight: 600; color: var(--ink); }
.jeu .detail__t tr.is-total td { font-weight: 700; color: var(--emerald-deep); background: var(--emerald-soft); }
.jeu .detail__n { margin: 0; padding: 8px 10px 10px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); background: var(--paper); }

/* Le pied : la fiche de la vente et le bouton suivant, sur une ligne. En une
   colonne, le pied s'efface (display: contents) pour que le bouton, collé au
   bas de l'écran, garde toute la correction comme conteneur. */
.jeu .corr__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-top: 20px; }
.jeu .corr__pied .fiche, .jeu .corr__pied .next { margin: 0; }
.jeu .fiche { font-size: 15px; }
.jeu .fiche a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.jeu .fiche .material-symbols-outlined { font-size: 18px; }
@container jeu (max-width: 879.98px) {
  .jeu .corr__pied { display: contents; }
  .jeu .corr__pied .fiche { margin: 18px 0 0; }
  .jeu .corr__pied .next { margin: 16px calc(-1 * var(--pad)) -24px; }
}

/* ── Le bilan : le score et la suite côte à côte, une carte par vente, puis
   le récap du mardi ── */
.jeu .final { padding: 8px 0 0; }
.jeu .final__tete { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 48px; align-items: end; }
.jeu .final__resultat { min-width: 0; }
.jeu .final__score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0; font-family: var(--display); font-size: clamp(88px, 13vw, 148px); font-weight: 800; line-height: .9; letter-spacing: -.04em; color: var(--emerald-deep); font-variant-numeric: tabular-nums; }
.jeu .final__score small { font-family: var(--mono); font-size: clamp(20px, 2.4vw, 30px); font-weight: 500; letter-spacing: 0; color: var(--muted); }
.jeu .grade { margin: 14px 0 0; font-family: var(--display); font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; line-height: 1.1; letter-spacing: -.015em; }
.jeu .final__record { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 6px 12px; background: var(--emerald-soft); font-size: 14.5px; font-weight: 700; color: var(--emerald-deep); }
.jeu .final__record .material-symbols-outlined { font-size: 19px; }
.jeu .final__situer { margin: 12px 0 0; font-size: 15px; color: var(--ink-2); }
.jeu .histo { display: flex; align-items: flex-end; gap: 3px; height: 64px; max-width: 360px; margin: 10px 0 2px; }
.jeu .histo__b { flex: 1; background: var(--line-strong); }
.jeu .histo__b.is-moi { background: var(--emerald); }
.jeu .histo__axe { display: flex; justify-content: space-between; max-width: 360px; margin: 0; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.jeu .final__suite { min-width: 0; }
.jeu .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.jeu .toast { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--emerald-deep); }
.jeu .toast:empty { display: none; }
.jeu .partage-texte { display: block; width: 100%; margin-top: 6px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); font-size: 14px; }
.jeu .methode { margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); font-size: 15.5px; color: var(--ink); }

.jeu .final__recap-t { margin: 44px 0 0; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
/* Une carte par vente : sa photo, ses points (filet de la couleur du
   résultat), ses chiffres, la leçon à rouvrir, la fiche. */
.jeu .recap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 18px 0 0; padding: 0; list-style: none; }
.jeu .recap__carte { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-top: 4px solid var(--line-strong); background: var(--paper); }
.jeu .recap__carte[data-state="hit"] { border-top-color: var(--emerald); }
.jeu .recap__carte[data-state="near"] { border-top-color: var(--brass-bright); }
.jeu .recap__carte[data-state="miss"] { border-top-color: var(--miss); }
.jeu .recap__photo { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--band); }
.jeu .recap__corps { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 12px 16px 16px; font-size: 14px; color: var(--ink-2); }
.jeu .recap__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0; font-family: var(--body); font-size: inherit; }
.jeu .recap__tete span { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brass); }
.jeu .recap__tete b { font-family: var(--mono); font-size: 22px; font-weight: 700; color: var(--emerald-deep); }
.jeu .recap__carte[data-state="near"] .recap__tete b { color: var(--brass); }
.jeu .recap__carte[data-state="miss"] .recap__tete b { color: var(--miss); }
.jeu .recap__chiffres { flex: 1; }
.jeu .recap__corps details.plus { margin: 0; padding-top: 8px; border-top: 1px solid var(--line); }
.jeu .recap__corps details.plus > summary { font-size: 14px; }
.jeu .recap__fiche { margin: 0; font-size: 14px; }
.jeu .recap__fiche a { font-weight: 600; }

/* L'inscription au récap : le seul appel à l'action de la page, sur fond
   blanc, bordé comme la règle de l'accueil. */
.jeu .cta { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px 40px; align-items: start; margin-top: 44px; padding: 24px 28px 26px; border: 1px solid var(--line-strong); border-top: 4px solid var(--emerald); background: var(--paper); }
.jeu .cta__t { margin: 0; font-family: var(--display); font-size: clamp(22px, 2.6vw, 28px); font-weight: 800; line-height: 1.12; letter-spacing: -.01em; }
.jeu .cta__p { margin: 12px 0 0; font-size: 15.5px; color: var(--ink-2); }
.jeu .cta__champs { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.jeu .cta__label { font-size: 14.5px; font-weight: 700; color: var(--ink-2); }
.jeu .cta select { width: 100%; min-height: 52px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); font-size: 16px; }
.jeu .cta .btn { width: 100%; }
.jeu .cta__note { margin: 0; font-size: 13.5px; color: var(--muted); }
.jeu .cta__msg { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--emerald-deep); }
.jeu .cta__msg:empty { display: none; }

@container jeu (max-width: 899.98px) {
  .jeu .recap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container jeu (max-width: 779.98px) {
  .jeu .final__tete { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .jeu .cta { grid-template-columns: minmax(0, 1fr); padding: 18px 16px 20px; }
}
@container jeu (max-width: 519.98px) {
  .jeu .recap { grid-template-columns: minmax(0, 1fr); }
  .jeu .recap__photo { aspect-ratio: 16 / 7; }
  .jeu .actions { grid-template-columns: minmax(0, 1fr); }
}

/* ── Sources et hypothèses : sous la partie, repliées ── */
.jeu .sources { margin: 28px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.jeu .sources > summary { font-size: 16px; }
/* Une rubrique par sujet, côte à côte quand la place le permet (comme la
   méthode du simulateur) : on trouve la sienne sans lire les autres. */
.jeu .sources__grille { display: grid; gap: 16px 32px; margin-top: 10px; }
@container jeu (min-width: 760px) { .jeu .sources__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container jeu (min-width: 1040px) { .jeu .sources__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.jeu .sources__t { font-weight: 700; color: var(--ink); }
.jeu .sources b { color: var(--ink); }

/* ── La loupe : les photos en grand, sur un voile ── */
.jeu .loupe { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0; padding: 0; border: 0; background: transparent; }
.jeu .loupe[open] { display: flex; align-items: center; justify-content: center; }
/* Repli en clair : selon le navigateur, ::backdrop n'hérite pas des variables de .jeu. */
.jeu .loupe::backdrop { background: var(--voile, rgba(10, 16, 13, .9)); }
.jeu .loupe img { max-width: min(96vw, 1100px); max-height: 84vh; object-fit: contain; }
.jeu .loupe__nav, .jeu .loupe__fermer { position: fixed; border: 0; background: var(--tag-bg); color: var(--tag-ink); cursor: pointer; }
.jeu .loupe__nav { top: 50%; transform: translateY(-50%); width: 48px; height: 64px; font-size: 34px; line-height: 1; }
.jeu .loupe__nav--prec { left: 10px; }
.jeu .loupe__nav--suiv { right: 10px; }
.jeu .loupe__fermer { top: 12px; right: 12px; width: 46px; height: 46px; font-size: 20px; }
.jeu .loupe__compte { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); margin: 0; padding: 3px 10px; background: var(--tag-bg); color: var(--tag-ink); font-family: var(--mono); font-size: 13px; }
.jeu .loupe.is-seule .loupe__nav, .jeu .loupe.is-seule .loupe__compte { display: none; }

@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Hors de .jeu, par exception : pendant une partie, la bulle « Une idée ? »
   (base.html) ne vient pas se poser sur la barre d'actions ni distraire du
   choix ; le lien du pied de page reste. Cette feuille n'est chargée que par le jeu. */
body.jeu-en-partie #mdb-fb-fab { display: none; }

/* ── Téléphone : un peu moins d'air, des titres plus courts ── */
@media (max-width: 640px) {
  .jeu .wrap { padding-top: 10px; padding-bottom: 32px; }
  .jeu .barre { gap: 10px; padding: 0 10px; margin-bottom: 10px; }
  .jeu .barre__niv { font-size: 14px; }
  .jeu .barre__etapes li { width: 16px; }
  .jeu .barre__score span { display: none; }

  .jeu .intro { padding-top: 4px; }
  .jeu .lead { font-size: 16.5px; }
  .jeu .regle { padding: 16px 16px 18px; }

  .jeu .brief { padding-bottom: 18px; }
  .jeu .brief__contexte { font-size: 15.5px; }
  .jeu .brief__mission { padding: 12px 14px 14px; }
  .jeu .brief__action { font-size: 15.5px; }
  .jeu .groupe__t { font-size: 20px; }
  .jeu .question { padding: 16px 14px 18px; }
  .jeu .poste { padding: 12px 14px 14px; }
  .jeu .etat li { font-size: 15px; }
  .jeu .faits dd { font-size: 17px; }
  .jeu .faits dd.faits__v { font-size: 21px; }
  .jeu .info__v { font-size: 30px; }
  .jeu .plafond__row { grid-template-columns: 50px minmax(0, 1fr) 50px; }
  .jeu .pm, .jeu .plafond__champ { min-height: 60px; }

  .jeu .verdict { gap: 12px; }
  .jeu .verdict__pts { min-width: 70px; min-height: 70px; }
  .jeu .verdict__pts b { font-size: 25px; }
  .jeu .verdict__t { font-size: 18px; }
  .jeu .deux > div { padding: 10px 12px 12px; }
  .jeu .marteau { padding: 14px 16px 16px; }
  .jeu .detail__t td { padding: 6px 8px; }

  .jeu .final { padding-top: 4px; }
}

/* Réduire les animations : toutes, compteur, leçons, marteau et défilement compris. */
@media (prefers-reduced-motion: reduce) {
  .jeu *, .jeu *::before, .jeu *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}