/*  Importation des polices depuis Google Fonts  */
@import url("https:/* fonts.googleapis.com/css2?family=Nunito+Sans:wght@400&family=Raleway:wght@700&display=swap");

/*  Style du corps de la page */
body {
    background: #dbcdcd; /* Couleur de fond */
    color: #333; /* Couleur du texte */
    display: flex; /* Utilisation de flexbox */
    flex-direction: column; /* Direction de la flexbox en colonne */
    min-height: 100vh; /* Hauteur minimale de 100% de la vue */
}

/*  Style pour le conteneur principal */
main {
    flex: 1; /* Prend tout l'espace disponible */
    width: 100%; /* Largeur à 100% */
    max-width: 1200px; /* Largeur maximale */
    margin: auto; /* Centrage horizontal */
}

/*  Conteneur pour le carousel */
.carousel-container {
    position: relative; /* Positionnement relatif pour le conteneur */
    width: 100%; /* Largeur à 100% */
    display: flex; /* Utilisation de flexbox */
    justify-content: center; /* Centre le contenu horizontalement */
}

/*  Style pour le swiper */
.swiper {
    width: 100%; /* Largeur à 100% */
    padding: 1.875rem 0; /* Espacement vertical */
}

/*  Style pour chaque diapositive du swiper */
.swiper-slide {
    width: 18.75rem; /* Largeur de la diapositive */
    height: 35rem; /* Hauteur de la diapositive */
    display: flex; /* Utilisation de flexbox */
    flex-direction: column; /* Direction de la flexbox en colonne */
    justify-content: end; /* Aligne le contenu en bas */
    align-items: center; /* Centre le contenu horizontalement */
    box-shadow: 0.063rem 0.5rem 1.25rem rgba(0, 0, 0, 0.12); /* Ombre portée */
    border-radius: 0.5rem; /* Coins arrondis */
    overflow: hidden; /* Masque le débordement */
    position: relative; /* Positionnement relatif */
}

/*  Style pour l'image dans la diapositive */
.swiper-slide-img {
    width: 100%; /* Largeur à 100% */
    height: 100%; /* Hauteur à 100% */
    overflow: hidden; /* Masque le débordement */
    display: flex; /* Utilisation de flexbox */
    justify-content: center; /* Centre le contenu horizontalement */
    align-items: center; /* Centre le contenu verticalement */
}

/*  Style pour l'image dans le conteneur de la diapositive */
.swiper-slide-img img {
    width: 100%; /* Largeur à 100% */
    height: auto; /* Hauteur automatique pour maintenir le ratio */
    transition: transform 0.5s ease-in-out; /* Transition pour l'effet de transformation */
}

/*  Effet de survol pour l'image dans la diapositive */
.swiper-slide:hover img {
    transform: scale(1.5); /* Agrandissement au survol */
}

/*  Style pour le bouton précédent */
#prevBtn {
    display: none; /* Masqué par défaut */
}

/*  Style pour le bouton suivant */
#nextBtn {
    display: none; /* Masqué par défaut */
}

/*  Media queries pour les écrans de moins de 768px */
@media (max-width: 768px) {
    /*  Style pour les boutons de carousel */
    .carousel-btn {
        display: none; /* Masqué par défaut */
    }

    /*  Style pour les boutons de carousel */
    .carousel-btn {
        position: absolute; /* Positionnement absolu */
        top: 50%; /* Positionnement vertical au centre */
        transform: translateY(-50%); /* Centrage vertical */
        background: none; /* Pas de fond */
        border: none; /* Pas de bordure */
        color: white; /* Couleur du texte */
        font-size: 2rem; /* Taille de police pour les icônes */
        cursor: pointer; /* Curseur en forme de main au survol */
        transition: transform 0.2s, color 0.3s; /* Transition pour les effets */
    }

    /*  Effet de survol pour les boutons de carousel */
    .carousel-btn:hover {
        color: #ffeb3b; /* Changement de couleur au survol */
        transform: scale(1.2); /* Agrandissement au survol */
    }

    /*  Effet au clic pour les boutons de carousel */
    .carousel-btn:active {
        transform: scale(0.95); /* Réduction au clic */
    }

    /*  Style pour le bouton précédent */
    #prevBtn {
        left: 15px; /* Positionnement à gauche */
        z-index: 99999; /* Z-index pour superposition */
    }

    /*  Style pour le bouton suivant */
    #nextBtn {
        right: 15px; /* Positionnement à droite */
        z-index: 99999; /* Z-index pour superposition */
    }
}