/* =====================================================================
   THEME.CSS — Système de thème Fincorp ONE (source unique, règle §2)
   Charge en DERNIER (après style.css et mobile.css) : ses règles gagnent.
   - Thème CLAIR (défaut)  : liquid glass + aurora douce
   - Thème SOMBRE          : html[data-theme="dark"] — liquid glass sombre
   - Sidebar repliable     : body.sb-collapsed (desktop uniquement)
   - Bascule clair/sombre  : .theme-toggle (sidebar + menu "Plus" mobile)
   Persistance : localStorage 'fincorp_theme' / 'fincorp_sb_collapsed' (app.js)
   ===================================================================== */

/* =====================================================================
   1. TOKENS
   ===================================================================== */
:root {
  /* Accent violet (nav, bascule) — validé maquettes 2026-07-13 */
  --th-accent:        #7C3AED;
  --th-accent-soft:   rgba(124, 58, 237, .10);
  --th-accent-border: rgba(124, 58, 237, .20);

  /* Verre clair */
  --th-glass-card:    rgba(255, 255, 255, .62);
  --th-glass-strong:  rgba(255, 255, 255, .78);
  --th-glass-border:  rgba(255, 255, 255, .72);
  --th-glass-blur:    16px;

  /* Textes sidebar claire */
  --th-sb-text:       #4A4763;
  --th-sb-muted:      #8B88A3;
}

/* Fond de base clair (remplace #F1F5F9) */
:root {
  --bg: #EEF0F8;
}

html[data-theme="dark"] {
  color-scheme: dark;

  /* Retokenisation globale : les composants en var() basculent seuls */
  --bg:          #0A0A12;
  --white:       #16161F;          /* surfaces (cartes, topbar, modales, inputs) */
  --text:        #EDEDF5;
  --text-muted:  #9A9AB0;
  --text-light:  #6F6F85;
  --border:      rgba(255, 255, 255, .10);
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, .4);
  --shadow:      0 4px 10px rgba(0, 0, 0, .45);
  --shadow-md:   0 8px 22px rgba(0, 0, 0, .5);
  --shadow-lg:   0 18px 44px -18px rgba(0, 0, 0, .65);

  --th-accent:        #A78BFA;
  --th-accent-soft:   rgba(167, 139, 250, .14);
  --th-accent-border: rgba(167, 139, 250, .32);

  --th-glass-card:    rgba(255, 255, 255, .05);
  --th-glass-strong:  rgba(255, 255, 255, .08);
  --th-glass-border:  rgba(255, 255, 255, .10);

  --th-sb-text:       #B6B6CC;
  --th-sb-muted:      #8F8FA8;

  /* Fond "primary-light" (utilisé en dur un peu partout comme var(--primary-light,#EEF2FF))
     -> teinte violette sombre au lieu du bleu pâle. (--primary reste indigo pour les
     boutons pleins texte-blanc, on ne le touche pas.) */
  --primary-light: rgba(167, 139, 250, .16);
  --primary-soft:  rgba(167, 139, 250, .12);

  /* Surfaces sombres (lot "aucun encadré blanc" 2026-07-15) */
  --dk-surf:  #16161F;   /* cartes/modales/panneaux/inputs (= --white) */
  --dk-surf2: #12121B;   /* pills, un cran plus sombre (profondeur) */
  --dk-surf3: #1C1C28;   /* survol / élément surélevé */

  /* Pastilles sémantiques translucides : fond / texte / bord */
  --ok-bg:  rgba(52, 211, 153, .13);  --ok-tx:  #6EE7B7; --ok-bd:  rgba(52, 211, 153, .26);
  --dg-bg:  rgba(248, 113, 113, .13); --dg-tx:  #FCA5A5; --dg-bd:  rgba(248, 113, 113, .28);
  --wn-bg:  rgba(251, 191, 36, .14);  --wn-tx:  #FCD34D; --wn-bd:  rgba(251, 191, 36, .28);
  --inf-bg: rgba(96, 165, 250, .14);  --inf-tx: #93C5FD; --inf-bd: rgba(96, 165, 250, .28);
  --vi-bg:  rgba(167, 139, 250, .16); --vi-tx:  #C4B5FD; --vi-bd:  rgba(167, 139, 250, .32);

  /* Refonte URSSAF (2026-07) : semantiques du tableau de bord en sombre. */
  --urf-good: #43D6A0; --urf-good-bg: rgba(16,185,129,.13); --urf-good-bd: rgba(16,185,129,.30);
  --urf-warn: #E7A93A; --urf-warn-bg: rgba(217,145,40,.14); --urf-warn-bd: rgba(217,145,40,.32);
  --urf-bad:  #F0A0A0; --urf-bad-bg:  rgba(239,68,68,.14);  --urf-bad-bd:  rgba(239,68,68,.30);
}

/* =====================================================================
   2. AURORA (fond) — pseudo-élément fixe, gradients doux sans filter
   ===================================================================== */
/* Aurora Glass : l'aurore douce est étendue à TOUTE la page (décision Zouber 2026-08-02).
   Le fond n'est plus un aplat neutre facon "grande carte" — dégradé coloré léger (bleu /
   cyan / rose / lavande, memes teintes que la sidebar) sur lequel flottent les cartes de
   verre. Confiné au menu auparavant ; intensité "douce" retenue (lisible, non tape-a-l'oeil). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(52% 42% at 0% 0%,     rgba(179, 206, 248, .62), transparent 62%),
    radial-gradient(48% 40% at 100% 6%,   rgba(166, 230, 238, .48), transparent 60%),
    radial-gradient(56% 46% at 100% 100%, rgba(242, 164, 208, .48), transparent 62%),
    radial-gradient(52% 44% at 0% 100%,   rgba(216, 198, 242, .55), transparent 64%),
    linear-gradient(162deg, #e9effb 0%, #eef2fb 40%, #f6ebf4 100%);
}
html[data-theme="dark"] body::before {
  background:
    radial-gradient(52% 42% at 0% 0%,     rgba(90, 110, 200, .22), transparent 62%),
    radial-gradient(48% 40% at 100% 6%,   rgba(70, 160, 190, .16), transparent 60%),
    radial-gradient(56% 46% at 100% 100%, rgba(200, 90, 160, .18), transparent 62%),
    radial-gradient(52% 44% at 0% 100%,   rgba(140, 110, 210, .20), transparent 64%),
    #0a0912;
}

/* Laisser l'aurora transparaître derrière le contenu scrollable */
.app, .view-section, .dash-scroll { background: transparent; }

/* =====================================================================
   2b. PANNEAUX FLOTTANTS (desktop) — sidebar et contenu détachés des bords,
   posés sur l'aurora, coins arrondis (identique maquette validée)
   ===================================================================== */
@media (min-width: 769px) {
  .app { padding: 16px; gap: 16px; }
  .sidebar {
    border-radius: 12px;
    border: 1px solid var(--th-glass-border);
    box-shadow: 0 26px 60px -28px rgba(30, 22, 70, .45);
  }
  /* Contenu LIBRE : plus de grand cadre autour de l'onglet. Le contenu (cartes, tableaux)
     s'affiche directement sur la page neutre ; chaque bloc porte sa propre carte (.card). */
  .main {
    border-radius: 0;
    overflow: hidden;
    border: none;
    background: transparent;
    box-shadow: none;
  }
  html[data-theme="dark"] .sidebar { box-shadow: 0 26px 60px -24px rgba(0, 0, 0, .8); }
  html[data-theme="dark"] .main {
    background: transparent;
    border: none;
    box-shadow: none;
  }
}
@media (max-width: 768px) {
  .main { background: transparent; }
}

/* =====================================================================
   3. SIDEBAR — verre (clair et sombre) + nav sobre violet
   ===================================================================== */
/* MENU = Aurora Glass : verre dépoli posé sur une aurore floue CONFINÉE au panneau.
   Clair : bleu (haut) -> cyan (milieu-gauche) -> magenta/rose (centre-bas) -> lavande (bas).
   La 1re couche (voile blanc) donne le côté givré translucide. */
.sidebar {
  background:
    linear-gradient(rgba(255, 255, 255, .38), rgba(255, 255, 255, .38)),
    radial-gradient(72% 32% at 34% 0%,   #b3cef8, transparent 66%),
    radial-gradient(60% 32% at -4% 42%,  #a6e6ee, transparent 62%),
    radial-gradient(82% 42% at 80% 66%,  #f2a4d0, transparent 64%),
    radial-gradient(64% 30% at 42% 106%, #d8c6f2, transparent 70%),
    linear-gradient(162deg, #bfd3f6 0%, #c2dcee 28%, #e8b4d6 66%, #d9cef0 100%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border-right: 1px solid var(--th-glass-border);
  color: var(--th-sb-text);
  transition: width .28s cubic-bezier(.4, 0, .2, 1), padding .28s cubic-bezier(.4, 0, .2, 1);
}
/* Nocturne : aurore sombre indigo / violet / teal sur quasi-noir */
html[data-theme="dark"] .sidebar {
  background:
    linear-gradient(rgba(10, 10, 20, .30), rgba(10, 10, 20, .30)),
    radial-gradient(92% 46% at 16% -6%,   rgba(79, 70, 229, .85), transparent 70%),
    radial-gradient(96% 50% at 36% 106%,  rgba(124, 58, 237, .70), transparent 66%),
    radial-gradient(72% 46% at 116% 120%, rgba(20, 184, 166, .65), transparent 60%),
    linear-gradient(160deg, #141026, #241338 55%, #0c2b2b);
  border-right: 1px solid rgba(255, 255, 255, .10);
}

/* Marque : texte foncé en clair, blanc en sombre (le ONE reste ambre) */
.brand-name { color: #241F3D; }
html[data-theme="dark"] .brand-name { color: #F2F0FA; }

/* Nav : transparent, VIOLET au survol / actif (validé) */
.sidebar .snav-tab { color: var(--th-sb-text); }
/* Taille B validée : police du menu plus grosse (15,5px) + icônes proportionnelles */
.sidebar .snav-tab { font-size: 15.5px; gap: 11px; padding: 9px 12px; }
.sidebar .snav-tab svg { width: 19px; height: 19px; opacity: .82; }
.sidebar .snav-tab:hover { background: var(--th-accent-soft); color: var(--th-accent); }
.sidebar .snav-tab:hover svg { opacity: 1; }
/* Onglet actif = VERRE LIQUIDE translucide (façon Apple), SANS bordure blanche
   ni barre d'accent. L'onglet choisi se repère à la capsule de verre. L'aurore vibre au travers. */
.sidebar .snav-tab.active {
  position: relative;
  background: linear-gradient(135deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .28));
  -webkit-backdrop-filter: blur(16px) saturate(210%);
  backdrop-filter: blur(16px) saturate(210%);
  color: #2A2440;
  box-shadow: 0 12px 26px -14px rgba(60, 30, 110, .34);
  font-weight: 600;
}
html[data-theme="dark"] .sidebar .snav-tab.active {
  background: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05));
  color: #FFFFFF;
  box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .6);
}

/* Titres de section + textes secondaires de la sidebar */
.sidebar .sidebar-section-title { color: var(--th-sb-muted); }
.sidebar .sidebar-empty { color: var(--th-sb-muted); }

/* Bouton catalogue (bordure/hover pensés pour fond sombre -> adaptés) */
.btn-catalogue-sidebar {
  background: transparent;
  border: 1px solid rgba(36, 31, 61, .14);
  color: var(--th-sb-text);
}
.btn-catalogue-sidebar:hover {
  background: var(--th-accent-soft);
  border-color: var(--th-accent-border);
  color: var(--th-accent);
}
html[data-theme="dark"] .btn-catalogue-sidebar { border-color: rgba(255, 255, 255, .12); }

/* Paramètres */
.snav-settings-btn { color: var(--th-sb-text); }
.snav-settings-btn:hover { background: var(--th-accent-soft); color: var(--th-accent); }
/* Onglet Paramètres ACTIF = même capsule « verre liquide » que les autres onglets
   (fini le carré gris ardoise hérité de style.css qui « restait grisé »). */
.sidebar .snav-settings-btn.active {
  background: linear-gradient(135deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .28));
  -webkit-backdrop-filter: blur(16px) saturate(210%);
  backdrop-filter: blur(16px) saturate(210%);
  color: #2A2440;
  box-shadow: 0 12px 26px -14px rgba(60, 30, 110, .34);
  font-weight: 600;
}
html[data-theme="dark"] .sidebar .snav-settings-btn.active {
  background: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05));
  color: #FFFFFF;
  box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .6);
}

