/* ================================================================ pompes-a-chaleur-fribourg.ch — registre « Molasse & remplage » Éditorial fribourgeois : grès de molasse · parchemin · bleu Sarine. SIGNATURE : la température de départ conseillée (65/55/45/35 °C) pilote toute la palette via . 4 paliers discrets = 4 palettes, état par défaut (55 °C) écrit dans le HTML → garanti sans JavaScript. Structure, sélecteurs et breakpoints repris du pilote sans modification. ================================================================ */ @font-face{font-family:'Newsreader';font-weight:200 800;font-display:swap;src:url(/fonts/newsreader.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{ --enc:#1a2628;--enc2:#4a5a55;--mut:#5c655e; /* --mut abaissé après audit AA : 4.28 → 5.25 sur --bg */ --glc:#356a80;--frd-rgb:58 111 134; --bg:#f2efe6;--bg2:#fbf9f4;--line:#e2ded1;--ok:#2c8a58; /* alias hérités du pilote : l'accent chaud est désormais piloté par la température */ --amb:var(--acc);--amb-t:var(--acc-t); /* transition douce quand la palette bascule d'un palier à l'autre */ --tempo:.55s cubic-bezier(.32,.72,.3,1); } /* ---- LA SIGNATURE : 4 paliers de température de départ, 4 palettes ---- 65 °C vieux radiateurs fonte → braise · 35 °C plancher chauffant → bleu Sarine. --acc : aplats et grands éléments (jamais du texte fin) --acc-t: accent employé comme TEXTE sur fond clair (contraste AA vérifié) --cta-fg : encre du bouton, choisie sombre pour rester AA sur les 4 paliers */ :root[data-temp="65"]{ --acc:#d2552b;--acc-rgb:210 85 43;--accl:#ea8256;--accl-rgb:234 130 86; --accd-rgb:126 45 18;--acc-t:#973418;--cta-fg:#150602; } :root[data-temp="55"]{ --acc:#d68a24;--acc-rgb:214 138 36;--accl:#f0ad55;--accl-rgb:240 173 85; --accd-rgb:122 76 12;--acc-t:#8a5410;--cta-fg:#2a1a05; } :root[data-temp="45"]{ --acc:#a3a83f;--acc-rgb:163 168 63;--accl:#c6c96e;--accl-rgb:198 201 110; --accd-rgb:88 92 24;--acc-t:#5b6120;--cta-fg:#1d2005; } :root[data-temp="35"]{ --acc:#3ba0ad;--acc-rgb:59 160 173;--accl:#7cc6cf;--accl-rgb:124 198 207; --accd-rgb:18 82 90;--acc-t:#136169;--cta-fg:#052226; } /* filet de sécurité : si l'attribut manque, on retombe sur le palier 55 °C */ :root:not([data-temp]){ --acc:#d68a24;--acc-rgb:214 138 36;--accl:#f0ad55;--accl-rgb:240 173 85; --accd-rgb:122 76 12;--acc-t:#8a5410;--cta-fg:#2a1a05; } /* ce qui respire avec la température (les propriétés, pas les variables) */ .cta,.head-cta,.chip,.card,.puces button,.tr-fill,.tr-cur,.tr-tick,.tr-val,.step b, .eyebrow::before,.mini,.communes-grid a{transition:background-color var(--tempo),border-color var(--tempo),color var(--tempo),box-shadow var(--tempo),background-image var(--tempo),left var(--tempo),width var(--tempo)} *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{background:var(--bg2);color:var(--enc);font-family:'Manrope',system-ui,sans-serif;font-size:16px;line-height:1.6} img{max-width:100%;height:auto;display:block} a{color:var(--amb-t)} .skip{position:absolute;left:-999px;top:0;background:#fff;color:var(--enc);padding:10px 16px;z-index:200;border-radius:0 0 8px 0} .skip:focus{left:0} a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--glc);outline-offset:2px} .wrap{width:min(1240px,100%);margin:0 auto;padding-left:26px;padding-right:26px} @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}} /* ---------------- header ---------------- */ .site-head{position:sticky;top:0;z-index:80;display:flex;align-items:center;gap:20px;padding:12px 26px;background:rgba(251,249,244,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);transition:box-shadow .25s} .site-head.scrolle{box-shadow:0 6px 24px rgba(26,38,40,.08)} .logo{font-family:'Newsreader';font-weight:800;font-size:19px;color:var(--enc);text-decoration:none;white-space:nowrap} .logo-p{color:var(--amb-t)} .nav{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap} .nav a{color:var(--enc2);text-decoration:none;font-size:14px;font-weight:700;padding:8px 11px;border-radius:9px;transition:background .18s,color .18s,transform .18s} .nav a:hover{background:rgb(var(--acc-rgb) / .1);color:var(--amb-t);transform:translateY(-1px)} .nav a.on{color:var(--amb-t)} .head-cta{font-weight:700;font-size:14px;color:var(--cta-fg);text-decoration:none;background:linear-gradient(135deg,var(--accl),var(--acc));padding:10px 18px;border-radius:10px;white-space:nowrap;box-shadow:0 3px 22px rgb(var(--acc-rgb) / .35);transition:transform .18s,box-shadow .18s} .head-cta:hover{transform:translateY(-2px);box-shadow:0 5px 30px rgb(var(--acc-rgb) / .5)} .burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px} .burger span{width:24px;height:2.5px;background:var(--enc);border-radius:2px;transition:transform .25s,opacity .25s} @media (max-width:1080px){ .nav{position:fixed;inset:57px 0 auto 0;background:rgba(251,249,244,.98);backdrop-filter:blur(14px);flex-direction:column;padding:18px 26px 24px;gap:4px;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:12px 10px} .burger{display:flex} .burger.x span:nth-child(1){transform:translateY(7.5px) rotate(45deg)} .burger.x span:nth-child(2){opacity:0} .burger.x span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)} .head-cta{margin-left:auto} } /* ---------------- hero : calques de matière ---------------- */ .hero{position:relative;overflow:hidden;background:var(--bg);isolation:isolate} .hero-max{min-height:92vh;display:flex;align-items:center} .hero-page{padding:8px 0 20px} .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:52vw;height:44vw;right:-14%;top:-20%;background:radial-gradient(closest-side,rgb(var(--accl-rgb) / .55),rgb(var(--accl-rgb) / .18) 55%,transparent 75%);filter:blur(64px);animation:d1 23s ease-in-out infinite alternate} .f2{width:38vw;height:34vw;right:6%;bottom:-18%;background:radial-gradient(closest-side,rgb(var(--accl-rgb) / .4),rgb(var(--accl-rgb) / .12) 55%,transparent 75%);filter:blur(70px);animation:d2 13s ease-in-out infinite alternate} .f3{width:44vw;height:38vw;left:-12%;top:-14%;background:radial-gradient(closest-side,rgb(var(--frd-rgb) / .5),rgb(var(--frd-rgb) / .16) 55%,transparent 75%);filter:blur(66px);animation:d3 31s ease-in-out infinite alternate} .f4{width:30vw;height:26vw;left:24%;bottom:-14%;background:radial-gradient(closest-side,rgba(230,216,188,.45),transparent 70%);filter:blur(60px);animation:d4 19s 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)}} /* motif du métier : remplage gothique (arcs brisés entrelacés, collégiale St-Nicolas), réinterprété en trame fine, en dérive lente et non harmonique */ .motif{position:absolute;inset:-4%;z-index:2;pointer-events:none;opacity:.5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%233a6f86' stroke-opacity='.15' stroke-width='1.05'%3E%3Cpath d='M0 130 L0 200 M100 130 L100 200 M200 130 L200 200'/%3E%3Cpath d='M0 130 A100 100 0 0 1 50 43.4'/%3E%3Cpath d='M100 130 A100 100 0 0 0 50 43.4'/%3E%3Cpath d='M100 130 A100 100 0 0 1 150 43.4'/%3E%3Cpath d='M200 130 A100 100 0 0 0 150 43.4'/%3E%3Ccircle cx='50' cy='96' r='15'/%3E%3Ccircle cx='150' cy='96' r='15'/%3E%3C/g%3E%3Cg fill='none' stroke='%23a8712c' stroke-opacity='.11' stroke-width='1.05'%3E%3Cpath d='M0 130 L200 130'/%3E%3Cpath d='M25 130 A25 25 0 0 1 75 130'/%3E%3Cpath d='M125 130 A25 25 0 0 1 175 130'/%3E%3C/g%3E%3C/svg%3E");background-size:200px 200px;animation:motifDerive 37s linear infinite alternate;will-change:transform;mask-image:radial-gradient(140% 110% at 60% 30%,#000 40%,transparent 85%);-webkit-mask-image:radial-gradient(140% 110% at 60% 30%,#000 40%,transparent 85%)} @keyframes motifDerive{to{transform:translate(-40px,-24px)}} .motes{position:absolute;z-index:2;right:0;top:0;bottom:0;width:58%;pointer-events:none;overflow:hidden} .motes i{position:absolute;bottom:-6%;border-radius:50%;background:radial-gradient(circle,rgb(var(--accl-rgb) / .5),transparent 70%);filter:blur(5px);animation:mote linear infinite;will-change:transform,opacity} @keyframes mote{0%{transform:translateY(0);opacity:0}12%{opacity:.7}80%{opacity:.35}100%{transform:translateY(-92vh);opacity:0}} .voile{position:absolute;inset:0;z-index:3;background:linear-gradient(96deg,rgba(246,243,236,.93) 0%,rgba(246,243,236,.8) 26%,rgba(246,243,236,.34) 55%,rgba(246,243,236,.06) 80%);pointer-events:none} .grain{position:absolute;inset:0;z-index:4;opacity:.17;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='.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .16 0 0 0 0 .1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")} .halo{position:absolute;z-index:5;right:2%;top:10%;width:48%;height:78%;pointer-events:none;will-change:transform} .halo i{position:absolute;inset:0;border-radius:38% 62% 55% 45%/45% 40% 60% 55%;will-change:transform,opacity} .halo .h1{background:radial-gradient(closest-side,rgb(var(--accl-rgb) / .5),transparent 70%);animation:haloResp 8.6s ease-in-out infinite alternate} .halo .h2{inset:14%;background:radial-gradient(closest-side,rgba(248,241,226,.65),transparent 70%);animation:haloResp 6.2s ease-in-out infinite alternate-reverse} @keyframes haloResp{from{transform:scale(.94);opacity:.75}to{transform:scale(1.05);opacity:1}} .hero-grid{position:relative;z-index:7;display:grid;grid-template-columns:1.15fr 1fr;gap:52px;align-items:center;padding-top:56px;padding-bottom:56px} /* ---------------- hero : texte ---------------- */ .eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:'PlexMono';font-weight:600;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--glc);border:1px solid rgba(255,255,255,.9);padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.55);backdrop-filter:blur(8px)} .eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--amb);box-shadow:0 0 8px rgb(var(--acc-rgb) / .8)} .hero h1{font-family:'Newsreader';font-size:clamp(33px,4.6vw,58px);line-height:1.04;margin:20px 0 14px;text-wrap:balance} .hero-page h1{font-size:clamp(29px,3.6vw,46px)} .hero h1 .l{display:block} .hero h1 .thin{font-weight:200;color:var(--enc2)} .hero h1 .fat{font-weight:800} .hero h1 .fat b{color:var(--amb-t)} .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:50ch;font-size:16.5px;margin-bottom:22px} .live{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:10px} .chip{background:rgba(255,255,255,.6);backdrop-filter:blur(12px) saturate(1.15);border:1px solid transparent;background-image:linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,.6)),linear-gradient(135deg,rgba(255,255,255,.9),rgb(var(--accl-rgb) / .4),transparent);background-origin:border-box;background-clip:padding-box,border-box;border-radius:14px;padding:12px 18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 6px 18px rgb(var(--accd-rgb) / .12),0 16px 40px rgba(26,38,40,.08);transition:transform .18s,box-shadow .18s} .chip:hover{transform:translateY(-3px)} .chip small{display:block;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-bottom:2px} .chip b{font-family:'PlexMono';font-weight:600;font-size:19px;color:var(--enc);font-variant-numeric:tabular-nums} .chip.a b{color:var(--amb-t)} .chip.flash{animation:flashA 1s ease} @keyframes flashA{0%{background-color:rgb(var(--accl-rgb) / .35)}100%{background-color:rgba(255,255,255,.6)}} .srcline{font-size:12px;color:var(--mut);margin-bottom:18px;max-width:52ch} .trust{list-style:none;display:grid;gap:9px;font-size:14.5px;color:var(--enc2)} .trust li{display:flex;gap:9px;align-items:baseline} .trust li::before{content:'✓';font-weight:800;color:var(--ok)} .warn{margin-top:14px;display:none;gap:9px;border:1px solid rgb(var(--acc-rgb) / .5);border-left:3px solid var(--amb);background:rgba(255,251,244,.9);border-radius:10px;padding:10px 13px;font-size:13px;color:#7c4a0e;max-width:54ch} .warn.on{display:flex;animation:flashA 1.1s ease} /* l'alerte vit dans la colonne texte en desktop, dans la carte en empilé */ .warn-carte{margin:0 0 12px;max-width:none} @media (min-width:1081px){.warn-carte{display:none!important}} @media (max-width:1080px){.warn-col{display:none!important}} /* ---------------- la carte de devis ---------------- */ .cardwrap{position:relative;will-change:transform} .card{position:relative;background-image:linear-gradient(rgba(255,255,255,.68),rgba(255,255,255,.68)),linear-gradient(150deg,rgba(255,255,255,.95),rgb(var(--accl-rgb) / .55) 40%,rgb(var(--frd-rgb) / .4));background-origin:border-box;background-clip:padding-box,border-box;border:1px solid transparent;border-radius:22px;padding:24px;backdrop-filter:blur(20px) saturate(1.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 2px 4px rgba(26,38,40,.08),0 18px 30px rgb(var(--accd-rgb) / .14),0 44px 80px rgba(26,38,40,.14),0 0 70px rgb(var(--accl-rgb) / .28),0 0 130px rgb(var(--frd-rgb) / .3);transform:perspective(900px) rotateX(1.4deg) rotateY(-1deg);transition:transform .3s,box-shadow .3s} .card:hover{transform:perspective(900px) rotateX(0) rotateY(0) translateY(-4px)} .card>*{position:relative;z-index:2} @property --bb{syntax:'';initial-value:0deg;inherits:false} .beam{position:absolute;inset:-1px;z-index:1;border-radius:23px;padding:1.5px;background:conic-gradient(from var(--bb),transparent 0 72%,rgb(var(--accl-rgb) / .85) 84%,rgba(255,244,224,.95) 89%,rgb(var(--accl-rgb) / .5) 93%,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 8s linear infinite;pointer-events:none} @keyframes bb{to{--bb:360deg}} .sheenbox{position:absolute;inset:0;z-index:1;border-radius:22px;overflow:hidden;pointer-events:none} .sheenbox i{position:absolute;top:-12%;bottom:-12%;left:-58%;width:44%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.05) 42%,rgba(255,255,255,.5) 50%,rgb(var(--accl-rgb) / .14) 58%,transparent);transform:skewX(-12deg);animation:sheen 7s ease-in-out infinite;will-change:transform} @keyframes sheen{0%,52%{transform:translateX(0) skewX(-12deg)}88%,100%{transform:translateX(420%) skewX(-12deg)}} .card h3{font-family:'Newsreader';font-weight:800;font-size:19px;margin-bottom:2px} .mini{font-family:'PlexMono';font-weight:600;font-size:13px;color:var(--amb-t);margin-bottom:16px;min-height:18px;font-variant-numeric:tabular-nums} .fld{margin-bottom:13px} .h-t{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--enc2);margin-bottom:8px} .h-t output{font-family:'PlexMono';font-weight:600;font-size:15px;color:var(--amb-t)} input[type=range]{width:100%;appearance:none;height:6px;border-radius:99px;background:linear-gradient(90deg,var(--amb) var(--fill,40%),#e5e1d5 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(--amb);box-shadow:0 2px 10px rgb(var(--acc-rgb) / .5);transition:transform .15s,box-shadow .3s} input[type=range]:active::-webkit-slider-thumb,input[type=range]:focus::-webkit-slider-thumb{box-shadow:0 2px 10px rgb(var(--acc-rgb) / .5),0 0 0 8px rgb(var(--acc-rgb) / .18)} input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)} input[type=range]::-moz-range-thumb{width:19px;height:19px;border-radius:50%;background:#fff;border:3px solid var(--amb);box-shadow:0 2px 10px rgb(var(--acc-rgb) / .5)} .puces{display:grid;grid-template-columns:repeat(4,1fr);gap:7px} .puces button{font-family:'Manrope';font-size:12.5px;font-weight:700;color:var(--enc2);background:rgba(255,255,255,.72);border:1px solid #d4cfc0;border-radius:10px;padding:9px 4px;cursor:pointer;transition:all .18s;min-width:0} .puces button:hover{transform:translateY(-2px);border-color:#b3ab98;box-shadow:0 4px 10px rgba(26,38,40,.1)} .puces button.on{background:linear-gradient(140deg,rgb(var(--acc-rgb) / .16),rgb(var(--acc-rgb) / .05));border-color:var(--amb);color:var(--amb-t);box-shadow:0 0 0 1px rgb(var(--acc-rgb) / .3);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:10px;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:#e2ded1} .idgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:10px} .idgrid .full{grid-column:1/-1} .idgrid>*{min-width:0} .h-in{width:100%;font-family:'Manrope';font-size:14.5px;color:var(--enc);background:rgba(255,255,255,.75);border:1px solid #d4cfc0;border-radius:10px;padding:12px 14px;transition:border-color .18s,box-shadow .18s,background .18s} .h-in:hover{border-color:#b3ab98} .h-in:focus{border-color:var(--glc);background:#fff;box-shadow:0 0 0 3px rgb(var(--frd-rgb) / .15);outline:none} .h-in::placeholder{color:#9b9585} textarea.h-in{resize:none;min-height:58px;line-height:1.5} .hpot{position:absolute;left:-9999px;opacity:0} .cta{display:block;width:100%;text-align:center;font-family:'Manrope';font-weight:700;font-size:16px;color:var(--cta-fg);background:linear-gradient(135deg,var(--accl),var(--acc));border:none;border-radius:12px;padding:15px 22px;cursor:pointer;text-decoration:none;box-shadow:0 4px 34px rgb(var(--acc-rgb) / .4),0 2px 5px rgba(26,38,40,.2);transition:transform .18s,box-shadow .18s} .cta:hover{transform:translateY(-2px);box-shadow:0 6px 46px rgb(var(--acc-rgb) / .58),0 4px 9px rgba(26,38,40,.2)} .cta .fl{display:inline-block;transition:transform .18s} .cta:hover .fl{transform:translateX(4px)} .cta[disabled]{opacity:.6;cursor:wait;transform:none} .alt{text-align:center;font-size:13px;color:var(--enc2);margin-top:11px} .alt a{color:var(--amb-t);text-decoration:none;font-weight:700} .lpd{font-size:11px;color:var(--mut);text-align:center;margin-top:8px} .lpd a{color:var(--mut)} .ok-msg{margin-top:12px;text-align:center;font-weight:700;color:var(--ok);background:rgba(58,160,105,.1);border:1px solid rgba(58,160,105,.35);border-radius:10px;padding:11px} .card-in{opacity:0;transform:translateY(30px) scale(.985)} .go .card-in{animation:cardIn .9s cubic-bezier(.16,1.3,.3,1) forwards;animation-delay:.5s} @keyframes cardIn{to{opacity:1;transform:none}} .fini .card-in{opacity:1!important;transform:none!important;animation:none!important} /* ---------------- sections ---------------- */ .sec{padding:64px 0} .sec-tinte{background:var(--bg);position:relative} .sec-tinte::before{content:'';position:absolute;inset:0;opacity:.35;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%233a6f86' stroke-opacity='.1' stroke-width='1'%3E%3Cpath d='M0 130 L0 200 M100 130 L100 200 M200 130 L200 200'/%3E%3Cpath d='M0 130 A100 100 0 0 1 50 43.4'/%3E%3Cpath d='M100 130 A100 100 0 0 0 50 43.4'/%3E%3Cpath d='M100 130 A100 100 0 0 1 150 43.4'/%3E%3Cpath d='M200 130 A100 100 0 0 0 150 43.4'/%3E%3Ccircle cx='50' cy='96' r='15'/%3E%3Ccircle cx='150' cy='96' r='15'/%3E%3C/g%3E%3C/svg%3E");background-size:200px 200px} .sec-tinte>.wrap{position:relative;z-index:1} .sec h2{font-family:'Newsreader';font-weight:800;font-size:clamp(24px,2.9vw,36px);line-height:1.12;margin-bottom:14px;text-wrap:balance} .lead{color:var(--enc2);max-width:68ch;margin-bottom:26px;font-size:16.5px} .cols2{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:8px} .cols2>*{min-width:0} .cols2 p{color:var(--enc2)} .cols2 strong,.lead strong{color:var(--enc)} .cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:26px 0} .col-etape{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:0 8px 24px rgba(26,38,40,.06);transition:transform .18s,box-shadow .18s} .col-etape:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(26,38,40,.1)} .col-etape b{font-family:'PlexMono';font-weight:600;color:var(--amb-t);font-size:14px} .col-etape h3{font-family:'Newsreader';font-weight:800;font-size:18px;margin:6px 0 8px} .col-etape p{color:var(--enc2);font-size:14.5px} .bande{background:linear-gradient(135deg,#233330,#1a2628);position:relative;overflow:hidden} .bande::after{content:'';position:absolute;inset:0;opacity:.1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.5' stroke-width='1'%3E%3Cpath d='M0 130 L0 200 M100 130 L100 200 M200 130 L200 200'/%3E%3Cpath d='M0 130 A100 100 0 0 1 50 43.4'/%3E%3Cpath d='M100 130 A100 100 0 0 0 50 43.4'/%3E%3Cpath d='M100 130 A100 100 0 0 1 150 43.4'/%3E%3Cpath d='M200 130 A100 100 0 0 0 150 43.4'/%3E%3C/g%3E%3C/svg%3E");background-size:200px 200px} .bande-in{position:relative;z-index:1;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:16px;padding-bottom:16px;color:#e8dfd2;font-weight:700;font-size:14px} .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px} .stat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;text-align:center;box-shadow:0 8px 22px rgba(26,38,40,.06)} .stat b{display:block;font-family:'PlexMono';font-weight:600;font-size:27px;color:var(--amb-t);font-variant-numeric:tabular-nums} .stat span{font-size:12.5px;color:var(--mut)} .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px} .steps-v{grid-template-columns:1fr;max-width:760px} .step{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:0 6px 18px rgba(26,38,40,.05);transition:transform .18s} .step:hover{transform:translateY(-3px)} .step b{flex:none;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--accl),var(--acc));color:var(--cta-fg);font-family:'PlexMono';font-weight:600;font-size:14px} .step span{font-size:14.5px;color:var(--enc2)} .step strong{color:var(--enc)} .encart{border:1px solid rgb(var(--acc-rgb) / .45);border-left:4px solid var(--amb);background:rgba(255,251,244,.85);border-radius:0 12px 12px 0;padding:16px 20px;margin-top:26px} .encart p{color:#6d4a1c;font-size:14.5px} .encart a{font-weight:700} /* prestations (accueil) */ .prestas{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px} .presta{position:relative;display:block;border-radius:18px;overflow:hidden;text-decoration:none;box-shadow:0 10px 28px rgba(26,38,40,.12);transition:transform .22s,box-shadow .22s;isolation:isolate} .presta:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(26,38,40,.18)} .presta img{width:100%;height:230px;object-fit:cover;transition:transform .5s ease} .presta:hover img{transform:scale(1.05)} .presta-txt{position:absolute;inset:auto 0 0 0;padding:44px 18px 16px;background:linear-gradient(180deg,transparent,rgba(14,24,25,.88) 55%);color:#fff} .presta-txt b{font-family:'Newsreader';font-weight:800;font-size:18px;display:block} .presta-txt span{display:block;font-size:13px;color:#ccd6cf;margin:3px 0 8px} .presta-txt i{font-style:normal;font-size:13px;font-weight:700;color:var(--accl)} /* rangée image+texte (pages services) */ .row-img{display:grid;grid-template-columns:.9fr 1.1fr;gap:32px;align-items:center;margin-top:10px} .row-img>*{min-width:0} .row-img img{border-radius:16px;box-shadow:0 14px 34px rgba(26,38,40,.14);width:100%;height:100%;max-height:330px;object-fit:cover} .row-img p{color:var(--enc2);margin-bottom:12px} .row-img strong{color:var(--enc)} /* tableaux & postes */ .table-scroll{overflow-x:auto;margin-top:10px} .tbl{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 8px 24px rgba(26,38,40,.07);min-width:560px} .tbl th{background:#233330;color:#f3ede4;text-align:left;font-size:13px;letter-spacing:.05em;padding:13px 16px} .tbl td{padding:13px 16px;border-top:1px solid var(--line);color:var(--enc2);font-size:14.5px} .tbl td:last-child{font-family:'PlexMono';font-weight:600;color:var(--enc);white-space:nowrap;font-variant-numeric:tabular-nums} .postes{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:8px} .poste{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px} .poste b{font-family:'PlexMono';font-weight:600;color:var(--amb-t);font-size:17px;white-space:nowrap} .poste span{font-size:13.5px;color:var(--enc2)} /* fiche commune */ .fiche{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px} .fiche div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px} .fiche small{display:block;font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--mut)} .fiche b{font-size:15px} .communes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;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:11px;padding:11px 14px;text-decoration:none;color:var(--enc);font-weight:700;font-size:14px;transition:transform .16s,border-color .16s,box-shadow .16s} .communes-grid a:hover{transform:translateY(-2px);border-color:var(--amb);box-shadow:0 8px 20px rgba(26,38,40,.09)} .communes-grid small{font-family:'PlexMono';font-weight:600;font-size:10.5px;color:var(--mut)} /* FAQ */ .sec-faq{background:var(--bg)} .faq-list{max-width:820px;margin-top:22px} .faq-item{background:#fff;border:1px solid var(--line);border-radius:13px;margin-bottom:10px;overflow:hidden;transition:box-shadow .2s} .faq-item[open]{box-shadow:0 10px 28px rgba(26,38,40,.09)} .faq-item summary{list-style:none;cursor:pointer;padding:16px 46px 16px 18px;font-weight:700;font-size:15.5px;position:relative;transition:color .18s} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{content:'+';position:absolute;right:18px;top:50%;transform:translateY(-50%);font-family:'Newsreader';font-weight:200;font-size:24px;color:var(--amb-t);transition:transform .25s} .faq-item[open] summary::after{transform:translateY(-50%) rotate(45deg)} .faq-item summary:hover{color:var(--amb-t)} .faq-a{padding:0 18px 16px;color:var(--enc2);font-size:14.5px} /* blog */ .arts{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:24px} .art-card{display:block;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;text-decoration:none;box-shadow:0 8px 22px rgba(26,38,40,.06);transition:transform .18s,box-shadow .18s} .art-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(26,38,40,.11)} .art-card b{font-family:'Newsreader';font-weight:800;font-size:18px;color:var(--enc);display:block;margin-bottom:8px} .art-card p{color:var(--enc2);font-size:14px;margin-bottom:10px} .art-card i{font-style:normal;font-weight:700;font-size:13.5px;color:var(--amb-t)} .article .wrap-art{max-width:780px} .article h1{font-family:'Newsreader';font-weight:800;font-size:clamp(28px,3.4vw,40px);margin-bottom:18px;text-wrap:balance} .article h2{font-family:'Newsreader';font-weight:800;font-size:clamp(20px,2.3vw,26px);margin:30px 0 10px} .article p{color:var(--enc2);margin-bottom:14px} .article strong{color:var(--enc)} .art-retour{margin-top:26px;font-weight:700} .article .art-note{font-size:13.5px;color:var(--mut);border-left:3px solid var(--line);padding:10px 14px;background:#fff;border-radius:0 10px 10px 0;margin-bottom:18px} /* CTA final */ .sec-cta{background:linear-gradient(135deg,#233330,#16242a);position:relative;overflow:hidden} .sec-cta::before{content:'';position:absolute;width:44vw;height:44vw;right:-12%;top:-40%;border-radius:50%;background:radial-gradient(closest-side,rgb(var(--accl-rgb) / .25),transparent 70%);filter:blur(60px);animation:d2 13s ease-in-out infinite alternate} .sec-cta::after{content:'';position:absolute;inset:0;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.5' stroke-width='1'%3E%3Cpath d='M0 130 L0 200 M100 130 L100 200 M200 130 L200 200'/%3E%3Cpath d='M0 130 A100 100 0 0 1 50 43.4'/%3E%3Cpath d='M100 130 A100 100 0 0 0 50 43.4'/%3E%3Cpath d='M100 130 A100 100 0 0 1 150 43.4'/%3E%3Cpath d='M200 130 A100 100 0 0 0 150 43.4'/%3E%3C/g%3E%3C/svg%3E");background-size:200px 200px} .cta-fin{position:relative;z-index:1;text-align:center;padding-top:12px;padding-bottom:12px} .cta-fin h2{color:#f6f1e8;font-family:'Newsreader';font-weight:800;font-size:clamp(24px,3vw,36px);margin-bottom:10px} .cta-fin p{color:#c4cec7;max-width:56ch;margin:0 auto 22px} .cta-lien{display:inline-block;width:auto} .cta-fin .alt{color:#9daea7} .cta-fin .alt a{color:var(--accl)} /* footer */ .site-foot{background:#111e20;color:#b7c4bd} .foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1.4fr;gap:36px;padding-top:48px;padding-bottom:30px} .site-foot .logo{color:#f3ede4;font-size:21px} .site-foot .logo-p{color:var(--accl)} /* accent clair sur fond sombre : AA */ .foot-txt{font-size:13.5px;margin-top:10px;color:#8e9d96} .foot-txt a{color:#d9c9ab;text-decoration:none} .site-foot h4{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#7c8d86;margin-bottom:12px} .foot-nav{display:grid;gap:7px} .foot-nav a{color:#b7c4bd;text-decoration:none;font-size:13.5px;transition:color .15s} .foot-nav a:hover{color:var(--accl)} .foot-nav-com{grid-template-columns:repeat(2,1fr)} .foot-legal{border-top:1px solid #26362f;padding-top:16px;padding-bottom:22px;font-size:12px;color:#83948d} .foot-legal a{color:#9daea7} /* sticky CTA mobile */ .sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:70;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(251,249,244,.92);backdrop-filter:blur(10px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .3s ease;display:none} .sticky-cta .cta{width:100%} .sticky-cta.vu{transform:none} @media (max-width:760px){.sticky-cta{display:block}} /* ---------------- popup « Partez avec votre chiffre » ---------------- */ .pum{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(14,24,25,.45);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s ease} .pum.vu{opacity:1} .pum-card{position:relative;width:min(430px,100%);background-image:linear-gradient(rgba(255,255,255,.93),rgba(255,255,255,.93)),linear-gradient(150deg,rgba(255,255,255,.95),rgb(var(--accl-rgb) / .6) 40%,rgb(var(--frd-rgb) / .45));background-origin:border-box;background-clip:padding-box,border-box;border:1px solid transparent;border-radius:20px;padding:24px;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 2px 6px rgba(26,38,40,.12),0 24px 60px rgba(26,38,40,.28),0 0 80px rgb(var(--accl-rgb) / .25);transform:translateY(18px) scale(.97);transition:transform .35s cubic-bezier(.2,1.1,.3,1)} .pum.vu .pum-card{transform:none} .pum-x{position:absolute;top:10px;right:10px;width:36px;height:36px;border:none;background:none;cursor:pointer;font-size:22px;line-height:1;color:var(--mut);border-radius:50%;transition:background .15s,color .15s} .pum-x:hover{background:rgba(26,38,40,.07);color:var(--enc)} .pum-eti{font-family:'PlexMono';font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--glc);margin-bottom:8px} .pum-card h3{font-family:'Newsreader';font-weight:800;font-size:22px;line-height:1.15;margin-bottom:6px} .pum-chiffre{font-family:'PlexMono';font-weight:600;font-size:15px;color:var(--amb-t);background:rgb(var(--accl-rgb) / .12);border:1px solid rgb(var(--acc-rgb) / .35);border-radius:10px;padding:9px 13px;margin:10px 0 6px;font-variant-numeric:tabular-nums} .pum-p{font-size:13.5px;color:var(--enc2);margin-bottom:14px} .pum-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:11px} .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:9px} .pum-ok{text-align:center;padding:16px 0 6px;font-weight:700;color:var(--ok)} @media (max-width:600px){ .pum{align-items:flex-end;padding:0} .pum-card{width:100%;border-radius:22px 22px 0 0;padding-bottom:calc(24px + env(safe-area-inset-bottom));transform:translateY(100%)} } @media (prefers-reduced-motion:reduce){.pum,.pum-card{transition:none!important}} /* reveal (classe posée par JS uniquement) */ .js-rev [data-rev]{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease} .js-rev [data-rev].vu{opacity:1;transform:none} /* ---------------- responsive ---------------- */ @media (max-width:1080px){ .hero-grid{grid-template-columns:1fr;gap:32px} .hero-max{min-height:0} .card{transform:none} .halo{right:-10%;width:80%;top:auto;bottom:0;height:56%} /* en empilé, pas de résultat AVANT l'outil : les chips et la ligne source disparaissent, le résultat vit dans la carte (ligne ≈ kW · CHF) */ .hero .live,.hero .srcline{display:none} .prestas{grid-template-columns:repeat(2,1fr)} .stats{grid-template-columns:repeat(2,1fr)} .steps{grid-template-columns:repeat(2,1fr)} } @media (max-width:760px){ .wrap{padding-left:18px;padding-right:18px} .sec{padding:46px 0} .hero-grid{padding-top:36px;padding-bottom:40px} .cols2,.cols3,.postes,.arts,.row-img{grid-template-columns:1fr} .row-img img{max-height:240px} .prestas{grid-template-columns:1fr} .steps{grid-template-columns:1fr} .fiche{grid-template-columns:1fr 1fr} .foot-grid{grid-template-columns:1fr;gap:26px} .bande-in{justify-content:flex-start;gap:8px 18px;font-size:13px} } /* ================================================================ REGISTRE « MOLASSE & REMPLAGE » — composants propres au site #4 ================================================================ */ /* --- les grandes arcades de fond, en dérive non harmonique (43 s / 67 s) --- */ .remplage{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden} .remplage i{position:absolute;bottom:-2%;border:1px solid rgb(var(--acc-rgb) / .17);border-bottom:0;border-radius:50% 50% 0 0/60% 60% 0 0;will-change:transform;transition:border-color var(--tempo)} .remplage .r1{left:-8%;width:46vw;height:74%;animation:arc1 43s ease-in-out infinite alternate} .remplage .r2{right:4%;width:30vw;height:52%;border-color:rgb(var(--frd-rgb) / .16);animation:arc2 67s ease-in-out infinite alternate} @keyframes arc1{to{transform:translate(2.5vw,-1.5vh) scale(1.04)}} @keyframes arc2{to{transform:translate(-2vw,1vh) scale(1.06)}} /* --- LA SIGNATURE : la règle de température de départ --- */ .tempreg{margin:2px 0 14px;padding:11px 14px 12px;background:rgba(255,255,255,.62); border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:0 12px 12px 0; transition:border-color var(--tempo)} .tr-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px} .tr-lab{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--mut)} .tr-val{font-family:'PlexMono';font-weight:600;font-size:20px;line-height:1;color:var(--acc-t);font-variant-numeric:tabular-nums} .tr-val.flash{animation:flashA 1s ease} .tr-bar{position:relative;height:7px;margin:10px 0 7px;border-radius:99px;background:#e5e1d5} /* l'échelle thermique complète reste visible en fond : braise → bleu Sarine */ .tr-bar::before{content:'';position:absolute;inset:0;border-radius:99px;opacity:.3; background:linear-gradient(90deg,#d2552b,#d68a24,#a3a83f,#3ba0ad)} .tr-fill{position:absolute;left:0;top:0;bottom:0;width:37.5%;border-radius:99px;background:var(--acc)} .tr-cur{position:absolute;top:50%;left:37.5%;width:15px;height:15px;margin:-7.5px 0 0 -7.5px; border-radius:50%;background:#fff;border:3px solid var(--acc);box-shadow:0 2px 8px rgb(var(--acc-rgb) / .5)} .tr-ticks{display:grid;grid-template-columns:repeat(4,1fr);font-family:'PlexMono';font-weight:600;font-size:10.5px;color:var(--mut)} .tr-tick{text-align:center;font-variant-numeric:tabular-nums} .tr-tick.on{color:var(--acc-t)} .tr-note{margin-top:7px;font-size:12.5px;line-height:1.45;color:var(--enc2);min-height:2.9em} /* --- filet éditorial sous les titres de section (respire avec la température) --- */ .sec h2::before{content:'';display:block;width:42px;height:2px;margin-bottom:13px;border-radius:2px; background:var(--acc);transition:background-color var(--tempo)} .cta-fin h2::before,.sec-cta h2::before{background:var(--accl)} @media (max-width:1080px){ .remplage .r1{width:70vw;height:60%} .remplage .r2{display:none} } @media (max-width:760px){ .tr-note{min-height:3.9em} .tr-val{font-size:18px} }