/* ============================================================
   CARROUSEL SALLES  –  [salles_carousel]
   ============================================================ */

.wc-salles-carousel {
	width: 100%;
	margin: 0 auto;
}

.wc-salles-carousel__viewport {
	position: relative;
	background: var(--c-cream-200);
	border-radius: var(--br-lg);
	overflow: hidden;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
	border: 1px solid rgba(133, 100, 60, 0.15);
	/* Le geste horizontal pilote le carrousel, le scroll vertical reste natif */
	touch-action: pan-y;
	cursor: grab;

	&:active {
		cursor: grabbing;
	}
}

.wc-salles-carousel__label {
	position: absolute;
	top: var(--s-ld);
	left: 0;
	z-index: 5;
	padding: var(--s-sm) var(--s-ld) var(--s-sm) var(--s-xl);
	background: var(--c-brown-600);
	color: var(--c-cream-400);
	font-size: 0.71875rem;
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	border-radius: 0 var(--br-sm) var(--br-sm) 0;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
	pointer-events: none;
}

.wc-salles-carousel__track {
	display: grid;
	grid-template-areas: "slide";
}

.wc-salles-carousel__slide {
	grid-area: slide;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	height: 20rem;
	max-height: 20rem;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.6s ease, visibility 0s linear 0.6s;

	&.is-active {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition: opacity 0.6s ease, visibility 0s linear 0s;
		z-index: 1;
	}

	&:hover .wc-salles-carousel__image img {
		transform: scale(1.04);
	}
}

.wc-salles-carousel__image {
	display: block;
	overflow: hidden;
	background: var(--c-brown-50);
	position: relative;
	height: 100%;
	min-height: 0;

	& img {
		width: 100%;
		height: 100%;
		max-height: 100%;
		object-fit: cover;
		display: block;
		transition: transform 0.6s ease;
	}
}

.wc-salles-carousel__content {
	display: flex;
	flex-direction: column;
	padding: var(--s-xl) var(--s-2xl);
	gap: var(--s-sm);
	justify-content: center;
}

.wc-salles-carousel__title {
	margin: 0;
	font-size: var(--fs-h4);
	font-weight: var(--fw-bold);
	color: var(--c-text);
	font-family: var(--ff-heading);
	line-height: var(--lh-tight);
}

.wc-salles-carousel__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-sm);
}

.wc-salles-carousel__description {
	margin: 0;
	color: var(--c-text-soft);
	font-size: 0.84375rem;
	line-height: var(--lh-normal);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wc-salles-carousel__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-md);
	margin-top: var(--s-xs);
	padding-top: var(--s-md);
	border-top: 1px solid var(--c-cream-100);
	flex-wrap: wrap;
}

.wc-salles-carousel__price {
	font-size: 0.875rem;
	color: var(--c-brown-400);

	& strong {
		font-size: 1.375rem;
		color: var(--c-text);
		margin: 0 2px;
	}

	& small {
		font-size: var(--fs-tiny);
		color: var(--c-grey-500);
	}
}

.wc-salles-carousel__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--s-sm);
	background-color: var(--c-primary);
	color: var(--c-text-inverse);
	text-decoration: none;
	font-size: 0.78125rem;
	font-weight: var(--fw-bold);
	letter-spacing: 0.0875em;
	text-transform: uppercase;
	padding: var(--s-md) var(--s-xl);
	border-radius: var(--br-sm);
	white-space: nowrap;
	transition: background-color var(--tr-base), gap var(--tr-base);

	&:hover,
	&:focus,
	&:active {
		background-color: var(--c-primary-hover) !important;
		color: var(--c-text-inverse) !important;
		gap: var(--s-md);
	}

	& svg {
		fill: none !important;
		stroke: currentColor !important;
	}
}

.wc-salles-carousel__nav {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 2.75rem !important;
	height: 2.75rem !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: var(--br-circle) !important;
	background: rgba(255, 255, 255, 0.92) !important;
	color: var(--c-text) !important;
	border: 1px solid rgba(133, 100, 60, 0.2) !important;
	font-size: 0 !important;
	line-height: 0 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	cursor: pointer;
	transform: translateY(-50%);
	transition: background-color var(--tr-base), color var(--tr-base), border-color var(--tr-base) !important;
	outline: none !important;
	-webkit-tap-highlight-color: transparent !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important;

	&:hover,
	&:focus,
	&:active {
		background-color: var(--c-brown-600) !important;
		color: var(--c-text-inverse) !important;
		border-color: var(--c-brown-600) !important;
		transform: translateY(-50%);
	}

	& svg {
		fill: none !important;
		stroke: currentColor !important;
		flex-shrink: 0;
	}
}

