:root {
  --anim-duration: 0.7s;
  --anim-stagger: 0.2s;
}

/* tous les enfants démarrent cachés et décalés */
.staggered>* {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--anim-duration) ease var(--delay),
    transform var(--anim-duration) ease var(--delay);
}

/* reveal : pop in */
.staggered.reveal>* {
  opacity: 1;
  transform: none;
}

/* Exclure les backgrounds de l'effet cascade sur leurs enfants */
.info-banner.staggered > *,
.hero__banner.staggered > *,
.product.staggered > *,
.about__partners.staggered > *,
.testimonials.staggered > *,
.footer__bottom.staggered > * {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* S'assurer que hero__banner reste toujours visible (même sans classe staggered) */
.hero__banner {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.hero__banner > * {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* état initial : caché et décalé */
.scroll-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s ease var(--delay, 0s),
    transform 0.7s ease var(--delay, 0s);
}

/* état révélé : visible et à sa place */
.scroll-reveal.reveal {
  opacity: 1;
  transform: none;
}

/* Pour les éléments individuels avec staggered (qui agissent comme scroll-reveal) */
.staggered.staggered-individual {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s ease var(--delay, 0s),
    transform 0.7s ease var(--delay, 0s);
}

.staggered.staggered-individual.reveal {
  opacity: 1;
  transform: none;
}

/* Services */
@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}