/* ==========================================================================
   pompe-a-chaleur-lavaux.ch — registre « COTEAU & LÉMAN »
   ==========================================================================
   Site #18 du réseau. La MÉCANIQUE vient du #11 (« Aurore & verre », validée
   le 20.08) ; la COULEUR, la police, la composition de l'aurore et l'élément
   de signature sont propres à ce site — c'est la règle d'anti-empreinte : les
   vingt sites doivent rester reconnaissablement différents.

   · teal #0d9488, émeraude #059669, bleu lac #0369a1 — la lumière qui monte
     du Léman ; UN foyer terracotta #ea580c en haut à droite, le soleil sur le
     coteau. Sans lui, un site qui vend de la chaleur vire au tout-froid.
   · display : Geist 400-800.
   · signature : LA BANDE D'ALTITUDE — les douze communes placées de 387 m à
     Saint-Saphorin à 843 m à Maracon. C'est l'altitude qui décide de la
     puissance : la signature dit quelque chose d'utile.

   ⚠️ Les noms de jetons (--ind, --vio, --cya, --amb) sont HÉRITÉS du #11 et
   n'ont pas été renommés : un renommage massif est ce qui a laissé 16 classes
   sans aucune règle sur le #17. Lire leur VALEUR, pas leur nom :
   --ind = teal · --ind-f = teal foncé · --ind-c = turquoise · --vio = émeraude
   --cya = bleu lac · --amb = terracotta · --ros = rouge d'alerte.

   TROIS RÈGLES DE PERFORMANCE COMMANDENT TOUTE LA CONSTRUCTION
   1. Un dégradé radial est composité par le GPU, ne pèse aucun octet et n'a
      AUCUN coût de LCP. C'est lui, jamais une image, qui porte la couleur.
   2. On n'anime JAMAIS les arrêts d'un dégradé : c'est une repeinture à chaque
      image. On n'anime que `transform` et `opacity`, sur des calques déjà
      peints. Aucune animation ne touche la géométrie : CLS nul.
   3. Pas de `filter:blur()` sur une surface plein écran — le flou est DANS le
      dégradé (arrêts très doux).

   ET UNE RÈGLE DE FOND, QUI PRIME SUR TOUTES LES AUTRES
   Aucune animation ne décide de la visibilité d'un contenu. Les entrées ne
   touchent qu'à `transform`, jamais à l'opacité d'un texte, et se terminent
   toujours seules — pas d'IntersectionObserver, pas de classe posée par le JS.

   ÉCHELLE D'ESPACEMENT — celle du réseau, et rien d'autre :
   4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96.
   ========================================================================== */

