/*
Theme Name: BCI Calo
Theme URI: https://www.bci-calo.fr/
Author: BCI Calo
Description: Thème bloc sur mesure de BCI Calo, calorifugeage et amélioration énergétique. Construit depuis la maquette validée : chaque page reste modifiable dans l'éditeur.
Version: 1.1.0
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bci-calo
Tags: block-theme, full-site-editing, business
*/

/* ==========================================================================
   BCI Calo — maquette de l'accueil (phase 2)
   Registre relevé sur la référence (site Expert Isolation) : une seule famille
   sans-serif, titres en capitales grasses, fond gris très clair, bandeaux
   sombres pleine largeur, filets bord à bord, angles vifs, ronds fléchés,
   arcs au trait, pile de photos en perspective.
   Couleurs prises sur la carte de visite BCi, à la demande du client.
   ========================================================================== */

:root {
  /* Palette de la carte de visite — nommée par rôle */
  --vert: #268A3F;            /* vert BCi : boutons, barre d'infos (rôle du rouge de la référence) */
  --vert-fonce: #1E7033;      /* survol */
  --vert-vif: #4DBB5F;        /* ronds fléchés (rôle du jaune de la référence) */
  --anthracite: #1F2123;      /* bandeaux sombres, titres */
  --gris-carte: #46484B;      /* surface de la carte de visite */
  --texte: #55585C;           /* texte courant */
  --fond: #F5F6F6;            /* fond de page, gris très clair comme la référence */
  --blanc: #FFFFFF;           /* cases et champs posés sur le fond */
  --filet: #D5D7D9;           /* filets bord à bord */
  --bord-champ: #A3A6A9;      /* contour des champs de formulaire */
  --teinte-1: #E7F2E9;        /* fonds pastel des cartes d'article */
  --teinte-2: #ECEDEE;
  --teinte-3: #E4EBE6;

  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --gouttiere: 24px;
  --largeur: 1320px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 400 16px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 {
  margin: 0;
  color: var(--anthracite);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.005em;
  text-transform: uppercase;
  text-wrap: balance;
  hyphens: none;
}
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--vert-vif); outline-offset: 3px; }
.visuellement-cache {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
svg { flex: none; }

.conteneur {
  max-width: calc(var(--largeur) + 2 * var(--gouttiere));
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

/* ---------- Typographie commune ---------- */

.etiquette {
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--anthracite);
}
.titre-section { font-size: 34px; }

/* ---------- Boutons et liens fléchés ---------- */

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 24px;
  background: var(--vert);
  color: var(--blanc);
  border: 0;
  border-radius: 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s;
}
.bouton:hover { background: var(--vert-fonce); }
.bouton svg { width: 15px; height: 15px; }

.lien-rond {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--anthracite);
  text-decoration: none;
}
.rond {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--vert-vif);
  color: var(--anthracite);
  transition: transform .25s;
}
.rond svg { width: 19px; height: 19px; }
.lien-rond:hover .rond { transform: rotate(45deg); }

.arcs {
  position: absolute;
  pointer-events: none;
  color: var(--anthracite);
}

/* ==========================================================================
   Barre d'infos et en-tête
   ========================================================================== */

.barre-infos {
  background: var(--vert);
  color: var(--blanc);
  font-size: 12.5px;
}
.barre-infos-rangee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  height: 34px;
}
.barre-infos p { display: flex; align-items: center; gap: 8px; }
.barre-infos a { text-decoration: none; }
.barre-infos a:hover { text-decoration: underline; }
.barre-infos svg { width: 14px; height: 14px; }

.entete {
  position: relative;
  z-index: 20;
  background: var(--anthracite);
}
.entete-rangee {
  display: flex;
  align-items: center;
  gap: 40px;
  height: 78px;
}
.logo { display: block; color: #F1F2F2; flex: none; }
.logo svg { display: block; width: 92px; height: 54px; }
.menu { margin-inline: auto; }
.menu-liste {
  display: flex;
  align-items: center;
  gap: 50px;
  font-size: 14px;
  font-weight: 500;
}
.menu-liste > li { position: relative; }
.menu-liste a {
  display: block;
  padding: 12px 0;
  color: rgba(255, 255, 255, .9);
  text-decoration: none;
  transition: color .2s;
}
.menu-liste a:hover, .menu-liste .est-actif > a { color: var(--vert-vif); }
.a-sous-menu > a::after {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-left: 8px;
  border-right: 1.3px solid currentColor;
  border-bottom: 1.3px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
}
.sous-menu {
  position: absolute;
  top: 100%;
  left: -22px;
  min-width: 230px;
  padding: 10px 0;
  background: var(--blanc);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.a-sous-menu:hover .sous-menu, .a-sous-menu:focus-within .sous-menu {
  opacity: 1; visibility: visible; transform: none;
}
.sous-menu a { padding: 9px 22px; color: var(--anthracite); }
.sous-menu a:hover { color: var(--vert); }
.menu-bascule {
  display: grid;
  align-content: center;
  gap: 8px;
  width: 50px;
  height: 46px;
  padding: 0 6px;
  background: none;
  border: 0;
  cursor: pointer;
}
.menu + .menu-bascule { margin-left: 0; }
.menu-bascule span:not(.visuellement-cache) { display: block; height: 1.5px; background: var(--blanc); }

/* Panneau plein écran ouvert par le bouton menu : toutes les pages */
.panneau-menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow-y: auto;
  padding: 16px 0 48px;
  background: var(--anthracite);
  color: var(--blanc);
}
.panneau-menu[hidden] { display: none; }
.panneau-rangee { display: flex; align-items: center; justify-content: space-between; height: 78px; }
.panneau-fermer {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--vert-vif);
  color: var(--anthracite);
  cursor: pointer;
}
.panneau-fermer svg { width: 22px; height: 22px; transform: rotate(45deg); }
.panneau-liens {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 72px;
  margin-top: 48px;
}
.panneau-liens a {
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .2s;
}
.panneau-liens a:hover { color: var(--vert-vif); }
.panneau-bas {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-top: 48px;
  color: rgba(255, 255, 255, .75);
}
.panneau-bas a:not(.bouton) { text-decoration: none; }

/* ==========================================================================
   Héros : titre hors d'échelle, devis à gauche, pile de photos en perspective
   ========================================================================== */

