/* =========================================================
   VARIANTE B — Header plein écran sur photo
   Chargée APRÈS styles.css, uniquement par variante-b.html.
   Tout est scopé sous .hero--media : la version A n'est jamais touchée.
   ========================================================= */

/* ---------- Le header occupe l'écran entier ---------- */
.hero--media {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--grey-950);
  color: #fff;
}

/* Image de fond : couvre 100 % de la largeur et de la hauteur du header. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 22% 38%;
}

/* Voile de lisibilité : dégradé vertical unique, foncé en haut (là où se
   trouvent la nav et le titre) puis de plus en plus clair vers le bas. Les
   deux derniers arrêts couvrent les 20 % inférieurs de l'écran, laissés
   presque nus pour que la photo respire sous le formulaire. */
.hero--media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(2,6,24,.86) 0%,
    rgba(2,6,24,.72) 30%,
    rgba(2,6,24,.54) 60%,
    rgba(2,6,24,.30) 80%,
    rgba(2,6,24,.16) 100%);
}

/* Retrait latéral du header : 80 px sur écran classique. La variable est
   héritée par .nav__inner comme par .hero__inner, qui s'y réfèrent tous deux.
   Le clamp évite d'écraser le contenu sur mobile (20 px à 375 px de large). */
.hero--media { --gutter: clamp(20px, 6vw, 80px); }

/* Le conteneur commun (1240 px) rognerait le header bien avant que les 80 px
   ne s'appliquent : on l'élargit ici pour que le retrait soit réellement de
   80 px vers 1440 px, et redevienne plus large au-delà de 1600 px. */
.hero--media .nav__inner,
.hero--media .hero__inner { max-width: 1600px; }

/* ---------- Nav posée sur l'image, sans fond ---------- */
.nav--over {
  background: none;
  border-bottom: 0;
  backdrop-filter: none;
}
/* Le logo est noir + bleu : sur la photo, on le passe entièrement en blanc
   plutôt que de lui poser un fond clair derrière. */
.nav--over .brand__logo {
  filter: brightness(0) invert(1);
}
.nav--over .nav__note { color: rgba(255,255,255,.82); }
.nav--over .nav__note-icon { color: #fff; }
/* Le bouton verre est calibré pour le bloc CTA final : on le réduit au format nav. */
.nav--over .btn--glass { padding: 11px 20px; font-size: 15px; }

/* Étoiles de la preuve sociale : collées les unes aux autres. */
.hero--media .social .stars { gap: 0; }

/* ---------- Contenu centré verticalement dans le plein écran ---------- */
.hero--media .hero__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(28px, 4vw, 52px);
}
.hero--media .hero__grid {
  align-items: center;
  padding-block: 0;
  /* 120 px entre l'argumentaire et le formulaire ; le clamp évite que les
     deux colonnes ne s'écrasent sur les écrans intermédiaires. */
  column-gap: clamp(48px, 8vw, 120px);
}

/* styles.css cale la colonne visuelle en haut (align-self: start), ce qui
   l'emporte sur le align-items de la grille : la carte restait ferrée en
   haut avec un large vide dessous. On la recentre verticalement face à
   l'argumentaire. */
.hero--media .hero__visual { align-self: center; }

/* La grille du formulaire espace ses lignes de 16 px : on ajoute 16 px de
   plus sous le bouton pour décoller la mention légale (32 px au total). */
.hero--media .form .form__legal { margin-top: 16px; }
/* Sans photo au-dessus, la carte n'a plus à remonter.
   Le reset de couleur est indispensable : le header passe en blanc, or le
   titre de carte et le texte saisi dans les champs héritent de la couleur. */
.hero--media .card {
  margin: 0;
  color: var(--ink);
}

/* ---------- Texte sur photo ---------- */
.hero--media .eyebrow {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.24);
  color: #fff;
  backdrop-filter: blur(8px);
  box-shadow: none;
}
/* Le titre court tient sur deux lignes : on réduit le corps pour que
   chaque .line reste bien une seule ligne visuelle — sans quoi le
   masque de révélation ligne par ligne perd son sens. */
