/* ── Habillage « site » du Simulateur, de la Démo et de l'espace commercial ──────────
   07/10/2026, demande Nicolas : « tout doit ressembler au site ». Quatre blocs flottants
   posés sur le décor 3D du site (opera-scene.js) : l'en-tête en haut, la navigation à
   gauche, les filtres à droite, et le bloc central (les indicateurs) au milieu.

   Thème (refondu le 08/10/2026) : le mode sombre ne passe PLUS par une inversion de toute la
   page — un filtre fait perdre au texte son lissage (texte moins net que sur le site).
     - L'en-tête et les volets sont écrits en SOMBRE NATIF, avec exactement les règles du volet
       du site (deck.css) : aucun filtre en mode sombre, donc un texte aussi net que sur le site.
       En mode clair, ils sont inversés d'un bloc (comme tout le site en mode clair).
     - Le contenu (bloc central, écrans de chargement/connexion, fenêtres) est écrit en CLAIR :
       rien en mode clair, inversé d'un bloc en mode sombre (html.theme-dk, posé par theme.js
       avec l'attribut data-partial).
     - Le corps des blocs de filtres (listes, champs, curseurs) est écrit en clair : il est
       toujours inversé une fois de plus que le volet qui le contient. */

:root { --gap: 16px; --blk-r: 22px; --inv: invert(1) hue-rotate(180deg); }

