@charset "UTF-8";
/* Transitions de page — Elsa Clemente
   ==========================================================================

   Le navigateur photographie la page que l'on quitte, prépare celle vers
   laquelle on va, puis fait passer de l'une à l'autre. Il fait tout cela seul :
   ce fichier ne décrit que la dernière étape, l'apparence du passage.

   Rien ici ne met en page quoi que ce soit. Aucune propriété déclarée ne
   s'applique à un élément de la page hors du temps de la transition, à
   l'exception de `view-transition-name`, qui ne fait que désigner ce qui doit
   être photographié à part. Il n'y a donc aucun conflit possible avec la
   feuille de Divi ni avec celle du personnalisateur.

   Sommaire
     1. Activation
     2. Réglages
     3. Fondu enchaîné du contenu
     4. Éléments qui ne bougent pas
     5. Mouvement réduit
   ========================================================================== */

/* 1. Activation ------------------------------------------------------------ */

/* La page que l'on quitte et celle vers laquelle on va doivent toutes deux
   porter cette règle : c'est la condition posée par la spécification. La
   feuille étant mise en file sur tout le site public, elle est remplie partout,
   et nulle part ailleurs — un lien vers l'administration, vers Calendly ou vers
   un paiement Stripe reste une navigation ordinaire, sans transition. */
@view-transition {
	navigation: auto;
}

/* 2. Réglages -------------------------------------------------------------- */

:root {
	/* La page sortante s'efface plus vite que la nouvelle n'arrive : l'œil
	   suit ce qui apparaît, pas ce qui disparaît. Ces deux durées sont le seul
	   réglage à toucher pour rendre l'effet plus vif ou plus ample. */
	--ec-page-out: 240ms;
	--ec-page-in: 320ms;

	/* Remontée du contenu entrant. Au-delà d'une dizaine de pixels, le
	   glissement se remarque comme un effet ; en deçà, il ne se lit plus que
	   comme une arrivée. */
	--ec-page-rise: 8px;

	/* Même courbe que le menu (assets/css/menu.css) : départ franc, arrivée
	   amortie. Une navigation et un panneau qui s'ouvrent sur la même
	   accélération donnent l'impression d'une seule mécanique. */
	--ec-page-ease: cubic-bezier(.22, 1, .36, 1);
}

/* 3. Fondu enchaîné du contenu --------------------------------------------- */

/* Par défaut, les deux images sont mélangées en `plus-lighter`, qui additionne
   les luminosités. C'est exact tant que les deux opacités sont rigoureusement
   complémentaires ; dès que les durées diffèrent, leur somme passe sous 1 et
   l'écran s'assombrit au milieu du fondu.

   On repasse donc en empilement normal : la nouvelle page est peinte par-dessus
   l'ancienne et la recouvre à mesure qu'elle apparaît. Aucun instant de la
   transition ne laisse voir le fond du navigateur, et les durées redeviennent
   libres. */
::view-transition-image-pair(root) {
	isolation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
	mix-blend-mode: normal;
}

::view-transition-old(root) {
	animation: ec-page-out var(--ec-page-out) ease-in both;
}

::view-transition-new(root) {
	animation: ec-page-in var(--ec-page-in) var(--ec-page-ease) both;
}

@keyframes ec-page-out {
	to {
		opacity: 0;
	}
}

@keyframes ec-page-in {
	from {
		opacity: 0;
		transform: translateY(var(--ec-page-rise));
	}
}

/* 4. Éléments qui ne bougent pas -------------------------------------------- */

/* Le header est photographié à part : il n'entre pas dans l'image qui glisse,
   il ne bouge donc pas d'un pixel pendant que le contenu se renouvelle. C'est
   ce qui sépare une transition de page d'un fondu au blanc — le cadre reste, le
   contenu change. */
.ec-transitions #main-header {
	view-transition-name: ec-header;
}

/* D'une page à l'autre les deux headers sont presque toujours identiques : leur
   fondu ne se voit pas. Il n'a de matière qu'en quittant une page défilée, où
   le header est translucide et porte une ombre, pour un haut de page où il est
   opaque. On l'abrège pour que ce passage soit terminé avant l'arrivée du
   contenu. */
::view-transition-group(ec-header),
::view-transition-old(ec-header),
::view-transition-new(ec-header) {
	animation-duration: 180ms;
}

/* Un panneau ouvert au moment du clic — mega-menu déroulé sous le curseur, menu
   mobile plein écran — fait partie du header. Photographié à part, il resterait
   affiché, figé, pendant toute la transition, avant de disparaître d'un coup à
   l'arrivée. On rend donc le header à l'image de la page : il s'efface avec
   elle, panneau compris.

   Les deux premières classes sont posées par le menu du thème enfant
   (assets/js/menu.js) ; la troisième couvre le menu mobile de Divi, au cas où
   EC_MENU_MODE repasserait à 'off'. */
.ec-transitions.ec-nav-open #main-header,
.ec-transitions.ec-mobile-open #main-header,
.ec-transitions #main-header:has(.mobile_nav.opened) {
	view-transition-name: none;
}

/* La barre d'administration ne concerne que les personnes connectées, mais
   elle est fixée en haut de l'écran : sans traitement, elle glisserait avec le
   contenu à chaque navigation. */
.ec-transitions #wpadminbar {
	view-transition-name: ec-adminbar;
}

/* 5. Mouvement réduit ------------------------------------------------------- */

/* Le site coupe déjà le défilement fluide et les animations du menu quand le
   système demande à réduire les mouvements (js/smooth-scroll.js et la section 8
   de assets/css/menu.css). La navigation suit la même règle : la transition
   n'est pas raccourcie, elle est annulée — le navigateur reprend son
   enchaînement ordinaire, sans rien attendre.

   Les deux blocs disent la même chose de deux façons. Le second ne sert que si
   l'imbrication de `@view-transition` dans une règle conditionnelle n'était pas
   honorée : les images seraient alors échangées sans animation. */
@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}

	::view-transition-group(root),
	::view-transition-old(root),
	::view-transition-new(root),
	::view-transition-group(ec-header),
	::view-transition-old(ec-header),
	::view-transition-new(ec-header) {
		animation: none !important;
	}
}