/* =============================================================
   Groupe Solution Habitat — feuille de styles unique
   Identite visuelle "Le releve" — septembre 2026

   La palette est tiree du logo, pas choisie : le mot-marque est en
   noir avec S-O-L en trois verts (lime #CBDC76, feuille #83D16C,
   vert #2FAE67). L'ancienne charte (violet-noir, cyan, degrade
   couchant) n'avait aucun rapport avec la marque — d'ou la pastille
   blanche qu'il fallait glisser derriere le logo pour qu'il survive
   sur fond sombre. Ici le fond est papier : le logo se pose dessus.

   Principes de forme :
   - aucun degrade, aucune lueur, aucun flou ;
   - des filets, pas des ombres portees ;
   - des rayons de 2 a 3 px, jamais de pilules ;
   - pas de noir en grande surface : les bandes sombres sont en vert
     foret, le fond est un creme chaud, et l'encre elle-meme est verdie ;
   - deux signaux seulement : les verts de la marque, et un jaune
     soleil pour l'energie produite et les mises en avant.

   Le motif signature est la "regle graduee" : une serie de traits
   reguliers, comme sur un metre de chantier, qui suit chaque label
   de section. On mesure avant de vendre.

   Mise en cache 1 an par le .htaccess. Apres toute modification,
   incrementer le parametre ?v= dans le <link> des pages HTML.
   ============================================================= */

:root{
  /* --- fonds --- */
  --papier:#F7F3E8;
  --papier-2:#EFE9DA;
  --blanc:#FFFFFF;
  /* Les bandes sombres ne sont plus noires mais vert foret : la marque
     occupe les grandes surfaces au lieu de les laisser au noir. */
  --nuit:#0C4F31;
  --nuit-2:#093B25;

  /* --- encres --- */
  /* Encre verdie plutot que noir pur : moins dure a la lecture, et
     accordee au reste de la palette. */
  --encre:#16211A;
  --encre-2:#4A574C;
  --encre-3:#7C8A7C;

  /* --- filets --- */
  --filet:#E0D9C7;
  --filet-fort:#C3BAA2;

  /* --- verts de la marque --- */
  --vert:#2FAE67;
  --vert-fonce:#0E6B3D;
  /* Vert le plus sombre de la gamme : sert la ou le vert-fonce ne
     tient pas le contraste, notamment sur l aplat lime. */
  --vert-nuit:#0A5531;
  --vert-clair:#83D16C;
  --lime:#CBDC76;
  /* Le lime plein convient a un filet ou a un surlignage. Sur une
     bande pleine largeur il devient criard : le voile est plus clair,
     donc plus lumineux, et laisse le lime au role d'accent. */
  --lime-voile:#EDF2D8;
  --vert-voile:#E7F1DD;

  /* --- second signal : le soleil ---
     L'eclat chaud de la palette. Reserve a l'energie produite
     (photovoltaique, jauge, ombre du bouton) et aux mises en avant
     commerciales. Jamais en aplat de texte. */
  --soleil:#E4B33C;
  --soleil-voile:#FBF1D8;

  /* --- alerte (mentions legales, erreurs) --- */
  --alerte:#B4552E;
  --alerte-voile:#F8E9E0;

  /* --- polices --- */
  --titre:'Archivo','Helvetica Neue',Arial,sans-serif;
  --texte:'Archivo','Helvetica Neue',Arial,sans-serif;
  --annot:'Martian Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;

  /* --- contexte clair (par defaut) --- */
  --fond-courant:var(--papier);
  --texte-courant:var(--encre);
  --texte-doux:var(--encre-2);
  --filet-courant:var(--filet);
  --accent-courant:var(--vert-fonce);
  --carte-fond:var(--blanc);
}

/* Contexte sombre. Les composants lisent --texte-courant et
   --filet-courant : places dans une bande sombre, ils s'inversent
   sans qu'on ait a les redeclarer un par un. */
.topbar,
.hero,
.subhero-photo,
footer{
  --fond-courant:var(--nuit);
  --texte-courant:var(--papier);
  --texte-doux:rgba(247,243,232,0.74);
  --filet-courant:rgba(247,243,232,0.22);
  --accent-courant:var(--vert-clair);
  --carte-fond:rgba(247,243,232,0.08);
  color:var(--papier);
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--papier);
  color:var(--encre);
  font-family:var(--texte);
  font-size:16px;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:var(--titre);
  color:var(--texte-courant);
  margin:0;
  text-wrap:balance;
}

h1,h2{
  font-weight:800;
  font-stretch:112%;
  letter-spacing:-0.022em;
  line-height:1.02;
}

h3,h4{font-weight:600;font-stretch:100%;letter-spacing:-0.01em;line-height:1.25;}

p{margin:0;line-height:1.72;text-wrap:pretty;}

a{color:inherit;text-decoration:none;}

ul{margin:0;padding:0;list-style:none;}

button{font-family:inherit;cursor:pointer;}

strong,b{font-weight:600;}

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

.mono{font-family:var(--annot);font-variant-ligatures:none;}

.wrap{max-width:1200px;margin:0 auto;padding:0 34px;}

:focus-visible{outline:2px solid var(--accent-courant);outline-offset:3px;}

section{padding:120px 0;position:relative;}

/* --- mot mis en avant dans un titre ---
   Ancien .grad-text : c'etait un degrade couchant en background-clip.
   Devient un surlignage lime, comme un trait de marqueur sur un
   releve. Sur fond sombre le surlignage disparait au profit du vert
   clair, qui y tient seul le contraste. */
.grad-text{
  color:var(--vert-fonce);
  background-image:linear-gradient(var(--lime),var(--lime));
  background-repeat:no-repeat;
  background-size:100% 0.30em;
  background-position:0 86%;
}

.topbar .grad-text,
.hero .grad-text,
.subhero-photo .grad-text,
footer .grad-text{color:var(--lime);background-image:none;}

/* Sur l'aplat lime, le surlignage n'aurait plus de sens : le mot passe
   en vert profond, qui y tient 6:1. */
.subhero:not(.subhero-photo) .grad-text{color:var(--vert-fonce);background-image:none;}

/* --- label de section + regle graduee (motif signature) --- */
.eyebrow{
  font-family:var(--annot);
  font-size:9.5px;
  font-weight:600;
  letter-spacing:0.13em;
  text-transform:uppercase;
  color:var(--accent-courant);
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:20px;
}

.eyebrow::after{
  content:"";
  flex:1 1 auto;
  max-width:140px;
  height:8px;
  background-image:repeating-linear-gradient(to right,currentColor 0 1px,transparent 1px 7px);
  opacity:0.55;
}

/* ============ EN-TETE ============ */
/* Bandeau vert foret, puis ligne principale sur creme : une manchette
   de journal. Le logo n'a plus besoin de sa pastille blanche. */