@font-face{font-family:'Geist';font-weight:400 800;font-display:swap;src:url(/fonts/geist.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{
  /* Sans ceci, Chrome Auto Dark et les extensions de mode sombre INVERSENT la
     page. Le CSS servi reste juste, donc aucun test de contraste ne le voit —
     seule une capture le révèle. */
  color-scheme:light;

  --blanc:#fff;
  --bg:#eff9f8;
  --bg2:#f7fdfc;
  --nuit:#04211d;

  --enc:#07231f; --enc2:#264945; --mut:#325652;

  --ind:#0d9488; --ind-f:#0b6f66; --ind-c:#2dd4bf;
  --vio:#059669; --cya:#0369a1; --ros:#e11d48; --amb:#ea580c;
  --ok:#0e9f6e;

  --line:#d7ece9; --bm:1px solid var(--line);
  --r:12px; --rr:16px; --rg:20px;

  /* la profondeur : trois niveaux, teintés du VERT du site — une ombre grise sur un
     fond violet fait sale, c'est ce qui trahit une palette plaquée */
  --o1:0 2px 6px rgba(4,60,55,.06),0 10px 24px -8px rgba(4,60,55,.14);
  --o2:0 4px 10px rgba(4,60,55,.07),0 22px 44px -12px rgba(4,60,55,.22);
  --o3:0 8px 18px rgba(4,60,55,.09),0 40px 84px -18px rgba(4,60,55,.30);
  --hi:inset 0 1px 0 rgba(255,255,255,.9);

  /* ⚠️ Mesuré sur plaque de fond : le dégradé du #11 partait de --ind-c, un
     turquoise clair, et le texte BLANC du CTA y tombait à 2,19:1. Le dégradé
     des surfaces qui portent du blanc part donc du teal foncé. --ind-c reste
     pour ce qui ne porte pas de texte : l'anneau, les bordures de survol. */
  --grad:linear-gradient(135deg,#0e8378,var(--ind-f) 54%,#095a53);
  /* l'encre des liens : --ind (13,148,136) tombe à 3,4-3,7:1 sur les fonds
     teintés du site. Celle-ci tient 5,0:1 sur le pire d'entre eux. */
  --lien:#085a52;
  /* ⚠️ Le dégradé du mot d'accroche passait du teal à l'émeraude puis au bleu :
     trois teintes DIFFÉRENTES, et la coupure verte/bleue tombait au milieu du
     mot « secondes ». Trois teals qui se fondent : le mot reste d'une pièce. */
  --grad-t:linear-gradient(100deg,#0b6f66 2%,#0d9488 40%,#0e7490 98%);
  --ico-ok:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.4l5.1 5.1L19.6 6.4' fill='none' stroke='%230d9488' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ico-fl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M12.5 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ico-warn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.6l9 15.8H3z' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M12 9.6v4.2M12 17.1h.01' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --grain: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");
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{background:var(--bg);color:var(--enc);font-family:'Manrope',system-ui,sans-serif;
  font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--lien)}
.wrap{width:min(1240px,100%);margin:0 auto;padding-left:24px;padding-right:24px}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:var(--enc);padding:12px 16px;
  z-index:200;border-radius:0 0 var(--r) 0}
.skip:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--ind);outline-offset:2px;border-radius:4px}

/* ---------------- icônes : les glyphes sont devenus des tracés ----------------
   1'083 caractères du site n'étaient dans AUCUNE police embarquée (★ 671,
   → 333, ✓ 65, ← 14) : ils tombaient sur une police système, absente sur
   certaines machines — y compris la flèche du seul bouton qui convertit. */
.ico{display:inline-block;vertical-align:-.14em;flex:none}
.et{display:inline-flex;gap:3px;color:var(--amb);line-height:1;
  filter:drop-shadow(0 1px 3px rgba(234,88,12,.45))}
.et-l{margin-bottom:12px}
.ico-fl,.ico-fg{transition:transform .18s cubic-bezier(.2,.8,.3,1)}
a:hover .ico-fl,button:hover .ico-fl{transform:translateX(4px)}
a:hover .ico-fg{transform:translateX(-4px)}
.ico-et{color:var(--amb)}
.ico-ok{color:var(--ind)}

/* ---------------- en-tête ---------------- */
.site-head{position:sticky;top:0;z-index:80;display:flex;align-items:center;gap:16px;
  padding:12px 24px;background:rgba(247,253,252,.86);backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid rgba(255,255,255,.8);
  box-shadow:0 1px 0 rgba(7,35,31,.05);transition:box-shadow .25s}
.site-head.scrolle{box-shadow:0 1px 0 rgba(7,35,31,.06),0 12px 32px -20px rgba(4,60,55,.6)}
.logo{font-family:'Geist',system-ui,sans-serif;font-weight:800;font-size:20px;color:var(--enc);
  text-decoration:none;white-space:nowrap;letter-spacing:-.03em}
.logo-p{background:linear-gradient(120deg,var(--ind),var(--vio));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.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:10px;transition:background .18s,color .18s}
.nav a:hover{background:rgba(13,148,136,.10);color:var(--lien)}
.nav a.on{color:var(--lien);background:rgba(13,148,136,.12)}
.head-cta{position:relative;overflow:hidden;font-weight:700;font-size:14px;color:#fff;
  text-decoration:none;background:var(--grad);padding:12px 20px;border-radius:12px;white-space:nowrap;
  box-shadow:0 8px 20px -6px rgba(13,148,136,.7),inset 0 1px 0 rgba(255,255,255,.34);
  transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .18s}
.head-cta:hover{transform:translateY(-2px);
  box-shadow:0 14px 28px -8px rgba(13,148,136,.85),inset 0 1px 0 rgba(255,255,255,.42)}
.burger{display:none;flex-direction:column;gap:6px;background:none;border:none;cursor:pointer;padding:8px}
.burger span{width:24px;height:2.5px;background:var(--enc);border-radius:2px;
  transition:transform .25s,opacity .25s}
@media (max-width:1080px){
  .nav{position:fixed;inset:57px 0 auto 0;background:rgba(247,253,252,.98);backdrop-filter:blur(18px);
    flex-direction:column;padding:16px 24px 24px;gap:4px;border-bottom:1px solid var(--line);
    transform:translateY(-130%);transition:transform .3s ease;margin:0;
    box-shadow:0 24px 48px -24px rgba(4,60,55,.7)}
  .nav.ouvert{transform:none}
  .nav a{font-size:16px;padding:12px}
  .burger{display:flex}
  .burger.x span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .burger.x span:nth-child(2){opacity:0}
  .burger.x span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .head-cta{margin-left:auto}
}

/* ==========================================================================
   LE HERO — l'aurore de « COTEAU & LÉMAN »
   Composition PROPRE au #18, et c'est elle qui distingue le site du #11 :
   quatre foyers FROIDS en éventail depuis le bas-gauche — la lumière qui monte
   du lac — et UN foyer chaud, terracotta, en haut à droite : le soleil sur le
   coteau. Le #11 a quatre froids en écharpe et son foyer chaud au centre.
   Sans le foyer chaud, un site qui vend de la chaleur vire au tout-froid.
   ========================================================================== */
.hero{position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(110% 68% at 50% -14%,rgba(255,255,255,.70),transparent 56%),
    linear-gradient(178deg,#f0fbfa 0%,#ddf1f0 46%,#cbe8e8 100%)}
/* ⚠️ Ni min-height en vh, ni align-items:center — invariant de conversion.
   `.hero-max` faisait 92vh avec le contenu centré : du vide AU-DESSUS du pli. */

.hero-page{padding:8px 0 16px}
/* ⚠️ Un hero de page intérieure fait la moitié de la hauteur de l'accueil :
   les mêmes foyers y remontent donc proportionnellement plus haut, juste
   derrière le sous-titre, qui tombait à 4,03:1. On les calme ICI seulement —
   l'accueil, la page la plus vue, garde sa couleur pleine. */
.hero-page .foyers{opacity:.78}
.hero-page .motif{opacity:.8}

.foyers{position:absolute;inset:-24% -12%;z-index:1;pointer-events:none;overflow:hidden;
  will-change:transform}
.foyers i{position:absolute;border-radius:50%;will-change:transform;backface-visibility:hidden}
.f1{width:58%;height:72%;left:-12%;top:6%;
  background:radial-gradient(closest-side,rgba(13,148,136,.76),rgba(13,148,136,.34) 46%,transparent 72%);
  animation:d1 27s ease-in-out infinite alternate}
.f2{width:48%;height:58%;left:32%;bottom:-16%;
  /* ⚠️ À .78 et calé à 24 %, ce foyer remontait DERRIÈRE la colonne de texte de
     l'accueil : le sous-titre y tombait à 4,37:1 et la ligne de source à 3,74:1.
     Décalé à droite et calmé, la couleur reste là où il n'y a pas de texte. */
  background:radial-gradient(closest-side,rgba(5,150,105,.64),rgba(5,150,105,.26) 46%,transparent 72%);
  animation:d2 21s ease-in-out infinite alternate}
.f3{width:54%;height:68%;right:-8%;top:-14%;
  background:radial-gradient(closest-side,rgba(3,105,161,.78),rgba(3,105,161,.32) 48%,transparent 74%);
  animation:d3 32s ease-in-out infinite alternate}
.f4{width:42%;height:50%;left:-6%;top:-16%;
  background:radial-gradient(closest-side,rgba(6,182,212,.70),rgba(6,182,212,.28) 46%,transparent 72%);
  animation:d4 24s ease-in-out infinite alternate}
@keyframes d1{to{transform:translate3d(7%,6%,0) scale(1.14)}}
@keyframes d2{to{transform:translate3d(-8%,9%,0) scale(1.10)}}
@keyframes d3{to{transform:translate3d(-6%,-8%,0) scale(1.16)}}
@keyframes d4{to{transform:translate3d(9%,-7%,0) scale(1.12)}}

/* le foyer CHAUD — le soleil du coteau. (ancien .motif du gabarit) */
.motif{position:absolute;z-index:1;left:52%;top:28%;width:36%;height:44%;pointer-events:none;
  border-radius:50%;will-change:transform;
  background:radial-gradient(closest-side,rgba(234,88,12,.44),rgba(234,88,12,.15) 48%,transparent 74%);
  animation:d5 18s ease-in-out infinite alternate}
@keyframes d5{to{transform:translate3d(-10%,5%,0) scale(1.22)}}

/* deux glows secondaires, qui suivent le pointeur de ±10 px (data-px) */
.halo{position:absolute;z-index:2;right:4%;top:6%;width:46%;height:76%;pointer-events:none;
  will-change:transform}
.halo i{position:absolute;inset:0;border-radius:50%}
.halo .h1{background:radial-gradient(closest-side,rgba(45,212,191,.34),transparent 70%);
  animation:resp 8.6s ease-in-out infinite alternate}
.halo .h2{inset:18%;background:radial-gradient(closest-side,rgba(3,105,161,.26),transparent 70%);
  animation:resp 6.2s ease-in-out infinite alternate-reverse}
@keyframes resp{from{transform:scale(.94)}to{transform:scale(1.08)}}

/* la poussière de lumière (les <i> sont créés par main.js) */
.motes{position:absolute;z-index:3;inset:0;pointer-events:none;overflow:hidden}
.motes i{position:absolute;bottom:-6%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.95),rgba(153,246,228,.5) 45%,transparent 72%);
  animation:mote linear infinite;will-change:transform,opacity}
@keyframes mote{0%{transform:translateY(0);opacity:0}14%{opacity:.85}78%{opacity:.45}
  100%{transform:translateY(-620px);opacity:0}}

/* le halo blanc qui SOULÈVE la carte — c'est lui qui fait la profondeur,
   pas l'ombre de la carte. */
.voile{position:absolute;z-index:4;right:-2%;top:-6%;width:46%;height:90%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.72),rgba(255,255,255,.24) 46%,transparent 74%)}

/* le grain : peint UNE fois, jamais animé. Il casse le « banding » des
   dégradés, qui est ce qui fait qu'un fond dégradé a l'air bon marché. */
.grain{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:.22;
  mix-blend-mode:multiply;background-image:var(--grain)}

.hero-grid{position:relative;z-index:20;display:grid;grid-template-columns:1.08fr .92fr;gap:48px;
  align-items:start;padding-top:32px;padding-bottom:64px}

