/* Vandeto Promo — Carousel de Promos
   Scroll-snap natif, peek, sticker autocollant. Zero librairie. */

.vpc {
	--vpc-height: 300px;
	--vpc-radius: 28px;
	--vpc-peek: 0px;
	--vpc-gap: 16px;
	--vpc-visible: 1;
	--vpc-brand: #ff1700;
	--vpc-ink: #11151c;
	--vpc-accent: #ffc220;

	position: relative;
	width: 100%;
	overflow: hidden;
}

.vpc--peek {
	--vpc-peek-active: var(--vpc-peek);
}

/* --- Piste scrollable --- */
.vpc-track {
	display: flex;
	gap: var(--vpc-gap);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scroll-padding-inline: var(--vpc-peek, 0px);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-inline: var(--vpc-peek, 0px);
	padding-block: 2px;
	outline: none;
}

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

/* --- Slide --- */
.vpc-slide {
	position: relative;
	flex: 0 0 calc(
		(100% - (var(--vpc-peek, 0px) * 2) - (var(--vpc-gap) * (var(--vpc-visible) - 1)))
		/ var(--vpc-visible)
	);
	scroll-snap-align: start;
	height: var(--vpc-height);
	border-radius: var(--vpc-radius);
	overflow: hidden;
	background: var(--vpc-bg-1, var(--vpc-brand));
	box-shadow: 0 18px 40px -20px rgba(17, 21, 28, 0.55);
	text-decoration: none;
	isolation: isolate;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.vpc-slide--gradient {
	background: linear-gradient(
		var(--vpc-bg-angle, 135deg),
		var(--vpc-bg-1, var(--vpc-brand)),
		var(--vpc-bg-2, var(--vpc-ink))
	);
}

/* Léger relief sur le fond pour éviter l'aplat plat (fond couleur seul) */
.vpc-slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(
		120% 120% at 85% 15%,
		rgba(255, 255, 255, 0.14),
		transparent 55%
	);
	pointer-events: none;
	z-index: 1;
}

/* Pas de relief quand une image de fond est presente */
.vpc-slide--has-image::after {
	display: none;
}

/* Voile de lisibilité par-dessus l'image, sous le texte (--vpc-veil : 0 à 100) */
.vpc-slide::before {
	content: "";
	position: absolute;
	inset: 0;
	background: #000;
	opacity: calc(var(--vpc-veil, 0) / 100);
	pointer-events: none;
	z-index: 2;
}

/* --- Contenu gauche --- */
.vpc-content {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: clamp(18px, 4vw, 40px);
	max-width: 62%;
}

.vpc-title {
	margin: 0;
	color: #fff;
	font-weight: 900;
	line-height: 0.98;
	letter-spacing: -0.02em;
	font-size: clamp(1.6rem, 4.4vw, 3.1rem);
	text-transform: uppercase;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

/* --- Badges bas gauche : logo + code --- */
.vpc-badges {
	display: inline-flex;
	align-items: stretch;
	gap: 8px;
	flex-wrap: wrap;
}

.vpc-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: 14px;
	padding: 8px 14px;
	box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.35);
}

.vpc-logo img {
	display: block;
	height: clamp(22px, 4vw, 34px);
	width: auto;
	object-fit: contain;
}

.vpc-code {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	background: #fff;
	color: var(--vpc-ink);
	border-radius: 14px;
	padding: 6px 16px;
	line-height: 1.05;
	box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.35);
}

.vpc-code small {
	font-size: clamp(0.62rem, 1.4vw, 0.78rem);
	font-weight: 600;
	opacity: 0.75;
}

.vpc-code strong {
	font-size: clamp(0.95rem, 2.4vw, 1.35rem);
	font-weight: 900;
	letter-spacing: -0.01em;
}

/* --- Sticker prix (autocollant) --- */
.vpc-sticker {
	--vpc-sticker-bg: var(--vpc-accent);
	--vpc-sticker-text: var(--vpc-ink);
	--vpc-sticker-rotate: -6deg;

	position: absolute;
	z-index: 4;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(var(--vpc-sticker-rotate));
	background: var(--vpc-sticker-bg);
	color: var(--vpc-sticker-text);
	padding: clamp(10px, 2vw, 18px) clamp(16px, 3vw, 28px);
	border-radius: 999px;
	text-align: center;
	box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.45);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.vpc-price-new {
	display: block;
	font-weight: 900;
	line-height: 0.95;
	letter-spacing: -0.02em;
	font-size: clamp(1.7rem, 5vw, 3rem);
}