.topbar{background:var(--nuit);}

.topbar-row{display:flex;align-items:center;justify-content:space-between;gap:20px;height:34px;}

.topbar-claim{
  font-size:12px;
  color:var(--texte-doux);
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.topbar-links{display:flex;align-items:center;gap:20px;flex-shrink:0;}

.topbar-links a{font-size:12px;color:var(--texte-doux);transition:color .18s;}

.topbar-links a:hover{color:var(--papier);}

.topbar-tel{
  font-family:var(--annot);
  font-size:11px;
  font-weight:600;
  letter-spacing:0.02em;
  color:var(--vert-clair) !important;
}

header{
  position:sticky;
  top:0;
  z-index:60;
  background:var(--papier);
  border-bottom:2px solid var(--vert-fonce);
  overflow:visible;
}

.nav-row{display:flex;align-items:center;justify-content:space-between;gap:22px;height:74px;}

.brand{display:flex;align-items:center;gap:10px;}

/* Le logo se pose directement sur le papier : plus de plaque. */
.brand-plate{background:none;border-radius:0;padding:0;display:flex;align-items:center;box-shadow:none;}

.brand-logo{height:34px;width:auto;display:block;}

.brand-name{font-family:var(--titre);font-weight:800;font-stretch:112%;font-size:17px;}

nav.links{display:flex;align-items:center;gap:2px;flex:1 1 auto;justify-content:center;position:relative;}

.nav-group{display:flex;align-items:center;}

/* position:static volontaire : le mega-menu s'ancre sur la barre de
   navigation, pas sur le lien survole — un panneau de 900 px centre
   sur un lien place a gauche deborderait de l'ecran. */
nav.links a.nav-head,
nav.links .nav-head{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:var(--texte);
  font-size:13.5px;
  font-weight:500;
  color:var(--encre-2);
  padding:8px 13px;
  border-radius:2px;
  transition:color .18s, background .18s;
}

.nav-group:hover > .nav-head,
.nav-group:focus-within > .nav-head,
.nav-group.is-open > .nav-head,
nav.links a.nav-head:hover{color:var(--encre);background:var(--papier-2);}

nav.links a[aria-current="page"]{color:var(--encre);font-weight:600;}

.nav-caret{width:9px;height:9px;flex-shrink:0;opacity:.5;transition:transform .18s;}

.nav-group:hover > .nav-head .nav-caret,
.nav-group:focus-within > .nav-head .nav-caret,
.nav-group.is-open > .nav-head .nav-caret{transform:rotate(180deg);opacity:1;}

.nav-right{display:flex;align-items:center;gap:14px;}

.nav-tel{font-family:var(--annot);font-size:12px;color:var(--vert-fonce);white-space:nowrap;}

/* --- selecteur de profil : deux onglets carres, pas des pilules --- */
.profile-switch{
  display:flex;
  align-items:stretch;
  border:1px solid var(--vert-fonce);
  border-radius:2px;
  overflow:hidden;
  flex-shrink:0;
}

nav.links a.profile-pill,
.profile-pill{
  display:inline-flex;
  align-items:center;
  font-family:var(--annot);
  font-size:9.5px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--encre-2);
  background:var(--papier);
  padding:8px 13px;
  border-radius:0;
  white-space:nowrap;
  transition:color .18s, background .18s;
}

.profile-pill + .profile-pill{border-left:1px solid var(--vert-fonce);}

.profile-pill:hover{background:var(--papier-2);color:var(--encre);}

.profile-pill.is-active{background:var(--vert-fonce);color:#FFFFFF;}

.menu-toggle{display:none;background:none;border:none;padding:8px;}

.menu-toggle span{display:block;width:22px;height:2px;background:var(--vert-fonce);margin:5px 0;}

/* ============ MEGA-MENUS ============ */
.megamenu{
  position:absolute;
  top:calc(100% + 18px);
  left:50%;
  transform:translateX(-50%) translateY(-6px);
  width:min(920px,calc(100vw - 48px));
  background:var(--blanc);
  border:1px solid var(--encre);
  border-radius:3px;
  box-shadow:6px 6px 0 rgba(22,33,26,0.12);
  padding:28px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .16s, transform .16s, visibility .16s;
  z-index:70;
}

/* La zone morte entre le lien et le panneau ferait retomber :hover. */
.megamenu::before{content:"";position:absolute;top:-20px;left:0;right:0;height:20px;}

.nav-group:hover > .megamenu,
.nav-group:focus-within > .megamenu,
.nav-group.is-open > .megamenu{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

.mm-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:30px;}

.mm-intro{border-right:1px solid var(--filet);padding-right:30px;}

.mm-intro h2{font-size:19px;line-height:1.15;margin-bottom:12px;}

.mm-intro p{font-size:13px;color:var(--encre-2);line-height:1.6;margin-bottom:18px;}

.mm-hub{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--annot);font-size:10px;font-weight:600;
  letter-spacing:0.08em;text-transform:uppercase;
  color:var(--vert-fonce) !important;background:none !important;padding:0 !important;
  border-bottom:1px solid var(--vert-fonce);padding-bottom:3px !important;
}

.mm-hub:hover{gap:12px;}

.mm-list{display:grid;grid-template-columns:1fr 1fr;gap:2px;}

nav.links a.mm-item,
.mm-item{display:block;padding:12px 13px !important;border-radius:2px;transition:background .18s;}

.mm-item:hover{background:var(--papier-2);}

.mm-item strong{
  display:block;font-family:var(--titre);font-size:14px;font-weight:600;
  font-stretch:104%;color:var(--encre);margin-bottom:4px;
}

.mm-item span{display:block;font-size:11.5px;color:var(--encre-2);line-height:1.5;}

.mm-foot{
  margin-top:24px;padding-top:20px;border-top:1px solid var(--filet);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}

.mm-foot p{font-size:12.5px;color:var(--encre-2);}

.mm-foot strong{color:var(--encre);}

/* --- navigation conditionnee par le profil --- */
html[data-profile="pro"] .nav-group[data-for="particulier"],
html[data-profile="particulier"] .nav-group[data-for="pro"]{display:none;}

/* ============ BOUTONS ============ */
/* Le bouton principal est noir. Le vert reste reserve a la donnee :
   un site d'energie ou tout est vert ne signale plus rien. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border-radius:2px;
  font-family:var(--texte);font-size:13.5px;font-weight:600;
  border:1px solid transparent;white-space:nowrap;
  transition:background .18s, color .18s, border-color .18s, box-shadow .18s, transform .18s;
}

.btn-energy{background:var(--vert-fonce);color:#FFFFFF;border-color:var(--vert-fonce);box-shadow:3px 3px 0 var(--soleil);}

.btn-energy:hover{background:var(--vert-nuit);border-color:var(--vert-nuit);box-shadow:4px 4px 0 var(--soleil);transform:translate(-1px,-1px);}

/* Sur une bande vert foret, un bouton vert ne ressort plus. Le soleil
   y prend le relais : c est le moment commercial de la page, il doit
   se voir de loin. */
