/* ================================================================
   pompe-a-chaleur-vallee-de-joux.ch — registre « Guillochage & givre »
   Givre bleuté · graphite · vert du Risoud · cuivre de four · bleu de givre
   Peau : LE TRAIT — zéro rayon, zéro ombre, un filet de repère en tête de bloc
   Motif : le guillochage soleil — PREMIER motif CONIQUE du réseau
================================================================ */
@font-face{font-family:'Outfit';font-weight:100 900;font-display:swap;src:url(/fonts/outfit-var.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-weight:400;font-display:swap;src:url(/fonts/manrope-400.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-weight:700;font-display:swap;src:url(/fonts/manrope-700.woff2) format('woff2')}
@font-face{font-family:'PlexMono';font-weight:600;font-display:swap;src:url(/fonts/plexmono-600.woff2) format('woff2')}

:root{
  --bg:#e8ebf1;--bg2:#f3f5f9;
  --enc:#14171d;--enc2:#3a4048;--mut:#5d646e;
  /* le CTA : vert du Risoud — le vert le plus sombre du réseau, blanc à 11,5:1 */
  --pru:#14402e;--pru-cl:#1d5b41;
  /* les chiffres : cuivre de four, 5,2:1 sur le givre · l'accent froid : bleu de givre */
  --amb:#c46216;--amb-t:#9c4a10;--bis:#1f5f86;
  --line:#c8cfda;--ok:#1f6b45;
  --bord:#8d97a6;--nuit:#1b1f27;--nuit2:#111419;
  /* LE MOTIF — deux nappes de FAMILLES différentes, ce qui est le premier du réseau :
     les quatorze sites précédents superposent deux nappes du même type (linéaire sur
     linéaire, radiale sur radiale, losange sur losange). Ici une nappe CONIQUE (le
     guillochage soleil d'un cadran, 96 rayons) sur une trame linéaire de givre à 45°.
     Une conique ne se répète pas d'elle-même : c'est `background-size` qui la carrèle. */
  --guill:repeating-conic-gradient(from 0deg at 50% 50%,rgba(20,23,29,.085) 0deg 1.4deg,transparent 1.4deg 3.75deg);
  --givre:repeating-linear-gradient(45deg,rgba(31,95,134,.10) 0 1px,transparent 1px 13px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg2);color:var(--enc);font-family:'Manrope',system-ui,sans-serif;font-size:16px;line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:var(--amb-t)}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:var(--enc);padding:10px 16px;z-index:200}
.skip:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--bis);outline-offset:2px}
/* la peau « LE TRAIT » : un filet de repère de 4 px en tête de chaque bloc.
   Zéro ombre, zéro flou, zéro rayon — la profondeur vient de l'épaisseur du trait,
   jamais d'un dégradé. C'est la peau la plus dépouillée du réseau, et elle est
   cohérente avec la région : ici on fabrique des instruments de précision.
   ⚠️ `.card` et `.pum-card` sont exclues : elles portent déjà `.beam`, qui EST leur
   filet de tête. Les doubler produisait une barre de 8 px (vu au premier essai). */
