/* 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;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe 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; }
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; }
.iconbtns { display: flex; gap: 8px; flex-shrink: 0; }
.ibtn { height: 40px; min-width: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; display: inline-flex; align-items: center; gap: 6px; }
.ibtn svg { width: 16px; height: 16px; }

/* 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; }
.lead { font-family: var(--serif); font-size: 22px; line-height: 1.2; color: var(--gold); }
.muted { color: var(--muted); }
.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.primary { background: var(--gold); color: var(--ink); border-color: var(--gold); font-weight: 800; }
.btn.ghost { background: transparent; }
.btn.danger { background: transparent; border-color: var(--bad); color: var(--bad); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btns > .full { grid-column: 1 / -1; }

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

/* Joueurs */
.plist { display: flex; flex-direction: column; gap: 8px; }
/* 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); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 40px; border-radius: 999px; border: 1px solid var(--line); background: var(--ink); padding: 0 14px; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.chip[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-soft); color: var(--creme); }
.chip .dot { width: 10px; height: 10px; border-radius: 99px; flex-shrink: 0; }
.chip.big { min-height: 52px; font-size: 16px; padding: 0 18px; }

/* 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; }
.role.camp .letter { position: absolute; top: var(--lt-inset); right: var(--lt-inset); width: var(--lt-w); height: var(--lt-box); display: grid; place-items: center; box-sizing: border-box; padding-top: 0.16em; font-family: var(--serif); font-size: var(--lt-size); line-height: 1; color: var(--gold); opacity: 0.9; }
/* La pointe du A dépasse légèrement celle du B : légère échelle plutôt qu'un décalage. */
.role.camp .letter[data-l="A"] { transform: scale(0.985); }
.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, .qcard { --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 .band, .qcard .band { padding: 16px 18px 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; color: var(--muted); }
.card .band > *, .qcard .band > * { white-space: nowrap; }
.card .tag, .qcard .tag { display: inline-flex; align-items: center; gap: 8px; color: var(--th-text); min-width: 0; }
.card .dot, .qcard .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 .band .meta { font-weight: 700; letter-spacing: 0.14em; white-space: nowrap; }
.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; }
.crete-flag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; color: var(--ink); background: var(--gold); border-radius: 999px; padding: 4px 10px; align-self: flex-start; }

.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 .trk { fill: none; stroke: var(--line); stroke-width: 10; }
.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 */
.speaker { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.speaker .camp { font-family: var(--serif); font-size: 88px; line-height: .85; color: var(--gold); }
.speaker .who { font-size: 26px; font-weight: 800; overflow-wrap: anywhere; }
.speaker .what { font-size: 13px; color: var(--muted); letter-spacing: 0.04em; }
.qmini { font-family: var(--serif); font-size: 20px; line-height: 1.15; color: var(--creme); text-align: center; }
.banner { border: 1px dashed var(--gold); color: var(--gold); border-radius: 14px; padding: 10px 14px; font-size: 14px; font-weight: 600; text-align: center; }
.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; }
.log .neg { color: var(--bad); font-weight: 700; }


/* Quiz */
.qcard .body { padding: 14px 18px 20px; display: flex; flex-direction: column; gap: 16px; }
.qcard .qq { font-family: var(--serif); font-size: 32px; line-height: 1.08; font-weight: 400; color: var(--creme); }
.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); }
.hidden-ans { border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--creme) 30%, transparent); padding: 16px; text-align: center; color: var(--muted); font-weight: 600; background: transparent; width: 100%; min-height: 56px; }

/* Grille */
.grid-block { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.grid-block .gh { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.grid-block .gh .n { font-size: 18px; font-weight: 800; overflow-wrap: anywhere; }
.grid-block .gh .c { font-family: var(--serif); font-size: 34px; line-height: 1; color: var(--gold); }
.grid-block .gh .p { font-size: 14px; font-weight: 800; color: var(--gold); white-space: nowrap; }
.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; }
.srow { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.srow .rk { font-size: 14px; font-weight: 800; color: var(--muted); text-align: center; }
.srow .nm { font-weight: 700; overflow-wrap: anywhere; min-width: 0; }
.srow .tags { font-size: 12px; color: var(--muted); }
.srow .pt { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.srow .d { font-size: 12px; font-weight: 800; text-align: right; }
.srow .d.pos { color: var(--good); } .srow .d.neg { color: var(--bad); } .srow .d.zero { color: var(--muted); }
.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; }
.srow.top1 { border-color: var(--gold); }

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

/* Feuilles */
.sheet-wrap { position: fixed; inset: 0; z-index: 40; 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; }
.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); }

.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; }
.top .where .wcode { color: var(--gold); font-weight: 800; letter-spacing: 0.12em; }