.final .btn-energy,
footer .btn-energy{background:var(--soleil);color:var(--encre);border-color:var(--soleil);box-shadow:3px 3px 0 rgba(9,59,37,0.55);}

.final .btn-energy:hover,
footer .btn-energy:hover{background:#F2C452;border-color:#F2C452;box-shadow:4px 4px 0 rgba(9,59,37,0.55);}

.btn-ghost{border-color:var(--filet-fort);color:var(--texte-courant);background:transparent;}

.btn-ghost:hover{border-color:var(--texte-courant);background:var(--texte-courant);color:var(--fond-courant);}

/* ============ HERO ============ */
/* Photo + voile encre : la page s'ouvre sur une bande sombre, puis
   tout le corps est papier. C'est le rythme du site. */
.hero{padding-top:96px;padding-bottom:96px;overflow:hidden;position:relative;background:var(--nuit-2);}

/* Le panneau se cale a gauche, pas au centre : sur la photo du hero la
   maison occupe la moitie droite du cadre. Un panneau centre se posait
   dessus et la masquait. Si l on veut un jour le recentrer, il faudra
   une photo dont le sujet est deporte sur un cote. */
.hero-grid{display:grid;grid-template-columns:minmax(0,560px);justify-content:start;gap:60px;align-items:center;position:relative;z-index:2;}

.hero h1{font-size:clamp(36px,4.9vw,60px);line-height:1.02;font-stretch:108%;letter-spacing:-0.025em;}

.hero-sub{margin-top:26px;max-width:480px;font-size:16.5px;color:var(--texte-doux);}

.hero-cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;}

.hero-chips{display:flex;gap:0;flex-wrap:wrap;margin-top:36px;border-top:1px solid var(--filet-courant);}

.chip{
  display:flex;align-items:center;gap:9px;
  padding:14px 22px 14px 0;margin-right:22px;
  font-size:12.5px;color:var(--texte-doux);
}

.chip b{color:var(--papier);font-weight:600;}

.chip .dot{width:7px;height:7px;border-radius:0;background:var(--soleil);flex:none;}

.hero-photo{background-size:cover;background-position:center;position:relative;}

.bg-overlay-hero{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(9,59,37,0.22) 0%,rgba(9,59,37,0.10) 42%,rgba(9,59,37,0.03) 70%,rgba(9,59,37,0.10) 100%);
}

.hero-photo .hero-grid{position:relative;z-index:2;}

/* Le texte quitte la photo pour un panneau creme : le cliche reste
   clair et la lecture ne depend plus de l'epaisseur d'un voile.
   Le panneau redeclare le contexte, donc tout ce qu'il contient —
   titres, chapeau, libelles de champs — repasse en encre. */
.hero-photo .hero-grid > div:first-child,
.subhero-photo .subhero-inner{
  --texte-courant:var(--encre);
  /* Texte secondaire renforce a l interieur du verre : mesure sur la
     photo reelle, --encre-2 tombait a 3,7:1 au-dessus de la zone
     d ombre du porche. Ce ton tient 4,8:1 au meme endroit. */
  --texte-doux:#343E35;
  --filet-courant:rgba(22,33,26,0.16);
  --accent-courant:var(--vert-fonce);
  color:var(--encre);
  background:rgba(247,243,232,0.46);
  /* brightness releve les zones sombres de la photo AVANT que le creme
     ne les recouvre : c est ce qui permet de descendre l opacite sans
     perdre le seuil AA. */
  -webkit-backdrop-filter:blur(28px) brightness(1.25) saturate(110%);
  backdrop-filter:blur(28px) brightness(1.25) saturate(110%);
  border:1px solid rgba(255,255,255,0.55);
  border-radius:3px;
  box-shadow:0 14px 40px rgba(9,59,37,0.10);
}

/* Repli pour les navigateurs sans backdrop-filter : sans le flou, le
   texte passerait par-dessus des zones trop contrastees de la photo. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hero-photo .hero-grid > div:first-child,
  .subhero-photo .subhero-inner{background:rgba(247,243,232,0.94);}
}

.hero-photo .hero-grid > div:first-child{border-top:3px solid var(--vert-fonce);padding:46px 48px 44px;}

.subhero-photo .subhero-inner{border-top:3px solid var(--vert-fonce);padding:38px 42px 36px;}

/* Sur le panneau creme, le mot mis en avant reprend son surlignage. */
.hero-photo .hero-grid > div:first-child .grad-text,
.subhero-photo .subhero-inner .grad-text{
  color:var(--vert-fonce);
  background-image:linear-gradient(var(--lime),var(--lime));
  background-repeat:no-repeat;
  background-size:100% 0.30em;
  background-position:0 86%;
}

.hero-photo .chip b{color:var(--texte-courant);}

/* ============ SOUS-HERO ============ */
/* Aplat lime : l'ouverture de page la plus claire et la plus vive du
   site. L'encre y tient un contraste de 11:1. */
.subhero{padding:68px 0 72px;position:relative;overflow:hidden;background:var(--lime-voile);border-bottom:3px solid var(--lime);}

/* Sur lime, --vert-fonce ne donne que 4,4:1 : sous le seuil AA pour un
   label de 10 px. Le vert-nuit remonte a 6:1. */
.subhero:not(.subhero-photo) .eyebrow{color:var(--vert-fonce);}

.subhero:not(.subhero-photo) .breadcrumb{color:var(--encre-2);}

.subhero:not(.subhero-photo) p{color:var(--encre-2);}

.subhero-inner{position:relative;z-index:2;max-width:780px;}

.subhero-photo .subhero-inner{margin:0 auto;}

.subhero h1{font-size:clamp(30px,3.9vw,46px);line-height:1.06;font-stretch:106%;letter-spacing:-0.024em;}

.subhero p{margin-top:20px;font-size:16.5px;color:var(--texte-doux);max-width:640px;}

.subhero p.lead{margin-top:20px;font-size:16.5px;color:var(--texte-doux);max-width:640px;}

.subhero .hero-chips{margin-top:30px;}

.subhero-photo{background-size:cover;background-position:center;position:relative;}

.bg-overlay{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(9,59,37,0.18) 0%,rgba(9,59,37,0.10) 50%,rgba(9,59,37,0.22) 100%);
}

.subhero-photo .subhero-inner{position:relative;z-index:2;}

