/* ============================================================
   STUDIO BÉTON — DESIGN SYSTEM
   Direction artistique dérivée des visuels réseaux sociaux :
   crème papier, taupe signature, charbon, arches organiques.
   ============================================================ */

:root {
  --creme: #EFE9DE;        /* fond principal, aspect papier texturé */
  --creme-clair: #FAF7F1;  /* fond des cartes / blocs arrondis */
  --taupe: #9E7F5C;        /* couleur signature : icônes, titres accent, boutons.
                              Assombri depuis #A98B69, qui ne donnait que 2,64:1 sur
                              le crème (seuil 3:1 pour un gros titre). Ici : 3,08:1. */
  --taupe-fonce: #7E6449;  /* hover, soulignés, badges "APRÈS", fond des CTA — assombri pour atteindre 4,5:1 (WCAG AA) */
  --taupe-clair: #D8C9B4;  /* pastilles, fonds d'icônes, bordures douces */
  --sable: #C9B394;        /* dégradés discrets, tags */
  --charbon: #2B2621;      /* footer, badges "AVANT", titres forts, bandeaux sombres */
  --encre: #26221E;        /* texte principal */
  --gris-doux: #6B6259;    /* texte secondaire */
  --blanc: #FFFFFF;
  --ok: #7A8B5E;           /* validation (vert olive discret) */

  --font-titres: "Poppins", sans-serif;
  --font-corps: "Figtree", sans-serif;
  --font-manuscrit: "Great Vibes", cursive;

  --radius-carte: 24px;
  --radius-bouton: 12px;
  --ombre-carte: 0 10px 30px rgba(43, 38, 33, .08);
  --ombre-forte: 0 18px 50px rgba(43, 38, 33, .16);
  --arche: 24px 24px 24px 120px;
  --arche-miroir: 24px 24px 120px 24px;

  --bandeau-h: 38px;
  --header-h: 76px;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-corps);
  font-size: 17px;
  line-height: 1.6;
  color: var(--encre);
  background-color: var(--creme);
  /* Texture papier/grain subtile (SVG noise, opacité ≤ 4 %) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  overflow-x: hidden;
}
/* height:auto est indispensable depuis qu'on déclare width/height sur les
   balises : sans lui, max-width:100% réduit la largeur mais garde la
   hauteur de l'attribut, et l'image s'écrase. Les règles plus spécifiques
   (.hero-photo img, .galerie-masonry img…) continuent de primer. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: 16px; }
:focus-visible { outline: 3px solid var(--taupe-fonce); outline-offset: 2px; border-radius: 4px; }
/* Sur fond charbon, le taupe foncé tombe à 2,71:1 — l'anneau de focus y était
   quasi invisible, précisément là où un visiteur au clavier en a besoin.
   Le sable donne 7,39:1 sur le même fond. */
.section-sombre :focus-visible,
.footer :focus-visible,
.menu-mobile :focus-visible { outline-color: var(--sable); }

/* Le wrapper <i data-icon> disparaît du layout : les règles ciblent le svg */
i[data-icon] { display: contents; }
.svg-plein svg { width: 100%; height: 100%; }

h1, h2, h3, h4 { font-family: var(--font-titres); line-height: 1.2; font-weight: 700; color: var(--encre); }
h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); letter-spacing: -.015em; }
h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: 600; }
p  { color: var(--gris-doux); }
strong { color: var(--encre); }

.accent { color: var(--taupe); }
.manuscrit {
  font-family: var(--font-manuscrit);
  font-weight: 400;
  color: var(--taupe-fonce);
  font-size: 1.45em;
  letter-spacing: .01em;
  display: inline-block;
  transform: rotate(-1.5deg);
  padding-right: .12em; /* les paraphes de Great Vibes débordent à droite */
}

/* Trait signature sous les titres de section */
.trait { width: 40px; height: 3px; border-radius: 3px; background: var(--taupe); margin-top: 14px; }
.centre .trait, .trait.centre { margin-left: auto; margin-right: auto; }

.container { width: min(1180px, 92vw); margin: 0 auto; }
section { padding: clamp(64px, 9vw, 128px) 0; }
.section-serree { padding: clamp(40px, 6vw, 72px) 0; }

.entete-section { max-width: 640px; margin-bottom: clamp(32px, 5vw, 56px); }
.entete-section.centre { text-align: center; margin-left: auto; margin-right: auto; }
.entete-section .surtitre {
  font-family: var(--font-titres); font-size: .8rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--taupe-fonce);
  margin-bottom: 10px;
}
.entete-section p { margin-top: 16px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-titres); font-weight: 600; font-size: .95rem;
  padding: 14px 26px; border-radius: var(--radius-bouton);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex: none; }
/* Fond taupe FONCÉ : blanc sur --taupe donnait 3,19:1, sous le minimum WCAG.
   Avec --taupe-fonce on est à 5,52:1, sans changer de famille de couleur. */
.btn-primaire { background: var(--taupe-fonce); color: var(--blanc); box-shadow: 0 6px 18px rgba(126, 100, 73, .32); }
.btn-primaire:hover { background: #5F4A34; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(95, 74, 52, .38); }
/* Lien d'évitement : sans lui, un utilisateur au clavier retraverse le
   bandeau cookies et les 8 liens d'en-tête à chaque page. */
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 9999;
  background: var(--charbon); color: var(--creme);
  padding: 12px 20px; border-radius: 8px; font-weight: 600;
  text-decoration: none; transition: top .18s ease;
}
.skip-link:focus { top: 8px; outline: 3px solid var(--sable); outline-offset: 2px; }

.btn-secondaire { background: transparent; color: var(--encre); border: 2px solid var(--charbon); }
.btn-secondaire:hover { background: var(--charbon); color: var(--creme); transform: translateY(-2px); }
/* Sur fond charbon, le bouton secondaire était encre sur charbon (1,05:1) :
   ni le texte ni la bordure n'existaient à l'œil. */
.section-sombre .btn-secondaire { color: var(--creme); border-color: var(--creme); }
.section-sombre .btn-secondaire:hover { background: var(--creme); color: var(--charbon); }
.btn-clair { background: var(--creme-clair); color: var(--encre); border: 1px solid var(--taupe-clair); }
.btn-clair:hover { border-color: var(--taupe); transform: translateY(-2px); }
.btn-blanc { background: var(--blanc); color: var(--charbon); }
.btn-blanc:hover { background: var(--creme); transform: translateY(-2px); }
.btn-grand { padding: 17px 32px; font-size: 1.02rem; }

/* ---------- Bandeau informatif (ligne info) ---------- */
.bandeau-info {
  position: relative; z-index: 60;
  background: var(--charbon); color: var(--creme);
  height: var(--bandeau-h); overflow: hidden;
  font-size: .84rem; font-weight: 500;
}
.bandeau-info.replie { display: none; }
.bandeau-piste {
  display: flex; align-items: center; height: 100%;
  width: max-content;
  animation: defilement 36s linear infinite;
}
.bandeau-info:hover .bandeau-piste { animation-play-state: paused; }
.bandeau-piste span { display: inline-flex; align-items: center; padding: 0 8px; letter-spacing: .02em; }
.bandeau-piste .losange { color: var(--taupe); font-size: .7rem; padding: 0 18px; }
@keyframes defilement { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.bandeau-fermer {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  color: var(--taupe-clair); font-size: 1rem; line-height: 1;
  /* 24×28 px auparavant : sous le pouce, on visait à côté une fois sur deux */
  min-width: 44px; min-height: 44px; padding: 0; display: grid; place-items: center;
  background: var(--charbon); z-index: 2;
}
.bandeau-fermer:hover { color: var(--blanc); }

/* ---------- Header sticky ---------- */
/* Ancres : l'en-tête est `position: sticky`, donc une cible d'ancre atterrit
   SOUS lui et le premier titre reste masqué. `scroll-margin-top` réserve sa
   hauteur (77 px) plus une respiration. Posé sur tout élément portant un id
   susceptible d'être ciblé, et sur les ancres héritées de l'ancien one-page. */
:target, .ancre-heritee, section[id], [id^="teaser-"], #nos-betons {
  scroll-margin-top: 96px;
}
/* Les ancres héritées ne sont qu'un point d'accroche : aucune hauteur, aucun
   effet sur la mise en page. */
.ancre-heritee { display: block; height: 0; }

.header {
  position: sticky; top: 0; z-index: 55;
  background: rgba(239, 233, 222, .82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(169, 139, 105, .18);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h); gap: 20px;
  position: relative;   /* repère du méga-menu : centré sur l'en-tête, pas sur le bouton */
}
.logo { display: flex; align-items: center; gap: 12px; }
/* Logo officiel (PNG crème sur transparent) : assombri sur fonds clairs */
.logo-img { height: 52px; width: auto; display: block; }
/* .logo-img.sombre appliquait filter: brightness(.18) pour foncer un logo
   blanc. Sur un fichier à fond noir opaque, ça noircissait TOUT : d'où le
   rectangle noir dans l'en-tête. Il y a désormais deux fichiers détourés,
   un par teinte — plus de filtre, plus de rectangle. */
.logo-img.grande { height: 50px; }
.logo-monogramme {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--charbon); color: var(--creme);
  display: grid; place-items: center;
  font-family: var(--font-manuscrit); font-size: 1.7rem; padding-top: 2px;
  flex: none;
}
.logo-texte { font-family: var(--font-titres); font-weight: 700; font-size: 1.02rem; letter-spacing: .14em; text-transform: uppercase; }
.logo-texte small { display: block; font-family: var(--font-corps); font-weight: 500; font-size: .62rem; letter-spacing: .08em; text-transform: none; color: var(--gris-doux); }

.nav { display: flex; align-items: center; gap: 4px; }
.nav > a, .nav-deroulant > button {
  font-family: var(--font-titres); font-weight: 500; font-size: .92rem;
  color: var(--encre); padding: 10px 13px; border-radius: 10px;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  min-height: 44px;   /* « Nos bétons » retombait à 42 px : le bouton du menu déroulant n'a pas de descendante qui allonge sa ligne */
  transition: background .18s ease, color .18s ease;
}
.nav > a:hover, .nav-deroulant > button:hover { background: rgba(169, 139, 105, .14); }
.nav > a.actif { color: var(--taupe-fonce); position: relative; }
.nav > a.actif::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px;
  height: 3px; border-radius: 3px; background: var(--taupe);
}
.nav-deroulant { position: relative; }
.nav-deroulant > button svg { width: 14px; height: 14px; transition: transform .2s ease; }
.nav-deroulant.ouvert > button svg { transform: rotate(180deg); }
.sous-menu {
  position: absolute; top: calc(100% + 8px); left: 0;
  background: var(--creme-clair); border-radius: 18px; box-shadow: var(--ombre-forte);
  border: 1px solid rgba(169, 139, 105, .2);
  padding: 10px; display: none;
}
.nav-deroulant.ouvert .sous-menu { display: block; }
.sous-menu a {
  display: block; padding: 9px 14px; border-radius: 12px;
  font-size: .92rem; font-weight: 500; color: var(--encre);
}
.sous-menu a:hover { background: var(--creme); color: var(--taupe-fonce); }
.sous-menu a small { display: block; font-weight: 400; font-size: .78rem; color: var(--gris-doux); }

