/* ==========================================================================
   DROME DEBARRAS — style.css
   Feuille unique, mobile-first, zéro dépendance.
   DA : signalétique de chantier. Fond blanc chaud dominant, vert sapin en
   accent et pied de page uniquement, orange en fond de CTA.
   Sommaire :
     01. TOKENS
     02. RESET + BASE
     03. TYPOGRAPHIE
     04. LAYOUT / SECTIONS / SEPARATEURS
     05. BOUTONS + LIENS
     06. BARRE DE CONTACT + HEADER + NAV DESKTOP
     07. BURGER + MENU MOBILE
     08. BARRE D'APPEL FIXE MOBILE
     09. FIL D'ARIANE
     10. HERO
     11. ETIQUETTES / PUCES / REASSURANCE
     12. CARTES SERVICE
     13. JAUGE DE VOLUME (signature)
     14. BANDE DE STATISTIQUES
     15. ETAPES DE PROCESS
     16. SECTION D'ACCENT VERT
     17. FAQ (details/summary)
     18. FORMULAIRES
     19. TABLEAU RESPONSIVE
     20. BLOCS ZONES
     21. BANDEAU CTA
     22. PIED DE PAGE
     23. ARTICLE LEGAL + ENCADRE
     24. ANIMATIONS (reveal, stagger, micro)
     25. UTILITAIRES
     26. PREFERS-REDUCED-MOTION
     27. IMPRESSION
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Palette — valeurs du brief, non modifiées */
  --blanc-chaud:   #F7F5F0;
  --gris-clair:    #EAE7E0;
  --vert-sapin:    #12261E;
  --texte:         #1A2420;
  --texte-2:       #6B7568;   /* réservé au texte >= 21px, icônes, bordures */
  --orange:        #E4661E;
  --bleu-ardoise:  #2E5C6E;

  /* Dérivées utilitaires — voir DESIGN-SPEC §4 (conformité AA) */
  --texte-3:       #5A6458;   /* texte secondaire < 21px  — 5,67:1 sur blanc chaud */
  --orange-texte:  #A8410E;   /* orange en TEXTE sur fond clair — 5,62:1 */
  --orange-fonce:  #C4520F;   /* survol de fond orange */
  --bordure:       #DDD8CE;
  --bordure-forte: #C9C2B4;
  --vert-texte-2:  #A9B5AC;   /* texte secondaire SUR vert sapin — 7,48:1 */
  --vert-bordure:  rgba(247, 245, 240, .16);

  /* Polices — piles de repli réelles */
  --police-titre: "Archivo", "Helvetica Neue", "Arial Narrow", Arial, sans-serif;
  --police-corps: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* Échelle typographique fluide (375 -> 1280) */
  --fs-900: clamp(2rem, 1.1rem + 3.8vw, 3.75rem);
  --fs-800: clamp(1.625rem, 1rem + 2.6vw, 2.75rem);
  --fs-700: clamp(1.25rem, 1.05rem + .85vw, 1.625rem);
  --fs-600: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  --fs-500: clamp(1.0625rem, 1rem + .45vw, 1.3125rem);
  --fs-400: clamp(1rem, .97rem + .15vw, 1.0625rem);
  --fs-300: .9375rem;
  --fs-200: .75rem;

  /* Espacement — base 4px */
  --e1: 4px;   --e2: 8px;   --e3: 12px;  --e4: 16px;
  --e5: 24px;  --e6: 32px;  --e7: 48px;  --e8: 64px;
  --e9: 80px;  --e10: 112px; --e11: 144px;

  /* Layout */
  --maxw:         1200px;
  --maxw-etroit:  760px;
  --gouttiere:    20px;
  --gap:          20px;
  --pad-section:  clamp(56px, 7vw, 112px);
  --h-entete:     64px;
  --h-barre-contact: 0px;   /* barre de contact masquée en mobile */
  --h-barre-appel:   68px;

  /* Rayons — unité de base 10px */
  --r-xs: 6px;  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px;

  /* Ombres — teintées, jamais noires */
  --ombre-1: 0 1px 2px rgba(26,36,32,.06), 0 2px 8px rgba(26,36,32,.05);
  --ombre-2: 0 4px 12px rgba(26,36,32,.08), 0 14px 34px rgba(26,36,32,.09);
  --lueur-cta: 0 4px 14px rgba(228,102,30,.30);
  --lueur-cta-fort: 0 6px 22px rgba(228,102,30,.42);

  /* Mouvement */
  --ease:     cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.33, 1, .68, 1);
  --t-rapide: .16s;
  --t-moyen:  .24s;
  --t-lent:   .52s;
}

/* bp-md : 768px */
@media (min-width: 768px) {
  :root {
    --gouttiere: 32px;
    --gap: 24px;
    --h-entete: 72px;
    --h-barre-contact: 40px;
    --h-barre-appel: 0px;   /* barre d'appel masquée à partir de 768 */
  }
}

/* bp-lg : 1280px */
@media (min-width: 1280px) {
  :root { --gouttiere: 40px; --gap: 28px; }
}

/* --------------------------------------------------------------------------
   02. RESET + BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--h-entete) + var(--h-barre-contact) + var(--e5));
}

body {
  margin: 0;
  background: var(--blanc-chaud);
  color: var(--texte);
  font-family: var(--police-corps);
  font-size: var(--fs-400);
  line-height: 1.68;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* réserve la hauteur de la barre d'appel fixe pour ne rien masquer */
  padding-bottom: var(--h-barre-appel);
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 3px solid var(--bleu-ardoise);
  outline-offset: 2px;
  border-radius: 2px;
}
.section--vert :focus-visible,
.pied :focus-visible,
.hero :focus-visible { outline-color: var(--blanc-chaud); }

::selection { background: var(--orange); color: var(--texte); }

/* Lien d'évitement */
.skip-lien {
  position: absolute;
  left: var(--e4);
  top: -100px;
  z-index: 999;
  padding: var(--e3) var(--e5);
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  background: var(--orange);
  color: var(--texte);
  font-weight: 600;
  border-radius: var(--r-sm);
  box-shadow: var(--ombre-2);
  transition: top var(--t-moyen) var(--ease);
}
.skip-lien:focus { top: var(--e4); }

/* --------------------------------------------------------------------------
   03. TYPOGRAPHIE
   -------------------------------------------------------------------------- */
.t1, .t2, .t3, .t4 {
  font-family: var(--police-titre);
  font-weight: 700;
  color: var(--texte);
  text-wrap: balance;
}

.t1 { font-size: var(--fs-900); line-height: 1.06; letter-spacing: -.022em; max-width: 20ch; }
.t2 { font-size: var(--fs-800); line-height: 1.14; letter-spacing: -.018em; max-width: 24ch; }
.t3 { font-size: var(--fs-700); line-height: 1.3;  letter-spacing: -.012em; }
.t4 { font-size: var(--fs-600); line-height: 1.35; letter-spacing: -.008em; font-weight: 600; }

.chapo {
  font-size: var(--fs-500);
  line-height: 1.5;
  color: var(--texte-3);
  max-width: 56ch;
  text-wrap: pretty;
}

.texte { max-width: 68ch; text-wrap: pretty; }
.texte + .texte { margin-top: 1.1em; }
.texte a:not(.btn) {
  color: var(--orange-texte);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.texte a:not(.btn):hover { text-decoration-thickness: 2px; }

.mention { font-size: var(--fs-300); line-height: 1.55; color: var(--texte-3); }

/* Étiquette / eyebrow — Archivo capitales suivies */
.etiquette {
  display: inline-block;
  font-family: var(--police-titre);
  font-size: var(--fs-200);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange-texte);
}
.etiquette--vert { color: var(--vert-texte-2); }
.etiquette--ardoise { color: var(--bleu-ardoise); }

/* En-tête de section */
.section__tete { display: grid; gap: var(--e3); margin-bottom: clamp(28px, 4vw, 56px); }
.section__tete--centre { justify-items: center; text-align: center; }
.section__tete--centre .t2, .section__tete--centre .chapo { max-width: 44ch; }

/* --------------------------------------------------------------------------
   04. LAYOUT / SECTIONS / SEPARATEURS
   -------------------------------------------------------------------------- */
.conteneur {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
.conteneur--etroit { max-width: calc(var(--maxw-etroit) + var(--gouttiere) * 2); }

.section { padding-block: var(--pad-section); }
.section--gris  { background: var(--gris-clair); }
.section--serre { padding-block: clamp(36px, 4.5vw, 72px); }
.section--haut-plat { padding-top: 0; }

/* Sections basses de page : évite le layout hors écran (perf) */
.section--differee {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

.grille { display: grid; gap: var(--gap); }
.grille--2 { grid-template-columns: 1fr; }
.grille--3 { grid-template-columns: 1fr; }
.grille--4 { grid-template-columns: 1fr; }
.grille--media { grid-template-columns: 1fr; align-items: center; gap: clamp(24px, 4vw, 56px); }

@media (min-width: 768px) {
  .grille--2 { grid-template-columns: repeat(2, 1fr); }
  .grille--3 { grid-template-columns: repeat(2, 1fr); }
  .grille--4 { grid-template-columns: repeat(2, 1fr); }
  .grille--media { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1280px) {
  .grille--3 { grid-template-columns: repeat(3, 1fr); }
  .grille--4 { grid-template-columns: repeat(4, 1fr); }
}

.pile-lg { display: grid; gap: var(--e7); }
.pile-md { display: grid; gap: var(--e5); }
.pile-sm { display: grid; gap: var(--e3); }
.rangee { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; }

/* Séparateur courant : filet + losange orange */
.separateur {
  border: 0;
  height: 1px;
  margin: 0;
  background: var(--bordure);
  position: relative;
  overflow: visible;
}
.separateur::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px; height: 6px;
  background: var(--orange);
  transform: translate(-50%, -50%) rotate(45deg);
  border-radius: 1px;
}

/* Bande chantier — 2 fois par page maximum */
.separateur--chantier {
  height: 6px;
  background: repeating-linear-gradient(
    135deg,
    var(--orange) 0 9px,
    var(--vert-sapin) 9px 18px
  );
}
.separateur--chantier::after { display: none; }

/* --------------------------------------------------------------------------
   05. BOUTONS + LIENS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: 48px;
  padding: 12px var(--e5);
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--police-corps);
  font-size: var(--fs-400);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition:
    background-color var(--t-moyen) var(--ease-out),
    border-color var(--t-moyen) var(--ease-out),
    color var(--t-moyen) var(--ease-out),
    box-shadow var(--t-moyen) var(--ease-out),
    transform var(--t-rapide) var(--ease-out);
}
.btn svg { width: 20px; height: 20px; flex: none; transition: transform var(--t-moyen) var(--ease-out); }
.btn:active { transform: translateY(1px); }

/* Primaire — orange, texte encre (4,72:1). Lueur discrète. */
.btn--primaire {
  background: var(--orange);
  color: var(--texte);
  box-shadow: var(--lueur-cta);
}
.btn--primaire:hover,
.btn--primaire:focus-visible {
  background: var(--orange-fonce);
  color: var(--blanc-chaud);
  box-shadow: var(--lueur-cta-fort);
  transform: translateY(-1px);
}
.btn--primaire:hover svg { transform: translateX(2px); }

/* Secondaire — vert sapin plein */
.btn--secondaire {
  background: var(--vert-sapin);
  color: var(--blanc-chaud);
  box-shadow: var(--ombre-1);
}
.btn--secondaire:hover,
.btn--secondaire:focus-visible {
  background: #1B3A2C;
  box-shadow: var(--ombre-2);
  transform: translateY(-1px);
}

/* Fantôme — filet seul */
.btn--fantome {
  background: transparent;
  color: var(--texte);
  border-color: var(--bordure-forte);
}
.btn--fantome:hover,
.btn--fantome:focus-visible {
  border-color: var(--vert-sapin);
  background: rgba(18,38,30,.05);
}
.section--vert .btn--fantome,
.hero .btn--fantome,
.pied .btn--fantome { color: var(--blanc-chaud); border-color: var(--vert-bordure); }
.section--vert .btn--fantome:hover,
.hero .btn--fantome:hover,
.pied .btn--fantome:hover {
  border-color: var(--blanc-chaud);
  background: rgba(247,245,240,.10);
}

/* Téléphone — pilule ardoise, la seule pilule du site */
.btn--tel {
  background: var(--bleu-ardoise);
  color: #FFF;
  border-radius: var(--r-pill);
  padding-inline: var(--e5);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.btn--tel:hover,
.btn--tel:focus-visible { background: #244856; transform: translateY(-1px); box-shadow: var(--ombre-2); }
.btn--tel:hover svg { transform: rotate(-12deg); }

.btn--large { width: 100%; }
.btn--compact { min-height: 44px; padding: 10px var(--e4); font-size: var(--fs-300); }
@media (min-width: 560px) { .btn--large { width: auto; } }

/* Lien à soulignement animé */
.lien-anime {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  font-weight: 600;
  color: var(--orange-texte);
  padding-block: 2px;
}
.lien-anime::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .26s var(--ease);
}
.lien-anime:hover::after,
.lien-anime:focus-visible::after { transform: scaleX(1); }
.lien-anime svg { width: 16px; height: 16px; transition: transform var(--t-moyen) var(--ease-out); }
.lien-anime:hover svg { transform: translateX(3px); }
.section--vert .lien-anime,
.pied .lien-anime { color: var(--orange); }

/* --------------------------------------------------------------------------
   06. BARRE DE CONTACT + HEADER + NAV DESKTOP
   -------------------------------------------------------------------------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--blanc-chaud);
  border-bottom: 1px solid transparent;
  transition: background-color var(--t-moyen) ease,
              border-color var(--t-moyen) ease,
              box-shadow var(--t-moyen) ease;
}
.entete.est-fixe {
  background: rgba(247, 245, 240, .86);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border-bottom-color: var(--bordure);
  box-shadow: 0 1px 10px rgba(26,36,32,.06);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .entete.est-fixe { background: var(--blanc-chaud); }
}

/* Barre de contact haute — masquée < 768 (la barre d'appel fixe prend le relais) */
.barre-contact { display: none; background: var(--vert-sapin); color: var(--vert-texte-2); }
@media (min-width: 768px) {
  .barre-contact { display: block; }
  .barre-contact__inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--e5);
    height: var(--h-barre-contact);
    font-size: var(--fs-300);
  }
}
.barre-contact__lien {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  color: var(--blanc-chaud);
  padding-block: 2px;
  transition: color var(--t-rapide) ease;
}
.barre-contact__lien svg { width: 16px; height: 16px; color: var(--orange); flex: none; }
.barre-contact__lien:hover { color: var(--orange); }
.barre-contact__lien:hover svg { color: var(--blanc-chaud); }
.barre-contact__note { margin-right: auto; color: var(--vert-texte-2); }

.entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  height: var(--h-entete);
}

