/* Umbeli — Collabs : carrousel scroll-snap + grille, zéro dépendance */

/* -------------------------------------------------------------------------
 * Blindage contre les styles globaux du thème / kit Elementor.
 * Beaucoup de kits peignent TOUS les <button> et <a> du site (fond de la
 * couleur d'accentuation, bordure, ombre). Sans ça, la surface cliquable
 * transparente de la carte devient un aplat opaque qui masque la vignette.
 * ---------------------------------------------------------------------- */

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

.umb-collabs button,
.umb-collabs a {
	-webkit-appearance: none;
	appearance: none;
	font: inherit;
	letter-spacing: inherit;
	text-transform: none;
	text-decoration: none;
	box-shadow: none;
	min-height: 0;
	min-width: 0;
	padding: 0;
	border: 0;
}

.umb-collabs .umb-card .umb-card__open {
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	filter: none !important;
}

.umb-collabs {
	--umb-per-view: 4.4;
	--umb-cols: 4;
	--umb-gap: 16px;
	--umb-radius: 16px;
	--umb-ratio: 9/16;
	--umb-play-bg: #1155ee;
	--umb-play-fg: #fff;
	--umb-play-size: 48px;
	--umb-views-color: #fff;
	--umb-grad: rgba(0, 0, 0, 0.55);
	--umb-link-bg: rgba(255, 255, 255, 0.22);
	--umb-link-fg: #fff;
	--umb-link-size: 34px;
	--umb-link-idle: 0.35;
	--umb-arrow-fg: #0a1f5c;
	--umb-arrow-bd: #d9d3c8;
	--umb-arrow-bg: transparent;
	--umb-arrow-bg-h: #0a1f5c;
	--umb-arrow-fg-h: #fff;
	--umb-arrow-size: 38px;
	--umb-arrow-bw: 1px;
	--umb-dot: #d9d3c8;
	--umb-dot-active: #1155ee;
	position: relative;
}

/* ---------- Piste : carrousel ---------- */

.umb-track {
	display: flex;
	gap: var(--umb-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 2px;
}

.umb-track::-webkit-scrollbar {
	display: none;
}

.umb-track.is-dragging {
	scroll-behavior: auto;
	scroll-snap-type: none;
	cursor: grabbing;
}

.umb-track.is-dragging .umb-card__open {
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.umb-track {
		scroll-behavior: auto;
	}
}

.umb-card {
	flex: 0 0 calc((100% - (var(--umb-per-view) - 1) * var(--umb-gap)) / var(--umb-per-view));
	scroll-snap-align: start;
	margin: 0;
	min-width: 0;
}

/* ---------- Piste : grille (liste simple) ---------- */

.umb-collabs[data-layout="grid"] .umb-track {
	display: grid;
	grid-template-columns: repeat(var(--umb-cols), minmax(0, 1fr));
	overflow: visible;
	scroll-snap-type: none;
	padding-bottom: 0;
}

.umb-collabs[data-layout="grid"] .umb-card {
	flex: initial;
	scroll-snap-align: none;
}

.umb-collabs[data-layout="grid"] .umb-controls {
	display: none;
}

/* ---------- Carte ---------- */

.umb-card__hit {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: var(--umb-ratio);
	background: #e9e3d9;
	border-radius: var(--umb-radius);
	overflow: hidden;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

@media (hover: hover) {
	.umb-card:hover .umb-card__hit {
		transform: translateY(-4px);
		box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.45);
	}
}

.umb-card__img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
	user-select: none;
	-webkit-user-drag: none;
}

.umb-card__img--empty {
	background: linear-gradient(135deg, #ddd6ca, #efe9df);
}

/* Aperçu vidéo muet, glissé sous les overlays */
.umb-card__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	z-index: 1;
	opacity: 0;
	transition: opacity 0.45s ease;
	pointer-events: none;
}

.umb-card__video.is-visible {
	opacity: 1;
}

/* Surface cliquable : couvre toute la carte, sous les boutons d'action */
.umb-card__open {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.umb-card__open:focus-visible {
	outline: 3px solid var(--umb-play-bg);
	outline-offset: -3px;
	border-radius: var(--umb-radius);
}

.umb-card__grad {
	position: absolute;
	inset: auto 0 0 0;
	height: 42%;
	background: linear-gradient(to top, var(--umb-grad), transparent);
	pointer-events: none;
	z-index: 2;
}

/* ---------- Compteur de vues ---------- */

.umb-card__views {
	position: absolute;
	left: 14px;
	bottom: 14px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--umb-views-color);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	pointer-events: none;
}

/* ---------- Bouton play (décoratif) ---------- */

.umb-collabs .umb-card__play {
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 3;
	display: grid;
	place-items: center;
	width: var(--umb-play-size);
	height: var(--umb-play-size);
	border-radius: 50%;
	background: var(--umb-play-bg);
	color: var(--umb-play-fg);
	box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.5);
	pointer-events: none;
	transition: transform 0.25s ease;
}

