/* ------------------------------------------------------------- Transitions entre pages — View Transitions API cross-document. Natif, sans JavaScript : chaque navigation interne anime le passage d'une page à l'autre. Couplé au pré-rendu au survol (override/speculation-rules.php), le changement de page est instantané et fondu. Le header est apparié par nom entre l'ancienne et la nouvelle page : il reste strictement immobile (le menu collant ne clignote pas), seul le contenu de la page fond. Navigateurs sans support (Chrome/Edge 126+, Safari 18.2+) ou préférence « animations réduites » : navigation classique, rien n'est cassé — amélioration progressive. Cette feuille doit être chargée dans sur TOUTES les pages : la règle @view-transition doit exister des deux côtés de la navigation. ------------------------------------------------------------- */ @view-transition { navigation: auto; } /* Élément stable d'une page à l'autre. Header du Theme Builder Elementor Pro (template « Header final », condition « tout le site »). #site-header est le gabarit de repli du thème Hello, rendu uniquement quand aucun template Elementor ne s'applique. Un view-transition-name doit être UNIQUE dans la page : s'il matche plusieurs éléments, toute la transition est annulée. Ne pas utiliser la balise
nue : la fiche artiste en contient une seconde (.artiste-hero). Header : depuis la sortie d'Elementor, l'en-tête est
, collé par `position:sticky`. Il reste donc à la même place à l'écran d'une page à l'autre : on peut le nommer directement, sans passer par un conteneur interne comme l'imposait le montage `position:fixed` + clone d'Elementor Pro. */ .aec-header, #site-header { view-transition-name: site-header; } /* Le pied de page n'est volontairement PAS nommé : il n'est ni fixe ni collant, sa position diffère d'une page à l'autre, et le nommer le ferait peindre en plein milieu du contenu pendant la transition (l'instantané est placé selon la géométrie de la nouvelle page, dont la mise en page n'est pas encore finie). Il fait donc partie du fondu du contenu, comme le reste. */ /* Contenu : fondu simple, sans déplacement */ @keyframes vt-sortie { to { opacity: 0; } } @keyframes vt-entree { from { opacity: 0; } to { opacity: 1; } } ::view-transition-old(root) { animation: vt-sortie .18s ease both; } ::view-transition-new(root) { animation: vt-entree .28s ease both; } /* Header : parfaitement immobile pendant toute la transition. - le groupe n'est pas animé : ni déplacement ni redimensionnement ; - seul l'instantané de la NOUVELLE page est peint. Le navigateur compose les deux instantanés en « plus-lighter » : les laisser tous les deux à pleine opacité additionne leurs couleurs et surexpose le header (fond délavé) le temps de la transition. */ ::view-transition-group(site-header) { animation: none; } ::view-transition-old(site-header) { animation: none; opacity: 0; } ::view-transition-new(site-header) { animation: none; opacity: 1; } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-image-pair(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }