/* =====================================================================
   profil-sf.css — HABILLAGE « CONSOLE » DE LA PAGE PROFIL
   Reprend le langage visuel de la maquette SPORT FUTUR : surfaces mates,
   filets 1 px, micro-libelles en capitales monospace, chiffres tabulaires,
   cartes numerotees, pastilles de niveau. Densite d'un tableau de bord.
   ---------------------------------------------------------------------
   Chargee EN DERNIER : apres dashboard.css, theme-control.css, mobile.css,
   profil-font.css ET ux-v2.css. Active par `core/skin_profil.php` seulement
   (`?skin=console`) — inactive, elle n'est meme pas envoyee au navigateur.

   ⚠ REGLE 1 — AUCUNE COULEUR DE THEME EN DUR.
   `theme-control.css` reste la SOURCE DE VERITE du clair/sombre. Tout ici
   passe par des tokens (`--bk-surface-1`, `--bk-text-3`, `--bk-link`...)
   qui existent DANS LES DEUX THEMES. Un `#161b22` ecrit ici casserait le
   mode clair sans qu'on comprenne d'ou ca vient.
   L'accent violet de la maquette n'est donc PAS code en dur : on prend
   `var(--bk-link)`, qui vaut deja #a78bfa en sombre et bascule en brun
   creme en mode clair. L'habillage SUIT le theme au lieu de le combattre.

   ⚠ REGLE 2 — ON N'ENLEVE RIEN.
   Zero `display:none`, zero `visibility:hidden`, zero `max-height` sur du
   contenu, zero `text-overflow`, zero `overflow-x:hidden` sur le corps de
   page (`hidden` ne range pas ce qui deborde : il le COUPE, sans barre pour
   aller le chercher). Un habillage qui masque une donnee est une perte.

   ⚠ REGLE 3 — ON NE CIBLE JAMAIS `nav` TOUT COURT.
   C'est une balise semantique : le site en compte ~4 par page. Trois
   fichiers s'y sont deja brules (bande vide, barre tassee, contenu sous la
   nav). Ici on ne touche pas a la navigation du tout.

   TOUT est scope a `body.bk-skin-console.bk-page-profil` : impossible que
   ces regles fuient sur une autre page.
   ===================================================================== */

/* ⚠ LES TOKENS DE MESURE (`--sf-mono`, `--sf-r`, `--sf-pad`, `--sf-gap`,
   `--sf-max`) SONT DEFINIS DANS `site-sf.css` sur `body.bk-skin-console`.
   Cette feuille les lit par heritage. Les redefinir ici les ferait diverger
   entre la fiche et le reste du site. */


/* =====================================================================
   0. LA STRUCTURE — barre collante, heros horizontal, deux colonnes
   Ces trois blocs sont montes par assets/js/profil-sf.js, qui DEPLACE des
   sections existantes (jamais n'en cree ni n'en supprime). Sans le script,
   ces selecteurs ne matchent rien : la page reste simplement rehabillee.
   ===================================================================== */
body.bk-skin-console.bk-page-profil #bk-contenu { max-width: none; padding: 0 18px; }

/* ── barre collante ─────────────────────────────────────────────────
   `top` est pose EN JS d'apres la hauteur MESUREE de la nav du site
   (~50 px en bureau, ~95 px en telephone sur deux rangees). Un chiffre
   fige y a deja produit une bande vide de 95 px sur tout le site. */
body.bk-skin-console.bk-page-profil .sf-bar {
    /* ⚠ AUCUN POSITIONNEMENT FIXE NI COLLANT (demande explicite).
       Collante, elle recouvrait le contenu a chaque defilement et il fallait
       lui reserver une place sous DEUX autres barres deja collantes. En flux
       normal, elle ne masque plus rien et ne se superpose a rien. */
    position: static;
    z-index: auto;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    min-height: 52px;
    /* ⚠ PLEINE LARGEUR ET OPAQUE.
       Limitee a 1180 px et translucide a 88 %, elle laissait le texte de la
       page traverser et defiler DE PART ET D'AUTRE : on lisait deux contenus
       superposes. Une barre collante posee sur du contenu doit etre opaque
       et occuper toute la largeur — c'est la meme lecon que le panneau du
       menu burger, transparent a 7 % et illisible.
       Les marges negatives annulent le padding de #bk-contenu ; le
       `padding-inline` realigne le contenu sur la colonne des cartes. */
    max-width: none;
    margin: 0 -18px;
    padding: 7px max(18px, calc((100vw - var(--sf-max)) / 2));
    /* surface DISTINCTE du fond de page : avec la meme teinte, la barre se
       lisait comme une rangee de boutons flottant au milieu du texte, sans
       qu'on comprenne qu'elle est une couche posee par-dessus. */
    /* plus d'ombre portee : elle n'a de sens que pour une couche qui survole
       le contenu. En flux, un simple filet suffit. */
    background: transparent;
    box-shadow: none;
    border-bottom: 1px solid var(--bk-border);
}
body.bk-skin-console.bk-page-profil .sf-bar-l { display: flex; align-items: center; gap: 14px; }
body.bk-skin-console.bk-page-profil .sf-back {
    font-family: var(--sf-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bk-text-3);
    text-decoration: none;
    white-space: nowrap;
}
body.bk-skin-console.bk-page-profil .sf-back:hover { color: var(--bk-link); }
body.bk-skin-console.bk-page-profil .sf-dim { opacity: .65; }

/* identite condensee : masquee tant que la couverture est a l'ecran.
   ⚠ `opacity` et non `display:none` — le nom reste dans le document,
   donc lisible par un lecteur d'ecran et par une recherche Ctrl+F. */
body.bk-skin-console.bk-page-profil .sf-bar-id {
    display: flex;
    align-items: center;
    gap: 10px;
    /* toujours visible : la barre n'est plus collante (cf. le JS) */
    opacity: 1;
}
body.bk-skin-console.bk-page-profil .sf-bar-id.on { opacity: 1; transform: none; }
body.bk-skin-console.bk-page-profil .sf-bar-id b { font-size: 13px; font-weight: 650; }
body.bk-skin-console.bk-page-profil .sf-av {
    width: 26px; height: 26px; border-radius: 7px;
    display: grid; place-items: center;
    font-family: var(--sf-mono); font-size: 9.5px; font-weight: 800;
    color: var(--bk-bg);
    background: linear-gradient(135deg, var(--bk-link), color-mix(in srgb, var(--bk-link) 55%, #e879f9));
}
body.bk-skin-console.bk-page-profil .sf-niv {
    font-family: var(--sf-mono); font-size: 9.5px; font-weight: 700;
    padding: 2px 7px; border-radius: 5px;
    color: var(--bk-link);
    border: 1px solid color-mix(in srgb, var(--bk-link) 40%, transparent);
    background: color-mix(in srgb, var(--bk-link) 12%, transparent);
}
/* les actions sont DEPLACEES ici : elles collent a droite, sans etre
   coupees. ⚠ jamais `justify-content:flex-end` avec un debordement
   horizontal : le debut du contenu devient inatteignable au doigt. */
body.bk-skin-console.bk-page-profil .sf-bar .p2-actions {
    margin: 0 0 0 auto !important;
    gap: 7px !important;
    justify-content: flex-end !important;
    max-width: 100%;
    min-width: 0;
    /* ⚠ PAS d'`overflow` ICI : un conteneur qui defile ROGNE ses enfants
       en position absolue — les menus deroulants seraient coupes net. */
    overflow: visible;
}
/* ⚠ DEUX PIEGES FLEX, mesures chacun sur un vrai telephone :
   1) `flex:0 0 auto` doit porter sur les BOUTONS, pas sur leur conteneur :
      pose sur `.sf-act`, il empechait le groupe entier de se replier et
      poussait la page a 594 px de large sur un ecran de 390 ;
   2) sans lui sur les boutons, ceux-ci sont ecrases a quelques pixels et
      leur libelle se casse verticalement, une lettre par ligne. */
body.bk-skin-console.bk-page-profil .sf-bar .p2-actions > * { flex: 1 1 auto; min-width: 0; }
body.bk-skin-console.bk-page-profil .sf-act > * { flex: 0 0 auto; }

/* ── actions rangees par intention ─────────────────────────────────
   Les menus sont des <details> natifs : ouvrables au clavier, etat
   annonce aux lecteurs d'ecran, aucun JS necessaire pour s'ouvrir. */
body.bk-skin-console.bk-page-profil .sf-act {
    display: flex; align-items: center; gap: 7px;
    flex-wrap: wrap; justify-content: flex-end;
}
body.bk-skin-console.bk-page-profil .sf-menu { position: relative; flex: 0 0 auto; }
body.bk-skin-console.bk-page-profil .sf-menu > summary {
    list-style: none; cursor: pointer; white-space: nowrap;
    font-family: var(--sf-mono); font-size: 9.5px; letter-spacing: .11em; text-transform: uppercase;
    color: var(--bk-text-3);
    background: var(--bk-surface-2); border: 1px solid var(--bk-border);
    border-radius: 8px; padding: 7px 12px;
}
body.bk-skin-console.bk-page-profil .sf-menu > summary::-webkit-details-marker { display: none; }
body.bk-skin-console.bk-page-profil .sf-menu > summary::after { content: " ▾"; opacity: .6; }
body.bk-skin-console.bk-page-profil .sf-menu > summary:hover,
body.bk-skin-console.bk-page-profil .sf-menu[open] > summary { color: var(--bk-link); border-color: var(--bk-link); }
body.bk-skin-console.bk-page-profil .sf-menu-box {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
    display: flex; flex-direction: column; gap: 6px; min-width: 210px;
    background: var(--bk-surface-1); border: 1px solid var(--bk-border);
    border-radius: 10px; padding: 8px;
    box-shadow: 0 18px 46px rgba(0, 0, 0, .45);
}
body.bk-skin-console.bk-page-profil .sf-menu-box > * { width: 100%; text-align: left !important; margin: 0 !important; }
/* ⚠ Les actions ADMIN (masquer, detruire) ne se melangent jamais aux
   actions publiques : un clic de trop y detruit une fiche pour de bon.
   Rouge, a part, et derriere une poignee qui le dit. */
body.bk-skin-console.bk-page-profil .sf-menu.sf-danger > summary {
    color: #fb7185; border-color: rgba(251, 113, 133, .45); background: rgba(251, 113, 133, .10);
}
body.bk-skin-console.bk-page-profil .sf-menu.sf-danger > summary:hover,
body.bk-skin-console.bk-page-profil .sf-menu.sf-danger[open] > summary { color: #fff; background: #b91c1c; border-color: #ef4444; }
body.bk-skin-console.bk-page-profil .sf-menu.sf-danger .sf-menu-box { border-color: rgba(251, 113, 133, .45); }

/* ── profil d'aptitudes ────────────────────────────────────────────
   Le trace prend `currentColor` : il suit le theme sans qu'une seule
   couleur soit ecrite ici. */
body.bk-skin-console.bk-page-profil .sf-apt { color: var(--bk-text-3); }
body.bk-skin-console.bk-page-profil .sf-apt-chart svg { width: 100%; height: auto; overflow: visible; display: block; }
body.bk-skin-console.bk-page-profil .sf-apt-poly {
    fill: color-mix(in srgb, var(--bk-link) 22%, transparent);
    stroke: var(--bk-link); stroke-width: 2; stroke-linejoin: round;
}
body.bk-skin-console.bk-page-profil .sf-apt-pt { fill: var(--bk-link); }
/* axe non mesure : cercle CREUX. Un point plein a zero se lirait comme
   une valeur mesuree nulle — donc comme une faiblesse constatee. */
body.bk-skin-console.bk-page-profil .sf-apt-nd { fill: none; stroke: var(--bk-text-4); stroke-width: 1.4; }
body.bk-skin-console.bk-page-profil .sf-apt-lg {
    display: flex; flex-direction: column; gap: 6px;
    margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--bk-border);
}
body.bk-skin-console.bk-page-profil .sf-apt-lg > div { display: flex; justify-content: space-between; font-size: 11.5px; }
body.bk-skin-console.bk-page-profil .sf-apt-lg .k { color: var(--bk-text-2); }
body.bk-skin-console.bk-page-profil .sf-apt-lg .v { font-family: var(--sf-mono); font-weight: 700; color: var(--bk-text); }
body.bk-skin-console.bk-page-profil .sf-apt-lg .nd .v { color: var(--bk-text-4); font-weight: 500; font-size: 10.5px; }
body.bk-skin-console.bk-page-profil .sf-apt-note {
    margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--bk-border);
    font-size: 11px; line-height: 1.55; color: var(--bk-text-4);
}
body.bk-skin-console.bk-page-profil .sf-apt-note b { color: var(--bk-text-3); }

/* ── heros horizontal ──────────────────────────────────────────────
   visuels d'identite | texte | niveau. Sous 1000 px on repasse en pile :
   trois colonnes sur un telephone donneraient des colonnes de 4 cm. */
body.bk-skin-console.bk-page-profil .sf-hero {
    display: grid;
    grid-template-columns: minmax(240px, 340px) minmax(0, 1fr) auto;
    gap: 28px;
    align-items: center;
    text-align: left;
}
body.bk-skin-console.bk-page-profil .sf-hero-l,
body.bk-skin-console.bk-page-profil .sf-hero-c,
body.bk-skin-console.bk-page-profil .sf-hero-r { min-width: 0; }
body.bk-skin-console.bk-page-profil .sf-hero-c > * { text-align: left; margin-left: 0; margin-right: 0; }
body.bk-skin-console.bk-page-profil .sf-hero-c .p2-badges,
body.bk-skin-console.bk-page-profil .sf-hero-c .p2-meta { justify-content: flex-start; }
body.bk-skin-console.bk-page-profil .sf-hero-r {
    min-width: 230px;
    max-width: 300px;
}
/* le bloc NIVEAU, deplace dans le heros, redevient une carte compacte */
body.bk-skin-console.bk-page-profil .sf-hero-r .p2-block {
    background: var(--bk-surface-2);
    padding: 0 16px 16px;
    margin: 0;
}
body.bk-skin-console.bk-page-profil .sf-hero-r .p2-rubrique { margin: 0 -16px 14px !important; padding: 12px 16px !important; }
body.bk-skin-console.bk-page-profil .sf-hero-r .p2-niveau-code { font-size: clamp(40px, 5vw, 64px) !important; line-height: 1; }
body.bk-skin-console.bk-page-profil .p2-cover { text-align: left; }
/* Le bascule clair/sombre de la couverture est en position absolue : le
   heros passait PAR-DESSUS et le rendait inatteignable. Un controle cache
   derriere un decor est un controle perdu — on le remonte a droite, au
   dessus de tout. (Meme lecon que le mur d'inscription qui recouvrait le
   bouton burger : tester un clic, c'est verifier `elementFromPoint`.) */
body.bk-skin-console.bk-page-profil .p2-cover .p2-toggles {
    position: absolute;
    top: 12px; right: 14px; left: auto;
    z-index: 5;
    margin: 0;
}

/* ── bandeau de chiffres, pleine largeur ───────────────────────────── */
body.bk-skin-console.bk-page-profil .sf-statband {
    max-width: var(--sf-max);
    margin: 0 auto 20px;
}

/* ── contenu + colonne laterale ────────────────────────────────────── */
body.bk-skin-console.bk-page-profil .sf-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 348px;
    gap: 20px;
    align-items: start;
    max-width: var(--sf-max);
    margin: 0 auto;
}
body.bk-skin-console.bk-page-profil .sf-cols.sf-nocol { grid-template-columns: minmax(0, 1fr); }
body.bk-skin-console.bk-page-profil .sf-main,
body.bk-skin-console.bk-page-profil .sf-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}
/* la colonne laterale suit le defilement, comme le panneau de la maquette */
body.bk-skin-console.bk-page-profil .sf-side { position: sticky; top: 108px; }
/* les sections deplacees perdent leurs marges de flux : c'est la grille
   qui gere desormais l'espacement */
body.bk-skin-console.bk-page-profil .sf-main > *,
body.bk-skin-console.bk-page-profil .sf-side > * {
    margin: 0 !important;
    max-width: none !important;
    width: auto;
}
/* dans une colonne de 830 px, la grille 12 colonnes reste lisible ;
   `display:contents` la dissout pour que ses blocs deviennent des cartes
   de la colonne, comme les autres sections. */
body.bk-skin-console.bk-page-profil .sf-main > .p2-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 !important;
}
body.bk-skin-console.bk-page-profil .sf-main > .p2-grid > .p2-block { grid-column: auto; }

@media (max-width: 1150px) {
    body.bk-skin-console.bk-page-profil .sf-cols { grid-template-columns: minmax(0, 1fr); }
    body.bk-skin-console.bk-page-profil .sf-side { position: static; }
}
@media (max-width: 1000px) {
    body.bk-skin-console.bk-page-profil .sf-hero { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    body.bk-skin-console.bk-page-profil .sf-hero-r { max-width: none; min-width: 0; }
}

/* =====================================================================
   0bis. LA PALETTE DE LA MAQUETTE — et le theme personnalise neutralise
   ---------------------------------------------------------------------
   ⚠ POURQUOI CE BLOC EXISTE, ALORS QUE LA REGLE 1 INTERDIT LES COULEURS
   EN DUR. La regle interdit d'ECRIRE une couleur sur un element : c'est
   ainsi qu'on casse le mode clair sans comprendre pourquoi. Ici on ne
   touche AUCUN element : on REDEFINIT LES TOKENS, en un seul endroit,
   et uniquement pour la page profil quand l'habillage est actif. Tout le
   reste de la feuille continue de lire `var(--bk-*)` : c'est exactement
   le mecanisme de theme-control.css, applique a une page.

   ⚠ SOMBRE UNIQUEMENT (`body:not(.p2-light)`). La maquette SPORT FUTUR
   n'a pas de mode clair ; en creme, on laisse theme-control.css faire son
   travail. Redefinir ces tokens en clair rendrait la page illisible.
   ===================================================================== */
/* ⚠ LA PALETTE A DEMENAGE dans `assets/css/site-sf.css`, qui est chargee
   AVANT celle-ci sur toutes les pages. Elle n'existe donc qu'a UN SEUL
   endroit : deux definitions finiraient par diverger, et on aurait un
   profil et un accueil de teintes differentes. Ne pas la recopier ici. */


/* ── LE THEME PERSONNALISE DU SITE, NEUTRALISE SUR CETTE PAGE ────────
   `core/theme.php` injecte, pour TOUT le site :
       h1, h2 { color: #2fa81f !important }   -> le nom en vert vif
       a      { color: #bbaf2a !important }   -> les liens en jaune
       body   { font-family: 'Lora', serif !important }
       h1..h6 { font-family: 'Fira Code', monospace !important }
       ...    { border-radius: 20px !important }
   C'est lui — et non l'habillage — qui empechait la fiche de ressembler
   a la maquette. On ne le desactive PAS globalement (c'est un reglage
   assume du site) : on le neutralise UNIQUEMENT ici.
   ⚠ `!important` est indispensable : on ne bat un `!important` qu'avec un
   `!important` de specificite superieure. C'est le meme motif que
   `profil-font.css`, deja en place dans le projet pour la meme raison. */
body.bk-skin-console.bk-page-profil #bk-contenu h1,
body.bk-skin-console.bk-page-profil #bk-contenu h2,
body.bk-skin-console.bk-page-profil #bk-contenu h3 {
    color: var(--bk-text) !important;
    -webkit-text-fill-color: var(--bk-text) !important;
    font-family: "Inter", "Segoe UI", system-ui, sans-serif !important;
    letter-spacing: -0.025em !important;
}
/* ⚠ Le nom porte un degrade en mode magazine : on ne remet PAS
   `-webkit-text-fill-color` a une couleur pleine sans reposer aussi la
   couleur, sinon le titre devient invisible sur certains navigateurs. */
body.bk-skin-console.bk-page-profil #bk-contenu a:not(.btn):not([class*="btn-"]) {
    color: var(--bk-link) !important;
}
body.bk-skin-console.bk-page-profil #bk-contenu a:not(.btn):not([class*="btn-"]):hover {
    color: #e879f9 !important;
}
/* la maquette est anguleuse : 8 a 14 px, pas 20 */
body.bk-skin-console.bk-page-profil #bk-contenu button,
body.bk-skin-console.bk-page-profil #bk-contenu input,
body.bk-skin-console.bk-page-profil #bk-contenu select,
body.bk-skin-console.bk-page-profil #bk-contenu textarea,
body.bk-skin-console.bk-page-profil .sf-bar button {
    border-radius: 8px !important;
}
/* le corps de texte repasse en Inter, comme la maquette et comme le reste
   du site depuis profil-font.css */
body.bk-skin-console.bk-page-profil #bk-contenu,
body.bk-skin-console.bk-page-profil #bk-contenu p,
body.bk-skin-console.bk-page-profil #bk-contenu span,
body.bk-skin-console.bk-page-profil #bk-contenu div,
body.bk-skin-console.bk-page-profil #bk-contenu li {
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}
/* ...sauf ce qui doit rester monospace : c'est la signature de la maquette */
body.bk-skin-console.bk-page-profil .p2-rubrique,
body.bk-skin-console.bk-page-profil .p2-rubrique > span,
body.bk-skin-console.bk-page-profil .p2-stat .lbl,
body.bk-skin-console.bk-page-profil .sf-back,
body.bk-skin-console.bk-page-profil .sf-menu > summary,
body.bk-skin-console.bk-page-profil .p2-rec-tab,
body.bk-skin-console.bk-page-profil .sf-apt-refb,
body.bk-skin-console.bk-page-profil .sf-apt-etat,
body.bk-skin-console.bk-page-profil .sf-pos-ep,
body.bk-skin-console.bk-page-profil .sf-pos-r .s,
body.bk-skin-console.bk-page-profil .sf-cal-grid .m,
body.bk-skin-console.bk-page-profil .sf-cal-lg,
body.bk-skin-console.bk-page-profil .sf-methodo-grid .t {
    font-family: var(--sf-mono) !important;
}

/* =====================================================================
   1. LES CARTES
   Le profil « magazine » est une suite de sections separees par un simple
   filet horizontal. On les transforme en cartes, comme la console.
   ===================================================================== */
body.bk-skin-console.bk-page-profil .p2-block,
body.bk-skin-console.bk-page-profil .p2-bio,
body.bk-skin-console.bk-page-profil .p2-pivot,
body.bk-skin-console.bk-page-profil .p2-hof,
body.bk-skin-console.bk-page-profil .p2-sim,
body.bk-skin-console.bk-page-profil .p2-chart,
body.bk-skin-console.bk-page-profil .p2-villes,
body.bk-skin-console.bk-page-profil .p2-tl,
body.bk-skin-console.bk-page-profil .p2-fact,
body.bk-skin-console.bk-page-profil .p2-quote {
    background: var(--bk-surface-1);
    border: 1px solid var(--bk-border);
    border-radius: var(--sf-r);
    padding: 0 var(--sf-pad) var(--sf-pad);
    /* `border-top` seul servait de separateur de rubrique : il fait
       maintenant partie du cadre, on neutralise le reglage d'origine. */
    border-top-color: var(--bk-border);
}
/* ces deux-la n'ont pas d'entete : sans padding haut, le texte colle au filet */
body.bk-skin-console.bk-page-profil .p2-fact,
body.bk-skin-console.bk-page-profil .p2-quote {
    padding-top: var(--sf-pad);
}
/* largeur commune : une pile de cartes de largeurs differentes ne se lit pas
   comme un tableau de bord. La biographie garde une mesure de lecture courte. */
body.bk-skin-console.bk-page-profil .p2-pivot,
body.bk-skin-console.bk-page-profil .p2-hof,
body.bk-skin-console.bk-page-profil .p2-sim,
body.bk-skin-console.bk-page-profil .p2-chart,
body.bk-skin-console.bk-page-profil .p2-villes,
body.bk-skin-console.bk-page-profil .p2-tl,
body.bk-skin-console.bk-page-profil .p2-more {
    max-width: var(--sf-max);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 22px;
}
body.bk-skin-console.bk-page-profil .p2-bio {
    max-width: var(--sf-max);
    margin-bottom: 22px;
}
/* La prose sur 1180 px ne se lit pas : deux colonnes, comme le portrait de
   la maquette. En dessous de 900 px, une seule (sinon 2 colonnes de 40 mm). */
body.bk-skin-console.bk-page-profil .p2-bio-text {
    columns: 2;
    column-gap: 34px;
    max-width: none;
}
body.bk-skin-console.bk-page-profil .p2-bio-text p { break-inside: avoid; }

body.bk-skin-console.bk-page-profil .p2-grid {
    max-width: var(--sf-max);
    gap: 22px;
}
body.bk-skin-console.bk-page-profil .p2-block { padding-top: 0; }

/* =====================================================================
   2. LES ENTETES DE CARTE
   `.p2-rubrique` etait un titre italique tres espace ; il devient l'entete
   de la carte : capitales monospace + pastille numerotee, comme la console.
   Le `<span>` de chaque rubrique porte le chiffre romain : on le fait
   passer DEVANT le libelle (row-reverse) pour retrouver la pastille « 01 ».
   ===================================================================== */
body.bk-skin-console.bk-page-profil .p2-rubrique,
body.bk-skin-console.bk-page-profil .p2-bio-rubrique,
body.bk-skin-console.bk-page-profil .p2-pivot-rubrique,
body.bk-skin-console.bk-page-profil .p2-hof-rubrique,
body.bk-skin-console.bk-page-profil .p2-sim-rubrique,
body.bk-skin-console.bk-page-profil .p2-chart-rubrique,
body.bk-skin-console.bk-page-profil .p2-villes-rubrique,
body.bk-skin-console.bk-page-profil .p2-tl-rubrique {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    font-family: var(--sf-mono) !important;
    font-style: normal !important;
    font-weight: 650 !important;
    font-size: 11px !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase;
    color: var(--bk-text-3) !important;
    margin: 0 calc(-1 * var(--sf-pad)) 18px !important;
    padding: 14px var(--sf-pad) !important;
    border-bottom: 1px solid var(--bk-border) !important;
    border-top: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .022), transparent);
}
body.bk-skin-console.bk-page-profil .p2-rubrique > span,
body.bk-skin-console.bk-page-profil .p2-bio-rubrique > span,
body.bk-skin-console.bk-page-profil .p2-pivot-rubrique > span,
body.bk-skin-console.bk-page-profil .p2-hof-rubrique > span,
body.bk-skin-console.bk-page-profil .p2-sim-rubrique > span,
body.bk-skin-console.bk-page-profil .p2-chart-rubrique > span,
body.bk-skin-console.bk-page-profil .p2-villes-rubrique > span,
body.bk-skin-console.bk-page-profil .p2-tl-rubrique > span {
    font-family: var(--sf-mono) !important;
    font-size: 9.5px !important;
    font-style: normal !important;
    letter-spacing: 0.1em !important;
    color: var(--bk-link) !important;
    border: 1px solid var(--bk-link);
    border-radius: 4px;
    padding: 2px 6px;
    margin: 0 !important;
    line-height: 1.4;
    flex-shrink: 0;
    /* le filet de la pastille doit rester discret : c'est un reperage,
       pas une alerte */
    border-color: color-mix(in srgb, var(--bk-link) 34%, transparent);
    background: color-mix(in srgb, var(--bk-link) 9%, transparent);
}

/* =====================================================================
   3. LES CHIFFRES
   Micro-libelle monospace au-dessus, valeur tabulaire en dessous, filet
   degrade en haut de tuile. Les chiffres passent de 56 px « magazine » a
   une taille de tableau de bord : c'est la densite qui fait la console.
   ===================================================================== */
body.bk-skin-console.bk-page-profil .p2-stats-row {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}
body.bk-skin-console.bk-page-profil .p2-stat {
    position: relative;
    overflow: hidden;
    background: var(--bk-bg);
    border: 1px solid var(--bk-border);
    border-radius: 12px;
    padding: 14px 16px;
    transition: transform .2s, border-color .2s;
}
body.bk-skin-console.bk-page-profil .p2-stat:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--bk-link) 45%, var(--bk-border));
}
body.bk-skin-console.bk-page-profil .p2-stat::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent,
                color-mix(in srgb, var(--bk-link) 70%, transparent), transparent);
}
body.bk-skin-console.bk-page-profil .p2-stat .num {
    font-size: clamp(22px, 2.4vw, 28px) !important;
    font-weight: 750 !important;
    font-style: normal !important;
    letter-spacing: -0.02em !important;
    font-variant-numeric: tabular-nums;
    color: var(--bk-text) !important;
    margin-top: 7px;
}
body.bk-skin-console.bk-page-profil .p2-stat .lbl {
    font-family: var(--sf-mono) !important;
    font-style: normal !important;
    font-size: 8.5px !important;
    letter-spacing: 0.16em !important;
    color: var(--bk-text-4) !important;
    margin-top: 0 !important;
    order: -1;
}
body.bk-skin-console.bk-page-profil .p2-stat { display: flex; flex-direction: column; }

body.bk-skin-console.bk-page-profil .p2-huge {
    font-size: clamp(38px, 4.6vw, 58px) !important;
    font-weight: 800 !important;
    font-style: normal !important;
    letter-spacing: -0.03em !important;
    font-variant-numeric: tabular-nums;
    color: var(--bk-text) !important;
}
body.bk-skin-console.bk-page-profil .p2-huge .unit {
    font-family: var(--sf-mono) !important;
    font-style: normal !important;
    font-size: 11px !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bk-text-4) !important;
    margin-left: 8px;
}

/* tuiles de carriere : meme grammaire que les tuiles de stats */
body.bk-skin-console.bk-page-profil .p2-career-stat {
    background: var(--bk-bg);
    border: 1px solid var(--bk-border);
    border-radius: 12px;
}
body.bk-skin-console.bk-page-profil .p2-career-stat .v {
    font-style: normal !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
body.bk-skin-console.bk-page-profil .p2-career-stat .k {
    font-family: var(--sf-mono) !important;
    font-size: 8.5px !important;
    letter-spacing: 0.16em !important;
}

/* =====================================================================
   4. ONGLETS ET PASTILLES
   ===================================================================== */
body.bk-skin-console.bk-page-profil .p2-rec-tabs,
body.bk-skin-console.bk-page-profil .p2-more-tabs {
    gap: 5px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--bk-border);
}
body.bk-skin-console.bk-page-profil .p2-rec-tab,
body.bk-skin-console.bk-page-profil .p2-more-tab {
    font-family: var(--sf-mono) !important;
    font-style: normal !important;
    font-size: 9.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.09em !important;
    text-transform: uppercase;
    padding: 6px 12px !important;
    border-radius: 100px;
    border: 1px solid var(--bk-border) !important;
    background: transparent !important;
    color: var(--bk-text-4) !important;
    transition: .16s;
}
body.bk-skin-console.bk-page-profil .p2-rec-tab:hover,
body.bk-skin-console.bk-page-profil .p2-more-tab:hover {
    color: var(--bk-text-2) !important;
    border-color: var(--bk-text-4) !important;
}
body.bk-skin-console.bk-page-profil .p2-rec-tab.is-active,
body.bk-skin-console.bk-page-profil .p2-more-tab.is-active,
body.bk-skin-console.bk-page-profil .p2-rec-tab.active,
body.bk-skin-console.bk-page-profil .p2-more-tab.active {
    background: color-mix(in srgb, var(--bk-link) 13%, transparent) !important;
    border-color: color-mix(in srgb, var(--bk-link) 50%, transparent) !important;
    color: var(--bk-link) !important;
}
body.bk-skin-console.bk-page-profil .p2-rec-tab-cnt {
    font-family: var(--sf-mono);
    opacity: .6;
    font-size: 9px;
}

/* boutons d'action de l'entete : meme gabarit que la barre de la console.
   ⚠ on ne touche QUE la forme : les couleurs de sens (suivre, PDF, signaler)
   restent celles du site, elles portent une information. */
