@font-face{font-family:"Urbanist";font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/urbanist-700.woff2') format('woff2');}
@font-face{font-family:"Urbanist";font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/urbanist-800.woff2') format('woff2');}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-400.woff2') format('woff2');}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter-700.woff2') format('woff2');}
:root{
  --c-encre: #0b1c38;
  --c-encre-2: #142a4d;
  --c-fond: #f6f8fb;
  --c-fond-2: #e8edf4;
  --c-surface: #ffffff;
  --c-trait: #d3dbe6;
  --c-accent: #1e4fa3;
  --c-accent-vif: #ffd60a;
  --c-accent-texte: #183f85;
  --c-signal: #e07a1f;
  --c-texte: #0f1b2d;
  --c-texte-2: #4a5768;
  --c-texte-sur-sombre: #d3dbe8;
  --f-titres: "Urbanist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-texte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --rayon: 4px;
  --ombre: 0 1px 2px rgba(0,0,0,.06), 0 6px 16px rgba(0,0,0,.06);
  --motif: none;
}
/* ============================================================================
   SOCLE COMMUN — Sillon, brique 1
   Ce fichier ne connaît aucune couleur : il ne lit que les jetons du thème
   (--c-*, --f-*, --rayon, --ombre) posés dans :root par theme.php, juste
   avant lui dans le CSS généré. Les seules valeurs littérales admises sont
   #fff et #000, utilisées dans color-mix() pour éclaircir ou assombrir un
   jeton. Repris du socle du site Occitanie (assets/css/site.css, sections
   2 à 9, 11 et 13), réécrit sans aucune classe spécifique à une page.

   Chrome : chrome commun (menu mobile, barre mobile, skip, fil) ici ; barre haute et pied de page dans leurs variantes
   (moteur/sections/barre-haute/, moteur/sections/pied-de-page/). Le menu mobile (#menuMobile) et la barre
   mobile (.barre-mobile) sont émis par chrome.php quelle que soit la variante de barre haute.
   ancien chrome (.nav-links, .mobile-menu, .mobile-bar, .footer-grid, footer, nav:not(.fil)) à retirer en brique 5 :
   les variantes le neutralisent (remises à zéro dans leurs CSS) ; il est marqué « Ancien chrome » ci-dessous.
   ============================================================================ */

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

html { background: var(--c-fond); -webkit-text-size-adjust: 100%; }

body {
  background: var(--c-fond);
  color: var(--c-texte);
  font-family: var(--f-texte);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 0;
}

/* sans height:auto, l'attribut height= de la balise étire l'image dès que la
   largeur est contrainte */
img, svg { max-width: 100%; height: auto; }
img { display: block; }

a { color: var(--c-accent-texte); }

/* Le focus doit toujours se voir : c'est la seule navigation au clavier. L'anneau est en accent_texte
   sur les fonds clairs (paire focus/fond, 4,5:1 contrôlé par paires_contraste()) ; les zones sombres
   (.sec.sombre, le menu et la barre mobiles, et les variantes posées sur l'encre : bandeau d'infos, hero
   photo, bande CTA sombre, pied de page) redéfinissent --anneau-focus en accent_vif (paire encre/accent_vif). */
:focus-visible {
  outline: 3px solid var(--anneau-focus, var(--c-accent-texte));
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Lien d'évitement pour les lecteurs d'écran et la navigation clavier */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--c-encre); color: var(--c-texte-sur-sombre);
  padding: 12px 20px; font-family: var(--f-titres); font-weight: 600;
  text-decoration: none; border-radius: 0 0 var(--rayon) 0;
}
.skip:focus { left: 0; }

/* Honeypot du formulaire : hors écran, jamais display:none (les robots le
   détectent), jamais atteignable au clavier (tabindex=-1 dans le HTML). */
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Conteneur de lecture : 1200 px, gouttière fluide */
.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: clamp(16px, 5vw, 48px);
  padding-right: clamp(16px, 5vw, 48px);
}

/* ---------------------------------------------------------------------------
   2. TYPOGRAPHIE
   Les titres sont en casse normale. Les capitales espacées sont réservées
   aux petites étiquettes (.eyebrow), où elles signalent sans crier.
   --------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--f-titres);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.015em;
  text-transform: none;
  text-wrap: balance;
  color: var(--c-texte);
}
h1 { font-size: clamp(33px, 5.6vw, 62px); font-weight: 800; letter-spacing: -0.028em; }
h2 { font-size: clamp(25px, 3.6vw, 39px); font-weight: 800; letter-spacing: -0.024em; }
h3 { font-size: clamp(18px, 2vw, 21px); letter-spacing: -0.005em; }
h4 { font-size: 16px; }

p { line-height: 1.72; }
p + p { margin-top: 14px; }

/* Segment coloré d'un titre : toujours émis par les gabarits, coloré ici.
   Sur fond clair, le jeton accent_texte (4,5:1 garanti sur fond) ; sur bande
   sombre, le jeton accent_vif. */
.segment { color: var(--c-accent-texte); }
.sombre .segment { color: var(--c-accent-vif); }

.eyebrow {
  display: block;
  font-family: var(--f-titres);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-accent-texte);
  margin-bottom: 10px;
}
.sombre .eyebrow { color: var(--c-accent-vif); }

.chapeau { font-size: 18px; color: var(--c-texte-2); max-width: 68ch; }
.sombre .chapeau { color: var(--c-texte-sur-sombre); }

/* Les chiffres s'alignent en colonne partout où il y en a */
data, table { font-variant-numeric: tabular-nums; }

/* Étoiles de note (etoiles_html() : hero, barre du haut, bandeau d'avis). Pleines = remplies, vides = au trait. */
.etoiles { display: inline-flex; gap: 2px; vertical-align: -3px; color: var(--c-accent-vif); }
.etoile { width: 18px; height: 18px; flex: none; }
.etoile.pleine { fill: currentColor; }
.etoile.vide { fill: none; stroke: currentColor; stroke-width: 1.5; }

/* La ligne de source sous un chiffre, un tableau, une série : une phrase,
   donc elle se lit. */
.src { font-size: 12.5px; color: var(--c-texte-2); margin-top: 13px; line-height: 1.65; max-width: 68ch; }
.src a { color: var(--c-accent-texte); }
.sombre .src { color: var(--c-texte-sur-sombre); }
.sombre .src a { color: var(--c-accent-vif); }

/* ---------------------------------------------------------------------------
   3. BOUTONS
   48 px de haut minimum : zone tactile confortable au pouce. Le bouton
   principal est encre sur accent_vif, paire contrôlée par paires_contraste().
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--f-titres);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.01em;
  text-transform: none;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--rayon);
  min-height: 48px;
  padding: 12px 26px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn svg { width: 18px; height: 18px; flex: none; }

.btn-principal {
  background: var(--c-accent-vif);
  color: var(--c-encre);
}
.btn-principal:hover {
  background: color-mix(in srgb, var(--c-accent-vif) 88%, #fff);
  color: var(--c-encre);
  transform: translateY(-2px);
}

.btn-secondaire {
  background: transparent;
  color: var(--c-accent-texte);
  border-color: var(--c-accent-texte);
}
.btn-secondaire:hover { background: var(--c-accent-texte); color: var(--c-fond); }

/* Sur fond sombre, le contour passe en clair */
.sombre .btn-secondaire {
  color: var(--c-texte-sur-sombre);
  border-color: color-mix(in srgb, var(--c-texte-sur-sombre) 40%, transparent);
}
.sombre .btn-secondaire:hover {
  background: transparent;
  color: var(--c-accent-vif);
  border-color: var(--c-accent-vif);
}

/* Groupe de boutons : nombre par ligne piloté par data-btn-pc / data-btn-mobile */
.boutons { display: grid; grid-template-columns: repeat(2, auto); gap: 12px; justify-content: start; margin-top: 26px; }
.boutons .btn { width: 100%; }

/* ---------------------------------------------------------------------------
   4. SECTIONS
   --------------------------------------------------------------------------- */
.sec { padding: 56px 0; }
.sec.sombre { background: var(--c-encre); color: var(--c-texte-sur-sombre); --anneau-focus: var(--c-accent-vif); }
.sec.sombre h1, .sec.sombre h2, .sec.sombre h3, .sec.sombre h4 { color: #fff; }
.sec.sombre a { color: var(--c-accent-vif); }
.sec.fond-2 { background: var(--c-fond-2); }

/* Motif de fond : le SVG en data-URI du thème, posé par css/motifs/<motif>.css, sur les types que
   sections.json marque "motif": true (hero, etapes, zone, cta-final ; rendre_section() pose la classe).
   Il est peint par un pseudo-élément : les variantes posent leur fond par le raccourci « background: »,
   qui effacerait un background-image porté par la section. isolation:isolate garde le pseudo-élément
   (z-index -1) au-dessus du fond de la section et sous son contenu. Le motif reste discret : ses traits
   sont dessinés à 6-8 % d'opacité dans le SVG, que le pseudo-élément divise encore par deux (sous un
   titre, le motif plein se lisait trop). */
.sec.motif { position: relative; isolation: isolate; }
.sec.motif::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--motif);
  background-repeat: repeat;
  opacity: .5;
  pointer-events: none;
}

.sec-titre { margin-bottom: 30px; max-width: 760px; }
.sec-titre h2 + .chapeau { margin-top: 14px; }

/* Cartes : ombre ou bordure selon le thème (jeton --ombre) */
.carte {
  background: var(--c-surface);
  border: 1px solid var(--c-trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre, none);
  padding: 26px;
}
.sombre .carte { background: var(--c-encre-2); border-color: color-mix(in srgb, var(--c-texte-sur-sombre) 18%, transparent); }

