/* ============================================================================ MOLP technologies — Design Tokens ============================================================================ Version : 0.5.1 Source de vérité de l'identité visuelle. Les projets consommateurs (cockpitIA, …) lisent ou copient ce fichier, ne le modifient JAMAIS. Pile CSS complète (ordre de chargement, aucun build) : 1. assets/fonts/fonts.css (Inter self-host) 2. vendor/bootstrap/bootstrap.min.css (5.3.x, intouchable) 3. tokens/tokens.css (CE FICHIER) 4. css/molp-bootstrap.css (Bootstrap aux couleurs MOLP) 5. css/molp-components.css (composants custom MOLP) Thème sombre : opt-in via (standard Bootstrap 5.3 — pilote Bootstrap ET ces tokens d'un seul attribut). Un consommateur ne lit QUE la couche sémantique (--molp-color-*, etc.) ; les primitives (échelles chiffrées) sont internes à la charte. Légende des marqueurs : [molp.tech] extrait du site https://molp.tech le 2026-07-25 [cockpitIA] hérité de l'app cockpitIA existante [agence] choix design system assumé (contrastes vérifiés) [dataviz✓] palette validée par le validateur du skill dataviz (bande de luminosité, chroma, séparation CVD, contraste) TODO en attente d'un input de Matthieu ========================================================================== */ /* ============================================================ 1. PRIMITIVES — échelles brutes (usage interne à la charte) ============================================================ */ :root { /* --- Orange de marque — échelle Material Orange [molp.tech] --- primary = orange-700 ; le site utilise 500/700/900. */ --molp-orange-50: #FFF3E0; --molp-orange-100: #FFE0B2; --molp-orange-200: #FFCC80; --molp-orange-300: #FFB74D; --molp-orange-400: #FFA726; --molp-orange-500: #FF9800; /* [molp.tech] --color-primary-light */ --molp-orange-600: #FB8C00; --molp-orange-700: #F57C00; /* [molp.tech] --color-primary — LA couleur MOLP */ --molp-orange-800: #EF6C00; --molp-orange-900: #E65100; /* [molp.tech] --color-primary-dark */ --molp-orange-deep: #C2410C; /* [agence] orange lisible en texte sur blanc (5.1:1) */ /* --- Bleu nuit — échelle construite autour des 2 crans du site --- */ --molp-night-50: #EDEDF4; --molp-night-100: #DBDBE7; --molp-night-200: #B8B8CE; --molp-night-300: #9494B5; --molp-night-400: #71719C; --molp-night-500: #545483; --molp-night-600: #43436A; --molp-night-700: #383857; --molp-night-800: #2D2D44; /* [molp.tech] --color-dark-light */ --molp-night-900: #1A1A2E; /* [molp.tech] --color-dark */ --molp-night-950: #12121F; /* [agence] fond du thème sombre */ --molp-night-blue: #16213E; /* [cockpitIA] bas du gradient sidebar */ /* --- Neutres — échelle Tailwind Gray (le site en utilise 2 crans) --- */ --molp-gray-50: #F9FAFB; --molp-gray-100: #F3F4F6; /* [molp.tech] --color-gray-light */ --molp-gray-200: #E5E7EB; --molp-gray-300: #D1D5DB; --molp-gray-400: #9CA3AF; --molp-gray-500: #6B7280; /* [molp.tech] --color-gray */ --molp-gray-600: #4B5563; --molp-gray-700: #374151; --molp-gray-800: #1F2937; --molp-gray-900: #111827; --molp-white: #FFFFFF; /* [molp.tech] */ /* --- États — validés 2026-07-25 (Tailwind 600 texte / 50 fond) --- + crans clairs (400/500) pour le thème sombre [agence]. */ --molp-green-400: #4ADE80; --molp-green-500: #22C55E; --molp-green-600: #16A34A; /* success (light) */ --molp-green-50: #F0FDF4; --molp-amber-400: #FBBF24; --molp-amber-500: #F59E0B; --molp-amber-600: #D97706; /* warning (light) */ --molp-amber-50: #FFFBEB; --molp-red-400: #F87171; --molp-red-500: #EF4444; --molp-red-600: #DC2626; /* error (light) */ --molp-red-50: #FEF2F2; --molp-blue-400: #60A5FA; --molp-blue-500: #3B82F6; --molp-blue-600: #2563EB; /* info (light) */ --molp-blue-50: #EFF6FF; } /* ============================================================ 2. SÉMANTIQUES — API publique, thème CLAIR (défaut) ============================================================ */ :root { color-scheme: light; /* --- Fonds & surfaces --- */ --molp-color-bg: var(--molp-white); /* fond de page */ --molp-color-bg-subtle: var(--molp-gray-50); /* fonds alternés */ --molp-color-surface: var(--molp-white); /* cartes */ --molp-color-surface-2: var(--molp-gray-50); /* éléments posés sur surface */ --molp-color-surface-inverse: var(--molp-night-900); /* encarts sombres */ /* --- Texte --- */ --molp-color-text: var(--molp-night-900); --molp-color-text-muted: var(--molp-gray-500); --molp-color-text-faint: var(--molp-gray-400); /* placeholders, icônes inactives */ --molp-color-text-inverse: var(--molp-white); /* --- Marque & actions --- */ --molp-color-primary: var(--molp-orange-700); --molp-color-primary-hover: var(--molp-orange-900); /* en clair, le hover assombrit */ --molp-color-primary-active: var(--molp-orange-900); --molp-color-primary-soft: var(--molp-orange-50); /* fonds teintés, badges, hovers doux */ --molp-color-on-primary: var(--molp-white); /* --- Liens ([agence] : orange-deep = AA 5.1:1 sur blanc ; l'orange-700 pur (2.7:1) est réservé aux composants, pas au texte) --- */ --molp-color-link: var(--molp-orange-deep); --molp-color-link-hover: var(--molp-orange-900); /* --- Bordures --- */ --molp-color-border: var(--molp-gray-100); /* cartes [molp.tech] */ --molp-color-border-strong: var(--molp-gray-300); /* inputs, séparateurs marqués */ --molp-color-border-accent: var(--molp-color-primary);/* cartes au hover */ /* --- Focus (accessibilité clavier) --- */ --molp-focus-ring: 0 0 0 3px rgba(245, 124, 0, 0.35); /* --- États sémantiques --- */ --molp-color-success: var(--molp-green-600); --molp-color-success-bg: var(--molp-green-50); --molp-color-warning: var(--molp-amber-600); --molp-color-warning-bg: var(--molp-amber-50); --molp-color-error: var(--molp-red-600); --molp-color-error-bg: var(--molp-red-50); --molp-color-info: var(--molp-blue-600); --molp-color-info-bg: var(--molp-blue-50); /* --- Data-viz [dataviz✓ light, surface blanche] --- Catégorielle : ordre FIXE (jamais recyclé) ; >6 séries → "Autres". L'orange (2.6:1 vs blanc) impose tooltips + direct labels (gérés par js/molp-charts.js). --- */ --molp-chart-1: #F57C00; /* orange marque */ --molp-chart-2: #2563EB; /* bleu */ --molp-chart-3: #0D9488; /* teal */ --molp-chart-4: #9333EA; /* violet */ --molp-chart-5: #DB2777; /* rose */ --molp-chart-6: #65A30D; /* lime */ --molp-chart-grid: var(--molp-gray-200); --molp-chart-axis-text: var(--molp-gray-500); /* Séquentielle (magnitude, une teinte) : rampe orange claire→foncée */ --molp-chart-seq-1: var(--molp-orange-100); --molp-chart-seq-2: var(--molp-orange-300); --molp-chart-seq-3: var(--molp-orange-500); --molp-chart-seq-4: var(--molp-orange-700); --molp-chart-seq-5: var(--molp-orange-900); /* Divergente (polarité) : chaud ↔ neutre ↔ froid */ --molp-chart-div-neg: #2563EB; --molp-chart-div-mid: var(--molp-gray-400); --molp-chart-div-pos: #F57C00; /* --- Gradients de marque --- */ --molp-gradient-hero: linear-gradient(135deg, var(--molp-white) 0%, var(--molp-gray-100) 100%); /* [molp.tech] */ --molp-gradient-cta: linear-gradient(135deg, var(--molp-orange-500), var(--molp-orange-700)); /* [agence] */ --molp-gradient-sidebar: linear-gradient(180deg, var(--molp-night-900), var(--molp-night-blue)); /* [cockpitIA] */ /* --- Typographie --- */ --molp-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* [molp.tech] self-host, cf. assets/fonts/ */ --molp-font-mono: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace; /* stack système (code, logs) */ /* Échelle de tailles (rem, base 16px) */ --molp-text-xs: 0.75rem; /* 12px — mentions, labels */ --molp-text-sm: 0.875rem; /* 14px — texte dense (tables, UI) */ --molp-text-base: 1rem; /* 16px [molp.tech] corps */ --molp-text-lg: 1.125rem; /* 18px */ --molp-text-xl: 1.25rem; /* 20px [molp.tech] h3 */ --molp-text-2xl: 1.5rem; /* 24px */ --molp-text-3xl: 1.875rem; /* 30px */ --molp-text-4xl: 2.375rem; /* 38px [molp.tech] h2 */ --molp-text-hero: clamp(2.5rem, 5vw, 4rem); /* [molp.tech] .hero-title */ /* Graisses ([molp.tech] : body 400, nav 500, boutons/h3 600, titres 700) */ --molp-font-regular: 400; --molp-font-medium: 500; --molp-font-semibold: 600; --molp-font-bold: 700; /* Interlignage */ --molp-leading-tight: 1.2; /* titres */ --molp-leading-normal: 1.6; /* corps */ /* --- Rayons ([molp.tech] : 3 crans relevés sur le site) --- */ --molp-radius-xs: 6px; /* badges, kbd, petits contrôles */ --molp-radius-sm: 8px; /* boutons, inputs */ --molp-radius-md: 12px; /* blocs intermédiaires, dropdowns */ --molp-radius-lg: 16px; /* cartes, modals */ --molp-radius-full: 9999px; /* pills, avatars */ /* --- Ombres [molp.tech] --- */ --molp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --molp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); --molp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1); /* boutons au hover */ --molp-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1); /* cartes au hover */ /* --- Espacements (échelle 4px ; crans [molp.tech] : 24, 40, 120) --- */ --molp-space-3xs: 0.25rem; /* 4px */ --molp-space-2xs: 0.5rem; /* 8px */ --molp-space-xs: 0.75rem; /* 12px */ --molp-space-sm: 1rem; /* 16px */ --molp-space-md: 1.5rem; /* 24px */ --molp-space-lg: 2rem; /* 32px */ --molp-space-xl: 2.5rem; /* 40px */ --molp-space-2xl: 3rem; /* 48px */ --molp-space-3xl: 4rem; /* 64px */ --molp-space-4xl: 5rem; /* 80px */ --molp-space-section: 7.5rem;/* 120px — sections marketing */ /* --- Mouvement --- */ --molp-transition-fast: 0.15s ease; /* micro-interactions */ --molp-transition-base: 0.3s ease; /* [molp.tech] */ --molp-lift-sm: translateY(-2px); /* boutons au hover [molp.tech] */ --molp-lift-lg: translateY(-8px); /* cartes au hover [molp.tech] */ /* --- Layout app (dashboards / cockpits) --- */ --molp-container-max: 1200px; /* TODO confirmer */ --molp-header-height: 72px; /* [molp.tech] nav marketing */ --molp-topbar-height: 64px; /* [agence] topbar app */ --molp-sidebar-width: 250px; /* [cockpitIA] */ --molp-sidebar-width-min: 68px; /* sidebar repliée */ /* --- Z-index --- */ --molp-z-dropdown: 1000; --molp-z-sticky: 1020; --molp-z-overlay: 1040; --molp-z-modal: 1050; --molp-z-toast: 1080; } /* ============================================================ 3. THÈME SOMBRE — ============================================================ Seule la couche sémantique change. Contrastes vérifiés [agence] : texte 13:1, texte muted 6.8:1, liens 8.5:1, états ≥ 4.5:1 sur surface. En sombre, le hover ÉCLAIRCIT (inverse du thème clair). */ [data-bs-theme="dark"] { color-scheme: dark; --molp-color-bg: var(--molp-night-950); --molp-color-bg-subtle: var(--molp-night-900); --molp-color-surface: var(--molp-night-900); /* cartes */ --molp-color-surface-2: var(--molp-night-800); /* dropdowns, hover rows */ --molp-color-surface-inverse: var(--molp-white); --molp-color-text: var(--molp-gray-100); --molp-color-text-muted: var(--molp-gray-400); --molp-color-text-faint: var(--molp-gray-500); --molp-color-text-inverse: var(--molp-night-900); --molp-color-primary: var(--molp-orange-700); /* l'identité ne bouge pas */ --molp-color-primary-hover: var(--molp-orange-500); --molp-color-primary-active: var(--molp-orange-400); --molp-color-primary-soft: rgba(245, 124, 0, 0.15); --molp-color-on-primary: var(--molp-white); --molp-color-link: var(--molp-orange-400); /* 8.5:1 sur surface */ --molp-color-link-hover: var(--molp-orange-300); --molp-color-border: var(--molp-night-800); --molp-color-border-strong: var(--molp-night-700); --molp-focus-ring: 0 0 0 3px rgba(255, 152, 0, 0.45); /* États : crans clairs pour AA sur fonds sombres */ --molp-color-success: var(--molp-green-500); --molp-color-success-bg: rgba(34, 197, 94, 0.15); --molp-color-warning: var(--molp-amber-500); --molp-color-warning-bg: rgba(245, 158, 11, 0.15); --molp-color-error: var(--molp-red-400); --molp-color-error-bg: rgba(239, 68, 68, 0.15); --molp-color-info: var(--molp-blue-400); --molp-color-info-bg: rgba(96, 165, 250, 0.15); /* Data-viz [dataviz✓ dark, surface #1A1A2E] — mêmes teintes, crans adaptés */ --molp-chart-1: #E65100; --molp-chart-2: #3B82F6; --molp-chart-3: #0D9488; --molp-chart-4: #A855F7; --molp-chart-5: #EC4899; --molp-chart-6: #65A30D; --molp-chart-grid: var(--molp-night-800); --molp-chart-axis-text: var(--molp-gray-400); --molp-chart-seq-1: var(--molp-orange-900); --molp-chart-seq-2: var(--molp-orange-700); --molp-chart-seq-3: var(--molp-orange-500); --molp-chart-seq-4: var(--molp-orange-300); --molp-chart-seq-5: var(--molp-orange-100); --molp-chart-div-neg: #3B82F6; --molp-chart-div-mid: var(--molp-gray-500); --molp-chart-div-pos: #E65100; --molp-gradient-hero: linear-gradient(135deg, var(--molp-night-950) 0%, var(--molp-night-900) 100%); /* --molp-gradient-sidebar et -cta : identiques dans les deux thèmes */ /* Ombres renforcées (quasi invisibles sinon) — on borde ET on ombre */ --molp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --molp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5); --molp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5); --molp-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6); }