body.bk-skin-console.bk-page-profil .p2-actions button,
body.bk-skin-console.bk-page-profil .p2-actions .btn,
body.bk-skin-console.bk-page-profil .p2-more-btn {
    font-family: var(--sf-mono) !important;
    font-size: 9.5px !important;
    font-style: normal !important;
    letter-spacing: 0.11em !important;
    text-transform: uppercase;
    border-radius: 8px !important;
    padding: 7px 12px !important;
    white-space: nowrap;           /* un libelle casse sur deux lignes double
                                      la hauteur de la barre collante */
    line-height: 1.25;
}

/* =====================================================================
   5. LA COUVERTURE
   On lui donne le cadre de la carte-heros de la maquette : surface, filet,
   trame legere. Le contenu (plaque de rue, piste animee, compteur de
   visites, badges) est INCHANGE — on ne fait qu'encadrer.
   ===================================================================== */
body.bk-skin-console.bk-page-profil .p2-cover {
    position: relative;
    overflow: hidden;                 /* borne la trame : un decor qui deborde
                                         fabrique un defilement horizontal */
    max-width: var(--sf-max);
    margin: 18px auto 22px;
    background: var(--bk-surface-1);
    border: 1px solid var(--bk-border);
    border-radius: 16px;
    padding: 30px 28px 26px;
}
body.bk-skin-console.bk-page-profil .p2-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: .5;
    background:
        linear-gradient(color-mix(in srgb, var(--bk-link) 6%, transparent) 1px, transparent 1px) 0 0 / 46px 46px,
        linear-gradient(90deg, color-mix(in srgb, var(--bk-link) 6%, transparent) 1px, transparent 1px) 0 0 / 46px 46px;
    mask-image: radial-gradient(ellipse 70% 100% at 88% 50%, #000, transparent 72%);
}
body.bk-skin-console.bk-page-profil .p2-cover > * { position: relative; z-index: 1; }

body.bk-skin-console.bk-page-profil .p2-tag,
body.bk-skin-console.bk-page-profil .p2-sub {
    font-family: var(--sf-mono) !important;
    font-style: normal !important;
    font-size: 10px !important;
    letter-spacing: 0.13em !important;
    text-transform: uppercase;
    color: var(--bk-text-4) !important;
}
body.bk-skin-console.bk-page-profil .p2-name {
    font-weight: 750 !important;
    font-style: normal !important;
    letter-spacing: -0.025em !important;
}
body.bk-skin-console.bk-page-profil .bk-visit-line,
body.bk-skin-console.bk-page-profil .bk-visit-stats {
    font-family: var(--sf-mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.06em;
}

/* pastilles d'identite : gabarit des `pill` de la maquette.
   ⚠ `:not([style*="background"])` — les badges a couleur inline portent une
   information (niveau D/R/N/I, medailles). On ne les recolore JAMAIS.
   C'est la meme garde que celle posee dans core/theme.php le 2026-06-21. */
body.bk-skin-console.bk-page-profil .p2-badges .badge:not([style*="background"]) {
    background: var(--bk-surface-2);
    border: 1px solid var(--bk-border);
    border-radius: 7px;
    padding: 4px 10px;
    font-size: 11.5px;
    font-weight: 600;
}
body.bk-skin-console.bk-page-profil .p2-meta {
    font-family: var(--sf-mono) !important;
    font-size: 10.5px !important;
    letter-spacing: 0.06em;
    color: var(--bk-text-3) !important;
}

/* =====================================================================
   6. LISTES ET TABLEAUX — densite de tableau de bord
   ===================================================================== */
body.bk-skin-console.bk-page-profil .p2-rec-row1,
body.bk-skin-console.bk-page-profil .p2-rec-row2,
body.bk-skin-console.bk-page-profil .p2-hof-item,
body.bk-skin-console.bk-page-profil .p2-tl-item,
body.bk-skin-console.bk-page-profil .p2-club-item {
    border-color: color-mix(in srgb, var(--bk-border) 70%, transparent);
}
body.bk-skin-console.bk-page-profil .p2-rec-meta-it,
body.bk-skin-console.bk-page-profil .p2-tl-yr,
body.bk-skin-console.bk-page-profil .p2-hof-label,
body.bk-skin-console.bk-page-profil .p2-sim-meta,
body.bk-skin-console.bk-page-profil .p2-rec-sum-lbl,
body.bk-skin-console.bk-page-profil .p2-club-period,
body.bk-skin-console.bk-page-profil .p2-chart-yr {
    font-family: var(--sf-mono) !important;
    font-style: normal !important;
    letter-spacing: 0.08em !important;
}
body.bk-skin-console.bk-page-profil .p2-rec-sum-num,
body.bk-skin-console.bk-page-profil .p2-sim-score,
body.bk-skin-console.bk-page-profil .p2-hof-num,
body.bk-skin-console.bk-page-profil .p2-sim-num {
    font-variant-numeric: tabular-nums;
    font-style: normal !important;
}
/* le resume d'onglet devient le bandeau viole de la maquette */
body.bk-skin-console.bk-page-profil .p2-rec-summary {
    background: linear-gradient(135deg, color-mix(in srgb, var(--bk-link) 7%, transparent), transparent);
    border: 1px solid color-mix(in srgb, var(--bk-link) 20%, transparent);
    border-left: 3px solid var(--bk-link);
    border-radius: 10px;
    padding: 12px 16px;
}
/* cartes « athletes similaires » */
body.bk-skin-console.bk-page-profil .p2-sim-card {
    background: var(--bk-bg);
    border: 1px solid var(--bk-border);
    border-radius: 12px;
    transition: transform .18s, border-color .18s;
}
body.bk-skin-console.bk-page-profil .p2-sim-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--bk-link) 45%, var(--bk-border));
}


/* ── « Athletes au meme niveau » : pleine largeur, et RIEN de rogne ──
   La grille d'origine est figee a 4 colonnes ; en dessous de ~950 px,
   les cartes deviennent des bandes de 180 px. On la rend adaptative, et
   surtout on retire les troncatures : `text-overflow: ellipsis` sur un
   nom de club, c'est une donnee que le lecteur ne peut plus lire. */
