/* =========================================================
   CABINET PAILLARD — style.css   
   ========================================================= */

   @font-face {
    font-family: 'Clash Display';
    src: url('/fonts/clash-display-500.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
  }
  @font-face {
    font-family: 'Clash Display';
    src: url('/fonts/clash-display-600.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
  }
  @font-face {
    font-family: 'Clash Display';
    src: url('/fonts/clash-display-700.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
  }
  @font-face {
    font-family: 'General Sans';
    src: url('/fonts/general-sans-400.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
  }
  @font-face {
    font-family: 'General Sans';
    src: url('/fonts/general-sans-500.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
  }
  @font-face {
    font-family: 'General Sans';
    src: url('/fonts/general-sans-600.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
  }

/* ---------------------------------------------------------
   0. RESET
   --------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

/* ---------------------------------------------------------
   1. DESIGN TOKENS
   --------------------------------------------------------- */
:root {
  /* Couleurs */
  --noir:          #0E0E0E;
  --noir-chaud:    #1A1816;
  --noir-mid:      #252220;
  --creme:         #EDEAE4;
  --creme-dim:     #9A9590;
  --rouge:         #C8102E;
  --rouge-dark:    #A00E25;
  --blanc:         #FFFFFF;

  /* Ligne rouge signature */
  --ligne-left:    36px;
  --ligne-w:       2px;

  /* Espacement contenu (décalé de la ligne rouge) */
  --pad-h:         clamp(20px, 3.5vw, 56px);
  --content-left:  calc(var(--ligne-left) + var(--ligne-w) + var(--pad-h));
  --content-right: var(--pad-h);
  --container-max: 1360px;

  /* Sections */
  --section-v:     clamp(72px, 9vw, 136px);
  --section-v-sm:  clamp(48px, 6vw, 88px);

  /* Typo */
  --f-display:     'Clash Display', 'Arial Black', sans-serif;
  --f-body:        'General Sans', 'Arial', sans-serif;

  /* Easing */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);

  /* Shell — header, logo, footer (référence index.html) */
  --header-h:          100px;
  --logo-h:            72px;
  --logo-h-footer:     61px;
  --logo-max-w:        432px;
  --logo-footer-max-w: 360px;
}

/* ---------------------------------------------------------
   2. BASE
   --------------------------------------------------------- */
body {
  background: var(--noir);
  color: var(--creme);
  font-family: var(--f-body);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.menu-open {
  overflow: hidden;
}

img   { display: block; max-width: 100%; height: auto; }
a     { color: inherit; text-decoration: none; }
ul    { list-style: none; }
address { font-style: normal; }

/* ---------------------------------------------------------
   3. LIGNE ROUGE — ÉLÉMENT SIGNATURE
   Trait vertical fixe, 2px, rouge, toute la hauteur.
   --------------------------------------------------------- */
body::before {
  content: '';
  position: fixed;
  left: var(--ligne-left);
  top: 0;
  bottom: 0;
  width: var(--ligne-w);
  background: var(--rouge);
  z-index: 300;
  pointer-events: none;
  transform-origin: top center;
  animation: ligneReveal 1.1s var(--ease-out) 0.2s both;
}

@keyframes ligneReveal {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

/* ---------------------------------------------------------
   4. TYPOGRAPHIE
   --------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 600;
}

h1 { font-size: clamp(36px, 5.2vw, 78px); }
h2 { font-size: clamp(26px, 3vw, 50px); }
h3 { font-size: clamp(17px, 1.6vw, 24px); font-weight: 500; }

p  {
  max-width: 62ch;
  font-size: calc(1em + 1px);
}

.eyebrow {
  display: block;
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rouge);
  margin-bottom: 16px;
}

/* ---------------------------------------------------------
   5. LAYOUT UTILITAIRES
   --------------------------------------------------------- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left:  var(--content-left);
  padding-right: var(--content-right);
}

/* ---------------------------------------------------------
   6. BOUTONS
   --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition: background 0.28s var(--ease-out),
              color 0.28s var(--ease-out),
              border-color 0.28s var(--ease-out);
}

/* Underline slide rouge au hover */
.btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: var(--rouge);
  transition: left 0.3s var(--ease-out);
}
.btn:not(.btn-rouge):hover::after { left: 0; }

.btn-rouge {
  background: var(--rouge);
  color: var(--blanc);
}
.btn-rouge:hover { background: var(--rouge-dark); }
.btn-rouge::after { display: none; }

.btn-ghost {
  background: transparent;
  color: var(--creme);
  border: 1.5px solid rgba(237, 234, 228, 0.3);
}
.btn-ghost:hover {
  border-color: var(--creme);
  background: rgba(237, 234, 228, 0.06);
}

.btn-outline {
  background: transparent;
  color: var(--creme);
  border: 1.5px solid rgba(237, 234, 228, 0.25);
  padding: 13px 27px;
}
.btn-outline:hover {
  border-color: var(--rouge);
  color: var(--rouge);
}
.btn-outline::after { background: var(--rouge); }

.btn-blanc {
  background: var(--blanc);
  color: var(--rouge);
  font-weight: 700;
}
.btn-blanc:hover { background: var(--creme); }
.btn-blanc::after { display: none; }

.btn-text {
  background: transparent;
  color: var(--creme-dim);
  border: none;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.25s;
}
.btn-text:hover { color: var(--creme); }
.btn-text::after { display: none; }

/* ---------------------------------------------------------
   7. HEADER
   --------------------------------------------------------- */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  padding-left:  var(--content-left);
  padding-right: var(--content-right);
  transition: background 0.4s, box-shadow 0.4s;
}

.header.scrolled {
  background: rgba(14, 14, 14, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.5vw, 40px);
  height: var(--header-h);
}

.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.logo img {
  height: var(--logo-h);
  width: auto;
  max-width: min(var(--logo-max-w), 54vw);
  object-fit: contain;
}

.footer-logo img {
  height: var(--logo-h-footer);
  width: auto;
  max-width: var(--logo-footer-max-w);
  object-fit: contain;
  margin-bottom: 20px;
}

/* Lien nav de la page courante */
.nav-link[aria-current="page"] {
  color: var(--creme);
  font-weight: 600;
}
.nav-link[aria-current="page"]::after {
  width: 38%;
}

/* Nav centrale */
.nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.8vw, 44px);
}

.nav-link {
  font-size: 15px;
  font-weight: 500;
  color: var(--creme);
  letter-spacing: 0.02em;
  position: relative;
  padding-bottom: 4px;
  transition: color 0.25s;
  white-space: nowrap;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--rouge);
  transition: width 0.35s var(--ease-out);
}

.nav-link:hover {
  color: var(--blanc);
}

.nav-link:hover::after {
  width: 38%;
}

/* Header droite */
.header-right {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 24px);
  flex-shrink: 0;
}

.header-tel {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--creme);
  transition: color 0.25s;
  white-space: nowrap;
}
.header-tel:hover {
  color: var(--blanc);
}
.header-tel svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* Burger mobile */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  margin-left: auto;
  flex-shrink: 0;
  z-index: 230;
  min-width: 44px;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}
.burger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--creme);
  transition: transform 0.3s var(--ease-out), opacity 0.3s;
  transform-origin: center;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ---------------------------------------------------------
   8. MOBILE NAV (drawer)
   --------------------------------------------------------- */
.mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14,14,14,0.75);
  z-index: 210;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
  backdrop-filter: blur(2px);
}
.mobile-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.mobile-nav {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(300px, 90vw);
  background: var(--noir-chaud);
  border-left: 1px solid rgba(255,255,255,0.07);
  z-index: 220;
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h) + 12px) 32px 40px;
  transform: translateX(105%);
  transition: transform 0.4s var(--ease-out);
  visibility: hidden;
}
.mobile-nav.open {
  transform: translateX(0);
  visibility: visible;
}

.mobile-nav-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 32px;
}

