/**
 * Charte sombre LWS 2026 — tokens + fond accueil uniquement (phase 1).
 * Aucun sélecteur générique sur modules VIP, header ou footer.
 * Styles propres au hero : modules/home-hero-charte/styles.css (.lws-home-hero-charte).
 */
:root {
  --lws-bg: #111111;
  --lws-surface: #1c181b;
  --lws-surface-prune: #231a20;
  --lws-border: #3b3137;
  --lws-prune: #351425;
  --lws-vin: #5a2137;
  --lws-copper: #c87846;
  --lws-copper-hover: #d88c58;
  --lws-ivory: #f4efe8;
  --lws-text-soft: #c7bbb3;
  --lws-halo-petrole: #102726;
  --lws-halo-cacao: #3a2116;
  /* #321428 — base lumineuse partagée hero / À propos */
  --lws-halo-prune-rgb: 50, 20, 40;
}

/* Fond continu accueil — ne touche pas les modules internes. */
body.site-body.is-home-page {
  background: var(--lws-bg);
  color: var(--lws-ivory);
  /* Les halos peuvent dépasser leurs modules, mais jamais élargir le viewport. */
  overflow-x: clip;
}

main.page-home.theme-mineral {
  background: var(--lws-bg);
  overflow-x: clip;
  overflow-y: visible;
}

/**
 * Halo prune partagé : 8 paliers + soft radial, blur réel 32px.
 * Consommé par home-hero-charte et about-story-charte.
 * Pas d’animation permanente, pas de will-change permanent.
 */
.lws-halo-prune,
.lws-about-story-charte.about-section-block::before,
.lws-about-story-charte.about-section-block::after {
  pointer-events: none;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at center,
      rgba(var(--lws-halo-prune-rgb), 0.88) 0%,
      rgba(var(--lws-halo-prune-rgb), 0.72) 12%,
      rgba(var(--lws-halo-prune-rgb), 0.52) 26%,
      rgba(var(--lws-halo-prune-rgb), 0.34) 40%,
      rgba(var(--lws-halo-prune-rgb), 0.18) 54%,
      rgba(var(--lws-halo-prune-rgb), 0.08) 66%,
      rgba(var(--lws-halo-prune-rgb), 0.03) 78%,
      transparent 88%
    ),
    radial-gradient(
      circle at center,
      rgba(var(--lws-halo-prune-rgb), 0.28) 0%,
      transparent 55%
    );
  filter: blur(32px);
}

/* Accueil uniquement : fond header transparent pour laisser voir le halo. */
body.site-body.is-home-page .mod-header {
  background: transparent;
}

/**
 * Empilement accueil :
 * - orbes FX sous les éléments (fiche, ombre, slider)
 * - orbes FX au-dessus du fond de page uniquement (pas de crop)
 */
body.site-body.is-home-page .lws-home-hero-charte {
  position: relative;
  z-index: 1;
}

body.site-body.is-home-page .lws-home-hero-charte__halo {
  z-index: -1;
}

body.site-body.is-home-page .lws-about-story-charte.about-section-block {
  position: relative;
  z-index: 1;
}

body.site-body.is-home-page .lws-portfolio-mosaic,
body.site-body.is-home-page .lws-before-after,
body.site-body.is-home-page .lws-ba-carousel {
  position: relative;
  z-index: 5;
  background: transparent;
}

body.site-body.is-home-page .lws-about-story-charte.about-section-block .about-container,
body.site-body.is-home-page .lws-about-story-charte.about-section-block .text-column,
body.site-body.is-home-page .lws-about-story-charte.about-section-block .image-column,
body.site-body.is-home-page .lws-portfolio-mosaic .phd-root,
body.site-body.is-home-page .lws-before-after .lws-ba-container,
body.site-body.is-home-page .lws-before-after .kvn-compare {
  position: relative;
  z-index: 10;
}

body.site-body.is-home-page .lws-about-story-charte.about-section-block .text-column {
  background: var(--lws-surface) !important;
}

/* Mobile : espacement entre sections */
@media (max-width: 900px) {
  body.site-body.is-home-page main.page-home.theme-mineral > [data-module] + [data-module] {
    margin-top: clamp(1.575rem, 4.2vh, 2.45rem);
  }

  /* −35 % spécifiquement entre À propos et before-after */
  body.site-body.is-home-page .lws-about-story-charte.about-section-block + .lws-before-after,
  body.site-body.is-home-page main.page-home > .lws-before-after {
    margin-top: clamp(1.02rem, 2.73vh, 1.59rem);
  }
}