@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz@6..12&family=Raleway:wght@700&display=swap");

/* Variables globales */
:root {
    --swiper-bg: rgba(30, 30, 30, 0.1); /* Fond légèrement plus foncé */
    --card-bg: rgba(30, 30, 30, 0.95); /* Fond des cartes plus foncé */
    --card-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); /* Ombre des cartes */
    --primary-color: #0056b3; /* Couleur primaire légèrement plus foncée */
    --secondary-color: #495057; /* Couleur secondaire plus foncée */
    --dark-text-color: #e9ecef; /* Texte clair sur fond foncé */
    --background-color: #1c1c1c; /* Fond principal plus foncé */
}

/* Style du corps de la page */
body {
    background: #2c2c2c; /* Fond plus foncé pour le body */
    color: #f8f9fa; /* Texte clair pour contraster avec le fond */
    display: flex; /* Affichage en flexbox */
    flex-direction: column; /* Direction de la flexbox en colonne */
    min-height: 100vh; /* Hauteur minimale de 100% de la vue */
}

/* Styles de base pour le conteneur du carousel */
.carousel-container {
    position: relative; /* Positionnement relatif pour le conteneur */
    max-width: 1200px; /* Largeur maximale du conteneur */
    margin: 2rem auto; /* Marge supérieure et inférieure de 2rem, centrée horizontalement */
    padding: 0 1rem; /* Remplissage horizontal de 1rem */
}

/* Styles des boutons de navigation */
#prevBtn,
#nextBtn {
    position: absolute; /* Positionnement absolu pour les boutons */
    top: 50%; /* Positionnement vertical au centre */
    transform: translateY(-50%); /* Centrage vertical */
    background: var(--primary-color); /* Couleur de fond primaire */
    color: white; /* Couleur du texte en blanc */
    border: none; /* Pas de bordure */
    width: 40px; /* Largeur des boutons */
    height: 40px; /* Hauteur des boutons */
    border-radius: 50%; /* Coins arrondis pour un look circulaire */
    cursor: pointer; /* Curseur en forme de main au survol */
    z-index: 10; /* Z-index pour superposition */
    transition: all 0.3s ease; /* Transition pour les effets */
}

#prevBtn {
    left: 0; /* Positionnement à gauche */
}

#nextBtn {
    right: 0; /* Positionnement à droite */
}

#prevBtn:hover,
#nextBtn:hover {
    background: var(--secondary-color); /* Couleur de fond secondaire au survol */
    color: var(--dark-text-color); /* Couleur du texte au survol */
    transform: translateY(-50%) scale(1.1); /* Agrandissement au survol */
}

/* Styles des slides */
.swiper-slide {
    background: var(--swiper-bg); /* Couleur de fond des slides */
    border-radius: 15px; /* Coins arrondis pour les slides */
    padding: 1rem; /* Remplissage des slides */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transition pour l'effet de transformation et d'ombre */
}

.swiper-slide-active {
    box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.5); /* Ombre blanche claire pour la diapositive active */
    margin-top: 15px;
    margin-bottom: 15px;
}

.swiper-slide-img {
    position: relative; /* Positionnement relatif pour l'image */
    overflow: hidden; /* Masque le débordement */
    border-radius: 10px; /* Coins arrondis pour l'image */
    margin-bottom: 1rem; /* Marge inférieure de 1rem */
}

.swiper-slide-img img {
    width: 100%; /* Largeur de l'image à 100% */
    height: auto; /* Hauteur automatique pour maintenir le ratio */
    object-fit: cover; /* Couvre l'espace sans déformation */
    transition: transform 0.3s ease; /* Transition pour l'effet de transformation */
}

.swiper-slide-img:hover img {
    transform: scale(1.05); /* Agrandissement de l'image au survol */
}

/* Contenu des slides */
.swiper-slide-content {
    background: var(--card-bg); /* Couleur de fond du contenu des slides */
    padding: 1.5rem; /* Remplissage du contenu */
    border-radius: 10px; /* Coins arrondis pour le contenu */
    box-shadow: var(--card-shadow); /* Ombre pour le contenu */
}

.swiper-slide-content h2 {
    color: var(--dark-text-color); /* Couleur du texte pour le titre */
    margin-bottom: 1rem; /* Marge inférieure de 1rem */
    font-size: 1.5rem; /* Taille de police pour le titre */
}

.swiper-slide-content p {
    color: var(--dark-text-color); /* Couleur du texte pour le paragraphe */
    margin-bottom: 1rem; /* Marge inférieure de 1rem */
    font-size: 1rem; /* Taille de police pour le paragraphe */
    line-height: 1.6; /* Hauteur de ligne pour le paragraphe */
}

