/* Layout : site une page orienté conversion ; héros en deux colonnes avec un thermostat chaud/froid, barre d'appel fixe sur mobile. */
:root{
  --bg:#F4F7F8; --surface:#FFFFFF; --ink:#0F1D24; --muted:#4F5E65; --line:#D8E1E5;
  --cool:#2B6A6E; --cool-soft:#E3EFEF; --warm:#C4701E; --on-cool:#FFFFFF; --brand:#347579;
  --f-display:"Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --f-body:"Figtree", "Helvetica Neue", Arial, sans-serif;
  --f-mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0D1519; --surface:#142026; --ink:#E7EEF1; --muted:#A3B2B8; --line:#26363D;
  --cool:#7CC3C6; --cool-soft:#173032; --warm:#F0A256; --on-cool:#06141A; --brand:#7CC3C6; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0D1519; --surface:#142026; --ink:#E7EEF1; --muted:#A3B2B8; --line:#26363D;
  --cool:#7CC3C6; --cool-soft:#173032; --warm:#F0A256; --on-cool:#06141A; --brand:#7CC3C6; color-scheme:dark}

*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth; scroll-padding-top:84px}
body{background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:17px; line-height:1.6; padding-inline:clamp(16px,5vw,56px); padding-block:0 96px; -webkit-font-smoothing:antialiased}
.wrap{max-width:1120px; margin:0 auto}
:focus-visible{outline:3px solid var(--cool); outline-offset:3px; border-radius:4px}
h1,h2,h3{font-family:var(--f-display); text-wrap:balance; margin:0}
p{margin:0}
.eyebrow{font-family:var(--f-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--cool)}
.skip{position:absolute; left:-9999px; top:8px; background:var(--cool); color:var(--on-cool); padding:10px 16px; border-radius:8px; z-index:20}
.skip:focus{left:16px}

/* Navigation */
.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:10; background:var(--bg); display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:14px; border-bottom:1px solid var(--line)}
.logo{font-family:var(--f-display); font-weight:700; font-size:22px; display:flex; align-items:center; gap:20px; color:var(--ink); text-decoration:none; min-height:44px}
.logo i{width:12px; height:12px; border-radius:50%; background:var(--cool); box-shadow:10px 0 0 var(--warm)}
.top ul{display:flex; gap:22px; align-items:center; list-style:none; margin:0; padding:0}
.top ul a{color:var(--muted); text-decoration:none; font-size:15px; padding-block:10px}
.top ul a:hover{color:var(--ink)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font:600 16px var(--f-body); min-height:48px; padding:0 20px; border-radius:999px; border:1px solid transparent; text-decoration:none; cursor:pointer}
.btn svg{width:18px; height:18px}
.btn-primary{background:var(--cool); color:var(--on-cool)}
.btn-primary:hover{filter:brightness(1.1)}
.btn-ghost{border-color:var(--line); color:var(--ink); background:var(--surface)}
.btn-ghost:hover{border-color:var(--cool)}

/* Héros */
.hero{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:clamp(32px,6vw,80px); align-items:center; padding-block:clamp(40px,7vw,96px)}
.hero-text{display:grid; gap:22px; min-width:0}
.hero h1{font-weight:600; font-size:clamp(34px,5.4vw,62px); line-height:1.04; letter-spacing:-.025em}
.hero h1 em{font-style:normal; color:var(--cool)}
.hero .lead{font-size:clamp(17px,1.6vw,19px); color:var(--muted); max-width:54ch}
.cta{display:flex; flex-wrap:wrap; gap:12px}
.proof{display:flex; flex-wrap:wrap; gap:8px 20px; list-style:none; padding:0; margin:0; font-size:15px; color:var(--muted)}
.proof li{display:flex; align-items:center; gap:8px}
.proof li::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--cool)}

.thermo{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:28px; display:grid; gap:22px; min-width:0}
.thermo-row{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border-radius:12px; overflow:hidden}
.temp{background:var(--surface); padding:18px 16px; display:grid; gap:2px}
.temp small{font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.temp b{font-family:var(--f-mono); font-weight:500; font-size:clamp(34px,4vw,46px); line-height:1.1; font-variant-numeric:tabular-nums}
.temp.out b{color:var(--warm)} .temp.in b{color:var(--cool)}
.gauge{height:8px; border-radius:99px; background:linear-gradient(90deg,var(--cool),var(--warm)); position:relative}
.gauge::after{content:""; position:absolute; left:36%; top:50%; width:18px; height:18px; transform:translate(-50%,-50%); border-radius:50%; background:var(--surface); border:3px solid var(--cool)}
.scale{display:flex; justify-content:space-between; font-family:var(--f-mono); font-size:11px; color:var(--muted); margin-top:-12px}
.thermo p{font-size:15px; color:var(--muted)}

/* Sections */
section.block{padding-block:clamp(56px,8vw,96px); border-top:1px solid var(--line); display:grid; gap:36px}
.block-head{display:grid; gap:12px; max-width:680px}
.block-head h2{font-weight:600; font-size:clamp(28px,3.8vw,42px); line-height:1.1; letter-spacing:-.02em}
.block-head p{color:var(--muted)}

.services{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}
.svc{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:28px; display:grid; gap:12px; align-content:start; min-width:0}
.svc svg{width:36px; height:36px}
.svc h3{font-weight:600; font-size:22px; letter-spacing:-.01em}
.svc p{color:var(--muted)}
.svc ul{list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.svc li{font-size:14px; background:var(--cool-soft); padding:4px 12px; border-radius:99px}

.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); counter-reset:s; border-top:2px solid var(--ink)}
.steps li{counter-increment:s; padding:20px 20px 0 0; display:grid; gap:8px; align-content:start; min-width:0}
.steps li::before{content:counter(s,decimal-leading-zero); font-family:var(--f-mono); font-size:13px; color:var(--cool)}
.steps h3{font-size:19px; font-weight:600}
.steps p{color:var(--muted); font-size:16px}

/* Demande de devis */
.quote{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(24px,5vw,64px); align-items:start}
form{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:clamp(20px,3vw,32px); display:grid; gap:20px; min-width:0}
fieldset{border:0; padding:0; margin:0; display:grid; gap:10px}
legend{font-weight:600; margin-bottom:10px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips label{position:relative}
.chips input{position:absolute; opacity:0; inset:0}
.chips span{display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border:1px solid var(--line); border-radius:99px; cursor:pointer; font-size:15px; background:var(--bg)}
.chips input:checked + span{background:var(--cool); color:var(--on-cool); border-color:var(--cool)}
.chips input:focus-visible + span{outline:3px solid var(--cool); outline-offset:2px}
.field{display:grid; gap:6px}
.field label{font-weight:600; font-size:15px}
.field input, .field textarea{font:16px var(--f-body); color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:12px 14px; min-height:48px; width:100%}
.field textarea{min-height:96px; resize:vertical}
.field input:focus, .field textarea:focus{border-color:var(--cool); outline:none; box-shadow:0 0 0 3px var(--cool-soft)}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.preview{font-family:var(--f-mono); font-size:13px; line-height:1.55; white-space:pre-wrap; background:var(--bg); border:1px dashed var(--line); border-radius:10px; padding:14px; color:var(--muted); overflow-wrap:anywhere}
.form-actions{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.status{font-size:14px; color:var(--cool); min-height:20px}

/* FAQ */
.faq{display:grid; gap:0; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:16px; align-items:center; padding-block:20px; font-family:var(--f-display); font-weight:600; font-size:clamp(18px,2vw,21px)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--f-mono); font-size:22px; color:var(--cool); flex:none}
.faq details[open] summary::after{content:"–"}
.faq .answer{padding-bottom:22px; color:var(--muted); max-width:70ch; display:grid; gap:10px}

.tips{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.tip{border-left:2px solid var(--cool); padding:4px 0 4px 18px; display:grid; gap:6px; min-width:0}
.tip b{font-family:var(--f-mono); font-weight:500; font-size:26px; font-variant-numeric:tabular-nums}
.tip p{color:var(--muted); font-size:16px}

/* Contact */
.contact{margin-top:clamp(40px,6vw,72px); background:var(--ink); color:var(--bg); border-radius:24px; padding:clamp(28px,5vw,56px); display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:40px; align-items:center}
.contact h2{font-weight:600; font-size:clamp(28px,4vw,46px); line-height:1.06; letter-spacing:-.02em}
.contact p{margin-top:12px; opacity:.8; max-width:44ch}
.lines{display:grid; gap:12px; font-style:normal}
.line{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border:1px solid color-mix(in srgb, var(--bg) 25%, transparent); border-radius:14px; flex-wrap:wrap; min-width:0}
.line small{display:block; font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; opacity:.7}
.line a{color:var(--bg); text-decoration:none; font-family:var(--f-mono); font-size:clamp(16px,2vw,20px); overflow-wrap:anywhere}
.copy{background:transparent; color:var(--bg); border:1px solid color-mix(in srgb, var(--bg) 40%, transparent); border-radius:99px; min-height:40px; padding:0 14px; font:500 14px var(--f-body); cursor:pointer}
.copy:hover{background:color-mix(in srgb, var(--bg) 14%, transparent)}

footer{margin-top:40px; padding-top:20px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; font-size:14px; color:var(--muted)}

/* Barre d'appel mobile */
.callbar{display:none; position:fixed; left:0; right:0; bottom:0; z-index:15; padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px)); background:var(--surface); border-top:1px solid var(--line); gap:10px}
.callbar .btn{flex:1}

@media (max-width:860px){
  .hero, .contact, .quote{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:24px}
  .tips{grid-template-columns:minmax(0,1fr)}
  .top ul li:not(:last-child){display:none}
  .callbar{display:flex}
}
@media (min-width:861px){ body{padding-block-end:40px} }
@media (max-width:560px){
  .services, .steps, .row2{grid-template-columns:minmax(0,1fr)}
  .top ul{display:none}
}
@media (prefers-reduced-motion:no-preference){
  .gauge::after{animation:slide 2.4s cubic-bezier(.4,0,.2,1) .3s both}
  @keyframes slide{from{left:88%; border-color:var(--warm)}to{left:36%}}
}

/* Pages prestations */
.crumbs{padding-block:20px 0; font-size:14px; color:var(--muted)}
.crumbs ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.crumbs li+li::before{content:"/"; margin-right:6px; color:var(--line)}
.crumbs a{color:var(--muted)}
.page-hero{padding-block:clamp(32px,6vw,72px) clamp(32px,5vw,56px); display:grid; gap:20px; max-width:820px}
.page-hero h1{font-weight:600; font-size:clamp(32px,5vw,54px); line-height:1.06; letter-spacing:-.025em}
.page-hero .lead{font-size:clamp(17px,1.6vw,19px); color:var(--muted); max-width:62ch}
.summary{background:var(--cool-soft); border-radius:16px; padding:22px 24px; display:grid; gap:8px; max-width:820px}
.summary b{font-family:var(--f-display); font-size:18px}
.summary ul{margin:0; padding-left:20px; display:grid; gap:4px}
.prose{display:grid; gap:40px; max-width:760px; padding-block:clamp(40px,6vw,72px)}
.prose section{display:grid; gap:14px}
.prose h2{font-weight:600; font-size:clamp(24px,3vw,32px); line-height:1.15; letter-spacing:-.015em}
.prose p, .prose li{color:var(--muted)}
.prose strong{color:var(--ink); font-weight:600}
.prose ul{margin:0; padding-left:20px; display:grid; gap:6px}
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:12px}
table{border-collapse:collapse; width:100%; min-width:520px; font-size:15px; background:var(--surface)}
th,td{text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top}
th{font-family:var(--f-display); font-weight:600; color:var(--ink)}
td{color:var(--muted)}
tr:last-child td{border-bottom:0}
.related{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.related a{display:grid; gap:6px; padding:20px; background:var(--surface); border:1px solid var(--line); border-radius:14px; text-decoration:none; color:var(--ink); min-width:0}
.related a:hover{border-color:var(--cool)}
.related span{color:var(--muted); font-size:15px}
.related b{font-family:var(--f-display); font-size:18px}
.svc h3 a{color:inherit; text-decoration:none}
.svc h3 a::after{content:" →"; color:var(--cool)}
.svc{position:relative}
.svc h3 a::before{content:""; position:absolute; inset:0; border-radius:16px}
.svc:hover{border-color:var(--cool)}
.updated{font-size:14px; color:var(--muted)}
@media (max-width:860px){ .related{grid-template-columns:minmax(0,1fr)} }

.logo-svg{height:34px; width:auto; display:block}
.illus{display:block; width:100%; height:auto; max-width:100%}
.page-hero2{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:clamp(24px,5vw,56px); align-items:center}
.page-illus{min-width:0}
.midcta{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--warm); border-radius:16px; padding:20px 24px}
.midcta b{font-family:var(--f-display); font-size:20px; color:var(--ink)}
.midcta p{margin:4px 0 0}
@media (max-width:860px){ .page-hero2{grid-template-columns:minmax(0,1fr)} .page-illus{max-width:420px} }
.top ul a.btn-primary{color:var(--on-cool)}
.photo{display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:16px; background:var(--cool-soft)}
.cities{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px}
.cities li{background:var(--surface); border:1px solid var(--line); border-radius:99px; padding:8px 16px; font-weight:500; font-size:15px; color:var(--ink)}

/* En-tête fixe pleine largeur */
html,body{overflow-x:clip}
.top{width:100vw; margin-inline:calc(50% - 50vw); padding-inline:max(16px, calc((100vw - 1120px) / 2)); box-sizing:border-box}

@media (prefers-reduced-motion:no-preference){
  .page-illus .photo{animation:pzoom 1.2s cubic-bezier(.2,.7,.2,1) both}
  @keyframes pzoom{from{opacity:0; transform:scale(1.04)}}
  .page-hero > *{animation:prise .9s cubic-bezier(.2,.7,.2,1) both} .page-hero > :nth-child(2){animation-delay:.1s} .page-hero > :nth-child(3){animation-delay:.2s} .page-hero > :nth-child(4){animation-delay:.3s}
  @keyframes prise{from{opacity:0; transform:translateY(16px)}}
  .related a, .midcta{transition:transform .3s, box-shadow .3s} .related a:hover{transform:translateY(-3px); box-shadow:0 12px 30px -18px rgba(15,29,36,.35)}
  .btn{transition:transform .2s, filter .2s} .btn:hover{transform:translateY(-1px)}
}
.todo{background:#FFF1DC; color:#8A4B0F; border-radius:4px; padding:0 4px; font-weight:600}
.legal h1{font-weight:600; font-size:clamp(30px,4.5vw,46px); line-height:1.08; letter-spacing:-.02em}
/* Survol de l'en-tête fixe (pages internes) */
.top ul a:not(.btn){position:relative; transition:color .2s}
.top ul a:not(.btn)::after{content:""; position:absolute; left:50%; right:50%; bottom:4px; height:2px; border-radius:2px; background:var(--warm); transition:left .25s ease, right .25s ease}
.top ul a:not(.btn):hover{color:var(--cool)}
.top ul a:not(.btn):hover::after, .top ul a:not(.btn):focus-visible::after{left:0; right:0}
.top ul a.btn-primary:hover{transform:translateY(-1px); box-shadow:0 8px 20px -8px rgba(43,106,110,.6)}


/* Bouton Devis gratuit (mobile) */
.btn-devis{display:none; flex:none; align-items:center; justify-content:center; min-height:46px; padding:0 14px; border-radius:999px; background:var(--warm); color:#14100C !important; font:600 14px var(--f-body); text-decoration:none; white-space:nowrap}
.btn-devis:hover{filter:brightness(1.06)}
@media (max-width:860px){ .btn-devis{display:inline-flex} }
@media (max-width:560px){ .logo-svg{height:28px} .top .btn-primary{padding:0 13px} }
/* Menu hamburger (mobile) */
.burger{display:none; flex:none; width:46px; height:46px; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); cursor:pointer; padding:0}
.burger path{transition:transform .25s ease, opacity .2s; transform-origin:12px 12px}
.burger[aria-expanded="true"] .b1{transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] .b2{opacity:0}
.burger[aria-expanded="true"] .b3{transform:translateY(-5px) rotate(-45deg)}
.mnav{position:fixed; left:0; right:0; z-index:30; background:var(--bg); border-bottom:1px solid var(--line); box-shadow:0 18px 40px -20px rgba(15,29,36,.45); padding:6px 20px 20px; display:grid; max-height:calc(100vh - 70px); overflow-y:auto; animation:mnin .22s ease}
.mnav a{display:block; padding:15px 2px; border-bottom:1px solid var(--line); color:var(--ink); text-decoration:none; font-weight:600; font-size:17px}
.mnav a:hover{color:var(--cool)}
.mnav a.btn{border-bottom:0; margin-top:14px; text-align:center; justify-content:center; color:var(--on-cool)}
@keyframes mnin{from{opacity:0; transform:translateY(-8px)}}
@media (max-width:860px){ .burger{display:inline-flex} }
@media (min-width:861px){ .mnav{display:none !important} }
@media (prefers-reduced-motion:reduce){ .mnav{animation:none} .burger path{transition:none} }
@media (max-width:860px){ .top{gap:8px} .top nav{margin-left:auto} }
@media (max-width:560px){ .top ul{display:flex} .top ul li:not(:last-child){display:none} .top ul .t{display:none} }

@media (max-width:400px){ .logo-svg{height:24px} .btn-devis, .links a.btn-devis{padding:0 11px; font-size:13px; min-height:42px} .links{gap:6px} .top{gap:6px} .burger{width:42px; height:42px} .top .btn-primary, .links .btn-primary{padding:0 11px; min-height:42px} }
/* Liste des communes dans les pages (pastilles compactes) */
.prose ul.cities{display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:4px 0; list-style:none}
.prose ul.cities li{display:inline-flex; width:auto; padding:6px 14px; font-size:15px; font-weight:500; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:99px}
.mnav[hidden], [hidden]{display:none !important}