.heros {
  position: relative;
  overflow: hidden;
  padding: 60px 0 170px;
}
.heros-titre {
  max-width: 1300px;
  margin-bottom: 52px;
  font-size: 76px;
  line-height: 1.1;
  letter-spacing: -.01em;
}
.heros-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.heros-intro { margin-bottom: 18px; font-size: 17px; color: var(--anthracite); }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; }
.formulaire input:not([type="checkbox"]),
.formulaire textarea,
.formulaire select,
.rappel-form input {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--bord-champ);
  border-radius: 0;
  font-size: 14px;
  transition: border-color .2s;
}
.formulaire textarea { height: 104px; margin-top: 12px; padding: 12px 14px; resize: vertical; }
.formulaire input:focus, .formulaire textarea:focus, .formulaire select:focus, .rappel-form input:focus { outline: none; border-color: var(--anthracite); }
::placeholder { color: #7D8084; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; }
.consentement {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0 30px;
  font-size: 12px;
  line-height: 1.5;
}
.consentement input { width: 14px; height: 14px; margin: 2px 0 0; accent-color: var(--vert); flex: none; }
.formulaire-merci { margin-top: 16px; font-size: 14px; color: var(--vert); }

/* Pile de photos vue en perspective : chaque tirage recule vers la droite */
.heros-pile {
  position: relative;
  height: 470px;
  perspective: 1500px;
  perspective-origin: 0 35%;
}
.pile {
  position: absolute;
  left: 0;
  top: 0;
  width: 68%;
  height: 86%;
  object-fit: cover;
  transform-origin: 0 50%;
  outline: 1px solid rgba(255, 255, 255, .7);
  outline-offset: -1px;
  box-shadow: 10px 12px 26px rgba(0, 0, 0, .14);
}
.pile-1 { z-index: 4; transform: rotateY(-22deg); }
.pile-2 { z-index: 3; transform: rotateY(-22deg) translate3d(50px, 20px, -60px); }
.pile-3 { z-index: 2; transform: rotateY(-22deg) translate3d(100px, 40px, -120px); }
.pile-4 { z-index: 1; transform: rotateY(-22deg) translate3d(150px, 60px, -180px); }

.heros-arcs {
  left: max(var(--gouttiere), calc(50% - 540px));
  bottom: 0;
  width: 390px;
  height: 146px;
}

/* ==========================================================================
   Introduction : titre à gauche, texte à droite, filets bord à bord
   ========================================================================== */

.intro { padding: 44px 0; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.intro-grille {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 90px;
  align-items: center;
}
.intro-titre { font-size: 32px; line-height: 1.2; }
.intro p { font-size: 16.5px; }

/* ==========================================================================
   Prestations : une ouverte, les autres en bandes photo, filets bord à bord
   ========================================================================== */

.services { overflow: hidden; padding-bottom: 60px; }
.service { position: relative; padding: 38px 0; }
.service + .service::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  border-top: 1px solid var(--filet);
}
.service-titre { font-size: 32px; line-height: 1.15; }
.service-bascule {
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-transform: inherit;
  cursor: pointer;
}
.service-corps p { max-width: 490px; margin: 30px 0 0; font-size: 16.5px; }
.service-corps .lien-rond { margin-top: 44px; }
.service-photo { overflow: hidden; }
.service-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }

.service.est-ouvert {
  display: grid;
  grid-template-columns: 42fr 58fr;
  gap: 40px;
  align-items: stretch;
}
.service.est-ouvert .service-texte { display: flex; flex-direction: column; padding-top: 18px; }
.service.est-ouvert .service-corps { display: flex; flex-direction: column; flex: 1; justify-content: space-between; }
.service.est-ouvert .service-photo { height: 320px; }
.service.est-ouvert .service-bascule { cursor: default; }

.service:not(.est-ouvert) { height: 336px; }
.service:not(.est-ouvert) .service-photo { position: absolute; inset: 38px 0; }
.service:not(.est-ouvert) .service-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 20, 22, .55) 0%, rgba(18, 20, 22, .12) 55%, rgba(18, 20, 22, 0) 100%);
}
.service:not(.est-ouvert) .service-texte { position: absolute; z-index: 2; left: 36px; top: 72px; right: 36px; }
.service:not(.est-ouvert) .service-titre { color: var(--blanc); }
.service:not(.est-ouvert) .service-bascule::after { content: ""; position: absolute; inset: -34px -36px -230px; }
.service:not(.est-ouvert) .service-corps { display: none; }
.service:not(.est-ouvert):hover .service-photo img { transform: scale(1.04); }

/* ==========================================================================
   Réalisations : bandeau sombre, carrousel qui déborde à droite
   ========================================================================== */

.realisations {
  padding: 96px 0 210px;
  background: var(--anthracite);
  color: var(--blanc);
}
.realisations .titre-section { color: var(--blanc); }
.realisations-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 36px;
}
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .9);
  text-decoration: none;
}
.lien-fleche svg { width: 15px; height: 15px; }
.lien-fleche:hover { color: var(--vert-vif); }
.fleches { display: flex; gap: 14px; }
.fleche {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: opacity .2s, transform .2s;
}
.fleche svg { width: 22px; height: 22px; }
.fleche-blanche { background: var(--blanc); color: var(--anthracite); }
.fleche-verte { background: var(--vert-vif); color: var(--anthracite); }
.fleche:hover:not(:disabled) { transform: scale(1.06); }
.fleche:disabled { opacity: .4; cursor: default; }
.realisations-fenetre {
  overflow: hidden;
  padding-left: max(var(--gouttiere), calc((100% - var(--largeur)) / 2));
}
.realisations-piste {
  display: flex;
  gap: 22px;
  transition: transform .6s cubic-bezier(.3, .7, .2, 1);
}
.realisation { position: relative; flex: 0 0 420px; }
.realisation img { width: 100%; height: 316px; object-fit: cover; }
.realisation-plus {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--vert-vif);
  color: var(--anthracite);
  opacity: 0;
  transform: scale(.7);
  transition: opacity .25s, transform .25s;
}
.realisation-plus svg { width: 22px; height: 22px; }
.realisation:hover .realisation-plus { opacity: 1; transform: none; }

/* ==========================================================================
   Conseil : la photo chevauche le bandeau sombre
   ========================================================================== */

.conseil { padding-bottom: 96px; }
.conseil-grille {
  display: grid;
  grid-template-columns: 42fr 58fr;
  gap: 90px;
  align-items: center;
}
.conseil-photo { position: relative; z-index: 2; margin-top: -68px; }
.conseil-photo img { width: 100%; height: 462px; object-fit: cover; }
.conseil-texte { padding-top: 60px; }
.conseil-texte h2 { margin-bottom: 22px; font-size: 32px; line-height: 1.18; }
.conseil-texte p { max-width: 600px; margin-bottom: 34px; }

/* ==========================================================================
   Matériaux (emplacement des logos partenaires de la référence)
   ========================================================================== */

.materiaux { border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.materiaux-liste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 40px 0;
}
.materiau {
  width: 156px;
  height: 142px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 12px;
  background: var(--blanc);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .05em;
  text-align: center;
  text-transform: uppercase;
  color: var(--anthracite);
}
.materiau-icone { color: var(--vert); }
.materiau-icone svg { display: block; width: 44px; height: 44px; }

/* ==========================================================================
   Chantiers en images : mosaïque, une tuile teintée au vert BCi
   ========================================================================== */

.chantiers { position: relative; overflow: hidden; padding: 70px 0 90px; }
.chantiers-arcs { right: -70px; top: 0; width: 470px; height: 176px; transform: scaleY(-1); }
.chantiers-titre { position: relative; max-width: 760px; margin-bottom: 48px; font-size: 32px; line-height: 1.2; }
.mosaique { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.mosaique-colonne { display: grid; gap: 22px; align-content: start; }
.tuile { position: relative; overflow: hidden; }
.tuile img { width: 100%; height: var(--h, 400px); object-fit: cover; transition: transform .6s ease; }
.tuile:hover img { transform: scale(1.03); }
.tuile-verte img { filter: grayscale(1) contrast(1.1) brightness(1.12); }
.tuile-verte::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #B9E2BF;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.tuile-rond {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--vert-vif);
  color: var(--anthracite);
  transition: transform .25s;
}
.tuile-rond svg { width: 20px; height: 20px; }
.tuile-rond:hover { transform: rotate(45deg); }

/* ==========================================================================
   Blog : trois cartes en escalier, fonds pastel
   ========================================================================== */

.blog { padding-bottom: 110px; }
.blog-entete {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 90px;
  align-items: center;
  padding: 44px 0;
  margin-bottom: 44px;
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
}
.blog-titre { font-size: 32px; line-height: 1.2; }
.blog-entete p { font-size: 15px; }
.blog-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  align-items: start;
}
.article-carte:nth-child(2) { margin-top: 70px; }
.article-carte:nth-child(3) { margin-top: 156px; }
.article-carte img { width: 100%; height: 390px; object-fit: cover; }
.article-corps { padding: 30px 30px 34px; background: var(--teinte-1); }
.article-carte:nth-child(2) .article-corps { background: var(--teinte-2); }
.article-carte:nth-child(3) .article-corps { background: var(--teinte-3); }
.article-corps h3 { margin-bottom: 24px; font-size: 21px; line-height: 1.24; }
.article-corps .lien-rond { font-size: 14px; }
.article-corps .rond { width: 42px; height: 42px; }

/* ==========================================================================
   Rappel (emplacement de la newsletter de la référence)
   ========================================================================== */

.rappel { padding: 64px 0 76px; border-top: 1px solid var(--filet); text-align: center; }
.rappel-titre { max-width: 1000px; margin: 0 auto 34px; font-size: 32px; line-height: 1.2; }
.rappel-form { display: flex; justify-content: center; gap: 20px; }
.rappel-form label { width: 400px; }
.rappel-form input { background: var(--blanc); }

/* ==========================================================================
   Pied de page
   ========================================================================== */

.pied { padding-top: 56px; font-size: 13.5px; }
.pied-grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 64px;
  padding-bottom: 56px;
}
.pied-titre { margin-bottom: 22px; font-size: 18px; letter-spacing: .01em; }
.pied-logo { display: inline-block; margin-bottom: 18px; padding: 10px 16px; background: var(--anthracite); color: #F1F2F2; }
.pied-logo svg { display: block; width: 80px; height: 47px; }
.coordonnees li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--filet); }
.coordonnees svg { width: 16px; height: 16px; color: var(--vert); }
.coordonnees a { text-decoration: none; }
.coordonnees a:hover, .pied-liens a:hover { color: var(--vert); }
.pied-colonne > p { padding-bottom: 14px; border-bottom: 1px solid var(--filet); }
.pied-liens a { display: block; padding: 9px 0; border-bottom: 1px solid var(--filet); text-decoration: none; transition: color .2s; }
.pied-bas { padding-top: 22px; padding-bottom: 22px; border-top: 1px solid var(--filet); font-size: 12.5px; font-weight: 600; text-align: center; color: var(--anthracite); }
.pied-bas a { text-decoration: none; }
.pied-bas a:hover { color: var(--vert); }

/* ==========================================================================
   Adaptatif
   ========================================================================== */

@media (max-width: 1240px) {
  .menu-liste { gap: 30px; }
  .heros-titre { font-size: 62px; }
  .realisation { flex-basis: 360px; }
  .materiau { width: 140px; }
}

@media (max-width: 1080px) {
  .menu { display: none; }
  .menu + .menu-bascule { margin-left: auto; }
  .heros-titre { font-size: 50px; }
  .heros-grille { grid-template-columns: 1fr; gap: 48px; }
  .heros-pile { height: 420px; }
  .intro-grille, .blog-entete { grid-template-columns: 1fr; gap: 20px; }
  .service.est-ouvert { grid-template-columns: 1fr; gap: 30px; }
  .service:not(.est-ouvert) { height: 280px; }
  .conseil-grille { grid-template-columns: 1fr; gap: 20px; }
  .conseil-texte { padding-top: 20px; }
  .materiaux-liste { flex-wrap: wrap; justify-content: center; row-gap: 18px; }
  .pied-grille { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  :root { --gouttiere: 16px; }
  body { font-size: 15px; }
  .barre-infos-rangee { justify-content: space-between; gap: 12px; font-size: 11.5px; }
  .barre-infos p:first-child { display: none; }
  .entete-rangee { height: 68px; }
  .logo svg { width: 76px; height: 45px; }
  .panneau-rangee { height: 68px; }
  .panneau-liens { grid-template-columns: 1fr; margin-top: 24px; }
  .panneau-liens a { padding: 12px 0; font-size: 22px; }
  .panneau-bas { flex-direction: column; align-items: flex-start; }
  .etiquette { font-size: 14px; }
  .heros { padding: 36px 0 120px; }
  .heros-titre { margin-bottom: 30px; font-size: 34px; line-height: 1.1; }
  .heros-intro { font-size: 15.5px; }
  .champs { grid-template-columns: 1fr; }
  .heros-pile { height: 260px; perspective: 900px; }
  .pile-2 { transform: rotateY(-22deg) translate3d(40px, 12px, -40px); }
  .pile-3 { transform: rotateY(-22deg) translate3d(80px, 24px, -80px); }
  .pile-4 { transform: rotateY(-22deg) translate3d(120px, 36px, -120px); }
  .heros-arcs { width: 280px; height: 105px; left: 50%; margin-left: -140px; }
  .titre-section { font-size: 26px; }
  .intro { padding: 36px 0; }
  .intro-titre { font-size: 22px; }
  .intro p { font-size: 15px; }
  .service { padding: 26px 0; }
  .service-titre { font-size: 22px; }
  .service-corps p { margin-top: 18px; font-size: 15px; }
  .service-corps .lien-rond { margin-top: 26px; }
  .service:not(.est-ouvert) { height: 200px; }
  .service:not(.est-ouvert) .service-photo { inset: 26px 0; }
  .service:not(.est-ouvert) .service-texte { left: 20px; top: 46px; right: 20px; }
  .service.est-ouvert .service-photo { height: 230px; }
  .lien-rond { font-size: 15px; }
  .rond { width: 40px; height: 40px; }
  .realisations { padding: 64px 0 140px; }
  .realisations-entete { align-items: flex-start; flex-direction: column; gap: 22px; }
  .realisation { flex-basis: 78vw; }
  .realisation img { height: 240px; }
  .conseil-photo { margin-top: -70px; }
  .conseil-photo img { height: 320px; }
  .conseil-texte h2 { font-size: 23px; }
  .bouton { height: 44px; padding: 0 18px; font-size: 14px; }
  .materiau { width: calc((100% - 24px) / 2); height: 118px; font-size: 11px; }
  .materiau-icone svg { width: 36px; height: 36px; }
  .chantiers { padding: 56px 0 70px; }
  .chantiers-titre, .blog-titre, .rappel-titre { font-size: 22px; }
  .chantiers-arcs { width: 300px; height: 112px; right: -120px; opacity: .45; }
  .mosaique { grid-template-columns: 1fr 1fr; gap: 10px; }
  .mosaique-colonne { gap: 10px; }
  .mosaique-colonne:nth-child(3) { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .tuile img { height: calc(var(--h, 400px) * .5); }
  .blog { padding-bottom: 80px; }
  .blog-entete { padding: 30px 0; }
  .blog-grille { grid-template-columns: 1fr; gap: 26px; }
  .article-carte:nth-child(n) { margin-top: 0; }
  .article-carte img { height: 240px; }
  .article-corps h3 { font-size: 18px; }
  .rappel { padding: 56px 0 64px; }
  .rappel-form { flex-direction: column; align-items: stretch; gap: 12px; }
  .rappel-form label { width: auto; }
  .rappel-form .bouton { justify-content: center; }
  .pied-grille { grid-template-columns: 1fr; gap: 36px; }
}

/* ==========================================================================
   Pages intérieures (phase 3) — composants tirés de l'accueil
   ========================================================================== */

.fil-ariane {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texte);
}
.fil-ariane a { color: var(--anthracite); text-decoration: none; }
.fil-ariane a:hover { color: var(--vert); }
.fil-ariane span[aria-hidden] { color: var(--bord-champ); }

/* Héros de page prestation : celui de l'accueil, titre un cran en dessous */
.heros-page { padding-bottom: 160px; }
.heros-page .heros-titre { max-width: 1120px; font-size: 60px; }
.page-chapeau { max-width: 560px; font-size: 18px; line-height: 1.6; color: var(--anthracite); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; margin-top: 36px; }
.lien-tel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--anthracite);
  text-decoration: none;
}
.lien-tel svg { width: 18px; height: 18px; color: var(--vert); }
.lien-tel:hover { color: var(--vert); }

