/* ================================================================
   pompes-a-chaleur-lausanne.ch — registre « GLACIER & CARMIN » (2026-08-22)
   Déclinaison de la mécanique validée le 22.08 sur le #14 — STANDARD DE
   CLARTÉ v9.19. Ce qui NE varie pas : blanc pur, aurore bornée au hero,
   foyer chaud opposé à la carte, grain .28, lavis à 0 sur les 4 bords,
   graisse display 500-600, UNE seule couleur saturée, réservée à l'action.
   Ce qui varie :
     · identité  GLACIER #1c5878  — 7,73:1 sur blanc
     · action    CARMIN  #9d1f2e  — 7,87:1, blanc dessus 7,87:1.
                 C'est la couleur des armoiries de Lausanne, et elle est à
                 152° de teinte de l'identité (seuil du réseau : 120°).
     · display   Urbanist variable 27,1 Ko — aucun autre site PAC ne la porte
     · signature LE SEUIL du chauffage à distance (100'000 kWh ET 3'000 kWh/m)
   Le registre « Circuit & cuivre » du 19.08 est MORT : crème, orange,
   Gabarito, IBM Plex Mono et le motif de circuit sont retirés.
================================================================ */
@font-face{font-family:'Urbanist';font-weight:100 900;font-display:swap;src:url(/fonts/urbanist-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')}

:root{
  color-scheme:light only;               /* le meta ET :root — piège du #5 */
  /* les fonds : BLANC PUR. La couleur vit dans le hero, les filets, les survols. */
  --bg:#ffffff;--bg2:#ffffff;--ciel:#eef6fb;--creme:#f7fbfd;
  /* l'encre : titres 17,4:1 · corps 8,85:1 · sourdine 5,65:1 */
  --enc:#0d1b28;--enc2:#3c4c5a;--mut:#58697a;
  /* L'ACTION — carmin lausannois. Il ne porte QUE des a.cta et des button.cta. */
  --pru:#9d1f2e;--pru-cl:#a82233;--pru-f:#7d1522;
  --grad-act:linear-gradient(135deg,#a82233,#9d1f2e 52%,#7d1522);
  /* l'identité — glacier. Titres d'accent, filets, focus, puces, chiffres. */
  --bis:#1c5878;--bis-cl:#5aa9c9;--amb:#7cc4e0;--amb-t:#1c5878;
  --grad-t:linear-gradient(103deg,#1c5878 2%,#2b7a9c 46%,#3f7f9e 96%);
  /* le vert : réservé aux subventions et aux aides, nulle part ailleurs. 5,4:1 */
  --ok:#0f7a4f;
  --line:#e2ecf3;--bord:#cfe0ec;--nuit:#0d1b28;--nuit2:#08131d;
  --o1:0 1px 3px rgba(10,45,75,.05),0 8px 20px -10px rgba(10,45,75,.14);
  --o2:0 3px 8px rgba(10,45,75,.06),0 24px 48px -18px rgba(10,45,75,.20);
  --grain-img: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='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.52'/%3E%3C/svg%3E");
  /* ⚠️ ✓ ★ → ≈ ne sont dans AUCUN .woff2 du réseau — MESURÉ le 22.08, pas supposé.
     Chaque icône est un SVG. La coche ci-dessous remplace le content:'✓' des puces. */
  --fleche:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10h16M13.5 4l6 6-6 6'/%3E%3C/svg%3E");
  --coche:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c5878' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.4l5.1 5.1L19.6 6.4'/%3E%3C/svg%3E");
  --etoiles:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 18' fill='%23f0a500' stroke='%23a15c04' stroke-width='1.1' stroke-linejoin='round'%3E%3Cpath transform='translate(0,0) scale(.9)' d='M10 1.4l2.55 5.17 5.7.83-4.13 4.02.98 5.68L10 14.42l-5.1 2.68.98-5.68L1.75 7.4l5.7-.83z'/%3E%3Cpath transform='translate(19.2,0) scale(.9)' d='M10 1.4l2.55 5.17 5.7.83-4.13 4.02.98 5.68L10 14.42l-5.1 2.68.98-5.68L1.75 7.4l5.7-.83z'/%3E%3Cpath transform='translate(38.4,0) scale(.9)' d='M10 1.4l2.55 5.17 5.7.83-4.13 4.02.98 5.68L10 14.42l-5.1 2.68.98-5.68L1.75 7.4l5.7-.83z'/%3E%3Cpath transform='translate(57.6,0) scale(.9)' d='M10 1.4l2.55 5.17 5.7.83-4.13 4.02.98 5.68L10 14.42l-5.1 2.68.98-5.68L1.75 7.4l5.7-.83z'/%3E%3Cpath transform='translate(76.8,0) scale(.9)' d='M10 1.4l2.55 5.17 5.7.83-4.13 4.02.98 5.68L10 14.42l-5.1 2.68.98-5.68L1.75 7.4l5.7-.83z'/%3E%3C/svg%3E");
}
*{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-cl);border-radius:6px;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}
.wrap{width:min(1060px,100%);margin:0 auto;padding-left:24px;padding-right:24px}
/* la prose ne dépasse jamais 68 caractères : au-delà, la ligne décroche.
   ⚠️ posée SUR le conteneur, elle le rétrécirait (défaut n°11 du #14) — donc
   elle est posée sur les blocs de texte, à l'intérieur. */
.sec p:not(.lead):not(.srcline):not(.sig-lg):not(.presta-leg):not(.bande-src),
.sec>.wrap>ul:not(.communes-grid):not(.prestas){max-width:68ch}
@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:'Urbanist';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:15px;color:#fff;text-decoration:none;background:var(--grad-act);padding:11px 20px;border-radius:999px;white-space:nowrap;box-shadow:0 8px 20px -8px rgba(157,31,46,.42);transition:transform .16s,box-shadow .16s}
.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;isolation:isolate;
  background:linear-gradient(177deg,#fcfeff 0%,#f4fafd 44%,#eef6fb 100%)}
/* ⚠️ `.hero-max` était en display:flex pour centrer verticalement le contenu.
   Depuis que la signature est une BANDE sœur de la grille, ce flex en faisait
   une deuxième colonne posée à droite du hero. Il n'a plus lieu d'être : le
   hero se cale en haut, comme la grille. */
.hero-max{display:block}
.hero-page{padding:0 0 8px}
/* L'AURORE, version chuchotée : 3 foyers glacier + 1 foyer carmin tenu EN BAS À
   GAUCHE, à l'opposé de la carte de devis. Sans ça, la couleur d'action baigne le
   CTA et l'invariant « une seule couleur saturée » ne veut plus rien dire. */
.foyers{position:absolute;inset:-20% -10%;z-index:1;pointer-events:none;overflow:hidden}
.foyers i{position:absolute;border-radius:50%;will-change:transform;backface-visibility:hidden}
.f1{width:72%;height:55%;left:-13%;top:-15%;
  background:radial-gradient(closest-side,rgba(124,196,224,.23),rgba(124,196,224,.09) 48%,transparent 76%);
  animation:d1 31s ease-in-out infinite alternate}
.f2{width:60%;height:50%;right:-11%;top:-13%;
  background:radial-gradient(closest-side,rgba(28,88,120,.16),rgba(28,88,120,.06) 46%,transparent 74%);
  animation:d3 35s ease-in-out infinite alternate}
.f3{width:64%;height:46%;left:-5%;bottom:-19%;
  background:radial-gradient(closest-side,rgba(90,169,201,.20),rgba(90,169,201,.07) 48%,transparent 76%);
  animation:d2 25s ease-in-out infinite alternate}
.f4{width:42%;height:37%;left:1%;bottom:-13%;
  background:radial-gradient(closest-side,rgba(190,74,86,.12),rgba(190,74,86,.04) 46%,transparent 74%);
  animation:d4 27s ease-in-out infinite alternate}
@keyframes d1{to{transform:translate3d(6%,5%,0) scale(1.12)}}
@keyframes d2{to{transform:translate3d(-7%,7%,0) scale(1.09)}}
@keyframes d3{to{transform:translate3d(-5%,-7%,0) scale(1.14)}}
@keyframes d4{to{transform:translate3d(-8%,4%,0) scale(1.18)}}
/* LE LAVIS — calque PLEIN CADRE du hero, jamais un ::before de colonne.
   33 − 0,82×38 = +1,8 % à gauche : il atteint 0 avant les quatre bords, donc
   aucune bordure verticale. C'est le défaut encore en production sur 4 sites. */
.voile{position:absolute;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(38% 42% at 33% 44%,rgba(255,255,255,.90),rgba(255,255,255,.46) 50%,transparent 82%)}
.grain{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:.28;
  mix-blend-mode:multiply;background-image:var(--grain-img)}
/* align-items:START, jamais center : la carte fait ~1 100 px et la colonne de
   texte ~500. Centrée, elle laissait 400 à 600 px de VIDE sur les 75 pages. */
.hero-grid{position:relative;z-index:20;display:grid;grid-template-columns:1.06fr .94fr;gap:52px;align-items:start;padding-top:44px;padding-bottom:34px}

/* ---------------- hero : texte ---------------- */
.eyebrow{display:inline-block;font-size:13.5px;font-weight:700;letter-spacing:.02em;color:var(--bis);background:rgba(255,255,255,.74);border:1px solid var(--bord);padding:6px 13px;border-radius:999px;margin-bottom:12px}

.hero h1{font-family:'Urbanist';font-weight:500;letter-spacing:-.035em;font-size:clamp(34px,4.6vw,54px);line-height:1.06;margin:0 0 16px;text-wrap:balance}
.hero-page h1{font-size:clamp(30px,3.6vw,44px)}
.hero h1 .l{display:block}
.hero h1 .thin{font-weight:300;color:#33475a}
.hero h1 .fat{font-weight:600}
.hero h1 .fat b{font-weight:600;background:var(--grad-t);-webkit-background-clip:text;background-clip:text;color:transparent}
.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:34em;font-size:18px;line-height:1.6;margin-bottom:22px}
.live{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.chip{background:#fff;border:1px solid var(--line);border-radius:16px;padding:11px 16px;box-shadow:var(--o1);min-width:172px;transition:transform .18s}
.chip:hover{transform:translateY(-3px)}
.chip small{display:block;font-size:12.5px;color:var(--mut);letter-spacing:.01em}
.chip b{font-family:'Urbanist';font-weight:600;font-size:22px;letter-spacing:-.03em;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(90,169,201,.28)}100%{background-color:rgba(255,255,255,.66)}}
.srcline{font-size:13px;line-height:1.55;color:var(--mut);margin-bottom:22px;max-width:44em}
.trust{list-style:none;display:grid;gap:9px;font-size:15.5px;line-height:1.5;color:var(--enc2);margin-bottom:26px}
.trust li{position:relative;padding-left:28px}
.trust li::before{content:'';position:absolute;left:0;top:.22em;width:19px;height:19px;background:var(--coche) no-repeat center/100%}
.warn{margin-top:14px;display:none;gap:9px;border:1px solid rgba(28,88,120,.45);border-left:3px solid var(--amb-t);background:rgba(240,248,252,.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:#fff;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(--bis) 0 46%,var(--bis-cl) 46% 78%,var(--amb) 78% 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(28,88,120,.08) 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:'Urbanist';font-weight:700;font-size:20.5px;margin-bottom:2px}
.mini{font-family:'Urbanist';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:'Urbanist';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:var(--bis);border-color:var(--bis);color:#fff;font-weight:700;box-shadow:none;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:16.5px;color:#fff;background:var(--grad-act);border:none;border-radius:999px;padding:15px 22px;cursor:pointer;text-decoration:none;box-shadow:0 8px 20px -8px rgba(157,31,46,.42);transition:transform .16s,box-shadow .16s}
.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:'Urbanist';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:#1c5878}
.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:#1c5878}
.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:'Urbanist';font-weight:700;font-size:14px;color:var(--enc)}
.l-gaz b{color:#1c5878}
.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:104px 0}
.sec-tinte{background:var(--bg);position:relative}
.sec-tinte::before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.55),transparent 42%)}
.sec-tinte>.wrap{position:relative;z-index:1}
.sec h2{font-family:'Urbanist';font-weight:550;letter-spacing:-.03em;font-size:clamp(25px,2.9vw,36px);line-height:1.12;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:'Urbanist';font-weight:600;color:var(--amb-t);font-size:14px}
.col-etape h3{font-family:'Urbanist';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:.5;background:radial-gradient(120% 180% at 15% 50%,rgba(29,155,240,.20),transparent 60%)}
.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:'Urbanist';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:'Urbanist';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(28,88,120,.40);border-left:4px solid var(--amb-t);background:rgba(240,248,252,.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:'Urbanist';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:#bfe4f5;white-space:nowrap}

/* 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:'Urbanist';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:'Urbanist';font-weight:600;color:var(--enc);white-space:nowrap;font-variant-numeric:tabular-nums}
.poste{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px 22px 20px;text-decoration:none;color:inherit;min-width:0;box-shadow:0 10px 26px -20px rgba(19,42,63,.35);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.poste:hover{transform:translateY(-3px);border-color:var(--bis);box-shadow:0 18px 36px -22px rgba(11,94,168,.45)}
.poste b{font-family:'Urbanist';font-weight:700;color:var(--enc);font-size:19px;line-height:1.22;text-wrap:balance}
.poste p{font-size:14.5px;color:var(--enc2);margin:0}
.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:'Urbanist';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:'Urbanist';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:'Urbanist';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:'Urbanist';font-weight:700;font-size:clamp(30px,3.65vw,43px);line-height:1.06;margin-bottom:18px;text-wrap:balance}
.article h2{font-family:'Urbanist';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)}
/* ⚠️ Ce <p> est posé HORS de tout conteneur par gen.py : sans largeur ni marge
   auto, il se calait sur le bord de la page. HTML valide, donc invisible pour
   tous les bancs — c'est le défaut n°12 relevé sur le #14. */
.art-retour{width:min(1060px,100%);margin:26px auto 0;padding:0 24px;font-weight:700}
/* la même flèche, tournée : pour un retour elle pointe à gauche et vient avant */
.fl-g{margin:0 .34em 0 0;transform:scaleX(-1)}
.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;left:-14%;top:-38%;border-radius:50%;background:radial-gradient(closest-side,rgba(90,169,201,.26),rgba(90,169,201,.09) 48%,transparent 74%);animation:d2 25s ease-in-out infinite alternate}

.cta-fin{position:relative;z-index:1;text-align:center;padding-top:12px;padding-bottom:12px}
.cta-fin h2{color:#eef4f8;font-family:'Urbanist';font-weight:550;letter-spacing:-.03em;font-size:clamp(25px,2.9vw,36px);margin-bottom:10px}
.cta-fin h2::before{margin:0 auto 11px;background:linear-gradient(#7fa8c6,#7fa8c6) 0 2px/22px 2px no-repeat,linear-gradient(var(--bis-cl),var(--bis-cl)) 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:var(--bis-cl)}

/* 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:var(--bis-cl)}
.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:var(--bis-cl)}
.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:#fff;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:'Urbanist';font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--bis);margin-bottom:8px}
.pum-card h3{font-family:'Urbanist';font-weight:700;font-size:23.5px;line-height:1.12;margin-bottom:6px}
.pum-chiffre{font-family:'Urbanist';font-weight:600;font-size:15px;color:var(--amb-t);background:rgba(28,88,120,.08);border:1px solid rgba(28,88,120,.38);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}

/* ---------------- le bandeau du SEUIL (l'angle n°1 du site) ----------------
   La directive SiL du 23.10.2025 fixe 100'000 kWh/an ET 3'000 kWh/m, cumulatifs.
   Personne ne le publie. Il ne peut donc pas rester au milieu de la page. */
.seuil{background:#fff;color:var(--enc2);position:relative;overflow:hidden;border-top:1px solid var(--bord);border-bottom:1px solid var(--bord)}

.seuil-in{position:relative;z-index:1;display:grid;grid-template-columns:auto 1fr auto;gap:34px;align-items:center;padding:34px 0}
.seuil-n{font-family:'Urbanist';font-weight:600;letter-spacing:-.035em;font-size:clamp(34px,4.4vw,52px);line-height:1;color:var(--bis);white-space:nowrap}
.seuil-n small{display:block;font-family:'Manrope';font-weight:700;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mut);margin-top:7px}
.seuil-t b{font-family:'Urbanist';font-weight:600;letter-spacing:-.02em;font-size:clamp(18px,2vw,23px);display:block;margin-bottom:5px;color:var(--enc);text-wrap:balance}
.seuil-t p{font-size:15px;color:var(--enc2);margin:0;max-width:60ch}
.seuil-l{display:inline-block;background:#fff;color:var(--bis);font-weight:700;font-size:14.5px;text-decoration:none;padding:12px 20px;border:1px solid var(--bord);border-radius:999px;white-space:nowrap;transition:transform .18s,border-color .18s}
.seuil-l:hover{transform:translateY(-2px);border-color:var(--bis)}

/* ---------------- les prestations en images ----------------
   .prestas / .presta existaient déjà dans ce fichier et n'étaient appelés
   par AUCUNE page. On les réveille, en auto-fit pour tenir 3 ou 4 cartes. */
.prestas{grid-template-columns:repeat(auto-fit,minmax(228px,1fr))}
.presta{border-radius:12px}
.presta-leg{display:block;font-size:12.5px;color:var(--mut);margin-top:8px;line-height:1.45}

/* ---------------- responsive ---------------- */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:32px}
  .hero-max{min-height:0}

  /* 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}
}

/* le bandeau du seuil se replie : 3 colonnes -> 1, sinon 991 px de haut a 375 px */
@media (max-width:900px){
  .seuil-in{grid-template-columns:1fr;gap:16px;padding:24px 0}
  .seuil-n{font-size:clamp(30px,9vw,40px);display:flex;align-items:baseline;gap:10px}
  .seuil-n small{margin-top:0}
  .seuil-l{justify-self:start}
}

/* ==================================================================
   LOT 0 — LES 21 CLASSES QUI ÉTAIENT APPELÉES SANS UNE SEULE RÈGLE
   Relevé le 2026-08-22. Le navigateur en voyait 17 sur l'accueil ; le
   contrôle statique de qa.py, qui lit les 75 pages, en a trouvé 4 de
   plus sur les communes et les quartiers — c'est la leçon du lot :
   un contrôle qui ne regarde qu'UNE page ne contrôle qu'une page.
   `part*`, `sec-part` : 71 pages · `bande-info`, `bande-src`,
   `liste-check` : 39 pages · `avis`, `et` : 16 pages.
   Un composant sans CSS est du HTML VALIDE : il ne déborde pas, il ne
   casse aucun contraste, donc tous les bancs le déclaraient vert.
   Les jetons ci-dessous sont ceux de la peau ACTUELLE — le lot 1
   (« Glacier & carmin ») les remplace, la structure reste.
   ================================================================== */

/* -- utilitaire : le texte que seul un lecteur d'écran doit lire ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* -- le bloc partenaire « Qui viendra chez vous » ------------------- */
.sec-part{border-top:1px solid var(--line)}
.part{display:grid;grid-template-columns:250px 1fr;gap:38px;align-items:start;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:30px 32px;
  box-shadow:0 20px 44px -34px rgba(19,42,63,.42)}
.part-id{display:flex;flex-direction:column;gap:14px;padding-right:28px;
  border-right:1px solid var(--line)}
.part-id picture,.part-id img{display:block}
.part-id img{width:92px;height:92px;object-fit:contain}
.part-id>img{margin-bottom:2px}
.part-nap{font-size:14px;line-height:1.65;color:var(--enc2);margin:0}
.part-nap b{display:block;font-family:'Urbanist';font-weight:700;font-size:17.5px;
  color:var(--enc);margin-bottom:3px}
.ide{display:inline-block;margin-top:7px;font-family:'Urbanist';font-weight:600;
  font-size:11.5px;letter-spacing:.06em;color:var(--enc2);background:var(--ciel);
  border-radius:5px;padding:3px 8px}
.part-txt>h2{margin-top:0}
.part-txt>p{max-width:68ch}
.part-l{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:13px;max-width:68ch}
.part-l li{position:relative;padding-left:24px;font-size:15px;color:var(--enc2);
  line-height:1.62}
.part-l li::before{content:'';position:absolute;left:0;top:.6em;width:10px;height:10px;
  border-radius:3px;background:var(--bis)}
.part-l b{color:var(--enc)}
.part-lien{margin-top:20px;padding-top:14px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--mut);max-width:68ch}

/* -- les avis (ceux d'IMI, jamais les nôtres — cadrage dans le .lead) */
.avis{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:18px;
  margin-top:22px}
.avi{margin:0;background:#fff;border:1px solid var(--line);padding:24px 24px 20px}
.avi p{font-size:15px;line-height:1.62;color:var(--enc2);margin:0}
.avi cite{display:block;margin-top:14px;font-style:normal;font-size:13px;
  color:var(--mut)}
/* ⚠️ ★ n'est dans AUCUN de nos .woff2 : les étoiles sont un SVG, pas un caractère. */
.et{display:block;width:96px;height:18px;margin:0 0 13px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 18' fill='%23f0a500' stroke='%23a15c04' stroke-width='1.1' stroke-linejoin='round'%3E%3Cpath transform='translate(0.0,0) scale(.9)' d='M10 1.4l2.55 5.17 5.7.83-4.13 4.02.98 5.68L10 14.42l-5.1 2.68.98-5.68L1.75 7.4l5.7-.83z'/%3E%3Cpath transform='translate(19.2,0) scale(.9)' d='M10 1.4l2.55 5.17 5.7.83-4.13 4.02.98 5.68L10 14.42l-5.1 2.68.98-5.68L1.75 7.4l5.7-.83z'/%3E%3Cpath transform='translate(38.4,0) scale(.9)' d='M10 1.4l2.55 5.17 5.7.83-4.13 4.02.98 5.68L10 14.42l-5.1 2.68.98-5.68L1.75 7.4l5.7-.83z'/%3E%3Cpath transform='translate(57.599999999999994,0) scale(.9)' d='M10 1.4l2.55 5.17 5.7.83-4.13 4.02.98 5.68L10 14.42l-5.1 2.68.98-5.68L1.75 7.4l5.7-.83z'/%3E%3Cpath transform='translate(76.8,0) scale(.9)' d='M10 1.4l2.55 5.17 5.7.83-4.13 4.02.98 5.68L10 14.42l-5.1 2.68.98-5.68L1.75 7.4l5.7-.83z'/%3E%3C/svg%3E") no-repeat left center;background-size:auto 100%}

/* -- « De la question au chauffage neuf, en 4 étapes » -------------- */
.cols4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:26px}
/* le numéro était COLLÉ au titre : « 1Votre chiffre, tout de suite » */
.col-etape .num{display:inline-grid;place-items:center;width:32px;height:32px;
  border-radius:9px;background:var(--ciel);color:var(--bis);font-family:'Urbanist';
  font-weight:700;font-size:16.5px;margin-bottom:11px}
.col-etape b{display:block}

/* -- le pied ------------------------------------------------------- */
.foot-com{min-width:0}
.foot-part{margin-top:16px;padding-top:14px;border-top:1px solid #1e2c3c}
.foot-part b{color:#d5dce6}

/* -- la grille de liens, version resserrée (guides, questions) ------ */
.petites{grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
.petites a{font-size:13.5px;font-weight:600;padding:10px 13px}

/* -- « Ce qui s'applique chez vous » — 39 communes et quartiers ------
      C'est le bloc le plus utile du site : le droit qui s'applique au
      bâtiment du lecteur. Il sortait en prose nue, à pleine largeur.  */
.bande-info{background:var(--ciel);border:1px solid var(--line);border-left:4px solid var(--bis);
  border-radius:10px;padding:24px 26px 20px}
.bande-info>h3{font-family:'Urbanist';font-weight:700;font-size:20px;margin:0 0 14px;
  color:var(--enc)}
.liste-check{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.liste-check li{position:relative;padding-left:28px;font-size:15px;line-height:1.62;
  color:var(--enc2)}
/* la coche est un SVG : ✓ n'est dans aucun de nos .woff2 non plus */
.liste-check li::before{content:'';position:absolute;left:0;top:.28em;width:18px;height:18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%230b5ea8'/%3E%3Cpath d='M5.6 10.3l2.9 2.9 5.9-6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/100%}
.liste-check b{color:var(--enc)}
.bande-src{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--bord);
  font-size:12.5px;line-height:1.55;color:var(--enc2)}

/* -- le plan du site ----------------------------------------------- */
.plan{max-width:1000px}

/* -- la carte de devis des pages intérieures ------------------------ */
.card-in{scroll-margin-top:96px}

/* -- .go : posée par main.js quand le configurateur est vivant.
      C'est un CROCHET D'ÉTAT, pas un composant : elle n'a pas de règle,
      et elle est déclarée telle quelle dans le contrôle de qa.py.      */

@media (max-width:900px){
  .part{grid-template-columns:1fr;gap:24px;padding:24px 22px}
  .part-id{flex-direction:row;align-items:center;gap:18px;padding:0 0 18px;
    border-right:0;border-bottom:1px solid var(--line)}
  .part-id img{width:72px;height:72px}
  .cols4{grid-template-columns:repeat(2,1fr)}
  .bande-info{padding:20px 20px 17px}
}
@media (max-width:560px){
  .cols4{grid-template-columns:1fr}
  .avis{grid-template-columns:1fr}
}

/* ==================================================================
   LOT 2 — LA BARRE DE CONFIANCE DU HERO
   Demande n°1 de l'utilisateur : les cinq étoiles et le logo Google dès
   le hero. Trois garde-fous, écrits ici pour qu'on ne les défasse pas :
   ① le badge NOMME IMI lui-même — l'attribution n'est jamais reléguée
      dans une note plus bas ;
   ② il n'est PAS cliquable : aucun lien vers IMI nulle part (interdit
      n°4 du dossier — un lead qui appelle IMI en direct n'est pas
      commissionné) ;
   ③ AUCUN aggregateRating dans le JSON-LD (interdit n°2 : un rating
      auto-attribué est hors règles Google, et une action manuelle
      frapperait le pattern des 20 sites, pas une page).
   ================================================================== */
.gbadge{display:flex;align-items:center;gap:12px;margin:0 0 20px;padding:10px 15px;
  background:#fff;border:1px solid var(--bord);border-radius:14px;
  box-shadow:var(--o1);max-width:max-content}
.glogo{flex:0 0 auto;width:21px;height:21px}
.gnote{display:flex;flex-direction:column;gap:1px;min-width:0}
.gline{display:flex;align-items:center;gap:8px}
.gstars{display:block;width:88px;height:16.5px;background:var(--etoiles) no-repeat left center;
  background-size:auto 100%}
.gval{font-family:'Urbanist';font-weight:600;font-size:16px;line-height:1;
  letter-spacing:-.02em;color:var(--enc)}
.gsrc{font-size:12.5px;line-height:1.4;color:var(--mut)}
.gsrc b{color:var(--enc2);font-weight:700}

/* la phrase de cadrage COMPLÈTE (dossier IMI § 7.3) — elle vit dans le bloc
   partenaire, ce qui autorise le badge du hero à être compact sur mobile. */
.imi-avis{margin:0 0 14px;padding:10px 14px;background:#fbfdfe;border:1px solid var(--line);
  border-radius:10px;font-size:13px;line-height:1.5;color:var(--mut)}
.imi-avis b{color:var(--enc)}

/* ------------- LA BANDE DE PREUVE : la photo de chantier et l'entreprise -------
   Elle remplace le décompte : c'est exactement ce que les six premiers de la
   SERP ont et que nous n'avions pas. */
.preuve{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.preuve-in{display:grid;grid-template-columns:1fr 1.06fr;gap:40px;
  padding-top:44px;padding-bottom:46px;align-items:start}
.shot{margin:0}
.shot img{width:100%;height:auto;border-radius:16px;box-shadow:var(--o2)}
.shot figcaption{margin-top:11px;font-size:12.5px;line-height:1.5;color:var(--mut)}
.shot figcaption b{color:var(--enc2);font-weight:700}

/* ------------- LA SIGNATURE : le seuil du chauffage à distance ---------------
   Elle se re-dérive du site, elle ne se recopie jamais avec la peau. Deux
   conditions CUMULATIVES, et c'est le « ET » qui est l'information.
   ⚠️ Le « ET » est en GLACIER, jamais en carmin : la couleur d'action ne sort
   pas d'un a.cta ou d'un button.cta. */
.sigband{position:relative;z-index:20;border-top:1px solid var(--bord);
  padding-top:26px;padding-bottom:46px}
.sig{display:grid;grid-template-columns:470px minmax(0,1fr);gap:40px;align-items:start}
.sig-t{grid-column:1/-1;display:block;font-size:12.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--bis);margin-bottom:14px}
.seuils{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch}
.plaque{background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:13px 15px 12px;box-shadow:var(--o1);position:relative;overflow:hidden}
.plaque::before{content:'';position:absolute;left:0;top:0;width:38%;height:3px;
  background:var(--grad-t)}
.plaque b{display:block;font-family:'Urbanist';font-weight:600;font-size:27px;
  letter-spacing:-.035em;line-height:1.05;color:var(--bis);font-variant-numeric:tabular-nums}
.plaque span{display:block;font-size:13px;line-height:1.35;color:var(--enc2);margin-top:3px}
.plaque em{display:block;font-style:normal;font-size:12px;line-height:1.35;
  color:var(--mut);margin-top:5px}
.et-lien{align-self:center;font:700 12px/1 'Manrope',system-ui,sans-serif;letter-spacing:.1em;
  color:var(--bis);border:1px solid var(--bord);background:#fff;border-radius:999px;
  padding:7px 9px}
.sig-lg{margin:0;font-size:14.5px;line-height:1.62;color:var(--enc2);max-width:44em;
  align-self:center}
.sig-lg b{color:var(--enc);font-weight:700}
.sig-lg i{font-style:italic}

@media (max-width:1000px){
  .sig{grid-template-columns:minmax(0,1fr);gap:16px}
  .sig-lg{align-self:start}
  .preuve-in{grid-template-columns:1fr;gap:28px}
}
@media (max-width:560px){
  .seuils{grid-template-columns:1fr;gap:9px}
  .et-lien{justify-self:start}
  /* le badge Google passe sur UNE ligne : il coûte 90 px au-dessus de la carte,
     et la carte doit rester au-dessus du pli. La phrase de cadrage complète, elle,
     vit dans le bloc partenaire — elle n'est pas perdue. */
  .gbadge{gap:9px;padding:8px 12px;margin-bottom:14px}
  .gnote{flex-direction:row;align-items:center;gap:9px;flex-wrap:wrap}
  .gsrc{font-size:11.5px;flex:1 1 100%}
  .gsrc .greleve,.gsrc .gplus{display:none}
  .eyebrow{background:none;border:0;padding:0;font-size:12.5px;margin-bottom:9px}
}

/* --- LE TÉMOIN DE RÉSEAU, sorti de la carte de devis -----------------------
   Il y pesait ~200 px et faisait une carte de 1 100 px face à une colonne de
   500 : c'est ce déséquilibre qui produisait les 400 à 600 px de vide du hero.
   Dans la colonne de gauche il remplit ET raccourcit. Et un graphique est une
   raison de croire, pas un champ de formulaire. */
.rsx-hero{margin-top:22px;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:16px 18px 15px;box-shadow:var(--o1);max-width:40em}
.rsx-hero .rsx{margin:0}
.rsx-hero .rsx-barre{height:30px}
.rsx-hero .rsx-p{margin-top:9px;font-size:13px;line-height:1.55;color:var(--enc2)}
/* ⚠️ `.part-id` est en flex-direction:column avec un filet à droite : sans
   remettre la direction ET le filet à zéro, la variante en ligne héritait de
   la colonne — le logo se retrouvait centré au-dessus du nom. */
.part-id-h{display:flex;flex-direction:row;align-items:center;gap:16px;
  margin-bottom:16px;padding:0;border:0}
.part-id-h img{width:76px;height:76px;object-fit:contain;flex:0 0 auto}
.part-id-h .part-nap b{display:block;font-family:'Urbanist';font-weight:600;font-size:21px;
  letter-spacing:-.025em;color:var(--enc);margin-bottom:3px}
.preuve .trust{font-size:14.5px;margin-bottom:0}
.preuve p{max-width:60ch}

/* ==================================================================
   LA CARTE DE DEVIS RESTE AU-DESSUS DU PLI
   Mesuré au banc après la refonte : le témoin remonté dans la colonne de
   gauche avait poussé la carte à 1 144 px sur 390 et 1 377 px sur 320.
   ⚠️ Sous `display:contents`, TOUT enfant porte un `order` explicite —
   sinon il vaut 0 et repasse devant. C'est le piège n°2 du #14.
   ================================================================== */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:30px}
  .hero-grid>div:first-child{display:contents}
  .eyebrow{order:1}
  .gbadge{order:2}
  .hero h1{order:3}
  .sub{order:4}
  .cardwrap{order:5}
  .live{order:6;margin-top:20px}
  .srcline{order:7}
  .trust{order:8}
  .rsx-hero{order:9;max-width:none}
  .warn-col{order:10}
}
/* le complément de périmètre de l'eyebrow : il tient sur une ligne au large,
   il s'escamote au serré. Sans règle, il ne s'escamotait pas — et c'est le
   contrôle « classe sans CSS » du lot 0 qui l'a vu, dans la même session. */
.eb-plus{display:inline}

@media (max-width:560px){
  .eb-plus{display:none}
  /* la carte passe AVANT le sous-titre : à 320 px, chaque objet au-dessus
     d'elle se paie. La note Google reste au-dessus — c'est tout l'intérêt
     de l'avoir mise là. */
  .cardwrap{order:4}
  .sub{order:5}
}

/* la flèche : « → » n'est dans AUCUN .woff2 du réseau — mesuré, pas supposé.
   En masque, elle hérite de currentColor et suit donc la couleur du lien. */
.fl{display:inline-block;width:1.05em;height:.8em;margin-left:.34em;vertical-align:-.04em;
  background:currentColor;
  -webkit-mask:var(--fleche) no-repeat center/contain;mask:var(--fleche) no-repeat center/contain}

/* ==================================================================
   LE RYTHME DE LA PROSE
   Les paragraphes se touchaient : le corps du site n'avait AUCUNE
   marge entre deux <p>, et les h2 collaient à la dernière ligne du
   paragraphe précédent. Ça se voit à l'œil, jamais au banc.
   ⚠️ Le découpage (paragraphe médian 341 → < 200 caractères) et les
   ~200 intertitres à écrire sont le LOT 5 — ici on ne règle que
   l'espacement.
   ================================================================== */
.sec p + p,.sec p + ul,.sec ul + p,.sec p + ol,.sec ol + p{margin-top:.95em}
.sec h2{margin-top:2.15em}
.sec > .wrap > h2:first-child,.sec h2:first-child{margin-top:0}
.sec h3{margin-top:1.7em;margin-bottom:.5em;font-family:'Urbanist';font-weight:600;
  letter-spacing:-.02em;font-size:20px;color:var(--enc)}
/* ces blocs ont leur propre rythme : on ne leur impose pas celui de la prose */
.card p + p,.rsx p + p,.avi p + p,.preuve p + p,.plaque p + p,
.foot-txt + .foot-txt,.chip p + p{margin-top:0}
.card h3,.avi h3,.presta-txt h3{margin-top:0}

@media (max-width:420px){
  /* le texte d'exemple tient sur 3 lignes à 390 px : sans ça, il est COUPÉ */
  textarea.h-in{min-height:78px}
}

/* ==================================================================
   LES ILLUSTRATIONS
   Avant le 23.08, 74 pages sur 75 ne portaient AUCUNE photographie —
   4 photos pour 161 350 mots de corps, quand le premier de la SERP
   est à une image pour 58 mots.
   ⚠️ `width` et `height` sont écrits sur chaque <img> : sans eux la
   page saute au chargement, et c'est le genre de défaut qu'aucun banc
   ne voit parce qu'il ne dure qu'une seconde.
   ================================================================== */
.ill{margin:26px 0;max-width:68ch}
.ill img{width:100%;height:auto;border-radius:12px;box-shadow:var(--o1)}
.ill figcaption{margin-top:9px;font-size:12.5px;line-height:1.5;color:var(--mut)}
/* ⚠️ --bord (#cfe0ec) sur blanc mesure 1,2:1 : la ligne de crédit était
   ILLISIBLE. Et un crédit illisible ne remplit pas la condition de la
   licence. Elle passe à --mut, 5,65:1. */
.ill-cr{display:block;margin-top:2px;font-size:11.5px;color:var(--mut)}
.ill-large{max-width:none}
.ill-lieu img{aspect-ratio:4/3;object-fit:cover}
.illband{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.illband .ill{margin:0;max-width:none}
.illband .ill img{aspect-ratio:4/3;object-fit:cover}
.sec-ill{padding-top:0}
/* la page des crédits : une liste, pas une galerie */
.credits{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.credits li{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:start;
  padding-bottom:14px;border-bottom:1px solid var(--line)}
.credits img{width:96px;height:72px;object-fit:cover;border-radius:8px}
.credits b{display:block;font-size:14.5px;color:var(--enc)}
.credits span{font-size:13px;color:var(--enc2)}
.credits em{display:block;font-style:normal;font-size:12.5px;color:var(--mut);margin-top:3px}
@media (max-width:560px){
  .credits li{grid-template-columns:1fr}
  .credits img{width:100%;height:auto;aspect-ratio:4/3}
}

/* le renvoi de corps vers une page voisine — il compte comme un lien ENTRANT,
   là où un lien de pied de page ne prouve que l'existence d'un menu. */
.art-suite{margin:22px 0 0;padding:13px 16px;background:#f6fbfd;border:1px solid var(--line);
  border-left:3px solid var(--bis);border-radius:0 10px 10px 0;font-size:14.5px;
  line-height:1.55;color:var(--enc2);max-width:68ch}