/* --- styles communs --- */
.page-transition {
  position: fixed;
  inset: 0;
  background: #0D01E1;
  transition: transform 0.7s cubic-bezier(0.77, 0, 0.175, 1);
  will-change: transform;
  pointer-events: none;
  z-index: 8;
}

/* --- volet suivant : entre depuis la droite --- */
#page-transition-next {
  transform: translateX(100%);
}
#page-transition-next.enter {
  transform: translateX(0);
  pointer-events: auto;
}

/* --- volet précédent : entre depuis la gauche --- */
#page-transition-prev {
  transform: translateX(-100%);
}
#page-transition-prev.enter {
  transform: translateX(0);
  pointer-events: auto;
}

/* --- volet d’ouverture (haut -> bas -> sortie) --- */
/* --- volet d’ouverture (haut -> bas -> sortie) --- */
#page-transition-ouverture {
  position: fixed;
  inset: 0;
  background: #0D01E1;
  transform: translateY(0); /* commence visible */
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
  z-index: 8; /* tout au-dessus */
  pointer-events: none;
  will-change: transform;
}
#page-transition-ouverture.hide {
  transform: translateY(100%); /* descend hors écran */
}

/* accessibilité : animations réduites */
@media (prefers-reduced-motion: reduce) {
  .page-transition {
    transition: none !important;
    animation: none !important;
  }
}