/* SRONOU design tokens. Source de vérité des couleurs, surfaces, typographie, espacements, rayons, ombres et mouvements. Référence écrite : Docs/Design_System_SRONOU.md — vitrine vivante : /DesignSystem. Deux couches : 1. PALETTE (--sr-brand-*, --sr-sky-*, --sr-sun-*, --sr-ink-*) : valeurs brutes de l'identité (logo et bleu de marque #0d3f9c). Elle sert UNIQUEMENT à définir la couche 2, jamais à styler un écran. 2. TOKENS SÉMANTIQUES (--sr-fg, --sr-canvas, --sr-accent, …) : ce que les écrans consomment. Ils suivent la surface la plus proche ([data-surface="light|gray|dark"]). Marque d'organisation : --sr-accent* dérive de --bs-primary / --bs-primary-rgb / --bs-primary-dark, que _Layout.cshtml surcharge par requête avec la couleur de l'organisation. Une organisation qui personnalise sa couleur recolore donc tout le système sans écrire une ligne de CSS. */ :root { /* ---------- 1. Palette brute ---------- */ /* Bleu SRONOU — l'ancrage est brand-700 (#0d3f9c, couleur par défaut de la plateforme) */ --sr-brand-50: #eef3fc; --sr-brand-100: #dbe6f9; --sr-brand-200: #bcd2ff; --sr-brand-300: #8fb3ff; --sr-brand-400: #4f86e8; --sr-brand-500: #1f62d6; --sr-brand-600: #1049b8; --sr-brand-700: #0d3f9c; --sr-brand-800: #0b2f78; --sr-brand-900: #092c6d; --sr-brand-950: #0b1b4d; /* Dégradé du logo : bleu ciel → cyan */ --sr-sky-400: #1e88ff; --sr-sky-500: #00b7e8; /* Soleil — l'accent « signal » du logo : ambre → orange (jalons, certificats, surbrillance) */ --sr-sun-300: #ffd75e; --sr-sun-400: #ffc107; --sr-sun-500: #ff8a00; --sr-sun-700: #b45309; /* Encre (texte) et papier (fond de page) */ --sr-ink-900: #16233f; --sr-ink-700: #4b5875; --sr-ink-600: #5f6b85; --sr-ink-400: #7b87a1; --sr-paper: #f4f6f9; /* Statuts : « fill » = pastille/barre, « fg » = texte lisible (AA) sur blanc et sur son lavis */ --sr-success-fill: #19a94e; --sr-success-fg: #0f7a2e; --sr-warning-fill: #ffc107; --sr-warning-fg: #8a5300; --sr-danger-fill: #f01111; --sr-danger-fg: #c8281c; --sr-info-fill: #1e88ff; --sr-info-fg: #1b5bb5; /* ---------- 2. Typographie ---------- */ --sr-font-sans: 'Outfit', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; --sr-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Échelle (rem : html = 14 px mobile, 16 px dès 768 px, voir site.css) */ --sr-text-display: 2.5rem; --sr-text-h1: 2rem; --sr-text-h2: 1.5rem; --sr-text-h3: 1.25rem; --sr-text-title: 1.0625rem; --sr-text-body: 1rem; --sr-text-sm: 0.875rem; --sr-text-xs: 0.75rem; --sr-text-kpi: 2.25rem; --sr-leading-tight: 1.15; --sr-leading-snug: 1.3; --sr-leading-normal: 1.5; /* ---------- 3. Espacements, formes, profondeur ---------- */ --sr-space-1: 0.25rem; --sr-space-2: 0.5rem; --sr-space-3: 0.75rem; --sr-space-4: 1rem; --sr-space-5: 1.5rem; --sr-space-6: 2rem; --sr-space-7: 3rem; --sr-space-8: 4rem; --sr-radius-sm: 6px; /* puces, badges */ --sr-radius-md: 8px; /* contrôles, boutons */ --sr-radius-lg: 12px; /* cartes */ --sr-radius-xl: 16px; /* modales, panneaux */ --sr-radius-pill: 999px; --sr-control-h: 2.5rem; /* 40 px */ --sr-control-h-sm: 2rem; /* 32 px */ --sr-control-h-lg: 3rem; /* 48 px */ /* Coque (structure de la console Sentinel) : barre du haut pleine largeur, barre latérale, rail replié */ --sr-topbar-h: 3.5rem; /* 56 px */ --sr-sidebar-w: 260px; --sr-rail-w: 4rem; /* 64 px, barre latérale repliée */ /* La profondeur passe par des bordures ; l'ombre est réservée aux surcouches (menus, modales). */ --sr-shadow-raised: 0 12px 32px -12px rgba(11, 27, 77, 0.28), 0 2px 6px -2px rgba(11, 27, 77, 0.14); --sr-shadow-focus: 0 0 0 3px var(--sr-focus-ring); /* ---------- 4. Mouvement ---------- */ /* Échelle reprise de Quorly : on choisit le token par USAGE, pas par valeur. micro = survol, pression ; quick = menus, fermetures ; fast = ouvertures, toasts ; medium = panneaux ; slow = apparition de contenu. */ --sr-duration-micro: 80ms; --sr-duration-quick: 150ms; --sr-duration-fast: 250ms; --sr-duration-medium: 350ms; --sr-duration-slow: 400ms; --sr-duration-base: var(--sr-duration-quick); --sr-ease: cubic-bezier(0.4, 0, 0.2, 1); --sr-ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* « smooth-out » : entrées */ --sr-ease-bounce: cubic-bezier(0.34, 1.36, 0.64, 1); --sr-distance-small: 6px; --sr-distance-base: 8px; --sr-distance-medium: 12px; --sr-scale-enter: 0.97; --sr-scale-press: 0.98; --sr-blur-small: 2px; /* ---------- 5. Séries de graphiques (ordre fixe, 7 emplacements + « autre ») ---------- */ --sr-chart-1: #1f62d6; --sr-chart-2: #ff8a00; --sr-chart-3: #12a26f; --sr-chart-4: #7c6fe0; --sr-chart-5: #e0177a; --sr-chart-6: #00a3cc; --sr-chart-7: #b45309; --sr-chart-other: #98a2b8; --sr-chart-grid: #e3e8f0; --sr-chart-axis: #c5cddb; } /* ---------- Tokens sémantiques : surface claire par défaut ---------- */ :root, [data-surface="light"], [data-surface="gray"] { /* Surfaces : canvas (page) < panel (cartes, barres) < raised (menus, modales) ; sunken = en-têtes de tableau */ --sr-canvas: var(--sr-paper); --sr-panel: #ffffff; --sr-raised: #ffffff; --sr-sunken: #eef1f6; --sr-hover: rgba(22, 35, 63, 0.045); --sr-selected: rgba(var(--bs-primary-rgb, 13, 63, 156), 0.08); --sr-overlay: rgba(11, 27, 77, 0.45); --sr-field: #ffffff; --sr-highlighter: var(--sr-sun-400); /* Marque (suit l'organisation) */ --sr-accent: var(--bs-primary, #0d3f9c); --sr-accent-strong: var(--bs-primary-dark, #0b2f78); --sr-accent-subtle: rgba(var(--bs-primary-rgb, 13, 63, 156), 0.08); --sr-accent-wash: rgba(var(--bs-primary-rgb, 13, 63, 156), 0.14); --sr-on-accent: #ffffff; --sr-accent-fg: var(--bs-primary, #0d3f9c); /* Texte */ --sr-fg: var(--sr-ink-900); --sr-fg-secondary: var(--sr-ink-700); --sr-fg-muted: var(--sr-ink-600); --sr-fg-inactive: rgba(22, 35, 63, 0.4); --sr-fg-highlight: var(--sr-accent-fg); --sr-link: var(--sr-accent-fg); --sr-link-hover: var(--sr-accent-strong); /* Bordures */ --sr-line: rgba(22, 35, 63, 0.1); /* décorative : séparateurs, contour de carte */ --sr-line-strong: rgba(22, 35, 63, 0.18); --sr-line-field: var(--sr-ink-400); /* contour de champ, ≥ 3:1 */ --sr-focus-ring: rgba(var(--bs-primary-rgb, 13, 63, 156), 0.35); --sr-focus-outline: var(--sr-accent); /* Statuts : texte + lavis (fond à ~12 %) */ --sr-success: var(--sr-success-fg); --sr-success-subtle: rgba(25, 169, 78, 0.12); --sr-warning: var(--sr-warning-fg); --sr-warning-subtle: rgba(255, 193, 7, 0.22); --sr-danger: var(--sr-danger-fg); --sr-danger-subtle: rgba(240, 17, 17, 0.1); --sr-info: var(--sr-info-fg); --sr-info-subtle: rgba(30, 136, 255, 0.12); --sr-neutral: var(--sr-ink-700); --sr-neutral-subtle: rgba(22, 35, 63, 0.07); /* Boutons pleins de statut (texte blanc, AA) */ --sr-danger-solid: var(--sr-danger-fg); --sr-success-solid: var(--sr-success-fg); } [data-surface="gray"] { --sr-canvas: var(--sr-paper); --sr-panel: #ffffff; --sr-field: #ffffff; } /* Surface sombre : bandeaux, sections de conversion et barre latérale « différenciée » (réglage par défaut, voir Apparence). L'accent y devient le soleil du logo. */ [data-surface="dark"], :root:not([data-sidebar="uniform"]) .sidebar { --sr-canvas: var(--sr-brand-900); --sr-panel: rgba(255, 255, 255, 0.06); --sr-raised: var(--sr-brand-800); --sr-sunken: rgba(0, 0, 0, 0.18); --sr-hover: rgba(255, 255, 255, 0.1); --sr-selected: rgba(255, 255, 255, 0.16); --sr-field: rgba(255, 255, 255, 0.08); --sr-highlighter: var(--sr-sun-400); --sr-accent: var(--sr-sun-400); --sr-accent-strong: var(--sr-sun-300); --sr-accent-subtle: rgba(255, 193, 7, 0.14); --sr-accent-wash: rgba(255, 193, 7, 0.22); --sr-on-accent: var(--sr-ink-900); --sr-accent-fg: var(--sr-sun-400); --sr-fg: #ffffff; --sr-fg-secondary: rgba(255, 255, 255, 0.82); --sr-fg-muted: rgba(255, 255, 255, 0.7); --sr-fg-inactive: rgba(255, 255, 255, 0.4); --sr-fg-highlight: var(--sr-sun-400); --sr-link: #ffffff; --sr-link-hover: var(--sr-sun-400); --sr-line: rgba(255, 255, 255, 0.16); --sr-line-strong: rgba(255, 255, 255, 0.28); --sr-line-field: rgba(255, 255, 255, 0.55); --sr-focus-ring: rgba(255, 255, 255, 0.45); --sr-focus-outline: #ffffff; --sr-success: #5be08a; --sr-success-subtle: rgba(91, 224, 138, 0.16); --sr-warning: var(--sr-sun-400); --sr-warning-subtle: rgba(255, 193, 7, 0.16); --sr-danger: #ff8d80; --sr-danger-subtle: rgba(255, 141, 128, 0.16); --sr-info: #8fc4ff; --sr-info-subtle: rgba(143, 196, 255, 0.16); --sr-neutral: rgba(255, 255, 255, 0.82); --sr-neutral-subtle: rgba(255, 255, 255, 0.1); } /* ---------- Thème sombre (Profil › Apparence) ---------- Posé par le script en tête de _Layout.cshtml : data-theme="dark" sur , avant le premier rendu. Mêmes rôles qu'en clair, valeurs revues pour le fond nuit ; toutes les paires texte/fond passent AA (voir /DesignSystem). L'accent est éclairci à partir de la couleur de l'organisation, texte encre dessus. */ :root[data-theme="dark"] { color-scheme: dark; --sr-canvas: #0b1120; --sr-panel: #121b2e; --sr-raised: #18233a; --sr-sunken: #0e1627; --sr-hover: rgba(255, 255, 255, 0.05); --sr-selected: color-mix(in srgb, var(--sr-accent) 18%, transparent); --sr-overlay: rgba(2, 6, 18, 0.65); --sr-field: #0e1627; --sr-accent: color-mix(in srgb, var(--bs-primary, #0d3f9c) 55%, #ffffff); --sr-accent-strong: color-mix(in srgb, var(--bs-primary, #0d3f9c) 40%, #ffffff); --sr-accent-subtle: color-mix(in srgb, var(--sr-accent) 12%, transparent); --sr-accent-wash: color-mix(in srgb, var(--sr-accent) 16%, transparent); --sr-on-accent: #0b1120; --sr-accent-fg: color-mix(in srgb, var(--bs-primary, #0d3f9c) 40%, #ffffff); --sr-fg: #e8edf7; --sr-fg-secondary: #b6c0d4; --sr-fg-muted: #8f9bb4; --sr-fg-inactive: rgba(232, 237, 247, 0.38); --sr-line: rgba(255, 255, 255, 0.09); --sr-line-strong: rgba(255, 255, 255, 0.16); --sr-line-field: #66738f; --sr-focus-ring: color-mix(in srgb, var(--sr-accent) 45%, transparent); --sr-focus-outline: var(--sr-accent); --sr-success: #52be7a; --sr-success-subtle: rgba(25, 169, 78, 0.18); --sr-warning: #f5c542; --sr-warning-subtle: rgba(255, 193, 7, 0.16); --sr-danger: #ff8a7d; --sr-danger-subtle: rgba(240, 17, 17, 0.18); --sr-info: #7fb6ff; --sr-info-subtle: rgba(30, 136, 255, 0.18); --sr-neutral: #b6c0d4; --sr-neutral-subtle: rgba(255, 255, 255, 0.08); --sr-chart-grid: rgba(255, 255, 255, 0.08); --sr-chart-axis: rgba(255, 255, 255, 0.18); --sr-shadow-raised: 0 16px 40px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06); --bs-body-color-rgb: 232, 237, 247; --bs-emphasis-color: var(--sr-fg); --bs-secondary-bg: var(--sr-sunken); --bs-tertiary-bg: var(--sr-sunken); } /* ---------- Barre latérale : uniforme ou différenciée (Profil › Apparence, repris de Quorly) ---------- « Différenciée » (défaut) : dégradé de la couleur de l'organisation, texte clair (tokens de la surface sombre ci-dessus). « Uniforme » : même fond que les panneaux, séparée par un filet. */ :root { --sr-sidebar-from: var(--bs-primary, #0d3f9c); --sr-sidebar-to: var(--bs-primary-dark, #092c6d); } :root[data-theme="dark"] { --sr-sidebar-from: color-mix(in srgb, var(--bs-primary, #0d3f9c) 38%, #050914); --sr-sidebar-to: color-mix(in srgb, var(--bs-primary, #0d3f9c) 18%, #050914); } /* ---------- Pont vers Bootstrap 5.3 : ses utilitaires et composants suivent les tokens ---------- */ :root { /* Couleur de marque par défaut de la plateforme. _Layout.cshtml la surcharge (balise