/* Transition entre deux pages (05/11/2026, demande d'Ali, validée sur téléphone).
   Effet relevé dans le code d'exoape.com : la page quittée s'envole (×1,3, −7°, une demi-hauteur vers le haut)
   et s'assombrit ; la nouvelle monte par-dessus sous un rideau qui se lève, son contenu faisant le geste inverse.
   Ici sans application : les transitions de vue du navigateur entre deux documents (Chrome, Edge, Safari 18.2+).
   Ailleurs, la page change normalement. Le renommage de la page quittée est fait par transition.js.
   Maquette : chargé par les 51 pages du site, après a11y.js ; l'apparition des titres est dans base.css (.ln).
   Site WordPress : même fichier, dans mu-plugins/charte/ (charte.php) ; les titres sont dans complement.css. */

@view-transition { navigation: auto; }

:root {
  --tp-duree: 1s;
  --tp-courbe: cubic-bezier(.496, .004, 0, 1);   /* « M0,0 C0.496,0.004 0,1 1,1 » chez eux */
}

/* Le fond derrière les deux pages : ce qu'on voit sous la page quittée quand elle tourne */
::view-transition { background: #0d0e13; }   /* --ink de la charte */

/* La page quittée, renommée au départ (transition.js) pour ne pas être appariée à la nouvelle */
html.tp-sortie { view-transition-name: tp-sortie; }
::view-transition-group(tp-sortie) { z-index: 1; animation: none; }
::view-transition-old(tp-sortie) {
  animation: tp-envol var(--tp-duree) var(--tp-courbe) both;
}

/* La nouvelle page : le rideau sur le groupe (fixe à l'écran), le geste sur l'image (dessous) */
::view-transition-group(root) {
  z-index: 2;
  animation: tp-rideau var(--tp-duree) var(--tp-courbe) both;
}
::view-transition-new(root) {
  animation: tp-arrivee var(--tp-duree) var(--tp-courbe) both;
}
::view-transition-old(root) { animation: none; display: none; }   /* si la page quittée n'a pas été renommée */

@keyframes tp-envol {
  from { transform: none; opacity: 1; }
  to   { transform: translateY(-50vh) rotate(-7deg) scale(1.3); opacity: .06; }   /* sur le fond presque noir, l'opacité assombrit
     comme leur voile (brightness donnerait le même rendu, mais un filtre coûte bien plus cher au téléphone) */
}
@keyframes tp-rideau {
  from { clip-path: polygon(0% 100%, 100% 110%, 100% 100%, 0% 100%); }
  to   { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
}
@keyframes tp-arrivee {
  from { transform: translateY(50vh) rotate(7deg) scale(1.3); }
  to   { transform: none; }
}

/* Moins de mouvement (système ou module d'accessibilité) : un fondu court */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root) { animation: none; }
  ::view-transition-old(tp-sortie) { animation: tp-fondu-sortie .25s ease both; }
  ::view-transition-new(root) { animation: tp-fondu-entree .25s ease both; }
}
html[data-a11y-pause]::view-transition-group(root) { animation: none; }
html[data-a11y-pause]::view-transition-old(tp-sortie) { animation: tp-fondu-sortie .25s ease both; }
html[data-a11y-pause]::view-transition-new(root) { animation: tp-fondu-entree .25s ease both; }
@keyframes tp-fondu-sortie { to { opacity: 0; } }
@keyframes tp-fondu-entree { from { opacity: 0; } }

/* Arrivée par la transition : les titres attendent que le rideau soit levé (transition.js) */
html.tp-attente .ln:not(.wipe .ln) > span {
  transform: translateY(100%) rotate(7deg) !important;
  opacity: 0 !important;
  transition: none !important;
}