/* Satellites départementaux Serenobat — design repris de serenobat.fr.
   Jetons, typographie et composants identiques au thème principal : même vert
   #1D9E75, même accent or, mêmes rayons, mêmes cartes à bordure 0,5 px.
   Les noms de classes restent ceux des satellites ; seul l'habillage change. */

/* Polices auto-hebergees (19/09/2026, audit SEO performance) : la feuille
   fonts.googleapis.com bloquait le rendu ~850ms sur les trois pages mesurees en
   Lighthouse, avant meme que la refonte du formulaire de devis n'existe — un cout
   commun aux 67 domaines, puisque le code est partage. Les 4 fichiers ci-dessous
   sont des polices variables (axe wght 100-900 pour Inter, 200-800 pour Plus
   Jakarta Sans : verifie avec fontTools) : deux fichiers par famille (latin +
   latin-ext) couvrent l'ensemble des graisses utilisees, plus besoin des sous-
   ensembles cyrillique/grec/vietnamien absents du contenu francais. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:optional;
  src:url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:optional;
  src:url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700 800;font-display:optional;
  src:url('../fonts/jakarta-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700 800;font-display:optional;
  src:url('../fonts/jakarta-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --vert:#1D9E75; --vert-fonce:#085041; --vert-clair:#E1F5EE; --vert-moyen:#9FE1CB;
  --texte:#0F1A17; --texte-sec:#47584E;
  --fond:#fff; --fond-sec:#F5FAF8; --bordure:#D6E8DF; --or:#E8A500;
  --radius:10px; --radius-lg:14px; --large:1320px;
  /* Palette des cartes famille (18/09/2026, refonte inspiree de serenobat.fr) : memes
     tons que le reste du site (vert) + teintes neutres/chaudes, jamais de couleur
     arbitraire hors charte. --or reste reserve aux CTA (bouton "Devis gratuit") comme
     partout ailleurs sur le site : un aplat jaune en fond de carte ne allait pas avec
     le reste (retour utilisateur du 18/09) — remplace par une terracotta, plus proche
     du sujet "facade" et deja lisible en blanc sans texte fonce de rattrapage. */
  --anthracite:#22282C; --bleu:#2C5F86; --bleu-clair:#E7F0F7; --terracotta:#B5502A;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--texte);
  background:var(--fond);font-size:16px;line-height:1.6}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--vert);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--vert-fonce);color:#fff;
  padding:10px 24px;border-radius:0 0 8px 0;font-size:14px;font-weight:500}
.skip:focus{left:0}
.wrap{max-width:var(--large);margin:0 auto;padding:0 2rem}

/* EN-TETE — refonte 29/10/2026 (voir header.php) : une barre verte en haut, alignee
   sur le logo (projets a gauche, engagements a droite), puis la ligne logo/menu.
   top negatif = la barre verte defile, seule la ligne logo/menu/devis reste collee. */
.bandeau{--haut-h:38px;background:rgba(255,255,255,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(0,0,0,.06);position:sticky;top:calc(-1 * var(--haut-h));z-index:100}
.bandeau-haut{background:var(--vert-fonce);color:rgba(255,255,255,.88);font-size:12.5px}
.bandeau-haut-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:var(--haut-h)}
.bandeau-projets{display:flex;align-items:center;gap:.35rem;min-width:0}
.bp-label{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--vert-moyen);margin-right:.35rem;white-space:nowrap}
.bandeau-projets a{color:rgba(255,255,255,.9);padding:.2rem .65rem;border-radius:50px;white-space:nowrap;
  transition:background .15s,color .15s}