/* ---------------- hero : texte ---------------- */
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:'PlexMono';font-weight:600;
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ind-f);
  padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.9);backdrop-filter:blur(10px);
  box-shadow:0 6px 18px -6px rgba(4,60,55,.28),var(--hi)}
h1{font-family:'Geist',system-ui,sans-serif;font-weight:800;
  font-size:clamp(34px,4.4vw,62px);line-height:1.03;letter-spacing:-.035em;
  margin:24px 0 16px;text-wrap:balance}
.hero h1 .l{display:block}
.hero h1 .thin{font-weight:700;color:var(--enc)}
.hero h1 .fat{font-weight:800}
/* le mot d'accroche : dégradé de texte + un éclat qui balaie. L'éclat est un
   pseudo-élément déplacé en `transform` ; le dégradé, lui, ne bouge jamais,
   donc aucune repeinture. */
.hero h1 .fat b{position:relative;display:inline-block;font-weight:800;
  background:var(--grad-t);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1 .fat b::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(104deg,transparent 38%,rgba(255,255,255,.85) 50%,transparent 62%);
  mix-blend-mode:overlay;transform:translateX(-130%);
  animation:eclat 7s cubic-bezier(.5,0,.3,1) 1.6s infinite}
@keyframes eclat{0%{transform:translateX(-130%)}26%,100%{transform:translateX(130%)}}

.sub{color:#10302c;max-width:50ch;font-size:17px;margin-bottom:24px}
/* ⚠️ 3,82:1 avec --enc2 sur les heros COURTS (prestations, FAQ) : le hero
   y est deux fois moins haut, donc les foyers remontent derriere le texte. */
.live{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.chip{background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.9);border-radius:var(--rr);
  padding:12px 18px;box-shadow:var(--o1),var(--hi);backdrop-filter:blur(8px);
  transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s}
.chip:hover{transform:translateY(-3px);box-shadow:var(--o2),var(--hi)}
.chip small{display:block;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mut);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(--ind-f)}
.chip.flash{animation:flashA 1s ease}
@keyframes flashA{0%{background-color:rgba(45,212,191,.24)}100%{background-color:rgba(255,255,255,.96)}}

.srcline{font-size:12.5px;color:var(--mut);margin-bottom:20px;max-width:54ch}
/* dans le hero, --mut est le ton le plus clair et il passe sur les foyers */
.hero .srcline{color:#1e403b}
.srcline a{color:var(--enc2)}
.trust{list-style:none;display:grid;gap:12px;font-size:14.5px;color:var(--enc2)}
.trust li{display:flex;gap:12px;align-items:center}
/* ⚠️ content:'✓' rendait le glyphe avec une police SYSTÈME : aucune des quatre
   polices du site ne contient U+2713. Un tracé SVG en fond garde la couleur du
   jeton et s'affiche à l'identique sur toutes les machines. */
.trust li::before{content:'';flex:none;width:24px;height:24px;border-radius:8px;
  border:1px solid rgba(13,148,136,.22);
  background-image:var(--ico-ok),linear-gradient(140deg,rgba(13,148,136,.14),rgba(5,150,105,.14));
  background-size:15px 15px,cover;background-position:center,center;background-repeat:no-repeat}

.warn{margin-top:16px;display:none;gap:12px;border:1px solid rgba(225,29,72,.28);
  border-left:3px solid var(--ros);background:#fff5f7;border-radius:0 var(--r) var(--r) 0;
  padding:12px 16px;font-size:13px;color:#8c1531;max-width:56ch;box-shadow:var(--o1)}
.warn.on{display:flex;animation:flashA 1.1s ease}
/* le pictogramme d'alerte : U+26A0 n'est dans aucune police du site, et le JS
   remplit ce bloc en textContent — donc pas de SVG possible. Tracé en masque. */
.warn::before{content:'';flex:none;width:18px;height:18px;margin-top:1px;
  background-color:var(--ros);
  -webkit-mask:var(--ico-warn) center/contain no-repeat;
  mask:var(--ico-warn) center/contain no-repeat}
.warn-carte{margin:0 0 12px;max-width:none}
@media (max-width:1080px){.warn-col{display:none!important}}

/* ==========================================================================
   LA CARTE DE DEVIS
   ⚠️ Fond OPAQUE, toujours : aucun motif, aucun dégradé, aucun verre
   translucide derrière un champ. C'est un invariant de conversion, et c'est
   la seule concession que la peau ne fait pas à l'esthétique « verre ».
   ========================================================================== */
@property --a{syntax:'<angle>';initial-value:0deg;inherits:false}
/* ⚠️ L'anneau conique ne TOURNE PAS par `transform` : une rotation agrandit la
   boîte englobante, donc `overflow:hidden` ne la détoure pas et l'anneau sort
   en grands aplats tout autour de la carte. On anime l'ANGLE du dégradé sur
   une bordure de 2 px — la surface repeinte est un liséré, pas un carré. */
.cardwrap{position:relative;will-change:transform;border-radius:calc(var(--rg) + 2px);padding:2px;
  background:conic-gradient(from var(--a,0deg),var(--ind-f),var(--ind-c) 22%,var(--cya) 48%,var(--ind) 72%,var(--ind-f));
  animation:tourne 16s linear infinite}
@keyframes tourne{to{--a:360deg}}
.cardwrap::after{content:'';position:absolute;inset:-32px;border-radius:48px;z-index:-1;
  pointer-events:none;background:radial-gradient(closest-side,rgba(45,212,191,.34),transparent 72%)}

.card{position:relative;background:var(--blanc);border-radius:var(--rg);padding:24px;
  box-shadow:var(--o3),var(--hi);transition:transform .3s cubic-bezier(.2,.8,.3,1)}
.card:hover{transform:translateY(-3px)}
.card>*{position:relative;z-index:2}
.beam{position:absolute;left:24px;right:24px;top:0;height:3px;z-index:3;border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,var(--ind-f),var(--ind) 46%,var(--cya));pointer-events:none}
.sheenbox{position:absolute;inset:0;z-index:1;border-radius:var(--rg);overflow:hidden;pointer-events:none}
.sheenbox i{position:absolute;top:-12%;bottom:-12%;left:-58%;width:44%;
  background:linear-gradient(105deg,transparent,rgba(45,212,191,.06) 42%,rgba(255,255,255,.5) 50%,
  rgba(3,105,161,.06) 58%,transparent);transform:skewX(-12deg);
  animation:sheen 9s ease-in-out infinite;will-change:transform}
@keyframes sheen{0%,52%{transform:translateX(0) skewX(-12deg)}88%,100%{transform:translateX(420%) skewX(-12deg)}}
.hpot{position:absolute;left:-9999px;opacity:0}

/* le titre de la carte est un h2 : en h3 il créait un saut h1→h3 sur 61 pages */
.card .carte-t{font-family:'Geist',system-ui,sans-serif;font-weight:800;font-size:21px;
  margin:4px 0;letter-spacing:-.03em;color:var(--enc)}
.mini{font-family:'PlexMono';font-weight:600;font-size:13px;margin-bottom:16px;min-height:20px;
  font-variant-numeric:tabular-nums;color:var(--ind-f)}
.fld{margin-bottom:16px}
.h-t{display:flex;justify-content:space-between;align-items:baseline;font-size:11.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--mut);margin-bottom:8px}
.h-t output{font-family:'PlexMono';font-weight:600;font-size:15px;color:var(--ind-f)}

