/* Transition entre pages (View Transitions API, navigations même origine) : l'ancien contenu s'efface en montant
   légèrement, le nouveau arrive en fondu par le bas ; l'en-tête ne bouge pas. Navigateurs sans API : fondu
   d'arrivée seul. Rien en cas d'animations réduites. */
@view-transition { navigation: auto; }

.nr-header { view-transition-name: nr-header; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: nr-page-out 240ms cubic-bezier(0.4, 0, 1, 1) both; }
  ::view-transition-new(root) { animation: nr-page-in 360ms cubic-bezier(0, 0, 0.2, 1) both; }
  ::view-transition-group(nr-header) { animation-duration: 0s; }
  ::view-transition-old(nr-header), ::view-transition-new(nr-header) { animation: none; }

  /* Sans View Transitions : fondu du contenu et du pied de page à l'arrivée. */
  @supports not (view-transition-name: x) {
    #brx-content, #brx-footer { animation: nr-page-in 360ms cubic-bezier(0, 0, 0.2, 1) both; }
  }
}
/* « Retour en haut » (et toute ancre) : défilement animé plutôt qu'un saut. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@keyframes nr-page-out { to { opacity: 0; transform: translateY(-14px); } }
@keyframes nr-page-in { from { opacity: 0; transform: translateY(18px); } }

/* En-tête fixe (header.html) : sous 768 px il est dans le flux, on réserve sa hauteur (règle avec ID, hors convertisseur). */
@media (max-width: 767px) {
  #brx-header { min-height: 60px; }
}