.hero--media .hero__tag { color: var(--blue-300); }
.hero--media .hero__title { color: #fff; font-size: clamp(1.9rem, 3vw, 2.5rem); }
.hero--media .hero__title em { color: var(--blue-300); }
.hero--media .hero__title em::after { display: none; }

.hero--media .hero__lead {
  max-width: 40ch;
  color: rgba(255,255,255,.86);
}
.hero--media .hero__lead strong { color: #fff; }

.hero--media .hero__points li { color: rgba(255,255,255,.92); }
.hero--media .hero__points svg {
  background: rgba(37, 105, 235, .2);
  color: var(--blue-600);
}

.hero--media .social { border-top-color: rgba(255,255,255,.18); }
.hero--media .avatar { border-color: rgba(255,255,255,.28); }
/* Vraies photos clients dans les pastilles de preuve sociale : même gabarit
   que les avatars à initiales, juste rempli par une image plutôt qu'un fond. */
.avatar--photo { padding: 0; overflow: hidden; background: var(--grey-100); }
.avatar--photo img { width: 100%; height: 100%; object-fit: cover; }
.hero--media .social__stars { color: rgba(255,255,255,.72); }
.hero--media .social__stars strong,
.hero--media .social__count strong { color: #fff; }
.hero--media .social__count { color: rgba(255,255,255,.82); }

/* ---------- Bandeau de réassurance en verre sombre ---------- */
.hero--media .trust {
  margin-top: clamp(28px, 3.5vw, 44px);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
  box-shadow: none;
  backdrop-filter: blur(10px);
}
.hero--media .trust__item + .trust__item { box-shadow: inset 1px 0 0 rgba(255,255,255,.14); }
.hero--media .trust__item svg {
  background: rgba(255,255,255,.14);
  color: #fff;
}
.hero--media .trust__item span { color: rgba(255,255,255,.7); }
.hero--media .trust__item strong { color: #fff; }

/* =========================================================
   VARIANTE B — Auto-diagnostic dépliable
   Liste d'items à gauche, visuel synchronisé à droite.
   ========================================================= */
/* Le titre est court mais le .section-head générique (46ch) le repliait
   quand même sur 2 lignes à cette taille de police. */
.signs .section-head { max-width: 50ch; }
.signs__diag {
  margin-top: clamp(38px, 4.5vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
  align-items: start;
}

.signs__list { display: grid; gap: 12px; }

/* Neutralise la carte-photo de la version A : ici l'item est une ligne. */
.signs__diag .sign {
  display: block;
  border-radius: var(--radius-md);
  background: var(--paper);
  border: 0;
  /* Aucune ombre au repos : seul l'item ouvert se détache. */
  box-shadow: none;
  overflow: hidden;
  transition: box-shadow .22s ease;
}
.signs__diag .sign:hover { transform: none; }
.signs__diag .sign.is-open {
  box-shadow: 0 22px 40px -28px rgba(2,6,24,.35);
}

/* ---------- L'en-tête cliquable ---------- */
.sign__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(18px, 1.8vw, 24px);
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.sign__q .sign__title { font-size: 1.06rem; }

.sign__toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--grey-100);
  color: var(--ink-soft);
  transition: background-color .22s ease, color .22s ease, transform .22s ease;
}
.sign__toggle svg { width: 18px; height: 18px; }
/* Le « + » pivote de 45° : il devient une croix sans changer de balisage. */
.sign.is-open .sign__toggle {
  background: var(--brand);
  color: #fff;
  transform: rotate(45deg);
}

/* ---------- Le panneau dépliable ---------- */
/* 0fr → 1fr : la hauteur s'anime sans avoir à la mesurer en JS. */
.sign__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .32s ease;
}
.sign.is-open .sign__panel { grid-template-rows: 1fr; }
.sign__panel-inner {
  overflow: hidden;
  opacity: 0;
  transition: opacity .22s ease;
}
.sign.is-open .sign__panel-inner { opacity: 1; }
.sign__panel .sign__text {
  margin-top: 0;
  padding: 0 clamp(18px, 1.8vw, 24px);
}
/* Quand le texte est seul dans le panneau (pas de .sign__risk après), il
   porte lui-même le padding bas — sinon il colle au bord du panneau. */
.sign__panel .sign__text:last-child {
  padding-bottom: clamp(18px, 1.8vw, 24px);
}
.sign__panel .sign__risk {
  padding: 16px clamp(18px, 1.8vw, 24px) clamp(18px, 1.8vw, 24px);
}

/* ---------- Le visuel synchronisé ---------- */
.signs__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--sand-deep);
  /* Contour en box-shadow (et non en border) : il se dessine par-dessus
     sans consommer d'espace de layout, pour que le cadre avant/après
     occupe exactement 100% de la hauteur, bord compris. */
  box-shadow: inset 0 0 0 1px var(--line);
  /* Étiré sur la hauteur de la liste ; le ratio ne s'applique qu'en
     mobile, où le visuel se retrouve seul sur sa rangée (cf. media query
     plus bas) — sinon il prime sur align-self:stretch et laisse un vide. */
  align-self: stretch;
}
.sign__shot {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .35s ease;
}
.sign__shot.is-active { opacity: 1; }
.sign__shot picture { position: absolute; inset: 0; display: block; }
.sign__shot img { width: 100%; height: 100%; object-fit: cover; }