.logo { display: inline-flex; align-items: center; flex: none; }
.logo img, .logo svg { height: 34px; width: auto; }
@media (min-width: 768px) { .logo img, .logo svg { height: 40px; } }

.entete__actions { display: flex; align-items: center; gap: var(--e2); }

/* Navigation desktop — visible à partir de 1080px (voir DESIGN-SPEC §5) */
.nav { display: none; }
.entete__actions .btn--primaire { display: none; }
.entete__actions .btn--tel { display: none; }

@media (min-width: 1080px) {
  .nav { display: block; margin-inline: auto; }
  .nav__liste { display: flex; align-items: center; gap: var(--e1); }
  .entete__actions .btn--primaire,
  .entete__actions .btn--tel { display: inline-flex; }
}

.nav__item { position: relative; }

.nav__lien {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--e3);
  font-size: var(--fs-300);
  font-weight: 600;
  color: var(--texte);
  border-radius: var(--r-xs);
  transition: color var(--t-rapide) ease, background-color var(--t-rapide) ease;
}
.nav__lien:hover { color: var(--orange-texte); background: rgba(228,102,30,.07); }
.nav__lien[aria-current="page"] { color: var(--orange-texte); }
.nav__lien[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: var(--e3); right: var(--e3);
  bottom: 4px;
  height: 2px;
  background: var(--orange);
  border-radius: 2px;
}

/* Item avec sous-menu : lien + bouton chevron distincts (accessibilité) */
.nav__groupe { display: flex; align-items: center; }
.nav__groupe .nav__lien { padding-right: var(--e1); }
.nav__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  min-height: 44px;
  color: var(--texte-2);
  border-radius: var(--r-xs);
  transition: color var(--t-rapide) ease, background-color var(--t-rapide) ease;
}
.nav__chevron svg {
  width: 14px; height: 14px;
  transition: transform var(--t-moyen) var(--ease-out);
}
.nav__chevron:hover { color: var(--orange-texte); background: rgba(228,102,30,.07); }
.nav__chevron[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Panneau déroulant */
.nav__sous {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 290px;
  padding: var(--e2);
  background: var(--blanc-chaud);
  border: 1px solid var(--bordure);
  border-radius: var(--r-md);
  box-shadow: var(--ombre-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t-moyen) var(--ease-out),
              transform var(--t-moyen) var(--ease-out),
              visibility var(--t-moyen);
  z-index: 10;
}
.nav__sous::before {
  /* filet orange de tête, rappel du repère de chantier */
  content: "";
  display: block;
  height: 3px;
  margin: calc(var(--e2) * -1) calc(var(--e2) * -1) var(--e2);
  border-radius: var(--r-md) var(--r-md) 0 0;
  background: var(--orange);
}
@media (min-width: 1080px) {
  .nav__item:hover > .nav__sous,
  .nav__item:focus-within > .nav__sous,
  .nav__item.est-ouvert > .nav__sous {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}
.nav__sous-lien {
  display: block;
  padding: 11px var(--e3);
  min-height: 44px;
  font-size: var(--fs-300);
  line-height: 1.35;
  color: var(--texte);
  border-radius: var(--r-xs);
  transition: background-color var(--t-rapide) ease, color var(--t-rapide) ease, padding-left var(--t-rapide) ease;
}
.nav__sous-lien:hover,
.nav__sous-lien:focus-visible {
  background: var(--gris-clair);
  color: var(--orange-texte);
  padding-left: var(--e4);
}

/* --------------------------------------------------------------------------
   07. BURGER + MENU MOBILE
   -------------------------------------------------------------------------- */
.burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border: 1px solid var(--bordure-forte);
  border-radius: var(--r-sm);
  color: var(--texte);
  background: transparent;
  transition: background-color var(--t-rapide) ease, border-color var(--t-rapide) ease;
}
.burger:hover { background: var(--gris-clair); border-color: var(--vert-sapin); }
.burger__traits { display: grid; gap: 5px; width: 22px; }
.burger__traits span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--t-moyen) var(--ease), opacity var(--t-rapide) ease;
}
.burger[aria-expanded="true"] .burger__traits span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__traits span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__traits span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 1080px) { .burger { display: none; } }

.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  background: var(--blanc-chaud);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--t-moyen) var(--ease-out),
              transform var(--t-moyen) var(--ease-out),
              visibility var(--t-moyen);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu-mobile.est-ouvert { opacity: 1; visibility: visible; transform: translateY(0); }
.menu-mobile[hidden] { display: none; }
@media (min-width: 1080px) { .menu-mobile { display: none; } }

.menu-mobile__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  height: var(--h-entete);
  padding-inline: var(--gouttiere);
  border-bottom: 1px solid var(--bordure);
  flex: none;
}
.menu-mobile__fermer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border: 1px solid var(--bordure-forte);
  border-radius: var(--r-sm);
}
.menu-mobile__fermer svg { width: 20px; height: 20px; }
.menu-mobile__corps { padding: var(--e5) var(--gouttiere) var(--e8); flex: 1; }

.menu-mobile__lien {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding-block: var(--e2);
  font-family: var(--police-titre);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -.012em;
  border-bottom: 1px solid var(--bordure);
}
.menu-mobile__lien[aria-current="page"] { color: var(--orange-texte); }