/* ── Fond ─────────────────────────────────────────────────────────────────── */
html, body { background: #eceef1 !important; }
html.theme-dk, html.theme-dk body { background: #050506 !important; }
#app-scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0;
  background: #000; filter: var(--inv); pointer-events: none; }
html.theme-dk #app-scene { filter: none; }

/* ── Le « châssis » ────────────────────────────────────────────────────────────
   08/10/2026 (2ᵉ passe) : la navigation et les filtres sont écrits en NATIF dans les deux modes
   (palette --sh-*), sans aucun filtre — un filtre fait perdre au texte son lissage, il paraissait
   « gras qui déborde » en mode clair. Seul l'en-tête (logo et pastilles d'icônes dessinés en blanc)
   est encore inversé en mode clair. */
body.app-shell { --sh-bg: rgba(247,246,244,.93); --sh: 0,0,0; --sh-on: #fff; --sh-shadow: rgba(0,0,0,.12); --sh-blk: #ecebe9; }
/* 09/10/2026 (demande Nicolas) : en sombre, fond NOIR des volets, de l'en-tête et du bloc central, et blocs
   en GRIS dedans (sections de navigation, blocs de filtres, cartes) — même principe que le mode clair */
html.theme-dk body.app-shell { --sh-bg: rgba(6,7,9,.96); --sh: 255,255,255; --sh-on: #000; --sh-shadow: rgba(0,0,0,.5); --sh-blk: #2a2b2f; }

body.app-shell header { filter: var(--inv); }
html.theme-dk body.app-shell header { filter: none; }
body.app-shell header {
  background: rgba(8, 9, 11, .93) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
body.app-shell .nav-side,
body.app-shell .flt-side {
  background: var(--sh-bg) !important; color: rgb(var(--sh));
  box-shadow: 0 18px 50px var(--sh-shadow);
}
body.app-shell header,
body.app-shell .nav-side,
body.app-shell .flt-side {
  border: 1px solid transparent !important;   /* le contour est le liseré verre (plus bas) */
  border-radius: var(--blk-r) !important;
  overflow: hidden;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
body.app-shell header .hdr-logo .lo,
body.app-shell header .hdr-logo .da,
body.app-shell header .hdr-after-logo { background: transparent !important; border-bottom: 0 !important; }

/* En-têtes des volets : celles du site (Navigation / Filtres) */
body.app-shell .side-hdr { background: transparent !important; border-bottom: 1px solid rgba(var(--sh),.06) !important; padding: 12px 16px !important; }
body.app-shell .side-hdr-t { color: rgba(var(--sh),.55) !important; font-family: 'Inter', sans-serif !important; font-size: 12px !important; font-weight: 400 !important; letter-spacing: .3px; }
body.app-shell .side-collapse { border-color: rgba(var(--sh),.14) !important; color: rgba(var(--sh),.5) !important; border-radius: 8px !important; background: transparent !important; }
body.app-shell .side-collapse:hover { border-color: rgba(var(--sh),.4) !important; color: rgb(var(--sh)) !important; }
body.app-shell .side-scroll, body.app-shell .aside-scroll { padding: 12px 10px 22px !important; }

/* ── Navigation : exactement le volet du site (deck.css) ───────────────────── */
/* sections imbriquées (Démo : 2.1, 2.2…) : pas de bloc, comme les lignes du site */
body.app-shell .nav-side .nv-node.nv-sec:not(.nv-top) { background: transparent !important; border: 0 !important; margin-bottom: 0 !important; border-radius: 0 !important; }
body.app-shell .nav-side .nv-node.nv-sec.nv-top {
  background: rgba(var(--sh),.045) !important;
  border: 1px solid transparent !important;   /* contour = liseré verre */
  border-radius: 12px !important; margin-bottom: 7px !important; overflow: hidden;
}
body.app-shell .nav-side .nv-row,
body.app-shell .nav-side .nv-page { line-height: 16px; }
body.app-shell .nav-side .nv-row:hover { background: rgba(var(--sh),.07) !important; }
body.app-shell .nav-side .nv-page:hover { background: rgba(var(--sh),.08) !important; }
body.app-shell .nav-side .nv-arrow { color: rgba(var(--sh),.42) !important; line-height: 16px; height: 16px; }
body.app-shell .nav-side .nv-lbl { color: rgba(var(--sh),.66) !important; line-height: 16px; }
body.app-shell .nav-side .nv-sec > .nv-row .nv-lbl { color: rgb(var(--sh)) !important; }
body.app-shell .nav-side .nv-top > .nv-row .nv-lbl { font-family: 'Poppins', sans-serif !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .2px; }
body.app-shell .nav-side .nv-children { border-left-color: rgba(var(--sh),.11) !important; }
body.app-shell .nav-side .nv-page .nv-lbl,
body.app-shell .nav-side a.nv-simpg .nv-lbl { color: rgba(var(--sh),.52) !important; }
/* page courante : la pastille du site */
body.app-shell .nav-side .nv-page.on,
body.app-shell .nav-side .nv-row.on,
body.app-shell .nav-side .nv-node.on > .nv-row,
body.app-shell .nav-side a.nv-simpg.active .nv-row { background: rgba(var(--sh),.92) !important; }
body.app-shell .nav-side .nv-page.on .nv-lbl,
body.app-shell .nav-side .nv-row.on .nv-lbl,
body.app-shell .nav-side .nv-node.on > .nv-row .nv-lbl,
body.app-shell .nav-side a.nv-simpg.active .nv-lbl { color: var(--sh-on) !important; font-weight: 600 !important; }
body.app-shell .nav-side .nv-row.on .nv-arrow { color: var(--sh-on) !important; opacity: .45; }
body.app-shell .nav-side .nv-sep { background: rgba(var(--sh),.10) !important; }

/* ── Filtres : même bloc que les sections du volet ─────────────────────────── */
body.app-shell .flt-side .fs,
body.app-shell .flt-side .pgrp {
  background: rgba(var(--sh),.045) !important;
  border: 1px solid transparent !important;   /* contour = liseré verre */
  border-radius: 12px !important; margin-bottom: 7px !important; overflow: hidden;
}
body.app-shell .flt-side .fs-hdr,
body.app-shell .flt-side .pgrp .side-sec {
  background: transparent !important; border-bottom: 1px solid rgba(var(--sh),.06) !important;
  color: rgb(var(--sh)) !important; padding: 8px 10px !important; line-height: 16px;
}
body.app-shell .flt-side .fs-hdr:hover,
body.app-shell .flt-side .pgrp .side-sec:hover { background: rgba(var(--sh),.07) !important; }
body.app-shell .flt-side .fs-title,
body.app-shell .flt-side .pgrp .side-sec { font-family: 'Poppins', sans-serif !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .2px; color: rgb(var(--sh)) !important; }
body.app-shell .flt-side .fs-arrow,
body.app-shell .flt-side .pgrp .caret { color: rgba(var(--sh),.42) !important; }
body.app-shell .flt-side .fs-clear { color: rgba(var(--sh),.42) !important; }
/* corps (listes, champs, curseurs) : écrit en clair ; natif en mode clair, inversé en sombre */
body.app-shell .flt-side .fs-body,
body.app-shell .flt-side .pgrp .pbody { background: #ecebe9 !important; }
html.theme-dk:not(.dk-native) body.app-shell .flt-side .fs-body,
html.theme-dk:not(.dk-native) body.app-shell .flt-side .pgrp .pbody { filter: var(--inv); }
html.theme-dk.dk-native body.app-shell .flt-side .fs-body,
html.theme-dk.dk-native body.app-shell .flt-side .pgrp .pbody { background: var(--sh-blk) !important; }

/* Boutons de réouverture des volets */
body.app-shell .side-reopen { background: var(--sh-bg) !important; border: 1px solid rgba(var(--sh),.12) !important; border-radius: 12px !important; color: rgba(var(--sh),.7) !important; }

/* ── Liseré verre des grands blocs, en CSS (08/10/2026) ───────────────────────
   Avant, posé par theme.js à l'exécution : il renonçait sur un bloc dont un descendant en
   position absolue risquait de bouger (cas du bloc central de la Démo une fois les données
   chargées) — d'où des contours sans effet verre. Ici il est toujours là. */
body.app-shell header::before,
body.app-shell .nav-side::before,
body.app-shell .flt-side::before,
body.app-shell.shell-flex main::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  pointer-events: none; z-index: 6;
  background: linear-gradient(135deg, rgba(var(--g),1) 0%, rgba(var(--g),.45) 20%,
    rgba(var(--g),.16) 50%, rgba(var(--g),.42) 80%, rgba(var(--g),.9) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
body.app-shell header { --g: 255,255,255; }               /* inversé en mode clair */
body.app-shell .nav-side, body.app-shell .flt-side { --g: var(--sh); }
body.app-shell.shell-flex main { --g: 0,0,0; position: relative; }   /* inversé en mode sombre */
body.app-shell.shell-flex header { position: relative; }
@media (min-width: 901px) { body.app-shell.shell-flex .nav-side, body.app-shell.shell-flex .flt-side { position: relative; } }
/* sections de navigation et blocs de filtres : le reflet suit la palette du mode */
body.app-shell .nav-side .od-ga, body.app-shell .flt-side .od-ga,
body.app-shell .nav-side .od-gb, body.app-shell .flt-side .od-gb { --od-gc: var(--sh); }

/* ── Le bloc central : même gris que les volets ────────────────────────────── */
/* Écrit dans la teinte qu'affichent les volets en mode clair ; inversé en mode sombre, il
   retombe sur le noir des volets. */
body.app-shell main { border-radius: var(--blk-r); background: rgba(247,246,244,.93) !important; }
body.app-shell main .main-scroll { background: transparent !important; }

/* ── Mode sombre : on inverse le contenu écrit en clair, pas le châssis ──────── */
/* Les voiles sombres (parcours de découverte, tiroirs, fenêtres) ne sont pas inversés : seules
   leurs cartes blanches le sont. */
html.theme-dk:not(.dk-native) body > :not(#app-scene):not(#gate):not(#loader):not(#tour):not(#tour-overlay):not(#mobOv):not(.mob-ov):not(#pwd-overlay):not(header):not(.nav-side):not(.flt-side):not(.side-reopen):not(.resize-handle):not(#app):not(#opera-fab):not(#opera-tip):not(#opera-panel):not(#opera-call):not(#support-fab):not(#support-panel):not(script):not(style):not(link),
html.theme-dk:not(.dk-native) body #app > :not(header):not(.side-reopen):not(.body-wrap):not(#tour-overlay):not(#focus-backdrop):not(.mob-overlay),
html.theme-dk:not(.dk-native) body .pwd-box,
html.theme-dk:not(.dk-native) body.app-shell .body-wrap > main { filter: var(--inv) contrast(1.1); }
/* photos et vidéos du contenu : ré-inversées pour garder leurs vraies teintes */
html.theme-dk:not(.dk-native) body.app-shell main img:not([src^="data:"]):not([src$=".svg"]):not(.leaflet-tile),
html.theme-dk:not(.dk-native) body.app-shell main video { filter: var(--inv); }
/* Démo — carte agrandie en plein écran : un filtre sur le bloc central ferait du bloc le
   repère de la carte (elle resterait enfermée dedans, sous le voile). On déplace l'inversion
   sur la carte elle-même pendant ce temps. */
html.theme-dk:not(.dk-native) body.app-shell main:has(.focused) { filter: none !important; }
html.theme-dk:not(.dk-native) body.app-shell main:has(.focused) .main-scroll { visibility: hidden; }
html.theme-dk:not(.dk-native) body.app-shell main .focused { visibility: visible; filter: var(--inv) contrast(1.1); }
/* textes secondaires : gris neutres, plus clairs une fois inversés */
html.theme-dk:not(.dk-native) body.app-shell { --text-dark: #000; --text-mid: #383838; --text-muted: #5a5a5a; }

/* ── Mise en page en 4 blocs (ordinateur) ─────────────────────────────────── */
@media (min-width: 901px) {
  /* Simulateur et commercial : en-tête et volets en position fixe */
  body.app-shell.shell-fixed header { top: var(--gap) !important; left: var(--gap) !important; right: var(--gap) !important; }
  body.app-shell.shell-fixed .nav-side,
  body.app-shell.shell-fixed .flt-side { top: calc(var(--header-h) + 2 * var(--gap)) !important; bottom: var(--gap) !important; }
  body.app-shell.shell-fixed .nav-side { left: var(--gap) !important; }
  body.app-shell.shell-fixed .flt-side { right: var(--gap) !important; }
  body.app-shell.shell-fixed main {
    position: fixed; z-index: 10; margin: 0 !important; overflow: auto;
    top: calc(var(--header-h) + 2 * var(--gap)); bottom: var(--gap);
    left: calc(var(--sidebar-w) + 2 * var(--gap)); right: calc(var(--flt-w) + 2 * var(--gap));
    padding: 26px 28px 40px !important;
    /* liseré verre sans pseudo-élément (main défile : un pseudo-élément défilerait avec lui) */
    border: 1.5px solid transparent;
    background: linear-gradient(rgb(247,246,244), rgb(247,246,244)) padding-box,
      linear-gradient(135deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.45) 20%, rgba(0,0,0,.16) 50%, rgba(0,0,0,.42) 80%, rgba(0,0,0,.9) 100%) border-box !important;
    transition: left .22s ease, right .22s ease;
  }
  body.app-shell.shell-fixed.nav-collapsed main { left: calc(var(--gap) * 2 + 26px); }
  body.app-shell.shell-fixed.flt-collapsed main { right: calc(var(--gap) * 2 + 26px); }
  body.app-shell.shell-fixed #resizeNav { left: calc(var(--sidebar-w) + var(--gap) * 1.5 - 3px) !important; top: calc(var(--header-h) + 2 * var(--gap)) !important; bottom: var(--gap) !important; }
  body.app-shell.shell-fixed #resizeFlt { right: calc(var(--flt-w) + var(--gap) * 1.5 - 3px) !important; top: calc(var(--header-h) + 2 * var(--gap)) !important; bottom: var(--gap) !important; }
  body.app-shell.shell-fixed .side-reopen { top: calc(var(--header-h) + 2 * var(--gap)) !important; }
  body.app-shell.shell-fixed .side-reopen.left { left: var(--gap) !important; }
  body.app-shell.shell-fixed .side-reopen.right { right: var(--gap) !important; }

  /* Démo : coquille en flex */
  body.app-shell.shell-flex #app { padding: var(--gap); gap: var(--gap); background: transparent; z-index: 1; }
  body.app-shell.shell-flex .body-wrap { background: transparent !important; }
  body.app-shell.shell-flex .resize-handle { width: var(--gap) !important; }
  body.app-shell.shell-flex .resize-handle::after { left: calc(var(--gap) / 2 - 1px); }
  body.app-shell.shell-flex main { overflow: hidden; }
  body.app-shell.shell-flex .side-reopen.left { left: var(--gap) !important; }
  body.app-shell.shell-flex .side-reopen.right { right: var(--gap) !important; }
}

/* Téléphone : pas de décor 3D (comme sur le site) — le canevas recouvrirait le contenu,
   qui y reste dans le flux de la page ; en-tête pleine largeur. */
@media (max-width: 900px) {
  #app-scene { display: none; }
  /* 18/10/2026 (demande Nicolas) : l'en-tête est un bloc arrondi comme les autres, aligné sur le bloc central */
  body.app-shell header { top: 8px !important; left: 0 !important; right: 0 !important; border-radius: var(--blk-r) !important; }
  body.app-shell #app { padding-top: calc(var(--header-h) + 16px) !important; }
}

/* ── Liseré verre plus franc (08/10/2026) ───────────────────────────────────── */
body.app-shell .od-ga::after, body.app-shell .od-gb::before { padding: 1.5px; }

/* ── Couleurs en verre (dégradé vertical, reflet en haut) ──────────────────── */
/* Le bleu d'accent du site. En mode sombre le contenu est inversé : on écrit les teintes dont
   l'inversion donne celles du site (#E6FAFF → #1AA8D8). */
body.app-shell .od-accent,
body.app-shell .card-title b, body.app-shell .focus-ttl b, body.app-shell .ttl-red {
  background: linear-gradient(180deg, #7FDCFF 0%, #2FB6F2 30%, #1593D8 52%, #0B6AA3 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
html.theme-dk:not(.dk-native) body.app-shell .od-accent,
html.theme-dk:not(.dk-native) body.app-shell .card-title b, html.theme-dk:not(.dk-native) body.app-shell .focus-ttl b,
html.theme-dk:not(.dk-native) body.app-shell .ttl-red {
  background: linear-gradient(180deg, #000F18 0%, #003F66 30%, #0072BA 52%, #008DBD 100%);
  -webkit-background-clip: text; background-clip: text; }
/* Vert (ce que ça rapporte) et rouge (ce que ça coûte) gardent leur sens, en verre. */
body.app-shell .pl-val, body.app-shell .bubble-line, body.app-shell .hl2x,
body.app-shell [style*="color:var(--red)"] {
  background: linear-gradient(180deg, #FF7B7B 0%, #E53535 55%, #B71F1F 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
body.app-shell .pl-val.gain, body.app-shell .bubble-line.gain, body.app-shell .kpi.win .val:not([style*="--red"]),
body.app-shell .exp-total .et-row .val, body.app-shell [style*="color:var(--green-d)"], body.app-shell [style*="color:var(--green)"] {
  background: linear-gradient(180deg, #2FD39A 0%, #0FA571 55%, #087A54 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
html.theme-dk:not(.dk-native) body.app-shell .pl-val, html.theme-dk:not(.dk-native) body.app-shell .bubble-line,
html.theme-dk:not(.dk-native) body.app-shell .hl2x, html.theme-dk:not(.dk-native) body.app-shell [style*="color:var(--red)"] {
  background: linear-gradient(180deg, #4E1818 0%, #EA5454 55%, #FF7863 100%);
  -webkit-background-clip: text; background-clip: text; }
html.theme-dk:not(.dk-native) body.app-shell .pl-val.gain, html.theme-dk:not(.dk-native) body.app-shell .bubble-line.gain,
html.theme-dk:not(.dk-native) body.app-shell .kpi.win .val:not([style*="--red"]), html.theme-dk:not(.dk-native) body.app-shell .exp-total .et-row .val,
html.theme-dk:not(.dk-native) body.app-shell [style*="color:var(--green-d)"], html.theme-dk:not(.dk-native) body.app-shell [style*="color:var(--green)"] {
  background: linear-gradient(180deg, #00271E 0%, #007557 55%, #009C6C 100%);
  -webkit-background-clip: text; background-clip: text; }
/* blocs sur plusieurs lignes : le reflet se répète à chaque ligne */
body.app-shell .bubble-line { background-size: 100% 1.3em; }

/* Curseurs de paramètres : le bleu d'accent au lieu du vert (le corps des blocs de filtres
   est toujours inversé une fois de plus que le volet : en mode clair il s'affiche tel qu'écrit,
   en mode sombre inversé). */
body.app-shell .prange::-webkit-slider-thumb { background: #35D7FF !important; }
body.app-shell .prange::-moz-range-thumb { background: #35D7FF !important; }
html.theme-dk:not(.dk-native) body.app-shell .prange::-webkit-slider-thumb { background: #0072BA !important; }
html.theme-dk:not(.dk-native) body.app-shell .prange::-moz-range-thumb { background: #0072BA !important; }

/* ── Parcours de découverte (08/10/2026) : zone mise en avant cerclée du bleu d'accent, carte
   de texte blanche dans les deux modes (elle se détache du mode sombre), contour en verre. */
body.app-shell .tour-hi { outline-color: #35D7FF !important; }
body.app-shell #tour-spot { outline: 2px solid #35D7FF; }
body.app-shell .tour-pop, body.app-shell #tour-tip { border-radius: 14px !important; }

/* ── Passage d'une page à l'autre sans à-coup (08/10/2026) ─────────────────────
   Espace commercial : 1) Dashboard, 2) Simulateur, 3) Démo sont 3 pages distinctes. Avec les
   transitions de vue entre documents (Chrome, Edge, Safari récents), l'en-tête, les volets et le
   décor restent en place pendant que le contenu passe en fondu ; ailleurs, chargement habituel. */
@view-transition { navigation: auto; }
#app-scene { view-transition-name: od-scene; }
body.app-shell header { view-transition-name: od-header; }
body.app-shell .nav-side { view-transition-name: od-nav; }
body.app-shell .flt-side { view-transition-name: od-flt; }
::view-transition-group(*) { animation-duration: .35s; animation-timing-function: ease; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* ── Liseré verre des blocs des volets (sections de navigation, blocs de filtres), 08/10/2026 ──
   Peint dans le fond (anneau), sans pseudo-élément ni changement de positionnement : posé par
   theme.js il pouvait sauter sur un bloc (cas d'« Organisation » une fois ses listes déroulantes
   construites). Fond plein = la teinte du bloc translucide sur le volet. */
body.app-shell .nav-side .nv-node.nv-sec.nv-top,
body.app-shell .flt-side .fs,
body.app-shell .flt-side .pgrp {
  border: 1.5px solid transparent !important;
  background: linear-gradient(var(--sh-blk), var(--sh-blk)) padding-box,
    linear-gradient(135deg, rgba(var(--sh),.95) 0%, rgba(var(--sh),.32) 20%, rgba(var(--sh),.1) 50%,
      rgba(var(--sh),.3) 80%, rgba(var(--sh),.75) 100%) border-box !important;
}
/* Parcours de découverte de la Démo : sa bulle est rangée directement sous <body> ; elle reste
   blanche dans les deux modes (non inversée), et centrée sans translation à demi-pixel (texte net). */
#tour-tip.center { transform: none !important; inset: 0 !important; margin: auto !important; height: fit-content !important; }

/* ── Mode sombre natif (08/10/2026, dark-native.js) ────────────────────────────
   Le contenu n'est plus inversé par un filtre (le texte y perdait son lissage : « gras pas
   net ») : dark-native.js réécrit ses couleurs en sombre. Ici, ce qui vient de cette feuille. */
html.theme-dk.dk-native body.app-shell main { background: var(--sh-bg) !important; }
html.theme-dk.dk-native body.app-shell.shell-flex main { --g: 255,255,255; }
@media (min-width: 901px) {
  html.theme-dk.dk-native body.app-shell.shell-fixed main {
    background: linear-gradient(rgb(8,9,11), rgb(8,9,11)) padding-box,
      linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.45) 20%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.42) 80%, rgba(255,255,255,.9) 100%) border-box !important; }
}
/* liseré verre des cartes : reflet blanc en sombre, graphite en clair, quel que soit le mode au
   moment où theme.js l'a posé */
html.theme-dk.dk-native .od-dkz :is(.od-gl,.od-gd), html.theme-dk.dk-native .od-dkz:is(.od-gl,.od-gd) { --od-gc: 255,255,255; }
html:not(.theme-dk) .od-dkz :is(.od-gl,.od-gd), html:not(.theme-dk) .od-dkz:is(.od-gl,.od-gd) { --od-gc: 0,0,0; }
/* pictogrammes (images en data: / svg) : dessinés en noir pour le clair, inversés */
html.theme-dk.dk-native .od-dkz img:is([src^="data:"],[src$=".svg"]) { filter: var(--inv); }
/* fonds de carte : sombres, comme avant */
html.theme-dk.dk-native .od-dkz .leaflet-tile-pane,
html.theme-dk.dk-native .od-dkz #viz-map .leaflet-tile-pane { filter: grayscale(1) invert(1) brightness(.85) contrast(.9); }
/* couleurs en verre, écrites directement dans leur teinte sombre */
html.theme-dk.dk-native body.app-shell .od-accent,
html.theme-dk.dk-native body.app-shell .card-title b, html.theme-dk.dk-native body.app-shell .focus-ttl b,
html.theme-dk.dk-native body.app-shell .ttl-red {
  background: linear-gradient(180deg, #E6FAFF 0%, #8FE8FF 30%, #35D7FF 52%, #1AA8D8 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
html.theme-dk.dk-native body.app-shell .pl-val, html.theme-dk.dk-native body.app-shell .bubble-line,
html.theme-dk.dk-native body.app-shell .hl2x, html.theme-dk.dk-native body.app-shell [style*="color:var(--red)"] {
  background: linear-gradient(180deg, #FFB0B0 0%, #FF6B6B 50%, #E84545 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
html.theme-dk.dk-native body.app-shell .pl-val.gain, html.theme-dk.dk-native body.app-shell .bubble-line.gain,
html.theme-dk.dk-native body.app-shell .kpi.win .val:not([style*="--red"]), html.theme-dk.dk-native body.app-shell .exp-total .et-row .val,
html.theme-dk.dk-native body.app-shell [style*="color:var(--green-d)"], html.theme-dk.dk-native body.app-shell [style*="color:var(--green)"] {
  background: linear-gradient(180deg, #A6F7D6 0%, #3BE0A5 50%, #14B57E 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
html.theme-dk.dk-native body.app-shell .bubble-line { background-size: 100% 1.3em; }
html.theme-dk.dk-native body.app-shell .prange::-webkit-slider-thumb { background: #35D7FF !important; }
html.theme-dk.dk-native body.app-shell .prange::-moz-range-thumb { background: #35D7FF !important; }
/* pastilles de légende : liseré pour qu'une teinte proche du fond reste visible (08/10/2026) */
body.app-shell main .legend .dot { box-shadow: inset 0 0 0 1px rgba(0,0,0,.35); }
html.theme-dk body.app-shell main .legend .dot { box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }