/*
 * Transitions entre les pages — tout le site (vitrine, espace client, admin, pages autonomes).
 * Chargé par inc/page-transitions.php. Les deux pages (départ et arrivée) doivent l'avoir pour que la transition se joue.
 *
 * Navigateurs récents (Chrome, Edge, Safari 18.2+) : transition native entre documents (View Transitions) —
 *   l'ancienne page s'efface en douceur pendant que la nouvelle apparaît ; la barre du haut et les menus restent immobiles.
 * Autres navigateurs (Firefox…) : simple fondu à l'arrivée.
 * « Réduire les animations » (réglage du système) : aucune animation.
 */

@view-transition { navigation: auto; }

/* Éléments qui restent en place d'une page à l'autre (ils ne « clignotent » pas) */
.admin-topbar        { view-transition-name: cos-admin-topbar; }
aside.sidebar        { view-transition-name: cos-admin-sidebar; }
.site-header         { view-transition-name: cos-site-header; }
.client-topbar       { view-transition-name: cos-client-topbar; }

::view-transition-group(cos-admin-topbar),
::view-transition-group(cos-admin-sidebar),
::view-transition-group(cos-site-header),
::view-transition-group(cos-client-topbar) { animation: none; }
::view-transition-old(cos-admin-topbar),
::view-transition-old(cos-admin-sidebar),
::view-transition-old(cos-site-header),
::view-transition-old(cos-client-topbar) { display: none; }
::view-transition-new(cos-admin-topbar),
::view-transition-new(cos-admin-sidebar),
::view-transition-new(cos-site-header),
::view-transition-new(cos-client-topbar) { animation: none; }

/* Contenu : l'ancienne page recule et s'estompe, la nouvelle monte doucement en se précisant */
::view-transition-old(root) {
  animation: cos-vt-out .26s cubic-bezier(.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: cos-vt-in .5s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes cos-vt-out {
  to { opacity: 0; transform: scale(.985); filter: blur(3px); }
}
@keyframes cos-vt-in {
  from { opacity: 0; transform: translateY(14px) scale(1.006); filter: blur(5px); }
}
/* Téléphones : sans flou (plus fluide sur les appareils modestes) */
@media (max-width: 760px) {
  @keyframes cos-vt-out { to { opacity: 0; transform: scale(.99); } }
  @keyframes cos-vt-in  { from { opacity: 0; transform: translateY(12px); } }
}

/* Navigateurs sans transition native : fondu à l'arrivée (opacité seule : ne perturbe pas les éléments fixes) */
@supports not (view-transition-name: none) {
  @media (prefers-reduced-motion: no-preference) {
    body { animation: cos-fade-in .38s ease-out both; }
  }
}
@keyframes cos-fade-in { from { opacity: 0; } }

/* Liseré de chargement en haut de l'écran (assets/js/cos-transitions.js), visible si la page suivante tarde */
.cos-nav-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 2147483600; pointer-events: none;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, rgba(230, 205, 149, 0), #e6cd95 30%, #f5e2b3 70%, #e6cd95);
  box-shadow: 0 0 10px rgba(230, 205, 149, .6), 0 0 2px rgba(230, 205, 149, .9);
  animation: cos-nav-progress 9s cubic-bezier(.1, .7, .2, 1) forwards;
}
@keyframes cos-nav-progress {
  0%   { transform: scaleX(0); }
  10%  { transform: scaleX(.35); }
  40%  { transform: scaleX(.7); }
  100% { transform: scaleX(.92); }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .cos-nav-progress { animation: none; transform: scaleX(.6); }
}