.breadcrumb{
  font-family:var(--annot);font-size:9.5px;font-weight:600;
  letter-spacing:0.09em;text-transform:uppercase;
  color:var(--texte-doux);margin-bottom:26px;
  display:flex;gap:9px;align-items:center;flex-wrap:wrap;
}

.breadcrumb a:hover{color:var(--accent-courant);}

.breadcrumb span{opacity:0.45;}

/* ============ TETES DE SECTION ============ */
/* Un filet de 1 px suffit a poser la section : a 2 px il pesait autant
   qu'un titre. L'accent est porte par la regle graduee du label. */
.section-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:48px;
  margin-bottom:60px;padding-bottom:24px;border-bottom:1px solid var(--vert-fonce);
}

.section-head h2{font-size:clamp(26px,3vw,38px);max-width:620px;font-stretch:106%;}

.section-head p{max-width:330px;font-size:13.5px;color:var(--encre-2);}

/* ============ BANDES ============ */
.solutions{background:var(--papier);}

.aides{background:var(--soleil-voile);}

.process{background:var(--papier);}

.trust{background:var(--papier-2);}

.zone{background:var(--papier);}

/* ============ CARTES MODULES (accueil) ============ */
.circuit-wrap{position:relative;}

.circuit-line{position:absolute;top:38px;left:6%;right:6%;height:1px;z-index:0;background:var(--filet);}

.circuit-line svg{display:none;}

.module-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;z-index:1;border:1px solid var(--filet-fort);background:var(--filet-fort);}

.module-card{
  background:var(--blanc);padding:36px 28px;
  transition:background .18s;
  border:0;border-radius:0;
  outline:0.5px solid var(--filet-fort);
}

.module-card:hover{background:var(--vert-voile);transform:none;}

.module-node{width:10px;height:10px;border-radius:0;background:var(--soleil);margin-bottom:18px;box-shadow:none;}

.module-icon{width:36px;height:36px;margin-bottom:16px;color:var(--encre);}

.module-card h3{font-size:17px;font-weight:600;font-stretch:104%;}

.module-card p{font-size:13px;color:var(--encre-2);margin-top:10px;}

.module-foot{
  margin-top:18px;padding-top:14px;border-top:1px solid var(--filet);
  font-family:var(--annot);font-size:9.5px;font-weight:600;
  letter-spacing:0.07em;text-transform:uppercase;color:var(--vert-fonce);
}

/* ============ SIMULATEUR ============ */
.sim-panel{display:grid;grid-template-columns:1fr 1fr;background:var(--blanc);border:1px solid var(--encre);border-radius:3px;overflow:hidden;}

.sim-controls{padding:40px;border-right:1px solid var(--encre);}

.sim-field{margin-bottom:28px;}

.sim-field label{
  display:block;font-family:var(--annot);font-size:9.5px;font-weight:600;
  letter-spacing:0.09em;text-transform:uppercase;color:var(--vert-fonce);margin-bottom:14px;
}

.seg{display:flex;gap:0;flex-wrap:wrap;border:1px solid var(--encre);border-radius:2px;overflow:hidden;width:fit-content;}

.seg-btn{
  padding:11px 17px;border-radius:0;border:0;border-right:1px solid var(--encre);
  background:var(--blanc);color:var(--encre-2);
  font-family:var(--texte);font-size:13px;font-weight:500;transition:background .18s, color .18s;
}

.seg-btn:last-child{border-right:0;}

.seg-btn:hover{background:var(--papier-2);color:var(--encre);}

.seg-btn.is-on{background:var(--vert-fonce);color:#FFFFFF;font-weight:600;}

.sim-note{font-size:12px;color:var(--encre-2);margin-top:16px;line-height:1.6;}

.sim-result{padding:40px;background:var(--papier);}

.sim-line{display:flex;justify-content:space-between;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--filet);}

.sim-line span:first-child{font-size:13px;color:var(--encre-2);}

.sim-line span:last-child{font-family:var(--annot);font-size:13px;font-weight:600;color:var(--encre);}

.bar-track{height:6px;border-radius:0;background:var(--filet);margin-top:20px;overflow:hidden;}

.bar-fill{height:100%;background:var(--vert-fonce);border-radius:0;transition:width .4s ease;}

.sim-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:24px;padding-top:22px;border-top:2px solid var(--vert-fonce);}

.sim-total span:first-child{font-family:var(--titre);font-size:15px;font-weight:600;}

.sim-total span:last-child{font-family:var(--titre);font-size:34px;font-weight:800;font-stretch:112%;letter-spacing:-0.02em;color:var(--vert-fonce);}

.sim-cap{font-size:11.5px;color:var(--encre-2);margin-top:10px;}

/* ============ HONNETETE / PROCESS / CONFIANCE ============ */
.honesty-row{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:20px;border:1px solid var(--filet-fort);}

.honesty-card{background:var(--blanc);border-radius:0;padding:28px 30px;}

.honesty-card + .honesty-card{border-left:1px solid var(--filet-fort);}

.honesty-card p{font-size:13px;line-height:1.68;color:var(--encre-2);}

.honesty-card p + p{margin-top:10px;}

.proc-strip{display:flex;max-width:1040px;margin:0 auto;position:relative;}

.proc-line{position:absolute;top:19px;left:8%;right:8%;height:1px;background:var(--filet-fort);z-index:0;}

.proc-line-fill{position:absolute;top:0;left:0;height:100%;width:100%;background:var(--vert-fonce);transform-origin:left;}

.proc-step{flex:1;text-align:center;position:relative;z-index:1;padding:0 8px;}

.proc-node{
  width:38px;height:38px;border-radius:0;background:var(--vert-fonce);
  margin:0 auto 16px;display:flex;align-items:center;justify-content:center;
  font-family:var(--annot);font-size:12px;color:var(--papier);font-weight:700;
  box-shadow:0 0 0 6px var(--papier);
}

.proc-step h3{font-size:14.5px;font-weight:600;margin-bottom:7px;}

.proc-step p{font-size:12px;color:var(--encre-2);}

.trust-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center;}

.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;}

.badge{
  padding:8px 13px;border:1px solid var(--filet-fort);border-radius:2px;
  font-family:var(--annot);font-size:9.5px;font-weight:600;
  letter-spacing:0.06em;text-transform:uppercase;color:var(--encre-2);
  background:var(--blanc);
}

.stat-col{display:grid;gap:0;border-top:1px solid var(--vert-fonce);}

.stat-row{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--filet);padding:18px 0;}

.stat-row b{font-family:var(--titre);font-size:30px;font-weight:800;font-stretch:112%;letter-spacing:-0.02em;}

.stat-row span{font-size:12px;color:var(--encre-2);max-width:230px;text-align:right;}

/* ============ ZONE D'INTERVENTION ============ */
.zone-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:48px;align-items:start;}

.zone-grid h3{font-size:17px;margin-bottom:14px;}

.zone-grid > div > p{font-size:14px;color:var(--encre-2);margin-bottom:20px;max-width:52ch;}

.zone-note{
  margin-top:34px;padding:22px 24px;background:var(--vert-voile);
  border:0;border-left:3px solid var(--vert-fonce);border-radius:0;
  font-size:13.5px;color:var(--encre-2);line-height:1.7;max-width:78ch;
}

.zone-note b{color:var(--encre);}

/* ============ AVERTISSEMENT DE BAREME ============ */
/* Obligation d'information precontractuelle (art. L111-1 du code de la
   consommation) et prevention de la pratique commerciale trompeuse
   (art. L121-2 a L121-4) : tout montant d'aide affiche est date,
   presente comme indicatif et non contractuel, et toute reforme
   annoncee est divulguee au visiteur. Mettre la date a jour a chaque
   modification d'un bareme. */
.legal-note{
  margin-top:20px;padding:18px 20px;background:var(--alerte-voile);
  border-left:3px solid var(--alerte);border-radius:0;
  font-size:12.5px;line-height:1.7;color:#5C4437;
}

.legal-note b{color:var(--encre);}

.legal-note a{color:var(--alerte);text-decoration:underline;text-underline-offset:2px;}

.legal-inline{font-size:11.5px;color:var(--encre-2);margin-top:12px;line-height:1.6;}

.legal-cell{padding:0 !important;}

.legal-cell .legal-note{margin-top:0;}

/* ============ CONTENU EDITORIAL ============ */
.two-col{display:grid;grid-template-columns:1.15fr 0.85fr;gap:60px;align-items:start;}

.prose h2{font-size:27px;margin:0 0 16px;letter-spacing:-0.02em;}

.prose h2:not(:first-child){margin-top:44px;}

.prose h3{font-size:18px;margin:30px 0 10px;font-weight:600;}

.prose p{font-size:15.5px;color:var(--encre-2);margin-bottom:18px;max-width:72ch;}

.prose p:last-child{margin-bottom:0;}

.prose a{color:var(--vert-fonce);border-bottom:1px solid var(--vert-clair);}

.prose a:hover{background:var(--vert-voile);}

.prose ul{margin:0 0 18px 0;padding-left:0;}

.prose ul li{
  list-style:none;position:relative;padding-left:26px;
  font-size:15.5px;color:var(--encre-2);margin-bottom:10px;line-height:1.65;
}

.prose ul li::before{
  content:"";position:absolute;left:0;top:0.62em;
  width:11px;height:1px;background:var(--vert-fonce);
}

.side-card{background:var(--blanc);border:1px solid var(--filet-fort);border-top:3px solid var(--vert-fonce);border-radius:3px;padding:28px;margin-bottom:22px;}

.side-card h4{
  font-family:var(--annot);font-size:9.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:0.09em;color:var(--vert-fonce);
  margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--filet);
}

.side-card .big-figure{font-family:var(--titre);font-weight:800;font-stretch:116%;font-size:44px;letter-spacing:-0.03em;line-height:1;color:var(--encre);}

.side-card .big-figure.grad{color:var(--vert-fonce);background:none;-webkit-text-fill-color:currentColor;}

.side-card p{font-size:13px;color:var(--encre-2);margin-top:12px;}

.side-card a{color:var(--vert-fonce);}

.side-card ul{margin:0;padding:0;}

.side-card ul li{
  list-style:none;font-size:13px;color:var(--encre-2);
  padding:10px 0;border-bottom:1px solid var(--filet);
  display:flex;justify-content:space-between;gap:12px;
}

.side-card ul li:last-child{border-bottom:none;}

.side-card ul li b{color:var(--encre);font-weight:600;white-space:nowrap;}

.spec-table{width:100%;border-collapse:collapse;margin:10px 0 6px;}

.spec-table th,.spec-table td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--filet);font-size:13.5px;}

.spec-table thead th,.spec-table tr:first-child th{border-bottom:1.5px solid var(--vert-fonce);}

.spec-table th{
  font-family:var(--annot);font-size:9px;font-weight:600;
  text-transform:uppercase;letter-spacing:0.07em;color:var(--encre);
}

.spec-table td{color:var(--encre-2);}

.spec-table td:first-child{color:var(--encre);font-weight:500;}

.spec-table tbody tr:hover td{background:var(--vert-voile);}

.step-list{counter-reset:step;margin:0;padding:0;}

.step-list li{list-style:none;counter-increment:step;position:relative;padding-left:56px;margin-bottom:28px;}

.step-list li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;left:0;top:0;
  font-family:var(--annot);font-weight:700;font-size:13px;
  color:var(--vert-fonce);
  border-bottom:2px solid var(--soleil);padding-bottom:2px;
}

.step-list h3{font-size:16.5px;margin-bottom:7px;}

.step-list p{font-size:14px;color:var(--encre-2);margin:0;}

.faq-item{border-bottom:1px solid var(--filet);padding:22px 0;}

.faq-item:first-of-type{border-top:1px solid var(--vert-fonce);}

.faq-item summary{
  cursor:pointer;font-family:var(--titre);font-weight:600;font-stretch:104%;
  font-size:16px;list-style:none;display:flex;justify-content:space-between;
  align-items:center;gap:18px;color:var(--encre);
}

.faq-item summary::-webkit-details-marker{display:none;}

.faq-item summary::after{content:"+";font-family:var(--annot);font-size:17px;color:var(--vert-fonce);flex:none;line-height:1;}

.faq-item[open] summary::after{content:"–";}

.faq-item .faq-a{margin-top:16px;font-size:14.5px;color:var(--encre-2);line-height:1.7;max-width:76ch;}

.faq-item .faq-a a{color:var(--vert-fonce);border-bottom:1px solid var(--vert-clair);}

/* ============ CARTES LIEES ============ */
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}

.related-card{
  background:var(--blanc);border:1px solid var(--filet-fort);border-radius:3px;
  padding:28px;display:block;
  transition:box-shadow .18s, transform .18s, background .18s, border-color .18s;
}

.related-card:hover{background:var(--vert-voile);border-color:var(--vert-fonce);box-shadow:4px 4px 0 var(--vert-fonce);transform:translate(-2px,-2px);}

.related-card .related-tag{
  font-family:var(--annot);font-size:9px;font-weight:600;color:var(--vert-fonce);
  text-transform:uppercase;letter-spacing:0.08em;
}

.related-card h4{font-size:16px;margin-top:10px;font-weight:600;font-stretch:104%;}

.related-card p{font-size:12.5px;color:var(--encre-2);margin-top:8px;line-height:1.6;}

.mini-cta{
  background:var(--vert-fonce);color:#FFFFFF;
  border:0;border-radius:3px;padding:40px;
  display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;
}

