/*
 * Transitions entre les pages (View Transitions API, sans JavaScript).
 * Chrome / Edge 126+, Safari 18.2+ : fondu + léger glissement du contenu entre deux pages.
 * Les autres navigateurs naviguent normalement, sans animation.
 * Les zones nommées (barre latérale, barre haute, pied de page, identité publique) restent fixes.
 */
@view-transition {
  navigation: auto;
}

#sidebar-multi-level-sidebar { view-transition-name: sidebar; }
#navbar { view-transition-name: navbar; }
#footer { view-transition-name: footer; }
.identite-publique { view-transition-name: identite; }
.barre-haute { view-transition-name: barre-haute; }
#liste-resultats { view-transition-name: liste; }

::view-transition-old(root) {
  animation: ml-sortie 120ms ease-in both;
}
::view-transition-new(root) {
  animation: ml-entree 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* Swaps HTMX déclarés avec « transition:true » (pagination numérotée) */
::view-transition-old(liste) { animation: ml-sortie 100ms ease-in both; }
::view-transition-new(liste) { animation: ml-entree 180ms ease-out both; }

@keyframes ml-sortie {
  to { opacity: 0; }
}
@keyframes ml-entree {
  from { opacity: 0; transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ---------- Barre de progression (requêtes HTMX et changements de page) ---------- */
#iloadding {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 9999;
  height: 3px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
}
#iloadding.actif { opacity: 1; }
#iloadding::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #10b981, #0ea5e9);
  transform-origin: 0 50%;
  animation: ml-progression 1.1s infinite ease-in-out;
}
@keyframes ml-progression {
  0% { transform: translateX(0) scaleX(0); }
  45% { transform: translateX(0) scaleX(0.45); }
  100% { transform: translateX(100%) scaleX(0.5); }
}
@media (prefers-reduced-motion: reduce) {
  #iloadding::before { animation: none; transform: scaleX(0.6); }
}