.mobile-nav-list a {
  display: block;
  padding: 18px 0;
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--creme);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  transition: color 0.25s;
}
.mobile-nav-list a:first-child { border-top: 1px solid rgba(255,255,255,0.07); }
.mobile-nav-list a:hover { color: var(--rouge); }

.mobile-tel {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--creme-dim);
  margin-bottom: 20px;
  transition: color 0.25s;
}
.mobile-tel:hover { color: var(--rouge); }

.mobile-nav .btn-rouge {
  width: 100%;
  justify-content: center;
}

/* ---------------------------------------------------------
   9. HERO
   --------------------------------------------------------- */
.hero {
  position: relative;
  height: 100svh;
  min-height: 600px;
  max-height: 1000px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

/* Image de fond */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg picture,
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  will-change: transform;
  transition: transform 9s ease-out;
}

.hero-bg img.loaded { transform: scale(1.04); }

/* Dégradé asymétrique — fort à gauche, s'évapore à droite */
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,  rgba(14,14,14,0.90) 0%, rgba(14,14,14,0.55) 50%, rgba(14,14,14,0.18) 100%),
    linear-gradient(to top,    rgba(14,14,14,0.80) 0%, transparent 45%);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 10;
  padding-bottom: clamp(56px, 8vh, 96px);
  padding-left:  var(--content-left);
  padding-right: var(--content-right);
  max-width: 860px;
}

/* Label "Expert depuis 1996" */
.hero-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rouge);
  margin-bottom: 22px;
  opacity: 0;
  animation: fadeSlideUp 0.7s var(--ease-out) 0.7s both;
}

/* Titre H1 — révélation ligne par ligne */
.hero-title {
  margin-bottom: 28px;
  font-size: clamp(34px, 5vw, 76px);
}

.title-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em; /* évite le crop des descendantes */
}

.title-line span {
  display: block;
  transform: translateY(108%);
  animation: lineReveal 0.85s var(--ease-out) both;
}

.title-line:nth-child(1) span { animation-delay: 0.45s; }
.title-line:nth-child(2) span { animation-delay: 0.62s; color: var(--rouge); }
.title-line:nth-child(3) span { animation-delay: 0.79s; }

@keyframes lineReveal {
  to { transform: translateY(0); }
}

/* Sous-titre hero */
.hero-sub {
  font-size: clamp(14px, 1vw, 16px);
  color: var(--creme-dim);
  letter-spacing: 0.04em;
  margin-bottom: 36px;
  max-width: 52ch;
  opacity: 0;
  animation: fadeSlideUp 0.7s var(--ease-out) 1.1s both;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeSlideUp 0.7s var(--ease-out) 1.28s both;
}

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Indicateur de scroll */
.hero-scroll {
  position: absolute;
  right: clamp(20px, 3vw, 52px);
  bottom: clamp(28px, 5vh, 56px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 10;
  opacity: 0;
  animation: fadeSlideUp 0.7s var(--ease-out) 1.7s both;
}

.hero-scroll-line {
  width: 1px;
  height: 52px;
  background: linear-gradient(to bottom, transparent, var(--creme-dim));
  animation: scrollPulse 2.2s ease-in-out 2.2s infinite;
}

.hero-scroll-txt {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--creme-dim);
  writing-mode: vertical-rl;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.35; transform: scaleY(1); }
  50%       { opacity: 1;    transform: scaleY(1.25); }
}

/* ---------------------------------------------------------
   10. STATS — bande chiffrée
   --------------------------------------------------------- */
.stats {
  background: var(--noir-chaud);
  border-top:    1px solid rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.stats-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  padding-left:  var(--content-left);
  padding-right: var(--content-right);
}

.stat {
  padding: clamp(28px, 4vh, 44px) clamp(12px, 1.5vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 5px;
  /* animation via JS / IntersectionObserver */
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s var(--ease-out) var(--delay, 0s),
              transform 0.6s var(--ease-out) var(--delay, 0s);
}
.stat.visible {
  opacity: 1;
  transform: translateY(0);
}

.stat-number {
  font-family: var(--f-display);
  font-size: clamp(38px, 4vw, 62px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--creme);
}

.stat-sup {
  color: var(--rouge);
  font-size: 0.55em;
  vertical-align: super;
}

.stat-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--creme-dim);
}

.stat-divider {
  width: 1px;
  height: 56px;
  background: rgba(255,255,255,0.08);
}

/* ---------------------------------------------------------
   11. SERVICE — coeur de métier (split asymétrique 58/42)
   --------------------------------------------------------- */
.service {
  padding-top: var(--section-v);
  padding-bottom: var(--section-v);
  overflow: hidden;
}

.service-grid {
  display: grid;
  grid-template-columns: 1fr 42%;
  align-items: center;
  max-width: var(--container-max);
  margin: 0 auto;
}

/* Colonne texte */
.service-text {
  padding-left:  var(--content-left);
  padding-right: clamp(32px, 4vw, 72px);
}

.service-text h2 { margin-bottom: 22px; }

.service-intro {
  color: var(--creme-dim);
  margin-bottom: 36px;
  font-size: clamp(16px, 1.05vw, 18px);
}

/* Liste situations déclencheuses */
.situations {
  display: flex;
  flex-direction: column;
  margin-bottom: 40px;
}

.situation {
  display: flex;
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.situation:last-child { border-bottom: 1px solid rgba(255,255,255,0.07); }

.situation-dash {
  color: var(--rouge);
  font-family: var(--f-display);
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1.6;
  user-select: none;
}

.situation strong {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(14px, 1.1vw, 17px);
  font-weight: 500;
  color: var(--creme);
  margin-bottom: 5px;
}

.situation p {
  font-size: 14.5px;
  color: var(--creme-dim);
  line-height: 1.55;
  max-width: 48ch;
}

/* Colonne photo — reveal clip-path (rideau descendant) */
.service-visual {
  position: relative;
  min-width: 0;
  height: clamp(380px, 52vw, 640px);
  padding-right: var(--content-right);
}

.service-visual-reveal {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1s var(--ease-out);
}

.service-visual.visible .service-visual-reveal {
  clip-path: inset(0);
}

.service-visual-reveal picture {
  display: block;
  width: 100%;
  height: 100%;
}

.service-visual-reveal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s var(--ease-out), filter 0.4s;
}

.service-visual:hover .service-visual-reveal img {
  transform: scale(1.03);
  filter: saturate(0.80);
}

.visual-caption {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 2;
  background: rgba(14,14,14,0.82);
  color: var(--creme-dim);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 6px 12px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ---------------------------------------------------------
   12. SITES CONCERNÉS — grille bento
   --------------------------------------------------------- */
.sites {
  background: var(--noir-chaud);
  padding-top:    var(--section-v);
  padding-bottom: var(--section-v);
}

.sites-header {
  padding-left:  var(--content-left);
  padding-right: var(--content-right);
  margin-bottom: clamp(36px, 4.5vw, 56px);
}

.sites-header h2 { max-width: 18ch; }

/* Grille : 2 cartes portrait + 1 paysage pleine largeur */
.sites-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto;
  gap: 3px;
  /* Pas de padding — pleine largeur depuis le bord */
  padding-left: var(--content-left);
  padding-right: var(--content-right);
}

.site-card {
  background: var(--noir);
  overflow: hidden;
  /* Reveal décalé */
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s var(--ease-out) var(--delay, 0s),
              transform 0.65s var(--ease-out) var(--delay, 0s);
}
.site-card.visible { opacity: 1; transform: translateY(0); }

/* Carte paysage — occupe les 2 colonnes */
.site-card--wide { grid-column: 1 / -1; }

.site-card-img {
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.site-card--wide .site-card-img { aspect-ratio: 21 / 7; }

.site-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.65s var(--ease-out), filter 0.4s;
  will-change: transform;
}
.site-card:hover .site-card-img img {
  transform: scale(1.04);
  filter: saturate(0.85);
}

