/* ================================================================
   ART BÂTIMENT : v2 · « le carnet de chantier »
   Palette prélevée (voir PROJET.md) · Marcellus + DM Sans
   Mobile d'abord (360) · ruptures 600 / 900 / 1200 / 1560
   ================================================================ */

/* ---------- polices auto-hébergées, sous-ensemblées ---------- */
@font-face{
  font-family:"Marcellus";
  src:url("../fonts/marcellus.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"DM Sans";
  src:url("../fonts/dmsans.woff2") format("woff2-variations");
  font-weight:100 1000;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"DM Sans";
  src:url("../fonts/dmsans-italique.woff2") format("woff2-variations");
  font-weight:100 1000;font-style:italic;font-display:swap;
}

/* ---------- jetons ---------- */
:root{
  --encre:#101626;
  --encre-2:#18203A;
  --encre-verre:rgba(10,15,28,.82);
  --bleu:#2A5BA8;
  --bleu-fonce:#20477F;
  --bleu-clair:#7EA8E8;
  --tuile:#B4643C;
  --tuile-texte:#9C4F28;
  --tuile-claire:#D89A6E;
  --papier:#F4F1EA;
  --papier-2:#ECE7DB;
  --beton:#565E6B;
  --beton-clair:#B9C0CC;

  --fd:"Marcellus",Georgia,"Times New Roman",serif;
  --ft:"DM Sans",system-ui,Segoe UI,sans-serif;

  --pilule:999px;
  --r:1.25rem;
  --r-large:1.75rem;

  --grad-bleu:linear-gradient(135deg,#2A5BA8 0%,#3D6BBF 100%);
  --grad-bleu-nuit:linear-gradient(135deg,#20477F 0%,#2A5BA8 100%);
  --grad-encre:linear-gradient(150deg,#101626 0%,#1C2842 100%);
  --grad-papier:linear-gradient(160deg,#F7F4EE 0%,#EFEAE0 100%);
  --grad-tuile:linear-gradient(135deg,#A5552F 0%,#C1744A 100%);

  --ombre-carte:0 1px 2px rgba(16,22,38,.06),0 26px 54px -22px rgba(16,22,38,.38);
  --ombre-bleue:0 1px 2px rgba(16,22,38,.06),0 30px 62px -24px rgba(42,91,168,.5);
  --ombre-encre:0 2px 4px rgba(6,9,18,.3),0 36px 70px -28px rgba(6,9,18,.65);

  --lent:cubic-bezier(.22,.9,.24,1);
  --pose:cubic-bezier(.18,1.1,.32,1);

  --h-nav:76px;          /* mesuré par le JS */
  --h-barre-mobile:0px;  /* mesuré par le JS */
  --colonne:72rem;
  --colonne-etroite:50rem;
}

/* ---------- socle ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  font-family:var(--ft);
  font-size:clamp(1.0625rem,1rem + .2vw,1.1875rem);
  line-height:1.72;
  color:var(--encre);
  background:var(--papier);
  overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
::selection{background:var(--bleu);color:#fff}
:focus-visible{outline:3px solid var(--bleu);outline-offset:3px;border-radius:4px}
.saut{position:absolute;left:-9999px;top:0;background:var(--encre);color:#fff;padding:.8rem 1.4rem;z-index:3000;border-radius:0 0 var(--r) 0}
.saut:focus{left:0}

h1,h2,h3{font-family:var(--fd);font-weight:400;line-height:1.12;text-wrap:balance}
h1{font-size:clamp(2.3rem,1.4rem + 4.6vw,4.6rem);letter-spacing:.005em}
h2{font-size:clamp(1.9rem,1.35rem + 2.6vw,3.2rem)}
h3{font-size:clamp(1.3rem,1.15rem + .8vw,1.75rem)}
.accent{color:var(--bleu)}
.encre .accent,.heros .accent{color:var(--bleu-clair)}
em{font-style:italic}
h1 em,h2 em,h3 em{font-style:normal}
.insecable{white-space:nowrap}/* un nom de lieu ne se coupe pas au tiret : « Val-
de-Marne » vu en capture le 03/09/2026 *//* Marcellus n'a pas d'italique : pas de fausse oblique */

.colonne{max-width:var(--colonne);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.5rem)}
.colonne-etroite{max-width:var(--colonne-etroite);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.5rem)}

/* ---------- étiquette de section + trait de niveau ---------- */
.etiquette{
  display:inline-flex;align-items:center;gap:.7rem;
  font-size:.8rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--bleu);margin-bottom:1.4rem;
}
.etiquette::before{
  content:"";width:2.6rem;height:2px;border-radius:1px;
  background:linear-gradient(90deg,var(--bleu),var(--bleu-clair));
  transform-origin:left center;
}
.encre .etiquette{color:var(--bleu-clair)}
.etiquette.tuile{color:var(--tuile-texte)}
.etiquette.tuile::before{background:linear-gradient(90deg,var(--tuile),var(--tuile-claire))}
.js .r .etiquette::before,.js .rl .etiquette::before,.js .rr .etiquette::before{transform:scaleX(0)}
.js .on .etiquette::before{transform:scaleX(1);transition:transform .9s var(--pose) .25s}

/* ---------- sections ---------- */
.section{padding-block:clamp(3.6rem,7vw,6.5rem);position:relative}
.section-photo{position:relative;isolation:isolate;overflow:clip}
.section-photo>.fond{
  position:absolute;inset:0;z-index:-2;
  background-size:cover;background-position:center;
}
.section-photo>.voile{position:absolute;inset:0;z-index:-1}
.encre{background:var(--grad-encre);color:var(--papier)}
.encre h2,.encre h3{color:#fff}
.papier-2{background:var(--grad-papier)}
.sous-titre{color:var(--beton);max-width:38rem}
h2+p,h2+.sous-titre{margin-top:1.35rem}
h1+.heros-texte{margin-top:.2rem}
.fc-tags{margin-top:.8rem}
.presta-duo .fc-tags,.colonne-etroite .fc-tags{margin-top:1.8rem}
.encre .sous-titre{color:#C9CFDA}

/* cote décorative de marge (carnet de chantier) */
.cote{
  position:absolute;top:14%;bottom:14%;width:14px;
  pointer-events:none;opacity:.5;
}
.cote.gauche{left:clamp(4px,1.2vw,20px);border-left:1px solid var(--beton-clair)}
.cote.droite{right:clamp(4px,1.2vw,20px);border-right:1px solid var(--beton-clair)}
.cote::before,.cote::after{content:"";position:absolute;width:14px;height:1px;background:var(--beton-clair)}
.cote::before{top:0}.cote::after{bottom:0}
.cote.gauche::before,.cote.gauche::after{left:0}
.cote.droite::before,.cote.droite::after{right:0}
.encre .cote{opacity:.28}
@media(max-width:899px){.cote{display:none}}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-weight:600;font-size:1rem;line-height:1;
  padding:1.02rem 1.7rem;border-radius:var(--pilule);
  text-decoration:none;white-space:nowrap;
  transition:transform .35s var(--pose),box-shadow .35s var(--lent),background-color .3s;
  position:relative;overflow:hidden;min-height:44px;
}
.btn-plein{background:var(--grad-bleu);color:#fff;box-shadow:var(--ombre-bleue)}
.btn-plein:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(16,22,38,.08),0 40px 80px -24px rgba(42,91,168,.62)}
.btn-contour{border:1.5px solid currentColor;color:var(--encre);background:rgba(255,255,255,.001)}
.btn-contour:hover{transform:translateY(-3px)}
.encre .btn-contour,.heros .btn-contour{color:var(--papier)}
.fin-page .btn-contour{color:var(--papier)}
.heros .btn-contour,.fin-page .btn-contour{
  background:rgba(10,15,28,.45);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
}
.btn-tuile{background:var(--grad-tuile);color:#fff;box-shadow:0 1px 2px rgba(16,22,38,.06),0 30px 62px -24px rgba(180,100,60,.55)}
.btn-tuile:hover{transform:translateY(-3px)}
.btn-plein::before,.btn-tuile::before{
  content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;
  background:radial-gradient(140px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.28),transparent 65%);
  transition:opacity .35s;pointer-events:none;
}
.btn-plein:hover::before,.btn-tuile:hover::before{opacity:1}
.btn .fleche{transition:transform .35s var(--pose)}
.btn:hover .fleche{transform:translateX(4px)}
.lien-fleche{
  display:inline-flex;align-items:center;gap:.5rem;font-weight:600;
  color:var(--bleu);text-decoration:none;border-bottom:2px solid transparent;
  transition:gap .3s var(--pose);
}
.encre .lien-fleche{color:var(--bleu-clair)}
.lien-fleche:hover{gap:.9rem}

/* ---------- barre de navigation ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:900;
  transition:background-color .45s var(--lent),box-shadow .45s var(--lent),backdrop-filter .45s;
}
.nav-int{
  max-width:var(--colonne);margin-inline:auto;
  padding:.7rem clamp(1.1rem,4vw,2.5rem);
  display:flex;align-items:center;gap:1.2rem;
  position:relative;z-index:2;   /* toujours au-dessus du panneau mobile */
}
.nav.pose{
  background:rgba(249,247,242,.86);
  -webkit-backdrop-filter:blur(40px) saturate(2);backdrop-filter:blur(40px) saturate(2);
  box-shadow:inset 0 -1px 0 rgba(16,22,38,.08),0 18px 44px -20px rgba(16,22,38,.28);
}
.nav.pose .nav-liens>li>a{color:var(--encre)}
.nav.pose .nav-liens>li>a:hover{color:var(--bleu-fonce)}
.nav.pose .nav-liens .actif>a{color:var(--bleu)}
.nav.pose .nav-outil>a{color:var(--bleu-fonce);border-color:rgba(42,91,168,.45)}
.nav.pose .nav-outil>a:hover{background:rgba(42,91,168,.1)}
.nav.pose .nav-tel{color:var(--encre)}
.nav.pose .burger span{background:var(--encre)}
.nav-logo{display:flex;align-items:center;flex-shrink:0;transition:transform .3s var(--pose),opacity .45s var(--lent)}
.nav.logo-attendu:not(.pose) .nav-logo{opacity:0;transform:translateY(-8px);pointer-events:none}
.nav-logo:hover{transform:scale(1.05)}
.nav-logo img{height:60px;width:auto}
.nav-liens{display:none}
.nav-tel{display:none}
.nav-devis{display:none}
@media(min-width:1200px){
  .nav-liens{display:flex;align-items:center;gap:1.6rem;margin-left:auto;list-style:none}
  .nav-liens>li{position:relative}
  .nav-liens a{
    color:var(--papier);text-decoration:none;font-weight:600;font-size:.98rem;
    transition:transform .25s var(--pose),color .25s;display:inline-block;
  }
  .nav-liens>li>a:hover{transform:scale(1.07);color:#fff}
  .nav-liens .actif>a{color:var(--bleu-clair)}
  .nav-outil>a{
    color:var(--bleu-clair);border:1px solid rgba(126,168,232,.55);
    padding:.5rem 1.05rem;border-radius:var(--pilule);
  }
  .nav-outil>a:hover{background:rgba(126,168,232,.12)}
  .nav-tel{display:inline-flex;align-items:center;gap:.5rem;color:var(--papier);text-decoration:none;font-weight:700;font-size:.98rem;margin-left:.4rem}
  .nav-devis{display:inline-flex}
  .nav-devis.btn{padding:.72rem 1.35rem;font-size:.95rem}
  /* sous-menu prestations */
  .sous-menu{
    position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%,8px);
    min-width:20rem;padding:.7rem;list-style:none;
    background:rgba(251,249,245,.94);
    -webkit-backdrop-filter:blur(40px) saturate(2);backdrop-filter:blur(40px) saturate(2);
    border-radius:var(--r);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),var(--ombre-carte);
    opacity:0;visibility:hidden;transition:opacity .3s var(--lent),transform .3s var(--pose),visibility .3s;
  }
  .nav-liens li:hover>.sous-menu,.nav-liens li:focus-within>.sous-menu{
    opacity:1;visibility:visible;transform:translate(-50%,0);
  }
  .sous-menu a{display:block;padding:.65rem .9rem;border-radius:calc(var(--r) - .45rem);font-weight:600;color:var(--encre)}
  .sous-menu a:hover{background:rgba(42,91,168,.1);transform:none}
  .sous-menu .sm-note{display:block;font-size:.8rem;color:var(--beton);font-weight:400}
}

/* burger + panneau mobile (case a cocher : fonctionne sans JS) */
.burger-case{position:absolute;opacity:0;pointer-events:none}
.burger{
  margin-left:auto;display:flex;flex-direction:column;justify-content:center;gap:6px;
  width:48px;height:48px;padding:12px;cursor:pointer;border-radius:var(--pilule);
}
.burger span{height:2px;background:var(--papier);border-radius:1px;
  transition:transform .4s var(--pose),opacity .3s,background-color .3s}
.burger-case:focus-visible~.nav-int .burger{outline:2px solid var(--bleu-clair);outline-offset:3px}
.burger-case:checked~.nav-int .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger-case:checked~.nav-int .burger span:nth-child(2){opacity:0}
.burger-case:checked~.nav-int .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
/* menu ouvert : la croix reste claire meme quand la barre est posee (fond clair),
   et le logo sombre s'efface au lieu de se perdre sur le panneau nocturne */
.burger-case:checked~.nav-int .burger span{background:var(--papier)}
.burger-case:checked~.nav-int .nav-logo{opacity:0;transform:translateY(-8px);pointer-events:none}
.panneau{
  /* CAUSE DU BUG CORRIGE LE 31/08 : la barre prend un backdrop-filter des qu'on
     defile (.pose). Un ancetre a backdrop-filter devient le bloc conteneur des
     descendants en position:fixed : le panneau se retrouvait donc a la taille de
     la barre, et la page traversait le menu. On le pose en ABSOLU dans la barre
     (elle-meme fixee en haut) avec une hauteur de fenetre : plus aucun ancetre
     ne peut le redimensionner. Et z-index positif, plus -1 (il passait derriere). */
  position:absolute;inset:0 0 auto 0;height:100vh;height:100dvh;z-index:1;
  padding:calc(var(--h-nav) + .1rem) 1.5rem 1.1rem;
  /* de la matiere, pas un aplat : le fond nocturne du site sous un voile oblique */
  background:linear-gradient(105deg,rgba(9,13,24,.985) 0%,rgba(9,13,24,.95) 58%,
             rgba(14,21,40,.93) 100%),url("../img/fonds/fond-nuit.webp") center/cover;
  -webkit-backdrop-filter:blur(40px) saturate(2);backdrop-filter:blur(40px) saturate(2);
  opacity:0;visibility:hidden;transition:opacity .4s var(--lent),visibility .4s;
  overflow-y:auto;overscroll-behavior:contain;
}
/* bandeau opaque a hauteur de barre : les liens defilent dessous sans se meler a la croix */
.panneau::before{content:"";position:fixed;inset:0 0 auto 0;height:var(--h-nav);
  background:linear-gradient(180deg,rgba(9,13,24,.99) 70%,rgba(9,13,24,.86))}
.burger-case:checked~.panneau{opacity:1;visibility:visible}

/* le logo tient la tete du panneau : sans lui le coin restait vide sur l'accueil */
.pan-logo{position:relative;display:block;margin:-.4rem 0 .6rem}
.pan-logo img{width:132px;height:auto;display:block}

.panneau ul{list-style:none;display:grid;gap:0}
.panneau li+li:not(.pan-groupe):not(.pan-devis){border-top:1px solid rgba(126,168,232,.16)}
.panneau li.pan-groupe+li:not(.pan-devis){border-top:0}
.panneau a{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  color:var(--papier);text-decoration:none;font-weight:600;
  font-size:1.04rem;padding:.72rem .2rem;border-radius:.6rem;
  transition:padding-left .3s var(--pose),color .3s;
}
/* la fleche du site, la vraie */
.panneau li:not(.pan-groupe):not(.pan-devis)>a::after{
  content:"→";flex:none;opacity:.45;font-size:1.05rem;line-height:1;
  transition:transform .3s var(--pose),opacity .3s;
}
.panneau a:active{color:#fff;padding-left:.7rem}
.panneau a:active::after{opacity:1;transform:translateX(4px)}
/* etiquette de groupe : le trait de niveau du site, en petit */
.panneau .pan-groupe{
  display:flex;align-items:center;gap:.7rem;
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--bleu-clair);padding:1.35rem .2rem .35rem;font-weight:700;
}
.panneau .pan-groupe::before{
  content:"";width:1.8rem;height:2px;border-radius:1px;flex:none;
  background:linear-gradient(90deg,var(--bleu),var(--bleu-clair));
}
/* appel + devis colles en bas : les deux gestes restent sous le pouce */
.panneau .pan-devis{
  position:sticky;bottom:0;margin-top:1.1rem;
  padding:.9rem 0 calc(env(safe-area-inset-bottom,0px));
  background:linear-gradient(to top,rgba(9,13,24,.99) 66%,rgba(9,13,24,0));
  display:grid;grid-template-columns:1fr 1fr;gap:.5rem;border-top:0;
}
.panneau .pan-devis .btn{width:100%;padding:.8rem .5rem;font-size:.92rem}
.panneau .pan-devis .btn::after{display:none}
.panneau .btn-contour{color:var(--papier);border-color:rgba(244,241,234,.45)}
/* la page ne defile plus derriere le panneau ouvert */
html:has(.burger-case:checked){overflow:hidden}
@media(min-width:1200px){.burger,.panneau{display:none}}

/* ---------- dock d'action mobile (galet flottant, verre liquide) ---------- */
.barre-mobile{
  position:fixed;left:0;right:0;bottom:calc(.85rem + env(safe-area-inset-bottom,0px));
  z-index:850;display:flex;justify-content:center;pointer-events:none;
}
.dock{
  pointer-events:auto;display:flex;align-items:center;gap:.35rem;
  padding:.45rem;border-radius:var(--pilule);
  background:rgba(12,17,32,.6);
  -webkit-backdrop-filter:blur(40px) saturate(2);backdrop-filter:blur(40px) saturate(2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.08),
    0 4px 10px rgba(6,9,18,.3),0 24px 50px -16px rgba(6,9,18,.65);
}
.dock-item{
  display:flex;flex-direction:column;align-items:center;gap:.22rem;
  min-width:70px;min-height:48px;justify-content:center;
  padding:.4rem .8rem;border-radius:var(--pilule);
  color:#EDEAE2;text-decoration:none;
  transition:background .25s,transform .3s var(--pose);
}
.dock-item:active{transform:scale(.95);background:rgba(255,255,255,.1)}
.dock-item svg{width:19px;height:19px}
.dock-item span{font-size:.66rem;font-weight:600;letter-spacing:.03em}
.dock-devis{
  display:flex;align-items:center;justify-content:center;
  min-height:48px;padding:.4rem 1.35rem;margin-left:.15rem;
  border-radius:var(--pilule);background:var(--grad-bleu);color:#fff;
  font-weight:700;font-size:.92rem;text-decoration:none;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),var(--ombre-bleue);
  transition:transform .3s var(--pose);
}
.dock-devis:active{transform:scale(.96)}
@media(min-width:900px){.barre-mobile{display:none}}
body{padding-bottom:calc(var(--h-barre-mobile))}

/* ---------- héros ---------- */
.heros{
  position:relative;isolation:isolate;color:var(--papier);
  min-height:max(560px,100svh);
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--h-nav) + .5rem) 0 4.5rem;overflow:clip;
}
.heros>.colonne{width:100%}
/* Le premier ecran a un fond AVANT que la photo n'arrive. Sans lui, le
   temps que l'image se charge, le visiteur voit le voile sombre pose sur le
   papier clair : un aplat gris sale, titre blanc a peine lisible dessus.
   Cette couleur est la moyenne de la photo du heros composee avec le voile,
   donc la photo se pose sur une valeur deja juste et la transition ne se
   voit pas. Releve le 01/09/2026 sur telephone, connexion mobile reelle. */