.menu-mobile__groupe { border-bottom: 1px solid var(--bordure); }
.menu-mobile__groupe .menu-mobile__lien { border-bottom: 0; flex: 1; }
.menu-mobile__ligne { display: flex; align-items: center; gap: var(--e2); }
.menu-mobile__bascule {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  flex: none;
  border: 1px solid var(--bordure);
  border-radius: var(--r-sm);
  color: var(--texte-2);
}
.menu-mobile__bascule svg { width: 16px; height: 16px; transition: transform var(--t-moyen) var(--ease-out); }
.menu-mobile__bascule[aria-expanded="true"] svg { transform: rotate(180deg); }
.menu-mobile__bascule[aria-expanded="true"] { color: var(--orange-texte); border-color: var(--orange); }

.menu-mobile__sous { display: none; padding: 0 0 var(--e4) var(--e4); border-left: 2px solid var(--orange); margin-left: var(--e1); }
.menu-mobile__sous.est-ouvert { display: block; }
.menu-mobile__sous a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--e2) var(--e3);
  font-size: var(--fs-400);
  color: var(--texte-3);
  border-radius: var(--r-xs);
}
.menu-mobile__sous a:hover { color: var(--orange-texte); background: var(--gris-clair); }

.menu-mobile__pied { display: grid; gap: var(--e3); margin-top: var(--e6); }

/* Verrou de scroll quand le menu est ouvert */
body.est-verrouille { overflow: hidden; }

/* --------------------------------------------------------------------------
   08. BARRE D'APPEL FIXE MOBILE — élément de conversion clé
   -------------------------------------------------------------------------- */
.barre-appel {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 250;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e2);
  padding: 10px var(--e3);
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: rgba(247, 245, 240, .94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--bordure);
  box-shadow: 0 -4px 18px rgba(26,36,32,.10);
}
.barre-appel .btn { min-height: 48px; width: 100%; font-size: var(--fs-300); padding-inline: var(--e3); }
@media (min-width: 768px) { .barre-appel { display: none; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .barre-appel { background: var(--blanc-chaud); }
}

/* --------------------------------------------------------------------------
   09. FIL D'ARIANE
   -------------------------------------------------------------------------- */
.fil { background: var(--gris-clair); border-bottom: 1px solid var(--bordure); }
.fil__liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
  padding-block: var(--e3);
  font-size: var(--fs-300);
  color: var(--texte-3);
}
.fil__liste li { display: flex; align-items: center; gap: var(--e2); }
.fil__liste li + li::before {
  content: "";
  width: 5px; height: 5px;
  border-top: 1.5px solid var(--texte-2);
  border-right: 1.5px solid var(--texte-2);
  transform: rotate(45deg);
  flex: none;
}
.fil a { color: var(--texte-3); transition: color var(--t-rapide) ease; }
.fil a:hover { color: var(--orange-texte); text-decoration: underline; text-underline-offset: 3px; }
.fil [aria-current="page"] { color: var(--texte); font-weight: 600; }

/* --------------------------------------------------------------------------
   10. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--vert-sapin);
  color: var(--blanc-chaud);
  padding-block: clamp(64px, 9vw, 132px);
  overflow: hidden;
}
.hero__fond { position: absolute; inset: 0; z-index: -2; }
.hero__fond img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  /* overlay sombre dégradé — jamais de dégradé coloré */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(18,38,30,.86) 0%,
    rgba(18,38,30,.70) 42%,
    rgba(18,38,30,.92) 100%
  );
}
.hero__contenu { display: grid; gap: var(--e5); max-width: 42rem; }
.hero .t1 { color: var(--blanc-chaud); }
.hero .chapo { color: var(--vert-texte-2); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--e3); }
.hero__actions .btn { flex: 1 1 auto; }
@media (min-width: 560px) { .hero__actions .btn { flex: 0 0 auto; } }

.hero__reperes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3) var(--e5);
  padding-top: var(--e3);
  border-top: 1px solid var(--vert-bordure);
  font-size: var(--fs-300);
  color: var(--vert-texte-2);
}
.hero__reperes li { display: flex; align-items: center; gap: var(--e2); }
.hero__reperes svg { width: 18px; height: 18px; color: var(--orange); flex: none; }

.hero--court { padding-block: clamp(44px, 6vw, 84px); }

/* --------------------------------------------------------------------------
   11. ETIQUETTES / PUCES / REASSURANCE
   -------------------------------------------------------------------------- */
.puce {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: 5px var(--e3);
  border-radius: var(--r-xs);
  background: var(--gris-clair);
  border: 1px solid var(--bordure);
  font-size: var(--fs-300);
  font-weight: 600;
  color: var(--texte);
}
.puce svg { width: 15px; height: 15px; color: var(--orange-texte); flex: none; }
.puce--orange { background: rgba(228,102,30,.12); border-color: rgba(228,102,30,.34); color: var(--orange-texte); }
.puce--ardoise { background: rgba(46,92,110,.10); border-color: rgba(46,92,110,.30); color: var(--bleu-ardoise); }
.puce--vert { background: rgba(247,245,240,.10); border-color: var(--vert-bordure); color: var(--blanc-chaud); }

.reassurance {
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .reassurance { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .reassurance { grid-template-columns: repeat(4, 1fr); } }

.reassurance__item {
  display: flex;
  gap: var(--e3);
  align-items: flex-start;
  padding: var(--e4);
  background: var(--blanc-chaud);
  border: 1px solid var(--bordure);
  border-radius: var(--r-md);
  transition: border-color var(--t-moyen) var(--ease-out), box-shadow var(--t-moyen) var(--ease-out);
}
.reassurance__item:hover { border-color: var(--bordure-forte); box-shadow: var(--ombre-1); }
.reassurance__icone {
  flex: none;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  background: rgba(228,102,30,.12);
  color: var(--orange-texte);
  transition: transform var(--t-moyen) var(--ease);
}
.reassurance__icone svg { width: 22px; height: 22px; }
.reassurance__item:hover .reassurance__icone { transform: translateY(-2px) rotate(-4deg); }
.reassurance__item p { font-size: var(--fs-300); color: var(--texte-3); margin-top: 2px; }

/* --------------------------------------------------------------------------
   12. CARTES SERVICE
   -------------------------------------------------------------------------- */
.carte {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--blanc-chaud);
  border: 1px solid var(--bordure);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--t-moyen) var(--ease-out),
              box-shadow var(--t-moyen) var(--ease-out),
              border-color var(--t-moyen) var(--ease-out);
}
.carte::before {
  /* filet orange révélé au survol */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .32s var(--ease);
  z-index: 2;
}
.carte:hover,
.carte:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--ombre-2);
  border-color: var(--bordure-forte);
}
.carte:hover::before,
.carte:focus-within::before { transform: scaleX(1); }

.carte__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--gris-clair); }
.carte__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.carte:hover .carte__media img,
.carte:focus-within .carte__media img { transform: scale(1.045); }

