/* ===================================================== FFBB BASKETBALL SUITE — Design Tokens Source de vérité unique. Charger en premier, puis la feuille de la page, puis theme.css (couche d'homogénéité commune à toutes les pages). CHARTE GRAPHIQUE FFBB (charte_graphique/nouvelle_charte_graphique_ffbb.pdf) — OBLIGATOIRE sur le site ET sur les PDF : · Bleu Pantone Reflex Blue C · CMJN 100/90/0/0 · RVB 0/39/118 → #002776 · Rouge Pantone 485 C · CMJN 0/100/100/0 · RVB 213/43/30 → #D52B1E · Dégradé signature bleu → rouge (bleu en bas à gauche, rouge en haut à droite) · Gris neutre des bandeaux de section → #B5B8BB · Titres en capitales (typo de titrage FFBB) ; textes courants en Interstate (PAO) ou Arial (bureautique). Interstate n'existant pas en libre pour le web, on utilise Overpass (même dessin « Highway Gothic ») avec repli Arial ; Bebas Neue (capitales) remplace la typo de titrage pour les grands chiffres. · Logo jamais déformé, recoloré ni incliné ; 10 mm minimum (25 mm avec la mention) ; zone de protection vierge ; sur fond foncé : logo blanc ou dans son cartouche blanc. Blanc = fonds et cartes · Bleu = structure, texte, navigation · Rouge = action principale et repères. Vert / orange / rouge sont réservés aux voyants d'état (bien / moyen / à surveiller), jamais à la décoration. Les anciens noms (--brand-teal, --brand-indigo, --brand-orange…) restent des alias pour ne casser aucune page. ===================================================== */ :root { /* =================================================== PALETTE TRICOLORE =================================================== */ --brand-red: #D52B1E; /* Rouge FFBB, Pantone 485 C — action principale, repères */ --brand-red-dk: #B0231A; /* survol / pressé */ --brand-red-txt: #B8241A; /* rouge lisible en texte sur blanc */ --brand-red-lt: #EE6B72; /* série secondaire des graphiques */ --brand-red-bg: #FDECED; /* teinte de fond rouge */ --brand-navy: #002776; /* Bleu FFBB, Pantone Reflex Blue C — titres forts, aplats, actif */ --brand-blue: #2F5EA8; /* bleu dérivé, plus clair — liens, données, focus */ --brand-blue-lt: #7D9BCB; /* série secondaire des graphiques */ --brand-blue-bg: #EDF2FA; /* teinte de fond bleue */ --ink: #16294D; /* encre principale (bleu nuit) */ --brand-grey: #B5B8BB; /* gris des bandeaux de section de la charte */ --brand-gradient: linear-gradient(60deg, #002776 0%, #6A2C6E 50%, #D52B1E 100%); /* dégradé signature */ /* Alias historiques (ne plus utiliser dans le nouveau code) */ --brand-teal: var(--brand-blue); --brand-indigo: var(--brand-navy); --brand-orange: var(--brand-red-lt); --brand-green: #2F7D4F; /* =================================================== FONDS =================================================== */ --bg-base: #F5F7FB; /* fond de page (blanc bleuté, pas crème) */ --bg-raised: #FFFFFF; /* cartes, panneaux, menus */ /* =================================================== SURFACES =================================================== */ --surface-1: #FFFFFF; /* carte */ --surface-2: rgba(22, 41, 77, 0.04); /* ligne / élément dans une carte */ --surface-3: rgba(22, 41, 77, 0.07); /* survol */ --surface-4: rgba(22, 41, 77, 0.11); /* actif / sélectionné neutre */ --surface-input: #FFFFFF; --surface-input-hover: #F2F6FC; /* =================================================== BORDURES =================================================== */ --border-subtle: rgba(22, 41, 77, 0.08); --border-mid: rgba(22, 41, 77, 0.14); --border-strong: rgba(22, 41, 77, 0.26); /* =================================================== TEXTE (contrastes AA sur blanc et sur --bg-base) =================================================== */ --text-primary: #16294D; /* 15:1 */ --text-main: #16294D; --text-mid: #44547A; /* 9:1 */ --text-dim: #5E6B88; /* 5:1 */ --text-on-color: #FFFFFF; /* sur rouge / bleu marine / bleu France */ /* =================================================== COULEURS SÉMANTIQUES (voyants d'état uniquement) =================================================== */ --color-success: #2F7D4F; --color-success-bg: rgba(47, 125, 79, 0.10); --color-success-border: rgba(47, 125, 79, 0.28); --color-warning: #A5631F; --color-warning-bg: rgba(201, 138, 58, 0.11); --color-warning-border: rgba(201, 138, 58, 0.32); --color-error: var(--brand-red-txt); --color-error-bg: rgba(213, 43, 30, 0.08); --color-error-border: rgba(213, 43, 30, 0.28); --color-info: var(--brand-blue); --color-info-bg: rgba(47, 94, 168, 0.08); --color-info-border: rgba(47, 94, 168, 0.24); /* =================================================== ALIASES RÉTROCOMPATIBLES =================================================== */ --ffbb-red: var(--brand-red); --ffbb-blue: var(--brand-navy); --ffbb-dark: var(--bg-base); --ffbb-turquoise: var(--brand-blue); --ffbb-orange: var(--brand-red-lt); --ffbb-indigo: var(--brand-navy); --ffbb-light: var(--text-primary); --glass: var(--surface-1); --glass-b: var(--surface-2); /* =================================================== TYPOGRAPHIE =================================================== */ --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif; --font-ui: 'Overpass', Arial, system-ui, -apple-system, sans-serif; --text-xs: 0.6875rem; --text-sm: 0.8125rem; --text-base: 0.875rem; --text-md: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; /* =================================================== OMBRES (bleu nuit, jamais noir pur) =================================================== */ --shadow-sm: 0 1px 2px rgba(22, 41, 77, 0.06), 0 1px 1px rgba(22, 41, 77, 0.04); --shadow-md: 0 6px 18px rgba(22, 41, 77, 0.08), 0 1px 3px rgba(22, 41, 77, 0.06); --shadow-lg: 0 18px 44px rgba(22, 41, 77, 0.14); /* =================================================== LAYOUT =================================================== */ --sidebar-collapsed: 68px; --sidebar-expanded: 260px; --header-h: 80px; /* Filet sous l'en-tête : dégradé signature FFBB (nom historique conservé) */ --tricolor: linear-gradient(90deg, #002776 0%, #6A2C6E 50%, #D52B1E 100%); /* En-tête : blanc, filet dégradé FFBB (anciens noms conservés) */ --header-bg-core: #FFFFFF; --header-bg-warm: #FFFFFF; --header-bg-mid: #FFFFFF; --header-bg-peak: #FFFFFF; --header-logo-bg: var(--brand-red); --header-logo-dk: var(--brand-red-dk); color-scheme: light; } /* ===================================================== UTILITAIRES GLOBAUX ===================================================== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }