/**
 * Lecteur en surimpression — la vidéo par-dessus la page.
 *
 * Comme la visionneuse, pas de fichier dans template-parts/components/ : le
 * balisage est créé par main.js au premier clic. C'est ce qui justifie la
 * surimpression plutôt qu'une iframe posée dans la page — rien n'est demandé
 * à la plateforme, et aucun traceur n'est déposé, tant que personne n'a
 * demandé à regarder.
 *
 * Le lien qui l'ouvre reste du HTML ordinaire : sans JavaScript, il ouvre la
 * vidéo dans un onglet.
 *
 * L'élément est un <dialog> : la touche Échap, le piège au clavier, le fond
 * inerte et le retour du focus sont fournis par le navigateur.
 *
 * Emplacement : assets/css/components/video-modal.css
 */

.video-modal {
	/* Même correctif que la visionneuse : le reset du thème efface le margin
	   auto par lequel le navigateur centre un dialogue modal. */
	inset: 0;
	margin: auto;

	/* La hauteur commande autant que la largeur. Une boîte réglée sur la seule
	   largeur déborderait par le haut sur un écran bas : le terme en vh borne
	   le cadre à 80 % de la hauteur, format 16/9 compris. */
	width: min(92vw, calc(80vh * 16 / 9), 1200px);

	padding: 0;
	background: none;
	border: 0;
	overflow: visible;
}

.video-modal::backdrop {
	background-color: var(--e4y-overlay-dark);
}

.video-modal__cadre {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--radius-lg);
}

/* Sur mobile, dans l'angle du cadre : la boîte occupe presque toute la
   largeur, un bouton posé au dehors sortirait de l'écran. */
.video-modal__fermer {
	position: absolute;
	inset-block-start: var(--space-3);
	inset-inline-end: var(--space-3);
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--space-7);
	height: var(--space-7);
	padding: 0;
	font-size: var(--fs-h3);
	line-height: 1;
	color: var(--color-text);
	background-color: var(--e4y-white);
	border: 0;
	border-radius: var(--radius-full);
	box-shadow: var(--shadow-md);
	cursor: pointer;
	transition: color var(--duration) var(--ease);
}

.video-modal__fermer:hover,
.video-modal__fermer:focus-visible {
	color: var(--color-accent);
}

/* Dès qu'il y a de la place autour du cadre, le bouton en sort : il cesse
   ainsi de masquer l'image. Même position que la visionneuse. */
@media (min-width: 768px) {

	.video-modal__fermer {
		inset-block-start: calc(-1 * var(--space-5));
		inset-inline-end: calc(-1 * var(--space-5));
	}

}