/* Fonts are self-hosted: the site's CSP is `style-src 'self' 'unsafe-inline'`,
   so a Google Fonts <link>/@import is blocked outright and the page silently
   falls back to system-ui. See public/fonts/fonts.css (latin + latin-ext only). */
@import url('/fonts/fonts.css');

/* BRETIC palette. --lime (#90c545) is THE brand colour and carries the primary
   surfaces: buttons, the CTA band, the header phone button, the mobile call bar.
   White on it is only 2.05:1, so every one of those surfaces puts --forest on
   top instead (6.97:1) — that is what lets the colour be used at full strength
   rather than demoted to an accent. --green (#4A7A17) stays for the cases that
   genuinely need white text or dark text on white (links, small labels). */
/* --accent and --display are the two variables @bext-stack/cms reads: `--accent`
   backs the form submit button, FAQ markers and other kernel chrome (default a
   WordPress blue), and `.el-heading{font-family:var(--display,inherit)}` means
   every Elementor heading falls back to the body face unless --display is set. */
:root{--accent:#4A7A17;--fw-btn-bg:#90c545;--fw-btn-color:#16301B;--display:'Manrope',system-ui,sans-serif;--lime:#90c545;--lime-deep:#7DB233;--lime-soft:#c7e79a;--green:#4A7A17;--green-2:#6FA82B;--forest:#16301B;--forest-2:#1E4226;--orange:#ED7004;--orange-deep:#B85400;--mint:#F1F7E8;--sand:#F7F6F1;--ink:#1D1D1B;--muted:#5F6B5A;--line:#E0E6DA;--white:#fff;--radius:22px;--shadow:0 22px 60px rgba(22,48,27,.13)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:#fff;font-family:'DM Sans',system-ui,sans-serif;line-height:1.62}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:'Manrope',system-ui,sans-serif;line-height:1.09;letter-spacing:-.035em}
/* Heading sizes must NOT be declared on Elementor headings. The kernel gives
   `.el-heading` no font-size on purpose: per-widget typography is emitted on the
   widget WRAPPER and reaches the heading by inheritance. A bare `h1{font-size}`
   rule here would beat that inheritance and every heading would render at the
   same size, ignoring what the client sets in the visual editor. So the
   fallback-markup sizes below exclude `.el-heading`, and the Elementor default
   sits on the wrapper inside `:where()` (zero specificity → a widget rule always
   wins). */
h1:not(.el-heading){font-size:clamp(2.45rem,5.4vw,4.9rem);margin-bottom:24px}h2:not(.el-heading){font-size:clamp(1.9rem,4vw,3.4rem);margin-bottom:20px}h3:not(.el-heading){font-size:1.25rem}
:where(.el-w-heading){font-size:clamp(1.9rem,4vw,3.4rem)}
/* …but that wrapper default is level-blind, so a footer <h3> inherited the <h2>
   size and column titles collided. Sizes for h3 and below therefore go directly
   on the element. h1/h2 are deliberately NOT listed: hero H1s carry an explicit
   px size set in the visual editor, which reaches them by inheritance from the
   wrapper and would lose to a direct rule here. */
h3.el-heading,h4.el-heading,h5.el-heading,h6.el-heading{font-size:1.25rem;margin-bottom:12px}
.el-w-icon-box h3.el-heading,.el-w-image-box h3.el-heading{font-size:1.4rem}.container{width:min(1180px,calc(100% - 40px));margin-inline:auto}

/* The kernel sets `.el-col{min-width:220px}` so narrow viewports wrap columns
   into a readable grid — correct on mobile, but on desktop it overrides the
   declared percentage and wraps rows that should sit on one line (a 5-logo strip,
   a 4-step process). Released above 980px only; below that the kernel's own
   220px floor and its <=760px full-width rule take over unchanged.
   Needs `.el-row >` to outrank the kernel, whose <style> block comes after this
   linked sheet at equal specificity. */
@media(min-width:981px){.el-row>.el-col{min-width:0}}

/* header */
.topbar{background:var(--forest);color:#cfe4bd;font-size:13px}.topbar-inner{min-height:36px;display:flex;align-items:center;justify-content:space-between}.topbar-hours{display:flex;gap:8px;align-items:center}section.el-section[class*="header-1"]{position:relative}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(14px);border-bottom:1px solid rgba(22,48,27,.09)}.nav-wrap{min-height:84px;display:flex;align-items:center;gap:30px}.brand{display:flex;align-items:center;gap:12px;margin-right:auto}.brand img{width:132px;height:52px;object-fit:contain}.brand span{font:700 10px/1.2 'Manrope';letter-spacing:.13em;text-transform:uppercase;color:var(--muted);border-left:1px solid var(--line);padding-left:12px}.main-nav{display:flex;align-items:center;gap:20px}.main-nav a{font-weight:600;font-size:17px;padding:30px 0;position:relative;white-space:nowrap}.main-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:18px;height:2px;background:var(--lime);transition:.2s}.main-nav a:hover:after,.main-nav a.active:after{right:0}.phone-cta{display:flex;align-items:center;gap:10px;color:var(--forest);background:var(--lime);border-radius:12px;padding:10px 16px;box-shadow:0 8px 24px rgba(144,197,69,.3)}.phone-cta span{font-weight:800;line-height:1.15}.phone-cta small{display:block;font-size:10px;font-weight:600;opacity:.75;text-transform:uppercase;letter-spacing:.09em}

/* type helpers */
.eyebrow{font:800 12px/1.4 'Manrope';letter-spacing:.18em;text-transform:uppercase;color:var(--green);margin-bottom:16px}.eyebrow.light{color:var(--lime)}.eyebrow.orange{color:var(--orange-deep)}.lead{font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--muted);max-width:660px}

/* hero */
.hero{background:var(--forest);color:#fff;overflow:hidden;position:relative}.hero:before{content:"";position:absolute;width:540px;height:540px;border:1px solid rgba(144,197,69,.26);border-radius:50%;top:-250px;right:-80px}.hero-grid{min-height:640px;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:60px;padding:74px 0}.hero h1{max-width:800px}.hero h1 em{font-style:normal;color:var(--lime)}.hero-copy .lead{color:#cbdcc0;max-width:620px}.hero-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:34px}.hero-visual{position:relative}.hero-visual>img{height:500px;width:100%;object-fit:cover;border-radius:120px 16px 16px 16px}.trust-card{position:absolute;left:-42px;bottom:25px;background:#fff;color:var(--ink);border-radius:18px;padding:18px 22px;box-shadow:var(--shadow);display:flex;gap:16px;align-items:center}.trust-number{font:800 2.5rem/1 'Manrope';color:var(--green)}.trust-card p{margin:0;font-size:13px;color:var(--muted);line-height:1.35}.trust-card strong{display:block;color:var(--ink)}

/* buttons */
.btn{min-height:52px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 22px;border-radius:12px;font-weight:800;font-size:14px;border:1px solid transparent;transition:transform .2s,box-shadow .2s,background .2s;cursor:pointer;font-family:inherit}.btn:hover{transform:translateY(-2px)}.btn-primary{background:var(--lime);color:var(--forest);box-shadow:0 12px 30px rgba(144,197,69,.32)}.btn-primary:hover{background:var(--lime-deep)}.btn-accent{background:var(--orange-deep);color:#fff;box-shadow:0 12px 30px rgba(184,84,0,.24)}.btn-light{background:#fff;color:var(--forest)}.btn-ghost-light{border-color:rgba(255,255,255,.38);color:#fff}.btn-outline{border-color:var(--line);color:var(--forest);background:#fff}

/* label strip */
.labels{background:var(--mint);border-block:1px solid var(--line)}.labels-inner{display:flex;align-items:center;justify-content:space-between;gap:34px;padding:26px 0;flex-wrap:wrap}.labels-inner img{height:56px;width:auto;object-fit:contain;filter:saturate(.9)}.labels-note{font-weight:700;font-size:13px;color:var(--muted);max-width:230px;line-height:1.4}

/* sections */
.section{padding:100px 0}.section-soft{background:var(--sand)}.section-mint{background:var(--mint)}.section-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:42px}.section-head h2{max-width:720px;margin-bottom:0}.section-head p{max-width:430px;color:var(--muted);margin:0}

/* `image-box` used as a service card. The kernel styles that widget for its
   default icon-ish look — `.el-iconbox-media img{max-width:96px;margin:0 auto}`
   and a centred flex column with a gap — so a full-bleed card header needs
   max-width released explicitly, not just width set. Two classes here outrank
   the kernel's one, so source order stops mattering. */
.el-w-image-box{height:100%}
.el-w-image-box .el-iconbox{gap:0;height:100%;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-align:left;align-items:stretch;transition:transform .25s,box-shadow .25s}
.el-w-image-box .el-iconbox:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.el-w-image-box .el-iconbox-media{border-radius:0;width:100%}
.el-w-image-box .el-iconbox-media img{max-width:none;width:100%;height:225px;object-fit:cover;border-radius:0;margin:0}
.el-w-image-box .el-iconbox-body{padding:26px}
.el-w-image-box .el-iconbox-title{margin-bottom:10px}

/* service cards */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.service-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;transition:transform .25s,box-shadow .25s;display:flex;flex-direction:column}.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}.service-card img{width:100%;height:225px;object-fit:cover}.service-body{padding:26px;display:flex;flex-direction:column;flex:1}.service-body .eyebrow{font-size:10px;margin-bottom:11px;letter-spacing:.14em}.service-body h3{font-size:1.55rem;margin-bottom:12px}.service-body p{color:var(--muted);flex:1}.text-link{display:inline-flex;gap:8px;align-items:center;font-weight:800;color:var(--green)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px}.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px}.stat b{display:block;font:800 3.1rem/1 'Manrope';color:var(--green);letter-spacing:-.04em}.stat span{color:var(--muted);font-weight:600}