body.bk-skin-console.bk-page-profil .sf-full {
    max-width: var(--sf-max);
    margin: 20px auto 0 !important;
}
body.bk-skin-console.bk-page-profil .p2-sim-row {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
body.bk-skin-console.bk-page-profil .p2-sim-card {
    background: var(--bk-bg);
    border: 1px solid var(--bk-border);
    border-top: 1px solid var(--bk-border);
    border-radius: 12px;
    padding: 30px 15px 15px;
}
body.bk-skin-console.bk-page-profil .p2-sim-card:hover {
    border-color: color-mix(in srgb, var(--bk-link) 50%, var(--bk-border));
}
body.bk-skin-console.bk-page-profil .p2-sim-ep,
body.bk-skin-console.bk-page-profil .p2-sim-club {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;      /* un nom de club colle ne deborde pas la carte */
}
body.bk-skin-console.bk-page-profil .p2-sim-name {
    font-size: 15.5px !important;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
/* le score etait en absolu a `right:0`, donc colle au bord du cadre */
body.bk-skin-console.bk-page-profil .p2-sim-num { font-family: var(--sf-mono) !important; font-style: normal !important; }
body.bk-skin-console.bk-page-profil .p2-sim-score {
    top: 11px; right: 13px;
    font-family: var(--sf-mono) !important; opacity: .85;
}
body.bk-skin-console.bk-page-profil .p2-sim-section { padding: 0; }
body.bk-skin-console.bk-page-profil .p2-sim-section-title { font-size: 15px !important; }

/* =====================================================================
   7. ACCESSIBILITE ET CONFORT
   ===================================================================== */
body.bk-skin-console.bk-page-profil .p2-rec-tab:focus-visible,
body.bk-skin-console.bk-page-profil .p2-more-tab:focus-visible,
body.bk-skin-console.bk-page-profil .p2-actions button:focus-visible,
body.bk-skin-console.bk-page-profil .p2-lead-link:focus-visible {
    outline: 2px solid var(--bk-link);
    outline-offset: 2px;
    border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
    body.bk-skin-console.bk-page-profil * {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* =====================================================================
   8. TELEPHONE
   Le corps de page ne recoit JAMAIS `overflow-x:hidden` : `hidden` ne range
   pas ce qui deborde, il le COUPE. On reduit les paddings, c'est tout.
   ===================================================================== */
@media (max-width: 900px) {
    body.bk-skin-console.bk-page-profil .p2-bio-text { columns: 1; }
}
@media (max-width: 900px) {
    /* Neuf boutons d'action dans une barre collante mangeraient la moitie de
       l'ecran d'un telephone. La barre redevient un bloc normal, et les
       actions reprennent leur retour a la ligne : rien n'est retire, tout
       reste atteignable au doigt. */
    body.bk-skin-console.bk-page-profil .sf-bar { position: static; min-height: 0; }
    body.bk-skin-console.bk-page-profil .sf-bar .p2-actions {
        margin: 6px 0 0 !important;
        justify-content: center !important;
    }
    body.bk-skin-console.bk-page-profil .sf-act { justify-content: center; }
    /* ⚠ SUR TELEPHONE, LE PANNEAU NE FLOTTE PLUS : IL POUSSE.
       En position absolue, mesure a 390 px : le panneau elargissait la page
       a 442 px (un element absolu n'est pas rogne, il etend le document) et
       ses deux derniers boutons se retrouvaient RECOUVERTS — donc
       inatteignables au doigt. Depli dans le flux : ni debordement, ni
       superposition, et une cible tactile pleine largeur. */
    body.bk-skin-console.bk-page-profil .sf-menu { width: 100%; }
    body.bk-skin-console.bk-page-profil .sf-menu > summary { text-align: center; }
    body.bk-skin-console.bk-page-profil .sf-menu-box {
        position: static; width: 100%; min-width: 0;
        margin-top: 6px; box-shadow: none;
    }
    /* le bascule clair/sombre repasse dans le flux : en absolu, il recouvrait
       la plaque de rue sur un ecran etroit */
    body.bk-skin-console.bk-page-profil .p2-cover .p2-toggles {
        position: static;
        margin-bottom: 10px;
        text-align: right;
    }
}
@media (max-width: 700px) {
    body.bk-skin-console.bk-page-profil { --sf-pad: 14px; }
    body.bk-skin-console.bk-page-profil .p2-cover { padding: 22px 16px 20px; border-radius: 14px; }
    body.bk-skin-console.bk-page-profil .p2-grid { gap: 16px; }
    /* 16 px minimum sur les champs : en dessous, iOS zoome tout seul a la
       mise au point et ne dezoome jamais. */
    body.bk-skin-console.bk-page-profil input,
    body.bk-skin-console.bk-page-profil select,
    body.bk-skin-console.bk-page-profil textarea { font-size: 16px; }
}

/* ── choix de la population de reference (profil d'aptitudes) ───────
   Une note absolue ne dit rien : ces trois boutons changent le « par
   rapport a qui ». Le libelle sous le graphique rappelle toujours lequel
   est actif — un chiffre comparatif sans sa reference est illisible.
   ⚠ `!important` : le theme personnalise du site (core/theme.php) colore
   les <button> en dur ; sans ca ces trois-la ressortent en boutons
   systeme blancs au milieu d'une carte sombre. */
body.bk-skin-console.bk-page-profil .sf-apt-ref {
    display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px;
}
body.bk-skin-console.bk-page-profil .sf-apt-refb {
    font-family: var(--sf-mono) !important;
    font-size: 9px !important; letter-spacing: .09em; text-transform: uppercase;
    background: transparent !important;
    border: 1px solid var(--bk-border) !important;
    color: var(--bk-text-4) !important;
    padding: 5px 10px !important; border-radius: 100px !important;
    cursor: pointer; transition: .16s; box-shadow: none !important;
}
body.bk-skin-console.bk-page-profil .sf-apt-refb:hover {
    color: var(--bk-text-2) !important; border-color: var(--bk-text-4) !important;
}
body.bk-skin-console.bk-page-profil .sf-apt-refb.on {
    background: color-mix(in srgb, var(--bk-link) 13%, transparent) !important;
    border-color: color-mix(in srgb, var(--bk-link) 50%, transparent) !important;
    color: var(--bk-link) !important;
}
body.bk-skin-console.bk-page-profil .sf-apt-refb:focus-visible {
    outline: 2px solid var(--bk-link); outline-offset: 2px;
}
body.bk-skin-console.bk-page-profil .sf-apt-etat {
    font-family: var(--sf-mono); font-size: 9.5px; line-height: 1.55;
    color: var(--bk-text-4); margin-bottom: 10px;
}
body.bk-skin-console.bk-page-profil .sf-apt-etat b { color: var(--bk-text-2); }

/* ── POSITIONNEMENT (carte C) ───────────────────────────────────────
   Une barre par echelon : club, ancien club, France. La barre montre la
   part de pratiquants devances, le repere blanc marque sa position.
   ⚠ Pas de quatrieme barre « Europe » : la base n'a aucune donnee
   europeenne, et une barre vide se lirait comme un mauvais classement. */
body.bk-skin-console.bk-page-profil .sf-pos-ep {
    font-family: var(--sf-mono); font-size: 10px; letter-spacing: .06em;
    color: var(--bk-text-4); margin-bottom: 14px;
}
body.bk-skin-console.bk-page-profil .sf-pos-ep b { color: var(--bk-text-2); }
body.bk-skin-console.bk-page-profil .sf-pos-etat {
    font-family: var(--sf-mono); font-size: 10px; color: var(--bk-text-4);
}
body.bk-skin-console.bk-page-profil .sf-pos-r { margin-bottom: 15px; }
body.bk-skin-console.bk-page-profil .sf-pos-r .t {
    display: flex; justify-content: space-between; gap: 10px;
    font-size: 11.5px; margin-bottom: 6px;
}
body.bk-skin-console.bk-page-profil .sf-pos-r .t b { font-weight: 600; }
body.bk-skin-console.bk-page-profil .sf-pos-r .t span {
    font-family: var(--sf-mono); font-size: 10.5px; color: var(--bk-text-2); white-space: nowrap;
}
body.bk-skin-console.bk-page-profil .sf-pos-r .t .dim { color: var(--bk-text-4); }
body.bk-skin-console.bk-page-profil .sf-pos-r .tr {
    height: 6px; border-radius: 4px; background: var(--bk-surface-3);
    overflow: hidden; position: relative;
}
body.bk-skin-console.bk-page-profil .sf-pos-r .tr i { display: block; height: 100%; border-radius: 4px; }
body.bk-skin-console.bk-page-profil .sf-pos-r .tr .me {
    position: absolute; top: -3px; width: 2px; height: 12px;
    background: var(--bk-text); border-radius: 2px;
}
body.bk-skin-console.bk-page-profil .sf-pos-r .s {
    font-family: var(--sf-mono); font-size: 9px; color: var(--bk-text-4); margin-top: 5px;
}
body.bk-skin-console.bk-page-profil .sf-pos-note {
    margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--bk-border);
    font-size: 11px; line-height: 1.55; color: var(--bk-text-4);
}
body.bk-skin-console.bk-page-profil .sf-pos-note b { color: var(--bk-text-3); }

/* ── ACTIVITE (carte E) ─────────────────────────────────────────────
   Un mois sans competition reste VIDE : c'est une information, pas un
   trou a combler par une couleur de remplissage. */
body.bk-skin-console.bk-page-profil .sf-cal-grid {
    display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px;
}
body.bk-skin-console.bk-page-profil .sf-cal-grid .m {
    aspect-ratio: 1; border-radius: 5px; display: grid; place-items: center;
    font-family: var(--sf-mono); font-size: 8px; color: var(--bk-text-3);
    transition: transform .15s;
}
body.bk-skin-console.bk-page-profil .sf-cal-grid .m:hover { transform: scale(1.14); }
body.bk-skin-console.bk-page-profil .sf-cal-lg {
    display: flex; align-items: center; gap: 7px; margin-top: 11px;
    font-family: var(--sf-mono); font-size: 9px; color: var(--bk-text-4); letter-spacing: .08em;
}
body.bk-skin-console.bk-page-profil .sf-cal-lg i {
    width: 11px; height: 11px; border-radius: 3px; display: block;
}

/* ── LECTURE DE LA FICHE (carte F) ──────────────────────────────────
   Un chiffre qu'on ne sait pas lire ne sert a rien : cette notice
   n'est pas decorative. */
body.bk-skin-console.bk-page-profil .sf-methodo-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px;
}
body.bk-skin-console.bk-page-profil .sf-methodo-grid .t {
    font-family: var(--sf-mono); font-size: 9.5px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--bk-link); margin-bottom: 6px;
}
body.bk-skin-console.bk-page-profil .sf-methodo-grid .d {
    font-size: 12.5px; line-height: 1.55; color: var(--bk-text-3);
}
body.bk-skin-console.bk-page-profil .sf-methodo-grid .d b { color: var(--bk-text-2); }

/* =====================================================================
   9. IMPRESSION — la fiche part souvent en PDF
   ===================================================================== */
@media print {
    body.bk-skin-console.bk-page-profil .p2-cover::after { display: none; }
    body.bk-skin-console.bk-page-profil .p2-block,
    body.bk-skin-console.bk-page-profil .p2-bio,
    body.bk-skin-console.bk-page-profil .p2-cover { break-inside: avoid; }
}

/* ── LECTURES DE LA COURBE (4 modes) ────────────────────────────────
   Les memes donnees, regardees autrement. La legende sous le graphique
   dit toujours ce qu'on regarde : un graphique dont on ignore la lecture
   ne vaut rien. */
body.bk-skin-console.bk-page-profil .sf-chart-modes {
    display: flex; gap: 5px; flex-wrap: wrap; margin: 0 0 12px;
}
body.bk-skin-console.bk-page-profil .sf-chart-mode {
    font-family: var(--sf-mono) !important; font-size: 9.5px !important;
    letter-spacing: .09em; text-transform: uppercase;
    background: transparent !important; border: 1px solid var(--bk-border) !important;
    color: var(--bk-text-4) !important; padding: 6px 12px !important;
    border-radius: 100px !important; cursor: pointer; transition: .16s;
}
body.bk-skin-console.bk-page-profil .sf-chart-mode:hover {
    color: var(--bk-text-2) !important; border-color: var(--bk-text-4) !important;
}
body.bk-skin-console.bk-page-profil .sf-chart-mode.on {
    background: color-mix(in srgb, var(--bk-link) 13%, transparent) !important;
    border-color: color-mix(in srgb, var(--bk-link) 50%, transparent) !important;
    color: var(--bk-link) !important;
}
body.bk-skin-console.bk-page-profil .sf-chart-note {
    font-family: var(--sf-mono); font-size: 9.5px; line-height: 1.55;
    color: var(--bk-text-4); margin-top: 10px;
}

/* ── CALENDRIER DES COMPETITIONS (carte G) ──────────────────────────
   Une grille annees x mois : toute la carriere d'un coup d'oeil, puis le
   detail date par date, replie par saison. */
body.bk-skin-console.bk-page-profil .sf-cal2-bilan {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px; margin-bottom: 18px;
}
body.bk-skin-console.bk-page-profil .sf-cal2-kpi {
    background: var(--bk-bg); border: 1px solid var(--bk-border);
    border-radius: 10px; padding: 12px 14px;
}
body.bk-skin-console.bk-page-profil .sf-cal2-kpi .v {
    font-size: 19px; font-weight: 750; color: var(--bk-text);
    font-variant-numeric: tabular-nums; line-height: 1.1;
}
body.bk-skin-console.bk-page-profil .sf-cal2-kpi .l {
    font-family: var(--sf-mono); font-size: 8.5px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--bk-text-4); margin-top: 6px; line-height: 1.4;
}
body.bk-skin-console.bk-page-profil .sf-cal2-grid { overflow-x: auto; }
body.bk-skin-console.bk-page-profil .sf-cal2-head,
body.bk-skin-console.bk-page-profil .sf-cal2-row {
    display: grid; grid-template-columns: 52px repeat(12, minmax(28px, 1fr)) 42px;
    gap: 3px; align-items: center; min-width: 520px;
}
body.bk-skin-console.bk-page-profil .sf-cal2-head span,
body.bk-skin-console.bk-page-profil .sf-cal2-row b,
body.bk-skin-console.bk-page-profil .sf-cal2-row .t {
    font-family: var(--sf-mono); font-size: 9px; color: var(--bk-text-4);
    text-align: center; letter-spacing: .06em;
}
body.bk-skin-console.bk-page-profil .sf-cal2-head { margin-bottom: 4px; }
body.bk-skin-console.bk-page-profil .sf-cal2-row { margin-bottom: 3px; }
body.bk-skin-console.bk-page-profil .sf-cal2-row b { color: var(--bk-text-3); text-align: left; }
body.bk-skin-console.bk-page-profil .sf-cal2-row .t { color: var(--bk-text-2); font-weight: 700; }
body.bk-skin-console.bk-page-profil .sf-cal2-row .c {
    height: 22px; border-radius: 4px; display: grid; place-items: center;
    font-family: var(--sf-mono); font-size: 9px; color: var(--bk-bg); font-weight: 700;
}
body.bk-skin-console.bk-page-profil .sf-cal2-det { margin-top: 16px; }
body.bk-skin-console.bk-page-profil .sf-cal2-an > summary {
    list-style: none; cursor: pointer; padding: 8px 0;
    border-bottom: 1px solid var(--bk-border);
    font-family: var(--sf-mono); font-size: 10px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--bk-text-3);
}
body.bk-skin-console.bk-page-profil .sf-cal2-an > summary::-webkit-details-marker { display: none; }
body.bk-skin-console.bk-page-profil .sf-cal2-an > summary::before { content: "▸ "; color: var(--bk-link); }
body.bk-skin-console.bk-page-profil .sf-cal2-an[open] > summary::before { content: "▾ "; }
body.bk-skin-console.bk-page-profil .sf-cal2-an > summary:hover { color: var(--bk-link); }
body.bk-skin-console.bk-page-profil .sf-cal2-lignes .l {
    display: grid; grid-template-columns: 66px 1fr auto 1fr; gap: 12px;
    padding: 7px 0; border-bottom: 1px solid rgba(35,43,58,.5); font-size: 12px;
    align-items: baseline;
}
body.bk-skin-console.bk-page-profil .sf-cal2-lignes .d {
    font-family: var(--sf-mono); font-size: 10px; color: var(--bk-text-4);
}
body.bk-skin-console.bk-page-profil .sf-cal2-lignes .p {
    font-family: var(--sf-mono); font-weight: 700; color: var(--bk-text);
}
body.bk-skin-console.bk-page-profil .sf-cal2-lignes .v { color: var(--bk-text-4); }
body.bk-skin-console.bk-page-profil .sf-cal2-note {
    margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--bk-border);
    font-size: 11px; line-height: 1.55; color: var(--bk-text-4);
}
body.bk-skin-console.bk-page-profil .sf-cal2-note b { color: var(--bk-text-3); }
@media (max-width: 700px) {
    body.bk-skin-console.bk-page-profil .sf-cal2-lignes .l { grid-template-columns: 60px 1fr; }
}

