/* ================================================================ Themes — Cardif BBC v1.3 Classic (Cardif) = default — variables already in tokens.css. Apply class on : theme-dark, theme-light ================================================================ */ /* ================================================================ DARK — Apple Dark Mode Fond #1C1C1E, surface #2C2C2E, SF Pro, accent bleu iOS #0A84FF ================================================================ */ body.theme-dark { /* Font */ --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', system-ui, sans-serif; --mono: 'SF Mono', 'JetBrains Mono', monospace; /* Primary — bleu Apple */ --c-900: #001A33; --c-800: #003366; --c-750: #004D99; --c-700: #0A84FF; --c-600: #409CFF; --c-500: #0A84FF; --c-400: #409CFF; --c-300: #64B5F6; --c-200: #90CAF9; --c-100: rgba(10,132,255,.25); --c-50: rgba(10,132,255,.15); --c-border: rgba(10,132,255,.3); /* Pillar accents — Apple iOS palette */ --pillar-green: #30D158; --pillar-blue: #0A84FF; --pillar-violet: #BF5AF2; --pillar-orange: #FF9F0A; /* Neutrals — inversés pour dark */ --n-900: #F5F5F7; --n-800: #E5E5EA; --n-700: #AEAEB2; --n-600: #8E8E93; --n-500: #8E8E93; --n-400: #636366; --n-300: #48484A; --n-200: #38383A; --n-100: #2C2C2E; --n-50: #252527; --white: #1C1C1E; /* BBC Status — Apple iOS semantic colors */ --bbc-available: #32D74B; --bbc-temporary: #FF9F0A; --bbc-study: #FF453A; --bbc-todo: #8E8E93; /* BBC Type */ --bbc-internal: #0A84FF; --bbc-market: #BF5AF2; /* Semantic */ --danger: #FF453A; --info: #0A84FF; /* Surfaces */ --surface: #2C2C2E; --surface-light: #1C1C1E; --placeholder-color: #8E8E93; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 4px 12px rgba(0,0,0,.5); --shadow-lg: 0 8px 24px rgba(0,0,0,.5); /* Radius — Apple genereux */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; /* Edit mode — bleu Apple dark */ --edit-bg: rgba(10,132,255,.10); --edit-border: rgba(10,132,255,.38); --edit-accent: #0A84FF; } /* Dark topbar: backdrop blur, no gradient */ body.theme-dark .topbar { background: rgba(28,28,30,.8); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(255,255,255,.08); } body.theme-dark .topbar-brand { color: var(--n-900); /* #F5F5F7 — blanc vif, évite l'héritage de --white:#1C1C1E */ } body.theme-dark .topbar-brand em { color: rgba(255,255,255,.72); } /* Dark sidebar */ body.theme-dark .sidebar { background: #252527; border-right-color: #38383A; scrollbar-color: #48484A transparent; } body.theme-dark .sidebar-brand-name { color: #F5F5F7; } body.theme-dark .sidebar-mode.is-view { background: #2C2C2E; color: #8E8E93; } body.theme-dark .sidebar-mode.is-edit { background: rgba(10,132,255,.15); color: #0A84FF; } /* Dark nav items — pill style (no border-left, border-radius) */ body.theme-dark .sidebar-nav { padding: 10px 0; } body.theme-dark .nav-item { margin: 1px 8px; padding: 5px 12px; border-left: none; border-radius: 8px; } body.theme-dark .nav-item.is-active { border-left: none; background: rgba(10,132,255,.18); color: #0A84FF; } body.theme-dark .nav-item:hover { background: #3A3A3C; } body.theme-dark .nav-item-icon { color: #636366; } body.theme-dark .nav-item.is-active .nav-item-icon, body.theme-dark .nav-item:hover .nav-item-icon { color: #0A84FF; } body.theme-dark .nav-item-domain { margin: 1px 8px 1px 18px; padding-left: 14px; } body.theme-dark .nav-item-sub { color: #8E8E93; } body.theme-dark .nav-item-sub::before { background: #48484A; } body.theme-dark .nav-item-sub::after { background: #38383A; } body.theme-dark .nav-item-dbbc { color: #8E8E93; } body.theme-dark .nav-item-dbbc::before { background: #48484A; } body.theme-dark .nav-item-dbbc::after { background: #38383A; } /* Dark table header */ body.theme-dark thead th { background: transparent; border-bottom: 1px solid #38383A; } /* Dark page title */ body.theme-dark .view-title, body.theme-dark .page-title { font-weight: 600; letter-spacing: -.02em; } /* ── Dark: Map view overrides ── Fix black-on-black: cards need elevated surfaces, hardcoded #000 text needs light replacement. ──────────────────────────────────────────────── */ /* Domain cards — elevated surface */ body.theme-dark .cv-cell { background: #2C2C2E; box-shadow: 0 2px 8px rgba(0,0,0,.4); border-left-color: var(--cv-accent, #0A84FF); } body.theme-dark .cv-cell:hover { box-shadow: 0 4px 16px rgba(0,0,0,.5); } /* Spanning cards */ body.theme-dark .cv-span-card { background: #2C2C2E; box-shadow: 0 2px 8px rgba(0,0,0,.4); border-left-color: var(--cv-accent, #0A84FF); } /* Sub-domain mini-cards */ body.theme-dark .cv-sub-card { background: #3A3A3C; box-shadow: 0 1px 4px rgba(0,0,0,.3); border-left-color: var(--cv-accent, #0A84FF); } body.theme-dark .cv-sub-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.5); } /* DomainBBC cards — slightly elevated */ body.theme-dark .cv-dbbc-card { background: #3A3A3C; border-color: #48484A; border-left-color: var(--cv-accent, #0A84FF); } body.theme-dark .cv-dbbc-card:hover { border-color: var(--cv-accent, #0A84FF); box-shadow: 0 2px 8px rgba(0,0,0,.4); } body.theme-dark .cv-dbbc { background: #3A3A3C; border-color: #48484A; border-left-color: var(--cv-accent, #0A84FF); } /* Sub-domain DomainBBC separator */ body.theme-dark .cv-sub-dbbcs { border-top-color: #48484A; } /* Pillar body — stronger tint for visible contrast */ body.theme-dark .cv-pillar-body { background: rgba(255,255,255,.03); } /* Fix all hardcoded color: #000 → light text */ body.theme-dark .cv-cell-title, body.theme-dark .cv-cell-desc, body.theme-dark .cv-sub-title, body.theme-dark .cv-sub-desc, body.theme-dark .cv-sub-card-desc, body.theme-dark .cv-dbbc-card-name, body.theme-dark .cv-dbbc-card-desc, body.theme-dark .cv-dbbc-title, body.theme-dark .cv-dbbc-desc { color: #F5F5F7; } /* POV link */ body.theme-dark .cv-pov-link { background: rgba(10,132,255,.15); color: #0A84FF; } body.theme-dark .cv-pov-link:hover { background: rgba(10,132,255,.25); } body.theme-dark .cv-pov-dot { background: #2B60C4; } /* Map legend */ body.theme-dark .map-legend { background: #2C2C2E; color: #AEAEB2; } /* Map toggle buttons */ body.theme-dark .map-dbbc-toggle { border-color: #48484A; } body.theme-dark .map-dbbc-toggle-btn { background: #2C2C2E; color: #8E8E93; border-left-color: #48484A; } body.theme-dark .map-dbbc-toggle-btn.active { background: #0A84FF; color: #FFFFFF; } body.theme-dark .map-dbbc-toggle-btn:hover:not(.active) { background: #3A3A3C; color: #F5F5F7; } /* Dark lang toggle */ body.theme-dark .topbar-lang { border-color: rgba(255,255,255,.12); } body.theme-dark .topbar-lang-btn { color: rgba(255,255,255,.5); } body.theme-dark .topbar-lang-btn:not(:last-child) { border-right-color: rgba(255,255,255,.12); } body.theme-dark .topbar-lang-btn.is-active { background: rgba(255,255,255,.16); color: #F5F5F7; } /* ================================================================ LIGHT — Apple Light Mode Fond #F5F5F7, surface #FFFFFF, SF Pro, accent bleu iOS #007AFF ================================================================ */ body.theme-light { /* Font */ --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', system-ui, sans-serif; --mono: 'SF Mono', 'JetBrains Mono', monospace; /* Primary — bleu Apple */ --c-900: #001A40; --c-800: #003580; --c-750: #004DBF; --c-700: #007AFF; --c-600: #0051D5; --c-500: #007AFF; --c-400: #409CFF; --c-300: #B3D4FF; --c-200: #D6E9FF; --c-100: rgba(0,122,255,.18); --c-50: rgba(0,122,255,.1); --c-border: rgba(0,122,255,.2); /* Pillar accents — Apple Light palette */ --pillar-green: #34C759; --pillar-blue: #007AFF; --pillar-violet: #AF52DE; --pillar-orange: #FF9500; /* Neutrals */ --n-900: #1D1D1F; --n-800: #1D1D1F; --n-700: #3A3A3C; --n-600: #515154; --n-500: #86868B; --n-400: #AEAEB2; --n-300: #C7C7CC; --n-200: #D2D2D7; --n-100: #F0F0F2; --n-50: #F5F5F7; --white: #FFFFFF; /* BBC Status — Apple Light semantic colors */ --bbc-available: #34C759; --bbc-temporary: #FF9500; --bbc-study: #FF3B30; --bbc-todo: #8E8E93; /* BBC Type */ --bbc-internal: #007AFF; --bbc-market: #AF52DE; /* Semantic */ --danger: #FF3B30; --info: #007AFF; /* Surfaces */ --surface: #F5F5F7; --surface-light: #F5F5F7; --placeholder-color: #86868B; /* Shadows — subtiles */ --shadow-sm: 0 1px 3px rgba(0,0,0,.04); --shadow-md: 0 4px 20px rgba(0,0,0,.06); --shadow-lg: 0 8px 24px rgba(0,0,0,.08); /* Radius — Apple genereux */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; /* Edit mode — bleu Apple light */ --edit-bg: rgba(0,122,255,.06); --edit-border: rgba(0,122,255,.28); --edit-accent: #007AFF; } /* Light topbar: frosted glass, texte dark */ body.theme-light .topbar { background: rgba(245,245,247,.85); color: #1D1D1F; backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0,0,0,.06); } body.theme-light .topbar-brand { color: #1D1D1F; } body.theme-light .topbar-brand em { color: rgba(29,29,31,.6); } /* Light sidebar */ body.theme-light .sidebar { background: #FBFBFD; border-right-color: #E5E5EA; } body.theme-light .sidebar-brand-name { color: #1D1D1F; } body.theme-light .sidebar-mode.is-view { background: #F0F0F2; color: #86868B; } body.theme-light .sidebar-mode.is-edit { background: rgba(0,122,255,.1); color: #007AFF; } /* Light nav items — pill style (no border-left, border-radius) */ body.theme-light .sidebar-nav { padding: 10px 0; } body.theme-light .nav-item { margin: 1px 8px; padding: 5px 12px; border-left: none; border-radius: 8px; } body.theme-light .nav-item.is-active { border-left: none; background: rgba(0,122,255,.1); color: #007AFF; } body.theme-light .nav-item:hover { background: #F0F0F2; } body.theme-light .nav-item-domain { margin: 1px 8px 1px 18px; padding-left: 14px; } /* Light: cards sans bordure, shadow douce */ body.theme-light .card, body.theme-light .kpi-card { border: none; box-shadow: 0 4px 20px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.03); } body.theme-light .card:hover, body.theme-light .kpi-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04); transform: translateY(-2px); } /* Light: boutons et inputs arrondis (pill style) */ body.theme-light .btn { border-radius: 9999px; padding: 7px 16px; border-color: transparent; background: rgba(0,0,0,.05); } body.theme-light .btn:hover { background: rgba(0,0,0,.08); } body.theme-light .btn-primary { background: #007AFF; border-color: transparent; color: #fff; } body.theme-light .btn-primary:hover { background: #0051D5; } body.theme-light .input { border-radius: 9999px; padding: 8px 16px; background: rgba(0,0,0,.04); border-color: transparent; } body.theme-light .input:focus { background: #FFFFFF; border-color: #007AFF; } /* Light: table header */ body.theme-light thead th { background: transparent; border-bottom: 1px solid #D2D2D7; } /* Light: page title */ body.theme-light .view-title, body.theme-light .page-title { font-weight: 600; letter-spacing: -.02em; } /* ── Light: Map view overrides ── */ /* POV link — blue instead of green */ body.theme-light .cv-pov-link { background: rgba(0,122,255,.08); color: #007AFF; } body.theme-light .cv-pov-link:hover { background: rgba(0,122,255,.15); } /* Map toggle buttons */ body.theme-light .map-dbbc-toggle-btn.active { background: #007AFF; } /* Light: main inner padding */ body.theme-light .main-inner { padding: 36px 44px; } /* Light lang toggle — dark text */ body.theme-light .topbar-lang { border-color: rgba(0,0,0,.1); } body.theme-light .topbar-lang-btn { color: rgba(29,29,31,.5); } body.theme-light .topbar-lang-btn:not(:last-child) { border-right-color: rgba(0,0,0,.1); } body.theme-light .topbar-lang-btn:hover { color: rgba(29,29,31,.8); background: rgba(0,0,0,.04); } body.theme-light .topbar-lang-btn.is-active { background: rgba(0,0,0,.1); color: #1D1D1F; } /* Light: topbar actions button */ body.theme-light .topbar-actions .btn { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.1); color: #515154; border-radius: var(--radius-sm); } body.theme-light .topbar-actions .btn:hover { background: rgba(0,0,0,.08); color: #1D1D1F; } /* ================================================================ THEME PICKER — 3 pastilles dans la topbar ================================================================ */ .theme-picker { display: inline-flex; align-items: center; gap: 5px; padding: 2px 4px; border-radius: var(--radius-sm); background: rgba(255,255,255,.1); margin-right: 4px; } /* Light topbar: fond clair pour le picker */ body.theme-light .theme-picker { background: rgba(0,0,0,.05); } .theme-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: all 150ms ease; position: relative; } .theme-dot:hover { transform: scale(1.2); } .theme-dot.is-active { border-color: var(--white); box-shadow: 0 0 0 1px rgba(255,255,255,.3); } /* Light theme: adjust active dot border */ body.theme-light .theme-dot.is-active { border-color: #1D1D1F; box-shadow: 0 0 0 1px rgba(0,0,0,.15); } /* ================================================================ PICKER — Dark theme overrides ================================================================ */ body.theme-dark .so-picker { border-color: #3A3A3C; background: #2C2C2E; } body.theme-dark .so-picker-tags { background: #252527; border-bottom-color: #3A3A3C; } body.theme-dark .so-picker-tag { background: rgba(10,132,255,.18); border-color: rgba(10,132,255,.4); color: #64B5F6; } body.theme-dark .so-picker-search { background: #2C2C2E; color: #E5E5EA; border-bottom-color: #3A3A3C; } body.theme-dark .so-picker-search:focus { background: #3A3A3C; } body.theme-dark .so-picker-group { background: #1C1C1E; color: #8E8E93; border-top-color: rgba(255,255,255,.06); } body.theme-dark .so-picker-item-name { color: #E5E5EA; } body.theme-dark .so-picker-item-path { color: #636366; } body.theme-dark .so-picker-item:hover { background: #3A3A3C; } body.theme-dark .so-picker-view-tag { background: rgba(10,132,255,.15); border-color: rgba(10,132,255,.35); color: #64B5F6; } body.theme-dark .sec { background: #2C2C2E; border-color: #3A3A3C; } body.theme-dark .sec.is-editing { background: var(--edit-bg); border-color: var(--edit-border); } /* ================================================================ PICKER — Light theme overrides ================================================================ */ body.theme-light .so-picker { border-color: #D2D2D7; background: #FFFFFF; } body.theme-light .so-picker-tags { background: #F5F5F7; border-bottom-color: #D2D2D7; } body.theme-light .so-picker-tag { background: rgba(0,122,255,.08); border-color: rgba(0,122,255,.25); color: #007AFF; } body.theme-light .so-picker-search { background: #FFFFFF; border-bottom-color: #D2D2D7; } body.theme-light .so-picker-search:focus { background: rgba(0,122,255,.04); } body.theme-light .so-picker-group { background: #F5F5F7; color: #86868B; } body.theme-light .so-picker-item:hover { background: rgba(0,122,255,.06); } body.theme-light .so-picker-view-tag { background: rgba(0,122,255,.07); border-color: rgba(0,122,255,.2); color: #007AFF; } body.theme-light .sec { background: #FFFFFF; border-color: #D2D2D7; } body.theme-light .sec.is-editing { background: var(--edit-bg); border-color: var(--edit-border); } /* ================================================================ SEC edit-btn — dark/light ================================================================ */ body.theme-dark .sec-edit-btn { border-color: #48484A; color: #8E8E93; background: transparent; } body.theme-dark .sec-edit-btn:hover { background: rgba(10,132,255,.15); color: #0A84FF; border-color: rgba(10,132,255,.4); } body.theme-light .sec-edit-btn:hover { background: rgba(0,122,255,.08); color: #007AFF; border-color: rgba(0,122,255,.3); } /* Couleurs des pastilles */ .theme-dot[data-theme="classic"] { background: linear-gradient(135deg, #00915A, #2BAD6A); } .theme-dot[data-theme="dark"] { background: linear-gradient(135deg, #1C1C1E, #0A84FF); } .theme-dot[data-theme="light"] { background: linear-gradient(135deg, #F5F5F7, #007AFF); } /* Tooltip au hover */ .theme-dot::after { content: attr(data-label); position: absolute; top: 26px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: .58rem; padding: 2px 8px; border-radius: 3px; background: rgba(0,0,0,.85); color: #fff; pointer-events: none; opacity: 0; transition: opacity 150ms; z-index: 999; } .theme-dot:hover::after { opacity: 1; }