/**
 * Bloc Animated Number
 * Nombre qui s'incrémente au scroll, avec préfixe/suffixe et animation d'apparition.
 */

.orion-blocks-animated-number {
  position: relative;
}

.orion-blocks-animated-number.has-background {
  padding: 1rem;
}

.orion-blocks-animated-number-container {
  display: flex;
  justify-content: center;
  /* Pilotable via "espacement des blocs" (variable posee par le save),
     avec 0.3em comme valeur par defaut. */
  gap: var(--orion-animated-number-gap, 0.3em);
  flex-wrap: wrap;
}

/* La serialisation React ecrit "text-align:left" (sans espace). On matche les
   deux formes pour rester robuste quelle que soit la source du markup. */
.orion-blocks-animated-number[style*="text-align:left"]
  .orion-blocks-animated-number-container,
.orion-blocks-animated-number[style*="text-align: left"]
  .orion-blocks-animated-number-container {
  justify-content: flex-start;
}

.orion-blocks-animated-number[style*="text-align:right"]
  .orion-blocks-animated-number-container,
.orion-blocks-animated-number[style*="text-align: right"]
  .orion-blocks-animated-number-container {
  justify-content: flex-end;
}

.orion-blocks-animated-number[style*="text-align:center"]
  .orion-blocks-animated-number-container,
.orion-blocks-animated-number[style*="text-align: center"]
  .orion-blocks-animated-number-container {
  justify-content: center;
}

.orion-blocks-animated-number-value {
  line-height: 1;
  color: inherit;
  transition: color 0.3s ease;
}

.orion-blocks-animated-number-prefix,
.orion-blocks-animated-number-suffix {
  line-height: 1;
  color: inherit;
}

.orion-blocks-animated-number {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.orion-blocks-animated-number.aos-animate {
  opacity: 1;
  transform: translateY(0);
}

.orion-blocks-animated-number-value.animating {
  opacity: 0.7;
}

.orion-blocks-animated-number-value.animated {
  opacity: 1;
}