/* En-tête simple : listes, pages légales */
.entete-page { position: relative; overflow: hidden; padding: 60px 0 110px; }
.entete-page .heros-titre { margin-bottom: 28px; font-size: 60px; }
.entete-page .page-chapeau { max-width: 720px; }
.entete-page .heros-arcs { left: auto; right: max(var(--gouttiere), calc(50% - 660px)); }
.entete-page-simple { padding-bottom: 36px; }
.entete-page-simple .heros-titre { margin-bottom: 0; }

/* Points : cases blanches posées sur le fond, comme les matériaux */
.points { padding: 96px 0 110px; }
.points-titre { max-width: 760px; margin-bottom: 44px; font-size: 32px; line-height: 1.2; }
.points-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.point { padding: 34px 28px 38px; background: var(--blanc); }
.point-icone { display: block; margin-bottom: 26px; color: var(--vert); }
.point-icone svg { display: block; width: 44px; height: 44px; }
.point h3 { margin-bottom: 14px; font-size: 19px; line-height: 1.25; }
.point p { font-size: 15px; }

/* Étapes : bandeau sombre, comme les réalisations de l'accueil */
.etapes { padding: 96px 0 200px; background: var(--anthracite); color: rgba(255, 255, 255, .78); }
.etapes .titre-section { color: var(--blanc); }
.etapes-entete { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 50px; }
.etapes-liste { display: grid; grid-template-columns: repeat(4, 1fr); }
.etape { padding-right: 32px; }
.etape + .etape { padding-left: 32px; border-left: 1px solid rgba(255, 255, 255, .14); }
.etape-numero {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 26px;
  border-radius: 50%;
  background: var(--vert-vif);
  color: var(--anthracite);
  font-size: 15px;
  font-weight: 700;
}
.etape h3 { margin-bottom: 12px; font-size: 19px; color: var(--blanc); }
.etape p { font-size: 15px; }

/* Questions fréquentes : filets comme les prestations */
.faq { padding: 80px 0 96px; border-top: 1px solid var(--filet); }
.faq-grille { display: grid; grid-template-columns: 4fr 8fr; gap: 80px; align-items: start; }
.faq-titre { font-size: 32px; line-height: 1.2; }
.question { border-bottom: 1px solid var(--filet); }
.question:first-child { border-top: 1px solid var(--filet); }
.question summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  list-style: none;
  cursor: pointer;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--anthracite);
}
.question summary::-webkit-details-marker { display: none; }
.question summary .rond { width: 40px; height: 40px; flex: none; }
.question[open] summary .rond { transform: rotate(45deg); }
.reponse { padding: 0 72px 28px 0; }
.reponse p { font-size: 16.5px; }

/* Autres prestations : bandes photo cliquables */
.autres { padding: 80px 0 96px; border-top: 1px solid var(--filet); }
.autres-titre { margin-bottom: 36px; font-size: 32px; }
.bandes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.bande { position: relative; display: block; height: 260px; overflow: hidden; color: var(--blanc); text-decoration: none; }
.bande img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.bande::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 20, 22, .6) 0%, rgba(18, 20, 22, .08) 60%, rgba(18, 20, 22, .3) 100%);
}
.bande-titre { position: absolute; z-index: 2; left: 28px; top: 26px; right: 90px; font-size: 22px; font-weight: 700; line-height: 1.2; text-transform: uppercase; }
.bande .rond { position: absolute; z-index: 2; right: 24px; bottom: 24px; }
.bande:hover img { transform: scale(1.04); }
.bande:hover .rond { transform: rotate(45deg); }

/* Liste des prestations, des articles, galerie */
.services-page { padding-top: 0; border-top: 1px solid var(--filet); }
.blog-page { padding-top: 70px; border-top: 1px solid var(--filet); }
.chantiers-page { padding-top: 70px; border-top: 1px solid var(--filet); }

/* Contact */
.contact { position: relative; overflow: hidden; padding: 60px 0 170px; }
.contact .heros-titre { margin-bottom: 46px; font-size: 60px; }
.contact-grille { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.champ-seul { display: block; margin-top: 12px; }
.formulaire select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  color: var(--anthracite);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231F2123' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  cursor: pointer;
}
.formulaire select:has(option[value=""]:checked) { color: #7D8084; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; }
.consentement a { color: var(--vert); }
.contact-carte { background: var(--blanc); }
.contact-carte img { width: 100%; height: 300px; object-fit: cover; }
.contact-infos { padding: 34px 36px 40px; }
.contact-infos h2 { margin-bottom: 16px; font-size: 24px; }
.contact-infos h3 { margin: 28px 0 8px; font-size: 16px; }
.contact-infos .coordonnees li { font-size: 16px; }

/* Articles et pages légales */
.article-entete { padding: 60px 0 50px; }
.article-entete .heros-titre { max-width: 1060px; margin-bottom: 26px; font-size: 54px; }
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin-bottom: 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--vert);
}
.article-photo img { width: 100%; height: 520px; object-fit: cover; }
.article-grille { display: grid; grid-template-columns: 8fr 4fr; gap: 90px; align-items: start; padding-top: 70px; padding-bottom: 100px; }
.article-grille > * { min-width: 0; }
.article-aside { position: sticky; top: 30px; padding: 34px 32px 36px; background: var(--blanc); }
.aside-titre { margin-bottom: 12px; font-size: 22px; font-weight: 700; line-height: 1.2; text-transform: uppercase; color: var(--anthracite); }
.article-aside p:not(.aside-titre) { margin-bottom: 26px; font-size: 15px; }
.article-aside .lien-tel { margin-top: 22px; }

.prose-section { padding: 10px 0 110px; }
.prose { max-width: 780px; }
.prose > * + * { margin-top: 20px; }
.prose h2 { margin-top: 54px; font-size: 26px; line-height: 1.22; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { font-size: 17px; line-height: 1.75; }
.prose ul { display: grid; gap: 10px; }
.prose li { position: relative; padding-left: 26px; }
.prose li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--vert-vif);
}
.prose a { color: var(--vert); }
.prose strong { color: var(--anthracite); }
.encadre { padding: 26px 30px; background: var(--blanc); border-left: 4px solid var(--vert); }
.tableau { overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; background: var(--blanc); }
.prose th, .prose td { padding: 14px 18px; border-bottom: 1px solid var(--filet); text-align: left; vertical-align: top; font-size: 15px; }
.prose thead th { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--anthracite); border-bottom: 2px solid var(--anthracite); }
.prose tbody th { font-weight: 700; color: var(--anthracite); }
.a-completer { padding: 1px 6px; background: var(--teinte-1); color: var(--vert-fonce); font-weight: 600; }