/* Grilles : colonnes pilotées par data-cols-pc / data-cols-mobile */
.grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* ---------------------------------------------------------------------------
   5. FIL D'ARIANE
   Situe le visiteur arrivé de Google sur une page commune, et donne la
   hiérarchie accueil > offres > offre.
   --------------------------------------------------------------------------- */
.fil {
  display: block;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-trait);
  padding: 11px clamp(16px, 5vw, 48px);
  font-size: 13.5px;
}
.fil ol {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 9px;
}
.fil li { display: flex; align-items: center; gap: 9px; color: var(--c-texte-2); }
.fil li + li::before { content: '›'; color: var(--c-texte-2); }
.fil a { color: var(--c-texte-2); text-decoration: none; }
.fil a:hover { color: var(--c-accent-texte); text-decoration: underline; text-underline-offset: 3px; }
.fil [aria-current="page"] { color: var(--c-texte); font-weight: 600; }

/* ---------------------------------------------------------------------------
   6. BARRE HAUTE ET NAVIGATION — Ancien chrome (à retirer en brique 5)
   La variante barre-haute/infos-nav-bouton porte son propre balisage et
   remet à zéro .topbar et nav:not(.fil). Le fond file d'un bord à l'autre,
   mais le contenu reste aligné sur les 1200 px du reste du site.
   --------------------------------------------------------------------------- */
.topbar {
  background: var(--c-encre);
  color: var(--c-texte-sur-sombre);
  font-size: 13.5px;
  padding: 9px clamp(16px, 5vw, 48px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 26px;
}
.topbar a { color: var(--c-texte-sur-sombre); text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.topbar a:hover { color: var(--c-accent-vif); }
.topbar .tel {
  font-family: var(--f-titres);
  font-weight: 600;
  font-size: 15px;
  color: var(--c-accent-vif);
}
.topbar .sep { color: color-mix(in srgb, var(--c-texte-sur-sombre) 45%, transparent); }

/* :not(.fil) : le fil d'Ariane est aussi un <nav>, il ne doit pas hériter
   de la barre de navigation principale (sticky, flex, hauteur minimale). */
nav:not(.fil) {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-trait);
  box-shadow: 0 1px 12px color-mix(in srgb, var(--c-encre) 6%, transparent);
  padding: 0 clamp(16px, 5vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 76px;
  position: sticky;
  top: 0;
  z-index: 100;
}
.topbar,
nav:not(.fil) {
  padding-left:  max(clamp(16px, 5vw, 48px), calc((100% - 1200px) / 2));
  padding-right: max(clamp(16px, 5vw, 48px), calc((100% - 1200px) / 2));
}

.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; line-height: 1.2; color: inherit; }
.logo img { width: 44px; height: 44px; border-radius: var(--rayon); object-fit: cover; }
.logo-nom {
  display: block;
  font-family: var(--f-titres);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-texte);
}
/* Le bloc logo porte la promesse commerciale, pas seulement le nom :
   c'est la seule ligne visible sur absolument toutes les pages. */
.logo-sous {
  display: block;
  font-family: var(--f-titres);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-accent-texte);
  margin-top: 1px;
}

.nav-links { display: flex; align-items: center; gap: 2px; list-style: none; }
.nav-links a:not(.btn) {
  display: block;
  color: var(--c-texte-2);
  text-decoration: none;
  font-family: var(--f-texte);
  font-size: 15px;
  font-weight: 500;
  padding: 9px 13px;
  border-radius: var(--rayon);
  transition: background .15s ease, color .15s ease;
}
.nav-links a:not(.btn):hover { color: var(--c-texte); background: var(--c-fond-2); }
.nav-links a[aria-current="page"] { color: var(--c-texte); font-weight: 600; }

/* Le menu déroulant s'ouvre au survol ET au focus : utilisable au clavier. */
.dropdown { position: relative; }
.dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-trait);
  border-radius: var(--rayon);
  min-width: 232px;
  box-shadow: 0 10px 34px color-mix(in srgb, var(--c-encre) 12%, transparent);
  overflow: hidden;
  z-index: 10;
  list-style: none;
}
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu { display: block; }
.dropdown-menu a { display: block; padding: 12px 18px; border-radius: 0; border-bottom: 1px solid var(--c-trait); }
.dropdown-menu a:last-child { border-bottom: none; }
.dropdown-menu a:hover { color: var(--c-accent-texte); background: var(--c-fond-2); }

nav:not(.fil) .btn-nav { padding: 10px 20px; min-height: 46px; }

/* ---------------------------------------------------------------------------
   7. MENU MOBILE (chrome commun : menu_mobile_html(), chrome.php)
   Plein écran sur l'encre, ouvert par le hamburger de la barre haute
   (script_menu() pose .ouvert sur #menuMobile et .menu-ouvert sur body).
   --------------------------------------------------------------------------- */
.menu-mobile { display: none; position: fixed; inset: 0; z-index: 100; background: var(--c-encre); color: var(--c-texte-sur-sombre); padding: 76px 24px 40px; overflow-y: auto; --anneau-focus: var(--c-accent-vif); }
.menu-mobile.ouvert { display: block; }
body.menu-ouvert { overflow: hidden; }
/* Le <nav> du menu plein écran n'est pas la barre de navigation : nav:not(.fil) ne s'y applique pas. */
.menu-mobile nav:not(.fil) { display: block; position: static; z-index: auto; min-height: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.menu-mobile nav a { display: block; color: #fff; text-decoration: none; font-family: var(--f-titres); font-size: 19px; font-weight: 600; padding: 14px 0; border-bottom: 1px solid color-mix(in srgb, #fff 12%, transparent); }
.menu-mobile nav a.sous { font-size: 16px; font-weight: 500; padding-left: 18px; color: var(--c-texte-sur-sombre); }
.menu-mobile nav a:hover, .menu-mobile nav a:focus-visible, .menu-mobile nav a[aria-current="page"] { color: var(--c-accent-vif); }
.menu-mobile-fermer { position: absolute; top: 16px; right: 16px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid color-mix(in srgb, #fff 30%, transparent); border-radius: var(--rayon); color: #fff; cursor: pointer; }
.menu-mobile-contact { margin-top: 26px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, #fff 14%, transparent); display: grid; gap: 10px; }
.menu-mobile-contact a { display: inline-flex; align-items: center; gap: 8px; color: var(--c-texte-sur-sombre); text-decoration: none; font-size: 16px; }
.menu-mobile > .btn { display: flex; justify-content: center; margin-top: 22px; }

/* Ancien chrome (à retirer en brique 5) : hamburger à barres et .mobile-menu.
   Le hamburger actif est stylé par la variante barre-haute/infos-nav-bouton. */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  padding: 0 11px;
  background: transparent;
  border: 1px solid var(--c-trait);
  border-radius: var(--rayon);
  cursor: pointer;
}
.hamburger span { display: block; height: 2px; background: var(--c-texte); border-radius: 2px; }
.hamburger[aria-expanded="true"] { background: var(--c-fond-2); }

.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--c-encre);
  z-index: 200;
  padding: 76px 24px 40px;
  overflow-y: auto;
}
.mobile-menu.open { display: block; }
.mobile-menu ul { list-style: none; }
.mobile-menu a:not(.btn) {
  display: block;
  color: #fff;
  text-decoration: none;
  font-family: var(--f-titres);
  font-size: 19px;
  font-weight: 600;
  padding: 15px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--c-texte-sur-sombre) 15%, transparent);
}
.mobile-menu a:not(.btn):hover { color: var(--c-accent-vif); }
.mobile-menu-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--c-texte-sur-sombre) 35%, transparent);
  border-radius: var(--rayon);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}
.mobile-menu .menu-contact {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--c-texte-sur-sombre) 20%, transparent);
}
.mobile-menu .menu-contact a { border: none; font-size: 16px; color: var(--c-texte-sur-sombre); padding: 8px 0; }
.mobile-menu .btn { display: flex; margin-top: 22px; font-size: 17px; }

/* ---------------------------------------------------------------------------
   8. BARRE FIXE DU BAS (mobile ; chrome commun : barre_mobile_html(), chrome.php)
   Appeler / Devis / Contact, sous 900 px, quand design.global.barre_mobile
   est vrai. Elle masquerait la fin des pages : le body reçoit une réserve
   équivalente (body:has(.barre-mobile)).
   --------------------------------------------------------------------------- */
.barre-mobile { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; grid-template-columns: 1fr 1.4fr 1fr; align-items: stretch; background: var(--c-encre); border-top: 2px solid var(--c-accent); padding-bottom: env(safe-area-inset-bottom, 0px); --anneau-focus: var(--c-accent-vif); }
.barre-mobile a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 58px; padding: 8px 6px; color: var(--c-texte-sur-sombre); text-decoration: none; font-size: 11.5px; font-weight: 500; letter-spacing: .02em; }
.barre-mobile a .icone { width: 20px; height: 20px; }
.barre-mobile .btn-devis { margin: 7px; min-height: 46px; border-radius: var(--rayon); background: var(--c-accent-vif); color: var(--c-encre); font-family: var(--f-titres); font-weight: 700; font-size: 14.5px; }

@media (max-width: 899px) {
  .barre-mobile { display: grid; }
  body:has(.barre-mobile) { padding-bottom: 64px; }
}

