/* ============================================================
   H3D SCHISTE · Cluster A Cinéma-Produit dark → révélation
   Charbon #0a0a0a drench 62% · vert signature #1c8868 wipe
   Barlow Variable compact + EB Garamond italic RARE
   ============================================================ */

/* -- Google Fonts (dev). Playwright verify basculera en self-host. -- */
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=EB+Garamond:ital,wght@1,400&display=swap');

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  --fond-cinema: #111216;
  --fond-cinema-95: rgba(17, 18, 22, 0.88);
  --fond-respiration: #f4f4f4;
  --blanc: #ffffff;
  --vert-signature: #1c8868;
  --vert-signature-halo: rgba(28, 136, 104, 0.42);
  --vert-signature-glow: 0 0 24px #1c8868, 0 0 64px rgba(28, 136, 104, 0.35);
  --vert-micro: #e8f5f0;
  --encre: #2d3732;
  --encre-mute: rgba(45, 55, 50, 0.66);

  --texte-charbon: #f4f4f4;
  --texte-charbon-mute: rgba(244, 244, 244, 0.72);
  --texte-clair: var(--encre);
  --texte-clair-mute: var(--encre-mute);

  --border-subtle: 1px solid rgba(255, 255, 255, 0.08);
  --border-strong: 2px solid var(--vert-signature);

  --radius-flat: 0;
  --radius-card: 4px;
  --radius-cta: 9999px;
  --radius-nav: 17.5px;

  --ease-cinema: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-quiet: cubic-bezier(0.32, 0, 0.24, 1);

  --shell-max: 1240px;
  --shell-px: clamp(20px, 4vw, 56px);

  --header-h: 68px;
}

/* ============================================================
   RESET
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Barlow', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.1px;
  color: var(--texte-charbon);
  background: var(--fond-cinema);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--vert-signature); color: var(--blanc); }

/* ============================================================
   TYPOGRAPHIE
   ============================================================ */
.display {
  font-family: 'Barlow', sans-serif;
  font-weight: 600;
  font-size: clamp(38px, 5.6vw, 68px);
  line-height: 1.03;
  letter-spacing: -1.6px;
}
.h2-chapter {
  font-family: 'Barlow', sans-serif;
  font-weight: 500;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -1px;
}
.h3-card {
  font-family: 'Barlow', sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.27;
  letter-spacing: -0.3px;
}
.body { font-size: 16px; line-height: 1.5; letter-spacing: -0.1px; }
.body-lead {
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: -0.2px;
  color: var(--texte-charbon);
}
.meta-certifs {
  font-family: 'Barlow', sans-serif;
  font-weight: 400;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.manifest-rare {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 30px;
  letter-spacing: 0;
}

/* ============================================================
   SHELL & UTILITAIRES
   ============================================================ */
.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin: 0 auto;
  padding-left: var(--shell-px);
  padding-right: var(--shell-px);
}
.dark { background: var(--fond-cinema); color: var(--texte-charbon); }
.light { background: var(--fond-respiration); color: var(--texte-clair); }

.cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--radius-cta);
  font-family: 'Barlow', sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  letter-spacing: -0.1px;
  transition: transform .28s var(--ease-cinema),
              background .28s var(--ease-cinema),
              color .28s var(--ease-cinema),
              border-color .28s var(--ease-cinema);
  will-change: transform;
}
.cta-pill--vert {
  background: var(--vert-signature);
  color: var(--blanc);
}
.cta-pill--vert:hover { transform: translateY(-2px); background: #22a17a; }
.cta-pill--outline {
  background: transparent;
  color: var(--blanc);
  border: 1px solid rgba(255,255,255,0.6);
}
.cta-pill--outline:hover { border-color: var(--vert-signature); color: var(--vert-signature); transform: translateY(-2px); }
.cta-pill--dark {
  background: var(--fond-cinema);
  color: var(--blanc);
  border: 1px solid var(--fond-cinema);
}
.cta-pill--dark:hover { background: var(--vert-signature); border-color: var(--vert-signature); transform: translateY(-2px); }
.cta-pill--sm { padding: 10px 16px; font-size: 13px; }
.cta-arrow { display: inline-block; transition: transform .28s var(--ease-cinema); }
.cta-pill:hover .cta-arrow { transform: translateX(4px); }

/* ============================================================
   REVEALS (chapter clip-path, fail-safe html.js)
   ============================================================ */
html.js .chapter[data-reveal] {
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  transition: clip-path .8s var(--ease-cinema), opacity .5s ease;
}
html.js .chapter[data-reveal].is-in {
  clip-path: inset(0 0 0% 0);
  opacity: 1;
}
html.js .reveal-soft {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s var(--ease-cinema), transform .55s var(--ease-cinema);
}
html.js .reveal-soft.is-in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html.js .chapter[data-reveal],
  html.js .reveal-soft {
    clip-path: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   HEADER (transparent → solid au scroll)
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  padding: 14px var(--shell-px);
  background: transparent;
  backdrop-filter: none;
  transition: background .3s ease, backdrop-filter .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: var(--fond-cinema-95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: rgba(255,255,255,0.06);
}
.site-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  max-width: 1560px;
  margin: 0 auto;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--blanc);
  font-weight: 600;
  letter-spacing: -0.4px;
  font-size: 17px;
}
.brand__mark {
  width: 30px; height: 30px;
  background: var(--fond-cinema);
  border: 1px solid rgba(255,255,255,0.22);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--blanc);
  font-weight: 700; font-size: 12px;
  letter-spacing: -0.4px;
}
.brand__mark::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--vert-signature);
}
.brand__word { font-family: 'Barlow', sans-serif; }
.brand__word small {
  font-weight: 400; font-size: 11px; letter-spacing: 0.5px;
  color: var(--texte-charbon-mute);
  margin-left: 4px; text-transform: uppercase;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  justify-content: center;
  font-size: 13px;
  color: var(--blanc);
}
.site-nav a {
  position: relative;
  padding: 6px 0;
  color: rgba(255,255,255,0.85);
  transition: color .3s ease;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--vert-signature);
  transition: width .38s var(--ease-cinema);
}
.site-nav a:hover { color: var(--blanc); }
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { width: 100%; }

