/* ═══════════════════════════════════════════════════════════
   IMRI — feuille de style
   Système : signalétique de stade + ticket imprimé + feuille de match.
   Cinq dispositifs : nombre géant, label mono, filet technique,
   cartouche rectangulaire, micro-index.
   Couleurs, familles et tailles : tokens.css.
   ═══════════════════════════════════════════════════════════ */

/* ── Passerelle : jetons de marque → jetons d'usage ── */
:root {
  --r-s: 10px;
  --paper:     var(--imri-bg);
  --surface:   var(--imri-surface);
  --surface-2: var(--imri-surface-2);

  --ink:       var(--imri-text-1);
  --ink-2:     var(--imri-text-2);
  --ink-3:     var(--imri-text-3);

  --line:      var(--imri-line);
  --line-soft: var(--imri-line-soft);

  --sig:       var(--imri-signature);
  --sig-txt:   var(--imri-sig-texte);
  --on-sig:    var(--imri-on-signature);
  --sig-wash:  var(--imri-sig-wash);
  --sec:       var(--imri-secondary);
  --sec-wash:  var(--imri-sec-wash);

  /* `--pos` / `--warn` / `--crit` bordent et remplissent ;
     `--pos-txt` / `--warn-txt` / `--crit-txt` écrivent. */
  --pos:       var(--imri-positive);
  --pos-txt:   var(--imri-pos-encre);
  --pos-wash:  var(--imri-pos-wash);
  --warn:      var(--imri-warning);
  --warn-txt:  var(--imri-warn-encre);
  --warn-wash: var(--imri-warn-wash);
  --crit:      var(--imri-critical);
  --crit-txt:  var(--imri-crit-encre);
  --crit-wash: var(--imri-crit-wash);

  --on-ink:    var(--imri-on-ink);

  --r-carte: var(--r);
}

* { box-sizing: border-box; }

/* ── Anneau de focus, une seule fois pour tout le jeu ───────────────
   Les contrôles du jeu sont des <button> habillés : poste, cadre,
   onglet, pastille de couleur, vignette, choix de récit, carte de
   troc. Chacun redessine son fond, aucun ne redessinait son état de
   focus, et l'anneau par défaut du navigateur disparaissait sur les
   fonds sombres. Au clavier, on ne savait plus où on était. */
:where(button, [role="button"], a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--sig);
  outline-offset: 2px;
}

/* La sélection de texte porte la couleur de marque plutôt que le bleu
   du système, qui est le seul bleu qui traverse le thème sombre. */
::selection { background: var(--sig); color: var(--on-sig); }


body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-4);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

.app { max-width: 1240px; margin: 0 auto; padding: 0 20px 72px; }

/* ═══════════ LES CINQ DISPOSITIFS ═══════════ */

/* 01 — Nombre géant */
.num-geant {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--text-8);
  line-height: var(--lh-tight);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  display: block;
}
.num-geant.sm { font-size: var(--text-7); }

/* 02 — Label mono */
.label-mono {
  font-family: var(--font-mono);
  font-size: var(--text-1);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}
.label-mono.sig { color: var(--sig-txt); }

/* 03 — Filet technique */
.filet { height: 1px; background: var(--line); border: 0; margin: 0; }
.filet-fort { height: 2px; background: var(--ink); border: 0; margin: 0; }

/* 04 — Cartouche rectangulaire */
.cartouche {
  display: inline-block; border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--text-1);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 7px;
  border: 1px solid var(--line);
  color: var(--ink-2);
  background: none;
  white-space: nowrap;
}
.cartouche-sig  { border-color: transparent; color: var(--on-sig); background: var(--imri-grad); }
.cartouche-sec  { border-color: var(--sec);  color: var(--sec);  background: var(--sec-wash); }
.cartouche-pos  { border-color: var(--pos);  color: var(--pos-txt);  background: var(--pos-wash); }
.cartouche-warn { border-color: var(--warn); color: var(--warn-txt); background: var(--warn-wash); }
.cartouche-crit { border-color: var(--crit); color: var(--crit-txt); background: var(--crit-wash); }
.cartouche-plein{ background: var(--ink); border-color: var(--ink); color: var(--on-ink); }

/* 05 — Micro-index */
.micro-index {
  font-family: var(--font-mono);
  font-size: var(--text-1);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}

/* ═══ Titres ═══ */
.titre-page, .titre, .sous-titre {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -.01em;
  text-transform: none;
  text-wrap: balance;
  margin: 0;
}
.titre-page { font-size: clamp(2rem, 5.5vw, 3.5rem); }
.titre      { font-size: clamp(1.5rem, 3.4vw, 2.5rem); }
.sous-titre { font-size: var(--text-5); }

.lede { font-size: var(--text-5); line-height: 1.45; color: var(--ink-2); max-width: 44ch; }
.pane-lede { color: var(--ink-2); max-width: 62ch; margin: 0 0 20px; font-size: var(--text-3); }

/* ═══ Barre du haut ═══
   Trois zones, et une seule ligne : qui on est, où on en est, ce qu'on
   peut faire. En flex avec `flex-wrap`, elles se partageaient l'espace
   au jugé et la rangée de droite retombait à la ligne dès 1280, ce qui
   laissait un trou sous la marque et donnait une barre bancale. En
   grille, la colonne du milieu est la seule élastique : le fil d'étapes
   se comprime et défile, les deux autres gardent leur taille. */
.topbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 28px;
  padding: 13px 0 11px; border-bottom: 1px solid var(--line); margin-bottom: 28px;
}
.brand { grid-column: 1; display: flex; align-items: center; gap: 9px; min-width: 0; }

/* `--imri-grad` peint des aplats, et finit donc sur la couleur la plus
   sombre du thème. Le mot « IMRI » n'est pas un aplat : c'est du texte
   peint par le dégradé, et en sombre son dernier tiers tombait à 1.02:1
   sur le fond. `--imri-grad-marque` est fait pour ça. */
.brand-word {
  font-family: var(--font-display); font-size: 1.65rem; line-height: 1; letter-spacing: -.02em;
  background: var(--imri-grad-marque); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
/* Le badge reste un aplat, mais uni : sur un dégradé, le blanc du « XI »
   ne tenait 4.5:1 qu'à une extrémité. Un aplat à côté d'un mot en
   dégradé se lit mieux que deux dégradés côte à côte. */
.brand-xi {
  font-family: var(--font-display); font-size: .95rem; line-height: 1; color: var(--on-sig);
  background: var(--sig); padding: 5px 8px; border-radius: 6px; letter-spacing: .02em;
}
/* La signature est une phrase, pas un libellé. En petites capitales
   mono elle avait exactement la voix du fil d'étapes juste à côté, et
   l'œil ne distinguait plus le slogan de la navigation. La mono du
   système est un dispositif de label et de donnée ; elle ne peut pas
   être en plus la voix de tout l'écran. */
.brand-tag {
  font-size: var(--text-2); color: var(--ink-3);
  padding-left: 11px; border-left: 1px solid var(--line);
  white-space: nowrap;
}
@media (max-width: 1180px) { .brand-tag { display: none; } }
.topbar-right { grid-column: 3; display: flex; align-items: center; gap: 10px; justify-content: flex-end; min-width: 0; }
.topbar-right > * { min-width: 0; }


/* ═══ Fil d'étapes ═══
   Six pastilles bordées en petites capitales mono : c'était une barre
   d'outils, pas un fil. Un fil se lit parce qu'un trait le traverse,
   pas parce que chaque étape est mise en boîte. Les traits portent
   maintenant l'avancement (bleus derrière soi, gris devant), les
   bordures ont disparu, et le libellé repasse en Inter.

   Le rail glisse quand il déborde, à toutes les largeurs : la colonne
   du milieu de la grille se comprime sous son contenu dès qu'il n'y a
   plus la place. Le dégradé qui efface ses deux bouts n'est posé que
   dans ce cas, par `majEtapes` qui mesure le débordement : un bord
   effacé alors que le fil tient en entier ressemble à un bug, et un
   libellé coupé net en ressemble à un autre. */
.steps {
  grid-column: 2; display: flex; align-items: center; min-width: 0;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.steps::-webkit-scrollbar { display: none; }
.steps.steps-rail {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
}
.step {
  flex: 0 0 auto; display: flex; align-items: center; gap: 7px;
  font-family: var(--font-body); font-size: var(--text-2); font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--ink-3);
  padding: 5px 0; border: 0; background: none; cursor: default;
  white-space: nowrap;
}
/* La pastille : grise devant soi, bleue derrière, auréolée sur l'étape
   en cours. Elle dit l'état sans que le libellé ait à changer de casse
   ni de couleur de fond.

   Pleine, pas creuse : un anneau de 7 px avec un filet de 1,5 px en
   couleur de trait était invisible à la taille où il sert. Seule la
   couleur distingue, et elle suffit parce que le libellé la double. */
.step > i {
  flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
  background: var(--line-soft);
  transition: background .16s, box-shadow .16s;
}
/* 13 px de trait et 6 px de marge de part et d'autre, pas 18 et 8 : à
   1240 px, la largeur maximale de l'application, le fil dépassait de
   48 px de sa colonne. Il défilait donc, et coupait « Compte » sur un
   écran large où il n'y avait aucune raison de le couper. */
.step + .step::before {
  content: ''; flex: 0 0 auto; width: 13px; height: 1px; margin: 0 6px;
  background: var(--line-soft);
}
.step[data-state="done"] { color: var(--ink-2); cursor: pointer; }
.step[data-state="done"] > i { background: var(--sig); }
.step[data-state="done"]:hover { color: var(--ink); }
.step[data-state="done"]:hover > i { box-shadow: 0 0 0 3px var(--sig-wash); }
/* Le trait qui MÈNE à une étape franchie, ou à celle où l'on est, a
   été parcouru : c'est lui qui porte l'avancement, pas les pastilles. */
.step[data-state="done"]::before,
.step[data-state="now"]::before { background: var(--sig); }
.step[data-state="now"] { color: var(--ink); font-weight: 700; }
.step[data-state="now"] > i { background: var(--sig); box-shadow: 0 0 0 3px var(--sig-wash); }
.step:disabled { cursor: default; }

/* ── L'en-tête quand la ligne ne tient plus ────────────────────────
   À 375 px, les six étapes passaient à la ligne, la rangée de droite
   passait encore en dessous, et l'en-tête mangeait 181 px avant la
   première ligne de contenu : 22 % de l'écran pour une barre de
   navigation, et « Recommencer » débordait même à droite, ce qui
   faisait défiler la page de travers.

   Deux rangées désormais : la marque et les actions sur la première,
   les étapes sur la seconde, en rail qui glisse du doigt. Le seuil est
   passé de 720 à 900 px : le fil d'étapes en Inter est plus large que
   les mêmes mots en capitales mono de 11 px, et entre les deux la
   ligne unique tenait mais à l'étroit. */
@media (max-width: 900px) {
  .topbar { grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; padding: 10px 0 6px; margin-bottom: 18px; }
  .brand { grid-column: 1; grid-row: 1; }
  .topbar-right { grid-column: 2; grid-row: 1; gap: 8px; }
  .brand-word { font-size: 1.3rem; }
  .brand-xi { font-size: .78rem; padding: 4px 6px; }
  .topbar-right .btn-sm { padding: 6px 9px; letter-spacing: .06em; }
  .steps {
    grid-column: 1 / -1; grid-row: 2;
    /* De bord à bord : un rail qui s'arrête avant la marge dit qu'il est
       fini alors qu'il continue. */
    margin: 2px -20px 0; padding: 0 20px 4px;
  }
  .step + .step::before { width: 12px; margin: 0 5px; }
}

/* ═══ Boutons — crochets ═══ */
.btn {
  font-family: var(--font-mono); font-size: var(--text-2); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 11px 18px; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: var(--r); cursor: pointer;
  transition: background .16s, color .16s, border-color .16s, box-shadow .16s, transform .06s;
}
.btn:hover { border-color: var(--sig); color: var(--sig); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--sig); outline-offset: 2px; }
.btn-primary { background: var(--imri-grad); border-color: transparent; color: var(--on-sig); box-shadow: var(--ombre); }
.btn-primary:hover { background: var(--imri-grad-doux); border-color: transparent; color: var(--on-sig); box-shadow: var(--ombre-fort); }
.btn-primary:disabled { background: var(--surface-2); color: var(--ink-3); border-color: var(--line); box-shadow: none; cursor: not-allowed; }
.btn-ghost { background: none; border-color: var(--line); color: var(--ink-3); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--line); color: var(--ink); }
.btn-block { width: 100%; margin-top: 16px; }
.btn-sm { font-size: var(--text-1); padding: 6px 11px; }
.btn-block.btn-sm { margin-top: 8px; }

