/* DK Media Carousel — widget Elementor */
.dkm {
	--dkm-accent: #EB782A;
	--dkm-radius: 6px;
	--dkm-gap: 12px;
	--dkm-arrow: 42px;
	--dkm-arrow-color: #1d1d1f;
	--dkm-arrow-bg: rgba(255, 255, 255, .92);
	--dkm-arrow-color-hover: #fff;
	--dkm-arrow-bg-hover: var(--dkm-accent);
	--dkm-dot: rgba(0, 0, 0, .22);
	--dkm-dot-active: var(--dkm-accent);
	--dkm-dot-size: 8px;
	--dkm-overlay: rgba(0, 0, 0, .35);
	--dkm-icon: #fff;
	--dkm-icon-size: 48px;
	--dkm-lb-bg: rgba(12, 12, 14, .94);
	--dkm-lb-ui: #fff;
	position: relative;
	width: 100%;
}

.dkm *, .dkm *::before, .dkm *::after { box-sizing: border-box; }

/* Le widget prend toute la largeur de sa colonne, y compris dans les conteneurs Flexbox d'Elementor */
.elementor-widget-dkm_media_carousel { min-width: 0; }
.e-con > .elementor-widget-dkm_media_carousel,
.e-con-inner > .elementor-widget-dkm_media_carousel {
	width: var(--container-widget-width, 100%);
	max-width: 100%;
	--flex-grow: var(--container-widget-flex-grow, 0);
}
.elementor-widget-dkm_media_carousel > .elementor-widget-container { width: 100%; }

/* Alignement du carrousel (prioritaire sur l'ancien CSS gardé en cache) */
.dkm.dkm-al-left   { margin-left: 0 !important;    margin-right: auto !important; }
.dkm.dkm-al-center { margin-left: auto !important; margin-right: auto !important; }
.dkm.dkm-al-right  { margin-left: auto !important; margin-right: 0 !important; }
@media (max-width: 1024px) {
	.dkm.dkm-al-t-left   { margin-left: 0 !important;    margin-right: auto !important; }
	.dkm.dkm-al-t-center { margin-left: auto !important; margin-right: auto !important; }
	.dkm.dkm-al-t-right  { margin-left: auto !important; margin-right: 0 !important; }
}
@media (max-width: 767px) {
	.dkm.dkm-al-m-left   { margin-left: 0 !important;    margin-right: auto !important; }
	.dkm.dkm-al-m-center { margin-left: auto !important; margin-right: auto !important; }
	.dkm.dkm-al-m-right  { margin-left: auto !important; margin-right: 0 !important; }
}

/* ---------- Base Swiper (au cas où sa feuille de style n'est pas chargée) ---------- */
.dkm .swiper { position: relative; overflow: hidden; z-index: 1; margin: 0; padding: 0; list-style: none; }
.dkm .swiper-wrapper { position: relative; display: flex; width: 100%; height: 100%; z-index: 1; transition-property: transform; box-sizing: content-box; }
.dkm .swiper-slide { position: relative; flex-shrink: 0; height: auto; transition-property: transform; }
.dkm .swiper-3d, .dkm .swiper-container-3d { perspective: 1200px; }
.dkm .swiper-3d .swiper-wrapper, .dkm .swiper-3d .swiper-slide,
.dkm .swiper-container-3d .swiper-wrapper, .dkm .swiper-container-3d .swiper-slide { transform-style: preserve-3d; }

/* Effets Fondu / Cube / Retournement */
.dkm .swiper-fade .swiper-slide { pointer-events: none; transition-property: opacity; }
.dkm .swiper-fade .swiper-slide-active { pointer-events: auto; }
.dkm .swiper-cube, .dkm .swiper-flip { overflow: visible; }
.dkm .swiper-cube .swiper-slide, .dkm .swiper-flip .swiper-slide { pointer-events: none; backface-visibility: hidden; -webkit-backface-visibility: hidden; z-index: 1; }
.dkm .swiper-cube .swiper-slide { visibility: hidden; transform-origin: 0 0; width: 100%; height: 100%; }
.dkm .swiper-cube .swiper-slide-active, .dkm .swiper-cube .swiper-slide-next, .dkm .swiper-cube .swiper-slide-prev { visibility: visible; }
.dkm .swiper-cube .swiper-slide-active, .dkm .swiper-flip .swiper-slide-active { pointer-events: auto; }
.dkm-effect-cube .dkm-stage, .dkm-effect-flip .dkm-stage { overflow: hidden; padding: 0 2px; }

