/* Divi Fullscreen Video Slider */
.dfvs-slider {
	position: relative;
	width: 100%;
	height: var(--dfvs-height, 100vh);
	min-height: 420px;
	overflow: hidden;
	background: #000;
	color: #fff;
}

.dfvs-slides,
.dfvs-slide,
.dfvs-media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.dfvs-slide {
	opacity: 0;
	pointer-events: none;
	z-index: 1;
	transition: opacity var(--dfvs-transition, 600ms) ease;
}

.dfvs-slide.is-active {
	opacity: 1;
	pointer-events: auto;
	z-index: 2;
}

.dfvs-transition-slide .dfvs-slide {
	transform: translateX(100%);
	transition: transform var(--dfvs-transition, 600ms) ease, opacity var(--dfvs-transition, 600ms) ease;
}
.dfvs-transition-slide .dfvs-slide.is-active {
	transform: translateX(0);
}
.dfvs-transition-slide .dfvs-slide:not(.is-active) {
	opacity: 0;
}

.dfvs-media {
	overflow: hidden;
	background: #000;
}
.dfvs-media video,
.dfvs-youtube iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: var(--dfvs-fit, cover);
	border: 0;
}
.dfvs-youtube iframe {
	object-fit: cover;
	transform: scale(1.002);
}

.dfvs-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.08) 25%, rgba(0,0,0,.55) 100%);
	pointer-events: none;
}

.dfvs-content {
	position: absolute;
	z-index: 5;
	left: 8%;
	right: 8%;
	bottom: 16%;
	max-width: 760px;
	text-shadow: 0 1px 10px rgba(0,0,0,.45);
}
.dfvs-content h2 {
	margin: 0 0 12px;
	color: #fff;
	font-size: clamp(30px, 5vw, 72px);
	line-height: 1.05;
}
.dfvs-body {
	font-size: clamp(16px, 1.6vw, 22px);
	line-height: 1.5;
}
.dfvs-content-button {
	margin-top: 20px;
}

.dfvs-controls {
	position: absolute;
	z-index: 10;
	left: 6%;
	right: 6%;
	bottom: 32px;
	display: flex;
	align-items: center;
	gap: 10px;
	height: 40px;
	opacity: .95;
}
.dfvs-control {
	appearance: none;
	border: 0;
	background: transparent;
	color: #fff;
	width: 34px;
	height: 34px;
	padding: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	text-shadow: 0 1px 4px rgba(0,0,0,.8);
}
.dfvs-control:focus-visible,
.dfvs-progress:focus-visible,
.dfvs-arrow:focus-visible,
.dfvs-dot:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.dfvs-pause { display: none; }
.dfvs-slide.is-playing .dfvs-play { display: none; }
.dfvs-slide.is-playing .dfvs-pause { display: inline-flex; }

.dfvs-progress {
	flex: 1;
	height: 6px;
	border-radius: 999px;
	background: rgba(255,255,255,.35);
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.dfvs-progress-bar {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0;
	background: #fff;
	border-radius: inherit;
}

.dfvs-arrow {
	position: absolute;
	z-index: 11;
	top: 50%;
	transform: translateY(-50%);
	border: 0;
	background: rgba(0,0,0,.2);
	color: #fff;
	width: 46px;
	height: 72px;
	font-size: 48px;
	line-height: 1;
	cursor: pointer;
	transition: background .2s ease;
}
.dfvs-arrow:hover { background: rgba(0,0,0,.45); }
.dfvs-prev { left: 12px; }
.dfvs-next { right: 12px; }

.dfvs-dots {
	position: absolute;
	z-index: 12;
	top: 24px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
}
.dfvs-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255,255,255,.45);
	cursor: pointer;
}
.dfvs-dot.is-active { background: #fff; transform: scale(1.25); }

.dfvs-missing {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: #fff;
	background: #111;
}

@media (max-width: 767px) {
	.dfvs-slider { min-height: 420px; }
	.dfvs-content { left: 6%; right: 6%; bottom: 18%; }
	.dfvs-content h2 { font-size: clamp(28px, 9vw, 48px); }
	.dfvs-controls { left: 4%; right: 4%; bottom: 20px; }
	.dfvs-arrow { width: 36px; height: 56px; font-size: 38px; }
	.dfvs-prev { left: 4px; }
	.dfvs-next { right: 4px; }
}

/* Reprise des conventions visuelles du player vidéo Divi/MediaElement.
 * Le projet utilise volontairement des noms proches du markup Divi
 * (.et_pb_video, .et_pb_video_box, .et_pb_video_play, etc.) pour faciliter
 * une future harmonisation avec les styles du thème.
 */
.dfvs-slider .dfvs-control .dfvs-icon {
	font-family: inherit;
	font-weight: 600;
	line-height: 1;
}


/* DFVS 0.1.4 */
.dfvs-slide .dfvs-video-toggle-hit {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.dfvs-slide .dfvs-content { z-index: 5; }
.dfvs-slide .dfvs-controls { z-index: 10; }
.dfvs-slide .dfvs-play[aria-hidden="true"],
.dfvs-slide .dfvs-pause[aria-hidden="true"] { display: none; }
.dfvs-slide .dfvs-youtube-player,
.dfvs-slide .dfvs-youtube-player iframe {
	width: 100%;
	height: 100%;
}


/* 0.1.5 — Divi-like controls visibility */
.dfvs-slide .dfvs-controls {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}

.dfvs-slide.dfvs-controls-visible .dfvs-controls,
.dfvs-slide:focus-within .dfvs-controls {
    opacity: .95;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity .2s ease, transform .2s ease, visibility 0s;
}

@media (hover: none) {
    .dfvs-slide .dfvs-controls {
        opacity: .95;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }
}


/* 0.1.6 — Controls, navigation arrows and cursor share the same visibility */
.dfvs-slide .dfvs-video-toggle-hit {
    cursor: default;
}

.dfvs-slide .dfvs-prev,
.dfvs-slide .dfvs-next {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility 0s linear .2s;
}

.dfvs-slide.dfvs-controls-visible .dfvs-prev,
.dfvs-slide.dfvs-controls-visible .dfvs-next {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .2s ease, visibility 0s;
}

.dfvs-slide.dfvs-controls-visible .dfvs-video-toggle-hit {
    cursor: pointer;
}
