/* =========================================================
   transitions.css — Transitions fluides entre les pages
   Utilise la View Transitions API du navigateur (Chrome, Edge, Safari récents).
   Sur les autres navigateurs, les pages changent normalement : rien ne casse.
   ========================================================= */

/* Active les transitions entre pages du même site */
@view-transition {
  navigation: auto;
}

/* L'ancienne page s'efface en reculant légèrement */
@keyframes page-out {
  to { opacity: 0; transform: translateY(-12px) scale(0.985); filter: blur(4px); }
}
/* La nouvelle page arrive par le bas */
@keyframes page-in {
  from { opacity: 0; transform: translateY(24px) scale(1.01); filter: blur(6px); }
}

::view-transition-old(root) {
  animation: 320ms cubic-bezier(0.4, 0, 1, 1) both page-out;
}
::view-transition-new(root) {
  animation: 520ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both page-in;
}

/* L'en-tête reste en place pendant le changement de page */
::view-transition-group(site-header) {
  animation-duration: 0s;
}

/* Le titre principal glisse d'une page à l'autre */
.page-title { view-transition-name: page-title; }
::view-transition-group(page-title) {
  animation-duration: 600ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Respecte le réglage "réduire les animations" du visiteur */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}