input[type=range]{width:100%;appearance:none;height:8px;border-radius:999px;cursor:pointer;
  background:linear-gradient(90deg,var(--ind) var(--fill,40%),#dbecea var(--fill,40%));
  box-shadow:inset 0 1px 3px rgba(4,60,55,.14)}
input[type=range]::-webkit-slider-thumb{appearance:none;width:24px;height:24px;border-radius:8px;
  background:#fff;border:3px solid var(--ind);
  box-shadow:0 3px 10px rgba(13,148,136,.4),0 0 0 6px rgba(13,148,136,.12);
  transition:transform .15s,box-shadow .3s}
input[type=range]:active::-webkit-slider-thumb,input[type=range]:focus::-webkit-slider-thumb{
  box-shadow:0 3px 10px rgba(13,148,136,.5),0 0 0 9px rgba(13,148,136,.18)}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.1)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:7px;background:#fff;
  border:3px solid var(--ind);box-shadow:0 3px 10px rgba(13,148,136,.4)}

.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:#fff;
  border:1px solid var(--line);border-radius:10px;padding:12px 2px;cursor:pointer;min-width:0;
  transition:transform .16s cubic-bezier(.2,.8,.3,1),border-color .16s,box-shadow .16s,color .16s}
.puces button:hover{transform:translateY(-2px);border-color:var(--ind-c);box-shadow:var(--o1)}
.puces button.on{color:#fff;background:var(--grad);border-color:transparent;
  box-shadow:0 8px 18px -6px rgba(13,148,136,.7);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:12px;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:linear-gradient(90deg,transparent,var(--line),transparent)}
.idgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.h-in{font-family:'Manrope';font-size:14px;color:var(--enc);background:#f9fdfd;
  border:1px solid var(--line);border-radius:10px;padding:13px 14px;width:100%;
  transition:border-color .16s,box-shadow .16s,background .16s}
.h-in::placeholder{color:var(--mut)}
.h-in:hover{border-color:var(--ind-c)}
.h-in:focus{outline:none;background:#fff;border-color:var(--ind);
  box-shadow:0 0 0 3px rgba(13,148,136,.14)}
.h-in.full{grid-column:1/-1}
textarea.h-in{resize:vertical;min-height:56px}

.cta{position:relative;overflow:hidden;display:block;width:100%;text-align:center;
  font-family:'Geist',system-ui,sans-serif;font-weight:800;font-size:16.5px;color:#fff;
  background:var(--grad);border:none;border-radius:12px;padding:17px 22px;cursor:pointer;
  text-decoration:none;letter-spacing:-.01em;
  box-shadow:0 16px 34px -10px rgba(13,148,136,.85),inset 0 1px 0 rgba(255,255,255,.34);
  transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .18s}
.cta::after{content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.36) 50%,transparent 66%);
  transform:translateX(-120%);transition:transform .6s cubic-bezier(.4,0,.2,1)}
.cta:hover{transform:translateY(-2px);
  box-shadow:0 22px 44px -12px rgba(13,148,136,.95),inset 0 1px 0 rgba(255,255,255,.44)}
.cta:hover::after{transform:translateX(120%)}
.cta[disabled]{opacity:.65;cursor:wait;transform:none}
.cta .fl{display:inline-flex;align-items:center}
.cta-lien{display:inline-block;width:auto}

.alt{text-align:center;font-size:13px;color:var(--enc2);margin-top:12px}
.alt a{color:var(--lien);text-decoration:none;font-weight:700}
.lpd{font-size:11px;color:var(--mut);text-align:center;margin-top:8px;line-height:1.55}
.lpd a{color:var(--mut)}
.ok-msg{margin-top:12px;text-align:center;font-weight:700;color:#0a6b4a;
  background:rgba(14,159,110,.10);border:1px solid rgba(14,159,110,.35);border-radius:10px;padding:12px}

/* ==========================================================================
   SIGNATURE — « l'étage de contrainte »
   Trois paliers = les trois régimes d'autorisation qui se superposent ici.
   Le troisième est HACHURÉ parce qu'une note de recensement ne se lit pas
   depuis un site web, mais sur geo.vd.ch, parcelle par parcelle.
   ========================================================================== */
.etage{margin:16px 0 4px;border:1px solid var(--line);border-radius:12px;background:#f9fdfd;
  padding:12px;box-shadow:var(--o1)}
.etage>span{display:block;font-family:'PlexMono';font-weight:600;font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--mut);margin-bottom:8px}
.etage .e{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;
  font-size:12.5px;line-height:1.35;color:var(--enc2);padding:8px 8px 8px 12px;
  border-left:3px solid var(--line);background:rgba(45,212,191,.06);border-radius:0 8px 8px 0;
  margin-bottom:4px;min-width:0}
.etage .e:last-child{margin-bottom:0}
.etage .e:nth-child(3){margin-left:12px}
.etage .e:nth-child(4){margin-left:24px}
.etage .e b{font-weight:700;color:var(--enc);min-width:0}
.etage .e i{font-style:normal;font-family:'PlexMono';font-weight:600;font-size:10px;
  color:var(--enc2);margin-left:auto}
.etage .e.on{border-left-color:var(--ind);color:var(--enc);
  background:linear-gradient(100deg,rgba(13,148,136,.14),rgba(5,150,105,.10))}
.etage .e.on b,.etage .e.on i{color:var(--ind-f)}
.etage .e.hach{border-left-style:dashed;
  background-image:repeating-linear-gradient(135deg,rgba(7,35,31,.06) 0 2px,transparent 2px 7px)}
.etage .e.hach i{font-style:italic;font-family:'Manrope';font-size:10.5px}
.etage p{margin-top:8px;font-size:11px;color:var(--mut);line-height:1.45}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.sec{padding:64px 0;position:relative}
.sec-tinte{position:relative;
  background:linear-gradient(180deg,rgba(45,212,191,.10),rgba(3,105,161,.08))}
.sec-tinte::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.22;
  mix-blend-mode:multiply;background-image:var(--grain)}
.sec-tinte>*{position:relative;z-index:1}

h2{font-family:'Geist',system-ui,sans-serif;font-weight:800;letter-spacing:-.03em;
  font-size:clamp(25px,3vw,38px);line-height:1.1;text-wrap:balance}
.sec h2::before,.article h2::before{content:'';display:block;width:38px;height:6px;margin-bottom:16px;
  border-radius:999px;background:linear-gradient(90deg,var(--ind),var(--vio) 55%,var(--cya))}
.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}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:24px 0}
.cols2 p{color:var(--enc2)}
.cols2 strong,.lead strong,.step strong,.article strong,.part-l b,.avi cite{color:var(--enc)}
.cols2 p,.step p,.part-txt p,.part-l li{max-width:74ch}

/* ---- prestations de l'accueil ---- */
.prestas{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
.presta{position:relative;display:flex;flex-direction:column;border-radius:var(--rr);overflow:hidden;
  text-decoration:none;background:#fff;box-shadow:var(--o1),var(--hi);isolation:isolate;
  transition:transform .24s cubic-bezier(.2,.8,.3,1),box-shadow .24s}
.presta:hover{transform:translateY(-5px);box-shadow:var(--o3),var(--hi)}
/* aspect-ratio et non hauteur fixe : le viewBox fait 3/2, donc le tracé n'est
   jamais rogné, à aucune largeur */
.presta .vis{width:100%;aspect-ratio:3/2;height:auto;display:block;border-bottom:1px solid var(--line);
  transition:transform .5s ease}
/* ⚠️ MÊME aspect-ratio que le schéma : une hauteur fixe sur la photo et un
   ratio sur le tracé désalignaient la carte qui garde son schéma au milieu
   d'une grille de photos. */
.presta img{width:100%;aspect-ratio:3/2;height:auto;object-fit:cover;display:block;
  border-bottom:1px solid var(--line);transition:transform .5s ease}
.presta:hover img,.presta:hover .vis{transform:scale(1.04)}
.presta-txt{padding:16px;background:#fff;color:var(--enc);flex:1;display:flex;flex-direction:column}
.presta-txt b{font-family:'Geist',system-ui,sans-serif;font-weight:800;font-size:20px;display:block;
  color:var(--enc);letter-spacing:-.025em}
.presta-txt span{display:block;font-size:13.5px;line-height:1.5;color:var(--enc2);margin:4px 0 12px;flex:1}
.presta-txt i{font-style:normal;font-size:13.5px;font-weight:700;color:var(--lien);
  display:flex;align-items:center;gap:8px}

/* ---- étapes, statistiques, colonnes ---- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px}
.steps-v{grid-template-columns:1fr}
/* ⚠️ En colonne unique, `<b>1</b>` et son texte se retrouvaient COLLÉS
   (« 130 secondes en ligne »), parce que la règle du pilote suppose une carte
   en colonne où le numéro est au-dessus. En pastille, le numéro se lit. */
.steps-v .step{display:flex;gap:16px;align-items:flex-start;padding:16px 24px}
.steps-v .step b{flex:none;display:grid;place-items:center;width:32px;height:32px;
  border-radius:10px;background:var(--grad);color:#fff;font-size:14px;
  box-shadow:0 8px 18px -6px rgba(13,148,136,.65),inset 0 1px 0 rgba(255,255,255,.34)}
.steps-v .step span{color:var(--enc2);font-size:14.5px;padding-top:4px}
.step,.col-etape{background:#fff;border:1px solid var(--line);border-radius:var(--rr);padding:24px;
  box-shadow:var(--o1),var(--hi);
  transition:transform .2s cubic-bezier(.2,.8,.3,1),box-shadow .2s}
.step:hover,.col-etape:hover{transform:translateY(-4px);box-shadow:var(--o2),var(--hi)}
.step b,.col-etape b{font-family:'PlexMono';font-weight:600;color:var(--ind-f);font-size:14px}
.step h3,.col-etape h3{font-family:'Geist',system-ui,sans-serif;font-weight:800;font-size:19px;
  margin:8px 0;letter-spacing:-.02em}
.step p,.col-etape p,.encart p{color:var(--enc2);font-size:14.5px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--rr);padding:24px 16px;
  text-align:center;box-shadow:var(--o1),var(--hi)}
.stat b{display:block;font-family:'PlexMono';font-weight:600;font-size:28px;color:var(--ind-f);
  font-variant-numeric:tabular-nums}
.stat small{display:block;font-size:12px;color:var(--mut);margin-top:8px;line-height:1.4}

/* ---- fiche, encadré cantonal ---- */
.fiche{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.fiche>div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 16px;
  box-shadow:var(--o1),var(--hi)}
.fiche small{display:block;font-family:'PlexMono';font-weight:600;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut);margin-bottom:4px}
.fiche b{font-size:15px;color:var(--enc)}
.encart{border:1px solid var(--line);border-left:4px solid var(--cya);background:#fff;
  border-radius:0 var(--rr) var(--rr) 0;padding:16px;margin-top:24px;
  box-shadow:var(--o1),var(--hi);transition:box-shadow .25s}
.encart:hover{box-shadow:var(--o2),var(--hi)}
.encart a{font-weight:700}

/* ---- communes ---- */
.communes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;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:12px;padding:12px 16px;text-decoration:none;color:var(--enc);
  font-weight:700;font-size:14px;box-shadow:var(--o1),var(--hi);
  transition:transform .16s cubic-bezier(.2,.8,.3,1),border-color .16s,box-shadow .16s}
.communes-grid a:hover{transform:translateY(-3px);border-color:var(--ind-c);box-shadow:var(--o2),var(--hi)}
.communes-grid small{font-family:'PlexMono';font-weight:600;font-size:10.5px;color:var(--mut)}

/* ---- FAQ ---- */
.sec-faq{position:relative}
.faq-list{max-width:820px;margin-top:24px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:12px;
  overflow:hidden;box-shadow:var(--o1),var(--hi);transition:box-shadow .2s,transform .2s}
.faq-item:hover{transform:translateY(-2px);box-shadow:var(--o2),var(--hi)}
.faq-item[open]{border-color:rgba(13,148,136,.34);box-shadow:var(--o2),var(--hi)}
.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:16px;top:50%;width:14px;height:14px;
  margin-top:-7px;background:var(--ind);transition:transform .25s;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:hover{color:var(--lien)}
.faq-a{padding:0 16px 16px;color:var(--enc2);font-size:14.5px}
.faq-a p{max-width:78ch}
/* /faq/ était une page ORPHELINE : 0 lien de corps entrant, médiane du site 5 */
.faq-suite{margin-top:16px;text-align:center;font-size:14.5px;font-weight:700}
.faq-suite a{color:var(--lien);text-decoration:none;
  box-shadow:0 1px 0 0 rgba(13,148,136,.34);transition:box-shadow .18s}
.faq-suite a:hover{box-shadow:0 2px 0 0 var(--ind)}

/* ---- figures : schémas et profil d'altitude ---- */
.fig{margin:32px 0;max-width:720px}
.fig .vis{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:var(--rr);
  box-shadow:var(--o1),var(--hi);background:#fff;
  transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s}
.fig:hover .vis{transform:translateY(-3px);box-shadow:var(--o2),var(--hi)}
.fig figcaption{margin-top:12px;font-size:13.5px;line-height:1.6;color:var(--enc2);max-width:68ch}
.fig-schema{max-width:720px}
/* ⚠️ .fig-photo et `.fig img` n'avaient AUCUNE règle : la photo d'une page de
   prestation sortait sans cadre, sans rayon et sans ombre, au milieu d'une peau
   qui en met partout. Le contrôle de couverture des classes était passé AVANT
   que ces deux-là existent — il se relance après chaque ajout de gabarit. */
.fig img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  border:1px solid var(--line);border-radius:var(--rr);box-shadow:var(--o1),var(--hi);
  transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s}
.fig:hover img{transform:translateY(-3px);box-shadow:var(--o2),var(--hi)}
.fig-photo{max-width:720px}
/* la section qui porte une figure sous le hero : moins d'air que les autres,
   elle prolonge le hero au lieu d'ouvrir un chapitre */
.sec-fig{padding:32px 0 8px}
.sec-fig .fig{margin-top:0}

/* ---------------- LISIBILITÉ DES TITRES SUR L'AURORE ----------------
   ⚠️ Le H1 est en encre foncée (#07231f) et l'aurore passe derrière lui : sur
   les pages où un foyer violet remonte à gauche, le contraste tombe. La parade
   n'est pas d'éclaircir le fond partout — ce serait perdre l'aurore — mais de
   poser un LAVIS BLANC très doux DERRIÈRE LA COLONNE DE TEXTE seulement.
   Le dégradé reste visible sur les bords, et le texte est toujours sur du clair.
   C'est le même geste que .voile, qui fait déjà ça pour la carte de devis. */
.hero-grid>div:first-child{position:relative}
.hero-grid>div:first-child::before{content:'';position:absolute;z-index:-1;
  inset:-40px -64px -32px -9999px;pointer-events:none;
  /* ⚠️ Une ELLIPSE a un bord, et ce bord se voyait contre le teal : une tache
     blanche posée sur le fond. Un voile LINÉAIRE qui part du bord gauche de la
     fenêtre n'a plus qu'une transition, monotone, et la couleur reste à droite,
     derrière la carte. */
  background:linear-gradient(100deg,rgba(255,255,255,.94) 0 42%,rgba(255,255,255,.72) 62%,
    rgba(255,255,255,.34) 78%,transparent 92%)}