/* 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; }
.wait.big { margin-top: 40px; justify-content: center; }
.pulse { width: 10px; height: 10px; flex-shrink: 0; border-radius: 99px; background: var(--gold); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: .3; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
.rolebanner { margin-bottom: 16px; display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: 16px; background: var(--panel); border-left: 5px solid var(--gold); }
.rolebanner .k { font-size: 11px; font-weight: 800; letter-spacing: 0.18em; color: var(--muted); }
.rolebanner b { font-size: 18px; }
.rolebanner .x { font-size: 13px; color: var(--muted); }
.rolebanner.role-deb { border-left-color: #8EC5FF; }
.rolebanner.role-jury { border-left-color: var(--good); }
.minitime { font-size: 22px; color: var(--gold); }
.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 */
.lobbycode { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px; border-radius: 22px; background: var(--panel); border: 1px solid var(--line); }
.lobbycode b { font-size: 64px; font-weight: 800; letter-spacing: 0.18em; line-height: 1; color: var(--gold); }
.lrow { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: var(--v2-e8); align-items: center; min-height: 40px; }
/* Salon en ligne : même grille que les lignes de joueurs du mode même téléphone. */
.lrow.joueur { min-height: var(--v2-cible-principale); }
.lrow .lnom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrow .idx { font-size: 13px; font-weight: 700; color: var(--muted); text-align: center; }
.tagx { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); background: var(--gold); border-radius: 999px; padding: 3px 8px; }
.lbl { font-size: 13px; font-weight: 700; color: var(--muted); }
.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)); }
.btns.sticky { position: sticky; bottom: 0; background: var(--panel); padding-top: 8px; }

/* Solo */
.campreveal { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 16px 18px; border-radius: 18px; background: var(--panel); border: 1px solid var(--gold); }
.campreveal .letter { font-family: var(--serif); font-size: 80px; line-height: .8; color: var(--gold); }
.campreveal div { display: flex; flex-direction: column; gap: 2px; }
.campreveal b { font-size: 24px; }
.campbtn { min-height: 88px; flex-direction: column; gap: 2px; border-radius: 20px; font-size: 16px; }
.campbtn b { font-family: var(--serif); font-weight: 400; font-size: 44px; line-height: 1; color: var(--gold); }
.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); }
.field.area { min-height: 140px; padding: 12px 14px; resize: vertical; line-height: 1.45; }
details.panel > summary { cursor: pointer; list-style: none; }
details.panel > summary::-webkit-details-marker { display: none; }
.small-summary { font-size: 16px; }
.scorehead { display: flex; flex-direction: column; gap: 8px; }
.bigscore { font-family: var(--serif); font-size: 72px; line-height: .9; color: var(--gold); }
.bigscore small { font-size: 32px; color: var(--muted); }
.cmp { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.cmp-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cmp-r { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); }
.mark { font-weight: 800; color: var(--muted); }
.mark.on { color: var(--gold); }
.cmp-x { margin: 0; font-size: 14px; line-height: 1.4; color: var(--creme); }
.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); }
.panel.warnp { border-color: rgba(242,135,107,0.5); }
ul.plain { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.42; }
.bb { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 1px solid var(--line); }
.bb:first-of-type { border-top: 0; padding-top: 0; }
.bb q { font-family: var(--serif); font-size: 18px; color: var(--creme); }
code { font-size: 0.92em; background: var(--raise); padding: 1px 6px; border-radius: 6px; }
.win .crown svg { width: 88px; height: 88px; }
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }

/* Pause : bouton discret dans le coin haut droit, écran par dessus le jeu */
.pbtn { width: 44px; height: 44px; margin: -2px -12px -2px -6px; padding: 0; flex-shrink: 0; display: inline-grid; place-items: center; border: 0; border-radius: 999px; background: none; color: var(--creme); opacity: 0.55; transition: opacity .15s ease; }
.pbtn svg { width: 16px; height: 16px; }
.pbtn:hover, .pbtn:active { opacity: 0.9; }
.pbtn:focus-visible { opacity: 1; outline-offset: -6px; }
.top .tright { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pausescreen { position: fixed; inset: 0; z-index: 50; overflow: auto; display: grid; place-items: center;
  padding: calc(24px + env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px));
  background: rgba(8, 14, 11, 0.84); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); animation: pzin .18s ease; }
.pz { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 14px; text-align: center; }
.pzt { font-size: 40px; margin: 0; }
.pzby { margin: 0; font-weight: 700; color: var(--creme); }
.pzwait { margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); color: var(--creme); }
.pzcd { font-size: 112px; line-height: 1; color: var(--gold); }
@keyframes pzin { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pausescreen { animation: none; } .pbtn { transition: none; } }

/* Barre de navigation du bas, nouveau design (v2) : fond de la page, filet au dessus, une icône au trait
   de 24px au dessus de chaque libellé (13px). L'onglet actif passe en menthe et en gras, avec un filet de
   2px en haut de l'onglet ; son icône remonte doucement en une demi seconde (coupé en mouvement réduit). */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: inherit; border-top: var(--v2-trait) solid var(--v2-filet);
  padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
.tabbar[hidden] { display: none; }
.tabbar .tabs { max-width: 520px; margin: 0 auto; display: grid; grid-template-columns: repeat(var(--v2-onglets), 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: 500; line-height: 1.2; }
.tab-ic { width: 24px; height: 24px; flex-shrink: 0; }
.tab span { white-space: nowrap; letter-spacing: -0.01em; }
.tab[aria-current="page"] { color: var(--v2-menthe); font-weight: 600; }
/* Petits téléphones : cinq colonnes de 64px, les lettres se resserrent à peine pour que « Catégories » tienne. */
@media (max-width: 359px) { .tab span { letter-spacing: -0.03em; } }
.tab[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: var(--v2-focus); background: var(--v2-menthe); }
@keyframes tab-actif { from { transform: translateY(var(--v2-e4)); } to { transform: none; } }
@keyframes tab-filet { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.tab[aria-current="page"] .tab-ic { animation: tab-actif 500ms ease-out; }
.tab[aria-current="page"]::before { animation: tab-filet 500ms ease-out; }
@media (prefers-reduced-motion: reduce) { .tab[aria-current="page"] .tab-ic, .tab[aria-current="page"]::before { animation: 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); }
body.has-tabbar .app { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 28px); }
body.has-tabbar .toast { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 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); }
.pagebar { padding-top: 20px; }

/* 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; }
.lvlname { font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1.05; }
.lvlpts { font-size: 16px; color: var(--muted); }
.lvlpts b { font-size: 22px; color: var(--creme); }
.bars { display: flex; flex-direction: column; gap: 12px; }
.barrow { display: grid; grid-template-columns: 1fr auto; row-gap: 6px; align-items: baseline; }
.barrow .bl { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; min-width: 0; }
.barrow .bl .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.barrow .bv { font-size: 15px; color: var(--muted); }
.barrow .bs { grid-column: 1 / -1; width: 100%; height: 8px; display: block; }
.btrack { fill: rgba(244,241,232,0.08); }
.bfill { fill: var(--gold); }
.gdots { display: flex; gap: 6px; align-items: flex-end; height: 44px; }
.gdot { flex: 1; max-width: 22px; height: 100%; border-radius: 4px; background: rgba(244,241,232,0.06); display: flex; align-items: flex-end; overflow: hidden; }
.gdot b { display: block; width: 100%; background: var(--gold); border-radius: 4px; }
.gdot.auto b { background: color-mix(in srgb, var(--gold) 45%, transparent); }
.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 .rq { grid-column: 1; font-size: 16px; line-height: 1.35; }
.recent .rp { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 800; color: var(--gold); }
.tagauto { 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; }
.bareme .bp { display: inline-grid; place-items: center; height: 32px; border-radius: var(--r-sm); background: var(--gold-soft); color: var(--gold); font-weight: 800; }
.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; }
.filebtn { position: relative; cursor: pointer; box-sizing: border-box; }
.filebtn:focus-within { outline: 3px solid var(--gold); outline-offset: 2px; }
.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); }
.cmp-q { display: block; margin: 0; padding: 8px 12px; border-left: 3px solid var(--gold); background: var(--gold-tint); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.4; color: var(--creme); quotes: "« " " »"; }
.rbtn { width: 100%; min-height: 44px; display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 2px; text-align: left; background: none; border: 0; padding: 12px 0; color: inherit; border-radius: var(--r-sm); }
.rbtn:active { background: var(--press); }
.recent li { display: block; padding: 0; }
.recent li + li { border-top: 1px solid var(--line); }
.dq { margin: 4px 0 0; font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.2; }
.dcase { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); }
.dcase-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 16px; }
.dst { font-size: 14px; color: var(--muted); text-align: right; }
.dst.on { color: var(--gold); }
.dlist { margin: 0; padding-left: 18px; font-size: 16px; line-height: 1.5; }
.crows { display: flex; flex-direction: column; gap: 12px; }
.crow { display: flex; flex-direction: column; gap: 6px; }
.crow-h { display: flex; justify-content: space-between; gap: 12px; font-size: 16px; }
.cline { max-width: 100%; height: auto; overflow: visible; }
.cdot { fill: none; stroke: var(--gold); stroke-width: 1.5; }
.cdot.on { fill: var(--gold); }
.ctable summary { cursor: pointer; font-size: 14px; color: var(--muted); min-height: 44px; display: flex; align-items: center; }
.ctable table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ctable th, .ctable td { text-align: left; padding: 6px 4px; border-top: 1px solid var(--line); }
.ctable th { color: var(--muted); font-weight: 600; }
/* ---------- Récap de fin de débat ---------- */
.recap .rq { margin: 0; font-family: var(--serif); font-size: 21px; line-height: 1.2; color: var(--creme); }
.rfacts { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 1.42; }
.rfacts li > span:last-child { display: block; }
.rtag { display: inline-block; margin-bottom: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--line); }
.rtag.tA { color: #7DD3A2; border-color: rgba(125,211,162,0.5); }
.rtag.tB { color: #F2876B; border-color: rgba(242,135,107,0.5); }
.rtag.tD { color: var(--gold); border-color: rgba(217,164,65,0.5); }
.raxes .eyebrow { display: flex; align-items: center; gap: 8px; }
.rletter { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--gold); color: #0E1A14; font-size: 12px; letter-spacing: 0; }
.rh { margin: 0; font-size: 17px; color: var(--creme); }
.rlist { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.42; }
.rtips { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.rlist li b { display: block; color: var(--creme); }
.rlist li span { display: block; color: var(--muted); font-size: 14px; }
.facts.campaxes .rlist { margin-top: 6px; }
.facts.campctx p { margin: 6px 0 0; font-size: 15px; line-height: 1.45; }
details.bothcards summary { display: flex; flex-direction: column; gap: 4px; }
details.bothcards[open] summary { margin-bottom: 4px; }
.reveal-other { border-style: dashed; }
.recap .eyebrow, .bothcards .eyebrow { display: flex; align-items: center; gap: 8px; }
.rst { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); vertical-align: 2px; }
.rst.on { color: #7DD3A2; border-color: rgba(125,211,162,0.5); }

/* ---------- Bilan solo : analyse par le code ---------- */
.agree.maybe { background: rgba(217,164,65,0.14); color: var(--gold); }
.cmp-pts { margin: 2px 0 0; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; color: var(--muted); text-align: right; }
.codebanner { border-style: dashed; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stats div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stats b { font-size: 22px; color: var(--creme); }
.stats span { font-size: 12px; color: var(--muted); line-height: 1.3; }
.elist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.4; }
.elist li { display: flex; flex-direction: column; gap: 4px; }
.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); }
.crh { margin: 4px 0 0; font-size: 15px; color: var(--creme); }
.linkbtn { background: none; border: 0; padding: 0; margin-left: 4px; color: var(--gold); font: inherit; text-decoration: underline; cursor: pointer; }

/* ---------- 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 {
  --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;
  --v2-serif: "Instrument Serif", "Times New Roman", Times, Georgia, serif;
  --v2-sans: "Archivo", "Helvetica Neue", Helvetica, Arial, system-ui, 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; font-family: var(--v2-sans); font-size: var(--v2-t21); font-weight: 400; line-height: 1.1; white-space: nowrap; color: var(--v2-texte); }
.v2-nom-a { font-family: var(--v2-serif); font-style: italic; font-size: var(--v2-t28); }
.v2-nom-b { font-weight: 700; letter-spacing: -0.01em; }
.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); }
.v2-tete .v2-lien { margin-right: calc(-1 * var(--v2-e4)); }

/* Partie en cours : une ligne discrète, avec une croix pour la masquer pendant cette visite */
.v2-reprises { margin-top: var(--v2-e12); }
.v2-reprendre { display: flex; align-items: stretch; border-bottom: var(--v2-trait) solid var(--v2-filet); }
.v2-reprendre:first-child { border-top: var(--v2-trait) solid var(--v2-filet); }
.v2-reprendre-go { flex: 1; min-width: 0; min-height: var(--v2-cible); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--v2-e12); padding: var(--v2-e8) 0; background: none; border: 0; text-align: left; color: var(--v2-texte); font-family: var(--v2-sans); font-size: var(--v2-t15); line-height: 1.35; }
.v2-reprendre-t { font-weight: 600; }
.v2-reprendre-m { color: var(--v2-texte-2); white-space: nowrap; }
.v2-croix { flex-shrink: 0; width: var(--v2-cible); min-height: var(--v2-cible); display: grid; place-items: center; margin-right: calc(-1 * var(--v2-e12)); background: none; border: 0; color: var(--v2-texte-2); }
.v2-croix svg { width: var(--v2-icone-croix); height: var(--v2-icone-croix); }