/* ---------- Méga-menu « Nos bétons » ----------
   Onze liens en colonne unique descendaient sous la ligne de flottaison et
   ne disaient rien de l'usage. Trois colonnes, classées par question du
   visiteur, tiennent dans un écran d'ordinateur portable. Le panneau est
   centré sous l'en-tête plutôt qu'aligné à gauche du bouton : à trois
   colonnes, il déborderait à droite sur un écran de 1280 px. */
.nav-deroulant:has(.mega-menu) { position: static; }
.mega-menu {
  left: 50%; transform: translateX(-50%);
  top: calc(100% - 6px);
  width: min(940px, calc(100vw - 48px));
  padding: 22px 22px 18px;
  display: none; gap: 22px;
  grid-template-columns: 1fr 300px;
}
.nav-deroulant.ouvert .mega-menu { display: grid; }
/* Passerelle invisible entre le bouton et le panneau.
   Il y a 10 px de vide entre les deux : en descendant vers le menu, le
   pointeur y survolait le néant, « mouseleave » se déclenchait et le
   panneau se refermait avant qu'on l'atteigne. Cette bande transparente
   appartient au panneau, donc le survol ne s'interrompt jamais.
   Elle déborde largement en largeur pour couvrir aussi les trajectoires
   obliques venant du bouton. */
.mega-menu::before {
  content: ""; position: absolute; left: 0; right: 0;
  top: -18px; height: 18px;
}
.mega-colonnes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 14px; align-items: start; }
.mega-titre {
  font-family: var(--font-titres); font-size: .76rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--taupe-fonce);
  padding: 0 14px 6px; margin: 0;
  border-bottom: 1px solid rgba(169, 139, 105, .22); margin-bottom: 6px;
}
.mega-colonne a { white-space: normal; }

/* L'encart n'est pas un lien de plus : c'est la sortie proposée à celui qui
   ne sait pas choisir — c'est-à-dire la majorité des visiteurs. */
.mega-encart {
  display: flex !important; flex-direction: column; gap: 7px;
  padding: 20px !important; border-radius: 14px;
  background: var(--charbon); color: var(--creme) !important;
  align-self: stretch; justify-content: center;
}
.mega-encart:hover { background: var(--taupe-fonce); color: var(--creme) !important; }
.mega-encart-titre { font-family: var(--font-titres); font-weight: 700; font-size: 1.02rem; color: var(--blanc); }
.mega-encart-texte { font-size: .84rem; line-height: 1.5; color: rgba(239, 233, 222, .78); font-weight: 400; }
.mega-encart-lien { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; font-size: .88rem; font-weight: 600; color: var(--sable); }
.mega-encart-lien svg { width: 15px; height: 15px; }

@media (max-width: 1180px) {
  /* On garde les trois colonnes — c'est ce qui tient le panneau court — et
     l'encart passe en bandeau sous les liens. */
  .mega-menu { grid-template-columns: 1fr; width: min(760px, calc(100vw - 40px)); gap: 16px; }
  .mega-encart { flex-direction: row; align-items: center; gap: 8px 18px; flex-wrap: wrap; padding: 14px 18px !important; }
  .mega-encart-texte { flex: 1 1 300px; }
}
@media (max-width: 720px) {
  .mega-colonnes { grid-template-columns: repeat(2, 1fr); }
}

.header-actions { display: flex; align-items: center; gap: 10px; }
.header-tel {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--charbon); color: var(--charbon); transition: all .2s ease;
}
.header-tel:hover { background: var(--charbon); color: var(--creme); }
.header-tel svg { width: 19px; height: 19px; }

.burger { display: none; width: 44px; height: 44px; border-radius: 12px; place-items: center; color: var(--encre); }
.burger svg { width: 26px; height: 26px; }

/* Menu mobile */
.menu-mobile {
  position: fixed; inset: 0; z-index: 70; background: var(--creme);
  padding: 24px; display: none; flex-direction: column; overflow-y: auto;
}
.menu-mobile.ouvert { display: flex; }
.menu-mobile-haut { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
.menu-mobile nav a {
  display: block; font-family: var(--font-titres); font-weight: 600;
  font-size: 1.25rem; padding: 13px 6px; min-height: 44px; border-bottom: 1px solid rgba(169, 139, 105, .18);
}
.menu-mobile nav a.sous { font-size: .98rem; font-weight: 500; padding-left: 24px; color: var(--gris-doux); }
.menu-mobile .btn { margin-top: 24px; justify-content: center; }

/* ---------- Hero ---------- */
.hero { padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 8vw, 110px); overflow: hidden; }
.hero-grille {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.hero-texte .surtitre {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-titres); font-size: .8rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--taupe-fonce);
  margin-bottom: 18px;
}
.hero-texte .surtitre::before { content: ""; width: 26px; height: 3px; border-radius: 3px; background: var(--taupe); }
.hero-texte p.chapo { margin: 22px 0 30px; font-size: 1.08rem; max-width: 46ch; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-photo { position: relative; }
.hero-photo img {
  width: 100%; height: clamp(380px, 46vw, 560px); object-fit: cover;
  border-radius: 130px 24px 24px 24px; box-shadow: var(--ombre-forte);
}
.hero-badge {
  position: absolute; left: -18px; bottom: 34px;
  background: var(--creme-clair); border-radius: 18px; box-shadow: var(--ombre-carte);
  padding: 14px 20px; display: flex; align-items: center; gap: 12px;
  border: 1px solid rgba(169, 139, 105, .2);
}
.hero-badge strong { font-family: var(--font-titres); font-size: .95rem; display: block; }
.hero-badge small { color: var(--gris-doux); font-size: .78rem; }

/* ---------- Duo de visuels du hero d'accueil ----------
   Deux photos côte à côte, de HAUTEUR IDENTIQUE : la hauteur est portée par
   le conteneur et les images la remplissent en `cover`. C'est ce qui permet
   de mélanger une source paysage (1600 × 1200) et une portrait (1200 × 1600)
   sans que l'une dépasse l'autre — le défaut que Lambert a relevé le 06/08.
   La large porte le sujet, l'étroite fait respirer et évite l'effet carte
   postale unique. L'arrondi profond en haut à gauche est la signature du
   site (.hero-photo, .alterne .photo). */
.hero-visuels {
  display: grid; grid-template-columns: 1.15fr .85fr;
  /* ⚠️ `grid-template-rows: 100%` est INDISPENSABLE. Sans lui la rangée est
     en `auto` : le `height: 100%` des images ne se résout sur rien, elles
     reprennent leur hauteur naturelle et étirent la rangée. Invisible en
     1280 (où le conteneur est plus haut que les images), mais mesuré à 768 :
     conteneur 353 px, images 532 px — elles débordaient par le bas. */
  grid-template-rows: 100%;
  gap: 14px; height: clamp(400px, 44vw, 540px);
}
.hero-visuels img {
  width: 100%; height: 100%; min-height: 0; object-fit: cover;
  border-radius: 22px; box-shadow: var(--ombre-carte);
}
.hero-visuels img:first-child { border-top-left-radius: 120px; }
@media (max-width: 1024px) {
  /* Sous 1024 la grille du hero passe à une colonne (.hero-grille) : le duo
     s'étale alors sur toute la largeur, donc on l'aplatit. */
  .hero-visuels { height: clamp(300px, 46vw, 420px); gap: 12px; }
  .hero-visuels img:first-child { border-top-left-radius: 80px; }
}
@media (max-width: 560px) {
  /* Deux colonnes tiendraient encore, mais l'étroite tomberait à ~90 px de
     large : on garde la principale seule, en 4/3, et on masque la seconde
     plutôt que de servir une vignette illisible. */
  .hero-visuels { grid-template-columns: 1fr; height: auto; aspect-ratio: 4 / 3; }
  .hero-visuels img:last-child { display: none; }
  .hero-visuels img:first-child { border-top-left-radius: 60px; }
}

/* ---------- Hero à photo de fond (accueil) ----------
   Demandé par le client le 01/08, rétabli le 06/08 — mais la photo doit se
   VOIR, ce qui n'était pas le cas : posée à 26 % d'opacité sur le charbon,
   elle n'était plus qu'une texture. Lambert : « si l'image de fond est
   complètement pas mise en avant, c'est pas très bien. »

   Le principe change donc du tout au tout :
   — la photo passe à PLEINE intensité (`::before` en opacity 1) ;
   — la lisibilité n'est plus obtenue en éteignant l'image partout, mais par
     un voile DIRECTIONNEL (`::after`) : dense à gauche, derrière le texte,
     et nul à droite, où la piscine et la plage de béton restent franches.

   C'est ce qui permet d'avoir en même temps une image nette et un texte au
   contraste tenu. Les ratios sont mesurés sur le rendu réel (échantillonnage
   des pixels sous chaque bloc), pas estimés — voir le commentaire du bloc
   mobile pour le cas le plus serré. */
.hero-fond { padding: clamp(66px, 10vw, 132px) 0 clamp(58px, 8vw, 116px); }
/* ⚠️ DEUX classes dans le sélecteur, c'est indispensable. `.hero-fond::before`
   et `.section-sombre::before` ont la MÊME spécificité, et le second est
   déclaré 90 règles plus bas : c'est lui qui gagnait. Conséquence, découverte
   en mesurant `getComputedStyle(sec,'::before').opacity` : la photo du hero
   n'a jamais été à 26 % comme l'annonçait le commentaire du 01/08 — elle
   était à 14 %, la valeur commune à toutes les sections sombres. */
.hero-fond.section-sombre::before { opacity: 1; }
.hero-fond::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* Allégé le 09/08 avec la nouvelle photo (allée à motif dalle). Mesuré sur
     la zone réellement occupée par le texte : le pixel le plus clair du fond
     y est un blanc pur (mur de la maison). Sous un voile à 78 %, du blanc
     dessus donne 8,9:1 — très au-dessus des 4,5 exigés pour le chapô et des
     3 pour le titre. On peut donc rendre 12 points de densité à la photo
     sans approcher le seuil. */
  background: linear-gradient(96deg,
    rgba(29, 25, 21, .84) 0%,
    rgba(29, 25, 21, .78) 30%,
    rgba(29, 25, 21, .60) 46%,
    rgba(29, 25, 21, .28) 60%,
    rgba(29, 25, 21, .08) 74%,
    rgba(29, 25, 21, 0) 88%);
}
/* Le texte porte sa PROPRE lisibilité, au lieu de la faire payer à l'image.
   Une ombre portée coûte quelques pixels sombres collés aux lettres ; un
   voile plus dense coûterait toute la moitié droite de la photo. C'est ce
   qui permet d'ouvrir le dégradé à zéro dès 88 % — la piscine et la plage
   de béton restent franches. */
.hero-fond .hero-fond-contenu > * {
  text-shadow: 0 2px 14px rgba(18, 15, 12, .55), 0 1px 3px rgba(18, 15, 12, .5);
}
/* Sauf ce qui a déjà son propre fond : l'ombre y baverait sur la pastille. */
.hero-fond .mini-pastille .rond,
.hero-fond .hero-lieu { text-shadow: none; }
/* Les boutons du hero : AUCUNE ombre, ni portée ni sur le texte.
   Ils cumulaient les deux — le `box-shadow` de `.btn-primaire` et le
   `text-shadow` hérité du bloc ci-dessus. Sur un aplat opaque, l'ombre du
   texte ne sert à rien (le contraste est déjà tenu par le fond du bouton) et
   l'ombre portée alourdit la seule zone où l'œil doit aller vite. */
.hero-fond .hero-ctas .btn,
.hero-fond .hero-ctas .btn:hover { text-shadow: none; box-shadow: none; }
/* Le bloc texte reste dans la moitié dense : à 760 px il mordait sur la zone
   où le voile est déjà tombé sous 30 %. */
.hero-fond .hero-fond-contenu { max-width: 640px; }
@media (max-width: 900px) {
  /* Sous 900 le texte occupe toute la largeur : un voile latéral ne le
     couvrirait plus. Il devient vertical — dense en haut, où sont le titre
     et le chapô, et il s'ouvre vers le bas.

     Ces quatre valeurs sont le voile le plus LÉGER qui reste conforme AA :
     mesuré à 375 × 823 sur cinq réglages, en échantillonnant le fond réel
     sous chaque bloc. À .78/.74/.60/.40 le sur-titre tient 4,58:1 pour un
     seuil de 4,5 ; au réglage suivant (.72) il tombe à 3,79 et sort. Ne pas
     les alléger davantage sans refaire la mesure. */
  .hero-fond::after {
    background: linear-gradient(178deg,
      rgba(29, 25, 21, .78) 0%,
      rgba(29, 25, 21, .74) 55%,
      rgba(29, 25, 21, .60) 78%,
      rgba(29, 25, 21, .40) 100%);
  }
  /* Le hero mobile est très haut : en `cover`, la photo est rognée sur les
     côtés et c'est son CENTRE qui reste — le bosquet. On décale le cadrage
     vers la droite pour garder la piscine et la plage de béton, c'est-à-dire
     le sujet, plutôt qu'un massif de végétation. */
  .hero-fond.section-sombre::before { background-position: 72% center; }
}
/* (la largeur du bloc est déclarée plus haut, avec le voile — ne pas la
   redéclarer ici : c'est la dernière déclaration qui gagnerait) */
/* Sur-titre en CRÈME et non en sable, contrairement aux autres sections
   sombres : le sable tombait à 4,44:1 pour un seuil de 4,5 une fois le
   cadrage mobile décalé sur la piscine. L'éclaircir coûte une nuance de
   chaleur ; le corriger par le voile aurait coûté la visibilité de la photo,
   qui est justement ce qu'on cherche ici. */
/* ⚠️ Là encore DEUX classes côté hero : `.section-sombre .surtitre` a la même
   spécificité et est déclarée plus bas — c'est le troisième endroit de ce
   fichier où une règle du hero est silencieusement écrasée par le bloc des
   sections sombres. Vérifier la couleur CALCULÉE, pas la feuille de style. */
.hero-fond.section-sombre .surtitre { color: var(--creme); }
/* Le taupe du mot mis en avant est pensé pour le fond crème : sur la photo il
   tombait à 3,33:1, juste au-dessus du seuil. Le sable le remonte largement
   sans qu'il soit nécessaire de réassombrir l'image. */
.hero-fond h1 .accent { color: var(--sable); }
.hero-fond .surtitre::before { background: var(--sable); }
.hero-fond p.chapo { margin: 22px 0 32px; font-size: 1.08rem; max-width: 52ch; }
/* Le chapô hérite du crème à 78 % de `.section-sombre p` — calibré pour un
   aplat charbon, pas pour une PHOTO. Mesuré sur le fond réel : au pixel le
   plus clair de la zone, il tombait à 4,26:1, sous les 4,5 exigés pour du
   texte de 17 px. À 92 % il remonte à 6,0:1. Le titre et la pastille, en
   blanc plein, étaient déjà largement au-dessus.
   Sous 900 px le voile passe en vertical et s'ouvre plus vite : à 92 % le
   chapô y retombait à 4,14:1. Il passe donc en crème PLEIN en mobile —
   4,96:1 — plutôt que de redensifier le voile, ce qui aurait coûté la photo
   sur tout l'écran alors que le problème ne concerne qu'une ligne de texte. */
.hero-fond p.chapo { color: rgba(239, 233, 222, .92); }
@media (max-width: 900px) { .hero-fond p.chapo { color: var(--creme); } }
.hero-fond .mini-pastilles { margin-top: 38px; }
.hero-fond .mini-pastille .rond { background: rgba(216, 201, 180, .92); }
/* Le texte est dans UN seul enfant flex : sinon « Basés à Saint-Paul » et
   « — intervention sur toute l'île » devenaient deux colonnes qui se
   coupaient chacune de leur côté sur un écran de 390 px.
   Repassé en teintes SOMBRES le 06/08 : le hero d'accueil est redevenu un
   fond crème, la pastille y était écrite en blanc sur crème. */
.hero-lieu {
  display: inline-flex; align-items: center; gap: 11px; margin-top: 34px;
  padding: 11px 20px; border-radius: 999px;
  background: rgba(169, 139, 105, .1); border: 1px solid rgba(169, 139, 105, .32);
  font-family: var(--font-titres); font-weight: 600; font-size: .9rem;
  color: var(--encre); line-height: 1.45;
}
.hero-lieu .secondaire { font-weight: 400; color: var(--gris-doux); }
.hero-lieu svg { width: 18px; height: 18px; color: var(--taupe-fonce); flex: none; align-self: flex-start; margin-top: 3px; }
/* Variante sur fond sombre, si le bloc est réutilisé dans une .section-sombre */
.section-sombre .hero-lieu {
  background: rgba(250, 247, 241, .08); border-color: rgba(216, 201, 180, .3); color: var(--blanc);
}
.section-sombre .hero-lieu .secondaire { color: rgba(239, 233, 222, .8); }
.section-sombre .hero-lieu svg { color: var(--sable); }

/* ---------- Carte de finition sans photo ----------
   Utilisée quand nous n'avons pas encore de photo VRAIE de la finition.
   Illustrer un béton par un autre serait mentir sur le produit — c'est la
   règle qu'on s'applique déjà pour les avis clients et le teinté masse.
   Reprend le motif de la carte sombre déjà en place sur « nos bétons ». */
.carte-beton .visuel-attente {
  height: 220px; background: var(--charbon); display: grid; place-items: center;
  gap: 10px; align-content: center; text-align: center; padding: 0 26px;
  background-image: radial-gradient(circle at 30% 25%, rgba(201, 179, 148, .14), transparent 62%);
}
.carte-beton .visuel-attente .pastille { background: rgba(216, 201, 180, .16); color: var(--sable); }
.carte-beton .visuel-attente small {
  font-family: var(--font-titres); font-weight: 600; font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(239, 233, 222, .72);
}

/* Rangée mini-pastilles (Durable · Facile · Personnalisable · Climat) */
.mini-pastilles { display: flex; flex-wrap: wrap; gap: clamp(14px, 2.6vw, 34px); margin-top: 40px; }
.mini-pastille { display: flex; align-items: center; gap: 10px; font-family: var(--font-titres); font-weight: 600; font-size: .88rem; }
.mini-pastille .rond {
  width: 40px; height: 40px; border-radius: 50%; background: var(--taupe-clair);
  display: grid; place-items: center; color: var(--charbon); flex: none;
}
.mini-pastille .rond svg { width: 19px; height: 19px; }

/* ---------- Pastilles d'icônes & checkmarks ---------- */
.pastille {
  width: 56px; height: 56px; border-radius: 50%; background: var(--taupe);
  display: grid; place-items: center; color: var(--blanc); flex: none;
}
.pastille svg { width: 25px; height: 25px; }
.pastille.claire { background: var(--taupe-clair); color: var(--charbon); }

.liste-checks { display: grid; gap: 13px; }
.liste-checks li { display: flex; gap: 12px; align-items: flex-start; color: var(--gris-doux); }
.liste-checks li strong { color: var(--encre); }
.check {
  width: 24px; height: 24px; border-radius: 50%; background: var(--taupe);
  display: grid; place-items: center; flex: none; margin-top: 2px;
}
.check svg { width: 13px; height: 13px; color: var(--blanc); }

/* Badges pills AVANT / APRÈS / PENDANT */
.badge-pill {
  display: inline-block; font-family: var(--font-titres); font-weight: 600;
  font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 7px 16px; border-radius: 11px; color: var(--blanc);
}
.badge-avant { background: var(--charbon); }
.badge-apres, .badge-pendant { background: var(--taupe-fonce); }

/* ---------- Cartes ---------- */
.carte {
  background: var(--creme-clair); border-radius: var(--radius-carte);
  box-shadow: var(--ombre-carte); border: 1px solid rgba(169, 139, 105, .14);
  padding: clamp(24px, 3vw, 34px);
  transition: transform .25s ease, box-shadow .25s ease;
}
.carte:hover { transform: translateY(-5px); box-shadow: var(--ombre-forte); }

/* Bande de confiance — chiffres animés */
.bande-chiffres {
  /* auto-fit et non repeat(4,…) : la bande ne porte que les chiffres vérifiables,
     leur nombre change quand une donnée est validée ou retirée. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px;
  background: var(--creme-clair); border-radius: 28px; box-shadow: var(--ombre-carte);
  border: 1px solid rgba(169, 139, 105, .16);
  padding: clamp(28px, 4vw, 44px);
}
.chiffre-bloc { text-align: center; padding: 6px 10px; }
.chiffre-bloc .valeur {
  font-family: var(--font-titres); font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem); color: var(--taupe-fonce); line-height: 1.1;
}
.chiffre-bloc .legende { font-size: .88rem; color: var(--gris-doux); margin-top: 6px; }
.chiffre-bloc .a-valider { display: block; font-size: .68rem; color: var(--taupe); letter-spacing: .05em; margin-top: 3px; }

/* ---------- Grille des bétons ---------- */
.grille-betons { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.5vw, 28px); }
.grille-betons.grille-quatre { grid-template-columns: repeat(4, 1fr); }
.carte-beton { overflow: hidden; padding: 0; display: flex; flex-direction: column; }
.carte-beton img { width: 100%; height: 220px; object-fit: cover; transition: transform .4s ease; }
.carte-beton:hover img { transform: scale(1.04); }
.carte-beton .corps { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.carte-beton h3 { display: flex; align-items: center; gap: 10px; }
.carte-beton .tag {
  align-self: flex-start; font-size: .76rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--charbon);
  background: rgba(216, 201, 180, .45); padding: 5px 12px; border-radius: 9px;
}
.carte-beton p { font-size: .93rem; flex: 1; }
.lien-fleche {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-titres); font-weight: 600; font-size: .9rem; color: var(--taupe-fonce);
  /* zone tactile pleine : ces liens sont des appels à l'action à part
     entière, pas des liens noyés dans un paragraphe. 32 px passait la
     norme AA (24 px) mais restait inconfortable au doigt. */
  min-height: 44px; padding: 10px 0;
}
.lien-fleche svg { width: 16px; height: 16px; transition: transform .2s ease; }
.lien-fleche:hover svg { transform: translateX(4px); }

/* ---------- Slider avant / après ---------- */
.comparateur {
  position: relative; border-radius: var(--radius-carte); overflow: hidden;
  box-shadow: var(--ombre-forte); user-select: none; touch-action: none;
  aspect-ratio: 16 / 10; background: var(--charbon);
}
.comparateur img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.comparateur .calque-avant { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.comparateur .poignee {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 4px;
  background: var(--blanc); transform: translateX(-50%); cursor: ew-resize; z-index: 3;
}
.comparateur .poignee::after {
  content: "⟷"; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--blanc); color: var(--charbon);
  display: grid; place-items: center; font-size: 1.1rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.comparateur .badge-pill { position: absolute; top: 18px; z-index: 2; }
.comparateur .badge-avant { left: 18px; }
.comparateur .badge-apres { right: 18px; }

/* Deux avant/après côte à côte (accueil). Sur mobile ils s'empilent : deux
   comparateurs à glisser sur une même largeur seraient inutilisables. */
.duo-comparateurs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 30px); }
.duo-comparateurs figure { margin: 0; }
.duo-comparateurs figcaption {
  margin-top: 12px; font-size: .88rem; line-height: 1.45;
  color: rgba(239,233,222,.75); text-align: center;
}
@media (max-width: 860px) { .duo-comparateurs { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- Avant / après côte à côte ----------
   Le curseur du .comparateur suppose deux photos du MÊME cadrage. Quand
   l'avant et l'après sont pris depuis deux côtés opposés du bassin (cas de
   la plage de piscine, confirmé par le client le 05/08), glisser la poignée
   ferait apparaître une autre scène. Deux images étiquetées disent la même
   chose sans ce mensonge visuel.
   Chaque vignette est en 4/5 : à deux, elles occupent exactement la même
   hauteur qu'un .comparateur voisin en 16/10. */
.paire-avant-apres { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.paire-avant-apres figure {
  position: relative; margin: 0; border-radius: var(--radius-carte);
  overflow: hidden; box-shadow: var(--ombre-forte);
  aspect-ratio: 4 / 5; background: var(--charbon);
}
.paire-avant-apres img { width: 100%; height: 100%; object-fit: cover; display: block; }
.paire-avant-apres .badge-pill { position: absolute; top: 10px; left: 10px; z-index: 2; }

/* ---------- Sections alternées photo/texte ---------- */
.alterne { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.alterne + .alterne { margin-top: clamp(56px, 8vw, 100px); }
/* Enfant DIRECT uniquement : sinon ce height écrase celui des <img> imbriquées
   dans un .comparateur ou une .paire-avant-apres, qui doivent remplir leur
   conteneur à ratio fixe. */
.alterne .photo > img {
  width: 100%; height: clamp(300px, 36vw, 440px); object-fit: cover;
  border-radius: var(--arche); box-shadow: var(--ombre-carte);
}
.alterne.inverse .photo { order: 2; }
.alterne.inverse .photo > img { border-radius: var(--arche-miroir); }
/* Même principe que .carte-beton .visuel-attente, à l'échelle d'un hero de
   fiche : tant que nous n'avons pas de photo de la finition, nous le disons
   au lieu d'en montrer une autre. */
.alterne .photo .visuel-attente {
  height: clamp(300px, 36vw, 440px); border-radius: var(--arche);
  background: var(--charbon); box-shadow: var(--ombre-carte);
  background-image: radial-gradient(circle at 32% 26%, rgba(201, 179, 148, .16), transparent 64%);
  display: grid; place-items: center; align-content: center; gap: 14px;
  text-align: center; padding: 0 clamp(24px, 4vw, 44px);
}
.alterne .photo .visuel-attente .pastille { background: rgba(216, 201, 180, .16); color: var(--sable); }
.alterne .photo .visuel-attente strong {
  font-family: var(--font-titres); font-size: 1rem; color: var(--blanc);
}
.alterne .photo .visuel-attente p { font-size: .9rem; color: rgba(239, 233, 222, .74); margin: 0; }
.alterne .texte h2, .alterne .texte h3 { margin-bottom: 14px; }
.alterne .texte p { margin-bottom: 18px; }

/* ---------- Timeline méthode (4 étapes) ---------- */
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; position: relative; }
.timeline::before {
  content: ""; position: absolute; top: 32px; left: 8%; right: 8%;
  height: 2px; background: var(--taupe-clair); z-index: 0;
}
.etape { position: relative; z-index: 1; text-align: center; padding: 0 6px; }
.etape .numero {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 18px;
  background: var(--creme-clair); border: 2px solid var(--taupe);
  display: grid; place-items: center;
  font-family: var(--font-titres); font-weight: 700; font-size: 1.35rem; color: var(--taupe-fonce);
  box-shadow: var(--ombre-carte);
}
.etape h3 { font-size: 1.05rem; margin-bottom: 8px; }
.etape p { font-size: .88rem; }

/* ---------- Sections sombres (charbon) ---------- */
.section-sombre {
  background: var(--charbon); color: var(--creme);
  position: relative; overflow: hidden;
}
.section-sombre::before {
  content: ""; position: absolute; inset: 0;
  background: var(--photo-fond) center / cover no-repeat;
  opacity: .14;
}
.section-sombre > .container { position: relative; z-index: 1; }
.section-sombre h1, .section-sombre h2, .section-sombre h3 { color: var(--blanc); }
/* Le sur-titre est déclaré en --taupe-fonce, pensé pour le fond crème :
   posé sur le charbon il tombait à 2,71:1. Le sable donne 4,70:1. */
.section-sombre .surtitre, .section-sombre .entete-section .surtitre { color: var(--sable); }
.section-sombre p { color: rgba(239, 233, 222, .78); }
/* Les listes à puces héritaient de --gris-doux sur fond charbon : 2,51:1,
   quasi illisible. Elles sont utilisées dans les études de cas de la page
   Réalisations, c'est-à-dire au moment où le visiteur cherche une preuve. */
.section-sombre .liste-checks li,
.section-sombre .liste-checks li > span { color: rgba(239, 233, 222, .82); }
.section-sombre .liste-checks li strong { color: var(--blanc); }
/* La règle globale `strong { color: var(--encre) }` peignait les passages en
   gras en presque-noir, y compris sur fond charbon : le texte disparaissait
   purement et simplement. Le cas était déjà traité pour les listes à puces ;
   il manquait pour les paragraphes, où il est apparu en posant le hero de
   l'accueil sur une photo de fond. */
.section-sombre p strong { color: var(--blanc); }
.section-sombre .manuscrit { color: var(--sable); }
.section-sombre .trait { background: var(--sable); }

/* Teaser simulateur */
.teaser-simu {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 5vw, 64px); align-items: center;
}
.mini-simu {
  background: rgba(250, 247, 241, .07); border: 1px solid rgba(216, 201, 180, .25);
  border-radius: 22px; padding: 28px; display: grid; gap: 16px;
  backdrop-filter: blur(4px);
}
.mini-simu label { font-family: var(--font-titres); font-weight: 600; font-size: .85rem; color: var(--creme); display: block; margin-bottom: 7px; }
.mini-simu select, .mini-simu input {
  width: 100%; padding: 13px 16px; border-radius: 12px;
  border: 1px solid rgba(216, 201, 180, .35); background: rgba(43, 38, 33, .5);
  color: var(--creme); appearance: none;
}
.mini-simu select:focus, .mini-simu input:focus { outline: 2px solid var(--taupe); }

/* ---------- Galerie réalisations ---------- */
/* Grille RÉGULIÈRE, plus en maçonnerie (06/08, demande de Lambert).
   En `columns: 3`, chaque vignette gardait le ratio de sa source : les
   photos portrait (1200 × 1600) faisaient une fois et demie la hauteur des
   paysage (1600 × 828) et les colonnes finissaient décalées les unes des
   autres. Ici la HAUTEUR est imposée par le conteneur, en 4/3, et l'image
   la remplit en `cover` : toutes les vignettes sont alignées et de même
   taille, quelle que soit l'orientation de la photo d'origine.
   Le 4/3 est le meilleur compromis mesuré sur ce fonds mixte — en 1/1 les
   panoramiques perdaient leurs deux bords, en 16/9 les portraits étaient
   tranchés au tiers.
   (La classe garde son nom : elle est écrite dans les 9 pages HTML.) */
.galerie-masonry { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* Variante 2 colonnes pour les galeries qui n'ont que 2 photos : à 3 colonnes
   la grille part en biais. En classe et non en style inline, sinon elle
   battrait les media queries — le piège corrigé le 05/08 sur les 6 fiches. */
.galerie-masonry.deux { grid-template-columns: repeat(2, 1fr); }
/* `content-visibility: auto` : le navigateur saute la mise en page et le
   rendu des vignettes hors écran. Sur realisations.html (49 figures affichées),
   c'est l'essentiel du coût de rendu initial.
   `contain-intrinsic-size` est OBLIGATOIRE avec : sans elle, chaque figure
   est estimée à 0 px de haut, la page se replie et la barre de défilement
   saute à mesure que le contenu se révèle. La valeur suit le ratio 4/3 de la
   vignette pour une colonne de ~380 px. */
.galerie-masonry figure {
  content-visibility: auto;
  contain-intrinsic-size: auto 285px;
}
.galerie-masonry figure {
  margin: 0; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3;
  position: relative; cursor: zoom-in; box-shadow: var(--ombre-carte);
}
/* height:100% + cover : sans la hauteur, le `img{height:auto}` du reset
   laisserait l'image reprendre son ratio natif à l'intérieur du cadre. */
.galerie-masonry img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.galerie-masonry figure:hover img { transform: scale(1.05); }
.galerie-masonry figcaption {
  position: absolute; inset: auto 0 0 0; padding: 34px 16px 14px;
  background: linear-gradient(transparent, rgba(43, 38, 33, .78));
  color: var(--creme); font-size: .84rem; font-weight: 500;
  opacity: 0; transition: opacity .3s ease;
}
.galerie-masonry figure:hover figcaption { opacity: 1; }

.filtres { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.filtre {
  font-family: var(--font-titres); font-weight: 600; font-size: .86rem;
  padding: 11px 20px; border-radius: 999px;
  background: var(--creme-clair); color: var(--gris-doux);
  border: 1px solid rgba(169, 139, 105, .25); transition: all .2s ease;
}
.filtre:hover { color: var(--encre); border-color: var(--taupe); }
/* Texte de 13,8 px : il faut 4,5:1, pas 3:1. Le taupe foncé donne 5,52:1. */
.filtre.actif { background: var(--taupe-fonce); color: var(--blanc); border-color: var(--taupe-fonce); }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 90; background: rgba(38, 34, 30, .92);
  display: none; place-items: center; padding: 4vw; cursor: zoom-out;
}
.lightbox.ouvert { display: grid; }
.lightbox img { max-width: 92vw; max-height: 88vh; width: auto; border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.lightbox-fermer { position: absolute; top: 22px; right: 26px; color: var(--creme); font-size: 2rem; }

/* ---------- FAQ accordéon ---------- */
.faq { display: grid; gap: 14px; max-width: 820px; margin: 0 auto; }
.faq details {
  background: var(--creme-clair); border-radius: 18px;
  border: 1px solid rgba(169, 139, 105, .16); box-shadow: var(--ombre-carte);
  overflow: hidden;
}
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 56px 20px 24px;
  font-family: var(--font-titres); font-weight: 600; font-size: 1rem;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%; background: var(--taupe-clair);
  display: grid; place-items: center; font-size: 1.2rem; color: var(--charbon);
  transition: transform .25s ease;
}
.faq details[open] summary::after { content: "–"; transform: translateY(-50%) rotate(180deg); }
.faq .reponse { padding: 0 24px 22px; font-size: .95rem; color: var(--gris-doux); }

/* ---------- Encadré engagement (pill feuille) ---------- */
.encadre-engagement {
  display: flex; align-items: center; gap: 18px;
  background: var(--creme-clair); border: 1px solid var(--taupe-clair);
  border-radius: 999px; padding: 18px 30px;
  box-shadow: var(--ombre-carte); max-width: 860px; margin: clamp(40px, 6vw, 64px) auto 0;
}
.encadre-engagement p { font-size: .98rem; }
.encadre-engagement strong { color: var(--taupe-fonce); }

/* ---------- CTA final ---------- */
.cta-final { text-align: center; }
.cta-final h2 { max-width: 640px; margin: 0 auto 14px; }
.cta-final p { max-width: 520px; margin: 0 auto 30px; }
.cta-final .actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.tel-geant {
  font-family: var(--font-titres); font-weight: 700; font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--blanc); display: inline-flex; align-items: center; gap: 12px; margin-bottom: 26px;
  min-height: 44px;   /* le numéro du bloc final : la cible de conversion la plus directe du site */
}
.tel-geant svg { width: 26px; height: 26px; color: var(--sable); flex: none; }

/* ---------- Footer ---------- */
.footer { background: var(--charbon); color: rgba(239, 233, 222, .75); font-size: .92rem; }
.footer a:hover { color: var(--blanc); }
.footer-haut {
  display: grid; grid-template-columns: 1.15fr .85fr 1fr 1.2fr;
  gap: clamp(20px, 2.4vw, 34px); padding: clamp(30px, 3.2vw, 42px) 0;
}
.footer h4 { color: var(--blanc); font-size: .88rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 9px; }
.footer .logo-monogramme { background: var(--taupe); }
.footer .logo-texte { color: var(--blanc); }
.footer .logo-texte small { color: rgba(239, 233, 222, .55); }
.footer-nav a, .footer-contact a { display: flex; align-items: center; padding: 2px 0; min-height: 30px; }
/* Cible tactile élargie sur les écrans étroits — téléphones et tablettes.
   Au-dessus, on est à la souris : imposer 44 px à chacun des douze liens
   étirait le pied de page d'un tiers sans rien apporter. */
@media (max-width: 900px) {
  .footer-nav a, .footer-contact a { min-height: 44px; }
}
.footer-contact li { display: flex; gap: 9px; align-items: flex-start; padding: 2px 0; }
.footer-contact svg { width: 17px; height: 17px; margin-top: 4px; color: var(--taupe); flex: none; }
.footer-reseaux { display: flex; gap: 10px; margin-top: 12px; }
.footer-reseaux a {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(216, 201, 180, .35);
  display: grid; place-items: center; transition: all .2s ease;
}
.footer-reseaux a:hover { background: var(--taupe); border-color: var(--taupe); }
.footer-reseaux svg { width: 17px; height: 17px; }
.footer-ile { display: flex; align-items: flex-start; gap: 14px; }
.footer-ile { align-items: center; }
.footer-ile svg { width: 58px; height: 52px; color: var(--sable); flex: none; opacity: .9; }
.footer-communes { font-size: .8rem; line-height: 1.65; color: rgba(239, 233, 222, .6); }
.footer-bas {
  border-top: 1px solid rgba(216, 201, 180, .16);
  padding: 14px 0; display: flex; flex-wrap: wrap; gap: 6px 24px;
  justify-content: space-between; align-items: center; font-size: .8rem;
  color: rgba(239, 233, 222, .55);
}
/* .78em donnait 10,98 px : sous la limite de lisibilité (12 px). */
/* `opacity: .8` faisait tomber ce texte à 3,35:1. Retirée : 4,94:1. */
.chiffre-bloc .legende small { display: block; font-size: .88em; margin-top: 2px; }
.footer-bas nav { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
/* Pas d'`opacity` ici : ce bouton est la seule voie de révocation du
   consentement, et .85 le laissait à 3,89:1. */
.footer-bas nav button { color: inherit; font: inherit; text-decoration: underline; }
.footer-bas nav button:hover { opacity: 1; }

/* ---------- Signature agence (logo Bonbon Piment) ---------- */
.footer-signature { padding: 18px 0 4px; text-align: center; }
/* ⚠️ L'`opacity: .62` du lien se MULTIPLIAIT avec le rgba(…, .55) du libellé :
   le texte tombait à 2,72:1, sous le seuil AA. L'opacité ne porte plus que
   sur le logo ; le libellé tient son propre niveau, à 7,61:1. */
.footer-signature a {
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
}
.footer-signature a img { opacity: .62; transition: opacity .25s ease; }
.footer-signature a:hover img, .footer-signature a:focus-visible img { opacity: 1; }
.footer-signature span {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  font-family: var(--font-titres); font-weight: 600;
  color: rgba(239, 233, 222, .75);
}
/* Hauteur fixe : le fichier officiel est un 500 × 300 à large marge interne,
   c'est la HAUTEUR qui doit être bornée, pas la largeur. */
.footer-signature img { height: 46px; width: auto; }
@media (max-width: 768px) { .footer-signature img { height: 40px; } }

/* ---------- Nuancier ---------- */
.nuancier-bloc + .nuancier-bloc { margin-top: clamp(48px, 7vw, 84px); }
.nuancier-gamme {
  font-family: var(--font-titres); font-size: .78rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--taupe-fonce); margin-top: 6px;
}
.nuancier-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.nuancier-liste li {
  background: var(--creme-clair); border: 1px solid var(--taupe-clair);
  border-radius: var(--radius-bouton); padding: 16px 18px;
  font-family: var(--font-titres); font-weight: 600; font-size: .95rem;
  display: flex; align-items: center; gap: 12px;
}
.nuancier-note { font-size: .86rem; margin-top: 14px; font-style: italic; }
/* Pastille de teinte : 44 px et non 14, sinon « Piment », « Magma » et
   « Volcan » se ressemblent tous. L'ombre interne donne le volume minéral
   qui distingue un granulat d'un aplat de peinture.
   ⚠️ Ces couleurs sont indicatives — elles seront remplacées par des photos
   macro des vrais granulats. La page le dit au visiteur. */
.nuancier-liste li::before {
  content: ""; width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: var(--teinte, var(--taupe-clair));
  border: 1px solid rgba(43, 38, 33, .18);
  box-shadow: inset 0 -6px 12px rgba(0, 0, 0, .12), inset 0 4px 8px rgba(255, 255, 255, .10);
}
/* Les empreintes n'ont pas de teinte propre : on affiche un motif rayé
   plutôt qu'une couleur qui mentirait. */
.nuancier-liste li.sans-teinte::before {
  background: repeating-linear-gradient(45deg, var(--taupe-clair) 0 5px, var(--creme-clair) 5px 10px);
}

/* Étapes du chantier : la bande de vignettes qui prolonge chaque avant/après.
   Choix assumé — on ne met pas de verbatim client, ce sont les photos du
   chantier qui font la preuve. Les images sont celles d'Anthony, prises sur
   le même chantier que le comparateur juste à côté. */
.etapes-chantier { margin-top: 22px; }
.etapes-chantier > p {
  font-family: var(--font-titres); font-size: .78rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--sable);
  margin-bottom: 12px;
}
/* auto-fit : selon le chantier on a 2 ou 3 photos exploitables, la grille
   s'adapte sans qu'il faille toucher au CSS. */
.etapes-chantier ol {
  list-style: none; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.etapes-chantier li { margin: 0; }
.etapes-chantier img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px;
  border: 1px solid rgba(239,233,222,.18);
}
.etapes-chantier figcaption, .etapes-chantier span {
  display: block; margin-top: 7px; font-size: .8rem; line-height: 1.35;
  color: rgba(239,233,222,.72);
}
@media (max-width: 560px) { .etapes-chantier ol { gap: 8px; } .etapes-chantier span { font-size: .76rem; } }

/* Retour client sur une étude de cas. Gabarit prêt dans realisations.html
   si Anthony obtient un jour un verbatim écrit : il ne reste qu'à coller la
   phrase. Par défaut on s'en passe (voir .etapes-chantier ci-dessus). */
.retour-client {
  margin-top: 18px; padding-left: 18px; border-left: 3px solid var(--taupe);
  font-style: italic; font-size: .96rem; color: var(--encre);
}
.retour-client span { display: block; margin-top: 8px; font-style: normal;
  font-family: var(--font-titres); font-weight: 600; font-size: .85rem; color: var(--taupe-fonce); }
.section-sombre .retour-client { color: rgba(239,233,222,.9); border-left-color: var(--sable); }
.section-sombre .retour-client span { color: var(--sable); }

/* Bloc « à savoir » : une limite qu'on assume, dite franchement */
.bloc-avert {
  display: flex; gap: 18px; align-items: flex-start;
  background: var(--creme-clair); border: 1px solid var(--taupe-clair);
  border-left: 4px solid var(--taupe); border-radius: 0 var(--radius-carte) var(--radius-carte) 0;
  padding: clamp(20px, 3vw, 28px);
}
.bloc-avert .pastille { flex: none; }
.bloc-avert strong { display: block; font-family: var(--font-titres); font-size: 1.05rem; margin-bottom: 6px; }
.bloc-avert p { font-size: .95rem; }
.bloc-avert a { text-decoration: underline; font-weight: 600; color: var(--taupe-fonce); }

/* Piège à robots : hors écran, jamais lu par un humain ni par un lecteur d'écran */
.champ-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Simulateur ---------- */
.simu-cadre { max-width: 760px; margin: 0 auto; }
.simu-progression { height: 8px; border-radius: 8px; background: var(--taupe-clair); overflow: hidden; margin-bottom: 34px; }
.simu-progression .barre { height: 100%; width: 0; background: var(--taupe); border-radius: 8px; transition: width .4s ease; }
.simu-etape { display: none; animation: apparition .4s ease; }
.simu-etape.active { display: block; }
@keyframes apparition { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.simu-etape h2 { margin-bottom: 8px; }
.simu-etape > p { margin-bottom: 28px; }

.choix-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.choix-grille.deux { grid-template-columns: repeat(2, 1fr); }
.carte-choix {
  background: var(--creme-clair); border: 2px solid rgba(169, 139, 105, .2);
  border-radius: 18px; padding: 22px 16px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-family: var(--font-titres); font-weight: 600; font-size: .92rem; color: var(--encre);
  transition: all .2s ease;
}
.carte-choix small { font-family: var(--font-corps); font-weight: 400; font-size: .78rem; color: var(--gris-doux); }
.carte-choix:hover { border-color: var(--taupe); transform: translateY(-3px); box-shadow: var(--ombre-carte); }
.carte-choix.selectionne { border-color: var(--taupe); background: var(--blanc); box-shadow: var(--ombre-carte); }
.carte-choix .rond {
  width: 52px; height: 52px; border-radius: 50%; background: var(--taupe-clair);
  display: grid; place-items: center; color: var(--charbon);
}
.carte-choix .rond svg { width: 24px; height: 24px; }
.carte-choix.selectionne .rond { background: var(--taupe); color: var(--blanc); }

.simu-surface { display: grid; gap: 22px; }
.affichage-surface {
  font-family: var(--font-titres); font-weight: 700; font-size: clamp(2rem, 5vw, 3rem);
  color: var(--taupe-fonce); text-align: center;
}
input[type="range"] {
  width: 100%; appearance: none; height: 8px; border-radius: 8px;
  background: var(--taupe-clair); outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--taupe); border: 4px solid var(--blanc);
  box-shadow: 0 3px 10px rgba(43,38,33,.3); cursor: grab;
}
input[type="range"]::-moz-range-thumb {
  width: 28px; height: 28px; border-radius: 50%; background: var(--taupe);
  border: 4px solid var(--blanc); box-shadow: 0 3px 10px rgba(43,38,33,.3); cursor: grab;
}
.simu-surface .champ-nombre { display: flex; align-items: center; gap: 10px; justify-content: center; }
.simu-surface input[type="number"] {
  width: 120px; padding: 12px 14px; border-radius: 12px;
  border: 2px solid var(--taupe-clair); background: var(--blanc); text-align: center;
  font-family: var(--font-titres); font-weight: 600; font-size: 1.1rem;
}

.simu-nav { display: flex; justify-content: space-between; margin-top: 34px; gap: 12px; }
.simu-nav .btn-retour { color: var(--gris-doux); font-weight: 600; font-family: var(--font-titres); display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; }
.simu-nav .btn-retour:hover { color: var(--encre); }
.simu-nav .btn-retour svg { width: 16px; height: 16px; }

/* Formulaires (simulateur + devis) */
.champ { margin-bottom: 18px; }
.champ label { display: block; font-family: var(--font-titres); font-weight: 600; font-size: .88rem; margin-bottom: 7px; }
.champ input, .champ select, .champ textarea {
  width: 100%; padding: 13px 16px; border-radius: 12px;
  border: 2px solid rgba(169, 139, 105, .3); background: var(--blanc);
  transition: border-color .2s ease;
}
/* On retire le contour du navigateur à la souris mais JAMAIS au clavier :
   sans :focus-visible, un visiteur qui navigue à la tabulation ne voit
   plus du tout où il se trouve dans le formulaire (WCAG 2.4.7). */
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--taupe); outline: none; }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible {
  outline: 3px solid var(--taupe-fonce); outline-offset: 2px;
}
.champ .erreur-msg { display: none; color: #A34A2A; font-size: .8rem; margin-top: 5px; }
.champ.invalide input, .champ.invalide select { border-color: #A34A2A; }
.champ.invalide .erreur-msg { display: block; }
.champ-rgpd { display: flex; gap: 10px; align-items: flex-start; font-size: .82rem; color: var(--gris-doux); margin: 18px 0; }
.champ-rgpd input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--taupe); flex: none; }
.champ-rgpd .erreur-msg { display: none; color: #A34A2A; font-weight: 600; margin-top: 5px; }
.champ-rgpd.invalide { color: #A34A2A; }
.champ-rgpd.invalide input { outline: 2px solid #A34A2A; outline-offset: 2px; }
.champ-rgpd.invalide .erreur-msg { display: block; }

/* Texte pour lecteurs d'écran uniquement */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.grille-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

/* Résultat simulateur */
.simu-resultat { text-align: center; }
.fourchette {
  font-family: var(--font-titres); font-weight: 700;
  font-size: clamp(2rem, 5.5vw, 3.2rem); color: var(--taupe-fonce);
  margin: 18px 0 6px; line-height: 1.15;
}
.fourchette small { display: block; font-size: .95rem; font-weight: 500; color: var(--gris-doux); margin-top: 6px; }
.simu-recap { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 24px 0; }
.simu-recap span {
  background: var(--creme-clair); border: 1px solid var(--taupe-clair);
  padding: 8px 16px; border-radius: 999px; font-size: .84rem; font-weight: 500;
}
.simu-reassurances { display: flex; justify-content: center; gap: clamp(16px, 3vw, 36px); flex-wrap: wrap; margin: 26px 0; }
.simu-reassurances div { display: flex; align-items: center; gap: 9px; font-size: .88rem; font-weight: 600; font-family: var(--font-titres); }
.mention-legale-simu { font-size: .76rem; color: var(--gris-doux); max-width: 560px; margin: 26px auto 0; font-style: italic; }

/* Zones tactiles : le fil d'Ariane et les liens du pied de page faisaient
   20-21 px de haut, sous le minimum de 24 px (WCAG 2.5.8). */
.fil-ariane a,
.footer-bas nav a,
.footer-bas nav button { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 2px; }
/* Déclaré ICI, après la règle à 32 px : à spécificité égale, c'est la
   dernière déclaration qui l'emporte. Placé plus haut, l'override mobile
   restait sans effet. */
@media (max-width: 900px) {
  .fil-ariane a, .footer-bas nav a, .footer-bas nav button { min-height: 44px; }
}

/* Note « grand chantier » sous le curseur de surface */
.simu-surface-note { font-size: .8rem; color: var(--gris-doux); text-align: center; margin-top: 10px; min-height: 1em; }

/* Prestations complémentaires (facultatives) */
.simu-options { border: 1px dashed var(--taupe-clair); border-radius: 16px; padding: 14px 18px 16px; margin: 4px 0 14px; }
.simu-options legend { font-family: var(--font-titres); font-weight: 600; font-size: .9rem; padding: 0 8px; }
.simu-options legend small { font-weight: 400; color: var(--gris-doux); font-family: var(--font-corps); }
.case-option { display: flex; gap: 10px; align-items: flex-start; font-size: .85rem; padding: 5px 0; cursor: pointer; }
.case-option input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--taupe); flex: none; }

/* Résultat : « Nous consulter », détail du calcul, notes */
.fourchette .ttc { font-size: .5em; font-weight: 600; vertical-align: super; color: var(--gris-doux); }
.res-consulter { display: inline-block; font-size: .72em; }
.res-detail {
  text-align: left; max-width: 520px; margin: 6px auto 0;
  background: var(--creme-clair); border: 1px solid var(--taupe-clair); border-radius: 16px; padding: 4px 20px;
}
.res-detail > summary {
  cursor: pointer; font-family: var(--font-titres); font-weight: 600;
  font-size: .9rem; padding: 12px 0; list-style-position: inside;
}
.res-detail ul { list-style: none; margin: 4px 0 12px; border-top: 1px solid var(--taupe-clair); padding-top: 12px; }
.res-detail li { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; font-size: .85rem; }
.res-detail li em { display: block; font-size: .76rem; color: var(--gris-doux); font-style: normal; }
.res-detail li b { font-family: var(--font-titres); white-space: nowrap; }
.res-detail > p { font-size: .78rem; color: var(--gris-doux); margin-bottom: 14px; }
.res-note {
  max-width: 520px; margin: 14px auto 0; font-size: .82rem;
  background: rgba(169, 139, 105, .12); border-left: 3px solid var(--taupe);
  padding: 10px 14px; border-radius: 0 10px 10px 0; text-align: left;
}
.res-note a { text-decoration: underline; font-weight: 600; }

/* ---------- Chat ---------- */
.chat-bulle {
  position: fixed; right: 22px; bottom: 22px; z-index: 80;
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--taupe); color: var(--blanc);
  display: grid; place-items: center;
  box-shadow: 0 10px 30px rgba(138, 111, 82, .5);
  transition: transform .2s ease;
}
.chat-bulle svg { width: 27px; height: 27px; }
.chat-bulle:hover { transform: scale(1.08); }
.chat-bulle .point {
  position: absolute; top: 2px; right: 2px; width: 15px; height: 15px;
  border-radius: 50%; background: var(--ok); border: 2.5px solid var(--creme);
}
.chat-proactif {
  position: fixed; right: 22px; bottom: 96px; z-index: 79;
  max-width: 290px; background: var(--creme-clair);
  border-radius: 18px 18px 4px 18px; padding: 15px 18px;
  box-shadow: var(--ombre-forte); border: 1px solid var(--taupe-clair);
  font-size: .88rem; display: none; animation: apparition .4s ease;
}
.chat-proactif.visible { display: block; }
.chat-proactif button { position: absolute; top: 6px; right: 10px; color: var(--gris-doux); font-size: 1rem; }

