/* ================================================================
   pompe-a-chaleur-riviera.ch — registre « Terrasses & Léman »
   Tuf calcaire · lie-de-vin de Lavaux · bleu Léman d'hiver
   Motif métier : les murs en terrasses du vignoble (2 nappes, pas coprimes)
   Peau : le SOCLE — chaque bloc repose sur son mur de pierre
================================================================ */
@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{
  --enc:#1f1c17;--enc2:#4f4739;--mut:#736a58;
  /* l'or du coteau (accent, CTA, chiffres) et l'indigo d'avant l'aube (contrepoint froid) */
  --vin:#9a6a16;--vin-c:#b8842a;--lem:#2b3a55;--lem-c:#3f5273;
  --bg:#f3ecdf;--bg2:#fbf7f0;--line:#e2d8c6;--mur:#cdbea3;--ok:#2c7a52;
  --nuit:#191c24;--r:6px;
  /* l'or LISIBLE en texte : var(--vin) plafonne a 4,4 sur creme, sous le seuil AA */
  --or-txt:#7f560e;
  /* LE MOTIF : les strates du coteau, vues de face — une trame fine (les ceps) sur une
     trame large (les murs). Periodes 13 et 71 px : coprimes, donc jamais de battement. */
  --ter:repeating-linear-gradient(180deg,rgba(154,106,22,.09) 0 1px,transparent 1px 13px);
  --ter2:repeating-linear-gradient(180deg,rgba(31,28,23,.09) 0 2px,rgba(31,28,23,.028) 2px 6px,transparent 6px 71px);
  /* LES TROIS SOLEILS : le ciel, le lac qui renvoie, le mur qui restitue. Trois nappes
     de lumiere aux periodes non harmoniques (37 / 61 / 89 s) — l'element signature. */
  --sol1:radial-gradient(46% 38% at 74% 16%,rgba(216,166,64,.30),transparent 68%);
  --sol2:radial-gradient(52% 44% at 18% 62%,rgba(63,82,115,.22),transparent 72%);
  --sol3:radial-gradient(38% 30% at 52% 88%,rgba(154,106,22,.20),transparent 70%);
  /* le socle : le mur de soutenement sous chaque bloc (conserve du #11, re-teinte) */
  --socle:0 3px 0 0 var(--mur),0 5px 16px rgba(31,28,23,.10);
  --socle-h:0 5px 0 0 var(--mur),0 12px 26px rgba(31,28,23,.14);
}
*{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(--or-txt)}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:var(--enc);padding:10px 16px;z-index:200;border-radius:0 0 var(--r) 0}
.skip:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--lem);outline-offset:2px}
.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(247,244,237,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(205,190,163,.6);transition:box-shadow .25s}
.site-head.scrolle{box-shadow:0 1px 0 var(--mur),0 8px 22px rgba(31,28,23,.09)}
.logo{font-family:'Familjen';font-weight:800;font-size:20px;color:var(--enc);text-decoration:none;white-space:nowrap;letter-spacing:-.01em}
.logo-p{color:var(--vin)}
.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;border-radius:4px;transition:background .18s,color .18s,box-shadow .18s}
.nav a:hover{background:rgba(43,58,85,.08);color:var(--lem);box-shadow:0 2px 0 0 var(--lem)}
.nav a.on{color:var(--or-txt);box-shadow:0 2px 0 0 var(--vin)}
.head-cta{font-weight:700;font-size:14px;color:#fff;text-decoration:none;background:var(--vin);padding:10px 18px;border-radius:var(--r) var(--r) 2px 2px;white-space:nowrap;box-shadow:0 3px 0 0 #5c3f0b;transition:transform .18s,box-shadow .18s,background .18s}
.head-cta:hover{background:var(--vin-c);transform:translateY(-2px);box-shadow:0 5px 0 0 #5c3f0b}
.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);border-radius:2px;transition:transform .25s,opacity .25s}
@media (max-width:1080px){
  .nav{position:fixed;inset:57px 0 auto 0;background:rgba(247,244,237,.985);backdrop-filter:blur(14px);flex-direction:column;padding:18px 26px 24px;gap:4px;border-bottom:2px solid var(--mur);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(205,190,163,.7),rgba(205,190,163,.22) 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(140,51,70,.3),rgba(140,51,70,.09) 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(77,132,150,.42),rgba(77,132,150,.13) 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(224,206,168,.5),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 : les murs en terrasses du vignoble, 2 nappes de pas coprimes (17 / 89 px),
   dérive verticale d'amplitudes non multiples (-73 / -198 px) — une seule animation, zéro SVG */
.motif{position:absolute;inset:-4%;z-index:2;pointer-events:none;opacity:.82;background-image:var(--ter),var(--ter2);background-position:0 0,0 0;animation:terDerive 53s linear infinite alternate;will-change:background-position;mask-image:radial-gradient(150% 115% at 22% 30%,#000 38%,transparent 86%);-webkit-mask-image:radial-gradient(150% 115% at 22% 30%,#000 38%,transparent 86%)}
/* Les trois soleils — trois nappes de lumiere qui derivent a 37, 61 et 89 s.
   Nombres premiers entre eux : les trois ne se superposent jamais deux fois pareil.
   Calque d'AMBIANCE, jamais asservi au curseur, et coupe par prefers-reduced-motion. */
.soleils{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.9;background-image:var(--sol1),var(--sol2),var(--sol3);background-repeat:no-repeat;animation:sol1 37s ease-in-out infinite alternate,sol2 61s ease-in-out infinite alternate,sol3 89s ease-in-out infinite alternate;will-change:background-position}
@keyframes sol1{from{background-position:0 0,0 0,0 0}to{background-position:5% -3%,0 0,0 0}}
@keyframes sol2{from{background-position:0 0,0 0,0 0}to{background-position:0 0,-4% 4%,0 0}}
@keyframes sol3{from{background-position:0 0,0 0,0 0}to{background-position:0 0,0 0,3% -5%}}
@keyframes terDerive{to{background-position:0 -73px,0 -198px}}
.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(214,193,150,.6),transparent 70%);filter:blur(5px);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(240,236,227,.94) 0%,rgba(240,236,227,.82) 26%,rgba(240,236,227,.36) 55%,rgba(240,236,227,.06) 80%);pointer-events:none}
.grain{position:absolute;inset:0;z-index:4;opacity:.15;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.76' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .22 0 0 0 0 .17 0 0 0 0 .11 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='190' height='190' 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;border-radius:38% 62% 55% 45%/45% 40% 60% 55%;will-change:transform,opacity}
.halo .h1{background:radial-gradient(closest-side,rgba(224,206,168,.45),transparent 70%);animation:haloResp 8.6s ease-in-out infinite alternate}
.halo .h2{inset:14%;background:radial-gradient(closest-side,rgba(255,250,238,.6),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(--lem);border:1px solid var(--mur);padding:7px 14px;border-radius:3px;background:rgba(255,255,255,.72);box-shadow:0 2px 0 0 var(--mur)}
.eyebrow::before{content:'';width:7px;height:7px;border-radius:1px;background:var(--vin)}
.hero h1{font-family:'Familjen';font-size:clamp(34px,4.8vw,60px);line-height:1.03;margin:20px 0 14px;text-wrap:balance;letter-spacing:-.015em}
.hero-page h1{font-size:clamp(30px,3.7vw,47px)}
.hero h1 .l{display:block}
.hero h1 .thin{font-weight:400;color:var(--enc2)}
.hero h1 .fat{font-weight:800}
.hero h1 .fat b{color:var(--vin)}
.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,.82);border:1px solid var(--mur);border-radius:var(--r) var(--r) 2px 2px;padding:12px 18px;box-shadow:var(--socle);transition:transform .18s,box-shadow .18s}
.chip:hover{transform:translateY(-2px);box-shadow:var(--socle-h)}
.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(--or-txt)}
.chip.flash{animation:flashA 1s ease}
@keyframes flashA{0%{background-color:rgba(140,51,70,.16)}100%{background-color:rgba(255,255,255,.82)}}
.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 var(--mur);border-left:3px solid var(--vin);background:rgba(255,251,246,.94);border-radius:0 var(--r) var(--r) 0;padding:10px 13px;font-size:13px;color:#5d2130;max-width:54ch}
.warn.on{display:flex;animation:flashA 1.1s ease}
.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:#fffdf8;border:1px solid var(--mur);border-radius:var(--r) var(--r) 2px 2px;padding:24px 24px 22px;box-shadow:0 6px 0 0 var(--mur),0 10px 0 0 rgba(205,190,163,.45),0 18px 40px rgba(31,28,23,.16);transition:transform .28s,box-shadow .28s}
.card:hover{transform:translateY(-3px);box-shadow:0 9px 0 0 var(--mur),0 14px 0 0 rgba(205,190,163,.45),0 26px 54px rgba(31,28,23,.2)}
.card>*{position:relative;z-index:2}
/* le « filet de terrasse » en tête de carte remplace le beam tournant du pilote */
.beam{position:absolute;left:0;right:0;top:0;height:6px;z-index:3;border-radius:var(--r) var(--r) 0 0;background:linear-gradient(90deg,var(--vin) 0 38%,var(--lem) 38% 66%,var(--mur) 66% 100%);pointer-events:none}
.sheenbox{position:absolute;inset:0;z-index:1;border-radius:var(--r);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,.04) 42%,rgba(255,255,255,.34) 50%,rgba(224,206,168,.12) 58%,transparent);transform:skewX(-12deg);animation:sheen 9s 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:800;font-size:21px;margin:4px 0 2px;letter-spacing:-.01em}
.mini{font-family:'PlexMono';font-weight:600;font-size:13px;color:var(--or-txt);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(--or-txt)}
input[type=range]{width:100%;appearance:none;height:6px;border-radius:2px;background:linear-gradient(90deg,var(--vin) var(--fill,40%),#e0d8c8 var(--fill,40%));cursor:pointer}
input[type=range]::-webkit-slider-thumb{appearance:none;width:22px;height:22px;border-radius:3px;background:#fff;border:3px solid var(--vin);box-shadow:0 2px 0 0 #5c3f0b;transition:transform .15s,box-shadow .3s}
input[type=range]:active::-webkit-slider-thumb,input[type=range]:focus::-webkit-slider-thumb{box-shadow:0 2px 0 0 #5c3f0b,0 0 0 7px rgba(154,106,22,.16)}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12)}
input[type=range]::-moz-range-thumb{width:19px;height:19px;border-radius:3px;background:#fff;border:3px solid var(--vin);box-shadow:0 2px 0 0 #5c3f0b}
.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:#fff;border:1px solid var(--mur);border-radius:4px;padding:9px 4px;cursor:pointer;transition:all .18s;min-width:0;box-shadow:0 2px 0 0 rgba(205,190,163,.7)}
.puces button:hover{transform:translateY(-2px);border-color:var(--lem);box-shadow:0 4px 0 0 rgba(205,190,163,.9)}
.puces button.on{background:rgba(154,106,22,.08);border-color:var(--vin);color:var(--or-txt);box-shadow:0 3px 0 0 var(--vin);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:2px;background:linear-gradient(var(--mur),var(--mur)) 0 0/100% 1px no-repeat,linear-gradient(var(--mur),var(--mur)) 0 2px/100% 1px no-repeat}
.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:#fff;border:1px solid var(--mur);border-radius:4px;padding:12px 14px;transition:border-color .18s,box-shadow .18s}
.h-in:hover{border-color:var(--lem-c)}
.h-in:focus{border-color:var(--lem);box-shadow:0 0 0 3px rgba(43,58,85,.18);outline:none}
.h-in::placeholder{color:#a49881}
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:16.5px;color:#fff;background:var(--vin);border:none;border-radius:var(--r) var(--r) 2px 2px;padding:16px 22px;cursor:pointer;text-decoration:none;box-shadow:0 4px 0 0 #5c3f0b,0 8px 20px rgba(154,106,22,.28);transition:transform .16s,box-shadow .16s,background .16s}
.cta:hover{background:var(--vin-c);transform:translateY(-2px);box-shadow:0 6px 0 0 #5c3f0b,0 12px 26px rgba(154,106,22,.34)}
.cta:active{transform:translateY(2px);box-shadow:0 2px 0 0 #5c3f0b}
.cta .fl{display:inline-block;transition:transform .18s}
.cta:hover .fl{transform:translateX(4px)}
.cta[disabled]{opacity:.65;cursor:wait;transform:none}
.alt{text-align:center;font-size:13px;color:var(--enc2);margin-top:11px}
.alt a{color:var(--or-txt);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:#1f5c3d;background:rgba(44,122,82,.1);border:1px solid rgba(44,122,82,.4);border-radius:4px;padding:11px}
.card-in{opacity:0;transform:translateY(30px)}
.go .card-in{animation:cardIn .9s cubic-bezier(.16,1.15,.3,1) forwards;animation-delay:.5s}
@keyframes cardIn{to{opacity:1;transform:none}}
.fini .card-in{opacity:1!important;transform:none!important;animation:none!important}

/* ---------------- SIGNATURE : « l'étage de contrainte » ----------------
   Trois paliers de terrasse dans la carte de devis. Celui de la page est cerné
   de lie-de-vin ; le palier qu'un site web ne PEUT pas déterminer est hachuré.
   L'état est écrit en dur par gabarit.py (data-etage) → juste sans JS.        */
.etage{margin:14px 0 4px;border:1px solid var(--mur);border-radius:4px;background:rgba(255,255,255,.72);padding:10px 12px 11px;box-shadow:0 2px 0 0 rgba(205,190,163,.7)}
.etage>span{display:block;font-family:'PlexMono';font-weight:600;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--mut);margin-bottom:8px}
/* ⚠️ `flex-wrap` et PAS de `nowrap` sur le libellé : la première version, avec les deux en
   nowrap, forçait le bloc à 450 px et débordait à 375 px. Le détail passe à la ligne. */
.etage .e{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;font-size:12.5px;line-height:1.35;color:var(--enc2);padding:6px 8px 6px 10px;border-left:3px solid var(--mur);background:rgba(205,190,163,.14);margin-bottom:4px;min-width:0}
.etage .e:last-child{margin-bottom:0}
.etage .e b{font-weight:700;color:var(--enc);min-width:0}
.etage .e i{font-style:normal;font-family:'PlexMono';font-weight:600;font-size:10px;color:var(--mut);margin-left:auto}
/* le palier de la page */
.etage .e.on{border-left-color:var(--vin);background:rgba(154,106,22,.09);color:var(--enc)}
.etage .e.on b{color:var(--or-txt)}
.etage .e.on i{color:var(--vin)}
/* le palier non déterminable depuis un site web : hachuré */
.etage .e.hach{background-image:repeating-linear-gradient(135deg,rgba(31,28,23,.11) 0 2px,transparent 2px 7px);border-left-style:dashed}
.etage .e.hach i{font-style:italic;font-family:'Manrope';font-size:10.5px}
/* les paliers se décalent comme des terrasses */
.etage .e:nth-child(3){margin-left:9px}
.etage .e:nth-child(4){margin-left:18px}
.etage p{margin-top:8px;font-size:11px;color:var(--mut);line-height:1.45}

/* ---------------- 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(--ter),var(--ter2)}
.sec-tinte>.wrap{position:relative;z-index:1}
.sec h2{font-family:'Familjen';font-weight:800;font-size:clamp(25px,3vw,38px);line-height:1.1;margin-bottom:14px;text-wrap:balance;letter-spacing:-.012em}
/* repère de terrasse : un profil de mur en trois marches, devant chaque H2 */
.sec h2::before,.article h2::before{content:'';display:block;width:34px;height:11px;margin-bottom:13px;background:linear-gradient(var(--vin),var(--vin)) 0 0/34px 3px no-repeat,linear-gradient(var(--vin),var(--vin)) 8px 4px/26px 3px no-repeat,linear-gradient(var(--lem),var(--lem)) 16px 8px/18px 3px 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(--mur);border-radius:var(--r) var(--r) 2px 2px;padding:22px;box-shadow:var(--socle);transition:transform .18s,box-shadow .18s}
.col-etape:hover{transform:translateY(-3px);box-shadow:var(--socle-h)}
.col-etape b{font-family:'PlexMono';font-weight:600;color:var(--vin);font-size:14px}
.col-etape h3{font-family:'Familjen';font-weight:800;font-size:20px;margin:6px 0 8px}
.col-etape p{color:var(--enc2);font-size:14.5px}
.bande{background:var(--nuit);position:relative;overflow:hidden}
.bande::after{content:'';position:absolute;inset:0;opacity:.5;background-image:repeating-linear-gradient(180deg,rgba(255,255,255,.09) 0 1px,transparent 1px 17px),repeating-linear-gradient(180deg,rgba(255,255,255,.07) 0 2px,transparent 2px 89px)}
.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:#e6ddcb;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(--mur);border-radius:var(--r) var(--r) 2px 2px;padding:18px;text-align:center;box-shadow:var(--socle)}
.stat b{display:block;font-family:'PlexMono';font-weight:600;font-size:27px;color:var(--vin);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(--mur);border-radius:var(--r) var(--r) 2px 2px;padding:16px 18px;box-shadow:var(--socle);transition:transform .18s,box-shadow .18s}
.step:hover{transform:translateY(-3px);box-shadow:var(--socle-h)}
.step b{flex:none;width:32px;height:32px;display:grid;place-items:center;border-radius:3px;background:var(--vin);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 var(--mur);border-left:4px solid var(--lem);background:rgba(255,255,255,.86);border-radius:0 var(--r) var(--r) 0;padding:16px 20px;margin-top:26px;box-shadow:0 3px 0 0 rgba(205,190,163,.6)}
.encart p{color:var(--enc2);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;border-radius:var(--r) var(--r) 2px 2px;overflow:hidden;text-decoration:none;box-shadow:var(--socle);transition:transform .22s,box-shadow .22s;isolation:isolate}
.presta:hover{transform:translateY(-4px);box-shadow:var(--socle-h)}
.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(22,26,20,.9) 55%);color:#fff}
.presta-txt b{font-family:'Familjen';font-weight:800;font-size:20px;display:block}
.presta-txt span{display:block;font-size:13px;color:#ded5c4;margin:3px 0 8px}
.presta-txt i{font-style:normal;font-size:13px;font-weight:700;color:#e8c98a}

/* 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-radius:var(--r) var(--r) 2px 2px;box-shadow:var(--socle-h);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)}

/* tableaux & postes */
.table-scroll{overflow-x:auto;margin-top:10px}
.tbl{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--r) var(--r) 2px 2px;overflow:hidden;box-shadow:var(--socle);min-width:560px}
.tbl th{background:var(--nuit);color:#efe7d7;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}
/* ⚠️ Le `nowrap` du pilote suppose que la dernière colonne est une colonne de PRIX. Sur un
   tableau à DEUX colonnes dont la seconde est une phrase, il forçait la ligne entière sur un
   seul rang : un tableau de 2'951 px dans un conteneur de 324 px, soit neuf écrans de
   défilement latéral. Le `:nth-child(n+3)` réserve le traitement « valeur » aux tableaux d'au
   moins trois colonnes ; un tableau à deux colonnes redevient du texte qui se replie. */
.tbl td:last-child{font-family:'PlexMono';font-weight:600;color:var(--enc);font-variant-numeric:tabular-nums}
.tbl td:last-child:nth-child(n+3){white-space:nowrap}
.tbl tr>td:last-child:nth-child(2){font-family:'Manrope';font-weight:400;color:var(--enc2)}
.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(--mur);border-radius:4px;padding:14px 16px;box-shadow:0 2px 0 0 rgba(205,190,163,.7)}
.poste b{font-family:'PlexMono';font-weight:600;color:var(--vin);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(--mur);border-radius:4px;padding:12px 14px;box-shadow:0 2px 0 0 rgba(205,190,163,.7)}
.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(--mur);border-radius:4px;padding:11px 14px;text-decoration:none;color:var(--enc);font-weight:700;font-size:14px;box-shadow:0 2px 0 0 rgba(205,190,163,.7);transition:transform .16s,border-color .16s,box-shadow .16s}
.communes-grid a:hover{transform:translateY(-2px);border-color:var(--vin);box-shadow:0 4px 0 0 var(--mur)}
.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(--mur);border-radius:4px;margin-bottom:10px;overflow:hidden;box-shadow:0 2px 0 0 rgba(205,190,163,.7);transition:box-shadow .2s}
.faq-item[open]{box-shadow:0 3px 0 0 var(--vin),0 10px 24px rgba(31,28,23,.1)}
.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(--vin);transition:transform .25s}
.faq-item[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq-item summary:hover{color:var(--vin)}
.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(--mur);border-radius:var(--r) var(--r) 2px 2px;padding:22px;text-decoration:none;box-shadow:var(--socle);transition:transform .18s,box-shadow .18s}
.art-card:hover{transform:translateY(-3px);box-shadow:var(--socle-h)}
.art-card b{font-family:'Familjen';font-weight:800;font-size:20px;color:var(--enc);display:block;margin-bottom:8px;line-height:1.2}
.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(--vin)}
.article .wrap-art{max-width:780px}
.article h1{font-family:'Familjen';font-weight:800;font-size:clamp(29px,3.5vw,42px);margin-bottom:18px;text-wrap:balance;letter-spacing:-.015em}
.article h2{font-family:'Familjen';font-weight:800;font-size:clamp(21px,2.4vw,27px);margin:32px 0 10px;letter-spacing:-.01em}
.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(--mur);padding:10px 14px;background:#fff;border-radius:0 4px 4px 0;margin-bottom:18px}

/* CTA final — la terrasse du haut : claire, pour que le bouton lie-de-vin porte à 12,7:1 */
.sec-cta{background:var(--bg);position:relative;overflow:hidden;border-top:3px solid var(--mur)}
.sec-cta::before{content:'';position:absolute;inset:0;opacity:.7;pointer-events:none;background-image:var(--ter),var(--ter2)}
.sec-cta::after{content:'';position:absolute;width:46vw;height:46vw;right:-14%;top:-40%;border-radius:50%;background:radial-gradient(closest-side,rgba(77,132,150,.2),transparent 70%);filter:blur(60px);animation:d2 13s ease-in-out infinite alternate;pointer-events:none}
.cta-fin{position:relative;z-index:1;text-align:center;padding-top:12px;padding-bottom:12px}
.cta-fin h2{color:var(--enc);font-family:'Familjen';font-weight:800;font-size:clamp(25px,3.1vw,38px);margin-bottom:10px}
.cta-fin h2::before{margin-left:auto;margin-right:auto}
.cta-fin p{color:var(--enc2);max-width:56ch;margin:0 auto 24px}
.cta-lien{display:inline-block;width:auto}
.cta-fin .alt{color:var(--enc2)}
.cta-fin .alt a{color:var(--or-txt)}

/* footer */
.site-foot{background:var(--nuit);color:#c3bba9}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1.4fr;gap:36px;padding-top:48px;padding-bottom:30px}
.site-foot .logo{color:#f2ebdc;font-size:22px}
.site-foot .logo-p{color:#e8c98a}
/* ⚠️ Les gris du pied de page sont calés sur --nuit (#16323a) : mesurés à 4,47 · 4,14 et
   3,83:1 au premier passage, ils sont remontés au-dessus de 5:1. Ne pas les assombrir. */
.foot-txt{font-size:13.5px;margin-top:10px;color:#a49d8d}
.foot-txt a{color:#ddd0b4;text-decoration:none}
.site-foot h4{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#aaa393;margin-bottom:12px}
.foot-nav{display:grid;gap:7px}
.foot-nav a{color:#c3bba9;text-decoration:none;font-size:13.5px;transition:color .15s}
.foot-nav a:hover{color:#e8c98a}
.foot-nav-com{grid-template-columns:repeat(2,1fr)}
.foot-legal{border-top:1px solid #22434c;padding-top:16px;padding-bottom:22px;font-size:12px;color:#a49d8d}
.foot-legal a{color:#b8b0a0}

/* 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(247,244,237,.95);backdrop-filter:blur(10px);border-top:2px solid var(--mur);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(22,50,58,.5);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s ease}
.pum.vu{opacity:1}
.pum-card{position:relative;width:min(430px,100%);background:#fffdf8;border:1px solid var(--mur);border-top:6px solid transparent;border-radius:var(--r) var(--r) 2px 2px;padding:24px;box-shadow:0 6px 0 0 var(--mur),0 26px 60px rgba(22,26,20,.35);transform:translateY(18px) scale(.97);transition:transform .35s cubic-bezier(.2,1.1,.3,1)}
.pum-card::before{content:'';position:absolute;left:-1px;right:-1px;top:-6px;height:6px;background:linear-gradient(90deg,var(--vin) 0 38%,var(--lem) 38% 66%,var(--mur) 66% 100%)}
.pum.vu .pum-card{transform: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:3px;transition:background .15s,color .15s}
.pum-x:hover{background:rgba(31,28,23,.08);color:var(--enc)}
.pum-eti{font-family:'PlexMono';font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--lem);margin-bottom:8px}
.pum-card h3{font-family:'Familjen';font-weight:800;font-size:24px;line-height:1.13;margin-bottom:6px;letter-spacing:-.012em}
.pum-chiffre{font-family:'PlexMono';font-weight:600;font-size:15px;color:var(--vin);background:rgba(154,106,22,.08);border:1px solid var(--mur);border-left:3px solid var(--vin);border-radius:0 4px 4px 0;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:#1f5c3d}
@media (max-width:600px){
  .pum{align-items:flex-end;padding:0}
  .pum-card{width:100%;border-radius:var(--r) var(--r) 0 0;padding-bottom:calc(24px + env(safe-area-inset-bottom));transform:translateY(100%)}
}
@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}
  .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}
  .card{padding:20px 18px 18px}
  .etage .e{font-size:12px}
  .etage .e:nth-child(3){margin-left:6px}
  .etage .e:nth-child(4){margin-left:12px}
}

/* ────────────────────────────────────────────────────────────────────────────
   LE BLOC PARTENAIRE (IMI) ET LES AVIS — porté du #17 le 2026-08-15, réécrit
   avec les variables de CE site (le #17 est sombre, celui-ci est clair).
   ⚠️ Leçon du #17 : ce bloc avait été posé en HTML sans aucune règle CSS, et il
   tombait en style navigateur par défaut sur 100 pages. Toute classe écrite dans
   gabarit.py doit avoir sa règle ici — c'est le genre de panne qu'on ne voit
   qu'en comparant l'inventaire des classes du HTML à celui de la feuille.
   ──────────────────────────────────────────────────────────────────────────── */
.sec-part{background:var(--bg2)}
.part{display:grid;grid-template-columns:250px 1fr;gap:34px;align-items:start}
.part>*{min-width:0}
.part-id{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:22px;text-align:center;box-shadow:var(--socle)}
.part-id img{width:128px;height:auto;margin:0 auto 14px;display:block;
  border-radius:var(--r);background:#fff;padding:6px}
.part-nap{font-size:13.5px;line-height:1.6;color:var(--enc2)}
.part-nap b{display:block;font-family:'Familjen',system-ui,sans-serif;font-weight:800;font-size:16px;
  color:var(--enc);margin-bottom:4px}
.ide{display:inline-block;font-family:'PlexMono',ui-monospace,monospace;font-weight:600;
  font-size:11.5px;color:var(--lem);background:rgba(43,58,85,.08);
  border:1px solid var(--line);border-radius:4px;padding:2px 8px;margin-top:8px;
  overflow-wrap:anywhere}
.part-txt h2{margin-bottom:12px}
.part-txt p{color:var(--enc2);margin-bottom:12px}
.part-l{list-style:none;display:grid;gap:12px;margin:18px 0;padding:0}
.part-l li{font-size:14.5px;line-height:1.6;color:var(--enc2);background:#fff;
  border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--socle)}
.part-l b{display:block;font-family:'Familjen',system-ui,sans-serif;font-weight:700;font-size:15px;
  color:var(--enc);margin-bottom:4px}
.part-txt .part-lien{font-family:'PlexMono',ui-monospace,monospace;font-size:11.5px;
  line-height:1.55;color:var(--mut);margin-bottom:0}

.avis{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px}
.avis>*{min-width:0}
.avi{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;
  box-shadow:var(--socle)}
.avi p{font-size:14.5px;line-height:1.65;color:var(--enc2);margin-bottom:0}
.avi cite{display:block;font-style:normal;font-family:'PlexMono',ui-monospace,monospace;
  font-size:11.5px;color:var(--mut);margin-top:12px}
.avi .et{font-family:system-ui,sans-serif;font-size:14px;letter-spacing:.12em;
  color:var(--vin);margin-bottom:8px}
.foot-part{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}

@media (max-width:860px){
  .part{grid-template-columns:1fr;gap:22px}
  .part-id{position:static}
  .avis{grid-template-columns:1fr}
}

/* Lien « étape suivante » en fin de section, et la colonne communes du pied de page :
   deux classes utilisées par le HTML sans règle dans la feuille héritée du #11. */
.lnk{font-family:'Familjen',system-ui,sans-serif;font-weight:700;color:var(--or-txt);
  text-decoration:none;border-bottom:2px solid rgba(154,106,22,.28);
  transition:border-color .2s,color .2s}
.lnk:hover{color:var(--vin);border-bottom-color:var(--vin-c)}
.foot-com{min-width:0}

/* Liste a puces des pages prestations et guides. ⚠️ NE PAS reutiliser `.puces`,
   qui est la grille des BOUTONS du configurateur : quatre colonnes, pas une liste. */
.checks{list-style:none;display:grid;gap:12px;margin:18px 0;padding:0}
.checks li{position:relative;font-size:14.5px;line-height:1.65;color:var(--enc2);
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px 16px 42px;box-shadow:var(--socle)}
.checks li::before{content:'';position:absolute;left:18px;top:22px;width:10px;height:10px;
  border-radius:2px;background:var(--vin);box-shadow:0 0 0 3px rgba(154,106,22,.14)}
.checks li strong,.checks li b{color:var(--enc)}