/* Le composant avant/après réutilisé ici doit remplir le cadre déjà
   dimensionné par .signs__media (ratio 4/3), pas imposer le sien (3/2). */
.sign__shot .ba__frame { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }

.signs__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--sand-deep);
  color: var(--ink-muted);
}
.signs__placeholder svg { width: 40px; height: 40px; }
.signs__placeholder span { font-size: 13px; font-weight: 600; letter-spacing: .04em; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  /* Le visuel passe au-dessus : sur une colonne, une photo à côté d'un
     accordéon replié laisserait un grand vide. */
  .signs__diag { grid-template-columns: 1fr; }
  .signs__media { order: -1; aspect-ratio: 4 / 3; }
  /* Filet de sécurité pour les navigateurs sans support d'aspect-ratio
     (vieux Safari iOS, certains WebView Android) : sans lui, le conteneur
     s'effondre à hauteur 0 et les photos (position: absolute, inset: 0)
     deviennent invisibles alors qu'elles sont bien chargées. */
  @supports not (aspect-ratio: 4 / 3) {
    .signs__media { height: 0; padding-bottom: 75%; }
  }
}

/* =========================================================
   VARIANTE B — Hydrofuge coloré
   Fond sombre identique à .zone (même identité que la carte).
   Texte à gauche, visuel à droite ; pas de photo pour l'instant,
   donc un cadre placeholder à remplacer dès qu'un chantier coloré
   sera disponible.
   ========================================================= */