.site-header__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.site-header__cta .tel {
  color: var(--blanc);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.2px;
}
.site-header__cta .tel:hover { color: var(--vert-signature); }

.burger {
  display: none;
  width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,0.32);
  color: var(--blanc);
  align-items: center; justify-content: center;
}
.burger span, .burger span::before, .burger span::after {
  content: "";
  display: block;
  width: 18px; height: 1px;
  background: var(--blanc);
  transition: transform .3s var(--ease-cinema);
}
.burger span::before { transform: translateY(-5px); }
.burger span::after { transform: translateY(4px); }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(0) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-1px) rotate(-45deg); }

/* ============================================================
   MOBILE NAV OVERLAY
   ============================================================ */
.mnav {
  position: fixed; inset: 0;
  background: var(--fond-cinema);
  z-index: 55;
  padding: 88px 24px 32px;
  display: flex; flex-direction: column; gap: 18px;
  opacity: 0; pointer-events: none;
  transition: opacity .35s var(--ease-cinema);
}
.mnav.is-open { opacity: 1; pointer-events: auto; }
.mnav a {
  font-size: 26px; font-weight: 500;
  letter-spacing: -0.6px;
  color: var(--blanc);
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mnav__foot {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex; flex-direction: column; gap: 12px;
  color: var(--texte-charbon-mute);
}
.mnav__foot .lab { font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase; }
.mnav__foot .tel { font-size: 28px; font-weight: 600; letter-spacing: -0.8px; color: var(--blanc); }
.mnav__foot .urg { color: var(--vert-signature); }

/* ============================================================
   HERO CINÉMA (100vh)
   ============================================================ */
.hero {
  position: relative;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
  background: var(--fond-cinema);
  color: var(--blanc);
}
.hero__sequence {
  position: absolute; inset: 0;
  z-index: 0;
}
.hero__scene {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .45s ease, visibility .45s ease;
}
.hero__scene.is-active { opacity: 1; visibility: visible; }
.hero__scene .ph, .hero__scene img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero__scene .scene-apres { clip-path: inset(0 100% 0 0); }
.hero__scene.is-wiping .scene-apres { animation: hero-wipe .8s linear forwards; }
@keyframes hero-wipe {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}
.hero__scene .wipe-line {
  position: absolute; top: 0; bottom: 0;
  left: 0;
  width: 4px;
  background: var(--vert-signature);
  box-shadow: var(--vert-signature-glow);
  opacity: 0; pointer-events: none;
}
.hero__scene.is-wiping .wipe-line { animation: hero-line .8s linear forwards; }
@keyframes hero-line {
  from { left: 0; opacity: 1; }
  50%  { opacity: 1; }
  to   { left: 100%; opacity: 0; }
}

/* placeholders : gradient bruité charbon quand l'image manque */
.hero__scene .ph {
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(28,136,104,0.05) 0%, transparent 60%),
    radial-gradient(120% 80% at 70% 80%, rgba(255,255,255,0.03) 0%, transparent 55%),
    #0a0a0a;
}
.hero__scene .ph--avant { filter: brightness(0.75) contrast(1.1); }
.hero__scene .ph--apres {
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(28,136,104,0.12) 0%, transparent 55%),
    radial-gradient(100% 80% at 70% 80%, rgba(255,215,150,0.06) 0%, transparent 55%),
    #121110;
}

.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(10,10,10,0.42) 0%,
    rgba(10,10,10,0.10) 32%,
    rgba(10,10,10,0.10) 60%,
    rgba(10,10,10,0.86) 100%);
  z-index: 1;
  pointer-events: none;
}

.hero__content {
  position: absolute;
  z-index: 2;
  left: var(--shell-px);
  right: var(--shell-px);
  bottom: clamp(50px, 8vh, 88px);
  max-width: 720px;
  display: flex; flex-direction: column; gap: 22px;
}
.hero__baseline {
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  color: rgba(255,255,255,0.9);
  letter-spacing: -0.1px;
}
.hero__tel {
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 34px);
  line-height: 1.05;
  letter-spacing: -0.6px;
  color: var(--blanc);
  transition: color .28s var(--ease-cinema);
}
.hero__tel:hover { color: var(--vert-signature); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }

.hero__stage-label {
  position: absolute;
  z-index: 3;
  top: calc(var(--header-h) + 44px);
  left: var(--shell-px);
  display: inline-flex; align-items: center; gap: 12px;
  color: rgba(255,255,255,0.72);
  font-size: 11px; letter-spacing: 0.9px; text-transform: uppercase;
}
.hero__stage-label .dot {
  width: 8px; height: 8px;
  background: var(--vert-signature);
  box-shadow: 0 0 12px var(--vert-signature);
  animation: pulse-dot 2.2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.hero__progress {
  position: absolute;
  z-index: 4;
  bottom: 24px;
  left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px;
}
.hero__progress button {
  width: 40px; height: 2px;
  background: rgba(255,255,255,0.22);
  padding: 0;
  position: relative;
}
.hero__progress button::after {
  content: ""; position: absolute; inset: 0;
  background: var(--vert-signature);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.hero__progress button.is-active::after { transform: scaleX(1); }
.hero__progress button.is-active { background: rgba(255,255,255,0.35); }

.hero__scene-title {
  position: absolute;
  z-index: 3;
  right: var(--shell-px);
  top: calc(var(--header-h) + 44px);
  text-align: right;
  color: rgba(255,255,255,0.72);
  font-size: 11px; letter-spacing: 0.9px; text-transform: uppercase;
}
.hero__scene-title strong {
  display: block;
  color: var(--blanc);
  font-weight: 500; font-size: 14px; letter-spacing: 0.2px; text-transform: none;
  margin-top: 4px;
}

/* ============================================================
   MANIFEST DRENCH (60vh charbon)
   ============================================================ */
.manifest {
  position: relative;
  min-height: 60vh;
  background: var(--fond-cinema);
  color: var(--blanc);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(80px, 12vh, 140px) var(--shell-px);
  text-align: center;
  overflow: hidden;
}
.manifest__ghost {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(220px, 34vw, 460px);
  line-height: 0.86;
  color: var(--vert-signature);
  opacity: 0.05;
  letter-spacing: -12px;
  user-select: none;
  pointer-events: none;
}
.manifest__lead {
  position: relative;
  z-index: 1;
  max-width: 880px;
  font-family: 'Barlow', sans-serif;
  font-weight: 500;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.14;
  letter-spacing: -1.1px;
  color: var(--blanc);
}
.manifest__sub {
  position: relative;
  z-index: 1;
  margin-top: 22px;
  max-width: 640px;
  color: rgba(255,255,255,0.72);
  font-size: 16px;
  line-height: 1.55;
}
.manifest__meta {
  position: relative;
  z-index: 1;
  margin-top: 32px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 18px;
  color: rgba(255,255,255,0.55);
  font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase;
}
.manifest__meta span { display: inline-flex; align-items: center; gap: 8px; }
.manifest__meta span::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--vert-signature);
  border-radius: 50%;
}

.manifest__rare {
  position: relative; z-index: 1;
  margin-top: 40px;
  max-width: 680px;
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 1.6vw, 22px);
  line-height: 30px;
  color: rgba(255,255,255,0.85);
}

/* ============================================================
   CHAPTER CINÉMATIQUE 100vh (alterné)
   ============================================================ */
.chapter {
  position: relative;
  min-height: 100vh;
  background: var(--fond-cinema);
  color: var(--blanc);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.chapter--right .chapter__text { order: 1; }
.chapter--right .chapter__visual { order: 0; }
.chapter__text {
  padding: clamp(60px, 10vh, 120px) clamp(30px, 5vw, 84px);
  display: flex; flex-direction: column; justify-content: center;
  gap: 22px;
  position: relative;
  z-index: 1;
}
.chapter__ghost-num {
  position: absolute;
  top: 30px;
  left: clamp(30px, 5vw, 84px);
  font-family: 'Barlow', sans-serif;
  font-weight: 600;
  font-size: clamp(160px, 22vw, 320px);
  line-height: 0.86;
  letter-spacing: -12px;
  color: var(--vert-signature);
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.chapter--right .chapter__ghost-num {
  left: auto;
  right: clamp(30px, 5vw, 84px);
}
.chapter__title {
  font-family: 'Barlow', sans-serif;
  font-weight: 500;
  font-size: clamp(34px, 3.8vw, 52px);
  line-height: 1.05;
  letter-spacing: -1.2px;
  color: var(--blanc);
  max-width: 520px;
}
.chapter__title em {
  font-family: 'Barlow', sans-serif;
  font-style: normal;
  font-weight: 500;
  color: var(--vert-signature);
}
.chapter__body {
  max-width: 460px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,0.72);
}
.chapter__list {
  list-style: none;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px;
  max-width: 480px;
  margin-top: 6px;
}
.chapter__list li {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 14px; color: rgba(255,255,255,0.82);
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.chapter__list li::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--vert-signature);
  flex: 0 0 6px;
  transform: translateY(2px);
}
.chapter__cta { margin-top: 14px; }

.chapter__visual {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}
.chapter__visual img,
.chapter__visual .ph {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.chapter__visual .ph {
  background:
    radial-gradient(140% 100% at 40% 30%, rgba(28,136,104,0.12) 0%, transparent 55%),
    radial-gradient(120% 90% at 70% 80%, rgba(255,215,150,0.06) 0%, transparent 55%),
    #121110;
}
.chapter__visual .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,10,10,0.9) 0%, rgba(10,10,10,0.1) 32%);
}
.chapter--right .chapter__visual .scrim {
  background: linear-gradient(270deg, rgba(10,10,10,0.9) 0%, rgba(10,10,10,0.1) 32%);
}

/* Mini-wipe cards (nuisibles) sur chapter visual */
.mini-wipes {
  position: absolute;
  inset: auto 24px 24px 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  z-index: 2;
}
.mini-wipe {
  position: relative;
  height: 130px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(10,10,10,0.5);
  backdrop-filter: blur(4px);
  cursor: pointer;
}
.mini-wipe img,
.mini-wipe .ph {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.mini-wipe .mw-avant { z-index: 1; }
.mini-wipe .mw-apres { z-index: 2; clip-path: inset(0 100% 0 0); transition: clip-path .55s var(--ease-cinema); }
.mini-wipe:hover .mw-apres { clip-path: inset(0 0% 0 0); }
.mini-wipe:hover .mw-line { transform: translateX(100%); opacity: 1; }
.mini-wipe .mw-line {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 3px; z-index: 3;
  background: var(--vert-signature);
  box-shadow: 0 0 10px var(--vert-signature);
  transform: translateX(-4px); opacity: 0;
  transition: transform .55s var(--ease-cinema), opacity .3s ease;
}
.mini-wipe .mw-label {
  position: absolute; z-index: 4;
  left: 12px; bottom: 10px;
  color: var(--blanc);
  font-weight: 500; font-size: 13px; letter-spacing: -0.1px;
}

/* ============================================================
   MÉTHODE 3 GESTES (light section)
   ============================================================ */
.methode {
  background: var(--fond-respiration);
  color: var(--texte-clair);
  padding: clamp(90px, 12vh, 140px) 0;
}
.methode__head {
  max-width: 800px;
  padding-left: var(--shell-px);
  padding-right: var(--shell-px);
  margin-left: auto; margin-right: auto;
  display: flex; flex-direction: column; gap: 18px;
  margin-bottom: 60px;
}
.methode__title {
  font-family: 'Barlow', sans-serif;
  font-weight: 500;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.08;
  letter-spacing: -1px;
  color: var(--encre);
}
.methode__lead {
  font-size: 17px;
  line-height: 1.55;
  color: var(--encre-mute);
}
.methode__grid {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--shell-px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.methode__card {
  background: var(--blanc);
  border-radius: var(--radius-card);
  padding: 30px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
  transition: transform .3s var(--ease-cinema);
}
.methode__card:hover { transform: translateY(-4px); }
.methode__num {
  font-family: 'Barlow', sans-serif;
  font-weight: 600;
  font-size: 42px;
  line-height: 1;
  color: var(--vert-signature);
  letter-spacing: -2px;
}
.methode__ct {
  font-family: 'Barlow', sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.4px;
  color: var(--encre);
}
.methode__cb { color: var(--encre-mute); font-size: 15px; line-height: 1.55; }
.methode__cmeta {
  margin-top: auto;
  font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--vert-signature);
}

/* ============================================================
   MARQUEE CERTIFS
   ============================================================ */
.marquee {
  background: var(--fond-cinema);
  color: rgba(255,255,255,0.55);
  height: 64px;
  display: flex; align-items: center;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.marquee__rail {
  display: flex;
  gap: 40px;
  animation: mq 38s linear infinite;
  white-space: nowrap;
}
.marquee__rail span {
  font-size: 11px; letter-spacing: 0.9px; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 40px;
}
.marquee__rail span::after {
  content: "";
  width: 6px; height: 6px;
  background: var(--vert-signature);
  border-radius: 50%;
  margin-left: 40px;
}
@keyframes mq {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   AVIS GOOGLE (3 cards charbon)
   ============================================================ */
.avis {
  background: var(--fond-cinema);
  color: var(--blanc);
  padding: clamp(90px, 12vh, 140px) 0;
}
.avis__head {
  max-width: var(--shell-max);
  margin: 0 auto 50px;
  padding: 0 var(--shell-px);
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}
.avis__title {
  font-family: 'Barlow', sans-serif;
  font-weight: 500;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -1px;
  max-width: 620px;
}
.avis__note {
  display: inline-flex; flex-direction: column; align-items: flex-end;
  gap: 6px;
  color: rgba(255,255,255,0.72);
  font-size: 13px; letter-spacing: 0.2px;
}
.avis__stars { color: var(--vert-signature); font-size: 15px; letter-spacing: 3px; }
.avis__grid {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--shell-px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.avis__card {
  border: var(--border-subtle);
  padding: 30px 26px;
  display: flex; flex-direction: column; gap: 16px;
  position: relative;
  background: rgba(255,255,255,0.02);
  transition: background .3s ease, border-color .3s ease;
}
.avis__card:hover { background: rgba(255,255,255,0.04); border-color: rgba(28,136,104,0.4); }
.avis__quote {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 20px;
  line-height: 30px;
  color: rgba(255,255,255,0.9);
}
.avis__author {
  display: flex; align-items: center; gap: 14px;
  margin-top: auto;
  position: relative;
  padding-top: 20px;
}
.avis__author::before {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 60px; height: 2px;
  background: var(--vert-signature);
}
.avis__name {
  position: relative;
  font-weight: 500; font-size: 14px; letter-spacing: -0.2px;
}
.avis__name::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 0; height: 1px;
  background: var(--vert-signature);
  transition: width .38s var(--ease-cinema);
}
.avis__card:hover .avis__name::after { width: 100%; }
.avis__loc { font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase; color: rgba(255,255,255,0.5); }

/* ============================================================
   ZONES SVG
   ============================================================ */
.zones {
  background: var(--fond-cinema);
  color: var(--blanc);
  padding: clamp(90px, 12vh, 140px) 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.zones__inner {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--shell-px);
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 60px;
  align-items: center;
}
.zones__head { display: flex; flex-direction: column; gap: 22px; }
.zones__title {
  font-family: 'Barlow', sans-serif;
  font-weight: 500;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -1px;
}
.zones__title em {
  font-family: 'Barlow', sans-serif;
  font-style: normal;
  color: var(--vert-signature);
}
.zones__lead { color: rgba(255,255,255,0.72); font-size: 16px; line-height: 1.55; }
.zones__list { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.zones__row {
  display: grid; grid-template-columns: 60px 1fr auto; gap: 20px;
  padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  align-items: baseline;
}
.zones__row:last-of-type { border-bottom: 1px solid rgba(255,255,255,0.08); }
.zones__row .z {
  color: var(--vert-signature);
  font-weight: 500; font-size: 13px; letter-spacing: 0.4px; text-transform: uppercase;
}
.zones__row .c { color: rgba(255,255,255,0.85); font-size: 14px; line-height: 1.45; }
.zones__row .p {
  color: var(--blanc);
  font-weight: 500; font-size: 14px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
}
.zones__map {
  position: relative;
  aspect-ratio: 4 / 3;
  border: var(--border-subtle);
  padding: 32px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 100%);
}
.zones__map svg { width: 100%; height: 100%; }
.zones__map svg .z-shape {
  fill: rgba(28,136,104,0.06);
  stroke: rgba(255,255,255,0.14);
  stroke-width: 1;
  transition: fill .3s ease, stroke .3s ease;
}
.zones__map svg .z-shape.z-1 { fill: rgba(28,136,104,0.42); stroke: var(--vert-signature); }
.zones__map svg .z-shape.z-2 { fill: rgba(28,136,104,0.24); }
.zones__map svg .z-shape.z-3 { fill: rgba(28,136,104,0.16); }
.zones__map svg .z-shape.z-4 { fill: rgba(28,136,104,0.10); }
.zones__map svg .z-shape.z-5 { fill: rgba(28,136,104,0.05); }
.zones__map svg text {
  fill: rgba(255,255,255,0.88);
  font-family: 'Barlow', sans-serif;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.4px; text-transform: uppercase;
}
.zones__map .m-legend {
  position: absolute; left: 20px; top: 20px;
  font-size: 10px; letter-spacing: 0.8px; text-transform: uppercase;
  color: rgba(255,255,255,0.44);
}

/* ============================================================
   FAQ
   ============================================================ */
.faq {
  background: var(--fond-cinema);
  color: var(--blanc);
  padding: clamp(90px, 12vh, 140px) 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.faq__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--shell-px);
}
.faq__title {
  font-family: 'Barlow', sans-serif;
  font-weight: 500;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -1px;
  margin-bottom: 46px;
  max-width: 640px;
}
.faq__title em {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  color: var(--blanc);
}
.faq__list { display: flex; flex-direction: column; }
.faq__item {
  border-top: 1px solid rgba(255,255,255,0.1);
}
.faq__item:last-child { border-bottom: 1px solid rgba(255,255,255,0.1); }
.faq__q {
  width: 100%;
  padding: 26px 30px 26px 0;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  text-align: left;
  color: var(--blanc);
  gap: 14px;
}
.faq__q .n {
  color: var(--vert-signature);
  font-weight: 500;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}
.faq__q .t {
  font-family: 'Barlow', sans-serif;
  font-weight: 500;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.32;
  letter-spacing: -0.2px;
}
.faq__q .plus {
  width: 32px; height: 32px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
}
.faq__q .plus::before, .faq__q .plus::after {
  content: "";
  position: absolute;
  background: var(--blanc);
  transition: transform .35s var(--ease-cinema);
}
.faq__q .plus::before { width: 14px; height: 1px; }
.faq__q .plus::after { width: 1px; height: 14px; }
.faq__item[aria-expanded="true"] .faq__q .plus::after { transform: scaleY(0); }
.faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s var(--ease-cinema);
}
.faq__item[aria-expanded="true"] .faq__a { max-height: 500px; }
.faq__a-inner {
  padding: 0 60px 30px 54px;
  color: rgba(255,255,255,0.72);
  font-size: 15px; line-height: 1.6;
}

/* ============================================================
   CTA FINAL (drench charbon plein-largeur)
   ============================================================ */
.cta-final {
  background: var(--fond-cinema);
  color: var(--blanc);
  padding: clamp(100px, 14vh, 160px) 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-final__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--shell-px);
  display: flex; flex-direction: column; align-items: center; gap: 30px;
  position: relative; z-index: 1;
}
.cta-final__title {
  font-family: 'Barlow', sans-serif;
  font-weight: 600;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.03;
  letter-spacing: -1.5px;
  color: var(--blanc);
  max-width: 780px;
}
.cta-final__title em {
  font-family: 'Barlow', sans-serif;
  font-style: normal;
  color: var(--vert-signature);
}
.cta-final__lead {
  color: rgba(255,255,255,0.7);
  font-size: 17px; line-height: 1.55;
  max-width: 620px;
}
.cta-final__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.cta-final__wipe {
  position: absolute;
  top: 50%; left: 0;
  width: 100%; height: 3px;
  background: var(--vert-signature);
  box-shadow: var(--vert-signature-glow);
  transform: translateY(-50%) scaleX(0);
  transform-origin: left;
  opacity: 0;
  transition: transform 1.1s var(--ease-cinema), opacity .3s ease;
  z-index: 0;
}
.cta-final.is-in .cta-final__wipe { transform: translateY(-50%) scaleX(1); opacity: 0.28; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--fond-cinema);
  color: rgba(255,255,255,0.6);
  padding: 90px 0 34px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.footer__inner {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--shell-px);
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer__brand { display: flex; flex-direction: column; gap: 18px; max-width: 320px; }
.footer__brand p { color: rgba(255,255,255,0.6); font-size: 14px; line-height: 1.55; }
.footer__col h4 {
  font-family: 'Barlow', sans-serif;
  font-weight: 500;
  font-size: 12px; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--vert-signature);
  margin-bottom: 18px;
}
.footer__col a, .footer__col p, .footer__col li {
  display: block;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.75);
  padding: 4px 0;
}
.footer__col a:hover { color: var(--vert-signature); }
.footer__col .tel { font-weight: 500; font-size: 20px; letter-spacing: -0.3px; color: var(--blanc); }
.footer__col .tel-urg { color: var(--vert-signature); }
.footer__base {
  max-width: var(--shell-max);
  margin: 60px auto 0;
  padding: 30px var(--shell-px) 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
.footer__base a:hover { color: var(--vert-signature); }
.footer__base a { margin-right: 20px; }

/* ============================================================
   SUB-PAGES : PILIER LAYOUTS (desinsectisation, deratisation)
   ============================================================ */
.page-hero {
  position: relative;
  padding: calc(var(--header-h) + 140px) 0 100px;
  background: var(--fond-cinema);
  color: var(--blanc);
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.page-hero__inner {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--shell-px);
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 60px;
  align-items: end;
}
.page-hero__ghost {
  position: absolute;
  right: -60px; top: -20px;
  font-family: 'Barlow', sans-serif;
  font-weight: 600;
  font-size: clamp(200px, 30vw, 460px);
  line-height: 0.86;
  letter-spacing: -14px;
  color: var(--vert-signature);
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.page-hero__crumb {
  display: inline-flex; gap: 8px; align-items: center;
  color: rgba(255,255,255,0.55);
  font-size: 14px;
  margin-bottom: 22px;
}
.page-hero__crumb a { color: rgba(255,255,255,0.55); }
.page-hero__crumb a:hover { color: var(--vert-signature); }
.page-hero__crumb::after { display: none; }
.page-hero__title {
  font-family: 'Barlow', sans-serif;
  font-weight: 600;
  font-size: clamp(44px, 6vw, 76px);
  line-height: 1.02;
  letter-spacing: -2px;
  color: var(--blanc);
  max-width: 720px;
  position: relative; z-index: 1;
}
.page-hero__title em {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--vert-signature);
}
.page-hero__lead {
  font-size: 18px; line-height: 1.55;
  color: rgba(255,255,255,0.72);
  max-width: 460px;
  position: relative; z-index: 1;
}
.page-hero__meta {
  margin-top: 30px;
  display: flex; flex-wrap: wrap; gap: 22px;
  font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.page-hero__meta span::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--vert-signature);
  margin-right: 8px;
  vertical-align: middle;
}