.site-card-body {
  padding: clamp(20px, 2vw, 28px);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.site-card-body h3 {
  font-size: clamp(14px, 1.2vw, 18px);
  margin-bottom: 8px;
  color: var(--creme);
}
.site-card-body p {
  font-size: 14px;
  color: var(--creme-dim);
  line-height: 1.55;
  max-width: 50ch;
}

/* ---------------------------------------------------------
   13. CIBLES — layout éditorial 2 colonnes
   --------------------------------------------------------- */
.targets {
  padding-top:    var(--section-v);
  padding-bottom: var(--section-v);
}

.targets-grid {
  display: grid;
  grid-template-columns: 1fr 55%;
  gap: clamp(48px, 7vw, 110px);
  align-items: start;
  padding-left:  var(--content-left);
  padding-right: var(--content-right);
}

.targets-intro h2 { margin-bottom: 18px; }
.targets-intro > p { color: var(--creme-dim); font-size: 16px; }

/* Liste cibles numérotée */
.targets-list {
  display: flex;
  flex-direction: column;
}

.target-item {
  display: flex;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.55s var(--ease-out) var(--delay, 0s),
              transform 0.55s var(--ease-out) var(--delay, 0s);
}
.target-item:first-child { border-top: 1px solid rgba(255,255,255,0.07); }
.target-item.visible { opacity: 1; transform: translateX(0); }

.target-num {
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--rouge);
  letter-spacing: 0.06em;
  flex-shrink: 0;
  padding-top: 3px;
  min-width: 22px;
}

.target-item strong {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 500;
  color: var(--creme);
  margin-bottom: 6px;
}
.target-item p {
  font-size: 14px;
  color: var(--creme-dim);
  line-height: 1.5;
  max-width: 45ch;
}

/* ---------------------------------------------------------
   14. CABINET — section famille (split 44/56)
   --------------------------------------------------------- */
.cabinet {
  background: var(--noir-chaud);
  padding-top:    var(--section-v);
  padding-bottom: var(--section-v);
  overflow: hidden;
}

.cabinet-grid {
  display: grid;
  grid-template-columns: 44% 1fr;
  gap: clamp(40px, 5vw, 88px);
  align-items: center;
  padding-left:  var(--content-left);
  padding-right: var(--content-right);
  max-width: var(--container-max);
  margin: 0 auto;
}

/* Portraits */
.portraits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.portrait-card {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out) var(--delay, 0s),
              transform 0.7s var(--ease-out) var(--delay, 0s);
}
.portrait-card.visible { opacity: 1; transform: translateY(0); }

.portrait-wrap {
  margin-bottom: 12px;
}

.portrait-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.5s var(--ease-out);
}
.portrait-card:hover .portrait-wrap img { transform: scale(1.04); }

/* Placeholder visuel avant photos réelles */
.portrait-placeholder {
  width: 100%;
  height: 100%;
  background: var(--noir-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
}
.portrait-placeholder span {
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--creme-dim);
  letter-spacing: 0.03em;
}

.portrait-name {
  font-family: var(--f-display);
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: 500;
  color: var(--creme);
  margin-bottom: 4px;
}
.portrait-role {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--rouge);
}

/* Texte cabinet */
.cabinet-text h2 { margin-bottom: 20px; }
.cabinet-intro {
  color: var(--creme-dim);
  font-size: clamp(16px, 1.05vw, 18px);
  margin-bottom: 32px;
}

.engagements {
  display: flex;
  flex-direction: column;
  margin-bottom: 36px;
}

.engagement {
  display: flex;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 14px;
  color: var(--creme-dim);
  line-height: 1.5;
}
.engagement-dash {
  color: var(--rouge);
  font-size: 16px;
  flex-shrink: 0;
  line-height: 1.6;
  user-select: none;
}

/* ---------------------------------------------------------
   15. DOUBLE COMPÉTENCE — encart expertise immobilière
   --------------------------------------------------------- */
.expertise-immo {
  padding-top:    var(--section-v-sm);
  padding-bottom: var(--section-v-sm);
}

.expertise-immo-inner {
  display: grid;
  grid-template-columns: minmax(200px, 34%) 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  background: var(--noir-chaud);
  padding: clamp(32px, 4vw, 56px);
  margin-left:  var(--content-left);
  margin-right: var(--content-right);
  /* Reveal */
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.expertise-immo-inner.visible { opacity: 1; transform: translateY(0); }

.expertise-immo-tag {
  font-family: var(--f-display);
  font-size: clamp(32px, 4.2vw, 58px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.06;
  color: var(--rouge);
}

.expertise-immo-inner h2 {
  font-size: clamp(18px, 1.8vw, 28px);
  margin-bottom: 12px;
}
.expertise-immo-inner > div > p {
  font-size: 15px;
  color: var(--creme-dim);
  margin-bottom: 20px;
  max-width: 68ch;
}

/* ---------------------------------------------------------
   16. CTA FINAL — fond rouge, pleine largeur
   --------------------------------------------------------- */
.cta-final {
  background: var(--rouge);
  padding-top:    clamp(64px, 9vw, 120px);
  padding-bottom: clamp(64px, 9vw, 120px);
  padding-left:   var(--content-left);
  padding-right:  var(--content-right);
}

.cta-final-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.cta-final-inner.visible { opacity: 1; transform: translateY(0); }

.cta-final-text h2 {
  color: var(--blanc);
  font-size: clamp(22px, 2.6vw, 44px);
  margin-bottom: 10px;
}
.cta-final-text p {
  color: rgba(255,255,255,0.72);
  font-size: 16px;
}

.cta-final-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.cta-final-contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-style: normal;
}
.cta-final-contact a {
  font-size: 17px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  transition: color 0.25s;
}
.cta-final-contact a:hover { color: var(--blanc); }

/* ---------------------------------------------------------
   17. FOOTER
   --------------------------------------------------------- */
.footer {
  background: var(--noir-chaud);
  border-top: 1px solid rgba(255,255,255,0.06);
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(280px, 320px) 1fr 1fr 1.4fr;
  gap: clamp(32px, 4vw, 56px);
  padding-top:    clamp(56px, 7vw, 88px);
  padding-bottom: clamp(56px, 7vw, 88px);
  padding-left:   var(--content-left);
  padding-right:  var(--content-right);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.footer-baseline {
  font-size: 15px;
  color: var(--creme-dim);
  line-height: 1.55;
  margin-bottom: 22px;
  max-width: 28ch;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-contact a {
  font-size: 14px;
  color: var(--creme);
  transition: color 0.25s;
}
.footer-contact a:hover { color: var(--rouge); }

.footer-social {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--creme-dim);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}

.footer-social svg {
  width: 16px;
  height: 16px;
}

.footer-social a:hover {
  color: var(--creme);
  border-color: var(--rouge);
  background: rgba(200, 16, 46, 0.08);
}

.footer-col-title {
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rouge);
  margin-bottom: 22px;
}

.footer-nav-list,
.footer-implant-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-nav-list a,
.footer-implant-list li {
  font-size: 14px;
  line-height: 1.45;
  color: var(--creme-dim);
  transition: color 0.25s;
}
.footer-nav-list a:hover { color: var(--rouge); }

.footer-regions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}
.footer-regions-grid a {
  font-size: 12px;
  color: var(--creme-dim);
  transition: color 0.25s;
}
.footer-regions-grid a:hover { color: var(--rouge); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px var(--content-right) 18px var(--content-left);
}

.footer-bottom a {
  font-size: 13px;
  color: var(--creme-dim);
  transition: color 0.25s;
}

.footer-bottom a:hover {
  color: var(--creme);
}

/* ---------------------------------------------------------
   18. ANIMATIONS SCROLL — classes de base
   --------------------------------------------------------- */
.reveal-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out) var(--delay, 0s),
              transform 0.7s var(--ease-out) var(--delay, 0s);
}
.reveal-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------------------------------------------------
   19. ACCESSIBILITÉ
   --------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--rouge);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------
   20. RESPONSIVE
   --------------------------------------------------------- */