.mini-cta h3{font-size:23px;max-width:460px;font-weight:800;font-stretch:110%;letter-spacing:-0.02em;color:var(--papier);}

.mini-cta p{font-size:13.5px;color:rgba(247,243,232,0.74);margin-top:10px;max-width:460px;}

.mini-cta .btn-ghost{border-color:rgba(247,243,232,0.45);color:var(--papier);}

.mini-cta .btn-ghost:hover{background:var(--papier);color:var(--encre);border-color:var(--papier);}

/* ============ BANDE FINALE ============ */
.final{background:var(--vert-voile);text-align:center;border-top:1px solid var(--vert-clair);}

.final h2{font-size:clamp(30px,4.2vw,50px);max-width:700px;margin:0 auto;font-stretch:114%;}

.final p{color:var(--encre-2);max-width:480px;margin:22px auto 0;font-size:15px;}

.final .hero-cta{justify-content:center;margin-top:36px;}

.final .related-grid{text-align:left;}

.final .related-card{background:var(--blanc);}

.final .mini-cta{background:transparent;padding:0;justify-content:center;flex-direction:column;text-align:center;color:var(--encre);}

.final .mini-cta p{color:var(--encre-2);}

.final .mini-cta h3{color:var(--encre);max-width:700px;font-size:clamp(27px,3.5vw,40px);font-stretch:108%;}

.final .mini-cta p{margin-left:auto;margin-right:auto;}

/* ============ PIED DE PAGE ============ */
footer{background:var(--nuit-2);padding:64px 0 30px;}

.footer-grid{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:34px;
  padding-bottom:38px;border-bottom:1px solid var(--filet-courant);
}

.footer-brand .brand-plate{background:var(--papier);padding:9px 12px;border-radius:2px;width:fit-content;}

.footer-brand p{font-size:12.5px;color:var(--texte-doux);margin-top:16px;max-width:280px;line-height:1.7;}

.footer-col h4{
  font-family:var(--annot);font-size:9px;font-weight:600;text-transform:uppercase;
  letter-spacing:0.09em;color:var(--vert-clair);margin-bottom:16px;
}

.footer-col a{display:block;font-size:13px;padding:6px 0;color:var(--papier);transition:color .18s;}

.footer-col a:hover{color:var(--vert-clair);}

.footer-legal{margin-top:8px;padding:24px 0 4px;display:flex;flex-direction:column;gap:9px;}

.footer-legal p{font-size:11.5px;line-height:1.7;color:var(--texte-doux);margin:0;}

.footer-legal a{color:var(--texte-doux);border-bottom:1px dotted var(--filet-courant);}

.footer-legal a:hover{color:var(--vert-clair);border-color:var(--vert-clair);}

.footer-bottom{display:flex;justify-content:space-between;padding-top:22px;font-size:11.5px;color:var(--texte-doux);flex-wrap:wrap;gap:10px;}

/* ============ BLOG ============ */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}

.article-card{
  background:var(--blanc);border:1px solid var(--filet-fort);border-radius:3px;
  overflow:hidden;display:flex;flex-direction:column;text-decoration:none;
  transition:box-shadow .18s, transform .18s, border-color .18s;
}

.article-card:hover{border-color:var(--vert-fonce);box-shadow:5px 5px 0 var(--vert-fonce);transform:translate(-2px,-2px);}

.article-thumb{height:170px;background-size:cover;background-position:center;position:relative;border-bottom:1px solid var(--filet-fort);}

.article-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,33,26,0) 40%,rgba(22,33,26,0.38));}

.article-cat{
  position:absolute;top:0;left:0;z-index:2;
  background:var(--vert-fonce);color:#FFFFFF;
  font-family:var(--annot);font-size:9px;font-weight:600;
  text-transform:uppercase;letter-spacing:0.07em;
  padding:7px 11px;border-radius:0;
}

.article-body{padding:24px 22px 26px;flex:1;display:flex;flex-direction:column;}

.article-date{font-family:var(--annot);font-size:9.5px;font-weight:600;letter-spacing:0.07em;text-transform:uppercase;color:var(--encre-3);margin-bottom:10px;}

.article-card h3{font-size:17.5px;font-weight:600;font-stretch:104%;margin-bottom:11px;line-height:1.28;}

.article-card p{font-size:13px;color:var(--encre-2);flex:1;line-height:1.6;}

.article-read{
  margin-top:18px;font-family:var(--annot);font-size:9.5px;font-weight:600;
  letter-spacing:0.08em;text-transform:uppercase;color:var(--vert-fonce);
}

.article-meta-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:24px;}

.article-meta-row .article-cat{position:static;background:var(--soleil);color:var(--encre);}

.article-meta-row span{font-family:var(--annot);font-size:9.5px;font-weight:600;letter-spacing:0.07em;text-transform:uppercase;color:var(--texte-doux);}

.article-body-content{max-width:760px;margin:0 auto;}

.article-body-content h2{font-size:28px;margin:44px 0 16px;letter-spacing:-0.02em;}

.article-body-content h3{font-size:19px;margin:30px 0 10px;font-weight:600;}

.article-body-content p{font-size:16.5px;color:var(--encre-2);line-height:1.78;margin-bottom:20px;}

.article-body-content a{color:var(--vert-fonce);border-bottom:1px solid var(--vert-clair);}

.article-body-content ul{margin:0 0 20px 0;padding-left:0;}

.article-body-content ul li{
  list-style:none;position:relative;padding-left:26px;
  font-size:16px;color:var(--encre-2);margin-bottom:10px;line-height:1.68;
}

.article-body-content ul li::before{content:"";position:absolute;left:0;top:0.66em;width:11px;height:1px;background:var(--vert-fonce);}

.article-body-content blockquote{
  border-left:0;border-top:2px solid var(--vert-fonce);border-bottom:2px solid var(--vert-fonce);
  padding:22px 0;margin:32px 0;font-size:19px;font-style:normal;font-weight:500;
  color:var(--encre);line-height:1.5;
}

/* ============ FORMULAIRES ============ */
.gf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}

.gf-field{display:flex;flex-direction:column;min-width:0;}

/* Espacement propre au formulaire long de la page contact : la version
   courte du hero se contente du gap de .gf-row. */
.gf-card .gf-field{margin-bottom:14px;}

.gf-field.gf-wide{grid-column:1 / -1;}

.gf-field label{
  font-family:var(--annot);font-size:9px;font-weight:600;
  letter-spacing:0.09em;text-transform:uppercase;
  color:var(--accent-courant);margin-bottom:9px;
}

.gf-field input,.gf-field select,.gf-field textarea{
  font-family:var(--texte);font-size:15px;color:var(--encre);
  background:var(--blanc);border:1px solid var(--filet-fort);border-radius:2px;
  padding:13px 14px;width:100%;transition:border-color .18s, box-shadow .18s;
}

