/* ══════════════════════════════════════════════════════════════════════════════
   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; }

.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 var(--border, #30363d);
}
.bkc-step:last-child { border-left-color: transparent; margin-bottom: 0; }
/* La pastille de la frise : on lit la carriere comme une ligne de temps, pas comme une liste. */
.bkc-step::before {
    content: ''; position: absolute; left: -8px; top: 7px;
    width: 14px; height: 14px; border-radius: 50%;
    background: #6c5ce7; border: 3px solid var(--bg-body, #0d1117);
}
.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; }
.bkc-years {
    font-size: 13px; font-weight: 700; color: var(--text-secondary, #8b949e);
    font-variant-numeric: tabular-nums; letter-spacing: .04em;
}

/* 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. */
.bkc-tr {
    margin: 8px 0 8px; padding: 22px 24px;
    background: rgba(108, 92, 231, .07); border-left: 3px solid #6c5ce7; border-radius: 0 12px 12px 0;
}
.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; }