/* Pilier grid (fiches nuisibles) */
.pilier {
  background: var(--fond-cinema);
  color: var(--blanc);
  padding: 100px 0;
}
.pilier__grid {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--shell-px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.pilier__card {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: var(--border-subtle);
  background: rgba(255,255,255,0.02);
  transition: border-color .3s ease, transform .3s var(--ease-cinema);
  color: var(--blanc);
}
.pilier__card:hover { border-color: var(--vert-signature); transform: translateY(-3px); }
.pilier__card img,
.pilier__card .ph {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.pilier__card .ph {
  background:
    radial-gradient(120% 90% at 30% 30%, rgba(28,136,104,0.10) 0%, transparent 60%),
    #121110;
}
.pilier__card .apres {
  z-index: 1;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .55s var(--ease-cinema);
}
.pilier__card:hover .apres { clip-path: inset(0 0% 0 0); }
.pilier__card .line {
  position: absolute; z-index: 2;
  top: 0; bottom: 0; left: 0; width: 3px;
  background: var(--vert-signature);
  box-shadow: 0 0 12px var(--vert-signature);
  transform: translateX(-4px); opacity: 0;
  transition: transform .55s var(--ease-cinema), opacity .3s ease;
}
.pilier__card:hover .line { transform: translateX(100%); opacity: 1; }
.pilier__card .scrim {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(10,10,10,0.05) 0%, rgba(10,10,10,0.85) 100%);
}
.pilier__card .txt {
  position: absolute; z-index: 3;
  left: 20px; bottom: 20px; right: 20px;
  display: flex; flex-direction: column; gap: 6px;
}
.pilier__card .n {
  font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--vert-signature);
}
.pilier__card .t {
  font-family: 'Barlow', sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.14;
  letter-spacing: -0.4px;
}

