/**
 * ============================================================
 * UNIVERSAL MEDIA CORE — CAROUSELS
 * ============================================================
 */


/* ============================================================
   CONTENEUR
============================================================ */

.umc-carousel {
	position: relative;

	left: 50%;

	width: 100vw;

	margin-left: -50vw;

	box-sizing: border-box;
}


/* ============================================================
   TRACK
============================================================ */

.umc-carousel-track {
	display: flex;
	flex-direction: row;

	gap: 30px;

	width: 100%;

	padding: 10px 80px 25px 95px;

	overflow-x: auto;
	overflow-y: hidden;

	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;

	-webkit-overflow-scrolling: touch;

	scrollbar-width: none;

	box-sizing: border-box;
}


.umc-carousel-track::-webkit-scrollbar {
	display: none;
}


/* ============================================================
   CARD
============================================================ */

.umc-carousel-card {
	flex: 0 0 clamp(300px, 28vw, 430px);

	width: clamp(300px, 28vw, 430px);

	margin: 0;

	scroll-snap-align: start;
}


.umc-carousel-link {
	display: block;

	color: inherit;

	text-decoration: none;
}


/* ============================================================
   THUMBNAIL
============================================================ */

.umc-carousel-thumbnail {
	position: relative;

	width: 100%;
	height: 200px;

	overflow: hidden;

	border-radius: 20px;

	background: #000;
}


.umc-carousel-thumbnail img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;

	transition:
		transform .25s ease;
}


.umc-carousel-link:hover
.umc-carousel-thumbnail img {
	transform: scale(1.03);
}


/* ============================================================
   PLAY VIDÉO
============================================================ */

.umc-carousel-play {
	position: absolute;

	top: 50%;
	left: 50%;

	z-index: 2;

	width: 52px;
	height: 52px;

	border-radius: 50%;

	background: rgba(
		255,
		255,
		255,
		.92
	);

	transform:
		translate(
			-50%,
			-50%
		);

	pointer-events: none;
}


.umc-carousel-play::before {
	content: "";

	position: absolute;

	top: 50%;
	left: 54%;

	width: 0;
	height: 0;

	border-top:
		10px solid transparent;

	border-bottom:
		10px solid transparent;

	border-left:
		16px solid #000;

	transform:
		translate(
			-50%,
			-50%
		);
}


/* ============================================================
   TITRE
============================================================ */

.umc-carousel-title {
	margin: 12px 0 0;

	color: #000;

	font-size: 20px;
	line-height: 1.3;
}


.umc-carousel-link:hover
.umc-carousel-title {
	color: #000;
}


/* ============================================================
   NAVIGATION
============================================================ */

.umc-carousel
.umc-carousel-nav {
	position: absolute;

	top: 100px;

	z-index: 20;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 48px;
	height: 48px;

	min-width: 48px;
	min-height: 48px;

	padding: 0;
	margin: 0;

	border: 0;
	border-radius: 50%;

	background: rgba(
		255,
		255,
		255,
		.95
	);

	color: #000;

	box-shadow:
		0 4px 16px
		rgba(
			0,
			0,
			0,
			.18
		);

	cursor: pointer;

	transform:
		translateY(-50%);

	appearance: none;
	-webkit-appearance: none;

	outline: none;

	font-size: 0;
	line-height: 0;
}


.umc-carousel
.umc-carousel-nav:hover {
	background: rgba(
		255,
		255,
		255,
		.95
	);

	color: #000;
}


.umc-carousel
.umc-carousel-nav:focus,
.umc-carousel
.umc-carousel-nav:active,
.umc-carousel
.umc-carousel-nav:focus-visible {
	background: rgba(
		255,
		255,
		255,
		.95
	);

	color: #000;

	border: 0;

	outline: none;

	box-shadow:
		0 4px 16px
		rgba(
			0,
			0,
			0,
			.18
		);
}


/* Gauche */

.umc-carousel-nav--prev {
	left: 15px;
}


/* Droite */

.umc-carousel-nav--next {
	right: 15px;
}


/* ============================================================
   CHEVRONS
============================================================ */

.umc-carousel-chevron {
	display: block;

	width: 11px;
	height: 11px;

	border-top:
		3px solid #000;

	border-right:
		3px solid #000;

	pointer-events: none;
}


.umc-carousel-nav--prev
.umc-carousel-chevron {
	margin-left: 5px;

	transform:
		rotate(-135deg);
}


.umc-carousel-nav--next
.umc-carousel-chevron {
	margin-right: 5px;

	transform:
		rotate(45deg);
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767px) {

	.umc-carousel {
		left: 50%;

		width: 100vw;

		margin-left: -50vw;
	}


	.umc-carousel-track {
		gap: 14px;

		padding:
			5px
			16px
			20px;
	}


	/*
	 * Une carte presque entière +
	 * une partie de la suivante.
	 */
	.umc-carousel-card {
		flex: 0 0 86%;

		width: 86%;

		max-width: none;
	}


	.umc-carousel-thumbnail {
		height: 200px;
	}


	.umc-carousel-title {
		font-size: 18px;
	}


	/*
	 * Sur mobile :
	 * swipe au doigt uniquement.
	 */
	.umc-carousel
	.umc-carousel-nav {
		display: none;
	}
}
.umc-carousel-track::before {
	content: "";
	flex: 0 0 20px;
	width: 20px;
}

