/* ============================================================================
   Thème sombre DxLean
   ----------------------------------------------------------------------------
   Activé par html[data-bs-theme="dark"], posé tout en haut de
   templates/dxsite/base_standard.html d'après le choix mémorisé dans le navigateur
   (localStorage « dx-theme », bouton du menu utilisateur, static/js/dx_theme.js).
   DxStudies et DxTraining restent toujours en clair (data-dx-dark-off).

   Les couleurs en dur du site ont été converties par
   scripts/misc/dark_theme_codemod.py en var(--dk-<rôle>, <couleur claire>) : ces
   jetons n'existent qu'ici, en thème clair la couleur d'origine s'applique.
   Nouvelle feuille ou nouvelle couleur : relancer le script sur le fichier, ou écrire
   directement var(--dk-surface, #fff) et consorts.

   Couleur posée sur un fond qui ne change pas avec le thème (bandeau sombre, bouton
   vif) : l'écrire var(--dk-fixe, <couleur>). --dk-fixe n'est défini nulle part, la
   couleur reste donc la même dans les deux thèmes, et le codemod ne touche jamais à
   l'intérieur d'un var().

   Logos et icônes de module en PNG (lettre gris foncé sur fond transparent) :
   inversés en luminosité seulement (invert + hue-rotate), les teintes restent.

   Chargée en dernier dans le <head> pour passer devant les feuilles de module.
   ========================================================================= */

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

  /* Gris neutres — remplacent fond blanc, fonds pâles, gris clairs, textes foncés */
  --dk-surface: #1c2331;        /* était blanc : cartes, champs, en-têtes */
  --dk-surface-2: #131923;      /* était très pâle (#f8fafc…) : fond de page, zones en retrait */
  --dk-surface-3: #283143;      /* était gris clair (#e5e7eb…) : survol, puces, zébrures */
  --dk-text: #e6e9ef;
  --dk-text-muted: #b4bccb;     /* ≥ 6,8:1 sur toutes les surfaces (WCAG AA 1.4.3 : 4,5) */
  --dk-text-faint: #98a1b1;     /* ≥ 5:1 sur toutes les surfaces, était 3,6:1 sur --dk-surface-3 */
  --dk-border: #2d3647;
  --dk-border-strong: #3d485b;

  /* Teintes — la couleur d'origine est gardée à ce pourcentage, le reste vient de la base */
  --dk-pastel: 0%;              /* fonds pastel (succès, alerte…) : 0 % = leur version foncée de même teinte, calculée par le codemod */
  --dk-tint: 16%;               /* teintes mêlées au fond (ancienne forme, reste en usage ponctuel) */
  --dk-tint-line: 38%;          /* bordures pastel */
  --dk-tint-base: #1c2331;
  --dk-ink: 42%;                /* textes colorés foncés, éclaircis pour rester lisibles */
  --dk-ink-base: #f1f5f9;
  --dk-mod-ink: 55%;            /* ancien mélange de blanc (formes résiduelles hors codemod) */
  --dk-ink-l: 0.80;             /* accent posé sur un élément : oklch(from X max(l, …)) — plancher ≈ 7:1, comme lift_for_dark */
  --dk-ink-c: 0.14;             /* chroma plafonnée pour rester dans sRGB à ce plancher */
  /* Couleur du module en aplat : version « nuit » calculée côté serveur (coreutils/
     color_lift.night_tone : même teinte, chroma ≤ 0,11, texte blanc ≥ 4,5:1). Couvre d'un
     coup tous les boutons actifs, onglets et pastilles pleines en var(--module-primary).
     Les textes passent par --module-primary-lift / oklch(from …) et restent lisibles. */
  --module-primary: var(--module-primary-night);
  --module-secondary: var(--module-secondary-night);
  --module-primary-hover: var(--module-secondary-night);
  --dk-accent-area: 30%;       /* grande surface à la couleur du module (bandeau) : part de teinte gardée, le reste = surface sombre */
  --dk-lift: 0%;                /* texte coloré : 100 % de sa version claire de même teinte (coreutils/color_lift.py) */
  /* Versions claires des accents fixes ; --module-*-lift viennent de Module.get_css_variables */
  --color-primary-lift: #8bd564;
  --qms-primary-lift: #fca582;
  --color-danger-lift: #fda297;
  --color-success-lift: #64d7a6;
  --color-warning-lift: #fda761;
  --dk-control-border: #6b7588; /* contour des champs : ≥ 3:1 (WCAG 1.4.11) */
  --dx-control-border: var(--dk-control-border);

  /* Bootstrap 5.3 */
  --bs-body-bg: var(--dk-surface-2);
  --bs-body-bg-rgb: 19, 25, 35;
  --bs-body-color: var(--dk-text);
  --bs-body-color-rgb: 230, 233, 239;
  --bs-emphasis-color: #fff;
  --bs-secondary-color: var(--dk-text-muted);
  --bs-tertiary-color: var(--dk-text-faint);
  --bs-secondary-bg: var(--dk-surface-3);
  --bs-tertiary-bg: var(--dk-surface);
  --bs-border-color: var(--dk-border);
  --bs-border-color-translucent: rgba(255, 255, 255, .1);
  --bs-heading-color: var(--dk-text);
  /* Couleurs d'état adoucies : même teinte et même clarté, chroma OKLCH plafonnée à 0,13
     (skill mode-nuit). Texte blanc ≥ 4,5:1 sur primary/danger/success. Les .btn-* ont
     leurs couleurs compilées : seuls les utilitaires et var(--bs-*) sont concernés. */
  --bs-primary: #4775c3;  --bs-primary-rgb: 71, 117, 195;
  --bs-danger: #bb5758;   --bs-danger-rgb: 187, 87, 88;
  --bs-warning: #f3c55f;  --bs-warning-rgb: 243, 197, 95;
  --bs-info: #2fc9ed;     --bs-info-rgb: 47, 201, 237;
  --bs-dark-rgb: 230, 233, 239;
  --bs-light-rgb: 40, 49, 67;
  --bs-white-rgb: 28, 35, 49;

  /* Jetons du kit */
  --dx-border: var(--dk-border);
  --dx-shadow: 0 4px 6px -1px rgba(0, 0, 0, .3), 0 12px 28px -6px rgba(0, 0, 0, .45);
  --dx-shadow-soft: 0 1px 2px rgba(0, 0, 0, .25), 0 4px 12px -4px rgba(0, 0, 0, .35);
}

