/* ==========================================================================
   pompe-a-chaleur-riviera.ch — registre « AURORE & VERRE »
   ==========================================================================
   Remplace « Terrasses & Léman », refusé le 2026-08-20 : « je déteste le fond,
   un peu cahier avec les lignes », « les couleurs sont tristes, fades ».
   C'est la QUATRIÈME peau refusée du réseau, et toujours pour la même cause —
   du papier et du mobilier éditorial sur un métier technique. Les vingt sites
   étaient sur crème, craie, parchemin, tuf, gypse, sable, chaux, ivoire…
   celui-ci ne l'est plus : de la LUMIÈRE colorée, pas une trame.

   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é (`background-position`, les
      stops) : 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.
      ⚠️ L'ancienne peau animait `background-position` sur 53 s en plein écran.
   3. Pas de `filter:blur()` sur une surface plein écran — c'est le poste le
      plus cher de la page. 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:'Onest';font-weight:400 800;font-display:swap;src:url(/fonts/onest.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:#f4f3fe;
  --bg2:#fbfaff;
  --nuit:#120f33;

  --enc:#0f1023; --enc2:#3f4263; --mut:#5f6389;

  --ind:#4f46e5; --ind-f:#3b31c9; --ind-c:#7c6ff5;
  --vio:#a855f7; --cya:#0891b2; --ros:#f43f5e; --amb:#f59e0b;
  --ok:#0e9f6e;

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

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

  --grad:linear-gradient(135deg,var(--ind-c),var(--ind) 52%,var(--ind-f));
  --grad-t:linear-gradient(104deg,var(--ind) 6%,var(--vio) 46%,var(--cya) 88%);
  --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='%234f46e5' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='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(--ind)}
.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(245,158,11,.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(250,249,255,.86);backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid rgba(255,255,255,.8);
  box-shadow:0 1px 0 rgba(15,16,35,.05);transition:box-shadow .25s}
.site-head.scrolle{box-shadow:0 1px 0 rgba(15,16,35,.06),0 12px 32px -20px rgba(40,28,110,.6)}
.logo{font-family:'Onest',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(79,70,229,.10);color:var(--ind)}
.nav a.on{color:var(--ind);background:rgba(79,70,229,.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(79,70,229,.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(79,70,229,.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(250,249,255,.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(40,28,110,.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
   Les calques du gabarit sont RÉUTILISÉS tels quels, aucun balisage n'a
   changé : .foyers>.f1..f4 deviennent les foyers de l'aurore, .halo>.h1/.h2
   deux glows secondaires, .voile le halo blanc qui soulève la carte, .motif
   le foyer chaud, .motes la poussière de lumière, .grain le grain.
   ========================================================================== */