/* Ancien chrome (à retirer en brique 5) : .mobile-bar */
.mobile-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 150;
  background: var(--c-encre);
  border-top: 2px solid var(--c-accent);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  grid-template-columns: 1fr 1.4fr 1fr;
  align-items: stretch;
}
.mobile-bar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 58px;
  padding: 8px 6px;
  color: var(--c-texte-sur-sombre);
  text-decoration: none;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .02em;
}
.mobile-bar a svg { width: 20px; height: 20px; }
.mobile-bar .btn-principal {
  flex-direction: row;
  gap: 8px;
  font-family: var(--f-titres);
  font-weight: 700;
  font-size: 14.5px;
  margin: 7px;
  min-height: 46px;
  color: var(--c-encre);
  letter-spacing: 0;
}

/* ---------------------------------------------------------------------------
   9. PIED DE PAGE — Ancien chrome (à retirer en brique 5)
   La variante pied-de-page/quatre-colonnes remet footer à zéro (footer.pied).
   --------------------------------------------------------------------------- */
footer {
  background: var(--c-encre);
  border-top: 5px solid var(--c-accent);
  padding: 52px clamp(16px, 5vw, 48px) 22px;
  color: var(--c-texte-sur-sombre);
  font-size: 14px;
}
.footer-grid {
  max-width: 1200px;
  margin: 0 auto 28px;
  display: grid;
  grid-template-columns: 1.7fr 1fr 1.1fr 1fr;
  gap: 36px;
}
.footer-nom {
  font-family: var(--f-titres);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #fff;
  margin-bottom: 3px;
}
.footer-sous {
  display: block;
  font-family: var(--f-titres);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-accent-vif);
  margin-bottom: 14px;
}
.footer-desc { font-size: 13.5px; line-height: 1.75; }
.footer-desc strong { color: #fff; }
.footer-col h4 {
  font-family: var(--f-titres);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-accent-vif);
  margin-bottom: 13px;
  padding-bottom: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--c-texte-sur-sombre) 18%, transparent);
}
.footer-col ul { list-style: none; }
.footer-col p, .footer-col a, .footer-col address {
  font-style: normal;
  font-size: 13.5px;
  color: var(--c-texte-sur-sombre);
  line-height: 1.95;
  display: block;
  text-decoration: none;
}
.footer-col a:hover { color: var(--c-accent-vif); }

/* Les communes sont des liens : chaque page commune reçoit un lien entrant
   depuis toutes les pages du site. */
.f-villes { list-style: none; display: flex; flex-wrap: wrap; font-size: 12.5px; line-height: 1.85; margin-top: 6px; }
.f-villes a { display: inline; font-size: inherit; line-height: inherit; }
.f-villes li + li::before { content: "·"; color: var(--c-accent); margin: 0 7px; }

.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--c-texte-sur-sombre) 15%, transparent);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--c-texte-sur-sombre);
}
.footer-bottom ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer-bottom a { color: var(--c-texte-sur-sombre); text-decoration: none; }
.footer-bottom a:hover { color: var(--c-accent-vif); }

/* ---------------------------------------------------------------------------
   10. FORMULAIRES
   --------------------------------------------------------------------------- */
.form-card {
  background: var(--c-surface);
  border: 1px solid var(--c-trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre, none);
  padding: 40px;
}
.form-card h3 { margin-bottom: 6px; }
.form-card .form-sous, .form-card .form-sub { font-size: 13px; color: var(--c-texte-2); margin-bottom: 24px; }

label { display: block; font-weight: 600; color: var(--c-texte); margin-bottom: 6px; }
label .req { color: var(--c-accent-texte); }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea {
  font-family: var(--f-texte);
  font-size: 16px;            /* sous 16px, iOS zoome à la mise au point */
  color: var(--c-texte);
  background: var(--c-surface);
  border: 1px solid var(--c-trait);
  border-radius: var(--rayon);
  padding: 13px 14px;
  width: 100%;
  min-height: 48px;
}
textarea { min-height: 140px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: 3px solid var(--anneau-focus, var(--c-accent-texte));
  outline-offset: 1px;
  border-color: var(--c-accent);
}
input::placeholder, textarea::placeholder { color: var(--c-texte-2); }
input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; accent-color: var(--c-accent); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* .form-group : nom émis par les gabarits formulaire/* (tâche 7B) */
.form-champ, .form-group { margin-bottom: 18px; }

.consent-box {
  background: var(--c-fond-2);
  border: 1px solid var(--c-trait);
  border-radius: var(--rayon);
  padding: 16px 20px;
  margin: 24px 0;
  font-size: 14px;
  color: var(--c-texte-2);
}
.consent-item { display: flex; gap: 12px; align-items: flex-start; }   /* case + libellé côte à côte (gabarits formulaire/*, tâche 7B) */
.consent-box label { display: flex; gap: 12px; align-items: flex-start; font-weight: 500; color: var(--c-texte); margin: 0; }
.consent-box input[type="checkbox"] { margin-top: 4px; width: 20px; height: 20px; flex: none; }
.consent-box a { color: var(--c-accent-texte); }
.consent-info { margin: 10px 0 0 32px; }   /* phrase d'information RGPD, alignée sous le libellé (case 20 px + 12 px) */

/* Le jeton signal n'a pas de paire de contraste contrôlée : le texte reste en --c-texte,
   le signal ne sert qu'au repère (barre à gauche). */
.form-erreur { color: var(--c-texte); font-size: 14px; margin-top: 6px; padding-left: 10px; border-left: 3px solid var(--c-signal); }

/* ---------------------------------------------------------------------------
   11. RÈGLES DES ATTRIBUTS data-*
   Elles traduisent les réglages de design.json sans aucun style= dans le
   HTML. L'attribut est posé sur la <section> ; il peut aussi l'être sur la
   grille elle-même.
   --------------------------------------------------------------------------- */
[data-cols-pc="1"] .grille, .grille[data-cols-pc="1"] { grid-template-columns: repeat(1, 1fr); }
[data-cols-pc="2"] .grille, .grille[data-cols-pc="2"] { grid-template-columns: repeat(2, 1fr); }
[data-cols-pc="3"] .grille, .grille[data-cols-pc="3"] { grid-template-columns: repeat(3, 1fr); }
[data-cols-pc="4"] .grille, .grille[data-cols-pc="4"] { grid-template-columns: repeat(4, 1fr); }

/* Les grilles des variantes de la tâche 7 lisent ces variables : repeat(var(--cols-pc, n), …) */
[data-cols-pc="1"] { --cols-pc: 1; }
[data-cols-pc="2"] { --cols-pc: 2; }
[data-cols-pc="3"] { --cols-pc: 3; }
[data-cols-pc="4"] { --cols-pc: 4; }
[data-cols-mobile="1"] { --cols-mobile: 1; }
[data-cols-mobile="2"] { --cols-mobile: 2; }
[data-cols-mobile="3"] { --cols-mobile: 3; }
[data-cols-mobile="4"] { --cols-mobile: 4; }

[data-btn-pc="1"] .boutons, .boutons[data-btn-pc="1"] { grid-template-columns: repeat(1, auto); }
[data-btn-pc="2"] .boutons, .boutons[data-btn-pc="2"] { grid-template-columns: repeat(2, auto); }
[data-btn-pc="3"] .boutons, .boutons[data-btn-pc="3"] { grid-template-columns: repeat(3, auto); }
[data-btn-pc="4"] .boutons, .boutons[data-btn-pc="4"] { grid-template-columns: repeat(4, auto); }

[data-align="gauche"] { text-align: left; }
[data-align="gauche"] .sec-titre, [data-align="gauche"] .chapeau { margin-left: 0; margin-right: 0; }
[data-align="gauche"] .boutons { justify-content: start; }
[data-align="centre"] { text-align: center; }
[data-align="centre"] .sec-titre, [data-align="centre"] .chapeau, [data-align="centre"] .src { margin-left: auto; margin-right: auto; }
[data-align="centre"] .boutons { justify-content: center; }

@media (min-width: 761px) {
  [data-hide-pc] { display: none; }
}

/* ---------------------------------------------------------------------------
   12. RESPONSIVE
   Un seul point de bascule pour les réglages par écran : 760 px. Le menu
   passe en hamburger un peu plus tôt (900 px) pour laisser la place aux
   libellés.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}

@media (max-width: 760px) {
  nav:not(.fil) { min-height: 66px; }
  .sec { padding: 44px 0; }
  .topbar { justify-content: center; text-align: center; font-size: 12.5px; }
  .topbar .sep { display: none; }
  .mobile-bar { display: grid; }
  /* réserve sous le contenu pour que la barre fixe ne masque rien */
  body:has(.mobile-bar) { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  .footer-bottom { flex-direction: column; text-align: center; gap: 8px; }
  .form-card { padding: 24px; }
  .form-row { grid-template-columns: 1fr; }

  .grille { grid-template-columns: 1fr; }
  /* Un réglage « pc seul » (data-cols-pc sans data-cols-mobile) ne doit pas garder ses colonnes sur mobile :
     [data-cols-pc] .grille (0,2,0) l'emporterait sur .grille (0,1,0). Placée avant les règles data-cols-mobile. */
  [data-cols-pc] .grille, .grille[data-cols-pc] { grid-template-columns: 1fr; }
  [data-cols-mobile="1"] .grille, .grille[data-cols-mobile="1"] { grid-template-columns: repeat(1, 1fr); }
  [data-cols-mobile="2"] .grille, .grille[data-cols-mobile="2"] { grid-template-columns: repeat(2, 1fr); }
  [data-cols-mobile="3"] .grille, .grille[data-cols-mobile="3"] { grid-template-columns: repeat(3, 1fr); }
  [data-cols-mobile="4"] .grille, .grille[data-cols-mobile="4"] { grid-template-columns: repeat(4, 1fr); }

  .boutons { grid-template-columns: 1fr; justify-content: stretch; }
  [data-btn-mobile="1"] .boutons, .boutons[data-btn-mobile="1"] { grid-template-columns: repeat(1, 1fr); }
  [data-btn-mobile="2"] .boutons, .boutons[data-btn-mobile="2"] { grid-template-columns: repeat(2, 1fr); }
  [data-btn-mobile="3"] .boutons, .boutons[data-btn-mobile="3"] { grid-template-columns: repeat(3, 1fr); }
  [data-btn-mobile="4"] .boutons, .boutons[data-btn-mobile="4"] { grid-template-columns: repeat(4, 1fr); }

  [data-hide-mobile] { display: none; }
}

