/* ==========================================================================
   EASY-POINTAGES — mode sombre (2026-11-01)
   Chargée en dernier par chaque page avec media="(prefers-color-scheme: dark)"
   (shared.LIEN_SOMBRE ; patch_racine.py la pose dans les pages racine) : elle
   ne s'applique, et ne retarde l'affichage, que si le téléphone ou l'ordinateur
   du visiteur est réglé en mode sombre. Pas de bouton : le site suit le réglage.
   - Les jetons (--h-* de home.css, --ep-* de seo_pages.css) passent en sombre.
   - Les fonds blancs écrits en dur dans home.css, racine.css, seo_pages.css et
     my_style.css sont repris ici, même sélecteur (cette feuille vient après).
   - Restent clairs, comme dans la réalité : les fenêtres de l'application
     (maquettes, captures), les cartes flottantes du hero, les logos des
     partenaires et des marques, les photos de pointeuses et les scènes animées.
     Les maquettes retrouvent les jetons clairs.
   - Le hero, la section pointeuses et le pied de page sont déjà sombres.
   - Le bouton de l'en-tête (shared.bouton_theme) impose l'autre mode : le
     script qui suit le lien de cette feuille met son media à "all" ou
     "not all" avant le premier affichage, nav.js le change au clic.
   ========================================================================== */

:root {
  color-scheme: dark;
  --ep-text: #c2cedc;
  --ep-muted: #94a5ba;
  --ep-soft: #0c2442;
  --ep-border: #1b3556;
  --ep-primary-dark: #8cc2ee;
  --ep-shadow: 0 0 45px rgba(0, 0, 0, .35);
  --ep-surface: #0b2140;
}

body.page-home {
  --h-ink: #eaf2fb;
  --h-text: #c2cedc;
  --h-muted: #94a5ba;
  --h-bg: #081a31;
  --h-bg-2: #0c2442;
  --h-line: #1b3556;
  --h-blue-600: #8cc2ee;
  --h-ombre-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px -6px rgba(0, 0, 0, .45);
  --h-ombre: 0 18px 40px -18px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .3);
  --h-ombre-lg: 0 40px 90px -30px rgba(0, 0, 0, .85);
  background: #06142a;
}

/* maquettes de l'application et cartes flottantes : jetons clairs */
body.page-home .home-mock,
body.page-home .home-carte,
body.page-home .home-hero__marques,
body.page-home .home-galerie__cadre,
body.page-racine .page-mock-simple,
.seo-illustration,
body.page-seo .page-visuel--illustration figure {
  --ep-text: #3b3535;
  --ep-muted: #5f6b76;
  --h-ink: #0f223b;
  --h-text: #3d4b5d;
  --h-muted: #637389;
  --h-bg: #f4f8fc;
  --h-bg-2: #eaf2fa;
  --h-line: #e1e9f2;
  --h-blue-600: #2b6b9f;
}

/* --- En-tête, navigation, menu mobile ----------------------------------- */
#header.header-transparent,
#header.header-scrolled {
  background: transparent;
}

body.page-home #header.header-transparent::before {
  background: rgba(6, 20, 42, .9);
}

body.page-home #header.header-transparent {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}

body.page-home #header.header-scrolled {
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .8);
}

#header .navbar a,
#header .navbar a:focus {
  color: #dbe6f3;
}

#header .navbar a:hover,
#header .navbar .active,
#header .navbar li:hover > a {
  color: #8cc2ee;
}

.navbar .dropdown>ul {
  background: var(--ep-surface);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .8);
}

#header .navbar .dropdown>ul a {
  color: var(--ep-text);
}

#header .navbar .dropdown>ul a:hover,
#header .navbar .dropdown>ul .active {
  background: var(--ep-soft);
  color: #8cc2ee;
}

@media screen and (max-width: 992px) {
  .navbar {
    background-color: rgba(3, 10, 22, .7);
  }

  #navbar .navbar-mobile {
    background: #081a31;
  }

  #navbar .navbar-mobile::before {
    background: #2a4468;
  }
}

.header-langue__bouton,
.header-langue__menu {
  background: var(--ep-surface);
}

.header-langue__menu {
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .85);
}

.header-langue__actuel {
  background: #12305a;
  color: #8cc2ee;
}

.header-langue__drapeau {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .22);
}