@media (max-width: 1080px) {
  .heros-page .heros-titre, .entete-page .heros-titre, .contact .heros-titre { font-size: 46px; }
  .article-entete .heros-titre { font-size: 42px; }
  .points-grille { grid-template-columns: 1fr 1fr; }
  .etapes-liste { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .etape:nth-child(3) { padding-left: 0; border-left: 0; }
  .faq-grille { grid-template-columns: 1fr; gap: 30px; }
  .bandes { grid-template-columns: 1fr 1fr; }
  .contact-grille { grid-template-columns: 1fr; }
  .article-grille { grid-template-columns: 1fr; gap: 50px; }
  .article-aside { position: static; }
}

@media (max-width: 640px) {
  .fil-ariane { margin-bottom: 20px; font-size: 11px; }
  .heros-page .heros-titre, .entete-page .heros-titre, .contact .heros-titre { font-size: 30px; }
  .heros-page { padding-bottom: 120px; }
  .entete-page { padding: 36px 0 90px; }
  .entete-page-simple { padding-bottom: 24px; }
  .article-entete { padding: 36px 0 32px; }
  .article-entete .heros-titre { font-size: 28px; }
  .page-chapeau { font-size: 16px; }
  .actions { margin-top: 26px; }
  .points { padding: 60px 0 70px; }
  .points-titre, .faq-titre, .autres-titre { font-size: 22px; }
  .points-grille { grid-template-columns: 1fr; gap: 14px; }
  .point { padding: 26px 22px 28px; }
  .etapes { padding: 64px 0 140px; }
  .etapes-entete { flex-direction: column; align-items: flex-start; gap: 18px; }
  .etapes-liste { grid-template-columns: 1fr; row-gap: 0; }
  .etape, .etape + .etape { padding: 22px 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .14); }
  .faq { padding: 56px 0 64px; }
  .question summary { padding: 20px 0; font-size: 16px; }
  .reponse { padding-right: 0; }
  .autres { padding: 56px 0 64px; }
  .bandes { grid-template-columns: 1fr; }
  .bande { height: 190px; }
  .contact { padding: 36px 0 120px; }
  .contact .heros-titre { margin-bottom: 30px; }
  .article-photo img { height: 240px; }
  .article-grille { padding-top: 40px; padding-bottom: 64px; }
  .prose p, .prose li { font-size: 16px; }
  .prose h2 { margin-top: 40px; font-size: 21px; }
  .prose th, .prose td { padding: 10px 12px; font-size: 13.5px; }
}

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

/* ==========================================================================
   Thème sombre « noir et vert » — retenu par le client le 2026-09-25.
   Mêmes gabarits : seules les couleurs changent. Le vert vif porte du texte
   noir (contraste 6:1), les bandeaux sombres passent au vert profond.
   ========================================================================== */

:root {
  color-scheme: dark;
  --noir: #0C0D0E;            /* fond de page */
  --noir-2: #151718;          /* cases, cartes, encarts */
  --noir-3: #050606;          /* en-tête, menu plein écran */
  --bande: #0F2417;           /* bandeaux : réalisations, étapes */
  --fond: var(--noir);
  --texte: #A9AEB3;
  --anthracite: #F1F2F2;      /* rôle « texte fort » : titres, libellés */
  --filet: #25282B;
  --bord-champ: #3B3F43;
  --teinte-1: #11261A;
  --teinte-2: #161819;
  --teinte-3: #122017;
  --vert: #4DBB5F;
  --vert-fonce: #6ACB7A;
  --vert-vif: #4DBB5F;
}

/* surfaces sombres (le jeton anthracite y servait de fond) */
.entete,
.panneau-menu,
.pied-logo { background: var(--noir-3); }
.entete { border-bottom: 1px solid var(--filet); }
.realisations,
.etapes { background: var(--bande); }

/* cartes et encarts (le jeton blanc y servait de fond) */
.sous-menu,
.materiau,
.point,
.contact-carte,
.article-aside,
.encadre,
.prose table,
.rappel-form input { background: var(--noir-2); }
.rappel-form input { color: var(--anthracite); }

/* vert vif : texte et icônes noirs */
.bouton,
.bouton:hover,
.barre-infos,
.rond,
.fleche,
.realisation-plus,
.tuile-rond,
.etape-numero,
.panneau-fermer { color: var(--noir); }
.barre-infos a:hover { color: var(--noir); }

