/* La table de jeu : l'écran est une carte, la barre dorée partage les deux camps. Un seul univers sombre, assumé. */
:root {
  color-scheme: dark;
  --ink: #0E1A14;
  --panel: #14221A;
  --raise: #1B2C23;
  --line: #2A3C32;
  --creme: #F4F1E8;
  --muted: #A5AFA8;
  --gold: #D9A441;
  --gold-soft: rgba(217,164,65,0.16);
  --good: #7DD3A2;
  --bad: #F2876B;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  /* Le texte par défaut de la page (body) et des anciens écrans : Archivo, la police du site (lot 4, B12 ; plus d'Inter). */
  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --r: 18px;
  --r-sm: 12px;
  --r-md: 16px;
  --gutter: 16px;
  --gold-line: rgba(217,164,65,0.55);
  --gold-tint: rgba(217,164,65,0.07);
  --press: rgba(244,241,232,0.04);
  --shadow-card: 0 18px 36px -26px rgba(0,0,0,.8);
  --dur-fast: .12s;
  --dur: .2s;
  --tabbar-h: 64px;
  --dot-size: 12px;
  --track: rgba(244,241,232,0.08);
}
html, body { height: 100%; }
body { background: var(--ink); color: var(--creme); font-family: var(--sans); font-size: 16px; line-height: 1.45; -webkit-tap-highlight-color: transparent; }
/* L'appli installée (barre d'état translucide) : une bande du fond de la page, haute comme l'encoche, pour que le
   texte ne défile pas derrière l'heure. Elle prend le fond du corps (le dégradé fixe de l'Actu compris), reste sous
   les feuilles et la barre du bas, et laisse passer les touchers. Hauteur nulle sur ordinateur et dans Safari.
   ::after, car l'Actu pose déjà son grain sur ::before. */
body::after { content: ""; position: fixed; top: 0; left: 0; right: 0; z-index: 28; height: var(--encoche); background: inherit; pointer-events: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 8px; }
.app { max-width: 520px; margin: 0 auto; min-height: 100%; padding-inline: var(--gutter); padding-block: 0 32px; display: flex; flex-direction: column; }

/* En tête de partie */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-block: 12px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.top .where { font-size: 12px; color: var(--muted); letter-spacing: 0.02em; min-width: 0; line-height: 1.25; }
.top .where b { display: inline-block; max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.top .where b { color: var(--creme); font-weight: 700; }

/* Typographie */
.eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
h1, h2, h3 { margin: 0; text-wrap: balance; }
.display { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 11vw, 60px); line-height: 0.98; }
.h2 { font-size: 20px; font-weight: 800; letter-spacing: 0.01em; }
.small { font-size: 13px; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.stack.lg { gap: 22px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.num { font-variant-numeric: tabular-nums; }

/* Boutons */
.btn { min-height: 54px; border-radius: 999px; border: 1px solid var(--line); background: var(--raise); padding: 0 22px; font-weight: 700; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; transition: transform .08s ease, background .15s ease; }
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.btn:active { transform: scale(0.985); }
.btn.danger { background: transparent; border-color: var(--bad); color: var(--bad); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Panneaux */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; display: flex; flex-direction: column; gap: 14px; }

/* Lignes de joueurs : grille fixe à trois colonnes (numéro, nom, bouton retirer), 56px de haut, sans position absolue. */
.prow { display: grid; grid-template-columns: 28px minmax(0, 1fr) var(--v2-cible); column-gap: var(--v2-e8); align-items: center; height: var(--v2-cible-principale); }
.prow .idx { font-size: 13px; font-weight: 700; color: var(--muted); text-align: center; }
.field { box-sizing: border-box; width: 100%; min-height: 48px; border-radius: 12px; border: 1px solid var(--line); background: var(--ink); padding: 0 14px; font-size: 16px; }
.prow .field { min-width: 0; font-size: var(--v2-t17); text-overflow: ellipsis; }
.prow .xbtn svg { width: 16px; height: 16px; }
.prow .xbtn:disabled { opacity: 0.4; cursor: not-allowed; }
.prow .xbtn:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: var(--v2-focus-ecart); }
.prow .ajout { grid-column: 2 / -1; min-height: 48px; padding-inline: var(--v2-e12); white-space: nowrap; font-size: var(--v2-t15); }
.prow .ajout:disabled { opacity: 0.55; }
.field:focus { border-color: var(--gold); outline: none; }
.xbtn { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; }
.xbtn svg { width: 18px; height: 18px; }
.note { font-size: 13px; color: var(--muted); }
.warn { font-size: 13px; color: var(--bad); }

/* Choix segmentés */
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.opt { border: 1px solid var(--line); background: var(--ink); border-radius: 14px; padding: 12px 10px; text-align: left; display: flex; flex-direction: column; gap: 2px; min-height: 76px; }
.opt b { font-size: 15px; }
.opt span { font-size: 12px; color: var(--muted); line-height: 1.3; }
.opt[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-soft); }

/* Rôles */
.roles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.role { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.role .k { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; color: var(--muted); }
.role .v { font-size: 18px; font-weight: 800; overflow-wrap: anywhere; }
/* Cartes de camp : la lettre est centrée dans une boîte de taille fixe, à la même place pour A et B,
   quelle que soit la largeur du glyphe. La carte est assez haute pour laisser 16px sous la boîte. */
.role.camp { --lt-w: 38px; --lt-box: 72px; --lt-size: 50px; --lt-inset: 16px; box-sizing: border-box; position: relative; overflow: hidden; border-radius: 16px; min-height: calc(var(--lt-box) + 2 * var(--lt-inset) + 2px); }
.role.camp .k, .role.camp .v { padding-right: calc(var(--lt-w) + 8px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
/* La pointe du A dépasse légèrement celle du B : légère échelle plutôt qu'un décalage. */
.role.full { grid-column: 1 / -1; }
.role .jury { font-size: 14px; color: var(--creme); font-weight: 600; }
.reveal { animation: pop .45s cubic-bezier(.2,.9,.3,1.3); }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Carte sujet */
.card { --th: var(--gold); --th-far: var(--panel); --th-bar: var(--gold);
  --th-text: color-mix(in srgb, var(--th) 45%, var(--creme)); --th-line: color-mix(in srgb, var(--th) 55%, var(--line));
  position: relative; border-radius: 20px; overflow: hidden; color: var(--creme); border: 1px solid var(--th-line);
  background: linear-gradient(165deg, color-mix(in srgb, var(--th-far) 70%, var(--panel)) 0%, var(--panel) 62%);
  box-shadow: inset 0 3px 0 var(--th), 0 18px 36px -26px rgba(0,0,0,.8); }
.card .tag { display: inline-flex; align-items: center; gap: 8px; color: var(--th-text); min-width: 0; }
.card .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--th); box-shadow: 0 0 0 3px color-mix(in srgb, var(--th) 30%, transparent); flex-shrink: 0; }
.card .body { padding: 14px 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.card .sub { font-size: 13px; font-weight: 600; color: var(--muted); }
.card .q { font-family: var(--serif); font-size: 30px; line-height: 1.08; font-weight: 400; color: var(--creme); }
.card .facts { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--th-line); }
.card .fl { font-size: 11px; font-weight: 800; letter-spacing: 0.18em; color: var(--th-text); }
.card ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.card li { position: relative; padding-left: 16px; font-size: 14px; line-height: 1.42; color: #D9DDD5; }
.card li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 2px; background: var(--th-bar); opacity: 0.85; }

.libre { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.libre .btn { width: auto; min-height: 48px; }

/* Chrono */
.clock { position: relative; width: min(64vw, 260px); aspect-ratio: 1; max-width: 100%; margin: 6px auto; }
.clock svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.clock .arc { fill: none; stroke: var(--gold); stroke-width: 10; stroke-linecap: round; transition: stroke .3s; }
.clock.low .arc { stroke: var(--bad); }
.clock .t { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.clock .t b { font-size: clamp(54px, 18vw, 78px); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.clock .t span { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; color: var(--muted); margin-top: 6px; }

/* Joute */
.log { display: flex; flex-direction: column; gap: 6px; }
.log div { font-size: 13px; color: var(--muted); display: flex; gap: 8px; }
.log .pos { color: var(--good); font-weight: 700; }

/* Quiz */
.ans { border-radius: 14px; border: 1px solid var(--th-line); border-left: 4px solid var(--th); padding: 12px 14px; background: rgba(244,241,232,.05); }
.ans .l { font-size: 11px; font-weight: 800; letter-spacing: 0.2em; color: var(--th-text); }
.ans .a { font-family: var(--serif); font-size: 26px; line-height: 1.1; color: var(--creme); }

/* Grille */
.case { width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 14px 16px; display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; }
.case:last-child { border-bottom: 0; }
.box { width: 28px; height: 28px; border-radius: 8px; border: 2px solid var(--muted); display: inline-flex; align-items: center; justify-content: center; }
.case[aria-pressed="true"] .box { background: var(--gold); border-color: var(--gold); }
.box svg { width: 18px; height: 18px; color: var(--ink); opacity: 0; }
.case[aria-pressed="true"] .box svg { opacity: 1; }
.case .ct { font-weight: 800; font-size: 16px; }
.case .cd { font-size: 13px; color: var(--muted); line-height: 1.35; }

/* Scores */
.scores { display: flex; flex-direction: column; gap: 8px; }

.bar { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; grid-column: 2 / -1; }
.bar i { display: block; height: 100%; background: var(--gold); border-radius: 99px; }

/* Fin */
.win { text-align: center; padding-block: 24px 8px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.win .name { font-family: var(--serif); font-size: clamp(44px, 12vw, 64px); line-height: 1; overflow-wrap: anywhere; }

/* Feuilles */
/* Les feuilles s'arrêtent sous l'encoche : leur hauteur maximale se compte dans la place qui reste. */
.sheet-wrap { position: fixed; inset: 0; z-index: 40; box-sizing: border-box; padding-top: var(--encoche); display: flex; align-items: flex-end; justify-content: center; background: rgba(4,8,6,.66); }
.sheet { width: 100%; max-width: 560px; max-height: 88%; overflow: auto; background: var(--panel); border-top-left-radius: 24px; border-top-right-radius: 24px; border: 1px solid var(--line); padding: 20px 16px calc(24px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 16px; }
.sheet .sh { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sheet .sh .xbtn { flex-shrink: 0; }
.blist { display: flex; flex-direction: column; gap: 8px; }
.bitem { text-align: left; border: 1px solid var(--line); background: var(--ink); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.bitem b { font-size: 15px; }
.bitem span { font-size: 13px; color: var(--muted); line-height: 1.35; }
.bitem[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-soft); }
.rules h3 { font-size: 15px; font-weight: 800; margin-top: 6px; }
.rules p, .rules li { font-size: 14px; color: var(--muted); line-height: 1.45; margin: 0; }
.rules ol, .rules ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.rules b { color: var(--creme); }
/* Feuille des règles : lien « Lexique » (et « Retour aux règles »), puis le lexique en liste de définitions. */
.lexique { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.lexique dt { font-size: 15px; font-weight: 800; color: var(--creme); margin-top: 8px; }
.lexique dd { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }

.toast { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60; background: var(--creme); color: var(--ink); font-weight: 700; font-size: 14px; border-radius: 999px; padding: 10px 18px; box-shadow: 0 10px 30px rgba(0,0,0,.4); max-width: calc(100% - 32px); text-align: center; }

@media (prefers-reduced-motion: reduce) { .reveal { animation: none; } .btn { transition: none; } }

/* ---------- Champs, et barre du haut en partie ---------- */
button, input, textarea { font: inherit; color: inherit; }
/* Barre du haut en partie : manche et Arbitre tiennent chacun sur une ligne, un prénom long est coupé. */
.top .where { white-space: nowrap; }
.top .where b { max-width: min(24vw, 120px); }
@media (max-width: 340px) { .top .where b { max-width: 20vw; } }
/* Un prénom long ne passe plus sous les boutons : la ligne se coupe au bord de sa zone. */
.top .where { overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; }
.top .where b { display: inline; max-width: none; }

/* Attente et rôles */
.wait { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); font-size: 15px; }
@keyframes pulse { 0%, 100% { opacity: .3; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
.pending { border: 2px solid var(--bad); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: rgba(242,135,107,0.08); }

/* Salon en ligne : même grille que les lignes de joueurs du mode même téléphone. */
.field.code { font-size: 28px; font-weight: 800; letter-spacing: 0.3em; text-transform: uppercase; text-align: center; min-height: 60px; }
.seg.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Solo */
.method { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--muted); }
.toggle { display: flex; align-items: center; gap: 12px; font-size: 15px; min-height: 44px; }
.toggle input { width: 22px; height: 22px; accent-color: var(--gold); }
.live { margin: 0; font-size: 15px; line-height: 1.5; min-height: 72px; max-height: 220px; overflow: auto; }
.live .interim { color: var(--muted); }
details.panel > summary { cursor: pointer; list-style: none; }
details.panel > summary::-webkit-details-marker { display: none; }
.mark { font-weight: 800; color: var(--muted); }
.mark.on { color: var(--gold); }
.agree { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 999px; padding: 3px 9px; }
.agree.yes { background: rgba(125,211,162,0.16); color: var(--good); }
.agree.no { background: rgba(242,135,107,0.14); color: var(--bad); }
.panel.good { border-color: rgba(125,211,162,0.5); }
ul.plain { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.42; }
code { font-size: 0.92em; background: var(--raise); padding: 1px 6px; border-radius: 6px; }

/* Pause : bouton discret dans le coin haut droit, écran par dessus le jeu */
@keyframes pzin { from { opacity: 0; } }

/* Barre de navigation du bas, message J (11 octobre, alternative 1 de « J, maquette barre », valeurs de la maquette) : à
   toutes les largeurs, 640 px au plus sur ordinateur, centrée. Fond #0F3B24, aucun filet. Cinq places : Actu,
   Catégories, la pièce Jouer, Progrès, Histoire. Une icône des objets du jeu, au trait de 1,9, 24 px, au dessus du nom
   (13 px ; 12 sur la maquette, la règle des 13 px passe avant). L'onglet actif : une pastille menthe de 56 × 32, l'icône
   à l'encre, le nom crème en gras. La pièce : un rond de 62 px coupé en diagonale, A safran et B lilas en Archivo 900,
   qui dépasse de 34 px au dessus de la barre, dans un anneau de 6 px de la couleur de la barre, ombre 0 6px 0 ; sur
   l'accueil (et dans une partie dont la barre se voit), un anneau menthe de 3 px et le nom crème. Un petit saut au
   toucher, rien en mouvement réduit. --piece-haut : ce qui dépasse au dessus de la barre (34 et l'anneau de 6). */
/* --barre-bas : ce que la barre garde sous ses onglets pour la barre d'accueil de l'iPhone (appli installée). Pas les
   34 px entiers de safe-area-inset-bottom, qui laissaient sous les onglets une bande vide d'un tiers de la barre et
   remontaient tout l'accueil : 14 px suffisent à dégager le trait de la barre d'accueil. 0 sans barre d'accueil. Tout ce
   qui se pose au dessus de la barre compte avec cette variable. */
:root { --barre: #0F3B24; --piece-haut: 40px; --barre-bas: max(0px, env(safe-area-inset-bottom, 0px) - 20px); }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--barre);
  padding: 0 env(safe-area-inset-right, 0px) var(--barre-bas) env(safe-area-inset-left, 0px); }
.tabbar[hidden] { display: none; }
/* Les colonnes de la maquette : quatre égales, la pièce dans 84 px, au centre exact. Sous 375 px, « Catégories » (le nom
   le plus long) ne tiendrait plus : Catégories et Progrès s'élargissent à égalité, la pièce reste au centre. */
.tabbar .tabs { box-sizing: border-box; max-width: 640px; margin: 0 auto; padding: 0 2px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 84px minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 374px) { .tabbar .tabs { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 76px minmax(0, 1.3fr) minmax(0, 1fr); } }
.tab { position: relative; min-height: var(--tabbar-h); min-width: var(--v2-cible); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--v2-e4); padding: 0; background: none; border: 0; color: var(--v2-texte-2); font-family: var(--v2-sans); font-size: var(--v2-t13); font-weight: 600; line-height: 1.2; cursor: pointer; }
.tab-ico { display: grid; place-items: center; width: 56px; height: 32px; border-radius: 16px; }
.tab-ic { width: 24px; height: 24px; flex-shrink: 0; }
.tab-l { white-space: nowrap; letter-spacing: -0.01em; }
@media (max-width: 359px) { .tab-l { letter-spacing: -0.03em; } }
.tab[aria-current="page"] { color: var(--v2-texte); font-weight: 800; }
.tab[aria-current="page"] .tab-ico { background: var(--v2-menthe); color: var(--v2-encre); }
/* Catégories : les quatre carrés, pleins ; en couleur de thème quand l'onglet est actif. */
.tab-ic :is(.tab-g1, .tab-g2, .tab-g3, .tab-g4) { fill: currentColor; fill-opacity: 0.9; stroke: none; }
.tab[aria-current="page"] .tab-g1 { fill: var(--v2-th-geo); fill-opacity: 1; } .tab[aria-current="page"] .tab-g2 { fill: var(--v2-th-tech); fill-opacity: 1; }
.tab[aria-current="page"] .tab-g3 { fill: var(--v2-th-soc); fill-opacity: 1; } .tab[aria-current="page"] .tab-g4 { fill: var(--v2-th-eco); fill-opacity: 1; }
.tab:focus:not(:focus-visible) { outline: none; }
.tab:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: calc(-1 * var(--v2-e4)); border-radius: var(--v2-focus-rayon); }
/* La pièce Jouer. */
.tab-piece { justify-content: flex-end; padding-bottom: 8px; font-weight: 800; }
.tab-rond { position: absolute; left: 50%; top: -34px; width: 62px; height: 62px; margin-left: -31px; border-radius: 50%; background: linear-gradient(135deg, var(--v2-camp-a) 50%, var(--v2-camp-b) 50%);
  box-shadow: 0 0 0 6px var(--barre), 0 6px 0 6px rgba(0, 0, 0, 0.25); }
.tab-rond b { position: absolute; font-family: var(--v2-sans); font-size: 24px; font-weight: 900; line-height: 1; color: var(--v2-encre); }
.tab-rond b:first-child { left: 14px; top: 11px; }
.tab-rond b:last-child { right: 14px; bottom: 10px; }
.tab-piece[aria-current="page"] .tab-rond { box-shadow: 0 0 0 3px var(--v2-menthe), 0 0 0 9px var(--barre), 0 6px 0 9px rgba(0, 0, 0, 0.25); }
.tab-piece:focus-visible { outline: none; }
.tab-piece:focus-visible .tab-rond { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 11px; }
@keyframes tab-saut { 0% { transform: none; } 40% { transform: translateY(-7px); } 100% { transform: none; } }
.tab-saute .tab-rond { animation: tab-saut 260ms cubic-bezier(0.3, 1.4, 0.5, 1); }
@media (prefers-reduced-motion: reduce) { .tab-saute .tab-rond { animation: none; } }
/* Ce qui reste au bas d'une page passe au dessus de la pièce. */
body.has-tabbar .app { padding-bottom: calc(var(--tabbar-h) + var(--barre-bas) + var(--piece-haut) + 28px); }
body.has-tabbar .toast { bottom: calc(var(--tabbar-h) + var(--barre-bas) + var(--piece-haut) + 14px); }
/* Transition douce entre les pages de la barre (opacité seule, pour ne pas gêner les éléments fixes). */
.page-in { animation: pagein var(--dur) ease; }
@keyframes pagein { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .page-in { animation: none; } }

/* En tête des pages Catégories, Progrès, Histoire */
.pagehead { padding-block: 32px 12px; display: flex; flex-direction: column; gap: 10px; }
.pagetitle { font-size: 44px; margin: 0; }
.pagelead { margin: 0; font-size: 17px; color: var(--muted); line-height: 1.45; font-family: var(--sans); }

/* Catégories */

/* Progrès */
.lvl { padding: 20px; border-radius: var(--r); border: 1px solid var(--gold-line); background: var(--gold-tint); display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.bars { display: flex; flex-direction: column; gap: 12px; }
.recent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.recent li { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 2px; padding: 12px 0; border-top: 1px solid var(--line); }
.recent li:first-child { border-top: 0; padding-top: 0; }
.recent .rd { font-size: 13px; color: var(--muted); }
.recent .rp { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 800; color: var(--gold); }
.bareme { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.bareme li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; font-size: 16px; line-height: 1.4; }
.niveaux { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 16px; }
.niveaux li { padding-left: 4px; }
.niveaux li b { margin-right: 10px; }
.pagehead + .panel { margin-top: 4px; }
main .panel + .panel, .app > .panel + .panel, .app > section + section { margin-top: 14px; }

/* Progrès : détail, graphique solo, données */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.confirm { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--gold-line); border-radius: var(--r-md); background: var(--gold-tint); }
.keep { margin: 18px 0 0; text-align: center; font-size: 14px; color: var(--muted); }
.recent li { display: block; padding: 0; }
.recent li + li { border-top: 1px solid var(--line); }
/* ---------- Récap de fin de débat ---------- */
.rh { margin: 0; font-size: 17px; color: var(--creme); }
.recap .eyebrow { display: flex; align-items: center; gap: 8px; }

/* ---------- Bilan solo : analyse par le code ---------- */
.est { align-self: flex-start; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(217,164,65,0.5); }
.est.on { color: var(--good); border-color: rgba(125,211,162,0.5); }
.est.off { color: var(--muted); border-color: var(--line); }

/* ---------- Nouveau design (v2) : accueil ----------
   Variables préfixées --v2-, propres au nouveau design. Seul l'accueil l'utilise pour l'instant : les autres
   écrans gardent l'ancienne charte, où l'or reste réservé au chrono et aux points.
   Règles : échelle de tailles fixe (13, 15, 17, 21, 28, 44), aucun texte sous 13px, cibles d'au moins 44px
   (56px pour le bouton principal), contrastes d'au moins 4,5 pour 1, une seule animation d'entrée. */
:root {
  /* La hauteur de l'encoche (et de la barre d'état de l'appli installée), 0 ailleurs. */
  --encoche: env(safe-area-inset-top, 0px);
  --v2-fond: #0D3520;
  --v2-texte: #F4F1E8;
  --v2-texte-2: #A9BFB1;
  --v2-filet: rgba(244, 241, 232, 0.2);
  --v2-survol: rgba(244, 241, 232, 0.05);
  --v2-menthe: #A3F1A4;
  --v2-menthe-survol: #B8F6B9;
  --v2-menthe-appui: #86D987;
  --v2-sur-menthe: #0D3520;
  /* Chantier 6 : papier (surfaces de lecture et cartes de camp) et couleurs des camps.
     Safran pour le camp A, lilas pour le camp B, de même clarté : aucun camp ne paraît favorisé.
     Sur la table (fond vert) les versions claires, sur le papier les versions foncées. Jamais en grand fond. */
  --v2-papier: #F4F1E8;
  --v2-encre: #0D3520;
  --v2-encre-2: #4F6357;
  --v2-lien-papier: #1E6B3A;
  --v2-camp-a: #FFA215;
  --v2-camp-b: #C2A9FF;
  --v2-camp-a-papier: #9C4E00;
  --v2-camp-b-papier: #6D47D4;
  /* Couleurs des huit thèmes (icônes seulement, jamais le texte). Même luminosité perçue (OKLab L 0,72 à 0,84 ; le framboise et le piment en bas de la plage),
     loin du safran, du lilas et du menthe. Version papier : plus sombre, contraste de 3,3 au moins sur le crème. */
  --v2-th-geo: #6DBBFE; --v2-th-geo-papier: #3389CC;
  --v2-th-tech: #48CEE7; --v2-th-tech-papier: #0190A4;
  --v2-th-sav: #52D8B4; --v2-th-sav-papier: #069477;
  --v2-th-eco: #DBCF4A; --v2-th-eco-papier: #908603;
  --v2-th-soc: #FE9979; --v2-th-soc-papier: #C9684B;
  --v2-th-sport: #FE709F; --v2-th-sport-papier: #E14B82;
  --v2-th-mode: #F892D3; --v2-th-mode-papier: #C362A2;
  /* Spice (7 octobre) : rouge piment, OKLab L 0,724 comme le framboise (0,729) ; écart CIEDE2000 de 12,3 avec le
     framboise, 12,4 avec le corail et 15,5 avec le rouge NON du paquet (le plus faible écart entre deux autres thèmes
     est 11,1, framboise et rose) ; papier : contraste 3,32 sur le crème. */
  --v2-th-spice: #FF7375; --v2-th-spice-papier: #FF2157;
  --v2-barre: rgba(244, 241, 232, 0.5);
  --v2-rayon-carte: 16px;
  --v2-serif: "Instrument Serif", "Times New Roman", Times, Georgia, serif;
  --v2-sans: "Archivo", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  /* Les cartes du jeu (police « Affiche », planche « Cartes : quelle écriture ? ») : Archivo Narrow, Archivo en secours. */
  --v2-carte: "Archivo Narrow", "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --v2-t13: 13px;
  --v2-t15: 15px;
  --v2-t17: 17px;
  --v2-t21: 21px;
  --v2-t28: 28px;
  --v2-t44: 44px;
  --v2-e4: 4px;
  --v2-e8: 8px;
  --v2-e12: 12px;
  --v2-e16: 16px;
  --v2-e24: 24px;
  --v2-e32: 32px;
  --v2-e48: 48px;
  --v2-e64: 64px;
  --v2-e96: 96px;
  --v2-trait: 1px;
  --v2-focus: 2px;
  --v2-focus-ecart: 3px;
  --v2-focus-rayon: 6px;
  --v2-icone: 20px;
  --v2-icone-croix: 18px;
  --v2-cible: 44px;
  --v2-cible-principale: 56px;
  --v2-rayon: 14px;
  --v2-largeur: 1080px;
  --v2-onglets: 5;
  --v2-duree: 250ms;
  --v2-decalage: 60ms;
  --v2-fondu: 200ms;
  --v2-appui: 120ms;
}
/* Fond plat des pages au nouveau design. La classe est posée sur body par main.js tant qu'une telle page est affichée. */
body.v2-fond-page { background: var(--v2-fond); }
.v2-accueil, .v2-page { display: flex; flex-direction: column; min-width: 0; color: var(--v2-texte); font-family: var(--v2-sans); font-size: var(--v2-t17); line-height: 1.45; }
.v2-accueil :focus-visible, .v2-page :focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: var(--v2-focus-ecart); border-radius: var(--v2-focus-rayon); }
.v2-fleche { width: var(--v2-icone); height: var(--v2-icone); flex-shrink: 0; color: var(--v2-menthe); }

/* En tête : le nom, et le lien vers les règles */
.v2-tete { display: flex; align-items: center; justify-content: space-between; gap: var(--v2-e16); padding-top: calc(env(safe-area-inset-top, 0px) + var(--v2-e12)); }
.v2-nom { margin: 0; line-height: 1; }
.v2-lien { min-height: var(--v2-cible); min-width: var(--v2-cible); display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--v2-e4); background: none; border: 0; color: var(--v2-menthe); font-family: var(--v2-sans); font-size: var(--v2-t15); font-weight: 600; text-decoration: underline; text-decoration-thickness: var(--v2-trait); text-underline-offset: var(--v2-e4); }
.v2-lien:hover { text-decoration-thickness: var(--v2-focus); }
/* Le lien de droite (« Retour », « Quitter ») sur la ligne de base du logo, comme sur les planches : le logo garde sa
   cible de 44 px, son texte en haut ; le lien remonte (marges négatives) sans agrandir l'en tête ni bouger le logo. */
.v2-tete .v2-lien { margin-right: calc(-1 * var(--v2-e4)); margin-block: -10px; }
/* Le lien de droite (Règles, Retour, Quitter) sur la ligne de base de « Neutra » dans le logo (10 octobre) : l'en
   tête centre le logo et le lien, la ligne de base de « Neutra » tombe 5 px plus bas (4 px sous le grand logo de
   l'accueil, 7 px sur ordinateur, où il fait 260 px). */
.v2-tete > .v2-lien { position: relative; top: 5px; }
.v2-tete > .v2-nom ~ .v2-lien { top: 4px; }
@media (min-width: 900px) { .v2-tete > .v2-nom ~ .v2-lien { top: 7px; } }

/* Partie en cours : une ligne discrète, avec une croix pour la masquer pendant cette visite */

/* Éléments partagés par les pages au nouveau design */
.v2-actions { margin-top: var(--v2-e24); display: flex; flex-direction: column; align-items: stretch; gap: var(--v2-e8); }
.v2-actions .v2-lien { align-self: center; }
.v2-bouton { min-height: var(--v2-cible-principale); padding: 0 var(--v2-e32); border: 0; border-radius: var(--v2-rayon); background: var(--v2-menthe); color: var(--v2-sur-menthe); font-family: var(--v2-sans); font-size: var(--v2-t17); font-weight: 700; transition: background-color var(--v2-appui) ease, transform var(--v2-appui) ease; }
@media (hover: hover) { .v2-bouton:hover { background: var(--v2-menthe-survol); } }
.v2-bouton:active { background: var(--v2-menthe-appui); transform: scale(0.98); }

/* Lignes séparées par un filet (Réglages, Progrès) */
.v2-lignes { list-style: none; margin: var(--v2-e12) 0 0; padding: 0; }
.v2-lignes li { border-bottom: var(--v2-trait) solid var(--v2-filet); }
.v2-lignes li:first-child { border-top: var(--v2-trait) solid var(--v2-filet); }
.v2-ligne { width: calc(100% + 2 * var(--v2-e12)); margin-inline: calc(-1 * var(--v2-e12)); min-height: var(--v2-cible); display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--v2-e16); row-gap: var(--v2-e4); align-items: center; padding: var(--v2-e16) var(--v2-e12); background: none; border: 0; text-align: left; color: var(--v2-texte); font-family: var(--v2-sans); }
.v2-ligne-t { grid-column: 1; font-size: var(--v2-t21); font-weight: 600; line-height: 1.2; }
.v2-ligne .v2-fleche { grid-column: 2; grid-row: 1 / span 2; }
@media (hover: hover) { .v2-ligne:hover { background: var(--v2-survol); } }
.v2-ligne:active { background: var(--v2-survol); }

/* Un fondu court (pages au nouveau design). */
@keyframes v2-fondu { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .v2-bouton { transition: none; }
  .v2-bouton:active { transform: none; }
}

/* ---------- Nouveau design (v2) : éléments communs des pages (Réglages, puis Progrès, Histoire, Actu) ---------- */
.v2-titre { margin: var(--v2-e24) 0 0; font-family: var(--v2-serif); font-size: var(--v2-t44); font-weight: 400; line-height: 1.04; letter-spacing: -0.01em; color: var(--v2-texte); }
.v2-section { margin-top: var(--v2-e48); }
.v2-intertitre { margin: 0; font-family: var(--v2-serif); font-size: var(--v2-t28); font-weight: 400; line-height: 1.1; color: var(--v2-texte); }
.v2-para { margin: var(--v2-e12) 0 0; font-size: var(--v2-t17); line-height: 1.5; color: var(--v2-texte-2); max-width: 60ch; }
.v2-section > .v2-lignes { margin-top: var(--v2-e24); }
.v2-compactes .v2-ligne { min-height: var(--v2-cible-principale); }
.v2-compactes .v2-ligne-t { font-size: var(--v2-t17); }
label.v2-ligne { cursor: pointer; box-sizing: border-box; }
label.v2-ligne:focus-within { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: var(--v2-focus-ecart); border-radius: var(--v2-focus-rayon); }
.v2-message { margin: var(--v2-e16) 0 0; font-size: var(--v2-t15); color: var(--v2-texte); border-left: var(--v2-focus) solid var(--v2-menthe); padding-left: var(--v2-e12); }
.v2-message.v2-alerte { border-left-color: var(--v2-texte); }
/* Hors ligne (message R) : l'étiquette crème « Hors ligne » et le réseau barré, puis la phrase et « Réessayer ». Même
   bloc pour l'Actu, l'analyse par l'IA et le jeu à distance. */
.v2-hl-bloc { margin: var(--v2-e16) 0 0; }
.v2-hl-bloc .v2-message { margin-top: var(--v2-e12); }
.v2-hl { display: inline-flex; align-items: center; gap: var(--v2-e8); min-height: 32px; padding: 0 var(--v2-e12); border-radius: 999px; background: var(--v2-papier); color: var(--v2-encre); font-family: var(--v2-sans); font-size: var(--v2-t15); font-weight: 800; line-height: 1; }
.v2-hl-i { flex: none; }
/* Le réseau coupé pendant une partie à distance (audit du 25 octobre) : la même étiquette, « Connexion perdue », posée en
   haut au milieu de l'écran, sans pousser la partie ni prendre les touchers, jusqu'au retour du réseau. */
.ol-coupe { position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); left: 50%; z-index: 61; transform: translateX(-50%); pointer-events: none; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.3)); }
.ol-coupe:empty { display: none; }
.ol-coupe .v2-hl { white-space: nowrap; }
.v2-bouton-second { min-height: var(--v2-cible-principale); padding: 0 var(--v2-e32); border: var(--v2-trait) solid var(--v2-texte-2); border-radius: var(--v2-rayon); background: none; color: var(--v2-texte); font-family: var(--v2-sans); font-size: var(--v2-t17); font-weight: 600; }
.v2-bouton-second:active { background: var(--v2-survol); }
/* Boîte de dialogue : fond de la page, filet, sans ombre ni rouge. */
.v2-dialogue { width: min(400px, calc(100% - 2 * var(--v2-e16))); box-sizing: border-box; padding: var(--v2-e24); border: var(--v2-trait) solid var(--v2-filet); border-radius: var(--v2-rayon); background: var(--v2-fond); color: var(--v2-texte); font-family: var(--v2-sans); }
.v2-dialogue::backdrop { background: rgba(4, 14, 9, 0.75); }
.v2-dialogue .v2-actions { flex-direction: column; align-items: stretch; }
.v2-dialogue :focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: var(--v2-focus-ecart); }

/* Progrès (étape 5) */
.v2-qui { display: flex; flex-wrap: wrap; column-gap: var(--v2-e16); margin-top: var(--v2-e16); }
.v2-choix { min-height: var(--v2-cible); padding: 0; background: none; border: 0; color: var(--v2-texte-2); font-family: var(--v2-sans); font-size: var(--v2-t15); }
.v2-choix[aria-pressed="true"] { color: var(--v2-texte); font-weight: 700; text-decoration: underline; text-decoration-color: var(--v2-menthe); text-decoration-thickness: var(--v2-focus); text-underline-offset: var(--v2-e4); }
.v2-rail { display: block; width: 100%; height: 6px; }
.v2-rail-fond { fill: var(--v2-filet); }
.v2-rail-plein { fill: var(--v2-menthe); }
.v2-points { grid-column: 2; grid-row: 1; font-size: var(--v2-t15); color: var(--v2-texte-2); white-space: nowrap; }
.v2-themes .v2-ligne { row-gap: var(--v2-e8); }
.v2-themes .v2-rail { grid-column: 1 / -1; height: 2px; }
.v2-themes .v2-rail-fond { fill: none; }
.v2-note { margin: var(--v2-e16) 0 0; font-size: var(--v2-t13); color: var(--v2-texte-2); }
/* Élément repliable du nouveau design */

.v2-titre em { font-style: italic; }
.v2-lexique { margin-top: var(--v2-e8); border-top: var(--v2-trait) solid var(--v2-filet); }
.v2-mot { border-bottom: var(--v2-trait) solid var(--v2-filet); }
.v2-mot > summary { min-height: var(--v2-cible-principale); display: flex; align-items: center; justify-content: space-between; gap: var(--v2-e16); cursor: pointer; list-style: none; font-family: var(--v2-serif); font-size: var(--v2-t21); color: var(--v2-texte); }
.v2-mot > summary::-webkit-details-marker { display: none; }
.v2-mot > summary::after { content: "+"; font-family: var(--v2-sans); font-size: var(--v2-t21); color: var(--v2-menthe); }
.v2-mot[open] > summary::after { content: "×"; }
.v2-mot > p { margin: 0 0 var(--v2-e16); font-size: var(--v2-t17); line-height: 1.5; color: var(--v2-texte-2); }

/* Actu (étape 7) */
.v2-actu > .v2-lignes { margin-top: var(--v2-e24); }
/* Sujets de la une : thème, titre en serif, chapeau en gris sur deux lignes, les deux thèses en une phrase,
   nombre de faits et de sources. Tout le bloc est touchable : le bouton du titre s'étend dessus. */
.v2-actu .v2-note { margin-top: var(--v2-e32); }

/* Page Jouer : écrans de choix du mode (chantier 4). Options entre filets, champs soulignés, thèmes en mots. */
.v2-joueurs { margin-top: var(--v2-e16); display: flex; flex-direction: column; gap: var(--v2-e4); }
.v2-page .prow .idx { font-size: var(--v2-t13); font-weight: 600; color: var(--v2-texte-2); }
.v2-page .xbtn { border: 0; border-radius: var(--v2-focus-rayon); color: var(--v2-texte-2); }
.v2-ajout { grid-column: 2 / -1; justify-self: start; padding: 0; }
.v2-lien:disabled { color: var(--v2-texte-2); text-decoration: none; cursor: not-allowed; }
.v2-champ { box-sizing: border-box; width: 100%; min-height: 48px; padding: 0 var(--v2-e4); background: none; border: 0; border-bottom: var(--v2-trait) solid var(--v2-texte-2); border-radius: 0; color: var(--v2-texte); font-family: var(--v2-sans); font-size: var(--v2-t17); }
.v2-champ::placeholder { color: var(--v2-texte-2); opacity: 1; }
.v2-champ:focus { outline: none; border-bottom-color: var(--v2-menthe); }
.v2-champ:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: var(--v2-focus-ecart); }
.prow .v2-champ { min-width: 0; text-overflow: ellipsis; }
.v2-label { display: block; margin-top: var(--v2-e16); font-size: var(--v2-t15); font-weight: 600; color: var(--v2-texte-2); }
.v2-options { margin-top: var(--v2-e16); border-top: var(--v2-trait) solid var(--v2-filet); }
.v2-option { width: 100%; min-height: var(--v2-cible-principale); display: grid; grid-template-columns: minmax(0, 1fr) var(--v2-icone); column-gap: var(--v2-e16); row-gap: var(--v2-e4); align-items: center; padding: var(--v2-e12) 0; background: none; border: 0; border-bottom: var(--v2-trait) solid var(--v2-filet); text-align: left; color: var(--v2-texte); font-family: var(--v2-sans); }
.v2-option b { grid-column: 1; font-size: var(--v2-t17); font-weight: 600; }
.v2-option span { grid-column: 1; font-size: var(--v2-t15); line-height: 1.4; color: var(--v2-texte-2); }
.v2-coche { grid-column: 2; grid-row: 1 / span 2; width: var(--v2-icone); height: var(--v2-icone); color: var(--v2-menthe); visibility: hidden; }
.v2-option[aria-pressed="true"] b { color: var(--v2-menthe); }
.v2-option[aria-pressed="true"] .v2-coche { visibility: visible; }
@media (hover: hover) { .v2-option:hover { background: var(--v2-survol); } }
.v2-themes-choix { margin-top: var(--v2-e12); }
.v2-jouer .v2-bouton:disabled { opacity: 0.5; cursor: not-allowed; }
.v2-jouer code { font-size: var(--v2-t15); color: var(--v2-texte); }

/* Le logo (10 octobre) : « Neutra » et la bulle « Débat », en SVG (marque.js), toujours sur le vert. En grand sur
   l'accueil (200 px de large sur téléphone, 260 sur ordinateur), 32 px de haut ailleurs. Au toucher, la bulle
   s'enfonce sur son ombre menthe, comme les boutons en relief (il en reste un filet) ; mouvement réduit : rien ne
   bouge. La classe v2-presse garde la bulle enfoncée le temps du retour à l'accueil (main.js). */
.v2-logo { position: relative; display: inline-flex; align-items: center; min-height: var(--v2-cible); padding: 0; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.v2-logo-svg { display: block; flex: none; width: auto; height: 32px; aspect-ratio: 1614 / 355; overflow: visible; }
.v2-nom .v2-logo-svg { width: 200px; height: auto; }
@media (min-width: 900px) { .v2-nom .v2-logo-svg { width: 260px; } }
.v2-logo-bulle { transition: transform var(--v2-appui) ease; }
.v2-logo:is(:active, .v2-presse) .v2-logo-bulle { transform: translate(14px, 15px); }
/* Monogramme A/B : A en safran, barre oblique crème à 50 %, B en lilas, en Instrument Serif. */
.v2-mono { display: inline-flex; align-items: baseline; margin-right: 0.4em; font-family: var(--v2-serif); font-style: normal; font-weight: 400; line-height: 1; letter-spacing: -0.02em; }
.v2-mono-a { color: var(--v2-camp-a); }
.v2-mono-b { color: var(--v2-camp-b); }
.v2-mono-barre { margin: 0 0.04em; color: var(--v2-barre); }
a.v2-logo { text-decoration: none; }
a.v2-bouton { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.v2-introuvable { padding-top: var(--v2-e8); }
.v2-marque + .v2-titre { margin-top: var(--v2-e16); }
@media (prefers-reduced-motion: reduce) { .v2-logo-bulle { transition: none; } .v2-logo:is(:active, .v2-presse) .v2-logo-bulle { transform: none; } }

/* Ordinateur : les pages au nouveau design quittent la colonne de 520px. Colonne de lecture de 640px par défaut
   (Jouer, Histoire, Réglages, article de l'Actu, 404), 960px pour les pages de listes (.v2-large), voir plus bas. */
@media (min-width: 900px) { body.v2-fond-page .app { max-width: 640px; padding-inline: var(--v2-e32); } }

/* Ordinateur : l'accueil quitte la colonne de 640px (voir « Accueil, le paquet »). */
@media (min-width: 900px) {
  body.v2-page-accueil .app { max-width: none; padding-inline: var(--v2-e32); }
  .v2-accueil { width: 100%; max-width: var(--v2-largeur); margin-inline: auto; }
  .v2-tete { padding-top: var(--v2-e24); }
}

/* Grand écran : Catégories et page d'une catégorie dans un conteneur de 960 px, listes sur deux colonnes */
@media (min-width: 900px) {
  body.v2-page-large .app { max-width: 960px; padding-inline: var(--v2-e32); }
  .v2-large .v2-lignes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--v2-e48); }
  .v2-large .v2-lignes li:nth-child(2) { border-top: var(--v2-trait) solid var(--v2-filet); }
  .v2-large .v2-ligne { width: calc(100% + 2 * var(--v2-e12)); }
  .v2-large .v2-actions { flex-direction: row; align-items: center; gap: var(--v2-e24); }
}

/* ---------- Actu sur papier (chantier 7), gardé pour la feuille d'un article (chantier 8) ----------
   Depuis le chantier 8, l'Actu est sur la table (section « Chantier 8, session Design : l'Actu sur la table ») ;
   ces règles mettent en page l'article et la page des sources, sur une feuille de papier (.ac-feuille.v2-papier).
   Encre verte, liens verts foncés. Safran et lilas (versions papier) seulement pour les thèses A et B. */
body.v2-page-papier { background: var(--v2-papier); }
/* La barre du bas garde sa couleur (#0F3B24, message J) sur toutes les pages. */
.v2-papier { --ap-filet: rgba(13, 53, 32, 0.2); --ap-trait: 1.5px; color: var(--v2-encre); }
.v2-papier :focus-visible { outline-color: var(--v2-encre); }
.v2-papier .v2-mono-a { color: var(--v2-camp-a-papier); }
.v2-papier .v2-mono-b { color: var(--v2-camp-b-papier); }
.v2-papier .v2-mono-barre { color: rgba(13, 53, 32, 0.5); }
.v2-papier .v2-lien { color: var(--v2-lien-papier); }
/* Visuels : photo, ou tuile chiffre clé (crème sur fond table). */
.ap-visuel { display: block; overflow: hidden; border-radius: var(--v2-rayon-carte); }
.ap-photo img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ap-tuile { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--v2-e4); aspect-ratio: 16 / 9; padding: var(--v2-e16); box-sizing: border-box; background: var(--v2-fond); color: var(--v2-texte); }
.ap-tuile-n { font-family: var(--v2-serif); font-size: clamp(44px, 14vw, 88px); line-height: 0.95; color: var(--v2-texte); overflow-wrap: anywhere; }
.ap-tuile-l { font-size: var(--v2-t15); line-height: 1.35; color: var(--v2-texte); }
.ap-tuile-s { font-size: var(--v2-t13); color: var(--v2-texte-2); }
.ap-tuile-moyenne { aspect-ratio: auto; min-height: 160px; }
/* La une */
.ap-une-haut { margin: var(--v2-e16) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--v2-e8) var(--v2-e12); font-size: var(--v2-t13); }
.ap-cat { font-weight: 700; color: var(--v2-encre); }
.ap-cat-date { color: var(--v2-encre-2); }
.ap-chapeau { margin: var(--v2-e8) 0 0; font-size: var(--v2-t17); line-height: 1.45; color: var(--v2-encre-2); }
/* Textes, liens, boutons et états sur papier. */
.ap-section { margin-top: var(--v2-e32); }
.ap-h2 { margin: 0; font-family: var(--v2-serif); font-size: var(--v2-t28); font-weight: 400; line-height: 1.1; color: var(--v2-encre); }
.ap-section > .ap-chapeau { margin-top: var(--v2-e16); }
/* Seule la page « Comment on choisit nos sources » garde un paragraphe : son texte, à l'encre comme ses cinq règles (lot 1, point 4). */
.ap-para { margin: var(--v2-e12) 0 0; font-size: var(--v2-t17); line-height: 1.5; color: var(--v2-encre); max-width: 60ch; }
.ap-actions { margin-top: var(--v2-e24); display: flex; flex-direction: column; gap: var(--v2-e8); }
.ap-bouton { min-height: var(--v2-cible-principale); padding: 0 var(--v2-e32); border: 0; border-radius: var(--v2-rayon); background: var(--v2-encre); color: var(--v2-papier); font-family: var(--v2-sans); font-size: var(--v2-t17); font-weight: 700; }
/* Page d'un article et page des sources (colonne de lecture). */
.ap-figure { margin: var(--v2-e16) 0 0; }
.ap-credit { margin-top: var(--v2-e8); font-size: var(--v2-t13); color: var(--v2-encre-2); }
.ap-credit a { color: var(--v2-lien-papier); }
.ap-article-t { margin: var(--v2-e8) 0 0; font-family: var(--v2-sans); font-size: var(--v2-t28); font-weight: 800; line-height: 1.12; letter-spacing: -0.01em; color: var(--v2-encre); }
.ap-chiffre { margin-top: var(--v2-e16); }
.ap-faits { margin: var(--v2-e16) 0 0; padding-left: var(--v2-e24); display: flex; flex-direction: column; gap: var(--v2-e12); font-size: var(--v2-t17); line-height: 1.5; color: var(--v2-encre); }
.ap-faits li::marker { font-weight: 700; color: var(--v2-encre-2); }
.ap-non-etabli { padding: 0 var(--v2-e8); border: var(--v2-trait) solid var(--v2-encre); border-radius: 999px; font-size: var(--v2-t13); font-weight: 700; white-space: nowrap; }
.ap-raison { display: block; font-size: var(--v2-t13); color: var(--v2-encre-2); }
.ap-renvois { display: flex; flex-wrap: wrap; align-items: center; margin: calc(var(--v2-e12) * -1) 0 calc(var(--v2-e12) * -1) calc(var(--v2-e12) * -1); }
.ap-renvois::before { content: "Sources"; font-size: var(--v2-t13); color: var(--v2-encre-2); padding-left: var(--v2-e12); }
.ap-renvoi { display: inline-flex; align-items: center; justify-content: center; min-width: var(--v2-cible); min-height: var(--v2-cible); vertical-align: middle; font-size: var(--v2-t13); font-weight: 700; color: var(--v2-lien-papier); text-decoration: underline; text-underline-offset: 3px; }
.ap-theses-blocs { margin-top: var(--v2-e16); display: flex; flex-direction: column; gap: var(--v2-e24); }
.ap-these-bloc { border-top: 3px solid var(--v2-encre); padding-top: var(--v2-e12); }
.ap-these-bloc-a { border-top-color: var(--v2-camp-a-papier); }
.ap-these-bloc-b { border-top-color: var(--v2-camp-b-papier); }
.ap-these-t { margin: 0; font-family: var(--v2-sans); font-size: var(--v2-t21); font-weight: 800; }
.ap-these-bloc-a .ap-these-t { color: var(--v2-camp-a-papier); }
.ap-these-bloc-b .ap-these-t { color: var(--v2-camp-b-papier); }
.ap-these-resume { margin: var(--v2-e8) 0 0; font-family: var(--v2-serif); font-style: italic; font-size: var(--v2-t21); line-height: 1.3; color: var(--v2-encre); }
.ap-qui { margin: var(--v2-e8) 0 0; font-size: var(--v2-t15); color: var(--v2-encre-2); }
.ap-arguments { margin: var(--v2-e12) 0 0; padding-left: var(--v2-e16); display: flex; flex-direction: column; gap: var(--v2-e8); font-size: var(--v2-t17); line-height: 1.5; color: var(--v2-encre); }
.ap-attribution { font-size: var(--v2-t15); color: var(--v2-encre-2); }
.ap-these-sources { margin: var(--v2-e8) 0 0; font-size: var(--v2-t13); color: var(--v2-encre-2); }
.ap-sources { list-style: none; margin: var(--v2-e16) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--v2-e12); }
.ap-sources li { scroll-margin-top: var(--v2-e16); }
.ap-source { position: relative; display: grid; grid-template-columns: var(--v2-e32) minmax(0, 1fr); column-gap: var(--v2-e8); row-gap: var(--v2-e4); min-height: var(--v2-cible-principale); padding: var(--v2-e12) var(--v2-e16) var(--v2-e12) var(--v2-e12); border: var(--ap-trait) solid var(--v2-encre); border-radius: var(--v2-rayon-carte); color: var(--v2-encre); text-decoration: none; }
@media (hover: hover) { .ap-source:hover .ap-source-nom { text-decoration: underline; } }
.ap-source-num { grid-row: 1 / span 3; font-family: var(--v2-serif); font-size: var(--v2-t28); line-height: 1; color: var(--v2-encre-2); }
.ap-source-nom { display: inline-flex; align-items: center; gap: var(--v2-e8); font-size: var(--v2-t17); font-weight: 800; color: var(--v2-lien-papier); }
.ap-sortie { width: 16px; height: 16px; flex-shrink: 0; }
.ap-source-niveau { font-size: var(--v2-t13); font-weight: 700; color: var(--v2-encre); }
.ap-source-resume { font-size: var(--v2-t15); line-height: 1.45; color: var(--v2-encre-2); }
.ap-cinq { margin: var(--v2-e24) 0 0; padding-left: var(--v2-e24); display: flex; flex-direction: column; gap: var(--v2-e16); font-size: var(--v2-t17); line-height: 1.5; color: var(--v2-encre); }
@media (min-width: 900px) {
  .ap-article-t { font-size: var(--v2-t44); line-height: 1.04; }
  .ap-theses-blocs { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--v2-e32); align-items: start; }
}

/* ---------- Icônes des thèmes (src/icones.js) ----------
   La gommette partout (28 octobre) : à chaque place d'une icône de thème, la gommette (section « Les gommettes »),
   dans la boîte de l'icône : 24 (en ligne avec du texte), 44, 64 et 96, que les écrans retaillent, jamais sous 24 px.
   Plus de disque de couleur dessous ; les affiches de Catégories gardent leurs illustrations. Toujours décoratives. */
.ic-theme { display: inline-block; flex-shrink: 0; vertical-align: middle; overflow: visible; }
.ic-24 { width: 24px; height: 24px; }
.ic-44 { width: 44px; height: 44px; }
.ic-64 { width: 64px; height: 64px; }
.ic-96 { width: 96px; height: 96px; }

/* Planche des huit gommettes (démo) : 96, 64, 44 et 24 px, sur la table puis sur le papier. */
.ic-planche-fond { margin-top: var(--v2-e32); padding: var(--v2-e24) var(--v2-e16); border-radius: var(--v2-rayon-carte); border: var(--v2-trait) solid var(--v2-filet); }
.ic-planche-fond .v2-intertitre { margin-top: 0; }
.ic-planche-papier { background: var(--v2-papier); color: var(--v2-encre); border-color: transparent; }
.ic-planche-papier .v2-intertitre { color: var(--v2-encre); }
.ic-planche-grille { list-style: none; margin: var(--v2-e24) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--v2-e24) var(--v2-e16); }
.ic-planche-grille li { display: flex; flex-direction: column; align-items: flex-start; gap: var(--v2-e12); font-size: var(--v2-t15); }
.ic-planche-ligne { margin: var(--v2-e24) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--v2-e12); font-size: var(--v2-t13); color: var(--v2-texte-2); }
.ic-planche-papier .ic-planche-ligne { color: var(--v2-encre-2); }
.ic-planche-legende { flex-basis: 100%; }
.ic-planche-carte { margin: var(--v2-e16) 0 0; display: flex; align-items: center; gap: var(--v2-e8); font-size: var(--v2-t13); }
@media (min-width: 900px) {
  .ic-planche-grille { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .ic-planche-legende { flex-basis: auto; margin-left: var(--v2-e8); }
}

/* ---------- Chantier 8, session Design : carte d'un article de l'Actu ----------
   Papier posé sur la table, comme une coupure de journal : le visuel en retrait de 8px, le thème et son icône,
   le titre en gras, « Thèse A, Thèse B, 5 sources » (A et B aux couleurs des camps, version papier). */
.ac-carte { position: relative; display: flex; flex-direction: column; padding: var(--v2-e8) var(--v2-e8) 0; border-radius: var(--v2-rayon-carte); background: var(--v2-papier); color: var(--v2-encre); font-family: var(--v2-sans); }
.ac-visuel { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; }
.ac-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ac-exemple { position: absolute; top: var(--v2-e8); left: var(--v2-e8); padding: 2px var(--v2-e8); border-radius: 4px; background: var(--v2-papier); color: var(--v2-encre); font-size: var(--v2-t13); font-weight: 700; }
.ac-tuile { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--v2-e4); box-sizing: border-box; padding: var(--v2-e12) var(--v2-e16); background: var(--v2-fond); color: var(--v2-texte); }
.ac-tuile-n { font-family: var(--v2-serif); font-size: var(--v2-t28); line-height: 1; }
.ac-tuile-une .ac-tuile-n { font-size: var(--v2-t44); }
.ac-tuile-l { font-size: var(--v2-t13); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ac-tuile-s { font-size: var(--v2-t13); color: var(--v2-texte-2); }
.ac-tuile-theme { align-items: center; justify-content: center; }
.ac-theme { margin: var(--v2-e12) var(--v2-e8) 0; display: flex; align-items: center; gap: var(--v2-e8); font-size: var(--v2-t13); font-weight: 700; }
.ac-titre { margin: var(--v2-e4) var(--v2-e8) 0; font-size: var(--v2-t17); font-weight: 800; line-height: 1.25; letter-spacing: -0.005em; }
.ac-lien { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; padding: 0; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ac-lien::after { content: ""; position: absolute; inset: 0; border-radius: var(--v2-rayon-carte); }
.ac-lien:focus-visible { outline: var(--v2-focus) solid var(--v2-encre); outline-offset: var(--v2-focus-ecart); border-radius: 4px; }
@media (hover: hover) { .ac-carte:hover .ac-lien { text-decoration: underline; text-decoration-thickness: var(--v2-trait); text-underline-offset: 3px; } }
.ac-chapeau { margin: var(--v2-e8) var(--v2-e8) 0; font-size: var(--v2-t15); line-height: 1.45; color: var(--v2-encre-2); }
.ac-pied { margin: auto var(--v2-e8) 0; padding: var(--v2-e8) 0 var(--v2-e16); font-size: var(--v2-t13); color: var(--v2-encre-2); }
.ac-a { font-weight: 700; color: var(--v2-camp-a-papier); }
.ac-b { font-weight: 700; color: var(--v2-camp-b-papier); }

/* ---------- Chantier 8, session Design : l'Actu sur la table ----------
   Fond vert, comme le jeu. Des cartes de papier posées dessus (.ac-carte, plus haut) : une grande carte à la une,
   « Aussi aujourd'hui » à côté sur ordinateur, puis une rangée de cartes par thème qui défile de côté.
   Un article s'ouvre sur une feuille de papier (.ac-feuille), qui garde la mise en page .ap-* du chantier 7. */
.v2-actu { color: var(--v2-texte); }
.ac-tete { margin-top: var(--v2-e16); }
.ac-date { margin: 0; display: flex; flex-wrap: wrap; column-gap: var(--v2-e8); font-size: var(--v2-t13); color: var(--v2-texte-2); }
.ac-titre-page { margin: var(--v2-e8) 0 0; font-family: var(--v2-serif); font-size: var(--v2-t44); font-weight: 400; line-height: 1.04; color: var(--v2-texte); }
.ac-pastilles { margin: var(--v2-e16) calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) var(--v2-e4); display: flex; gap: var(--v2-e8); overflow-x: auto; scrollbar-width: none; }
.ac-pastilles::-webkit-scrollbar { display: none; }
.ac-pastille { flex-shrink: 0; min-height: var(--v2-cible); display: inline-flex; align-items: center; gap: var(--v2-e8); padding: 0 var(--v2-e16) 0 var(--v2-e12); border: var(--v2-trait) solid var(--v2-filet); border-radius: 999px; background: none; color: var(--v2-texte); font-family: var(--v2-sans); font-size: var(--v2-t15); font-weight: 600; white-space: nowrap; cursor: pointer; }
.ac-pastille:first-child { padding-left: var(--v2-e16); }
.ac-pastille[aria-pressed="true"] { border-color: var(--v2-papier); background: var(--v2-papier); color: var(--v2-encre); }
@media (hover: hover) { .ac-pastille:hover { background: var(--v2-survol); } .ac-pastille[aria-pressed="true"]:hover { background: var(--v2-papier); } }
.ac-fictif { margin: var(--v2-e16) 0 0; padding-left: var(--v2-e12); border-left: var(--v2-focus) solid var(--v2-texte); font-size: var(--v2-t15); font-weight: 700; color: var(--v2-texte); }
.ac-h2 { margin: 0; font-family: var(--v2-serif); font-size: var(--v2-t28); font-weight: 400; line-height: 1.1; color: var(--v2-texte); }
/* La une : grande carte, chapeau, les deux thèses en une phrase, diversité des sources. */
.ac-une-grille { margin-top: var(--v2-e24); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v2-e32); align-items: start; }
.ac-corps { display: flex; flex: 1; flex-direction: column; }
.ac-carte-une .ac-titre { font-size: var(--v2-t28); line-height: 1.1; letter-spacing: -0.01em; }
.ac-carte-une .ac-lien { display: block; -webkit-line-clamp: unset; overflow: visible; }
.ac-etiquette { padding: 2px var(--v2-e8); border-radius: 999px; background: var(--v2-menthe); color: var(--v2-encre); font-weight: 700; }
.ac-theses { margin: var(--v2-e12) var(--v2-e8) 0; display: flex; flex-direction: column; gap: var(--v2-e4); font-size: var(--v2-t15); line-height: 1.45; color: var(--v2-encre); }
.ac-these b { font-weight: 700; }
.ac-these-a b { color: var(--v2-camp-a-papier); }
.ac-these-b b { color: var(--v2-camp-b-papier); }
/* Date d'un sujet des jours précédents : sur sa propre ligne, sous le thème. */
.ac-theme:has(.ac-date-carte) { flex-wrap: wrap; row-gap: 0; }
.ac-date-carte { flex-basis: 100%; padding-left: calc(24px + var(--v2-e8)); font-weight: 400; color: var(--v2-encre-2); }
/* Petites cartes : le chiffre et sa légende ; la source du chiffre est dans l'article. */
.ac-carte:not(.ac-carte-une) .ac-tuile-s { display: none; }
/* Aussi aujourd'hui : sur la table, une liste à filets ; chaque ligne ouvre l'article. */
.ac-aussi-t { margin: 0; font-size: var(--v2-t15); font-weight: 800; color: var(--v2-texte); }
.ac-aussi-l { list-style: none; margin: var(--v2-e8) 0 0; padding: 0; border-top: var(--v2-trait) solid var(--v2-filet); }
.ac-aussi-l li { border-bottom: var(--v2-trait) solid var(--v2-filet); }
.ac-aussi-lien { width: 100%; min-height: var(--v2-cible); display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--v2-e12); align-items: start; padding: var(--v2-e12) 0; background: none; border: 0; color: var(--v2-texte); font-family: var(--v2-sans); text-align: left; cursor: pointer; }
.ac-aussi-th { display: block; font-size: var(--v2-t13); color: var(--v2-texte-2); }
.ac-aussi-lien b { display: block; margin-top: 2px; font-size: var(--v2-t17); font-weight: 700; line-height: 1.25; }
@media (hover: hover) { .ac-aussi-lien:hover b { text-decoration: underline; text-decoration-thickness: var(--v2-trait); text-underline-offset: 3px; } }
/* Rangées : titre du thème avec son icône et un chevron, cartes qui défilent de côté, accrochées au bord. */
.ac-rangee { margin-top: var(--v2-e48); }
.ac-chevron { width: var(--v2-icone); height: var(--v2-icone); color: var(--v2-menthe); }
.ac-defile { list-style: none; margin: var(--v2-e12) calc(-1 * var(--gutter)) 0; padding: var(--v2-e4) var(--gutter) var(--v2-e12); display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 280px); gap: var(--v2-e16); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.ac-defile::-webkit-scrollbar { display: none; }
.ac-defile > li { scroll-snap-align: start; }
.ac-defile-themes { grid-auto-columns: min(84%, 320px); }
.ac-rangee > .v2-para { margin-top: var(--v2-e8); }
.ac-section { margin-top: var(--v2-e48); }
.ac-section-une { margin-top: var(--v2-e16); max-width: 640px; }
.ac-grille { list-style: none; margin: var(--v2-e16) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v2-e16); }
/* Carte d'un thème à débattre : tuile verte et grande icône, nom en serif, phrase, deux sujets qui lancent le débat. */
.ac-carte-theme .ac-tuile-theme, .ac-carte-theme .ac-photo-debat { aspect-ratio: 5 / 2; }
.ac-photo-debat img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ac-carte-theme .ac-titre { font-family: var(--v2-serif); font-size: var(--v2-t28); font-weight: 400; line-height: 1.1; }
.ac-recit { margin: var(--v2-e4) var(--v2-e8) 0; font-size: var(--v2-t15); line-height: 1.45; color: var(--v2-encre-2); }
.ac-sujets-t { margin: var(--v2-e12) var(--v2-e8) 0; font-size: var(--v2-t13); font-weight: 700; color: var(--v2-encre); }
.ac-sujets { list-style: none; margin: var(--v2-e4) 0 var(--v2-e8); padding: 0; }
.ac-sujet { position: relative; z-index: 1; width: 100%; min-height: var(--v2-cible); padding: var(--v2-e8); background: none; border: 0; border-top: var(--v2-trait) solid rgba(13, 53, 32, 0.2); color: var(--v2-lien-papier); font-family: var(--v2-serif); font-size: var(--v2-t17); line-height: 1.3; text-align: left; text-decoration: underline; text-decoration-thickness: var(--v2-trait); text-underline-offset: 3px; cursor: pointer; }
.ac-sujet:focus-visible { outline: var(--v2-focus) solid var(--v2-encre); outline-offset: -2px; border-radius: 4px; }
/* Article et page des sources : une feuille de papier sur la table. */
.ac-feuille { margin-top: var(--v2-e16); padding: var(--v2-e8) var(--v2-e16) var(--v2-e32); border-radius: var(--v2-rayon-carte); background: var(--v2-papier); }
.ac-feuille .ap-une-haut { color: var(--v2-encre); }
.ap-debat { margin-top: var(--v2-e32); padding-top: var(--v2-e24); border-top: 1.5px solid var(--v2-encre); }
.ac-pied-page { margin: var(--v2-e32) 0 0; }
.v2-actu > .v2-actions { margin-top: var(--v2-e32); }
@media (min-width: 900px) {
  .ac-pastilles { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; overflow: visible; }
  .ac-une-grille { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .ac-carte-une .ac-titre { font-size: var(--v2-t44); line-height: 1.04; }
  .ac-defile { margin-inline: 0; padding-inline: 0 var(--v2-e4); grid-auto-columns: calc((100% - 3 * var(--v2-e16)) / 4); scroll-padding-inline: 0; scrollbar-width: thin; scrollbar-color: var(--v2-filet) transparent; }
  .ac-defile-themes { grid-auto-columns: calc((100% - 2 * var(--v2-e16)) / 3); }
  .ac-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--v2-e24); }
  .ac-feuille { padding: var(--v2-e16) var(--v2-e32) var(--v2-e48); }
}
/* « À lire dans l'Actu » : au bilan d'un débat, le dernier sujet de l'Actu dans le thème débattu. */
.ac-a-lire { margin-top: var(--v2-e32); color: var(--v2-texte); }
.ac-a-lire-t { margin: 0; font-family: var(--v2-serif); font-size: var(--v2-t28); font-weight: 400; line-height: 1.1; color: var(--v2-texte); }
.ac-a-lire-carte { margin-top: var(--v2-e16); max-width: 420px; }

/* ---------- Chantier 8, session Design : écrans de jeu (étape 6) ----------
   La table (fond vert) porte le jeu ; les cartes sont du papier ; A et B s'écrivent en Instrument Serif, safran
   pour A, lilas pour B (versions papier sur le papier). Menthe pour les actions et l'état actif seulement.
   Deux tailles hors échelle, réservées au jeu : les chiffres du chrono (72px) et la grande lettre du camp qui
   parle, avec le décompte de reprise et le score du solo (88px). Tout mouvement est coupé en mouvement réduit. */
.jeu, .sheet { --jeu-2: var(--v2-texte-2); --jeu-filet: var(--v2-filet); }
.jeu { gap: var(--v2-e24); padding-bottom: var(--v2-e32); }
.jeu p { margin: 0; }
/* En tête de partie : retour, manche et Arbitre, scores, règles, pause. Collé en haut pendant le défilement. */
.jeu-tete { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--v2-e8); padding: calc(env(safe-area-inset-top, 0px) + var(--v2-e8)) 0 var(--v2-e8); background: var(--v2-fond); border-bottom: var(--v2-trait) solid var(--v2-filet); }
.jeu-ou { font-size: var(--v2-t13); line-height: 1.35; color: var(--v2-texte-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jeu-ou b { font-weight: 600; color: var(--v2-texte); }
.jeu-code { font-weight: 700; letter-spacing: 0.08em; color: var(--v2-texte); }
.jeu-ics { display: flex; align-items: center; gap: var(--v2-e4); }
.jeu-ic { min-width: var(--v2-cible); height: var(--v2-cible); display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 var(--v2-e8); border: 0; border-radius: 999px; background: none; color: var(--v2-texte); font-family: var(--v2-sans); font-size: var(--v2-t15); font-weight: 600; cursor: pointer; }
.jeu-ic svg { width: 20px; height: 20px; flex-shrink: 0; }
.jeu-ic-score { padding: 0 var(--v2-e12); border: var(--v2-trait) solid var(--v2-filet); }
.jeu-ic-pause { color: var(--v2-texte-2); }
@media (hover: hover) { .jeu-ic:hover { background: var(--v2-survol); } }
.jeu-tete-solo .jeu-ou { text-align: center; font-size: var(--v2-t15); font-weight: 600; color: var(--v2-texte); }
.jeu-retour { gap: var(--v2-e4); padding-left: 0; }
.jeu-retour svg { width: 18px; height: 18px; }
/* Textes */
.jeu-titre { margin: var(--v2-e8) 0 0; display: flex; align-items: baseline; flex-wrap: wrap; column-gap: var(--v2-e12); font-family: var(--v2-serif); font-size: var(--v2-t28); font-weight: 400; line-height: 1.1; color: var(--v2-texte); }
.jeu-titre-n { color: var(--v2-texte-2); }
.jeu-titre-x { font-family: var(--v2-sans); font-size: var(--v2-t15); color: var(--v2-texte-2); }
.jeu-grand { margin: 0; font-family: var(--v2-serif); font-size: var(--v2-t44); font-weight: 400; line-height: 1.04; color: var(--v2-texte); overflow-wrap: anywhere; }
.jeu-intertitre { margin: 0; font-family: var(--v2-serif); font-size: var(--v2-t28); font-weight: 400; line-height: 1.1; color: var(--v2-texte); }
.jeu-para { font-size: var(--v2-t17); line-height: 1.5; color: var(--jeu-2); }
.jeu-note { font-size: var(--v2-t13); line-height: 1.45; color: var(--jeu-2); }
.jeu-centre { text-align: center; }
.jeu-section { display: flex; flex-direction: column; gap: var(--v2-e16); }
.jeu-q { font-family: var(--v2-serif); font-size: var(--v2-t21); line-height: 1.25; text-align: center; color: var(--v2-texte); }
.jeu-gauche { text-align: left; }
/* Actions */
.jeu-actions { display: flex; flex-direction: column; gap: var(--v2-e8); }
.jeu-actions.jeu-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jeu .v2-bouton:disabled, .jeu .v2-bouton-second:disabled, .sheet .v2-bouton:disabled, .sheet .v2-bouton-second:disabled { opacity: 0.5; cursor: not-allowed; }
.jeu-liens { display: flex; flex-wrap: wrap; justify-content: center; column-gap: var(--v2-e24); }
.jeu-libre { display: grid; gap: var(--v2-e8); }
.jeu-libre .v2-label { margin: 0; }
.jeu-attente { display: flex; align-items: center; gap: var(--v2-e12); padding: var(--v2-e12) var(--v2-e16); border: var(--v2-trait) solid var(--v2-filet); border-radius: var(--v2-rayon); font-size: var(--v2-t15); color: var(--v2-texte-2); }
.jeu-attente-point { width: 8px; height: 8px; flex-shrink: 0; border-radius: 99px; background: var(--v2-texte-2); animation: pulse 1.2s ease-in-out infinite; }
.jeu-bouton-ic { display: inline-flex; align-items: center; justify-content: center; gap: var(--v2-e8); }
.jeu-bouton-ic svg { width: 20px; height: 20px; }
/* Rôle (en ligne) : un filet à gauche, à la couleur du camp pour un débatteur. */
.jeu-role-bandeau { display: grid; gap: 2px; padding: var(--v2-e12) var(--v2-e16); border-left: 3px solid var(--v2-texte); background: var(--v2-survol); }
.jeu-role-bandeau .jeu-role-k { font-size: var(--v2-t13); color: var(--v2-texte-2); }
.jeu-role-bandeau b { font-size: var(--v2-t21); font-weight: 600; color: var(--v2-texte); }
.jeu-role-bandeau > span:last-child { font-size: var(--v2-t15); color: var(--v2-texte-2); }
.jeu-role-camp-a { border-left-color: var(--v2-camp-a); }
.jeu-role-camp-b { border-left-color: var(--v2-camp-b); }
/* Lettres A et B */
.jeu-lettre { font-family: var(--v2-serif); font-style: normal; font-weight: 400; line-height: 1; }
.jeu-lettre-a { color: var(--v2-camp-a); }
.jeu-lettre-b { color: var(--v2-camp-b); }
.jeu-lettre-m { font-size: var(--v2-t28); }
.jeu-lettre-g { font-size: var(--v2-t44); }
.jeu-lettre-xl { font-size: 88px; line-height: 0.85; }
/* Cartes de papier : carte commune (la question), carte de camp avec son rail, carte de quiz. */
.jeu-carte { position: relative; display: flex; flex-direction: column; gap: var(--v2-e12); padding: var(--v2-e24) var(--v2-e24) var(--v2-e24) var(--v2-e24); border-radius: var(--v2-rayon-carte); background: var(--v2-papier); color: var(--v2-encre); font-family: var(--v2-sans); --jeu-2: var(--v2-encre-2); --jeu-filet: rgba(13, 53, 32, 0.2); }
.jeu-carte p, .jeu-carte h2, .jeu-carte h3 { margin: 0; }
.jeu-carte .jeu-lettre-a { color: var(--v2-camp-a-papier); }
.jeu-carte .jeu-lettre-b { color: var(--v2-camp-b-papier); }
.jeu-carte-de-camp { padding-left: calc(var(--v2-e24) + 6px); }
.jeu-carte-de-camp::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; border-radius: var(--v2-rayon-carte) 0 0 var(--v2-rayon-carte); background: var(--v2-encre); }
.jeu-rail-a::before { background: var(--v2-camp-a-papier); }
.jeu-rail-b::before { background: var(--v2-camp-b-papier); }
.jeu-carte-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--v2-e4) var(--v2-e12); font-size: var(--v2-t13); color: var(--v2-encre-2); }
.jeu-carte-meta span:first-child { font-weight: 700; color: var(--v2-encre); }
.jeu-carte-sous { font-size: var(--v2-t13); color: var(--v2-encre-2); }
.jeu-crete { align-self: flex-start; padding: 2px var(--v2-e12); border: var(--v2-trait) solid var(--v2-encre); border-radius: 999px; font-size: var(--v2-t13); font-weight: 700; }
.jeu-carte-q { font-family: var(--v2-serif); font-size: var(--v2-t28); font-weight: 400; line-height: 1.1; color: var(--v2-encre); }
.jeu-carte-note { font-size: var(--v2-t15); line-height: 1.45; color: var(--v2-encre-2); }
.jeu-carte-camp { display: flex; align-items: center; flex-wrap: wrap; gap: var(--v2-e8); padding-top: var(--v2-e12); border-top: var(--v2-trait) solid var(--jeu-filet); font-size: var(--v2-t15); font-weight: 700; }
.jeu-carte-camp .jeu-lettre { font-size: var(--v2-t28); }
.jeu-carte-ctx { font-size: var(--v2-t17); line-height: 1.5; }
.jeu-carte-h { margin-top: var(--v2-e4) !important; font-size: var(--v2-t15); font-weight: 800; }
.jeu-axes { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: var(--v2-e12); }
.jeu-axes li b { display: block; font-size: var(--v2-t17); font-weight: 700; line-height: 1.3; }
.jeu-axes li > span { display: block; margin-top: 2px; font-size: var(--v2-t15); line-height: 1.45; color: var(--jeu-2); }
.jeu-faits { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: var(--v2-e8); font-size: var(--v2-t15); line-height: 1.45; }
.jeu-statut { display: inline-block; margin-left: 6px; padding: 0 var(--v2-e8); border: var(--v2-trait) solid var(--jeu-filet); border-radius: 999px; font-size: var(--v2-t13); font-weight: 700; color: var(--jeu-2); vertical-align: 1px; }
.jeu-statut.on { border-color: transparent; background: var(--v2-menthe); color: var(--v2-encre); }
/* Volet des deux cartes, pour l'Arbitre et le Jury. */
.jeu-volet { border-top: var(--v2-trait) solid var(--v2-filet); border-bottom: var(--v2-trait) solid var(--v2-filet); }
.jeu-volet > summary { min-height: var(--v2-cible-principale); display: flex; align-items: center; justify-content: space-between; gap: var(--v2-e16); padding: var(--v2-e8) 0; cursor: pointer; list-style: none; }
.jeu-volet > summary::-webkit-details-marker { display: none; }
.jeu-volet > summary::after { content: "+"; font-size: var(--v2-t21); color: var(--v2-menthe); }
.jeu-volet[open] > summary::after { content: "×"; }
.jeu-volet > summary b { display: block; font-size: var(--v2-t17); font-weight: 600; color: var(--v2-texte); }
.jeu-volet-note { display: block; margin-top: 2px; font-size: var(--v2-t13); color: var(--v2-texte-2); }
.jeu-volet-corps { display: flex; flex-direction: column; gap: var(--v2-e16); padding-bottom: var(--v2-e16); }
/* Tirage : Arbitre, les deux camps face à face, Jury. */
.jeu-roles { display: flex; flex-direction: column; gap: var(--v2-e8); padding: var(--v2-e12) 0; border-top: var(--v2-trait) solid var(--v2-filet); border-bottom: var(--v2-trait) solid var(--v2-filet); }
.jeu-role { display: flex; justify-content: space-between; align-items: baseline; gap: var(--v2-e12); font-size: var(--v2-t15); }
.jeu-role .jeu-role-k { color: var(--v2-texte-2); }
.jeu-role b { font-size: var(--v2-t17); font-weight: 600; text-align: right; overflow-wrap: anywhere; color: var(--v2-texte); }
.jeu-camps { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: var(--v2-e12); padding: var(--v2-e8) 0; }
.jeu-camp { display: flex; flex-direction: column; align-items: center; gap: var(--v2-e4); min-width: 0; text-align: center; }
.jeu-camp-k { font-size: var(--v2-t13); color: var(--v2-texte-2); }
.jeu-camp b { font-size: var(--v2-t21); font-weight: 600; color: var(--v2-texte); overflow-wrap: anywhere; }
.jeu-camp-attente b { font-size: var(--v2-t15); font-weight: 400; color: var(--v2-texte-2); }
.jeu-camps-barre { font-family: var(--v2-serif); font-size: var(--v2-t44); line-height: 1; color: var(--v2-barre); }
/* Tirage qui alterne : les deux prénoms (ou les deux lettres) échangent leur place trois fois, puis se posent. */
.jeu-alterne { display: grid; justify-items: center; }
.jeu-alterne > * { grid-area: 1 / 1; }
.jeu-nom-leurre { opacity: 0; }
.jeu-alterne-anim .jeu-nom-final { animation: jeu-alt-final 280ms steps(1, end) 3; }
.jeu-alterne-anim .jeu-nom-leurre { animation: jeu-alt-leurre 280ms steps(1, end) 3; }
@keyframes jeu-alt-final { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 1; } }
@keyframes jeu-alt-leurre { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } }
/* Passage du téléphone, et camp du joueur seul. */
.jeu-passage { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--v2-e16); padding: var(--v2-e16) var(--v2-e24); border: var(--v2-trait) solid var(--v2-filet); border-left-width: 3px; border-radius: 0 var(--v2-rayon-carte) var(--v2-rayon-carte) 0; }
.jeu-passage.jeu-camp-a { border-left-color: var(--v2-camp-a); }
.jeu-passage.jeu-camp-b { border-left-color: var(--v2-camp-b); }
.jeu-passage > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jeu-passage b { font-size: var(--v2-t21); font-weight: 600; overflow-wrap: anywhere; }
.jeu-passage > div > span:last-child { font-size: var(--v2-t15); color: var(--v2-texte-2); }
.jeu-alterne-lettre { justify-items: start; }
.jeu-lecture { display: flex; justify-content: space-between; align-items: center; gap: var(--v2-e12); }
.jeu-lecture p { display: flex; align-items: center; gap: var(--v2-e12); font-size: var(--v2-t15); color: var(--v2-texte-2); }
.jeu-lecture p b { color: var(--v2-texte); }
.jeu-lecture .jeu-lettre { font-size: var(--v2-t44); }
.jeu-mini { font-size: var(--v2-t28); font-weight: 700; color: var(--v2-texte); }
.jeu-camp-a .jeu-mini { color: var(--v2-camp-a); }
.jeu-camp-b .jeu-mini { color: var(--v2-camp-b); }
/* Chrono du camp qui parle : arc à la couleur du camp ; sous 10 secondes, chiffres à la couleur du camp et pulsation. */
.jeu-chrono { position: relative; width: min(64vw, 240px); aspect-ratio: 1; margin: 0 auto; }
.jeu-chrono svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.jeu-chrono-piste { fill: none; stroke: var(--v2-filet); stroke-width: 8; }
.jeu-chrono-arc { fill: none; stroke: var(--v2-texte); stroke-width: 8; stroke-linecap: round; }
.jeu-chrono-a .jeu-chrono-arc { stroke: var(--v2-camp-a); }
.jeu-chrono-b .jeu-chrono-arc { stroke: var(--v2-camp-b); }
.jeu-chrono-t { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.jeu-chrono-t b { font-size: 72px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--v2-texte); }
.jeu-chrono-t span { margin-top: var(--v2-e4); font-size: var(--v2-t15); color: var(--v2-texte-2); }
.jeu-chrono-a.low .jeu-chrono-t b { color: var(--v2-camp-a); }
.jeu-chrono-b.low .jeu-chrono-t b { color: var(--v2-camp-b); }
.jeu-chrono.low .jeu-chrono-t b { animation: jeu-pouls 1s ease-in-out infinite; }
.jeu-chrono.low .jeu-chrono-arc { animation: jeu-pouls-arc 1s ease-in-out infinite; }
@keyframes jeu-pouls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes jeu-pouls-arc { 0%, 100% { stroke-width: 8; } 50% { stroke-width: 11; } }
/* Qui parle */
.jeu-orateur { display: flex; flex-direction: column; align-items: center; gap: var(--v2-e4); text-align: center; }
.jeu-orateur-nom { font-size: var(--v2-t28); font-weight: 700; line-height: 1.15; color: var(--v2-texte); overflow-wrap: anywhere; }
.jeu-orateur > span:last-child { font-size: var(--v2-t15); color: var(--v2-texte-2); }
.jeu-fini-l { display: flex; align-items: baseline; gap: var(--v2-e8); font-size: var(--v2-t44); }
.jeu-fini-l .jeu-lettre { font-size: var(--v2-t44); }
.jeu-a-toi { padding: var(--v2-e12) var(--v2-e16); border: 2px solid var(--v2-texte); border-radius: var(--v2-rayon); text-align: center; font-size: var(--v2-t17); font-weight: 700; color: var(--v2-texte); }
.jeu-a-toi.jeu-camp-a { border-color: var(--v2-camp-a); }
.jeu-a-toi.jeu-camp-b { border-color: var(--v2-camp-b); }
/* Culture générale */
.jeu-reponse { display: flex; flex-direction: column; gap: var(--v2-e4); padding: var(--v2-e12) var(--v2-e16); border-left: 3px solid var(--v2-encre); background: rgba(13, 53, 32, 0.06); }
.jeu-reponse span { font-size: var(--v2-t13); font-weight: 700; color: var(--v2-encre-2); }
.jeu-reponse b { font-family: var(--v2-serif); font-size: var(--v2-t28); font-weight: 400; line-height: 1.1; }
.jeu-cachee { width: 100%; min-height: var(--v2-cible-principale); border: 1.5px dashed var(--v2-encre); border-radius: var(--v2-rayon); background: none; color: var(--v2-encre); font-family: var(--v2-sans); font-size: var(--v2-t17); font-weight: 600; cursor: pointer; }
.jeu-qui { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--v2-e8); }
.jeu-qui .v2-bouton-second { padding: 0 var(--v2-e12); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Décision de l'Arbitre sur un biais : trois choix, chacun dit ce qu'il rapporte. */
.jeu-decision { display: flex; flex-direction: column; gap: var(--v2-e8); }
.jeu-decide { width: 100%; min-height: 64px; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; column-gap: var(--v2-e12); padding: var(--v2-e8) var(--v2-e16) var(--v2-e8) var(--v2-e8); border: var(--v2-trait) solid var(--v2-filet); border-radius: var(--v2-rayon); background: none; color: var(--v2-texte); font-family: var(--v2-sans); text-align: left; cursor: pointer; }
.jeu-decide > .jeu-lettre { font-size: var(--v2-t44); text-align: center; }
.jeu-decide-a { border-left: 3px solid var(--v2-camp-a); }
.jeu-decide-b { border-left: 3px solid var(--v2-camp-b); }
.jeu-decide b { display: block; font-size: var(--v2-t17); font-weight: 600; overflow-wrap: anywhere; }
.jeu-decide > span:last-child > span { display: block; font-size: var(--v2-t13); color: var(--v2-texte-2); }
.jeu-decide-x { display: grid; place-items: center; color: var(--v2-texte-2); }
.jeu-decide-x svg { width: 22px; height: 22px; }
@media (hover: hover) { .jeu-decide:hover { background: var(--v2-survol); } }
.jeu-decide:active { background: var(--v2-survol); }
.jeu-signal { display: flex; flex-direction: column; gap: var(--v2-e8); padding: var(--v2-e16); border: var(--v2-trait) solid var(--v2-filet); border-radius: var(--v2-rayon-carte); font-size: var(--v2-t15); }
.jeu-signal-t { margin: 0; font-family: var(--v2-serif); font-size: var(--v2-t21); font-weight: 400; }
.jeu-signal-d { color: var(--v2-texte-2); }
/* Notation : une grille par camp, filet du haut à la couleur du camp, cases à cocher en menthe. */
.jeu-grilles { display: flex; flex-direction: column; gap: var(--v2-e16); }
.jeu-grille { border: var(--v2-trait) solid var(--v2-filet); border-top: 3px solid var(--v2-texte); border-radius: var(--v2-rayon-carte); overflow: hidden; }
.jeu-grille.jeu-camp-a { border-top-color: var(--v2-camp-a); }
.jeu-grille.jeu-camp-b { border-top-color: var(--v2-camp-b); }
.jeu-grille > header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--v2-e12); padding: var(--v2-e12) var(--v2-e16); border-bottom: var(--v2-trait) solid var(--v2-filet); }
.jeu-grille > header b { font-size: var(--v2-t21); font-weight: 600; overflow-wrap: anywhere; }
.jeu-grille-pts { font-size: var(--v2-t17); font-weight: 700; color: var(--v2-menthe); white-space: nowrap; }
.jeu-case { width: 100%; min-height: var(--v2-cible-principale); display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--v2-e12); align-items: start; padding: var(--v2-e12) var(--v2-e16); border: 0; border-bottom: var(--v2-trait) solid var(--v2-filet); background: none; color: var(--v2-texte); font-family: var(--v2-sans); text-align: left; }
button.jeu-case { cursor: pointer; }
.jeu-case:last-child { border-bottom: 0; }
.jeu-case b { display: block; font-size: var(--v2-t17); font-weight: 600; }
.jeu-case > span:last-child > span { display: block; margin-top: 2px; font-size: var(--v2-t15); line-height: 1.4; color: var(--v2-texte-2); }
.jeu-boite { width: 26px; height: 26px; box-sizing: border-box; margin-top: 1px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--v2-texte-2); border-radius: 6px; }
.jeu-boite svg { width: 18px; height: 18px; color: var(--v2-sur-menthe); opacity: 0; }
.jeu-case[aria-pressed="true"] .jeu-boite { background: var(--v2-menthe); border-color: var(--v2-menthe); }
.jeu-case[aria-pressed="true"] .jeu-boite svg { opacity: 1; }
@media (hover: hover) { button.jeu-case:hover { background: var(--v2-survol); } }
/* Journal de la manche */
.jeu-journal { padding-top: var(--v2-e12); border-top: var(--v2-trait) solid var(--v2-filet); }
/* Après le volet des cartes, son filet du bas suffit. */
.jeu-volet + .jeu-journal { border-top: 0; padding-top: 0; }
.jeu-journal-t { margin: 0; font-size: var(--v2-t15); font-weight: 700; color: var(--v2-texte); }
.jeu-journal ul { list-style: none; margin: var(--v2-e8) 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.jeu-journal li { display: flex; gap: var(--v2-e8); font-size: var(--v2-t15); color: var(--v2-texte-2); }
.jeu-journal .pos { font-weight: 700; color: var(--v2-menthe); }
/* Scores */
.jeu-scores { list-style: none; margin: 0; padding: 0; border-top: var(--v2-trait) solid var(--jeu-filet); }
.jeu-score { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: var(--v2-e12); row-gap: 6px; align-items: center; padding: var(--v2-e12) 0; border-bottom: var(--v2-trait) solid var(--jeu-filet); }
.jeu-score-rang { font-size: var(--v2-t15); font-weight: 600; text-align: center; color: var(--v2-texte-2); }
.jeu-score-tete .jeu-score-rang { color: var(--v2-menthe); }
.jeu-score-nom { min-width: 0; }
.jeu-score-nom b { display: block; font-size: var(--v2-t17); font-weight: 600; overflow-wrap: anywhere; color: var(--v2-texte); }
.jeu-score-nom span { display: block; font-size: var(--v2-t13); color: var(--v2-texte-2); }
.jeu-score-pts { text-align: right; }
.jeu-score-pts b { display: block; font-size: var(--v2-t21); font-weight: 700; color: var(--v2-texte); }
.jeu-score-pts span { display: block; font-size: var(--v2-t13); font-weight: 700; color: var(--v2-texte-2); }
.jeu-score-pts .pos { color: var(--v2-menthe); }
.jeu-score-rail { grid-column: 2 / -1; display: block; width: 100%; height: 4px; }
.jeu-suivante { display: flex; flex-direction: column; gap: var(--v2-e8); font-size: var(--v2-t17); color: var(--v2-texte); }
/* Récap : les deux cartes de papier inclinées ; celle qu'on découvre porte « Révélée » et se retourne en 400 ms. */
.jeu-recap { display: flex; flex-direction: column; gap: var(--v2-e16); }
.jeu-recap-meta { font-size: var(--v2-t13); color: var(--v2-texte-2); }
.jeu-recap-q { font-family: var(--v2-serif); font-size: var(--v2-t21); line-height: 1.25; color: var(--v2-texte); }
.jeu-recap-h { margin: var(--v2-e8) 0 0; font-size: var(--v2-t17); font-weight: 700; color: var(--v2-texte); }
.jeu-table-cartes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v2-e24); padding: var(--v2-e8) var(--v2-e4); }
.jeu-pose { perspective: 1000px; }
.jeu-pose-a { transform: rotate(-1.5deg); }
.jeu-pose-b { transform: rotate(1.5deg); }
.jeu-revelee { margin-left: auto; padding: 2px var(--v2-e8); border-radius: 999px; background: var(--v2-menthe); color: var(--v2-encre); font-size: var(--v2-t13); font-weight: 700; }
.jeu-retourne { animation: jeu-retourne 600ms cubic-bezier(0.45, 0, 0.25, 1) var(--jeu-delai, 0ms) both; }
.jeu-pose-b .jeu-retourne, .jeu-pose-b .jeu-dos, .jeu-pose-b.jeu-pose-tourne::before { animation-delay: calc(150ms + var(--jeu-delai, 0ms)); }
/* L'ombre qui grandit pendant que la carte est soulevée (calque sous la carte, opacity seule). */
.jeu-pose-tourne { position: relative; }
.jeu-pose-tourne::before { content: ""; position: absolute; inset: 6% 4% 0; border-radius: var(--v2-rayon-carte); box-shadow: 0 30px 48px rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; animation: jeu-ombre 600ms ease-in-out var(--jeu-delai, 0ms) both; }
@keyframes jeu-ombre { 40%, 60% { opacity: 1; } }
.jeu-dos { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 0.04em; border-radius: var(--v2-rayon-carte); background: var(--v2-fond); box-shadow: inset 0 0 0 var(--v2-trait) var(--v2-filet); font-family: var(--v2-serif); font-size: 88px; line-height: 1; animation: jeu-dos 600ms steps(1, end) var(--jeu-delai, 0ms) both; }
.jeu-dos-a { color: var(--v2-camp-a); }
.jeu-dos-b { color: var(--v2-camp-b); }
.jeu-dos-barre { color: var(--v2-barre); }
@keyframes jeu-retourne { 0% { transform: translateY(0) scale(1) rotateY(0); } 22% { transform: translateY(-12px) scale(1.03) rotateY(24deg); } 50% { transform: translateY(-12px) scale(1.03) rotateY(90deg); } 78% { transform: translateY(-12px) scale(1.03) rotateY(24deg); } 100% { transform: translateY(0) scale(1) rotateY(0); } }
@keyframes jeu-dos { 0% { opacity: 1; } 50% { opacity: 0; visibility: hidden; } 100% { opacity: 0; visibility: hidden; } }
.jeu-recap-axes { display: flex; flex-direction: column; gap: var(--v2-e8); padding-top: var(--v2-e16); border-top: var(--v2-trait) solid var(--v2-filet); color: var(--v2-texte); }
.jeu-recap-autre { border-top-style: dashed; }
.jeu-recap-camp { display: flex; align-items: center; gap: var(--v2-e8); font-size: var(--v2-t15); font-weight: 600; color: var(--v2-texte); }
.jeu-recap-camp .jeu-lettre { font-size: var(--v2-t28); }
.jeu-recap-tips { padding-left: var(--v2-e12); border-left: var(--v2-focus) solid var(--v2-filet); }
.jeu-recap-tips h4 { margin: 0; font-size: var(--v2-t15); font-weight: 700; }
.jeu-recap-tips ul { margin: var(--v2-e4) 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: var(--v2-t15); line-height: 1.45; color: var(--v2-texte-2); }
/* Fin de partie */
.jeu-gagnant { display: flex; flex-direction: column; align-items: center; gap: var(--v2-e8); padding: var(--v2-e24) 0 var(--v2-e8); text-align: center; }
.jeu-gagnant-ic svg { width: 44px; height: 44px; color: var(--v2-menthe); }
.jeu-gagnant-k { font-size: var(--v2-t13); color: var(--v2-texte-2); }
.jeu-gagnant-nom { margin: 0; font-family: var(--v2-serif); font-size: var(--v2-t44); font-weight: 400; line-height: 1.04; overflow-wrap: anywhere; }
.jeu-gagnant-x { font-size: var(--v2-t17); color: var(--v2-texte-2); }
/* Pause : par dessus le jeu, fond de la table presque opaque. */
.jeu-pause-ecran { position: fixed; inset: 0; z-index: 50; overflow: auto; display: grid; place-items: center; padding: calc(var(--v2-e24) + env(safe-area-inset-top, 0px)) var(--v2-e16) calc(var(--v2-e24) + env(safe-area-inset-bottom, 0px)); background: rgba(13, 53, 32, 0.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); animation: pzin 0.18s ease; color: var(--v2-texte); }
.jeu-pause-boite { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: var(--v2-e16); text-align: center; }
.jeu-pause-k { margin: 0; font-size: var(--v2-t15); color: var(--v2-texte-2); }
.jeu-pause-t { margin: 0; font-family: var(--v2-serif); font-size: var(--v2-t44); font-weight: 400; line-height: 1.04; }
.jeu-pause-cd { font-family: var(--v2-serif); font-size: 88px; font-weight: 400; line-height: 1; }
.jeu-pause-qui { margin: 0; font-size: var(--v2-t17); font-weight: 600; }
.jeu-pause-attente { margin: 0; padding: var(--v2-e12) var(--v2-e16); border: var(--v2-trait) solid var(--v2-filet); border-radius: var(--v2-rayon); font-size: var(--v2-t15); }
/* Seul */
.jeu-bandeau-camp { display: flex; align-items: center; gap: var(--v2-e8); font-size: var(--v2-t15); font-weight: 600; color: var(--v2-texte); }
.jeu-bandeau-camp .jeu-lettre { font-size: var(--v2-t28); }
.jeu-choix-camp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--v2-e12); }
.jeu-camp-btn { min-height: 104px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--v2-e4); border: var(--v2-trait) solid var(--v2-filet); border-top: 3px solid var(--v2-texte); border-radius: var(--v2-rayon-carte); background: none; color: var(--v2-texte); font-family: var(--v2-sans); font-size: var(--v2-t17); font-weight: 600; cursor: pointer; }
.jeu-camp-btn.jeu-camp-a { border-top-color: var(--v2-camp-a); }
.jeu-camp-btn.jeu-camp-b { border-top-color: var(--v2-camp-b); }
@media (hover: hover) { .jeu-camp-btn:hover { background: var(--v2-survol); } }
.jeu-methode { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: var(--v2-e8); font-size: var(--v2-t17); line-height: 1.45; color: var(--v2-texte-2); }
.jeu-bascule { display: flex; align-items: center; gap: var(--v2-e12); min-height: var(--v2-cible); font-size: var(--v2-t15); color: var(--v2-texte); }
.jeu-bascule input { width: 22px; height: 22px; accent-color: var(--v2-menthe); }
.jeu-transcription { display: flex; flex-direction: column; gap: var(--v2-e8); }
.jeu-live { font-size: var(--v2-t17); line-height: 1.5; min-height: 72px; max-height: 220px; overflow: auto; color: var(--v2-texte); }
.jeu-interim, .jeu-vide { color: var(--v2-texte-2); }
.jeu-ecrire > summary::after { content: "+"; }
.jeu-zone { width: 100%; box-sizing: border-box; min-height: 140px; margin-bottom: var(--v2-e16); padding: var(--v2-e12); border: var(--v2-trait) solid var(--v2-texte-2); border-radius: var(--v2-rayon); background: none; color: var(--v2-texte); font-family: var(--v2-sans); font-size: var(--v2-t17); line-height: 1.45; resize: vertical; }
.jeu-zone:focus { outline: none; border-color: var(--v2-menthe); }
.jeu-zone:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 2px; }
.jeu-zone::placeholder { color: var(--v2-texte-2); opacity: 1; }
.jeu-bilan-tete { display: flex; flex-direction: column; gap: var(--v2-e12); }
.jeu-score-grand { margin: 0; display: flex; align-items: baseline; gap: var(--v2-e8); font-weight: 400; }
.jeu-score-grand b { font-family: var(--v2-serif); font-size: 88px; font-weight: 400; line-height: 0.9; color: var(--v2-texte); }
.jeu-score-grand > span:not(.visually-hidden) { font-size: var(--v2-t21); color: var(--v2-texte-2); }
.jeu-encadre { display: flex; flex-direction: column; gap: var(--v2-e8); padding: var(--v2-e16); border: var(--v2-trait) dashed var(--v2-texte-2); border-radius: var(--v2-rayon-carte); }
.jeu-feuille-h { margin: 0; font-size: var(--v2-t17); font-weight: 700; color: var(--v2-texte); }
.jeu-cmps { display: flex; flex-direction: column; gap: var(--v2-e12); }
.jeu-cmp { display: flex; flex-direction: column; gap: 6px; padding: var(--v2-e12) var(--v2-e16); border: var(--v2-trait) solid var(--v2-filet); border-radius: var(--v2-rayon); }
.jeu-cmp-h { display: flex; justify-content: space-between; align-items: center; gap: var(--v2-e12); }
.jeu-cmp-h b { font-size: var(--v2-t17); font-weight: 600; }
.jeu-cmp-r { display: flex; justify-content: space-between; gap: var(--v2-e12); font-size: var(--v2-t15); color: var(--v2-texte-2); }
.jeu-marque { font-weight: 700; color: var(--v2-texte-2); }
.jeu-marque.on { color: var(--v2-menthe); }
.jeu-cmp-x { font-size: var(--v2-t15); line-height: 1.45; color: var(--v2-texte); }
.jeu-cmp-pts { font-size: var(--v2-t13); font-weight: 700; text-align: right; color: var(--v2-texte-2); }
.jeu-pastille { flex-shrink: 0; padding: 2px 10px; border: var(--v2-trait) solid var(--v2-texte); border-radius: 999px; font-size: var(--v2-t13); font-weight: 700; white-space: nowrap; }
.jeu-pastille-oui { border-color: var(--v2-menthe); background: var(--v2-menthe); color: var(--v2-encre); }
.jeu-pastille-non { color: var(--v2-texte); }
.jeu-pastille-peut { border-style: dashed; border-color: var(--v2-texte-2); color: var(--v2-texte-2); }
.jeu-citation { display: block; padding: var(--v2-e8) var(--v2-e12); border-left: var(--v2-focus) solid var(--v2-texte-2); font-family: var(--v2-serif); font-style: italic; font-size: var(--v2-t17); line-height: 1.4; color: var(--v2-texte); quotes: "« " " »"; }
.jeu-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--v2-e12); }
.jeu-stats div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jeu-stats b { font-size: var(--v2-t21); font-weight: 700; color: var(--v2-texte); }
.jeu-stats span { font-size: var(--v2-t13); line-height: 1.3; color: var(--v2-texte-2); }
.jeu-elements { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--v2-e12); font-size: var(--v2-t15); line-height: 1.4; }
.jeu-elements li { display: flex; flex-direction: column; align-items: flex-start; gap: var(--v2-e4); }
.jeu-elements .jeu-statut { margin-left: 0; }
.jeu-liste { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: var(--v2-t15); line-height: 1.45; color: var(--v2-texte); }
.jeu-clair { color: var(--v2-texte); }
.jeu-ia-biais { display: flex; flex-direction: column; gap: var(--v2-e12); }
.jeu-ia-biais div { display: flex; flex-direction: column; gap: var(--v2-e4); }
.jeu-ia-biais span { font-size: var(--v2-t15); color: var(--v2-texte-2); }
/* Salon en ligne */
.jeu-salon-code { margin-top: var(--v2-e24); display: flex; flex-direction: column; align-items: flex-start; gap: var(--v2-e4); }
.jeu-salon-code .v2-label { margin: 0; }
.jeu-salon-code-v { font-size: var(--v2-t44); font-weight: 700; letter-spacing: 0.15em; line-height: 1.1; color: var(--v2-texte); }
.jeu-salon-joueurs { list-style: none; padding: 0; }
.jeu-toi { font-size: var(--v2-t15); color: var(--v2-texte-2); }
.jeu-organise { padding: 2px var(--v2-e8); border: var(--v2-trait) solid var(--v2-filet); border-radius: 999px; font-size: var(--v2-t13); font-weight: 600; color: var(--v2-texte-2); }
.jeu-reglages { margin: var(--v2-e16) 0 0; }
.jeu-reglages div { display: flex; gap: var(--v2-e12); padding: var(--v2-e12) 0; border-bottom: var(--v2-trait) solid var(--v2-filet); font-size: var(--v2-t17); }
.jeu-reglages dt { min-width: 72px; color: var(--v2-texte-2); }
.jeu-reglages dd { margin: 0; color: var(--v2-texte); }
/* Feuilles (scores, règles et lexique, biais, coup de théâtre) : au nouveau design, sur la table. */
.sheet { background: var(--v2-fond); border: 0; border-top: var(--v2-trait) solid var(--v2-filet); border-radius: var(--v2-rayon-carte) var(--v2-rayon-carte) 0 0; color: var(--v2-texte); font-family: var(--v2-sans); }
.sheet p { margin: 0; }
.sheet .sh .h2 { font-family: var(--v2-serif); font-size: var(--v2-t28); font-weight: 400; line-height: 1.1; }
.sheet .xbtn { border: 0; color: var(--v2-texte); }
.sheet :focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: var(--v2-focus-ecart); border-radius: var(--v2-focus-rayon); }
.sheet .rules h3 { font-size: var(--v2-t17); font-weight: 700; }
.sheet .rules p, .sheet .rules li { font-size: var(--v2-t15); color: var(--v2-texte-2); }
.sheet .rules b { color: var(--v2-texte); }
.sheet .lexique dt { color: var(--v2-texte); }
.sheet .lexique dd { font-size: var(--v2-t15); color: var(--v2-texte-2); }
.sheet .v2-options { margin-top: 0; }
.v2-qui .v2-choix { min-width: var(--v2-cible); }
.jeu-feuille-bas { position: sticky; bottom: calc(-1 * (24px + env(safe-area-inset-bottom, 0px))); margin: 0 -16px; padding: var(--v2-e12) 16px calc(24px + env(safe-area-inset-bottom, 0px)); border-top: var(--v2-trait) solid var(--v2-filet); background: var(--v2-fond); display: flex; flex-direction: column; gap: var(--v2-e8); }
.jeu-feuille-bas .v2-bouton { width: 100%; }
.jeu-coup { display: flex; flex-direction: column; gap: var(--v2-e8); padding-top: var(--v2-e16); border-top: var(--v2-trait) solid var(--v2-filet); }
@media (min-width: 900px) {
  .jeu-table-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .jeu-chrono { width: 260px; }
}
@media (prefers-reduced-motion: reduce) {
  .jeu-alterne-anim .jeu-nom-final, .jeu-alterne-anim .jeu-nom-leurre, .jeu-chrono.low .jeu-chrono-t b, .jeu-chrono.low .jeu-chrono-arc, .jeu-retourne, .jeu-pose-tourne::before, .jeu-attente-point, .jeu-pause-ecran { animation: none; }
  .jeu-dos { display: none; }
}

/* ---------- Chantier 8, session Design : notes pendant la joute (étape 7) ----------
   « Mes notes » et « Repère » sous le chrono ; volet « Ta carte » pour le débatteur. Quand on écrit (clavier
   ouvert sur téléphone), body reçoit .jeu-clavier : l'en tête montre le chrono en bandeau, à la couleur du camp. */
.jeu-notes { display: flex; flex-direction: column; gap: var(--v2-e8); }
.jeu-notes-tete { display: flex; justify-content: space-between; align-items: center; gap: var(--v2-e12); }
.jeu-notes .jeu-zone { min-height: 112px; margin-bottom: 0; }
.jeu-tete-chrono { display: none; align-items: baseline; gap: var(--v2-e8); justify-self: center; margin: 0; }
.jeu-tete-chrono .jeu-lettre { font-size: var(--v2-t28); }
.jeu-tete-chrono b { font-size: var(--v2-t28); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--v2-texte); }
.jeu-tete-chrono.jeu-camp-a b { color: var(--v2-camp-a); }
.jeu-tete-chrono.jeu-camp-b b { color: var(--v2-camp-b); }
body.jeu-clavier .jeu-tete:has(.jeu-tete-chrono) .jeu-ou { display: none; }
body.jeu-clavier .jeu-tete-chrono { display: flex; }
.jeu-ta-carte .jeu-carte { margin-top: var(--v2-e4); }

/* ---------- Chantier 8, session Design : icônes des thèmes à tous les emplacements (étape 9) ----------
   Cartes de jeu, quiz, récap, choix du thème (seul, même téléphone, salon), Progrès « Par thème ». */
.jeu-carte-meta span:first-child, .jeu-carte-meta span:last-child { display: inline-flex; align-items: center; gap: var(--v2-e8); }
.jeu-recap-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--v2-e8); }
.v2-choix .ic-theme { margin-right: 6px; vertical-align: -6px; }
.v2-themes .v2-ligne-t .ic-theme { margin-right: var(--v2-e8); vertical-align: -5px; }

/* ---------- Revue de presse de l'Actu (src/revue.js) ----------
   Sur la table, comme un site d'information : une grande une avec sa photo, « En continu » à côté sur ordinateur, puis
   une section par thème avec son icône en couleur et quatre cartes photo. Le texte reste crème ; les couleurs ne
   viennent que des icônes des thèmes. Une carte seule est un grand lien vers l'article du média (nouvel onglet) ; une
   carte « Vu par n médias » donne le titre de chacun, chacun son lien. Photos : illustrations sous licence libre,
   marquées « Illustration » avec leur crédit ; sinon la tuile du thème et sa grande icône. */
.ac-edition-note { margin: var(--v2-e24) 0 0; padding-left: var(--v2-e12); border-left: var(--v2-focus) solid var(--v2-filet); font-size: var(--v2-t15); line-height: 1.45; color: var(--v2-texte-2); max-width: 60ch; }
.ac-edition + .rv-revue, .ac-edition-note + .rv-revue { margin-top: var(--v2-e48); }
.ap-cinq + .ap-h2 { margin-top: var(--v2-e32); }
.rv-revue { margin-top: var(--v2-e32); }
.rv-entete { display: flex; flex-direction: column; gap: var(--v2-e4); }
.rv-sous { margin: 0; font-size: var(--v2-t15); line-height: 1.45; color: var(--v2-texte-2); max-width: 62ch; }
.rv-une-grille { margin-top: var(--v2-e16); display: grid; gap: var(--v2-e24); }
.rv-carte { position: relative; display: flex; flex-direction: column; gap: var(--v2-e8); min-width: 0; color: var(--v2-texte); }
.rv-visuel { margin: 0; position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; }
.rv-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rv-photo { aspect-ratio: auto; display: flex; flex-direction: column; overflow: visible; }
.rv-photo img { aspect-ratio: 16 / 9; height: auto; border-radius: 12px; }
.rv-credit { position: relative; z-index: 1; margin-top: var(--v2-e4); font-size: var(--v2-t13); line-height: 1.3; color: var(--v2-texte-2); }
.rv-credit span { font-weight: 600; color: var(--v2-texte); }
.rv-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.rv-photo-lien { display: block; border-radius: 12px; }
.rv-tuile { display: flex; align-items: center; justify-content: center; border: var(--v2-trait) solid var(--v2-filet); background: rgba(244, 241, 232, 0.04); }
.rv-corps { display: flex; flex-direction: column; gap: var(--v2-e4); min-width: 0; }
.rv-th { margin: 0; display: flex; align-items: center; gap: var(--v2-e8); font-size: var(--v2-t13); font-weight: 600; color: var(--v2-texte-2); }
.rv-vu { margin: 0; align-self: flex-start; padding: 2px var(--v2-e8); border: var(--v2-trait) solid var(--v2-filet); border-radius: 999px; font-size: var(--v2-t13); font-weight: 700; color: var(--v2-texte); }
.rv-titre { margin: 0; font-family: var(--v2-sans); font-size: var(--v2-t17); font-weight: 800; line-height: 1.25; letter-spacing: -0.005em; }
.rv-une .rv-titre { font-size: var(--v2-t28); line-height: 1.12; }
.rv-lien-titre { color: var(--v2-texte); text-decoration: none; }
.rv-lien::after { content: ""; position: absolute; inset: 0; }
@media (hover: hover) { .rv-lien-titre:hover, .rv-carte:has(.rv-lien:hover) .rv-lien-titre { text-decoration: underline; text-decoration-thickness: var(--v2-trait); text-underline-offset: var(--v2-e4); } }
.rv-lien-titre:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: var(--v2-e4); border-radius: 4px; }
.rv-meta { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--v2-e4); font-size: var(--v2-t13); color: var(--v2-texte-2); }
.rv-media { font-weight: 600; color: var(--v2-texte); }
.rv-sortie { width: 14px; height: 14px; margin-left: var(--v2-e4); flex-shrink: 0; }
.rv-autres { list-style: none; margin: var(--v2-e4) 0 0; padding: 0; border-top: var(--v2-trait) solid var(--v2-filet); }
.rv-autres li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--v2-e8); border-bottom: var(--v2-trait) solid var(--v2-filet); }
.rv-autres time { flex-shrink: 0; font-size: var(--v2-t13); color: var(--v2-texte-2); }
.rv-autre { display: block; min-height: var(--v2-cible); padding: var(--v2-e8) 0; box-sizing: border-box; font-size: var(--v2-t15); line-height: 1.35; color: var(--v2-texte); text-decoration: none; }
.rv-autre .rv-media { margin-right: var(--v2-e4); }
.rv-autre-t { color: var(--v2-texte-2); }
@media (hover: hover) { .rv-autre:hover .rv-autre-t { color: var(--v2-texte); text-decoration: underline; text-underline-offset: 3px; } }
.rv-autre:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 2px; border-radius: 4px; }
.rv-pied { position: relative; z-index: 1; margin: 0; }
.rv-plus summary { min-height: var(--v2-cible); display: flex; align-items: center; font-size: var(--v2-t13); font-weight: 700; color: var(--v2-texte-2); cursor: pointer; }
.rv-plus summary:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 2px; border-radius: 4px; }
.rv-plus .rv-autres { margin-top: 0; }
.rv-debattre { min-height: var(--v2-cible); padding: 0; background: none; border: 0; font: inherit; font-size: var(--v2-t13); font-weight: 700; color: var(--v2-menthe); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rv-debattre:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 2px; border-radius: 4px; }
/* En continu : les titres les plus récents, l'heure devant. Six sur téléphone, quatorze sur ordinateur. */
.rv-continu { border-top: var(--v2-trait) solid var(--v2-filet); padding-top: var(--v2-e12); }
.rv-continu-t { margin: 0; font-family: var(--v2-serif); font-size: var(--v2-t21); font-weight: 400; color: var(--v2-texte); }
.rv-continu-l { list-style: none; margin: var(--v2-e8) 0 0; padding: 0; }
.rv-continu-l li { display: grid; grid-template-columns: 52px 1fr; gap: var(--v2-e8); border-bottom: var(--v2-trait) solid var(--v2-filet); }
.rv-continu-l li:nth-child(n+7) { display: none; }
.rv-continu-l time { padding-top: 11px; font-size: var(--v2-t13); font-weight: 600; color: var(--v2-texte-2); }
.rv-continu-lien { display: flex; flex-direction: column; gap: 2px; min-height: var(--v2-cible); padding: var(--v2-e8) 0; box-sizing: border-box; color: var(--v2-texte); text-decoration: none; font-size: var(--v2-t15); line-height: 1.3; }
.rv-continu-lien b { font-weight: 700; }
.rv-continu-lien .rv-media { font-size: var(--v2-t13); font-weight: 400; color: var(--v2-texte-2); }
@media (hover: hover) { .rv-continu-lien:hover b { text-decoration: underline; text-underline-offset: 3px; } }
.rv-continu-lien:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 2px; border-radius: 4px; }
/* Sections par thème : titre en serif avec l'icône en couleur ; sur téléphone, les cartes défilent de côté. */
.rv-section { margin-top: var(--v2-e40, 40px); }
.rv-section-t { margin: 0; }
.rv-section-lien { display: inline-flex; align-items: center; gap: var(--v2-e12); min-height: var(--v2-cible); padding: 0; background: none; border: 0; font-family: var(--v2-serif); font-size: var(--v2-t28); font-weight: 400; color: var(--v2-texte); cursor: pointer; }
.rv-section-lien .ac-chevron { width: 20px; height: 20px; color: var(--v2-texte-2); }
@media (hover: hover) { .rv-section-lien:hover span { text-decoration: underline; text-decoration-thickness: var(--v2-trait); text-underline-offset: var(--v2-e4); } }
.rv-cartes { list-style: none; margin: var(--v2-e12) calc(-1 * var(--gutter, 16px)) 0; padding: var(--v2-e4) var(--gutter, 16px) var(--v2-e8); display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 290px); gap: var(--v2-e16); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rv-cartes::-webkit-scrollbar { display: none; }
.rv-cartes > .rv-carte { scroll-snap-align: start; }
.rv-grille { margin-inline: 0; padding-inline: 0; grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; overflow: visible; gap: var(--v2-e24) var(--v2-e16); }
/* Chargement : quatre cartes fantômes, immobiles. */
.rv-fantome .rv-visuel { background: rgba(244, 241, 232, 0.06); }
.rv-fantome .rv-corps p { margin: 0; height: 14px; border-radius: 4px; background: rgba(244, 241, 232, 0.06); }
.rv-fantome .rv-corps p + p { width: 60%; }
@media (min-width: 640px) {
  .rv-cartes { margin-inline: 0; padding-inline: 0; grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
}
@media (min-width: 900px) {
  .rv-une-grille { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--v2-e32); align-items: start; }
  .rv-une .rv-titre { font-size: var(--v2-t44); line-height: 1.04; }
  .rv-continu { border-top: 0; padding-top: 0; border-left: var(--v2-trait) solid var(--v2-filet); padding-left: var(--v2-e24); }
  .rv-continu-l li:nth-child(n+7) { display: grid; }
  /* Six cartes par thème sur la page Tout : deux rangées de trois, lues de gauche à droite puis la rangée suivante. */
  .rv-cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rv-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* « Plus anciens » sous les cartes d'un thème. */
.rv-plus-anciens { margin-top: var(--v2-e24); }

/* ==========================================================================
   Chemin de la page Progrès, v2 (consigne complète du chemin, octobre 2026). Une vraie vue d'application mobile :
   barre fixe de 56 px, deux vues (« Chemin », « Mes jauges »), bandeaux de papier collés sous la barre, étapes en
   boutons ronds en relief de la couleur de leur thème, en zigzag sans trait, feuilles de papier. Le relief et les
   couleurs franches viennent des jeux mobiles ; ni mascotte, ni vert, ni icône, ni nom d'une autre marque.
   ========================================================================== */
/* Plein écran : sans la marge de 8 px du navigateur, les bandeaux sont à 16 px du bord. */
body.ch-ecran { margin: 0; }
.ch-page { position: relative; padding-top: calc(56px + env(safe-area-inset-top, 0px)); }
/* Couleur du thème d'une étape : version table (--th) et version papier (--thp). */
.ch-th-geo { --th: var(--v2-th-geo); --thp: var(--v2-th-geo-papier); }
.ch-th-tech { --th: var(--v2-th-tech); --thp: var(--v2-th-tech-papier); }
.ch-th-sav { --th: var(--v2-th-sav); --thp: var(--v2-th-sav-papier); }
.ch-th-eco { --th: var(--v2-th-eco); --thp: var(--v2-th-eco-papier); }
.ch-th-soc { --th: var(--v2-th-soc); --thp: var(--v2-th-soc-papier); }
.ch-th-sport { --th: var(--v2-th-sport); --thp: var(--v2-th-sport-papier); }
.ch-th-mode { --th: var(--v2-th-mode); --thp: var(--v2-th-mode-papier); }
.ch-th-spice { --th: var(--v2-th-spice); --thp: var(--v2-th-spice-papier); }
/* Sur le papier (débat du jour, bandeau, feuilles), les icônes prennent leur version sombre, le focus passe à l'encre. */
.ch-page :where(.ch-jourp, .ch-bandeau:not(.ch-bandeau-ferme)) :focus-visible, .ch-feuille :focus-visible { outline-color: var(--v2-encre); }

/* Gros bouton menthe en relief (débat du jour, feuille d'étape, passage de palier) : appui de 4 px en 80 ms. */
.ch-gros-bouton { --h: 6px; display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--v2-cible-principale); margin: 0 0 6px; padding: 0 var(--v2-e24); border: 0; border-radius: var(--v2-rayon-carte); background: var(--v2-menthe); color: var(--v2-encre); font-family: var(--v2-sans); font-size: var(--v2-t17); font-weight: 800; box-shadow: 0 var(--h) 0 #3E8A48; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform 80ms ease-out, box-shadow 80ms ease-out; }
.ch-gros-bouton:active { --h: 2px; transform: translateY(4px); }
@media (hover: hover) { .ch-gros-bouton:hover { background: var(--v2-menthe-survol); } }
.ch-page .ch-gros-bouton:focus-visible, .ch-feuille .ch-gros-bouton:focus-visible { border-radius: var(--v2-rayon-carte); outline-offset: 3px; }

/* Débat du jour, tout en haut : carte de papier, liseré de la couleur du thème. */

/* Un palier : son bandeau de papier reste collé sous la barre pendant qu'on parcourt ses étapes. L'ombre de la
   couleur du fond cache les étapes qui passent entre la barre et le bandeau. */
.ch-livre { width: 24px; height: 24px; stroke-width: 1.8; }

/* À venir : #2E5240, bord #1F3B2D, icône #8FA89A, sans pointillés. */
.ch-bouton { --c: #2E5240; --bord: #1F3B2D; --ligne: transparent; --h: 6px; position: relative; display: grid; place-items: center; width: 72px; height: 72px; margin: 0 0 6px; padding: 0; border: 0; border-radius: 50%; background: var(--c); color: #8FA89A; box-shadow: inset 0 0 0 2px var(--ligne), 0 var(--h) 0 var(--bord); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform 80ms ease-out, box-shadow 80ms ease-out; }
.ch-bouton:active { --h: 2px; transform: translateY(4px); }
.ch-bouton .ic-theme { width: 32px; height: 32px; }
.ch-cadenas { width: 28px; height: 28px; stroke-width: 2; }
/* Étape actuelle : 84 px, anneau menthe de 6 px à 8 px du bouton, bulle « Commencer » qui sautille. */
/* --anneau : haut de l'anneau menthe dans la ligne de l'étape. La pointe de la bulle s'arrête à 8 px de l'anneau,
   et la bulle garde au moins 16 px libres au dessus d'elle (marques de l'étape d'avant comprises). */
@keyframes ch-bulle { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -4px); } }
/* Fait : trois marques dessous, pleines ou vides. */
.ch-marque { display: block; width: 10px; height: 10px; border: 2px solid #8FA89A; border-radius: 50%; }
.ch-marque.on { border-color: var(--v2-menthe); background: var(--v2-menthe); }
/* Carte à découvrir : carré arrondi de papier, grand « ? » en Instrument Serif. */
.ch-point-q { font-family: var(--v2-serif); font-size: 48px; line-height: 1; }
/* Bilan : disque de papier de 96 px, monogramme A/B (A safran, B lilas). */
.ch-mono { display: inline-flex; align-items: center; font-family: var(--v2-serif); font-size: 40px; line-height: 1; }
.ch-mono-a { color: var(--v2-camp-a-papier); }
.ch-mono-b { color: var(--v2-camp-b-papier); }
.ch-mono-barre { width: 0.42em; height: 0.9em; margin: 0 0.02em; overflow: visible; }
.ch-mono-barre path { fill: none; stroke: var(--v2-encre); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; }
.ch-page .ch-bouton:focus-visible { border-radius: 50%; outline-offset: 6px; }
@media (hover: hover) { .ch-bouton:hover { filter: brightness(1.06); } }

/* Retour d'une étape : rebond (0,9 ; 1,05 ; 1), la coche se trace, les marques se remplissent une à une, puis
   l'étape suivante prend sa couleur. */
@keyframes ch-rebond { 0% { transform: scale(0.9); } 55% { transform: scale(1.05); } 100% { transform: scale(1); } }
@keyframes ch-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ch-marque { from { border-color: #8FA89A; background: transparent; transform: scale(0.6); } 60% { transform: scale(1.3); } to { transform: scale(1); } }
@keyframes ch-colore { from { background-color: #2E5240; box-shadow: inset 0 0 0 2px transparent, 0 6px 0 #1F3B2D; transform: scale(0.92); } 70% { transform: scale(1.05); } to { transform: scale(1); } }
@keyframes ch-apparait { from { opacity: 0; } to { opacity: 1; } }

/* Passage de palier : plein écran de papier, la barre du monogramme se trace, puis le nouveau nom. */
.ch-passage { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: var(--v2-e24); background: var(--v2-papier); color: var(--v2-encre); font-family: var(--v2-sans); animation: ch-apparait 300ms ease-out both; }
.ch-passage-in { display: flex; flex-direction: column; align-items: center; gap: var(--v2-e8); width: 100%; max-width: 420px; text-align: center; }
.ch-passage-in:focus { outline: none; }
.ch-passage p { margin: 0; }
.ch-mono-grand { margin-bottom: var(--v2-e16); font-size: 112px; }
.ch-mono-grand .ch-mono-barre path { stroke-width: 2; animation: ch-trace 700ms 300ms ease-out backwards; }
.ch-mono-grand .ch-mono-a, .ch-mono-grand .ch-mono-b { animation: ch-apparait 400ms 150ms ease-out backwards; }
.ch-passage-p { font-size: var(--v2-t15); font-weight: 700; color: var(--v2-encre-2); animation: ch-monte 500ms 700ms ease-out backwards; }
.ch-passage-n { margin: 0; font-family: var(--v2-serif); font-size: 64px; font-weight: 400; line-height: 1; animation: ch-monte 600ms 800ms ease-out backwards; }
.ch-passage-c { font-size: var(--v2-t17); font-weight: 600; color: var(--v2-encre-2); animation: ch-monte 500ms 950ms ease-out backwards; }
.ch-passage .ch-gros-bouton { margin-top: var(--v2-e32); animation: ch-monte 500ms 1100ms ease-out backwards; }
/* « Continuer » : pas d'anneau safran ; anneau d'encre, au clavier seulement. */
.ch-passage :focus:not(:focus-visible) { outline: none; }
.ch-passage .ch-gros-bouton:focus-visible { outline: 3px solid var(--v2-encre); outline-offset: 3px; border-radius: var(--v2-rayon-carte); }
@keyframes ch-monte { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Feuilles de papier (étape, carte, guide), en bas de l'écran. */
.sheet:has(> .ch-feuille) { padding: var(--v2-e12) var(--v2-e16) calc(var(--v2-e24) + env(safe-area-inset-bottom, 0px)); border-top: 0; background: var(--v2-papier); color: var(--v2-encre); }
.ch-feuille { display: flex; flex-direction: column; gap: var(--v2-e16); color: var(--v2-encre); font-family: var(--v2-sans); }
.ch-feuille p { margin: 0; }
.ch-f-tete { display: flex; align-items: center; justify-content: space-between; gap: var(--v2-e12); }
.ch-f-num { font-size: var(--v2-t15); font-weight: 700; color: var(--v2-encre-2); }
.ch-f-fermer { display: grid; place-items: center; flex-shrink: 0; width: var(--v2-cible); height: var(--v2-cible); padding: 0; border: 0; border-radius: 50%; background: #E6E0CE; color: var(--v2-encre); cursor: pointer; }
.ch-croix { width: 20px; height: 20px; stroke-width: 2.2; }
.ch-feuille .ch-f-fermer:focus-visible { border-radius: 50%; }
.ch-f-th { display: flex; align-items: center; gap: var(--v2-e8); font-size: var(--v2-t15); font-weight: 700; }
.ch-f-q { margin: 0; font-family: var(--v2-serif); font-size: 24px; font-weight: 400; line-height: 1.2; }
.ch-f-obj { padding: var(--v2-e12) var(--v2-e16); border: 2px solid #CFC8B4; border-radius: 12px; background: #ECE7D8; font-size: var(--v2-t17); line-height: 1.4; }
.ch-f-obj-t { margin-bottom: var(--v2-e4) !important; font-size: var(--v2-t13); font-weight: 800; color: var(--v2-encre-2); }
.ch-f-p { font-size: var(--v2-t15); line-height: 1.45; color: var(--v2-encre-2); }
.ch-f-ferme { font-weight: 600; color: var(--v2-encre); }
.ch-f-lien { align-self: flex-start; min-height: var(--v2-cible); padding: 0; border: 0; background: none; color: var(--v2-lien-papier); font-family: var(--v2-sans); font-size: var(--v2-t15); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ch-f-cg summary { display: flex; align-items: center; min-height: var(--v2-cible); font-size: var(--v2-t15); font-weight: 600; cursor: pointer; }
.ch-f-cg p { margin-top: var(--v2-e8) !important; }
.ch-f-marques { display: flex; align-items: center; gap: var(--v2-e12); font-size: var(--v2-t15); }
.ch-feuille .ch-marque { border-color: var(--v2-encre-2); }
.ch-f-marques { display: block; }
.ch-f-marques-l { display: flex; flex-direction: column; gap: var(--v2-e8); margin: var(--v2-e8) 0 0; padding: 0; list-style: none; font-size: var(--v2-t15); }
.ch-f-marques-l li { display: flex; align-items: center; gap: var(--v2-e12); }
.ch-feuille .ch-marque.on { border-color: var(--v2-encre); background: var(--v2-encre); }
.ch-f-h { margin: var(--v2-e8) 0 0; font-size: var(--v2-t17); font-weight: 800; }
.ch-f-liste { margin: 0; padding-left: 20px; font-size: var(--v2-t15); line-height: 1.5; }
.ch-f-ex { margin: 0; padding: var(--v2-e12) var(--v2-e16); border-left: 4px solid #CFC8B4; font-family: var(--v2-serif); font-size: 19px; line-height: 1.35; }
/* La carte à découvrir se retourne en 400 ms ; la source s'affiche sous le fait. */
.ch-carte3d { display: grid; perspective: 900px; }
.ch-carte-dos, .ch-carte-face { grid-area: 1 / 1; align-self: start; border: 2px solid #CFC8B4; border-radius: var(--v2-rayon-carte); backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform 400ms ease-in-out; }
.ch-carte-dos { min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--v2-e8); margin-bottom: 6px; background: #ECE7D8; color: var(--v2-encre); font-family: var(--v2-sans); box-shadow: 0 6px 0 #CFC8B4; cursor: pointer; }
.ch-carte-dos .ch-point-q { font-size: 96px; }
.ch-carte-dos-t { font-size: var(--v2-t15); font-weight: 700; }
.ch-carte-face { display: flex; flex-direction: column; gap: var(--v2-e8); padding: var(--v2-e16) 18px; background: #FFFDF7; transform: rotateY(180deg); }
.ch-retournee .ch-carte-dos { transform: rotateY(-180deg); }
.ch-retournee .ch-carte-face { transform: none; }
.ch-carte-dos[hidden], .ch-carte-face[hidden] { display: none; }
.ch-carte-face:focus { outline: none; }
.ch-face-th { display: flex; align-items: center; gap: var(--v2-e8); font-size: var(--v2-t13); font-weight: 700; color: var(--v2-encre-2); }
.ch-face-q { font-size: var(--v2-t17); line-height: 1.4; }
.ch-face-a { font-family: var(--v2-serif); font-size: var(--v2-t28); line-height: 1.15; }
.ch-face-src { font-size: var(--v2-t13); line-height: 1.4; color: var(--v2-encre-2); }
.ch-face-src a { color: var(--v2-lien-papier); font-weight: 600; }

/* Ordinateur : la barre sur toute la largeur, le chemin au centre dans une colonne de 520 px, « Mes jauges » à droite. */
@media (min-width: 1024px) {
  body.ch-ecran .app { max-width: none; padding-inline: var(--v2-e32); }
}

/* Mouvement réduit : tout s'arrête, rien ne sautille ni ne se retourne. */
@media (prefers-reduced-motion: reduce) {
  .ch-passage, .ch-passage *, .ch-mono-grand .ch-mono-barre path { animation: none !important; }
  .ch-bouton, .ch-gros-bouton, .ch-carte-dos, .ch-carte-face { transition: none; }
}

/* ---------- Catégories : les affiches (src/pages.js, planche du 5 octobre) ----------
   Une affiche par thème, de la couleur du thème sur la table, en encre verte foncée (contraste de 5,2 au moins sur les
   sept couleurs, 12 sur le crème). Relief des boutons du chemin : bord inférieur de 5 px dans la couleur du thème
   assombrie, l'affiche s'enfonce de 4 px à l'appui. Grille : deux colonnes sur téléphone (marges de 20 px, 12 px entre
   les affiches), trois entre les deux, quatre sur ordinateur dans 1120 px au plus. Page d'un thème : la grande affiche
   en tête (pleine largeur, 1120 px au plus), le reste dans une colonne de 760 px. */
body.cat8-ecran { margin: 0; }
body.cat8-ecran .app { max-width: none; padding-inline: 0; }
.cat8 [data-theme="geo"] { --th: var(--v2-th-geo); }
.cat8 [data-theme="tech"] { --th: var(--v2-th-tech); }
.cat8 [data-theme="sav"] { --th: var(--v2-th-sav); }
.cat8 [data-theme="eco"] { --th: var(--v2-th-eco); }
.cat8 [data-theme="soc"] { --th: var(--v2-th-soc); }
.cat8 [data-theme="sport"] { --th: var(--v2-th-sport); }
.cat8 [data-theme="mode"] { --th: var(--v2-th-mode); }
.cat8 [data-theme="spice"] { --th: var(--v2-th-spice); }
.cat8 [data-theme] { --th-ombre: rgba(0, 0, 0, 0.32); }
@supports (color: color-mix(in srgb, red, blue)) { .cat8 [data-theme] { --th-ombre: color-mix(in srgb, var(--th) 66%, #000); } }
.cat8-grille { width: 100%; max-width: calc(1120px + 40px); margin-inline: auto; padding-inline: 20px; box-sizing: border-box; }

/* La grille */
.cat-afs { list-style: none; margin: var(--v2-e32) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cat-afs > li { display: flex; min-width: 0; }
.cat-af { --h: 5px; position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; width: 100%; height: 224px; margin: 0 0 5px; padding: 16px; border: 0; border-radius: 20px; background: var(--th); color: var(--v2-encre); box-shadow: 0 var(--h) 0 var(--th-ombre); overflow: hidden; text-align: left; font-family: var(--v2-sans); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform 80ms ease-out, box-shadow 80ms ease-out; }
.cat-af:active { --h: 1px; transform: translateY(4px); }
.cat-af:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 3px; }
.cat-rail { display: block; width: 64px; height: 6px; border-radius: 3px; overflow: hidden; }
.cat-rail-fond { fill: rgba(13, 53, 32, 0.22); }
.cat-rail-plein { fill: var(--v2-encre); }
/* L'icône du thème en très grand, à l'encre, inclinée et coupée par le coin. */
@media (hover: hover) { .cat-af:hover { filter: brightness(1.04); } }
/* Huitième affiche : un sujet au hasard, sur le crème, le monogramme en grand. */
.cat-hasard { background: var(--v2-papier); --th-ombre: #CFC8B4; }
.cat-mono { position: absolute; right: -4px; bottom: -22px; font-family: var(--v2-serif); font-size: 112px; line-height: 1; letter-spacing: -0.02em; transform: rotate(14deg); }
.cat-mono-a { color: var(--v2-camp-a-papier); }
.cat-mono-barre { color: var(--v2-encre-2); }
.cat-mono-b { color: var(--v2-camp-b-papier); }
/* ---------- Message S (13 octobre) : Catégories, le tampon et les illustrations ----------
   Le nom court dans un tampon à l'encre #0D3520, la couleur du thème dessus, un anneau à l'intérieur (4 px d'encre puis
   2 px de la couleur du thème), coins de 12 px, incliné de 5° (pivot au milieu du bord gauche), décalé de 4 px vers le
   bas et 2 px vers la droite ; la taille, la même pour les huit, vient de ajusterTampons (pages.js). Dessous, la gravure
   du thème (src/illustrations.js), entière et centrée dans une zone à 12 px des bords et 62 px du haut (76 et 16 px à
   partir de 900 px), sans rotation. Trois tons : l'encre, le ton sombre et la lumière du thème (valeurs du message S,
   sans color-mix). Affiches de 224, 256 et 290 px de haut. */
.cat-af-nom { position: relative; z-index: 1; display: block; width: 100%; min-width: 0; }
.cat-af-mot { display: inline-block; padding: 6px 10px 3px; border-radius: 12px; background: #0D3520; color: var(--th); box-shadow: inset 0 0 0 4px #0D3520, inset 0 0 0 6px var(--th); font-family: var(--v2-gros); font-size: 25px; font-weight: 400; line-height: 1; text-transform: uppercase; white-space: nowrap; transform: rotate(-5deg); transform-origin: left center; margin: 4px 0 0 2px; }
.cat-af-zone { position: absolute; z-index: 0; left: 12px; right: 12px; top: 62px; bottom: 12px; display: grid; place-items: center; pointer-events: none; }
.cat-af-zone > .ill { display: block; width: 100%; height: 100%; }
@media (min-width: 900px) { .cat-af-mot { font-size: 32px; } .cat-af-zone { top: 76px; bottom: 16px; } }
.cat8 [data-theme="geo"] { --ill-m: #427F9A; --ill-h: #D3E9F9; }
.cat8 [data-theme="tech"] { --ill-m: #2D898D; --ill-h: #C8EFF2; }
.cat8 [data-theme="soc"] { --ill-m: #926C51; --ill-h: #FFDFD1; }
.cat8 [data-theme="eco"] { --ill-m: #7E8A37; --ill-h: #F4EFC3; }
.cat8 [data-theme="sav"] { --ill-m: #338F71; --ill-h: #CBF2E3; }
.cat8 [data-theme="sport"] { --ill-m: #925566; --ill-h: #FFD3DD; }
.cat8 [data-theme="mode"] { --ill-m: #8E6882; --ill-h: #FDDDEC; }
.cat8 [data-theme="spice"] { --ill-m: #92574F; --ill-h: #FFD4D0; }
.ill .k { fill: #0D3520; }
.ill .m { fill: var(--ill-m); }
.ill .h { fill: var(--ill-h); }
.ill .ks, .ill .hs, .ill .ms { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ill .ks { stroke: #0D3520; }
.ill .hs { stroke: var(--ill-h); }
.ill .ms { stroke: var(--ill-m); }
.ill .o { stroke: #0D3520; stroke-width: 2.6; stroke-linejoin: round; }
.ill text { font-family: var(--v2-gros); fill: var(--ill-h); }
/* Arrivée : les affiches montent l'une après l'autre. */
.cat-entree .cat-afs > li { animation: cat-monte 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.cat-entree .cat-afs > li:nth-child(2) { animation-delay: 40ms; }
.cat-entree .cat-afs > li:nth-child(3) { animation-delay: 80ms; }
.cat-entree .cat-afs > li:nth-child(4) { animation-delay: 120ms; }
.cat-entree .cat-afs > li:nth-child(5) { animation-delay: 160ms; }
.cat-entree .cat-afs > li:nth-child(6) { animation-delay: 200ms; }
.cat-entree .cat-afs > li:nth-child(7) { animation-delay: 240ms; }
.cat-entree .cat-afs > li:nth-child(8) { animation-delay: 280ms; }
@keyframes cat-monte { from { opacity: 0; transform: translateY(14px); } }
/* Petits téléphones (moins de 360 px) : nom et icône un peu plus petits, pour que rien ne se chevauche. */
@media (max-width: 359px) {
  .cat-af { padding: 14px 12px; }
  .cat-mono { font-size: 92px; bottom: -18px; }
}
@media (min-width: 600px) {
  .cat-afs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .cat-af { height: 256px; padding: 18px; }
}
@media (min-width: 900px) {
  .cat8-grille { padding-inline: var(--v2-e32); max-width: calc(1120px + 2 * var(--v2-e32)); }
  .cat-afs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .cat-af { height: 290px; padding: 20px; }
  .cat-mono { font-size: 140px; bottom: -28px; }
  .cat-rail { width: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  .cat-entree .cat-afs > li { animation: none; }
  .cat-af { transition: none; }
}

/* ---------- La page d'un thème en « gros titre » (src/pages.js, planche « Catégories et page d'un thème », 8 octobre) ----------
   League Gothic seulement en grand ; Archivo pour le reste ; aucun filet. La couleur du thème ne sert qu'au disque, aux
   anneaux, à la jauge, aux barres et au bandeau de « À débattre » (sa version papier sur les cartes). Une seule marge :
   20 px sur téléphone, 1120 px au plus sur ordinateur, en deux colonnes. */
.cat8 [data-theme="geo"], .cat-gt[data-theme="geo"] { --thp: var(--v2-th-geo-papier); }
.cat8 [data-theme="tech"], .cat-gt[data-theme="tech"] { --thp: var(--v2-th-tech-papier); }
.cat8 [data-theme="sav"], .cat-gt[data-theme="sav"] { --thp: var(--v2-th-sav-papier); }
.cat8 [data-theme="eco"], .cat-gt[data-theme="eco"] { --thp: var(--v2-th-eco-papier); }
.cat8 [data-theme="soc"], .cat-gt[data-theme="soc"] { --thp: var(--v2-th-soc-papier); }
.cat8 [data-theme="sport"], .cat-gt[data-theme="sport"] { --thp: var(--v2-th-sport-papier); }
.cat8 [data-theme="mode"], .cat-gt[data-theme="mode"] { --thp: var(--v2-th-mode-papier); }
.cat8 [data-theme="spice"], .cat-gt[data-theme="spice"] { --thp: var(--v2-th-spice-papier); }
.cat-gt { --k-m: 20px; width: 100%; max-width: calc(1120px + 2 * var(--k-m)); margin-inline: auto; padding: 0 var(--k-m) 8px; box-sizing: border-box; animation: cat-fondu 160ms ease-out both; }
@keyframes cat-fondu { from { opacity: 0; } }

/* En tête des Catégories : « Catégories » sur une ligne (86 px dès 390 et un peu moins en dessous, 200 px sur ordinateur ;
   le mot fait 3,28 fois la taille en League Gothic), le compte en menthe. */
.cat-gt-tete .cat-titre { font-size: min(86px, calc((100vw - 40px) * var(--cat-k, 0.3))); overflow-wrap: break-word; }
.cat-gt-tete .cat-compte { font-size: 30px; }
.cat-gt-tete + .cat-afs { margin-top: 28px; }

/* Les rubriques, comme dans l'Actu (styles .gt-rub du gros titre) */
.cat-gt .cat-rubriques { position: relative; display: block; margin: calc(var(--encoche) + 12px) calc(-1 * var(--k-m)) 0; padding: 4px 0; }

/* Le nom du thème : 60 px (un peu moins sous 380 px, pour que « consommation » tienne), 128 px sur ordinateur. */
.cat-gt-nom { margin: 24px 0 0; display: flex; align-items: center; gap: 12px; font-family: var(--v2-gros); font-size: min(60px, calc((100vw - 100px) / 4.45)); font-weight: 400; line-height: 0.9; letter-spacing: 0; text-transform: uppercase; color: var(--v2-texte); }
.cat-gt-nom > span:last-child { min-width: 0; padding-top: 6px; overflow-wrap: break-word; }
/* Le focus y est posé à l'ouverture, pour le lecteur d'écran : pas d'anneau sur un titre. */
.cat-gt-nom:focus { outline: none; }

/* Le tampon de Spice : un encadré calme, une petite carte A/B penchée, la règle en capitales. */
.cat-tampon { margin: 20px 0 0; display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 6px; background: rgba(0, 0, 0, 0.22); }
.cat-tampon-carte { flex: none; display: flex; align-items: center; justify-content: center; width: 46px; height: 58px; border-radius: 6px; background: var(--v2-papier); box-shadow: 0 2px 0 #CFC8B4; transform: rotate(-8deg); font-family: var(--v2-serif); font-size: 20px; line-height: 1; white-space: nowrap; }
.cat-tampon-t { font-family: var(--v2-gros); font-size: 23px; font-weight: 400; line-height: 1; text-transform: uppercase; color: var(--v2-texte); }

/* Les cartes de papier */
.cat-cols { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.cat-papier { position: relative; margin: 0; padding: 18px 16px 16px; border-radius: 6px; background: var(--v2-papier); color: var(--v2-encre); box-shadow: 0 2px 0 #CFC8B4, 0 14px 28px rgba(0, 0, 0, 0.35); }
.cat-niv { flex: none; display: inline-flex; align-items: center; min-height: 24px; padding: 1px 8px 0; border-radius: 4px; background: rgba(13, 53, 32, 0.1); font-family: var(--v2-sans); font-size: 13px; font-weight: 700; line-height: 1; color: var(--v2-encre); }
.cat-niv-crete { background: var(--v2-encre); color: var(--v2-papier); }
.cat-papier :focus-visible { outline: var(--v2-focus) solid var(--v2-encre); outline-offset: 2px; }

/* À débattre : le bandeau du thème, la question en Archivo Narrow, deux boutons */
.cat-debat { padding-top: 25px; overflow: hidden; }
.cat-debat::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 7px; background: var(--thp); }
.cat-debat-actions { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; }
.cat-encre { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 18px; border: 0; border-radius: 10px; background: var(--v2-encre); color: var(--v2-papier); font-family: var(--v2-sans); font-size: 15px; font-weight: 800; cursor: pointer; }
.cat-debat-actions .cat-encre { flex: 1 1 auto; }
@media (hover: hover) { .cat-encre:hover { background: #1A4A30; } }

/* Ton tableau : l'anneau des sujets joués, la jauge du score moyen, les trois cases */
.cat-tab-haut { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: end; }
.cat-mesure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.cat-anneau, .cat-jauge { position: relative; display: grid; place-items: center; }
.cat-anneau .cat-anneau-svg { display: block; }
.cat-anneau b { position: absolute; font-family: var(--v2-gros); font-size: 26px; font-weight: 400; line-height: 1; color: var(--v2-encre); }
.cat-jauge .cat-jauge-svg { display: block; width: 132px; height: auto; }
.cat-jauge b { position: absolute; bottom: 0; font-family: var(--v2-gros); font-size: 30px; font-weight: 400; line-height: 1; color: var(--v2-encre); }
.cat-mesure-l { font-family: var(--v2-sans); font-size: 13px; font-weight: 700; line-height: 1.25; color: var(--v2-encre-2); }
.cat-anneau-fond { fill: none; stroke: rgba(13, 53, 32, 0.12); }
.cat-anneau-plein { fill: none; stroke: var(--thp); stroke-linecap: round; }
.cat-jauge-fond, .cat-jauge-plein { fill: none; stroke-width: 10; stroke-linecap: round; }
.cat-jauge-fond { stroke: rgba(13, 53, 32, 0.12); }
.cat-jauge-plein { stroke: var(--thp); }
.cat-bareme { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.cat-bareme li { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(48px, 1fr) auto; align-items: center; gap: 12px; }
.cat-b-nom { font-family: var(--v2-sans); font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--v2-encre); }
.cat-barre { display: block; width: 100%; height: 8px; }
.cat-barre-fond { fill: rgba(13, 53, 32, 0.12); }
.cat-barre-plein { fill: var(--thp); }
.cat-b-n { font-family: var(--v2-sans); font-size: 14px; font-weight: 800; color: var(--v2-encre); white-space: nowrap; }
/* Il se remplit une fois à l'arrivée sur la page (600 ms) ; rien au mouvement réduit. */
.cat-anime .cat-anneau-plein, .cat-anime .cat-jauge-plein { animation: cat-trace 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.cat-anime .cat-barre-plein { transform-box: fill-box; transform-origin: left center; animation: cat-barre 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes cat-trace { from { stroke-dasharray: 0 var(--c); } }
@keyframes cat-barre { from { transform: scaleX(0); } }

/* Deux boutons de même largeur, 50 px de haut, en vert des liens sur le vert de la page */
.cat-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* Les sujets, repliés par sous thème : un seul ouvert à la fois */
.cat-h2 { margin: 8px 0 0; font-family: var(--v2-gros); font-size: 40px; font-weight: 400; line-height: 0.95; letter-spacing: 0; text-transform: uppercase; color: var(--v2-texte); }
.cat-subs { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.cat-sub { padding: 0; }
.cat-sub-h { margin: 0; }
.cat-sub-b { display: grid; grid-template-columns: 44px minmax(0, 1fr) 24px; align-items: center; gap: 14px; width: 100%; min-height: 72px; padding: 12px 14px; border: 0; border-radius: 6px; background: none; color: var(--v2-encre); text-align: left; cursor: pointer; }
.cat-sub-anneau { position: relative; display: grid; place-items: center; width: 44px; height: 44px; }
.cat-sub-anneau svg { position: absolute; inset: 0; }
.cat-sub-anneau b { font-family: var(--v2-sans); font-size: 13px; font-weight: 800; letter-spacing: -0.02em; color: var(--v2-encre); }
.cat-sub-nom { font-family: var(--v2-gros); font-size: 27px; font-weight: 400; line-height: 0.95; text-transform: uppercase; overflow-wrap: break-word; }
.cat-sub-chev { width: 22px; height: 22px; color: var(--v2-encre); transition: transform 160ms ease-out; }
.cat-sub-b[aria-expanded="true"] .cat-sub-chev { transform: rotate(90deg); }
.cat-sub-corps { padding: 0 14px 14px; }
.cat-qs { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cat-q { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: start; gap: 12px; width: 100%; min-height: 48px; padding: 10px 0; border: 0; background: none; color: var(--v2-encre); text-align: left; cursor: pointer; }
.cat-q .cat-rond { display: grid; place-items: center; width: 24px; height: 24px; box-sizing: border-box; border: 2.5px solid var(--thp); border-radius: 50%; color: var(--v2-papier); }
.cat-q.cat-joue .cat-rond { background: var(--thp); }
.cat-q .cat-rond svg { width: 15px; height: 15px; }
.cat-q-t { font-family: var(--v2-sans); font-size: 15px; font-weight: 700; line-height: 1.3; }
@media (hover: hover) { .cat-q:hover .cat-q-t { text-decoration: underline; text-underline-offset: 3px; } }
.cat-tirer { width: 100%; margin-top: 10px; }
.cat-a-lire .cat-a-lire-carte { margin-top: 14px; max-width: 420px; }

/* Ordinateur : deux colonnes ; à gauche le tampon, « À débattre », le tableau, les boutons et « À lire dans l'Actu »,
   à droite les sujets. */
@media (min-width: 900px) {
  .cat-gt-tete .cat-titre { font-size: min(200px, calc((min(100vw, 1184px) - 64px - 300px) * var(--cat-k, 0.3))); }
  .cat-gt-tete .cat-compte { font-size: 44px; }
  .cat-gt { --k-m: 32px; }
  .cat-gt .cat-rubriques { margin-inline: 0; }
  .cat-gt .k-themes-l { padding-inline: 0; overflow: visible; flex-wrap: wrap; }
  .cat-gt-nom { margin-top: 32px; font-size: 128px; gap: 20px; }
  .cat-cols { margin-top: 32px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; row-gap: 20px; align-items: start;
    grid-template-areas: "deb suj" "tab suj" "deux suj" "lire suj" ". suj"; grid-template-rows: auto auto auto auto 1fr; }
  .cat-debat { grid-area: deb; }
  .cat-tableau { grid-area: tab; }
  .cat-deux { grid-area: deux; }
  .cat-sujets-s { grid-area: suj; }
  .cat-a-lire { grid-area: lire; }
  .cat-h2 { margin-top: 0; font-size: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .cat-gt, .cat-anime .cat-anneau-plein, .cat-anime .cat-jauge-plein, .cat-anime .cat-barre-plein { animation: none; }
  .cat-sub-chev { transition: none; }
}
}

/* ---------- La carte en main (src/carte-jeu.js, planche « Partie seul : trois pistes », piste A, 6 octobre) ----------
   Le sujet est une carte de jeu crème, inclinée de 2,5 degrés, coins de 24 px, ombre profonde. Index du camp comme une
   carte à jouer (lettre en Instrument Serif 56 px, safran papier pour A, lilas papier pour B, « OUI » ou « NON » en
   petites capitales), retourné en bas à droite. Son contour est le chrono : trait de 5 px de la couleur du camp sur une
   piste très pâle (clock.js). Éventail de quatre petites cartes en bas, feuilles crème. 330 px de large sur téléphone,
   420 px sur ordinateur. */
.cj-ecran { --cj-c: var(--v2-encre-2); --cj-pale: rgba(13, 53, 32, 0.08); gap: 0; min-height: 100dvh; padding-bottom: 0; }
.cj-camp-a { --cj-c: var(--v2-camp-a-papier); --cj-pale: rgba(156, 78, 0, 0.14); }
.cj-camp-b { --cj-c: var(--v2-camp-b-papier); --cj-pale: rgba(109, 71, 212, 0.14); }
body:has(.cj-ecran) { margin: 0; }
body:has(.cj-ecran) .app { padding-inline: 20px; }

/* Barre légère, sans filet */
.cj-barre { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; min-height: 56px; padding-top: env(safe-area-inset-top, 0px); }
.cj-ic { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 22px; background: none; color: var(--v2-texte); cursor: pointer; }
.cj-ic svg { width: 22px; height: 22px; }
.cj-ic:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 2px; }
.cj-barre-t { margin: 0; text-align: center; font-family: var(--v2-sans); font-size: var(--v2-t15); font-weight: 800; color: var(--v2-texte); }
.cj-barre-d { display: flex; justify-content: flex-end; }
.cj-barre-d .jeu-ic { width: 44px; height: 44px; border: 0; background: none; }

/* Le temps restant */
.cj-temps { display: flex; flex-direction: column; align-items: center; margin-top: 4px; color: var(--v2-texte); }
.cj-temps b { font-family: var(--v2-serif); font-size: var(--v2-t44); font-weight: 400; line-height: 1; }
.cj-temps > span[aria-hidden] { margin-top: 2px; font-size: var(--v2-t15); font-weight: 700; color: var(--v2-texte-2); }
.cj-temps.low b { color: var(--v2-camp-a); }

/* La carte */
.cj-scene { display: flex; justify-content: center; padding: 20px 0 28px; perspective: 1400px; }
.cj-carte { position: relative; width: min(330px, 100%); transform: rotate(2.5deg); perspective: 1400px; }
.cj-pivot { position: relative; display: grid; transform-style: preserve-3d; transition: transform 400ms cubic-bezier(0.3, 0.7, 0.3, 1); }
.cj-face { grid-area: 1 / 1; position: relative; display: flex; flex-direction: column; min-height: clamp(340px, calc(100dvh - 330px), 430px); box-sizing: border-box; padding: 18px 18px 18px; border-radius: 24px; background: var(--v2-papier); color: var(--v2-encre); box-shadow: 0 2px 0 #CFC8B4, 0 22px 44px rgba(0, 0, 0, 0.42), 0 6px 14px rgba(0, 0, 0, 0.25); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cj-dos { transform: rotateY(180deg); }
.cj-montre-dos .cj-pivot { transform: rotateY(180deg); }
.cj-retourne .cj-pivot { animation: cj-retourne 600ms cubic-bezier(0.45, 0, 0.25, 1) var(--cj-delai, 0ms) both; }
/* Elle se soulève, se retourne, puis se pose ; son ombre grandit puis revient (calque sous la carte, opacity seule). */
@keyframes cj-retourne {
  0% { transform: translateY(0) scale(1) rotateY(0deg); }
  22% { transform: translateY(-14px) scale(1.04) rotateY(16deg); }
  78% { transform: translateY(-14px) scale(1.04) rotateY(170deg); }
  100% { transform: translateY(0) scale(1) rotateY(180deg); }
}
.cj-carte::before { content: ""; position: absolute; inset: 4% 3% 0; z-index: -1; border-radius: 24px; box-shadow: 0 38px 60px rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; }
.cj-retourne::before { animation: cj-ombre 600ms ease-in-out var(--cj-delai, 0ms) both; }
@keyframes cj-ombre { 40%, 60% { opacity: 1; } }
/* Le contour du chrono s'efface pendant le retournement (il ne tourne pas avec la carte), puis revient. */
.cj-retourne .cj-contour { animation: cj-contour-tourne 600ms ease-in-out var(--cj-delai, 0ms) both; }
@keyframes cj-contour-tourne { 12%, 88% { opacity: 0; } }
.cj-sous { margin: 0; font-family: var(--v2-serif); font-size: var(--v2-t21); color: var(--v2-encre-2); }
.cj-tu { font-style: italic; color: var(--cj-c); }
.cj-tu-a { color: var(--v2-camp-a-papier); }
.cj-tu-b { color: var(--v2-camp-b-papier); }
/* Le dos : les trois axes, puis le premier fait */
.cj-axes { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(13, 53, 32, 0.14); }
.cj-axes li { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: baseline; padding: 14px 0; border-bottom: 1px solid rgba(13, 53, 32, 0.14); font-family: var(--v2-serif); font-size: 25px; line-height: 1.12; transition: opacity 300ms ease; }
.cj-n { font-family: var(--v2-serif); color: var(--cj-c); }
.cj-axes[data-axe="0"] li:not([data-i="0"]), .cj-axes[data-axe="1"] li:not([data-i="1"]), .cj-axes[data-axe="2"] li:not([data-i="2"]) { opacity: 0.42; }
.cj-fait { display: grid; grid-template-columns: 28px minmax(0, 1fr); margin: 18px 0 0; font-size: var(--v2-t15); line-height: 1.45; color: var(--v2-encre-2); }
.cj-coche { color: var(--cj-c); }
.cj-coche svg { width: 20px; height: 20px; }
.cj-dos-note { margin: 0; font-size: var(--v2-t17); line-height: 1.45; color: var(--v2-encre-2); }
/* Le contour chrono, par dessus les faces */
.cj-contour { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cj-contour rect { fill: none; stroke-width: 5; }
.cj-piste { stroke: var(--cj-pale); }
.cj-trait { stroke: var(--cj-c); stroke-linecap: round; stroke-dasharray: 100 100; }
.cj-montre-dos .cj-contour, .cj-retourne .cj-contour { transform: none; }

/* En bas : la ligne, les actions, l'éventail */
.cj-pied { position: sticky; bottom: 0; z-index: 3; display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: auto; padding: 8px 0 calc(16px + env(safe-area-inset-bottom, 0px)); }
.cj-ligne { margin: 0; text-align: center; font-size: var(--v2-t15); color: var(--v2-texte-2); }
.cj-actions { display: flex; flex-direction: column; }
.cj-gros { --h: 6px; position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; min-height: var(--v2-cible-principale); margin: 0 0 6px; padding: 0 var(--v2-e24); border: 0; border-radius: var(--v2-rayon-carte); background: var(--v2-menthe); color: var(--v2-encre); box-shadow: 0 var(--h) 0 #3E8A48; font-family: var(--v2-sans); font-size: var(--v2-t17); font-weight: 800; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform 80ms ease-out, box-shadow 80ms ease-out; }
.cj-gros:active { --h: 2px; transform: translateY(4px); }
@media (hover: hover) { .cj-gros:hover { background: var(--v2-menthe-survol); } }
.cj-gros:focus-visible, .cj-camp-btn:focus-visible, .cj-petite:focus-visible, .cj-micro:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 3px; }
.cj-liens { margin: 0; text-align: center; }
.cj-liens .v2-lien { min-height: var(--v2-cible); }
/* Oui (A, safran) et Non (B, lilas) en gros boutons en relief */
.cj-choix { display: flex; flex-direction: column; gap: 10px; }
.cj-choix-l { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cj-camp-btn { --h: 6px; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 72px; margin: 0 0 6px; border: 0; border-radius: var(--v2-rayon-carte); color: var(--v2-encre); font-family: var(--v2-sans); font-size: var(--v2-t21); font-weight: 800; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform 80ms ease-out, box-shadow 80ms ease-out; }
.cj-camp-btn:active { --h: 2px; transform: translateY(4px); }
.cj-camp-btn-a { background: var(--v2-camp-a); box-shadow: 0 var(--h) 0 #A35F00; }
.cj-camp-btn-b { background: var(--v2-camp-b); box-shadow: 0 var(--h) 0 #7A5FC4; }
.cj-camp-l { font-family: var(--v2-sans); font-size: 38px; font-weight: 900; line-height: 1; letter-spacing: -0.02em; }
/* L'éventail : quatre petites cartes qui dépassent au dessus du bouton */
.cj-pied-eventail { padding-top: 0; }
.cj-eventail { display: flex; justify-content: center; gap: 2px; margin: 0 4px -46px; }
.cj-petite { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 25%; max-width: 112px; height: 128px; padding: 12px 10px; border: 0; border-radius: 12px; background: #ECE6D6; color: var(--v2-encre); box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.4) inset, 0 8px 18px rgba(0, 0, 0, 0.35); text-align: left; cursor: pointer; transform-origin: 50% 100%; transition: transform 160ms ease-out, translate 320ms cubic-bezier(0.2, 0.8, 0.2, 1); touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.cj-eventail-4 .cj-petite[data-i="0"] { transform: rotate(-9deg) translateY(10px); }
.cj-eventail-4 .cj-petite[data-i="1"] { transform: rotate(-3deg); }
.cj-eventail-4 .cj-petite[data-i="2"] { transform: rotate(3deg); }
.cj-eventail-4 .cj-petite[data-i="3"] { transform: rotate(9deg) translateY(10px); }
.cj-eventail-1 { margin-bottom: -46px; }
@media (hover: hover) { .cj-petite:hover { translate: 0 -8px; } }
.cj-petite:focus-visible { translate: 0 -8px; }
/* Feuille ouverte : sa petite carte est la feuille (cachée), les autres s'abaissent un peu. */
.cj-petite.cj-partie { opacity: 0; }
.cj-ev-ouvert .cj-petite:not(.cj-partie) { translate: 0 16px; }
/* Le titre de la petite carte qui vole jusqu'à la feuille (carte-jeu.js). */
.cj-vol { position: fixed; z-index: 3; margin: 0; white-space: nowrap; transform-origin: 0 0; pointer-events: none; }
.cj-feuille { will-change: transform; }
.cj-petite-t { font-size: 15px; font-weight: 800; letter-spacing: 0.06em; font-variant-caps: all-small-caps; }
.cj-petite-n { font-family: var(--v2-serif); font-size: 32px; line-height: 1; color: var(--cj-c); }
/* La minute : le gros bouton rond du micro */
.cj-micro-zone { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px 0 24px; }
.cj-micro { --h: 6px; display: grid; place-items: center; width: 88px; height: 88px; margin-bottom: 6px; padding: 0; border: 0; border-radius: 50%; background: var(--v2-menthe); color: var(--v2-encre); box-shadow: 0 var(--h) 0 #3E8A48; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform 80ms ease-out, box-shadow 80ms ease-out; }
.cj-micro svg { width: 32px; height: 32px; }
.cj-micro:active { --h: 2px; transform: translateY(4px); }
.cj-micro-on { animation: cj-souffle 1.6s ease-in-out infinite; }
@keyframes cj-souffle { 50% { box-shadow: 0 var(--h) 0 #3E8A48, 0 0 0 10px rgba(163, 241, 164, 0.18); } }
.cj-micro-t { margin: 0; font-size: var(--v2-t15); font-weight: 700; color: var(--v2-texte); }
.cj-bascule { font-size: var(--v2-t13); }

/* Les feuilles crème */
.cj-feuille-fond { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.cj-voile { position: absolute; inset: 0; background: rgba(4, 18, 10, 0.55); }
/* Feuilles préparées d'avance (carte-jeu.js) : mises en page, mais invisibles et hors d'atteinte. */
.cj-feuille-fond.cj-reserve { visibility: hidden; pointer-events: none; }
.cj-feuille { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 560px; max-height: 82dvh; box-sizing: border-box; padding: 8px 20px calc(20px + env(safe-area-inset-bottom, 0px)); border-radius: 24px 24px 0 0; background: var(--v2-papier); color: var(--v2-encre); box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.4);  outline: none; }
.cj-glisse { transition: none; }
.cj-poignee { align-self: center; width: 44px; height: 5px; margin: 4px 0 6px; border-radius: 3px; background: rgba(13, 53, 32, 0.25); touch-action: none; }
.cj-f-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; touch-action: none; }
.cj-f-t { margin: 0; font-family: var(--v2-serif); font-size: var(--v2-t28); font-weight: 400; color: var(--v2-encre); }
.cj-feuille .cj-ic { color: var(--v2-encre); }
.cj-feuille .cj-ic:focus-visible { outline-color: var(--v2-encre); }
.cj-f-corps { overflow-y: auto; padding-bottom: 8px; }
.cj-f-p { margin: 8px 0 0; font-size: var(--v2-t17); line-height: 1.5; }
.cj-f-note { margin: 12px 0 0; font-size: var(--v2-t15); color: var(--v2-encre-2); }
.cj-f-h { margin: 24px 0 0; font-size: 17px; font-weight: 800; letter-spacing: 0.06em; font-variant-caps: all-small-caps; color: var(--cj-c); }
.cj-f-axes, .cj-f-faits, .cj-methode { list-style: none; margin: 8px 0 0; padding: 0; }
.cj-f-axes li, .cj-f-faits li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px; padding: 12px 0; border-top: 1px solid rgba(13, 53, 32, 0.14); }
.cj-f-axes .cj-n { font-size: 25px; line-height: 1; }
.cj-f-axes b { display: block; font-family: var(--v2-serif); font-size: var(--v2-t21); font-weight: 400; line-height: 1.15; }
.cj-f-axes li > span > span { display: block; margin-top: 4px; font-size: var(--v2-t15); line-height: 1.45; color: var(--v2-encre-2); }
.cj-f-faits li { font-size: var(--v2-t15); line-height: 1.45; }
.cj-source { display: block; margin-top: 4px; font-size: var(--v2-t13); color: var(--v2-encre-2); }
.cj-methode { counter-reset: m; }
.cj-methode li { counter-increment: m; display: grid; grid-template-columns: 28px minmax(0, 1fr); padding: 6px 0; font-size: var(--v2-t15); line-height: 1.45; }
.cj-methode li::before { content: counter(m); font-family: var(--v2-serif); font-size: var(--v2-t21); line-height: 1; color: var(--cj-c); }
/* Les notes dans la feuille crème */
.cj-feuille .jeu-notes { margin: 8px 0 0; padding: 0; border: 0; background: none; color: var(--v2-encre); }
.cj-feuille .jeu-notes-tete h2 { display: none; }
.cj-feuille .jeu-notes-zone { background: #fff; color: var(--v2-encre); border: 1.5px solid rgba(13, 53, 32, 0.3); }
.cj-feuille .jeu-repere { color: var(--v2-lien-papier, #1F6B3A); }
.cj-feuille .jeu-note { color: var(--v2-encre-2); }

/* Ordinateur : carte de 420 px, centrée ; la feuille s'ouvre à droite de la carte, qui glisse à gauche. */
@media (min-width: 900px) {
  body:has(.cj-ecran) .app { max-width: 760px; }
  .cj-carte { width: 420px; }
  .cj-face { min-height: 540px; padding: 22px; }
  .cj-pied { width: 420px; align-self: center; }
  /* La carte et l'éventail glissent à gauche quand la feuille s'ouvre (body.cj-f-ouverte, posé par carte-jeu.js). */
  .cj-ecran .cj-scene, .cj-ecran .cj-pied, .cj-ecran .cj-temps { transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1); }
  body.cj-f-ouverte .cj-ecran .cj-scene, body.cj-f-ouverte .cj-ecran .cj-pied, body.cj-f-ouverte .cj-ecran .cj-temps { transform: translateX(-200px); transition-duration: 380ms; transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
  .cj-feuille-fond { align-items: center; justify-content: flex-start; }
  .cj-voile { background: rgba(4, 18, 10, 0.25); }
  .cj-feuille { position: absolute; left: calc(50% + 40px); top: 50%; width: 380px; max-height: 80vh; border-radius: 24px; padding: 8px 24px 24px; translate: 0 -50%; }
  .cj-poignee { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cj-retourne .cj-pivot { animation: none; }
  .cj-retourne .cj-dos { animation: cj-fondu 150ms ease both; }
  .cj-retourne::before, .cj-retourne .cj-contour { animation: none; }
  .cj-axes li { opacity: 1 !important; transition: none; }
  .cj-gros, .cj-camp-btn, .cj-micro, .cj-petite, .cj-pivot, .cj-scene, .cj-ecran .cj-scene, .cj-ecran .cj-pied, .cj-ecran .cj-temps { transition: none; }
  .cj-ev-ouvert .cj-petite:not(.cj-partie) { translate: none; }
  .cj-micro-on, .cj-feuille { animation: none; }
}
@keyframes cj-fondu { from { opacity: 0; } }
/* À table et en ligne : qui parle, sous la question ; l'éventail des notes suit l'écran. */
.cj-qui { display: block; font-family: var(--v2-sans); font-size: var(--v2-t17); font-weight: 800; font-style: normal; color: var(--cj-c); }
.cj-quoi { display: block; margin-top: 2px; font-family: var(--v2-sans); font-size: var(--v2-t15); color: var(--v2-encre-2); }
.cj-pied-libre { position: static; margin-top: 8px; padding-bottom: 54px; }
.jeu .cj-temps + .cj-scene { padding-top: 16px; }
.cj-eventail-3 .cj-petite[data-i="0"] { transform: rotate(-6deg) translateY(6px); }
.cj-eventail-3 .cj-petite[data-i="2"] { transform: rotate(6deg) translateY(6px); }
.cj-eventail-1 .cj-petite { transform: rotate(-3deg); }
.cj-pied-libre .cj-eventail { margin-bottom: 0; }
.cj-pied-libre .cj-petite { height: 96px; }

/* La vue (corrections du 6 octobre) : temps, carte et actions principales tiennent dans l'écran, sans défiler. La hauteur
   de .cj-vue est posée par carte-jeu.js (ajusterVue) ; la carte prend la place qui reste et garde ses proportions
   (330 sur 430), son contenu suit sa taille (unités de conteneur). Ce qui suit la vue se lit en défilant. */
body:has(.cj-vue) { margin: 0; }
.cj-vue { display: flex; flex-direction: column; min-height: 0; }
.cj-vue .cj-scene { flex: 1 1 0; min-height: 0; align-items: center; padding: 10px 0 18px; }
.cj-vue .cj-carte { container-type: size; height: 100%; max-height: 430px; width: auto; max-width: 100%; aspect-ratio: 330 / 430; }
.cj-vue .cj-pivot { height: 100%; }
.cj-vue .cj-face { min-height: 0; height: 100%; padding: 4.2cqh 5.5cqw; }
.cj-vue .cj-sous { font-size: min(21px, 4.9cqh, 6.4cqw); }
.cj-vue .cj-qui { font-size: min(17px, 4cqh, 5.2cqw); }
.cj-vue .cj-quoi { font-size: min(15px, 3.5cqh, 4.6cqw); }
.cj-vue .cj-axes li { grid-template-columns: 1.15em minmax(0, 1fr); padding: min(14px, 3.2cqh) 0; font-size: min(25px, 5.82cqh, 7.6cqw); }
.cj-vue .cj-fait { grid-template-columns: 1.9em minmax(0, 1fr); margin-top: min(18px, 4cqh); font-size: min(15px, 3.5cqh, 4.6cqw); }
.cj-vue .cj-fait > span:last-child { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cj-vue .cj-coche svg { width: 1.3em; height: 1.3em; }
.cj-vue .cj-pied { position: static; margin-top: 0; }
.cj-pied-joute { padding: 0 0 12px; gap: 8px; }
.cj-pied-joute .jeu-actions { margin: 0; }
.cj-pied-seul .cj-eventail { margin-bottom: 0; }
.cj-pied-seul .cj-petite { height: 92px; }
.cj-vue .cj-micro-zone { padding: 0 0 14px; gap: 6px; }
.cj-apres { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-bottom: 16px; }
/* Écrans bas : barre, temps et éventail se resserrent */
@media (max-height: 740px) {
  .cj-barre { min-height: 48px; }
  .cj-temps b { font-size: 36px; }
  .cj-temps > span[aria-hidden] { margin-top: 0; font-size: var(--v2-t13); }
  .cj-petite { height: 92px; padding: 8px 8px; }
  .cj-petite-n { font-size: 26px; }
  .cj-eventail { margin-bottom: -40px; }
  .cj-pied-seul .cj-petite { height: 80px; }
  .cj-micro { width: 72px; height: 72px; }
  .cj-camp-btn { min-height: 60px; }
  .cj-pied { gap: 8px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 900px) {
  .cj-vue .cj-carte { max-height: 548px; }
}
@media (max-width: 359px) { .cj-petite-t { font-size: 13px; letter-spacing: 0.02em; } }

/* ---------- L'Actu en « gros titre » (src/actu.js et src/revue.js, planches du 8 octobre au soir) ----------
   Une seule marge (20 px sur téléphone ; sur ordinateur, une grille de 12 colonnes dans 1120 px). League Gothic
   seulement en grand, 22 px au moins : la tête, la date, les rubriques, les titres en vedette, les noms des thèmes, le
   nombre de la une, les heures et le titre d'« En continu », « Plus anciens » ; Archivo pour tout le reste. Aucun filet,
   aucune petite capitale espacée, aucun italique, aucune pastille de couleur : la couleur d'un thème ne sert qu'au
   disque de son icône. Les capitales viennent du style, le texte reste en minuscules pour les lecteurs d'écran.
   Le fond (lumière et grain), la barre du bas et la ligne du logo ne changent pas. Ces règles du corps ne regardent
   que la vraie page (#app) : l'aperçu de l'Actu pendant un balayement (message K) n'y touche pas. */
:root { --v2-gros: "League Gothic", "Archivo Narrow", "Arial Narrow", sans-serif; }
body:has(:where(#app) .ac-k) { margin: 0; background: radial-gradient(130% 70% at 50% 0%, #1D5A39 0%, #123F28 48%, #0B2E1B 100%) fixed #0B2E1B; }
body:has(:where(#app) .ac-k)::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"); }
body:has(:where(#app) .ac-k) .app { position: relative; z-index: 1; max-width: none; padding-inline: 0; }
.ac-k { --k-m: 20px; width: 100%; max-width: calc(1120px + 2 * var(--k-m)); margin-inline: auto; padding-inline: var(--k-m); box-sizing: border-box; }
/* Le fond de l'Actu est fixe : son haut, plus clair (#1D5A39), passe sous n'importe quel texte pendant le défilement.
   Le texte secondaire y est un peu plus clair que dans le reste de l'appli, pour garder 4,5 de contraste partout. */
.ac-k { --v2-texte-2: #BBCEC1; }
.ac-k .k-note { margin: 16px 0 0; padding: 0; border: 0; font-size: var(--v2-t13); line-height: 1.4; color: var(--v2-texte-2); text-wrap: pretty; }
.ac-k .ac-fictif { margin-top: 16px; }

/* La tête : « L'actu du jour » sur une ligne de 320 à 1440 px (80 px à 390, plus petit en dessous, 210 px sur
   ordinateur) ; la date en menthe dessous (à droite et calée en bas sur ordinateur). */
.gt-tete { margin: 0; }
.gt-titre { margin: 20px 0 0; font-family: var(--v2-gros); font-weight: 400; font-size: min(80px, calc((100vw - 40px) * var(--gt-k, 0.228))); line-height: 0.8; letter-spacing: 0; text-transform: uppercase; color: var(--v2-texte); }
/* La taille suit la largeur (rapport mesuré avec League Gothic, un peu de marge) : la tête tient sur une ligne. Sans
   la police (Google Fonts bloqué), elle passe sur deux lignes plutôt que d'élargir la page. */
.gt-ligne { margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.gt-date { font-family: var(--v2-gros); font-size: 32px; font-weight: 400; line-height: 1; text-transform: uppercase; color: var(--v2-menthe); }

/* Les rubriques : une ligne qui défile sur téléphone (fondu sur le bord coupé, la choisie ramenée dans l'écran),
   collée en haut pendant le défilement ; sur ordinateur, une seule ligne entière. */
.ac-k .k-themes { position: sticky; top: var(--encoche); z-index: 10; display: block; margin: 16px calc(-1 * var(--k-m)) 0; padding: 4px 0; background: transparent; }
.ac-k .k-themes.k-colle { background: rgba(12, 44, 27, 0.95); box-shadow: 0 0 0 100vmax rgba(12, 44, 27, 0.95); clip-path: inset(0 -100vmax); }
.k-themes-l { display: flex; flex-wrap: nowrap; gap: 4px; padding-inline: var(--k-m); overflow-x: auto; scroll-padding-inline: var(--k-m); scrollbar-width: none; }
.k-themes-l::-webkit-scrollbar { display: none; }
.k-themes.k-a-droite .k-themes-l { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
.k-themes.k-a-gauche .k-themes-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); }
.k-themes.k-a-gauche.k-a-droite .k-themes-l { -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
.k-fleche { display: none; }
/* position: relative : la fin cachée du nom (« et monde ») reste dans la ligne qui défile, sans élargir la page. */
:is(.ac-k, .cat-gt) .gt-rub { position: relative; flex: none; display: inline-flex; align-items: center; gap: 0; min-height: 44px; margin: 0; padding: 3px 10px 0; box-sizing: border-box; border: 0; border-radius: 4px; background: none; box-shadow: none; font-family: var(--v2-gros); font-size: 27px; font-weight: 400; line-height: 1; letter-spacing: 0; text-transform: uppercase; white-space: nowrap; color: var(--gt-rub, rgba(244, 241, 232, 0.76)); cursor: pointer; }
:is(.ac-k, .cat-gt) .gt-rub[aria-pressed="true"] { background: var(--v2-menthe); color: var(--v2-encre); }
@media (hover: hover) { :is(.ac-k, .cat-gt) .gt-rub:not([aria-pressed="true"]):hover { color: var(--v2-texte); } }

/* La bulle de la première visite, sous les rubriques (étape 6, 22 octobre) : papier, coins et ombre menthe de la tuile
   « Débat libre », pointe sous le coin bas gauche ; la phrase, puis « Compris » (44 px) qui la ferme pour de bon. */
.ac-bulle { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 20px; max-width: 720px; margin: 16px 6px 30px 0; padding: 16px 16px 16px 18px; box-sizing: border-box; border-radius: 14px; background: var(--v2-papier); color: var(--v2-encre); box-shadow: 6px 7px 0 var(--v2-menthe); }
.ac-bulle::before, .ac-bulle::after { content: ""; position: absolute; left: 22px; top: 100%; border-top: 16px solid var(--v2-papier); border-right: 14px solid transparent; pointer-events: none; }
.ac-bulle::before { border-top-color: var(--v2-menthe); left: 28px; top: calc(100% + 7px); }
.ac-bulle-t { flex: 1 1 260px; margin: 0; font-family: var(--v2-sans); font-size: 17px; font-weight: 600; line-height: 1.35; text-wrap: pretty; }
.ac-bulle-ok { flex: none; min-height: 44px; min-width: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--v2-encre); color: var(--v2-papier); font-family: var(--v2-sans); font-size: 16px; font-weight: 800; cursor: pointer; }
.ac-bulle-ok:focus-visible { outline: 3px solid var(--v2-encre); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) { .ac-bulle { animation: ac-bulle-entre 220ms ease-out both; } }
@keyframes ac-bulle-entre { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* L'icône d'un thème dans son disque plein, le dessin à l'encre */
.gt-disque { display: inline-grid; place-items: center; flex: none; }
.gt-disque .ic-theme { width: 100%; height: 100%; }
.gt-d26 { width: 26px; height: 26px; }
.gt-d34 { width: 34px; height: 34px; }
.gt-d44 { width: 44px; height: 44px; }

/* La une : la photo d'un bord à l'autre (4/3, sans coins), rien dessus, le crédit dessous */
.ac-k .gt-revue { margin-top: 24px; }
.gt-une { margin: 0; }
.ac-k .gt-une-fig { display: block; margin: 0 calc(-1 * var(--k-m)); }
.ac-k .gt-une-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 0; }
.ac-k .gt-une-img img { display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 0; }
.ac-k .gt-une-fig .k-credit { margin: 8px var(--k-m) 0; }
.gt-une-texte { margin-top: 16px; }
.gt-une-theme { margin: 0; display: flex; align-items: center; gap: 8px; font-family: var(--v2-sans); font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--v2-texte); }
.ac-k .gt-une-t { margin: 12px 0 0; font-family: var(--v2-gros); font-size: 54px; font-weight: 400; line-height: 0.9; letter-spacing: 0; color: var(--v2-texte); }
.ac-k .gt-une-t .rv-lien-titre, .ac-k .gt-v-t .rv-lien-titre, .ac-k .gt-t-t .rv-lien-titre { color: var(--v2-texte); text-decoration: none; }
.ac-k .gt-meta { margin: 8px 0 0; display: block; font-family: var(--v2-sans); font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--v2-texte-2); }
.ac-k .gt-meta .rv-media, .ac-k .gt-meta time { font-weight: 600; color: inherit; }
/* Le lien du titre couvre toute la carte (rv-lien::after) ; « n médias en parlent » et « +n médias » passent dessus. */
.gt-vu { position: relative; z-index: 1; display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; margin: 8px 0 0; padding: 0; border: 0; background: none; color: var(--v2-menthe); cursor: pointer; }
.gt-vu-n { font-family: var(--v2-gros); font-size: 56px; font-weight: 400; line-height: 0.9; }
.gt-vu-t { font-family: var(--v2-sans); font-size: 15px; font-weight: 700; }
/* « +n médias » : discret partout, texte secondaire souligné ; sa cible garde 44 px sans élargir la ligne. */
.ac-k .gt-plus { position: relative; z-index: 1; display: inline; min-height: 44px; margin: -12px 0; padding: 12px 0; border: 0; background: none; font-family: var(--v2-sans); font-size: 13px; font-weight: 600; color: var(--v2-texte-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* En continu : une feuille de papier comme les cartes du jeu, 40 px sous la une, à 14 px des bords sur téléphone */
.ac-k .gt-continu { margin: 40px calc(14px - var(--k-m)) 0; padding: 20px 16px 12px; border: 0; border-radius: 6px; background: var(--v2-papier); color: var(--v2-encre); box-shadow: 0 2px 0 #CFC8B4, 0 14px 28px rgba(0, 0, 0, 0.35); }
.gt-continu-tete { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ac-k .gt-continu-t { margin: 0; font-family: var(--v2-gros); font-size: 34px; font-weight: 400; line-height: 1; letter-spacing: 0; text-transform: uppercase; color: var(--v2-encre); }
.ac-k .gt-continu-l { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 20px; }
.ac-k .gt-continu-l li { display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: start; gap: 0; margin: 0; padding: 0; border: 0; }
.ac-k .gt-continu-l li:nth-child(n+4) { display: none; }
.ac-k .gt-heure { padding-top: 1px; font-family: var(--v2-gros); font-size: 24px; font-weight: 400; line-height: 1; color: var(--v2-encre); font-variant-numeric: tabular-nums; }
.ac-k .gt-c-t { display: block; min-height: 0; padding: 0; font-family: var(--v2-sans); font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--v2-encre); text-decoration: none; }
.gt-c-sous { margin: 4px 0 0; font-family: var(--v2-sans); font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--v2-encre-2); }
.ac-k .gt-c-sous .rv-media { font-weight: 500; color: inherit; }
.ac-k .gt-continu .gt-plus { font-weight: 500; color: var(--v2-encre-2); }
.ac-k .gt-continu .gt-tout-voir { color: var(--v2-lien-papier); }

/* Les thèmes sur « À la une » : disque de 34 px, nom en capitales de 46 px, « Tout voir › » à droite ; quatre titres :
   une vedette (photo 16/10, titre de 36 px), puis trois titres sans photo. 20 px entre les titres, 38 px entre les thèmes. */
.ac-k .gt-section { margin-top: 38px; }
.ac-k .gt-continu + .gt-section { margin-top: 40px; }
/* Le nom ne se coupe jamais dans un mot : le plus long, « consommation », fait 4,4 fois la taille en League Gothic
   (202 px en 46 px) ; à côté du disque et de « Tout voir › », il tient dès 380 px. En dessous, « Tout voir › » passe
   sous le nom. Sans la police, un mot trop large passe à la ligne plutôt que d'élargir la page. */
.gt-section-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; }
.ac-k .gt-section-t { flex: 1 1 0%; min-width: 0; margin: 0; display: flex; align-items: center; gap: 12px; font-family: var(--v2-gros); font-size: 46px; font-weight: 400; line-height: 0.95; letter-spacing: 0; text-transform: uppercase; color: var(--v2-texte); }
.ac-k .gt-section-t span { min-width: 0; padding-top: 4px; }
@media (max-width: 379px) { .ac-k .gt-section-t { flex-basis: 100%; } }
.k-tout-voir { display: inline-flex; align-items: center; min-height: var(--v2-cible); padding: 0; border: 0; background: none; color: var(--v2-menthe); font-family: var(--v2-sans); font-size: var(--v2-t15); font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; }
.ac-k .gt-section-tete .gt-tout-voir { flex: none; margin-left: auto; font-family: var(--v2-sans); }
/* « Tout voir › » : le chevron à 4 px du texte, sur le vert comme sur le papier. */
.ac-k .gt-tout-voir { gap: 4px; }
.ac-k .gt-bloc { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); gap: 20px; overflow: visible; scroll-snap-type: none; }
.ac-k .gt-bloc > li { display: block; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.ac-k .gt-v-fig { display: block; }
.ac-k .gt-v-img { display: block; aspect-ratio: 16 / 10; border-radius: 2px; overflow: hidden; }
.ac-k .gt-v-img img { display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 2px; }
.ac-k .gt-v-fig .k-credit { margin: 8px 0 0; }
.gt-v-t { margin: 12px 0 0; font-family: var(--v2-gros); font-size: 36px; font-weight: 400; line-height: 0.95; letter-spacing: 0; color: var(--v2-texte); }
.gt-t-t { margin: 0; font-family: var(--v2-sans); font-size: 18px; font-weight: 800; line-height: 1.3; color: var(--v2-texte); }
.k-tuile { display: grid; place-items: center; background: radial-gradient(circle at 50% 38%, rgba(244, 241, 232, 0.09), rgba(244, 241, 232, 0) 62%), #0F3A24; border: 0; }
.ac-k .rv-tuile { border: 0; }
/* Sans photo, la tuile du thème garde son icône au centre. */
.ac-k :is(.gt-une-img, .gt-v-img).k-tuile { display: grid; place-items: center; }

/* La page d'un thème : le nom en très grand, ses titres en blocs de quatre (40 px entre les blocs), « Plus anciens »
   centré sur un pavé crème très léger. */
/* 50 px au plus (retouche de Jules du 12 octobre, 62 px avant) ; le même calcul qu'avant garde « consommation » (4,4 fois
   la taille) à côté du disque sur les plus petits écrans. Le disque fait 36 px sur téléphone, 44 sur ordinateur. */
.gt-theme-nom { margin: 24px 0 0; display: flex; align-items: center; gap: 12px; font-family: var(--v2-gros); font-size: min(50px, calc((100vw - 96px) / 4.45)); font-weight: 400; line-height: 0.9; letter-spacing: 0; text-transform: uppercase; color: var(--v2-texte); }
/* Le haut du nom, réglé pour que le disque soit centré sur les capitales (mesuré sur l'encre, à 0,5 px près). */
.gt-theme-nom > span:last-child { min-width: 0; padding-top: 3px; }
.gt-theme-nom .gt-disque { width: 36px; height: 36px; }
.ac-k .gt-blocs .gt-bloc + .gt-bloc { margin-top: 40px; }
.ac-k .rv-plus-anciens { margin-top: 40px; justify-content: center; }
.gt-plus-anciens { min-height: 48px; padding: 8px 24px 4px; border: 0; border-radius: 4px; background: rgba(244, 241, 232, 0.1); color: var(--v2-texte); font-family: var(--v2-gros); font-size: 28px; font-weight: 400; line-height: 1; letter-spacing: 0; text-transform: uppercase; cursor: pointer; }
@media (hover: hover) { .gt-plus-anciens:hover { background: rgba(244, 241, 232, 0.16); } }
/* Le titre de la section de l'édition Neutra prend le style des noms de thème ; sa carte ne change pas. */
.ac-k .gt-h2 { font-family: var(--v2-gros); font-size: 46px; font-weight: 400; line-height: 0.95; letter-spacing: 0; text-transform: uppercase; color: var(--v2-texte); }

/* Les fantômes de chargement ont la forme d'un bloc */
.ac-k .rv-fantomes.gt-bloc .rv-fantome { display: block; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.ac-k .rv-fantomes .gt-vedette .rv-visuel { aspect-ratio: 16 / 10; border-radius: 2px; background: rgba(244, 241, 232, 0.08); }
.ac-k .rv-fantomes .rv-fantome p { height: 16px; margin: 12px 0 0; border-radius: 4px; background: rgba(244, 241, 232, 0.08); }
.ac-k .rv-fantomes .rv-fantome p + p { width: 60%; height: 12px; margin-top: 8px; }

/* Un mot plus large que sa ligne (sans League Gothic, ou un nom de thème à 320 px) passe à la ligne au lieu
   d'élargir la page. */
.ac-k :is(.gt-titre, .gt-section-t, .gt-theme-nom, .gt-h2, .gt-une-t, .gt-v-t, .gt-t-t, .gt-c-t) { overflow-wrap: break-word; }
/* Les liens des titres : une cible de 44 px au moins, sans changer la mise en page (marges négatives). */
.ac-k :is(.gt-une-t, .gt-v-t, .gt-t-t) .rv-lien-titre, .ac-k .gt-continu .gt-c-t { display: block; padding: 12px 0; margin: -12px 0; }
/* Focus visible, sur le vert et sur le papier */
:is(.ac-k, .cat-gt) .gt-rub:focus-visible, .gt-vu:focus-visible, .gt-plus-anciens:focus-visible, .k-tout-voir:focus-visible, .ac-k .gt-plus:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 2px; border-radius: 4px; }
.ac-k .gt-continu :focus-visible { outline-color: var(--v2-encre); }

/* Crédit des illustrations : toujours visible, sur une ligne, sous la photo (auteur raccourci, licence entière) */
.ac-k .k-credit { position: relative; z-index: 1; margin: 8px 0 0; display: flex; flex-wrap: nowrap; gap: 4px; min-width: 0; font-size: var(--v2-t13); line-height: 1.3; color: var(--v2-texte-2); }
.ac-k .k-credit .k-credit-a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; color: inherit; }
.ac-k .k-credit a { flex: none; white-space: nowrap; color: inherit; }

/* Feuilles : les médias d'un événement, tout « En continu » (inchangées) */
.k-f-sujet { margin: 0; font-family: var(--v2-serif); font-size: var(--v2-t21); line-height: 1.2; color: var(--v2-texte); }
.k-f-liste { list-style: none; margin: 0; padding: 0; }
.k-f-liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: baseline; border-top: 1px solid var(--v2-filet); }
.k-f-lien { display: flex; flex-direction: column; gap: 2px; min-height: 44px; padding: 8px 0; color: var(--v2-texte); text-decoration: none; font-size: var(--v2-t15); }
.k-f-lien .rv-media { font-weight: 800; }
.k-f-t { color: var(--v2-texte-2); }
.k-f-liste time { font-size: var(--v2-t13); color: var(--v2-texte-2); font-variant-numeric: tabular-nums; }
.k-f-lien:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 2px; border-radius: 4px; }
.k-f-continu { margin: 0; }
.k-f-continu li { display: grid; position: relative; grid-template-columns: 56px minmax(0, 1fr); }
.k-f-continu time { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.k-f-continu .rv-continu-lien { min-height: 44px; padding: 8px 0; }
.k-avec-plus .rv-continu-lien .rv-media { padding-right: 96px; }
.k-plus { min-height: 44px; padding: 0; border: 0; background: none; color: var(--v2-lien-papier); font-family: var(--v2-sans); font-size: var(--v2-t15); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.k-plus:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 2px; border-radius: 8px; }
.k-plus-continu { position: absolute; right: 0; bottom: -6px; margin: 0; min-height: 44px; font-size: var(--v2-t13); color: var(--v2-menthe); }
.k-nw { white-space: nowrap; }
/* Espace fine des titres en français : élargie de 0,08 em, visible contre « : ». */
.k-fine { margin-left: 0.08em; }
/* Pied : « Comment on choisit nos sources » sur la marge. */
.ac-k .rv-sous { margin-top: 40px; }
.ac-k .ac-pied-page .v2-lien { padding-inline: 0; justify-content: flex-start; }

/* Ordinateur : grille de 12 colonnes dans 1120 px. Entre 600 et 899 px, la mise en page du téléphone. */
@media (min-width: 900px) {
  /* La colonne du titre peut rétrécir : sans League Gothic, le titre passe à la ligne au lieu d'élargir la page. */
  .gt-tete { display: grid; grid-template-columns: minmax(0, 1fr) auto; justify-content: space-between; align-items: end; column-gap: 24px; }
  /* 210 px sur la planche. La tête prend toute la place que lui laisse la date, sur une ligne : sa taille se règle sur
     la largeur de sa colonne (unité cqw), car la date change de largeur avec le jour (« Jeudi 8 octobre » 201 px,
     « Vendredi 9 octobre » 255 px, à 44 px) ; un calcul pour une seule date la faisait passer à la ligne. */
  .gt-titre-boite { container-type: inline-size; min-width: 0; }
  .gt-titre { margin-top: 32px; font-size: min(210px, calc(100cqw * var(--gt-k, 0.228))); }
  .gt-ligne { margin: 0; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
  .gt-date { font-size: 44px; }
  .ac-k .k-themes { margin-inline: 0; }
  /* Une ligne entière ; sans League Gothic, les rubriques passent à la ligne plutôt que d'élargir la page. */
  .ac-k .k-themes-l { padding-inline: 0; overflow: visible; flex-wrap: wrap; }
  .ac-k .gt-revue { margin-top: 32px; }
  .gt-une { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; align-items: end; }
  .ac-k .gt-une-fig { grid-column: 1 / span 7; margin: 0; }
  .ac-k .gt-une-img { aspect-ratio: 3 / 2; border-radius: 2px; }
  .ac-k .gt-une-img img { border-radius: 2px; }
  .ac-k .gt-une-fig .k-credit { margin-inline: 0; }
  .gt-une-texte { grid-column: 8 / span 5; margin: 0 0 calc(var(--v2-t13) * 1.3 + 8px); }
  .ac-k .gt-une-t { font-size: 84px; }
  .ac-k .gt-continu { margin-inline: 0; padding: 24px 24px 16px; }
  .ac-k .gt-continu-l { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 12px; }
  .ac-k .gt-continu-l li:nth-child(n+4) { display: grid; }
  .ac-k .gt-continu-l li:nth-child(n+5) { display: none; }
  .ac-k .gt-heure { font-size: 26px; }
  .ac-k .gt-c-t { font-size: 17px; }
  /* Les trois titres se suivent en haut de la colonne, la dernière rangée prend la hauteur qui reste. */
  .ac-k .gt-bloc { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr; column-gap: 16px; row-gap: 28px; align-items: start; }
  .ac-k .gt-bloc > .gt-vedette { grid-column: 1 / span 7; grid-row: 1 / span 4; }
  .ac-k .gt-bloc > .gt-court { grid-column: 8 / span 5; }
  .ac-k .gt-bloc-inverse > .gt-vedette { grid-column: 6 / span 7; }
  .ac-k .gt-bloc-inverse > .gt-court { grid-column: 1 / span 5; grid-row: auto; }
  .ac-k .gt-v-img { aspect-ratio: 16 / 9; }
  .gt-v-t { font-size: 52px; }
  .gt-t-t { font-size: 22px; }
  .gt-theme-nom { margin-top: 32px; font-size: 96px; }
  .gt-theme-nom .gt-disque { width: 44px; height: 44px; }
  .gt-theme-nom > span:last-child { padding-top: 2px; }
}

/* Les cartes du jeu en police « Affiche » (choix de Jules, 6 octobre) : Archivo Narrow à la place d'Instrument Serif,
   en gras (700) pour la question, l'index, les axes et les chiffres, en italique normal pour « Tu défends le… ».
   Tailles à environ 90 % des précédentes, réglées pour que la plus longue question de chaque thème tienne sur la carte
   à 320 px (contrôlé par scripts/navigateur/cartes-police.mjs). Le reste de l'appli garde Instrument Serif. */
.cj-temps b { font-family: var(--v2-carte); font-weight: 700; font-size: 40px; }
.cj-sous { font-family: var(--v2-carte); font-weight: 400; font-size: 19px; }
.cj-tu { font-style: italic; font-weight: 400; }
.cj-axes li { font-family: var(--v2-carte); font-weight: 700; font-size: calc(23px * var(--cj-axes, 1)); }
.cj-n { font-family: var(--v2-carte); font-weight: 700; }
.cj-petite-t { font-family: var(--v2-carte); font-weight: 700; }
.cj-petite-n { font-family: var(--v2-carte); font-weight: 700; font-size: 29px; }
.cj-f-t { font-family: var(--v2-carte); font-weight: 700; font-size: 25px; }
.cj-f-axes .cj-n { font-size: 23px; }
.cj-f-axes b { font-family: var(--v2-carte); font-weight: 700; font-size: 19px; }
.cj-methode li::before { font-family: var(--v2-carte); font-weight: 700; font-size: 19px; }
.cj-vue .cj-sous { font-size: min(19px, 4.4cqh, 5.75cqw); }
.cj-vue .cj-axes li { font-size: calc(min(21px, 4.8cqh, 6.25cqw) * var(--cj-axes, 1)); }
@media (min-width: 900px) { .cj-vue .cj-axes li { font-size: calc(min(23px, 5.25cqh, 6.85cqw) * var(--cj-axes, 1)); } }
/* Verso trop plein (carte-jeu.js, ajusterDos) : le fait sur deux lignes, ou retiré (il reste dans la feuille « Faits »). */
.cj-fait-2 .cj-fait > span:last-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cj-fait-0 .cj-fait { display: none; }
@media (min-width: 900px) {
}
@media (max-height: 740px) { .cj-temps b { font-size: 32px; } .cj-petite-n { font-size: 23px; } }
/* Les cartes « Révélée » du bilan à table, et les cartes du chemin. */
.jeu-carte-q { font-family: var(--v2-carte); font-weight: 700; font-size: 25px; }
.jeu-carte .jeu-lettre, .jeu-dos { font-family: var(--v2-carte); font-weight: 700; }
.jeu-carte-camp .jeu-lettre { font-size: 25px; }
.ch-point-q { font-family: var(--v2-carte); font-weight: 700; font-size: 43px; }
.ch-carte-dos .ch-point-q { font-size: 86px; }
.ch-face-a { font-family: var(--v2-carte); font-weight: 700; font-size: 25px; }

/* ---------- Accueil, le paquet (piste 7, maquette validée par Jules le 6 octobre) ---------- */
/* L'écran tient jusqu'aux tuiles dans la hauteur réelle (dvh), au dessus de la barre du bas ; la pile prend la place
   qui reste. La pile et le glissé : src/paquet.js, qui ne pose que transform et opacity pendant le geste. */
:root {
  --pq-oui: #178F4C; --pq-non: #D93F35;           /* tampons, sur le crème (contraste 3,8 et 4) */
  --pq-dessous: #E2DCCB;                           /* les cartes du dessous, vierges */
  --pq-max: 300px;
}
.pq { position: relative; }
html:has(body.v2-page-accueil), body.v2-page-accueil { overflow-x: clip; }
/* 12px : la marge haute de .app et le filet de la barre du bas. */
/* Message J : l'écran remonte d'environ 42 px (la pièce de la barre et son anneau, et 2 px d'air), pour que Passer et
   Je prends restent au dessus de la pièce, à toutes les largeurs. */
.pq-ecran { display: flex; flex-direction: column; height: calc(100dvh - var(--tabbar-h) - var(--barre-bas) - 12px - var(--piece-haut) - 2px); min-height: 400px; }
/* Étape 6 (22 octobre) : sur téléphone, l'écran Jouer ne défile plus. Thèmes, pile et ronds tiennent au dessus de la
   barre (la pile suit la hauteur) ; la page ne bouge pas en glissant vers le haut ou le bas. Les glissés horizontaux
   (la carte, la rangée des thèmes, le balayement entre onglets) restent permis ; la recherche garde son défilement.
   Seulement à partir de 480 px de haut : plus bas (téléphone tenu en largeur), la pile garde ses 400 px et les ronds
   passeraient sous la barre ; la page y défile comme avant.
   Étape 8 (23 octobre) : de même sur ordinateur (les trois colonnes tiennent au dessus de la barre ; mesuré de
   1280 × 720 à 1920 × 1080), à partir de 560 px de haut : plus bas, les tuiles de droite passeraient sous la barre.
   Correction du 23 octobre au soir : plus de « overflow: hidden » sur html et body. Sur iPhone, appli installée sur
   l'écran d'accueil (viewport-fit=cover, barre d'état translucide), iOS raccourcissait alors la fenêtre de la hauteur
   de la barre d'état : la barre du bas remontait de 62 points et laissait une bande vide dessous (bug WebKit 237961,
   relevé par Jules). L'écran reste immobile autrement : le contenu tient dans la hauteur (rien à faire défiler), pas
   de rebond (overscroll-behavior), et sur la pile seul le glissé horizontal est permis. */
@media (max-width: 1099px) and (min-height: 480px), (min-width: 1100px) and (min-height: 560px) {
  body.v2-page-accueil:has(.pq:not(.pq-cherche)) .app { min-height: 0; padding-bottom: 0; }
  html:has(body.v2-page-accueil .pq:not(.pq-cherche)), body.v2-page-accueil:has(.pq:not(.pq-cherche)) { overscroll-behavior: none; }
  body.v2-page-accueil:has(.pq:not(.pq-cherche)) { height: auto; }
  body.v2-page-accueil .pq:not(.pq-cherche) { touch-action: pan-x; }
}
.pq-tete { flex: none; }
.pq-grille { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* Les thèmes : une rangée de pastilles qui défile de côté (sur ordinateur, une liste à gauche). */
.pq-themes { flex: none; margin: var(--v2-e8) calc(-1 * var(--gutter)) 0; overflow-x: auto; scrollbar-width: none; }
.pq-themes::-webkit-scrollbar { display: none; }
.pq-themes-l { list-style: none; display: flex; gap: var(--v2-e8); margin: 0; padding: 0 var(--gutter) var(--v2-e4); width: max-content; }
.pq-pastille { display: inline-flex; align-items: center; gap: var(--v2-e8); min-height: var(--v2-cible); padding: 0 var(--v2-e16) 0 var(--v2-e8); border: 1px solid rgba(244, 241, 232, 0.14); border-radius: 999px; background: rgba(244, 241, 232, 0.07); color: var(--v2-texte); font-family: var(--v2-sans); font-size: var(--v2-t15); font-weight: 600; white-space: nowrap; }
.pq-pastille-ic { display: grid; place-items: center; width: 28px; height: 28px; flex: none; }
.pq-pastille-ic .ic-theme { width: 28px; height: 28px; }
.pq-tous .pq-pastille-ic { border-radius: 50%; background: var(--v2-encre); color: var(--v2-papier); }
/* « Reprendre » (9 octobre, piste C) : une pastille menthe en tête de la rangée, de la hauteur des autres, deux boutons
   côte à côte. Le rond encre et son triangle menthe, « Reprendre » en Archivo 800, le mode en petit ; la petite croix
   ronde masque la pastille, sa cible fait 44 px. */
.pq-reprise { display: flex; }
.pq-rep { display: inline-flex; align-items: stretch; min-height: var(--v2-cible); border-radius: 999px; background: var(--v2-menthe); color: var(--v2-encre); }
.pq-rep-go { display: inline-flex; align-items: center; gap: var(--v2-e8); min-height: var(--v2-cible); margin: 0; padding: 0 2px 0 var(--v2-e8); border: 0; border-radius: 999px 0 0 999px; background: none; color: inherit; font-family: var(--v2-sans); white-space: nowrap; cursor: pointer; }
.pq-rep-rond { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--v2-encre); color: var(--v2-menthe); }
.pq-rep-rond svg { width: 14px; height: 14px; }
.pq-rep-t { font-size: var(--v2-t15); font-weight: 800; }
.pq-rep-m { font-size: var(--v2-t13); font-weight: 600; }
.pq-rep-x { position: relative; display: grid; place-items: center; width: var(--v2-cible); min-height: var(--v2-cible); margin: 0; padding: 0; border: 0; border-radius: 0 999px 999px 0; background: none; color: var(--v2-encre); cursor: pointer; }
.pq-rep-x-o { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(13, 53, 32, 0.14); }
.pq-rep-x-o svg { width: 14px; height: 14px; }
.pq-rep-go:focus-visible, .pq-rep-x:focus-visible { outline: var(--v2-focus) solid var(--v2-encre); outline-offset: -4px; }
@media (hover: hover) { .pq-rep-go:hover .pq-rep-t { text-decoration: underline; text-underline-offset: 3px; } .pq-rep-x:hover .pq-rep-x-o { background: rgba(13, 53, 32, 0.24); } }
.pq-melange { width: 16px; height: 16px; }
.pq-long { display: none; }
.pq-pastille[aria-pressed="true"] { border-color: transparent; color: var(--v2-encre); }
.pq-tous[aria-pressed="true"] { background: var(--v2-papier); }
.pq-th-geo[aria-pressed="true"] { background: var(--v2-th-geo); } .pq-th-tech[aria-pressed="true"] { background: var(--v2-th-tech); }
.pq-th-soc[aria-pressed="true"] { background: var(--v2-th-soc); } .pq-th-eco[aria-pressed="true"] { background: var(--v2-th-eco); }
.pq-th-sav[aria-pressed="true"] { background: var(--v2-th-sav); } .pq-th-sport[aria-pressed="true"] { background: var(--v2-th-sport); }
.pq-th-mode[aria-pressed="true"] { background: var(--v2-th-mode); }
.pq-th-spice[aria-pressed="true"] { background: var(--v2-th-spice); }
@media (hover: hover) { .pq-pastille:not([aria-pressed="true"]):hover { background: rgba(244, 241, 232, 0.12); } }
/* Icônes de thème de l'accueil : disque plein de la couleur du thème, dessin à l'encre. */

/* Le centre : la pile et les deux ronds */
.pq-centre { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.pq-scene { flex: 1 1 auto; min-height: 0; container-type: size; display: grid; place-items: center; }
.pq-pile { position: relative; width: min(var(--pq-max), calc(100cqw - 72px), calc((100cqh - 36px) / 1.245)); aspect-ratio: 1 / 1.245; }

/* La carte : papier crème, grand A safran en haut à gauche, grand B lilas en bas à droite, coupés par le bord. */
.pq-carte { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; position: absolute; inset: 0; container-type: size; overflow: hidden; border-radius: 22px; background: var(--v2-papier); color: var(--v2-encre);
  box-shadow: 0 2px 0 #CFC8B4, 0 22px 36px rgba(0, 0, 0, 0.38), 0 6px 12px rgba(0, 0, 0, 0.22);
  transform: translateY(var(--pq-y)) rotate(calc(var(--pq-r) + var(--pq-j, 0deg))) scale(var(--pq-s)); transform-origin: 50% 62%;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.pq-r0 { --pq-r: 4deg; --pq-y: 0px; --pq-s: 1; cursor: grab; will-change: transform; }
.pq-r1 { --pq-r: -6deg; --pq-y: 10px; --pq-s: 0.955; }
.pq-r2 { --pq-r: 3deg; --pq-y: 18px; --pq-s: 0.92; }
.pq-tenue { cursor: grabbing; }
.pq-contenu { position: absolute; inset: 0; }
.pq-voile { position: absolute; inset: 0; background: var(--pq-dessous); opacity: 0; pointer-events: none; }
.pq-r1 .pq-contenu, .pq-r2 .pq-contenu { opacity: 0; }
.pq-r1 .pq-voile, .pq-r2 .pq-voile { opacity: 1; }
.pq-coin { position: absolute; display: flex; gap: 2.4cqw; }
.pq-lettre { font-family: var(--v2-sans); font-weight: 900; font-size: 42cqh; line-height: 0.72; letter-spacing: -0.04em; }
.pq-coin-a { left: -3cqw; top: -2.6cqh; align-items: flex-start; }
.pq-coin-a .pq-lettre { color: var(--v2-camp-a); }
.pq-coin-b { right: -4cqw; bottom: -4.2cqh; align-items: flex-end; }
.pq-coin-b .pq-lettre { color: var(--v2-camp-b); }
.pq-mot-camp { font-family: var(--v2-sans); font-size: 4.2cqw; font-weight: 800; letter-spacing: 0.16em; color: var(--v2-encre); }
.pq-coin-a .pq-mot-camp { margin-top: 8cqh; }
.pq-coin-b .pq-mot-camp { margin-bottom: 9cqh; }
/* La gommette du coin : jamais sous 24 px (la gommette partout, 28 octobre ; 20,7 px sur la carte de 320 px de large). */
.pq-th { position: absolute; top: 6cqh; right: 7cqw; width: max(24px, 10.5cqw); height: max(24px, 10.5cqw); }
.pq-th .ic-theme { width: 100%; height: 100%; }
.pq-num { position: absolute; top: calc(6cqh + 10.5cqw + 1.4cqh); right: 6cqw; font-size: 2.9cqw; font-weight: 600; letter-spacing: 0.04em; color: var(--v2-encre-2); }
.pq-milieu { position: absolute; left: 9cqw; right: 8cqw; top: 31cqh; }
.pq-theme { margin: 0; font-family: var(--v2-sans); font-size: 3.6cqw; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--v2-encre-2); }
.pq-q { margin: 2.2cqh 0 0; font-family: var(--v2-carte); font-size: var(--pq-taille, 9.4cqw); font-weight: 700; line-height: 1.06; letter-spacing: 0; color: var(--v2-encre); overflow-wrap: break-word; }
/* Les tampons : OUI vert en haut à gauche, NON rouge en haut à droite, penchés ; ils s'impriment pendant le glissé. */
.pq-tampon { position: absolute; top: 24cqh; padding: 0.6cqh 3cqw; border: 1.2cqw solid currentColor; border-radius: 3cqw; font-family: var(--v2-sans); font-size: 13cqw; font-weight: 900; line-height: 1; letter-spacing: 0.02em; background: rgba(244, 241, 232, 0.6); opacity: 0; pointer-events: none; }
.pq-tampon-oui { left: 6cqw; color: var(--pq-oui); transform: rotate(-14deg) scale(0.8); }
.pq-tampon-non { right: 6cqw; color: var(--pq-non); transform: rotate(14deg) scale(0.8); }

/* Les deux ronds : une croix cerclée « Passer », une coche menthe pleine « Je prends ». */
/* L'arrivée d'un nouveau joueur, point 2 (30 octobre) : le sens de chaque rond écrit dessous (pastille crème, 13 px,
   une ligne, caché aux lecteurs d'écran qui ont déjà le nom du bouton) ; les ronds écartés de 112 px (96 px sous 360 px
   de large) pour qu'aucun libellé ne touche le rond Jouer de la barre. */
.pq-ronds { flex: none; display: flex; justify-content: center; gap: 112px; padding: var(--v2-e4) 0 var(--v2-e12); }
.pq-sous { padding: 3px 9px 2px; border-radius: 999px; background: var(--pm-creme); color: var(--v2-encre); font-family: var(--v2-sans); font-size: 13px; font-weight: 800; line-height: 1.3; white-space: nowrap; }
.pq-rond { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 72px; padding: 0; border: 0; background: none; color: var(--v2-texte); font-family: var(--v2-sans); font-size: var(--v2-t13); font-weight: 700; touch-action: manipulation; transition: scale 120ms ease-out; }
.pq-rond:active { scale: 0.94; }
.pq-rond-o { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; }
.pq-rond-o svg { position: relative; width: 26px; height: 26px; }
.pq-passer .pq-rond-o { box-shadow: inset 0 0 0 2px rgba(244, 241, 232, 0.6); }
.pq-rond-fond { position: absolute; inset: 0; border-radius: 50%; background: var(--pq-non); opacity: 0; }
.pq-prendre .pq-rond-o { background: var(--v2-menthe); color: var(--v2-encre); box-shadow: 0 4px 0 #3E8A48; }
.pq-rond-halo { position: absolute; inset: -10px; z-index: -1; border-radius: 50%; background: rgba(163, 241, 164, 0.3); opacity: 0; }
/* La bulle du rond, sur ordinateur, au survol (souris) et au focus du clavier : « Passer (flèche gauche) » à gauche du rond,
   « Je prends (flèche droite) » à droite, du côté de la flèche. Les flèches du clavier passent et prennent ; la bulle le
   fait découvrir. Hors du flux, à côté du rond : rien ne bouge, elle ne couvre ni la carte ni la barre du bas. Papier et
   encre, 13 px. Le nom du bouton pour les lecteurs d'écran reste « Passer ce sujet », « Prendre ce sujet ». */
.pq-bulle { position: absolute; top: 50%; z-index: 3; padding: 6px 10px; border-radius: 8px; background: var(--v2-papier); color: var(--v2-encre); font-family: var(--v2-sans); font-size: var(--v2-t13); font-weight: 700; line-height: 1.2; white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  pointer-events: none; opacity: 0; transition: opacity 120ms ease-out, transform 120ms ease-out; }
.pq-passer .pq-bulle { right: calc(100% + 6px); transform: translate(4px, -50%); }
.pq-prendre .pq-bulle { left: calc(100% + 6px); transform: translate(-4px, -50%); }
.pq-bulle::before { content: ""; position: absolute; top: 50%; margin-top: -6px; border: 6px solid transparent; }
.pq-passer .pq-bulle::before { left: 100%; border-left-color: var(--v2-papier); }
.pq-prendre .pq-bulle::before { right: 100%; border-right-color: var(--v2-papier); }
@media (hover: hover) and (pointer: fine) {
  .pq-rond:hover .pq-bulle { opacity: 1; transform: translate(0, -50%); transition-delay: 300ms; }
}
.pq .pq-rond:focus-visible:not([data-sans-anneau]) .pq-bulle { opacity: 1; transform: translate(0, -50%); transition-delay: 0s; }
/* Téléphone et tablette en colonne étroite : pas de bulle (pas de souris, et elle sortirait de l'écran). */
@media (max-width: 899px) { .pq-bulle { display: none; } }
/* Ordinateur étroit (900 à 1199 px) : les ronds écartés de 112 px (l'arrivée, point 2) laissent moins de place à côté ;
   la bulle passe sur deux lignes plutôt que de toucher les thèmes ou les tuiles. */
@media (min-width: 900px) and (max-width: 1199px) { .pq-bulle { width: max-content; max-width: 120px; white-space: normal; text-align: center; } }
@media (prefers-reduced-motion: reduce) { .pq-passer .pq-bulle, .pq-prendre .pq-bulle { transform: translate(0, -50%); transition: opacity 120ms ease-out; } }

/* Les quatre tuiles des autres façons de jouer */
.pq-droite { flex: none; }
/* Quatre tuiles sur une ligne : chacune prend la largeur de son nom, qui ne revient jamais à la ligne (« À distance »
   est le plus long) ; la place qui reste est partagée à parts égales. */
.pq-tuiles li { display: flex; flex: 1 1 auto; min-width: 0; }
.pq-tuiles { list-style: none; display: flex; gap: var(--v2-e8); margin: 0; padding: 0 0 var(--v2-e12); }
.pq-tuile { width: 100%; min-height: 64px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: var(--v2-e8) var(--v2-e8) var(--v2-e8) 10px; border: 0; border-radius: 14px; color: var(--v2-encre); font-family: var(--v2-sans); text-align: left; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.28); }
.pq-tuile-ic { width: 20px; height: 20px; margin-bottom: 2px; }
.pq-tuile-t { font-size: clamp(12px, 3.6vw, 15px); font-weight: 800; line-height: 1.1; white-space: nowrap; }
.pq-tuile-d { font-size: 12px; font-weight: 500; line-height: 1.2; }
/* Un sous titre n'est jamais coupé (l'arrivée, point 3) : s'il ne tient pas sur une ligne, il passe sur deux. */
.pq-tuile-chemin { background: var(--v2-menthe); }
.pq-tuile-table { background: var(--v2-camp-a); }
.pq-tuile-online { background: var(--v2-camp-b); }
.pq-tuile-solo { background: var(--v2-papier); }
.pq .pq-tuile:focus-visible, .pq .pq-pastille:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 3px; }
/* Ronds : au clavier, un anneau autour du rond (jamais un cadre autour du bouton et de son nom) ; après un geste au
   doigt ou à la souris, le focus rendu par la feuille ne montre rien (data-sans-anneau, retiré à la première touche). */
.pq .pq-rond:focus, .pq .pq-rond:focus-visible { outline: none; }
.pq .pq-rond:focus-visible .pq-rond-o { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 4px; }
.pq .pq-rond[data-sans-anneau]:focus-visible .pq-rond-o { outline: none; }
/* « Lancer la pièce » : le même principe ; au clavier, l'anneau suit l'arrondi du bouton. */
.sheet .pq-f-bouton:focus-visible { border-radius: var(--v2-rayon); }
.sheet .pq-f-bouton[data-sans-anneau]:focus-visible { outline: none; }

/* Petits écrans : la pile rétrécit (elle suit la hauteur), les tuiles perdent leur deuxième ligne. */
@media (max-height: 700px), (max-width: 359px) {
  .pq-tuile-d { display: none; }
  .pq-tuile { min-height: 52px; }
  .pq-ronds { padding-bottom: var(--v2-e8); }
  .pq-rond-o { width: 50px; height: 50px; }
}
@media (max-width: 359px) { .pq-ronds { gap: 96px; } }
@media (max-height: 600px) {
  .pq-tuile-ic { display: none; }
  .pq-tuile { min-height: 44px; justify-content: center; }
  .pq-rond-o { width: 46px; height: 46px; }
  .pq-ronds { padding-bottom: var(--v2-e4); }
}
@media (max-width: 359px) {
  .pq-tuiles { gap: 6px; }
  .pq-tuile { padding-inline: 6px; }
  .pq-tuile-t { letter-spacing: -0.01em; }
}

/* La feuille « Ce sujet est à toi. » et la pièce (au centre sur ordinateur) */
.pq-feuille { display: flex; flex-direction: column; gap: var(--v2-e8); }
.pq-f-theme { display: flex; align-items: center; gap: var(--v2-e8); font-size: var(--v2-t13); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--v2-texte-2); }
.pq-f-theme .ic-theme { width: 22px; height: 22px; }
.pq-f-t { margin: var(--v2-e4) 0 0; font-family: var(--v2-carte); font-size: 34px; font-weight: 700; line-height: 1.05; color: var(--v2-texte); }
.pq-f-t:focus { outline: none; }
.pq-f-q { font-size: var(--v2-t17); line-height: 1.4; color: var(--v2-texte-2); }
.pq-tirage { display: flex; align-items: center; gap: var(--v2-e16); margin: var(--v2-e24) 0 var(--v2-e16); min-height: 96px; }
.pq-piece-saut { flex: none; perspective: 600px; }
.pq-piece { position: relative; width: 88px; height: 88px; border-radius: 50%; overflow: hidden; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.3); transform-style: preserve-3d; }
.pq-piece-a, .pq-piece-b { position: absolute; inset: 0; display: grid; padding: 12px 16px; font-family: var(--v2-sans); font-size: 34px; font-weight: 900; line-height: 1; color: var(--v2-encre); }
.pq-piece-a { background: var(--v2-camp-a); clip-path: polygon(0 0, 100% 0, 0 100%); align-content: start; justify-content: start; }
.pq-piece-b { background: var(--v2-camp-b); clip-path: polygon(100% 0, 100% 100%, 0 100%); align-content: end; justify-content: end; }
.pq-piece-pleine { clip-path: none; place-content: center; padding: 0; font-size: 46px; }
.pq-tirage-t { min-width: 0; }
.pq-tirage-l { font-size: var(--v2-t15); line-height: 1.4; color: var(--v2-texte-2); }
.pq-tu { font-family: var(--v2-carte); font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--v2-texte); }
.pq-tu-a { color: var(--v2-camp-a); }
.pq-tu-b { color: var(--v2-camp-b); }
.pq-f-bouton { width: 100%; }
.pq-f-retour { align-self: center; }

/* Entre 900 et 1100px : la colonne du téléphone, centrée. */
@media (min-width: 900px) and (max-width: 1099px) { .pq { max-width: 560px; } }
/* Ordinateur, à partir de 1100px : les thèmes en liste à gauche, la pile au centre, les tuiles à droite. */
@media (min-width: 1100px) {
  :root { --pq-max: 480px; } /* la colonne décide : 472 px à 1440 px (100cqw moins 72) */
  .pq-grille { display: grid; grid-template-columns: 230px minmax(0, 1fr) 210px; grid-template-rows: minmax(0, 1fr); column-gap: var(--v2-e48); align-items: center; padding-bottom: var(--v2-e16); }
  /* Sur un écran bas, avec des parties à reprendre, la liste des thèmes défile dans sa colonne (jamais sous la barre). */
  .pq-themes { max-height: 100%; margin: 0 -4px; padding: 4px; overflow: hidden auto; scrollbar-width: thin; }
  .pq-themes-l { flex-direction: column; width: auto; padding: 0; gap: 6px; }
  /* Cibles de 44 px partout, ordinateur compris (règle « Avant chaque poussée », 9 octobre). */
  .pq-pastille { width: 100%; min-height: var(--v2-cible); padding: 0 var(--v2-e12) 0 10px; font-size: var(--v2-t13); }
  .pq-pastille-ic, .pq-pastille-ic .ic-theme { width: 24px; height: 24px; }
  /* « Reprendre » : la première ligne de la liste, de la hauteur des autres (44 px). */
  .pq-rep { width: 100%; min-height: var(--v2-cible); }
  /* Dans la colonne de 230 px, le mode passe sous « Reprendre », dans la même hauteur. */
  .pq-rep-go { flex: 1; min-width: 0; min-height: var(--v2-cible); padding-left: 10px; display: grid; grid-template-columns: 24px minmax(0, 1fr); grid-template-rows: auto auto; gap: 0 var(--v2-e8); align-content: center; text-align: left; }
  .pq-rep-rond { grid-row: 1 / span 2; width: 24px; height: 24px; }
  .pq-rep-rond svg { width: 12px; height: 12px; }
  .pq-rep-t { font-size: var(--v2-t13); line-height: 1.1; }
  .pq-rep-m { min-width: 0; overflow: hidden; text-overflow: ellipsis; line-height: 1.1; }
  .pq-court { display: none; }
  .pq-long { display: inline; }
  .pq-centre { height: 100%; }
  .pq-tuiles { flex-direction: column; gap: var(--v2-e12); padding: 0; }
  .pq-tuile-t { font-size: var(--v2-t15); }
  .pq-tuile { min-height: 72px; padding: var(--v2-e12) var(--v2-e16); }
}

/* ---------- Les défis du jour : la carte du fait du jour et le duel (lot 6, puis lot 7) ----------
   docs/messages/Le débat du jour, la page/ (lot 6) puis docs/messages/Progrès, les défis du jour/ (lot 7). La page de
   l'accueil et sa pastille « Du jour » sont retirées au lot 7 : les défis vont dans le bloc « Aujourd'hui » de Progrès.
   src/du-jour.js. */
/* La carte du fait du jour (lot 6, point 3 ; ouverte depuis sa tuile de Progrès au lot 7) : valeurs du prototype. Dos
   vert profond, filet sauge de 3 px, le grand « ? » sauge ; elle se retourne (700 ms). Recto crème, 262 px de haut au
   moins (la carte grandit si le fait est long) : la bande et la pastille du thème dans sa couleur, l'accroche en League
   Gothic 44, le fait en Archivo Narrow 700 18 px, la source en pastille encre et « Débattre ». Les deux faces sont
   empilées dans la même case de grille : la carte prend la hauteur de la plus grande. */
.dj-mys { position: relative; perspective: 1100px; }
.dj-rv { position: relative; display: grid; transform-style: preserve-3d; }
.dj-face { grid-area: 1 / 1; position: relative; box-sizing: border-box; min-height: 262px; margin: 0; border: 0; border-radius: 24px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; font-family: var(--v2-sans); }
.dj-dos { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 0; background: radial-gradient(circle at 50% 50%, #1E5A3A 0%, #0F3B24 70%); box-shadow: inset 0 0 0 3px var(--v2-th-sav); color: var(--v2-texte); text-align: center; cursor: pointer; }
.dj-puce { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; font-size: 13px; font-weight: 800; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.dj-puce-th { background: var(--th); color: var(--pl-encre); }
.dj-myst { display: grid; place-items: center; width: 80px; height: 80px; padding-top: 6px; box-sizing: border-box; border-radius: 50%; background: var(--v2-th-sav); color: var(--pl-encre); font-family: var(--v2-gros); font-size: 60px; line-height: 1; }
.dj-recto { display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 14px 24px; background: var(--v2-papier); color: var(--pl-encre); transform: rotateY(180deg); }
.dj-recto::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; background: var(--th); }
.dj-recto:focus { outline: none; }
.dj-recto:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 3px; }
.dj-recto-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; }
.dj-accroche { margin: 2px 0 -2px; font-family: var(--v2-gros); font-size: 44px; font-weight: 400; line-height: 0.9; text-transform: uppercase; overflow-wrap: break-word; }
.dj-fait { margin: 0; font-family: var(--v2-carte); font-size: 18px; font-weight: 700; line-height: 1.15; }
.dj-recto-b { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 48px; }
.dj-source { white-space: nowrap; padding: 2px 9px; border-radius: 999px; background: var(--pl-encre); color: var(--v2-papier); font-size: 13px; font-weight: 800; line-height: 1.3; }
.dj-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin-left: auto; padding: 0 20px; border: 0; border-radius: 14px; background: var(--pl-encre); color: var(--v2-papier); font-family: var(--v2-sans); font-size: 16px; font-weight: 800; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25); cursor: pointer; }
.dj-btn:focus-visible { outline: var(--v2-focus) solid var(--pl-encre); outline-offset: 3px; }
.dj-mys .dj-fait-tampon, .dj-duel .dj-fait-tampon { flex: none; padding: 1px 8px 0; border-width: 3px; color: var(--pm-brique); font-size: 22px; transform: rotate(-4deg); }
.dj-retournee .dj-rv { transform: rotateY(180deg); }
.dj-tourne .dj-rv { animation: dj-retourne 700ms cubic-bezier(0.4, 0, 0.2, 1) both; }
@keyframes dj-retourne { from { transform: rotateY(0); } to { transform: rotateY(180deg); } }
@media (prefers-reduced-motion: reduce) { .dj-tourne .dj-rv { animation: none; } }
.dj-attente { min-height: 262px; }
/* Le duel (point 4) : la carte coupée en diagonale, safran (A, le oui) et lilas (B, le non), les grandes lettres en
   filigrane, la pastille encre « La pièce choisit ton camp », la question dans une bulle crème, « Lancer la pièce » (la
   pièce coupée qui hésite), puis « Tu ouvres par le oui » et « Top » ; à la fin, le tampon du résultat, « +2 pièces »
   et « Rejouer ». La carte grandit si la question est longue (222 px au moins). La même carte, avec le tampon du camp,
   le grand anneau et les trois marques, est l'arène de la minute dans l'écran du mode Seul (.dj-arene). */
.dj-duel, .dj-arene { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; box-sizing: border-box; min-height: 222px; padding: 12px 18px 14px; border-radius: 24px; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.3); color: var(--pl-encre); font-family: var(--v2-sans); isolation: isolate; }
.dj-moitie { position: absolute; inset: 0; z-index: -1; border-radius: 24px; overflow: hidden; transition: opacity 0.35s ease; }
.dj-moitie-a { background: var(--v2-camp-a); clip-path: polygon(0 0, 58% 0, 42% 100%, 0 100%); }
.dj-moitie-b { background: var(--v2-camp-b); clip-path: polygon(58% 0, 100% 0, 100% 100%, 42% 100%); }
.dj-L { position: absolute; font-family: var(--v2-sans); font-size: 120px; font-weight: 900; line-height: 0.78; color: rgba(6, 20, 12, 0.16); }
.dj-moitie-a .dj-L { left: 8px; top: 6px; } .dj-moitie-b .dj-L { right: 4px; bottom: -6px; }
.dj-eteint { opacity: 0.22; }
.dj-duel-haut { display: flex; align-items: center; justify-content: center; gap: 8px; }
.dj-puce-encre { background: var(--pl-encre); color: var(--v2-menthe); }
.dj-duel .dj-duel-fait { padding: 0 6px; font-size: 18px; color: var(--pl-encre); }
.dj-bulle { align-self: stretch; margin: 0 12px; padding: 10px 14px; border-radius: 16px; background: var(--v2-papier); color: var(--pl-encre); box-shadow: 4px 5px 0 rgba(6, 20, 12, 0.3); text-align: center; font-family: var(--v2-carte); font-size: 19px; font-weight: 700; line-height: 1.1; }
.dj-duel-bas { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.dj-lancer { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px 0 8px; border: 0; border-radius: 999px; background: var(--pl-encre); color: var(--v2-papier); font-family: var(--v2-sans); font-size: 16px; font-weight: 800; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3); white-space: nowrap; cursor: pointer; }
.dj-lancer:focus-visible, .dj-duel .dj-btn:focus-visible { outline: var(--v2-focus) solid var(--pl-encre); outline-offset: 3px; }
.dj-lancer-piece { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--v2-camp-a) 50%, var(--v2-camp-b) 50%); box-shadow: inset 0 0 0 3px var(--v2-papier); animation: dj-hesite 2.4s ease-in-out 1.4s 2; }
.dj-annonce { white-space: nowrap; padding: 7px 12px 4px; border-radius: 12px; background: var(--v2-papier); color: var(--pl-encre); box-shadow: 0 3px 0 rgba(6, 20, 12, 0.3); font-family: var(--v2-gros); font-size: 26px; font-weight: 400; line-height: 1; text-transform: uppercase; animation: dj-pop 420ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.dj-lance .dj-duel-bas { visibility: hidden; }
.dj-jeton { position: absolute; left: 50%; bottom: 14px; margin-left: -32px; z-index: 2; }
.dj-jeton .pq-piece { width: 64px; height: 64px; }
.dj-jeton .pq-piece-a, .dj-jeton .pq-piece-b { padding: 8px 11px; font-size: 25px; }
.dj-jeton .pq-piece-pleine { padding: 0; font-size: 34px; }
/* Le résultat, et le tampon du camp pendant la minute : League Gothic 32, crème, double filet encre, penché. */
.dj-duel-fini, .dj-arene { justify-content: center; }
.dj-duel-scene, .dj-arene-scene { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dj-duel-scene { margin: auto 0; }
.dj-duel-scene .dj-duel-bas { margin-top: 0; }
.dj-tampon { max-width: 92%; margin: 0; padding: 7px 14px 4px; border: 3px solid var(--pl-encre); border-radius: 12px; background: var(--v2-papier); color: var(--pl-encre); box-shadow: inset 0 0 0 2.5px var(--v2-papier), inset 0 0 0 4.5px var(--pl-encre); font-family: var(--v2-gros); font-size: 32px; font-weight: 400; line-height: 1; text-align: center; text-transform: uppercase; transform: rotate(-4deg); }
.dj-tampon:focus { outline: none; }
/* L'anneau et les marques sur une pastille crème : posés sur une moitié éteinte (le vert sombre sous 22 % de safran),
   l'encre n'aurait pas le contraste voulu (écart avec la planche, où ils sont à même la carte). */
.dj-compte { display: flex; align-items: center; gap: 14px; padding: 6px 16px 6px 6px; border-radius: 999px; background: var(--v2-papier); box-shadow: 0 3px 0 rgba(6, 20, 12, 0.3); }
.dj-grand { position: relative; width: 84px; height: 84px; }
.dj-grand svg { width: 84px; height: 84px; transform: rotate(-90deg); }
.dj-grand-fond, .dj-grand-arc { fill: none; stroke-width: 7; }
.dj-grand-fond { stroke: rgba(6, 20, 12, 0.16); }
.dj-grand-arc { stroke: var(--pl-encre); stroke-linecap: round; }
.dj-grand b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--v2-gros); font-size: 40px; font-weight: 400; line-height: 1; color: var(--pl-encre); }
.dj-etapes { display: flex; gap: 6px; }
.dj-etapes i { width: 30px; height: 12px; box-sizing: border-box; border: 2.5px solid var(--pl-encre); border-radius: 6px; }
.dj-etapes .dj-pleine { background: var(--pl-encre); }
.dj-arene { overflow: hidden; }
.dj-arene .dj-bulle { margin: 0; }
.dj-flash { position: absolute; inset: 0; z-index: 3; background: #FFFFFF; opacity: 0; pointer-events: none; animation: dj-flash 500ms ease both; }
.dj-bascule { position: absolute; left: 50%; top: 50%; z-index: 4; padding: 10px 18px 6px; border: 4px solid var(--pl-encre); border-radius: 14px; background: var(--v2-menthe); color: var(--pl-encre); box-shadow: 0 6px 0 rgba(6, 20, 12, 0.4); font-family: var(--v2-gros); font-size: 54px; font-weight: 400; line-height: 1; white-space: nowrap; transform: translate(-50%, -50%) rotate(-6deg); pointer-events: none; animation: dj-bascule 1100ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
/* L'écran de la minute du duel : l'arène prend la place des deux cartes. */
.dj-arene-zone { display: block; padding: 6px 0 4px; }
@keyframes dj-hesite { 0%, 70%, 100% { transform: none; } 78% { transform: rotate(-16deg); } 86% { transform: rotate(12deg); } 93% { transform: rotate(-6deg); } }
@keyframes dj-pop { 0% { opacity: 0; transform: scale(0.6); } 70% { opacity: 1; transform: scale(1.05); } 100% { opacity: 1; transform: none; } }
@keyframes dj-flash { 0% { opacity: 0.55; } 100% { opacity: 0; } }
@keyframes dj-bascule { 0% { opacity: 0; transform: translate(-50%, -50%) scale(2.2) rotate(-24deg); } 55% { opacity: 1; transform: translate(-50%, -50%) scale(0.92) rotate(-4deg); } 80% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-6deg); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1) rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) {
  .dj-lancer-piece, .dj-annonce { animation: none; }
  .dj-moitie { transition: none; }
  .dj-flash { display: none; }
  .dj-bascule { animation: none; }
}

/* ---------- Le bloc « Aujourd'hui » en tête de Progrès (lot 7, 1er novembre au soir) ----------
   docs/messages/Progrès, les défis du jour/ (prototype.dc.html, « Le trio compact, sur l'appli.png », maquette.mjs) :
   le titre en League Gothic 34 et le compteur sauge (le chiffre en League Gothic 22) ; le ticket du débat du jour tel
   qu'il est ; le trio compact : deux tuiles boutons de 172 px, deux colonnes, écart de 12 px, rayon de 22 px. Le fait :
   vert profond, filet sauge de 3 px, « ? » sauge de 46 px qui luit, pièce safran « +1 » de 38 px, titre League Gothic 28,
   étiquette sauge « 1 par jour » ; lu, la coche (rond encre de 34 px, coche menthe), l'accroche et « Lu · » le thème.
   Le duel : les moitiés en diagonale, A et B en filigrane de 80 px, la pièce A et B de 46 px, « +2 » à gauche,
   étiquette encre « 2 bascules » ; joué, la coche à gauche et « Tenu ». Touchée, une tuile s'agrandit (380 ms, depuis
   son coin) ; le fait se retourne ensuite (700 ms, après 300 ms) ; l'autre défi passe en barre de 64 px dessous. Les
   trois faits : la ligne « 3 sur 3, à demain » et ses trois coches. Seule exception à la règle « aucune animation en
   boucle sur Progrès » (consignes du plateau), voulue par Jules le 2 novembre, comme le prototype : le halo du « ? »
   respire toutes les 1,8 s et la pièce du duel hésite toutes les 2,4 s, sur ces deux tuiles seulement ; une tuile
   faite n'a plus ni « ? » ni pièce, donc plus rien ne bouge ; rien en mouvement réduit. src/du-jour.js. */
.pj { margin-top: 18px; color: var(--v2-texte); font-family: var(--v2-sans); }
.pj-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 2px; }
.pj-titre { margin: 0; font-family: var(--v2-gros); font-size: 34px; font-weight: 400; line-height: 1; letter-spacing: 0; text-transform: uppercase; color: var(--v2-texte); }
.pj-titre:focus { outline: none; }
.pj-compte { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border-radius: 999px; background: var(--v2-th-sav); color: var(--pl-encre); font-size: 14px; font-weight: 800; white-space: nowrap; }
.pj-compte b { font-family: var(--v2-gros); font-size: 22px; font-weight: 400; line-height: 1; padding-top: 2px; }
.pj .pl-ticket { margin-top: 12px; }
.pj-zone { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.pj-deux { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.pj-tuile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 6px; box-sizing: border-box; height: 172px; margin: 0; padding: 12px; border: 0; border-radius: 22px; overflow: hidden; font-family: var(--v2-sans); text-align: left; box-shadow: 0 5px 0 rgba(0, 0, 0, 0.3); cursor: pointer; isolation: isolate; }
.pj-tuile:focus-visible, .pj-barre:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 3px; }
.pj-tt { position: relative; display: block; max-width: 100%; font-family: var(--v2-gros); font-size: 28px; font-weight: 400; line-height: 0.95; text-transform: uppercase; overflow-wrap: break-word; }
.pj-etiq { position: relative; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 26px; padding: 0 10px; border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-t-fait { background: radial-gradient(circle at 50% 38%, #1E5A3A 0%, #0F3B24 75%); box-shadow: inset 0 0 0 3px var(--v2-th-sav), 0 5px 0 rgba(0, 0, 0, 0.3); color: var(--v2-texte); }
.pj-t-fait .pj-etiq { background: var(--v2-th-sav); color: var(--pl-encre); }
.pj-q { position: absolute; left: 12px; top: 12px; display: grid; place-items: center; box-sizing: border-box; width: 46px; height: 46px; padding-top: 4px; border-radius: 50%; background: var(--v2-th-sav); color: var(--pl-encre); font-family: var(--v2-gros); font-size: 34px; line-height: 1; box-shadow: 0 0 0 5px rgba(82, 216, 180, 0.22), 0 0 18px rgba(82, 216, 180, 0.5); animation: pj-lueur 1.8s ease-in-out infinite; }
.pj-plus { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; box-sizing: border-box; width: 38px; height: 38px; padding-top: 2px; border-radius: 50%; background: var(--v2-camp-a); color: var(--pl-encre); font-family: var(--v2-gros); font-size: 19px; line-height: 1; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); transform: rotate(-10deg); }
.pj-coche { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--pl-encre); color: var(--v2-menthe); animation: dj-pop 420ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.pj-coche svg { width: 18px; height: 18px; }
.pj-t-duel { background: none; color: var(--pl-encre); }
.pj-t-duel .dj-moitie { border-radius: 22px; }
.pj-t-duel .dj-L { font-size: 80px; }
.pj-piece { position: absolute; right: 12px; top: 12px; box-sizing: border-box; width: 46px; height: 46px; border-radius: 50%; border: 4px solid var(--pl-encre); background: linear-gradient(135deg, var(--v2-camp-a) 50%, var(--v2-camp-b) 50%); box-shadow: 0 4px 0 rgba(6, 20, 12, 0.3); animation: dj-hesite 2.4s ease-in-out 1.4s infinite; }
.pj-t-duel .pj-plus { right: auto; left: 8px; }
.pj-t-duel .pj-etiq { background: var(--pl-encre); color: var(--v2-menthe); }
.pj-t-duel .pj-coche { right: auto; left: 10px; }
/* La barre de l'autre défi, quand l'un est ouvert. */
.pj-barre { display: flex; align-items: center; gap: 12px; box-sizing: border-box; width: 100%; min-height: 64px; margin: 0; padding: 8px 14px 8px 10px; border: 0; border-radius: 18px; background: var(--pm-brique); color: var(--v2-texte); font-family: var(--v2-sans); text-align: left; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3); cursor: pointer; }
.pj-barre b { flex: 1; min-width: 0; padding-top: 3px; font-family: var(--v2-gros); font-size: 26px; font-weight: 400; line-height: 1; text-transform: uppercase; }
.pj-rq { display: grid; place-items: center; flex: none; box-sizing: border-box; width: 44px; height: 44px; padding-top: 4px; border-radius: 50%; background: var(--v2-th-sav); color: var(--pl-encre); font-family: var(--v2-gros); font-size: 30px; line-height: 1; }
.pj-rp { flex: none; box-sizing: border-box; width: 44px; height: 44px; border-radius: 50%; border: 4px solid var(--pl-encre); background: linear-gradient(135deg, var(--v2-camp-a) 50%, var(--v2-camp-b) 50%); }
.pj-barre .pj-etiq { flex: none; background: var(--pl-encre); color: var(--v2-menthe); }
/* Le fait en grand : la carte du lot 6, 262 px ; le dos ne montre que le « ? » ; le bouton fermer à la place de la pièce. */
.pj-fermer { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--pl-encre); color: var(--v2-papier); cursor: pointer; }
.pj-fermer svg { width: 20px; height: 20px; }
.pj-fermer:focus-visible { outline: var(--v2-focus) solid var(--pl-encre); outline-offset: 3px; }
.pj-fermer-papier { background: var(--v2-papier); color: var(--pl-encre); }
.pj-grand-duel .dj-duel { min-height: 238px; }
.pj-grand-duel .dj-duel-haut { align-self: stretch; justify-content: space-between; margin: -2px -8px 0 -4px; }
.pj-grand-fait.pj-grandit { transform-origin: left top; animation: pj-grandit 380ms cubic-bezier(0.2, 0.8, 0.3, 1) both; }
.pj-grand-duel.pj-grandit { transform-origin: right top; animation: pj-grandit 380ms cubic-bezier(0.2, 0.8, 0.3, 1) both; }
.pj-grand-fait.dj-tourne .dj-rv { animation-delay: 300ms; }
/* Les trois défis faits : le bloc replié. */
.pj-replie { display: flex; align-items: center; gap: 14px; box-sizing: border-box; min-height: 84px; margin-top: 12px; padding: 12px 14px; border-radius: 22px; background: var(--pm-brique); box-shadow: inset 0 0 0 3px var(--v2-th-sav), 0 5px 0 rgba(0, 0, 0, 0.3); animation: dj-pop 420ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.pj-trois { display: flex; flex: none; }
.pj-trois i { display: grid; place-items: center; box-sizing: border-box; width: 40px; height: 40px; margin-right: -8px; border-radius: 50%; border: 3px solid var(--pm-brique); background: var(--v2-menthe); color: var(--pl-encre); }
.pj-trois svg { width: 18px; height: 18px; }
.pj-replie b { flex: 1; min-width: 0; margin-left: 8px; padding-top: 3px; font-family: var(--v2-gros); font-size: 30px; font-weight: 400; line-height: 1; text-transform: uppercase; }
@keyframes pj-lueur { 0%, 100% { box-shadow: 0 0 0 5px rgba(82, 216, 180, 0.25), 0 0 16px rgba(82, 216, 180, 0.45); } 50% { box-shadow: 0 0 0 8px rgba(82, 216, 180, 0.18), 0 0 28px rgba(82, 216, 180, 0.7); } }
@keyframes pj-grandit { from { opacity: 0.6; transform: scale(0.48, 0.66); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .pj-q, .pj-piece, .pj-coche, .pj-replie, .pj-grand-fait.pj-grandit, .pj-grand-duel.pj-grandit { animation: none; }
}
/* Sur ordinateur : le bloc prend la place du ticket, dans la colonne de 440 px. */
@media (min-width: 1000px) { .pl-grille > .pj { grid-column: 2; margin: 0; } }

/* ---------- L'arrivée d'un nouveau joueur : les cartes d'accueil de la pile (30 octobre) ----------
   Planche « L'arrivée, ajustée à toutes les tailles » et maquette-cartes.mjs (constante STYLE), dans
   docs/messages/L'arrivée d'un nouveau joueur/. Tailles en unités de la carte (.pq-carte est container-type: size) ;
   aucun texte sous 13 px : quand la carte est basse, l'étiquette part et les modes se rangent en pastilles. Le titre
   vient d'abord dans le code (le lecteur d'écran le lit en premier), l'étiquette remonte en tête à l'écran. Sur une
   carte d'accueil, pas de tampon OUI ni NON pendant le glissé. */
.pq-accueil .pq-tampon { display: none; }
.ob { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; gap: max(8px, 3cqh); padding: max(14px, 6cqw); border-radius: inherit; background: var(--pm-creme); color: var(--v2-encre); font-family: var(--v2-sans); text-align: left; }
.ob-etiq { order: -1; align-self: flex-start; padding: 5px 10px 4px; border-radius: 999px; background: var(--v2-encre); color: var(--pm-creme); font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.ob-t { margin: 0; font-family: var(--pm-gros); font-size: clamp(28px, 15cqw, 50px); font-weight: 400; line-height: .9; text-transform: uppercase; }
.ob-t.petit { font-size: clamp(26px, 12.5cqw, 42px); }
.ob-ligne { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ob-tampon { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 4px; border: 3px solid var(--v2-encre); border-radius: 12px; font-size: 13px; font-weight: 900; line-height: 1.15; text-transform: uppercase; box-shadow: 0 3px 0 var(--v2-encre); }
.ob-tampon b { font-family: var(--pm-gros); font-size: clamp(22px, 9cqw, 30px); font-weight: 400; line-height: .8; }
.ob-a { background: var(--v2-camp-a); transform: rotate(-4deg); }
.ob-b { background: var(--v2-camp-b); transform: rotate(3deg); }
.ob-menthe { margin-top: auto; align-self: flex-start; max-width: 100%; background: var(--v2-menthe); transform: rotate(-2deg); }
.ob-menthe svg { flex: none; width: 18px; height: 18px; }
.ob-mini { display: flex; gap: 6cqw; align-items: flex-end; justify-content: center; }
.ob-c { width: 30cqw; height: 39cqw; border: 3px solid var(--v2-encre); border-radius: 12px; box-shadow: 0 4px 0 var(--v2-encre); }
.ob-c-face { display: flex; flex-direction: column; gap: 5px; padding: 7px; background: #fff; transform: rotate(-5deg); }
.ob-c-face i { display: block; height: 7px; border-radius: 4px; background: #E6DFCB; }
.ob-c-face span { align-self: flex-start; padding: 1px 7px; border-radius: 6px; background: var(--v2-camp-a); font-family: var(--pm-gros); font-size: 20px; line-height: 1.1; }
.ob-c-dos { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--v2-camp-a) 0 50%, var(--v2-camp-b) 50% 100%); transform: rotate(6deg); }
.ob-c-dos b { position: absolute; font-family: var(--pm-gros); font-size: 13cqw; font-weight: 400; color: var(--v2-encre); }
.ob-ombre { margin-top: auto; align-self: center; padding: 5px 11px 4px; border: 3px solid var(--v2-encre); border-radius: 10px; background: var(--pm-creme); font-size: 13px; font-weight: 900; text-transform: uppercase; white-space: nowrap; box-shadow: 0 3px 0 var(--v2-encre); transform: rotate(-3deg); }
.ob-modes { display: grid; gap: 6px; }
.ob-mode { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 10px; border: 3px solid var(--v2-encre); border-radius: 12px; background: #fff; font-size: 15px; font-weight: 900; }
.ob-mode small { margin-left: auto; font-size: 13px; font-weight: 800; text-align: right; }
@container (max-width: 270px) { .ob-mode small { display: none; } }
@container (max-height: 320px) { .ob-etiq { display: none; } }
@container (max-height: 300px) { .ob-modes { display: flex; flex-wrap: wrap; gap: 6px; } .ob-mode { min-height: 30px; padding: 2px 9px; } }
@container (max-width: 240px) { .ob-ombre { white-space: normal; text-align: center; max-width: 100%; } }

/* L'arrivée d'un nouveau joueur, point 4 : le tampon « Pour commencer » sur la tuile Seul (version E de
   maquette-tampon.mjs, planche « Pour commencer, plus petit ») : droit, sur le bord haut de la tuile, à 8 px du bord
   droit ; sur deux lignes, centré, quand la tuile fait moins de 120 px de large. Il ne touche ni le micro, ni le texte,
   ni les autres tuiles. */
.pq-tuile-solo { position: relative; overflow: visible; container-type: inline-size; }
.pq-depart { position: absolute; z-index: 2; top: -9px; right: 8px; padding: 1px 7px; border: 2px solid var(--v2-encre); border-radius: 6px; background: var(--v2-menthe); color: var(--v2-encre); box-shadow: 0 2px 0 var(--v2-encre); font-family: var(--v2-carte); font-size: 13px; font-weight: 700; line-height: 1.1; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
@container (max-width: 120px) { .pq-depart span { display: block; } .pq-depart { right: -10px; text-align: center; } }

/* ---------- Spice, la feuille d'avertissement (8 octobre) ----------
   La première fois qu'on choisit Spice sur un appareil (avertissement.js) : l'icône du thème dans son disque, la phrase
   de tête en police des cartes, la suite en texte, « J'ai compris » en menthe sur toute la largeur. Même cadre que la
   feuille « Ce sujet est à toi. » : en bas sur téléphone, au centre sur ordinateur. */
.av-feuille { display: flex; flex-direction: column; gap: var(--v2-e8); }
.av-haut { display: flex; justify-content: space-between; align-items: flex-start; }
.av-fermer { margin: -6px -6px 0 0; }
.av-t { margin: var(--v2-e4) 0 0; font-family: var(--v2-carte); font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--v2-texte); }
.av-p { font-size: var(--v2-t17); line-height: 1.45; color: var(--v2-texte-2); }
.av-bouton { width: 100%; margin-top: var(--v2-e16); }
@media (min-width: 900px) { .sheet-wrap:has(.av-feuille) { align-items: center; } .sheet:has(.av-feuille) { max-width: 480px; border-radius: var(--v2-rayon-carte); border: var(--v2-trait) solid var(--v2-filet); } }
@media (prefers-reduced-motion: reduce) { .pq-rond { transition: none; } .pq-rond:active { scale: none; } }
/* Couches à part pour ce qui bouge pendant le glissé : la carte n'est jamais repeinte, seules les couches se déplacent. */
.pq-carte.pq-r0, .pq-carte.pq-r1, .pq-r0 .pq-tampon, .pq-r1 .pq-contenu, .pq-r1 .pq-voile, .pq-rond-o, .pq-rond-halo, .pq-rond-fond { will-change: transform, opacity; }

/* ---------- La carte en jeu au modèle du paquet (demande de Jules, 7 octobre) ----------
   Mêmes éléments que la carte de l'accueil (section « Accueil, le paquet ») : grand A safran coupé par le coin haut
   gauche, grand B lilas coupé par le coin bas droit, en Archivo 900 ; OUI et NON en petites capitales à côté ; rond du
   thème et numéro ; thème en petites capitales ; question en police des cartes, réglée par carte-jeu.js (ajusterRecto)
   pour ne jamais toucher le B. Quand le camp est connu, sa lettre reste pleine, l'autre s'efface à 22 % ; la ligne
   « Tu défends le oui. » est dans la couleur du camp. La carte garde ses proportions (330 sur 430) et tout se règle sur
   sa taille (unités de conteneur), des petites cartes de la table (environ 190 px) à l'ordinateur (420 px). */
.cj-face { overflow: hidden; }
.cj-coin { position: absolute; display: flex; gap: 2.4cqw; pointer-events: none; transition: opacity 300ms ease; }
.cj-grand { font-family: var(--v2-sans); font-weight: 900; font-size: 38cqh; line-height: 0.72; letter-spacing: -0.04em; }
.cj-coin-a { left: -3cqw; top: -2.4cqh; align-items: flex-start; }
.cj-coin-a .cj-grand { color: var(--v2-camp-a); }
.cj-coin-b { right: -4cqw; bottom: -3.8cqh; align-items: flex-end; }
.cj-coin-b .cj-grand { color: var(--v2-camp-b); }
.cj-mot { font-family: var(--v2-sans); font-size: max(4.2cqw, 9px); font-weight: 800; letter-spacing: 0.16em; color: var(--v2-encre); }
.cj-coin-a .cj-mot { margin-top: 7.4cqh; }
.cj-coin-b .cj-mot { margin-bottom: 8.4cqh; }
.cj-coin-autre .cj-grand { opacity: 0.22; }
.cj-coin-autre .cj-mot { color: var(--v2-encre-2); }
.cj-rond { position: absolute; top: 5.6cqh; right: 7cqw; width: max(24px, 11cqw); height: max(24px, 11cqw); }
.cj-rond .ic-theme { width: 100%; height: 100%; }
.cj-num { position: absolute; top: calc(5.6cqh + 11cqw + 1.3cqh); right: 6cqw; font-family: var(--v2-sans); font-size: max(3cqw, 9px); font-weight: 600; letter-spacing: 0.04em; color: var(--v2-encre-2); }
.cj-centre { position: absolute; left: 9cqw; right: 8cqw; top: 29cqh; display: flex; flex-direction: column; align-items: flex-start; gap: 2.4cqh; text-align: left; }
.cj-theme-nom { margin: 0; font-family: var(--v2-sans); font-size: max(3.6cqw, 9px); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--v2-encre-2); }
.cj-q { margin: 0; font-family: var(--v2-carte); font-size: var(--cj-taille, 9.4cqw); font-weight: 700; line-height: 1.06; letter-spacing: 0; color: var(--v2-encre); overflow-wrap: break-word; }
.cj-vue .cj-sous { font-size: min(19px, 5.4cqw); }
.cj-vue .cj-qui { font-size: min(17px, 5.2cqw); }
.cj-vue .cj-quoi { font-size: min(15px, 4.6cqw); }
/* Le dos : la lettre du camp en grand, coupée par le coin haut gauche, « Tes axes » en petites capitales, les axes. */
.cj-vue .cj-dos { padding: 27cqh 7cqw 5cqh; }
.cj-coin-dos { left: -3cqw; top: -2.4cqh; align-items: flex-start; }
.cj-coin-dos .cj-grand { font-size: 30cqh; color: var(--cj-c); }
.cj-coin-dos.cj-coin-a .cj-grand { color: var(--v2-camp-a); }
.cj-coin-dos.cj-coin-b .cj-grand { color: var(--v2-camp-b); }
.cj-coin-dos .cj-mot { margin-top: 6cqh; }
.cj-dos-t { position: absolute; top: 6cqh; right: 7cqw; margin: 0; font-family: var(--v2-sans); font-size: max(3.6cqw, 9px); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--v2-encre-2); }
/* Le retournement : la carte se soulève, se retourne et se pose (600 ms) ; puis la lettre du camp s'imprime au dos. */
.cj-retourne .cj-coin-dos { animation: cj-lettre-pose 260ms cubic-bezier(0.3, 1.4, 0.5, 1) calc(470ms + var(--cj-delai, 0ms)) both; }
@keyframes cj-lettre-pose { from { opacity: 0; transform: scale(1.18); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cj-retourne .cj-coin-dos { animation: none; } .cj-coin { transition: none; } }

/* ---------- Réglages, piste 1 « La table et les tuiles » (feu vert de Jules, 7 octobre) ----------
   Écrans de réglage du solo, du même téléphone et du salon (organisateur). Chaque réglage est une grande tuile aux coins
   bien arrondis, avec l'ombre franche des tuiles de l'accueil ; étiquette en capitales espacées, valeur en police des
   cartes, explication, dessin à droite. Une colonne d'environ 560 px jusqu'à 1100 px, deux colonnes au delà. */
body:has(.v2-page.rg) .app { max-width: 560px; }
@media (min-width: 900px) { body.v2-fond-page:has(.v2-page.rg) .app { max-width: 624px; } }
@media (min-width: 1100px) { body.v2-fond-page:has(.v2-page.rg) .app { max-width: 1120px; } }
.v2-page.rg { padding-bottom: var(--v2-e48); }
[data-rg-th="geo"] { --th: var(--v2-th-geo); } [data-rg-th="tech"] { --th: var(--v2-th-tech); }
[data-rg-th="soc"] { --th: var(--v2-th-soc); } [data-rg-th="eco"] { --th: var(--v2-th-eco); }
[data-rg-th="sav"] { --th: var(--v2-th-sav); } [data-rg-th="sport"] { --th: var(--v2-th-sport); }
[data-rg-th="mode"] { --th: var(--v2-th-mode); } [data-rg-th="spice"] { --th: var(--v2-th-spice); }

/* En tête : « Jouer » avec sa flèche à gauche, « Règles » à droite. */
.rg-tete { display: flex; align-items: center; justify-content: space-between; gap: var(--v2-e12); padding-top: calc(var(--encoche) + var(--v2-e8)); }
.rg-retour { gap: 2px; margin-left: calc(-1 * var(--v2-e8)); padding-right: var(--v2-e8); text-decoration: none; font-size: var(--v2-t17); }
.rg-retour svg { width: 22px; height: 22px; }
.rg-titre { margin: var(--v2-e16) 0 0; font-family: var(--v2-carte); font-size: clamp(34px, 10.5vw, var(--v2-t44)); font-weight: 700; line-height: 1.02; letter-spacing: -0.01em; color: var(--v2-texte); }
.rg-phrase { margin: var(--v2-e8) 0 0; font-size: var(--v2-t15); line-height: 1.4; color: var(--v2-texte-2); }

/* La tuile. Elle s'enfonce un peu au toucher, comme celles de l'accueil. */
.rg-tuiles { display: flex; flex-direction: column; gap: var(--v2-e16); margin-top: var(--v2-e24); }
.rg-tuile { box-sizing: border-box; position: relative; width: 100%; min-height: 112px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--v2-e12); padding: var(--v2-e16) var(--v2-e16) var(--v2-e16) 18px;
  border: 0; border-radius: 24px; overflow: hidden; background: var(--v2-papier); color: var(--v2-encre); font-family: var(--v2-sans); text-align: left;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.32); transition: transform var(--v2-appui) ease, box-shadow var(--v2-appui) ease; -webkit-tap-highlight-color: transparent; }
button.rg-tuile { cursor: pointer; }
button.rg-tuile:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.32); }
.rg-tuile:focus-visible, .rg-demi:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 4px; border-radius: 26px; }
.rg-txt { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rg-etiq { font-size: var(--v2-t13); font-weight: 700; line-height: 1.2; letter-spacing: 0.12em; text-transform: uppercase; }
.rg-valeur { font-family: var(--v2-carte); font-size: var(--v2-t28); font-weight: 700; line-height: 1.05; overflow-wrap: anywhere; }
.rg-expl { font-size: var(--v2-t15); font-weight: 500; line-height: 1.3; }
.rg-dessin { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; }
.rg-fond-menthe { background: var(--v2-menthe); }
.rg-fond-creme { background: var(--v2-papier); }

/* Thème : « Tous les thèmes » et la rangée des pastilles ; un thème choisi prend sa couleur pleine et son grand rond. */
.rg-theme .rg-pastilles { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--v2-e12); }
.rg-pastille { width: 30px; height: 30px; display: grid; place-items: center; }
.rg-pastille .ic-theme { width: 30px; height: 30px; }
.rg-theme-choisi { background: var(--th); }
.rg-rond { width: 72px; height: 72px; border-radius: 50%; background: var(--v2-encre); }
.rg-rond .ic-theme { width: 40px; height: 40px; }

/* Les petits paquets : celui du niveau choisi devant, l'autre derrière et plus pâle (place reprise dans views.js). */
.rg-paquets { width: 92px; height: 84px; }
.rg-paquet { position: absolute; right: 4px; bottom: 2px; width: 56px; height: 76px; transition: none; }
.rg-paquet-c { position: absolute; inset: 0; border-radius: 9px; background: #0A2A19; box-shadow: inset 0 0 0 1px rgba(244, 241, 232, 0.28); }
.rg-paquet-c:nth-child(1) { transform: translate(4px, 4px); }
.rg-paquet-c:nth-child(2) { transform: translate(2px, 2px); }
.rg-paquet-dos { display: flex; align-items: center; justify-content: center; gap: 1px; font-family: var(--v2-carte); font-size: 22px; font-weight: 800; line-height: 1; }
.rg-paquet-a { color: var(--v2-camp-a); } .rg-paquet-b { color: var(--v2-camp-b); }
/* La barre du monogramme, comme dans le logo : « A/B ». */
.rg-paquet-barre { margin: 0 0.02em; color: var(--v2-barre); font-weight: 400; }
.rg-paquet-crete .rg-paquet-c { background: #041A0E; }
.rg-paquet-crete .rg-crete { width: 44px; height: 18px; }
.rg-crete path { fill: none; stroke: var(--v2-menthe); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.rg-paquets[data-niv="classique"] .rg-paquet-crete, .rg-paquets[data-niv="crete"] .rg-paquet-classique { z-index: 0; opacity: 0.55; transform: translate(-18px, -12px) scale(0.92); }
.rg-paquets[data-niv="classique"] .rg-paquet-classique, .rg-paquets[data-niv="crete"] .rg-paquet-crete { z-index: 1; }
/* Ligne de crête : la tuile passe au vert très sombre, texte crème, filet clair, la ligne menthe le long du bas. */
.rg-tuile.rg-sombre { background: #041A0E; color: var(--v2-texte); box-shadow: inset 0 0 0 1px rgba(244, 241, 232, 0.3), 0 5px 0 rgba(0, 0, 0, 0.45); }
button.rg-tuile.rg-sombre:active { box-shadow: inset 0 0 0 1px rgba(244, 241, 232, 0.3), 0 2px 0 rgba(0, 0, 0, 0.45); }
.rg-sombre .rg-paquet-c { box-shadow: inset 0 0 0 1px rgba(244, 241, 232, 0.4); }
.rg-tuile.rg-sombre { padding-bottom: 28px; }
.rg-crete-bas { position: absolute; left: 0; right: 0; bottom: 6px; height: 18px; pointer-events: none; }
.rg-crete-bas .rg-crete { width: 100%; height: 100%; opacity: 0.9; }

/* Ton camp : coupée en biais, safran à gauche, lilas à droite, un trait encre entre les deux. Le texte reste à gauche
   du biais (il passe sur deux lignes plutôt que de le toucher). */
.rg-camp { --biais: 64%; background-color: var(--v2-camp-a); background-image: linear-gradient(104deg, var(--v2-camp-a) calc(var(--biais) - 1.5px), var(--v2-encre) calc(var(--biais) - 1.5px), var(--v2-encre) calc(var(--biais) + 1.5px), var(--v2-camp-b) calc(var(--biais) + 1.5px)); grid-template-columns: minmax(0, calc(var(--biais) - 40px)) 1fr; }
/* Le biais penche d'environ 14 px de part et d'autre au milieu de la tuile : le texte s'arrête 40 px avant. À 320 px,
   le biais se décale vers la droite et les dessins rapetissent. */
@media (max-width: 359px) {
  .rg-camp { --biais: 68%; padding-right: 10px; }
  .rg-carres { gap: 5px; }
  .rg-carre { width: 32px; height: 32px; font-size: 20px; border-radius: 8px; }
  .rg-camp-piece .pq-piece { width: 54px; height: 54px; }
  .rg-camp-piece .pq-piece-a, .rg-camp-piece .pq-piece-b { font-size: 20px; padding: 7px 9px; }
  .rg-tuile { padding-left: 16px; padding-right: 12px; }
  .rg-valeur { font-size: 25px; }
  .rg-theme-choisi .rg-valeur { font-size: 22px; }
  .rg-rond { width: 56px; height: 56px; }
  .rg-rond .ic-theme { width: 32px; height: 32px; }
  .rg-paquets { width: 80px; }
}
.rg-camp .rg-dessin { justify-self: end; }
.rg-carres { gap: 8px; }
.rg-carre { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--v2-encre); font-family: var(--v2-carte); font-size: 24px; font-weight: 800; line-height: 1; }
.rg-carre-a { color: var(--v2-camp-a); } .rg-carre-b { color: var(--v2-camp-b); }
.rg-camp-piece .pq-piece { width: 64px; height: 64px; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3); }
.rg-camp-piece .pq-piece-a, .rg-camp-piece .pq-piece-b { font-size: 24px; padding: 8px 11px; }

/* Le bouton et sa ligne. */
.rg-actions { display: flex; flex-direction: column; gap: var(--v2-e8); margin-top: var(--v2-e24); }
.rg-bouton { width: 100%; font-size: var(--v2-t17); box-shadow: 0 5px 0 var(--v2-menthe-appui); }
.rg-bouton:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.rg-ligne { margin: 0; font-size: var(--v2-t15); color: var(--v2-texte-2); text-align: center; }

/* Tes derniers débats : la lettre du camp dans un carré, la question, la note. */
.rg-derniers { margin-top: var(--v2-e32); }
.rg-derniers-tete { display: flex; align-items: baseline; justify-content: space-between; gap: var(--v2-e12); }
.rg-h2 { margin: 0; font-family: var(--v2-carte); font-size: var(--v2-t21); font-weight: 700; }
.rg-compte { font-size: var(--v2-t15); color: var(--v2-texte-2); }
.rg-debats { list-style: none; margin: var(--v2-e12) 0 0; padding: 0; }
.rg-debat { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: start; gap: var(--v2-e12); padding: var(--v2-e12) 0; border-top: var(--v2-trait) solid var(--v2-filet); }
.rg-debat-l { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: var(--v2-encre); font-family: var(--v2-carte); font-size: 19px; font-weight: 800; }
.rg-debat-a { background: var(--v2-camp-a); } .rg-debat-b { background: var(--v2-camp-b); }
.rg-debat-q { font-size: var(--v2-t15); line-height: 1.35; }
.rg-debat-n { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.rg-debat-n b { font-family: var(--v2-carte); font-size: var(--v2-t17); }
.rg-debat-n span { font-size: var(--v2-t13); color: var(--v2-texte-2); white-space: nowrap; }

/* La feuille des thèmes : « Tous les thèmes » en pleine largeur, puis deux colonnes de tuiles à la couleur du thème. */
.sheet.rg-sheet { gap: var(--v2-e16); animation: rg-monte 260ms cubic-bezier(0.25, 0.9, 0.35, 1); }
@keyframes rg-monte { from { transform: translateY(100%); } to { transform: none; } }
@keyframes rg-fondu { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sheet.rg-sheet { animation: rg-fondu 150ms ease-out; } }
.rg-f-tete { display: flex; align-items: center; justify-content: space-between; gap: var(--v2-e12); }
.rg-f-titre { margin: 0; font-family: var(--v2-carte); font-size: var(--v2-t28); font-weight: 700; line-height: 1.1; }
.rg-f-theme { position: relative; min-height: 60px; display: flex; align-items: center; gap: var(--v2-e8); padding: var(--v2-e12); border: 0; border-radius: 16px;
  background: var(--th, var(--v2-papier)); color: var(--v2-encre); font-family: var(--v2-sans); font-size: var(--v2-t15); font-weight: 700; line-height: 1.2; text-align: left; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.32); transition: transform var(--v2-appui) ease; }
.rg-f-theme:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.32); }
.rg-f-theme .ic-theme { width: 24px; height: 24px; }
.rg-f-tous { width: 100%; margin-bottom: var(--v2-e12); background: var(--v2-papier); }
.rg-melange { width: 24px; height: 24px; flex: none; }
/* Le thème choisi : une coche menthe dans un petit rond encre, à droite (maquette 3). Toujours visible, focus ou pas.
   Dans la tuile quand le nom a la place ; sur le coin haut droit quand la tuile est trop étroite (« Géopolitique » à 390 px),
   pour ne jamais couvrir le nom. Requête de conteneur sur la tuile elle même. */
.rg-f-theme { container-type: inline-size; }
.rg-f-coche { position: absolute; right: 10px; top: 50%; width: 28px; height: 28px; margin-top: -14px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--v2-encre); }
.rg-f-theme[aria-pressed="true"] > span:not(.rg-f-coche) { margin-right: 34px; }
@container (max-width: 210px) {
  .rg-f-theme[aria-pressed="true"] > span:not(.rg-f-coche) { margin-right: 0; }
  .rg-f-coche { top: -8px; right: -8px; margin-top: 0; box-shadow: 0 0 0 3px var(--v2-fond); }
}
.rg-f-coche .v2-coche { visibility: visible; width: 18px; height: 18px; stroke-width: 3; }
.rg-f-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--v2-e12); }
.sheet.rg-sheet .rg-f-theme:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 3px; border-radius: 18px; }

/* À plusieurs : la table vue de dessus. Un ovale vert sombre au liseré clair, le paquet au centre, un siège par joueur
   réparti régulièrement autour (le premier en haut), plus « Ajouter » tant qu'il y a moins de 8 joueurs. */
.rg-table { position: relative; width: 100%; aspect-ratio: 1.12; margin-top: var(--v2-e16); }
.rg-ovale { position: absolute; inset: 19% 20%; display: grid; place-items: center; border-radius: 50%; background: #0A2A19; box-shadow: inset 0 0 0 2px rgba(244, 241, 232, 0.16), 0 6px 0 rgba(0, 0, 0, 0.3); }
.rg-ovale .rg-paquet { position: relative; right: auto; bottom: auto; width: 46px; height: 62px; }
.rg-ovale .rg-paquet-dos { font-size: 18px; }
.rg-sieges { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; --rx: 40%; --ry: 39%; }
.rg-sieges[data-n="4"] { --n: 4; } .rg-sieges[data-n="5"] { --n: 5; } .rg-sieges[data-n="6"] { --n: 6; }
.rg-sieges[data-n="7"] { --n: 7; } .rg-sieges[data-n="8"] { --n: 8; } .rg-sieges[data-n="9"] { --n: 9; }
.rg-sieges > li { --a: calc(var(--k, 0) * 360deg / var(--n, 6) - 90deg); position: absolute; left: calc(50% + cos(var(--a)) * var(--rx)); top: calc(50% + sin(var(--a)) * var(--ry)); transform: translate(-50%, -38%); }
.rg-sieges > li:nth-child(2) { --k: 1; } .rg-sieges > li:nth-child(3) { --k: 2; } .rg-sieges > li:nth-child(4) { --k: 3; }
.rg-sieges > li:nth-child(5) { --k: 4; } .rg-sieges > li:nth-child(6) { --k: 5; } .rg-sieges > li:nth-child(7) { --k: 6; }
.rg-sieges > li:nth-child(8) { --k: 7; } .rg-sieges > li:nth-child(9) { --k: 8; }
.rg-siege { width: 72px; min-height: 44px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0; border: 0; background: none; color: var(--v2-texte); font-family: var(--v2-sans); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rg-siege-r { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--v2-papier); color: var(--v2-encre); font-family: var(--v2-carte); font-size: 22px; font-weight: 800; line-height: 1; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35); transition: transform var(--v2-appui) ease; }
.rg-siege:active .rg-siege-r { transform: translateY(2px); }
.rg-siege-n { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--v2-t13); font-weight: 600; line-height: 1.2; }
.rg-siege-ajout .rg-siege-r { background: none; border: 2px dashed var(--v2-menthe); color: var(--v2-menthe); box-shadow: none; font-family: var(--v2-sans); font-weight: 600; }
.rg-siege-ajout .rg-siege-n { color: var(--v2-menthe); }
.rg .rg-siege:focus-visible { outline: none; }
.rg .rg-siege:focus-visible .rg-siege-r { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 3px; }
.rg-sous { margin: var(--v2-e8) 0 0; font-size: var(--v2-t15); color: var(--v2-texte-2); text-align: center; }
.rg-sous b { color: var(--v2-texte); font-weight: 700; }
.rg-note { margin: var(--v2-e8) 0 0; font-size: var(--v2-t13); line-height: 1.4; color: var(--v2-texte-2); }
.rg-plusieurs .rg-note { text-align: center; }
.rg-plusieurs .v2-message { margin-top: var(--v2-e8); }
@media (max-width: 359px) {
  .rg-table { aspect-ratio: 1; }
  .rg-sieges { --rx: 39%; --ry: 41%; }
  .rg-siege { width: 60px; }
  .rg-siege-r { width: 40px; height: 40px; font-size: 19px; }
  .rg-ovale { inset: 22% 22%; }
}

/* Durée de la partie : le nombre de points en très grand ; trois boutons 8, 10 et 12 en bas à droite. */
.rg-duree { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--v2-e12); }
.rg-duree .rg-txt { flex: 1 0 auto; }
.rg-duree .rg-durees { margin-left: auto; }
.rg-points { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; font-family: var(--v2-carte); font-size: var(--v2-t21); }
.rg-points b { font-family: var(--v2-sans); font-size: 56px; font-weight: 900; line-height: 0.95; letter-spacing: -0.03em; }
.rg-durees { display: flex; gap: 6px; }
.rg-duree-b { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 2px solid var(--v2-encre); border-radius: 12px; background: none; color: var(--v2-encre); font-family: var(--v2-carte); font-size: var(--v2-t17); font-weight: 800; cursor: pointer; transition: transform var(--v2-appui) ease; }
.rg-duree-b:active { transform: translateY(2px); }
.rg-duree-b[aria-pressed="true"] { background: var(--v2-encre); color: var(--v2-menthe); }
.rg-durees .rg-duree-b:focus-visible { outline: var(--v2-focus) solid var(--v2-encre); outline-offset: 2px; border-radius: 12px; }

/* Les options en demi tuiles : crème si activée, transparente avec un filet clair sinon ; interrupteur en bas à droite. */
.rg-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--v2-e12); }
.rg-demi { position: relative; min-height: 104px; display: flex; flex-direction: column; justify-content: space-between; gap: var(--v2-e12); padding: var(--v2-e12) var(--v2-e12) var(--v2-e12) 14px; border: 0; border-radius: 20px; background: none; color: var(--v2-texte); font-family: var(--v2-sans); text-align: left; box-shadow: inset 0 0 0 1.5px rgba(244, 241, 232, 0.4); cursor: pointer; transition: transform var(--v2-appui) ease; }
.rg-demi:active { transform: translateY(2px); }
.rg-demi-on { background: var(--v2-papier); color: var(--v2-encre); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.32); }
.rg-demi-t { font-family: var(--v2-carte); font-size: var(--v2-t21); font-weight: 700; line-height: 1.1; overflow-wrap: anywhere; }
.rg-inter { align-self: flex-end; position: relative; width: 46px; height: 28px; border-radius: 14px; background: rgba(244, 241, 232, 0.25); }
.rg-inter-r { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--v2-texte); }
.rg-demi-on .rg-inter { background: var(--v2-encre); }
.rg-demi-on .rg-inter-r { left: 21px; background: var(--v2-menthe); }
.rg-plusieurs .rg-tuiles > .rg-note { margin-top: calc(-1 * var(--v2-e8)); }

/* La feuille des joueurs. */
.rg-f-sous { margin: 2px 0 0; font-size: var(--v2-t15); color: var(--v2-texte-2); }
.rg-feuille-joueurs .prow .idx { font-size: var(--v2-t13); font-weight: 600; color: var(--v2-texte-2); }
.rg-feuille-joueurs .xbtn { border: 0; color: var(--v2-texte-2); }
.rg-feuille-joueurs .rg-bouton { margin-top: var(--v2-e8); }
.rg-feuille-joueurs .v2-note { margin-top: var(--v2-e8); font-size: var(--v2-t13); color: var(--v2-texte-2); }

/* Deux colonnes à partir de 1100 px : seul, les débats à droite ; à plusieurs, la table à gauche. */
@media (min-width: 1100px) {
  .rg-cols { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); column-gap: var(--v2-e64); align-items: start; }
  .rg-solo .rg-derniers { margin-top: calc(var(--v2-e16) + 4px); }
  .rg-plusieurs .rg-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); }
  .rg-plusieurs .rg-table { margin-top: var(--v2-e32); aspect-ratio: 1.3; }
  .rg-plusieurs .rg-ovale { inset: 20% 17%; }
  .rg-plusieurs .rg-sieges { --rx: 43%; --ry: 39%; }
  .rg-plusieurs .rg-siege { width: 88px; }
  .rg-plusieurs .rg-siege-r { width: 60px; height: 60px; font-size: 26px; }
  .rg-plusieurs .rg-siege-n { font-size: var(--v2-t15); }
  .rg-plusieurs .rg-ovale .rg-paquet { width: 60px; height: 82px; }
  .rg-plusieurs .rg-cols > .rg-col:last-child .rg-tuiles { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .rg-tuile, .rg-f-theme { transition: none; } button.rg-tuile:active, .rg-f-theme:active { transform: none; } }

/* Ton sujet (solo), quand la pièce décide : la pièce de la feuille de l'accueil au dessus de « Lancer la pièce », puis
   « Tu défends le oui. » ou « le non. » comme sur l'accueil. */
.cj-tirage { display: flex; align-items: center; justify-content: center; gap: var(--v2-e16); min-height: 96px; margin: 0 0 var(--v2-e8); }
.cj-tirage .pq-piece { width: 72px; height: 72px; }
.cj-tirage .pq-piece-a, .cj-tirage .pq-piece-b { font-size: 28px; padding: 10px 13px; }
.cj-tirage .pq-piece-pleine { font-size: 38px; padding: 0; }
.cj-tirage .pq-tirage-t { min-width: 0; text-align: left; }
.cj-tirage .pq-tirage-l { margin: 2px 0 0; }

/* ---------- Écrans de jeu sur iPhone (retours de Jules du 8 octobre au soir) ----------
   Chaque écran à carte tient dans la petite hauteur de l'écran (100svh, carte-jeu.js), bouton principal compris ; si la
   place manque, la carte rapetisse, jamais le texte (rien sous 13 px). On arrive toujours en haut : pas d'ancrage du
   défilement sur ces écrans. */
html:has(.jeu), body:has(.jeu) { overflow-anchor: none; }
/* La vue garde en bas la place de la barre flottante de Safari et la marge de sécurité de l'iPhone. */
.cj-vue { box-sizing: border-box; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); }
.cj-vue .cj-pied { padding-bottom: 0; }
/* Rien sous 13 px sur la carte, même petite. */
.cj-mot { font-size: max(4.2cqw, 13px); }
.cj-num { font-size: max(3cqw, 13px); }
.cj-theme-nom { font-size: max(3.6cqw, 13px); }
.cj-dos-t { font-size: max(3.6cqw, 13px); }
.cj-vue .cj-sous { font-size: max(13px, min(19px, 4.4cqh, 5.75cqw)); }
.cj-vue .cj-qui { font-size: max(13px, min(17px, 5.2cqw)); }
.cj-vue .cj-quoi { font-size: max(13px, min(15px, 4.6cqw)); }
/* Préparation : l'éventail entier au dessus du bouton, le nom et le chiffre de chaque petite carte visibles. */
.cj-vue .cj-pied-eventail .cj-eventail { margin: 0 4px 14px; }
.cj-vue .cj-petite { height: 76px; padding: 10px; }
.cj-vue .cj-eventail-4 .cj-petite[data-i="0"] { transform: rotate(-8deg) translateY(4px); }
.cj-vue .cj-eventail-4 .cj-petite[data-i="3"] { transform: rotate(8deg) translateY(4px); }
.cj-vue .cj-eventail-3 .cj-petite[data-i="0"] { transform: rotate(-6deg) translateY(3px); }
.cj-vue .cj-eventail-3 .cj-petite[data-i="2"] { transform: rotate(6deg) translateY(3px); }
@media (max-height: 740px) { .cj-vue .cj-petite { height: 66px; padding: 8px; } }
/* Ta minute : la carte retournée prend la hauteur de son contenu (carte-jeu.js, ajusterDos), sur la largeur permise ;
   ses tailles ne dépendent que de sa largeur. Le fait s'écrit en entier (deux lignes seulement si la place manque). */
.cj-vue .cj-carte.cj-montre-dos { width: min(330px, 100%); max-height: none; aspect-ratio: auto; }
.cj-vue .cj-montre-dos .cj-dos { padding: 31cqw 7cqw 6cqw; }
.cj-vue .cj-montre-dos .cj-coin-dos .cj-grand { font-size: 36cqw; }
.cj-vue .cj-montre-dos .cj-coin-dos .cj-mot { margin-top: 7cqw; }
.cj-vue .cj-montre-dos .cj-dos-t { top: 7cqw; }
.cj-vue .cj-montre-dos .cj-axes li { padding: 3.6cqw 0; font-size: max(15px, calc(6.25cqw * var(--cj-axes, 1))); }
.cj-vue .cj-montre-dos .cj-fait { margin-top: 4.5cqw; font-size: max(13px, min(15px, 4.6cqw)); }
.cj-vue .cj-fait > span:last-child { display: block; -webkit-line-clamp: none; overflow: visible; }
.cj-vue .cj-fait-2 .cj-fait > span:last-child { display: -webkit-box; -webkit-line-clamp: 2; overflow: hidden; }
/* Pages longues (auto évaluation, bilan, tirage, notation) : le bouton principal reste visible en bas, sans défiler. */
.jeu-collees { position: sticky; bottom: 0; z-index: 4; margin-top: var(--v2-e16); padding: var(--v2-e12) 0 calc(env(safe-area-inset-bottom, 0px) + 12px); background: var(--v2-fond); box-shadow: 0 -1px 0 var(--v2-filet); }
body.has-tabbar .jeu-collees { bottom: calc(var(--tabbar-h) + var(--barre-bas)); padding-bottom: calc(var(--v2-e12) + var(--piece-haut)); }
/* Feuilles de la carte avec le clavier (carte-jeu.js, calerFeuille) : la couche suit la partie visible de l'écran
   (visualViewport), la feuille finit juste au dessus du clavier, son titre et son champ restent visibles. */
.cj-feuille-fond.cj-clavier { bottom: auto; }
.cj-feuille-fond.cj-clavier .cj-feuille { max-height: calc(100% - 8px); padding-bottom: 12px; }
/* Ta minute, scène basse : la grande lettre du coin se resserre avant que le texte ne rapetisse (carte-jeu.js). */
.cj-vue .cj-montre-dos .cj-dos.cj-dos-serre { padding-top: 22cqw; }
.cj-vue .cj-montre-dos .cj-dos-serre .cj-coin-dos .cj-grand { font-size: 26cqw; }
.cj-vue .cj-montre-dos .cj-dos-serre .cj-coin-dos .cj-mot { margin-top: 5cqw; }
.cj-vue .cj-montre-dos .cj-dos-serre .cj-dos-t { top: 5cqw; }
/* Petits écrans : la pièce et le micro un peu plus petits. */
@media (max-height: 600px) {
  .cj-micro { width: 64px; height: 64px; }
  .cj-vue .cj-micro-zone { padding-bottom: 4px; gap: 4px; }
  .cj-tirage { min-height: 72px; }
  .cj-tirage .pq-piece { width: 60px; height: 60px; }
  .cj-tirage .pq-piece-a, .cj-tirage .pq-piece-b { font-size: 24px; padding: 8px 10px; }
}
/* En ligne, sur un écran à carte : le rôle sur une ligne (la carte dit déjà « Tu défends le oui. »). */
.jeu:has(.cj-vue) .jeu-role-bandeau { display: flex; align-items: baseline; gap: var(--v2-e8); padding: var(--v2-e8) var(--v2-e12); }
.jeu:has(.cj-vue) .jeu-role-bandeau b { font-size: var(--v2-t17); }
.jeu:has(.cj-vue) .jeu-role-bandeau > span:last-child:not(.jeu-role-k) { display: none; }
@media (max-height: 600px) {
  /* Ta minute : l'étiquette du micro passe à côté du bouton, la grande lettre du dos se resserre encore. */
  .cj-vue .cj-micro-zone { flex-direction: row; justify-content: center; gap: var(--v2-e12); }
  .cj-vue .cj-micro-zone .cj-micro { margin-bottom: 4px; }
  .cj-vue .cj-montre-dos .cj-dos.cj-dos-serre { padding-top: 18cqw; }
  .cj-vue .cj-montre-dos .cj-dos-serre .cj-coin-dos .cj-grand { font-size: 22cqw; }
}
/* Écrans bas (620 px et moins, iPhone SE dans Safari) : la carte prend la place gagnée sur les marges, le chrono et
   l'éventail, et se fait un peu moins haute que large pour que la plus longue question tienne à 13 px. */
@media (max-height: 620px) {
  .cj-vue .cj-scene { padding: 4px 0 8px; }
  /* Ton sujet : sans la ligne « Quelle position défends tu ? » (lot 1, point 4), la carte a 33 px de plus et grandit ;
     penchée de 2,5°, son coin passait sous la barre du haut (suite de la nuit du 29 octobre) : 10 px d'air au dessus. */
  .jeu-solo-sujet .cj-vue .cj-scene { padding-top: 10px; }
  .cj-vue .cj-carte { aspect-ratio: 330 / 395; }
  .cj-vue .cj-pied-eventail .cj-eventail { margin-bottom: 10px; }
  .cj-vue .cj-petite { height: 58px; padding: 6px 8px; gap: 2px; }
  .cj-vue .cj-petite-n { font-size: 22px; }
  .cj-temps b { font-size: 28px; }
  .cj-barre { min-height: 44px; }
}

/* ---------- Les petits textes (règle de Jules, 8 octobre au soir) ----------
   Pas de paragraphe gris d'explication sous un titre : une phrase vraiment utile devient un élément visuel. */
/* « Sans la voix » : une petite étiquette crème à côté du titre de « Chacun son téléphone », le micro barré. */
.jeu-titre-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.jeu-titre-ligne .v2-titre { margin-right: 0; }
.v2-marque + .jeu-titre-ligne { margin-top: var(--v2-e16); }
.jeu-titre-ligne .v2-titre, .jeu-titre-ligne .jeu-sans-voix { margin-top: 0; }
.jeu-sans-voix { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 5px 10px 5px 8px; border-radius: 999px; background: var(--v2-papier); color: var(--v2-encre); font-family: var(--v2-sans); font-size: 13px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.jeu-sans-voix svg { width: 16px; height: 16px; flex: none; }
/* Ta minute : « Où va ta voix ? », une ligne qui déplie le texte sur la transcription. */
.cj-voix { margin-top: var(--v2-e16); }

/* ---------- Ta minute : tes notes en petite carte, la transcription au calme (planche du 9 octobre) ----------
   Sous le temps, deux cartes côte à côte, penchées en sens contraire : les axes (58 %) et « Tes notes » (40 %), de la
   même hauteur (carte-jeu.js, ajusterDos) ; le micro dessous. Puis le panneau « Ta transcription ». */
.cj-vue .cj-duo { display: grid; grid-template-columns: 58% 40%; grid-template-rows: minmax(0, 1fr); column-gap: 2%; align-items: center; padding: 8px 2px 16px; }
.cj-vue .cj-duo .cj-carte, .cj-vue .cj-duo .cj-carte.cj-montre-dos { width: 100%; max-width: none; height: 100%; max-height: none; aspect-ratio: auto; transform: rotate(-0.8deg); }
/* Les deux cartes ne dépassent pas 640 px de large (ordinateur, table et en ligne). */
.cj-vue .cj-duo { width: 100%; max-width: 640px; box-sizing: border-box; margin: 0 auto; }
/* À table et en ligne : qui parle, sous le temps (le prénom, puis ce qu'il fait). */
.cj-parle { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 8px; margin: 4px 0 0; font-family: var(--v2-sans); font-size: 15px; line-height: 1.3; text-align: center; color: var(--v2-texte-2); }
.cj-parle .cj-qui { font-weight: 800; color: var(--v2-texte); }
/* Le dos dans sa demi largeur : la lettre du camp dans une pastille à sa couleur, « NON » à côté, « Tes axes » en
   haut à droite, sur la même ligne. */
.cj-vue .cj-duo .cj-montre-dos .cj-dos, .cj-vue .cj-duo .cj-montre-dos .cj-dos.cj-dos-serre { --cj-pastille: clamp(30px, 15cqw, 44px); padding: calc(6cqw + var(--cj-pastille) + 3cqw) 7cqw 7cqw; }
.cj-vue .cj-duo .cj-montre-dos .cj-coin-dos { left: 6cqw; top: 6cqw; right: auto; bottom: auto; align-items: center; gap: 3cqw; }
.cj-vue .cj-duo .cj-montre-dos .cj-coin-dos .cj-grand, .cj-vue .cj-duo .cj-montre-dos .cj-dos-serre .cj-coin-dos .cj-grand { display: grid; place-items: center; width: var(--cj-pastille); height: var(--cj-pastille); border-radius: 8px; background: var(--v2-camp-b); color: var(--v2-encre); font-size: calc(var(--cj-pastille) * 0.68); line-height: 1; letter-spacing: 0; }
.cj-vue .cj-duo .cj-montre-dos .cj-coin-dos.cj-coin-a .cj-grand { background: var(--v2-camp-a); }
.cj-vue .cj-duo .cj-montre-dos .cj-coin-dos .cj-mot, .cj-vue .cj-duo .cj-montre-dos .cj-dos-serre .cj-coin-dos .cj-mot { margin: 0; }
.cj-vue .cj-duo .cj-montre-dos .cj-dos-t, .cj-vue .cj-duo .cj-montre-dos .cj-dos-serre .cj-dos-t { top: calc(6cqw + var(--cj-pastille) / 2); transform: translateY(-50%); }
/* Carte très étroite (320 px) : la pastille de la lettre suffit, « NON » laisse la place à « Tes axes ». */
@container (max-width: 190px) { .cj-duo .cj-montre-dos .cj-coin-dos .cj-mot { display: none; } }
.cj-vue .cj-duo .cj-montre-dos .cj-axes li { padding: 3.4cqw 0; font-size: max(14px, calc(min(23px, 8.8cqw) * var(--cj-axes, 1))); }
.cj-vue .cj-duo .cj-montre-dos .cj-fait { margin-top: 4cqw; grid-template-columns: 1.6em minmax(0, 1fr); font-size: 13px; line-height: 1.35; }

/* « Tes notes » : un papier un peu plus foncé, l'étiquette et le nombre, une note par ligne (carré lilas, Archivo
   Narrow 600), « Modifier » en bas. Trop de notes : la liste défile dans la carte. */
.cj-mesnotes { position: relative; display: flex; flex-direction: column; box-sizing: border-box; height: 100%; min-height: 0; padding: 14px 10px 0 12px; border-radius: 18px; background: #ECE6D6; color: var(--v2-encre); box-shadow: 0 2px 0 #CFC8B4, 0 18px 36px rgba(0, 0, 0, 0.38), 0 5px 12px rgba(0, 0, 0, 0.22); transform: rotate(0.8deg); }
.cj-mesnotes.cj-partie { visibility: hidden; }
.cj-mn-t { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-family: var(--v2-sans); font-size: 13px; font-weight: 800; line-height: 1.2; letter-spacing: 0.06em; white-space: nowrap; text-transform: uppercase; color: var(--v2-encre-2); }
.cj-mn-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; box-sizing: border-box; padding: 0 6px; border-radius: 999px; background: var(--v2-camp-b); color: var(--v2-encre); font-size: 13px; letter-spacing: 0; }
.cj-mn-l { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; margin: -3px 0 0; padding: 3px 2px 4px 0; scrollbar-width: thin; }
.cj-mn-l li { position: relative; padding: 0 0 9px 15px; font-family: var(--v2-carte); font-size: 15px; font-weight: 600; line-height: 1.2; overflow-wrap: break-word; }
.cj-mn-l li::before { content: ""; position: absolute; left: 1px; top: 0.36em; width: 7px; height: 7px; border-radius: 1.5px; background: var(--v2-camp-b-papier); }
.cj-mn-mod, .cj-mn-vide { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 0 -6px; padding: 0 6px; border: 0; border-radius: 10px; background: none; color: var(--v2-lien-papier); font-family: var(--v2-sans); font-size: 14px; font-weight: 700; text-align: left; cursor: pointer; }
.cj-mn-mod { flex: none; min-height: 44px; align-self: flex-start; }
.cj-mn-mod svg { width: 16px; height: 16px; }
.cj-mn-vide { flex: 1 1 auto; align-items: flex-start; margin-bottom: 10px; padding-top: 2px; font-family: var(--v2-carte); font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--v2-encre-2); }
.cj-mn-mod:focus-visible, .cj-mn-vide:focus-visible, .cj-mn-l:focus-visible { outline: var(--v2-focus) solid var(--v2-lien-papier); outline-offset: 2px; }
@media (hover: hover) { .cj-mn-mod:hover span, .cj-mn-vide:hover { text-decoration: underline; text-underline-offset: 3px; } }

/* Le panneau « Ta transcription » : crème très léger sur le vert, coins de 18 px, sans filet. */
.cj-cote { padding: 4px 0 24px; }
.cj-trans { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 6px; border-radius: 18px; background: rgba(244, 241, 232, 0.07); }
.cj-trans-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin: -6px 0 0; }
.cj-trans-t { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--v2-sans); font-size: 16px; font-weight: 700; color: var(--v2-texte); }
.cj-trans-t svg { width: 20px; height: 20px; color: var(--v2-menthe); }
/* La bascule « Voix » : une vraie case (nommée pour les lecteurs d'écran), dessinée en interrupteur menthe. */
.cj-bascule-voix { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-family: var(--v2-sans); font-size: 14px; font-weight: 600; color: var(--v2-texte-2); cursor: pointer; }
.cj-bascule-voix input { position: absolute; right: 0; top: 50%; width: 44px; height: 44px; margin: -22px -4px 0 0; opacity: 0; cursor: pointer; }
.cj-interr { position: relative; width: 40px; height: 24px; border-radius: 999px; background: rgba(244, 241, 232, 0.28); transition: background 160ms ease; }
.cj-interr::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--v2-texte); transition: transform 160ms ease; }
.cj-bascule-voix input:checked + .cj-interr { background: var(--v2-menthe); }
.cj-bascule-voix input:checked + .cj-interr::after { transform: translateX(16px); background: var(--v2-encre); }
.cj-bascule-voix input:disabled + .cj-interr { opacity: 0.55; }
.cj-bascule-voix input:focus-visible + .cj-interr { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 3px; }
/* « En direct » : trois petites barres qui montent et descendent (immobiles en mouvement réduit). */
.cj-direct { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-family: var(--v2-sans); font-size: 14px; font-weight: 700; color: var(--v2-menthe); }
.cj-barres { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.cj-barres i { width: 3px; height: 100%; border-radius: 1px; background: currentColor; transform-origin: bottom; animation: cj-barre 900ms ease-in-out infinite; }
.cj-barres i:nth-child(1) { animation-delay: -300ms; }
.cj-barres i:nth-child(3) { animation-delay: -600ms; }
@keyframes cj-barre { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
.cj-live { margin: 0; max-height: 40vh; overflow-y: auto; font-family: var(--v2-sans); font-size: 17px; font-weight: 500; line-height: 1.5; color: var(--v2-texte); overflow-wrap: break-word; }
.cj-live[hidden] { display: none; }
.cj-encours { color: var(--v2-menthe); }
.cj-vide { color: var(--v2-texte-2); }
.cj-trans-err { margin: 0; font-family: var(--v2-sans); font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--v2-texte); }
/* Le journal du micro, seulement avec ?diag (lot 1, G1) : pour vérifier sur iPhone ce que fait la reconnaissance. */
.cj-diag { max-height: 180px; overflow: auto; margin: 8px 0 0; padding: 8px; border-radius: 8px; background: rgba(6, 20, 12, 0.5); color: var(--v2-texte); font: 13px/1.4 ui-monospace, monospace; white-space: pre-wrap; }
.cj-ecrire[hidden] { display: none; }
.cj-zone { box-sizing: border-box; width: 100%; min-height: 120px; padding: 12px; border: 0; border-radius: 12px; background: rgba(244, 241, 232, 0.1); color: var(--v2-texte); font-family: var(--v2-sans); font-size: 16px; line-height: 1.45; resize: vertical; }
.cj-zone::placeholder { color: var(--v2-texte-2); }
.cj-zone:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 2px; }
.cj-trans-pied { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cj-trans-ecrire { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-left: -8px; padding: 0 8px; border: 0; border-radius: 10px; background: none; color: var(--v2-menthe); font-family: var(--v2-sans); font-size: 15px; font-weight: 700; cursor: pointer; }
.cj-trans-ecrire svg { width: 18px; height: 18px; }
.cj-trans-ecrire:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 0; }
@media (hover: hover) { .cj-trans-ecrire:hover span { text-decoration: underline; text-underline-offset: 3px; } }
.cj-mots { font-family: var(--v2-sans); font-size: 13px; font-weight: 600; color: var(--v2-texte-2); }
.cj-cote .cj-voix { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .cj-barres i { animation: none; transform: none; } .cj-barres i:nth-child(2) { transform: scaleY(0.6); } .cj-interr, .cj-interr::after { transition: none; } }

/* « Voir le fait » : seulement quand le fait ne tient pas en entier dans la carte (carte-jeu.js, cj-fait-0). */
.cj-dos-voir { display: none; }
.cj-vue .cj-duo .cj-fait-0 .cj-dos-voir { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 4px 0 0 -6px; padding: 0 6px; border: 0; border-radius: 10px; background: none; color: var(--v2-lien-papier); font-family: var(--v2-sans); font-size: 14px; font-weight: 700; cursor: pointer; }
.cj-dos-voir svg { width: 16px; height: 16px; color: var(--cj-c); }
.cj-dos-voir:focus-visible { outline: var(--v2-focus) solid var(--v2-lien-papier); outline-offset: 2px; }

/* La vue se resserre sur les cartes une fois leur hauteur posée (carte-jeu.js, ajusterVue) : le micro juste dessous. */
.cj-vue.cj-ajuste { height: auto !important; }
.cj-vue.cj-ajuste .cj-duo { flex: 0 0 auto; }

/* Écran court : le temps sur une ligne (« 1:00 de parole »), les cartes et le micro se resserrent. */
@media (max-height: 620px) {
  .cj-minute .cj-temps, .cj-vue:has(.cj-duo) .cj-temps { flex-direction: row; align-items: baseline; justify-content: center; gap: 8px; }
  .cj-minute .cj-vue .cj-duo { padding: 6px 2px 12px; }
}

/* Ordinateur, dès 900 px : deux colonnes. À gauche le temps, les deux cartes et le micro ; à droite le panneau, de la
   hauteur des cartes et du micro. La vue n'a plus de boîte à elle : ses parties se rangent dans la grille. */
@media (min-width: 900px) {
  body:has(.cj-minute) .app { max-width: 1180px; padding-inline: var(--v2-e32); }
  .cj-minute.cj-ajuste { height: auto; grid-template-rows: auto auto auto auto; }
  .cj-minute { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr); grid-template-rows: auto auto minmax(0, 1fr) auto; column-gap: 40px; box-sizing: border-box; height: var(--cj-vue-h, auto); max-width: 1180px; margin: 0 auto; padding-bottom: 12px; }
  .cj-minute > .cj-vue { display: contents; }
  .cj-minute .cj-barre { grid-column: 1 / -1; grid-row: 1; }
  .cj-minute .cj-temps { grid-column: 1; grid-row: 2; }
  .cj-minute .cj-duo { grid-column: 1; grid-row: 3; min-height: 0; }
  .cj-minute .cj-micro-zone { grid-column: 1; grid-row: 4; }
  .cj-minute > .cj-cote { grid-column: 2; grid-row: 3 / 5; display: flex; flex-direction: column; min-height: 0; padding: 16px 0 0; }
  .cj-minute .cj-trans { flex: 1 1 auto; min-height: 0; padding: 18px 22px 8px; }
  .cj-minute .cj-live { flex: 1 1 0; min-height: 0; max-height: none; font-size: 19px; }
  .cj-minute .cj-ecrire { flex: 0 1 auto; min-height: 0; }
  .cj-minute .cj-trans-err ~ .cj-ecrire, .cj-minute .cj-live[hidden] ~ .cj-ecrire { flex: 1 1 auto; }
  .cj-minute .cj-trans-pied { margin-top: auto; }
  .cj-vue .cj-duo .cj-carte, .cj-vue .cj-duo .cj-carte.cj-montre-dos { max-width: none; }
  .cj-mn-l li { font-size: 19px; }
  .cj-mn-t { font-size: 14px; }
}

/* ---------- Jouer à plusieurs, refait (planche du 9 octobre, message C) ----------
   L'entrée (le prénom une fois, deux cartes : créer, rejoindre avec le code en quatre cases), l'arrivée par un lien,
   le salon de l'organisateur et celui d'un invité. Sans filet ; petites capitales seulement pour les étiquettes. */
.sa-titre { margin: 0; font-family: var(--v2-carte); font-size: 42px; font-weight: 700; line-height: 1.02; letter-spacing: -0.005em; color: var(--v2-texte); overflow-wrap: break-word; }
.v2-marque + .sa-titre, .v2-marque + .sa-titre-ligne { margin-top: var(--v2-e16); }
.sa-titre-ligne { align-items: center; }
/* Le prénom : une étiquette crème très légère, l'étiquette en petites capitales, la limite à droite. */
.sa-prenom { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; margin-top: 20px; padding: 12px 16px 10px; border-radius: 16px; background: rgba(244, 241, 232, 0.07); }
.sa-prenom-l { grid-column: 1 / -1; font-family: var(--v2-sans); font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--v2-texte-2); }
.sa-prenom-c { min-width: 0; min-height: 44px; margin: 0; padding: 0; border: 0; background: none; color: var(--v2-texte); font-family: var(--v2-carte); font-size: 24px; font-weight: 700; }
.sa-prenom-c::placeholder { color: var(--v2-texte-2); }
.sa-prenom-c:focus-visible { outline: none; }
.sa-prenom:focus-within { box-shadow: 0 0 0 var(--v2-focus) var(--v2-menthe); }
.sa-prenom-max { font-family: var(--v2-sans); font-size: 13px; font-weight: 600; color: var(--v2-texte-2); white-space: nowrap; }
/* Les deux cartes de papier. */
.sa-cartes { display: grid; gap: 16px; margin-top: 16px; }
.sa-carte { position: relative; display: block; box-sizing: border-box; width: 100%; margin: 0; padding: 18px 18px 20px; border: 0; border-radius: 18px; background: var(--v2-papier); color: var(--v2-encre); box-shadow: 0 3px 0 #CFC8B4, 0 14px 28px rgba(0, 0, 0, 0.28); text-align: left; font: inherit; }
.sa-carte-t { display: block; margin: 0; font-family: var(--v2-carte); font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--v2-encre); }
.sa-creer { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 92px; cursor: pointer; transition: transform 120ms ease-out; }
.sa-creer:active { transform: translateY(2px); }
.sa-creer:disabled { opacity: 0.6; cursor: default; }
.sa-plus { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--v2-encre); color: var(--v2-papier); }
.sa-plus svg { width: 24px; height: 24px; }
.sa-creer:focus-visible, .sa-entrer:focus-visible, .sa-case:focus-visible { outline: var(--v2-focus) solid var(--v2-encre); outline-offset: 3px; }
.sa-code-l { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.sa-cases { display: flex; gap: 8px; min-width: 0; }
.sa-case { box-sizing: border-box; width: 46px; height: 56px; margin: 0; padding: 0; border: 2px solid transparent; border-radius: 10px; background: #E6E0CF; color: var(--v2-encre); font-family: var(--v2-carte); font-size: 28px; font-weight: 700; text-align: center; text-transform: uppercase; caret-color: var(--v2-encre); }
.sa-case:focus { border-color: var(--v2-encre); outline: none; background: var(--v2-papier); }
.sa-entrer { flex: 1 1 auto; min-width: 84px; min-height: 56px; margin: 0; padding: 0 16px; border: 0; border-radius: 12px; background: var(--v2-encre); color: var(--v2-papier); font-family: var(--v2-sans); font-size: 16px; font-weight: 700; cursor: pointer; }
.sa-entrer:disabled { opacity: 0.6; cursor: default; }
/* De 360 à 389 px (iPhone de 375 px) : cases de 44 px, plus serrées, « Entrer » plus étroit, tout sur une ligne
   (il faut 360 px d'écran). Sous 360 px, les cases se partagent la largeur (44 px au moins) et « Entrer » passe dessous,
   en pleine largeur. */
@media (min-width: 360px) and (max-width: 389px) { .sa-code-l { gap: 8px; } .sa-cases { gap: 6px; } .sa-case { width: 44px; } .sa-entrer { min-width: 74px; padding: 0 12px; } }
@media (max-width: 359px) { .sa-code-l { flex-wrap: wrap; gap: 8px; } .sa-cases { flex: 1 1 100%; gap: 8px; } .sa-case { flex: 1 1 0; width: 0; min-width: 44px; height: 54px; } .sa-entrer { flex-basis: 100%; min-height: 48px; } }

/* Le code en quatre cartes de papier légèrement penchées. */
.sa-code { display: flex; justify-content: center; gap: 8px; margin: 14px 0 0; }
.sa-code-c { display: grid; place-items: center; width: 60px; height: 72px; border-radius: 12px; background: var(--v2-papier); color: var(--v2-encre); box-shadow: 0 3px 0 #CFC8B4, 0 10px 22px rgba(0, 0, 0, 0.3); font-family: var(--v2-carte); font-size: 40px; font-weight: 700; line-height: 1; }
.sa-code-c:nth-child(1) { transform: rotate(-3deg); }
.sa-code-c:nth-child(2) { transform: rotate(2deg) translateY(2px); }
.sa-code-c:nth-child(3) { transform: rotate(-1.5deg); }
.sa-code-c:nth-child(4) { transform: rotate(3deg) translateY(1px); }
.sa-code-grand .sa-code-c { width: 62px; height: 76px; font-size: 42px; }
.sa-code-moyen .sa-code-c { width: 48px; height: 60px; font-size: 32px; border-radius: 10px; }
@media (max-width: 359px) { .sa-code { gap: 8px; } .sa-code-grand .sa-code-c { width: 58px; height: 70px; font-size: 38px; } }

/* Arriver par un lien. */
.sa-deja { display: flex; justify-content: center; width: fit-content; margin: 14px auto 0; padding: 6px 12px; border-radius: 999px; background: rgba(244, 241, 232, 0.08); font-family: var(--v2-sans); font-size: 14px; font-weight: 600; color: var(--v2-texte); }
.sa-deja b { margin-right: 0.3em; font-weight: 800; }
.sa-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 20px; }
.sa-entrer-salon { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; }
.sa-entrer-salon svg { width: 20px; height: 20px; }
.sa-autre { min-height: 44px; }
.sa-actions .sa-autre { align-self: flex-start; padding-inline: 0; }

/* Le salon. */
.sa-titre-salon { align-self: stretch; margin-bottom: 0; }
.sa-salon { display: grid; gap: 18px; }
.sa-salon-g { display: flex; flex-direction: column; align-items: center; }
.sa-partage { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
.sa-partager { display: inline-flex; align-items: center; gap: 10px; width: auto; min-height: 48px; padding: 0 20px; }
.sa-partager svg, .sa-qr-b svg { width: 20px; height: 20px; flex: none; }
.sa-qr-b { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; margin: 0; padding: 0 18px; border: 0; border-radius: 14px; background: rgba(244, 241, 232, 0.1); color: var(--v2-texte); font-family: var(--v2-sans); font-size: 16px; font-weight: 700; cursor: pointer; }
.sa-qr-b[aria-expanded="true"] { background: rgba(244, 241, 232, 0.18); }
.sa-qr-b:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 3px; }
.sa-qr { display: none; flex-direction: column; align-items: center; gap: 8px; margin: 18px 0 0; padding: 12px 12px 10px; border-radius: 16px; background: #fff; }
.sa-qr.sa-qr-ouvert { display: flex; }
.sa-qr .qr { display: block; width: 168px; height: 168px; }
.sa-qr-t { margin: 0; font-family: var(--v2-sans); font-size: 13px; font-weight: 700; color: var(--v2-encre); }
.sa-bloc + .sa-bloc { margin-top: 18px; }
.sa-entete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sa-h2 { margin: 0; font-family: var(--v2-carte); font-size: 24px; font-weight: 700; line-height: 1.1; color: var(--v2-texte); }
.sa-compte { font-family: var(--v2-sans); font-size: 14px; font-weight: 600; color: var(--v2-texte-2); }
/* Les joueurs en jetons ronds ; les places libres jusqu'à huit. */
.sa-jetons { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 6px; margin: 12px 0 0; padding: 0; }
.sa-joueur { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; }
.sa-jeton { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--v2-papier); color: var(--v2-encre); font-family: var(--v2-carte); font-size: 22px; font-weight: 700; box-shadow: 0 3px 0 #CFC8B4; }
.sa-moi .sa-jeton, .sa-jeton.sa-moi { box-shadow: 0 0 0 3px var(--v2-fond), 0 0 0 6px var(--v2-menthe); }
.sa-nom { max-width: 100%; overflow-wrap: anywhere; font-family: var(--v2-sans); font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--v2-texte); }
.sa-sous { margin-top: -4px; font-family: var(--v2-sans); font-size: 13px; font-weight: 600; color: var(--v2-texte-2); }
.sa-libre .sa-jeton { background: rgba(244, 241, 232, 0.08); color: var(--v2-texte-2); box-shadow: none; }
.sa-libre .sa-jeton svg { width: 20px; height: 20px; }
.sa-libre .sa-nom { font-weight: 600; color: var(--v2-texte-2); }
.sa-manque { margin: 16px 0 0; padding: 10px 14px; border-radius: 12px; background: rgba(255, 162, 21, 0.14); font-family: var(--v2-sans); font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--v2-texte); }
/* Les réglages en trois petites cartes. */
.sa-reglages { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; margin-top: 14px; }
.sa-reglage { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 11px 11px; border-radius: 14px; background: var(--v2-papier); color: var(--v2-encre); box-shadow: 0 3px 0 #CFC8B4; }
.sa-reglage-l { font-family: var(--v2-sans); font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--v2-encre-2); }
.sa-reglage-v { font-family: var(--v2-carte); font-size: 18px; font-weight: 700; line-height: 1.1; overflow-wrap: break-word; }
@media (min-width: 360px) { .sa-reglages:has(> :nth-child(3)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); } }
.sa-disques { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 4px; }
.sa-disque { display: block; width: 11px; height: 11px; border-radius: 50%; background: var(--v2-menthe); }
.sa-disque[data-rg-th="geo"] { background: var(--v2-th-geo); } .sa-disque[data-rg-th="tech"] { background: var(--v2-th-tech); }
.sa-disque[data-rg-th="sav"] { background: var(--v2-th-sav); } .sa-disque[data-rg-th="eco"] { background: var(--v2-th-eco); }
.sa-disque[data-rg-th="soc"] { background: var(--v2-th-soc); } .sa-disque[data-rg-th="sport"] { background: var(--v2-th-sport); }
.sa-disque[data-rg-th="mode"] { background: var(--v2-th-mode); } .sa-disque[data-rg-th="spice"] { background: var(--v2-th-spice); }
.sa-modifier { display: inline-flex; align-items: center; min-height: 44px; margin-top: -4px; padding-inline: 0; }
/* Les liens des écrans « Jouer à plusieurs » (Quitter, Modifier les réglages, Entrer un autre code) : menthe, sans
   soulignement, comme sur la planche ; ils sont seuls sur leur ligne, jamais dans un paragraphe. Souligné au survol. */
.v2-jouer .v2-tete .v2-lien, .sa-modifier, .sa-autre { text-decoration: none; }
@media (hover: hover) { .v2-jouer .v2-tete .v2-lien:hover, .sa-modifier:hover, .sa-autre:hover { text-decoration: underline; } }
/* Les boutons menthe des salons en relief, comme sur la planche et comme les gros boutons du chemin : 4 px de bord vert
   foncé, l'appui enfonce le bouton. */
.sa-partager, .sa-lancer .v2-bouton, .sa-entrer-salon { box-shadow: 0 4px 0 #3E8A48; }
.sa-partager:active, .sa-lancer .v2-bouton:active, .sa-entrer-salon:active { box-shadow: 0 1px 0 #3E8A48; transform: translateY(3px); }
/* Lancer la partie : collé en bas de l'écran, au dessus de la barre du bas ; la répartition des rôles dessous. */
.sa-lancer { position: sticky; bottom: 0; z-index: 4; margin-top: 24px; padding: 12px 0 calc(env(safe-area-inset-bottom, 0px) + 10px); background: var(--v2-fond); }
body.has-tabbar .sa-lancer { bottom: calc(var(--tabbar-h) + var(--barre-bas)); padding-bottom: calc(10px + var(--piece-haut)); }
.sa-lancer .v2-bouton { width: 100%; }
.sa-repartition { margin: 8px 0 0; text-align: center; font-family: var(--v2-sans); font-size: 13px; font-weight: 600; color: var(--v2-texte-2); }
/* Le salon d'un invité : un encadré calme avec la petite carte A/B. */
.sa-attente { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding: 14px 16px; border-radius: 16px; background: rgba(244, 241, 232, 0.06); }
.sa-attente p { margin: 0; font-family: var(--v2-sans); font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--v2-texte); }
.sa-ab { display: grid; place-items: center; flex: none; width: 40px; height: 48px; border-radius: 7px; background: var(--v2-papier); box-shadow: 0 2px 0 #CFC8B4; transform: rotate(-4deg); font-family: var(--v2-serif); font-size: 18px; color: var(--v2-encre-2); }
.sa-ab span:first-child { color: var(--v2-camp-a-papier); } .sa-ab span:last-child { color: var(--v2-camp-b-papier); }
.sa-ab { display: flex; align-items: center; justify-content: center; }
/* La feuille des réglages : les tuiles de la piste 1. */
.sa-feuille-reglages .rg-tuiles { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .sa-creer { transition: none; } }

/* Ordinateur, dès 900 px : l'entrée en deux cartes côte à côte ; le salon en deux colonnes, à gauche le code, le
   partage et le QR code (toujours là) dans un panneau crème très léger, à droite les joueurs, les réglages, le bouton. */
@media (min-width: 900px) {
  body:has(.sa-salon, .sa-cartes) .app { max-width: 1184px; padding-inline: var(--v2-e32); }
  .sa-titre { font-size: 72px; }
  .sa-titre-salon { font-size: 56px; }
  .sa-prenom { max-width: 420px; }
  .sa-cartes { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .sa-creer { min-height: 0; }
  .sa-salon-hote, .sa-salon { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); align-items: start; gap: 40px; margin-top: 24px; }
  .sa-salon-g { padding: 28px 24px 24px; border-radius: 24px; background: rgba(244, 241, 232, 0.06); }
  .sa-salon-g .sa-code { margin-top: 0; }
  .sa-qr, .sa-qr.sa-qr-ouvert { display: flex; }
  .sa-qr-b { display: none; }
  .sa-lancer { position: static; padding-bottom: 0; }
  .sa-lancer .v2-bouton { width: auto; min-width: 360px; }
  .sa-lancer .sa-repartition { text-align: left; }
  .sa-salon-g .sa-titre-salon { margin: 0 0 20px; text-align: center; }
  .sa-entrer { flex: 0 0 auto; min-width: 96px; }
}

/* ---------- Petits textes, version 2 (planche « Petits textes, version 2 », message D du 9 octobre) ----------
   Progrès, Réglages, les bilans du solo, la fin de manche et la fin de partie à table et en ligne : plus aucun serif.
   Tout ce qui y était en Instrument Serif passe en Archivo Narrow, la police des cartes et du salon : 700 pour les
   titres et les grands chiffres, 600 pour le reste. Le logo et le monogramme A/B gardent leur police. Ailleurs dans
   l'appli, rien ne change (la liste des titres encore en serif est dans le journal). Les phrases sous les titres
   deviennent des étiquettes de 30 px ; une phrase qui porte une information reste lue par le lecteur d'écran. */
.ch-page, .ch-passage, .v2-reglages, .jeu-solo-self, .jeu-solo-result, .jeu-bilan, .jeu-fin,
body:has(.ch-page, .v2-reglages, .jeu-solo-self, .jeu-solo-result, .jeu-bilan, .jeu-fin) .sheet { --v2-serif: var(--v2-carte); }
:is(.ch-page, .v2-reglages, .ch-passage, .jeu-solo-self, .jeu-solo-result, .jeu-bilan, .jeu-fin, body:has(.ch-page, .v2-reglages, .jeu-solo-self, .jeu-solo-result, .jeu-bilan, .jeu-fin) .sheet) :is(.v2-logo, .v2-mono, .ch-mono) { --v2-serif: "Instrument Serif", "Times New Roman", Times, Georgia, serif; }
/* La réponse de la carte à découvrir du chemin est une carte : elle garde l'Archivo Narrow 700 des cartes. */
:is(.ch-page, .v2-reglages, .ch-passage, .jeu-solo-self, .jeu-solo-result, .jeu-bilan, .jeu-fin, body:has(.ch-page, .v2-reglages, .jeu-solo-self, .jeu-solo-result, .jeu-bilan, .jeu-fin) .sheet) :is(.v2-debat-q, .ch-jourp-q, .jeu-q, .jeu-recap-q, .ch-f-ex, .jeu-citation) { font-weight: 600; }
:is(.ch-page, .v2-reglages, .ch-passage, .jeu-solo-self, .jeu-solo-result, .jeu-bilan, .jeu-fin, body:has(.ch-page, .v2-reglages, .jeu-solo-self, .jeu-solo-result, .jeu-bilan, .jeu-fin) .sheet) :is(.v2-titre, .v2-intertitre, .v2-niveau-nom, .ch-titre-vue, .ch-bandeau-n, .ch-passage-n, .ch-point-q, .ch-f-q, .jeu-titre, .jeu-intertitre, .jeu-grand, .jeu-gagnant-nom, .jeu-score-grand b, .jeu-lettre, .jeu-camps-barre, .ac-a-lire-t, .sh .h2) { font-weight: 700; letter-spacing: 0; }

/* Les titres de ces écrans à 25 px, comme sur la planche (l'Archivo Narrow grasse paraît plus grande que l'Instrument Serif). */
:is(.ch-page, .v2-reglages, .jeu-solo-self, .jeu-solo-result, .jeu-bilan, .jeu-fin) :is(.v2-intertitre, .ch-titre-vue, .jeu-titre, .jeu-intertitre, .ac-a-lire-t) { font-size: 25px; }

/* Les étiquettes : pilule crème très légère sur la table, Archivo 700 de 13 px, icône de 15 px. */
.v2-etiqs { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.v2-etiq { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(244, 241, 232, 0.1); color: var(--v2-texte); font-family: var(--v2-sans); font-size: 13px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.v2-etiq:has(.v2-etiq-i) { padding-left: 10px; }
.v2-etiq b { font-weight: 700; }
.v2-etiq > span[aria-hidden] { display: inline-flex; align-items: center; gap: 6px; }
.v2-etiq-i { width: 15px; height: 15px; flex: none; stroke-width: 2; }
.ch-jauges .v2-etiqs { margin-top: 10px; }

/* Derniers débats, quand il n'y en a aucun : un panneau crème très léger, sans bordure, et le bouton pour jouer. */
.v2-vide { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 12px 12px 12px 16px; border-radius: 16px; background: rgba(244, 241, 232, 0.06); }
.v2-vide-t { margin: 0; font-family: var(--v2-carte); font-size: 17px; font-weight: 700; line-height: 1.2; color: var(--v2-texte); }
.v2-vide-b { min-height: var(--v2-cible); padding: 0 16px; font-size: 15px; }

/* Seul, avant l'analyse et le bilan : la durée et le score en grand, leur unité à côté, l'étiquette dessous. */
.jeu-chiffre { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 8px 0 0; }
.jeu-chiffre b { font-family: var(--v2-carte); font-size: 72px; font-weight: 700; line-height: 1; color: var(--v2-texte); }
.jeu-chiffre > span, .jeu-solo-result .jeu-score-grand > span:not(.visually-hidden) { font-family: var(--v2-sans); font-size: 15px; font-weight: 700; color: var(--v2-texte-2); }
.jeu-solo-result .jeu-score-grand b { font-size: 80px; }

/* Seul, l'analyse expliquée : repliée sous « Comment marche l'analyse ? », comme « Où va ta voix ? ». */
.jeu-comment { margin-top: var(--v2-e24); border-radius: 14px; background: rgba(244, 241, 232, 0.06); }
.jeu-comment > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 16px; border-radius: 14px; cursor: pointer; list-style: none; font-family: var(--v2-carte); font-size: 19px; font-weight: 700; line-height: 1.2; color: var(--v2-texte); }
.jeu-comment > summary::-webkit-details-marker { display: none; }
.jeu-comment > summary svg { width: 20px; height: 20px; flex: none; color: var(--v2-menthe); transition: transform 160ms ease-out; }
.jeu-comment[open] > summary svg { transform: rotate(90deg); }
.jeu-comment > summary:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 2px; }
.jeu-comment > :not(summary) { margin-left: 16px; margin-right: 16px; }
.jeu-comment > h2 { margin-top: 4px; }
.jeu-comment > :last-child { margin-bottom: 0; padding-bottom: 16px; }
@media (prefers-reduced-motion: reduce) { .jeu-comment > summary svg { transition: none; } }

/* Mes données : l'avertissement sur l'effacement par le navigateur, replié sous « Bon à savoir » (demande de Jules). */
.v2-bon { margin-top: 20px; }
.v2-bon .v2-para { margin-top: 4px; }
/* Fin de manche : « Cible 10 » colle au titre, comme sur la planche (la page met 24 px entre ses blocs). */
.jeu-bilan > .jeu-titre + .v2-etiqs { margin-top: -12px; }

/* Fin de manche : le numéro d'étape dans un jeton rond crème. */
.jeu-bilan .jeu-titre { align-items: center; }
.jeu-bilan .jeu-titre-n { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--v2-papier); color: var(--v2-encre); font-family: var(--v2-carte); font-size: 19px; font-weight: 700; line-height: 1; }

/* ---------- La page d'un thème, plus vivante (planche du 9 octobre, message E) ----------
   La tête est l'affiche du thème en grand ; les titres de section sortent des cartes, en League Gothic crème ;
   « À débattre » est la carte du paquet de l'accueil sur sa pile ; « Ton tableau » passe sur le vert ; « Chemin du
   thème » et « À plusieurs » sont les tuiles de l'accueil ; les sous thèmes, des paquets. Mêmes coins partout (20 px pour
   les cartes et les paquets, 14 px pour les boutons), 36 px entre les blocs, aucun filet. */
.cat-tete { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: var(--cat-tete-h, 250px); margin: 20px 0 5px; padding: 20px 20px 24px; box-sizing: border-box; border-radius: 24px; overflow: hidden; background: var(--th); color: var(--v2-encre); box-shadow: 0 5px 0 var(--th-ombre); }
.cat-tete .cat-gt-nom { position: relative; z-index: 1; display: block; margin: 0; font-family: var(--v2-gros); font-size: var(--cat-nom, 56px); font-weight: 400; line-height: 0.9; letter-spacing: 0; text-transform: uppercase; color: var(--v2-encre); }
.cat-tete .cat-gt-nom > span { display: block; padding-top: 0; white-space: nowrap; }
.cat-tete-prog { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; margin: 18px 0 0; font-family: var(--v2-sans); font-size: 15px; }
.cat-tete-prog b { font-weight: 800; }
.cat-tete-ill { position: absolute; z-index: 0; right: 16px; bottom: 16px; display: block; height: var(--cat-ill-h, 200px); pointer-events: none; }
.cat-tete-ill > .ill { display: block; width: auto; height: 100%; }
.cat-vivante .cat-tampon { margin-top: 16px; }

/* Les titres de section, hors des cartes ; le niveau du sujet à droite de « À débattre ». */
.cat-vivante .cat-cols { margin-top: 24px; gap: 36px; }
.cat-vivante .cat-h2 { margin: 0; font-size: 38px; line-height: 0.95; color: var(--v2-texte); }
.cat-sec-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cat-sec-tete .cat-niv { min-height: 26px; padding: 1px 10px 0; border-radius: 999px; background: rgba(244, 241, 232, 0.1); color: var(--v2-texte); }
.cat-sec-tete .cat-niv-crete { background: var(--v2-papier); color: var(--v2-encre); }

/* À débattre : la carte du paquet sur une pile de deux, penchée de deux degrés, centrée. */
.cat-pile { position: relative; width: 258px; aspect-ratio: 1 / 1.245; margin: 26px auto 0; }
.cat-pile .pq-carte { cursor: auto; touch-action: auto; user-select: auto; -webkit-user-select: auto; }
.cat-pile .pq-r0 { --pq-r: 2deg; --pq-j: 0deg !important; will-change: auto; }
.cat-pile .pq-r1 { --pq-r: -4deg; }
.cat-pile .pq-carte:not(.pq-r0) { box-shadow: 0 2px 0 #CFC8B4, 0 10px 18px rgba(0, 0, 0, 0.25); }
.cat-pile-nouvelle .pq-r0 { animation: cat-fondu 160ms ease-out both; }
.cat-vivante .cat-debat { padding-top: 0; overflow: visible; }
.cat-vivante .cat-debat::before { content: none; }
.cat-vivante .cat-debat-actions { margin-top: 26px; display: flex; gap: 10px; }
.cat-seul { flex: 1 1 auto; min-height: 48px; padding: 0 16px; border-radius: 14px; font-size: 16px; }
.cat-autre { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 16px; border: 0; border-radius: 14px; background: rgba(244, 241, 232, 0.1); color: var(--v2-texte); font-family: var(--v2-sans); font-size: 15px; font-weight: 800; cursor: pointer; }
.cat-autre svg { width: 18px; height: 18px; }
.cat-autre:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 3px; }
@media (hover: hover) { .cat-autre:hover { background: rgba(244, 241, 232, 0.16); } }

/* Ton tableau, sur le vert : un panneau crème très léger, la couleur vive du thème sur une piste crème très légère. */
.cat-tab-panneau { margin-top: 14px; padding: 20px 18px 20px; border-radius: 22px; background: rgba(244, 241, 232, 0.07); }
.cat-vivante .cat-tab-haut { margin-top: 0; }
.cat-vivante .cat-anneau b, .cat-vivante .cat-jauge b { color: var(--v2-texte); }
.cat-vivante .cat-mesure-l { color: var(--v2-texte-2); }
.cat-vivante .cat-anneau-fond, .cat-vivante .cat-jauge-fond { stroke: rgba(244, 241, 232, 0.12); }
.cat-vivante .cat-anneau-plein, .cat-vivante .cat-jauge-plein { stroke: var(--th); }
.cat-vivante .cat-bareme { margin-top: 22px; gap: 16px; }
.cat-vivante .cat-bareme li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
.cat-vivante .cat-b-nom, .cat-vivante .cat-b-n { color: var(--v2-texte); }
.cat-vivante .cat-barre { grid-column: 1 / -1; height: 10px; }
.cat-vivante .cat-barre-fond { fill: rgba(244, 241, 232, 0.12); }
.cat-vivante .cat-barre-plein { fill: var(--th); }

/* Les deux tuiles de l'accueil, côte à côte et de même largeur. */
.cat-vivante .cat-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0; }
.cat-vivante .cat-deux .pq-tuile { min-height: 72px; justify-content: space-between; border-radius: 14px; }
.cat-vivante .cat-deux .pq-tuile-t { white-space: normal; font-size: 15px; }
.cat-vivante .pq-tuile:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 3px; }

/* Les sous thèmes, des paquets : fermé, l'épaisseur d'une pile de cartes ; ouvert, à plat. */
.cat-vivante .cat-subs { gap: 22px; }
.cat-vivante .cat-sub { border-radius: 20px; box-shadow: 0 5px 0 -1px #E6E0CF, 0 10px 0 -3px #CFC8B4, 0 14px 24px rgba(0, 0, 0, 0.3); }
.cat-vivante .cat-sub:has(> .cat-sub-h [aria-expanded="true"]) { box-shadow: 0 14px 28px rgba(0, 0, 0, 0.3); }
.cat-vivante .cat-sub-b { border-radius: 20px; }
.cat-vivante .cat-q .cat-rond { border: 0; background: #E6E0CF; }
.cat-vivante .cat-q.cat-joue .cat-rond { background: var(--thp); }
.cat-vivante .cat-encre { border-radius: 14px; }
.cat-vivante .cat-tirer { gap: 8px; }
.cat-vivante .cat-tirer svg { width: 18px; height: 18px; flex: none; }
.cat-vivante .cat-a-lire .cat-a-lire-carte { margin-top: 14px; }

@media (min-width: 900px) {
  .cat-tete { margin-top: 28px; padding: 32px 40px 36px; border-radius: 28px; }
  .cat-tete-ill { right: 32px; bottom: 28px; height: var(--cat-ill-h, 300px); }
  .cat-tete-prog { margin-top: 24px; }
  .cat-tete .cat-rail { width: 96px; }
  .cat-vivante .cat-cols { margin-top: 40px; row-gap: 36px; column-gap: 40px; }
  .cat-vivante .cat-h2 { font-size: 46px; }
  .cat-pile { width: 290px; }
}
@media (prefers-reduced-motion: reduce) { .cat-pile-nouvelle .pq-r0 { animation: none; } }

/* ---------- L'Actu côte à côte (planche « Actu côte à côte », message F du 9 octobre) ----------
   La disposition d'avant (d83249e) avec la typographie d'aujourd'hui : la une en photo pleine et « En continu » sur sa
   feuille de papier, côte à côte sur ordinateur (même haut, même bas), l'une sous l'autre sous 900 px ; puis six
   vignettes par thème (une rangée qui défile sur téléphone, deux rangées de trois sur ordinateur) ; 24 sur la page d'un
   thème. Le crédit d'une illustration est dans la carte, en bas : rien ne dépasse sous les cartes. */
.ac-k .k-revue { margin-top: 24px; }
.ac-k .k-note.v2-etiqs { margin: 16px 0 0; }
.ac-k .k-une-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.ac-k .k-une { margin: 0; }
.ac-k .k-une-fig { display: block; }
.k-une-carte, .k-vig-carte { position: relative; overflow: hidden; background: #0B2E1B; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45), 0 8px 16px rgba(0, 0, 0, 0.3); }
.k-une-carte { height: 330px; border-radius: 22px; }
.k-vig-carte { height: 340px; border-radius: 20px; }
.ac-k :is(.k-une-img, .k-vig-img) { position: absolute; inset: 0; display: block; border-radius: 0; }
.ac-k :is(.k-une-img, .k-vig-img) img { display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 0; }
.ac-k :is(.k-une-img, .k-vig-img).k-tuile { display: grid; place-items: center; border: 0; }
/* Le dégradé, réglé à la mesure (4,5 au moins sous tout le texte, même sur une photo blanche) : sur la une, de bas en
   haut ; sur une vignette, il monte avec le titre (k-vig-bas::before) ; en haut, sous les pastilles. */
.k-une-carte::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(4, 18, 10, 0.88) 0%, rgba(4, 18, 10, 0.76) 34%, rgba(4, 18, 10, 0.62) 54%, rgba(4, 18, 10, 0.3) 70%, rgba(4, 18, 10, 0) 86%), linear-gradient(to bottom, rgba(4, 18, 10, 0.4) 0%, rgba(4, 18, 10, 0) 26%); }
.k-vig-carte::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(4, 18, 10, 0.4) 0%, rgba(4, 18, 10, 0) 26%); }
/* Les pastilles : le thème (son disque et son nom, sur crème) et « Vu par n médias » (sombre). */
.k-une-haut { position: absolute; top: 16px; left: 16px; right: 16px; z-index: 2; margin: 0; display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; gap: 8px; pointer-events: none; }
.ac-k .k-une-haut.k-pile { flex-direction: column; align-items: flex-start; }
.k-pastille { display: inline-flex; flex: none; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px 0 4px; box-sizing: border-box; border-radius: 16px; background: rgba(244, 241, 232, 0.95); color: var(--v2-encre); font-family: var(--v2-sans); font-size: 13px; font-weight: 700; white-space: nowrap; }
.k-verre { display: inline-flex; flex: none; align-items: center; min-height: 32px; padding: 0 12px; box-sizing: border-box; border: 0; border-radius: 16px; background: rgba(4, 18, 10, 0.72); color: #FFFFFF; font-family: var(--v2-sans); font-size: 13px; font-weight: 700; white-space: nowrap; }
.k-vu-court { display: none; }
.k-court .k-vu-long { display: none; }
.k-court .k-vu-court { display: inline; }
.ac-k .k-vig .k-verre { position: absolute; top: 16px; left: 16px; z-index: 2; min-height: 28px; padding: 0 10px; pointer-events: none; }
/* Le bas de la une : le titre en League Gothic, sa taille selon sa longueur, quatre lignes au plus, jamais souligné. */
.k-une-bas { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; pointer-events: none; }
.ac-k .k-une-t { margin: 0; padding-bottom: 4px; font-family: var(--v2-gros); font-size: 36px; font-weight: 400; line-height: 1.04; letter-spacing: 0; color: #FFFFFF; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; }
.ac-k .k-une-t[data-long="2"] { font-size: 30px; }
.ac-k .k-une-t[data-long="3"] { font-size: 26px; }
.ac-k .k-une-t .rv-lien-titre { color: #FFFFFF; text-decoration: none; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); pointer-events: auto; }
@media (hover: hover) { .ac-k .k-une .rv-lien-titre:hover, .ac-k .k-une:has(.rv-lien:hover) .rv-lien-titre { text-decoration: none; } }
.ac-k .k-une-meta { margin: 8px 0 0; color: #FFFFFF; }
.ac-k .k-une-meta .rv-media, .ac-k .k-une-meta time { color: #FFFFFF; }
/* Au survol, la carte s'éclaircit légèrement ; le cadre de focus reste pour le clavier seulement. */
.ac-k :is(.k-une-img, .k-vig-img) { transition: filter 160ms ease-out; }
@media (hover: hover) { .ac-k .k-une:has(.rv-lien:hover) .k-une-img, .ac-k .k-une-carte:hover .k-une-img, .ac-k .k-vig-carte:hover .k-vig-img { filter: brightness(1.12); } }
@media (prefers-reduced-motion: reduce) { .ac-k :is(.k-une-img, .k-vig-img) { transition: none; } }
.ac-k :is(.k-une-t, .k-vig-t) .rv-lien-titre:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 2px; border-radius: 4px; }
/* « Les 9 médias » : un bouton crème très léger, sans contour. */
.ac-k .k-une-actions { margin: 12px 0 0; }
.k-medias { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 0; border-radius: 14px; background: rgba(244, 241, 232, 0.1); color: var(--v2-texte); font-family: var(--v2-sans); font-size: 15px; font-weight: 700; cursor: pointer; }
@media (hover: hover) { .k-medias:hover { background: rgba(244, 241, 232, 0.16); } }
.k-medias:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 2px; }
/* Le crédit de l'illustration, dans la carte, en bas, à la même place partout. */
.ac-k :is(.k-une-bas, .k-vig-bas) .k-credit { margin: 6px 0 0; color: rgba(255, 255, 255, 0.82); }
.ac-k :is(.k-une-bas, .k-vig-bas) .k-credit a { color: rgba(255, 255, 255, 0.82); pointer-events: auto; }
/* « En continu » à côté de la une (feuille de papier d'aujourd'hui) : le média et le temps à gauche, « +n médias » à droite. */
.ac-k .k-une-grille .k-continu { margin: 0; }
.ac-k .k-continu .gt-c-sous { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ac-k .k-continu .gt-c-src { min-width: 0; }
.ac-k .k-continu .gt-plus { flex: none; text-decoration: underline; text-underline-offset: 3px; color: var(--v2-lien-papier); font-weight: 700; }
/* Les vignettes */
.ac-k .k-une-grille + .k-section { margin-top: 40px; }
.ac-k .rv-cartes.k-rangee { list-style: none; margin: 16px calc(-1 * var(--k-m)) 0; padding: 4px var(--k-m) 24px; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--k-m); scrollbar-width: none; }
.ac-k .rv-cartes.k-rangee::-webkit-scrollbar { display: none; }
.ac-k .k-rangee > .k-vig { flex: 0 0 min(274px, 70vw); scroll-snap-align: start; }
.ac-k .rv-cartes.k-grille { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.ac-k .k-vig { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: #FFFFFF; }
.ac-k .k-vig-fig { display: block; }
.k-vig-bas { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.k-vig-bas a, .k-vig-bas button { pointer-events: auto; }
.k-vig-bas::before { content: ""; position: absolute; z-index: -1; left: -16px; right: -16px; bottom: -16px; top: -48px; pointer-events: none; background: linear-gradient(to top, rgba(4, 18, 10, 0.86) 0, rgba(4, 18, 10, 0.72) calc(100% - 48px), rgba(4, 18, 10, 0) 100%); }
.ac-k .k-vig-t { margin: 0; font-family: var(--v2-sans); font-size: 17px; font-weight: 800; line-height: 1.3; color: #FFFFFF; overflow-wrap: break-word; }
.ac-k .k-vig-t.k-long { font-size: 15px; }
.ac-k .k-vig-t.k-coupe { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.ac-k .k-vig .rv-lien-titre { color: #FFFFFF; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }
.ac-k .k-vig-meta { margin: 0; flex-wrap: nowrap; justify-content: space-between; gap: 8px; color: #FFFFFF; }
.ac-k .k-vig-src { min-width: 0; }
.ac-k .k-vig-meta .rv-media, .ac-k .k-vig-meta time { color: #FFFFFF; }
.ac-k .k-vig .k-plus { flex: none; min-height: 44px; margin: -12px 0; font-size: 13px; color: #FFFFFF; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.ac-k .k-vig .k-plus:focus-visible { outline-color: var(--v2-menthe); }
.ac-k .rv-plus-anciens { margin-top: 24px; }
/* Au delà de 48 cartes, les titres plus anciens en liste, sur la feuille de papier d'En continu : l'heure, le titre, le
   média, jamais d'image (Jules, 14 octobre). Toutes les lignes se voient ; deux colonnes sur ordinateur. */
.ac-k .gt-anciens { margin: 24px 0 0; }
.ac-k .gt-anciens .gt-continu-l li:nth-child(n) { display: grid; grid-template-columns: 64px minmax(0, 1fr); }
.ac-k .gt-anciens .gt-heure { white-space: nowrap; }
@media (min-width: 900px) { .ac-k .gt-continu.gt-anciens .gt-continu-l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; } }
.ac-k .rv-fantomes.k-rangee .rv-fantome { padding: 0; border: 0; background: none; }
.ac-k .rv-fantomes .k-vig-carte { background: rgba(244, 241, 232, 0.06); box-shadow: none; }
@media (max-width: 599px) { .ac-k .k-grille .k-vig-carte { height: 300px; } }
@media (min-width: 600px) { .ac-k .rv-cartes.k-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .ac-k .k-revue { margin-top: 32px; }
  .ac-k .k-une-grille { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; row-gap: 0; }
  .ac-k .k-une { grid-column: span 8; }
  .ac-k .k-une-grille .k-continu { grid-column: span 4; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; padding: 20px 20px 16px; }
  .ac-k .k-continu .gt-continu-l { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; margin-top: 12px; }
  .ac-k .k-continu .gt-continu-l li:nth-child(n) { display: grid; }
  .k-une-carte { height: 420px; border-radius: 22px; }
  .k-une-haut { top: 24px; left: 24px; right: 24px; }
  .k-une-bas { left: 32px; right: 32px; bottom: 28px; }
  .ac-k .k-une-t { font-size: 56px; }
  .ac-k .k-une-t[data-long="2"] { font-size: 46px; }
  .ac-k .k-une-t[data-long="3"] { font-size: 38px; }
  .ac-k .rv-cartes.k-rangee { margin-inline: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; overflow: visible; scroll-snap-type: none; }
  .ac-k .k-rangee > .k-vig { flex: none; }
  .ac-k .rv-cartes.k-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .ac-k .rv-cartes.k-rangee { scroll-behavior: auto; } }
/* La tuile d'une carte sans photo qui colle (planche « O, tuile », validée par Jules le 13 octobre) : le fond dans la
   couleur du thème assombrie sur #06140C (48 % au centre, 30 % au bord), le disque plein de la couleur du thème avec
   l'icône à l'encre (72 px sur les vignettes, 96 px sur la une), entre les pastilles et le titre ; le titre des vignettes
   en 22 px, sans le dégradé noir. Deux nuances alternent (la seconde à 36 % et 22 %) pour que deux tuiles voisines ne
   soient jamais identiques, dans chaque disposition : une seule ligne ou colonne, deux, trois ou quatre colonnes.
   Contraste du titre blanc : 5,4 au moins (Économie, au centre). Sans color-mix, la tuile sombre d'avant reste. */
.ac-k .k-th-geo { --th: var(--v2-th-geo); }
.ac-k .k-th-eco { --th: var(--v2-th-eco); }
.ac-k .k-th-tech { --th: var(--v2-th-tech); }
.ac-k .k-th-sav { --th: var(--v2-th-sav); }
.ac-k .k-th-soc { --th: var(--v2-th-soc); }
.ac-k .k-th-sport { --th: var(--v2-th-sport); }
.ac-k .k-th-mode { --th: var(--v2-th-mode); }
.ac-k .k-th-spice { --th: var(--v2-th-spice); }
.ac-k .k-tuile { --k-n1: 48%; --k-n2: 30%; background: radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--th) var(--k-n1), #06140C) 0%, color-mix(in srgb, var(--th) var(--k-n2), #06140C) 75%); }
/* La seconde nuance en damier : une rangée (une ligne qui défile, ou trois colonnes) et une grille d'une colonne, une carte
   sur deux ; une grille de deux colonnes (600 à 899 px) et de quatre (900 px et plus), en damier. */
.ac-k .k-rangee > li:nth-child(even) .k-tuile { --k-n1: 36%; --k-n2: 22%; }
@media (max-width: 599px) { .ac-k .k-grille > li:nth-child(even) .k-tuile { --k-n1: 36%; --k-n2: 22%; } }
@media (min-width: 600px) and (max-width: 899px) { .ac-k .k-grille > li:is(:nth-child(4n+2), :nth-child(4n+3)) .k-tuile { --k-n1: 36%; --k-n2: 22%; } }
@media (min-width: 900px) { .ac-k .k-grille > li:is(:nth-child(8n+2), :nth-child(8n+4), :nth-child(8n+5), :nth-child(8n+7)) .k-tuile { --k-n1: 36%; --k-n2: 22%; } }
/* La place du disque et sa taille sont mesurées par src/actu.js (ajusterKiosque) ; sans mesure, celles de la planche. */
.ac-k .k-vig-img.k-tuile { place-items: start center; padding-top: var(--k-haut, 72px); box-sizing: border-box; }
.ac-k .k-vig-img.k-tuile .ic-theme { width: var(--k-disque, 72px); height: var(--k-disque, 72px); }
.ac-k .k-une-img.k-tuile { place-items: start center; padding-top: var(--k-haut, 64px); box-sizing: border-box; }
.ac-k .k-une-img.k-tuile .ic-theme { width: var(--k-disque, 96px); height: var(--k-disque, 96px); }
.ac-k .k-vig-fig:not(.rv-photo) .k-vig-t { font-size: 22px; line-height: 1.2; }
.ac-k .k-vig-fig:not(.rv-photo) .k-vig-t.k-long { font-size: 20px; }
.ac-k .k-vig-fig:not(.rv-photo) .k-vig-t.k-tres-long { font-size: 15px; line-height: 1.3; }
.ac-k .k-vig-fig:not(.rv-photo) .k-vig-carte::after, .ac-k .k-vig-fig:not(.rv-photo) .k-vig-bas::before { background: none; }
.ac-k .k-une-fig:not(.rv-photo) .k-une-carte::after { background: linear-gradient(to top, rgba(4, 18, 10, 0.5) 0%, rgba(4, 18, 10, 0) 60%); }
/* Sous 900 px, les titres de thème sur une ligne, comme sur la planche : 30 px, le disque de 26 px. */
@media (max-width: 899px) {
  .ac-k .k-section .gt-section-t { font-size: 30px; gap: 10px; }
  .ac-k .k-section .gt-section-t .gt-disque { width: 26px; height: 26px; }
  .ac-k .k-section .gt-section-t span { padding-top: 2px; }
}
/* De 600 à 899 px, la rangée garde une carte qui dépasse au bord : deux cartes et un tiers dans l'écran. */
@media (min-width: 600px) and (max-width: 899px) { .ac-k .k-rangee > .k-vig { flex-basis: calc((100vw - 2 * var(--k-m)) / 2.35 - 8px); } }

/* ---------- Message I : Jouer seul au style « néo brutal accordé au site » (11 octobre) ----------
   Planche « I, Jouer seul » et maquette « I, maquette Jouer seul » (version « Accordé au site », docs/planches) : moins
   de texte, des aplats de couleur, la carte du jeu au centre. Aucun bord noir, aucun filet, aucune petite phrase sous
   un titre. Briques : coins de 18 px, ombre 0 5px 0 rgba(0, 0, 0, 0.28). Boutons menthe : coins de 14 px, ombre
   0 3px 0 #3E8A50, Archivo 800. Étiquettes en pilules pleines (13 px au moins, la règle du site, la maquette en met 11).
   Titres en League Gothic, cartes en Archivo Narrow 700, le reste en Archivo. Texte des briques : #06140C. */
:root { --nb-noir: #06140C; --nb-blanc: #FFFDF7; --nb-rose: #F892D3; --nb-pic: #E8E2D2; --nb-bord-case: #4F6357; --nb-ombre: 0 5px 0 rgba(0, 0, 0, 0.28); }
.nb-brique { border: 0; border-radius: 18px; box-shadow: var(--nb-ombre); color: var(--nb-noir); }
.nb-tag { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; margin: 0; padding: 0 12px; border-radius: 15px; background: var(--nb-blanc); color: var(--nb-noir); font-family: var(--v2-sans); font-size: 13px; font-weight: 900; line-height: 1.15; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.nb-tag b { font-size: 15px; letter-spacing: 0; text-transform: none; }
/* L'espace de l'Archivo 900 est très étroite à 13 px (« À toi de voir » se lisait « À toide voir ») : un peu plus d'air. */
.nb-tag, .nb-cj-l, .nb-conseil h3 { word-spacing: 0.12em; }
.nb-tag.nb-rose { background: var(--nb-rose); } .nb-tag.nb-lilas { background: var(--v2-camp-b); } .nb-tag.nb-safran { background: var(--v2-camp-a); } .nb-tag.nb-menthe { background: var(--v2-menthe); }
.nb-bouton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 58px; padding: 0 16px; border: 0; border-radius: 14px; background: var(--v2-menthe); color: var(--nb-noir); box-shadow: 0 3px 0 #3E8A50; font-family: var(--v2-sans); font-size: 16px; font-weight: 800; letter-spacing: 0; text-transform: none; cursor: pointer; transition: transform 0.08s, box-shadow 0.08s; }
.nb-bouton:active { transform: translateY(2px); box-shadow: 0 1px 0 #3E8A50; }
.nb-bouton:disabled { cursor: default; }
.nb-bouton.nb-carre { flex: none; width: 58px; padding: 0; background: var(--nb-blanc); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); }
.nb-bouton.nb-carre svg { width: 22px; height: 22px; }
.nb-bouton b { font-size: 20px; font-weight: 900; } .nb-bouton .nb-l-a { color: var(--v2-camp-a-papier); } .nb-bouton .nb-l-b { color: var(--v2-camp-b-papier); }
.nb-titre { margin: 0; font-family: "League Gothic", var(--v2-carte); font-size: 46px; font-weight: 400; line-height: 0.95; letter-spacing: 0; color: var(--v2-texte); text-wrap: balance; }
.nb-titre:focus { outline: none; }
.nb-camp-a { color: var(--v2-camp-a); } .nb-camp-b { color: var(--v2-camp-b); }
.nb-h { margin: 6px 0 0; font-family: "League Gothic", var(--v2-carte); font-size: 34px; font-weight: 400; line-height: 1; color: var(--v2-texte); }
.nb-pousse { flex: 1 1 0; }
/* Les liens des écrans du message I, crème comme sur la maquette (menthe ailleurs dans l'appli). */
.nb-lien, .jeu-solo-result.nb .jeu-liens .v2-lien { color: var(--v2-texte); }
.nb-lien { align-self: center; min-height: 44px; font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .nb-bouton { transition: none; } .nb-bouton:active { transform: none; } }

/* 1. La pièce. Feuille de l'accueil : plus de cadre ; l'accueil reste visible derrière, flou de 3 px, sous un voile vert.
   Sur ordinateur, la même colonne, centrée, 420 px au plus. « Ton sujet » du mode seul : la même scène sur la page. */
.sheet-wrap:has(.nb-piece) { align-items: stretch; background: radial-gradient(120% 70% at 50% 12%, rgba(23, 80, 47, 0.78), rgba(5, 26, 15, 0.94)); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.sheet:has(.nb-piece) { box-sizing: border-box; display: flex; flex-direction: column; max-width: 420px; max-height: none; height: 100%; padding: 22px 18px calc(env(safe-area-inset-bottom, 0px) + 20px); border: 0; border-radius: 0; background: none; box-shadow: none; overflow-y: auto; }
.nb-piece { display: flex; flex-direction: column; gap: 14px; min-height: 100%; }
/* Le bouton et le lien restent dans l'écran, sans défiler : la marge du bas de la page (20 px) et celle de l'appli (32 px) comprises. */
.nb-piece-page { min-height: calc(100dvh - 64px - env(safe-area-inset-bottom, 0px)); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); }
@media (min-width: 900px) { .nb-piece-page { max-width: 420px; margin-inline: auto; } }
.nb-piece .nb-tag { align-self: center; }
.nb-piece .pq-f-bouton:focus-visible, .nb-piece .nb-bouton:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: var(--v2-focus-ecart); }
/* La largeur de la carte (300 px au plus, moins si la hauteur manque) règle aussi la pièce : 112 px pour 300. */
.nb-scene { --nb-l: max(170px, min(300px, calc(100vw - 48px), calc((100dvh - 380px) / 1.245))); position: relative; display: grid; justify-items: center; padding: 6px 6px 0 0; }
.nb-piece-page .nb-scene { --nb-l: max(170px, min(300px, calc(100vw - 48px), calc((100dvh - 440px) / 1.245))); }
@media (min-width: 900px) { .nb-scene, .nb-piece-page .nb-scene { --nb-l: max(220px, min(300px, calc((100dvh - 400px) / 1.245))); } }
@media (max-height: 620px) { .nb-piece { gap: 10px; } }
/* La carte de la pile, inclinée de 2 degrés. */
.nb-carte { position: relative; width: var(--nb-l); aspect-ratio: 1 / 1.245; container-type: inline-size; }
.nb-carte .pq-carte { --pq-r: -2deg; --pq-j: 0deg !important; --pq-y: 0px; --pq-s: 1; cursor: auto; touch-action: auto; user-select: auto; -webkit-user-select: auto; will-change: auto; }
.nb-carte .pq-coin { transition: opacity 0.3s, transform 0.35s cubic-bezier(0.2, 1.5, 0.4, 1); }
.nb-carte .pq-coin-a { transform-origin: left top; } .nb-carte .pq-coin-b { transform-origin: right bottom; }
.nb-tombe-a .pq-coin-b, .nb-tombe-b .pq-coin-a { opacity: 0.2; }
.nb-tombe-a .pq-coin-a, .nb-tombe-b .pq-coin-b { transform: scale(1.2); }
/* La pièce, posée sur le coin bas gauche de la carte, comme dans la maquette : elle remonte de 57 % de sa taille sur la
   carte et se décale vers la gauche (112 px pour une carte de 300). */
/* Sur la vraie carte, le mot « NON » est plus à gauche que sur la maquette : la pièce se pose un peu plus sur le coin
   pour ne pas le cacher. */
.nb-jeton { --nb-p: calc(var(--nb-l) * 0.373); position: relative; z-index: 2; margin: calc(var(--nb-p) * -0.57) 0 0 calc(var(--nb-l) * -0.56); }
.nb-jeton .pq-piece { width: var(--nb-p); height: var(--nb-p); }
.nb-jeton .pq-piece-a, .nb-jeton .pq-piece-b { padding: 14% 18%; font-size: calc(var(--nb-p) * 0.34); color: var(--nb-noir); }
.nb-jeton .pq-piece-pleine { padding: 0; font-size: calc(var(--nb-p) * 0.48); }
/* Le tampon « LE OUI » ou « LE NON » : bord de 4 px dans l'encre du camp, fond crème à 90 %, incliné de 7 degrés ; il
   frappe la carte en 0,38 s (rien en mouvement réduit). */
.nb-tampon { position: absolute; z-index: 1; right: -8px; bottom: 21%; display: none; padding: 6px 12px 4px; border: 4px solid currentColor; border-radius: 12px; background: rgba(244, 241, 232, 0.9); color: var(--v2-camp-b-papier); font-family: var(--v2-sans); font-size: clamp(22px, 10cqw, 30px); font-weight: 900; line-height: 1; text-transform: uppercase; white-space: nowrap; transform: rotate(-7deg); pointer-events: none; }
.nb-tombe-a .nb-tampon { color: var(--v2-camp-a-papier); }
.nb-tombe .nb-tampon { display: block; animation: nb-frappe 0.38s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes nb-frappe { from { transform: rotate(-7deg) scale(2.2); opacity: 0; } to { transform: rotate(-7deg) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .nb-carte .pq-coin { transition: none; } .nb-tombe .nb-tampon { animation: none; } }

/* 2. Avant l'analyse et 3. Ton bilan : la page en colonne, l'en tête (Retour ou Accueil à gauche, une étiquette à droite). */
.nb { display: flex; flex-direction: column; gap: 14px; }
/* Sur téléphone, les marges de côté de la maquette : 18 px en tout (24 ailleurs dans l'appli : 8 px de marge du corps de
   la page et 16 de l'appli). Une marge négative sur la page plutôt qu'un body:has(), qui se réévalue à chaque
   changement de la page (une tâche longue de 51 ms en ouvrant la carte en main, processeur ralenti). */
@media (max-width: 899px) { .jeu.nb, .nb-piece-page { margin-inline: calc(10px - var(--gutter)); } }
.jeu-solo-self.nb { min-height: calc(100dvh - var(--tabbar-h) - var(--barre-bas) - 12px); }
.nb-haut { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding-top: var(--encoche); }
.nb-retour { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 8px 0 0; border: 0; background: none; color: var(--v2-texte); font-family: var(--v2-sans); font-size: 16px; font-weight: 800; cursor: pointer; }
.nb-retour svg { width: 18px; height: 18px; }
.nb-gauche { align-self: flex-start; }
/* Sous 360 px, l'étiquette du camp ne tient plus à côté d'« Accueil » : « B LE NON » à l'écran, la phrase entière lue. */
@media (max-width: 359px) { .nb-haut .nb-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
.nb :focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 3px; }
/* Le bas de la page : le bouton, collé au dessus de la barre du bas, sans filet. */
.nb-bas { position: sticky; bottom: 0; z-index: 4; display: flex; gap: 12px; margin-top: 4px; padding: 12px 0 calc(env(safe-area-inset-bottom, 0px) + 12px); background: var(--v2-fond); }
/* La bande du bouton descend jusqu'à la barre ; le bouton reste au dessus de la pièce Jouer (message J). */
body.has-tabbar .nb-bas { bottom: calc(var(--tabbar-h) + var(--barre-bas)); padding-bottom: calc(12px + var(--piece-haut)); }

/* Les trois briques à cocher : case à gauche, titre et ligne courte, icône à droite. Cochée : la couleur du camp du
   joueur (lilas pour B, safran pour A) et la case pleine ; l'état est annoncé (bouton à bascule, aria-pressed). */
.nb-cases { display: grid; gap: 14px; }
.nb-case { display: grid; grid-template-columns: 34px minmax(0, 1fr) 40px; gap: 12px; align-items: center; min-height: 80px; padding: 10px 12px; background: var(--nb-blanc); font-family: var(--v2-sans); text-align: left; cursor: pointer; transition: background 0.15s, transform 0.08s, box-shadow 0.08s; }
.nb-case:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.28); }
.nb-box { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--nb-blanc); box-shadow: inset 0 0 0 2.5px var(--nb-bord-case); }
.nb-box svg { width: 20px; height: 20px; stroke-width: 3.5; opacity: 0; }
.nb-case-t b { display: block; font-size: 18px; font-weight: 800; line-height: 1.1; }
.nb-case-t small { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; }
.nb-pic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--nb-pic); }
.nb-pic svg { width: 20px; height: 20px; }
.nb-pour-b .nb-case[aria-pressed="true"] { background: var(--v2-camp-b); }
.nb-pour-a .nb-case[aria-pressed="true"] { background: var(--v2-camp-a); }
.nb-case[aria-pressed="true"] .nb-box { background: var(--nb-noir); box-shadow: none; }
.nb-pour-b .nb-case[aria-pressed="true"] .nb-box { color: var(--v2-camp-b); }
.nb-pour-a .nb-case[aria-pressed="true"] .nb-box { color: var(--v2-camp-a); }
.nb-case[aria-pressed="true"] .nb-box svg { opacity: 1; }
/* « Un biais t'a échappé ? » : une brique repliée, le nombre de biais notés en étiquette menthe ; dépliée, les puces. */
.nb-biais { background: var(--nb-blanc); }
.nb-biais summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 58px; padding: 0 14px; font-family: var(--v2-sans); font-size: 16px; font-weight: 800; cursor: pointer; list-style: none; }
.nb-biais summary::-webkit-details-marker { display: none; }
.nb-biais summary:focus-visible { border-radius: 18px; }
.nb-biais-l { gap: 8px; margin: 0; padding: 0 14px 14px; }
.nb-biais .v2-choix { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 22px; background: var(--nb-pic); color: var(--nb-noir); font-size: 15px; font-weight: 700; text-decoration: none; }
.nb-biais .v2-choix[aria-pressed="true"] { background: var(--v2-menthe); }
@media (prefers-reduced-motion: reduce) { .nb-case { transition: none; } .nb-case:active { transform: none; } }

/* 3. Ton bilan (« Le bilan de la minute », 25 octobre ; prototype.html de docs/messages, repris tel quel). En haut, la
   pastille du camp : la lettre dans un rond à l'encre, puis « Tu as défendu le oui ». Le ticket papier (ombre pleine,
   coins de 20 px) : la souche de 78 px dans la couleur du camp, la grande lettre en League Gothic 70 px et OUI ou NON ;
   deux encoches de 16 px à 70 px du bord, la perforation pointillée de 2 px ; dans le corps, la question, la note en
   League Gothic 112 px, « /6 » en 48 px et « Points confirmés », puis les trois tampons ronds de 62 px. */
.nb-haut .nb-tag-camp { gap: 8px; min-height: 34px; padding: 0 14px 0 6px; border-radius: 17px; color: var(--v2-encre); font-weight: 800; letter-spacing: 0.05em; word-spacing: normal; }
.nb-haut .nb-tag-camp b { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--v2-encre); color: var(--v2-camp-a); font-family: "League Gothic", var(--v2-carte); font-size: 17px; font-weight: 400; letter-spacing: 0; }
.nb-pour-b .nb-haut .nb-tag-camp b { color: var(--v2-camp-b); }
.nb-ticket { position: relative; display: grid; grid-template-columns: 78px minmax(0, 1fr); border-radius: 20px; background: var(--v2-papier); color: var(--v2-encre); box-shadow: 0 5px 0 rgba(0, 0, 0, 0.3); }
.nb-ticket::before, .nb-ticket::after { content: ""; position: absolute; left: 70px; width: 16px; height: 16px; border-radius: 50%; background: var(--v2-fond); }
.nb-ticket::before { top: -8px; } .nb-ticket::after { bottom: -8px; }
.nb-souche { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 20px 0 0 20px; background: var(--v2-camp-a); }
.nb-pour-b .nb-souche { background: var(--v2-camp-b); }
.nb-souche b { font-family: "League Gothic", var(--v2-carte); font-size: 70px; font-weight: 400; line-height: 0.85; }
.nb-souche span { font-family: var(--v2-sans); font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.nb-corps { min-width: 0; padding: 14px 14px 16px 16px; border-left: 2px dotted rgba(13, 53, 32, 0.3); }
.nb-q { margin: 0; font-family: var(--v2-sans); font-size: 15px; font-weight: 800; line-height: 1.25; }
.nb-note { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 0; font-family: "League Gothic", var(--v2-carte); font-weight: 400; color: var(--v2-encre); }
.nb-note:focus { outline: none; }
.nb-note b { font-size: 112px; font-weight: 400; line-height: 0.85; font-variant-numeric: tabular-nums; }
.nb-note > .num[aria-hidden] { font-size: 48px; line-height: 1; }
.nb-note em { align-self: center; width: min-content; font-family: var(--v2-sans); font-size: 13px; font-style: normal; font-weight: 800; letter-spacing: 0.06em; line-height: 1.3; text-transform: uppercase; }
/* Les trois tampons, chacun un bouton qui ouvre la feuille de sa case. Confirmé par l'analyse : menthe, penché de
   moins 8°, l'icône de la case et la pastille « +2 ». À ton appréciation : papier foncé, penché de 6°, un « ? ». Pas
   confirmé : un anneau pointillé et l'icône en encre 2, sans pastille. */
.nb-trois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 12px; }
.nb-tuile { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; min-height: 44px; padding: 0; border: 0; border-radius: 12px; background: none; color: var(--v2-encre); font-family: var(--v2-sans); text-align: center; cursor: pointer; }
.nb-ticket :focus-visible { outline-color: var(--v2-encre); }
.nb-rond { position: relative; display: grid; place-items: center; box-sizing: border-box; width: 62px; height: 62px; border: 3px solid var(--v2-encre); border-radius: 50%; box-shadow: inset 0 0 0 3px var(--v2-papier), inset 0 0 0 5px var(--v2-encre); transform: rotate(var(--r, 0deg)); }
.nb-tuile-ok .nb-rond { --r: -8deg; background: var(--v2-menthe); }
.nb-tuile-voir .nb-rond { --r: 6deg; background: #E6DFCB; }
.nb-tuile-non .nb-rond { border-style: dashed; border-color: var(--v2-encre-2); box-shadow: none; background: transparent; }
.nb-rond svg { width: 28px; height: 28px; stroke: var(--v2-encre); stroke-width: 3; }
.nb-tuile-non .nb-rond svg { stroke: var(--v2-encre-2); }
.nb-plus { position: absolute; top: -8px; right: -10px; padding: 2px 6px; border-radius: 999px; background: var(--v2-encre); color: var(--v2-menthe); font-family: "League Gothic", var(--v2-carte); font-size: 17px; line-height: 1.1; transform: rotate(calc(var(--r) * -1)); }
.nb-tuile strong { font-size: 13px; font-weight: 800; line-height: 1.2; }
.nb-tuile:nth-child(1) { --d: 0.45s; } .nb-tuile:nth-child(2) { --d: 0.65s; } .nb-tuile:nth-child(3) { --d: 0.85s; }
/* Le tampon du chemin (Objectif atteint, Bilan réussi, Étape faite), sur le coin haut droit du ticket. */
.nb-score-tampon { position: absolute; top: -14px; right: -6px; z-index: 1; padding: 5px 10px 4px; border: 2.5px solid var(--v2-encre); border-radius: 8px; background: var(--v2-menthe); color: var(--v2-encre); box-shadow: inset 0 0 0 2px var(--v2-menthe), inset 0 0 0 3.5px var(--v2-encre); font-family: var(--v2-sans); font-size: 13px; font-weight: 800; letter-spacing: 0.06em; line-height: 1.2; text-transform: uppercase; transform: rotate(-6deg); }
/* À l'arrivée, le tampon du chemin part de 1,8 fois sa taille et les tampons de 1,7 : la page les coupe sur les côtés
   (comme le téléphone du prototype), sinon un téléphone élargit la page pour eux et elle défile de côté. « clip » ne
   crée pas de zone de défilement : le bas collé au dessus de la barre reste collé. */
.jeu-solo-result.nb { overflow-x: clip; }
/* Avec le tampon du chemin, la question descend de 8 px : « Objectif atteint » et « Bilan réussi », plus longs
   qu'« Étape faite » (la planche), couvraient le haut de la première ligne. */
.nb-avec-tampon .nb-corps { padding-top: 22px; }
/* Sous 360 px, le corps du ticket se serre un peu : les trois tampons de 62 px tiennent. */
@media (max-width: 359px) { .nb-corps { padding-right: 10px; padding-left: 12px; } }
/* L'étiquette de l'analyse (en cours, en pause, échec avec Réessayer, hors ligne), centrée sous le ticket. */
.nb-ia { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 12px; margin: 0; }
.nb-ia .nb-tag { min-height: 0; padding: 6px 12px; border-radius: 999px; background: #E6DFCB; color: var(--v2-encre); font-weight: 800; letter-spacing: 0; text-transform: none; white-space: normal; }
/* Les trois chiffres en pastilles (elles passent à la ligne si besoin, centrées) : le nombre en League Gothic 22 px. */
.nb-chiffres { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; }
.nb-chiffres > span { display: inline-flex; align-items: baseline; gap: 5px; padding: 7px 12px; border-radius: 999px; background: rgba(6, 20, 12, 0.35); color: #CFE3D4; font-family: var(--v2-sans); font-size: 13px; font-weight: 800; }
.nb-chiffres b { font-family: "League Gothic", var(--v2-carte); font-size: 22px; font-weight: 400; line-height: 1; color: var(--v2-papier); }
/* « Les cartes sur la table » : une rangée sombre, les deux petites cartes penchées, le titre, la carte révélée et un
   chevron ; elle ouvre la feuille des deux cartes. « Le détail de ta minute » : une ligne papier de 54 px. */
.nb-minis { display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 4px; padding: 14px 16px; background: rgba(6, 20, 12, 0.35); box-shadow: none; color: var(--v2-papier); font-family: var(--v2-sans); text-align: left; cursor: pointer; }
.nb-mini { display: grid; place-items: center; flex: none; width: 52px; height: 70px; border-radius: 9px; color: var(--v2-encre); font-family: "League Gothic", var(--v2-carte); font-size: 30px; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); }
.nb-mini-a { background: var(--v2-camp-a); transform: rotate(-7deg); }
.nb-mini-b { margin-left: -22px; background: var(--v2-camp-b); transform: rotate(6deg); }
.nb-minis-t { flex: 1 1 auto; min-width: 0; }
.nb-minis-t b { display: block; font-size: 16px; font-weight: 800; line-height: 1.2; }
.nb-minis-t small { display: block; margin-top: 3px; font-size: 13px; font-weight: 700; color: #CFE3D4; }
.nb-detail { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 54px; margin-top: -4px; padding: 0 18px; border-radius: 14px; background: var(--v2-papier); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.28); color: var(--v2-encre); font-family: var(--v2-sans); font-size: 16px; font-weight: 800; text-align: left; cursor: pointer; }
.nb-minis svg, .nb-detail svg { flex: none; width: 18px; height: 18px; }
/* L'arrivée, une seule fois (src/modes/solo.js, animerBilan) : le ticket monte (0,32 s) ; les tampons tombent à 0,45,
   0,65 et 0,85 s (0,3 s chacun, grands et penchés, puis posés) ; une onde menthe part des tampons confirmés et leur
   « +2 » saute ; le tampon du chemin se pose à 1,15 s. --nb-deja : le temps déjà passé quand l'écran est redessiné
   pendant l'arrivée. Une case changée par l'analyse après coup retombe seule (nb-retombe). */
@keyframes nb-monte { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes nb-tamponne { 0% { opacity: 0; transform: scale(1.7) rotate(calc(var(--r, 0deg) - 14deg)); } 70% { opacity: 1; transform: scale(0.92) rotate(var(--r, 0deg)); } 100% { opacity: 1; transform: scale(1) rotate(var(--r, 0deg)); } }
@keyframes nb-onde { from { opacity: 0.85; transform: scale(1); } to { opacity: 0; transform: scale(1.65); } }
@keyframes nb-saute { 0% { opacity: 0; transform: scale(0) rotate(calc(var(--r) * -1)); } 70% { opacity: 1; transform: scale(1.25) rotate(calc(var(--r) * -1)); } 100% { opacity: 1; transform: scale(1) rotate(calc(var(--r) * -1)); } }
@keyframes nb-pose { 0% { opacity: 0; transform: scale(1.8) rotate(-16deg); } 70% { opacity: 1; transform: scale(0.94) rotate(-6deg); } 100% { opacity: 1; transform: scale(1) rotate(-6deg); } }
.nb-arrive .nb-ticket { animation: nb-monte 0.32s cubic-bezier(0.2, 0.8, 0.3, 1) both; animation-delay: calc(0s - var(--nb-deja, 0ms)); }
.nb-arrive .nb-rond, .nb-retombe .nb-rond { animation: nb-tamponne 0.3s cubic-bezier(0.2, 1.5, 0.4, 1) both; animation-delay: calc(var(--d) - var(--nb-deja, 0ms)); }
.nb-arrive .nb-tuile-ok .nb-rond::after, .nb-tuile-ok.nb-retombe .nb-rond::after { content: ""; position: absolute; inset: -6px; border: 3px solid var(--v2-menthe); border-radius: 50%; opacity: 0; pointer-events: none; animation: nb-onde 0.5s ease-out both; animation-delay: calc(var(--d) + 0.22s - var(--nb-deja, 0ms)); }
.nb-arrive .nb-plus, .nb-retombe .nb-plus { animation: nb-saute 0.25s cubic-bezier(0.2, 1.5, 0.4, 1) both; animation-delay: calc(var(--d) + 0.2s - var(--nb-deja, 0ms)); }
.nb-arrive .nb-score-tampon { animation: nb-pose 0.32s cubic-bezier(0.2, 1.5, 0.4, 1) both; animation-delay: calc(1.15s - var(--nb-deja, 0ms)); }
.nb .nb-retombe { --d: 0s; --nb-deja: 0ms; }
@media (prefers-reduced-motion: reduce) { .nb-arrive .nb-ticket, .nb-arrive .nb-rond, .nb-arrive .nb-rond::after, .nb-arrive .nb-plus, .nb-arrive .nb-score-tampon, .nb-retombe .nb-rond, .nb-retombe .nb-rond::after, .nb-retombe .nb-plus { animation: none; } }
/* Le conseil, en tête de la feuille « Le détail de ta minute » : brique rose, « Pour la prochaine fois » puis une seule
   phrase. */
.nb-conseil { padding: 12px 14px 14px; background: var(--nb-rose); }
.nb-conseil h3 { margin: 0 0 4px; font-family: var(--v2-sans); font-size: 13px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.nb-conseil p { margin: 0; font-family: var(--v2-carte); font-size: 20px; font-weight: 700; line-height: 1.12; }
/* Les cartes sur la table : les deux cartes côte à côte, à égalité, A à gauche. */
.nb-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nb-cj { position: relative; display: grid; gap: 8px; align-content: start; min-height: 170px; padding: 10px 10px 12px; background: var(--nb-blanc); font-family: var(--v2-sans); text-align: left; cursor: pointer; }
.nb-cj-l { display: flex; align-items: flex-start; gap: 5px; font-size: 13px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; }
.nb-cj-l b { font-size: 30px; line-height: 0.74; letter-spacing: 0; }
/* La lettre A à l'encre du camp (#9C4E00) : en safran sur crème, comme dans la maquette, le contraste serait de 1,98. */
.nb-cj-a .nb-cj-l b { color: var(--v2-camp-a-papier); } .nb-cj-b .nb-cj-l b { color: var(--v2-camp-b-papier); }
/* L'en tête de la carte : la lettre et le mot à gauche, l'étiquette à droite ; sur une carte étroite, l'étiquette passe
   dessous plutôt que de toucher le mot. */
.nb-cj-tete { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px; }
.nb-cj-et { padding: 1px 6px; border-radius: 8px; font-size: 13px; font-weight: 900; line-height: 1.3; word-spacing: 0.12em; }
.nb-cj-a .nb-cj-et { background: var(--v2-camp-a); } .nb-cj-b .nb-cj-et { background: var(--v2-camp-b); }
.nb-cj ol { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.nb-cj li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 6px; font-family: var(--v2-carte); font-size: 15px; font-weight: 700; line-height: 1.1; }
.nb-cj li i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--nb-bord-case); font-family: var(--v2-sans); font-size: 13px; font-style: normal; font-weight: 900; }
.nb-cj li.nb-dit i { background: var(--v2-lien-papier); color: var(--v2-papier); box-shadow: none; }
.nb-cj li.nb-dit i svg { width: 12px; height: 12px; stroke-width: 3.5; }
.nb-cj-charge { font-size: 13px; }
/* Les lignes repliées, chacune ouvre une feuille. */
.nb-lignes { display: grid; gap: 10px; }
.nb-ligne { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 14px; background: var(--nb-blanc); font-family: var(--v2-sans); font-size: 15px; font-weight: 900; text-align: left; cursor: pointer; }
.nb-ligne svg { flex: none; width: 18px; height: 18px; }
/* Depuis le chemin : le message de l'étape dans une brique lilas ; « Retour au chemin » en second, crème. */
.nb-chemin { padding: 14px 16px; background: var(--v2-camp-b); }
.nb-chemin p { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.35; }
.nb-bouton.nb-second { background: var(--nb-blanc); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); }
.jeu-solo-result.nb .jeu-liens { margin-top: 0; }
/* Les feuilles du bilan. */
.nb-feuille { display: grid; gap: 12px; }
.nb-feuille-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.nb-tag.nb-creme { background: var(--nb-blanc); } .nb-tag.nb-vert { background: rgba(244, 241, 232, 0.14); color: var(--v2-texte); }
/* « À lire dans l'Actu » : la carte de l'article, compacte (vignette carrée à gauche, le texte à droite), en brique. */
.jeu-solo-result.nb .ac-a-lire { margin-top: 0; }
.jeu-solo-result.nb .ac-a-lire-t { font-family: "League Gothic", var(--v2-carte); font-size: 34px; font-weight: 400; line-height: 1; }
.jeu-solo-result.nb .ac-a-lire-carte { max-width: none; margin-top: 12px; }
.jeu-solo-result.nb .ac-a-lire-carte .ac-carte { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; border-radius: 18px; background: var(--nb-blanc); box-shadow: var(--nb-ombre); }
.jeu-solo-result.nb .ac-a-lire-carte .ac-visuel { width: 96px; height: 96px; aspect-ratio: auto; border-radius: 12px; }
.jeu-solo-result.nb .ac-a-lire-carte .ac-tuile { padding: 8px; }
.jeu-solo-result.nb .ac-a-lire-carte :is(.ac-tuile-l, .ac-tuile-s) { display: none; }
.jeu-solo-result.nb .ac-a-lire-carte .ac-corps { padding: 0; }
.jeu-solo-result.nb .ac-a-lire-carte .ac-titre { margin: 4px 0; font-size: 16px; line-height: 1.2; }
/* Le lien du titre fait 44 px de haut au moins, même sur deux lignes (38 px sur ordinateur ; Jules, 28 octobre). */
.jeu-solo-result.nb .ac-a-lire-carte .ac-lien { min-height: 44px; }
.sheet:has(.nb-feuille) .sh .h2 { font-family: "League Gothic", var(--v2-carte); font-size: 34px; font-weight: 400; line-height: 1; }

/* ---------- Message J : l'accueil sans tuiles sous 1100 px, la feuille « Comment veux tu jouer ? » (11 octobre) ----------
   Sur téléphone et tablette, les quatre tuiles quittent l'accueil : la pile prend leur place, les pastilles
   « Reprendre » restent. Sur ordinateur (à partir de 1100 px), l'accueil garde ses trois colonnes et ses tuiles.
   La feuille : elle monte du bas avec sa poignée (au centre de l'écran sur ordinateur, comme les autres feuilles de
   l'accueil), le titre en League Gothic de 40 px, les quatre tuiles en 2 × 2 (96 px, coins de 18, ombre 0 4px 0),
   mêmes couleurs, icônes et sous titres que sur l'accueil. Valeurs de « J, maquette barre ». */
@media (max-width: 1099px) { .pq-droite { display: none; } }
.sheet-wrap:has(.jm-feuille) { background: rgba(4, 20, 11, 0.62); animation: jm-voile 0.2s ease-out; }
.sheet:has(.jm-feuille) { box-sizing: border-box; padding: 6px 16px calc(26px + env(safe-area-inset-bottom, 0px)); border: 0; border-radius: 30px 30px 0 0; background: var(--v2-fond); box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.4); touch-action: none; animation: jm-monte 0.28s cubic-bezier(0.2, 0.9, 0.3, 1); transition: transform 0.2s ease-out; }
@keyframes jm-voile { from { opacity: 0; } }
@keyframes jm-monte { from { transform: translateY(100%); } }
@keyframes jm-fondu { from { opacity: 0; } }
.jm-feuille { display: grid; gap: 12px; }
/* La poignée : un trait de 42 × 5, dans un bouton de 44 px de haut qui ferme la feuille. */
.jm-poignee { justify-self: center; display: grid; place-items: center; width: 88px; height: 44px; margin: -6px 0 -14px; padding: 0; border: 0; background: none; cursor: pointer; }
.jm-poignee span { width: 42px; height: 5px; border-radius: 3px; background: rgba(244, 241, 232, 0.2); }
.jm-t { margin: 0; font-family: "League Gothic", var(--v2-carte); font-size: 40px; font-weight: 400; line-height: 0.95; color: var(--v2-texte); }
.jm-feuille .pq-tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0; }
.jm-feuille .pq-tuiles li { display: flex; min-width: 0; }
.jm-feuille .pq-tuile { min-height: 96px; justify-content: flex-start; gap: 2px; padding: 12px 14px; border-radius: 18px; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.28); cursor: pointer; }
.jm-feuille .pq-tuile-ic { display: block; width: 24px; height: 24px; margin-bottom: 6px; }
.jm-feuille .pq-tuile-t { font-size: 18px; letter-spacing: 0; }
.jm-feuille .pq-tuile-d { display: block; font-size: 13px; }
.jm-feuille .pq-tuile:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.28); }
@media (min-width: 900px) {
  .sheet-wrap:has(.jm-feuille) { align-items: center; }
  .sheet:has(.jm-feuille) { max-width: 480px; padding-bottom: 26px; border-radius: var(--v2-rayon-carte); animation: jm-fondu 0.2s ease-out; }
}
@media (prefers-reduced-motion: reduce) {
  .sheet-wrap:has(.jm-feuille) { animation: none; }
  .sheet:has(.jm-feuille) { animation: jm-fondu 0.15s linear; transition: none; }
  .jm-feuille .pq-tuile:active { transform: none; }
}

/* ---------- Message K (12 octobre) : changer d'onglet d'un balayement (src/balayer.js) ---------- */
/* Sur les cinq onglets, la page (et le vide autour, sur tablette) laisse au navigateur le défilement vertical et le
   pincement ; l'horizontale va au geste. Une rangée qui défile de côté garde la sienne (la règle s'arrête au premier
   élément qui défile). Une page agrandie au pincement garde tout : le geste est alors coupé. */
body.balayable { touch-action: pan-y pinch-zoom; }
/* Le calque du geste, sous la barre du bas : les onglets voisins, sur une piste qui suit le doigt avec la page.
   Leurs animations d'entrée sont déjà finies. La page déplacée dépasse de l'écran : coupé le temps du geste (comme
   l'accueil le fait pour sa pile), sinon le navigateur du téléphone élargit la page. */
html.bal-geste, html.bal-geste body { overflow-x: clip; }
.bal { position: fixed; inset: 0; z-index: 29; overflow: hidden; pointer-events: none; }
.bal-piste { position: absolute; inset: 0; will-change: transform; }
.bal-piste.bal-fin { transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.bal-ecran { position: absolute; inset: 0; overflow: hidden; }
.bal-ecran * { animation-duration: 0s !important; animation-delay: 0s !important; transition: none !important; }
.bal-defile { height: 100%; overflow: hidden; }
/* Chaque écran imite le corps de la page de son onglet : ses marges, son fond, ses classes (CORPS dans main.js) et la
   règle que l'Actu pose sur le corps (`body:has(.ac-k)`). Ce que le vrai corps impose à toutes les `.app` (une page
   sans marge de côté, la barre fixe d'Histoire…) ne doit pas déteindre sur les écrans du calque : chaque écran remet
   d'abord les valeurs de base, puis prend celles de son onglet. */
.bal .bal-corps { box-sizing: border-box; min-height: 100%; margin: 0; padding: 8px; background: var(--ink); }
.bal .bal-corps > .app { position: static; z-index: auto; max-width: 520px; padding: 0 var(--gutter) 32px; }
.bal .bal-corps.has-tabbar > .app { padding-bottom: calc(var(--tabbar-h) + var(--barre-bas) + var(--piece-haut) + 28px); }
.bal .bal-corps.v2-fond-page { background: var(--v2-fond); }
.bal .bal-corps.v2-page-papier { background: var(--v2-papier); }
.bal .bal-corps.ch-ecran, .bal .bal-corps.cat8-ecran { padding: 0; }
.bal .bal-corps.hx-ecran > .app { padding-top: 0; }
.bal .bal-corps.cat8-ecran > .app { max-width: none; padding-inline: 0; }
.bal .bal-corps:has(.ac-k) { padding: 0; background: radial-gradient(130% 70% at 50% 0%, #1D5A39 0%, #123F28 48%, #0B2E1B 100%) #0B2E1B; }
.bal .bal-corps:has(.ac-k) > .app { position: relative; z-index: 1; max-width: none; padding-inline: 0; }
@media (min-width: 900px) {
  .bal .bal-corps.v2-fond-page > .app { max-width: 640px; padding-inline: var(--v2-e32); }
  .bal .bal-corps.v2-page-accueil > .app { max-width: none; padding-inline: var(--v2-e32); }
  .bal .bal-corps.hx-ecran > .app { max-width: 680px; }
  .bal .bal-corps.ch-ecran > .app { max-width: none; padding-inline: var(--v2-e32); }
  .bal .bal-corps.v2-page-large > .app { max-width: 960px; padding-inline: var(--v2-e32); }
  .bal .bal-corps.cat8-ecran > .app, .bal .bal-corps:has(.ac-k) > .app { max-width: none; padding-inline: 0; }
}
/* La pastille de la barre glisse d'une place à l'autre (vers la pièce, elle s'efface) ; la vraie s'éteint le temps du
   geste. */
.tab-glisse { position: absolute; left: 0; z-index: 0; border-radius: 16px; background: var(--v2-menthe); pointer-events: none; }
.tab-glisse.bal-fin { transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 260ms ease; }
.tabbar.bal-en-cours .tab { z-index: 1; }
.tabbar.bal-en-cours .tab[aria-current] .tab-ico { background: transparent; color: inherit; }
/* Mouvement réduit : rien ne glisse, l'onglet change d'un coup, avec ce fondu court (l'opacité seulement). */
.bal-fondu { animation: bal-fondu 160ms ease-out; }
@keyframes bal-fondu { from { opacity: 0.2; } }

/* ---------- Message L (12 octobre) : l'en tête de l'accueil, la feuille Réglages, la recherche ---------- */
/* L'en tête : à la place de « Règles », la loupe et la roue dentée, deux ronds de 46 px à 8 px l'un de l'autre, alignés
   sur le logo ; les mêmes en haut à droite sur ordinateur. */
.pq-outils { display: flex; flex: none; gap: 8px; }
/* Sous 364 px, le logo et les deux ronds ne tiendraient pas à 200 px : le logo se réduit (156 px à 320). */
.pq-tete .v2-nom .v2-logo-svg { width: min(200px, calc(100vw - 164px)); }
@media (min-width: 900px) { .pq-tete .v2-nom .v2-logo-svg { width: 260px; } }
.pq-outil { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: #1B4A31; color: var(--v2-texte); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); cursor: pointer; }
.pq-outil svg { width: 24px; height: 24px; }
.pq-outil:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); }
.pq-outil:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .pq-outil:active { transform: none; } }

/* La feuille « Réglages » (planche « L, réglages ») : la même feuille que « Comment veux tu jouer ? » (poignée, titre en
   League Gothic 40), des briques #1B4A31 aux coins de 20 px, des lignes de 60 px au moins, chacune avec sa tuile
   d'icône de 40 px aux coins de 12 px. Elle peut défiler sur un petit écran : le glissé pour fermer part alors de la
   poignée et du titre. */
.sheet-wrap:has(.rf-feuille) { background: rgba(4, 20, 11, 0.62); animation: jm-voile 0.2s ease-out; }
.sheet:has(.rf-feuille) { box-sizing: border-box; max-height: calc(100% - 16px); overflow-y: auto; overscroll-behavior: contain; padding: 6px 16px calc(30px + env(safe-area-inset-bottom, 0px)); border: 0; border-radius: 30px 30px 0 0; background: var(--v2-fond); box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.4); touch-action: pan-y; animation: jm-monte 0.32s cubic-bezier(0.2, 0.9, 0.3, 1); }
.rf-feuille { display: grid; gap: 12px; }
.rf-feuille .jm-poignee, .rf-feuille .jm-t { touch-action: none; }
.rf-feuille .jm-poignee { margin: -14px 0 -19px; }
.rf-groupe { display: grid; gap: 24px; box-sizing: border-box; width: 100%; margin: 0; padding: 18px 14px 14px; border: 0; border-radius: 20px; background: #1B4A31; color: var(--v2-texte); font: inherit; text-align: left; }
.rf-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-height: 40px; }
/* L'état du micro passe sous le nom quand la place manque (320 px, ou en anglais). */
.rf-etat { margin-left: auto; }
.rf-groupe.rf-ligne { min-height: 60px; padding-block: 18px; }
.rf-ic { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--v2-encre); }
.rf-ic svg { width: 22px; height: 22px; }
.rf-ic-son { background: var(--v2-camp-a); }
.rf-ic-micro { background: var(--v2-camp-b); }
.rf-ic-langue { background: var(--v2-th-geo); }
.rf-ic-regles { background: var(--v2-texte); }
.rf-nom { flex: 1 1 auto; font-family: var(--v2-sans); font-size: 16px; font-weight: 800; line-height: 1.2; }
/* L'interrupteur du son : 54 × 32, menthe allumé (le bouton rond à droite, à l'encre), sombre éteint (le rond crème à
   gauche). La cible fait 44 px de haut. */
.rf-inter { position: relative; flex: none; width: 54px; height: 44px; margin: -6px 0; padding: 0; border: 0; background: none; cursor: pointer; }
.rf-inter::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 32px; border-radius: 16px; background: rgba(0, 0, 0, 0.32); transition: background 0.18s; }
.rf-inter span { position: absolute; top: 10px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--v2-texte); transition: transform 0.18s, background 0.18s; }
.rf-inter[aria-checked="true"]::before { background: var(--v2-menthe); }
.rf-inter[aria-checked="true"] span { transform: translateX(22px); background: var(--v2-encre); }
.rf-inter:focus-visible { outline: none; }
.rf-inter:focus-visible::before { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 3px; }
/* Le micro : l'état en étiquette, le niveau en huit barres (menthe allumées, en petits points éteintes), « Tester ». */
.rf-etat { flex: none; padding: 4px 12px 3px; border-radius: 13px; line-height: 19px; background: rgba(244, 241, 232, 0.14); color: var(--v2-texte); font-family: var(--v2-sans); font-size: 13px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.rf-etat[data-etat="autorise"] { background: var(--v2-menthe); color: var(--v2-encre); }
.rf-etat[data-etat="refuse"] { background: #FF9C86; color: var(--v2-encre); }
.rf-micro { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rf-niveau { display: flex; align-items: center; gap: 4px; height: 32px; }
.rf-niveau i { width: 8px; height: 6px; border-radius: 4px; background: #245A3D; transition: height 0.08s; }
.rf-niveau i:nth-child(1) { --h: 9px; } .rf-niveau i:nth-child(2) { --h: 17px; } .rf-niveau i:nth-child(3) { --h: 25px; } .rf-niveau i:nth-child(4) { --h: 30px; }
.rf-niveau i:nth-child(5) { --h: 20px; } .rf-niveau i:nth-child(6) { --h: 14px; } .rf-niveau i:nth-child(7) { --h: 10px; } .rf-niveau i:nth-child(8) { --h: 8px; }
.rf-niveau i.on { height: var(--h); background: var(--v2-menthe); }
.rf-tester { flex: none; min-width: 131px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 14px; background: var(--v2-texte); color: var(--v2-encre); font-family: var(--v2-sans); font-size: 14px; font-weight: 800; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); cursor: pointer; }
.rf-tester:disabled { cursor: default; opacity: 0.85; }
.rf-aide { margin: 0; color: var(--v2-texte); font-family: var(--v2-sans); font-size: 15px; font-weight: 600; line-height: 1.35; }
/* La langue : deux boutons côte à côte, celui choisi sur fond crème. */
.rf-langues { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.rf-langue { min-height: 46px; padding: 0 8px; border: 0; border-radius: 16px; background: #123F28; color: #A9BFB1; font-family: var(--v2-sans); font-size: 15px; font-weight: 800; cursor: pointer; }
.rf-langue[aria-pressed="true"] { background: var(--v2-texte); color: var(--v2-encre); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); }
/* Les règles du jeu : toute la brique est un bouton, la flèche à droite. */
.rf-groupe.rf-regles { display: flex; padding-block: 10px; cursor: pointer; }
.rf-fleche { display: grid; flex: none; place-items: center; width: 24px; color: #A9BFB1; }
.rf-fleche svg { width: 22px; height: 22px; }
.rf-groupe:is(button):focus-visible, .rf-tester:focus-visible, .rf-langue:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 3px; }
.rf-tester:active, .rf-langue[aria-pressed="false"]:active, .rf-regles:active { transform: translateY(2px); }
@media (min-width: 900px) {
  .sheet-wrap:has(.rf-feuille) { align-items: center; }
  .sheet:has(.rf-feuille) { max-width: 480px; max-height: calc(100dvh - 48px); padding-bottom: 24px; border-radius: var(--v2-rayon-carte); animation: jm-fondu 0.2s ease-out; }
}
@media (prefers-reduced-motion: reduce) {
  .sheet-wrap:has(.rf-feuille) { animation: none; }
  .sheet:has(.rf-feuille) { animation: jm-fondu 0.15s linear; transition: none; }
  .rf-inter::before, .rf-inter span, .rf-niveau i { transition: none; }
  .rf-tester:active, .rf-langue[aria-pressed="false"]:active, .rf-regles:active { transform: none; }
}

/* La recherche (planche « L, recherche provisoire ») : l'écran de l'accueil (en tête, thèmes, pile) laisse la place à la
   recherche ; il n'est que caché, la pile revient telle quelle. */
.pq-cherche .pq-ecran { display: none; }
/* 14 px de marge de côté, comme la planche (le corps garde 8 px, --gutter en ajoute 16 : la recherche en retire 10). */
.rc { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 10px; margin-inline: calc(6px - var(--gutter)); padding-top: calc(env(safe-area-inset-top, 0px) + 8px); }
.rc-barre { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 6px 0 18px; border-radius: 26px; background: var(--v2-texte); color: var(--v2-encre); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25); }
.rc-loupe { display: grid; flex: none; place-items: center; }
.rc-loupe svg { width: 22px; height: 22px; }
.rc-champ { flex: 1; min-width: 0; height: 44px; padding: 0; border: 0; background: none; color: var(--v2-encre); font-family: var(--v2-sans); font-size: 17px; font-weight: 600; outline: none; box-shadow: none; -webkit-appearance: none; appearance: none; }
.rc-champ::placeholder { color: #4D6A5A; opacity: 1; }
.rc-champ::-webkit-search-cancel-button { display: none; }
/* Le champ montre son curseur ; arrivé au clavier (Tab), la barre prend en plus l'anneau menthe. */
.rc-champ:focus, .rc-champ:focus-visible { outline: none; box-shadow: none; }
.rc-barre.rc-clavier:focus-within { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 3px; }
.rc-effacer { display: grid; flex: none; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--v2-fond); color: var(--v2-texte); cursor: pointer; }
.rc-effacer::after { content: ""; position: absolute; width: 44px; height: 44px; }
.rc-effacer { position: relative; }
.rc-effacer svg { width: 18px; height: 18px; }
.rc-effacer:focus-visible { outline: var(--v2-focus) solid var(--v2-encre); outline-offset: 2px; }
.rc-resultats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
/* Les puces de thème, avec leur nombre : elles filtrent ; elles défilent de côté si elles ne tiennent pas. */
.rc-puces { display: flex; gap: 8px; margin: -4px -14px 8px; padding: 4px 14px; overflow-x: auto; scrollbar-width: none; }
.rc-puces::-webkit-scrollbar { display: none; }
/* 36 px à l'œil, 44 px au doigt. */
.rc-puce { position: relative; display: inline-flex; flex: none; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 18px; background: #1B4A31; color: var(--v2-texte); font-family: var(--v2-sans); font-size: 14px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.rc-puce b { color: #A9BFB1; font-weight: 800; }
.rc-puce[aria-pressed="true"] { background: var(--v2-menthe); color: var(--v2-encre); }
.rc-puce[aria-pressed="true"] b { color: var(--v2-encre); }
.rc-puce::after { content: ""; position: absolute; inset: -4px 0; }
.rc-point { width: 14px; height: 14px; border-radius: 50%; }
.rc-puce:focus-visible, .rc-res:focus-visible, .rc-hasard:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 3px; }
/* Les résultats, provisoires : rangés par thème (l'étiquette du thème, son nombre de sujets), des lignes sombres, le mot
   cherché en menthe, le niveau en petite étiquette, une flèche. */
.rc-groupe { display: grid; gap: 6px; }
.rc-tete { display: flex; align-items: center; gap: 10px; margin: 0; font-size: inherit; }
.rc-tag { padding: 4px 12px 3px; border-radius: 13px; color: var(--v2-encre); font-family: var(--v2-sans); font-size: 13px; font-weight: 900; line-height: 19px; letter-spacing: 0.1em; text-transform: uppercase; }
.rc-nb { color: #A9BFB1; font-family: var(--v2-sans); font-size: 14px; font-weight: 800; }
.rc-liste { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rc-res { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 58px; padding: 10px 12px 10px 14px; border: 0; border-radius: 14px; background: #123F28; color: var(--v2-texte); text-align: left; cursor: pointer; }
.rc-q { flex: 1; min-width: 0; font-family: var(--v2-carte); font-size: 16px; font-weight: 700; line-height: 1.15; }
.rc-mot { padding: 0; background: none; color: var(--v2-menthe); }
.rc-niv { display: inline-block; padding: 1px 8px; border-radius: 9px; background: #245A3D; color: #A9BFB1; font-family: var(--v2-sans); font-size: 13px; font-weight: 800; line-height: 18px; vertical-align: 1px; }
.rc-fleche { display: grid; flex: none; place-items: center; color: #A9BFB1; }
.rc-fleche svg { width: 20px; height: 20px; }
.rc-res:active { background: #1B4A31; }
/* Le hasard parmi les résultats : collé en bas, au dessus de la barre et de la pièce. */
.rc-bas { position: sticky; bottom: calc(var(--tabbar-h) + var(--barre-bas) + var(--piece-haut) + 6px); z-index: 2; padding-top: 6px; }
.rc-hasard { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 16px; border: 0; border-radius: 16px; background: #1B4A31; color: var(--v2-texte); font-family: var(--v2-sans); font-size: 16px; font-weight: 800; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.28); cursor: pointer; }
.rc-piece { flex: none; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--v2-camp-a) 50%, var(--v2-camp-b) 50%); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3); }
.rc-hasard:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.28); }
/* Rien trouvé. */
.rc-vide { display: grid; gap: 6px; padding: 18px; border-radius: 20px; background: #1B4A31; }
.rc-vide-t { margin: 0; color: var(--v2-texte); font-family: var(--v2-sans); font-size: 18px; font-weight: 800; }
.rc-vide-p { margin: 0; color: #A9BFB1; font-family: var(--v2-sans); font-size: 15px; font-weight: 600; }
@media (min-width: 900px) { .rc { width: 100%; max-width: 640px; margin-inline: auto; padding-top: var(--v2-e24); } .rc-puces { margin-inline: 0; padding-inline: 0; } }
@media (prefers-reduced-motion: reduce) { .rc-hasard:active { transform: none; } }

/* L'anglais (message L) : l'étiquette « In French for now » là où un contenu reste en français (sujets, cartes, Actu,
   Histoire). Une étiquette, jamais un paragraphe gris : un cadre arrondi à la couleur du texte qui l'entoure. */
.fr-seul { display: inline-flex; align-items: center; gap: 5px; width: fit-content; margin-top: 8px; padding: 3px 10px 3px 6px; border: 1.5px solid currentColor; border-radius: 999px; font-family: var(--v2-sans); font-size: 13px; font-weight: 800; font-style: normal; line-height: 1.25; letter-spacing: 0.02em; text-transform: none; white-space: nowrap; }
.fr-seul svg { width: 15px; height: 15px; flex: none; }

/* ---------- Message M (12 octobre) : la partie à table, ses comptes rendus et les feuilles ----------
   Le langage de l'accueil et du bilan seul : titres en League Gothic majuscules, briques #1B4A31 aux coins de 16 à 22 px,
   étiquettes en capitales, boutons pleins avec une ombre portée, tuiles d'icône de 40 px. Plus de serif (le logo
   seul), plus de bouton au trait, plus de filet fin. Classes .pm-* (src/partie.js). */
:root { --pm-brique: #1B4A31; --pm-bouton: #245A3D; --pm-fait: #3E8A50; --pm-ombre: 0 4px 0 rgba(0, 0, 0, 0.35); --pm-gros: "League Gothic", "Archivo Narrow", "Arial Narrow", sans-serif; --pm-encre: #06140C; --pm-creme: #FFFDF7; --pm-rose: #F892D3; --pm-texte-2: #BBCEC1; }
.pm-c { --i: 0; }
/* Titre d'étape : le mot, son étiquette, la barre de suivi en cinq segments. */
.pm-etape { display: grid; gap: 12px; margin-top: 4px; }
.pm-etape-l { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 6px; }
.pm-titre { margin: 0; font-family: var(--pm-gros); font-size: 58px; font-weight: 400; line-height: 0.9; letter-spacing: 0.005em; text-transform: uppercase; color: var(--v2-texte); overflow-wrap: anywhere; }
.pm-titre:focus { outline: none; }
.pm-suivi { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.pm-suivi i { height: 6px; border-radius: 3px; background: var(--pm-bouton); }
.pm-suivi i.pm-fait { background: var(--pm-fait); }
.pm-suivi i.pm-cours { background: var(--v2-menthe); }
/* Étiquettes en capitales, tuiles d'icône */
.pm-etiq { display: inline-flex; align-items: center; gap: 6px; width: fit-content; max-width: 100%; min-height: 28px; padding: 5px 11px; border-radius: 14px; background: rgba(244, 241, 232, 0.14); color: var(--v2-texte); font-family: var(--v2-sans); font-size: 13px; font-weight: 900; line-height: 1.1; letter-spacing: 0.08em; text-transform: uppercase; overflow-wrap: anywhere; }
.pm-etiq svg { width: 15px; height: 15px; flex: none; }
.pm-etiq-menthe { background: var(--v2-menthe); color: var(--pm-encre); }
.pm-etiq-creme { background: var(--pm-creme); color: var(--pm-encre); }
.pm-etiq-safran { background: var(--v2-camp-a); color: var(--pm-encre); }
.pm-etiq-lilas { background: var(--v2-camp-b); color: var(--pm-encre); }
.pm-etiq-rose { background: var(--pm-rose); color: var(--pm-encre); }
.pm-etiqs { display: flex; flex-wrap: wrap; gap: 6px; }
.pm-tuile { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(244, 241, 232, 0.14); color: var(--v2-texte); font-family: var(--pm-gros); font-size: 22px; line-height: 1; }
.pm-tuile svg { width: 22px; height: 22px; }
.pm-tuile-menthe { background: var(--v2-menthe); color: var(--pm-encre); }
.pm-tuile-safran { background: var(--v2-camp-a); color: var(--pm-encre); }
.pm-tuile-lilas { background: var(--v2-camp-b); color: var(--pm-encre); }
.pm-tuile-rose { background: var(--pm-rose); color: var(--pm-encre); }
.pm-tuile-bleu { background: var(--v2-th-geo); color: var(--pm-encre); }
.pm-tuile-creme { background: var(--pm-creme); color: var(--pm-encre); }
/* Briques, lignes à tuile, listes en briques */
.pm-brique { padding: 14px 16px; border-radius: 18px; background: var(--pm-brique); color: var(--v2-texte); }
.pm-pile { display: grid; gap: 10px; }
.pm-lignes { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pm-ligne { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 14px 10px 10px; border-radius: 16px; background: var(--pm-brique); }
.pm-ligne-t { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; }
.pm-ligne-t b { font-family: var(--v2-sans); font-size: 16px; font-weight: 800; line-height: 1.25; color: var(--v2-texte); overflow-wrap: anywhere; }
.pm-ligne-t > span { font-size: 14px; line-height: 1.35; color: var(--v2-texte-2); }
.pm-ligne-t > span:has(> .pm-etiq) { margin-top: 4px; }
.pm-liste { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: pm-n; }
.pm-liste > li { padding: 12px 14px; border-radius: 16px; background: var(--pm-brique); font-size: 15px; line-height: 1.45; color: var(--v2-texte); }
.pm-liste-num > li { position: relative; padding-left: 46px; counter-increment: pm-n; }
.pm-liste-num > li::before { content: counter(pm-n); position: absolute; left: 14px; top: 8px; font-family: var(--pm-gros); font-size: 30px; line-height: 1; color: var(--v2-menthe); }
.pm-liste b { display: block; font-size: 16px; font-weight: 800; }
.pm-liste > li > .pm-etiq { margin-bottom: 8px; white-space: normal; }
.pm-faits .pm-etiq { text-transform: none; letter-spacing: 0; font-weight: 800; }
/* Boutons : brique pleine #245A3D, 54 px, coins de 16, ombre portée, s'enfonce de 3 px ; le principal en menthe. */
.pm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; padding: 0 18px; border: 0; border-radius: 16px; background: var(--pm-bouton); color: var(--v2-texte); box-shadow: var(--pm-ombre); font-family: var(--v2-sans); font-size: 16px; font-weight: 800; line-height: 1.2; text-align: center; cursor: pointer; transition: transform 0.08s, box-shadow 0.08s; }
.pm-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }
.pm-btn-menthe { background: var(--v2-menthe); color: var(--v2-sur-menthe); box-shadow: 0 4px 0 var(--pm-fait); }
.pm-btn-menthe:active { box-shadow: 0 1px 0 var(--pm-fait); }
.pm-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
.pm-btn:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 3px; }
.pm-btn-tuile { justify-content: flex-start; padding: 7px 16px 7px 7px; text-align: left; }
.pm-btn-tuile > span:not(.pm-tuile) { flex: 1 1 auto; }
.pm-btn-tuile .pm-etiq { margin-left: auto; }
.pm-btns { display: grid; gap: 12px; }
.pm-btns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Les boutons au trait d'avant deviennent des briques pleines, dans les écrans de partie et les feuilles du message M. */
.jeu .v2-bouton, .sheet:has(.pm-sh) .v2-bouton { min-height: 54px; border-radius: 16px; box-shadow: 0 4px 0 var(--pm-fait); transition: transform 0.08s, box-shadow 0.08s; }
.jeu .v2-bouton-second, .sheet:has(.pm-sh) .v2-bouton-second { min-height: 54px; border: 0; border-radius: 16px; background: var(--pm-bouton); box-shadow: var(--pm-ombre); transition: transform 0.08s, box-shadow 0.08s; }
.jeu .v2-bouton:active, .sheet:has(.pm-sh) .v2-bouton:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--pm-fait); }
.jeu .v2-bouton-second:active, .sheet:has(.pm-sh) .v2-bouton-second:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); background: var(--pm-bouton); }
/* En tête de partie : « Manche 3 » en League Gothic 22, l'Arbitre dessous ; les boutons ronds et la pastille du score
   en briques pleines de 42 px, sans contour. */
.pm-tete { border-bottom: 0; }
/* Le rond se voit à 42 px ; la cible fait 44 px (un bord transparent de 1 px tout autour). */
.pm-tete .pm-rond, .pm-tete .jeu-ic { width: 44px; min-width: 44px; height: 44px; padding: 0; border: 1px solid transparent; border-radius: 50%; background: var(--pm-brique); background-clip: padding-box; color: var(--v2-texte); }
.pm-tete .jeu-ic-score { width: auto; padding: 0 14px 0 12px; border-radius: 22px; font-family: var(--pm-gros); font-size: 22px; font-weight: 400; }
.pm-tete .jeu-ic-score svg { width: 18px; height: 18px; }
.pm-tete .jeu-ic:active { transform: translateY(2px); }
.pm-tete .jeu-ics { gap: 8px; }
.pm-ou { display: grid; gap: 1px; min-width: 0; overflow: visible; white-space: normal; }
.pm-ou .pm-manche { font-weight: 400; }
.pm-manche { font-family: var(--pm-gros); font-size: 22px; font-weight: 400; line-height: 1; color: var(--v2-texte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* « Arbitre Camille » va à la ligne plutôt que d'être coupé (rien de coupé à 320 px). */
.pm-ou > span { font-size: 13px; line-height: 1.25; color: var(--v2-texte-2); overflow-wrap: break-word; }
.pm-ou > span b { font-weight: 800; color: var(--v2-texte); }
/* Le mouvement : la cascade d'entrée, le tampon, le score qui saute, la barre qui monte. Coupé en mouvement réduit. */
@keyframes pm-monte { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.pm-entree .pm-c { animation: pm-monte 380ms cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 80ms); }
@keyframes pm-frappe { 0% { opacity: 0; transform: rotate(-9deg) scale(2.3); } 55% { opacity: 1; transform: rotate(-9deg) scale(0.9); } 100% { opacity: 1; transform: rotate(-9deg) scale(1); } }
.pm-tampon { display: inline-block; padding: 2px 12px 0; border: 4px solid currentColor; border-radius: 10px; color: var(--v2-menthe); font-family: var(--pm-gros); font-size: 30px; line-height: 1.05; letter-spacing: 0.04em; text-transform: uppercase; transform: rotate(-9deg); pointer-events: none; }
.pm-entree .pm-tampon { animation: pm-frappe 420ms cubic-bezier(0.3, 1.3, 0.5, 1) both; animation-delay: var(--pm-tampon-delai, 300ms); }
.pm-tampon-libre { position: fixed; left: 50%; top: 42%; z-index: 40; margin: 0 0 0 -70px; background: rgba(13, 53, 32, 0.92); font-size: 44px; animation: pm-frappe 420ms cubic-bezier(0.3, 1.3, 0.5, 1) both; }
@keyframes pm-saute { 0% { transform: none; } 40% { transform: translateY(-7px) scale(1.18); } 100% { transform: none; } }
.pm-saute { display: inline-block; animation: pm-saute 360ms ease-out; }
.pm-barre { height: 8px; border-radius: 4px; background: rgba(244, 241, 232, 0.14); overflow: hidden; }
.pm-barre i { display: block; width: var(--a); height: 100%; border-radius: 4px; background: var(--v2-menthe); }
@keyframes pm-barre { from { width: var(--de); } to { width: var(--a); } }
.pm-entree .pm-barre i { animation: pm-barre 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(380ms + var(--pas, 0) * 260ms); }
@media (prefers-reduced-motion: reduce) {
  .pm-entree .pm-c, .pm-entree .pm-tampon, .pm-tampon-libre, .pm-saute, .pm-entree .pm-barre i { animation: none !important; }
  .pm-btn, .jeu .v2-bouton, .jeu .v2-bouton-second { transition: none; }
  .pm-btn:active, .jeu .v2-bouton:active, .jeu .v2-bouton-second:active, .pm-tete .jeu-ic:active { transform: none; }
}
/* Les écrans de partie (message M) : titres, carte du sujet, tirage, passage du téléphone, anneau du chrono, joute
   terminée, notation, classement, compte rendu, fin de partie, pause. */
.jeu.pm { gap: 18px; }
.pm-h2 { margin: 0; font-family: var(--pm-gros); font-size: 32px; font-weight: 400; line-height: 0.95; text-transform: uppercase; color: var(--v2-texte); }
.pm-h3 { margin: 0; font-family: var(--pm-gros); font-size: 26px; font-weight: 400; line-height: 1; text-transform: uppercase; color: var(--v2-texte); }
.pm-h4 { margin: 0; font-family: var(--v2-sans); font-size: 13px; font-weight: 900; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; color: var(--v2-texte-2); }
.pm-h2-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pm-section { display: grid; gap: 12px; }
.pm-para { margin: 0; font-size: 15px; line-height: 1.5; color: var(--v2-texte); }
.pm-centre { justify-content: center; text-align: center; }
.pm .jeu-attente { min-height: 54px; border: 0; border-radius: 16px; background: var(--pm-brique); color: var(--v2-texte); }
.pm .jeu-lettre { font-family: var(--v2-sans); font-weight: 900; }
.pm-mini { font-family: var(--pm-gros); font-size: 30px; line-height: 1; color: var(--v2-menthe); }
/* La carte du sujet : son papier crème, thème et niveau en étiquettes, les boutons dans la carte. */
.pm-carte .jeu-carte-q { font-family: var(--v2-carte); font-size: 26px; font-weight: 800; line-height: 1.12; }
.pm-carte .pm-etiq { background: rgba(6, 20, 12, 0.08); color: var(--pm-encre); }
.pm-carte .pm-etiq-menthe { background: var(--v2-menthe); }
.pm-carte .pm-etiq svg { width: 18px; height: 18px; }
.pm-carte-etiqs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.pm-carte-btns { display: grid; gap: 10px; margin-top: 6px; }
.pm-reponse { display: grid; justify-items: start; gap: 6px; }
.pm-reponse b { font-family: var(--pm-gros); font-size: 34px; font-weight: 400; line-height: 1; color: var(--pm-encre); }
.pm-libre { display: grid; gap: 10px; padding: 14px; border-radius: 18px; background: var(--pm-brique); }
.pm-libre .v2-label { margin: 0; }
.pm-qui { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
/* Le tirage : deux briques égales, A à gauche ; au tirage, elles se retournent et le tampon « Tiré » frappe. */
.pm-tirage { display: grid; gap: 12px; }
.pm-camps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; perspective: 900px; }
.pm-camp { position: relative; display: grid; justify-items: start; align-content: start; gap: 8px; min-height: 150px; padding: 12px 14px 14px; border-radius: 20px; background: var(--pm-brique); overflow: hidden; }
.pm-camp-l { font-family: var(--v2-sans); font-size: 60px; font-weight: 900; line-height: 0.85; }
.pm-camp-a .pm-camp-l, .pm-camp-a .pm-col-l, .pm-camp-a .pm-passe-filigrane { color: var(--v2-camp-a); }
.pm-camp-b .pm-camp-l, .pm-camp-b .pm-col-l, .pm-camp-b .pm-passe-filigrane { color: var(--v2-camp-b); }
.pm-camp-nom { font-family: var(--pm-gros); font-size: 32px; font-weight: 400; line-height: 1; color: var(--v2-texte); overflow-wrap: anywhere; }
.pm-camp-attente .pm-camp-nom { color: var(--v2-texte-2); }
.pm-camp .pm-tampon { position: absolute; top: 14px; right: 10px; padding: 0 8px; border-width: 3px; font-size: 22px; }
@keyframes pm-retourne { from { transform: rotateY(90deg); } to { transform: none; } }
.pm-tourne .pm-camp { animation: pm-retourne 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.pm-tourne .pm-camp-b { animation-delay: 360ms; }
.pm-tourne .pm-camp .pm-tampon { animation: pm-frappe 420ms cubic-bezier(0.3, 1.3, 0.5, 1) both; animation-delay: 560ms; }
.pm-tourne .pm-camp-b .pm-tampon { animation-delay: 920ms; }
/* Passe le téléphone (et « À son tour ») : une grande brique, le nom en League Gothic 86, la lettre en filigrane. */
.pm-passe { position: relative; display: grid; justify-items: start; gap: 10px; padding: 18px 18px 20px; border-radius: 22px; background: var(--pm-brique); overflow: hidden; }
.pm-passe-filigrane { position: absolute; right: -8px; bottom: -46px; font-family: var(--v2-sans); font-size: 230px; font-weight: 900; line-height: 1; opacity: 0.12; pointer-events: none; }
.pm-passe-nom { position: relative; margin: 0; font-family: var(--pm-gros); font-size: 86px; font-weight: 400; line-height: 0.9; text-transform: uppercase; overflow-wrap: anywhere; }
.pm-camp-a .pm-passe-nom { color: #FFA215; }
.pm-camp-b .pm-passe-nom { color: #C2A9FF; }
.pm-passe > :not(.pm-passe-filigrane) { position: relative; }
/* La joute : l'anneau de 150 px qui se vide à la couleur du camp, le chiffre en League Gothic 64. */
.pm-chrono { --anneau: 150px; display: grid; grid-template-columns: var(--anneau) minmax(0, 1fr); align-items: center; gap: 16px; }
.pm-anneau { position: relative; width: var(--anneau); height: var(--anneau); }
.pm-anneau svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.pm-anneau-piste { fill: none; stroke: var(--pm-bouton); stroke-width: 10; }
.pm-anneau-arc { fill: none; stroke: var(--v2-texte); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 0.25s linear; }
.pm-camp-a .pm-anneau-arc { stroke: var(--v2-camp-a); }
.pm-camp-b .pm-anneau-arc { stroke: var(--v2-camp-b); }
.pm-anneau-n { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--pm-gros); font-size: calc(var(--anneau) * 0.427); font-weight: 400; line-height: 1; color: var(--v2-texte); }
.pm-chrono.low.pm-camp-a .pm-anneau-n { color: var(--v2-camp-a); }
.pm-chrono.low.pm-camp-b .pm-anneau-n { color: var(--v2-camp-b); }
.pm-chrono-qui { display: grid; gap: 8px; min-width: 0; }
.pm-chrono-nom { font-family: var(--pm-gros); font-size: 40px; font-weight: 400; line-height: 0.95; color: var(--v2-texte); overflow-wrap: anywhere; }
.pm-vue { gap: 14px; }
.pm .cj-pied-joute { display: grid; gap: 12px; }
.pm-a-toi { padding: 12px 16px; border-radius: 16px; background: var(--pm-brique); font-family: var(--pm-gros); font-size: 30px; text-transform: uppercase; text-align: center; }
/* La joute terminée : la pièce A/B qui retombe, « TERMINÉE » en League Gothic 60. */
.pm-terminee { display: grid; justify-items: center; gap: 12px; padding: 26px 16px 22px; border-radius: 22px; background: var(--pm-brique); text-align: center; }
.pm-terminee-t { margin: 0; font-family: var(--pm-gros); font-size: 60px; font-weight: 400; line-height: 0.9; text-transform: uppercase; color: var(--v2-texte); }
.pm-piece { position: relative; width: 76px; height: 76px; border-radius: 50%; background: linear-gradient(135deg, var(--v2-camp-a) 50%, var(--v2-camp-b) 50%); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35); font-family: var(--v2-sans); font-size: 26px; font-weight: 900; line-height: 1; color: var(--pm-encre); }
.pm-piece-a { position: absolute; top: 13px; left: 17px; }
.pm-piece-b { position: absolute; right: 17px; bottom: 13px; }
@keyframes pm-retombe { 0% { opacity: 0; transform: translateY(-70px) rotate(-200deg); } 65% { opacity: 1; transform: translateY(6px) rotate(8deg); } 100% { transform: none; } }
.pm-entree .pm-piece { animation: pm-retombe 720ms cubic-bezier(0.3, 1.2, 0.5, 1) both; animation-delay: 200ms; }
.pm-sujet { display: grid; gap: 10px; }
.pm-sujet-q { margin: 0; font-family: var(--v2-carte); font-size: 21px; font-weight: 800; line-height: 1.2; color: var(--v2-texte); }
/* La notation : deux colonnes égales, A à gauche ; trois cases par camp en tuiles de 72 px ; cochée, menthe. */
.pm-notation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pm-col { display: grid; align-content: start; gap: 10px; min-width: 0; padding: 12px 10px; border-radius: 20px; background: var(--pm-brique); }
.pm-col-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 44px; }
.pm-col-l { font-family: var(--v2-sans); font-size: 32px; font-weight: 900; line-height: 0.9; }
.pm-col-nom { flex: 1 1 auto; min-width: 0; font-family: var(--pm-gros); font-size: 26px; font-weight: 400; line-height: 1; color: var(--v2-texte); overflow-wrap: anywhere; }
.pm-col-pts { font-family: var(--pm-gros); font-size: 34px; font-weight: 400; line-height: 1; color: var(--v2-menthe); }
.pm-cases { display: grid; gap: 8px; }
.pm-case { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 72px; padding: 8px 10px; border: 0; border-radius: 16px; background: var(--pm-bouton); color: var(--v2-texte); box-shadow: var(--pm-ombre); font-family: var(--v2-sans); font-size: 14px; font-weight: 800; line-height: 1.2; text-align: left; overflow-wrap: anywhere; }
button.pm-case { cursor: pointer; transition: transform 0.08s, box-shadow 0.08s, background-color 0.15s; }
button.pm-case:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }
.pm-case-coche { display: grid; flex: none; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(244, 241, 232, 0.14); color: transparent; }
.pm-case-coche svg { width: 20px; height: 20px; }
.pm-case[aria-pressed="true"] { background: var(--v2-menthe); color: var(--pm-encre); box-shadow: 0 4px 0 var(--pm-fait); }
.pm-case[aria-pressed="true"] .pm-case-coche { background: rgba(6, 20, 12, 0.12); color: var(--pm-encre); }
.pm-case:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 3px; }
/* Dépliants : « Ce que veut dire chaque case », « Les cartes des deux camps », « Relire sa carte ». */
.pm-depli { border-radius: 18px; background: var(--pm-brique); }
.pm-depli > summary { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 14px 10px 10px; border-radius: 18px; list-style: none; cursor: pointer; font-family: var(--v2-sans); font-size: 16px; font-weight: 800; line-height: 1.25; color: var(--v2-texte); }
.pm-depli > summary::-webkit-details-marker { display: none; }
.pm-depli > summary::after { content: "+"; flex: none; margin-left: auto; font-family: var(--pm-gros); font-size: 30px; line-height: 1; color: var(--v2-menthe); transition: transform 0.2s; }
.pm-depli[open] > summary::after { transform: rotate(45deg); }
.pm-depli-t { flex: 1 1 auto; min-width: 0; }
.pm-depli > summary:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 3px; }
.pm-depli > :not(summary) { padding: 0 10px 12px; }
.pm-depli .pm-liste > li, .pm-depli .pm-brique { background: var(--pm-bouton); }
.pm-volet-corps { display: grid; gap: 18px; }
.pm-camp-carte { display: grid; gap: 10px; }
.pm-camp-carte-t { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 16px; font-weight: 800; }
.pm-ctx { margin: 0; font-size: 15px; line-height: 1.5; }
.pm-fait-t { display: block; }
.pm-axe-d { display: block; margin-top: 2px; color: var(--v2-texte-2); }
.pm-liste .pm-etiqs { margin-top: 8px; }
.pm-liste .pm-etiqs .pm-etiq { margin-bottom: 0; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 900; }
/* Le classement en briques : le premier en brique menthe. */
.pm-classement { display: grid; gap: 8px; margin: 0; padding: 0; border-top: 0; list-style: none; }
.pm-rang { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "n t p" "n e e" "b b b"; align-items: center; column-gap: 12px; row-gap: 10px; padding: 12px 14px; border-radius: 18px; background: var(--pm-brique); }
.pm-rang-n { grid-area: n; min-width: 18px; font-family: var(--pm-gros); font-size: 34px; line-height: 1; color: var(--v2-texte-2); }
.pm-rang-t { display: contents; }
.pm-rang-t > b { grid-area: t; min-width: 0; }
/* L'étiquette des joutes et arbitrages sur sa propre rangée, sous le nom et le score : elle tient sur une ligne à 320 px. */
.pm-rang-t > .pm-etiq { grid-area: e; justify-self: start; margin-top: -4px; white-space: nowrap; letter-spacing: 0.05em; }
.pm-rang-t b { font-size: 17px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.pm-rang-pts { grid-area: p; display: flex; align-items: center; gap: 8px; }
.pm-rang-pts b { font-family: var(--pm-gros); font-size: 40px; font-weight: 400; line-height: 1; }
.pm-gain { display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px; border-radius: 13px; background: var(--v2-menthe); color: var(--pm-encre); font-size: 13px; font-weight: 900; }
.pm-rang .pm-barre { grid-area: b; }
.pm-rang-tete { background: var(--v2-menthe); color: var(--pm-encre); }
.pm-rang-tete .pm-rang-n { color: var(--pm-encre); }
.pm-rang-tete .pm-etiq { background: rgba(6, 20, 12, 0.1); color: var(--pm-encre); }
.pm-rang-tete .pm-gain { background: var(--pm-encre); color: var(--v2-menthe); }
.pm-rang-tete .pm-barre { background: rgba(6, 20, 12, 0.15); }
.pm-rang-tete .pm-barre i { background: var(--v2-fond); }
/* Compte rendu : culture générale, onglets A et B, « À approfondir », « Manche suivante ». */
.pm-cg { display: grid; gap: 10px; }
.pm-cg-q { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.35; }
.pm-cg-r { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; border-radius: 14px; background: var(--pm-creme); color: var(--pm-encre); }
.pm-cg-r .pm-etiq { background: rgba(6, 20, 12, 0.1); color: var(--pm-encre); }
.pm-cg-r b { font-family: var(--pm-gros); font-size: 28px; font-weight: 400; line-height: 1; }
.pm-recap { display: grid; gap: 14px; }
.pm-onglets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pm-onglet { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-height: 64px; padding: 10px 12px 10px 10px; border: 0; border-radius: 18px; background: var(--pm-bouton); color: var(--v2-texte); box-shadow: var(--pm-ombre); font-family: var(--v2-sans); text-align: left; cursor: pointer; }
.pm-onglet-t { display: grid; flex: 1 1 60px; min-width: 0; }
.pm-onglet-t b { font-size: 16px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.pm-onglet-t span { font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pm-texte-2); }
.pm-onglet[aria-selected="true"] { background: var(--pm-creme); color: var(--pm-encre); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35); }
.pm-onglet[aria-selected="true"] .pm-onglet-t span { color: #3D4F44; }
.pm-onglet:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 3px; }
.pm-panneau { display: grid; gap: 12px; }
.pm-approfondir { display: grid; gap: 8px; border-left: 6px solid var(--pm-rose); }
.pm-approfondir-l { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.45; }
.pm-suivante { display: grid; justify-items: start; gap: 10px; width: 100%; box-sizing: border-box; padding: 16px 16px 18px; border-radius: 22px; background: var(--v2-menthe); color: var(--pm-encre); font-family: var(--v2-sans); text-align: left; }
.pm-suivante .pm-etiq { background: rgba(6, 20, 12, 0.1); color: var(--pm-encre); }
.pm-suivante-nom { font-family: var(--pm-gros); font-size: 40px; font-weight: 400; line-height: 0.95; text-transform: uppercase; overflow-wrap: anywhere; }
/* Les boutons collés en bas (Lancer la manche, Rejouer) : sur le fond, un fondu au dessus à la place du filet. */
.pm .jeu-collees.pm-collees { display: grid; gap: 12px; margin-top: 0; padding-top: 10px; box-shadow: 0 -18px 16px -6px var(--v2-fond); }
/* Fin de partie : le gagnant en brique. */
.pm-gagnant { position: relative; display: grid; justify-items: center; gap: 12px; margin-top: 8px; padding: 22px 16px; border-radius: 22px; background: var(--pm-brique); text-align: center; }
.pm-gagnant-ic svg { width: 24px; height: 24px; }
.pm-gagnant-nom { margin: 0; font-family: var(--pm-gros); font-size: 64px; font-weight: 400; line-height: 0.9; text-transform: uppercase; color: var(--v2-texte); overflow-wrap: anywhere; }
.pm-gagnant .pm-tampon { position: absolute; top: 16px; right: 14px; font-size: 24px; border-width: 3px; }
/* La pause : une brique, « EN PAUSE » en League Gothic, le décompte de reprise en grand. */
.pm-pause { display: grid; justify-items: center; gap: 14px; padding: 24px 18px; border: 0; border-radius: 24px; background: var(--pm-brique); text-align: center; }
.pm-pause-t { margin: 0; font-family: var(--pm-gros); font-size: 58px; font-weight: 400; line-height: 0.9; text-transform: uppercase; }
.pm-pause-cd { font-family: var(--pm-gros); font-size: 120px; font-weight: 400; line-height: 0.9; }
.pm-pause .pm-btns { width: 100%; }
.jeu-pause-attente.pm-attente-arbitre { padding: 12px 14px; border: 0; border-radius: 14px; background: var(--pm-bouton); font-size: 15px; font-weight: 700; color: var(--v2-texte); }
/* Décisions de l'Arbitre, biais signalé en ligne, options en briques. */
.pm-decision { display: grid; gap: 10px; }
.pm-decision .pm-btn { min-height: 64px; }
.pm-decide-t { display: grid; gap: 2px; }
.pm-decide-t b { font-size: 15px; font-weight: 800; }
/* Le gris vert éclairci de l'Actu : 4,88 sur le vert des boutons, au lieu de 4,14 (le second sélecteur passe devant
   la règle commune des boutons de décision, .jeu-decide > span:last-child > span). */
.pm-decide-t span, .jeu-decide .pm-decide-t > span:last-child { font-size: 13px; font-weight: 700; color: var(--pm-texte-2); }
.pm-signal { display: grid; gap: 10px; }
.pm-options { display: grid; gap: 8px; }
.pm-options .v2-option { position: relative; display: grid; gap: 4px; min-height: 60px; padding: 12px 44px 12px 14px; border: 0; border-radius: 16px; background: var(--pm-brique); }
.pm-options .v2-option[aria-pressed="true"] { background: var(--v2-menthe); color: var(--pm-encre); }
.pm-options .v2-option[aria-pressed="true"] > span, .pm-options .v2-option[aria-pressed="true"] > b { color: var(--pm-encre); }
.pm-options .v2-coche { position: absolute; top: 14px; right: 12px; }
.pm-choix { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 7px 14px 7px 7px; border: 0; border-radius: 16px; background: var(--pm-bouton); color: var(--v2-texte); box-shadow: var(--pm-ombre); font-family: var(--v2-sans); font-size: 16px; font-weight: 800; text-align: left; cursor: pointer; }
.pm-choix[aria-pressed="true"] { background: var(--pm-creme); color: var(--pm-encre); }
.pm-confirme { display: grid; gap: 12px; }
@media (prefers-reduced-motion: reduce) {
  .pm-tourne .pm-camp, .pm-tourne .pm-camp .pm-tampon, .pm-entree .pm-piece { animation: none !important; }
  .pm-anneau-arc, button.pm-case, .pm-depli > summary::after { transition: none; }
  button.pm-case:active { transform: none; }
}
/* Les feuilles (message M) : la poignée, le titre en League Gothic 44 majuscules, la croix dans un rond plein de 42 px
   (cible de 44), la feuille monte du bas ; le contenu en briques. Progrès garde sa feuille d'avant (sheetHead ancien). */
.sheet-wrap:has(.pm-sh) { background: rgba(4, 20, 11, 0.62); animation: jm-voile 0.2s ease-out; }
.sheet:has(.pm-sh) { box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; max-height: calc(100% - 24px); padding: 4px 16px calc(28px + env(safe-area-inset-bottom, 0px)); border: 0; border-radius: 30px 30px 0 0; background: var(--v2-fond); box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.4); overscroll-behavior: contain; animation: jm-monte 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }
.sheet:has(.pm-sh) > * { flex: none; }
.pm-poignee { display: block; align-self: center; width: 42px; height: 5px; margin-top: 6px; border-radius: 3px; background: rgba(244, 241, 232, 0.2); }
.sheet .sh.pm-sh { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sheet .sh .h2.pm-sh-t { margin: 0; font-family: var(--pm-gros); font-size: 44px; font-weight: 400; line-height: 0.92; letter-spacing: 0.005em; text-transform: uppercase; color: var(--v2-texte); overflow-wrap: anywhere; }
.sheet .xbtn.pm-x { width: 44px; min-width: 44px; height: 44px; padding: 0; border: 1px solid transparent; border-radius: 50%; background: #1B4A31; background-clip: padding-box; color: var(--v2-texte); }
.sheet .xbtn.pm-x svg { width: 18px; height: 18px; }
@media (min-width: 900px) { .sheet:has(.pm-sh) { max-width: 560px; } }
/* Les règles en bref : les puces en haut (collées pendant la lecture), le but en brique menthe, les rôles en lignes
   à tuile, « Chacun sa carte », la manche en six briques numérotées, les points en jetons, les options. */
.pm-puces { position: sticky; top: -4px; z-index: 2; display: flex; gap: 8px; margin: 0 -16px; padding: 8px 16px; overflow-x: auto; background: var(--v2-fond); scrollbar-width: none; }
.pm-puces::-webkit-scrollbar { display: none; }
.pm-puce { flex: none; min-height: 44px; padding: 0 16px; border: 0; border-radius: 22px; background: var(--pm-brique); color: var(--v2-texte); font-family: var(--v2-sans); font-size: 15px; font-weight: 800; cursor: pointer; }
.pm-puce[aria-current="true"] { background: var(--v2-menthe); color: var(--pm-encre); }
.pm-puce:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 2px; }
.pm-regles { display: grid; gap: 22px; }
.pm-regle { display: grid; gap: 10px; scroll-margin-top: 70px; }
.pm-but { display: grid; justify-items: start; gap: 10px; padding: 16px; border-radius: 20px; background: var(--v2-menthe); color: var(--pm-encre); }
.pm-but .pm-etiq { background: rgba(6, 20, 12, 0.1); color: var(--pm-encre); }
.pm-but-t { font-family: var(--pm-gros); font-size: 44px; font-weight: 400; line-height: 0.92; text-transform: uppercase; }
.pm-chacun { display: grid; gap: 12px; }
.pm-h4 + .pm-mini-cartes { margin-top: 2px; }
.pm-mini-cartes { display: flex; gap: 14px; }
.pm-mini-carte { position: relative; display: grid; place-items: center; width: 64px; height: 88px; padding: 0; border: 0; border-radius: 10px; background: var(--pm-creme); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3); font-family: var(--v2-sans); font-size: 34px; font-weight: 900; color: var(--v2-camp-a-papier); perspective: 400px; }
.pm-mini-a { transform: rotate(-4deg); }
button.pm-mini-b { cursor: pointer; background: none; box-shadow: none; transform: rotate(4deg); }
.pm-mini-face, .pm-mini-dos { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 10px; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3); backface-visibility: hidden; transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.pm-mini-face { background: var(--pm-creme); color: var(--v2-camp-b-papier); transform: rotateY(180deg); }
.pm-mini-dos { background: var(--pm-bouton); color: var(--v2-menthe); font-family: var(--pm-gros); font-weight: 400; }
.pm-mini-b[aria-pressed="true"] .pm-mini-face { transform: none; }
.pm-mini-b[aria-pressed="true"] .pm-mini-dos { transform: rotateY(-180deg); }
.pm-mini-b:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 3px; border-radius: 10px; }
.pm-jetons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pm-jeton { display: grid; gap: 4px; padding: 12px 14px; border-radius: 16px; background: var(--pm-brique); font-size: 14px; line-height: 1.35; }
.pm-jeton-n { font-family: var(--pm-gros); font-size: 40px; font-weight: 400; line-height: 0.95; color: var(--v2-menthe); }
.pm-jeton-large { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; font-size: 14px; line-height: 1.4; }
.pm-mots > li b { margin-bottom: 2px; }
.sheet .rules.pm-regles p, .sheet .rules.pm-regles li { color: var(--v2-texte); }
@media (prefers-reduced-motion: reduce) {
  .sheet-wrap:has(.pm-sh) { animation: none; }
  .sheet:has(.pm-sh) { animation: none; }
  .pm-mini-face, .pm-mini-dos { transition: none; }
}
/* Retouches : les icônes des boutons à leur taille, les intertitres des règles, le titre d'un dépliant et son étiquette. */
.pm-btn > svg { flex: none; width: 20px; height: 20px; }
.pm-btn-tuile > svg:last-child { width: 18px; height: 18px; margin-left: auto; }
.sheet .rules .pm-h3 { font-size: 32px; font-weight: 400; line-height: 0.95; }
/* La confidentialité (étape 8) : une brique par sujet, sa tuile et son titre sur une ligne, puis la phrase. */
.pm-confidentialite { display: flex; flex-direction: column; gap: 12px; }
.pm-conf { display: flex; flex-direction: column; gap: 10px; }
.sheet .rules .pm-conf-t { display: flex; align-items: center; gap: 12px; font-size: 28px; }
.pm-conf-t .pm-tuile { flex: none; }
.sheet .rules.pm-regles .pm-liste > li { font-size: 15px; }
.pm-depli-t { display: grid; justify-items: start; gap: 6px; }
.pm-depli-t > b { font-weight: 800; }
/* Mes notes dans un écran de partie : le champ en brique, sans cadre au trait ; la phrase sur la vie privée en étiquette. */
.pm .jeu-notes { display: grid; gap: 10px; }
.pm .jeu-notes .jeu-feuille-h { font-family: var(--pm-gros); font-size: 26px; font-weight: 400; line-height: 1; text-transform: uppercase; color: var(--v2-texte); }
.pm .jeu-notes-zone { border: 0; border-radius: 16px; background: var(--pm-brique); color: var(--v2-texte); }
.jeu-notes-prive { margin: 0; }
/* Sur le papier (la feuille « Mes notes » de la carte en main), l'étiquette passe à l'encre. */
.cj-feuille .pm-etiq, .jeu-carte .pm-etiq { background: rgba(6, 20, 12, 0.08); color: var(--pm-encre); }
/* Plus de filet fin : le journal et le bas des feuilles se séparent par l'espace seulement. */
/* Le journal au style des briques, dans l'écran comme dans la feuille des scores (à table, étape 4) : sans filet. */
.pm .jeu-journal, .jeu-journal.pm-section { padding-top: 0; border-top: 0; }
.pm .jeu-journal ul { margin: 0; gap: 8px; }
.pm .jeu-journal li.pm-ligne { gap: 12px; font-size: 15px; color: var(--v2-texte); }
.sheet:has(.pm-sh) .jeu-feuille-bas { border-top: 0; background: var(--v2-fond); }
/* Une case de la notation : à 320 px, la coche au dessus du mot, pour que le mot reste entier. */
.pm-case { overflow-wrap: break-word; }
@media (max-width: 379px) { .pm-case { flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; padding: 8px; font-size: 13.5px; } }
/* Les feuilles du bilan seul : la citation en brique, l'alerte bordée de rose, l'état vide en brique avec son titre. */
.pm-feuille { gap: 14px; }
.pm-feuille > .pm-h3 { margin-top: 6px; }
.pm-citation { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.45; }
.pm-citation q, .pm-citation-q { quotes: "«\00a0" "\00a0»"; }
.pm-citation-q { display: block; margin-bottom: 6px; font-weight: 700; }
.pm-alerte { border-left: 6px solid var(--pm-rose); }
.pm-vide { display: grid; justify-items: start; gap: 12px; padding: 20px 18px; }
.pm-vide-t { font-family: var(--pm-gros); font-size: 34px; font-weight: 400; line-height: 0.95; text-transform: uppercase; color: var(--v2-texte); }
/* La feuille Spice (première fois sur un thème sensible) au langage des feuilles de partie. */
.av-feuille.pm-av { gap: 14px; }
.pm-av .av-t { margin: 0; font-family: var(--pm-gros); font-size: 44px; font-weight: 400; line-height: 0.92; letter-spacing: 0.005em; text-transform: uppercase; color: var(--v2-texte); overflow-wrap: break-word; }
.pm-av .av-p { font-size: 16px; color: var(--v2-texte); }
.pm-av .av-fermer { margin: 0; }
.pm-av .av-bouton { margin-top: 4px; }
@media (min-width: 900px) { .sheet:has(.pm-av) { border: 0; border-radius: 30px; } }
/* La feuille des joueurs : chaque prénom en brique (numéro en tuile, champ plein, croix ronde), Ajouter en brique. */
.pm-joueurs.rg-feuille { display: flex; flex-direction: column; gap: 14px; }
.pm-joueurs .rg-joueurs { margin-top: 0; gap: 8px; }
.pm-joueurs .prow.pm-prow { grid-template-columns: 40px minmax(0, 1fr) 44px; column-gap: 10px; height: auto; min-height: 60px; padding: 8px 8px 8px 10px; border-radius: 16px; background: var(--pm-brique); box-sizing: border-box; }
.pm-joueurs .prow .idx.pm-tuile { font-family: var(--pm-gros); font-size: 24px; font-weight: 400; color: var(--pm-encre); text-align: center; }
.pm-joueurs .pm-champ { width: 100%; min-width: 0; min-height: 44px; box-sizing: border-box; margin: 0; padding: 0 12px; border: 0; border-radius: 12px; background: var(--pm-bouton); color: var(--v2-texte); font-family: var(--v2-sans); font-size: 17px; font-weight: 700; box-shadow: none; }
.pm-joueurs .pm-champ::placeholder { color: var(--v2-texte-2); font-weight: 600; }
.pm-joueurs .pm-champ:focus-visible, .pm-joueurs .pm-champ:focus { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 2px; }
.pm-joueurs .prow .xbtn.pm-x { color: var(--v2-texte); background-color: var(--pm-bouton); }
.pm-joueurs .prow .xbtn.pm-x:disabled { opacity: 0.4; }
.pm-joueurs .rg-bouton { margin-top: 4px; font-size: 17px; }
/* La boîte « Tout effacer » (feuille Réglages depuis le 12 octobre au soir ; l'ancienne page Réglages n'existe plus) :
   une brique, sans filet. */
.v2-dialogue.pm-dialogue { display: grid; gap: 14px; padding: 22px 18px; border: 0; border-radius: 22px; background: var(--pm-brique); color: var(--v2-texte); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
.v2-dialogue.pm-dialogue:not([open]) { display: none; }
.pm-dialogue .pm-h2 { font-size: 36px; }
.pm-dialogue .pm-btn:not(.pm-btn-menthe) { background: var(--pm-bouton); }
/* Le bandeau du rôle en ligne : une ligne à tuile, sans le filet à gauche ni le fond de l'ancien bandeau. */
.jeu .pm-lignes.jeu-role-bandeau, .jeu:has(.cj-vue) .pm-lignes.jeu-role-bandeau { display: grid; padding: 0; border-left: 0; background: none; }
/* Contrôle de charte de M : les anciennes classes gardées pour les tests ne posent plus leur filet. Sur le papier de
   la carte en main, les axes se séparent par l'espace seulement. « À toi » prend la couleur de son camp. */
.pm-volet.jeu-volet, .pm-signal.jeu-signal, .jeu-coup.pm-brique, .pm-a-toi.jeu-a-toi { border: 0; }
.pm-options.v2-options { margin-top: 0; border-top: 0; }
.pm-a-toi.jeu-camp-a { background: var(--v2-camp-a); color: var(--pm-encre); }
.pm-a-toi.jeu-camp-b { background: var(--v2-camp-b); color: var(--pm-encre); }
.pm .cj-axes { border-top: 0; }
.pm .cj-axes li { border-bottom: 0; }
/* La joute à la carte en main (étape 2 : la carte tient entière sur un petit téléphone). Sur un écran haut, tout M :
   le titre d'étape, sa barre de suivi, l'anneau de 150 px. Sur un écran bas seulement (accord de Jules, 12 octobre),
   le titre et sa barre sont lus sans se voir, l'anneau se règle sur la hauteur de l'écran, l'étiquette du camp n'est
   pas répétée (la carte et la couleur de l'anneau le disent). Seuils mesurés avec telephone.mjs, la joute complète
   partout : à table, elle tient dès 640 px de haut ; en ligne, le débatteur qui parle a en plus le bandeau de son rôle
   et « C'est à toi », elle tient dès 812 px (de 360 à 430 px de large). Sur ordinateur, jamais compacte. */
@media (max-width: 899px) and (max-height: 639.98px) {
  .jeu:has(.cj-vue) .pm-carte-titre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .jeu:has(.cj-vue) .pm-vue .pm-chrono { --anneau: clamp(72px, 13svh, 120px); gap: 12px; }
  .jeu:has(.cj-vue) .pm-vue .pm-chrono-nom { font-size: clamp(26px, 5svh, 40px); }
  .jeu:has(.cj-vue) .pm-vue .pm-chrono .pm-etiqs { gap: 4px; }
  .jeu:has(.cj-vue) .pm-vue .pm-chrono .pm-etiq-safran, .jeu:has(.cj-vue) .pm-vue .pm-chrono .pm-etiq-lilas { display: none; }
}
@media (max-width: 899px) and (max-height: 811.98px) {
  .jeu:has(.cj-vue):has(.jeu-role-bandeau) .pm-carte-titre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .jeu:has(.cj-vue):has(.jeu-role-bandeau) .pm-vue .pm-chrono { --anneau: clamp(72px, 13svh, 120px); gap: 12px; }
  .jeu:has(.cj-vue):has(.jeu-role-bandeau) .pm-vue .pm-chrono-nom { font-size: clamp(26px, 5svh, 40px); }
  .jeu:has(.cj-vue):has(.jeu-role-bandeau) .pm-vue .pm-chrono .pm-etiqs { gap: 4px; }
  .jeu:has(.cj-vue):has(.jeu-role-bandeau) .pm-vue .pm-chrono .pm-etiq-safran, .jeu:has(.cj-vue):has(.jeu-role-bandeau) .pm-vue .pm-chrono .pm-etiq-lilas { display: none; }
  .jeu:has(.cj-vue):has(.jeu-role-bandeau) .jeu-role-bandeau .pm-ligne { min-height: 48px; padding: 4px 12px 4px 4px; }
  .jeu:has(.cj-vue):has(.jeu-role-bandeau) .jeu-role-bandeau .pm-ligne-t > span, .jeu:has(.cj-vue):has(.jeu-role-bandeau) .jeu-role-bandeau .pm-ligne > .pm-etiq { display: none; }
  .jeu:has(.cj-vue):has(.jeu-role-bandeau) .jeu-role-bandeau .pm-ligne { min-height: 40px; padding: 4px 12px 4px 4px; }
  .jeu:has(.cj-vue):has(.jeu-role-bandeau) .jeu-role-bandeau .pm-tuile { width: 32px; height: 32px; border-radius: 10px; font-size: 18px; }
  .jeu:has(.cj-vue):has(.jeu-role-bandeau) .pm-vue .pm-chrono { --anneau: clamp(56px, 11svh, 120px); }
  .jeu:has(.cj-vue):has(.jeu-role-bandeau) .pm-vue .pm-chrono .pm-etiq { min-height: 0; padding: 4px 9px; }
  .jeu:has(.cj-vue):has(.jeu-role-bandeau) .cj-pied-joute .pm-ligne { min-height: 0; padding: 6px 10px 6px 6px; }
  .jeu:has(.cj-vue):has(.jeu-role-bandeau) .cj-pied-joute .pm-tuile { width: 32px; height: 32px; border-radius: 10px; }
  .jeu:has(.cj-vue):has(.jeu-role-bandeau) .cj-pied-joute .pm-ligne-t b { font-size: 14px; }
  .jeu:has(.cj-vue):has(.jeu-role-bandeau) .cj-pied-joute .pm-a-toi { padding: 10px 14px; font-family: var(--v2-sans); font-size: 15px; font-weight: 800; line-height: 1.3; text-transform: none; }
}
/* En tête sous 400 px : le mot « Arbitre » (toujours lu) laisse la place à l'icône de l'Arbitre, pour que la ligne tienne
   sans couper et que l'en tête reste bas au dessus de la carte en main. */
.pm-arb-ic { display: none; }
.pm-arb-ic svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; }
@media (max-width: 399px) {
  .pm-ou .pm-arb-ic { display: inline; }
  .pm-ou .pm-arb-mot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
/* En tête à 320 px, en ligne (quatre ronds) : « Manche 3 » entier ; le trophée de la pastille du score s'efface. */
@media (max-width: 359px) {
  .pm-tete { column-gap: 6px; }
  .pm-tete .jeu-ics { gap: 6px; }
  .pm-tete .jeu-ic-score { padding: 0 11px; }
  .pm-tete .jeu-ic-score svg { display: none; }
}

/* ---------- N.0 : défauts de M (12 octobre) ---------- */
/* Une étiquette tient sur une ligne à 320 px : ce qui peut être long (thème et sous thème, source d'un fait, noms des
   rôles) passe en ligne de texte. Le thème : son icône, son nom en gras, le sous thème après un point médian. */
.pm-theme { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--v2-sans); font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--v2-texte); }
.pm-theme > svg, .pm-theme > img { flex: none; width: 24px; height: 24px; }
.pm-theme b { font-weight: 800; }
.pm-carte .pm-theme { color: var(--pm-encre); }
/* La source d'un fait, au dessus de son texte. */
.pm-fait-src { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 800; line-height: 1.3; color: var(--v2-texte); }
/* Les rôles de la manche : le rôle en gris, les noms en gras crème, une ligne chacun. */
.pm-roles { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pm-roles li { font-size: 15px; line-height: 1.35; color: var(--v2-texte-2); }
.pm-roles b { font-weight: 800; color: var(--v2-texte); }
.pm-suivante .pm-roles li { color: var(--v2-sur-menthe); }
.pm-suivante .pm-roles b { color: var(--pm-encre); }
/* La pause prend le focus sur sa boîte (aucun bouton cerclé à l'ouverture). */
.jeu-pause-ecran:focus { outline: none; }
/* Le nom d'un biais en gras au dessus de sa définition (jusqu'à 29 lettres : « Corrélation prise pour cause »). */
.pm-biais-n { display: block; margin-bottom: 4px; font-weight: 800; color: var(--v2-texte); }
/* Une étiquette au bout d'une ligne à tuile ne se tasse jamais (« Ton rôle » passait sur quatre lignes) : le texte de la
   ligne va à la ligne à sa place. */
.pm-ligne > .pm-etiq { flex: none; }

/* ---------- Progrès : ce qui reste des messages N et P (12 et 14 octobre) ----------
   Les pastilles (« Tu es », le choix du chemin, le Guide), les objets, les feuilles (Tes objets, le barème, toutes les
   étapes, le choix du chemin), les jauges. La page elle même est le plateau (24 octobre, plus bas). */
:root { --pr-ligne: #123F28; --pr-etape: #245A3D; --pr-gris: #A9BFB1; --pr-or: #E4A60C; --pr-or-fonce: #A86F00; --pr-encre: #0D3520; --pr-creme: #F4F1E8; }
body.pr-ecran { margin: 0; }
/* Les pastilles de P (« Tu es », « Tous », Guide) : #1B4A31, 44 px de haut, Archivo 800 15, un chevron. */
.pr-pilule { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; min-width: 44px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--pm-brique); color: var(--v2-texte); font-family: var(--v2-sans); font-size: 15px; font-weight: 800; line-height: 1; white-space: nowrap; box-shadow: var(--pm-ombre); cursor: pointer; }
.pr-pilule:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 3px; }
.pr-pilule .pr-chevron { flex: none; width: 18px; height: 18px; margin-right: -2px; stroke-width: 2.4; }
.pr-pilule[aria-expanded="true"] .pr-chevron { transform: rotate(180deg); }
.pr-c { box-sizing: border-box; }
.pr-page .pm-etiqs, .pr-feuille .pm-etiqs { margin: 0; }
/* Les étiquettes de Progrès aux couleurs des planches : crème #F4F1E8, encre #0D3520. */
:is(.pr-page, .pr-feuille) .pm-etiq-creme { background: var(--pr-creme); color: var(--pr-encre); }
:is(.pr-page, .pr-feuille) .pm-etiq-menthe { color: var(--pr-encre); }
/* Et à leur taille : des pilules de 26 px de haut (38 px dans les écrans de M). */
:is(.pr-page, .pr-feuille) .pm-etiq { box-sizing: border-box; min-height: 26px; padding: 4px 12px; border-radius: 13px; letter-spacing: 0.05em; }
/* Les feuilles de Progrès : une colonne, comme les feuilles de M ; le focus entre sur la feuille elle même. */
.pr-feuille { display: grid; gap: 14px; }
.pr-feuille > .pm-poignee { justify-self: center; }
.sheet:has(.pr-feuille):focus { outline: none; }

/* La petite pièce A/B (orange et lilas en diagonale), partout où Progrès compte des pièces. */
.pr-piece { display: inline-block; flex: none; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--v2-camp-a) 50%, var(--v2-camp-b) 50%); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3); vertical-align: middle; }

.pr-objet { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 13px; background: #0D3520; color: var(--v2-texte); cursor: pointer; }
.pr-objet[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--v2-menthe); }
.pr-objet .pr-coche { display: none; position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; padding: 2px; border-radius: 50%; background: var(--v2-menthe); color: var(--pr-encre); stroke-width: 3; }
.pr-objet[aria-pressed="true"] .pr-coche { display: block; }
.pr-objet:focus-visible, .pr-plus:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 4px; }
.pr-plus .pr-ic { width: 22px; height: 22px; stroke-width: 2.4; }
.pr-objet .pm-tampon { position: absolute; left: 50%; top: -30px; z-index: 2; margin-left: -42px; padding: 1px 8px 0; border-width: 3px; font-size: 18px; background: var(--pm-brique); animation: pm-frappe 420ms cubic-bezier(0.3, 1.3, 0.5, 1) both; pointer-events: none; }

/* Les objets dessinés (tuile de 44 px, carte de la feuille). */
.pr-ob { display: block; flex: none; }
.pr-ob-dos { width: 18px; height: 26px; border-radius: 4px; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3); }
.pr-ob-pileface { background: linear-gradient(135deg, var(--v2-camp-a) 50%, var(--v2-camp-b) 50%); }
.pr-ob-safran { background: var(--v2-camp-a); box-shadow: inset 0 0 0 3px var(--pr-or-fonce), 0 2px 0 rgba(0, 0, 0, 0.3); }
.pr-ob-gravee { position: relative; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--v2-camp-a) 50%, var(--v2-camp-b) 50%); box-shadow: inset 0 0 0 3px var(--pr-or), 0 2px 0 rgba(0, 0, 0, 0.3); }
.pr-ob-gravee b { display: none; }
.pr-ob-lilas { width: 30px; height: 20px; border-radius: 50%; background: var(--v2-camp-b); box-shadow: 0 3px 0 #6E4BC9; }

.pr-choix-w { position: relative; }
.pr-guide svg { width: 20px; height: 20px; }
.pr-ligne-courte .pr-guide { width: 44px; padding: 0; }
.pr-ligne-courte .pr-guide-t { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Le choix du chemin (et des noms à table) : des lignes de 52 px dans la feuille, de 48 px dans le menu, la pastille de
   couleur du thème, le choisi coché de menthe. */
.pr-choix-liste { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pr-choix-l { display: flex; align-items: center; gap: 12px; box-sizing: border-box; width: 100%; min-height: 52px; padding: 0 16px; border: 0; border-radius: 16px; background: var(--pm-brique); color: var(--v2-texte); font-family: var(--v2-sans); font-size: 16px; font-weight: 800; text-align: left; cursor: pointer; }
.pr-choix-l:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 2px; }
.pr-choix-l:is([aria-pressed="true"], [aria-checked="true"]) { box-shadow: inset 0 0 0 3px var(--v2-menthe); }
.pr-choix-n { flex: 1 1 auto; min-width: 0; }
.pr-choix-l .pr-ic { flex: none; width: 22px; height: 22px; color: var(--v2-menthe); stroke-width: 2.6; }
.pr-point { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--th); }
/* Ordinateur : le menu se déroule sous le bouton, aligné à sa droite ; il se ferme par Échap, un clic dehors ou un choix. */
.pr-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 40; width: 260px; padding: 8px; border-radius: 20px; background: var(--pr-etape); box-shadow: 0 5px 0 rgba(0, 0, 0, 0.35), 0 18px 40px rgba(0, 0, 0, 0.35); }
.pr-menu .pr-choix-liste { gap: 2px; }
.pr-menu .pr-choix-l { min-height: 48px; padding: 0 14px; border-radius: 13px; background: none; font-size: 15px; }
.pr-menu .pr-choix-l:hover { background: rgba(255, 255, 255, 0.08); }
.pr-menu .pr-choix-l[aria-checked="true"] { background: var(--pm-brique); box-shadow: none; }
.pr-ferme { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 16px; border-radius: 18px; background: var(--pr-etape); font-size: 15px; font-weight: 700; }
.pr-ferme .ch-cadenas { width: 20px; height: 20px; flex: none; stroke-width: 2; }
.pr-rangs { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pr-rang { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 46px; padding: 0 14px 0 16px; border: 0; border-radius: 14px; background: var(--pr-ligne); color: var(--pr-gris); font-family: var(--v2-sans); text-align: left; cursor: pointer; }
.pr-rang:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 3px; }
.pr-rang-n { width: 22px; font-family: var(--pm-gros); font-size: 26px; font-weight: 400; line-height: 1; color: var(--v2-texte); }
.pr-rang-t { flex: 1 1 auto; font-size: 15px; font-weight: 700; }
.pr-rang-i { display: grid; place-items: center; color: var(--pr-gris); }
.pr-rang-i svg { width: 20px; height: 20px; stroke-width: 1.8; }
.pr-rang-fait .pr-rang-i { color: var(--v2-menthe); }
.pr-rang-cours { background: var(--pr-etape); color: var(--v2-texte); }

.pr-jauge { display: grid; gap: 8px; }
.pr-jauge-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; }
.pr-jauge-n { font-size: 16px; font-weight: 800; color: var(--v2-texte); }
.pr-jauge-v { font-family: var(--pm-gros); font-size: 26px; font-weight: 400; line-height: 0.9; color: var(--v2-menthe); }
.pr-rail { position: relative; display: block; height: 10px; border-radius: 5px; background: var(--pr-ligne); }
.pr-rail > i:first-child { position: absolute; inset: 0 auto 0 0; width: var(--part, 0%); border-radius: 5px; background: var(--v2-menthe); }
/* Le repère du minimum : un taquet de 4 px aux bouts ronds (un filet de 2 px sortait de la charte). */
.pr-rail-seuil { position: absolute; top: -3px; bottom: -3px; left: var(--seuil); width: 4px; margin-left: -2px; border-radius: 2px; background: var(--v2-texte); }

/* Les feuilles : Tes objets (quatre cartes crème), le barème, toutes les étapes. */
.pr-cartes-ob { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.pr-carte-ob { display: grid; align-content: start; gap: 10px; padding: 10px 10px 12px; border-radius: 18px; background: var(--pr-creme); color: var(--pr-encre); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3); }
.pr-carte-ob-v { display: grid; place-items: center; height: 74px; border-radius: 12px; background: #E8E2D3; }
.pr-carte-ob-v .pr-ob-dos { width: 36px; height: 52px; border-radius: 6px; }
.pr-carte-ob-v .pr-ob-safran { box-shadow: inset 0 0 0 5px var(--pr-or-fonce), 0 3px 0 rgba(0, 0, 0, 0.25); }
.pr-carte-ob-v .pr-ob-gravee { width: 58px; height: 58px; box-shadow: inset 0 0 0 5px var(--pr-or), 0 3px 0 rgba(0, 0, 0, 0.25); }
.pr-carte-ob-v .pr-ob-gravee b { position: absolute; display: block; font-family: var(--v2-sans); font-size: 17px; font-weight: 900; line-height: 1; color: var(--pr-encre); }
.pr-carte-ob-v .pr-ob-gravee b:first-child { left: 15px; top: 12px; } .pr-carte-ob-v .pr-ob-gravee b:last-child { right: 14px; bottom: 11px; }
.pr-carte-ob-v .pr-ob-lilas { width: 66px; height: 42px; box-shadow: 0 5px 0 #6E4BC9; }
.pr-carte-ob-n { font-size: 15px; font-weight: 800; line-height: 1.25; }
.pr-choisir { justify-self: start; min-height: 44px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--pr-encre); color: var(--pr-creme); font-family: var(--v2-sans); font-size: 13px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.pr-choisir.pr-choisi { background: var(--v2-menthe); color: var(--pr-encre); }
.pr-choisir:focus-visible { outline: var(--v2-focus) solid var(--pr-encre); outline-offset: 3px; }

/* ---------- Le plateau de Progrès (24 octobre) ----------
   La maquette animée « Progrès, le plateau » (docs/messages/Le plateau de Progrès) : les mesures du prototype à 390 px
   (plateau de 358 px) et, à partir de 1000 px, celles d'ordinateur.png. La géométrie de la route est calculée dans
   chemin-page.js (geoTelephone, geoOrdinateur) ; les cases, le personnage et la bulle y prennent --x et --y. Les
   animations sont celles du prototype, avec ses durées : pl-joue à l'arrivée, pl-retour au retour d'une étape réussie. */
:root { --pl-nuit: #0A2C19; --pl-case: #245A3D; --pl-menthe-f: #5FAE7A; --pl-encre: #06140C; --pl-gris: #A9BFB1; --pl-safran: #FFA215; --pl-safran-f: #C77A00; }
.ch-page.pl-page { display: block; padding-top: calc(20px + env(safe-area-inset-top, 0px)); }
.pl-ic { fill: none; stroke: currentColor; stroke-width: 2.3; }

/* Le titre et ses rayons ; Tes objets à gauche, Tes derniers débats à droite ; « Tu es » dessous. */
.pl-tete { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 8px; }
.pl-titre { grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0; font-family: var(--pm-gros); font-size: 60px; font-weight: 400; line-height: 0.9; letter-spacing: 0.01em; text-transform: uppercase; color: var(--v2-texte); }
.pl-titre-t { display: inline-block; }
.pl-rayons { position: relative; flex: none; width: 22px; height: 40px; }
.pl-rayons i { position: absolute; left: 50%; top: 50%; width: 4px; height: 13px; margin: -6.5px 0 0 -2px; border-radius: 2px; background: var(--v2-menthe); transform: var(--r); }
.pl-rayons.pl-g i:nth-child(1) { --r: rotate(-60deg) translateY(-15px); } .pl-rayons.pl-g i:nth-child(2) { --r: rotate(-90deg) translateY(-15px); } .pl-rayons.pl-g i:nth-child(3) { --r: rotate(-120deg) translateY(-15px); }
.pl-rayons.pl-d i:nth-child(1) { --r: rotate(60deg) translateY(-15px); } .pl-rayons.pl-d i:nth-child(2) { --r: rotate(90deg) translateY(-15px); } .pl-rayons.pl-d i:nth-child(3) { --r: rotate(120deg) translateY(-15px); }
.pl-tete-b { display: contents; }
.pl-objets { grid-column: 1; grid-row: 1; justify-self: start; display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pl-objet-l { display: none; }
.pl-objets .pr-objet { border-radius: 50%; background: var(--pm-brique); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3); }
.pl-objets .pr-objet[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--v2-menthe), 0 4px 0 3px rgba(0, 0, 0, 0.3); }
.pl-plus-ic { display: none; }
.pl-plus-dos { display: grid; place-items: center; }
.pl-pastille { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; min-width: 44px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--pm-brique); color: var(--v2-texte); font-family: var(--v2-sans); font-size: 15px; font-weight: 800; line-height: 1; white-space: nowrap; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3); cursor: pointer; }
.pl-pastille:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 3px; }
.pl-derniers { grid-column: 3; grid-row: 1; justify-self: end; gap: 6px; padding: 0 12px; }
.pl-derniers .pl-ic { width: 20px; height: 20px; stroke-width: 2; }
.pl-derniers-t { display: none; }
.pl-derniers-n { font-family: var(--pm-gros); font-size: 24px; font-weight: 400; color: var(--v2-menthe); padding-top: 2px; }
.pl-tete-q { grid-column: 1 / -1; grid-row: 2; justify-self: center; margin-top: 12px; }

/* Le débat du jour en ticket compact, à toutes les largeurs (« Le débat du jour à gratter », 24 octobre, prototype de
   docs/messages ; sur ordinateur aussi depuis le 25 octobre, dans la colonne de 440 px) : souche de 72 px à la couleur
   du thème du jour (l'icône de 22 px, « ×2 » en League Gothic 34 px, « pièces »), encoches de 16 px, la perforation
   pointillée de 2 px, 100 px de haut au moins ; le temps en haut à droite ; la question en Archivo 800 15 px, jamais
   coupée, et à sa droite Débattre en rond de 48 px à l'encre, flèche menthe. Fait : le tampon à la place du temps, la
   question en encre 2 sur deux lignes, « +6 pièces demain » à sa droite. */
.pl-grille { overflow-x: clip; }
/* Rien ne se sélectionne sur le ticket : un glissé de la souris qui passe sur la couche montrait la question cachée
   dans la sélection (Jules, 28 octobre). */
.pl-ticket { position: relative; display: flex; min-height: 100px; margin-top: 20px; filter: drop-shadow(0 5px 0 rgba(0, 0, 0, 0.3)); user-select: none; -webkit-user-select: none; }
.pl-ticket::before, .pl-ticket::after { content: ""; position: absolute; left: 64px; z-index: 2; width: 16px; height: 16px; border-radius: 50%; background: var(--v2-fond); }
.pl-ticket::before { top: -8px; } .pl-ticket::after { bottom: -8px; }
.pl-talon { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; box-sizing: border-box; width: 72px; padding: 10px 4px; border-radius: 18px 0 0 18px; background: var(--th); color: var(--pl-encre); }
.pl-talon .ic-theme { width: 24px; height: 24px; }
.pl-x2 { display: block; font-family: var(--pm-gros); font-size: 34px; font-weight: 400; line-height: 0.92; transform: rotate(-6deg); }
.pl-talon-t { font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.pl-corps { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; padding: 11px 12px 12px 15px; border-left: 2px dotted rgba(13, 53, 32, 0.3); border-radius: 0 18px 18px 0; background: var(--v2-papier); color: var(--pl-encre); }
.pl-puce { align-self: flex-start; display: inline-flex; align-items: center; min-height: 26px; margin: 0; padding: 0 10px; border-radius: 999px; background: var(--pl-encre); color: var(--v2-menthe); font-family: var(--v2-sans); font-size: 13px; font-weight: 800; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; }
.pl-q { margin: 0; font-family: var(--v2-sans); font-size: 15px; font-weight: 800; line-height: 1.25; color: var(--pl-encre); }
.pl-btn-encre { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 0; border-radius: 14px; background: var(--pl-encre); color: var(--v2-papier); font-family: var(--v2-sans); font-size: 16px; font-weight: 800; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25); cursor: pointer; }
.pl-btn-encre:focus-visible { outline: var(--v2-focus) solid var(--pl-encre); outline-offset: 3px; }
/* Les boutons de jeu s'enfoncent de 3 px en 80 ms (comme les boutons pleins de M) ; rien en mouvement réduit. */
.pl-btn-encre, .pl-bulle-b { transition: transform 0.08s, box-shadow 0.08s; }
.pl-btn-encre:active { transform: translateY(3px); box-shadow: 0 0 0 rgba(0, 0, 0, 0.25); }
.pl-bulle-b:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--pl-menthe-f); }
.pl-temps { display: inline-flex; flex: none; align-items: center; gap: 5px; font-size: 13px; font-weight: 800; }
.pl-temps .pl-ic { width: 14px; height: 14px; }
/* En haut, la pastille et le temps, ou le tampon une fois fait. */
.pl-haut { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pl-tampon { flex: none; padding: 1px 8px 0; border-width: 3px; color: var(--pm-brique); font-size: 22px; transform: rotate(-4deg); }
/* La zone du débat (la question et Débattre), sous la couche à gratter la première fois du jour. */
.pl-jzone { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; }
.pl-jcontenu { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr) 48px; align-items: center; gap: 10px; min-height: 56px; }
.pl-qb { min-width: 0; }
.pl-qb .fr-seul { margin-top: 6px; }
.pl-go { width: 48px; height: 48px; min-height: 48px; padding: 0; border-radius: 50%; color: var(--v2-menthe); }
.pl-go-ic { display: grid; place-items: center; }
.pl-go-ic .pl-ic { width: 22px; height: 22px; stroke-width: 2.6; }
.pl-go-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pl-fait .pl-jcontenu { grid-template-columns: minmax(0, 1fr) auto; }
.pl-fait .pl-q { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; color: var(--v2-encre-2); }
.pl-gagne { margin: 0; font-size: 13px; font-weight: 800; line-height: 1.3; white-space: nowrap; }

/* La couche à gratter (prototype de docs/messages « Le débat du jour à gratter ») : posée sur la question et Débattre,
   peinte dans un canevas (gratter() de chemin-page.js) ; le reflet qui passe une fois, la pièce qui montre le geste,
   les copeaux qui tombent. Puis la découverte : « ×2 » tamponné avec une onde, la question qui monte, Débattre qui saute
   puis brille, douze pièces et étoiles qui jaillissent de la souche. Rien ne tourne en boucle. */
.pl-couche { position: absolute; inset: -4px -4px -4px -6px; z-index: 3; border-radius: 12px; overflow: hidden; transition: opacity 280ms ease; }
.pl-couche:has(.pl-gratte:focus-visible) { outline: var(--v2-focus) solid var(--pl-encre); outline-offset: 2px; }
.pl-gratte { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.pl-gratte:focus-visible { outline: none; }
.pl-reflet { position: absolute; top: -20%; bottom: -20%; left: -40%; width: 34%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent); transform: skewX(-20deg); pointer-events: none; }
.pl-reflete .pl-reflet { animation: pl-reflet 1100ms cubic-bezier(0.4, 0, 0.2, 1) 350ms both; }
.pl-doigt { position: absolute; left: 0; top: 0; z-index: 6; width: 34px; height: 34px; opacity: 0; pointer-events: none; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.3)); }
.pl-doigt.pl-vu { opacity: 1; }
.pl-couche.pl-fin { opacity: 0; pointer-events: none; }
.pl-copeau { position: absolute; z-index: 7; width: 7px; height: 4px; border-radius: 1px; pointer-events: none; animation: pl-copeau 650ms cubic-bezier(0.3, 0.6, 0.4, 1) both; }
.pl-onde { position: absolute; left: 50%; top: 50%; width: 70px; height: 70px; margin: -35px 0 0 -35px; border: 4px solid var(--pl-encre); border-radius: 50%; opacity: 0; pointer-events: none; }
.pl-fete { position: absolute; left: 36px; top: 50%; z-index: 8; width: 0; height: 0; pointer-events: none; }
.pl-fete i { position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; opacity: 0; }
.pl-fete .pl-p { border-radius: 50%; background: linear-gradient(135deg, #FFA215 50%, #C2A9FF 50%); box-shadow: 0 0 0 2px var(--pl-encre); }
.pl-fete .pl-e { background: var(--v2-menthe); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.pl-decouvert .pl-x2 { animation: pl-gx2 560ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.pl-decouvert .pl-onde { animation: pl-onde 620ms ease-out 120ms both; }
.pl-decouvert .pl-q { animation: pl-gq 420ms ease-out both; }
.pl-decouvert .pl-go { animation: pl-gpop 460ms cubic-bezier(0.34, 1.56, 0.64, 1) 260ms both, pl-gbrille 900ms ease-out 700ms both; }
.pl-decouvert .pl-fete i { animation: pl-jaillit 900ms cubic-bezier(0.15, 0.8, 0.3, 1) both; animation-delay: var(--t); }
@keyframes pl-reflet { from { left: -40%; } to { left: 120%; } }
@keyframes pl-copeau { from { opacity: 1; transform: translate(0, 0) rotate(0); } to { opacity: 0; transform: translate(var(--dx), 46px) rotate(var(--r)); } }
@keyframes pl-gx2 { 0% { opacity: 0; transform: scale(2.4) rotate(-26deg); } 60% { opacity: 1; transform: scale(0.88) rotate(-4deg); } 100% { transform: rotate(-6deg); } }
@keyframes pl-onde { 0% { opacity: 0.7; transform: scale(0.4); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes pl-gpop { 0% { transform: scale(0); } 70% { transform: scale(1.14); } 100% { transform: none; } }
@keyframes pl-gbrille { 0% { box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(163, 241, 164, 0.9); } 100% { box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25), 0 0 0 16px rgba(163, 241, 164, 0); } }
@keyframes pl-gq { from { opacity: 0.2; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes pl-jaillit { 0% { opacity: 0; transform: translate(0, 0) scale(0.3) rotate(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1) rotate(var(--r)); } }
@media (prefers-reduced-motion: reduce) {
  .pl-reflet, .pl-doigt, .pl-fete, .pl-copeau, .pl-onde { display: none; }
  .pl-couche { transition: none; }
  .pl-decouvert .pl-x2, .pl-decouvert .pl-q, .pl-decouvert .pl-go { animation: none; }
}

/* Les deux compteurs en pastilles de 44 px. */
.pl-chiffres { margin-top: 14px; }
.pl-pils { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pl-pil { display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box; height: 44px; margin: 0; padding: 0 16px 0 7px; border: 0; border-radius: 999px; background: var(--pm-brique); color: var(--v2-texte); font-family: var(--v2-sans); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3); }
button.pl-pil { cursor: pointer; }
.pl-pil:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 3px; }
.pl-rond { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; }
.pl-ab { display: block; width: 100%; height: 100%; }
.pl-ab text { font-family: var(--v2-sans); font-size: 36px; font-weight: 900; fill: #06140C; }
.pl-n { padding-top: 3px; font-family: var(--pm-gros); font-size: 34px; font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; }
.pl-mot { font-size: 15px; font-weight: 700; line-height: 1.1; }
.pl-suite { display: none; }
.pl-flamme { background: rgba(255, 162, 21, 0.16); }
.pl-flamme-i { width: 20px; height: 20px; fill: var(--pl-safran); transform-origin: 50% 90%; }
.pl-semaine-w { display: none; }

/* Le plateau : 358 px, coins de 28 px, le pointillé du prototype sur un dégradé vert. */
.pl-plateau { container: plateau / inline-size; position: relative; display: flex; flex-direction: column; margin-top: 12px; border-radius: 28px; background: radial-gradient(circle, rgba(244, 241, 232, 0.07) 1.5px, transparent 1.7px) 0 0 / 24px 24px, radial-gradient(120% 80% at 50% 0%, #23603D 0%, #1B4A31 70%); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.3); }
.pl-entete { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 6px; padding: 14px 16px 0; }
.pl-h2 { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 30px; margin: 0; font-family: var(--pm-gros); font-size: 30px; font-weight: 400; line-height: 1; text-transform: uppercase; color: var(--v2-texte); }
.pl-h2 .pl-rayons { width: 16px; height: 28px; }
.pl-h2 .pl-rayons i { height: 9px; margin-top: -4.5px; }
.pl-h2 .pl-rayons.pl-g i:nth-child(1) { --r: rotate(-60deg) translateY(-10px); } .pl-h2 .pl-rayons.pl-g i:nth-child(2) { --r: rotate(-90deg) translateY(-10px); } .pl-h2 .pl-rayons.pl-g i:nth-child(3) { --r: rotate(-120deg) translateY(-10px); }
.pl-h2 .pl-rayons.pl-d i:nth-child(1) { --r: rotate(60deg) translateY(-10px); } .pl-h2 .pl-rayons.pl-d i:nth-child(2) { --r: rotate(90deg) translateY(-10px); } .pl-h2 .pl-rayons.pl-d i:nth-child(3) { --r: rotate(120deg) translateY(-10px); }
.pl-palier { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; background: var(--v2-menthe); color: var(--pl-encre); font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.pl-sur { position: absolute; top: 4px; right: 6px; min-width: 44px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 14px; background: none; color: var(--v2-texte); font-family: var(--pm-gros); font-size: 26px; font-weight: 400; line-height: 1; cursor: pointer; }
.pl-sur b { font-weight: 400; }
.pl-sur small { font-size: 18px; color: var(--pl-gris); }
.pl-sur:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 0; }
.pl-btns { display: flex; justify-content: center; gap: 8px; max-width: 100%; margin-top: 2px; }
.pl-btns .pr-point { width: 12px; height: 12px; border-radius: 3px; }

.pl-zone { position: relative; flex: 1 0 auto; }
.pl-route { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pl-base { fill: none; stroke: var(--pl-nuit); stroke-width: 28; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100 100; }
.pl-points { fill: none; stroke: rgba(244, 241, 232, 0.2); stroke-width: 4; stroke-dasharray: 0 13; stroke-linecap: round; }
.pl-avance { fill: none; stroke: var(--v2-menthe); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--av) 100; }
.pl-cases { margin: 0; padding: 0; list-style: none; }
/* Les cases : rondes de 46 px (le numéro en League Gothic 24) ; faites, menthe avec la coche ; les cartes en papier,
   44 × 56, penchées de 8° ; le bilan, rond safran de 58 px avec le trophée. L'étape actuelle est sous le personnage. */
.pl-c { position: absolute; left: var(--x); top: var(--y); z-index: 1; display: grid; place-items: center; box-sizing: border-box; width: 46px; height: 46px; margin: -23px 0 0 -23px; padding: 3px 0 0; border: 0; border-radius: 50%; background: var(--pl-case); color: var(--v2-texte); font-family: var(--pm-gros); font-size: 24px; font-weight: 400; line-height: 1; box-shadow: 0 5px 0 rgba(0, 0, 0, 0.3); transform: var(--t, none); cursor: pointer; }
.pl-c-in { display: grid; place-items: center; }
.pl-c .pl-ic { width: 24px; height: 24px; stroke-width: 3.2; }
.pl-c.pl-f { padding-top: 0; background: var(--v2-menthe); color: var(--pl-encre); box-shadow: 0 5px 0 var(--pl-menthe-f); }
.pl-c.pl-k { width: 44px; height: 56px; margin: -28px 0 0 -22px; border-radius: 9px; background: var(--v2-papier); color: var(--pl-encre); font-size: 30px; }
.pl-c.pl-k.pl-f { background: var(--v2-menthe); }
.pl-c.pl-tr { width: 58px; height: 58px; margin: -29px 0 0 -29px; padding-top: 0; background: var(--pl-safran); color: var(--pl-encre); box-shadow: 0 5px 0 var(--pl-safran-f); }
.pl-c.pl-tr svg { width: 30px; height: 30px; stroke-width: 2.4; }
.pl-c.pl-tr.pl-f { background: var(--v2-menthe); box-shadow: 0 5px 0 var(--pl-menthe-f); }
.pl-c.pl-ici { z-index: 6; width: 76px; height: 76px; margin: -38px 0 0 -38px; background: transparent; box-shadow: none; transform: none; }
.pl-c.pl-ici .pl-c-in { visibility: hidden; }
.pl-c:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 4px; }
.pl-c.pl-ici:focus-visible { outline-offset: 8px; }
.pl-bilan-t { display: none; }
/* Le personnage : 76 px, anneau menthe de 5 px. */
.pl-perso { position: absolute; left: var(--x); top: var(--y); z-index: 5; width: 76px; height: 76px; margin: -38px 0 0 -38px; overflow: hidden; border-radius: 50%; background: var(--v2-papier); box-shadow: 0 0 0 5px var(--v2-menthe), 0 7px 0 5px rgba(0, 0, 0, 0.25); pointer-events: none; }
.pl-perso svg { display: block; width: 95px; height: 95px; margin: -4px 0 0 -10px; } /* la boîte des personnages (-8 -8 136 136) : le dessin garde ses 84 px */
/* La bulle papier à l'ombre menthe : ÉTAPE n, le gain, le bouton ; la pointe vers le personnage. */
.pl-bulle { position: absolute; left: var(--x); top: var(--y); z-index: 6; box-sizing: border-box; width: var(--l); min-height: 68px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "e b"; align-items: center; column-gap: 10px; padding: 0 10px 0 14px; border-radius: 18px; background: var(--v2-papier); color: var(--pl-encre); box-shadow: 5px 6px 0 var(--v2-menthe); transform-origin: 0 50%; }
.pl-bulle::before { content: ""; position: absolute; top: 22px; border: 12px solid transparent; }
.pl-cote-g::before { left: -12px; border-left: 0; border-right: 13px solid var(--v2-papier); }
.pl-cote-d { transform-origin: 100% 50%; }
.pl-cote-d::before { right: -12px; border-right: 0; border-left: 13px solid var(--v2-papier); }
.pl-bulle-e { grid-area: e; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; margin: 0; }
.pl-bulle-n { font-family: var(--pm-gros); font-size: 26px; font-weight: 400; line-height: 0.95; text-transform: uppercase; white-space: nowrap; }
.pl-gain { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 2px; border-radius: 999px; background: var(--pl-encre); color: var(--v2-menthe); font-family: var(--pm-gros); font-size: 18px; line-height: 1; white-space: nowrap; }
.pl-gain .pl-piece { display: block; width: 20px; height: 20px; }
.pl-gain > b { font-weight: 400; }
.pl-gain > b:only-child { padding: 1px 0 0 7px; }
.pl-bulle-q { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pl-bulle-b { grid-area: b; display: inline-flex; align-items: center; justify-content: center; min-height: 46px; max-width: 124px; padding: 0 16px; border: 0; border-radius: 14px; background: var(--v2-menthe); color: var(--pl-encre); font-family: var(--v2-sans); font-size: 16px; font-weight: 800; line-height: 1.1; text-align: center; box-shadow: 0 4px 0 var(--pl-menthe-f); cursor: pointer; }
.pl-bulle-b:focus-visible { outline: var(--v2-focus) solid var(--pl-encre); outline-offset: 3px; }
/* Sous 330 px de plateau : le bouton sous ÉTAPE n, sur toute la largeur de la bulle (112 px de haut). */
.pl-bulle.pl-haute { min-height: 112px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "e" "b"; align-content: center; row-gap: 8px; padding: 10px 12px 12px 14px; }
.pl-bulle.pl-haute .pl-bulle-e { flex-direction: row; align-items: center; gap: 8px; }
.pl-bulle.pl-haute .pl-bulle-b { max-width: none; }
/* Le bandeau du retour, en bas du plateau. */
.pl-bandeau { position: absolute; left: 50%; top: var(--y); z-index: 7; display: inline-flex; align-items: center; gap: 8px; min-height: 34px; margin: 0; padding: 0 14px; border-radius: 999px; background: var(--v2-menthe); color: var(--pl-encre); font-size: 15px; font-weight: 800; white-space: nowrap; box-shadow: 0 4px 0 var(--pl-menthe-f); transform: translateX(-50%); opacity: 0; pointer-events: none; }
.pl-bandeau:empty { display: none; }
.pl-bandeau.pl-vu { opacity: 1; }
.pl-bandeau .pl-ic { width: 18px; height: 18px; stroke-width: 3; }
.pl-ferme { margin: 0 16px 16px; }

/* Tes jauges, Tes thèmes : des briques, le titre dedans. */
.pl-brique { margin-top: 14px; padding: 16px 16px 18px; border-radius: 22px; background: var(--pm-brique); box-shadow: var(--pm-ombre); }
.pl-h3 { margin: 0 0 14px; font-family: var(--pm-gros); font-size: 30px; font-weight: 400; line-height: 1; text-transform: uppercase; color: var(--v2-texte); }
.pl-jauges-l { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.pl-jauges .pr-jauge-n { font-size: 15px; }
.pl-barres { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; align-items: end; min-height: 92px; }
.pl-barre { display: flex; flex-direction: column; justify-content: flex-end; }
.pl-barre b { margin-bottom: 4px; font-family: var(--pm-gros); font-size: 22px; font-weight: 400; line-height: 1; text-align: center; color: var(--v2-texte); }
.pl-barre i { display: block; height: var(--h); border-radius: 6px 6px 3px 3px; background: var(--th); }
.pl-legende { display: grid; grid-template-columns: repeat(4, max-content); justify-content: space-between; gap: 0 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.pl-legende.pl-legende-deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pl-leg { display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; min-width: 44px; min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--v2-texte); font-family: var(--v2-sans); font-size: 13px; font-weight: 700; cursor: pointer; }
.pl-leg i { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--th); }
.pl-leg:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 2px; border-radius: 8px; }

/* Petits écrans : sous 360 px, les rayons du titre laissent la place aux pastilles. */
@media (max-width: 359px) {
  .pl-titre .pl-rayons { display: none; }
  .pl-titre { font-size: 54px; }
}

/* Ordinateur (ordinateur.png) : le titre à gauche, les pastilles à droite ; le plateau à gauche, le reste dans une
   colonne de 440 px ; les deux colonnes finissent à la même ligne (la brique des thèmes prend la hauteur qui reste). */
@media (min-width: 1000px) {
  body.pr-ecran .app { max-width: 1440px; padding-inline: 48px; }
  .ch-page.pl-page { padding-top: 40px; }
  .pl-tete { grid-template-columns: auto minmax(0, 1fr) auto auto; column-gap: 12px; margin-bottom: 26px; }
  .pl-titre { grid-column: 1; justify-content: flex-start; font-size: 72px; }
  .pl-titre .pl-rayons { display: none; }
  .pl-tete-q { grid-column: 3; grid-row: 1; margin: 0; }
  .pl-tete-b { grid-column: 4; grid-row: 1; display: flex; align-items: center; gap: 12px; }
  .pl-objets { padding: 6px; border-radius: 999px; background: var(--pm-brique); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3); }
  .pl-objet-l { display: block; }
  .pl-objets .pr-objet, .pl-objets .pr-objet[aria-pressed="false"] { background: var(--pl-nuit); box-shadow: none; }
  .pl-objets .pr-objet[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--v2-menthe); }
  .pl-plus-ic { display: grid; place-items: center; } .pl-plus-dos { display: none; }
  .pl-derniers { padding: 0 16px; }
  .pl-derniers-t { display: inline; }
  .pl-derniers-n { font-size: 28px; }
  .pl-grille { display: grid; grid-template-columns: minmax(0, 1fr) 440px; grid-template-rows: auto auto auto 1fr; column-gap: 24px; row-gap: 18px; }
  .pl-plateau { grid-column: 1; grid-row: 1 / span 4; margin: 0; }
  .pl-ticket, .pl-chiffres, .pl-jauges, .pl-themes { grid-column: 2; margin: 0; }
  .pl-themes { align-self: stretch; display: flex; flex-direction: column; }
  .pl-themes .pl-barres { flex: 1 0 auto; }
  /* Les compteurs dans une brique, la semaine dessous. */
  .pl-chiffres { padding: 16px 20px 18px; border-radius: 22px; background: var(--pm-brique); box-shadow: var(--pm-ombre); }
  .pl-pils { justify-content: space-between; }
  .pl-pil { height: auto; padding: 0; background: none; box-shadow: none; gap: 12px; }
  .pl-rond { width: 44px; height: 44px; }
  .pl-flamme-i { width: 26px; height: 26px; }
  .pl-n { font-size: 52px; }
  .pl-suite { display: block; }
  .pl-semaine-w { position: relative; display: block; margin-top: 16px; }
  .pl-semaine { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
  .pl-js { display: grid; place-items: center; height: 40px; border-radius: 10px; background: #123F28; color: var(--pl-gris); font-size: 14px; font-weight: 800; }
  .pl-js-joue { background: var(--th); color: var(--pl-encre); }
  .pl-js-auj { box-shadow: inset 0 0 0 3px var(--v2-menthe); color: var(--v2-texte); }
  .pl-js-joue.pl-js-auj { color: var(--pl-encre); }
  .pl-semaine-tampon { position: absolute; right: 6px; top: -20px; padding: 1px 8px 0; border-width: 3px; font-size: 20px; background: var(--pm-brique); transform: rotate(-6deg); }
  /* Le plateau : l'en tête sur une ligne, Ton chemin sans rayons ; des cases plus grandes (×1,3). */
  .pl-entete { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; padding: 28px 28px 0 30px; }
  .pl-h2 { font-size: 40px; }
  .pl-h2 .pl-rayons { display: none; }
  .pl-palier { min-height: 30px; padding: 0 14px; font-size: 14px; }
  .pl-sur { position: static; padding: 0 6px; font-size: 34px; }
  .pl-sur small { font-size: 22px; }
  .pl-btns { margin: 0 0 0 auto; }
  .pl-bilan-t { position: absolute; left: 50%; top: calc(100% + 14px); display: block; padding: 5px 10px 4px; border-radius: 999px; background: var(--v2-papier); color: var(--pl-encre); font-family: var(--v2-sans); font-size: 13px; font-weight: 900; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; transform: translateX(-50%); }
  .pl-bulle { min-height: 112px; grid-template-areas: "e b" "q b"; align-content: center; row-gap: 8px; column-gap: 18px; padding: 16px 20px 16px 22px; border-radius: 22px; box-shadow: 8px 8px 0 var(--v2-menthe); transform-origin: var(--pointe, 50%) 0; }
  .pl-bulle::before { top: -12px; left: calc(var(--pointe, 50%) - 12px); border: 12px solid transparent; border-top: 0; border-bottom: 13px solid var(--v2-papier); }
  .pl-cote-bas { transform-origin: var(--pointe, 50%) 100%; }
  .pl-cote-bas::before { top: auto; bottom: -12px; border-bottom: 0; border-top: 13px solid var(--v2-papier); }
  .pl-bulle-e { flex-direction: row; align-items: center; gap: 12px; }
  .pl-bulle-n { font-size: 32px; }
  .pl-gain { font-size: 22px; }
  .pl-gain .pl-piece { width: 24px; height: 24px; }
  .pl-bulle-q { grid-area: q; position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; font-family: var(--v2-carte); font-size: 19px; font-weight: 700; line-height: 1.15; }
  .pl-bulle-q p { margin: 0; }
  .pl-bulle-b { min-height: 52px; max-width: none; padding: 0 22px; font-size: 17px; }
  .pl-h3 { font-size: 34px; }
}

/* Les cases, le personnage et le trophée en plus grand (×1,3, ordinateur.png) quand le plateau fait 620 px au moins ; plus
   étroit (ordinateur de 1000 px), ils gardent la taille du téléphone et ne se touchent pas. */
@media (min-width: 1000px) {
  @container plateau (min-width: 620px) {
    .pl-c { width: 60px; height: 60px; margin: -30px 0 0 -30px; font-size: 31px; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.3); }
    .pl-c .pl-ic { width: 31px; height: 31px; }
    .pl-c.pl-f { box-shadow: 0 6px 0 var(--pl-menthe-f); }
    .pl-c.pl-k { width: 57px; height: 73px; margin: -36.5px 0 0 -28.5px; border-radius: 12px; font-size: 39px; }
    .pl-c.pl-tr { width: 76px; height: 76px; margin: -38px 0 0 -38px; box-shadow: 0 6px 0 var(--pl-safran-f); }
    .pl-c.pl-tr svg { width: 38px; height: 38px; }
    .pl-c.pl-ici { width: 106px; height: 106px; margin: -53px 0 0 -53px; }
    .pl-perso { width: 106px; height: 106px; margin: -53px 0 0 -53px; box-shadow: 0 0 0 6px var(--v2-menthe), 0 8px 0 6px rgba(0, 0, 0, 0.25); }
    .pl-perso svg { width: 134px; height: 134px; margin: -5px 0 0 -14px; }
  }
}

/* Les animations du prototype. À l'arrivée (une fois par ouverture de l'appli) : */
.pl-rayons i:nth-child(2) { --j: 1; } .pl-rayons i:nth-child(3) { --j: 2; }
.pl-joue .pl-rayons i { animation: pl-rayon 380ms cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: calc(160ms + var(--j, 0) * 60ms); }
.pl-joue .pl-titre-t { animation: pl-monte 420ms ease-out both; }
.pl-joue .pl-ticket { animation: pl-entre 520ms cubic-bezier(0.2, 0.9, 0.3, 1.15) 120ms both; }
.pl-joue .pl-x2 { animation: pl-tampon 520ms cubic-bezier(0.34, 1.56, 0.64, 1) 560ms both; }
.pl-joue .pl-pil { animation: pl-monte 380ms ease-out both; }
.pl-joue .pl-pil-serie { animation-delay: 80ms; }
.pl-joue .pl-flamme-i { animation: pl-flamme 520ms ease-in-out 700ms 3; }
.pl-joue .pl-plateau { animation: pl-monte 460ms ease-out 200ms both; }
.pl-joue .pl-base { animation: pl-trace 900ms cubic-bezier(0.4, 0, 0.2, 1) 380ms both; }
.pl-joue .pl-points { animation: pl-apparait 300ms ease 1100ms both; }
.pl-joue .pl-avance { animation: pl-progres 700ms cubic-bezier(0.4, 0, 0.2, 1) 900ms both; }
.pl-joue .pl-c:not(.pl-ici) { animation: pl-pop 380ms cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: calc(420ms + var(--i) * 45ms); }
.pl-joue .pl-perso { animation: pl-chute 560ms cubic-bezier(0.3, 1.4, 0.5, 1) 1080ms both; }
.pl-joue .pl-bulle { animation: pl-pop2 420ms cubic-bezier(0.34, 1.56, 0.64, 1) 1380ms both; }
.pl-joue .pl-sur { animation: pl-apparait 300ms ease 900ms both; }
.pl-joue .pl-palier { animation: pl-apparait 300ms ease 600ms both; }
/* Au retour d'une étape réussie : */
.pl-retour .pl-perso { animation: pl-saut 760ms cubic-bezier(0.45, 0, 0.3, 1) both; }
.pl-retour .pl-vient { animation: pl-pop 380ms cubic-bezier(0.34, 1.56, 0.64, 1) 260ms both; }
.pl-retour .pl-avance { animation: pl-avance 650ms cubic-bezier(0.4, 0, 0.2, 1) both; }
.pl-retour .pl-bulle { animation: pl-pop2 420ms cubic-bezier(0.34, 1.56, 0.64, 1) 1500ms both; }
.pl-bandeau.pl-vu { animation: pl-bandeau 420ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.pl-vol { position: fixed; z-index: 80; width: 28px; height: 28px; margin: -14px 0 0 -14px; opacity: 0; pointer-events: none; animation: pl-vol 900ms cubic-bezier(0.5, 0, 0.3, 1) both; }
.pl-vol svg { display: block; width: 28px; height: 28px; }
.pl-bosse { animation: pl-bosse 300ms ease-out; }
@keyframes pl-rayon { from { opacity: 0; transform: var(--r) scaleY(0); } to { opacity: 1; transform: var(--r) scaleY(1); } }
@keyframes pl-monte { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pl-apparait { from { opacity: 0; } to { opacity: 1; } }
@keyframes pl-entre { from { opacity: 0; transform: translateX(40px) rotate(3deg); } to { opacity: 1; transform: none; } }
@keyframes pl-tampon { 0% { opacity: 0; transform: scale(2) rotate(-28deg); } 70% { opacity: 1; transform: scale(0.9) rotate(-4deg); } 100% { opacity: 1; transform: rotate(-6deg); } }
@keyframes pl-flamme { 0%, 100% { transform: none; } 35% { transform: scale(1.15, 0.9) rotate(-5deg); } 70% { transform: scale(0.94, 1.1) rotate(4deg); } }
@keyframes pl-trace { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes pl-progres { from { stroke-dashoffset: var(--av); } to { stroke-dashoffset: 0; } }
@keyframes pl-avance { from { stroke-dasharray: var(--av0) 100; } }
@keyframes pl-pop { 0% { opacity: 0; transform: var(--t, translate(0)) scale(0); } 70% { opacity: 1; transform: var(--t, translate(0)) scale(1.14); } 100% { opacity: 1; transform: var(--t, translate(0)) scale(1); } }
@keyframes pl-pop2 { 0% { opacity: 0; transform: scale(0.5); } 70% { opacity: 1; transform: scale(1.05); } 100% { opacity: 1; transform: none; } }
@keyframes pl-chute { 0% { opacity: 0; transform: translateY(-60px); } 55% { opacity: 1; transform: translateY(5px); } 78% { transform: translateY(-4px); } 100% { opacity: 1; transform: none; } }
@keyframes pl-saut { 0% { transform: translate(var(--dx0), var(--dy0)); } 38% { transform: translate(calc(var(--dx0) * 0.5), calc(var(--dy0) - 32px)) scale(1.06); } 72% { transform: scale(1.06, 0.9); } 86% { transform: translateY(-8px); } 100% { transform: none; } }
@keyframes pl-vol { 0% { opacity: 0; transform: translate(0, 0) scale(0.4); } 12% { opacity: 1; transform: translate(0, -14px) scale(1); } 82% { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(0.85); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.5); } }
@keyframes pl-bandeau { 0% { opacity: 0; transform: translate(-50%, 14px) scale(0.85); } 100% { opacity: 1; transform: translate(-50%, 0); } }
@keyframes pl-bosse { 0%, 100% { transform: none; } 40% { transform: scale(1.2); } }
/* Mouvement réduit : aucune animation, l'état final tout de suite (le JavaScript ne les lance pas non plus). */
@media (prefers-reduced-motion: reduce) {
  .pl-page *, .pl-vol { animation: none !important; transition: none !important; }
}

/* Les objets appliqués là où ils apparaissent (classes posées sur <html> par src/objets.js). Le dos Pile ou face est
   le dos par défaut ; le dos Safran le remplace. */
.rg-paquet-classique .rg-paquet-dos, .pm-mini-dos, .ch-carte-dos { background: linear-gradient(135deg, var(--v2-camp-a) 50%, var(--v2-camp-b) 50%); color: var(--pr-encre); }
.rg-paquet-classique .rg-paquet-dos .rg-paquet-a, .rg-paquet-classique .rg-paquet-dos .rg-paquet-b, .rg-paquet-classique .rg-paquet-dos .rg-paquet-barre { color: var(--pr-encre); }
.ob-dos-safran :is(.rg-paquet-classique .rg-paquet-dos, .pm-mini-dos, .ch-carte-dos) { background: var(--v2-camp-a); box-shadow: inset 0 0 0 4px var(--pr-or-fonce); }
.ob-piece-gravee .pq-piece::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: 50%; box-shadow: inset 0 0 0 6px var(--pr-or); pointer-events: none; }
.ob-piece-gravee .tab-rond { box-shadow: inset 0 0 0 4px var(--pr-or), 0 0 0 6px var(--barre), 0 6px 0 6px rgba(0, 0, 0, 0.25); }
.ob-piece-gravee .tab-piece[aria-current="page"] .tab-rond { box-shadow: inset 0 0 0 4px var(--pr-or), 0 0 0 3px var(--v2-menthe), 0 0 0 9px var(--barre), 0 6px 0 9px rgba(0, 0, 0, 0.25); }
.ob-table-lilas .rg-ovale { background: var(--v2-camp-b); box-shadow: inset 0 0 0 2px rgba(6, 20, 12, 0.16), 0 6px 0 #6E4BC9; }
/* Sur la table lilas, les prénoms qui la touchent gardent leur contraste : une pastille du vert de la page. */
.ob-table-lilas .rg-siege-n { padding: 0 6px; border-radius: 8px; background: var(--v2-fond); }
/* Les autres objets de Ta collection (25 octobre), aux couleurs de leur dessin (src/objets.js). Sur un dos à motif, le
   texte de la carte à découvrir prend une pastille papier ; sur une table claire ou à motif, les prénoms aussi. */
.ob-dos-neutra :is(.rg-paquet-classique .rg-paquet-dos, .pm-mini-dos, .ch-carte-dos) { background: #0D3520; box-shadow: inset 0 0 0 4px var(--v2-menthe); color: var(--v2-papier); }
.ob-dos-neutra .rg-paquet-classique .rg-paquet-dos :is(.rg-paquet-a, .rg-paquet-b, .rg-paquet-barre) { color: var(--v2-papier); }
.ob-dos-themes :is(.rg-paquet-classique .rg-paquet-dos, .pm-mini-dos, .ch-carte-dos) { background: linear-gradient(90deg, #6DBBFE 0 14.3%, #48CEE7 0 28.6%, #FE9979 0 42.9%, #DBCF4A 0 57.1%, #52D8B4 0 71.4%, #FE709F 0 85.7%, #F892D3 0); }
.ob-dos-damier :is(.rg-paquet-classique .rg-paquet-dos, .pm-mini-dos, .ch-carte-dos) { background: repeating-conic-gradient(#0D3520 0 25%, #F4F1E8 0 50%) 0 0 / 12px 12px; }
.ob-dos-bulle :is(.rg-paquet-classique .rg-paquet-dos, .pm-mini-dos, .ch-carte-dos) { background: var(--v2-menthe); }
.ob-dos-constellation :is(.rg-paquet-classique .rg-paquet-dos, .pm-mini-dos, .ch-carte-dos) { background: radial-gradient(circle at 25% 20%, #F4F1E8 0 1.5px, transparent 2px) 0 0 / 18px 18px, radial-gradient(circle at 70% 65%, #F4F1E8 0 1px, transparent 1.5px) 0 0 / 14px 14px, #123B28; color: var(--v2-papier); }
.ob-dos-constellation .rg-paquet-classique .rg-paquet-dos :is(.rg-paquet-a, .rg-paquet-b, .rg-paquet-barre) { color: var(--v2-papier); }
.ob-dos-tampon :is(.rg-paquet-classique .rg-paquet-dos, .pm-mini-dos, .ch-carte-dos) { background: #E6DFCB; box-shadow: inset 0 0 0 4px #E6DFCB, inset 0 0 0 7px var(--v2-encre); }
.ob-dos-ancienne :is(.rg-paquet-classique .rg-paquet-dos, .pm-mini-dos, .ch-carte-dos) { background: #E9D9B0; box-shadow: inset 0 0 0 4px #B08A4A; }
:is(.ob-dos-themes, .ob-dos-damier) .ch-carte-dos :is(.ch-point-q, .ch-carte-dos-t) { padding: 2px 12px; border-radius: 12px; background: var(--v2-papier); color: var(--v2-encre); }
:is(.ob-dos-themes, .ob-dos-damier) .pm-mini-dos { color: transparent; }
.ob-piece-argent .pq-piece::after, .ob-piece-bronze .pq-piece::after, .ob-piece-menthe .pq-piece::after, .ob-piece-encre .pq-piece::after, .ob-piece-themes .pq-piece::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: 50%; box-shadow: inset 0 0 0 6px var(--ob-anneau); pointer-events: none; }
.ob-piece-argent { --ob-anneau: #B5BEC6; } .ob-piece-bronze { --ob-anneau: #B07A42; } .ob-piece-menthe { --ob-anneau: #78D27B; } .ob-piece-encre { --ob-anneau: #E9C46A; } .ob-piece-themes { --ob-anneau: #FE709F; }
.ob-piece-encre .pq-piece::after { box-shadow: inset 0 0 0 6px #123B28, inset 0 0 0 8px var(--ob-anneau); }
.ob-piece-themes .pq-piece::after { box-shadow: none; background: conic-gradient(#6DBBFE 0 14.3%, #48CEE7 0 28.6%, #FE9979 0 42.9%, #DBCF4A 0 57.1%, #52D8B4 0 71.4%, #FE709F 0 85.7%, #F892D3 0); -webkit-mask: radial-gradient(circle, transparent calc(50% - 6px), #000 calc(50% - 5px)); mask: radial-gradient(circle, transparent calc(50% - 6px), #000 calc(50% - 5px)); }
:is(.ob-piece-argent, .ob-piece-bronze, .ob-piece-menthe, .ob-piece-encre, .ob-piece-themes) .tab-rond { box-shadow: inset 0 0 0 4px var(--ob-anneau), 0 0 0 6px var(--barre), 0 6px 0 6px rgba(0, 0, 0, 0.25); }
:is(.ob-piece-argent, .ob-piece-bronze, .ob-piece-menthe, .ob-piece-encre, .ob-piece-themes) .tab-piece[aria-current="page"] .tab-rond { box-shadow: inset 0 0 0 4px var(--ob-anneau), 0 0 0 3px var(--v2-menthe), 0 0 0 9px var(--barre), 0 6px 0 9px rgba(0, 0, 0, 0.25); }
.ob-table-carreaux .rg-ovale { background: repeating-linear-gradient(90deg, rgba(224, 70, 58, 0.55) 0 11px, transparent 11px 22px), repeating-linear-gradient(0deg, rgba(224, 70, 58, 0.55) 0 8px, transparent 8px 16px), #F7F2EA; box-shadow: inset 0 0 0 2px rgba(6, 20, 12, 0.16), 0 6px 0 #B8322B; }
.ob-table-bois .rg-ovale { background: repeating-linear-gradient(8deg, #E2B57E 0 9px, #D7A86F 9px 12px); box-shadow: inset 0 0 0 2px rgba(6, 20, 12, 0.16), 0 6px 0 #B9844E; }
.ob-table-marbre .rg-ovale { background: linear-gradient(125deg, #F3F0EA 0 40%, #E2DDD3 41%, #F3F0EA 43% 70%, #DCD6CA 71%, #F3F0EA 73%); box-shadow: inset 0 0 0 2px rgba(6, 20, 12, 0.16), 0 6px 0 #C9C3B6; }
.ob-table-nuit .rg-ovale { background: radial-gradient(circle at 50% 50%, rgba(255, 162, 21, 0.14) 0 30%, transparent 31%), #2A2150; box-shadow: inset 0 0 0 2px rgba(244, 241, 232, 0.16), 0 6px 0 #1A1430; }
:is(.ob-table-carreaux, .ob-table-bois, .ob-table-marbre, .ob-table-nuit) .rg-siege-n { padding: 0 6px; border-radius: 8px; background: var(--v2-fond); }

@media (prefers-reduced-motion: reduce) {
  .pr-objet .pm-tampon { animation: none; }
}

/* ---------- Mes données dans la feuille Réglages (demande de Jules du 12 octobre au soir, après M) ----------
   Ce qu'avait la page Réglages, au style de la feuille : le groupe « Mes données » (son étiquette « Sur ce téléphone »,
   trois actions en lignes à tuile sur le vert foncé des boutons de langue), puis « Bon à savoir » et « À propos » en
   briques repliées (le « + » tourne en croix quand elles s'ouvrent). La boîte « Tout effacer » reste celle de M. */
.rf-ic-donnees, .rf-ic-menthe { background: var(--v2-menthe); }
.rf-ic-bon, .rf-ic-creme { background: var(--v2-texte); }
.rf-ic-apropos { background: var(--v2-camp-b); }
.rf-ic-rose { background: var(--pm-rose); }
.rf-etiqs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.rf-etiqs .rf-etat { display: inline-flex; align-items: center; gap: 6px; margin-left: 0; }
.rf-etat svg { width: 15px; height: 15px; flex: none; }
.rf-etat.rf-etat-creme { background: var(--v2-texte); color: var(--v2-encre); }
.rf-donnees { gap: 16px; }
.rf-donnees:focus { outline: none; }
.rf-actions { display: grid; gap: 8px; }
.rf-action { display: flex; align-items: center; gap: 12px; box-sizing: border-box; width: 100%; min-height: 56px; margin: 0; padding: 8px 12px 8px 8px; border: 0; border-radius: 16px; background: #123F28; color: var(--v2-texte); font: inherit; text-align: left; cursor: pointer; }
.rf-action .rf-nom { min-width: 0; }
.rf-action .rf-fleche { margin-left: auto; }
.rf-action:focus-visible, .rf-fichier:has(input:focus-visible) { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 3px; }
/* La boîte « Tout effacer » ouverte au doigt ou à la souris : pas d'anneau sur « Annuler » tant qu'aucune touche n'est pressée. */
.v2-dialogue.rf-sans-anneau, .v2-dialogue.rf-sans-anneau :focus-visible { outline: none; }
.rf-action:active { transform: translateY(2px); }
.rf-message { margin: 0; padding: 12px 14px; border-radius: 14px; background: #123F28; color: var(--v2-texte); font-family: var(--v2-sans); font-size: 15px; font-weight: 700; line-height: 1.35; }
.rf-message.rf-alerte { background: #FF9C86; color: var(--v2-encre); }
.rf-confirme { display: grid; gap: 12px; }
.rf-langue.rf-oui { background: var(--v2-menthe); color: var(--v2-encre); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); }
.rf-repli { display: block; }
.rf-repli > summary { min-height: 44px; list-style: none; cursor: pointer; border-radius: 12px; }
.rf-repli > summary::-webkit-details-marker { display: none; }
.rf-repli > summary:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 6px; }
.rf-repli > :not(summary) { margin-top: 16px; }
.rf-repli > .rf-etiqs + .rf-action { margin-top: 12px; }
.rf-plus { display: grid; flex: none; place-items: center; width: 24px; margin-left: auto; color: var(--v2-menthe); }
.rf-plus svg { width: 22px; height: 22px; transition: transform 0.2s; }
.rf-repli[open] .rf-plus svg { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
  .rf-plus svg { transition: none; }
  .rf-action:active { transform: none; }
}

/* ---------- U, finitions (message du 15 octobre, après R2) ----------
   1. Les titres de page au même style que TIRAGE, PROGRÈS et CATÉGORIES : League Gothic, majuscules par le style (le
   texte reste lu normalement), sans point final : les réglages Seul et À table, Jouer à plusieurs et le salon (avec ses
   intertitres), les feuilles (Réglages, les thèmes, les réglages du salon), le bilan seul, la 404. */
.rg-titre, .sa-titre, .v2-titre, .jm-t, .rg-f-titre, .sa-h2, .nb-h { font-family: var(--pm-gros); font-weight: 400; letter-spacing: 0.005em; text-transform: uppercase; color: var(--v2-texte); overflow-wrap: anywhere; }
.rg-titre, .sa-titre, .v2-titre { font-size: 58px; line-height: 0.9; }
.sa-titre-salon { font-size: 58px; }
.jm-t, .rg-f-titre { font-size: 44px; line-height: 0.92; }
.sa-h2 { font-size: 30px; line-height: 1; }
.nb-h { font-size: 34px; line-height: 1; }
@media (min-width: 900px) {
  .sa-titre { font-size: 88px; }
  .sa-titre-salon { font-size: 64px; }
}
/* 2. Plus de petites phrases sous les titres : de courtes étiquettes (Seul : 60 s pour préparer, 60 s pour parler ;
   À table : l'Arbitre passe le téléphone, noms d'exemple ; le salon : deux débatteurs, un arbitre, les jurés). */
.rg-etiqs { margin-top: 12px; }
.rg-etiqs-c { justify-content: center; margin-top: var(--v2-e8); }
.sa-repartition.pm-etiqs { justify-content: center; margin: 10px 0 0; }
@media (min-width: 900px) { .sa-lancer .sa-repartition.pm-etiqs { justify-content: flex-start; } }
/* 3. Instrument Serif seulement dans le logo et le monogramme A/B. Les titres de section de l'Actu et de l'article
   passent en League Gothic majuscules ; le chiffre des tuiles (« 41 000 habitants ») et le numéro des sources en League
   Gothic ; les thèmes et les sujets des cartes de l'Actu en erreur, et le résumé d'une thèse, en Archivo Narrow, la
   police des cartes. Le bas de L'histoire (la méthode, les mots, aller plus loin) attend le choix de frise de Jules :
   il garde la sienne. */
.ac-h2, .ap-h2, .v2-intertitre:not(#h-methode-t, #h-mots-t, #h-loin-t) { font-family: var(--pm-gros); font-size: 34px; font-weight: 400; line-height: 1; letter-spacing: 0.005em; text-transform: uppercase; }
.ac-tuile-n, .ap-tuile-n, .ap-source-num { font-family: var(--pm-gros); font-weight: 400; }
.ac-carte-theme .ac-titre { font-family: var(--v2-carte); font-size: 24px; font-weight: 700; line-height: 1.1; }
.ac-sujet { font-family: var(--v2-carte); font-weight: 600; }
.ap-these-resume { font-family: var(--v2-carte); }
.sa-repartition .pm-etiq { padding-inline: 9px; letter-spacing: 0.03em; }
/* 4. Plus de filets fins de 1 px : les séparateurs deviennent de l'espace ou des briques ; les boutons ronds du jeu
   (retour, score, pause), les croix de fermeture, les pastilles de thème et les boutons secondaires sont remplis, sans
   contour, comme les briques. */
.pm-tete .pm-rond, .pm-tete .jeu-ic, .sheet .xbtn.pm-x { border: 0; background-clip: border-box; }
.sheet .xbtn:not(.pm-x), .v2-page .xbtn { width: 44px; min-width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #1B4A31; color: var(--v2-texte); }
.pq-pastille { border: 0; background: #294C38; }
.ac-pastille { border: 0; background: #294C38; }
.v2-bouton-second { border: 0; background: #294C38; }
.sheet { border-top: 0; }
.rg-debats { display: grid; gap: 8px; }
.rg-debat { border-top: 0; padding: 12px 14px; border-radius: 16px; background: var(--pm-brique); }
.rg-demi:not(.rg-demi-on) { box-shadow: none; background: #244834; }
.rg-tuile.rg-sombre { box-shadow: 0 5px 0 rgba(0, 0, 0, 0.45); }
button.rg-tuile.rg-sombre:active { box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45); }
.rg-paquet-c, .rg-sombre .rg-paquet-c { box-shadow: none; background: #0F3A23; }
.ac-aussi-l { display: grid; gap: 8px; border-top: 0; }
.ac-aussi-l li { border-bottom: 0; border-radius: 14px; background: #1D422E; padding-inline: 12px; }
.ac-sujets { display: grid; gap: 6px; }
.ac-sujet { border-top: 0; border-radius: 12px; background: #E7E6DC; }
.ap-source { border: 0; background: #E7E6DC; }
.ap-debat { border-top: 0; }
.cj-axes, .cj-axes li, .cj-f-axes li, .cj-f-faits li { border: 0; }
/* Les titres de la pièce et d'avant l'analyse (« Ce sujet est à toi », « Qu'as tu réussi ? ») suivent le même style. */
.nb-titre { text-transform: uppercase; letter-spacing: 0.005em; }
.ic-planche-fond { border: 0; background: rgba(244, 241, 232, 0.06); }
/* 5. Cibles de 44 px au moins : la croix de la recherche (« Effacer le mot », « Fermer la recherche »), les puces de
   thème des résultats, les rubriques de l'Actu ; le crédit « CC0 » des photos garde sa taille, sa zone de toucher
   grandit. */
.rc-effacer { width: 44px; height: 44px; }
.rc-effacer::after { content: none; }
.rc-puce { min-height: 44px; border-radius: 22px; }
.rc-puce::after { content: none; }
:is(.ac-k, .cat-gt) .gt-rub { min-width: 44px; justify-content: center; }
.ap-credit a { position: relative; display: inline-block; }
.ap-credit a::after { content: ""; position: absolute; inset: -14px -10px; }
/* 6. Textes lisibles sur la carte de l'accueil : le thème et les mots OUI et NON jamais sous 11 px ; le numéro de carte
   aussi, et il disparaît quand la carte est trop petite pour lui (à 320 px). Sur ordinateur, les sous textes des tuiles
   de mode passent à 13 px. */
.pq-theme { font-size: max(11px, 3.6cqw); letter-spacing: 0.08em; }
.pq-mot-camp { font-size: max(11px, 4.2cqw); letter-spacing: 0.08em; }
.pq-num { font-size: max(11px, 2.9cqw); }
@container (max-width: 230px) { .pq-num { display: none; } }
.pq-tuile-d { font-size: 13px; }
/* 7. Progrès, au retour d'une étape : la nouvelle étape glisse depuis la droite sans élargir la page ; le chemin coupe
   ce qui dépasse sur les côtés (le contour du focus garde sa place). */
.pr-chemin { overflow-x: clip; overflow-clip-margin: 6px; }

/* ---------- W, le débat du jour à thème (16 octobre) ---------- */
/* L'étiquette du thème du jour : la pastille et le nom court, à côté de « Débat du jour ». */
.pr-etiq-theme { display: inline-flex; align-items: center; gap: 7px; background: var(--pr-creme); color: var(--pr-encre); }
.pr-etiq-theme .pr-point { width: 12px; height: 12px; }
/* La semaine : chaque jour porte la pastille de son thème ; un jour joué garde sa pièce par dessus. */
.pr-js-o { position: relative; }
.pr-js-th { position: absolute; inset: 0; margin: auto; width: 12px; height: 12px; }
.pr-js-joue .pr-js-o { background: var(--pr-etape); }
.pr-js-o .pr-piece { position: absolute; inset: 0; margin: auto; }
/* Le tampon « Semaine complète » : au dessus des jours, penché comme celui du débat du jour ; la ligne gagne la
   place qu'il lui faut, pour ne couvrir ni les lettres des jours ni la série. */
.pr-semaine-l { position: relative; }
.pr-semaine-ok { padding-top: 34px; }
.pr-semaine-tampon { position: absolute; top: 2px; right: 12px; transform: rotate(-4deg); color: var(--pm-brique); background: var(--pr-creme); font-size: 24px; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25); }

/* ---------- L'histoire : la page (message X du 16 octobre, puis lot 6 du 1er novembre) ----------
   La frise de six moments a laissé place à la manche (section « L'histoire, une manche », plus bas). Restent ici la
   page, son en tête et la suite : la méthode, les mots et « Aller plus loin » en briques (planche « X, L'histoire, la
   méthode et les mots »). Ordinateur : une colonne centrée de 680 px au plus. Code : src/histoire.js et src/pages.js
   (storyHTML). */
.hx { --hx-ligne: #245A3D; padding-top: calc(18px + env(safe-area-inset-top, 0px)); }
body.hx-ecran .app { padding-top: 0; }
@media (min-width: 900px) { body.hx-ecran .app { max-width: 680px; } .hx { padding-top: 40px; } }
.hx-en-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.hx-h1, .hx-h2 { margin: 0; font-family: var(--pm-gros); font-size: 38px; font-weight: 400; line-height: 1; text-transform: uppercase; color: var(--v2-texte); }
.hx-compte { flex: none; }
/* La suite de la page : la méthode, les mots, aller plus loin. */
.hx-suite { display: grid; gap: 32px; padding-top: 36px; }
.hx-section { display: grid; gap: 12px; }
.hx-methode { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hx-etape { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 60px; padding: 8px 16px; box-sizing: border-box; border-radius: 18px; background: var(--pm-brique); box-shadow: 0 5px 0 rgba(0, 0, 0, 0.3); }
.hx-etape-n { font-family: var(--pm-gros); font-size: 40px; line-height: 1; color: var(--v2-menthe); }
.hx-etape-t { font-family: var(--v2-sans); font-size: 19px; font-weight: 800; line-height: 1.2; color: var(--v2-texte); }
.hx-etape-m { background: var(--v2-menthe); }
.hx-etape-m .hx-etape-n, .hx-etape-m .hx-etape-t { color: var(--pm-encre); }
.hx-pastille { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--pm-encre); font-family: var(--pm-gros); font-size: 20px; line-height: 1; }
.hx-pastille-a { background: var(--v2-camp-a); } .hx-pastille-b { background: var(--v2-camp-b); }
.hx-para { margin: 4px 0 0; font-family: var(--v2-carte); font-size: 17px; font-weight: 700; line-height: 1.45; color: var(--v2-texte); }
/* Les mots : des briques repliables de 52 px, 8 px entre elles, aucun trait. */
.hx-etiqs { margin: 4px 0 0; }
.hx-lexique { display: grid; gap: 8px; margin: 0 0 12px; border: 0; }
.v2-mot.hx-mot-b { border: 0; border-radius: 16px; background: var(--pm-brique); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3); }
.v2-mot.hx-mot-b > summary { min-height: 52px; padding: 0 12px 0 16px; font-family: var(--v2-sans); font-size: 16px; font-weight: 800; color: var(--v2-texte); border-radius: 16px; }
.v2-mot.hx-mot-b > summary::after { content: none; }
.v2-mot.hx-mot-b > summary:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 3px; }
.hx-mot-plus { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--hx-ligne); color: var(--v2-texte); transition: transform 200ms ease, background-color 200ms ease; }
.hx-mot-plus svg { width: 14px; height: 14px; }
.v2-mot.hx-mot-b[open] .hx-mot-plus { transform: rotate(45deg); background: var(--v2-menthe); color: var(--pm-encre); }
.v2-mot.hx-mot-b > p { margin: 0; padding: 0 16px 14px; font-family: var(--v2-carte); font-size: 16px; font-weight: 700; line-height: 1.45; color: var(--v2-texte); }
/* Aller plus loin : le bouton menthe sur toute la largeur, puis deux briques côte à côte. */
.hx-loin { display: grid; gap: 10px; }
.hx-loin .pm-btn { width: 100%; }
.hx-loin-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (prefers-reduced-motion: reduce) {
  .hx-mot-plus { transition: none; }
}

/* ---------- L'histoire, une manche (lot 6, 1er novembre) ----------
   `docs/messages/L'histoire, une manche` : la planche et les valeurs de la constante CSS de `maquette.mjs` font foi.
   La carte N° 000 : le composant de la pile de l'accueil, penché de -2°, 318 × 372 px au plus, sans geste ; deux tuiles
   de camp de 96 px au moins (A safran, B lilas), la coche d'un camp lu (rond encre, coche menthe, 30 px).
   Code : src/histoire.js. */
.hz { display: flex; flex-direction: column; gap: 16px; }
.hz-scene { position: relative; width: min(318px, 100%); aspect-ratio: 318 / 372; margin: 6px auto 8px; }
.hz-scene .pq-carte { transform: rotate(-2deg); box-shadow: 0 10px 0 rgba(0, 0, 0, 0.28); touch-action: auto; }
.hz-scene .pq-mot-camp { font-size: 13px; }
.hz-scene .pq-num { top: 6cqh; font-size: 13px; }
.hz-scene .pq-theme { font-size: 13px; }
.hz-scene .pq-q { font-size: 44px; line-height: 1; }
.hz-camps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hz-camp { position: relative; display: grid; align-content: start; gap: 4px; min-height: 96px; padding: 12px 14px; border: 0; border-radius: 18px; color: var(--v2-encre); font-family: var(--v2-sans); text-align: left; box-shadow: 0 5px 0 rgba(0, 0, 0, 0.3); cursor: pointer; }
.hz-camp-a { background: var(--v2-camp-a); }
.hz-camp-b { background: var(--v2-camp-b); }
.hz-camp b { font-size: 34px; font-weight: 900; line-height: 0.8; }
.hz-camp strong { font-family: var(--pm-gros); font-size: 30px; font-weight: 400; line-height: 0.95; text-transform: uppercase; }
.hz-camp span { justify-self: start; padding: 3px 9px 2px; border-radius: 999px; background: var(--v2-encre); color: var(--v2-papier); font-size: 13px; font-weight: 800; }
.hz-camp:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 3px; }
.hz-camp:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3); }
.hz-lu { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--v2-encre); color: var(--v2-menthe); }
.hz-lu svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .hz-camp:active { transform: none; } }
/* La carte d'un camp : une feuille plein écran au fond de l'appli (une boîte centrée de 560 px au plus sur ordinateur),
   qui reprend la carte d'un débatteur en partie : la barre (fermer de 48 px, la question), la bande du camp (40 px), la
   thèse à 44 px, « Trois faits » et leurs cadres (Archivo Narrow 700, 18 px, fond #E6DFCB) avec leurs pastilles ; le
   bouton du bas de 56 px. Elle monte en 220 ms, sans mouvement en mouvement réduit. */
.sheet-wrap:has(.hz-feuille) { padding-top: 0; align-items: stretch; background: var(--v2-fond); }
.sheet:has(.hz-feuille) { max-width: none; max-height: none; height: 100%; padding: 0; border: 0; border-radius: 0; background: var(--v2-fond); }
.hz-feuille { display: flex; flex-direction: column; gap: 14px; box-sizing: border-box; min-height: 100%; padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(18px + env(safe-area-inset-bottom, 0px)); color: var(--v2-texte); animation: hz-monte 220ms ease-out both; }
@keyframes hz-monte { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.hz-barre { display: flex; align-items: center; gap: 10px; }
.hz-x { flex: none; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--pm-brique); color: var(--v2-texte); cursor: pointer; }
.hz-x svg { width: 20px; height: 20px; }
.hz-x:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 3px; }
.hz-barre-t { margin: 0; font-family: var(--pm-gros); font-size: 24px; font-weight: 400; line-height: 1; text-transform: uppercase; color: var(--v2-texte); }
.hz-barre-t:focus { outline: none; }
.hz-carte { flex: 0 0 auto; display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: var(--v2-papier); color: var(--v2-encre); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.3); }
.hz-carte-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 14px 8px; }
.hz-carte-a .hz-carte-h { background: var(--v2-camp-a); }
.hz-carte-b .hz-carte-h { background: var(--v2-camp-b); }
.hz-carte-h b { font-family: var(--pm-gros); font-size: 40px; font-weight: 400; line-height: 1; text-transform: uppercase; }
.hz-carte-h span { font-size: 13px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.hz-corps { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; }
.hz-these { margin: 2px 0 6px; font-family: var(--pm-gros); font-size: 44px; font-weight: 400; line-height: 1; text-transform: uppercase; }
.hz-h { margin: 4px 0 0; font-family: var(--pm-gros); font-size: 22px; font-weight: 400; line-height: 1; text-transform: uppercase; }
.hz-faits { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.hz-faits li { padding: 10px 12px; border-radius: 12px; background: #E6DFCB; font-family: var(--v2-carte); font-size: 18px; font-weight: 700; line-height: 1.3; }
.hz-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
.hz-ligne em { padding: 2px 9px; border-radius: 999px; background: var(--v2-encre); color: var(--v2-papier); font-family: var(--v2-sans); font-size: 13px; font-style: normal; font-weight: 800; }
.hz-sticker { padding: 4px 9px 3px; border: 2.5px solid var(--v2-encre); border-radius: 8px; background: var(--v2-menthe); box-shadow: inset 0 0 0 2px var(--v2-menthe), inset 0 0 0 3.5px var(--v2-encre); font-family: var(--v2-sans); font-size: 13px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; transform: rotate(5deg); }
.hz-suite { margin-top: auto; min-height: 56px; border: 0; border-radius: 16px; font-family: var(--v2-sans); font-size: 18px; font-weight: 800; color: var(--v2-encre); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35); cursor: pointer; }
.hz-suite-a { background: var(--v2-camp-a); }
.hz-suite-b { background: var(--v2-camp-b); }
.hz-suite-m { background: var(--v2-menthe); }
.hz-suite:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 3px; }
.hz-suite:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }
@media (min-width: 900px) {
  .sheet-wrap:has(.hz-feuille) { align-items: center; padding: 24px; background: rgba(4, 20, 11, 0.62); }
  .sheet:has(.hz-feuille) { max-width: 560px; height: auto; max-height: 100%; border-radius: 24px; }
  .hz-feuille { min-height: 0; padding: 20px; }
}
@media (prefers-reduced-motion: reduce) { .hz-feuille { animation: none; } .hz-suite:active { transform: none; } }
/* « Qui a raison ? Les deux. » : une brique sous les tuiles, quand les deux camps sont lus. Le titre à 44 px, le tampon
   menthe « Les deux » (double filet, -6°), le logo avec ses deux camps en pastilles, le bloc menthe « Demain », le
   bouton encre « Lancer une partie ». */
.hz-verdict { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; padding: 18px 16px; border-radius: 22px; background: var(--pm-brique); box-shadow: 0 5px 0 rgba(0, 0, 0, 0.3); scroll-margin-top: 14px; }
.hz-q { margin: 0; font-family: var(--pm-gros); font-size: 44px; font-weight: 400; line-height: 0.95; text-transform: uppercase; color: var(--v2-texte); }
.hz-q:focus { outline: none; }
.hz-deux { align-self: flex-start; margin-top: -6px; padding: 6px 14px 4px; border: 3px solid var(--v2-encre); border-radius: 10px; background: var(--v2-menthe); color: var(--v2-encre); box-shadow: inset 0 0 0 2.5px var(--v2-menthe), inset 0 0 0 4.5px var(--v2-encre); font-family: var(--pm-gros); font-size: 40px; line-height: 1; text-transform: uppercase; transform: rotate(-6deg); }
.hz-logo { display: grid; gap: 4px; padding-top: 4px; }
.hz-logo svg { display: block; width: 100%; height: auto; }
/* Les deux pastilles sous « Neutra » et sous « Débat » ; sur un écran étroit, la seconde passe à la ligne. */
.hz-pins { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 0; padding: 0 6% 0 4%; }
.hz-pin { padding: 4px 10px 3px; border-radius: 999px; color: var(--v2-encre); font-size: 13px; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.hz-pin-a { background: var(--v2-camp-a); transform: rotate(-3deg); }
.hz-pin-b { margin-left: auto; background: var(--v2-camp-b); transform: rotate(3deg); }
.hz-demain { display: grid; gap: 8px; padding: 14px; border-radius: 16px; background: var(--v2-menthe); color: var(--v2-encre); }
.hz-demain b { font-family: var(--pm-gros); font-size: 26px; font-weight: 400; line-height: 1; text-transform: uppercase; color: #1E6B3A; }
.hz-demain p { margin: 0; font-family: var(--v2-carte); font-size: 17px; font-weight: 700; line-height: 1.4; }
.hz-lancer { min-height: 56px; border: 0; border-radius: 16px; background: var(--v2-encre); color: var(--v2-papier); font-family: var(--v2-sans); font-size: 18px; font-weight: 800; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35); cursor: pointer; }
.hz-lancer:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 3px; }
.hz-lancer:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }
@media (prefers-reduced-motion: reduce) { .hz-lancer:active { transform: none; } }

/* ---------- Débat libre (21 octobre, design validé par Jules) ----------
   Une pile de cartes de sujets sans camps ni chrono (src/modes/libre.js). La carte est toute de la couleur de son thème,
   coins de 22 px, bord en relief du ton sombre du thème, légèrement penchée ; la feuille (entête, tampon du format,
   texte, bulle de la question, symbole) au dessus d'une tranche basse de hauteur fixe pour la marque. Le CSS de la carte
   est celui du message, recopié tel quel ; autour, la page, la pile (deux dos décalés), la relance et les boutons. */
.dl { --encre: #0D3520; --logo: var(--v2-serif); --titre: var(--v2-gros); --etroit: var(--v2-carte); --dl-bord: calc(8px + var(--gutter)); font-family: var(--v2-sans); display: flex; flex-direction: column; align-items: center; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.dl > .v2-marque { align-self: stretch; }
.dl-th-geo { --c: var(--v2-th-geo); --ill-m: #427F9A; }
.dl-th-tech { --c: var(--v2-th-tech); --ill-m: #2D898D; }
.dl-th-soc { --c: var(--v2-th-soc); --ill-m: #926C51; }
.dl-th-eco { --c: var(--v2-th-eco); --ill-m: #7E8A37; }
.dl-th-sav { --c: var(--v2-th-sav); --ill-m: #338F71; }
.dl-th-sport { --c: var(--v2-th-sport); --ill-m: #925566; }
.dl-th-mode { --c: var(--v2-th-mode); --ill-m: #8E6882; }
.dl-th-spice { --c: var(--v2-th-spice); --ill-m: #92574F; }

/* Le CSS de la carte du message, tel quel, limité au mode (ses classes .rg, .nb, .item… existent ailleurs). */
.dl .carte{--l:320px;width:var(--l);height:calc(var(--l)*1.4);border-radius:22px;background:var(--c);padding:10px 10px 0;
  display:grid;grid-template-rows:minmax(0,1fr) calc(var(--l)*.115);
  box-shadow:0 6px 0 var(--ill-m),0 20px 34px rgba(0,0,0,.35);transform:rotate(-1.5deg);color:var(--encre)}
.dl .feuille{--ill-h:var(--creme);background:var(--c);border-radius:14px;padding:15px 16px 10px;display:grid;grid-template-rows:auto auto auto minmax(0,1fr);gap:9px;min-height:0;overflow:hidden}
.dl .tranche{display:flex;align-items:center;justify-content:center;gap:6px}
.dl .tranche i{font-family:var(--logo);font-style:italic;font-weight:700;font-size:21px;line-height:1}
.dl .tranche b{font-weight:800;font-size:13px;line-height:1;background:var(--encre);color:var(--creme);padding:4px 7px 3px;border-radius:5px;transform:rotate(-3deg)}
.dl .entete{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.dl .theme{font-weight:800;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;line-height:1.3}
.dl .no{font-weight:800;font-size:13px;letter-spacing:1px;white-space:nowrap}
.dl .tamp{justify-self:start;font-family:var(--titre);font-size:calc(var(--l)*.085);line-height:1.08;text-transform:uppercase;color:var(--creme);background:var(--encre);padding:8px 13px 5px;border-radius:12px;
  box-shadow:inset 0 0 0 4px var(--encre),inset 0 0 0 6px var(--creme);transform:rotate(-4deg);transform-origin:left center;white-space:nowrap}
.dl .texte{display:flex;flex-direction:column;gap:8px;min-height:0}
.dl .grand{font-family:var(--etroit);font-weight:700;font-size:var(--fs,calc(var(--l)*.1));line-height:1.06;text-wrap:balance}
.dl .moyen{font-family:var(--etroit);font-weight:700;font-size:var(--fs,calc(var(--l)*.072));line-height:1.12;text-wrap:pretty}
.dl .nb{font-family:var(--titre);font-size:var(--fn,calc(var(--l)*.24));line-height:.85;align-self:flex-start;padding:4px 8px 0;margin-left:-6px;background:var(--creme);border-radius:6px}
.dl .ou{font-family:var(--titre);font-size:26px;line-height:1;align-self:flex-start;padding:3px 10px 0;border-radius:6px;background:var(--creme)}
.dl .q{position:relative;background:var(--creme);padding:9px 13px;border-radius:14px;border-bottom-left-radius:3px;font-weight:800;font-size:var(--fq,calc(var(--l)*.055));line-height:1.27;margin:8px 0 0;text-wrap:pretty}
.dl .q::after{content:"";position:absolute;left:16px;bottom:-9px;width:0;height:0;border-top:10px solid var(--creme);border-right:12px solid transparent}
.dl .choix{display:flex;flex-wrap:wrap;gap:6px}
.dl .item{display:flex;align-items:center;gap:6px;min-height:44px;border-radius:12px;padding:2px 10px 2px 5px;border:2px solid var(--encre);background:var(--creme);color:var(--encre);font-family:var(--etroit);font-weight:700;font-size:17px;cursor:pointer}
.dl .rg{width:28px;height:28px;border-radius:50%;border:2px dashed var(--encre);display:grid;place-items:center;font-family:var(--titre);font-size:22px;line-height:1;padding-top:2px;flex:none}
.dl .rg.pris{border-style:solid;background:var(--encre);color:var(--creme)}
.dl .symbole{min-height:0;height:100%}
.dl .symbole .ill{display:block;width:100%;height:100%}

/* Autour de la carte. Les mesures du CSS validé comptent bordures et marges intérieures (la carte fait 320 × 448 px) :
   border-box dans la carte. Le texte de la carte est en paragraphes : leurs marges par défaut sont retirées. */
.dl .carte, .dl .carte *, .dl .carte *::before, .dl .carte *::after { box-sizing: border-box; }
.carte p { margin: 0; }
.carte .nb { display: block; gap: 0; }
.carte .q { margin: 8px 0 0; }
.carte .ill .t { fill: var(--encre); }
.carte :focus-visible { outline: 3px solid var(--encre); outline-offset: 2px; border-radius: 12px; }
.carte .item { cursor: pointer; touch-action: manipulation; }
/* La carte fait 320 px ; sur les écrans plus étroits, toute la largeur moins 8 px de chaque côté (les cartes classement
   tiennent ainsi à 320 px), les dos qui dépassent sont coupés au bord de l'écran. */
.dl .carte, .dl-pile { --l: min(320px, calc(100vw - 16px)); }
/* Écrans de moins de 336 px (carte de 304 px) : les classements à quatre choix de l'étape 2 ne tiennent pas dans
   304 × 426 px sans passer sous 17 et 15 px ; la carte y fait 460 px de haut et les choix sont un peu plus petits
   (15 px, rond de 26 px). Au delà, le CSS validé tel quel. */
@media (max-width: 335px) {
  .dl .carte, .dl .dl-pile { height: 460px; }
  .dl .carte .item { font-size: calc(var(--l) * 0.05); gap: 5px; padding: 2px 8px 2px 4px; }
  .dl .carte .rg { width: 26px; height: 26px; }
}
.dl-haut { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 12px; margin: 4px 0 18px; }
/* En anglais, l'étiquette « In French for now » à côté du compteur (constat C3). */
.dl-haut .fr-seul { margin-top: 0; color: var(--v2-texte); }
.dl-compteur { font-family: var(--v2-gros); font-size: 28px; line-height: 1; text-transform: uppercase; color: var(--v2-texte); }
/* La scène va jusqu'aux bords de l'écran sur téléphone (la marge de la page : les 8 px du corps et --gutter, en marge
   négative et en padding) et coupe là ce qui dépasse : les dos et les coins de la carte penchée ne sont plus coupés à
   24 px du bord (25 octobre), et rien ne fait défiler la page de côté. */
.dl-scene { align-self: stretch; display: flex; justify-content: center; margin-inline: calc(-1 * var(--dl-bord)); padding: 6px var(--dl-bord) 36px; overflow-x: clip; }
.dl-pile { position: relative; width: var(--l); height: calc(var(--l) * 1.4); }
.dl-dos { position: absolute; inset: 0; border-radius: 22px; background: var(--c); box-shadow: 0 6px 0 var(--ill-m), 0 14px 24px rgba(0, 0, 0, 0.3); }
.dl-dos-1 { transform: translate(14px, 8px) rotate(4deg); }
.dl-dos-2 { transform: translate(-12px, 12px) rotate(-6deg); }
.dl-dessus { position: relative; z-index: 1; touch-action: pan-y; user-select: none; -webkit-user-select: none; animation: dl-arrive 220ms ease-out; }
@keyframes dl-arrive { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
.dl-relances { list-style: none; margin: 0 0 14px; padding: 0; width: min(100%, 360px); display: flex; flex-direction: column; gap: 10px; }
.dl-relances:empty { display: none; }
.dl-bulle-relance { background: var(--v2-papier); color: var(--v2-encre); border-radius: 14px; border-bottom-left-radius: 3px; padding: 10px 13px; font-weight: 800; font-size: 16px; line-height: 1.3; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.dl-relance-no { font-size: 13px; font-weight: 800; line-height: 1; background: var(--v2-encre); color: var(--v2-papier); padding: 4px 7px 3px; border-radius: 5px; }
.dl-boutons { display: flex; gap: 12px; width: min(100%, 360px); padding-top: 11px; }
.dl-relance, .dl-autre { flex: 1 1 0; min-width: 0; min-height: 56px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 14px; border: 0; border-radius: 999px; font-family: var(--v2-sans); font-weight: 800; font-size: 16px; line-height: 1.1; color: var(--v2-encre); cursor: pointer; touch-action: manipulation; transition: transform 80ms ease-out, box-shadow 80ms ease-out; }
.dl-relance { position: relative; background: var(--v2-menthe); box-shadow: 0 4px 0 #5FAE61; }
.dl-autre { background: var(--v2-papier); box-shadow: 0 4px 0 #CFC8B4; }
.dl-relance:active:not(:disabled), .dl-autre:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); }
.dl-relance:disabled { background: #4F6357; color: var(--v2-papier); box-shadow: none; cursor: default; }
/* La pastille de la relance, posée sur le coin du bouton comme un badge : « 2 en réserve », « 1 sur 2 », « 2 sur 2 ». */
.dl-pastille { position: absolute; top: -11px; right: 10px; font-size: 13px; font-weight: 800; line-height: 1; padding: 5px 9px 4px; border-radius: 999px; background: var(--v2-encre); color: var(--v2-papier); white-space: nowrap; box-shadow: 0 0 0 2px var(--v2-fond); transform: rotate(3deg); }
.dl-relance:disabled .dl-pastille { background: var(--v2-papier); color: var(--v2-encre); }
.dl-boutons :focus-visible { outline: 3px solid var(--v2-menthe); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .dl-dessus { animation: none; } .dl-relance, .dl-autre { transition: none; } }

/* L'entrée de l'accueil : la tuile « Débat libre » en bulle du logo, droite (étape 3, 22 octobre ; référence
   « C droite » de docs/messages/Débat libre, pièces des étapes 2 et 3/tuile-droite.png). Fond papier, coins des
   autres tuiles, ombre menthe décalée en bas à droite, pointe sous le coin bas gauche (papier devant, menthe derrière) ;
   les trois points du logo à la place de l'icône, à la même hauteur ; 20 px de place sous la tuile pour la pointe. */
.pq-tuile.pq-tuile-libre, .jm-feuille .pq-tuile.pq-tuile-libre { position: relative; background: var(--v2-papier); box-shadow: 6px 7px 0 var(--v2-menthe); }
.pq-tuile-libre::before, .pq-tuile-libre::after { content: ""; position: absolute; left: 22px; top: 100%; border-top: 16px solid var(--v2-papier); border-right: 14px solid transparent; pointer-events: none; }
.pq-tuile-libre::before { border-top-color: var(--v2-menthe); left: 28px; top: calc(100% + 7px); }
.pq-tuiles .pq-li-libre { padding-bottom: 20px; }
.pq-tuile-points { display: flex; align-items: center; gap: 5px; height: 20px; margin-bottom: 2px; }
.pq-tuile-points i { width: 8px; height: 8px; border-radius: 50%; background: #8F531C; }
.pq-tuile-points i:nth-child(2) { background: #34693F; }
.pq-tuile-points i:nth-child(3) { background: #6746D7; }
.jm-feuille .pq-tuile-points { height: 24px; margin-bottom: 6px; gap: 9px; }
.pq-tuile-libre .pq-tuile-t { font-weight: 900; }
.pq-tuile-libre .pq-tuile-t em { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 700; font-size: 1.12em; }
.jm-feuille .pq-tuile.pq-tuile-libre:active { box-shadow: 3px 4px 0 var(--v2-menthe); }
@media (max-height: 600px) { .pq-tuile-points { display: none; } .jm-feuille .pq-tuile-points { display: flex; } }
@media (prefers-reduced-motion: reduce) { .jm-feuille .pq-tuile.pq-tuile-libre:active { box-shadow: 6px 7px 0 var(--v2-menthe); } }
.jm-feuille .pq-tuiles li:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ---------- Les tickets (maquette E, 23 octobre) ----------
   En continu, sa feuille « Tout voir », la feuille « Vu par n médias » et les titres anciens d'un thème (revue.js,
   ticket). La souche dans la couleur du thème, le corps en papier, la perforation pointillée et ses deux encoches
   (un masque), l'ombre pleine sous le ticket (posée sur l'enveloppe, le masque la couperait). Aucun filet, aucun petit
   texte gris : le média et le temps écoulé sont des étiquettes. */
.tk-li { list-style: none; margin: 0; padding: 0; border-radius: 18px; }
.tk-ombre { filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.3)); }
.tk { --tk: var(--v2-th-geo); --tk-x: 96px; --tk-r: 9px; position: relative; display: grid; grid-template-columns: var(--tk-x) minmax(0, 1fr); min-height: 112px; border-radius: 16px; background: var(--v2-papier); color: var(--v2-encre);
  --tk-masque: radial-gradient(circle var(--tk-r) at calc(var(--tk-x) + 1.5px) 0, #0000 calc(var(--tk-r) - 0.5px), #000 var(--tk-r)), radial-gradient(circle var(--tk-r) at calc(var(--tk-x) + 1.5px) 100%, #0000 calc(var(--tk-r) - 0.5px), #000 var(--tk-r));
  -webkit-mask-image: var(--tk-masque); -webkit-mask-composite: source-in; mask-image: var(--tk-masque); mask-composite: intersect; }
.tk[data-th="geo"] { --tk: var(--v2-th-geo); }
.tk[data-th="eco"] { --tk: var(--v2-th-eco); }
.tk[data-th="tech"] { --tk: var(--v2-th-tech); }
.tk[data-th="sav"] { --tk: var(--v2-th-sav); }
.tk[data-th="soc"] { --tk: var(--v2-th-soc); }
.tk[data-th="sport"] { --tk: var(--v2-th-sport); }
.tk[data-th="mode"] { --tk: var(--v2-th-mode); }
.tk[data-th="spice"] { --tk: var(--v2-th-spice); }
.tk-souche { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 14px 6px; border-radius: 16px 0 0 16px; background: var(--tk); color: var(--v2-encre); text-align: center; }
.tk-jour { font-family: "League Gothic", var(--v2-gros); font-size: 22px; line-height: 1; text-transform: uppercase; overflow-wrap: anywhere; }
.tk-heure { font-family: "League Gothic", var(--v2-gros); font-size: 30px; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tk-corps { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-width: 0; padding: 14px 16px 14px 18px; border-left: 3px dotted rgba(13, 53, 32, 0.35); }
.tk-lien { display: block; color: var(--v2-encre); font-family: var(--v2-sans); font-size: 17px; font-weight: 800; line-height: 1.25; text-decoration: none; overflow-wrap: break-word; }
.tk-lien::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.tk-lien:focus-visible { outline: none; }
.tk-li:has(.tk-lien:focus-visible) { outline: var(--v2-focus, 3px) solid var(--v2-menthe); outline-offset: 3px; }
@media (hover: hover) { .tk-lien:hover { text-decoration: underline; text-underline-offset: 3px; } }
.tk-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; min-height: 30px; }
.tk-pied .tk-tampon { margin-left: auto; }
.tk-etiquettes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; min-width: 0; }
.tk-media, .tk-age { display: inline-block; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 4px 8px; border-radius: 6px; font-family: var(--v2-sans); font-size: 13px; font-weight: 800; line-height: 1.2; }
.tk-media { background: var(--v2-encre); color: var(--v2-papier); }
.tk-age { background: #E9E3D3; color: var(--v2-encre); }
/* « +n médias » : un tampon en League Gothic, double anneau, penché de 5°, dans une cible de 44 px. */
.tk-tampon { position: relative; z-index: 2; flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -7px -6px -7px 0; padding: 0 4px; border: 0; background: none; cursor: pointer; }
.tk-tampon span { display: inline-block; padding: 6px 10px 4px; border-radius: 6px; background: var(--v2-encre); color: var(--v2-menthe); box-shadow: inset 0 0 0 3px var(--v2-encre), inset 0 0 0 5px var(--v2-menthe); font-family: "League Gothic", var(--v2-gros); font-size: 20px; font-weight: 400; line-height: 1; text-transform: uppercase; white-space: nowrap; transform: rotate(5deg); }
.tk-tampon:focus-visible { outline: 3px solid var(--v2-encre); outline-offset: 0; border-radius: 10px; }
.tk-liste { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
/* L'en tête : « En continu » en très grand, la pastille « Direct » (point rouge et halo), l'heure de mise à jour. */
.tk-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ac-k .tk-titre, .sheet:has(.tk-feuille) .sh .h2 { margin: 0; font-family: "League Gothic", var(--v2-gros); font-size: 48px; font-weight: 400; line-height: 0.95; letter-spacing: 0; text-transform: uppercase; color: var(--v2-papier); }
.tk-etat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0 16px; }
.tk-direct { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 999px; background: var(--v2-papier); color: var(--v2-encre); font-family: var(--v2-sans); font-size: 13px; font-weight: 800; line-height: 1.2; }
.tk-point { width: 9px; height: 9px; border-radius: 50%; background: #E5483A; box-shadow: 0 0 0 4px rgba(229, 72, 58, 0.22); }
.tk-maj { font-family: var(--v2-sans); font-size: 14px; font-weight: 800; color: #CFE3D4; }
.ac-k .tk-bloc .tk-tout-voir { color: var(--v2-menthe); }
/* Le bloc de la page À la une : sur le vert, sans fond de papier, en tickets sobres (plus bas). Quatre tickets sur
   téléphone, quatre en deux colonnes de 600 à 899 px (les deux d'une rangée à la même hauteur) ; trois à côté de la une
   sur ordinateur, du haut de la une à son bas (24 octobre) : le bloc a au moins la hauteur de la une (420 px, plus les
   4 px de l'ombre), les tickets se partagent la place qui reste, jamais plus petits que leur texte. */
.ac-k .k-continu.tk-bloc { margin: 40px 0 0; padding: 0; border: 0; background: none; box-shadow: none; color: var(--v2-papier); }
.ac-k .tk-bloc .tk-liste > li { display: flex; flex-direction: column; }
.ac-k .tk-bloc .tk-liste > li:nth-child(n+5) { display: none; }
.ac-k .tk-bloc .tk-ombre { flex: 1 1 auto; display: flex; flex-direction: column; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.28)); }
.ac-k .tk-bloc .tk { flex: 1 1 auto; }
@media (min-width: 600px) and (max-width: 899px) { .ac-k .tk-bloc .tk-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .ac-k .tk-titre, .sheet:has(.tk-feuille) .sh .h2 { font-size: 60px; }
  .ac-k .k-une-grille .k-continu.tk-bloc { margin: 0; padding: 0 0 4px; overflow: visible; min-height: 424px; }
  .ac-k .k-une-grille { align-items: start; }
  .ac-k .tk-bloc .tk-liste { flex: 1 1 auto; display: flex; flex-direction: column; }
  .ac-k .tk-bloc .tk-liste > li { flex: 1 1 auto; }
  .ac-k .tk-bloc .tk-liste > li:nth-child(n+4) { display: none; }
  .ac-k .tk-anciens .tk-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
}
.ac-k .tk-anciens { margin: 24px 0 0; }
/* Les feuilles « Tout voir » et « Vu par n médias » : le titre en League Gothic, le bouton de fermeture rond, le sujet
   sur une carte crème. */
.tk-feuille { display: flex; flex-direction: column; gap: 12px; }
.tk-feuille .sh { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sheet .xbtn.tk-fermer { flex: none; min-width: 48px; padding: 0; width: 48px; height: 48px; border: 0; border-radius: 50%; background: #1F4A33; color: var(--v2-papier); }
.sheet .xbtn.tk-fermer:focus-visible { outline: var(--v2-focus, 3px) solid var(--v2-menthe); outline-offset: 2px; }
.tk-feuille .tk-etat { margin: -4px 0 4px; }
.tk-sujet { margin: 0 0 4px; padding: 16px 18px; border-radius: 14px; background: var(--v2-papier); color: var(--v2-encre); font-family: var(--v2-sans); font-size: 17px; font-weight: 800; line-height: 1.3; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3); }
.tk-feuille .tk-liste { padding-bottom: 6px; }
/* Téléphone : souche de 80 px, heure de 26 px, titre de 16 px. */
@media (max-width: 599px) {
  .tk { --tk-x: 80px; min-height: 104px; }
  .tk-heure { font-size: 26px; }
  .tk-lien, .tk-sujet { font-size: 16px; }
  .tk-corps { padding: 12px 12px 12px 14px; }
}

/* ---------- Le ticket sobre et les gommettes (« En continu en gommettes », 24 octobre) ----------
   Seulement dans le bloc En continu de la page À la une (revue.js, ticket({ sobre })) : la feuille « Tout voir », la
   feuille « Vu par n médias » et les titres anciens d'un thème gardent le ticket E. Repris du prototype de
   docs/messages : la souche de 66 px, la gommette du thème au dessus de l'heure (24 px) ; la perforation pointillée de
   2 px et ses deux encoches de 8 px (le masque du ticket E) ; le titre sur deux lignes au plus ; le média et le temps
   écoulé en simple texte ; le tampon à l'encre sur le papier. Depuis le 27 octobre (« En continu en couleur », version
   C), la souche reprend la couleur du thème, comme le ticket E, au lieu du papier foncé ; la gommette ne change pas, son
   bord crème la détache de la souche. La même gommette de 40 px remplace l'icône sur la souche des feuilles « Tout
   voir » et « Vu par n médias », et des titres anciens d'une page de thème. */
.tk.tk-sobre { --tk-x: 66px; --tk-r: 8px; min-height: 88px;
  --tk-masque: radial-gradient(circle var(--tk-r) at calc(var(--tk-x) + 1px) 0, #0000 calc(var(--tk-r) - 0.5px), #000 var(--tk-r)), radial-gradient(circle var(--tk-r) at calc(var(--tk-x) + 1px) 100%, #0000 calc(var(--tk-r) - 0.5px), #000 var(--tk-r)); }
.tk-sobre .tk-souche { gap: 6px; padding: 10px 4px 12px; }
.tk-sobre .tk-heure { font-size: 24px; }
.tk-sobre .tk-corps { justify-content: center; gap: 6px; padding: 11px 14px 11px 16px; border-left: 2px dotted rgba(13, 53, 32, 0.3); }
.tk-sobre .tk-lien { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: 16px; font-weight: 700; line-height: 1.28; }
.tk-sobre .tk-pied { flex-wrap: nowrap; gap: 8px; min-height: 0; }
.tk-sobre .tk-etiquettes { flex-wrap: nowrap; gap: 8px; }
.tk-sobre :is(.tk-media, .tk-age) { padding: 0; border-radius: 0; background: none; color: var(--v2-encre); font-size: 13px; line-height: 1.3; }
.tk-sobre .tk-age { flex: none; overflow: visible; font-weight: 600; color: var(--v2-encre-2); }
.tk-sobre .tk-tampon { margin: -12px -6px -12px auto; }
.tk-sobre .tk-tampon span { padding: 3px 7px 2px; border: 2px solid var(--v2-encre); background: none; color: var(--v2-encre); box-shadow: inset 0 0 0 1.5px var(--v2-papier), inset 0 0 0 2.6px var(--v2-encre); font-size: 16px; line-height: 1.1; letter-spacing: 0.03em; transform: rotate(-4deg); }
/* Les gommettes (icones.js, iconeTheme(k, "gommette")), reprises telles quelles du prototype : la couleur du thème
   cernée d'encre (trait de 1,5), la personne de derrière de Société en #FECBB8, le bord crème découpé (les mêmes formes
   en crème, trait de 5,2), l'ombre pleine de 2 px. Toujours droites, décoratives. 40 px dans la souche des tickets ;
   à la place d'une icône de thème (la gommette partout, 28 octobre), la boîte de l'icône (.ic-theme). */
.ic-gommette { flex: none; overflow: visible; filter: drop-shadow(0 2px 0 rgba(6, 20, 12, 0.25)); }
.ic-gommette:not(.ic-theme) { display: block; width: 40px; height: 40px; }
.ic-gommette[data-theme="geo"] { --g: var(--v2-th-geo); }
.ic-gommette[data-theme="tech"] { --g: var(--v2-th-tech); }
.ic-gommette[data-theme="soc"] { --g: var(--v2-th-soc); }
.ic-gommette[data-theme="eco"] { --g: var(--v2-th-eco); }
.ic-gommette[data-theme="sav"] { --g: var(--v2-th-sav); }
.ic-gommette[data-theme="sport"] { --g: var(--v2-th-sport); }
.ic-gommette[data-theme="mode"] { --g: var(--v2-th-mode); }
.ic-gommette[data-theme="spice"] { --g: var(--v2-th-spice); }
.ic-gommette .g-halo { fill: #FFFDF7; stroke: #FFFDF7; stroke-width: 5.2; stroke-linejoin: round; stroke-linecap: round; }
.ic-gommette .g-f { fill: var(--g); stroke: var(--v2-encre); stroke-width: 1.5; stroke-linejoin: round; }
.ic-gommette .g-c { fill: #FECBB8; }
.ic-gommette .g-l { fill: none; stroke: var(--v2-encre); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ic-gommette .g-epais { stroke-width: 1.9; }
.ic-gommette .g-e { fill: var(--v2-encre); }
.ic-gommette .g-v { fill: #FFFDF7; }
.ic-gommette .g-lq { fill: var(--g); }
.ic-gommette .g-w { fill: none; stroke: #FFFDF7; stroke-width: 1.4; stroke-linecap: round; }
/* La planche ?demo=icones-themes : les huit en 64 px sur le papier foncé, puis la rangée en 40 px. */
.ic-planche-gommettes { background: #E6DFCB; color: var(--v2-encre); }
.ic-planche-gommettes .v2-intertitre { color: var(--v2-encre); }
.ic-planche-gommes li { align-items: center; font-weight: 700; }
.ic-planche-gommes .ic-gommette { width: 64px; height: 64px; }
.ic-planche-gommes-40 { color: var(--v2-encre-2); }

/* ---------- Tes derniers débats : les tickets et les tampons (25 octobre ; docs/messages/Tes derniers débats) ----------
   Les cinq derniers débats en tickets sobres (ceux d'En continu : souche de 66 px, ici en papier foncé, encoches,
   perforation, ombre pleine), 10 px entre deux : la gommette de 36 px (la pièce A/B sans thème) et la date en League Gothic 19 px ;
   la question en Archivo 700 15 px sur deux lignes au plus ; le mode, les pièces, et le score d'un débat seul dans le
   tampon d'En continu (League Gothic 17 px). Puis Ta grille en solo et son étiquette, la carte aux trois tampons ronds
   de 74 px, « Voir en tableau » en pastille papier et les débats gardés. */
.dd-liste { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tk.tk-sobre.dd-tk { width: 100%; min-height: 84px; padding: 0; border: 0; font: inherit; text-align: left; cursor: pointer; }
.dd-tk:focus-visible { outline: none; }
.dd-li:has(.dd-tk:focus-visible) { outline: var(--v2-focus, 3px) solid var(--v2-menthe); outline-offset: 3px; }
.dd-tk .tk-souche { gap: 5px; padding: 10px 4px; background: #E6DFCB; }
.dd-tk .ic-gommette { width: 36px; height: 36px; }
.dd-ab { display: block; width: 36px; height: 36px; }
.dd-date { font-family: "League Gothic", var(--v2-gros); font-size: 19px; font-weight: 400; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.dd-tk .tk-corps { justify-content: center; gap: 6px; padding: 10px 12px 10px 15px; }
.dd-q { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-family: var(--v2-sans); font-size: 15px; font-weight: 700; line-height: 1.26; color: var(--v2-encre); }
.dd-bas { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; font-family: var(--v2-sans); font-size: 13px; line-height: 1.3; }
.dd-mode { min-width: 0; color: var(--v2-encre-2); font-weight: 600; }
.dd-mode b { color: var(--v2-encre); font-weight: 800; }
.dd-tampon { flex: none; margin-left: auto; }
.dd-tampon span { display: inline-block; padding: 3px 7px 2px; border: 2px solid var(--v2-encre); border-radius: 6px; color: var(--v2-encre); box-shadow: inset 0 0 0 1.5px var(--v2-papier), inset 0 0 0 2.6px var(--v2-encre); font-family: "League Gothic", var(--v2-gros); font-size: 17px; line-height: 1.1; letter-spacing: 0.03em; transform: rotate(-4deg); }
.dd-vide { margin: 0; padding: 16px 18px; border-radius: 16px; background: var(--v2-papier); color: var(--v2-encre); font-family: var(--v2-sans); font-size: 15px; font-weight: 700; line-height: 1.35; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.28); }
.dd-grille-s { display: grid; gap: 12px; margin-top: 8px; }
.dd-h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; color: var(--v2-texte); font-family: "League Gothic", var(--v2-gros); font-size: 30px; font-weight: 400; line-height: 1; text-transform: uppercase; }
.dd-nb { padding: 5px 10px 4px; border-radius: 999px; background: var(--v2-menthe); color: var(--v2-encre); font-family: var(--v2-sans); font-size: 13px; font-weight: 800; line-height: 1; letter-spacing: 0.04em; }
.dd-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 16px 8px 14px; border-radius: 18px; background: var(--v2-papier); color: var(--v2-encre); list-style: none; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.28); }
.dd-case { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; }
.dd-rond { box-sizing: border-box; display: flex; align-items: baseline; justify-content: center; width: 74px; height: 74px; padding-top: 20px; border: 3px solid var(--v2-encre); border-radius: 50%; box-shadow: inset 0 0 0 3px var(--v2-papier), inset 0 0 0 5px var(--v2-encre); font-family: "League Gothic", var(--v2-gros); font-size: 30px; font-weight: 400; line-height: 1; }
.dd-rond small { font-size: 20px; }
.dd-plein .dd-rond { background: var(--v2-menthe); transform: rotate(-7deg); }
.dd-moitie .dd-rond { background: #E6DFCB; transform: rotate(5deg); }
.dd-case-n { font-family: var(--v2-sans); font-size: 13px; font-weight: 800; line-height: 1.2; }
.dd-case-p { font-family: var(--v2-sans); font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--v2-encre-2); }
.dd-pied { position: relative; display: flex; justify-content: flex-end; min-height: 44px; margin-top: 2px; }
.dd-tableau { flex: 1 1 100%; min-width: 0; }
.dd-voir { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--v2-papier); color: var(--v2-encre); font-family: var(--v2-sans); font-size: 15px; font-weight: 800; list-style: none; cursor: pointer; }
.dd-voir::-webkit-details-marker { display: none; }
.dd-voir .cat-sub-chev { width: 16px; height: 16px; }
.dd-tableau[open] .dd-voir .cat-sub-chev { transform: rotate(90deg); }
.dd-voir:focus-visible { outline: var(--v2-focus, 3px) solid var(--v2-menthe); outline-offset: 3px; }
.dd-tableau table { width: 100%; margin-top: 12px; border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: 14px; background: var(--v2-papier); color: var(--v2-encre); font-family: var(--v2-sans); font-size: 14px; }
.dd-tableau th, .dd-tableau td { padding: 8px 10px; text-align: left; }
.dd-tableau th { font-weight: 800; }
.dd-tableau tbody tr:nth-child(odd) td { background: #E6DFCB; }
.dd-garde { align-self: flex-start; margin-top: 6px; padding: 7px 12px; border-radius: 999px; background: #1B4A31; color: #CFE3D4; font-family: var(--v2-sans); font-size: 13px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
.dd-tableau + .dd-garde { position: absolute; top: 0; right: 0; }
@media (prefers-reduced-motion: reduce) { .dd-tableau[open] .dd-voir .cat-sub-chev { transform: none; } }

/* ---------- Les personnages (25 octobre ; docs/messages/Personnages, collection et partie à table) ----------
   Les filtres de l'autocollant, posés une fois dans la page par src/personnages.js. */
.pso-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.pso-planche-l { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; margin: 0 0 24px; padding: 0; list-style: none; }
.pso-planche-p { padding: 14px 12px 10px; border-radius: 20px; background: var(--c); color: var(--v2-encre); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.28); }
.pso-planche-p h2 { margin: 0 0 6px; font-family: "League Gothic", var(--v2-gros); font-size: 26px; font-weight: 400; line-height: 1; text-transform: uppercase; }
.pso-planche-r { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pso-planche-b { max-width: 520px; margin-bottom: 24px; }
.pso-fig { margin: 0; text-align: center; }
.pso-fig svg { display: block; width: 100%; height: auto; }
.pso-fig figcaption { font-family: var(--v2-sans); font-size: 14px; font-weight: 800; }

/* ---------- Ta collection (25 octobre ; docs/messages/Personnages, collection et partie à table, collection.html) ----------
   Deux onglets en pastilles de 44 px. Personnages : la vedette (ton personnage sur sa couleur à pois, la bulle, le
   nom, les quatre teints, le tampon « Choisi »), « À débloquer » et les cartes sur trois colonnes. Objets : ta table,
   les trois familles, les objets en cartes. Le dessin de chaque objet est un SVG (src/objets.js). */
.co-onglets { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 999px; background: #1B4A31; }
.co-onglet, .co-famille { min-height: 44px; padding: 0 8px; border: 0; border-radius: 999px; background: transparent; color: #CFE3D4; font-family: var(--v2-sans); font-size: 15px; font-weight: 800; cursor: pointer; }
.co-onglet[aria-pressed="true"], .co-famille[aria-pressed="true"] { background: var(--v2-papier); color: var(--v2-encre); }
.co-onglet:focus-visible, .co-famille:focus-visible, .co-teint:focus-visible, .co-carte:focus-visible, .co-objet:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 3px; }
.co-panneau { display: grid; gap: 0; }
.co-vedette { position: relative; display: grid; grid-template-columns: 168px minmax(0, 1fr); align-items: end; min-height: 236px; margin-top: 14px; padding: 0 14px 0 4px; border-radius: 22px; background: var(--c); color: var(--v2-encre); box-shadow: 0 5px 0 rgba(0, 0, 0, 0.3); overflow: hidden; }
.co-vedette::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(13, 53, 32, 0.13) 1.6px, transparent 1.7px); background-size: 14px 14px; }
.co-vedette:focus-visible { outline: var(--v2-focus) solid var(--v2-menthe); outline-offset: 3px; }
.co-vedette > svg { position: relative; width: 184px; height: 184px; margin: 0 0 -10px -10px; }
.co-droite { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 8px; align-self: stretch; min-width: 0; padding: 14px 0; }
.co-bulle { position: relative; margin: 0; padding: 10px 12px; border: 3px solid var(--v2-encre); border-radius: 14px; background: #FFFDF7; font-family: var(--v2-sans); font-size: 15px; font-weight: 800; line-height: 1.2; }
.co-bulle::after { content: ""; position: absolute; left: -10px; bottom: 14px; width: 14px; height: 14px; background: #FFFDF7; border-left: 3px solid var(--v2-encre); border-bottom: 3px solid var(--v2-encre); transform: rotate(45deg); }
.co-nom { margin: 0; font-family: "League Gothic", var(--v2-gros); font-size: 38px; font-weight: 400; line-height: 0.95; text-transform: uppercase; }
.co-teints { display: flex; flex-wrap: nowrap; gap: 2px; margin-right: -10px; }
@media (max-width: 389px) { .co-teints { flex-wrap: wrap; margin-right: 0; } }
.co-teint { display: grid; flex: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.co-teint i { width: 26px; height: 26px; border: 3px solid var(--v2-encre); border-radius: 50%; }
.co-teint[aria-pressed="true"] i { box-shadow: 0 0 0 3px #FFFDF7, 0 0 0 6px var(--v2-encre); }
.co-choisi { position: absolute; left: 14px; top: 14px; padding: 4px 9px 3px; border: 3px solid var(--v2-encre); border-radius: 8px; background: var(--v2-menthe); box-shadow: inset 0 0 0 2px var(--v2-menthe), inset 0 0 0 3.5px var(--v2-encre); font-family: var(--v2-sans); font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; transform: rotate(-6deg); }
.co-sous { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 20px 0 10px; }
.co-h3 { margin: 0; color: var(--v2-texte); font-family: "League Gothic", var(--v2-gros); font-size: 28px; font-weight: 400; line-height: 1; text-transform: uppercase; }
.co-nb { padding: 5px 10px 4px; border-radius: 999px; background: var(--v2-menthe); color: var(--v2-encre); font-family: var(--v2-sans); font-size: 13px; font-weight: 800; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.co-grille, .co-objets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.co-objets { margin-top: 12px; }
.co-carte, .co-objet { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; min-height: 44px; border: 0; border-radius: 16px; background: var(--v2-papier); color: var(--v2-encre); font-family: var(--v2-sans); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.28); cursor: pointer; }
.co-carte { padding: 6px 4px 10px; }
.co-objet { padding: 10px 4px; }
.co-carte[aria-disabled="true"], .co-objet[aria-disabled="true"] { cursor: default; }
.co-scene { position: relative; display: grid; place-items: center; width: 100%; height: 92px; border-radius: 12px; background: var(--c); }
.co-scene svg { width: min(96px, 100%); height: auto; margin-top: 4px; }
.co-verrou .co-scene svg { filter: brightness(0) opacity(0.28); }
.co-q { position: absolute; color: var(--v2-encre); font-family: "League Gothic", var(--v2-gros); font-size: 44px; line-height: 1; opacity: 0.55; }
.co-carte-n { font-family: "League Gothic", var(--v2-gros); font-size: 19px; font-weight: 400; line-height: 1; text-align: center; text-transform: uppercase; }
.co-etat { font-size: 13px; font-weight: 800; line-height: 1.2; text-align: center; }
.co-jauge { display: block; width: 84%; height: 8px; border-radius: 4px; background: #E6DFCB; overflow: hidden; }
.co-jauge i { display: block; height: 100%; border-radius: 4px; background: var(--v2-encre); }
.co-objet-on { outline: 3.5px solid var(--v2-encre); outline-offset: -2px; }
.co-objet-v { display: grid; place-items: center; width: 100%; min-height: 80px; }
.co-objet-v svg { display: block; max-width: 100%; height: auto; transform: rotate(var(--r)); }
.co-v-piece svg, .co-v-table svg { transform: none; }
.co-objet-n { font-size: 13px; font-weight: 800; line-height: 1.15; text-align: center; }
.co-apercu { position: relative; height: 214px; margin-top: 14px; border-radius: 22px; background: radial-gradient(120% 90% at 50% 20%, #245A3D 0%, #123B28 70%); box-shadow: 0 5px 0 rgba(0, 0, 0, 0.3); overflow: hidden; }
.co-apercu-s { position: absolute; inset: 0; width: 100%; height: 100%; }
.co-apercu-n { position: absolute; left: 14px; top: 12px; z-index: 1; color: var(--v2-papier); font-family: "League Gothic", var(--v2-gros); font-size: 24px; line-height: 1; text-transform: uppercase; }
.co-familles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.co-famille { background: #1B4A31; font-size: 14px; }
/* La pastille de Progrès : le dessin de l'objet choisi. */
.pr-objet .ob-svg { display: block; height: auto; }

/* ---------- La partie à table, avec les personnages (« Personnages, collection et partie à table », étape 3, 26 octobre ;
   partie.html, écrans 1 à 4 ; animations.html, A) ---------- */
/* La scène : les joueurs derrière la table vue de trois quarts. 390 unités de large, elle suit la largeur de la colonne
   (la table reste ovale) et déborde sur les marges de la page, comme sur la planche. */
.sc-scene { container: sc / inline-size; position: relative; width: calc(100% + 2 * var(--gutter, 16px)); margin: 6px calc(-1 * var(--gutter, 16px)) 0; aspect-ratio: 390 / var(--sc-h, 300); pointer-events: none; }
/* Étape 3 bis : à table, la scène rétrécit pour que ce qui compte reste au dessus du bloc collé en bas (--tb-h, posé par
   table.js) ; elle garde ses proportions, centrée, et les prénoms restent sur leurs joueurs. */
.tb-jeu > .sc-scene { --sc-w: min(calc(100% + 2 * var(--gutter, 16px)), calc(var(--tb-h, 100000px) * 390 / var(--sc-h, 300))); width: var(--sc-w); margin-left: calc((100% - var(--sc-w)) / 2); margin-right: calc((100% - var(--sc-w)) / 2); }
/* Les lettres décoratives de la scène se cachent quand elles passeraient sous 13 px (la table est mise à 320 px, la scène
   rétrécie) : la lettre de la pièce posée sur la table (21 unités de la pièce, 16,8 de la scène), celles des dos du
   paquet (Pile ou face 28 unités du dos, 15,6 de la scène ; Safran 19 ; Le tampon 15 ; Neutra 40). */
@container sc (max-width: 301.8px) { .ob-svg-piece text { display: none; } }
@container sc (max-width: 326px) { .ob-svg-dos text[font-size="28"] { display: none; } }
@container sc (max-width: 480.4px) { .ob-svg-dos text[font-size="19"] { display: none; } }
@container sc (max-width: 608.4px) { .ob-svg-dos text[font-size="15"] { display: none; } }
@container sc (max-width: 228.2px) { .ob-svg-dos text[font-size="40"] { display: none; } }
.sc-scene > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sc-nom { position: absolute; transform: translate(-50%, 0); display: flex; align-items: center; gap: 4px; padding: 3px 8px 2px; border-radius: 999px; background: var(--pm-creme); color: var(--v2-encre); font-family: var(--v2-sans); font-size: 13px; font-weight: 800; line-height: 1.2; white-space: nowrap; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); }
.sc-nom i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-style: normal; font-family: var(--pm-gros); font-size: 13px; line-height: 1; }
.sc-nom-a i { background: var(--v2-camp-a); } .sc-nom-b i { background: var(--v2-camp-b); }
.sc-halo-a { fill: rgba(255, 162, 21, 0.16); } .sc-halo-b { fill: rgba(194, 169, 255, 0.18); }
.sc-anneau-fond { fill: none; stroke: rgba(244, 241, 232, 0.16); stroke-width: 10; }
.sc-anneau { fill: none; stroke-width: 10; stroke-linecap: round; } .sc-anneau-a { stroke: var(--v2-camp-a); } .sc-anneau-b { stroke: var(--v2-camp-b); }
.sc-bouche .sc-2, .sc-yeux .sc-2 { opacity: 0; }

/* 1. La table est mise : le titre et son étiquette, la scène, la rangée des joueurs, la durée en trois tuiles. */
.tb-mise .rg-etiqs { margin-top: 8px; }
.tb-table { margin-top: 2px; }
.tb-joueurs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px clamp(3px, calc((100% - 324px) / 5), 6px); margin: 12px 0 0; padding: 0; list-style: none; }
.tb-joueur { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 54px; min-height: 44px; padding: 0; border: 0; border-radius: 12px; background: none; color: var(--v2-texte); font-family: var(--v2-sans); font-size: 13px; font-weight: 800; line-height: 1.2; cursor: pointer; }
.tb-av { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--pm-brique); overflow: hidden; }
.tb-av svg { width: 62px; height: 62px; margin-top: 10px; }
.tb-j-n { max-width: 100%; overflow-wrap: anywhere; text-align: center; }
.tb-ajout .tb-av { box-sizing: border-box; border: 3px dashed rgba(244, 241, 232, 0.45); background: none; font-family: var(--pm-gros); font-size: 32px; font-weight: 400; color: var(--pm-texte-2); }
.tb-joueur:active .tb-av { transform: scale(0.96); }
.tb-duree { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.tb-duree-b { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 62px; padding: 6px; border: 0; border-radius: 16px; background: var(--pm-brique); color: var(--pm-texte-2); font-family: var(--v2-sans); font-size: 13px; font-weight: 800; line-height: 1.2; cursor: pointer; }
.tb-duree-b b { font-family: var(--pm-gros); font-size: 28px; font-weight: 400; line-height: 1; color: var(--v2-texte); }
.tb-duree-b[aria-pressed="true"] { background: var(--v2-papier); color: var(--v2-encre); }
.tb-duree-b[aria-pressed="true"] b { color: var(--v2-encre); }
/* La feuille des joueurs : le rond du personnage à gauche du prénom ; le choix s'ouvre dessous. */
.pm-joueurs .prow.pm-prow:has(.tb-j-perso) { grid-template-columns: 44px minmax(0, 1fr) 44px; }
.tb-j-perso { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--c, var(--pm-bouton)); overflow: hidden; cursor: pointer; }
.tb-j-perso svg, .tb-j-p svg { width: 52px; height: 52px; margin-top: 10px; }
.tb-j-perso[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--v2-menthe); }
.tb-j-choix { display: flex; flex-wrap: wrap; gap: 8px; margin: -2px 0 4px; padding: 10px; border-radius: 16px; background: var(--pm-brique); }
.tb-j-p { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--c, var(--pm-bouton)); overflow: hidden; cursor: pointer; }
.tb-j-p[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--v2-menthe); }

/* 2. Le sujet et les camps : la carte du sujet penchée, la scène, deux tuiles de camp, le mélange et le bouton. La pente
   passe par « rotate » : l'arrivée des écrans (pm-monte, remplie jusqu'au bout) remet « transform » à rien. */
.tb-sujet { position: relative; z-index: 3; margin: 14px 4px 0; padding: 12px 16px 16px; border: 3px solid var(--v2-encre); border-radius: 18px; background: var(--pm-creme); color: var(--v2-encre); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.35); rotate: -1.5deg; }
.tb-sujet .pm-theme { color: var(--v2-encre-2); font-size: 13px; font-weight: 800; }
.tb-sujet .pm-carte-etiqs { margin: 8px 0 0; }
.tb-sujet-q { margin: 6px 0 0; font-family: var(--v2-sans); font-size: 22px; font-weight: 800; line-height: 1.16; text-wrap: pretty; }
.tb-sujet .pm-carte-btns { margin-top: 12px; }
.tb-scene-tirage { margin-top: -6px; }
.tb-camps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.tb-camp { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 68px; padding: 8px 10px 8px 6px; border-radius: 16px; color: var(--pm-encre); }
.tb-camp-a { background: var(--v2-camp-a); } .tb-camp-b { background: var(--v2-camp-b); }
.tb-camp-av { display: grid; place-items: center; flex: none; width: 52px; height: 52px; font-family: var(--pm-gros); font-size: 32px; line-height: 1; }
.tb-camp-av svg { width: 52px; height: 52px; }
.tb-camp p { min-width: 0; margin: 0; }
.tb-camp b { display: block; font-family: var(--pm-gros); font-size: 26px; font-weight: 400; line-height: 1; text-transform: uppercase; overflow-wrap: anywhere; }
.tb-camp small { display: block; margin-top: 2px; font-size: 13px; font-weight: 800; }
.tb-camps.tb-tourne .tb-camp { animation: tb-tourne 0.5s cubic-bezier(0.3, 1.3, 0.5, 1) backwards; }
.tb-camps.tb-tourne .tb-camp-b { animation-delay: 0.12s; }
@keyframes tb-tourne { from { transform: rotateY(90deg) scale(0.9); opacity: 0; } }
.tb-bas { display: flex; gap: 10px; }
.tb-bas > .pm-btn-menthe { flex: 1; width: auto; }
.tb-carre { flex: none; width: 58px; min-height: 58px; padding: 0; background: var(--v2-papier); color: var(--v2-encre); }
.tb-carre svg { width: 26px; height: 26px; }

/* 3 et 4 (étape 3 bis) : Passe le téléphone et ta carte remplissent la hauteur de l'écran, depuis leur place (--tb-haut,
   posé par table.js) jusqu'en bas ; le bloc du bouton rond se pose tout en bas, à 12 px du bas (zone sûre comprise), au
   même endroit sur les deux écrans. Rien ne reste sous lui : ni marge de page, ni barre de l'appli. */
.jeu.tb-jeu:has(> .tb-plein) { padding-bottom: 0; }
body:has(.tb-plein) { height: auto; margin-bottom: 0; }
body:has(.tb-plein) .app { min-height: 0; padding-bottom: 0; }
.tb-plein { display: flex; flex-direction: column; min-height: calc(100vh - var(--tb-haut, 0px)); min-height: calc(100dvh - var(--tb-haut, 0px)); }
.pm .tb-plein > .jeu-collees.pm-collees { margin-top: auto; }

/* 3. Passe le téléphone : le débatteur en grand sur son halo, son prénom à la couleur du camp, les autres les yeux fermés. */
.tb-passe { display: flex; flex-direction: column; align-items: center; margin-top: 18px; text-align: center; }
.tb-halo { display: grid; place-items: center; width: min(250px, var(--tb-h, 250px)); max-width: 72vw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 162, 21, 0.35) 0%, rgba(255, 162, 21, 0) 68%); }
.tb-passe-b .tb-halo { background: radial-gradient(circle, rgba(194, 169, 255, 0.4) 0%, rgba(194, 169, 255, 0) 68%); }
.tb-halo svg { width: 92%; height: auto; }
.tb-passe-txt { margin: 0; font-size: 15px; font-weight: 800; color: var(--pm-texte-2); }
.tb-passe-n { margin: 2px 0 0; max-width: 100%; font-family: var(--pm-gros); font-size: min(92px, 24vw); font-weight: 400; line-height: 0.9; text-transform: uppercase; color: var(--v2-camp-a); overflow-wrap: anywhere; }
.tb-passe-b .tb-passe-n { color: var(--v2-camp-b); }
.tb-passe .pm-etiqs { justify-content: center; margin-top: 8px; }
.tb-yeux { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(6, 20, 12, 0.4); font-size: 13px; font-weight: 800; color: var(--v2-texte); }
.tb-yeux > span { display: flex; padding-left: 8px; }
.tb-yeux svg { flex: none; width: 34px; height: 34px; margin-left: -8px; }

/* Le bouton rond : maintenu, il s'enfonce ; l'anneau autour montre ce qui reste des 30 secondes. */
.tb-tenir { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tb-rond { position: relative; display: grid; place-items: center; width: 104px; height: 104px; margin: 12px 0 0; padding: 0 10px; border: 0; border-radius: 50%; background: var(--v2-camp-a); color: var(--pm-encre); box-shadow: 0 6px 0 #B86F00; font-family: var(--v2-sans); font-size: 15px; font-weight: 800; line-height: 1.1; text-align: center; cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: transform 0.12s, box-shadow 0.12s; }
.tb-rond-b { background: var(--v2-camp-b); box-shadow: 0 6px 0 #7A5FC4; }
.tb-rond.tb-appui { transform: translateY(3px) scale(0.96); box-shadow: 0 3px 0 #B86F00; }
.tb-rond-b.tb-appui { box-shadow: 0 3px 0 #7A5FC4; }
.tb-rond[aria-disabled="true"] { background: var(--v2-papier); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.35); cursor: default; }
.tb-anneau { position: absolute; inset: -12px; width: 128px; height: 128px; transform: rotate(-90deg); pointer-events: none; }
.tb-anneau circle { fill: none; stroke-width: 8; }
.tb-anneau-fond { stroke: rgba(244, 241, 232, 0.25); }
.tb-anneau-reste { stroke: var(--v2-texte); stroke-linecap: round; }
.tb-rond-t b { font-family: var(--pm-gros); font-size: 34px; font-weight: 400; }
/* À zéro, l'aide est vide (le bouton vert dit déjà la suite) : elle garde la hauteur d'une ligne, le bouton rond ne bouge pas. */
.tb-tenir-aide { min-height: 1.45em; min-height: 1lh; margin: 0; font-size: 13px; font-weight: 800; color: var(--pm-texte-2); text-align: center; }
@media (prefers-reduced-motion: reduce) { .tb-rond { transition: none; } .tb-camps.tb-tourne .tb-camp { animation: none; } }

/* 4. Ta carte, en secret : l'étiquette du haut, la carte qui se retourne pendant l'appui (0,32 s), le bouton rond. La
   carte prend toute la place libre entre l'étiquette et le bloc du bouton (étape 3 bis) ; sur un écran très bas, la
   page défile et le bloc reste collé en bas. */
.tb-lecture { height: max(400px, calc(100vh - var(--tb-haut, 0px))); height: max(400px, calc(100dvh - var(--tb-haut, 0px))); }
/* Le bas de la carte reste net : le fondu ne vient que quand elle dépasse (.tb-deborde). */
.pm .tb-lecture > .jeu-collees.pm-collees { padding-top: 6px; box-shadow: none; }
.tb-secret { display: flex; align-items: center; justify-content: center; gap: 8px; width: max-content; max-width: 100%; min-height: 36px; margin: 4px auto 0; padding: 0 14px; border: 3px solid var(--v2-camp-a); border-radius: 999px; background: var(--v2-encre); color: var(--v2-camp-a); font-size: 13px; font-weight: 800; box-sizing: border-box; }
.tb-oeil { flex: none; width: 20px; height: 20px; }
.tb-retournable { display: grid; flex: 1 1 0; grid-template: minmax(0, 1fr) / minmax(0, 1fr); min-height: 0; margin-top: 12px; perspective: 1200px; }
.tb-face { grid-area: 1 / 1; border-radius: 20px; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: transform 0.32s cubic-bezier(0.3, 0.7, 0.3, 1); }
/* Le dos : le dessin du dos choisi au milieu, « Passe le téléphone à Hugo » en bas, à 14 px des bords de la carte. */
.tb-dos { display: flex; flex-direction: column; gap: 11px; min-height: 0; padding: 11px; box-sizing: border-box; border: 3px dashed rgba(244, 241, 232, 0.25); background: #0F3B24; }
.tb-dos-dessin { display: grid; flex: 1 1 0; place-items: center; min-height: 0; container-type: size; }
.tb-dos-dessin svg { width: clamp(48px, 64cqh, 150px); height: auto; transform: rotate(-4deg); }
.tb-recto { position: relative; display: flex; flex-direction: column; min-height: 0; box-sizing: border-box; border: 3px solid var(--v2-encre); background: var(--pm-creme); color: var(--v2-encre); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.35); overflow: hidden; transform: rotateY(180deg); }
.tb-retournable:not(.tb-ouverte) .tb-recto { pointer-events: none; }
.tb-recto.tb-deborde::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36px; background: linear-gradient(rgba(255, 253, 247, 0), var(--pm-creme)); pointer-events: none; }
.tb-ouverte .tb-dos { transform: rotateY(-180deg); }
.tb-ouverte .tb-recto { transform: rotateY(0deg); }
@media (prefers-reduced-motion: reduce) {
  .tb-face { transform: none !important; transition: opacity 0.15s; }
  .tb-recto { opacity: 0; } .tb-ouverte .tb-recto { opacity: 1; } .tb-ouverte .tb-dos { opacity: 0; }
}
.tb-bande { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 14px; border-bottom: 3px solid var(--v2-encre); color: var(--pm-encre); }
.tb-camp-a .tb-bande, .tb-bande-a { background: var(--v2-camp-a); } .tb-bande-b { background: var(--v2-camp-b); }
.tb-bande b { font-family: var(--pm-gros); font-size: 40px; font-weight: 400; line-height: 0.9; text-transform: uppercase; }
.tb-bande span { font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
/* Le corps de la carte défile en lui même s'il dépasse encore : le bouton rond reste sous le pouce, un autre doigt le fait
   défiler (table.js). */
.tb-c-corps { flex: 1 1 auto; min-height: 0; padding: 10px 14px 12px; overflow-y: auto; overscroll-behavior: contain; }
.tb-lecture[data-tenu="true"] .tb-c-corps { touch-action: none; }
.tb-c-h { margin: 12px 0 6px; font-family: var(--pm-gros); font-size: 22px; font-weight: 400; line-height: 1; text-transform: uppercase; }
.tb-c-h:first-child { margin-top: 0; }
.tb-axes, .tb-faits { margin: 0; padding: 0; list-style: none; }
.tb-axes li { display: flex; align-items: flex-start; gap: 8px; margin-top: 6px; font-size: 15px; font-weight: 700; line-height: 1.25; }
.tb-axes i { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--v2-encre); color: var(--v2-camp-a); font-family: var(--pm-gros); font-size: 16px; font-style: normal; }
.tb-recto.tb-camp-b .tb-axes i { color: var(--v2-camp-b); }
.tb-faits li { margin-top: 6px; padding: 8px 10px; border-radius: 12px; background: #E6DFCB; font-size: 14px; font-weight: 600; line-height: 1.3; }
.tb-faits em { display: block; width: max-content; max-width: 100%; margin-top: 4px; padding: 2px 8px; box-sizing: border-box; border-radius: 999px; background: var(--v2-encre); color: var(--v2-papier); font-size: 13px; font-style: normal; font-weight: 800; }
.tb-c-note { margin: 0; font-size: 15px; font-weight: 700; }
.tb-passer { flex: none; }
.tb-lecture[data-tenu="true"] .tb-passer { visibility: hidden; }

/* ---------- La partie à table, étape 4 : l'en tête, la joute, la notation, le podium, la fin ---------- */
/* « Personnages, collection et partie à table », étape 4 (26 octobre ; partie.html, écrans 5 à 8 ; animations.html, B à
   D). Mouvement réduit : ni bouche, ni clignement, ni chute, ni confettis ; tout est à sa place tout de suite. */
.tb-tete { grid-template-columns: 44px minmax(0, 1fr) 44px 44px; column-gap: 8px; }
.tb-manche { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tb-manche-av { flex: none; width: 40px; height: 40px; }
.tb-manche-av svg { width: 40px; height: 40px; }
.tb-manche p { min-width: 0; margin: 0; }
/* Le titre de la manche tient sur une ligne à 390 px (« Manche 3 · Armement ») ; plus étroit, il passe à la ligne. */
.tb-manche b { display: block; font-family: var(--pm-gros); font-size: clamp(18px, 5.4vw, 24px); font-weight: 400; line-height: 1; text-transform: uppercase; color: var(--v2-texte); overflow-wrap: anywhere; }
.tb-manche small { display: block; font-size: 13px; font-weight: 700; color: var(--pm-texte-2); overflow-wrap: anywhere; }
/* Les barres collent à l'en tête (8 px dessous, 12 px avant l'écran), comme sur la planche. */
.tb-etapes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin: -10px 0 -6px; }
.tb-etapes i { height: 6px; border-radius: 3px; background: rgba(244, 241, 232, 0.2); }
.tb-etapes .tb-fait { background: var(--v2-menthe); }
.tb-etapes .tb-ici { background: var(--v2-papier); }
.tb-ic { width: 22px; height: 22px; flex: none; }

/* 5. La joute (animation B) : la bouche du débatteur qui parle alterne toutes les 150 ms pendant que le chrono tourne ;
   les autres clignent des yeux de temps en temps, chacun à son heure. */
.sc-tourne .sc-bouche .sc-1 { animation: sc-bouche-1 0.3s steps(1, end) infinite; }
.sc-tourne .sc-bouche .sc-2 { animation: sc-bouche-2 0.3s steps(1, end) infinite; }
@keyframes sc-bouche-1 { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes sc-bouche-2 { 0% { opacity: 0; } 50% { opacity: 1; } }
.sc-yeux .sc-1 { animation: sc-cligne-1 3.4s steps(1, end) var(--d, 0s) infinite; }
.sc-yeux .sc-2 { animation: sc-cligne-2 3.4s steps(1, end) var(--d, 0s) infinite; }
@keyframes sc-cligne-1 { 0% { opacity: 1; } 96% { opacity: 0; } }
@keyframes sc-cligne-2 { 0% { opacity: 0; } 96% { opacity: 1; } }
.tb-chrono { display: flex; flex-direction: column; align-items: center; margin-top: 2px; }
.tb-chrono-n { display: flex; align-items: flex-end; justify-content: center; gap: 4px; margin: 0; font-family: var(--pm-gros); line-height: 0.8; }
.tb-chrono-n b { font-size: 150px; font-weight: 400; color: var(--v2-papier); font-variant-numeric: tabular-nums; }
.tb-chrono-n span { margin-bottom: 12px; font-size: 40px; color: var(--pm-texte-2); }
.tb-chrono.tb-fin .tb-chrono-n b { color: var(--v2-camp-a); }
.tb-chrono .pm-etiqs { margin-top: 6px; }
.tb-rappel { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; padding: 10px 12px; border-radius: 14px; background: rgba(6, 20, 12, 0.4); font-size: 15px; font-weight: 700; line-height: 1.25; }
.tb-rappel > i { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--v2-camp-a); }
.tb-rappel-b > i { background: var(--v2-camp-b); }
.tb-rappel b { font-weight: 800; }
.tb-jury { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.tb-jury-1 { grid-template-columns: minmax(0, 1fr); }
.tb-carte-j { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 52px; padding: 4px 10px; border: 3px solid var(--v2-encre); border-radius: 14px; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3); color: var(--v2-encre); font-family: var(--v2-sans); font-size: 15px; font-weight: 800; line-height: 1.15; transform: rotate(-1.5deg); cursor: pointer; }
.tb-carte-j + .tb-carte-j { transform: rotate(1.5deg); }
.tb-carte-j .tb-ic { width: 26px; height: 26px; }
.tb-carte-biais { background: var(--v2-camp-b); }
.tb-carte-coup { background: var(--v2-camp-a); }
.tb-carte-j:disabled { background: #E6DFCB; box-shadow: none; cursor: default; }
.tb-carte-j:active:not(:disabled) { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); translate: 0 3px; }
.tb-b-second { flex: 1; width: auto; background: var(--v2-papier); color: var(--v2-encre); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3); }
.tb-b-gauche { flex: 1; width: auto; }
.tb-b-second:disabled { opacity: 1; background: #E6DFCB; box-shadow: none; }
@media (max-height: 760px) { .tb-chrono-n b { font-size: 116px; } .tb-chrono-n span { margin-bottom: 9px; font-size: 32px; } }
/* Sur un écran bas, le chrono rapetisse ; la scène rétrécit avec table.js (sa pièce perd sa lettre sous 302 px de large). */
@media (max-height: 640px) { .tb-chrono-n b { font-size: 92px; } }

/* 6. La notation (animation C) : un ticket par débatteur ; le tampon tombe de 1,7 à 1, penché de moins 8°, une onde
   menthe part, la pastille des points saute. */
.tb-titre { margin-top: 12px; font-size: 46px; line-height: 0.95; }
.tb-ticket { position: relative; display: grid; grid-template-columns: 74px minmax(0, 1fr); margin-top: 12px; border-radius: 18px; background: var(--v2-papier); color: var(--v2-encre); box-shadow: 0 5px 0 rgba(0, 0, 0, 0.3); }
.tb-ticket::before, .tb-ticket::after { content: ""; position: absolute; left: 66px; width: 16px; height: 16px; border-radius: 50%; background: var(--v2-fond); }
.tb-ticket::before { top: -8px; }
.tb-ticket::after { bottom: -8px; }
.tb-souche { display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 18px 0 0 18px; background: var(--v2-camp-a); }
.tb-ticket-b .tb-souche { background: var(--v2-camp-b); }
.tb-souche svg { width: 70px; height: 70px; }
.tb-souche b { font-family: var(--pm-gros); font-size: 26px; font-weight: 400; line-height: 1; }
.tb-t-corps { min-width: 0; padding: 10px 12px 12px 14px; border-left: 3px dotted rgba(13, 53, 32, 0.3); }
.tb-t-nom { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0; }
.tb-t-nom b { min-width: 0; font-family: var(--pm-gros); font-size: 28px; font-weight: 400; line-height: 1; text-transform: uppercase; overflow-wrap: anywhere; }
.tb-t-nom span { display: inline-block; font-family: var(--pm-gros); font-size: 30px; line-height: 1; }
.tb-tampons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 8px; }
.tb-tampon { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; min-height: 44px; padding: 4px 0 0; border: 0; border-radius: 12px; background: none; color: var(--v2-encre); font-family: var(--v2-sans); font-size: 13px; font-weight: 800; line-height: 1.1; text-align: center; cursor: pointer; }
.tb-tp { position: relative; display: grid; place-items: center; box-sizing: border-box; width: 58px; height: 58px; border: 3px dashed #4F6B5B; border-radius: 50%; }
.tb-tp > .tb-ic { width: 26px; height: 26px; color: #4F6B5B; }
.tb-tp-encre { position: absolute; inset: -3px; display: grid; place-items: center; border: 3px solid var(--v2-encre); border-radius: 50%; box-shadow: inset 0 0 0 3px var(--v2-papier), inset 0 0 0 6px var(--v2-encre); background: var(--v2-menthe); opacity: 0; transform: scale(1.7) rotate(-22deg); }
.tb-tp-encre .tb-ic { width: 26px; height: 26px; color: var(--v2-encre); }
.tb-tp-plus { position: absolute; right: -10px; top: -8px; padding: 2px 6px; border-radius: 999px; background: var(--v2-encre); color: var(--v2-menthe); font-family: var(--pm-gros); font-size: 17px; line-height: 1.1; opacity: 0; transform: scale(0); }
.tb-on .tb-tp-encre { opacity: 1; transform: scale(1) rotate(-8deg); transition: transform 0.28s cubic-bezier(0.2, 1.5, 0.4, 1), opacity 0.12s; }
.tb-on .tb-tp-plus { opacity: 1; transform: scale(1) rotate(8deg); transition: transform 0.25s cubic-bezier(0.2, 1.5, 0.4, 1) 0.15s, opacity 0.1s 0.15s; }
.tb-pose .tb-tp::after { content: ""; position: absolute; inset: -8px; border: 3px solid var(--v2-menthe); border-radius: 50%; animation: tb-onde 0.5s ease-out 0.18s both; }
@keyframes tb-onde { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(1.6); } }
.tb-releve { width: 100%; min-height: 44px; margin-top: 8px; padding: 6px 10px; border: 0; border-radius: 12px; background: #E6DFCB; color: var(--v2-encre); font-family: var(--v2-sans); font-size: 13px; font-weight: 800; text-align: left; }
.tb-releve[aria-pressed="true"] { background: var(--v2-menthe); }
.tb-signal { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 54px; margin-top: 14px; padding: 6px 14px 6px 6px; border: 0; border-radius: 16px; background: rgba(6, 20, 12, 0.4); color: var(--v2-texte); font-family: var(--v2-sans); font-size: 15px; font-weight: 800; line-height: 1.2; text-align: left; cursor: pointer; }
.tb-signal-c { display: grid; place-items: center; flex: none; box-sizing: border-box; width: 34px; height: 44px; border: 3px solid var(--v2-encre); border-radius: 7px; background: var(--v2-camp-b); color: var(--v2-encre); transform: rotate(-6deg); }
.tb-signal-c .tb-ic { width: 20px; height: 20px; }
.tb-signal > .tb-ic { margin-left: auto; }
/* Étape 3 bis : quand rétrécir la scène, le podium ou le gagnant ne suffit pas (320 × 568, Safari avec ses barres),
   l'écran se serre (table.js, .tb-serre) : 12 px entre les blocs au lieu de 24, des titres et des marges un peu plus
   petits ; rien sous 13 px, les cibles gardent 44 px. */
.jeu.tb-jeu.tb-serre { gap: 12px; }
.tb-serre .tb-titre { margin-top: 4px; font-size: 38px; }
.tb-serre .tb-ticket { margin-top: 6px; }
.tb-serre .tb-t-corps { padding-top: 8px; padding-bottom: 8px; }
.tb-serre .tb-tampons { margin-top: 4px; }
.tb-serre .tb-tp { width: 50px; height: 50px; }
.tb-serre .tb-sujet { margin-top: 6px; padding: 10px 14px 12px; }
.tb-serre .tb-sujet-q { font-size: 19px; }
.tb-serre .tb-sujet .pm-carte-btns { margin-top: 8px; }
.tb-serre .tb-sujet .pm-btn { min-height: 44px; }
.tb-serre .tb-camps { margin-top: 4px; }
.tb-serre .tb-camp { min-height: 60px; padding-block: 4px; }
.tb-serre .tb-chrono-n b { font-size: 76px; }
.tb-serre .tb-chrono-n span { margin-bottom: 6px; font-size: 26px; }
.tb-serre .tb-podium { margin-top: 0; }
.tb-serre .tb-autres { margin-top: 6px; gap: 6px; }
.tb-serre .tb-autres li { min-height: 36px; }
.tb-serre .tb-autres svg { width: 32px; height: 32px; }
.tb-serre .tb-cible { margin-top: 8px; padding: 8px 12px; }
.tb-serre .tb-g-nom { font-size: min(64px, 20vw); }
.tb-serre .tb-g-titre { margin-top: 6px; font-size: 22px; }
.tb-serre .tb-gagnant .pm-etiqs { margin-top: 8px; }
.tb-serre .tb-passe { margin-top: 0; }
.tb-serre .tb-yeux { margin-top: 8px; }
.tb-serre .tb-yeux svg { width: 28px; height: 28px; }
.tb-serre .tb-gagnant + .tb-autres { margin-top: 0; }
.tb-serre .tb-gagnant + .tb-autres li { min-height: 32px; }
.tb-serre .tb-gagnant + .tb-autres svg { width: 28px; height: 28px; }

/* 7. Fin de manche (animation D) : le podium sur des piles de pièces, les suivants en pastilles, la jauge. */
.tb-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.tb-marche { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; text-align: center; }
.tb-marche-2 { order: 1; }
.tb-marche-1 { order: 2; }
.tb-marche-3 { order: 3; }
/* Étape 3 bis : sur un écran bas, les personnages et les piles rapetissent ensemble (--tb-k, posé par table.js). */
.tb-m-p { position: relative; z-index: 1; display: block; width: calc(118px * var(--tb-k, 1)); max-width: 100%; aspect-ratio: 1; }
.tb-m-e, .tb-m-g { position: absolute; inset: 0; }
.tb-m-p svg { width: 100%; height: 100%; }
.tb-marche-1 .tb-m-e { visibility: hidden; }
.tb-pile { display: flex; flex-direction: column-reverse; align-items: center; margin-top: -2px; }
.tb-pile i { display: block; width: calc(72px * var(--tb-k, 1)); height: calc(29px * var(--tb-k, 1)); margin-top: calc(-15px * var(--tb-k, 1)); }
.tb-pile svg { display: block; width: 100%; height: 100%; }
.tb-m-pts { margin-top: 6px; font-family: var(--pm-gros); font-size: 34px; font-weight: 400; line-height: 1; }
.tb-marche small { max-width: 100%; font-size: 13px; font-weight: 800; color: var(--pm-texte-2); overflow-wrap: anywhere; }
@keyframes tb-tombe { 0% { opacity: 0; transform: translateY(-140px); } 80% { opacity: 1; transform: translateY(3px); } 100% { opacity: 1; transform: none; } }
@keyframes tb-se-pose { 0% { opacity: 0; transform: translateY(-90px) scale(0.9); } 70% { opacity: 1; transform: translateY(4px) scale(1.04, 0.96); } 100% { opacity: 1; transform: none; } }
@keyframes tb-cache { from { visibility: visible; } to { visibility: hidden; } }
@keyframes tb-montre { from { visibility: hidden; } to { visibility: visible; } }
.tb-joue .tb-pile i { animation: tb-tombe 0.34s cubic-bezier(0.3, 0.6, 0.4, 1) calc(var(--d) - var(--deja, 0ms)) both; }
.tb-joue .tb-m-p { animation: tb-se-pose 0.45s cubic-bezier(0.2, 1.3, 0.4, 1) calc(var(--d) - var(--deja, 0ms)) both; }
.tb-joue .tb-marche-1 .tb-m-e { animation: tb-cache 0s calc(var(--f) - var(--deja, 0ms)) both; }
.tb-joue .tb-marche-1 .tb-m-g { animation: tb-montre 0s calc(var(--f) - var(--deja, 0ms)) both; }
.tb-autres { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.tb-autres li { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px 0 4px; border-radius: 999px; background: rgba(6, 20, 12, 0.4); font-size: 15px; font-weight: 800; }
.tb-autres svg { width: 40px; height: 40px; flex: none; }
.tb-cible { margin-top: 14px; padding: 12px 14px; border-radius: 16px; background: rgba(6, 20, 12, 0.4); }
.tb-cible p { display: flex; justify-content: space-between; gap: 8px; margin: 0; font-size: 15px; font-weight: 800; }
.tb-rail { position: relative; display: block; height: 12px; margin-top: 8px; border-radius: 6px; background: rgba(244, 241, 232, 0.18); overflow: hidden; }
.tb-rail i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: var(--v2-menthe); }

/* 8. Fin de partie : le gagnant, ses rayons, son titre en tampon ; les confettis tombent une seule fois. */
/* Le retour se pose sur les rayons du gagnant, comme sur la planche : il ne prend pas de rangée à lui. */
.tb-fin-tete { position: absolute; z-index: 2; display: flex; padding: calc(env(safe-area-inset-top, 0px) + 8px) 0 0; }
.jeu-fin.tb-jeu { position: relative; }
.tb-fin-tete .jeu-ic { width: 44px; min-width: 44px; height: 44px; padding: 0; border-radius: 50%; background: var(--pm-brique); }
.tb-gagnant { display: flex; flex-direction: column; align-items: center; margin-top: 4px; text-align: center; }
/* Le gagnant rapetisse sur un téléphone pour que les autres joueurs restent au dessus des boutons et de la barre du bas ;
   plus bas encore, table.js le serre (--tb-h, étape 3 bis). */
.tb-eclat { position: relative; display: grid; place-items: center; width: min(300px, 78vw, max(200px, calc(100dvh - 605px)), var(--tb-h, 300px)); aspect-ratio: 1; }
.tb-eclat::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255, 162, 21, 0.22) 0 10deg, transparent 10deg 20deg); -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 30%, transparent 70%); }
.tb-eclat svg { position: relative; width: 83%; height: 83%; }
.tb-joue .tb-eclat::before { animation: tb-rayons 1.2s cubic-bezier(0.2, 0.8, 0.3, 1) calc(0ms - var(--deja, 0ms)) both; }
@keyframes tb-rayons { from { opacity: 0; transform: scale(0.5) rotate(-40deg); } }
.tb-g-nom { margin: 0; max-width: 100%; font-family: var(--pm-gros); font-size: min(96px, 26vw); font-weight: 400; line-height: 0.85; text-transform: uppercase; color: var(--v2-texte); overflow-wrap: anywhere; }
.tb-g-titre { display: inline-block; margin-top: 10px; padding: 6px 14px 5px; border: 3px solid var(--v2-camp-a); border-radius: 10px; box-shadow: inset 0 0 0 3px var(--v2-fond), inset 0 0 0 6px var(--v2-camp-a); color: var(--v2-camp-a); font-family: var(--pm-gros); font-size: 28px; letter-spacing: 0.04em; text-transform: uppercase; transform: rotate(-5deg); }
.tb-gagnant .pm-etiqs { margin-top: 12px; }
.tb-autres:has(+ .jeu-collees) { justify-content: center; margin-top: 12px; }
.tb-confettis { position: fixed; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.tb-confettis i { position: absolute; left: var(--x); top: var(--y); box-sizing: border-box; width: 10px; height: 16px; border: 3px solid var(--v2-encre); border-radius: 2px; background: var(--c); opacity: 0; animation: tb-confetti 1.8s cubic-bezier(0.3, 0.7, 0.4, 1) calc(var(--d) - var(--deja, 0ms)) both; }
@keyframes tb-confetti { 0% { opacity: 1; transform: translateY(-110vh) rotate(0deg); } 75% { opacity: 1; transform: translateY(0) rotate(var(--r)); } 100% { opacity: 0; transform: translateY(0) rotate(var(--r)); } }

@media (prefers-reduced-motion: reduce) {
  .sc-scene .sc-1, .sc-scene .sc-2 { animation: none !important; }
  .tb-on .tb-tp-encre, .tb-on .tb-tp-plus { transition: none; }
  .tb-pose .tb-tp::after { display: none; }
  .tb-joue .tb-pile i, .tb-joue .tb-m-p, .tb-joue .tb-marche-1 .tb-m-e, .tb-joue .tb-marche-1 .tb-m-g, .tb-joue .tb-eclat::before { animation: none; }
  .tb-confettis { display: none; }
}

/* ---------- Plus aucun paragraphe gris (lot 1, point 4, règle du 8 octobre) ----------
   La ligne papier : une explication utile et longue reste fermée ; cette ligne, avec son chevron, ouvre sa feuille,
   comme « Le détail de ta minute » (.nb-detail). Sur le papier (feuilles du chemin, article), elle prend le ton du cadre
   « Objectif » en plus foncé, sans bordure (la charte n'a pas de trait de 2 px : l'ombre pleine dessine le bord), et
   les étiquettes passent à l'encre sur un papier plus foncé. Le tampon de l'article : « Cet article ne conclut pas », à
   l'encre, penché. */
.pm-ligne-papier { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 54px; padding: 8px 18px; border: 0; border-radius: 14px; background: var(--v2-papier); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.28); color: var(--v2-encre); font-family: var(--v2-sans); font-size: 16px; font-weight: 800; line-height: 1.25; text-align: left; cursor: pointer; }
.pm-ligne-papier svg { flex: none; width: 18px; height: 18px; }
.pm-ligne-papier:focus-visible { outline: var(--v2-focus, 3px) solid var(--v2-menthe); outline-offset: 3px; }
:is(.ch-feuille, .v2-papier) .pm-ligne-papier { border-radius: 12px; background: #E6E0CE; box-shadow: 0 4px 0 #CFC8B4; }
:is(.ch-feuille, .v2-papier) .pm-ligne-papier:focus-visible { outline-color: var(--v2-encre); }
.ch-feuille .pm-etiq:not([class*="pm-etiq-"]), .v2-papier .pm-etiq:not([class*="pm-etiq-"]) { background: #E3DCC8; color: var(--v2-encre); }
.ch-feuille .pm-etiqs { margin: 0; }
.ch-f-lignes { display: flex; flex-direction: column; gap: var(--v2-e12); margin-top: var(--v2-e8); }
.ch-feuille .pm-retour-feuille { margin-top: var(--v2-e8); background: #E6E0CE; box-shadow: 0 4px 0 #CFC8B4; color: var(--v2-encre); }
.ch-feuille .pm-retour-feuille .pm-tuile-creme { background: var(--v2-papier); }
.ch-feuille .pm-retour-feuille:focus-visible { outline-color: var(--v2-encre); }
.pr-feuille .pm-ligne-papier, .nb-feuille .pm-retour-feuille, .pr-feuille .pm-retour-feuille { margin-top: 4px; }
.ch-f-trois { margin: 0; font-size: var(--v2-t17); }
.ch-f-trois .ch-marque { width: 14px; height: 14px; border: 0; }
.ac-pied { display: flex; flex-direction: column; gap: var(--v2-e8); margin: var(--v2-e32) 0 0; }
.ac-pied .ac-pied-page { margin: 0; }
.ap-tampon-l { margin: var(--v2-e24) 0 0; text-align: right; }
.ap-tampon { display: inline-block; padding: 3px 12px 1px; border: 3px solid currentColor; border-radius: 10px; color: var(--v2-encre); font-family: var(--v2-gros); font-size: 24px; line-height: 1.05; letter-spacing: 0.03em; text-transform: uppercase; transform: rotate(-3deg); }
.ap-debat .pm-etiqs { margin-top: var(--v2-e12); }
.cj-etiqs { justify-content: center; }

/* ---------- Le détail d'un débat (lot 1, point 5, B2) ----------
   Au style des feuilles du bilan : étiquettes, la question en brique, une brique par case (sa tuile et son titre, son
   état en étiquette, l'explication et la citation), une ligne par joueur à table et à distance. */
.dd-feuille { display: flex; flex-direction: column; gap: 12px; }
.dd-question { margin: 0; font-family: var(--v2-sans); font-size: 18px; font-weight: 800; line-height: 1.3; color: var(--v2-texte); }
.dd-feuille .dd-case { display: flex; flex-direction: column; align-items: stretch; gap: 10px; text-align: left; }
.dd-feuille .dd-case-t { display: flex; align-items: center; justify-content: flex-start; gap: 12px; margin: 0; }
.dd-feuille .dd-case .pm-etiqs { justify-content: flex-start; }
.dd-feuille .pm-citation { font-size: 16px; }
.dd-case .pm-etiqs { margin: 0; }
.dd-transcription { white-space: pre-wrap; }

/* Les temps d'une manche (lot 1, D6) : la culture générale, avant le tirage, n'est pas numérotée ; le tirage est le 1. */
.pm-liste-num > li.pm-sans-num { counter-increment: none; }
.pm-liste-num > li.pm-sans-num::before { content: "·"; }

/* ---------- Le passage vers neutradebat.com (2 novembre au soir ; docs/NEUTRADEBAT.md) ----------
   Les deux cartes de src/passage.js sur la boîte de « Tout effacer » (Réglages) : le titre en League Gothic, des
   boutons de 54 px au moins, des étiquettes ; aucun paragraphe. Le choix : deux boutons sur deux lignes, le nom puis
   l'étiquette « n pièces · n débats ». L'appli installée : le lien « Emporter ma progression », l'étiquette crème
   « Ensuite : … », « Plus tard ». Aucune animation. */
.ps-carte .ps-choix { flex-direction: column; gap: 6px; min-height: 78px; padding: 10px 18px; text-align: center; }
.ps-carte .ps-lien { box-sizing: border-box; text-decoration: none; text-align: center; }
.ps-carte .ps-ensuite { justify-content: center; margin: 0; }