/* ───────────────────────────────────────────────────────────────
   OptiDress · thème sombre (octobre 2026)
   Chargé par toutes les pages sauf la boutique test, après les autres
   feuilles. Ne s'applique que si <html data-theme="sombre">, posé par
   js/theme.js (double-clic là où il n'y a rien à cliquer) et, au
   chargement, par la ligne « Thème sombre » du script d'en-tête des
   pages. Le clair reste l'affichage par défaut.

   Principe :
   1. la page (fonds, textes, filets, cartes) passe sur la palette sombre
      en redéfinissant les variables de site.css ;
   2. les « écrans » restent tels quels : maquettes du widget, de la
      boutique et du tableau de bord, vidéos, photos produit. Ils
      reprennent la palette d'origine (îlots clairs) ;
   3. les sections déjà sombres ou bleues (film, vision, bandes) gardent
      aussi la palette d'origine ;
   4. le reste : les quelques couleurs écrites en dur hors des îlots.
─────────────────────────────────────────────────────────────── */

/* ── 0. Bascule : le nouveau thème s'étend en cercle depuis le point touché
      (js/theme.js anime le masque ; ici, on coupe le fondu par défaut) ── */
html.theme-bascule::view-transition-old(root),
html.theme-bascule::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.theme-bascule::view-transition-old(root) { z-index: 1; }
html.theme-bascule::view-transition-new(root) { z-index: 2; }
/* double appui sur téléphone : il bascule le thème, il ne zoome plus (le zoom à deux
   doigts reste possible) */
html { touch-action: manipulation; }

/* ── 1. Palette sombre ────────────────────────────────────────── */
html[data-theme="sombre"] {
  color-scheme: dark;
  --ink: #f2f4f8;
  --ink-2: #d0d5de;
  --muted: #a0a8b6;
  --faint: #8d95a4;
  --line: #1e232d;
  --line-2: #2c3340;
  --paper: #0b0d12;
  --mist: #11141b;
  --mist-2: #181c25;
  --blue: #4780ff;             /* 5,4:1 sur le fond, 4,9:1 sur --blue-50 */
  --blue-2: #76a1ff;
  --navy: #002899;
  --blue-50: #0e1832;
  --ok: #45c98a;
  --ok-50: #0f2a1e;
  --warn: #e3a556;
  --warn-50: #2c2110;
  --bad: #ff8178;
  --bad-50: #331a19;
  /* les ombres s'inversent comme le reste : sombres sur le clair, claires sur le sombre */
  --lueur: 214, 226, 255;      /* blanc à peine bleuté */
  --shadow-1: 0 1px 2px rgba(var(--lueur), .05), 0 10px 30px -14px rgba(var(--lueur), .16);
  --shadow-2: 0 2px 6px rgba(var(--lueur), .05), 0 30px 70px -28px rgba(var(--lueur), .34);
  /* propres au thème */
  --carte: #12151c;            /* surface des cartes */
  --plein: #0055fe;            /* aplats bleus sous du texte blanc : le bleu de marque, inchangé */
}

/* ── 2 et 3. Îlots : palette d'origine ────────────────────────── */
html[data-theme="sombre"] :is(
  /* écrans (clairs) */
  .comp, .steps .ui, .twin-card, .twin-av, .capture-cadre, .dash-cadre, .vet-pile, .motion-cadre, .p-capture-cadre, .p-plat, .od-sim,
  /* sections déjà sombres ou bleues */
  .film, .cta, .trust, .od-dark
) {
  --ink: #0b0d12;
  --ink-2: #2a2e37;
  --muted: #555b68;
  --faint: #666c78;
  --line: #e6e8ec;
  --line-2: #d3d7de;
  --paper: #ffffff;
  --mist: #f4f5f7;
  --mist-2: #eceef2;
  --blue: #0055fe;
  --blue-2: #0043cc;
  --blue-50: #eef3ff;
  --ok: #147443;
  --ok-50: #eaf6ef;
  --warn: #9c5d0e;
  --warn-50: #fdf4e6;
  --bad: #c0392f;
  --bad-50: #fcedec;
  --shadow-1: 0 1px 2px rgba(11, 13, 18, .05), 0 10px 30px -14px rgba(11, 13, 18, .16);
  --shadow-2: 0 2px 6px rgba(11, 13, 18, .05), 0 30px 70px -28px rgba(0, 20, 70, .34);
}
html[data-theme="sombre"] :is(.comp, .steps .ui, .twin-card, .twin-av, .capture-cadre, .dash-cadre, .vet-pile, .motion-cadre, .p-capture-cadre, .p-plat, .od-sim) {
  color: var(--ink);
  color-scheme: light;
}

