/* Wrapper contenant le bouton et le cube */
.partenaires-cube-container {
  position: relative;      /* Permet de superposer le contenu */
  z-index: 100;            /* Met ce div devant les autres éléments */
}

.partenaires-cube-wrapper {
  display: flex;               /* Permet de disposer les éléments en colonne */
  flex-direction: column;      /* Définit que les éléments dans ce container seront empilés verticalement */
  align-items: center;         /* Centre les éléments horizontalement */
  gap: 40px;                   /* Ajoute un espace de 40px entre le bouton et le cube */
  perspective: 1000px;         /* Donne une vue en perspective pour l'effet 3D */
  margin-top: 40px;            /* Ajoute une marge en haut du wrapper */
  z-index: 101;               /* Assure que le cube est devant les autres éléments */
}

#partenaires-toggleCube {
  padding: 12px 24px;
  margin-bottom: 40px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 8px;
  border: none;
  background-color: #646cff;
  color: white;
  transition: background 2.8s ease;
}

#partenaires-toggleCube:hover {
  background-color: #4a50cc;
}
/* Style du bouton pour afficher/cacher le cube */
#partenairesToggleCube {
  padding: 12px 24px;          /* Espacement autour du texte */
  margin-bottom: 40px;         /* Espace sous le bouton */
  font-size: 16px;             /* Taille du texte */
  cursor: pointer;            /* Change le curseur pour indiquer un élément cliquable */
  border-radius: 8px;          /* Coins arrondis pour le bouton */
  border: none;                /* Enlève la bordure par défaut */
  background-color: #646cff;   /* Couleur de fond du bouton */
  color: white;                /* Couleur du texte */
  transition: background 2.8s ease; /* Transition fluide sur la couleur de fond */
}
.partenaires-box-card {
  width: 140px;
  height: 140px;
  position: relative;
  transform-style: preserve-3d;
  display: none;
  z-index: 1001;
}

/* Animation de rotation du cube */
.partenaires-box-card.rotate {
  animation: rotate3d 20s infinite linear;
}

/* Styles pour chaque face du cube */
.partenaires-face {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #333;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #646cff;
  backface-visibility: hidden;
}

/* Transformation pour chaque face du cube */
.partenaires-front  { transform: translateZ(70px); }
.partenaires-back   { transform: rotateY(180deg) translateZ(70px); }
.partenaires-right  { transform: rotateY(90deg) translateZ(70px); }
.partenaires-left   { transform: rotateY(-90deg) translateZ(70px); }
.partenaires-top    { transform: rotateX(90deg) translateZ(70px); }
.partenaires-bottom { transform: rotateX(-90deg) translateZ(70px); }

/* Animation de rotation du cube */
@keyframes rotate3d {
  from { transform: rotateX(0deg) rotateY(0deg); }
  to { transform: rotateX(360deg) rotateY(360deg); }
}