/* ================================================================
   pompe-a-chaleur-campagne-geneve.ch — registre « LE RANG SEMÉ »
   ----------------------------------------------------------------
   Site #19 du réseau PAC Suisse romande, et le dernier des vingt.
   Peau RE-PEINTE sur le squelette du réseau : mêmes composants, mêmes
   points de rupture, même échelle d'espacement par pas de 4 px.

   ⚠️ CE SITE EST LE FRÈRE DU #17, qui couvre l'agglomération du même
      canton. C'est le seul endroit du réseau où deux sites partagent
      un canton — ils ne doivent donc se ressembler EN RIEN. Le #17 est
      le premier registre sombre du réseau ; celui-ci repart en clair,
      sur un papier de terre, avec une serif de texte contre son
      grotesque, et un motif de lignes contre son semis de points.

   Palette : limon clair #ecebdd (papier) · surfaces #fffef8
             encre olive-noire #22261b — première encre à dominante
             VÉGÉTALE du réseau (les autres sont bleu-nuit, brun-ardoise,
             gneiss, graphite ou violacée)
             CTA olive profond #414d1c, blanc à 9,1:1 — premier CTA OLIVE
             donnée rouille #98450f (5,5:1) · froid bleu Rhône #245f7a (5,9:1)
   Motif   : « LE RANG SEMÉ » — les lignes de semis d'un champ, vues du
             coteau. PREMIER MOTIF DISCONTINU du réseau : les dix-huit
             autres dessinent des traits pleins, des arcs, une maille, un
             cône, un glyphe ou un semis de points — aucun n'est POINTILLÉ.
             La discontinuité est obtenue par une nappe de barres couleur
             papier posée PAR-DESSUS les rangs : le tiret n'est pas dessiné,
             il est ce qui reste. Deux pas coprimes (13 px le rang, 18 px
             la graine) dérivant sur 53 s, plus un sillon continu à 3° sur
             37 s — périodes premières entre elles, donc jamais deux fois
             la même superposition. Zéro SVG, zéro image.
   Typo    : Newsreader variable 400/800, sous-ensemblée au français
             (38,1 Ko, Œ inclus) — première SERIF DE TEXTE du réseau, à
             distinguer de l'Alegreya humaniste du #11 et de la Petrona
             transitionnelle du #14 : celle-ci est une serif de journal,
             et la campagne genevoise se lit comme un almanach.
             + Manrope (corps) + IBM Plex Mono (la donnée).

   ⚠️ LE BLOC @font-face CI-DESSOUS NE DOIT JAMAIS ÊTRE COUPÉ. Une refonte
      du site frère l'a supprimé une fois : le site a tourné des jours sur
      les polices de repli du système.
   ⚠️ AUCUN MOTIF DERRIÈRE UN FORMULAIRE. La carte de devis et la popup
      sont OPAQUES, sans image de fond, détachées par un liseré net — pas
      par une transparence. Et le masque du motif est calé LOIN de la
      carte (18 % 26 %), leçon coûteuse du site frère.
   ⚠️ ÉCHELLE D'ESPACEMENT UNIQUE, par pas de 4 px (--s1 … --s9).
================================================================ */
@font-face{font-family:'Display';font-weight:400 800;font-display:swap;src:url(/fonts/newsreader-fr.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{
  color-scheme:light;
  /* --- la terre : le papier et ses surfaces --- */
  --pap:#ecebdd;--pap2:#f3f2e8;--sur:#fffef8;--sur2:#f7f6ec;
  --line:#d8d6c2;--line2:#c2bfa6;
  --enc:#22261b;--enc2:#454a3a;--mut:#5f6552;
  /* --- les accents --- */
  --dat:#98450f;--lien:#245f7a;--cta:#414d1c;--cta-h:#53621f;--cta-e:#ffffff;
  --ok:#2c6b3f;--alerte:#8a5a00;--etoile:#8a6a12;
  /* --- la carte de devis : OPAQUE, sans motif, detachee par un lisere --- */
  --c-bg:#fffef8;--c-sur:#ffffff;--c-enc:#22261b;--c-enc2:#454a3a;--c-mut:#5f6552;
  --c-line:#ddd9c4;--c-line2:#c2bfa6;--c-acc:#414d1c;--c-ok:#2c6b3f;
  /* --- le motif : deux pas coprimes, et la barre qui fait le tiret --- */
  --tr:rgba(95,101,82,.22);--tr2:rgba(120,110,70,.20);
  --rang:repeating-linear-gradient(0deg,var(--tr) 0 2px,transparent 2px 13px);
  --graine:repeating-linear-gradient(90deg,transparent 0 11px,var(--pap) 11px 18px);
  --sillon:repeating-linear-gradient(3deg,var(--tr2) 0 3px,transparent 3px 71px);
  /* --- l'echelle d'espacement, par pas de 4 --- */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
  /* --- les rayons : la peau du SILLON, presque plats --- */
  --r1:3px;--r2:4px;--r3:5px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--pap2);color:var(--enc);font-family:'Manrope',system-ui,sans-serif;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--lien)}
h1,h2,h3,h4{font-family:'Display',system-ui,sans-serif;font-weight:700;letter-spacing:-.022em;line-height:1.14}
.skip{position:absolute;left:-999px;top:0;background:var(--cta);color:var(--cta-e);padding:var(--s3) var(--s4);z-index:200;border-radius:0 0 var(--r2) 0;font-weight:700}
.skip:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--dat);outline-offset:2px;border-radius:2px}
.card a:focus-visible,.card button:focus-visible,.card input:focus-visible,.card textarea:focus-visible,.pum-card a:focus-visible,.pum-card button:focus-visible,.pum-card input:focus-visible,.pum-card textarea:focus-visible{outline-color:var(--c-acc)}
.wrap{width:min(1240px,100%);margin:0 auto;padding-left:var(--s5);padding-right:var(--s5)}