.umb-collabs[data-play-pos="center"] .umb-card__play {
	right: auto;
	bottom: auto;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

@media (hover: hover) {
	.umb-card:hover .umb-card__play {
		transform: scale(1.08);
	}
	.umb-collabs[data-play-pos="center"] .umb-card:hover .umb-card__play {
		transform: translate(-50%, -50%) scale(1.08);
	}
}

/* Pendant l'aperçu muet, le bouton devient « activer le son » */
.umb-ico--mute {
	display: none;
}

.umb-card__hit.is-previewing .umb-ico--play {
	display: none;
}

.umb-card__hit.is-previewing .umb-ico--mute {
	display: block;
}

/* ---------- Bouton « voir la publication d'origine » ---------- */

.umb-collabs .umb-card__link {
	position: absolute;
	bottom: 14px;
	right: calc(14px + var(--umb-play-size) + 10px);
	z-index: 4;
	display: grid;
	place-items: center;
	width: var(--umb-link-size);
	height: var(--umb-link-size);
	border-radius: 50%;
	background: var(--umb-link-bg);
	color: var(--umb-link-fg);
	opacity: var(--umb-link-idle);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: opacity 0.25s ease, transform 0.25s ease, background 0.25s ease;
}

/* Play centré : le lien reprend le coin bas droit */
.umb-collabs[data-play-pos="center"] .umb-card__link {
	right: 14px;
}

.umb-card__link svg {
	width: 55%;
	height: 55%;
	pointer-events: none;
}

@media (hover: hover) {
	.umb-card:hover .umb-card__link {
		opacity: 1;
	}
	.umb-collabs .umb-card__link:hover {
		transform: scale(1.1);
		background: rgba(255, 255, 255, 0.4);
	}
}

/* Pas de survol possible : on le rend lisible d'emblée */
@media (hover: none) {
	.umb-collabs .umb-card__link {
		opacity: 0.85;
	}
}

.umb-collabs .umb-card__link:focus-visible {
	opacity: 1;
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* ---------- Contrôles ---------- */

.umb-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 22px;
}

.umb-dots {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
}

.umb-collabs .umb-dots button {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--umb-dot);
	cursor: pointer;
	transition: background 0.2s ease, width 0.2s ease;
}

.umb-collabs .umb-dots button[aria-selected="true"] {
	background: var(--umb-dot-active);
	width: 20px;
	border-radius: 4px;
}

.umb-arrows {
	display: flex;
	gap: 10px;
	margin-left: auto;
}

.umb-collabs .umb-arrow {
	display: grid;
	place-items: center;
	width: var(--umb-arrow-size);
	height: var(--umb-arrow-size);
	padding: 0;
	border-radius: 50%;
	border: var(--umb-arrow-bw) solid var(--umb-arrow-bd);
	background: var(--umb-arrow-bg);
	color: var(--umb-arrow-fg);
	cursor: pointer;
	transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease,
		opacity 0.22s ease, transform 0.22s ease;
}

.umb-collabs .umb-arrow__ico {
	display: block;
	width: 45%;
	height: 45%;
	pointer-events: none;
}

.umb-collabs[data-arrow-style="soft"] .umb-arrow__ico {
	width: 52%;
	height: 52%;
}

.umb-collabs[data-arrow-style="solid"] .umb-arrow {
	border-color: transparent;
	background: var(--umb-arrow-bg-h);
	color: var(--umb-arrow-fg-h);
}

.umb-collabs .umb-arrow:hover {
	background: var(--umb-arrow-bg-h);
	color: var(--umb-arrow-fg-h);
	border-color: var(--umb-arrow-bg-h);
}

.umb-collabs[data-arrow-style="solid"] .umb-arrow:hover {
	transform: scale(1.06);
}

.umb-collabs .umb-arrow:focus-visible {
	outline: 2px solid var(--umb-arrow-fg);
	outline-offset: 3px;
}

.umb-collabs .umb-arrow[disabled] {
	opacity: 0.32;
	cursor: default;
	pointer-events: none;
}

/* ---------- Lightbox ---------- */

.umb-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: none;
	place-items: center;
	background: rgba(8, 8, 12, 0.88);
	padding: 24px;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.umb-lightbox.is-open {
	display: grid;
	opacity: 1;
}

.umb-lightbox__inner {
	position: relative;
	width: min(100%, calc((100vh - 48px) * 9 / 16));
	aspect-ratio: 9 / 16;
	max-height: calc(100vh - 48px);
	border-radius: 14px;
	overflow: hidden;
	background: #000;
}

.umb-lightbox__inner video,
.umb-lightbox__inner iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	object-fit: contain;
	background: #000;
}

.umb-lightbox__close {
	position: absolute;
	top: -46px;
	right: 0;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.umb-lightbox__close:hover {
	background: rgba(255, 255, 255, 0.3);
}

body.umb-lock {
	overflow: hidden;
}