html[data-bs-theme="dark"] body { background-color: var(--dk-surface-2); color: var(--dk-text); color-scheme: dark; } /* styles.css force light sur body */

/* Utilitaires Bootstrap figés en clair dans les gabarits */
html[data-bs-theme="dark"] .bg-white { background-color: var(--dk-surface) !important; }
html[data-bs-theme="dark"] .bg-light { background-color: var(--dk-surface-3) !important; }
html[data-bs-theme="dark"] .text-dark,
html[data-bs-theme="dark"] .text-black,
html[data-bs-theme="dark"] .text-body { color: var(--dk-text) !important; }
html[data-bs-theme="dark"] .bg-warning.text-dark,
html[data-bs-theme="dark"] .bg-info.text-dark { color: #111827 !important; } /* fond vif : texte foncé dans les deux thèmes */
html[data-bs-theme="dark"] .bg-light.text-dark,
html[data-bs-theme="dark"] .text-bg-light { color: var(--dk-text) !important; }
html[data-bs-theme="dark"] .table-light {
  --bs-table-bg: var(--dk-surface-3); --bs-table-color: var(--dk-text);
  --bs-table-border-color: var(--dk-border-strong);
}
html[data-bs-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--dk-text); }
/* Lignes colorées .table-success… : Bootstrap garde leurs pastels clairs en sombre */
html[data-bs-theme="dark"] :is(.table-primary, .table-secondary, .table-success, .table-info, .table-warning, .table-danger) {
  --bs-table-color: var(--dk-text); --bs-table-border-color: var(--dk-border-strong);
  --bs-table-striped-color: var(--dk-text); --bs-table-active-color: var(--dk-text); --bs-table-hover-color: var(--dk-text);
  --bs-table-striped-bg: color-mix(in srgb, var(--bs-table-bg) 88%, #fff);
  --bs-table-active-bg: color-mix(in srgb, var(--bs-table-bg) 80%, #fff);
  --bs-table-hover-bg: color-mix(in srgb, var(--bs-table-bg) 85%, #fff);
}
html[data-bs-theme="dark"] .table-primary { --bs-table-bg: color-mix(in srgb, var(--bs-primary) 24%, var(--dk-surface)); }
html[data-bs-theme="dark"] .table-secondary { --bs-table-bg: color-mix(in srgb, var(--bs-secondary) 24%, var(--dk-surface)); }
html[data-bs-theme="dark"] .table-success { --bs-table-bg: color-mix(in srgb, var(--bs-success) 24%, var(--dk-surface)); }
html[data-bs-theme="dark"] .table-info { --bs-table-bg: color-mix(in srgb, var(--bs-info) 22%, var(--dk-surface)); }
html[data-bs-theme="dark"] .table-warning { --bs-table-bg: color-mix(in srgb, var(--bs-warning) 22%, var(--dk-surface)); }
html[data-bs-theme="dark"] .table-danger { --bs-table-bg: color-mix(in srgb, var(--bs-danger) 24%, var(--dk-surface)); }

/* Éditeur Quill (modèles d'e-mails) : icônes en trait sombre dessinées pour une barre claire */
html[data-bs-theme="dark"] .ql-snow .ql-stroke { stroke: var(--dk-text-muted); }
html[data-bs-theme="dark"] .ql-snow .ql-fill { fill: var(--dk-text-muted); }
html[data-bs-theme="dark"] .ql-snow .ql-picker { color: var(--dk-text-muted); }
html[data-bs-theme="dark"] .ql-snow .ql-picker-options { background-color: var(--dk-surface); }
html[data-bs-theme="dark"] .ql-toolbar.ql-snow,
html[data-bs-theme="dark"] .ql-container.ql-snow { border-color: var(--dk-border-strong); }
html[data-bs-theme="dark"] .btn-light {
  --bs-btn-bg: var(--dk-surface-3); --bs-btn-color: var(--dk-text); --bs-btn-border-color: var(--dk-border-strong);
  --bs-btn-hover-bg: var(--dk-border-strong); --bs-btn-hover-color: var(--dk-text); --bs-btn-hover-border-color: var(--dk-border-strong);
}
html[data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color: var(--dk-text-muted); --bs-btn-border-color: var(--dk-border-strong); }
html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .modal-content,
html[data-bs-theme="dark"] .dropdown-menu,
html[data-bs-theme="dark"] .list-group-item { background-color: var(--dk-surface); color: var(--dk-text); border-color: var(--dk-border); }

/* Images et logos sur fond transparent : légère lumière derrière pour rester lisibles */
html[data-bs-theme="dark"] img[src$=".svg"].logo,
html[data-bs-theme="dark"] .brand-logo img { filter: brightness(1.15); }
html[data-bs-theme="dark"] img[src*="/module_icons/"],
html[data-bs-theme="dark"] img[src*="/module_logos/"],
html[data-bs-theme="dark"] img.sidebar-icon-img,
html[data-bs-theme="dark"] img[src*="/static/img/icons/"] { filter: invert(1) hue-rotate(180deg) saturate(.7); } /* saturate < 1 : accent du logo sourd (skill mode-nuit) */

/* Pastille DxLean de l'en-tête (dégradé vif du module) : même teinte, sourde, sans halo */
html[data-bs-theme="dark"] .dot-core { filter: saturate(.6) brightness(.88); box-shadow: none; }
/* Badge utilisateur (voile + halo à la couleur du module) → neutre ; entrée active du
   menu latéral : filet rouge pur → même teinte, sourde */
html[data-bs-theme="dark"] .user-chip { background: var(--dk-surface-3); border-color: var(--dk-border-strong); box-shadow: none; }
html[data-bs-theme="dark"] .sidebar-item.active { border-left-color: color-mix(in oklab, var(--module-primary) 65%, var(--dk-surface)); }

/* Diagrammes draw.io : toutes les cartographies en lecture seule passent en sombre par
   draw.io lui-même (dark=1, couleurs converties dans _process_drawio_embed_utils.html) ;
   l'aperçu de process_home insère un SVG exporté dont les light-dark() suivent la page.
   Ce SVG déclare « color-scheme: light dark » (= préférence du système, pas du site) :
   on lui impose le schéma sombre. */
html[data-bs-theme="dark"] .process-map-preview-canvas svg { color-scheme: dark !important; }

/* Grandes surfaces à la couleur du module (bandeau d'accueil) : en sombre, une teinte
   vive sur une grande surface éblouit. Même teinte, mêlée à --dk-accent-area de la
   surface sombre ; pas de halo coloré. !important : certaines pages passent hero_bg en
   style en ligne. Le texte blanc y gagne en contraste (fond plus sombre). */
html[data-bs-theme="dark"] .module-hero {
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--module-hero-start, var(--module-primary, #6366f1)) var(--dk-accent-area), var(--dk-surface-2)) 0%,
    color-mix(in oklab, var(--module-hero-mid, var(--module-primary, #6366f1)) var(--dk-accent-area), var(--dk-surface)) 55%,
    color-mix(in oklab, var(--module-hero-end, var(--module-secondary, #4f46e5)) var(--dk-accent-area), var(--dk-surface)) 100%) !important;
  box-shadow: var(--dx-shadow-soft);
  border: 1px solid var(--dk-border);
}
/* Action principale et liseré d'en-tête à la couleur du module : même teinte, chroma
   ramenée sous les plafonds du skill mode-nuit (bouton ≤ 0,15, liseré ≤ 0,16). Le
   mélange assombrit : le texte blanc du bouton gagne en contraste. */
html[data-bs-theme="dark"] .btn-dx-primary {
  background: color-mix(in oklab, var(--module-primary-strong, var(--module-primary)) 55%, var(--dk-surface));
  border-color: color-mix(in oklab, var(--module-primary-strong, var(--module-primary)) 75%, var(--dk-surface));
}
html[data-bs-theme="dark"] .btn-dx-primary:hover,
html[data-bs-theme="dark"] .btn-dx-primary:focus-visible {
  background: color-mix(in oklab, var(--module-secondary-strong, var(--module-primary-hover, var(--module-primary))) 70%, var(--dk-surface));
}
html[data-bs-theme="dark"] .dx-hero-accent {
  background: linear-gradient(180deg, color-mix(in oklab, var(--module-primary) 65%, var(--dk-surface)) 0%, color-mix(in oklab, var(--module-primary) 35%, var(--dk-surface)) 100%);
}
/* Boutons Bootstrap pleins (couleurs compilées, insensibles à --bs-primary) */
html[data-bs-theme="dark"] .btn-primary { --bs-btn-bg: #4775c3; --bs-btn-border-color: #4775c3; --bs-btn-hover-bg: #3d66ad; --bs-btn-hover-border-color: #3d66ad; --bs-btn-active-bg: #365b9b; }
html[data-bs-theme="dark"] .btn-danger { --bs-btn-bg: #a94a4b; --bs-btn-border-color: #a94a4b; --bs-btn-hover-bg: #974142; --bs-btn-hover-border-color: #974142; --bs-btn-active-bg: #873a3b; }
/* En-têtes de modale ou de carte en aplat d'état (.modal-header.bg-danger text-white…) :
   grande surface → même teinte mêlée à --dk-accent-area ; le texte devient clair (le
   fond assombri porterait mal le texte foncé de bg-warning / bg-info). */
html[data-bs-theme="dark"] :is(.modal-header, .card-header, .offcanvas-header):is(.bg-primary, .bg-danger, .bg-success, .bg-warning, .bg-info) {
  color: var(--dk-text) !important;
}
html[data-bs-theme="dark"] :is(.modal-header, .card-header, .offcanvas-header).bg-primary { background-color: color-mix(in oklab, rgb(var(--bs-primary-rgb)) var(--dk-accent-area), var(--dk-surface)) !important; }
html[data-bs-theme="dark"] :is(.modal-header, .card-header, .offcanvas-header).bg-danger { background-color: color-mix(in oklab, rgb(var(--bs-danger-rgb)) var(--dk-accent-area), var(--dk-surface)) !important; }
html[data-bs-theme="dark"] :is(.modal-header, .card-header, .offcanvas-header).bg-success { background-color: color-mix(in oklab, rgb(var(--bs-success-rgb)) var(--dk-accent-area), var(--dk-surface)) !important; }
html[data-bs-theme="dark"] :is(.modal-header, .card-header, .offcanvas-header).bg-warning { background-color: color-mix(in oklab, rgb(var(--bs-warning-rgb)) 30%, var(--dk-surface)) !important; } /* teinte claire : moins de mélange, texte ≥ 6:1 */
html[data-bs-theme="dark"] :is(.modal-header, .card-header, .offcanvas-header).bg-info { background-color: color-mix(in oklab, rgb(var(--bs-info-rgb)) 30%, var(--dk-surface)) !important; }
/* Tableau de bord entreprise (barres de progression à la couleur du module) et tuiles
   lettre de l'accueil Knowledge : même teinte, sourde ; texte blanc des tuiles gagne en contraste */
html[data-bs-theme="dark"] .enterprise-progress-fill { background: color-mix(in oklab, var(--module-card-primary) 70%, var(--dk-surface)); }
html[data-bs-theme="dark"] .kn-tile-letter { background: color-mix(in oklab, var(--tile-color) 80%, var(--dk-surface)); }

/* Écart au tarif (contrats Sales) : texte coloré par --gc (vert/rouge Bootstrap foncés) →
   même teinte, clarté plancher et chroma plafonnée comme les autres accents */
html[data-bs-theme="dark"] .gap-badge:not(.is-over) { color: oklch(from var(--gc) max(l, var(--dk-ink-l)) min(c, var(--dk-ink-c)) h); }
/* Cartes-liens de l'accueil Resources : le titre héritait du bleu des liens */
html[data-bs-theme="dark"] .res-home-link-card { color: var(--dk-text); }

/* Statistiques projet : carte KPI mise en avant (dégradé du module), barres de KPI, période
   courante ; statistiques Qualité : segments de barre empilée ; bouton rouge de l'admin */
html[data-bs-theme="dark"] .proj-stats-kpi-card.featured {
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--module-primary-hover, #ea580c) var(--dk-accent-area), var(--dk-surface)) 0%,
    color-mix(in oklab, var(--module-primary, #f97316) var(--dk-accent-area), var(--dk-surface)) 50%,
    color-mix(in oklab, var(--module-secondary, #fb923c) var(--dk-accent-area), var(--dk-surface)) 100%);
}
html[data-bs-theme="dark"] .kpi-card-bar-fill,
html[data-bs-theme="dark"] .progress-stack-seg { filter: saturate(.6); }
html[data-bs-theme="dark"] .proj-stats-period-current { color: oklch(from var(--module-primary, #f97316) max(l, var(--dk-ink-l)) min(c, var(--dk-ink-c)) h); }
html[data-bs-theme="dark"] .btn-admin-danger { background-color: #a94a4b; border-color: #a94a4b; }

/* Configuration Qualité : boutons de modale en dégradé vif (background-image) et
   en-têtes de groupe colorés depuis la base en style en ligne (.qms-cfg-group). Couleur
   inaccessible au CSS → désaturation par filtre : teinte et clarté gardées, donc le
   contraste du texte blanc aussi. */
html[data-bs-theme="dark"] .modal :is(.btn-primary, .btn-danger, .btn-success),
html[data-bs-theme="dark"] .btn-gradient { filter: saturate(.6); }
/* En-têtes de groupe : la couleur est en ligne (base) ; un voile de la surface posé en
   background-image se peint par-dessus elle et sous le contenu → teinte gardée, bloc sombre.
   (Le détecteur lit la couleur en ligne et ignore le voile : juger celui-ci sur capture.) */
html[data-bs-theme="dark"] .department-card.qms-cfg-group {
  background-image: linear-gradient(color-mix(in srgb, var(--dk-surface) 68%, transparent), color-mix(in srgb, var(--dk-surface) 68%, transparent)) !important;
  filter: saturate(.7);
}

/* Vitrine d'accueil (accueil/static/accueil/css/vitrine.css, home_feed.css) : décor
   « néon » vert. Désaturé par filtre (teintes gardées) ; boutons clairs à texte foncé
   gardés clairs pour le contraste, mais sourds et sans halo. */
html[data-bs-theme="dark"] .vx-hero-bg { filter: saturate(.45) brightness(.8); }
html[data-bs-theme="dark"] .vx-hero { filter: saturate(.85); }
html[data-bs-theme="dark"] .vx-btn-primary,
html[data-bs-theme="dark"] .vx-btn-primary:hover { filter: saturate(.55); box-shadow: none; }
html[data-bs-theme="dark"] .hx-grad { filter: saturate(.55); }
/* Sélecteur de langue du pied de page : fond plein à la couleur du module (style en ligne) */
html[data-bs-theme="dark"] #footer-lang-select,
html[data-bs-theme="dark"] select[name="language"] {
  background: color-mix(in oklab, var(--module-primary-strong, var(--module-primary, #6366f1)) var(--dk-accent-area), var(--dk-surface)) !important;
}

/* Entrée du menu utilisateur : l'icône suit le thème */
.dx-theme-toggle .dx-theme-dark-only { display: none !important; }
html[data-bs-theme="dark"] .dx-theme-toggle .dx-theme-dark-only { display: inline-flex !important; }
html[data-bs-theme="dark"] .dx-theme-toggle .dx-theme-light-only { display: none !important; }

/* Champs de saisie : contour par --dx-control-border (dx-kit.css), placeholder lisible, focus net */
html[data-bs-theme="dark"] .form-control::placeholder,
html[data-bs-theme="dark"] .tl-input::placeholder { color: var(--dk-text-faint); opacity: 1; }
html[data-bs-theme="dark"] :focus-visible { outline: 2px solid #9fbdfe; outline-offset: 2px; }

/* Couleurs d'état Bootstrap en texte : version claire de même teinte (≥ 7:1) */
html[data-bs-theme="dark"] .text-success { color: #64d7a6 !important; }
html[data-bs-theme="dark"] .text-danger { color: #fda297 !important; }
html[data-bs-theme="dark"] .text-primary { color: #9fbdfe !important; }
html[data-bs-theme="dark"] .text-secondary { color: var(--dk-text-muted) !important; }
html[data-bs-theme="dark"] .btn-outline-success { --bs-btn-color: #64d7a6; --bs-btn-border-color: #64d7a6; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #157347; --bs-btn-hover-border-color: #157347; }
html[data-bs-theme="dark"] .btn-outline-danger { --bs-btn-color: #fda297; --bs-btn-border-color: #fda297; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #b02a37; --bs-btn-hover-border-color: #b02a37; }
html[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: #9fbdfe; --bs-btn-border-color: #9fbdfe; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #0a58ca; --bs-btn-hover-border-color: #0a58ca; }

/* Pastille d'aide « ? » (Qualité) : fond clair sous texte blanc → inversée */
html[data-bs-theme="dark"] .help-icon { background: var(--dk-surface-3) !important; color: var(--dk-text) !important; }