/* ================= en-tête ================= */
.site-head{position:sticky;top:0;z-index:80;display:flex;align-items:center;gap:var(--s5);padding:var(--s3) var(--s5);background:rgba(236,235,221,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:border-color .25s,background .25s}
.site-head.scrolle{background:rgba(236,235,221,.97);border-bottom-color:var(--line2)}
.logo{font-family:'Display';font-weight:800;font-size:19px;letter-spacing:-.03em;color:var(--enc);text-decoration:none;white-space:nowrap}
.logo-p{color:var(--dat)}
.nav{display:flex;gap:var(--s1);margin-left:auto;flex-wrap:wrap}
.nav a{color:var(--enc2);text-decoration:none;font-size:14px;font-weight:700;padding:var(--s2) var(--s3);border-radius:var(--r1);transition:background .18s,color .18s}
.nav a:hover{background:var(--sur);color:var(--enc)}
.nav a.on{color:var(--dat)}
.head-cta{font-family:'Manrope';font-weight:700;font-size:14px;color:var(--cta-e);text-decoration:none;background:var(--cta);padding:var(--s3) var(--s4);border-radius:var(--r1);white-space:nowrap;transition:background .18s}
.head-cta:hover{background:var(--cta-h)}
.burger{display:none;flex-direction:column;gap:var(--s1);background:none;border:none;cursor:pointer;padding:var(--s2)}
.burger span{width:22px;height:2px;background:var(--enc);border-radius:2px;transition:transform .25s,opacity .25s}
@media (max-width:1080px){
  .nav{position:absolute;top:100%;left:0;right:0;background:rgba(236,235,221,.98);backdrop-filter:blur(14px);flex-direction:column;padding:var(--s4) var(--s5) var(--s5);gap:var(--s1);border-bottom:1px solid var(--line);transform:translateY(-130%);transition:transform .3s ease;margin:0}
  .nav.ouvert{transform:none}
  .nav a{font-size:16px;padding:var(--s3) var(--s2)}
  .burger{display:flex}
  .burger.x span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .burger.x span:nth-child(2){opacity:0}
  .burger.x span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .head-cta{margin-left:auto}
}

/* ================= hero : les calques d'eau ================= */
.hero{position:relative;overflow:hidden;background:var(--pap);isolation:isolate}
.hero-max,.hero-page{display:block}
.foyers{position:absolute;inset:-10%;z-index:1;pointer-events:none;will-change:transform}
.foyers i{position:absolute;border-radius:50%;will-change:transform;backface-visibility:hidden;transform:translateZ(0)}
.f1{width:54vw;height:44vw;right:-16%;top:-24%;background:radial-gradient(closest-side,rgba(196,180,110,.42),rgba(196,180,110,.14) 55%,transparent 76%);filter:blur(72px);animation:d1 27s ease-in-out infinite alternate}
.f2{width:40vw;height:34vw;right:4%;bottom:-22%;background:radial-gradient(closest-side,rgba(154,150,90,.30),rgba(154,150,90,.10) 55%,transparent 75%);filter:blur(78px);animation:d2 17s ease-in-out infinite alternate}
.f3{width:46vw;height:38vw;left:-14%;top:-18%;background:radial-gradient(closest-side,rgba(140,150,95,.44),rgba(140,150,95,.16) 55%,transparent 76%);filter:blur(70px);animation:d3 37s ease-in-out infinite alternate}
.f4{width:28vw;height:24vw;left:26%;bottom:-16%;background:radial-gradient(closest-side,rgba(190,120,40,.14),transparent 70%);filter:blur(64px);animation:d4 21s ease-in-out infinite alternate}
@keyframes d1{to{transform:translate(-5vw,6vh) scale(1.12)}}
@keyframes d2{to{transform:translate(3vw,-5vh) scale(1.08)}}
@keyframes d3{to{transform:translate(5vw,4vh)}}
@keyframes d4{to{transform:translate(-4vw,-3vh) scale(1.1)}}
/* le motif du métier : LE SONDAGE — le semis d'une carte marine */
.motif{position:absolute;inset:-4%;z-index:2;pointer-events:none;opacity:.5;
  background-image:var(--graine),var(--rang);
  background-size:18px 13px,18px 13px;
  -webkit-mask-image:radial-gradient(closest-side at 18% 26%,#000 30%,rgba(0,0,0,.45) 62%,transparent 100%);
  mask-image:radial-gradient(closest-side at 18% 26%,#000 30%,rgba(0,0,0,.45) 62%,transparent 100%);
  animation:rangDrift 53s linear infinite}
.motif::after{content:'';position:absolute;inset:-10%;background-image:var(--sillon);
  opacity:.7;animation:sillonDrift 37s linear infinite}
@keyframes rangDrift{to{background-position:-187px -104px,-187px -104px}}
@keyframes sillonDrift{to{background-position:-213px -71px}}
@keyframes sondeA{to{transform:translate(-48px,-30px)}}
.motes{position:absolute;z-index:2;right:0;top:0;bottom:0;width:56%;pointer-events:none;overflow:hidden}
.motes i{position:absolute;bottom:-6%;border-radius:50%;background:radial-gradient(circle,rgba(150,155,95,.42),transparent 70%);filter:blur(4px);animation:mote linear infinite;will-change:transform,opacity}
@keyframes mote{0%{transform:translateY(0);opacity:0}14%{opacity:.5}80%{opacity:.22}100%{transform:translateY(-88vh);opacity:0}}
/* le voile garantit le contraste du texte par-dessus les foyers */
.voile{position:absolute;inset:0;z-index:3;background:linear-gradient(96deg,rgba(236,235,221,.96) 0%,rgba(236,235,221,.88) 28%,rgba(34,38,27,.44) 58%,rgba(34,38,27,.1) 82%);pointer-events:none}
.grain{position:absolute;inset:0;z-index:4;opacity:.14;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .62 0 0 0 0 .78 0 0 0 0 .86 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
/* le halo : la lumière qui porte la carte de devis */
.halo{position:absolute;z-index:5;right:2%;top:8%;width:46%;height:76%;pointer-events:none;will-change:transform}
.halo i{position:absolute;inset:0;border-radius:42% 58% 52% 48%/48% 42% 58% 52%;will-change:transform,opacity}
.halo .h1{background:radial-gradient(closest-side,rgba(152,69,15,.16),transparent 70%);animation:haloResp 9.4s ease-in-out infinite alternate}
.halo .h2{inset:16%;background:radial-gradient(closest-side,rgba(152,69,15,.12),transparent 70%);animation:haloResp 6.8s ease-in-out infinite alternate-reverse}
@keyframes haloResp{from{transform:scale(.94);opacity:.7}to{transform:scale(1.05);opacity:1}}
/* LE TITRE MONTE : plus de min-height en vh, plus de vide au-dessus du pli */
.hero-grid{position:relative;z-index:7;display:grid;grid-template-columns:1.18fr 1fr;gap:var(--s7);align-items:start;padding-top:var(--s2);padding-bottom:var(--s8)}

/* ================= hero : le texte ================= */
.eyebrow{display:flex;width:fit-content;align-items:center;gap:var(--s1);font-family:'PlexMono';font-weight:600;font-size:10px;line-height:1.2;letter-spacing:.12em;text-transform:uppercase;color:var(--dat);border:1px solid var(--line2);padding:var(--s1) var(--s2);border-radius:999px;background:rgba(247,246,236,.75)}
.eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--cta);box-shadow:0 0 var(--s2) rgba(65,77,28,.9)}
.hero h1{font-family:'Display';font-size:clamp(34px,4.5vw,58px);line-height:1.02;letter-spacing:-.032em;margin:var(--s2) 0 var(--s3);text-wrap:balance}
.hero-page h1{font-size:clamp(28px,3.5vw,45px)}
.hero h1 .l{display:block}
.hero h1 .thin{font-weight:400;color:var(--enc2)}
.hero h1 .fat{font-weight:800}
.hero h1 .fat b{color:var(--dat);font-weight:800}
.rv{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.rvi{display:inline-block;transform:translateY(115%);animation:rvUp .75s cubic-bezier(.2,.85,.25,1) forwards;animation-delay:calc(var(--d)*1ms)}
@keyframes rvUp{to{transform:none}}
.fini .rvi{transform:none!important;animation:none!important}
.sub{color:var(--enc2);max-width:52ch;font-size:16.5px;margin-bottom:var(--s5)}
.live{display:flex;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s3)}
.chip{background:var(--sur);border:1px solid var(--line);border-radius:var(--r2);padding:var(--s3) var(--s4);transition:border-color .18s}
.chip:hover{border-color:var(--line2)}
.chip small{display:block;font-family:'PlexMono';font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--mut);margin-bottom:var(--s1)}
.chip b{font-family:'PlexMono';font-weight:600;font-size:19px;color:var(--enc);font-variant-numeric:tabular-nums}
.chip.a b{color:var(--dat)}
.chip.flash{animation:flashA 1s ease}
@keyframes flashA{0%{background-color:rgba(152,69,15,.16)}100%{background-color:var(--sur)}}
.srcline{font-size:12px;color:var(--mut);margin-bottom:var(--s4);max-width:54ch}
.trust{list-style:none;display:grid;gap:var(--s2);font-size:14.5px;color:var(--enc2)}
.trust li{display:flex;gap:var(--s2);align-items:baseline}
.trust li::before{content:'✓';font-family:system-ui,sans-serif;font-weight:700;color:var(--ok)}
.warn{margin-top:var(--s4);display:none;gap:var(--s2);border:1px solid rgba(138,90,0,.42);border-left:3px solid var(--alerte);background:rgba(138,90,0,.09);border-radius:0 var(--r2) var(--r2) 0;padding:var(--s3) var(--s4);font-size:13px;color:var(--alerte);max-width:56ch}
.warn.on{display:flex;animation:flashA 1.1s ease}
.warn-carte{margin:0 0 var(--s3);max-width:none;border-color:rgba(154,88,15,.35);border-left-color:#9a580f;background:#fdf5eb;color:#78480f}
@media (min-width:1081px){.warn-carte{display:none!important}}
@media (max-width:1080px){.warn-col{display:none!important}}

/* ================= la carte de devis : L'ÎLE CLAIRE =================
   Fond OPAQUE, sans motif ni transparence (invariant n°3). C'est le
   seul panneau clair de la page, donc l'objet le plus lumineux. */
.cardwrap{position:relative}
.card{position:relative;color-scheme:light;background:var(--c-bg);color:var(--c-enc);border:1px solid var(--c-line);border-radius:var(--r3);padding:var(--s5);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 var(--s5) var(--s7) rgba(0,0,0,.45),0 0 var(--s9) rgba(65,77,28,.14)}
.card>*{position:relative;z-index:2}
@property --bb{syntax:'<angle>';initial-value:0deg;inherits:false}
.beam{position:absolute;inset:-1px;z-index:1;border-radius:calc(var(--r3) + 1px);padding:1px;background:conic-gradient(from var(--bb),transparent 0 74%,rgba(65,77,28,.85) 86%,rgba(255,255,255,.96) 90%,rgba(65,77,28,.4) 94%,transparent 97%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:bb 9s linear infinite;pointer-events:none}
@keyframes bb{to{--bb:360deg}}
.sheenbox{position:absolute;inset:0;z-index:1;border-radius:var(--r3);overflow:hidden;pointer-events:none}
.sheenbox i{position:absolute;top:-12%;bottom:-12%;left:-58%;width:40%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.5) 50%,transparent);transform:skewX(-12deg);animation:sheen 11s ease-in-out infinite;will-change:transform}
@keyframes sheen{0%,58%{transform:translateX(0) skewX(-12deg)}92%,100%{transform:translateX(430%) skewX(-12deg)}}
.card h3{font-family:'Display';font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--c-enc);margin-bottom:var(--s1)}
.mini{font-family:'PlexMono';font-weight:600;font-size:13px;color:var(--c-acc);margin-bottom:var(--s4);min-height:18px;font-variant-numeric:tabular-nums}
.fld{margin-bottom:var(--s3)}
.h-t{display:flex;justify-content:space-between;align-items:baseline;font-family:'PlexMono';font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--c-enc2);margin-bottom:var(--s2)}
.h-t output{font-family:'PlexMono';font-weight:600;font-size:15px;letter-spacing:0;color:var(--c-acc);text-transform:none}
input[type=range]{width:100%;appearance:none;height:6px;border-radius:99px;background:linear-gradient(90deg,var(--c-acc) var(--fill,40%),var(--c-line) var(--fill,40%));cursor:pointer}
input[type=range]::-webkit-slider-thumb{appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--c-acc);box-shadow:0 2px var(--s2) rgba(65,77,28,.4);transition:transform .15s,box-shadow .3s}
input[type=range]:active::-webkit-slider-thumb,input[type=range]:focus::-webkit-slider-thumb{box-shadow:0 2px var(--s2) rgba(65,77,28,.4),0 0 0 var(--s2) rgba(65,77,28,.18)}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12)}
input[type=range]::-moz-range-thumb{width:19px;height:19px;border-radius:50%;background:#fff;border:3px solid var(--c-acc);box-shadow:0 2px var(--s2) rgba(65,77,28,.4)}
.puces{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s1)}
.puces button{font-family:'Manrope';font-size:12.5px;font-weight:700;color:var(--c-enc2);background:var(--c-sur);border:1px solid var(--c-line);border-radius:var(--r1);padding:var(--s2) var(--s1);cursor:pointer;transition:border-color .18s,background .18s,color .18s;min-width:0}
.puces button:hover{border-color:var(--c-line2);color:var(--c-enc)}
.puces button.on{background:var(--c-acc);border-color:var(--c-acc);color:#fff;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:var(--s3);font-family:'PlexMono';font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--c-mut);margin:var(--s4) 0 var(--s3)}
.sep::before,.sep::after{content:'';flex:1;height:1px;background:var(--c-line)}
.idgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin-bottom:var(--s3)}
.idgrid .full{grid-column:1/-1}
.idgrid>*{min-width:0}
.h-in{width:100%;font-family:'Manrope';font-size:14.5px;color:var(--c-enc);background:var(--c-sur);border:1px solid var(--c-line);border-radius:var(--r1);padding:var(--s3);transition:border-color .18s,box-shadow .18s}
.h-in:hover{border-color:var(--c-line2)}
.h-in:focus{border-color:var(--c-acc);box-shadow:0 0 0 3px rgba(15,85,102,.16);outline:none}
.h-in::placeholder{color:#5f6552}
textarea.h-in{resize:none;min-height:58px;line-height:1.5}
.hpot{position:absolute;left:-9999px;opacity:0}
/* un seul style de CTA principal, partout */
.cta{display:block;width:100%;text-align:center;font-family:'Manrope';font-weight:700;font-size:16px;color:var(--cta-e);background:var(--cta);border:none;border-radius:var(--r1);padding:var(--s4) var(--s5);cursor:pointer;text-decoration:none;transition:background .18s,transform .18s}
.cta:hover{background:var(--cta-h);transform:translateY(-1px)}
.cta .fl{display:inline-block;transition:transform .18s}
.cta:hover .fl{transform:translateX(4px)}
.cta[disabled]{opacity:.6;cursor:wait;transform:none}
/* le téléphone, deuxième voie, sous le bouton */
.alt{text-align:center;font-size:13px;color:var(--c-enc2);margin-top:var(--s3)}
.alt a{color:var(--c-acc);text-decoration:none;font-weight:700}
.lpd{font-size:11px;color:var(--c-mut);text-align:center;margin-top:var(--s2)}
.lpd a{color:var(--c-mut)}
.ok-msg{margin-top:var(--s3);text-align:center;font-weight:700;color:var(--c-ok);background:rgba(24,107,71,.08);border:1px solid rgba(24,107,71,.3);border-radius:var(--r1);padding:var(--s3)}
/* l'entrée de la carte n'existe QUE si le JS l'a demandée (.go) :
   sans JS, la carte est visible d'emblée. */
.hero.go .card-in{opacity:0;transform:translateY(22px);animation:cardIn .8s cubic-bezier(.16,1.2,.3,1) forwards;animation-delay:.45s}
@keyframes cardIn{to{opacity:1;transform:none}}
.hero.fini .card-in{opacity:1!important;transform:none!important;animation:none!important}

/* ========== LA SIGNATURE : la zone d'influence (réseau thermique) ==========
   Depuis le 14.08.2026 le bloc vit dans la COLONNE D'INFORMATION du hero, plus
   dans la carte de devis : l'ordre du réseau est information → formulaire, et le
   régime de raccordement décide si le projet est légalement POSSIBLE — ça se lit
   avant le prix, pas au milieu des champs. Il est donc habillé pour le fond NUIT.
   ⚠️ .rsx-src porte la mention de source du SITG : obligation de licence,
      elle ne doit jamais être masquée. Un contrôle de qa.py y veille. */
.rsx{background:var(--sur);border:1px solid var(--line);border-left:3px solid var(--dat);border-radius:0 var(--r2) var(--r2) 0;padding:var(--s4);margin:var(--s5) 0 0;max-width:58ch}
.rsx-t{display:block;font-family:'PlexMono';font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.rsx-st{display:block;font-family:'Display';font-weight:700;font-size:15px;letter-spacing:-.018em;color:var(--enc);margin:var(--s1) 0 var(--s3)}
.rsx-lad{list-style:none;display:grid;gap:var(--s1)}
.rsx-lad li{display:flex;gap:var(--s2);align-items:center;font-size:13px;line-height:1.4;color:var(--mut);padding:var(--s2);border-radius:var(--r1);background:var(--pap2)}
.rsx-lad li.on{color:var(--enc);font-weight:700;background:var(--sur2);box-shadow:0 0 0 1px var(--dat)}
.k{flex:none;width:11px;height:11px;border-radius:3px;border:1.5px solid var(--line2);background:transparent}
.rsx-lad li.on .k{border-color:var(--dat);background:var(--dat);box-shadow:0 0 0 3px rgba(98,200,216,.2)}
/* périmètre non lisible : les trois lignes sont hachurées, aucune allumée */
.rsx-lad li.hach{background-image:repeating-linear-gradient(135deg,rgba(95,101,82,.18) 0 5px,transparent 5px 10px)}
.rsx-lad li.hach .k{border-style:dashed;border-color:var(--mut)}
.rsx-p{font-size:13.5px;line-height:1.55;color:var(--enc2);margin-top:var(--s3)}
.rsx-src{display:block;font-size:11.5px;line-height:1.5;color:var(--mut);margin-top:var(--s2)}
.rsx-src a{color:var(--mut)}

/* --- LA SIGNATURE : « l'adresse a trois noms » -----------------------------------
   Trois lignes, une seule allumee. Le lieu-dit, la localite postale, LA COMMUNE.
   L'etat est ecrit en dur par Python (data-adresse), donc juste sans JavaScript.
   · `decale`        la ligne du milieu passe en rouille : le NPA ne porte pas le nom
                     de sa commune. 17 pages sur 62.
   · `autre-commune` elle est HACHUREE : le NPA renvoie a une autre commune. 1 page.
                     Meme signal graphique que les etats incertains des sites #6, #7,
                     #11, #13, #14 et #15 — ici il dit « ne vous fiez pas a cette ligne ».
   Le bloc est volontairement COURT (3 lignes, ~150 px) : il vit dans la colonne
   d'information a cote du bloc de raccordement, et le hero ne doit pas s'allonger. */
.rsx.adr{border-left-color:var(--cta);margin-top:var(--s4)}
.adr-lad{gap:2px}
.adr-l{display:grid;grid-template-columns:11ch 1fr;align-items:baseline;gap:var(--s3);
  padding:var(--s2) var(--s3);border-radius:var(--r1);background:var(--pap2);
  border:1px solid transparent}
.adr-k{font-family:'PlexMono';font-weight:600;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mut);line-height:1.5}
.adr-v{font-family:'Display';font-weight:600;font-size:15px;letter-spacing:-.01em;
  color:var(--enc2);line-height:1.3;overflow-wrap:anywhere}
.adr-l.on{background:var(--sur2);border-color:var(--cta)}
.adr-l.on .adr-k{color:var(--cta)}
.adr-l.on .adr-v{font-weight:800;font-size:16.5px;color:var(--enc)}
.adr-l.ecart .adr-v{color:var(--dat)}
.adr-l.ecart .adr-k{color:var(--dat)}
.adr-l.hach{background-image:repeating-linear-gradient(135deg,rgba(95,101,82,.18) 0 5px,transparent 5px 10px)}
.adr-l.hach .adr-v{color:var(--dat);text-decoration:underline;text-decoration-style:wavy;
  text-underline-offset:3px;text-decoration-thickness:1px}
@media(max-width:420px){
  .adr-l{grid-template-columns:1fr;gap:0}
  .adr-v{font-size:14.5px}
}


/* ================= les sections ================= */
.sec{padding:var(--s8) 0}
.sec-tinte{background:var(--pap);position:relative;overflow:hidden}
.sec-tinte::before{content:'';position:absolute;inset:0;opacity:.4;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='168'%3E%3Cg stroke='%2362c8d8' stroke-opacity='.42' stroke-width='1'%3E%3Cpath d='M30 26h7M33.5 22.5v7M118 70h7M121.5 66.5v7M62 128h7M65.5 124.5v7'/%3E%3C/g%3E%3Cg fill='%2362c8d8' fill-opacity='.26'%3E%3Ccircle cx='92' cy='34' r='1'/%3E%3Ccircle cx='24' cy='96' r='1'/%3E%3Ccircle cx='140' cy='140' r='1'/%3E%3C/g%3E%3C/svg%3E");background-size:168px 168px;animation:sondeB 29s linear infinite alternate;will-change:transform}
@keyframes sondeB{to{transform:translate(34px,-22px)}}
.sec-tinte>.wrap{position:relative;z-index:1}
.sec h2{font-family:'Display';font-weight:800;font-size:clamp(24px,2.8vw,34px);line-height:1.12;letter-spacing:-.028em;margin-bottom:var(--s3);text-wrap:balance}
.sec h3{font-size:18px;font-weight:700;margin-bottom:var(--s2)}
.lead{color:var(--enc2);max-width:70ch;margin-bottom:var(--s5);font-size:16.5px}
.sec p{color:var(--enc2)}
.sec strong{color:var(--enc);font-weight:700}
.sec a{color:var(--lien);text-underline-offset:3px}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);margin-top:var(--s2)}
.cols2>*{min-width:0}
.cols2 p{margin-bottom:var(--s3)}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin:var(--s5) 0}
.cols3>*{min-width:0}
.cols4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);margin:var(--s5) 0}
.cols4>*{min-width:0}
.col-etape{background:var(--sur);border:1px solid var(--line);border-radius:var(--r2);padding:var(--s5);transition:border-color .18s}
.col-etape:hover{border-color:var(--line2)}
.col-etape h3{font-family:'Display';font-weight:700;font-size:17px;margin:var(--s2) 0}
.col-etape p{color:var(--enc2);font-size:14.5px}
.num{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:var(--r1);background:rgba(152,69,15,.09);border:1px solid var(--line2);font-family:'PlexMono';font-weight:600;font-size:13px;color:var(--dat)}
/* .poste est une CARTE, pas une ligne : le titre doit pouvoir revenir
   à la ligne, sinon la page déborde à 375 px. */
