/* Vidéo YouTube en arrière-plan du bandeau de l'accueil uniquement : recadrée pour couvrir, logo par-dessus. */
.mb-hero {
	overflow: hidden;
	position: relative;
}

.mb-bandeau-video {
	bottom: 0;
	container-type: size;
	left: 0;
	margin: 0 !important; /* le thème limite la largeur des éléments d'un groupe (820 px) : on veut le bandeau entier */
	max-width: none !important;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	width: auto !important;
	z-index: 0;
}

.mb-bandeau-video iframe {
	border: 0;
	height: 100%;
	left: 50%;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%) scale(1.15); /* un peu plus grand que le cadre : cache les bordures de YouTube */
	transition: opacity 0.9s ease;
	width: 100%;
}

/* Recadrage « cover » d'une vidéo 16/9, quelle que soit la forme du bandeau (ordinateur, tablette, téléphone). */
@supports (width: 1cqw) {
	.mb-bandeau-video iframe {
		height: max(100cqh, 56.25cqw);
		width: max(100cqw, 177.78cqh);
	}
}

/* Dès que la vidéo joue, un fond noir masque complètement la photo derrière (aucun liseré visible sur les bords). */
.mb-bandeau-video.is-ready {
	background: #000;
}

.mb-bandeau-video.is-ready iframe {
	opacity: 1;
}

/* Avec une vidéo, le bandeau de l'accueil occupe toute la largeur, collé sous l'en-tête (le thème le décale de 12 px et de 19 px). */
.mb-front .mb-hero {
	margin: 0 -0.75rem !important;
	max-width: none !important;
	width: calc(100% + 1.5rem) !important;
}

/* Plus d'espace entre le bandeau et le bloc d'introduction (on y voyait la photo du fond derrière la vidéo). */
.mb-front .mb-hero {
	margin-bottom: 0 !important;
}

.mb-front .mb-hero + * {
	margin-block-start: 0 !important;
}

/* Le logo reste au-dessus de la vidéo. */
.mb-hero .mb-hero-logo {
	position: relative;
	z-index: 1;
}