/* Effets discrets, repris du site Wombat (statique/css/site.css) en plus sobre :
   8 px, 400-500 ms, sans bibliothèque. Désactivés si l'utilisateur réduit les animations. */
:root { --ease-doux: cubic-bezier(0.22, 1, 0.36, 1); }
html { scroll-behavior: smooth; }

/* Apparition au défilement : seulement si le JS tourne (classe .js posée par effets.js),
   sinon le contenu reste visible. */
.js .apparition { opacity: 0; transform: translateY(8px);
  transition: opacity 450ms var(--ease-doux), transform 450ms var(--ease-doux); }
.js .apparition.visible { opacity: 1; transform: none; }

/* Card qui se soulève au survol. */
.carte { transition: transform 400ms var(--ease-doux), box-shadow 400ms var(--ease-doux), border-color 400ms var(--ease-doux); }
.carte:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgb(15 23 42 / 0.08); border-color: var(--td-accent); }

/* Soulignement animé des liens. */
.lien-souligne { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat;
  background-position: 0 100%; background-size: 0 1px; transition: background-size 400ms var(--ease-doux); }
.lien-souligne:hover { background-size: 100% 1px; }

/* Bouton à flèche : la flèche avance au survol. */
.bouton-fleche span[aria-hidden] { display: inline-block; transition: transform 400ms var(--ease-doux); }
.bouton-fleche:hover span[aria-hidden] { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .apparition { opacity: 1; transform: none; }
}