.poste{display:flex;flex-direction:column;gap:var(--s1);background:var(--sur);border:1px solid var(--line);border-radius:var(--r2);padding:var(--s4);text-decoration:none;min-width:0;transition:border-color .18s,transform .18s}
.poste:hover{border-color:var(--line2);transform:translateY(-2px)}
.poste b{font-family:'Display';font-weight:700;font-size:16px;color:var(--enc);overflow-wrap:anywhere}
.poste span{font-size:13.5px;color:var(--enc2)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);margin-top:var(--s5)}
.stats>*{min-width:0}
.stat{background:var(--sur);border:1px solid var(--line);border-radius:var(--r2);padding:var(--s4);text-align:center}
.stat b{display:block;font-family:'PlexMono';font-weight:600;font-size:26px;color:var(--dat);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.stat span{font-size:12.5px;color:var(--mut)}
.fiche{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin-top:var(--s4)}
.fiche>*{min-width:0}
.fiche div{background:var(--sur);border:1px solid var(--line);border-radius:var(--r1);padding:var(--s3)}
.fiche small{display:block;font-family:'PlexMono';font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-bottom:var(--s1)}
.fiche b{font-size:15px;color:var(--enc);overflow-wrap:anywhere}
/* l'encadré de droit cantonal : une RÉFÉRENCE, pas du corps de texte */
.bloc-cant{list-style:none;display:grid;gap:var(--s2);margin:var(--s4) 0 0;padding:var(--s4);background:var(--sur);border:1px solid var(--line);border-left:3px solid var(--dat);border-radius:0 var(--r2) var(--r2) 0}
.bloc-cant li{font-size:14px;line-height:1.55;color:var(--enc2);padding-left:var(--s4);position:relative}
.bloc-cant li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:2px;border:1.5px solid var(--dat)}
.bloc-cant strong{color:var(--enc)}
.sec .bloc-cant-p{font-family:'PlexMono';font-size:11.5px;line-height:1.5;color:var(--mut);margin-top:var(--s2);padding-left:var(--s4)}
/* le maillage vers les communes voisines */
.communes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:var(--s2);margin-top:var(--s2)}
.communes-grid a{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);background:var(--sur);border:1px solid var(--line);border-radius:var(--r1);padding:var(--s3);text-decoration:none;color:var(--enc);font-weight:700;font-size:14px;min-width:0;transition:border-color .16s,background .16s}
.communes-grid a:hover{border-color:var(--dat);background:var(--sur2)}
.communes-grid a span{overflow-wrap:anywhere}
.communes-grid small{font-family:'PlexMono';font-weight:600;font-size:10.5px;color:var(--mut);white-space:nowrap}
.petites{grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
.petites a{padding:var(--s2) var(--s3);font-size:13.5px}
/* les tableaux : ils défilent dans leur propre boîte, jamais la page */
.tbl-wrap{overflow-x:auto;margin:var(--s4) 0;border:1px solid var(--line);border-radius:var(--r2)}
.tbl-wrap table{width:100%;border-collapse:collapse;background:var(--sur);min-width:520px}
.tbl-wrap th{background:var(--sur2);color:var(--enc);text-align:left;font-family:'Display';font-weight:700;font-size:13px;padding:var(--s3) var(--s4);border-bottom:1px solid var(--line)}
.tbl-wrap td{padding:var(--s3) var(--s4);border-top:1px solid var(--line);color:var(--enc2);font-size:14.5px}
.tbl-wrap tr td:last-child{font-family:'PlexMono';font-weight:600;color:var(--dat);white-space:nowrap;font-variant-numeric:tabular-nums}
.tbl-wrap strong{color:var(--enc)}

/* ================= le partenaire ================= */
.sec-part{background:var(--pap)}
.part{display:grid;grid-template-columns:260px 1fr;gap:var(--s7);align-items:start}
.part>*{min-width:0}
.part-id{background:var(--sur);border:1px solid var(--line);border-radius:var(--r3);padding:var(--s5);text-align:center;position:sticky;top:88px}
.part-id img{width:132px;height:auto;margin:0 auto var(--s4);border-radius:var(--r2);background:#fff;padding:var(--s2)}
.part-nap{font-size:13.5px;line-height:1.6;color:var(--enc2)}
.part-nap b{display:block;font-family:'Display';font-weight:800;font-size:16px;color:var(--enc);margin-bottom:var(--s1)}
.ide{display:inline-block;font-family:'PlexMono';font-weight:600;font-size:11.5px;color:var(--dat);background:rgba(152,69,15,.08);border:1px solid var(--line2);border-radius:var(--r1);padding:2px var(--s2);margin-top:var(--s2);overflow-wrap:anywhere}
.part-txt h2{margin-bottom:var(--s3)}
.part-txt p{color:var(--enc2);margin-bottom:var(--s3)}
.part-l{list-style:none;display:grid;gap:var(--s3);margin:var(--s4) 0}
.part-l li{font-size:14.5px;line-height:1.6;color:var(--enc2);background:var(--sur);border:1px solid var(--line);border-radius:var(--r2);padding:var(--s4)}
.part-l b{display:block;font-family:'Display';font-weight:700;font-size:15px;color:var(--enc);margin-bottom:var(--s1)}
.part-txt .part-lien{font-family:'PlexMono';font-size:11.5px;line-height:1.55;color:var(--mut)}

/* ================= les avis ================= */
.avis{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin-top:var(--s5)}
.avis>*{min-width:0}
.avi{background:var(--sur);border:1px solid var(--line);border-radius:var(--r2);padding:var(--s5)}
.avi p{font-size:14.5px;line-height:1.65;color:var(--enc2)}
.avi cite{display:block;font-style:normal;font-family:'PlexMono';font-size:11.5px;color:var(--mut);margin-top:var(--s3)}
.avi .et{font-family:system-ui,sans-serif;font-size:14px;letter-spacing:.12em;color:var(--etoile);margin-bottom:var(--s2)}

/* ================= les guides ================= */
.arts{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4);margin-top:var(--s5)}
.arts>*{min-width:0}
.art-card{display:block;background:var(--sur);border:1px solid var(--line);border-radius:var(--r2);padding:var(--s5);text-decoration:none;transition:border-color .18s,transform .18s}
.art-card:hover{border-color:var(--line2);transform:translateY(-2px)}
.art-card b{font-family:'Display';font-weight:700;font-size:17px;color:var(--enc);display:block;margin-bottom:var(--s2)}
.art-card p{color:var(--enc2);font-size:14px;margin-bottom:var(--s2)}
.art-card i{font-style:normal;font-weight:700;font-size:13.5px;color:var(--dat)}
.wrap-art{max-width:820px}
.article h2{font-family:'Display';font-weight:800;font-size:clamp(20px,2.2vw,26px);margin:var(--s6) 0 var(--s3)}
.article h3{font-size:17px;margin:var(--s5) 0 var(--s2)}
.article p{color:var(--enc2);margin-bottom:var(--s3)}
.article ul,.article ol{color:var(--enc2);margin:0 0 var(--s3) var(--s5)}
.article li{margin-bottom:var(--s2)}
.art-retour{margin-top:var(--s6);font-weight:700}

/* ================= le plan du site ================= */
.plan{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s6);margin-top:var(--s4)}
.plan>*{min-width:0}
.plan-g h2{font-size:19px;margin-bottom:var(--s3);padding-bottom:var(--s2);border-bottom:1px solid var(--line)}
.plan-g nav{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:var(--s1) var(--s3)}
.plan-g nav a{font-size:14px;color:var(--enc2);text-decoration:none;padding:var(--s1) 0;overflow-wrap:anywhere}
.plan-g nav a:hover{color:var(--dat)}

