/* ==========================================================================
   LCC Espaces Verts, feuille de style commune
   Palette 5 valeurs, formes arrondies généreuses, serif Bitter + sans Inter
   ========================================================================== */

/* L'attribut hidden doit l'emporter sur les display des composants,
   sinon un li en flex ou une carte en grid resterait visible. */
[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   1. Variables

   Direction artistique : un arboriste, pas un jardinier. Le métier est
   vertical, technique et risqué. La page doit donc respirer la maîtrise,
   pas la douceur végétale. D'où le vert profond en fond des moments forts,
   l'ambre chaud emprunté à l'écorce comme seul accent, et les libellés
   techniques en chasse fixe, comme sur une fiche de chantier.
   -------------------------------------------------------------------------- */
:root {
  /* Socle de marque, inchangé */
  --sable: #F7F6F1;
  --blanc: #FFFFFF;
  --sapin: #14311F;
  --mousse: #5C8A3C;
  --ecorce: #7A5537;

  /* Fonds profonds. Le sapin seul ne suffisait pas : sans un ton plus
     sombre en dessous, impossible de poser une surface sur une autre. */
  --nuit: #0A1A11;
  --sapin-clair: #1D4429;
  --sapin-surface: #21492E;

  /* Verts de travail. Le mousse d'origine vibrait sur le sable, il est
     assombri pour le texte et les aplats, éclairci pour le fond sombre. */
  --mousse-profond: #47702F;
  --mousse-vif: #7FB255;
  --mousse-voile: #EDF2E6;
  --mousse-brume: #DDE8D2;

  /* Ambre, unique accent chaud. Tiré de l'écorce, il casse le tout vert
     et sert les libellés techniques, les états et les seconds recours. */
  --ambre: #C07A33;
  /* Variante assombrie, réservée au texte sur fond clair. L'ambre de base
     ne donne que 3,46 de contraste sur blanc, sous le seuil de 4,5. Celle-ci
     tient 5,3 sur blanc et 4,8 sur le sable. */
  --ambre-texte: #9A5C24;
  --ambre-vif: #DD9A4E;
  --ambre-voile: #F4E4D1;
  --ambre-nuit: rgba(192, 122, 51, 0.16);

  /* Encres */
  --encre: #16241B;
  --encre-douce: #55635A;
  --encre-tenue: #7C8880;

  /* Surfaces claires, trois niveaux pour éviter le blanc partout */
  --surface: #FFFFFF;
  --surface-creuse: #F2F1EA;
  --surface-tiede: #F6F1E9;

  /* Traits */
  --trait: #E3E0D6;
  --trait-fort: #D2CEC0;
  --trait-net: #C3BFAF;

  /* Sur fond sombre */
  --sur-sapin: #E8EDE6;
  --sur-sapin-doux: rgba(232, 237, 230, 0.70);
  --sur-sapin-tenu: rgba(232, 237, 230, 0.45);
  --sapin-ligne: rgba(232, 237, 230, 0.16);
  --sapin-ligne-forte: rgba(232, 237, 230, 0.30);

  /* Typographie. La pile système donne le rendu SF Pro sur Apple, Segoe
     sur Windows. Une police de moins à télécharger que l'ancien Inter. */
  --police-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
               system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --police-titre: "Bitter", Georgia, "Times New Roman", serif;
  --police-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo,
                 "Cascadia Mono", "Roboto Mono", monospace;

  /* Échelle typographique fluide */
  --t-geant: clamp(2.35rem, 4.4vw, 3.55rem);
  --t-display: clamp(2.3rem, 5vw, 3.9rem);
  --t-h2: clamp(1.8rem, 3.3vw, 2.7rem);
  --t-h3: clamp(1.12rem, 1.7vw, 1.42rem);
  --t-chapeau: clamp(1.05rem, 1.5vw, 1.24rem);
  --t-corps: 1rem;
  --t-petit: 0.875rem;
  --t-label: 0.75rem;

  /* Interlettrage. Les grandes tailles se resserrent, les petits
     libellés s'écartent. C'est ce qui sépare une vraie composition
     d'un simple choix de police. */
  --ls-geant: -0.035em;
  --ls-display: -0.025em;
  --ls-h2: -0.015em;
  --ls-label: 0.1em;

  /* Espacement */
  --e1: 4px;  --e2: 8px;  --e3: 14px; --e4: 22px;
  --e5: 34px; --e6: 52px; --e7: 76px; --e8: 108px;

  /* Rayons pensés par intention. La photo reste presque vive, le panneau
     s'arrondit peu, seul le bouton garde la pilule pleine, qui est la
     vraie signature de la marque. */
  --r-photo: 4px;
  --r-champ: 12px;
  --r-carte: 16px;
  --r-panneau: 26px;
  --r-pill: 999px;

  /* Ombres. Une portée large et douce, une plus courte pour le survol. */
  --ombre: 0 18px 44px -26px rgba(10, 26, 17, 0.34);
  --ombre-flottante: 0 26px 58px -28px rgba(10, 26, 17, 0.48);
  --ombre-nette: 0 2px 10px -4px rgba(10, 26, 17, 0.22);

  /* Rythme */
  --largeur: 1200px;
  --largeur-etroite: 700px;
  --largeur-large: 1380px;
  --gouttiere: 20px;
  --section-y: 68px;

  --transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-lente: 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (min-width: 768px) {
  :root { --gouttiere: 32px; --section-y: 96px; }
}
@media (min-width: 1100px) {
  :root { --section-y: 118px; }
}

/* --------------------------------------------------------------------------
   2. Réinitialisation
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 96px;
}

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

body {
  margin: 0;
  background: var(--sable);
  color: var(--encre);
  font-family: var(--police-ui);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* Les titres sont en serif, mais leur poids vient surtout du resserrement
   de l'interlettrage aux grandes tailles. Un titre large et lâche paraît
   toujours mou, quelle que soit la police. */
h1, h2, h3, h4 {
  font-family: var(--police-titre);
  font-weight: 600;
  line-height: 1.1;
  color: var(--sapin);
  margin: 0 0 0.5em;
  text-transform: none;
  text-wrap: balance;
}

h1 { font-size: var(--t-display); letter-spacing: var(--ls-display); }
h2 { font-size: var(--t-h2); letter-spacing: var(--ls-h2); line-height: 1.14; }
h3 { font-size: var(--t-h3); letter-spacing: -0.008em; line-height: 1.28; }
h4 { font-size: 1.02rem; line-height: 1.35; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

/* Une colonne de texte trop large fatigue. Les paragraphes courants sont
   bornés, ceux qui doivent occuper une grille s'en affranchissent. */
p, li { max-width: 68ch; }
.sans-mesure p, .sans-mesure li, td p, th p { max-width: none; }

a { color: var(--mousse-profond); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--sapin); }

ul, ol { margin: 0 0 1.05em; padding-left: 1.2em; }
li { margin-bottom: 0.38em; }

strong { font-weight: 600; }

/* Chiffres alignés et de largeur fixe partout où ils comptent, sinon les
   colonnes de mesures dansent d'une ligne à l'autre. */
.chiffre, .mesure, table td, table th {
  font-variant-numeric: tabular-nums;
}

/* Libellé technique. C'est la signature typographique du site : la chasse
   fixe évoque la fiche de chantier plutôt que la page marketing. */
.tech {
  font-family: var(--police-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  color: var(--ambre-texte);
  font-weight: 500;
}
.section--sapin .tech, .heros .tech, .bande-immersive .tech { color: var(--ambre-vif); }

:focus-visible {
  outline: 2px solid var(--ambre);
  outline-offset: 3px;
  border-radius: 4px;
}
.section--sapin :focus-visible,
.premier-ecran :focus-visible { outline-color: var(--ambre-vif); }

/* --------------------------------------------------------------------------
   3. Structure
   -------------------------------------------------------------------------- */
.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.conteneur--etroit { max-width: 800px; }
.conteneur--moyen { max-width: 980px; }

.section { padding-block: var(--section-y); }
.section--sable { background: var(--sable); }
.section--blanc { background: var(--blanc); }
/* Quatrième surface, sable chaud. Sans elle le site n'alternait qu'entre
   blanc, sable et sapin, et deux blocs sombres finissaient collés. */
.section--tiede { background: var(--surface-tiede); }
.section--sapin { background: var(--sapin); color: var(--sur-sapin); }
.section--sapin h2,
.section--sapin h3 { color: var(--blanc); }
.section--sapin a { color: var(--blanc); }
/* Le bouton clair garde son texte vert sur son fond blanc,
   sinon la règle ci-dessus le rendrait illisible. */
.section--sapin a.bouton--clair,
.section--sapin a.bouton--clair:hover { color: var(--sapin); }

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--sapin);
  color: var(--blanc);
  padding: 12px 22px;
  border-radius: var(--r-pill);
  z-index: 200;
}
.saut-contenu:focus { left: 16px; top: 16px; }

/* --------------------------------------------------------------------------
   4. Titres de section et filet de signature
   -------------------------------------------------------------------------- */
.entete-section { margin-bottom: 40px; max-width: 720px; }
.entete-section--centre { margin-inline: auto; text-align: center; }
.entete-section--centre .filet { justify-content: center; }

/* Le surtitre passe en chasse fixe. C'est le détail qui fait basculer la
   page du registre marketing vers celui de la fiche technique, et il se
   reconnaît d'une section à l'autre sans jamais crier. */
.surtitre {
  display: block;
  font-family: var(--police-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  color: var(--ecorce);
  margin-bottom: 18px;
}
.section--sapin .surtitre { color: var(--ambre-vif); }

/* Filet de séparation. L'ancien mêlait un trait et une pastille pleine,
   trop décoratif pour ce que ça disait. Un trait dégradé suffit. */
.filet {
  display: flex;
  align-items: center;
  margin-top: 18px;
  margin-bottom: 22px;
}
.filet::before {
  content: "";
  width: 76px;
  height: 2px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--mousse), var(--ambre));
}
.section--sapin .filet::before {
  background: linear-gradient(90deg, var(--mousse-vif), var(--ambre-vif));
}

