/* État initial : l'élément est prêt mais invisible et décalé */
[class*="fade-in-"] {
    opacity: 0;
    visibility: hidden; /* Évite que l'élément soit cliquable quand il est invisible */
    transition: opacity 0.s ease, visibility 0.3s ease;
}

/* L'animation ne se déclenche QUE si la classe .is-visible est présente */
[class*="fade-in-"].is-visible {
    opacity: 1;
    visibility: visible;
    animation-duration: 1.6s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-in-top.is-visible    { animation-name: fadeInTop; }
.fade-in-bottom.is-visible { animation-name: fadeInBottom; }
.fade-in-left.is-visible   { animation-name: fadeInLeft; }
.fade-in-right.is-visible  { animation-name: fadeInRight; }

/* Tes Keyframes (inchangées mais avec 100%) */
@keyframes fadeInTop {
    0% { opacity: 0; transform: translateY(-100px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInBottom {
    0% { opacity: 0; transform: translateY(100px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
    0% { opacity: 0; transform: translateX(-100px); }
    100% { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
    0% { opacity: 0; transform: translateX(100px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* Les délais restent simples */
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }

/* Cas spécifique du Timer */
.timer-display {
    display: inline-block;
    opacity: 0;
    animation: fadeInTimer 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; /* Effet de rebond léger */
}

@keyframes fadeInTimer {
    0% { opacity: 0; transform: scale(0.92); }
    100% { opacity: 1; transform: scale(1); }
}