@media (max-width: 767px) {
	.umc-carousel-track::before {
		flex-basis: 14px;
		width: 14px;
	}
}
/**
 * ============================================================
 * UNIVERSAL MEDIA CORE — SINGLE MEDIA
 * ============================================================
 */

.umc-single-media {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	line-height: 0;
}

.umc-single-image,
.umc-single-video {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	object-fit: contain;
}

.umc-single-video {
	background: #000;
}
/**
 * ============================================================
 * UNIVERSAL MEDIA CORE — FEED
 * ============================================================
 */

.umc-feed-media {
	display: block;
	position: relative;

	width: 100%;
	max-width: 100%;

	margin: 0;
	padding: 0;

	overflow: hidden;

	line-height: 0;
}

.umc-feed-media-link {
	display: block;
	position: relative;

	width: 100%;

	color: inherit;
	text-decoration: none;

	line-height: 0;
}

.umc-feed-thumbnail {
	display: block;

	width: 100% !important;
	max-width: 100% !important;

	height: auto !important;

	margin: 0 !important;
	padding: 0 !important;

	object-fit: contain;
}


/* ============================================================
   FAUX BOUTON PLAY
============================================================ */

.umc-feed-play {
	position: absolute;

	top: 50%;
	left: 50%;

	z-index: 3;

	width: 58px;
	height: 58px;

	border-radius: 50%;

	background: rgba(255,255,255,.92);

	transform: translate(-50%, -50%);

	pointer-events: none;

	box-shadow: 0 3px 12px rgba(0,0,0,.18);
}

.umc-feed-play::before {
	content: "";

	position: absolute;

	top: 50%;
	left: 54%;

	width: 0;
	height: 0;

	border-top: 11px solid transparent;
	border-bottom: 11px solid transparent;
	border-left: 18px solid #000;

	transform: translate(-50%, -50%);
}


/* Petit effet desktop */

@media (hover:hover) {

	.umc-feed-media-link .umc-feed-thumbnail {
		transition: transform .25s ease;
	}

	.umc-feed-media-link:hover .umc-feed-thumbnail {
		transform: scale(1.015);
	}
}


/* Mobile */

@media (max-width: 767px) {

	.umc-feed-play {
		width: 52px;
		height: 52px;
	}

	.umc-feed-play::before {
		border-top-width: 10px;
		border-bottom-width: 10px;
		border-left-width: 16px;
	}
}
/* ============================================================
   SINGLE POST - Taille des médias Desktop
============================================================ */
@media (min-width: 1024px) {

	body .umc-single-media .umc-single-video,
	body .umc-single-media .umc-single-image {
		display: block !important;

		width: 50% !important;
		max-width: 50% !important;

		height: auto !important;

		margin-left: auto !important;
		margin-right: auto !important;

		object-fit: contain !important;
	}

}
/**
 * ============================================================
 * FIX MOBILE — FEED
 * Empêche le titre suivant de remonter sur le média
 * ============================================================
 */

.umc-feed-media {
	display: block !important;
	position: relative !important;

	width: 100% !important;
	max-width: 100% !important;

	height: auto !important;

	margin: 0 !important;
	padding: 0 !important;

	clear: both !important;

	overflow: hidden !important;

	line-height: 0 !important;
}

.umc-feed-media-link {
	display: block !important;
	position: relative !important;

	width: 100% !important;
	max-width: 100% !important;

	height: auto !important;

	margin: 0 !important;
	padding: 0 !important;

	line-height: 0 !important;
}

.umc-feed-thumbnail {
	display: block !important;
	position: relative !important;

	float: none !important;
	clear: both !important;

	width: 100% !important;
	max-width: 100% !important;

	height: auto !important;

	margin: 0 !important;
	padding: 0 !important;
}

/*
 * Le widget suivant (titre, infos, etc.)
 * doit forcément commencer après le média.
 */
.elementor-widget-shortcode:has(.umc-feed-media) {
	display: block !important;
	position: relative !important;

	width: 100% !important;
	max-width: 100% !important;

	height: auto !important;

	clear: both !important;
}

.elementor-widget-shortcode:has(.umc-feed-media)
+ .elementor-element {
	position: relative !important;

	clear: both !important;

	margin-top: 0 !important;
}


/* ============================================================
 * MOBILE
 * ============================================================
 */

@media (max-width: 767px) {

	.umc-feed-media,
	.umc-feed-media-link,
	.umc-feed-thumbnail {
		width: 100% !important;
		max-width: 100% !important;

		height: auto !important;
	}

	.elementor-widget-shortcode:has(.umc-feed-media) {
		overflow: visible !important;
	}
}