/* ═══════════════════════════════════════════════════════════════════ KAÏROMOD — Transitions de page --------------------------------------------------------------- OBJECTIF : que le changement de page ne se remarque pas. Pas qu'il soit joli — qu'il soit invisible. Tout ce qui suit découle de là. ── CE QUI REND UN CHANGEMENT DE PAGE FLUIDE ── Ce n'est pas l'animation, c'est l'absence d'attente. Une page déjà prête s'affiche d'un coup et rien ne tremble ; une page qui se charge pendant qu'on l'anime tremble quoi qu'on fasse. Le vrai travail est donc dans js/page-transitions.js, qui prépare les pages à l'avance. Ici, on se contente de ne pas nuire. ── CE QUI A ÉTÉ ESSAYÉ PUIS RETIRÉ ── Un glissement directionnel : les pages entrant par la droite à l'aller, par la gauche au retour. Élégant sur le papier, sale à l'écran, pour deux raisons qui tiennent à la nature même du procédé : · une capture de page occupe exactement le cadre ; la décaler découvre une bande de fond sur le bord opposé ; · pendant le déplacement, les deux pages se superposent en transparence et on lit le texte de l'une à travers l'autre. Aucun réglage ne supprime ces deux effets — seul l'abandon du déplacement y parvient. Il ne reste donc AUCUNE transformation : ni glissement, ni zoom, ni échelle. Le seul mouvement est une variation d'opacité, la seule qui ne puisse rien découvrir. Une barre de navigation animée à part (view-transition-name) a été retirée pour la même raison : sortir un élément de la photo y laisse un trou que son calque doit recouvrir au pixel près. Un risque réel pour un gain nul dès lors que plus rien ne glisse dessous. Support : Chrome/Edge 126+, Safari 18.2+, Opera, Samsung Internet. Ailleurs le fichier est ignoré sans erreur. ═══════════════════════════════════════════════════════════════════ */ /* NOTE — pas de scrollbar-gutter:stable ici : la gouttière réservée reste visible quand la scrollbar disparaît (modale ouverte) et laisse voir le fond de , blanc sur sa moitié haute → un liseré blanc le long du bord droit. La compensation du verrouillage se fait en padding-right (JS) + rattrapage des éléments en position:fixed dans chaque page. */ /* Activé ici, désactivé par js/page-transitions.js là où il ne peut pas être propre : mobile et webviews d'applications. */ @view-transition{ navigation: auto; } /* Le navigateur fusionne par défaut les deux plans en mode additif (plus-lighter) : correct pour son crossfade natif, mais provoque un éclair blanc entre deux pages claires → fusion normale. */ ::view-transition-image-pair(root){ isolation: auto; } ::view-transition-old(root), ::view-transition-new(root){ mix-blend-mode: normal; } /* ── L'ANCIENNE PAGE NE BOUGE PAS ET NE S'EFFACE PAS ────────────── Elle reste immobile et pleinement opaque pendant toute la durée, et sert de fond à la nouvelle. C'est ce qui garantit qu'à aucun instant on ne puisse voir à travers : deux plans semi-transparents superposés laissent passer ce qu'il y a derrière, un plan opaque non. Elle disparaît d'un coup à la fin, quand la nouvelle la recouvre entièrement — donc invisiblement. */ ::view-transition-old(root){ animation: none; } /* ── LA NOUVELLE PAGE APPARAÎT, ET C'EST TOUT ───────────────────── 160 ms : assez pour que l'œil ne perçoive pas de coupure franche, trop peu pour qu'il ait le temps de lire les deux pages à la fois. C'est ce dédoublement, et non la durée, qui se remarque — allonger pour « faire plus doux » produit exactement l'inverse. linear, et non une courbe d'accélération : sur une simple opacité, une courbe fait passer plus de temps dans les valeurs intermédiaires, donc dans le dédoublement. */ ::view-transition-new(root){ animation: km-vt-apparait 160ms linear both; } @keyframes km-vt-apparait{ from{ opacity: 0; } to{ opacity: 1; } } /* Mouvement réduit : bascule instantanée. */ @media (prefers-reduced-motion: reduce){ ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){ animation: none !important; } } /* Blocs déjà présents à l'écran quand la page arrive par une transition : js/page-transitions.js les marque pour qu'ils soient photographiés en place, sans leur animation d'entrée. Sans cela la page arrive vide et son contenu monte à l'écran juste après — deux mouvements successifs là où l'œil en attend un. !important parce que les règles .reveal vivent dans le style de chaque page et sont plus spécifiques. */ .km-deja-la{ opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; } /* ── Fondu de secours pour les retours (bouton « précédent ») ── Piloté par js/page-transitions.js, et PC uniquement : voile posé quand le navigateur ne joue PAS la transition native sur une navigation retour/avant (restauration bfcache, support partiel), puis levé en fondu. Volontairement absent du mobile : c'est ce voile, et non la transition native, qui pouvait rester bloqué sur un écran noir dans les webviews d'applications. */ html.km-return::after{ content: ""; position: fixed; inset: 0; z-index: 2147483000; /* Couleur réglable par page : un voile noir qui se lève sur une page claire produit exactement l'éclair qu'il est censé masquer. Les pages dont le haut est clair redéfinissent --km-veil ; le noir reste le défaut, c'est la couleur du corps du site. */ background: var(--km-veil, #080808); pointer-events: none; } html.km-return-lift::after{ animation: km-return-lift .3s linear both; } @keyframes km-return-lift{ from{ opacity: 1; } to{ opacity: 0; } }