/* Le héros : un sujet, à jouer tout de suite */
.v2-heros { padding-top: var(--v2-e32); }
.v2-etiquette { margin: 0; font-family: var(--v2-sans); font-size: var(--v2-t15); font-weight: 500; line-height: 1.4; color: var(--v2-texte-2); }
.v2-question { margin: var(--v2-e12) 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); overflow-wrap: break-word; }
.v2-chapo { margin: var(--v2-e16) 0 0; max-width: 34ch; font-size: var(--v2-t17); line-height: 1.45; color: var(--v2-texte-2); }
.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); }

/* Ou joue autrement : trois lignes séparées par un filet */
.v2-autres { margin-top: var(--v2-e48); }
.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-d { grid-column: 1; font-size: var(--v2-t15); line-height: 1.4; color: var(--v2-texte-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); }

.v2-signature { margin: var(--v2-e48) 0 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--v2-e8); font-size: var(--v2-t13); line-height: 1.4; color: var(--v2-texte-2); }
.v2-signature .v2-lien { font-size: var(--v2-t13); }

/* Entrée : le héros, puis les lignes, avec un léger décalage. Changer de sujet : un fondu court. */
@keyframes v2-entree { from { opacity: 0; transform: translateY(var(--v2-e8)); } }
@keyframes v2-fondu { from { opacity: 0; } }
.v2-entree .v2-heros { animation: v2-entree var(--v2-duree) ease-out both; }
.v2-entree .v2-autres > .v2-etiquette { animation: v2-entree var(--v2-duree) ease-out var(--v2-decalage) both; }
.v2-entree .v2-lignes li { animation: v2-entree var(--v2-duree) ease-out both; }
.v2-entree .v2-lignes li:nth-child(1) { animation-delay: calc(2 * var(--v2-decalage)); }
.v2-entree .v2-lignes li:nth-child(2) { animation-delay: calc(3 * var(--v2-decalage)); }
.v2-entree .v2-lignes li:nth-child(3) { animation-delay: calc(4 * var(--v2-decalage)); }
.v2-fondu { animation: v2-fondu var(--v2-fondu) ease-out; }
@media (prefers-reduced-motion: reduce) {
  .v2-entree .v2-heros, .v2-entree .v2-autres > .v2-etiquette, .v2-entree .v2-lignes li, .v2-fondu { animation: none; }
  .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); }
