/* ============================================================================= TOKENS — source unique de vérité visuelle du projet Partagée par le front public et le CMS. Aucun composant ne doit écrire une couleur, un rayon ou une taille en dur si un token existe. ============================================================================= DIRECTION Bleu nuit d'encre + papier froid + un carmin éditorial employé avec parcimonie. Les couleurs de chroma sont réservées aux univers éditoriaux (catégories) : le carmin ne sert qu'à l'identité du média, jamais à classer un contenu. Typographie : un serif humaniste pour l'éditorial (autorité, lecture longue), un sans système pour l'interface (netteté, densité). Aucune police distante : zéro requête, zéro dépendance, aucun décalage au chargement. SIGNATURE : le « filet » — une règle de 3 px teintée par la catégorie, posée au-dessus d'un trait d'encre fin. Il ouvre la page, marque les sections et borde les cartes. Il porte une information réelle (l'univers éditorial), il n'est pas un ornement. ============================================================================= */ :root { /* --- Palette de base ---------------------------------------------------- */ --encre: #101A33; /* bleu nuit profond : texte, header, masthead */ --encre-doux: #4A5570; /* texte secondaire */ --encre-pale: #8A93A8; /* légendes, méta */ --papier: #F4F6FB; /* fond d'application, froid et non crème */ --surface: #FFFFFF; --surface-tint: #F8FAFE; /* encadrés, zones calmes */ --trait: #E1E6F0; /* bordures */ --trait-fort: #C4CCDD; /* bordures de champs */ --carmin: #A61E3A; /* accent d'identité — usage rare et délibéré */ --carmin-clair: #FBEDF0; /* --- Sémantique --------------------------------------------------------- */ --texte: var(--encre); --texte-secondaire: var(--encre-doux); --texte-tertiaire: var(--encre-pale); --fond: var(--papier); --action: #24408F; /* bleu d'action, contraste AA sur blanc */ --action-sombre: #1A3070; --action-pale: #EAEFFB; --focus: #24408F; --succes: #14713D; --succes-pale: #E8F6EE; --alerte: #8A5200; --alerte-pale: #FDF3E2; --erreur: #A4162C; --erreur-pale: #FCEDEF; --neutre: #5B6478; --neutre-pale: #F0F2F7; /* --- Univers éditoriaux ------------------------------------------------- Ne jamais écrire ces couleurs dans un composant : passer par --theme-*, redéfini localement par [data-theme]. */ --theme-ai: #3B36B8; --theme-management: #0E6E67; --theme-sales: #93590A; --theme-strategy: #5F2BB3; --theme-culture: #1C6B33; --theme-default: #3C4661; --theme: var(--theme-default); --theme-fond: color-mix(in srgb, var(--theme) 8%, white); /* --- Typographie --------------------------------------------------------- */ --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Hoefler Text", Georgia, "Times New Roman", serif; --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* Échelle fluide : les grands titres respirent sans jamais déborder à 360 px */ --t-display: clamp(2rem, 1.35rem + 2.9vw, 3.5rem); --t-h1: clamp(1.75rem, 1.25rem + 2.2vw, 2.75rem); --t-h2: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem); --t-h3: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem); --t-chapo: clamp(1.1rem, 1rem + 0.55vw, 1.3rem); --t-corps: 1.0625rem; --t-ui: 1rem; --t-petit: 0.875rem; --t-micro: 0.75rem; --lh-serre: 1.15; --lh-titre: 1.25; --lh-corps: 1.7; --lh-ui: 1.5; --gras-titre: 700; --gras-fort: 600; --oeil: 0.08em; /* interlettrage des surtitres */ /* Largeur de lecture : ~68 caractères, cœur de la fourchette 65–75 du CDC */ --mesure: 68ch; --largeur-page: 1120px; --largeur-etroite: 760px; /* --- Espacements (échelle 4/8) ------------------------------------------ */ --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px; --e9: 96px; /* --- Rayons -------------------------------------------------------------- */ --r-petit: 6px; --r-moyen: 10px; --r-grand: 16px; --r-rond: 999px; /* --- Ombres : très légères, la hiérarchie vient du contraste et des traits */ --ombre-1: 0 1px 2px rgba(16, 26, 51, .06); --ombre-2: 0 2px 8px rgba(16, 26, 51, .08); --ombre-3: 0 8px 24px rgba(16, 26, 51, .12); /* --- Cibles tactiles ------------------------------------------------------ */ --touche: 44px; /* minimum absolu */ --touche-large: 52px; /* actions principales sur mobile */ --transition: 140ms ease; /* --- Points de rupture (référence ; les media queries les répètent en dur, CSS ne permettant pas encore de variable dans une media query) ---------- */ --bp-mobile: 360px; --bp-tablette: 768px; --bp-desktop: 1024px; --bp-large: 1440px; color-scheme: light; } /* Univers éditoriaux : appliquer data-theme sur un conteneur suffit à teinter filets, surtitres et badges de toute la zone. */ [data-theme="theme-ai"] { --theme: var(--theme-ai); } [data-theme="theme-management"] { --theme: var(--theme-management); } [data-theme="theme-sales"] { --theme: var(--theme-sales); } [data-theme="theme-strategy"] { --theme: var(--theme-strategy); } [data-theme="theme-culture"] { --theme: var(--theme-culture); } [data-theme="theme-default"] { --theme: var(--theme-default); } /* ----------------------------------------------------------------------------- MODE SOMBRE — PRÉPARÉ, NON ACTIVÉ (décision reportée, CDC §12). Aucune media query prefers-color-scheme n'est branchée : le site reste clair. Poser data-mode="sombre" sur activerait ces valeurs sans qu'aucun composant n'ait à être réécrit — c'est exactement ce que demande le CDC : « prévoir seulement des tokens compatibles si cela reste simple ». Le mode sombre reste un chantier (images éditoriales, filets, contrastes) : ces valeurs sont un point de départ, pas une livraison. -------------------------------------------------------------------------- */ [data-mode="sombre"] { --texte: #E9EDF7; --texte-secondaire: #AAB4CA; --texte-tertiaire: #7E88A0; --fond: #0B1225; --surface: #131C33; --surface-tint: #18223C; --trait: #26314F; --trait-fort: #3A4666; --action: #7C9AF0; --action-pale: #1B2748; color-scheme: dark; }