@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* Tableaux : jamais de débordement horizontal de la page */
.tab-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
:root { --motif: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2296%22 height=%2296%22%3E%3Cpath d=%22M8 0v40h40v56M56 0v16h40M0 72h24v24%22 fill=%22none%22 stroke=%22%23000%22 stroke-opacity=%22.07%22 stroke-width=%223%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
/* avis · ligne-note : une ligne, titre + note + nombre + bouton vers la fiche */
.sec-avis.var-ligne-note {
  padding: 2.5rem 0;
  background: var(--c-fond-2);
  border-top: 1px solid var(--c-trait);
  border-bottom: 1px solid var(--c-trait);
}
.sec-avis.var-ligne-note .avis-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
}
.sec-avis.var-ligne-note h2 {
  margin: 0;
  font-size: 1.25rem;
}
.sec-avis.var-ligne-note .avis-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 1.125rem;
  color: var(--c-texte);
}
.sec-avis.var-ligne-note .etoiles {
  color: var(--c-signal);
}
.sec-avis.var-ligne-note .etoile {
  width: 24px;
  height: 24px;
}
.sec-avis.var-ligne-note .avis-note data {
  font-weight: 700;
  color: var(--c-encre);
}
.sec-avis.var-ligne-note .avis-sep,
.sec-avis.var-ligne-note .avis-plateforme {
  color: var(--c-texte-2);
}
.sec-avis.var-ligne-note .avis-lien {
  margin: 0;
}
@media (min-width: 761px) {
  .sec-avis.var-ligne-note .avis-lien {
    margin-left: auto;
  }
}
/* barre-haute · infos-nav-bouton : bandeau d'infos (ville, téléphone, courriel, horaires) + navigation + bouton,
   et le hamburger qui ouvre le menu mobile. Le menu plein écran (#menuMobile) et la barre basse (.barre-mobile)
   sont émis par chrome.php quelle que soit la variante : leurs règles vivent dans le socle (chrome commun).
   Jetons : --c-encre, --c-surface, --c-trait, --c-texte, --c-texte-2, --c-texte-sur-sombre, --c-accent-vif,
   --c-accent-texte, --c-fond-2, --rayon, --f-titres. */

.sec-barre-haute { position: sticky; top: 0; z-index: 50; }

/* Remise à zéro du chrome générique du socle (.sec, .topbar, nav:not(.fil)) : cette variante a son propre balisage,
   les gouttières viennent du seul conteneur .wrap. Sélecteurs plus spécifiques que ceux du socle, y compris sous 760 px. */
.sec.sec-barre-haute { padding: 0; }
.sec-barre-haute .topbar { display: block; padding: 0; }
.sec-barre-haute nav.nav { display: block; position: static; z-index: auto; gap: 0; min-height: 0; padding: 0; }