/* ── calendrier : case cliquable + panneau du mois ──────────────────
   Un seul panneau ouvert a la fois : deux panneaux ouverts font perdre
   de vue lequel on lit. Recliquer sur la meme case referme. */
body.bk-skin-console.bk-page-profil .sf-cal2-grid .c.cl { cursor: pointer; transition: .14s; }
body.bk-skin-console.bk-page-profil .sf-cal2-grid .c.cl:hover { outline: 1px solid var(--bk-link); }
body.bk-skin-console.bk-page-profil .sf-cal2-grid .c.on {
    outline: 2px solid var(--bk-link); outline-offset: 1px;
}
/* insere ENTRE deux lignes du tableau : il occupe toute la largeur de la
   grille, sous l'annee cliquee */
body.bk-skin-console.bk-page-profil .sf-cal2-panel { display: none; }
body.bk-skin-console.bk-page-profil .sf-cal2-panel.on {
    display: block; margin: 4px 0 10px; padding: 14px 16px;
    background: var(--bk-bg); border: 1px solid var(--bk-border);
    border-left: 3px solid var(--bk-link); border-radius: 10px;
}
body.bk-skin-console.bk-page-profil .sf-cal2-panel .h {
    font-family: var(--sf-mono); font-size: 10px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--bk-text-3); margin-bottom: 10px;
}
body.bk-skin-console.bk-page-profil .sf-cal2-panel .h b { color: var(--bk-link); }
body.bk-skin-console.bk-page-profil .sf-cal2-lignes .e i,
body.bk-skin-console.bk-page-profil .sf-cal2-lignes .p i {
    font-style: normal; font-family: var(--sf-mono); font-size: 9.5px; color: var(--bk-text-4);
}
body.bk-skin-console.bk-page-profil .sf-cal2-lignes .p b { color: var(--bk-link); font-weight: 700; }

/* =====================================================================
   10. LA NAVIGATION PRINCIPALE
   ---------------------------------------------------------------------
   ⚠⚠ ON CIBLE `nav[aria-label="Navigation principale"]`, JAMAIS `nav`.
   `nav` est une balise semantique : cette page en compte CINQ (la barre
   du haut, la nav principale, les onglets « plus », deux navs de pied).
   Trois fichiers du projet s'y sont deja brules — bande vide de 95 px,
   barre tassee, contenu passant sous la nav. La regle est absolue.

   ⚠ Scope `body.bk-skin-console` : la nav n'est rhabillee QUE sur la page
   profil, quand l'habillage est actif. Elle reste intacte partout ailleurs.

   ⚠ Le theme personnalise du site impose `a { color:#bbaf2a !important }`
   (jaune) : seul un `!important` de specificite superieure le bat. C'est
   la raison des `!important` ci-dessous, pas une facilite.

   ⚠ ON NE RETIRE AUCUN LIEN et on ne les met pas dans un menu deroulant :
   seize entrees se replient sur deux rangees, c'est assume. Un scroller
   horizontal cacherait la moitie du menu hors de l'ecran.
   ===================================================================== */
body.bk-skin-console nav[aria-label="Navigation principale"] {
    background: color-mix(in srgb, var(--bk-bg) 88%, transparent) !important;
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--bk-border) !important;
    padding: 8px 20px !important;
    gap: 14px;
    row-gap: 4px;
}
body.bk-skin-console nav[aria-label="Navigation principale"] .logo {
    font-family: var(--sf-mono) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .19em !important;
    text-transform: uppercase;
    color: var(--bk-text) !important;
    text-decoration: none !important;
}
body.bk-skin-console nav[aria-label="Navigation principale"] .nav-links {
    gap: 2px !important;
    row-gap: 3px;
}
body.bk-skin-console nav[aria-label="Navigation principale"] .nav-links > a {
    font-family: "Inter", "Segoe UI", system-ui, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--bk-text-3) !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: .16s;
    white-space: nowrap;
}
body.bk-skin-console nav[aria-label="Navigation principale"] .nav-links > a:hover {
    color: var(--bk-text) !important;
    background: var(--bk-surface-2) !important;
}
/* le lien de la page courante doit se voir : sans repere, on ne sait plus ou on est */
body.bk-skin-console nav[aria-label="Navigation principale"] .nav-links > a.active,
body.bk-skin-console nav[aria-label="Navigation principale"] .nav-links > a[aria-current] {
    color: var(--bk-link) !important;
    background: color-mix(in srgb, var(--bk-link) 12%, transparent) !important;
}
/* la barre du haut (core/nav.php) suit la meme grammaire */
body.bk-skin-console .bk-nav {
    background: color-mix(in srgb, var(--bk-bg) 92%, transparent) !important;
    border-bottom: 1px solid var(--bk-border) !important;
}
body.bk-skin-console .bk-nav a { color: var(--bk-text-3) !important; }
body.bk-skin-console .bk-nav a:hover { color: var(--bk-link) !important; }
/* ⚠ Le bouton de connexion garde sa couleur d'appel : c'est une action,
   pas un lien de navigation. L'aplatir ferait perdre la seule entree
   payante de la barre. */
body.bk-skin-console .bk-nav .btn-auth { color: var(--bk-text) !important; }

/* l'annee et son total ouvrent la saison entiere (pas seulement un mois) */
body.bk-skin-console.bk-page-profil .sf-cal2-row .yr.cl,
body.bk-skin-console.bk-page-profil .sf-cal2-row .t.cl { cursor: pointer; border-radius: 4px; transition: .14s; }
body.bk-skin-console.bk-page-profil .sf-cal2-row .yr.cl:hover,
body.bk-skin-console.bk-page-profil .sf-cal2-row .t.cl:hover { color: var(--bk-link) !important; }
body.bk-skin-console.bk-page-profil .sf-cal2-row .yr.on,
body.bk-skin-console.bk-page-profil .sf-cal2-row .t.on {
    color: var(--bk-link) !important;
    background: color-mix(in srgb, var(--bk-link) 14%, transparent);
}

/* ── CARTE DES LIEUX : pleine largeur ───────────────────────────────
   53 villes dans une colonne de 348 px ne se lisent pas. En pleine
   largeur, la carte devient une piece maitresse au lieu d'une vignette. */
body.bk-skin-console.bk-page-profil .sf-carte .p2-map-wrap {
    height: clamp(360px, 46vh, 560px) !important;
    width: 100% !important;
    border-radius: 12px;
    overflow: hidden;   /* borne les tuiles au cadre, sans rien couper du contenu */
}
body.bk-skin-console.bk-page-profil .sf-carte .p2-map-controls {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px;
}
/* ⚠ Garde-fou tuiles : `img { max-width:100% }` deforme les tuiles d'une
   carte (des images placees au pixel pres) et decale les marqueurs de leur
   ville. Le projet a deja paye cette lecon sur Leaflet. */
body.bk-skin-console.bk-page-profil .sf-carte img,
body.bk-skin-console.bk-page-profil .maplibregl-map img,
body.bk-skin-console.bk-page-profil .leaflet-container img { max-width: none !important; }

/* =====================================================================
   11. ANIMATIONS D'INTERACTION
   ---------------------------------------------------------------------
   Chaque clic doit produire une reponse visible. Sans elle, on ne sait
   pas si le clic a porte, et on reclique — c'est ainsi qu'on ouvre puis
   referme un panneau sans comprendre pourquoi.

   ⚠ TOUT EST COUPE SI `prefers-reduced-motion` EST DEMANDE (bloc en fin
   de section). Une animation n'est jamais assez utile pour l'imposer a
   quelqu'un qui a demande a son systeme de les eviter.

   ⚠ AUCUNE ANIMATION SUR LA HAUTEUR OU LA LARGEUR : `height` force le
   navigateur a recalculer la mise en page a chaque image. On anime
   `opacity` et `transform`, qui se traitent sur le compositeur.
   ===================================================================== */
@keyframes sfApparait   { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes sfDeplie     { from { opacity: 0; transform: translateY(-10px) scaleY(.96); }
                          to   { opacity: 1; transform: none; } }
@keyframes sfFondu      { from { opacity: 0; } to { opacity: 1; } }
@keyframes sfPulse      { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bk-link) 45%, transparent); }
                          100% { box-shadow: 0 0 0 10px transparent; } }

/* panneau du calendrier : il se deplie depuis la ligne cliquee */
body.bk-skin-console.bk-page-profil .sf-cal2-panel.on {
    animation: sfDeplie .26s cubic-bezier(.2, .8, .2, 1);
    transform-origin: top center;
}
/* la case cliquee confirme le clic par une onde breve */
body.bk-skin-console.bk-page-profil .sf-cal2-grid .c.on,
body.bk-skin-console.bk-page-profil .sf-cal2-row .yr.on,
body.bk-skin-console.bk-page-profil .sf-cal2-row .t.on { animation: sfPulse .5s ease-out; }

/* menus deroulants de la barre d'actions */
body.bk-skin-console.bk-page-profil .sf-menu[open] > .sf-menu-box { animation: sfApparait .18s ease-out; }
/* les annees repliables du calendrier */
body.bk-skin-console.bk-page-profil .sf-cal2-an[open] > .sf-cal2-lignes { animation: sfDeplie .24s ease-out; }

