/* ========================================================================== pompe-a-chaleur-campagne-geneve.ch — registre « SÈVE & RHÔNE » ========================================================================== Remplace « Le rang semé » (papier limon, serif d'almanach, rang pointillé), refusé le 2026-08-21 : « espacements KO », « site triste ». C'est la même cause que les quatre peaux refusées avant lui — du papier sur un métier technique. Ici : de la COULEUR SATURÉE, de la profondeur, du mouvement. MÉCANIQUE : celle de « Aurore & verre » (#11 Riviera), reprise telle quelle. COULEUR : vert-lime de sève, bleu du Rhône, un foyer de blé mûr. Le canton porte DEUX sites du réseau : celui de la ville est en nuit, celui-ci est en plein jour — l'opposition est délibérée, c'est l'anti-empreinte. TROIS RÈGLES DE PERFORMANCE COMMANDENT TOUTE LA CONSTRUCTION 1. Un dégradé radial est composité par le GPU, ne pèse aucun octet et n'a AUCUN coût de LCP. C'est lui, jamais une image, qui porte la couleur. 2. On n'anime JAMAIS les arrêts d'un dégradé : c'est une repeinture à chaque image. On n'anime que `transform` et `opacity`, sur des calques déjà peints. Aucune animation ne touche à la géométrie : CLS nul. 3. Pas de `filter:blur()` sur une surface plein écran. Le flou est DANS le dégradé (arrêts très doux). ⚠️ LE PIÈGE N°6, PAYÉ DEUX FOIS SUR CE RÉSEAU : un dégradé qui porte du BLANC part d'un ton FONCÉ. Le premier arrêt du CTA mesure 4,99:1 sous du blanc, le dernier 9,97:1 — mesuré, pas supposé. Et un dégradé de TITRE reste sombre d'un bout à l'autre. ÉCHELLE D'ESPACEMENT — celle du réseau, et rien d'autre : 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96. ========================================================================== */ @font-face{font-family:'Display';font-weight:200 700;font-display:swap;src:url(/fonts/generalsans.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:#f3fbee; --bg2:#fafdf7; --nuit:#0b1a0d; --enc:#0f1c12; --enc2:#31462f; --mut:#4a5d47; /* la famille : quatre froids et UN CHAUD — le foyer de blé empêche l'ensemble de virer au tout-froid sur un métier qui vend de la chaleur. */ --sev:#3f6212; --sev-f:#2f4a0d; --sev-c:#65a30d; /* olive de sève — le CTA */ --lim:#84cc16; --rho:#0284c7; --vrt:#16a34a; --ble:#e3a008; --ok:#0e9f6e; --line:#dceccd; --line2:#c3ddb0; --bm:1px solid var(--line); --r:12px; --rr:16px; --rg:20px; /* la profondeur : trois niveaux, teintés de la famille — une ombre grise sur un fond coloré fait sale, c'est ce qui trahit une palette plaquée. */ --o1:0 2px 6px rgba(28,58,16,.06),0 10px 24px -8px rgba(28,58,16,.16); --o2:0 4px 10px rgba(28,58,16,.08),0 22px 44px -12px rgba(28,58,16,.24); --o3:0 8px 18px rgba(28,58,16,.10),0 40px 84px -18px rgba(28,58,16,.32); --hi:inset 0 1px 0 rgba(255,255,255,.9); /* ⚠️ le CTA porte du BLANC : le premier arrêt est déjà foncé (4,99:1). */ --grad:linear-gradient(135deg,#4d7c0f,var(--sev) 54%,var(--sev-f)); /* ⚠️ un dégradé de TITRE reste sombre d'un bout à l'autre (5,5:1 au pire). */ --grad-t:linear-gradient(104deg,#14532d 4%,var(--sev) 46%,#075985 92%); /* ── jetons hérités de la peau sortante, gardés pour les 48 règles propres au site (bloc réseau, signature, plan du site, bloc partenaire). Ils sont redéfinis ici, pas recopiés : les rayons redeviennent ronds et l'échelle d'espacement est celle du réseau. */ --sur:#fff; --sur2:#f6fcf1; --dat:#8a5a08; /* la donnée : blé mûr foncé, 5,3:1 */ --lien:#0369a1; /* le froid : bleu du Rhône foncé, 5,9:1 */ --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px; --r1:10px;--r2:12px;--r3:14px; --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='%233f6212' 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(--sev)} .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(--sev);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(--ble);line-height:1; filter:drop-shadow(0 1px 3px rgba(227,160,8,.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(--ble)} .ico-ok{color:var(--sev)} /* ---------------- 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,253,247,.86);backdrop-filter:blur(16px) saturate(1.4); border-bottom:1px solid rgba(255,255,255,.8); box-shadow:0 1px 0 rgba(15,28,18,.05);transition:box-shadow .25s} .site-head.scrolle{box-shadow:0 1px 0 rgba(15,28,18,.06),0 12px 32px -20px rgba(28,58,16,.6)} .logo{font-family:'Display',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(--sev),var(--lim)); -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(63,98,18,.10);color:var(--sev)} .nav a.on{color:var(--sev);background:rgba(63,98,18,.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(63,98,18,.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(63,98,18,.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,253,247,.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(28,58,16,.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(110% 68% at 50% -14%, rgba(255,255,255,.70) 0%, transparent 56%), linear-gradient(178deg, #f2fbec 0%, #e0f2d3 46%, #cfeacf 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:60%;height:74%;left:-14%;top:2%; background:radial-gradient(closest-side,rgba(101,163,13,.84),rgba(101,163,13,.38) 46%,transparent 72%); animation:d1 27s ease-in-out infinite alternate} .f2{width:48%;height:58%;left:16%;bottom:-18%; background:radial-gradient(closest-side,rgba(22,163,74,.76),rgba(22,163,74,.30) 46%,transparent 72%); animation:d2 21s ease-in-out infinite alternate} .f3{width:56%;height:66%;right:-10%;top:-12%; background:radial-gradient(closest-side,rgba(2,132,199,.72),rgba(2,132,199,.28) 48%,transparent 74%); animation:d3 32s ease-in-out infinite alternate} .f4{width:44%;height:52%;right:-6%;bottom:-20%; background:radial-gradient(closest-side,rgba(132,204,22,.70),rgba(132,204,22,.26) 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:46%;top:22%;width:38%;height:46%;pointer-events:none; border-radius:50%;will-change:transform; background:radial-gradient(closest-side,rgba(227,160,8,.46),rgba(227,160,8,.16) 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(132,204,22,.34),transparent 70%); animation:resp 8.6s ease-in-out infinite alternate} .halo .h2{inset:18%;background:radial-gradient(closest-side,rgba(2,132,199,.26),transparent 70%); animation:resp 6.2s ease-in-out infinite alternate-reverse} @keyframes resp{from{transform:scale(.94)}to{transform:scale(1.08)}} /* la poussière de lumière (les 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(190,242,100,.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%)} /* 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(--sev-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(28,58,16,.28),var(--hi)} h1{font-family:'Display',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(--sev-f)} .chip.flash{animation:flashA 1s ease} @keyframes flashA{0%{background-color:rgba(132,204,22,.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(63,98,18,.22); background-image:var(--ico-ok),linear-gradient(140deg,rgba(63,98,18,.14),rgba(22,163,74,.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(132,204,22,.28); border-left:3px solid var(--vrt);background:#f7fcf2;border-radius:0 var(--r) var(--r) 0; padding:12px 16px;font-size:13px;color:#7a3d06;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:'';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(--sev),var(--lim),var(--rho),var(--vrt),var(--ble),var(--sev)); 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(132,204,22,.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(--sev),var(--lim) 55%,var(--rho));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(132,204,22,.06) 42%,rgba(255,255,255,.5) 50%, rgba(2,132,199,.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:'Display',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(--sev-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(--sev-f)} input[type=range]{width:100%;appearance:none;height:8px;border-radius:999px;cursor:pointer; background:linear-gradient(90deg,var(--sev) var(--fill,40%),#dfeccd var(--fill,40%)); box-shadow:inset 0 1px 3px rgba(28,58,16,.14)} input[type=range]::-webkit-slider-thumb{appearance:none;width:24px;height:24px;border-radius:8px; background:#fff;border:3px solid var(--sev); box-shadow:0 3px 10px rgba(63,98,18,.4),0 0 0 6px rgba(63,98,18,.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(63,98,18,.5),0 0 0 9px rgba(63,98,18,.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(--sev);box-shadow:0 3px 10px rgba(63,98,18,.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(--sev-c);box-shadow:var(--o1)} .puces button.on{color:#fff;background:var(--grad);border-color:transparent; box-shadow:0 8px 18px -6px rgba(63,98,18,.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:#fbfdf9; 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(--sev-c)} .h-in:focus{outline:none;background:#fff;border-color:var(--sev); box-shadow:0 0 0 3px rgba(63,98,18,.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:'Display',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(63,98,18,.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(63,98,18,.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(--sev);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:#fbfdf9; 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(132,204,22,.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(--sev);color:var(--enc); background:linear-gradient(100deg,rgba(63,98,18,.14),rgba(22,163,74,.10))} .etage .e.on b,.etage .e.on i{color:var(--sev-f)} .etage .e.hach{border-left-style:dashed; background-image:repeating-linear-gradient(135deg,rgba(15,28,18,.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(132,204,22,.10),rgba(2,132,199,.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:'Display',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(--sev),var(--lim) 55%,var(--rho))} .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:'Display',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(--sev); 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(--sev-f);font-size:14px} .step h3,.col-etape h3{font-family:'Display',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(--sev-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(--rho);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(--sev-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(63,98,18,.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(--sev);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(--sev)} .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(--sev);text-decoration:none; box-shadow:0 1px 0 0 rgba(63,98,18,.34);transition:box-shadow .18s} .faq-suite a:hover{box-shadow:0 2px 0 0 var(--sev)} /* ---- 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 (#0f1c12) 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,#fafdf7,#eaf6dd); 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(132,204,22,.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:'Display',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(--sev-c);box-shadow:var(--o2),var(--hi)} /* ---- bande de gages ---- */ .bande{position:relative;overflow:hidden; background:linear-gradient(100deg,var(--nuit),#1c3d1f 52%,#0b2d4a)} .bande::after{content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(40% 160% at 16% 50%,rgba(132,204,22,.42),transparent 70%), radial-gradient(38% 150% at 82% 50%,rgba(2,132,199,.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:#e4f2d6;font-weight:700;font-size:14px} .bande-in span{display:inline-flex;align-items:center;gap:8px} .bande-in .ico{color:#a3e635} /* ---- 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),#1c3d1f);color:#e6f3d8;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:#fafdf7} .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:'Display',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:'Display',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:'Display',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(--rho);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(--sev);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:'Display',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(--sev)} /* ---- CTA final : section CLAIRE, avec un halo ---- */ .sec-cta{position:relative;overflow:hidden; background:linear-gradient(180deg,#f8fdf3,#e6f5d9)} .sec-cta::before{content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(46% 90% at 50% 8%,rgba(132,204,22,.30),transparent 70%), radial-gradient(40% 70% at 82% 96%,rgba(2,132,199,.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(--sev)} /* ========================================================================== 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:#fafdf7; 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(63,98,18,.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:'Display',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(--sev); 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:#dfeccf;padding:64px 0 24px; background:linear-gradient(160deg,var(--nuit),#17301a 46%,#0f3a2e)} .site-foot::before{content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(40% 60% at 12% 0%,rgba(132,204,22,.36),transparent 70%), radial-gradient(44% 66% at 88% 100%,rgba(2,132,199,.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,#a3e635,#bef264); -webkit-background-clip:text;background-clip:text;color:transparent} .foot-txt{font-size:14px;line-height:1.65;color:#cfe3bd;margin-top:16px;max-width:46ch} .foot-txt a{color:#eaf6df} .site-foot h3{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#a9bf94; margin-bottom:12px;font-weight:700} .foot-nav{display:grid;gap:8px} .foot-nav a{color:#dfeccf;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:#a9bf94} .foot-legal a{color:#dfeccf} /* ---- 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,253,247,.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(28,58,16,.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(11,26,13,.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} } /* ========================================================================== 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} } /* ========================================================================== CE QUI EST PROPRE À CE SITE — repris de la peau sortante et repeint. Riviera ne connaît aucune de ces classes : le bloc de raccordement `.rsx`, la signature « l'adresse à trois noms » `.adr`, le plan du site, le bloc partenaire, la grille des petites communes. Le HTML ne bouge pas : ce sont les MÊMES noms de classes, sur les mêmes 95 pages. ========================================================================== */ .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(--bg)} .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(227,160,8,.24)} .rsx-lad li.hach{background-image:repeating-linear-gradient(135deg,rgba(63,98,18,.16) 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)} .rsx.adr{border-left-color:var(--sev);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(--bg); 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(--sev)} .adr-l.on .adr-k{color:var(--sev)} .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(63,98,18,.16) 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} .cols4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);margin:var(--s5) 0} .cols4>*{min-width:0} .num{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:var(--r1);background:rgba(227,160,8,.12);border:1px solid var(--line2);font-family:'PlexMono';font-weight:600;font-size:13px;color:var(--dat)} .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)} .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)} .petites{grid-template-columns:repeat(auto-fill,minmax(148px,1fr))} .petites a{padding:var(--s2) var(--s3);font-size:13.5px} .part-txt .part-lien{font-family:'PlexMono';font-size:11.5px;line-height:1.55;color:var(--mut)} .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)} .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 .foot-part{color:#a9bf94;border-top-color:rgba(255,255,255,.12)} /* le bloc de raccordement et la signature vivent maintenant sur du verre, comme tout ce qui est surélevé dans cette peau — pas sur un aplat. */ .rsx{background:rgba(255,255,255,.72);backdrop-filter:blur(8px); border:1px solid var(--line);border-left:3px solid var(--dat); border-radius:0 var(--rr) var(--rr) 0;box-shadow:var(--o1),var(--hi)} .rsx.adr{border-left-color:var(--sev)} .adr-l{transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .18s,border-color .18s} .adr-l:hover{transform:translateX(3px);box-shadow:var(--o1);border-color:var(--sev-c)} /* ⚠️ SPÉCIFICITÉ : la règle reportée `.rsx-lad li.on` vaut (0,2,1) et bat `.adr-l.on` (0,2,0), même placée plus bas. Mesuré : le fond restait crème sous un texte devenu BLANC — 1,04:1 sur la ligne qui porte la signature, sur 62 pages. C'est le même piège que `.sec a` battant `.cta` au #19. */ .rsx-lad li.adr-l.on{background:var(--grad);border-color:transparent; box-shadow:0 12px 26px -10px rgba(63,98,18,.55)} .adr-l.on .adr-k{color:rgba(255,255,255,.85)} .adr-l.on .adr-v{color:#fff} .poste{transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .18s,border-color .18s} .poste:hover{transform:translateY(-3px);box-shadow:var(--o2);border-color:var(--sev-c)} .num{border-color:var(--line)} @media (max-width:900px){.cols4{grid-template-columns:repeat(2,1fr)} .plan{grid-template-columns:1fr;gap:32px}} @media (max-width:520px){.cols4{grid-template-columns:1fr}} @media (max-width:1080px){ .hero .live{order:5} .hero .srcline{order:6} .hero .trust{order:7;margin-top:24px} .hero .rsx{order:8} .hero .warn-col{order:9} } /* ========================================================================== 1. LA POPUP — elle n'avait AUCUNE règle, sauf le voile et la carte ========================================================================== ⚠️ LEÇON DE MÉTHODE : l'inventaire des classes avait été fait sur le HTML GÉNÉRÉ. Or la popup est construite par `js/main.js` : ses neuf classes n'apparaissent dans aucun fichier .html, donc l'inventaire ne les voyait pas et le portage les a toutes perdues. Résultat mesuré : la croix de fermeture était un `