/* Header intermédiaire — nav + CTA à taille normale, sans téléphone */
@media (min-width: 1281px) and (max-width: 1349px) {
  .header-tel { display: none; }
}

/* Header menu mobile (≤ 1280px — typo nav lisible dans le drawer) */
@media (max-width: 1280px) {
  .nav { display: none; }

  .burger { display: flex; }

  .header-inner {
    gap: 12px;
    justify-content: space-between;
  }

  .logo {
    flex: 1;
    min-width: 0;
  }

  .logo img {
    max-width: min(var(--logo-max-w), 58vw);
  }

  .header {
    background: rgba(14, 14, 14, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .header.scrolled,
  .header.menu-open {
    background: rgba(14, 14, 14, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.04);
  }
}

/* Tablette large */
@media (max-width: 1100px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 36px 48px;
  }
  .service-grid {
    grid-template-columns: 1fr 40%;
  }
  .targets-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .cabinet-grid {
    grid-template-columns: 40% 1fr;
  }
}

/* Tablette */
@media (max-width: 900px) {
  :root {
    --ligne-left: 22px;
    --header-h: 84px;
    --logo-h: 58px;
    --logo-h-footer: 52px;
  }
  .header-right .btn { display: none; }

  /* Hero */
  .hero-title { font-size: clamp(30px, 7vw, 52px); }

  /* Stats — 2 colonnes */
  .stats-inner {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .stat-divider { display: none; }
  .stat { border-bottom: 1px solid rgba(255,255,255,0.06); }
  .stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.06); }

  /* Service — empilé */
  .service-grid {
    grid-template-columns: 1fr;
  }
  .service-text { padding-right: var(--content-right); }
  .service-visual {
    height: 380px;
    order: -1;
    padding-right: 0;
  }

  /* Cabinet — empilé */
  .cabinet-grid {
    grid-template-columns: 1fr;
  }
  .portraits {
    order: 2;
    max-width: 440px;
  }

  /* Expertise immo */
  .expertise-immo-inner {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Mobile */
@media (max-width: 620px) {
  :root {
    --ligne-left: 16px;
    --pad-h: 20px;
    --header-h: 76px;
    --logo-h: 50px;
    --logo-h-footer: 46px;
    --logo-max-w: 220px;
  }  

  .mobile-nav {
    width: min(280px, 88vw);
    padding-left: 24px;
    padding-right: 24px;
  }

  .mobile-nav-list a {
    font-size: 20px;
    padding: 16px 0;
  }

  /* Sites — 1 colonne */
  .sites-grid { grid-template-columns: 1fr; }
  .site-card--wide { grid-column: span 1; }
  .site-card--wide .site-card-img { aspect-ratio: 4 / 3; }

  /* Footer — 1 colonne */
  .footer-top { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* Stats — 2x2 resserré */
  .stats-inner { grid-template-columns: 1fr 1fr; }

  /* CTA final — empilé */
  .cta-final-inner { flex-direction: column; align-items: flex-start; }

  /* Hero — boutons empilés */
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .hero-actions .btn { width: 100%; justify-content: center; }
}

/* Préférence reduced-motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  body::before { animation: none; transform: scaleY(1); opacity: 1; }

  .hero-bg img,
  .hero-bg img.loaded { transform: none !important; transition: none !important; }

  .title-line span,
  .page-title span { animation: none !important; transform: none !important; opacity: 1 !important; }

  .reveal-up,
  .stat,
  .site-card,
  .target-item,
  .portrait-card,
  .service-visual,
  .expertise-immo-inner,
  .cta-final-inner,
  .level-card,
  .usecase-card,
  .timeline-step,
  .timeline-circle {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .timeline-step::before {
    transform: scaleY(1) !important;
    transition: none !important;
  }

  .service-visual-reveal {
    clip-path: inset(0) !important;
    transition: none !important;
  }
}


/* =========================================================
   21. PAGES INTÉRIEURES — composants spécifiques
   ========================================================= */

/* ---------------------------------------------------------
   PAGE HERO — version compacte (50vh max)
   Remplace le hero pleine hauteur de l'accueil
   --------------------------------------------------------- */
.page-hero {
  position: relative;
  height: clamp(420px, 58vh, 660px);
  /* Pas de margin-top : header fixe transparent sur le hero (comme index) */
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

/* Version sans photo (formulaire, mentions légales) */
.page-hero--dark {
  height: clamp(200px, 26vh, 300px);
  margin-top: var(--header-h);
  background: var(--noir-chaud);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.page-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-hero-bg picture,
.page-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
.page-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(14,14,14,0.26) 0%, transparent 28%),
    linear-gradient(to right, rgba(14,14,14,0.62) 0%, rgba(14,14,14,0.36) 55%, rgba(14,14,14,0.10) 100%),
    linear-gradient(to top, rgba(14,14,14,0.52) 0%, transparent 50%);
}

.page-hero-content {
  position: relative;
  z-index: 10;
  padding-bottom: clamp(36px, 5vh, 60px);
  padding-left:  var(--content-left);
  padding-right: var(--content-right);
}

/* Fil d'Ariane */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--creme-dim);
}
.breadcrumb a {
  color: var(--creme-dim);
  transition: color 0.25s;
}
.breadcrumb a:hover { color: var(--rouge); }
.breadcrumb-sep { color: rgba(154,149,144,0.4); font-size: 10px; }
.breadcrumb-current { color: var(--rouge); }

/* Titre de page */
.page-title {
  font-family: var(--f-display);
  font-size: clamp(28px, 4vw, 62px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--creme);
  max-width: 18ch;
  /* Révélation clip-path — même principe que hero */
  overflow: hidden;
}
.page-title span {
  display: block;
  animation: lineReveal 0.85s var(--ease-out) 0.3s both;
}

/* ---------------------------------------------------------
   INTRO DE PAGE — chapeau + colonne éditoriale
   --------------------------------------------------------- */
.page-intro {
  padding-top:    var(--section-v-sm);
  padding-bottom: var(--section-v-sm);
  padding-left:   var(--content-left);
  padding-right:  var(--content-right);
}

.page-intro-grid {
  display: grid;
  grid-template-columns: 1fr 55%;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}

.page-intro-lead {
  font-family: var(--f-display);
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--creme);
}

.page-intro-body {
  font-size: clamp(15px, 1.05vw, 17px);
  color: var(--creme-dim);
  line-height: 1.7;
}
.page-intro-body p + p { margin-top: 18px; }

/* ---------------------------------------------------------
   QUOTE BLOCK — rupture visuelle, fond rouge
   Utilisé sur expert-pollution-des-sols.html pour la phrase sur l'indépendance
   --------------------------------------------------------- */
.quote-block {
  background: var(--rouge);
  padding: clamp(60px, 8vw, 110px) var(--content-right) clamp(60px, 8vw, 110px) var(--content-left);
}

.quote-block blockquote {
  font-family: var(--f-display);
  font-size: clamp(22px, 3vw, 46px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--blanc);
  max-width: 22ch;
  border: none;
  padding: 0;
  margin: 0;
}

.quote-block blockquote em {
  font-style: normal;
  color: rgba(255,255,255,0.55);
}

/* ---------------------------------------------------------
   TEAM — portraits grand format (le-cabinet)
   Layout 70/30 : portrait gauche, texte droite
   --------------------------------------------------------- */
.team-section {
  padding-top:    var(--section-v);
  padding-bottom: var(--section-v);
}

.team-member {
  display: grid;
  grid-template-columns: 38% 1fr;
  gap: clamp(40px, 5vw, 88px);
  align-items: center;
  padding-left:  var(--content-left);
  padding-right: var(--content-right);
  margin-bottom: var(--section-v);
}

/* Alternance : membre 2 = photo à droite */
.team-member:nth-child(even) {
  grid-template-columns: 1fr 38%;
}
.team-member:nth-child(even) .team-photo { order: 2; }
.team-member:nth-child(even) .team-bio   { order: 1; }

.team-member:last-child { margin-bottom: 0; }

