/* style.css */

/* Animations personnalisées (utilisées avec JavaScript Intersection Observer) */
/* Fade In Up */
.animate-fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Fade In */
.animate-fade-in {
    opacity: 0;
    transition: opacity 0.6s ease-out;
}

.animate-fade-in.is-visible {
    opacity: 1;
}

/* Styles pour le texte avec ombre (similaire à text-shadow de PetroGabon) */
.drop-shadow-lg {
    text-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Ombre plus prononcée */
}
.drop-shadow-md {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* Ombre moyenne */
}

/* Styles pour le diaporama (pour assurer que les diapositives sont côte à côte) */
#hero-slideshow {
    width: 300%; /* 100% * nombre de diapositives */
}
#hero-slideshow > div {
    width: calc(100% / 3); /* Chaque diapositive prend 1/3 de la largeur totale du conteneur */
}

/* Styles pour les points de pagination du diaporama */
.slideshow-dot.active {
    opacity: 1;
    background-color: #FCD203; /* Couleur active */
}

/* Styles pour le popup mobile */
#mobile-menu-popup.show {
    display: block;
    opacity: 1;
}
#mobile-menu-popup.show > div {
    transform: translateX(0);
}

/* Pour les sous-menus mobiles */
.mobile-dropdown-content.show {
    display: block;
}