.heros-fonds{position:absolute;inset:0;z-index:-3;background:#2A313E}
.heros-fond{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.6s ease-in-out;transform:scale(1.04);
}
.heros-fond.visible{opacity:1}
.heros-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3}
.heros-voile{
  position:absolute;inset:0;z-index:-2;
  background:linear-gradient(105deg,rgba(10,15,28,.8) 0%,rgba(10,15,28,.6) 40%,rgba(13,19,36,.3) 75%,rgba(13,19,36,.16) 100%);
}
.heros-voile::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(58% 78% at 20% 52%,rgba(10,15,28,.62),transparent 72%);
}
.heros-voile::after{
  content:"";position:absolute;inset:auto 0 0 0;height:34%;
  background:linear-gradient(180deg,rgba(16,22,38,0),rgba(16,22,38,.55));
}
.heros-int{position:relative;display:grid;gap:1.7rem;max-width:44rem;justify-items:start}
/* les enfants du heros sont des cases de grille : sans min-width:0, un bouton en
   white-space:nowrap elargit la piste et deborde de l'ecran sur mobile. */
.heros-int>*{min-width:0;max-width:100%}
@media(max-width:599px){
  .heros-actions{width:100%}
  .heros-actions .btn{white-space:normal;line-height:1.25;padding-block:.85rem;text-align:center}
}
.heros-plaque{align-self:start}
/* sur mobile le logo de la barre est masque en haut de l'accueil : le logo du
   heros peut donc chevaucher le bas de la barre et gagner de la hauteur. */
@media(max-width:899px){
  .heros{justify-content:flex-start}
  .heros-plaque{margin-top:-1.9rem}
}
.heros-plaque img{width:clamp(150px,20vw,290px);height:auto;display:block}/* 03/09 : KINONE le trouvait petit sur ordinateur */
.heros-sur{
  font-size:.82rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;
  color:#A9C6F0;display:flex;align-items:center;gap:.8rem;
  text-shadow:0 1px 10px rgba(6,9,18,.8);
}
.heros-sur::before{content:"";width:2.4rem;height:2px;background:linear-gradient(90deg,var(--bleu-clair),transparent);border-radius:1px}
.heros h1{color:#fff;text-shadow:0 3px 16px rgba(6,9,18,.75),0 10px 44px rgba(6,9,18,.6)}
.heros-texte{max-width:34rem;color:#F0EDE6;font-size:clamp(1.05rem,1rem + .3vw,1.2rem);text-shadow:0 2px 10px rgba(6,9,18,.8),0 6px 30px rgba(6,9,18,.65)}
.heros-pastille{
  display:inline-flex;flex-wrap:wrap;gap:0;align-self:start;
  background:var(--encre-verre);
  -webkit-backdrop-filter:blur(40px) saturate(2);backdrop-filter:blur(40px) saturate(2);
  border-radius:var(--r);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),var(--ombre-encre);
  padding:.35rem .4rem;
}
.heros-pastille>div{padding:.65rem 1.15rem;display:grid;gap:.1rem}
.heros-pastille>div+div{border-left:1px solid rgba(255,255,255,.14)}
.heros-pastille .hp-titre{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bleu-clair);font-weight:700}
.heros-pastille .hp-valeur{font-weight:700;color:#fff;font-size:.98rem;white-space:nowrap}
.heros-pastille .hp-valeur a{text-decoration:none}
.heros-pastille .hp-note{font-size:.8rem;color:var(--beton-clair)}
.heros-actions{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;margin-top:.4rem}
.heros-actions .lien-fleche{color:#fff;text-shadow:0 2px 14px rgba(6,9,18,.75)}
.heros-badge{
  display:inline-flex;align-items:center;gap:.55rem;align-self:start;
  border:1px solid rgba(126,168,232,.5);border-radius:var(--pilule);
  padding:.5rem 1.1rem;font-size:.78rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bleu-clair);
  background:rgba(10,15,28,.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
}
.heros-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--bleu-clair);box-shadow:0 0 12px var(--bleu-clair)}
@media(max-width:599px){
  .heros-plaque img{width:118px}
  .heros-int{gap:1.05rem}
  .heros h1{font-size:2rem}
  .heros-texte{font-size:1rem}
  .heros-sur{font-size:.68rem;letter-spacing:.16em}
  .heros-sur::before{display:none}
  .heros-pastille{display:grid;gap:0;padding:.3rem 0}
  .heros-pastille>div+div{border-left:0;border-top:1px solid rgba(255,255,255,.12)}
  .heros-actions .btn{flex:1 1 100%;justify-content:center}
}

