/* ============================================================ CVC PREMIUM, interactions ============================================================ */ (function () { "use strict"; var reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches; /* ---------- Sticky header shadow ---------- */ var header = document.querySelector(".site-header"); if (header) { var onScrollHeader = function () { header.classList.toggle("is-stuck", window.scrollY > 8); }; onScrollHeader(); window.addEventListener("scroll", onScrollHeader, { passive: true }); } /* ---------- Reveal au scroll ---------- Chaque bloc s'anime au moment où il entre VRAIMENT dans le viewport (une part suffisante de l'élément doit être à l'écran), les blocs non annotés sont marqués automatiquement (uniquement sous la ligne de flottaison, pour éviter tout flash), et le filet de sécurité ne révèle que ce qui est effectivement à l'écran. */ (function () { var SKIP = "[data-noreveal],[data-parallax],.reveal,.site-header,.mobile-nav,.mob-nav,.nav-mobile,.cta-float,.hero-blob,.process-comet,.brands-marquee,.brands-track,.certif-marquee,.certif-row,.pro-track,.pro-viewport,.review-stack,.devis-panel,.faq-a,.faq-q,[data-aslide],[data-pro-card],[data-review-item],[data-devis-body],.hcard,.hscroll,.hscroll-track,.hscroll-viewport,[data-hcard],a,button,label,script,style,noscript,template,br,svg,form,input,select,textarea"; var THRU = ".wrap,.wrap-lg,.wrap-wide,.wrap-tight,.container,.section-inner,.hscroll-sticky,.hscroll-head,.hscroll-inner"; var vhNow = function () { return window.innerHeight || document.documentElement.clientHeight; }; var pending = []; function show(el) { el.classList.add("is-visible"); // Les blocs marqués automatiquement rendent la main aux styles du composant // (transition, opacity, transform propres au survol/focus) une fois arrivés. if (el.hasAttribute("data-reveal-auto")) { var wait = 760 + (parseFloat(el.style.getPropertyValue("--delay")) || 0); setTimeout(function () { el.classList.remove("reveal", "is-visible"); el.style.removeProperty("--delay"); el.removeAttribute("data-reveal-auto"); }, wait); } } function skipDecor(el) { var cs; try { cs = window.getComputedStyle(el); } catch (e) { return true; } if (!cs || cs.display === "none" || cs.visibility === "hidden") return true; if (cs.position === "fixed" || cs.position === "sticky" || cs.position === "absolute") return true; if (el.getAttribute("aria-hidden") === "true" && !el.textContent.trim()) return true; return false; } function liveKids(el) { var n = 0; for (var i = 0; i < el.children.length; i++) { var c = el.children[i]; if (c.matches && !c.matches(SKIP) && !skipDecor(c)) n++; } return n; } function tagEl(el, idx) { // jamais de marquage automatique sur ce qui est déjà à l'écran (pas de flash) if (el.getBoundingClientRect().top < vhNow() * 0.95) return false; el.classList.add("reveal"); el.setAttribute("data-reveal-auto", ""); if (idx && !el.style.getPropertyValue("--delay")) { el.style.setProperty("--delay", Math.min(idx * 70, 240) + "ms"); } return true; } function scan(container, depth) { var kids = Array.prototype.slice.call(container.children), idx = 0; for (var i = 0; i < kids.length; i++) { var el = kids[i]; if (!el.tagName || !el.matches || el.matches(SKIP) || skipDecor(el)) continue; if (el.matches(THRU)) { scan(el, depth); continue; } if (el.querySelector(".reveal")) { scan(el, depth); continue; } var cs = window.getComputedStyle(el); var grid = (cs.display === "flex" || cs.display === "grid") && liveKids(el) >= 2; var huge = el.offsetHeight > vhNow() * 1.35 && liveKids(el) >= 2; if ((grid || huge) && depth < 3) { scan(el, depth + 1); continue; } if (tagEl(el, idx)) idx++; } } function autoTag() { try { var scopes = Array.prototype.filter.call( document.querySelectorAll("section,footer,.site-footer"), function (s) { return !(s.parentElement && s.parentElement.closest("section,footer")); } ); scopes.forEach(function (s) { if (!skipDecor(s)) scan(s, 0); }); } catch (e) { /* le reveal des blocs déjà annotés doit survivre à tout */ } } function collect() { var els = document.querySelectorAll(".reveal:not(.is-visible)"); for (var i = 0; i < els.length; i++) { if (pending.indexOf(els[i]) < 0) pending.push(els[i]); } } function check() { var vh = vhNow(); for (var i = pending.length - 1; i >= 0; i--) { var el = pending[i], r = el.getBoundingClientRect(); if (!el.isConnected) { pending.splice(i, 1); continue; } if (r.bottom < 0) { show(el); pending.splice(i, 1); continue; } // il faut qu'une part réelle de l'élément soit visible avant de lancer l'animation var need = Math.min(vh * 0.14, Math.max(r.height * 0.28, 28)); if (r.top <= vh - need) { show(el); pending.splice(i, 1); } } } function showAll() { pending.forEach(show); pending.length = 0; } if (reduceMotion) { autoTagDisabled(); return; } function autoTagDisabled() { var els = document.querySelectorAll(".reveal"); for (var i = 0; i < els.length; i++) els[i].classList.add("is-visible"); } autoTag(); collect(); check(); var rafing = false; var onScroll = function () { if (!rafing) { rafing = true; window.requestAnimationFrame(function () { check(); rafing = false; }); } }; window.addEventListener("scroll", onScroll, { passive: true }); window.addEventListener("wheel", onScroll, { passive: true }); window.addEventListener("touchmove", onScroll, { passive: true }); window.addEventListener("resize", onScroll, { passive: true }); window.addEventListener("load", function () { autoTag(); collect(); check(); }); window.addEventListener("beforeprint", showAll); // Filet : le contenu injecté tardivement (tweaks, sliders) est rattrapé, // et rien de visible ne peut rester masqué si un scroll passe inaperçu. var ticks = 0; var watch = setInterval(function () { ticks++; if (ticks <= 8) autoTag(); collect(); check(); if (ticks > 30) clearInterval(watch); }, 500); window.CVCReveal = { rescan: function () { autoTag(); collect(); check(); }, showAll: showAll }; })(); /* ---------- Parallaxe douce (hero) ---------- */ var parallaxEls = document.querySelectorAll("[data-parallax]"); if (parallaxEls.length && !reduceMotion) { var ticking = false; var apply = function () { var y = window.scrollY; parallaxEls.forEach(function (el) { var speed = parseFloat(el.getAttribute("data-parallax")) || 0.1; var v = -(y * speed); if (el.__par === v) return; el.__par = v; el.style.transform = "translate3d(0," + v.toFixed(2) + "px,0)"; }); ticking = false; }; window.addEventListener("scroll", function () { if (!ticking) { window.requestAnimationFrame(apply); ticking = true; } }, { passive: true }); apply(); } /* ---------- FAQ accordéon ---------- */ document.querySelectorAll(".faq-q").forEach(function (q) { q.addEventListener("click", function () { var item = q.closest(".faq-item"); var ans = item.querySelector(".faq-a"); var isOpen = item.classList.contains("open"); // ferme les autres item.parentElement.querySelectorAll(".faq-item.open").forEach(function (other) { if (other !== item) { other.classList.remove("open"); other.querySelector(".faq-a").style.maxHeight = null; other.querySelector(".faq-q").setAttribute("aria-expanded", "false"); } }); item.classList.toggle("open", !isOpen); q.setAttribute("aria-expanded", String(!isOpen)); ans.style.maxHeight = isOpen ? null : ans.scrollHeight + "px"; }); }); /* ---------- Menu mobile ---------- */ var burger = document.querySelector(".burger"); var mobileMenu = document.querySelector(".mobile-menu"); var mmClose = document.querySelector(".mm-close"); var toggleMenu = function (open) { if (!mobileMenu) return; mobileMenu.classList.toggle("open", open); document.body.style.overflow = open ? "hidden" : ""; }; if (burger) burger.addEventListener("click", function () { toggleMenu(true); }); if (mmClose) mmClose.addEventListener("click", function () { toggleMenu(false); }); if (mobileMenu) { mobileMenu.querySelectorAll("a").forEach(function (a) { a.addEventListener("click", function () { toggleMenu(false); }); }); } /* ---------- Chips type de projet (contact) ---------- */ document.querySelectorAll(".chips-select").forEach(function (group) { group.querySelectorAll(".chip-opt").forEach(function (chip) { chip.addEventListener("click", function () { // .is-multi : plusieurs choix possibles (équipements du formulaire du hero) if (group.classList.contains("is-multi")) { chip.classList.toggle("active"); return; } group.querySelectorAll(".chip-opt").forEach(function (c) { c.classList.remove("active"); }); chip.classList.add("active"); }); }); }); /* ---------- Formulaire (démo, sans soumission réelle) ---------- */ document.querySelectorAll("[data-fake-form]").forEach(function (form) { form.addEventListener("click", function (e) { var btn = e.target.closest("[data-submit]"); if (!btn) return; e.preventDefault(); if (btn.__label == null) btn.__label = btn.textContent; btn.textContent = "Demande envoyée ✓"; btn.style.background = "var(--terra)"; btn.style.color = "#fff"; setTimeout(function () { btn.textContent = btn.__label; btn.style.background = ""; btn.style.color = ""; }, 2600); }); }); /* ---------- Galerie réalisations : scroll horizontal « wagon » + focus ---------- */ var hs = document.querySelector(".hscroll"); if (hs) { var hsSticky = hs.querySelector(".hscroll-sticky"); var hsTrack = hs.querySelector(".hscroll-track"); var hsCards = [].slice.call(hsTrack.querySelectorAll(".hcard")); var hsEnabled = false; var hsTx0 = 0, hsTx1 = 0; var cardCenter = function (c) { var tr = hsTrack.getBoundingClientRect(); var r = c.getBoundingClientRect(); return (r.left - tr.left) + r.width / 2; }; var updateFocus = function () { var cx = window.innerWidth / 2, best = null, bestD = Infinity; hsCards.forEach(function (c) { var r = c.getBoundingClientRect(); var d = Math.abs(r.left + r.width / 2 - cx); if (d < bestD) { bestD = d; best = c; } }); hsCards.forEach(function (c) { c.classList.toggle("is-focus", c === best); }); }; var updateHs = function () { if (hsEnabled) { var total = hs.offsetHeight - window.innerHeight; if (total > 0) { var prog = -hs.getBoundingClientRect().top / total; prog = prog < 0 ? 0 : (prog > 1 ? 1 : prog); var tx = hsTx0 + prog * (hsTx1 - hsTx0); hsTrack.style.transform = "translate3d(" + tx.toFixed(1) + "px,0,0)"; } } updateFocus(); }; var setupHs = function () { var canPin = window.matchMedia("(min-width: 1025px)").matches && !reduceMotion; hsTrack.style.transform = ""; var first = hsCards[0], last = hsCards[hsCards.length - 1]; var vc = window.innerWidth / 2; hsTx0 = vc - (first ? cardCenter(first) : 0); // 1re carte centrée au départ hsTx1 = vc - (last ? cardCenter(last) : 0); // dernière (CTA) centrée à la fin var dist = Math.abs(hsTx1 - hsTx0); if (canPin && dist > 20) { hsSticky.classList.remove("is-free"); hs.style.height = (window.innerHeight + dist) + "px"; hsEnabled = true; } else { hsSticky.classList.add("is-free"); hs.style.height = ""; hsTrack.style.transform = ""; hsEnabled = false; } updateHs(); }; var hsTick = false; window.addEventListener("scroll", function () { if (!hsTick) { window.requestAnimationFrame(function () { updateHs(); hsTick = false; }); hsTick = true; } }, { passive: true }); hsTrack.addEventListener("scroll", function () { window.requestAnimationFrame(updateFocus); }, { passive: true }); window.addEventListener("resize", setupHs); window.addEventListener("load", setupHs); setupHs(); } /* ---------- Process : la comète marque un arrêt à chaque étape ---------- */ var flow = document.querySelector(".process-flow"); if (flow && !reduceMotion) { var comet = flow.querySelector(".process-comet"); var pSteps = [].slice.call(flow.querySelectorAll(".pstep")); var stops = [12.5, 37.5, 62.5, 87.5]; var ci = 0, cdir = 1; var cometStep = function () { if (comet) comet.style.left = stops[ci] + "%"; pSteps.forEach(function (s, i) { s.classList.toggle("is-lit", i === ci); }); ci += cdir; if (ci > stops.length - 1) { ci = stops.length - 2; cdir = -1; } else if (ci < 0) { ci = 1; cdir = 1; } }; cometStep(); setInterval(cometStep, 1700); } /* ---------- Aides : slider auto vertical (pause au survol) ---------- */ var aSlider = document.querySelector("[data-aides-slider]"); var aNav = document.querySelector("[data-aides-nav]"); if (aSlider && aNav) { var aSlides = [].slice.call(aSlider.querySelectorAll("[data-aslide]")); var aItems = [].slice.call(aNav.querySelectorAll("li")); var aDur = 5000, aIdx = 0, aAcc = 0, aLast = 0, aPaused = false; var aRender = function () { aSlides.forEach(function (s, i) { s.classList.toggle("is-active", i === aIdx); }); aItems.forEach(function (li, i) { li.classList.toggle("is-active", i === aIdx); }); }; var aSetBar = function (p) { aItems.forEach(function (li, i) { var b = li.querySelector(".an-bar i"); if (b) b.style.width = (i === aIdx ? (p * 100).toFixed(1) : 0) + "%"; }); }; var aGo = function (n) { aIdx = (n + aSlides.length) % aSlides.length; aAcc = 0; aRender(); aSetBar(0); }; var aFrame = function (ts) { if (!aLast) aLast = ts; var dt = ts - aLast; aLast = ts; if (!aPaused) { aAcc += dt; if (aAcc >= aDur) { aGo(aIdx + 1); } else { aSetBar(aAcc / aDur); } } window.requestAnimationFrame(aFrame); }; aItems.forEach(function (li, i) { li.addEventListener("click", function () { aGo(i); }); }); // Bouton lecture / pause du carrousel (par défaut : lecture) var aPlayIco = ''; var aPauseIco = ''; var aBtn = document.createElement("button"); aBtn.type = "button"; aBtn.className = "aides-toggle"; var aSyncBtn = function () { aBtn.innerHTML = aPaused ? aPlayIco : aPauseIco; aBtn.setAttribute("aria-label", aPaused ? "Reprendre le défilement" : "Mettre en pause"); }; aBtn.addEventListener("click", function () { aPaused = !aPaused; aSyncBtn(); }); aSlider.appendChild(aBtn); aSyncBtn(); aRender(); aSetBar(0); if (!reduceMotion) window.requestAnimationFrame(aFrame); } /* ---------- Zone d'intervention : carte OpenStreetMap centrée sur la ville de l'entreprise ---------- */ var zoneEl = document.getElementById("zone-leaflet"); if (zoneEl && window.L) { var zoneCity = (zoneEl.getAttribute("data-city") || "").trim(); var storedKm = null; try { storedKm = parseFloat(localStorage.getItem("cvc-zone-rayon")); } catch (e) {} var radiusKm = storedKm || parseFloat(zoneEl.getAttribute("data-radius-km")) || 40; var zcircle = null; var syncZoneKm = function (km) { var els = document.querySelectorAll("[data-zone-km]"); for (var i = 0; i < els.length; i++) els[i].textContent = km + " km"; }; syncZoneKm(radiusKm); var zmap = L.map(zoneEl, { scrollWheelZoom: false, attributionControl: true, center: [46.6, 2.4], zoom: 5 }); L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { maxZoom: 19, attribution: "© OpenStreetMap" }).addTo(zmap); var drawZone = function (center) { zcircle = L.circle(center, { radius: radiusKm * 1000, color: "#C97B5A", weight: 2, fillColor: "#C97B5A", fillOpacity: 0.12 }).addTo(zmap); L.circleMarker(center, { radius: 7, color: "#fff", weight: 2, fillColor: "#0B2440", fillOpacity: 1 }).addTo(zmap); var fitZone = function () { zmap.invalidateSize(); try { zmap.fitBounds(zcircle.getBounds(), { padding: [18, 18] }); } catch (e) {} }; setTimeout(fitZone, 100); window.addEventListener("load", function () { setTimeout(fitZone, 200); }); }; /* Rayon d'intervention pilotable (panneau Tweaks) : redessine le cercle + met à jour les libellés. */ window.setZoneRadiusKm = function (km) { km = parseFloat(km); if (!km || km <= 0) return; radiusKm = km; zoneEl.setAttribute("data-radius-km", km); syncZoneKm(km); if (zcircle) { zcircle.setRadius(km * 1000); try { zmap.invalidateSize(); zmap.fitBounds(zcircle.getBounds(), { padding: [18, 18] }); } catch (e) {} } }; /* La ville est injectée à l'hydratation via data-city="{{ entreprise.ville }}" ; géocodage OpenStreetMap. */ if (zoneCity && zoneCity.indexOf("{{") === -1) { fetch("https://nominatim.openstreetmap.org/search?format=json&limit=1&countrycodes=fr&q=" + encodeURIComponent(zoneCity)) .then(function (r) { return r.json(); }) .then(function (res) { if (res && res[0]) drawZone([parseFloat(res[0].lat), parseFloat(res[0].lon)]); }) .catch(function () {}); } setTimeout(function () { zmap.invalidateSize(); }, 300); var zoneRT; window.addEventListener("resize", function () { clearTimeout(zoneRT); zoneRT = setTimeout(function () { zmap.invalidateSize(); }, 150); }); window.addEventListener("orientationchange", function () { setTimeout(function () { zmap.invalidateSize(); }, 250); }); } /* ---------- Sélecteur de solutions au scroll (page service) ---------- */ var stepper = document.querySelector("[data-stepper]"); if (stepper) { var stImgs = stepper.querySelector("[data-stepper-imgs]"); var stChildren = [].slice.call(stImgs.children); var stTexts = [].slice.call(stepper.querySelectorAll("[data-step]")); var stDots = [].slice.call(stepper.querySelectorAll("[data-stepper-dots] button")); var stN = stTexts.length; var stEnabled = false; var stSection = stepper.closest(".solution-stepper"); // Mobile : chaque carte solution reçoit son illustration. On DÉPLACE (sans cloner) // l'unique source entre le grand visuel (desktop) et un conteneur dans la // carte (mobile). Un seul par solution : pas de doublon d'image, et l'image // reste éditable dans le builder (comme les autres sections). var stMediaSlots = []; var stEnsureSlot = function (i) { if (stMediaSlots[i]) return stMediaSlots[i]; var t = stTexts[i], src = stChildren[i]; if (!t || !src) return null; var existing = t.querySelector(".stepper-text-media"); if (existing) { stMediaSlots[i] = existing; return existing; } var media = document.createElement("div"); media.className = "stepper-text-media"; var tint = src.style.getPropertyValue("--tint"); if (tint) media.style.setProperty("--tint", tint.trim()); t.insertBefore(media, t.firstChild); stMediaSlots[i] = media; return media; }; var stImgHome = "visual"; var stPlaceImages = function (inCards) { var want = inCards ? "cards" : "visual"; if (stImgHome === want) return; stTexts.forEach(function (t, i) { var home = stChildren[i]; if (!home) return; if (inCards) { var img = home.querySelector("img"); if (!img) return; var media = stEnsureSlot(i); if (media) media.appendChild(img); } else { var media = stMediaSlots[i]; var img = media ? media.querySelector("img") : null; if (!img) return; var cap = home.querySelector(".stepper-cap"); if (cap) home.insertBefore(img, cap); else home.appendChild(img); } }); stImgHome = want; }; var stStyle = "deck"; try { var stSaved = localStorage.getItem("cvca-stepper-style"); if (stSaved) stStyle = stSaved; } catch (e) {} var stApplyClass = function () { if (!stSection) return; stSection.classList.toggle("is-float", stStyle === "float"); stSection.classList.toggle("is-deck", stStyle === "deck"); stSection.classList.toggle("is-wheel", stStyle === "wheel"); stSection.classList.toggle("is-wheel2", stStyle === "wheel2"); }; stApplyClass(); var stIsWheel = function () { return stStyle === "wheel" || stStyle === "wheel2"; }; // styles qui s'aimantent sur une carte (toujours quelque chose de focus, pas d'entre-deux) var stSnaps = function () { return stStyle === "deck" || stStyle === "wheel" || stStyle === "wheel2"; }; /* --- ROUE : décor (anneau + halo) injecté une fois, géométrie calculée au layout --- */ var stVisual = stepper.querySelector(".stepper-visual"); var stRing = null, stGlow = null, wheelGeo = null; if (stVisual && stImgs) { stGlow = document.createElement("span"); stGlow.className = "stepper-glow"; stGlow.setAttribute("aria-hidden", "true"); stRing = document.createElement("span"); stRing.className = "stepper-ring"; stRing.setAttribute("aria-hidden", "true"); stVisual.insertBefore(stGlow, stImgs); stVisual.insertBefore(stRing, stImgs); } /* --- ROUE 2 : rail circulaire « physique » (SVG) qui enfile des pastilles à chaque solution, comme la timeline « Votre installation » mais courbée sur la roue ; détente lumineuse au point focal + tracé azur→terra qui se dessine. --- */ var SVGNS = "http://www.w3.org/2000/svg"; var stSpine = null, stRailEl = null, stTraceEl = null, stHaloEl = null, stNodes = []; if (stVisual && stImgs) { stSpine = document.createElementNS(SVGNS, "svg"); stSpine.setAttribute("class", "stepper-spine"); stSpine.setAttribute("aria-hidden", "true"); var defs = document.createElementNS(SVGNS, "defs"); var grad = document.createElementNS(SVGNS, "linearGradient"); grad.setAttribute("id", "spineGrad"); grad.setAttribute("x1", "0"); grad.setAttribute("y1", "1"); grad.setAttribute("x2", "0"); grad.setAttribute("y2", "0"); var s1 = document.createElementNS(SVGNS, "stop"); s1.setAttribute("offset", "0"); s1.setAttribute("stop-color", "var(--azur)"); var s2 = document.createElementNS(SVGNS, "stop"); s2.setAttribute("offset", "1"); s2.setAttribute("stop-color", "var(--terra)"); grad.appendChild(s1); grad.appendChild(s2); defs.appendChild(grad); stSpine.appendChild(defs); stRailEl = document.createElementNS(SVGNS, "path"); stRailEl.setAttribute("class", "spine-rail"); stTraceEl = document.createElementNS(SVGNS, "path"); stTraceEl.setAttribute("class", "spine-trace"); stHaloEl = document.createElementNS(SVGNS, "circle"); stHaloEl.setAttribute("class", "spine-halo"); stSpine.appendChild(stRailEl); stSpine.appendChild(stTraceEl); stSpine.appendChild(stHaloEl); for (var ni = 0; ni < stN; ni++) { var nd = document.createElementNS(SVGNS, "circle"); nd.setAttribute("class", "spine-node"); stSpine.appendChild(nd); stNodes.push(nd); } stVisual.insertBefore(stSpine, stImgs); } // centre du grand cercle (hors champ à gauche) + rayon du rail intérieur var stArc = function (cx0, cy0, Rr, thA, thB) { var n = 30, d = ""; for (var k = 0; k <= n; k++) { var th = thA + (thB - thA) * k / n; d += (k ? "L" : "M") + (cx0 + Rr * Math.cos(th)).toFixed(1) + " " + (cy0 + Rr * Math.sin(th)).toFixed(1) + " "; } return d; }; var stLayoutWheel = function () { if (!stImgs) return; var H = stImgs.clientHeight || 0, W = stImgs.clientWidth || 0; var R = H * 1.18; var cx0 = W / 2 - R, cy0 = H / 2, Rr = R * 0.8; wheelGeo = { W: W, H: H, R: R, ang: 30 * Math.PI / 180, cx0: cx0, cy0: cy0, Rr: Rr }; if (stRing) { var size = 2 * R; stRing.style.width = size + "px"; stRing.style.height = size + "px"; stRing.style.left = (W / 2 - 2 * R) + "px"; stRing.style.top = (H / 2 - R) + "px"; } if (stSpine) { stSpine.setAttribute("width", W); stSpine.setAttribute("height", H); var ang = wheelGeo.ang; stRailEl.setAttribute("d", stArc(cx0, cy0, Rr, -3.25 * ang, 3.25 * ang)); stHaloEl.setAttribute("cx", (cx0 + Rr).toFixed(1)); stHaloEl.setAttribute("cy", cy0.toFixed(1)); stHaloEl.setAttribute("r", "22"); } }; var stUpdateSpine = function (pos) { if (!stSpine || !wheelGeo) return; var g = wheelGeo, ang = g.ang; stTraceEl.setAttribute("d", stArc(g.cx0, g.cy0, g.Rr, -pos * ang, 0)); stNodes.forEach(function (nd, i) { var th = (i - pos) * ang, steps = Math.abs(i - pos); nd.setAttribute("cx", (g.cx0 + g.Rr * Math.cos(th)).toFixed(1)); nd.setAttribute("cy", (g.cy0 + g.Rr * Math.sin(th)).toFixed(1)); nd.setAttribute("r", steps < 0.5 ? "8.5" : "5"); var op = steps <= 2 ? 1 : Math.max(0, 1 - (steps - 2) / 0.8); nd.setAttribute("opacity", op.toFixed(2)); nd.classList.toggle("is-lit", steps < 0.5); }); }; var setStep = function (s) { stTexts.forEach(function (t, i) { t.classList.toggle("is-active", i === s); }); stDots.forEach(function (d, i) { d.classList.toggle("is-active", i === s); }); }; var stPos = 0; var resetCards = function () { stChildren.forEach(function (el) { el.style.transform = ""; el.style.opacity = ""; el.style.zIndex = ""; el.style.filter = ""; el.style.pointerEvents = ""; el.classList.remove("is-front", "is-leaving"); }); }; /* --- PILE (deck) : EXACTEMENT la même animation que le deck « Solutions pros », mais pilotée au scroll. Le scroll agit comme un bouton : on se cale toujours sur une carte (snap) et chaque cran feuillette la pile, la carte de devant s'envole à gauche, puis revient se ranger au fond. --- */ var dkSig = [ { a: 0, x: 0, y: 0 }, { a: -5, x: 4, y: -3.5 }, { a: 4.5, x: -4, y: 3.5 }, { a: -6.5, x: 6, y: 7 } ]; var dkOrder = stChildren.map(function (_, i) { return i; }); var dkCurrent = 0, dkBusy = false; var dkRender = function () { dkOrder.forEach(function (cardIdx, depth) { var el = stChildren[cardIdx]; if (!el) return; var s = dkSig[Math.min(depth, dkSig.length - 1)]; el.style.transform = "translate(" + s.x + "%, " + s.y + "%) rotate(" + s.a + "deg) scale(" + (1 - depth * 0.05).toFixed(3) + ")"; el.style.opacity = depth > 3 ? "0" : "1"; el.style.zIndex = String(60 - depth); el.style.filter = depth === 0 ? "none" : "blur(" + Math.min(4, depth * 1.4).toFixed(1) + "px)"; el.style.pointerEvents = depth === 0 ? "auto" : "none"; el.classList.toggle("is-front", depth === 0); }); }; var dkAdvance = function () { if (dkOrder.length < 2) return; dkBusy = true; var front = stChildren[dkOrder[0]]; front.classList.add("is-leaving"); var fin = function () { dkOrder.push(dkOrder.shift()); front.classList.remove("is-leaving"); dkRender(); dkBusy = false; }; if (reduceMotion) fin(); else setTimeout(fin, 320); }; var dkRetreat = function () { if (dkOrder.length < 2) return; dkOrder.unshift(dkOrder.pop()); // la carte du fond redevient celle de devant if (reduceMotion) { dkRender(); return; } // animation INVERSE de l'envol : la carte revient EN GLISSANT depuis la gauche dkBusy = true; var front = stChildren[dkOrder[0]]; front.classList.add("is-entering"); // placée hors-champ à gauche, sans transition dkRender(); // les autres cartes reculent d'un cran void front.offsetWidth; // reflow : on fige l'état hors-champ window.requestAnimationFrame(function () { front.classList.remove("is-entering"); // → glisse jusqu'à l'avant (transition de base) window.setTimeout(function () { dkBusy = false; }, 560); }); }; var dkRebuild = function (step) { dkOrder = []; for (var k = 0; k < stN; k++) dkOrder.push((step + k) % stN); dkRender(); }; var dkReset = function () { dkCurrent = -1; dkOrder = stChildren.map(function (_, i) { return i; }); }; var stUpdate = function () { if (!stEnabled) return; var total = stepper.offsetHeight - window.innerHeight; if (total <= 0) return; var prog = -stepper.getBoundingClientRect().top / total; prog = prog < 0 ? 0 : (prog > 1 ? 1 : prog); var pos = prog * (stN - 1); stPos = pos; setStep(Math.round(pos)); if (stStyle === "float") { stChildren.forEach(function (el, i) { var d = pos - i; var c = Math.max(-1, Math.min(1, d)); var eased = (c < 0 ? -1 : 1) * Math.pow(Math.abs(c), 1.4); var ty = -eased * 96; // entre par le bas, sort par le haut var ad = Math.abs(d); var op = ad >= 0.9 ? 0 : (ad <= 0.5 ? 1 : 1 - (ad - 0.5) / 0.4); el.style.transform = "translate3d(0," + ty.toFixed(1) + "vh,0) scale(" + (1 - Math.abs(c) * 0.06).toFixed(3) + ")"; el.style.opacity = op.toFixed(2); el.style.zIndex = ad < 0.5 ? 3 : 1; }); } else if (stStyle === "deck") { // le scroll = un bouton : on se cale toujours sur la carte la plus proche (snap), // et chaque cran feuillette la pile comme le deck « Solutions pros ». var step = Math.round(pos); if (step < 0) step = 0; else if (step > stN - 1) step = stN - 1; if (!dkBusy && step !== dkCurrent) { var diff = step - dkCurrent; var wasInit = dkCurrent < 0; // 1re synchro : on POSE la pile sur l'étape courante dkCurrent = step; // (sinon on feuilletait d'un cran => image décalée d'un cran vs texte) if (wasInit || Math.abs(diff) > 1) dkRebuild(step); else if (diff === 1) dkAdvance(); else dkRetreat(); } } else if (stStyle === "wheel" || stStyle === "wheel2") { // ROUE : les images sont posées sur le bord droit d'un grand cercle dont le // centre est hors champ à gauche. En scrollant, la roue tourne : la suivante // monte du bas vers le point focal (centre), grandit et se fait nette ; la // passée s'élève vers le haut, rapetisse et se floute, puis sort du champ. if (!wheelGeo) stLayoutWheel(); var R = wheelGeo.R, ang = wheelGeo.ang; stChildren.forEach(function (el, i) { var th = (i - pos) * ang; // radians, 0 = focus var steps = Math.abs(i - pos); var x = R * (Math.cos(th) - 1); var y = R * Math.sin(th); var sc = Math.max(0.4, 1 - Math.min(steps, 2.4) * 0.26); var blur = Math.min(7, Math.max(0, steps - 0.06) * 3.2); var op = steps <= 1.4 ? 1 : Math.max(0, 1 - (steps - 1.4) / 0.95); var rot = (th * 180 / Math.PI) * 0.4; el.style.transform = "translate(" + x.toFixed(1) + "px," + y.toFixed(1) + "px) rotate(" + rot.toFixed(2) + "deg) scale(" + sc.toFixed(3) + ")"; el.style.opacity = op.toFixed(2); el.style.filter = blur ? "blur(" + blur.toFixed(1) + "px)" : ""; el.style.zIndex = String(Math.round(100 - steps * 20)); el.classList.toggle("is-front", steps < 0.5); }); if (stStyle === "wheel2") stUpdateSpine(pos); } else { var panelH = stChildren[0] ? stChildren[0].clientHeight : 0; stImgs.style.transform = "translateY(" + (-pos * panelH).toFixed(1) + "px)"; } }; /* --- Mobile : pile de cartes feuilletable (option « Deck » du panneau Tweaks). Reprend l'esthétique du deck « Solutions pros » mais sur les cartes solution, et remplace, sur mobile uniquement, le carrousel horizontal par une pile. --- */ var stMobile = "slides"; try { var stMobSaved = localStorage.getItem("cvca-stepper-mobile"); if (stMobSaved) stMobile = stMobSaved; } catch (e) {} var mdUI = null, mdCount = null, mdBusy = false; var mdOrder = stTexts.map(function (_, i) { return i; }); var mdPad = function (n) { return ("0" + n).slice(-2); }; var mdRender = function () { mdOrder.forEach(function (cardIdx, depth) { var el = stTexts[cardIdx]; if (!el) return; var s = dkSig[Math.min(depth, dkSig.length - 1)]; el.style.transform = "translate(" + s.x + "%, " + s.y + "%) rotate(" + s.a + "deg) scale(" + (1 - depth * 0.05).toFixed(3) + ")"; el.style.opacity = depth > 3 ? "0" : "1"; el.style.zIndex = String(60 - depth); el.style.filter = depth === 0 ? "none" : "blur(" + Math.min(4, depth * 1.4).toFixed(1) + "px)"; el.style.pointerEvents = depth === 0 ? "auto" : "none"; el.classList.toggle("is-front-md", depth === 0); }); if (mdCount) mdCount.innerHTML = "" + mdPad(mdOrder[0] + 1) + " / " + mdPad(stTexts.length); }; var mdNext = function () { if (mdBusy || stTexts.length < 2) return; mdBusy = true; var front = stTexts[mdOrder[0]]; front.classList.add("is-leaving"); var fin = function () { mdOrder.push(mdOrder.shift()); front.classList.remove("is-leaving"); mdRender(); mdBusy = false; }; if (reduceMotion) fin(); else setTimeout(fin, 340); }; var mdPrev = function () { if (mdBusy || stTexts.length < 2) return; mdOrder.unshift(mdOrder.pop()); if (reduceMotion) { mdRender(); return; } mdBusy = true; var front = stTexts[mdOrder[0]]; front.classList.add("is-entering"); mdRender(); void front.offsetWidth; window.requestAnimationFrame(function () { front.classList.remove("is-entering"); window.setTimeout(function () { mdBusy = false; }, 580); }); }; var mdClear = function () { stTexts.forEach(function (el) { el.style.transform = ""; el.style.opacity = ""; el.style.zIndex = ""; el.style.filter = ""; el.style.pointerEvents = ""; el.classList.remove("is-leaving", "is-entering", "is-front-md"); }); mdOrder = stTexts.map(function (_, i) { return i; }); }; var mdIsActive = function () { return stMobile === "deck" && !window.matchMedia("(min-width: 921px)").matches; }; var MD_ARROW_L = ''; var MD_ARROW_R = ''; var mdBuildUI = function () { if (mdUI) return; var texts = stepper.querySelector(".stepper-texts"); if (!texts) return; mdUI = document.createElement("div"); mdUI.className = "mdeck-ui"; var prev = document.createElement("button"); prev.type = "button"; prev.className = "pro-arrow"; prev.setAttribute("aria-label", "Carte précédente"); prev.innerHTML = MD_ARROW_L; mdCount = document.createElement("span"); mdCount.className = "pro-deck-count"; var next = document.createElement("button"); next.type = "button"; next.className = "pro-arrow"; next.setAttribute("aria-label", "Carte suivante"); next.innerHTML = MD_ARROW_R; mdUI.appendChild(prev); mdUI.appendChild(mdCount); mdUI.appendChild(next); texts.parentNode.insertBefore(mdUI, texts.nextSibling); prev.addEventListener("click", mdPrev); next.addEventListener("click", mdNext); var tx0 = null; texts.addEventListener("touchstart", function (e) { if (!mdIsActive()) return; tx0 = e.touches[0].clientX; }, { passive: true }); texts.addEventListener("touchend", function (e) { if (!mdIsActive() || tx0 == null) return; var dx = e.changedTouches[0].clientX - tx0; tx0 = null; if (Math.abs(dx) > 45) { if (dx < 0) mdNext(); else mdPrev(); } }, { passive: true }); stTexts.forEach(function (el) { el.addEventListener("click", function () { if (mdIsActive() && el.classList.contains("is-front-md")) mdNext(); }); }); }; var mdApply = function () { var active = mdIsActive(); if (stSection) stSection.classList.toggle("is-mdeck", active); var texts = stepper.querySelector(".stepper-texts"); if (active) { // On reprend la main sur le conteneur : plus de carrousel horizontal ici. if (texts) { texts.classList.remove("mob-carousel"); var nav = texts.nextElementSibling; if (nav && nav.classList.contains("mob-nav")) nav.style.display = "none"; } stTexts.forEach(function (el) { el.style.opacity = ""; el.style.transition = ""; }); mdBuildUI(); if (mdUI) mdUI.style.display = ""; if (window.__cvcCarouselRefresh) window.__cvcCarouselRefresh(); mdOrder = stTexts.map(function (_, i) { return i; }); mdRender(); } else { if (mdUI) mdUI.style.display = "none"; mdClear(); if (window.__cvcCarouselRefresh) window.__cvcCarouselRefresh(); } }; window.__cvcStepperMobile = function (mode) { stMobile = (mode === "deck") ? "deck" : "slides"; try { localStorage.setItem("cvca-stepper-mobile", stMobile); } catch (e) {} mdApply(); }; var stSetup = function () { var canPin = window.matchMedia("(min-width: 921px)").matches && !reduceMotion; stPlaceImages(!canPin); if (canPin) { if (stSection) stSection.classList.remove("is-stacked"); stepper.style.height = (window.innerHeight * stN) + "px"; stEnabled = true; } else { if (stSection) stSection.classList.add("is-stacked"); stepper.style.height = ""; stImgs.style.transform = ""; resetCards(); stEnabled = false; setStep(0); } if (stStyle === "deck") { dkReset(); if (stEnabled) { dkCurrent = 0; dkRender(); } } stLayoutWheel(); stUpdate(); mdApply(); }; // exposé pour le panneau Tweaks : bascule encadré / flottant window.__cvcStepperStyle = function (style) { stStyle = style || "framed"; stApplyClass(); stImgs.style.transform = ""; resetCards(); if (stStyle === "deck") { dkReset(); if (stEnabled) { dkCurrent = 0; dkRender(); } } stLayoutWheel(); stUpdate(); }; stDots.forEach(function (d, i) { d.addEventListener("click", function () { var total = stepper.offsetHeight - window.innerHeight; if (total <= 0) return; var y = window.scrollY + stepper.getBoundingClientRect().top + (i / (stN - 1)) * total; window.scrollTo({ top: y, behavior: "smooth" }); }); }); // PILE : cliquer une carte pour switcher (scrolle jusqu'à sa position) stChildren.forEach(function (el, i) { el.addEventListener("click", function () { if (stStyle !== "deck" || !stEnabled) return; var total = stepper.offsetHeight - window.innerHeight; if (total <= 0) return; var cur = Math.round(stPos); var target = (i === cur) ? (i + 1) % stN : i; var y = window.scrollY + stepper.getBoundingClientRect().top + (target / (stN - 1)) * total; window.scrollTo({ top: y, behavior: "smooth" }); }); }); var stTick = false; window.addEventListener("scroll", function () { if (!stTick) { window.requestAnimationFrame(function () { stUpdate(); stTick = false; }); stTick = true; } }, { passive: true }); // ROUE : aimantation, au repos, la roue s'arrête PILE sur une image (jamais d'entre-deux) var stSnapT = null, stSnapping = false; var stSnap = function () { if (!stSnaps() || !stEnabled || stSnapping) return; var rect = stepper.getBoundingClientRect(); if (rect.top > 0 || rect.bottom < window.innerHeight) return; // section non épinglée var total = stepper.offsetHeight - window.innerHeight; if (total <= 0) return; var nearest = Math.round(stPos); var y = window.scrollY + rect.top + (nearest / (stN - 1)) * total; if (Math.abs(y - window.scrollY) < 1.5) return; stSnapping = true; window.scrollTo({ top: y, behavior: "smooth" }); window.setTimeout(function () { stSnapping = false; }, 560); }; window.addEventListener("scroll", function () { if (!stSnaps()) return; if (stSnapT) window.clearTimeout(stSnapT); stSnapT = window.setTimeout(stSnap, 150); }, { passive: true }); window.addEventListener("resize", stSetup); window.addEventListener("load", stSetup); stSetup(); } /* ---------- Carrousels mobiles génériques (≤700px) ---------- Sur mobile, les grilles denses deviennent des pistes horizontales à aimantation (scroll-snap) avec flèches + points, pour parcourir sans tout lire. Le desktop est strictement inchangé. */ (function () { var SEL = ".assure-grid, .services-bento, .masonry, .mosaic, .variant-grid, .pro-grid, .aides-grid, .process-flow, .stepper-texts"; var mqMob = window.matchMedia("(max-width: 700px)"); var ARROW_L = ''; var ARROW_R = ''; var carousels = []; document.querySelectorAll(SEL).forEach(function (el) { var slides = [].slice.call(el.children).filter(function (c) { return !c.classList.contains("process-comet"); }); if (slides.length < 3) return; carousels.push({ el: el, slides: slides, dots: null, nav: null, idx: 0, on: false, bound: false, arc: !reduceMotion && el.classList.contains("process-flow") }); }); if (!carousels.length) return; var sync = function (it) { if (!it.on) return; var er = it.el.getBoundingClientRect(); var cx = er.left + er.width / 2, best = 0, bd = Infinity; it.slides.forEach(function (s, i) { var r = s.getBoundingClientRect(); var off = (r.left + r.width / 2 - cx) / er.width; var d = Math.abs(r.left + r.width / 2 - cx); if (d < bd) { bd = d; best = i; } if (it.arc) s.style.setProperty("--arc", "rotate(" + (off * 6).toFixed(2) + "deg)"); }); it.idx = best; it.slides.forEach(function (s, i) { s.style.opacity = i === best ? "1" : "0.55"; }); if (it.dots) it.dots.forEach(function (d, i) { d.classList.toggle("is-active", i === best); }); }; var goTo = function (it, i) { i = Math.max(0, Math.min(it.slides.length - 1, i)); var s = it.slides[i]; var target = it.el.scrollLeft + s.getBoundingClientRect().left - it.el.getBoundingClientRect().left - (it.el.clientWidth - s.getBoundingClientRect().width) / 2; it.el.scrollTo({ left: target, behavior: reduceMotion ? "auto" : "smooth" }); }; var buildNav = function (it) { var nav = document.createElement("div"); nav.className = "mob-nav"; var prev = document.createElement("button"); prev.type = "button"; prev.className = "pro-arrow"; prev.innerHTML = ARROW_L; prev.setAttribute("aria-label", "Élément précédent"); prev.addEventListener("click", function () { goTo(it, it.idx - 1); }); var dots = document.createElement("div"); dots.className = "pro-dots"; it.dots = it.slides.map(function (_, i) { var b = document.createElement("button"); b.type = "button"; b.setAttribute("aria-label", "Aller à l'élément " + (i + 1)); b.addEventListener("click", function () { goTo(it, i); }); dots.appendChild(b); return b; }); var next = document.createElement("button"); next.type = "button"; next.className = "pro-arrow"; next.innerHTML = ARROW_R; next.setAttribute("aria-label", "Élément suivant"); next.addEventListener("click", function () { goTo(it, it.idx + 1); }); nav.appendChild(prev); nav.appendChild(dots); nav.appendChild(next); it.el.parentNode.insertBefore(nav, it.el.nextSibling); it.nav = nav; }; var enable = function (it) { var sec = it.el.closest && it.el.closest(".solution-stepper"); if (sec && sec.classList.contains("is-mdeck")) { disable(it); return; } if (it.on) return; it.on = true; it.el.classList.add("mob-carousel"); it.slides.forEach(function (s) { s.style.transition = "opacity .35s ease"; }); if (!it.nav) buildNav(it); it.nav.style.display = ""; if (!it.bound) { it.bound = true; var t = false; it.el.addEventListener("scroll", function () { if (!t) { window.requestAnimationFrame(function () { sync(it); t = false; }); t = true; } }, { passive: true }); } sync(it); }; var disable = function (it) { // Toujours nettoyer le DOM (même si l'état interne est désynchronisé avec la classe), // sinon .mob-carousel { display:flex !important } peut survivre sous le mode Deck. it.el.classList.remove("mob-carousel"); if (it.nav) it.nav.style.display = "none"; if (!it.on) return; it.on = false; it.slides.forEach(function (s) { s.style.opacity = ""; s.style.transition = ""; s.style.removeProperty("--arc"); }); }; var applyAll = function () { carousels.forEach(mqMob.matches ? enable : disable); }; window.__cvcCarouselRefresh = applyAll; if (mqMob.addEventListener) mqMob.addEventListener("change", applyAll); else if (mqMob.addListener) mqMob.addListener(applyAll); window.addEventListener("load", function () { carousels.forEach(sync); }); applyAll(); })(); /* ---------- Menu mobile : dropdown services ---------- */ var mmSvcT = document.querySelector(".mm-svc-toggle"); var mmSub = document.querySelector(".mm-sub"); if (mmSvcT && mmSub) { var mmOpen = function () { return mmSvcT.getAttribute("aria-expanded") === "true"; }; mmSvcT.addEventListener("click", function () { var open = mmOpen(); mmSvcT.setAttribute("aria-expanded", String(!open)); if (open) { mmSub.style.maxHeight = mmSub.scrollHeight + "px"; void mmSub.offsetHeight; mmSub.style.maxHeight = "0px"; } else { mmSub.style.maxHeight = mmSub.scrollHeight + "px"; } }); // une fois ouvert : plus de plafond, les titres peuvent passer à la ligne // (rotation d'écran, texte long) sans être rognés — le drawer défile. mmSub.addEventListener("transitionend", function (e) { if (e.propertyName === "max-height" && mmOpen()) mmSub.style.maxHeight = "none"; }); window.addEventListener("resize", function () { if (mmOpen()) mmSub.style.maxHeight = "none"; }); } /* ---------- Avis : initiales dérivées du nom de l'auteur ---------- Les lettres de la pastille ne sont PAS écrites en dur : elles sont calculées à partir du prénom + nom de l'auteur (1re lettre des deux premiers mots). À l'hydratation Supabase, il suffit de renseigner le nom dans ; les initiales suivent automatiquement. Exposé en global (window.cvcApplyReviewInitials) et rafraîchi si le DOM change. */ var reviewInitials = function (name) { var words = (name || "").trim().split(/[\s.]+/).filter(Boolean); var a = words[0] ? words[0].charAt(0) : ""; var b = words[1] ? words[1].charAt(0) : ""; return (a + b).toUpperCase(); }; var applyReviewInitials = function (root) { (root || document).querySelectorAll("[data-review-item]").forEach(function (item) { var av = item.querySelector("[data-review-initials]") || item.querySelector(".review-av"); var nameEl = item.querySelector("[data-review-author]") || item.querySelector(".review-meta b"); if (av && nameEl) av.textContent = reviewInitials(nameEl.textContent); // Teinte de la pastille : cycle sur 4 couleurs selon la position de la carte if (av) { var siblings = item.parentNode ? item.parentNode.querySelectorAll("[data-review-item]") : [item]; var pos = Array.prototype.indexOf.call(siblings, item); av.classList.remove("av-1", "av-2", "av-3", "av-4"); av.classList.add("av-" + ((pos % 4) + 1)); } }); }; window.cvcApplyReviewInitials = applyReviewInitials; applyReviewInitials(); // Filet de sécurité : si l'outil d'hydratation injecte les noms après coup, // on recalcule les initiales à chaque modification des cartes d'avis. var avisWrap = document.querySelector("[data-reviews]"); if (avisWrap && "MutationObserver" in window) { var avisMO = new MutationObserver(function () { applyReviewInitials(avisWrap); }); avisMO.observe(avisWrap, { childList: true, subtree: true, characterData: true }); } /* ---------- Avis : deck de cartes (façon « Solutions pros ») ---------- Pile de cartes désorganisée : la carte de devant s'envole vers la gauche au clic (ou via les flèches sous le deck), la suivante prend sa place. Robuste à 2-4 avis, auto-appliqué partout où existe [data-reviews]. */ var RV_CHEVRON = { prev: '', next: '' }; var RV_SIG = [ { a: 0, x: 0, y: 0 }, { a: -5, x: 4, y: -3.5 }, { a: 4.5, x: -4, y: 3.5 }, { a: -6.5, x: 6, y: 7 } ]; var rvPad = function (n) { return ("0" + n).slice(-2); }; document.querySelectorAll("[data-reviews]").forEach(function (track) { if (track.closest(".reviews-deck")) return; var cards = [].slice.call(track.querySelectorAll("[data-review-item]")); if (!cards.length) return; // Structure : deck > (pile = track) + nav var deck = document.createElement("div"); deck.className = "reviews-deck"; track.parentNode.insertBefore(deck, track); track.classList.remove("review-cards"); track.classList.add("review-stack"); deck.appendChild(track); cards.forEach(function (c) { c.classList.remove("reveal"); }); var nav = document.createElement("div"); nav.className = "reviews-nav"; var prev = document.createElement("button"); prev.type = "button"; prev.className = "reviews-arrow"; prev.innerHTML = RV_CHEVRON.prev; prev.setAttribute("aria-label", "Avis précédent"); var count = document.createElement("span"); count.className = "reviews-count"; var next = document.createElement("button"); next.type = "button"; next.className = "reviews-arrow"; next.innerHTML = RV_CHEVRON.next; next.setAttribute("aria-label", "Avis suivant"); nav.appendChild(prev); nav.appendChild(count); nav.appendChild(next); deck.appendChild(nav); if (cards.length < 2) nav.style.display = "none"; var order = cards.map(function (_, i) { return i; }); var busy = false; var render = function () { order.forEach(function (idx, depth) { var el = cards[idx]; if (!el) return; var s = RV_SIG[Math.min(depth, RV_SIG.length - 1)]; el.style.transform = "translate(" + s.x + "%, " + s.y + "%) rotate(" + s.a + "deg) scale(" + (1 - depth * 0.05).toFixed(3) + ")"; el.style.opacity = depth > 3 ? "0" : "1"; el.style.zIndex = String(60 - depth); el.style.filter = depth === 0 ? "none" : "blur(" + Math.min(4, depth * 1.4).toFixed(1) + "px)"; el.style.pointerEvents = depth === 0 ? "auto" : "none"; el.classList.toggle("is-front", depth === 0); }); count.innerHTML = "" + rvPad(order[0] + 1) + " / " + rvPad(cards.length); }; var advance = function () { if (busy || cards.length < 2) return; busy = true; var front = cards[order[0]]; front.classList.add("is-leaving"); var fin = function () { order.push(order.shift()); front.classList.remove("is-leaving"); render(); busy = false; }; if (reduceMotion) fin(); else setTimeout(fin, 320); }; var retreat = function () { if (busy || cards.length < 2) return; order.unshift(order.pop()); if (reduceMotion) { render(); return; } busy = true; var front = cards[order[0]]; front.classList.add("is-entering"); render(); void front.offsetWidth; window.requestAnimationFrame(function () { front.classList.remove("is-entering"); window.setTimeout(function () { busy = false; }, 560); }); }; prev.addEventListener("click", retreat); next.addEventListener("click", advance); cards.forEach(function (c) { c.addEventListener("click", function () { if (c.classList.contains("is-front")) advance(); }); }); render(); }); /* ---------- Année footer ---------- */ document.querySelectorAll("[data-year]").forEach(function (el) { el.textContent = new Date().getFullYear(); }); })(); /* ============================================================ STEPPER : les visuels SANS transparence remplissent tout le cadre. On lit le canal alpha de l'image (canvas) : opaque -> .img-fill (cover), détourée -> on ne touche à rien. Lecture impossible : on garde l'ancien rendu, sauf pour les JPEG (toujours opaques). ============================================================ */ (function () { var cache = {}; function hasAlpha(img) { var w = Math.min(48, img.naturalWidth || 0), h = Math.min(48, img.naturalHeight || 0); if (!w || !h) return null; try { var c = document.createElement("canvas"); c.width = w; c.height = h; var x = c.getContext("2d", { willReadFrequently: true }); x.drawImage(img, 0, 0, w, h); var d = x.getImageData(0, 0, w, h).data; for (var i = 3; i < d.length; i += 4) if (d[i] < 250) return true; return false; } catch (e) { return null; } } function mark(img) { var src = img.currentSrc || img.src; if (!src) return; var alpha = cache[src]; if (alpha === undefined) { alpha = hasAlpha(img); if (alpha === null) alpha = !/\.(jpe?g)(\?|#|$)/i.test(src); cache[src] = alpha; } img.classList.toggle("img-fill", !alpha); } function watch(img) { if (img.__fillWatched) return; img.__fillWatched = true; if (img.complete && img.naturalWidth) mark(img); img.addEventListener("load", function () { mark(img); }); new MutationObserver(function () { mark(img); }).observe(img, { attributes: true, attributeFilter: ["src", "srcset"] }); } function run() { [].forEach.call(document.querySelectorAll(".stepper-img > img, .stepper-text-media > img"), watch); } if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", run); else run(); })(); /* ============================================================ CHIFFRES CLÉS, compteur animé (0 → valeur) à l'entrée dans le viewport Fonctionne sur les valeurs hydratées ; en aperçu (token {{ ... }} non remplacé) la valeur de démonstration data-count-demo est utilisée. ============================================================ */ (function () { "use strict"; var SEL = ".about-numbers .n, .float-stat .n, .rating-big, [data-count]"; var reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches; var SP = /[\u00a0\u202f ]/; function parse(el) { var raw = el.textContent; if (raw.indexOf("{{") > -1) { var demo = el.getAttribute("data-count-demo"); if (!demo) return null; raw = raw.replace(/\{\{[^}]*\}\}/g, demo); } var m = raw.match(/-?\d[\d\u00a0\u202f ]*(?:[.,]\d+)?/); if (!m) return null; var numTxt = m[0].replace(/[\u00a0\u202f ]+$/, ""); var grp = SP.test(numTxt) ? numTxt.match(SP)[0] : ""; var plain = numTxt.replace(/[\u00a0\u202f ]/g, ""); var dec = 0, sep = ","; var dm = plain.match(/([.,])(\d+)$/); if (dm) { dec = dm[2].length; sep = dm[1]; plain = plain.replace(",", "."); } var value = parseFloat(plain); if (!isFinite(value)) return null; var i = raw.indexOf(m[0]); return { el: el, value: value, dec: dec, sep: sep, grp: grp, before: raw.slice(0, i), after: raw.slice(i + m[0].length) }; } function fmt(s, v) { var t = (s.dec ? v.toFixed(s.dec) : String(Math.round(v))).split("."); if (s.grp) t[0] = t[0].replace(/\B(?=(\d{3})+(?!\d))/g, s.grp); return s.before + (t[1] ? t[0] + s.sep + t[1] : t[0]) + s.after; } function start(s) { if (s.done) return; s.done = true; if (reduce) { s.el.textContent = fmt(s, s.value); return; } var dur = 1250, t0 = 0, BLUR = 5; s.el.style.willChange = "filter"; function step(now) { if (!t0) t0 = now; var p = Math.min((now - t0) / dur, 1); var e = p * p * (3 - 2 * p); // smoothstep : le chiffre monte jusqu'au tout dernier instant s.el.textContent = fmt(s, s.value * e); // le flou se résorbe progressivement et n'est net qu'à l'arrivée s.el.style.filter = "blur(" + (BLUR * Math.pow(1 - e, 0.65)).toFixed(2) + "px)"; s.el.style.opacity = (0.5 + 0.5 * Math.pow(e, 0.7)).toFixed(3); if (p < 1) requestAnimationFrame(step); else { s.el.textContent = fmt(s, s.value); s.el.style.removeProperty("filter"); s.el.style.removeProperty("opacity"); s.el.style.removeProperty("will-change"); } } requestAnimationFrame(step); } function run() { var items = []; [].forEach.call(document.querySelectorAll(SEL), function (el) { if (el.__cvcCount) return; var s = parse(el); if (!s) return; el.__cvcCount = s; el.style.fontVariantNumeric = "tabular-nums"; items.push(s); }); if (!items.length) return; items.forEach(function (s) { s.el.textContent = fmt(s, 0); }); if (!("IntersectionObserver" in window)) { items.forEach(start); return; } var io = new IntersectionObserver(function (entries) { entries.forEach(function (e) { if (!e.isIntersecting) return; io.unobserve(e.target); setTimeout(function () { start(e.target.__cvcCount); }, 220); }); }, { threshold: 0.45, rootMargin: "0px 0px -8% 0px" }); items.forEach(function (s) { io.observe(s.el); }); } if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", run); else run(); })(); /* ============================================================ CERTIFICATIONS, bandeau défilant dès 4 qualifications Le markup livré reste plat : .certif-row[data-certifications] > .certif-logo[data-certification-item] (un gabarit, dupliqué par le CRM). C'est ici qu'on choisit rangée centrée ou bandeau, et qu'on fabrique les copies nécessaires à une boucle sans couture. ============================================================ */ (function () { "use strict"; var MIN = 4, SPEED = 46; /* px par seconde */ var row = document.querySelector("[data-certifications]") || document.querySelector(".certif-row"); if (!row) return; var reduce = window.matchMedia("(prefers-reduced-motion: reduce)"); function baseItems() { return [].slice.call(row.children).filter(function (el) { return el.nodeType === 1 && !el.hasAttribute("data-certif-clone"); }); } function clearClones() { [].slice.call(row.querySelectorAll("[data-certif-clone]")).forEach(function (n) { n.parentNode.removeChild(n); }); } function unwrap() { row.removeAttribute("data-marquee"); row.style.removeProperty("--certif-dur"); var vp = row.parentNode; if (vp && vp.classList && vp.classList.contains("certif-marquee")) { vp.parentNode.insertBefore(row, vp); vp.parentNode.removeChild(vp); } } function wrap() { var vp = row.parentNode; if (vp && vp.classList && vp.classList.contains("certif-marquee")) return vp; vp = document.createElement("div"); vp.className = "certif-marquee"; row.parentNode.insertBefore(vp, row); vp.appendChild(row); return vp; } function setup() { var items = baseItems(); clearClones(); if (items.length < MIN || reduce.matches) { unwrap(); return; } var vp = wrap(); row.setAttribute("data-marquee", ""); var unit = 0; items.forEach(function (el) { var cs = window.getComputedStyle(el); unit += el.getBoundingClientRect().width + (parseFloat(cs.marginLeft) || 0) + (parseFloat(cs.marginRight) || 0); }); if (!unit) return; /* le demi-bandeau doit couvrir la fenêtre : sinon un blanc apparaît au bouclage */ var reps = Math.max(1, Math.ceil((vp.offsetWidth || window.innerWidth) / unit)); var frag = document.createDocumentFragment(); for (var r = 0; r < reps * 2 - 1; r++) { items.forEach(function (el) { var c = el.cloneNode(true); c.setAttribute("data-certif-clone", ""); c.setAttribute("aria-hidden", "true"); c.removeAttribute("data-certification-item"); var img = c.querySelector("img"); if (img) { img.setAttribute("alt", ""); img.removeAttribute("data-certification-logo"); } frag.appendChild(c); }); } row.appendChild(frag); row.style.setProperty("--certif-dur", Math.max(16, Math.round(unit * reps / SPEED)) + "s"); } setup(); var t; window.addEventListener("resize", function () { clearTimeout(t); t = setTimeout(setup, 200); }, { passive: true }); if (reduce.addEventListener) reduce.addEventListener("change", setup); window.CVCCertifs = { refresh: setup }; })(); ; /* ============================================================ DEVIS, formulaire multi-étapes + liens de démo ============================================================ */ (function () { "use strict"; /* ---- Liens de démonstration (mentions légales, confidentialité, réseaux) ---- */ function demoToast() { var t = document.querySelector(".demo-toast"); if (!t) { t = document.createElement("div"); t.className = "demo-toast"; t.textContent = "Ceci est un site de démonstration."; document.body.appendChild(t); } clearTimeout(t._h); // reflow pour rejouer la transition si le toast est déjà visible void t.offsetWidth; t.classList.add("show"); t._h = setTimeout(function () { t.classList.remove("show"); }, 2600); } document.addEventListener("click", function (e) { var a = e.target.closest('a[href="#"]'); if (a) { e.preventDefault(); demoToast(); } }); /* ---- Formulaire multi-étapes ---- */ var form = document.querySelector("[data-devis]"); if (!form) return; var reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches; var body = form.querySelector("[data-devis-body]"); var done = form.querySelector("[data-devis-done]"); var panels = [].slice.call(form.querySelectorAll("[data-panel]")); var stepItems = [].slice.call(form.querySelectorAll("[data-step-item]")); var mobStep = form.querySelector("[data-step-mobile]"); var prev = form.querySelector("[data-prev]"); var next = form.querySelector("[data-next]"); var nextLabel = form.querySelector("[data-next-label]"); var names = ["Votre projet", "Votre logement", "Votre délai", "Vos coordonnées"]; var N = panels.length; var cur = 0; function val(sel, p) { var el = (p || form).querySelector(sel); return el ? el.value.trim() : ""; } // Un « Continuer » n'est actif que si l'étape courante est valide. function panelValid(i) { var p = panels[i]; if (i === 0) return !!p.querySelector(".dv-tile.is-sel"); // surface et année sont des curseurs facultatifs : seul le statut est obligatoire if (i === 1) return !!p.querySelector(".dv-chips .is-sel"); if (i === 2) return !!p.querySelector(".dv-chips .is-sel"); if (i === 3) { // obligatoires : prénom, nom, téléphone, code postal (l'e-mail est facultatif) var ok = ["#dv-prenom", "#dv-nom", "#dv-tel", "#dv-cp"].every(function (s) { return val(s, p); }); var c = p.querySelector('input[type="checkbox"]'); return ok && c && c.checked; } return true; } function updateNext() { if (next) next.disabled = !panelValid(cur); } function scrollToForm(force) { var top = form.getBoundingClientRect().top; if (force || top < 0 || top > 140) { var y = window.scrollY + top - 96; window.scrollTo({ top: y < 0 ? 0 : y, behavior: reduceMotion ? "auto" : "smooth" }); } } function render(scroll) { panels.forEach(function (p, i) { p.classList.toggle("is-active", i === cur); }); stepItems.forEach(function (s, i) { s.classList.toggle("is-active", i === cur); s.classList.toggle("is-done", i < cur); }); if (prev) prev.style.visibility = cur === 0 ? "hidden" : "visible"; if (nextLabel) nextLabel.textContent = cur === N - 1 ? "Envoyer ma demande" : "Continuer"; if (mobStep) { var mNum = mobStep.querySelector("[data-mob-num]"); if (mNum) { mNum.textContent = cur + 1; var mCount = mobStep.querySelector("[data-mob-count]"); var mName = mobStep.querySelector("[data-mob-name]"); if (mCount) mCount.textContent = "Étape " + (cur + 1) + " sur " + N; if (mName) mName.textContent = names[cur]; var mArcs = mobStep.querySelectorAll("[data-arc]"); for (var ai = 0; ai < mArcs.length; ai++) mArcs[ai].classList.toggle("is-on", ai <= cur); } else { mobStep.textContent = "Étape " + (cur + 1) + " sur " + N + " · " + names[cur]; } } updateNext(); if (scroll) scrollToForm(false); } function go(n) { var t = Math.max(0, Math.min(N - 1, n)); if (t !== cur) { cur = t; render(true); } } /* Tuiles services, multi-sélection */ form.querySelectorAll("[data-svc]").forEach(function (tile) { tile.addEventListener("click", function () { var on = tile.classList.toggle("is-sel"); tile.setAttribute("aria-pressed", on ? "true" : "false"); updateNext(); }); }); /* Groupes à choix unique (type, statut, revenu, délai) */ form.querySelectorAll("[data-single]").forEach(function (group) { var opts = [].slice.call(group.querySelectorAll("[data-opt]")); opts.forEach(function (o) { o.addEventListener("click", function () { opts.forEach(function (x) { x.classList.remove("is-sel"); x.setAttribute("aria-pressed", "false"); }); o.classList.add("is-sel"); o.setAttribute("aria-pressed", "true"); updateNext(); }); }); }); /* Champs texte / cases : revalider en continu */ form.addEventListener("input", updateNext); form.addEventListener("change", updateNext); if (prev) prev.addEventListener("click", function () { go(cur - 1); }); if (next) next.addEventListener("click", function () { if (next.disabled) return; if (cur < N - 1) go(cur + 1); else submit(); }); function submit() { if (body) body.style.display = "none"; if (done) done.style.display = "block"; scrollToForm(true); } render(false); })(); ; /* ============================================================ CVC, page service climatisation : section « Solutions pros » Deux affichages des types de commerce, basculés par le panneau Tweaks : • « Slider » : carte imagée + texte sur le côté, défilement horizontal (auto). • « Deck » : les 4 cartes empilées en désordre, que l'on feuillette. ============================================================ */ (function () { "use strict"; var reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches; var stage = document.querySelector(".pro-stage"); if (!stage) return; var mode = "deck"; /* ---------- Slider imagé ---------- */ var sl = stage.querySelector("[data-pro-slider]"); var slTrack = sl ? sl.querySelector("[data-pro-track]") : null; var slItems = slTrack ? [].slice.call(slTrack.children) : []; var slDots = sl ? [].slice.call(sl.querySelectorAll("[data-pro-dots] button")) : []; var slIdx = 0, slPaused = false, slAcc = 0, slLast = 0, slDur = 4800; var slRender = function () { if (slTrack) slTrack.style.transform = "translateX(" + (-slIdx * 100) + "%)"; slDots.forEach(function (d, i) { d.classList.toggle("is-active", i === slIdx); }); }; var slGo = function (n) { if (!slItems.length) return; slIdx = (n + slItems.length) % slItems.length; slAcc = 0; slRender(); }; if (sl) { var slPrev = sl.querySelector("[data-pro-prev]"); var slNext = sl.querySelector("[data-pro-next]"); if (slPrev) slPrev.addEventListener("click", function () { slGo(slIdx - 1); }); if (slNext) slNext.addEventListener("click", function () { slGo(slIdx + 1); }); slDots.forEach(function (d, i) { d.addEventListener("click", function () { slGo(i); }); }); sl.addEventListener("mouseenter", function () { slPaused = true; }); sl.addEventListener("mouseleave", function () { slPaused = false; }); var slFrame = function (ts) { if (!slLast) slLast = ts; var dt = ts - slLast; slLast = ts; if (mode === "slider" && !slPaused && slItems.length > 1) { slAcc += dt; if (slAcc >= slDur) slGo(slIdx + 1); } window.requestAnimationFrame(slFrame); }; if (!reduce) window.requestAnimationFrame(slFrame); slRender(); } /* ---------- Deck désorganisé ---------- */ var dk = stage.querySelector("[data-pro-deck]"); var dkStack = dk ? dk.querySelector("[data-pro-stack]") : null; var dkCards = dkStack ? [].slice.call(dkStack.querySelectorAll("[data-pro-card]")) : []; var dkCount = dk ? dk.querySelector("[data-pro-count]") : null; var order = dkCards.map(function (_, i) { return i; }); var dkSig = [ { a: 0, x: 0, y: 0 }, { a: -5, x: 4, y: -3.5 }, { a: 4.5, x: -4, y: 3.5 }, { a: -6.5, x: 6, y: 7 } ]; var pad = function (n) { return ("0" + n).slice(-2); }; var renderDeck = function () { order.forEach(function (cardIdx, depth) { var el = dkCards[cardIdx]; if (!el) return; var s = dkSig[Math.min(depth, dkSig.length - 1)]; el.style.transform = "translate(" + s.x + "%, " + s.y + "%) rotate(" + s.a + "deg) scale(" + (1 - depth * 0.05).toFixed(3) + ")"; el.style.opacity = depth > 3 ? "0" : "1"; el.style.zIndex = String(60 - depth); el.style.filter = depth === 0 ? "none" : "blur(" + Math.min(4, depth * 1.4).toFixed(1) + "px)"; el.style.pointerEvents = depth === 0 ? "auto" : "none"; el.classList.toggle("is-front", depth === 0); }); if (dkCount && dkCards.length) { dkCount.innerHTML = "" + pad(order[0] + 1) + " / " + pad(dkCards.length); } }; var dkBusy = false; var dkNext = function () { if (dkBusy || dkCards.length < 2) return; dkBusy = true; var front = dkCards[order[0]]; front.classList.add("is-leaving"); var advance = function () { order.push(order.shift()); front.classList.remove("is-leaving"); renderDeck(); dkBusy = false; }; if (reduce) advance(); else setTimeout(advance, 320); }; var dkPrev = function () { // animation INVERSE : la carte du fond revient EN GLISSANT depuis la gauche if (dkBusy || dkCards.length < 2) return; order.unshift(order.pop()); if (reduce) { renderDeck(); return; } dkBusy = true; var front = dkCards[order[0]]; front.classList.add("is-entering"); // hors-champ à gauche, sans transition renderDeck(); // les autres cartes reculent d'un cran void front.offsetWidth; // reflow requestAnimationFrame(function () { front.classList.remove("is-entering"); setTimeout(function () { dkBusy = false; }, 560); }); }; if (dk) { var dkNextBtn = dk.querySelector("[data-pro-next]"); var dkPrevBtn = dk.querySelector("[data-pro-prev]"); if (dkNextBtn) dkNextBtn.addEventListener("click", dkNext); if (dkPrevBtn) dkPrevBtn.addEventListener("click", dkPrev); dkCards.forEach(function (c) { c.addEventListener("click", function () { if (c.classList.contains("is-front")) dkNext(); }); }); } /* ---------- Bascule de mode (panneau Tweaks) ---------- */ try { var saved = localStorage.getItem("cvca-pro-style"); if (saved) mode = saved; } catch (e) {} var applyMode = function (m) { mode = (m === "deck") ? "deck" : "slider"; stage.classList.toggle("pro-mode-deck", mode === "deck"); stage.classList.toggle("pro-mode-slider", mode === "slider"); if (mode === "deck") renderDeck(); else slRender(); }; window.__cvcProStyle = applyMode; applyMode(mode); })(); /* ============================================================ HERO : formulaire court en étapes 1 équipements (plusieurs choix) · 2 besoin (un choix : passe seul à l'étape suivante) · 3 logement · 4 délai · 5 coordonnées. Les questions restent des .field à plat dans [data-fake-form] ; le script n'affiche que celles de l'étape en cours. ============================================================ */ (function () { "use strict"; document.querySelectorAll(".hero-form").forEach(function (card) { var names = ["Vos équipements", "Votre besoin", "Votre logement", "Votre délai", "Vos coordonnées"]; var bars = [].slice.call(card.querySelectorAll(".hf-bars i")); var N = bars.length || names.length, cur = 1, timer = null; var prev = card.querySelector(".hf-prev"), next = card.querySelector(".hf-next"); var num = card.querySelector(".hf-num"), name = card.querySelector(".hf-name"); card.classList.add("hf-js"); var valid = function (step) { var ok = true; card.querySelectorAll(".hf-s" + step + ".hf-req").forEach(function (f) { var chips = f.querySelector(".chips-select"); if (chips) { if (!chips.querySelector(".chip-opt.active")) ok = false; } else { var inp = f.querySelector("input, textarea"); if (!inp || !inp.value.trim()) ok = false; } }); return ok; }; var update = function () { var ok = valid(cur); if (next) next.disabled = !ok; var sub = card.querySelector("[data-submit]"); if (sub && cur === N) sub.disabled = !ok; }; // hauteur fixe : la carte prend la hauteur de l'étape la plus haute, // et les boutons restent au même endroit d'une étape à l'autre var form = card.querySelector("[data-fake-form]"), nav = card.querySelector(".hf-nav"); var maxH = 0; var fieldsH = function () { if (!form || !nav) return 0; nav.style.marginTop = "0px"; return nav.getBoundingClientRect().top - form.getBoundingClientRect().top; }; var setStep = function (n) { for (var s = 1; s <= N; s++) card.classList.toggle("hf-at-" + s, s === n); card.classList.toggle("hf-last", n === N); }; var measure = function () { if (!form || !nav || !card.offsetParent) { maxH = 0; if (nav) nav.style.marginTop = ""; return; } maxH = 0; for (var s = 1; s <= N; s++) { setStep(s); maxH = Math.max(maxH, fieldsH()); } setStep(cur); }; var pin = function () { if (!nav) return; if (!maxH) { nav.style.marginTop = ""; return; } nav.style.marginTop = Math.max(0, maxH - fieldsH()) + "px"; }; var render = function () { for (var s = 1; s <= N; s++) card.classList.toggle("hf-at-" + s, s === cur); card.classList.toggle("hf-last", cur === N); if (num) num.textContent = cur; if (name) name.textContent = names[cur - 1] || ""; bars.forEach(function (b, i) { b.classList.toggle("is-on", i < cur); }); if (prev) prev.style.visibility = cur === 1 ? "hidden" : "visible"; update(); pin(); }; var go = function (n) { clearTimeout(timer); cur = Math.max(1, Math.min(N, n)); render(); }; if (prev) prev.addEventListener("click", function () { go(cur - 1); }); if (next) next.addEventListener("click", function () { if (cur < N && valid(cur)) go(cur + 1); }); card.addEventListener("click", function (e) { setTimeout(update, 0); // étape à choix unique (votre besoin) : un clic sur un choix passe à l'étape suivante var chip = e.target.closest(".chip-opt"); var field = chip && chip.closest(".field"); if (chip && field && field.classList.contains("hf-s2") && cur === 2 && !chip.closest(".is-multi")) { clearTimeout(timer); timer = setTimeout(function () { if (cur === 2 && valid(2)) go(3); }, 280); } }); card.addEventListener("input", update); var remeasure = function () { measure(); pin(); }; window.addEventListener("resize", function () { clearTimeout(card.__hfR); card.__hfR = setTimeout(remeasure, 120); }); window.addEventListener("load", remeasure); if (document.fonts && document.fonts.ready) document.fonts.ready.then(remeasure); // curseur de surface : affiche la valeur (300 = « 300 m² et + ») card.querySelectorAll('input[type="range"]').forEach(function (r) { var out = r.parentNode.querySelector(".hf-range-val"); var show = function () { if (!out) return; var v = parseInt(r.value, 10), max = parseInt(r.max, 10); out.textContent = v + " m²" + (v >= max ? " et +" : ""); r.style.setProperty("--fill", ((v - r.min) / (max - r.min) * 100) + "%"); }; r.addEventListener("input", show); show(); }); measure(); render(); }); })(); /* ============================================================ CURSEURS (surface, année) des deux formulaires. Le curseur écrit sa valeur dans le champ caché qui le précède (#hf-surface, #dv-annee…), et SEULEMENT une fois touché : tant qu'on n'y a pas touché, rien ne part — une valeur par défaut se lirait comme une réponse du visiteur. ============================================================ */ (function () { "use strict"; document.querySelectorAll(".curseur-range").forEach(function (r) { var champ = r.closest(".curseur"); var cible = document.getElementById(r.getAttribute("data-cible")); var sortie = champ ? champ.querySelector(".curseur-val") : null; var unite = r.getAttribute("data-unite") || ""; var libMin = r.getAttribute("data-min-libelle"); var min = parseFloat(r.min), max = parseFloat(r.max); var peindre = function () { var v = parseFloat(r.value); r.style.setProperty("--fill", ((v - min) / (max - min) * 100) + "%"); }; var ecrire = function () { var v = parseFloat(r.value), txt, brut; if (v >= max && unite) { txt = v + " " + unite + " et +"; brut = v + "+"; } else if (v <= min && libMin) { txt = libMin; brut = libMin; } else { txt = unite ? v + " " + unite : String(v); brut = String(v); } if (sortie) sortie.textContent = txt; if (cible) cible.value = brut; if (champ) champ.classList.add("is-touche"); peindre(); }; r.addEventListener("input", ecrire); r.addEventListener("change", ecrire); peindre(); }); })(); /* ============================================================ VIDÉOS : sans son, jamais. Elles jouent en boucle quand elles sont à l'écran et s'arrêtent sinon (aucune ne se charge hors de vue). Si le navigateur refuse la lecture (économie d'énergie d'un iPhone…), les commandes apparaissent pour la lancer au doigt. ============================================================ */ (function () { "use strict"; var vids = [].slice.call(document.querySelectorAll("video[data-video-auto]")); if (!vids.length) return; var calme = window.matchMedia("(prefers-reduced-motion: reduce)").matches; var lancer = function (v) { v.muted = true; v.defaultMuted = true; v.volume = 0; var p = v.play(); if (p && p.catch) p.catch(function (e) { if (e && e.name === "NotAllowedError") v.controls = true; }); }; vids.forEach(function (v) { v.muted = true; v.defaultMuted = true; v.setAttribute("muted", ""); v.addEventListener("volumechange", function () { if (!v.muted) v.muted = true; }); if (calme) v.controls = true; }); if (calme) return; if (!("IntersectionObserver" in window)) { vids.forEach(lancer); return; } var io = new IntersectionObserver(function (entrees) { entrees.forEach(function (e) { if (e.isIntersecting) lancer(e.target); else if (!e.target.paused) e.target.pause(); }); }, { threshold: 0.25 }); vids.forEach(function (v) { io.observe(v); }); })(); /* ============================================================ CARTES EN PILE SUR MOBILE ([data-deck-mobile]) : même pile que le deck des avis — la carte de devant s'envole au tap ou aux flèches, la suivante prend sa place. Au-dessus de 760 px, la grille d'origine revient telle quelle. ============================================================ */ (function () { "use strict"; var SIG = [{ a: 0, x: 0, y: 0 }, { a: -5, x: 4, y: -3.5 }, { a: 4.5, x: -4, y: 3.5 }, { a: -6.5, x: 6, y: 7 }]; var CHEV = { prev: '', next: '' }; var mq = window.matchMedia("(max-width: 760px)"); var calme = window.matchMedia("(prefers-reduced-motion: reduce)").matches; var pad = function (n) { return ("0" + n).slice(-2); }; document.querySelectorAll("[data-deck-mobile]").forEach(function (grille) { var cartes = [].slice.call(grille.children); if (cartes.length < 2) return; var nav = document.createElement("div"); nav.className = "reviews-nav mdeck-nav"; nav.innerHTML = ''; grille.parentNode.insertBefore(nav, grille.nextSibling); var boutons = nav.querySelectorAll("button"), compteur = nav.querySelector(".reviews-count"); var ordre = cartes.map(function (_, i) { return i; }), occupe = false, actif = false; var dessiner = function () { ordre.forEach(function (idx, prof) { var el = cartes[idx], s = SIG[Math.min(prof, SIG.length - 1)]; el.style.transform = "translate(" + s.x + "%, " + s.y + "%) rotate(" + s.a + "deg) scale(" + (1 - prof * 0.05).toFixed(3) + ")"; el.style.opacity = prof > 3 ? "0" : "1"; el.style.zIndex = String(60 - prof); el.style.filter = prof === 0 ? "none" : "blur(" + Math.min(4, prof * 1.4).toFixed(1) + "px)"; el.style.pointerEvents = prof === 0 ? "auto" : "none"; el.classList.toggle("is-front", prof === 0); }); compteur.innerHTML = "" + pad(ordre[0] + 1) + " / " + pad(cartes.length); }; var effacer = function () { cartes.forEach(function (el) { ["transform", "opacity", "zIndex", "filter", "pointerEvents"].forEach(function (k) { el.style[k] = ""; }); el.classList.remove("is-front", "is-leaving", "is-entering"); }); }; var avancer = function () { if (!actif || occupe) return; occupe = true; var devant = cartes[ordre[0]]; devant.classList.add("is-leaving"); var fin = function () { ordre.push(ordre.shift()); devant.classList.remove("is-leaving"); dessiner(); occupe = false; }; if (calme) fin(); else setTimeout(fin, 320); }; var reculer = function () { if (!actif || occupe) return; ordre.unshift(ordre.pop()); if (calme) { dessiner(); return; } occupe = true; var devant = cartes[ordre[0]]; devant.classList.add("is-entering"); dessiner(); void devant.offsetWidth; window.requestAnimationFrame(function () { devant.classList.remove("is-entering"); window.setTimeout(function () { occupe = false; }, 560); }); }; boutons[0].addEventListener("click", reculer); boutons[1].addEventListener("click", avancer); cartes.forEach(function (c) { c.addEventListener("click", function () { if (actif && c.classList.contains("is-front")) avancer(); }); }); var appliquer = function () { actif = mq.matches; grille.classList.toggle("is-mdeck", actif); nav.style.display = actif ? "" : "none"; if (actif) { cartes.forEach(function (c) { c.classList.add("is-visible"); }); dessiner(); } else effacer(); }; if (mq.addEventListener) mq.addEventListener("change", appliquer); else if (mq.addListener) mq.addListener(appliquer); appliquer(); }); })();

Blog

Climatisation en copropriété à Paris : comment obtenir l'autorisation