/* ── 4. Socle ─────────────────────────────────────────────────── */
html[data-theme="sombre"] .nav { background: var(--paper); }
@media (hover: hover) and (pointer: fine) {
  html[data-theme="sombre"] .nav { background: rgba(11, 13, 18, .78); }
}
html[data-theme="sombre"] .btn-primary { background: var(--plein); }
html[data-theme="sombre"] .btn-primary:hover { background: #2c69ff; }
html[data-theme="sombre"] .btn-ghost { background: var(--carte); color: var(--ink); border-color: var(--line-2); }
html[data-theme="sombre"] .btn-ghost:hover { border-color: var(--ink); }
html[data-theme="sombre"] :is(.lang span, .skip) { color: var(--paper); }
html[data-theme="sombre"] :is(.faq-item[open] summary i, .faq-item[open] .faq-plus) { color: var(--paper); }
html[data-theme="sombre"] .menu { background: var(--paper); }
/* sélecteur de langue : la liste sur une surface de carte */
html[data-theme="sombre"] .langsel-panel { background: var(--carte); border-color: var(--line-2); box-shadow: var(--shadow-2); }
html[data-theme="sombre"] :is(.langsel-it.is-on, .langgrid-it.is-on) { background: var(--plein); border-color: var(--plein); }
html[data-theme="sombre"] .btn-wa { background: var(--carte); }

/* cartes de la page : blanches en clair, surface sombre ici */
html[data-theme="sombre"] :is(
  .pill, .p-pill, .conv, .pillar, .mode:not(.mode-main), .plan:not(.plan-main), .cap-e:not(.cap-but),
  .plats li:not(.plat-all) a, .sub-step, .sub-sec-alt .p-lien, .int-card, .cmpx-card, .demo-card, .cmp
) { background: var(--carte); }
html[data-theme="sombre"] :is(.note-app:hover) { background: #16254d; }

/* ── 5. Home ──────────────────────────────────────────────────── */
/* chiffres en dégradé : du bleu clair au bleu de marque (le marine se perdait sur le fond) */
html[data-theme="sombre"] .stat-n { background-image: linear-gradient(120deg, #a9c4ff 5%, #5d93ff 55%, #2f6dff 100%); }
html[data-theme="sombre"] .why-num b { background-image: linear-gradient(165deg, #b4ccff 0%, #5d93ff 45%, #1f5fff 100%); }
html[data-theme="sombre"] :is(.stats, .pillar)::before { background: linear-gradient(90deg, #1f5fff, #5d93ff 55%, #a9c4ff); }
html[data-theme="sombre"] .jauge-a { background: linear-gradient(90deg, #1f5fff, #5d93ff); }
/* la foule des 500 visiteurs : même dessin, sur fond sombre */
html[data-theme="sombre"] .conv { --rouge-t: #ff6f8a; }
html[data-theme="sombre"] .conv-foule { background: radial-gradient(ellipse 60% 55% at 50% 50%, #151a25 20%, #0d1017 100%); }
html[data-theme="sombre"] .conv-foule::before { background-image: radial-gradient(rgba(93, 147, 255, .2) 1px, transparent 1.3px); }
html[data-theme="sombre"] .diffs.suivi .diff:not(.on):not(.passe)::after { background: var(--paper); }
/* logos des plateformes : en blanc */
html[data-theme="sombre"] :is(.plats li:not(.plat-all) img, .mode:not(.mode-main) .mode-top img, .int-card img) { filter: brightness(0) invert(1); opacity: .72; }
html[data-theme="sombre"] :is(.plats li:not(.plat-all) a:hover img, .int-card:hover img) { filter: brightness(0) invert(1); opacity: 1; }
html[data-theme="sombre"] .plats .plat-all a { background: var(--plein); }
html[data-theme="sombre"] .plats .plat-all a:hover { background: #2c69ff; }

/* ── 6. Pages intérieures ─────────────────────────────────────── */
html[data-theme="sombre"] .field :is(input, select, textarea) { background: var(--mist); color: var(--ink); }
html[data-theme="sombre"] .cmp tbody th { background: var(--mist); }
@media (max-width: 700px) { html[data-theme="sombre"] div.cmp-wrap table.cmp tbody tr { background: var(--carte); } }
@media (min-width: 701px) and (max-width: 1040px) { html[data-theme="sombre"] div.cmp-wrap table.cmp-mkt tbody tr { background: var(--carte); } }
html[data-theme="sombre"] .sub-sec-alt .sub-steps > .sub-step:nth-child(4):last-child { background: var(--carte); }
/* pages produit */
html[data-theme="sombre"] .produit .sub-hero {
  background: radial-gradient(48% 62% at 78% 42%, rgba(0, 85, 254, .22), transparent 72%), var(--paper);
}
html[data-theme="sombre"] .produit .sub-hero .kicker,
html[data-theme="sombre"] .produit .sub-hero .kicker::after { background: var(--carte); }
html[data-theme="sombre"] .produit .sub-sec-alt { background: linear-gradient(180deg, #0f1420 0%, #101b38 100%); }
/* chiffres en dégradé des pages intérieures */
html[data-theme="sombre"] .sub-stat b { background-image: linear-gradient(120deg, #a9c4ff 5%, #5d93ff 55%, #2f6dff 100%); }
html[data-theme="sombre"] .sub-stats::before { background: linear-gradient(90deg, #1f5fff, #5d93ff 55%, #a9c4ff); }
/* pages légales : tableaux */
html[data-theme="sombre"] .legal-t { border-color: var(--line-2); }
html[data-theme="sombre"] .legal-t :is(th, td) { border-bottom-color: var(--line); }
html[data-theme="sombre"] .legal-t thead th { background: var(--mist-2); }
html[data-theme="sombre"] .legal-conf code { background: rgba(255, 255, 255, .08); }
/* page allemande : sa propre feuille, mêmes cartes */
html[data-theme="sombre"] :is(.de-nav, .de-pied) { border-color: var(--line); }
html[data-theme="sombre"] .cmp-prose p { color: var(--ink-2); }
html[data-theme="sombre"] :is(.de-formel, .de-t) { background: var(--carte); border-color: var(--line-2); }
html[data-theme="sombre"] .de-formel { border-left-color: var(--blue); }
html[data-theme="sombre"] :is(.de-formel-nom, .de-quellen a) { color: var(--blue); }
html[data-theme="sombre"] :is(.de-formel-corps, .de-t tbody th) { color: var(--ink); }
html[data-theme="sombre"] :is(.de-formel-note, .de-note) { color: var(--muted); }
html[data-theme="sombre"] .de-t :is(th, td) { border-bottom-color: var(--line); }
html[data-theme="sombre"] .de-t thead th { background: var(--mist-2); color: var(--muted); }
html[data-theme="sombre"] .de-t tbody th { background: rgba(255, 255, 255, .03); }
html[data-theme="sombre"] .de-quellen li { color: var(--ink-2); }

/* ── 7. Bandeau de consentement (feuille posée par js/analytics.js) ── */
html[data-theme="sombre"] .od-cc { background: #12151c; color: #d0d5de; border-color: #2c3340; box-shadow: 0 2px 6px rgba(var(--lueur), .08), 0 24px 50px -20px rgba(var(--lueur), .4); }
html[data-theme="sombre"] .od-cc a { color: #6a98ff; }
html[data-theme="sombre"] .od-cc .od-cc-non { background: transparent; color: #f2f4f8; border-color: #3a4252; }
html[data-theme="sombre"] .od-cc .od-cc-non:hover { border-color: #f2f4f8; }
/* bande des logos clients des pages intérieures : en blanc */
html[data-theme="sombre"] .od-logos-set img,
html[data-theme="sombre"] .produit .od-logos-set img { filter: brightness(0) invert(1); opacity: .55; }

/* ── 8. Ombres claires ────────────────────────────────────────────
   En thème clair, les cartes et les écrans portent une ombre sombre, teintée de
   marine. Ici la même ombre, à la même place et de la même force, devient une
   lueur claire. Les ombres portées SUR un écran clair (panneau du widget sur la
   fiche produit…) restent sombres : elles gardent la palette d'origine. ── */
/* cartes de la page */
html[data-theme="sombre"] .menu { box-shadow: 0 24px 40px -28px rgba(var(--lueur), .35); }
html[data-theme="sombre"] .conv { box-shadow: 0 1px 2px rgba(var(--lueur), .05), 0 50px 90px -60px rgba(var(--lueur), .45); }
html[data-theme="sombre"] :is(.pillar, .sub-step, .cmpx-card) { box-shadow: 0 1px 2px rgba(var(--lueur), .05), 0 14px 34px -22px rgba(var(--lueur), .28); }
html[data-theme="sombre"] .pillar:hover { box-shadow: 0 2px 4px rgba(var(--lueur), .06), 0 30px 54px -26px rgba(71, 128, 255, .6); }
html[data-theme="sombre"] :is(.sub-step, .cmpx-card):hover { box-shadow: 0 2px 4px rgba(var(--lueur), .06), 0 28px 50px -26px rgba(71, 128, 255, .55); }
html[data-theme="sombre"] .cap-e:not(.cap-but) { box-shadow: 0 1px 2px rgba(var(--lueur), .05), 0 30px 60px -44px rgba(var(--lueur), .4); }
html[data-theme="sombre"] .produit-optimove .cap-e:nth-child(2) { box-shadow: 0 0 0 4px rgba(71, 128, 255, .14), 0 30px 60px -44px rgba(var(--lueur), .4); }
/* écrans : la lueur tombe sur la page */
html[data-theme="sombre"] .st { box-shadow: 0 1px 2px rgba(var(--lueur), .05), 0 10px 30px -14px rgba(var(--lueur), .16); }
html[data-theme="sombre"] .pn { box-shadow: var(--shadow-2), 0 30px 70px -28px rgba(var(--lueur), .34); }
html[data-theme="sombre"] .motion-cadre { box-shadow: 0 2px 6px rgba(var(--lueur), .08), 0 50px 100px -40px rgba(var(--lueur), .5); }
html[data-theme="sombre"] .vet-in { box-shadow: 0 2px 4px rgba(var(--lueur), .06), 0 30px 50px -26px rgba(var(--lueur), .45); }
html[data-theme="sombre"] :is(.capture-cadre, .p-capture-cadre) { box-shadow: 0 2px 6px rgba(var(--lueur), .06), 0 44px 90px -40px rgba(var(--lueur), .45); }
html[data-theme="sombre"] .twin-card { box-shadow: 0 1px 2px rgba(var(--lueur), .05), 0 30px 60px -40px rgba(var(--lueur), .45); }
html[data-theme="sombre"] .twin-av { box-shadow: 0 50px 90px -60px rgba(var(--lueur), .6); }
html[data-theme="sombre"] .dash-cadre { box-shadow: 0 2px 6px rgba(var(--lueur), .06), 0 50px 90px -50px rgba(var(--lueur), .5); }
html[data-theme="sombre"] .od-sim { box-shadow: 0 2px 6px rgba(var(--lueur), .05), 0 30px 70px -28px rgba(var(--lueur), .34); }
html[data-theme="sombre"] .sub-visual-video video { box-shadow: 0 40px 80px -44px rgba(var(--lueur), .55); }
html[data-theme="sombre"] .produit :is(.sub-visual-video video, .sub-visual > img) { box-shadow: 0 0 0 7px rgba(71, 128, 255, .12), 0 50px 100px -44px rgba(var(--lueur), .6); }