.team-photo {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--noir-mid);
}
.team-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.6s var(--ease-out);
}
.team-member:hover .team-photo img { transform: scale(1.03); }

/* Placeholder portrait */
.team-photo-placeholder {
  width: 100%; height: 100%;
  background: var(--noir-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
}
.team-photo-placeholder span {
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--creme-dim);
}

.team-tag {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(14,14,14,0.88), transparent);
  padding: 20px 20px 16px;
}
.team-tag-name {
  font-family: var(--f-display);
  font-size: clamp(16px, 1.4vw, 22px);
  font-weight: 600;
  color: var(--creme);
  display: block;
  margin-bottom: 4px;
}
.team-tag-role {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rouge);
}

.team-bio h3 {
  font-size: clamp(16px, 1.5vw, 22px);
  margin-bottom: 16px;
}
.team-bio p {
  color: var(--creme-dim);
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.7;
}
.team-bio p + p { margin-top: 16px; }

/* ---------------------------------------------------------
   NORMES — liste de certifications (le-cabinet)
   --------------------------------------------------------- */
.normes-section {
  background: var(--noir-chaud);
  padding-top:    var(--section-v-sm);
  padding-bottom: var(--section-v-sm);
  padding-left:   var(--content-left);
  padding-right:  var(--content-right);
}

.normes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

.norme-item {
  padding: 24px 0;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.norme-code {
  font-family: var(--f-display);
  font-size: clamp(15px, 1.2vw, 19px);
  font-weight: 600;
  color: var(--rouge);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.norme-desc {
  font-size: 15px;
  color: var(--creme-dim);
  line-height: 1.55;
  max-width: 50ch;
}

/* Implantations (le-cabinet) */
.implantations {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  margin-top: clamp(40px, 5vw, 64px);
}
.implantation-card {
  background: var(--noir);
  padding: clamp(20px, 2.5vw, 32px);
  border-top: 2px solid transparent;
  transition: border-color 0.3s;
}
.implantation-card:first-child { border-top-color: var(--rouge); }
.implantation-card:hover { border-top-color: var(--rouge); }

.implantation-ville {
  font-family: var(--f-display);
  font-size: clamp(17px, 1.4vw, 23px);
  font-weight: 600;
  color: var(--creme);
  margin-bottom: 4px;
}
.implantation-dept {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--creme-dim);
  margin-bottom: 10px;
}
.implantation-role {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rouge);
}

/* ---------------------------------------------------------
   NIVEAUX D'INTERVENTION — diagnostic pollution
   Numérotation monumentale en filigrane (rouge, opacité faible)
   --------------------------------------------------------- */
.levels-section {
  padding-top:    var(--section-v);
  padding-bottom: var(--section-v);
}

.levels-header {
  padding-left:  var(--content-left);
  padding-right: var(--content-right);
  margin-bottom: clamp(48px, 6vw, 80px);
}

.level-card {
  display: grid;
  /* num | contenu | photo (toujours à droite) */
  grid-template-columns: clamp(90px, 10vw, 140px) 1fr minmax(220px, 28%);
  gap: 0 clamp(28px, 3.5vw, 56px);
  align-items: start;
  padding-top:    clamp(40px, 5vw, 68px);
  padding-bottom: clamp(40px, 5vw, 68px);
  padding-left:   var(--content-left);
  padding-right:  var(--content-right);
  border-top: 1px solid rgba(255,255,255,0.07);
  position: relative;
  /* Reveal */
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s var(--ease-out) var(--delay, 0s),
              transform 0.7s var(--ease-out) var(--delay, 0s);
}
.level-card.visible { opacity: 1; transform: translateY(0); }
.level-card:last-child { border-bottom: 1px solid rgba(255,255,255,0.07); }

.level-gutter { display: none; }

/* Photo carrée à droite du bloc texte — alignée sur le titre h3 */
.level-visual {
  margin: 0;
  /* compense le badge "NIVEAU X" + sa marge pour s'aligner sur le titre */
  margin-top: 42px;
  width: 100%;
  aspect-ratio: 1 / 1;
  align-self: start;
  overflow: hidden;
  background: var(--noir-mid);
}

.level-visual picture {
  display: block;
  width: 100%;
  height: 100%;
}

.level-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s var(--ease-out), filter 0.4s;
}

.level-card:hover .level-visual img {
  transform: scale(1.03);
  filter: saturate(0.85);
}

.level-card--alt {
  background: var(--noir-chaud);
}

/* Numéro monumental en filigrane */
.level-num {
  font-family: var(--f-display);
  font-size: clamp(80px, 9vw, 140px);
  font-weight: 700;
  line-height: 0.85;
  color: var(--rouge);
  opacity: 0.10;
  letter-spacing: -0.04em;
  user-select: none;
  margin-top: -8px;
  flex-shrink: 0;
}

/* Contenu du niveau */
.level-body {
  /* hérite du padding-right du parent */
}

.level-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rouge);
  border: 1px solid var(--rouge);
  padding: 4px 10px;
  margin-bottom: 16px;
}

.level-body h3 {
  font-size: clamp(18px, 2vw, 28px);
  margin-bottom: 16px;
  font-weight: 600;
}

.level-body > p {
  color: var(--creme-dim);
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.7;
  margin-bottom: 20px;
}

.level-usecases {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 20px;
}
.level-usecases li {
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--creme-dim);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.level-usecases li::before {
  content: '→';
  color: var(--rouge);
  flex-shrink: 0;
  font-size: 12px;
  line-height: 1.55;
  padding-top: 1px;
}
.level-usecases li > .uc {
  flex: 1;
  min-width: 0;
}
.level-usecases li:last-child { border-bottom: 1px solid rgba(255,255,255,0.06); }

.level-usecases strong {
  display: block;
  color: var(--creme);
  font-weight: 600;
  margin-bottom: 4px;
}
.level-usecases .uc span {
  display: block;
}

/* ---------------------------------------------------------
   PAGES SANS PHOTO HERO — header toujours opaque
   --------------------------------------------------------- */
.page-devis .header,
.page-legal .header {
  background: rgba(14, 14, 14, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04);
}

/* ---------------------------------------------------------
   PAGE EXPERTISE IMMOBILIÈRE — ajustements dédiés
   --------------------------------------------------------- */
.page-expertise-immo .page-title {
  max-width: 28ch;
}

/* ---------------------------------------------------------
   PAGE LE CABINET — ajustements dédiés
   --------------------------------------------------------- */

/* Hero pages intérieures */
.page-cabinet .page-hero-bg img,
.page-expertise-immo .page-hero-bg img {
  object-position: center 52%;
}

/* ---------------------------------------------------------
   PAGE DIAGNOSTIC POLLUTION — ajustements dédiés
   --------------------------------------------------------- */

.page-diagnostic .page-hero-bg img {
  object-position: center 58%;
}

.page-diagnostic .levels-header h2 {
  max-width: 22ch;
}

.page-diagnostic .level-body .btn-outline {
  margin-top: 8px;
}

.legal-block-header {
  margin-bottom: clamp(36px, 4vw, 56px);
}

.page-diagnostic .legal-item p {
  max-width: none;
}

/* ---------------------------------------------------------
   ENCART JURIDIQUE — diagnostic pollution
   --------------------------------------------------------- */
.legal-block {
  background: var(--noir-chaud);
  padding: var(--section-v-sm) var(--content-right) var(--section-v-sm) var(--content-left);
}

.legal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(24px, 3vw, 48px);
}

.legal-item {
  padding-top: 24px;
  border-top: 2px solid rgba(255,255,255,0.08);
  transition: border-color 0.3s var(--ease-out);
}
/* Par défaut : première colonne en rouge */
.legal-item:first-child { border-top-color: var(--rouge); }

/* Quand la grille est survolée : toutes repassent au gris… */
.legal-grid:hover .legal-item { border-top-color: rgba(255,255,255,0.08); }
/* …sauf celle sous la souris */
.legal-grid:hover .legal-item:hover { border-top-color: var(--rouge); }