/* Bandeau d'infos */
.topbar { background: var(--c-encre); color: var(--c-texte-sur-sombre); font-size: 13.5px; --anneau-focus: var(--c-accent-vif); }
.topbar .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; padding-top: 7px; padding-bottom: 7px; }
.topbar-zone, .topbar-contact { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.topbar a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.topbar a:hover, .topbar a:focus-visible { color: var(--c-accent-vif); }
.topbar .tel { font-family: var(--f-titres); font-weight: 700; font-size: 15px; color: var(--c-accent-vif); }
.topbar .sep { opacity: .55; margin: 0 6px; }
.topbar .horaires { display: inline-flex; align-items: center; gap: 6px; }
.topbar .icone { width: 16px; height: 16px; }
.topbar .topbar-avis { display: inline-flex; align-items: center; gap: 6px; }
.topbar .topbar-avis .etoile { width: 14px; height: 14px; }

/* Navigation */
.nav { background: var(--c-surface); border-bottom: 1px solid var(--c-trait); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.logo { min-width: 0; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto auto 1fr; gap: 0; align-items: center; justify-items: start; text-decoration: none; color: var(--c-encre); }
/* Logo (existant.logo) : image à gauche sur toute la hauteur, nom et promesse restent empilés et centrés dans la
   colonne de droite (les deux rangées 1fr absorbent la hauteur de l'image). Sans logo, la colonne image est vide
   (largeur nulle) : le rendu est celui d'avant, nom au-dessus de la promesse.
   « .logo .logo-image » (et non .logo-image seul) l'emporte sur « .logo img » du socle (44 px, rognée, arrondie). */
.logo .logo-image { grid-column: 1; grid-row: 1 / span 4; width: 48px; height: 48px; margin-right: 12px; border-radius: 0; object-fit: contain; }
.logo-image ~ .logo-nom, .logo-image ~ .logo-promesse { grid-column: 2; }
.logo-nom { grid-row: 2; font-family: var(--f-titres); font-weight: 800; font-size: 20px; letter-spacing: -.01em; line-height: 1.1; }
.logo-promesse { grid-row: 3; font-size: 12.5px; color: var(--c-texte-2); margin-top: 3px; }
.nav-liens { display: flex; flex: none; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-liens > li { position: relative; }
.nav-liens a:not(.btn) { display: inline-flex; align-items: center; gap: 4px; padding: 10px 12px; border-radius: var(--rayon); color: var(--c-texte); text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap; }
.nav-liens a:not(.btn):hover, .nav-liens a:not(.btn):focus-visible, .nav-liens a:not(.btn)[aria-current="page"] { color: var(--c-accent-texte); background: var(--c-fond-2); }
.nav-liens .icone { width: 16px; height: 16px; }
.nav-cta { margin-left: 10px; }
/* Bouton « Appeler » (réglage bouton = appel) : icône, mot, puis numéro en clair, plus fin. */
.nav-appel { min-height: 48px; white-space: nowrap; }
.nav-numero { font-family: var(--f-texte); font-weight: 400; font-size: 13px; }
.sous-menu { position: absolute; top: 100%; left: 0; min-width: 260px; display: none; flex-direction: column; padding: 8px; background: var(--c-surface); border: 1px solid var(--c-trait); border-radius: var(--rayon); box-shadow: 0 12px 30px rgba(0, 0, 0, .08); }
.a-sous-menu:hover > .sous-menu, .a-sous-menu:focus-within > .sous-menu { display: flex; }
.sous-menu a:not(.btn) { display: block; font-weight: 500; }

/* Entre 900 et 1199 px : menu et bouton doivent tenir sur une ligne avec le logo (c'est lui qui cède, sa promesse passe
   à la ligne). Liens plus serrés sous 1200 px, numéro du bouton « Appeler » masqué sous 1100 px (le bouton dit « Appeler »). */
@media (max-width: 1199px) {
  .nav-liens { gap: 0; }
  .nav-liens a:not(.btn) { padding: 10px 8px; }
  .nav-cta { margin-left: 6px; }
}
@media (max-width: 1099px) {
  .nav-numero { display: none; }
}

/* Hamburger (visible sous 900 px) */
.hamburger { display: none; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; background: transparent; color: var(--c-encre); border: 1px solid var(--c-trait); border-radius: var(--rayon); cursor: pointer; }
.hamburger[aria-expanded="true"] { background: var(--c-fond-2); }
.hamburger .icone { width: 24px; height: 24px; }

@media (max-width: 899px) {
  .nav .wrap { min-height: 64px; }
  .nav-liens { display: none; }
  .hamburger { display: flex; }
  .topbar .wrap { justify-content: center; text-align: center; font-size: 12.5px; }
  .topbar .sep { display: none; }
  .topbar-contact { flex-direction: column; gap: 2px; }
}

/* Entre téléphone et grand écran, le menu et le bouton prennent la place : la promesse sous le nom se tait. */
@media (max-width: 1099px) {
  .logo-promesse { display: none; }
}

/* Téléphone : barre collée en haut = une ligne d'infos (le téléphone) + une ligne logo et menu.
   Ville, courriel, horaires et promesse du site restent dans le menu mobile, la page contact et le pied de page. */
@media (max-width: 759px) {
  .topbar-zone, .topbar .horaires, .topbar .sep, .topbar .topbar-avis, .topbar-contact a:not(.tel) { display: none; }
  .logo-promesse { display: none; }
  .logo .logo-image { width: 40px; height: 40px; margin-right: 10px; }
}
/* chiffres · tirets : repères sourcés sans tuiles, barre pointillée verticale en accent, 1 à 4 colonnes (.grille et data-cols-* du socle). */
.sec-chiffres.var-tirets{background:var(--c-fond);padding:40px 0}
.sec-chiffres.var-tirets h2{color:var(--c-encre);font-size:clamp(22px,2.6vw,28px);line-height:1.2;letter-spacing:-.01em;margin:0 0 22px}
.sec-chiffres.var-tirets h2 .segment{color:var(--c-accent-texte)}
.sec-chiffres.var-tirets .chiffres-tirets{list-style:none;margin:0;padding:0;gap:18px 24px}
.sec-chiffres.var-tirets .tiret{min-width:0;display:flex;flex-direction:column;gap:3px;padding:2px 0 2px 14px;border-left:3px dotted var(--c-accent)}
.sec-chiffres.var-tirets .tiret-valeur{color:var(--c-accent-texte);font-family:var(--f-titres);font-size:clamp(28px,3.2vw,36px);line-height:1.05;letter-spacing:-.02em}
.sec-chiffres.var-tirets .tiret-libelle{color:var(--c-texte-2);font-size:14.5px;line-height:1.4}
.sec-chiffres.var-tirets .src{margin:16px 0 0;color:var(--c-texte-2);font-size:13px}
@media (min-width:768px){
  .sec-chiffres.var-tirets{padding:56px 0}
}
/* cta-final · deux-boutons : bande claire, titre, chapeau, deux boutons (appel, devis) ; data-btn-* règle la grille. */
.sec-cta-final.var-deux-boutons{background:var(--c-fond-2);border-top:1px solid var(--c-trait);padding:48px 0;text-align:center}
.sec-cta-final.var-deux-boutons .cta-contenu{max-width:760px;margin:0 auto}
.sec-cta-final.var-deux-boutons h2{color:var(--c-encre);font-size:clamp(24px,3vw,34px);line-height:1.15;letter-spacing:-.015em;margin:0 0 10px}
.sec-cta-final.var-deux-boutons h2 .segment{color:var(--c-accent-texte)}
.sec-cta-final.var-deux-boutons .chapeau{color:var(--c-texte-2);font-size:17px;line-height:1.5;margin:0 auto 24px;max-width:62ch}
.sec-cta-final.var-deux-boutons .boutons{justify-content:center;margin-top:0}
@media (min-width:768px){
  .sec-cta-final.var-deux-boutons{padding:64px 0}
}
/* cta-final · escalier : carte centrée, bandeau accent_vif (phrase « J'ai … »), boutons empilés, numéro en clair, « Une question ? ». */
.sec-cta-final.var-escalier{background:var(--c-fond-2);padding:48px 0}
.sec-cta-final.var-escalier .escalier{max-width:560px;margin:0 auto;background:var(--c-surface);border:1px solid var(--c-trait);border-radius:var(--rayon,8px);box-shadow:var(--ombre,none);overflow:hidden}
.sec-cta-final.var-escalier .escalier-phrase{margin:0;padding:18px 22px;background:var(--c-accent-vif);color:var(--c-encre);font-family:var(--f-titres);font-weight:800;font-size:clamp(20px,2.4vw,24px);line-height:1.2;letter-spacing:-.01em}
.sec-cta-final.var-escalier .escalier-corps{padding:22px}
.sec-cta-final.var-escalier .escalier-boutons{display:grid;grid-template-columns:1fr;gap:10px}
.sec-cta-final.var-escalier .escalier-boutons .btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:48px;width:100%}
.sec-cta-final.var-escalier .escalier-numero{font-family:var(--f-texte);font-weight:400;font-size:13px;letter-spacing:.02em}
.sec-cta-final.var-escalier .escalier-ou{margin:0;text-align:center;color:var(--c-texte-2);font-size:14px}
.sec-cta-final.var-escalier .escalier-question{margin:18px 0 0;text-align:center;color:var(--c-texte-2);font-size:14.5px;line-height:1.5}
.sec-cta-final.var-escalier .escalier-question strong{color:var(--c-texte)}
.sec-cta-final.var-escalier .escalier-question a{display:inline-flex;align-items:center;min-height:48px;max-width:100%;overflow-wrap:anywhere;color:var(--c-accent-texte);font-weight:600}
@media (min-width:768px){
  .sec-cta-final.var-escalier{padding:64px 0}
}
/* cta-final · sombre-trois-coches : bande sur l'encre, titre blanc, trois coches (jeton signal), bouton principal. */
.sec-cta-final.var-sombre-trois-coches{background:var(--c-encre);color:var(--c-texte-sur-sombre);padding:56px 0;text-align:center;--anneau-focus:var(--c-accent-vif)}
.sec-cta-final.var-sombre-trois-coches .cta-contenu{max-width:760px;margin:0 auto}
.sec-cta-final.var-sombre-trois-coches h2{color:#fff;font-size:clamp(26px,3.4vw,38px);line-height:1.15;letter-spacing:-.02em;margin:0 0 20px}
.sec-cta-final.var-sombre-trois-coches h2 .segment{color:var(--c-accent-vif)}
.sec-cta-final.var-sombre-trois-coches .cta-coches{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px}
.sec-cta-final.var-sombre-trois-coches .cta-coches li{display:inline-flex;align-items:center;gap:8px;font-size:16px;text-align:left}
.sec-cta-final.var-sombre-trois-coches .cta-coches svg{width:20px;height:20px;color:var(--c-signal);flex:none}
/* Un seul bouton : une colonne auto, centrée, quel que soit data-btn-pc (2 par défaut, qui le décalerait à gauche). */
.sec-cta-final.var-sombre-trois-coches .boutons{justify-content:center;margin-top:0;grid-template-columns:auto}
@media (min-width:768px){
  .sec-cta-final.var-sombre-trois-coches{padding:72px 0}
}
/* encadre · citation : une phrase encadrée, bordure gauche --c-signal (mention non-RGE). */
.sec-encadre.var-citation { padding: 8px 0 40px; background: var(--c-fond); }
.sec-encadre.var-citation .citation {
  margin: 0;
  padding: 18px 24px;
  border-left: 4px solid var(--c-signal);
  background: var(--c-fond-2);
  border-radius: 0 var(--rayon, 8px) var(--rayon, 8px) 0;
  color: var(--c-texte);
  font-weight: 600;
  line-height: 1.5;
}
/* encadre · trois-cartes : h2 optionnel + cartes {titre, texte, source} sur une grille.
   Colonnes : .grille et data-cols-pc du socle (réglage pc seul, 3 par défaut). Sous 760 px une seule colonne. */
.sec-encadre.var-trois-cartes { padding: 56px 0; background: var(--c-fond); }
.sec-encadre.var-trois-cartes h2 { margin: 0 0 28px; }
.sec-encadre.var-trois-cartes .cartes { gap: 20px; }
.sec-encadre.var-trois-cartes .carte {
  min-width: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-trait);
  border-radius: var(--rayon, 8px);
  box-shadow: var(--ombre, none);
  padding: 24px;
}
.sec-encadre.var-trois-cartes .carte h3 { margin: 0 0 10px; font-size: 1.125rem; color: var(--c-encre); }
.sec-encadre.var-trois-cartes .carte p { margin: 0; color: var(--c-texte); }
.sec-encadre.var-trois-cartes .carte .src { margin-top: 12px; font-size: 0.8125rem; color: var(--c-texte-2); }
/* etapes · colonnes-pictos : cartes numérotées en colonnes.
   Colonnes : .grille et data-cols-pc du socle (réglage pc seul). Sous 760 px une seule colonne. */
.sec-etapes.var-colonnes-pictos {
  padding: 4rem 0;
  background: var(--c-fond);
}
.sec-etapes.var-colonnes-pictos h2 {
  margin: 0 0 0.5rem;
}
.sec-etapes.var-colonnes-pictos .chapeau {
  margin: 0 0 2rem;
  max-width: 60ch;
  color: var(--c-texte-2);
}
.sec-etapes.var-colonnes-pictos .etapes {
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 1.25rem;
}
.sec-etapes.var-colonnes-pictos .etape {
  position: relative;
  min-width: 0;
  padding: 1.5rem 1.25rem 1.25rem;
  background: var(--c-surface);
  border: 1px solid var(--c-trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}
.sec-etapes.var-colonnes-pictos .num {
  display: inline-block;
  margin-bottom: 0.75rem;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-accent);
}
.sec-etapes.var-colonnes-pictos h3 {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
}
.sec-etapes.var-colonnes-pictos .etape p {
  margin: 0;
  color: var(--c-texte-2);
}
.sec-etapes.var-colonnes-pictos .fin {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--c-signal);
  color: var(--c-surface);
}
.sec-etapes.var-colonnes-pictos .fin svg {
  width: 1.125rem;
  height: 1.125rem;
}
/* faq · liste : questions visibles en clair, une colonne par défaut.
   Colonnes : .grille et data-cols-pc du socle (réglage pc seul). Sous 760 px une seule colonne. */
.sec-faq.var-liste {
  padding: 4rem 0;
  background: var(--c-fond-2);
}
.sec-faq.var-liste h2 {
  margin: 0 0 0.5rem;
}
.sec-faq.var-liste .chapeau {
  margin: 0 0 2rem;
  max-width: 60ch;
  color: var(--c-texte-2);
}
.sec-faq.var-liste .faq-liste {
  gap: 1rem;
}
.sec-faq.var-liste .faq-item {
  min-width: 0;
  padding: 1.25rem 1.5rem;
  background: var(--c-surface);
  border: 1px solid var(--c-trait);
  border-left: 4px solid var(--c-accent);
  border-radius: var(--rayon);
}
.sec-faq.var-liste .faq-item h3 {
  margin: 0 0 0.5rem;
  font-size: 1.0625rem;
  color: var(--c-encre);
}
.sec-faq.var-liste .faq-item p {
  margin: 0;
  color: var(--c-texte-2);
}
/* formulaire · duo-reassurance : formulaire (3/5) + aside .reassurance de 3 blocs (2/5) sur PC, empilés sur mobile.
   .form-card, .form-group, .consent-box, .consent-item, .hp et .btn sont stylés par socle.css. */
.sec-formulaire.var-duo-reassurance { padding: 56px 0; background: var(--c-fond-2); }
.sec-formulaire.var-duo-reassurance h2 { margin: 0 0 8px; }
.sec-formulaire.var-duo-reassurance .chapeau { margin: 0 0 28px; color: var(--c-texte-2); }
.sec-formulaire.var-duo-reassurance .form-sub { margin: 0 0 20px; font-size: 0.875rem; color: var(--c-texte-2); }
.sec-formulaire.var-duo-reassurance .req { color: var(--c-accent-texte); }
.sec-formulaire.var-duo-reassurance .duo { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.sec-formulaire.var-duo-reassurance .reassurance { display: grid; gap: 14px; }
.sec-formulaire.var-duo-reassurance .bloc {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px;
  padding: 18px 20px; background: var(--c-surface); border: 1px solid var(--c-trait);
  border-radius: var(--rayon, 8px); box-shadow: var(--ombre, none);
}
.sec-formulaire.var-duo-reassurance .bloc svg { width: 24px; height: 24px; color: var(--c-signal); grid-row: 1 / span 2; }
.sec-formulaire.var-duo-reassurance .bloc h3 { margin: 0 0 4px; font-size: 1rem; color: var(--c-encre); }
.sec-formulaire.var-duo-reassurance .bloc p { margin: 0; font-size: 0.9375rem; color: var(--c-texte-2); }
@media (min-width: 761px) {
  .sec-formulaire.var-duo-reassurance .duo { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .sec-formulaire.var-duo-reassurance .reassurance { position: sticky; top: 96px; }
}
/* formulaire · simple : formulaire seul, colonne étroite centrée.
   .form-card, .form-group, .consent-box, .consent-item, .hp et .btn sont stylés par socle.css. */
.sec-formulaire.var-simple { padding: 56px 0; background: var(--c-fond); }
.sec-formulaire.var-simple .wrap { max-width: 720px; }
.sec-formulaire.var-simple h2 { margin: 0 0 8px; }
.sec-formulaire.var-simple .chapeau { margin: 0 0 28px; color: var(--c-texte-2); }
.sec-formulaire.var-simple .form-sub { margin: 0 0 20px; font-size: 0.875rem; color: var(--c-texte-2); }
.sec-formulaire.var-simple .req { color: var(--c-accent-texte); }
.sec-formulaire.var-simple .btn-principal { width: 100%; }
@media (min-width: 761px) {
  .sec-formulaire.var-simple .btn-principal { width: auto; }
}
/* hero · court-sans-image : bandeau clair, titre, chapeau, un bouton. Pages service, zone, commune, devis, contact, réalisations. */
.sec-hero.var-court-sans-image{background:var(--c-fond-2);color:var(--c-texte);padding:48px 0 40px;text-align:center;border-bottom:1px solid var(--c-trait)}
.sec-hero.var-court-sans-image .hero-contenu{max-width:800px;margin:0 auto}
.sec-hero.var-court-sans-image h1{color:var(--c-encre);font-size:clamp(28px,4vw,42px);line-height:1.12;letter-spacing:-.02em;margin:0 0 12px}
.sec-hero.var-court-sans-image h1 .segment{color:var(--c-accent-texte)}
.sec-hero.var-court-sans-image .chapeau{color:var(--c-texte-2);font-size:clamp(16px,1.8vw,19px);line-height:1.5;max-width:62ch;margin:0 auto 24px}
.sec-hero.var-court-sans-image .hero-boutons{display:flex;justify-content:center}
.sec-hero.var-court-sans-image[data-align="gauche"]{text-align:left}
.sec-hero.var-court-sans-image[data-align="gauche"] .hero-contenu,.sec-hero.var-court-sans-image[data-align="gauche"] .chapeau{margin-left:0}
.sec-hero.var-court-sans-image[data-align="gauche"] .hero-boutons{justify-content:flex-start}
@media (min-width:768px){
  .sec-hero.var-court-sans-image{padding:64px 0 56px}
}
/* hero · promesse-panneau : titre et preuves à gauche, panneau « J'ai … » à droite (situations en liens, boutons empilés,
   numéro en clair sous le bouton d'appel). Photo voilée et masquage data-hide-* comme photo-voilee-centre.
   Voile, .hero-media, h1, .hero-avis et preuves : mêmes règles que photo-voilee-centre.css ; corriger les deux ensemble. */
.sec-hero.var-promesse-panneau{position:relative;overflow:hidden;background:var(--c-encre);color:var(--c-texte-sur-sombre);padding:56px 0 48px;text-align:left;--anneau-focus:var(--c-accent-vif)}
.sec-hero.var-promesse-panneau .hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32}
.sec-hero.var-promesse-panneau::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.55));pointer-events:none}
.sec-hero.var-promesse-panneau .hero-contenu{position:relative;z-index:1;display:grid;gap:28px}
.sec-hero.var-promesse-panneau h1{color:#fff;font-size:clamp(30px,4.6vw,46px);line-height:1.1;letter-spacing:-.02em;margin:0 0 14px}
.sec-hero.var-promesse-panneau h1 .segment{color:var(--c-accent-vif)}
.sec-hero.var-promesse-panneau .chapeau{color:var(--c-texte-sur-sombre);font-size:clamp(17px,2vw,19px);line-height:1.5;max-width:56ch;margin:0 0 22px}
.sec-hero.var-promesse-panneau .hero-avis{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px 10px;min-height:48px;margin:0 0 18px;color:var(--c-texte-sur-sombre);text-decoration:none;font-size:16px}
.sec-hero.var-promesse-panneau .hero-avis .etoile{width:22px;height:22px}
.sec-hero.var-promesse-panneau .hero-avis strong,.sec-hero.var-promesse-panneau .hero-avis data{color:#fff;font-weight:700}
.sec-hero.var-promesse-panneau .hero-avis:hover .hero-avis-texte,.sec-hero.var-promesse-panneau .hero-avis:focus-visible .hero-avis-texte{text-decoration:underline}
.sec-hero.var-promesse-panneau .hero-preuves{list-style:none;display:flex;flex-wrap:wrap;gap:10px 24px;margin:0;padding:0}
.sec-hero.var-promesse-panneau .hero-preuves li{display:inline-flex;align-items:center;gap:8px;font-size:15px}
.sec-hero.var-promesse-panneau .hero-preuves svg{width:18px;height:18px;color:var(--c-accent-vif);flex:none}
.sec-hero.var-promesse-panneau .hero-preuves data{font-weight:700;color:#fff}
.sec-hero.var-promesse-panneau .hero-panneau{background:var(--c-surface);color:var(--c-texte);border-radius:var(--rayon,8px);box-shadow:var(--ombre,none);overflow:hidden;align-self:start;--anneau-focus:var(--c-accent-texte)}
.sec-hero.var-promesse-panneau .panneau-titre{margin:0;padding:18px 22px;background:var(--c-encre-2);color:#fff;font-family:var(--f-titres);font-weight:800;font-size:clamp(18px,2vw,21px);line-height:1.25;letter-spacing:-.01em}
.sec-hero.var-promesse-panneau .panneau-situations{list-style:none;margin:0;padding:8px 10px 0}
.sec-hero.var-promesse-panneau .panneau-situations a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:10px 12px;border-radius:calc(var(--rayon,8px) - 2px);color:var(--c-texte);font-weight:600;text-decoration:none}
.sec-hero.var-promesse-panneau .panneau-situations a:hover,.sec-hero.var-promesse-panneau .panneau-situations a:focus-visible{background:var(--c-fond-2);color:var(--c-accent-texte)}
.sec-hero.var-promesse-panneau .panneau-situations svg{width:18px;height:18px;flex:none;color:var(--c-accent-texte)}
.sec-hero.var-promesse-panneau .panneau-boutons{display:grid;grid-template-columns:1fr;gap:10px;padding:14px 22px 22px}
.sec-hero.var-promesse-panneau .panneau-boutons .btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:48px;width:100%}
.sec-hero.var-promesse-panneau .panneau-numero{font-family:var(--f-texte);font-weight:400;font-size:13px;letter-spacing:.02em}
@media (min-width:900px){
  .sec-hero.var-promesse-panneau{padding:88px 0 72px}
  .sec-hero.var-promesse-panneau .hero-contenu:has(.hero-panneau){grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
}
/* offres · cartes-image : cartes de services avec image (manifeste) ou icône, titre lié, résumé, lien fléché.
   Colonnes : .grille et data-cols-* du socle. L'image ne pose aucun display : data-hide-* du socle doit rester maître. */
.sec-offres.var-cartes-image{background:var(--c-fond);padding:48px 0}
.sec-offres.var-cartes-image h2{color:var(--c-encre);font-size:clamp(24px,3vw,34px);line-height:1.15;letter-spacing:-.015em;margin:0 0 8px}
.sec-offres.var-cartes-image h2 .segment{color:var(--c-accent-texte)}
.sec-offres.var-cartes-image .chapeau{color:var(--c-texte-2);font-size:17px;line-height:1.5;max-width:62ch;margin:0 0 24px}
.sec-offres.var-cartes-image .offres-grille{gap:18px;margin-top:16px}
.sec-offres.var-cartes-image .carte.offre{background:var(--c-surface);border:1px solid var(--c-trait);border-radius:var(--rayon,8px);box-shadow:var(--ombre,none);overflow:hidden;display:flex;flex-direction:column}
.sec-offres.var-cartes-image .offre-image{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.sec-offres.var-cartes-image .offre-icone{display:grid;place-items:center;width:56px;height:56px;margin:22px 22px 0;border-radius:50%;background:var(--c-fond-2);color:var(--c-accent-texte)}
.sec-offres.var-cartes-image .offre-icone svg{width:28px;height:28px}
.sec-offres.var-cartes-image .carte.offre h3{margin:18px 22px 8px;font-size:20px;line-height:1.25}
.sec-offres.var-cartes-image .carte.offre h3 a{color:var(--c-encre);text-decoration:none}
.sec-offres.var-cartes-image .carte.offre h3 a:hover,.sec-offres.var-cartes-image .carte.offre h3 a:focus-visible{color:var(--c-accent-texte);text-decoration:underline}
.sec-offres.var-cartes-image .carte.offre p{margin:0 22px;color:var(--c-texte-2);line-height:1.5;flex:1}
.sec-offres.var-cartes-image .lien-fleche{display:inline-flex;align-items:center;gap:6px;margin:16px 22px 22px;color:var(--c-accent-texte);font-weight:600;text-decoration:none}
.sec-offres.var-cartes-image .lien-fleche svg{width:16px;height:16px;transition:transform .15s}
.sec-offres.var-cartes-image .lien-fleche:hover svg,.sec-offres.var-cartes-image .lien-fleche:focus-visible svg{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){
  .sec-offres.var-cartes-image .lien-fleche svg{transition:none}
}
@media (min-width:768px){
  .sec-offres.var-cartes-image{padding:64px 0}
}
/* pied-de-page · quatre-colonnes : identité, services, zone, contact + légal ; ligne du bas © · SIREN ; astérisques. */
.sec-pied-de-page { background: var(--c-encre); color: var(--c-texte-sur-sombre); --anneau-focus: var(--c-accent-vif); }
/* Remise à zéro du chrome générique du socle (.sec, footer) : le fond, le filet et les marges sont portés ici, une seule fois. */
.sec.sec-pied-de-page { padding: 0; }
footer.pied { padding: 0; border-top: 0; background: none; }
.pied .wrap { padding-top: 56px; padding-bottom: 28px; }
.pied-grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
.pied-nom { font-family: var(--f-titres); font-weight: 800; font-size: 22px; color: #ffffff; margin: 0 0 12px; }
.pied-honnete { font-size: 14px; line-height: 1.7; margin: 0 0 14px; }
.pied-adresse { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; margin: 0; }
.pied-adresse .icone { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.pied-titre { font-family: var(--f-texte); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--c-accent-vif); margin: 0 0 14px; }
.pied-col p { margin: 0 0 10px; font-size: 14.5px; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pied a { color: var(--c-texte-sur-sombre); text-decoration: none; font-size: 14.5px; display: inline-flex; align-items: center; gap: 6px; }
.pied a:hover, .pied a:focus-visible { color: var(--c-accent-vif); }
.pied a .icone { width: 16px; height: 16px; }
.pied-communes { display: flex !important; flex-wrap: wrap; gap: 6px 14px !important; margin-top: 6px !important; }
.pied-communes a { font-size: 13.5px; }
.pied-legal { margin-top: 18px !important; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12); }
.pied-legal a { font-size: 13px; }
.pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 13px; }
.asterisques { margin-top: 14px; font-size: 12.5px; opacity: .85; }
.asterisques p { margin: 0 0 6px; }
@media (max-width: 899px) { .pied-grille { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 599px) { .pied-grille { grid-template-columns: 1fr; } .pied-bas { flex-direction: column; text-align: center; } }
/* qui-sommes-nous · texte-photo : texte à gauche, photo à droite sur PC ; empilés sur mobile.
   La photo ne pose aucun display : [data-hide-pc] / [data-hide-mobile] du socle doivent rester maîtres. */
.sec-qui-sommes-nous.var-texte-photo {
  padding: 4rem 0;
  background: var(--c-fond-2);
}
.sec-qui-sommes-nous.var-texte-photo .qsn {
  display: grid;
  gap: 2rem;
  align-items: center;
}
.sec-qui-sommes-nous.var-texte-photo .qsn > * {
  min-width: 0;
}
.sec-qui-sommes-nous.var-texte-photo h2 {
  margin: 0 0 1rem;
}
.sec-qui-sommes-nous.var-texte-photo .qsn-texte p {
  margin: 0 0 0.75rem;
  max-width: 60ch;
  color: var(--c-texte-2);
}
.sec-qui-sommes-nous.var-texte-photo .identite {
  display: block;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--c-encre);
}
.sec-qui-sommes-nous.var-texte-photo .qsn-photo {
  margin: 0;
}
.sec-qui-sommes-nous.var-texte-photo .qsn-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}
.sec-qui-sommes-nous.var-texte-photo[data-align="centre"] .qsn-texte p {
  margin-inline: auto;
}
@media (min-width: 761px) {
  .sec-qui-sommes-nous.var-texte-photo .qsn {
    grid-template-columns: 3fr 2fr;
    gap: 3rem;
  }
}
/* realisations · trois-cartes : cartes photo (ou aplat) en grille.
   Colonnes : .grille et data-cols-* du socle (3 sur PC, 1 sur mobile par défaut). */
.sec-realisations.var-trois-cartes {
  padding: 4rem 0;
  background: var(--c-fond);
}
.sec-realisations.var-trois-cartes h2 {
  margin: 0 0 0.5rem;
}
.sec-realisations.var-trois-cartes .chapeau {
  margin: 0 0 2rem;
  max-width: 60ch;
  color: var(--c-texte-2);
}
.sec-realisations.var-trois-cartes .cartes {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  gap: 1.5rem;
}
.sec-realisations.var-trois-cartes .carte-rea {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--c-surface);
  border: 1px solid var(--c-trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}
.sec-realisations.var-trois-cartes .rea-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.sec-realisations.var-trois-cartes .rea-aplat {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  background: var(--c-fond-2);
  color: var(--c-accent);
}
.sec-realisations.var-trois-cartes .rea-aplat svg {
  width: 3rem;
  height: 3rem;
}
.sec-realisations.var-trois-cartes .rea-corps {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
}
.sec-realisations.var-trois-cartes h3 {
  margin: 0;
  font-size: 1.125rem;
}
.sec-realisations.var-trois-cartes .rea-meta {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  font-size: 0.9375rem;
  color: var(--c-texte-2);
}
.sec-realisations.var-trois-cartes .rea-meta svg {
  flex: none;
  width: 1rem;
  height: 1rem;
}
.sec-realisations.var-trois-cartes .rea-offre {
  align-self: flex-start;
  margin-top: auto;
  font-weight: 600;
  color: var(--c-accent-texte);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.sec-realisations.var-trois-cartes a.rea-offre:hover,
.sec-realisations.var-trois-cartes a.rea-offre:focus-visible {
  color: var(--c-encre);
}
.sec-realisations.var-trois-cartes .rea-suite {
  margin: 2rem 0 0;
  text-align: center;
}
/* situations · boutons : grands boutons « je… » vers devis-<id>.html, 1 à 4 colonnes : .grille et data-cols-* du socle. */
.sec-situations.var-boutons{background:var(--c-fond);padding:40px 0 56px}
.sec-situations.var-boutons h2{color:var(--c-encre);font-size:clamp(22px,2.6vw,28px);line-height:1.2;letter-spacing:-.01em;margin:0 0 8px}
.sec-situations.var-boutons h2 .segment{color:var(--c-accent-texte)}
.sec-situations.var-boutons .chapeau{color:var(--c-texte-2);font-size:17px;line-height:1.5;max-width:62ch;margin:0 0 24px}
.sec-situations.var-boutons .situations-boutons{gap:12px}
.sec-situations.var-boutons .situations-boutons .btn{min-height:64px;font-size:17px;justify-content:center;text-align:center;white-space:normal;padding:14px 20px}
@media (min-width:768px){
  .sec-situations.var-boutons{padding:56px 0 72px}
}
/* situations · trois-cartes : cartes « je… » cliquables en entier (le lien du h3 couvre la carte), vers devis-<id>.html.
   Colonnes : .grille et data-cols-* du socle. */
.sec-situations.var-trois-cartes{background:var(--c-fond-2);padding:48px 0}
.sec-situations.var-trois-cartes h2{color:var(--c-encre);font-size:clamp(24px,3vw,34px);line-height:1.15;letter-spacing:-.015em;margin:0 0 8px}
.sec-situations.var-trois-cartes h2 .segment{color:var(--c-accent-texte)}
.sec-situations.var-trois-cartes .chapeau{color:var(--c-texte-2);font-size:17px;line-height:1.5;max-width:62ch;margin:0 0 24px}
.sec-situations.var-trois-cartes .situations-grille{gap:14px}
.sec-situations.var-trois-cartes .carte.situation{position:relative;background:var(--c-surface);border:1px solid var(--c-trait);border-radius:var(--rayon,8px);box-shadow:var(--ombre,none);padding:22px 64px 22px 22px;display:flex;flex-direction:column;gap:6px}
.sec-situations.var-trois-cartes .carte.situation h3{margin:0;font-size:19px;line-height:1.25}
.sec-situations.var-trois-cartes .carte.situation h3 a{color:var(--c-encre);text-decoration:none}
.sec-situations.var-trois-cartes .carte.situation h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.sec-situations.var-trois-cartes .carte.situation p{margin:0;color:var(--c-texte-2);font-size:14.5px}
.sec-situations.var-trois-cartes .situation-fleche{position:absolute;right:18px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;background:var(--c-fond-2);color:var(--c-accent-texte);display:grid;place-items:center}
.sec-situations.var-trois-cartes .situation-fleche svg{width:18px;height:18px}
.sec-situations.var-trois-cartes .carte.situation:hover,.sec-situations.var-trois-cartes .carte.situation:focus-within{border-color:var(--c-accent)}
.sec-situations.var-trois-cartes .carte.situation:hover .situation-fleche,.sec-situations.var-trois-cartes .carte.situation:focus-within .situation-fleche{background:var(--c-encre);color:var(--c-texte-sur-sombre)}
@media (min-width:768px){
  .sec-situations.var-trois-cartes{padding:64px 0}
}
/* tarifs · tableau : tableau à trois colonnes dans un cadre, défilement horizontal sur petit écran */
.sec-tarifs.var-tableau {
  padding: 4rem 0;
  background: var(--c-fond);
}
.sec-tarifs.var-tableau h2 {
  margin: 0 0 0.5rem;
}
.sec-tarifs.var-tableau .chapeau {
  margin: 0 0 2rem;
  max-width: 60ch;
  color: var(--c-texte-2);
}
.sec-tarifs.var-tableau .tableau-defil {
  overflow-x: auto;
  background: var(--c-surface);
  border: 1px solid var(--c-trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}
.sec-tarifs.var-tableau table.tarifs {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
}
.sec-tarifs.var-tableau th,
.sec-tarifs.var-tableau td {
  padding: 0.875rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--c-trait);
}
.sec-tarifs.var-tableau thead th {
  background: var(--c-fond-2);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-texte-2);
}
.sec-tarifs.var-tableau tbody th {
  font-weight: 600;
  color: var(--c-encre);
}
.sec-tarifs.var-tableau tbody tr:last-child th,
.sec-tarifs.var-tableau tbody tr:last-child td {
  border-bottom: 0;
}
.sec-tarifs.var-tableau td {
  color: var(--c-texte-2);
}
.sec-tarifs.var-tableau .fourchette data {
  font-weight: 700;
  white-space: nowrap;
  color: var(--c-accent-texte);
}
.sec-tarifs.var-tableau .src {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  color: var(--c-texte-2);
}
/* texte-riche · unique : colonne de lecture étroite pour les pages légales et d'état. */
.sec-texte-riche .wrap-etroit { max-width: 760px; padding-top: 48px; padding-bottom: 64px; }
.sec-texte-riche h1 { font-family: var(--f-titres); font-size: clamp(30px, 4vw, 42px); line-height: 1.15; letter-spacing: -.01em; margin: 0 0 16px; color: var(--c-encre); }
.sec-texte-riche .chapeau { font-size: 19px; line-height: 1.5; color: var(--c-texte-2); margin: 0 0 28px; }
.sec-texte-riche h2 { font-family: var(--f-titres); font-size: 22px; margin: 32px 0 10px; color: var(--c-encre); }
.sec-texte-riche h3 { font-family: var(--f-titres); font-size: 18px; margin: 24px 0 8px; color: var(--c-encre); }
.sec-texte-riche p { line-height: 1.7; margin: 0 0 14px; }
.sec-texte-riche .liens { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.sec-texte-riche .mise-a-jour { margin-top: 36px; padding-top: 14px; border-top: 1px solid var(--c-trait); font-size: 13.5px; color: var(--c-texte-2); }
.sec-texte-riche .raison { margin: 0 0 20px; padding-left: 14px; border-left: 3px solid var(--c-signal); font-weight: 600; color: var(--c-texte); }
/* transparence · encart : carte « Qui vous répond » : portrait rond ou initiales, nom, horaires sourcés, bouton d'appel, lien. */
.sec-transparence.var-encart{background:var(--c-surface);border-top:1px solid var(--c-trait);padding:32px 0}
.sec-transparence.var-encart .encart{display:grid;grid-template-columns:72px 1fr;gap:18px;align-items:start;max-width:760px;margin:0 auto}
.sec-transparence.var-encart .encart-visage{width:72px;height:72px}
.sec-transparence.var-encart .encart-portrait{width:72px;height:72px;border-radius:50%;object-fit:cover;display:block;border:2px solid var(--c-trait)}
.sec-transparence.var-encart .encart-initiales{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:var(--c-accent-vif);color:var(--c-encre);font-family:var(--f-titres);font-weight:800;font-size:24px;letter-spacing:.02em}
.sec-transparence.var-encart h2{margin:0 0 4px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c-texte-2)}
.sec-transparence.var-encart h2 .segment{color:inherit}
.sec-transparence.var-encart .encart-nom{margin:0 0 4px;color:var(--c-texte);font-family:var(--f-titres);font-weight:800;font-size:20px;line-height:1.2;letter-spacing:-.01em}
.sec-transparence.var-encart .encart-role{margin:0 0 14px;color:var(--c-texte);font-size:16px;line-height:1.55}
.sec-transparence.var-encart .encart-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.sec-transparence.var-encart .encart-actions .btn{display:inline-flex;align-items:center;gap:8px;min-height:48px}
.sec-transparence.var-encart .encart-numero{font-family:var(--f-texte);font-weight:400;font-size:13px;letter-spacing:.02em}
.sec-transparence.var-encart .lien-fleche{display:inline-flex;align-items:center;gap:6px;min-height:48px;color:var(--c-accent-texte);font-weight:600;text-decoration:none}
.sec-transparence.var-encart .lien-fleche svg{width:16px;height:16px}
.sec-transparence.var-encart .lien-fleche:hover,.sec-transparence.var-encart .lien-fleche:focus-visible{text-decoration:underline}
@media (min-width:768px){
  .sec-transparence.var-encart .encart{gap:24px;align-items:center}
}
/* zone · carte-puces : texte des cercles à gauche, SVG de cercles concentriques à droite (décoratif).
   Colonnes (réglage pc seul) : sur PC, les communes d'un cercle se répartissent sur --cols-pc colonnes
   (variable posée par le socle depuis data-cols-pc) ; sur mobile, et avec 1 colonne, pastilles à la suite. */
.sec-zone.var-carte-puces { padding: 56px 0; background: var(--c-fond-2); }
.sec-zone.var-carte-puces .zone-grille { display: grid; gap: 32px; align-items: center; grid-template-columns: minmax(0, 1fr); }
.sec-zone.var-carte-puces h2 { margin: 0 0 12px; }
.sec-zone.var-carte-puces .chapeau { margin: 0 0 24px; color: var(--c-texte-2); }
.sec-zone.var-carte-puces .cercle + .cercle { margin-top: 24px; }
.sec-zone.var-carte-puces .cercle h3 {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 0 0 10px; font-size: 1.0625rem; color: var(--c-encre);
}
.sec-zone.var-carte-puces .cercle h3 small { font-weight: 400; font-size: 0.9375rem; color: var(--c-texte-2); }
.sec-zone.var-carte-puces .puce { width: 12px; height: 12px; border-radius: 50%; background: var(--c-accent); flex: none; }
.sec-zone.var-carte-puces .puce-2 { background: var(--c-accent-vif); }
.sec-zone.var-carte-puces .puce-3 { background: var(--c-signal); }
.sec-zone.var-carte-puces .communes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sec-zone.var-carte-puces .communes li { min-width: 0; }
.sec-zone.var-carte-puces .communes a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px;
  border-radius: 999px; background: var(--c-surface); border: 1px solid var(--c-trait);
  color: var(--c-accent-texte); font-weight: 600; text-decoration: none;
}
.sec-zone.var-carte-puces .communes a:hover,
.sec-zone.var-carte-puces .communes a:focus-visible { border-color: var(--c-accent); text-decoration: underline; }
.sec-zone.var-carte-puces .zone-cercles { display: block; width: min(100%, 260px); height: auto; margin: 0 auto; }
.sec-zone.var-carte-puces .zone-cercles .anneau { fill: none; stroke: var(--c-accent); stroke-width: 1.75; stroke-dasharray: 4 6; }
.sec-zone.var-carte-puces .zone-cercles .anneau-1 { stroke-dasharray: none; }
.sec-zone.var-carte-puces .zone-cercles .centre { fill: var(--c-encre); }
@media (min-width: 761px) {
  .sec-zone.var-carte-puces .zone-grille { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .sec-zone.var-carte-puces .zone-cercles { width: min(100%, 320px); }
  .sec-zone.var-carte-puces:not([data-cols-pc="1"]) .communes { display: grid; grid-template-columns: repeat(var(--cols-pc, 3), minmax(0, 1fr)); }
}
/* zone · liste-par-distance : intro, liste nom (en lien quand la commune a une page) + temps de route (<data>), phrase du cercle 2.
   Colonnes : .grille et data-cols-pc du socle (réglage pc seul, 3 par défaut). Sous 760 px une seule colonne. */
.sec-zone.var-liste-par-distance { padding: 48px 0; background: var(--c-fond); }
.sec-zone.var-liste-par-distance h2 { margin: 0 0 12px; }
.sec-zone.var-liste-par-distance .intro { margin: 0 0 20px; color: var(--c-texte-2); }
.sec-zone.var-liste-par-distance .distances { list-style: none; margin: 0 0 24px; padding: 0; gap: 0 32px; }
.sec-zone.var-liste-par-distance .distances li {
  display: flex; justify-content: space-between; gap: 12px; min-width: 0;
  padding: 10px 0; border-bottom: 1px solid var(--c-trait);
}
.sec-zone.var-liste-par-distance .distances .nom { color: var(--c-texte); font-weight: 600; }
.sec-zone.var-liste-par-distance .distances .nom a { color: var(--c-accent-texte); text-decoration: underline; text-underline-offset: 3px; }
.sec-zone.var-liste-par-distance .distances .nom a:hover,
.sec-zone.var-liste-par-distance .distances .nom a:focus-visible { color: var(--c-texte); }
.sec-zone.var-liste-par-distance .distances .temps { color: var(--c-texte-2); white-space: nowrap; }
.sec-zone.var-liste-par-distance .distances data { font-variant-numeric: tabular-nums; }
.sec-zone.var-liste-par-distance .cercle-2 {
  margin: 0; padding: 16px 20px;
  background: var(--c-fond-2); border-radius: var(--rayon, 8px); color: var(--c-texte);
}
.sec-zone.var-liste-par-distance .cercle-2 a { color: var(--c-accent-texte); font-weight: 600; }