/* ══════════════════════════════════════════════════════════════════════════════
   assets/css/article.css — LE STYLE DES ARTICLES (« L'épreuve au club », « Le saviez-vous ? »)

   ⚠ POURQUOI CE FICHIER EXISTE.
   Ce CSS vivait dans un <style> INLINE de la page article (`?page=article`). Consequence : le
   MEME article, rendu ailleurs (fiche club, section 10 et 11), sortait EN HTML BRUT — tableaux
   sans style, KPI sans cadre, graphiques a plat, badges invisibles. Il etait illisible.

   On ne peut pas dupliquer ce CSS : deux copies divergent toujours, et un jour la fiche club
   afficherait un tableau qui ne ressemble plus a celui de l'article. UNE SEULE SOURCE, chargee
   par les deux pages.

   ⚠ NE PAS RENOMMER LES CLASSES `bk-art-*` : elles sont ECRITES EN DUR dans le corps des
   articles, deja stockes en base (`articles.body`). Les renommer ici rendrait muets tous les
   articles publies.
   ══════════════════════════════════════════════════════════════════════════════ */

.bk-art-wrap{max-width:720px;margin:0 auto;padding:24px 18px 80px;}
.bk-art-back{display:inline-block;color:#a78bfa;text-decoration:none;font-size:13.5px;font-weight:700;margin-bottom:14px;}
.bk-art-badge{display:inline-block;text-transform:uppercase;letter-spacing:.5px;font-size:11px;font-weight:800;color:#a78bfa;background:rgba(108,92,231,.12);padding:4px 10px;border-radius:6px;}
.bk-art-h1{font-size:30px;font-weight:800;color:var(--text-primary,#fff);margin:12px 0 6px;line-height:1.18;}
.bk-art-meta{color:var(--text-secondary,#8b949e);font-size:13px;margin-bottom:22px;}
.bk-art-body{color:var(--text-primary,#c9d1d9);font-size:15.5px;line-height:1.7;}
.bk-art-body h3{color:var(--text-primary,#fff);font-size:18px;margin:24px 0 12px;}
.bk-art-body a{color:#a78bfa;text-decoration:none;}
.bk-art-body a:hover{text-decoration:underline;}
.bk-art-table{width:100%;border-collapse:collapse;margin:8px 0 16px;font-size:14px;}
.bk-art-table th{text-align:left;color:var(--text-secondary,#8b949e);font-size:12px;text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--border,#1e2a3a);padding:8px 6px;}
.bk-art-table td{padding:8px 6px;border-bottom:1px solid var(--border,#161b22);color:var(--text-primary,#c9d1d9);}
.bk-art-table td strong{color:#55efc4;font-family:'Courier New',monospace;}
.bk-art-foot{color:var(--text-secondary,#5a6580);font-size:12.5px;margin-top:18px;border-top:1px solid var(--border,#1e2a3a);padding-top:12px;}
/* --- Interface detaillee « L'epreuve au club » --- */
.bk-art-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:18px 0 22px;}
.bk-art-kpi{background:rgba(108,92,231,.08);border:1px solid #6c5ce733;border-radius:12px;padding:14px 12px;text-align:center;}
.bk-art-kpi-v{font-size:19px;font-weight:800;color:var(--text-primary,#fff);font-variant-numeric:tabular-nums;line-height:1.25;}
.bk-art-kpi-l{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary,#8b949e);margin-top:4px;font-weight:700;}
.bk-art-fact{margin:10px 0;padding:12px 14px;border-left:4px solid #6c5ce7;background:rgba(108,92,231,.08);border-radius:8px;font-size:14.5px;}
/* Les tableaux larges defilent DANS leur cadre : le corps de page ne part jamais de travers */
.bk-art-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.bk-art-scroll .bk-art-table{min-width:460px;}
.bk-art-chart{display:flex;align-items:flex-end;gap:5px;height:140px;padding:10px 4px 0;border-bottom:1px solid var(--border,#1e2a3a);overflow-x:auto;}
.bk-art-chart .bk-art-bar{flex:1 0 22px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:5px;}
.bk-art-chart .bk-art-bar span{width:100%;background:linear-gradient(180deg,#a855f7,#6c5ce7);border-radius:4px 4px 0 0;min-height:4px;}
.bk-art-chart .bk-art-bar em{font-style:normal;font-size:10.5px;color:var(--text-secondary,#8b949e);font-variant-numeric:tabular-nums;}
.bk-art-note{color:var(--text-secondary,#8b949e);font-size:12.5px;margin-top:8px;}
body.p2-light .bk-art-kpi-v{color:#1a1814;}
body.p2-light .bk-art-fact{color:#1a1814;}
/* --- En-tetes de colonne triables --- */
.bk-th-sort{cursor:pointer;user-select:none;white-space:nowrap;}
.bk-th-sort:hover{color:#a78bfa;}
.bk-th-sort:focus-visible{outline:2px solid #a78bfa;outline-offset:2px;}
.bk-th-sort.is-sorted{color:#a78bfa;}
.bk-th-ar{font-size:10px;}
/* --- Couleur par sexe dans le classement mixte ---
   Bleu = hommes, rose = femmes. La pastille porte AUSSI la lettre (H/F) : on ne fait jamais
   dependre une information de la seule couleur (daltonisme). La teinte reste distincte du
   violet de marque pour ne pas creer de confusion. */
.bk-sx{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;padding:0 6px;border-radius:6px;font-size:11px;font-weight:800;letter-spacing:.02em;}
.bk-sx-m{background:rgba(59,130,246,.16);color:#60a5fa;border:1px solid rgba(59,130,246,.45);}
.bk-sx-f{background:rgba(236,72,153,.16);color:#f472b6;border:1px solid rgba(236,72,153,.45);}
/* Filet colore a gauche de la ligne : lisible meme en balayant vite la liste */
.bk-art-table tbody tr.bk-row-m td:first-child{box-shadow:inset 3px 0 0 #3b82f6;}
.bk-art-table tbody tr.bk-row-f td:first-child{box-shadow:inset 3px 0 0 #ec4899;}
.bk-art-pts{font-variant-numeric:tabular-nums;font-weight:800;color:#fbbf24;}
body.p2-light .bk-sx-m{color:#1d4ed8;}
body.p2-light .bk-sx-f{color:#be185d;}
body.p2-light .bk-art-pts{color:#b45309;}
/* ⚠⚠ LA PERFORMANCE EST LA DONNEE DE LA PAGE — elle etait ILLISIBLE en mode clair.
   `#55efc4` (vert menthe, pense pour un fond noir) sur la creme `#f4ede0` donne un
   contraste de 1,24 : mesure sur 125 chronos d'un seul article. Le vert est conserve
   (il distingue la perf du reste du tableau), mais assombri jusqu'a etre lisible
   (~5,4). Ne pas le remplacer par du noir : la couleur porte ici une information. */
body.p2-light .bk-art-table td strong,
body.p2-light .bk-art-body table td strong{color:#0b6b4f;}
/* Le compteur violet des encarts, sur son propre fond violet clair (1,87). */
body.p2-light .bk-art-kpi b,
body.p2-light .bk-art-fact b{color:#4c3bbf;}
/* Le bouton de filtre ACTIF : violet clair sur fond violet clair (1,87) en mode
   clair. On garde le violet — c'est lui qui dit QUEL filtre est actif — mais en
   version foncee, lisible sur la creme. */
body.p2-light .bk-art-fx-b.is-on,
body.p2-light .bk-art-fx-b:hover{color:#4c3bbf;}
/* --- Filtre Hommes / Femmes du classement --- */
.bk-art-fx{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 12px;}
.bk-art-fx-b{padding:7px 14px;border-radius:999px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;border:1px solid var(--border,#30363d);background:transparent;color:var(--text-secondary,#8b949e);}
.bk-art-fx-b b{font-weight:800;font-size:11px;opacity:.75;font-variant-numeric:tabular-nums;}
.bk-art-fx-b:hover{border-color:#6c5ce7;color:#a78bfa;}
.bk-art-fx-b:focus-visible{outline:2px solid #a78bfa;outline-offset:2px;}
.bk-art-fx-b.is-on{border-color:#6c5ce7;background:rgba(108,92,231,.18);color:#a78bfa;}
/* --- Navigation : toutes les epreuves du club, par specialite --- */
.bk-art-nav{margin-top:28px;padding-top:18px;border-top:1px solid var(--border,#1e2a3a);}
.bk-art-nav-h{font-size:14px;font-weight:800;color:var(--text-primary,#fff);margin-bottom:16px;}
.bk-art-nav-h span{display:block;font-size:12px;font-weight:600;color:var(--text-secondary,#8b949e);margin-top:3px;}
.bk-art-nav-grp{display:grid;grid-template-columns:110px 1fr;gap:12px;align-items:start;padding:10px 0;border-top:1px solid var(--border,#161b22);}
.bk-art-nav-grp:first-of-type{border-top:none;}
.bk-art-nav-lab{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#a78bfa;padding-top:7px;}
.bk-art-nav-eps{display:flex;flex-wrap:wrap;gap:7px;}
.bk-art-ep{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:8px;font-size:12.5px;font-weight:700;text-decoration:none;border:1px solid var(--border,#30363d);color:var(--text-primary,#c9d1d9);background:transparent;}
.bk-art-ep b{font-weight:800;font-size:11px;color:var(--text-secondary,#8b949e);font-variant-numeric:tabular-nums;}
a.bk-art-ep:hover{border-color:#6c5ce7;background:rgba(108,92,231,.12);color:#a78bfa;text-decoration:none;}
a.bk-art-ep:focus-visible{outline:2px solid #a78bfa;outline-offset:2px;}
/* L'epreuve de l'article courant : mise en avant, non cliquable */
.bk-art-ep-cur{border-color:#6c5ce7;background:rgba(108,92,231,.22);color:#a78bfa;cursor:default;}
.bk-art-ep-cur b{color:#a78bfa;}
@media(max-width:560px){.bk-art-nav-grp{grid-template-columns:1fr;gap:6px;}.bk-art-nav-lab{padding-top:0;}}
.bk-art-cta{margin-top:26px;background:linear-gradient(135deg,rgba(108,92,231,.10),rgba(168,85,247,.10));border:1px solid #6c5ce744;border-radius:14px;padding:18px 20px;text-align:center;}
.bk-art-cta a{display:inline-block;margin-top:8px;background:linear-gradient(135deg,#6c5ce7,#a855f7);color:#fff;text-decoration:none;font-weight:700;font-size:13.5px;padding:10px 20px;border-radius:9px;}

/* ══════════════════════════════════════════════════════════════════════════════
   LIGNE SELECTIONNEE (clic) — le repere qu'on garde en lisant un long classement
   ⚠ TROIS MARQUEURS, jamais la seule couleur : fond, filet vertical a gauche et
   texte renforce. Sur 373 lignes c'est exactement ce qu'on vient chercher, et un
   daltonien doit pouvoir s'y retrouver.
   ⚠ Le filet de gauche ecrase volontairement celui de `bk-row-m` / `bk-row-f`
   (bleu/rose du sexe) le temps de la selection : deux filets au meme endroit ne
   se distinguent pas. Il revient des qu'on deselectionne.
   ══════════════════════════════════════════════════════════════════════════════ */
.bk-art-body table tbody tr.is-sel td,
.bk-art-table tbody tr.is-sel td{background:rgba(167,139,250,.16);}
.bk-art-body table tbody tr.is-sel td:first-child,
.bk-art-table tbody tr.is-sel td:first-child{box-shadow:inset 3px 0 0 #a78bfa;}
.bk-art-table tbody tr.is-sel td,
.bk-art-table tbody tr.is-sel a{color:var(--text-primary,#f0f6fc);font-weight:700;}
.bk-art-body table tbody tr,
.bk-art-table tbody tr{cursor:pointer;}
body.p2-light .bk-art-body table tbody tr.is-sel td,
.bk-art-table tbody tr.is-sel td{background:rgba(109,40,217,.13);}
body.p2-light .bk-art-body table tbody tr.is-sel td:first-child,
.bk-art-table tbody tr.is-sel td:first-child{box-shadow:inset 3px 0 0 #6d28d9;}
body.p2-light .bk-art-table tbody tr.is-sel td,
body.p2-light .bk-art-table tbody tr.is-sel a{color:#1a1814;}

/* ═══ NIVEAU DE LA PERFORMANCE (colonne « Niveau ») ═══════════════════════════
   Le badge porte TOUJOURS le code en clair (IA, N2, R3…) : une information ne doit
   jamais dependre de la seule couleur (daltonisme). La couleur double la lecture.
   ⚠ IR = Inter-Regional, SOUS le national malgre son « I » : il a sa propre teinte,
   il ne doit pas se confondre avec l'international. */
.bk-art-niv-c{white-space:nowrap;}
.bk-art-niv{display:inline-block;padding:2px 8px;border-radius:7px;font-size:11.5px;
  font-weight:800;letter-spacing:.03em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  border:1px solid;}
.bk-art-niv.niv-i {background:#c026d320;border-color:#c026d3;color:#e879f9;}
.bk-art-niv.niv-n {background:#e11d4820;border-color:#e11d48;color:#fb7185;}
.bk-art-niv.niv-ir{background:#7c3aed20;border-color:#7c3aed;color:#a78bfa;}
.bk-art-niv.niv-r {background:#0891b220;border-color:#0891b2;color:#22d3ee;}
.bk-art-niv.niv-d {background:#f9731620;border-color:#f97316;color:#fb923c;}
.bk-art-niv.niv-x {background:#30363d40;border-color:#30363d;color:#8b949e;}
/* Estime au bareme : trait pointille + « ≈ ». Une interpolation n'est pas une
   qualification homologuee — elle ne doit pas s'afficher comme telle. */
.bk-art-niv.est{border-style:dashed;opacity:.92;}
/* Mode clair : memes familles, versions foncees. Les teintes ci-dessus sont pensees
   pour un fond noir et tombent sous 2:1 sur la creme. */
body.p2-light .bk-art-niv.niv-i {background:#c026d316;border-color:#a21caf;color:#86198f;}
body.p2-light .bk-art-niv.niv-n {background:#e11d4816;border-color:#be123c;color:#9f1239;}
body.p2-light .bk-art-niv.niv-ir{background:#7c3aed16;border-color:#6d28d9;color:#5b21b6;}
body.p2-light .bk-art-niv.niv-r {background:#0891b216;border-color:#0e7490;color:#155e75;}
body.p2-light .bk-art-niv.niv-d {background:#f9731616;border-color:#c2410c;color:#9a3412;}
body.p2-light .bk-art-niv.niv-x {background:#c9bfa630;border-color:#c9bfa6;color:#756950;}


/* ══════════════════════════════════════════════════════════════════════════════
   LA FRISE ANIMEE — `bk-fr-*`

   Prefixe distinct de `bk-art-*` : ces classes-la sont ecrites en dur dans le
   corps des articles deja stockes en base et ne peuvent plus bouger. La frise,
   elle, est posee par le JS a l'affichage et reste libre d'evoluer.

   ⚠ THEME CLAIR ET SOMBRE. Tout passe par les tokens `--bk-*`, qui basculent
   dans `theme-control.css` (`body.p2-light`) : aucune couleur de surface ni de
   texte n'est ecrite en dur ici. Seules restent les couleurs de MARQUE — le
   violet `#6c5ce7`, le vert `#55efc4`, le rose `#e84393` — qui sont les memes
   dans les deux themes, comme le reste de `article.css` les emploie deja.

   Le piege qui a failli passer : le nom et le chrono etaient ECRITS DANS la
   barre, en blanc sur fond violet. Dans le remplissage, tres bien ; mais la
   PISTE derriere est claire en mode clair, et le texte y devenait invisible
   des qu'il depassait le remplissage. Nom et chrono sont donc sortis de la
   barre : elle n'est plus qu'une jauge, et le texte porte une couleur de
   theme. Aucun texte ne repose plus sur la couleur d'un fond variable.
   ══════════════════════════════════════════════════════════════════════════════ */
.bk-fr{border:1px solid var(--bk-border,#30363d);border-radius:12px;padding:14px 14px 12px;
  margin:18px 0 22px;background:var(--bk-surface-1,#161b22);}
.bk-fr-t{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px;}
.bk-fr-t h3{margin:0;font-size:16px;color:var(--bk-text,#f0f6fc);}
.bk-fr-sub{color:var(--bk-text-3,#8b949e);font-size:12.5px;line-height:1.5;margin:2px 0 12px;}
.bk-fr-sub strong{color:var(--bk-text-2,#c9d1d9);}
.bk-fr-sub em{font-style:normal;}

.bk-fr-cmd{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px;}
.bk-fr-play{border:0;cursor:pointer;background:#6c5ce7;color:#fff;font-weight:800;font-size:13.5px;
  padding:8px 16px;border-radius:8px;min-width:112px;}
.bk-fr-play:hover{background:#5a4bd6;}
.bk-fr-date{font-family:'Courier New',monospace;font-size:17px;font-weight:800;
  color:var(--bk-text,#f0f6fc);min-width:118px;letter-spacing:.5px;}
/* le reglage de vitesse : un curseur continu et sa lecture */
.bk-fr-vit{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.bk-fr-vit>span{font-size:11px;color:var(--bk-text-3,#8b949e);text-transform:uppercase;
  letter-spacing:.5px;font-weight:800;}
.bk-fr-vit input[type=range]{width:118px;accent-color:#6c5ce7;}
.bk-fr-vitv{font-style:normal;font-family:'Courier New',monospace;font-size:12px;
  color:var(--bk-text-3,#8b949e);white-space:nowrap;}
.bk-fr-curseur{width:100%;accent-color:#6c5ce7;margin:2px 0 12px;}

/* Le classement anime. Chaque ligne est positionnee en absolu : c'est ce qui
   permet de la faire GLISSER a sa nouvelle place quand elle change de rang.
   En flux normal, le navigateur la redessinerait ailleurs d'un coup, et on ne
   verrait pas qui double qui — or c'est tout le sujet d'une frise. */
.bk-fr-liste{position:relative;transition:height .35s ease;}
.bk-fr-l{position:absolute;left:0;right:0;height:34px;
  display:grid;grid-template-columns:24px minmax(96px,34%) 1fr auto;gap:9px;align-items:center;
  transition:transform .55s cubic-bezier(.22,.61,.36,1),opacity .35s ease;}
.bk-fr-l.neuf{opacity:0;}
/* le rang passe en --bk-text-3 et non --bk-text-4 : mesure a 3,77 en sombre,
   sous les 4,5 exiges pour du texte. --bk-text-3 donne 5,62 et 7,33. */
.bk-fr-rg{text-align:right;font-family:'Courier New',monospace;font-size:12px;
  color:var(--bk-text-3,#8b949e);}
.bk-fr-nom{font-size:13.5px;font-weight:600;color:var(--bk-text-2,#c9d1d9);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* La barre n'est plus qu'une JAUGE : aucun texte dessus, donc aucun probleme
   de contraste quand la piste change de couleur avec le theme. */
.bk-fr-bar{position:relative;height:14px;border-radius:7px;overflow:hidden;
  background:var(--bk-surface-3,#21262d);}
.bk-fr-bar>i{position:absolute;inset:0 auto 0 0;display:block;border-radius:7px;
  background:linear-gradient(90deg,#6c5ce7,#a78bfa);
  transition:width .55s cubic-bezier(.22,.61,.36,1);}
.bk-fr-l.f .bk-fr-bar>i{background:linear-gradient(90deg,#e84393,#fd79a8);}
.bk-fr-perf{font-family:'Courier New',monospace;font-weight:800;font-size:13px;
  color:var(--bk-text,#f0f6fc);white-space:nowrap;}
/* la ligne qui vient d'ameliorer son record : c'est l'evenement que la frise
   raconte, elle doit se voir dans les deux themes */
/* l anneau de la ligne qui vient d ameliorer son record : un reperage
   graphique, il lui faut 3:1 contre la piste dans les deux themes */
.bk-fr-l.top .bk-fr-bar{box-shadow:0 0 0 2px #0b6b4f;}
body:not(.p2-light) .bk-fr-l.top .bk-fr-bar{box-shadow:0 0 0 2px #55efc4;}
/* Le vert de marque #55efc4 tombe a 2,35 sur le fond creme : illisible.
   En mode clair on descend a #087050, mesure a 5,65 sur la carte. */
.bk-fr-l.top .bk-fr-perf{color:#087050;}
body:not(.p2-light) .bk-fr-l.top .bk-fr-perf{color:#55efc4;}
/* la pastille des perfs dont on ne connait que l'annee */
.bk-fr-ap{color:#8a6206;font-weight:900;}
body:not(.p2-light) .bk-fr-ap{color:#fdcb6e;}
.bk-fr-note{color:var(--bk-text-3,#8b949e);font-size:12px;line-height:1.5;margin:12px 0 0;}
.bk-fr-note strong{color:var(--bk-text-2,#c9d1d9);}