.carte__corps { display: grid; gap: var(--e3); padding: var(--e5); flex: 1; align-content: start; }
.carte__corps p { font-size: var(--fs-300); color: var(--texte-3); }
.carte__pied { margin-top: auto; padding-top: var(--e3); }

/* Titre entièrement cliquable sans imbriquer d'interactifs */
.carte__titre a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.carte__titre a { color: inherit; }
.carte:hover .carte__titre a { color: var(--orange-texte); }

.carte--plate { background: var(--gris-clair); }
.section--gris .carte { background: var(--blanc-chaud); }

/* --------------------------------------------------------------------------
   13. JAUGE DE VOLUME (élément signature)
   -------------------------------------------------------------------------- */
.jauge-bloc { display: grid; gap: var(--e2); }
.jauge {
  display: flex;
  gap: 3px;
  align-items: stretch;
  height: 10px;
}
.jauge__seg {
  flex: 1;
  border-radius: 2px;
  background: var(--gris-clair);
  border: 1px solid rgba(18,38,30,.14);
  transition: background-color var(--t-moyen) var(--ease-out);
}
.jauge__seg.est-plein { background: var(--orange); border-color: rgba(228,102,30,.55); }
.section--vert .jauge__seg { background: rgba(247,245,240,.14); border-color: var(--vert-bordure); }
.section--vert .jauge__seg.est-plein { background: var(--orange); border-color: var(--orange); }

.jauge__legende {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e3);
  font-size: var(--fs-300);
  color: var(--texte-3);
}
.jauge__valeur {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: var(--fs-600);
  color: var(--texte);
  font-variant-numeric: tabular-nums;
}
.section--vert .jauge__legende { color: var(--vert-texte-2); }
.section--vert .jauge__valeur { color: var(--blanc-chaud); }

/* --------------------------------------------------------------------------
   14. BANDE DE STATISTIQUES
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  gap: var(--e5);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, 1fr); gap: var(--gap); } }

.stat { display: grid; gap: var(--e1); }
.stat__nombre {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.5rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}
.stat__libelle { font-size: var(--fs-300); line-height: 1.4; color: var(--texte-3); }
.section--vert .stat__libelle { color: var(--vert-texte-2); }
.stat + .stat { position: relative; }
@media (min-width: 768px) {
  .stat + .stat::before {
    content: "";
    position: absolute;
    left: calc(var(--gap) / -2);
    top: 4px; bottom: 4px;
    width: 1px;
    background: var(--bordure);
  }
  .section--vert .stat + .stat::before { background: var(--vert-bordure); }
}

/* --------------------------------------------------------------------------
   15. ETAPES DE PROCESS
   -------------------------------------------------------------------------- */
.etapes { display: grid; gap: var(--gap); counter-reset: etape; }
@media (min-width: 768px) { .etapes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .etapes--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1280px) { .etapes--5 { grid-template-columns: repeat(5, 1fr); } }

.etape {
  position: relative;
  display: grid;
  gap: var(--e3);
  align-content: start;
  padding: var(--e5) var(--e4) var(--e5) 0;
}
.etape__num {
  display: inline-grid;
  place-items: center;
  width: 52px; height: 52px;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 1.375rem;
  color: var(--orange-texte);
  background: var(--blanc-chaud);
  border: 2px solid var(--orange);
  border-radius: var(--r-sm);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--t-moyen) var(--ease-out), color var(--t-moyen) var(--ease-out);
}
.etape:hover .etape__num { background: var(--orange); color: var(--texte); }
.etape p { font-size: var(--fs-300); color: var(--texte-3); }

/* Filet de liaison entre étapes (desktop) */
@media (min-width: 1280px) {
  .etape:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 26px;
    left: 60px;
    right: calc(var(--gap) * -1 + 8px);
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--bordure-forte) 0 6px, transparent 6px 12px);
  }
}
.section--vert .etape__num { background: transparent; color: var(--orange); }
.section--vert .etape p { color: var(--vert-texte-2); }

/* --------------------------------------------------------------------------
   16. SECTION D'ACCENT VERT
   -------------------------------------------------------------------------- */
.section--vert {
  background: var(--vert-sapin);
  color: var(--blanc-chaud);
  position: relative;
}
.section--vert .t1,
.section--vert .t2,
.section--vert .t3,
.section--vert .t4 { color: var(--blanc-chaud); }
.section--vert .chapo,
.section--vert .texte,
.section--vert .mention { color: var(--vert-texte-2); }
.section--vert .separateur { background: var(--vert-bordure); }
.section--vert .texte a:not(.btn) { color: var(--orange); }

/* Bandeau vert compact — statistiques ou message unique */
.bande-verte {
  background: var(--vert-sapin);
  color: var(--blanc-chaud);
  padding-block: clamp(40px, 5vw, 72px);
}

/* --------------------------------------------------------------------------
   17. FAQ (details / summary)
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--bordure); max-width: var(--maxw-etroit); }
.faq__item { border-bottom: 1px solid var(--bordure); }

.faq__question {
  display: flex;
  align-items: center;
  gap: var(--e4);
  width: 100%;
  min-height: 60px;
  padding: var(--e4) 0;
  font-family: var(--police-corps);
  font-size: var(--fs-600);
  font-weight: 600;
  line-height: 1.4;
  color: var(--texte);
  cursor: pointer;
  list-style: none;
  transition: color var(--t-rapide) ease;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::marker { content: ""; }
.faq__question:hover { color: var(--orange-texte); }

.faq__signe {
  position: relative;
  flex: none;
  margin-left: auto;
  width: 32px; height: 32px;
  border: 2px solid var(--bordure-forte);
  border-radius: var(--r-xs);
  transition: border-color var(--t-moyen) ease, background-color var(--t-moyen) ease;
}
.faq__signe::before,
.faq__signe::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background: currentColor;
  border-radius: 1px;
  transform: translate(-50%, -50%);
  transition: transform var(--t-moyen) var(--ease), opacity var(--t-rapide) ease;
}
.faq__signe::before { width: 14px; height: 2px; }
.faq__signe::after  { width: 2px; height: 14px; }
.faq__item[open] .faq__signe { border-color: var(--orange); background: rgba(228,102,30,.12); color: var(--orange-texte); }
.faq__item[open] .faq__signe::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq__question:hover .faq__signe { border-color: var(--orange); }

.faq__reponse { padding: 0 0 var(--e5); max-width: 66ch; }
.faq__reponse p { color: var(--texte-3); }
.faq__reponse p + p { margin-top: .9em; }
.faq__item[open] .faq__reponse { animation: dd-ouvre .28s var(--ease-out) both; }

@keyframes dd-ouvre {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.section--vert .faq,
.section--vert .faq__item { border-color: var(--vert-bordure); }
.section--vert .faq__question { color: var(--blanc-chaud); }
.section--vert .faq__reponse p { color: var(--vert-texte-2); }

/* --------------------------------------------------------------------------
   18. FORMULAIRES
   -------------------------------------------------------------------------- */
