/* v3-recup.css — l'article « Le vrai entraînement commence quand tu t'arrêtes ».

   La coquille, le fil d'Ariane, le héros, les titres de section et les
   paragraphes viennent du gabarit d'article déjà en place (.gk-dkv3 /
   .gk-dk-*, cf. glass-site.css + v3-social.css). On n'ajoute ici que ce que
   CET article apporte en plus : le sélecteur de discipline, le sommaire, la
   colonne d'encadrés, les figures, les schémas animés, les calculateurs, les
   tableaux et l'appareil de notes.

   Deux règles qui expliquent tout le fichier :

   1. TOUT EST PRÉFIXÉ `rc-` ET ISOLÉ. L'article arrivait avec des noms de
      classes très génériques (.card, .hero, .wrap, .lead, .num, .side…) dont
      douze existaient déjà dans le CSS du site. Classes, identifiants ET
      variables ont donc été préfixés : rien de l'article ne peut déborder sur
      le site, rien du site ne peut déborder sur l'article.

   2. LES VARIABLES DE L'ARTICLE SONT REDÉFINIES ICI, en valeurs de la charte.
      Le balisage et le script d'origine lisent `var(--rc-blue)`,
      `var(--rc-ink-3)`, etc. En les redéclarant ici on repeint
      l'article entier sans toucher à une seule ligne de son code.

   Charte : fond #0B0E1A, AUCUN arrondi, accent or #C8AA6E, hiérarchie par
   opacités de blanc, hexagones par clip-path (jamais de border sur un
   clip-path : c'est le fond qui porte le filet et un ::before à inset:1px qui
   repose le fond sombre par-dessus).

   Le bleu et le rouge ne sont PAS décoratifs : ils codent la discipline
   (poomsae / kyorugi) et reprennent les couleurs de zones déjà utilisées par
   la page « Le corps » du site. */

/* Elles sont posées sur :root et non sur .gk-recup : le balisage et le script
   d'origine passent parfois `var(--rc-…)` dans un ATTRIBUT SVG (stroke, fill)
   généré à la volée, et une variable doit alors être résoluble depuis la
   racine. Les noms étant préfixés, rien ne peut entrer en collision. */
:root {
  /* surfaces et encre */
  --rc-paper: #0B0E1A;
  --rc-paper-2: rgba(255, 255, 255, .045);
  --rc-card: #101728;
  --rc-line: rgba(255, 255, 255, .14);
  --rc-ink: #F2F4FA;
  --rc-ink-2: rgba(255, 255, 255, .80);
  --rc-ink-3: rgba(255, 255, 255, .50);
  /* code discipline + signaux */
  --rc-blue: #5AA6E8;
  --rc-blue-soft: rgba(90, 166, 232, .16);
  --rc-red: #EF6B78;
  --rc-red-soft: rgba(239, 107, 120, .16);
  --rc-green: #6FD69A;
  --rc-green-soft: rgba(111, 214, 154, .16);
  --rc-gold: #C8AA6E;
  /* polices */
  --rc-display: 'GT Sectra Display', Georgia, serif;
  --rc-body: 'Inter', sans-serif;
  --rc-mono: 'Inter Tight', 'Inter', sans-serif;
  --rc-shadow: none;
}

/* L'article est en deux colonnes : la coquille d'article, calée sur 780 px
   pour du texte seul, est trop étroite. */
.gk-recup .gk-dk-wrap { max-width: 1120px; }
.gk-recup .gk-dk-hero { max-width: 18ch; }
.gk-recup .gk-dk-lead { max-width: 62ch; }

/* ── CHAPÔ D'OUVERTURE ──────────────────────────────────────────────────── */
.gk-recup .rc-story { margin-top: 22px; max-width: 62ch; }
.gk-recup .rc-story .gk-dk-p { font-size: 15.5px; line-height: 1.62; }
/* Lettrine : la seule vraie touche d'or du chapô. */
.gk-recup .rc-story .gk-dk-p:first-child::first-letter {
  font: italic 700 3.1em/.8 var(--rc-display);
  float: left; margin: .06em .1em 0 0; color: var(--rc-gold);
}

