/* ==========================================================================
   Page « Séjourner à l’hôtel »
   Section 1 — Hero (fond pattern + photo arche à gauche + cliché incliné à
   droite + bloc texte central ; emplacement module de réservation laissé vide)
   ========================================================================== */

:root {
	--sj-blanc: #fcfcfc;
	--sj-jaune: #f6b83b;
	--beige-lumineux: #f8efe8;
	--beige-clair: #fffcf5;
	--bleu-chateau: #3f5565;
	--anthracite: #404040;
}

/* Hauteur (approx.) du module de réservation qui chevauche la couture hero/beige. */
:root {
	--sj-module-h: 417px;
	--sj-module-overlap: 200px; /* part du module qui remonte dans le hero (pattern) */
}

/* Supprime le block-gap (TT5) entre le header "pattern" (dans le flux) et le
   contenu de page qui le suit : sinon une bande de fond de page apparaît entre
   la barre et le hero. */
.brabois-header--pattern + .wp-block-post-content {
	margin-block-start: 0;
}

.brabois-sejour {
	position: relative;
	width: 100%;
	overflow: hidden;
	/* Pas de gap block (TT5) entre le header et le hero. */
	margin-block-start: 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Padding-bas généreux : réserve la zone (pattern) sur laquelle vient chevaucher
	   la moitié haute du module de réservation (porté par la section beige suivante). */
	padding: 120px 24px calc(var(--sj-module-overlap) + 48px);
	color: var(--sj-blanc);
	background-color: #44525f;
	background-image: var(--sj-pattern);
	background-size: cover;
	background-position: center;
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---- Photos latérales (PNG pré-détourés : arche gauche, cliché incliné droite) --- */

.brabois-sejour__side {
	position: absolute;
	height: auto;
	z-index: 1;
	pointer-events: none;
}
.brabois-sejour__side--left {
	left: -30px;
	top: 40px;
	width: 500px;
}
.brabois-sejour__side--right {
	right: -24px;
	top: 70px;
	width: 545px;
}

/* ---- Bloc texte central ---------------------------------------------------- */

.brabois-sejour__inner {
	position: relative;
	z-index: 5;
	width: 100%;
	max-width: 840px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	text-align: center;
}

.brabois-sejour__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.brabois-sejour__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: "Geist", "Montserrat", sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: var(--sj-blanc);
}
.brabois-sejour__eyebrow::before {
	content: "";
	width: 11px;
	height: 11px;
	border-radius: 9999px;
	background: var(--sj-jaune);
}

.brabois-sejour__title {
	margin: 0;
	font-family: "Montserrat", sans-serif;
	font-size: 32px;
	font-weight: 600;
	line-height: 37.12px;
	color: var(--sj-blanc);
}

.brabois-sejour__text {
	width: 637px;
	max-width: 100%;
	margin: 0;
	font-family: "Geist", "Montserrat", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	color: var(--sj-blanc);
}

.brabois-sejour__rule {
	width: 260px;
	max-width: 80%;
	height: 1px;
	background: var(--sj-blanc);
	opacity: 0.16;
}

.brabois-sejour__hint {
	margin: 0;
	font-family: "Cormorant Infant", Georgia, serif;
	font-style: italic;
	font-weight: 700;
	font-size: 20px;
	line-height: 30px;
	color: var(--sj-blanc);
}

/* ==========================================================================
   Section « intro gammes » — fond beige-lumineux
   Le module de réservation chevauche la couture hero/beige (moitié haute sur le
   pattern, moitié basse sur le beige). Emplacement laissé vide (futur module).
   ========================================================================== */