/* changement de vue : graphique, radar, positionnement, aptitudes */
body.bk-skin-console.bk-page-profil .sf-anim { animation: sfFondu .3s ease-out; }

/* retour tactile : le bouton s'enfonce. 60 ms, juste assez pour etre senti */
body.bk-skin-console.bk-page-profil .sf-chart-mode:active,
body.bk-skin-console.bk-page-profil .sf-apt-refb:active,
body.bk-skin-console.bk-page-profil .p2-rec-tab:active,
body.bk-skin-console.bk-page-profil .sf-menu > summary:active,
body.bk-skin-console.bk-page-profil .p2-actions button:active,
body.bk-skin-console.bk-page-profil .sf-cal2-grid .c.cl:active { transform: scale(.96); }
body.bk-skin-console.bk-page-profil .sf-chart-mode,
body.bk-skin-console.bk-page-profil .sf-apt-refb,
body.bk-skin-console.bk-page-profil .p2-rec-tab,
body.bk-skin-console.bk-page-profil .sf-menu > summary,
body.bk-skin-console.bk-page-profil .p2-actions button { transition: .16s, transform .06s; }

/* cartes : la reponse au survol devient franche mais courte */
body.bk-skin-console.bk-page-profil .p2-stat,
body.bk-skin-console.bk-page-profil .p2-sim-card,
body.bk-skin-console.bk-page-profil .sf-adv-l { transition: transform .18s, border-color .18s, background .18s; }

@media (prefers-reduced-motion: reduce) {
    body.bk-skin-console.bk-page-profil *,
    body.bk-skin-console.bk-page-profil *::before,
    body.bk-skin-console.bk-page-profil *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* ── « Signaler » : visible sans aucun clic ─────────────────────────
   C'est l'entree du signalement et de la demande de retrait. Elle ne se
   range pas derriere une poignee : quelqu'un qui veut faire retirer sa
   fiche ne doit pas avoir a la chercher. Rouge, bordee, jamais fondue
   dans les actions courantes. */
body.bk-skin-console.bk-page-profil .sf-signaler {
    background: rgba(220, 38, 38, .14) !important;
    border: 1px solid rgba(248, 113, 113, .55) !important;
    color: #fca5a5 !important;
    font-weight: 700 !important;
}
body.bk-skin-console.bk-page-profil .sf-signaler:hover {
    background: #b91c1c !important; color: #fff !important; border-color: #ef4444 !important;
}
body.bk-skin-console.bk-page-profil .sf-signaler:focus-visible {
    outline: 2px solid #ef4444; outline-offset: 2px;
}

/* ── SES ADVERSAIRES ────────────────────────────────────────────────
   Le plateau reconstitue depuis les resultats : ce qu'aucune fiche FFA
   ne donne. Chaque nom mene a sa propre fiche. */
body.bk-skin-console.bk-page-profil .sf-adv-etat {
    font-family: var(--sf-mono); font-size: 10px; color: var(--bk-text-4);
}
body.bk-skin-console.bk-page-profil .sf-adv-kpi {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px; margin-bottom: 20px;
}
body.bk-skin-console.bk-page-profil .sf-adv-kpi > div {
    background: var(--bk-bg); border: 1px solid var(--bk-border);
    border-radius: 10px; padding: 12px 14px;
}
body.bk-skin-console.bk-page-profil .sf-adv-kpi .v {
    font-size: 21px; font-weight: 750; color: var(--bk-text); font-variant-numeric: tabular-nums;
}
body.bk-skin-console.bk-page-profil .sf-adv-kpi .l {
    font-family: var(--sf-mono); font-size: 8.5px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--bk-text-4); margin-top: 6px; line-height: 1.4;
}
body.bk-skin-console.bk-page-profil .sf-adv-t {
    font-family: var(--sf-mono); font-size: 9.5px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--bk-link); margin: 18px 0 10px;
}
body.bk-skin-console.bk-page-profil .sf-adv-riv {
    display: flex; flex-wrap: wrap; gap: 8px;
}
body.bk-skin-console.bk-page-profil .sf-adv-l {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--bk-bg); border: 1px solid var(--bk-border);
    border-radius: 100px; padding: 6px 12px; text-decoration: none !important;
    font-size: 12.5px; color: var(--bk-text-2) !important;
}
body.bk-skin-console.bk-page-profil .sf-adv-l:hover {
    border-color: var(--bk-link); transform: translateY(-2px);
    color: var(--bk-text) !important;
}
body.bk-skin-console.bk-page-profil .sf-adv-l .x {
    font-family: var(--sf-mono); font-size: 10px; color: var(--bk-link); font-weight: 700;
}
body.bk-skin-console.bk-page-profil .sf-adv-c > summary {
    list-style: none; cursor: pointer; padding: 9px 0;
    border-bottom: 1px solid var(--bk-border); font-size: 12.5px; color: var(--bk-text-3);
}
body.bk-skin-console.bk-page-profil .sf-adv-c > summary::-webkit-details-marker { display: none; }
body.bk-skin-console.bk-page-profil .sf-adv-c > summary::before { content: "▸ "; color: var(--bk-link); }
body.bk-skin-console.bk-page-profil .sf-adv-c[open] > summary::before { content: "▾ "; }
body.bk-skin-console.bk-page-profil .sf-adv-c > summary:hover { color: var(--bk-link); }
body.bk-skin-console.bk-page-profil .sf-adv-c > summary b { color: var(--bk-text-2); font-family: var(--sf-mono); font-size: 11px; }
body.bk-skin-console.bk-page-profil .sf-adv-c > summary i { font-style: normal; color: var(--bk-text); font-weight: 700; font-family: var(--sf-mono); }
body.bk-skin-console.bk-page-profil .sf-adv-c > summary .nb {
    font-family: var(--sf-mono); font-size: 9px; color: var(--bk-text-4); margin-left: 6px;
}
body.bk-skin-console.bk-page-profil .sf-adv-c[open] > .sf-adv-lignes { animation: sfDeplie .24s ease-out; }
body.bk-skin-console.bk-page-profil .sf-adv-lignes .l {
    display: grid; grid-template-columns: 46px 1fr auto 130px; gap: 12px;
    padding: 7px 0; border-bottom: 1px solid rgba(35,43,58,.5);
    font-size: 12px; text-decoration: none !important; color: var(--bk-text-2) !important;
    align-items: baseline;
}
body.bk-skin-console.bk-page-profil .sf-adv-lignes .l:hover { background: color-mix(in srgb, var(--bk-link) 8%, transparent); }
body.bk-skin-console.bk-page-profil .sf-adv-lignes .p { font-family: var(--sf-mono); font-size: 10px; color: var(--bk-link); }
body.bk-skin-console.bk-page-profil .sf-adv-lignes .f { font-family: var(--sf-mono); font-weight: 700; color: var(--bk-text); }
body.bk-skin-console.bk-page-profil .sf-adv-lignes .t { font-family: var(--sf-mono); font-size: 9.5px; color: var(--bk-text-4); }
body.bk-skin-console.bk-page-profil .sf-adv-note {
    margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--bk-border);
    font-size: 11px; line-height: 1.55; color: var(--bk-text-4);
}
@media (max-width: 700px) {
    body.bk-skin-console.bk-page-profil .sf-adv-lignes .l { grid-template-columns: 40px 1fr auto; }
    body.bk-skin-console.bk-page-profil .sf-adv-lignes .t { display: none; }
}

/* ─── Adversaires : couverture annoncee + sorties SANS plateau ────────────────
   ⚠ Une course sans concurrent retrouve n'est pas masquee, elle est affichee
   en retrait avec sa raison. Masquer les trous fait croire qu'il n'y en a pas
   — et le lecteur compte alors 114 courses au lieu de 249.
   Aucune couleur de theme en dur : `theme-control.css` reste la source de
   verite, on ne manipule ici que des tokens. */
body.bk-skin-console.bk-page-profil .sf-adv-kpi .v small {
    font-size: 13px; font-weight: 600; color: var(--bk-text-3);
}
body.bk-skin-console.bk-page-profil .sf-adv-jauge {
    position: relative; height: 26px; border-radius: 4px; margin: 14px 0 4px;
    background: color-mix(in srgb, var(--bk-text-4) 16%, transparent);
    overflow: hidden; display: flex; align-items: center;
}
body.bk-skin-console.bk-page-profil .sf-adv-jauge i {
    position: absolute; inset: 0 auto 0 0;
    background: color-mix(in srgb, var(--bk-link) 34%, transparent);
    transition: width .6s cubic-bezier(.2,.7,.3,1);
}
body.bk-skin-console.bk-page-profil .sf-adv-jauge b {
    position: relative; padding: 0 10px; font-family: var(--sf-mono);
    font-size: 11px; font-weight: 600; color: var(--bk-text-2);
}
body.bk-skin-console.bk-page-profil .sf-adv-t em {
    font-style: normal; font-weight: 400; color: var(--bk-text-4); font-size: 11.5px;
}

/* la saison, repliable */
body.bk-skin-console.bk-page-profil .sf-adv-an { margin: 10px 0; }
body.bk-skin-console.bk-page-profil .sf-adv-an > summary {
    cursor: pointer; list-style: none; padding: 8px 10px; border-radius: 4px;
    display: flex; align-items: center; gap: 12px;
    background: color-mix(in srgb, var(--bk-text-4) 10%, transparent);
    border-left: 3px solid color-mix(in srgb, var(--bk-link) 55%, transparent);
}
body.bk-skin-console.bk-page-profil .sf-adv-an > summary::-webkit-details-marker { display: none; }
body.bk-skin-console.bk-page-profil .sf-adv-an > summary b {
    font-family: var(--sf-mono); font-size: 14px; color: var(--bk-text);
}
body.bk-skin-console.bk-page-profil .sf-adv-an > summary .nb,
body.bk-skin-console.bk-page-profil .sf-adv-an > summary .ok {
    font-family: var(--sf-mono); font-size: 10.5px; color: var(--bk-text-3);
}
body.bk-skin-console.bk-page-profil .sf-adv-an > summary .ok { margin-left: auto; color: var(--bk-link); }
body.bk-skin-console.bk-page-profil .sf-adv-an[open] > summary { margin-bottom: 6px; }
body.bk-skin-console.bk-page-profil .sf-adv-an > .sf-adv-c { margin-left: 12px; }

