/* Gimmick « traits » en haut à droite des h2 — couleur = couleur du texte. */
h2.wp-block-heading::after {
	content: "";
	display: inline-block;
	width: 0.55em;
	height: 0.62em;
	margin-left: 0.15em;
	vertical-align: top;
	transform: translateY(-0.35em);
	transform-origin: 0 100%;
	background-color: currentColor;
	-webkit-mask: url("../images/gimmick.svg") no-repeat center / contain;
	mask: url("../images/gimmick.svg") no-repeat center / contain;
}

/* Apparition au scroll (classe posée par le script du thème, front uniquement). */
@media (prefers-reduced-motion: no-preference) {
	.minibus-anim h2.wp-block-heading {
		opacity: 0;
		transform: translateY(0.6rem);
		transition: opacity 0.6s ease-out, transform 0.6s ease-out;
	}

	.minibus-anim h2.wp-block-heading.is-visible {
		opacity: 1;
		transform: none;
	}

	/* Cartes : montée en fondu, décalage posé en JS entre cartes apparaissant ensemble. */
	.minibus-anim .is-style-carte {
		opacity: 0;
		transform: translateY(1.5rem);
		transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.minibus-anim .is-style-carte.is-visible {
		opacity: 1;
		transform: none;
	}

	.minibus-anim h2.wp-block-heading::after {
		opacity: 0;
		transform: translateY(-0.35em) scale(0) rotate(-25deg);
		transition: opacity 0.2s ease-out, transform 0.5s cubic-bezier(0.34, 1.8, 0.64, 1);
		transition-delay: 0.35s;
	}

	.minibus-anim h2.wp-block-heading.is-visible::after {
		opacity: 1;
		transform: translateY(-0.35em) scale(1) rotate(0);
	}
}

/* Indicateur « défiler vers le bas » posé sur la bannière. */
.minibus-hero {
	position: relative;
}

/* Calée sur le bas de la fenêtre (100svh, hors barre d'admin), sans dépasser le bas de la bannière. */
.minibus-hero .minibus-defiler {
	--minibus-defiler-marge: clamp(1rem, 4svh, 2.5rem);
	position: absolute;
	left: 50%;
	top: calc(min(100%, 100svh - var(--wp-admin--admin-bar--height, 0px)) - 3rem - var(--minibus-defiler-marge));
	margin: 0;
	transform: translateX(-50%);
}

.minibus-defiler a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--wp--preset--color--noir-nuit);
	color: var(--wp--preset--color--creme-titre);
	box-shadow: 0 0 0 2px var(--wp--preset--color--creme-titre);
}

/* Chevron. */
.minibus-defiler a::before {
	content: "";
	width: 0.7rem;
	height: 0.7rem;
	margin-top: -0.3rem;
	border-right: 3px solid currentColor;
	border-bottom: 3px solid currentColor;
	border-radius: 2px;
	transform: rotate(45deg);
}

.minibus-defiler a span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
	.minibus-defiler a {
		animation: minibus-rebond 2s ease-in-out 2; /* < 5 s : WCAG 2.2.2 */
	}

	@keyframes minibus-rebond {
		0%, 60%, 100% { transform: translateY(0); }
		30% { transform: translateY(0.5rem); }
	}
}

/* Masquée sur mobile et tablette en portrait (bannière entièrement visible). */
@media (orientation: portrait) and (max-width: 1024px) {
	.minibus-hero .minibus-defiler {
		display: none;
	}
}

/* Texte des boutons toujours crème (jamais blanc), y compris si un bloc force une couleur. */
.wp-element-button,
.wp-block-button__link {
	color: var(--wp--preset--color--creme) !important;
}

/* Marges latérales plus généreuses sur mobile (padding racine, utilisé par .has-global-padding et les alignfull). */
@media (max-width: 781px) {
	html body {
		--wp--style--root--padding-left: 2rem;
		--wp--style--root--padding-right: 2rem;
	}
}

/* Focus clavier visible sur tous les fonds : contour noir + liseré crème pour les boutons. */
a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 2px;
}

.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible,
.minibus-defiler a:focus-visible {
	outline: 3px solid var(--wp--preset--color--noir-nuit);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--wp--preset--color--creme);
}

/* Vidéo YouTube chargée au clic (vignette locale + bouton lecture). */
.minibus-video {
	background: var(--wp--preset--color--noir-nuit);
}