/* Section méthodes (bio-fil) */
.bio-fil {
  background: var(--fond-respiration);
  color: var(--texte-clair);
  padding: 100px 0;
}
.bio-fil__inner {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--shell-px);
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 60px;
  align-items: start;
}
.bio-fil__head { position: sticky; top: calc(var(--header-h) + 40px); }
.bio-fil__title {
  font-family: 'Barlow', sans-serif;
  font-weight: 500;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.08;
  letter-spacing: -1px;
  color: var(--encre);
  max-width: 340px;
}
.bio-fil__title em {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  color: var(--vert-signature);
}
.bio-fil__lead { margin-top: 18px; color: var(--encre-mute); font-size: 16px; line-height: 1.55; max-width: 340px; }
.bio-fil__list {
  display: flex; flex-direction: column;
  gap: 0;
}
.bio-fil__row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 24px;
  padding: 30px 0;
  border-bottom: 1px solid rgba(45,55,50,0.14);
  align-items: baseline;
}
.bio-fil__row:first-child { border-top: 1px solid rgba(45,55,50,0.14); }
.bio-fil__row .k {
  font-family: 'Barlow', sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.4px;
  color: var(--vert-signature);
  font-variant-numeric: tabular-nums;
}
.bio-fil__row .v h3 {
  font-family: 'Barlow', sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.3px;
  color: var(--encre);
  margin-bottom: 8px;
}
.bio-fil__row .v p { color: var(--encre-mute); font-size: 15px; line-height: 1.55; }

/* Comparateur pro vs grand public */
.comparo {
  background: var(--fond-cinema);
  color: var(--blanc);
  padding: 100px 0;
}
.comparo__inner {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--shell-px);
}
.comparo__title {
  font-family: 'Barlow', sans-serif;
  font-weight: 500;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.08;
  letter-spacing: -1px;
  max-width: 620px;
  margin-bottom: 50px;
}
.comparo__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: var(--border-subtle);
}
.comparo__col { padding: 40px; }
.comparo__col + .comparo__col { border-left: var(--border-subtle); }
.comparo__col--pro { background: rgba(28,136,104,0.06); }
.comparo__col h3 {
  font-family: 'Barlow', sans-serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.4px;
  color: var(--blanc);
  margin-bottom: 8px;
}
.comparo__col .sub {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 26px;
}
.comparo__col--pro .sub { color: var(--vert-signature); }
.comparo__col ul { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.comparo__col li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  color: rgba(255,255,255,0.75);
  font-size: 15px; line-height: 1.5;
}
.comparo__col li::before {
  content: "";
  width: 12px; height: 1px;
  background: rgba(255,255,255,0.35);
  margin-top: 12px;
}
.comparo__col--pro li::before { background: var(--vert-signature); height: 2px; }

/* ============================================================
   FICHE PAGE (punaises-de-lit)
   ============================================================ */