/* une sortie sans plateau : visible, mais en retrait */
body.bk-skin-console.bk-page-profil .sf-adv-c.est-vide {
    padding: 7px 10px; margin: 3px 0 3px 12px; border-radius: 4px;
    border-left: 2px dashed color-mix(in srgb, var(--bk-text-4) 55%, transparent);
    background: color-mix(in srgb, var(--bk-text-4) 5%, transparent);
}
body.bk-skin-console.bk-page-profil .sf-adv-c.est-vide .sf-adv-tete {
    font-size: 12px; color: var(--bk-text-3); display: flex; flex-wrap: wrap;
    align-items: baseline; gap: 6px;
}
body.bk-skin-console.bk-page-profil .sf-adv-c.est-vide .sf-adv-tete b {
    font-family: var(--sf-mono); font-size: 11px; color: var(--bk-text-3);
}
body.bk-skin-console.bk-page-profil .sf-adv-c.est-vide .sf-adv-tete i {
    font-style: normal; font-family: var(--sf-mono); color: var(--bk-text-2);
}
body.bk-skin-console.bk-page-profil .sf-adv-c.est-vide .nb {
    margin-left: auto; font-family: var(--sf-mono); font-size: 10px;
    color: var(--bk-text-4); white-space: nowrap;
}
body.bk-skin-console.bk-page-profil .sf-adv-c.est-vide .sf-adv-pq {
    margin: 4px 0 0; font-size: 11px; line-height: 1.45; color: var(--bk-text-4);
}
/* recuperable (r-a) vs definitivement absent (r-b) : deux etats differents,
   ils ne doivent pas se lire pareil */
body.bk-skin-console.bk-page-profil .sf-adv-c.est-vide.r-a {
    border-left-color: color-mix(in srgb, var(--bk-link) 60%, transparent);
}

/* ─── LE NIVEAU DE CHAQUE PERFORMANCE ────────────────────────────────────────
   ⚠ Ces classes (`n-I`, `n-N`, `n-IR`, `n-R`, `n-D`) etaient produites par
   `nivCls()` depuis le debut mais n'avaient AUCUN style nulle part : les codes
   s'affichaient en gris, indistinguables. Une fonction qui fabrique une classe
   sans feuille en face ne fait rien du tout.

   Couleurs = celles du projet (index.php l.136-139), pas des teintes inventees :
   International fuchsia · National rose · Regional cyan · Departemental orange.
   ⚠ IR = INTER-REGIONAL, il se place SOUS le national — il ne peut donc pas
   porter le fuchsia de l'international (piege : ca commence par un « I »).
   Il a sa propre teinte, violette.

   ⚠ CE NE SONT PAS DES COULEURS DE THEME : elles portent une information et
   restent identiques en clair comme en sombre. `theme-control.css` garde la
   main sur le decor ; seule la lisibilite du texte est ajustee en mode clair. */
body.bk-skin-console.bk-page-profil .sf-nv {
    display: inline-block; margin-left: 6px; padding: 1px 5px; border-radius: 3px;
    font-family: var(--sf-mono); font-size: 9.5px; font-weight: 700;
    line-height: 1.5; letter-spacing: .04em; vertical-align: middle;
    border: 1px solid; white-space: nowrap;
}
body.bk-skin-console.bk-page-profil .sf-nv.n-I  { background: #c026d320; border-color: #c026d3; color: #e879f9; }
body.bk-skin-console.bk-page-profil .sf-nv.n-N  { background: #e11d4820; border-color: #e11d48; color: #fb7185; }
body.bk-skin-console.bk-page-profil .sf-nv.n-IR { background: #8b5cf620; border-color: #8b5cf6; color: #a78bfa; }
body.bk-skin-console.bk-page-profil .sf-nv.n-R  { background: #0891b220; border-color: #0891b2; color: #22d3ee; }
body.bk-skin-console.bk-page-profil .sf-nv.n-D  { background: #f9731620; border-color: #f97316; color: #fb923c; }

/* mode clair : memes familles, texte assombri pour rester lisible sur creme */
body.bk-skin-console.bk-page-profil.p2-light .sf-nv.n-I  { color: #86198f; background: #c026d316; }
body.bk-skin-console.bk-page-profil.p2-light .sf-nv.n-N  { color: #9f1239; background: #e11d4816; }
body.bk-skin-console.bk-page-profil.p2-light .sf-nv.n-IR { color: #5b21b6; background: #8b5cf616; }
body.bk-skin-console.bk-page-profil.p2-light .sf-nv.n-R  { color: #155e75; background: #0891b216; }
body.bk-skin-console.bk-page-profil.p2-light .sf-nv.n-D  { color: #9a3412; background: #f9731616; }

/* ⚠ ESTIME != HOMOLOGUE. Le « ≈ » et le trait pointille disent que le niveau est
   deduit du bareme, pas obtenu sur le terrain. Sans ce signe, une interpolation
   se lit comme une qualification. */
body.bk-skin-console.bk-page-profil .sf-nv.est { border-style: dashed; opacity: .82; }
body.bk-skin-console.bk-page-profil .sf-nv.est i { font-style: normal; margin-left: 2px; opacity: .75; }

/* une course dont on ne peut pas certifier l'identite */
body.bk-skin-console.bk-page-profil .sf-adv-c.est-probable > summary .nb em {
    font-style: normal; color: #fbbf24;
}
body.bk-skin-console.bk-page-profil .sf-adv-c.est-probable {
    border-left: 2px solid #fbbf2455; padding-left: 8px;
}
/* « ils couraient une autre course » : ce n'est pas un trou de donnees */
body.bk-skin-console.bk-page-profil .sf-adv-c.est-vide.r-c {
    border-left-color: #fbbf2477;
}

/* niveau de CARRIERE (liste des habitues) : meme code couleur, mais plein et
   sans « ≈ » — il ne decrit pas une performance, il resume un parcours. */
body.bk-skin-console.bk-page-profil .sf-nv-car { margin-left: 8px; }

/* ─── HYPOTHESES : plusieurs courses restent possibles ───────────────────────
   ⚠ Elles sont montrees SEPAREMENT, jamais fusionnees. Une version precedente
   aplatissait tout : l'audit y a trouve 35 paires d'athletes a la meme place et
   66 classements contradictoires — parce que ces gens couraient des courses
   differentes. Un bloc par hypothese, et le lecteur tranche (ou pas). */
body.bk-skin-console.bk-page-profil .sf-adv-hyp {
    margin: 8px 0 0; padding: 8px 10px; border-radius: 4px;
    background: color-mix(in srgb, var(--bk-text-4) 7%, transparent);
    border-left: 2px solid #fbbf2455;
}
body.bk-skin-console.bk-page-profil .sf-adv-hyp .t {
    font-family: var(--sf-mono); font-size: 10.5px; color: #fbbf24;
    margin-bottom: 5px; letter-spacing: .04em;
}
body.bk-skin-console.bk-page-profil .sf-adv-hyp .t span { color: var(--bk-text-4); }
body.bk-skin-console.bk-page-profil .sf-adv-an > summary .ok .amb { color: #fbbf24; font-weight: 600; }

/* la preuve par le vent : on dit COMMENT on sait */
body.bk-skin-console.bk-page-profil .sf-preuve {
    display: inline-block; margin-left: 6px; padding: 1px 5px; border-radius: 3px;
    font-family: var(--sf-mono); font-size: 9px; letter-spacing: .04em;
    background: color-mix(in srgb, var(--bk-link) 14%, transparent);
    color: var(--bk-text-3); border: 1px solid color-mix(in srgb, var(--bk-link) 34%, transparent);
}

/* ─── DEMARRAGE MANUEL DE LA RECHERCHE D'ADVERSAIRES ─────────────────────────
   Le calcul fait une requete par sortie (249 pour une longue carriere). Le
   declencher a chaque ouverture de fiche ferait payer a tous les visiteurs un
   travail que la plupart ne regarderont pas. Le bouton dit ce qu'il va chercher
   ET ce qu'il coute — un bouton muet se clique par curiosite, pas par choix. */
body.bk-skin-console.bk-page-profil .sf-adv-go {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    padding: 4px 0 2px;
}
body.bk-skin-console.bk-page-profil .sf-adv-go p {
    flex: 1 1 340px; min-width: 0; margin: 0;
    font-size: 12.5px; line-height: 1.55; color: var(--bk-text-3);
}
body.bk-skin-console.bk-page-profil .sf-adv-go p b { color: var(--bk-text-2); font-weight: 600; }
body.bk-skin-console.bk-page-profil .sf-adv-btn {
    flex: 0 0 auto; cursor: pointer;
    padding: 10px 18px; border-radius: 4px;
    font-family: var(--sf-mono); font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
    color: var(--bk-link);
    background: color-mix(in srgb, var(--bk-link) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--bk-link) 55%, transparent);
    transition: background .18s, transform .12s, border-color .18s;
    min-height: 42px;   /* cible tactile */
}
body.bk-skin-console.bk-page-profil .sf-adv-btn:hover {
    background: color-mix(in srgb, var(--bk-link) 22%, transparent);
    border-color: var(--bk-link);
}
body.bk-skin-console.bk-page-profil .sf-adv-btn:active { transform: translateY(1px) scale(.99); }
body.bk-skin-console.bk-page-profil .sf-adv-cout {
    flex: 0 0 auto; font-family: var(--sf-mono); font-size: 9.5px;
    color: var(--bk-text-4); letter-spacing: .04em;
}
@media (max-width: 700px) {
    body.bk-skin-console.bk-page-profil .sf-adv-btn { flex: 1 1 100%; }
}

/* ─── PROFIL D'APTITUDES SANS RADAR (moins de 3 familles) ────────────────────
   ⚠ Le radar etait supprime quand il n'avait pas assez de branches — et la
   mesure disparaissait avec lui. Ici on garde les memes chiffres, en liste,
   avec la raison ecrite. Une donnee qu'on ne sait pas DESSINER se lit quand
   meme. */
body.bk-skin-console.bk-page-profil .sf-apt-min .sf-apt-lg .li {
    display: grid; grid-template-columns: auto auto; gap: 2px 10px;
    padding: 9px 0; border-bottom: 1px solid var(--bk-border);
}
body.bk-skin-console.bk-page-profil .sf-apt-min .sf-apt-lg .li:last-of-type { border-bottom: 0; }
body.bk-skin-console.bk-page-profil .sf-apt-min .sf-apt-lg .k {
    font-family: var(--sf-mono); font-size: 10.5px; letter-spacing: .1em;
    color: var(--bk-text-3);
}
body.bk-skin-console.bk-page-profil .sf-apt-min .sf-apt-lg .v {
    font-family: var(--sf-mono); font-size: 18px; font-weight: 700;
    color: var(--bk-link); text-align: right;
}
body.bk-skin-console.bk-page-profil .sf-apt-min .sf-apt-lg .v i {
    font-style: normal; font-size: 10px; color: var(--bk-text-4); margin-left: 2px;
}
body.bk-skin-console.bk-page-profil .sf-apt-min .sf-apt-lg .d {
    grid-column: 1 / -1; font-size: 11.5px; color: var(--bk-text-4); line-height: 1.45;
}
body.bk-skin-console.bk-page-profil .sf-apt-note {
    margin: 10px 0 0; font-size: 11px; line-height: 1.5; color: var(--bk-text-4);
}