.gk-recup .rc-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; }
.gk-recup .rc-pill {
  position: relative; padding: 7px 14px;
  font: 600 10.5px/1 var(--rc-body); letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
  background: linear-gradient(135deg, rgba(255,255,255,.34), rgba(255,255,255,.10) 45%, rgba(255,255,255,.22));
}
.gk-recup .rc-pill::before {
  content: ''; position: absolute; inset: 1px; background: #0D1524;
}
.gk-recup .rc-pill { z-index: 0; }
.gk-recup .rc-pill::before { z-index: -1; }

/* ── SÉLECTEUR DE DISCIPLINE ────────────────────────────────────────────────
   Reprend la recette des onglets du site (.wtabs / .wtab) : conteneur au filet
   dégradé, pastilles hexagonales.

   ⚠ Il colle en haut pendant la lecture, MAIS seulement pour un lecteur
   connecté. Pour un visiteur, gk-mur.js pose `gkm-zone is--coupe` sur
   `.gk-dk-wrap` avec `overflow:hidden`, et un ancêtre qui découpe annule tout
   `position:sticky` en dessous (vérifié : la même boîte colle à top 0 dès que
   l'overflow repasse en visible). C'est aussi vrai de la colonne d'encadrés.
   Ce n'est pas gênant : l'article du visiteur est de toute façon coupé à
   55 %. Ne pas « réparer » en forçant l'overflow du wrap, ce serait casser le
   mur de compte. */
.gk-recup .rc-switch {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
  margin: 30px 0 0; padding: 12px 0 12px;
  background: linear-gradient(180deg, rgba(11,14,26,.97) 78%, rgba(11,14,26,0));
}
.gk-recup .rc-lbl {
  font: 600 10px/1 var(--rc-body); letter-spacing: .2em; text-transform: uppercase;
  color: var(--rc-gold);
}
.gk-recup .rc-hint,
.gk-recup #rc-switch-hint {
  font: 400 12px/1.4 var(--rc-body); color: var(--rc-ink-3);
  letter-spacing: 0; text-transform: none;
}
.gk-recup .rc-seg {
  position: relative; display: inline-flex; gap: 2px; padding: 5px;
  background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.24) 30%, rgba(255,255,255,.07) 56%, rgba(255,255,255,.36));
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%);
}
.gk-recup .rc-seg::before {
  content: ''; position: absolute; inset: 0; z-index: 0; background: #0D1524;
  clip-path: polygon(16.8px 1.4px, calc(100% - 16.8px) 1.4px, calc(100% - 1.7px) 50%, calc(100% - 16.8px) calc(100% - 1.4px), 16.8px calc(100% - 1.4px), 1.7px 50%);
}
.gk-recup .rc-seg button {
  position: relative; z-index: 1; flex: 0 0 auto; white-space: nowrap;
  border: 0; cursor: pointer; padding: 9px 22px;
  font: 600 12px var(--rc-body); letter-spacing: .04em;
  color: var(--rc-ink-3); background: rgba(255, 255, 255, .04);
  clip-path: var(--hexc);
  transition: color .18s, background .18s;
}
.gk-recup .rc-seg button:hover { color: rgba(255, 255, 255, .82); }
.gk-recup .rc-seg button[aria-pressed="true"] {
  color: #F2F4FA;
  background: linear-gradient(150deg, rgba(255,255,255,.20), rgba(255,255,255,.06));
}
.gk-recup .rc-seg button[data-d="poomsae"][aria-pressed="true"] {
  background: linear-gradient(150deg, rgba(90,166,232,.42), rgba(90,166,232,.10));
}
.gk-recup .rc-seg button[data-d="kyorugi"][aria-pressed="true"] {
  background: linear-gradient(150deg, rgba(239,107,120,.42), rgba(239,107,120,.10));
}

/* Le filtre : le tronc commun reste toujours affiché. */
.gk-recup[data-d="poomsae"] .rc-only-kyorugi { display: none; }
.gk-recup[data-d="kyorugi"] .rc-only-poomsae { display: none; }