.formulaire {
  display: grid;
  gap: var(--e4);
  padding: var(--e5);
  background: var(--blanc-chaud);
  border: 1px solid var(--bordure);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-1);
}
@media (min-width: 768px) { .formulaire { padding: var(--e6); } }
.section--gris .formulaire { background: var(--blanc-chaud); }
.section--vert .formulaire { background: var(--blanc-chaud); border-color: transparent; }

.formulaire__grille { display: grid; gap: var(--e4); }
@media (min-width: 560px) { .formulaire__grille--2 { grid-template-columns: repeat(2, 1fr); } }

.champ { display: grid; gap: 6px; }
.champ__label { font-size: var(--fs-300); font-weight: 600; color: var(--texte); }
.champ__label .requis { color: var(--orange-texte); }
.champ__aide { font-size: var(--fs-300); color: var(--texte-3); }

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px var(--e3);
  background: #FFF;
  color: var(--texte);
  border: 1.5px solid var(--bordure-forte);
  border-radius: var(--r-sm);
  font-size: var(--fs-400);
  transition: border-color var(--t-rapide) ease, box-shadow var(--t-rapide) ease;
}
.champ textarea { min-height: 132px; resize: vertical; line-height: 1.6; padding-top: var(--e3); }
.champ select {
  appearance: none;
  padding-right: var(--e7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%235A6458' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--e4) center;
  background-size: 12px 8px;
}
.champ input::placeholder,
.champ textarea::placeholder { color: var(--texte-3); opacity: .75; }
.champ input:hover,
.champ select:hover,
.champ textarea:hover { border-color: var(--texte-2); }
.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--bleu-ardoise);
  box-shadow: 0 0 0 3px rgba(46,92,110,.22);
}
.champ input[aria-invalid="true"],
.champ select[aria-invalid="true"],
.champ textarea[aria-invalid="true"] { border-color: #B3300F; }
.champ input[aria-invalid="true"]:focus,
.champ textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(179,48,15,.22); }

.champ__erreur {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-300);
  font-weight: 600;
  color: #B3300F;
}
.champ.est-erreur .champ__erreur { display: flex; }

/* Case à cocher / consentement */
.champ--case { grid-template-columns: auto 1fr; align-items: start; gap: var(--e3); }
.champ--case input[type="checkbox"] {
  appearance: none;
  width: 24px; height: 24px;
  min-height: 24px;
  margin-top: 2px;
  padding: 0;
  border: 2px solid var(--bordure-forte);
  border-radius: var(--r-xs);
  background: #FFF;
  cursor: pointer;
  flex: none;
}
.champ--case input[type="checkbox"]:checked {
  background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11' fill='none' stroke='%231A2420' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5.6 5 9.6 13 1.5'/%3E%3C/svg%3E") center / 14px 11px no-repeat;
  border-color: var(--orange);
}
.champ--case label { font-size: var(--fs-300); color: var(--texte-3); line-height: 1.5; }
.champ--case label a { color: var(--orange-texte); text-decoration: underline; text-underline-offset: 3px; }

/* Groupe de choix (type de prestation) */
.choix { display: grid; gap: var(--e2); }
@media (min-width: 560px) { .choix--2 { grid-template-columns: repeat(2, 1fr); } }
.choix__option {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-height: 48px;
  padding: var(--e3);
  border: 1.5px solid var(--bordure-forte);
  border-radius: var(--r-sm);
  font-size: var(--fs-300);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--t-rapide) ease, background-color var(--t-rapide) ease;
}
.choix__option:hover { border-color: var(--texte-2); background: var(--gris-clair); }
.choix__option input {
  appearance: none;
  width: 20px; height: 20px;
  min-height: 20px;
  padding: 0;
  border: 2px solid var(--bordure-forte);
  border-radius: 50%;
  flex: none;
}
.choix__option input:checked { border: 6px solid var(--orange); }
.choix__option:has(input:checked) { border-color: var(--orange); background: rgba(228,102,30,.08); }

/* Résumé d'erreurs */
.formulaire__alerte {
  display: none;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  border-radius: var(--r-sm);
  border: 1.5px solid rgba(179,48,15,.4);
  background: rgba(179,48,15,.08);
  color: #8F2708;
  font-size: var(--fs-300);
  font-weight: 600;
}
.formulaire__alerte.est-visible { display: flex; }

.formulaire__pied { display: grid; gap: var(--e3); }
.formulaire__pied .btn { width: 100%; }
@media (min-width: 560px) {
  .formulaire__pied { grid-template-columns: auto 1fr; align-items: center; }
  .formulaire__pied .btn { width: auto; }
}

/* Bloc coordonnées à côté d'un formulaire */
.coordonnees { display: grid; gap: var(--e4); }
.coordonnees__ligne { display: flex; gap: var(--e3); align-items: flex-start; }
.coordonnees__ligne svg { width: 22px; height: 22px; color: var(--orange-texte); flex: none; margin-top: 3px; }
.coordonnees__ligne dt { font-size: var(--fs-300); color: var(--texte-3); }
.coordonnees__ligne dd { font-weight: 600; font-size: var(--fs-500); }
.section--vert .coordonnees__ligne svg { color: var(--orange); }
.section--vert .coordonnees__ligne dt { color: var(--vert-texte-2); }

/* --------------------------------------------------------------------------
   19. TABLEAU RESPONSIVE
   -------------------------------------------------------------------------- */
.tableau-zone {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--bordure);
  border-radius: var(--r-md);
  background: var(--blanc-chaud);
  /* ombres de bord indiquant qu'il reste du contenu à faire défiler */
  background-image:
    linear-gradient(to right, var(--blanc-chaud) 30%, rgba(247,245,240,0)),
    linear-gradient(to left,  var(--blanc-chaud) 30%, rgba(247,245,240,0)),
    linear-gradient(to right, rgba(26,36,32,.14), rgba(26,36,32,0)),
    linear-gradient(to left,  rgba(26,36,32,.14), rgba(26,36,32,0));
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 44px 100%, 44px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.tableau-zone:focus-visible { outline-offset: 3px; }