.intro-section { color: var(--encre-douce); font-size: 1.05rem; }
.section--sapin .intro-section { color: var(--sur-sapin-doux); }

/* --------------------------------------------------------------------------
   5. Boutons et étiquettes, tous en pilule complète
   -------------------------------------------------------------------------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 590;
  letter-spacing: -0.005em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition),
              box-shadow var(--transition);
}
.bouton:hover { transform: translateY(-2px); }
.bouton:active { transform: translateY(0); transition-duration: 60ms; }

/* Recours principal. Le vert d'origine vibrait sur le sable, il est
   assombri, et l'ombre portée reprend sa teinte plutôt qu'un gris. */
.bouton--mousse {
  background: var(--mousse-profond);
  color: var(--blanc);
  box-shadow: 0 10px 22px -14px rgba(71, 112, 47, 0.9);
}
.bouton--mousse:hover {
  background: var(--sapin);
  color: var(--blanc);
  box-shadow: 0 16px 30px -16px rgba(20, 49, 31, 0.75);
}

.bouton--contour {
  background: transparent;
  border-color: var(--trait-net);
  color: var(--sapin);
}
.bouton--contour:hover { background: var(--sapin); border-color: var(--sapin); color: var(--blanc); }

/* Recours secondaire chaud, pour les intentions qui ne sont pas le devis :
   voir un chantier, vérifier une commune, être rappelé. */
.bouton--ambre {
  background: var(--ambre);
  color: var(--blanc);
  box-shadow: 0 10px 22px -14px rgba(192, 122, 51, 0.9);
}
.bouton--ambre:hover { background: #A9682A; color: var(--blanc); }

.bouton--clair { background: var(--blanc); color: var(--sapin); }
.bouton--clair:hover { background: var(--ambre-voile); color: var(--sapin); }

.bouton--contour-clair {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--sapin-ligne-forte);
  color: var(--sur-sapin);
}
.bouton--contour-clair:hover { background: var(--blanc); border-color: var(--blanc); color: var(--sapin); }

/* Lien fléché. Tout n'a pas à être un bouton plein : sur une carte ou en
   fin de paragraphe, un lien qui avance suffit et allège la page. */
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 590;
  font-size: 0.96rem;
  text-decoration: none;
  color: var(--mousse-profond);
}
.lien-fleche::after {
  content: "";
  width: 16px;
  height: 8px;
  background: currentColor;
  clip-path: polygon(0 42%, 62% 42%, 62% 0, 100% 50%, 62% 100%, 62% 58%, 0 58%);
  transition: transform var(--transition);
}
.lien-fleche:hover { color: var(--sapin); }
.lien-fleche:hover::after { transform: translateX(4px); }
.section--sapin .lien-fleche { color: var(--mousse-vif); }
.section--sapin .lien-fleche:hover { color: var(--blanc); }

.bouton--petit { padding: 11px 21px; font-size: 0.93rem; }
.bouton--large { width: 100%; }

.groupe-boutons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

/* Étiquettes pilule */
.etiquette {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  background: var(--mousse-voile);
  color: var(--mousse-profond);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition);
}
a.etiquette:hover { background: var(--mousse); color: var(--blanc); }

.etiquette--blanche {
  background: var(--blanc);
  color: var(--sapin);
  box-shadow: var(--ombre);
}
.etiquette--contour {
  background: transparent;
  border-color: var(--trait-fort);
  color: var(--encre-douce);
}
.etiquette--ecorce { background: rgba(122, 85, 55, 0.1); color: var(--ecorce); }

.liste-etiquettes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.liste-etiquettes li { margin: 0; }

/* --------------------------------------------------------------------------
   6. Bandeau supérieur, vert sapin (bloc sapin 1 sur 3)
   -------------------------------------------------------------------------- */
