/*
 * EO — Lecteur vidéo Bunny : mise en forme du code court [eo_video].
 *
 * Fichier volontairement séparé du mu-plugin : les gabarits « landing page » de
 * Thrive n'impriment que les feuilles ayant un vrai fichier source. Un style
 * enregistré « en ligne seulement » y est marqué comme traité par WordPress
 * mais jamais écrit — le lecteur se retrouvait alors sans aucun style, réduit à
 * la taille intrinsèque d'une iframe, 300 × 150 px.
 *
 * Pour retoucher l'apparence : redéfinir --eo-video-radius et --eo-video-ombre,
 * ou surcharger .eo-video directement, depuis le CSS du thème ou Simple Custom
 * CSS. Cette feuille étant chargée tôt, toute règle écrite ensuite l'emporte.
 */

:root {
	--eo-video-radius: 20px;
	--eo-video-ombre: 15px 15px 50px rgba(0, 0, 0, .2);
}

.eo-video {
	position: relative;
	height: 0;
	width: 100%;
	margin: 0 auto;
	border-radius: var(--eo-video-radius);
	overflow: hidden;
	box-shadow: var(--eo-video-ombre);
}

/* Le rayon est répété sur l'iframe : certains Safari anciens découpent mal les
   éléments remplacés avec le seul overflow du parent. */
.eo-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: var(--eo-video-radius);
}

/* Affiche personnalisée : bouton plein cadre, lecteur inséré au clic. */
.eo-video-declencheur {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	cursor: pointer;
	display: block;
}

.eo-video-declencheur img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.eo-video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .65);
	transition: background .2s, transform .2s;
}

.eo-video-play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 56%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 13px 0 13px 21px;
	border-color: transparent transparent transparent #fff;
}

.eo-video-declencheur:hover .eo-video-play,
.eo-video-declencheur:focus-visible .eo-video-play {
	background: rgba(0, 0, 0, .85);
	transform: translate(-50%, -50%) scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
	.eo-video-play {
		transition: none;
	}
}