/* Avatar utilisateur : rond dégradé conique qui reprend les couleurs de l'aurore */
.sidebar-user-avatar {
  background: conic-gradient(from 210deg, #4F46E5, #EC4899, #22D3EE, #4F46E5) !important;
  color: #fff;
}
html[data-theme="dark"] .sidebar-user-avatar {
  background: conic-gradient(from 210deg, #4F46E5, #7C3AED, #14B8A6, #4F46E5) !important;
}

/* User + déconnexion */
.sidebar-user-name { color: #241F3D; }
html[data-theme="dark"] .sidebar-user-name { color: rgba(255, 255, 255, .9); }
.sidebar-logout-btn { color: var(--th-sb-muted); }
.sidebar-logout-btn:hover { color: #E11D48; background: rgba(225, 29, 72, .08); }

/* Plan footer */
.sidebar-plan-footer { border-top: 1px solid rgba(36, 31, 61, .10); }
html[data-theme="dark"] .sidebar-plan-footer { border-top-color: rgba(255, 255, 255, .08); }
.sidebar-plan-label { color: var(--th-sb-muted); }
.plan-free { background: rgba(36, 31, 61, .08); color: var(--th-sb-muted); }
html[data-theme="dark"] .plan-free { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .55); }
.plan-upgrade-link { color: #B45309; }
html[data-theme="dark"] .plan-upgrade-link { color: #FBBF24; }

/* Onboarding checklist + quota (fonds pensés pour sidebar sombre) */
#onboarding-checklist, #invoice-quota-bar { color: var(--th-sb-text); }
.invoice-quota-bar { background: rgba(36, 31, 61, .05); border-color: rgba(36, 31, 61, .10); }
.iqb-label { color: var(--th-sb-muted); }
.iqb-track { background: rgba(36, 31, 61, .12); }
html[data-theme="dark"] .invoice-quota-bar { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .08); }
html[data-theme="dark"] .iqb-label { color: rgba(255, 255, 255, .55); }
html[data-theme="dark"] .iqb-track { background: rgba(255, 255, 255, .12); }

/* Mini-liste de factures de la sidebar (textes pensés pour fond sombre -> adaptés) */
.sii-number { color: #241F3D; }
html[data-theme="dark"] .sii-number { color: #E2E8F0; }
.sii-client { color: var(--th-sb-muted); }
.sii-delete { color: var(--th-sb-muted); }
.sidebar-invoice-item:hover  { background: var(--th-accent-soft); }
.sidebar-invoice-item.active { background: var(--th-accent-soft); box-shadow: inset 0 0 0 1px var(--th-accent-border); }

/* =====================================================================
   4. SIDEBAR REPLIABLE (desktop) — le LOGO sert de bouton replier/déplier
   (clic sur le logo => bascule ; plus de chevron ni de bouton flottant)
   ===================================================================== */
@media (min-width: 769px) {
  /* Repli = rail d'icones : les libelles disparaissent, les icones restent (le menu ne disparait plus). */
  body.sb-collapsed .sidebar { width: 74px; min-width: 74px; }
  /* Marque repliee : logo seul, centre (c'est lui le bouton pour deplier). */
  body.sb-collapsed .sidebar-brand { justify-content: center; padding: 16px 0 12px; }
  body.sb-collapsed .brand-name { display: none; }
  body.sb-collapsed .sidebar-nav { align-items: center; padding: 8px 12px 10px; }
  body.sb-collapsed .sidebar-nav .sidebar-section-title { font-size: 0; padding: 10px 0 6px; }
  body.sb-collapsed .sidebar-nav .sidebar-section-title::after { content: ""; display: block; width: 22px; height: 1px; margin: 0 auto; background: var(--th-sb-muted, #94a3b8); opacity: .35; }
  body.sb-collapsed .snav-tab { justify-content: center; gap: 0; padding: 10px 0; width: 46px; }
  body.sb-collapsed .snav-label { display: none; }
  body.sb-collapsed .snav-tab svg { width: 19px; height: 19px; }
  body.sb-collapsed .btn-new-invoice-split { margin: 14px auto 8px; width: 46px; }
  body.sb-collapsed .btn-new-invoice { font-size: 0; gap: 0; justify-content: center; padding: 11px 0; }
  body.sb-collapsed .btn-new-invoice svg { width: 18px; height: 18px; }
  /* Sidebar REPLIEE : le bouton « + » gardait ses coins DROITS carres — heritage du chevron
     (.btn-new-invoice-caret) qui lui etait accole (style.css : border-radius var(--radius) 0 0
     var(--radius)). Or ce chevron est masque en mode replie -> le bouton paraissait COUPE a droite.
     On reprend le gabarit exact du bouton Catalogue juste en dessous : memes coins entierement
     arrondis, meme padding vertical, meme largeur 46px. (2026-07-27) */
  body.sb-collapsed .btn-new-invoice-split .btn-new-invoice { border-radius: var(--radius); padding: 10px 0; }
  body.sb-collapsed .btn-catalogue-sidebar { font-size: 0; gap: 0; justify-content: center; padding: 10px 0; margin: 0 auto 8px; width: 46px; }
  body.sb-collapsed .btn-catalogue-sidebar svg { width: 18px; height: 18px; }
  body.sb-collapsed .snav-settings-btn { font-size: 0; gap: 0; justify-content: center; padding: 10px 0; width: 46px; margin: 0 auto; }
  body.sb-collapsed .snav-settings-btn svg { width: 19px; height: 19px; }
  body.sb-collapsed .snav-fina { margin: 6px auto; }
  /* Reglages repliés : engrenage EN COLONNE au-dessus du jour/nuit, tous deux centrés
     (fini le débordement du toggle sur le bord droit — il était en ligne avec l'engrenage). */
  body.sb-collapsed .sidebar-settings-wrap { flex-direction: column; align-items: center; gap: 10px; padding-left: 0; padding-right: 0; }
  body.sb-collapsed .theme-toggle { margin: 0 auto; }
  /* Avatar puis deconnexion EMPILES (plus de superposition sur "ZC") */
  body.sb-collapsed .sidebar-user-block { flex-direction: column; align-items: center; gap: 9px; justify-content: center; }
  body.sb-collapsed .btn-new-invoice-caret,
  body.sb-collapsed #onboarding-checklist,
  body.sb-collapsed #invoice-quota-bar,
  body.sb-collapsed #sidebar-invoices-section .sidebar-section-title,
  body.sb-collapsed .sidebar-invoices,
  body.sb-collapsed .sidebar-user-name { display: none !important; }
  /* Plan : on garde juste le badge "ONE" tout en bas (le libelle + le lien upgrade sont masques) */
  body.sb-collapsed .sidebar-plan-footer { padding: 10px 0 12px; text-align: center; border: none; }
  body.sb-collapsed .sidebar-plan-row { justify-content: center; margin: 0; }
  body.sb-collapsed .sidebar-plan-label,
  body.sb-collapsed .plan-upgrade-link { display: none !important; }
}

/* =====================================================================
   5. BASCULE CLAIR/SOMBRE (pastille soleil/lune)
   ===================================================================== */
.sidebar-settings-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sidebar-settings-wrap .snav-settings-btn { flex: 1; min-width: 0; }

.theme-toggle {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--th-accent-soft);
  border: 1px solid var(--th-accent-border);
  flex-shrink: 0;
}
.tt-btn {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--th-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background .15s, color .15s;
}
.tt-btn svg { width: 14px; height: 14px; }
html[data-theme="light"] .tt-btn.tt-light,
html:not([data-theme="dark"]) .tt-btn.tt-light,
html[data-theme="dark"] .tt-btn.tt-dark {
  background: var(--th-accent);
  color: #fff;
  box-shadow: 0 3px 8px -2px rgba(124, 58, 237, .55);
}
.tt-btn:focus-visible { outline: 2px solid var(--th-accent); outline-offset: 2px; }

/* Version menu "Plus" mobile : rangée dédiée, cibles 44px (règle §3) */
.m-sheet-theme {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border, #E2E8F0);
}
.m-sheet-theme-lbl { font-size: 13.5px; font-weight: 600; color: var(--text, #1E293B); }
.m-sheet-theme .tt-btn { width: 44px; height: 44px; }
.m-sheet-theme .tt-btn svg { width: 18px; height: 18px; }

/* =====================================================================
   6. CONTENU — verre clair (topbar, cartes, modales, inputs)
   ===================================================================== */
/* Boutons flottants déplaçables (chat Fina + rond déplier le menu) */
.chat-fab { cursor: grab; }
.chat-fab.is-dragging { cursor: grabbing; transition: none; }

/* Barre du haut (Factures) : plus de fond blanc — titre + actions LIBRES sur la page
   (comme la maquette). On retire fond/bordure/ombre/blur de la barre. */
.topbar {
  background: transparent;
  border-bottom: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding-left: 4px;
  padding-right: 4px;
}
.card {
  background: var(--th-glass-card);
  -webkit-backdrop-filter: blur(var(--th-glass-blur)) saturate(160%);
  backdrop-filter: blur(var(--th-glass-blur)) saturate(160%);
  border: 1px solid var(--th-glass-border);
}
.card-header { background: rgba(255, 255, 255, .35); }
/* Barre de sous-onglets Factures : transparente (onglets libres sur la page,
   simple filet en bas comme la maquette) au lieu du bandeau blanc. */
.inv-tab-bar {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(20, 20, 50, .08);
  border-radius: 0;
  box-shadow: none;
  padding-left: 4px;
  padding-right: 4px;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-theme="dark"] .inv-tab-bar { border-bottom-color: rgba(255, 255, 255, .10); }
.modal-box {
  background: var(--th-glass-strong);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--th-glass-border);
}

/* =====================================================================
   7. SOMBRE — surfaces + textes codés en dur les plus visibles
   ===================================================================== */
html[data-theme="dark"] .card-header { background: rgba(255, 255, 255, .03); }
html[data-theme="dark"] .modal-overlay { background: rgba(0, 0, 0, .6); }
html[data-theme="dark"] .modal-box { border-color: rgba(255, 255, 255, .12); }

/* Tableaux (texte td #374151 / bordures #F1F5F9 en dur) */
html[data-theme="dark"] .inv-table td { color: #B9B9CC; border-color: rgba(255, 255, 255, .07); }
html[data-theme="dark"] .inv-table th { color: #7A7A92; }
html[data-theme="dark"] .invlist-table th { background: rgba(255, 255, 255, .04); }
html[data-theme="dark"] tbody tr:hover { background: rgba(255, 255, 255, .03); }

/* Inputs */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: rgba(255, 255, 255, .06);
  color: var(--text);
  border-color: rgba(255, 255, 255, .14);
}

/* Exception : --white surchargé -> re-blanchir le texte des boutons pleins */
html[data-theme="dark"] .ir-inline-btn { color: #fff; }

/* KPI / alertes dashboard (fonds pastel en dur) */
html[data-theme="dark"] .dash-alert-danger { background: rgba(239, 68, 68, .12); }

/* ── Liste de factures (lignes-cartes .il-row, TOUTES largeurs) ── */
html[data-theme="dark"] .invlist-tablecard { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .09); }
html[data-theme="dark"] .il-row,
html[data-theme="dark"] .il-row-pending { background: rgba(255, 255, 255, .045); }
html[data-theme="dark"] .il-row-pending:hover td { background: rgba(245, 158, 11, .08); }
html[data-theme="dark"] .il-row-late,
html[data-theme="dark"] .il-row-wrap.il-row-late .il-row { background: rgba(239, 68, 68, .10); }
html[data-theme="dark"] .il-btn-view,
html[data-theme="dark"] .il-btn-more,
html[data-theme="dark"] .il-btn-edit,
html[data-theme="dark"] #il-perpage { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: var(--text-muted); }
html[data-theme="dark"] .il-rowmenu { background: #1A1A26; border-color: rgba(255, 255, 255, .12); }
html[data-theme="dark"] .il-pagination { background: transparent; }
html[data-theme="dark"] .invlist-kpi-hero { background: rgba(251, 191, 36, .07); border-color: rgba(251, 191, 36, .22); }

/* ── Cartes clients + barre d'outils ── */
html[data-theme="dark"] .client-card { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .10); }
html[data-theme="dark"] .client-card:hover { border-color: rgba(167, 139, 250, .40); box-shadow: none; }
html[data-theme="dark"] .client-card.selected { border-color: rgba(167, 139, 250, .55); }
html[data-theme="dark"] .client-card-actions { border-top-color: rgba(255, 255, 255, .08); }
html[data-theme="dark"] .clients-toolbar { background: rgba(255, 255, 255, .04); }

/* ── Menus/encarts blancs en dur ── */
html[data-theme="dark"] .nf-split-menu { background: #1A1A26; border-color: rgba(255, 255, 255, .12); }
html[data-theme="dark"] .dpm-box { background: #1A1A26; }
html[data-theme="dark"] .dpm-btn-ghost { background: rgba(255, 255, 255, .06); color: var(--text); border-color: rgba(255, 255, 255, .14); }
html[data-theme="dark"] .wz-conseils,
html[data-theme="dark"] .wz-net { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .10); }

/* =====================================================================
   8. MOBILE — barre du bas, sheets, cartes factures, articles
   ===================================================================== */
@media (max-width: 768px) {
  /* Barre du bas : verre (déjà translucide en clair -> version sombre) */
  html[data-theme="dark"] .m-bottomnav {
    background: rgba(16, 16, 26, .78);
    border-top: 1px solid rgba(255, 255, 255, .08);
  }
  html[data-theme="dark"] .m-nav-item { color: #8F8FA8; }
  html[data-theme="dark"] .m-nav-item.active { color: #A78BFA; }

  /* Sheets (Plus / création) */
  html[data-theme="dark"] .m-plus-sheet { background: #15151F; }
  html[data-theme="dark"] .m-sheet-row,
  html[data-theme="dark"] .m-create-row { background: transparent; color: var(--text); }
  html[data-theme="dark"] .m-sheet-row:active,
  html[data-theme="dark"] .m-create-row:active { background: rgba(167, 139, 250, .12); }
  html[data-theme="dark"] .m-sheet-label, html[data-theme="dark"] .m-create-label { color: var(--text); }
  html[data-theme="dark"] .m-sheet-head { color: var(--text); }

  /* Cartes factures (pattern tableau->cartes, fonds #fff en dur) */
  html[data-theme="dark"] .invlist-tablecard { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .09); }
  html[data-theme="dark"] .il-row { background: rgba(255, 255, 255, .04); }
  html[data-theme="dark"] .il-row-late { background: rgba(239, 68, 68, .10); }

  /* Articles editeur : plus de fond. Depuis le passage au cadre unique (option A, 2026-07-29)
     la ligne n'est plus une carte -> lui redonner un fond ici recreait la carte-dans-la-carte
     en mode sombre uniquement. */
}

/* =====================================================================
   8b. DASHBOARD — cohérence liquid glass (maquette validée 2026-07-14)
   Un seul accent violet ; rouge/ambre = sémantique sobre ; verre partout.
   ===================================================================== */
:root { --th-danger:#c02640; --th-danger-bg:rgba(239,68,68,.10); --th-danger-bd:rgba(239,68,68,.24);
        --th-warn:#9a6a00; --th-warn-bg:rgba(245,158,11,.12); --th-warn-bd:rgba(245,158,11,.28);
        --th-ok:#0e7c5a; }
html[data-theme="dark"] { --th-danger:#fca5a5; --th-warn:#fcd34d; --th-ok:#6ee7b7; }

/* KPI — cartes de verre */
#view-dashboard .kpi {
  background: var(--th-glass-card);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--th-glass-border);
  box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 12px 30px -18px rgba(30,22,70,.4);
}
html[data-theme="dark"] #view-dashboard .kpi { box-shadow: 0 12px 30px -18px rgba(0,0,0,.6); }
#view-dashboard .kpi:hover { box-shadow: 0 16px 38px -18px rgba(30,22,70,.5); }
#view-dashboard .kpi::after { display: none; }              /* halos de coin multicolores retirés */
/* Intitulés KPI : plus GROS mais PAS gras (poids normal) + casse normale — lisibles
   directement, sans voler la vedette au chiffre (maquette validée). */
#view-dashboard .kpi-label {
  font-size: 15.5px; font-weight: 500; text-transform: none; letter-spacing: 0;
  line-height: 1.25; color: #5C5F74;
}
html[data-theme="dark"] #view-dashboard .kpi-label { color: #A7ABC2; }
@media (max-width: 768px) { #view-dashboard .kpi-label { font-size: 13px; } }

/* DA UNIFIÉE — mêmes intitulés (plus gros, pas gras) + montants en gras sur les autres
   familles de cartes « titre + montant » : KPI Factures + stats Trésorerie (maquette validée). */
/* MAJ 2026-07-22 (refonte Factures) : la rangée KPI Factures passe à 5 cartes
   (3 KPI + Objectif + Répartition) -> intitulé ramené à 12px, sinon « Objectif
   d'encaissement » et « Répartition par statut » ne tiennent pas. Le dashboard
   (cash-pill) garde 15,5px. */
#view-invoices .invlist-kpi-label {
  font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; color: #5C5F74;
}
#view-dashboard .cash-pill-label {
  font-size: 15.5px; font-weight: 500; text-transform: none; letter-spacing: 0; color: #5C5F74;
}
html[data-theme="dark"] #view-invoices .invlist-kpi-label,
html[data-theme="dark"] #view-dashboard .cash-pill-label { color: #A7ABC2; }
#view-invoices .invlist-kpi-val { font-weight: 800; }
#view-dashboard .cash-pill-val { font-weight: 800; }
@media (max-width: 768px) {
  #view-invoices .invlist-kpi-label,
  #view-dashboard .cash-pill-label { font-size: 13px; }
}
#view-dashboard .kpi-val   { color: var(--text); }
/* Icônes KPI : toutes unifiées en VERRE VIOLET (fini indigo/bleu/rouge/ambre) */
#view-dashboard .kpi-icon {
  background: rgba(124,58,237,.12) !important;
  color: var(--th-accent) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] #view-dashboard .kpi-icon { background: rgba(167,139,250,.16) !important; }

/* Anciennes tuiles .dash-kpi (fallback) */
#view-dashboard .dash-kpi { background: var(--th-glass-card); border: 1px solid var(--th-glass-border); border-radius: 12px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

/* Alertes fiscales — ADOUCIES : sans bord, teinte très légère, texte neutre,
   la couleur (rouge/orange) ne porte QUE sur le mot-clé en gras. Moins agressif,
   cohérent avec la DA du site. */
#view-dashboard .dash-alert-danger,
#view-dashboard .dash-alert-banner.dash-alert-danger {
  background: rgba(239,68,68,.06); border: none; color: var(--text-muted); }
#view-dashboard .dash-alert-danger strong,
#view-dashboard .dash-alert-banner.dash-alert-danger strong { color: var(--th-danger); }
#view-dashboard .dash-alert-warning,
#view-dashboard .dash-alert-warn,
#view-dashboard .dash-alert-banner {
  background: rgba(245,158,11,.09); border: none; color: var(--text-muted); }
#view-dashboard .dash-alert-warning strong,
#view-dashboard .dash-alert-warn strong,
#view-dashboard .dash-alert-banner strong { color: var(--th-warn); }
html[data-theme="dark"] #view-dashboard .dash-alert-danger { background: rgba(239,68,68,.10); }
html[data-theme="dark"] #view-dashboard .dash-alert-warning,
html[data-theme="dark"] #view-dashboard .dash-alert-warn { background: rgba(245,158,11,.12); }
#view-dashboard .dash-alert-warn .dash-alert-text strong { color: var(--text); }
#view-dashboard .dash-alert-warn .dash-alert-text span { color: var(--th-warn); }
#view-dashboard .dash-alert-warn .dash-alert-icon { color: var(--th-warn); }
#view-dashboard .dash-alert-warn .dash-alert-cta {
  background: var(--th-warn-bg); color: var(--th-warn); border: 1px solid var(--th-warn-bd); }
#view-dashboard .dash-alert-warn .dash-alert-cta:hover { background: var(--th-warn-bd); }

/* Bande Seuils — carte de verre */
#view-dashboard .seuils-strip {
  background: var(--th-glass-card); border: 1px solid var(--th-glass-border);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); box-shadow: none; }
#view-dashboard .seuil-lbl { color: var(--text); }
#view-dashboard .seuil-bar { background: rgba(30,22,70,.09); }
html[data-theme="dark"] #view-dashboard .seuil-bar { background: rgba(255,255,255,.10); }
#view-dashboard .seuil-pct { width: auto; white-space: nowrap; }

/* CLÉ : la zone de scroll du Dashboard était OPAQUE (var(--bg)) et masquait l'aurora
   -> transparente, pour que le verre et l'aurora transparaissent (comme la maquette). */
#view-dashboard .dash-scroll { background: transparent; }

/* TOUTES les cartes/tuiles du Dashboard -> verre (Trésorerie, Activité, À faire,
   mini-cartes, objectifs, simulateur, détails TVA, pastilles caisse). */
#view-dashboard .section,
#view-dashboard .activity-tile,
#view-dashboard .card,
#view-dashboard .todo-item,
#view-dashboard .goal-card,
#view-dashboard .sim-step,
#view-dashboard .tva-detail-tile,
#view-dashboard .cash-pill {
  background: var(--th-glass-card);
  border: 1px solid var(--th-glass-border);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 12px 30px -20px rgba(30,22,70,.4);
}
html[data-theme="dark"] #view-dashboard .section,
html[data-theme="dark"] #view-dashboard .activity-tile,
html[data-theme="dark"] #view-dashboard .card,
html[data-theme="dark"] #view-dashboard .todo-item,
html[data-theme="dark"] #view-dashboard .goal-card,
html[data-theme="dark"] #view-dashboard .sim-step,
html[data-theme="dark"] #view-dashboard .tva-detail-tile,
html[data-theme="dark"] #view-dashboard .cash-pill { box-shadow: 0 12px 30px -20px rgba(0,0,0,.6); }

/* Pastilles d'icône de section -> violet doux (fini le blanc) */
#view-dashboard .section-icon { background: rgba(124,58,237,.12); color: var(--th-accent); }
html[data-theme="dark"] #view-dashboard .section-icon { background: rgba(167,139,250,.16); }

/* Segmenté Activité (Freelance/service | Commerçant/Caisse) : actif VIOLET (fini le bleu) */
#view-dashboard .activity-toggle { background: var(--th-accent-soft); border: 1px solid var(--th-accent-border); }
#view-dashboard .activity-toggle .on { background: rgba(255,255,255,.92); color: var(--th-accent); box-shadow: 0 2px 6px -2px rgba(30,22,70,.2); }
html[data-theme="dark"] #view-dashboard .activity-toggle .on { background: rgba(255,255,255,.12); color: #d9ccff; box-shadow: none; }

/* ===== COACH IA (.insight) — carte de VERRE FLOTTANTE, couleur PAR PAGE =====
   - plus de cadre parent (.section) : la carte flotte seule (fini le box-in-box)
   - plus de barre à gauche, plus de bord dur : juste le verre teinté qui fond vers le blanc
   - couleur PAR PAGE portée par --c (indigo · violet · teal, rouge = alerte risque)
   - textes foncé/clair selon thème ; mot-clé en gras + badge + bouton à la couleur de la page
   - points du carrousel : violet doux UNIFORME (pas dix couleurs), l'actif est plein + plus grand */

/* Le cadre parent disparaît : la carte-verre devient le seul encadré */
#view-dashboard .section[data-section="insights"] {
  background: transparent; border: none; box-shadow: none; padding: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* Même logique « fini le box-in-box » pour Activité / Mes objectifs / TVA détaillée :
   on retire le cadre INTERMÉDIAIRE (.card). La section reste le seul cadre, et les
   tuiles internes (activity-tile / goal-card / tva-detail-tile) se posent directement
   dedans -> ça respire, plus de triple encadré. padding:0 => les tuiles s'alignent sur
   le titre (la marge 0 14px 14px de .card garde l'inset). Web + mobile, clair + sombre. */
#view-dashboard .section[data-section="activite"] > .card,
#view-dashboard .section[data-section="goals"] > .card,
#view-dashboard .section[data-section="tva-detail"] > .card {
  background: transparent;
  border: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: 0;
}

/* MODE CLAIR uniquement : une fois le cadre intermediaire retire, les tuiles internes se
   fondaient dans le blanc de la section. On les repasse en blanc + ombre douce (meme style
   que les cartes KPI du haut) pour bien les delimiter. Le mode sombre garde son rendu
   (deja bien contraste -> selecteur :not([data-theme="dark"])). */
html:not([data-theme="dark"]) #view-dashboard .activity-tile,
html:not([data-theme="dark"]) #view-dashboard .goal-card,
html:not([data-theme="dark"]) #view-dashboard .tva-detail-tile {
  background: #fff;
  border: 1px solid #ECEBF3;
  box-shadow: 0 2px 8px rgba(30, 22, 70, .10);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Couleur PAR PAGE portée par la POSITION (variété : chaque page a sa teinte).
   Le ROUGE est réservé au vrai « Risque détecté » (variant-danger), qui gagne
   car il est déclaré APRÈS les positions (même spécificité → l'ordre tranche). */
/* Couleur de page --c alignee sur la palette de la maquette (violet/bleu/vert/ambre, rouge=risque). */
#view-dashboard .insight { --c: var(--dash-accent); }               /* défaut violet */
#view-dashboard .insight.insight-pos-0 { --c: var(--dash-accent); } /* violet */
#view-dashboard .insight.insight-pos-1 { --c: var(--dash-info); }   /* bleu   */
#view-dashboard .insight.insight-pos-2 { --c: var(--dash-ok); }     /* vert   */
#view-dashboard .insight.insight-pos-3 { --c: var(--dash-warn); }   /* ambre  */
#view-dashboard .insight.variant-tva { --c: var(--dash-warn); }     /* Seuil TVA = ambre (maquette) */
#view-dashboard .insight.variant-danger { --c: var(--dash-bad); }   /* rouge = risque réel */
#view-dashboard .insight.variant-risk { --c: var(--dash-bad); }     /* rouge = risque */

#view-dashboard .insight {
  background: linear-gradient(125deg, color-mix(in srgb, var(--c) 13%, transparent), var(--th-glass-card)) !important;
  color: var(--text);
  border: none;
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
}
/* Le rouge de base (.variant-risk, en !important) est neutralisé : la carte suit
   sa couleur de position (--c). Le rouge ne subsiste que via .variant-danger. */
#view-dashboard .insight.variant-risk {
  background: linear-gradient(125deg, color-mix(in srgb, var(--c) 13%, transparent), var(--th-glass-card)) !important;
}
#view-dashboard .insight::before { display: none; }         /* cercle blanc retiré */

/* Badge : teinte + texte à la couleur de la page, sans bord */
#view-dashboard .insight-badge {
  background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c); border: none; }
