/* ================================================================
   pompe-a-chaleur-martigny.ch — registre « BRAISE & FRAMBOISE »
   Rouille · ambre · or · rose framboise · contrepoint teal
   Reprise de la peau en réserve « Braise & vigne », décalée vers le
   framboise (#e11d62 remplace le vin #9f1239). Display Instrument Sans.

   Le registre précédent, « Coude & moraine » (sable, galet, assise
   minérale), est ABANDONNÉ : c'est exactement le registre qui a fait
   refuser quatre peaux sur ce réseau — du papier et du mobilier
   minéral sur un métier technique.

   La matière, en quatre règles :
     · toute surface en relief porte une ARÊTE CLAIRE en haut ;
     · toute ombre est TEINTÉE de la famille, jamais du gris neutre ;
     · le verre est un dégradé translucide + flou + saturation, jamais
       un aplat à opacité — un aplat translucide n'a aucun contraste
       garanti, il a celui du pixel qui se trouve dessous ;
     · rien ne bouge sans revenir : survol = lever, appui = poser.
================================================================ */
@font-face{font-family:'Instrument';font-weight:400 700;font-display:swap;src:url(/fonts/instrument.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{
  /* ⚠️ PIÈGE 1 — color-scheme aux DEUX endroits (ici et dans le <meta> de
     gabarit.py), plus un fond explicite sur html. Sans lui, Chrome Auto Dark
     INVERSE la page, et AUCUN test de contraste ne le voit : le CSS servi
     reste juste. Seule une capture le révèle. */
  color-scheme:light only;

  /* --- famille « Braise & framboise » --- */
  --a1:#c2410c;--a1f:#9a3412;--a1t:#7c2d12;--a1c:#f97316;
  --a2:#f59e0b;--a3:#e11d62;--a3f:#a5164b;--a3c:#f472a8;--a4:#eab308;

  /* fonds */
  --bg:#fff7ee;--bg2:#fff7ee;--bg3:#fce7d3;--bg4:#f9dabf;--blanc:#fffdfa;
  --ciel:linear-gradient(178deg,#fff7ee,#fce7d3 54%,#f9dabf);

  /* encres — mesurées. #8a6244 échoue à 3,76:1, ne pas éclaircir --mut. */
  --enc:#231206;--enc2:#54321a;--mut:#7a5334;
  /* ⚠️ --mut tient sur la crème, PAS sur l'aurore : la ligne de source tombait
     à 3,89:1 là où le voile s'éteint. Le texte posé sur le décor prend --mut-f. */
  --mut-f:#6b452a;

  /* le CTA. ⚠️ PIÈGE 6 — le dégradé d'une surface qui porte du BLANC part du ton
     FONCÉ. La peau en réserve donnait linear-gradient(135deg,#f97316,…) : mesuré,
     le blanc y tombe à 2,80:1, sur le seul élément qui convertit. Et le reflet de
     verre du bouton ÉCLAIRCIT son haut : avec un reflet à .22 le blanc retombait
     à 4,38:1 pour un seuil de 4,5. Reflet ramené à .13 → mesuré 4,87:1.
     --cta-cl ne sert QUE de départ de dégradé, jamais de fond à du texte. */
  --cta:#9a3412;--cta-cl:#a83a0d;
  --grad-cta:linear-gradient(168deg,#a83a0d 0%,#9a3412 46%,#7c2d12 100%);
  /* dégradé de titre : il reste SOMBRE d'un bout à l'autre. Un dégradé qui finit
     en ambre tombe à 1,99:1 sur la crème, même au seuil « grand texte » de 3,0. */
  --grad-t:linear-gradient(104deg,#a5164b 2%,#9a3412 50%,#c2410c 98%);

  /* le contrepoint FROID — il tient l'ensemble, il ne teint pas la page */
  --gla:#0f766e;--gla-t:#0b5f58;--gla-c:#14b8a6;
  --line:#e7d3bd;--line2:#f0e0cf;--ok:#0f766e;

  /* le motif métier : les courbes de niveau du coteau. Deux nappes de pas
     COPREMIERS (27 / 61) — elles ne se resynchronisent jamais, donc l'œil ne
     trouve pas de motif répété. Le registre précédent utilisait des arcs
     concentriques ; il disparaît avec lui. */
  --arc:repeating-linear-gradient(174deg,transparent 0 27px,rgba(154,52,18,.30) 27px 28px);
  --arc2:repeating-linear-gradient(6deg,transparent 0 61px,rgba(15,118,110,.20) 61px 62px);

  /* --- la profondeur : ombres TEINTÉES, jamais du gris ---
     L'« assise » du galet (un aplat net 0 3px 0) disparaît : c'était la
     signature du registre abandonné. --galet garde son NOM pour ne casser
     aucun sélecteur, mais porte désormais trois couches et une arête claire. */
  --o1:0 1px 2px rgba(96,40,12,.06),0 3px 8px -2px rgba(96,40,12,.10);
  --o2:0 2px 5px rgba(96,40,12,.07),0 10px 22px -6px rgba(96,40,12,.17),0 22px 44px -14px rgba(96,40,12,.20);
  --o3:0 3px 8px rgba(96,40,12,.08),0 18px 38px -10px rgba(96,40,12,.20),0 46px 90px -22px rgba(96,40,12,.30);
  --o-cta:0 1px 2px rgba(124,45,18,.30),0 6px 14px -3px rgba(154,52,18,.38),0 16px 34px -10px rgba(154,52,18,.42);
  --o-cta-h:0 2px 4px rgba(124,45,18,.32),0 12px 26px -5px rgba(154,52,18,.44),0 28px 56px -14px rgba(154,52,18,.48);
  --arete:inset 0 1px 0 rgba(255,255,255,.92);
  --arete-f:inset 0 1px 0 rgba(255,255,255,.26);
  --galet:var(--o2),var(--arete);

  /* le verre */
  --verre:linear-gradient(158deg,rgba(255,253,250,.86),rgba(255,244,232,.62));
  --verre-b:1px solid rgba(255,255,255,.86);

  /* les rayons : le galet usé d'un côté et cassé de l'autre disparaît */
  --r-b:20px;--r-s:11px;
}
html{background:#fff7ee;color-scheme:light only}
*{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(--cta)}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:var(--enc);padding:8px 16px;z-index:200;border-radius:0 0 8px 0}
.skip:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--gla-t);outline-offset:2px}
.wrap{width:min(1240px,100%);margin:0 auto;padding-left:24px;padding-right:24px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  /* .rvi et .card-in n'ont plus besoin de garde-fou : leur état de REPOS est
     l'état lisible, le masquage vit dans le from: de leurs keyframes. */
  .js-rev [data-rev]{opacity:1!important;transform:none!important}
}

/* ---------------- header ---------------- */
.site-head{position:sticky;top:0;z-index:80;display:flex;align-items:center;gap:16px;padding:12px 24px;background:linear-gradient(180deg,rgba(255,250,244,.90),rgba(255,247,238,.78));backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);border-bottom:1px solid rgba(231,211,189,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.7);transition:box-shadow .25s}
.site-head.scrolle{box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 6px 20px -10px rgba(96,40,12,.30)}
/* Une MARQUE, pas une ligne de texte : tuile en degrade chaud, arete claire,
   ombre teintee, rainure interieure, et les trois ondes de chaleur en SVG.
   Le mot est grave — une ombre claire d'1 px sous les lettres suffit a le
   decoller de la creme. */
.logo{display:inline-flex;align-items:center;gap:11px;font-family:'Instrument';font-weight:700;font-size:20.5px;letter-spacing:-.032em;color:var(--enc);text-decoration:none;white-space:nowrap}
.logo-m{position:relative;width:38px;height:38px;border-radius:11px;flex:none;background:var(--grad-cta);box-shadow:var(--o-cta),var(--arete-f),inset 0 -1px 0 rgba(74,22,8,.45);display:grid;place-items:center;transition:transform .26s cubic-bezier(.2,.8,.3,1),box-shadow .26s}
.logo-m::before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(152deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.06) 42%,transparent 62%);pointer-events:none}
.logo-m::after{content:'';position:absolute;inset:1.5px;border-radius:9px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);pointer-events:none}
.logo-m svg{position:relative;z-index:1;width:21px;height:21px;filter:drop-shadow(0 1px 1px rgba(74,22,8,.5))}
.logo:hover .logo-m{transform:translateY(-1.5px) rotate(-3deg);box-shadow:var(--o-cta-h),var(--arete-f)}
.logo-t{display:flex;flex-direction:column;line-height:1}
.logo-p{color:var(--a3f);font-family:'Manrope',sans-serif;font-size:11px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;margin-bottom:2px}
.logo-n{color:var(--enc);text-shadow:0 1px 0 rgba(255,255,255,.9)}
.nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.nav a{color:var(--enc2);text-decoration:none;font-size:14px;font-weight:700;padding:8px 12px;border-radius:var(--r-s);transition:background .18s,color .18s}
.nav a{position:relative}
.nav a::after{content:'';position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:2px;background:var(--grad-cta);transform:scaleX(0);transform-origin:left;transition:transform .26s cubic-bezier(.2,.8,.3,1)}
.nav a:hover{background:rgba(255,255,255,.55);color:var(--cta)}
.nav a:hover::after{transform:scaleX(1)}
.nav a.on{color:var(--cta)}
.head-cta{position:relative;isolation:isolate;overflow:hidden;font-weight:700;font-size:14px;color:#fff;text-decoration:none;background:var(--grad-cta);padding:10px 18px;border-radius:999px;white-space:nowrap;box-shadow:var(--o-cta),var(--arete-f),inset 0 -1px 0 rgba(74,22,8,.42);transition:transform .24s cubic-bezier(.2,.8,.3,1),box-shadow .24s,filter .24s}
/* Le verre du bouton : une lumiere haute qui s'eteint au tiers.
   ⚠️ .13 et pas .22 : a .22, le reflet ECLAIRCIT le haut du bouton et le blanc
   du CTA retombe a 4,38:1 pour un seuil de 4,5. La matiere cree alors le defaut
   que le piege n°6 decrit. Mesure a .13 : 4,87:1. */
.head-cta::before,.cta::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.02) 46%,transparent 70%);pointer-events:none}
/* le balayage : il passe au survol, il ne clignote pas */
.head-cta::after,.cta::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:-1;transform:skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.26),transparent);transition:left .62s cubic-bezier(.3,.7,.3,1);pointer-events:none}
.head-cta:hover,.cta:hover{transform:translateY(-2px);box-shadow:var(--o-cta-h),var(--arete-f);filter:saturate(1.06)}
.head-cta:hover::after,.cta:hover::after{left:120%}
.head-cta:active,.cta:active{transform:translateY(0) scale(.994);box-shadow:0 1px 3px rgba(124,45,18,.34),inset 0 2px 6px rgba(74,22,8,.34)}
.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){
  /* ancré sur l'entête elle-même (sticky = bloc conteneur) : aucun nombre
     magique à tenir à jour palier par palier — 57px recouvrait 10px d'entête.
     Fermé, le menu ne peint plus DU TOUT au lieu de glisser par-dessus. */
  .nav{position:absolute;top:100%;left:0;right:0;background:rgba(244,241,236,.98);backdrop-filter:blur(14px);flex-direction:column;padding:16px 24px 24px;gap:4px;border-bottom:1px solid var(--line);margin:0;transform:translateY(-8px);opacity:0;visibility:hidden;transition:transform .3s ease,opacity .25s ease,visibility 0s .3s}
  .nav.ouvert{transform:none;opacity:1;visibility:visible;transition:transform .3s ease,opacity .25s ease,visibility 0s}
  .nav a{font-size:16px;padding:12px 8px}
  .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(--ciel);isolation:isolate}
