/**
 * Les mouvements du site : le passage d'une page à l'autre, et le contenu qui se dévoile au
 * défilement. Demande d'Olivier du 14/11/2026 (« là c'est très brusque »), sur le modèle de
 * cepiplus.be (un fondu montant de 0,9 s).
 *
 * TOUT EST DE CONFORT. Rien ici ne masque un contenu à qui n'exécute pas le script : la classe
 * `.mga-app` est posée par apparition.js, jamais par le balisage. Et tout s'éteint sous
 * `prefers-reduced-motion`.
 */

/* ---------------------------------------------------------------- 1. d'une page à l'autre */

/* Le fondu enchaîné du navigateur entre deux pages du site (Chrome, Edge, Safari récents) :
   l'ancienne page ne disparaît plus d'un coup, elle se fond dans la nouvelle. Aucun script. */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}

	::view-transition-old(root),
	::view-transition-new(root) {
		animation-duration: 0.38s;
		animation-timing-function: ease;
	}

	/* PAS DE `view-transition-name` SUR L'EN-TÊTE. Je l'avais posé le 14/11 pour qu'il reste en
	   place pendant le fondu : la propriété crée un CONTEXTE D'EMPILEMENT, en permanence et pas
	   seulement pendant la transition. Les déroulants du menu se retrouvaient enfermés dans
	   l'en-tête et passaient sous le diaporama (signalé par Olivier dans l'heure). Sans nom,
	   l'en-tête se fond avec le reste — et comme il est identique d'une page à l'autre, cela ne
	   se voit pas. */

	/* Les navigateurs qui ne connaissent pas ce fondu (Firefox) : le contenu arrive en douceur.
	   Une ANIMATION et non une transition : elle se joue seule au chargement, sans script, et
	   se termine toujours à l'opacité 1. */
	@supports not (view-transition-name: none) {
		#brx-content {
			animation: mga-entree 0.5s ease-out both;
		}
	}
}

@keyframes mga-entree {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* -------------------------------------------------------------------- 2. au défilement */

/* `translate` et non `transform` : c'est une propriété à part, qui ne remplace pas un `transform`
   que l'élément porterait déjà (survol d'une carte, centrage). */
.mga-app:not(.mga-app--vu) {
	opacity: 0;
	translate: 0 28px;
}

.mga-app {
	transition: opacity 0.85s cubic-bezier(0.2, 0.6, 0.2, 1), translate 0.85s cubic-bezier(0.2, 0.6, 0.2, 1);
	transition-delay: var(--mga-app-delai, 0ms);
	will-change: opacity, translate;
}

.mga-app.mga-app--vu {
	opacity: 1;
	translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
	.mga-app,
	.mga-app:not(.mga-app--vu) {
		opacity: 1;
		translate: none;
		transition: none;
	}
}

/* Une page imprimée avant d'avoir été parcourue doit être entière. */
@media print {
	.mga-app,
	.mga-app:not(.mga-app--vu) {
		opacity: 1 !important;
		translate: none !important;
	}
}