.bandeau-haut {
  background: var(--sapin);
  color: var(--sur-sapin);
  font-size: 0.88rem;
}
.bandeau-haut__ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 20px;
  padding-block: 9px;
}
.bandeau-haut__infos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  color: var(--sur-sapin-doux);
}
.bandeau-haut__sep { color: var(--mousse); }
.bandeau-haut__tel {
  color: var(--blanc);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.bandeau-haut__tel:hover { color: var(--blanc); text-decoration: underline; }

@media (max-width: 600px) {
  .bandeau-haut__infos { font-size: 0.82rem; }
  .bandeau-haut__masquable { display: none; }
}

/* --------------------------------------------------------------------------
   7. En-tête
   -------------------------------------------------------------------------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--sable);
  border-bottom: 1px solid var(--trait);
  transition: box-shadow var(--transition), background var(--transition);
}
.entete.est-compacte {
  background: rgba(247, 246, 241, 0.94);
  backdrop-filter: blur(10px);
  box-shadow: var(--ombre);
  border-bottom-color: transparent;
}

.entete__ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 16px;
  transition: padding var(--transition);
}
.entete.est-compacte .entete__ligne { padding-block: 9px; }

.logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  flex-shrink: 0;
}
.logo__marque {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--blanc);
  color: var(--blanc);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: width var(--transition), height var(--transition);
}
.logo__marque img { width: 100%; height: 100%; object-fit: contain; display: block; }
.entete.est-compacte .logo__marque { width: 36px; height: 36px; }

.logo__texte { display: flex; flex-direction: column; line-height: 1.15; }
.logo__nom {
  font-family: "Bitter", Georgia, serif;
  font-weight: 600;
  font-size: 1.12rem;
  color: var(--sapin);
}
.logo__metier {
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--encre-douce);
}

/* Navigation principale */
.nav { display: none; }
.nav__liste {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__liste > li { margin: 0; position: relative; }
.nav__lien {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: var(--r-pill);
  color: var(--encre);
  font-size: 0.96rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.nav__lien:hover { background: var(--mousse-voile); color: var(--sapin); }
.nav__lien[aria-current="page"] { background: var(--mousse-voile); color: var(--mousse-profond); font-weight: 600; }

.nav__chevron { width: 11px; height: 11px; transition: transform var(--transition); }
.nav__declencheur[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }

/* Sous-menu déroulant */
.sous-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 290px;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--r-carte);
  box-shadow: var(--ombre-flottante);
  padding: 10px;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.nav__item--deroulant:hover .sous-menu,
.sous-menu.est-ouvert {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.sous-menu li { margin: 0; }
.sous-menu a {
  display: block;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  color: var(--encre);
  font-size: 0.93rem;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.sous-menu a:hover { background: var(--mousse-voile); color: var(--sapin); }

.entete__actions { display: flex; align-items: center; gap: 12px; }
.entete__devis { display: none; }

/* Bouton menu mobile */
.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0 12px;
  border: 1px solid var(--trait-fort);
  border-radius: var(--r-pill);
  background: var(--blanc);
  cursor: pointer;
}
.burger span {
  display: block;
  height: 2px;
  background: var(--sapin);
  border-radius: var(--r-pill);
  transition: transform var(--transition), opacity var(--transition);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 1040px) {
  .nav { display: block; }
  .burger { display: none; }
  .entete__devis { display: inline-flex; }
}

/* Panneau mobile */
.menu-mobile {
  display: none;
  border-top: 1px solid var(--trait);
  background: var(--sable);
  padding-block: 16px 24px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.menu-mobile.est-ouvert { display: block; }
.menu-mobile__liste { list-style: none; margin: 0 0 18px; padding: 0; }
.menu-mobile__liste li { margin: 0; }
.menu-mobile__lien {
  display: block;
  padding: 13px 18px;
  border-radius: var(--r-pill);
  color: var(--encre);
  font-size: 1.02rem;
  font-weight: 500;
  text-decoration: none;
}
.menu-mobile__lien:hover { background: var(--mousse-voile); }
.menu-mobile__declencheur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 13px 18px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  font: inherit;
  font-weight: 500;
  color: var(--encre);
  cursor: pointer;
  text-align: left;
}
.menu-mobile__sous {
  list-style: none;
  margin: 2px 0 8px;
  padding: 0 0 0 16px;
  display: none;
  border-left: 2px solid var(--trait);
}
.menu-mobile__sous.est-ouvert { display: block; }
.menu-mobile__sous a {
  display: block;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  font-size: 0.95rem;
  color: var(--encre-douce);
  text-decoration: none;
}
.menu-mobile__sous a:hover { background: var(--mousse-voile); color: var(--sapin); }
.menu-mobile__actions { display: grid; gap: 10px; padding-inline: 4px; }

/* --------------------------------------------------------------------------
   8. Premier écran

   Deux objets distincts. Le premier écran clair, sobre, sert les 27 pages
   intérieures. Le hero sombre est réservé à l'accueil : c'est le seul
   endroit du site où l'on a trois secondes pour prouver le métier, et un
   bloc de texte centré sur fond crème ne le prouvait pas.
   -------------------------------------------------------------------------- */
.premier-ecran {
  background: var(--sable);
  padding-block: 52px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.premier-ecran::before {
  content: "";
  position: absolute;
  top: -180px;
  left: 50%;
  transform: translateX(-50%);
  width: 820px;
  height: 460px;
  background: radial-gradient(ellipse at center, rgba(92, 138, 60, 0.10), transparent 68%);
  pointer-events: none;
}
.premier-ecran__contenu { position: relative; max-width: 780px; margin-inline: auto; }
.premier-ecran h1 { margin-bottom: 20px; }
.premier-ecran__texte {
  font-size: var(--t-chapeau);
  color: var(--encre-douce);
  max-width: 620px;
  margin-inline: auto;
  margin-bottom: 30px;
}
.premier-ecran .groupe-boutons { justify-content: center; }

@media (min-width: 768px) {
  .premier-ecran { padding-block: 80px 56px; }
}

/* Ligne de réassurance */
.reassurance {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 12px;
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  font-size: 0.92rem;
  color: var(--encre-douce);
}
.reassurance li { margin: 0; display: inline-flex; align-items: center; gap: 12px; max-width: none; }
/* est-dernier-visible est posée par le script quand des lignes sont masquées,
   sinon la dernière ligne encore affichée garderait sa puce de séparation. */
/* Variante sur fond profond, posée sous les recours du hero. Elle reste
   vide tant que l'entreprise n'a pas fourni certification, assurance et
   note Google. Le jour où elles arrivent, elles s'affichent à l'endroit
   exact où le visiteur hésite. */
.reassurance--sombre { color: var(--sur-sapin-doux); margin-top: 26px; justify-content: flex-start; }
.reassurance--sombre li::after { background: var(--mousse-vif) !important; }

.reassurance li:not(:last-child):not(.est-dernier-visible)::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mousse);
}

/* --------------------------------------------------------------------------
   8 bis. Hero de l'accueil, fond profond et photo de chantier réelle
   -------------------------------------------------------------------------- */
.heros {
  position: relative;
  background: var(--nuit);
  color: var(--sur-sapin);
  overflow: hidden;
  isolation: isolate;
}
/* Halo froid en haut à droite, pour que le fond ne soit pas un aplat mort */
.heros::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto auto;
  width: 780px;
  height: 780px;
  background: radial-gradient(circle at center, rgba(92, 138, 60, 0.22), transparent 62%);
  pointer-events: none;
  z-index: -1;
}

.heros__grille {
  display: grid;
  gap: 34px;
  padding-block: 46px 0;
  align-items: center;
}
@media (min-width: 900px) {
  .heros__grille {
    grid-template-columns: minmax(0, 1.24fr) minmax(0, 0.76fr);
    gap: 54px;
    padding-block: 76px 76px;
  }
}

.heros h1 {
  color: var(--blanc);
  font-size: var(--t-geant);
  letter-spacing: var(--ls-geant);
  line-height: 1.07;
  margin-bottom: 22px;
}
/* La contrainte de mesure n'a de sens qu'à partir du moment où la colonne
   est plus large que le titre. Sur mobile elle ne ferait que hacher. */
@media (min-width: 900px) { .heros h1 { max-width: 15ch; } }
/* Le second membre du titre passe en vert clair : la hiérarchie se joue
   dans la couleur plutôt qu'en coupant la phrase en deux tailles. */
.heros h1 .heros__lieu { color: var(--mousse-vif); display: block; }

.heros__chapeau {
  font-size: var(--t-chapeau);
  color: var(--sur-sapin-doux);
  max-width: 46ch;
  margin-bottom: 30px;
}
.heros .surtitre { color: var(--ambre-vif); }

/* La photo déborde vers le bas sur grand écran, elle n'est pas posée dans
   une boîte. C'est ce débordement qui donne l'échelle et la verticalité. */
.heros__photo {
  position: relative;
  border-radius: var(--r-photo);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--sapin-clair);
}
.heros__photo img { width: 100%; height: 100%; object-fit: cover; }
.heros__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 26, 17, 0.82) 0%,
                                      rgba(10, 26, 17, 0.45) 26%,
                                      transparent 52%);
}
@media (max-width: 899px) {
  /* Sur mobile la photo prend toute la largeur de l'écran, sans gouttière.
     Une photo de métier encadrée de marges perd la moitié de sa force. */
  .heros__media {
    margin-inline: calc(var(--gouttiere) * -1);
  }
  .heros__photo { border-radius: 0; aspect-ratio: 5 / 4; }
}