/* Bouton "En savoir plus" */
.show-more {
    display: inline-flex; /* Affichage en flexbox pour le bouton */
    align-items: center; /* Centre le contenu verticalement */
    color: white; /* Couleur du texte pour le bouton */
    text-decoration: none; /* Pas de soulignement */
    font-weight: bold; /* Texte en gras */
    transition: color 0.3s ease, transform 0.3s ease; /* Transition pour les effets */
    position: relative; /* Positionnement relatif pour le cercle */
}

.show-more svg {
    width: 20px; /* Largeur de l'icône SVG */
    height: 20px; /* Hauteur de l'icône SVG */
    margin-left: 0.5rem; /* Marge à gauche de 0.5rem */
    transition: transform 0.3s ease, fill 0.3s ease; /* Transition pour l'effet de transformation et de couleur */
}

.show-more:hover {
    color: white; /* Couleur du texte au survol */
    transform: translateX(25px); /* Légère élévation au survol */
}

.show-more:hover svg {
    transform: scale(1.5); /* Agrandissement et rotation de l'icône au survol */
}

/* Cercle autour de l'icône au survol */
.show-more:hover::before {
    content: ''; /* Nécessaire pour créer un élément */
    position: absolute; /* Positionnement absolu */
    width: 40px; /* Largeur du cercle */
    height: 40px; /* Hauteur du cercle */
    border-radius: 50%; /* Forme circulaire */
    background: rgba(255, 255, 255, 0.3); /* Fond semi-transparent */
    top: 50%; /* Centrer verticalement */
    left: 50%; /* Centrer horizontalement */
    transform: translate(-50%, -50%) scale(1); /* Centrage et échelle initiale */
    transition: transform 0.3s ease; /* Transition pour l'effet de transformation */
}

.show-more:hover::before {
    transform: translate(-50%, -50%) scale(1.2); /* Agrandissement du cercle au survol */
}

.swiper-slide img {
    width: 100%; /* Largeur de l'image à 100% */
    height: auto; /* Hauteur automatique pour maintenir le ratio */
    object-fit: cover; /* Couvre l'espace sans déformation */
}

/* Media Queries */
@media (max-width: 992px) {
    /* Styles pour les écrans de moins de 992px */
    .carousel-container {
        padding: 0 2rem; /* Remplissage horizontal de 2rem */
    }

    .swiper-slide {
        padding: 0.5rem; /* Remplissage des slides réduit */
    }

    .swiper-slide-content {
        padding: 1rem; /* Remplissage du contenu réduit */
    }

    .swiper-slide-content h2 {
        font-size: 1.25rem; /* Taille de police pour le titre réduite */
    }

    .swiper-slide-content p {
        font-size: 0.9rem; /* Taille de police pour le paragraphe réduite */
    }
}

@media (max-width: 768px) {
    /* Styles pour les écrans de moins de 768px */
    #prevBtn,
    #nextBtn {
        width: 30px; /* Largeur des boutons réduite */
        height: 30px; /* Hauteur des boutons réduite */
        font-size: 0.8rem; /* Taille de police réduite */
    }

    .swiper-slide-img {
        height: 200px; /* Hauteur des images réduite */
    }

    .swiper-slide-img img {
        height: 100%; /* Hauteur de l'image à 100% */
        object-fit: cover; /* Couvre l'espace sans déformation */
    }

    .pack-card img[src*="confort"] {
        margin-top: 25px; /* Ajustement pour tablette */
    }
}

/* Animations */
@keyframes slideIn {
    from {
        opacity: 0; /* Opacité initiale */
        transform: translateY(20px); /* Déplacement vers le bas */
    }

    to {
        opacity: 1; /* Opacité finale */
        transform: translateY(0); /* Réinitialisation du déplacement */
    }
}

.swiper-slide {
    animation: slideIn 0.5s ease-out; /* Animation d'apparition pour les slides */
}

/* Styles pour l'effet de coverflow */
.swiper-container {
    overflow: hidden; /* Masque le débordement */
    padding: 2rem 0; /* Remplissage vertical de 2rem */
}

.swiper-slide-active {
    transform: scale(1.05); /* Agrandissement de la diapositive active */
    z-index: 2; /* Z-index pour superposition */
    box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.5); /* Ombre blanche claire pour la diapositive active */
}

.swiper-slide-prev,
.swiper-slide-next {
    opacity: 0.7; /* Opacité pour les diapositives précédentes et suivantes */
}