/* Mise en page avant l'initialisation (évite le « saut » au chargement) */
.dkm .dkm-main { --dkm-spv: 3; }
.dkm-skin-slideshow .dkm-main,
.dkm-effect-fade .dkm-main,
.dkm-effect-cube .dkm-main,
.dkm-effect-flip .dkm-main { --dkm-spv: 1 !important; }
.dkm .dkm-thumbs { --dkm-spv: 5; --dkm-gap: 8px; margin-top: 8px; }
.dkm .swiper:not(.swiper-initialized):not(.swiper-container-initialized) .swiper-slide {
	width: calc((100% - (var(--dkm-spv) - 1) * var(--dkm-gap)) / var(--dkm-spv));
	margin-right: var(--dkm-gap);
}

/* ---------- Diapositives ---------- */
.dkm .dkm-stage { position: relative; }
.dkm .dkm-media {
	position: relative;
	display: block;
	height: 320px;
	overflow: hidden;
	border-radius: var(--dkm-radius);
	background: #1b1b1d;
	color: inherit;
	text-decoration: none;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}
.dkm a.dkm-media:focus-visible { box-shadow: 0 0 0 3px var(--dkm-accent); }

.dkm .dkm-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border: 0;
	border-radius: 0;
	transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.dkm .dkm-empty { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #2a2a2e, #141416); }
.dkm-hover-zoom .dkm-media:hover .dkm-img { transform: scale(1.06); }

/* Hauteur automatique : image entière, à ses proportions */
.dkm-height-auto .dkm-main .dkm-media { height: auto !important; }
.dkm-height-auto .dkm-main .dkm-img { height: auto; object-fit: contain; }
.dkm-height-auto .dkm-main .dkm-empty,
.dkm-height-auto .dkm-main video.dkm-img { aspect-ratio: 16 / 9; height: auto; }
.dkm-height-auto .swiper-wrapper { align-items: flex-start; }
.dkm-height-auto .dkm-main .dkm-media { background: transparent; }

/* Bordure intérieure / extérieure */
.dkm-border-outside.dkm-bt-slide .dkm-main .dkm-media {
	border-style: var(--dkm-bs, solid);
	border-width: var(--dkm-bw, 2px);
	border-color: var(--dkm-bc, var(--dkm-accent));
	transition: border-color .25s ease;
}
.dkm-border-inside.dkm-bt-slide .dkm-main .dkm-media::after {
	content: "";
	position: absolute;
	inset: var(--dkm-b-off, 0);
	z-index: 3;
	border-style: var(--dkm-bs, solid);
	border-width: var(--dkm-bw, 2px);
	border-color: var(--dkm-bc, var(--dkm-accent));
	border-radius: inherit;
	pointer-events: none;
	transition: border-color .25s ease;
}
.dkm-border-outside.dkm-bt-slide .dkm-main .dkm-media:hover { border-color: var(--dkm-bc-hover, var(--dkm-bc, var(--dkm-accent))); }
.dkm-border-inside.dkm-bt-slide .dkm-main .dkm-media:hover::after { border-color: var(--dkm-bc-hover, var(--dkm-bc, var(--dkm-accent))); }

/* Cadre fixe autour du carrousel : les images défilent à l'intérieur */
.dkm-bt-frame.dkm-gap0 .dkm-main { --dkm-gap: 0px !important; }
.dkm-bt-frame .dkm-main { border-radius: var(--dkm-radius); }
.dkm-border-outside.dkm-bt-frame .dkm-main {
	border-style: var(--dkm-bs, solid);
	border-width: var(--dkm-bw, 2px);
	border-color: var(--dkm-bc, var(--dkm-accent));
	transition: border-color .25s ease;
}
.dkm-border-inside.dkm-bt-frame .dkm-main::after {
	content: "";
	position: absolute;
	inset: var(--dkm-b-off, 0);
	z-index: 4;
	border-style: var(--dkm-bs, solid);
	border-width: var(--dkm-bw, 2px);
	border-color: var(--dkm-bc, var(--dkm-accent));
	border-radius: inherit;
	pointer-events: none;
	transition: border-color .25s ease;
}
.dkm-border-outside.dkm-bt-frame .dkm-main:hover { border-color: var(--dkm-bc-hover, var(--dkm-bc, var(--dkm-accent))); }
.dkm-border-inside.dkm-bt-frame .dkm-main:hover::after { border-color: var(--dkm-bc-hover, var(--dkm-bc, var(--dkm-accent))); }

/* Voile + icône */
.dkm .dkm-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--dkm-overlay);
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
}
.dkm .dkm-icon {
	width: var(--dkm-icon-size);
	height: var(--dkm-icon-size);
	color: var(--dkm-icon);
	transform: scale(.8);
	transition: transform .3s ease;
}
.dkm .dkm-icon svg { display: block; width: 100%; height: 100%; }
.dkm-has-overlay .dkm-media:hover .dkm-overlay,
.dkm-has-overlay .dkm-media:focus-visible .dkm-overlay { opacity: 1; }
.dkm-has-overlay .dkm-media:hover .dkm-icon { transform: scale(1); }