/* Vignette posée sur la photo, qui dit où et quoi. Elle remplace la
   légende générique et ancre la preuve dans un lieu réel. */
.heros__vignette {
  position: absolute;
  left: 16px;
  bottom: 16px;
  right: 16px;
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.heros__vignette .tech { color: var(--ambre-vif); }
.heros__vignette span:last-child { color: var(--blanc); font-size: 0.95rem; font-weight: 590; }

/* Socle de chiffres. Séparateurs en filets fins plutôt qu'en cartes :
   quatre cartes de plus auraient fait exactement le site générique que
   l'on cherche à éviter. */
.heros__socle {
  border-top: 1px solid var(--sapin-ligne);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 760px) {
  .heros__socle { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.heros__fait {
  padding: 22px 0 24px;
  border-left: 1px solid var(--sapin-ligne);
  padding-left: 20px;
}
.heros__fait:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 759px) {
  .heros__fait:nth-child(odd) { border-left: 0; padding-left: 0; }
  .heros__fait:nth-child(n+3) { border-top: 1px solid var(--sapin-ligne); }
}
.heros__nombre {
  display: block;
  font-family: var(--police-titre);
  font-size: clamp(1.7rem, 3.4vw, 2.45rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--blanc);
  font-variant-numeric: tabular-nums;
}
.heros__nombre sup {
  font-size: 0.44em;
  vertical-align: super;
  color: var(--mousse-vif);
  margin-left: 2px;
  letter-spacing: 0;
}
.heros__fait .tech { display: block; margin-top: 9px; color: var(--sur-sapin-tenu); }

/* --------------------------------------------------------------------------
   9. Bandeau photographique panoramique
   -------------------------------------------------------------------------- */
.bandeau-photo { padding-bottom: 12px; background: var(--sable); }
.bandeau-photo__cadre {
  position: relative;
  border-radius: var(--r-carte);
  overflow: hidden;
}
.bandeau-photo__etiquette {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  padding: 10px 20px;
  font-size: 0.85rem;
}
@media (min-width: 768px) {
  .bandeau-photo__etiquette { left: 28px; bottom: 28px; padding: 12px 24px; font-size: 0.92rem; }
}

/* --------------------------------------------------------------------------
   10. Visuels et blocs de remplissage
   -------------------------------------------------------------------------- */
.visuel {
  position: relative;
  border-radius: var(--r-photo);
  overflow: hidden;
  background: var(--surface-creuse);
}
.visuel img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--transition-lente);
}
/* Zoom très léger au survol, uniquement là où la photo est cliquable ou
   fait partie d'un bloc actif. Une photo qui bouge sans raison agace. */
a:hover > .visuel img,
.visuel--anime:hover img { transform: scale(1.035); }
.visuel--panoramique { aspect-ratio: 16 / 7; }
.visuel--carre { aspect-ratio: 1 / 1; }
.visuel--portrait { aspect-ratio: 4 / 5; }

/* Mention portée par les photos qui ne viennent pas des chantiers de l'entreprise. */
.visuel__mention {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: rgba(20, 49, 31, 0.72);
  color: var(--blanc);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}
@media (max-width: 599px) {
  .visuel--carre .visuel__mention { font-size: 0.66rem; padding: 3px 9px; }
}

/* Bloc de remplissage, photo à fournir par le client */
.a-fournir {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  min-width: 0;
  width: 100%;
  padding: 28px 22px;
  background: var(--blanc);
  border: 2px dashed var(--mousse);
  border-radius: var(--r-carte);
  color: var(--encre-douce);
}
.a-fournir--panoramique { aspect-ratio: 16 / 7; min-height: 220px; }
.a-fournir--carre { aspect-ratio: 1 / 1; }
.a-fournir--portrait { aspect-ratio: 4 / 5; }

/* Sous 600px, le format panoramique devient plus court que son texte.
   La hauteur redevient libre pour que rien ne dépasse du cadre. */
@media (max-width: 599px) {
  .a-fournir--panoramique { aspect-ratio: auto; min-height: 240px; }
  /* L'étiquette d'horaires est posée en bas du cadre. On lui réserve sa place. */
  .bandeau-photo__cadre .a-fournir--panoramique { padding-bottom: 82px; }
}
.a-fournir__pastille {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: var(--r-pill);
  background: var(--mousse-voile);
  color: var(--mousse-profond);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.a-fournir__intitule {
  font-family: "Bitter", Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--sapin);
  max-width: min(34ch, 100%);
  line-height: 1.4;
}
.a-fournir__note { font-size: 0.84rem; max-width: min(40ch, 100%); line-height: 1.5; }

.section--sapin .a-fournir {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--mousse);
  color: var(--sur-sapin-doux);
}
.section--sapin .a-fournir__intitule { color: var(--blanc); }
.section--sapin .a-fournir__pastille { background: var(--mousse); color: var(--blanc); }

/* --------------------------------------------------------------------------
   11. Services en lignes larges dépliables
   -------------------------------------------------------------------------- */
.services-liste {
  border-top: 1px solid var(--trait);
  margin-top: 8px;
}
.service-ligne { border-bottom: 1px solid var(--trait); }

.service-ligne__tete { margin: 0; font-family: inherit; font-weight: 400; font-size: 1rem; }

.service-ligne__bouton {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 6px 16px;
  width: 100%;
  padding: 22px 4px;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--encre);
  transition: background var(--transition);
  border-radius: var(--r-carte);
}
.service-ligne__bouton:hover { background: rgba(92, 138, 60, 0.055); }
/* La ligne ouverte se distingue par un fond tiède, pas seulement par le
   signe. Sans cela on perd de vue quelle ligne on est en train de lire. */
.service-ligne:has(.service-ligne__bouton[aria-expanded="true"]) { background: var(--surface-tiede); }
.service-ligne:has(.service-ligne__bouton[aria-expanded="true"]) .service-ligne__bouton:hover { background: transparent; }