/* ================= la FAQ ================= */
.sec-faq{background:var(--pap2)}
.faq-list{max-width:860px;margin-top:var(--s5)}
.faq-item{background:var(--sur);border:1px solid var(--line);border-radius:var(--r2);margin-bottom:var(--s2);overflow:hidden}
.faq-item[open]{border-color:var(--line2)}
.faq-item summary{list-style:none;cursor:pointer;padding:var(--s4) var(--s7) var(--s4) var(--s4);font-family:'Display';font-weight:700;font-size:15.5px;color:var(--enc);position:relative;transition:color .18s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';position:absolute;right:var(--s4);top:50%;transform:translateY(-50%);font-family:'Display';font-weight:400;font-size:22px;color:var(--dat);transition:transform .25s}
.faq-item[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq-item summary:hover{color:var(--dat)}
.faq-a{padding:0 var(--s4) var(--s4);color:var(--enc2);font-size:14.5px}

/* ================= l'appel final ================= */
.sec-cta{background:var(--pap);position:relative;overflow:hidden}
.sec-cta::before{content:'';position:absolute;width:46vw;height:46vw;right:-12%;top:-42%;border-radius:50%;background:radial-gradient(closest-side,rgba(65,77,28,.14),transparent 70%);pointer-events:none}
.cta-fin{position:relative;z-index:1;text-align:center}
.cta-fin h2{color:var(--enc);margin-bottom:var(--s3)}
.cta-fin p{color:var(--enc2);max-width:58ch;margin:0 auto var(--s5)}
.cta-lien{display:inline-block;width:auto}
.cta-fin .alt{color:var(--enc2);margin-top:var(--s4)}
.cta-fin .alt a{color:var(--dat)}

/* ================= le pied de page ================= */
.site-foot{background:#2b3020;color:var(--enc2);border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1.4fr;gap:var(--s7);padding-top:var(--s8);padding-bottom:var(--s6)}
.foot-grid>*{min-width:0}
.site-foot .logo{color:var(--enc);font-size:20px}
.foot-txt{font-size:13.5px;line-height:1.6;margin-top:var(--s3);color:var(--mut)}
.foot-txt a{color:var(--lien);text-decoration:none}
.foot-part{font-family:'PlexMono';font-size:11.5px;line-height:1.55;margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line)}
.site-foot h4{font-family:'PlexMono';font-size:10.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--mut);margin-bottom:var(--s3)}
.foot-nav{display:grid;gap:var(--s2)}
.foot-nav a{color:var(--enc2);text-decoration:none;font-size:13.5px;transition:color .15s;overflow-wrap:anywhere}
.foot-nav a:hover{color:var(--dat)}
.foot-nav-com{grid-template-columns:repeat(2,1fr);gap:var(--s2) var(--s4)}
.foot-com{min-width:0}
.foot-legal{border-top:1px solid var(--line);padding-top:var(--s4);padding-bottom:var(--s5);font-size:12px;color:var(--mut)}
.foot-legal a{color:var(--enc2)}

/* ================= la barre collante (mobile) ================= */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;padding:var(--s2) var(--s4) calc(var(--s2) + env(safe-area-inset-bottom));background:rgba(7,16,26,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line);transform:translateY(130%);transition:transform .3s ease}
.sticky-cta.vu{transform:none}
.sticky-cta .cta{width:100%}
@media (max-width:760px){.sticky-cta{display:block}}

