/* =====================================================================================================================
   mode-sombre.css — MODE SOMBRE de l’utilisateur (bascule soleil / lune du header).

   PRINCIPE (demande du dev, 23/10/2026)
   - Le mode CLAIR reste entièrement défini par le thème de l’abonné (assets/themes/<abonné>) et ses couleurs de bandeau
     (Vision Expert ▸ Mise en forme). Rien ici ne le touche : toute règle de palette est scopée html[data-bs-theme="dark"].
   - Le mode SOMBRE est une palette FIXE, la même pour tous les abonnés : elle ignore volontairement le thème et les
     couleurs de bandeau de l’abonné (ses jetons --tg-bandeau-* sont redéfinis ici, à une spécificité qui l’emporte sur
     le <style> de _BandeauTheme.cshtml).
   - C’est un simple AFFICHAGE propre à l’utilisateur : aucune donnée n’est modifiée (cf. ModeAffichageHelper).

   MÉCANIQUE
   - Le serveur pose data-bs-theme="dark" sur <html> (cookie de l’utilisateur) ; la bascule le pose sans rechargement
     (assets/js/core/teogest.mode-affichage.js).
   - Bootstrap 5.3 fait déjà basculer ses composants : le thème compilé embarque ses blocs [data-bs-theme=dark]. Ce
     fichier (1) remplace leurs teintes grises par la palette Teogest, (2) habille le CSS maison qui code ses couleurs en
     dur. Le socle lisant majoritairement les variables --bs-*, l’essentiel suit la partie 1.
   - Chargé en DERNIER dans le <head> des deux layouts (_Layout, _LayoutDashboard).

   ÉTENDRE : une surface restée claire en mode sombre se corrige ICI, par une règle préfixée html[data-bs-theme="dark"],
   en employant les jetons --tg-sombre-* ; jamais en modifiant la feuille de l’écran pour le mode clair.
   ===================================================================================================================== */


/* ─── 1. Bascule soleil / lune (rendue dans les deux modes) ─────────────────────────────────────────────────────── */

.tg-bascule-mode {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    width: 48px;
    height: 24px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 999px;
    background-color: #d1d5db;
    cursor: pointer;
    transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

    .tg-bascule-mode:hover {
        background-color: #9ca3af;
    }

    .tg-bascule-mode:focus-visible {
        outline: 0;
        box-shadow: 0 0 0 2px var(--bs-body-bg), 0 0 0 4px #9ca3af;
    }

.tg-bascule-mode__piste {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 .3rem;
    pointer-events: none;
}

.tg-bascule-mode svg {
    width: 12px;
    height: 12px;
    stroke-width: 2.5;
    transition: opacity .3s ease, transform .3s ease;
}

.tg-bascule-mode__piste .tg-bascule-mode__soleil {
    color: #ca8a04;
    opacity: .8;
}

.tg-bascule-mode__piste .tg-bascule-mode__lune {
    color: #6b7280;
    opacity: .4;
    transform: scale(.75);
}

.tg-bascule-mode__curseur {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .2), 0 2px 4px -2px rgba(0, 0, 0, .15);
    transform: translateX(0);
    transition: transform .3s ease, background-color .3s ease;
}

    .tg-bascule-mode__curseur .tg-bascule-mode__soleil {
        color: #eab308;
    }

    .tg-bascule-mode__curseur .tg-bascule-mode__lune {
        display: none;
        color: #fff;
        fill: currentColor;
    }

/* État SOMBRE : lu sur aria-checked (posé par le serveur puis par la bascule) et non sur [data-bs-theme], pour que le
   bouton reste juste même s’il est rendu dans un cadre qui n’a pas encore suivi. */
.tg-bascule-mode[aria-checked="true"] {
    border-color: #818cf8;
    background-color: #1e1b4b;
}

    .tg-bascule-mode[aria-checked="true"]:hover {
        background-color: #2e2a6b;
    }

    .tg-bascule-mode[aria-checked="true"]:focus-visible {
        box-shadow: 0 0 0 2px var(--bs-body-bg), 0 0 0 4px #818cf8;
    }

    .tg-bascule-mode[aria-checked="true"] .tg-bascule-mode__piste .tg-bascule-mode__soleil {
        color: #a5b4fc;
        opacity: .4;
        transform: scale(.75);
    }

    .tg-bascule-mode[aria-checked="true"] .tg-bascule-mode__piste .tg-bascule-mode__lune {
        opacity: 0;
    }

    .tg-bascule-mode[aria-checked="true"] .tg-bascule-mode__curseur {
        background-color: #6366f1;
        transform: translateX(24px);
    }

        .tg-bascule-mode[aria-checked="true"] .tg-bascule-mode__curseur .tg-bascule-mode__soleil {
            display: none;
        }

        .tg-bascule-mode[aria-checked="true"] .tg-bascule-mode__curseur .tg-bascule-mode__lune {
            display: inline;
        }

@media (prefers-reduced-motion: reduce) {
    .tg-bascule-mode,
    .tg-bascule-mode svg,
    .tg-bascule-mode__curseur {
        transition: none;
    }
}

/* Header du haut : à droite du sélecteur de dossier annuel. */
.tg-bascule-mode--header {
    align-self: center;
    margin-left: .75rem;
}