.v2-confirme { margin-top: var(--v2-e16); padding-left: var(--v2-e12); border-left: var(--v2-focus) solid var(--v2-filet); }
.v2-confirme p { margin: 0; font-size: var(--v2-t15); color: var(--v2-texte); }
.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-niveau { margin-top: var(--v2-e24); }
.v2-niveau-n { margin: 0; font-size: var(--v2-t15); font-weight: 600; color: var(--v2-texte-2); }
.v2-niveau-nom { margin: var(--v2-e4) 0 0; font-family: var(--v2-serif); font-size: var(--v2-t28); font-weight: 400; line-height: 1.1; color: var(--v2-texte); }
.v2-total { margin: var(--v2-e8) 0 0; font-size: var(--v2-t28); font-weight: 600; color: var(--v2-texte); }
.v2-jauge { margin-top: var(--v2-e16); }
.v2-rail { display: block; width: 100%; height: 6px; }
.v2-rail-fond { fill: var(--v2-filet); }
.v2-rail-plein { fill: var(--v2-menthe); }
.v2-niveau > .v2-ligne-d { display: block; margin-top: var(--v2-e8); font-size: var(--v2-t15); color: var(--v2-texte-2); }
.v2-seuils { list-style: none; margin: var(--v2-e16) 0 0; padding: 0; display: flex; flex-wrap: wrap; column-gap: var(--v2-e16); row-gap: var(--v2-e4); font-size: var(--v2-t15); color: var(--v2-texte-2); }
.v2-seuils .actuel { color: var(--v2-texte); font-weight: 600; }
.v2-progres > .v2-actions { margin-top: var(--v2-e24); }
.v2-chapo { margin: var(--v2-e16) 0 0; max-width: 34ch; font-size: var(--v2-t17); line-height: 1.45; color: var(--v2-texte-2); }
.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-grille { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--v2-e16); row-gap: var(--v2-e4); align-items: center; min-height: var(--v2-cible-principale); padding: var(--v2-e12) 0; box-sizing: border-box; }
.v2-grille .v2-ligne-d { grid-column: 1 / -1; }
.v2-debat { grid-template-columns: minmax(0, 1fr); }
.v2-debat-q { font-family: var(--v2-serif); font-size: var(--v2-t21); line-height: 1.2; color: var(--v2-texte); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v2-note { margin: var(--v2-e16) 0 0; font-size: var(--v2-t13); color: var(--v2-texte-2); }
.v2-page .ctable { margin-top: var(--v2-e12); }
.v2-page .ctable summary { color: var(--v2-menthe); font-size: var(--v2-t15); text-decoration: underline; text-underline-offset: var(--v2-e4); }
.v2-page .ctable th, .v2-page .ctable td { border-top-color: var(--v2-filet); font-size: var(--v2-t15); }
.v2-page .ctable th { color: var(--v2-texte-2); }
/* Élément repliable du nouveau design */
.v2-repli { border-top: var(--v2-trait) solid var(--v2-filet); border-bottom: var(--v2-trait) solid var(--v2-filet); }
.v2-repli > 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-size: var(--v2-t17); font-weight: 600; color: var(--v2-texte); }
.v2-repli > summary::-webkit-details-marker { display: none; }
.v2-repli > summary::after { content: "+"; font-size: var(--v2-t21); color: var(--v2-menthe); }
.v2-repli[open] > summary::after { content: "×"; }
.v2-repli > :last-child { margin-bottom: var(--v2-e24); }
.v2-modes { margin: var(--v2-e16) 0 0; padding-left: var(--v2-e16); display: flex; flex-direction: column; gap: var(--v2-e12); font-size: var(--v2-t15); line-height: 1.5; color: var(--v2-texte-2); }
.v2-modes b { color: var(--v2-texte); }

