/* =====================================================================
site-sf.css — L'HABILLAGE « CONSOLE » SUR TOUT LE SITE
---------------------------------------------------------------------
Meme principe que `profil-sf.css`, etendu aux autres pages : une COUCHE
posee par-dessus, chargee uniquement quand l'habillage est actif. Aucun
HTML n'est reecrit, aucun fichier existant n'est modifie. Revenir en
arriere = `?skin=classique` ou le reglage du panel, et le
disparait. C'est la seule facon honnete de rehabiller un site de
8 500 lignes qui contient ~5 000 couleurs en dur.
⚠⚠ CETTE FEUILLE N'ENLEVE AUCUNE INFORMATION.
Interdits ici, et verifies : `display:none`, `visibility:hidden`,
`max-height` sur du contenu, `text-overflow:ellipsis`, `opacity:0`,
`overflow:hidden` sur un conteneur de texte. Le projet a deja retire
pour cette raison un degrade de bord de tableau (il recouvrait les
derniers caracteres d'une colonne de chronos) et un `overflow-x:hidden`
sur le corps de page (il COUPAIT ce qui depassait, sans barre pour
aller le chercher).
⚠ LA COULEUR NE S'ECRIT PAS SUR LES ELEMENTS.
On REDEFINIT LES TOKENS une seule fois (bloc 1), et tout le reste lit
`var(--bk-*)`. C'est le mecanisme de `theme-control.css`, qui reste la
SOURCE DE VERITE du clair/sombre. Ecrire un hex sur un element casse le
mode clair sans qu'on comprenne d'ou ca vient.
⚠⚠ NE JAMAIS CIBLER `nav` TOUT COURT.
Le site en compte au moins quatre par page (barre du haut, nav
principale, colonnes du mega-menu). Trois fichiers l'ont deja fait et
ont produit trois bugs sans rapport apparent : une bande noire de 95 px,
une barre tassee sur une ligne, et le contenu passant sous la nav.
On cible `nav[aria-label="Navigation principale"]`.
===================================================================== */
/* =====================================================================
1. LA PALETTE — l'unique endroit ou une couleur est ecrite
---------------------------------------------------------------------
Ce bloc vivait dans `profil-sf.css`, scope a la page profil. Il est
remonte ICI pour que le site entier partage la meme palette, et pour
qu'elle n'existe QU'A UN SEUL ENDROIT : deux definitions finiraient par
diverger, et on aurait un profil et un accueil de teintes differentes.
⚠ 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 le site illisible.
===================================================================== */
body.bk-skin-console:not(.p2-light) {
--bk-bg: #0a0d14; /* fond de page et creux des tuiles */
--bk-surface-1: #0d1117; /* les cartes */
--bk-surface-2: #161b22; /* surfaces surelevees */
--bk-surface-3: #1c2230; /* pistes, jauges, cases vides */
--bk-border: #232b3a;
--bk-border-soft: #30363d;
--bk-text: #e6edf7;
--bk-text-2: #c9d1d9;
--bk-text-3: #8b96ab;
--bk-text-4: #5f6b80;
--bk-link: #a78bfa;
background: #0a0d14;
}
/* Tokens de MESURE — aucune couleur. Partages par cette feuille et par
`profil-sf.css`, qui les lit par heritage. */
body.bk-skin-console {
--sf-mono: ui-monospace, "Cascadia Code", "JetBrains Mono", Consolas, monospace;
--sf-r: 14px; /* rayon des cartes */
--sf-pad: 20px; /* padding interne des cartes */
--sf-gap: 18px;
/* ⚠ PLEINE LARGEUR. Plafonnee a 1180 px, une page laissait deux bandes
vides de 130 px sur un ecran de 1440. On borne seulement pour garder
une mesure de lecture correcte sur tres grand ecran. */
--sf-max: min(1800px, calc(100vw - 48px));
}
/* =====================================================================
2. LE CADRE — largeur, respiration, typographie
===================================================================== */
body.bk-skin-console .container,
body.bk-skin-console #bk-contenu {
max-width: var(--sf-max);
}
body.bk-skin-console h1,
body.bk-skin-console h2,
body.bk-skin-console h3 {
letter-spacing: -.015em;
}
/* les titres de section prennent le ton « console » : petites capitales
monospace, comme les rubriques du profil */
body.bk-skin-console .section-title,
body.bk-skin-console .bk-sec > h2:first-child,
body.bk-skin-console .chart-card > h3:first-child {
font-family: var(--sf-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--bk-text-3);
}
/* =====================================================================
3. LES CARTES — un seul langage visuel pour toutes les sections
===================================================================== */
body.bk-skin-console .chart-card,
body.bk-skin-console .card,
body.bk-skin-console .ath-card,
body.bk-skin-console .stat-card,
body.bk-skin-console .bk-sec {
border-radius: var(--sf-r);
border: 1px solid var(--bk-border);
background: var(--bk-surface-1);
box-shadow: none;
}
body.bk-skin-console .chart-card,
body.bk-skin-console .bk-sec {
padding: var(--sf-pad);
}
/* la carte se souleve au survol, sans jamais bouger la mise en page
(transform seul : `margin`/`padding` provoqueraient un reflow) */
body.bk-skin-console .ath-card,
body.bk-skin-console .chart-card {
transition: transform .16s ease, border-color .16s ease;
}
body.bk-skin-console .ath-card:hover,
body.bk-skin-console .chart-card:hover {
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--bk-link) 45%, var(--bk-border));
}
/* les compteurs en chiffres : monospace, comme un tableau de bord */
body.bk-skin-console .stat-card .num,
body.bk-skin-console .stat-card .v,
body.bk-skin-console .bkx-num {
font-family: var(--sf-mono);
font-variant-numeric: tabular-nums;
letter-spacing: -.02em;
}
/* =====================================================================
4. LES TABLEAUX — 177 dans la page, c'est la brique la plus visible
⚠ Le motif « 3 tables » du projet (entete / donnees / entete) est
respecte : on ne touche pas a la structure, seulement a l'apparence.
===================================================================== */
body.bk-skin-console .table-wrap {
border-radius: 10px;
border: 1px solid var(--bk-border);
/* ⚠ `overflow-x: auto` et RIEN d'autre : un degrade de bord recouvrirait
les derniers caracteres de la colonne de droite — des chronos et des
noms de clubs. Le projet l'a deja retire pour cette raison. */
overflow-x: auto;
}
body.bk-skin-console .bk-table th {
font-family: var(--sf-mono);
font-size: 10px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--bk-text-3);
background: var(--bk-surface-2);
}
body.bk-skin-console .bk-table td {
font-size: 13px;
color: var(--bk-text-2);
}
/* une ligne sur deux, pour suivre une ligne longue du regard */
body.bk-skin-console .bk-table tr:nth-child(even) td {
background: color-mix(in srgb, var(--bk-text-4) 5%, transparent);
}
body.bk-skin-console .bk-table tr:hover td {
background: color-mix(in srgb, var(--bk-link) 9%, transparent);
}
/* les nombres alignes sur la virgule : illisible autrement */
body.bk-skin-console .bk-table td.num,
body.bk-skin-console .bk-table td .perf {
font-family: var(--sf-mono);
font-variant-numeric: tabular-nums;
}
/* =====================================================================
5. LES COMMANDES — boutons, onglets, pagination, recherche
⚠ 42 px de haut minimum : c'est la cible tactile en dessous de laquelle
on rate le bouton au doigt.
===================================================================== */
body.bk-skin-console .bkx-btn,
body.bk-skin-console .pager a,
body.bk-skin-console .pager span,
body.bk-skin-console .section-tabs a,
body.bk-skin-console .view-toggle button {
font-family: var(--sf-mono);
font-size: 11px;
letter-spacing: .05em;
border-radius: 4px;
transition: background .16s, border-color .16s, transform .1s;
}
body.bk-skin-console .bkx-btn:active,
body.bk-skin-console .pager a:active {
transform: translateY(1px) scale(.99);
}
body.bk-skin-console .pager a:hover {
border-color: var(--bk-link);
color: var(--bk-link);
}
/* ⚠ 16 px MINIMUM sur les champs : en dessous, iOS zoome tout seul a la
mise au point ET NE DEZOOME JAMAIS. C'est le « bug responsive » le plus
souvent signale sur ce projet. La liste des types doit rester COMPLETE :
l'oubli de `textarea`, `number`, `tel` avait laisse le formulaire de
contact et la saisie de performance zoomer. */
@media (max-width: 820px) {
body.bk-skin-console input[type="text"],
body.bk-skin-console input[type="search"],
body.bk-skin-console input[type="email"],
body.bk-skin-console input[type="number"],
body.bk-skin-console input[type="tel"],
body.bk-skin-console input[type="url"],
body.bk-skin-console input[type="date"],
body.bk-skin-console input[type="password"],
body.bk-skin-console select,
body.bk-skin-console textarea {
font-size: 16px;
}
}
/* =====================================================================
6. LA NAVIGATION — cf. l'avertissement en tete : jamais `nav` tout court
===================================================================== */
body.bk-skin-console nav[aria-label="Navigation principale"] {
background: var(--bk-surface-1);
border-bottom: 1px solid var(--bk-border);
}
body.bk-skin-console nav[aria-label="Navigation principale"] a {
font-family: var(--sf-mono);
font-size: 11.5px;
letter-spacing: .04em;
}
/* =====================================================================
7. ACCESSIBILITE — ce que les feuilles existantes n'ont pas
Mesure du projet : 0 `:focus-visible` dans dashboard/common/mobile.css,
et `prefers-reduced-motion` absent de toutes.
===================================================================== */
body.bk-skin-console a:focus-visible,
body.bk-skin-console button:focus-visible,
body.bk-skin-console input:focus-visible,
body.bk-skin-console select:focus-visible,
body.bk-skin-console summary:focus-visible {
outline: 2px solid var(--bk-link);
outline-offset: 2px;
border-radius: 3px;
}
@media (prefers-reduced-motion: reduce) {
body.bk-skin-console *,
body.bk-skin-console *::before,
body.bk-skin-console *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
}
/* =====================================================================
8. TELEPHONE — on ne coupe rien, on fait glisser
⚠ Pas de `overflow-x: hidden` : il ne range pas ce qui depasse, il le
COUPE, et sans barre pour aller le chercher. On traite les CAUSES.
===================================================================== */
@media (max-width: 700px) {
body.bk-skin-console { --sf-pad: 14px; --sf-gap: 12px; --sf-r: 10px; }
/* un enfant de flex/grid ne descend jamais sous la largeur de son
contenu : c'est le PARENT qui deborde. */
body.bk-skin-console .container > *,
body.bk-skin-console .bk-sec > * { min-width: 0; }
/* URL, e-mail, nom de club colle : on coupe le mot plutot que la page */
body.bk-skin-console .bk-table td,
body.bk-skin-console .bk-sec p { overflow-wrap: anywhere; }
}
/* =====================================================================
9. LE THEME PERSONNALISE DU SITE, NEUTRALISE
---------------------------------------------------------------------
`core/theme.php` (reglage `logs/.global_style.php`, actuellement
« custom » : primaire #2fa81f vert, accent #bbaf2a jaune) injecte pour
TOUT le site :
h1, h2 { color: #2fa81f !important }
a { color: #bbaf2a !important }
body { font-family: 'Lora', serif !important }
C'est LUI — pas l'habillage — qui faisait ressortir l'accueil en vert
et jaune malgre la palette. On ne le desactive pas globalement (c'est
un reglage assume du site) : on le neutralise quand la peau est active.
⚠ `!important` est indispensable : on ne bat un `!important` qu'avec un
`!important` de specificite superieure. Meme motif que `profil-font.css`,
deja en place dans le projet pour la meme raison.
⚠⚠ ON NE TOUCHE PAS A `-webkit-text-fill-color`.
L'accueil ecrit ses titres en degrade (`background-clip: text` +
`-webkit-text-fill-color: transparent`, 7 occurrences dans la page).
Reposer une couleur de remplissage APLATIRAIT ces degrades — et sur la
fiche profil, le faire a moitie rendait meme le titre invisible sur
certains navigateurs. On ne repose donc que `color`, qui est ignore la
ou un degrade est actif et s'applique partout ailleurs. */
body.bk-skin-console #bk-contenu h1,
body.bk-skin-console #bk-contenu h2,
body.bk-skin-console #bk-contenu h3,
body.bk-skin-console #bk-contenu h4 {
color: var(--bk-text) !important;
font-family: "Inter", "Segoe UI", system-ui, sans-serif !important;
}
/* ⚠⚠ ET LE REMPLISSAGE — SANS QUOI LA COULEUR CI-DESSUS NE SE VOIT PAS.
`core/theme.php` pose `h1, h2 { color: !important;
-webkit-text-fill-color: !important }`. Or `-webkit-text-fill-color`
PRIME sur `color` au moment de peindre : la regle du dessus etait donc appliquee
et invisible. Resultat mesure : les titres d'ARTICLE sortaient en VERT (#2fa81f)
alors que leur `color` calculee etait bien celle de la peau — un ecart entre ce
que dit la feuille et ce que montre l'ecran, impossible a comprendre sans
inspecter cette propriete precise.
⚠ `:not([style*="background"])` EST INDISPENSABLE : l'accueil ecrit ses titres en
DEGRADE (`background: linear-gradient(...)` + `background-clip: text` en style EN
LIGNE, 7 occurrences). Un degrade de texte exige justement un remplissage
TRANSPARENT : le reposer partout APLATIRAIT ces titres, et sur le profil ca avait
deja rendu un titre invisible. On epargne donc tout element qui porte un fond en
ligne, et on ne corrige que les titres a couleur pleine.
(Meme motif defensif que `core/theme.php` sur `.badge-cat:not([style*="background"])`.) */
body.bk-skin-console #bk-contenu h1:not([style*="background"]),
body.bk-skin-console #bk-contenu h2:not([style*="background"]),
body.bk-skin-console #bk-contenu h3:not([style*="background"]),
body.bk-skin-console #bk-contenu h4:not([style*="background"]) {
-webkit-text-fill-color: currentColor !important;
}
/* ⚠ Les BOUTONS sont exclus : ils portent leur couleur de fond et leur
libelle en blanc. Les repeindre en violet rendrait le texte illisible. */
body.bk-skin-console #bk-contenu a:not(.btn):not([class*="btn-"]):not(.bkx-btn):not(.bk-door):not(.bk-share-net-a):not([style*="background"]) {
color: var(--bk-link) !important;
}
body.bk-skin-console #bk-contenu a:not(.btn):not([class*="btn-"]):not(.bkx-btn):not(.bk-door):not(.bk-share-net-a):not([style*="background"]):hover {
color: #e879f9 !important;
}
/* la police du corps : le theme impose une serif (Lora) qui jure avec la
maquette console */
body.bk-skin-console:not(.p2-light) {
font-family: "Inter", "Segoe UI", system-ui, sans-serif !important;
}
/* la navigation principale — ⚠ jamais `nav` tout court (cf. entete) */
body.bk-skin-console nav[aria-label="Navigation principale"] a:not(.btn):not([class*="btn-"]) {
color: var(--bk-text-2) !important;
}
body.bk-skin-console nav[aria-label="Navigation principale"] a:hover,
body.bk-skin-console nav[aria-label="Navigation principale"] a.active {
color: var(--bk-link) !important;
}
/* =====================================================================
10. LA BARRE DE NAVIGATION — 15 liens a plat, sans hierarchie
---------------------------------------------------------------------
Le probleme n'est pas le nombre de liens, c'est qu'ils ont TOUS le meme
poids : « Solutions » (page produit) s'affiche exactement comme
« Athletes » (le coeur du site). L'oeil n'a aucun point d'accroche et
lit la barre comme une phrase.
⚠ AUCUN LIEN N'EST RETIRE NI MASQUE. Pas de `display:none`, pas de
« voir plus » qui cache la moitie du menu : on REGROUPE et on HIERARCHISE.
Trois groupes, separes par un filet fin insere en `::before` — donc sans
toucher au HTML :
1. le produit (Accueil, Produits, Solutions, Tarifs, Concept)
2. les donnees (Athletes, Noms, Le Fil, Competitions, Classement,
Calculer un niveau, Recherche)
3. les outils (Comparer, Contact)
⚠ On cible la barre par son `aria-label`, JAMAIS `nav` tout court : le
site en compte au moins quatre par page, et trois fichiers s'y sont deja
brules (bande noire de 95 px, barre tassee, contenu passant sous la nav).
⚠ La mise en ligne ne s'applique qu'AU-DESSUS de 1250 px : en dessous,
`.nav-links` devient le panneau deroulant du burger, qui a sa propre
disposition en colonne. Lui imposer une rangee le casserait. */
@media (min-width: 1251px) {
body.bk-skin-console nav[aria-label="Navigation principale"] .nav-links {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: 2px;
row-gap: 6px;
}
/* chaque lien devient une pastille cliquable : une cible, pas un mot
dans une phrase */
body.bk-skin-console nav[aria-label="Navigation principale"] .nav-links a {
font-size: 13px;
font-weight: 500;
padding: 7px 11px;
border-radius: 7px;
line-height: 1.2;
transition: background .15s ease, color .15s ease;
}
body.bk-skin-console nav[aria-label="Navigation principale"] .nav-links a:hover {
background: color-mix(in srgb, var(--bk-link) 15%, transparent);
}
body.bk-skin-console nav[aria-label="Navigation principale"] .nav-links a.active {
background: color-mix(in srgb, var(--bk-link) 22%, transparent);
font-weight: 700;
}
/* le groupe PRODUIT passe au second plan : ce sont des pages de
presentation, pas l'outil. Il reste parfaitement lisible (contraste
AA sur le fond des cartes) — on baisse le poids, jamais la lisibilite. */
body.bk-skin-console nav[aria-label="Navigation principale"] .nav-links a:not([class*="nav-c-"]):not(.logo) {
font-size: 12.5px;
color: var(--bk-text-3) !important;
}
body.bk-skin-console nav[aria-label="Navigation principale"] .nav-links a:not([class*="nav-c-"]):not(.logo):hover {
color: var(--bk-text) !important;
}
/* ── les separateurs de groupe, inseres sans toucher au HTML ──── */
body.bk-skin-console nav[aria-label="Navigation principale"] .nav-links a.nav-c-athletes::before,
body.bk-skin-console nav[aria-label="Navigation principale"] .nav-links a[href$="/comparer"]::before {
content: "";
display: inline-block;
width: 1px;
height: 18px;
margin: 0 12px 0 4px;
background: var(--bk-border-soft);
vertical-align: middle;
}
/* ── LA RECHERCHE est l'action principale du site : elle se voit ──
Avant, elle clignotait en dore — du bruit, pas de l'information.
Ici c'est un bouton plein : le meme poids visuel, en permanence,
sans mouvement. */
body.bk-skin-console nav[aria-label="Navigation principale"] .nav-links a.nav-c-recherche {
background: color-mix(in srgb, var(--bk-link) 20%, transparent);
border: 1px solid color-mix(in srgb, var(--bk-link) 55%, transparent);
color: var(--bk-link) !important;
font-weight: 700;
padding: 7px 13px;
}
body.bk-skin-console nav[aria-label="Navigation principale"] .nav-links a.nav-c-recherche:hover {
background: color-mix(in srgb, var(--bk-link) 32%, transparent);
}
/* le logo garde son rang de titre */
body.bk-skin-console nav[aria-label="Navigation principale"] a.logo {
margin-right: 18px;
}
}
/* =====================================================================
11. LA PALETTE COMPLETE DE LA MAQUETTE + SA TYPOGRAPHIE
---------------------------------------------------------------------
Les fonds et les textes etaient deja alignes sur `sport_futur` (memes
hex, verifie). Il manquait TROIS choses, qui font l'essentiel du
caractere de la maquette :
1. LES ACCENTS. La maquette ne travaille pas qu'au violet : cyan, neon,
vert, ambre, rose et les trois metaux servent a distinguer des
natures d'information. Sans eux, tout se ressemble.
2. LE MONOSPACE. Dans `profil.html`, `var(--mono)` apparait 52 fois
contre 1 seule police sans-serif : c'est LUI qui donne le ton
« console ». Les chiffres, les codes et les etiquettes le portent ;
le texte courant reste en sans-serif, sinon la lecture souffre.
3. LE RAYON. 12 px dans la maquette — et le theme personnalise du site
impose 20 px en `!important`, ce qui arrondissait tout en bulles.
⚠ AUCUNE POLICE EXTERNE. `sport_futur` n'en charge aucune : la pile
s'appuie sur les polices du systeme. Ajouter un appel a Google Fonts
introduirait une dependance tierce et un temps d'attente sur CHAQUE
page, pour un rendu que la maquette obtient sans. On garde sa pile
exacte.
===================================================================== */
body.bk-skin-console {
/* accents de la maquette (noms d'origine conserves pour s'y retrouver) */
--sf-vio: #a78bfa; --sf-vio-d: #6c5ce7;
--sf-cya: #58a6ff; --sf-neo: #00e5ff;
--sf-grn: #34d399; --sf-amb: #fbbf24;
--sf-red: #fb7185; --sf-pnk: #e879f9;
--sf-or: #fbbf24; --sf-arg: #cbd5e1; --sf-brz: #d97706;
--sf-r: 12px; /* la maquette, exactement */
}
/* ⚠ Le theme personnalise impose `border-radius: 20px !important` a tout :
on ne bat un `!important` qu'avec un `!important` plus specifique. */
body.bk-skin-console .chart-card,
body.bk-skin-console .card,
body.bk-skin-console .ath-card,
body.bk-skin-console .stat-card,
body.bk-skin-console .bk-sec,
body.bk-skin-console .table-wrap {
border-radius: var(--sf-r) !important;
}
/* ── LE MONOSPACE, la aussi ou il porte du sens ──────────────────────
Chiffres, codes, etiquettes, compteurs, pagination : tout ce qui se LIT
comme une donnee. Le texte courant (paragraphes, titres) reste en
sans-serif — passer un article entier en monospace le rend penible. */
body.bk-skin-console .badge,
body.bk-skin-console .badge-cat,
body.bk-skin-console .tag,
body.bk-skin-console .pager,
body.bk-skin-console .stats-pills,
body.bk-skin-console .sort-bar,
body.bk-skin-console .view-toggle,
body.bk-skin-console .live-search .meta,
body.bk-skin-console time,
body.bk-skin-console code, body.bk-skin-console kbd {
font-family: var(--sf-mono);
letter-spacing: .02em;
}
/* les nombres s'alignent en colonne : sinon on ne compare pas deux
valeurs l'une au-dessus de l'autre */
body.bk-skin-console .bk-table td,
body.bk-skin-console .bk-table th {
font-variant-numeric: tabular-nums;
}
/* ── LES MEDAILLES gardent leurs metaux ─────────────────────────────
⚠ Ces trois couleurs portent une INFORMATION (or / argent / bronze) :
le theme personnalise les ecrasait, on les repose. */
body.bk-skin-console .medaille-or, body.bk-skin-console .med-or { color: var(--sf-or) !important; }
body.bk-skin-console .medaille-argent, body.bk-skin-console .med-arg { color: var(--sf-arg) !important; }
body.bk-skin-console .medaille-bronze, body.bk-skin-console .med-brz { color: var(--sf-brz) !important; }
/* ── la selection, au ton de la maquette ────────────────────────── */
body.bk-skin-console ::selection {
background: color-mix(in srgb, var(--sf-vio) 40%, transparent);
color: var(--bk-text);
}
/* ── la barre de defilement : elle fait partie du decor sur une page
sombre, une barre claire par defaut jure avec le reste ────────── */
body.bk-skin-console:not(.p2-light) * {
scrollbar-color: var(--bk-border-soft) transparent;
scrollbar-width: thin;
}
/* ══════════════════════════════════════════════════════════════════════════════
TABLEAUX D'ARTICLE — ALIGNES SUR LA CHARTE
⚠ La peau stylait `.bk-table` (la convention du site) mais les articles utilisent
`.bk-art-table` : elle ne les touchait donc PAS, et un article affichait ses
donnees en Inter, avec des filets fins, au milieu d'un site ou tout ce qui porte
un chiffre est en monospace. Meme traitement que `.bk-table`, meme famille de
couleurs — on ne change que l'habillage, aucune donnee n'est masquee.
══════════════════════════════════════════════════════════════════════════════ */
body.bk-skin-console #bk-contenu .bk-art-table th {
font-family: var(--sf-mono) !important;
font-size: 9.5px !important; letter-spacing: .13em; text-transform: uppercase;
color: var(--bk-text-4) !important; font-weight: 500;
border-bottom: 1px solid var(--bk-border) !important;
}
body.bk-skin-console #bk-contenu .bk-art-table td {
font-size: 13px; border-bottom: 1px solid var(--bk-border) !important;
}
/* Les chiffres en monospace : c'est ce qui rend deux perfs comparables a l'oeil
(les chiffres proportionnels decalent les colonnes d'une ligne a l'autre). */
body.bk-skin-console #bk-contenu .bk-art-table td:not(:nth-child(2)) {
font-family: var(--sf-mono);
font-variant-numeric: tabular-nums;
}
body.bk-skin-console #bk-contenu .bk-art-table tbody tr:nth-child(even) td {
background: rgba(255, 255, 255, .018);
}
body.bk-skin-console #bk-contenu .bk-art-table tbody tr:hover td {
background: rgba(167, 139, 250, .07);
}
/* ⚠⚠ LA LIGNE SELECTIONNEE PASSE AVANT LE ZEBRAGE — ET AVANT LE SURVOL.
Le zebrage ci-dessus (specificite 0,4,3) ECRASAIT la regle de selection
d'`article.css` (0,2,3) : sur une ligne PAIRE, arriver depuis une fiche avec
`?moi=` marquait bien la ligne… sans qu'on voie quoi que ce soit. Cas reel :
4e du classement, donc ligne paire, fond mesure rgba(255,255,255,.018).
Un repere invisible une fois sur deux est pire qu'aucun repere : on croit que
la fonction ne marche pas.
Le filet a gauche est repris ici aussi (meme raison de specificite). */
body.bk-skin-console #bk-contenu .bk-art-table tbody tr.is-sel td,
body.bk-skin-console #bk-contenu .bk-art-body table tbody tr.is-sel td {
background: rgba(167, 139, 250, .20);
}
body.bk-skin-console #bk-contenu .bk-art-table tbody tr.is-sel td:first-child,
body.bk-skin-console #bk-contenu .bk-art-body table tbody tr.is-sel td:first-child {
box-shadow: inset 3px 0 0 #a78bfa;
}
body.bk-skin-console.p2-light #bk-contenu .bk-art-table tbody tr.is-sel td,
body.bk-skin-console.p2-light #bk-contenu .bk-art-body table tbody tr.is-sel td {
background: rgba(109, 40, 217, .15);
}
/* =====================================================================
LA PAGE ARTICLE PORTE LA MEME IDENTITE QUE LA FICHE ATHLETE
=====================================================================
⚠ Constat de l'utilisateur : « le design n'a pas changé ». C'etait exact.
La peau habillait le CONTENU de l'article (tableaux, chiffres en monospace)
mais pas sa STRUCTURE : pas de carte, pas d'etiquettes de section, un titre
nu sur le fond de page. A cote de la fiche athlete — cartes bordees,
libelles monospace en majuscules, puces numerotees — l'article avait l'air
d'appartenir a un autre site.
⚠ AUCUN HTML N'EST TOUCHE. Le corps des articles est STOCKE EN BASE
(`articles.body`) : changer le balisage obligerait a regenerer 53 articles a
chaque retouche de style, et laisserait les anciens en rade. Tout passe donc
par les classes `bk-art-*` deja presentes, plus des compteurs CSS pour la
numerotation des sections.
===================================================================== */
/* La page devient une CARTE, comme les blocs de la fiche. */
body.bk-skin-console.bk-page-article .bk-art-wrap {
max-width: 860px;
margin: 26px auto 90px;
padding: 30px 34px 34px;
background: var(--bk-surface-1);
border: 1px solid var(--bk-border);
border-radius: var(--sf-r);
}
@media (max-width: 700px) {
body.bk-skin-console.bk-page-article .bk-art-wrap {
margin: 0; padding: 20px 16px 40px; border-radius: 0; border-left: 0; border-right: 0;
}
}
/* Fil d'Ariane et retour : monospace, majuscules, comme le bandeau de la fiche. */
body.bk-skin-console.bk-page-article .bk-art-back {
font-family: var(--sf-mono); font-size: 10px; letter-spacing: .12em;
text-transform: uppercase; color: var(--bk-text-3);
}
body.bk-skin-console.bk-page-article .bk-art-back:hover { color: var(--bk-link); }
/* L'etiquette de discipline : puce de la peau. */
body.bk-skin-console.bk-page-article .bk-art-badge {
font-family: var(--sf-mono); font-size: 9.5px; letter-spacing: .16em;
background: rgba(167, 139, 250, .12); border: 1px solid rgba(167, 139, 250, .38);
color: var(--bk-link); border-radius: 7px; padding: 4px 10px;
}
/* Le titre : meme graisse et meme resserrement que le nom sur la fiche. */
body.bk-skin-console.bk-page-article .bk-art-h1 {
font-size: 33px; font-weight: 800; letter-spacing: -.02em; line-height: 1.14;
color: var(--bk-text); margin: 14px 0 8px;
}
body.bk-skin-console.bk-page-article .bk-art-meta {
font-family: var(--sf-mono); font-size: 10.5px; letter-spacing: .09em;
text-transform: uppercase; color: var(--bk-text-4);
padding-bottom: 18px; border-bottom: 1px solid var(--bk-border); margin-bottom: 22px;
}
/* ── LES SECTIONS : etiquette monospace + NUMERO, comme « II · NIVEAU » ─────
Le compteur est purement CSS : aucune numerotation n'est ecrite dans le
corps stocke, donc rien a regenerer et rien qui se desynchronise. */
body.bk-skin-console.bk-page-article .bk-art-body { counter-reset: bkart; }
body.bk-skin-console.bk-page-article .bk-art-body h3 {
counter-increment: bkart;
display: flex; align-items: center; gap: 10px;
font-family: var(--sf-mono); font-size: 11px; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
color: var(--bk-text-3);
margin: 34px 0 14px; padding-top: 18px;
border-top: 1px solid var(--bk-border);
}
body.bk-skin-console.bk-page-article .bk-art-body h3::before {
content: counter(bkart, decimal-leading-zero);
font-size: 10px; letter-spacing: .06em;
color: var(--bk-link);
background: rgba(167, 139, 250, .12);
border: 1px solid rgba(167, 139, 250, .34);
border-radius: 6px; padding: 3px 7px; flex: none;
}
/* Les KPI : cartes de la peau (surface surelevee + bordure), valeur en monospace. */
body.bk-skin-console.bk-page-article .bk-art-kpi {
background: var(--bk-surface-2);
border: 1px solid var(--bk-border);
border-radius: 12px; padding: 16px 12px;
}
body.bk-skin-console.bk-page-article .bk-art-kpi-v {
font-family: var(--sf-mono); font-size: 20px; letter-spacing: -.01em; color: var(--bk-text);
}
body.bk-skin-console.bk-page-article .bk-art-kpi-l {
font-family: var(--sf-mono); font-size: 9px; letter-spacing: .14em; color: var(--bk-text-4);
}
/* Les encarts de fait : filet violet sur surface, comme les blocs de la fiche. */
body.bk-skin-console.bk-page-article .bk-art-fact {
background: var(--bk-surface-2);
border: 1px solid var(--bk-border);
border-left: 3px solid var(--bk-link);
border-radius: 10px; padding: 13px 16px;
}
/* Les boutons de filtre (Tous / Hommes / Femmes) : pastilles de la peau. */
body.bk-skin-console.bk-page-article .bk-art-fx-b {
font-family: var(--sf-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
border-radius: 8px; border-color: var(--bk-border);
}
body.bk-skin-console.bk-page-article .bk-art-note,
body.bk-skin-console.bk-page-article .bk-art-foot {
font-family: var(--sf-mono); font-size: 10px; letter-spacing: .08em; color: var(--bk-text-4);
}
/* ── MODE CLAIR ────────────────────────────────────────────────────────────
⚠ Les jetons `--bk-*` N'EXISTENT PAS en clair (ils sont definis sous
`:not(.p2-light)`). Sans ce bloc, la carte serait TRANSPARENTE et les
bordures invisibles : exactement le piege deja rencontre sur le calendrier
et le radar. On repasse donc par les variables du SITE, definies dans les
deux themes par `theme-control.css`. */
body.bk-skin-console.p2-light.bk-page-article .bk-art-wrap {
background: var(--bg-card); border-color: var(--border);
}
body.bk-skin-console.p2-light.bk-page-article .bk-art-kpi,
body.bk-skin-console.p2-light.bk-page-article .bk-art-fact {
background: var(--bg-surface, #faf6ec); border-color: var(--border);
}
body.bk-skin-console.p2-light.bk-page-article .bk-art-h1,
body.bk-skin-console.p2-light.bk-page-article .bk-art-kpi-v { color: var(--text-primary); }
body.bk-skin-console.p2-light.bk-page-article .bk-art-body h3 { color: var(--text-secondary); border-top-color: var(--border); }
body.bk-skin-console.p2-light.bk-page-article .bk-art-body h3::before,
body.bk-skin-console.p2-light.bk-page-article .bk-art-badge { color: #5b21b6; border-color: #5b21b640; background: #5b21b614; }
body.bk-skin-console.p2-light.bk-page-article .bk-art-meta,
body.bk-skin-console.p2-light.bk-page-article .bk-art-kpi-l,
body.bk-skin-console.p2-light.bk-page-article .bk-art-note,
body.bk-skin-console.p2-light.bk-page-article .bk-art-foot { color: var(--text-tertiary, #756950); }
/* =====================================================================
LA BARRE PRINCIPALE : DEUX RANGEES VOULUES, PAS UNE COUPURE SUBIE
=====================================================================
Mesure a 1280 px : les 17 elements se repartissaient sur deux rangees
au hasard de la place restante (« Comparer » se retrouvait seul avant
« Calculer un niveau »), et les elements d'une meme rangee etaient
decales de 2 a 5 px les uns des autres — d'ou l'impression de fouillis.
Deux corrections, aucune information retiree :
1. `align-items: center` + `row-gap` : tout ce qui est sur une rangee
partage la meme ligne. C'est ce decalage de quelques pixels qui
donnait l'air « pas range ».
2. Une COUPURE EXPLICITE entre les rubriques et les outils, obtenue
avec un pseudo-element du CONTENEUR (un `::before` de conteneur
flex EST un element flex, contrairement a celui d'un enfant) :
rangee 1 = le site et les donnees, rangee 2 = les outils.
Aucun HTML n'est touche — la nav est ecrite dans `index.php`.
⚠ Uniquement au-dessus de 1250 px : en dessous, `.nav-links` est le
PANNEAU du menu burger, affiche en colonne. Y forcer des rangees le
casserait (le projet a deja paye trois fois ce genre de regle posee
sans regarder a quoi sert l'element ailleurs).
===================================================================== */
@media (min-width: 1251px) {
body.bk-skin-console .nav-links {
display: flex; flex-wrap: wrap;
align-items: center;
row-gap: 7px; column-gap: 13px;
}
/* La coupure : les elements d'ordre 0 avant, ceux d'ordre 2 apres. */
body.bk-skin-console .nav-links::before {
content: ''; flex: 0 0 100%; height: 0; order: 1;
}
body.bk-skin-console .nav-links > .nav-c-niv,
body.bk-skin-console .nav-links > .nav-c-recherche,
body.bk-skin-console .nav-links > #searchQuota,
body.bk-skin-console .nav-links > #bkCreditBadge,
body.bk-skin-console .nav-links > .nav-c-comparer,
body.bk-skin-console .nav-links > .nav-c-espace,
/* ⚠ « Contact » N A PAS DE CLASSE dans le HTML (verifie a la source) : on le
cible par son URL, sinon il reste seul en fin de premiere rangee. */
body.bk-skin-console .nav-links > a[href$="/contact"] {
order: 2;
}
/* Le badge de quota colle a « Recherche » : c'est son complement, pas un lien. */
body.bk-skin-console .nav-links > #searchQuota { margin-left: -8px; }
}