/* --- Accueil (home.css) -------------------------------------------------- */
body.page-home .btn-home--clair,
body.page-home .hero-consulting-banner,
body.page-home .flows__onglets,
body.page-home .home-comparaison__carte,
body.page-home .solution,
body.page-home .service,
body.page-home .home-faq__aide,
body.page-home .faq .accordion-list li,
body.page-home .testimonials .testimonial-item,
body.page-home .home-contact__carte {
  background: var(--ep-surface);
}

body.page-home .home-partenaires {
  background: #06142a;
}

body.page-home .flows__onglet:hover i {
  background: var(--h-bg-2);
}

body.page-home .home-comparaison__carte--apres {
  background: linear-gradient(var(--ep-surface), var(--ep-surface)) padding-box, var(--h-grad) border-box;
}

body.page-home .home-comparaison__carte--avant .home-comparaison__etiquette {
  background: rgba(239, 68, 68, .16);
  color: #ff9b9b;
}

body.page-home .solution__icone,
body.page-home .home-apropos__visuel {
  background: linear-gradient(150deg, #12305a, #0c2442);
}

body.page-home #gallery .carousel-indicators [data-bs-target],
body.page-home .testimonials .swiper-pagination .swiper-pagination-bullet {
  background: #2a4468;
}

body.page-home .contact .email-form .form-control {
  background: #081a31;
  border-color: var(--h-line);
  color: var(--h-ink);
}

body.page-home .contact .email-form .form-control:focus {
  background: #0b2140;
  color: var(--h-ink);
}

body.page-home .contact .email-form .form-control::placeholder {
  color: #7f91a8;
}

/* --- Pages racine et générées (racine.css) -------------------------------- */
body.page-racine .page-lien-carte,
body.page-racine .page-puce,
body.page-racine .page-faq__item,
body.page-racine .page-fiche,
body.page-racine .page-territoires__bloc,
body.page-racine .page-doc__texte,
body.page-racine .page-doc__carte {
  background: var(--ep-surface);
}

body.page-racine .page-lien-carte__icone {
  background: linear-gradient(150deg, #12305a, #0c2442);
}

body.page-racine .page-fiche > i:first-child {
  background: rgba(239, 68, 68, .16);
}

/* --- Blocs de contenu des pages générées (seo_pages.css) ------------------ */
.seo-section--soft .seo-olist li::before,
.seo-card,
.seo-table-wrap,
.seo-table,
.seo-section--soft .seo-callout,
.seo-chip,
.seo-product,
.seo-term,
.flow__etapes li {
  background: var(--ep-surface);
}

.seo-card__icone,
.flow__num {
  background: linear-gradient(150deg, #12305a, #0c2442);
}

.seo-table tbody tr:nth-child(even),
.seo-specs tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, .03);
}

.seo-callout > i {
  background: rgba(56, 132, 195, .18);
}

.seo-callout--legal > i {
  background: rgba(245, 158, 11, .16);
}

.seo-callout--tip > i {
  background: rgba(16, 185, 129, .16);
}

.seo-officiel__tag {
  background: #12305a;
  color: #8cc2ee;
}

.flow__titre,
.flow__etapes strong {
  color: #eaf2fb;
}

.flow__etapes li.is-active {
  background: linear-gradient(180deg, #0f2a4d, #0b2140);
}

/* --- Restes de my_style.css (anciennes pages, contenus du back-office) ---- */
::-webkit-scrollbar-track {
  background: #06142a;
}

.section-bg {
  background: #081a31;
}

.details .content h3,
.testimonials .testimonial-item h3,
.faq .accordion-list a.collapsed {
  color: var(--ep-text);
}

.contact .info {
  background: #081a31;
  color: var(--ep-text);
}

/* --- Fonds « encre » : boutons sombres, onglet actif, numéros d'étapes, en-têtes de tableau.
   L'encre devient claire en mode sombre : ces fonds prennent le bleu de la charte. ---------- */
body.page-home .btn-home--sombre,
body.page-home .flows__onglet[aria-selected="true"],
body.page-home .home-apropos__num,
body.page-racine .page-etapes li::before,
.seo-table thead th,
.seo-step-num {
  background: #1d4f80;
}

body.page-home .btn-home--sombre:hover {
  background: #2563a0;
}

/* --- Bouton mode clair / sombre et logo de l'en-tête ---------------------- */
.header-theme {
  background: var(--ep-surface);
  color: #dbe6f3;
}

.header-theme__lune {
  display: none;
}

.header-theme__soleil {
  display: inline-block;
}

#header .logo .logo-clair {
  display: none;
}

#header .logo .logo-sombre {
  display: inline-block;
}