.gf-field textarea{resize:vertical;min-height:100px;line-height:1.6;}

.gf-field input::placeholder,.gf-field textarea::placeholder{color:var(--encre-3);}

.gf-field input:hover,.gf-field select:hover,.gf-field textarea:hover{border-color:var(--encre-2);}

.gf-field input:focus,.gf-field select:focus,.gf-field textarea:focus{
  border-color:var(--encre);outline:none;box-shadow:0 0 0 3px var(--vert-voile);
}

.gf-field [aria-invalid="true"]{border-color:var(--alerte);}

.gf-err{font-size:12px;color:var(--alerte);margin-top:7px;font-weight:500;}

.gf-err[hidden]{display:none;}

.gf-submit{width:100%;justify-content:center;margin-top:20px;}

.gf-submit[aria-busy="true"]{opacity:.6;pointer-events:none;}

.gf-trust{font-family:var(--annot);font-size:9.5px;font-weight:600;letter-spacing:0.07em;text-transform:uppercase;color:var(--texte-doux);margin-top:14px;text-align:center;}

.gf-alt{margin-top:16px;font-size:13px;text-align:center;color:var(--texte-doux);}

.gf-alt a{color:var(--accent-courant);border-bottom:1px solid currentColor;}

.gf-note{font-size:12px;color:var(--encre-2);margin-top:16px;line-height:1.6;}

.gf-note a{color:var(--vert-fonce);}

/* Honeypot : hors ecran plutot que display:none — un bot qui lit le CSS
   ignore les champs masques, mais pas ceux simplement deportes. */
.gf-hp{position:absolute !important;left:-9999px !important;width:1px !important;height:1px !important;overflow:hidden !important;}

.gf-ok{background:var(--vert-voile);border:1px solid var(--vert-fonce);border-radius:3px;padding:28px;}

.gf-ok h3{font-size:19px;color:var(--vert-fonce);}

.gf-ok p{margin-top:12px;font-size:13.5px;color:var(--encre-2);}

.gf-fail{background:var(--alerte-voile);border:1px solid var(--alerte);border-radius:3px;padding:22px;margin-top:20px;}

.gf-fail p{font-size:13.5px;color:var(--encre);}

.gf-fail a{color:var(--alerte);text-decoration:underline;}

.gf-card{background:var(--blanc);border:1px solid var(--filet-fort);border-top:3px solid var(--vert-fonce);border-radius:3px;padding:30px;margin-bottom:26px;}

.gf-card h3{font-size:20px;font-weight:700;font-stretch:106%;}

.gf-card .gf-intro{margin-top:12px;margin-bottom:24px;font-size:13.5px;color:var(--encre-2);}

.hero-form{margin-top:34px;max-width:540px;}

/* Le formulaire du hero vit desormais sur un panneau creme : libelles
   et messages reprennent les couleurs du contexte clair. */
.hero .gf-field label,.subhero .gf-field label{color:var(--vert-fonce);}

/* Sur un panneau translucide, un champ blanc plein fait tache. Il
   reste tres lisible a 88 % et laisse passer un peu de la photo. */
.hero-photo .gf-field input,
.hero-photo .gf-field select,
.hero-photo .gf-field textarea{background:rgba(255,255,255,0.88);border-color:rgba(22,33,26,0.22);}

.hero-photo .gf-field input:focus,
.hero-photo .gf-field select:focus,
.hero-photo .gf-field textarea:focus{background:#FFFFFF;border-color:var(--vert-fonce);}

.hero .gf-err,.subhero .gf-err{color:var(--alerte);}

/* ============ DEMANDE DE RAPPEL ============ */
/* Loi n° 2025-594 et decret n° 2026-662, en vigueur depuis le 11 aout 2026.
   En renovation energetique, la prospection telephonique est interdite : le
   seul appel licite est le rappel d'un consommateur qui l'a demande. La case
   ci-dessous EST la demande, et son libelle exact est conserve comme preuve.
   Ne jamais la pre-cocher, ne jamais la masquer, ne jamais reformuler son
   libelle sans mettre a jour le champ transmis au CRM. */
.gf-consent{
  display:flex;gap:12px;align-items:flex-start;margin-top:22px;padding:16px 18px;
  background:var(--vert-voile);border:1px solid var(--vert-fonce);border-radius:2px;
}

.gf-consent input[type="checkbox"]{width:19px;height:19px;flex:0 0 19px;margin-top:2px;accent-color:var(--vert-fonce);cursor:pointer;}

.gf-consent label{
  font-family:var(--texte);font-size:13px;line-height:1.6;color:var(--encre);
  cursor:pointer;text-transform:none;letter-spacing:0;margin:0;
}

.gf-consent label b{color:var(--vert-fonce);}

.gf-mentions{font-size:11.5px;line-height:1.65;color:var(--encre-2);margin-top:14px;}

.gf-mentions a{color:var(--vert-fonce);}

/* ============ CARTE (chargement au clic) ============ */
/* L'iframe Google Maps depose des cookies des le chargement de la page.
   On ne l'insere qu'apres un clic explicite du visiteur : tant qu'il
   n'a rien demande, aucune requete ne part vers Google. */
.map-box{border-radius:3px;overflow:hidden;border:1px solid var(--filet-fort);background:var(--blanc);}

.map-ph{padding:34px 28px;text-align:center;min-height:320px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;}

.map-pin{width:32px;height:32px;color:var(--vert-fonce);margin-bottom:8px;}

.map-adr{font-size:15px;color:var(--encre);line-height:1.6;font-weight:500;}

.map-why{font-size:12px;color:var(--encre-2);max-width:42ch;margin-top:12px;line-height:1.6;}

.map-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:22px;}

.map-box iframe{border:0;display:block;width:100%;height:320px;}

/* ============ ACCESSIBILITE ============ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* Lien d'evitement : hors ecran, ramene au premier plan a la prise de
   focus clavier. On ne le masque pas en display:none, sinon il n'est
   plus atteignable au Tab. */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--vert-fonce);color:#FFFFFF;padding:13px 22px;border-radius:0;
  font-family:var(--texte);font-weight:600;font-size:14px;text-decoration:none;
}

.skip-link:focus{left:0;}

/* ============ REVELATION AU DEFILEMENT ============ */
.reveal-init{opacity:0;transform:translateY(14px);transition:opacity .5s ease, transform .5s ease;}

.reveal-init.is-visible{opacity:1;transform:translateY(0);}

