@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Source+Serif+4:opsz,wght@8..60,500;8..60,600;8..60,700&family=Roboto:wght@400;500;700;900&display=swap"); /* Système multi-thème (docs/v4/CHANTIER_REFONTE_DESIGN.md, chantier 2026-08-03 ; thème "terracotta" retiré le 2026-08-08, plus jamais utilisé) : 2 identités visuelles ("apex" = défaut/:root, inspiré d'un dashboard SaaS sombre fourni par le porteur du projet, "google" = inspiré des applications Google/Material), chacune déclinée en clair + sombre = 4 jeux de tokens au total, sélectionnés via deux attributs indépendants sur : [data-brand] (global, imposé par l'admin, stocké dans config/main.uiTheme, voir app.js applyBrandTheme()) et [data-theme] (individuel, déjà existant, stocké dans localStorage). Seule cette section définit des couleurs : modules/company/ style.css et articles/style.css ne codent plus aucune couleur en dur, ils pointent tous vers ces variables (var(--text), var(--primary), etc.) pour ne jamais diverger d'un thème à l'autre. --success/--warning/--danger restent volontairement hors de la déclinaison par marque (une erreur doit rester rouge, un succès vert, quel que soit le thème visuel actif). --story-bg/--story-bg-2 : les quelques panneaux décoratifs "toujours sombres" (bandeau hero du site public, panneau gauche des pages Auth, carte d'accroche du tableau de bord, etc.) qui ne basculent PAS avec [data-theme] — seulement avec la marque active, comme une plaque de couleur de marque plutôt qu'une zone de contenu normale. */ :root { --app-bg: #f4f6fb; --surface: #ffffff; --surface-muted: #eef1f8; --surface-elevated: #ffffff; --surface-border: #e2e6f0; --surface-border-strong: #cbd2e6; --text: #111827; --text-muted: #5b6472; --primary: #4f6ef7; --primary-hover: #3f59d9; --primary-container: #e6eaff; /* Distincte de --primary : sert uniquement aux textes accentués (.text-emerald-600/700, alias visuel de l'accent de marque). Avant cette séparation, un même bouton avec un fond ET un texte de la même couleur devenait illisible — voir docs/v4/CAHIER_DES_CHARGES_V4.md, chantier 2026-08-02. */ --primary-text: #3f59d9; --success: #16a34a; --success-container: #dcfce7; --warning: #d97706; --danger: #dc2626; --success-rgb: 22, 163, 74; --warning-rgb: 217, 119, 6; --danger-rgb: 220, 38, 38; --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06), 0 1px 3px rgba(17, 24, 39, 0.05); --shadow-md: 0 12px 24px rgba(17, 24, 39, 0.08), 0 4px 10px rgba(17, 24, 39, 0.05); --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 26px; --transition: 180ms cubic-bezier(0.2, 0.8, 0.2, 1); --font-display: var(--font-body); --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --primary-rgb: 79, 110, 247; --app-bg-rgb: 244, 246, 251; --text-rgb: 17, 24, 39; --story-bg: #0b0f1a; --story-bg-2: #1b2650; --story-bg-rgb: 11, 15, 26; /* Trio catégoriel dédié aux graphiques Chart.js (shared/finance-trend-chart.js) : --success/--danger existent déjà mais leur rouge/vert échoue le contrôle de séparation daltonisme (ΔE 5.0 < 6 requis, script dataviz) une fois posés côte à côte sur un même graphique — --danger reste donc réservé aux messages d'erreur, pas aux séries de graphique. Trio validé (node scripts/validate_palette.js, skill dataviz) pour les 4 combinaisons marque×thème de ce fichier. */ --chart-inflow: #0086ab; --chart-outflow: #d97706; --chart-line: #4f6ef7; } html, body { font-family: var(--font-body); color: var(--text); background: radial-gradient( circle at top, rgba(var(--primary-rgb), 0.05) 0%, var(--app-bg) 48%, rgba(var(--primary-rgb), 0.03) 100% ); } body { min-height: 100vh; } button, input, select, textarea { font: inherit; } input, select, textarea { appearance: none; background: var(--surface-muted); border: 1px solid var(--surface-border); border-radius: var(--radius-md); color: var(--text); transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px rgba(201, 51, 25, 0.14); } .gm-surface { background: var(--surface); border: 1px solid var(--surface-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .gm-muted { color: var(--text-muted); } .gm-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 999px; border: 1px solid transparent; font-weight: 600; transition: background-color var(--transition), border-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition); } .gm-button:hover { transform: translateY(-1px); } .gm-button-primary { background: var(--primary); color: #fff; box-shadow: 0 8px 18px rgba(201, 51, 25, 0.22); } .gm-button-primary:hover { background: var(--primary-hover); } .gm-button-secondary { background: var(--surface-muted); color: var(--text); border-color: var(--surface-border); } .gm-button-secondary:hover { background: var(--surface-elevated); } .gm-button-outline { background: transparent; color: var(--text); border-color: var(--surface-border-strong); } .gm-btn-primary { background: var(--primary); color: #fff; } .gm-btn-primary:hover { background: var(--primary-hover); } .gm-badge-valid { display: inline-flex; align-items: center; gap: 0.35rem; border-radius: 999px; background: var(--success-container); color: var(--success); font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.65rem; } .app-card, .rounded-\[28px\].border.border-slate-200.bg-white, .rounded-\[32px\].border.border-slate-200.bg-white { background: var(--surface) !important; border-color: var(--surface-border) !important; box-shadow: var(--shadow-sm) !important; } /* Chantier 2026-08-02 (docs/v4/CHANTIER_REFONTE_DESIGN.md) : exigence explicite du porteur du projet — une carte ne doit jamais imposer sa hauteur aux autres cartes de sa grille. CSS Grid étire ses enfants par défaut (align-items:stretch implicite) ; on neutralise ce comportement uniquement sur les grilles qui contiennent des cartes (signature déjà utilisée dans tout le projet : rounded-[28px]/[32px]/3xl + border, ou un

), pour ne pas toucher aux grilles de mise en page (formulaires, colonnes de texte) qui, elles, veulent parfois s'étirer. */ .grid:has(> .rounded-\[28px\]), .grid:has(> .rounded-\[32px\]), .grid:has(> article), .grid:has(> .rounded-3xl.border) { align-items: start; } /* Chantier navigation 2026-08-08 : les tuiles KPI (shared/kpi-tiles.js) sont soit des

, soit des