/* =========================================================================
   Échecs — comprendre chaque coup.  pyerce.ovh/ECHECS
   Charte : papier ivoire, encre, vert de club, or. Le contraste est optimisé
   pour la lecture longue ; l'échiquier garde les couleurs classiques.
   ========================================================================= */

:root {
  --paper:    #f5f2ea;
  --paper-2:  #efe9dd;
  --card:     #fffefa;
  --ink:      #16191d;
  --ink-2:    #5a646e;
  --ink-3:    #8b949c;
  --line:     #e3dbcb;
  --line-2:   #d3c9b4;
  --club:     #17493a;
  --club-2:   #226452;
  --club-3:   #eaf1ee;
  --gold:     #a8802a;
  --gold-2:   #f6eeda;

  --board-l:  #f0d9b5;
  --board-d:  #b58863;

  --v-brillant: #6d28d9;
  --v-excellent: #15803d;
  --v-bon: #5b6b7a;
  --v-imprecision: #9a6a06;
  --v-erreur: #c05617;
  --v-gaffe: #b91c1c;

  --radius: 14px;
  --shadow: 0 10px 30px rgba(28, 38, 32, .08);
  --shadow-strong: 0 16px 44px rgba(28, 38, 32, .16);
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 82px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 22px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.2; letter-spacing: -.008em; }
h1 { font-size: 2.35rem; margin: 0 0 14px; }
h2 { font-size: 1.42rem; margin: 0 0 12px; }
h3 { font-size: 1.1rem; margin: 0 0 8px; }
p { margin: 0 0 14px; }
a { color: var(--club-2); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--club); }
code, .mono { font-family: var(--mono); font-size: .92em; background: var(--paper-2); padding: 1px 5px; border-radius: 5px; }
strong { font-weight: 650; }
ul, ol { padding-left: 1.25em; }
li { margin-bottom: 7px; }

/* Ancres : ne pas passer sous la barre collante */
[id] { scroll-margin-top: 82px; }

/* ---------- barre de navigation ---------- */
.masthead {
  position: sticky; top: 0; z-index: 60;
  background: rgba(245, 242, 234, .93);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.masthead .wrap { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--serif); font-size: 1.24rem; font-weight: 700;
  color: var(--club); text-decoration: none; white-space: nowrap;
}
/* La signature « comprendre chaque coup » n'est plus affichée dans le mât (03/10/2026, option B
   retenue par Philippe). Motif mesuré : c'est ELLE qui faisait la largeur du bloc de marque —
   250 px avec, 134 px sans — parce que l'uppercase espacé est plus large que « Échecs » seul.
   Avec la huitième entrée de menu (Joueurs français) la barre ne tenait plus sur une ligne.
   La formule reste en pied de page (.foot-brand), elle n'est donc pas perdue. */
.brand em {
  display: none; font-family: var(--sans); font-style: normal; font-weight: 500;
  font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.logo-piece { width: 30px; height: 30px; opacity: .95; flex: 0 0 30px; }
/* Marque de l'éditeur (PCHWeb) devant le titre — 28/09/2026 */
.brand-blocs { display: flex; align-items: center; gap: 14px; }
.marque-editeur { display: flex; align-items: center; flex-shrink: 0; }
.brand-editeur { display: block; height: 48px; width: auto; flex-shrink: 0; max-width: none; }
.brand-filet { width: 1px; align-self: stretch; min-height: 36px; background: var(--line); flex-shrink: 0; }
.nav { display: flex; gap: 2px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
/* Marges internes ramenées de 9 à 7 px le 03/10/2026 : l'option B (signature masquée) rendait
   116 px mais laissait encore 7 px de manque pour que les huit libellés tiennent sur la ligne
   de la marque à 1200 px et plus. Deux pixels de marge en moins par côté — invisible à l'œil,
   les libellés sont intacts — suffisent (mesuré : 995 px de liens pour 1006 px offerts). */
.nav a {
  padding: 8px 7px; border-radius: 9px; font-size: .9rem; font-weight: 500;
  color: var(--ink-2); text-decoration: none; white-space: nowrap;
}
.nav a:hover { background: var(--paper-2); color: var(--ink); }
.nav a.active { background: var(--club); color: #fff; }

/* ---------- titres de section ---------- */
.kicker {
  font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 8px;
}
.page-head { padding: 44px 0 22px; border-bottom: 1px solid var(--line); margin-bottom: 34px; }
.lede { font-size: 1.09rem; color: var(--ink-2); max-width: 74ch; }
.lede.small { font-size: .98rem; }
/* mention de mise à jour, sous le chapeau (page Nouvelles des Échecs) */
.maj-news {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 9px;
  margin: 15px 0 0; font-size: .82rem; color: var(--ink-3);
}
.maj-news b { font-family: var(--serif); font-size: 1.04rem; font-weight: 700; color: var(--club); }
.section-intro { color: var(--ink-2); max-width: 80ch; }
.hint { display: block; font-size: .78rem; color: var(--ink-3); margin-top: 3px; }

/* ---------- accueil ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .85fr); gap: 40px;
  align-items: center; padding: 54px 0 42px; border-bottom: 1px solid var(--line);
}
/* Accroche ramenée de 2,85 à 2 rem (32 px) en deux temps : à 45,6 px elle écrasait le reste
   du bloc (les chiffres de l'accroche font 1,5 rem, les titres de rubrique 1,42 rem) et
   tenait toute la largeur de la colonne. Les paliers mobiles descendent dans la même
   proportion, mais pas en dessous de 1,5 rem : il faut que l'accroche reste plus grosse
   que les titres de rubrique (1,42 rem), sinon la hiérarchie s'inverse sur téléphone. */
.hero h1 { font-size: 2rem; }
/* Ce que contient le site, sous l'accroche : la phrase de sommaire et les chiffres réels.
   Chaque chiffre est un lien vers la section qu'il décrit. */
.hero-map { margin: 16px 0 0; font-size: .98rem; color: var(--ink-2); }
.hero-map strong { color: var(--ink); }
.hero-kpis {
  list-style: none; padding: 0; margin: 22px 0 0;
  /* Six chiffres : trois colonnes fixes pour qu'ils se répartissent en 3+3. En
     `auto-fit` ils tombaient en 4+2 (1440 px) puis 5+1 (1000–900 px) — une carte seule
     sur la seconde ligne se lit comme un défaut de mise en page. */
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
}
.hero-kpis li { margin: 0; }
.hero-kpis a {
  display: block; height: 100%; text-decoration: none; background: var(--card);
  border: 1px solid var(--line); border-radius: 11px; padding: 11px 14px;
  transition: border-color .18s ease, transform .18s ease;
}
.hero-kpis a:hover { border-color: var(--club); transform: translateY(-1px); }
.hero-kpis b {
  display: block; font-family: var(--serif); font-size: 1.5rem;
  color: var(--club); line-height: 1.12;
}
/* Libellés en --ink-2 (contraste ~6:1 sur blanc) et non --ink-3 (~3:1) : ces libellés
   portent l'information, ils doivent être lisibles, pas décoratifs. */
.hero-kpis span { font-size: .78rem; color: var(--ink-2); }
.hero-board { margin: 0; }
.hero-board .cb { box-shadow: var(--shadow-strong); }
.hero-board figcaption, .cmp-fig figcaption { font-size: .82rem; color: var(--ink-3); margin-top: 9px; line-height: 1.45; }
/* Clé de lecture des couleurs de flèches */
.arrow-key { display: block; margin-top: 5px; }
.arrow-key i {
  display: inline-block; width: 22px; height: 5px; border-radius: 3px;
  margin-right: 7px; vertical-align: middle;
}
.arrow-key i.k-w { background: #0f5a38; }
.arrow-key i.k-b { background: #a5301a; }
.arrow-key i.k-p { background: #a5301a; }
.arrow-key i.k-e { background: #0f5a38; }
.arrow-key b { font-weight: 700; color: var(--ink); }

.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 40px 0 46px; }
.door {
  position: relative; display: block; padding: 28px 26px 24px; text-decoration: none;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink); box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease;
  overflow: hidden;
}
.door::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--club); }
.door-club::before { background: var(--gold); }
.door:hover { transform: translateY(-3px); box-shadow: var(--shadow-strong); }
.door-kicker { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 6px; }
.door h2 { font-size: 1.6rem; margin-bottom: 10px; }
.door-txt { color: var(--ink-2); font-size: .97rem; }
.door-list { list-style: none; padding: 0; margin: 16px 0; border-top: 1px solid var(--line); }
.door-list li {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .94rem; margin: 0;
}
.door-list li span { color: var(--ink-3); font-size: .82rem; white-space: nowrap; }
.door-list li.soon { color: var(--ink-3); font-style: italic; }
.door-list li.more { color: var(--ink-3); font-size: .88rem; font-style: italic; border-bottom: 0; justify-content: flex-start; }
.door-cta { font-weight: 650; color: var(--club-2); font-size: .95rem; }

.tools { margin: 0 0 40px; }
.tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tool {
  display: block; padding: 22px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); text-decoration: none; color: var(--ink);
}
.tool:hover { border-color: var(--line-2); }
.tool h3 { color: var(--club); }
.tool p { color: var(--ink-2); font-size: .94rem; margin: 0; }

.roadmap { padding: 26px 0 40px; border-top: 1px solid var(--line); }
.roadmap-list li { color: var(--ink-2); }
.roadmap-list em { color: var(--ink-3); font-size: .9em; }

/* ---------- bandeau « faire connaître ce site » (accueil) ---------- */
.partage { padding: 26px 0 40px; border-top: 1px solid var(--line); }
.partage h2 { margin: 0 0 10px; }
.partage p { color: var(--ink-2); margin: 0; max-width: 80ch; }
.partage strong { color: var(--ink); }

/* ---------- cartes génériques ---------- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 26px; margin: 0 0 22px;
}
.card h2 { margin-top: 0; }
.card ul { margin-bottom: 0; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.side-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.side-dot.w { background: #fff; border: 1.5px solid #9a9186; }
.side-dot.b { background: #21252a; }
.plan-w { border-left: 3px solid #b9b0a2; }
.plan-b { border-left: 3px solid #21252a; }
.plan ul { padding-left: 1.1em; }
.empty { color: var(--ink-3); font-style: italic; }
.callout {
  background: var(--gold-2); border: 1px solid #e6d5ab; border-left: 4px solid var(--gold);
  border-radius: var(--radius); padding: 20px 24px; margin: 0 0 22px;
}
.callout h2 { font-size: 1.15rem; color: #6d5314; }
.callout p { margin: 0; color: #5c4a1e; }
.ticks { list-style: none; padding: 0; }
.ticks li { position: relative; padding-left: 26px; }
.ticks li::before {
  content: "✓"; position: absolute; left: 0; top: 0; color: var(--club-2); font-weight: 700;
}

/* ---------- principes (leçon) ---------- */
.principes { margin: 0 0 26px; }
/* 3 colonnes sur grand écran : une liste de 5 ou 6 cartes se répartit en 3+2 ou 3+3,
   alors qu'une grille à 4 colonnes laissait une carte orpheline sur la ligne suivante. */
.principes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; }
.principe {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px; position: relative;
}
.principe .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; background: var(--club); color: #fff;
  font-family: var(--serif); font-weight: 700; margin-bottom: 10px;
}
.principe h3 { margin-bottom: 6px; }
.principe p { margin: 0; color: var(--ink-2); font-size: .95rem; }

