/* Polices : chargées via + dans le
de chaque page publique (parallélisé, non bloquant en chaîne comme @import).
Les pages publiques rendent theme-piste par défaut (class sur ) → seules les
fontes du thème PISTE (Fraunces, Plus Jakarta Sans, Newsreader, JetBrains Mono) sont
chargées. Barlow/DM Mono ne servent plus qu'à login/backoffice (qui ont leur propre
). */
:root {
--red: #E8002D;
--red-dark: #b5001f;
--black: #0a0a0a;
--dark: #111111;
--dark2: #1a1a1a;
--dark3: #222222;
--dark4: #2c2c2c;
--mid: #444;
--light: #aaaaaa;
--lighter: #cccccc;
--white: #f5f5f5;
/* Identité de marque (pilotage du look depuis un seul endroit) */
--brand-gradient: linear-gradient(to right, #ff3300 0%, #3a0000 100%);
/* Podium — médailles unifiées site-wide (Phase 5b) */
--medal-gold: #f0c030;
--medal-silver: #c0c0c0;
--medal-bronze: #cd7f32;
/* Couleurs de catégorie (sémantique éditoriale) — palette canonique (Phase 6) */
--cat-results: #E10600;
--cat-culture: #2E8F4E;
--cat-actu: #E8B400;
--font-display: 'Barlow Condensed', sans-serif;
--font-body: 'Barlow', sans-serif;
--font-mono: 'DM Mono', monospace;
/* ─── COUCHE SÉMANTIQUE (Phase 4) ────────────────────────────────────────
Tokens de RÔLE, simples alias des primitives ci-dessus. Objectif : les
composants consomment ces tokens (et non les primitives) → changer de
design system = redéfinir cette seule couche. Aucun impact visuel (alias).
⚠️ var() est résolu UNE fois au :root → ces tokens ne suivent PAS seuls le
mode clair ; ils sont RE-DÉCLARÉS dans body.light-mode (et le bloc chrome). */
--color-accent: var(--red); /* accent principal (liens, hover, barres) */
--color-accent-strong: var(--red-dark); /* accent appuyé / hover foncé */
--color-bg: var(--black); /* fond de page */
--color-surface: var(--dark2); /* cartes, widgets, panneaux */
--color-surface-alt: var(--dark3); /* surface secondaire / fond subtil */
--color-border: var(--dark3); /* bordures */
--color-border-strong: var(--dark4); /* bordures appuyées */
--text-primary: var(--white); /* titres, texte fort */
--text-body: var(--lighter); /* corps de texte */
--text-secondary: var(--light); /* méta, légendes */
--text-muted: var(--mid); /* texte estompé */
--font-heading: var(--font-display); /* titres */
--font-data: var(--font-mono); /* chiffres, labels, données */
/* (--font-body est déjà un token de rôle : on le garde tel quel.) */
/* ─── Tokens thématisables additionnels (migration des littéraux de page) ───
Valeur par défaut = le littéral historique → AUCUN changement sur le thème
par défaut. Un thème (ex. theme-piste) peut les redéfinir. */
--color-accent-rgb: 232, 0, 45; /* = #E8002D en composantes RGB, pour rgba(var(--color-accent-rgb), α) */
--brand-stripe: #cc0000; /* rayures décoratives (SVG du header) */
--hero-fallback: linear-gradient(135deg, #1a0a0a 0%, #2d1010 40%, #1a0505 100%); /* fond de secours derrière les visuels hero */
--img-matte: #fff; /* matte derrière les photos (letterbox / chargement) */
--img-placeholder: linear-gradient(135deg, #1a1a2e, #16213e); /* fond carte quand pas d'image (bleu) */
--img-placeholder-warm: linear-gradient(135deg, #1a0a0a, #2d1010); /* fond hero/featured (rouge sombre) */
--img-placeholder-cool: linear-gradient(135deg, #0e0814, #180f28); /* fond carte listing (violet sombre) */
/* ─── ÉCHELLES DESIGN SYSTEM (Phase 1) ───────────────────────────────────
Nouvelles variables, calquées sur les valeurs déjà utilisées dans le site.
Rien ne les consomme encore : aucun impact visuel. Elles servent de
vocabulaire commun pour la migration progressive des styles en dur. */
/* Espacements (padding / margin / gap) */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
/* Rayons de bordure */
--radius-xs: 2px; --radius-sm: 3px; --radius-md: 4px;
--radius-lg: 6px; --radius-xl: 10px; --radius-pill: 999px;
/* Ombres */
--shadow-sm: 0 1px 4px rgba(0,0,0,.2);
--shadow-md: 0 8px 24px rgba(0,0,0,.4);
--shadow-lg: 0 12px 40px rgba(0,0,0,.5);
/* Tailles de texte (échelle observée 8 → 26px) */
--fs-2xs: 8px; --fs-xs: 9px; --fs-sm: 10px; --fs-base: 12px;
--fs-md: 13px; --fs-lg: 15px; --fs-xl: 18px; --fs-2xl: 22px; --fs-3xl: 26px;
/* Graisses */
--fw-regular: 400; --fw-medium: 600; --fw-bold: 700; --fw-black: 900;
/* Plans (z-index) — valeurs alignées sur l'existant */
--z-header: 100; --z-mobile-menu: 98; --z-modal: 1000; --z-toast: 1100;
/* Transitions usuelles */
--transition-fast: .12s; --transition-base: .15s; --transition-slow: .25s;
}
/* ─── LIGHT MODE ─────────────────────────────── */
body.light-mode {
--black: #F8F7F4;
--dark: #ffffff;
--dark2: #ffffff;
--dark3: #eeece8;
--dark4: #dedbd6;
--mid: #888888;
--light: #555555;
--lighter: #333333;
--white: #111111;
/* Re-déclaration de la couche sémantique pour qu'elle suive le mode clair
(sinon elle reste figée sur les valeurs résolues au :root). */
--color-accent: var(--red);
--color-accent-strong: var(--red-dark);
--color-bg: var(--black);
--color-surface: var(--dark2);
--color-surface-alt: var(--dark3);
--color-border: var(--dark3);
--color-border-strong: var(--dark4);
--text-primary: var(--white);
--text-body: var(--lighter);
--text-secondary: var(--light);
--text-muted: var(--mid);
}
/* Header et barre prochaine séance toujours en dark */
body.light-mode header,
body.light-mode #next-session-bar {
--black: #0a0a0a;
--dark: #111111;
--dark2: #1a1a1a;
--dark3: #222222;
--dark4: #2c2c2c;
--mid: #444;
--light: #aaaaaa;
--lighter: #cccccc;
--white: #f5f5f5;
/* idem : re-déclarer la sémantique pour que ce chrome reste dark en mode clair */
--color-accent: var(--red);
--color-accent-strong: var(--red-dark);
--color-bg: var(--black);
--color-surface: var(--dark2);
--color-surface-alt: var(--dark3);
--color-border: var(--dark3);
--color-border-strong: var(--dark4);
--text-primary: var(--white);
--text-body: var(--lighter);
--text-secondary: var(--light);
--text-muted: var(--mid);
}
/* ─── THÈME DE DÉMO (Phase 5) — preuve de concept du design system ────────────
Redéfinit UNIQUEMENT la couche sémantique (Phase 4). Tout composant déjà câblé
sur ces tokens (pour l'instant : la sidebar — widgets, tags, listes, classement)
se re-skinne sans toucher au markup. NON appliqué par défaut : pour tester,
ajouter class="theme-demo" sur le d'une page. */
body.theme-demo {
--color-accent: #00d2ff;
--color-accent-strong: #0090b0;
--color-bg: #07111a;
--color-surface: #0e1f2e;
--color-surface-alt: #16344a;
--color-border: #16344a;
--color-border-strong: #1f4a66;
--text-primary: #eaf6ff;
--text-body: #b8d4e6;
--text-secondary: #7fa8c0;
--text-muted: #4a6678;
/* le header (chrome de marque) suit aussi le thème de démo */
--brand-gradient: linear-gradient(to right, #00d2ff 0%, #07111a 100%);
}
/* ─── THÈME PISTE (built-in) — design system « asphalte + ember » ─────────────
Look complet, dark canonique (cf. design system PISTE, juin 2026). Comme
theme-demo, mais en version COMPLÈTE : en plus des 13 tokens, il redéfinit la
typo (Fraunces / Plus Jakarta Sans / JetBrains Mono) et porte des signatures
visuelles scopées (coins carrés, cartes bordées sans ombre, filet rouge appuyé,
accent « ember » pour le live). NON appliqué par défaut : activé par la classe
body.theme-piste (back-office → Design). Sans la classe, aucun impact. */
body.theme-piste {
/* Primitives — redéclarées pour que les consommateurs directs (fond de page
via var(--black), chrome header, dropdowns…) suivent PISTE. Cf. body.light-mode
qui procède pareil : un var() au :root est résolu une fois, il faut redéclarer. */
--red: #E10600;
--red-dark:#B30500;
--black: #0A0A0B;
--dark: #131316;
--dark2: #131316;
--dark3: #1C1C1F;
--dark4: #2A2A2E;
--mid: #6B6B72;
--light: #9A9AA0;
--lighter: #C4C4C8;
--white: #F8F7F4;
/* Couche sémantique — palette asphalte + rouge de marque */
--color-accent: #E10600; /* brand-red */
--color-accent-strong: #B30500; /* brand-red-deep (hover/pressé) */
--color-bg: #0A0A0B; /* asphalt-950 — fond de page */
--color-surface: #131316; /* asphalt-900 — cartes / widgets */
--color-surface-alt: #1C1C1F; /* asphalt-800 — surface surélevée */
--color-border: #2A2A2E; /* asphalt-700 — bordures */
--color-border-strong: #3D3D42; /* asphalt-600 — bordures appuyées */
--text-primary: #F8F7F4; /* bone — titres / texte fort */
--text-body: #C4C4C8; /* asphalt-300 — corps */
--text-secondary: #9A9AA0; /* asphalt-400 — méta / légendes */
--text-muted: #6B6B72; /* asphalt-500 — estompé */
/* Typo PISTE — le kit est SURTOUT EN SANS (Plus Jakarta, 40 usages) ; le serif
Fraunces (12 usages) est réservé aux GRANDS titres éditoriaux. On met donc
tout en sans par défaut (nav, cartes, listes, section labels, logo) et on
applique Fraunces uniquement sur .hero-main-title/.article-title/.cat-title/
.featured-title (règle plus bas). On redéfinit les primitives car beaucoup
d'éléments consomment --font-display / --font-mono en direct. */
--font-display: "Plus Jakarta Sans", "Helvetica Neue", system-ui, sans-serif;
--font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;
--font-heading: "Plus Jakarta Sans", "Helvetica Neue", system-ui, sans-serif;
--font-body: "Plus Jakarta Sans", "Helvetica Neue", system-ui, sans-serif;
--font-data: "JetBrains Mono", "SF Mono", Consolas, monospace;
/* Chrome de marque : barre rouge → tarmac */
--brand-gradient: linear-gradient(to right, #E10600 0%, #0A0A0B 100%);
/* Tokens de rôle additionnels propres à PISTE */
--color-live: #FF6B00; /* ember — live / breaking / pit heat */
--radius-card: 0; /* PISTE est « sharp » : coins carrés */
--shadow-card: none; /* cartes bordées, pas flottées */
/* Tokens thématisables additionnels — versions PISTE */
--color-accent-rgb: 225, 6, 0; /* #E10600 */
--brand-stripe: var(--color-accent); /* les rayures suivent l'accent */
--hero-fallback: linear-gradient(135deg, #1C1C1F 0%, #131316 40%, #0A0A0B 100%); /* asphalte */
--img-matte: #0A0A0B; /* matte sombre au lieu du blanc */
--img-placeholder: linear-gradient(135deg, #2A2A2E, #0A0A0B); /* asphalte */
--img-placeholder-warm: linear-gradient(135deg, #2A2A2E, #0A0A0B);
--img-placeholder-cool: linear-gradient(135deg, #2A2A2E, #0A0A0B);
/* (couleurs de catégorie : pas d'override PISTE — elles n'existent pas dans le kit) */
}
/* ── PISTE — MODE CLAIR ──────────────────────────────────────────────────────
Le kit supporte les DEUX modes (:root clair + [data-theme="dark"]). theme-piste
pose le sombre par défaut ; ce bloc rétablit le toggle clair/sombre : quand
body porte AUSSI .light-mode, on redéclare primitives + sémantique vers la
palette CLAIRE de PISTE (bone/paper, texte asphalte). Spécificité (2 classes)
> body.theme-piste seul → c'est bien le clair qui gagne quand il est actif. */
body.theme-piste.light-mode {
/* Primitives — palette claire */
--black: #F8F7F4; /* bone — fond de page */
--dark: #FFFFFF;
--dark2: #FFFFFF; /* paper — surfaces/cartes */
--dark3: #E2E2E4; /* asphalt-200 — bordures / surfaces subtiles */
--dark4: #C4C4C8; /* asphalt-300 — bordures appuyées */
--mid: #9A9AA0; /* asphalt-400 */
--light: #6B6B72; /* asphalt-500 — texte secondaire */
--lighter: #2A2A2E; /* asphalt-700 — corps */
--white: #0A0A0B; /* asphalt-950 — texte fort (foncé sur clair) */
--red: #E10600;
--red-dark:#B30500;
/* Sémantique — re-déclarée (sinon figée sur le sombre du :root theme-piste) */
--color-accent: #E10600;
--color-accent-strong: #B30500;
--color-bg: #F8F7F4;
--color-surface: #FFFFFF;
--color-surface-alt: #F1F1F0;
--color-border: #E2E2E4;
--color-border-strong: #C4C4C8;
--text-primary: #0A0A0B;
--text-body: #2A2A2E;
--text-secondary: #6B6B72;
--text-muted: #9A9AA0;
--img-matte: #FFFFFF; /* matte clair derrière les photos */
}
/* Header en MODE CLAIR : suit le clair comme le kit (fond bone, texte foncé) —
surcharge la convention site « header toujours sombre » (body.light-mode header). */
body.theme-piste.light-mode header {
--black: #F8F7F4; --dark: #FFFFFF; --dark2: #FFFFFF; --dark3: #E2E2E4; --dark4: #C4C4C8;
--mid: #9A9AA0; --light: #6B6B72; --lighter: #2A2A2E; --white: #0A0A0B;
--color-bg: #F8F7F4; --color-surface: #FFFFFF; --color-border: #E2E2E4;
--text-primary: #0A0A0B;
background-color: rgba(248, 247, 244, 0.82); /* bone translucide */
background-image: none; /* neutralise le dégradé rouge de base */
border-bottom: 1px solid var(--color-border);
}
/* Logo + toggle lisibles en MODE CLAIR : le logo est forcé blanc par un filtre
inline (brightness(0) invert(1)) → on le repasse en noir ; la piste du toggle
est blanc translucide (invisible sur bone) → on l'assombrit + pouce rouge. */
/* (ancien filtre du logo supprimé : le logo PF gère le mode clair par échange de variante) */
body.theme-piste.light-mode .theme-toggle-track { background: rgba(10,10,11,0.28); }
body.theme-piste.light-mode .theme-toggle-thumb { background: #0A0A0B; }
/* ── Signatures PISTE scopées au thème (au-delà des tokens) ─────────────────── */
/* Cartes : coins carrés, pas d'ombre au repos ; au survol, soulèvement + filet
rouge à gauche (pas d'ombre). */
/* Cartes (NewsCard du kit) : radius 6, BARRE ROUGE 4px en haut du corps, et hover
.race-card = léger lift + balayage rouge diagonal + zoom miniature + eyebrow qui
glisse (le code du kit utilise bien ce hover, contrairement au texte du README). */
body.theme-piste .article-card {
border-radius: 6px;
box-shadow: none;
transition: transform 360ms cubic-bezier(0.22,1,0.36,1);
}
body.theme-piste .article-card:hover {
transform: translateY(-3px);
box-shadow: none;
border-color: var(--color-border);
}
body.theme-piste .article-card-body { border-top: 4px solid var(--color-accent); }
/* Variante LIVE NEWS (catégorie « Résultats ») : accent EMBER au lieu du rouge
(barre de tête, eyebrow + pastille, balayage de survol) — 2e type de carte du kit. */
body.theme-piste .article-card.is-live .article-card-body { border-top-color: var(--color-live); }
/* Fond placeholder LIVE NEWS = ember (comme NewsCard.thumbBg du kit) ; editorial
reste asphalte (token de carte). Vaut pour les cartes ET l'article en avant. */
body.theme-piste .article-card.is-live .article-card-img,
body.theme-piste .featured-article.is-live .featured-img {
background: linear-gradient(135deg, #FF6B00, #B30500) !important;
}
body.theme-piste .article-card.is-live .article-card-cat { color: var(--color-live) !important; }
body.theme-piste .article-card.is-live .article-card-cat::before {
content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
background: var(--color-live); margin-right: 6px; vertical-align: middle;
}
body.theme-piste .article-card.is-live .article-card-img::after {
background: linear-gradient(115deg, transparent 38%, var(--color-live) 39%, var(--color-live) 41%, transparent 42%);
}
body.theme-piste .article-card-img { position: relative; }
body.theme-piste .article-card-img::after {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
background: linear-gradient(115deg, transparent 38%, var(--color-accent) 39%, var(--color-accent) 41%, transparent 42%);
transform: translateX(-110%);
transition: transform 520ms cubic-bezier(0.22,1,0.36,1);
}
body.theme-piste .article-card:hover .article-card-img::after { transform: translateX(110%); }
body.theme-piste .article-card-img img { transition: transform 520ms cubic-bezier(0.22,1,0.36,1); }
body.theme-piste .article-card:hover .article-card-img img { transform: scale(1.06); }
body.theme-piste .article-card-cat { display: inline-block; transition: transform 360ms cubic-bezier(0.22,1,0.36,1); }
body.theme-piste .article-card:hover .article-card-cat { transform: translateX(6px); }
@media (prefers-reduced-motion: reduce) {
body.theme-piste .article-card,
body.theme-piste .article-card-img::after,
body.theme-piste .article-card-img img,
body.theme-piste .article-card-cat { transition: none !important; transform: none !important; }
}
/* Widgets / panneaux : coins carrés, filet de titre rouge plus appuyé (4px). */
body.theme-piste .widget { border-radius: 6px; }
/* En-tête de widget (sbHead du kit) : filet 1px + segment rouge 40px en bas-gauche. */
body.theme-piste .widget-header {
position: relative;
border-bottom: 1px solid var(--color-border);
font-weight: 700;
letter-spacing: .14em;
}
body.theme-piste .widget-header::after {
content: ""; position: absolute; left: 0; bottom: -1px;
width: 40px; height: 2px; background: var(--color-accent);
}
/* Tags = PILULES (SidebarTags du kit : border-radius 999). */
body.theme-piste .tag { border-radius: 999px; }
/* Tableaux : entêtes en SANS 800 tracké (rtStyles.th du kit) ; n° de position en
Fraunces serif (rtStyles.tdPos). */
body.theme-piste .res-table th { font-family: var(--font-body); font-weight: 800; letter-spacing: .14em; }
body.theme-piste .res-table .col-pos { font-family: "Fraunces", Georgia, serif; font-style: italic; }
/* Numéro pilote en BADGE (forme du kit : boîte mono arrondie centrée) — couleurs
neutres de notre palette (pas le rouge-1er du kit, comme demandé). */
body.theme-piste .res-table .num-badge {
display: inline-flex; align-items: center; justify-content: center;
min-width: 28px; height: 20px; padding: 0 5px;
font-family: var(--font-data); font-size: 11px; font-weight: 700;
color: var(--text-primary);
background: var(--color-surface-alt);
border: 1px solid var(--color-border-strong);
border-radius: 2px;
}
/* Meilleur chrono de séance (temps du 1er sur séance chronométrée) : VIOLET
« fastest » + ★ — convention timing MotoGP du kit (--data-fastest #8B2FB8).
Scopé theme-piste : aucun effet sur le thème défaut. */
body.theme-piste .res-table .time-fastest { color: #8B2FB8; font-weight: 800; }
body.theme-piste .res-table .time-fastest::before { content: "\2605\00a0"; }
/* ── Tier 1 : MOTIFS PISTE (scopés au thème) ───────────────────────────────── */
/* Eyebrows / labels de catégorie : sans tracké (Plus Jakarta), pas le serif
d'affichage. PISTE pose ses eyebrows en sans, pas en display. */
body.theme-piste .hero-card-cat,
body.theme-piste .article-card-cat,
body.theme-piste .small-cat,
body.theme-piste .featured-cat,
body.theme-piste .featured-badge,
body.theme-piste .page-banner-label,
body.theme-piste .eyebrow {
font-family: var(--font-body);
font-weight: 800;
letter-spacing: .16em;
}
/* Catégories en ROUGE (comme le kit : eyebrow = brand-red), au lieu des couleurs
par catégorie posées EN INLINE via getCategoryColor() → !important pour battre
l'inline. Le badge plein de l'article passe en fond rouge. */
body.theme-piste .hero-card-cat,
body.theme-piste .article-card-cat,
body.theme-piste .small-cat,
body.theme-piste .featured-cat,
body.theme-piste .related-cat {
color: var(--color-accent) !important;
}
body.theme-piste .article-cat-badge { background: var(--color-accent) !important; }
/* Filet de section : on GARDE le filet net d'origine. Le kit PISTE utilise des
lignes nettes sous les titres, pas de rayures diagonales → pas d'override ici. */
/* En-têtes de page : on garde le filet 1px d'origine (lignes nettes, pas de rayures). */
/* ── Tier 2 : conteneurs d'images en coins CARRÉS (PISTE « sharp ») ─────────── */
body.theme-piste .hero-main-img,
body.theme-piste .hero-card-thumb,
body.theme-piste .article-card-img,
body.theme-piste .article-list-thumb,
body.theme-piste .related-img,
body.theme-piste .nav-thumb,
body.theme-piste .featured-img,
body.theme-piste .insta-thumb,
body.theme-piste .ig-thumb,
body.theme-piste .hv-thumb { border-radius: 0; }
/* .divider : on garde le séparateur fin d'origine (pas de rayures). */
/* Rayons « sharp » PISTE : cartes/conteneurs CARRÉS, micro-UI à 2px (échelle kit). */
body.theme-piste .insta-card,
body.theme-piste .ig-card,
body.theme-piste .featured-article,
body.theme-piste .hv-card { border-radius: 6px; }
body.theme-piste .see-all-btn,
body.theme-piste .filter-chip,
body.theme-piste .page-btn,
body.theme-piste .refresh-btn,
body.theme-piste .rescrape-btn,
body.theme-piste .cat-badge,
body.theme-piste .featured-badge,
body.theme-piste .nsb-pill,
body.theme-piste .search-box { border-radius: 2px; }
/* Utilitaire indicateur live (ember pulsant) : DIRECT */
body.theme-piste .live-pulse { display: inline-flex; align-items: center; }
body.theme-piste .live-pulse::before {
content: ""; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px;
background: var(--color-live);
animation: piste-live-pulse 1.4s cubic-bezier(0.22,1,0.36,1) infinite;
}
@keyframes piste-live-pulse {
0% { box-shadow: 0 0 0 0 rgba(255,107,0,.7); }
70% { box-shadow: 0 0 0 10px rgba(255,107,0,0); }
100% { box-shadow: 0 0 0 0 rgba(255,107,0,0); }
}
/* ── Skin avancé PISTE (scopé thème) — rapproche du UI kit sans toucher la structure ── */
/* Header : NOIR PLAT + filet hairline, au lieu du dégradé rouge. C'est le plus gros
levier visuel : le bandeau rouge est ce qui « date » le plus vs le kit PISTE.
(Les rayures rouges SVG en haut à droite ressortent alors comme accent — voulu.) */
body.theme-piste header {
background-color: rgba(10, 10, 11, 0.82); /* translucide → laisse voir le blur */
background-image: none; /* neutralise le dégradé rouge de base */
border-bottom: none;
position: sticky; top: 0; z-index: 100; /* reste affiché au scroll */
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
/* (filet entre header et barre retiré) */
body.theme-piste header::after { content: none; }
/* Menu mobile + hamburger : suivent le mode clair/sombre (étaient figés en dark). */
body.theme-piste .hamburger span { background: var(--text-primary); }
body.theme-piste .mobile-menu { background: var(--color-bg); }
body.theme-piste .mobile-menu a { color: var(--text-primary); border-bottom-color: var(--color-border); }
body.theme-piste .mobile-menu a:hover { background: var(--color-surface-alt); }
/* Nav (hStyles.navItem du kit) : sans 13px/600, CASSE NORMALE, gris (fg-2) ;
actif/survol = texte fort + soulignement rouge, sans fond. */
body.theme-piste .nav-item {
display: inline-flex;
align-items: center;
height: 34px; /* hauteur uniforme → soulignement actif aligné entre items ET avec le trait rouge du logo (36px, trait à ~95 % de sa hauteur) */
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
color: var(--text-secondary);
border-radius: 4px;
padding: 0 12px;
}
body.theme-piste .nav-item:hover,
body.theme-piste .nav-item.active {
background: transparent;
color: var(--text-primary);
border-radius: 0;
}
/* Trait rouge (actif/survol) via ::after positionné 2px SOUS l'item — au lieu du
box-shadow collé au bas — pour aérer de 2px l'espace entre le texte et le trait. */
body.theme-piste .nav-item:hover::after,
body.theme-piste .nav-item.active::after {
content: '';
position: absolute;
left: 0; right: 0;
bottom: -2px;
height: 2px;
background: var(--color-accent);
}
/* Items de sous-menu : sans, casse normale (le kit n'a pas de dropdown, on reste cohérent). */
body.theme-piste .dropdown a {
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
}
/* Sous-menu : survol = fond subtil + texte clair, SANS liseré rouge vertical
(le rouge reste réservé à l'état actif — parent souligné / sous-item .current).
Évite les deux rouges concurrents. */
body.theme-piste .dropdown a:hover {
background: var(--color-surface-alt);
color: var(--text-primary);
border-left-color: transparent;
}
/* Sous-item de la page courante : c'est LUI qui porte l'accent rouge (état). */
body.theme-piste .dropdown a.current {
color: var(--color-accent);
border-left-color: var(--color-accent);
}
/* Barre session = LiveBar du kit : TOUJOURS sombre + texte clair, dans les DEUX
modes (on re-déclare ses tokens en sombre, donc le mode clair ne l'éclaircit pas). */
body.theme-piste #next-session-bar {
--black: #1C1C1F; --dark2: #131316; --dark3: #2A2A2E; --dark4: #3D3D42;
--white: #F8F7F4; --lighter: #C4C4C8; --light: #9A9AA0; --mid: #6B6B72;
--color-bg: #19191c; --color-surface: #131316; --color-border: #3D3D42;
--text-primary: #F8F7F4; --text-body: #C4C4C8; --text-secondary: #9A9AA0; --text-muted: #6B6B72;
/* Barre en EMBRASEMENT : rouge à gauche → ember orange à droite (toutes pages). */
background: linear-gradient(100deg, #D5211F 0%, #E10600 78%, #FF6B00 100%);
position: relative;
border-bottom: none;
}
/* (TEST) filet dégradé du bas de la barre séance retiré. */
body.theme-piste #next-session-bar::after { content: none; }
body.theme-piste .nsb-pill { background: #0A0A0B; border-radius: 999px; padding: 4px 14px; margin-right: 14px; } /* pastille noire arrondie + un peu d'air avant le drapeau */
/* Texte de la barre lisible sur l'embrasement (la session était en rouge = invisible). */
body.theme-piste #next-session-bar .nsb-name,
body.theme-piste #next-session-bar .nsb-session,
body.theme-piste #next-session-bar .nsb-time {
color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
body.theme-piste #next-session-bar .nsb-sep { color: rgba(255,255,255,.5); }
/* Barre séance — version COMPACTE mobile. Cachée par défaut (tous thèmes) ;
affichée ≤600px sous PISTE (le desktop ne bouge pas). */
#next-session-bar .nsb-ps { display: none; }
/* Mobile : la barre « Prochaine séance » n'apparaît QUE sur l'accueil
(sur les autres pages elle porte .nsb-secondary → masquée ≤700px). Desktop inchangé. */
@media (max-width: 700px) {
#next-session-bar.nsb-secondary { display: none !important; }
}
/* spécificité renforcée : bat la règle inline-flex des enfants (nsb-mobile est dans .nsb-right) */
#next-session-bar .nsb-right > .nsb-mobile { display: none; }
body.theme-piste #next-session-bar .nsb-mobile { font-family: var(--font-body); font-size: 10px; color: #fff; }
body.theme-piste #next-session-bar .nsb-mcode { font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
body.theme-piste #next-session-bar .nsb-mtime { font-family: var(--font-data); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
body.theme-piste #next-session-bar .nsb-msep { color: rgba(255,255,255,.5); }
@media (max-width: 700px) {
body.theme-piste #next-session-bar .nsb-flag,
body.theme-piste #next-session-bar .nsb-name,
body.theme-piste #next-session-bar .nsb-session,
body.theme-piste #next-session-bar .nsb-time,
body.theme-piste #next-session-bar .nsb-sep,
body.theme-piste #next-session-bar .nsb-pf { display: none; }
body.theme-piste #next-session-bar .nsb-ps { display: inline; }
body.theme-piste #next-session-bar .nsb-mobile { display: inline-flex; align-items: center; gap: 8px; }
body.theme-piste #next-session-bar .container { justify-content: center; } /* mobile/très petit : centré (comme avant — la marque est masquée) */
}
/* Très petit écran : on retire le code du GP (et son séparateur), on garde le drapeau. */
@media (max-width: 350px) {
body.theme-piste #next-session-bar .nsb-mgp { display: none; }
}
/* Hero : voile de protection NOIR (scrim du kit — l'ember venait du fond du
placeholder, pas du voile ; sur une vraie photo le scrim est noir). */
body.theme-piste .hero-main-overlay {
background: linear-gradient(180deg, transparent 0%, transparent 25%, rgba(10,10,11,0.92) 100%);
}
/* Densité éditoriale : un peu plus d'air sur les têtes de section (voix magazine). */
/* Titre de section (SectionHeader du kit) : sans 13px/800, tracking .18em. */
body.theme-piste .section-label { margin-bottom: 20px; font-size: 13px; font-weight: 800; letter-spacing: .18em; }
/* Lien « Voir tout » (SectionHeader.action du kit) : MONO 11px/500, tracking .12em. */
body.theme-piste .section-label > a {
font-family: var(--font-data);
font-weight: 500;
letter-spacing: .12em;
}
/* Titres vidéo (VideoThumb du kit) : sans 12px, weight 500. */
body.theme-piste .hv-title { font-weight: 500; }
/* Léger dégonflage des titres de cartes (demande utilisateur — un cran sous le kit). */
body.theme-piste .article-card-title { font-size: 13px; }
body.theme-piste .article-list-title { font-size: 13px; }
/* Titres des cartes à droite du hero (« À la une ») — alignés à 13px. */
body.theme-piste .hero-card-title { font-size: 13px; }
/* Extrait de carte : un cran sous le titre pour garder la hiérarchie. */
body.theme-piste .article-card-excerpt { font-size: 12px; }
body.theme-piste .content-section { margin-bottom: 56px; }
/* Fraunces (serif) réservé aux GRANDS titres éditoriaux — comme le kit PISTE
(serif = accent sur le hero/H1, le reste reste en sans). */
body.theme-piste .hero-main-title,
body.theme-piste .article-title,
body.theme-piste .cat-title,
body.theme-piste .featured-title {
font-family: "Fraunces", Georgia, serif;
}
/* Hero + H1 d'article : Fraunces DROIT (préférence utilisateur ; le kit les met en italique). */
body.theme-piste .hero-main-title,
body.theme-piste .article-title { font-style: normal; letter-spacing: -0.025em; }
/* Footer = fStyles du kit : TOUJOURS asphalte (sombre) + texte clair, dans les
deux modes (re-déclaration des tokens en sombre). */
body.theme-piste footer {
--black: #0A0A0B; --dark2: #131316; --dark3: #2A2A2E; --dark4: #3D3D42;
--white: #F8F7F4; --lighter: #C4C4C8; --light: #9A9AA0; --mid: #6B6B72;
--color-bg: #0A0A0B; --color-surface: #131316; --color-border: #2A2A2E;
--text-primary: #F8F7F4; --text-body: #C4C4C8; --text-secondary: #9A9AA0; --text-muted: #6B6B72;
background: var(--color-bg);
border-top: 1px solid var(--color-border);
}
/* ── Grain bitume (motif du design system, brand-motifs.html) ────────────────
Trame de points quasi-blancs à ~5% sur les surfaces SOMBRES (footer, header,
barre live). Les points étant quasi-blancs, ils sont invisibles sur fond clair
→ sans danger en mode clair (le header bone ne montre rien). */
body.theme-piste footer {
background-image: radial-gradient(rgba(248,247,244,0.05) 1px, transparent 1.2px);
background-size: 8px 8px;
}
/* ── FOOTER : barre unique (mutualisé, markup identique sur toutes les pages) ──
Le pied de page est toujours sombre (tokens redéclarés ci-dessus). */
footer { padding: 28px 0; margin-top: 60px; }
.footer-bar {
max-width: 1280px; margin: 0 auto; padding: 0 24px;
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px;
}
.footer-logo { display: inline-flex; align-items: center; justify-self: start; }
.footer-logo img { height: 26px; width: auto; display: block; }
.footer-links { display: flex; gap: 24px; justify-self: center; }
.footer-links a {
font-family: var(--font-display); font-size: 12px; font-weight: 600;
letter-spacing: 1px; text-transform: uppercase;
color: var(--text-secondary); text-decoration: none; transition: color .12s;
}
.footer-links a:hover { color: var(--color-accent); }
.footer-links .footer-admin { display: inline-flex; align-items: center; }
.footer-copy {
font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px;
color: var(--text-muted); justify-self: end; text-align: right;
}
@media (max-width: 640px) {
footer { padding: 24px 0; margin-top: 44px; }
.footer-bar { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 14px; }
.footer-logo, .footer-copy { justify-self: center; }
.footer-copy { text-align: center; }
.footer-links { flex-wrap: wrap; justify-content: center; gap: 12px 18px; }
}
/* Page article : corps long en Newsreader serif + lettrine rouge (ArticlePage du kit). */
body.theme-piste .article-body {
font-family: "Newsreader", Georgia, serif;
font-size: 17px;
line-height: 1.7;
}
body.theme-piste .article-body p:first-of-type::first-letter {
font-family: "Fraunces", Georgia, serif;
font-style: italic;
font-weight: 700;
font-size: 78px;
line-height: 0.85;
float: left;
margin: 8px 14px 0 0;
color: var(--color-accent);
letter-spacing: -0.04em;
}
/* Hero : on retire le cadre interne de 6px (`.hero-main-img::after`) qui crée une
bordure sombre = la « marge » visible. L'image va alors bord à bord. */
body.theme-piste .hero-main-img::after { box-shadow: none; }
/* Pull-quote / citation (ArticlePage du kit) : Fraunces italique 26px, filet
rouge à gauche. S'applique aux du corps d'article. */
body.theme-piste .article-body blockquote {
font-family: "Fraunces", Georgia, serif;
font-style: italic;
font-weight: 600;
font-size: 26px;
line-height: 1.3;
color: var(--text-primary);
margin: 28px 0;
padding: 20px 0 20px 24px;
border-left: 3px solid var(--color-accent);
letter-spacing: -0.015em;
}
/* Toggle switch */
.theme-toggle {
display: flex;
align-items: center;
cursor: pointer;
gap: 6px;
flex-shrink: 0;
}
.theme-toggle-track {
width: 32px;
height: 18px;
background: rgba(255,255,255,0.2);
border-radius: 9px;
position: relative;
transition: background .25s;
}
.theme-toggle-thumb {
width: 12px;
height: 12px;
background: white;
border-radius: 50%;
position: absolute;
top: 3px;
left: 3px;
transition: transform .25s;
}
body.light-mode .theme-toggle-track { background: rgba(255,255,255,0.5); }
body.light-mode .theme-toggle-thumb { transform: translateX(14px); }
/* Icône du toggle thème : SVG « fil » (comme les autres icônes du header).
Affiche l'icône du MODE COURANT : lune en sombre, soleil en clair.
color:inherit sur le bouton → l'icône suit la couleur du header (un