/* ═══════════════════════════════════════════════════════════════════════════ SoGreen AIOS — Système de design Deux thèmes pilotés par tokens CSS : data-theme="light" | "dark" sur ═══════════════════════════════════════════════════════════════════════════ */ /* ── Typographie : Inter (vendorisée) ──────────────────────────────────────── */ @font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap; src: url('/static/fonts/inter-latin-400.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-weight: 500; font-style: normal; font-display: swap; src: url('/static/fonts/inter-latin-500.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-weight: 600; font-style: normal; font-display: swap; src: url('/static/fonts/inter-latin-600.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-weight: 700; font-style: normal; font-display: swap; src: url('/static/fonts/inter-latin-700.woff2') format('woff2'); } /* ── Tokens — thème clair (défaut) ─────────────────────────────────────────── */ :root, [data-theme="light"] { --bg: #f5f7fa; --bg-image: radial-gradient(1000px 500px at 85% -10%, rgba(0, 166, 81, 0.05), transparent 60%); --sidebar-bg: #ffffff; --sidebar-border: #e8edf3; --card: #ffffff; --card-border: #e8edf3; --card-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 2px 8px rgba(16, 24, 40, 0.04); --card-shadow-hover: 0 2px 4px rgba(16, 24, 40, 0.06), 0 8px 24px rgba(16, 24, 40, 0.08); --text: #0f1a2a; --text-muted: #5d6f85; --text-faint: #93a3b8; --accent: #00a651; --accent-strong: #007a3c; --accent-soft: rgba(0, 166, 81, 0.09); --accent-ring: rgba(0, 166, 81, 0.28); --warn: #e8930c; --warn-soft: rgba(232, 147, 12, 0.10); --danger: #dc2626; --danger-soft: rgba(220, 38, 38, 0.08); /* Graphiques */ --ch-text: #5d6f85; --ch-title: #0f1a2a; --ch-grid: rgba(15, 26, 42, 0.06); --ch-axis: rgba(15, 26, 42, 0.14); --ch-tooltip-bg: #ffffff; --ch-tooltip-text: #0f1a2a; --ch-1: #00a651; --ch-1-soft: rgba(0, 166, 81, 0.16); --ch-2: #0ea5e9; --ch-3: #6366f1; --ch-4: #f59e0b; --ch-5: #ef4444; --ch-6: #14b8a6; --ch-7: #8b5cf6; --ch-neutral: #cbd5e1; --ch-objectif: #94a3b8; --ch-glow: transparent; /* pas de glow en clair */ } /* ── Tokens — thème sombre « command center » ──────────────────────────────── */ [data-theme="dark"] { --bg: #0a111e; --bg-image: radial-gradient(1100px 550px at 80% -10%, rgba(0, 166, 81, 0.13), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(14, 165, 233, 0.07), transparent 55%); --sidebar-bg: #0d1525; --sidebar-border: rgba(148, 163, 184, 0.10); --card: rgba(17, 26, 44, 0.88); --card-border: rgba(148, 163, 184, 0.12); --card-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 24px rgba(2, 6, 16, 0.35); --card-shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 12px 32px rgba(2, 6, 16, 0.5); --text: #e8eef7; --text-muted: #93a6bd; --text-faint: #5d7089; --accent: #34d399; --accent-strong: #6ee7b7; --accent-soft: rgba(52, 211, 153, 0.12); --accent-ring: rgba(52, 211, 153, 0.35); --warn: #fbbf24; --warn-soft: rgba(251, 191, 36, 0.12); --danger: #f87171; --danger-soft: rgba(248, 113, 113, 0.12); /* Graphiques */ --ch-text: #8aa0b8; --ch-title: #e8eef7; --ch-grid: rgba(148, 163, 184, 0.10); --ch-axis: rgba(148, 163, 184, 0.22); --ch-tooltip-bg: #15203a; --ch-tooltip-text: #e8eef7; --ch-1: #34d399; --ch-1-soft: rgba(52, 211, 153, 0.22); --ch-2: #38bdf8; --ch-3: #818cf8; --ch-4: #fbbf24; --ch-5: #f87171; --ch-6: #2dd4bf; --ch-7: #a78bfa; --ch-neutral: #334155; --ch-objectif: #64748b; --ch-glow: rgba(52, 211, 153, 0.45); /* glow des lignes/barres en sombre */ } /* ── Base ──────────────────────────────────────────────────────────────────── */ html { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; } body { background-color: var(--bg); background-image: var(--bg-image); background-attachment: fixed; color: var(--text); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; } /* Chiffres alignés (tableaux, KPIs) */ .tnum { font-feature-settings: 'tnum' 1, 'lnum' 1; font-variant-numeric: tabular-nums lining-nums; } /* ── Surfaces ──────────────────────────────────────────────────────────────── */ .surface-sidebar { background-color: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border); } .surface-header { background-color: var(--card); border-bottom: 1px solid var(--card-border); backdrop-filter: blur(8px); } .card { background-color: var(--card); border: 1px solid var(--card-border); border-radius: 14px; box-shadow: var(--card-shadow); transition: box-shadow 180ms ease, transform 180ms ease; } .card-hover:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-1px); } .t-text { color: var(--text); } .t-muted { color: var(--text-muted); } .t-faint { color: var(--text-faint); } .t-accent { color: var(--accent); } .t-warn { color: var(--warn); } .t-danger { color: var(--danger); } /* ── KPI cards ─────────────────────────────────────────────────────────────── */ .kpi-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); flex-shrink: 0; } .kpi-icon.is-warn { background: var(--warn-soft); color: var(--warn); } .kpi-icon.is-danger { background: var(--danger-soft); color: var(--danger); } .kpi-value { font-size: 1.65rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--text); } /* ── Navigation / sous-onglets ─────────────────────────────────────────────── */ .nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; font-size: 0.875rem; font-weight: 500; color: var(--text-muted); transition: background 140ms ease, color 140ms ease; } .nav-item:hover { color: var(--text); background: var(--accent-soft); } .nav-item.is-active { color: var(--accent); background: var(--accent-soft); font-weight: 600; } .subtab { padding: 8px 18px; border-radius: 10px; font-size: 0.875rem; font-weight: 500; color: var(--text-muted); border: 1px solid var(--card-border); background: var(--card); transition: all 150ms ease; cursor: pointer; } .subtab:hover { color: var(--text); border-color: var(--accent-ring); } .subtab-active, .subtab.subtab-active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; box-shadow: 0 2px 10px var(--accent-ring); } [data-theme="dark"] .subtab-active, [data-theme="dark"] .subtab.subtab-active { color: #06281a; } /* ── Tableaux ──────────────────────────────────────────────────────────────── */ .data-table { width: 100%; font-size: 0.875rem; } .data-table thead th { text-align: left; font-size: 0.69rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); padding: 8px 12px 8px 0; border-bottom: 1px solid var(--card-border); } .data-table tbody td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--ch-grid); color: var(--text-muted); } .data-table tbody tr:last-child td { border-bottom: none; } .data-table tbody tr { transition: background 120ms ease; } .data-table tbody tr:hover { background: var(--accent-soft); } /* ── Graphiques ────────────────────────────────────────────────────────────── */ .chart-box { position: relative; height: 280px; width: 100%; } .chart-box-tall { height: 340px; } /* Indicateur de chargement htmx */ .htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; } /* Apparition douce des fragments */ #tab-content > * { animation: aios-fade-in 280ms ease both; } @keyframes aios-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* ── Conseiller financier IA — widget de chat flottant ─────────────────────── */ #ai-advisor { position: fixed; right: 24px; bottom: 24px; z-index: 50; font-family: 'Inter', system-ui, sans-serif; } /* Bulle / bouton flottant */ #ai-fab { display: flex; align-items: center; gap: 9px; padding: 13px 18px; border-radius: 999px; color: #fff; font-size: 0.875rem; font-weight: 600; background: linear-gradient(135deg, var(--accent), var(--accent-strong)); box-shadow: 0 8px 26px var(--accent-ring), 0 2px 6px rgba(2, 6, 16, 0.18); cursor: pointer; transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease; } #ai-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 32px var(--accent-ring); } #ai-fab .ai-fab-icon { width: 20px; height: 20px; } [data-theme="dark"] #ai-fab { color: #06281a; } #ai-advisor.is-open #ai-fab { opacity: 0; pointer-events: none; transform: scale(0.9); } /* Panneau de chat */ #ai-panel { position: absolute; right: 0; bottom: 0; width: min(480px, calc(100vw - 32px)); height: calc(100vh - 48px); display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--card-border); border-radius: 18px; box-shadow: 0 24px 60px rgba(2, 6, 16, 0.28), 0 2px 8px rgba(2, 6, 16, 0.12); overflow: hidden; transform-origin: bottom right; animation: ai-pop 200ms cubic-bezier(0.16, 1, 0.3, 1) both; } /* L'attribut `hidden` doit primer sur `display: flex` ci-dessus (sinon le panneau reste affiché en permanence par-dessus la bulle). */ #ai-panel[hidden] { display: none; } @keyframes ai-pop { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: none; } } .ai-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 14px; border-bottom: 1px solid var(--card-border); background: linear-gradient(135deg, var(--accent-soft), transparent 70%), var(--card); } .ai-head-id { display: flex; align-items: center; gap: 10px; } .ai-head-avatar { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-strong)); } [data-theme="dark"] .ai-head-avatar { color: #06281a; } .ai-head-title { font-size: 0.9rem; font-weight: 700; color: var(--text); line-height: 1.1; } .ai-head-sub { font-size: 0.72rem; color: var(--text-faint); } .ai-icon-btn { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--text-faint); cursor: pointer; transition: all 140ms ease; } .ai-icon-btn:hover { color: var(--text); background: var(--accent-soft); } /* Fil de messages */ #ai-messages { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 12px; } .ai-msg { display: flex; } .ai-msg-user { justify-content: flex-end; } .ai-msg-bot { justify-content: flex-start; } .ai-bubble { max-width: 92%; padding: 13px 16px; border-radius: 14px; font-size: 1.05rem; line-height: 1.6; color: var(--text); } .ai-msg-bot .ai-bubble { background: var(--accent-soft); border: 1px solid var(--card-border); border-bottom-left-radius: 4px; } .ai-msg-user .ai-bubble { background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: #fff; border-bottom-right-radius: 4px; } [data-theme="dark"] .ai-msg-user .ai-bubble { color: #06281a; } .ai-bubble.is-error { background: var(--danger-soft); border: 1px solid var(--danger); color: var(--danger); } /* Rendu markdown dans les bulles de l'agent */ .ai-bubble h1, .ai-bubble h2, .ai-bubble h3 { font-size: 1.15rem; font-weight: 700; margin: 14px 0 7px; color: var(--text); } .ai-bubble h1:first-child, .ai-bubble h2:first-child, .ai-bubble h3:first-child { margin-top: 0; } .ai-bubble p { margin: 7px 0; } .ai-bubble p:first-child { margin-top: 0; } .ai-bubble p:last-child { margin-bottom: 0; } .ai-bubble ul, .ai-bubble ol { margin: 7px 0; padding-left: 20px; } .ai-bubble li { margin: 6px 0; } .ai-bubble strong { color: var(--text); font-weight: 700; } .ai-bubble code { font-size: 0.8em; padding: 1px 5px; border-radius: 5px; background: var(--ch-grid); font-family: ui-monospace, monospace; } /* Chips de démarrage rapide */ .ai-chips { display: flex; flex-wrap: wrap; gap: 7px; } .ai-chip { padding: 7px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 500; color: var(--accent); background: var(--card); border: 1px solid var(--accent-ring); cursor: pointer; transition: all 140ms ease; } .ai-chip:hover { background: var(--accent-soft); transform: translateY(-1px); } /* Indicateur de saisie (typing) */ .ai-typing { display: inline-flex; gap: 4px; align-items: center; padding: 2px 0; } .ai-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: ai-blink 1.2s infinite ease-in-out both; } .ai-typing span:nth-child(2) { animation-delay: 0.2s; } .ai-typing span:nth-child(3) { animation-delay: 0.4s; } @keyframes ai-blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } } /* Zone de saisie */ #ai-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px 4px; border-top: 1px solid var(--card-border); } #ai-input { flex: 1; resize: none; max-height: 110px; padding: 9px 12px; border-radius: 12px; font-size: 0.84rem; font-family: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--card-border); outline: none; transition: border-color 140ms ease, box-shadow 140ms ease; } #ai-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } #ai-send { width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-strong)); cursor: pointer; transition: opacity 140ms ease, transform 140ms ease; } [data-theme="dark"] #ai-send { color: #06281a; } #ai-send:hover { transform: translateY(-1px); } #ai-send:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } .ai-foot { text-align: center; font-size: 0.66rem; color: var(--text-faint); padding: 4px 0 8px; } @media (max-width: 480px) { #ai-advisor { right: 14px; bottom: 14px; } } /* ── Entonnoir CSS (legacy — remplacé par ECharts funnel) ──────────────────── */ .funnel-seg { position: relative; height: 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; text-align: center; line-height: 1.3; padding: 0 8px; } .funnel-seg + .funnel-seg { margin-top: 2px; } /* ── Info-bulle « ? » : d'où vient le chiffre ────────────────────────────── Contenu issu de docs/dashboard-guide-graphiques.md via services/guide.py. Ouverture au survol ET au focus clavier ; aucun JS. */ .aide { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; flex: none; color: var(--text-faint); cursor: help; border-radius: 50%; transition: color 140ms ease; } .aide:hover, .aide:focus-visible { color: var(--accent); outline: none; } .aide:focus-visible { box-shadow: 0 0 0 2px var(--accent-ring); } .aide > svg { width: 100%; height: 100%; } .aide-bulle { position: absolute; top: calc(100% + 8px); right: -4px; z-index: 40; display: flex; flex-direction: column; gap: 6px; width: max-content; max-width: 22rem; padding: 11px 13px; background: var(--card); border: 1px solid var(--card-border); border-radius: 11px; box-shadow: 0 14px 38px rgba(2, 6, 16, 0.26); text-align: left; white-space: normal; opacity: 0; visibility: hidden; transform: translateY(-3px); transition: opacity 140ms ease, transform 140ms ease, visibility 140ms; } .aide:hover .aide-bulle, .aide:focus .aide-bulle, .aide:focus-within .aide-bulle { opacity: 1; visibility: visible; transform: translateY(0); } .aide-titre { font-size: 0.78rem; font-weight: 650; color: var(--text); letter-spacing: -0.01em; } .aide-quoi { font-size: 0.75rem; line-height: 1.45; color: var(--text-muted); } .aide-src { display: flex; flex-direction: column; gap: 3px; padding-top: 8px; border-top: 1px solid var(--card-border); } .aide-src-titre { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--accent); margin-bottom: 1px; } .aide-l { display: grid; grid-template-columns: 3.1rem 1fr; gap: 8px; font-size: 0.72rem; line-height: 1.4; color: var(--text); } .aide-l > b { font-weight: 600; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); padding-top: 1px; } /* Près du bord droit : la bulle bascule vers la gauche pour rester dans la page. */ .aide-bulle-gauche { right: auto; left: -4px; } /* ── Pastille de sensibilité aux filtres ─────────────────────────────────── Dit d'un coup d'œil si un visuel suit la barre de filtres du haut de page. Trois régimes, parce que ce n'est pas binaire : · filtré — exercice + segment + catégorie produit · exercice seul — une opportunité n'a ni projet ni ligne produit, donc ni pôle ni catégorie ; idem pour la carte de référence du mix · hors filtres — photo instantanée du pipeline, ou filtre de durée propre Le détail complet est dans l'attribut title (survol). */ .pastille { display: inline-flex; align-items: center; flex: none; padding: 1px 7px; border-radius: 999px; border: 1px solid transparent; font-size: 0.625rem; font-weight: 600; line-height: 1.6; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; cursor: help; } .pastille-filtre { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent-ring); } .pastille-exercice { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-soft); } .pastille-hors { background: transparent; color: var(--text-faint); border-color: var(--card-border); border-style: dashed; }