/* ═══ R8 — Navigation push entre pages (View Transitions entre documents) ═══
   Le sens (push / pop) est choisi par static/js/transitions.js ; sans lui, ou sur un navigateur
   qui ne gère pas les transitions entre pages, le changement d'écran reste direct.
   Mobile : la page poussée entre par la droite, la page de base recule de 22 % et s'assombrit.
   ≥ 768px (R9) : la colonne change en fondu court, le rail et le (+) ne bougent pas. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.3s;
  animation-fill-mode: both;
  animation-timing-function: var(--ease-push);
  mix-blend-mode: normal;
}

/* Push : la nouvelle page entre par la droite, au-dessus de l'ancienne */
html:active-view-transition-type(push)::view-transition-old(root) {
  animation-name: push-base-out;
}

html:active-view-transition-type(push)::view-transition-new(root) {
  animation-name: push-page-in;
  box-shadow: var(--shadow-push-edge);
}

/* Pop : la page quittée ressort vers la droite, au-dessus de la page de base qui revient */
html:active-view-transition-type(pop)::view-transition-old(root) {
  animation-name: pop-page-out;
  box-shadow: var(--shadow-push-edge);
  z-index: 1;
}

html:active-view-transition-type(pop)::view-transition-new(root) {
  animation-name: pop-base-in;
}

@keyframes push-page-in {
  from { transform: translateX(100%); }
}

@keyframes push-base-out {
  to { filter: brightness(0.92); transform: translateX(-22%); }
}

@keyframes pop-page-out {
  to { transform: translateX(100%); }
}

@keyframes pop-base-in {
  from { filter: brightness(0.92); transform: translateX(-22%); }
}

/* ── ≥ 768px : fondu de la colonne, le rail et le (+) restent en place ── */
@media (min-width: 768px) {
  .v2-shell .bottom-nav--v2 {
    view-transition-name: rail;
  }

  .v2-shell .side-fab {
    view-transition-name: side-fab;
  }

  html:active-view-transition-type(push, pop)::view-transition-old(root),
  html:active-view-transition-type(push, pop)::view-transition-new(root) {
    animation-duration: 0.2s;
    animation-timing-function: ease;
    box-shadow: none;
  }

  html:active-view-transition-type(push, pop)::view-transition-old(root) {
    animation-name: fade-out;
  }

  html:active-view-transition-type(push, pop)::view-transition-new(root) {
    animation-name: fade-in;
  }

  @keyframes fade-out {
    to { opacity: 0; }
  }

  @keyframes fade-in {
    from { opacity: 0; }
  }
}