.bandeau-projets a:hover{background:rgba(255,255,255,.12);color:#fff}
.bandeau-confiance{list-style:none;display:flex;gap:1.5rem;font-weight:500}
.bandeau-confiance li{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
.bandeau-confiance svg{color:var(--vert-moyen);flex:none}
.bandeau-in{display:flex;align-items:center;gap:1.5rem;min-height:68px}
.marque{display:flex;align-items:baseline;gap:8px}
.marque-nom{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-weight:800;font-size:17px;
  letter-spacing:-.01em;color:var(--texte)}
.marque-dept{font-size:12px;font-weight:500;color:var(--vert)}
.nav{display:flex;gap:1.6rem;align-items:center;margin-left:auto}
.nav a{font-size:13px;color:var(--texte-sec);white-space:nowrap}
.nav a:hover{color:var(--texte)}
/* --or + texte blanc (18/09/2026, "pour le devis mets comme avant soit le meme jaune")
   : retour exact a l'original demande par l'utilisateur. Le texte fonce essaye entre
   temps corrigeait un contraste insuffisant (2,14:1) mais n'etait pas ce qui etait
   demande — reste a l'utilisateur de trancher si le contraste doit etre revisite. */
.nav-cta{background:var(--or);color:#fff!important;padding:9px 22px;border-radius:50px;
  font-size:13px;font-weight:600;transition:background .15s,transform .15s;white-space:nowrap}
.nav-cta:hover{background:#cc9000;transform:translateY(-1px)}

/* MENU "PRESTATIONS" — <details> plutot que du JS, voir le commentaire dans header.php */
.nav-menu{position:relative}
.nav-menu summary{cursor:pointer;list-style:none;font-size:13px;color:var(--texte-sec);
  display:flex;align-items:center;gap:.3rem}
.nav-menu summary::-webkit-details-marker{display:none}
.nav-menu summary::after{content:"";width:6px;height:6px;border:1.5px solid currentColor;
  border-width:0 1.5px 1.5px 0;transform:rotate(45deg) translateY(-2px);margin-top:-.2rem}
.nav-menu:hover summary,.nav-menu[open] summary{color:var(--texte)}
.nav-menu-panel{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);background:#fff;
  border:.5px solid var(--bordure);border-radius:var(--radius-lg);box-shadow:0 16px 40px -16px rgba(0,0,0,.18);
  padding:.5rem;display:grid;gap:.15rem;min-width:15rem;z-index:50}
.nav-menu-panel a{display:flex;align-items:center;gap:.6rem;padding:.55rem .65rem;border-radius:var(--radius);
  font-size:13px;color:var(--texte);white-space:nowrap}
.nav-menu-panel a:hover{background:var(--fond-sec);color:var(--vert-fonce)}
.nav-menu-panel svg{color:var(--vert);flex:none}
.tel{display:inline-flex;align-items:center;gap:.45rem;font-size:14px;font-weight:700;color:var(--texte);white-space:nowrap}
.tel svg{color:var(--vert);flex:none}
.tel:hover{color:var(--vert-fonce)}
/* Menu mobile : case a cocher focalisable mais invisible, bouton masque sur ordinateur */
.menu-bascule{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.menu-btn{display:none}

/* En-tete sous 1640 px : les engagements quittent la barre verte (six projets depuis le 29/10) (deja dits dans le
   hero et le formulaire) ; sous 1240 px le menu passe derriere un bouton (mesure le
   29/10 : logo + menu + telephone + devis = 1 207 px de large). */
@media(max-width:1640px){.bandeau-confiance{display:none}}
/* Six liens = 1 117 px : sous 1 240 px ils defilent de cote (fondu a droite) plutot que
   de passer a la ligne — la hauteur de la barre doit rester fixe pour le top negatif. */
@media(max-width:1240px){
  .bandeau-projets{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .bandeau-projets::-webkit-scrollbar{display:none}
}
@media(max-width:1240px){
  .bandeau-in{flex-wrap:wrap;gap:.6rem;min-height:62px;padding-top:.55rem;padding-bottom:.55rem}
  .marque{margin-right:auto}
  .tel{order:2}
  .nav-cta{order:3}
  .menu-btn{order:4;display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;font-size:13px;font-weight:600;
    color:var(--texte);padding:.5rem .85rem;border:1px solid var(--bordure);border-radius:50px;user-select:none}
  .menu-ico{position:relative;width:16px;height:2px;background:currentColor;border-radius:2px;
    box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor;margin:5px 0}
  .menu-bascule:checked + .menu-btn{background:var(--fond-sec);border-color:var(--vert)}
  .menu-bascule:checked + .menu-btn .menu-ico{background:transparent;box-shadow:none}
  .menu-bascule:checked + .menu-btn .menu-ico::before,
  .menu-bascule:checked + .menu-btn .menu-ico::after{content:"";position:absolute;left:0;top:0;width:16px;height:2px;
    background:currentColor;border-radius:2px;transform:rotate(45deg)}
  .menu-bascule:checked + .menu-btn .menu-ico::after{transform:rotate(-45deg)}
  .menu-bascule:focus-visible + .menu-btn{outline:2px solid var(--vert);outline-offset:2px}
  .nav{order:5;display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;margin:0;
    padding:.25rem 0 .5rem;border-top:1px solid var(--bordure);max-height:calc(100vh - 120px);overflow-y:auto}
  .menu-bascule:checked ~ .nav{display:flex}
  .nav > a,.nav-menu summary{font-size:15px;color:var(--texte);padding:.75rem .2rem;border-bottom:1px solid #EEF4F1}
  .nav-menu summary{justify-content:space-between}
  .nav-menu-panel{position:static;transform:none;box-shadow:none;border:0;border-radius:0;
    padding:.25rem 0 .5rem .5rem;min-width:0;width:auto}
}
@media(max-width:640px){
  .bandeau{--haut-h:34px}
  .bandeau-haut{font-size:12px}
  .bandeau-haut-in{gap:0}
  /* Trois liens trop longs pour 375 px : defilement horizontal plutot qu'un retour a
     la ligne (la hauteur de la barre doit rester fixe pour le top negatif). */
  .bandeau-projets{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent);
    margin-right:-1.25rem;padding-right:1.25rem}
  .bandeau-projets::-webkit-scrollbar{display:none}
  .bp-label{display:none}
  .bandeau-projets a{padding:.2rem .55rem}
  .bandeau-projets a:first-of-type{margin-left:-.55rem}
  .bandeau-in{gap:.5rem}
  .marque{flex-direction:column;align-items:flex-start;gap:0;line-height:1.15}
  .marque-nom{font-size:16px}
  .marque-dept{font-size:11.5px}
  .tel{width:40px;height:40px;justify-content:center;border:1px solid var(--bordure);border-radius:50%}
  .tel span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .nav-cta{padding:10px 16px}
  .menu-btn{width:40px;height:40px;padding:0;justify-content:center;font-size:0;gap:0}
}
/* Ecrans de 320 a 360 px (petits Android, iPhone SE 1re gen.) : le bouton devient « Devis »
   pour que logo, telephone, devis et menu tiennent sur une ligne. */
@media(max-width:360px){.nav-cta{padding:10px 14px}.cta-plus{display:none}}

/* FIL D'ARIANE */
.fil{background:var(--fond-sec);border-bottom:.5px solid var(--bordure);font-size:12px;
  padding:.6rem 0;color:var(--texte-sec)}
.fil a{color:var(--texte-sec)}
.fil a:hover{color:var(--vert)}

/* HERO — degrade discret en fond, pour eviter l'aplat blanc total sans dependre
   d'une photo (aucune photo de chantier reelle disponible pour ce reseau). */
.hero{background:radial-gradient(60rem 24rem at 15% -20%,var(--vert-clair) 0%,rgba(225,245,238,0) 60%),#fff;
  padding:3.5rem 0;border-bottom:.5px solid var(--bordure)}
.hero h1{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:clamp(26px,4vw,38px);
  font-weight:700;line-height:1.12;letter-spacing:-.7px;margin-bottom:1.25rem;max-width:22ch}
.hero-sous{font-size:15px;color:var(--texte-sec);max-width:62ch;margin-bottom:1.5rem;line-height:1.7}
.hero-actions{display:flex;gap:.7rem;flex-wrap:wrap}
.hero-accueil h1{max-width:20ch}

/* HERO ACCUEIL — deux colonnes texte/photo. La photo n'illustre rien de precis
   (aucun chantier reel n'existe pour ce reseau) : alt vide, purement d'ambiance. */
.hero-grille{display:grid;grid-template-columns:1.15fr .85fr;gap:2.5rem;align-items:center}
.hero-photo img{width:100%;aspect-ratio:940/627;object-fit:cover;border-radius:var(--radius-lg);
  box-shadow:0 16px 40px -20px rgba(8,80,65,.35)}
@media(max-width:900px){.hero-grille{grid-template-columns:1fr}.hero-photo{order:-1}}

/* INTRO AVEC PHOTO — section "Serenobat <departement>" */
.intro-photo{display:grid;grid-template-columns:1.3fr 1fr;gap:2.5rem;align-items:center}
.intro-photo-img img{width:100%;aspect-ratio:940/627;object-fit:cover;border-radius:var(--radius-lg)}
@media(max-width:900px){.intro-photo{grid-template-columns:1fr}.intro-photo-img{order:-1}}

/* MAISON EN 3D — vrai volume (transform-style:preserve-3d, rotateX/rotateY), pas un
   dessin qui fait illusion (voir sat_illustration_maison() dans services.php pour le
   detail de la demarche, pourquoi pas de WebGL, et la bulle au clic "comme socorebat").
   Degrades par face (18/09/2026, 2e retouche apres "toujours moche") pour simuler une
   lumiere venant du haut-gauche : facade avant la plus claire, cote la plus sombre. */
.maison-carte{background:linear-gradient(180deg,var(--vert-clair) 0%,#fff 65%);
  border:.5px solid var(--bordure);border-radius:var(--radius-lg);padding:2.5rem 1.5rem 1.5rem;
  margin-top:1.3rem;overflow:hidden;position:relative}
.maison-3d{display:flex;justify-content:center;padding:2rem 0 1rem;position:relative}
/* .maison-fond : regle complete plus bas, avec la bulle .maison-popup (18/09/2026,
   passage en position:fixed pour couvrir l'ecran entier plutot que ce petit cadre). */
.maison-scene-wrap{position:relative;width:260px;height:180px;perspective:1400px;z-index:1}
.maison-ombre-sol{position:absolute;left:50%;bottom:-38px;width:300px;height:26px;
  background:var(--vert-fonce);opacity:.14;border-radius:50%;filter:blur(6px);
  transform:translateX(-50%)}
.maison-buisson{position:absolute;bottom:-30px;border-radius:50% 50% 45% 45%;
  background:radial-gradient(circle at 35% 30%,#3fae82,var(--vert-fonce))}
.maison-buisson-1{left:-38px;width:46px;height:36px}
.maison-buisson-2{right:-46px;width:36px;height:28px}
.maison-scene{position:relative;width:260px;height:180px;transform-style:preserve-3d;
  transform:rotateX(-14deg) rotateY(-32deg)}
.maison-face{position:absolute;box-sizing:border-box;transition:filter .2s}
.maison-avant-haut{top:0;left:0;width:260px;height:90px;background:linear-gradient(135deg,#fff,#f3f8f6);
  border:1px solid var(--bordure);border-bottom:none;transform:translateZ(100px)}
.maison-avant-bas{top:90px;left:0;width:260px;height:90px;background:linear-gradient(135deg,#fff,#eef6f2);
  border:1px solid var(--bordure);border-top:none;transform:translateZ(100px)}
.maison-cote-haut{top:0;left:0;width:200px;height:90px;background:linear-gradient(135deg,#cfe9dd,#b9dfcd);
  border:1px solid var(--bordure);border-bottom:none;transform:rotateY(90deg) translateZ(130px)}
.maison-cote-bas{top:90px;left:0;width:200px;height:90px;background:linear-gradient(135deg,#c4e4d5,#aedac6);
  border:1px solid var(--bordure);border-top:none;transform:rotateY(90deg) translateZ(130px)}
.maison-energie-avant{top:0;left:-10px;width:280px;height:26px;background:linear-gradient(90deg,#d3efe3,#bfe6d6);
  transform:translateZ(106px)}
.maison-energie-cote{top:0;left:-10px;width:220px;height:26px;background:linear-gradient(90deg,#a9d9c3,#8fcdb0);
  transform:rotateY(90deg) translateZ(136px)}
.maison-socle-avant{top:150px;left:-10px;width:280px;height:30px;
  background:linear-gradient(180deg,#0d6b56,var(--vert-fonce));transform:translateZ(110px)}
.maison-socle-cote{top:150px;left:-10px;width:210px;height:30px;
  background:linear-gradient(180deg,#0a4a3b,#052c23);transform:rotateY(90deg) translateZ(140px)}
/* Toit terracotta (18/09/2026, "le jaune en fond degrade est vraiment moche") : le
   jaune/or ne allait pas avec le reste du site (meme retour que sur la carte "Facade"
   plus tot) — remplace par la meme terracotta que cette carte (--terracotta), realiste
   pour une toiture en tuile et deja coherent avec la palette. */
.maison-toit{top:0;left:-10px;width:280px;height:122px;background:linear-gradient(135deg,#C27050,#823A1E);
  transform-origin:center bottom;transform:translateZ(100px) translateY(-122px) rotateX(55deg)}
.maison-toit-arete{top:0;left:130px;width:2px;height:122px;background:rgba(255,255,255,.35);
  transform-origin:center bottom;transform:translateZ(100px) translateY(-122px) rotateX(55deg)}
.maison-pignon{top:0;left:0;width:200px;height:70px;background:linear-gradient(180deg,#d8ecdf,#c9e5d6);
  clip-path:polygon(0 100%,50% 0,100% 100%);transform:rotateY(90deg) translateZ(130px) translateY(-70px)}
.maison-cheminee{top:-56px;left:190px;width:20px;height:40px;background:linear-gradient(135deg,#4a6b62,#33564c);
  border-radius:2px 2px 0 0;transform:translateZ(100px)}
.maison-cheminee-haut{top:-60px;left:186px;width:28px;height:8px;background:#2b453d;border-radius:2px;
  transform:translateZ(100px)}
.maison-fenetre{background:linear-gradient(160deg,#eaf7f1,#cfe9dd);border:2px solid #4d8a72;
  border-radius:2px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.maison-fenetre-1{top:26px;left:38px;width:36px;height:36px;transform:translateZ(101px)}
.maison-fenetre-2{top:118px;left:38px;width:36px;height:36px;transform:translateZ(101px)}
.maison-fenetre-3{top:26px;left:98px;width:32px;height:32px;transform:rotateY(90deg) translateZ(131px)}
.maison-croix-v{position:absolute;left:50%;top:0;width:2px;height:100%;background:#4d8a72;transform:translateX(-50%)}
.maison-croix-h{position:absolute;top:50%;left:0;width:100%;height:2px;background:#4d8a72;transform:translateY(-50%)}
.maison-porte{top:104px;left:148px;width:38px;height:76px;background:linear-gradient(160deg,#0d6b56,var(--vert-fonce));
  border-radius:4px 4px 0 0;transform:translateZ(101px)}
.maison-porte-vitre{position:absolute;top:10px;left:8px;width:22px;height:22px;background:#cdeee1;
  border-radius:2px;opacity:.85}
.maison-porte-poignee{position:absolute;top:38px;right:5px;width:4px;height:4px;border-radius:50%;background:var(--or)}

/* Position de chaque badge — voir le commentaire de sat_illustration_maison() :
   jamais en style="" inline, la CSP du site (style-src 'self', sans unsafe-inline)
   les ignorerait silencieusement. Coordonnees relevees pour l'angle de vue fixe. */
.maison-hotspot-toiture{left:102px;top:-27px}
.maison-hotspot-energie{left:76px;top:34px}
.maison-hotspot-structure{left:79px;top:68px}
.maison-hotspot-second-oeuvre{left:216px;top:61px}
.maison-hotspot-facade{left:80px;top:160px}
.maison-hotspot-expertise{left:215px;top:152px}
.maison-hotspot-humidite{left:75px;top:193px}

.maison-hotspot{position:absolute;cursor:pointer;transform:translate(-50%,-50%);
  display:grid;place-items:center;z-index:5}
.maison-halo{position:absolute;width:38px;height:38px;border-radius:50%;background:var(--vert);
  opacity:.4;animation:maison-pulse 2.6s ease-out infinite}
.maison-hotspot:nth-of-type(2) .maison-halo{animation-delay:.35s}
.maison-hotspot:nth-of-type(3) .maison-halo{animation-delay:.7s}
.maison-hotspot:nth-of-type(4) .maison-halo{animation-delay:1.05s}
.maison-hotspot:nth-of-type(5) .maison-halo{animation-delay:1.4s}
.maison-hotspot:nth-of-type(6) .maison-halo{animation-delay:1.75s}
.maison-hotspot:nth-of-type(7) .maison-halo{animation-delay:2.1s}
@keyframes maison-pulse{
  0%{transform:scale(.5);opacity:.5}
  70%{transform:scale(1.5);opacity:0}
  100%{transform:scale(1.5);opacity:0}
}
.maison-badge{position:relative;width:32px;height:32px;border-radius:50%;background:#fff;
  border:2px solid var(--vert);display:grid;place-items:center;color:var(--vert-fonce);
  box-shadow:0 3px 8px -2px rgba(8,80,65,.35);transition:transform .2s,border-color .2s,color .2s}
.maison-etiquette{position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%,4px);
  white-space:nowrap;font-size:12.5px;font-weight:600;color:var(--texte);background:#fff;
  padding:.2rem .5rem;border-radius:6px;box-shadow:0 4px 12px -4px rgba(0,0,0,.25);
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s}
.maison-hotspot:hover .maison-badge,.maison-hotspot:focus-visible .maison-badge{
  transform:scale(1.15);border-color:var(--or);color:var(--or)}
.maison-hotspot:hover .maison-etiquette,.maison-hotspot:focus-visible .maison-etiquette{
  opacity:1;transform:translate(-50%,0)}
/* Lavis au survol : le badge est un simple overlay 2D, hors de .maison-scene, donc
   pas de lien DOM direct avec la face — :has() sur le conteneur relie les deux via
   data-famille/data-z, sans dependre de l'ordre d'empilement. */
.maison-3d:has(.maison-hotspot[data-famille="structure"]:hover) [data-z="structure"],
.maison-3d:has(.maison-hotspot[data-famille="second-oeuvre"]:hover) [data-z="second-oeuvre"],
.maison-3d:has(.maison-hotspot[data-famille="facade"]:hover) [data-z="facade"],
.maison-3d:has(.maison-hotspot[data-famille="expertise"]:hover) [data-z="expertise"],
.maison-3d:has(.maison-hotspot[data-famille="toiture"]:hover) [data-z="toiture"],
.maison-3d:has(.maison-hotspot[data-famille="energie"]:hover) [data-z="energie"],
.maison-3d:has(.maison-hotspot[data-famille="humidite"]:hover) [data-z="humidite"]{
  filter:brightness(.92) saturate(1.3)}

/* BULLE AU CLIC — voir sat_illustration_maison() : :target pur, pas de JS. Meme
   emplacement fixe pour les 7 bulles (une seule visible a la fois, :target impose une
   correspondance exacte d'URL donc jamais deux en meme temps).
   position:fixed (18/09/2026, "la maison n'est pas optimisee" — bulle coupee en haut
   d'ecran sur mobile) : en absolute, la bulle se centrait sur .maison-3d (260x180px),
   pas sur l'ecran. Un clic reel sur le badge declenche le saut d'ancre natif du
   navigateur vers la bulle ciblee par :target — le navigateur scrolle vers sa position
   de LAYOUT (avant transform), qui ne correspond pas a sa position visuelle apres
   translate(), d'ou une bulle qui apparaissait coupee net en haut de l'ecran. En fixed,
   la bulle est toujours centree sur la fenetre quel que soit le scroll — plus de
   decalage possible. Le fond assombri passe fixed+inset:0 pour la meme raison
   (couvrir tout l'ecran, pas juste le petit cadre de la maison). */
.maison-popup{display:none;position:fixed;z-index:10;left:50%;top:50%;
  transform:translate(-50%,-46%);width:min(300px,88%);max-height:80vh;overflow-y:auto;
  background:#fff;border-radius:var(--radius-lg);
  padding:1.25rem 1.35rem 1.1rem;box-shadow:0 20px 50px -18px rgba(8,80,65,.45);
  border:.5px solid var(--bordure);text-align:left}
.maison-popup:target{display:block;animation:maison-popup-in .18s ease-out}
@keyframes maison-popup-in{from{opacity:0;transform:translate(-50%,-42%)}to{opacity:1;transform:translate(-50%,-46%)}}
.maison-popup-fermer{position:absolute;top:.6rem;right:.7rem;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;color:var(--texte-sec);font-size:16px;line-height:1}
.maison-popup-fermer:hover{background:var(--fond-sec);color:var(--texte)}
.maison-popup-icone{color:var(--vert);margin-bottom:.5rem}
.maison-popup-icone svg{width:26px;height:26px}
.maison-popup-titre{font-weight:700;font-size:15px;margin-bottom:.35rem;color:var(--texte)}
.maison-popup-texte{font-size:13.5px;color:var(--texte-sec);line-height:1.55;margin-bottom:.5rem}
.maison-popup-exemples{font-size:12px;color:var(--vert-fonce);font-weight:500;margin-bottom:.75rem}
.maison-popup-lien{display:inline-block;font-size:13px;font-weight:600;color:var(--vert)}
.maison-popup-lien:hover{color:var(--vert-fonce)}
/* Fond cliquable pour fermer : visible seulement si une des 7 bulles est ouverte. */
.maison-fond{position:fixed;inset:0;z-index:8;display:none}
.maison-3d:has(.maison-popup:target) .maison-fond{display:block}
@media(max-width:640px){
  .maison-etiquette{font-size:13.5px}
  .maison-carte{padding:2rem 1rem 1rem}
  .maison-popup{transform:translate(-50%,-50%);width:90%}
  @keyframes maison-popup-in{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
}

/* ATOUTS — 4 points verifiables (voir header.php pour la meme regle : aucun
   chiffre d'avis, uniquement des faits deja assumes ailleurs sur le site). */
.atouts{list-style:none;margin:1.1rem 0 0;display:grid;gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.atouts li{display:flex;flex-direction:column;gap:.4rem}
.atouts svg{color:var(--vert)}
.atouts strong{font-size:14px;font-weight:600}
.atouts span{font-size:13px;color:var(--texte-sec);line-height:1.6}

/* BOUTONS */
.btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--vert);color:#fff;
  padding:11px 22px;border-radius:var(--radius);font-size:13px;font-weight:500;border:none;
  cursor:pointer;transition:background .2s}
.btn:hover{background:var(--vert-fonce);color:#fff}
.btn-2{background:#fff;color:var(--vert-fonce);border:.5px solid var(--bordure)}
.btn-2:hover{background:var(--vert-clair);color:var(--vert-fonce)}
.btn-lg{font-size:14px;padding:13px 26px;font-weight:600}

/* BLOCS */
/* padding-block (30/10/2026) : « padding:3rem 0 » annulait la marge laterale de .wrap sur
   les sections « wrap bloc » — texte colle au bord des ecrans de 1 024 a 1 366 px. */
.bloc{padding-top:3rem;padding-bottom:3rem;border-bottom:.5px solid var(--bordure)}
.bloc h2{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:26px;font-weight:700;
  letter-spacing:-.3px;margin-bottom:.9rem}
.bloc h3{font-size:14px;font-weight:600;margin-bottom:.35rem}
.bloc p{font-size:15px;color:var(--texte-sec);line-height:1.75;max-width:76ch;margin-bottom:.9rem}
/* Alternance de fond (18/09/2026, "le fond blanc me derange") : un aplat blanc du
   header au footer sur des pages de plusieurs ecrans de long faisait plat. Deux
   teintes tres douces en rotation, jamais assez marquees pour nuire a la lisibilite
   du texte (--texte-sec passe toujours le contraste WCAG AA dessus). Teinte pleine,
   pas un degrade vers le blanc : un degrade sur une section haute (ex. la liste des
   communes) revenait a du blanc pur avant la fin de la section, ce qui redonnait
   l'effet plat que la teinte devait corriger. */
.bloc-vert{background:var(--vert-clair)}
/* 18/09/2026, "mets les memes couleurs que serenobat.fr" : valeur relevee en direct
   sur leur page (getComputedStyle des sections "Nos agences" et "Avis clients") —
   var(--fond-sec) existait deja dans ce fichier avec exactement cette valeur, servait
   juste pas ici. Plus fiable que les teintes choisies a l'oeil des tentatives
   precedentes (toutes deux jugees trop jaunes). */
.bloc-creme{background:var(--fond-sec)}

/* FICHE DE DONNEES */
.fiche{border-collapse:collapse;margin-top:1.3rem;font-size:13px;width:100%;max-width:34rem;
  border:.5px solid var(--bordure);border-radius:var(--radius-lg);overflow:hidden}
.fiche caption{text-align:left;font-weight:600;padding-bottom:.6rem;font-size:14px}
.fiche th,.fiche td{border-bottom:.5px solid var(--bordure);padding:.6rem .9rem;text-align:left}
.fiche tr:last-child th,.fiche tr:last-child td{border-bottom:none}
.fiche th{background:var(--fond-sec);font-weight:500;width:45%;color:var(--texte-sec)}
.src{color:var(--texte-sec);font-size:.85em}

/* GALERIE REALISATIONS — voir templates/realisations.php pour le detail de la demarche
   (photos d'illustration, jamais presentees comme un chantier reel precis). */
.galerie-realisations{display:grid;gap:1.1rem;margin:1.3rem 0 1rem;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.galerie-carte{display:block;border-radius:var(--radius-lg);overflow:hidden;
  border:.5px solid var(--bordure);background:#fff;transition:box-shadow .15s,transform .15s}
.galerie-carte:hover{box-shadow:0 10px 28px -14px rgba(8,80,65,.3);transform:translateY(-2px)}
.galerie-carte img{display:block;width:100%;aspect-ratio:700/467;object-fit:cover}
.galerie-legende{display:flex;align-items:center;gap:.5rem;padding:.8rem 1rem;font-size:14px;
  font-weight:600;color:var(--vert-fonce)}
.galerie-legende svg{color:var(--vert);flex:none}

/* ETAPES */
.etapes{list-style:none;margin:1.3rem 0 0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.etapes li{background:#fff;border:.5px solid var(--bordure);border-radius:var(--radius-lg);padding:1.25rem;
  transition:border-color .15s,box-shadow .15s,transform .15s}
.etapes li:hover{border-color:var(--vert);box-shadow:0 6px 20px -12px rgba(8,80,65,.25);transform:translateY(-1px)}
.etapes strong{display:block;margin:.55rem 0 .3rem;font-size:14px;font-weight:600}
.etapes span:last-child{font-size:12px;color:var(--texte-sec);line-height:1.6}
.etape-n{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--radius);
  background:var(--vert-clair);color:var(--vert);font-weight:600;font-size:16px}

/* POINTS DE VIGILANCE */
.points{margin:1rem 0 0;padding-left:0;list-style:none;max-width:70ch}
.points li{font-size:14px;color:var(--texte-sec);padding-left:1.5rem;position:relative;margin-bottom:.5rem}
.points li::before{content:"✓";position:absolute;left:0;color:var(--vert);font-weight:600}

/* FAQ */
.faq{max-width:76ch}
.faq details{border:.5px solid var(--bordure);border-radius:var(--radius-lg);margin-bottom:.6rem;background:#fff}
.faq details[open]{border-color:var(--vert-moyen)}
.faq summary{cursor:pointer;padding:.9rem 1.1rem;font-weight:500;font-size:14px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--vert);font-weight:600}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0;padding:0 1.1rem 1.1rem;color:var(--texte-sec);font-size:14px}

/* MAILLAGE */
.liens{list-style:none;margin:.7rem 0 0;display:grid;gap:.35rem .9rem;
  grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));font-size:13px}
.liens a{color:var(--texte-sec)}
.liens a:hover{color:var(--vert)}
.liens-communes{grid-template-columns:repeat(auto-fill,minmax(11rem,1fr))}
.liens-villes .cp{color:var(--texte-sec);opacity:.7;font-size:.85em;margin-left:.3rem}
.maillage h2{margin-top:2rem;font-size:18px}
.maillage h2:first-child{margin-top:0}
.maillage-plus{margin-top:1.1rem;font-size:13px;font-weight:500}
.maillage-plus a{color:var(--vert)}
.index-lettres{display:flex;flex-wrap:wrap;gap:.35rem;margin:0 0 1rem}
.index-lettres a{display:grid;place-items:center;min-width:2rem;height:2rem;border:.5px solid var(--bordure);
  border-radius:var(--radius);font-weight:500;font-size:13px;color:var(--texte-sec)}
.index-lettres a:hover{border-color:var(--vert);color:var(--vert)}
.lettre{margin:1.7rem 0 .5rem;color:var(--vert);font-size:15px;font-weight:600}

/* GRILLE DES SERVICES — regroupee par famille de metier (voir sat_familles()) :
   72 prestations plates a plat etaient illisibles, un sous-titre + icone par
   famille redonne une structure de parcours (gros oeuvre -> expertise). */
.famille{margin-top:2.2rem;scroll-margin-top:6.5rem}
.famille:first-child{margin-top:1.1rem}
.famille-entete{display:flex;align-items:center;gap:.9rem;margin-bottom:.8rem}
.famille-photo{width:52px;height:52px;border-radius:var(--radius);object-fit:cover;flex:none}
.famille-titre{display:flex;align-items:center;gap:.55rem;font-size:15px;font-weight:600;
  color:var(--vert-fonce);margin:0}
.famille-icone{color:var(--vert);flex:none}
.grille-svc{list-style:none;margin:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(16rem,1fr))}
.grille-svc a{display:block;background:#fff;border:.5px solid var(--bordure);border-radius:var(--radius-lg);
  padding:1.1rem 1.25rem;transition:border-color .15s,box-shadow .15s,transform .15s}
.grille-svc a:hover{border-color:var(--vert);box-shadow:0 6px 20px -12px rgba(8,80,65,.25);transform:translateY(-1px)}
.grille-svc strong{display:block;font-size:14px;font-weight:600;margin-bottom:.25rem}
.grille-svc span{font-size:12px;color:var(--texte-sec);line-height:1.6}

/* APPEL A L'ACTION */
.cta{background:var(--vert-fonce);color:#fff;padding:3rem 0;text-align:center}
.cta h2{font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:#fff;font-size:26px;font-weight:700}
.cta p{max-width:60ch;margin:0 auto 1.4rem;color:rgba(255,255,255,.75);font-size:15px}
.cta .btn{background:#fff;color:var(--vert-fonce)}
.cta .btn:hover{background:var(--vert-clair);color:var(--vert-fonce)}

/* FORMULAIRE */
.bloc-form{background:var(--fond-sec)}
.form-devis{max-width:44rem;background:#fff;border:.5px solid var(--bordure);border-radius:16px;
  padding:1.75rem;box-shadow:0 2px 20px rgba(0,0,0,.06)}
.form-grille{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.form-grille p{margin:0;max-width:none}
.f-large{grid-column:1/-1}
.form-devis label{display:block;font-weight:500;font-size:13px;margin-bottom:.35rem;color:var(--texte)}
.form-devis input,.form-devis select,.form-devis textarea{width:100%;padding:.65rem .8rem;font:inherit;
  font-size:14px;border:.5px solid var(--bordure);border-radius:var(--radius);background:#fff;color:var(--texte)}
.form-devis input:focus,.form-devis select:focus,.form-devis textarea:focus{border-color:var(--vert);outline:none}
.form-devis textarea{resize:vertical}
.req{color:#c0392b}
.leurre{position:absolute;left:-9999px;height:0;overflow:hidden}
.f-rgpd{margin:1.1rem 0;font-size:12px;max-width:60ch;color:var(--texte-sec)}
.f-rgpd label{display:flex;gap:.5rem;font-weight:400;align-items:flex-start;font-size:12px}
.f-rgpd input{width:auto;margin-top:.25rem}
.f-note{font-size:12px;color:var(--texte-sec)}
.alerte{padding:.9rem 1.1rem;border-radius:var(--radius);margin-bottom:1.2rem;border:.5px solid;font-size:14px}
.alerte-ok{background:var(--vert-clair);border-color:var(--vert-moyen);color:var(--vert-fonce)}
.alerte-err{background:#fdecea;border-color:#e9b0aa;color:#7d1a15}

/* PIED */
.pied{background:var(--vert-fonce);color:rgba(255,255,255,.75);padding:2.5rem 0 1.5rem;font-size:13px}
.pied a{color:rgba(255,255,255,.7)}
.pied a:hover{color:#fff}
.pied-cols{display:grid;gap:2rem;grid-template-columns:2fr 1fr 1fr 1fr}
@media(max-width:1000px){.pied-cols{grid-template-columns:1fr 1fr}}
.pied-titre{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.45);
  font-weight:600;margin:0 0 .875rem}
.pied-cols>div:first-child .pied-titre{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:17px;
  font-weight:800;text-transform:none;letter-spacing:-.01em;color:#fff;margin-bottom:.5rem}
.pied p{font-size:12px;color:rgba(255,255,255,.68);line-height:1.65;margin-bottom:.75rem;max-width:34ch}
.pied ul{list-style:none}
.pied li{margin-bottom:.5rem}
.pied li a{font-size:13px}
.pied-tel{font-size:17px;font-weight:700;color:#fff!important}
.pied-reseau{border-top:.5px solid rgba(255,255,255,.1);margin-top:1.8rem;padding-top:1.1rem;max-width:70ch}
.pied-reseau a{color:var(--vert-moyen)}
.pied-bas{border-top:.5px solid rgba(255,255,255,.1);margin-top:1rem;padding-top:1.25rem;
  font-size:12px;color:rgba(255,255,255,.55)}
.pied-bas a{color:rgba(255,255,255,.55)}

@media(max-width:768px){
  .wrap{padding:0 1.25rem}
  .hero{padding:2.25rem 0}
  .pied-cols{grid-template-columns:1fr}
}
@media print{.bandeau,.cta,.maillage,.pied,.hero-actions{display:none}}

/* Fiche métier — repères techniques par corps d'état */
.fiche-metier{max-width:46rem}
.fiche-metier th{width:32%}

/* Maillage inter-satellites — la meme prestation dans les autres departements.
   Grille dense : 66 noms de villes doivent tenir sans allonger le pied de deux ecrans. */
.pied-reseau-depts{border-top:.5px solid rgba(255,255,255,.1);margin-top:1.8rem;padding-top:1.1rem}
.pied-reseau-depts ul{list-style:none;display:grid;gap:.35rem 1.25rem;
  grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr))}
.pied-reseau-depts li{margin-bottom:0}
.pied-reseau-depts li a{font-size:12px;color:rgba(255,255,255,.55)}
.pied-reseau-depts li a:hover{color:#fff}
@media(max-width:768px){
  .pied-reseau-depts ul{grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));gap:.3rem .75rem}
}

/* Pages legales — texte long, lecture suivie. Colonne plus etroite que les pages
   metier : 70 caracteres par ligne, sinon l'oeil perd la ligne sur un texte de loi. */
.texte-legal{max-width:44rem}
.texte-legal h2{margin-top:2rem}
.texte-legal h2:first-child{margin-top:0}
.texte-legal p{max-width:68ch}
.texte-legal table{margin:.9rem 0 1.4rem}
.texte-legal th{width:34%;vertical-align:top}
.legal-maj{margin-top:2.2rem;padding-top:1rem;border-top:.5px solid var(--bordure);
  font-size:13px;color:var(--texte-sec)}
/* Mention RGPD sous la case a cocher : le lien vers la politique doit etre lisible
   sans etre au meme niveau que le consentement lui-meme. */
.f-rgpd-lien{display:block;margin-top:.45rem;font-size:12.5px;color:var(--texte-sec);line-height:1.5}
/* Chapo des guides : une phrase d'ouverture qui porte l'idee de la page. */
.chapo{font-size:17px;line-height:1.65;color:var(--texte);max-width:62ch}
.pied-guides{border-top:.5px solid rgba(255,255,255,.1);margin-top:1.4rem;padding-top:1rem;
  font-size:12.5px;max-width:none}

/* Bandeau de consentement — ancre en bas, au-dessus du contenu, sans le masquer
   entierement : un bandeau plein ecran qui force la main est precisement ce que la
   CNIL reproche. Les deux boutons ont le meme poids : refuser doit etre aussi simple
   qu'accepter. */
.bandeau-consent{position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--fond);border-top:1px solid var(--bordure);
  box-shadow:0 -6px 24px -14px rgba(0,0,0,.35)}
.bc-in{max-width:var(--large);margin:0 auto;padding:1rem 1.25rem;
  display:flex;gap:1.5rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.bc-titre{font-weight:700;margin:0 0 .25rem;font-size:14px}
.bandeau-consent p{margin:0;font-size:13px;line-height:1.55;color:var(--texte-sec);max-width:62ch}
.bc-actions{display:flex;gap:.6rem;flex:none}
.bc-actions .btn{font-size:13px;padding:.55rem 1.1rem}
@media(max-width:640px){
  .bc-in{flex-direction:column;align-items:stretch;gap:.9rem;padding:.9rem 1.15rem}
  .bc-actions{justify-content:stretch}
  .bc-actions .btn{flex:1;text-align:center}
}

/* Bloc « Notre réseau » : le lien vers le site principal porte le logo et rien d'autre.
   Fond clair derrière le SVG, dont l'encre est sombre et invisible sur le vert du pied. */
.pied-logo{display:inline-block;margin-top:.6rem;background:#fff;border-radius:6px;
  padding:.5rem .75rem;line-height:0}
.pied-logo img{display:block;width:160px;height:auto}
.pied-logo:hover{background:#f3f5f4}
/* Fabricants et négoces : une ligne dense, secondaire, sous le bloc réseau. */
.pied-marques{border-top:.5px solid rgba(255,255,255,.1);margin-top:1.2rem;padding-top:1rem;
  font-size:12px;line-height:1.9;max-width:none}
.pied-marques a{color:rgba(255,255,255,.55)}
.pied-marques a:hover{color:#fff}
.pied-marques p{margin:0 0 .3rem;font-size:12px;line-height:1.9;max-width:none}
.pied-marques p:last-child{margin-bottom:0}
/* Le libelle porte les deux-points et une largeur minimale : sans elle, « Négoces »
   se collait au dernier fabricant de la ligne precedente. */
.pied-marques-lab{color:rgba(255,255,255,.4);margin-right:.4rem}
.pied-marques-lab::after{content:' :'}
/* Logos fabricants : hauteur fixe, fond blanc (les SVG sources sont en encre sombre,
   invisibles sur le vert du pied), niveaux de gris au repos comme socorebat. */
.pied-marques a.marque-logo{display:inline-flex;align-items:center;vertical-align:middle;
  background:#fff;border-radius:4px;padding:.2rem .5rem;line-height:0}
.pied-marques a.marque-logo img{display:block;height:16px;width:auto;max-width:80px;
  filter:grayscale(1);opacity:.85;transition:opacity .15s,filter .15s}
.pied-marques a.marque-logo:hover img{filter:none;opacity:1}

/* ============================================================================
   REFONTE VISUELLE (18/09/2026) — "fait un site plus design qui ressemble a
   serenobat.fr". Trois apports du site principal, sans logos de certification
   ni chiffre invente (decision explicite) : formulaire integre en direct sur
   l'accueil (au lieu d'un simple lien vers /devis-travaux/), cartes de service
   colorees par famille, tableau comparatif — uniquement des faits deja ecrits
   ailleurs sur le site (decennale verifiee, artisan unique, devis gratuit).
   ============================================================================ */

/* --- Formulaire integre de l'accueil (19/09/2026, "fait exactement le meme
   design que serenobat.fr") : leur accueil (verifie en direct) n'utilise pas un
   volet plein cadre mais une carte arrondie a l'ombre, posee sur un fond clair,
   centree en max-width — hp-devis/hp-devis-wrap/-left/-right, valeurs reprises
   telles quelles (le degrade du panneau gauche est identique a celui verifie sur
   leurs pages metier, voir .sn-devis-side plus bas : c'est le meme partout chez
   eux). devis-etapes/devis-badges inchanges, seul leur conteneur change de forme. --- */
.hp-devis{background:linear-gradient(180deg,#F4F6F9,#fff);padding:4.5rem 1.25rem}
.hp-devis-wrap{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1fr 1.1fr;
  border-radius:24px;overflow:hidden;box-shadow:0 32px 80px rgba(0,0,0,.13)}
.hp-devis-left{background:linear-gradient(160deg,#03271f 0%,#054535 55%,#085041 100%);
  color:#fff;padding:3.25rem 2.75rem}
.hp-devis-right{background:#fff;padding:3.25rem 2.75rem}
.devis-embed-badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.1);
  border:.5px solid rgba(255,255,255,.25);border-radius:50px;padding:.4rem .9rem;font-size:12.5px;
  font-weight:600;margin-bottom:1.2rem}
.devis-embed-badge::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--vert-moyen)}
.hp-devis-left h2{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:28px;
  font-weight:700;color:#fff;margin-bottom:.7rem;letter-spacing:-.3px}
.hp-devis-left>p{font-size:14.5px;color:rgba(255,255,255,.8);line-height:1.7;max-width:38ch;
  margin-bottom:1.8rem}
.devis-etapes{list-style:none;margin:0 0 1.8rem;display:grid;gap:1.1rem}
.devis-etapes li{display:flex;gap:.9rem;align-items:flex-start}
.devis-etapes span.num{flex:none;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.12);
  border:.5px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700}
.devis-etapes strong{display:block;font-size:14px;font-weight:600;color:#fff}
.devis-etapes span.dsc{font-size:12.5px;color:rgba(255,255,255,.65);line-height:1.5}
.devis-badges{list-style:none;margin:0;display:flex;flex-wrap:wrap;gap:.6rem 1.2rem}
.devis-badges li{display:flex;align-items:center;gap:.4rem;font-size:12.5px;color:rgba(255,255,255,.75)}
.devis-badges svg{color:var(--vert-moyen);flex:none}
.hp-devis-right .form-devis{max-width:none;border:none;padding:0;box-shadow:none}
@media(max-width:900px){
  .hp-devis-wrap{grid-template-columns:1fr;border-radius:18px}
  .hp-devis-right{order:1}
  .hp-devis-left{order:2}
  .hp-devis-left,.hp-devis-right{padding:2.2rem 1.5rem}
}

/* --- Formulaire integre des pages metier/ville (devis-service.php,
   devis-ville.php) : leur equivalent (verifie sur /plomberie/, commentaire
   "harmonise ville-service" dans leur CSS) est une carte a bordure verte et
   bandeau de titre, colonnes cote infos / cote formulaire — sn-devis-*, valeurs
   reprises telles quelles. --- */
.sn-devis-inline{background:linear-gradient(135deg,#fff,var(--fond-sec));border:2px solid var(--vert);
  border-radius:16px;padding:2rem 2.25rem;box-shadow:0 10px 36px rgba(4,52,44,.10)}
/* fond vert-fonce et non vert (19/09/2026, verif contraste) : en blanc sur var(--vert),
   ce texte 17-21px gras tombe a 3.39:1 sous ~718px de large — sous les 4.5:1 requis
   avant qu'il ne passe la taille "grand texte". Ecart present a l'identique sur
   serenobat.fr (meme --vert), mais choix de l'utilisateur de le corriger ici. */
.sn-devis-head{background:var(--vert-fonce);color:#fff;text-align:center;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:clamp(17px,2.6vw,21px);
  font-weight:800;line-height:1.3;padding:1rem 1.25rem;border-radius:10px;
  margin-bottom:.625rem;border-bottom:3px solid var(--or)}
.sn-devis-sub{font-size:13.5px;color:var(--texte-sec);text-align:center;margin:0 0 1rem}
.sn-devis-inline .form-devis{margin:0;max-width:none;border:none;padding:0;box-shadow:none}
.sn-devis-cols{display:grid;grid-template-columns:280px minmax(0,1fr);gap:1.75rem;align-items:stretch}
.sn-devis-side{background:linear-gradient(160deg,#03271f 0%,#054535 55%,#085041 100%);
  border-radius:12px;padding:1.5rem 1.375rem;color:#fff;display:flex;flex-direction:column;gap:.55rem}
.sn-devis-side-title{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:19px;
  font-weight:800;line-height:1.3;margin:0 0 .2rem}
.sn-devis-side-sub{font-size:12.5px;color:rgba(255,255,255,.72);margin:0 0 .75rem;line-height:1.5}
.sn-devis-step{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.09);
  border-radius:9px;padding:9px 11px}
.sn-devis-step .ic{font-size:17px;flex-shrink:0}
.sn-devis-step b{display:block;font-size:12px;font-weight:700;line-height:1.25}
.sn-devis-step small{display:block;font-size:12px;color:rgba(255,255,255,.62)}
.sn-devis-side-tel{margin-top:auto;padding-top:.875rem;border-top:1px solid rgba(255,255,255,.14);
  display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.sn-devis-side-tel b{font-size:15px;letter-spacing:.3px;display:block}
.sn-devis-side-tel small{display:block;font-size:12px;color:rgba(255,255,255,.62)}
@media(max-width:860px){
  .sn-devis-cols{grid-template-columns:1fr}
  .sn-devis-side{order:2}
}
@media(max-width:768px){.sn-devis-inline{padding:1.25rem}}

/* --- Assistant devis en 3 etapes (18-19/09/2026, "reprend le meme forma[t] de
   devis que sur serenobat[.fr]" puis "exactement le meme design") : leur page
   dediee /devis-travaux/ (verifiee en direct) utilise un hero plein cadre suivi
   d'un assistant a 3 etapes (metier -> surface -> coordonnees) avec cartes
   cliquables, avancement automatique et recapitulatif. Degrade du hero repris a
   l'identique (3 arrets, verifie sur leur page) — leurs variables --vert etc.
   sont d'ailleurs deja identiques aux notres (meme :root, verifie le 19/09).
   Visible entierement sans JS (voir la classe .js posee dans header.php) :
   chaque .dv-panel reste affiche par defaut, seul .js le masque hors etape
   active — un visiteur sans JS voit tout empile, formulaire compris, jamais
   bloque avant la partie utile de la page. --- */
.dv-hero{background:linear-gradient(135deg,#04342C 0%,#085041 55%,#04342C 100%);color:#fff;
  padding:3rem 1.25rem 2.5rem;text-align:center}
.dv-hero h1{font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:clamp(1.6rem,4vw,2.4rem);margin:0 0 .6rem}
.dv-hero p{margin:0 auto;max-width:640px;color:rgba(255,255,255,.85);
  font-size:15px;line-height:1.6}
.dv-trust{list-style:none;display:flex;justify-content:center;gap:1.1rem;
  flex-wrap:wrap;margin:1.1rem 0 0;padding:0;font-size:13px;color:rgba(255,255,255,.9)}
.dv-trust li{display:inline-flex;align-items:center;gap:.4rem}
.dv-trust svg{flex:none;color:var(--vert-moyen)}
.dv-trust a{color:inherit;text-decoration:underline}
.dv-wrap{max-width:920px;margin:0 auto;padding:2rem 1.25rem 4rem}
.dv-steps{display:none;justify-content:center;gap:0;margin-bottom:1.75rem}
.js .dv-steps{display:flex}
.dv-step-dot{display:flex;align-items:center;gap:.5rem;font-size:13px;
  font-weight:600;color:var(--texte-sec)}
.dv-step-dot .n{width:28px;height:28px;border-radius:50%;background:var(--vert-clair);
  color:var(--vert-fonce);display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px}
/* fond vert-fonce et non vert (19/09/2026, verif contraste) : le chiffre est 13px
   gras, jamais assez grand pour le seuil allege — 3.39:1 en blanc sur var(--vert),
   sous les 4.5:1 requis. Anneau clair pour distinguer visuellement de .done, qui
   utilise la meme couleur de fond maintenant. */
.dv-step-dot.active .n{background:var(--vert-fonce);color:#fff;
  box-shadow:0 0 0 3px var(--vert-clair)}
.dv-step-dot.done .n{background:var(--vert-fonce);color:#fff}
.dv-step-sep{width:3rem;height:2px;background:var(--bordure);margin:14px .6rem 0}
.dv-panel{background:#fff;border:.5px solid var(--bordure);border-radius:var(--radius-lg);
  padding:1.75rem 1.5rem;margin-bottom:1rem}
.js .dv-panel{display:none;margin-bottom:0}
.js .dv-panel.active{display:block}
.dv-panel h2{font-size:1.25rem;margin:0 0 1.1rem;text-align:center}
.dv-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;list-style:none;
  margin:0;padding:0}
@media(max-width:860px){.dv-cards{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.dv-cards{grid-template-columns:repeat(2,1fr)}}
.dv-card{border:.5px solid var(--bordure);border-radius:var(--radius);padding:.9rem .5rem;
  text-align:center;cursor:pointer;background:#fff;transition:border-color .15s,background .15s;
  font:inherit;width:100%}
.dv-card svg{color:var(--vert);display:block;margin:0 auto .4rem}
.dv-card span{font-size:12.5px;font-weight:600;color:var(--texte);line-height:1.3;display:block}
.dv-card:hover,.dv-card.sel{border-color:var(--vert);background:var(--vert-clair)}
.dv-chips{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;list-style:none;
  margin:0;padding:0}
.dv-chip{border:.5px solid var(--bordure);border-radius:50px;padding:.75rem 1.4rem;
  cursor:pointer;background:#fff;font:inherit;font-size:14px;font-weight:600;
  color:var(--texte);transition:border-color .15s,background .15s}
.dv-chip:hover,.dv-chip.sel{border-color:var(--vert);background:var(--vert-clair)}
.dv-nav{display:none;justify-content:flex-start;margin-top:1.4rem}
.js .dv-nav{display:flex}
.dv-back{background:none;border:none;color:var(--texte-sec);font-size:13.5px;
  cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:.4rem}
.dv-ready{background:var(--vert-clair);border:.5px solid var(--vert);
  border-radius:var(--radius-lg);padding:1.25rem;text-align:center;margin-bottom:1.4rem}
.dv-ready .lbl{font-size:15px;font-weight:700;color:var(--vert-fonce);display:flex;
  align-items:center;justify-content:center;gap:.4rem}
.dv-ready .note{font-size:12.5px;color:var(--texte-sec);max-width:540px;
  margin:.5rem auto 0;line-height:1.5}
.dv-recap{display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.9rem;
  list-style:none;padding:0;min-height:0}
.dv-recap:empty{display:none}
.dv-recap li{background:#fff;border:1px solid var(--bordure);border-radius:50px;
  padding:.3rem .9rem;font-size:12.5px;color:var(--texte-sec)}
.dv-recap b{color:var(--texte)}
.dv-hide{display:none!important}
.dv-panel .form-devis{max-width:none;border:none;padding:0;box-shadow:none}
/* remplace un style="text-align:left" inline (19/09/2026, audit SEO technique) :
   bloque silencieusement par la Content-Security-Policy (style-src 'self'). */
.dv-h2-left{text-align:left}

/* --- Cartes de service colorees par famille : meme grille de prestations
   qu'avant (.grille-svc conserve, sous-titres localises inchanges pour ne pas
   perdre le travail anti-duplication de contenu), juste un bandeau d'entete
   colore + badge de comptage au lieu d'un simple sous-titre gris. --- */
.famille-carte{margin-top:1.8rem;border-radius:var(--radius-lg);overflow:hidden;
  border:.5px solid var(--bordure);scroll-margin-top:6.5rem}
.famille-carte:first-child{margin-top:0}
.famille-bandeau{display:flex;align-items:center;gap:.8rem;padding:1.1rem 1.4rem;color:#fff}
.famille-bandeau .famille-icone{color:#fff}
.famille-bandeau h3{font-size:16px;font-weight:700;margin:0;flex:1;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif}
.famille-bandeau .compte{font-size:12px;font-weight:600;background:rgba(255,255,255,.18);
  border-radius:50px;padding:.3rem .7rem;flex:none}
.famille-corps{padding:1.4rem;background:#fff}
/* Un seul degrade pour les 5 classes (18/09/2026, "mets les memes couleurs que
   serenobat.fr") : verifie en inspectant leurs cartes de service en direct — TOUTES
   leurs cartes utilisent exactement ce meme degrade vert, aucune variation de couleur
   par categorie. Les classes fam-1..5 restent (le cycle dans le PHP reste inoffensif)
   mais pointent desormais toutes vers la meme valeur, verifiee, plutot que 5 teintes
   choisies a l'oeil qui ne correspondaient pas a la reference. */
.fam-1,.fam-2,.fam-3,.fam-4,.fam-5{background:linear-gradient(135deg,#064030,#085041)}

/* --- Comparatif "seul vs Serenobat" : uniquement des points deja assumes
   ailleurs sur le site (bandeau de confiance, page devis, page garanties) —
   aucune promesse nouvelle. --- */
.comparatif{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem;margin-top:1.5rem}
.comparatif-col{border-radius:var(--radius-lg);padding:1.6rem 1.7rem}
.comparatif-col.seul{background:var(--fond-sec);border:.5px solid var(--bordure)}
.comparatif-col.avec{background:var(--vert-fonce);color:#fff}
.comparatif-col h3{font-size:14px;font-weight:700;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}
.comparatif-col ul{list-style:none;display:grid;gap:.7rem}
.comparatif-col li{display:flex;gap:.6rem;align-items:flex-start;font-size:13.5px;line-height:1.6}
.comparatif-col.seul li{color:var(--texte-sec)}
.comparatif-col.avec li{color:rgba(255,255,255,.9)}
.comparatif-col svg{flex:none;margin-top:.15rem}
.comparatif-col.seul svg{color:#c0392b}
.comparatif-col.avec svg{color:var(--vert-moyen)}
@media(max-width:768px){.comparatif{grid-template-columns:1fr}}

/* --- Titre avec icone en pastille (18/09/2026, extension de la refonte aux 3
   nouvelles pages) : memes icones que .atouts sur l'accueil, juste presentees en
   pastille devant le h2 plutot qu'au-dessus — coherence visuelle sans dupliquer
   du contenu. --- */
/* align-items:flex-start (pas center) : sur mobile, les titres longs passent sur
   3-4 lignes et une pastille centree flottait au milieu du bloc plutot que de
   s'aligner avec la premiere ligne. */
.titre-icone{display:flex;align-items:flex-start;gap:.9rem;margin-bottom:.9rem}
.titre-icone .pastille{margin-top:.15rem}
.titre-icone .pastille{flex:none;width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:var(--vert-clair);color:var(--vert-fonce)}
.bloc-vert .titre-icone .pastille{background:rgba(8,80,65,.08)}
.titre-icone h2{margin:0}

/* --- Pastille miniature coloree (18/09/2026) : meme role que .famille-bandeau mais
   en petit format, pour la legende des cartes de la galerie realisations. --- */
.pastille-mini{flex:none;width:26px;height:26px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;color:#fff}
.pastille-mini svg{width:15px;height:15px;color:#fff}
.galerie-legende{gap:.6rem}

/* Photos des pages (30/10/2026) : vraies photos de chantier, legende sous l'image. */
.photo-bloc{margin:1.5rem 0 .5rem;max-width:860px}
.photo-bloc img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius-lg)}
.photo-bloc figcaption{font-size:12.5px;color:var(--texte-sec);margin-top:.5rem}
.photo-famille{max-width:560px}

/* ===== Audit UX du 02/11/2026 ===== */
/* 2. Champs en 16 px sur ecran tactile : en dessous, l'iPhone zoome a chaque saisie. */
@media (max-width:1024px), (pointer:coarse){
  .sat input:not([type=checkbox]):not([type=radio]):not([type=hidden]), .sat select, .sat textarea{font-size:16px!important}
}
/* 3. Texte du panneau devis : « .bloc p » (couleur grise) ecrasait le blanc prevu — 2:1 sur vert fonce. */
.sn-devis-inline .sn-devis-side-sub, .bloc .sn-devis-side-sub{color:rgba(255,255,255,.82)}
/* 4. Listes de liens sur telephone : 2 colonnes (au lieu d'1 — 32 ecrans pour 279 communes) et
   zones de toucher plus hautes. Aucun lien retire : le maillage reste identique. */
@media (max-width:640px){
  .liens, .liens-communes{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0 .9rem}
  .liens li{min-width:0}
}
@media (pointer:coarse){
  /* ~30 px de zone de toucher par lien (seuil WCAG 2.5.8 : 24 px) sans rallonger les listes. */
  .liens a{display:block;padding:.28rem 0;line-height:1.35;overflow-wrap:anywhere}
  .pied ul a, .pied-reseau-depts a, .bandeau-projets a, .nav-menu-panel a{display:inline-block;padding-top:.3rem;padding-bottom:.3rem}
}
/* 5. Photo dans le haut des pages prestation (ordinateur, tablette paysage) ; masquee sous 900 px
   pour garder le bouton devis en haut — la photo legendee du corps de page prend le relais. */
.hero-svc .hero-grille{align-items:center}
.hero-photo-svc img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius-lg);display:block}
@media (max-width:900px){.hero-photo-svc{display:none}}
@media (min-width:901px){.hero-svc ~ * .photo-famille, .photo-famille{display:none}}
/* 6. Avis Google reels (fiche SERENOBAT Lyon) */
.avis-note{display:flex;align-items:center;gap:.5rem;font-size:15px;margin-bottom:.8rem}
.avis-etoiles{color:#E8A500;letter-spacing:1px}
.avis-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem}
.avis-carte{background:var(--fond-sec);border:.5px solid var(--bordure);border-radius:var(--radius-lg);padding:1rem 1.1rem;margin:0}
.avis-carte blockquote{margin:.4rem 0 .6rem;font-size:14.5px;line-height:1.6;color:var(--texte)}
.avis-carte figcaption{font-size:13px;color:var(--texte-sec)}
.avis-bloc .avis-source{font-size:12.5px;margin-top:.9rem}
.avis-bloc .avis-source a{color:var(--vert-fonce);text-decoration:underline}