/**
 * Styles frontend pour le bloc Animated Number
 */

/* Styles de base du nombre animé */
.axblocs-animated-number {
    position: relative;
}

/* Support des styles WordPress natifs */
.axblocs-animated-number.has-background {
    padding: 1rem;
}

.axblocs-animated-number-container {
    display: flex;
    justify-content: center;
    gap: 0.3em;
    flex-wrap: wrap;
}

/* Alignements */
.axblocs-animated-number[style*="text-align: left"] .axblocs-animated-number-container {
    justify-content: flex-start;
}

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

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

/* Valeur principale */
.axblocs-animated-number-value {
    font-weight: 500;
    line-height: 1;
    color: inherit;
    transition: color 0.3s ease;
}

/* Préfixe et suffixe */
.axblocs-animated-number-prefix,
.axblocs-animated-number-suffix {
    font-weight: 500;
    line-height: 1;
    color: inherit;
}

/* Animation de fondu à l'apparition */
.axblocs-animated-number {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

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

/* États d'animation du nombre */
.axblocs-animated-number-value.animating {
    opacity: 0.7;
}

.axblocs-animated-number-value.animated {
    opacity: 1;
}

/* Responsive - géré par clamp() dans les styles de base */