@keyframes slideInFromBottom {
	0% {
		transform: translateY(50px);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

.animate-on-scroll {
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.6s ease-out;
}

.animate-on-scroll.show {
	opacity: 1;
	transform: translateY(0);
}

.stagger-item {
	opacity: 0;
	animation: fadeIn 0.5s ease-out forwards;
	animation-delay: calc(var(--order) * 0.1s);
}

@keyframes fadeIn {
	to {
		opacity: 1;
	}
}

/* Styles pour la section des émissions */
.emission-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.emission-item.show {
    opacity: 1;
    transform: translateY(0);
}

.progress-bar {
    width: 0;
    transform-origin: left;
    transition: width 0s;
}

/* Animation de brillance pour les barres */
@keyframes shine {
    0% {
        background-position: -100% 0;
    }
    100% {
        background-position: 100% 0;
    }
}

.progress-bar {
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    background-size: 200% 100%;
    animation: shine 1s infinite;
}

/* Style hover pour les items */
.emission-item {
    border-radius: 0.5rem;
    transition: background-color 0.3s ease;
}

/* Animation de fade-in pour les descriptions */
.emission-item p {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.emission-item.show p {
    opacity: 1;
    transition-delay: 0.3s;
}