.pane-actions { display: flex; gap: 10px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.pane-actions .btn-primary { margin-left: auto; }

/* ═══ Grilles ═══ */
.screen[hidden] { display: none; }
.auth-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: start; }
.work-grid { display: grid; grid-template-columns: 296px minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 940px) { .auth-grid, .work-grid { grid-template-columns: 1fr; gap: 28px; } }
.rail { position: sticky; top: 16px; display: grid; gap: 12px; }
@media (max-width: 940px) { .rail { position: static; } }

/* ═══ Écran compte ═══ */
.pitch-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; max-width: 46ch; }
.pitch-list li {
  display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: baseline;
  color: var(--ink-2); font-size: var(--text-3);
  padding: 11px 0; border-top: 1px solid var(--line-soft);
}
.pitch-list li:last-child { border-bottom: 1px solid var(--line-soft); }
.tick { font-family: var(--font-mono); font-size: var(--text-1); color: var(--sig-txt); letter-spacing: .1em; }
/* ── La vitrine de l'accueil ────────────────────────────────────────
   Une carte en vrai, et la liste de ce qu'on peut en faire. La carte
   passe au-dessus sous 620 px : sur un téléphone, la liste compte plus
   que la démonstration, et on la lit avant de défiler. */
.accueil-vitrine {
  display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 26px;
  align-items: start; margin-top: 26px;
}
.accueil-carte { position: sticky; top: 16px; }
@media (max-width: 620px) {
  .accueil-vitrine { grid-template-columns: 1fr; gap: 20px; }
  /* Largeur definie, pas `max-width` : des marges automatiques empechent
     l'etirement de l'element de grille, et la carte retombe alors sur sa
     largeur intrinseque. Elle n'en a pas, ses SVG font 100 % : elle se
     reduisait a ses 6 px de cadre. */
  .accueil-carte { position: static; width: min(208px, 100%); margin: 0 auto; }
}

.feat-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; }
.feat-list li { padding: 11px 0; border-top: 1px solid var(--line-soft); }
.feat-list li:last-child { border-bottom: 1px solid var(--line-soft); }
.feat-list b { display: block; font-size: var(--text-3); color: var(--ink); }
.feat-list span { display: block; margin-top: 3px; font-size: var(--text-2);
  line-height: 1.5; color: var(--ink-2); }
/* La pastille prend l'encre de la signature, pas son aplat : en sombre
   le rouge de marque sous 18 px ne passe pas AA en texte. */
.feat-neuf {
  font-style: normal; font-family: var(--font-mono); font-size: var(--text-1);
  letter-spacing: .12em; text-transform: uppercase; color: var(--sig-txt);
  border: 1px solid var(--sig); border-radius: var(--r-pill);
  padding: 1px 7px; margin-left: 7px; vertical-align: 1px;
}

.demo-note {
  margin-top: 24px; font-family: var(--font-mono); font-size: var(--text-1);
  letter-spacing: .06em; color: var(--ink-3); border-left: 2px solid var(--warn); padding-left: 12px;
}
/* Centré, un bloc pleine largeur laisse son filet gauche au bord de la
   page pendant que le texte part au milieu : on lit un trait orange
   orphelin. Le bloc se réduit donc à son texte. */
.demo-note-centre { display: inline-block; text-align: left; margin: 18px auto 0; }
.bilan-hero .demo-note-centre { display: inline-block; }

.card { background: var(--surface); border: 1px solid var(--line); padding: 24px; border-radius: var(--r); box-shadow: var(--ombre); }
/* Filet de marque de 3 px en haut de la carte, et rien d'autre.
   Les deux couches étaient dans l'ordre inverse : le dégradé, posé en
   premier, est la couche du dessus, et il recouvrait toute la carte au
   lieu de n'apparaître que dans la bordure. D'où, sur le tout premier
   écran du jeu, un libellé « Numéro de téléphone » en gris sur un
   aplat bleu (1,4:1 en clair) et un bouton bleu sur bleu.
   La couche opaque passe donc devant, rognée sur la boîte de padding,
   et le dégradé derrière, rogné sur la boîte de bordure. */
.auth-card { border-top: 3px solid transparent;
  background-image: linear-gradient(var(--surface),var(--surface)), var(--imri-grad);
  background-origin: border-box; background-clip: padding-box, border-box; }

.field-label { display: block; font-family: var(--font-mono); font-size: var(--text-1);
  letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.field-help { font-size: var(--text-2); color: var(--ink-3); margin: 10px 0 0; }
.field-error { font-size: var(--text-3); color: var(--crit-txt); margin: 8px 0 0; font-weight: 500; }

.input {
  width: 100%; font-family: var(--font-body); font-size: var(--text-4); color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-s, 10px);
  padding: 10px 12px; transition: border-color .14s, box-shadow .14s;
}
.input:focus-visible { outline: none; border-color: var(--sig); box-shadow: inset 0 0 0 1px var(--sig); }
select.input { appearance: none; cursor: pointer; padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 16px) calc(50% + 1px), calc(100% - 11px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }

.phone-row { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 8px; }
.phone-row > * { min-width: 0; }
.input-dial { font-family: var(--font-mono); font-size: var(--text-3); }

.otp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.otp-box {
  min-width: 0; width: 100%;
  font-family: var(--font-mono); font-size: var(--text-6); font-weight: 500; text-align: center;
  padding: 10px 0; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-s, 10px); font-variant-numeric: tabular-nums;
}
.otp-box:focus-visible { outline: none; border-color: var(--sig); box-shadow: inset 0 0 0 1px var(--sig); }

.fake-sms {
  margin: 15px 0; padding: 11px 13px;
  background: var(--warn-wash); border-left: 2px solid var(--warn);
  font-family: var(--font-mono); font-size: var(--text-2); color: var(--ink-2);
}
.fake-sms strong { font-size: var(--text-5); letter-spacing: .24em; color: var(--ink); }

/* ═══ Postes ═══ */
/* `auto-fill` laisse une case vide quand le nombre de postes ne tombe
   pas juste (11 postes sur 6 colonnes). Le fond de la grille porte
   donc la couleur d'une tuile : la case vide se lit comme une tuile
   éteinte, pas comme un trou dans le cadre. */
.poste-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-s); overflow: hidden; }
.poste {
  text-align: left; padding: 9px 12px; cursor: pointer;
  background: var(--surface); border: 0; box-shadow: inset 0 0 0 .5px var(--line-soft);
  font-family: var(--font-body); color: var(--ink); transition: background .14s;
}
.poste:hover { background: var(--surface-2); }
.poste b { display: block; font-family: var(--font-mono); font-size: var(--text-1); letter-spacing: .12em; color: var(--sig-txt); }
.poste span { font-size: var(--text-3); }
.poste[aria-pressed="true"] { background: var(--imri-grad); }
.poste[aria-pressed="true"] b { color: #ffffff; opacity: .78; }
.poste[aria-pressed="true"] span { color: var(--on-sig); }

/* ═══ Formulaire ═══ */
.form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.form-grid > * { min-width: 0; }
.fg-1 { grid-column: span 1; } .fg-2 { grid-column: span 2; } .fg-4 { grid-column: span 4; }
@media (max-width: 640px) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fg-2, .fg-4 { grid-column: span 2; } }

