/** * CMBE Vote Center — themes clair / sombre (global) * Activer via: */ /* ─── Clair (defaut) ─── */ :root, [data-theme="light"] { color-scheme: light; /* Bootstrap — coherence globale mode clair */ --bs-body-bg: #f5f7fb; --bs-body-color: #0c1222; --bs-emphasis-color: #0a1628; --bs-secondary-color: #475569; --bs-tertiary-color: #64748b; --bs-heading-color: #0a1628; --bs-link-color: #0b6844; --bs-link-hover-color: #064e32; --bs-border-color: #dce3ed; --bs-primary: #0b6844; --bs-primary-rgb: 11, 104, 68; --bs-success: #0b6844; --bs-dark: #0a1628; --bs-dark-rgb: 10, 22, 40; --bs-light: #f0f4f9; --bs-light-rgb: 240, 244, 249; --app-bg: #f5f7fb; --app-surface: #ffffff; --app-surface-muted: #f0f4f9; --app-surface-elevated: #ffffff; --app-surface-glass: rgba(255, 255, 255, .92); --app-border: #dce3ed; --app-border-strong: #b8c5d6; --app-text: #0c1222; --app-text-secondary: #334155; --app-muted: #64748b; --app-primary: #0b6844; --app-primary-deep: #064e32; --app-primary-glow: #16a34a; --app-primary-glow-soft: rgba(11, 104, 68, .12); --app-accent: #1e40af; --app-navy: #0a1628; --app-glow-1: rgba(11, 104, 68, .05); --app-glow-2: rgba(30, 64, 175, .04); --app-switch-track: #e2e8f0; --app-switch-border: #cbd5e1; --app-radius-sm: .375rem; --app-radius-md: .625rem; --app-radius-lg: .875rem; --app-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 1px rgba(15, 23, 42, .03); --app-shadow: 0 4px 16px rgba(15, 23, 42, .07), 0 2px 6px rgba(15, 23, 42, .04); --app-shadow-lg: 0 12px 32px rgba(15, 23, 42, .09), 0 4px 12px rgba(15, 23, 42, .05); --app-sidebar: linear-gradient(175deg, #0a1628 0%, #0f1f38 42%, #132a47 100%); --app-input-bg: #ffffff; --app-table-head: #e9eff6; --app-table-stripe: #f8fafc; --app-table-hover: #f1f5f9; --app-success-soft: #ecfdf5; --app-danger-soft: #fef2f2; --app-warning-soft: #fffbeb; --app-info-soft: #eff6ff; --dash-bg: #f5f7fb; --dash-surface: #ffffff; --dash-surface-muted: #f0f4f9; --dash-border: #dce3ed; --dash-border-strong: #b8c5d6; --dash-text: #0c1222; --dash-muted: #64748b; --dash-green-soft: #ecfdf5; --dash-red-soft: #fef2f2; --dash-blue-soft: #eff6ff; --dash-shadow-sm: var(--app-shadow-sm); --dash-shadow-md: var(--app-shadow); --dash-shadow-lg: var(--app-shadow-lg); --pro-radius: var(--app-radius-md); --pro-radius-sm: var(--app-radius-sm); } /* ─── Sombre ─── */ [data-theme="dark"] { color-scheme: dark; /* Variables Bootstrap — evite texte/boutons noirs illisibles */ --bs-body-color: #edf2f9; --bs-body-bg: #0e141f; --bs-emphasis-color: #f8fafc; --bs-secondary-color: rgba(237, 242, 249, .72); --bs-tertiary-color: rgba(237, 242, 249, .52); --bs-heading-color: #f4f7fc; --bs-link-color: #6ee7a0; --bs-link-hover-color: #86efac; --bs-border-color: rgba(255, 255, 255, .14); --bs-dark: #243047; --bs-dark-rgb: 36, 48, 71; --bs-light: #1a2740; --bs-light-rgb: 26, 39, 64; --app-bg: #0e141f; --app-surface: #1a2438; --app-surface-muted: #141e30; --app-surface-elevated: #22304a; --app-surface-glass: rgba(26, 36, 56, .94); --app-border: rgba(255, 255, 255, .14); --app-border-strong: rgba(255, 255, 255, .22); --app-text: #edf2f9; --app-text-secondary: #c5d0e0; --app-muted: rgba(237, 242, 249, .62); --app-primary: #2dd47a; --app-primary-deep: #16a34a; --app-primary-glow: #4ade80; --app-primary-glow-soft: rgba(45, 212, 122, .18); --app-accent: #60a5fa; --app-navy: #0a1628; --app-glow-1: rgba(45, 212, 122, .08); --app-glow-2: rgba(96, 165, 250, .06); --app-switch-track: #1e293b; --app-switch-border: rgba(255, 255, 255, .12); --app-shadow-sm: 0 1px 3px rgba(0, 0, 0, .25); --app-shadow: 0 12px 36px rgba(0, 0, 0, .4); --app-shadow-lg: 0 24px 56px rgba(0, 0, 0, .45); --app-sidebar: linear-gradient(175deg, #060a10 0%, #0c1525 45%, #101e34 100%); --app-input-bg: #1a2740; --app-table-head: #1e293b; --app-table-stripe: rgba(255, 255, 255, .03); --app-table-hover: rgba(255, 255, 255, .06); --app-success-soft: rgba(34, 197, 94, .15); --app-danger-soft: rgba(239, 68, 68, .14); --app-warning-soft: rgba(245, 158, 11, .12); --app-info-soft: rgba(37, 99, 235, .15); --dash-bg: #0e141f; --dash-surface: #1a2438; --dash-surface-muted: #141e30; --dash-border: rgba(255, 255, 255, .14); --dash-border-strong: rgba(255, 255, 255, .22); --dash-text: #edf2f9; --dash-muted: rgba(237, 242, 249, .62); --dash-green-soft: rgba(34, 197, 94, .18); --dash-red-soft: rgba(239, 68, 68, .16); --dash-blue-soft: rgba(37, 99, 235, .18); --dash-shadow-sm: 0 1px 2px rgba(0, 0, 0, .2); --dash-shadow-md: 0 12px 32px rgba(0, 0, 0, .28); --dash-shadow-lg: 0 16px 40px rgba(0, 0, 0, .35); } body { background: var(--app-bg) !important; color: var(--app-text) !important; } /* ─── Bootstrap & composants — mode clair ─── */ [data-theme="light"] .card, [data-theme="light"] .modal-content, [data-theme="light"] .dropdown-menu { background-color: var(--app-surface) !important; color: var(--app-text) !important; border-color: var(--app-border) !important; } [data-theme="light"] .card-header, [data-theme="light"] .card-footer, [data-theme="light"] .modal-header, [data-theme="light"] .modal-footer { background-color: var(--app-surface-muted) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; } [data-theme="light"] .table { --bs-table-bg: transparent; --bs-table-color: var(--app-text); --bs-table-border-color: var(--app-border); --bs-table-striped-bg: var(--app-table-stripe); --bs-table-hover-bg: var(--app-table-hover); color: var(--app-text); } [data-theme="light"] .table thead th { background-color: var(--app-table-head) !important; color: var(--app-text-secondary) !important; border-color: var(--app-border) !important; } [data-theme="light"] .table td, [data-theme="light"] .table th { border-color: var(--app-border) !important; } [data-theme="light"] .form-control, [data-theme="light"] .form-select, [data-theme="light"] .input-group-text { background-color: var(--app-input-bg) !important; color: var(--app-text) !important; border-color: var(--app-border) !important; } [data-theme="light"] .form-control:focus, [data-theme="light"] .form-select:focus { border-color: var(--app-primary) !important; box-shadow: 0 0 0 3px var(--app-primary-glow-soft) !important; } [data-theme="light"] .text-muted, [data-theme="light"] .form-text { color: var(--app-muted) !important; } [data-theme="light"] .bg-light { background-color: var(--app-surface-muted) !important; } [data-theme="light"] .bg-white { background-color: var(--app-surface) !important; } [data-theme="light"] .text-bg-light { background-color: var(--app-surface-muted) !important; color: var(--app-text-secondary) !important; border: 1px solid var(--app-border); } [data-theme="light"] .border, [data-theme="light"] .border-top, [data-theme="light"] .border-bottom { border-color: var(--app-border) !important; } [data-theme="light"] .btn-outline-secondary { color: var(--app-text-secondary) !important; border-color: var(--app-border-strong) !important; background: var(--app-surface) !important; } [data-theme="light"] .btn-outline-secondary:hover { background: var(--app-surface-muted) !important; color: var(--app-text) !important; } /* ─── Bootstrap & composants — mode sombre ─── */ [data-theme="dark"] .card, [data-theme="dark"] .modal-content, [data-theme="dark"] .dropdown-menu, [data-theme="dark"] .list-group-item { background-color: var(--app-surface) !important; color: var(--app-text) !important; border-color: var(--app-border) !important; } [data-theme="dark"] .card-header, [data-theme="dark"] .card-footer, [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { background-color: var(--app-surface-muted) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; } [data-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--app-text); --bs-table-border-color: var(--app-border); --bs-table-striped-bg: var(--app-table-stripe); --bs-table-hover-bg: var(--app-table-hover); color: var(--app-text); } [data-theme="dark"] .table thead th { background-color: var(--app-table-head) !important; color: var(--app-text-secondary) !important; border-color: var(--app-border) !important; } [data-theme="dark"] .table td, [data-theme="dark"] .table th { border-color: var(--app-border) !important; } [data-theme="dark"] .form-control, [data-theme="dark"] .form-select, [data-theme="dark"] .input-group-text { background-color: var(--app-input-bg) !important; color: var(--app-text) !important; border-color: var(--app-border) !important; } [data-theme="dark"] .form-control::placeholder { color: var(--app-muted) !important; } [data-theme="dark"] .text-muted, [data-theme="dark"] .form-text { color: var(--app-muted) !important; } [data-theme="dark"] .bg-light, [data-theme="dark"] .bg-white { background-color: var(--app-surface-muted) !important; } [data-theme="dark"] .text-bg-light { background-color: rgba(255, 255, 255, .12) !important; color: var(--app-text) !important; } [data-theme="dark"] .border, [data-theme="dark"] .border-top, [data-theme="dark"] .border-bottom { border-color: var(--app-border) !important; } [data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } [data-theme="dark"] .alert-success { background: var(--app-success-soft); color: #86efac; border-color: rgba(74, 222, 128, .3); } [data-theme="dark"] .alert-danger { background: var(--app-danger-soft); color: #fca5a5; border-color: rgba(248, 113, 113, .3); } [data-theme="dark"] .alert-warning { background: var(--app-warning-soft); color: #fcd34d; border-color: rgba(251, 191, 36, .3); } [data-theme="dark"] .alert-info { background: var(--app-info-soft); color: #93c5fd; border-color: rgba(96, 165, 250, .3); } /* Layout app */ .app-topbar { background: var(--app-surface) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; } .app-topbar h4 { color: var(--app-text) !important; } .topbar-search { background: var(--app-surface-muted) !important; border-color: var(--app-border) !important; } .topbar-search input { color: var(--app-text) !important; } .topbar-search input::placeholder { color: var(--app-muted) !important; } .user-pill { background: var(--app-surface-muted) !important; border-color: var(--app-border) !important; color: var(--app-text-secondary) !important; } /* Bascule theme */ .theme-toggle-wrap { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid rgba(255, 255, 255, .1); } .sidebar-theme-bar { margin-top: auto; padding-top: .75rem; } .theme-toggle-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: .4rem; width: 100%; min-height: 2.35rem; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .12); color: #fff !important; border-radius: .5rem; padding: .5rem .75rem; font-size: .8rem; font-weight: 700; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .12s ease; line-height: 1.2; } .theme-toggle-btn:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .4); color: #fff !important; } .theme-toggle-btn .theme-icon-light, .theme-toggle-btn .theme-icon-dark { display: inline-flex; align-items: center; gap: .35rem; } .theme-toggle-btn .theme-icon-dark { display: none !important; } [data-theme="dark"] .theme-toggle-btn .theme-icon-light { display: none !important; } [data-theme="dark"] .theme-toggle-btn .theme-icon-dark { display: inline-flex !important; } .app-topbar .theme-toggle-btn { width: auto; min-width: 2.5rem; border: 2px solid var(--app-border-strong) !important; background: var(--app-surface) !important; color: var(--app-text) !important; box-shadow: var(--app-shadow); } .app-topbar .theme-toggle-btn:hover { background: var(--app-surface-muted) !important; border-color: var(--app-primary) !important; color: var(--app-primary) !important; } .dashboard-topbar .theme-toggle-btn { width: auto; flex-shrink: 0; border: 1px solid rgba(255, 255, 255, .35) !important; background: rgba(255, 255, 255, .14) !important; color: #fff !important; } .dashboard-topbar .theme-toggle-btn:hover { background: rgba(255, 255, 255, .24) !important; border-color: #fff !important; } .dashboard-tv-toolbar .theme-toggle-btn { width: auto; border-color: rgba(255, 255, 255, .3) !important; background: rgba(255, 255, 255, .1) !important; color: #fff !important; } /* Bouton flottant — toujours visible */ .cmbe-theme-fab { position: fixed; bottom: 1.15rem; right: 1.15rem; z-index: 5000; display: inline-flex !important; align-items: center; justify-content: center; gap: .45rem; min-height: 2.75rem; padding: .55rem 1rem; border: 2px solid var(--app-border-strong); border-radius: 999px; background: var(--app-surface) !important; color: var(--app-text) !important; font-size: .82rem; font-weight: 700; cursor: pointer; box-shadow: 0 8px 28px rgba(15, 23, 42, .22); transition: transform .15s ease, box-shadow .15s ease, background .15s ease; } .cmbe-theme-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(15, 23, 42, .28); background: var(--app-surface-elevated) !important; color: var(--app-primary) !important; border-color: var(--app-primary); } .cmbe-theme-fab i { font-size: 1.1rem; } [data-theme="dark"] .cmbe-theme-fab { box-shadow: 0 8px 28px rgba(0, 0, 0, .45); } body.dashboard-fullscreen .cmbe-theme-fab, body.nb-board-fullscreen .cmbe-theme-fab { bottom: 4.5rem; } @media (max-width: 575.98px) { .cmbe-theme-fab .fab-label { display: none; } .cmbe-theme-fab { padding: .55rem .75rem; min-width: 2.75rem; } } /* Dashboard page tokens */ .dashboard-page { --pro-bg: var(--dash-bg); --pro-surface: var(--dash-surface); --pro-surface-muted: var(--dash-surface-muted); --pro-border: var(--dash-border); --pro-border-strong: var(--dash-border-strong); --pro-text: var(--dash-text); --pro-muted: var(--dash-muted); --pro-green-soft: var(--dash-green-soft); --pro-red-soft: var(--dash-red-soft); --pro-blue-soft: var(--dash-blue-soft); --pro-warning-soft: var(--app-warning-soft); --pro-shadow-sm: var(--dash-shadow-sm); --pro-shadow-md: var(--dash-shadow-md); --pro-shadow-lg: var(--dash-shadow-lg); --pro-green: #0d6e3a; --pro-red: #b91c1c; --pro-blue: #1d4ed8; --pro-amber: #b45309; } [data-theme="dark"] .dashboard-page { --pro-green: #22c55e; --pro-red: #f87171; --pro-blue: #60a5fa; } /* Analyse par quartier — suit le theme */ .nb-board { background: var(--pro-surface) !important; color: var(--pro-text) !important; border-color: var(--pro-border) !important; } .nb-kpi-strip { background: var(--pro-surface-muted) !important; border-color: var(--pro-border) !important; } .nb-kpi { background: var(--pro-surface) !important; border-color: var(--pro-border) !important; } .nb-kpi .label, .nb-party-cell .code, .nb-neighborhood-meta { color: var(--pro-muted) !important; } .nb-kpi .value, .nb-neighborhood, .nb-leader-badge, .nb-vote-strong { color: var(--pro-text) !important; } .nb-table thead th { background: var(--app-table-head) !important; color: var(--pro-muted) !important; border-color: var(--pro-border) !important; } .nb-table tbody td { background: var(--pro-surface) !important; color: var(--pro-text) !important; border-color: var(--pro-border) !important; } .nb-table tbody tr.nb-main-row:hover td { background: var(--app-table-hover) !important; } [data-theme="light"] .nb-main-row.nb-row-won td:first-child { background: linear-gradient(90deg, var(--pro-green-soft) 0%, var(--pro-surface) 30%) !important; } [data-theme="light"] .nb-main-row.nb-row-lost td:first-child { background: linear-gradient(90deg, var(--pro-red-soft) 0%, var(--pro-surface) 30%) !important; } [data-theme="dark"] .nb-main-row.nb-row-won td:first-child { background: linear-gradient(90deg, rgba(13, 110, 58, .32) 0%, var(--pro-surface) 30%) !important; box-shadow: inset 4px 0 0 #22c55e; } [data-theme="dark"] .nb-main-row.nb-row-lost td:first-child { background: linear-gradient(90deg, rgba(185, 28, 28, .25) 0%, var(--pro-surface) 30%) !important; box-shadow: inset 4px 0 0 #ef4444; } .nb-detail-panel { background: var(--pro-surface-muted) !important; border-color: var(--pro-border) !important; } .nb-detail-block { background: var(--pro-surface) !important; border-color: var(--pro-border) !important; } .nb-detail-block .title, .nb-detail-line .score { color: var(--pro-muted) !important; } .nb-detail-line .name { color: var(--pro-text) !important; } .nb-detail-line { border-color: var(--pro-border) !important; } .nb-board-footer { background: var(--pro-surface-muted) !important; color: var(--pro-muted) !important; border-color: var(--pro-border) !important; } .nb-toggle-btn { background: var(--app-surface-elevated) !important; border-color: var(--pro-border) !important; color: var(--pro-muted) !important; } .nb-party-stack, .nb-share-track { background: var(--app-border) !important; } .nb-board .text-muted { color: var(--pro-muted) !important; } [data-theme="dark"] .nb-outcome.is-won { background: rgba(34, 197, 94, .18); color: #4ade80; border-color: rgba(74, 222, 128, .35); } [data-theme="dark"] .nb-outcome.is-lost { background: rgba(239, 68, 68, .16); color: #f87171; border-color: rgba(248, 113, 113, .35); } [data-theme="light"] .nb-outcome.is-won { background: var(--pro-green-soft); color: var(--app-primary); border-color: #bbf7d0; } [data-theme="light"] .nb-outcome.is-lost { background: var(--pro-red-soft); color: #b91c1c; border-color: #fecaca; } /* Mode TV — layout seulement (couleurs = theme actif) */ body.dashboard-fullscreen { background: var(--app-bg) !important; } body.dashboard-fullscreen #dashboardPage { background: var(--app-bg) !important; color: var(--app-text) !important; } body.dashboard-fullscreen .details-board, body.dashboard-fullscreen .details-board .board-body { background: var(--app-bg) !important; } body.dashboard-fullscreen .situation-board.is-fullscreen { background: var(--dash-bg) !important; } /* Guest / login */ body.guest-layout { background: var(--app-bg) !important; color: var(--app-text); min-height: 100vh; } [data-theme="dark"] body.guest-layout { background: var(--app-bg) !important; } [data-theme="dark"] body.guest-layout .card { background: var(--app-surface) !important; } [data-theme="dark"] body.guest-layout h3 { color: var(--app-text) !important; } /* Dashboard — badges & puces */ .dashboard-page .share-chip { background: var(--pro-blue-soft); color: var(--pro-blue); border: 1px solid transparent; } [data-theme="dark"] .dashboard-page .share-chip { background: rgba(37, 99, 235, .28); color: #93c5fd; } [data-theme="dark"] .dashboard-page .trend-badge.neutral { background: rgba(255, 255, 255, .1); color: var(--app-text-secondary); } .dashboard-page .trend-badge.neutral { background: var(--pro-surface-muted); color: var(--pro-muted); } .tv-exit-hint, .nb-fs-exit-hint { background: var(--app-surface-elevated) !important; color: var(--app-text-secondary) !important; border: 1px solid var(--app-border) !important; } /* Cartes dashboard en mode sombre */ [data-theme="dark"] .dashboard-page .kpi-card, [data-theme="dark"] .dashboard-page .kpi-card-ultra, [data-theme="dark"] .dashboard-page .section-card, [data-theme="dark"] .dashboard-page .leader-spotlight, [data-theme="dark"] .dashboard-page .podium-item, [data-theme="dark"] .dashboard-page .stat-mini-box, [data-theme="dark"] .dashboard-page .party-metric-card, [data-theme="dark"] .dashboard-page .gauge-box, [data-theme="dark"] .dashboard-page .perf-ultra-card:not(.is-hero) { background: var(--pro-surface) !important; border-color: var(--pro-border) !important; color: var(--pro-text) !important; } [data-theme="dark"] .dashboard-page .section-card .card-header { background: var(--pro-surface-muted) !important; color: var(--pro-text) !important; border-color: var(--pro-border) !important; } [data-theme="dark"] .dashboard-page .party-detail-item.is-udg, [data-theme="dark"] .dashboard-page .table-tight tbody tr.is-udg { background: var(--pro-blue-soft) !important; } [data-theme="dark"] .dashboard-page .table-tight tbody tr.is-udg td { color: #93c5fd !important; } /* Pages internes (resultats, BV, controle) */ [data-theme="dark"] .results-table-wrap, [data-theme="dark"] .stations-table-wrap, [data-theme="dark"] .data-control-panel { background: var(--app-surface) !important; border-color: var(--app-border) !important; } [data-theme="dark"] .result-table thead th, [data-theme="dark"] .stations-table thead th { background: var(--app-table-head) !important; color: var(--app-text-secondary) !important; } [data-theme="dark"] .result-table .is-center, [data-theme="dark"] .result-table .is-neighborhood, [data-theme="dark"] .result-table td, [data-theme="dark"] .result-table th { color: var(--app-text) !important; border-color: var(--app-border) !important; } [data-theme="dark"] .app-content h1, [data-theme="dark"] .app-content h2, [data-theme="dark"] .app-content h3, [data-theme="dark"] .app-content h4, [data-theme="dark"] .app-content h5, [data-theme="dark"] .app-content h6 { color: var(--app-text) !important; } /* Dashboard — elements encore en couleurs fixes */ [data-theme="dark"] .dashboard-page .stat-mini-box, [data-theme="dark"] .dashboard-page .quick-counter-box { background: var(--pro-surface) !important; border-color: var(--pro-border) !important; color: var(--pro-text) !important; } [data-theme="dark"] .dashboard-page .table-tight tbody tr:nth-child(even) { background: var(--app-table-stripe) !important; } [data-theme="dark"] .dashboard-page .table-tight tbody tr:hover { background: var(--app-table-hover) !important; } [data-theme="dark"] .dashboard-page .table-tight thead th { background: var(--app-table-head) !important; color: var(--app-text-secondary) !important; border-color: var(--pro-border) !important; } [data-theme="dark"] .dashboard-page .table-tight tbody td { color: var(--pro-text) !important; border-color: var(--pro-border) !important; } [data-theme="dark"] .dashboard-page .progress-wrap { background: var(--app-border) !important; } [data-theme="dark"] .dashboard-page .party-detail-item.is-udg, [data-theme="dark"] .dashboard-page .dashboard-seat-card.is-udg, [data-theme="dark"] .dashboard-page .left-stack-card { background: var(--pro-surface) !important; border-color: var(--pro-border) !important; color: var(--pro-text) !important; } [data-theme="light"] .results-table-wrap { background: var(--app-surface) !important; } .results-table-wrap { background: var(--app-surface) !important; border-color: var(--app-border) !important; } .result-table thead th { background: var(--app-table-head) !important; color: var(--app-text-secondary) !important; } .result-table .is-center, .result-table .is-neighborhood { color: var(--app-text) !important; }