/* Vidéo de fond du header d'accueil : desktop uniquement, l'image du .slideshow reste le rendu mobile */

.header-slideshow-video__player {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 1;
}

/* Recadrage type "cover" : l'iframe est dimensionnée pour couvrir le viewport entier en gardant
   le ratio 16:9, donc a fortiori le bloc, dont la hauteur est calculée en JS (100vh - header).
   Le poster reçoit exactement la même géométrie : les deux images se superposent au pixel près. */
.header-slideshow-video__player > * {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100vw;
	height: 56.25vw;
	min-width: 177.78vh;
	min-height: 100vh;
	border: 0;
}

.header-slideshow-video__player img {
	object-fit: cover;
}

/* Pas de fondu : le lecteur affiche lui-même la première image de la vidéo (attribut poster),
   identique à celle posée ici. La bascule est donc invisible d'un coup, alors qu'un fondu
   superposerait deux images décalées dès que la lecture a commencé — l'effet de fantôme. */
.header-slideshow-video__player iframe {
	opacity: 0;
}

.header-slideshow-video__player.is-playing iframe {
	opacity: 1;
}

@media (max-width: 767px) {
	.header-slideshow-video__player {
		display: none;
	}
}

/* Bouton d'ouverture de la vidéo, à côté du bouton principal du slideshow */
.header-slideshow-video-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 12px;
}

/* Le picto étant plus haut que le texte, laisser le padding vertical de .btn-white donnerait
   un bouton plus grand que celui d'à côté. La hauteur est donc fixée à celle de .btn-white
   (16px de texte + 2 x 17px de padding), et le contenu centré : le bouton garde ses 50px
   quelle que soit la taille du picto. Un <button> apporte aussi sa bordure native, à retirer. */
.btn-video {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 50px;
	padding-top: 0;
	padding-bottom: 0;
	border: 0;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.btn-video .icon-play {
	font-size: 1.4em;
	line-height: 1;
}

/* Fenêtre de lecture */
.video-modale {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0, 0, 0, 0.85);
}

.video-modale[hidden] {
	display: none;
}

.video-modale__contenu {
	position: relative;
	width: 100%;
	max-width: 1280px;
}

/* Le cadre garde le ratio 16:9 quelle que soit la largeur disponible. */
.video-modale__cadre {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	background: #000;
}

.video-modale__cadre iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.video-modale__fermer {
	position: absolute;
	right: 0;
	bottom: 100%;
	margin-bottom: 10px;
	padding: 6px 14px;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 30px;
	background: transparent;
	color: #fff;
	font-size: 14px;
	cursor: pointer;
}

.video-modale__fermer:hover,
.video-modale__fermer:focus {
	background: #fff;
	color: #000;
}

/* Empêche le défilement de la page derrière la fenêtre ouverte. */
body.video-modale-ouverte {
	overflow: hidden;
}