/* ═══ Cadres familiaux ═══ */
.cadre-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 9px; }
.cadre {
  text-align: left; cursor: pointer; padding: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  font-family: var(--font-body); color: var(--ink);
  display: grid; gap: 7px; align-content: start; transition: border-color .14s;
}
.cadre:hover { border-color: var(--ink-3); }
.cadre[aria-pressed="true"] { border-color: var(--sig); box-shadow: inset 0 0 0 1px var(--sig); }
.cadre-emoji { font-size: 19px; line-height: 1; }
.cadre h3 { font-family: var(--font-display); font-size: var(--text-6); font-weight: 700;
  margin: 0; line-height: var(--lh-tight); }
.cadre p { margin: 0; font-size: var(--text-2); color: var(--ink-2); line-height: 1.5; }
.cadre-eff { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
/* Le dernier bloc d'un cadre se colle au bas de la tuile : sinon
   « 1.5 M€ au départ » flotte à une hauteur différente dans chaque
   carte de la rangée, et l'œil ne peut plus comparer. */
.cadre .cadre-eff:last-child { margin-top: auto; padding-top: 4px; }
.cadre h3 { text-wrap: balance; }
.eff {
  font-family: var(--font-mono); font-size: var(--text-1); padding: 2px 5px;
  border: 1px solid var(--pos); background: var(--pos-wash); color: var(--pos-txt);
}
.eff.neg { border-color: var(--crit); background: var(--crit-wash); color: var(--crit-txt); }
.eff.info { border-color: var(--line); background: none; color: var(--ink-3); }

/* ═══ Éditeurs ═══ */
.editor-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 15px; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tab {
  font-family: var(--font-mono); font-size: var(--text-1); letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 11px; border: 1px solid var(--line); background: none; color: var(--ink-3); cursor: pointer;
}
.tab:hover { color: var(--ink); border-color: var(--ink-3); }
.tab[aria-selected="true"] { background: var(--imri-grad); border-color: transparent; color: var(--on-sig); }
.editor-toolbar .btn { margin-left: auto; }

.controls { display: grid; gap: 17px; }
.control h4 {
  font-family: var(--font-mono); font-size: var(--text-1); letter-spacing: var(--ls-mono);
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 7px; font-weight: 400;
}
.swatches { display: flex; flex-wrap: wrap; gap: 5px; }
/* Un liseré noir sur fond sombre ne borde plus rien : les pastilles
   sombres se fondaient dans la page et on ne voyait pas où finissait
   le carré. Le liseré prend la couleur du texte à faible opacité, il
   tient donc dans les deux thèmes. */
.swatch { width: 28px; height: 28px; cursor: pointer; padding: 0; border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  transition: transform .12s, box-shadow .12s; }
.swatch:hover { transform: scale(1.1); }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 1px var(--surface), 0 0 0 3px var(--sig); }

.opts { display: flex; flex-wrap: wrap; gap: 5px; }
.opt {
  min-width: 32px; padding: 6px 10px; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--text-1); letter-spacing: .06em;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-2);
}
.opt:hover { border-color: var(--ink-3); color: var(--ink); }
.opt[aria-pressed="true"] { background: var(--imri-grad); border-color: transparent; color: var(--on-sig); }

.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 5px; }
.thumb { cursor: pointer; padding: 2px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.thumb svg { display: block; width: 100%; height: auto; }
.thumb[aria-pressed="true"] { border-color: var(--sig); box-shadow: inset 0 0 0 1px var(--sig); }

.kit-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 320px;
  background: var(--surface-2); border: 1px solid var(--line); padding: 8px; }
.kit-preview svg { display: block; width: 100%; height: auto; }

/* ═══════════ CARRIÈRE — trois panneaux ═══════════ */
.screen-career { --gutter: 162px; }
.career {
  display: grid; grid-template-columns: 278px minmax(0, 1fr) 316px; gap: 14px;
  height: calc(100vh - var(--gutter)); min-height: 540px;
}
.col { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.col-card, .col-side { overflow-y: auto; overscroll-behavior: contain; }
.col-stage { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--ombre); }
@media (max-width: 1120px) {
  .career { grid-template-columns: 1fr; height: auto; }
  .col-card, .col-side { overflow: visible; }
  .col-stage { order: -1; }

  /* Sur un écran étroit, le panneau perd sa hauteur fixe : le bouton de
     l'étape suivante descend sous tout le récit, et il faut faire
     défiler l'écran entier à chaque clic pour le retrouver. Il reste
     donc collé au bas du panneau pendant qu'on lit.

     `position: sticky` ne tient pas dans un ancêtre `overflow: hidden` :
     le panneau doit donc rendre son rognage, et ce sont ses deux
     extrémités qui reprennent l'arrondi à leur compte. */
  .col-stage { overflow: visible; }
  .stage { border-radius: var(--r) var(--r) 0 0; overflow: hidden; }
  .stage-action {
    position: sticky; bottom: 0; z-index: 2;
    border-radius: 0 0 var(--r) var(--r);
    box-shadow: 0 -6px 16px -8px rgba(0,0,0,.45);
  }
}

/* La barre d'action sur un téléphone : le micro-index est un ornement,
   il passe dessous, et le bouton de l'étape prend la place qui reste au
   lieu de partir seul sur une deuxième ligne. */
@media (max-width: 560px) {
  .stage-action { gap: 8px; padding: 10px 14px 12px; }
  .stage-action .micro-index { flex: 1 0 100%; order: 3; }
  .stage-action .btn-primary { margin-left: 0; flex: 1 1 auto; }
}

.stage { flex: 0 0 auto; height: clamp(148px, 21vh, 214px); border-bottom: 1px solid var(--line); }
.stage svg.scene { display: block; width: 100%; height: 100%; background: none; }
@media (max-width: 1120px) { .stage { height: clamp(146px, 32vw, 210px); } }

.stage-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 0 22px 10px; }

.moment-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: end;
  padding: 13px 0 11px; border-bottom: 1px solid var(--line); margin-bottom: 15px;
}
.mh-left { display: grid; gap: 4px; }
.mh-club { font-family: var(--font-display); font-size: var(--text-5); font-weight: 600;
  text-transform: uppercase; line-height: 1; }
.mh-right { text-align: right; }
.mh-right .num-geant { font-size: clamp(2.5rem, 4.6vw, 4rem); }

.stage-body p.recit { margin: 0 0 11px; color: var(--ink-2); font-size: var(--text-4); max-width: 60ch; }
.stage-body .titre { margin-bottom: 11px; }

.stage-action {
  flex: 0 0 auto; padding: 11px 22px 13px; border-top: 1px solid var(--line);
  background: var(--surface); display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.stage-action .btn-primary { margin-left: auto; }

.choices { display: grid; gap: 5px; margin-top: 15px; }
.choice {
  text-align: left; cursor: pointer; padding: 11px 14px;
  background: var(--paper); border: 1px solid var(--line); color: var(--ink);
  font-family: var(--font-body); font-size: var(--text-3); line-height: 1.5;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px; align-items: baseline;
  transition: border-color .14s, background .14s, color .14s;
}
.choice:hover { border-color: var(--sig); background: var(--sig-wash); color: var(--sig-txt); box-shadow: var(--ombre); }
.choice .ch-n { font-family: var(--font-mono); font-weight: 500; color: var(--sig-txt); }

.outcome {
  margin-top: 13px; padding: 12px 14px; background: var(--surface-2);
  border-left: 2px solid var(--warn); font-size: var(--text-3); animation: rise .35s ease both;
}
.outcome em { color: var(--ink); font-style: italic; }
.deltas { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 9px; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ═══ Le budget de saison ═══
   Les dix semaines sont un seul objet : une barre en trois segments
   qu'on pousse. On ne peut pas ajouter sans retirer ailleurs, et le
   dessin doit le dire avant que le doigt arrive sur le bouton. */
.budget { margin-top: 15px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.bud-head {
  font-family: var(--font-mono); font-size: var(--text-1); letter-spacing: var(--ls-mono);
  text-transform: uppercase; color: var(--ink-3);
  padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2);
  display: flex; justify-content: space-between; gap: 8px;
}
.bud-barre { display: flex; height: 26px; background: var(--surface-2); }
.bud-seg {
  display: flex; align-items: center; justify-content: center; min-width: 0;
  font-family: var(--font-mono); font-size: var(--text-1); font-weight: 600;
  transition: flex-grow .18s ease;
}
.bud-seg b { opacity: .85; }
.bud-physique { background: var(--warn-wash); color: var(--warn-txt); }
.bud-jeu      { background: var(--sig-wash);  color: var(--sig-txt); }
.bud-repos    { background: var(--pos-wash);  color: var(--pos-txt); }
span.bud-pastille { width: 9px; height: 9px; border-radius: var(--r-pill); flex: 0 0 auto; }

.bud-lignes { display: grid; gap: 1px; background: var(--line); }
.bud-ligne { background: var(--surface); padding: 10px 12px; display: grid; gap: 5px; }
.bud-tete { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.bud-tete b { font-size: var(--text-3); }
.bud-cles {
  margin-left: auto; font-family: var(--font-mono); font-size: var(--text-1);
  letter-spacing: .04em; color: var(--pos-txt);
}
.bud-cles.vide { color: var(--ink-3); }
.bud-d { margin: 0; font-size: var(--text-2); color: var(--ink-2); line-height: 1.45; }
.bud-reglage { display: flex; align-items: center; gap: 9px; }
.bud-b {
  width: 30px; height: 30px; flex: 0 0 auto; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-s); background: var(--paper);
  color: var(--ink); font-size: var(--text-4); line-height: 1;
  transition: border-color .14s, background .14s;
}
.bud-b:hover { border-color: var(--sig); background: var(--sig-wash); color: var(--sig-txt); }
.bud-n { font-family: var(--font-mono); font-size: var(--text-5); font-variant-numeric: tabular-nums; }
.bud-n small { font-size: var(--text-1); color: var(--ink-3); margin-left: 4px; }

.bud-couts { padding: 10px 12px; border-top: 1px solid var(--line); background: var(--surface-2); display: grid; gap: 4px; }
.bud-cout { margin: 0; font-size: var(--text-2); color: var(--pos-txt); }
.bud-cout.neg { color: var(--warn-txt); }
.bud-bilan { border-top: 1px solid var(--line); }
.bud-bilan .block-head { background: var(--surface); }
.bud-rappel { margin: 0 0 4px; font-family: var(--font-mono); font-size: var(--text-1); letter-spacing: .06em; color: var(--ink-3); }
.bud-verdict { margin: 0; font-size: var(--text-2); color: var(--ink-2); }

.offers { display: grid; gap: 5px; margin-top: 15px; }
.offer {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 11px 14px; cursor: pointer; text-align: left;
  background: var(--paper); border: 1px solid var(--line); color: var(--ink);
  font-family: var(--font-body); transition: border-color .14s, background .14s;
}
.offer:hover { border-color: var(--sig); background: var(--sig-wash); }
.offer b { display: block; font-size: var(--text-4); }
.offer small { font-family: var(--font-mono); font-size: var(--text-1); letter-spacing: .06em; color: var(--ink-3); }
.offer-num { font-family: var(--font-mono); font-size: var(--text-3); text-align: right; font-variant-numeric: tabular-nums; }

/* ═══ Blocs latéraux ═══ */
.block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; flex: 0 0 auto; box-shadow: var(--ombre); }
.block-head {
  font-family: var(--font-mono); font-size: var(--text-1); letter-spacing: var(--ls-mono);
  text-transform: uppercase; color: var(--ink-3);
  padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2);
  display: flex; justify-content: space-between; gap: 8px;
}
.block-body { padding: 11px 12px; }