/* split + checks */
.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}.split-image{position:relative}.split-image>img{height:520px;width:100%;object-fit:cover;border-radius:var(--radius)}.feature-stamp{position:absolute;right:-24px;bottom:30px;background:var(--lime);color:var(--forest);width:150px;height:150px;border-radius:50%;display:grid;place-content:center;text-align:center;transform:rotate(-7deg);font-weight:800;font-family:'Manrope';line-height:1.15;padding:12px}.check-list{display:grid;gap:16px;margin:30px 0}.check-item{display:flex;gap:14px;align-items:flex-start}.check-icon{flex:none;width:28px;height:28px;border-radius:50%;background:var(--mint);color:var(--green);display:grid;place-items:center}.check-item strong{display:block;font-family:'Manrope'}.check-item span{font-size:14px;color:var(--muted)}

/* before / after */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:38px}.ba{position:relative;border-radius:var(--radius);overflow:hidden}.ba img{width:100%;height:340px;object-fit:cover}.ba b{position:absolute;top:16px;left:16px;background:#fff;color:var(--forest);border-radius:999px;padding:7px 16px;font:800 12px/1 'Manrope';letter-spacing:.12em;text-transform:uppercase}

/* process */
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.process-item{padding:26px;border-left:1px solid var(--line)}.process-num{font:800 3.4rem/1 'Manrope';color:var(--lime-soft)}.process-item h3{margin:16px 0 10px}.process-item p{color:var(--muted);margin:0;font-size:15px}

/* reviews + areas */
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.review{background:#fff;border-radius:var(--radius);padding:28px;box-shadow:0 12px 40px rgba(22,48,27,.07)}.stars{color:var(--orange);letter-spacing:3px}.review blockquote{margin:20px 0;font-size:1.02rem}.review cite{font-style:normal;font-weight:800}.areas{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}.area{padding:9px 15px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:600;font-size:14px;display:inline-flex;gap:7px;align-items:center}

/* cta band */
.cta-band{background:var(--lime);color:var(--forest);padding:64px 0}.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:50px}.cta-inner h2{font-size:clamp(1.9rem,3.8vw,3.2rem);margin-bottom:10px}.cta-inner p:not(.eyebrow){max-width:680px;margin-bottom:0;color:#24401f}.cta-band .eyebrow{color:#2d4a24}.cta-band .btn-light{background:var(--forest);color:#fff}

/* interior pages */
.page-hero{background:var(--forest);color:#fff;overflow:hidden}.page-hero-grid{min-height:450px;display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:center;padding:64px 0}.page-hero h1{font-size:clamp(2.4rem,4.9vw,4.2rem)}.page-hero .lead{color:#cbdcc0}.page-hero img{height:360px;width:100%;object-fit:cover;border-radius:100px 16px 16px 16px}.content-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:start}.content-grid h2{font-size:clamp(1.9rem,3.8vw,3rem)}.content-grid>aside{background:var(--mint);border-radius:var(--radius);padding:30px;position:sticky;top:110px}.content-grid>aside h3{margin-bottom:20px}.mini-list{display:grid;gap:13px}.mini-list a,.mini-list div{display:flex;gap:12px;align-items:center;padding-bottom:13px;border-bottom:1px solid #dceac6;font-weight:600}.mini-list a:last-child,.mini-list div:last-child{border:0;padding-bottom:0}.mini-list a:hover{color:var(--green)}

/* faq */
.faq{display:grid;gap:12px;max-width:860px}.faq details{border:1px solid var(--line);border-radius:14px;background:#fff;padding:18px 22px}.faq summary{font-family:'Manrope';font-weight:800;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:"+";color:var(--green);font-size:1.5rem;line-height:1}.faq details[open] summary:after{content:"–"}.faq p{margin:14px 0 0;color:var(--muted)}

/* contact */
.contact-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:58px}.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:18px}.field-group{display:grid;gap:7px}.field-group.full{grid-column:1/-1}.field-group label{font-size:13px;font-weight:800}.field,.field-group input,.field-group select,.field-group textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:14px 15px;background:#fff;color:var(--ink);font:inherit}.field-group textarea{min-height:145px;resize:vertical}.contact-aside{background:var(--forest);color:#fff;border-radius:var(--radius);padding:36px}.contact-row{display:flex;gap:15px;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.15)}.contact-row:last-child{border:0}.contact-row p{margin:0;color:#c7dbba}.contact-row strong{display:block;color:#fff}.notice{padding:15px 18px;background:#eaf7ee;border:1px solid #9fd3ae;color:#1c6134;border-radius:12px;margin-bottom:24px}.notice.error{background:#fdeeea;border-color:#f0b3a2;color:#8d2c11}.privacy{max-width:820px}.privacy h2{font-size:1.6rem;margin-top:42px}.privacy p,.privacy li{color:var(--muted)}

/* outils : échelle DPE + cartes de recommandation */
.dpe-scale{display:flex;gap:5px;margin:14px 0 18px}
.dpe-step{flex:1;text-align:center;font:800 13px/30px 'Manrope';border-radius:6px;background:var(--c);color:#1D1D1B;opacity:.32;transition:.2s}
.dpe-step.on{opacity:1;transform:scale(1.16);box-shadow:0 4px 14px rgba(22,48,27,.3)}
.dpe-figures{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.dpe-figures div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 10px;text-align:center}
.dpe-figures b{display:block;font:800 1.5rem/1.1 'Manrope';color:var(--forest)}
.dpe-figures span{font-size:11.5px;color:var(--muted)}
.reco-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.reco-card h3{margin-bottom:10px}
.reco-card p{color:var(--muted);margin-bottom:14px}
.reco-figs{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.reco-figs span{font-weight:800;color:var(--forest);background:var(--mint);border-radius:999px;padding:6px 13px;font-size:13px}
.reco-figs .reco-save{background:var(--lime);color:var(--forest)}
/* estimateur */
.works-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.qty{display:flex;align-items:center;gap:9px}
.qty input{flex:1}
.qty span{font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap}
.est-total{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;text-align:center}
.est-total b{display:block;font:800 2.1rem/1.1 'Manrope';color:var(--forest);letter-spacing:-.03em}
.est-total span{font-size:12.5px;color:var(--muted)}
.est-table{margin-top:34px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.est-row{display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr 1fr;gap:14px;padding:15px 22px;border-bottom:1px solid var(--line);align-items:center}
.est-row:last-child{border-bottom:0}
.est-head{background:var(--sand);font:800 11.5px/1.4 'Manrope';letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
/* simulateur d'aides */
.aides{display:grid;gap:10px}
.aide-row{display:flex;align-items:center;justify-content:space-between;gap:14px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.aide-row strong{display:block;font-family:'Manrope';font-size:14.5px}
.aide-row span{font-size:12.5px;color:var(--muted)}
.aide-row b{font:800 1.15rem/1 'Manrope';color:var(--green);white-space:nowrap}
.reste{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px;background:var(--forest);color:#fff;border-radius:14px;padding:16px 18px}
.reste span{font-weight:700;font-size:13.5px}
.reste b{font:800 1.5rem/1 'Manrope';color:var(--lime)}
/* carte des agences */
.bretic-map{height:440px;border-radius:var(--radius);border:1px solid var(--line);background:var(--mint);z-index:0}
.bretic-map .leaflet-control-attribution{font-size:10.5px;background:rgba(255,255,255,.85)}
/* Marqueur maison : pastille à la couleur de marque, cerclée de blanc pour
   rester lisible aussi bien sur la mer que sur le bâti dense. */
.bretic-pin span{display:block;width:22px;height:22px;border-radius:50%;background:var(--lime);border:3px solid #fff;box-shadow:0 2px 8px rgba(22,48,27,.45)}
.leaflet-popup-content{font-family:'DM Sans',system-ui,sans-serif;font-size:13.5px;line-height:1.5}
@media(max-width:980px){.bretic-map{height:340px}}

/* page hub /outils */
.tool-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;transition:transform .25s,box-shadow .25s,border-color .25s}
.tool-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--lime)}
.tool-duree{align-self:flex-start;background:var(--mint);color:var(--green);font:800 11px/1 'Manrope';letter-spacing:.12em;text-transform:uppercase;padding:7px 12px;border-radius:999px;margin-bottom:18px}
.tool-card h2{font-size:1.5rem;margin-bottom:12px}
.tool-card p{color:var(--muted);flex:1;margin-bottom:18px}

/* Le <ul> du menu est un flex en `align-items:normal`, donc les <li> (30px)
   restent collés en haut de la colonne (80px) : avec le menu à un seul niveau
   ça ne se voyait pas, avec l'arbre le décalage devient visible (nav 25px plus
   haut que le logo et le téléphone). Ici on est dans NOTRE feuille, pas dans
   custom_css, donc le combinateur enfant est utilisable. */
nav.el-nav-menu > ul{align-items:center}

/* Sous-menus du kernel : le menu du site est clair, ses dropdowns doivent
   l'être aussi (le défaut kernel est un panneau blanc générique). */
@media(min-width:769px){
  .el-nav-sub{border:1px solid var(--line);box-shadow:0 14px 38px rgba(22,48,27,.16)!important;padding:10px!important;text-align:left}
  .el-nav-sub .el-nav-link{font-weight:600;font-size:15px}
  .el-nav-sub .el-nav-link:hover{background:var(--mint)!important;color:var(--green)}
}
/* En mobile le kernel repasse les sous-menus en `position:static` : dans un
   <ul> en flex-wrap ils se retrouvent alors À CÔTÉ des entrées suivantes, qui
   passent derrière le panneau. Les empiler verticalement donnerait un en-tête
   de 13 lignes. On les masque donc : chaque parent a une vraie destination
   (Toiture → /toiture-couverture, Outils → /outils), la barre reste compacte et
   tout reste atteignable en un tap de plus. Le chevron disparaît avec eux,
   sinon il annoncerait un déploiement qui n'existe plus. */
/* ── Menu burger ─────────────────────────────────────────────────────────
   Le widget nav-menu du kernel n'a pas de bascule mobile : le bouton est
   injecté par islands/bretic-ui.js et bascule `.nav-open` sur la section
   d'en-tête. Tout est sous `html.js`, la classe posée par ce script — sans JS
   le menu reste déplié plutôt que définitivement fermé. */
/* `top` fixe et non 50% : une fois le menu ouvert la section devient haute, et
   un bouton centré dessus se retrouverait au milieu du panneau au lieu de rester
   à côté du logo. */
.nav-burger{display:none;position:absolute;right:18px;top:22px;z-index:90;
  width:46px;height:46px;border:1px solid var(--line);border-radius:12px;background:#fff;
  cursor:pointer;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav-burger span{display:block;width:20px;height:2px;background:var(--forest);border-radius:2px;transition:transform .2s,opacity .2s}
.nav-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-open .nav-burger span:nth-child(2){opacity:0}
.nav-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Appel direct à côté du burger : en mobile la colonne téléphone est repliée
   dans le tiroir, or c'est l'action n°1 d'un visiteur d'artisan. Le numéro est
   lu dans le DOM par bretic-ui.js, donc il suit le CMS sans duplication. */
.nav-phone{display:none;position:absolute;right:74px;top:22px;z-index:90;
  width:46px;height:46px;border-radius:12px;background:var(--lime);color:var(--forest);
  align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(144,197,69,.4)}
.nav-phone:active{background:var(--lime-deep)}

.scroll-top{position:fixed;right:22px;bottom:24px;z-index:70;width:46px;height:46px;border:0;border-radius:50%;
  background:var(--lime);color:var(--forest);cursor:pointer;display:grid;place-items:center;
  box-shadow:0 8px 24px rgba(22,48,27,.28);opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .2s,transform .2s,visibility .2s}
.scroll-top.on{opacity:1;visibility:visible;transform:none}
.scroll-top:hover{background:var(--lime-deep)}

@media(max-width:980px){
  html.js .nav-burger{display:flex}
  html.js .nav-phone{display:flex}
  /* La barre d'appel fixe occupe déjà le bas de l'écran : on remonte au-dessus. */
  .scroll-top{bottom:78px;right:16px}
  /* Colonnes nav + téléphone repliées derrière le burger.
     `display:flex` est posé en style INLINE sur chaque colonne par le
     renderer : sans !important la règle ne peut pas gagner. */
  html.js section.el-section[class*="header-1"] > .el-row > .el-col:nth-child(2),
  html.js section.el-section[class*="header-1"] > .el-row > .el-col:nth-child(3){display:none!important}
  html.js section.el-section[class*="header-1"].nav-open > .el-row > .el-col:nth-child(2),
  html.js section.el-section[class*="header-1"].nav-open > .el-row > .el-col:nth-child(3){display:flex!important;flex:0 0 100%!important;max-width:100%!important}
  /* Ouvert : liste verticale, sous-menus dépliés et indentés. */
  .nav-open nav.el-nav-menu > ul{flex-direction:column;align-items:stretch;gap:0}
  .nav-open nav.el-nav-menu > ul > li{border-bottom:1px solid var(--line)}
  /* Un tiroir vertical se lit aligné à gauche ; le menu hérite sinon du
     centrage de la barre horizontale. */
  .nav-open nav.el-nav-menu{text-align:left}
  .nav-open .el-nav-list,.nav-open .el-nav-sub{text-align:left}
  .nav-open .el-nav-link{display:block;padding:13px 4px;text-align:left}
  .nav-open .el-nav-sub{display:block!important;padding:0 0 8px 18px!important;border:0!important;box-shadow:none!important}
  .nav-open .el-nav-sub .el-nav-item{border:0}
  .nav-open .el-nav-sub .el-nav-link{padding:9px 4px;color:var(--muted)}
  .el-nav-item.el-nav-has-sub > .el-nav-link > .el-nav-txt::after{content:none!important}
}
@media(max-width:680px){.dpe-step{font-size:11px;line-height:26px}.dpe-figures{grid-template-columns:1fr}
.works-grid{grid-template-columns:1fr}
.est-head{display:none}
.est-row{grid-template-columns:1fr;gap:6px;padding:16px 18px}
.est-row span[data-l]:before{content:attr(data-l) " : ";font-weight:800;color:var(--muted);font-size:12px}}

/* footer */
.footer{background:#0F2113;color:#c3d5b7;padding:70px 0 28px}.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:56px}.footer h3{font-size:14px;color:#fff;text-transform:uppercase;letter-spacing:.12em}.footer a,.footer span{display:block;margin:8px 0;font-size:14px}.footer a:hover{color:var(--lime)}.brand-footer img{filter:brightness(0) invert(1);width:150px}.brand-footer{margin-bottom:20px}.footer-grid>div:first-child p{max-width:360px}.footer-bottom{border-top:1px solid rgba(255,255,255,.13);padding-top:24px;margin-top:48px;display:flex;justify-content:space-between;font-size:12px}.mobile-call{display:none}

/* Elementor headings carry a fixed px size set in the visual editor, which has
   no responsive variant — a 56px hero H1 costs five lines on a 390px screen.
   Targeting `.el-heading` directly beats the size inherited from the widget
   wrapper without needing !important, and only inside these queries. */
@media(max-width:900px){.el-w-heading .el-heading{font-size:clamp(1.9rem,6.4vw,2.9rem)}}
@media(max-width:900px){.el-w-image-box .el-iconbox-title,.el-w-icon-box .el-heading{font-size:1.3rem}}
/* The CMS header replaces the React fallback, so `.main-nav` rules don't reach
   it — the Elementor nav needs its own tightening on small screens. */
@media(max-width:900px){.el-w-nav-menu a{font-size:13px}.el-w-nav-menu{--nav-gap:12px}}

@media(max-width:1080px){.main-nav{gap:15px}.main-nav a{font-size:14px}}
@media(max-width:980px){.main-nav{display:none}.nav-wrap{min-height:74px}.hero-grid,.page-hero-grid,.split,.content-grid,.contact-layout{grid-template-columns:1fr}.hero-grid{padding:58px 0 76px}.hero-visual>img{height:390px}.services-grid,.reviews-grid,.stats{grid-template-columns:1fr 1fr}.process-grid{grid-template-columns:1fr 1fr}.page-hero-grid{padding:62px 0}.page-hero img{display:none}.footer-grid{grid-template-columns:1fr 1fr}.section{padding:76px 0}.content-grid>aside{position:static}}
/* Bandeau fermé : on retire la réserve de place et on redescend le retour en
   haut, sinon il flotterait au-dessus d'un vide. */
html.callbar-off .mobile-call{display:none!important}
@media(max-width:980px){html.callbar-off .scroll-top{bottom:24px}}
@media(max-width:680px){html.callbar-off body{padding-bottom:0}}

@media(max-width:680px){body{padding-bottom:64px}.container{width:min(100% - 28px,1180px)}.topbar-hours,.phone-cta{display:none}.topbar-inner{justify-content:center}.brand span{display:none}.site-header{position:relative}.hero-grid{min-height:auto}.hero h1{font-size:2.5rem}.hero-visual>img{height:315px;border-radius:70px 12px 12px 12px}.trust-card{left:12px;right:12px;bottom:-24px}.services-grid,.process-grid,.reviews-grid,.stats,.ba-grid{grid-template-columns:1fr}.section-head,.cta-inner{display:block}.section-head p{margin-top:18px}.section{padding:64px 0}.split{gap:40px}.split-image>img{height:360px}.feature-stamp{right:8px;width:125px;height:125px}.process-item{border-left:0;border-top:1px solid var(--line)}.cta-inner .btn{margin-top:24px}.contact-form{grid-template-columns:1fr}.field-group.full{grid-column:auto}.labels-inner{justify-content:center;gap:24px}.labels-inner img{height:44px}.footer-grid{grid-template-columns:1fr;gap:28px}.footer-bottom{display:block}.mobile-call{display:flex;position:fixed;z-index:60;left:0;right:0;bottom:0;height:64px;background:var(--lime);color:var(--forest);align-items:center;justify-content:center;gap:10px;font-weight:800;box-shadow:0 -8px 25px rgba(22,48,27,.22)}
.mobile-call-link{display:flex;align-items:center;gap:10px;flex:1;justify-content:center;height:100%}
.mobile-call-close{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;background:transparent;color:var(--forest);opacity:.65;cursor:pointer;display:grid;place-items:center;border-radius:10px}
.mobile-call-close:active{background:rgba(22,48,27,.12)}}

/* ——— /outils/bilan-thermique : la vue « résultat ». Le diagnostic thermique
   passe en pastilles dans le bandeau (result-pills) et les CHANTIERS prennent la
   première section : c'est ce que BRETIC vend, pas une classe DPE. ——— */
.result-pills{display:flex;flex-wrap:wrap;gap:11px;margin-top:28px}
.result-pills span{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);border-radius:999px;padding:9px 17px;font-size:14px;color:#cbdcc0}
.result-pills b{font-weight:800;color:var(--lime)}
.hero-link{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-weight:800;color:var(--lime)}
.reco-card{display:flex;flex-direction:column}
.reco-rank{align-self:flex-start;background:var(--forest);color:#fff;border-radius:999px;padding:5px 13px;margin-bottom:14px;font:800 10.5px/1.7 'Manrope';letter-spacing:.14em;text-transform:uppercase}
.reco-card.is-first .reco-rank{background:var(--lime);color:var(--forest)}
.reco-card .reco-figs{margin-top:auto}
.reco-gain{background:var(--forest)!important;color:#fff!important}
.reco-actions{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.works-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:36px}
.side-note{background:var(--sand);border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px;margin-top:36px}
.side-note h3{font-size:1.2rem;margin-bottom:10px}
.side-note p{color:var(--muted);margin:0}
.side-note a{color:var(--green);font-weight:700}
.other-list{margin:14px 0 0;padding-left:20px;color:var(--muted)}
.other-list li{margin-bottom:7px}
.other-list li:last-child{margin-bottom:0}
.bilan-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px 36px;margin-top:34px;display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:start}
.bilan-card h3{font-size:1.2rem;margin-bottom:12px}
.bilan-cost{font:800 2.2rem/1 'Manrope';color:var(--forest);margin-bottom:8px}
.bilan-cost span{font-size:1rem;font-weight:700;color:var(--muted)}
@media(max-width:980px){.bilan-card{grid-template-columns:1fr;gap:30px;padding:28px}}
@media(max-width:680px){.works-cta .btn{width:100%}.result-pills span{width:100%}.side-note{padding:22px}}
.step-nav{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.step-nav a{border:1px solid rgba(255,255,255,.26);border-radius:999px;padding:8px 15px;font-size:13px;font-weight:700;color:#cbdcc0;transition:background .2s,color .2s}
.step-nav a:hover{background:var(--lime);border-color:var(--lime);color:var(--forest)}
.inline-link{color:var(--green);font-weight:700;text-decoration:underline}
.chiffrage-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.chiffrage-grid .est-total{display:flex;flex-direction:column;justify-content:center;gap:6px}
.devis-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:start;margin-top:8px}
.devis-grid>aside{background:var(--mint);border-radius:var(--radius);padding:30px;margin-top:26px}
.devis-grid>aside h3{margin-bottom:18px}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
#aides .bilan-card{background:#fff}
@media(max-width:980px){.chiffrage-grid{grid-template-columns:1fr 1fr}.devis-grid{grid-template-columns:1fr;gap:0}}
@media(max-width:680px){.chiffrage-grid{grid-template-columns:1fr}.step-nav a{font-size:12px;padding:7px 12px}}
.services-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.services-grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:980px){.services-grid.cols-2,.services-grid.cols-3{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.services-grid.cols-2,.services-grid.cols-3{grid-template-columns:1fr}}