/* Histoire (étape 6) */
.v2-titre em { font-style: italic; }
.v2-ancres { display: flex; flex-wrap: wrap; column-gap: var(--v2-e16); margin-top: var(--v2-e16); }
.v2-ancres a { min-height: var(--v2-cible); display: inline-flex; align-items: center; color: var(--v2-menthe); font-size: var(--v2-t15); font-weight: 600; text-decoration: underline; text-decoration-thickness: var(--v2-trait); text-underline-offset: var(--v2-e4); }
.v2-histoire [id] { scroll-margin-top: var(--v2-e16); }
@media (prefers-reduced-motion: no-preference) { html:has(.v2-histoire) { scroll-behavior: smooth; } }
.v2-bloc { position: relative; overflow: hidden; padding: var(--v2-e48) 0; border-top: var(--v2-trait) solid var(--v2-filet); }
.v2-bloc:first-of-type { border-top: 0; padding-top: var(--v2-e24); }
.v2-bloc-t { position: relative; margin: 0; font-family: var(--v2-serif); font-style: italic; font-size: var(--v2-t28); font-weight: 400; line-height: 1.15; color: var(--v2-texte); }
.v2-bloc-t em, .v2-menthe { color: var(--v2-texte); font-style: italic; }
.v2-recit { position: relative; margin: var(--v2-e16) 0 0; font-size: var(--v2-t17); line-height: 1.5; color: var(--v2-texte); max-width: 60ch; }
.v2-filigrane { position: absolute; right: 0; top: 0; font-family: var(--v2-serif); font-size: 160px; line-height: 1; color: var(--v2-texte); opacity: 0.05; pointer-events: none; user-select: none; }
.v2-citation { margin: var(--v2-e24) 0 0; padding-left: var(--v2-e16); border-left: var(--v2-focus) solid var(--v2-texte-2); }
.v2-citation p { margin: 0; font-family: var(--v2-serif); font-style: italic; font-size: var(--v2-t21); line-height: 1.35; color: var(--v2-texte); }
.v2-bloc .v2-ligne-d { display: block; margin-top: var(--v2-e16); font-size: var(--v2-t15); color: var(--v2-texte-2); }
.v2-signature-h { margin: var(--v2-e16) 0 0; font-family: var(--v2-serif); font-style: italic; font-size: var(--v2-t21); color: var(--v2-texte-2); }
.v2-methode { list-style: none; counter-reset: etape; margin: var(--v2-e24) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--v2-e8); }
.v2-methode li { counter-increment: etape; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: baseline; font-size: var(--v2-t28); font-weight: 600; line-height: 1.2; color: var(--v2-texte); }
.v2-methode li::before { content: counter(etape); font-family: var(--v2-serif); font-size: var(--v2-t44); font-weight: 400; color: var(--v2-texte-2); }
.v2-methode em { font-family: var(--v2-serif); font-weight: 400; font-style: italic; }
.v2-groupe { margin: var(--v2-e32) 0 0; font-size: var(--v2-t15); font-weight: 600; color: var(--v2-texte-2); }
.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); }
.v2-loin { flex-direction: column; align-items: flex-start; }
.v2-loin .v2-bouton { align-self: stretch; }
.v2-loin .v2-lien { align-self: flex-start; }

