/* ════════════════════════════════════════════════════════════
   TRANSITION ENTRE LES PAGES — fondu enchaîné fluide
   (remplace les deux volets haut / bas)

   Navigateurs récents (Chrome, Edge, Safari 18.2+), site en ligne :
   transition native entre documents (View Transitions). L'ancienne
   page s'efface en remontant légèrement avec un voile de flou, la
   nouvelle arrive par-dessus en douceur. Le menu reste immobile.

   Autres cas (Firefox, ouverture en local file://) : même esprit,
   piloté par js/page-transition.js (classe .pt-fallback sur <html>).
   « Réduire les animations » : pas d'animation.
════════════════════════════════════════════════════════════ */

/* ── 1. Transition native ── */
@view-transition { navigation: auto; }

.nav { view-transition-name: site-nav; }          /* le menu ne bouge pas */
::view-transition-group(site-nav) { animation: none; }
::view-transition-old(site-nav),
::view-transition-new(site-nav) { animation: none; }

::view-transition-old(root) {
	animation: pt-old .45s cubic-bezier(.4, 0, .2, 1) both;
}
::view-transition-new(root) {
	animation: pt-new .75s cubic-bezier(.16, 1, .3, 1) .08s both;
}
@keyframes pt-old {
	to { opacity: 0; transform: translateY(-14px) scale(.995); filter: blur(6px); }
}
@keyframes pt-new {
	from { opacity: 0; transform: translateY(22px); filter: blur(6px); }
}

/* ── 2. Repli (sans transition native) ──
   Opacité sur <body> (pas de transform : le menu fixe resterait accroché),
   léger glissement sur le contenu principal. */
.pt-fallback body { animation: pt-fade-in .6s cubic-bezier(.16, 1, .3, 1) both; }
.pt-fallback #main-content { animation: pt-rise .8s cubic-bezier(.16, 1, .3, 1) both; }
.pt-fallback.pt-leaving body { animation: pt-fade-out .32s cubic-bezier(.4, 0, .2, 1) both; }
.pt-fallback.pt-leaving #main-content { animation: pt-sink .32s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes pt-fade-in  { from { opacity: 0; } }
@keyframes pt-rise     { from { transform: translateY(22px); } }
@keyframes pt-fade-out { to { opacity: 0; } }
@keyframes pt-sink     { to { transform: translateY(-12px); } }

@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
	.pt-fallback body,
	.pt-fallback #main-content,
	.pt-fallback.pt-leaving body,
	.pt-fallback.pt-leaving #main-content { animation: none; }
}

/* Anciens volets : plus utilisés */
.transition-wrap { display: none !important; }