/* Transitions entre écrans (View Transitions, 17/10/2026).
   Une fonction du navigateur, pas une librairie : rien à télécharger, donc rien
   qui manque hors ligne. Au changement d'écran, l'ancien s'efface pendant que le
   nouveau monte de quelques pixels en apparaissant, au lieu du flash blanc.

   ⚠️ Fichier PARTAGÉ par les 7 écrans, à dessein : chaque page porte ses propres
   styles, et sept copies de ce réglage auraient divergé à la première retouche.
   Il est précaché par service-worker.js et copié par scripts/build-dist.sh :
   le retirer de l'un sans l'autre le ferait manquer en sous-sol.

   Navigateurs qui ne connaissent pas la règle (Firefox, Safari avant 18.2) :
   elle est ignorée, l'écran change comme avant. Rien ne casse.

   ⚠️ Aucun élément nommé (logo, barre d'onglets) volontairement : la barre
   d'onglets n'est pas fixe, elle suit la fin du contenu. Nommée, elle traverserait
   l'écran depuis le bas d'une page longue (résultat, CGU) vers celui d'une page
   courte. Seule la page entière est animée. */

@view-transition {
  navigation: auto;
}

/* L'ancien écran : le fondu par défaut du navigateur, raccourci. */
::view-transition-old(root) {
  animation-duration: 180ms;
}

/* Le nouvel écran : un fondu, avec une montée de 10 px. */
::view-transition-new(root) {
  animation: 260ms cubic-bezier(.2, .8, .2, 1) both fotobat-entree;
}

@keyframes fotobat-entree {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Réglage d'accessibilité « réduire les animations » du téléphone : respecté,
   l'écran change sans mouvement. */
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}