/* héros d'accueil en deux temps : le discours à gauche, la carte de verre à droite */
.heros-duo{display:grid;gap:2.4rem;align-items:center;width:100%}
@media(min-width:1200px){
  .heros-duo{grid-template-columns:1.25fr .75fr;gap:3rem}
  /* les trois infos sur une seule ligne : a 1440 la pastille se repliait sur deux
     rangs, « Garanties » seule en bas avec du vide a droite (capture du 03/09/2026) */
  .heros-infos{flex-wrap:nowrap;width:100%}
  .heros-infos>div{padding:.65rem 1rem;flex:1 1 auto;min-width:0}
  .heros-infos .hi-valeur{font-size:.94rem}
}
.carte-verre{
  background:rgba(10,15,28,.74);
  -webkit-backdrop-filter:blur(40px) saturate(2);backdrop-filter:blur(40px) saturate(2);
  border-radius:var(--r-large);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),var(--ombre-encre);
  padding:1.9rem 2rem;display:grid;gap:1.35rem;max-width:30rem;
}
.carte-verre .heros-badge{align-self:auto;justify-self:start}
.cv-infos{display:grid;gap:1.05rem}
.cv-infos>div{display:grid;gap:.12rem}
.cv-infos>div+div{border-top:1px solid rgba(255,255,255,.13);padding-top:1.05rem}
.cv-titre{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--bleu-clair);font-weight:700}
.cv-valeur{font-family:var(--fd);font-size:1.3rem;color:#fff;line-height:1.3}
.cv-valeur a{text-decoration:none}
.cv-note{font-size:.85rem;color:#C9CFDA}
.cv-certifs{display:flex;flex-wrap:wrap;gap:.5rem}
.cv-certif{
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.28);border-radius:var(--pilule);
  padding:.42rem .85rem;color:#EDEAE2;
}
@media(max-width:1199px){.carte-verre{max-width:34rem}}

/* ---------- visionneuse avant / après (lightbox) ---------- */
.fc-visuel.zoomable{cursor:zoom-in;position:relative}
.fc-agrandir{
  position:absolute;right:.85rem;bottom:.85rem;z-index:6;
  width:40px;height:40px;display:grid;place-items:center;
  background:var(--encre-verre);color:#fff;border-radius:50%;
  font-size:1.05rem;line-height:1;
  -webkit-backdrop-filter:blur(18px) saturate(1.8);backdrop-filter:blur(18px) saturate(1.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);pointer-events:none;
  transition:transform .3s var(--pose),background .3s;
}
.fc-visuel.zoomable:hover .fc-agrandir{transform:scale(1.1);background:rgba(42,91,168,.85)}
.visionneuse{
  position:fixed;inset:0;z-index:2000;display:none;
  background:rgba(7,10,20,.94);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
}
.visionneuse.ouverte{display:flex;flex-direction:column}
.vis-tete{
  display:flex;align-items:center;gap:1rem;justify-content:space-between;
  padding:1rem clamp(1rem,3vw,2rem);color:#fff;
}
.vis-titre{font-family:var(--fd);font-size:1.1rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vis-compteur{font-size:.85rem;color:var(--beton-clair);white-space:nowrap}
.vis-fermer{
  width:46px;height:46px;border-radius:50%;flex-shrink:0;
  background:rgba(255,255,255,.1);color:#fff;font-size:1.3rem;
  display:grid;place-items:center;transition:background .25s,transform .3s var(--pose);
}
.vis-fermer:hover{background:rgba(255,255,255,.2);transform:scale(1.06)}
.vis-scene{flex:1;min-height:0;position:relative;display:flex;align-items:center}
.vis-piste{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;height:100%;width:100%;
  scrollbar-width:none;align-items:center;
}
.vis-piste::-webkit-scrollbar{display:none}
.vis-vue{
  flex:0 0 100%;scroll-snap-align:center;height:100%;
  display:flex;align-items:center;justify-content:center;
  padding:0 clamp(.6rem,2vw,2.5rem) 1rem;
}
.vis-vue .diptyque{max-height:100%;max-width:1200px;width:100%;border-radius:var(--r);overflow:clip;box-shadow:var(--ombre-encre)}
.vis-vue .diptyque img{max-height:calc(100svh - 170px);object-fit:cover}
.vis-vue figure.seule{margin:0;max-height:100%;display:flex;align-items:center}
.vis-vue figure.seule img{max-height:calc(100svh - 170px);width:auto;max-width:100%;border-radius:var(--r);box-shadow:var(--ombre-encre)}
.vis-vue{position:relative}
.vis-vue .rep{display:inline-flex}
.vis-fleches{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;padding:0 1rem;pointer-events:none}
.vis-fleches .glisseur-fleche{pointer-events:auto;width:52px;height:52px;font-size:1.3rem}
.vis-points{display:flex;gap:.45rem;justify-content:center;padding:0 0 1.2rem}
.vis-points .glisseur-point::before{background:rgba(255,255,255,.35)}
.vis-points .glisseur-point.actif::before{background:#fff}
body.visionneuse-ouverte{overflow:hidden}

.heros-infos{
  margin-top:3.2rem;
  display:inline-flex;flex-wrap:wrap;align-items:stretch;
  background:var(--encre-verre);
  -webkit-backdrop-filter:blur(40px) saturate(2);backdrop-filter:blur(40px) saturate(2);
  border-radius:var(--r);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),var(--ombre-encre);
  padding:.4rem .45rem;
}
.heros-infos>div{padding:.7rem 1.4rem;display:grid;gap:.18rem;align-content:center}
.heros-infos>div+div{border-left:1px solid rgba(255,255,255,.14)}
.hi-titre{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--bleu-clair);font-weight:700}
.hi-valeur{font-weight:700;color:#fff;font-size:1.02rem;white-space:nowrap}
.hi-valeur a{text-decoration:none}
@media(max-width:699px){
  .heros-infos{display:grid;width:100%;padding:.3rem 0}
  .heros-infos>div+div{border-left:0;border-top:1px solid rgba(255,255,255,.12)}
}

/* le présentoir d'expertises, à droite du héros d'accueil */
.expertises{position:relative;display:none}
@media(min-width:1200px){.expertises{display:block;height:30rem}}
.expertise{
  position:absolute;inset:0 0 3.6rem 0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:1.5rem;text-decoration:none;
  /* REGLE D'OR : l'etat par defaut est l'etat final VISIBLE. L'empilement du
     presentoir n'existe que sous html.js. Sans JS (ou en mouvement reduit),
     les quatre expertises se posent l'une sous l'autre, rien ne disparait. */
  opacity:1;visibility:visible;transform:none;
  transition:opacity .9s var(--lent),transform .9s var(--pose),visibility .9s;
}
.js .expertise{opacity:0;visibility:hidden;transform:translateY(14px) scale(.97)}
.js .expertise.visible{opacity:1;visibility:visible;transform:none}
html:not(.js) .expertises{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:1.4rem 1rem}
html:not(.js) .expertise{position:relative;inset:auto;gap:.9rem}
html:not(.js) .expertise img{max-height:11rem}
html:not(.js) .expertises-onglets{display:none}
.expertise img{
  max-height:19rem;width:auto;transition:transform .8s var(--pose);
  filter:drop-shadow(0 0 2px rgba(250,249,245,.95)) drop-shadow(0 0 26px rgba(244,241,234,.55)) drop-shadow(0 30px 50px rgba(6,9,18,.55));
}
.expertise:hover img{transform:translateY(-5px)}
.expertise-titre{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--fd);font-size:1.35rem;color:#fff;
  text-shadow:0 2px 18px rgba(6,9,18,.7);
}
.expertise-titre .fleche{color:var(--bleu-clair);transition:transform .35s var(--pose)}
.expertise:hover .expertise-titre .fleche{transform:translateX(5px)}
.expertise-sur{
  font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--bleu-clair);text-shadow:0 1px 10px rgba(6,9,18,.6);
}
.expertises-onglets{
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  display:flex;gap:.45rem;z-index:5;
  background:var(--encre-verre);
  -webkit-backdrop-filter:blur(40px) saturate(2);backdrop-filter:blur(40px) saturate(2);
  border-radius:var(--pilule);padding:.35rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),var(--ombre-encre);
}
.expertises-onglets button{
  border-radius:var(--pilule);padding:.5rem 1.05rem;
  font-size:.85rem;font-weight:600;color:var(--beton-clair);
  transition:background .3s,color .3s;white-space:nowrap;
}
.expertises-onglets button:hover{color:#fff}
.expertises-onglets button.actif{background:var(--grad-bleu);color:#fff;box-shadow:var(--ombre-bleue)}
.expertise-cta{
  position:absolute;top:42%;left:50%;transform:translate(-50%,-50%) scale(.92);
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--grad-bleu);color:#fff;border-radius:var(--pilule);
  padding:.75rem 1.5rem;font-weight:600;font-size:.98rem;
  box-shadow:var(--ombre-bleue);opacity:0;
  transition:opacity .35s var(--lent),transform .35s var(--pose);
  pointer-events:none;z-index:4;
}
.expertise:hover .expertise-cta,.expertise:focus-visible .expertise-cta{
  opacity:1;transform:translate(-50%,-50%) scale(1);
}

/* héros secondaire (pages intérieures) */
.heros-page{min-height:max(480px,72svh)}

/* le héros d'accueil tient dans l'écran : compactage sur écrans peu hauts */
@media(min-width:900px) and (max-height:960px){
  .heros{padding-top:calc(var(--h-nav) + 1.6rem);padding-bottom:2.4rem}
  .heros-int{gap:.95rem}
  .heros-plaque img{width:clamp(180px,29vh,290px)}
  .heros h1{font-size:clamp(2.1rem,5.4vh,3.6rem)}
  .heros-texte{font-size:1.02rem}
  .heros-pastille>div{padding:.5rem 1.05rem}
  .heros-sur{font-size:.76rem}
}
@media(min-width:900px) and (max-height:740px){
  .heros-int{gap:.75rem}
  .heros-plaque img{width:clamp(150px,22vh,210px)}
  .heros{padding-top:calc(var(--h-nav) + 1rem);padding-bottom:1.6rem}
  .heros-infos{margin-top:2rem}
  .heros h1{font-size:clamp(1.9rem,5vh,3rem)}
  .heros-badge{padding:.4rem .95rem;font-size:.72rem}
}

/* le fond de parallaxe déborde pour que la course ne découvre jamais un bord */
.fin-page .fond{inset:-100px 0}

/* ---------- bandeau d'annonce ---------- */
.bandeau{
  background:var(--grad-bleu-nuit);color:#fff;position:relative;overflow:clip;isolation:isolate;
}
.bandeau .fond{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center 82%}
.bandeau .voile-bandeau{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,rgba(16,30,58,.88) 0%,rgba(16,30,58,.66) 55%,rgba(16,30,58,.5) 100%)}
.bandeau::after{ /* halo de lumière chaude, côté droit */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 120% at 88% 30%,rgba(216,154,110,.28),transparent 60%),
             radial-gradient(50% 100% at 8% 100%,rgba(126,168,232,.22),transparent 55%);
}
.bandeau-int{
  position:relative;z-index:1;
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;
  padding-block:1.5rem;
}
.bandeau-pastille{
  flex-shrink:0;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);
  border-radius:var(--pilule);padding:.5rem 1.15rem;
  font-size:.76rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
}
.bandeau p{font-size:1.02rem;max-width:52rem;flex:1 1 24rem}
.bandeau strong{color:#fff}

/* ---------- bande des trois infos ---------- */
.bande-infos{background:var(--papier);border-bottom:1px solid rgba(16,22,38,.08)}
.bande-infos-int{display:grid;padding-block:1.9rem;gap:1.4rem}
.bande-infos-int>div{display:grid;gap:.15rem;padding-inline:.2rem}
.bi-titre{font-size:.72rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--bleu)}
.bi-valeur{font-family:var(--fd);font-size:1.35rem;line-height:1.25}
.bi-valeur a{text-decoration:none}
.bi-note{font-size:.88rem;color:var(--beton)}
@media(min-width:900px){
  .bande-infos-int{grid-template-columns:1fr 1fr 1fr;gap:0}
  .bande-infos-int>div{padding-inline:2.2rem}
  .bande-infos-int>div+div{border-left:1px solid rgba(16,22,38,.14)}
  .bande-infos-int>div:first-child{padding-left:.2rem}
}

