/* Mode sombre (html[data-sf-mode="dark"]) — voir partials/theme_mode_head.html.
   Les ~190 gabarits écrivent leurs fonds clairs en dur : plutôt que de réécrire chaque
   page, la page entière est inversée (luminosité) en gardant les teintes (hue-rotate),
   puis on ré-inverse ce qui doit garder ses vraies couleurs : photos, logos, cartes,
   vidéos, et les blocs déjà sombres (bandeaux de marque, en-têtes héros) qui restent
   ainsi sombres. Le thème de couleurs (jetons --sf-*) s'applique normalement.
   Ré-inversion exacte : la page étant inversée à 92 % (y = .92 − .84·x), l'inverse est
   invert(1) suivi de contrast(1.19) (= 1/.84). Les blocs sombres non listés ici
   (dégradés écrits en ligne…) sont repérés au chargement et marqués .sf-mode-keep
   (partials/theme_mode_head.html). */

html[data-sf-mode="dark"] {
    filter: invert(.92) hue-rotate(180deg);
    background: #fff; /* inversé → quasi-noir */
    color-scheme: light; /* les contrôles natifs sont inversés avec la page */
}
html[data-sf-mode="dark"] body { background-color: #fff; }

/* Médias et contenus à garder tels quels (ré-inversés). */
html[data-sf-mode="dark"] :is(img, video, picture, iframe, canvas, object, embed, .leaflet-container, .sf-mode-keep),
html[data-sf-mode="dark"] [style*="background-image"]:not(:is(.main-navbar, .top-info-bar)) {
    filter: invert(1) hue-rotate(180deg) contrast(1.19);
}
/* Éléments déjà ré-inversés : leurs propres médias ne doivent pas l'être deux fois. */
html[data-sf-mode="dark"] :is(.leaflet-container, .sf-mode-keep, [style*="background-image"]) :is(img, video, canvas, iframe) { filter: none; }

/* Bandeaux sombres de marque : ils restent sombres (double inversion = couleurs d'origine). */
html[data-sf-mode="dark"] :is(.top-info-bar, .main-navbar, .sf-dh, .sf-space-side, .sf-brief-hero, .sf-m-hero, .th-hero, .th-night, .tp-row, .th-mock, .th-follow-visual, .site-footer) {
    filter: invert(1) hue-rotate(180deg) contrast(1.19);
}
html[data-sf-mode="dark"] :is(.top-info-bar, .main-navbar, .sf-brief-hero, .sf-m-hero, .th-hero, .th-night, .tp-row, .th-mock, .th-follow-visual, .site-footer) :is(img, video, canvas, iframe) { filter: none; }

/* Ombres : inversées elles deviendraient des halos clairs. */
html[data-sf-mode="dark"] * { text-shadow: none !important; }
html[data-sf-mode="dark"] :is(.card, .modal-content, .dropdown-menu, .sf-sheet-panel, .sf-dock, .sf-appbar) { box-shadow: 0 0 0 1px rgba(0, 0, 0, .08) !important; }

/* Bascule douce entre clair et sombre. */
html.sf-mode-switching, html.sf-mode-switching body { transition: filter .35s ease, background-color .35s ease; }

/* Sélecteur Clair / Sombre / Auto (feuille « Mon compte » et menu « … »). */
.sf-mode-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: #f1f5f9; }
.sf-mode-seg button { border: 0; background: transparent; border-radius: 10px; min-height: 40px; padding: 6px 8px; font-weight: 800; font-size: .85rem; color: #475569; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.sf-mode-seg button[aria-pressed="true"] { background: #fff; color: var(--sf-brand-800, #1b6535); box-shadow: 0 2px 8px rgba(15, 23, 42, .12); }
.sf-mode-row { padding: 10px 12px 4px; }
.sf-mode-row-title { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: .92rem; color: #0f172a; margin-bottom: 8px; }
.sf-mode-row-title small { font-weight: 600; color: #64748b; margin-left: auto; font-size: .76rem; }
.topbar-more-menu .sf-mode-seg { margin: 4px 8px 6px; min-width: 250px; }
.topbar-more-menu .sf-mode-seg button { min-height: 34px; font-size: .8rem; }

/* En-tête ordinateur (sombre, gardé tel quel) : ses menus déroulants blancs repassent
   en sombre comme le reste de la page (inversion annulée puis réappliquée). */
html[data-sf-mode="dark"] .sf-dh .sf-dh-pop { filter: invert(.92) hue-rotate(180deg); }
html[data-sf-mode="dark"] .sf-dh .sf-dh-pop :is(.sf-dh-acc-head, .sf-dh-avatar-ini, .sf-dh-acc-ini, .sf-dh-tile-ico) { filter: invert(1) hue-rotate(180deg) contrast(1.19); }