/*
 * Utilitaire d'apparition au scroll — réutilisable sur TOUTES les pages du
 * thème (précision de Damien, 2026-09-01 : "globalement, sur toutes les
 * pages", pas seulement l'accueil). Un seul mécanisme partagé plutôt qu'un
 * réglage par section : la liste de sélecteurs ci-dessous doit rester
 * synchronisée avec celle d'assets/js/scroll-reveal.js (commentaire
 * identique dans les deux fichiers) — classes de section déjà communes à la
 * quasi-totalité des gabarits du thème (.md-vsec, .md-benefits, .md-catalog,
 * etc.), pas une classe .md-reveal posée à la main dans chaque template PHP :
 * évite de modifier une douzaine de fichiers de page déjà denses (7 pages
 * ville, DJ, prestation technique, sonorisation...) et garantit qu'aucune
 * section n'est oubliée si un futur gabarit réutilise les mêmes classes.
 *
 * Distance et easing mesurés en direct sur drive-turismo.fr (.reveal /
 * .reveal.in : opacity 0->1, transform translateY(26px)->none, transition
 * 0.7s ease-out, désactivée sous prefers-reduced-motion) — translateY repris
 * à 24px (dans la fourchette 20-30px demandée par Damien), transition
 * légèrement raccourcie (0.6s) pour rester sobre sur des pages déjà denses.
 *
 * .md-hero est volontairement absent de cette liste : premier contenu
 * visible de la page (au-dessus de la ligne de flottaison), un fade y
 * créerait un flash de contenu invisible plutôt qu'un effet discret.
 *
 * .md-reservation-shell (page /reservation/, tunnel hub-reservation) est
 * volontairement absent aussi : cette page n'a quasiment rien au-dessus,
 * le tunnel serait donc animé dès le chargement, et un translateY sur
 * l'ancêtre direct d'un outil tiers avec ses propres éléments sticky
 * (.hub-wizard__progress, .hub-booking-widget) est un risque évitable pour
 * un outil de réservation qui génère du revenu — pas la même prudence
 * requise pour une simple section de contenu marketing.
 *
 * L'état "masqué" ci-dessous n'est actif que sous la classe .md-js, posée
 * en tout début de <head> par un script synchrone (header.php) avant le
 * premier rendu — sans JS (classe absente), ces sections restent visibles
 * normalement, jamais bloquées à opacity:0 pour de bon.
 */
.md-js .md-vsec,
.md-js .md-benefits,
.md-js .md-catalog,
.md-js .md-reviews,
.md-js .md-cta-banner,
.md-js .md-faq,
.md-js .md-prestations,
.md-js .md-why,
.md-js .md-section-contact,
.md-js .md-mesh,
.md-js #toutes-les-villes {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Ajoutée par assets/js/scroll-reveal.js quand la section entre dans le
   viewport (IntersectionObserver). !important nécessaire : cette classe
   seule (1 sélecteur) a une spécificité plus faible que ".md-js .md-xxx"
   (2 sélecteurs) ci-dessus et perdrait sinon face à la règle "masquée". */
.md-reveal--in {
	opacity: 1 !important;
	transform: none !important;
}

/* Jamais de mouvement imposé à qui l'a explicitement refusé côté OS — même
   principe déjà en place sur le carrousel d'avis (reviews.css) : le
   contenu reste visible immédiatement, seule l'animation disparaît. */
@media (prefers-reduced-motion: reduce) {
	.md-js .md-vsec,
	.md-js .md-benefits,
	.md-js .md-catalog,
	.md-js .md-reviews,
	.md-js .md-cta-banner,
	.md-js .md-faq,
	.md-js .md-prestations,
	.md-js .md-why,
	.md-js .md-section-contact,
	.md-js .md-mesh,
	.md-js #toutes-les-villes {
		opacity: 1;
		transform: none;
		transition: none;
	}
}