.hydro { background: var(--grey-900); }
.hydro__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(56px, 7vw, 96px) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 80px;
  align-items: center;
}
.hydro .section-eyebrow { color: var(--blue-300); }
.hydro .section-title { margin-top: 14px; color: #fff; }
.hydro .section-lead { margin-top: 16px; color: rgba(255,255,255,.72); }
.hydro__media { position: relative; display: flex; flex-direction: column; gap: 16px; }

.hydro__tabs { display: inline-flex; gap: 6px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.06); align-self: center; }
.hydro__tab {
  padding: 8px 18px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.6);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.hydro__tab.is-active { background: #fff; color: var(--grey-900); }

/* Une seule vue visible à la fois, superposées pour un fondu sans saut de
   mise en page (même logique que .sign__shot dans "3 bienfaits"). */
.hydro__shot {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: none;
}
.hydro__shot.is-active { display: block; }
.hydro__shot .ba__frame { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }

@media (max-width: 900px) {
  .hydro__inner { grid-template-columns: 1fr; gap: clamp(28px, 6vw, 40px); }
  .hydro__media { order: -1; }
  .hydro__tabs { margin-bottom: 12px; }
}

@media (max-width: 720px) {
  /* Plus d'air entre les onglets ardoise/tuile et le tag qui suit,
     mais le tag doit rester collé à son titre juste en dessous. */
  .hydro__tabs { margin-bottom: 28px; }
  .hydro .section-title { margin-top: 6px; }
}

@media (max-width: 1080px) {
  /* En une colonne, le plein écran forcé pousserait le formulaire trop bas :
     on laisse la hauteur suivre le contenu. */
  .hero--media { min-height: 0; }
  .hero--media .hero__inner { justify-content: flex-start; }
  .hero--media .hero__grid { align-items: start; }
  .hero--media .trust__item:nth-child(odd) + .trust__item { box-shadow: inset 1px 0 0 rgba(255,255,255,.14); }
  .hero--media .trust__item:nth-child(odd) { box-shadow: none; }
}

/* =========================================================
   VARIANTE B — Bloc « qui nous sommes »
   Colonne gauche : intitulé en haut, visuel calé en bas.
   Colonne droite : accroche en grand, précision, puis 3 chiffres clés
   dont la valeur défile à l'entrée dans le viewport (voir main.js).
   Remplace le bandeau .pledge de la version A.
   ========================================================= */
.about {
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.about__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 80px;
}

/* La colonne de gauche pousse le visuel en bas pour qu'il s'aligne sur les
   chiffres de droite, comme dans la maquette. */
.about__aside {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(28px, 4vw, 56px);
}
.about__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.about__dot {
  flex: none;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand);
}
.about__media {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--sand-deep);
}
.about__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.about__body { display: flex; flex-direction: column; }
/* Titre visuellement « paragraphe » : grande taille, graisse normale. */
.about__lead {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.1vw, 1.75rem);
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -.02em;
  color: var(--ink);
}
.about__text {
  margin-top: clamp(18px, 2vw, 26px);
  max-width: 62ch;
  font-size: 15px;
  color: var(--ink-soft);
}

.about__stats {
  margin-top: clamp(38px, 5vw, 72px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.stat__num {
  display: flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.4vw, 2.05rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--ink);
  /* Le chiffre défile pendant l'animation : sans chasse fixe, la ligne
     tremblerait à chaque incrément. */
  font-variant-numeric: tabular-nums;
}
.stat__suffix { font-size: .62em; font-weight: 500; }
.stat__label {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-soft);
}

@media (max-width: 900px) {
  /* 80px n'a de sens qu'entre deux colonnes : empilé, on revient à un
     espacement de lecture normal. */
  .about__inner { grid-template-columns: 1fr; gap: clamp(28px, 6vw, 40px); }
  /* Le visuel passe sous l'accroche : en une colonne, l'image en tête
     repousserait tout le texte sous la ligne de flottaison. */
  .about__aside { display: contents; }
  .about__eyebrow { order: -2; }
  .about__media { order: -1; }
}

@media (max-width: 560px) {
  .about__stats { grid-template-columns: 1fr; gap: 22px; }
}

/* =========================================================
   VARIANTE B — Avant/après en slider auto-défilant
   Un item = un chantier (photo avant/après + légende) ; les items
   défilent seuls toutes les 4s, un indicateur en dessous montre
   la progression. Absent de la version A (pas de .works--slider).
   ========================================================= */
.works__rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--ink-soft);
}
.works__rating-icon { width: 18px; height: 18px; flex: none; }
.works__rating strong { color: var(--ink); font-weight: 700; }

/* Ce bloc (titre + paragraphe + 5/5 Google) est ferré à gauche plutôt que
   centré comme le .section-head générique utilisé par les autres sections. */
.works--slider .section-head {
  margin-inline: 0;
  text-align: left;
}