.service-ligne__num {
  font-family: var(--police-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ambre-texte);
  grid-row: 1;
  transition: color var(--transition);
}
.service-ligne__bouton[aria-expanded="true"] .service-ligne__num { color: var(--mousse-profond); }
.service-ligne__nom {
  font-family: var(--police-titre);
  font-size: clamp(1.15rem, 3vw, 1.5rem);
  font-weight: 600;
  color: var(--sapin);
  grid-row: 1;
}
.service-ligne__resume {
  grid-column: 2;
  grid-row: 2;
  font-size: 0.95rem;
  color: var(--encre-douce);
  line-height: 1.55;
}

/* Signe plus qui devient moins */
.service-ligne__signe {
  grid-column: 3;
  grid-row: 1;
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--trait-fort);
  flex-shrink: 0;
  transition: background var(--transition), border-color var(--transition);
}
.service-ligne__signe::before,
.service-ligne__signe::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--sapin);
  border-radius: var(--r-pill);
  transform: translate(-50%, -50%);
  transition: transform var(--transition), background var(--transition);
}
.service-ligne__signe::before { width: 15px; height: 2px; }
.service-ligne__signe::after { width: 2px; height: 15px; }

.service-ligne__bouton:hover .service-ligne__signe { border-color: var(--mousse); background: var(--mousse-voile); }
.service-ligne__bouton[aria-expanded="true"] .service-ligne__signe { background: var(--mousse); border-color: var(--mousse); }
.service-ligne__bouton[aria-expanded="true"] .service-ligne__signe::before { background: var(--blanc); }
.service-ligne__bouton[aria-expanded="true"] .service-ligne__signe::after { transform: translate(-50%, -50%) rotate(90deg); background: var(--blanc); }

.service-ligne__panneau {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.service-ligne__panneau.est-ouvert { grid-template-rows: 1fr; }
.service-ligne__interieur { overflow: hidden; }
.service-ligne__grille {
  display: grid;
  gap: 24px;
  padding: 4px 4px 32px;
}
.service-ligne__points { list-style: none; margin: 0 0 22px; padding: 0; }
.service-ligne__points li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 9px;
  font-size: 0.97rem;
  color: var(--encre-douce);
}
.service-ligne__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 14px;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--ambre);
}

@media (min-width: 860px) {
  .service-ligne__bouton { grid-template-columns: 56px minmax(220px, 1fr) 1.15fr auto; gap: 24px; padding: 26px 8px; }
  .service-ligne__num { font-size: 1.05rem; }
  .service-ligne__resume { grid-column: 3; grid-row: 1; }
  .service-ligne__signe { grid-column: 4; }
  .service-ligne__grille {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
    align-items: start;
    padding: 4px 8px 44px 88px;
    position: relative;
  }
  .service-ligne__grille::before {
    content: "";
    position: absolute;
    left: 27px;
    top: 2px;
    bottom: 46px;
    width: 1px;
    background: linear-gradient(to bottom, var(--ambre), rgba(192, 122, 51, 0));
  }
}

/* --------------------------------------------------------------------------
   12. Déroulé d'intervention, blocs alternés reliés par un trait
   -------------------------------------------------------------------------- */
.deroule { position: relative; max-width: 940px; margin-inline: auto; }
.deroule::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 21px;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--mousse) 8%, var(--mousse) 92%, transparent);
}
.deroule__etape { position: relative; padding-left: 62px; margin-bottom: 22px; }
.deroule__etape:last-child { margin-bottom: 0; }
.deroule__puce {
  position: absolute;
  left: 0;
  top: 22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--blanc);
  border: 2px solid var(--mousse);
  display: grid;
  place-items: center;
  font-family: "Bitter", Georgia, serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ecorce);
  z-index: 1;
}
.deroule__bloc {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--r-carte);
  padding: 24px 26px;
  box-shadow: var(--ombre);
}
.deroule__bloc h3 { margin-bottom: 8px; }
.deroule__bloc p { color: var(--encre-douce); font-size: 0.97rem; margin: 0; }

@media (min-width: 900px) {
  .deroule::before { left: 50%; transform: translateX(-50%); }
  .deroule__etape { padding-left: 0; width: 50%; margin-bottom: 30px; }
  .deroule__etape:nth-child(odd) { padding-right: 52px; text-align: right; }
  .deroule__etape:nth-child(even) { margin-left: 50%; padding-left: 52px; }
  .deroule__etape:nth-child(odd) .deroule__puce { left: auto; right: -22px; }
  .deroule__etape:nth-child(even) .deroule__puce { left: -22px; }
}

/* --------------------------------------------------------------------------
   13. Bloc entreprise (bloc sapin 2 sur 3)
   -------------------------------------------------------------------------- */
.entreprise__grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
.chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: 16px;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--sapin-ligne);
}
.chiffres__valeur {
  display: block;
  font-family: "Bitter", Georgia, serif;
  font-size: clamp(1.3rem, 3.6vw, 1.9rem);
  font-weight: 600;
  color: var(--mousse);
  line-height: 1.15;
  margin-bottom: 4px;
}
.chiffres__intitule { font-size: 0.83rem; color: var(--sur-sapin-doux); line-height: 1.4; }

@media (min-width: 900px) {
  .entreprise__grille { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 56px; }
}

/* --------------------------------------------------------------------------
   14. Réalisations
   -------------------------------------------------------------------------- */
.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}
.filtre {
  padding: 9px 20px;
  border-radius: var(--r-pill);
  border: 1px solid var(--trait-fort);
  background: transparent;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--encre-douce);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.filtre:hover { border-color: var(--mousse); color: var(--mousse-profond); }
.filtre[aria-pressed="true"] {
  background: var(--mousse-profond);
  border-color: var(--mousse-profond);
  color: var(--blanc);
  font-weight: 600;
}

.grille-chantiers {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .grille-chantiers { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .grille-chantiers { grid-template-columns: repeat(3, 1fr); } }

.chantier {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--r-carte);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.chantier:hover { transform: translateY(-4px); box-shadow: var(--ombre-flottante); }
.chantier.est-masque { display: none; }
.chantier__media { position: relative; }
.chantier__paire { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.chantier__paire .a-fournir { border-radius: 0; aspect-ratio: 1 / 1; padding: 16px 12px; }
.chantier__paire .visuel { border-radius: 0; aspect-ratio: 1 / 1; }

/* Repère avant ou après, posé sur la photo du chantier. */
.visuel__etiquette {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 2;
  padding: 4px 13px;
  border-radius: var(--r-pill);
  background: rgba(20, 49, 31, 0.78);
  color: var(--blanc);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.chantier__corps { padding: 20px 22px 24px; }
.chantier__commune {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ecorce);
  margin-bottom: 8px;
}
.chantier__titre { font-size: 1.1rem; margin-bottom: 12px; }
.chantier__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.chantier__meta li {
  margin: 0;
  padding: 5px 13px;
  border-radius: var(--r-pill);
  background: var(--sable);
  font-size: 0.8rem;
  color: var(--encre-douce);
}

/* --------------------------------------------------------------------------
   15. Zones d'intervention
   -------------------------------------------------------------------------- */
.zones__groupes { display: grid; gap: 26px; }
@media (min-width: 800px) { .zones__groupes { grid-template-columns: 1fr 1fr; gap: 36px; } }

.zones__bloc {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--r-carte);
  padding: 28px 26px;
}
.zones__titre { font-size: 1.1rem; margin-bottom: 18px; }

/* --------------------------------------------------------------------------
   16. Avis clients
   -------------------------------------------------------------------------- */
.grille-avis { display: grid; gap: 22px; }
@media (min-width: 860px) { .grille-avis { grid-template-columns: repeat(3, 1fr); } }

.avis {
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--r-carte);
  padding: 28px 26px;
}
.avis__etoiles { color: var(--mousse); font-size: 1rem; letter-spacing: 3px; margin-bottom: 16px; }
.avis__texte { font-size: 1rem; color: var(--encre); margin-bottom: 20px; flex-grow: 1; }
.avis__auteur { border-top: 1px solid var(--trait); padding-top: 16px; }
.avis__nom { font-weight: 600; color: var(--sapin); display: block; }
.avis__detail { font-size: 0.86rem; color: var(--encre-douce); }

