// Fonction pour les images de fond en section 1
    document.addEventListener("DOMContentLoaded", function () {
        const bgElements = document.querySelectorAll('.set-bg');
        bgElements.forEach(function (element) {
            const bg = element.getAttribute('data-setbg');
            if (bg) {
                element.style.backgroundImage = `url(${bg})`;
            }
        });
    });

// Fonction du menu de défilement
document.addEventListener('DOMContentLoaded', function () {
    const dots = document.querySelectorAll('.dot');
    const sections = document.querySelectorAll('section');

    // Fonction pour le défilement fluide
    function scrollToSection(sectionId) {
        const section = document.querySelector(sectionId);
        section.scrollIntoView({ behavior: 'smooth' });
    }

    // Ajouter l'événement de clic sur chaque rond
    dots.forEach((dot) => {
        dot.addEventListener('click', function (event) {
            event.preventDefault();
            scrollToSection(dot.getAttribute('href'));

            // Mise à jour de l'état actif des ronds
            dots.forEach(d => d.classList.remove('active'));
            dot.classList.add('active');
        });
    });

    // Détection automatique pour activer le rond correspondant lors du scroll
    window.addEventListener('scroll', function () {
        let currentSection = '';

        sections.forEach(section => {
            const sectionTop = section.offsetTop;
            const sectionHeight = section.clientHeight;

            if (window.pageYOffset >= sectionTop - sectionHeight / 3) {
                currentSection = section.getAttribute('id');
            }
        });

        dots.forEach(dot => {
            dot.classList.remove('active');
            if (dot.getAttribute('href') === `#${currentSection}`) {
                dot.classList.add('active');
            }
        });
    });
});