.gk-recup .rc-tagd {
  display: inline-block; vertical-align: middle; margin-left: 6px;
  padding: 3px 8px; font: 600 9px/1 var(--rc-body);
  letter-spacing: .14em; text-transform: uppercase;
}
.gk-recup .rc-tagd.rc-p { background: var(--rc-blue-soft); color: var(--rc-blue); }
.gk-recup .rc-tagd.rc-k { background: var(--rc-red-soft); color: var(--rc-red); }

/* ── SOMMAIRE ───────────────────────────────────────────────────────────── */
.gk-recup .rc-toc { margin: 26px 0 0; padding: 18px 0 4px; border-top: 1px solid var(--rc-line); }
.gk-recup .rc-toc .rc-kicker {
  font: 600 10px/1 var(--rc-body); letter-spacing: .2em; text-transform: uppercase;
  color: var(--rc-gold);
}
.gk-recup .rc-toc ol {
  list-style: none; padding: 0; margin: 12px 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2px 24px;
}
.gk-recup .rc-toc a {
  display: grid; grid-template-columns: 30px 1fr; gap: 6px; align-items: baseline;
  padding: 9px 10px; text-decoration: none;
  font: 500 13.5px/1.35 var(--rc-body); color: rgba(255, 255, 255, .80);
  transition: background .18s, color .18s;
}
.gk-recup .rc-toc a span {
  font: 600 11px var(--rc-mono); font-variant-numeric: tabular-nums;
  color: var(--rc-gold); opacity: .8;
}
.gk-recup .rc-toc a:hover { background: rgba(255, 255, 255, .05); color: #fff; }

/* ── CHAPITRES ──────────────────────────────────────────────────────────── */
.gk-recup .rc-ch { padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .08); }
.gk-recup .rc-ch:first-of-type { border-top: 0; }
.gk-recup .rc-cols {
  display: grid; grid-template-columns: minmax(0, 68ch) minmax(0, 1fr);
  gap: 40px; align-items: start;
}
.gk-recup .rc-side { position: sticky; top: 84px; display: grid; gap: 12px; }