.legal-item p {
  font-size: 15px;
  color: var(--creme-dim);
  line-height: 1.6;
  max-width: 40ch;
}

/* ---------------------------------------------------------
   CAS D'USAGE — grille expertise immobilière
   --------------------------------------------------------- */
.usecases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding-left:  var(--content-left);
  padding-right: var(--content-right);
}

.usecase-card {
  background: var(--noir-chaud);
  padding: clamp(24px, 2.5vw, 36px);
  border-top: 2px solid transparent;
  transition: border-color 0.3s var(--ease-out);
  /* Reveal */
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s var(--ease-out) var(--delay, 0s),
              transform 0.6s var(--ease-out) var(--delay, 0s),
              border-color 0.3s;
}
.usecase-card.visible { opacity: 1; transform: translateY(0); }
.usecase-card:hover { border-top-color: var(--rouge); }

.usecase-card h3 {
  font-size: clamp(15px, 1.3vw, 19px);
  margin-bottom: 12px;
  color: var(--creme);
}
.usecase-card p {
  font-size: 14.5px;
  color: var(--creme-dim);
  line-height: 1.58;
  max-width: 44ch;
}

/* ---------------------------------------------------------
   ACTIFS EXPERTISÉS — liste éditoriale (expertise immo)
   --------------------------------------------------------- */
.assets-section {
  padding-top:    var(--section-v);
  padding-bottom: var(--section-v);
  padding-left:   var(--content-left);
  padding-right:  var(--content-right);
}

.assets-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 48px) clamp(40px, 6vw, 100px);
  margin-top: clamp(36px, 4vw, 56px);
}

.asset-item {
  padding: 22px 0;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.asset-item h3 {
  font-size: clamp(15px, 1.2vw, 19px);
  margin-bottom: 10px;
  color: var(--creme);
}
.asset-item p {
  font-size: 14.5px;
  color: var(--creme-dim);
  line-height: 1.58;
  max-width: 50ch;
}

/* ---------------------------------------------------------
   TIMELINE — déroulement mission expertise immo
   --------------------------------------------------------- */
.timeline-section {
  background: var(--noir-chaud);
  padding-top:    var(--section-v);
  padding-bottom: var(--section-v);
  /* Header centré */
  padding-left:   var(--content-left);
  padding-right:  var(--content-right);
}

.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: clamp(40px, 5vw, 60px);
  max-width: 680px;
  /* centré, texte aligné à gauche à l'intérieur */
  margin-left: auto;
  margin-right: auto;
}

/* Chaque étape */
.timeline-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 0 28px;
  position: relative;
  /* État initial — attend le reveal */
  opacity: 0;
  transform: translateX(-24px);
}
/* Transition portée par un data-delay calculé en JS */
.timeline-step.visible {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.7s var(--ease-out) var(--tl-delay, 0s),
              transform 0.7s var(--ease-out) var(--tl-delay, 0s);
}

/* Connecteur vertical entre étapes — se dessine quand l'étape est visible */
.timeline-step::before {
  content: '';
  position: absolute;
  left: 27px;
  top: 56px;
  bottom: 0;
  width: 1px;
  background: var(--rouge);
  opacity: 0.25;
  transform-origin: top center;
  transform: scaleY(0);
  transition: transform 0.7s var(--ease-out) calc(var(--tl-delay, 0s) + 0.45s);
}
.timeline-step.visible::before {
  transform: scaleY(1);
}
.timeline-step:last-child::before { display: none; }

/* Cercle numéroté — pop au reveal */
.timeline-circle {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--noir);
  border: 1.5px solid rgba(200,16,46,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--rouge);
  position: relative;
  z-index: 1;
  /* État initial */
  transform: scale(0.5);
  transition: transform 0.55s cubic-bezier(0.34, 1.48, 0.64, 1) var(--tl-delay, 0s),
              border-color 0.55s var(--ease-out) var(--tl-delay, 0s);
}
.timeline-step.visible .timeline-circle {
  transform: scale(1);
  border-color: var(--rouge);
}

.timeline-content {
  padding-bottom: clamp(28px, 3.5vw, 48px);
  padding-top: 14px;
}
.timeline-content h3 {
  font-size: clamp(16px, 1.4vw, 20px);
  margin-bottom: 10px;
  color: var(--creme);
}
.timeline-content p {
  font-size: 15px;
  color: var(--creme-dim);
  line-height: 1.6;
  max-width: 58ch;
}

/* ---------------------------------------------------------
   PAGE ACTUALITÉS — zones de contenu
   --------------------------------------------------------- */
.linkedin-zone {
  padding-top:    var(--section-v-sm);
  padding-bottom: var(--section-v-sm);
  padding-left:   var(--content-left);
  padding-right:  var(--content-right);
}

.linkedin-zone .elfsight-app-7c662314-10f2-41c5-98ab-44aa387c9a7e {
  max-width: 900px;
  margin: 0 auto;
  display: block;
}

.linkedin-placeholder {
  min-height: 360px;
  background: var(--noir-chaud);
  border: 1px dashed rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  text-align: center;
  padding: 40px;
}
.linkedin-placeholder p {
  font-size: 15px;
  color: var(--creme-dim);
  max-width: 44ch;
  margin: 0 auto;
}
.linkedin-placeholder a {
  color: var(--rouge);
  transition: opacity 0.25s;
}
.linkedin-placeholder a:hover { opacity: 0.75; }

/* Grille rubriques actualités */
.topics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 3vw, 40px);
  margin-top: clamp(36px, 4vw, 52px);
}

.topic-item {
  padding: 24px 0;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.topic-item h3 {
  font-size: clamp(15px, 1.2vw, 19px);
  margin-bottom: 10px;
  color: var(--creme);
}
.topic-item p {
  font-size: 14.5px;
  color: var(--creme-dim);
  line-height: 1.58;
  max-width: 52ch;
}

/* ---------------------------------------------------------
   FORMULAIRE — demande-de-devis
   Layout 2 colonnes : form (65%) | sidebar réassurance (35%)
   --------------------------------------------------------- */
.devis-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
  padding-top:    var(--section-v-sm);
  padding-bottom: var(--section-v);
  padding-left:   var(--content-left);
  padding-right:  var(--content-right);
}

/* Formulaire */
.devis-form { display: flex; flex-direction: column; gap: 28px; }

.field-group { display: flex; flex-direction: column; gap: 8px; }
.field-group--row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.field-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--creme-dim);
}
.field-required { color: var(--rouge); margin-left: 2px; }

/* Inputs, selects, textarea */
.field-input,
.field-select,
.field-textarea {
  width: 100%;
  background: var(--noir-chaud);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--creme);
  font-family: var(--f-body);
  font-size: 15px;
  padding: 14px 16px;
  outline: none;
  transition: border-color 0.25s, background 0.25s;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
}

.field-input::placeholder,
.field-textarea::placeholder { color: var(--creme-dim); opacity: 0.5; }

.field-input:focus,
.field-select:focus,
.field-textarea:focus {
  border-color: var(--rouge);
  background: var(--noir-mid);
}

/* Flèche custom pour les selects */
.field-select-wrap {
  position: relative;
}
.field-select-wrap::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--creme-dim);
  pointer-events: none;
}

.field-textarea { resize: vertical; min-height: 110px; }

/* RGPD notice */
.form-rgpd-notice {
  font-size: 12px;
  color: rgba(255,255,255,0.38);
  line-height: 1.55;
  padding: 0.75rem 1rem;
  border-left: 2px solid rgba(255,255,255,0.1);
  max-width: none;
  column-count: 2;
  column-gap: 2rem;
}
.form-rgpd-notice a {
  color: rgba(255,255,255,0.5);
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.2);
  transition: color 0.2s;
}
.form-rgpd-notice a:hover { color: var(--rouge); }

.form-rgpd {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.55;
  color: var(--creme-dim);
}
.form-rgpd input {
  margin-top: 4px;
  flex-shrink: 0;
  accent-color: var(--rouge);
}
.form-rgpd label { cursor: pointer; }