.fiche-intro {
  background: var(--fond-respiration);
  color: var(--texte-clair);
  padding: 100px 0;
}
.fiche-intro__inner {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--shell-px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.fiche-intro__title {
  font-family: 'Barlow', sans-serif;
  font-weight: 500;
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.08;
  letter-spacing: -1px;
  color: var(--encre);
  margin-bottom: 24px;
}
.fiche-intro__title em {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  color: var(--vert-signature);
}
.fiche-intro__lead { color: var(--encre); font-size: 17px; line-height: 1.6; max-width: 520px; }
.fiche-intro__visual {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.fiche-intro__visual img, .fiche-intro__visual .ph {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.fiche-intro__visual .ph {
  background:
    radial-gradient(120% 90% at 40% 30%, rgba(28,136,104,0.10) 0%, transparent 55%),
    #262523;
}

/* Symptomes 4 cards */
.symptomes {
  background: var(--fond-cinema);
  color: var(--blanc);
  padding: 100px 0;
}
.symptomes__inner {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--shell-px);
}
.symptomes__title {
  font-family: 'Barlow', sans-serif;
  font-weight: 500;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.08;
  letter-spacing: -1px;
  max-width: 640px;
  margin-bottom: 44px;
}
.symptomes__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.symptomes__card {
  border-top: 1px solid rgba(255,255,255,0.14);
  padding-top: 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.symptomes__card .n {
  font-family: 'Barlow', sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: var(--vert-signature);
  letter-spacing: 0.4px;
  font-variant-numeric: tabular-nums;
}
.symptomes__card h3 {
  font-family: 'Barlow', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.3px;
  color: var(--blanc);
}
.symptomes__card p { color: rgba(255,255,255,0.7); font-size: 14px; line-height: 1.55; }

/* Traitements 2 col (chimique/thermique) */
.traits {
  background: var(--fond-respiration);
  color: var(--texte-clair);
  padding: 100px 0;
}
.traits__inner {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--shell-px);
}
.traits__head {
  max-width: 640px;
  margin-bottom: 50px;
}
.traits__title {
  font-family: 'Barlow', sans-serif;
  font-weight: 500;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.08;
  letter-spacing: -1px;
  color: var(--encre);
  margin-bottom: 16px;
}
.traits__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.traits__card {
  background: var(--blanc);
  border-radius: var(--radius-card);
  padding: 40px;
  display: flex; flex-direction: column; gap: 18px;
  position: relative;
  border-top: 3px solid var(--vert-signature);
}
.traits__card .lab {
  font-size: 14px;
  font-weight: 500;
  color: var(--vert-signature);
}
.traits__card h3 {
  font-family: 'Barlow', sans-serif;
  font-weight: 500;
  font-size: 26px;
  line-height: 1.14;
  letter-spacing: -0.5px;
  color: var(--encre);
}
.traits__card p { color: var(--encre-mute); font-size: 15px; line-height: 1.55; }
.traits__card .kv { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 12px 0; border-top: 1px solid rgba(45,55,50,0.12); font-size: 13px; }
.traits__card .kv:last-of-type { border-bottom: 1px solid rgba(45,55,50,0.12); }
.traits__card .kv .lbl { color: var(--encre-mute); letter-spacing: 0.3px; text-transform: uppercase; font-size: 11px; align-self: center; }
.traits__card .kv .val { color: var(--encre); font-weight: 500; font-variant-numeric: tabular-nums; }
.traits__card .note {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 16px; line-height: 24px;
  color: var(--encre);
}

/* Garantie band */
.garantie {
  background: var(--fond-cinema);
  color: var(--blanc);
  padding: 80px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  text-align: center;
}
.garantie__inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--shell-px);
  display: flex; flex-direction: column; gap: 22px; align-items: center;
}
.garantie__lab { font-size: 14px; font-weight: 500; color: var(--vert-signature); }
.garantie__title {
  font-family: 'Barlow', sans-serif;
  font-weight: 500;
  font-size: clamp(28px, 3.2vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.6px;
}
.garantie__lead { color: rgba(255,255,255,0.65); font-size: 15px; line-height: 1.55; max-width: 620px; }

/* ============================================================
   TARIFS (tables + zones)
   ============================================================ */
.tarifs-hero { padding: calc(var(--header-h) + 110px) 0 60px; background: var(--fond-cinema); color: var(--blanc); }
.tarifs-hero__inner {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--shell-px);
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: end;
}
.tarifs-hero__title {
  font-family: 'Barlow', sans-serif;
  font-weight: 600;
  font-size: clamp(40px, 5vw, 66px);
  line-height: 1.03;
  letter-spacing: -1.6px;
  color: var(--blanc);
}
.tarifs-hero__title em { font-family: 'EB Garamond', Georgia, serif; font-style: italic; color: var(--vert-signature); }
.tarifs-hero__lead { color: rgba(255,255,255,0.7); font-size: 17px; line-height: 1.55; max-width: 420px; }