.hero-max{display:flex;align-items:stretch}
.hero-page{padding:8px 0 16px}
.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)}
/* deux foyers CHAUDS par le BAS : le soleil rasant sur le fond de vallée */
.f1{width:56vw;height:48vw;left:-6%;bottom:-18%;background:radial-gradient(closest-side,rgba(249,115,22,.46),rgba(249,115,22,.15) 55%,transparent 76%);filter:blur(62px);animation:d1 47s ease-in-out infinite alternate}
.f2{width:50vw;height:44vw;right:-8%;bottom:-22%;background:radial-gradient(closest-side,rgba(245,158,11,.42),rgba(245,158,11,.13) 55%,transparent 76%);filter:blur(66px);animation:d2 61s ease-in-out infinite alternate}
/* deux FROIDS en haut : ils tiennent l'ensemble, ils ne le teignent pas.
   Montés plus haut que ça, ils lavaient toute la page en gris-lavande. */
.f3{width:42vw;height:36vw;left:6%;top:-24%;background:radial-gradient(closest-side,rgba(20,184,166,.26),rgba(20,184,166,.08) 55%,transparent 76%);filter:blur(64px);animation:d3 53s ease-in-out infinite alternate}
.f4{width:38vw;height:32vw;right:2%;top:-20%;background:radial-gradient(closest-side,rgba(125,211,252,.22),transparent 72%);filter:blur(60px);animation:d4 71s ease-in-out infinite alternate}
/* un FRAMBOISE au centre : c'est LUI qui fait « vigne » plutôt que rouille pur.
   Il n'existait pas dans le registre précédent ; il est ajouté par gabarit.py. */
.f5{width:46vw;height:42vw;left:26%;top:12%;background:radial-gradient(closest-side,rgba(225,29,98,.30),rgba(225,29,98,.09) 55%,transparent 76%);filter:blur(70px);animation:d5 59s ease-in-out infinite alternate}
@keyframes d1{to{transform:translate(5vw,-4vh) scale(1.13)}}
@keyframes d2{to{transform:translate(-4vw,-5vh) scale(1.09)}}
@keyframes d3{to{transform:translate(4vw,5vh) scale(1.11)}}
@keyframes d4{to{transform:translate(-5vw,4vh) scale(1.07)}}
@keyframes d5{to{transform:translate(3vw,-4vh) scale(1.16)}}
/* motif du métier : arcs concentriques — le coude du Rhône, les arcs de moraine */
/* les courbes de niveau du coteau. ⚠️ Le masque était une ellipse : un lavis
   en ellipse a un BORD, et ce bord se voit. Masque LINÉAIRE, monotone. */
