#confetti-wrapper { position: absolute; width: 100%; height: 100vh; /* tu peux ajuster ou mettre 100vh */ overflow: hidden; } #confettiCanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } (function () { const canvas = document.getElementById('confettiCanvas'); const ctx = canvas.getContext('2d'); function resizeCanvas() { const wrapper = document.getElementById('confetti-wrapper'); canvas.width = wrapper.offsetWidth; canvas.height = wrapper.offsetHeight; } window.addEventListener('resize', resizeCanvas); resizeCanvas(); let confetti = []; function createConfetti() { confetti = []; for (let i = 0; i { ctx.fillStyle = c.color; ctx.fillRect(c.x, c.y, c.size, c.size * 0.6); c.y += c.speed; c.x += c.drift; if (c.y > canvas.height) { c.y = -c.size; c.x = Math.random() * canvas.width; } }); } let running = true; document.addEventListener("visibilitychange", () => { running = !document.hidden; }); function animate() { if (running) drawConfetti(); requestAnimationFrame(animate); } createConfetti(); animate(); })();