/* ================= la popup (créée par le JS) ================= */
.pum{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:var(--s5);background:rgba(4,10,16,.72);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s}
.pum.vu{opacity:1}
/* fond OPAQUE, comme la carte de devis (invariant n°3) */
.pum-card{position:relative;color-scheme:light;width:min(440px,100%);max-height:92vh;overflow-y:auto;background:var(--c-bg);color:var(--c-enc);border:1px solid var(--c-line);border-radius:var(--r3);padding:var(--s5);box-shadow:0 var(--s6) var(--s9) rgba(0,0,0,.6);transform:translateY(16px) scale(.985);transition:transform .32s cubic-bezier(.16,1.2,.3,1)}
.pum.vu .pum-card{transform:none}
.pum-x{position:absolute;top:var(--s2);right:var(--s2);width:34px;height:34px;border:none;background:none;cursor:pointer;font-size:22px;line-height:1;color:var(--c-mut);border-radius:var(--r1)}
.pum-x:hover{background:rgba(15,26,36,.08);color:var(--c-enc)}
.pum-eti{font-family:'PlexMono';font-weight:600;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--c-acc);margin-bottom:var(--s2)}
.pum-card h3{font-family:'Display';font-weight:800;font-size:22px;line-height:1.15;letter-spacing:-.025em;color:var(--c-enc);margin-bottom:var(--s1)}
.pum-chiffre{display:inline-block;font-family:'PlexMono';font-weight:600;font-size:14px;color:var(--c-acc);background:rgba(15,85,102,.08);border:1px solid rgba(15,85,102,.24);border-radius:var(--r1);padding:var(--s1) var(--s2);margin:var(--s2) 0}
.pum-p{font-size:13.5px;color:var(--c-enc2);margin-bottom:var(--s3)}
.pum-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin-bottom:var(--s3)}
.pum-grid>*{min-width:0}
.pum-full{grid-column:1/-1}
.pum-grid textarea{resize:none;min-height:52px;line-height:1.45}
.pum-card .lpd{margin-top:var(--s2)}
.pum-ok{text-align:center;padding:var(--s4) 0 var(--s2);font-weight:700;color:var(--c-ok)}
@media (max-width:600px){
  .pum{padding:var(--s3);align-items:flex-end}
  .pum-card{padding:var(--s4);border-radius:var(--r3) var(--r3) 0 0}
}

