/* ============================================================ THEME SYSTEM v5.0 — JSL Distribution - Source unique des tokens (light/dark) + layout tokens - Aucun style composant ici (uniquement variables) - Chargé après styles.css (legacy intouchable) ============================================================ */ :root { /* ---------- Palette premium (institutionnelle) ---------- */ --premium-bg: #f7f9fc; --premium-fg: #1a1a1a; --premium-muted: #4b5563; --premium-card: #ffffff; --premium-border: #e6e9ef; --premium-border-strong: #d7dde6; --premium-primary-500: #1f3c88; --premium-primary-600: #1a357a; --premium-accent-500: #c3002f; --premium-accent-600: #9f0026; /* ---------- Rayons / ombres / transitions ---------- */ --premium-radius-8: 8px; --premium-radius-12: 12px; --premium-radius-16: 16px; --premium-shadow-1: 0 8px 30px rgba(0, 0, 0, 0.06); --premium-shadow-2: 0 14px 35px rgba(0, 0, 0, 0.10); --transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 200ms ease, transform 200ms ease; /* ---------- Mapping tokens legacy → premium (compat) ---------- */ --bg: var(--premium-bg); --fg: var(--premium-fg); --muted: var(--premium-muted); --card: var(--premium-card); --border-strong: var(--premium-border); --primary-500: var(--premium-primary-500); --primary-600: var(--premium-primary-600); --primary: var(--premium-primary-500); --primary-dark: var(--premium-primary-600); --danger: var(--premium-accent-500); --danger-600: var(--premium-accent-600); --radius: var(--premium-radius-12); --shadow: var(--premium-shadow-1); --shadow-hover: var(--premium-shadow-2); /* ---------- Breakpoints (documentation / cohérence) ---------- */ /* UI-14 — echelle de points de rupture : declaree, mais NON CONSOMMABLE. --------------------------------------------------------------------- Une media query ne peut pas lire une propriete personnalisee : la regle `@media (min-width: var(--bp-md))` est invalide et ignoree. Ces six jetons ne sont donc utilises nulle part — verifie sur le CSS, les gabarits, le JavaScript et le Python. Ils valent comme DOCUMENTATION de l'echelle voulue, rien de plus, et sont conserves a ce titre. Echelle REELLEMENT employee, mesuree sur les 40 feuilles du projet : 480 (37 occurrences, 6 feuilles) <- correspond a --bp-sm 640 (18 occurrences, 14 feuilles) <- absent de l'echelle declaree 720 (11 occurrences, 6 feuilles) <- absent 768 (30 occurrences, 11 feuilles) <- correspond a --bp-md 900 (13 occurrences, 7 feuilles) <- absent 1024 (35 occurrences, 16 feuilles) <- correspond a --bp-lg 1920 ( 8 occurrences, 7 feuilles) <- absent Les valeurs voisines (479/480/481, 719/720, 768/769, 1023/1024/1025) ne sont pas des doublons : ce sont les bornes complementaires d'un meme point, la maniere usuelle d'eviter un recouvrement entre `max-width` et `min-width`. Comptees separement, elles portaient l'inventaire d'UI-13 a 41 valeurs ; regroupees, il reste 35 points logiques. `--bp-xl` (1280) et `--bp-xxl` (1600) sont declares mais quasi inusites (2 et 1 occurrences). Les valeurs ne sont pas modifiees : les changer n'aurait aucun effet de rendu, et ferait perdre la trace de l'intention d'origine. */ --bp-xs: 0px; --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-xxl: 1600px; /* ---------- Layout tokens (mobile-first) ---------- */ --ui-pad-y: 10px; --ui-pad-x: 16px; --ui-content-max: 1100px; --ui-card-pad-y: 18px; --ui-card-pad-x: 18px; /* Safe-area (notch): symétrique pour garder le contenu visuellement centré */ --ui-safe-lr: max(env(safe-area-inset-left), env(safe-area-inset-right)); --ui-safe-t: env(safe-area-inset-top); --ui-safe-b: env(safe-area-inset-bottom); /* Typographie */ --ui-font-base: 16px; --ui-h1: clamp(1.5rem, 1.2vw + 1.1rem, 2.25rem); --ui-h2: clamp(1.1rem, 0.8vw + 0.9rem, 1.6rem); --ui-h3: clamp(1.0rem, 0.6vw + 0.85rem, 1.25rem); /* Tables */ --ui-table-font: 0.95rem; --ui-table-cell-pad: 0.9rem; /* Sections */ --section-gap: clamp(14px, 2.0vw, 22px); /* Full occupation v4.x+ (compat v5) */ --content-max: var(--ui-content-max); --page-pad-x: var(--ui-pad-x); --page-pad-y: var(--ui-pad-y); --card-pad-x: var(--ui-card-pad-x); --card-pad-y: var(--ui-card-pad-y); --grid-gap: clamp(12px, 1.2vw, 18px); /* ---------- Tokens nav/footer (public) — centralisés ---------- */ --navxxxl-blue-1: #0A3D62; --navxxxl-blue-2: #154360; --navxxxl-blue-3: #1B4F72; --navxxxl-gray-1: #F4F6F7; --navxxxl-gray-2: #2C3E50; --navxxxl-white: #FFFFFF; --navxxxl-max: 1440px; --navxxxl-radius: 14px; --navxxxl-shadow: 0 8px 22px rgba(44, 62, 80, 0.18); --navxxxl-shadow-soft: 0 6px 16px rgba(44, 62, 80, 0.14); --footerxxxl-blue-1: #0A3D62; --footerxxxl-blue-2: #154360; --footerxxxl-blue-3: #1B4F72; --footerxxxl-gray-1: #F4F6F7; --footerxxxl-gray-2: #2C3E50; --footerxxxl-white: #FFFFFF; --footerxxxl-max: 1440px; --footerxxxl-radius: 16px; --footerxxxl-shadow-inset: inset 0 1px 0 rgba(244, 246, 247, 0.08); --footerxxxl-shadow-top: 0 -10px 24px rgba(44, 62, 80, 0.22); /* ---------- Charts (circular) — palette STRICTE ---------- */ /* Autorisé uniquement: bleu primaire, bleu secondaire, gris clair, gris neutre, blanc */ --chart-pie-blue-primary: var(--premium-primary-500); --chart-pie-blue-secondary: var(--premium-primary-600); --chart-pie-gray-light: var(--premium-border); --chart-pie-gray-neutral: var(--premium-muted); --chart-pie-white: #ffffff; /* AUDIT FIX DIFFÉRÉ 20260321 — Centralisation des tokens composants dans la source unique */ /* ---------- Footer Enterprise XXL tokens ---------- */ --fxxl-bg: #f8fafc; --fxxl-border: #e5e7eb; --fxxl-text: #0f172a; --fxxl-muted: #334155; --fxxl-subtle: #64748b; --fxxl-link: #0b3a8a; --fxxl-link-hover: #0a2f70; --fxxl-btn-border: rgba(11, 58, 138, 0.35); --fxxl-btn-bg: rgba(11, 58, 138, 0.06); /* AUDIT MENU 20260819 (A-09) — surfaces et textes génériques. Ces quatre tokens étaient lus par home_dashboard_enterprise.css et messagerie_v2.css sans être définis nulle part : seuls leurs fallbacks littéraux s'appliquaient, tous clairs, y compris en thème sombre. Le tableau de bord tombait alors à 1,15:1 sur les titres et 1,29:1 sur les cartes. Les valeurs claires ci-dessous reprennent exactement les fallbacks existants : le thème clair est inchangé au pixel près. */ --surface-1: #ffffff; --surface-2: #f8fafc; --text-primary: #1a202c; --text-muted: #64748b; /* R-01 — messagerie_v2.css lit aussi --surface, --text et --border. Définir --surface-2 sans eux désolidarisait le fond du texte en thème sombre : les pastilles et les blocs clé/valeur tombaient à 1,04:1. Chaque valeur claire reprend le fallback historique de son propre consommateur, donc le thème clair ne bouge pas ; --border prend celui de --m-border (28 usages) plutôt que celui de --m-border-strong (2 usages). */ --surface: #ffffff; --text: #0f172a; --border: #e6e9ef; /* ---------- Sidebar Enterprise tokens ---------- */ --sidebar-width: 260px; --sidebar-border: #D9DEE8; --sidebar-surface: #F2F4F8; --sidebar-muted: #64748b; --sidebar-transition: 0.2s ease; /* ---------- Internal menu tokens ---------- */ --menu-border: #e2e8f0; --menu-shadow: 0 10px 30px rgba(15, 23, 42, 0.12); --menu-item-bg: #f8fafc; --menu-item-bg-hover: #f1f5f9; --menu-accent: #2563eb; --menu-text: #0f172a; --menu-muted: #64748b; --menu-overlay: rgba(2, 6, 23, 0.42); --drawer-width: min(21.25rem, 88vw); /* ---------- Sidebar Enterprise tokens ---------- (références thème) */ --sidebar-bg: var(--premium-card); --sidebar-primary: var(--premium-primary-500); --sidebar-primary-hover: var(--premium-primary-600); --sidebar-text: var(--premium-primary-600); --sidebar-active-bar: var(--premium-primary-500); /* ---------- RH Enterprise tokens ---------- */ --rh-text: #2B2F36; --rh-gray-50: #F2F4F8; --rh-border: #D9DEE8; --rh-blue-900: var(--premium-primary-600); --rh-blue-800: var(--premium-primary-600); --rh-blue-700: var(--premium-primary-500); --rh-white: var(--premium-card); } @media (prefers-color-scheme: dark) { /* La garde `:where(:not([data-theme="light"]))` laisse un choix explicite de thème clair reprendre la main sur la préférence système. `:where()` ne contribue pas à la spécificité : la cascade, l'ordre et les arbitrages existants restent rigoureusement inchangés — seule la condition d'application change. Sans attribut (mode « system »), le comportement est identique à avant. */ :root:where(:not([data-theme="light"])) { --premium-bg: #0b1220; --premium-fg: #e5e7eb; --premium-muted: #9aa4b2; --premium-card: #0f1623; --premium-border: #2b3442; /* UI-10 — jeton de texte des formulaires enterprise. `--rh-white` suivait deja le theme (il vaut `var(--premium-card)`), mais `--rh-text`, `--rh-border` et `--rh-gray-50` etaient figes sur des valeurs claires. En sombre, un label rendait rgb(43,47,54) sur une carte rgb(15,22,35) : contraste mesure 1,35:1, texte saisi illisible. On ne touche pas aux valeurs claires — seules les variantes sombres sont ajoutees, donc le rendu clair est rigoureusement inchange. */ --rh-text: var(--premium-fg); --rh-border: var(--premium-border); --rh-gray-50: var(--premium-bg); --premium-border-strong: #303b4a; --premium-primary-500: #60a5fa; --premium-primary-600: #93c5fd; --premium-shadow-1: 0 2px 10px rgba(0, 0, 0, .35); --premium-shadow-2: 0 18px 40px rgba(0, 0, 0, .45); /* AUDIT FIX DIFFÉRÉ: tokens footer dark mode centralisés */ --fxxl-bg: #0b1220; --fxxl-border: rgba(148, 163, 184, 0.18); --fxxl-text: #e5e7eb; --fxxl-muted: #cbd5e1; --fxxl-subtle: #94a3b8; --fxxl-link: #93c5fd; --fxxl-link-hover: #bfdbfe; --fxxl-btn-border: rgba(147, 197, 253, 0.42); --fxxl-btn-bg: rgba(147, 197, 253, 0.08); /* AUDIT MENU 20260819 (A-09) — déclinaison sombre des surfaces et textes. */ --surface-1: var(--premium-card); --surface-2: #131b2b; --text-primary: #e5e7eb; --text-muted: #94a3b8; /* R-01 — mêmes tokens, déclinés en sombre. */ --surface: var(--premium-card); --text: #e5e7eb; --border: var(--premium-border); /* AUDIT MENU 20260819 — menu interne (sidebar) en thème sombre. Ces tokens n'existaient qu'en thème clair : les items gardaient un fond clair (#f8fafc) sous un texte devenu clair, soit 1,24:1 sur les sous-liens. La correction se fait ici, à la racine, sans règle par élément ni !important. Périmètre : ces tokens ne sont lus que par les CSS du menu (internal_menu_responsive.css, sidebar_enterprise.css, global_search.css). */ --menu-text: #e5e7eb; --menu-muted: #94a3b8; --menu-border: rgba(148, 163, 184, 0.22); --menu-item-bg: rgba(148, 163, 184, 0.08); --menu-item-bg-hover: rgba(148, 163, 184, 0.16); --menu-accent: #60a5fa; --menu-overlay: rgba(2, 6, 23, 0.62); --menu-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); --sidebar-muted: #94a3b8; --sidebar-border: #2b3442; --sidebar-surface: rgba(148, 163, 184, 0.10); } } /* Dark mode manual/legacy classes: align on the same token palette */ :is(.theme-dark, body.theme-dark, .prefers-dark, body.prefers-dark, .dark-mode, body.dark-mode, html[data-theme="dark"]) { color-scheme: dark; --premium-bg: #0b1220; --premium-fg: #e5e7eb; --premium-muted: #9aa4b2; --premium-card: #0f1623; --premium-border: #2b3442; /* UI-10 — jeton de texte des formulaires enterprise. `--rh-white` suivait deja le theme (il vaut `var(--premium-card)`), mais `--rh-text`, `--rh-border` et `--rh-gray-50` etaient figes sur des valeurs claires. En sombre, un label rendait rgb(43,47,54) sur une carte rgb(15,22,35) : contraste mesure 1,35:1, texte saisi illisible. On ne touche pas aux valeurs claires — seules les variantes sombres sont ajoutees, donc le rendu clair est rigoureusement inchange. */ --rh-text: var(--premium-fg); --rh-border: var(--premium-border); --rh-gray-50: var(--premium-bg); --premium-border-strong: #303b4a; --premium-primary-500: #60a5fa; --premium-primary-600: #93c5fd; --premium-shadow-1: 0 2px 10px rgba(0, 0, 0, .35); --premium-shadow-2: 0 18px 40px rgba(0, 0, 0, .45); /* AUDIT FIX DIFFÉRÉ: tokens footer dark mode centralisés */ --fxxl-bg: #0b1220; --fxxl-border: rgba(148, 163, 184, 0.18); --fxxl-text: #e5e7eb; --fxxl-muted: #cbd5e1; --fxxl-subtle: #94a3b8; --fxxl-link: #93c5fd; --fxxl-link-hover: #bfdbfe; --fxxl-btn-border: rgba(147, 197, 253, 0.42); --fxxl-btn-bg: rgba(147, 197, 253, 0.08); /* AUDIT MENU 20260819 (A-09) — déclinaison sombre des surfaces et textes. */ --surface-1: var(--premium-card); --surface-2: #131b2b; --text-primary: #e5e7eb; --text-muted: #94a3b8; /* R-01 — mêmes tokens, déclinés en sombre. */ --surface: var(--premium-card); --text: #e5e7eb; --border: var(--premium-border); /* AUDIT MENU 20260819 — menu interne (sidebar) en thème sombre. Ces tokens n'existaient qu'en thème clair : les items gardaient un fond clair (#f8fafc) sous un texte devenu clair, soit 1,24:1 sur les sous-liens. La correction se fait ici, à la racine, sans règle par élément ni !important. Périmètre : ces tokens ne sont lus que par les CSS du menu (internal_menu_responsive.css, sidebar_enterprise.css, global_search.css). */ --menu-text: #e5e7eb; --menu-muted: #94a3b8; --menu-border: rgba(148, 163, 184, 0.22); --menu-item-bg: rgba(148, 163, 184, 0.08); --menu-item-bg-hover: rgba(148, 163, 184, 0.16); --menu-accent: #60a5fa; --menu-overlay: rgba(2, 6, 23, 0.62); --menu-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); --sidebar-muted: #94a3b8; --sidebar-border: #2b3442; --sidebar-surface: rgba(148, 163, 184, 0.10); } @media (min-width: 769px) and (max-width: 1023px) { :root { --ui-pad-y: 12px; --ui-pad-x: 20px; --ui-content-max: 1200px; --ui-card-pad-y: 30px; --ui-card-pad-x: 44px; --ui-font-base: 16px; --ui-table-font: 0.95rem; --ui-table-cell-pad: 0.9rem; } } @media (min-width: 1024px) and (max-width: 1919px) { :root { --ui-pad-y: 14px; --ui-pad-x: 28px; --ui-content-max: 1380px; --ui-card-pad-y: 34px; --ui-card-pad-x: 52px; --ui-font-base: 16px; --ui-table-font: 0.95rem; --ui-table-cell-pad: 0.95rem; } } @media (min-width: 1920px) { :root { --ui-pad-y: 16px; --ui-pad-x: 44px; --ui-content-max: 1680px; --ui-card-pad-y: 42px; --ui-card-pad-x: 64px; --ui-font-base: 18px; --ui-h1: clamp(2.0rem, 1.0vw + 1.6rem, 2.8rem); --ui-h2: clamp(1.4rem, 0.8vw + 1.1rem, 2.0rem); --ui-h3: clamp(1.15rem, 0.6vw + 1.0rem, 1.5rem); --ui-table-font: 1.0rem; --ui-table-cell-pad: 1.0rem; } } @media (min-width: 2560px) { :root { --ui-pad-y: 18px; --ui-pad-x: 72px; --ui-content-max: 2200px; --ui-card-pad-y: 48px; --ui-card-pad-x: 76px; --ui-font-base: 19px; --ui-h1: clamp(2.2rem, 0.9vw + 1.9rem, 3.2rem); --ui-h2: clamp(1.5rem, 0.75vw + 1.25rem, 2.25rem); --ui-h3: clamp(1.2rem, 0.55vw + 1.05rem, 1.65rem); --ui-table-font: 1.05rem; --ui-table-cell-pad: 1.05rem; } } @media (max-width: 480px) { :root { --ui-pad-y: 8px; --ui-pad-x: 14px; --ui-card-pad-y: 16px; --ui-card-pad-x: 14px; --ui-table-font: 0.9rem; --ui-table-cell-pad: 0.75rem; } }