/** * Horizons Aggregator — jetons de design (direction A « Cartographe »). * Auteur : Zacharie Bégin * * SEULE source de vérité pour les couleurs, les polices et la géométrie. * Aucune valeur de couleur ne doit apparaître ailleurs dans le projet : * `web/test/jetons.test.mjs` le vérifie et fait échouer le build sinon. * * Deux niveaux : * 1. PRIMITIVES — la palette, nommée par teinte et intensité. Jamais utilisée * hors de ce fichier. * 2. RÔLES — ce que le code consomme (--fond, --texte, --explorer…), définis * une fois par thème. Un composant ne connaît que des rôles. * * Deux intentions d'action, jamais mélangées (skill couleur-typo-conversion) : * --explorer (froid) : naviguer, chercher, voir, centrer ; * --acheter (chaud) : s'engager — RÉSERVÉ aux boutons d'achat, pour que * le bouton qui compte soit le seul de sa couleur. * * Thème : , posé par le SERVEUR (témoin * « theme »). « auto » ou absent : on suit le réglage de l'appareil. * Contrastes WCAG vérifiés par web/test/contrastes.test.mjs. */ :root { /* ── Primitives ───────────────────────────────────────────────────────── */ --nuit-950: #070B14; --nuit-900: #0B1220; --nuit-850: #0F1728; --nuit-800: #131C2E; --nuit-750: #1A2538; --nuit-700: #1F2A3D; --nuit-600: #2A3650; --nuit-500: #3D4C69; --nuit-450: #5C6B86; --nuit-300: #8A96AA; --nuit-200: #9AA7BA; --nuit-50: #EEF1F5; --ardoise-950: #0E1726; --ardoise-700: #4A5568; --ardoise-650: #56627A; --ardoise-450: #7C889C; --ardoise-300: #C4CDD9; --ardoise-250: #D5DCE6; --ardoise-200: #E1E6EE; --ardoise-150: #E9EEF4; --ardoise-100: #EEF2F6; --ardoise-50: #F5F7FA; --blanc: #FFFFFF; --turquoise-300: #5FD0DA; --turquoise-400: #38BDC9; --turquoise-800: #075A63; --turquoise-900: #064A52; /* Sarcelle : paliers des graphiques du recensement (validate_palette --ordinal, 2026-09-30 : un seul ton, clair → foncé, chaque palier visible sur sa surface). */ --sarcelle-100: #C6F0F3; --sarcelle-200: #7FD9E1; --sarcelle-300: #5FC0CA; --sarcelle-400: #2FA3AF; --sarcelle-500: #168692; --sarcelle-600: #15818C; --sarcelle-700: #0B6A74; --sarcelle-800: #0E5A63; --ambre-300: #F6C66A; --ambre-400: #F2B544; --ambre-800: #9A6412; --vert-400: #3FB984; --vert-600: #2F9A6C; --vert-800: #155F3E; --vert-700: #1B7048; --violet-300: #B79CFF; --violet-700: #4A2FB0; --rouge-300: #FF8A7A; --rouge-700: #B42318; /* ── Optiques de capteur du globe (indépendantes du thème) ────────────── */ --opt-nuit-fond: #050A14; --opt-nuit-grille: #0E2438; --opt-nuit-point: #7FD4FF; --opt-nuit-chaud: #FFD27F; --opt-therm-fond: #0A0512; --opt-therm-grille: #2A1038; --opt-therm-point: #FF7AD9; --opt-therm-chaud: #FFE24A; --opt-crt-fond: #020A04; --opt-crt-grille: #0C2A12; --opt-crt-point: #5BFF8F; --opt-crt-chaud: #B9FF5B; --opt-noir-fond: #000000; --opt-noir-grille: #141414; --opt-noir-point: #FFFFFF; --opt-noir-chaud: #BBBBBB; /* ── Typographie ──────────────────────────────────────────────────────── */ --titre: 'Fraunces', Georgia, 'Times New Roman', serif; --ui: 'Inter', system-ui, -apple-system, sans-serif; --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace; /* ── Espacement — six pas, pas un de plus ─────────────────────────────── */ --xs: 7px; --s: 12px; --m: 20px; --l: 34px; --xl: 56px; --2xl: 78px; /* ── Géométrie ────────────────────────────────────────────────────────── */ --r-xs: 5px; --r-s: 6px; --r-m: 7px; --r-l: 10px; --r-xl: 12px; --conteneur: 1280px; --gouttiere: 26px; --entete: 53px; /* ── Flou et mouvement ────────────────────────────────────────────────── */ --flou-entete: blur(14px); --flou-hud: blur(8px); --t-couleur: 150ms ease-out; --t-forme: 200ms ease-out; /* Le globe et les volets photo restent sombres dans les deux thèmes : ce sont des images, pas des surfaces de lecture. */ --fond-globe: var(--nuit-950); --fond-photo: var(--nuit-900); --voile-photo: linear-gradient(200deg, rgba(11, 18, 32, .25), rgba(11, 18, 32, .92)); --texte-sur-photo: var(--nuit-50); /* Pings du globe : posés sur une photo satellite toujours sombre, donc mêmes teintes dans les deux thèmes (comme les optiques de capteur). */ --ping: var(--turquoise-400); --ping-vif: var(--turquoise-300); --ping-alerte: var(--violet-300); /* dossiers en détresse */ --ping-neuf: var(--vert-400); /* nouveautés */ --ping-encre: var(--nuit-950); /* fond des pastilles et des étiquettes */ } /* ── RÔLES · thème sombre (défaut, et « auto » sur un appareil sombre) ──── */ :root, :root[data-theme="sombre"] { color-scheme: dark; --fond: var(--nuit-900); --fond-alt: var(--nuit-850); --surface: var(--nuit-800); --surface-haute: var(--nuit-750); --surface-vedette: linear-gradient(165deg, #16303A, var(--nuit-800) 65%); --entete-fond: rgba(11, 18, 32, .93); --hud-fond: rgba(11, 18, 32, .84); --voile-modal: rgba(5, 8, 14, .72); --balayage: rgba(238, 241, 245, .05); --ombre-flottante: 0 20px 56px rgba(0, 0, 0, .55); --trait-section: var(--nuit-700); --trait-carte: var(--nuit-600); --trait-champ: var(--nuit-450); /* ≥ 3:1 : contour de champ */ --trait-fantome: var(--nuit-500); --trait-vedette: #2E6F78; --texte: var(--nuit-50); /* 16,5:1 */ --texte-doux: var(--nuit-200); /* 7,7:1 */ --texte-faible: var(--nuit-300); /* 5,7:1 sur surface */ --texte-filigrane: var(--nuit-600); /* décoratif, jamais informatif */ --sur-titre: var(--turquoise-400); --marque: var(--turquoise-400); --marque-orbite: rgba(56, 189, 201, .45); --explorer: var(--turquoise-400); /* 8,3:1 */ --explorer-survol: var(--turquoise-300); --explorer-voile: rgba(56, 189, 201, .12); --explorer-plein: var(--turquoise-400); --explorer-sur: var(--nuit-900); /* 8,3:1 sur le bouton */ --acheter: var(--ambre-400); /* 10,2:1 */ --acheter-survol: var(--ambre-300); --acheter-bord: var(--ambre-400); --acheter-sur: var(--nuit-900); --succes: var(--vert-400); /* 7,6:1 */ --succes-trait: var(--vert-600); --succes-voile: rgba(63, 185, 132, .14); --alerte: var(--violet-300); /* 8,2:1 */ --alerte-voile: rgba(183, 156, 255, .12); /* Graphiques : cinq paliers d'un seul ton, du plus discret (1) au plus marqué (5) sur ce fond ; barre d'écart positif ; repère du Québec. */ --graphe-1: var(--sarcelle-800); --graphe-2: var(--sarcelle-600); --graphe-3: var(--turquoise-400); --graphe-4: var(--sarcelle-200); --graphe-5: var(--sarcelle-100); --graphe-plus: var(--turquoise-400); --graphe-repere: var(--nuit-300); /* 5,7:1 */ --erreur: var(--rouge-300); /* 7,4:1 */ --erreur-voile: rgba(255, 138, 122, .10); --verrou: var(--nuit-300); --selection-fond: rgba(56, 189, 201, .35); } /* ── RÔLES · thème clair ──────────────────────────────────────────────────── Écrit DEUX fois, à l'identique : pour le choix explicite, et pour « auto » sur un appareil clair (CSS ne partage pas un bloc entre deux conditions). web/test/jetons.test.mjs vérifie que les deux blocs sont identiques. */ :root[data-theme="clair"] { color-scheme: light; --fond: var(--ardoise-50); --fond-alt: var(--ardoise-100); --surface: var(--blanc); --surface-haute: var(--ardoise-150); --surface-vedette: linear-gradient(165deg, #E4F2F3, var(--blanc) 65%); --entete-fond: rgba(245, 247, 250, .93); --hud-fond: rgba(255, 255, 255, .9); --voile-modal: rgba(14, 23, 38, .45); --balayage: rgba(14, 23, 38, .05); --ombre-flottante: 0 20px 56px rgba(14, 23, 38, .18); --trait-section: var(--ardoise-200); --trait-carte: var(--ardoise-250); --trait-champ: var(--ardoise-450); /* ≥ 3:1 : contour de champ */ --trait-fantome: var(--ardoise-300); --trait-vedette: var(--turquoise-800); --texte: var(--ardoise-950); /* 16,7:1 */ --texte-doux: var(--ardoise-700); /* 7,0:1 */ --texte-faible: var(--ardoise-650); /* 5,7:1 */ --texte-filigrane: var(--ardoise-250); --sur-titre: var(--turquoise-800); --marque: var(--turquoise-800); --marque-orbite: rgba(7, 90, 99, .45); --explorer: var(--turquoise-800); /* 7,4:1 */ --explorer-survol: var(--turquoise-900); --explorer-voile: rgba(7, 90, 99, .08); --explorer-plein: var(--turquoise-800); --explorer-sur: var(--blanc); /* 7,6:1 sur le bouton */ --acheter: var(--ambre-400); /* fond de bouton seulement */ --acheter-survol: var(--ambre-300); --acheter-bord: var(--ambre-800); /* contour 4,7:1 */ --acheter-sur: var(--nuit-900); /* 10,2:1 */ --succes: var(--vert-800); /* 7,2:1 */ --succes-trait: var(--vert-700); --succes-voile: rgba(21, 95, 62, .08); --alerte: var(--violet-700); /* 8,4:1 */ --alerte-voile: rgba(74, 47, 176, .08); --graphe-1: var(--sarcelle-300); --graphe-2: var(--sarcelle-400); --graphe-3: var(--sarcelle-500); --graphe-4: var(--sarcelle-700); --graphe-5: var(--turquoise-900); --graphe-plus: var(--sarcelle-500); --graphe-repere: var(--ardoise-450); /* 3,5:1, repère non textuel */ --erreur: var(--rouge-700); /* 6,1:1 */ --erreur-voile: rgba(180, 35, 24, .07); --verrou: var(--ardoise-650); --selection-fond: rgba(7, 90, 99, .22); } @media (prefers-color-scheme: light) { :root:not([data-theme="sombre"]):not([data-theme="clair"]) { color-scheme: light; --fond: var(--ardoise-50); --fond-alt: var(--ardoise-100); --surface: var(--blanc); --surface-haute: var(--ardoise-150); --surface-vedette: linear-gradient(165deg, #E4F2F3, var(--blanc) 65%); --entete-fond: rgba(245, 247, 250, .93); --hud-fond: rgba(255, 255, 255, .9); --voile-modal: rgba(14, 23, 38, .45); --balayage: rgba(14, 23, 38, .05); --ombre-flottante: 0 20px 56px rgba(14, 23, 38, .18); --trait-section: var(--ardoise-200); --trait-carte: var(--ardoise-250); --trait-champ: var(--ardoise-450); /* ≥ 3:1 : contour de champ */ --trait-fantome: var(--ardoise-300); --trait-vedette: var(--turquoise-800); --texte: var(--ardoise-950); /* 16,7:1 */ --texte-doux: var(--ardoise-700); /* 7,0:1 */ --texte-faible: var(--ardoise-650); /* 5,7:1 */ --texte-filigrane: var(--ardoise-250); --sur-titre: var(--turquoise-800); --marque: var(--turquoise-800); --marque-orbite: rgba(7, 90, 99, .45); --explorer: var(--turquoise-800); /* 7,4:1 */ --explorer-survol: var(--turquoise-900); --explorer-voile: rgba(7, 90, 99, .08); --explorer-plein: var(--turquoise-800); --explorer-sur: var(--blanc); /* 7,6:1 sur le bouton */ --acheter: var(--ambre-400); /* fond de bouton seulement */ --acheter-survol: var(--ambre-300); --acheter-bord: var(--ambre-800); /* contour 4,7:1 */ --acheter-sur: var(--nuit-900); /* 10,2:1 */ --succes: var(--vert-800); /* 7,2:1 */ --succes-trait: var(--vert-700); --succes-voile: rgba(21, 95, 62, .08); --alerte: var(--violet-700); /* 8,4:1 */ --alerte-voile: rgba(74, 47, 176, .08); --graphe-1: var(--sarcelle-300); --graphe-2: var(--sarcelle-400); --graphe-3: var(--sarcelle-500); --graphe-4: var(--sarcelle-700); --graphe-5: var(--turquoise-900); --graphe-plus: var(--sarcelle-500); --graphe-repere: var(--ardoise-450); /* 3,5:1, repère non textuel */ --erreur: var(--rouge-700); /* 6,1:1 */ --erreur-voile: rgba(180, 35, 24, .07); --verrou: var(--ardoise-650); --selection-fond: rgba(7, 90, 99, .22); } } /* ── Zones posées sur une PHOTO (toujours sombre, dans les deux thèmes) ────── Les volets photo de la connexion et de l'inscription restent des images sombres : le texte qui les couvre garde la palette sombre, sinon le thème clair y écrirait du texte foncé sur fond foncé. */ .sur-photo { color-scheme: dark; --texte: var(--nuit-50); --texte-doux: var(--nuit-200); --texte-faible: var(--nuit-300); --sur-titre: var(--turquoise-400); --marque: var(--turquoise-400); --explorer: var(--turquoise-400); --succes: var(--vert-400); --verrou: var(--nuit-300); color: var(--texte); } @media (max-width: 639px) { :root { --gouttiere: 20px; --2xl: 56px; } } /* Le mouvement est une préférence, pas un choix de design. */ @media (prefers-reduced-motion: reduce) { :root { --t-couleur: 0ms; --t-forme: 0ms; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }