/* ==========================================================================
   Accueil — Section « Dormir au Château » (fond pattern + slider de chambres)
   ========================================================================== */

.brabois-dormir {
	position: relative;
	background: var(--dp-pattern) center / cover no-repeat;
	background-color: #44525f; /* fallback */
	margin-block-start: 0;
	overflow: visible;
	padding: 96px 0 0;
}

.brabois-dormir__inner {
	display: flex;
	align-items: flex-start;
	gap: 56px;
	padding-left: max(40px, calc(50% - 720px));
}

/* --- Colonne gauche --- */
.brabois-dormir__left {
	flex: 0 0 446px;
	max-width: 446px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
	color: #fcfcfc;
	padding-top: 40px;
}
.brabois-dormir__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 26px;
}
.brabois-dormir__title {
	margin: 0;
	font-family: "Montserrat", sans-serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 29.92px;
	color: #fcfcfc;
}
.brabois-dormir__rule {
	display: block;
	width: 100%;
	max-width: 460px;
	height: 12px;
}
.brabois-dormir__desc {
	margin: 0;
	font-family: "Geist", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	color: #fcfcfc;
}
.brabois-dormir__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13.5px 17px;
	background: #fcfcfc;
	border: 1px solid #fcfcfc;
	text-decoration: none;
	transition: filter 0.2s ease;
}
.brabois-dormir__cta span {
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--vert-olive, #7e8b6f);
}
.brabois-dormir__cta img {
	display: block;
	height: 16px;
	width: auto;
}
.brabois-dormir__cta:hover {
	filter: brightness(0.95);
}

/* --- Slider --- */
.brabois-dormir__slider {
	position: relative;
	z-index: 2;
	flex: 1 1 0;
	min-width: 0;
	margin-top: 90px; /* descend les cartes */
	margin-bottom: -200px; /* le bas des cartes déborde davantage sur la section suivante */
}
.brabois-dormir__track {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 4px;
	scrollbar-width: none;
	/* curseur « Faites défiler » au survol */
	cursor: url("../img/cursor-defiler.png") 55 55, grab;
}
.brabois-dormir__track::-webkit-scrollbar {
	display: none;
}
.brabois-dormir__track.is-dragging {
	cursor: url("../img/cursor-defiler.png") 55 55, grabbing;
	scroll-snap-type: none;
}

/* --- Carte chambre --- */
.brabois-chambre-card {
	flex: 0 0 360px;
	max-width: 360px;
	scroll-snap-align: start;
	background: #ededed; /* gris pierre */
	border: 0.5px solid #404040;
	display: flex;
	flex-direction: column;
}
.brabois-chambre-card__media {
	display: block;
	line-height: 0;
}
.brabois-chambre-card__media img {
	display: block;
	width: 100%;
	height: 262px;
	object-fit: cover;
}
.brabois-chambre-card__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 2px 30px 28px;
}
.brabois-chambre-card__title {
	margin: 0;
	font-family: "Montserrat", sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--bleu-chateau, #3f5565);
}
.brabois-chambre-card__desc {
	margin: 0;
	font-family: "Geist", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	color: #404040;
}
.brabois-chambre-card__sep {
	display: block;
	height: 1px;
	background: rgba(63, 85, 101, 0.20);
}
.brabois-chambre-card__feats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 14px;
}
.brabois-chambre-card__feats li {
	display: flex;
	/* Sur un libellé de plusieurs lignes, une icône centrée flotte au milieu du
	   pavé : on la cale sur la première ligne (sans effet sur les libellés
	   d'une seule ligne). */
	align-items: flex-start;
	gap: 8px;
	color: #404040;
	font-family: "Geist", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.25;
}
.brabois-chambre-card__feats img {
	width: 18px;
	height: 18px;
	object-fit: contain;
	flex: 0 0 auto;
}

/* --- Flèche du slider --- */
.brabois-dormir__arrow {
	position: absolute;
	/* La flèche est dans .brabois-dormir__slider (position:relative) dont le bord
	   droit = bord de l'écran. On aligne donc sur la colonne de contenu centrée
	   (1440) via 50vw (viewport), pas 50% (slider) — sinon elle reste collée au
	   bord droit de l'écran sur très grand écran. */
	right: max(24px, calc(50vw - 720px));
	bottom: -84px;
	z-index: 3;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
}
.brabois-dormir__arrow img {
	height: 48px;
	width: auto;
	object-fit: contain;
	transform: scaleX(-1); /* pointe vers la droite */
}

/* --- Pastilles de pagination (affichées en mobile uniquement) --- */
.brabois-dormir__dots {
	display: none;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
	.brabois-dormir__inner {
		flex-direction: column;
		padding-right: max(40px, calc(50% - 720px));
	}
	.brabois-dormir__left {
		flex: 1 1 auto;
		max-width: 560px;
		padding-top: 0;
	}
	.brabois-dormir__slider {
		width: 100%;
		margin-inline: calc(-1 * max(40px, calc(50% - 720px)));
		padding-left: max(40px, calc(50% - 720px));
	}
}
@media (max-width: 560px) {
	.brabois-dormir {
		padding-bottom: 8px;
	}
	/* Moins d'inset + carte plus étroite -> la carte suivante « déborde » nettement
	   (affordance : plusieurs chambres à faire glisser). Pas d'overlap sur la
	   section suivante (margin-bottom 0) pour laisser la place aux pastilles. */
	.brabois-dormir__slider {
		margin-inline: -20px;
		padding-left: 20px;
		margin-bottom: 0;
	}
	.brabois-chambre-card {
		/* 66vw = 257px sur un 390 : trop étroit dès que les caractéristiques
		   sont des phrases. 78vw laisse respirer le texte SANS supprimer
		   l'affordance (le bord de la carte suivante reste visible). */
		flex: 0 0 78vw;
		max-width: 340px;
	}
	/* Pastilles de pagination : 1 point/carte, actif = pilule blanche. */
	.brabois-dormir__dots {
		display: flex;
		justify-content: center;
		gap: 8px;
		margin-top: 22px;
	}
	.brabois-dormir__dot {
		width: 8px;
		height: 8px;
		padding: 0;
		border: 0;
		border-radius: 9999px;
		background: rgba(252, 252, 252, 0.45);
		cursor: pointer;
		transition: width 0.2s ease, background 0.2s ease;
	}
	.brabois-dormir__dot.is-active {
		width: 22px;
		background: #fcfcfc;
	}
	/* La flèche flottante (bas) est peu visible/gênante en mobile : le débord de
	   la carte suivante + les pastilles + le défilement tactile suffisent. */
	.brabois-dormir__arrow {
		display: none;
	}
}

/* ==========================================================================
   Caractéristiques des chambres — une seule colonne sous 900px
   (ajout responsive du 28/08/2026)

   Les libellés sont des phrases (« Un grand lit double, 2 canapés lits simples
   ou un petit salon pour la version business »), pas des mots-clés : sur deux
   colonnes de ~100px ils s'étalaient sur 13 lignes d'un mot. En une colonne,
   la même caractéristique tient sur 3 lignes pleines.

   L'icône se cale sur la PREMIÈRE ligne du libellé : centrée, elle flottait
   au milieu d'un pavé de plusieurs lignes.
   ========================================================================== */
@media (max-width: 900px) {
	.brabois-chambre-card__feats {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.brabois-chambre-card__feats li {
		align-items: flex-start;
		line-height: 1.35;
	}
	.brabois-chambre-card__feats img {
		margin-top: 2px;
	}
}

/* Gouttière du carrousel resserrée en mobile (ajout du 28/08/2026) :
   avec une carte à 78vw, un gap de 24px ne laissait plus voir que 20px de la
   carte suivante. À 12px, le débord redevient lisible comme affordance. */
@media (max-width: 560px) {
	.brabois-dormir__track { gap: 12px; }
}

/* Icône alignée optiquement sur la première ligne du libellé (28/08/2026). */
.brabois-chambre-card__feats img { margin-top: 2px; }