@media (prefers-reduced-motion: reduce){
  /* Neutralisation globale : couvre aussi les transitions de survol
     (boutons, cartes, liens) qu'une regle ciblee laisserait passer. */
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  html{scroll-behavior:auto;}
  .reveal-init{opacity:1;transform:none;transition:none;}
}

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  .topbar-claim{display:none;}
  nav.links{display:none;}
  .menu-toggle{display:block;}
  .nav-tel{display:none;}

  /* backdrop-filter et transform creent un bloc conteneur pour les
     descendants en position:fixed. L'en-tete n'en porte plus, mais on
     garde la garde : le tiroir doit couvrir l'ecran, pas l'en-tete. */
  nav.links.is-open{
    display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:0;position:fixed;top:0;left:0;right:0;height:100dvh;
    background:var(--papier);padding:92px 22px 40px;overflow-y:auto;z-index:65;
  }

  body.nav-locked{overflow:hidden;}

  .nav-group{display:block;}

  nav.links.is-open .nav-head{
    width:100%;justify-content:space-between;font-size:17px;font-weight:600;
    padding:16px 2px;border-bottom:1px solid var(--filet);border-radius:0;color:var(--encre);
  }

  nav.links.is-open .nav-caret{display:none;}

  nav.links.is-open .megamenu{
    position:static;transform:none;width:auto;opacity:1;visibility:visible;
    pointer-events:auto;background:none;border:none;box-shadow:none;padding:10px 0 20px;
  }

  nav.links.is-open .mm-grid{grid-template-columns:1fr;gap:14px;}

  nav.links.is-open .mm-intro{border-right:none;padding-right:0;}

  nav.links.is-open .mm-intro h2{display:none;}

  nav.links.is-open .mm-list{grid-template-columns:1fr;}

  nav.links.is-open .mm-foot{display:none;}

  .menu-toggle{position:relative;z-index:70;}
}

@media (max-width:920px){
  .hero-grid{grid-template-columns:1fr;}
  .module-grid{grid-template-columns:repeat(2,1fr);}
  .circuit-line{display:none;}
  .sim-panel{grid-template-columns:1fr;}
  .sim-controls{border-right:none;border-bottom:1px solid var(--encre);}
  .honesty-row{grid-template-columns:1fr;}
  .honesty-card + .honesty-card{border-left:0;border-top:1px solid var(--encre);}
  .trust-grid{grid-template-columns:1fr;gap:36px;}
  .proc-strip{flex-wrap:wrap;}
  .proc-step{flex:0 0 33.33%;margin-bottom:26px;}
  .proc-line{display:none;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px;}
  .two-col{grid-template-columns:1fr;gap:40px;}
  .related-grid{grid-template-columns:1fr;}
  .blog-grid{grid-template-columns:repeat(2,1fr);}
  .zone-grid{grid-template-columns:1fr;gap:32px;}
}

@media (max-width:720px){
  .wrap{padding:0 20px;}
  section{padding:68px 0;}
  .hero{padding-top:60px;padding-bottom:64px;}
  .topbar-links a:not(.topbar-tel){display:none;}
  .profile-pill{padding:7px 10px;font-size:9px;}
  .nav-right .btn-energy{display:none;}
  .module-grid{grid-template-columns:1fr;}
  .section-head{flex-direction:column;align-items:flex-start;gap:14px;}
  .proc-step{flex:0 0 50%;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .blog-grid{grid-template-columns:1fr;}
  .mini-cta{flex-direction:column;align-items:flex-start;}
  .sim-controls,.sim-result{padding:28px;}
  .footer-legal p{font-size:11px;}
  .subhero-photo,.hero-photo{background-attachment:scroll;}

  /* Un label long passe a la ligne : la regle graduee n aurait plus de
     place et se reduirait a deux traits. On la retire sous 720 px. */
  .eyebrow{flex-wrap:wrap;gap:8px;}
  .eyebrow::after{display:none;}

  /* Les panneaux poses sur les photos se resserrent. */
  .hero-photo .hero-grid > div:first-child{padding:30px 22px 28px;}
  .subhero-photo .subhero-inner{padding:26px 22px 24px;}

  /* Sur mobile le panneau prend toute la largeur : il repasse au-dessus
     de la zone centrale de la photo, plus sombre que le pilier de
     gauche ou il se pose en grand ecran. Mesure : a 46 % le texte y
     tombe a 3,9:1. On remonte a 58 %, qui redonne 4,9:1. */
  .hero-photo .hero-grid > div:first-child,
  .subhero-photo .subhero-inner{background:rgba(247,243,232,0.58);}

  /* Un tableau large ne doit pas pousser la page : il defile seul. */
  .spec-table{display:block;overflow-x:auto;white-space:nowrap;}
}

/* Anti-zoom iOS : Safari agrandit la page quand on met au point un
   champ dont le texte fait moins de 16 px. Sur un formulaire de
   capture, ce zoom fait perdre des saisies. */
@media (max-width:720px){
  .gf-field input,.gf-field select,.gf-field textarea{font-size:16px;}
}

@media (max-width:480px){
  .hero h1{font-size:31px;}
  .btn{padding:12px 18px;font-size:13px;}
  .stat-row{flex-direction:column;align-items:flex-start;gap:4px;}
  .stat-row span{text-align:left;}
  .footer-grid{grid-template-columns:1fr;}
  .gf-row{grid-template-columns:1fr;}
  .side-card .big-figure{font-size:36px;}
}


/* --- Bandeau France Renov' (arrete du 7 juillet 2026, exigible au 01/10/2026) ---
   Mention legale imposee, pas un encart promotionnel : on la pose sur fond
   clair plutot que de la noyer dans le gris du pied. Meme parti que le site
   jdi-site, pour que les deux maisons disent la meme chose de la meme facon.
   Le liseré bleu est le bleu Marianne (#000091). */
.footer-francerenov{ margin:22px 0 0; }
.footer-francerenov a{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  background:var(--blanc); color:var(--encre); text-decoration:none;
  border:1px solid var(--filet); border-left:4px solid #000091;
  border-radius:3px; padding:14px 18px;
  transition:background .15s ease;
}
.footer-francerenov a:hover{ background:#fff; }
.footer-francerenov .fr-marque{ display:flex; flex-direction:column; line-height:1.15; flex:0 0 auto; }
.footer-francerenov .fr-marque b{ font-size:15px; font-weight:900; color:#000091; }
.footer-francerenov .fr-marque i{
  font-style:normal; font-size:8.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; opacity:.62; margin-top:2px;
}
.footer-francerenov .fr-texte{ flex:1 1 320px; font-size:13px; line-height:1.55; }
.footer-francerenov .fr-texte strong{ color:#000091; text-decoration:underline; text-underline-offset:2px; }
.footer-francerenov img{ height:46px; width:auto; flex:0 0 auto; }
@media (max-width:640px){
  .footer-francerenov a{ flex-direction:column; align-items:flex-start; gap:12px; }
}