/* Actu (étape 7) */
.v2-date { margin: var(--v2-e8) 0 0; font-size: var(--v2-t15); color: var(--v2-texte-2); }
.v2-date::first-letter { text-transform: uppercase; }
.v2-fictif { margin: var(--v2-e12) 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); }
.v2-actu > .v2-lignes { margin-top: var(--v2-e24); }
/* Actu, une de quotidien (chantier 4B) : mention d'édition et date, titre, rangée des thèmes. */
.v2-une-entete { margin-top: var(--v2-e16); }
.v2-edition { margin: 0; display: flex; flex-direction: column; gap: 0; font-size: var(--v2-t13); line-height: 1.4; color: var(--v2-texte-2); }
.v2-edition-l { font-weight: 600; color: var(--v2-texte); }
.v2-edition-d::first-letter { text-transform: uppercase; }
.v2-actu-titre { margin-top: var(--v2-e8); }
.v2-rubriques { margin-top: var(--v2-e16); margin-inline: calc(-1 * var(--gutter)); border-bottom: var(--v2-trait) solid var(--v2-filet); }
.v2-rubriques-defile { position: relative; display: flex; gap: var(--v2-e16); overflow-x: auto; padding-inline: var(--gutter); scrollbar-width: none; }
.v2-rubriques-defile::-webkit-scrollbar { display: none; }
.v2-rubrique { position: relative; flex-shrink: 0; 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); font-weight: 500; white-space: nowrap; }
.v2-rubrique[aria-pressed="true"] { color: var(--v2-texte); font-weight: 600; }
.v2-rubrique[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--v2-focus); background: var(--v2-menthe); }
@media (hover: hover) { .v2-rubrique:hover { color: var(--v2-texte); } }
/* 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-une-grille { margin-top: var(--v2-e8); }
.v2-art { position: relative; padding: var(--v2-e24) 0; border-bottom: var(--v2-trait) solid var(--v2-filet); }
.v2-art > p { margin: 0; }
.v2-art-cat { font-size: var(--v2-t13); font-weight: 600; color: var(--v2-texte-2); }
.v2-art-t { margin: var(--v2-e8) 0 0; font-family: var(--v2-serif); font-size: var(--v2-t21); font-weight: 400; line-height: 1.2; color: var(--v2-texte); }
.v2-art-lien { display: block; width: 100%; padding: 0; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.v2-art-lien::after { content: ""; position: absolute; inset: 0; }
@media (hover: hover) { .v2-art:hover .v2-art-lien { text-decoration: underline; text-decoration-thickness: var(--v2-trait); text-underline-offset: var(--v2-e4); } }
.v2-art .v2-art-chapeau { margin-top: var(--v2-e8); font-size: var(--v2-t15); line-height: 1.45; color: var(--v2-texte-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v2-art .v2-art-theses { margin-top: var(--v2-e12); display: flex; flex-direction: column; gap: var(--v2-e4); font-size: var(--v2-t15); line-height: 1.45; color: var(--v2-texte); }
.v2-art-these b { font-weight: 600; }
.v2-art .v2-art-compte { margin-top: var(--v2-e12); font-size: var(--v2-t13); color: var(--v2-texte-2); }
.v2-art-une { padding-top: var(--v2-e16); }
.v2-art-une .v2-art-t { font-size: var(--v2-t28); line-height: 1.1; }
.v2-art-une .v2-art-chapeau { font-size: var(--v2-t17); -webkit-line-clamp: 4; }
.v2-une-reste + .v2-para, .v2-une-grille + .v2-para { margin-top: var(--v2-e24); }
@media (min-width: 900px) {
  .v2-une-grille { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
  .v2-une-principale { padding-right: var(--v2-e32); }
  .v2-art-une { border-bottom: 0; }
  .v2-art-une .v2-art-t { font-size: var(--v2-t44); line-height: 1.04; }
  .v2-art-une .v2-art-theses { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--v2-e24); }
  .v2-art-une .v2-art-these { border-top: var(--v2-trait) solid var(--v2-filet); padding-top: var(--v2-e8); }
  .v2-art-une .v2-art-these b { display: block; }
  .v2-une-cote { border-left: var(--v2-trait) solid var(--v2-filet); padding-left: var(--v2-e32); }
  .v2-une-cote .v2-art:last-child { border-bottom: 0; }
  .v2-une-reste { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--v2-e48); border-top: var(--v2-trait) solid var(--v2-filet); }
}
@media (min-width: 900px) {
  .v2-une-entete { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; column-gap: var(--v2-e24); }
  .v2-actu-titre { grid-column: 2; margin: 0; text-align: center; }
  .v2-edition { grid-column: 1; grid-row: 1; }
  .v2-rubriques { margin-inline: 0; border-bottom: 3px double var(--v2-filet); }
  .v2-rubriques-defile { flex-wrap: wrap; justify-content: center; column-gap: var(--v2-e24); padding-inline: 0; overflow: visible; }
}
.v2-une { min-height: var(--v2-cible-principale); }
.v2-cat { grid-column: 1; margin: 0; font-size: var(--v2-t13); font-weight: 600; color: var(--v2-texte-2); }
.v2-article-cat { margin: var(--v2-e24) 0 0; display: flex; flex-wrap: wrap; column-gap: var(--v2-e12); font-size: var(--v2-t13); }
.v2-article-cat .v2-cat { font-size: var(--v2-t13); }
.v2-article-date { color: var(--v2-texte-2); }
.v2-article-chapeau { margin: var(--v2-e12) 0 0; font-size: var(--v2-t17); line-height: 1.5; color: var(--v2-texte-2); }
.v2-faits-num { padding-left: var(--v2-e24); }
.v2-article .v2-theses { margin-top: var(--v2-e16); }
.v2-faits-num li::marker { font-family: var(--v2-serif); color: var(--v2-texte-2); }
.v2-source-nom { display: block; font-weight: 600; color: var(--v2-texte); }
.v2-article-suite { margin: var(--v2-e32) 0 0; padding-top: var(--v2-e16); border-top: var(--v2-trait) solid var(--v2-filet); }
.v2-article-suite .v2-lien { padding: 0; text-align: left; }
@media (min-width: 900px) {
  .v2-article .v2-theses { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--v2-e32); align-items: start; }
}
.v2-une-t { grid-column: 1; font-family: var(--v2-serif); font-size: var(--v2-t21); line-height: 1.2; color: var(--v2-texte); }
.v2-une .v2-fleche { grid-row: 1 / span 3; }
.v2-article-t { margin: var(--v2-e8) 0 0; font-family: var(--v2-serif); font-size: var(--v2-t28); font-weight: 400; line-height: 1.15; color: var(--v2-texte); }
@media (min-width: 900px) { .v2-article-t { font-size: var(--v2-t44); line-height: 1.04; } }
.v2-faits { margin: var(--v2-e16) 0 0; padding-left: var(--v2-e16); display: flex; flex-direction: column; gap: var(--v2-e12); font-size: var(--v2-t17); line-height: 1.5; color: var(--v2-texte); }
.v2-renvois { white-space: nowrap; }
.v2-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-menthe); text-decoration: underline; text-underline-offset: 3px; }
.v2-theses { display: flex; flex-direction: column; gap: var(--v2-e32); }
.v2-these { border-top: var(--v2-trait) solid var(--v2-filet); padding-top: var(--v2-e16); }
.v2-these-t { margin: 0; font-family: var(--v2-serif); font-size: var(--v2-t28); font-weight: 400; color: var(--v2-texte); }
.v2-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-texte); }
.v2-qui-defend { margin: var(--v2-e8) 0 0; font-size: var(--v2-t15); color: var(--v2-texte-2); }
.v2-arguments { margin: var(--v2-e12) 0 0; padding-left: var(--v2-e16); display: flex; flex-direction: column; gap: var(--v2-e12); font-size: var(--v2-t17); line-height: 1.5; color: var(--v2-texte); }
.v2-attribution { font-size: var(--v2-t15); color: var(--v2-texte-2); }
.v2-sources { margin: var(--v2-e16) 0 0; padding-left: var(--v2-e24); display: flex; flex-direction: column; gap: var(--v2-e12); font-size: var(--v2-t15); color: var(--v2-texte); }
.v2-sources li { scroll-margin-top: var(--v2-e16); }
.v2-sources a { display: inline-flex; align-items: center; min-height: var(--v2-cible); color: var(--v2-menthe); text-decoration: underline; text-underline-offset: var(--v2-e4); }
.v2-sources .v2-ligne-d { display: block; font-size: var(--v2-t13); color: var(--v2-texte-2); }
.v2-sans-conclusion { margin-top: var(--v2-e32); color: var(--v2-texte); }
.v2-actu .v2-note { margin-top: var(--v2-e32); }

/* Catégories et page d'une catégorie (chantier 2, étape 1) */
.v2-cats { margin-top: var(--v2-e24); }
.v2-cat-ligne { min-height: 80px; row-gap: var(--v2-e8); }
.v2-cat-nom { grid-column: 1; font-family: var(--v2-serif); font-size: var(--v2-t28); font-weight: 400; line-height: 1.1; color: var(--v2-texte); }
.v2-cat-ex { grid-column: 1; font-family: var(--v2-serif); font-style: italic; font-size: var(--v2-t17); line-height: 1.3; color: var(--v2-texte-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v2-cat-prog { grid-column: 1; display: flex; flex-direction: column; gap: var(--v2-e8); font-size: var(--v2-t15); color: var(--v2-texte); }
.v2-cat-prog .v2-rail { height: 4px; }
.v2-cat-ligne .v2-fleche { grid-column: 2; grid-row: 1 / span 3; }
.v2-sujet { grid-template-columns: minmax(0, 1fr) auto; min-height: var(--v2-cible-principale); }
.v2-sujet-q { grid-column: 1; font-family: var(--v2-serif); font-size: var(--v2-t21); line-height: 1.2; color: var(--v2-texte); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v2-joue { grid-column: 2; grid-row: 1; font-size: var(--v2-t13); font-weight: 600; color: var(--v2-menthe); white-space: nowrap; }
.v2-categorie .v2-section > .v2-para + .v2-lignes { margin-top: var(--v2-e16); }
.v2-sous { font-size: var(--v2-t15); color: var(--v2-texte); }
.v2-sous .v2-grille { min-height: var(--v2-cible); padding: var(--v2-e8) 0; }

/* Page Jouer : écrans de choix du mode (chantier 4). Options entre filets, champs soulignés, thèmes en mots. */
.v2-entete-section { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: var(--v2-e16); }
.v2-compte { font-size: var(--v2-t15); color: var(--v2-texte-2); }
.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-code { font-size: var(--v2-t28); font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; }
.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); }

/* En tête de marque (chantier 4) : le nom « Neutra Débat », en grand sur l'accueil, compact ailleurs.
   Au toucher, une ligne menthe de 2px se trace dessous en 250 ms. */
.v2-logo { position: relative; display: inline-flex; align-items: baseline; min-height: var(--v2-cible); padding: 0; background: none; border: 0; color: var(--v2-texte); font-family: var(--v2-sans); font-size: inherit; font-weight: 400; line-height: 1.1; white-space: nowrap; cursor: pointer; }
.v2-logo::after { content: ""; position: absolute; left: 0; right: 0; bottom: var(--v2-e4); height: var(--v2-focus); background: var(--v2-menthe); transform: scaleX(0); transform-origin: left center; }
.v2-logo.v2-trace::after { transform: scaleX(1); transition: transform var(--v2-duree) ease-out; }
/* L'affichage en flex efface l'espace entre les deux mots : il est rendu par une marge. */
.v2-logo .v2-nom-b { margin-left: 0.25em; }
.v2-marque .v2-logo { font-size: var(--v2-t17); }
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-nom-a { font-size: var(--v2-t21); }
.v2-marque + .v2-titre { margin-top: var(--v2-e16); }
@media (prefers-reduced-motion: reduce) { .v2-logo.v2-trace::after { transition: 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 : le héros à gauche, les autres façons de jouer à droite */
@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); }
  .v2-corps { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--v2-e64); align-items: start; padding-top: var(--v2-e96); }
  .v2-heros { padding-top: 0; }
  .v2-autres { margin-top: 0; }
  .v2-actions { flex-direction: row; align-items: center; gap: 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); }
}