/* ══════════════════════════════════════════════════════════════════════════════
   assets/css/profil-font.css — LA PAGE PROFIL PASSE SUR INTER, comme le reste du site.

   ═══ POURQUOI CE FICHIER ═══════════════════════════════════════════════════════
   Le profil était le seul endroit en SERIF « magazine » : ~55 déclarations
   `font-family: 'Bodoni Moda', serif` + 22 `Cormorant Garamond` + 15 `JetBrains Mono`, presque
   toutes écrites EN DUR dans des attributs `style=""`. Le reste du site (`--font` de
   dashboard.css, le tableau de bord club `.bkx`) est en **Inter**. Résultat : une page qui
   n'appartenait visuellement à aucun autre.

   ═══ POURQUOI DES `!important` PARTOUT (et pourquoi c'est légitime ICI) ════════
   Les polices du profil sont posées en **style inline**. En CSS, un style inline bat toute
   règle de feuille… SAUF une règle `!important`. Sans lui, ce fichier ne servirait à rien.
   C'est le seul cas où `!important` n'est pas un aveu de faiblesse : on répare de l'inline
   qu'on ne peut pas retirer sans réécrire 3 000 lignes de PHP.

   ═══ CE QU'ON NE CASSE PAS ═════════════════════════════════════════════════════
   · `font-variant-numeric: tabular-nums` : les chronos d'une colonne doivent rester alignés.
     C'est exactement ce que le monospace assurait — Inter le fait avec ses chiffres tabulaires,
     sans imposer une police de terminal à une fiche d'athlète.
   · Le fichier est SCOPÉ à `body.bk-page-profil` : aucune autre page n'est touchée.
     (Le « magazine » de la page Athlètes, lui, garde son serif : il est assumé là-bas.)
   ══════════════════════════════════════════════════════════════════════════════ */

body.bk-page-profil,
body.bk-page-profil *:not(i):not(.material-icons) {
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system,
                 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols 2',
                 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji',
                 sans-serif !important;
}

/* Les TITRES prennent Inter Tight : plus dense, plus tenu en gros corps — la même
   hiérarchie typographique que le tableau de bord club. */
body.bk-page-profil h1,
body.bk-page-profil h2,
body.bk-page-profil h3,
body.bk-page-profil .p2-huge,
body.bk-page-profil .p2-rubrique {
    font-family: 'Inter Tight', 'Inter', 'Segoe UI', system-ui, sans-serif !important;
    letter-spacing: -0.01em !important;
}

/* ⚠ LES CHIFFRES DOIVENT RESTER ALIGNÉS. Le monospace ('JetBrains Mono') servait à ça : dans
   une colonne de chronos, des chiffres de largeurs différentes font « danser » la colonne.
   Inter le fait proprement avec ses chiffres tabulaires — et son zéro barré évite de le
   confondre avec un O. On garde donc la fonction, on abandonne la police de terminal. */
body.bk-page-profil .p2-stat,
body.bk-page-profil .p2-huge,
body.bk-page-profil table,
body.bk-page-profil td,
body.bk-page-profil th,
body.bk-page-profil .perf-val,
body.bk-page-profil [class*="perf"],
body.bk-page-profil [class*="chrono"],
body.bk-page-profil [class*="record"] {
    font-variant-numeric: tabular-nums slashed-zero !important;
}

/* Le rendu du texte : les mêmes réglages que le reste du site, sinon le profil paraît
   plus « gras » ou plus « pâle » que les autres pages à taille égale. */
body.bk-page-profil {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'ss03' 1;   /* le « l » prend une queue : ne se lit plus comme un 1 */
}

/* ══════════════════════════════════════════════════════════════════════════════
   LE PARCOURS CLUB PAR CLUB (#bkCareer)
   Le recit de la carriere : ce qu'il/elle a fait DANS CHAQUE CLUB, ce qui a ete poursuivi ou
   abandonne en changeant, et de combien il/elle a progresse ou recule.
   ══════════════════════════════════════════════════════════════════════════════ */
/* ⚠ L'AIR EST UNE FONCTION, PAS UNE COQUETTERIE. Un recit de carriere se LIT (phrases longues,
   chiffres a comparer) : serre, il devient un pave qu'on saute. On ouvre donc l'interligne
   (1.85), on espace les etapes (44px), et on aere les blocs. Le texte reste dense en
   information, pas en pixels. */
.bkc { margin: 48px 0; }
.bkc .p2-rubrique { margin-bottom: 30px; }