.minibus-video .minibus-video__lecture {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: var(--wp--preset--color--noir-nuit);
	cursor: pointer;
}

.minibus-video__lecture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.minibus-video__icone {
	position: absolute;
	top: 50%;
	left: 50%;
	width: clamp(3.5rem, 8vw, 5rem);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--wp--preset--color--noir-nuit);
	box-shadow: 0 0 0 3px var(--wp--preset--color--creme);
	transform: translate(-50%, -50%);
	transition: transform 0.2s ease-out;
}

/* Triangle lecture. */
.minibus-video__icone::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	border-style: solid;
	border-width: 0.8em 0 0.8em 1.3em;
	border-color: transparent transparent transparent var(--wp--preset--color--creme);
	transform: translate(-50%, -50%);
}

.minibus-video__lecture:hover .minibus-video__icone,
.minibus-video__lecture:focus-visible .minibus-video__icone {
	transform: translate(-50%, -50%) scale(1.1);
}

.minibus-video__lecture:focus-visible {
	outline: 3px solid var(--wp--preset--color--creme);
	outline-offset: -6px;
}

.minibus-video__note {
	margin: var(--wp--preset--spacing--10) var(--wp--style--root--padding-right) 0 var(--wp--style--root--padding-left);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

/* Intégration externe remplacée par un lien : pas de boîte au ratio vidéo. */
.minibus-embed-lien::before {
	display: none !important;
}

.minibus-embed-lien p {
	margin: 0;
	text-align: center;
}

/* Impression : tout le contenu visible, sans animation ni indicateur de scroll. */
@media print {
	.minibus-anim h2.wp-block-heading,
	.minibus-anim .is-style-carte,
	.minibus-anim h2.wp-block-heading::after {
		opacity: 1 !important;
		transform: none !important;
	}

	.minibus-defiler {
		display: none !important;
	}
}

/* Nuages décoratifs (image de fond, ignorés des lecteurs d'écran).
   Le SVG source embarque un PNG de 370 px : largeur plafonnée pour rester net. */
#intro,
#le-groupe,
#dossiers {
	position: relative;
	isolation: isolate; /* les nuages en z-index:-1 passent sous le texte, au-dessus du fond */
	overflow-x: clip; /* nuages en partie hors cadre sans scroll horizontal */
}

#intro::before,
#le-groupe::before,
#le-groupe::after,
#dossiers::before {
	content: "";
	position: absolute;
	z-index: -1;
	aspect-ratio: 474 / 248;
	background: url("../images/nuage.svg") no-repeat center / contain;
	pointer-events: none;
	/* Parallaxe souris : sens opposé, amplitude --profondeur (variables posées par minibus.js). */
	--profondeur: 20px;
	--decalage-x: 0%;
	translate:
		calc(var(--decalage-x) - var(--minibus-nx, 0) * var(--profondeur))
		calc(var(--minibus-ny, 0) * var(--profondeur) * -1);
}

/* Sous le titre « Minibus » et l'accroche. */
#intro::before {
	width: clamp(180px, 28vw, 370px);
	top: 10%;
	left: 50%;
	--decalage-x: -15%;
	--profondeur: 14px;
}

/* En haut à droite, en partie hors cadre. */
#le-groupe::before {
	--profondeur: 28px;
	width: clamp(120px, 18vw, 260px);
	top: var(--wp--preset--spacing--30);
	right: -4%;
	opacity: 0.9;
}

/* Sous le texte de présentation, à gauche. */
#le-groupe::after {
	--profondeur: 18px;
	width: clamp(160px, 24vw, 340px);
	bottom: 18%;
	left: -6%;
}

#dossiers::before {
	--profondeur: 32px;
	width: clamp(110px, 15vw, 220px);
	top: var(--wp--preset--spacing--40);
	left: 6%;
	opacity: 0.85;
}

@media (prefers-reduced-motion: no-preference) {
	#intro::before,
	#le-groupe::before,
	#le-groupe::after,
	#dossiers::before {
		animation: minibus-nuage 40s ease-in-out infinite alternate;
	}

	#le-groupe::after {
		animation-duration: 55s;
		animation-direction: alternate-reverse;
	}

	@keyframes minibus-nuage {
		from { transform: translateX(-1.5rem); }
		to { transform: translateX(1.5rem); }
	}
}

@media print {
	#intro::before,
	#le-groupe::before,
	#le-groupe::after,
	#dossiers::before {
		display: none;
	}
}