.motif{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.22;background-image:var(--arc),var(--arc2);animation:arcDerive 67s linear infinite;will-change:background-position;mask-image:linear-gradient(178deg,rgba(0,0,0,.35),#000 55%,rgba(0,0,0,.5));-webkit-mask-image:linear-gradient(178deg,rgba(0,0,0,.35),#000 55%,rgba(0,0,0,.5))}
@keyframes arcDerive{to{background-position:0 -270px,0 610px}}
.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(225,29,98,.34),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}}
/* ⚠️ PIÈGE 4 — le voile est porté par .hero LUI-MÊME, jamais par la colonne de
   texte : sous 1080 px celle-ci passe en display:contents et n'a PLUS DE BOÎTE.
   Un voile qu'elle porterait en ::before n'existerait alors plus du tout, et le
   titre se retrouverait posé sur les foyers pleins. */
.voile{position:absolute;inset:0;z-index:3;background:linear-gradient(96deg,rgba(255,247,238,.94) 0%,rgba(255,245,234,.72) 42%,rgba(255,244,232,0) 76%);pointer-events:none}
.grain{position:absolute;inset:0;z-index:4;opacity:.30;mix-blend-mode:multiply;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.76' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .16 0 0 0 0 .05 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
.halo{position:absolute;z-index:5;right:2%;top:10%;width:48%;height:78%;pointer-events:none;will-change:transform}
.halo i{position:absolute;inset:0;border-radius:38% 62% 55% 45%/45% 40% 60% 55%;will-change:transform,opacity}
.halo .h1{background:radial-gradient(closest-side,rgba(244,114,168,.30),transparent 70%);animation:haloResp 8.6s ease-in-out infinite alternate}
.halo .h2{inset:14%;background:radial-gradient(closest-side,rgba(255,237,213,.62),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}}
/* align-items:start, PAS center : centrer une colonne de texte de 574 px contre
   une carte de 975 px poussait 200 px de vide au-dessus du H1. */
.hero-grid{position:relative;z-index:7;display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:start;padding-top:40px;padding-bottom:48px}

/* ---------------- hero : texte ---------------- */
.eyebrow{position:relative;display:inline-block;font-family:'PlexMono';font-weight:600;font-size:11.5px;line-height:1.45;letter-spacing:.16em;text-transform:uppercase;color:var(--cta);border:var(--verre-b);padding:9px 17px 9px 33px;border-radius:999px;background:var(--verre);backdrop-filter:blur(12px) saturate(1.4);-webkit-backdrop-filter:blur(12px) saturate(1.4);box-shadow:var(--o1),var(--arete),0 0 0 1px rgba(231,211,189,.4)}
/* La braise qui bat, dans la MARGE — jamais dans le flux du texte.
   ⚠️ En ::before INLINE elle vivait dans la boite de ligne : des que l'eyebrow
   passait a deux lignes, la 2e ligne revenait se ranger juste sous la pastille
   et la recouvrait — mesure a 1,41:1. Hors flux, elle se centre et ne croise
   plus rien. C'est le cas d'ecole du piege n°1, cote CONCEPTION. */
.eyebrow::before{content:'';position:absolute;left:15px;top:50%;margin-top:-3.5px;width:7px;height:7px;border-radius:50%;background:var(--a1);box-shadow:0 0 0 3px rgba(194,65,12,.16),0 0 9px rgba(249,115,22,.7);animation:braise 3.6s ease-in-out infinite}
@keyframes braise{0%,100%{opacity:1}50%{opacity:.72}}
.hero h1{font-family:'Instrument';font-size:clamp(32px,4.4vw,56px);line-height:1.05;margin:16px 0 16px;text-wrap:balance}
.hero-page h1{font-size:clamp(28px,3.45vw,44px)}
.hero h1 .l{display:block}
.hero h1 .thin{font-weight:400;color:var(--enc2);text-shadow:0 1px 0 rgba(255,255,255,.75)}
.hero h1 .fat{font-weight:700;text-shadow:0 1px 0 rgba(255,255,255,.75)}
/* ⚠️ Le text-shadow des lignes NE DOIT PAS descendre dans le mot en degrade : un
   texte en background-clip:text a color:transparent, l'ombre blanche se peint
   alors EN PLEINE LETTRE et « 30 secondes » sort delave. Mesure deux fois avant
   que la cause soit trouvee — le premier coupable soupconne n'etait pas le bon.
   ⚠️ Et jamais d'« eclat » en ::after par-dessus : le pseudo n'a pas de texte,
   son background-clip ne clippe donc rien et il peint sur toute la boite. */
.hero h1 .fat b{background:var(--grad-t);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.rv{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
/* le masquage vit dans le from: — sans JS, sans animation ou frise gelée,
   le mot reste DANS sa boîte et lisible */
.rvi{display:inline-block;animation:rvUp .75s cubic-bezier(.2,.85,.25,1) both;animation-delay:calc(var(--d)*1ms)}
@keyframes rvUp{from{transform:translateY(115%)}to{transform:none}}
.fini .rvi{animation:none}
.sub{color:var(--enc2);max-width:50ch;font-size:16.5px;margin-bottom:24px}
.live{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.chip{position:relative;overflow:hidden;background:var(--verre);border:var(--verre-b);border-radius:var(--r-b);padding:12px 16px;backdrop-filter:blur(14px) saturate(1.45);-webkit-backdrop-filter:blur(14px) saturate(1.45);box-shadow:var(--o2),var(--arete),0 0 0 1px rgba(231,211,189,.35);transition:transform .24s cubic-bezier(.2,.8,.3,1),box-shadow .24s}
.chip::after{content:'';position:absolute;top:0;left:0;right:0;height:60%;background:linear-gradient(178deg,rgba(255,255,255,.5),transparent);pointer-events:none}
.chip small,.chip b{position:relative;z-index:1}
.chip:hover{transform:translateY(-2px);box-shadow:var(--o3),var(--arete)}
.chip small{display:block;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--enc2);margin-bottom:4px}
.chip b{font-family:'PlexMono';font-weight:600;font-size:19px;color:var(--enc);font-variant-numeric:tabular-nums}
.chip.a b{color:var(--cta)}
.chip.flash{animation:flashA 1s ease}
@keyframes flashA{0%{background-color:rgba(225,29,98,.18)}100%{background-color:transparent}}
.srcline{font-size:12px;color:var(--enc2);margin-bottom:16px;max-width:52ch}
.trust{list-style:none;display:grid;gap:8px;font-size:14.5px;color:var(--enc2)}
.trust li{display:flex;gap:8px;align-items:baseline}
.trust li::before{content:'';flex:none;width:1.05em;height:1.05em;margin-top:.18em;background:var(--ok);-webkit-mask:var(--m-ok) center/contain no-repeat;mask:var(--m-ok) center/contain no-repeat}
.warn{margin-top:16px;display:none;gap:8px;border:1px solid rgba(122,59,31,.4);border-left:3px solid var(--cta);background:rgba(250,245,238,.94);border-radius:0 var(--r-s) var(--r-s) 0;padding:8px 12px;font-size:13px;color:var(--cta);max-width:54ch}
.warn.on{display:flex;animation:flashA 1.1s ease}
/* le signe d'alerte, pose par le CSS parce que le JS ne peut poser que du texte */
.warn.on::before{content:'';flex:none;width:1.15em;height:1.15em;margin-top:.08em;background:currentColor;-webkit-mask:var(--m-warn) center/contain no-repeat;mask:var(--m-warn) center/contain no-repeat}
/* l'alerte : colonne texte en desktop, 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 figure du hero : l'echelle d'altitude ----------------
   Traitee comme un INSTRUMENT : un tube de verre creuse, la matiere chaude
   dedans, des crans a leur altitude vraie. Elle est propre a Martigny. */
.fig{margin:22px 0 0}
.fig-alt{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 28px;align-items:center;padding:18px 20px;border-radius:14px;background:var(--verre);border:var(--verre-b);backdrop-filter:blur(12px) saturate(1.35);-webkit-backdrop-filter:blur(12px) saturate(1.35);box-shadow:var(--o1),var(--arete),0 0 0 1px rgba(231,211,189,.35)}
.alt-ech{position:relative;height:180px;width:206px}
.alt-b{position:absolute;left:0;top:0;bottom:0;width:11px;border-radius:99px;background:linear-gradient(180deg,var(--a3f) 0%,var(--a1f) 38%,var(--a1) 74%,var(--a2) 100%);box-shadow:inset -1px 0 2px rgba(74,22,8,.35),inset 1.5px 0 0 rgba(255,255,255,.42),0 1px 4px rgba(96,40,12,.22)}
.alt-cran{position:absolute;left:0;top:var(--y);width:20px;height:2px;border-radius:2px;background:var(--a1t);opacity:.5;box-shadow:0 1px 0 rgba(255,255,255,.75)}
.alt-k{position:absolute;left:26px;white-space:nowrap;font-size:11.5px;line-height:1.3;color:var(--mut)}
.alt-k b{display:block;font-family:'PlexMono';font-weight:600;font-size:15px;letter-spacing:-.03em;color:var(--enc);text-shadow:0 1px 0 rgba(255,255,255,.85)}
.alt-haut{top:-2px}
.alt-bas{bottom:-2px}
.alt-k::before{content:'';position:absolute;left:-26px;width:16px;height:2.5px;border-radius:2px;background:var(--a1f);box-shadow:0 1px 0 rgba(255,255,255,.7)}
.alt-haut::before{top:9px}
.alt-bas::before{bottom:9px}
.alt-amp{position:absolute;left:26px;top:50%;transform:translateY(-50%);font-size:11px;line-height:1.3;color:var(--mut)}
.alt-amp b{display:block;font-family:'Instrument';font-weight:700;font-size:22px;letter-spacing:-.04em;line-height:1.02;background:var(--grad-t);-webkit-background-clip:text;background-clip:text;color:transparent}
.fig-l{font-size:13.5px;line-height:1.6;color:var(--enc2);margin:0}
.fig-l b{color:var(--enc)}
@media (max-width:560px){
  .fig-alt{grid-template-columns:minmax(0,1fr);gap:16px;padding:15px 16px}
  .alt-ech{width:100%;height:158px}
}

/* ---------------- les glyphes SANS POLICE ----------------
   ⚠️ ★ → ✓ ← ≈ ⚠ ne sont dans AUCUNE des quatre polices embarquees (verifie
   sur leurs cmap : Instrument Sans en couvre 208, aucun des six). Mesure avant
   ce lot : 622 occurrences rendues. Ils passent en MASQUE CSS ou en toutes
   lettres. `polices.py` refuse desormais tout retour en arriere.
   ⚠️ Aucune couleur dans les data-URI : le trace est en `black`, qui ne sert
   que d'alpha, et la couleur vient de currentColor. Un hex ENCODE dans un
   data-URI echappe meme a l'inventaire des hex — il survivrait a un changement
   de peau sans que rien ne le signale. */
:root{
  --m-fl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --m-warn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.6L1.8 20.4h20.4z'/%3E%3Cpath d='M12 9.6v4.6M12 17.4v.1'/%3E%3C/svg%3E");
  --m-ok:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E");
}
.fl{display:inline-block;width:1.05em;height:1em;vertical-align:-.12em;flex:none;background:currentColor;-webkit-mask:var(--m-fl) center/contain no-repeat;mask:var(--m-fl) center/contain no-repeat}
.ok-i{display:inline-block;width:1.05em;height:1.05em;vertical-align:-.16em;flex:none;background:currentColor;-webkit-mask:var(--m-ok) center/contain no-repeat;mask:var(--m-ok) center/contain no-repeat}
/* les etoiles d'un avis PORTENT du sens : trace SVG en ligne, pas un masque */
.et svg{display:block;height:15px;width:auto}

/* ---------------- la carte de devis ---------------- */
.cardwrap{position:relative}
/* ⚠️ PIEGE 5 — un hero colore propage sa couleur DANS la carte. La regle se pose
   sur le CONTENEUR, jamais sur l'element fautif decouvert apres coup. */
.card{position:relative;background:linear-gradient(178deg,rgba(255,255,255,.97),rgba(255,250,243,.94));color:var(--enc);border-radius:var(--r-b);padding:26px 24px 22px;box-shadow:var(--o3),var(--arete),0 0 0 1px rgba(231,211,189,.55);backdrop-filter:blur(6px);transition:transform .25s,box-shadow .25s}
/* le reflet de verre en haut de la carte */
.card::after{content:'';position:absolute;top:0;left:0;right:0;height:180px;z-index:0;background:linear-gradient(178deg,rgba(255,255,255,.62),transparent);pointer-events:none;border-radius:var(--r-b) var(--r-b) 0 0}
.card:hover{transform:translateY(-3px)}
.card>*{position:relative;z-index:2}
/* le filet de moraine : trois segments rectilignes */
.beam{position:absolute;left:0;right:0;top:0;height:4px;z-index:4;border-radius:var(--r-b) var(--r-b) 0 0;background:linear-gradient(90deg,var(--a3),var(--a1) 42%,var(--a2) 78%,var(--a4));box-shadow:0 1px 6px rgba(225,29,98,.35);pointer-events:none}
.sheenbox{position:absolute;inset:0;z-index:1;border-radius:var(--r-b);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,.3) 50%,rgba(79,156,153,.07) 58%,transparent);transform:skewX(-12deg);animation:sheen 9s ease-in-out infinite;will-change:transform}
@keyframes sheen{0%,56%{transform:translateX(0) skewX(-12deg)}90%,100%{transform:translateX(420%) skewX(-12deg)}}
/* ⚠️ PIEGE 17 : h2, jamais h3. Et la REGLE suit le niveau — sinon le titre
   sort en taille h2 par defaut. Au #18, 132 elements etaient concernes. */
.card h2{font-family:'Instrument';font-weight:800;font-size:18px;margin-bottom:4px;line-height:1.16}
.mini{font-family:'PlexMono';font-weight:600;font-size:13px;color:var(--cta);margin-bottom:16px;min-height:18px;font-variant-numeric:tabular-nums}
.fld{margin-bottom:12px}
.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(--cta)}
input[type=range]{width:100%;appearance:none;height:8px;border-radius:99px;background:linear-gradient(90deg,var(--a1) var(--fill,40%),#ecdcc9 var(--fill,40%));box-shadow:inset 0 1px 3px rgba(96,40,12,.22),inset 0 -1px 0 rgba(255,255,255,.7);cursor:pointer}
input[type=range]::-webkit-slider-thumb{appearance:none;width:22px;height:22px;border-radius:50%;background:linear-gradient(178deg,#fff,#fdf0e2);border:2.5px solid var(--a1);box-shadow:0 1px 2px rgba(96,40,12,.24),0 5px 12px -3px rgba(154,52,18,.42),inset 0 1px 0 rgba(255,255,255,.95);transition:transform .15s,box-shadow .3s}
input[type=range]:active::-webkit-slider-thumb,input[type=range]:focus::-webkit-slider-thumb{box-shadow:0 1px 2px rgba(96,40,12,.24),0 5px 12px -3px rgba(154,52,18,.42),0 0 0 8px rgba(194,65,12,.14)}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:linear-gradient(178deg,#fff,#fdf0e2);border:2.5px solid var(--a1);box-shadow:0 1px 2px rgba(96,40,12,.24),0 5px 12px -3px rgba(154,52,18,.42)}
.puces{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.puces button{font-family:'Manrope';font-size:12.5px;font-weight:700;color:var(--enc2);background:linear-gradient(178deg,#fff,#fdf4ea);border:1.5px solid var(--line);border-radius:var(--r-s);padding:9px 4px;cursor:pointer;box-shadow:var(--o1),inset 0 1px 0 rgba(255,255,255,.9);transition:transform .18s cubic-bezier(.2,.8,.3,1),border-color .18s,box-shadow .18s,color .18s;min-width:0}
.puces button:hover{border-color:var(--a1c);transform:translateY(-1.5px);box-shadow:var(--o2)}
/* choisie = ENFONCEE : l'ombre passe a l'interieur. C'est ce qui distingue un
   etat d'un survol sans avoir besoin d'une couleur de plus. */
.puces button.on{background:linear-gradient(178deg,#fdeadb,#fbe0cb);border-color:var(--a1);color:var(--cta);transform:none;box-shadow:inset 0 2px 5px rgba(154,52,18,.16),inset 0 -1px 0 rgba(255,255,255,.6);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:8px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--enc2);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:8px;margin-bottom:8px}
.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:linear-gradient(178deg,#fefaf5,#fffdfa);border:1.5px solid var(--line);border-radius:var(--r-s);padding:12px 16px;box-shadow:inset 0 1px 3px rgba(96,40,12,.07);transition:border-color .18s,box-shadow .18s}
.h-in:hover{border-color:#dcc0a2}
/* le halo doux est pour la SOURIS. Au clavier, .h-in:focus (0,2,0) battait
   input:focus-visible (0,1,1) et supprimait l'anneau : on ne coupe donc
   l'outline que quand le focus n'est PAS visible. */
.h-in:focus{border-color:var(--a1);box-shadow:inset 0 1px 3px rgba(96,40,12,.07),0 0 0 3.5px rgba(194,65,12,.13)}
.h-in:focus:not(:focus-visible){outline:none}
.h-in::placeholder{color:#9c7f66}/* 5,10:1 sur blanc — l'ancien #8d857a tombait à 3,64:1 */
textarea.h-in{resize:none;min-height:58px;line-height:1.5}
.hpot{position:absolute;left:-9999px;opacity:0}
.cta{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;text-align:center;font-family:'Instrument';font-weight:700;font-size:17px;letter-spacing:-.02em;color:#fff;background:var(--grad-cta);border:none;border-radius:14px;padding:16px 24px;cursor:pointer;text-decoration:none;box-shadow:var(--o-cta),var(--arete-f),inset 0 -1px 0 rgba(74,22,8,.42);transition:transform .24s cubic-bezier(.2,.8,.3,1),box-shadow .24s,filter .24s}
.cta:hover{transform:translateY(-2px);box-shadow:0 5px 0 rgba(35,42,44,.2),0 14px 28px rgba(122,59,31,.3)}
.cta .fl{transition:transform .18s}
.cta:hover .fl{transform:translateX(4px)}
.cta[disabled]{opacity:.6;cursor:wait;transform:none}
/* ce qu'on reçoit, juste sous le bouton — les trois faits sont deja ceux du site */
.promesse{text-align:center;font-size:12.5px;line-height:1.5;color:var(--enc2);margin-top:8px}
.alt{text-align:center;font-size:13px;color:var(--enc2);margin-top:12px}
.alt a{color:var(--cta);text-decoration:none;font-weight:700}
.lpd{font-size:11px;color:var(--enc2);text-align:center;margin-top:8px}
.lpd a{color:var(--enc2)}
.ok-msg{margin-top:12px;text-align:center;font-weight:700;color:var(--ok);background:rgba(44,122,82,.1);border:1px solid rgba(44,122,82,.35);border-radius:var(--r-s);padding:12px}
/* état de repos = état LISIBLE : sans JS (.go n'est jamais posée) la carte de
   devis — l'unique voie de conversion — s'affiche normalement. */
.card-in{opacity:1}
.go .card-in{animation:cardIn .9s cubic-bezier(.16,1.3,.3,1) both;animation-delay:.5s}
@keyframes cardIn{from{opacity:0;transform:translateY(30px) scale(.985)}to{opacity:1;transform:none}}
.fini .card-in{animation:none}

/* ------- SIGNATURE : le calendrier d'occupation ------- */
.occ{position:relative;margin:17px 0 2px;padding:16px 15px 14px;border-radius:14px;background:linear-gradient(178deg,rgba(255,252,247,.95),rgba(253,240,228,.9));border:1px solid rgba(240,224,207,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 3px rgba(96,40,12,.05)}
.occ-t{display:block;font-family:'PlexMono';font-weight:600;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--enc2);margin-bottom:7px}
.occ-ruban{display:grid;grid-template-columns:repeat(12,1fr);gap:3.5px}
.occ-ruban i{display:grid;place-items:center;height:28px;border-radius:6px;font-style:normal;font-family:'PlexMono';font-weight:600;font-size:10px;line-height:1;transition:transform .2s cubic-bezier(.2,.8,.3,1)}
.occ-ruban i:hover{transform:translateY(-2px)}
/* La SIGNATURE re-teintee. Les trois regimes doivent rester distinguables sans
   la couleur seule : chauffage complet = plein et fonce, hors-gel = clair a
   liseré ambre, eau chaude = clair a liseré teal. La forme du liseré porte
   l'information autant que la teinte. */
.m-p{background:var(--grad-cta);color:#fff;box-shadow:0 1px 2px rgba(124,45,18,.28),0 3px 7px -2px rgba(154,52,18,.34),inset 0 1px 0 rgba(255,255,255,.24)}
.m-g{background:linear-gradient(178deg,#fdeacd,#fbdfba);color:var(--a1t);box-shadow:inset 0 0 0 1.5px var(--a2),inset 0 1px 0 rgba(255,255,255,.7)}
.m-e{background:linear-gradient(178deg,#e3f5f2,#d3ede9);color:#0b5a54;box-shadow:inset 0 0 0 1.5px var(--gla),inset 0 1px 0 rgba(255,255,255,.7)}
.occ-lg{display:flex;flex-wrap:wrap;gap:5px 12px;margin-top:8px}
.lg{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;line-height:1.4;color:var(--enc2);white-space:nowrap}
.lg::before{content:'';width:11px;height:11px;border-radius:3.5px;flex:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.lg-p::before{background:var(--grad-cta)}
.lg-g::before{background:#fbdfba;box-shadow:inset 0 0 0 1.5px var(--a2)}
.lg-e::before{background:#d3ede9;box-shadow:inset 0 0 0 1.5px var(--gla)}
.occ-p{font-size:12.5px;line-height:1.58;color:var(--enc2);margin-top:9px}
/* la part non déterminable : on la hachure, on ne la devine pas */
/* l'honnetete epistemique reste un ELEMENT GRAPHIQUE : ce qui n'est pas
   determinable est hachure, comme aux #6, #7 et #11. */
.occ-hach{background-image:repeating-linear-gradient(45deg,rgba(122,83,52,.17) 0 2px,transparent 2px 6px);padding:1.5px 4px;border-radius:4px;color:var(--enc2);-webkit-box-decoration-break:clone;box-decoration-break:clone}
@media (max-width:420px){.occ-ruban i{height:24px;font-size:8px}.lg{font-size:10px}}

/* ---------------- sections ---------------- */
.sec{padding:64px 0}
.sec-tinte{background:var(--bg);position:relative}
.sec-tinte::before{content:'';position:absolute;inset:0;opacity:.16;pointer-events:none;background-image:var(--arc),var(--arc2)}
.sec-tinte>.wrap{position:relative;z-index:1}
.sec h2{font-family:'Instrument';font-weight:800;font-size:clamp(23px,2.8vw,34px);line-height:1.14;margin-bottom:16px;text-wrap:balance}
/* le repère : un galet, et son ombre mouillée décalée de 3px */
/* ⚠️ Le repere de galet etait un ::before INLINE, donc DANS la boite de ligne du
   titre. Un decor inline se fait peser comme s'il etait sous le texte des que le
   titre passe a deux lignes — c'est exactement ce qui a fait annoncer un h2 a
   1,72:1 sur ce site. Le nouveau repere est HORS FLUX. */
.sec h2,.article h2{position:relative;padding-left:19px}
.sec h2::before,.article h2::before{content:'';position:absolute;left:0;top:.14em;bottom:.16em;width:5px;border-radius:99px;background:linear-gradient(180deg,var(--a3),var(--a1) 55%,var(--a2))}
.cta-fin h2::before,.plan-g h2::before{display:none}
.lead{color:var(--enc2);max-width:68ch;margin-bottom:24px;font-size:16.5px}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:32px;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:24px;margin:24px 0}
.col-etape{background:#fff;border:1px solid var(--line);border-radius:var(--r-b);padding:24px;box-shadow:var(--galet);transition:transform .18s}
.col-etape:hover{transform:translateY(-3px)}
.col-etape b{font-family:'PlexMono';font-weight:600;color:var(--cta);font-size:14px}
.col-etape h3{font-family:'Instrument';font-weight:800;font-size:17.5px;margin:8px 0 8px}
.col-etape p{color:var(--enc2);font-size:14.5px}
.bande{background:linear-gradient(135deg,#2c3537,#1e2527);position:relative;overflow:hidden}
.bande::after{content:'';position:absolute;inset:0;opacity:.12;background-image:repeating-radial-gradient(circle at 50% 50%,transparent 0 44px,rgba(255,255,255,.5) 44px 46px);background-size:600px 600px}
.bande-in{position:relative;z-index:1;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:16px;padding-bottom:16px;color:#f4e3d2;font-weight:700;font-size:14px}
/* chaque gage porte sa coche : elle etait un caractere « ✓ » colle au texte,
   elle est maintenant un masque, donc il lui faut sa gouttiere. */
.bande-in span{display:inline-flex;align-items:center;gap:8px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r-b);padding:16px;text-align:center;box-shadow:var(--galet)}
.stat b{display:block;font-family:'PlexMono';font-weight:600;font-size:27px;color:var(--cta);font-variant-numeric:tabular-nums}
.stat span{font-size:12.5px;color:var(--enc2)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px}
.steps-v{grid-template-columns:1fr;max-width:760px}
.step{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--r-b);padding:16px 16px;box-shadow:var(--galet);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:linear-gradient(135deg,var(--cta-cl),var(--cta));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)}
/* ------- le volet légal cantonal, sur les 41 pages de LIEU -------
   Il n'avait AUCUNE règle : ce bloc de trois paragraphes de droit valaisan
   coulait en texte nu, et c'est lui qui faisait paraître la page vide. */
.bloc-canton{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--r-b);padding:24px;margin-top:24px;box-shadow:var(--galet)}
.bloc-canton::before{content:'';position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--a3),var(--a1) 42%,var(--a2) 78%,var(--a4))}
.bloc-canton h3{font-family:'Instrument';font-weight:800;font-size:18px;margin-bottom:12px}
.bloc-canton p{color:var(--enc2);font-size:14.5px;margin-bottom:12px}
.bloc-canton strong{color:var(--enc)}
.bloc-canton-liens{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:0;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--mut)}
.bloc-canton-liens a{color:var(--cta);font-weight:700;text-decoration:none}
.bloc-canton-liens a:hover{text-decoration:underline}

/* prestations (accueil) */
.prestas{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
.presta{position:relative;display:block;border-radius:var(--r-b);overflow:hidden;text-decoration:none;box-shadow:var(--galet);transition:transform .22s,box-shadow .22s;isolation:isolate}
.presta:hover{transform:translateY(-3px);box-shadow:0 3px 0 var(--line),0 18px 34px rgba(35,42,44,.16)}
/* ⚠️ La carte portait une PHOTO pleine, avec le titre en blanc par-dessus et un
   voile pour le tenir. Un fond translucide n'a aucun contraste propre : il a
   celui du pixel qui se trouve dessous — mesure 4,39:1 pour un seuil de 4,5.
   Le schema est maintenant AU-DESSUS et le texte EN DESSOUS, sur fond clair.
   La question du contraste sur image ne se pose plus du tout. */
.presta-vis{display:block;background:linear-gradient(178deg,#fffaf4,#fdf1e4);border-bottom:1px solid var(--line2);overflow:hidden}
.vis{display:block;width:100%;height:auto}
.presta-vis svg{display:block;width:100%;height:auto;transition:transform .5s ease}
.presta:hover .presta-vis svg{transform:scale(1.03)}
.presta:hover img{transform:scale(1.05)}
.presta-txt{display:block;padding:16px 18px 18px;color:var(--enc)}
.presta-txt b{font-family:'Instrument';font-weight:700;font-size:17.5px;display:block;letter-spacing:-.02em;color:var(--enc)}
.presta-txt span{display:block;font-size:13px;color:var(--mut);margin:5px 0 9px}
.presta-txt i{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-size:13px;font-weight:700;color:var(--cta)}

/* tableaux */
.table-scroll{overflow-x:auto;margin-top:8px}
.tbl{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--r-b);overflow:hidden;box-shadow:var(--galet);min-width:560px}
.tbl th{background:#33200f;color:#fff3e6;text-align:left;font-size:13px;letter-spacing:.05em;padding:12px 16px}
.tbl td{padding:12px 16px;border-top:1px solid var(--line);color:var(--enc2);font-size:14.5px}
.tbl td:last-child{font-family:'PlexMono';font-weight:600;color:var(--enc);white-space:nowrap;font-variant-numeric:tabular-nums}
/* fiche commune */
.fiche{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.fiche div{background:#fff;border:1px solid var(--line);border-radius:var(--r-s);padding:12px 16px}
.fiche small{display:block;font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--enc2)}
.fiche b{font-size:15px}
.communes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;margin-top:8px}
.communes-grid a{display:flex;justify-content:space-between;align-items:baseline;gap:8px;background:#fff;border:1px solid var(--line);border-radius:var(--r-s);padding:12px 16px;text-decoration:none;color:var(--enc);font-weight:700;font-size:14px;transition:transform .16s,border-color .16s,box-shadow .16s}
.communes-grid a:hover{transform:translateY(-2px);border-color:var(--cta);box-shadow:0 3px 0 var(--line)}
.communes-grid small{font-family:'PlexMono';font-weight:600;font-size:10.5px;color:var(--enc2)}
/* la variante serrée : les listes de voisines, plus nombreuses et secondaires */
.communes-grid.petites{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:8px}
.communes-grid.petites a{padding:8px 12px;font-size:13.5px}

/* FAQ */
.sec-faq{background:var(--bg)}
.faq-list{max-width:820px;margin-top:24px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--r-b);margin-bottom:8px;overflow:hidden;transition:box-shadow .2s}
.faq-item[open]{box-shadow:var(--galet)}
.faq-item summary{list-style:none;cursor:pointer;padding:16px 48px 16px 16px;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:'Instrument';font-weight:400;font-size:24px;color:var(--cta);transition:transform .25s}
.faq-item[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq-item summary:hover{color:var(--cta)}
.faq-a{padding:0 16px 16px;color:var(--enc2);font-size:14.5px}

/* ---------------- bloc partenaire ---------------- */
/* la carte porte déjà 26 px de marge intérieure : la section n'a pas besoin
   des 64 px pleins, sinon le bloc flotte entre deux sections teintées */
.sec-part{padding-top:48px;padding-bottom:48px}
.part{display:grid;grid-template-columns:240px 1fr;gap:32px;align-items:start;background:#fff;border:1px solid var(--line);border-radius:var(--r-b);padding:24px;box-shadow:var(--galet)}
.part>*{min-width:0}
.part-id{text-align:center}
.part-id picture{display:block;background:var(--bg2);border:1px solid var(--line);border-radius:16px 5px 16px 5px;padding:16px}
.part-id img{width:160px;max-width:100%;height:auto;margin:0 auto}
.part-nap{margin-top:12px;font-size:12.5px;line-height:1.5;color:var(--enc2)}
.part-nap b{color:var(--enc);font-size:13.5px}
.part-nap .ide{font-family:'PlexMono';font-weight:600;font-size:11px;color:var(--mut)}
.part-txt h2{margin-bottom:8px}
.part-txt p{color:var(--enc2);margin-bottom:12px;font-size:15px}
.part-txt strong{color:var(--enc)}
.part-l{list-style:none;display:grid;gap:12px;margin:4px 0 16px}
.part-l li{position:relative;padding-left:24px;font-size:14.5px;color:var(--enc2)}
.part-l li::before{content:'';position:absolute;left:0;top:.68em;width:14px;height:2.5px;border-radius:2px;background:var(--grad-cta)}
.part-l li b{color:var(--enc)}
.part-lien a{font-weight:700;color:var(--cta);text-decoration:none}
.part-lien a:hover{text-decoration:underline}
@media (max-width:860px){.part{grid-template-columns:1fr;gap:16px;padding:16px}.part-id{max-width:280px;margin:0 auto}}

/* ---------------- avis ---------------- */
.avis{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.avis>*{min-width:0}
.avi{background:#fff;border:1px solid var(--line);border-left:3px solid var(--cta);border-radius:var(--r-b);padding:16px 24px;box-shadow:var(--galet)}
.avi p{font-style:italic;color:var(--enc2);font-size:14.5px;line-height:1.62}
.avi .et{display:block;color:var(--a2);line-height:1;margin-bottom:8px}
.avi cite{display:block;margin-top:12px;font-style:normal;font-size:13px;color:var(--mut)}
@media (max-width:760px){.avis{grid-template-columns:1fr}}

/* ---------------- plan du site ---------------- */
.plan{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:24px;margin-top:8px}
.plan>*{min-width:0}
.plan-g h2{font-family:'Instrument';font-weight:800;font-size:16px;line-height:1.3;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.plan-g nav{display:grid;gap:4px}
.plan-g a{color:var(--cta);text-decoration:none;font-size:14px;line-height:1.45}
.plan-g a:hover{text-decoration:underline}

/* blog */
.arts{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:24px}
.art-card{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r-b);padding:24px;text-decoration:none;box-shadow:var(--galet);transition:transform .18s}
.art-card:hover{transform:translateY(-3px)}
.art-card b{font-family:'Instrument';font-weight:800;font-size:17.5px;color:var(--enc);display:block;margin-bottom:8px}
.art-card p{color:var(--enc2);font-size:14px;margin-bottom:8px}
.art-card i{font-style:normal;font-weight:700;font-size:13.5px;color:var(--cta)}
.article .wrap-art{max-width:780px}
.article h1{font-family:'Instrument';font-weight:800;font-size:clamp(27px,3.25vw,38px);margin-bottom:16px;text-wrap:balance}
.article h2{font-family:'Instrument';font-weight:800;font-size:clamp(19px,2.2vw,25px);margin:32px 0 8px}
.article p{color:var(--enc2);margin-bottom:16px}
.article strong{color:var(--enc)}
.art-retour{margin-top:24px;font-weight:700}

/* CTA final */
.sec-cta{background:linear-gradient(158deg,#4a2410,#331708 52%,#2a1408);position:relative;overflow:hidden}
.sec-cta::before{content:'';position:absolute;width:44vw;height:44vw;right:-12%;top:-40%;border-radius:50%;background:radial-gradient(closest-side,rgba(225,29,98,.26),transparent 70%);filter:blur(60px);animation:d2 61s ease-in-out infinite alternate}
/* ⚠️ Les ARCS CONCENTRIQUES etaient le motif de « Coude & moraine ». Le motif du
   site est maintenant les courbes de niveau : deux nappes de pas copremiers. */
.sec-cta::after{content:'';position:absolute;inset:0;opacity:.10;background-image:repeating-linear-gradient(174deg,transparent 0 27px,rgba(255,237,213,.5) 27px 28px),repeating-linear-gradient(6deg,transparent 0 61px,rgba(244,114,168,.34) 61px 62px)}
.cta-fin{position:relative;z-index:1;text-align:center;padding-top:12px;padding-bottom:12px}
.cta-fin h2{color:#fff3e6;font-family:'Instrument';font-weight:800;font-size:clamp(23px,2.9vw,34px);margin-bottom:8px}
.cta-fin p{color:#f0d8c2;max-width:56ch;margin:0 auto 24px}
.cta-lien{display:inline-block;width:auto}
.cta-fin .alt{color:#d4ac8e}
.cta-fin .alt a{color:#f8b98f}

/* footer */
/* ⚠️ LE PIED EST SOMBRE — la marque de l'en-tete y est ILLISIBLE. Posee telle
   quelle, elle mesurait 1,01:1 (le mot) et 2,36:1 (la sur-ligne). C'est la faute
   exacte du « PAC » bronze d'origine, resurgie sous une autre forme : une piece
   dessinee pour un fond clair ne se recopie pas sur un fond fonce sans son encre.
   La regle se pose sur le CONTENEUR, comme au piege n°5. */
.site-foot .logo-n{color:#fff7ee;text-shadow:none}
.site-foot .logo-p{color:#f9a8c9}
.site-foot .logo-m{box-shadow:0 1px 2px rgba(0,0,0,.4),0 6px 14px -3px rgba(0,0,0,.5),var(--arete-f)}

.site-foot{background:#2a1408;color:#e8d5c4}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1.4fr;gap:32px;padding-top:48px;padding-bottom:32px}
.site-foot .logo{color:#fff3e6;font-size:20px}
.foot-txt{font-size:13.5px;margin-top:8px;color:#bfa189}
.foot-txt a{color:#d7a184;text-decoration:none}
.foot-part{border-top:1px solid rgba(220,214,203,.18);margin-top:16px;padding-top:12px;font-size:12.5px;color:#bfa189}
.foot-part b{color:#e8d5c4}
.site-foot h3{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#c9ad95;margin-bottom:12px;font-weight:700}
.foot-nav{display:grid;gap:8px}
.foot-nav a{color:#e8d5c4;text-decoration:none;font-size:13.5px;transition:color .15s}
.foot-nav a:hover{color:#f8b98f}
.foot-com{min-width:0}/* 24 noms de commune dans une colonne de grille : sans ça elle déborde */
.foot-nav-com{grid-template-columns:repeat(2,1fr)}
.foot-legal{border-top:1px solid #4a2a16;padding-top:16px;padding-bottom:24px;font-size:12px;color:#c9ad95}
.foot-legal a{color:#e8d5c4}

/* 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(244,241,236,.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:16px;background:rgba(22,27,28,.5);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s ease}
.pum.vu{opacity:1}
.pum-card{position:relative;width:min(430px,100%);background:#fbf9f6;border:1px solid var(--line);border-radius:var(--r-b);padding:24px;overflow:hidden;box-shadow:0 3px 0 var(--line),0 26px 56px rgba(20,26,27,.34);transform:translateY(18px) scale(.97);transition:transform .35s cubic-bezier(.2,1.1,.3,1)}
/* le même filet de moraine qu'en tête de carte */
.pum-card::before{content:'';position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--a3),var(--a1) 42%,var(--a2) 78%,var(--a4))}
.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(--enc2);border-radius:50%;transition:background .15s,color .15s}
.pum-x:hover{background:rgba(35,42,44,.08);color:var(--enc)}
.pum-eti{font-family:'PlexMono';font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cta);margin-bottom:8px}
.pum-card h3{font-family:'Instrument';font-weight:800;font-size:21px;line-height:1.16;margin-bottom:8px}
.pum-chiffre{font-family:'PlexMono';font-weight:600;font-size:15px;color:var(--cta);background:rgba(122,59,31,.09);border:1px solid rgba(122,59,31,.32);border-radius:var(--r-s);padding:8px 12px;margin:8px 0 8px;font-variant-numeric:tabular-nums}
.pum-p{font-size:13.5px;color:var(--enc2);margin-bottom:16px}
.pum-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.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:8px}
.pum-ok{text-align:center;padding:16px 0 8px;font-weight:700;color:var(--ok)}
@media (max-width:600px){
  .pum{align-items:flex-end;padding:0}
  .pum-card{width:100%;border-radius:20px 6px 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}

/* ---------------- PIEGE 3 : l'ordre du hero en empile ----------------
   Mesure : carte de devis a 978 px sur un ecran de 568 — zero pixel visible.
   Le meme defaut qu'au #18 (652 px) et que sur ce site avant refonte (683 px).
   Ce qui descend SOUS la carte n'est jamais ce qui fait decider : les deux
   chiffres REPETENT la ligne « env. 11 kW · CHF … » deja en tete de carte, la
   ligne de source commente une estimation que le visiteur n'a pas demandee, et
   la figure d'altitude est un argument, pas une etape. L'information qui fait
   cliquer — sur-ligne, titre, sous-titre — reste au-dessus. */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .col-t{display:contents}
  .col-t>.eyebrow{order:1}
  .col-t>h1{order:2}
  .col-t>.sub{order:3}
  .col-t>.live{order:4}
  .col-t>.srcline{order:5}
  .cardwrap{order:6;margin-top:22px}
  .col-t>.fig{order:7}
  .col-t>.trust{order:8}
  .col-t>.warn{order:9}
}
@media (max-width:430px){
  /* sur un ecran de 568 il reste ~200 px de trop au-dessus de la carte :
     elle remonte juste apres le sous-titre. Et le hero se resserre — c'est le
     seul palier ou le titre doit ceder de la taille pour que la carte existe.
     Mesure a 320x568 : 978 px -> 587 px avec l'ordre seul, il fallait les deux. */
  /* ⚠️ A 320 px, « Devis gratuit » de l'en-tete s'ecrase en pastille et recouvre
     le burger : on n'y lisait plus que « De ». La marque prend deux lignes, le
     burger 42 px — il ne reste pas la place. Le bouton disparait donc a ce
     palier : la barre CTA collante du bas fait deja ce travail, et elle, elle
     est visible en permanence. */
  .head-cta{display:none}
  .hero-grid{padding-top:20px;padding-bottom:26px}
  .hero h1{font-size:clamp(27px,7.9vw,33px);line-height:1.06;margin:12px 0 12px}
  .sub{font-size:15px;line-height:1.5;margin-bottom:14px}
  .eyebrow{font-size:10.5px;letter-spacing:.11em;padding:8px 13px 8px 29px}
  .eyebrow::before{left:13px}
  .cardwrap{order:4;margin-top:16px}
  .col-t>.live{order:5;margin-top:20px}
  .col-t>.srcline{order:6}
  .col-t>.fig{order:7}
}

/* ---------------- responsive ---------------- */
@media (max-width:1080px){
  /* ⚠️ gap:0, et PAS 32px. Cette regle-ci vit plus bas dans la feuille que le bloc
     « ordre du hero » : avec un gap, elle le gagnait en silence et ajoutait 32 px
     AU-DESSUS et AU-DESSOUS de chaque bloc, en plus de leurs marges propres.
     Mesure a 320 px : 44 px entre la sur-ligne et le titre pour une marge de 12.
     C'est le piege n°3 mot pour mot — et il ne se voit qu'en mesurant les boites,
     parce que les deux regles sont justes SEPAREMENT. */
  .hero-grid{grid-template-columns:1fr;gap:0}
  .hero-max{min-height:0}
  .card{transform:none}
  .halo{right:-10%;width:80%;top:auto;bottom:0;height:56%}
  /* en empilé, pas de résultat AVANT l'outil : il vit dans la carte (≈ 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:16px;padding-right:16px}
  .sec{padding:48px 0}
  .hero-grid{padding-top:32px;padding-bottom:40px}
  .cols2,.cols3,.arts{grid-template-columns:1fr}
  .prestas{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .fiche{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr;gap:24px}
  .bande-in{justify-content:flex-start;gap:8px 16px;font-size:13px}
  .card{padding:16px}
}