/* ===================================================================== EasyTaxe — Thème sombre --------------------------------------------------------------------- Ce fichier n'AJOUTE que des surcharges scopées sous [data-theme="dark"]. Le thème clair par défaut n'est jamais modifié : si l'attribut n'est pas présent sur , aucune de ces règles ne s'applique. Palette sombre (mêmes teintes bleutées que le clair, inversées) : --dk-bg fond de page #0f1420 --dk-surface cartes / panneaux #161c2b --dk-surface-2 fonds subtils / th #1b2233 --dk-hover survol de ligne #1f2740 --dk-border bordures #2a3346 --dk-border-2 séparateurs légers #232c40 --dk-text titres / valeurs #e8edf7 --dk-text-2 texte courant #c5cddd --dk-text-3 texte secondaire #9aa4bb --dk-muted texte discret #8b96ad ===================================================================== */ [data-theme="dark"] { --dk-bg: #0f1420; --dk-surface: #161c2b; --dk-surface-2: #1b2233; --dk-hover: #1f2740; --dk-border: #2a3346; --dk-border-2: #232c40; --dk-text: #e8edf7; --dk-text-2: #c5cddd; --dk-text-3: #9aa4bb; --dk-muted: #8b96ad; } /* ---- Base ---- */ [data-theme="dark"] body { background: var(--dk-bg); color: var(--dk-text-2); } [data-theme="dark"] .btn:focus-visible, [data-theme="dark"] .btn-link.nav-link:focus-visible, [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-check-input:focus { box-shadow: 0 0 0 0.1rem var(--dk-bg), 0 0 0 0.22rem #258cfb; } /* ---- Navigation horizontale (le bandeau marque reste bleu = identité) ---- */ [data-theme="dark"] .app-nav { background: var(--dk-surface); border-bottom-color: var(--dk-border); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .app-nav .nav-tab { color: var(--dk-text-3); } [data-theme="dark"] .app-nav .nav-tab:hover, [data-theme="dark"] .app-nav .nav-tab.active { color: #fff; } [data-theme="dark"] .app-nav .nav-sep { background: var(--dk-border); } /* ---- En-têtes de page ---- */ [data-theme="dark"] .page-header .title, [data-theme="dark"] .dashboard-header .title { color: var(--dk-text); } [data-theme="dark"] .page-header .subtitle, [data-theme="dark"] .dashboard-header .subtitle { color: var(--dk-muted); } /* ---- Barre d'outils / recherche ---- */ [data-theme="dark"] .search-box { background: var(--dk-surface); border-color: var(--dk-border); } [data-theme="dark"] .search-box input { color: var(--dk-text); } [data-theme="dark"] .search-box input::placeholder { color: var(--dk-muted); } [data-theme="dark"] .search-box svg { color: var(--dk-muted); } [data-theme="dark"] .preset-group { background: var(--dk-surface-2); border-color: var(--dk-border); } [data-theme="dark"] .preset-group .preset-btn { color: var(--dk-text-3); } [data-theme="dark"] .preset-group .preset-btn.active { background: var(--dk-hover); color: var(--dk-text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } /* ---- Cartes / panneaux ---- */ [data-theme="dark"] .erp-card, [data-theme="dark"] .kpi-card, [data-theme="dark"] .dash-panel, [data-theme="dark"] .sources-card { background: var(--dk-surface); border-color: var(--dk-border); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); } /* ---- Tables (ERP + tableau de bord) ---- */ [data-theme="dark"] .erp-table th, [data-theme="dark"] .dash-table th { color: var(--dk-muted); background: var(--dk-surface-2); border-bottom-color: var(--dk-border); } [data-theme="dark"] .erp-table td, [data-theme="dark"] .dash-table td { color: var(--dk-text-2); border-bottom-color: var(--dk-border-2); } [data-theme="dark"] .erp-table:not(.erp-table-plain) tr:hover td { background: var(--dk-hover); } [data-theme="dark"] .erp-table td.num, [data-theme="dark"] .erp-table td.montant, [data-theme="dark"] .dash-table td.num, [data-theme="dark"] .dash-table td.text-end { color: var(--dk-text); } /* ---- Tableau de bord : KPI / panneaux / sources ---- */ [data-theme="dark"] .kpi-label { color: var(--dk-muted); } [data-theme="dark"] .kpi-value { color: var(--dk-text); } [data-theme="dark"] .kpi-sub { color: var(--dk-text-3); } /* Tuiles KPI horizontales : le liseré et l'icône gardent leur couleur d'accent (elles portent l'information), seuls les fonds et textes passent en sombre. */ [data-theme="dark"] .kpi-card:hover { border-color: #3a4560; } [data-theme="dark"] .kpi-amount { color: var(--dk-text-2); } [data-theme="dark"] .kpi-unit { color: var(--dk-muted); } [data-theme="dark"] .dash-panel-head { border-bottom-color: var(--dk-border-2); } [data-theme="dark"] .dash-panel-foot { background: var(--dk-surface-2); border-top-color: var(--dk-border-2); color: #7fb0f0; } [data-theme="dark"] .dash-panel-foot:hover { background: var(--dk-hover); color: #a9cbf7; } [data-theme="dark"] .dash-panel-title { color: var(--dk-text); } /* Libellé en capitales : un gris suffit, le blanc serait trop appuyé. */ [data-theme="dark"] .sources-title { color: var(--dk-text-3); } [data-theme="dark"] .source-row { border-bottom-color: var(--dk-border-2); } [data-theme="dark"] .source-name { color: var(--dk-text-2); } /* ---- Pagination ---- */ [data-theme="dark"] .pager { color: var(--dk-muted); border-top-color: var(--dk-border-2); } [data-theme="dark"] .pager .btn-page { background: var(--dk-surface); border-color: var(--dk-border); color: var(--dk-text-2); } [data-theme="dark"] .pager .btn-page:disabled, [data-theme="dark"] .pager .btn-page.disabled { color: #4a5670; } /* ---- Boutons ---- */ [data-theme="dark"] .btn-soft, [data-theme="dark"] .btn-outline-secondary, [data-theme="dark"] .pager .btn-page { background: var(--dk-surface-2); border-color: var(--dk-border); color: var(--dk-text-2); box-shadow: none; } [data-theme="dark"] .btn-soft:hover, [data-theme="dark"] .btn-outline-secondary:hover, [data-theme="dark"] .pager .btn-page:hover { background: var(--dk-hover); border-color: #3a4560; color: var(--dk-text); } /* L'action principale garde son dégradé bleu : c'est le repère de l'écran. */ [data-theme="dark"] .btn-incorporer, [data-theme="dark"] .btn-primary { box-shadow: 0 5px 16px rgba(0, 0, 0, 0.45); } [data-theme="dark"] .btn-outline-success { background: rgba(31, 157, 85, 0.12); border-color: rgba(31, 157, 85, 0.4); color: #45cf82; } [data-theme="dark"] .btn-outline-success:hover:not(:disabled) { background: #1f9d55; border-color: #1f9d55; color: #fff; } [data-theme="dark"] .btn-incorporer:focus-visible, [data-theme="dark"] .btn-soft:focus-visible, [data-theme="dark"] .btn:focus-visible { box-shadow: 0 0 0 3px rgba(106, 163, 240, 0.45); } [data-theme="dark"] .empty-row { color: var(--dk-muted); } /* ---- Badges de statut : fonds translucides + texte plus vif ---- */ [data-theme="dark"] .badge-warning { background: rgba(196, 125, 22, 0.18); color: #e6ad46; } [data-theme="dark"] .badge-success { background: rgba(31, 157, 85, 0.18); color: #45cf82; } [data-theme="dark"] .badge-danger { background: rgba(192, 57, 43, 0.18); color: #ec7064; } [data-theme="dark"] .badge-info { background: rgba(58, 99, 196, 0.20); color: #83a0ee; } /* ---- Boutons d'action de ligne ---- */ [data-theme="dark"] .btn-action-ok { background: rgba(31, 157, 85, 0.14); border-color: rgba(31, 157, 85, 0.35); color: #45cf82; } [data-theme="dark"] .btn-action-ok:hover { background: rgba(31, 157, 85, 0.24); } [data-theme="dark"] .btn-action-danger { background: rgba(213, 69, 63, 0.14); border-color: rgba(213, 69, 63, 0.35); color: #ec7064; } [data-theme="dark"] .btn-action-danger:hover { background: rgba(213, 69, 63, 0.24); } /* ---- Pied de page ---- */ [data-theme="dark"] .site-footer { background: #121826; border-top-color: var(--dk-border-2); color: var(--dk-muted); } [data-theme="dark"] .site-footer a { color: #7d9ceb; } /* ---- Notifications temps réel (surcharge du