document.addEventListener("DOMContentLoaded", () => {
    const visitTitle = document.querySelector(".visite-0"); 
    const visitElements = document.querySelectorAll(".visite-video, .lines-expo, .mostra-venise");
    const inspirationTitle = document.querySelector(".inspirations-title"); 
    const inspirationContent = document.querySelector(".inspirations-content"); 

    const borisTitle = document.querySelector("#boris"); 
    const borisElements = document.querySelectorAll(".labbe .video, .labbe .boris-bio, .lines-boris"); 
    
    const judithTitle = document.querySelector("#judith"); 
    const judithTitle2 = document.querySelector(".guez-intro");
    const judithTitle3 = document.querySelector(".guez-intro2");
    const judithContent = document.querySelectorAll(".guez-commissariat, .guez-parcours, .lines-judith");

    const annexTitle = document.querySelector("#annex");
    const annexContent = document.querySelectorAll(".annexe-content");

    // Cacher les éléments au chargement de la page
    visitElements.forEach(element => {
        element.style.display = "none";
    });
    inspirationTitle.style.display = "none";
    inspirationContent.style.display = "none";
    judithTitle2.style.display = "none";
    judithTitle3.style.display = "none";
    judithContent.forEach(element => {
        element.style.display = "none";
    });
    borisElements.forEach(element => {
        element.style.display = "none";
    });

    // Événement pour afficher les éléments de la section Visite
    visitTitle.addEventListener("click", () => {
        visitElements.forEach(element => {
            element.style.display = "block";
            element.style.opacity = 0;
            element.style.transition = "opacity 0.5s ease-in-out";
            setTimeout(() => {
                element.style.opacity = 1;
            }, 50);
        });
        inspirationTitle.style.display = "block";
    });

    // Événement pour afficher les éléments de Boris
    borisTitle.addEventListener("click", () => {
        borisElements.forEach(element => {
            element.style.display = "block";
            element.style.opacity = 0;
            element.style.transition = "opacity 0.5s ease-in-out";
            setTimeout(() => {
                element.style.opacity = 1;
            }, 50);
        });
    });

    annexTitle.addEventListener("click", () => {
        annexContent.forEach(element => {
            element.style.display = "block";
            element.style.opacity = 0;
            element.style.transition = "opacity 0.5s ease-in-out";
            setTimeout(() => {
                element.style.opacity = 1;
            }, 50);
        });
    });

    // Événement pour afficher le contenu des inspirations
    inspirationTitle.addEventListener("click", () => {
        inspirationContent.style.display = "block";
        inspirationContent.style.opacity = 0;
        inspirationContent.style.transition = "opacity 0.5s ease-in-out";
        setTimeout(() => {
            inspirationContent.style.opacity = 1;
        }, 50);
    });

    // Événement pour afficher judithTitle2 quand on clique sur judithTitle
    judithTitle.addEventListener("click", () => {
        judithTitle2.style.display = "block";
        judithTitle2.style.opacity = 0;
        judithTitle2.style.transition = "opacity 0.5s ease-in-out";
        setTimeout(() => {
            judithTitle2.style.opacity = 1;
        }, 50);

        judithTitle3.style.display = "block";
        judithTitle3.style.opacity = 0;
        judithTitle3.style.transition = "opacity 0.5s ease-in-out";
        setTimeout(() => {
            judithTitle3.style.opacity = 1;
        }, 50);
    });

    // Événement pour afficher judithContent quand on clique sur judithTitle2
    judithTitle3.addEventListener("click", () => {
        judithContent.forEach(element => {
            element.style.display = "block";
            element.style.opacity = 0;
            element.style.transition = "opacity 0.5s ease-in-out";
            setTimeout(() => {
                element.style.opacity = 1;
            }, );
        });
    });
});




const parentDiv = document.querySelector('.guez-text-1');
const parentDiv2 = document.querySelector('.guez-text-2');


// Cache initiale de la div
parentDiv.style.opacity = 0;
parentDiv.style.zIndex = -1000;

parentDiv2.style.opacity = 0;
parentDiv2.style.zIndex = -1000;

// Fermeture de la page lorsque vous cliquez sur le bouton
document.querySelectorAll('.menu-button.x').forEach(button => {
    button.addEventListener('click', () => {
        if (parentDiv) {
            // Ajoute une classe pour déclencher l'animation de fermeture
            parentDiv.classList.remove('fadeIn');
            parentDiv.classList.add('fadeOut');

            // Cache complètement la div après l'animation (1000ms)
            setTimeout(() => {
                parentDiv.style.zIndex = -1000; // Ajoute aussi un z-index bas
            }, 1000);
        }
    });
});

// Fermeture de la page lorsque vous cliquez sur le bouton
document.querySelectorAll('.menu-button.x').forEach(button => {
    button.addEventListener('click', () => {
        if (parentDiv) {
            // Ajoute une classe pour déclencher l'animation de fermeture
            parentDiv2.classList.remove('fadeIn');
            parentDiv2.classList.add('fadeOut');

            // Cache complètement la div après l'animation (1000ms)
            setTimeout(() => {
                parentDiv2.style.zIndex = -1000; // Ajoute aussi un z-index bas
            }, 1000);
        }
    });
});

// Affichage de la div quand on clique sur guez-parcours
document.querySelector('.guez-parcours').addEventListener('click', () => {
    if (parentDiv) {
        // Affiche la div
        parentDiv.style.opacity = 1;
        parentDiv.style.zIndex = 1000; // Met la div au-dessus des autres éléments

        // Ajoute une animation d'apparition
        parentDiv.classList.add('fadeIn');

        // L'animation de fade-in met la div visible avec une transition fluide
    }
});

// Affichage de la div quand on clique sur guez-parcours
document.querySelector('.guez-commissariat').addEventListener('click', () => {
    if (parentDiv2) {
        // Affiche la div
        parentDiv2.style.opacity = 1;
        parentDiv2.style.zIndex = 1000; // Met la div au-dessus des autres éléments

        // Ajoute une animation d'apparition
        parentDiv2.classList.add('fadeIn');

        // L'animation de fade-in met la div visible avec une transition fluide
    }
});






