/**
 * Carrousel des séjours — [sa_carrousel_sejours]
 * Défilement natif (scroll-snap) : utilisable au doigt et au trackpad sans JS.
 * Habillage : modifier les variables ci-dessous (ex. dans les réglages Divi).
 */

.sa-carrousel {
	--sa-cartes-visibles: 1.2;
	--sa-gap: 16px;
	--sa-radius: 8px;
	--sa-ratio-image: 4 / 3;
	--sa-image-hauteur: 0.75; /* = 3 / 4, à garder cohérent avec --sa-ratio-image */
	--sa-ombre: 0 2px 10px rgba(0, 0, 0, 0.08);
	--sa-fond-carte: #fff;
	--sa-orange: #eb6715;
	--sa-badge-bg: var(--sa-orange);
	--sa-badge-color: #fff;
	--sa-titre-color: var(--sa-orange);
	--sa-fleche-taille: 40px;
	--sa-fleche-marge: 12px;
	--sa-fleche-bg: #fff;
	--sa-fleche-color: #000;

	position: relative;
	max-width: 100%;
	container-type: inline-size;
}

@media (min-width: 981px) {
	.sa-carrousel {
		--sa-fleche-taille: 48px;
	}
}

@media (min-width: 600px) {
	.sa-carrousel {
		--sa-cartes-visibles: 2;
		--sa-gap: 20px;
	}
}

/* 981px : point de bascule desktop de Divi */
@media (min-width: 981px) {
	.sa-carrousel {
		--sa-cartes-visibles: 3;
		--sa-gap: 24px;
	}
}

@media (min-width: 1400px) {
	.sa-carrousel {
		--sa-cartes-visibles: 4;
	}
}

/* Navigation : flèches posées sur les images, à gauche et à droite */
.sa-carrousel__nav {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

.sa-carrousel__nav[hidden],
.sa-carrousel__fleche[hidden] {
	display: none;
}

.sa-carrousel__fleche {
	position: absolute;
	/* Repli si les unités de conteneur (cqw) ne sont pas prises en charge */
	top: 25%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--sa-fleche-taille);
	height: var(--sa-fleche-taille);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--sa-fleche-bg);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	color: var(--sa-fleche-color);
	cursor: pointer;
	pointer-events: auto;
	transition: opacity 0.2s, transform 0.2s;
}

/* Centrage vertical sur l'image : hauteur image = largeur carte × --sa-image-hauteur */
@supports (top: 1cqw) {
	.sa-carrousel__fleche {
		top: calc(4px + (100cqw - 8px - (var(--sa-cartes-visibles) - 1) * var(--sa-gap)) / var(--sa-cartes-visibles) * var(--sa-image-hauteur) / 2 - var(--sa-fleche-taille) / 2);
	}
}

.sa-carrousel__fleche--prec {
	left: var(--sa-fleche-marge);
}

.sa-carrousel__fleche--suiv {
	right: var(--sa-fleche-marge);
}

.sa-carrousel__fleche--suiv svg {
	transform: rotate(180deg);
}

.sa-carrousel__fleche:hover {
	transform: scale(1.08);
}

/* En bout de piste, la flèche concernée s'efface (elle reste désactivée). */
.sa-carrousel__fleche:disabled {
	opacity: 0;
	pointer-events: none;
}

.sa-carrousel__fleche:focus-visible {
	outline: 2px solid var(--sa-fleche-color);
	outline-offset: 2px;
}

/* Piste */
.sa-carrousel ul.sa-carrousel__piste {
	display: flex;
	gap: var(--sa-gap);
	margin: 0;
	padding: 4px 4px 12px; /* laisse respirer l'ombre et l'anneau de focus */
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 4px;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.sa-carrousel ul.sa-carrousel__piste:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Carte */
.sa-carrousel li.sa-carte {
	flex: 0 0 calc((100% - (var(--sa-cartes-visibles) - 1) * var(--sa-gap)) / var(--sa-cartes-visibles));
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	scroll-snap-align: start;
}

.sa-carte__lien {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: var(--sa-radius);
	background: var(--sa-fond-carte);
	box-shadow: var(--sa-ombre);
	color: inherit;
	text-decoration: none;
}

.sa-carte__lien:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.sa-carte__media {
	position: relative;
	display: block;
	aspect-ratio: var(--sa-ratio-image);
	overflow: hidden;
}

.sa-carte__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s;
}

.sa-carte__lien:hover .sa-carte__media img {
	transform: scale(1.04);
}

.sa-carte__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	padding: 6px 14px;
	border-radius: calc(var(--sa-radius) / 2);
	background: var(--sa-badge-bg);
	color: var(--sa-badge-color);
	font-size: 0.95em;
	font-weight: 700;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.sa-carte__corps {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 6px;
	padding: 16px;
}

.sa-carte__titre {
	color: var(--sa-titre-color);
	font-size: 1.1em;
	font-weight: 700;
	line-height: 1.3;
}

.sa-carte__dates {
	opacity: 0.8;
}

.sa-carte__prix {
	margin-top: auto;
	padding-top: 6px;
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	.sa-carte__media img,
	.sa-carrousel__fleche {
		transition: none;
	}

	.sa-carte__lien:hover .sa-carte__media img {
		transform: none;
	}
}