/* ---- CTA trail, images derrière le texte dans .cta-card ---- */ (function () { var PROJECTS = [{"title":"Legendary-Level 2026","client":"Atomic","tint":"#1c1008","image":"https://res.cloudinary.com/qqwz7iz6/image/upload/v1783525746/k1ogqytzfef3u3zvlyps.png"},{"title":"WebAR · Palais Royal","client":"Fondation Cartier","tint":"#0a1018","image":"https://res.cloudinary.com/qqwz7iz6/image/upload/v1783593222/batiment-palais-royal-fondation-cartier-pour-l-art-contemporain-2025-martin-argyroglo_jlny6r.webp"},{"title":"Saison 2025","client":"Paris Saint-Germain","tint":"#08101e","image":"https://res.cloudinary.com/qqwz7iz6/image/upload/v1783525839/watekltbcg2tlayyopxu.jpg"},{"title":"Suuupply × Sebago","client":"Sebago","tint":"#0c1408","image":"https://res.cloudinary.com/qqwz7iz6/image/upload/v1783528483/q9qc1gtbumzvgbsb5lzq.png"},{"title":"L003","client":"Lacoste","tint":"#1c1008","image":"https://res.cloudinary.com/qqwz7iz6/image/upload/v1784301222/LACOSTE_V1_mnrdnv.png"},{"title":"The Acolyte","client":"Disney","tint":"#1c1008","image":"https://res.cloudinary.com/qqwz7iz6/image/upload/v1784300405/ACOLYTE_V2_ekl8sx.png"}]; var POOL = 8, frames = [], cur = 0, lastX = 0, lastY = 0, DIST = 72, ctaCard = null; function getCard() { if (!ctaCard) { var sec = document.getElementById('book'); ctaCard = sec && sec.querySelector('.cta-card'); } return ctaCard; } function buildPool() { var card = getCard(); if (!card) { setTimeout(buildPool, 500); return; } for (var i = 0; i < POOL; i++) { var el = document.createElement('div'); el.className = 'cta-trail-frame'; el.innerHTML = '

'; card.appendChild(el); frames.push(el); } } setTimeout(buildPool, 700); document.addEventListener('mousemove', function (e) { if (!frames.length) return; var card = getCard(); if (!card) return; var r = card.getBoundingClientRect(); if (e.clientX < r.left || e.clientX > r.right || e.clientY < r.top || e.clientY > r.bottom) return; var dx = e.clientX - lastX, dy = e.clientY - lastY; if (Math.sqrt(dx*dx + dy*dy) < DIST) return; lastX = e.clientX; lastY = e.clientY; var el = frames[cur % POOL]; var p = PROJECTS[cur % PROJECTS.length]; cur++; var rot = (Math.random() - 0.5) * 18; el.style.left = (e.clientX - r.left) + 'px'; el.style.top = (e.clientY - r.top) + 'px'; el.style.setProperty('--rot', rot + 'deg'); var ctaInner = el.querySelector('.cta-trail-inner'); ctaInner.style.setProperty('--tint', p.tint); ctaInner.style.setProperty('--tint-opacity', p.image ? '0.32' : '0.85'); var ctaImg = el.querySelector('.cta-trail-inner-img'); ctaImg.src = p.image || ''; ctaImg.style.display = p.image ? 'block' : 'none'; el.querySelector('.cta-trail-client').textContent = p.client; el.querySelector('.cta-trail-title').textContent = p.title; el.style.transition = 'none'; el.classList.remove('is-in', 'is-out'); void el.offsetWidth; el.style.transition = 'opacity .28s cubic-bezier(0,0,.2,1), transform .8s cubic-bezier(.22,1,.36,1)'; el.classList.add('is-in'); clearTimeout(el._timer); el._timer = setTimeout(function () { el.style.transition = 'opacity .45s cubic-bezier(.4,0,1,1), transform .45s'; el.classList.remove('is-in'); el.classList.add('is-out'); }, 380); }); })(); /* ---- cursor ---- */ (function () { if (window.matchMedia('(pointer: coarse)').matches) return; var dot = document.getElementById('cursor-dot'); var ring = document.getElementById('cursor-ring'); var mx = -200, my = -200, rx = -200, ry = -200; var prevX = -200, prevY = -200; var rotTarget = 0, rotCurrent = 0; var lastMove = 0; var IDLE_DELAY = 700; var IDLE_SPEED = 0.35; var glowCard = null; /* Invisible tant qu'aucun vrai mouvement de souris n'a eu lieu : sans ça, dot et ring (position fixed 0,0) restent garés dans le coin haut-gauche au chargement, et certains environnements émettent un mousemove synthétique à (0,0) qui les y fige. */ var seen = false; /* Masqué par une sortie de fenêtre. Le retour ne passe pas toujours par un mouseenter sur document (selon le navigateur et le chemin du pointeur) : sans ce drapeau, plus aucun curseur jusqu'au rechargement, puisque le curseur système est lui aussi masqué. Tout mouvement le réaffiche. */ var masque = false; dot.style.opacity = '0'; ring.style.opacity = '0'; function updateDark(el) { var isDark = !!(el && el.closest && el.closest('.section-dark, .hero-fullbleed:not(.hero-bright), .enjeu-card--answer, .hero-clip, .ch-carte')); document.body.classList.toggle('cursor-on-dark', isDark); } window.addEventListener('scroll', function () { var el = document.elementFromPoint(mx, my); if (!el) return; updateDark(el); /* Une vidéo qui défile sous un pointeur immobile ne reçoit pas toujours de mouseleave : le point restait masqué (body.cursor-video-fs) loin de toute vidéo. On resynchronise sur ce qui est vraiment dessous. */ document.body.classList.toggle('cursor-video-fs', !!(el.closest && el.closest('.hero-reel-fs'))); }, { passive: true }); document.addEventListener('mousemove', function (e) { if (!seen) { /* le mousemove synthétique de parking à (0,0) n'est pas un vrai mouvement : on l'ignore tant que le curseur n'est pas apparu */ if (e.clientX === 0 && e.clientY === 0) return; seen = true; dot.style.opacity = '1'; ring.style.opacity = '1'; /* apparaît sur place : pas de lerp ni de spin depuis (-200,-200) */ rx = e.clientX; ry = e.clientY; prevX = e.clientX; prevY = e.clientY; } else if (masque) { masque = false; dot.style.opacity = '1'; ring.style.opacity = '1'; } var dx = e.clientX - prevX, dy = e.clientY - prevY; var dist = Math.sqrt(dx * dx + dy * dy); rotTarget += dist * 2.2; prevX = e.clientX; prevY = e.clientY; lastMove = performance.now(); mx = e.clientX; my = e.clientY; updateDark(e.target); var card = e.target && e.target.closest && e.target.closest('.glass'); if (card !== glowCard) { if (glowCard) glowCard.classList.remove('is-glowing'); glowCard = card || null; if (glowCard) glowCard.classList.add('is-glowing'); } if (glowCard) { var r = glowCard.getBoundingClientRect(); glowCard.style.setProperty('--mx', (e.clientX - r.left) + 'px'); glowCard.style.setProperty('--my', (e.clientY - r.top) + 'px'); } var btn = e.target && e.target.closest && e.target.closest('.btn-accent, .btn-fill'); if (btn) { var rb = btn.getBoundingClientRect(); btn.style.setProperty('--bx', (e.clientX - rb.left) + 'px'); btn.style.setProperty('--by', (e.clientY - rb.top) + 'px'); } }); (function tick() { rx += (mx - rx) * 0.13; ry += (my - ry) * 0.13; ring.style.transform = 'translate(' + (rx - 19) + 'px, ' + (ry - 19) + 'px)'; var now = performance.now(); if (now - lastMove > IDLE_DELAY) { rotCurrent += IDLE_SPEED; rotTarget = rotCurrent; } else { rotCurrent += (rotTarget - rotCurrent) * 0.10; } dot.style.transform = 'translate(' + (mx - 7) + 'px, ' + (my - 7) + 'px) ' + 'rotate(' + rotCurrent.toFixed(1) + 'deg)'; requestAnimationFrame(tick); })(); document.addEventListener('mouseover', function (e) { if (e.target && e.target.closest && e.target.closest('a, button')) ring.classList.add('expanded'); }); document.addEventListener('mouseout', function (e) { if (e.target && e.target.closest && e.target.closest('a, button')) ring.classList.remove('expanded'); }); document.addEventListener('mouseleave', function () { masque = true; dot.style.opacity = '0'; ring.style.opacity = '0'; if (glowCard) { glowCard.classList.remove('is-glowing'); glowCard = null; } document.body.classList.remove('cursor-on-dark'); }); document.addEventListener('mouseenter', function () { if (!seen) return; /* pas encore de vraie position : rester caché */ masque = false; dot.style.opacity = '1'; ring.style.opacity = '1'; }); })();

October 2026

Quand la marque creuse dans ses propres racines