/**
 * Vidéo — façade cliquable.
 *
 * Figma : cadre de 744 × 412, soit un rapport proche du 16/9, bouton de
 * lecture de 123 px centré.
 *
 * Emplacement : assets/css/components/video.css
 */

.video {
	position: relative;
	aspect-ratio: 744 / 412;   /* proportions Figma */
	overflow: hidden;
	border-radius: var(--radius-lg);
	background-color: var(--e4y-grey-100);
}

.video__poster,
.video__cadre {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

/* Le bouton couvre toute la vignette : la cible est l'image entière, comme sur
   n'importe quel lecteur. */
.video__lecture {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--e4y-white);
	cursor: pointer;
	transition: transform var(--duration) var(--ease);
}

.video__icone {
	width: 8.5%;               /* Figma : 123 px pour 744 de large */
	min-width: 48px;
	height: auto;
	filter: drop-shadow(0 2px 8px rgb(0 0 0 / 35%));
}

.video__lecture:hover .video__icone,
.video__lecture:focus-visible .video__icone {
	transform: scale(1.06);
}

/* Une fois le lecteur chargé, la façade s'efface. */
.video--lance .video__poster,
.video--lance .video__lecture {
	display: none;
}