.icon-cards {
  position: relative;
  width: 60vw;
  height: 40vw;
  max-width: 3800px;
  max-height: 4500px;
  margin: 0 auto; /* Centrer le carousel horizontalement */
  perspective: 1500px;
  transform-origin: center;
}

.icon-cards__content {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: center;
  transform-style: preserve-3d;
  transform: translateZ(-30vw) rotateY(0);
  transition: transform 0.5s ease;
}

.icon-cards__item {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 60vw;
  height: 40vw;
  max-width: 3800px;
  max-height: 4500px;
  transform-origin: center;
  transition: opacity 0.5s;
}

.icon-cards__item:not(.active) {
  opacity: 0.3;
}

.icon-cards__item:nth-child(1) {
  transform: rotateY(0) translateZ(35vw);
}

.icon-cards__item:nth-child(2) {
  transform: rotateY(120deg) translateZ(35vw);
}

.icon-cards__item:nth-child(3) {
  transform: rotateY(240deg) translateZ(35vw);
}

.carousel-controls {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none; /* Désactiver les événements de pointeur sur le conteneur */
}

.carousel-controls button {
  border: none;
  background: transparent; /* Fond transparent */
  cursor: pointer;
  width: 40px; /* Taille du bouton */
  height: 70px; /* Taille du bouton */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: background-image 0.3s; /* Transition douce pour changer l'image */
  pointer-events: all; /* Activer les événements de pointeur sur les boutons */
}

#prev-slide {
  background-image: url('gauche.png'); /* Image pour la flèche gauche grise */
}

#next-slide {
  background-image: url('droite.png'); /* Image pour la flèche droite grise */
}

#prev-slide:hover {
  background-image: url('gauche_2.png'); /* Image pour la flèche gauche bleue */
}

#next-slide:hover {
  background-image: url('droite_2.png'); /* Image pour la flèche droite bleue */
}
