/**
 * Counter Animation - Styles optionnels
 * Améliore le rendu visuel des compteurs animés
 */

/* ==========================================
   BASE - Style par défaut
   ========================================== */

.counter-up {
    /* Éviter les sauts de layout pendant l'animation */
    display: inline-block;
    min-width: 1em;

    /* Font à chasse fixe pour éviter les décalages (optionnel) */
    /* font-variant-numeric: tabular-nums; */
}

/* État initial : légèrement transparent avant l'animation */
.counter-up:not(.counted) {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* État pendant et après l'animation */
.counter-up.counted {
    opacity: 1;
}

/* ==========================================
   VARIANTES DE STYLE (optionnelles)
   ========================================== */

/* Compteur avec effet de glow pendant l'animation */
.counter-glow.counted {
    animation: counter-glow-pulse 2s ease;
}

@keyframes counter-glow-pulse {
    0%, 100% {
        text-shadow: none;
    }
    50% {
        text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    }
}

/* Compteur qui grossit légèrement pendant l'animation */
.counter-scale.counted {
    animation: counter-scale 0.5s ease-out;
}

@keyframes counter-scale {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* Compteur avec couleur qui change pendant l'animation */
.counter-color-transition.counted {
    animation: counter-color 2s ease;
}

@keyframes counter-color {
    0% {
        color: rgba(0, 0, 0, 0.3);
    }
    100% {
        color: inherit;
    }
}

/* ==========================================
   MISE EN PAGE - Conteneurs de compteurs
   ========================================== */

/* Centrer un compteur */
.counter-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Compteur avec label en dessous */
.counter-with-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.counter-with-label .counter-up {
    font-size: 2.5em;
    font-weight: bold;
    line-height: 1;
}

.counter-with-label .counter-label {
    font-size: 0.875em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.7;
}

/* Groupe de compteurs alignés */
.counters-group {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
}

.counters-group .counter-item {
    flex: 1;
    min-width: 150px;
    text-align: center;
}