.scoreline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.sl { background: var(--surface); padding: 9px 6px; text-align: center; }
.sl b { display: block; font-family: var(--font-mono); font-weight: 600; font-size: var(--text-6);
  line-height: 1.05; font-variant-numeric: tabular-nums; }
.sl span { font-family: var(--font-mono); font-size: var(--text-1); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); }

.stat-list { display: grid; gap: 5px; }
.stat-row { display: grid; grid-template-columns: 80px minmax(0,1fr) 24px; align-items: center; gap: 8px; }
.stat-row span { font-size: var(--text-2); color: var(--ink-2); }
.stat-row b { font-family: var(--font-mono); font-size: var(--text-1); text-align: right; font-variant-numeric: tabular-nums; }
.bar { height: 6px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--sec); transition: width .35s ease; }
.bar.key i { background: var(--imri-grad-doux); }

.press { display: grid; gap: 1px; background: var(--line); }
.press-item { background: var(--surface); padding: 11px 12px; animation: rise .35s ease both; }
.press-src {
  font-family: var(--font-mono); font-size: var(--text-1); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 5px; display: flex; align-items: center; gap: 6px;
}
.press-src::before { content: ""; width: 5px; height: 5px; background: var(--sec); flex: 0 0 auto; }
.press-item.k-une .press-src::before    { background: var(--crit); }
.press-item.k-people .press-src::before { background: var(--warn); }
.press-item.k-reseau .press-src::before { background: var(--pos); }
.press-item.k-breve .press-src::before  { background: var(--ink-3); }
.press-txt { margin: 0; font-size: var(--text-2); color: var(--ink-2); line-height: 1.5; }
.press-item.k-une .press-txt {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-6);
  line-height: var(--lh-tight); color: var(--ink);
}
.press-item.k-radio .press-txt { font-style: italic; color: var(--ink); }
.press-item.k-reseau .press-txt { font-family: var(--font-mono); font-size: var(--text-1); line-height: 1.6; }

.histo { display: grid; gap: 1px; background: var(--line); }
.histo-row { background: var(--surface); padding: 7px 12px;
  display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 10px; align-items: baseline; }