.vpc-price-old {
	position: relative;
	display: inline-block;
	font-weight: 800;
	font-size: clamp(0.95rem, 2.6vw, 1.5rem);
	opacity: 0.85;
}

/* Barre diagonale rouge sur l'ancien prix */
.vpc-price-old::after {
	content: "";
	position: absolute;
	left: -6%;
	right: -6%;
	top: 52%;
	height: 3px;
	background: var(--vpc-brand);
	transform: rotate(-9deg);
	border-radius: 2px;
}

/* --- Image de fond plein cadre --- */
.vpc-product {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.vpc-product img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* --- Flèches (desktop uniquement) --- */
.vpc-arrow {
	display: none;
}

@media (hover: hover) and (pointer: fine) {
	.vpc-arrow {
		position: absolute;
		top: 50%;
		z-index: 6;
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		transform: translateY(-50%);
		border: 1px solid rgba(255, 255, 255, 0.4);
		border-radius: 50%;
		background: rgba(17, 21, 28, 0.28);
		backdrop-filter: blur(10px) saturate(140%);
		-webkit-backdrop-filter: blur(10px) saturate(140%);
		color: #fff;
		cursor: pointer;
		opacity: 0;
		transition: opacity 0.25s ease, background 0.2s ease, transform 0.2s ease;
	}

	.vpc:hover .vpc-arrow {
		opacity: 1;
	}

	.vpc-arrow:hover {
		background: rgba(17, 21, 28, 0.5);
	}

	.vpc-arrow:active {
		transform: translateY(-50%) scale(0.92);
	}

	.vpc-arrow--prev {
		left: calc(var(--vpc-peek, 0px) + 12px);
	}

	.vpc-arrow--next {
		right: calc(var(--vpc-peek, 0px) + 12px);
	}

	.vpc-arrow svg {
		width: 22px;
		height: 22px;
	}

	.vpc-arrow[disabled] {
		opacity: 0.25;
		cursor: default;
	}
}

/* --- Pastilles (max 3) --- */
.vpc-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
}

.vpc-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: rgba(17, 21, 28, 0.22);
	cursor: pointer;
	transition: width 0.3s ease, background 0.3s ease;
}

.vpc-dot.is-active {
	width: 26px;
	background: var(--vpc-brand);
}

/* --- Accessibilité mouvement --- */
@media (prefers-reduced-motion: reduce) {
	.vpc-track {
		scroll-behavior: auto;
	}
	.vpc-slide,
	.vpc-arrow,
	.vpc-dot {
		transition: none;
	}
}

/* --- Petits écrans : titre et sticker plus compacts --- */
@media (max-width: 600px) {
	.vpc-content {
		max-width: 60%;
		padding: 16px;
	}
	.vpc-sticker {
		left: auto;
		right: 4%;
		top: 14%;
		transform: rotate(var(--vpc-sticker-rotate));
	}
}

/* --- Mode édition Yellow Pencil : slides dépliées en pile verticale ---
   Declenche par la classe body (PHP) OU la classe .is-edit (JS). Ceinture + bretelles
   pour que toutes les slides soient visibles et editables une par une. */
.vpc.is-edit,
.vpc-edit-mode .vpc {
	overflow: visible;
}

.vpc.is-edit .vpc-track,
.vpc-edit-mode .vpc-track {
	display: block;
	overflow: visible;
	scroll-snap-type: none;
	padding-inline: 0;
	scroll-padding-inline: 0;
}

.vpc.is-edit .vpc-slide,
.vpc-edit-mode .vpc-slide {
	flex: none;
	width: 100%;
	margin-bottom: var(--vpc-gap);
	scroll-snap-align: none;
}

.vpc.is-edit .vpc-arrow,
.vpc.is-edit .vpc-dots,
.vpc-edit-mode .vpc-arrow,
.vpc-edit-mode .vpc-dots {
	display: none;
}