/* Bord à bord : le slider sort du conteneur centré (1240px) pour s'étirer
   sur toute la largeur de l'écran, sans cadre ni masque visible — seule la
   diapo active dépasse à droite dans la zone de padding Splide. */
.works--slider .works__slider {
  margin-top: clamp(38px, 4.5vw, 56px);
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Splide gère le track/la piste ; on ne stylise que le contenu de chaque
   diapositive. Seule la diapo active (.is-active, posée par Splide) est à
   pleine opacité — les voisines restent visibles mais estompées. */
.works--slider .splide__slide {
  opacity: .4;
  transition: opacity .5s ease;
  /* Les diapos voisines sont cliquables pour changer de chantier. */
  cursor: pointer;
}
.works--slider .splide__slide.is-active { opacity: 1; cursor: default; }

/* Chaque diapo : le comparateur avant/après en haut, la légende en dessous,
   sans fond ni carte — juste du texte posé sur le fond de la section. */
.works--slider .ba__frame {
  border-radius: var(--radius-lg);
  aspect-ratio: 3 / 2;
}
.works__caption { padding-top: clamp(16px, 1.8vw, 22px); }
.works__caption-title {
  font-family: var(--font-display);
  font-size: 1.04rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--ink);
}
.works__caption-text {
  margin-top: 8px;
  font-size: 14.5px;
  color: var(--ink-soft);
}
.works__caption-meta {
  margin-top: 12px;
  font-size: 13px;
  color: var(--ink-soft);
}

/* ---------- Indicateur de progression (sous le slider) ---------- */
.works__nav {
  margin-top: clamp(44px, 5.5vw, 72px);
  display: flex;
  align-items: center;
  gap: 8px;
  /* Largeur calée en JS sur celle de la diapo active (voir syncWorksNavWidth
     dans main.js) : l'indicateur ne doit pas dépasser un seul item. */
  max-width: 100%;
}
.works__dot {
  flex: 1;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.works__dot-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: var(--brand);
}
/* La largeur du remplissage actif est pilotée en JS par la progression
   réelle de l'autoplay Splide (événement autoplay:playing). */
.works__dot.is-done .works__dot-fill { width: 100%; }
.works__counter {
  flex: none;
  margin-left: 4px;
  font-size: 13px;
  color: var(--ink-soft);
  white-space: nowrap;
}

@media (max-width: 720px) {
  /* En colonne, le dégradé horizontal ne protège plus rien : on assombrit à la verticale,
     en gardant une fenêtre plus claire au milieu pour que la photo reste lisible. */
  .hero--media::before {
    background: linear-gradient(180deg, rgba(2,6,24,.7) 0%, rgba(2,6,24,.4) 42%, rgba(2,6,24,.3) 62%, rgba(2,6,24,.6) 100%);
  }
  .hero--media .hero__grid { padding-block: 12px 0; }
  .hero--media .trust__item + .trust__item { box-shadow: inset 0 1px 0 rgba(255,255,255,.14) !important; }

  /* Le titre est découpé en 2 blocs (.line) pour l'effet de révélation GSAP
     ligne par ligne — display:block force un retour après « toit. » à
     toutes les tailles. Sur mobile, on repasse le texte en flux normal :
     il s'enroule selon la largeur disponible, sans coupure imposée. */
  .hero--media .hero__title .line {
    display: inline;
    padding: 0;
    margin: 0;
  }
  .hero--media .hero__title .line > span { display: inline; }

  /* styles.css repasse le footer à 2 colonnes sous 720px ; on force une
     seule colonne pour que « La page », « Prestations » et « Contact »
     s'empilent proprement. */
  .footer__nav { grid-template-columns: 1fr; }
}

/* ---------- Footer détaché : la carte blanche flotte sur un fond
   qui reprend la teinte de la photo utilisée dans le header/CTA. ---------- */
body { background: var(--grey-900); }
.footer {
  margin-left: 32px;
  margin-right: 32px;
  margin-bottom: 32px;
  border-radius: 12px;
}
/* Respiration avant le filet de séparation du bas de footer. */
.footer__inner { padding-bottom: 140px; }

