/* ───────────────────────────────────────────────────────────────────────── Mobilis — Design tokens v2 (proposition redesign 2026-06-11) Esthétique : SaaS B2B sobre, "civic tech" / outil de décision publique. Inspirations : Remix (Via), ArcGIS Urban, Metabase, Linear. Principes : - 1 seule couleur d'accent forte (bleu signal) — pas de gradients - Sidebar topée navy (autorité) + canvas clair (lisibilité) - Couleurs modes TC fidèles aux conventions transit (RATP/Tisséo-like) - Échelle typo modulaire 1.125 (major second) — densité utile sans claustrophobie - Spacing base 4 px, échelle Fibonacci-like 4/8/12/16/24/32/48/64 À importer EN TÊTE de app.css, AVANT toute règle existante. ──────────────────────────────────────────────────────────────────────── */ :root { /* ── 1. PALETTE NEUTRES (canvas) ────────────────────────────────────── */ /* Décalage volontaire vers le bleu froid (vs stone actuel) : signal SaaS pro */ --bg: #f6f8fb; /* Canvas global (slate-50 légèrement teinté) */ --surface: #ffffff; /* Cartes, modales, panneaux */ --surface-2: #f1f5f9; /* Lignes de tableau alternées, états hover */ --surface-3: #e2e8f0; /* Inputs disabled, fond bandes secondaires */ --border: #e5e9f0; /* Séparateurs faibles (1 px) */ --border-strong: #cbd5e1; /* Bordures inputs, contours cartes */ --border-focus: #93c5fd; /* Ring focus accessible */ /* ── 2. TYPOGRAPHIE — textes ─────────────────────────────────────────── */ --text: #0f172a; /* Titres, KPI chiffres, labels actifs */ --text-muted: #475569; /* Corps, labels secondaires */ --text-subtle: #94a3b8; /* Aides, placeholders, métadonnées */ --text-inverse: #ffffff; /* Sur fond brand ou sidebar dark */ /* ── 3. BRAND — accent principal ─────────────────────────────────────── */ /* Signal blue #2563eb : neutre politiquement, lisible, "outil sérieux". Évite le bleu RATP/SNCF qui connoterait un opérateur précis. */ --brand: #2563eb; --brand-hover: #1d4ed8; --brand-active: #1e40af; --brand-soft: #dbeafe; /* Pills, badges actifs, hover discrets */ --brand-subtle: #eff6ff; /* Backgrounds très légers (active row) */ /* ── 4. SIDEBAR / TOPBAR — chrome dark ───────────────────────────────── */ /* Pattern testé : sidebar navy + canvas clair = autorité + lisibilité */ --nav-bg: #0f1d3a; /* Sidebar / topbar — navy "civic" */ --nav-bg-hover: #18294d; --nav-bg-active: #1e3a8a; /* Item actif (s'aligne sur brand) */ --nav-text: #cbd5e1; /* Items inactifs (off-white slate) */ --nav-text-active: #ffffff; --nav-border: #1e2e52; --nav-divider: #25365e; /* ── 5. STATUTS — sémantique fonctionnelle ───────────────────────────── */ /* Tons saturés mais pas criards (B2B), versions soft pour fonds de pills */ --success: #16a34a; --success-soft: #dcfce7; --success-text: #166534; --warning: #d97706; --warning-soft: #fef3c7; --warning-text: #92400e; --danger: #dc2626; --danger-soft: #fee2e2; --danger-text: #991b1b; --info: #0891b2; /* "running", "en cours" — distinct du brand */ --info-soft: #cffafe; --info-text: #155e75; --neutral: #64748b; /* "queued", "draft" */ --neutral-soft: #f1f5f9; --neutral-text: #334155; /* ── 6. MODES DE TRANSPORT — fidèles aux usages métier ───────────────── */ /* Tirés des conventions RATP/Tisséo/STIF : bus bleu, métro violet, tram rouge, train cyan-foncé. Restent lisibles sur fond clair ET sur tuile gris clair. */ --mode-bus: #1e40af; --mode-tram: #dc2626; --mode-metro: #7c3aed; --mode-train: #0e7490; --mode-rer: #047857; /* RER vert pour cohérence Île-de-France */ --mode-walk: #525252; --mode-bike: #15803d; --mode-car: #92400e; --mode-tad: #db2777; /* Transport à la demande */ /* F3 CV-4c.2 (2026-08-06) : complète la palette modes pour couvrir tous les modes rencontrés dans les données MATSim / GTFS. */ --mode-lineo: #0B5ED7; /* Lignes Linéo Tisséo (BHNS structurant) */ --mode-pt: #E4A11B; /* Transport public générique (fallback) */ --mode-car-passenger: #5B5B5B; /* Covoiturage passager */ --mode-ferry: #0e7490; /* Bateau — même famille que rail */ --mode-halo: #ffffff; /* Halo de sélection ligne */ --mode-selected-halo: #00CCFF; /* Cyan pour ligne sélectionnée (PREP §SPEC) */ /* STYLE-SELECTION-LIGNE 2026-08-10 (verdict humain — DÉCISIONS CARTE OFFRE) : 3 états d'une ligne sur la carte (source unique de vérité). - default : opacity 0.9, weight = mode base (voir MODE_STYLE line_renderer) - hover : opacity 1.0, weight = base + 1 (léger, transitoire) - selected: opacity 1.0, weight = base × 2 (SATURATION PLEINE) → simultanément, toutes les AUTRES lignes passent à opacity DIMMED Ne coder ces valeurs qu'ici — line_renderer.js les lit via `getComputedStyle(document.documentElement).getPropertyValue(...)`. */ --line-selected-weight-mult: 2; --line-selected-opacity: 1.0; --line-dimmed-opacity: 0.25; --line-default-opacity: 0.9; --line-hover-opacity: 1.0; /* ── 7. DATAVIZ — palette qualitative 8 couleurs ─────────────────────── */ /* Optimisée pour : (a) discriminable en daltonisme (deuteranopie) ; (b) compatible Chart.js ; (c) ordre par hue pour clusters naturels. */ --viz-1: #2563eb; /* bleu — défaut série A */ --viz-2: #16a34a; /* vert — série B */ --viz-3: #d97706; /* ambre — série C */ --viz-4: #dc2626; /* rouge — série D */ --viz-5: #7c3aed; /* violet— série E */ --viz-6: #0891b2; /* cyan — série F */ --viz-7: #db2777; /* pink — série G */ --viz-8: #475569; /* slate — série fallback */ /* Diff scenario A/B : codifié rouge/vert (vs gris pour "égal") */ --diff-positive: #16a34a; --diff-negative: #dc2626; --diff-neutral: #94a3b8; /* Legacy data-viz accents (consommés par demand_analytics.css) — conservés pour rétrocompat. Les nouveaux composants utilisent --viz-1..--viz-8. */ --accent-cyan: #06b6d4; --accent-violet: #a855f7; --accent-magenta: #d946ef; --accent-pink: #ec4899; --accent-amber: #f59e0b; --accent-emerald: #10b981; /* ── 8. CARTE LEAFLET ────────────────────────────────────────────────── */ /* Tuile de fond : CARTO Positron — neutre, gris clair, parfait support TC. Évite OSM standard qui est trop coloré et "concurrence" les lignes. */ --map-tile-url: "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png"; --map-tile-attrib: "© OpenStreetMap, © CARTO"; --map-overlay-bg: rgba(255, 255, 255, 0.96); /* Pour panneaux flottants */ --map-overlay-border: #cbd5e1; --map-line-halo: rgba(255, 255, 255, 0.95); /* Halo sous polylines */ /* ── 9. TYPOGRAPHIE — système ────────────────────────────────────────── */ /* Inter : neutre, sectorielle (utilisée par Linear, Vercel, Stripe, etc.). 1 seule famille. Mono pour codes, IDs, valeurs numériques. */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; /* Échelle modulaire ratio 1.125 (major second) — palier B2B standard */ --text-xs: 0.75rem; /* 12 px — métadonnées, labels secondaires */ --text-sm: 0.8125rem; /* 13 px — corps secondaire, tableaux denses */ --text-base: 0.875rem; /* 14 px — corps par défaut (SaaS pro = pas 16) */ --text-md: 1rem; /* 16 px — corps "lecture" */ --text-lg: 1.125rem; /* 18 px — sous-titres section */ --text-xl: 1.25rem; /* 20 px — titres de carte / panneau */ --text-2xl: 1.5rem; /* 24 px — titres de page */ --text-3xl: 1.875rem; /* 30 px — KPI grand chiffre */ --text-4xl: 2.25rem; /* 36 px — KPI "hero" dashboard */ --leading-tight: 1.25; --leading-snug: 1.4; --leading-normal: 1.5; --leading-relaxed: 1.65; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; /* PAS de 700/800 — la hiérarchie passe par la taille et la couleur. */ --tracking-tight: -0.01em; /* Pour KPI chiffres > 24 px */ --tracking-wide: 0.05em; /* Pour labels UPPERCASE (badges, sections) */ /* ── 10. SPACING — base 4 px ─────────────────────────────────────────── */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* ── 11. RADIUS ──────────────────────────────────────────────────────── */ /* Cohérence : 6 px sur tous les composants interactifs (inputs, boutons, badges, cartes). 10 px pour conteneurs majeurs. Aucun radius>10 px. */ --radius-sm: 4px; /* Tags, badges fins */ --radius: 6px; /* Boutons, inputs, badges, cartes simples */ --radius-lg: 10px; /* Cartes principales, modales */ --radius-xl: 14px; /* Hero cards (rarement) */ --radius-pill: 999px; /* Pills de statut, avatars */ /* ── 12. SHADOWS ─────────────────────────────────────────────────────── */ /* Très subtiles — l'app doit sembler "dessinée par un graphiste" pas par CSS. Pas de box-shadow noir 0/4/12/20 — du slate transparent. */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow: 0 2px 4px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.05); --shadow-md: 0 4px 8px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(15, 23, 42, 0.06); --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(15, 23, 42, 0.06); --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.25); /* Ring focus accent */ /* ── 13. TRANSITIONS ─────────────────────────────────────────────────── */ --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 180ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 260ms cubic-bezier(0.4, 0, 0.2, 1); /* ── 14. LAYOUT — dimensions cadre ───────────────────────────────────── */ --nav-sidebar-width: 224px; --nav-sidebar-width-collapsed: 56px; --topbar-height: 52px; --topbar-context-height: 40px; /* Bandeau scénario actif sous topbar */ --modal-max-width: 640px; --modal-max-width-lg: 880px; /* ── 15. Z-INDEX (échelle stricte) ───────────────────────────────────── */ --z-base: 1; --z-map-overlay: 400; /* Au-dessus de Leaflet (qui finit à ~400) */ --z-sticky: 900; --z-topbar: 1000; --z-dropdown: 1100; --z-modal: 1200; --z-toast: 1300; --z-tooltip: 1400; } /* ───────────────────────────────────────────────────────────────────────── THEME DARK — variante "operations center" (Aimsun/Vissim style) Activé via . Conserve la structure : on remplace UNIQUEMENT les neutres + brand (les modes TC restent identiques car ce sont des conventions externes). ──────────────────────────────────────────────────────────────────────── */ :root[data-theme="dark"] { --bg: #0b1220; --surface: #111a2e; --surface-2: #15203a; --surface-3: #1c2a48; --border: #1f2d4d; --border-strong: #2c3d63; --border-focus: #60a5fa; --text: #f1f5f9; --text-muted: #cbd5e1; --text-subtle: #64748b; --brand: #3b82f6; --brand-hover: #60a5fa; --brand-active: #93c5fd; --brand-soft: rgba(59, 130, 246, 0.18); --brand-subtle: rgba(59, 130, 246, 0.08); --nav-bg: #060c1c; --nav-bg-hover: #0e1830; --nav-bg-active: #1e3a8a; --nav-border: #131e3a; --success-soft: rgba(22, 163, 74, 0.18); --warning-soft: rgba(217, 119, 6, 0.18); --danger-soft: rgba(220, 38, 38, 0.18); --info-soft: rgba(8, 145, 178, 0.18); --neutral-soft: rgba(100, 116, 139, 0.18); --map-tile-url: "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png"; --map-overlay-bg: rgba(17, 26, 46, 0.96); --map-line-halo: rgba(0, 0, 0, 0.7); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.50); --shadow: 0 4px 12px rgba(0, 0, 0, 0.50); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.55); --shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.35); } /* ───────────────────────────────────────────────────────────────────────── PRIMITIVES UTILITAIRES — uniquement pour démarrer. Le but est PAS de devenir Tailwind ; juste avoir 4-5 helpers globaux. ──────────────────────────────────────────────────────────────────────── */ html { font-family: var(--font-sans); font-size: 16px; color: var(--text); } body { background: var(--bg); } /* Focus ring accessible global (clavier) */ *:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius); } /* Sélection texte */ ::selection { background: var(--brand-soft); color: var(--text); } /* Scrollbars discrètes (WebKit) */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-pill); border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); }