.chip,.col-etape,.stat,.step,.faq-item,.art-card,.poste,.fiche div,.communes-grid a,.avi{position:relative}
.chip::after,.col-etape::after,.stat::after,.step::after,.faq-item::after,.art-card::after,.poste::after,.fiche div::after,.communes-grid a::after,.avi::after{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:var(--pru);pointer-events:none;transition:background .2s,height .2s}
.chip:hover::after,.col-etape:hover::after,.stat:hover::after,.step:hover::after,.faq-item:hover::after,.art-card:hover::after,.poste:hover::after,.fiche div:hover::after,.communes-grid a:hover::after{background:var(--amb-t);height:6px}
.wrap{width:min(1240px,100%);margin:0 auto;padding-left:26px;padding-right:26px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------------- header ---------------- */
.site-head{position:sticky;top:0;z-index:80;display:flex;align-items:center;gap:20px;padding:12px 26px;background:rgba(243,245,249,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);transition:border-color .25s}
.site-head.scrolle{border-bottom-color:var(--bis)}
.logo{font-family:'Outfit';font-weight:900;font-size:20.5px;color:var(--enc);text-decoration:none;white-space:nowrap}
.logo-p{color:var(--amb-t)}
.nav{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap}
.nav a{color:var(--enc2);text-decoration:none;font-size:14px;font-weight:700;padding:8px 11px;transition:background .18s,color .18s,transform .18s}
.nav a:hover{background:rgba(20,64,46,.09);color:var(--pru);transform:translateY(-1px)}
.nav a.on{color:var(--amb-t)}
.head-cta{font-weight:700;font-size:14px;color:#fff;text-decoration:none;background:linear-gradient(135deg,var(--pru-cl),var(--pru));padding:10px 18px;white-space:nowrap;border-bottom:2px solid var(--bis);transition:transform .18s,background .18s}
.head-cta:hover{transform:translateY(-2px);background:var(--pru-cl)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.burger span{width:24px;height:2.5px;background:var(--enc);transition:transform .25s,opacity .25s}
@media (max-width:1080px){
  .nav{position:fixed;inset:57px 0 auto 0;background:rgba(243,245,249,.98);backdrop-filter:blur(14px);flex-direction:column;padding:18px 26px 24px;gap:4px;border-bottom:1px solid var(--line);transform:translateY(-130%);transition:transform .3s ease;margin:0}
  .nav.ouvert{transform:none}
  .nav a{font-size:16px;padding:12px 10px}
  .burger{display:flex}
  .burger.x span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .burger.x span:nth-child(2){opacity:0}
  .burger.x span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  .head-cta{margin-left:auto}
}

/* ---------------- hero : calques de matière ---------------- */
.hero{position:relative;overflow:hidden;background:var(--bg);isolation:isolate}
.hero-max{min-height:92vh;display:flex;align-items:center}
.hero-page{padding:8px 0 20px}
.foyers{position:absolute;inset:-10%;z-index:1;pointer-events:none;will-change:transform}
.foyers i{position:absolute;border-radius:50%;will-change:transform;backface-visibility:hidden;transform:translateZ(0)}
.f1{width:52vw;height:44vw;right:-14%;top:-20%;background:radial-gradient(closest-side,rgba(196,98,22,.4),rgba(196,98,22,.13) 55%,transparent 75%);filter:blur(64px);animation:d1 23s ease-in-out infinite alternate}
.f2{width:38vw;height:34vw;right:6%;bottom:-18%;background:radial-gradient(closest-side,rgba(29,91,65,.34),rgba(29,91,65,.1) 55%,transparent 75%);filter:blur(70px);animation:d2 13s ease-in-out infinite alternate}
.f3{width:44vw;height:38vw;left:-12%;top:-14%;background:radial-gradient(closest-side,rgba(31,95,134,.34),rgba(31,95,134,.11) 55%,transparent 75%);filter:blur(66px);animation:d3 31s ease-in-out infinite alternate}
.f4{width:30vw;height:26vw;left:24%;bottom:-14%;background:radial-gradient(closest-side,rgba(200,207,218,.6),transparent 70%);filter:blur(60px);animation:d4 19s ease-in-out infinite alternate}
@keyframes d1{to{transform:translate(-5vw,6vh) scale(1.12)}}
@keyframes d2{to{transform:translate(3vw,-5vh) scale(1.08)}}
@keyframes d3{to{transform:translate(5vw,4vh)}}
@keyframes d4{to{transform:translate(-4vw,-3vh) scale(1.1)}}
/* motif du métier : « le bisse et la pente » — deux nappes, deux angles */
.motif{position:absolute;inset:-4%;z-index:2;pointer-events:none;opacity:.62;background-image:var(--guill),var(--givre);background-size:244px 244px,auto;background-position:0 0,0 0;animation:guillDerive 59s ease-in-out infinite alternate;will-change:background-position;mask-image:radial-gradient(140% 110% at 60% 30%,#000 40%,transparent 85%);-webkit-mask-image:radial-gradient(140% 110% at 60% 30%,#000 40%,transparent 85%)}
@keyframes guillDerive{to{background-position:-187px -103px,-71px -158px}}
.motes{position:absolute;z-index:2;right:0;top:0;bottom:0;width:58%;pointer-events:none;overflow:hidden}
.motes i{position:absolute;bottom:-6%;border-radius:50%;background:radial-gradient(circle,rgba(196,98,22,.4) 12%,rgba(196,98,22,.12) 46%,transparent 72%);animation:mote linear infinite;will-change:transform,opacity}
@keyframes mote{0%{transform:translateY(0);opacity:0}12%{opacity:.7}80%{opacity:.35}100%{transform:translateY(-92vh);opacity:0}}
.voile{position:absolute;inset:0;z-index:3;background:linear-gradient(96deg,rgba(232,235,241,.94) 0%,rgba(232,235,241,.82) 26%,rgba(232,235,241,.36) 55%,rgba(232,235,241,.06) 80%);pointer-events:none}
.grain{position:absolute;inset:0;z-index:4;opacity:.14;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.74' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .3 0 0 0 0 .19 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
.halo{position:absolute;z-index:5;right:2%;top:10%;width:48%;height:78%;pointer-events:none;will-change:transform}
.halo i{position:absolute;inset:0;will-change:transform,opacity}
.halo .h1{background:radial-gradient(closest-side,rgba(196,98,22,.38),transparent 70%);animation:haloResp 8.6s ease-in-out infinite alternate}
.halo .h2{inset:14%;background:radial-gradient(closest-side,rgba(243,245,249,.7),transparent 70%);animation:haloResp 6.2s ease-in-out infinite alternate-reverse}
@keyframes haloResp{from{transform:scale(.94);opacity:.75}to{transform:scale(1.05);opacity:1}}
.hero-grid{position:relative;z-index:7;display:grid;grid-template-columns:1.15fr 1fr;gap:52px;align-items:center;padding-top:56px;padding-bottom:56px}

/* ---------------- hero : texte ---------------- */
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:'PlexMono';font-weight:600;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--bis);border:1px solid rgba(255,255,255,.9);padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.62);backdrop-filter:blur(8px)}
.eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--amb)}
.hero h1{font-family:'Outfit';font-size:clamp(35px,4.9vw,62px);line-height:.98;margin:20px 0 14px;text-wrap:balance}
.hero-page h1{font-size:clamp(31px,3.85vw,49px)}
.hero h1 .l{display:block}
.hero h1 .thin{font-weight:200;color:var(--enc2)}
.hero h1 .fat{font-weight:900}
.hero h1 .fat b{color:var(--amb-t);font-weight:900}
.rv{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.rvi{display:inline-block;transform:translateY(115%);animation:rvUp .75s cubic-bezier(.2,.85,.25,1) forwards;animation-delay:calc(var(--d)*1ms)}
@keyframes rvUp{to{transform:none}}
.fini .rvi{transform:none!important;animation:none!important}
.sub{color:var(--enc2);max-width:50ch;font-size:16.5px;margin-bottom:22px}
.live{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.chip{background:rgba(255,255,255,.66);backdrop-filter:blur(12px) saturate(1.15);border:1px solid var(--line);padding:12px 18px;transition:transform .18s}
.chip:hover{transform:translateY(-3px)}
.chip small{display:block;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-bottom:2px}
.chip b{font-family:'PlexMono';font-weight:600;font-size:19px;color:var(--enc);font-variant-numeric:tabular-nums}
.chip.a b{color:var(--amb-t)}
.chip.flash{animation:flashA 1s ease}
@keyframes flashA{0%{background-color:rgba(196,98,22,.3)}100%{background-color:rgba(255,255,255,.66)}}
.srcline{font-size:12px;color:var(--mut);margin-bottom:18px;max-width:52ch}
.trust{list-style:none;display:grid;gap:9px;font-size:14.5px;color:var(--enc2)}
.trust li{display:flex;gap:9px;align-items:baseline}
.trust li::before{content:'✓';font-weight:800;color:var(--ok)}
.warn{margin-top:14px;display:none;gap:9px;border:1px solid rgba(196,98,22,.5);border-left:3px solid var(--amb-t);background:rgba(250,243,235,.92);padding:10px 13px;font-size:13px;color:var(--amb-t);max-width:54ch}
.warn.on{display:flex;animation:flashA 1.1s ease}
/* l'alerte vit dans la colonne texte en desktop, dans la carte en empilé */
.warn-carte{margin:0 0 12px;max-width:none}
@media (min-width:1081px){.warn-carte{display:none!important}}
@media (max-width:1080px){.warn-col{display:none!important}}

/* ---------------- la carte de devis ---------------- */
.cardwrap{position:relative;will-change:transform}
.card{position:relative;background-color:rgba(255,255,255,.74);background-image:var(--guill),var(--givre);background-size:244px 244px,auto;border:1px solid var(--line);padding:24px 24px 22px;backdrop-filter:blur(10px) saturate(1.1)}
.card>*{position:relative;z-index:2}
/* le « beam » du pilote devient un fil de bisse rectiligne, en trois segments */
.beam{position:absolute;left:0;right:0;top:0;height:4px;z-index:3;background:linear-gradient(90deg,var(--pru) 0 34%,var(--bis) 34% 67%,var(--amb) 67% 100%);pointer-events:none}
.sheenbox{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.sheenbox i{position:absolute;top:-12%;bottom:-12%;left:-58%;width:44%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.06) 42%,rgba(255,255,255,.45) 50%,rgba(196,98,22,.1) 58%,transparent);transform:skewX(-12deg);animation:sheen 7s ease-in-out infinite;will-change:transform}
@keyframes sheen{0%,52%{transform:translateX(0) skewX(-12deg)}88%,100%{transform:translateX(420%) skewX(-12deg)}}
.card h3{font-family:'Outfit';font-weight:900;font-size:20.5px;margin-bottom:2px}
.mini{font-family:'PlexMono';font-weight:600;font-size:13px;color:var(--amb-t);margin-bottom:16px;min-height:18px;font-variant-numeric:tabular-nums}
.fld{margin-bottom:13px}
.h-t{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--enc2);margin-bottom:8px}
.h-t output{font-family:'PlexMono';font-weight:600;font-size:15px;color:var(--amb-t)}
input[type=range]{width:100%;appearance:none;height:6px;background:linear-gradient(90deg,var(--bis) var(--fill,40%),#d5dce6 var(--fill,40%));cursor:pointer}
input[type=range]::-webkit-slider-thumb{appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--bis);transition:transform .15s,box-shadow .3s}
input[type=range]:active::-webkit-slider-thumb,input[type=range]:focus::-webkit-slider-thumb{box-shadow:0 0 0 8px rgba(31,95,134,.18)}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}
input[type=range]::-moz-range-thumb{width:19px;height:19px;border-radius:50%;background:#fff;border:3px solid var(--bis)}
.puces{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.puces button{font-family:'Manrope';font-size:12.5px;font-weight:700;color:var(--enc2);background:rgba(255,255,255,.78);border:1px solid var(--bord);padding:9px 4px;cursor:pointer;transition:all .18s;min-width:0}
.puces button:hover{transform:translateY(-2px);border-color:var(--bis)}
.puces button.on{background:rgba(20,64,46,.09);border-color:var(--pru);color:var(--pru);box-shadow:0 0 0 1px var(--pru);animation:pop .28s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{0%{transform:scale(.94)}100%{transform:scale(1)}}
.sep{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin:16px 0 12px}
.sep::before,.sep::after{content:'';flex:1;height:1px;background:var(--line)}
.idgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:10px}
.idgrid .full{grid-column:1/-1}
.idgrid>*{min-width:0}
.h-in{width:100%;font-family:'Manrope';font-size:14.5px;color:var(--enc);background:rgba(255,255,255,.82);border:1px solid var(--bord);padding:12px 14px;transition:border-color .18s,box-shadow .18s,background .18s}
.h-in:hover{border-color:var(--bis)}
.h-in:focus{border-color:var(--bis);background:#fff;box-shadow:0 0 0 3px rgba(31,95,134,.2);outline:none}
.h-in::placeholder{color:#8894a3}
textarea.h-in{resize:none;min-height:58px;line-height:1.5}
.hpot{position:absolute;left:-9999px;opacity:0}
.cta{display:block;width:100%;text-align:center;font-family:'Manrope';font-weight:700;font-size:16px;color:#fff;background:var(--pru);border:none;border-bottom:2px solid var(--bis);padding:15px 22px;cursor:pointer;text-decoration:none;transition:transform .18s,background .18s}
.cta:hover{transform:translateY(-2px);background:var(--pru-cl)}
.cta .fl{display:inline-block;transition:transform .18s}
.cta:hover .fl{transform:translateX(4px)}
.cta[disabled]{opacity:.6;cursor:wait;transform:none}
.alt{text-align:center;font-size:13px;color:var(--enc2);margin-top:11px}
.alt a{color:var(--amb-t);text-decoration:none;font-weight:700}
.lpd{font-size:11px;color:var(--mut);text-align:center;margin-top:8px}
.lpd a{color:var(--mut)}
.ok-msg{margin-top:12px;text-align:center;font-weight:700;color:var(--ok);background:rgba(31,107,69,.1);border:1px solid rgba(31,107,69,.4);padding:11px}
/* --- signature : « les trois étages du Valais central », sans aucun JS --- */
/* ---------------- SIGNATURE : la courbe des heures froides ----------------
   Trois barres proportionnelles à l'année réelle, pas à une impression. La dernière
   — les jours sous −10 °C — est minuscule, et c'est tout l'argument : l'objection
   « il fait −20 chez nous » porte sur un record, la facture se paie sur une
   distribution. Les largeurs viennent de `--p`, écrit en dur par Python.
   ⚠️ `.hach` = les hauts habités, qui n'ont AUCUNE station de mesure. La hachure
   est le « non déterminable » assumé du réseau depuis le #6 : on DESSINE ce qu'on
   ne sait pas, on ne le devine pas. */
.frd{margin:15px 0 2px}
.frd-t{display:block;font-family:'PlexMono';font-weight:600;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--mut);margin-bottom:7px}
/* la barre est STRICTEMENT proportionnelle : aucune largeur minimale, aucun texte
   dedans. Tout l'argument du bloc est que le dernier segment est minuscule — une
   largeur de confort le gonflerait de sept fois et retournerait le sens du dessin. */
.frd-barre{display:flex;height:26px;border:1.5px solid var(--bord);background:rgba(255,255,255,.62);overflow:hidden}
.frd-barre .b{flex:0 0 auto;width:calc(var(--p) * 1%);min-width:0}
.frd-barre .b + .b{border-left:1.5px solid var(--bord)}
.b-doux{background:rgba(255,255,255,.5)}
.b-gel{background:rgba(31,95,134,.22)}
.b-fort{background:var(--amb-t)}
/* les nombres vivent SOUS la barre : c'est ce qui permet à la barre de rester juste */
.frd-leg{list-style:none;display:flex;flex-wrap:wrap;gap:4px 14px;margin:7px 0 0}
.frd-leg li{position:relative;padding-left:13px;font-size:11px;line-height:1.35;color:var(--mut)}
.frd-leg li::before{content:'';position:absolute;left:0;top:3px;width:8px;height:8px;border:1.5px solid var(--bord)}
.l-doux::before{background:#fff}
.l-gel::before{background:rgba(31,95,134,.45)}
.l-fort::before{background:var(--amb-t)}
.frd-leg b{font-family:'Outfit';font-weight:900;font-size:14px;color:var(--enc)}
.l-gel b{color:var(--bis)}
.l-fort b{color:var(--amb-t)}
.hach{background-image:repeating-linear-gradient(45deg,rgba(20,23,29,.30) 0 2px,transparent 2px 6px)}
.frd-p{font-size:11.5px;line-height:1.45;color:var(--mut);margin-top:8px}
.frd-src{font-size:10.5px;line-height:1.4;color:var(--mut);margin-top:5px;font-style:italic}
.frd-src.hach{background:none;padding-left:13px;position:relative}
.frd-src.hach::before{content:'';position:absolute;left:0;top:4px;width:8px;height:8px;background-image:repeating-linear-gradient(45deg,rgba(20,23,29,.5) 0 1.5px,transparent 1.5px 4px);border:1px solid var(--bord)}

/* ---------------- sections ---------------- */
.sec{padding:64px 0}
.sec-tinte{background:var(--bg);position:relative}
.sec-tinte::before{content:'';position:absolute;inset:0;opacity:.55;pointer-events:none;background-image:var(--guill),var(--givre);background-size:244px 244px,auto}
.sec-tinte>.wrap{position:relative;z-index:1}
.sec h2{font-family:'Outfit';font-weight:800;font-size:clamp(26px,3.1vw,39px);line-height:1.08;margin-bottom:14px;text-wrap:balance}
/* le repère : un segment de bisse, coupé par la prise d'eau */
.sec h2::before,.article h2::before{content:'';display:block;width:22px;height:6px;margin-bottom:9px;background:linear-gradient(var(--bis),var(--bis)) 0 2px/22px 2px no-repeat,linear-gradient(var(--amb-t),var(--amb-t)) 8px 0/2px 6px no-repeat}
.lead{color:var(--enc2);max-width:68ch;margin-bottom:26px;font-size:16.5px}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:8px}
.cols2>*{min-width:0}
.cols2 p{color:var(--enc2)}
.cols2 strong,.lead strong{color:var(--enc)}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:26px 0}
.col-etape{background:#fff;border:1px solid var(--line);padding:22px;transition:transform .18s}
.col-etape:hover{transform:translateY(-4px)}
.col-etape b{font-family:'PlexMono';font-weight:600;color:var(--amb-t);font-size:14px}
.col-etape h3{font-family:'Outfit';font-weight:900;font-size:19.5px;margin:6px 0 8px}
.col-etape p{color:var(--enc2);font-size:14.5px}
.bande{background:linear-gradient(135deg,#33253a,var(--nuit));position:relative;overflow:hidden}
.bande::after{content:'';position:absolute;inset:0;opacity:.7;background-image:var(--guill),var(--givre);background-size:244px 244px,auto}
.bande-in{position:relative;z-index:1;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:16px;padding-bottom:16px;color:#d5dce6;font-weight:700;font-size:14px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px}
.stat{background:#fff;border:1px solid var(--line);padding:18px;text-align:center}
.stat b{display:block;font-family:'PlexMono';font-weight:600;font-size:27px;color:var(--amb-t);font-variant-numeric:tabular-nums}
.stat span{font-size:12.5px;color:var(--mut)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px}
.steps-v{grid-template-columns:1fr;max-width:760px}
.step{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);padding:16px 18px;transition:transform .18s}
.step:hover{transform:translateY(-3px)}
.step b{flex:none;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:var(--pru);color:#fff;font-family:'PlexMono';font-weight:600;font-size:14px}
.step span{font-size:14.5px;color:var(--enc2)}
.step strong{color:var(--enc)}
.encart{border:1px solid rgba(196,98,22,.45);border-left:4px solid var(--amb-t);background:rgba(250,243,235,.9);padding:16px 20px;margin-top:26px}
.encart p{color:var(--amb-t);font-size:14.5px}
.encart a{font-weight:700}

/* prestations (accueil) */
.prestas{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}
.presta{position:relative;display:block;overflow:hidden;text-decoration:none;border-bottom:2px solid var(--bis);transition:transform .22s;isolation:isolate}
.presta:hover{transform:translateY(-5px)}
.presta img{width:100%;height:230px;object-fit:cover;transition:transform .5s ease}
.presta:hover img{transform:scale(1.05)}
.presta-txt{position:absolute;inset:auto 0 0 0;padding:44px 18px 16px;background:linear-gradient(180deg,transparent,rgba(17,20,25,.9) 55%);color:#fff}
.presta-txt b{font-family:'Outfit';font-weight:900;font-size:19.5px;display:block}
.presta-txt span{display:block;font-size:13px;color:#cdd5e0;margin:3px 0 8px}
.presta-txt i{font-style:normal;font-size:13px;font-weight:700;color:#e08a3c}

/* rangée image+texte (pages services) */
.row-img{display:grid;grid-template-columns:.9fr 1.1fr;gap:32px;align-items:center;margin-top:10px}
.row-img>*{min-width:0}
.row-img img{border-bottom:2px solid var(--bis);width:100%;height:100%;max-height:330px;object-fit:cover}
.row-img p{color:var(--enc2);margin-bottom:12px}
.row-img strong{color:var(--enc)}

/* ---------------- plan du site ----------------
   ⚠️ Cette page est une nouveauté v9.12 : elle n'existait pas dans la feuille du pilote,
   et elle n'avait donc AUCUNE règle. Ses listes de liens sortaient de l'écran en dessous
   de 600 px — un débordement invisible sur toutes les autres pages, et qu'aucun contrôle
   automatique ne voit (qa.py mesure le HTML, pas la mise en page).
   Le master impose ici « ancres = les noms, point » : une liste, pas un pavé optimisé. */
.plan-g{margin:0 0 34px}
.plan-g h2{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.plan-g h2 small{font-family:'PlexMono';font-weight:600;font-size:12px;color:var(--mut);
  letter-spacing:.06em}
.plan-g nav{display:flex;flex-wrap:wrap;gap:8px 10px}
.plan-g nav a{display:inline-block;max-width:100%;padding:7px 12px;
  background:#fff;border:1px solid var(--line);border-bottom:2px solid var(--bis);
  color:var(--enc2);text-decoration:none;font-size:14px;line-height:1.25;
  overflow-wrap:anywhere;transition:border-color .18s,color .18s,transform .18s}
.plan-g nav a:hover{color:var(--pru);border-color:var(--pru);transform:translateY(-1px)}
@media (max-width:560px){
  .plan-g nav{gap:6px 8px}
  .plan-g nav a{font-size:13.5px;padding:6px 10px}
}

/* tableaux & postes */
.table-scroll{overflow-x:auto;margin-top:10px}
.tbl-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:22px 0}
.tbl-wrap .tbl{margin:0}
.tbl{width:100%;border-collapse:collapse;background:#fff;overflow:hidden;border:1px solid var(--line);border-bottom:2px solid var(--bis);min-width:560px}
.tbl th{background:var(--nuit);color:#e8ebf1;text-align:left;font-size:13px;letter-spacing:.05em;padding:13px 16px}
.tbl td{padding:13px 16px;border-top:1px solid var(--line);color:var(--enc2);font-size:14.5px}
.tbl td:last-child{font-family:'PlexMono';font-weight:600;color:var(--enc);white-space:nowrap;font-variant-numeric:tabular-nums}
.postes{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:8px}
.poste{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);padding:14px 16px}
.poste b{font-family:'PlexMono';font-weight:600;color:var(--amb-t);font-size:17px;white-space:nowrap}
.poste span{font-size:13.5px;color:var(--enc2)}

/* fiche commune */
.fiche{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.fiche div{background:#fff;border:1px solid var(--line);padding:12px 14px}
.fiche small{display:block;font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--mut)}
.fiche b{font-size:15px}
.communes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin-top:8px}
.communes-grid a{display:flex;justify-content:space-between;align-items:baseline;gap:8px;background:#fff;border:1px solid var(--line);padding:11px 14px;text-decoration:none;color:var(--enc);font-weight:700;font-size:14px;transition:transform .16s,border-color .16s}
.communes-grid a:hover{transform:translateY(-2px);border-color:var(--bis)}
.communes-grid small{font-family:'PlexMono';font-weight:600;font-size:10.5px;color:var(--mut)}

/* FAQ */
.sec-faq{background:var(--bg)}
.faq-list{max-width:820px;margin-top:22px}
.faq-item{background:#fff;border:1px solid var(--line);margin-bottom:12px;transition:border-color .2s}
.faq-item[open]{border-color:var(--bord)}
.faq-item summary{list-style:none;cursor:pointer;padding:16px 46px 16px 18px;font-weight:700;font-size:15.5px;position:relative;transition:color .18s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';position:absolute;right:18px;top:50%;transform:translateY(-50%);font-family:'Outfit';font-weight:200;font-size:26px;color:var(--amb-t);transition:transform .25s}
.faq-item[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq-item summary:hover{color:var(--amb-t)}
.faq-a{padding:0 18px 16px;color:var(--enc2);font-size:14.5px}

/* blog */
.arts{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:24px}
.art-card{display:block;background:#fff;border:1px solid var(--line);padding:22px;text-decoration:none;transition:transform .18s}
.art-card:hover{transform:translateY(-4px)}
.art-card b{font-family:'Outfit';font-weight:900;font-size:19.5px;color:var(--enc);display:block;margin-bottom:8px}
.art-card p{color:var(--enc2);font-size:14px;margin-bottom:10px}
.art-card i{font-style:normal;font-weight:700;font-size:13.5px;color:var(--amb-t)}
.article .wrap-art{max-width:780px}
.article h1{font-family:'Outfit';font-weight:900;font-size:clamp(30px,3.65vw,43px);line-height:1.06;margin-bottom:18px;text-wrap:balance}
.article h2{font-family:'Outfit';font-weight:800;font-size:clamp(21.5px,2.45vw,28px);margin:30px 0 10px}
.article p{color:var(--enc2);margin-bottom:14px}
.article strong{color:var(--enc)}
.art-retour{margin-top:26px;font-weight:700}
.article .art-note{font-size:13.5px;color:var(--mut);border-left:3px solid var(--bis);padding:10px 14px;background:#fff;margin-bottom:18px}

/* CTA final */
.sec-cta{background:linear-gradient(135deg,var(--nuit),var(--nuit2));position:relative;overflow:hidden}
.sec-cta::before{content:'';position:absolute;width:44vw;height:44vw;right:-12%;top:-40%;border-radius:50%;background:radial-gradient(closest-side,rgba(196,98,22,.22),rgba(196,98,22,.08) 48%,transparent 74%);animation:d2 13s ease-in-out infinite alternate}
.sec-cta::after{content:'';position:absolute;inset:0;opacity:.7;background-image:var(--guill),var(--givre);background-size:244px 244px,auto}
.cta-fin{position:relative;z-index:1;text-align:center;padding-top:12px;padding-bottom:12px}
.cta-fin h2{color:#e8ebf1;font-family:'Outfit';font-weight:900;font-size:clamp(26px,3.2vw,39px);margin-bottom:10px}
.cta-fin h2::before{margin:0 auto 11px;background:linear-gradient(#7fa8c6,#7fa8c6) 0 2px/22px 2px no-repeat,linear-gradient(#e08a3c,#e08a3c) 8px 0/2px 6px no-repeat}
.cta-fin p{color:#bcc5d2;max-width:56ch;margin:0 auto 22px}
.cta-lien{display:inline-block;width:auto}
.cta-fin .alt{color:#a3aebd}
.cta-fin .alt a{color:#e08a3c}

/* footer */
.site-foot{background:var(--nuit2);color:#b9c2cf}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1.4fr;gap:36px;padding-top:48px;padding-bottom:30px}
.site-foot .logo{color:#e8ebf1;font-size:22.5px}
.site-foot .logo-p{color:#e08a3c}
.foot-txt{font-size:13.5px;margin-top:10px;color:#a3aebd}
.foot-txt a{color:#d5dce6;text-decoration:none}
.site-foot h4{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#98a3b1;margin-bottom:12px}
.foot-nav{display:grid;gap:7px}
.foot-nav a{color:#b9c2cf;text-decoration:none;font-size:13.5px;transition:color .15s}
.foot-nav a:hover{color:#e08a3c}
.foot-nav-com{grid-template-columns:repeat(2,1fr)}
.foot-legal{border-top:1px solid #1b2b24;padding-top:16px;padding-bottom:22px;font-size:12px;color:#a3aebd}
.foot-legal a{color:#b9c2cf}

/* sticky CTA mobile */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:70;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(243,245,249,.94);backdrop-filter:blur(10px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .3s ease;display:none}
.sticky-cta .cta{width:100%}
.sticky-cta.vu{transform:none}
@media (max-width:760px){.sticky-cta{display:block}}

/* ---------------- popup « Partez avec votre chiffre » ---------------- */
.pum{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(17,20,25,.5);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s ease}
.pum.vu{opacity:1}
.pum-card{position:relative;width:min(430px,100%);background-color:rgba(255,255,255,.95);background-image:var(--guill),var(--givre);background-size:244px 244px,auto;border:1px solid var(--line);padding:24px;transform:translateY(18px) scale(.97);transition:transform .35s cubic-bezier(.2,1.1,.3,1)}
.pum.vu .pum-card{transform:none}
/* la popup n'a pas d'élément .beam : on lui pose le même fil de bisse */
.pum-card::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;z-index:3;background:linear-gradient(90deg,var(--pru) 0 34%,var(--bis) 34% 67%,var(--amb) 67% 100%);pointer-events:none}
.pum-x{position:absolute;top:10px;right:10px;width:36px;height:36px;border:none;background:none;cursor:pointer;font-size:22px;line-height:1;color:var(--mut);border-radius:50%;transition:background .15s,color .15s;z-index:4}
.pum-x:hover{background:rgba(20,23,29,.08);color:var(--enc)}
.pum-eti{font-family:'PlexMono';font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--bis);margin-bottom:8px}
.pum-card h3{font-family:'Outfit';font-weight:900;font-size:23.5px;line-height:1.12;margin-bottom:6px}
.pum-chiffre{font-family:'PlexMono';font-weight:600;font-size:15px;color:var(--amb-t);background:rgba(196,98,22,.1);border:1px solid rgba(196,98,22,.4);padding:9px 13px;margin:10px 0 6px;font-variant-numeric:tabular-nums}
.pum-p{font-size:13.5px;color:var(--enc2);margin-bottom:14px}
.pum-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:11px}
.pum-grid>*{min-width:0}
.pum-full{grid-column:1/-1}
.pum-grid textarea{resize:none;min-height:52px;line-height:1.45}
.pum-card .lpd{margin-top:9px}
.pum-ok{text-align:center;padding:16px 0 6px;font-weight:700;color:var(--ok)}
@media (max-width:600px){
  .pum{align-items:flex-end;padding:0}
  .pum-card{width:100%;padding-bottom:calc(24px + env(safe-area-inset-bottom));transform:translateY(100%)}
  .pum-card::after{left:0;bottom:0}
}
@media (prefers-reduced-motion:reduce){.pum,.pum-card{transition:none!important}}

/* reveal (classe posée par JS uniquement) */
.js-rev [data-rev]{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.js-rev [data-rev].vu{opacity:1;transform:none}

/* ---------------- responsive ---------------- */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:32px}
  .hero-max{min-height:0}
  .halo{right:-10%;width:80%;top:auto;bottom:0;height:56%}
  /* en empilé, pas de résultat AVANT l'outil : les chips et la ligne source disparaissent,
     le résultat vit dans la carte (ligne ≈ kW · CHF) */
  .hero .live,.hero .srcline{display:none}
  .prestas{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .wrap{padding-left:18px;padding-right:18px}
  /* en-tête : Outfit a l'œil plus grand et la chasse plus étroite — on desserre */
  .site-head{gap:10px;padding:12px 16px}
  .logo{font-size:17px}
  .head-cta{padding:9px 12px;font-size:13px}
  /* le débord du fil d'eau reste sous la marge : aucun défilement horizontal */
  .card::after,.pum-card::after,.chip::after,.col-etape::after,.stat::after,.step::after,.faq-item::after,.art-card::after,.poste::after,.fiche div::after,.communes-grid a::after{left:-10px}
  .card:hover::after,.pum-card:hover::after,.chip:hover::after,.col-etape:hover::after,.stat:hover::after,.step:hover::after,.faq-item:hover::after,.art-card:hover::after,.poste:hover::after,.fiche div:hover::after,.communes-grid a:hover::after{left:-15px}
  .sec{padding:46px 0}
  .hero-grid{padding-top:36px;padding-bottom:40px}
  .cols2,.cols3,.postes,.arts,.row-img{grid-template-columns:1fr}
  .row-img img{max-height:240px}
  .prestas{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .fiche{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr;gap:26px}
  .bande-in{justify-content:flex-start;gap:8px 18px;font-size:13px}
}