/* --------------------------------------------------------------------------
   17. Accordéon des questions fréquentes
   -------------------------------------------------------------------------- */
.faq { max-width: 860px; margin-inline: auto; display: grid; gap: 12px; }
.faq__item {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--r-carte);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.faq__item:has(.faq__bouton[aria-expanded="true"]) { border-color: var(--mousse); box-shadow: var(--ombre); }
.faq__question { margin: 0; font-size: 1rem; }
.faq__bouton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 20px 24px;
  border: 0;
  background: transparent;
  font-family: "Bitter", Georgia, serif;
  font-size: 1.03rem;
  font-weight: 600;
  color: var(--sapin);
  text-align: left;
  cursor: pointer;
  line-height: 1.4;
}
.faq__signe {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--mousse-voile);
  flex-shrink: 0;
  transition: background var(--transition);
}
.faq__signe::before, .faq__signe::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--mousse-profond);
  border-radius: var(--r-pill);
  transform: translate(-50%, -50%);
  transition: transform var(--transition), background var(--transition);
}
.faq__signe::before { width: 12px; height: 2px; }
.faq__signe::after { width: 2px; height: 12px; }
.faq__bouton[aria-expanded="true"] .faq__signe { background: var(--mousse); }
.faq__bouton[aria-expanded="true"] .faq__signe::before { background: var(--blanc); }
.faq__bouton[aria-expanded="true"] .faq__signe::after { transform: translate(-50%, -50%) rotate(90deg); background: var(--blanc); }

.faq__panneau {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.faq__panneau.est-ouvert { grid-template-rows: 1fr; }
.faq__interieur { overflow: hidden; }
.faq__reponse { padding: 0 24px 24px; color: var(--encre-douce); font-size: 0.99rem; }

/* --------------------------------------------------------------------------
   18. Contact et formulaire
   -------------------------------------------------------------------------- */
.contact__grille { display: grid; gap: 36px; align-items: start; }
@media (min-width: 940px) { .contact__grille { grid-template-columns: 0.9fr 1.1fr; gap: 52px; } }

.contact__tel {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: "Bitter", Georgia, serif;
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  font-weight: 600;
  color: var(--sapin);
  text-decoration: none;
  margin-bottom: 8px;
}
.contact__tel:hover { color: var(--mousse-profond); }
.contact__mention { font-size: 0.9rem; color: var(--encre-douce); margin-bottom: 26px; }

.coordonnees { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 18px; }
.coordonnees li { margin: 0; display: flex; gap: 14px; align-items: flex-start; }
.coordonnees__pastille {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--mousse-voile);
  color: var(--mousse-profond);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.coordonnees__pastille svg { width: 18px; height: 18px; }
.coordonnees__intitule { display: block; font-size: 0.8rem; letter-spacing: 0.04em; color: var(--ecorce); font-weight: 600; }
.coordonnees__valeur { color: var(--encre); font-style: normal; }
.coordonnees__valeur a { color: var(--encre); text-decoration: none; }
.coordonnees__valeur a:hover { color: var(--mousse-profond); text-decoration: underline; }

.carte-integree {
  border-radius: var(--r-carte);
  overflow: hidden;
  border: 1px solid var(--trait);
  line-height: 0;
}
.carte-integree iframe { width: 100%; height: 280px; border: 0; }

/* Formulaire */
.formulaire {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--r-carte);
  padding: 28px 24px;
  box-shadow: var(--ombre);
}
@media (min-width: 620px) { .formulaire { padding: 36px 34px; } }

.champs { display: grid; gap: 18px; }
@media (min-width: 620px) {
  .champs { grid-template-columns: 1fr 1fr; }
  .champ--pleine { grid-column: 1 / -1; }
}

.champ { display: flex; flex-direction: column; gap: 7px; }
.champ label { font-size: 0.9rem; font-weight: 600; color: var(--sapin); }
.champ__obligatoire { color: var(--mousse-profond); }
.champ__aide { font-size: 0.82rem; color: var(--encre-douce); font-weight: 400; }

.champ input[type="text"],
.champ input[type="tel"],
.champ input[type="email"],
.champ input[type="file"],
.champ select,
.champ textarea {
  width: 100%;
  padding: 13px 17px;
  border: 1px solid var(--trait-fort);
  border-radius: var(--r-champ);
  background: var(--blanc);
  font-family: inherit;
  font-size: 1rem;
  color: var(--encre);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.champ textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.champ select { appearance: none; cursor: pointer; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2314311F' stroke-width='1.8'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 12px;
}
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none;
  border-color: var(--mousse);
  box-shadow: 0 0 0 3px rgba(92, 138, 60, 0.16);
}
.champ input[aria-invalid="true"],
.champ select[aria-invalid="true"],
.champ textarea[aria-invalid="true"] { border-color: #B3391F; }

.champ__erreur { font-size: 0.83rem; color: #B3391F; min-height: 0; }
.champ__erreur:empty { display: none; }

/* Cases à cocher */
.case {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 18px;
  border: 1px solid var(--trait-fort);
  border-radius: var(--r-champ);
  background: var(--sable);
  cursor: pointer;
}
.case input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--mousse);
  flex-shrink: 0;
  cursor: pointer;
}
.case span { font-size: 0.9rem; line-height: 1.55; color: var(--encre-douce); font-weight: 400; }
.case--urgence { background: rgba(122, 85, 55, 0.07); border-color: rgba(122, 85, 55, 0.3); }

.formulaire__pied { margin-top: 24px; display: grid; gap: 14px; }
.formulaire__note { font-size: 0.82rem; color: var(--encre-douce); }

/* État de l'envoi. Vide au repos, donc invisible. */
.formulaire__envoi { font-size: 0.88rem; color: var(--encre-douce); }
.formulaire__envoi:empty { display: none; }
.formulaire__envoi--echec { color: #B3391F; }

.message-confirmation {
  display: none;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 22px;
  margin-top: 20px;
  border-radius: var(--r-carte);
  background: var(--mousse-voile);
  border: 1px solid var(--mousse);
  color: var(--sapin);
}
.message-confirmation.est-visible { display: flex; }
.message-confirmation p { margin: 0; font-size: 0.95rem; }
.message-confirmation strong { display: block; margin-bottom: 4px; }

/* --------------------------------------------------------------------------
   19. Pied de page (bloc sapin 3 sur 3)
   -------------------------------------------------------------------------- */
.pied {
  background: var(--sapin);
  color: var(--sur-sapin-doux);
  padding-block: 56px 0;
  font-size: 0.94rem;
}
.pied__grille { display: grid; gap: 34px; }
@media (min-width: 700px) { .pied__grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pied__grille { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 44px; } }

.pied__titre {
  font-family: "Bitter", Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--blanc);
  margin: 0 0 18px;
}
.pied__liste { list-style: none; margin: 0; padding: 0; }
.pied__liste li { margin-bottom: 10px; }
.pied__liste a {
  color: var(--sur-sapin-doux);
  text-decoration: none;
  transition: color var(--transition);
}
.pied__liste a:hover { color: var(--blanc); text-decoration: underline; }

