/* ========================================
   ICONS ANIMATION - ENTRANCE EFFECT (ON SCROLL)
   Animation d'apparition des icônes au scroll
   Déclenchée quand on atteint la section turquoise
   À SUPPRIMER si l'animation ne plaît pas
   ======================================== */

@keyframes iconAppearance {
  0% {
    opacity: 0;
    transform: scale(0.3) translateY(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* État initial - les icônes sont invisibles */
.cards-icon-cd3-fsl-twb-ct4 {
  opacity: 0 !important;
  transform: scale(0.3) !important;
}

/* Quand la classe 'is-visible' est ajoutée par JS */
.cards-icon-cd3-fsl-twb-ct4.is-visible {
  animation: iconAppearance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

/* Délai progressif pour chaque icône */
.cards-icon-cd3-fsl-twb-ct4.is-visible:nth-of-type(1) {
  animation-delay: 0.1s;
}

.cards-icon-cd3-fsl-twb-ct4.is-visible:nth-of-type(2) {
  animation-delay: 0.2s;
}

.cards-icon-cd3-fsl-twb-ct4.is-visible:nth-of-type(3) {
  animation-delay: 0.3s;
}

.cards-icon-cd3-fsl-twb-ct4.is-visible:nth-of-type(4) {
  animation-delay: 0.4s;
}

/* Conserver les animations hover existantes */
.icon-circle-mb2 {
  /* Les styles hover originaux restent intacts */
}

@media screen and (max-width: 767px) {
  /* Réduire légèrement l'animation sur mobile */
  .cards-icon-cd3-fsl-twb-ct4.is-visible {
    animation-duration: 0.5s;
  }

  .cards-icon-cd3-fsl-twb-ct4.is-visible:nth-of-type(1) {
    animation-delay: 0.05s;
  }

  .cards-icon-cd3-fsl-twb-ct4.is-visible:nth-of-type(2) {
    animation-delay: 0.1s;
  }

  .cards-icon-cd3-fsl-twb-ct4.is-visible:nth-of-type(3) {
    animation-delay: 0.15s;
  }

  .cards-icon-cd3-fsl-twb-ct4.is-visible:nth-of-type(4) {
    animation-delay: 0.2s;
  }
}