/* Dashboard : dernier élément de la ligne des onglets. Les zones d’actions et la barre de pilotage portent déjà la
   marge automatique qui les cale à droite : la bascule les suit. Quand aucune n’est visible (attribut `hidden` posé par
   majVisibiliteZonesRelogees, ou zone vide), c’est elle qui prend la marge pour rester au bord droit. */
.dashboard-onglets-ligne > .tg-bascule-mode--dashboard {
    align-self: center;
    margin-bottom: .25rem;
    margin-left: auto;
}

.dashboard-onglets-ligne > :is(.dbp-actions, .dashboard-barre-pilotage--ligne):not([hidden]):not(:empty) ~ .tg-bascule-mode--dashboard {
    margin-left: 0;
}


/* ─── 2. Palette sombre fixe ─────────────────────────────────────────────────────────────────────────────────────── */

html[data-bs-theme="dark"] {
    /* Jetons propres au mode sombre, à employer pour toute nouvelle surcharge. */
    --tg-sombre-fond: #131527;           /* fond de page, derrière les cartes */
    --tg-sombre-surface: #1b1e34;        /* cartes, header, navigation, modales, tiroirs, pied */
    --tg-sombre-surface-2: #232742;      /* entêtes de grille, survols, champs */
    --tg-sombre-surface-3: #2d3252;      /* survol appuyé, éléments actifs neutres */
    --tg-sombre-bordure: #363c60;
    --tg-sombre-texte: #e4e7f3;
    --tg-sombre-texte-doux: rgba(228, 231, 243, .7);
    --tg-sombre-accent: #6f7cf5;         /* teinte primaire : texte sur la surface 4,6:1, blanc dessus 3,6:1 (pastilles, boutons de cellule) */
    --tg-sombre-bouton: #5a66e6;         /* fond des boutons primaires (texte blanc ≥ 4,5:1) */
    --tg-sombre-entete-carte: #2b3263;   /* entête des cartes (le marine du mode clair, éclairci) */
    --tg-sombre-voile: rgba(19, 21, 39, .6);

    /* Bootstrap : on remplace ses gris par la palette (blocs [data-bs-theme=dark] du thème compilé). */
    --bs-body-bg: var(--tg-sombre-surface);
    --bs-body-bg-rgb: 27, 30, 52;
    --bs-body-color: var(--tg-sombre-texte);
    --bs-body-color-rgb: 228, 231, 243;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: var(--tg-sombre-texte-doux);
    --bs-secondary-color-rgb: 228, 231, 243;
    --bs-secondary-bg: var(--tg-sombre-surface-3);
    --bs-secondary-bg-rgb: 45, 50, 82;
    --bs-tertiary-color: rgba(228, 231, 243, .5);
    --bs-tertiary-bg: var(--tg-sombre-surface-2);
    --bs-tertiary-bg-rgb: 35, 39, 66;
    --bs-border-color: var(--tg-sombre-bordure);
    --bs-border-color-translucent: rgba(255, 255, 255, .12);
    --bs-heading-color: inherit;

    --bs-primary: var(--tg-sombre-accent);
    --bs-primary-rgb: 111, 124, 245;
    --bs-primary-text-emphasis: #b8bfff;
    --bs-primary-bg-subtle: #1f2452;
    --bs-primary-border-subtle: #3c4494;
    --bs-link-color: #a8b1ff;
    --bs-link-color-rgb: 168, 177, 255;
    --bs-link-hover-color: #c9ceff;
    --bs-link-hover-color-rgb: 201, 206, 255;
    --bs-main-bg-subtle: color-mix(in srgb, var(--bs-main, #ff6136) 16%, var(--tg-sombre-surface));
    --bs-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .45);
    --bs-box-shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .4);

    /* Teogest : fond de page, navigation, bandeau (la couleur de l’abonné est ignorée en sombre). */
    --tg-fond-page: var(--tg-sombre-fond);
    --tg-bandeau-fond: var(--tg-sombre-surface);
    --tg-bandeau-texte: var(--tg-sombre-texte);
    --tg-header-border: rgba(255, 255, 255, .08);
    --tg-chrome-ombre-bas: 0 8px 6px -6px rgba(0, 0, 0, .5);
    --tg-card-header-color: #fff;
    --tg-sidebar-bg: var(--tg-sombre-surface);
    --tg-sidebar-text: #b8bdd6;
    --tg-sidebar-text-hover: #fff;
    --tg-sidebar-text-strong: #dfe2f0;
    --tg-sidebar-muted: #7f86a6;
    --tg-sidebar-hover-bg: rgba(255, 255, 255, .06);
    --tg-sidebar-field-bg: var(--tg-sombre-surface-2);
    --tg-sidebar-field-border: var(--tg-sombre-bordure);
    --tg-sidebar-divider: var(--tg-sombre-bordure);

    /* Variantes « -strong » : en clair, texte coloré lisible sur BLANC ; en sombre, il faut les éclaircir. */
    --tg-success-strong: #5fd6a0;
    --tg-danger-strong: #ff7d8f;
    --tg-info-strong: #9db6ff;
    --tg-secondary-strong: #aeb3cb;
    --tg-indigo-strong: #dc93ff;
    --tg-warning-text: #ffa287;
}

/* Bootstrap colore aussi les éléments natifs (barres de défilement, champs non stylés) d’après color-scheme. */
html[data-bs-theme="dark"],
html[data-bs-theme="dark"] body {
    color-scheme: dark;
}


/* ─── 3. Composants Bootstrap recolorés au thème de l’abonné (valeurs SCSS figées à la compilation) ─────────────── */

