/* ============================================================================= 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]. Palette resserrée itération 19 : les six teintes d'origine (IA/Stratégie d'un côté, Management/Culture de l'autre) étaient trop proches pour se distinguer d'un coup d'œil — six teintes réparties plus franchement autour du cercle chromatique, dans le même registre sobre/éditorial. Les clés (--theme-ai, --theme-management…) et [data-theme="…"] ne changent pas : seule la couleur associée à chacune est ajustée, le système d'affectation catégorie → couleur reste identique. */ --theme-ai: #1B63C4; --theme-management: #0E8F7A; --theme-sales: #C1790A; --theme-strategy: #8B2FC9; --theme-culture: #3F8F1C; --theme-default: #55607A; /* Six teintes supplémentaires (itération 22) : au moins 12 couleurs de catégorie distinctes demandées. Choisies pour combler les intervalles laissés par les six ci-dessus sur le cercle chromatique — jamais deux couleurs voisines en teinte. */ --theme-lime: #8A9C12; --theme-menthe: #1AA84A; --theme-cyan: #0E8FB5; --theme-indigo: #4A3FC7; --theme-rose: #B02B72; --theme-brique: #C4432B; --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; /* --- Identité « Le Cercle 2030 » (itération 14) ------------------------- Réservée au menu général (partout) et à l'espace membre — connexion, annuaire, mon compte, Mon Cercle. Le corps éditorial (articles, accueil) garde la palette --encre/--papier ci-dessus : ce n'est pas un changement d'identité du média, seulement de l'espace membre et du bandeau commun. */ --cercle-marine: #09172E; --cercle-marine-clair: #131C33; --cercle-marine-trait: #232E4C; --cercle-or: #EAB54A; --cercle-or-sombre: #C8922E; --cercle-texte-clair: #F4F6FB; --cercle-texte-doux: #AEB6CC; /* Cadres clairs sur fond sombre (itération 15, palette ajustée itération 16) : les cartes de l'espace membre (connexion, annuaire, Mon compte, Mon Cercle, recherche) passent de « carte marine » à « carte claire » posée sur une scène marine. */ --cercle-carte: #F3F7FD; --cercle-carte-douce: #FAFCFF; --cercle-carte-bordure: #D7E0ED; --cercle-carte-texte: #0B1830; --cercle-carte-texte-doux: #4E5E78; /* --cercle-or-sombre reste taillé pour un fond marine (boutons, hover) ; en texte sur cadre clair il manque de contraste — variante plus soutenue réservée aux libellés/liens or posés sur --cercle-carte. */ --cercle-or-texte: #8A5A0A; 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); } [data-theme="theme-lime"] { --theme: var(--theme-lime); } [data-theme="theme-menthe"] { --theme: var(--theme-menthe); } [data-theme="theme-cyan"] { --theme: var(--theme-cyan); } [data-theme="theme-indigo"] { --theme: var(--theme-indigo); } [data-theme="theme-rose"] { --theme: var(--theme-rose); } [data-theme="theme-brique"] { --theme: var(--theme-brique); } /* ----------------------------------------------------------------------------- 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; }