/*
 * tib-motion — apparition des blocs au défilement, sur tout le site.
 * Classes posées par tib-motion.js, seulement sous la ligne de flottaison.
 *
 * a : la règle du 30/09 (DECISIONS) — 10 px, 0,34 s, 60 ms entre les cartes.
 *     Retenue par Sven le 07/10/2026 : c'est la variante par défaut.
 * b : la version fluide, gardée pour comparer (?anim=b).
 */
html[data-tm="a"] {
	--tm-ease: cubic-bezier(.25, .46, .45, .94);
	--tm-dur: .34s;
	--tm-y: 10px;
	--tm-y-carte: 10px;
	--tm-pas: 60ms;
	--tm-ligne: .34s;
	--tm-pas-ligne: 50ms;
	--tm-filet: .34s;
	--tm-image: .45s;
	--tm-apres: 60ms;
}
html[data-tm="b"] {
	--tm-ease: cubic-bezier(.16, 1, .3, 1);
	--tm-dur: .6s;
	--tm-y: 16px;
	--tm-y-carte: 20px;
	--tm-pas: 70ms;
	--tm-ligne: .7s;
	--tm-pas-ligne: 80ms;
	--tm-filet: .5s;
	--tm-image: .9s;
	--tm-apres: 100ms;
}

.tm { --tm-d: calc(var(--tm-i, 0) * var(--tm-pas)); }

/* Blocs et cartes : fondu et montée */
.tm-fade,
.tm-card,
.tm-st .qodef-m-subtitle,
.tm-st .qodef-m-text {
	opacity: 0;
	transform: translate3d(0, var(--tm-y), 0);
}
.tm-card { transform: translate3d(0, var(--tm-y-carte), 0); }

.tm-fade.is-in,
.tm-card.is-in,
.tm-st.is-in .qodef-m-subtitle {
	opacity: 1;
	transform: none;
	transition:
		opacity var(--tm-dur) var(--tm-ease) var(--tm-d),
		transform var(--tm-dur) var(--tm-ease) var(--tm-d);
}

/* Titres de section : le filet du surtitre se trace, le titre monte ligne par
   ligne derrière un cache, le texte suit. */
.tm-st .qodef-m-subtitle::after { clip-path: inset(0 100% 0 0); }
.tm-st.is-in .qodef-m-subtitle::after {
	clip-path: inset(0 0 0 0);
	transition: clip-path var(--tm-filet) var(--tm-ease) calc(var(--tm-d) + 120ms);
}

.tm-w {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	/* place pour les accents et les jambages, sans changer la ligne */
	padding: .12em .08em .18em 0;
	margin: -.12em -.08em -.18em 0;
}
.tm-wi { display: inline-block; }
.tm-st .tm-wi { transform: translate3d(0, 115%, 0); }
.tm-st.is-in .tm-wi {
	transform: none;
	transition: transform var(--tm-ligne) var(--tm-ease)
		calc(var(--tm-d) + var(--tm-apres) + var(--tm-l, 0) * var(--tm-pas-ligne));
}
.tm-st--nu.is-in .tm-wi {
	transition-delay: calc(var(--tm-d) + var(--tm-l, 0) * var(--tm-pas-ligne));
}

.tm-st.is-in .qodef-m-text {
	opacity: 1;
	transform: none;
	transition:
		opacity var(--tm-dur) var(--tm-ease) calc(var(--tm-d) + var(--tm-apres) * 2 + var(--tm-nl, 1) * var(--tm-pas-ligne)),
		transform var(--tm-dur) var(--tm-ease) calc(var(--tm-d) + var(--tm-apres) * 2 + var(--tm-nl, 1) * var(--tm-pas-ligne));
}

/* Images : dévoilées de bas en haut, l'image ne bouge pas */
.tm-img { clip-path: inset(100% 0 0 0); }
.tm-img.is-in {
	clip-path: inset(0 0 0 0);
	transition: clip-path var(--tm-image) var(--tm-ease) var(--tm-d);
}

@media (prefers-reduced-motion: reduce) {
	.tm, .tm *, .tm::after, .tm *::after {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
		transition: none !important;
	}
}