/* ── LA FRISE VERTICALE (le rail + les pastilles) ─────────────────────────────
   Elle porte la CHRONOLOGIE, pas le propos : c'est le texte qu'on vient lire, pas la ligne.
   En violet plein, elle tirait l'oeil a chaque etape et concurrencait le recit. On la passe donc
   en NOIR, avec un simple REFLET de couleur (un liseré, un halo) : elle guide sans crier. */
.bkc-step {
    position: relative;
    padding: 0 0 10px 30px;                 /* + de retrait : la frise respire */
    margin-bottom: 44px;                    /* + d'air ENTRE les clubs : ce sont des chapitres */
    border-left: 2px solid #1b1f27;         /* le rail : noir, pas gris-bleu */
}
.bkc-step:last-child { border-left-color: transparent; margin-bottom: 0; }
/* La pastille : un disque NOIR cercle d'un liseré violet + un halo tres discret. On lit la
   carriere comme une ligne de temps — sans que la ligne prenne le pas sur ce qu'elle raconte. */
.bkc-step::before {
    content: ''; position: absolute; left: -8px; top: 7px;
    width: 14px; height: 14px; border-radius: 50%;
    background: #0b0d12;
    border: 2px solid rgba(108, 92, 231, .55);
    box-shadow: 0 0 0 3px var(--bg-body, #0d1117),      /* on detache la pastille du rail */
                0 0 8px rgba(108, 92, 231, .30);        /* le reflet */
}
/* La PREMIERE etape (le debut de carriere) reste la plus marquee : c'est le point d'entree du
   recit. Reflet un peu plus present — jamais un aplat. */
.bkc-step:first-child::before {
    border-color: rgba(108, 92, 231, .85);
    box-shadow: 0 0 0 3px var(--bg-body, #0d1117), 0 0 12px rgba(108, 92, 231, .45);
}
body.p2-light .bkc-step { border-left-color: #1a1814; }
body.p2-light .bkc-step::before {
    background: #1a1814;                                /* noir en clair aussi : c'est le rail */
    border-color: rgba(108, 92, 231, .60);
    box-shadow: 0 0 0 3px var(--bg-body, #f4ede0), 0 0 8px rgba(108, 92, 231, .25);
}
body.p2-light .bkc-step:first-child::before {
    border-color: rgba(108, 92, 231, .9);
    box-shadow: 0 0 0 3px var(--bg-body, #f4ede0), 0 0 12px rgba(108, 92, 231, .40);
}
.bkc-club { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.bkc-club a {
    font-size: 21px; font-weight: 800; color: var(--text-primary, #fff); text-decoration: none;
    letter-spacing: -.01em; line-height: 1.3;
}
.bkc-club a:hover { color: #a78bfa; }
/* LES ANNEES (« 2006–2010 ») : elles STRUCTURENT le recit — ce sont les bornes de chaque
   chapitre. En gris pale, elles s'effacaient ; on les remonte au contraste du texte principal,
   dans un cadre discret. Le violet ne sert plus qu'a la separation, en reflet. */
.bkc-years {
    font-size: 13px; font-weight: 800; letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary, #fff);
    padding: 3px 10px; border-radius: 20px;
    background: rgba(108, 92, 231, .10);
    border: 1px solid rgba(108, 92, 231, .22);
}
body.p2-light .bkc-years {
    color: #1a1814;
    background: rgba(108, 92, 231, .07);
    border-color: rgba(108, 92, 231, .20);
}

/* LE RECIT : c'est du TEXTE SUIVI, il se lit comme un paragraphe d'article — pas comme une
   legende de tableau. Interligne genereux, longueur de ligne bornee (une ligne de 140
   caracteres se relit deux fois). */
.bkc-txt {
    font-size: 16px; line-height: 1.85; color: var(--text-primary, #c9d1d9);
    margin: 0 0 20px; max-width: 68ch; letter-spacing: .005em;
}
.bkc-txt strong { color: var(--text-primary, #fff); font-weight: 800; }

.bkc-eps { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.bkc-ep {
    display: inline-flex; align-items: baseline; gap: 8px;
    border: 1px solid var(--border, #30363d); border-radius: 8px;
    padding: 8px 13px; font-size: 13px; line-height: 1.4;
    color: var(--text-primary, #c9d1d9);
}
.bkc-ep b { font-weight: 700; color: var(--text-secondary, #8b949e); }
.bkc-ep i { font-style: normal; font-size: 11px; color: var(--text-secondary, #5a6580); font-variant-numeric: tabular-nums; }

/* LE CHANGEMENT DE CLUB : encadre, parce que c'est LA que se joue l'histoire. */
/* Le changement de club : fond NEUTRE, la couleur ne reste qu'en liseré. */
.bkc-tr {
    margin: 8px 0 8px; padding: 22px 24px;
    background: rgba(255, 255, 255, .025);
    border-left: 3px solid #6c5ce7; border-radius: 0 12px 12px 0;
}
body.p2-light .bkc-tr { background: rgba(0, 0, 0, .022); }
.bkc-tr .bkc-txt { margin-bottom: 0; }
.bkc-cmp-h {
    font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em;
    color: #a78bfa; margin: 24px 0 12px; line-height: 1.5;
}
.bkc-cmp { width: 100%; border-collapse: collapse; font-size: 14px; }
.bkc-cmp th {
    text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
    color: var(--text-secondary, #8b949e);
    border-bottom: 1px solid var(--border, #30363d); padding: 10px 12px;
}
/* Des lignes de tableau serrees sur des CHRONOS obligent a suivre du doigt : on ouvre. */
.bkc-cmp td {
    padding: 13px 12px; border-bottom: 1px solid var(--border, #1e2a3a);
    color: var(--text-primary, #c9d1d9); font-variant-numeric: tabular-nums; line-height: 1.5;
}
.bkc-cmp td em {
    display: block; font-style: normal; font-size: 11.5px; margin-top: 3px;
    color: var(--text-secondary, #5a6580);
}

.bkc-bilan {
    font-size: 15.5px; line-height: 1.8; margin: 24px 0 0;
    color: var(--text-primary, #c9d1d9); max-width: 68ch;
}
.bkc-bilan em {
    display: block; margin-top: 10px; font-size: 12.5px; line-height: 1.65;
    color: var(--text-secondary, #8b949e); font-style: normal;
}

/* ⚠ Vert = progression, rouge = recul. La couleur porte l'information ; le symbole (▲/▼) la
   double, pour que rien ne dependre de la seule couleur (daltonisme). */
.bkc-up { color: #22c55e !important; -webkit-text-fill-color: #22c55e !important; }
.bkc-dn { color: #ef4444 !important; -webkit-text-fill-color: #ef4444 !important; }
.bkc-st { color: var(--text-secondary, #8b949e) !important; -webkit-text-fill-color: var(--text-secondary, #8b949e) !important; }

body.p2-light .bkc-club a,
body.p2-light .bkc-txt strong { color: #1a1814; }
body.p2-light .bkc-up { color: #15803d !important; -webkit-text-fill-color: #15803d !important; }
body.p2-light .bkc-dn { color: #b91c1c !important; -webkit-text-fill-color: #b91c1c !important; }

/* La definition de l'indice : reléguée en note de bas de bloc. Elle doit rester CONSULTABLE
   (qui veut verifier doit pouvoir), mais elle ne doit plus s'imposer entre le lecteur et le
   fait. Une phrase qui oblige a apprendre une metrique pour etre comprise n'est pas lue. */
.bkc-note {
    font-size: 12.5px; line-height: 1.65; margin: 14px 0 0;
    padding-top: 12px; border-top: 1px dashed var(--border, #30363d);
    color: var(--text-secondary, #8b949e); max-width: 68ch;
}
.bkc-note strong { color: var(--text-secondary, #a8b3c4); font-weight: 700; }

/* Le « top X % » : c'est LE chiffre que le lecteur retient. Il doit ressortir. */
.bkc-top { color: #a78bfa !important; -webkit-text-fill-color: #a78bfa !important; font-weight: 800; }
body.p2-light .bkc-top { color: #6d28d9 !important; -webkit-text-fill-color: #6d28d9 !important; }
.bkc-bilan + .bkc-bilan { margin-top: 14px; }

/* ══ LES DEUX CLASSEMENTS (tous temps / cette saison-là) ═══════════════════════
   Chacun sur sa ligne, avec son PERIMETRE ecrit. Un pourcentage sans perimetre est un mensonge
   par omission : « top 1,8 % » ne veut rien dire tant qu'on n'a pas dit 1,8 % DE QUI, et QUAND. */
.bkc-rank { display: block; margin-top: 16px; }
.bkc-rank-l {
    display: block; padding: 12px 14px; margin-bottom: 8px;
    background: rgba(255, 255, 255, .022);
    border-left: 3px solid #6c5ce7; border-radius: 0 8px 8px 0;
    font-size: 14px; line-height: 1.7; color: var(--text-primary, #c9d1d9);
}
body.p2-light .bkc-rank-l { background: rgba(0, 0, 0, .02); }
.bkc-rank-l b {
    display: inline-block; margin-right: 6px; font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .1em; color: #a78bfa;
}
.bkc-rank-l em { font-style: italic; color: var(--text-secondary, #8b949e); }
.bkc-rank-l sup { font-size: .65em; }

/* « VOIR QUI EST DEVANT » : le chiffre devient VERIFIABLE. Bouton discret mais reperable. */
.bkc-who {
    display: inline-block; margin-left: 4px; padding: 5px 12px;
    background: transparent; border: 1px solid #6c5ce7; border-radius: 20px;
    color: #a78bfa; font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.bkc-who:hover, .bkc-who.is-on { background: #6c5ce7; color: #fff; }

.bkc-whobox { margin-top: 12px; border: 1px solid var(--border, #30363d); border-radius: 10px; overflow: hidden; }
.bkc-whoh {
    padding: 11px 14px; background: rgba(108, 92, 231, .10);
    font-size: 12.5px; font-weight: 800; color: var(--text-primary, #fff);
    display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.bkc-whoh span { font-weight: 600; color: var(--text-secondary, #8b949e); }
.bkc-whoload { padding: 14px; font-size: 13px; color: var(--text-secondary, #8b949e); }
.bkc-whot { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.bkc-whot th {
    text-align: left; padding: 9px 12px; font-size: 10.5px; text-transform: uppercase;
    letter-spacing: .08em; color: var(--text-secondary, #8b949e);
    border-bottom: 1px solid var(--border, #30363d);
}
.bkc-whot td {
    padding: 10px 12px; border-bottom: 1px solid var(--border, #1e2a3a);
    color: var(--text-primary, #c9d1d9); font-variant-numeric: tabular-nums;
}
.bkc-whot tr:last-child td { border-bottom: none; }
.bkc-whot a { color: var(--text-primary, #fff); text-decoration: none; font-weight: 700; }
.bkc-whot a:hover { color: #a78bfa; }
.bkc-whot em { font-style: normal; font-size: 11px; color: var(--text-secondary, #5a6580); }
body.p2-light .bkc-whot a { color: #1a1814; }

/* Le RANG est le chiffre que le lecteur cherche : il doit dominer la ligne. */
.bkc-rank-l .bkc-top { font-size: 1.15em; }
.bkc-rank-l em {
    display: block; margin-top: 6px; font-size: 12px; line-height: 1.6;
    color: var(--text-secondary, #8b949e); font-style: normal;
}
.bkc-rank-l .bkc-who { margin: 10px 0 0; }

/* ══ LA LISTE « QUI EST DEVANT » — actif / inactif ═════════════════════════════
   ⚠ UN CLASSEMENT TOUS-TEMPS EST PEUPLE DE FANTOMES : sur les 60 hommes devant LUVUMBU au 400m
   haies, 29 NE CONCOURENT PLUS. Sans cette distinction, on croit avoir 208 rivaux alors que la
   moitie a raccroche — et le chiffre decourage pour rien.
   La ligne d'un inactif est ATTENUEE (opacite), et son statut porte le MOT (« Ne concourt
   plus »), jamais la seule couleur : rien ne doit dependre d'une teinte (daltonisme). */
.bkc-whotr {
    padding: 9px 14px; font-size: 12.5px; color: var(--text-secondary, #8b949e);
    background: rgba(255, 255, 255, .02); border-bottom: 1px solid var(--border, #1e2a3a);
}
.bkc-whot tr.bkc-row-off td { opacity: .62; }
.bkc-st-cell { min-width: 190px; }
.bkc-act, .bkc-inact {
    display: inline-block; font-size: 10.5px; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border: 1px solid;
    border-radius: 4px; white-space: nowrap;
}
.bkc-act   { color: #22c55e; border-color: #22c55e; }
.bkc-inact { color: #94a3b8; border-color: #94a3b8; }
.bkc-st-cell em {
    display: block; margin-top: 4px; font-style: normal; font-size: 11.5px; line-height: 1.5;
    color: var(--text-secondary, #8b949e);
}
/* Sa DERNIERE perf sur l'epreuve : ce qu'il valait EN PARTANT — pas son record, qui peut dater
   de dix ans avant (Naman KEITA : record 48''17, derniere 50''29 en 2012). */
.bkc-st-cell em.bkc-last { color: #a78bfa; }
.bkc-st-cell em.bkc-last strong { color: #a78bfa; font-weight: 800; }

body.p2-light .bkc-act   { color: #15803d; border-color: #15803d; }
body.p2-light .bkc-inact { color: #64748b; border-color: #64748b; }
body.p2-light .bkc-st-cell em.bkc-last,
body.p2-light .bkc-st-cell em.bkc-last strong { color: #6d28d9; }

/* La bascule « les plus proches » / « les meilleurs ». Le nombre REEL de gens devant est
   toujours ecrit : « 50 affichés sur 200 » — une troncature muette ferait croire qu'on voit tout. */
.bkc-modes {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 10px 14px; border-bottom: 1px solid var(--border, #1e2a3a);
}
.bkc-mode {
    padding: 5px 12px; border: 1px solid var(--border, #30363d); border-radius: 20px;
    background: transparent; color: var(--text-secondary, #8b949e);
    font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.bkc-mode:hover { border-color: #6c5ce7; color: #a78bfa; }
.bkc-mode.is-on { background: rgba(108, 92, 231, .18); border-color: #6c5ce7; color: #a78bfa; }
.bkc-modes > span {
    margin-left: auto; font-size: 12px; color: var(--text-secondary, #8b949e);
    font-variant-numeric: tabular-nums;
}
.bkc-modes > span strong { color: var(--text-primary, #c9d1d9); }
.bkc-modes > span em { font-style: italic; }

/* ══ SA SPECIALITE — le bloc qui ouvre le parcours ═════════════════════════════
   ⚠ Ce n'est PAS l'epreuve qu'il a le plus couru : un decathlonien a couru 30 fois le 100m sans
   etre sprinteur. C'est l'epreuve ou il est LE MEILLEUR. C'est la premiere chose qu'on veut
   savoir d'un athlete — elle doit dominer visuellement. */
/* ⚠ FOND NOIR, PAS UN APLAT DE COULEUR. Un grand bloc violet attire l'oeil sur LE BLOC ; ce
   qu'on veut, c'est qu'il attire l'oeil sur LE CHIFFRE (l'epreuve, le record, le rang). Le fond
   se retire donc en noir, et la couleur ne subsiste qu'en REFLET : un halo diffus et une fine
   bordure. Le contenu porte la couleur, plus le decor. */
.bkc-spe {
    position: relative; overflow: hidden;
    padding: 26px 28px; margin-bottom: 34px;
    background: #0b0d12;                                  /* noir, pas violet */
    border: 1px solid rgba(108, 92, 231, .28);
    border-radius: 16px;
}
/* Le reflet : un halo tres doux dans l'angle, rien de plus. */
.bkc-spe::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(120% 90% at 0% 0%, rgba(108, 92, 231, .16), transparent 55%);
}
.bkc-spe > * { position: relative; }
body.p2-light .bkc-spe {
    background: #ffffff;
    border-color: rgba(108, 92, 231, .30);
    box-shadow: 0 2px 14px rgba(0, 0, 0, .05);
}
body.p2-light .bkc-spe::before {
    background: radial-gradient(120% 90% at 0% 0%, rgba(108, 92, 231, .10), transparent 55%);
}
.bkc-spe-k {
    font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    color: #a78bfa; margin-bottom: 10px;
}
.bkc-spe-ep {
    font-size: 30px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em;
    color: var(--text-primary, #fff); margin-bottom: 14px;
}
.bkc-spe-p { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.bkc-spe-p strong {
    font-size: 34px; font-weight: 800; color: #55efc4;
    font-variant-numeric: tabular-nums slashed-zero; line-height: 1;
}
.bkc-spe-p span { font-size: 13.5px; color: var(--text-secondary, #8b949e); line-height: 1.6; }

.bkc-spe-r { display: flex; gap: 34px; flex-wrap: wrap; }
.bkc-spe-r > div { min-width: 130px; }
.bkc-spe-r b {
    display: block; font-size: 26px; font-weight: 800; line-height: 1;
    color: var(--text-primary, #fff); font-variant-numeric: tabular-nums;
}
.bkc-spe-r b sup { font-size: .5em; }
.bkc-spe-r span {
    display: block; margin-top: 6px; font-size: 12px; line-height: 1.5;
    color: var(--text-secondary, #8b949e);
}
.bkc-spe-r em {
    display: block; margin-top: 3px; font-style: normal; font-size: 12.5px;
    font-weight: 800; color: #a78bfa;
}
.bkc-spe .bkc-who { margin-top: 20px; }

body.p2-light .bkc-spe-ep, body.p2-light .bkc-spe-r b { color: #1a1814; }
body.p2-light .bkc-spe-p strong { color: #0f766e; }
body.p2-light .bkc-spe-k, body.p2-light .bkc-spe-r em { color: #6d28d9; }

/* ══ LE SELECTEUR D'EPREUVE ═══════════════════════════════════════════════════
   Sa specialite est mise en avant, mais il a pratique 16 epreuves : on doit pouvoir demander
   « qui est devant lui au 110m haies ? » sans etre enferme dans sa specialite.
   Les epreuves sont triees PAR NIVEAU (specialite en tete) — pas par ordre alphabetique. */
.bkc-pick { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(108, 92, 231, .25); }
.bkc-pick label {
    display: block; margin-bottom: 8px;
    font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: #a78bfa;
}
.bkc-pick select {
    width: 100%; max-width: 520px; padding: 11px 14px;
    background: var(--bg-body, #0d1117); border: 1px solid rgba(108, 92, 231, .45);
    border-radius: 10px; color: var(--text-primary, #fff);
    font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
    font-variant-numeric: tabular-nums;
}
.bkc-pick select:focus { outline: none; border-color: #6c5ce7; }

#bkcEpRank { margin-top: 18px; }
.bkc-pick-r {
    font-size: 15px; line-height: 1.6; margin-bottom: 12px;
    color: var(--text-primary, #c9d1d9);
}
.bkc-pick-r strong { color: var(--text-primary, #fff); font-weight: 800; }
body.p2-light .bkc-pick select,
body.p2-light .bkc-pick-r strong { color: #1a1814; }
body.p2-light .bkc-pick select { background: #fff; }

/* ══ « CE QU'IL LUI MANQUE » — LES PALIERS ════════════════════════════════════
   Dire « tu es 209e » ne donne AUCUN CAP. Dire « il te faut 51''29, soit 0''81 de mieux » en
   donne un. C'est la seule partie de la page qui soit ACTIONNABLE : elle doit se detacher.
   Fond noir + reflet, comme le reste — la couleur est dans les chiffres, pas dans le decor. */
.bkc-pal {
    position: relative; overflow: hidden;
    margin-top: 24px; padding: 22px 24px;
    background: #0b0d12; border: 1px solid rgba(85, 239, 196, .22); border-radius: 14px;
}
.bkc-pal::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(120% 90% at 100% 0%, rgba(85, 239, 196, .10), transparent 55%);
}
.bkc-pal > * { position: relative; }
body.p2-light .bkc-pal { background: #fff; box-shadow: 0 2px 14px rgba(0,0,0,.05); }

.bkc-pal-h {
    font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: #55efc4; margin-bottom: 12px;
}
/* L'OBJECTIF IMMEDIAT : le prochain palier non atteint. C'est le seul chiffre qui compte. */
.bkc-pal-next {
    font-size: 17px; line-height: 1.7; margin-bottom: 18px;
    color: var(--text-primary, #c9d1d9);
}
.bkc-pal-next strong { color: var(--text-primary, #fff); }

.bkc-palt { width: 100%; border-collapse: collapse; font-size: 14px; }
.bkc-palt td {
    padding: 10px 8px; border-bottom: 1px solid var(--border, #1e2a3a);
    font-variant-numeric: tabular-nums; color: var(--text-primary, #c9d1d9);
}
.bkc-palt tr:last-child td { border-bottom: none; }
/* Les paliers DEJA FRANCHIS s'effacent : ils ne sont plus des objectifs. */
.bkc-palt tr.is-ok td { opacity: .5; }
/* Le PROCHAIN palier est surligne : c'est LA ligne qu'on cherche du regard. */
.bkc-palt tr.is-next td {
    background: rgba(85, 239, 196, .08);
    border-top: 1px solid rgba(85, 239, 196, .3);
    border-bottom-color: rgba(85, 239, 196, .3);
}
.bkc-pal-l { font-weight: 800; white-space: nowrap; }
.bkc-pal-p { font-weight: 800; color: var(--text-primary, #fff) !important; white-space: nowrap; }
.bkc-pal-n { text-align: right; font-size: 12px; color: var(--text-secondary, #8b949e); white-space: nowrap; }
.bkc-ok   { color: #22c55e; font-weight: 700; white-space: nowrap; }
.bkc-need { color: var(--text-secondary, #8b949e); white-space: nowrap; }
.bkc-need strong { color: #55efc4; font-weight: 800; }
.bkc-pal-f {
    margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border, #30363d);
    font-size: 12px; line-height: 1.6; color: var(--text-secondary, #8b949e);
}
body.p2-light .bkc-pal-h { color: #0f766e; }
body.p2-light .bkc-pal-p, body.p2-light .bkc-pal-next strong { color: #1a1814 !important; }
body.p2-light .bkc-need strong { color: #0f766e; }
body.p2-light .bkc-palt tr.is-next td { background: rgba(15, 118, 110, .07); }

/* ══ « VOIR PLUS » ════════════════════════════════════════════════════════════
   Le bouton DIT ce qu'il reste (« 158 restants »). Un bouton muet laisse croire que la liste
   est peut-etre finie — c'etait exactement le defaut de la troncature a 50. */
.bkc-morew { margin-top: 14px; text-align: center; }
.bkc-more {
    font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
    padding: 11px 22px; border-radius: 10px;
    color: #fff; background: #0b0d12;
    border: 1px solid rgba(108, 92, 231, .45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    transition: border-color .15s, background .15s;
}
.bkc-more:hover:not(:disabled) { background: #131722; border-color: #6c5ce7; }
.bkc-more:disabled { opacity: .55; cursor: default; }
.bkc-more em { font-style: normal; font-weight: 600; opacity: .65; margin-left: 4px; }
.bkc-allshown { font-size: 13px; color: var(--text-secondary, #8b949e); }
body.p2-light .bkc-more { color: #1a1814; background: #faf6ec; border-color: #c9bfa6; }
body.p2-light .bkc-more:hover:not(:disabled) { background: #fff; border-color: #6c5ce7; }

/* ══ LE CLASSEMENT SE LIT DANS LES DEUX SENS ══════════════════════════════════
   « Voir plus » EN HAUT = on remonte vers les meilleurs. EN BAS = on descend vers ceux qu'il
   devance. Sa ligne reste au milieu : sans ce repere, apres deux clics on ne sait plus qui on
   regarde — ceux qui le battent, ou ceux qu'il bat. */
.bkc-morew-top { margin: 0 0 12px; }
.bkc-morew-bot { margin: 12px 0 0; }
.bkc-more-dn { border-color: rgba(139, 148, 158, .40); }
.bkc-more-dn:hover:not(:disabled) { border-color: #8b949e; }

/* SA LIGNE. Elle ne se confond avec aucune autre : c'est le point zero de la lecture. */
.bkc-whot tr.bkc-me td {
    background: rgba(108, 92, 231, .13) !important;
    border-top: 2px solid #6c5ce7;
    border-bottom: 2px solid #6c5ce7;
    font-weight: 800;
}
.bkc-whot tr.bkc-me em {
    font-style: normal; font-weight: 700; font-size: 11px; letter-spacing: .1em;
    text-transform: uppercase; color: #a78bfa; margin-left: 8px;
}
body.p2-light .bkc-whot tr.bkc-me td { background: rgba(108, 92, 231, .10) !important; }

/* ══ PALIERS : « Top 1 % » ET « 115e place » ══════════════════════════════════
   Le pourcentage situe a l'echelle du pays ; le rang donne un nombre d'hommes a doubler. Les
   deux disent le meme seuil — mais pas a la meme personne. D'ou les deux, sur chaque ligne. */
.bkc-pal-l { display: flex; flex-direction: column; gap: 2px; }
.bkc-pal-l em {
    font-style: normal; font-weight: 600; font-size: 11.5px;
    color: var(--text-secondary, #8b949e); letter-spacing: .02em;
}
.bkc-pal-l em sup { font-size: 8px; }
.bkc-pal-n sup { font-size: 8px; }

/* ═══ BADGE « MEILLEUR PALIER FRANCHI » (bloc « Ce qu'il lui manque ») ═══════════════════
   Le bloc ne disait que ce qui MANQUE : un athlete deja dans le top 1 % n'y lisait jamais
   ce qu'il A. Le badge repond a l'autre moitie de la question.

   ⚠ SIX NIVEAUX, ET ILS SE DISTINGUENT AUTREMENT QUE PAR LA COULEUR SEULE : le libelle
   porte toujours le palier en toutes lettres (« Top 1 % », « Top 100 »). Une distinction
   qui ne tiendrait qu'a la teinte serait illisible pour un daltonien — et c'est la regle
   deja appliquee aux pastilles H/F du classement mixte.
   Le degrade change ET la luminosite augmente avec la selectivite : meme en niveaux de
   gris, l'elite reste la plus claire. */
.bkc-badge {
    display: inline-flex; align-items: center; gap: 6px;
    margin-left: 12px; padding: 4px 12px 4px 9px;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 900; letter-spacing: .04em;
    text-transform: none; vertical-align: middle;
    border: 1px solid transparent;
    white-space: nowrap;
}
.bkc-badge i { font-style: normal; font-size: 12px; line-height: 1; }

/* Du plus selectif au moins selectif. */
.bkc-badge-elite   { background: linear-gradient(135deg,#fff1a8,#ffd700); color:#3a2c00; border-color:#ffd70088;
                     box-shadow: 0 0 18px rgba(255,215,0,.35); }
.bkc-badge-platine { background: linear-gradient(135deg,#e8f0ff,#b9c7e8); color:#1b2440; border-color:#b9c7e888; }
.bkc-badge-or      { background: linear-gradient(135deg,#c4b5fd,#8b7bf0); color:#140f33; border-color:#a29bfe88; }
.bkc-badge-argent  { background: linear-gradient(135deg,#93c5fd,#5b9bf5); color:#08203f; border-color:#60a5fa88; }
.bkc-badge-bronze  { background: linear-gradient(135deg,#7dd3fc,#38bdf8); color:#042635; border-color:#38bdf888; }
.bkc-badge-vert    { background: linear-gradient(135deg,#86efac,#4ade80); color:#052e16; border-color:#4ade8088; }


@media (max-width: 520px) {
    .bkc-badge { margin-left: 0; margin-top: 6px; }
}

/* ── LIGNE DU BADGE — sous l'objectif, pas dans le titre ────────────────────────────────
   Le badge est une DISTINCTION : il doit se voir comme tel, pas comme un mot de plus dans
   un intertitre. On lui donne sa propre ligne, avec la legende qui dit ce qu'il represente
   (« meilleur palier deja franchi »). Sans cette legende, « ★ Top 100 » est ambigu : on ne
   sait pas si c'est un objectif ou un acquis. */
.bkc-pal-badge {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    margin: -6px 0 18px;
}
.bkc-pal-badge em {
    font-style: normal; font-size: 15px; line-height: 1.5;
    color: var(--text-muted, #8b949e);
}
.bkc-pal-badge em strong { color: var(--text-primary, #c9d1d9); font-weight: 800; }

/* ⚠ TRES GRAND FORMAT (demande utilisateur : « bien VISIBLE, limite agressive »).
   Le badge est la RECOMPENSE, il doit sauter aux yeux. `!important` PARTOUT : c'est
   volontaire — plusieurs feuilles (dashboard.css, ux-v2.css, theme custom) et des styles
   inline peuvent rapetisser un `.bkc-badge` ; ici on garantit que RIEN ne le reduit.
   Toujours AUCUNE animation : un badge qui scintille detourne de la phrase d'objectif. */
.bkc-badge {
    font-size: 32px !important; font-weight: 900 !important;
    padding: 14px 30px 14px 26px !important;
    line-height: 1.1 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 6px 22px rgba(0,0,0,.4) !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.25) !important;
    letter-spacing: .01em !important;
}
.bkc-badge i { font-size: 32px !important; filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); }
.bkc-badge-elite { box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 3px 14px rgba(255,215,0,.5); }

/* ── LE TROPHEE + LES PUCES (epreuve · discipline) ──────────────────────────────────────
   Le trophee donne au bloc son statut de DISTINCTION : sans lui, « Top 100 » se lit comme
   une ligne de tableau de plus. Il est purement decoratif (`aria-hidden` cote HTML) —
   toute l'information est ecrite a cote, un lecteur d'ecran n'a rien a gagner a s'entendre
   annoncer « trophee ».

   ⚠ L'EPREUVE et la DISCIPLINE ne sont pas de la decoration : le badge CHANGE quand on
   bascule d'epreuve dans le selecteur juste au-dessus. Sans elles, on ne sait plus a quoi
   se rapporte le « Top 100 » qu'on a sous les yeux. */
.bkc-pal-badge { align-items: flex-start; gap: 14px; }

.bkc-troph {
    flex: 0 0 auto;
    width: 104px !important; height: 104px !important; border-radius: 50%;
    display: flex !important; align-items: center; justify-content: center;
    font-size: 58px !important; line-height: 1;
    background: radial-gradient(circle at 34% 26%, #fff6c9, #ffd257 46%, #d99a12 100%);
    box-shadow: inset 0 2px 0 rgba(255,255,255,.85), 0 8px 30px rgba(217,154,18,.55);
    border: 2px solid rgba(255,215,0,.6);
}
.bkc-pal-badge-c { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bkc-pal-badge-l { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }

/* Puces neutres : elles NOMMENT, elles ne hierarchisent pas. Leur donner une couleur forte
   les mettrait au meme niveau que le badge, qui est la seule vraie distinction de la ligne. */
.bkc-chip {
    display: inline-block; padding: 7px 16px; border-radius: 999px;
    font-size: 15px; font-weight: 700; white-space: nowrap;
    background: rgba(127,127,127,.14);
    border: 1px solid var(--border, #30363d);
    color: var(--text-secondary, #c9d1d9);
}
.bkc-chip-disc { background: rgba(162,155,254,.14); border-color: rgba(162,155,254,.4); color: #a29bfe; }
body.p2-light .bkc-chip-disc { color: #5b4bd6; }

/* Sur petit ecran on garde un format genereux, juste un cran en dessous du bureau. */
@media (max-width: 520px) {
    .bkc-troph { width: 66px; height: 66px; font-size: 36px; }
    .bkc-badge { font-size: 21px; padding: 10px 18px; }
    .bkc-badge i { font-size: 21px; }
    .bkc-pal-badge { gap: 12px; }
}