/* Corps : texte selon thème ; mot-clé en gras à la couleur de la page */
#view-dashboard .insight-body p { color: var(--text); }
#view-dashboard .insight-body p strong { color: var(--c); }
#view-dashboard .insight-counter { color: var(--text-muted); }

/* Bouton : PLEIN à la couleur de la page + texte blanc (identique maquette) */
#view-dashboard .insight .insight-action {
  background: var(--c); color: #fff; border: none;
  box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--c) 60%, transparent); }
#view-dashboard .insight.variant-risk .insight-action,
#view-dashboard .insight.variant-danger .insight-action { color: #fff; }
#view-dashboard .insight .insight-action:hover {
  background: var(--c); filter: brightness(.94); color: #fff; }

/* Points : inactif neutre, actif = PILULE accent (identique maquette).
   NB : la nav est HORS des slides .insight -> --c n'y est pas défini ; on utilise l'accent fixe. */
#view-dashboard .insight-stack-dot { background: rgba(0,0,0,.16); }
#view-dashboard .insight-stack-dot.on { background: var(--dash-accent); transform: none; width: 16px; border-radius: 3px; }
html[data-theme="dark"] #view-dashboard .insight-stack-dot { background: rgba(255,255,255,.24); }

/* Flèches : surface claire + couleur accent (identique maquette) */
#view-dashboard .insight-stack-arrow { background: var(--th-glass-strong); color: var(--dash-accent); box-shadow: 0 1px 3px rgba(0,0,0,.10); }
#view-dashboard .insight-stack-arrow:hover { background: color-mix(in srgb, var(--dash-accent) 12%, var(--th-glass-strong)); color: var(--dash-accent); }

