/* Ouverture, presentation, sortie -- voir docs/motion.md */
#vt-ouverture, .vt-sortie {
  position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px;
  background: var(--p-aqua-50, #F2FAFB); opacity: 1;
  transition: opacity 300ms cubic-bezier(0.2, 0, 0, 1);
}
#vt-ouverture.est-finie, .vt-sortie.est-finie { opacity: 0; }
#vt-ouverture .vt-pelote, .vt-sortie .vt-pelote {
  width: 112px; height: auto; opacity: 0; transform: scale(0.92);
  animation: vt-pelote 500ms cubic-bezier(0.16, 1, 0.3, 1) 100ms forwards;
}
#vt-ouverture .vt-pelote { width: 180px; }
@keyframes vt-pelote { to { opacity: 1; transform: scale(1); } }

#vt-presentation {
  position: fixed; inset: 0; z-index: 9998; display: flex; flex-direction: column;
  background: var(--p-aqua-100, #D3F0F4); color: var(--p-encre-900, #060E30);
  transition: opacity 300ms cubic-bezier(0.2, 0, 0, 1);
}
#vt-presentation.est-finie { opacity: 0; }
#vt-presentation .vt-ecrans {
  flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
#vt-presentation .vt-ecrans::-webkit-scrollbar { display: none; }
#vt-presentation .vt-ecran {
  flex: 0 0 100%; scroll-snap-align: center; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 32px 24px; text-align: center; gap: 16px;
}
#vt-presentation .vt-ecran img { width: min(78vw, 360px); aspect-ratio: 1; object-fit: cover; border-radius: 24px; }
#vt-presentation h2 { font-family: var(--font-titre); font-size: 1.8rem; margin: 0; }
#vt-presentation p { margin: 0; max-width: 32ch; }
#vt-presentation .vt-pied { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px 28px; gap: 12px; }
#vt-presentation .vt-points { display: flex; gap: 8px; }
#vt-presentation .vt-point { width: 8px; height: 8px; border-radius: 50%; background: var(--p-encre-300, #C3C9D6); transition: background 150ms; }
#vt-presentation .vt-point.est-actif { background: var(--p-teal-600, #045F7B); }
#vt-presentation button { min-height: 44px; min-width: 44px; }

@media (prefers-reduced-motion: reduce) {
  #vt-ouverture, .vt-sortie, #vt-presentation { transition: opacity 150ms linear; }
  #vt-ouverture .vt-pelote, .vt-sortie .vt-pelote {
    animation: none; opacity: 1; transform: none;
  }
}