.hero{position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(120% 80% at 50% -10%, #fcfbff 0%, transparent 58%),
    linear-gradient(178deg, #f8f7ff 0%, #efedfd 46%, #e8e5fb 100%)}
/* ⚠️ Ni min-height en vh, ni align-items:center — invariant de conversion.
   L'ancienne règle faisait 92vh avec le contenu centré dedans : du vide
   AU-DESSUS du pli, et la carte de devis à 609 px sur un écran de 667. */
.hero-max{min-height:0}
.hero-page{padding:8px 0 16px}

.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:56%;height:74%;left:-8%;top:-14%;
  background:radial-gradient(closest-side,rgba(79,70,229,.72),rgba(79,70,229,.34) 46%,transparent 72%);
  animation:d1 26s ease-in-out infinite alternate}
.f2{width:48%;height:64%;right:-6%;top:-18%;
  background:radial-gradient(closest-side,rgba(168,85,247,.68),rgba(168,85,247,.28) 46%,transparent 72%);
  animation:d2 21s ease-in-out infinite alternate}
.f3{width:54%;height:66%;right:-14%;bottom:-24%;
  background:radial-gradient(closest-side,rgba(8,145,178,.62),rgba(8,145,178,.26) 48%,transparent 74%);
  animation:d3 31s ease-in-out infinite alternate}
.f4{width:46%;height:56%;left:8%;bottom:-30%;
  background:radial-gradient(closest-side,rgba(244,63,94,.42),rgba(244,63,94,.16) 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 : il empêche l'ensemble de virer au « tout froid », et il
   rappelle qu'on vend de la chaleur. (ancien .motif) */
.motif{position:absolute;z-index:1;left:38%;top:28%;width:42%;height:50%;pointer-events:none;
  border-radius:50%;will-change:transform;
  background:radial-gradient(closest-side,rgba(245,158,11,.30),rgba(245,158,11,.10) 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(124,111,245,.34),transparent 70%);
  animation:resp 8.6s ease-in-out infinite alternate}
.halo .h2{inset:18%;background:radial-gradient(closest-side,rgba(8,145,178,.30),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(196,181,253,.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. (ancien .voile) */
.voile{position:absolute;z-index:4;right:-2%;top:-8%;width:50%;height:96%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.88),rgba(255,255,255,.34) 46%,transparent 74%)}

/* la photo, tenue dans un cadre blanc épais et inclinée : c'est un OBJET POSÉ,
   pas un fond. Elle dérive très lentement en `transform`.
   ⚠️ Elle ne recouvre JAMAIS de texte — un décor qui passe sur un mot est la
   même faute que « un motif derrière une action ». */
.ph{position:absolute;z-index:6;right:-3%;bottom:4%;width:21%;height:30%;border-radius:24px;
  pointer-events:none;background:url(/images/imi-hydraulique.webp) center 42%/cover;
  box-shadow:0 34px 76px -18px rgba(40,28,110,.42),0 0 0 12px #fff,0 0 0 13px rgba(15,16,35,.05);
  animation:flotte 12s ease-in-out infinite alternate;will-change:transform}
@keyframes flotte{from{transform:rotate(4.6deg) translateY(0)}to{transform:rotate(3.2deg) translateY(-10px)}}

/* 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:.32;
  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(40,28,110,.28),var(--hi)}
h1{font-family:'Onest',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%)}}
.rv{display:inline-block;vertical-align:bottom}
.rvi{display:inline-block}

.sub{color:var(--enc2);max-width:50ch;font-size:17px;margin-bottom:24px}
.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(124,111,245,.24)}100%{background-color:rgba(255,255,255,.96)}}

.srcline{font-size:12.5px;color:var(--mut);margin-bottom:20px;max-width:54ch}
.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(79,70,229,.22);
  background-image:var(--ico-ok),linear-gradient(140deg,rgba(79,70,229,.14),rgba(168,85,247,.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(244,63,94,.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}
.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),var(--vio),var(--cya),var(--ros),var(--amb),var(--ind));
  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(124,111,245,.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),var(--vio) 55%,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(124,111,245,.06) 42%,rgba(255,255,255,.5) 50%,
  rgba(8,145,178,.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:'Onest',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%),#e7e6f6 var(--fill,40%));
  box-shadow:inset 0 1px 3px rgba(40,28,110,.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(79,70,229,.4),0 0 0 6px rgba(79,70,229,.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(79,70,229,.5),0 0 0 9px rgba(79,70,229,.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(79,70,229,.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(79,70,229,.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:#fbfbff;
  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(79,70,229,.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:'Onest',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(79,70,229,.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(79,70,229,.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(--ind);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:#fbfbff;
  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(124,111,245,.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(79,70,229,.14),rgba(168,85,247,.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(15,16,35,.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(124,111,245,.10),rgba(8,145,178,.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:'Onest',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:'Onest',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(--ind);
  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}
.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:'Onest',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(79,70,229,.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(--ind)}
.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(--ind);text-decoration:none;
  box-shadow:0 1px 0 0 rgba(79,70,229,.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-profil{max-width:none}
.fig-schema{max-width:720px}
.vis-profil{background:#fff}
/* ⚠️ .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 (#0f1023) 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:-48px -64px -32px -64px;pointer-events:none;
  background:radial-gradient(58% 62% at 34% 40%,rgba(255,255,255,.94),rgba(255,255,255,.62) 46%,transparent 76%)}

/* ---- 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,#fbfaff,#f2f0fe);
  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(124,111,245,.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:'Onest',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),#231a5c 52%,#0b2d4a)}
.bande::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(40% 160% at 16% 50%,rgba(124,111,245,.42),transparent 70%),
             radial-gradient(38% 150% at 82% 50%,rgba(8,145,178,.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:#eceaff;font-weight:700;font-size:14px}
.bande-in span{display:inline-flex;align-items:center;gap:8px}
.bande-in .ico{color:#7dd3e8}

/* ---- tableaux ---- */
.table-scroll{overflow-x:auto;margin-top:16px;border-radius:var(--rr);box-shadow:var(--o1)}
.tbl{width:100%;border-collapse:collapse;background:#fff;font-size:14.5px}
.tbl th{background:linear-gradient(100deg,var(--nuit),#231a5c);color:#eeecff;text-align:left;
  font-size:13px;letter-spacing:.05em;padding:16px;font-weight:700}
.tbl td{padding:16px;border-top:1px solid var(--line);color:var(--enc2);vertical-align:top}
.tbl tr:nth-child(even) td{background:#fbfaff}
.tbl td:first-child{color:var(--enc);font-weight:700}

/* ---- article / guide ---- */
.article{padding:48px 0}
.article .wrap-art{max-width:780px}
.article h1{font-family:'Onest',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:'Onest',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:'Onest',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}
.article .art-note{font-size:13.5px;color:var(--mut);border-left:3px solid var(--cya);padding:12px 16px;
  background:#fff;border-radius:0 12px 12px 0;margin-bottom:16px;box-shadow:var(--o1)}
.art-retour{margin-top:32px;font-weight:700}
.art-retour a{color:var(--ind);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:'Onest',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(--ind)}

/* ---- CTA final : section CLAIRE, avec un halo ---- */
.sec-cta{position:relative;overflow:hidden;
  background:linear-gradient(180deg,#f7f6ff,#edeafd)}
.sec-cta::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(46% 90% at 50% 8%,rgba(124,111,245,.30),transparent 70%),
             radial-gradient(40% 70% at 82% 96%,rgba(8,145,178,.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(--ind)}

/* ==========================================================================
   BLOC PARTENAIRE — installateur nommé, chantiers, 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:#fbfaff;
  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(79,70,229,.28)}
.part-l b{display:block;margin-bottom:4px}
.chant{margin-top:48px;padding-top:32px;border-top:1px solid var(--line)}
.chant-t{font-family:'Onest',system-ui,sans-serif;font-weight:800;font-size:19px;
  letter-spacing:-.025em;margin-bottom:16px}
.chant-g{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.chant-g figure{margin:0}
.chant-g img{width:100%;background:var(--bg);border-radius:var(--rr);box-shadow:var(--o2)}
.chant-g figcaption{margin-top:12px;font-size:14.5px;line-height:1.58;color:var(--enc2)}
.chant-src{margin-top:24px;font-size:13.5px;line-height:1.6;color:var(--enc2);max-width:78ch}

.sec-avis{position:relative}
.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:#cecbf2;padding:64px 0 24px;
  background:linear-gradient(160deg,var(--nuit),#1b1547 46%,#0c2946)}
.site-foot::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(40% 60% at 12% 0%,rgba(124,111,245,.36),transparent 70%),
             radial-gradient(44% 66% at 88% 100%,rgba(8,145,178,.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,#a5b4fc,#e9d5ff);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.foot-txt{font-size:14px;line-height:1.65;color:#bcb8e8;margin-top:16px;max-width:46ch}
.foot-txt a{color:#e2e0ff}
.site-foot h3{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#a9a5d8;
  margin-bottom:12px;font-weight:700}
.foot-nav{display:grid;gap:8px}
.foot-nav a{color:#cecbf2;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:#a9a5d8}
.foot-legal a{color:#cecbf2}

/* ---- 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(250,249,255,.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(40,28,110,.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(18,15,51,.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],.rvi,.card-in,.foyers i,.halo i,.motif{transform:none!important;opacity:1!important}
  .ph{transform:rotate(4deg)!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,.ph{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. */
  .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}
  .hero .warn-col{order:6}
  .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}
}
@media (max-width:760px){
  .wrap{padding-left:16px;padding-right:16px}
  .sec{padding:48px 0}
  .cols2,.cols3,.arts,.chant-g,.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}
}