.tableau { min-width: 620px; font-size: var(--fs-300); }
.tableau caption {
  caption-side: top;
  text-align: left;
  padding: var(--e4) var(--e4) var(--e2);
  font-size: var(--fs-300);
  color: var(--texte-3);
}
.tableau th, .tableau td { padding: var(--e3) var(--e4); text-align: left; vertical-align: middle; }
.tableau thead th {
  font-family: var(--police-titre);
  font-size: var(--fs-200);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blanc-chaud);
  background: var(--vert-sapin);
  white-space: nowrap;
}
.tableau thead th:first-child { border-top-left-radius: var(--r-md); }
.tableau thead th:last-child  { border-top-right-radius: var(--r-md); }
.tableau tbody tr + tr { border-top: 1px solid var(--bordure); }
.tableau tbody tr { transition: background-color var(--t-rapide) ease; }
.tableau tbody tr:hover { background: var(--gris-clair); }
.tableau tbody th { font-weight: 700; color: var(--texte); white-space: nowrap; }
.tableau td { color: var(--texte-3); }
.tableau .prix {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: var(--fs-600);
  color: var(--texte);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tableau__note { font-size: var(--fs-300); color: var(--texte-3); margin-top: var(--e3); }

/* --------------------------------------------------------------------------
   20. BLOCS ZONES
   -------------------------------------------------------------------------- */
.zones { display: grid; gap: var(--gap); }
@media (min-width: 768px) { .zones { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .zones { grid-template-columns: repeat(3, 1fr); } }

.zone-bloc {
  padding: var(--e5);
  background: var(--blanc-chaud);
  border: 1px solid var(--bordure);
  border-radius: var(--r-md);
}
.section--gris .zone-bloc { background: var(--blanc-chaud); }
.zone-bloc__titre {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding-bottom: var(--e3);
  margin-bottom: var(--e3);
  border-bottom: 2px solid var(--orange);
  font-family: var(--police-titre);
  font-size: var(--fs-600);
  font-weight: 700;
}
.zone-bloc__titre svg { width: 18px; height: 18px; color: var(--orange-texte); flex: none; }

.zone-liens { display: flex; flex-wrap: wrap; gap: var(--e2); }
.zone-liens a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px var(--e3);
  border: 1px solid var(--bordure);
  border-radius: var(--r-xs);
  background: var(--gris-clair);
  font-size: var(--fs-300);
  color: var(--texte);
  transition: background-color var(--t-rapide) ease, border-color var(--t-rapide) ease,
              color var(--t-rapide) ease, transform var(--t-rapide) var(--ease-out);
}
.zone-liens a:hover,
.zone-liens a:focus-visible {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--texte);
  transform: translateY(-1px);
}

/* Grille dense de communes (page zones-intervention) */
.zone-grille {
  display: grid;
  gap: var(--e2);
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

/* --------------------------------------------------------------------------
   21. BANDEAU CTA
   -------------------------------------------------------------------------- */
.cta-bande {
  background: var(--vert-sapin);
  color: var(--blanc-chaud);
  padding-block: clamp(48px, 6vw, 88px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.cta-bande::before {
  /* voile neutre, pas de dégradé coloré */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 100% at 15% 0%, rgba(247,245,240,.07), transparent 62%);
}
.cta-bande__inner { display: grid; gap: var(--e5); align-items: center; }
@media (min-width: 960px) {
  .cta-bande__inner { grid-template-columns: 1fr auto; gap: var(--e7); }
}
.cta-bande .t2 { color: var(--blanc-chaud); }
.cta-bande .chapo { color: var(--vert-texte-2); }
.cta-bande__actions { display: flex; flex-wrap: wrap; gap: var(--e3); }
.cta-bande__actions .btn { flex: 1 1 220px; }
@media (min-width: 560px) { .cta-bande__actions .btn { flex: 0 0 auto; } }

/* --------------------------------------------------------------------------
   22. PIED DE PAGE
   -------------------------------------------------------------------------- */
.pied {
  background: var(--vert-sapin);
  color: var(--vert-texte-2);
  padding-top: clamp(48px, 6vw, 80px);
  font-size: var(--fs-300);
}
.pied__grille { display: grid; gap: var(--e7); }
@media (min-width: 560px) { .pied__grille { grid-template-columns: repeat(2, 1fr); gap: var(--e6); } }
@media (min-width: 1080px) { .pied__grille { grid-template-columns: repeat(4, 1fr); gap: var(--e5); } }

.pied__marque { display: grid; gap: var(--e3); }
.pied__marque img, .pied__marque svg { height: 38px; width: auto; }

.pied__titre {
  font-family: var(--police-titre);
  font-size: var(--fs-200);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blanc-chaud);
  margin-bottom: var(--e3);
  padding-bottom: var(--e2);
  border-bottom: 1px solid var(--vert-bordure);
}
.pied__liste { display: grid; gap: 2px; }
.pied__liste a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--vert-texte-2);
  transition: color var(--t-rapide) ease, padding-left var(--t-rapide) ease;
}
.pied__liste a:hover,
.pied__liste a:focus-visible { color: var(--orange); padding-left: 5px; }

.pied__contact { display: grid; gap: var(--e3); }
.pied__contact address { font-style: normal; line-height: 1.6; }
.pied__contact strong { color: var(--blanc-chaud); font-weight: 600; }
.pied__contact a { color: var(--blanc-chaud); }
.pied__contact a:hover { color: var(--orange); }

.sous-pied {
  margin-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--vert-bordure);
}
.sous-pied__inner {
  display: grid;
  gap: var(--e3);
  padding-block: var(--e5);
  font-size: var(--fs-300);
}
@media (min-width: 768px) {
  .sous-pied__inner { grid-template-columns: 1fr auto; align-items: center; }
}
.sous-pied p { color: var(--vert-texte-2); }

/* --------------------------------------------------------------------------
   23. ARTICLE LEGAL + ENCADRE
   -------------------------------------------------------------------------- */
.article-legal { max-width: var(--maxw-etroit); }
.article-legal h2 {
  font-family: var(--police-titre);
  font-size: var(--fs-700);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.012em;
  margin-top: var(--e7);
  margin-bottom: var(--e3);
}
.article-legal h3 {
  font-family: var(--police-corps);
  font-size: var(--fs-600);
  font-weight: 600;
  margin-top: var(--e5);
  margin-bottom: var(--e2);
}
.article-legal p, .article-legal li { color: var(--texte-3); }
.article-legal p + p { margin-top: 1em; }
.article-legal ul { list-style: none; display: grid; gap: var(--e2); margin-top: var(--e3); }
.article-legal ul li { position: relative; padding-left: var(--e5); }
.article-legal ul li::before {
  content: "";
  position: absolute;
  left: 2px; top: .62em;
  width: 7px; height: 7px;
  background: var(--orange);
  border-radius: 1px;
  transform: rotate(45deg);
}
.article-legal a { color: var(--orange-texte); text-decoration: underline; text-underline-offset: 3px; }

.encadre {
  display: grid;
  gap: var(--e2);
  padding: var(--e4) var(--e5);
  border-left: 4px solid var(--bleu-ardoise);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: rgba(46,92,110,.07);
}
.encadre--orange { border-left-color: var(--orange); background: rgba(228,102,30,.08); }
.encadre p { color: var(--texte-3); font-size: var(--fs-300); }
.encadre strong { color: var(--texte); }