/* Le logo occupe sa propre ligne, sinon le numéro vient le coller sur mobile. */
.pied__logo { display: flex; width: fit-content; margin-bottom: 18px; }
.pied__logo .logo__nom { color: var(--blanc); }
.pied__logo .logo__metier { color: var(--sur-sapin-doux); }
.pied__logo .logo__marque { background: var(--blanc); }

.pied__tel {
  display: inline-block;
  font-family: "Bitter", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--blanc);
  text-decoration: none;
  margin-bottom: 6px;
}
.pied__adresse { font-style: normal; line-height: 1.7; margin-bottom: 14px; }

.pied__bas {
  margin-top: 44px;
  border-top: 1px solid var(--sapin-ligne);
  padding-block: 24px 30px;
  font-size: 0.84rem;
  line-height: 1.7;
  color: rgba(232, 237, 230, 0.6);
}
.pied__bas p { margin-bottom: 6px; }

/* --------------------------------------------------------------------------
   20. Barre d'appel mobile, le numéro à un geste partout
   -------------------------------------------------------------------------- */
.barre-appel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(247, 246, 241, 0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--trait);
}
.barre-appel .bouton { padding: 13px 16px; font-size: 0.95rem; }
@media (min-width: 1040px) { .barre-appel { display: none; } }
@media (max-width: 1039px) { body { padding-bottom: 82px; } }

/* --------------------------------------------------------------------------
   21. Fil d'ariane
   -------------------------------------------------------------------------- */
.ariane { background: var(--sable); padding-block: 18px 4px; font-size: 0.86rem; }
.ariane ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ariane li { margin: 0; display: inline-flex; align-items: center; gap: 10px; color: var(--encre-douce); }
.ariane li:not(:last-child)::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--trait-fort); }
.ariane a { color: var(--encre-douce); text-decoration: none; }
.ariane a:hover { color: var(--mousse-profond); text-decoration: underline; }
.ariane [aria-current="page"] { color: var(--sapin); font-weight: 500; }

/* --------------------------------------------------------------------------
   22. Blocs de contenu réutilisables
   -------------------------------------------------------------------------- */
.grille-deux { display: grid; gap: 24px; }
@media (min-width: 800px) { .grille-deux { grid-template-columns: 1fr 1fr; gap: 32px; } }

.grille-trois { display: grid; gap: 22px; }
@media (min-width: 760px) { .grille-trois { grid-template-columns: repeat(3, 1fr); } }

.carte {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--r-carte);
  padding: 28px 26px;
}
.carte h3 { font-size: 1.13rem; margin-bottom: 10px; }
.carte p { color: var(--encre-douce); font-size: 0.97rem; }

.carte--situation { position: relative; padding-top: 32px; }
.carte__numero {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(122, 85, 55, 0.1);
  color: var(--ecorce);
  font-family: "Bitter", Georgia, serif;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 14px;
}

.encart {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-left: 4px solid var(--mousse);
  border-radius: var(--r-carte);
  padding: 26px 28px;
}
.encart--ecorce { border-left-color: var(--ecorce); }
.encart h3 { font-size: 1.1rem; margin-bottom: 10px; }
.encart p { color: var(--encre-douce); }

.liste-cochee { list-style: none; margin: 0 0 1.2em; padding: 0; }
.liste-cochee li { position: relative; padding-left: 28px; margin-bottom: 10px; color: var(--encre-douce); }
.liste-cochee li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mousse);
}
.section--sapin .liste-cochee li { color: var(--sur-sapin-doux); }

/* Marqueur des données à confirmer */
.a-confirmer {
  display: inline-block;
  padding: 2px 12px;
  border-radius: var(--r-pill);
  background: rgba(122, 85, 55, 0.12);
  color: var(--ecorce);
  font-size: 0.86em;
  font-weight: 600;
  line-height: 1.5;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.section--sapin .a-confirmer,
.pied .a-confirmer { background: rgba(255, 255, 255, 0.14); color: #E0C6A8; }

/* Bloc de maillage interne */
.maillage { display: grid; gap: 22px; }
@media (min-width: 800px) { .maillage { grid-template-columns: 1fr 1fr; gap: 30px; } }
.maillage__bloc {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--r-carte);
  padding: 28px 26px;
}
.maillage__bloc h3 { font-size: 1.08rem; margin-bottom: 8px; }
.maillage__bloc p { font-size: 0.93rem; color: var(--encre-douce); margin-bottom: 18px; }

/* Tableaux, seule exception aux angles arrondis */
.tableau-enveloppe { overflow-x: auto; border: 1px solid var(--trait); border-radius: var(--r-carte); background: var(--blanc); }
table { width: 100%; border-collapse: collapse; font-size: 0.94rem; min-width: 480px; }
th, td { padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--trait); }
th { font-family: "Bitter", Georgia, serif; font-weight: 600; color: var(--sapin); background: var(--sable); }
td { color: var(--encre-douce); }
tr:last-child th, tr:last-child td { border-bottom: 0; }

/* Contenu rédactionnel long */
.texte-long { max-width: 760px; }
.texte-long h2 { margin-top: 44px; }
.texte-long h2:first-child { margin-top: 0; }
.texte-long h3 { margin-top: 30px; }

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

/* --------------------------------------------------------------------------
   23. Apparition au défilement

   Une seule translation courte et une opacité. Rien qui déplace la mise en
   page, rien qui dure assez pour se remarquer consciemment.
   -------------------------------------------------------------------------- */
.est-a-reveler { opacity: 0; transform: translateY(18px); }
.est-a-reveler [data-reveler-enfant] { opacity: 0; transform: translateY(16px); }

.est-a-reveler,
.est-a-reveler [data-reveler-enfant] {
  transition: opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.est-revele,
.est-revele [data-reveler-enfant] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .est-a-reveler,
  .est-a-reveler [data-reveler-enfant] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   24. Comparateur avant et après

   Le moment fort de la page. Deux photos du même cadrage, un volet que
   l'on tire. C'est la seule démonstration qui vaille dans ce métier, et
   elle ne repose sur aucune promesse écrite.
   -------------------------------------------------------------------------- */
.comparateur {
  --position: 50%;
  position: relative;
  border-radius: var(--r-photo);
  overflow: hidden;
  background: var(--nuit);
  aspect-ratio: 1 / 1;
  user-select: none;
  touch-action: pan-y;
}
@media (min-width: 700px) { .comparateur { aspect-ratio: 4 / 3; } }

.comparateur img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Le volet du dessus est rogné à la position du curseur. clip-path évite
   de redimensionner l'image, donc aucun reflow pendant le glissement. */
.comparateur__volet {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 var(--position));
  will-change: clip-path;
}