.wc-salles-carousel__nav--prev { left: var(--s-md); }
.wc-salles-carousel__nav--next { right: var(--s-md); }

/* ── Bouton pause/play (RGAA 13.8) ────────────────────── */

.wc-salles-carousel__pause {
	position: absolute;
	top: var(--s-md);
	right: var(--s-md);
	z-index: 5;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 2.25rem !important;
	height: 2.25rem !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: var(--br-circle) !important;
	background: rgba(255, 255, 255, 0.92) !important;
	color: var(--c-text) !important;
	border: 1px solid rgba(133, 100, 60, 0.2) !important;
	cursor: pointer;
	font-size: 0 !important;
	line-height: 0 !important;
	transition: background-color var(--tr-base), color var(--tr-base) !important;
	outline: none !important;
	-webkit-tap-highlight-color: transparent !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important;

	&:hover,
	&:focus {
		background-color: var(--c-brown-600) !important;
		color: var(--c-text-inverse) !important;
		border-color: var(--c-brown-600) !important;
	}
}

.wc-salles-carousel__pause-icon {
	display: block;
	fill: currentColor !important;
	stroke: none !important;
	flex-shrink: 0;
}

.wc-salles-carousel__pause-icon--play { display: none; }

.wc-salles-carousel.is-paused .wc-salles-carousel__pause-icon--pause { display: none; }
.wc-salles-carousel.is-paused .wc-salles-carousel__pause-icon--play  { display: block; }

/* ── Puces ─────────────────────────────────────────────── */

.wc-salles-carousel__dots {
	display: flex !important;
	justify-content: center;
	align-items: center;
	gap: var(--s-xs) !important;
	margin: var(--s-ld) 0 0 !important;
	padding: 0 !important;
	background: transparent !important;
	list-style: none;
}

.wc-salles-carousel__dot {
	position: relative;
	width: 0.4375rem !important;
	height: 0.4375rem !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	border-radius: var(--br-circle) !important;
	background: rgba(90, 47, 21, 0.25) !important;
	font-size: 0 !important;
	line-height: 0 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	box-shadow: none !important;
	cursor: pointer;
	flex: 0 0 auto;
	transition: background-color var(--tr-base), transform var(--tr-base) !important;
	outline: none !important;
	-webkit-tap-highlight-color: transparent !important;
	-webkit-appearance: none !important;
	appearance: none !important;

	/* Cible tactile invisible de 44x44 autour du dot (RGAA 13.10) */
	&::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 2.75rem;
		height: 2.75rem;
		transform: translate(-50%, -50%);
	}

	&.is-active {
		background: var(--c-brown-600) !important;
		transform: scale(1.4) !important;

		&:hover,
		&:focus {
			background: var(--c-brown-600) !important;
			transform: scale(1.4) !important;
		}
	}

	&:hover,
	&:focus,
	&:active {
		background: rgba(90, 47, 21, 0.55) !important;
		transform: scale(1.2) !important;
	}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 800px) {
	.wc-salles-carousel__label {
		top: var(--s-md);
		font-size: 0.65625rem;
		padding: var(--s-xs) var(--s-md) var(--s-xs) var(--s-ld);
		letter-spacing: var(--ls-wide);
	}

	.wc-salles-carousel__slide {
		grid-template-columns: 1fr;
		height: auto;
		max-height: none;
	}

	.wc-salles-carousel__image {
		height: 11.25rem;
		min-height: 11.25rem;
	}

	.wc-salles-carousel__content {
		padding: var(--s-xl);
	}

	.wc-salles-carousel__nav {
		width: 2.25rem !important;
		height: 2.25rem !important;
	}

	.wc-salles-carousel__nav--prev { left: var(--s-sm); }
	.wc-salles-carousel__nav--next { right: var(--s-sm); }
}

/* Mobile : pas de flèches, on navigue au doigt (swipe) */
@media (max-width: 768px) {
	.wc-salles-carousel__nav {
		display: none !important;
	}
}

@media (max-width: 500px) {
	.wc-salles-carousel__footer {
		flex-direction: column;
		align-items: stretch;
	}

	.wc-salles-carousel__cta {
		justify-content: center;
	}
}