.chat-fenetre {
  position: fixed; right: 22px; bottom: 96px; z-index: 81;
  width: min(380px, calc(100vw - 32px)); height: min(560px, 74vh);
  background: var(--creme); border-radius: 20px; overflow: hidden;
  box-shadow: 0 24px 70px rgba(38, 34, 30, .35);
  display: none; flex-direction: column;
  border: 1px solid rgba(169, 139, 105, .25);
}
.chat-fenetre.ouvert { display: flex; }
.chat-entete {
  background: var(--charbon); color: var(--creme);
  padding: 16px 18px; display: flex; align-items: center; gap: 12px;
}
.chat-avatar {
  width: 38px; height: 38px; border-radius: 50%; background: var(--taupe);
  display: grid; place-items: center; color: var(--blanc); flex: none;
}
.chat-avatar svg { width: 18px; height: 18px; }
.chat-entete strong { font-family: var(--font-titres); font-size: .95rem; display: block; }
.chat-entete small { font-size: .76rem; color: var(--taupe-clair); display: flex; align-items: center; gap: 6px; }
.chat-entete small::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.chat-entete button { margin-left: auto; color: var(--creme); font-size: 1.3rem; }
.chat-corps { flex: 1; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; }
.chat-msg { max-width: 84%; padding: 11px 15px; border-radius: 16px; font-size: .9rem; line-height: 1.5; animation: apparition .3s ease; }
.chat-msg.bot { background: var(--creme-clair); border: 1px solid rgba(169,139,105,.2); border-bottom-left-radius: 4px; align-self: flex-start; color: var(--encre); }
.chat-msg.moi { background: var(--taupe); color: var(--blanc); border-bottom-right-radius: 4px; align-self: flex-end; }
.chat-suggestions { display: flex; flex-wrap: wrap; gap: 8px; align-self: flex-start; animation: apparition .3s ease; }
.chat-suggestions button {
  background: var(--blanc); border: 1.5px solid var(--taupe);
  color: var(--taupe-fonce); font-weight: 600; font-size: .82rem;
  padding: 8px 14px; border-radius: 999px; transition: all .15s ease;
}
.chat-suggestions button:hover { background: var(--taupe); color: var(--blanc); }
.chat-saisie { display: flex; gap: 8px; padding: 12px; background: var(--creme-clair); border-top: 1px solid rgba(169,139,105,.2); }
.chat-saisie input {
  flex: 1; padding: 11px 15px; border-radius: 999px;
  border: 1.5px solid rgba(169,139,105,.35); background: var(--blanc);
}
.chat-saisie input:focus { outline: none; border-color: var(--taupe); }
.chat-saisie input:focus-visible { outline: 3px solid var(--taupe-fonce); outline-offset: 2px; }
.chat-saisie button {
  width: 44px; height: 44px; border-radius: 50%; background: var(--taupe); color: var(--blanc);
  display: grid; place-items: center; flex: none;
}
.chat-saisie button svg { width: 19px; height: 19px; }

