/* ================================================================
   pompes-a-chaleur-lausanne.ch — registre « Pente & grès »
   Grès molassique rosé · encre bleu-nuit · carmin lausannois · ocre grès · bleu Léman
   Peau : LA MARCHE — le filet de tête devient un nez de marche, qui s'étend au survol
   Motif : la volée de marches — PREMIER motif à DEGRÉS du réseau, et premier
           dont la nappe maîtresse est un tracé SVG et non un dégradé CSS
   Typo display : Familjen Grotesk (variable, 18,9 Ko) — grotesque suisse, non consommé
================================================================ */
@font-face{font-family:'Familjen';font-weight:400 700;font-display:swap;src:url(/fonts/familjen-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:#f2eae7;--bg2:#f9f4f2;
  --enc:#1c2130;--enc2:#3d4457;--mut:#63697a;
  /* le CTA : carmin lausannois — le PREMIER CTA ROUGE du réseau, blanc à 7,9:1 */
  --pru:#9d1f2e;--pru-cl:#b82b3a;
  /* les chiffres : ocre grès, 6,0:1 sur le grès · l'accent froid : bleu Léman, 6,0:1 */
  --amb:#a8571b;--amb-t:#8a4514;--bis:#1c5f80;
  --line:#ddd0ca;--ok:#1f6b45;
  --bord:#a89a95;--nuit:#1c2130;--nuit2:#141824;
  /* LE MOTIF — la volée de marches.
     Les quinze sites précédents dessinent des ondes, des isothermes, des crêtes, des
     bathymétries, des plis, des rangs, des rotors, des terrasses, des bisses, un
     guillochage. Aucun ne dessine un DEGRÉ — or Lausanne est une ville qui monte :
     500 m entre les rives et les hauts, et des escaliers partout.
     Deux nappes de familles différentes, comme au #15, mais l'inverse : ici la nappe
     maîtresse est un TRACÉ SVG (le profil crénelé d'une volée), et la seconde un
     dégradé CSS (les lignes de nez de marche, période 11 px). Non harmoniques. */
  --march:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16'%3E%3Cpath d='M0 15.25h16V.75h16' fill='none' stroke='%231c2130' stroke-opacity='.17' stroke-width='2'/%3E%3C/svg%3E");
  --nez:repeating-linear-gradient(90deg,rgba(28,95,128,.07) 0 1px,transparent 1px 37px);
}
*{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 « LA MARCHE ».
   Le #15 avait supprimé tout rayon et toute ombre : la profondeur venait d'un filet
   pleine largeur en tête de bloc. Ici on prend le chemin inverse, et c'est délibéré —
   une ville n'est pas un atelier d'horlogerie. Le filet devient un NEZ DE MARCHE :
   il ne court que sur le tiers gauche du bloc, et il s'étend sur toute la largeur au
   survol, comme une marche qu'on gravit. Le rayon revient (6 px, discret), et une
   seule ombre douce, portée bas, tient les cartes au-dessus du grès.
   ⚠️ `.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;border-radius:6px}
.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;width:34%;top:0;height:4px;background:var(--bis);border-radius:6px 0 6px 0;pointer-events:none;transition:width .28s ease,background .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,.avi:hover::after{width:100%;background:var(--pru);border-radius:6px 6px 0 0}
.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:'Familjen';font-weight:700;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(--march),var(--nez);background-size:128px 64px,auto;background-position:0 0,0 0;animation:marcheDerive 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 marcheDerive{to{background-position:-192px -96px,-73px -167px}}
.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:'Familjen';font-weight:700;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(168,87,27,.30)}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;border-radius:10px;box-shadow:0 18px 40px -28px rgba(28,33,48,.45);background-color:rgba(255,255,255,.74);background-image:var(--march),var(--nez);background-size:128px 64px,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:'Familjen';font-weight:700;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 : le témoin de réseau ----------------
   La barre est le PARC de chauffage du secteur, en nombre de bâtiments, strictement
   proportionnelle : aucune largeur minimale, aucun texte dedans. Tout l'argument du
   bloc tient à ce que les segments soient vrais — une largeur de confort retournerait
   le sens du dessin. Les nombres vivent SOUS la barre. Largeurs = `--p`, en dur.
   ⚠️ `.hach` = les secteurs dont le périmètre de raccordement n'est PAS publié. La
   hachure est le « non déterminable » assumé du réseau depuis le #6 : on DESSINE ce
   qu'on ne sait pas. Ici elle est particulièrement due — affirmer à quelqu'un qu'il
   est hors périmètre alors qu'on l'ignore, c'est lui faire engager des travaux
   qu'une commune peut refuser. */
.rsx{margin:15px 0 2px}
.rsx-t{display:block;font-family:'PlexMono';font-weight:600;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--mut);margin-bottom:2px}
.rsx-st{display:block;font-size:10.5px;line-height:1.35;color:var(--mut);margin-bottom:7px}
.rsx-barre{display:flex;height:26px;border:1.5px solid var(--bord);border-radius:3px;background:rgba(255,255,255,.62);overflow:hidden}
.rsx-barre .b{flex:0 0 auto;width:calc(var(--p) * 1%);min-width:0}
.rsx-barre .b + .b{border-left:1.5px solid var(--bord)}
.b-gaz{background:var(--pru)}
.b-mazout{background:var(--amb-t)}
.b-elec{background:#7a6a9e}
.b-cad{background:var(--bis)}
.b-pac{background:var(--ok)}
.b-bois{background:#8a7a52}
.b-autre{background:rgba(28,33,48,.16)}
/* les nombres vivent SOUS la barre : c'est ce qui permet à la barre de rester juste */
.rsx-leg{list-style:none;display:flex;flex-wrap:wrap;gap:4px 14px;margin:7px 0 0}
.rsx-leg li{position:relative;padding-left:13px;font-size:11px;line-height:1.35;color:var(--mut)}
.rsx-leg li::before{content:'';position:absolute;left:0;top:3px;width:8px;height:8px;border:1.5px solid var(--bord)}
.l-gaz::before{background:var(--pru)}
.l-mazout::before{background:var(--amb-t)}
.l-elec::before{background:#7a6a9e}
.l-cad::before{background:var(--bis)}
.l-pac::before{background:var(--ok)}
.l-bois::before{background:#8a7a52}
.l-autre::before{background:rgba(28,33,48,.16)}
.rsx-leg b{font-family:'Familjen';font-weight:700;font-size:14px;color:var(--enc)}
.l-gaz b{color:var(--pru)}
.l-mazout b{color:var(--amb-t)}
.l-cad b{color:var(--bis)}
.l-pac b{color:var(--ok)}
.hach{background-image:repeating-linear-gradient(45deg,rgba(28,33,48,.30) 0 2px,transparent 2px 6px)}
.rsx-p{font-size:11.5px;line-height:1.45;color:var(--mut);margin-top:8px}
.rsx-src{font-size:10.5px;line-height:1.4;color:var(--mut);margin-top:5px;font-style:italic}
.rsx-src.hach{background:none;padding-left:13px;position:relative}
.rsx-src.hach::before{content:'';position:absolute;left:0;top:4px;width:8px;height:8px;background-image:repeating-linear-gradient(45deg,rgba(28,33,48,.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(--march),var(--nez);background-size:128px 64px,auto}
.sec-tinte>.wrap{position:relative;z-index:1}
.sec h2{font-family:'Familjen';font-weight:700;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:'Familjen';font-weight:700;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(--march),var(--nez);background-size:128px 64px,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:'Familjen';font-weight:700;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:'Familjen';font-weight:400;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:'Familjen';font-weight:700;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:'Familjen';font-weight:700;font-size:clamp(30px,3.65vw,43px);line-height:1.06;margin-bottom:18px;text-wrap:balance}
.article h2{font-family:'Familjen';font-weight:700;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(--march),var(--nez);background-size:128px 64px,auto}
.cta-fin{position:relative;z-index:1;text-align:center;padding-top:12px;padding-bottom:12px}
.cta-fin h2{color:#e8ebf1;font-family:'Familjen';font-weight:700;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;border-radius:10px;box-shadow:0 22px 48px -30px rgba(28,33,48,.5);width:min(430px,100%);background-color:rgba(255,255,255,.95);background-image:var(--march),var(--nez);background-size:128px 64px,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:'Familjen';font-weight:700;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}
}