/* En-tête Dashboard : NE colle plus au scroll (le sticky faisait un demi-collage moche
   avec un fond opaque qui jurait sur le panneau de verre). Il défile normalement ;
   on remonte en haut pour le revoir. */
#view-dashboard .dash-hero { position: static; margin-top: 0; margin-bottom: 20px; background: transparent; }
#view-dashboard .dash-hero.is-stuck {
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: none; padding-top: 0; padding-bottom: 0; }
#view-dashboard .dash-hero.is-stuck .dash-title { font-size: 22px; }
#view-dashboard .dash-hero.is-stuck .dash-subtitle { display: block; }

/* En-tête Dashboard : TOUS les contrôles harmonisés en verre (fini le patchwork
   blanc/ambre/icônes nues) — un seul langage, violet au survol. */
/* TOUS les boutons de la barre : même hauteur (40px) + même arrondi (11px) + même design */
#view-dashboard .dash-tool-btn,
#view-dashboard .dash-period,
#view-dashboard .quick-action-btn {
  background: var(--th-glass-strong);
  border: 1px solid var(--th-glass-border);
  color: var(--th-sb-text);
  border-radius: 12px;
  box-shadow: none;
  -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%);
  height: 40px;
}
#view-dashboard .quick-action-btn { width: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
#view-dashboard .dash-tool-btn:hover,
#view-dashboard .dash-period:hover,
#view-dashboard .quick-action-btn:hover {
  background: var(--th-accent-soft); color: var(--th-accent); border-color: var(--th-accent-border);
}
/* Barre du dashboard : plus d'encadré — contrôles LIBRES et bien espacés (maquette validée) */
#view-dashboard .dash-tools {
  background: transparent; border: none; border-radius: 0; padding: 0; gap: 14px;
}
/* Segmenté Vue 1 / Vue 2 : pilule de verre autonome, deux segments STRICTEMENT identiques */
#view-dashboard .view-tabs {
  background: var(--th-glass-strong); border: 1px solid var(--th-glass-border);
  border-radius: 12px; padding: 3px; gap: 2px; height: 40px;
}
#view-dashboard .view-tab {
  position: relative; width: 78px; height: 34px; justify-content: center; gap: 0;
  padding: 0 8px; border-radius: 12px; color: var(--th-sb-text); max-width: none;
}
#view-dashboard .view-tab-name { max-width: none; overflow: visible; }
#view-dashboard .view-tab.on {
  background: rgba(255,255,255,.92); color: var(--th-accent);
  box-shadow: 0 2px 6px -2px rgba(30,22,70,.2);
}
html[data-theme="dark"] #view-dashboard .view-tab.on { background: rgba(255,255,255,.12); color: #d9ccff; box-shadow: none; }
/* Crayon (renommer) : positionné en absolu -> n'élargit PAS le segment ; caché au repos,
   visible seulement au survol -> Vue 1 et Vue 2 restent identiques. */
#view-dashboard .view-tab .view-tab-edit {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%); opacity: 0; }
#view-dashboard .view-tab.on .view-tab-edit { opacity: 0; }
#view-dashboard .view-tab:hover .view-tab-edit,
#view-dashboard .view-tab.on:hover .view-tab-edit { opacity: .7; }
/* « Suivi de mes objectifs · 1j » toujours sur une seule ligne */
#view-dashboard .streak-badge { white-space: nowrap; }

/* Badge streak « Suivi de mes objectifs » — ambre doux en verre (plus le dégradé orange vif) */
#view-dashboard .streak-badge {
  background: var(--th-warn-bg); color: var(--th-warn); border: 1px solid var(--th-warn-bd); box-shadow: none;
  height: 40px; border-radius: 12px; padding: 0 15px; }
#view-dashboard .streak-badge:hover { box-shadow: none; transform: translateY(-1px); }
#view-dashboard .streak-badge strong { color: var(--th-warn); }
#view-dashboard .streak-badge .streak-flame { filter: none; }

/* --------------------------------------------------------------------
   MOBILE (<=768px) — la barre du dashboard tient sur UNE seule ligne,
   avec des ecarts EGAUX entre chaque module (8px, comme Modifier/Annee).
   Le desktop fige .view-tab a 78px (deux segments identiques) et
   .dash-tools a gap 14px ci-dessus : sur petit ecran ces valeurs
   poussaient le bouton "partage" a la ligne suivante et laissaient de
   gros ecarts inegaux (space-between).
   Ici : Vue1/Vue2 et Suivi s'ETIRENT (flex:1) pour remplir la ligne,
   la cloche et le partage restent CARRES (40px, flex:0 0 auto), et
   justify-content flex-start + gap 8px -> meme ecart partout.
   (Desktop inchange : le rendu web a ete valide.)
   -------------------------------------------------------------------- */
@media (max-width: 768px) {
  #view-dashboard .dash-tools { gap: 8px; justify-content: flex-start; }
  /* Vue1/Vue2 : la pilule s'etire, et les 2 segments grandissent a l'identique dedans. */
  #view-dashboard .view-tabs { flex: 1 1 auto; }
  #view-dashboard .view-tab { flex: 1 1 0; width: auto; min-width: 0; }
  #view-dashboard .view-tab-name {
    max-width: 10ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* Suivi s'etire aussi ; cloche + partage restent carres (pas d'agrandissement). */
  #view-dashboard .streak-badge { flex: 1 1 auto; }
  #view-dashboard .notif-bell-wrap,
  #view-dashboard #shareOpen { flex: 0 0 auto; }
}

/* =====================================================================
   8c. GLOBAL — accent violet unifié + entêtes de tableaux + badges
   ===================================================================== */