/* ---------- Barre CTA mobile ---------- */
.barre-mobile {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; grid-template-columns: 1fr 1fr 1fr;
  background: var(--charbon); padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); gap: 8px;
}
.barre-mobile a {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--creme); font-size: .76rem; font-weight: 600; font-family: var(--font-titres);
  padding: 7px 4px; border-radius: 12px;
}
.barre-mobile a svg { width: 20px; height: 20px; }
.barre-mobile a.devis { background: var(--taupe-fonce); }

/* ---------- Cookies ---------- */
/* Onglet discret en bas à GAUCHE, et non plus barre pleine largeur.
   La barre mangeait 130 px de haut en desktop et 210 px en mobile — sur un
   écran de 812 elle couvrait un quart de la vue avant le moindre scroll.
   L'onglet est une pastille de 52 px qui n'occulte rien ; le panneau de
   choix s'ouvre au-dessus de lui, à gauche, donc loin de la bulle de chat
   (à droite) et de la barre d'actions mobile (au centre, en bas).

   L'onglet RESTE après le choix : c'est lui qui rend le consentement
   révocable à tout moment, comme la politique de confidentialité s'y engage.

   ⚠️ L'ancienne version déclarait `.bandeau-cookies.visible{display:grid}`
   puis, 25 lignes plus bas, `.bandeau-cookies.visible{display:block}` :
   même spécificité, la seconde gagnait, et la mise en page deux colonnes
   décrite dans le commentaire n'a jamais été appliquée. Ne pas redéclarer
   `display` deux fois sur le même sélecteur. */
.cookie-onglet {
  position: fixed; left: 20px; bottom: 20px; z-index: 84;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--creme-clair); color: var(--taupe-fonce);
  border: 1px solid rgba(169, 139, 105, .35);
  box-shadow: 0 8px 24px rgba(43, 38, 33, .16);
  display: grid; place-items: center;
  transition: transform .2s ease, background .2s ease;
}
.cookie-onglet svg { width: 25px; height: 25px; }
.cookie-onglet:hover { transform: scale(1.08); background: var(--creme); }

/* Format LARGE ET PLAT (430 × ~132), pas carte haute et étroite : mesuré en
   1280 × 900, une carte de 216 px de haut recouvrait les deux CTA du hero,
   exactement le défaut qui avait fait abandonner la carte flottante le 02/08.
   À plat, le panneau culmine à 684 px quand les CTA finissent à 660 — il
   passe dessous. Le texte tient donc sur UNE ligne : tout détail
   supplémentaire appartient au volet « Personnaliser ». */
.cookie-panneau {
  position: fixed; left: 20px; bottom: 84px; z-index: 85;
  width: min(430px, calc(100vw - 40px));
  background: var(--creme-clair);
  border: 1px solid rgba(169, 139, 105, .3);
  border-radius: 18px; padding: 16px 18px;
  box-shadow: 0 18px 50px rgba(38, 34, 30, .26);
  display: none;
}
.cookie-panneau.ouvert { display: block; animation: apparition .3s ease; }
.cookie-panneau h4 { font-size: .95rem; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.cookie-panneau h4 svg { width: 20px; height: 20px; flex: none; color: var(--taupe-fonce); }
.cookie-panneau p { font-size: .81rem; line-height: 1.45; margin-bottom: 10px; }
.cookie-panneau .actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cookie-panneau .btn { padding: 11px 10px; min-height: 44px; font-size: .8rem; justify-content: center; }
.cookies-perso { margin: 4px 0 14px; display: none; gap: 10px; font-size: .84rem; }
.cookies-perso.visible { display: grid; }
.cookies-perso label { display: flex; gap: 10px; align-items: center; }
.cookies-perso input { accent-color: var(--taupe); width: 17px; height: 17px; flex: none; }

@media (max-width: 768px) {
  /* Au-dessus de la barre d'actions fixe (74 px). La bulle de chat est à
     droite à la même hauteur : les deux ne se croisent jamais. */
  .cookie-onglet { left: 14px; bottom: 88px; width: 46px; height: 46px; }
  .cookie-onglet svg { width: 22px; height: 22px; }
  /* Largeur TOUJOURS bornée à 430 : en pleine largeur (740 px mesurés à 768)
     le panneau passait sous la bulle de chat, à droite.
     Et posé au RAS de la barre d'actions (74 px + 8) plutôt qu'au-dessus de
     la bulle de chat : à 375 × 812, remonté, il recouvrait les DEUX CTA du
     hero — dont « Estimer mon projet », le bouton principal du site. Au ras,
     il ne mord plus que sur le second.
     Ce que le panneau croise alors — l'onglet et la bulle de chat — est
     effacé le temps du choix (règles ci-dessous) : le consentement passe
     avant le chat, et l'onglet ne sert à rien quand le panneau est ouvert. */
  .cookie-panneau { left: 14px; bottom: 82px; width: min(430px, calc(100vw - 28px)); padding: 14px 16px; }
  .cookie-panneau p { margin-bottom: 8px; }
  body:has(.cookie-panneau.ouvert) .cookie-onglet,
  body:has(.cookie-panneau.ouvert) .chat-bulle,
  body:has(.cookie-panneau.ouvert) .chat-proactif { display: none; }
}
@media (max-width: 560px) {
  /* Les 3 boutons RESTENT sur une ligne : mesuré à 375, « Personnaliser »
     tient dans 100 px sans troncature une fois le padding horizontal réduit.
     Les passer sur deux lignes coûtait 52 px de hauteur — assez pour que le
     panneau remonte sur « Estimer mon projet », le CTA principal du site. */
  .cookie-panneau .btn { padding: 11px 8px; }
  /* Sous ~470 px, la fenêtre de chat prend presque toute la largeur (343 px
     mesurés à 375) et vient se poser SUR l'onglet cookie, qui a un z-index
     plus haut et flottait donc par-dessus la conversation. Tant que le chat
     est ouvert, l'onglet s'efface ; il revient dès qu'on le referme. */
  body:has(.chat-fenetre.ouvert) .cookie-onglet { display: none; }
}
@media (max-width: 360px) {
  /* Sous 360, un tiers ne fait plus que 81 px : « Personnaliser » y serait
     tronqué. Il repasse alors sur sa propre ligne. */
  .cookie-panneau .actions { grid-template-columns: 1fr 1fr; }
  .cookie-panneau .actions .js-ck-perso { grid-column: 1 / -1; }
}

/* Menu mobile ouvert : rien ne doit flotter par-dessus.
   La pastille cookies (z-index 84) et la bulle de chat (80) passaient devant
   le menu (70) et masquaient une entrée de navigation. Règle posée HORS media
   query : le burger s'ouvre jusqu'à 1024 px, pas seulement en mobile. */
body:has(.menu-mobile.ouvert) .cookie-onglet,
body:has(.menu-mobile.ouvert) .cookie-panneau,
body:has(.menu-mobile.ouvert) .chat-bulle,
body:has(.menu-mobile.ouvert) .chat-proactif,
body:has(.menu-mobile.ouvert) .barre-mobile { display: none; }

/* ---------- Modale devis ---------- */
.modale-fond {
  position: fixed; inset: 0; z-index: 88; background: rgba(38, 34, 30, .55);
  display: none; place-items: center; padding: 20px; backdrop-filter: blur(3px);
}
.modale-fond.ouvert { display: grid; }
.modale {
  background: var(--creme); border-radius: 26px; box-shadow: var(--ombre-forte);
  width: min(620px, 100%); max-height: 90vh; overflow-y: auto;
  padding: clamp(26px, 4vw, 40px); position: relative;
}
.modale-fermer { position: absolute; top: 16px; right: 20px; font-size: 1.6rem; color: var(--gris-doux); }
.modale-fermer:hover { color: var(--encre); }

/* Formulaire devis multi-étapes */
.devis-etapes-indicateur { display: flex; gap: 8px; margin: 18px 0 26px; }
.devis-etapes-indicateur span { flex: 1; height: 6px; border-radius: 6px; background: var(--taupe-clair); transition: background .3s ease; }
.devis-etapes-indicateur span.fait { background: var(--taupe); }
.devis-etape { display: none; }
.devis-etape.active { display: block; animation: apparition .35s ease; }
.devis-etape h3 { margin-bottom: 18px; }
.devis-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; }
.devis-merci { text-align: center; padding: 26px 8px; display: none; }
.devis-merci.visible { display: block; animation: apparition .4s ease; }
.devis-merci .pastille { margin: 0 auto 18px; background: var(--ok); }

/* ---------- Tableau comparatif ---------- */
.tableau-defilant { overflow-x: auto; border-radius: 20px; box-shadow: var(--ombre-carte); }
.tableau-comparatif { width: 100%; border-collapse: collapse; background: var(--creme-clair); min-width: 760px; font-size: .92rem; }
.tableau-comparatif th, .tableau-comparatif td { padding: 16px 18px; text-align: left; border-bottom: 1px solid rgba(169, 139, 105, .18); }
.tableau-comparatif thead th {
  background: var(--charbon); color: var(--creme); font-family: var(--font-titres);
  font-weight: 600; font-size: .84rem; letter-spacing: .06em; text-transform: uppercase;
}
.tableau-comparatif tbody th { font-family: var(--font-titres); font-weight: 600; white-space: nowrap; }
.tableau-comparatif tbody th a { color: var(--taupe-fonce); display: inline-flex; align-items: center; min-height: 44px; }
.tableau-comparatif tbody tr:hover { background: var(--blanc); }
.tableau-comparatif .budget { color: var(--taupe-fonce); font-weight: 700; letter-spacing: 1px; }

/* ---------- Fiches béton ---------- */
.hero-fiche { padding: clamp(36px, 5vw, 64px) 0 clamp(40px, 6vw, 72px); }
.fil-ariane { font-size: .82rem; color: var(--gris-doux); margin-bottom: 22px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fil-ariane a:hover { color: var(--taupe-fonce); }
.fil-ariane svg { width: 12px; height: 12px; }
.bloc-prix {
  display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  max-width: 100%;
  background: var(--charbon); color: var(--creme);
  border-radius: 18px; padding: 18px 28px; margin-top: 8px;
}
.bloc-prix .prix { font-family: var(--font-titres); font-weight: 700; font-size: 1.7rem; color: var(--sable); }
.bloc-prix small { font-size: .78rem; color: rgba(239,233,222,.7); }
.grille-benefices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.carte-benefice { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.carte-benefice p { font-size: .9rem; }

/* Bloc climat 974 */
.bloc-climat {
  background: var(--charbon); border-radius: var(--radius-carte);
  padding: clamp(30px, 4vw, 48px); color: var(--creme);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
}
.bloc-climat .titre-bloc { grid-column: 1 / -1; }
.bloc-climat h2, .bloc-climat h3 { color: var(--blanc); }
.bloc-climat .item { display: flex; gap: 14px; align-items: flex-start; }
.bloc-climat .item p { font-size: .87rem; color: rgba(239,233,222,.75); }
.bloc-climat .item strong { color: var(--blanc); display: block; margin-bottom: 4px; font-family: var(--font-titres); font-size: .95rem; }
.bloc-climat .pastille { background: rgba(216, 201, 180, .18); color: var(--sable); width: 48px; height: 48px; }
.bloc-climat .pastille svg { width: 22px; height: 22px; }

/* ---------- Contact ---------- */
.grille-contact { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 5vw, 60px); align-items: start; }
.carte-coordonnees li { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid rgba(169,139,105,.15); }
.carte-coordonnees li:last-child { border-bottom: none; }
.carte-coordonnees strong { font-family: var(--font-titres); font-size: .92rem; display: block; }
.carte-coordonnees a:hover { color: var(--taupe-fonce); }
/* Le téléphone et l'e-mail sont les deux liens les plus tapotés du site :
   19 px de haut, c'était 25 px de moins que le minimum confortable. */
.carte-coordonnees a { display: inline-flex; align-items: center; min-height: 44px; }
.carte-coordonnees small { color: var(--gris-doux); font-size: .84rem; }
.boutons-directs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; }
.boutons-directs a {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  background: var(--blanc); border: 1.5px solid var(--taupe-clair); border-radius: 16px;
  padding: 15px 8px; font-family: var(--font-titres); font-weight: 600; font-size: .82rem;
  transition: all .2s ease;
}
.boutons-directs a:hover { border-color: var(--taupe); transform: translateY(-3px); box-shadow: var(--ombre-carte); }
.boutons-directs svg { width: 21px; height: 21px; color: var(--taupe-fonce); }
.chips-communes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chips-communes button {
  font-size: .8rem; font-weight: 500; padding: 11px 14px; min-height: 44px; border-radius: 999px;
  background: var(--creme-clair); border: 1px solid rgba(169,139,105,.28);
  color: var(--gris-doux); transition: all .15s ease;
}
.chips-communes button:hover, .chips-communes button.actif { background: var(--taupe); color: var(--blanc); border-color: var(--taupe); }

/* ---------- Articles conseils ---------- */
.grille-articles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.carte-article { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.carte-article img { height: 200px; width: 100%; object-fit: cover; }
.carte-article .corps { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.carte-article .corps .tag { align-self: flex-start; font-size: .76rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--charbon); background: rgba(216,201,180,.45); padding: 4px 11px; border-radius: 8px; }
.carte-article p { font-size: .9rem; flex: 1; }

/* ---------- Les deux dirigeants ----------
   Pas de photo pour l'instant : plutôt qu'une silhouette générique achetée
   en banque d'images, on pose leurs initiales. C'est honnête, et ça se
   remplace par un vrai portrait sans toucher à la mise en page. */
.grille-dirigeants { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 3vw, 30px); max-width: 860px; margin: 0 auto; }
.carte-dirigeant { text-align: center; padding: clamp(26px, 3vw, 36px) clamp(20px, 3vw, 32px); }
.dirigeant-initiales {
  display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto 16px;
  border-radius: 50%; background: var(--charbon); color: var(--sable);
  font-family: var(--font-titres); font-weight: 700; font-size: 1.5rem; letter-spacing: .06em;
}
.dirigeant-role {
  font-family: var(--font-titres); font-size: .8rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--taupe-fonce); margin-top: 4px;
}
.dirigeant-mot { margin-top: 12px; font-size: .94rem; line-height: 1.6; }
@media (max-width: 640px) { .grille-dirigeants { grid-template-columns: 1fr; } }

/* ---------- Pages légales ---------- */
.page-legale { max-width: 780px; margin: 0 auto; }
.page-legale h1 { margin-bottom: 10px; }
.page-legale h2 { font-size: 1.3rem; margin: 38px 0 12px; }
.page-legale p, .page-legale li { font-size: .95rem; margin-bottom: 10px; }
.page-legale ul { list-style: disc; padding-left: 22px; }
.page-legale .maj { font-size: .82rem; color: var(--gris-doux); font-style: italic; }

/* ---------- CTA sticky réalisations ---------- */
.cta-sticky {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(140%);
  z-index: 50; background: var(--charbon); color: var(--creme);
  border-radius: 999px; padding: 12px 12px 12px 26px;
  display: flex; align-items: center; gap: 18px;
  box-shadow: var(--ombre-forte); transition: transform .4s ease;
  font-family: var(--font-titres); font-weight: 600; font-size: .92rem;
  white-space: nowrap;
}
.cta-sticky.visible { transform: translateX(-50%) translateY(0); }
/* 42 px : c'est le bouton d'estimation qui suit le visiteur, il mérite
   une cible pleine. */
.cta-sticky .btn { padding: 10px 20px; min-height: 44px; font-size: .85rem; }

/* ---------- Reveal au scroll ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .bandeau-piste { animation: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   RESPONSIVE — breakpoints 480 / 768 / 1024 / 1280
   ============================================================ */
@media (max-width: 1280px) {
  .grille-betons { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  .nav { display: none; }
  .header-actions .btn { display: none; }
  .burger { display: grid; }
  .grille-betons, .grille-articles, .grille-betons.grille-quatre { grid-template-columns: repeat(2, 1fr); }
  .galerie-masonry, .galerie-masonry.deux { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: repeat(2, 1fr); gap: 34px; }
  .timeline::before { display: none; }
  .bande-chiffres { grid-template-columns: repeat(2, 1fr); }
  .hero-grille, .teaser-simu, .grille-contact { grid-template-columns: 1fr; }
  .hero-photo img { height: clamp(300px, 52vw, 460px); border-radius: 90px 24px 24px 24px; }
  .footer-haut { grid-template-columns: 1fr 1fr; }
  .bloc-climat { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  body { font-size: 16px; padding-bottom: 74px; /* place pour la barre mobile */ }
  .barre-mobile { display: grid; }
  .chat-bulle { bottom: 88px; }
  .chat-proactif { bottom: 160px; }
  .chat-fenetre { bottom: 88px; height: min(520px, 66vh); }
  .alterne, .grille-benefices { grid-template-columns: 1fr; }
  .alterne.inverse .photo { order: 0; }
  .choix-grille, .choix-grille.deux { grid-template-columns: 1fr 1fr; }
  .grille-champs { grid-template-columns: 1fr; }
  .boutons-directs { grid-template-columns: repeat(3, 1fr); }
  .cta-sticky { display: none; }
  .hero-badge { left: 10px; bottom: 14px; padding: 11px 15px; }
}
@media (max-width: 480px) {
  .grille-betons, .grille-articles, .grille-betons.grille-quatre, .choix-grille, .choix-grille.deux { grid-template-columns: 1fr; }
  .galerie-masonry, .galerie-masonry.deux { grid-template-columns: 1fr; }
  .bande-chiffres { grid-template-columns: 1fr 1fr; padding: 22px; }
  .timeline { grid-template-columns: 1fr; }
  .bloc-climat { grid-template-columns: 1fr; }
  /* Les quatre blocs empilés faisaient 1,34 écran de pied de page. Navigation
     et contact tiennent côte à côte jusqu'à 320 px ; seuls le bloc logo et la
     liste des communes gardent toute la largeur. */
  .footer-haut { grid-template-columns: 1fr 1fr; gap: 22px 18px; }
  .footer-haut > *:first-child, .footer-haut > *:last-child { grid-column: 1 / -1; }
  /* Sans min-width:0, une cellule de grille refuse de descendre sous la
     largeur de son mot le plus long : « contact@studiobeton.re » imposait
     189 px par colonne et faisait déborder la page de 5 px à 320 px. */
  .footer-haut > * { min-width: 0; }
  .footer-contact a { overflow-wrap: anywhere; }
  .footer-ile svg { width: 44px; height: 40px; }
  .footer-communes { font-size: .76rem; line-height: 1.5; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  .encadre-engagement { border-radius: 24px; flex-direction: column; text-align: center; }
  /* Les libellés longs de boutons peuvent replier sur très petit écran */
  .btn { white-space: normal; text-align: center; justify-content: center; }
}