/* décors et détails */
.arcs { color: rgba(241, 242, 242, .32); }
.pile { outline-color: rgba(255, 255, 255, .25); box-shadow: 10px 12px 30px rgba(0, 0, 0, .55); }
.formulaire select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F1F2F2' stroke-width='1.5'/%3E%3C/svg%3E");
}
::placeholder { color: #80868B; }
.a-completer { color: var(--vert-vif); }

:root {
  --i-diag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M8.5 7H17v8.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-droite: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13.5 6.5 19 12l-5.5 5.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-gauche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 12H5M10.5 6.5 5 12l5.5 5.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --i-tel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.2 3.8h3.3l1.8 4.4-2.3 1.5a11.5 11.5 0 0 0 6.3 6.3l1.5-2.3 4.4 1.8v3.3c0 .9-.7 1.6-1.6 1.6C10.9 20.2 3.8 13.1 3.6 5.4c0-.9.7-1.6 1.6-1.6Z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 6h17v12h-17ZM4 6.6l8 6.4 8-6.4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-lieu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-6.5-6.1-6.5-11a6.5 6.5 0 0 1 13 0c0 4.9-6.5 11-6.5 11Z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='10' r='2.3' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
  --i-laine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M4 9c3-2.5 5 2.5 8 0s5 2.5 8 0 5 2.5 8 0'/%3E%3Cpath d='M4 16c3-2.5 5 2.5 8 0s5 2.5 8 0 5 2.5 8 0'/%3E%3Cpath d='M4 23c3-2.5 5 2.5 8 0s5 2.5 8 0 5 2.5 8 0'/%3E%3C/g%3E%3C/svg%3E");
  --i-verre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M5 25 27 7M5 18 20 6M12 26 27 14'/%3E%3Cpath d='M5 11l7-5M20 26l7-5'/%3E%3C/g%3E%3C/svg%3E");
  --i-mousse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='16' cy='16' r='11'/%3E%3Ccircle cx='16' cy='16' r='5'/%3E%3Cpath d='M16 5v3M27 16h-3M16 27v-3M5 16h3' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
  --i-pvc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M4 11h24v10H4Z'/%3E%3Cpath d='M10 11v10M22 11v10'/%3E%3Cpath d='M4 16h6' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
  --i-tole: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10c2-3 4-3 6 0s4 3 6 0 4-3 6 0 4 3 6 0'/%3E%3Cpath d='M4 10v12c2 3 4 3 6 0s4-3 6 0 4 3 6 0 4-3 6 0V10'/%3E%3C/g%3E%3C/svg%3E");
  --i-resine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M16 4s7 8.2 7 13a7 7 0 0 1-14 0c0-4.8 7-13 7-13Z'/%3E%3Cpath d='M4 28h24' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
  --i-thermo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 18.2V6.5a3 3 0 0 1 6 0v11.7a5.8 5.8 0 1 1-6 0Z'/%3E%3Cpath d='M16 11v11'/%3E%3Cpath d='M23 8h3M23 12h3M23 16h3'/%3E%3C/g%3E%3C/svg%3E");
  --i-goutte: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4s8 8.6 8 14a8 8 0 0 1-16 0c0-5.4 8-14 8-14Z'/%3E%3Cpath d='M12.5 19a3.5 3.5 0 0 0 3.5 3.5'/%3E%3C/g%3E%3C/svg%3E");
  --i-vanne: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 19h7M22 19h7'/%3E%3Cpath d='M10 13v12l12-12v12Z'/%3E%3Cpath d='M16 19V9M11 7h10'/%3E%3C/g%3E%3C/svg%3E");
  --i-flocon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4v24M5.6 10l20.8 12M5.6 22l20.8-12'/%3E%3Cpath d='M12.5 6.2 16 9l3.5-2.8M12.5 25.8 16 23l3.5 2.8'/%3E%3C/g%3E%3C/svg%3E");
  --i-flamme: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 28c-5 0-8-3.3-8-7.6 0-4.6 3.7-7 4.8-11.4 2.6 2 3.4 4.4 3.2 6.4 1.4-1 2.4-2.8 2.6-4.9C22 13 24 16.6 24 20.4 24 24.7 21 28 16 28Z' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-gaine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M4 13h17v11H4Z'/%3E%3Cpath d='M4 13l6-5h17l-6 5M27 8v11l-6 5'/%3E%3C/g%3E%3C/svg%3E");
  --i-bouclier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4l10 4v7c0 6.5-4.3 11.2-10 13-5.7-1.8-10-6.5-10-13V8Z'/%3E%3Cpath d='M11.5 16l3.2 3.2 6-6.4'/%3E%3C/g%3E%3C/svg%3E");
  --i-regle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 22 22 3l7 7-19 19Z'/%3E%3Cpath d='M8 17l2.5 2.5M12 13l2.5 2.5M16 9l2.5 2.5M11 20l1.2 1.2M15 16l1.2 1.2M19 12l1.2 1.2'/%3E%3C/g%3E%3C/svg%3E");
  --i-acoustique: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13v6h5l6 5V8l-6 5Z'/%3E%3Cpath d='M20.5 12.5a5 5 0 0 1 0 7M24 9a10 10 0 0 1 0 14'/%3E%3C/g%3E%3C/svg%3E");
  --i-cle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M20.5 5.5a6 6 0 0 0-7.6 7.6L5 21l6 6 7.9-7.9a6 6 0 0 0 7.6-7.6l-3.7 3.7-3.4-.6-.6-3.4Z' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-diag-sombre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M8.5 7H17v8.5' fill='none' stroke='%231F2123' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-droite-sombre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13.5 6.5 19 12l-5.5 5.5' fill='none' stroke='%231F2123' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-gauche-sombre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 12H5M10.5 6.5 5 12l5.5 5.5' fill='none' stroke='%231F2123' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-plus-sombre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%231F2123' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --i-diag-clair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M8.5 7H17v8.5' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --arcs: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 150'%3E%3Cg fill='none' stroke='%2354575A' stroke-width='1'%3E%3Cpath d='M10 146a130 130 0 0 1 260 0'/%3E%3Cpath d='M34 146a130 130 0 0 1 260 0'/%3E%3Cpath d='M58 146a130 130 0 0 1 260 0'/%3E%3Cpath d='M82 146a130 130 0 0 1 260 0'/%3E%3Cpath d='M106 146a130 130 0 0 1 260 0'/%3E%3Cpath d='M130 146a130 130 0 0 1 260 0'/%3E%3C/g%3E%3C/svg%3E");
}

/* ==========================================================================
   Adaptations au balisage des blocs (phase 4)

   Les classes de la maquette sont posées sur les blocs (className) : les
   règles ci-dessus s'appliquent telles quelles. Cette partie ne traite que ce
   que le DOM des blocs change — figures, boutons, navigation, formulaires
   Contact Form 7 — et remplace les SVG inline de la maquette par des masques
   CSS (les icônes n'ont rien à faire dans le contenu éditable).

   Le CSS des blocs est imprimé APRÈS cette feuille : toute surcharge d'un
   style de bloc est écrite plus spécifique (.wp-block-image.x img…), jamais
   simplement plus tard.
   ========================================================================== */

/* ---------- Espacement automatique : neutralisé à spécificité nulle ---------- */

:where(.wp-block-group) > :where(*),
:where(.wp-block-buttons) { margin-block: 0; }
figure.wp-block-image { margin: 0; }
.wp-block-image img { height: auto; }
.wp-site-blocks { padding: 0; }
mark.has-inline-color { padding: 1px 6px; font-weight: 600; }

/* ---------- Icônes : masques CSS ---------- */

.info::before,
.coordonnees li::before,
.lien-tel::before,
.materiau::before,
.point::before {
  content: "";
  display: block;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--icone) center / contain no-repeat;
  mask: var(--icone) center / contain no-repeat;
}
.info-lieu, .coord-lieu { --icone: var(--i-lieu); }
.info-mail, .coord-mail { --icone: var(--i-mail); }
.info-tel, .coord-tel, .lien-tel { --icone: var(--i-tel); }
.icone-laine { --icone: var(--i-laine); }
.icone-verre { --icone: var(--i-verre); }
.icone-mousse { --icone: var(--i-mousse); }
.icone-pvc { --icone: var(--i-pvc); }
.icone-tole { --icone: var(--i-tole); }
.icone-resine { --icone: var(--i-resine); }
.icone-thermo { --icone: var(--i-thermo); }
.icone-goutte { --icone: var(--i-goutte); }
.icone-vanne { --icone: var(--i-vanne); }
.icone-flocon { --icone: var(--i-flocon); }
.icone-flamme { --icone: var(--i-flamme); }
.icone-gaine { --icone: var(--i-gaine); }
.icone-bouclier { --icone: var(--i-bouclier); }
.icone-regle { --icone: var(--i-regle); }
.icone-acoustique { --icone: var(--i-acoustique); }
.icone-cle { --icone: var(--i-cle); }

/* barre d'infos */
.barre-infos .info { display: flex; align-items: center; gap: 8px; }
.barre-infos .info::before { width: 14px; height: 14px; }

/* ---------- En-tête : logo et navigation ---------- */

.entete .wp-block-site-logo { flex: none; line-height: 0; }
.entete .wp-block-site-logo img { width: 92px; height: auto; }
.wp-block-navigation.menu { margin-inline: auto; font-size: 14px; font-weight: 500; }
.wp-block-navigation.menu .wp-block-navigation__container { gap: 50px; }
.wp-block-navigation.menu .wp-block-navigation-item__content {
  padding: 12px 0;
  color: rgba(255, 255, 255, .9);
  text-decoration: none;
  transition: color .2s;
}
.wp-block-navigation.menu .wp-block-navigation-item__content:hover,
.wp-block-navigation.menu .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation.menu .current-menu-ancestor > .wp-block-navigation-item__content { color: var(--vert-vif); }
.wp-block-navigation.menu .wp-block-navigation-submenu__toggle { color: rgba(255, 255, 255, .9); }
.wp-block-navigation.menu .wp-block-navigation__submenu-container {
  min-width: 230px;
  padding: 10px 0;
  border: 0;
  background: var(--blanc);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .14);
}
.wp-block-navigation.menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 9px 22px;
  color: var(--anthracite);
}
.wp-block-navigation.menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation.menu .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content { color: var(--vert); }

/* Menu complet : le bouton burger de la maquette, panneau plein écran sombre */
.wp-block-navigation.menu-complet { flex: none; }
.entete .wp-block-navigation.menu + .wp-block-navigation.menu-complet { margin-left: 0; }
.wp-block-navigation.menu-complet .wp-block-navigation__responsive-container-open {
  width: 50px;
  height: 46px;
  display: grid;
  place-items: center;
  color: var(--blanc);
}
.wp-block-navigation.menu-complet .wp-block-navigation__responsive-container-open svg { width: 38px; height: 38px; }
.wp-block-navigation.menu-complet .wp-block-navigation__responsive-container.is-menu-open {
  padding: 30px max(var(--gouttiere), calc((100vw - var(--largeur)) / 2)) 48px !important;
  background-color: var(--anthracite) !important;
  color: var(--blanc) !important;
}
.wp-block-navigation.menu-complet .wp-block-navigation__responsive-container-close {
  top: 30px;
  right: max(var(--gouttiere), calc((100vw - var(--largeur)) / 2));
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--vert-vif);
  color: var(--anthracite);
}
.wp-block-navigation.menu-complet .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 90px !important; }
.wp-block-navigation.menu-complet .is-menu-open .wp-block-navigation__container {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 72px;
  width: 100%;
  gap: 0 72px !important;
}
.wp-block-navigation.menu-complet .is-menu-open .wp-block-navigation-item { width: 100%; }
.wp-block-navigation.menu-complet .is-menu-open .wp-block-navigation-item__content {
  display: block;
  width: 100%;
  padding: 16px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  color: var(--blanc);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
}
.wp-block-navigation.menu-complet .is-menu-open .wp-block-navigation-item__content:hover { color: var(--vert-vif); }

