/* =========================================================
   Oblique Carousel
   Variables réglables via le shortcode ou en CSS :
   --oc-height, --oc-skew, --oc-gap, --oc-grow
   ========================================================= */
.oc-carousel {
	--oc-height: 520px;
	--oc-skew: -10deg;
	--oc-gap: 14px;
	--oc-grow: 2.4;
	--oc-ease: cubic-bezier(.22, .61, .36, 1);
	--oc-duration: .7s;
	--oc-caption-font: "Share Tech Mono", "Roboto Mono", ui-monospace, monospace;

	position: relative;
	width: 100%;
	overflow: hidden;
	/* marge latérale pour que les angles inclinés ne soient pas coupés */
	padding-inline: calc(var(--oc-height) * .1);
	box-sizing: border-box;
}

.oc-track {
	display: flex;
	gap: var(--oc-gap);
	height: var(--oc-height);
}

/* ---------- Panneau ---------- */
.oc-item {
	position: relative;
	display: none;
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	transform: skewX(var(--oc-skew));
	transition: flex-grow var(--oc-duration) var(--oc-ease);
	background: #1a1a1a;
}

.oc-item.is-in-view { display: block; }
.oc-item.is-active  { flex-grow: var(--oc-grow); }

.oc-link {
	position: absolute;
	inset: 0;
	display: block;
	color: #fff;
	text-decoration: none;
	outline: none;
}

.elementor-kit-7 a.oc-link:hover {
	color: #FFFFFF;
}

/* ---------- Médias (contre-inclinés pour rester droits) ---------- */
.oc-media {
	position: absolute;
	top: 0;
	bottom: 0;
	left: -50%;
	right: -50%;
	transform: skewX(calc(var(--oc-skew) * -1));
	container-type: size;
}

.oc-media .oc-img,
.oc-media .oc-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--oc-ease), opacity .5s ease;
}

.oc-item.is-active .oc-img { transform: scale(1.04); }

.oc-media .oc-video,
.oc-media .oc-iframe {
	opacity: 0;
	pointer-events: none;
}

/* Iframe YouTube / Vimeo en mode « cover » */
.oc-media .oc-iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100cqw, 177.78cqh);
	height: max(100cqh, 56.25cqw);
	transform: translate(-50%, -50%);
	border: 0;
	transition: opacity .5s ease;
}

.oc-item.is-playing .oc-video,
.oc-item.is-playing .oc-iframe { opacity: 1; }

/* Dégradé discret sous la légende */
.oc-link::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 40%;
	background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent);
	pointer-events: none;
}

/* ---------- Légende ---------- */
.oc-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 34px;
	z-index: 2;
	padding-left: calc(0px + var(--oc-height) * .05);
	transform: skewX(calc(var(--oc-skew) * -1));
	transform-origin: bottom left;
}

.oc-label {
	display: inline-block;
	font-family: var(--oc-caption-font);
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: .14em;
	text-transform: uppercase;
	white-space: nowrap;
}

.oc-label::after {
	content: "";
	display: block;
	width: 14px;
	height: 2px;
	margin-top: 10px;
	background: currentColor;
	transition: width var(--oc-duration) var(--oc-ease);
}

.oc-item.is-active .oc-label::after { width: 42px; }

/* Focus clavier visible */
.oc-link:focus-visible { box-shadow: inset 0 0 0 3px #fff; }

/* ---------- Navigation (si plus d'articles que de panneaux visibles) ---------- */
.oc-nav {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 16px;
}

.oc-nav button {
	width: 44px;
	height: 44px;
	border: 1px solid currentColor;
	background: transparent;
	color: inherit;
	font-size: 18px;
	cursor: pointer;
	transform: skewX(var(--oc-skew));
	transition: background .2s, color .2s;
}

.oc-nav button:hover,
.oc-nav button:focus-visible {
	background: #1a1a1a;
	color: #fff;
}

/* ---------- Tablette / mobile : panneaux empilés ---------- */
@media (max-width: 767px) {
	.oc-carousel { padding-inline: 0; }

	.oc-track {
		flex-direction: column;
		height: auto;
	}

	.oc-item {
		flex: none;
		height: 170px;
		transform: none;
		transition: height var(--oc-duration) var(--oc-ease);
	}

	.oc-item.is-active { height: 340px; }

	.oc-media,
	.oc-caption { transform: none; left: 0; right: 0; }

	.oc-media { left: 0; right: 0; }
	.oc-caption { padding-left: 20px; bottom: 22px; }
	.oc-nav button { transform: none; }
}

/* ---------- Animations réduites ---------- */
@media (prefers-reduced-motion: reduce) {
	.oc-item,
	.oc-media .oc-img,
	.oc-label::after { transition: none; }
	.oc-item.is-active .oc-img { transform: none; }
}