/* ===================================================================== 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; } /* ⚠ 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) { color: var(--bk-link) !important; } body.bk-skin-console #bk-contenu a:not(.btn):not([class*="btn-"]):not(.bkx-btn):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; }