/* Vidéos : bouton lecture toujours visible, sans voile */
.dkm .dkm-overlay.dkm-icon-always { opacity: 1; background: transparent; }
.dkm .dkm-overlay.dkm-icon-always .dkm-icon { transform: scale(1); }
.dkm .dkm-media:hover .dkm-overlay.dkm-icon-always { background: var(--dkm-overlay); }
.dkm:not(.dkm-has-overlay) .dkm-media:hover .dkm-overlay.dkm-icon-always { background: transparent; }

/* Icône de lecture des vidéos */
.dkm .dkm-icon-play .dkm-icon {
	width: var(--dkm-play-size, 64px);
	height: var(--dkm-play-size, 64px);
	color: var(--dkm-play-color, #fff);
	filter: var(--dkm-play-shadow, drop-shadow(0 3px 10px rgba(0, 0, 0, .35)));
}
.dkm .dkm-icon-play svg circle { fill: var(--dkm-play-bg, rgba(0, 0, 0, .45)); }
.dkm .dkm-media:hover .dkm-icon-play .dkm-icon { transform: scale(1.08); }

/* ---------- Légendes ---------- */
.dkm .dkm-caption { display: block; }
.dkm .dkm-cap-title { display: block; font-weight: 700; font-size: 15px; line-height: 1.3; }
.dkm .dkm-cap-desc { display: block; margin-top: 4px; font-size: 13px; line-height: 1.45; opacity: .85; }

.dkm-cap-overlay .dkm-caption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 36px 16px 14px;
	background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0));
	color: #fff;
	pointer-events: none;
}
.dkm-cap-below .dkm-caption { padding: 10px 2px 0; color: inherit; }
.dkm-cap-hover .dkm-caption { opacity: 0; transform: translateY(10px); transition: opacity .3s ease, transform .3s ease; }
.dkm-cap-hover .dkm-media:hover .dkm-caption,
.dkm-cap-hover .dkm-media:focus-visible .dkm-caption { opacity: 1; transform: none; }

/* ---------- Flèches ---------- */
.dkm .dkm-arrow {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--dkm-arrow);
	height: var(--dkm-arrow);
	margin: calc(var(--dkm-arrow) / -2) 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--dkm-arrow-bg);
	color: var(--dkm-arrow-color);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, transform .2s ease, opacity .2s ease;
}
.dkm .dkm-arrow svg { width: 55%; height: 55%; }
.dkm .dkm-arrow:hover,
.dkm .dkm-arrow:focus-visible { background: var(--dkm-arrow-bg-hover); color: var(--dkm-arrow-color-hover); outline: none; }
.dkm .dkm-arrow:active { transform: scale(.94); }
.dkm .dkm-arrow.swiper-button-disabled { opacity: .35; cursor: default; }
.dkm .dkm-arrow.swiper-button-lock { display: none; }
.dkm-arrows-inside .dkm-prev { left: 12px; }
.dkm-arrows-inside .dkm-next { right: 12px; }
.dkm-arrows-outside.dkm-has-arrows .dkm-stage { padding: 0 calc(var(--dkm-arrow) + 14px); }
.dkm-arrows-outside .dkm-prev { left: 0; }
.dkm-arrows-outside .dkm-next { right: 0; }
.dkm-cap-below .dkm-arrow { top: calc(50% - 20px); }

/* ---------- Pagination ---------- */
.dkm .dkm-pagination { position: relative; display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 14px; }
.dkm .dkm-pagination.swiper-pagination-lock { display: none; }
.dkm .dkm-pagination .swiper-pagination-bullet {
	display: inline-block;
	width: var(--dkm-dot-size);
	height: var(--dkm-dot-size);
	margin: 0 !important;
	border-radius: 999px;
	background: var(--dkm-dot);
	opacity: 1;
	cursor: pointer;
	transition: width .3s ease, background-color .3s ease;
}
.dkm .dkm-pagination .swiper-pagination-bullet-active { width: calc(var(--dkm-dot-size) * 3); background: var(--dkm-dot-active); }
.dkm .dkm-pagination-fraction { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; gap: 4px; }
.dkm .dkm-pagination-fraction .swiper-pagination-current { color: var(--dkm-dot-active); }
.dkm .dkm-pagination-progressbar { height: 3px; gap: 0; border-radius: 3px; background: var(--dkm-dot); overflow: hidden; }
.dkm .dkm-pagination-progressbar .swiper-pagination-progressbar-fill {
	position: absolute; left: 0; top: 0; width: 100%; height: 100%;
	background: var(--dkm-dot-active);
	transform-origin: left top;
	transform: scale(0);
}

