/* ============================================================ PARFORMANCE — Design Tokens Inspiration British Open Leaderboard Jaune-papier ambre / Navy / Rouge brique / Vert sport ------------------------------------------------------------ ROLE DANS L'ARCHITECTURE CSS : Cette feuille est le SOCLE du design system Parformance (PWA stats de golf, cible mobile = Galaxy S7 360px). Elle ne contient AUCUN composant de layout (header, dock, cartes…) : ces derniers vivent dans d'autres feuilles. Ici on trouve uniquement : 1. Les design tokens (variables CSS sous :root) — couleurs, typographie, espacements, rayons, ombres, motion ; 2. Les reset/base (html, body) ; 3. Les utilitaires de typographie (.t-*) ; 4. La gestion de l'accessibilité (focus, skip-link, sr-only, prefers-reduced-motion) ; 5. Les thèmes (dark via [data-theme="dark"], light override). NOTE : tout le reste du site CONSOMME ces variables. Modifier un token ici se répercute partout — c'est le point d'entrée unique du thème. Les couleurs récurrentes du chrome (bleu #1E5C9B, fonds clairs #EEF3FA) sont déclinées via les échelles --navy-* / --azur-* et --cream-* / --mint-* ci-dessous. ============================================================ */ /* Google Fonts chargées via async dans main.php (hors chemin critique, display=optional → CLS=0). */ /* :root porte TOUS les tokens. Les déclarer ici (et non sur html/body) garantit une portée globale et la plus haute spécificité d'origine utilisateur, exploitable par n'importe quel sous-arbre du DOM. */ :root { /* ────────────── COLOR — RAW SCALES ────────────── */ /* NOTE: échelles BRUTES (50→900, clair→foncé comme Tailwind). Elles ne sont JAMAIS consommées directement par les composants : on passe par les alias sémantiques (--bg, --fg-*, --accent…) plus bas. Cette indirection permet de rebrander/dark-mode en ne réassignant QUE les tokens sémantiques. Le ★ marque la teinte « pivot » de chaque famille (celle réellement mise en avant). */ /* Green — vert Augusta, CTA */ --green-50: #EBF4ED; --green-100: #D2E8D8; --green-200: #A6D0B0; --green-300: #6FB082; --green-400: #3E9159; --green-500: #1F7A3E; /* ★ CTA primaire */ --green-600: #176030; --green-700: #114826; /* Brick — rouge punchy (leader / danger / accent) */ --brick-300: #ED9385; --brick-400: #DD5C4A; --brick-500: #C8302C; /* ★ accent rouge */ --brick-600: #A52320; --brick-700: #7E1A18; /* NOTE: alias de rétro-compat. D'anciens composants référençaient --coral-* / --cream-* / --mist-* / --ink-* ; plutôt que de tout renommer (risque de régression), on fait pointer ces noms vers la nouvelle famille. Aucun coût runtime, pas de double maintenance. */ /* Aliases coral pour rétro-compat (mappent vers brick) */ --coral-300: var(--brick-300); --coral-400: var(--brick-400); --coral-500: var(--brick-500); --coral-600: var(--brick-600); /* Paper — orange couchant (accent chaud secondaire) */ --paper-50: #FCEFE2; --paper-100: #F8DCC2; --paper-200: #F2C293; --paper-300: #E0772E; /* ★ orange accent */ --paper-400: #C25F1E; /* Mint — blanc cassé chaud, fond app principal */ --mint-50: #F7F7F2; /* surface elevée */ --mint-100: #EFEFE9; /* ★ background app — crème chaud */ --mint-200: #E3E3DA; --mint-300: #CFCFC2; --mint-400: #AEAEA0; /* Aliases pour rétro-compat (anciennement mist/cream → mappent vers mint) */ --cream-50: var(--mint-50); --cream-100: var(--mint-100); --cream-200: var(--mint-200); --cream-300: var(--mint-300); --mist-50: var(--mint-50); --mist-100: var(--mint-100); --mist-200: var(--mint-200); --mist-300: var(--mint-300); /* Navy — texte / chrome */ --navy-900: #141C30; /* ★ texte principal, chrome */ --navy-800: #1B2540; --navy-700: #243152; --navy-600: #324166; --navy-500: #4E5E80; --navy-400: #7886A4; --navy-300: #A8B2C8; --navy-200: #CDD3E0; --navy-100: #E6E9F0; /* Aliases ink (mappent vers navy) */ --ink-900: var(--navy-900); --ink-700: var(--navy-700); --ink-500: var(--navy-500); --ink-300: var(--navy-300); /* Carbon — surfaces sombres (dark mode + sections inversées) */ --carbon-50: #F2F3F1; --carbon-100: #DDDFDB; --carbon-200: #BFC2BD; --carbon-300: #8A8E89; --carbon-400: #5A5E59; --carbon-500: #3A3D38; --carbon-600: #26282A; --carbon-700: #1A1C1B; --carbon-800: #131514; --carbon-900: #0A0B0A; /* Lime — accent énergie électrique */ --lime-300: #E5FF8A; --lime-400: #C7FF2E; /* ★ accent vif */ --lime-500: #A4E600; --lime-600: #7FB800; /* Magenta — accent secondaire (alertes, données négatives, pop) */ --magenta-300: #FF7AB5; --magenta-400: #FF4A9E; --magenta-500: #FF1F87; --magenta-600: #D40D6E; /* Azur — bleu ciel (accent dark theme, drapeau tricolore) */ --azur-300: #8FC6EF; --azur-400: #4DA3E0; --azur-500: #2E8BD4; /* ★ accent azur */ --azur-600: #2270B0; --azur-700: #1A5688; /* Slate — surfaces sombres palette 9 */ --slate-900: #10151C; --slate-800: #161D26; --slate-700: #1A222C; --slate-600: #283340; --slate-500: #3C4A5A; --slate-400: #5A6B7E; --slate-300: #93A0AE; --slate-200: #C2CAD3; --slate-100: #E4E8EC; /* Forest — vert Augusta National profond (★ fond dark) */ --forest-900: #0C3D29; /* ★ fond dark — vert Augusta */ --forest-800: #0F472F; --forest-700: #14543A; --forest-600: #1C6646; --forest-500: #2C7E59; --forest-400: #4A9A74; --forest-300: #82BC9C; --forest-200: #B8D8C5; --forest-100: #DFEDE5; /* Sémantiques d'état — couleurs « métier ». WARNING au golf, un score SOUS le par est BON : --danger (rouge brique) n'est donc pas un signal d'erreur ici mais un accent fort de leaderboard. Ne pas l'interpréter comme « erreur » lors d'un réusage. */ /* Sémantiques */ --success: var(--green-500); /* sur-par évité / progrès positif */ --warning: #D9A748; --danger: var(--brick-500); /* sous-par sur leaderboard = positif au golf, ici accent fort */ --info: var(--navy-700); /* ────────────── COLOR — SEMANTIC ────────────── */ /* COUCHE SÉMANTIQUE : c'est ce que les composants consomment. Le dark mode et le light override ne réécrivent QUE ces tokens (voir [data-theme="dark"] et .light en bas de fichier). */ /* Cream — fond clair par défaut (thème 01) */ --cream-page: #F0EDE6; --cream-panel: #FBF9F3; --cream-line: #E3DECF; /* Palette graphiques : 7 teintes choisies pour rester DISTINGUABLES les unes des autres (séries empilées, donuts). Ordre = ordre d'affectation par les libs de charts. */ /* Chart palette — multicolore pour graphiques (thème 01) */ --chart-1: #2E8BD4; --chart-2: #2C7E59; --chart-3: #E08A2B; --chart-4: #C8302C; --chart-5: #6B4FA0; --chart-6: #0E7C86; --chart-7: #D4B23C; /* Surfaces */ --bg: var(--cream-page); /* crème clair, fond app (thème 01) */ --surface-1: var(--cream-panel); --surface-2: #FFFFFF; --surface-inv: var(--navy-900); --surface-hero: var(--navy-900); /* Text — hiérarchie de contraste. NOTE: les ratios (xx:1) sont mesurés sur --bg crème ; --fg-3 et --fg-4 ont été RELEVÉS (navy-700 / navy-500) après audit a11y car leurs anciennes valeurs échouaient au AA. Ne pas les redescendre vers navy-500/navy-300. */ /* Text */ --fg-1: var(--navy-900); /* 13.8:1 — AAA */ --fg-2: var(--navy-700); /* 11.0:1 — AAA */ --fg-3: var(--navy-700); /* 11.0:1 — anciennement navy-500 (3.4:1, fail AA) */ --fg-4: var(--navy-500); /* 4.8:1 — anciennement navy-300 (1.7:1, fail AA) */ --fg-on-dark: var(--paper-50); --fg-accent: var(--brick-500); /* Borders — exprimées en rgba semi-transparent (et non en teinte pleine) pour se fondre sur N'IMPORTE quel fond sans casser le contraste : la même bordure marche sur crème, blanc ou surface élevée. */ /* Borders */ --border-1: rgba(14,31,61,0.12); --border-2: rgba(14,31,61,0.06); --border-strong: rgba(14,31,61,0.28); --border-focus: var(--azur-600); /* Brand */ --brand: var(--navy-900); --brand-strong: var(--navy-700); --brand-soft: var(--navy-100); --accent: var(--azur-500); /* bleu accent (thème 01) */ --cta: var(--azur-500); /* ────────────── TYPOGRAPHY — FAMILIES ────────────── */ /* NOTE: ces tokens de FAMILLE sont réassignés sous 600px (voir media query plus bas) pour basculer le body en Barlow Semi Condensed — gain de largeur de ligne sur Galaxy S7. Les fallbacks système (-apple-system…) évitent le FOUT si Google Fonts tarde. */ /* Display = Barlow Condensed — condensée humaniste, impact sportif + chaleur */ --font-display: 'Barlow Condensed', 'Oswald', 'Arial Narrow', sans-serif; /* Body = Plus Jakarta Sans — lisibilité 10/10 */ --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Mono = data, eyebrows, labels */ --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ────────────── TYPOGRAPHY — SCALE ────────────── */ /* Display (serif) */ /* NOTE: clamp(min, préféré-en-vw, max) = typo fluide. Le terme central en vw fait grandir le titre avec la largeur d'écran ; les bornes px bloquent les extrêmes — 56px mini garantit la lisibilité sur 360px, 96px maxi évite des titres démesurés sur grand écran. */ --t-hero: clamp(56px, 7vw, 96px); /* @kind font */ --t-display: clamp(40px, 5vw, 64px); /* @kind font */ --t-h1: 40px; /* @kind font */ --t-h2: 30px; /* @kind font */ --t-h3: 22px; /* @kind font */ /* Body (sans) */ --t-body-l: 18px; /* @kind font */ --t-body: 16px; /* @kind font */ --t-body-s: 14px; /* @kind font */ --t-caption: 12px; /* @kind font */ /* Mono / labels */ --t-mono: 14px; /* @kind font */ --t-eyebrow: 12px; /* @kind font */ /* Line heights */ --lh-hero: 0.92; /* @kind font */ --lh-tight: 1.08; /* @kind font */ --lh-snug: 1.25; /* @kind font */ --lh-base: 1.5; /* @kind font */ --lh-loose: 1.65; /* @kind font */ /* Letter spacing */ --ls-hero: -0.03em; /* @kind font */ --ls-display: -0.02em; /* @kind font */ --ls-tight: -0.01em; /* @kind font */ --ls-eyebrow: 0.12em; /* @kind font */ /* Weights */ --w-light: 300; /* @kind font */ --w-reg: 400; /* @kind font */ --w-med: 500; /* @kind font */ --w-semi: 600; /* @kind font */ --w-bold: 700; /* @kind font */ /* ────────────── SPACING ────────────── */ /* Échelle d'espacement quasi-géométrique basée sur 4px (4/8/12/16/24/ 32/48/64/96). Utiliser EXCLUSIVEMENT ces pas garde des marges/gaps cohérents partout et évite les valeurs « magiques » ad hoc. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* ────────────── RADIUS ────────────── */ /* --r-pill: 999px = astuce « pilule » : un rayon volontairement énorme force des bords parfaitement semi-circulaires quelle que soit la hauteur de l'élément (boutons arrondis, badges). */ --r-xs: 2px; --r-sm: 4px; --r-md: 8px; --r-lg: 16px; --r-pill: 999px; /* ────────────── ELEVATION ────────────── */ /* Deux niveaux d'ombre seulement (carte posée / carte flottante). Teinte sombre + alpha faible = ombre douce réaliste sur fond crème, jamais un gris « sale ». */ --shadow-1: 0 1px 3px rgba(26, 31, 27, 0.06); --shadow-2: 0 6px 20px rgba(26, 31, 27, 0.08); /* ────────────── MOTION ────────────── */ /* --ease-out a un fort « overshoot » initial (y=1 atteint tôt) : effet vif et naturel à l'entrée d'un élément. Durées graduées du micro- feedback (80ms) à l'animation héroïque (600ms). WARNING: toutes ces transitions sont neutralisées par prefers-reduced-motion (voir base). */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */ --ease-in: cubic-bezier(0.5, 0, 1, 0.5); /* @kind other */ --dur-micro: 80ms; /* @kind other */ --dur-fast: 200ms; /* @kind other */ --dur-base: 400ms; /* @kind other */ --dur-hero: 600ms; /* @kind other */ } /* ============================================================ BASE — reset minimal + valeurs par défaut du document. On ne consomme ici que des tokens : changer le thème suffit à reskiner toute la page sans toucher à ce bloc. ============================================================ */ html, body { margin: 0; /* annule la marge UA par défaut du body */ background: var(--bg); color: var(--fg-1); font-family: var(--font-body); font-size: var(--t-body); line-height: var(--lh-base); -webkit-font-smoothing: antialiased; /* WebKit/Blink : rendu plus fin du texte clair-sur-foncé */ text-rendering: optimizeLegibility; /* active ligatures/kerning (léger surcoût, OK pour texte courant) */ } /* ============================================================ RESPONSIVE TYPE — mobile passe en familles condensées (narrow). PC / tablette gardent Plus Jakarta Sans (body) + Barlow Condensed (display). Sous 600px, le body adopte Barlow Semi Condensed pour gagner en largeur de ligne sur petit écran ; le display reste Barlow Condensed (déjà étroit). Seuls les tokens de FAMILLE changent — tailles, line-heights et couleurs inchangés. ============================================================ */ /* NOTE: breakpoint 600px = frontière téléphone/tablette. La cible réelle (Galaxy S7, 360px) est largement sous ce seuil, donc le mobile reçoit TOUJOURS les familles condensées. On ne réassigne QUE --font-body et --font-display : tailles, line-heights et couleurs restent identiques, ce qui évite tout reflow de mise en page au franchissement du seuil. */ @media (max-width: 600px) { :root { --font-body: 'Barlow Semi Condensed', 'Plus Jakarta Sans', -apple-system, sans-serif; --font-display: 'Barlow Condensed', 'Oswald', 'Arial Narrow', sans-serif; } body { letter-spacing: 0.005em; } /* léger rattrapage de lisibilité en condensé */ } /* ============================================================ SEMANTIC TYPE — classes utilitaires de typographie. Au lieu de styler chaque

/

par sa balise, on applique une classe .t-* qui assemble les tokens (famille + taille + graisse + interligne + couleur). Avantage : un titre peut être un

et garder le bon style, et la hiérarchie typo est découplée du HTML. ============================================================ */ .t-hero { font-family: var(--font-display); font-size: var(--t-hero); font-weight: var(--w-light); line-height: var(--lh-hero); letter-spacing: var(--ls-hero); color: var(--fg-1); } .t-display { font-family: var(--font-display); font-size: var(--t-display); font-weight: var(--w-reg); line-height: var(--lh-tight); letter-spacing: var(--ls-display); color: var(--fg-1); } .t-h1 { font-family: var(--font-display); font-size: var(--t-h1); font-weight: var(--w-reg); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--fg-1); } .t-h2 { font-family: var(--font-display); font-size: var(--t-h2); font-weight: var(--w-reg); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--fg-1); } .t-h3 { font-family: var(--font-body); font-size: var(--t-h3); font-weight: var(--w-semi); line-height: var(--lh-snug); color: var(--fg-1); } .t-body-l { font-family: var(--font-body); font-size: var(--t-body-l); font-weight: var(--w-reg); line-height: var(--lh-loose); color: var(--fg-2); } .t-body { font-family: var(--font-body); font-size: var(--t-body); font-weight: var(--w-reg); line-height: var(--lh-base); color: var(--fg-1); } .t-body-s { font-family: var(--font-body); font-size: var(--t-body-s); font-weight: var(--w-reg); line-height: var(--lh-base); color: var(--fg-2); } .t-caption { font-family: var(--font-body); font-size: var(--t-caption); font-weight: var(--w-reg); line-height: var(--lh-snug); color: var(--fg-3); } .t-mono { font-family: var(--font-mono); font-size: var(--t-mono); font-weight: var(--w-reg); letter-spacing: 0; color: var(--fg-2); } .t-eyebrow { font-family: var(--font-mono); font-size: var(--t-eyebrow); font-weight: var(--w-med); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--fg-3); } .t-italic { font-style: italic; } /* NOTE: tabular-nums force des chiffres à chasse FIXE — indispensable pour aligner verticalement scores et colonnes de stats (sinon le « 1 » est plus étroit et les nombres « dansent » d'une ligne à l'autre). */ .t-num { font-variant-numeric: tabular-nums; } /* ============================================================ FOCUS STATE — double anneau visible sur tout fond ============================================================ */ /* Technique « double anneau » : un liseré BLANC (outline) entouré d'un halo SOMBRE (box-shadow). Quel que soit le fond — clair, sombre, coloré — au moins l'un des deux anneaux contraste, donc le focus reste toujours visible (exigence a11y). :focus-visible ne cible que le focus clavier, pas les clics souris, pour ne pas polluer l'UI au pointeur. */ :focus-visible { outline: 2px solid #fff; outline-offset: 2px; /* écarte l'anneau de l'élément pour qu'il « respire » */ box-shadow: 0 0 0 4px var(--navy-900); /* 2e anneau sombre, dessiné autour de l'outline blanc */ border-radius: var(--r-sm); } /* Skip-link : lien « aller au contenu » pour la navigation clavier/lecteur d'écran. Caché hors écran (left:-9999px plutôt que display:none, pour rester focusable), il réapparaît (left:0) UNIQUEMENT au focus. WARNING: z-index:1000 le place au-dessus du chrome du site afin qu'il ne soit jamais masqué quand il s'affiche — c'est le plus haut empilement de cette feuille (le focus a priorité visuelle absolue). */ .skip-link { position: absolute; left: -9999px; /* hors viewport mais toujours dans le flux focusable */ top: 0; background: var(--navy-900); color: #fff; padding: 12px 20px; border-radius: 0 0 8px 0; /* coin inf-droit arrondi : effet « languette » sous le coin sup-gauche */ font-family: var(--font-mono); font-size: 13px; font-weight: 700; text-decoration: none; z-index: 1000; } .skip-link:focus { left: 0; } /* révélé au focus clavier uniquement */ /* .sr-only : visible UNIQUEMENT pour les lecteurs d'écran. Recette classique « clip » — on ne peut pas utiliser display:none ni visibility:hidden car ceux-ci retirent l'élément de l'arbre d'accessibilité. À la place : 1×1px, débordement masqué et clip réduisent la zone rendue à néant tout en gardant le texte annonçable. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; /* margin négative absorbe le 1px restant dans le flux */ overflow: hidden; clip: rect(0,0,0,0); /* clip (déprécié mais le mieux supporté pour ce pattern) */ white-space: nowrap; border: 0; } /* a11y : respecte le réglage système « réduire les animations ». On ne met pas 0s (certains scripts attendent l'event transitionend/animationend pour s'exécuter) mais 0.001ms — quasi instantané tout en déclenchant l'event. !important écrase toute durée définie par un composant. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* TODO: bloc de focus historique, remplacé par le double-anneau ci-dessus. Le sélecteur ._noop_old_focus n'est appliqué à aucun élément (mort) ; conservé pour mémoire/diff, à supprimer lors d'un nettoyage. */ /* legacy focus block (replaced) */ ._noop_old_focus { outline: 2px solid var(--border-focus); outline-offset: 3px; border-radius: var(--r-sm); } /* ============================================================ DARK MODE — ré-assigne UNIQUEMENT les tokens sémantiques. Aucune couleur brute ni composant n'est touché : pose data-theme="dark" sur (ou retire-le pour le clair). Pour suivre l'OS : voir le bloc @media plus bas. ============================================================ */ /* NOTE: le dark mode est piloté par un ATTRIBUT (data-theme="dark") et non par @media : un script JS pose l'attribut au chargement (voir le snippet commenté plus bas). Avantage : l'utilisateur peut forcer un thème indépendamment de l'OS, et le DS reste « propre » (pas de tokens noyés sous media-query). Tout ce bloc ne réécrit QUE des tokens sémantiques. */ [data-theme="dark"] { /* Surfaces — Forest (vert sapin profond) + azur / rouge */ --bg: var(--forest-900); --surface-1: var(--forest-700); --surface-2: var(--forest-600); --surface-inv: var(--mint-100); --surface-hero: #08301F; /* Texte — clair sur forest (ratios AA/AAA vérifiés) */ --fg-1: #F1F5F1; /* ~15:1 */ --fg-2: var(--forest-200); /* ~10:1 */ --fg-3: var(--forest-200); /* ~10:1 */ --fg-4: var(--forest-300); /* ~5:1 — large text / icônes */ --fg-on-dark: #F1F5F1; --fg-accent: #4DA3E0; /* azur éclairci pour contraste sur forest */ /* Bordures — alpha clair */ --border-1: rgba(255,255,255,0.12); --border-2: rgba(255,255,255,0.06); --border-strong: rgba(255,255,255,0.30); --border-focus: #F1F5F1; /* Brand — azur + rouge */ --brand: #F1F5F1; --brand-strong: var(--azur-400); --brand-soft: var(--forest-600); --accent: #E23B3B; /* rouge vif */ --cta: #E23B3B; /* CTA rouge sur forest */ background: var(--bg); color: var(--fg-1); } /* Focus visible en dark : on INVERSE le double-anneau (liseré sombre + halo clair) car sur fond forest, l'anneau sombre du thème clair disparaîtrait. Garantit le même contraste de focus en dark. */ /* Focus visible en dark : anneau inversé (sombre + halo clair) */ [data-theme="dark"] :focus-visible { outline-color: var(--navy-900); box-shadow: 0 0 0 4px var(--mint-50); } /* Pour suivre automatiquement le thème de l'OS, le site consommateur pose data-theme au chargement (garde le DS propre, pas de tokens sous media-query) : const m = matchMedia('(prefers-color-scheme: dark)'); const set = () => document.documentElement.setAttribute( 'data-theme', m.matches ? 'dark' : 'light'); set(); m.addEventListener('change', set); ============================================================ */ /* ============================================================ LIGHT MODE override (pour preview cards / écrans secondaires) ------------------------------------------------------------ NOTE: thème clair « froid » basé sur carbon (gris neutres), distinct du thème 01 crème par défaut. Appliqué via une CLASSE .light sur un conteneur — sert à forcer un îlot clair (cartes d'aperçu, écrans secondaires) au sein d'une page potentiellement en dark. Comme [data-theme], il ne réécrit que des tokens sémantiques. ============================================================ */ .light, .light body { --bg: var(--cream-100); --surface-1: var(--cream-50); --surface-2: #FFFFFF; --fg-1: var(--carbon-900); --fg-2: var(--carbon-500); --fg-3: var(--carbon-400); --fg-4: var(--carbon-300); --border-1: var(--carbon-200); --border-2: var(--carbon-100); background: var(--bg); color: var(--fg-1); }