.form-submit {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.form-note {
  font-size: 13px;
  color: var(--creme-dim);
}

.form-feedback {
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.5;
  border-left: 2px solid var(--rouge);
  background: var(--noir-chaud);
  color: var(--creme);
}
.form-feedback--error {
  border-left-color: var(--rouge);
  color: var(--creme);
}

/* Séparateur de sections dans le form */
.field-separator {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.07);
  margin: 4px 0;
}

/* Sidebar réassurance */
.devis-sidebar { position: sticky; top: 100px; }

.sidebar-card {
  background: var(--noir-chaud);
  padding: clamp(24px, 2.5vw, 36px);
  border-left: 2px solid var(--rouge);
  margin-bottom: 16px;
}
.sidebar-card h3 {
  font-size: clamp(15px, 1.2vw, 18px);
  margin-bottom: 16px;
}

.sidebar-engagements {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sidebar-engagement {
  display: flex;
  gap: 12px;
  font-size: 13px;
  color: var(--creme-dim);
  line-height: 1.5;
}
.sidebar-engagement-dash {
  color: var(--rouge);
  flex-shrink: 0;
}

.sidebar-contact {
  background: var(--noir-mid);
  padding: clamp(20px, 2vw, 28px);
}
.sidebar-contact-intro {
  font-size: 14px;
  color: var(--creme-dim);
  margin-bottom: 16px;
  max-width: none;
}
.sidebar-contact-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--creme);
  margin-bottom: 8px;
  max-width: none;
}
.sidebar-contact-sep {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.07);
  margin: 16px 0;
}
.sidebar-contact a {
  display: block;
  font-size: 14px;
  color: var(--creme);
  padding: 6px 0;
  transition: color 0.25s;
}
.sidebar-contact a:hover { color: var(--rouge); }

/* ---------------------------------------------------------
   PAGE MERCI — confirmation
   --------------------------------------------------------- */
.merci-page {
  min-height: calc(100vh - var(--header-h));
  margin-top: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--section-v) var(--content-right) var(--section-v) var(--content-left);
  background: var(--noir);
}

.merci-inner {
  max-width: 580px;
  text-align: left;
}

.merci-check {
  width: 56px; height: 56px;
  background: var(--rouge);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
}

.merci-inner h1 {
  font-size: clamp(28px, 3.5vw, 48px);
  margin-bottom: 20px;
  color: var(--creme);
}

.merci-inner p {
  color: var(--creme-dim);
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.7;
  margin-bottom: 36px;
}

/* ---------------------------------------------------------
   RESPONSIVE — pages intérieures
   --------------------------------------------------------- */
@media (max-width: 1100px) {
  .team-member,
  .team-member:nth-child(even) {
    grid-template-columns: 1fr;
  }
  .team-member:nth-child(even) .team-photo,
  .team-member:nth-child(even) .team-bio { order: unset; }
  .team-photo { aspect-ratio: 4 / 3; max-width: 480px; }

  .legal-grid { grid-template-columns: 1fr 1fr; }
  .usecases-grid { grid-template-columns: repeat(2, 1fr); }
  .implantations { grid-template-columns: repeat(2, 1fr); }

  .devis-layout {
    grid-template-columns: 1fr;
  }
  .devis-sidebar { position: static; }

  .level-card,
  .level-card--alt {
    grid-template-columns: clamp(70px, 8vw, 100px) 1fr minmax(180px, 26%);
  }
}

@media (max-width: 900px) {
  .page-intro-grid { grid-template-columns: 1fr; gap: 32px; }
  .normes-grid { grid-template-columns: 1fr; }
  .assets-grid { grid-template-columns: 1fr; }
  .topics-grid { grid-template-columns: 1fr; }

  .field-group--row { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .legal-grid { grid-template-columns: 1fr; }
  .usecases-grid { grid-template-columns: 1fr; }
  .implantations { grid-template-columns: 1fr 1fr; }

  .level-card,
  .level-card--alt {
    grid-template-columns: clamp(52px, 14vw, 72px) 1fr;
  }
  .level-visual {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 10;
    margin-top: 12px;
  }
  .level-num { font-size: clamp(44px, 12vw, 72px); }

  .timeline-step { grid-template-columns: 44px 1fr; }
  .timeline-circle { width: 44px; height: 44px; font-size: 14px; }
  .timeline-step::before { left: 22px; }

  .merci-page { align-items: flex-start; padding-top: clamp(48px, 8vh, 80px); }

  .normes-grid { grid-template-columns: 1fr; }
}

/* Breakpoints cibles PageSpeed / QA (768px, 480px) */
@media (max-width: 768px) {
  .page-hero { height: clamp(360px, 52vh, 580px); }
  .page-hero--dark { height: clamp(240px, 36vh, 360px); }
  .page-title { max-width: none; }
  .devis-layout { gap: 32px; }
  .form-rgpd-notice { column-count: 1; }

  .page-diagnostic .levels-header h2 { max-width: none; }
  .page-diagnostic .level-num {
    font-size: clamp(56px, 14vw, 80px);
    margin-bottom: 8px;
  }
  .page-diagnostic .level-card,
  .page-diagnostic .level-card--alt {
    grid-template-columns: 1fr;
    gap: 18px 0;
  }
  .page-diagnostic .level-visual {
    width: 100%;
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 480px) {
  :root {
    --ligne-left: 20px;
  }
  .page-hero-content { padding-bottom: 28px; }
  .implantations { grid-template-columns: 1fr; }
  .form-submit { flex-direction: column; align-items: stretch; }
  .form-submit .btn { width: 100%; justify-content: center; }
}

/* ---------------------------------------------------------
   PAGES LÉGALES — mentions & confidentialité
   --------------------------------------------------------- */
.legal-page {
  padding: var(--section-v-sm) var(--content-right) var(--section-v) var(--content-left);
  max-width: 720px;
}

.legal-prose h2 {
  font-family: var(--f-display);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 600;
  color: var(--creme);
  margin: 2.5rem 0 0.75rem;
}
.legal-prose h2:first-child { margin-top: 0; }

.legal-prose h3 {
  font-family: var(--f-display);
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 600;
  color: var(--creme);
  margin: 1.75rem 0 0.5rem;
}

.legal-prose p {
  font-size: 16px;
  color: var(--creme-dim);
  line-height: 1.7;
  margin-bottom: 1rem;
  max-width: 65ch;
}

.legal-prose li {
  font-size: 15px;
  color: var(--creme-dim);
  line-height: 1.7;
  margin-bottom: 1rem;
  max-width: 65ch;
}

.legal-prose ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin-bottom: 1.25rem;
}

.legal-prose a { color: var(--rouge); }
.legal-prose a:hover { text-decoration: underline; }

.legal-update {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 13px !important;
  color: rgba(255,255,255,0.3) !important;
  font-style: italic;
}

/* ---------------------------------------------------------
   PAGES SEO LOCALES — régions, départements, villes
   --------------------------------------------------------- */
.page-local-intro {
  padding-top:    var(--section-v-sm);
  padding-bottom: var(--section-v-sm);
  padding-left:   var(--content-left);
  padding-right:  var(--content-right);
}

.page-local-intro-grid {
  display: grid;
  grid-template-columns: minmax(280px, 42%) 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
  width: 100%;
}

.page-local-intro-text {
  max-width: none;
}

.page-local-intro-visual {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--noir-mid);
}

.page-local-intro-visual picture,
.page-local-intro-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-local-intro-text .eyebrow a {
  color: var(--creme-dim);
  transition: color 0.25s;
}
.page-local-intro-text .eyebrow a:hover { color: var(--rouge); }

.page-local-intro-lead {
  font-size: clamp(15px, 1.05vw, 17px);
  color: var(--creme-dim);
  line-height: 1.7;
  margin-top: 20px;
  max-width: none;
}