/* Pastille de confiance au-dessus des témoignages : remplace les couronnes
   de laurier par un tag avec les 3 logos plateformes + "5/5 satisfaction garantie". */
.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-inline: auto;
  padding: 7px 18px 7px 7px;
  border-radius: 999px;
  background: var(--grey-100);
}
.trust-pill__badges { display: flex; }
.trust-pill__badge {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
}
.trust-pill__badge + .trust-pill__badge { margin-left: -8px; }
.trust-pill__badge svg { width: 18px; height: 18px; }
.trust-pill__badge--google svg { width: 15px; height: 15px; }
.trust-pill__text {
  font-size: 14px;
  color: var(--ink-muted);
}
.trust-pill__text strong {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  margin-right: 4px;
}

/* Bloc CTA final : même logique que le hero, un voile concentré sur le texte
   plutôt qu'un assombrissement uniforme, pour laisser la photo respirer. */
.final-cta::after {
  background:
    linear-gradient(0deg, rgba(2,6,24,.85) 0%, rgba(2,6,24,0) 20%),
    linear-gradient(180deg, rgba(2,6,24,.3) 0%, rgba(2,6,24,0) 30%),
    radial-gradient(85% 90% at 18% 45%, rgba(2,6,24,.7) 0%, rgba(2,6,24,.42) 40%, rgba(2,6,24,0) 72%),
    linear-gradient(90deg, rgba(2,6,24,.4) 0%, rgba(2,6,24,.16) 46%, rgba(2,6,24,.06) 100%);
}

@media (max-width: 640px) {
  .footer { margin-left: 20px; margin-right: 20px; margin-bottom: 20px; }
  .footer__inner { padding-bottom: 72px; }
}

/* =========================================================
   VARIANTE B — Zone d'intervention en fond foncé
   La carte (tuiles claires) reste sur sa propre carte blanche ;
   seul l'habillage de la section passe en sombre, textes adaptés.
   ========================================================= */
.zone {
  background: var(--grey-900);
}
.zone .section-eyebrow { color: var(--blue-300); }
.zone .section-title { color: #fff; }
.zone .section-lead { color: rgba(255,255,255,.72); }
/* Titre plus long que les autres sections : le .section-head générique
   (46ch) le repliait sur 4 lignes. On l'élargit pour tenir en 3. */
.zone .section-head { max-width: 60ch; }
/* Les communes sont regroupées dans un encart cerné d'un filet blanc discret. */
.zone__communes {
  color: rgba(255,255,255,.72);
  margin-top: 32px;
  padding: 64px 100px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-md);
}
.zone__communes strong { color: #fff; }

/* Communes en pastilles : purement décoratives, aucune interaction. */
.zone__communes-label {
  margin: 0;
  font-size: 14px;
  text-align: center;
}
.zone__pills {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.zone__pills li {
  padding: 7px 15px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255,255,255,.86);
}
@media (max-width: 700px) {
  /* 100px de retrait latéral écraserait les pastilles sur mobile. */
  .zone__communes { padding: 40px 24px; }
}

/* =========================================================
   VARIANTE B — Retours du formulaire de devis
   ========================================================= */
/* .form est en display:grid, ce qui l'emporte sur la règle navigateur
   [hidden]{display:none} : sans ce rappel, le formulaire resterait visible
   au-dessus du message de confirmation au lieu de lui céder la place. */
.form[hidden] { display: none; }

.form__error {
  margin-top: 12px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  background: #fef2f2;
  font-size: 14px;
  color: #b42318;
}
.form__error a { font-weight: 600; text-decoration: underline; }

/* Prend la place du formulaire une fois la demande envoyée. */
.form__success { text-align: center; padding: 8px 0 4px; }
.form__success-icon {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
}
.form__success-icon svg { width: 26px; height: 26px; }
.form__success-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
}
.form__success-text {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.form__success-tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--grey-100);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}
.form__success-tel svg { width: 17px; height: 17px; color: var(--brand); }