.histo-row time { font-family: var(--font-mono); font-size: var(--text-1); color: var(--ink-3); }
.histo-row span { font-size: var(--text-2); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.histo-row b { font-family: var(--font-mono); font-size: var(--text-1); font-variant-numeric: tabular-nums; }

/* ═══════════ CARTE JOUEUR ═══════════ */
/* La carte est l'objet du jeu : c'est elle qu'on frappe à la retraite,
   qu'on collectionne, qu'on échange. Elle ne se rend donc pas comme une
   fiche de l'interface mais comme une carte : un champ sombre, un métal
   qui dit la rareté. Et ce métal ne suit pas le thème. Un objet garde sa
   matière : une Or reste une Or que le visiteur soit en clair ou en
   sombre, sinon deux joueurs ne parlent pas de la même carte.

   La même carte est servie à quatre largeurs : 296 px dans le rail,
   232 px dans la collection, 176 px dans la grille de troc, 160 px à
   deux colonnes sur un téléphone. Elle se mesure donc elle-même. C'est
   le seul endroit du jeu qui en a besoin : ailleurs, c'est la page qui
   commande. */

/* Les quatre métaux. Posés sur une classe nue, pas sur `.pcard` : le dos
   de la carte de collection porte le même, et il n'est pas une `.pcard`. */
.pcard, .collec-item {
  --pc-metal:   linear-gradient(152deg,#5E656E 0%,#F1F5F9 28%,#8A9099 50%,#FAFCFE 70%,#545B64 100%);
  --pc-champ-1: #161B21;
  --pc-champ-2: #0A0D11;
  --pc-lueur:   #9DB4CE;
  --pc-ink:     #F4F7FA;
  --pc-ink-2:   #AEB9C6;
  --pc-filet:   rgba(255,255,255,.13);
  --pc-plaque:  rgba(255,255,255,.055);
}
.pc-bronze {
  --pc-metal:   linear-gradient(152deg,#5C3416 0%,#E8B584 28%,#8C5A2B 50%,#F2CBA3 70%,#4E2C12 100%);
  --pc-champ-1: #231508; --pc-champ-2: #120A04;
  --pc-lueur:   #C08650; --pc-ink: #F8EADB; --pc-ink-2: #C9A98C;
}
.pc-argent {
  --pc-metal:   linear-gradient(152deg,#5E656E 0%,#F1F5F9 28%,#8A9099 50%,#FAFCFE 70%,#545B64 100%);
  --pc-champ-1: #161B21; --pc-champ-2: #0A0D11;
  --pc-lueur:   #9DB4CE; --pc-ink: #F4F7FA; --pc-ink-2: #AEB9C6;
}
.pc-or {
  --pc-metal:   linear-gradient(152deg,#7A5310 0%,#FFE9A3 28%,#C79A2A 50%,#FFF3CC 70%,#6B470C 100%);
  --pc-champ-1: #241A05; --pc-champ-2: #120C02;
  --pc-lueur:   #C9962F; --pc-ink: #FFF4DC; --pc-ink-2: #D9BE84;
}
/* La Légende est la seule carte qui prend la couleur de marque, et donc
   la seule qui change avec le thème : bleue chez l'un, rouge chez
   l'autre. C'est le seul moment du jeu où la signature se voit sur un
   objet, et il faut l'avoir mérité. */
.pc-legende {
  --pc-metal:   linear-gradient(152deg,var(--imri-marine) 0%,var(--imri-ciel) 20%,#FFFFFF 36%,var(--imri-bleu) 52%,#FFFFFF 68%,var(--imri-ciel) 82%,var(--imri-marine) 100%);
  --pc-champ-1: var(--imri-marine); --pc-champ-2: #06070C;
  --pc-lueur:   var(--imri-ciel); --pc-ink: #FFFFFF;
  /* L'encre secondaire bascule avec le métal, sinon la Légende rouge du
     thème sombre portait des jauges et une ligne d'identité bleues. */
  --pc-ink-2:   var(--imri-encre-legende);
}

.pcard {
  container-type: inline-size;
  flex: 0 0 auto;
  position: relative;
  border-radius: var(--r);
  padding: 3px;
  background: var(--pc-metal);
  box-shadow: var(--ombre-fort);
}
.pcard-in {
  position: relative;
  border-radius: calc(var(--r) - 3px);
  overflow: hidden;
  background: linear-gradient(176deg, var(--pc-champ-1) 0%, var(--pc-champ-2) 100%);
  color: var(--pc-ink);
  /* Le biseau : sans lui, le metal est un aplat colle au champ. Un filet
     clair en haut, une ombre portee vers l'interieur, et la carte a une
     epaisseur. */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 22px rgba(0,0,0,.55);
}

/* ── L'art : un seul point de mire ──────────────────────────────────
   Le portrait et le maillot étaient côte à côte, à largeur égale : deux
   objets de même poids, donc aucun. Le joueur porte maintenant les
   couleurs de son club (`busteSVG` les prend en paramètre) et l'écusson
   dit le reste depuis la colonne de gauche. */
.pcard-art {
  position: relative;
  display: grid;
  grid-template-columns: 29% 1fr;
  align-items: end;
  padding-top: 6px;
}
.pcard-art::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(112% 82% at 62% 8%, var(--pc-lueur) 0%, transparent 64%);
  opacity: .26; pointer-events: none;
}
.pcard-portrait { grid-column: 2; grid-row: 1; position: relative; z-index: 1;
  margin: 0 -4% -1px -6%; }
.pcard-portrait svg { display: block; width: 100%; height: auto; }

.pcard-rang {
  grid-column: 1; grid-row: 1; position: relative; z-index: 2;
  align-self: center;
  display: grid; justify-items: center; gap: 1px;
  padding: 4px 6px 10px 6px;
}
.pcard-rang::after {
  content: ''; position: absolute; right: 0; top: 10%; bottom: 10%;
  width: 1px; background: var(--pc-filet);
}
.pcard-rang b {
  font-family: var(--font-mono); font-weight: 600; font-size: 2.1rem; line-height: .92;
  letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--pc-ink);
}
.pcard-rang i {
  font-style: normal; font-family: var(--font-mono); font-size: var(--text-1);
  letter-spacing: .12em; color: var(--pc-ink-2);
}
.pcard-rang em { font-style: normal; font-size: 13px; line-height: 1; margin-top: 4px; }
.pcard-crest { display: block; width: 100%; max-width: 44px; margin-top: 5px; }
.pcard-crest svg { display: block; width: 100%; height: auto; }

/* ── La plaque du nom ───────────────────────────────────────────────
   Hauteur fixe : dans une grille, un nom qui passe à la ligne décalait
   toutes les données de la carte, et deux cartes côte à côte cessaient
   d'être comparables. Le nom rétrécit plutôt que de descendre. */
.pcard-ident {
  position: relative; z-index: 2; text-align: center;
  padding: 6px 10px 7px;
  border-top: 1px solid var(--pc-filet);
  background: var(--pc-plaque);
}
.pcard-ident b {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-6); line-height: var(--lh-tight); text-transform: uppercase;
  color: var(--pc-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pcard-ident span {
  display: block; margin-top: 3px; font-family: var(--font-mono); font-size: var(--text-1);
  letter-spacing: .08em; color: var(--pc-ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Les quatre clés du poste ───────────────────────────────────────
   Les quatre attributs qui font la note à ce poste, et rien d'autre.
   Ils étaient dans un bloc à barres sous la carte : ils sont à elle. */
.pcard-cles { display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--pc-filet); }
.pc-cle { position: relative; padding: 7px 2px 8px; text-align: center; }
.pc-cle + .pc-cle::before {
  content: ''; position: absolute; left: 0; top: 18%; bottom: 18%;
  width: 1px; background: var(--pc-filet);
}
.pc-cle b {
  display: block; font-family: var(--font-mono); font-weight: 600; font-size: var(--text-5);
  line-height: 1; font-variant-numeric: tabular-nums; color: var(--pc-ink);
}
.pc-cle > i {
  display: block; margin-top: 3px; font-style: normal; font-family: var(--font-mono);
  font-size: 9px; letter-spacing: .1em; color: var(--pc-ink-2);
}
.pc-jauge { display: block; width: 62%; height: 2px; margin: 6px auto 0;
  background: var(--pc-filet); border-radius: 2px; overflow: hidden; }
.pc-jauge > i { display: block; height: 100%; background: var(--pc-ink-2); }

/* ── Le tableau, réduit à ce que la carte ne dit pas ailleurs ──────── */
/* `auto` en seconde colonne ne rétrécit jamais : un nom de club long
   passait par-dessus son libellé au lieu de se tronquer. */
.pcard-data { display: grid; border-top: 1px solid var(--pc-filet); }
.pcard-row {
  display: grid; grid-template-columns: minmax(0,auto) minmax(0,1fr); gap: 10px;
  align-items: baseline; padding: 5px 11px;
}
.pcard-row + .pcard-row { border-top: 1px solid var(--pc-filet); }
.pcard-row .k { font-family: var(--font-mono); font-size: var(--text-1); letter-spacing: .1em;
  text-transform: uppercase; color: var(--pc-ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard-row .v { font-family: var(--font-mono); font-size: var(--text-2); font-variant-numeric: tabular-nums;
  text-align: right; color: var(--pc-ink); }
.pcard-row .v.club { font-family: var(--font-body); font-weight: 600; font-size: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pcard-foot {
  padding: 7px 11px 9px; border-top: 1px solid var(--pc-filet); background: var(--pc-plaque);
  display: flex; justify-content: space-between; gap: 8px; align-items: center;
}
.pcard-rar { font-family: var(--font-mono); font-size: var(--text-1); letter-spacing: .16em;
  text-transform: uppercase; color: var(--pc-ink); }
.pcard-serie { font-family: var(--font-mono); font-size: var(--text-1); letter-spacing: .05em;
  color: var(--pc-ink-2); white-space: nowrap; }

/* Le balayage de la Légende. Une seule propriété animée, et rien sous
   `prefers-reduced-motion` : c'est du décor, pas de l'information. */
.pc-legende .pcard-in::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(104deg, transparent 34%, rgba(255,255,255,.10) 46%,
              rgba(255,255,255,.26) 50%, rgba(255,255,255,.10) 54%, transparent 66%);
  background-size: 280% 100%;
  animation: pc-foil 7s linear infinite;
}
@keyframes pc-foil { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@media (prefers-reduced-motion: reduce) {
  .pc-legende .pcard-in::after { animation: none; background-position: 42% 0; }
}

/* ── La carte en petit ──────────────────────────────────────────── */
@container (max-width: 205px) {
  .pcard-rang { padding: 2px 4px 8px 4px; }
  .pcard-rang b { font-size: 1.5rem; }
  .pcard-rang i { font-size: 8px; letter-spacing: .06em; }
  .pcard-rang em { font-size: 11px; }
  .pcard-crest { max-width: 32px; margin-top: 3px; }
  .pcard-ident { padding: 5px 7px 6px; }
  .pcard-ident b { font-size: 1.05rem; }
  .pcard-ident span { font-size: 8px; letter-spacing: .03em; }
  .pc-cle { padding: 5px 1px 6px; }
  .pc-cle b { font-size: 1rem; }
  .pc-cle > i { font-size: 7px; letter-spacing: .04em; }
  .pc-jauge { height: 2px; margin-top: 4px; }
  .pcard-row { padding: 4px 8px; gap: 6px; }
  .pcard-row .k { font-size: 8px; letter-spacing: .04em; }
  .pcard-row .v { font-size: 10px; }
  .pcard-row .v.club { font-size: 11px; }
  .pcard-foot { padding: 5px 8px 7px; gap: 5px; }
  .pcard-rar { font-size: 8px; letter-spacing: .08em; }
  .pcard-serie { font-size: 8px; letter-spacing: .02em; }
}

.rarete { font-family: var(--font-mono); font-size: var(--text-1); letter-spacing: .1em;
  text-transform: uppercase; padding: 2px 6px; border: 1px solid; }
.rarete-bronze  { color: var(--ink-3); border-color: var(--line); }
.rarete-argent  { color: var(--ink-2); border-color: var(--ink-3); border-style: double; border-width: 3px; padding: 1px 5px; }
.rarete-or      { color: var(--warn-txt); border-color: var(--warn); background: var(--warn-wash); }
.rarete-legende { color: var(--on-sig); border-color: transparent; background: var(--imri-grad); }

/* ═══ Bilan ═══ */
.bilan-wrap { max-width: 860px; margin: 0 auto; }
.bilan-hero { text-align: center; padding: 20px 0 28px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
/* Neuf chiffres : aucune largeur de colonne ne tombe juste. Le fond de
   la grille est donc celui d'une tuile, et les filets sont posés à
   l'intérieur de chaque tuile — la case en trop disparaît au lieu de
   faire un bloc plus clair en bas à droite. */
.honours { display: grid; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s);
  overflow: hidden; margin: 20px 0; }
.honour { background: var(--surface); padding: 14px; text-align: center;
  box-shadow: inset 0 0 0 .5px var(--line); }
.honour b { display: block; font-family: var(--font-mono); font-weight: 600; font-size: var(--text-7);
  line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* « 11.3 M€ » passait à la ligne et décalait son libellé d'un cran :
   l'unité rétrécit, le nombre garde sa taille. */
.honour b .u { font-size: var(--text-5); letter-spacing: .01em; }
.honour span { font-family: var(--font-mono); font-size: var(--text-1); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); }
table { border-collapse: collapse; width: 100%; font-size: var(--text-2); min-width: 560px; }
th, td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--line-soft); }
th { font-family: var(--font-mono); font-size: var(--text-1); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); background: var(--surface-2); }
td.num { font-family: var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: none; }

/* ═══════════ SCÈNES — animations ═══════════ */
.scene { background: var(--sc-fond); }
.sc-bulle { fill: var(--sc-clair); opacity: 0; animation: scBulle 2.6s ease-out infinite; }
@keyframes scBulle { 0% { opacity: 0; transform: translateY(0) scale(.4); } 18% { opacity: .95; } 100% { opacity: 0; transform: translateY(-64px) scale(1); } }
.sc-bouchon { animation: scBouchon 3.4s cubic-bezier(.2,.8,.3,1) infinite; }
@keyframes scBouchon { 0%,12% { transform: translate(0,0) rotate(0); } 34% { transform: translate(26px,-58px) rotate(120deg); } 60%,100% { transform: translate(64px,120px) rotate(400deg); opacity: 0; } }
.sc-stylo { animation: scStylo 3.4s ease-in-out infinite; transform-origin: 200px 112px; }
@keyframes scStylo { 0%,70%,100% { transform: translate(0,0); } 20% { transform: translate(-46px,6px); } 40% { transform: translate(-96px,2px); } }
.sc-signature { stroke-dasharray: 120; stroke-dashoffset: 120; animation: scTrace 3.4s ease-in-out infinite; }
@keyframes scTrace { 0%,8% { stroke-dashoffset: 120; } 46%,100% { stroke-dashoffset: 0; } }
.sc-ecg { stroke-dasharray: 160; stroke-dashoffset: 160; animation: scEcg 2.2s linear infinite; }
@keyframes scEcg { 0% { stroke-dashoffset: 160; } 60%,100% { stroke-dashoffset: -160; } }
.sc-goutte { animation: scGoutte 2s ease-in infinite; }
@keyframes scGoutte { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 1; } 100% { transform: translateY(16px); opacity: 0; } }
.sc-tete { fill: var(--sc-trait); animation: scOla 2.4s ease-in-out infinite; }
@keyframes scOla { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-5px); } }
.sc-ballon { animation: scBallon 2.8s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes scBallon { 0%,100% { transform: translate(0,0); } 50% { transform: translate(64px,-34px); } }
.sc-halo { animation: scHalo 4s ease-in-out infinite; }
@keyframes scHalo { 0%,100% { opacity: .7; } 50% { opacity: 1; } }
.sc-flash { opacity: 0; animation: scFlash 3.2s steps(1) infinite; }
@keyframes scFlash { 0%,6%,10%,44%,48%,100% { opacity: 0; } 4%,46% { opacity: .5; } }
.sc-spot { animation: scSpot 1.6s ease-in-out infinite; }
.sc-spot2 { animation-delay: .5s; } .sc-spot3 { animation-delay: 1s; }
@keyframes scSpot { 0%,100% { opacity: .15; } 50% { opacity: 1; } }
.sc-micro { animation: scMicro 2.6s ease-in-out infinite; }
.sc-micro2 { animation-delay: .35s; } .sc-micro3 { animation-delay: .7s; }
@keyframes scMicro { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.sc-avion { animation: scAvion 7s linear infinite; }
@keyframes scAvion { 0% { transform: translate(-260px,30px); } 100% { transform: translate(340px,-40px); } }
.sc-nuage { animation: scNuage 12s linear infinite; }
@keyframes scNuage { 0% { transform: translateX(0); } 100% { transform: translateX(-120px); } }
.sc-valise { animation: scValise 2.4s ease-in-out infinite; }
@keyframes scValise { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.sc-confetti { animation: scConfetti 3.4s linear infinite; }
@keyframes scConfetti { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(230px) rotate(540deg); opacity: .2; } }
.sc-coupe { animation: scCoupe 3s ease-in-out infinite; transform-origin: 160px 150px; }
@keyframes scCoupe { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-7px) rotate(-1.5deg); } }
.sc-rayons { animation: scHalo 3s ease-in-out infinite; }
.sc-coeur { animation: scCoeur 3s ease-out infinite; opacity: 0; }
.sc-coeur2 { animation-delay: .9s; } .sc-coeur3 { animation-delay: 1.7s; }
@keyframes scCoeur { 0% { opacity: 0; transform: scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-70px) scale(1.1); } }
.sc-billet { animation: scBillet 3.6s linear infinite; }
@keyframes scBillet { 0% { transform: translateY(0) rotate(-8deg); } 100% { transform: translateY(210px) rotate(14deg); } }
.sc-mallette { animation: scCoupe 2.8s ease-in-out infinite; }
.sc-maillot-pendu { animation: scPendu 4s ease-in-out infinite; transform-origin: 160px 46px; }
@keyframes scPendu { 0%,100% { transform: rotate(-2.2deg); } 50% { transform: rotate(2.2deg); } }
.sc-drapeau { animation: scDrapeau 3s ease-in-out infinite; transform-origin: 80px 60px; }
@keyframes scDrapeau { 0%,100% { transform: skewY(0deg); } 50% { transform: skewY(-2.6deg); } }
.sc-note1, .sc-note2 { animation: scNote 3s ease-out infinite; opacity: 0; }
.sc-note2 { animation-delay: 1.2s; }
@keyframes scNote { 0% { opacity: 0; transform: translateY(0); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(18px,-46px); } }
.sc-jambe1 { animation: scCourse .5s ease-in-out infinite alternate; transform-origin: 140px 130px; }
.sc-jambe2 { animation: scCourse .5s ease-in-out infinite alternate-reverse; transform-origin: 158px 130px; }
@keyframes scCourse { from { transform: rotate(-24deg); } to { transform: rotate(24deg); } }
.sc-coureur { animation: scBond .5s ease-in-out infinite alternate; }
@keyframes scBond { from { transform: translateY(0); } to { transform: translateY(-4px); } }
.sc-plots { animation: scDefile 3s linear infinite; }
@keyframes scDefile { from { transform: translateX(0); } to { transform: translateX(-74px); } }
.sc-assis { animation: scAssis 4.2s ease-in-out infinite; }
.sc-assis2 { animation-delay: .8s; } .sc-assis3 { animation-delay: 1.6s; }
@keyframes scAssis { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.sc-crampons { animation: scPendu 5s ease-in-out infinite; transform-origin: 160px 32px; }
.sc-plateau1 { animation: scBalance1 4s ease-in-out infinite; transform-origin: 160px 46px; }
.sc-plateau2 { animation: scBalance2 4s ease-in-out infinite; transform-origin: 160px 46px; }
@keyframes scBalance1 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(16px); } }
@keyframes scBalance2 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }

@media (prefers-reduced-motion: reduce) {
  .scene *, .outcome, .press-item { animation: none !important; }
  .bar i { transition: none; }
  /* Et tout le reste : le jeu change d'écran, de carte et de barre à
     chaque clic. Quand le système demande moins de mouvement, il le
     demande pour tout, pas seulement pour les illustrations. */
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .btn:active { transform: none; }
  .swatch:hover { transform: none; }
}

/* ═══════════ INTERSAISON — animations par poste ═══════════ */
.sc-plongeon { animation: scPlongeon 3s cubic-bezier(.3,.7,.4,1) infinite; transform-origin: 130px 120px; }
@keyframes scPlongeon { 0%,18% { transform: translate(24px,26px) rotate(14deg); } 44%,72% { transform: translate(0,0) rotate(-12deg); } 100% { transform: translate(24px,26px) rotate(14deg); } }
.sc-penalty { animation: scPenalty 3s cubic-bezier(.25,.6,.4,1) infinite; }
@keyframes scPenalty { 0%,12% { transform: translate(102px,122px) scale(.72); opacity: 1; } 46% { transform: translate(0,0) scale(1); opacity: 1; } 62%,100% { transform: translate(-14px,10px) scale(1); opacity: 0; } }

.sc-frappeur { animation: scElan 2.6s ease-in-out infinite; }
@keyframes scElan { 0%,40% { transform: translateX(0); } 52% { transform: translateX(7px); } 100% { transform: translateX(0); } }
.sc-jambefrappe { animation: scJambeFrappe 2.6s ease-in-out infinite; transform-origin: 120px 122px; }
@keyframes scJambeFrappe { 0%,38% { transform: rotate(-34deg); } 52% { transform: rotate(26deg); } 100% { transform: rotate(-34deg); } }
.sc-tir { animation: scTir 2.6s cubic-bezier(.2,.7,.4,1) infinite; }
@keyframes scTir { 0%,48% { transform: translate(0,0); opacity: 1; } 84% { transform: translate(118px,-72px) scale(.62); opacity: 1; } 100% { transform: translate(118px,-72px) scale(.62); opacity: 0; } }

.sc-saut  { animation: scSaut 2.8s cubic-bezier(.3,.6,.4,1) infinite; }
.sc-saut2 { animation: scSaut 2.8s cubic-bezier(.3,.6,.4,1) infinite; animation-delay: .12s; }
@keyframes scSaut { 0%,30% { transform: translateY(16px); } 56% { transform: translateY(-10px); } 100% { transform: translateY(16px); } }
.sc-ballonhaut { animation: scBallonHaut 2.8s ease-in-out infinite; }
@keyframes scBallonHaut { 0%,30% { transform: translateY(-14px); } 56% { transform: translateY(6px); } 100% { transform: translateY(-14px); } }

.sc-passeur { animation: scElan 3s ease-in-out infinite; }
.sc-jambepasse { animation: scJambeFrappe 3s ease-in-out infinite; transform-origin: 108px 124px; }
.sc-passe { animation: scPasse 3s cubic-bezier(.3,.6,.4,1) infinite; }
@keyframes scPasse { 0%,44% { transform: translate(0,0); opacity: 1; } 82% { transform: translate(74px,-2px) scale(.84); opacity: 1; } 100% { transform: translate(74px,-2px) scale(.84); opacity: 0; } }
.sc-trajet { stroke-dashoffset: 0; animation: scTrajet 3s linear infinite; }
@keyframes scTrajet { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -44; } }

/* ═══════════ ÉDITEURS — grand aperçu et vignettes ═══════════ */
.preview-xl {
  display: grid; place-items: center; margin-bottom: 16px; padding: 18px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r);
}
#avatarBig svg { display: block; width: 240px; height: 240px; }
.preview-kit { padding: 14px; }
#kitBig .kit-preview {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  max-width: 420px; background: none; border: 0; padding: 0;
}
#kitBig .kit-preview svg { width: 100%; height: auto; }
@media (max-width: 560px) { #avatarBig svg { width: 180px; height: 180px; } }

/* vignettes : la pièce est cadrée, le nom reste sous l'image */
.thumbs { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.thumb { position: relative; padding: 0; border-radius: var(--r-s); background: var(--paper); }
.thumb svg { border-radius: var(--r-s) var(--r-s) 0 0; background: var(--surface-2); }
/* Le nom tient sur deux lignes plutôt que de se faire couper : sur des
   vignettes qui se ressemblent, c'est lui qui tranche, et « Grain de
   be… » ne tranche rien. La hauteur est réservée pour que la grille
   reste alignée quand un seul nom déborde. */
.thumb-n {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 9px; line-height: 1.2; letter-spacing: .01em;
  color: var(--ink-3); padding: 3px 3px 4px; text-align: center;
  min-height: 25px; hyphens: auto;
}
.thumb[aria-pressed="true"] { border-color: var(--sig); box-shadow: inset 0 0 0 2px var(--sig); }
.thumb[aria-pressed="true"] .thumb-n { color: var(--sig-txt); }
.thumbs-kit { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }

/* Illustration de scène : carrée à l'origine, recadrée en paysage.
   object-position haut, parce que les visages sont dans le tiers supérieur. */
.scene-img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 28%;
}

/* ── L'état du lien au compte ──────────────────────────────────────
   Trois états : sauvegardé, hors ligne, conflit. C'était une pastille
   de 8 px et rien d'autre, avec le sens dans l'attribut `title` : sur
   un téléphone il n'y a pas de survol, donc l'information n'existait
   pas. Le mot l'accompagne maintenant, et c'est lui qui part en
   premier quand la place manque, pas la couleur. */
.lien {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  font-size: var(--text-2); color: var(--ink-3); white-space: nowrap;
}
.lien > i {
  flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-3); transition: background .25s ease;
}
.lien > b { font-weight: 500; }
.lien[data-lien="ok"]      > i { background: var(--pos); }
.lien[data-lien="hors"]    > i { background: var(--ink-3); }
.lien[data-lien="conflit"] > i { background: var(--warn); }
.lien[data-lien="conflit"] { color: var(--warn-txt); }
@media (max-width: 1080px) { .lien > b { display: none; } }

