/* ============================================================================= THEME TOKENS — Stellint / Private Banking ----------------------------------------------------------------------------- Single source of truth for the visual palette. Every other CSS file (and inline style) references these via `var(--…)` — never hex codes directly. Loaded BEFORE `style.css` in `base.html` so the cascade resolves correctly. Splitting tokens into this dedicated file keeps `style.css` focused on layout/component rules; tweaking a theme = editing here only. ## Direction visuelle (refonte mai 2026) « Private Banking classique » : navy nuit + or champagne + ivoire chaud. Inspiration JPM Private, Pictet, Rothschild — l'autorité tranquille du conseil patrimonial, pas le bleu indigo SaaS générique. Primary #0A2540 navy nuit (autorité, structure) Accent #B69756 or champagne (signature, prestige) Bg #FAF8F3 ivoire chaud (papier, pas blanc clinique) Surface #FFFFFF blanc pur pour les cards Text #1A2332 encre marine Success #2D6A4F vert forêt (gain, won) Warning #C77B17 ambre profond (attention, pending) Danger #8B2635 bordeaux (alerte, perte) ## Activation Le thème actif est piloté par l'attribut `data-theme` sur `` : → light (le défaut `:root`) → dark (mode opt-in pour les power users en sessions longues) → ton thème custom Le default a basculé light → dark en mai 2026 lors de la refonte (la majorité des CRM concurrents — Salesforce, HubSpot, Wealthbox — sont light, et un banquier qui ouvre l'app devant un client attend une présentation papier-document, pas un terminal de dev). Persistence + cross-iframe sync gérés dans le script inline du `` de `base.html`. Premier chargement : si `localStorage["theme"]` est vide, on suit `prefers-color-scheme` (auto). ## Layers, par intention 1. Brand / accent — `--primary*`, `--accent*`, `--focus-ring*`, `--on-primary` 2. Surfaces / text / borders — `--bg`, `--surface`, `--surface-2`, `--surface-3`, `--text*`, `--border*`, `--on-bg`, `--on-surface*` 3. Status — `--success*`, `--warning*`, `--danger*` (+ `--on-*`) 4. Geometry — `--radius*`, `--space-*` 5. Motion — `--duration-*`, `--ease-*` 6. Z-index scale — `--z-*` 7. Sidebar (navy permanente) — `--sidebar-*` 8. Graph dashboard — `--gp-*`, `--galaxy-c*` ## Ajouter un nouveau thème Copier `[data-theme="dark"]` ci-dessous, renommer le sélecteur (ex. `[data-theme="contrast"]`), et override les tokens qui diffèrent. Pas besoin de tout override — ce qui n'est pas redéclaré retombe sur les valeurs light du `:root` par défaut. ## Tokens NOT à override per-thème Géométrie (`--radius*`, `--space-*`), motion (`--duration-*`, `--ease-*`), z-index, typographie. Theme-stable — les override créerait un rythme incohérent entre thèmes. ============================================================================= */ /* === Default theme (LIGHT, Private Banking) === */ :root { /* === 1. Brand / accent === Navy nuit — sombre, sérieux, signal "patrimoine". Plus saturé en hover (lift), plus profond en pressed. */ --primary: #0A2540; --primary-hover: #0E2E4F; /* hover : un cran plus clair */ --primary-active: #061A2D; /* pressed : un cran plus profond */ --primary-light: rgba(10, 37, 64, 0.10); /* alpha tint — sur surface uniforme */ --primary-pale: #E0E5ED; /* opaque variant — sur fond varié */ --on-primary: #FAF8F3; /* ivoire (pas blanc pur) sur navy */ --focus-ring: rgba(182, 151, 86, 0.32); /* RING OR — signature de la marque */ --focus-ring-strong: rgba(182, 151, 86, 0.48); /* Or champagne — accent prestige. Réservé aux signaux haut-de-gamme : active state sidebar, CTAs « Convertir en client », filets de section, focus rings. Jamais pour du body text (contraste 3.7:1 sur ivoire = OK pour ≥18px mais pas pour le corps). */ --accent: #B69756; --accent-hover: #9F8350; --accent-active: #876D3F; --accent-light: rgba(182, 151, 86, 0.15); --accent-pale: #F4EDD9; --on-accent: #1A2332; /* texte encre sur or */ /* Liens dans le contenu : par défaut couleur du texte (lecture sereine), passent en navy au hover. L'or est réservé aux affordances de marque (CTAs, focus, active sidebar). */ --link: var(--text); --link-hover: var(--primary); /* === 2. Surfaces / text / borders === Trois niveaux d'élévation distincts. Les surfaces sont chaudes (ivoire, crème, sable) — pas du blanc/gris froid clinique. surface = level 1, cards principales, fond de formulaires surface-2 = level 2, hover, zebra stripes, sections secondaires surface-3 = level 3, popovers, dropdowns, modals `surface-elevated` reste comme alias legacy de surface-3. */ --bg: #FAF8F3; --surface: #FFFFFF; --surface-2: #F4F1EA; --surface-3: #ECE7DB; --surface-elevated: var(--surface-3); --text: #1A2332; --text-muted: #5C6679; --text-light: #8B95A8; /* On-color tokens — couleur de texte par-dessus une surface donnée. Les déclarer évite que les consommateurs devinent. */ --on-bg: var(--text); --on-surface: var(--text); --on-surface-2: var(--text); --on-surface-3: var(--text); --border: #E5DFD0; /* warm beige */ --border-light: #EFEAD9; --border-strong: #C9C0A8; /* === 3. Status === Palette « audit » plutôt que « alerte » — moins criards, plus cohérents avec le secteur. Bordeaux remplace le rouge alerte, forêt remplace le vert lime, ambre profond remplace l'orange. */ --success: #2D6A4F; --success-light: rgba(45, 106, 79, 0.12); --success-pale: #DCEDE4; --on-success: #FFFFFF; --warning: #C77B17; --warning-light: rgba(199, 123, 23, 0.14); --warning-pale: #FAEED8; --on-warning: #2A1A05; --danger: #8B2635; --danger-light: rgba(139, 38, 53, 0.12); --danger-pale: #F2DDE0; --on-danger: #FFFFFF; /* === 4. Geometry (theme-stable) === Radius volontairement net (4-8px) — pas de "pillow" arrondi qui casserait le ton conseil-en-investissement. */ --radius-sm: 3px; --radius: 5px; --radius-lg: 10px; /* cards, modals, large containers */ /* Spacing scale — 4-pt grid. Stops étendus à 7 (vs 6) pour les séparations majeures de fiches client. */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px — séparation entre sections majeures */ /* === 5. Motion (theme-stable) === `--duration-fast` pour les micro-interactions (hover, focus), `--duration-base` pour les state changes (panel toggle, fade), `--duration-slow` pour la motion narrative (transitions de page). */ --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 400ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* === 6. Z-index scale (theme-stable) === */ --z-base: 1; --z-sticky: 10; --z-dropdown: 50; --z-popover: 60; --z-modal: 100; --z-toast: 200; /* === Color picker preset palette === 12 swatches cohérents avec la palette Private Banking : tones chauds + neutres mat. Pas de fluo / pop colors qui jureraient. */ --cp-1: #8B2635; /* bordeaux */ --cp-2: #B45309; /* rouille */ --cp-3: #C77B17; /* ambre profond */ --cp-4: #2D6A4F; /* vert forêt */ --cp-5: #14B8A6; /* teal */ --cp-6: #0A2540; /* navy (matches brand) */ --cp-7: #4F4682; /* aubergine */ --cp-8: #B69756; /* or champagne (matches accent) */ --cp-9: #94A3B8; /* slate light */ --cp-10: #475569; /* slate dark */ --cp-11: #FAFAFA; /* near-white */ --cp-12: #18181B; /* near-black */ /* === 7. Sidebar — navy permanente (signature constante) === La sidebar reste navy en light ET en dark — c'est l'élément de marque qui ne bouge pas. Active state en or champagne (filet gauche + tinte) — signal de prestige. */ --sidebar: #0A2540; --sidebar-hover: rgba(255, 255, 255, 0.06); --sidebar-active: var(--accent); --sidebar-text: #C9D2E0; --sidebar-text-hover: #FAF8F3; --sidebar-text-muted: #6B7689; --sidebar-text-active: #FAF8F3; --sidebar-nav: #A8B3C5; --sidebar-brand: #FAF8F3; --sidebar-border: rgba(182, 151, 86, 0.18); /* === Élévation === Ombres chaudes (teintées navy) — pas du gris-bleu froid. Plus prononcées qu'avant : sur ivoire les cards doivent flotter distinctement, sinon elles disparaissent. */ --shadow-sm: 0 1px 2px rgba(10, 37, 64, 0.06); --shadow: 0 2px 8px rgba(10, 37, 64, 0.08), 0 1px 2px rgba(10, 37, 64, 0.04); --shadow-lg: 0 16px 40px -8px rgba(10, 37, 64, 0.18), 0 6px 16px -4px rgba(10, 37, 64, 0.10); /* === Typography (theme-stable) === Display = Source Serif 4 (titres, h1-h3, hero) — signal éditorial, presse économique. Sans = Inter Tight (corps, UI, tableaux) — lisibilité dense. Mono = JetBrains Mono (montants tabulaires, IDs). */ --font-display: "Source Serif 4", "Source Serif Pro", "Tiempos Headline", Georgia, "Times New Roman", serif; --font-sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* === 8. Graph dashboard (page /connections) === Palette warm cohérente avec la marque : navy → or → bronze → bordeaux. Plus de violet/pink/amber qui jurait avec le secteur. `--galaxy-c1` reste tied à `--primary` pour suivre les overrides admin via /admin/types. */ --gp-canvas-bg: #F4F1EA; --gp-hover: var(--surface-2); --galaxy-c1: var(--primary); --galaxy-c2: var(--accent); --galaxy-c3: #B45309; /* bronze */ --galaxy-c4: #8B2635; /* bordeaux */ --gp-glow-primary: rgba(182, 151, 86, 0.55); --gp-glow-accent: rgba(139, 38, 53, 0.50); } /* === Dark theme — opt-in via toggle, ou prefers-color-scheme: dark ============ Préserve la signature navy/or mais sur fond bleu nuit profond. Les surfaces sont toujours teintées warm (pas du gris froid). */ [data-theme="dark"] { /* Brand */ --primary: #2A4A6F; /* navy éclairci pour contraste sur bg sombre */ --primary-hover: #345887; --primary-active: #1F3A5C; --primary-light: rgba(42, 74, 111, 0.22); --primary-pale: #1A2940; --on-primary: #FAF8F3; --focus-ring: rgba(182, 151, 86, 0.40); --focus-ring-strong: rgba(182, 151, 86, 0.56); /* Accent or — légèrement plus saturé en dark (sinon il vire au beige sur fond sombre) */ --accent: #C9A769; --accent-hover: #D4B47C; --accent-active: #B69756; --accent-light: rgba(201, 167, 105, 0.16); --accent-pale: #2E2818; --on-accent: #1A2332; /* Surfaces — bleu nuit + warm */ --bg: #0A1119; --surface: #131C28; --surface-2: #1A2332; --surface-3: #232E40; --surface-elevated: var(--surface-3); --text: #E8E2D4; /* warm white, pas gris froid */ --text-muted: #A0A8B8; --text-light: #6B7689; --border: #2A3548; --border-light: #1F2838; --border-strong: #3F4D66; /* Status — versions un cran plus claires pour rester lisibles sur dark */ --success: #3FA67A; --success-light: rgba(63, 166, 122, 0.16); --success-pale: #16322A; --warning: #E89B3F; --warning-light: rgba(232, 155, 63, 0.16); --warning-pale: #3A2A14; --danger: #C7556A; --danger-light: rgba(199, 85, 106, 0.16); --danger-pale: #3A1B22; /* Sidebar — reste navy comme en light (signature constante). Légère bascule de tons pour rester en harmonie avec le bg dark. */ --sidebar: #0A1119; --sidebar-hover: rgba(255, 255, 255, 0.05); --sidebar-active: var(--accent); --sidebar-text: #B8C2D5; --sidebar-text-hover: #E8E2D4; --sidebar-text-muted: #5C6679; --sidebar-text-active: #E8E2D4; --sidebar-nav: #8B95A8; --sidebar-brand: #E8E2D4; --sidebar-border: rgba(201, 167, 105, 0.16); /* Élévation — plus marquée en dark */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow: 0 2px 8px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.20); --shadow-lg: 0 16px 40px -8px rgba(0, 0, 0, 0.55), 0 6px 16px -4px rgba(0, 0, 0, 0.30); /* Graph dashboard */ --gp-canvas-bg: #0A1119; --galaxy-c1: var(--primary); --galaxy-c2: var(--accent); --galaxy-c3: #D4955A; --galaxy-c4: #C7556A; --gp-glow-primary: rgba(201, 167, 105, 0.60); --gp-glow-accent: rgba(199, 85, 106, 0.55); } /* === Auto-detect : si pas de localStorage["theme"] et OS en dark === Le script du de base.html pose data-theme="dark" si prefers-color-scheme:dark ET pas de préférence sauvegardée. Cette media query est un filet de sécurité pour les contextes où le script est désactivé (SSR, no-JS, certains crawlers). */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]):not([data-theme="dark"]) { /* No-op : le script JS gère le case par défaut. Cette règle existe pour documenter l'intention et permettre un override CSS-only via une classe utilitaire si besoin. */ } }