.ssav-video-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: var(--ssav-ratio, 16 / 9);
	overflow: hidden;
	background: #000;
}

.ssav-video-wrap .ssav-poster,
.ssav-video-wrap .ssav-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ssav-video-wrap .ssav-poster {
	z-index: 2;
	transition: opacity 0.4s ease;
}

.ssav-video-wrap .ssav-video {
	z-index: 1;
}

/* Plein écran natif (bouton du lecteur natif, la vidéo elle-même devient
   l'élément :fullscreen, pas le wrapper) : le "cover" ci-dessus recadrerait
   une vidéo portrait pour remplir un écran 16:9 en la zoomant/coupant en
   haut et en bas. En plein écran, on préserve l'image entière à la place
   (bandes noires de chaque côté plutôt qu'un recadrage). */
.ssav-video:fullscreen,
.ssav-video:-webkit-full-screen {
	object-fit: contain;
	background: #000;
}

.ssav-play-btn {
	position: absolute;
	top: var(--ssav-btn-y, 50%);
	left: var(--ssav-btn-x, 50%);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 105px;
	height: 105px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--ssav-btn-bg, rgba(0, 0, 0, 0.55));
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
	cursor: pointer;
	transform: translate(-50%, -50%) scale(1);
	transition: transform 0.15s ease-out, opacity 0.35s ease, filter 0.2s ease;
}

.ssav-play-btn:hover {
	filter: brightness(1.2);
}

.ssav-play-icon {
	width: var(--ssav-icon-size, 43px);
	height: var(--ssav-icon-size, 43px);
	fill: var(--ssav-btn-icon, #fff);
	/* taille et décalage réglables par combo (position/taille figées en dur au
	   pixel près auparavant, non vérifiables visuellement de mon côté) */
	transform: translate(var(--ssav-icon-x, 0px), var(--ssav-icon-y, 0px));
}

/* Étape 1 : légère pression au clic */
.ssav-video-wrap.is-pressed .ssav-play-btn {
	transform: translate(-50%, -50%) scale(0.85);
}

/* Étape 2 : zoom vers l'utilisateur + fondu, poster qui disparaît en même temps */
.ssav-video-wrap.is-launching .ssav-play-btn {
	transform: translate(-50%, -50%) scale(1.8);
	opacity: 0;
	transition: transform 0.4s ease-in, opacity 0.4s ease-in;
}

.ssav-video-wrap.is-launching .ssav-poster {
	opacity: 0;
}

.ssav-video-wrap.is-playing .ssav-poster {
	visibility: hidden;
	pointer-events: none;
}

.ssav-video-wrap.is-playing .ssav-video {
	z-index: 2;
}

/* Bouton play : caché une fois la vidéo lancée, mais peut réapparaître seul
   (sans le poster) pendant une pause en cours de vidéo — voir .is-paused. */
.ssav-video-wrap.is-playing .ssav-play-btn {
	opacity: 0;
	pointer-events: none;
}

/* Pause en cours de vidéo (pas la fin) : seul le bouton play refait un
   fondu retour, la vidéo/l'interface native restent affichées derrière. */
.ssav-video-wrap.is-playing.is-paused .ssav-play-btn {
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%, -50%) scale(1);
	transition: opacity 0.35s ease;
}

/* Flottement (zoom lent en boucle) sur le bouton play, tant qu'il est au repos.
   Amplitude, vitesse et ombre pilotées par les custom properties injectées
   par combo (voir --ssav-float-* dans le shortcode) ; les valeurs par défaut
   ci-dessous ne servent que de filet si jamais l'attribut style est absent. */
@keyframes ssav-float {
	0%,
	100% {
		transform: translate(-50%, -50%) scale(var(--ssav-float-min, 1));
		box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35), 0 0 var(--ssav-float-shadow-width, 20px) var(--ssav-float-shadow-min, rgba(255, 255, 255, 0));
	}
	50% {
		transform: translate(-50%, -50%) scale(var(--ssav-float-max, 1.112));
		box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35), 0 0 var(--ssav-float-shadow-width, 20px) var(--ssav-float-shadow-max, rgba(255, 255, 255, 0.6));
	}
}

.ssav-video-wrap.ssav-float-btn:not(.is-pressed):not(.is-launching):not(.is-playing) .ssav-play-btn {
	animation: ssav-float var(--ssav-float-speed, 2.6s) ease-in-out infinite;
}