/* ── La vitrine, côté éditeur ──────────────────────────────────────
   Le bloc qui apparaît sous les actions de l'étape Club quand on publie
   sa carte. La carte elle-même vit dans `carte.html`. */
.note-partage {
  margin-top: 14px; padding: 13px 15px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-s); font-size: var(--text-3);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
/* `display:flex` bat la règle par défaut de [hidden], d'où la barre vide
   qui s'affichait avant toute publication. */
.note-partage[hidden] { display: none; }
.note-partage-l { flex: 1 1 100%; margin: 0; color: var(--ink-2); }
.note-partage-url {
  flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere;
  font-family: var(--font-mono); font-size: var(--text-2);
}

/* ───────────────────────── La collection ─────────────────────────
   Une carte de collection et la carte qu'on regarde en jouant sont le
   même objet : la grille réutilise `.pcard` telle quelle, à l'échelle.
   Le dos se gagne au clic, parce qu'une provenance se découvre. */

.collec-wrap { max-width: 1040px; margin: 0 auto; }
.collec-hero { text-align: center; padding: 20px 0 22px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.collec-hero h1 { font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2rem, 8vw, 3.5rem);
  line-height: var(--lh-tight); text-transform: uppercase; margin: 2px 0 0; text-wrap: balance; }