/* ================= l'apparition au défilement ================= */
.js-rev [data-rev]{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js-rev [data-rev].vu{opacity:1;transform:none}

/* ================= les points de rupture ================= */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:var(--s6);padding-bottom:var(--s7)}
  .part{grid-template-columns:1fr;gap:var(--s5)}
  .part-id{position:static;display:grid;grid-template-columns:120px 1fr;gap:var(--s4);align-items:center;text-align:left}
  .part-id img{margin:0}
  .cols4{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:var(--s5)}
  .foot-com{grid-column:1/-1}
}
@media (max-width:900px){
  .cols3{grid-template-columns:repeat(2,1fr)}
  .avis{grid-template-columns:1fr}
  .plan{grid-template-columns:1fr}
}
@media (max-width:760px){
  .wrap{padding-left:var(--s4);padding-right:var(--s4)}
  .site-head{padding:var(--s3) var(--s4);gap:var(--s3)}
  .sec{padding:var(--s7) 0}
  .hero-grid{padding-top:var(--s2);padding-bottom:var(--s6)}
  .hero .live,.hero .srcline,.hero .trust{display:none}
  .cols2,.cols3,.cols4,.arts,.fiche{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr;gap:var(--s5);padding-top:var(--s6)}
  .foot-nav-com{grid-template-columns:repeat(2,1fr)}
  /* la barre collante ne doit pas masquer le pied de page */
  .site-foot{padding-bottom:72px}
  .part-id{grid-template-columns:96px 1fr}
}
@media (max-width:480px){
  .card{padding:var(--s4)}
  .puces{grid-template-columns:repeat(2,1fr)}
  .idgrid,.pum-grid{grid-template-columns:1fr}
  .communes-grid,.petites{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .plan-g nav{grid-template-columns:1fr}
  .part-id{grid-template-columns:1fr;text-align:center}
  .part-id img{margin:0 auto var(--s3)}
}

/* ================= mouvement réduit =================
   Tout état FINAL doit être garanti sans animation : couper les
   animations ne doit jamais laisser un élément invisible. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rvi{transform:none!important}
  .card-in{opacity:1!important;transform:none!important}
  .js-rev [data-rev]{opacity:1!important;transform:none!important}
  .sticky-cta.vu{transform:none!important}
  .pum.vu .pum-card{transform:none!important}
}

/* --- CORRECTIFS DE CONTRASTE, mesures au navigateur le 15.08.2026 ------------------
   Ils viennent EN FIN de feuille a dessein : ce sont des corrections de cascade, et
   les poser ici evite de toucher a l'ordre des composants du squelette. */

/* 1. Le CTA final. `.sec a` (0,1,1) battait `.cta` (0,1,0) : le bouton olive servait
      son texte en bleu de lien, a 1,3:1. Piege du squelette, invisible sur une peau
      sombre, mortel sur une peau claire. */
.sec a.cta,.sec-cta a.cta,.sec-tinte a.cta,a.cta{color:var(--cta-e)}
.sec a.cta:hover,.sec-cta a.cta:hover,a.cta:hover{color:var(--cta-e)}

/* 2. Le pied de page est le seul aplat SOMBRE de cette peau claire : il porte donc ses
      propres jetons d'encre, sinon tout son texte reste sur ceux du papier.
      Contrastes verifies sur #2b3020 : encre 12,2:1 · muet 5,4:1 · lien 5,9:1. */
.site-foot{--f-enc:#eef0e4;--f-enc2:#cdd2bd;--f-mut:#a6ad94;--f-lien:#bcd9a8;
  background:#2b3020;color:var(--f-enc2);border-top:1px solid #3c4330}
.site-foot .logo{color:var(--f-enc)}
.site-foot .logo-p{color:var(--f-lien)}
.site-foot h4{color:var(--f-mut)}
.site-foot .foot-txt{color:var(--f-enc2)}
.site-foot .foot-txt a{color:var(--f-lien)}
.site-foot .foot-part{color:var(--f-mut);border-top-color:#3c4330}
.site-foot .foot-nav a{color:var(--f-enc2)}
.site-foot .foot-nav a:hover{color:var(--f-lien)}
.site-foot .foot-legal{color:var(--f-mut);border-top-color:#3c4330}
.site-foot .foot-legal a{color:var(--f-enc2)}
.site-foot .ide{color:var(--f-lien);background:rgba(188,217,168,.1);border-color:#3c4330}
.site-foot a:focus-visible{outline-color:var(--f-lien)}