(function(){if(window.__sylen_chrome_ran)return;window.__sylen_chrome_ran=true; (function() { 'use strict'; /* ── 0. Navbar: hide on scroll down, show on scroll up ── */ var navWrap = document.getElementById('navbar'); if (navWrap) { var lastScrollY = 0; var onScroll = function() { var currentY = window.scrollY; var scrolled = currentY > 60; navWrap.classList.toggle('scrolled', scrolled); /* Hide when scrolling down, show when scrolling up */ if (currentY > lastScrollY && currentY > 120) { navWrap.classList.add('nav-hidden'); } else { navWrap.classList.remove('nav-hidden'); } lastScrollY = currentY; }; window.addEventListener('scroll', onScroll, { passive: true }); onScroll(); } /* ── 1. Mobile menu (SVG hamburger → X) ── */ var toggle = document.getElementById('mobileToggle'); var menu = document.getElementById('mobileMenu'); if (toggle && menu) { var hamburgerSVG = ''; var closeSVG = ''; toggle.addEventListener('click', function() { var isOpen = menu.classList.toggle('active'); toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false'); toggle.innerHTML = isOpen ? closeSVG : hamburgerSVG; toggle.setAttribute('aria-label', isOpen ? 'Fermer le menu' : 'Ouvrir le menu'); }); document.addEventListener('click', function(e) { if (!menu.contains(e.target) && !toggle.contains(e.target) && menu.classList.contains('active')) { menu.classList.remove('active'); toggle.setAttribute('aria-expanded', 'false'); toggle.innerHTML = hamburgerSVG; toggle.setAttribute('aria-label', 'Ouvrir le menu'); } }); } /* ── 4. FAQ Accordion ── */ var faqItems = document.querySelectorAll('.faq-item-modern'); faqItems.forEach(function(item) { var head = item.querySelector('.faq-head'); var body = item.querySelector('.faq-body'); var inner = item.querySelector('.faq-body-inner'); if (!head || !body || !inner) return; head.addEventListener('click', function() { var isOpen = head.getAttribute('aria-expanded') === 'true'; faqItems.forEach(function(other) { var oh = other.querySelector('.faq-head'); var ob = other.querySelector('.faq-body'); if (oh && ob && oh !== head) { oh.setAttribute('aria-expanded', 'false'); ob.style.height = '0'; } }); if (isOpen) { head.setAttribute('aria-expanded', 'false'); body.style.height = '0'; } else { head.setAttribute('aria-expanded', 'true'); body.style.height = inner.scrollHeight + 'px'; } }); }); /* ── 5. ROI Calculator (3 sliders + gauge + 3 tabs) ── */ (function(){ var roiCalls = document.getElementById('roi-calls'); var roiBasket = document.getElementById('roi-basket'); var roiRate = document.getElementById('roi-rate'); var roiCallsDisplay = document.getElementById('roi-calls-display'); var roiBasketDisplay = document.getElementById('roi-basket-display'); var roiRateDisplay = document.getElementById('roi-rate-display'); var roiAmount = document.getElementById('roi-amount'); var roiGaugeLabel = document.querySelector('.roi-gauge-label'); var roiStat1Val = document.getElementById('roi-stat1-val'); var roiStat1Label = document.getElementById('roi-stat1-label'); var roiStat2Val = document.getElementById('roi-stat2-val'); var roiStat2Label = document.getElementById('roi-stat2-label'); var roiBubbles = document.querySelectorAll('.roi-bubble-opt'); var roiTabs = document.querySelectorAll('.roi-tab'); var gaugeFill = document.querySelector('.roi-gauge-fill'); var allSliders = [roiCalls, roiBasket, roiRate]; var currentPeriod = 'monthly'; var gaugeLen = Math.PI * 80; function updateTrack(slider){ if(!slider) return; var pct = ((slider.value - slider.min) / (slider.max - slider.min)) * 100; var color = slider.classList.contains('roi-range-pink') ? '#FF91E4' : '#068FFF'; slider.style.background = 'linear-gradient(to right, '+color+' 0%, '+color+' '+pct+'%, #EAEAEF '+pct+'%, #EAEAEF 100%)'; } function animateValue(el, start, end, dur, suffix){ if(!el) return; var sfx = suffix || ' \u20AC'; var startTime = null; function step(ts){ if(!startTime) startTime = ts; var p = Math.min((ts - startTime) / dur, 1); var eased = 1 - Math.pow(1 - p, 3); var v = Math.round(start + (end - start) * eased); el.textContent = v.toLocaleString('fr-FR') + sfx; if(p < 1) requestAnimationFrame(step); } requestAnimationFrame(step); } function calcRoi(){ var calls = roiCalls ? parseInt(roiCalls.value, 10) || 0 : 0; var basket = roiBasket ? parseInt(roiBasket.value, 10) || 0 : 0; var rate = roiRate ? parseInt(roiRate.value, 10) || 0 : 0; var daily = Math.round(calls * (rate / 100) * basket); var monthly = daily * 22; var yearly = monthly * 12; var costM = 49, costY = costM * 12; var roiM = monthly > 0 ? Math.round(monthly / costM) : 0; var roiY = yearly > 0 ? Math.round(yearly / costY) : 0; var callsMonth = calls * 22; // Update slider displays if(roiCallsDisplay) roiCallsDisplay.textContent = calls; if(roiBasketDisplay) roiBasketDisplay.textContent = basket + ' \u20AC'; if(roiRateDisplay) roiRateDisplay.textContent = rate + ' %'; // Update slider tracks allSliders.forEach(updateTrack); // Determine display based on tab var gaugeVal, gaugeMax, gaugeSuffix, gaugeLabelText; var s1val, s1label, s2val, s2label; if(currentPeriod === 'monthly'){ gaugeVal = monthly; gaugeMax = 50000; gaugeSuffix = ' \u20AC'; gaugeLabelText = 'CA r\u00E9cup\u00E9r\u00E9 par mois'; s1val = '49 \u20AC/mois'; s1label = 'Co\u00FBt Sylen'; s2val = 'x' + roiM; s2label = 'Retour sur investissement'; } else if(currentPeriod === 'yearly'){ gaugeVal = yearly; gaugeMax = 500000; gaugeSuffix = ' \u20AC'; gaugeLabelText = 'CA r\u00E9cup\u00E9r\u00E9 par an'; s1val = '588 \u20AC/an'; s1label = 'Co\u00FBt Sylen'; s2val = 'x' + roiY; s2label = 'Retour sur investissement'; } else { gaugeVal = roiM; gaugeMax = 500; gaugeSuffix = 'x'; gaugeLabelText = 'Retour sur investissement'; s1val = callsMonth.toLocaleString('fr-FR') + ' /mois'; s1label = 'Appels trait\u00E9s'; s2val = rate + ' %'; s2label = 'Taux de conversion'; } // Update gauge label if(roiGaugeLabel) roiGaugeLabel.textContent = gaugeLabelText; // Animate amount var prev = parseInt((roiAmount ? roiAmount.textContent : '0').replace(/[^\dx]/g, ''), 10) || 0; animateValue(roiAmount, prev, gaugeVal, 500, gaugeSuffix); // Animate gauge fill var pct = Math.min(gaugeVal / gaugeMax, 1); if(gaugeFill){ gaugeFill.style.strokeDasharray = gaugeLen; gaugeFill.style.strokeDashoffset = gaugeLen * (1 - pct); } // Update stats if(roiStat1Val) roiStat1Val.innerHTML = s1val; if(roiStat1Label) roiStat1Label.textContent = s1label; if(roiStat2Val) roiStat2Val.innerHTML = s2val; if(roiStat2Label) roiStat2Label.textContent = s2label; } // All 3 sliders allSliders.forEach(function(s){ if(s) s.addEventListener('input', calcRoi); }); // Sector presets - set all 3 sliders roiBubbles.forEach(function(btn){ btn.addEventListener('click', function(){ roiBubbles.forEach(function(b){ b.classList.remove('active'); b.setAttribute('aria-pressed','false'); }); btn.classList.add('active'); btn.setAttribute('aria-pressed','true'); if(roiCalls) roiCalls.value = parseInt(btn.getAttribute('data-calls'), 10); if(roiBasket) roiBasket.value = parseInt(btn.getAttribute('data-basket'), 10); if(roiRate) roiRate.value = parseInt(btn.getAttribute('data-rate'), 10); calcRoi(); }); }); // Period tabs (3 tabs) roiTabs.forEach(function(tab){ tab.addEventListener('click', function(){ roiTabs.forEach(function(t){ t.classList.remove('active'); t.setAttribute('aria-selected','false'); }); tab.classList.add('active'); tab.setAttribute('aria-selected','true'); currentPeriod = tab.getAttribute('data-period'); calcRoi(); }); }); // Init if(gaugeFill){ gaugeFill.style.strokeDasharray = gaugeLen; gaugeFill.style.strokeDashoffset = gaugeLen; } calcRoi(); })(); /* ── 6. Counter animation ── */ var counters = document.querySelectorAll('.counter'); if ('IntersectionObserver' in window && counters.length) { var counterObs = new IntersectionObserver(function(entries) { entries.forEach(function(entry) { if (entry.isIntersecting) { var el = entry.target; var target = parseInt(el.getAttribute('data-target'), 10); var suffix = el.getAttribute('data-suffix') || ''; var start = null; function step(ts) { if (!start) start = ts; var p = Math.min((ts - start) / 1800, 1); var eased = 1 - Math.pow(1 - p, 3); el.textContent = Math.round(eased * target) + suffix; if (p < 1) requestAnimationFrame(step); else el.textContent = target + suffix; } requestAnimationFrame(step); counterObs.unobserve(el); } }); }, { threshold: 0.5 }); counters.forEach(function(el) { counterObs.observe(el); }); } /* ── 7. Scroll reveal (IntersectionObserver) - handles all reveal variants ── */ var revealSelectors = '.reveal, .reveal-left, .reveal-right, .reveal-scale, .reveal-rotate, .reveal-stagger, .reveal-blur'; var reveals = document.querySelectorAll(revealSelectors); if ('IntersectionObserver' in window && reveals.length) { var revObs = new IntersectionObserver(function(entries) { entries.forEach(function(entry) { if (entry.isIntersecting) { entry.target.classList.add('visible'); revObs.unobserve(entry.target); } }); }, { threshold: 0.1, rootMargin: '0px 0px -60px 0px' }); reveals.forEach(function(el) { revObs.observe(el); }); } else { reveals.forEach(function(el) { el.classList.add('visible'); }); } /* ── 9. Parallax on hero mockup ── */ var mockup = document.querySelector('.hero-mockup-container'); if (mockup && window.innerWidth > 768) { window.addEventListener('scroll', function() { var y = window.scrollY; if (y < window.innerHeight * 1.5) { mockup.style.transform = 'translateY(' + (y * -0.05) + 'px)'; } }, { passive: true }); } /* ── 10. Cookie consent ── */ document.querySelectorAll('.js-open-cookies').forEach(function(btn) { btn.addEventListener('click', function() { if (typeof window.openCookieConsent === 'function') window.openCookieConsent(); }); }); /* ── 11. Dynamic cable positioning ── */ (function(){ var svg = document.querySelector('.hero-cables-svg'); var hero = document.querySelector('.hero'); var browser = document.querySelector('.hero-browser'); if(!svg || !hero || !browser) return; function updateCables(){ if(window.innerWidth <= 1100) return; var hRect = hero.getBoundingClientRect(); var bRect = browser.getBoundingClientRect(); var W = hRect.width; var H = hRect.height; var bL = bRect.left - hRect.left; var bR = bRect.right - hRect.left; var bT = bRect.top - hRect.top; var bB = bRect.bottom - hRect.top; var r = 25; svg.setAttribute('viewBox', '0 0 ' + W + ' ' + H); var yL1 = bT * 0.30, xL1 = bL + 50; var yL2 = bT * 0.50, xL2 = bL + 20; var yL3 = bT * 0.72, xL3 = bL - 30; var cL1 = document.getElementById('cL1'); var cL2 = document.getElementById('cL2'); var cL3 = document.getElementById('cL3'); var cR1 = document.getElementById('cR1'); var cR2 = document.getElementById('cR2'); var cR3 = document.getElementById('cR3'); if(cL1) cL1.setAttribute('d', 'M -20,'+yL1+' H '+(xL1-r)+' Q '+xL1+','+yL1+' '+xL1+','+(yL1+r)+' V '+bT); if(cL2) cL2.setAttribute('d', 'M -20,'+yL2+' H '+(xL2-r)+' Q '+xL2+','+yL2+' '+xL2+','+(yL2+r)+' V '+bT); if(cL3) cL3.setAttribute('d', 'M -20,'+yL3+' H '+(xL3-r)+' Q '+xL3+','+yL3+' '+xL3+','+(yL3+r)+' V '+(bB-r)+' Q '+xL3+','+bB+' '+(xL3+r)+','+bB+' H '+bL); var xR1 = bR - 50, xR2 = bR - 20, xR3 = bR + 30; if(cR1) cR1.setAttribute('d', 'M '+(W+20)+','+yL1+' H '+(xR1+r)+' Q '+xR1+','+yL1+' '+xR1+','+(yL1+r)+' V '+bT); if(cR2) cR2.setAttribute('d', 'M '+(W+20)+','+yL2+' H '+(xR2+r)+' Q '+xR2+','+yL2+' '+xR2+','+(yL2+r)+' V '+bT); if(cR3) cR3.setAttribute('d', 'M '+(W+20)+','+yL3+' H '+(xR3+r)+' Q '+xR3+','+yL3+' '+xR3+','+(yL3+r)+' V '+(bB-r)+' Q '+xR3+','+bB+' '+(xR3-r)+','+bB+' H '+bR); } window.addEventListener('load', updateCables); window.addEventListener('resize', updateCables); updateCables(); })(); })(); })();