.collec-vide { max-width: 46ch; margin: 16px auto 0; color: var(--ink-2); }
.collec-aide { margin: 14px 0 0; font-family: var(--font-mono); font-size: var(--text-1);
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

.collec-compte { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.collec-compte-item { display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: var(--r); padding: 6px 12px; background: var(--surface); }
.collec-compte-item b { font-family: var(--font-mono); font-size: var(--text-4); font-variant-numeric: tabular-nums; }
.collec-compte-tot span { font-family: var(--font-mono); font-size: var(--text-1);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

.collec-grille { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }

/* Sur un téléphone, une carte par écran : trois cartes demandaient trois
   écrans de défilement, et on ne voyait jamais sa collection, seulement
   une carte à la fois. À deux colonnes on la voit. Le nom ne passe plus
   à la ligne depuis qu'il se tronque, donc la contrainte qui imposait
   une colonne est tombée.

   L'écran d'échange, lui, reste à une colonne : là on ne feuillette
   pas, on choisit, et on ne choisit pas une carte sur un nom coupé. */
@media (max-width: 600px) {
  .collec-grille { gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collec-legende { font-size: 9px; letter-spacing: .04em; }
}

/* `.collec-item` est un vrai bouton : au clavier on atteint la carte,
   on la retourne à l'entrée, et l'anneau de focus commun s'applique.
   Il n'y a aucun élément interactif à l'intérieur, donc rien à
   imbriquer. */
.collec-item {
  cursor: pointer; display: block; width: 100%; text-align: inherit;
  background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit;
  /* Sans perspective, `rotateY` est une substitution plate. Avec, la
     carte tourne, et c'est ce geste-là qu'on connaît. */
  perspective: 1100px;
}
.collec-item .collec-flip {
  position: relative; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.3,.7,.3,1);
}
.collec-item.retournee .collec-flip { transform: rotateY(180deg); }
.collec-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.collec-face .pcard { width: 100%; }
/* Le dos prend le métal du recto : c'est la même carte retournée, pas
   une fiche au verso. Tout ce qu'il contient se retint donc sur le
   champ sombre, `--pc-ink` au lieu de `--ink`. */
.collec-dos {
  position: absolute; inset: 0; transform: rotateY(180deg);
  border-radius: var(--r); padding: 3px; overflow: hidden;
  background: var(--pc-metal);
}
.collec-dos-in {
  /* `overflow: auto` n'est qu'un filet : le dos est censé tenir, voir le
     bloc « deux colonnes » plus bas. `overscroll-behavior` empêche un
     reliquat de voler le défilement de la page sous le pouce. */
  height: 100%; overflow: auto; overscroll-behavior: contain; padding: 11px 12px;
  border-radius: calc(var(--r) - 3px);
  background: linear-gradient(176deg, var(--pc-champ-1) 0%, var(--pc-champ-2) 100%);
  color: var(--pc-ink);
}
.collec-dos .rarete { color: var(--pc-ink); border-color: var(--pc-filet); background: var(--pc-plaque); }
.collec-dos .micro-index,
.collec-dos .collec-dos-sous,
.collec-dos .collec-mains-tete,
.collec-dos .collec-mains-note,
.collec-dos .collec-mains-liste .rang,
.collec-dos .collec-mains-liste .quand,
.collec-dos .collec-mains-liste .qui i { color: var(--pc-ink-2); }
.collec-dos .collec-dos-chiffres { background: var(--pc-filet); border-color: var(--pc-filet); }
.collec-dos .sl { background: linear-gradient(176deg, var(--pc-champ-1) 0%, var(--pc-champ-2) 100%); }
.collec-dos .sl span { color: var(--pc-ink-2); }
.collec-dos .cartouche { border-color: var(--pc-filet); color: var(--pc-ink); background: var(--pc-plaque); }
.collec-dos .eff { border-color: var(--pc-filet); color: var(--pc-ink); background: var(--pc-plaque); }
.collec-dos .collec-mains,
.collec-dos .collec-mains-liste li { border-color: var(--pc-filet); }
.collec-dos .collec-mains-liste li.moi .qui { color: var(--pc-ink); font-weight: 700; }
.collec-dos-tete { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.collec-dos-nom { margin: 8px 0 0; font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-4); line-height: var(--lh-tight); text-transform: uppercase; }
.collec-dos-sous { margin: 2px 0 0; font-family: var(--font-mono); font-size: var(--text-1);
  letter-spacing: .06em; color: var(--ink-3); }
.collec-dos-chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: var(--line-soft); border: 1px solid var(--line-soft); margin-top: 10px; }
.collec-dos-chiffres .sl { padding: 6px 4px; }
.collec-dos-chiffres .sl b { font-size: var(--text-4); }
.collec-dos-trophees { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }

.collec-mains { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 8px; }
.collec-mains-liste li.saut .qui { color: var(--ink-3); font-size: var(--text-1); }
.collec-mains-tete { display: flex; justify-content: space-between; gap: 8px;
  font-family: var(--font-mono); font-size: var(--text-1); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); }
.collec-mains-liste { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.collec-mains-liste li { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 8px;
  align-items: baseline; padding: 4px 0; border-top: 1px solid var(--line-soft); }
.collec-mains-liste li:first-child { border-top: 0; }
.collec-mains-liste .rang { font-family: var(--font-mono); font-size: var(--text-1); color: var(--ink-3); }
.collec-mains-liste .qui { font-size: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collec-mains-liste .qui i { font-style: normal; color: var(--ink-3); font-size: var(--text-1); }
.collec-mains-liste .quand { font-family: var(--font-mono); font-size: var(--text-1); color: var(--ink-3); }
.collec-mains-liste li.moi .qui { font-weight: 700; color: var(--sig-txt); }
.collec-mains-note { margin: 8px 0 0; font-size: var(--text-2); color: var(--ink-3); }

.collec-legende { margin: 8px 0 0; text-align: center; font-family: var(--font-mono);
  font-size: var(--text-1); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

/* ── Le dos, resserré à deux colonnes ───────────────────────────────
   Le dos avait un budget de hauteur écrit pour les 296 px du rail, et
   la grille de la collection le sert à 156 sous 600 px. Il débordait de
   114 px et se rattrapait en défilant : « Par quelles mains » se coupait
   en deux au ras du bord, « Sélections » sortait à droite, et une carte
   qui défile sous le pouce vole le défilement de la page.

   Il se resserre donc ici. L'ordre des sacrifices est celui que le dos
   annonce déjà dans `dosCarte()` : la provenance passe avant le
   palmarès, donc les trophées cèdent les premiers, et les dates de la
   liste des mains ensuite.

   Un média plutôt qu'une requête de conteneur : le recto est servi à
   quatre largeurs dans trois écrans et doit se mesurer lui-même, le dos
   n'existe que dans cette grille-ci, à deux largeurs connues.

   Placé APRÈS les règles qu'il resserre, et non dans le bloc média de la
   grille plus haut : à spécificité égale c'est l'ordre du fichier qui
   tranche, et de là-haut il ne surchargeait rien. */
@media (max-width: 600px) {
  .collec-dos-in { padding: 8px 9px; }
  /* Le nom se tronque au lieu de passer à la ligne, comme au recto : sur
     un nom composé il coûtait deux lignes, et le budget n'en a pas. */
  .collec-dos-nom { margin-top: 5px; font-size: var(--text-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Trois lignes au plus. « Frappée le … · sommet …, dernière saison … »
     en prend exactement trois à 134 px : la marge dégagée ailleurs les
     paie, et à deux la date de frappe perdait ses deux notes. */
  .collec-dos-sous { font-size: 10px; letter-spacing: .02em;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .collec-dos-chiffres { margin-top: 8px; }
  .collec-dos-chiffres .sl { padding: 3px 2px; }
  .collec-dos-chiffres .sl b { font-size: var(--text-2); }
  .collec-dos-chiffres .sl span { font-size: 9px; letter-spacing: 0;
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Le libellé court prend la place du long. `font-size: 0` efface le
     texte du nœud sans le retirer de l'arbre : le mot entier reste lu
     par un lecteur d'écran, seul l'œil voit l'abréviation. */
  .collec-dos-chiffres .sl span[data-court] { font-size: 0; }
  .collec-dos-chiffres .sl span[data-court]::after { content: attr(data-court); font-size: 9px; }
  .collec-dos-trophees { display: none; }
  .collec-mains { margin-top: 8px; padding-top: 6px; }
  .collec-mains-tete { font-size: 9px; letter-spacing: .04em; }
  /* Le premier resserrage laissait le dos déborder de 3 à 4 px dès la
     quatrième main, c'est-à-dire dès que la ligne « et N autres mains »
     apparaît : quatre lignes au lieu de trois. Invisible à l'œil, mais
     le dos n'était plus fixe, et c'était tout l'objet du bloc.

     Les quatre pixels se prennent dans la liste, et de la façon qui
     l'améliore plutôt que de la raboter.

     `gap: 0` d'abord. Le séparateur est un `border-top` posé sur le
     `li` : avec une gouttière au-dessus de lui, le trait ne sépare pas
     deux lignes, il colle à celle du bas. À zéro, ce sont les marges
     internes des deux lignes qui l'encadrent, également des deux côtés.
     La marge interne passe donc de 1 à 2 px : les lignes respirent
     PLUS qu'avant (4 px symétriques contre 4 px de travers), et on
     gagne quand même 6 px sur quatre lignes.

     `line-height: 1.25` ensuite. La liste est une pile de lignes
     uniques, déjà tronquées à l'ellipse : le 1.5 du corps de texte y
     est un interligne de paragraphe payé quatre fois. */
  .collec-mains-liste { margin-top: 4px; gap: 0; line-height: 1.25; }
  .collec-mains-liste li { padding: 2px 0; gap: 6px; }
  .collec-mains-liste .quand { display: none; }
  .collec-mains-note { margin-top: 5px; font-size: 10px; }
}

.lien-texte { background: none; border: 0; padding: 0; cursor: pointer; color: var(--sig);
  font: inherit; text-decoration: underline; text-underline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .collec-item .collec-flip { transition: none; }
}

/* ── L'échange ──────────────────────────────────────────────────────
   Deux grilles de cartes qu'on coche, et des propositions qui se lisent
   en deux colonnes : ce que tu reçois, ce que tu donnes. La carte de la
   grille est la même `.pcard` qu'ailleurs, en plus petit — un troc se
   décide sur la carte, pas sur une ligne de tableau. */

.ech-moncode { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 14px 0 0; }
.ech-moncode b { font-family: var(--font-mono); font-size: var(--text-6); letter-spacing: .22em;
  padding: 6px 4px 6px 14px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); }

.ech-note { max-width: 60ch; margin: 0 auto 20px; padding: 10px 14px; text-align: center;
  border: 1px solid var(--pos); color: var(--pos-txt); background: var(--pos-wash);
  border-radius: var(--r); font-size: var(--text-2); }
.ech-note.mal { border-color: var(--crit); color: var(--crit-txt); background: var(--crit-wash); }

.ech-bloc { margin-bottom: 34px; }
.ech-titre { font-family: var(--font-display); font-weight: 800; font-size: var(--text-5);
  text-transform: uppercase; letter-spacing: .01em; margin: 0 0 14px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.ech-n { font-family: var(--font-mono); font-size: var(--text-2); color: var(--on-sig);
  background: var(--imri-grad); border-radius: 999px; padding: 2px 9px; vertical-align: middle; }
.ech-rien { color: var(--ink-3); font-size: var(--text-2); margin: 10px 0; }

.ech-saisie { display: flex; gap: 10px; flex-wrap: wrap; }
.ech-saisie .input { flex: 1 1 200px; font-family: var(--font-mono); letter-spacing: .2em;
  text-transform: uppercase; }
/* Passé à la ligne, le bouton gardait sa largeur naturelle et flottait
   à gauche sous un champ pleine largeur. */
@media (max-width: 560px) { .ech-saisie .btn { flex: 1 0 100%; } }
.ech-cible { margin: 16px 0 4px; font-size: var(--text-3); }

.ech-cote { margin-top: 18px; }
.ech-cote > .label-mono { margin: 0 0 8px; }
.ech-grille { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  max-height: 500px; overflow: auto; padding: 4px; border: 1px solid var(--line-soft);
  background: var(--surface-2); }

.ech-carte { position: relative; cursor: pointer; border-radius: var(--r);
  display: block; width: 100%; text-align: inherit; padding: 0; margin: 0;
  background: none; border: 0; font: inherit; color: inherit;
  outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .12s; }
.ech-carte:hover { outline-color: var(--line); }
.ech-carte.choisie { outline-color: var(--sig); }
.ech-carte:focus-visible { outline-color: var(--sig); outline-offset: 3px; }
.ech-carte .pcard { width: 100%; }
/* La coche est au milieu, pas dans un coin : les quatre coins de la carte
   sont déjà pris (la note, le poste, la rareté, le numéro de série). */
.ech-carte.choisie::after { content: ''; position: absolute; inset: 0; border-radius: var(--r);
  background: var(--sig); opacity: .16; pointer-events: none; }
.ech-coche { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 40px; height: 40px; display: none; place-items: center; border-radius: 999px;
  font-size: var(--text-5); background: var(--imri-grad); color: var(--on-sig);
  box-shadow: var(--ombre-fort); z-index: 1; }
.ech-carte.choisie .ech-coche { display: grid; }

.ech-envoi { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px;
  padding-top: 14px; border-top: 1px solid var(--line); }
.ech-resume { margin: 0; flex: 1 1 260px; font-size: var(--text-2); color: var(--ink-2); }

.ech-prop { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
  padding: 14px 16px; margin-bottom: 12px; }
.ech-prop.caduque { opacity: .62; }
.ech-prop-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ech-prop-qui { font-weight: 700; }
/* Le nom et le code se touchaient : « Collectionneur 9A1C B4RQ9T » se
   lisait comme une seule chaîne, et on cherchait la faute de frappe. */
.ech-prop-code {
  font-family: var(--font-mono); font-size: var(--text-1); letter-spacing: .1em;
  color: var(--ink-3); margin-left: 10px; padding-left: 10px;
  border-left: 1px solid var(--line);
}
.ech-prop-date { font-family: var(--font-mono); font-size: var(--text-1); color: var(--ink-3); }
.ech-prop-mot { margin: 8px 0 0; font-style: italic; color: var(--ink-2); font-size: var(--text-2); }
.ech-prop-cotes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; }
.ech-prop-cotes .label-mono { margin: 0 0 6px; }
.ech-prop-cotes .ech-rien { margin: 0; }
.ech-prop-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px;
  padding-top: 10px; border-top: 1px solid var(--line-soft); }
.ech-caduque { margin: 10px 0 0; font-size: var(--text-2); color: var(--warn-txt); }

.ech-puces { display: flex; flex-direction: column; gap: 5px; }
/* La puce portait la classe de rareté, donc la couleur de la rareté :
   tout son texte passait en or (2.93:1) ou en gris clair. La rareté se
   dit maintenant par la tranche gauche, et le texte reste de l'encre.
   On lit le troc, pas la palette. */
.ech-puce { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 8px; align-items: baseline;
  padding: 5px 9px 5px 10px; border: 1px solid var(--line); border-left: 3px solid var(--line-soft);
  border-radius: var(--r); background: var(--surface-2); color: var(--ink); }
.ech-puce[data-rarete="bronze"]  { border-left-color: var(--ink-3); }
.ech-puce[data-rarete="argent"]  { border-left-color: var(--ink-2); }
.ech-puce[data-rarete="or"]      { border-left-color: var(--warn); }
.ech-puce[data-rarete="legende"] { border-left-color: var(--sig); }
.ech-puce b { font-family: var(--font-mono); font-size: var(--text-3); font-variant-numeric: tabular-nums; }
.ech-puce-nom { font-size: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ech-puce-serie { font-family: var(--font-mono); font-size: var(--text-1); color: var(--ink-3); }

.ech-histoire { list-style: none; margin: 0; padding: 0; }
.ech-histoire li { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr) auto auto;
  gap: 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.ech-histoire li:first-child { border-top: 0; }
.ech-histoire .qui { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ech-histoire .quoi { font-size: var(--text-2); color: var(--ink-3); }
.ech-histoire .quand { font-family: var(--font-mono); font-size: var(--text-1); color: var(--ink-3); }
.ech-histoire .etat { font-family: var(--font-mono); font-size: var(--text-1); letter-spacing: .08em;
  text-transform: uppercase; border: 1px solid var(--line); border-radius: var(--r); padding: 1px 7px; }
.ech-histoire .etat-accepte { color: var(--pos-txt); border-color: var(--pos); background: var(--pos-wash); }
.ech-histoire .etat-caduc   { color: var(--warn-txt); border-color: var(--warn); background: var(--warn-wash); }

@media (max-width: 720px) {
  .ech-prop-cotes { grid-template-columns: 1fr; }
  .ech-histoire li { grid-template-columns: minmax(0,1fr) auto; }
  .ech-histoire .quoi, .ech-histoire .quand { grid-column: 1 / -1; }
  /* Une colonne : à deux, `.pcard` descend sous la largeur où son nom
     tient, et on choisit une carte sur un nom tronqué. */
  .ech-grille { grid-template-columns: 1fr; max-height: 60vh; }
}