.page-local-context {
  font-size: clamp(14px, 0.95vw, 16px);
  color: rgba(245,240,232,0.55);
  line-height: 1.65;
  margin-top: 18px;
  font-style: italic;
  max-width: none;
}

.page-local-intro-text .btn { margin-top: 32px; }

.seo-local-types {
  padding-top:    var(--section-v-sm);
  padding-bottom: var(--section-v);
  padding-left:   var(--content-left);
  padding-right:  var(--content-right);
  border-top: 1px solid rgba(255,255,255,0.07);
}

.seo-local-types-inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.seo-local-types-header {
  margin-bottom: clamp(36px, 4vw, 56px);
  text-align: center;
}
.seo-local-types-header h2 {
  max-width: 28ch;
  margin: 12px auto 0;
}

.page-diagnostic .levels-header #servicesTitle{max-width: none;}


.seo-local-types-lead {
  font-size: clamp(16px, 1.1vw, 18px);
  color: var(--creme-dim);
  line-height: 1.65;
  margin: 16px auto 0;
  max-width: 62ch;
}

.situations-grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 24px);
}

.situation-item {
  padding: clamp(24px, 3vw, 32px);
  background: var(--noir-chaud);
  border: 1px solid rgba(255,255,255,0.07);
}

.situation-item h3 {
  font-family: var(--f-display);
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 600;
  color: var(--creme);
  line-height: 1.35;
  margin-bottom: 10px;
}

.situation-item p {
  font-size: 14.5px;
  color: var(--creme-dim);
  line-height: 1.6;
}

.seo-services {
  padding-top:    var(--section-v);
  padding-bottom: var(--section-v);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.seo-services .levels-header {
  width: 100%;
  max-width: 820px;
  text-align: center;
}

.seo-services-list {
  width: 100%;
  max-width: 820px;
  border-top: 1px solid rgba(255,255,255,0.07);
}

.seo-service {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(32px, 4vw, 48px) 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  text-align: center;
}

.seo-service-num {
  font-family: var(--f-display);
  font-size: clamp(48px, 5vw, 72px);
  font-weight: 700;
  line-height: 1;
  color: rgba(200, 16, 46, 0.35);
  margin-bottom: 16px;
}

.seo-service-body {
  width: 100%;
}

.seo-service-body h3 {
  font-family: var(--f-display);
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 600;
  color: var(--creme);
  margin-bottom: 12px;
  max-width: 42ch;
  margin-left: auto;
  margin-right: auto;
}

.seo-service-body p {
  font-size: 15px;
  color: var(--creme-dim);
  line-height: 1.65;
  max-width: 58ch;
  margin-left: auto;
  margin-right: auto;
}

.seo-service-usage {
  margin-top: 14px !important;
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rouge) !important;
}

.seo-services-footer {
  width: 100%;
  max-width: 820px;
  padding-top: clamp(32px, 4vw, 48px);
  text-align: center;
}

.section-faq {
  padding: var(--section-v-sm) var(--content-right) var(--section-v-sm) var(--content-left);
  border-top: 1px solid rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.section-faq h2 {
  font-family: var(--f-display);
  font-size: clamp(22px, 2.4vw, 36px);
  font-weight: 600;
  color: var(--creme);
  margin-bottom: clamp(28px, 3vw, 40px);
  max-width: 32ch;
}

.faq-liste {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: 760px;
}

.faq-item {
  padding: clamp(20px, 2.5vw, 28px) 0;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.faq-item:last-child { border-bottom: 1px solid rgba(255,255,255,0.07); }

.faq-question {
  font-family: var(--f-display);
  font-size: clamp(16px, 1.3vw, 20px);
  font-weight: 600;
  color: var(--creme);
  line-height: 1.35;
  margin-bottom: 10px;
}

.faq-reponse p {
  font-size: 15px;
  color: var(--creme-dim);
  line-height: 1.65;
  text-align: justify;
  margin: auto;
}

.seo-maillage {
  padding: var(--section-v-sm) var(--content-right) var(--section-v) var(--content-left);
  border-top: 1px solid rgba(255,255,255,0.07);
  background: var(--noir-chaud);
}

.seo-maillage-header { margin-bottom: clamp(28px, 3vw, 40px); }
.seo-maillage-header h2 { max-width: 28ch; margin-top: 12px; }

.seo-maillage-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
}

.seo-maillage-grid .lien-voisine {
  font-size: 14px;
  color: var(--creme-dim);
  padding: 8px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.25s, border-color 0.25s;
}
.seo-maillage-grid .lien-voisine:hover {
  color: var(--rouge);
  border-bottom-color: rgba(200, 16, 46, 0.4);
}

.seo-maillage-grid .lien-dept,
.seo-maillage-grid .lien-ville-top {
  font-size: 14px;
  color: var(--creme-dim);
  padding: 8px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.25s, border-color 0.25s;
}
.seo-maillage-grid .lien-dept:hover,
.seo-maillage-grid .lien-ville-top:hover {
  color: var(--rouge);
  border-bottom-color: rgba(200, 16, 46, 0.4);
}

.seo-maillage--alt {
  background: transparent;
  border-top: none;
  padding-top: 0;
}

/* Maillage région — discret, centré (après CTA) */
.seo-maillage--region {
  padding-top:    clamp(28px, 3.5vw, 44px);
  padding-bottom: clamp(20px, 2.5vw, 32px);
  background: transparent;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.seo-maillage--region.seo-maillage--alt {
  padding-top: 0;
  border-top: none;
  padding-bottom: clamp(28px, 3.5vw, 44px);
}

.seo-maillage--region .seo-maillage-inner {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}

.seo-maillage--region .seo-maillage-header {
  margin-bottom: clamp(14px, 1.8vw, 20px);
}

.seo-maillage--region .seo-maillage-header h2 {
  font-family: var(--f-body);
  font-size: clamp(12px, 0.9vw, 14px);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.42);
  line-height: 1.55;
  max-width: 52ch;
  margin: 0 auto;
}

.seo-maillage--region .seo-maillage-grid {
  justify-content: center;
}

.seo-maillage--region .seo-maillage-grid .lien-dept,
.seo-maillage--region .seo-maillage-grid .lien-ville-top,
.seo-maillage--region .seo-maillage-grid .lien-voisine,
.seo-maillage--region .seo-maillage-grid .lien-ville {
  font-size: 13px;
  color: rgba(245,240,232,0.55);
}

.seo-maillage--region .seo-maillage-remontee {
  justify-content: center;
  margin-top: clamp(16px, 2vw, 24px);
}

.seo-maillage--region .seo-maillage-remontee .btn-text {
  font-size: 13px;
  color: rgba(245,240,232,0.55);
}

.seo-local-types--duo .situations-grille {
  grid-template-columns: repeat(2, 1fr);
}

.seo-maillage-remontee {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  margin-top: clamp(28px, 3vw, 40px);
}

.footer-col-title--sub {
  margin-top: 28px;
}

@media (max-width: 1024px) {
  .situations-grille { grid-template-columns: repeat(2, 1fr); }
  .seo-local-types--duo .situations-grille { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .page-local-intro-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .situations-grille { grid-template-columns: 1fr; }
  .seo-local-types--duo .situations-grille { grid-template-columns: 1fr; }
  .seo-services {padding-left: 35px; padding-right: 35px;}
}

/* ---------------------------------------------------------
   BOUTON RETOUR EN HAUT
   --------------------------------------------------------- */
.btn-back-to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 46px;
  height: 46px;
  border-radius: 3px;
  border: 1px solid var(--rouge);
  background: var(--rouge);
  color: var(--blanc);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1040;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s ease, background 0.2s ease;
  backdrop-filter: blur(10px);
}

.btn-back-to-top svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn-back-to-top:hover {
  background: var(--rouge-dark);
}

.btn-back-to-top:focus-visible {
  outline: 2px solid var(--rouge-dark);
  outline-offset: 3px;
}

.btn-back-to-top.visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

@media (max-width: 768px) {
  .btn-back-to-top {
    right: 16px;
    bottom: 16px;
  }
}