/* ============================================================ ELECTROCLASS — DESIGN TOKENS Source de vérité technique de la charte graphique. Règle d'or : ne jamais coder une valeur en dur dans un composant — toujours référencer var(--token). Dark Mode par défaut ; thème clair via :root[data-theme="light"]. Valeurs héritées de la charte (Parties I & II). Les tokens annotés « à valider » sont des extensions à confirmer Marketing/Produit. ============================================================ */ :root { color-scheme: dark; /* ---- Couleurs — fonds & surfaces (Dark) ---- */ --color-bg-deep: #020617; /* Slate 950 — arrière-plan principal */ --color-surface: #0f172a; /* Slate 900 — cartes, modules, tableaux */ --color-elevated: #1e293b; /* Slate 800 — modales, en-têtes, toasts */ --color-light-bg: #ffffff; /* fond blanc obligatoire en print/email */ /* ---- Couleurs — texte ---- */ --color-text-primary: #f8fafc; /* titres, texte fort */ --color-text-body: #cbd5e1; /* corps courant */ --color-text-secondary: #94a3b8; /* texte secondaire, sous-titres */ --color-text-muted: #8a99ad; /* légendes — 5,04:1 mini sur --color-elevated (AA). #64748b ne passait AA que sur blanc pur. */ /* ---- Bordures & détails ---- */ --color-border: #334155; /* bordure standard */ --color-border-subtle: #1e293b; /* séparateur discret */ --color-border-strong: #475569; /* bordure appuyée */ /* ---- Accent & interactif ---- */ --color-accent: #38bdf8; /* cyan UI — aplats, bordures, liserés, focus */ --color-accent-grad: #3b82f6; /* bleu de fin de dégradé (pas un statut) */ /* Accent porteur de TEXTE. En sombre = le cyan (9,4:1 sur le fond profond) ; en clair il est remplacé par un bleu foncé, car le cyan n'y tient que ~2,1:1. À utiliser dès que l'accent colore du texte, jamais pour un trait. */ --color-accent-text: var(--color-accent); /* ---- Rôles « sur aplat » (texte posé SUR une couleur de marque) ---- Sans eux, la couleur de texte des boutons primaire et danger était codée en dur : si l'accent ou le rouge évolue, elle ne suivait pas. */ --color-on-accent: #020617; /* texte sombre sur le dégradé cyan */ --color-on-danger: #ffffff; /* texte clair sur le rouge sémantique */ /* Voile d'overlay (modale, tiroir, feuille, menu latéral) : un seul rôle au lieu de la même valeur réécrite dans chaque composant. */ --color-scrim: rgba(2, 6, 23, 0.7); /* Slate 950 @70 % */ /* ---- Sémantique ---- */ --color-success: #4C9D42; --color-warning: #F49819; --color-danger: #ef4444; /* Texte posé SUR un aplat sémantique (pill, badge). Sombre : le blanc échoue sur les trois fonds (warning 2,25:1), le sombre passe partout. */ --color-on-semantic: #020617; /* ---- Print & logo (hors UI écran) ---- */ --color-print-blue: #162883; /* Pantone 286 C — print */ --color-logo-blue: #2D2E83; /* logo & écran / signature */ /* ---- Data-viz — séries (max 6, commencer par --chart-1) ---- */ --chart-1: #38bdf8; --chart-2: #3b82f6; --chart-3: #8b5cf6; --chart-4: #06b6d4; --chart-5: #a78bfa; --chart-6: #67e8f9; /* ---- Espacement — Règle de 9 (multiples de 9px) ---- Tout le padding / margin / gap de MISE EN PAGE se prend dans cette échelle (multiples de 9). Exceptions assumées, hors grille, pour les détails internes des composants (comme la charte accepte déjà la typo 14/12px et le radius 4.5px) : tailles d'icônes (12–20px), traits et bordures (1–3px), recalage optique d'icône (1–2px), offsets d'animation (translateY -2/-4px). Ne jamais utiliser ces micro-valeurs pour du layout : entre deux blocs, toujours un --space-*. */ --space-1: 9px; --space-2: 18px; --space-3: 27px; --space-4: 36px; --space-5: 45px; --space-6: 54px; --space-7: 63px; --space-8: 72px; /* ---- Rayons ---- */ --radius-sm: 4.5px; /* inputs, petits éléments */ --radius-md: 9px; /* boutons, cartes, modales */ --radius-pill: 18px; /* pills, badges */ /* ---- Cibles tactiles ---- */ --target-mouse: 45px; /* souris / desktop */ --target-touch: 54px; /* tablette, doigt nu */ --target-gloves: 63px; /* borne/machine, opérateur ganté (72px recommandé) */ /* ---- Tailles d'icônes ---- Sept valeurs coexistaient sur 15 règles, sans règle d'usage. Échelle unique (exception assumée à la Règle de 9, comme la typo). md = défaut dans un contrôle ; 2xl = icône tactile (barre, feuille). */ --icon-xs: 12px; --icon-sm: 14px; --icon-md: 16px; --icon-lg: 18px; --icon-xl: 20px; --icon-2xl: 24px; --icon-3xl: 36px; /* illustration (zone de dépôt) */ /* Interlettrage des micro-libellés en capitales (en-tête de tableau, légende de groupe, libellé de KPI) : un seul traitement, une seule valeur — il y en avait trois, dans deux unités différentes. */ --tracking-caps: 0.08em; /* ---- Typographie ---- */ --font-display: 'Karbon', system-ui, -apple-system, sans-serif; /* titres */ --font-body: 'Exo 2', system-ui, -apple-system, sans-serif; /* corps, UI */ --text-h1: 72px; --text-h2: 54px; --text-h3: 36px; --text-h4: 27px; --text-body: 18px; --text-label: 14px; --text-caption: 12px; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --leading-tight: 1.1; --leading-heading: 1.3; --leading-body: 1.6; /* ---- Élévation — ombres portées ---- */ --shadow-e1: 0 9px 18px rgba(0,0,0,0.3); /* surface (carte, tuile, tableau) */ --shadow-e2: 0 9px 27px rgba(0,0,0,0.5); /* flottant (menu, popover, hover) */ --shadow-e3: 0 9px 27px rgba(0,0,0,0.8); /* overlay (modale, panneau + voile) */ /* ---- Glows néon — digital uniquement (jamais en print) ---- */ --glow-subtle: 0 0 15px rgba(56,189,248,0.25); /* interactif, selected */ --glow-intense: 0 0 30px rgba(6,182,212,0.4), 0 0 8px rgba(56,189,248,0.8); /* hover CTA */ --glow-shockwave: 0 0 50px rgba(56,189,248,0.6); /* KPI géant, alerte */ --glow-danger: 0 0 18px rgb(239 68 68 / 0.35); /* survol action destructrice */ /* ---- Focus clavier (anneau — jamais outline:none sans remplacement) ---- Renforcé (2026-08-13) pour passer WCAG 1.4.11/2.4.11 (≥ 3:1) : l'alpha 0.15 d'origine donnait ~1.1:1 (quasi invisible). Variante THÈME CLAIR plus bas : le cyan ne contraste pas sur fond clair → bleu foncé plein. */ --focus-ring: 0 0 0 3px rgba(56,189,248,0.6); --focus-ring-danger: 0 0 0 3px rgba(239,68,68,0.6); /* (à valider) */ --focus-ring-success: 0 0 0 3px rgba(76,157,66,0.6); /* (à valider) */ /* ---- Rôles d'interaction : fond de survol ---- Le survol était exprimé en détournant cinq tokens différents selon le composant (surface, elevated, border, border-strong, bg-deep), sans règle. Deux rôles suffisent, et donnent aux applications UN point de surcharge au lieu de quatorze : --color-hover-bg : survol d'un élément posé sur le fond profond --color-hover-bg-raised : survol d'un élément déjà sur une surface élevée Les fonds sémantiques (accent d'une date sélectionnée, danger d'une action verrouillée) ne sont PAS des fonds de survol : ils restent exprimés avec leur token de sens. */ --color-hover-bg: var(--color-surface); --color-hover-bg-raised: var(--color-elevated); /* ---- Couche d'état (survol / enfoncé / désactivé) ---- Un DS mature dérive ses états d'une échelle unique au lieu de recalculer une valeur dans chaque composant. L'enfoncé passe par un filtre de luminosité : il fonctionne quel que soit le fond du composant et n'entre pas en conflit avec l'anneau de focus (qui, lui, occupe box-shadow). Sur fond sombre on ÉCLAIRCIT, sur fond clair on ASSOMBRIT — d'où la bascule dans le thème clair. */ --state-pressed-filter: brightness(1.25); --state-disabled-opacity: 0.5; /* ---- Échelle d'empilement (z-index) ---- Les 8 valeurs étaient écrites en dur dans les composants : impossible de savoir ce qui passe devant quoi sans lire toute la feuille. Ordre : contenu < barres ancrées < menus < voiles < panneaux off-canvas < notifications < infobulle. */ --z-raised: 1; /* détail au-dessus de son parent */ --z-sticky: 800; /* barre de navigation basse, app bar */ --z-menu: 900; /* menus déroulants, popovers */ --z-overlay: 1000; /* voiles de modale / tiroir / feuille */ --z-offcanvas-scrim: 1080; /* voile du menu latéral */ --z-offcanvas: 1090; /* panneau du menu latéral */ --z-toast: 1100; /* notifications : toujours visibles */ --z-tooltip: 1200; /* infobulle : au-dessus de tout */ /* ---- Sens d'écriture ---- Les propriétés logiques (inset-inline, padding-inline…) se retournent seules en RTL, mais PAS les transformations CSS : translateX(100%) pousse toujours vers la droite. --flip vaut -1 en RTL et multiplie les translations directionnelles (tiroirs, menus latéraux, entrée des toasts) pour qu'elles suivent le sens de lecture. Une app RTL pose simplement . */ --flip: 1; /* ---- Motion ---- */ --duration-micro: 200ms; /* (à valider) */ --duration-standard: 300ms; /* (à valider) */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* (à valider) */ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* (à valider) */ /* ---- Breakpoints (à valider) ---- */ --bp-xs: 720px; --bp-sm: 1008px; --bp-md: 1440px; --bp-lg: 1920px; /* ---- Conteneurs (à valider) ---- */ --container-narrow: 999px; --container-default: 1224px; --container-wide: 1512px; /* ---- Gradients (CSS natif) ---- */ --gradient-page: linear-gradient(180deg, #020617 0%, #0f172a 40%, #020617 100%); --gradient-surface: linear-gradient(160deg, #0f172a 0%, #1e293b 100%); --gradient-accent: linear-gradient(135deg, #38bdf8 0%, #3b82f6 100%); } /* ============================================================ THÈME CLAIR — print / email / documents institutionnels. Seuls les tokens dépendants du thème changent ; accent, sémantique, print/logo, espacement, rayons, typo restent identiques. Surfaces claires « à valider » (non figées dans la charte). Activation : (ou :root[data-theme=light]). ============================================================ */ :root[data-theme="light"] { color-scheme: light; --color-bg-deep: #ffffff; --color-surface: #f1f5f9; /* (à valider) */ --color-elevated: #e2e8f0; /* (à valider) */ --color-text-primary: #020617; --color-text-body: #334155; --color-text-secondary: #475569; --color-text-muted: #526077; /* 5,16:1 mini sur --color-elevated clair (AA) */ /* Bordures claires recalibrées : les valeurs d'origine entraient en collision avec les surfaces (--color-border == --color-elevated == #e2e8f0, soit un ratio de 1,00 → bordure strictement invisible sur une modale, un toast ou un menu). Une bordure qui délimite un composant (champ, carte) doit tenir 3:1 (WCAG 1.4.11) : #64748b donne 3,86:1 au pire cas. --border-subtle reste décoratif (filet). */ --color-border: #64748b; /* limite de composant — 3,86:1 mini */ --color-border-subtle: #cbd5e1; /* filet décoratif, séparateur */ --color-border-strong: #475569; /* bordure appuyée — 6,15:1 mini */ /* Accent-TEXTE en clair : le cyan #38bdf8 n'y tient que ~2,1:1. Ce bleu foncé donne 5,9:1 sur blanc, 5,4:1 sur surface et 4,8:1 sur élévation. --color-accent (aplats, bordures, liserés) reste le cyan, inchangé. */ --color-accent-text: #0369a1; /* Zéro néon en clair (règle charte : les glows sont digital/dark uniquement — sur fond clair ils ressortent en halo parasite). Valeur no-op (ombre transparente de taille nulle), valide même lorsqu'elle se compose avec l'anneau de focus dans une liste. */ --glow-subtle: 0 0 0 0 transparent; --glow-intense: 0 0 0 0 transparent; --glow-shockwave: 0 0 0 0 transparent; --glow-danger: 0 0 0 0 transparent; /* Élévation rethématisée : les ombres de base sont des noirs jusqu'à 80 % d'alpha, calibrés pour un fond #020617. Posées sur du blanc elles ne « s'estompent » pas — elles s'alourdissent. On les rejoue en discret. */ --shadow-e1: 0 9px 18px rgba(2, 6, 23, 0.08); --shadow-e2: 0 9px 27px rgba(2, 6, 23, 0.12); --shadow-e3: 0 9px 27px rgba(2, 6, 23, 0.18); /* Enfoncé en clair : on assombrit (sur fond sombre on éclaircissait). */ --state-pressed-filter: brightness(0.92); /* Anneau de focus en clair : le cyan #38bdf8 ne contraste pas sur fond clair (~1.3:1) → bleu foncé plein pour garantir ≥ 3:1 (WCAG). #2563eb ≈ 4.2:1 sur --color-elevated clair (#e2e8f0). */ --focus-ring: 0 0 0 3px #2563eb; --focus-ring-danger: 0 0 0 3px #b91c1c; --focus-ring-success: 0 0 0 3px #15803d; } /* Coupe le mouvement pour les personnes sensibles (accessibilité). */ @media (prefers-reduced-motion: reduce) { :root { --duration-micro: 0.01ms; --duration-standard: 0.01ms; } } /* Sens d'écriture droite-à-gauche : seule l'inversion des transformations doit être déclarée, tout le reste est logique. */ [dir="rtl"] { --flip: -1; }