/* ---------- Boutons : le lien porte le style, le conteneur est neutralisé ---------- */

.wp-block-button.bouton,
.wp-block-button.bouton:hover {
  display: inline-block;
  height: auto;
  padding: 0;
  background: none;
  border: 0;
}
.wp-block-button.bouton .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 24px;
  background: var(--vert);
  color: var(--blanc);
  border: 0;
  border-radius: 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s;
}
.wp-block-button.bouton .wp-block-button__link:hover { background: var(--vert-fonce); }
.wp-block-button.bouton .wp-block-button__link::after,
.lien-fleche a::after {
  content: "";
  width: 15px;
  height: 15px;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--i-diag) center / contain no-repeat;
  mask: var(--i-diag) center / contain no-repeat;
}

/* Liens à rond fléché : « Explorer », « Lire l'article » */
.lien-rond a,
.wp-block-read-more.lien-rond {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: var(--anthracite);
  text-decoration: none;
}
.lien-rond a::after,
.wp-block-read-more.lien-rond::after {
  content: "";
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  background: var(--vert-vif) var(--i-diag-sombre) center / 19px no-repeat;
  transition: transform .25s;
}
.lien-rond a:hover::after,
.wp-block-read-more.lien-rond:hover::after { transform: rotate(45deg); }
.wp-block-read-more.lien-rond {
  width: auto;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.article-corps .wp-block-read-more.lien-rond::after { width: 42px; height: 42px; }

.lien-fleche a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.lien-tel a { text-decoration: none; }
.lien-tel::before { width: 18px; height: 18px; color: var(--vert); }
.article-aside p.lien-tel { display: flex; margin: 27px 0 0; }

/* ---------- Héros : pile de photos (les figures portent les classes) ---------- */

.wp-block-image.pile { position: absolute; margin: 0; }
.wp-block-image.pile img { width: 100%; height: 100%; object-fit: cover; }

/* Arcs au trait : pseudo-éléments, jamais de bloc vide */
.heros::after,
.entete-page::after,
.contact::after {
  content: "";
  position: absolute;
  left: max(var(--gouttiere), calc(50% - 540px));
  bottom: 0;
  width: 390px;
  height: 146px;
  background: var(--arcs) center / 100% 100% no-repeat;
  pointer-events: none;
}
.entete-page::after { left: auto; right: max(var(--gouttiere), calc(50% - 660px)); }
.entete-page-simple::after { content: none; }
.chantiers::before {
  content: "";
  position: absolute;
  right: -70px;
  top: 0;
  width: 470px;
  height: 176px;
  background: var(--arcs) center / 100% 100% no-repeat;
  transform: scaleY(-1);
  pointer-events: none;
}

/* ---------- Prestations ---------- */

/* WordPress remet à zéro la marge du premier enfant d'un groupe
   (:root :where(.is-layout-flow) > :first-child, spécificité 0,2,0) :
   la marge de la maquette est redéclarée un cran plus haut. */
.service .service-corps > p:first-child { margin-top: 30px; }

.service:not(.est-ouvert) { cursor: pointer; }
.service-titre[role="button"] { cursor: pointer; }
.service.est-ouvert .service-titre[role="button"] { cursor: default; }
.wp-block-image.service-photo { margin: 0; }
.wp-block-image.service-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Réalisations : flèches et carrousel ---------- */

.fleche {
  position: relative;
  font-size: 0;
  color: transparent;
  user-select: none;
}
.fleche::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--i-gauche-sombre) center / 22px no-repeat;
}
.fleche-suivante::before { background-image: var(--i-droite-sombre); }
.fleche.est-inactif { opacity: .4; cursor: default; }
.fleche:hover:not(.est-inactif) { transform: scale(1.06); }
.wp-block-image.realisation { position: relative; flex: 0 0 420px; margin: 0; }
.wp-block-image.realisation img { width: 100%; height: 316px; object-fit: cover; }
.wp-block-image.realisation::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: var(--vert-vif) var(--i-plus-sombre) center / 22px no-repeat;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .25s, transform .25s;
  pointer-events: none;
}
.wp-block-image.realisation:hover::after { opacity: 1; transform: none; }

/* ---------- Conseil ---------- */

.wp-block-image.conseil-photo { position: relative; z-index: 2; margin: -68px 0 0; }
.wp-block-image.conseil-photo img { width: 100%; height: 462px; object-fit: cover; }

/* ---------- Matériaux et points : l'icône est un masque ---------- */

.materiau::before { width: 44px; height: 44px; color: var(--vert); }
.point::before { width: 44px; height: 44px; margin-bottom: 26px; color: var(--vert); }

/* ---------- Mosaïque ---------- */

.wp-block-image.tuile { margin: 0; }
.wp-block-image.tuile a { display: block; }
.wp-block-image.tuile img { width: 100%; object-fit: cover; transition: transform .6s ease; }
.wp-block-image.tuile.h-330 img { height: 330px; }
.wp-block-image.tuile.h-400 img { height: 400px; }
.wp-block-image.tuile.h-410 img { height: 410px; }
.wp-block-image.tuile.h-420 img { height: 420px; }
.wp-block-image.tuile.h-470 img { height: 470px; }
.wp-block-image.tuile.h-520 img { height: 520px; }
.wp-block-image.tuile.h-530 img { height: 530px; }
.wp-block-image.tuile.h-545 img { height: 545px; }
.wp-block-image.tuile:hover img { transform: scale(1.03); }
.wp-block-image.tuile-verte img { filter: grayscale(1) contrast(1.1) brightness(1.12); }
.wp-block-image.tuile-verte::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: var(--vert-vif) var(--i-diag-sombre) center / 20px no-repeat;
  transition: transform .25s;
  pointer-events: none;
}
.wp-block-image.tuile-verte:hover::before { transform: rotate(45deg); }

/* ---------- Articles : la boucle de requête porte la grille ---------- */

.blog-grille { margin: 0; padding: 0; list-style: none; }
.blog-grille > li:nth-child(3n+2) { margin-top: 70px; }
.blog-grille > li:nth-child(3n) { margin-top: 156px; }
.blog-grille > li:nth-child(3n+2) .article-corps { background: var(--teinte-2); }
.blog-grille > li:nth-child(3n) .article-corps { background: var(--teinte-3); }
.article-carte .wp-block-post-featured-image { margin: 0; }
.article-carte .wp-block-post-featured-image img { width: 100%; height: 390px; object-fit: cover; }
.article-corps .wp-block-post-title { margin-bottom: 24px; font-size: 21px; line-height: 1.24; }
.article-corps .wp-block-post-title a { color: inherit; text-decoration: none; }

/* ---------- Questions fréquentes : bloc Détails natif ---------- */

.question summary::after {
  content: "";
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--vert-vif) var(--i-plus-sombre) center / 19px no-repeat;
  transition: transform .25s;
}
.question[open] summary::after { transform: rotate(45deg); }
.question > p { padding: 0 72px 28px 0; font-size: 16.5px; }

/* ---------- Autres prestations : image liée + légende en titre ---------- */

