.overflow-management {
  overflow: hidden;
  position: relative;
  -webkit-transform: translateZ(0); /* Force le recalcul du rendu sur Safari */
  transform: translateZ(0);
}
/* Animation pour le défilement infini */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%); /* Déplace de moitié la largeur totale */
  }
}

/* Slider principal */
.catalog-slider {
  display: inline-flex; /* Ajuste le contenu pour le défilement horizontal */
  gap: 1rem; /* Espacement entre les cartes */
  animation: scroll 80s linear infinite; /* Défilement continu */
  will-change: transform; /* Optimisation des performances */
}

.catalog-slider-container {
  overflow: hidden; /* Cache le contenu qui dépasse */
  position: relative; /* Positionne les éléments liés au slider */
  width: 100%; /* Prend toute la largeur disponible */
}

/* Bouton "Essai gratuit" */
.demo-button {
  display: flex;
  visibility: hidden; /* Caché par défaut */
  opacity: 0; /* Transparent initialement */
  transition: opacity 0.3s ease-in-out; /* Transition uniquement sur l'opacité */
  position: absolute; /* Positionnement relatif au parent */
  inset: 0; /* S'étend sur tout le bloc parent */
  background-color: rgba(0, 0, 0, 0.5); /* Fond semi-transparent */
}

/* Afficher le bouton lors du survol */
.catalog-card:hover .demo-button {
  visibility: visible; /* Rend visible immédiatement */
  opacity: 1; /* Transition fluide pour l'opacité */
}

/* Pause lors d'une interaction */
.catalog-slider[style*='animation-play-state: paused;'] {
  cursor: default; /* Curseur par défaut lors de la pause */
}

.scrollable-container {
  display: flex;
  gap: 0.5rem; /* Espacement entre les éléments */
  overflow-x: auto; /* Permet le défilement horizontal */
  scrollbar-width: none; /* Masque la barre de défilement sur Firefox */
  -ms-overflow-style: none; /* Masque la barre de défilement sur IE/Edge */
}

.scrollable-container::-webkit-scrollbar {
  display: none; /* Masque la barre sur Chrome/Safari */
}

.relative .bg-gradient-to-r,
.relative .bg-gradient-to-l {
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none; /* Empêche les interactions avec le dégradé */
  z-index: 10;
}

/* Effets spécifiques au slider */
.catalog-slider-container::before,
.catalog-slider-container::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 5rem;
  pointer-events: none; /* Empêche les interactions avec les dégradés */
  z-index: 10;
}

article {
  .wp-block-image {
    align-self: center;
  }
}