/* Liste à puces losange, réutilisable hors article légal */
.liste-check { display: grid; gap: var(--e3); }
.liste-check li { position: relative; padding-left: var(--e6); color: var(--texte-3); }
.liste-check li::before {
  content: "";
  position: absolute;
  left: 0; top: .28em;
  width: 20px; height: 20px;
  border-radius: var(--r-xs);
  background: rgba(228,102,30,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11' fill='none' stroke='%23A8410E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5.6 5 9.6 13 1.5'/%3E%3C/svg%3E") center / 12px 9px no-repeat;
}
.section--vert .liste-check li { color: var(--vert-texte-2); }

/* --------------------------------------------------------------------------
   24. ANIMATIONS
   -------------------------------------------------------------------------- */
/* État initial appliqué uniquement si JS est actif (classe posée dans le <head>) */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
}
.js [data-reveal].est-visible {
  opacity: 1;
  transform: none;
  transition: opacity var(--t-lent) var(--ease), transform var(--t-lent) var(--ease);
}
/* Cascade : le délai est posé en variable par main.js */
.js [data-reveal="stagger"] > * {
  opacity: 0;
  transform: translateY(18px);
}
.js [data-reveal="stagger"].est-visible > * {
  opacity: 1;
  transform: none;
  transition: opacity var(--t-lent) var(--ease), transform var(--t-lent) var(--ease);
  transition-delay: var(--retard, 0ms);
}
/* will-change retiré par main.js une fois l'animation jouée */
.js [data-reveal].est-anim { will-change: opacity, transform; }

/* --------------------------------------------------------------------------
   25. UTILITAIRES
   -------------------------------------------------------------------------- */
.visuellement-cache {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.centre { text-align: center; }
.nowrap { white-space: nowrap; }
.tabulaire { font-variant-numeric: tabular-nums; }
.media-arrondi { border-radius: var(--r-md); overflow: hidden; background: var(--gris-clair); }
.media-arrondi img { width: 100%; height: 100%; object-fit: cover; }
.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-4-3  { aspect-ratio: 4 / 3; }
.ratio-3-2  { aspect-ratio: 3 / 2; }
.ratio-1-1  { aspect-ratio: 1 / 1; }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--e4); }
.mt-5 { margin-top: var(--e5); }
.mt-6 { margin-top: var(--e6); }

/* --------------------------------------------------------------------------
   26. PREFERS-REDUCED-MOTION — bloc unique, neutralise tout le mouvement
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  /* Le contenu reste visible : rien ne dépend d'une animation pour s'afficher */
  .js [data-reveal],
  .js [data-reveal="stagger"] > * {
    opacity: 1 !important;
    transform: none !important;
    will-change: auto !important;
  }

  /* Neutralisation des déplacements de survol */
  .carte:hover,
  .carte:focus-within,
  .btn--primaire:hover,
  .btn--secondaire:hover,
  .btn--tel:hover,
  .zone-liens a:hover { transform: none !important; }
  .carte:hover .carte__media img,
  .carte:focus-within .carte__media img { transform: none !important; }
  .reassurance__item:hover .reassurance__icone,
  .btn:hover svg,
  .lien-anime:hover svg { transform: none !important; }
  .pied__liste a:hover,
  .nav__sous-lien:hover { padding-left: var(--e3); }
  .lien-anime::after { transition: none; }
}

/* --------------------------------------------------------------------------
   27. IMPRESSION
   -------------------------------------------------------------------------- */
@media print {
  .entete, .barre-contact, .barre-appel, .menu-mobile, .burger,
  .cta-bande, .separateur--chantier { display: none !important; }
  body { background: #FFF; color: #000; padding-bottom: 0; }
  .section { padding-block: 18px; }
  .pied { background: #FFF; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
}

/* ==========================================================================
   CORRECTIFS D'INTÉGRATION
   Ajoutés à la recette visuelle, après assemblage des pages réelles.
   Le gabarit portait des libellés courts (« Nous appeler ») ; en production
   config.js y injecte le numéro complet, plus long, ce qui provoquait des
   retours à la ligne dans les pilules et dans la navigation.
   ========================================================================== */

/* Un bouton ne se casse jamais sur deux lignes : la pilule deviendrait un
   disque et le libellé sortirait de sa forme. */
.btn { white-space: nowrap; }

/* Idem pour les entrées de navigation : « Location de bennes » doit rester
   sur une ligne, sinon la barre passe sur trois rangs. */
.nav__lien,
.barre-contact__lien { white-space: nowrap; }

/* En dessous de 1440px, la place ne suffit pas pour la navigation complète,
   le numéro en toutes lettres et le bouton de devis : mesuré à 1280px, la
   barre débordait à droite. Le bouton téléphone se réduit alors à son icône,
   sans rien perdre en accessibilité : config.js pose un aria-label
   « Appeler le … » sur ce lien. */
@media (min-width: 1080px) and (max-width: 1439.98px) {
  .entete__actions .btn--tel { padding-inline: var(--e3); }
  .entete__actions .btn--tel span[data-dd] { display: none; }

  /* Et on resserre la barre : sept entrées de navigation, un logo, une pilule
     et un bouton de devis doivent tenir dans 1280px sans déborder. */
  .nav__liste { gap: 0; }
  .nav__lien { padding-inline: var(--e2); }
  .nav__chevron { margin-inline-start: -2px; }
  .logo img { width: 168px; height: auto; }
  .entete__actions .btn--primaire { padding-inline: var(--e4); }
  /* Sept entrées à 15px ne rentrent pas. 13,6px reste confortable à lire,
     là où l'échelon --fs-200 (12px) serait trop petit pour une navigation.
     La cible tactile de 44px de haut est conservée. */
  .nav__lien { font-size: .85rem; }
}

/* .texte était prévu comme l'enveloppe d'un seul paragraphe : l'espacement
   était porté par « .texte + .texte ». À l'intégration, chaque section reçoit
   un bloc de contenu riche — plusieurs paragraphes, des listes, des tableaux
   dans un même .texte. Sans rythme vertical interne, tout se colle. */
.texte > * + * { margin-top: 1em; }
.texte > * + h2,
.texte > * + h3,
.texte > * + h4 { margin-top: 1.9em; }
.texte > h2 + *,
.texte > h3 + *,
.texte > h4 + * { margin-top: .55em; }
.texte > * + .tabulaire,
.texte > * + .encadre,
.texte > .tabulaire + *,
.texte > .encadre + * { margin-top: 1.5em; }

/* Même règle dans les pages légales, dont les titres étaient collés au
   paragraphe précédent. */
.article-legal > * + h2,
.article-legal > * + h3 { margin-top: 1.9em; }
.article-legal > h2 + *,
.article-legal > h3 + * { margin-top: .55em; }
.article-legal > * + ul,
.article-legal > * + ol,
.article-legal > * + .tabulaire { margin-top: 1em; }