/* ---------- Coverflow ---------- */
.dkm-skin-coverflow .dkm-main { padding: 10px 0 20px; }
.dkm-skin-coverflow .swiper-slide:not(.swiper-slide-active) .dkm-media { filter: brightness(.75); transition: filter .4s ease; }

/* ---------- Miniatures ---------- */
.dkm .dkm-thumb {
	display: block;
	height: 80px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: var(--dkm-radius);
	overflow: hidden;
	background: #1b1b1d;
	opacity: .5;
	cursor: pointer;
	transition: opacity .25s ease, box-shadow .25s ease;
}
.dkm .dkm-thumb img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; }
.dkm .dkm-thumb:hover { opacity: .85 !important; }
.dkm .dkm-thumb.is-active { opacity: 1 !important; box-shadow: inset 0 0 0 3px var(--dkm-accent); }
.dkm .dkm-thumb.is-active img { padding: 0; }
.dkm .dkm-thumb-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; pointer-events: none; }
.dkm .dkm-thumb-play svg { width: 28px; height: 28px; }

/* =========================================================
 * Visionneuse plein écran
 * ======================================================= */
.dkm-lb {
	--dkm-lb-bg: rgba(12, 12, 14, .94);
	--dkm-lb-ui: #fff;
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--dkm-lb-bg);
	color: var(--dkm-lb-ui);
	opacity: 0;
	transition: opacity .25s ease;
	font-family: inherit;
}
.dkm-lb[hidden] { display: none; }
.dkm-lb.is-open { opacity: 1; }
.dkm-lb *, .dkm-lb *::before, .dkm-lb *::after { box-sizing: border-box; }

.dkm-lb-stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 64px 80px 96px;
}
.dkm-lb-stage img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 4px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
	animation: dkm-in .3s ease;
	user-select: none;
	-webkit-user-drag: none;
}
.dkm-lb-video {
	position: relative;
	width: min(var(--dkm-lb-video-w, 1280px), 100%, calc((100vh - 160px) * 16 / 9));
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
	animation: dkm-in .3s ease;
}
.dkm-lb-video iframe, .dkm-lb-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@keyframes dkm-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

.dkm-lb-btn {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	color: var(--dkm-lb-ui);
	cursor: pointer;
	transition: background-color .2s ease;
}
.dkm-lb-btn:hover, .dkm-lb-btn:focus-visible { background: rgba(255, 255, 255, .22); color: var(--dkm-lb-ui-hover, var(--dkm-lb-ui)); outline: none; }
.dkm-lb-btn svg { width: 24px; height: 24px; }
.dkm-lb-close { top: 14px; right: 14px; }
.dkm-lb-prev { left: 16px; top: 50%; margin-top: -24px; }
.dkm-lb-next { right: 16px; top: 50%; margin-top: -24px; }
.dkm-lb.is-single .dkm-lb-prev, .dkm-lb.is-single .dkm-lb-next, .dkm-lb.is-single .dkm-lb-count { display: none; }

.dkm-lb-count {
	position: absolute;
	top: 26px;
	left: 24px;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	opacity: .75;
}
.dkm-lb-cap {
	position: absolute;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	width: min(90%, 800px);
	text-align: center;
}
.dkm-lb-title { font-size: 16px; font-weight: 700; }
.dkm-lb-desc { margin-top: 4px; font-size: 14px; opacity: .8; }

@media (max-width: 767px) {
	.dkm-lb-stage { padding: 60px 10px 90px; }
	.dkm-lb-prev, .dkm-lb-next { top: auto; bottom: 18px; margin: 0; }
	.dkm-lb-cap { bottom: 76px; }
	.dkm-arrows-outside.dkm-has-arrows .dkm-stage { padding: 0; }
	.dkm-arrows-outside .dkm-prev { left: 8px; }
	.dkm-arrows-outside .dkm-next { right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	.dkm .dkm-img, .dkm .dkm-overlay, .dkm .dkm-icon, .dkm-lb, .dkm-lb-stage img, .dkm-lb-video { transition: none; animation: none; }
}