html[data-bs-theme="dark"] .btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--tg-sombre-bouton);
    --bs-btn-border-color: var(--tg-sombre-bouton);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #6b76f0;
    --bs-btn-hover-border-color: #6b76f0;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #4c57d4;
    --bs-btn-active-border-color: #4c57d4;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--tg-sombre-bouton);
    --bs-btn-disabled-border-color: var(--tg-sombre-bouton);
    --bs-btn-focus-shadow-rgb: 90, 102, 230;
}

html[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: #a8b1ff;
    --bs-btn-border-color: var(--tg-sombre-bouton);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--tg-sombre-bouton);
    --bs-btn-hover-border-color: var(--tg-sombre-bouton);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #4c57d4;
    --bs-btn-active-border-color: #4c57d4;
    --bs-btn-disabled-color: #a8b1ff;
    --bs-btn-disabled-border-color: var(--tg-sombre-bouton);
}

/* shell.css fige le texte des boutons secondaires au marine du mode clair, illisible sur fond sombre. */
html[data-bs-theme="dark"] .btn.btn-outline-secondary {
    --bs-btn-color: var(--tg-sombre-texte);
    --bs-btn-border-color: #4a5178;
}

html[data-bs-theme="dark"] .btn-light {
    --bs-btn-color: var(--tg-sombre-texte);
    --bs-btn-bg: var(--tg-sombre-surface-2);
    --bs-btn-border-color: var(--tg-sombre-bordure);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--tg-sombre-surface-3);
    --bs-btn-hover-border-color: var(--tg-sombre-bordure);
}

/* Radios segmentés : l’état retenu prend le fond des boutons primaires (texte blanc lisible). */
html[data-bs-theme="dark"] .btn-choix.active,
html[data-bs-theme="dark"] .btn-choix:has(> input[type="radio"]:checked) {
    border-color: var(--tg-sombre-bouton);
    background-color: var(--tg-sombre-bouton);
}

/* Entêtes de carte : marine du mode clair, éclairci pour se détacher des surfaces sombres. */
html[data-bs-theme="dark"] .card .card-header {
    background-color: var(--tg-sombre-entete-carte);
}

/* L’ombre ne détache plus une carte d’un fond sombre : un filet prend le relais. */
html[data-bs-theme="dark"] .card {
    box-shadow: 0 0 0 1px var(--tg-sombre-bordure), var(--bs-box-shadow-sm);
}

