/* ============================================================================
   TRANSITION ENTRE PAGES - variante v8 : fondu enchaine tres rapide
   ============================================================================

   Un simple fondu enchaine entre l'ancienne et la nouvelle page (transitions
   natives entre documents) : l'ancienne page s'efface pendant que la nouvelle
   apparait, en 250 ms, avec une courbe douce (--ccp-vt-ease, type easeInOutSine).
   Pas de rideau blanc, pas de blips, pas de croix.

   L'en-tete est un element nomme : il reste fixe (il est remplace sans animation)
   au lieu de s'effacer et de reapparaitre avec la page. La pause des videos
   a la sortie de la page (page-transition-v8.js) evite le flash noir de la
   capture d'une video en lecture.

   Tout est sous prefers-reduced-motion: no-preference : sinon, aucune transition.
   Aucune condition de largeur. Ce fichier remplace page-transition-v6.css tel quel.
   ============================================================================ */

:root {
  --ccp-vt-duration: 250ms;
  --ccp-vt-ease: cubic-bezier(0.45, 0, 0.55, 1);
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  /* L'en-tete reste fixe : element nomme, remplace sans animation */
  .site-header {
    view-transition-name: ccp-header;
  }

  ::view-transition-group(ccp-header) {
    animation-duration: 0s;
  }

  ::view-transition-old(ccp-header) {
    display: none;
  }

  ::view-transition-new(ccp-header) {
    animation: none;
  }

  /* Le reste de la page : fondu enchaine (l'ancienne page s'efface, la nouvelle apparait) */
  ::view-transition-group(root) {
    animation-duration: var(--ccp-vt-duration);
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: var(--ccp-vt-duration);
    animation-timing-function: var(--ccp-vt-ease);
  }
}