.brabois-gammes-intro {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	margin-block-start: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 24px 72px;
	background: var(--beige-lumineux);
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Emplacement réservé au futur module de réservation (calendrier) : VIDE.
   Remonte de --sj-module-overlap pour chevaucher le hero (pattern) au-dessus. */
.brabois-gammes-intro__module {
	position: relative;
	z-index: 5;
	width: 759px;
	max-width: 100%;
	height: var(--sj-module-h);
	margin-top: calc(-1 * var(--sj-module-overlap));
	border-radius: 20px;
}

.brabois-gammes-intro__title {
	margin: 56px 0 0;
	width: 100%;
	max-width: 900px;
	text-align: center;
	color: var(--bleu-chateau);
	font-family: "Montserrat", sans-serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 29.92px;
}

/* Flèche « bas + rond » recolorée vert-olive, sous le titre. */
.brabois-gammes-intro__arrow {
	display: block;
	width: auto;
	height: 46px;
	margin-top: 18px;
}

/* ---- Responsive ------------------------------------------------------------ */

/* Petit desktop / laptop / tablette : la maquette (1440) place 2 grandes photos
   latérales (500/545px) qui, sur écran plus étroit, empiètent sur le texte centré
   (840px) et le rendent illisible. On les RÉDUIT (taille qui suit l'écran) ET on
   les ESTOMPE pour que le texte blanc reste lisible même en cas de léger recouvrement. */
@media (min-width: 783px) and (max-width: 1380px) {
	.brabois-sejour__side--left,
	.brabois-sejour__side--right {
		width: clamp(170px, 22vw, 360px);
		opacity: 0.45;
	}
}

@media (max-width: 782px) {
	.brabois-sejour {
		padding: 72px 18px calc(var(--sj-module-overlap) + 24px);
	}
	.brabois-sejour__side--left,
	.brabois-sejour__side--right {
		display: none;
	}
	.brabois-sejour__title {
		font-size: 26px;
		line-height: 1.18;
	}
	:root {
		--sj-module-h: 320px;
		--sj-module-overlap: 150px;
	}
}

/* ==========================================================================
   Section « atouts » — fond beige-clair, 4 éléments (icône olive + texte).
   La carte d'onglets précédente CHEVAUCHE légèrement le haut de cette section
   (la carte a z-index:2, cette section remonte de 44px sous elle en z-index:1).
   ========================================================================== */

.brabois-atouts {
	position: relative;
	z-index: 1;
	margin-top: -110px; /* remonte sous la carte d'onglets -> chevauchement */
	width: 100%;
	box-sizing: border-box;
	background: var(--beige-clair);
	/* Pas de padding vertical : les séparateurs (bordures des colonnes) occupent
	   TOUTE la hauteur de la section, du haut jusqu'en bas. La hauteur vient du
	   min-height de la grille ci-dessous. */
	padding: 0 24px;
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.brabois-atouts__grid {
	max-width: 1316px;
	margin: 0 auto;
	min-height: 384px; /* section peu haute, mais un peu de marge interne */
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-items: stretch; /* colonnes pleine hauteur -> séparateurs pleine hauteur */
}

/* Contenu aligné à droite (icône + texte), centré verticalement dans la colonne. */
.brabois-atouts__item {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 26px;
	/* padding-top >= chevauchement (110) : le contenu ne passe pas sous la carte. */
	padding: 148px 28px 72px;
	text-align: right;
}
/* Séparateur vertical PLEINE HAUTEUR entre les colonnes. */
.brabois-atouts__item + .brabois-atouts__item {
	border-left: 1px solid rgba(63, 85, 101, 0.12);
}

.brabois-atouts__icon {
	display: block;
	width: auto;
	height: 56px;
}

.brabois-atouts__text {
	margin: 0;
	max-width: 260px;
	color: var(--anthracite);
	font-family: "Geist", "Montserrat", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
}

@media (max-width: 782px) {
	/* Section compactée en mobile : icône + écarts + padding réduits pour que le
	   2×2 prenne beaucoup moins de hauteur (contenu centré). */
	.brabois-atouts {
		margin-top: -40px;
		padding: 52px 16px 36px;
	}
	.brabois-atouts__grid {
		grid-template-columns: repeat(2, 1fr);
		min-height: 0;
		gap: 22px 8px;
	}
	.brabois-atouts__item {
		padding: 6px 8px;
		gap: 12px;
		align-items: center;
		justify-content: flex-start;
		text-align: center;
	}
	.brabois-atouts__icon {
		height: 40px;
	}
	.brabois-atouts__text {
		max-width: none;
		font-size: 14px;
		line-height: 20px;
	}
	/* Pas de séparateur sur la 1re colonne de chaque rangée. */
	.brabois-atouts__item:nth-child(odd) {
		border-left: 0;
	}
}

/* ==========================================================================
   Section « contact + équipe » — fond pattern olive (média 40)
   Bloc CTA « Contactez-nous » (texte blanc, centré) + encart beige-lumineux
   (photo « personnel » débordant bas-gauche + citation + texte + bouton).
   ========================================================================== */

.brabois-contact {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	margin-block-start: 0;
	/* Le fond pattern olive s'arrête au bas de l'encart (padding-bas = 0) : la photo
	   « personnel », qui déborde sous l'encart, dépasse donc sur la section suivante. */
	padding: 88px 24px 0;
	color: var(--sj-blanc);
	background-color: #7e8b6f;
	background-image: var(--olive-pattern);
	background-size: cover;
	background-position: center;
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---- Bloc CTA centré -------------------------------------------------------- */

.brabois-contact__cta {
	max-width: 860px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	text-align: center;
}
.brabois-contact__title {
	margin: 0;
	max-width: 720px;
	color: var(--sj-blanc);
	font-family: "Montserrat", sans-serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 29.92px;
}
.brabois-contact__text {
	margin: 0;
	width: 817px;
	max-width: 100%;
	color: var(--sj-blanc);
	font-family: "Geist", "Montserrat", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
}

.brabois-contact__sep {
	display: block;
	width: 380px;
	max-width: 100%;
	height: 10px;
}

/* ---- Boutons --------------------------------------------------------------- */

.brabois-contact__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13.5px 17px;
	text-decoration: none;
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: filter 0.2s ease, background-color 0.25s ease, color 0.25s ease;
}
.brabois-contact__btn img {
	display: block;
	height: 16px;
	width: auto;
}
.brabois-contact__btn--light {
	background: var(--sj-blanc);
	color: var(--vert-olive, #7e8b6f);
	outline: 1px solid var(--sj-blanc);
	outline-offset: -1px;
}
.brabois-contact__btn--light:hover {
	filter: brightness(0.97);
}
.brabois-contact__btn--olive {
	background: var(--vert-olive, #7e8b6f);
	color: var(--sj-blanc);
}
.brabois-contact__btn--olive:hover {
	filter: brightness(1.07);
}

/* ---- Encart équipe (beige-lumineux) ---------------------------------------- */

.brabois-contact__card {
	position: relative;
	max-width: 1180px;
	margin: 72px auto 0;
	box-sizing: border-box;
	min-height: 440px;
	background: var(--beige-lumineux);
	padding: 56px 64px;
	overflow: visible;
}

/* Photo « personnel » (arche, PNG pré-détouré) : débordante bas + gauche. */
.brabois-contact__photo {
	position: absolute;
	/* Débord borné à la marge disponible : -96px tant qu'il y a la place
	   (dessin 1440 inchangé), sinon réduit pour que la photo ne soit jamais
	   rognée par le bord de l'écran (elle l'était de 46px à 1280). */
	left: calc(-1 * min(96px, max(0px, (100vw - 1180px) / 2 - 12px)));
	top: 128px;
	width: 520px;
	z-index: 2;
	pointer-events: none;
	filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.12));
}
.brabois-contact__photo img {
	display: block;
	width: 100%;
	height: auto;
}

.brabois-contact__body {
	margin-left: 48%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
}
.brabois-contact__quote {
	display: block;
	width: 48px;
	height: auto;
}
.brabois-contact__card-title {
	margin: 0;
	color: var(--bleu-chateau);
	font-family: "Montserrat", sans-serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 29.92px;
}
.brabois-contact__body .brabois-contact__sep {
	margin: 0;
}
.brabois-contact__card-text {
	margin: 0;
	color: var(--anthracite);
	font-family: "Geist", "Montserrat", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
}

/* ---- Responsive ------------------------------------------------------------ */

@media (max-width: 1024px) {
	.brabois-contact__photo {
		width: 40%;
		left: -24px;
		top: 60px;
	}
	.brabois-contact__body {
		margin-left: 44%;
	}
}

@media (max-width: 760px) {
	.brabois-contact {
		padding: 64px 16px 96px;
	}
	.brabois-contact__card {
		padding: 32px 22px;
		min-height: 0;
	}
	.brabois-contact__photo {
		position: static;
		width: 78%;
		max-width: 320px;
		margin: 0 auto 24px;
		filter: none;
	}
	.brabois-contact__body {
		margin-left: 0;
	}
}

/* ==========================================================================
   Section « Le petit-déjeuner au Château » — sans fond.
   Gauche : titre + séparateur + description. Droite : 2 photos superposées
   (médias 70 haut / 69 bas, PNG cadre blanc + inclinaison bakée).
   ========================================================================== */

.brabois-petitdej {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	margin-block-start: 0;
	/* padding-bas nul : la photo « petitdej bas » déborde sous la section, sur la
	   section « services » suivante (elle est en z-index:2 -> passe par-dessus). */
	padding: 72px 24px 0;
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.brabois-petitdej__inner {
	max-width: 1316px;
	margin: 0 auto;
	display: grid;
	/* Colonne droite en 1fr (et non 56%) : 44% + 56% = 100 %, + gap 40px -> la
	   grille débordait de 40px (l'image de droite sortait de l'écran). 1fr absorbe
	   l'espace restant (gap compris). */
	grid-template-columns: 44% 1fr;
	align-items: center;
	gap: 40px;
}

/* ---- Colonne texte --------------------------------------------------------- */

.brabois-petitdej__text {
	max-width: 640px;
	min-width: 0; /* autorise la case de grille à rétrécir sous le séparateur SVG
	                 640px (sinon min-width:auto élargit la grille -> l'image du haut
	                 déborde l'écran sur desktop < ~1540px). */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
}
.brabois-petitdej__title {
	margin: 0;
	color: var(--bleu-chateau);
	font-family: "Montserrat", sans-serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 29.92px;
}
.brabois-petitdej__sep {
	display: block;
	width: 640px;
	max-width: 100%;
	height: 10px;
	margin: -8px 0;
}
.brabois-petitdej__desc {
	margin: 0;
	width: 492px;
	max-width: 100%;
	color: var(--anthracite);
	font-family: "Geist", "Montserrat", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
}

/* ---- Colonne images superposées -------------------------------------------- */

.brabois-petitdej__stack {
	position: relative;
	min-width: 0; /* idem : la colonne image respecte la largeur de sa case. */
	min-height: 620px;
}
.brabois-petitdej__img {
	position: absolute;
	height: auto;
	filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.14));
}
/* Photo du haut (petit-déj sur l'herbe) : en haut, calée à droite. */
.brabois-petitdej__img--haut {
	top: 0;
	right: 0;
	width: 66%;
	z-index: 1;
}
/* Photo du bas (buffet cheminée) : plus basse, décalée à gauche, par-dessus. */
.brabois-petitdej__img--bas {
	top: 300px;
	left: 0;
	width: 69%;
	z-index: 2;
}

/* ---- Responsive ------------------------------------------------------------ */

@media (max-width: 1024px) {
	.brabois-petitdej__inner {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.brabois-petitdej__stack {
		min-height: 0;
		height: 68vw;
	}
	.brabois-petitdej__text {
		max-width: none;
	}
	/* Anti-débordement horizontal : les items de la grille (texte + pile d'images)
	   doivent pouvoir rétrécir sous leur contenu (min-width:auto = cause du débord,
	   le rail était tiré à 492px par le texte/séparateur fixes). */
	.brabois-petitdej__text,
	.brabois-petitdej__stack {
		min-width: 0;
	}
	.brabois-petitdej__desc,
	.brabois-petitdej__sep {
		width: 100%;
	}
}

@media (max-width: 640px) {
	.brabois-petitdej {
		padding: 48px 16px 64px;
	}
	.brabois-petitdej__stack {
		height: auto;
		display: flex;
		flex-direction: column;
		gap: 16px;
	}
	.brabois-petitdej__img,
	.brabois-petitdej__img--haut,
	.brabois-petitdej__img--bas {
		position: static;
		width: 100%;
		top: auto;
		left: auto;
		right: auto;
	}
}

/* ==========================================================================
   Section « Autres services compris » — fond beige-lumineux.
   La photo « petitdej bas » de la section précédente déborde sur le haut
   (padding-top généreux pour dégager l'encart). Gauche : encart texture pattern
   clair (titre + 3 services à filets + bouton). Bas/droite : photo décalée à droite.
   ========================================================================== */

.brabois-services {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	margin-block-start: 0;
	/* Encart collé en HAUT de la section (aucune marge au-dessus). La photo
	   « petitdej bas » qui déborde de la section précédente passe par-dessus (z-index:2). */
	padding: 0 0 0;
	background: var(--beige-lumineux);
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.brabois-services__inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
}

/* ---- Encart (texture pattern clair) ---------------------------------------- */

.brabois-services__card {
	width: 760px;
	max-width: 100%;
	box-sizing: border-box;
	padding: 56px 64px;
	background: #f4f1ec url("../img/pattern-clair.jpg") center / cover no-repeat;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.brabois-services__title {
	margin: 0;
	text-align: center;
	color: var(--bleu-chateau);
	font-family: "Montserrat", sans-serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 29.92px;
}
.brabois-services__sep {
	display: block;
	width: 100%;
	height: 10px;
	margin: 0 0 4px;
}

.brabois-services__list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.brabois-services__item {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-bottom: 20px;
	border-bottom: 1px solid #e0e0e0;
}
.brabois-services__item-title {
	margin: 0;
	color: var(--bleu-chateau);
	font-family: "Cormorant Infant", Georgia, serif;
	font-style: italic;
	font-weight: 700;
	font-size: 24px;
	line-height: 32.64px;
}
.brabois-services__item-text {
	margin: 0;
	color: var(--anthracite);
	font-family: "Geist", "Montserrat", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
}

/* Bouton « Réserver une chambre au château » (olive, texte + flèche blancs). */
.brabois-services__btn {
	align-self: center;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
	padding: 13.5px 17px;
	text-decoration: none;
	background: var(--vert-olive, #7e8b6f);
	color: var(--sj-blanc);
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: filter 0.2s ease;
}
.brabois-services__btn:hover {
	filter: brightness(1.07);
}
.brabois-services__btn img {
	display: block;
	height: 16px;
	width: auto;
}

/* ---- Photo « image service compris » : décalée à droite, débord droit + bas. --- */

.brabois-services__photo {
	display: block;
	width: 65vw; /* 65 % de la largeur de l'écran */
	max-width: none;
	height: auto;
	margin: 0 0 -60px auto; /* aucune marge entre l'encart et l'image ; débord bas conservé */
	position: relative;
	z-index: 1;
}

/* ---- Responsive ------------------------------------------------------------ */

@media (max-width: 1024px) {
	.brabois-services {
		padding-top: 110px;
	}
	.brabois-services__photo {
		width: 78%;
		margin-right: -24px;
	}
}

@media (max-width: 640px) {
	.brabois-services {
		padding-top: 80px;
	}
	.brabois-services__card {
		padding: 36px 22px;
	}
	.brabois-services__photo {
		width: 100%;
		margin: 40px -16px -40px 0;
	}
}

/* ==========================================================================
   Section « Prolongez votre expérience » — fond pattern (média 13).
   Titre centré blanc + 2 colonnes (Buvette / Restaurant) + filet vertical.
   ========================================================================== */

.brabois-prolongez {
	width: 100%;
	box-sizing: border-box;
	margin-block-start: 0;
	/* Marge interne basse généreuse : l'encart de la section suivante GRIMPE sur cet
	   espace pattern vide (sans toucher les boutons). */
	padding: 96px 24px 260px;
	color: var(--sj-blanc);
	background-color: #44525f;
	background-image: var(--pl-pattern);
	background-size: cover;
	background-position: center;
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.brabois-prolongez__title {
	margin: 0 auto 64px;
	max-width: 900px;
	text-align: center;
	color: var(--sj-blanc);
	font-family: "Montserrat", sans-serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 29.92px;
}

.brabois-prolongez__cols {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1px 1fr;
	column-gap: 100px;
	align-items: stretch;
}

/* Filet vertical entre les deux colonnes. */
.brabois-prolongez__divider {
	width: 1px;
	align-self: stretch;
	background: rgba(252, 252, 252, 0.22);
}

.brabois-prolongez__col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
}
.brabois-prolongez__col-title {
	margin: 0;
	color: var(--sj-blanc);
	font-family: "Montserrat", sans-serif;
	font-size: 17px;
	font-weight: 600;
	line-height: 23.12px;
}
.brabois-prolongez__sep {
	display: block;
	width: 100%;
	height: 10px;
	margin: -8px 0;
}
.brabois-prolongez__text {
	margin: 0;
	width: 446px;
	max-width: 100%;
	color: var(--sj-blanc);
	font-family: "Geist", "Montserrat", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
}

/* Bouton clair (fond blanc, texte + flèche vert-olive). */
.brabois-prolongez__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
	padding: 13.5px 17px;
	text-decoration: none;
	background: var(--sj-blanc);
	color: var(--vert-olive, #7e8b6f);
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: filter 0.2s ease;
}
.brabois-prolongez__btn:hover {
	filter: brightness(0.97);
}
.brabois-prolongez__btn img {
	display: block;
	height: 16px;
	width: auto;
}

/* ---- Responsive ------------------------------------------------------------ */

@media (max-width: 860px) {
	.brabois-prolongez__cols {
		grid-template-columns: 1fr;
		gap: 48px;
	}
	.brabois-prolongez__divider {
		display: none;
	}
	.brabois-prolongez__text {
		width: 100%;
	}
}

/* ==========================================================================
   Section « Plongez dans l'ambiance » — fond beige-clair.
   (a) Encart réservation (texture pattern clair) qui GRIMPE sur la section pattern
   précédente. (b) Titre + carrousel coverflow (boucle infinie).
   ========================================================================== */

.brabois-ambiance {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	margin-block-start: 0;
	padding: 0 24px 104px;
	background: var(--beige-clair);
	/* Contexte de formatage (BFC) : empêche la marge négative de l'encart de
	   « traverser » la section (margin-collapse). Sans ça, le -150px déplace toute
	   la section beige au lieu de faire GRIMPER l'encart sur la section pattern. */
	display: flow-root;
	/* Marge basse généreuse : l'encart olive de la section suivante déborde vers le
	   haut sur cet espace vide (et non sur le carrousel). */
	padding-bottom: 210px;
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---- Encart réservation (grimpe sur la section précédente) ------------------ */

.brabois-ambiance__card {
	position: relative;
	z-index: 2;
	max-width: 1140px;
	margin: -150px auto 0; /* remonte sur la section pattern précédente */
	box-sizing: border-box;
	padding: 48px 64px 52px;
	background: #f4f1ec url("../img/pattern-clair.jpg") center / cover no-repeat;
	border: 0.6px solid var(--bleu-chateau);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	text-align: center;
}
.brabois-ambiance__card-title {
	margin: 0;
	color: var(--bleu-chateau);
	font-family: "Montserrat", sans-serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 29.92px;
}
.brabois-ambiance__sep {
	display: block;
	width: 380px;
	max-width: 100%;
	height: 10px;
	margin: -6px 0;
}
.brabois-ambiance__phone {
	margin: 0;
	display: flex;
	align-items: baseline;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
}
.brabois-ambiance__phone-lead {
	color: var(--anthracite);
	font-family: "Montserrat", sans-serif;
	font-size: 18px;
	font-weight: 600;
}
.brabois-ambiance__phone-num {
	color: var(--bleu-chateau);
	text-decoration: none;
	font-family: "Cormorant Infant", Georgia, serif;
	font-style: italic;
	font-weight: 600;
	font-size: 36px;
	line-height: 48.96px;
}
.brabois-ambiance__card-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
	padding: 13.5px 17px;
	text-decoration: none;
	background: var(--vert-olive, #7e8b6f);
	color: var(--sj-blanc);
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: filter 0.2s ease;
}
.brabois-ambiance__card-btn:hover {
	filter: brightness(1.07);
}
.brabois-ambiance__card-btn img {
	display: block;
	height: 16px;
	width: auto;
}

/* ---- Titre « Plongez… » ----------------------------------------------------- */

.brabois-ambiance__heading {
	margin: 168px 0 0; /* plus d'espace entre l'encart et le titre */
	text-align: center;
	color: var(--bleu-chateau);
	font-family: "Montserrat", sans-serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 29.92px;
}
.brabois-ambiance__heading-sep {
	display: block;
	width: 680px;
	max-width: 90%;
	height: 10px;
	margin: 20px auto 0;
}

/* ---- Carrousel coverflow ---------------------------------------------------- */

.brabois-ambiance__carousel {
	position: relative;
	max-width: 1280px;
	margin: 100px auto 0; /* plus d'espace entre le titre et le carrousel */
	padding: 0 12px;
}
.brabois-ambiance__stage {
	position: relative;
	height: 520px;
	overflow: hidden;
}
.brabois-ambiance__slide {
	position: absolute;
	top: 0;
	left: 50%;
	width: 54%;
	height: 100%;
	transform: translateX(-50%) scale(0.7);
	opacity: 0;
	z-index: 1;
	transition: transform 0.5s ease, opacity 0.5s ease;
	/* Curseur « Faites défiler » au survol (média « ellipse defiler », 110px). */
	cursor: url("../img/cursor-defiler.png") 55 55, pointer;
}
.brabois-ambiance__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 6px;
	box-shadow: 0 20px 44px rgba(0, 0, 0, 0.18);
}
/* Slide courante : centrée, pleine opacité, au-dessus. */
.brabois-ambiance__slide.is-current {
	transform: translateX(-50%) scale(1);
	opacity: 1;
	z-index: 3;
}
/* Précédente / suivante : décalées sur le côté, DERRIÈRE + transparentes. */
.brabois-ambiance__slide.is-next {
	transform: translateX(calc(-50% + 42%)) scale(0.82);
	opacity: 0.4;
	z-index: 2;
}
.brabois-ambiance__slide.is-prev {
	transform: translateX(calc(-50% - 42%)) scale(0.82);
	opacity: 0.4;
	z-index: 2;
}
.brabois-ambiance__slide.is-hidden {
	opacity: 0;
	pointer-events: none;
}

/* Flèches (média 35 « flèche olive + gros rond », pointe à GAUCHE). */
.brabois-ambiance__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	width: 88px;
	height: auto;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
}
.brabois-ambiance__nav img {
	width: 100%;
	height: auto;
	display: block;
}
.brabois-ambiance__nav--prev {
	left: -30px;
}
.brabois-ambiance__nav--next {
	right: -30px;
}
.brabois-ambiance__nav--next img {
	transform: scaleX(-1);
}

/* ---- Responsive ------------------------------------------------------------ */

@media (max-width: 860px) {
	.brabois-ambiance__card {
		padding: 36px 24px 40px;
	}
	/* Écarts verticaux resserrés (les grandes marges desktop 168/100 laissaient un
	   énorme vide entre l'encart de réservation et le carrousel sur mobile). */
	.brabois-ambiance__heading {
		margin-top: 72px;
	}
	.brabois-ambiance__carousel {
		margin-top: 40px;
	}
	.brabois-ambiance__stage {
		height: 360px;
	}
	.brabois-ambiance__slide {
		width: 72%;
	}
	/* Flèches ramenées À L'INTÉRIEUR (base : left/right:-30 -> débordaient l'écran
	   ~6px de chaque côté = scroll horizontal). + clip du carrousel par sécurité. */
	.brabois-ambiance__carousel {
		overflow-x: clip;
	}
	.brabois-ambiance__nav {
		width: 64px;
	}
	.brabois-ambiance__nav--prev {
		left: 0;
	}
	.brabois-ambiance__nav--next {
		right: 0;
	}
}

/* Petit desktop / laptop : dès que le carrousel atteint sa largeur max (1280) et
   que l'écran rétrécit, les flèches en débord (base left/right:-30) sortent de
   l'écran -> on les ramène sur les bords. (≥1381 elles restent en débord = maquette.) */
@media (min-width: 861px) and (max-width: 1380px) {
	.brabois-ambiance__nav--prev {
		left: 0;
	}
	.brabois-ambiance__nav--next {
		right: 0;
	}
}

/* ==========================================================================
   Section « Toutes les informations pratiques » — fond beige-lumineux.
   Encart pattern olive (~80vw, centré) qui DÉBORDE la section en haut et en bas.
   Gauche : titre + séparateur + accordéon. Droite : image (change selon le tiroir),
   collée en bas-droite de l'encart.
   ========================================================================== */

.brabois-pratique {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	margin-block-start: 0;
	padding: 0 24px;
	background: var(--beige-lumineux);
	display: flow-root; /* BFC : les marges négatives de l'encart ne collapsent pas */
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Encart pattern olive : déborde en haut (-150) ET en bas (-150). */
.brabois-pratique__card {
	position: relative;
	z-index: 2;
	width: 80vw;
	max-width: 1440px;
	margin: -150px auto -150px;
	box-sizing: border-box;
	min-height: 660px;
	padding: 72px 80px;
	overflow: hidden; /* l'image collée bas-droite reste dans l'encart */
	color: var(--sj-blanc);
	background-color: #7e8b6f;
	background-image: var(--olive-pattern);
	background-size: cover;
	background-position: center;
}

.brabois-pratique__left {
	width: 48%;
	max-width: 560px;
	position: relative;
	z-index: 2;
}
.brabois-pratique__title {
	margin: 0;
	color: var(--sj-blanc);
	font-family: "Montserrat", sans-serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 29.92px;
}
.brabois-pratique__sep {
	display: block;
	width: 100%;
	height: 10px;
	margin: 22px 0 28px;
}

/* ---- Accordéon -------------------------------------------------------------- */

.brabois-pratique__accordion {
	display: flex;
	flex-direction: column;
}
.brabois-pratique__item {
	padding: 18px 0;
}
.brabois-pratique__item + .brabois-pratique__item {
	border-top: 1px solid rgba(252, 252, 252, 0.2);
}
.brabois-pratique__item:last-child {
	border-bottom: 1px solid rgba(252, 252, 252, 0.2);
}
.brabois-pratique__head {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
	cursor: pointer;
	color: var(--sj-blanc);
	font-family: "Geist", "Montserrat", sans-serif;
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 4px;
}
/* Bascule INSTANTANÉE (pas d'animation de hauteur) : comme il y a toujours
   exactement une description ouverte, la hauteur de l'encart reste stable
   (plus de saccade ni d'agrandissement de l'image). Fondu opacité seulement. */
.brabois-pratique__panel {
	display: none;
}
.brabois-pratique__item.is-open .brabois-pratique__panel {
	display: block;
	animation: brabois-pratique-fade 0.28s ease;
}
@keyframes brabois-pratique-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
.brabois-pratique__desc {
	margin: 16px 0 0;
	color: var(--sj-blanc);
	font-family: "Geist", "Montserrat", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
}

/* ---- Image (droite, collée bas + droite) ----------------------------------- */

.brabois-pratique__right {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 48%;
	/* Hauteur FIXE (pas un % de l'encart) : l'image ne change pas de taille quand
	   on ouvre/ferme un tiroir. Agrandie pour prendre plus de hauteur. */
	height: 580px;
	z-index: 1;
}
.brabois-pratique__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---- Bouton (sous l'encart) ------------------------------------------------- */

/* Bloc bouton sur fond clair (l'encart olive déborde -150 par-dessus, z-index:2). */
.brabois-pratique__cta {
	background: var(--beige-clair);
	/* padding-top = débord de l'encart (150) + espace sous lui. */
	padding: 200px 24px 56px;
	display: flex;
	justify-content: center;
}
.brabois-pratique__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13.5px 17px;
	text-decoration: none;
	background: var(--vert-olive, #7e8b6f);
	color: var(--sj-blanc);
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: filter 0.2s ease;
}
.brabois-pratique__btn:hover {
	filter: brightness(1.07);
}
.brabois-pratique__btn img {
	display: block;
	height: 16px;
	width: auto;
}
/* Le bouton doit être centré : parent en flex colonne. */
.brabois-pratique {
	display: flow-root;
}
.brabois-pratique__card,
.brabois-pratique__btn {
	/* centrage horizontal géré par margin auto. */
}

/* ---- Responsive ------------------------------------------------------------ */

@media (max-width: 1024px) {
	.brabois-pratique__card {
		width: 92vw;
		padding: 48px 40px;
	}
	.brabois-pratique__left {
		width: 52%;
	}
	.brabois-pratique__right {
		width: 44%;
	}
}

@media (max-width: 760px) {
	.brabois-pratique__card {
		display: flex;
		flex-direction: column;
		gap: 28px;
		min-height: 0;
	}
	.brabois-pratique__left {
		width: 100%;
		max-width: none;
	}
	.brabois-pratique__right {
		position: static;
		width: 100%;
		height: 260px;
	}
}

/* ==========================================================================
   Section « Une question ? » — fond beige-lumineux (DERNIÈRE section).
   Titre centré + 2 boutons. Grosse marge basse : le futur footer (arrondi)
   remontera dessus (marge négative), il faut donc du beige sous son point bas.
   ========================================================================== */

.brabois-question {
	width: 100%;
	box-sizing: border-box;
	margin-block-start: 0;
	/* padding-bottom très généreux pour laisser le footer arrondi remonter dessus
	   sans empiéter sur le contenu (formulaire). */
	padding: 96px 24px 460px;
	background: var(--beige-lumineux);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.brabois-question__title {
	margin: 0;
	text-align: center;
	color: var(--bleu-chateau);
	font-family: "Montserrat", sans-serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 29.92px;
}
.brabois-question__sep {
	display: block;
	width: 460px;
	max-width: 80%;
	height: 10px;
	margin: -4px 0 8px;
}
.brabois-question__btns {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	flex-wrap: wrap;
}
.brabois-question__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13.5px 17px;
	text-decoration: none;
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: filter 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.brabois-question__btn img {
	display: block;
	height: 16px;
	width: auto;
}
.brabois-question__btn--olive {
	background: var(--vert-olive, #7e8b6f);
	color: var(--sj-blanc);
}
.brabois-question__btn--olive:hover {
	filter: brightness(1.07);
}
.brabois-question__btn--outline {
	background: transparent;
	color: var(--vert-olive, #7e8b6f);
	outline: 1px solid var(--vert-olive, #7e8b6f);
	outline-offset: -1px;
}
.brabois-question__btn--outline:hover {
	background: rgba(126, 139, 111, 0.08);
}

@media (max-width: 640px) {
	.brabois-question {
		padding: 64px 18px 200px;
	}
	.brabois-question__btns {
		flex-direction: column;
	}
}

/* ==========================================================================
   Page Séjourner — section AVIS (réutilisée de l'accueil).
   Sur l'accueil, .brabois-avis a un padding-top:300px car des cartes de la
   section précédente débordent dedans. Ici (page 27) RIEN ne déborde : ce grand
   vide entre le bouton « Réserver une chambre » et les avis est inutile.
   Scopé .page-id-27 pour ne pas toucher l'accueil ni les autres pages.
   ========================================================================== */
.page-id-27 .brabois-avis {
	padding-top: 120px;
}
@media (max-width: 640px) {
	.page-id-27 .brabois-avis {
		padding-top: 44px;
	}
}

/* ==========================================================================
   Moteur de réservation Reservit (page Séjourner).

   Occupe l'emplacement .brabois-gammes-intro__module réservé par la maquette,
   à cheval sur la couture hero/beige. La carte blanche, son rayon et son ombre
   sont portés ICI : Reservit sert son moteur sur fond transparent.

   ⚠️ LARGEUR — la maquette dessine 759px, mais le moteur Reservit est un
   Angular/Bootstrap dont les points de rupture sont 576 / 768 / 992 / 1200px
   (relevés dans son CSS). À 759px on tombe donc SOUS 768 : Reservit sert son
   affichage compact, calendrier replié, sans sélecteur de personnes — à 9px
   près. On élargit au-delà de 992px pour retrouver l'affichage large de la
   maquette (deux mois dépliés + colonne récapitulative).

   Pour revenir au dessin d'origine : ramener --sj-reservit-w à 759px.
   ========================================================================== */

.brabois-reservit {
	--sj-reservit-w: 1120px;

	width: var(--sj-reservit-w);
	max-width: 100%;
	overflow: hidden;
	background: #ffffff;
	box-shadow: 0 18px 48px rgba(63, 85, 101, 0.18);
}

.brabois-reservit__frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Sous le seuil « large » de Reservit, inutile de réserver la hauteur d'un
   calendrier déplié : son affichage compact est plus court. */
@media (max-width: 1100px) {
	.brabois-reservit {
		height: max(var(--sj-module-h), 560px);
	}
}

/* Mobile : la maquette rabat le bloc à 320px, ce qui ne suffit à aucun moteur
   de réservation.
   ⚠️ Surtout PAS `height:auto` ici : l'iframe est en `height:100%`, un parent
   sans hauteur explicite la réduirait à zéro. */
@media (max-width: 782px) {
	.brabois-reservit {
		height: max(var(--sj-module-h), 620px);
	}
}

/* ==========================================================================
   Cibles tactiles mobile (ajout responsive du 28/08/2026)

   L'en-tête d'accordéon « Toutes les informations pratiques » est un <button>
   sans padding : sa zone cliquable ne faisait que 21px de haut alors que la
   bande visible en fait 57. Au doigt, on visait une ligne de texte.
   Les 6px rendus au bouton sont retirés à l'item : la hauteur visible reste
   identique (18+21+18 = 12+6+21+6+12 = 57px), seule la zone tactile grandit.
   ========================================================================== */
@media (max-width: 782px) {
	.brabois-pratique__item { padding: 12px 0; }
	.brabois-pratique__head {
		padding-block: 6px;
		min-height: 33px;
	}
}

/* 21/10/2026 : entre 860 et 1100 px, les colonnes `1fr` (minimum = largeur du
   texte, 446 px) ne pouvaient pas rétrécir : défilement horizontal de 93 px à
   1024 px (relevé responsive.py, accueil et Séjourner). */
.brabois-prolongez__cols {
	grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
	column-gap: clamp(40px, 7vw, 100px);
}
@media (max-width: 860px) {
	.brabois-prolongez__cols {
		grid-template-columns: minmax(0, 1fr);
	}
}