/* Notifications teintées (thème compilé : mélange avec du BLANC) → mélange avec la surface sombre. */
html[data-bs-theme="dark"] .alert-success {
    --bs-alert-bg: color-mix(in srgb, #65d5a0 14%, var(--tg-sombre-surface));
    --bs-alert-border-color: color-mix(in srgb, #65d5a0 40%, var(--tg-sombre-surface));
    --bs-alert-color: #8fe3bc;
    --bs-alert-link-color: #8fe3bc;
}

html[data-bs-theme="dark"] .alert-warning {
    --bs-alert-bg: color-mix(in srgb, #ff815e 14%, var(--tg-sombre-surface));
    --bs-alert-border-color: color-mix(in srgb, #ff815e 40%, var(--tg-sombre-surface));
    --bs-alert-color: #ffb39e;
    --bs-alert-link-color: #ffb39e;
}

html[data-bs-theme="dark"] .alert-danger {
    --bs-alert-bg: color-mix(in srgb, #ff364e 14%, var(--tg-sombre-surface));
    --bs-alert-border-color: color-mix(in srgb, #ff364e 40%, var(--tg-sombre-surface));
    --bs-alert-color: #ff8a99;
    --bs-alert-link-color: #ff8a99;
}

html[data-bs-theme="dark"] .alert-info {
    --bs-alert-bg: color-mix(in srgb, #7096ff 14%, var(--tg-sombre-surface));
    --bs-alert-border-color: color-mix(in srgb, #7096ff 40%, var(--tg-sombre-surface));
    --bs-alert-color: #a9c0ff;
    --bs-alert-link-color: #a9c0ff;
}

html[data-bs-theme="dark"] .toast.text-bg-success,
html[data-bs-theme="dark"] .toast.text-bg-success .toast-body {
    border-color: color-mix(in srgb, #65d5a0 40%, var(--tg-sombre-surface));
    background-color: color-mix(in srgb, #65d5a0 14%, var(--tg-sombre-surface)) !important;
    color: #8fe3bc !important;
}

html[data-bs-theme="dark"] .toast.text-bg-info,
html[data-bs-theme="dark"] .toast.text-bg-info .toast-body {
    border-color: color-mix(in srgb, #7096ff 40%, var(--tg-sombre-surface));
    background-color: color-mix(in srgb, #7096ff 14%, var(--tg-sombre-surface)) !important;
    color: #a9c0ff !important;
}

/* Utilitaires de couleur figés pour un fond blanc. */
html[data-bs-theme="dark"] .text-success {
    color: var(--tg-success-strong) !important;
}

html[data-bs-theme="dark"] .text-dark,
html[data-bs-theme="dark"] .text-black {
    color: var(--tg-sombre-texte) !important;
}

html[data-bs-theme="dark"] .bg-white,
html[data-bs-theme="dark"] .bg-body {
    background-color: var(--bs-body-bg) !important;
}

html[data-bs-theme="dark"] .bg-light {
    background-color: var(--bs-tertiary-bg) !important;
}


/* ─── 4. Coquille : header du haut, navigation, rail, pied ──────────────────────────────────────────────────────── */

html[data-bs-theme="dark"] .navbar-teogest .societe-dossier select option,
html[data-bs-theme="dark"] .dashboard-sidebar-selecteurs select option {
    background: var(--tg-sombre-surface-2);
    color: var(--tg-sombre-texte);
}

/* Menus déroulants du header (dossier, dossier annuel, modules, sous-menus) et de la navigation latérale. */
html[data-bs-theme="dark"] .navbar-teogest .societe-dossier .dropdown-menu,
html[data-bs-theme="dark"] .navbar-teogest .navbar-modules .dropdown-menu,
html[data-bs-theme="dark"] #navbar-principale .navbar-modules .dropdown-menu,
html[data-bs-theme="dark"] .navbar-sousmenu .dropdown-menu,
html[data-bs-theme="dark"] .navbar-nav .open .dropdown-menu,
html[data-bs-theme="dark"] .dashboard-sidebar-selecteurs .dossier-annuel-menu,
html[data-bs-theme="dark"] .dashboard-sidebar-selecteurs .societe-sidebar-menu {
    border-color: var(--tg-sombre-bordure);
    background: var(--tg-sombre-surface-2);
    box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .5);
}

html[data-bs-theme="dark"] #navbar-principale .dossier-annuel-menu .dropdown-item,
html[data-bs-theme="dark"] #navbar-principale .societe-menu .societe-item,
html[data-bs-theme="dark"] #navbar-principale .societe-menu .societe-menu-cabinet,
html[data-bs-theme="dark"] #navbar-principale .navbar-modules .dropdown-menu li > a,
html[data-bs-theme="dark"] #navbar-principale .navbar-modules .dropdown-item,
html[data-bs-theme="dark"] .navbar-sousmenu .dropdown-menu li > a,
html[data-bs-theme="dark"] .navbar-sousmenu .dropdown-item,
html[data-bs-theme="dark"] .dashboard-sidebar-selecteurs .dossier-annuel-menu .dropdown-item,
html[data-bs-theme="dark"] .dashboard-sidebar-selecteurs .societe-sidebar-menu .dropdown-item {
    color: var(--tg-sombre-texte);
}

html[data-bs-theme="dark"] #navbar-principale .dossier-annuel-menu .dropdown-item:hover,
html[data-bs-theme="dark"] #navbar-principale .dossier-annuel-menu .dropdown-item:focus,
html[data-bs-theme="dark"] #navbar-principale .societe-menu .societe-item:hover,
html[data-bs-theme="dark"] #navbar-principale .societe-menu .societe-item:focus,
html[data-bs-theme="dark"] #navbar-principale .societe-menu .societe-menu-cabinet:hover,
html[data-bs-theme="dark"] #navbar-principale .navbar-modules .dropdown-menu li > a:hover,
html[data-bs-theme="dark"] #navbar-principale .navbar-modules .dropdown-item:hover,
html[data-bs-theme="dark"] .navbar-sousmenu .dropdown-menu li > a:hover,
html[data-bs-theme="dark"] .navbar-sousmenu .dropdown-item:hover,
html[data-bs-theme="dark"] .dashboard-sidebar-selecteurs .dossier-annuel-menu .dropdown-item:hover,
html[data-bs-theme="dark"] .dashboard-sidebar-selecteurs .societe-sidebar-menu .dropdown-item:hover {
    background: var(--tg-sombre-surface-3);
    color: #fff;
}

html[data-bs-theme="dark"] .navbar-teogest .societe-menu .societe-menu-label,
html[data-bs-theme="dark"] .navbar-teogest .navbar-modules .tg-menu-plus .dropdown-header {
    color: var(--tg-sombre-texte-doux);
}

html[data-bs-theme="dark"] #navbar-principale .societe-menu .societe-menu-input,
html[data-bs-theme="dark"] .dashboard-sidebar-selecteurs .societe-sidebar-menu .societe-menu-input[type="text"] {
    border-color: var(--tg-sombre-bordure);
    background: var(--tg-sombre-surface);
    color: var(--tg-sombre-texte);
}

html[data-bs-theme="dark"] .navbar-teogest .societe-menu .societe-menu-recherche {
    border-top-color: var(--tg-sombre-bordure);
}

html[data-bs-theme="dark"] .dashboard-shell .nav-underline .nav-link.active {
    color: #fff;
}

/* Navigation latérale : entrées du bloc bas (Vos documents, Portail de services, Paramètres, Accès rapide, Aide &
   assistant). Leur couleur de repos (--tg-entree-repos, socle/help-nav.css) est un marine quasi noir, invisible sur la
   surface sombre ; leurs survols teintés et le texte du module actif (orange assombri) sont pensés pour du blanc. */
html[data-bs-theme="dark"] {
    --tg-entree-repos: var(--tg-sidebar-text);
}

html[data-bs-theme="dark"] .tg-entree-panneau--acces-rapide {
    --tg-entree-couleur: #ff9a7d;
    --tg-entree-fond: color-mix(in srgb, #ff6136 18%, var(--tg-sombre-surface));
}

html[data-bs-theme="dark"] .tg-entree-panneau--aide {
    --tg-entree-couleur: #b8bfff;
    --tg-entree-fond: color-mix(in srgb, #6366f1 22%, var(--tg-sombre-surface));
}

html[data-bs-theme="dark"] .dashboard-sidebar {
    --sb-actif-texte: #ff9a7d;
    --sb-actif-bg: color-mix(in srgb, var(--bs-main, #ff6136) 18%, var(--tg-sombre-surface));
}

/* Rail des modules et libellés au survol. */
html[data-bs-theme="dark"] #rail-modules .rail-modules-menu a.rail-dashboard:hover,
html[data-bs-theme="dark"] #rail-modules .rail-modules-menu a.rail-dashboard.tiroir-actif,
html[data-bs-theme="dark"] .rail-flyout.is-dashboard,
html[data-bs-theme="dark"] .rail-flyout.is-user {
    background: var(--tg-sombre-surface-2);
}

/* Rail des outils (Accès rapide / Aide) : survols teintés pensés pour un fond blanc. */
html[data-bs-theme="dark"] .tg-assistant-hote .tg-rail-outils .tg-rail-outils-btn--aide:hover,
html[data-bs-theme="dark"] .tg-assistant-hote .tg-rail-outils .tg-rail-outils-btn--vers-acces-rapide:hover {
    background: color-mix(in srgb, #ff6136 18%, var(--tg-sombre-surface));
    color: #ff9a7d;
}

html[data-bs-theme="dark"] .tg-assistant-hote .tg-rail-outils .tg-rail-outils-btn--vers-aide:hover {
    background: color-mix(in srgb, #6366f1 22%, var(--tg-sombre-surface));
    color: #b8bfff;
}

/* Pied d’actions. */
html[data-bs-theme="dark"] #foot,
html[data-bs-theme="dark"] .footPop {
    box-shadow: 0 -2px 6px rgba(0, 0, 0, .4);
}

html[data-bs-theme="dark"] #foot .tg-foot-actions-secondaires-btn:hover,
html[data-bs-theme="dark"] #foot .tg-foot-actions-secondaires-btn[aria-expanded="true"] {
    color: #fff;
}

/* Voiles d’attente (blancs translucides en clair). */
html[data-bs-theme="dark"] #genericModaloverlay.modal-overlay,
html[data-bs-theme="dark"] #gedGenericModaloverlay.modal-overlay,
html[data-bs-theme="dark"] #ocrGenericModaloverlay.modal-overlay,
html[data-bs-theme="dark"] .mvc-grid .mvc-grid-loader,
html[data-bs-theme="dark"] .param-iframe-loader {
    background: var(--tg-sombre-voile);
}

html[data-bs-theme="dark"] #genericModaloverlay.modal-overlay.preloader-blanc,
html[data-bs-theme="dark"] .tg-ecran-construction {
    background-color: var(--tg-sombre-fond);
}


/* ─── 5. Grilles et tableaux ───────────────────────────────────────────────────────────────────────────────────── */

html[data-bs-theme="dark"] .t-grid table,
html[data-bs-theme="dark"] .t-grid:has(thead),
html[data-bs-theme="dark"] .table-responsive:has(> table.table > thead),
html[data-bs-theme="dark"] .table-responsive:has(> table.grid > thead) {
    background-color: var(--bs-body-bg);
}

html[data-bs-theme="dark"] .t-grid table th {
    color: var(--tg-sombre-texte-doux);
}

html[data-bs-theme="dark"] .t-grid .t-grid-pager {
    border-color: var(--tg-sombre-bordure);
    color: var(--tg-sombre-texte);
}

html[data-bs-theme="dark"] .mvc-grid th,
html[data-bs-theme="dark"] .mvc-grid-header-mode .mvc-grid-value {
    background-color: var(--bs-tertiary-bg);
}

html[data-bs-theme="dark"] .mvc-grid th,
html[data-bs-theme="dark"] .mvc-grid td {
    border-color: var(--tg-sombre-bordure);
}

html[data-bs-theme="dark"] .mvc-grid-row-filters .mvc-grid-value,
html[data-bs-theme="dark"] .mvc-grid-popup,
html[data-bs-theme="dark"] .mvc-grid-popup .mvc-grid-value,
html[data-bs-theme="dark"] .mvc-grid-popup .mvc-grid-method,
html[data-bs-theme="dark"] .mvc-grid-popup .mvc-grid-operator,
html[data-bs-theme="dark"] .mvc-grid-pager button {
    border-color: var(--tg-sombre-bordure);
    background-color: var(--tg-sombre-surface-2);
    color: var(--tg-sombre-texte);
}

html[data-bs-theme="dark"] .mvc-grid-popup .popup-arrow {
    border-bottom-color: var(--tg-sombre-surface-2);
}

html[data-bs-theme="dark"] .mvc-grid-pager .disabled,
html[data-bs-theme="dark"] .mvc-grid-pager .disabled:focus,
html[data-bs-theme="dark"] .mvc-grid-pager .disabled:hover {
    background-color: var(--tg-sombre-surface);
    color: var(--tg-sombre-texte-doux);
}

html[data-bs-theme="dark"] .tableauRecap {
    color: var(--tg-sombre-texte);
}

html[data-bs-theme="dark"] .tableauRecap td {
    background-color: var(--bs-body-bg);
}

html[data-bs-theme="dark"] .tableauRecap td,
html[data-bs-theme="dark"] .tableauRecap th,
html[data-bs-theme="dark"] .bordureGrise {
    border-color: var(--tg-sombre-bordure);
}

html[data-bs-theme="dark"] .tableauRecap .titreHaut,
html[data-bs-theme="dark"] .tableauRecap .titreGauche {
    background-color: var(--bs-tertiary-bg);
}

html[data-bs-theme="dark"] .reportinglabel,
html[data-bs-theme="dark"] .progress .progress-label {
    color: var(--tg-sombre-texte);
}


/* ─── 6. Champs et listes des plugins (Chosen, autocomplétion, jetons, dépôt de fichier) ────────────────────────── */

html[data-bs-theme="dark"] .chosen-container .chosen-drop,
html[data-bs-theme="dark"] .chosen-container-single .chosen-single,
html[data-bs-theme="dark"] .chosen-container-multi .chosen-choices,
html[data-bs-theme="dark"] .chosen-container-active.chosen-with-drop .chosen-single {
    border-color: var(--tg-sombre-bordure);
    background: var(--tg-sombre-surface-2);
    color: var(--tg-sombre-texte);
}

html[data-bs-theme="dark"] .chosen-container-single .chosen-search input[type=text] {
    border-color: var(--tg-sombre-bordure);
    background-color: var(--tg-sombre-surface);
    color: var(--tg-sombre-texte);
}

html[data-bs-theme="dark"] .chosen-container .chosen-results li {
    color: var(--tg-sombre-texte);
}

html[data-bs-theme="dark"] .chosen-container .chosen-results li.highlighted {
    background: var(--tg-sombre-bouton);
    color: #fff;
}

html[data-bs-theme="dark"] .chosen-container .chosen-results li.no-results {
    background: var(--tg-sombre-surface);
}

html[data-bs-theme="dark"] .chosen-container-multi .chosen-choices li.search-choice {
    border-color: var(--tg-sombre-bordure);
    background: var(--tg-sombre-surface-3);
    color: var(--tg-sombre-texte);
}

html[data-bs-theme="dark"] .chosen-container-multi .chosen-choices li.search-field input[type=text],
html[data-bs-theme="dark"] .chosen-container-active .chosen-choices li.search-field input[type=text] {
    color: var(--tg-sombre-texte) !important;
}

html[data-bs-theme="dark"] ul.ui-autocomplete,
html[data-bs-theme="dark"] .tg-token-dropdown,
html[data-bs-theme="dark"] .contextMenuPlugin,
html[data-bs-theme="dark"] .popAncres,
html[data-bs-theme="dark"] .recherche-resultat {
    border-color: var(--tg-sombre-bordure);
    background: var(--tg-sombre-surface-2) !important;
    color: var(--tg-sombre-texte);
}

html[data-bs-theme="dark"] ul.ui-autocomplete > li > a {
    color: var(--tg-sombre-texte);
}

html[data-bs-theme="dark"] ul.ui-autocomplete > li > a:hover,
html[data-bs-theme="dark"] ul.ui-autocomplete > li.ui-state-focus > a {
    background: var(--tg-sombre-surface-3);
    color: #fff;
}

html[data-bs-theme="dark"] .tg-tokenfield.tg-tokenfield-disabled {
    background-color: var(--bs-secondary-bg);
}

html[data-bs-theme="dark"] .tg-fileupload {
    background: var(--tg-sombre-surface-2);
}

/* Les pages d’un document restent BLANCHES : c’est du papier, comme dans toute visionneuse. */
html[data-bs-theme="dark"] .tg-visionneuse-pdf__page {
    background-color: #fff;
}


/* ─── 7. Logo produit : variante au texte éclairci ────────────────────────────────────────────────────────────────
   _MarqueProduit.cshtml rend les deux images (le marine #2E3862 du texte « ingeneo » est invisible sur fond sombre ;
   assets/img/<logo>-sombre.svg le remplace par le texte clair de la palette, l’orange est conservé). */
html:not([data-bs-theme="dark"]) .tg-logo-produit--sombre,
html[data-bs-theme="dark"] .tg-logo-produit--clair {
    display: none !important;
}


/* ─── 8. Jetons d’écran figés à la racine pour un fond clair ──────────────────────────────────────────────────── */

html[data-bs-theme="dark"] {
    /* Grilles au gabarit de liste (mvc-grid.custom.scss) : survol presque blanc et sélection pêche pâle. */
    --tg-grille-survol: var(--tg-sombre-surface-2);
    --tg-grille-selection: color-mix(in srgb, var(--bs-main, #ff6136) 14%, var(--tg-sombre-surface));

    /* Révision (revision-baseline.css). */
    --tg-rev-bg: var(--tg-sombre-fond);
    --tg-rev-card: var(--tg-sombre-surface);
    --tg-rev-border: var(--tg-sombre-bordure);
    --tg-rev-text: var(--tg-sombre-texte);
    --tg-rev-muted: var(--tg-sombre-texte-doux);

    /* Feuilles de travail complexes de la Révision V2 (revision-v2.ft-complexe.css). */
    --ftc-saisie-bord: var(--tg-sombre-bordure);
    --ftc-ro-fond: var(--tg-sombre-surface-2);
    --ftc-filet: var(--tg-sombre-bordure);
    --ftc-aside-fond: var(--tg-sombre-surface-2);
}


/* ─── 9. Widgets du dashboard et des panneaux latéraux ────────────────────────────────────────────────────────────
   Chaque widget porte encore, EN LIGNE, les couleurs de l’ancienne personnalisation des widgets
   (WidgetPresentationModel : CadreStyle = texte / fill / bordure / fond, TitreStyle = bordure), par défaut texte noir
   sur fond blanc. Un style en ligne ne se bat qu’en !important. */
html[data-bs-theme="dark"] .widgetContainer .cadre[style],
html[data-bs-theme="dark"] .widgetContainer .elementContainer[style] {
    border-color: var(--tg-sombre-bordure) !important;
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    fill: currentColor !important;
}

html[data-bs-theme="dark"] .widgetContainer .titre[style] {
    border-color: var(--tg-sombre-bordure) !important;
}


/* ─── 10. Assistant IA (dock, panneau « Aide & assistant », historique) ─────────────────────────────────────────── */

html[data-bs-theme="dark"] .ia-dock,
html[data-bs-theme="dark"] .ia-historique,
html[data-bs-theme="dark"] .ia-bulle-badge {
    --ia-navy: var(--tg-sombre-bouton);
    --ia-navy-rgb: 90, 102, 230;
    --ia-tint: var(--tg-sombre-surface-3);
    --ia-fond-fil: var(--tg-sombre-fond);
    --ia-bord: var(--tg-sombre-bordure);
    --ia-bord-fort: #4a5178;
    --ia-texte: var(--tg-sombre-texte);
    --ia-texte-2: var(--tg-sombre-texte-doux);
    --ia-placeholder: rgba(228, 231, 243, .5);
    --ia-ambre-fond: #33290f;
    --ia-ambre-bord: #6b5518;
    --ia-ambre-texte: #f2d58a;
}

html[data-bs-theme="dark"] .ia-dock,
html[data-bs-theme="dark"] .ia-dock-amorce:hover,
html[data-bs-theme="dark"] .ia-avatar--msg,
html[data-bs-theme="dark"] .ia-fil-nouveau,
html[data-bs-theme="dark"] .ia-carte,
html[data-bs-theme="dark"] .ia-suggestion,
html[data-bs-theme="dark"] .ia-ressource,
html[data-bs-theme="dark"] .ia-arreter,
html[data-bs-theme="dark"] .ia-btn-doux,
html[data-bs-theme="dark"] .ia-composer,
html[data-bs-theme="dark"] .ia-composer-boite,
html[data-bs-theme="dark"] .ia-conv:hover,
html[data-bs-theme="dark"] .ia-msg--echec .ia-bulle {
    background: var(--tg-sombre-surface-2);
}

html[data-bs-theme="dark"] .ia-suggestion,
html[data-bs-theme="dark"] .ia-md :not(pre) > code {
    border-color: var(--tg-sombre-bordure);
}

html[data-bs-theme="dark"] .ia-colonne-historique {
    background: var(--tg-sombre-surface);
}

html[data-bs-theme="dark"] .ia-dock-poignee-trait {
    background: #4a5178;
}

html[data-bs-theme="dark"] .ia-md,
html[data-bs-theme="dark"] .ia-conv-titre,
html[data-bs-theme="dark"] .ia-msg--echec .ia-bulle {
    color: var(--tg-sombre-texte);
}

html[data-bs-theme="dark"] .ia-encadre--gris {
    color: var(--tg-sombre-texte-doux);
}


/* ─── 11. Panneau « Accès rapide » : factures en attente d’approbation ────────────────────────────────────────── */

html[data-bs-theme="dark"] .fe-montant {
    color: var(--tg-sombre-texte);
}

/* Couleurs d’identité des panneaux (socle/rail-outils.css) : employées à la fois en FOND de pastille (texte blanc) et
   en TEXTE ; sur fond sombre il faut des tons moyens qui tiennent dans les deux rôles. Le vert des commentaires lisait
   --tg-success-strong, éclairci plus haut pour le texte : il ne porterait plus le blanc des pastilles. */
html[data-bs-theme="dark"] [data-panneau="assistant"] {
    --tg-panneau-couleur: #6366f1;
}

html[data-bs-theme="dark"] [data-panneau="commentaires"] {
    --tg-panneau-couleur: #1f9467;
}

html[data-bs-theme="dark"] [data-panneau="depot"] {
    --tg-panneau-couleur: #e0612f;
}

html[data-bs-theme="dark"] [data-panneau="alertes"] {
    --tg-panneau-couleur: #e5484d;
}

html[data-bs-theme="dark"] [data-panneau="documents"] {
    --tg-panneau-couleur: #3b82f6;
}

html[data-bs-theme="dark"] .fe-action--approuver:hover,
html[data-bs-theme="dark"] .fe-action--approuver:focus-visible {
    border-color: #0f7a6e;
    background: #0f7a6e;
}


/* ─── 12. Révision V2 ──────────────────────────────────────────────────────────────────────────────────────────── */

/* Languette de repli de la barre d’outils des grilles (gris clair figé dans revision-v2.css). */
html[data-bs-theme="dark"] #divGrilleBalanceDetail .rev-v2__bascule-barre,
html[data-bs-theme="dark"] #divGrilleEcritureDetail .rev-v2__bascule-barre,
html[data-bs-theme="dark"] #divGrilleEcritureN1 .rev-v2__bascule-barre {
    background-color: var(--tg-sombre-surface-3);
}

html[data-bs-theme="dark"] #divGrilleBalanceDetail .rev-v2__bascule-barre:is(:hover, :focus-visible),
html[data-bs-theme="dark"] #divGrilleEcritureDetail .rev-v2__bascule-barre:is(:hover, :focus-visible),
html[data-bs-theme="dark"] #divGrilleEcritureN1 .rev-v2__bascule-barre:is(:hover, :focus-visible) {
    border-color: #4a5178;
    background-color: #3a4066;
}


/* ─── 13. Feuille de temps ─────────────────────────────────────────────────────────────────────────────────────── */

/* Saisie des créneaux : colonne de commandes figée à droite, peinte en blanc (fond + ombre de prolongement) dans
   FDT/Saisie.css. Corps seulement : l’entête et le survol y lisent déjà des variables, et gardent leur règle. */
html[data-bs-theme="dark"] #ActionEnCours tbody td.col-cmd {
    background-color: var(--bs-body-bg);
    box-shadow: 2px 0 0 0 var(--bs-body-bg);
}


/* ─── 14. Pastilles, champs Chosen et calendriers ─────────────────────────────────────────────────────────────── */

/* `text-bg-light` (compteurs des barres d’outils) : fond presque blanc et texte noir figés par Bootstrap. */
html[data-bs-theme="dark"] .text-bg-light {
    background-color: var(--tg-sombre-surface-3) !important;
    color: var(--tg-sombre-texte) !important;
}

/* Valeur affichée d’un champ Chosen : son <span> porte sa propre couleur foncée. */
html[data-bs-theme="dark"] .chosen-container-single .chosen-single span {
    color: var(--tg-sombre-texte);
}

/* FullCalendar (Caisse, Planning) : défauts de la librairie et boutons blancs des feuilles Teogest. Les valeurs que
   la Caisse fixe volontairement (bordures et fond transparents) sont posées plus spécifiquement et l’emportent. */
html[data-bs-theme="dark"] {
    --fc-page-bg-color: var(--tg-sombre-surface);
    --fc-neutral-bg-color: var(--tg-sombre-surface-2);
    --fc-list-event-hover-bg-color: var(--tg-sombre-surface-2);
    --fc-border-color: var(--tg-sombre-bordure);
}

html[data-bs-theme="dark"] .fc .fc-button-primary {
    --fc-button-bg-color: var(--tg-sombre-surface-2);
    --fc-button-text-color: var(--tg-sombre-texte);
    --fc-button-border-color: var(--tg-sombre-bordure);
}


/* ─── 15. Plannings et formulaires d’édition ─────────────────────────────────────────────────────────────────────
   Plan de charge (Gestion interne) et Planning des absences (Feuille de temps) : en-tête (#F0F0F0), corps (white), cases
   « aucune affectation » (white) et « plages non définies » (#eaeaea) sont écrits EN LIGNE par les vues et
   PlanChargeController. Seules ces teintes neutres sont reprises : les couleurs de charge et d’absence (vert, orange,
   rouge) portent l’information et restent telles quelles, légende comprise. */
html[data-bs-theme="dark"] div[style*="background-color: #F0F0F0"]:has(.jourDuMois) {
    background-color: var(--tg-sombre-surface-2) !important;
}

html[data-bs-theme="dark"] div[style="background-color: white"]:has(> .ligneCollabComplete),
html[data-bs-theme="dark"] div[style="background-color: white"]:has(> .ligneUtilComplete),
html[data-bs-theme="dark"] .jourDuMoisCollab[style*="background-color:white"],
html[data-bs-theme="dark"] div[style*="width:30px;height:30px"][style*="background-color:white"] {
    background-color: var(--tg-sombre-surface) !important;
}

html[data-bs-theme="dark"] .jourDuMoisCollab[style*="background-color:#eaeaea"],
html[data-bs-theme="dark"] div[style*="width: 30px"][style*="background-color:#eaeaea"] {
    background-color: var(--tg-sombre-surface-3) !important;
}

/* Week-ends des deux plannings : teinte légère de la couleur principale posée par un <style> de la vue, en !important.
   Intitulés (mois courant, tris) : bleu #2471B3 (feuilles d’écran et style en ligne), terne sur l’en-tête sombre. */
html[data-bs-theme="dark"] .weekEnd {
    background-color: color-mix(in srgb, #6f7cf5 22%, var(--tg-sombre-surface)) !important;
}

html[data-bs-theme="dark"] .triHeaderCollab,
html[data-bs-theme="dark"] .triHeaderUtil,
html[data-bs-theme="dark"] .nomMois.MoisCourant {
    color: #79b4ee !important;
}

/* Planning (Gestion interne) : échéances sur le bleu clair de charte (--bs-info-secondary), identique dans les deux
   modes, alors que leur texte s’éclaircit. */
html[data-bs-theme="dark"] .echeance {
    background-color: color-mix(in srgb, #b8cbff 18%, var(--tg-sombre-surface));
}

/* Formulaires d’édition (Compta/editions.css, .editions-bs5) : radios segmentés au fond blanc figé. */
html[data-bs-theme="dark"] .editions-bs5 .btn-group .btn-choix {
    background-color: var(--bs-body-bg);
}

html[data-bs-theme="dark"] .editions-bs5 .btn-group .btn-choix.active,
html[data-bs-theme="dark"] .editions-bs5 .btn-group .btn-choix:has(> input[type="radio"]:checked) {
    background-color: var(--tg-sombre-bouton);
}

html[data-bs-theme="dark"] .editions-bs5 .toggle {
    border-color: rgba(255, 255, 255, .25);
}