/* Animation pour faire apparaître les éléments */
.fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s ease-out forwards;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation pour l'image */
.fade-in-left {
    opacity: 0;
    transform: translateX(-20px);
    animation: fadeInLeft 1s ease-out forwards;
}

@keyframes fadeInLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Animation fade-in pour les cartes */
.fade-in-card {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInCard 0.8s ease-out forwards;
}

@keyframes fadeInCard {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Définir l'animation pour l'image */
.image-container {
    position: relative;
    display: inline-block;
}

.image {
    transition: transform 0.5s ease, opacity 0.3s ease;
}

.image-container:hover .image {
    transform: scale(1.05) translateX(10px);
    opacity: 0.9;
}

.swiper {
    width: 100%;
    height: auto; /* Permet d'adapter la hauteur selon les images */
  }
  
  .swiper-slide {
    text-align: center;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .swiper-slide img {
    display: block;
    width: 100%;
    height: auto; /* Maintient les proportions des images */
    object-fit: cover;
  }
  
  /* Styles communs pour les boutons */
  .swiper-button-next, .swiper-button-prev {
    color: #fd9104; /* Définit la couleur des icônes */
    border-radius: 50%; /* Rend les boutons circulaires */
    width: 40px; /* Taille du bouton */
    height: 40px; /* Taille du bouton */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
  }
  
/* From Uiverse.io by dylanharriscameron - Adapted for full width */ 
.card {
  position: relative;
  width: 100%; /* Adapte à la grille */
  height: 500px;
  border-radius: 14px;
  z-index: 1111;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff; retiré pour le dark mode */
}

.bg {
  position: absolute;
  top: 5px;
  left: 5px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  z-index: 2;
  background: rgba(31, 41, 55, 0.95); /* Gris foncé g-gray-800 */
  backdrop-filter: blur(24px);
  border-radius: 10px;
  overflow: hidden;
}

.blob {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 250px; 
  height: 250px;
  border-radius: 50%;
  background-color: #facc15; /* Jaune Albino7 */
  opacity: 1;
  filter: blur(12px);
  animation: blob-bounce 5s infinite ease;
}

@keyframes blob-bounce {
  0% { transform: translate(-100%, -100%) translate3d(0, 0, 0); }
  25% { transform: translate(-100%, -100%) translate3d(100%, 0, 0); }
  50% { transform: translate(-100%, -100%) translate3d(100%, 100%, 0); }
  75% { transform: translate(-100%, -100%) translate3d(0, 100%, 0); }
  100% { transform: translate(-100%, -100%) translate3d(0, 0, 0); }
}
  
/* Conteneur pour le contenu afin qu'il passe au dessus du bg */
.card-content {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}