/* =================================================================
   FEUILLE DE STYLE PERSONNALISÉE
================================================================== */

/* Comportement général */
html {
    scroll-behavior: smooth;
}

/* Effets de survol (Hover) */
.nav-link-hover {
    transition: transform 0.3s ease-in-out;
}
.nav-link-hover:hover {
    transform: scale(1.1);
}

.button-hover {
    transition: transform 0.3s ease-in-out;
}
.button-hover:hover {
    transform: scale(1.05);
}

/* Animations d'apparition au défilement */
.section-fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

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

/* Bouton "Retour en haut" */
#back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none; /* Caché par défaut */
    z-index: 100;
}

/* =================================================================
   Styles pour la vidéo responsive (Pleine largeur)
   Ces classes permettent de s'assurer que la vidéo YouTube
   remplit l'espace disponible tout en gardant ses proportions.
================================================================== */
.aspect-w-16 {
    position: relative;
    padding-bottom: 56.25%; /* Ratio 16:9 (9 / 16 = 0.5625) */
}

.aspect-h-9 {
    /* Cette classe est utilisée comme conteneur, pas de style direct nécessaire ici */
}

.aspect-w-16 > iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* =================================================================
   Styles pour le Popup (Fenêtre Modale)
================================================================== */
#mobile-money-popup.hidden {
    display: none;
}

#mobile-money-popup {
    display: flex;
}

/* =================================================================
   Styles pour la Galerie
   - Ajoute un curseur "pointer" et un effet de zoom au survol.
================================================================== */
.gallery-image {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.gallery-image:hover {
    transform: scale(1.05);
}

/* =================================================================
   STYLES POUR LE DIAPORAMA DE LA SECTION HERO
================================================================== */

/* Conteneur principal du diaporama */
.hero-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Assure que rien ne dépasse */
}

/* Style de chaque diapositive (slide) */
.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0; /* Caché par défaut */
    transition: opacity 1s ease-in-out; /* Animation de fondu d'une seconde */
    z-index: 1; /* Positionné en arrière-plan */
}

/* Style de la diapositive active/visible */
.hero-slide.active {
    opacity: 1; /* Rendu visible */
    z-index: 2; /* Passe au premier plan */
}