.gk-recup .rc-lead {
  font: italic 400 17px/1.5 var(--rc-display); color: rgba(255, 255, 255, .88);
  margin: 0 0 6px;
}
.gk-recup .rc-h3 {
  font: italic 700 17px/1.3 var(--rc-display); color: #F2F4FA;
  letter-spacing: .03em; margin: 30px 0 2px;
}
.gk-recup .rc-h4 {
  font: 600 13px/1.35 var(--rc-body); color: #F2F4FA; margin: 0 0 6px;
  letter-spacing: .02em;
}
.gk-recup .rc-num {
  font: 600 .96em var(--rc-mono); font-variant-numeric: tabular-nums;
  color: var(--rc-gold); white-space: nowrap;
}
.gk-recup .rc-big { font: italic 700 1.05em var(--rc-display); }
.gk-recup .rc-ref {
  font: 500 9px var(--rc-mono); vertical-align: super; line-height: 0;
  color: var(--rc-gold); opacity: .7; text-decoration: none; padding: 0 1px;
}
.gk-recup .rc-ref:hover { opacity: 1; text-decoration: underline; }
.gk-recup .rc-q {
  margin: 26px 0; padding-left: 16px;
  border-left: 2px solid var(--rc-gold);
  font: italic 700 19px/1.35 var(--rc-display); color: #F2F4FA;
}
.gk-recup .gk-dk-p strong { color: #F2F4FA; font-weight: 600; }

/* ── ENCADRÉS DE LA COLONNE DE DROITE ───────────────────────────────────── */
.gk-recup .rc-card {
  position: relative; padding: 16px 18px;
  background: linear-gradient(150deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
}
.gk-recup .rc-card p,
.gk-recup .rc-card li { font: 400 12.5px/1.5 var(--rc-body); color: rgba(255, 255, 255, .76); margin: 4px 0; }
.gk-recup .rc-card ul { padding-left: 16px; margin: 6px 0 0; }
.gk-recup .rc-card.rc-p { border-top: 2px solid var(--rc-blue); }
.gk-recup .rc-card.rc-k { border-top: 2px solid var(--rc-red); }

.gk-recup .rc-stat { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: baseline; }
.gk-recup .rc-stat .rc-v {
  font: italic 800 30px/1 var(--rc-mono); font-variant-numeric: tabular-nums;
  color: var(--rc-gold); white-space: nowrap;
}
.gk-recup .rc-stat .rc-l { font: 400 12px/1.45 var(--rc-body); color: rgba(255, 255, 255, .70); }

/* ── ENCART D'INSISTANCE ────────────────────────────────────────────────── */
.gk-recup .rc-callout {
  margin: 24px 0; padding: 14px 18px;
  border-left: 2px solid var(--rc-gold);
  background: linear-gradient(150deg, rgba(200,170,110,.10), rgba(200,170,110,.03));
}
.gk-recup .rc-callout .rc-kicker {
  display: block; margin-bottom: 4px;
  font: 600 10px/1 var(--rc-body); letter-spacing: .2em; text-transform: uppercase;
  color: var(--rc-gold);
}
.gk-recup .rc-callout .gk-dk-p:first-of-type { margin-top: 2px; }

/* ── LISTES À COCHER ────────────────────────────────────────────────────── */
.gk-recup .rc-checks { list-style: none; padding: 0; margin: 14px 0; }
.gk-recup .rc-checks li {
  position: relative; padding-left: 26px; margin: 8px 0;
  font: 400 14px/1.5 var(--rc-body); color: rgba(255, 255, 255, .82);
}
.gk-recup .rc-checks li::before {
  position: absolute; left: 0; top: 0; font: 700 13px/1.5 var(--rc-body);
}
.gk-recup .rc-checks.rc-yes li::before { content: "✓"; color: var(--rc-green); }
.gk-recup .rc-checks.rc-no li::before { content: "✗"; color: var(--rc-red); }

/* ── TABLEAUX ───────────────────────────────────────────────────────────── */
.gk-recup .rc-tablewrap {
  overflow-x: auto; margin: 20px 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .02);
}
.gk-recup table { border-collapse: collapse; width: 100%; min-width: 620px; }
.gk-recup th, .gk-recup td {
  padding: 10px 12px; text-align: left; vertical-align: top;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font: 400 12.5px/1.45 var(--rc-body); color: rgba(255, 255, 255, .78);
}
.gk-recup th {
  font: 600 9.5px/1 var(--rc-body); letter-spacing: .16em; text-transform: uppercase;
  color: var(--rc-gold); background: rgba(255, 255, 255, .04); white-space: nowrap;
}
.gk-recup tr:last-child td { border-bottom: 0; }

/* ── FIGURES ET SCHÉMAS ─────────────────────────────────────────────────── */
.gk-recup .rc-fig,
.gk-recup .rc-diag {
  position: relative; margin: 24px 0; padding: 16px 18px 14px;
  background: linear-gradient(150deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
}
.gk-recup .rc-ft {
  margin: 0 0 2px; font: italic 700 14px/1.3 var(--rc-display);
  color: #F2F4FA; letter-spacing: .03em;
}
.gk-recup .rc-fs { margin: 0 0 10px; font: 400 12.5px/1.45 var(--rc-body); color: rgba(255, 255, 255, .66); }
.gk-recup .rc-fn { margin: 10px 0 0; font: 400 11px/1.45 var(--rc-body); color: var(--rc-ink-3); }
.gk-recup .rc-fn a { color: var(--rc-gold); opacity: .75; }
.gk-recup .rc-fig svg,
.gk-recup .rc-diag svg { width: 100%; height: auto; display: block; overflow: visible; }
.gk-recup .rc-fig text,
.gk-recup .rc-diag text { font-family: var(--rc-body); fill: rgba(255, 255, 255, .66); font-size: 12px; }
.gk-recup .rc-fig text.rc-val {
  font-family: var(--rc-mono); font-variant-numeric: tabular-nums;
  fill: var(--rc-gold); font-size: 11px; font-weight: 600;
}
.gk-recup .rc-fig text.rc-cat { fill: #F2F4FA; }
.gk-recup .rc-diag .rc-lbl { fill: #F2F4FA; font-weight: 600; }
.gk-recup .rc-grid { stroke: rgba(255, 255, 255, .10); stroke-width: 1; }
.gk-recup .rc-zero { stroke: rgba(255, 255, 255, .30); stroke-width: 1.2; }
.gk-recup .rc-bar {
  cursor: pointer;
  transition: width .9s cubic-bezier(.2,.8,.2,1), height .9s cubic-bezier(.2,.8,.2,1), y .9s, x .9s, opacity .2s;
}
.gk-recup .rc-bar:hover { opacity: .8; }
.gk-recup .rc-c-blue { fill: var(--rc-blue); }
.gk-recup .rc-c-red { fill: var(--rc-red); }
.gk-recup .rc-c-green { fill: var(--rc-green); }
.gk-recup .rc-c-gold { fill: var(--rc-gold); }
.gk-recup .rc-c-ink { fill: rgba(255, 255, 255, .34); }
.gk-recup .rc-curve { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.gk-recup .rc-dash { stroke-dasharray: 6 6; }
.gk-recup .rc-tip {
  position: absolute; z-index: 5; pointer-events: none; white-space: nowrap;
  padding: 7px 10px; opacity: 0; transform: translate(-50%, -110%);
  transition: opacity .15s;
  background: #0D1524; color: #F2F4FA;
  box-shadow: inset 0 0 0 1px rgba(200, 170, 110, .55);
  font: 500 12px var(--rc-body);
}
.gk-recup .rc-tip b {
  font-family: var(--rc-mono); font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--rc-gold);
}

@keyframes rc-dashmove { to { stroke-dashoffset: -24; } }
.gk-recup .rc-flow { stroke-dasharray: 8 8; animation: rc-dashmove 1.2s linear infinite; }

/* ── CONTRÔLES DES SCHÉMAS ──────────────────────────────────────────────── */
.gk-recup .rc-ctrl {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px;
  font: 400 12px var(--rc-body); color: var(--rc-ink-3);
}
.gk-recup .rc-ctrl label { font: 600 11px var(--rc-body); color: rgba(255, 255, 255, .70); }
.gk-recup .rc-ctrl button {
  border: 0; cursor: pointer; padding: 8px 16px;
  font: 600 11px var(--rc-body); letter-spacing: .04em;
  color: var(--rc-ink-3); background: rgba(255, 255, 255, .05);
  clip-path: var(--hexc);
  transition: color .18s, background .18s;
}
.gk-recup .rc-ctrl button:hover { color: rgba(255, 255, 255, .85); }
.gk-recup .rc-ctrl button[aria-pressed="true"] {
  color: #F2F4FA;
  background: linear-gradient(150deg, rgba(255,255,255,.20), rgba(255,255,255,.06));
}
.gk-recup input[type=range] { accent-color: var(--rc-gold); width: 220px; }

/* ── CALCULATEURS ───────────────────────────────────────────────────────── */
.gk-recup .rc-tool {
  margin: 24px 0; padding: 16px 18px;
  background: rgba(255, 255, 255, .035);
  box-shadow: inset 0 0 0 1px rgba(200, 170, 110, .28);
}
.gk-recup .rc-tool label {
  display: block; margin: 8px 0 4px;
  font: 600 10px/1 var(--rc-body); letter-spacing: .16em; text-transform: uppercase;
  color: var(--rc-gold);
}
.gk-recup .rc-tool input[type=number],
.gk-recup .rc-tool input[type=time],
.gk-recup .rc-tool select {
  font: 500 14px var(--rc-body); padding: 9px 10px; width: 150px;
  color: #F2F4FA; background: #0D1524; border: 1px solid var(--rc-line);
  border-radius: 0;
}
.gk-recup .rc-tool select { width: auto; max-width: 100%; }
.gk-recup .rc-tool input:focus-visible,
.gk-recup .rc-tool select:focus-visible,
.gk-recup .rc-ctrl button:focus-visible,
.gk-recup .rc-seg button:focus-visible {
  outline: 2px solid var(--rc-gold); outline-offset: 2px;
}
.gk-recup .rc-tool .rc-row { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-end; }
.gk-recup .rc-tool .rc-out {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .10);
  font: 400 14px/1.55 var(--rc-body); color: rgba(255, 255, 255, .86);
}
.gk-recup .rc-tool .rc-out b {
  font: 600 15px var(--rc-mono); font-variant-numeric: tabular-nums; color: var(--rc-gold);
}

/* ── DÉFINITIONS AU SURVOL ──────────────────────────────────────────────── */
.gk-recup .rc-term {
  font-style: normal; cursor: help;
  text-decoration: underline dotted; text-decoration-color: var(--rc-gold);
  text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
.gk-recup .rc-term:hover,
.gk-recup .rc-term:focus-visible { background: rgba(200, 170, 110, .16); }
/* position:fixed et non absolute : sur le wiki c'est <body> qui défile, donc
   les coordonnées de page (scrollY) sont fausses. Avec fixed, celles de
   getBoundingClientRect suffisent telles quelles. */
.rc-gtip {
  position: fixed; z-index: 60; width: 320px; max-width: calc(100vw - 24px);
  padding: 12px 14px; opacity: 0; pointer-events: none; transform: translateY(4px);
  transition: opacity .15s, transform .15s;
  background: #0D1524; color: rgba(255, 255, 255, .84);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 18px 40px rgba(0, 0, 0, .55);
  border-top: 2px solid var(--rc-gold, #C8AA6E);
  font: 400 12.5px/1.5 'Inter', sans-serif;
}
.rc-gtip.rc-on { opacity: 1; pointer-events: auto; transform: none; }
.rc-gtip b { display: block; margin-bottom: 3px; font: italic 700 14px 'GT Sectra Display', Georgia, serif; color: #F2F4FA; }
.rc-gtip .rc-gk {
  display: block; margin-bottom: 4px;
  font: 600 9px/1 'Inter', sans-serif; letter-spacing: .2em; text-transform: uppercase;
  color: #C8AA6E;
}

/* ── APPAREIL DE NOTES ──────────────────────────────────────────────────── */
.gk-recup .rc-src .gk-dk-p,
.gk-recup .rc-src li { font-size: 12.5px; line-height: 1.5; }
.gk-recup .rc-src ol { padding-left: 22px; color: rgba(255, 255, 255, .62); }
.gk-recup .rc-src li { margin: 6px 0; }
.gk-recup .rc-src li em { color: rgba(255, 255, 255, .80); }
.gk-recup .rc-src li:target,
.gk-recup .rc-src li.rc-vise {
  background: rgba(200, 170, 110, .14);
  box-shadow: -6px 0 0 rgba(200, 170, 110, .55);
  color: rgba(255, 255, 255, .92);
}
.gk-recup details {
  margin: 16px 0; padding: 12px 16px;
  background: rgba(255, 255, 255, .03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
}
.gk-recup summary {
  cursor: pointer; font: 600 12px var(--rc-body); letter-spacing: .04em; color: var(--rc-gold);
}
.gk-recup .rc-foot {
  margin: 40px 0 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .08);
  font: 400 11.5px/1.55 var(--rc-body); color: var(--rc-ink-3);
}

/* ── ANCRES ─────────────────────────────────────────────────────────────
   Sur le wiki c'est <body> qui défile, pas <html> : la marge d'ancrage doit
   être posée sur les deux, sinon la cible passe sous le sélecteur collant. */
html, body { scroll-padding-top: 96px; }

/* ── PETITS ÉCRANS ──────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .gk-recup .rc-cols { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .gk-recup .rc-side { position: static; }
}
@media (max-width: 720px) {
  .gk-recup .rc-switch { gap: 10px; padding: 10px 0; }
  .gk-recup .rc-seg button { padding: 8px 14px; font-size: 11px; }
  .gk-recup #rc-switch-hint { display: none; }
  .gk-recup .rc-toc ol { grid-template-columns: minmax(0, 1fr); }
  .gk-recup .rc-story .gk-dk-p:first-child::first-letter { font-size: 2.6em; }
}

@media (prefers-reduced-motion: reduce) {
  .gk-recup .rc-flow { animation: none; }
  .gk-recup .rc-bar { transition: none; }
}

/* ── LES GRAPHIQUES, À LA CHARTE (08/09) ────────────────────────────────────
   Ils sortaient tels quels de l'article d'origine : couleurs vives sur fond
   clair, grilles marquées, chiffres dans la couleur de la série. Retour de
   Jason : « les schémas ne sont pas tout à fait design system ».

   La palette n'a pas été choisie à l'œil, elle est passée au validateur de la
   méthode data-viz (bande de clarté, plancher de chroma, séparation pour les
   daltonismes, contraste sur le fond) :

     or    #AD8B3A   la série principale, l'accent du site
     bleu  #4A9BE0   POOMSAE, jamais autre chose
     rouge #E06A76   KYORUGI, jamais autre chose
     vert  #2E9E86   « ce qui marche »
     gris  blanc .30 la série de fond, non catégorielle

   Ce sont des tons plus profonds que les --rc-* de la page : ces derniers sont
   faits pour du TEXTE sur fond sombre, une marque pleine demande d'autres pas.
   Contrôles : clarté, chroma, contraste et vision normale PASSENT tous. La paire
   vert/rouge reste dans la bande d'avertissement pour la deutéranopie (ΔE 6,6) :
   c'est admis parce que l'identité n'est JAMAIS portée par la seule couleur,
   chaque barre porte son libellé et sa valeur écrits.

   Règle appliquée partout : le TEXTE porte des jetons de texte, jamais la
   couleur de sa série. Une marque colorée à côté suffit à dire qui est qui. */

.gk-recup .rc-c-gold  { fill: #AD8B3A; }
.gk-recup .rc-c-blue  { fill: #4A9BE0; }
.gk-recup .rc-c-red   { fill: #E06A76; }
.gk-recup .rc-c-green { fill: #2E9E86; }
.gk-recup .rc-c-ink   { fill: rgba(255, 255, 255, .30); }

/* La grille se fait oublier : elle sert à mesurer, pas à décorer. */
.gk-recup .rc-grid { stroke: rgba(255, 255, 255, .07); stroke-width: 1; }
.gk-recup .rc-zero { stroke: rgba(255, 255, 255, .22); stroke-width: 1; }

/* Les libellés d'axe et de catégorie sont du TEXTE : ils portent les opacités
   de la charte, jamais la couleur de la série qu'ils désignent. */
.gk-recup .rc-fig text,
.gk-recup .rc-diag text {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  fill: rgba(255, 255, 255, .58);
}
.gk-recup .rc-fig text.rc-cat { fill: rgba(255, 255, 255, .88); font-weight: 500; }
/* Les valeurs en bout de barre : Inter Tight tabulaire, comme tous les chiffres
   du site, et en or parce que c'est l'information qu'on vient chercher. */
.gk-recup .rc-fig text.rc-val {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 11px;
  fill: #D8BE85;
}
/* Une barre est une marque fine, posée sur la ligne de base, avec un filet clair
   sur son bord : c'est ce qui la détache du fond sans la cerner. */
.gk-recup .rc-bar {
  stroke: rgba(255, 255, 255, .14);
  stroke-width: .75;
  paint-order: fill stroke;
}
.gk-recup .rc-bar:hover { opacity: .82; }
/* Les courbes des schémas : 2 px, bouts ronds, comme la jauge du sommaire. */
.gk-recup .rc-curve { stroke-width: 2; }
.gk-recup .rc-diag .rc-lbl { fill: rgba(255, 255, 255, .92); font-weight: 600; }

/* Les quatre libellés SVG qui portaient leur taille en attribut style (le
   centre du camembert, les repères de barres, la description d'une légende).
   Passés en classes par assembler.py : un style en ligne ne peut être repris
   par aucune feuille, ni par la passe d'ajustement qui rétrécit les textes
   trop longs dans les dix autres langues. Mêmes valeurs qu'avant. */
.gk-recup .rc-fig text.rc-sub    { font-size: 11px; }
.gk-recup .rc-fig text.rc-mini,
.gk-recup .rc-diag text.rc-mini  { font-size: 10px; }
.gk-recup .rc-fig text.rc-fort,
.gk-recup .rc-diag text.rc-fort  { font-weight: 700; }
.gk-recup .rc-fig text.rc-centre { font-size: 18px; font-weight: 700; }