.comparateur__etiquette {
  position: absolute;
  top: 14px;
  z-index: 3;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: rgba(10, 26, 17, 0.72);
  backdrop-filter: blur(6px);
  color: var(--blanc);
  font-family: var(--police-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  pointer-events: none;
}
.comparateur__etiquette--avant { left: 14px; }
.comparateur__etiquette--apres { right: 14px; }

/* Rail et poignée, purement visuels. Le contrôle réel est l'input range. */
.comparateur__rail {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--position);
  width: 2px;
  background: var(--blanc);
  transform: translateX(-1px);
  z-index: 2;
  pointer-events: none;
  box-shadow: 0 0 18px rgba(10, 26, 17, 0.5);
}
.comparateur__poignee {
  position: absolute;
  top: 50%;
  left: var(--position);
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--blanc);
  box-shadow: 0 6px 20px -6px rgba(10, 26, 17, 0.6);
  pointer-events: none;
  display: grid;
  place-items: center;
  transition: transform 120ms ease;
}
/* Deux chevrons opposés, tracés en bordures. Plus lisible qu'un clip-path
   compliqué, et net à toutes les densités d'écran. */
.comparateur__poignee::before,
.comparateur__poignee::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-block: 5px solid transparent;
  transform: translateY(-50%);
}
.comparateur__poignee::before {
  left: 13px;
  border-right: 7px solid var(--sapin);
}
.comparateur__poignee::after {
  right: 13px;
  border-left: 7px solid var(--sapin);
}

/* L'input range couvre toute la surface, invisible mais opérant. Il donne
   le clavier, le tactile et la souris sans une ligne de calcul de pointeur. */
.comparateur__curseur {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.comparateur__curseur::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 56px;
  height: 100%;
  cursor: ew-resize;
}
.comparateur__curseur::-moz-range-thumb {
  width: 56px;
  height: 100%;
  border: 0;
  background: transparent;
  cursor: ew-resize;
}
.comparateur__curseur:focus-visible { outline: 2px solid var(--ambre-vif); outline-offset: 3px; }
.comparateur__curseur:active + .comparateur__rail + .comparateur__poignee,
.comparateur:hover .comparateur__poignee { transform: translate(-50%, -50%) scale(1.06); }

.comparateur__legende {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  margin-top: 16px;
}
.comparateur__legende strong { font-family: var(--police-titre); font-weight: 600; color: var(--sapin); }
.section--sapin .comparateur__legende strong { color: var(--blanc); }

/* --------------------------------------------------------------------------
   25. Vérification de commune

   Widget utile plutôt que démonstratif : il route vers la bonne page ville
   et n'affirme rien que le site ne dise déjà par ailleurs.
   -------------------------------------------------------------------------- */
.verif {
  display: grid;
  gap: 12px;
  padding: 22px;
  border-radius: var(--r-carte);
  background: var(--surface);
  border: 1px solid var(--trait);
  box-shadow: var(--ombre-nette);
}
@media (min-width: 620px) { .verif { padding: 26px 28px; } }

.verif__ligne { display: flex; gap: 10px; flex-wrap: wrap; }
.verif__ligne input {
  flex: 1 1 210px;
  min-width: 0;
  padding: 13px 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--trait-fort);
  background: var(--sable);
  font: inherit;
  font-size: 1rem;
  color: var(--encre);
}
.verif__ligne input:focus {
  outline: none;
  border-color: var(--mousse);
  box-shadow: 0 0 0 3px var(--mousse-voile);
}

.verif__reponse {
  font-size: 0.96rem;
  line-height: 1.5;
  padding: 14px 16px;
  border-radius: var(--r-champ);
  border-left: 3px solid var(--mousse);
  background: var(--mousse-voile);
  color: var(--sapin);
}
.verif__reponse--peut-etre {
  border-left-color: var(--ambre);
  background: var(--ambre-voile);
  color: #6B451E;
}
.verif__reponse .lien-fleche { margin-left: 4px; }
.verif__reponse--peut-etre .lien-fleche { color: #8A5722; }

/* Les liens communes servent de source de données au script. Ils restent
   dans le HTML, donc consultables et indexables sans JavaScript. */
.verif__sources { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.verif__sources li { margin: 0; }
.verif__sources a {
  display: inline-block;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  background: var(--surface-creuse);
  color: var(--encre-douce);
  font-size: 0.86rem;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.verif__sources a:hover { background: var(--sapin); color: var(--blanc); }

/* --------------------------------------------------------------------------
   26. Bloc démonstration, texte et comparateur côte à côte
   -------------------------------------------------------------------------- */
.demo { display: grid; gap: 30px; align-items: center; }
@media (min-width: 940px) {
  .demo { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: 56px; }
}
/* Le blanc n'est juste que sur fond sombre. Sur les autres surfaces le
   titre reprend la couleur normale, sinon il disparait dans le fond. */
.section--sapin .demo__texte h2 { color: var(--blanc); }
.demo__media { margin: 0; }
.demo__texte .groupe-boutons { margin-top: 28px; }

/* Section resserrée, utilisée quand le bloc porte déjà sa propre respiration. */
.section--serree { padding-block: calc(var(--section-y) * 0.78); }

/* --------------------------------------------------------------------------
   27. Ajustements mobile

   Le mobile n'est pas un desktop rétréci. L'interlettrage des libellés
   techniques, calibré pour de grandes largeurs, y devient encombrant, et
   la barre d'appel fixe doit rendre sa hauteur au bas de page.
   -------------------------------------------------------------------------- */
@media (max-width: 599px) {
  .surtitre { letter-spacing: 0.06em; font-size: 0.7rem; }
  .heros__chapeau { max-width: none; }
  .heros__grille { padding-block: 34px 0; }
  .comparateur__poignee { width: 46px; height: 46px; }
  .comparateur__etiquette { top: 10px; padding: 5px 11px; }
  .comparateur__etiquette--avant { left: 10px; }
  .comparateur__etiquette--apres { right: 10px; }
  /* Les recours du hero prennent toute la largeur : au pouce, deux boutons
     côte à côte sur 375 pixels donnent deux cibles trop étroites. */
  .heros .groupe-boutons { flex-direction: column; align-items: stretch; }
  .heros .groupe-boutons .bouton { width: 100%; }
}

/* La barre d'appel fixe masque la fin du pied de page tant qu'on ne lui
   rend pas sa hauteur. Le calcul tient compte de la zone sûre iOS. */
@media (max-width: 1039px) {
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
}

/* --------------------------------------------------------------------------
   28. Bande immersive pleine largeur

   Une respiration entre deux longues sections. Elle ne vend rien et ne
   demande rien : elle casse le métronome des sections en conteneur, et
   redonne son échelle au métier.
   -------------------------------------------------------------------------- */
.bande-immersive {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 300px;
  height: clamp(300px, 44vh, 480px);
  display: grid;
  align-items: end;
  background: var(--nuit);
}
.bande-immersive > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.bande-immersive__voile {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(10, 26, 17, 0.92) 0%,
                                      rgba(10, 26, 17, 0.88) 50%,
                                      rgba(10, 26, 17, 0.50) 80%,
                                      rgba(10, 26, 17, 0.14) 100%);
}
.bande-immersive__texte { padding-bottom: 44px; }
.bande-immersive__texte .tech {
  color: var(--ambre-vif);
  display: block;
  margin-bottom: 12px;
  text-shadow: 0 1px 10px rgba(10, 26, 17, 0.9);
}
.bande-immersive__texte p {
  font-family: var(--police-titre);
  font-size: clamp(1.25rem, 2.6vw, 1.95rem);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: var(--blanc);
  max-width: 22ch;
  margin: 0;
  text-shadow: 0 1px 14px rgba(10, 26, 17, 0.85);
}
.bande-immersive__mention { right: 14px; bottom: 14px; }