/* YouTube Video Popup — Public Styles v1.7.0 */

:root {
	--yvp-margin: 20px;
	--yvp-duration: 0.5s;
	--yvp-ease: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ── Bulle ──────────────────────────────────────────── */
.yvp-bubble {
	position: fixed;
	bottom: var(--yvp-margin);
	z-index: 9999;
	border-radius: 50%;
	cursor: pointer;
	overflow: hidden;
	box-shadow: 0 8px 32px rgba(0,0,0,0.4);
	outline: none;
	background: #000;
	transition:
		width         var(--yvp-duration) var(--yvp-ease),
		height        var(--yvp-duration) var(--yvp-ease),
		bottom        var(--yvp-duration) var(--yvp-ease),
		right         var(--yvp-duration) var(--yvp-ease),
		left          var(--yvp-duration) var(--yvp-ease),
		border-radius var(--yvp-duration) var(--yvp-ease),
		box-shadow    0.25s ease;
}

.yvp-bubble.yvp-bottom-right { right: var(--yvp-margin); }
.yvp-bubble.yvp-bottom-left  { left:  var(--yvp-margin); }

.yvp-bubble:not(.yvp-expanded):hover {
	box-shadow: 0 12px 40px rgba(0,0,0,0.55);
}

.yvp-bubble:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

/* ── Agrandi : quart d'écran ────────────────────────── */
.yvp-bubble.yvp-expanded {
	width:  50vw !important;
	height: 50vh !important;
	bottom: 0 !important;
	border-radius: 16px 16px 0 0 !important;
	cursor: default;
}

.yvp-bubble.yvp-expanded.yvp-bottom-right { right: 0 !important; }
.yvp-bubble.yvp-expanded.yvp-bottom-left  { left:  0 !important; }

/* ── Conteneur iframe ───────────────────────────────── */
/* Les styles de l'iframe elle-même sont gérés par JS   */
.yvp-bubble-video {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.yvp-bubble.yvp-expanded .yvp-bubble-video {
	pointer-events: all;
}

/* ── Icône play ─────────────────────────────────────── */
.yvp-play-icon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	pointer-events: none;
}

.yvp-play-icon::before {
	content: '';
	position: absolute;
	width: 42%;
	height: 42%;
	border-radius: 50%;
	background: rgba(0,0,0,0.45);
}

.yvp-play-icon svg {
	position: relative;
	width: 22%;
	height: 22%;
	z-index: 1;
	filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
}

.yvp-bubble.yvp-expanded .yvp-play-icon {
	display: none;
}

/* ── Bouton fermer ───────────────────────────────────── */
.yvp-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 32px;
	height: 32px;
	border: none;
	background: rgba(0,0,0,0.6);
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	z-index: 10;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease 0.3s, background 0.2s ease;
}

.yvp-bubble.yvp-expanded .yvp-close {
	opacity: 1;
	pointer-events: all;
}

.yvp-close:hover { background: rgba(0,0,0,0.85); }
.yvp-close svg { width: 18px; height: 18px; }

/* ── Overlay ─────────────────────────────────────────── */
.yvp-overlay {
	position: fixed;
	inset: 0;
	background: transparent;
	z-index: 9998;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s ease, background 0.35s ease;
}

.yvp-overlay.yvp-visible {
	opacity: 1;
	pointer-events: all;
	background: rgba(0,0,0,0.35);
}

/* ── Mobile ──────────────────────────────────────────── */
/* hide_on_mobile est géré par JS (display:none inline).  */
/* Ce media query gère uniquement la taille agrandie      */
/* sur petit écran quand l'option est désactivée.         */
@media (max-width: 767px) {
	.yvp-bubble.yvp-expanded {
		width:  100vw !important;
		height: 45vh !important;
		border-radius: 0 !important;
	}
	.yvp-bubble.yvp-expanded.yvp-bottom-right,
	.yvp-bubble.yvp-expanded.yvp-bottom-left {
		right: 0 !important;
		left:  0 !important;
	}
}