/* ---- bandeau de relance, à mi-page ----
   Entre la carte du hero et le CTA final, un corps de 1'300 à 1'900 mots
   n'offrait AUCUNE sortie. Fond OPAQUE : rien derrière une action. */
.relance{margin:48px 0;background:linear-gradient(120deg,#f7fdfc,#e6f6f4);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.relance::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(46% 120% at 88% 50%,rgba(45,212,191,.20),transparent 70%)}
.relance-in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:32px;
  padding-top:24px;padding-bottom:24px}
.relance-txt{min-width:0}
.relance-t{font-family:'Geist',system-ui,sans-serif;font-weight:800;font-size:24px;color:var(--enc);
  letter-spacing:-.03em}
.relance-s{color:var(--enc2);font-size:14.5px;max-width:52ch;margin-top:4px}
.relance-act{display:flex;flex-direction:column;align-items:stretch;gap:8px;flex:none;width:270px}
/* le téléphone est la SECONDE voie : encre et contour, jamais la couleur d'accent */
.relance-tel{display:block;text-align:center;font-family:'PlexMono';font-weight:600;font-size:15px;
  color:var(--enc);text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:12px 16px;box-shadow:var(--o1),var(--hi);
  transition:transform .16s cubic-bezier(.2,.8,.3,1),box-shadow .16s,border-color .16s}
.relance-tel:hover{transform:translateY(-2px);border-color:var(--ind-c);box-shadow:var(--o2),var(--hi)}

/* ---- bande de gages ---- */
.bande{position:relative;overflow:hidden;
  background:linear-gradient(100deg,var(--nuit),#0a4a44 52%,#083b4d)}
.bande::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(40% 160% at 16% 50%,rgba(45,212,191,.42),transparent 70%),
             radial-gradient(38% 150% at 82% 50%,rgba(3,105,161,.36),transparent 70%)}
.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:#e4fbf7;font-weight:700;font-size:14px}
.bande-in span{display:inline-flex;align-items:center;gap:8px}
.bande-in .ico{color:#7ce3d5}

/* ---- article / guide ---- */
.article{padding:48px 0}
.article .wrap-art{max-width:780px}
.article h1{font-family:'Geist',system-ui,sans-serif;font-weight:800;
  font-size:clamp(28px,3.4vw,42px);margin-bottom:16px;text-wrap:balance;letter-spacing:-.03em}
.article h2{font-family:'Geist',system-ui,sans-serif;font-weight:800;
  font-size:clamp(21px,2.4vw,27px);margin:32px 0 12px;letter-spacing:-.025em}
.article h3{font-family:'Geist',system-ui,sans-serif;font-weight:700;font-size:18px;margin:24px 0 8px}
.article p,.article li{max-width:74ch}
.article p,.part-txt p{color:var(--enc2);margin-bottom:16px}
.article ul,.article ol{margin:0 0 16px 24px;color:var(--enc2)}
.article li{margin-bottom:8px}

.art-retour{margin-top:32px;font-weight:700}
.art-retour a{color:var(--lien);text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.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(--rr);padding:24px;
  text-decoration:none;box-shadow:var(--o1),var(--hi);
  transition:transform .2s cubic-bezier(.2,.8,.3,1),box-shadow .2s}
.art-card:hover{transform:translateY(-4px);box-shadow:var(--o2),var(--hi)}
.art-card b{font-family:'Geist',system-ui,sans-serif;font-weight:800;font-size:20px;color:var(--enc);
  display:block;margin-bottom:8px;line-height:1.2;letter-spacing:-.025em}
.art-card p{color:var(--enc2);font-size:14px;margin-bottom:12px}
.art-card i{font-style:normal;font-weight:700;font-size:13.5px;color:var(--lien)}

/* ---- CTA final : section CLAIRE, avec un halo ---- */
.sec-cta{position:relative;overflow:hidden;
  background:linear-gradient(180deg,#f4fcfb,#e2f4f2)}
.sec-cta::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(46% 90% at 50% 8%,rgba(45,212,191,.30),transparent 70%),
             radial-gradient(40% 70% at 82% 96%,rgba(3,105,161,.22),transparent 70%)}
.cta-fin{position:relative;z-index:1;text-align:center;padding-top:12px;padding-bottom:12px}
.cta-fin h2{color:var(--enc);margin-bottom:12px}
.cta-fin h2::before{margin-left:auto;margin-right:auto}
.cta-fin p{color:var(--enc2);max-width:56ch;margin:0 auto 24px}
/* ⚠️ `.cta-fin p` est plus spécifique que `.alt{margin-top}` et lui remettait
   une marge haute de ZÉRO : le texte se collait sous le bouton et la barre
   d'ombre pleine du CTA passait dessous. Mesuré sur plaque de fond. */
.cta-fin .alt{margin:16px auto 0}
.cta-fin .alt+.alt{margin-top:8px}
.cta-fin .alt a{color:var(--lien)}

/* ==========================================================================
   BLOC PARTENAIRE — installateur nommé et avis publics
   ========================================================================== */
.sec-part{background:#fff;position:relative}
.part{display:grid;grid-template-columns:260px 1fr;gap:32px;align-items:start}
.part-id{position:sticky;top:24px;text-align:center;padding:24px 16px;background:#f7fdfc;
  border:1px solid var(--line);border-radius:var(--rr);box-shadow:var(--o1),var(--hi)}
.part-id img{margin:0 auto 12px;border-radius:12px}
.part-nap{font-size:13px;color:var(--enc2);line-height:1.6}
.part-nap b{color:var(--enc);font-size:15px}
.ide{font-family:'PlexMono';font-weight:600;font-size:11px;color:var(--mut)}
.part-txt h2{margin-bottom:16px}
.part-l{list-style:none;display:grid;gap:16px;margin-top:16px}
.part-l li{color:var(--enc2);padding-left:16px;border-left:3px solid rgba(13,148,136,.28)}
.part-l b{display:block;margin-bottom:4px}
.avis{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}
.avi{padding:24px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--ind);
  border-radius:0 var(--rr) var(--rr) 0;box-shadow:var(--o1),var(--hi);
  transition:transform .2s cubic-bezier(.2,.8,.3,1),box-shadow .2s}
.avi:hover{transform:translateY(-3px);box-shadow:var(--o2),var(--hi)}
.avi p{color:var(--enc2);line-height:1.68;margin-bottom:12px}
.avi cite{font-style:normal;font-size:14px;font-weight:600}

/* ==========================================================================
   PIED DE PAGE
   ========================================================================== */
.site-foot{position:relative;overflow:hidden;color:#c2e5e0;padding:64px 0 24px;
  background:linear-gradient(160deg,var(--nuit),#063a34 46%,#083b4d)}
.site-foot::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(40% 60% at 12% 0%,rgba(45,212,191,.36),transparent 70%),
             radial-gradient(44% 66% at 88% 100%,rgba(3,105,161,.30),transparent 70%)}
.site-foot .wrap{position:relative;z-index:1}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px}
.site-foot .logo{color:#fff;font-size:22px}
.site-foot .logo-p{background:linear-gradient(120deg,#5eead4,#a7f3d0);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.foot-txt{font-size:14px;line-height:1.65;color:#a6d5d0;margin-top:16px;max-width:46ch}
.foot-txt a{color:#d8f5f1}
.site-foot h3{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#8cb8b3;
  margin-bottom:12px;font-weight:700}
.foot-nav{display:grid;gap:8px}
.foot-nav a{color:#c2e5e0;text-decoration:none;font-size:14px;transition:color .18s}
.foot-nav a:hover{color:#fff}
.foot-com .foot-nav-com{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
.foot-legal{margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);
  font-size:12.5px;color:#8cb8b3}
.foot-legal a{color:#c2e5e0}

/* ---- CTA collant, mobile ---- */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:70;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(247,253,252,.97);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .3s ease;display:none;
  box-shadow:0 -12px 32px -18px rgba(4,60,55,.7)}
.sticky-cta .cta{width:100%}
.sticky-cta.vu{transform:none}
@media (max-width:760px){.sticky-cta{display:block}}

/* ---- popup ---- */
.pum{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(4,33,29,.55);backdrop-filter:blur(8px);opacity:0;
  transition:opacity .3s ease}
.pum.vu{opacity:1}
.pum-card{position:relative;width:min(460px,100%);background:#fff;border-radius:var(--rg);padding:24px;
  box-shadow:var(--o3);transform:translateY(16px);transition:transform .32s cubic-bezier(.2,.9,.3,1)}
.pum.vu .pum-card{transform:none}
@media (max-width:600px){
  .pum{align-items:flex-end;padding:0}
  .pum-card{width:100%;border-radius:var(--rg) var(--rg) 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}}

/* ==========================================================================
   ENTRÉE — transform SEULEMENT, jamais l'opacité d'un texte
   Aucune classe posée par le JS, aucun IntersectionObserver : l'animation se
   termine toujours seule. L'ancienne version posait opacity:0 sur 129
   éléments, que tout contrôle de contraste sautait EN SILENCE.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  [data-rev]{animation:monte .5s cubic-bezier(.22,.61,.36,1) both}
  .part[data-rev],.part [data-rev]{animation:none}   /* transform casse position:sticky */
  .card-in{animation:cardIn .8s cubic-bezier(.16,1.15,.3,1) .12s both}
}
@keyframes monte{from{transform:translateY(10px)}to{transform:none}}
@keyframes cardIn{from{transform:translateY(18px)}to{transform:none}}

/* Toute animation coupée laisse l'ÉTAT FINAL, jamais l'état de départ. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-rev],.card-in,.foyers i,.halo i,.motif{transform:none!important;opacity:1!important}
  }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  /* ⚠️ gap À ZÉRO, et chaque pièce porte sa marge : le gap de la grille
     s'ajoute sinon aux marges propres des blocs et repousse la carte sous
     le pli. Mordu sur Nyon : 693-732 px pour un écran de 667. */
  .hero-grid{grid-template-columns:1fr;gap:0;padding-top:24px;padding-bottom:48px}
  .halo,.voile{display:none}
  .foyers{inset:-20% -30%}
  /* en empilé, pas de résultat AVANT l'outil */
  .hero .live,.hero .srcline{display:none}
  /* invariant : information PUIS formulaire — eyebrow, H1, sous-titre, ET
     ENSUITE la carte. Les gages passent après : ils rassurent, ils
     n'informent pas sur le produit, et ils coûtaient 150 px au-dessus du pli. */
  /* ⚠️ `display:contents` supprime la BOÎTE de la colonne de texte : le voile
     blanc qu'elle portait (::before) n'existe plus du tout en vue étroite, et
     le titre se retrouve posé sur le teal plein. Mesuré à 1440 seulement, on ne
     le voit jamais. Le voile passe donc sur le hero lui-même, en bande
     verticale, au-dessus des foyers et sous le contenu (z-index 20). */
  .hero::after{content:'';position:absolute;left:0;right:0;top:0;height:82%;z-index:6;
    pointer-events:none;
    background:linear-gradient(180deg,rgba(255,255,255,.88) 0 44%,
      rgba(255,255,255,.66) 66%,rgba(255,255,255,.26) 85%,transparent)}
  .hero-grid>div:first-child{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2;margin-bottom:12px}
  .hero .sub{order:3;margin-bottom:16px}
  .hero .cardwrap{order:4}
  .hero .trust{order:5;margin-top:24px}
  /* ⚠️ Sans `order`, la bande d'altitude prenait la valeur 0 : elle passait
     AVANT l'eyebrow, donc avant le H1, et repoussait la carte de devis à
     600-652 px sur un écran de 568. L'invariant « information → formulaire »
     était violé par un élément qui n'avait rien demandé. */
  .hero .sig{order:6;margin-top:24px}
  .hero .warn-col{order:7}
  .prestas{grid-template-columns:repeat(2,1fr)}
  .stats,.steps{grid-template-columns:repeat(2,1fr)}
  .part{grid-template-columns:1fr;gap:24px}
  .part-id{position:static}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
}
/* ⚠️ Mesuré : à 320x568, la carte de devis tombait à 586 px — donc ZÉRO pixel
   visible au premier écran, sur l'invariant de conversion le plus dur du
   réseau. On reprend 140 px sur le titre et ses marges, sans toucher à l'ordre
   information → formulaire. */
@media (max-width:380px){
  .hero-grid{padding-top:16px}
  .hero h1{font-size:clamp(27px,8.2vw,34px);margin:12px 0 8px}
  .hero .sub{font-size:15px;line-height:1.5;margin-bottom:12px}
  .eyebrow{font-size:10px;padding:6px 12px;letter-spacing:.12em}
  .card{padding:16px 14px}
  .site-head{gap:8px;padding:10px 14px}
  .logo{font-size:18px}
  .head-cta{font-size:12.5px;padding:9px 12px}
}
@media (max-width:760px){
  .wrap{padding-left:16px;padding-right:16px}
  .sec{padding:48px 0}
  .cols2,.cols3,.arts,.avis{grid-template-columns:1fr}
  .prestas,.steps,.stats{grid-template-columns:1fr}
  .fiche{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr;gap:32px}
  .bande-in{justify-content:flex-start;gap:8px 16px;font-size:13px}
  .card{padding:16px}
  .relance-in{flex-direction:column;align-items:stretch;gap:16px}
  .relance-act{width:auto}
  .relance-t{font-size:21px}
  .etage .e{font-size:12px}
  .etage .e:nth-child(3){margin-left:8px}
  .etage .e:nth-child(4){margin-left:16px}
}

/* ==========================================================================
   PIÈCES PROPRES AU #18
   ========================================================================== */

/* ---- SIGNATURE : la bande d'altitude ----
   L'élément qui distingue ce site du #11 (dont la signature est l'étage de
   contrainte). Il porte une donnée VRAIE et propre au périmètre : les douze
   communes placées de 387 m à Saint-Saphorin à 843 m à Maracon, relevées dans
   `_build/_slugs.py`. L'altitude est ce qui décide de la puissance à poser :
   la signature dit donc quelque chose d'utile, elle ne décore pas.
   ⚠️ Le repère de la page est un POINT plus large, pas une couleur seule :
   un daltonien doit le trouver aussi. */
.sig{margin-top:24px;border:1px solid var(--line);border-radius:var(--rr);
  background:rgba(255,255,255,.86);backdrop-filter:blur(8px);padding:16px;
  box-shadow:var(--o1),var(--hi)}
.sig-t{display:block;font-family:'PlexMono';font-weight:600;font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--mut);margin-bottom:12px}
.band{position:relative;height:34px;margin:0 4px 8px}
.band::before{content:'';position:absolute;left:0;right:0;top:15px;height:4px;border-radius:999px;
  background:linear-gradient(90deg,var(--cya),var(--ind) 46%,var(--amb))}
.band i{position:absolute;top:9px;left:var(--p);width:16px;height:16px;margin-left:-8px;
  border-radius:50%;background:#fff;border:3px solid var(--ind);
  box-shadow:0 2px 8px rgba(4,60,55,.35);
  transition:transform .18s cubic-bezier(.2,.8,.3,1)}
.band i:hover{transform:scale(1.35);z-index:3}
.band i.hi{border-color:var(--amb);width:22px;height:22px;top:6px;margin-left:-11px;
  box-shadow:0 4px 14px rgba(234,88,12,.55)}
.band-lg{display:flex;justify-content:space-between;gap:16px;font-size:12px;color:var(--enc2)}
.band-lg b{font-family:'PlexMono';font-weight:600;color:var(--enc);margin-right:4px}

/* ---- listes à coches des pages de fond ---- */
.checks{list-style:none;display:grid;gap:12px;margin:16px 0;padding:0}
.checks li{position:relative;font-size:14.5px;line-height:1.65;color:var(--enc2);
  padding-left:32px}
.checks li::before{content:'';position:absolute;left:0;top:2px;width:20px;height:20px;
  border-radius:6px;background-color:var(--ind);
  -webkit-mask:var(--ico-ok) center/13px 13px no-repeat;
  mask:var(--ico-ok) center/13px 13px no-repeat}
.checks li strong,.checks li b{color:var(--enc)}

/* ---- lien de corps mis en avant ---- */
.lnk{font-family:'Geist',system-ui,sans-serif;font-weight:700;color:var(--lien);
  text-decoration:none;box-shadow:0 1px 0 0 rgba(13,148,136,.34);
  transition:box-shadow .18s,color .18s}
.lnk:hover{color:var(--lien);box-shadow:0 2px 0 0 var(--ind)}
/* la flèche du lien est un TRACÉ en masque, pas U+2192 : le caractère n'est
   dans aucune des trois polices, et il se trouvait en fin de 12 liens de corps.
   Bonus : elle avance de 4 px au survol, ce que le glyphe ne faisait pas. */
.lnk::after{content:'';display:inline-block;width:15px;height:15px;margin-left:6px;
  vertical-align:-.14em;background-color:currentColor;
  -webkit-mask:var(--ico-fl) center/contain no-repeat;
  mask:var(--ico-fl) center/contain no-repeat;
  transition:transform .18s cubic-bezier(.2,.8,.3,1)}
.lnk:hover::after{transform:translateX(4px)}

/* ---- bloc partenaire : la ligne de vérifiabilité ---- */
.part-lien{font-family:'PlexMono';font-weight:600;font-size:11.5px;line-height:1.6;
  color:var(--mut);margin-top:16px;padding-top:16px;border-top:1px solid var(--line);
  max-width:74ch}

/* ---- pied : le rappel du partenaire ---- */
.foot-part{border-top:1px solid rgba(255,255,255,.14);padding-top:16px;margin-top:16px}

/* ---- page /credits-photos/ (noindex) ----
   Une liste, pas un tableau : à 320 px un tableau à 4 colonnes déborde, et la
   page n'a pas besoin d'être lisible en diagonale — elle doit être exacte. */
.cred{list-style:none;display:grid;gap:16px;margin-top:24px;max-width:820px}
.cred li{background:#fff;border:1px solid var(--line);border-radius:var(--rr);padding:16px;
  box-shadow:var(--o1),var(--hi)}
.cred b{display:block;color:var(--enc);font-size:15px;margin-bottom:4px}
.cred span{display:block;font-size:13px;color:var(--enc2)}
.cred small{display:block;font-family:'PlexMono';font-weight:600;font-size:11px;
  color:var(--mut);margin-top:8px}

/* ---- la nuance : un paragraphe d'avertissement ----
   L'emoji ⚠️ (U+26A0 + son sélecteur de variante U+FE0F) n'est dans AUCUNE des
   trois polices du site : il tombait sur la police système, absente sur
   certaines machines. Le triangle est devenu un tracé en masque, qui prend la
   couleur du jeton. */
.nuance,.nuance-t{position:relative;padding-left:32px}
.nuance::before,.nuance-t::before{content:'';position:absolute;left:0;top:.28em;
  width:20px;height:20px;background-color:var(--amb);
  -webkit-mask:var(--ico-warn) center/contain no-repeat;
  mask:var(--ico-warn) center/contain no-repeat}
.nuance-t::before{top:.24em;width:26px;height:26px}
.nuance-t{padding-left:38px}
.sec .nuance-t::before{position:absolute}

/* ---- le pied : ses intertitres sont des h2 (un h4 apres un h2 cree un saut) ----
   ⚠️ Sans cette regle, les 132 titres de pied du site sortaient en taille h2 :
   la classe existait dans le HTML, pas dans la feuille. Le controle de
   couverture des classes l'a attrapee avant la mise en ligne. */
.foot-t{font-family:'Manrope',system-ui,sans-serif;font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:#8cb8b3;margin-bottom:12px;font-weight:700;line-height:1.4}
.foot-t::before{content:none}

/* ---- la ligne des prestations sans carte, sur l'accueil ---- */
.lead-suite{margin-top:24px;font-size:15px;line-height:1.9}

/* ---- la coupe du site : elle respire plus large que les schemas ---- */
.vis-coupe{background:#fff}
.fig .vis-coupe{border-color:var(--line)}

/* ==========================================================================
   LA POPUP « Partez avec votre chiffre »
   ⚠️ Six de ces classes n'avaient AUCUNE règle : le formulaire sortait sans
   espacement, et la croix de fermeture sans aucun style. Elles sont posées par
   `main.js`, donc absentes du HTML généré — et mon contrôle de couverture les
   avait EXEMPTÉES pour cette raison. Un contrôle qui exempte ce qu'il devrait
   vérifier ne contrôle rien : `classes.py` lit désormais aussi le JS.
   ========================================================================== */
.pum-card{display:flex;flex-direction:column}
.pum-x{position:absolute;top:12px;right:12px;width:36px;height:36px;display:grid;
  place-items:center;font-size:22px;line-height:1;color:var(--mut);background:#fff;
  border:1px solid var(--line);border-radius:10px;cursor:pointer;padding:0;
  transition:transform .16s cubic-bezier(.2,.8,.3,1),color .16s,border-color .16s,box-shadow .16s}
.pum-x:hover{color:var(--enc);border-color:var(--ind-c);box-shadow:var(--o1);transform:translateY(-1px)}
.pum-eti{font-family:'PlexMono';font-weight:600;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mut);margin-bottom:8px}
.pum-card h3{font-family:'Geist',system-ui,sans-serif;font-weight:800;font-size:23px;
  letter-spacing:-.03em;color:var(--enc);margin-bottom:12px;padding-right:44px}
.pum-chiffre{font-family:'PlexMono';font-weight:600;font-size:17px;color:var(--ind-f);
  font-variant-numeric:tabular-nums;background:rgba(13,148,136,.08);
  border:1px solid rgba(13,148,136,.20);border-radius:12px;padding:12px 16px;margin-bottom:16px}
.pum-p{font-size:14px;line-height:1.6;color:var(--enc2);margin-bottom:16px}
.pum-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.pum-full{grid-column:1/-1}
.pum-ok{text-align:center;font-weight:700;color:#0a6b4a;background:rgba(14,159,110,.10);
  border:1px solid rgba(14,159,110,.35);border-radius:10px;padding:16px;margin-top:12px}
.pum-card .lpd{margin-top:12px}
@media (max-width:420px){.pum-grid{grid-template-columns:1fr}}