/* ========================================================================== MC Pilot — V2 : source graphique autonome (primitives + thèmes). Ce fichier est la SEULE source de couleurs de la V2. Il ne charge, n'importe ni ne référence aucun CSS de la V1 (/assets/css/app/*) : les valeurs de la charte y sont volontairement dupliquées, à l'identique de tokens.css, selon le même principe déjà appliqué entre le site public et l'application V1 (aucun fichier partagé au déploiement ; toute évolution de la charte doit être répercutée aux endroits qui la dupliquent). Deux niveaux de variables : A. Primitives (--brand-*, --card, --line, --shadow) : les couleurs et valeurs fixes de la charte MC Pilot. Identiques quel que soit le thème. B. Sémantique d'interface (--ui-*) : le rôle de la couleur (fond de page, surface, texte, menu, bordure, voile, …). Ce sont ces variables que les composants de styles.css doivent consommer. Leur valeur change selon data-theme, pas les primitives. Deux thèmes sont préparés : "paper" (menu crème — thème actif par défaut depuis V2-04) et "ink" (menu vert encre, reproduisant l'apparence historique — sélectionnable, non actif par défaut). Aucune bascule visible n'est ajoutée par cette livraison : le choix se fait uniquement via l'attribut data-theme sur . ========================================================================== */ :root { /* ---- Primitives de la charte MC Pilot (valeurs de tokens.css V1) ---- */ --brand-ink: #12312c; --brand-ink-soft: #2f5b52; --brand-ink-light: #ecf2ee; --brand-accent: #E0A370; --brand-accent-deep: #C8783F; /*--brand-accent-deep: #9d5a26;*/ --brand-accent-light: #f7e5e1; --brand-alert: #a83a2a; --brand-valid: #2e6b4f; --brand-valid-soft: #e4f1e9; --brand-cream: #e3ddd2; --brand-paper: #f4efe8; --brand-paper-shade: #f2efe7; --brand-stone: #8A8681; --brand-stone-soft:#E3DDD2; --card: #ffffff; --line: #ddd7ca; --shadow: 0 8px 22px rgba(18, 49, 44, .08); } /* ---- Thème « Ink » : menu vert encre — préparé, sélectionnable ---- Reproduit exactement l'apparence V2 historique (antérieure à V2-04) : fond crème, cartes blanches, texte vert encre, menu latéral vert encre à texte clair, entrée active blanche à texte vert encre, orange MC Pilot en accent. L'ensemble reste un habillage clair : color-scheme reste "light" (ce n'est pas un véritable thème sombre d'interface, seul le menu latéral est sombre). ========================================================================== */ :root[data-theme="ink"] { color-scheme: dark; --ui-page-background: var(--card); --ui-surface-background: var(--card); --ui-surface-muted: var(--brand-paper-shade); --ui-surface-translucent: color-mix(in srgb, var(--card) 68%, transparent); --ui-text-primary: var(--brand-ink); --ui-text-secondary: var(--brand-stone); --ui-on-strong: #ffffff; --ui-border: var(--line); --ui-focus: var(--brand-accent); --ui-sidebar-background: var(--brand-ink); --ui-sidebar-text: var(--brand-cream); --ui-sidebar-hover-background: color-mix(in srgb, var(--card) 9%, transparent); --ui-sidebar-active-background: var(--card); --ui-sidebar-active-text: var(--brand-ink); --ui-topbar-background: color-mix(in srgb, var(--card) 94%, transparent); --ui-dialog-overlay: color-mix(in srgb, var(--brand-ink) 62%, transparent); --ui-nav-overlay: color-mix(in srgb, var(--brand-ink) 55%, transparent); --ui-info-background: var(--brand-ink-light); --ui-info-text: var(--brand-ink); } /* ---- Thème « paper » : menu crème — actif par défaut depuis V2-04 ---- Même charte, même page, mêmes surfaces : seul le menu latéral s'inverse (fond --brand-paper, texte --brand-ink, entrée active --brand-ink à texte clair). C'est le thème que porte par défaut (data-theme="paper", et le sélecteur nu :root ci-dessous) ; Ink reste l'alternative sélectionnable via data-theme="ink". ========================================================================== */ :root, :root[data-theme="paper"] { color-scheme: light; --ui-page-background: var(--card); --ui-surface-background: var(--card); --ui-surface-muted: var(--brand-paper); --ui-surface-translucent: color-mix(in srgb, var(--card) 68%, transparent); --ui-text-primary: var(--brand-ink); --ui-text-secondary: var(--brand-stone); --ui-on-strong: #ffffff; --ui-border: var(--line); --ui-focus: var(--brand-accent); --ui-sidebar-background: var(--brand-paper); --ui-sidebar-text: var(--brand-ink); --ui-sidebar-hover-background: color-mix(in srgb, var(--brand-ink) 8%, transparent); --ui-sidebar-active-background: var(--brand-ink); --ui-sidebar-active-text: var(--ui-on-strong); --ui-topbar-background: color-mix(in srgb, var(--card) 94%, transparent); --ui-dialog-overlay: color-mix(in srgb, var(--brand-ink) 62%, transparent); --ui-nav-overlay: color-mix(in srgb, var(--brand-ink) 55%, transparent); --ui-info-background: var(--brand-ink-light); --ui-info-text: var(--brand-ink); }