/* ── animations.css ── à inclure dans tous les fichiers HTML ── */

/* ── Keyframes ── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes slideRight {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideLeft {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ── Classes d'animation ── */
.animate-fade-up {
  animation: fadeUp 0.9s ease both;
}
.animate-fade-in {
  animation: fadeIn 0.9s ease both;
}
.animate-slide-right {
  animation: slideRight 0.9s ease both;
}
.animate-slide-left {
  animation: slideLeft 0.9s ease both;
}

/* ── Délais ── */
.delay-1 {
  animation-delay: 0.1s;
}
.delay-2 {
  animation-delay: 0.25s;
}
.delay-3 {
  animation-delay: 0.45s;
}
.delay-4 {
  animation-delay: 0.65s;
}

/* ── Liens : pas de soulignement, 20px, légère montée au hover ── */
.description a,
.description-gauche a,
.description-droite a {
  text-decoration: underline;
  font-size: 20px;
  font-weight: bold;
  display: inline-block;
  transition: transform 0.2s ease;
}

.description a:hover,
.description-gauche a:hover,
.description-droite a:hover {
  transform: scale(1.12);
}