/* Boutons principaux -> violet (cohérent avec la nav et les maquettes validées) */
.btn-primary { background: linear-gradient(150deg,#6d5cf6,#7C3AED); border-color: transparent; box-shadow: 0 8px 18px -8px rgba(124,58,237,.55); }
.btn-primary:hover { background: linear-gradient(150deg,#6653ef,#6d28d9); border-color: transparent; }
.btn-new-invoice { background: linear-gradient(150deg,#6d5cf6,#7C3AED); }
.btn-new-invoice-caret, .btn-new-invoice-caret[aria-expanded="true"] { background: linear-gradient(150deg,#5c4be6,#6a2fce); }

/* Boutons ghost -> verre */
.btn-ghost { background: var(--th-glass-strong); border-color: var(--th-glass-border); color: var(--text); }
.btn-ghost:hover { background: rgba(124,58,237,.08); border-color: var(--th-accent-border); color: var(--th-accent); }

/* Entêtes de LISTE/TABLEAU : fond lavande clair VISIBLE (validé). IMPORTANT : la liste
   Factures utilise un en-tête EN DIV `.il-head` (pas un <th>) qui avait gardé le gris
   `var(--bg)` — il est inclus ici. Valeur SOLIDE (pas rgba) pour ne pas se diluer sur les
   cartes translucides. Identique partout. */
.invlist-table th, .inv-table th, .cerfa-table th, .tva-table-wrap th, table th, .il-head {
  background: #F5F1FD !important;
}
html[data-theme="dark"] .invlist-table th,
html[data-theme="dark"] .inv-table th,
html[data-theme="dark"] .cerfa-table th,
html[data-theme="dark"] table th,
html[data-theme="dark"] .il-head { background: rgba(167, 139, 250, .06) !important; color: var(--text-muted); }

/* Badge "Brouillon" (topbar + listes) -> ambre doux en verre */
.badge-draft, .topbar-status.badge-draft {
  background: var(--th-warn-bg); color: var(--th-warn); border: 1px solid var(--th-warn-bd); }
.topbar-title { color: var(--text); }

/* Barre de sélection / pagination factures -> verre */
html[data-theme="dark"] .invlist-selbar { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10); }

/* =====================================================================
   9. ACCESSIBILITÉ / PERF
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .sidebar, .tt-btn { transition: none; }
}
/* Navigateurs sans backdrop-filter : surfaces opaques de repli */
@supports not (backdrop-filter: blur(1px)) {
  .sidebar { background: rgba(255, 255, 255, .96); }
  .card, .topbar, .modal-box { background: rgba(255, 255, 255, .97); }
  html[data-theme="dark"] .sidebar { background: #131320; }
  html[data-theme="dark"] .card,
  html[data-theme="dark"] .topbar,
  html[data-theme="dark"] .modal-box { background: #16161F; }
}

/* =====================================================================
   ARRONDIS — exceptions à l'uniformisation 12px : éléments qui DOIVENT
   rester ronds (barres de progression, pastilles de compteur, scrollbar).
   ===================================================================== */
.seuil-bar, .seuil-fill,
#view-dashboard .seuil-bar, #view-dashboard .seuil-bar > i,
.invoice-quota-bar, .iqb-track,
.notif-bell-badge, .inv-tab-badge, .clf-tab-badge, .clf-tab-badge-fac,
.streak-flame { border-radius: 999px !important; }
::-webkit-scrollbar-thumb { border-radius: 999px !important; }

/* =====================================================================
   MODE SOMBRE — PASSE COMPLÈTE « aucun encadré blanc » (lot 2026-07-15)
   Toutes les surfaces / pastilles / badges / inputs qui avaient un fond
   clair EN DUR (non basculé par les tokens) reçoivent ici leur équivalent
   sombre. Palette validée « B » : surfaces #16161F, pills #12121B, texte
   doux, accents sémantiques translucides. Centralisé (règle §2) et scopé
   html[data-theme="dark"] -> n'affecte QUE le sombre. Sélecteurs préfixés
   par les ancêtres d'origine pour battre la spécificité (fuites ⚠️).
   ===================================================================== */

/* ---- ZONE 1 · DASHBOARD ------------------------------------------- */
html[data-theme="dark"] #view-dashboard .dash-group > .section[data-section],
html[data-theme="dark"] #view-dashboard .section .card,
html[data-theme="dark"] #view-dashboard .trust-footer,
html[data-theme="dark"] #view-dashboard .dash-gate-inner {
  background: var(--dk-surf); border-color: var(--border);
}
html[data-theme="dark"] #view-dashboard .kpi-delta.up   { background: var(--ok-bg); color: var(--ok-tx); }
html[data-theme="dark"] #view-dashboard .kpi-delta.down { background: var(--dg-bg); color: var(--dg-tx); }
html[data-theme="dark"] #view-dashboard .activity-toggle button.on { background: rgba(255,255,255,.12); color: #D9CCFF; box-shadow: none; }
html[data-theme="dark"] #view-dashboard .goal-card:hover { background: var(--dk-surf3); }
html[data-theme="dark"] #view-dashboard .edit-bar { background: var(--wn-bg); border-color: var(--wn-bd); }
html[data-theme="dark"] #view-dashboard .edit-bar-done { background: var(--dk-surf); color: var(--text); border-color: var(--border); }
html[data-theme="dark"] #view-dashboard .edit-bar-done:hover { background: var(--dk-surf3); }
html[data-theme="dark"] body.is-editing #view-dashboard .edit-controls { background: rgba(20,20,30,.92); }
html[data-theme="dark"] .edit-ctrl-btn.hide-section:hover { background: var(--dg-bg); }

/* ---- ZONE 2 · LISTE FACTURES (desktop) ---------------------------- */
html[data-theme="dark"] .invlist-kpi-green { background: var(--ok-bg); border-color: var(--ok-bd); }
html[data-theme="dark"] .il-row-paid,
html[data-theme="dark"] #view-invoices .il-row-wrap.il-row-paid .il-row { background: rgba(52,211,153,.07); }
html[data-theme="dark"] .il-row-paid:hover td { background: rgba(52,211,153,.10); }
html[data-theme="dark"] .il-selbar { background: var(--dk-surf); border-color: var(--border); }
html[data-theme="dark"] .il-selbar-all,
html[data-theme="dark"] .il-selbar-btn { background: var(--vi-bg); border-color: var(--vi-bd); color: var(--vi-tx); }
html[data-theme="dark"] .il-selbtn-desk,
html[data-theme="dark"] .il-selbtn-desk:hover { background: var(--vi-bg); color: var(--vi-tx); border-color: var(--vi-bd); }
html[data-theme="dark"] .il-list.il-sel-mode .il-check { background: var(--dk-surf2); border-color: var(--border); }
html[data-theme="dark"] .il-list.il-sel-mode .il-row-wrap.sel .il-row { background: rgba(167,139,250,.10); }
html[data-theme="dark"] .ilf-sheet,
html[data-theme="dark"] .ilf-btn,
html[data-theme="dark"] .ilf-opt,
html[data-theme="dark"] .ilf-sheet .ilf-clients-search { background: var(--dk-surf); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .ilf-opt.on { background: var(--vi-bg); border-color: var(--vi-bd); color: var(--vi-tx); }
html[data-theme="dark"] .ilf-etiq-edit, html[data-theme="dark"] .ilf-etiq-editbox,
html[data-theme="dark"] .ilf-etiq-createform, html[data-theme="dark"] .ilf-etiq-new { background: var(--dk-surf2); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .ilf-etiq-edit.on { background: var(--vi-bg); color: var(--vi-tx); }
html[data-theme="dark"] .invlist-chip,
html[data-theme="dark"] .invlist-chip:hover,
html[data-theme="dark"] .il-type-chip { background: var(--vi-bg); color: var(--vi-tx); border-color: var(--vi-bd); }
html[data-theme="dark"] .il-status-paid    { background: var(--ok-bg); color: var(--ok-tx); }
html[data-theme="dark"] .il-status-pending { background: var(--wn-bg); color: var(--wn-tx); }
html[data-theme="dark"] .il-status-late    { background: var(--dg-bg); color: var(--dg-tx); }
html[data-theme="dark"] .il-status-draft   { background: rgba(255,255,255,.07); color: var(--text-muted); }
html[data-theme="dark"] .il-status-partial { background: var(--vi-bg); color: var(--vi-tx); }
html[data-theme="dark"] .il-avoir-tag,
html[data-theme="dark"] .wz-net-badge { background: var(--wn-bg); color: var(--wn-tx); }
html[data-theme="dark"] .il-dup-tag,
html[data-theme="dark"] .il-dup-tag:hover { background: var(--vi-bg); color: var(--vi-tx); }
html[data-theme="dark"] .il-tag { background: rgba(255,255,255,.07); color: var(--text-muted); }
html[data-theme="dark"] .il-btn-encaisser { background: var(--ok-bg); color: var(--ok-tx); border-color: var(--ok-bd); }
html[data-theme="dark"] .il-btn-encaisser:hover { background: #047857; border-color: #047857; color: #fff; }
html[data-theme="dark"] .inv-conf-badge { background: var(--ok-bg); color: var(--ok-tx); }
html[data-theme="dark"] .rel-cli.rel-done { background: rgba(255,255,255,.04); }
html[data-theme="dark"] .rel-cli.rel-no   { background: var(--wn-bg); }

/* ---- ZONE 3 · FISCALITÉ (TVA / CERFA / IR) ------------------------ */
html[data-theme="dark"] .tva-kpi-net-card { background: var(--vi-bg); border-color: var(--vi-bd); }
html[data-theme="dark"] .tva-kpi-net-card.credit { background: var(--ok-bg); border-color: var(--ok-bd); }
html[data-theme="dark"] .tva-alert-banner.warning,
html[data-theme="dark"] .tva-alert-warning,
html[data-theme="dark"] .ir-disclaimer { background: var(--wn-bg); border-color: var(--wn-bd); color: var(--wn-tx); }
html[data-theme="dark"] .tva-alert-banner.danger,
html[data-theme="dark"] .tva-alert-danger { background: var(--dg-bg); border-color: var(--dg-bd); color: var(--dg-tx); }
html[data-theme="dark"] .tva-alert-banner.info,
html[data-theme="dark"] .tva-alert-info { background: var(--inf-bg); border-color: var(--inf-bd); color: var(--inf-tx); }
html[data-theme="dark"] .tva-alert-ok { background: var(--ok-bg); border-color: var(--ok-bd); color: var(--ok-tx); }
html[data-theme="dark"] .ca3-row-due td, html[data-theme="dark"] .ca3-result-box.due, html[data-theme="dark"] .ca3-result-due { background: var(--wn-bg); border-color: var(--wn-bd); color: var(--wn-tx); }
html[data-theme="dark"] .ca3-row-credit td, html[data-theme="dark"] .ca3-result-box.credit, html[data-theme="dark"] .ca3-result-credit { background: var(--ok-bg); border-color: var(--ok-bd); color: var(--ok-tx); }
html[data-theme="dark"] .enc-ok   { background: var(--ok-bg); color: var(--ok-tx); }
html[data-theme="dark"] .enc-pend { background: var(--wn-bg); color: var(--wn-tx); }
html[data-theme="dark"] .enc-auto { background: var(--vi-bg); color: var(--vi-tx); }
html[data-theme="dark"] .ocr-btn   { background: var(--vi-bg); color: var(--vi-tx); border-color: var(--vi-bd); }
html[data-theme="dark"] .ocr-loading { background: var(--inf-bg); color: var(--inf-tx); }
html[data-theme="dark"] .ocr-success { background: var(--ok-bg); color: var(--ok-tx); }
html[data-theme="dark"] .ocr-error   { background: var(--dg-bg); color: var(--dg-tx); }
html[data-theme="dark"] .cerfa-cfp-row td { background: rgba(255,255,255,.03); }
html[data-theme="dark"] .cerfa-note { background: var(--wn-bg); border-color: var(--wn-bd); color: var(--wn-tx); }
html[data-theme="dark"] .cerfa-vl-section { background: var(--vi-bg); border-color: var(--vi-bd); }
html[data-theme="dark"] .cerfa-acre-badge { background: var(--ok-bg); color: var(--ok-tx); }
html[data-theme="dark"] .cerfa-ca-input[readonly] { background: rgba(255,255,255,.04); color: var(--text); }
/* Bloc versement liberatoire : le texte indigo #4338CA devenait illisible sur fond violet sombre. */
html[data-theme="dark"] .cerfa-vl-row,
html[data-theme="dark"] .cerfa-vl-hint { color: var(--vi-tx); }
html[data-theme="dark"] .sii-paid-yes { background: var(--ok-bg); color: var(--ok-tx); border-color: var(--ok-bd); }
html[data-theme="dark"] .sii-paid-no  { background: var(--wn-bg); color: var(--wn-tx); }
html[data-theme="dark"] #ir-year-sel { background: var(--dk-surf); color: var(--text); border-color: var(--border); }
html[data-theme="dark"] .ir-auto-highlight { background: var(--vi-bg); }
html[data-theme="dark"] .ir-vfl-banner { background: var(--ok-bg); color: var(--ok-tx); }
html[data-theme="dark"] .ir-mode-btn { background: var(--dk-surf); color: var(--text); }
html[data-theme="dark"] .ir-result-main { background: rgba(167,139,250,.08); }
html[data-theme="dark"] .ir-bar-active td { background: rgba(255,255,255,.04); }
html[data-theme="dark"] .ir-sum-ok   { background: var(--ok-bg); color: var(--ok-tx); }
html[data-theme="dark"] .ir-sum-warn { background: var(--wn-bg); color: var(--wn-tx); }
html[data-theme="dark"] .dash-alert-warning { background: var(--wn-bg); border-color: var(--wn-bd); color: var(--wn-tx); }

/* ---- ZONE 4 · RÉGLAGES / ABONNEMENT ------------------------------- */
html[data-theme="dark"] .set-card-danger { background: var(--dk-surf); border-color: var(--dg-bd); }
html[data-theme="dark"] .set-card .cdd-trigger,
html[data-theme="dark"] .set-card .cdd-trigger:hover,
html[data-theme="dark"] .set-card .cdd-trigger[aria-expanded="true"],
html[data-theme="dark"] .set-card .cdd-menu { background: var(--dk-surf); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .set-card .cdd-option:hover,
html[data-theme="dark"] .set-card .cdd-option.selected { background: var(--vi-bg); color: var(--vi-tx); }
html[data-theme="dark"] .fisc-tva-option.selected { background: var(--vi-bg); border-color: var(--vi-bd); }
html[data-theme="dark"] .sched-pill,
html[data-theme="dark"] .sched-pill:hover { background: var(--dk-surf2); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .sched-pill input:checked + *,
html[data-theme="dark"] .sched-pill.checked { background: var(--vi-bg); }
html[data-theme="dark"] .csm-trigger-card,
html[data-theme="dark"] .csm-trigger-card:hover,
html[data-theme="dark"] .csm-box { background: var(--dk-surf); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .onboarding-hero-card,
html[data-theme="dark"] .onboarding-hero-card:hover,
html[data-theme="dark"] .onboarding-hero-card.done { background: var(--dk-surf); border-color: var(--border); }
html[data-theme="dark"] .onboarding-done-banner { background: var(--vi-bg); border-color: var(--vi-bd); }
html[data-theme="dark"] .upgrade-modal,
html[data-theme="dark"] .upgrade-plan { background: var(--dk-surf); border-color: var(--border); }
html[data-theme="dark"] .upgrade-plan-one { background: linear-gradient(160deg, rgba(251,191,36,.10), rgba(167,139,250,.06)); border-color: var(--wn-bd); }
html[data-theme="dark"] .upgrade-modal-icon { background: var(--vi-bg); }
html[data-theme="dark"] .set-abo-plan-row-one { background: var(--wn-bg); }
html[data-theme="dark"] .set-session-badge { background: var(--ok-bg); color: var(--ok-tx); }
html[data-theme="dark"] .abo-toggle-btn.active { background: rgba(255,255,255,.12); color: var(--text); }
html[data-theme="dark"] .badge-gold-top,
html[data-theme="dark"] .abo-plan-badge-top.badge-gold { background: var(--wn-bg); color: var(--wn-tx); }
html[data-theme="dark"] .pill-muted { background: rgba(255,255,255,.07); color: var(--text-muted); }
html[data-theme="dark"] .pill-gold  { background: var(--wn-bg); color: var(--wn-tx); }
html[data-theme="dark"] .cmp-ok { background: var(--vi-bg); color: var(--vi-tx); }
html[data-theme="dark"] .cmp-no { background: var(--dg-bg); color: var(--dg-tx); }
html[data-theme="dark"] .abo-plan-btn.btn-free,
html[data-theme="dark"] .btn-v-free { background: rgba(255,255,255,.08); color: var(--text); }
html[data-theme="dark"] .plan-col.starter { background: rgba(255,255,255,.04); }

/* ---- ZONE 5 · WIZARD FACTURE -------------------------------------- */
html[data-theme="dark"] .wz-form-panel { background: rgba(255,255,255,.03); }
/* Mobile : le panneau éditeur porte le fond (anti « bloc gris »), il doit suivre le thème sombre. */
html[data-theme="dark"] #view-invoices .inv-panel[data-panel="editor"] { background: var(--dk-surf2, #12121B); }
html[data-theme="dark"] .wz-section { background: var(--dk-surf); border-color: var(--border); }
html[data-theme="dark"] .wz-input { background: var(--dk-surf2); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .wz-type-pill { background: var(--dk-surf2); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .wz-type-pill.active { background: var(--vi-bg); color: var(--vi-tx); border-color: var(--vi-bd); }
html[data-theme="dark"] .wz-iban-card { background: rgba(255,255,255,.03); border-color: var(--border); }
html[data-theme="dark"] .wz-iban-card.selected { background: var(--vi-bg); border-color: var(--vi-bd); }
html[data-theme="dark"] .wz-step:hover,
html[data-theme="dark"] .wz-accordion-head,
html[data-theme="dark"] .wz-accordion-body { background: rgba(255,255,255,.03); }
html[data-theme="dark"] .wz-etiq-opt { background: var(--dk-surf2); border-color: var(--border); }
html[data-theme="dark"] .wz-etiq-opt.on,
html[data-theme="dark"] .wz-etiq-opt.partial { background: var(--vi-bg); color: var(--vi-tx); }
html[data-theme="dark"] .wz-section-link:hover,
html[data-theme="dark"] .wz-link-btn:hover,
html[data-theme="dark"] .wz-add-article-btn:hover { background: var(--vi-bg); color: var(--vi-tx); }
html[data-theme="dark"] .wz-success-check { background: var(--ok-bg); color: var(--ok-tx); }

/* ---- ZONE 6 · DOSSIER / FICHE CLIENT + RÉCURRENTES ---------------- */
html[data-theme="dark"] .cd-badge-paid    { background: var(--ok-bg); color: var(--ok-tx); }
html[data-theme="dark"] .cd-badge-sent    { background: var(--inf-bg); color: var(--inf-tx); }
html[data-theme="dark"] .cd-badge-overdue { background: var(--dg-bg); color: var(--dg-tx); }
html[data-theme="dark"] .cd-badge-draft   { background: rgba(255,255,255,.07); color: var(--text-muted); }
html[data-theme="dark"] .clients-seg-btn.active { background: var(--vi-bg); color: var(--vi-tx); }
html[data-theme="dark"] .clients-seg-btn:hover { background: rgba(255,255,255,.06); }
html[data-theme="dark"] .clients-sel-bar { background: var(--dk-surf); border-color: var(--border); }
html[data-theme="dark"] .clf-tab-bar,
html[data-theme="dark"] .clf-search-input,
html[data-theme="dark"] .clf-inv-list-table,
html[data-theme="dark"] .clf-export-menu,
html[data-theme="dark"] .clf-sort-chip,
html[data-theme="dark"] .clf-filter-date,
html[data-theme="dark"] .clf-filter-preset,
html[data-theme="dark"] .clf-btn-mini,
html[data-theme="dark"] .rec-card,
html[data-theme="dark"] .rec-modal-box,
html[data-theme="dark"] .rec-modal-input,
html[data-theme="dark"] .rec-search-input,
html[data-theme="dark"] .clf-rec-card { background: var(--dk-surf); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .rec-item-card { background: rgba(255,255,255,.03); }
html[data-theme="dark"] .clf-rec-card-error { background: var(--dk-surf); border-color: var(--dg-bd); }
html[data-theme="dark"] .clf-header,
html[data-theme="dark"] .clf-inv-row.clf-row:hover { background: rgba(255,255,255,.04); }
html[data-theme="dark"] .clf-inv-row.clf-row.selected,
html[data-theme="dark"] .clf-inv-row.clf-row.selected:hover,
html[data-theme="dark"] .clf-sortable:hover,
html[data-theme="dark"] .clf-sortable.active,
html[data-theme="dark"] .clf-export-menu-item:hover { background: var(--vi-bg); }
html[data-theme="dark"] .clf-inv-status.paid,    html[data-theme="dark"] .clf-rec-status.active { background: var(--ok-bg); color: var(--ok-tx); }
html[data-theme="dark"] .clf-inv-status.pending, html[data-theme="dark"] .clf-rec-status.paused { background: var(--wn-bg); color: var(--wn-tx); }
html[data-theme="dark"] .clf-inv-status.draft,   html[data-theme="dark"] .clf-rec-status.ended  { background: rgba(255,255,255,.07); color: var(--text-muted); }
html[data-theme="dark"] .rec-status-active       { background: var(--ok-bg); color: var(--ok-tx); }
html[data-theme="dark"] .rec-status-paused       { background: var(--wn-bg); color: var(--wn-tx); }
html[data-theme="dark"] .rec-status-ended        { background: rgba(255,255,255,.07); color: var(--text-muted); }
html[data-theme="dark"] .rec-status-blocked_quota{ background: var(--dg-bg); color: var(--dg-tx); }
html[data-theme="dark"] .rec-group-header { background: var(--dk-surf); }

/* ---- ZONE 7 · ÉDITEUR / APERÇU FACTURE ---------------------------- */
html[data-theme="dark"] .preview-panel { background: #0E0E16; }
html[data-theme="dark"] .inv-header,
html[data-theme="dark"] .inv-row:hover,
html[data-theme="dark"] .inv-object-line,
html[data-theme="dark"] .item-row .icol-ttc { background: rgba(255,255,255,.03); }
/* Bureau en sombre : le separateur d'article vaut #E2E8F0 (clair) depuis le cadre unique
   (option A) -> trop dur sur fond fonce. Hors media query pour couvrir aussi le desktop. */
html[data-theme="dark"] .item-row { border-bottom-color: rgba(255, 255, 255, .14); }
/* Le filet interne du TOTAL TTC gardait sa valeur CLAIRE (#EEF1F5) en sombre : il ressortait plus
   que le separateur d'article (.14) -> hierarchie inversee. Il doit rester le plus discret. */
/* MOBILE UNIQUEMENT : en <=768px .icol-ttc est une ligne pleine largeur avec un simple filet
   HAUT. Sur bureau c'est une PASTILLE entierement bordee -> eclaircir son border-top seul
   rendrait son cadre incoherent (haut plus clair que les trois autres cotes).
   #view-invoices est obligatoire : la regle de mobile.css porte un identifiant, elle bat
   sinon toute regle de theme. */
@media (max-width: 768px) {
  html[data-theme="dark"] #view-invoices .item-row .icol-ttc { border-top-color: rgba(255, 255, 255, .07); }
}
html[data-theme="dark"] .inv-badge-paid { background: var(--ok-bg); color: var(--ok-tx); }
html[data-theme="dark"] .unit-combo-input { background: var(--dk-surf2); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .bank-account-card.is-default { background: rgba(167,139,250,.06); }
html[data-theme="dark"] .ba-checkbox-row { background: rgba(255,255,255,.03); }
html[data-theme="dark"] .ba-count-badge { background: rgba(255,255,255,.07); color: var(--text-muted); }
html[data-theme="dark"] .cat-form-section { background: rgba(255,255,255,.03); }
html[data-theme="dark"] .cat-empty { background: rgba(255,255,255,.02); }
html[data-theme="dark"] .cat-quota-badge { background: rgba(255,255,255,.07); color: var(--text-muted); }
html[data-theme="dark"] .cat-quota-badge.warning { background: var(--wn-bg); color: var(--wn-tx); }
html[data-theme="dark"] .cat-quota-badge.danger  { background: var(--dg-bg); color: var(--dg-tx); }
html[data-theme="dark"] .siret-badge { background: rgba(255,255,255,.07); color: var(--text-muted); }
html[data-theme="dark"] .siret-badge--ok    { background: var(--ok-bg); color: var(--ok-tx); }
html[data-theme="dark"] .siret-badge--error { background: var(--dg-bg); color: var(--dg-tx); }
html[data-theme="dark"] .pl-modal-box { background: var(--dk-surf); border-color: var(--border); }
html[data-theme="dark"] .pl-modal-url-input { background: var(--dk-surf2); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .pl-modal-reused { background: var(--wn-bg); color: var(--wn-tx); }
html[data-theme="dark"] .pl-modal-close:hover, html[data-theme="dark"] .pl-modal-close-btn:hover { background: rgba(255,255,255,.06); }
html[data-theme="dark"] input.siret-invalid, html[data-theme="dark"] input.email-invalid { background: var(--dg-bg) !important; }
html[data-theme="dark"] input.siret-valid { background: var(--vi-bg) !important; }

/* ---- ZONE 8 · GLOBAUX / DIVERS ------------------------------------ */
html[data-theme="dark"] .snav-tab.active { background: rgba(255,255,255,.06); color: var(--text); }
html[data-theme="dark"] .alert-danger  { background: var(--dg-bg); border-color: var(--dg-bd); color: var(--dg-tx); }
html[data-theme="dark"] .alert-warning { background: var(--wn-bg); border-color: var(--wn-bd); color: var(--wn-tx); }
html[data-theme="dark"] .coming-soon-icon,
html[data-theme="dark"] .coming-soon-badge { background: var(--vi-bg); color: var(--vi-tx); }
html[data-theme="dark"] .cp-regime-option:hover { background: rgba(255,255,255,.04); }
html[data-theme="dark"] .cp-regime-option.active { background: var(--vi-bg); border-color: var(--vi-bd); }
html[data-theme="dark"] .dpm-pill { background: var(--vi-bg); color: var(--vi-tx); }
html[data-theme="dark"] .dpm-card,
html[data-theme="dark"] .dpm-card:hover { background: var(--vi-bg); }
html[data-theme="dark"] .badge-saved     { background: var(--ok-bg); color: var(--ok-tx); }
html[data-theme="dark"] .badge-validated  { background: var(--inf-bg); color: var(--inf-tx); }
html[data-theme="dark"] .stash-chip { background: var(--dk-surf2); border-color: var(--border); color: var(--text); }

/* Chat « Fina » */
html[data-theme="dark"] .chat-head-av { background: var(--vi-bg); color: var(--vi-tx); }
html[data-theme="dark"] .chat-suggestion,
html[data-theme="dark"] .chat-msg.assistant,
html[data-theme="dark"] .chat-foot { background: var(--dk-surf2); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .chat-close:hover, html[data-theme="dark"] .chat-clear:hover, html[data-theme="dark"] .chat-expand:hover { background: rgba(255,255,255,.08); }
html[data-theme="dark"] .chat-input-row { background: var(--dk-surf2); }
html[data-theme="dark"] .chat-input-row:focus-within { background: var(--dk-surf3); }

/* Modales / overlays divers */
html[data-theme="dark"] .goals-modal,
html[data-theme="dark"] .cmdk-modal,
html[data-theme="dark"] .notif-panel { background: var(--dk-surf); border-color: var(--border); }
html[data-theme="dark"] .goals-field-input-wrap:focus-within { background: var(--dk-surf2); }
html[data-theme="dark"] .cmdk-result.focused .cmdk-result-icon,
html[data-theme="dark"] .notif-item-icon { background: var(--vi-bg); color: var(--vi-tx); }
html[data-theme="dark"] .share-modal-close:hover { background: rgba(255,255,255,.06); }

/* ---- ZONE MOBILE (<=768) : la liste factures + menus fuient tous --- */
@media (max-width: 768px) {
  html[data-theme="dark"] #view-invoices .inv-tab-bar,
  html[data-theme="dark"] #view-invoices .inv-panel[data-panel="list"] .invlist-kpis,
  html[data-theme="dark"] #view-invoices .inv-panel[data-panel="list"] .invlist-tablecard,
  html[data-theme="dark"] #view-invoices .il-list > .il-row-wrap,
  html[data-theme="dark"] #view-invoices .il-row,
  html[data-theme="dark"] #view-invoices .inv-panel[data-panel="avoirs"] .invlist-tablecard { background: var(--dk-surf); border-color: var(--border); }
  html[data-theme="dark"] #view-invoices .il-row-wrap.il-row-late .il-row { background: rgba(239,68,68,.10); }
  html[data-theme="dark"] #view-invoices .il-row-wrap.il-row-paid .il-row { background: rgba(52,211,153,.07); }
  html[data-theme="dark"] #view-invoices .inv-panel[data-panel="avoirs"] .invlist-tablecard tr { background: transparent; }
  /* Refonte mobile Factures (2026-07-24) : tuiles KPI = surface sombre sur fond page.
     Le bandeau (strip) redevient transparent pour que les tuiles ressortent. */
  html[data-theme="dark"] #view-invoices .inv-panel[data-panel="list"] .invlist-kpis { background: transparent; }
  html[data-theme="dark"] #view-invoices .inv-panel[data-panel="list"] .invlist-kpi {
    background: var(--dk-surf) !important; border-color: var(--border) !important; box-shadow: none !important;
  }
  html[data-theme="dark"] .il-selbtn, html[data-theme="dark"] .il-selbar,
  html[data-theme="dark"] .il-selbar-x { background: var(--dk-surf); border-color: var(--border); color: var(--text); }
  html[data-theme="dark"] .il-selbar-all, html[data-theme="dark"] .il-selbar-btn { background: var(--vi-bg); color: var(--vi-tx); }
  html[data-theme="dark"] .il-check { background: var(--dk-surf2); border-color: var(--border); }
  html[data-theme="dark"] .il-row-wrap.sel .il-row { background: var(--vi-bg); }
  html[data-theme="dark"] .ilf-pill { background: var(--dk-surf2); border-color: var(--border); color: var(--text); }
  html[data-theme="dark"] .ilf-pill.on { background: var(--vi-bg); color: var(--vi-tx); }
  html[data-theme="dark"] .ilf-sheet, html[data-theme="dark"] .ilf-opt,
  html[data-theme="dark"] .ilf-input, html[data-theme="dark"] .ilf-eur, html[data-theme="dark"] .ilf-date,
  html[data-theme="dark"] .ilf-clients-search,
  html[data-theme="dark"] .ilf-etiq-editbox, html[data-theme="dark"] .ilf-btn-ghost { background: var(--dk-surf); border-color: var(--border); color: var(--text); }
  html[data-theme="dark"] .ilf-input:focus, html[data-theme="dark"] .ilf-clients-search:focus { background: var(--dk-surf2); }
  html[data-theme="dark"] .ilf-cl-av { background: var(--vi-bg); color: var(--vi-tx); }
  html[data-theme="dark"] #view-dashboard .dash-period-menu { background: var(--dk-surf); border-color: var(--border); }
  html[data-theme="dark"] #view-dashboard .dash-period-opt:hover { background: rgba(255,255,255,.05); }
  html[data-theme="dark"] #view-dashboard .dash-period-opt.on { background: var(--vi-bg); color: var(--vi-tx); }
}

/* =====================================================================
   MODE SOMBRE — FONDS CLAIRS *INLINE* (générés dans app.js)
   L'audit CSS ne les voyait pas : ce sont des style="background:#XXXXXX"
   posés en dur dans les templates JS -> priorité maximale, donc on les
   neutralise par sélecteur d'attribut + !important (ciblé sur "background:"
   pour ne PAS toucher les bordures/couleurs de texte du même hex). Ne
   s'applique qu'en dark. Regroupé par famille sémantique.
   NB : si un jour on peut, mieux vaut passer ces inline sur var(--white)
   dans app.js (source unique) — ceci est le filet de sécurité centralisé.
   ===================================================================== */
/* Surfaces (blanc / gris clairs) -> carte sombre */
html[data-theme="dark"] [style*="background:#fff" i],
html[data-theme="dark"] [style*="background:#ffffff" i] { background: var(--dk-surf) !important; }
html[data-theme="dark"] [style*="background:#f8fafc" i],
html[data-theme="dark"] [style*="background: #f5f5f5" i],
html[data-theme="dark"] [style*="background:#f5f5f5" i],
html[data-theme="dark"] [style*="background:#f9f9f9" i],
html[data-theme="dark"] [style*="background: #f0f0f0" i],
html[data-theme="dark"] [style*="background:#f0f0f0" i],
html[data-theme="dark"] [style*="background:#f1f5f9" i],
html[data-theme="dark"] [style*="background:#e2e8f0" i],
html[data-theme="dark"] [style*="background:#f1efe8" i] { background: var(--dk-surf2) !important; border-color: var(--border) !important; }
/* Teintes violettes -> accent doux */
html[data-theme="dark"] [style*="background:#f5f3ff" i],
html[data-theme="dark"] [style*="background:#faf5ff" i],
html[data-theme="dark"] [style*="background:#eeedfe" i],
html[data-theme="dark"] [style*="background:#ede9fe" i],
html[data-theme="dark"] [style*="background:#eef2ff" i] { background: var(--vi-bg) !important; }
/* Rouge / danger */
html[data-theme="dark"] [style*="background:#fef2f2" i],
html[data-theme="dark"] [style*="background:#fff5f5" i],
html[data-theme="dark"] [style*="background:#fcebeb" i] { background: var(--dg-bg) !important; border-color: var(--dg-bd) !important; }
/* Vert / ok */
html[data-theme="dark"] [style*="background:#f0fdf4" i],
html[data-theme="dark"] [style*="background:#f0fff4" i],
html[data-theme="dark"] [style*="background:#d1fae5" i],
html[data-theme="dark"] [style*="background:#e1f5ee" i] { background: var(--ok-bg) !important; }
/* Ambre / warn */
html[data-theme="dark"] [style*="background:#faeeda" i] { background: var(--wn-bg) !important; }
/* Bleu / info */
html[data-theme="dark"] [style*="background:#e6f1fb" i],
html[data-theme="dark"] [style*="background:#eff6ff" i] { background: var(--inf-bg) !important; }

/* TEXTES inline foncés -> clairs (sinon illisibles sur carte sombre). Ciblé sur
   "color:" pour ne pas toucher les background/border du même hex. */
html[data-theme="dark"] [style*="color:#0f172a" i],
html[data-theme="dark"] [style*="color:#1e293b" i],
html[data-theme="dark"] [style*="color:#374151" i],
html[data-theme="dark"] [style*="color:#475569" i],
html[data-theme="dark"] [style*="color:#444441" i] { color: var(--text) !important; }
html[data-theme="dark"] [style*="color:#64748b" i],
html[data-theme="dark"] [style*="color:#6b7280" i],
html[data-theme="dark"] [style*="color:#94a3b8" i],
html[data-theme="dark"] [style*="color:#9ca3af" i],
html[data-theme="dark"] [style*="color:#cbd5e1" i] { color: var(--text-muted) !important; }
html[data-theme="dark"] [style*="color:#7c3aed" i],
html[data-theme="dark"] [style*="color:#6d28d9" i],
html[data-theme="dark"] [style*="color:#5b21b6" i],
html[data-theme="dark"] [style*="color:#4c1d95" i],
html[data-theme="dark"] [style*="color:#3c3489" i],
html[data-theme="dark"] [style*="color:#4f46e5" i] { color: var(--vi-tx) !important; }
html[data-theme="dark"] [style*="color:#dc2626" i],
html[data-theme="dark"] [style*="color:#991b1b" i],
html[data-theme="dark"] [style*="color:#a32d2d" i] { color: var(--dg-tx) !important; }
html[data-theme="dark"] [style*="color:#065f46" i],
html[data-theme="dark"] [style*="color:#085041" i],
html[data-theme="dark"] [style*="color:#16a34a" i] { color: var(--ok-tx) !important; }
html[data-theme="dark"] [style*="color:#854f0b" i] { color: var(--wn-tx) !important; }
html[data-theme="dark"] [style*="color:#185fa5" i],
html[data-theme="dark"] [style*="color:#1e40af" i] { color: var(--inf-tx) !important; }

/* Classes nommées résiduelles de Réglages (fonds clairs, spéc. ID d'origine -> !important) */
html[data-theme="dark"] .set-auto-field { background: var(--dk-surf2) !important; color: var(--text); border-color: var(--border); }
html[data-theme="dark"] .siret-error-msg   { background: var(--dg-bg) !important; color: var(--dg-tx); }
html[data-theme="dark"] .siret-success-msg { background: var(--vi-bg) !important; color: var(--vi-tx); }
html[data-theme="dark"] .btn-add-bank-account { background: var(--dk-surf2) !important; color: var(--text); border-color: var(--border); }
html[data-theme="dark"] .plan-cta-btn { background: rgba(255,255,255,.08) !important; color: var(--text); }
html[data-theme="dark"] .plan-col.starter { background: rgba(255,255,255,.04) !important; }
html[data-theme="dark"] .set-toggle input:not(:checked) + .set-toggle-slider { background: rgba(255,255,255,.18); }

/* =====================================================================
   MODE SOMBRE — MODULES À CSS DÉDIÉ (jamais theme-aware d'origine).
   caisse.css / onboarding-rentabilite.css / devis-chiffrage.css n'avaient
   AUCUNE règle dark. theme.css charge APRÈS eux -> ces overrides gagnent.
   ===================================================================== */

/* ---- Module CAISSE (#view-caisse) --------------------------------- */
html[data-theme="dark"] #view-caisse .cs-header,
html[data-theme="dark"] #view-caisse .cs-subnav-tab,
html[data-theme="dark"] #view-caisse .cs-welcome-card,
html[data-theme="dark"] #view-caisse .cs-btn.cs-btn-secondary { background: var(--dk-surf); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] #view-caisse .cs-welcome-icon,
html[data-theme="dark"] #view-caisse .cs-step-num { background: var(--vi-bg); color: var(--vi-tx); }
html[data-theme="dark"] #view-caisse .cs-btn-toggle.on,
html[data-theme="dark"] #view-caisse .cs-badge-refund,
html[data-theme="dark"] #view-caisse .cs-banner-demo { background: var(--wn-bg); color: var(--wn-tx); }
html[data-theme="dark"] #view-caisse .cs-step.done .cs-step-num,
html[data-theme="dark"] #view-caisse .cs-ticket-done-icon,
html[data-theme="dark"] #view-caisse .cs-verify-ok { background: var(--ok-bg); color: var(--ok-tx); }
html[data-theme="dark"] #view-caisse .cs-cancel-form,
html[data-theme="dark"] #view-caisse .cs-banner-offline { background: var(--dg-bg); color: var(--dg-tx); border-color: var(--dg-bd); }
html[data-theme="dark"] #view-caisse .cs-banner-queue { background: var(--inf-bg); color: var(--inf-tx); }

/* ---- Module PROFIL RENTABILITÉ (#view-rentabilite) ---------------- */
html[data-theme="dark"] #view-rentabilite .rent-main-header,
html[data-theme="dark"] #view-rentabilite .rent-reset-btn,
html[data-theme="dark"] #view-rentabilite .rent-stepper,
html[data-theme="dark"] #view-rentabilite .rent-radio-card,
html[data-theme="dark"] #view-rentabilite .rent-siret-icon,
html[data-theme="dark"] #view-rentabilite .rent-back-btn,
html[data-theme="dark"] #view-rentabilite .rent-submetier-card,
html[data-theme="dark"] #view-rentabilite .rent-charges-list,
html[data-theme="dark"] #view-rentabilite .rent-charge-check,
html[data-theme="dark"] #view-rentabilite .rent-charge-amount,
html[data-theme="dark"] #view-rentabilite .rent-field-block,
html[data-theme="dark"] #view-rentabilite .rent-calc-table,
html[data-theme="dark"] #view-rentabilite .rent-btn-outline,
html[data-theme="dark"] #settings-rentabilite .rent-set-summary-card { background: var(--dk-surf); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] #view-rentabilite .rent-big-input { background: var(--dk-surf2); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] #view-rentabilite .rent-info-card { background: var(--inf-bg); border-color: var(--inf-bd); color: var(--inf-tx); }
html[data-theme="dark"] #view-rentabilite .rent-warning { background: var(--wn-bg); color: var(--wn-tx); }
html[data-theme="dark"] #view-rentabilite .rent-action-card,
html[data-theme="dark"] #view-rentabilite .rent-calc-row.subtotal { background: var(--dk-surf2); }

/* ---- Module DEVIS & CHIFFRAGE (#view-devis + .dv-cs-*) ------------- */
html[data-theme="dark"] #view-devis .dv-header,
html[data-theme="dark"] #view-devis .dv-profile-recap-icon,
html[data-theme="dark"] #view-devis .dv-info-card,
html[data-theme="dark"] #view-devis .dv-lines-section,
html[data-theme="dark"] #view-devis .dv-add-line-btn,
html[data-theme="dark"] #view-devis .dv-totals-card,
html[data-theme="dark"] #view-devis .dv-action-bar,
html[data-theme="dark"] #view-devis .dv-btn-outline,
html[data-theme="dark"] #view-devis .dv-btn-danger-outline,
html[data-theme="dark"] #view-devis .dv-facture-link,
html[data-theme="dark"] #view-devis .dv-conditions-card,
html[data-theme="dark"] #view-devis .dv-marge-preset,
html[data-theme="dark"] #view-devis .dv-filter-pill,
html[data-theme="dark"] #view-devis .dv-list-card,
html[data-theme="dark"] #view-devis .dv-ai-result,
html[data-theme="dark"] #view-devis .dv-modal-box,
html[data-theme="dark"] .dv-cs-trigger,
html[data-theme="dark"] .dv-cs-menu { background: var(--dk-surf); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] #view-devis .dv-field select,
html[data-theme="dark"] #view-devis .dv-line-cell select,
html[data-theme="dark"] #view-devis .dv-conditions-field input,
html[data-theme="dark"] #view-devis .dv-modal-input,
html[data-theme="dark"] #view-devis input[type="date"].dv-modal-input { background: var(--dk-surf2); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] #view-devis .dv-status-badge.envoye { background: var(--inf-bg); color: var(--inf-tx); }
html[data-theme="dark"] #view-devis .dv-marge-badge.tres_bien { background: var(--ok-bg); color: var(--ok-tx); }
html[data-theme="dark"] #view-devis .dv-renta-card.tres_bien .dv-renta-marge { color: var(--ok-tx); }

/* RETOKENISATION des palettes propres à chaque module (couvre TOUTES les
   classes basées sur ces var()). --*-primary reste indigo (boutons pleins
   texte blanc). Les blocs explicites ci-dessus gèrent les hex codés en dur. */
html[data-theme="dark"] #view-caisse {
  --cs-white: #16161F; --cs-bg: #12121B; --cs-border: rgba(255,255,255,.10);
  --cs-text: #EDEDF5; --cs-text-muted: #9A9AB0;
  --cs-primary-light: rgba(167,139,250,.16); --cs-primary-dark: #C4B5FD;
  --cs-danger-light: rgba(248,113,113,.13);
}
html[data-theme="dark"] #view-rentabilite,
html[data-theme="dark"] #settings-rentabilite {
  --rent-white: #16161F; --rent-bg: #12121B;
  --rent-border: rgba(255,255,255,.10); --rent-border-light: rgba(255,255,255,.06);
  --rent-text: #EDEDF5; --rent-text-muted: #9A9AB0;
  --rent-primary-light: rgba(167,139,250,.16); --rent-primary-dark: #C4B5FD;
}
html[data-theme="dark"] #view-devis {
  --dv-white: #16161F; --dv-bg: #12121B;
  --dv-border: rgba(255,255,255,.10); --dv-border-light: rgba(255,255,255,.06);
  --dv-text: #EDEDF5; --dv-text-muted: #9A9AB0;
  --dv-primary-light: rgba(167,139,250,.16); --dv-primary-dark: #C4B5FD;
  --dv-success-light: rgba(52,211,153,.13); --dv-success-dark: #6EE7B7;
  --dv-danger-light: rgba(248,113,113,.13); --dv-warn-light: rgba(251,191,36,.14);
  --dv-orange-light: rgba(251,146,60,.15);
}

/* Cartes à DÉGRADÉ clair (échappent au token) -> dégradés sombres sémantiques */
html[data-theme="dark"] #view-rentabilite .rent-coach-card {
  background: linear-gradient(135deg, rgba(251,191,36,.10), var(--dk-surf)); border-color: var(--wn-bd); color: var(--text);
}
html[data-theme="dark"] #view-devis .dv-renta-card.excellent,
html[data-theme="dark"] #view-devis .dv-renta-card.tres_bien,
html[data-theme="dark"] #view-devis .dv-action-bar.accepte {
  background: linear-gradient(135deg, rgba(52,211,153,.14), var(--dk-surf)); border-color: var(--ok-bd);
}
html[data-theme="dark"] #view-devis .dv-renta-card.ok {
  background: linear-gradient(135deg, rgba(251,191,36,.14), var(--dk-surf)); border-color: var(--wn-bd);
}
html[data-theme="dark"] #view-devis .dv-renta-card.tout_juste {
  background: linear-gradient(135deg, rgba(251,146,60,.14), var(--dk-surf)); border-color: rgba(251,146,60,.32);
}
html[data-theme="dark"] #view-devis .dv-renta-card.sous_objectif,
html[data-theme="dark"] #view-devis .dv-action-bar.refuse {
  background: linear-gradient(135deg, rgba(248,113,113,.14), var(--dk-surf)); border-color: var(--dg-bd);
}
html[data-theme="dark"] #view-devis .dv-action-bar.transforme {
  background: linear-gradient(135deg, rgba(167,139,250,.14), var(--dk-surf)); border-color: var(--vi-bd);
}
/* =====================================================================
   REFONTE FACTURES 2026-07-22 — variantes SOMBRES de la rangée KPI
   (pastilles d'icône, anneau/donut, légende, avatars, reste dû).
   ===================================================================== */
html[data-theme="dark"] #view-invoices .invlist-kpi-hero,
html[data-theme="dark"] #view-invoices .invlist-kpi-green { background: var(--dk-surf) !important; border-color: var(--border) !important; }
html[data-theme="dark"] #view-invoices .invlist-kpi-hero .invlist-kpi-val,
html[data-theme="dark"] #view-invoices .invlist-kpi-green .invlist-kpi-val { color: var(--text) !important; }
html[data-theme="dark"] #view-invoices .invlist-kpi-hero .invlist-kpi-label,
html[data-theme="dark"] #view-invoices .invlist-kpi-green .invlist-kpi-label { color: var(--text-muted) !important; }
html[data-theme="dark"] .ilk-ic-v { background: rgba(167,139,250,.16); color: #A78BFA; }
html[data-theme="dark"] .ilk-ic-g { background: rgba(52,211,153,.14);  color: #5CE0A8; }
html[data-theme="dark"] .ilk-ic-b { background: rgba(96,165,250,.14);  color: #93C5FD; }
html[data-theme="dark"] .ilk-donut .ilk-mid b,
html[data-theme="dark"] .ilk-objbig,
html[data-theme="dark"] .ilk-lgv .ilk-n { color: var(--text); }
html[data-theme="dark"] .ilk-donut .ilk-mid span,
html[data-theme="dark"] .ilk-objbig small,
html[data-theme="dark"] .ilk-lgv .ilk-nm { color: var(--text-muted); }
html[data-theme="dark"] .ilk-lgv .ilk-pc,
html[data-theme="dark"] .ilk-objfoot,
html[data-theme="dark"] .il-reste { color: var(--text-muted); }
html[data-theme="dark"] .ilk-objmod,
html[data-theme="dark"] .ilk-objpct { color: var(--vi-tx); }
html[data-theme="dark"] .ilk-objbar { background: rgba(255,255,255,.10); }
/* Onglets de statut */
html[data-theme="dark"] .il-stab { background: var(--dk-surf); border-color: var(--border); color: var(--text-muted); }
html[data-theme="dark"] .il-stab:hover { border-color: var(--vi-bd); color: var(--text); }
html[data-theme="dark"] .il-stab.on { background: #6D5EF6; border-color: #6D5EF6; color: #fff; }
html[data-theme="dark"] .il-stab-c { background: rgba(255,255,255,.08); color: var(--text-muted); }
html[data-theme="dark"] .il-stab.on .il-stab-c { background: rgba(255,255,255,.25); color: #fff; }

/* Toasts clairs -> sombres (cs-toast est déjà sombre) */
html[data-theme="dark"] #view-devis .dv-toast,
html[data-theme="dark"] #view-rentabilite .rent-toast { background: #0F172A; color: #fff; }

/* =====================================================================
   MODE SOMBRE — MOBILE (<=768px) : mobile.css code les COULEURS DE TEXTE
   en dur (#0F172A, #1E293B…) et des fonds clairs, à l'intérieur de ses
   @media. Mon 1er passage avait rattrapé les FONDS mais PAS les TEXTES ->
   texte foncé invisible sur fond sombre (nom client, montant, valeurs KPI…).
   Ici on force tout en dark (only) avec !important pour battre la spécificité
   des sélecteurs mobile. Le CLAIR mobile reste inchangé.
   ===================================================================== */
@media (max-width: 768px) {
  /* ---- TEXTES : foncés -> clairs / sémantiques ---- */
  html[data-theme="dark"] .m-sheet-head,
  html[data-theme="dark"] .m-sheet-row,
  html[data-theme="dark"] .m-create-label,
  html[data-theme="dark"] #view-dashboard .dash-period-opt,
  html[data-theme="dark"] #view-invoices .ilc-client,
  html[data-theme="dark"] #view-invoices .ilc-ttc,
  html[data-theme="dark"] #view-invoices .inv-panel[data-panel="list"] .invlist-kpi-val,
  html[data-theme="dark"] #view-invoices .inv-panel[data-panel="avoirs"] .invlist-table td,
  html[data-theme="dark"] .il-selbar-count,
  html[data-theme="dark"] .ilf-input,
  html[data-theme="dark"] .ilf-date,
  html[data-theme="dark"] .ilf-clients-search,
  html[data-theme="dark"] .ilf-cl-row,
  html[data-theme="dark"] .ilf-toggle-row,
  html[data-theme="dark"] #view-invoices .ilf-pill,
  html[data-theme="dark"] .ilf-opt,
  html[data-theme="dark"] .ilf-btn-ghost { color: var(--text) !important; }

  html[data-theme="dark"] .m-sheet-x,
  html[data-theme="dark"] .il-selbar-x,
  html[data-theme="dark"] .ilf-etiq-edit,
  html[data-theme="dark"] .ilf-label { color: var(--text-muted) !important; }

  html[data-theme="dark"] .m-nav-fina,
  html[data-theme="dark"] .m-sheet-row .m-sheet-ic,
  html[data-theme="dark"] .m-create-ic,
  html[data-theme="dark"] #view-dashboard .dash-hero-left .dash-title,
  html[data-theme="dark"] #view-dashboard .dash-period-opt.on,
  html[data-theme="dark"] .il-selbtn,
  html[data-theme="dark"] .il-selbar-all,
  html[data-theme="dark"] .il-selbar-btn.ghost,
  html[data-theme="dark"] #view-invoices .ilf-pill.on,
  html[data-theme="dark"] .ilf-etiq-edit.on,
  html[data-theme="dark"] .ilf-etiq-new,
  html[data-theme="dark"] .ilf-amount:focus-within .ilf-eur,
  html[data-theme="dark"] .ilf-cl-av { color: var(--vi-tx) !important; }

  /* Refonte mobile 2026-07-24 : tuiles KPI uniformes -> labels gris, valeurs claires
     (plus de label héro ambre ni de « Encaissé » vert, comme la maquette validée). */
  html[data-theme="dark"] #view-invoices .inv-panel[data-panel="list"] .invlist-kpi-hero .invlist-kpi-label,
  html[data-theme="dark"] #view-invoices .inv-panel[data-panel="list"] .invlist-kpi-green .invlist-kpi-label { color: var(--text-muted) !important; }
  html[data-theme="dark"] #view-invoices .inv-panel[data-panel="list"] .invlist-kpi-green .invlist-kpi-val { color: var(--text) !important; }
  html[data-theme="dark"] #view-invoices .inv-panel[data-panel="list"] .invlist-kpi-late,
  html[data-theme="dark"] .ilf-etiq-delete { color: var(--dg-tx) !important; }

  /* ---- FONDS : clairs -> sombres (complément, avec !important) ---- */
  html[data-theme="dark"] .m-plus-sheet,
  html[data-theme="dark"] #view-dashboard .dash-period-menu,
  html[data-theme="dark"] #view-invoices .inv-tab-bar,
  html[data-theme="dark"] #view-invoices .inv-panel[data-panel="list"] .invlist-kpis,
  html[data-theme="dark"] #view-invoices .inv-panel[data-panel="list"] .invlist-tablecard,
  html[data-theme="dark"] #view-invoices .il-list > .il-row-wrap,
  html[data-theme="dark"] #view-invoices .il-row,
  html[data-theme="dark"] #view-invoices .il-row-wrap.il-row-paid .il-row,
  html[data-theme="dark"] .il-selbar,
  html[data-theme="dark"] .il-selbar-x,
  html[data-theme="dark"] .il-selbar-btn.ghost,
  html[data-theme="dark"] #view-invoices .il-list.il-sel-mode .il-check,
  html[data-theme="dark"] .ilf-sheet,
  html[data-theme="dark"] .ilf-opt,
  html[data-theme="dark"] .ilf-etiq-edit,
  html[data-theme="dark"] .ilf-etiq-delete,
  html[data-theme="dark"] .ilf-btn-ghost,
  html[data-theme="dark"] .ilf-input,
  html[data-theme="dark"] .ilf-date,
  html[data-theme="dark"] #view-invoices .inv-panel[data-panel="avoirs"] .invlist-tablecard,
  html[data-theme="dark"] #view-invoices .wz-step-footer { background: var(--dk-surf) !important; }

  /* Separateur d'article en sombre : #E2E8F0 (valeur claire) trancherait durement sur le fond
     fonce. On garde la meme hierarchie (separateur plus marque que le filet du TOTAL TTC). */
  html[data-theme="dark"] #view-invoices #items-container .item-row { background: none; border-bottom-color: rgba(255, 255, 255, .14); }
  html[data-theme="dark"] #view-invoices #items-container .item-row:last-child { border-bottom-color: transparent; }

  html[data-theme="dark"] .m-sheet-grab,
  html[data-theme="dark"] .m-sheet-x,
  html[data-theme="dark"] .m-create-sep,
  html[data-theme="dark"] .ilf-etiq-editbox,
  html[data-theme="dark"] .ilf-etiq-createform,
  html[data-theme="dark"] .ilf-eur,
  html[data-theme="dark"] .ilf-clients-search,
  html[data-theme="dark"] .ilf-switch { background: var(--dk-surf2) !important; }

  /* Pills de filtre : fond de base sombre. mobile.css les met en #fff via
     "#view-invoices .ilf-pill" (sélecteur à ID) -> il faut l'ID + !important ici. */
  html[data-theme="dark"] #view-invoices .ilf-pill { background: #14141d !important; border: 1px solid rgba(255,255,255,.12) !important; }

  html[data-theme="dark"] .m-sheet-row .m-sheet-ic,
  html[data-theme="dark"] #view-dashboard .dash-period-opt.on,
  html[data-theme="dark"] .il-selbtn,
  html[data-theme="dark"] #view-invoices .il-list.il-sel-mode .il-row-wrap.sel .il-row,
  html[data-theme="dark"] .il-selbar-all,
  html[data-theme="dark"] #view-invoices .ilf-pill.on,
  html[data-theme="dark"] .ilf-etiq-edit.on,
  html[data-theme="dark"] .ilf-etiq-new,
  html[data-theme="dark"] .ilf-cl-av { background: var(--vi-bg) !important; }

  html[data-theme="dark"] .m-sheet-row:active,
  html[data-theme="dark"] #view-dashboard .dash-period-opt:hover { background: rgba(255,255,255,.06) !important; }
  html[data-theme="dark"] .m-create-row:active { background: var(--vi-bg) !important; }
  html[data-theme="dark"] #view-invoices .il-row-wrap.il-row-late .il-row { background: rgba(239,68,68,.10) !important; }
  html[data-theme="dark"] #view-invoices .inv-panel[data-panel="avoirs"] .invlist-table tr { background: transparent !important; }
}

/* =============================================
   REGISTRES LEGAUX (onglet URSSAF) — mode sombre
   Les fonds clairs en dur (#F8FAFC des en-tetes/total) doivent basculer.
   var(--white)/var(--border) s'adaptent deja seuls (cartes, bordures).
   ============================================= */
html[data-theme="dark"] #urssaf-registres-card .reg-table th,
html[data-theme="dark"] #urssaf-registres-card .reg-table tfoot td,
html[data-theme="dark"] #urssaf-registres-card .reg-table tfoot tr { background: var(--dk-surf2); }
html[data-theme="dark"] #urssaf-registres-card .reg-table .reg-neg { color: var(--dg-tx); }
html[data-theme="dark"] #urssaf-registres-card .reg-warn {
  background: var(--wn-bg); border-color: var(--wn-bd); color: var(--wn-tx);
}
html[data-theme="dark"] #urssaf-registres-card .reg-year { background: var(--dk-surf); color: var(--text); }
/* Onglet actif : l'indigo --primary (#4F46E5) a un contraste trop faible sur fond
   sombre -> accent violet clair --th-accent (#A78BFA), lisible (WCAG AA). */
html[data-theme="dark"] #urssaf-registres-card .reg-tab.is-active {
  color: var(--th-accent); border-bottom-color: var(--th-accent);
}
html[data-theme="dark"] .paymode-btn:hover { border-color: var(--th-accent); color: var(--th-accent); }