.tarifs {
  background: var(--fond-cinema);
  color: var(--blanc);
  padding: 40px 0 100px;
}
.tarifs__inner {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--shell-px);
  display: flex; flex-direction: column; gap: 60px;
}
.tarif-block {
  border-top: var(--border-strong);
  padding-top: 30px;
}
.tarif-block__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 20px; flex-wrap: wrap;
  margin-bottom: 24px;
}
.tarif-block__title {
  font-family: 'Barlow', sans-serif;
  font-weight: 500;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.14;
  letter-spacing: -0.6px;
}
.tarif-block__note { color: rgba(255,255,255,0.55); font-size: 13px; }
.tarif-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.tarif-table th, .tarif-table td {
  text-align: left;
  padding: 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.09);
  font-size: 14px;
  color: rgba(255,255,255,0.85);
}
.tarif-table th {
  font-weight: 500;
  font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  padding-bottom: 12px;
}
.tarif-table td:last-child { text-align: right; font-weight: 500; color: var(--blanc); }
.tarif-table tr:hover td { background: rgba(255,255,255,0.02); }
.tarif-legend {
  margin-top: 24px;
  font-size: 12px; color: rgba(255,255,255,0.55);
  display: flex; flex-wrap: wrap; gap: 20px;
}
.tarif-legend span::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--vert-signature);
  margin-right: 8px;
  vertical-align: middle;
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-hero { padding: calc(var(--header-h) + 100px) 0 60px; background: var(--fond-cinema); color: var(--blanc); }
.contact-hero__inner {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--shell-px);
}
.contact-hero__title {
  font-family: 'Barlow', sans-serif;
  font-weight: 600;
  font-size: clamp(44px, 6vw, 76px);
  line-height: 1.02;
  letter-spacing: -2px;
  max-width: 780px;
  color: var(--blanc);
}
.contact-hero__title em { font-family: 'EB Garamond', Georgia, serif; font-style: italic; color: var(--vert-signature); }
.contact-hero__lead {
  margin-top: 24px;
  color: rgba(255,255,255,0.72);
  font-size: 17px; line-height: 1.55;
  max-width: 620px;
}

.contact {
  background: var(--fond-cinema);
  color: var(--blanc);
  padding: 60px 0 120px;
}
.contact__inner {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--shell-px);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 60px;
}
.contact__form { display: flex; flex-direction: column; gap: 20px; }
.contact__form .field { display: flex; flex-direction: column; gap: 6px; }
.contact__form label {
  font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.contact__form input,
.contact__form select,
.contact__form textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.24);
  padding: 12px 0;
  color: var(--blanc);
  font-size: 16px;
  transition: border-color .3s var(--ease-cinema);
}
.contact__form input:focus,
.contact__form select:focus,
.contact__form textarea:focus { outline: none; border-color: var(--vert-signature); }
.contact__form textarea { min-height: 120px; resize: vertical; }
.contact__form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.contact__form .submit { margin-top: 14px; align-self: flex-start; }

.contact__nap {
  border-left: var(--border-subtle);
  padding-left: 40px;
  display: flex; flex-direction: column; gap: 34px;
}
.contact__block .lab {
  font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--vert-signature);
  margin-bottom: 10px;
  display: block;
}
.contact__block .val {
  font-family: 'Barlow', sans-serif;
  font-weight: 500;
  font-size: 26px; line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--blanc);
}
.contact__block .val--urg { color: var(--vert-signature); }
.contact__block .sub { color: rgba(255,255,255,0.6); font-size: 14px; line-height: 1.55; margin-top: 8px; }
.contact__block a:hover { color: var(--vert-signature); }

.contact__confirm {
  padding: 20px;
  background: rgba(28,136,104,0.10);
  border-left: 3px solid var(--vert-signature);
  color: var(--blanc);
  font-size: 14px; line-height: 1.55;
  display: none;
}
.contact__confirm.is-visible { display: block; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .site-nav { display: none; }
  .burger { display: inline-flex; }
  .site-header__cta .tel { display: none; }
  .footer__inner { grid-template-columns: 1fr 1fr; gap: 40px 30px; }
  .zones__inner, .fiche-intro__inner, .contact__inner, .page-hero__inner, .tarifs-hero__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .contact__nap { border-left: 0; padding-left: 0; border-top: var(--border-subtle); padding-top: 30px; }
  .bio-fil__inner { grid-template-columns: 1fr; gap: 40px; }
  .bio-fil__head { position: static; }
  .pilier__grid { grid-template-columns: repeat(3, 1fr); }
  .symptomes__grid { grid-template-columns: repeat(2, 1fr); }
  .methode__grid { grid-template-columns: 1fr; gap: 16px; }
  .comparo__grid { grid-template-columns: 1fr; }
  .comparo__col + .comparo__col { border-left: 0; border-top: var(--border-subtle); }
}

@media (max-width: 768px) {
  :root { --header-h: 60px; }
  .site-header { padding: 10px var(--shell-px); }
  .brand__word small { display: none; }
  .avis__grid { grid-template-columns: 1fr; }
  .pilier__grid { grid-template-columns: repeat(2, 1fr); }
  .chapter {
    grid-template-columns: 1fr;
    grid-template-rows: 44vh 1fr;
    min-height: auto;
  }
  .chapter--right .chapter__text { order: 1; }
  .chapter--right .chapter__visual { order: 0; }
  .chapter__visual { min-height: 44vh; }
  .chapter__text { padding: 40px 24px 60px; }
  .chapter__ghost-num { font-size: clamp(140px, 40vw, 200px); top: 10px; left: 24px; }
  .chapter--right .chapter__ghost-num { left: 24px; right: auto; }
  .mini-wipes { position: static; padding: 20px 24px; background: rgba(10,10,10,0.7); }
  .traits__grid { grid-template-columns: 1fr; }
  .contact__form .row { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; }
  .avis__head { align-items: flex-start; flex-direction: column; }
  .hero__content { max-width: 100%; }
  .hero__scene-title { display: none; }
  .hero__stage-label .lab-txt { display: none; }
  .tarif-table { font-size: 13px; }
  .tarif-table th, .tarif-table td { padding: 12px 8px; }
}

@media (max-width: 480px) {
  .symptomes__grid, .pilier__grid { grid-template-columns: 1fr; }
  .cta-pill { padding: 12px 18px; font-size: 14px; }
  .hero__tel { font-size: 26px; }
  .hero__content { gap: 16px; bottom: 40px; }
}

/* Logo image (remplace la plaque texte .brand__mark) */
img.brand__mark {
  width: auto; height: 34px;
  background: none; border: none; padding: 0;
  object-fit: contain;
}