/* ============================================================ Tokens globaux — Pages d'information légale Alignés sur la palette de référence (bleu nuit #1a1a2e) ============================================================ */ :root { --color-info: #1a1a2e; /* accent principal : boutons, liens, bordures fortes */ --color-info-hover: #111120; /* état hover/focus */ --color-info-light: #eeeef4; /* fonds doux : badges, breadcrumb, aside cards */ --color-info-mid: #4a4a6a; /* texte secondaire, bordures sur fond clair */ --color-info-text: #0d0d1c; /* texte sur fond --light */ } /* ============================================================ Tokens globaux — Rubrique Services Dérivés du héro #1a1a2e (bleu nuit profond) ============================================================ */ :root { --color-services: #1a1a2e; /* accent principal : boutons, liens, bordures fortes */ --color-services-hover: #111120; /* état hover/focus */ --color-services-light: #eeeef4; /* fonds doux : badges, highlight-box, aside cards */ --color-services-mid: #4a4a6a; /* texte secondaire, bordures sur fond clair */ --color-services-text: #0d0d1c; /* texte sur fond --light */ } /* ============================================================ Tokens globaux — Rubrique Publications Alignés sur la palette de référence (bleu nuit #1a1a2e) ============================================================ */ :root { --color-publications: #1a1a2e; /* accent principal : boutons, liens, bordures fortes */ --color-publications-hover: #111120; /* état hover/focus */ --color-publications-light: #eeeef4; /* fonds doux : badges, breadcrumb, aside cards */ --color-publications-mid: #4a4a6a; /* texte secondaire, bordures sur fond clair */ --color-publications-text: #0d0d1c; /* texte sur fond --light */ } /* ============================================================ Tokens neutres — Gris/blancs/noirs sans équivalent Bootstrap Nommés par valeur (pas par rôle) : chaque gris sert tantôt de texte, tantôt de fond, tantôt de bordure selon l'endroit dans main.css — aucun rôle unique ne pourrait être supposé sans risque d'erreur. Ni le rouge ni le jaune Claudine n'ont de token ici (chantiers séparés, voir feedback_design). Pour le blanc/noir et les gris Bootstrap (#f8f9fa, #e9ecef, #dee2e6, #adb5bd, #495057, #343a40, #212529), on réutilise directement --bs-white/--bs-black/--bs-gray-100..900 déjà définis par bootstrap.min.css, chargé avant ce fichier. ============================================================ */ :root { --color-neutral-f5f4f0: #f5f4f0; --color-neutral-f0f0f0: #f0f0f0; --color-neutral-e0deda: #e0deda; --color-neutral-dcdce4: #dcdce4; --color-neutral-ccc: #ccc; --color-neutral-aaa: #aaa; --color-neutral-999: #999; --color-neutral-888: #888; --color-neutral-777: #777; --color-neutral-666: #666; --color-neutral-5f5e5a: #5f5e5a; --color-neutral-555: #555; --color-neutral-444: #444; --color-neutral-333: #333; --color-neutral-2c2c2c: #2c2c2c; --color-neutral-222: #222; --color-neutral-1a1a1a: #1a1a1a; --color-neutral-c9cad4: #c9cad4; --color-neutral-888780: #888780; --color-neutral-e5e7eb: #e5e7eb; } /* ============================================================ Tokens sémantiques — mode clair/sombre (data-bs-theme) Portée : main.css, home.css, publications.css uniquement. Les valeurs claires ci-dessous sont strictement identiques à celles déjà en usage (aucun pixel changé en mode clair) : soit on redéfinit directement un token neutre existant sous [data-bs-theme="dark"] (quand il n'a qu'un seul rôle d'usage dans ces 3 fichiers), soit — quand un token sert à la fois de texte et de fond à des endroits différents, ou appartient à Bootstrap et ne peut pas être redéfini sans risque pour ses propres composants — on crée un token de rôle dédié. Les valeurs sombres réutilisent systématiquement l'échelle --bs-gray-100..900 (Bootstrap 5.3, déjà chargée), pour rester cohérent avec le thème sombre natif des composants Bootstrap. Les éléments déjà sombres et auto-cohérents dans les 2 thèmes (navbar, offcanvas, sections newsletter/prochainement/claudine, badges, dropdown de recherche...) ne sont volontairement pas concernés : ils gardent leurs couleurs actuelles partout. ============================================================ */ /* --- B. Contreparties sombres des tokens à rôle unique --- */ [data-bs-theme="dark"] { --color-neutral-999: var(--bs-gray-500); --color-neutral-888: var(--bs-gray-400); --color-neutral-777: var(--bs-gray-400); --color-neutral-666: var(--bs-gray-300); --color-neutral-555: var(--bs-gray-300); --color-neutral-333: var(--bs-gray-200); --color-neutral-5f5e5a: var(--bs-gray-300); --color-neutral-888780: var(--bs-gray-400); --color-neutral-ccc: var(--bs-gray-500); --color-neutral-aaa: var(--bs-gray-400); --color-neutral-dcdce4: var(--bs-gray-700); --color-neutral-e0deda: var(--bs-gray-700); --color-neutral-f0f0f0: var(--bs-gray-800); --color-neutral-f5f4f0: var(--bs-gray-800); --color-neutral-e5e7eb: var(--bs-gray-700); /* --color-neutral-222, --color-neutral-1a1a1a, --color-neutral-444, --color-neutral-2c2c2c, --color-neutral-c9cad4 : pas d'override ici, voir tokens de rôle dédiés ci-dessous ou éléments auto-cohérents. */ } /* --- C. Tokens de rôle dédiés (usage mixte texte/fond, ou source Bootstrap) --- */ :root { /* Texte fort, valeur claire = #222 (échelle 999→222 volontaire, non fusionnée) ; #222 sert aussi de fond de vignette d'attente (videos-thumb-wrap, agenda-thumb-wrap), qui lui garde --color-neutral-222 tel quel dans les 2 thèmes. */ --text-222: var(--color-neutral-222); /* Texte fort, valeur claire = #1a1a1a (fusionné avec #1a1a18) ; #1a1a1a sert aussi de fond de chrome mobile déjà sombre (mobile-bottom-nav, navbar-collapse), qui garde --color-neutral-1a1a1a tel quel dans les 2 thèmes. */ --text-1a1a1a: var(--color-neutral-1a1a1a); /* Texte fort, valeur claire = #0d0d1c — partagé par --color-services-text / --color-info-text / --color-publications-text (valeur identique dans les 3 palettes). Sert de texte par défaut sur la surface générale de la page (body, cartes blanches, sidebar compte...), qui bascule en sombre. Les mêmes tokens --color-*-text servent AUSSI de texte sur les badges/fils d'Ariane à fond --color-*-light (rose pâle bleu nuit, inchangé en sombre, cf. couleurs de marque hors périmètre) : ces usages-là gardent la référence d'origine, non concernée par --text-strong. */ --text-strong: var(--color-services-text); /* Texte fort = l'accent bleu nuit lui-même (#1a1a2e), partagé par --color-services / --color-info / --color-publications, utilisé comme couleur de lien/CTA par défaut sur toute la surface générale de la page (règle globale `a { color: var(--color-services) }` dans home.css, boutons outline, liens "voir plus"...). Invisible sur les nouvelles surfaces sombres si on ne bascule pas. Contrairement aux autres tokens de cette section, la valeur sombre ci-dessous N'EST PAS puisée dans l'échelle Bootstrap : c'est un éclaircissement du bleu nuit lui-même (mix ~70% blanc), pour garder l'identité de couleur du lien tout en restant lisible — à valider visuellement, c'est un choix de design, pas un simple câblage de token. Les usages sur badge/pastille à fond --color-*-light (inchangé, pâle) gardent la référence d'origine, non concernée par --text-accent. */ --text-accent: var(--color-services); /* Texte secondaire, valeur claire = --color-services-mid / -info-mid / -publications-mid (#4a4a6a, identique dans les 3 palettes) — descriptifs, libellés, sous-titres. Retour utilisateur (2026-08-11, capture d'écran carte "Publications") : le titre (--text-accent) doit devenir bien blanc en sombre, et le descriptif/libellés doivent récupérer l'ancien gris clair qui servait au titre — d'où la valeur sombre ci-dessous, qui réutilise exactement #babac0. --color-*-mid sert aussi de FOND sur 2 badges décoratifs (.badge--mid, dégradé .k5) : ces 2 usages gardent la référence d'origine (non concernée par --text-accent-mid), pour ne pas casser leur couple fond/texte auto-cohérent. */ --text-accent-mid: var(--color-services-mid); /* Fond principal (page/carte) — équivalent sémantique de --bs-white quand utilisé comme surface (pas comme texte inverse sur fond déjà sombre). */ --surface-page: var(--bs-white); /* Fond léger secondaire — équivalent sémantique de --bs-gray-200 en fond/bordure. */ --surface-subtle: var(--bs-gray-200); /* Bordure discrète — équivalent sémantique de --bs-gray-300 en bordure/fond. */ --border-subtle: var(--bs-gray-300); /* Fond "surbrillance" — équivalent sémantique de --color-services-light / -info-light / -publications-light (#eeeef4, identique dans les 3 palettes), MAIS seulement pour les conteneurs dont le contenu utilise --text-accent / --text-accent-mid / --text-strong (donc déjà clair en sombre) : cartes "compte", bandeau contexte listing, survols de ligne (.feed li:hover), boutons outline au survol... Retour utilisateur (2026-08-11) : ces survols en fond blanc pur étaient trop clairs — un gris foncé (= --surface-subtle) convient mieux. Les VRAIS badges/tags statiques (badge-type, breadcrumb-bar, pub-explorer-card...) dont le texte reste la variante -text/-mid non basculée gardent la référence --color-*-light d'origine, non concernée par ce token. */ --surface-highlight: var(--color-services-light); /* Bord gauche d'accent des cartes "mises en avant" (.ec-card--visibilite emplois/marchés, .agenda-card--payant agenda) : en clair c'est le bleu nuit lui-même (--color-services), mais posé sur la surface sombre d'un thème dark il devient invisible. La contrepartie sombre ci-dessous est un éclaircissement de ce même bleu (mix ~65% blanc) : la carte reste identifiable comme "mise en avant" sans changer d'identité de couleur. Ce token déborde volontairement de la portée main/home/publications : il est aussi utilisé par agenda.css, qui applique la même convention. */ --accent-border: var(--color-services); } [data-bs-theme="dark"] { --text-222: var(--bs-gray-100); --text-1a1a1a: var(--bs-white); --text-strong: var(--bs-gray-100); --text-accent: var(--bs-white); --text-accent-mid: #babac0; --surface-page: var(--bs-gray-900); --surface-subtle: var(--bs-gray-800); --surface-highlight: var(--bs-gray-800); --border-subtle: var(--bs-gray-700); --accent-border: #9a9ac6; }