/* ---------- fiches d'activité (bento) ---------- */
.activites{display:grid;gap:1.5rem;margin-top:3rem}
.fiche-activite{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:21rem;border-radius:var(--r-large);overflow:clip;isolation:isolate;
  color:#fff;text-decoration:none;box-shadow:var(--ombre-carte);
  transition:transform .5s var(--pose),box-shadow .5s var(--lent);
}
.fiche-activite:hover{transform:translateY(-6px);box-shadow:0 2px 4px rgba(16,22,38,.08),0 44px 84px -28px rgba(16,22,38,.5)}
.fiche-activite img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.1s var(--lent)}
.fiche-activite:hover img{transform:scale(1.045)}
.fiche-activite::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(195deg,rgba(10,15,28,.06) 32%,rgba(10,15,28,.62) 68%,rgba(10,15,28,.88) 100%);
  transition:opacity .5s;
}
.fa-corps{padding:1.7rem 1.8rem 1.8rem;display:grid;gap:.55rem}
.fa-numero{
  position:absolute;top:1.25rem;left:1.45rem;
  font-family:var(--fd);font-size:1rem;color:#fff;
  background:var(--encre-verre);border-radius:var(--pilule);padding:.35rem .95rem;
  -webkit-backdrop-filter:blur(18px) saturate(1.8);backdrop-filter:blur(18px) saturate(1.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}
.fa-titre{font-family:var(--fd);font-size:clamp(1.45rem,1.2rem + 1vw,1.9rem);color:#fff;line-height:1.15}
.fa-texte{color:#DAD6CC;font-size:.98rem;max-width:30rem}
.fa-appel{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:var(--bleu-clair);margin-top:.35rem;font-size:.95rem}
.fiche-activite:hover .fa-appel{gap:.9rem}
.fa-appel{transition:gap .35s var(--pose)}
@media(min-width:900px){
  .activites{grid-template-columns:repeat(12,1fr)}
  .fa-1{grid-column:span 7;min-height:26rem}
  .fa-2{grid-column:span 5;min-height:26rem}
  .fa-3{grid-column:span 5}
  .fa-4{grid-column:span 7}
}

/* ---------- fiches chantier ---------- */
.fiche-chantier{
  background:#fff;border-radius:var(--r-large);overflow:clip;
  box-shadow:var(--ombre-carte);display:flex;flex-direction:column;
  break-inside:avoid;
}
.fc-visuel{position:relative;overflow:clip}
.fc-visuel img{width:100%;height:auto}
.fc-marque{
  position:absolute;top:.9rem;left:.9rem;z-index:5;
  background:rgba(10,15,28,.66);color:#EDEAE2;
  -webkit-backdrop-filter:blur(18px) saturate(1.8);backdrop-filter:blur(18px) saturate(1.8);
  border-radius:var(--pilule);padding:.34rem .85rem;
  font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.fc-corps{padding:1.6rem 1.7rem 1.75rem;display:grid;gap:.65rem}
.fc-sur{font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--bleu)}
.fiche-chantier .fc-titre{font-family:var(--fd);font-size:1.35rem;line-height:1.2;color:var(--encre)}
.fc-texte{font-size:.96rem;color:var(--beton)}
.fc-lieu{
  font-family:var(--fd);font-size:1.02rem;line-height:1.1;color:var(--tuile-texte);
  display:flex;align-items:baseline;gap:.55rem;margin-top:-.15rem;
}
.fc-dept{
  font-family:var(--ft);font-size:.68rem;font-weight:700;letter-spacing:.12em;
  color:var(--beton);border:1px solid rgba(16,22,38,.16);
  border-radius:var(--pilule);padding:.15rem .5rem;
}

/* zones : l'index des communes prouvees par un chantier */
.zn-preuves{list-style:none;margin-top:2.4rem;max-width:56rem}
.zn-preuves li{
  display:grid;gap:.35rem;padding:1.25rem 0;
  border-top:1px solid rgba(16,22,38,.12);
}
.zn-preuves li:last-child{border-bottom:1px solid rgba(16,22,38,.12)}
.zp-ville{
  font-family:var(--fd);font-size:1.5rem;line-height:1.15;color:var(--encre);
  display:flex;align-items:baseline;gap:.6rem;
}
.zp-dept{
  font-family:var(--ft);font-size:.68rem;font-weight:700;letter-spacing:.12em;
  color:var(--beton);border:1px solid rgba(16,22,38,.16);
  border-radius:var(--pilule);padding:.15rem .5rem;
}
.zp-liens{display:flex;flex-wrap:wrap;gap:.45rem 1.35rem}
.zp-liens a{
  font-size:.95rem;color:var(--bleu-fonce);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;
  transition:color .28s var(--lent);
}
.zp-liens a>span{
  border-bottom:1px solid rgba(42,91,168,.3);padding-bottom:.12rem;
  transition:border-color .28s var(--lent);
}
.zp-liens a:hover{color:var(--tuile-texte)}
.zp-liens a:hover>span{border-color:var(--tuile-claire)}
@media (min-width:900px){
  .zn-preuves li{grid-template-columns:19rem 1fr;align-items:baseline;gap:2rem}
  .zp-liens{justify-content:flex-end}
}

.fc-tags{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.3rem}
.fc-lien{margin-top:.9rem;font-size:.92rem}
.fc-tag{
  font-size:.8rem;font-weight:600;padding:.45rem 1rem;border-radius:var(--pilule);
  background:rgba(42,91,168,.09);color:var(--bleu-fonce);border:1px solid rgba(42,91,168,.16);
}

/* galerie glissable commandée par le visiteur */
.glisseur{position:relative}
.glisseur-piste{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;border-radius:0;
}
.glisseur-piste::-webkit-scrollbar{display:none}
.glisseur-piste>*{flex:0 0 100%;scroll-snap-align:center}
.glisseur-fleches{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;padding:0 .7rem;pointer-events:none}
.glisseur-fleche{
  pointer-events:auto;width:44px;height:44px;border-radius:50%;
  background:var(--encre-verre);color:#fff;display:grid;place-items:center;
  -webkit-backdrop-filter:blur(18px) saturate(1.8);backdrop-filter:blur(18px) saturate(1.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);font-size:1.15rem;
  transition:transform .3s var(--pose);
}
.glisseur-fleche:hover{transform:scale(1.1)}
.glisseur-points{position:absolute;bottom:.8rem;left:50%;transform:translateX(-50%);display:flex;gap:.4rem}
.glisseur-point{
  width:26px;height:26px;border-radius:var(--pilule);background:none;padding:0;
  display:grid;place-items:center;
}
.glisseur-point::before{
  content:"";width:8px;height:8px;border-radius:var(--pilule);
  background:rgba(255,255,255,.45);transition:width .3s var(--pose),background .3s;
}
.glisseur-point.actif::before{width:20px;background:#fff}
.no-js .glisseur-fleches,.no-js .glisseur-points{display:none}
@media(hover:hover){
  .fc-visuel .glisseur-fleches{opacity:0;transition:opacity .35s var(--lent)}
  .fc-visuel:hover .glisseur-fleches,.fc-visuel:focus-within .glisseur-fleches{opacity:1}
}

/* diptyque à charnière : deux ratios réunis sans recadrage */
.diptyque{display:flex;align-items:stretch}
.diptyque figure{position:relative;margin:0;min-width:0}
.diptyque img{width:100%;height:100%;object-fit:cover}
.diptyque figure+figure{border-left:2px solid rgba(255,255,255,.85);box-shadow:-1px 0 18px rgba(255,255,255,.35)}
.diptyque .rep{
  position:absolute;bottom:.85rem;left:.85rem;display:none;
  background:var(--encre-verre);color:#fff;border-radius:var(--pilule);
  padding:.3rem .85rem;font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  -webkit-backdrop-filter:blur(18px) saturate(1.8);backdrop-filter:blur(18px) saturate(1.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}
/* flex-grow = rapport largeur/hauteur de chaque photo (classes générées) */
.fg-105{flex-grow:1.056}.fg-106{flex-grow:1.058}.fg-107{flex-grow:1.065}
.fg-108{flex-grow:1.08}.fg-81{flex-grow:.81}.fg-80{flex-grow:.806}

/* étapes numérotées (dressing) */
.etapes{counter-reset:etape}
.etapes .glisseur-piste>figure{counter-increment:etape;position:relative;margin:0}
.etapes .glisseur-piste>figure::after{
  content:"Étape " counter(etape);
  position:absolute;bottom:.85rem;left:.85rem;
  background:var(--encre-verre);color:#fff;border-radius:var(--pilule);
  padding:.32rem .9rem;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  -webkit-backdrop-filter:blur(18px) saturate(1.8);backdrop-filter:blur(18px) saturate(1.8);
}

/* mur maçonnerie */
.maconnerie{columns:1;column-gap:1.5rem;margin-top:2.6rem}
.maconnerie>*{margin-bottom:1.5rem}
@media(min-width:600px){.maconnerie{columns:2}}
@media(min-width:1200px){.maconnerie{columns:3}}

/* filtres chantiers (construits en JS) */
.filtres{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2.2rem}
.filtre{
  border:1.5px solid rgba(126,168,232,.4);color:var(--papier);background:rgba(255,255,255,.001);
  border-radius:var(--pilule);padding:.55rem 1.25rem;font-weight:600;font-size:.92rem;
  transition:background .3s,transform .3s var(--pose);
}
.filtre:hover{transform:translateY(-2px)}
.filtre.actif{background:var(--grad-bleu);border-color:transparent;color:#fff;box-shadow:var(--ombre-bleue)}
.fiche-chantier.masquee{display:none}
.section:not(.encre) .filtre{color:var(--encre);border-color:rgba(16,22,38,.28);background:#fff}
.section:not(.encre) .filtre.actif{color:#fff;background:var(--grad-bleu);border-color:transparent}

/* ---------- références pro / citation seule ---------- */
.citation-seule{max-width:52rem;margin-inline:auto;text-align:center;display:grid;gap:1.6rem;justify-items:center}
.citation-seule blockquote p{
  font-family:var(--fd);font-size:clamp(1.35rem,1.1rem + 1.6vw,2.1rem);
  line-height:1.4;color:#fff;
}
.citation-seule blockquote p::before{content:"« "}
.citation-seule blockquote p::after{content:" »"}
.citation-source{display:grid;gap:.1rem;justify-items:center}
.citation-source strong{font-size:1rem}
.citation-source span{font-size:.88rem;color:var(--bleu-clair)}
.citation-papier blockquote p{color:var(--encre)}
.citation-papier .citation-source span{color:var(--bleu)}

/* ---------- avis ---------- */
.avis-grille{display:grid;gap:1.5rem;margin-top:2.8rem}
.avis-grille .fiche-chantier{align-self:start}
@media(min-width:900px){.avis-grille{grid-template-columns:1fr 1fr}}
.avis{
  background:var(--encre-2);border-radius:var(--r-large);padding:1.8rem 1.9rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),var(--ombre-encre);
  display:grid;gap:1rem;align-content:start;position:relative;overflow:clip;
}
.avis::before{
  content:"";position:absolute;inset:0 auto 0 0;width:4px;
  background:linear-gradient(180deg,var(--bleu-clair),var(--bleu));
}
.avis-etoiles{color:var(--tuile-claire);letter-spacing:.2em;font-size:.95rem}
.avis p{font-size:.99rem;color:#E4E1D8}
.avis-signature{display:flex;align-items:center;gap:.85rem}
.avis-initiales{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--grad-bleu);color:#fff;font-weight:700;font-size:.9rem;flex-shrink:0;
}
.avis-signature div{display:grid;gap:.05rem}
.avis-signature strong{font-size:.95rem;color:#fff}
.avis-signature span{font-size:.82rem;color:var(--beton-clair)}
.avis-pro .avis-initiales{background:var(--grad-tuile)}
.avis-pro::before{background:linear-gradient(180deg,var(--tuile-claire),var(--tuile))}
.avis-note-mention{margin-top:1.6rem;font-size:.9rem;color:var(--beton);max-width:44rem}
.encre .avis-note-mention{color:#C9CFDA}
.avis-note-mention a{color:var(--bleu)}
.encre .avis-note-mention a{color:var(--bleu-clair)}

/* ---------- objections ---------- */
.objections{display:grid;gap:3rem;margin-top:3rem}
.objection{display:grid;gap:.7rem;max-width:44rem}
.objection:nth-child(even){margin-left:auto}
.objection-phrase{
  font-family:var(--fd);font-size:clamp(1.25rem,1.1rem + .9vw,1.7rem);
  color:var(--encre);line-height:1.3;
}
.objection-phrase::before{content:"« ";color:var(--tuile-texte)}
.objection-phrase::after{content:" »";color:var(--tuile-texte)}
.objection p{color:var(--beton);font-size:1rem}
.encre .objection-phrase{color:#fff}
.encre .objection p{color:var(--beton-clair)}

/* ---------- méthode (frise du carnet) ---------- */
.methode{display:grid;gap:0;margin-top:2.9rem;position:relative;max-width:56rem}
.etape-methode{
  display:grid;grid-template-columns:auto 1fr;gap:1.6rem;
  padding-block:1.9rem;position:relative;
}
.etape-methode+.etape-methode{border-top:1px dashed rgba(16,22,38,.18)}
.encre .etape-methode+.etape-methode{border-top-color:rgba(255,255,255,.14)}
.em-numero{
  font-family:var(--fd);font-size:1.15rem;width:54px;height:54px;flex-shrink:0;
  display:grid;place-items:center;border-radius:50%;
  background:var(--grad-bleu);color:#fff;box-shadow:var(--ombre-bleue);
}
.etape-methode div{display:grid;gap:.3rem;align-content:start}
.etape-methode h3{font-size:1.4rem}
.etape-methode p{font-size:1.02rem;color:var(--beton);max-width:40rem}
.encre .etape-methode p{color:var(--beton-clair)}
.em-duree{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tuile-texte)}

.citation-fondateur{max-width:54rem;display:grid;gap:1.7rem;margin-top:2.6rem}
.citation-fondateur blockquote p{
  font-family:var(--fd);font-size:clamp(1.45rem,1.15rem + 1.5vw,2.15rem);
  line-height:1.42;color:var(--encre);
}
.citation-fondateur blockquote p::before{content:"« ";color:var(--tuile-texte)}
.citation-fondateur blockquote p::after{content:" »";color:var(--tuile-texte)}
.citation-fondateur figcaption{font-size:1rem;color:var(--beton)}
.citation-fondateur figcaption strong{color:var(--encre)}

/* ---------- équipe ---------- */
.equipe{display:grid;gap:1.7rem;margin-top:2.9rem}
@media(min-width:900px){.equipe{grid-template-columns:1fr 1fr;gap:2rem}}
.membre{
  display:grid;grid-template-columns:38% 1fr;border-radius:var(--r-large);overflow:clip;
  background:#fff;box-shadow:var(--ombre-carte);
}
.membre img{width:100%;height:100%;object-fit:cover}
.membre>div{padding:1.5rem 1.55rem;display:grid;gap:.5rem;align-content:center}
.membre h3{font-size:1.3rem}
.membre .role{font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--bleu)}
.membre p{font-size:.93rem;color:var(--beton)}
@media(max-width:599px){.membre{grid-template-columns:1fr}.membre img{max-height:300px}}

/* ---------- engagements (liste du carnet, pas de cartes) ---------- */
.engagements{display:grid;gap:0;margin-top:2.8rem;max-width:50rem}
.engagement{
  display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:baseline;
  padding-block:1.05rem;
}
.engagement+.engagement{border-top:1px solid rgba(255,255,255,.12)}
.engagement .en-numero{font-family:var(--fd);color:var(--tuile-claire);font-size:1rem}
.engagement strong{color:#fff;font-size:1.05rem;display:block}
.engagement p{color:var(--beton-clair);font-size:.95rem}

/* ---------- bloc configurateur (aperçu accueil) ---------- */
.conf-apercu{
  display:grid;gap:2.6rem;align-items:center;margin-top:1rem;
}
@media(min-width:900px){.conf-apercu{grid-template-columns:1.05fr .95fr;gap:3.4rem}}
.conf-demo{
  background:#fff;border-radius:var(--r-large);box-shadow:var(--ombre-carte);
  overflow:clip;border:1px solid rgba(16,22,38,.07);
}
.conf-demo-tete{
  background:var(--grad-encre);color:#fff;padding:1rem 1.4rem;
  display:flex;align-items:center;gap:.8rem;font-size:.85rem;font-weight:600;
}
.conf-demo-tete::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--bleu-clair);box-shadow:0 0 10px var(--bleu-clair)}
.conf-demo-corps{padding:1.3rem 1.4rem;display:grid;gap:.7rem}
.conf-ligne{display:flex;justify-content:space-between;gap:1rem;font-size:.93rem;padding-block:.5rem}
.conf-ligne+.conf-ligne{border-top:1px dashed rgba(16,22,38,.14)}
.conf-ligne span:last-child{font-weight:700;white-space:nowrap}
.conf-total{
  display:flex;justify-content:space-between;align-items:baseline;
  background:var(--grad-papier);border-radius:var(--r);padding:.95rem 1.2rem;margin-top:.4rem;
}
.conf-total strong{font-family:var(--fd);font-size:1.5rem;color:var(--bleu-fonce)}
.conf-note{font-size:.8rem;color:var(--beton)}
.conf-points{display:grid;gap:1rem;margin-block:1.8rem 2rem}
.conf-points li{display:flex;gap:.8rem;align-items:baseline;list-style:none;font-size:1rem}
.conf-points li::before{content:"–";color:var(--tuile-texte);font-weight:700;flex-shrink:0}

/* ---------- formulaires ---------- */
.formulaire{display:grid;gap:1.05rem}
.champ{display:grid;gap:.35rem}
.champ label{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--encre)}
.champ input,.champ select,.champ textarea{
  font:inherit;font-size:1rem;color:var(--encre);
  background:#fff;border:1.5px solid rgba(16,22,38,.16);border-radius:.85rem;
  padding:.85rem 1.05rem;width:100%;transition:border-color .25s,box-shadow .25s;
}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;border-color:var(--bleu);
  box-shadow:0 0 0 4px rgba(42,91,168,.14);
}
.champ .note-champ{font-size:.8rem;color:var(--beton)}
.champ-double{display:grid;gap:1.05rem}
@media(min-width:600px){.champ-double{grid-template-columns:1fr 1fr}}
.choix-pilules{display:flex;flex-wrap:wrap;gap:.6rem}
.choix-pilules label{
  display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  border:1.5px solid rgba(16,22,38,.18);border-radius:var(--pilule);
  padding:.6rem 1.2rem;font-weight:600;font-size:.95rem;
  transition:background .25s,border-color .25s,color .25s;
}
.choix-pilules input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.choix-pilules label:has(input:checked){background:var(--grad-bleu);color:#fff;border-color:transparent;box-shadow:var(--ombre-bleue)}
.choix-pilules label:has(input:focus-visible){outline:3px solid var(--bleu);outline-offset:2px}
.hp-champ{position:absolute;left:-9999px;opacity:0}

/* ---------- carte contact ---------- */
.contact-grille{display:grid;gap:2.4rem;margin-top:2.4rem}
@media(min-width:1200px){.contact-grille{grid-template-columns:.85fr 1.15fr;gap:3.5rem}}
.contact-canaux{display:grid;gap:.9rem;align-content:start}
.canal{
  display:flex;align-items:center;gap:1.1rem;text-decoration:none;
  background:#fff;border-radius:var(--r);padding:1.05rem 1.25rem;
  box-shadow:var(--ombre-carte);transition:transform .35s var(--pose);
}
.canal:hover{transform:translateY(-3px)}
.canal-picto{
  width:48px;height:48px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:var(--grad-bleu);box-shadow:var(--ombre-bleue);
}
.canal-picto svg{width:22px;height:22px}
.canal.wa .canal-picto{
  background:linear-gradient(135deg,#25D366,#1EBE5D);
  box-shadow:0 1px 2px rgba(16,22,38,.06),0 24px 50px -20px rgba(37,211,102,.55);
}
.canal-mail .canal-picto{
  background:var(--grad-tuile);
  box-shadow:0 1px 2px rgba(16,22,38,.06),0 24px 50px -20px rgba(180,100,60,.5);
}
.canal div{display:grid;gap:.05rem}
.canal .canal-titre{font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--bleu)}
.canal strong{font-size:1.05rem}
.canal span{font-size:.85rem;color:var(--beton)}
.acces{
  background:var(--grad-encre);color:var(--papier);border-radius:var(--r);
  padding:1.4rem 1.45rem;display:grid;gap:.55rem;box-shadow:var(--ombre-encre);
}
.acces .canal-titre{color:var(--bleu-clair);font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.acces address{font-style:normal;font-family:var(--fd);font-size:1.25rem;line-height:1.35;color:#fff}
.acces p{font-size:.9rem;color:var(--beton-clair)}
.acces .lien-fleche{margin-top:.3rem}
.carte-formulaire{
  background:#fff;border-radius:var(--r-large);padding:clamp(1.4rem,3vw,2.3rem);
  box-shadow:var(--ombre-carte);
}
.carte-formulaire h3{margin-bottom:1.4rem}
.encart-conf{
  display:flex;align-items:center;gap:1rem;text-decoration:none;
  background:var(--grad-encre);color:#fff;border-radius:var(--r);
  padding:1.05rem 1.25rem;margin-bottom:1.5rem;
  box-shadow:var(--ombre-encre);transition:transform .35s var(--pose);
}
.encart-conf:hover{transform:translateY(-3px)}
.encart-conf div{display:grid;gap:.1rem}
.encart-conf strong{font-size:1rem}
.encart-conf span{font-size:.85rem;color:var(--beton-clair)}
.encart-conf .fleche{margin-left:auto;color:var(--bleu-clair);font-size:1.2rem}

/* ---------- FAQ (details natif) ---------- */
.faq{display:grid;gap:.9rem;margin-top:2.8rem;max-width:52rem}
.faq details{
  background:#fff;border-radius:var(--r);box-shadow:var(--ombre-carte);
  overflow:clip;border:1px solid rgba(16,22,38,.06);
}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;
  align-items:center;padding:1.15rem 1.4rem;font-weight:600;font-size:1.02rem;min-height:44px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";font-family:var(--fd);font-size:1.5rem;color:var(--bleu);
  transition:transform .35s var(--pose);flex-shrink:0;line-height:1;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 1.4rem 1.3rem;color:var(--beton);font-size:.98rem;max-width:46rem}

/* ---------- réseaux : le téléphone dessiné, les vraies couleurs ---------- */
.reseaux-grille{display:grid;gap:3rem;align-items:center;margin-top:1rem}
@media(min-width:900px){.reseaux-grille{grid-template-columns:1.1fr .9fr;gap:3rem}}
.reseaux-boutons{display:grid;gap:1rem;max-width:27rem;margin-top:1.6rem}
.bouton-reseau{
  display:flex;align-items:center;gap:1.05rem;text-decoration:none;color:#fff;
  border-radius:var(--r);padding:1.05rem 1.3rem;
  transition:transform .35s var(--pose),box-shadow .35s var(--lent);
}
.bouton-reseau:hover{transform:translateY(-3px)}
.bouton-reseau svg{width:30px;height:30px;flex-shrink:0}
.bouton-reseau div{display:grid;gap:.05rem}
.bouton-reseau span{font-size:.8rem;opacity:.85}
.bouton-reseau strong{font-size:1.02rem}
.bouton-reseau .fleche{margin-left:auto;font-size:1.15rem}
/* Les deux boutons de réseaux, ramenés dans le vocabulaire de la maison –
   04/09/2026.
   Ce qu'ils étaient : un dégradé orange → magenta → violet pour Instagram, un
   aplat #1877F2 pour Facebook. Six couleurs étrangères à la palette, sur un
   site entièrement bâti sur papier, encre et bleu Bouygues. Le dégradé
   arc-en-ciel est nommément exclu par le prompt-système du projet, qui dit
   « Aucune autre couleur n'est admise », et l'aplat contredit la règle de la
   maison (« le dégradé est la norme sur les surfaces de marque »). Sur la
   capture, ce bloc magenta était l'objet le plus voyant de l'accueil, et le
   seul qu'un concurrent aurait pu coller tel quel sur son propre site.
   Ce qu'ils deviennent : la matière du site (encre en dégradé), et la couleur
   de la plateforme réduite au liseré et au pictogramme – c'est le pictogramme
   qu'on reconnaît, jamais le dégradé du fond. */
.bouton-instagram{
  background:var(--grad-encre);
  box-shadow:inset 0 0 0 1px rgba(221,42,123,.42),
             0 1px 2px rgba(16,22,38,.08),0 28px 58px -22px rgba(16,22,38,.5);
}
.bouton-instagram svg{color:#F06090}
.bouton-facebook{
  background:var(--grad-encre);
  box-shadow:inset 0 0 0 1px rgba(96,160,255,.42),
             0 1px 2px rgba(16,22,38,.08),0 28px 58px -22px rgba(16,22,38,.5);
}
.bouton-facebook svg{color:#7EA8E8}
.telephone{
  width:min(270px,74vw);margin-inline:auto;
  border-radius:2.6rem;padding:.65rem;
  background:linear-gradient(160deg,#232a3e,#0d1220);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),var(--ombre-encre);
  position:relative;
}
.telephone::before{
  content:"";position:absolute;top:1.05rem;left:50%;transform:translateX(-50%);
  width:34%;height:14px;border-radius:var(--pilule);background:#0d1220;z-index:2;
}
.telephone-ecran{border-radius:2rem;overflow:clip}
.telephone-ecran img{width:100%;height:auto;display:block}

/* ---------- fonds générés (famille validée par la DA) ---------- */
.fond-genere-nuit{background-image:url("../img/fonds/fond-nuit.webp")}
.fond-genere-verre{background-image:url("../img/fonds/fond-verre.webp")}
.fond-genere-papier{background-image:url("../img/fonds/fond-papier-mineral.webp")}
.fond-genere-atelier{background-image:url("../img/fonds/fond-atelier.webp")}
.fond-genere-papier-soie{background-image:url("../img/fonds/fond-papier-soie.webp")}
.fond-genere-caustiques{background-image:url("../img/fonds/fond-caustiques.webp")}
.fond-genere-fil-a-plomb{background-image:url("../img/fonds/fond-fil-a-plomb.webp")}
.fond-genere-matin{background-image:url("../img/fonds/fond-matin.webp")}
.fond-genere-poussiere{background-image:url("../img/fonds/fond-poussiere.webp")}
.fond-genere-crepuscule{background-image:url("../img/fonds/fond-crepuscule.webp")}
.voile-encre-genere{background:linear-gradient(105deg,rgba(11,16,30,.94) 0%,rgba(11,16,30,.84) 45%,rgba(11,16,30,.72) 100%)}
.voile-papier-genere{background:linear-gradient(105deg,rgba(247,244,238,.55) 0%,rgba(247,244,238,.2) 100%)}
.encre.section-photo{background:var(--encre)}
.encre.section-photo .etiquette{color:#B4CCF2}

/* illustration d'activité : déborde du cadre, jamais entre le texte et son fond */
.presta-duo{display:grid;gap:2.4rem;align-items:center}
@media(min-width:900px){.presta-duo{grid-template-columns:1.05fr .95fr;gap:3rem}}
.presta-illu{justify-self:center;position:relative;pointer-events:none;max-width:30rem}
.presta-illu img{width:100%;height:auto;filter:drop-shadow(0 30px 50px rgba(16,22,38,.25))}
@media(min-width:1200px){
  .presta-illu{max-width:34rem;margin-right:-4.5rem}
}

/* arrivée de la page estimation : fond de verre + carnet qui déborde */
.conf-tete.section-photo{overflow:clip}
.conf-tete .fond{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center}
.conf-tete .voile-conf{
  position:absolute;inset:0;z-index:0;
  background:linear-gradient(105deg,rgba(11,16,30,.86) 0%,rgba(11,20,44,.7) 55%,rgba(11,20,44,.55) 100%);
}
.conf-tete-illu{
  position:absolute;right:clamp(-6rem,-2vw,0rem);bottom:-4.5rem;width:clamp(240px,30vw,420px);
  pointer-events:none;z-index:0;opacity:.92;
  filter:drop-shadow(0 30px 60px rgba(6,9,18,.5));
}
.conf-tete-illu img{width:100%;height:auto}
@media(max-width:899px){.conf-tete-illu{display:none}}

/* ---------- fin de page + pied ---------- */
.fin-page{position:relative;isolation:isolate;overflow:clip;color:var(--papier)}
.fin-page .fin-int{display:grid;gap:1.3rem;max-width:40rem;padding-block:clamp(4rem,8vw,7rem)}
.fin-page h2{color:#fff}
.fin-page p{color:#E7E4DC}
.fin-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:.5rem}

.pied{background:var(--encre);color:var(--beton-clair);font-size:.93rem}
.pied-int{
  display:grid;gap:2.2rem;padding-block:3.2rem 2rem;
}
@media(min-width:900px){.pied-int{grid-template-columns:1.3fr 1fr 1fr 1fr}}
.pied-logo .plaque-logo{display:inline-block;margin-bottom:1.1rem}
.pied-logo img{height:82px;width:auto;display:block}
.pied p{max-width:24rem}
.pied-col h4{
  font-size:.74rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--bleu-clair);margin-bottom:.9rem;
}
/* L'ecart fait la zone tactile, pas le padding du lien. Les liens du pied sont
   en ligne : leur padding-block de .85rem grandit la boite SANS ecarter les
   lignes (et margin-block negatif ne s'applique pas a une boite inline). A
   .45rem d'ecart, chaque zone de clic mordait de 14 px sur celle du dessus et
   le lien du DESSOUS gagnait : taper le bas d'un libelle ouvrait le suivant.
   1.35rem d'ecart met les lignes a 47 px : plus aucun recouvrement, et la zone
   tactile depasse enfin 44 px pour de vrai. Mesure du 14/09/2026, LECONS n°155. */
.pied-col ul{list-style:none;display:grid;gap:1.35rem}
.pied-col a{color:var(--beton-clair);text-decoration:none;transition:color .25s}
.pied-col a:hover{color:#fff}
.pied-siret{font-size:.8rem;color:var(--beton);margin-top:1rem}
.pied-bas{
  border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-wrap:wrap;gap:.6rem 1.8rem;justify-content:space-between;
  padding-block:1.3rem;font-size:.82rem;color:var(--beton);
}
.pied-bas a{color:inherit}

/* ---------- pages légales ---------- */
.page-legale{padding-top:calc(var(--h-nav) + 3rem)}
.page-legale h1{font-size:clamp(2rem,1.6rem + 1.8vw,3rem);margin-bottom:2rem}
.page-legale h2{font-size:1.45rem;margin:2.2rem 0 .7rem}
.page-legale p,.page-legale li{color:var(--beton);font-size:.98rem;margin-bottom:.6rem}
.page-legale ul{padding-left:1.2rem}
.page-legale strong{color:var(--encre)}

/* ================================================================
   RÉVÉLATIONS : règle d'or : l'état par défaut est l'état visible.
   L'état de départ n'existe que sous html.js, posé par le JS.
   ================================================================ */
.js .r,.js .rl,.js .rr{opacity:0;transition:opacity .8s var(--lent),transform .8s var(--pose)}
.js .r{transform:translateY(46px)}
.js .rl{transform:translateX(-90px)}
.js .rr{transform:translateX(90px)}
@media(max-width:899px){
  .js .r{transform:translateY(30px)}
  .js .rl{transform:translateX(-30px)}
  .js .rr{transform:translateX(30px)}
}
.js .on{opacity:1;transform:none}
.js .d1{transition-delay:.1s}.js .d2{transition-delay:.2s}.js .d3{transition-delay:.3s}
.js .d4{transition-delay:.4s}.js .d5{transition-delay:.5s}.js .d6{transition-delay:.6s}

/* ── mobile : les piles deviennent des carrousels au doigt ──
   Défilement commandé par le visiteur ; la carte suivante dépasse du bord
   pour inviter au geste. Aucune information portée par le mouvement. */
@media(max-width:899px){
  .activites,.avis-grille,.maconnerie{
    display:flex;flex-wrap:nowrap;overflow-x:auto;gap:1rem;
    scroll-snap-type:x mandatory;scrollbar-width:none;
    columns:auto;column-gap:normal;
    margin-inline:calc(-1 * clamp(1.1rem,4vw,2.5rem));
    padding-inline:clamp(1.1rem,4vw,2.5rem);
    padding-bottom:.4rem;
  }
  .activites::-webkit-scrollbar,.avis-grille::-webkit-scrollbar,
  .maconnerie::-webkit-scrollbar{display:none}
  .activites>*,.avis-grille>*,.maconnerie>*{
    flex:0 0 86%;scroll-snap-align:center;margin-bottom:0;
  }
  .fiche-activite{min-height:23rem}
  .avis-grille .fiche-chantier,.maconnerie .fiche-chantier{align-self:flex-start}
  .avis{align-self:stretch}
}

/* parallaxe : uniquement des fonds, pilotée par JS via variable */
.parallaxe{transform:translateY(var(--px,0));will-change:transform}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .js .r,.js .rl,.js .rr{opacity:1!important;transform:none!important}
  .heros-fond{transition:none}
  .parallaxe{transform:none!important}
}

/* ---------- fonds photographiques par page (jamais de style= en ligne) ---------- */
.marge-haute{margin-top:2.4rem}
.fond-heros-1{background-image:url("../img/chantiers/terrasse-spots/photo-2.webp")}/* expertise 1 : terrasses */
.fond-heros-2,.fond-heros-3{background-image:none}/* chargées par le JS après le LCP */
.fond-fin-accueil{background-image:url("../img/chantiers/terrasse-spots/photo-1.webp")}
.fond-renov{background-image:url("../img/chantiers/salle-de-bain/apres-2.webp")}
.fond-exterieur{background-image:url("../img/chantiers/terrasse-spots/photo-2.webp")}
.fond-construction{background-image:url("../img/chantiers/terrasse-hauteur/apres-2.webp")}
.fond-energie{background-image:url("../img/chantiers/toiture/apres-1.webp")}
.fond-chantiers{background-image:url("../img/chantiers/garage-1000m2/photo-3.webp")}
.fond-entreprise{background-image:url("../img/chantiers/garage-1000m2/photo-1.webp")}
.fond-fin-renov{background-image:url("../img/chantiers/appartement-base-vie/apres-2.webp")}
.fond-fin-exterieur{background-image:url("../img/chantiers/terrasse-paysager/photo-3.webp")}
.fond-fin-construction{background-image:url("../img/chantiers/escalier-suspendu/apres-1.webp")}
.fond-fin-energie{background-image:url("../img/chantiers/toiture/apres-1.webp")}
.fond-fin-chantiers{background-image:url("../img/chantiers/terrasse-hauteur/apres-3.webp")}
.fond-fin-entreprise{background-image:url("../img/chantiers/garage-1000m2/photo-2.webp")}
.fond-404{background-image:url("../img/chantiers/appartement-base-vie/avant-1.webp")}
.voile-fin{background:linear-gradient(105deg,rgba(10,15,28,.94) 0%,rgba(10,15,28,.84) 40%,rgba(13,19,36,.68) 100%)}
.fin-page{background:var(--encre)}

/* héros de pages intérieures : image en <img> pour le LCP + srcset */
.heros-page .heros-int{max-width:42rem}

/* ---------- configurateur d'estimation ---------- */
.conf-tete{
  background:var(--grad-encre);color:var(--papier);
  padding:calc(var(--h-nav) + 3rem) 0 2.2rem;position:relative;overflow:clip;
}
.conf-tete::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(55% 120% at 90% 20%,rgba(126,168,232,.16),transparent 60%),
             radial-gradient(45% 100% at 10% 110%,rgba(216,154,110,.12),transparent 55%);
}
.conf-tete h1{color:#fff;font-size:clamp(2rem,1.5rem + 2.4vw,3.4rem)}
.conf-tete .colonne{position:relative;z-index:1}
.conf-tete-texte{color:var(--beton-clair);max-width:38rem;margin-top:.7rem}
/* le cadre pose des le depart : ce que l'outil donne, et ce qu'il ne donne pas */
.conf-avert-tete{
  max-width:38rem;margin-top:1.1rem;padding:.95rem 1.15rem;
  background:rgba(9,13,24,.8);
  -webkit-backdrop-filter:blur(30px) saturate(1.8);backdrop-filter:blur(30px) saturate(1.8);
  border-radius:var(--r);border-left:3px solid var(--tuile);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 22px 48px -22px rgba(6,9,18,.7);
  color:#DFE4EC;font-size:.93rem;line-height:1.6;
}
.conf-avert-tete strong{color:#F0C4A4}
.conf-etapes{
  display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;list-style:none;margin-top:1.8rem;
}
.conf-etapes li{
  display:flex;align-items:center;gap:.55rem;font-size:.9rem;font-weight:600;
  color:#DFE4EC;text-shadow:0 1px 10px rgba(6,9,18,.6);transition:color .3s;
}
.conf-etapes li span{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid currentColor;font-size:.82rem;font-family:var(--fd);
}
.conf-etapes li.active{color:#fff}
.conf-etapes li.active span{background:var(--grad-bleu);border-color:transparent;box-shadow:var(--ombre-bleue)}
.conf-etapes li.faite{color:#A9C6F0}
.conf-noscript{padding-block:2rem;font-size:1.02rem}
.conf-corps{padding-top:2.6rem}
.conf-ecran{display:none}
.conf-ecran.active{display:block}
.conf-h2{margin-bottom:.5rem}
.conf-groupe{margin-top:2.4rem}
.conf-groupe h3{font-size:1.2rem}
.conf-groupe-note{font-size:.88rem;color:var(--beton);margin-bottom:1rem}
.conf-cartes{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
.conf-carte{
  text-align:left;background:#fff;border:1.5px solid rgba(16,22,38,.12);
  border-radius:var(--r);padding:1.1rem 1.25rem;display:grid;gap:.25rem;
  transition:transform .35s var(--pose),box-shadow .35s var(--lent),border-color .3s,background .3s;
  box-shadow:var(--ombre-carte);
}
.conf-carte:hover{transform:translateY(-3px)}
.conf-carte strong{font-size:1.02rem}
.conf-carte span{font-size:.85rem;color:var(--beton)}
.conf-carte.choisie{
  background:var(--grad-bleu);border-color:transparent;color:#fff;box-shadow:var(--ombre-bleue);
}
.conf-carte.choisie span{color:rgba(255,255,255,.82)}
.conf-pied-ecran{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.6rem}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none!important}
.conf-bloc{
  background:#fff;border-radius:var(--r-large);box-shadow:var(--ombre-carte);
  margin-top:1.6rem;overflow:clip;border:1px solid rgba(16,22,38,.06);
}
.conf-bloc-tete{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.2rem 1.5rem;background:var(--grad-papier);border-bottom:1px solid rgba(16,22,38,.08);
}
.conf-bloc-tete strong{font-family:var(--fd);font-size:1.25rem;display:block}
.conf-bloc-tete span{font-size:.85rem;color:var(--beton)}
.conf-bloc-total{
  font-family:var(--fd);font-size:1.3rem;color:var(--bleu-fonce);white-space:nowrap;
}
.conf-bloc-lignes{padding:.4rem 1.5rem .9rem}
.conf-ligne-p{
  display:grid;grid-template-columns:1fr auto auto;gap:.6rem 1.2rem;align-items:center;
  padding-block:.75rem;transition:opacity .3s;
}
.conf-ligne-p+.conf-ligne-p{border-top:1px dashed rgba(16,22,38,.12)}
.conf-ligne-p.eteinte{opacity:.5}
.cb-choix{display:flex;gap:.7rem;align-items:baseline;cursor:pointer;font-size:.97rem}
.cb-choix input{width:19px;height:19px;accent-color:var(--bleu);flex-shrink:0;translate:0 3px}
.cb-qte{display:inline-flex;align-items:center;gap:.45rem}
.cb-qte input{
  width:5.2rem;padding:.5rem .6rem;border:1.5px solid rgba(16,22,38,.16);
  border-radius:.7rem;font:inherit;text-align:right;
}
.cb-qte input:focus{outline:none;border-color:var(--bleu);box-shadow:0 0 0 4px rgba(42,91,168,.14)}
.cb-qte em,.cb-forfait{font-style:normal;font-size:.85rem;color:var(--beton)}
.cb-prix{font-weight:700;min-width:6rem;text-align:right;white-space:nowrap}
.cb-prix.zero{color:var(--beton-clair);font-weight:400}
@media(max-width:599px){
  .conf-ligne-p{grid-template-columns:1fr auto}
  .cb-prix{grid-column:2;grid-row:1}
  .cb-qte{grid-column:1 / -1;justify-self:end}
}
.conf-surdevis{
  background:var(--grad-encre);color:var(--papier);border-radius:var(--r-large);
  box-shadow:var(--ombre-encre);margin-top:1.6rem;padding:1.5rem 1.6rem;
}
.conf-surdevis strong{font-family:var(--fd);font-size:1.2rem;color:#fff}
.conf-surdevis p{font-size:.93rem;color:var(--beton-clair);margin:.4rem 0 .8rem;max-width:44rem}
.conf-surdevis-cb{display:flex;gap:.6rem;align-items:center;font-size:.95rem;cursor:pointer}
.conf-surdevis-cb input{width:18px;height:18px;accent-color:var(--bleu-clair)}
.conf-avert{
  background:rgba(180,100,60,.1);border:1px solid rgba(180,100,60,.3);
  border-radius:var(--r);padding:1rem 1.3rem;font-size:.93rem;margin-block:1.4rem;
  color:#7A4526;
}
.conf-recap-carte{
  background:#fff;border-radius:var(--r-large);box-shadow:var(--ombre-carte);
  padding:1.5rem;border:1px solid rgba(16,22,38,.06);
}
.defilable{overflow-x:auto}
.rc-table{width:100%;border-collapse:collapse;font-size:.93rem;min-width:34rem}
.rc-table th{
  text-align:right;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--beton);padding:.5rem .8rem;border-bottom:2px solid rgba(16,22,38,.14);
}
.rc-table th:first-child{text-align:left}
.rc-table td{padding:.55rem .8rem;border-bottom:1px solid rgba(16,22,38,.08);text-align:right;white-space:nowrap}
.rc-table td.rc-lbl{text-align:left;white-space:normal}
.rc-groupe td{
  text-align:left;font-family:var(--fd);font-size:1.05rem;color:var(--bleu-fonce);
  padding-top:1.1rem;border-bottom:2px solid rgba(42,91,168,.25);
}
.rc-surdevis td{font-style:italic;color:var(--tuile-texte)}
.rc-totaux{display:grid;gap:.4rem;justify-items:end;margin-top:1.2rem}
.rc-totaux>div{display:flex;gap:2.4rem;font-size:.98rem}
.rc-ttc{
  background:var(--grad-papier);border-radius:var(--r);padding:.8rem 1.2rem;
  font-family:var(--fd);font-size:1.25rem!important;color:var(--bleu-fonce);
}
.conf-vide{padding:2rem;text-align:center;color:var(--beton)}
.conf-form{max-width:44rem}
.conf-erreur{color:#A03A2A;font-weight:600;font-size:.95rem}
.conf-fini{max-width:38rem;display:grid;gap:1.1rem;padding-block:2rem}

/* ---------- impression (page estimation) ---------- */
@media print{
  body{background:#fff}
  body.impression>*{display:none!important}
  body.impression #zone-impression{display:block!important}
}
#zone-impression{display:none;font-size:11.5px;color:#1B2030;font-family:var(--ft);line-height:1.6}
#zone-impression h1{font-size:24px;color:#101626;font-family:var(--fd);font-weight:400;letter-spacing:.01em}
#zone-impression h2{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#2A5BA8;font-family:var(--ft);font-weight:700;margin-bottom:6px}
.imp-entete{display:flex;gap:18px;align-items:center;border-bottom:3px solid #2A5BA8;padding-bottom:16px;margin-bottom:20px}
.imp-entete img{height:64px;width:auto}
.imp-entete-txt{flex:1}
.imp-entete-txt p{font-size:10px;color:#68707F;margin-top:4px}
.imp-date{text-align:right;border:1px solid #DCE0E8;border-radius:8px;padding:8px 14px}
.imp-date span{display:block;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:#68707F}
.imp-date strong{font-size:12px;color:#101626}
.imp-parties{width:100%;border-collapse:separate;border-spacing:10px 0;margin:0 -10px 18px}
.imp-parties td{width:50%;background:#F5F3EE;border-radius:8px;padding:12px 14px;vertical-align:top;border:1px solid #E8E4DA}
.imp-parties p{font-size:10.5px;line-height:1.8;color:#3A3F4E}
.imp-parties p strong{color:#101626;font-size:11.5px}
.imp-table{width:100%;border-collapse:collapse}
.imp-table th{background:#101626;color:#fff;font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;padding:8px 12px;text-align:right}
.imp-table th:first-child{text-align:left;border-radius:6px 0 0 0}
.imp-table th:last-child{border-radius:0 6px 0 0}
.imp-table td{font-size:11px;padding:7px 12px;border-bottom:1px solid #ECEEF2;text-align:right;white-space:nowrap}
.imp-table td.imp-lbl{text-align:left;white-space:normal;color:#3A3F4E}
.imp-groupe td{background:#F5F3EE;font-weight:700;font-size:11px;text-align:left;color:#101626;border-bottom:2px solid #E2E5EA}
.imp-surdevis td{font-style:italic;color:#9C4F28}
.imp-totaux{display:grid;gap:4px;justify-items:end;margin-top:12px}
.imp-totaux>div{display:flex;gap:36px;font-size:11px;color:#3A3F4E}
.imp-ttc{background:#F0F4FB;border:1px solid #C8D6EE;border-radius:8px;padding:8px 14px;font-weight:800;font-size:13.5px!important;color:#20477F}
.imp-ttc span{color:#20477F}
.imp-suite{margin-top:22px;border:1px solid #DCE0E8;border-radius:10px;padding:14px 16px;background:#FBFAF7}
.imp-etapes{display:flex;gap:14px;margin-top:4px}
.imp-etapes>div{flex:1;font-size:9.5px;color:#3A3F4E;line-height:1.55}
.imp-etapes strong{color:#101626;font-size:10px}
.imp-rappel{margin-top:12px;padding-top:10px;border-top:1px dashed #DCE0E8;font-size:10.5px;color:#3A3F4E}
.imp-rappel strong{color:#20477F;font-size:12px}
.imp-pied{display:flex;justify-content:space-between;gap:24px;font-size:8.5px;color:#68707F;line-height:1.7}
.imp-droite{text-align:right;white-space:nowrap;align-self:flex-end}
@media print{
  .imp-pied{position:fixed;bottom:0;left:0;right:0;border-top:2px solid #2A5BA8;padding-top:8px;background:#fff}
  #zone-impression{padding-bottom:70px}
}

/* ---------- pages chantier (une URL par chantier) ---------- */
/* fil d'Ariane : la position dans le site, dite en clair */
.fil{background:var(--papier-2);border-bottom:1px solid rgba(16,22,38,.07)}
.fil ol{
  list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  padding-block:.85rem;font-size:.86rem;color:var(--beton);
}
.fil li+li::before{content:"/";margin-right:.5rem;color:rgba(92,100,112,.5)}
.fil a{color:var(--bleu-fonce);text-decoration:none;font-weight:600}
.fil a:hover{text-decoration:underline}
.fil [aria-current]{color:var(--beton)}

/* les paires avant / apres, en diptyque a charniere, chacune legendee */
.ch-paires{display:grid;gap:2.2rem;margin-top:2.6rem}
@media(min-width:1200px){.ch-paires{gap:2.8rem}}
.ch-paire{margin:0}
.ch-paire .diptyque{
  border-radius:var(--r);overflow:clip;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),var(--ombre-carte);
}
.diptyque .ch-demi{position:relative;min-width:0;display:flex}
.diptyque .ch-demi img{width:100%;height:100%;object-fit:cover;display:block}
.diptyque .ch-demi+.ch-demi{
  border-left:2px solid rgba(255,255,255,.85);
  box-shadow:-1px 0 18px rgba(255,255,255,.35);
}
.ch-paire .rep{display:inline-flex}
.ch-paire figcaption,.ch-photo figcaption{
  margin-top:.85rem;font-size:.92rem;line-height:1.55;color:var(--beton);
  padding-left:.9rem;border-left:2px solid rgba(180,100,60,.45);
}

/* les series de photos : maconnerie, ratio natif, legende sous chaque vue */
.ch-photo{margin:0;break-inside:avoid}
.ch-photo img{
  width:100%;height:auto;display:block;border-radius:var(--r);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),var(--ombre-carte);
}

/* les corps d'etat engages, en pastilles */
.ch-postes{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem}
.ch-postes li{
  border-radius:var(--pilule);padding:.55rem 1.2rem;font-weight:600;font-size:.94rem;
  color:var(--papier);background:rgba(126,168,232,.14);
  box-shadow:inset 0 0 0 1px rgba(126,168,232,.35);
}
.ch-note{margin-top:1.6rem;max-width:46rem;color:#DFE4EC}

/* fonds de heros : la photo du chantier lui-meme */
.fond-ch-terrasse-spots{background-image:url("../img/chantiers/terrasse-spots/photo-1.webp")}
.fond-ch-salle-de-bain{background-image:url("../img/chantiers/salle-de-bain/apres-1.webp")}
.fond-ch-terrasse-hauteur{background-image:url("../img/chantiers/terrasse-hauteur/apres-1.webp")}
.fond-ch-appartement-base-vie{background-image:url("../img/chantiers/appartement-base-vie/apres-1.webp")}
.fond-ch-terrasse-paysager{background-image:url("../img/chantiers/terrasse-paysager/photo-1.webp")}
.fond-ch-dressing{background-image:url("../img/chantiers/dressing/etape-6.webp")}
.fond-ch-garage-1000m2{background-image:url("../img/chantiers/garage-1000m2/photo-1.webp")}
.fond-ch-escalier-suspendu{background-image:url("../img/chantiers/escalier-suspendu/apres-1.webp")}
.fond-ch-toiture{background-image:url("../img/chantiers/toiture/apres-1.webp")}
.fc-detail{margin-top:1.1rem;width:100%;justify-content:center;padding:.72rem 1rem;font-size:.92rem}

/* ---------- page zones d'intervention ---------- */
.fond-zones{background-image:url("../img/chantiers/terrasse-paysager/photo-3.webp")}
.fond-zones-fin{background-image:url("../img/chantiers/terrasse-hauteur/apres-3.webp")}
.zn-chapo{color:var(--beton);max-width:44rem;margin-top:1.35rem}
.zn-chapo.clair{color:#DFE4EC}

/* le premier cercle : les communes, en pastilles */
.zn-villes{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2.2rem}
.zn-villes li{
  border-radius:var(--pilule);padding:.6rem 1.25rem;
  font-weight:600;font-size:.96rem;color:var(--bleu-fonce);
  background:rgba(42,91,168,.08);
  box-shadow:inset 0 0 0 1px rgba(42,91,168,.22);
}
.zn-note{margin-top:1.5rem;color:var(--beton);font-size:.95rem;max-width:44rem}

/* les departements, en jetons sur fond d'encre */
.zn-depts{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2.2rem}
.zn-dept{
  display:flex;align-items:baseline;gap:.6rem;
  border-radius:var(--pilule);padding:.55rem 1.2rem;
  background:rgba(126,168,232,.14);
  box-shadow:inset 0 0 0 1px rgba(126,168,232,.35);
}
.zn-num{font-family:var(--fd);font-size:1.25rem;color:#DFE4EC;line-height:1}
.zn-nom{font-size:.92rem;font-weight:600;color:#DFE4EC}

/* les quatre activites, en lignes a filet fin */
.zn-presta{list-style:none;margin-top:2.4rem;max-width:52rem}
.zn-presta li+li{border-top:1px solid rgba(16,22,38,.12)}
.zn-presta a{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem 1rem;
  padding:1.15rem .2rem;text-decoration:none;
  font-family:var(--fd);font-size:clamp(1.15rem,1rem + .6vw,1.5rem);color:var(--encre);
  transition:color .3s,padding-left .3s var(--pose);
}
.zn-presta a span{font-family:var(--ft);font-size:.92rem;color:var(--beton);font-weight:400}
.zn-presta a:hover{color:var(--bleu);padding-left:.7rem}


/* ═══════════════════════════════════════════════════════════════════════
   Les fonds a la taille de l'ecran : 01/09/2026
   ───────────────────────────────────────────────────────────────────────
   Les 36 fonds de section etaient declares en une seule taille, la pleine :
   un telephone telechargeait 255 Ko pour un ecran de 390 px, et le premier
   ecran restait un voile gris plus d'une seconde sur une vraie connexion.
   Sous 1100 px on sert donc la version moyenne (800 ou 900 px selon ce qui
   existe) : elle reste nette en double densite, et elle pese la moitie.
   UN SEUL palier, et c'est deliberate : le lien de prechargement en tete de
   page doit demander EXACTEMENT le meme fichier que cette regle, sinon le
   navigateur en telecharge deux. Deux paliers, deux fichiers, rien de gagne.
   Ces regles passent apres les declarations d'origine, donc elles gagnent.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width:1100px){
  .fond-genere-nuit{background-image:url("../img/fonds/fond-nuit-900.webp")}
  .fond-genere-verre{background-image:url("../img/fonds/fond-verre-900.webp")}
  .fond-genere-papier{background-image:url("../img/fonds/fond-papier-mineral-900.webp")}
  .fond-genere-atelier{background-image:url("../img/fonds/fond-atelier-900.webp")}
  .fond-genere-papier-soie{background-image:url("../img/fonds/fond-papier-soie-900.webp")}
  .fond-genere-caustiques{background-image:url("../img/fonds/fond-caustiques-900.webp")}
  .fond-genere-fil-a-plomb{background-image:url("../img/fonds/fond-fil-a-plomb-900.webp")}
  .fond-genere-matin{background-image:url("../img/fonds/fond-matin-900.webp")}
  .fond-genere-poussiere{background-image:url("../img/fonds/fond-poussiere-900.webp")}
  .fond-genere-crepuscule{background-image:url("../img/fonds/fond-crepuscule-900.webp")}
  .fond-heros-1{background-image:url("../img/chantiers/terrasse-spots/photo-2-800.webp")}
  .fond-fin-accueil{background-image:url("../img/chantiers/terrasse-spots/photo-1-800.webp")}
  .fond-renov{background-image:url("../img/chantiers/salle-de-bain/apres-2-800.webp")}
  .fond-exterieur{background-image:url("../img/chantiers/terrasse-spots/photo-2-800.webp")}
  .fond-construction{background-image:url("../img/chantiers/terrasse-hauteur/apres-2-800.webp")}
  .fond-energie{background-image:url("../img/chantiers/toiture/apres-1-800.webp")}
  .fond-chantiers{background-image:url("../img/chantiers/garage-1000m2/photo-3-800.webp")}
  .fond-entreprise{background-image:url("../img/chantiers/garage-1000m2/photo-1-800.webp")}
  .fond-fin-renov{background-image:url("../img/chantiers/appartement-base-vie/apres-2-800.webp")}
  .fond-fin-exterieur{background-image:url("../img/chantiers/terrasse-paysager/photo-3-800.webp")}
  .fond-fin-construction{background-image:url("../img/chantiers/escalier-suspendu/apres-1-800.webp")}
  .fond-fin-energie{background-image:url("../img/chantiers/toiture/apres-1-800.webp")}
  .fond-fin-chantiers{background-image:url("../img/chantiers/terrasse-hauteur/apres-3-800.webp")}
  .fond-fin-entreprise{background-image:url("../img/chantiers/garage-1000m2/photo-2-800.webp")}
  .fond-404{background-image:url("../img/chantiers/appartement-base-vie/avant-1-800.webp")}
  .fond-ch-terrasse-spots{background-image:url("../img/chantiers/terrasse-spots/photo-1-800.webp")}
  .fond-ch-salle-de-bain{background-image:url("../img/chantiers/salle-de-bain/apres-1-800.webp")}
  .fond-ch-terrasse-hauteur{background-image:url("../img/chantiers/terrasse-hauteur/apres-1-800.webp")}
  .fond-ch-appartement-base-vie{background-image:url("../img/chantiers/appartement-base-vie/apres-1-800.webp")}
  .fond-ch-terrasse-paysager{background-image:url("../img/chantiers/terrasse-paysager/photo-1-800.webp")}
  .fond-ch-dressing{background-image:url("../img/chantiers/dressing/etape-6-800.webp")}
  .fond-ch-garage-1000m2{background-image:url("../img/chantiers/garage-1000m2/photo-1-800.webp")}
  .fond-ch-escalier-suspendu{background-image:url("../img/chantiers/escalier-suspendu/apres-1-800.webp")}
  .fond-ch-toiture{background-image:url("../img/chantiers/toiture/apres-1-800.webp")}
  .fond-zones{background-image:url("../img/chantiers/terrasse-paysager/photo-3-800.webp")}
  .fond-zones-fin{background-image:url("../img/chantiers/terrasse-hauteur/apres-3-800.webp")}
}


/* ═══════════════════════════════════════════════════════════════════════
   Le logo de la barre change de valeur avec le fond : 01/09/2026
   ───────────────────────────────────────────────────────────────────────
   En haut de page la barre est transparente, et derriere elle il y a une
   photo de heros sombre : le logo d'ART BATIMENT, qui est sombre, y
   disparaissait en ton sur ton sur les vingt-deux pages interieures.
   Au defilement la barre devient claire, et c'est le logo d'origine qui
   reprend sa place. Une seule chose change : la valeur du logo, jamais la
   barre : l'effacement de la barre en haut de page est ce qui donne
   l'impression de pousser la porte.
   Tout est en CSS, sans dependance au JavaScript : pas de clignotement.
   ═══════════════════════════════════════════════════════════════════════ */

.nav-logo{position:relative;display:inline-block;}
.nav-logo .logo-sombre,
.nav-logo .logo-clair{display:block;transition:opacity .35s var(--lent);}
.nav-logo .logo-clair{position:absolute;inset:0;}

.nav:not(.pose) .logo-sombre{opacity:0;}
.nav:not(.pose) .logo-clair{opacity:1;}
.nav.pose .logo-sombre{opacity:1;}
.nav.pose .logo-clair{opacity:0;}


/* ═══════════════════════════════════════════════════════════════════════
   La signature KINONE, dans la barre du bas : 01/09/2026
   ───────────────────────────────────────────────────────────────────────
   Pied sombre, donc logo clair. Le logo se cale sur la HAUTEUR DE LA LIGNE
   du texte a cote, pas sur une valeur choisie a vue : c'est ce qui le fait
   paraitre a sa place plutot que pose dessus. Discret au repos, net au
   survol : une signature d'artisan, pas une publicite.
   La zone cliquable est agrandie en remplissage et reprise en marge
   negative, pour rester atteignable au pouce sans decaler la ligne.
   ═══════════════════════════════════════════════════════════════════════ */

.pied-bas .pied-kinone{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:.82rem;line-height:1;color:var(--beton-clair);
  text-decoration:none;white-space:nowrap;
  padding-block:.7rem;margin-block:-.7rem;
  transition:color .25s var(--pose),opacity .25s;
}
.pied-bas .pied-kinone img{
  height:1.05em;width:auto;display:block;opacity:.7;
  transition:opacity .25s var(--pose);
}
.pied-bas .pied-kinone:hover,
.pied-bas .pied-kinone:focus-visible{color:var(--papier);}
.pied-bas .pied-kinone:hover img,
.pied-bas .pied-kinone:focus-visible img{opacity:1;}
.pied-vide{display:none;}


/* La barre du bas du pied etait a 2,76:1 sur son fond d'encre : copyright,
   SIRET, mentions legales, tout. Mesure, pas estime. --beton est un gris de
   texte pour fond CLAIR ; sur l'encre il faut --beton-clair, qui existait
   deja dans la palette et donne 9,85:1. La hierarchie tient toujours : cette
   ligne reste la plus discrete de la page, elle est juste lisible.
   Et la zone cliquable de la signature passe a 44 px de haut. */
.pied-bas{color:var(--beton-clair);}
.pied-bas .pied-kinone{padding-block:.95rem;margin-block:-.95rem;}


/* ═══════════════════════════════════════════════════════════════════════
   Zones tactiles de 44 px : releve le 01/09/2026 a 360 px sur les 23 pages
   ───────────────────────────────────────────────────────────────────────
   Liens des colonnes du pied, entrees des sous-menus et du panneau mobile,
   fil d'Ariane, telephone et courriel cliquables, fleches de lecture : tous
   entre 18 et 31 px de haut. On agrandit la BOITE CLIQUABLE en remplissage
   et on reprend la meme hauteur en marge negative, donc la mise en page ne
   bouge pas d'un pixel. Les pastilles de galerie, elles, prennent 44 px en
   dur : leur point visible est un ::before, il ne grossit pas pour autant.
   ═══════════════════════════════════════════════════════════════════════ */

.pied-col a,.sous-menu a,.panneau a,.fil a,.lien-fleche,
a[href^="tel:"],a[href^="mailto:"]{
  padding-block:.85rem;margin-block:-.85rem;
}
.glisseur-point{width:44px;height:44px;}


/* ═══════════════════════════════════════════════════════════════════════
   Trois derniers textes sous le seuil : mesures le 01/09/2026
   ───────────────────────────────────────────────────────────────────────
   1. --bleu-clair est le bleu des liens POSES SUR L'ENCRE. Quand une carte
      claire se trouve a l'interieur d'une section sombre, il se retrouve sur
      du blanc : 2,43:1. Le bleu de marque y donne 6,64:1 et se lit.
   2. Le SIRET du pied utilisait --beton, un gris de texte pour fond clair,
      sur le fond d'encre : 2,76:1. --beton-clair donne 9,85:1.
   3. Le bouton Facebook : blanc sur le bleu officiel #1877F2 plafonne a
      4,23:1. Assombri d'un cran, il passe a 5,38:1 et reste reconnaissable.
      CADUC le 04/09/2026 : le bouton ne porte plus le bleu de la plateforme,
      il porte l'encre du site (voir plus haut). La regle est retiree ici parce
      qu'elle ecrasait EN SILENCE la nouvelle, 600 lignes plus bas dans le
      fichier – le piege n°6 de CLAUDE.md, vecu une fois de plus : la
      composition etait juste, elle ne s'appliquait simplement pas.
   ═══════════════════════════════════════════════════════════════════════ */

.fc-texte .lien-fleche,
.fc-corps .lien-fleche{color:var(--bleu);}
.pied-siret{color:var(--beton-clair);}


/* ═══════════════════════════════════════════════════════════════════════
   Lisibilité sur la photo du premier écran – 04/09/2026
   ───────────────────────────────────────────────────────────────────────
   Mesuré, pas jugé à l'œil. `outils/contraste-sur-photo.js` compose la photo,
   le voile et les halos, puis cherche le pixel le plus défavorable SOUS CHAQUE
   LIGNE de texte, et refait la mesure sur LES QUATRE fonds du héros – le
   présentoir d'expertises les fait tourner, et le pire des quatre est
   justement celui qui est servi au chargement (terrasse au crépuscule, ciel
   clair). Relevé avant correction :

     « Ex-responsable travaux Bouygues Construction »   2,34:1   (360 px)
     « 06 59 91 86 28 » dans la barre                   2,36:1   (1440 px)
     « Nos expertises »                                 2,64:1   (1440 px)
     la phrase d'appui du héros                         2,98:1   (360 px)
     « Décennale · RGE · Qualibat »                     3,41:1   (360 px)

   La phrase la plus utile du site (le passé Bouygues) était la moins lisible.

   Le remède suit la doctrine : on rend le texte lisible LOCALEMENT – un voile
   sous le bloc, un fond sous la barre – au lieu d'assombrir toute la photo.
   Écraser le voile général aurait transformé la photo en aplat gris et fait
   tomber l'immersion, ce que `CLAUDE.md` interdit explicitement.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1. un voile doux sous le bloc de texte du héros, et lui seul.
      Il épouse la colonne de texte, s'éteint avant le bord de l'écran, et
      laisse la photo intacte partout ailleurs. */
.heros-int::before{
  content:"";position:absolute;
  /* La boîte est VOLONTAIREMENT beaucoup plus grande que le texte, et le
     dégradé s'éteint bien avant son bord. Première version : une boîte serrée
     et un dégradé encore à .16 au bord – le rectangle du pseudo-élément se
     voyait à l'œil nu sur la photo, un cadre sombre aux angles droits en plein
     milieu du premier écran. Un voile local ne se voit que s'il meurt à
     l'intérieur de sa propre boîte. */
  inset:-7rem -9rem -7rem -9rem;
  z-index:-1;pointer-events:none;
  /* L'ellipse doit couvrir TOUTE la hauteur du bloc, surtitre compris. Version
     precedente : 52% de haut, centree – le surtitre, qui est tout en haut,
     tombait dehors, et les pages interieures ressortaient entre 2,12 et 3,93:1
     a 1024 px alors que l'accueil passait. Un voile local se verifie sur la
     page la PLUS defavorable, pas sur celle qu'on avait sous les yeux. */
  background:
    /* bande du surtitre : il traverse tout le cadre et va se perdre sur les
       zones claires de la photo (beton du garage sur chantiers.html). Une
       ellipse ne peut pas l'attraper sans assombrir tout le heros. */
    linear-gradient(180deg,rgba(8,12,24,0) 4%,rgba(8,12,24,.42) 13%,
                    rgba(8,12,24,.42) 33%,rgba(8,12,24,0) 48%),
    radial-gradient(62% 74% at 34% 48%,
              rgba(8,12,24,.62) 0%, rgba(8,12,24,.50) 40%,
              rgba(8,12,24,.24) 64%, rgba(8,12,24,0) 84%);
  /* la bande est pleine largeur : sans ce masque elle laisserait deux aretes
     verticales franches aux bords de la boite. Le masque eteint le voile avant
     ses propres bords, dans les deux sens. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 89%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 89%,transparent 100%);
}
@media(max-width:899px){
  /* Sur téléphone le texte prend toute la largeur : il atteint la queue du
     dégradé oblique, là où le voile général ne pèse plus que .16. On pose donc
     une bande verticale – mais elle part de transparent et revient à
     transparent, sinon elle laisse une arête franche en haut et en bas.
     Valeur choisie au plus BAS de ce que la mesure accepte : au-delà, la photo
     devient un aplat et l'immersion tombe, ce que la doctrine interdit. */
  .heros-int::before{
    inset:-3.5rem -2rem;
    background:linear-gradient(180deg,
                rgba(8,12,24,0) 0%, rgba(8,12,24,.46) 13%,
                rgba(8,12,24,.50) 80%, rgba(8,12,24,0) 100%);
  }
}

/* 2. la barre reste transparente – c'est elle qui donne l'impression de
      pousser la porte – mais elle pose un dégradé de haut de page. On voit
      toujours la photo au travers ; le numéro de téléphone et les entrées
      cessent de flotter sur du clair. Il s'efface dès que la barre se pose. */
.nav::before{
  content:"";position:absolute;inset:0 0 auto 0;height:190%;
  z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,12,24,.62) 0%,rgba(8,12,24,.34) 55%,transparent 100%);
  transition:opacity .45s var(--lent);
}
.nav.pose::before{opacity:0}

/* 3. la pastille des trois infos : le verre était trop clair pour du blanc
      quand la photo derrière est lumineuse. Même verre, valeur qui se lit. */
.heros-pastille{background:rgba(7,11,21,.9)}

/* 4. la bande des trois infos du héros : même cause que la pastille, autre
      classe. Le verre `--encre-verre` (.82) laissait passer assez de ciel clair
      pour ramener le blanc gras à 3,41:1 sur les QUATRE fonds. */
.heros-infos{background:rgba(7,11,21,.9)}

/* 5. l'étiquette du présentoir d'expertises vit à DROITE du héros, là où le
      voile oblique est le plus léger – le voile de texte ajouté plus haut ne
      la couvre pas, et ne doit pas la couvrir : ce côté est celui qui laisse
      voir la matière. On lui donne donc la variante claire du bleu, celle qui
      survit sur fond lumineux (leçon n°18 : une couleur de marque a besoin
      d'une variante de TEXTE), et un halo un peu plus dense. */
.expertise-sur{color:#E4EEFB;
  /* halo SERRE : c'est lui qui assombrit les pixels sous la lettre. Un halo
     large et diffus embellit sans rien rendre lisible ; mesure a l'appui,
     seul le rayon court fait passer le rapport au-dessus de 4,5. */
  text-shadow:0 0 4px rgba(6,9,18,.98),0 0 9px rgba(6,9,18,.92),0 1px 3px rgba(6,9,18,.95),0 2px 22px rgba(6,9,18,.6)}

/* 6. le côté droit du héros, sur grand écran seulement.
      Le voile oblique n'y pèse que .16 : c'est voulu, c'est le côté qui laisse
      voir la matière. Mais l'étiquette « Nos expertises » y tombe pile sur le
      ciel de la photo de terrasse au crépuscule, à 2,96:1. On remonte la queue
      du dégradé de .16 à .34 – la photo reste franchement lisible de ce côté,
      elle ne devient pas un aplat, et le rapport passe. Réglage à l'œil autant
      qu'à la mesure : à ne pas pousser plus loin sans regarder la capture. */
@media(min-width:1200px){
  .heros-voile{
    background:linear-gradient(105deg,rgba(10,15,28,.8) 0%,rgba(10,15,28,.62) 40%,
                rgba(13,19,36,.48) 75%,rgba(13,19,36,.42) 100%);
  }
}

/* 7. le surtitre du héros, sur les pages intérieures.
      Vu en capture sur `chantiers.html` à 1024 px : la fin de la ligne
      (« … · PARTICULIERS & PROFESSIONNELS ») tombe sur le béton clair du
      garage et s'efface – 2,12:1 mesuré. Le voile local ne peut pas l'attraper
      sans assombrir toute la photo : la ligne traverse le cadre.
      Même remède que l'étiquette des expertises (leçon n°18) : la variante
      CLAIRE du bleu, réservée au texte, et un halo serré. La couleur de marque
      reste pour les aplats, les liserés et les pastilles. */
.heros-sur{
  color:#DDE9FB;
  text-shadow:0 0 4px rgba(6,9,18,.98),0 0 9px rgba(6,9,18,.92),
              0 1px 3px rgba(6,9,18,.95),0 2px 22px rgba(6,9,18,.6);
}

/* 8. l'en-tête du configurateur porte l'encre par `--grad-encre`, mais pas la
      classe `.encre` : les deux règles qui donnent au bleu sa variante claire
      sur fond sombre (`.encre .etiquette`) ne l'atteignaient donc pas. Le bleu
      de marque #2A5BA8 y tombait à 2,42:1 sur le mot accentué du titre et à
      2,80:1 sur l'étiquette. C'est la leçon n°18, à l'endroit exact où elle se
      répète : une couleur de marque saturée ne survit pas sur fond sombre, et
      la règle qui la corrige doit suivre le FOND, pas le nom de la classe. */
.conf-tete .accent{color:var(--bleu-clair)}
.conf-tete .etiquette{color:var(--bleu-clair)}