/* Transition entre l'accueil et le formulaire : le ruban de soie, déjà affiché et animé, devient le fond du formulaire. Il reste vivant :
   l'ancienne image s'efface sous le ruban de la nouvelle page, qui repart du même état (position, phase, forme) et grandit lui-même
   (mouvement.js) en vague pleine largeur, où il reste pendant toutes les étapes. Pas de zoom CSS ni d'aller-retour. Le fond reste noir de bout en bout.
   Navigateurs avec View Transitions entre documents : le ruban est nommé « soie » des deux côtés (transition.js), le reste se fond.
   Les autres : le texte se fond au clic, la page d'arrivée fait grandir le ruban. Retour (vt-retour) : plus court, le ruban revient à sa taille d'accueil.
   Mouvement réduit : un fondu court, sans mouvement. */
@view-transition { navigation: auto; }
/* Fond noir derrière toutes les images de la transition : sans cela, l'écran clair du système apparaît quand l'ancienne image s'efface avant l'arrivée de la nouvelle (flash blanc constaté le 05/11). */
::view-transition { background: #000; }

html.vt-soie canvas { view-transition-name: soie; }
::view-transition-old(root) { animation: fond-sort 300ms var(--ease-out) both; }
::view-transition-new(root) { animation: fond-entre 700ms var(--ease-out) 450ms both; }
::view-transition-group(soie) { animation: none; }
::view-transition-image-pair(soie) { isolation: auto; }
/* Le ruban n'est plus zoomé par la transition : l'ancienne image s'efface vite sous le ruban vivant de la nouvelle page, qui part du même état
   et grandit lui-même (mouvement.js) jusqu'à sa place, sans aller-retour. */
::view-transition-old(soie), ::view-transition-new(soie) { mix-blend-mode: normal; }
::view-transition-old(soie) { animation: fond-sort 240ms linear both; }
::view-transition-new(soie) { animation: none; }
@keyframes fond-sort { to { opacity: 0; } }
@keyframes fond-entre { from { opacity: 0; } }

html.vt-retour ::view-transition-old(root) { animation-duration: 260ms; }
html.vt-retour ::view-transition-new(root) { animation: fond-entre 500ms var(--ease-out) 150ms both; }
html.vt-retour ::view-transition-old(soie) { animation: fond-sort 300ms linear both; }

/* Repli sans View Transitions : le texte se fond, la page d'arrivée fait grandir le ruban depuis son état gardé (mouvement.js) */
html.part-soie main .cadre, html.part-soie main .haut { opacity: 0; transition: opacity 260ms var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root) { animation: fond-sort 200ms linear both; }
  ::view-transition-new(root) { animation: fond-entre 200ms linear both; }
  html.part-soie main .cadre { transition-duration: 160ms; }
}