/* ---------- fiche de contenu ---------- */
.crumb { font-size: .85rem; color: var(--ink-3); margin-bottom: 18px; }
.crumb a { color: var(--ink-3); }
.contenu-head { padding-bottom: 22px; border-bottom: 1px solid var(--line); margin-bottom: 30px; }
.contenu-head h1 { margin-bottom: 8px; }
.contenu-head .sub { font-size: 1.06rem; color: var(--ink-2); }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 14px 0; }
.tags li {
  font-size: .78rem; font-weight: 600; letter-spacing: .02em; padding: 4px 11px;
  border-radius: 999px; background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--line);
}
.accroche {
  font-family: var(--serif); font-size: 1.16rem; line-height: 1.55; color: var(--club);
  border-left: 3px solid var(--gold); padding-left: 16px; margin: 6px 0 0;
}
.source-note {
  font-size: .82rem; color: var(--ink-3); border-top: 1px solid var(--line);
  padding-top: 14px; margin-top: 34px;
}

/* ---------- lignes + lecteur ---------- */
.lignes { margin: 34px 0; }
.ligne-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.ligne-nav a {
  font-size: .86rem; padding: 6px 13px; border-radius: 999px; background: var(--card);
  border: 1px solid var(--line); text-decoration: none; color: var(--ink-2);
}
.ligne-nav a:hover { border-color: var(--club-2); color: var(--club); }
.ligne { margin: 0 0 38px; }
.ligne-head h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 1.24rem; }
.role {
  font-family: var(--sans); font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  background: var(--club-3); color: var(--club-2); border: 1px solid #cfe0d8;
}
.role-piege { background: #fbe9e6; color: #a3341c; border-color: #f0cdc6; }
.role-variante { background: var(--gold-2); color: #7a5c14; border-color: #e6d5ab; }
.ligne-intro { color: var(--ink-2); max-width: 82ch; }

.player {
  display: grid; grid-template-columns: minmax(240px, 330px) minmax(0, 1fr); gap: 26px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; margin-top: 14px; box-shadow: var(--shadow); outline: none;
}
.player:focus-visible, .player:focus { box-shadow: var(--shadow), 0 0 0 2px var(--club-2); }
.player-board { display: flex; flex-direction: column; gap: 12px; }
.board-shell { display: flex; gap: 5px; align-items: stretch; }
/* Piège d'élément flex/grid : `min-width` vaut `auto`, donc la taille MINIMALE d'un élément
   est celle de son contenu, qui peut dépasser le conteneur. L'échiquier (grille de 8 colonnes
   avec `aspect-ratio`) poussait ainsi le lecteur à 324 px dans un conteneur de 258 px : la page
   débordait de 31 px à 290 px de large, sur TOUTES les fiches de contenu — défaut préexistant
   à la section d'actualité, mesuré à l'identique sur « L'Ouverture Italienne ».
   `min-width: 0` rend l'élément réellement compressible ; aucune autre déclaration n'est
   nécessaire (vérifié : les tailles à 390 px et au-delà sont inchangées). */
.player, .player-board, .board-shell, .cb { min-width: 0; }

/* barre d'évaluation verticale */
.evalbar {
  position: relative; flex: 0 0 15px; width: 15px; border-radius: 5px; overflow: hidden;
  background: #23262b; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}
.evalbar i {
  position: absolute; left: 0; right: 0; bottom: 0; height: 50%;
  background: linear-gradient(#fffdf6, #ece4d5); transition: height .3s ease;
}

/* échiquier */
.cb {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 0;
  width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden;
  box-shadow: 0 8px 24px rgba(30, 26, 20, .18); flex: 1 1 auto; user-select: none;
  background: var(--board-l); position: relative;
}
/* Flèches de plan, tracées en surimpression au-dessus des cases. */
.cb-arrows {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 3;
}
.cb-sq { position: relative; display: flex; align-items: center; justify-content: center; }
.cb-sq.l { background: var(--board-l); }
.cb-sq.d { background: var(--board-d); }
.cb-pc {
  width: 100%; height: 100%;
  background-repeat: no-repeat; background-position: center; background-size: 92% 92%;
  pointer-events: none;
}
/* -------- glisser-déposer des pièces (posé sur le seul échiquier du problème du jour) -------- */
/* `touch-action: none` est indispensable : sans lui le navigateur s'empare du geste pour faire
   défiler la page et envoie pointercancel — le glisser ne démarre jamais au doigt. */
.cb.cb-drag { touch-action: none; cursor: grab; }
.cb.cb-drag.dragging { cursor: grabbing; }
.cb .cb-sq.drag > .cb-pc { opacity: .25; }
.cb-ghost {
  position: absolute; left: 0; top: 0; z-index: 5;
  width: 12.5%; height: 12.5%;              /* une case : recalculée en pixels au premier mouvement */
  filter: drop-shadow(0 6px 10px rgba(30, 26, 20, .3));
}
/* Case survolée : spécificité renforcée par `.cb ` pour l'emporter sur `.cb-sq.last::after`
   et `.cb-sq.tgt::after`, quel que soit l'ordre des règles dans la feuille. */
.cb .cb-sq.over::after {
  content: ""; position: absolute; inset: 0; background: rgba(120, 190, 120, .40);
}
.cb-sq.last::after { content: ""; position: absolute; inset: 0; background: rgba(255, 214, 87, .40); }
.cb-sq.sel::before { content: ""; position: absolute; inset: 0; background: rgba(120, 190, 120, .45); }
.cb-sq.tgt::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 30%; height: 30%;
  transform: translate(-50%, -50%); border-radius: 50%; background: rgba(20, 55, 40, .30);
}
.cb-sq.chk::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(214, 60, 45, .80) 0%, rgba(214, 60, 45, 0) 72%);
}
/* Coup mis en évidence (comparateur) : la case de départ est cerclée, la case d'arrivée est
   cerclée ET teintée. Teinte et anneau sont posés sur la case elle-même, donc SOUS la pièce :
   elle reste parfaitement nette. */
.cb-sq.mk-p { --mk: #a5301a; --mk-tint: rgba(165, 48, 26, .18); --mk-tint-2: rgba(165, 48, 26, .34); }
.cb-sq.mk-e { --mk: #0f5a38; --mk-tint: rgba(15, 90, 56, .18); --mk-tint-2: rgba(15, 90, 56, .34); }
.cb-sq.dep {
  background-image: linear-gradient(var(--mk-tint), var(--mk-tint));
  box-shadow: inset 0 0 0 3px var(--mk);
}
.cb-sq.arr {
  background-image: linear-gradient(var(--mk-tint-2), var(--mk-tint-2));
  box-shadow: inset 0 0 0 6px var(--mk);
}
.cb-sq[data-interactive] { cursor: pointer; }
.cb-coord {
  position: absolute; font-size: 11px; font-weight: 700; opacity: .6; color: #2c2118;
  pointer-events: none;
}
.cb-sq.d .cb-coord { color: #f9f0df; opacity: .85; }
.cb-coord.f { right: 3px; bottom: 2px; }
.cb-coord.r { left: 3px; top: 2px; }

/* contrôles du lecteur */
.player-ctrl {
  display: flex; align-items: center; gap: 6px; justify-content: center;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 10px; padding: 7px;
}
.player-ctrl button {
  border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2);
  width: 36px; height: 32px; border-radius: 8px; cursor: pointer; font-size: .95rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.player-ctrl button:hover { border-color: var(--club-2); color: var(--club); }
.ctrl-pos { font-family: var(--mono); font-size: .84rem; color: var(--ink-2); min-width: 58px; text-align: center; }

/* panneau d'information */
.player-side { display: flex; flex-direction: column; min-width: 0; }
.now { border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 14px; }
.now-head { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 10px; }
.now-head .ply { font-family: var(--mono); font-size: 1rem; color: var(--ink-3); }
.now-head .san { font-family: var(--mono); font-size: 1.3rem; font-weight: 700; color: var(--ink); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 0 0 12px; }
.facts > div { background: var(--paper-2); border-radius: 9px; padding: 8px 11px; }
.facts dt { font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.facts dd { margin: 2px 0 0; font-family: var(--mono); font-size: .97rem; font-weight: 600; }
.facts dd.best { color: var(--club-2); }
.comment { font-size: .97rem; color: var(--ink); }
.comment:empty { display: none; }
.refut {
  background: #fdf0ec; border-left: 3px solid var(--v-erreur); border-radius: 0 8px 8px 0;
  padding: 9px 13px; font-size: .9rem; color: #7c3116; margin-bottom: 12px;
}
.refut:empty { display: none; }
.refut .mono { background: #f7e2da; }

/* badges de verdict */
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px;
  border-radius: 999px; font-size: .78rem; font-weight: 700; letter-spacing: .015em;
  white-space: nowrap;
}
.badge.brillant    { background: #ece0ff; color: var(--v-brillant); }
.badge.excellent   { background: #ddf1e2; color: var(--v-excellent); }
.badge.bon         { background: #eaeef2; color: var(--v-bon); }
.badge.imprecision { background: #fbf0d3; color: var(--v-imprecision); }
.badge.erreur      { background: #fbe6d5; color: var(--v-erreur); }
.badge.gaffe       { background: #fbe0dc; color: var(--v-gaffe); }

/* liste des coups : UNE SEULE LIGNE, qui défile horizontalement dans sa boîte (demande de
   Philippe, 18/09/2026). Deux raisons, mesurées sur la partie publiée du 18/09 (90 demi-coups) :
   1. repliée en 14 lignes, la liste allongeait le lecteur de 566 px et le navigateur faisait
      défiler la PAGE pour garder la pastille active en vue : au bout d'une vingtaine de coups
      l'échiquier était sorti de l'écran (mesuré : +900 px de défilement sur 30 coups à 780 px
      de large) ;
   2. la hauteur du lecteur ne dépend donc plus du nombre de coups, et la page ne bouge plus
      pendant qu'on rejoue la partie.
   La barre de défilement est visible et fine : c'est l'indice qui dit que la ligne continue. */
.moves {
  display: flex; flex-wrap: nowrap; gap: 5px; margin-bottom: 14px;
  overflow-x: auto; overflow-y: hidden; padding: 2px 2px 9px;
  scroll-behavior: smooth; scrollbar-width: thin;
  overscroll-behavior-x: contain;   /* la fin de la ligne ne fait pas défiler la page */
}
.moves::-webkit-scrollbar { height: 8px; }
.moves::-webkit-scrollbar-track { background: var(--paper-2); border-radius: 999px; }
.moves::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; }
.moves::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }
.mv {
  display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; padding: 4px 10px;
  border: 1px solid var(--line); background: var(--card); border-radius: 999px;
  font-family: var(--mono); font-size: .85rem; font-weight: 600; color: var(--ink);
  cursor: pointer; white-space: nowrap;
}
.mv:hover { border-color: var(--line-2); background: var(--paper-2); }
.mv .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.mv.active { background: var(--club); border-color: var(--club); color: #fff; }
.mv .n { color: var(--ink-3); font-weight: 500; }
.mv.active .n { color: rgba(255,255,255,.72); }
/* Légende de la ligne : sans elle, une liste coupée au bord droit se lirait comme une liste
   incomplète. Les deux morceaux ne sont pas au même niveau d'information — le libellé dit ce
   qu'on regarde, l'indication dit comment s'en servir — d'où deux teintes et un tiret. */
.moves-cap {
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  margin: 0 0 5px; font-size: .8rem; color: var(--ink-2);
}
.moves-cap .hint { display: inline; margin: 0; font-size: .75rem; color: var(--ink-3); }

/* ---------- demi-coups NON joués (suite après abandon) ----------
   Ils viennent APRÈS l'arrêt de la partie : à ne pas confondre avec un coup joué. La
   distinction ne repose pas sur la seule couleur (gris au lieu de rouge) mais sur trois
   signaux : bordure en pointillés, fond hachuré, et l'étiquette « non joué ». */
.mv-nonjoue {
  border-style: dashed; border-color: #aab4bd; color: var(--ink-2);
  background: repeating-linear-gradient(45deg, #f6f8fa, #f6f8fa 5px, #edf1f4 5px, #edf1f4 10px);
}
.mv-nonjoue:hover { border-color: var(--ink-3); }
.mv-nonjoue .n { color: var(--ink-3); }
.mv-nonjoue .nj {
  font-family: var(--sans); font-size: .66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-2); border: 1px dashed var(--ink-3);
  border-radius: 999px; padding: 0 6px;
}
.mv-nonjoue.active { background: #5a646e; border-color: #5a646e; border-style: solid; color: #fff; }
.mv-nonjoue.active .n { color: rgba(255,255,255,.75); }
.mv-nonjoue.active .nj { color: #fff; border-color: rgba(255,255,255,.85); }
/* Séparateur de l'abandon : il marque, DANS la ligne, l'endroit où la partie s'est arrêtée.
   La liste n'ayant plus qu'une seule ligne, il devient un jalon vertical et non plus un
   bandeau pleine largeur : les demi-coups qui suivent portent déjà leur propre marque
   (« non joué », bordure en pointillés, fond hachuré), le jalon dit seulement où le trait a
   été coupé. Deux lignes et une largeur PLAFONNÉE : posé avant la pastille active, il n'a que
   la moitié de la boîte à sa gauche quand celle-ci est centrée (158 px à 390 px de large) — un
   jalon d'une seule ligne, long de 233 px, y dépassait à gauche. Mesuré, d'où le plafond. */
.mv-sep {
  flex: 0 0 auto; display: inline-flex; align-items: center; align-self: stretch;
  max-width: 112px; margin: 0 3px; padding: 0 9px;
  border-left: 2px dashed #aab4bd; border-right: 2px dashed #aab4bd;
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  line-height: 1.15; text-align: center; white-space: normal;
  color: var(--ink); hyphens: none;
}
/* Écran étroit : une pastille « non joué » est large (SAN + étiquette), et le jalon n'a que la
   place restante à sa gauche. Mesuré à 390 px : 190 px de pastille + 120 px de jalon dans une
   boîte de 316 px — il n'y tenait pas. Resserré, il y tient. */
@media (max-width: 560px) {
  .mv-sep { max-width: 68px; padding: 0 6px; font-size: .62rem; }
}
/* ---------- libellés du nom d'ouverture (bandeau SOUS L'ÉCHIQUIER) ----------
   Les libellés sont en --ink-2 et non --ink-3 : ils portent une information (lecture AA). */
.ouv-k {
  font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--club);
}
.ouv-eco { font-family: var(--mono); font-size: .76rem; color: var(--ink-2); }
/* ---------- nom de l'ouverture : À CÔTÉ DU COUP COURANT (18/09/2026) ----------
   Il suit le lecteur — il est déplacé à chaque pas juste après la pastille active — et ne
   s'affiche que tant que la position figure au répertoire des ouvertures. Le bandeau sous
   l'échiquier a été retiré : le nom apparaissait deux fois à l'écran en même temps.
   Le [hidden] est indispensable : la règle display:inline-flex l'emporterait sur le display:none
   que le navigateur applique à l'attribut. */
.mv-nom {
  flex: 0 0 auto; display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 7px;
  max-width: 560px; margin: 0 2px; padding: 3px 10px;
  border-left: 3px solid var(--club); background: var(--paper-2);
  border-radius: 0 8px 8px 0; font-size: .78rem; color: var(--ink-2);
}
.mv-nom[hidden] { display: none; }
/* Nom et code sur UNE ligne ; la mention de sortie, seule, passe à la ligne suivante. Une boîte
   plus étroite repliait le nom sur HUIT lignes (137 px de haut, mesuré) et la rangée sautait de
   hauteur à chaque pas. Largeur choisie pour que le nom le plus long du site (65 caractères)
   tienne à côté du libellé dans une boîte de 758 px, jusqu'à 780 px d'écran. */
.mv-nom strong { color: var(--ink); font-size: .84rem; white-space: nowrap; }
.mv-nom .ouv-sortie {
  flex: 0 0 100%; font-style: normal; font-size: .72rem; color: var(--ink-3);
}
/* Écran étroit : le nom se replie sur quelques lignes plutôt que d'être coupé. */
@media (max-width: 560px) {
  .mv-nom { max-width: 132px; font-size: .72rem; line-height: 1.2; }
  .mv-nom strong { font-size: .78rem; white-space: normal; }
}
.badge.non-joue { background: #e9edf1; color: #46505a; }

/* Marques d'un coup NON joué sur l'échiquier : teinte et anneau en gris ardoise, et
   l'anneau de la case d'arrivée est en POINTILLÉS (on ne peut pas faire un box-shadow
   pointillé : c'est un outline, ramené à l'intérieur de la case). */
.cb-sq.mk-n { --mk: #5a646e; --mk-tint: rgba(90, 100, 110, .16); --mk-tint-2: rgba(90, 100, 110, .28); }
.cb-sq.arr.mk-n { box-shadow: none; outline: 2px dashed var(--mk); outline-offset: -4px; }

/* courbe d'évaluation */
.graphe { margin: 0; }
.graphe figcaption { font-size: .8rem; color: var(--ink-3); margin-bottom: 6px; }
.graph-holder svg { width: 100%; height: auto; display: block; border-radius: 8px; background: var(--paper-2); }
.graph-holder rect.ev-zero { stroke: #b9b2a4; stroke-width: 1; stroke-dasharray: 3 3; }
.graph-holder text.ev-lbl { font-family: var(--sans); font-size: 10px; fill: var(--ink-2); }
.graph-holder circle.ev-pt { cursor: pointer; }
.graph-holder circle.ev-pt:hover { stroke: #16191d; stroke-width: 1.6; }

/* ---------- entraînement ---------- */
.entrainement { margin: 34px 0; }
/* auto-fill + largeur maximale : un quiz isolé ne doit PAS s'étirer sur toute la page,
   sinon l'échiquier (carré) devient énorme. */
.quiz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 380px)); gap: 20px; }
.quiz { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.quiz-ctx { font-size: .84rem; color: var(--ink-3); display: flex; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.quiz-delta { font-family: var(--mono); white-space: nowrap; }
.quiz .cb { box-shadow: 0 5px 16px rgba(30,26,20,.16); }
.quiz-actions { display: flex; gap: 8px; margin: 12px 0 8px; }
.quiz-actions button {
  border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2);
  padding: 7px 13px; border-radius: 9px; cursor: pointer; font-size: .87rem; font-weight: 600;
}
.quiz-actions button.primary { background: var(--club); border-color: var(--club); color: #fff; }
.quiz-actions button:hover { border-color: var(--club-2); }
.quiz-feedback { font-size: .88rem; color: var(--ink-2); margin: 0; min-height: 2.6em; }
.quiz-feedback.ok { color: var(--v-excellent); font-weight: 600; }
.quiz-feedback.no { color: var(--v-erreur); }

/* ---------- erreurs fréquentes ---------- */
.erreurs { margin: 34px 0; }
.erreurs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.erreur-card { margin: 0; border-top: 3px solid var(--v-erreur); }
.erreur-card p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.chiffres p:last-child { margin-bottom: 0; }

/* ---------- comparateur ---------- */
.compare-grid { display: grid; gap: 24px; }
/* Parcours des tournants : une carte à la fois, flèches ⏮ ◀ ▶ ⏭ et rang affiché.
   Les deux échiquiers d'un même tournant restent côte à côte — c'est la comparaison qui fait
   la page —, et les flèches passent au tournant suivant. */
.compar-barre { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 26px 0 20px; }
.compar-pos { margin: 0; font-size: .95rem; color: var(--ink-2); }
.compar-pos b { font-family: var(--serif); font-size: 1.25rem; color: var(--club); padding: 0 2px; }
.fleche-parcours {
  font-family: var(--sans); font-size: 1rem; line-height: 1;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card); border: 1px solid var(--line-2); color: var(--club);
  transition: background .15s ease, border-color .15s ease;
}
.fleche-parcours:hover:not([disabled]) { background: var(--club-3); border-color: var(--club-2); }
.fleche-parcours:focus-visible { outline: 2px solid var(--club-2); outline-offset: 2px; }
.fleche-parcours[disabled] { opacity: .35; cursor: default; }
.compare {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px; box-shadow: var(--shadow); max-width: 900px;
}
/* `[hidden]` est indispensable — et posé APRÈS la règle d'affichage de `.compare` : la règle
   d'affichage l'emporterait sinon sur le display:none que le navigateur applique à l'attribut
   (piège déjà rencontré sur ce site). */
.compare[hidden] { display: none; }
.compare-head { margin-bottom: 16px; }
.compare-ctx { font-size: .86rem; margin: 0 0 4px; }
.compare-title { font-family: var(--serif); font-size: 1.2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
/* Les deux échiquiers sont côte à côte : on borne la largeur pour qu'ils restent à taille lisible. */
.compare-boards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 780px; }
.cmp-fig { margin: 0; }
.cmp-fig .cb { box-shadow: 0 8px 22px rgba(30,26,20,.16); }
.cmp-fig figcaption { line-height: 1.5; }
.cmp-mv { font-family: var(--mono); font-weight: 700; color: var(--ink); }
/* Cases de départ et d'arrivée du coup, nommées sous l'échiquier. */
.cmp-sq { display: block; margin-top: 4px; font-family: var(--mono); font-size: .8rem; color: var(--ink-3); }
.cmp-fig.played .cmp-sq b { color: #a5301a; }
.cmp-fig.best .cmp-sq b { color: #0f5a38; }
.nb { white-space: nowrap; }
.cmp-tag {
  display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); margin-right: 6px;
}
.cmp-fig.best { position: relative; }
.cmp-fig.best .cb { box-shadow: 0 0 0 3px rgba(23, 73, 58, .35), 0 8px 22px rgba(30,26,20,.16); }
.compare-delta { margin: 18px 0 10px; font-size: 1rem; }
.compare-comment { color: var(--ink-2); font-size: .96rem; }
.compare-refut {
  background: var(--paper-2); border-radius: 9px; padding: 10px 14px;
  font-family: var(--mono); font-size: .89rem; margin: 0;
}
.cmp-alt { font-family: var(--sans); color: var(--ink-3); font-size: .86rem; }

/* Sous les deux échiquiers du tournant : le lecteur de la partie entière. Les deux échiquiers de
   la comparaison restent seuls côte à côte — ce lecteur est un bloc à part, ouvert sur le tournant. */
.compare-player { margin: 22px 0 0; border-top: 1px solid var(--line); padding-top: 16px; }
.compare-player figcaption { font-size: .84rem; color: var(--ink-3); line-height: 1.5; }
.compare-player .cmp-tag { color: var(--ink-2); }
.compare-player .cmp-hint { display: block; margin-top: 3px; }
.compare-player .player { margin-top: 12px; }

/* ---------- glossaire ---------- */
.scale { margin: 6px 0 0; }
.scale-row { display: grid; grid-template-columns: 62px 1fr auto; gap: 14px; align-items: center; padding: 7px 0; }
.scale-cp { font-family: var(--mono); font-weight: 600; text-align: right; }
.scale-bar { height: 9px; border-radius: 5px; background: linear-gradient(90deg, var(--club) calc(var(--w) * 0.35), var(--gold)); width: var(--w); }
.scale-sens { font-size: .9rem; color: var(--ink-2); }
.legend { display: grid; gap: 9px; margin-bottom: 14px; }
.legend-row { display: grid; grid-template-columns: 132px 1fr; gap: 14px; align-items: baseline; }
.legend-txt { font-size: .94rem; color: var(--ink-2); }
.legend-seuil { color: var(--ink-3); font-size: .86rem; white-space: nowrap; margin-left: 6px; }
.cat { margin: 26px 0 10px; color: var(--gold); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-family: var(--sans); }
.termes { margin: 0; }
.terme { padding: 12px 0; border-bottom: 1px solid var(--line); }
.terme dt { font-weight: 700; font-family: var(--serif); font-size: 1.02rem; margin-bottom: 3px; }
.terme dd { margin: 0; color: var(--ink-2); font-size: .95rem; }

/* ---------- parcours ---------- */
.parcours-bloc { margin: 0 0 44px; padding-top: 8px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.card-link { display: block; text-decoration: none; color: var(--ink); margin: 0; transition: transform .18s ease, box-shadow .18s ease; }
.card-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-strong); }
.card-top { display: flex; gap: 8px; margin-bottom: 10px; }
.tag-kind, .tag-eco {
  font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; background: var(--club-3); color: var(--club-2);
}
.tag-eco { background: var(--gold-2); color: #7a5c14; }
.card-sub { color: var(--ink-2); font-size: .95rem; }
.card-txt { color: var(--ink-2); font-size: .92rem; font-style: italic; }
.card-meta { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.card-meta li {
  font-size: .76rem; color: var(--ink-3); background: var(--paper-2);
  padding: 3px 9px; border-radius: 999px; margin: 0;
}
.card-cta { display: inline-block; margin-top: 14px; font-weight: 650; color: var(--club-2); font-size: .93rem; }
.plan-parcours { margin-top: 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 20px; }
.plan-parcours summary { cursor: pointer; font-weight: 600; color: var(--club); }
.plan-parcours ol { margin: 14px 0 4px; }
.plan-parcours li { color: var(--ink-3); }
.plan-parcours li.done { color: var(--ink); font-weight: 600; }
.done-tag {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  background: var(--club-3); color: var(--club-2); padding: 2px 8px; border-radius: 999px; margin-left: 8px;
}

/* ---------- méthode ---------- */
.trois { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 20px; }
.trois-item { background: var(--paper-2); border-radius: 11px; padding: 16px 18px; }
.trois-item h3 { color: var(--club); }
.trois-item p { margin: 0; font-size: .94rem; color: var(--ink-2); }
.anatomie { margin-bottom: 0; }
.anatomie li { color: var(--ink-2); }
.anatomie strong { color: var(--ink); }
.limites ul { margin-bottom: 14px; }

/* ---------- pied de page ---------- */
.foot { margin-top: 56px; background: var(--club); color: #d8e6df; padding: 38px 0 20px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 30px; }
.foot p { font-size: .88rem; color: #b9cfc5; margin: 0 0 8px; }
.foot strong { color: #fff; }
.foot-brand { font-family: var(--serif); font-size: 1.1rem; color: #fff !important; margin-bottom: 10px !important; }
.foot a { color: #e6d9ae; }
.foot-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  margin-top: 26px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.15);
  font-size: .82rem; color: #9db6ab;
}

/* ---------- apparition au défilement (désactivée sans JS) ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.js .reveal.in { opacity: 1; transform: none; }

/* =========================================================================
   Nouvelles des Échecs — section d'actualité
   ========================================================================= */
.news-kpis {
  list-style: none; padding: 0; margin: 20px 0 6px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px;
}
.news-kpis li {
  background: var(--card); border: 1px solid var(--line); border-radius: 11px;
  padding: 13px 16px; margin: 0;
}
.news-kpis b { display: block; font-family: var(--serif); font-size: 1.6rem; color: var(--club); line-height: 1.1; }
.news-kpis span { font-size: .82rem; color: var(--ink-3); }

.news-bloc { margin: 0 0 44px; padding-top: 26px; border-top: 1px solid var(--line); }
.news-bloc > h2 { margin-bottom: 8px; }
.news-bloc > .section-intro { margin-bottom: 22px; }
.section-intro.small { font-size: .93rem; }

/* --- actualités --- */
.actus { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; }
.actu {
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--club-2);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 0; overflow: hidden;
}
/* Illustration de rubrique, en bandeau : le motif utile est tenu dans le carré central du SVG,
   donc la même image sert en vignette carrée sans rien perdre (voir gen_actus_images.py). */
.actu-img { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--line); }
.actu-corps { padding: 16px 20px 18px; }
.actu-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 0 0 8px; }
.actu-src {
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; background: var(--club-3); color: var(--club-2);
}
.actu-meta time { font-size: .78rem; color: var(--ink-3); font-family: var(--mono); }
.actu h3 { font-size: 1.06rem; margin-bottom: 8px; }
.actu h3 a { color: var(--ink); text-decoration: none; }
.actu h3 a:hover { color: var(--club-2); text-decoration: underline; }
.actu-txt { font-size: .92rem; color: var(--ink-2); margin-bottom: 10px; }
.actu-lien { margin: 0; font-size: .85rem; font-weight: 600; }

/* --- les joueurs français (rubrique à part) ------------------------------------------------
   Une carte par joueur : sa fiche de score d'abord, puis ses parties de la période, chacune
   menant à la partie officielle. La barre de gauche est dorée, pour que la rubrique se
   distingue au premier regard de l'actualité générale (barre verte). */
.fr-releve { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 16px; margin-bottom: 26px; }
.fr-joueur {
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 14px 18px 15px;
}
.fr-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px; margin: 0 0 4px; }
.fr-tete b { font-family: var(--serif); font-size: 1.12rem; color: var(--ink); }
.fr-elo {
  font-family: var(--mono); font-size: .76rem; color: var(--gold);
  background: var(--gold-2); border-radius: 999px; padding: 2px 8px;
}
.fr-score { margin: 0 0 6px; font-size: .9rem; color: var(--ink-2); }
.fr-score b { font-family: var(--serif); font-size: 1.05rem; color: var(--club); margin-right: 8px; }
.fr-score span { display: block; }
.fr-encours { color: var(--v-imprecision); }
.fr-tournois { margin: 0 0 8px; font-size: .84rem; color: var(--ink-3); }
.fr-parties { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px dashed var(--line-2); }
.fr-parties li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px;
  font-size: .85rem; color: var(--ink-2); padding: 3px 0;
}
.fr-parties a { color: var(--club-2); text-decoration: none; }
.fr-parties a:hover { text-decoration: underline; }
.fr-parties b { color: var(--ink); font-family: var(--mono); white-space: nowrap; }
/* `nowrap` : sans lui, un résultat comme « 1-0 » se coupe après le tiret en fin de ligne
   (relevé au contrôle visuel). */
.fr-ext { color: var(--ink-3); font-size: .78rem; }
.fr-date { margin-left: auto; font-family: var(--mono); font-size: .74rem; color: var(--ink-3); }
.fr-sous-titre { font-size: 1.05rem; margin: 0 0 14px; color: var(--ink-2); }
.actu h4 { font-size: 1.02rem; margin-bottom: 8px; }
.actu h4 a { color: var(--ink); text-decoration: none; }
.actu h4 a:hover { color: var(--club-2); text-decoration: underline; }

/* --- tournois --- */
.tournois { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; }
.tournoi {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; display: flex; flex-direction: column;
}
.tournoi-live { border-color: #bcd9c9; box-shadow: 0 0 0 1px #d3e6dc inset; }
.tournoi-etat {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px;
  font-size: .78rem; font-weight: 600; color: var(--ink-3); letter-spacing: .04em;
  text-transform: uppercase;
}
.tournoi-live .tournoi-etat { color: var(--v-excellent); }
.live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--v-excellent);
  box-shadow: 0 0 0 0 rgba(21, 128, 61, .5); animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(21, 128, 61, .45); }
  70%  { box-shadow: 0 0 0 7px rgba(21, 128, 61, 0); }
  100% { box-shadow: 0 0 0 0 rgba(21, 128, 61, 0); }
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.tournoi-tier { margin-left: auto; font-weight: 700; color: var(--gold); }
.tournoi h3 { font-size: 1.12rem; margin-bottom: 10px; }
.tournoi-facts { margin: 0 0 10px; }
.tournoi-facts > div { display: flex; gap: 10px; font-size: .88rem; padding: 3px 0; }
.tournoi-facts dt { flex: 0 0 76px; color: var(--ink-3); margin: 0; }
.tournoi-facts dd { margin: 0; color: var(--ink-2); }
.tournoi-joueurs { font-size: .88rem; color: var(--ink-2); margin-bottom: 10px; }
.tournoi-joueurs b { color: var(--ink-3); font-weight: 600; }
.tournoi-liens { display: flex; flex-wrap: wrap; gap: 14px; margin: auto 0 0; font-size: .87rem; font-weight: 600; }

/* --- parties analysées --- */
.partie {
  margin: 0 0 46px; padding: 26px 0 0; border-top: 2px solid var(--line-2);
}
/* Note « après l'abandon » : ce que la suite en pointillés représente, et jusqu'où elle va.
   Le liseré gris rappelle la couleur des demi-coups non joués. */
.abandon-note {
  margin: 0 0 30px; padding: 12px 16px; background: var(--paper-2);
  border-left: 3px solid #aab4bd; border-radius: 0 8px 8px 0;
  font-size: .92rem; color: var(--ink-2);
}
.abandon-note b { color: var(--ink); }
.abandon-note strong { color: var(--ink); }
.partie-head { margin-bottom: 6px; }
.partie-event { font-size: .9rem; color: var(--ink-2); margin: 0 0 6px; }
.partie-head h3 {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px;
  font-size: 1.42rem; margin-bottom: 10px;
}
.partie-elo { font-family: var(--mono); font-size: .84rem; color: var(--ink-3); font-weight: 500; }
.partie-vs { font-family: var(--sans); font-size: .82rem; letter-spacing: .04em; color: var(--ink-3); }
.partie-res {
  font-family: var(--mono); font-size: 1rem; font-weight: 700;
  background: var(--paper-2); border: 1px solid var(--line); padding: 2px 11px; border-radius: 999px;
}
.partie-titre-j { font-size: .8em; color: var(--gold); font-weight: 700; }
.partie-tags {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 14px;
}
.partie-tags li {
  font-size: .76rem; font-weight: 600; padding: 4px 11px; border-radius: 999px;
  background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--line); margin: 0;
}
.partie-pourquoi {
  font-family: var(--serif); font-size: 1.06rem; line-height: 1.6; color: var(--club);
  border-left: 3px solid var(--gold); padding-left: 16px; margin: 0 0 8px; max-width: 88ch;
}
.partie-sub { font-size: 1.2rem; margin: 30px 0 8px; }
.partie > .source-note { margin-top: 26px; }

/* --- bandeau de l'accueil --- */
.news-teaser {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 30px;
  background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--gold);
  border-radius: var(--radius); padding: 26px 28px; margin: 40px 0 44px; box-shadow: var(--shadow);
}
.news-teaser h2 { font-size: 1.7rem; margin-bottom: 10px; }
.news-teaser p { color: var(--ink-2); }
.news-teaser-une { font-size: .96rem; }
.news-teaser-une cite { font-style: normal; font-weight: 650; color: var(--ink); }
.news-teaser-cta { display: inline-block; margin: 2px 0 12px; font-weight: 650; color: var(--club-2); }
.news-teaser-facts { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.news-teaser-facts li {
  font-size: .76rem; color: var(--ink-3); background: var(--paper-2);
  padding: 3px 9px; border-radius: 999px; margin: 0;
}
.news-teaser-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.news-teaser-list li { padding: 13px 0; border-bottom: 1px solid var(--line); margin: 0;
  display: flex; align-items: flex-start; gap: 12px; }
.news-teaser-list li a { font-weight: 600; text-decoration: none; }
.news-teaser-list li a:hover { text-decoration: underline; }
.news-teaser-list li.more { border-bottom: 0; padding-bottom: 0; }
/* Vignette de rubrique : même fichier que le bandeau de la page Nouvelles, recadré au carré. */
.teaser-img { flex: none; width: 60px; height: 60px; object-fit: cover;
  border: 1px solid var(--line); border-radius: 6px; }
.teaser-corps { min-width: 0; }

/* ---------- Problème du jour ---------- */
.puzzle h2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.puzzle-diff {
  font-family: var(--sans); font-size: .74rem; font-weight: 650; letter-spacing: .01em;
  color: var(--gold); background: var(--gold-2); border: 1px solid var(--line-2);
  padding: 3px 10px; border-radius: 999px;
}
.puzzle-consigne { font-size: 1.06rem; margin: 6px 0 12px; color: var(--ink); }
.puzzle-consigne strong { color: var(--club); }
/* Grille à deux colonnes : l'échiquier d'un côté, le commentaire de l'autre. Les deux
   éléments portent `min-width: 0` — sans quoi la taille minimale d'une grille d'échiquier
   (celle de son contenu) ferait déborder la page sur écran étroit, défaut déjà rencontré
   sur ce site et corrigé partout ailleurs de la même façon. */
.puzzle-grid {
  display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: 26px; align-items: start; margin-top: 18px;
}
.puzzle-main, .puzzle-side { min-width: 0; }
.puzzle-main .board-shell { max-width: 400px; }
.puzzle-appat { font-size: .9rem; color: var(--ink-2); margin: 0 0 10px; }
.puzzle-appat .mono { font-family: var(--mono); font-size: .84rem; color: var(--ink-3); }
.puzzle-actions { display: flex; gap: 8px; margin: 12px 0 8px; }
.puzzle-actions button {
  font: inherit; font-size: .84rem; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--card); color: var(--ink); cursor: pointer;
}
.puzzle-actions button.primary { background: var(--club); border-color: var(--club); color: #fff; }
.puzzle-actions button:hover { border-color: var(--club-2); }
.puzzle-feedback { font-size: .9rem; color: var(--ink-2); margin: 0; min-height: 2.9em; }
.puzzle-feedback.ok { color: var(--v-excellent); font-weight: 600; }
.puzzle-feedback.no { color: var(--v-erreur); }
.puzzle-side {
  background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--club);
  border-radius: var(--radius); padding: 16px 18px;
}
.puzzle-motif { font-size: .94rem; font-weight: 650; color: var(--ink); margin: 0 0 10px; }
.puzzle-side-note { font-size: .82rem; color: var(--ink-3); margin: 0; }
.puzzle-reveal { margin-top: 28px; border-top: 1px solid var(--line); padding-top: 20px; }
/* `[hidden]` est indispensable : la règle d'affichage l'emporterait sinon sur le display:none
   que le navigateur applique à l'attribut (piège déjà rencontré sur ce site). */
.puzzle-reveal[hidden] { display: none; }
.puzzle-reveal h3 { margin-bottom: 12px; }
.puzzle-sol { margin-bottom: 14px; }
.puzzle-chiffres {
  list-style: none; display: flex; flex-wrap: wrap; gap: 14px 30px; padding: 0; margin: 0 0 18px;
}
.puzzle-chiffres li { margin: 0; }
.puzzle-chiffres b { display: block; font-family: var(--serif); font-size: 1.3rem; color: var(--club); }
.puzzle-chiffres span { font-size: .78rem; color: var(--ink-3); }
.puzzle-explain { margin: 0 0 10px; color: var(--ink-2); }
.puzzle-histo { list-style: none; padding: 0; margin: 0; }
.puzzle-histo li {
  display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--line); margin: 0; font-size: .9rem;
}
.puzzle-histo-niv { font-weight: 650; color: var(--club); }
.puzzle-histo-themes { color: var(--ink-3); font-size: .82rem; }
.puzzle-histo-sol { margin-left: auto; font-family: var(--mono); font-size: .84rem; }

/* ---------- encart « Problème du jour » de l'accueil ---------- */
/* Même famille visuelle que l'encart des Nouvelles, qu'il suit dans l'ordre des boîtes :
   seule la couleur du filet supérieur change (vert de club au lieu de l'or), pour que les
   deux encarts se distinguent au premier regard. */
.puzzle-teaser {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 30px;
  background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--club);
  border-radius: var(--radius); padding: 26px 28px; margin: 0 0 44px; box-shadow: var(--shadow);
}
.puzzle-teaser h2 { font-size: 1.7rem; margin-bottom: 10px; }
.puzzle-teaser p { color: var(--ink-2); }
.puzzle-teaser-cta { display: inline-block; margin: 2px 0 12px; font-weight: 650; color: var(--club-2); }
.puzzle-teaser-facts { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.puzzle-teaser-facts li {
  font-size: .76rem; color: var(--ink-3); background: var(--paper-2);
  padding: 3px 9px; border-radius: 999px; margin: 0;
}
/* `min-width: 0` : sans lui, la taille minimale d'une grille d'échiquier (celle de son
   contenu) fait déborder la page sur écran étroit — piège déjà rencontré sur ce site. */
.puzzle-teaser-jouer { min-width: 0; margin: 0; }

/* ---------- archives des problèmes ---------- */
.arch-jour > h2 { margin-bottom: 6px; }
.arch-lot { display: grid; grid-template-columns: repeat(auto-fit, minmax(316px, 1fr)); gap: 20px; }
.arch-item { margin: 0; }
.arch-niv {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
  font-size: 1.1rem; margin: 0 0 8px;
}
.arch-item .board-shell { max-width: 330px; }
.arch-item .puzzle-feedback { min-height: 1.5em; }
/* Les deux problèmes d'une même journée sont côte à côte : réserver trois lignes aux étiquettes
   garde les deux échiquiers à la même hauteur, quel que soit le nombre de thèmes affichés
   (mesuré : 51 px pour deux lignes, 69 px pour trois). */
.arch-item .partie-tags { min-height: 70px; align-content: flex-start; }
.arch-cta { margin: 16px 0 0; }
.arch-cta a { font-weight: 650; color: var(--club-2); text-decoration: none; }
.arch-cta a:hover { text-decoration: underline; }
.ligne-nav a.actif { background: var(--club); border-color: var(--club); color: #fff; }
.ligne-nav a.actif:hover { color: #fff; }
.puzzle-teaser-jouer .board-shell { max-width: 300px; }
.puzzle-teaser-legende { font-size: .84rem; color: var(--ink-2); margin: 10px 0 8px; max-width: 300px; }
.puzzle-teaser-niveaux { list-style: none; padding: 0; margin: 0; }
.puzzle-teaser-niveaux li { font-size: .78rem; color: var(--ink-3); margin: 0 0 3px; }
.puzzle-teaser-niveaux b { color: var(--club); }

/* ---------- rubrique « Joueurs français » : classement FIDE, parcours, championnats ---------- */
/* Le classement est un tableau : sur téléphone il défile horizontalement plutôt que de se tasser
   (sept colonnes ne tiennent pas dans 390 px). Le nom et le rang restent visibles au défilement. */
.fr-classement { overflow-x: auto; width: 100%; max-width: 100%; margin: 0 0 10px; }
.fr-classement table { border-collapse: collapse; width: 100%; font-size: .9rem; }
.fr-classement th, .fr-classement td {
  padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap;
}
.fr-classement thead th {
  font-family: var(--sans); font-size: .7rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line-2);
}
.fr-classement td.num, .fr-classement th.num { text-align: right; font-family: var(--mono); }
.fr-classement tbody tr:hover { background: var(--paper-2); }
.fr-classement .fr-rang { font-family: var(--mono); color: var(--ink-3); }
/* Variation d'Elo depuis la liste FIDE précédente : verte quand le joueur a gagné des points,
   rouge quand il en a perdu. Le sens ne repose jamais sur la seule couleur — la flèche et le
   nombre signé le portent aussi (et l'infobulle dit la phrase entière). */
.fr-classement .fr-var {
  font-family: var(--mono); font-size: .74rem; font-weight: 700; margin-left: 5px;
  letter-spacing: .01em; white-space: nowrap;
}
.fr-classement .fr-var.hausse { color: var(--v-excellent); }
.fr-classement .fr-var.baisse { color: var(--v-gaffe); }
/* La cellule du nom s'appelle fr-cell-joueur et non fr-joueur : les fiches de résultats portent
   déjà ce dernier nom, et deux éléments différents sous la même classe rendent tout comptage faux
   (constaté au contrôle : 25 « fiches » pour 5 joueurs). */
.fr-classement .fr-cell-joueur b { font-family: var(--serif); font-size: 1rem; color: var(--ink); }
.fr-classement .fr-titre {
  font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
  border: 1px solid var(--line-2); border-radius: 5px; padding: 1px 5px; margin-left: 6px;
}
.fr-classement tr.suivi { background: rgba(31, 92, 62, .05); }
.fr-classement .fr-marque { color: var(--club); font-weight: 700; }
.fr-classement a { color: var(--club-2); text-decoration: none; }
.fr-classement a:hover { text-decoration: underline; }
/* Explication du critère : mêmes colonnes que les autres notes de bas de section. */
.fr-critere { font-size: .82rem; color: var(--ink-3); margin: 6px 0 0; }

/* Le parcours d'un joueur, dans la fiche de résultats. */
.fr-parcours { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; font-size: .86rem; }
.fr-parcours span { color: var(--ink-2); }
.fr-parcours b { color: var(--club); font-weight: 650; }

/* Les championnats : un bloc par famille, une ligne par édition annoncée. */
.fr-champ { border-top: 1px dashed var(--line-2); padding: 12px 0 0; margin: 12px 0 0; }
.fr-champ:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.fr-champ h3 { font-family: var(--serif); font-size: 1.06rem; margin: 0 0 6px; }
.fr-champ ul { list-style: none; margin: 0; padding: 0; }
.fr-champ li { margin: 0 0 8px; }
.fr-champ .fr-champ-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.fr-champ .fr-etat {
  font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; font-weight: 650;
  border-radius: 5px; padding: 1px 6px; border: 1px solid var(--line-2); color: var(--ink-3);
}
.fr-champ .fr-etat.avenir { background: var(--club); border-color: var(--club); color: #fff; }
.fr-champ .fr-champ-detail { font-size: .88rem; color: var(--ink-2); margin: 2px 0 0; }
.fr-champ .fr-champ-src { font-size: .8rem; color: var(--ink-3); margin: 2px 0 0; }
.fr-champ .fr-cites { font-size: .82rem; color: var(--ink-2); margin: 3px 0 0; }

/* ---------- responsive ---------- */
/* Le menu est passé à HUIT entrées le 03/10/2026 (« Joueurs français », entre « Nouvelles des
   Échecs » et « Problème du jour »). Mesuré sur le site servi : les huit libellés demandent
   1027 px là où la barre n'en offrait que 890 — le .wrap plafonne à 1200 px, quelle que soit la
   largeur de la fenêtre — donc la barre basculait sur une ligne à part, ce qui déportait le menu
   vers la gauche et le bas. Deux réglages l'ont ramenée sur la ligne de la marque à 1200 px et
   plus (option B retenue par Philippe) : la signature du mât masquée (250 → 134 px) et 2 px de
   marge interne en moins par lien (995 px de liens pour 1006 px offerts).
   La barre passe de toute façon à la ligne DÈS QU'ELLE MANQUE DE PLACE : elle ne peut donc plus
   rien couper, et une nouvelle entrée de menu ne demandera plus de retoucher un seuil.
   Contrôle : qa_renommage_nav.py, sur dix largeurs, mesure la coupure réelle de chaque lien. */
.masthead .wrap { flex-wrap: wrap; min-height: 0; gap: 2px; padding-bottom: 6px; }
/* La barre reste À DROITE (marge automatique comme avant) : quand les libellés ne tiennent plus
   sur la ligne de la marque, elle se replie SUR ELLE-MÊME, en gardant ses lignes alignées à
   droite — la première version la mettait sur une ligne à part, ce qui la déportait à gauche. */
.nav { flex-wrap: wrap; overflow: visible; justify-content: flex-end; }
/* L'en-tête est plus bas qu'avant (55 px sur grand écran depuis que la signature est masquée,
   contre 142 px) : la réserve d'ancrage suit, sinon les ancres laisseraient un grand vide. Elle
   est réglée largeur par largeur, car la barre se replie entre 1200 et 1000 px et l'en-tête
   remonte alors à 139 px — une valeur unique laisserait l'ancre cachée SOUS la barre collante. */
html { scroll-padding-top: 74px; }
[id] { scroll-margin-top: 74px; }
@media (max-width: 1199px) {
  html { scroll-padding-top: 116px; }
  [id] { scroll-margin-top: 116px; }
}
@media (max-width: 1000px) {
  html { scroll-padding-top: 156px; }
  [id] { scroll-margin-top: 156px; }
  .hero { grid-template-columns: 1fr; gap: 28px; }
  .hero h1 { font-size: 1.6rem; }
  .hero-board { max-width: 420px; }
  .player { grid-template-columns: 1fr; }
  .player-board { max-width: 420px; }
  .tools-grid, .foot-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .news-teaser { grid-template-columns: 1fr; gap: 22px; }
  .puzzle-teaser { grid-template-columns: 1fr; gap: 22px; }
  .puzzle-grid { grid-template-columns: 1fr; gap: 22px; }
  .arch-lot { grid-template-columns: 1fr; gap: 18px; }
  .puzzle-main .board-shell { max-width: 420px; }
}
@media (max-width: 780px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  .doors, .duo, .compare-boards { grid-template-columns: 1fr; }
  .actus, .tournois, .news-kpis { grid-template-columns: 1fr; }
  .news-teaser { padding: 20px 18px; }
  .news-teaser h2 { font-size: 1.45rem; }
  .puzzle-teaser { padding: 20px 18px; }
  .puzzle-teaser h2 { font-size: 1.45rem; }
  .partie-head h3 { font-size: 1.2rem; }
  .tournoi-facts dt { flex: 0 0 68px; }
  h1 { font-size: 1.95rem; }
  .hero h1 { font-size: 1.5rem; }
  .hero-kpis { grid-template-columns: 1fr 1fr; }  /* 2+2+2 plutôt que 3 colonnes écrasées */
  /* Sur mobile, le menu passe sur une seconde ligne : rien n'est coupé à droite. */
  .masthead .wrap { flex-wrap: wrap; min-height: 0; gap: 2px; padding-bottom: 6px; }
  .brand { font-size: 1.05rem; padding-top: 6px; }
  .brand em { display: none; }
  .logo-piece { width: 24px; height: 24px; flex: 0 0 24px; }
  .brand-editeur { height: 38px; }
  .brand-blocs { gap: 10px; }
  .nav { flex-wrap: wrap; overflow: visible; margin-left: 0; width: 100%; }
  .nav a { padding: 6px 10px; font-size: .87rem; }
  /* L'en-tête est plus haut : les ancres et scrollIntoView doivent en tenir compte. */
  html { scroll-padding-top: 122px; }
  [id] { scroll-margin-top: 122px; }
  /* Le tableau du classement est large : il défile DANS son cadre (.fr-classement), mais le
     navigateur reporte malgré tout son débordement sur le document — mesuré 86 px de trop à
     390 px, la page entière devenait glissante. On coupe ce report ici ; le tableau reste
     consultable en entier en le faisant glisser. */
  main.wrap { overflow-x: hidden; }
  /* Le tableau du classement tient dans 390 px en resserrant ses marges et sa police ; l'insigne
     de titre y est retiré, le titre complet restant rappelé dans la fiche du joueur. */
  .fr-classement { font-size: .76rem; }
  .fr-classement th, .fr-classement td { padding: 6px 5px; }
  .fr-classement thead th { font-size: .62rem; letter-spacing: .05em; }
  .fr-classement .fr-cell-joueur b { font-size: .92rem; }
  .fr-classement .fr-titre { display: none; }
  .fr-parcours { font-size: .82rem; gap: 3px 10px; }
  .fr-champ h3 { font-size: 1rem; }
  .board-shell { gap: 4px; }
  .scale-row { grid-template-columns: 54px 1fr; }
  .scale-sens { grid-column: 2; font-size: .84rem; }
  .legend-row { grid-template-columns: 1fr; gap: 4px; }
  .foot-grid { grid-template-columns: 1fr; }
}

@media print {
  .masthead, .player-ctrl, .quiz-actions, .puzzle-actions, .foot { display: none; }
  body { background: #fff; }
}