.wp-block-image.bande { position: relative; height: 260px; margin: 0; overflow: hidden; }
.wp-block-image.bande a { display: block; height: 100%; }
.wp-block-image.bande img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.wp-block-image.bande::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 20, 22, .6) 0%, rgba(18, 20, 22, .08) 60%, rgba(18, 20, 22, .3) 100%);
  pointer-events: none;
}
.wp-block-image.bande::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: 24px;
  bottom: 24px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--vert-vif) var(--i-diag-sombre) center / 19px no-repeat;
  transition: transform .25s;
  pointer-events: none;
}
.wp-block-image.bande figcaption {
  position: absolute;
  z-index: 2;
  left: 28px;
  top: 26px;
  right: 90px;
  margin: 0;
  color: var(--blanc);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  text-transform: uppercase;
  pointer-events: none;
}
.wp-block-image.bande:hover img { transform: scale(1.04); }
.wp-block-image.bande:hover::after { transform: rotate(45deg); }

/* ---------- Contact ---------- */

.wp-block-image.contact-photo { margin: 0; }
.wp-block-image.contact-photo img { width: 100%; height: 300px; object-fit: cover; }
.coordonnees li::before { width: 16px; height: 16px; color: var(--vert); }
.coordonnees a { text-decoration: none; }

/* ---------- Pied de page ---------- */

.wp-block-site-logo.pied-logo {
  display: inline-block;
  margin-bottom: 18px;
  padding: 10px 16px;
  background: var(--anthracite);
  line-height: 0;
}
.wp-block-site-logo.pied-logo img { width: 80px; height: auto; }

/* ---------- Articles (modèle d'article) ---------- */

.article-meta a { color: var(--vert); text-decoration: none; }
.page-chapeau .wp-block-post-excerpt__excerpt { margin: 0; }
.wp-block-post-featured-image.article-photo { margin: 0; }
.wp-block-post-featured-image.article-photo img { width: 100%; height: 520px; object-fit: cover; }
.prose .wp-block-table { margin: 0; overflow-x: auto; }
.prose .wp-block-table table { width: 100%; border-collapse: collapse; background: var(--blanc); }
.prose .wp-block-table thead { border-bottom: 0; }
.prose .wp-block-table th,
.prose .wp-block-table td {
  padding: 14px 18px;
  border: 0;
  border-bottom: 1px solid var(--filet);
  text-align: left;
  vertical-align: top;
  font-size: 15px;
}
.prose .wp-block-table thead th {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--anthracite);
  border-bottom: 2px solid var(--anthracite);
}

/* ---------- Formulaires Contact Form 7, aux classes de la maquette ---------- */

.wpcf7 form { margin: 0; }
.wpcf7-form-control-wrap { display: block; }
.formulaire .wpcf7-list-item { margin: 0; }
.formulaire .wpcf7-acceptance label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.formulaire .wpcf7-acceptance input { width: 14px; height: 14px; margin: 2px 0 0; accent-color: var(--vert); flex: none; }
.formulaire .consentement { display: block; margin: 12px 0 30px; font-size: 12px; line-height: 1.5; }
.formulaire .consentement a { color: var(--vert); }
.formulaire .champ-seul { display: block; margin-top: 12px; }
.formulaire textarea { display: block; }
.formulaire input.wpcf7-submit.bouton-envoyer,
.rappel-form input.wpcf7-submit.bouton-envoyer {
  display: inline-block;
  width: auto;
  height: 48px;
  padding: 0 52px 0 24px;
  border: 0;
  border-radius: 0;
  background: var(--vert) var(--i-diag-clair) right 22px center / 15px no-repeat;
  color: var(--blanc);
  font: 500 15px/1 var(--sans);
  letter-spacing: .01em;
  text-transform: none;
  cursor: pointer;
  transition: background-color .2s, opacity .2s;
}
.formulaire input.wpcf7-submit.bouton-envoyer:hover,
.rappel-form input.wpcf7-submit.bouton-envoyer:hover { background-color: var(--vert-fonce); }
.formulaire input.wpcf7-submit.bouton-envoyer:disabled { opacity: .6; cursor: not-allowed; }
.wpcf7-spinner { display: none; }
.wpcf7-not-valid-tip { margin-top: 4px; font-size: 12px; color: #A12A1F; }
.wpcf7 form .wpcf7-response-output {
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--vert);
  font-size: 14px;
  color: var(--anthracite);
}
.rappel-form .wpcf7-form-control-wrap { width: 400px; }
.rappel-form { display: flex; justify-content: center; align-items: flex-start; gap: 20px; }

/* ---------- Adaptatif ---------- */

@media (max-width: 1240px) {
  .wp-block-navigation.menu .wp-block-navigation__container { gap: 30px; }
  .wp-block-image.realisation { flex-basis: 360px; }
}

@media (max-width: 1080px) {
  .wp-block-navigation.menu { display: none; }
  .entete .wp-block-navigation.menu-complet,
  .entete .wp-block-navigation.menu + .wp-block-navigation.menu-complet { margin-left: auto; }
  .wp-block-navigation.menu-complet .is-menu-open .wp-block-navigation__container { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .entete .wp-block-site-logo img { width: 76px; }
  .wp-block-navigation.menu-complet .is-menu-open .wp-block-navigation-item__content { padding: 12px 0 !important; font-size: 22px; }
  .heros::after, .contact::after { width: 280px; height: 105px; left: 50%; margin-left: -140px; }
  .chantiers::before { width: 300px; height: 112px; right: -120px; opacity: .45; }
  .service:not(.est-ouvert) .service-photo { inset: 26px 0; }
  .wp-block-image.realisation { flex-basis: 78vw; }
  .wp-block-image.realisation img { height: 240px; }
  .wp-block-image.conseil-photo { margin-top: -70px; }
  .wp-block-image.conseil-photo img { height: 320px; }
  .wp-block-image.tuile[class*="h-"] img { height: auto; aspect-ratio: 4 / 5; }
  .blog-grille > li:nth-child(n) { margin-top: 0; }
  .article-carte .wp-block-post-featured-image img { height: 240px; }
  .wp-block-post-featured-image.article-photo img { height: 240px; }
  .question summary { font-size: 16px; }
  .question > p { padding-right: 0; }
  .wp-block-image.bande { height: 190px; }
  .rappel-form { flex-direction: column; align-items: stretch; gap: 12px; }
  .rappel-form .wpcf7-form-control-wrap { width: auto; }
  .rappel-form input.wpcf7-submit.bouton-envoyer { width: 100%; }
  .service .service-corps > p:first-child { margin-top: 18px; }
  .formulaire .champs { grid-template-columns: 1fr; }
  .materiau::before { width: 36px; height: 36px; }
}

/* ==========================================================================
   Thème sombre « noir et vert » — adaptations propres aux blocs
   (le reste vient du bloc sombre de la maquette, plus haut dans la feuille)
   ========================================================================== */

.wp-block-navigation.menu .wp-block-navigation__submenu-container {
  background: var(--noir-2);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
}
.wp-block-navigation.menu-complet .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--noir-3) !important;
  color: var(--blanc) !important;
}
.wp-block-navigation.menu-complet .wp-block-navigation__responsive-container-close { color: var(--noir); }
.wp-block-button.bouton .wp-block-button__link { color: var(--noir); }
.wp-block-site-logo.pied-logo { background: var(--noir-3); }
.formulaire input.wpcf7-submit.bouton-envoyer,
.rappel-form input.wpcf7-submit.bouton-envoyer { color: var(--noir); background-image: var(--i-diag-sombre); }
.wpcf7-not-valid-tip { color: #F08A80; }
mark.has-inline-color { background-color: var(--teinte-1) !important; color: var(--vert-vif) !important; }