/* FAQ : fond blanc plutôt que le gris sable par défaut. */
.faq { background: var(--paper); }

/* =========================================================
   VARIANTE B — Espacements verticaux des sections (retours client)
   Remplace les clamp() par défaut par des valeurs fixes par section.
   ========================================================= */
.about__inner,
.signs__inner,
.method__inner,
.works--slider .works__inner,
.reviews__inner,
.zone__inner,
.faq__inner {
  padding-top: 140px;
  padding-bottom: 140px;
}
.reviews__cols { margin-top: 64px; }
/* Témoignages : pas de retrait bas, la section suivante enchaîne directement. */
.reviews__inner { padding-bottom: 0; }

/* --cta-pad pilote à la fois le retrait haut (padding de .final-cta__inner)
   et le bas, auquel s'ajoute le débord du footer qui remonte par-dessus. */
.final-cta { --cta-pad: 200px; }
/* Largeur limitée pour que le titre s'enroule naturellement en 2 lignes
   sur desktop (« Un artisan de confiance, » / « près de chez vous (72) »)
   sans <br> — le point de coupure suit la largeur disponible, pas un
   retour forcé. */
.final-cta__title { max-width: 17ch; }

/* =========================================================
   VARIANTE B — Notre méthode : 3 cartes, numéro en haut,
   texte calé en bas. Titre et chapô alignés à gauche.
   ========================================================= */
.method .section-head {
  max-width: 56ch;
  margin-inline: 0;
  text-align: left;
}

.method__steps {
  margin-top: clamp(48px, 5vw, 72px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* La carte remplace la ligne de temps de la version A : plus de fil pointillé
   entre les pastilles, chaque étape devient un bloc autonome. */
.method__steps .step {
  display: flex;
  flex-direction: column;
  /* Le numéro reste en haut, le texte est poussé en bas — l'écart entre les
     deux absorbe la différence de longueur d'une carte à l'autre. */
  justify-content: space-between;
  gap: clamp(64px, 8vw, 104px);
  min-height: 320px;
  padding: clamp(22px, 2.2vw, 30px);
  border-radius: var(--radius-md);
  background: var(--sand);
  border: 0;
}
.method__steps .step::before { content: none; }

.method__steps .step__num {
  width: 30px; height: 30px;
  font-size: 14px;
  background: var(--brand-soft);
  color: var(--brand);
  box-shadow: none;
}

.method__steps .step__title { margin-top: 0; }

@media (max-width: 900px) {
  .method__steps { grid-template-columns: 1fr; gap: 16px; }
  /* styles.css pose une mise en page « timeline » sous 720px (numéro en
     position absolue, texte décalé à droite). On l'annule ici pour garder
     la carte empilée : numéro, puis titre, puis texte, tout à gauche. */
  .method__steps .step {
    min-height: 0;
    /* La carte desktop pousse le texte en bas via justify-content:
       space-between — sur une colonne, ça laisserait un grand vide entre
       le numéro et le titre. On repasse en empilement naturel. */
    justify-content: flex-start;
    gap: 16px;
    padding: 16px;
  }
  .step:not(:last-child)::before { content: none; }
  .step__num { position: static; }
  .step__icon { margin-top: 0; }
  .step__title { margin-top: 0; }
}

/* Encart de relance : entièrement arrondi sur desktop, comme les boutons du
   site (.btn est en border-radius 999px par défaut). Radius réduit à 12px
   sur mobile juste après — placé ici (et non dans le media query 720px
   plus haut) car la cascade CSS départage à spécificité égale par ordre
   d'apparition dans le fichier, pas par imbrication de media query. */
.cta-bar { border-radius: 999px; }
.cta-bar .btn--primary { border-radius: 999px; }
@media (max-width: 720px) {
  .cta-bar { border-radius: 12px; }
  .cta-bar .btn--primary { border-radius: 12px; }
}