/* ==========================================================================
   Page « Organiser un événement »
   Section 1 — Hero : fond pattern + bloc texte centré (eyebrow, H1, paragraphe,
   Tél. + bouton « Découvrir les espaces ») + grande photo en arche (média 43)
   collée à droite, quasi pleine largeur, remontée haut dans le hero et débordant
   sur la section suivante.
   ========================================================================== */

:root {
	--evt-blanc: #fcfcfc;
	--evt-jaune: #f6b83b;
	--beige-lumineux: #f8efe8;
	--beige-clair: #fffcf5;
	--vert-olive: #7e8b6f;
	--anthracite: #404040;
	--bleu-chateau: #3f5565;
	/* Hauteur dont la photo (section 2) remonte SUR le hero (pattern). */
	--evt-photo-rise: 200px;
	/* Tiers bas des cartes formats qui déborde sur la section forfaits (beige). */
	--fmt-overlap: 124px;
}

/* Supprime le block-gap TT5 (~19px) entre le header "pattern" et le hero : la
   règle `.brabois-header--pattern + .wp-block-post-content` (sejour.css) ne matche
   pas ici (pas de fratrie adjacente directe) -> version robuste via :has(). */
.wp-block-post-content:has( > .brabois-evt-stage ) {
	margin-block-start: 0;
	/* Empêche tout scroll horizontal du document (slider avis en mobile, etc.).
	   `clip` sur l'axe X uniquement -> les débords VERTICAUX (overlaps) restent. */
	overflow-x: clip;
}

.brabois-evt-stage {
	position: relative;
	width: 100%;
	/* La photo déborde vers le bas sur la section suivante : ne pas rogner. */
	overflow: visible;
}

.brabois-evt {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	margin-block-start: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Padding-bas généreux : « beaucoup d'espace » (pattern) sous le texte, zone
	   sur laquelle remonte l'arche de la photo. */
	padding: 130px 24px 300px;
	color: var(--evt-blanc);
	background-color: #44525f;
	background-image: var(--evt-pattern);
	background-size: cover;
	background-position: center;
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---- Bloc texte centré ----------------------------------------------------- */

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

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

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

.brabois-evt__title {
	margin: 0;
	width: 701px;
	max-width: 100%;
	font-family: "Montserrat", sans-serif;
	font-size: 32px;
	font-weight: 600;
	line-height: 37.12px;
	color: var(--evt-blanc);
}

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

/* ---- Ligne Tél. + bouton --------------------------------------------------- */

.brabois-evt__actions {
	display: inline-flex;
	align-items: center;
	gap: 32px;
	flex-wrap: wrap;
	justify-content: center;
}

.brabois-evt__tel {
	text-decoration: none;
	color: var(--evt-blanc);
	font-family: "Cormorant Infant", Georgia, serif;
	font-style: italic;
	white-space: nowrap;
}
.brabois-evt__tel-label {
	font-size: 20px;
	font-weight: 700;
	line-height: 30px;
}
.brabois-evt__tel-num {
	font-size: 36px;
	font-weight: 600;
	line-height: 48.96px;
}

.brabois-evt__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13.5px 17px;
	background: transparent;
	outline: 1px solid var(--evt-blanc);
	outline-offset: -1px;
	text-decoration: none;
	color: var(--evt-blanc);
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	font-weight: 600;
	transition: background 0.2s ease, color 0.2s ease;
}
.brabois-evt__btn:hover {
	background: var(--evt-blanc);
	color: #3f5565;
}
.brabois-evt__btn-arrow {
	/* média 10 est large (~2.26:1) : hauteur fixe + largeur auto pour garder le
	   ratio natif (sinon la flèche+rond est écrasée en largeur). */
	height: 16px;
	width: auto;
	display: block;
}

/* ==========================================================================
   Section 2 — fond --beige-lumineux. La grande photo en arche (média 43) EN FAIT
   PARTIE : collée à droite, quasi pleine largeur (gap à gauche), remontée haut
   SUR le hero (pattern) au-dessus. Ratio intrinsèque photo 2560:1065.
   ========================================================================== */

.brabois-evt-next {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	margin-block-start: 0;
	background: var(--beige-lumineux);
	display: flex;
	flex-direction: column;
	/* la photo remonte au-dessus (sur le hero) : ne pas rogner. */
	overflow: visible;
}

.brabois-evt__photo {
	display: block;
	width: 92%;
	max-width: 1640px;
	height: auto;
	align-self: flex-end; /* collée à droite */
	/* remonte dans le hero (pattern) au-dessus ; sa base reste dans le beige. */
	margin-top: calc(-1 * var(--evt-photo-rise));
	position: relative;
	z-index: 3;
	pointer-events: none;
}

/* ---- Section « atouts » réutilisée (modificateur événement) ----------------- */
/* Même markup/layout que Séjourner, mais fond beige-lumineux et SANS le
   chevauchement de carte d'onglets (spécifique à Séjourner). */

.brabois-atouts--evt {
	margin-top: 0;
	background: var(--beige-lumineux);
	padding-top: 56px; /* respiration entre la base de la photo et les colonnes */
	padding-bottom: 64px;
}
/* Séjourner impose min-height:560px à la grille (séparateurs pleine hauteur sous la
   carte d'onglets) + 140px de padding haut aux colonnes : ici pas de carte -> on
   annule pour une section BIEN moins haute (séparateurs = hauteur du contenu). */
.brabois-atouts--evt .brabois-atouts__grid {
	min-height: 0;
}
.brabois-atouts--evt .brabois-atouts__item {
	padding-top: 8px;
	padding-bottom: 8px;
}

/* ==========================================================================
   Section 3 — « formats » : fond blanc, titre bleu Château + filet, puis 4 cartes
   (image 210px + titre + filet blanc + description) sur fond bleu Château.
   ========================================================================== */

.brabois-formats {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	background: #fff;
	/* padding-bottom 0 : le fond blanc s'arrête au 2/3 des cartes ; leur tiers bas
	   déborde sur la section forfaits (beige) qui remonte dessous. */
	padding: 96px 24px 0;
	overflow: visible;
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.brabois-formats__head {
	max-width: 1280px;
	margin: 0 auto 40px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}
.brabois-formats__title {
	margin: 0;
	color: var(--bleu-chateau, #3f5565);
	font-family: "Montserrat", sans-serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 29.92px;
}
.brabois-formats__rule {
	width: 285px;
	max-width: 100%;
	height: 1px;
	background: rgba(63, 85, 101, 0.25);
}

.brabois-formats__grid {
	max-width: 1280px;
	/* margin-bottom négatif = le tiers bas des cartes déborde sous la section. */
	margin: 0 auto calc(-1 * var(--fmt-overlap, 124px));
	position: relative;
	z-index: 2; /* cartes AU-DESSUS du beige des forfaits */
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
}

.brabois-fmt-card {
	/* flexibles : les 4 cartes restent sur UNE ligne même sur desktop étroit
	   (elles rétrécissent). 2x2 en tablette, 1 colonne en mobile (voir plus bas). */
	flex: 1 1 0;
	min-width: 0;
	max-width: 340px;
	box-sizing: border-box;
	background: var(--bleu-chateau, #3f5565);
	outline: 1px solid rgba(252, 252, 252, 0.36);
	outline-offset: -1px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
/* 4 de front tant que lisible ; 2x2 en tablette ; 1 colonne en mobile. */
@media (max-width: 900px) {
	.brabois-fmt-card {
		flex: 1 1 calc(50% - 10px);
		max-width: calc(50% - 10px);
	}
}
@media (max-width: 560px) {
	.brabois-fmt-card {
		flex: 1 1 100%;
		max-width: 360px;
	}
}
.brabois-fmt-card__img {
	display: block;
	width: 100%;
	height: 210px;
	object-fit: cover;
}
.brabois-fmt-card__body {
	display: flex;
	flex-direction: column;
	gap: 21px;
	padding: 0 24px 36px;
}
.brabois-fmt-card__cardhead {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.brabois-fmt-card__title {
	margin: 0;
	color: var(--evt-blanc);
	font-family: "Montserrat", sans-serif;
	font-size: 17px;
	font-weight: 600;
	line-height: 23.12px;
}
.brabois-fmt-card__line {
	height: 1px;
	background: var(--evt-blanc);
	opacity: 0.3;
}
.brabois-fmt-card__desc {
	margin: 0;
	color: var(--evt-blanc);
	font-family: "Geist", "Montserrat", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
}

/* ==========================================================================
   Section 4 — « forfaits » : fond beige-lumineux qui REMONTE sous le tiers bas
   des cartes formats. 3 colonnes (titre serif olive + description + prix) alignées
   à droite, séparées par de fins traits verticaux bleu Château.
   ========================================================================== */

.brabois-forfaits {
	position: relative;
	z-index: 1; /* sous les cartes formats (z-index:2) */
	width: 100%;
	box-sizing: border-box;
	/* Fond = texture pattern clair (pas beige-lumineux : la section reserve/salles
	   qui suit, elle, reste en beige-lumineux). */
	background-color: #fdf9f2;
	background-image: url(../img/pattern-clair.jpg);
	background-size: cover;
	background-position: center;
	/* Bordure basse pleine largeur, même style que les séparateurs entre forfaits. */
	border-bottom: 1px solid rgba(63, 85, 101, 0.24);
	/* padding-top = débord des cartes (fmt-overlap) + respiration avant le contenu. */
	/* Section plus compacte : padding vertical = SEULEMENT le débord des cartes
	   (fmt-overlap) en haut, 0 en bas. La respiration haut/bas est portée par les
	   colonnes -> les séparateurs (stretch) prennent toute la hauteur (sous les
	   cartes jusqu'à la bordure basse). */
	padding: var(--fmt-overlap, 124px) 24px 0;
	display: flex;
	justify-content: center;
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.brabois-forfaits__row {
	width: 100%;
	max-width: 1260px;
	display: flex;
	flex-wrap: wrap;
	/* stretch : les séparateurs (hauteur auto) prennent toute la hauteur de la rangée
	   = hauteur du contenu de la section (plus de hauteur fixe arbitraire). */
	align-items: stretch;
	justify-content: center;
	gap: 56px;
}

.brabois-forfait {
	/* flexibles : les 3 forfaits se partagent la rangée et restent alignés même
	   sur desktop étroit (ils rétrécissent). Empilement mobile plus bas. */
	flex: 1 1 0;
	min-width: 0;
	max-width: 344px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	gap: 10px;
	/* respiration = sous les cartes (haut) + avant la bordure basse (bas). Portée
	   par la colonne pour que les séparateurs (stretch) couvrent toute la hauteur. */
	padding: 40px 0 48px;
}
.brabois-forfait__title {
	margin: 0;
	color: var(--vert-olive, #7e8b6f);
	font-family: "Cormorant Infant", Georgia, serif;
	font-style: italic;
	font-weight: 600;
	font-size: 30px;
	line-height: 40.8px;
}
.brabois-forfait__desc {
	width: 100%;
	margin: 12px 0 0; /* équivaut au <br/> de tête de la maquette */
	color: var(--anthracite, #404040);
	font-family: "Geist", "Montserrat", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
}
.brabois-forfait__price {
	width: 100%;
	margin: 12px 0 0;
	color: var(--vert-olive, #7e8b6f);
	font-family: "Montserrat", sans-serif;
	font-size: 17px;
	font-weight: 600;
	line-height: 23.12px;
}

.brabois-forfaits__sep {
	flex: 0 0 auto;
	align-self: stretch; /* prend toute la hauteur de la rangée */
	width: 1px;
	background: var(--bleu-chateau, #3f5565);
	opacity: 0.24;
}

/* ==========================================================================
   Section 5 — « réserver son séminaire » : fond beige-lumineux. Bouton olive,
   puis encart pattern olive (média 40). L'encart pattern clair (plus large)
   remonte DERRIÈRE l'olive -> l'olive empiète sur son début. (Contenu du clair
   à venir : « le gros ».)
   ========================================================================== */

.brabois-reserve {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	margin-block-start: 0;
	/* La SECTION est en beige-lumineux ; le pattern clair est porté par l'encart
	   des salles plus bas. Padding-bas = 0 : la section s'arrête EXACTEMENT au bas
	   de l'encart des salles (la section suivante --beige-clair enchaîne juste après). */
	background: var(--beige-lumineux);
	padding: 96px 24px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Bouton olive plein (texte + flèche-rond blancs). */
.brabois-reserve__cta {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 18px 28px;
	margin-bottom: 96px;
	background: var(--vert-olive, #7e8b6f);
	color: var(--evt-blanc);
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}
.brabois-reserve__cta-arrow {
	height: 16px;
	width: auto;
	display: block;
}

/* Encart pattern olive (au-dessus du clair). */
.brabois-reserve__olive {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1064px;
	box-sizing: border-box;
	padding: 64px 127px;
	background-color: var(--vert-olive, #7e8b6f);
	background-image: var(--rsv-olive);
	background-size: cover;
	background-position: center;
	color: var(--evt-blanc);
}
.brabois-reserve__olive-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	text-align: center;
}
.brabois-reserve__title {
	margin: 0;
	font-family: "Montserrat", sans-serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 29.92px;
	color: var(--evt-blanc);
}
.brabois-reserve__sep {
	width: 400px;
	max-width: 90%;
	height: 10px;
}
.brabois-reserve__text {
	margin: 0;
	width: 810px;
	max-width: 100%;
	font-family: "Geist", "Montserrat", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	color: var(--evt-blanc);
}
.brabois-reserve__actions {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 24px;
}
.brabois-reserve__tel {
	font-family: "Cormorant Infant", Georgia, serif;
	font-style: italic;
	color: var(--evt-blanc);
	white-space: nowrap;
}
.brabois-reserve__tel .lbl {
	font-size: 20px;
	font-weight: 700;
	line-height: 30px;
}
.brabois-reserve__tel .num {
	font-size: 36px;
	font-weight: 600;
	line-height: 48.96px;
}
.brabois-reserve__or {
	font-family: "Cormorant Infant", Georgia, serif;
	font-style: italic;
	font-size: 20px;
	font-weight: 700;
	color: var(--evt-blanc);
}
.brabois-reserve__mail {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13.5px 17px;
	background: var(--evt-blanc);
	outline: 1px solid var(--evt-blanc);
	outline-offset: -1px;
	color: var(--vert-olive, #7e8b6f);
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}
.brabois-reserve__mail img {
	height: 16px;
	width: auto;
	display: block;
}

/* ---- Salles & capacité (CPT `salle`, 1re salle affichée) ------------------- */
/* Bloc dans la section reserve (pattern clair). Container centré 1360, colonne
   gauche (texte + caractéristiques) + colonne droite (carrousel réutilisé de
   gammes). L'encart olive au-dessus empiète légèrement (marge négative). */

/* Encart d'UNE salle (largeur 1360 centrée, bordure 0.6px anthracite). Chaque
   salle porte son propre encart ; ils se suivent sans marge (bordure haute retirée
   pour l'encart blanc -> pas de double filet). La photo du carrousel inversé
   déborde vers le haut -> overflow visible. */
.brabois-salle-encart {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1360px;
	box-sizing: border-box;
	margin: 0 auto;
	padding: 96px 40px;
	border: 0.6px solid var(--anthracite, #404040);
	overflow: visible;
}
/* Encart PATTERN CLAIR (salle carrousel à droite). */
.brabois-salle-encart--clair {
	background-color: #fdf9f2;
	background-image: var(--rsv-clair);
	background-size: cover;
	background-position: center;
}
/* 1er encart : remonte derrière l'encart olive + dégage la zone d'empiètement. */
.brabois-salle-encart--first {
	margin-top: -80px;
	padding-top: 140px;
}
/* Encart BLANC (salle inversée : carrousel à gauche). L'image déborde vers le haut. */
.brabois-salle-encart--white {
	background: #fff;
}
/* Pas de bordure ENTRE deux encarts qui se suivent (seule l'enveloppe extérieure
   reste) : on retire le bas du non-dernier et le haut du non-premier. Le 1er encart
   porte la classe --first (les encarts ne sont pas les 1ers enfants de la section). */
.brabois-salle-encart:not(:last-child) {
	border-bottom: 0;
}
.brabois-salle-encart:not(.brabois-salle-encart--first) {
	border-top: 0;
}
/* Carrousel de l'encart blanc : remonte pour déborder sur l'encart clair au-dessus. */
.brabois-salle-encart--white .brabois-salle__right {
	margin-top: -180px;
}

.brabois-salles__head {
	margin: 0 0 56px;
}
.brabois-salles__title {
	margin: 0 0 16px;
	color: var(--bleu-chateau, #3f5565);
	font-family: "Montserrat", sans-serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 29.92px;
}
.brabois-salles__title-rule {
	width: 540px;
	max-width: 100%;
	height: 1px;
	background: rgba(63, 85, 101, 0.25);
}

/* Une salle : 2 colonnes (texte / carrousel). */
.brabois-salle {
	display: flex;
	align-items: flex-start;
	gap: 72px;
}
/* Inversée : carrousel à GAUCHE, infos à DROITE. */
.brabois-salle--reverse {
	flex-direction: row-reverse;
}
.brabois-salle__left {
	flex: 1 1 46%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 48px;
}
.brabois-salle__right {
	flex: 1 1 54%;
	min-width: 0;
}

.brabois-salle__intro {
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.brabois-salle__name {
	margin: 0;
	color: var(--bleu-chateau, #3f5565);
	font-family: "Cormorant Infant", Georgia, serif;
	font-style: italic;
	font-weight: 700;
	font-size: 24px;
	line-height: 32.64px;
}
.brabois-salle__desc {
	color: var(--anthracite, #404040);
	font-family: "Geist", "Montserrat", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
}
.brabois-salle__desc p {
	margin: 0 0 4px;
}
.brabois-salle__desc ul {
	margin: 0;
	padding-left: 1.2em;
	list-style: disc;
}

/* Liste de caractéristiques (icône bleu Château + label), séparateurs fins. */
.brabois-salle__features {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.brabois-salle__feature {
	display: flex;
	align-items: center;
	gap: 12px;
}
.brabois-salle__feature-icon {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	object-fit: contain;
}
.brabois-salle__feature-label {
	color: var(--bleu-chateau, #3f5565);
	font-family: "Geist", "Montserrat", sans-serif;
	font-size: 14px;
	font-weight: 500;
}
.brabois-salle__sep {
	height: 1px;
	background: rgba(63, 85, 101, 0.2);
}

/* Séparateur pleine largeur sous le bloc salle (120px sous les vignettes du
   carrousel = colonne la plus haute). Ligne bleu Château à pointes, opacity .30. */
.brabois-salle__divider {
	display: flex;
	align-items: center;
	margin-top: 120px;
	opacity: 0.3;
	color: var(--bleu-chateau, #3f5565); /* couleur du trait + pointes (currentColor) */
}
.brabois-salle__divider-line {
	flex: 1;
	height: 1px;
	background: currentColor;
}
/* Petites pointes pleines aux extrémités (taille fixe, JAMAIS étirées). La couleur
   suit `color` du wrapper (currentColor) -> réutilisable en blanc / bleu Château. */
.brabois-salle__divider-arrow {
	flex: 0 0 auto;
	width: 0;
	height: 0;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
}
.brabois-salle__divider-arrow--l {
	border-right: 7px solid currentColor; /* pointe vers la gauche */
}
.brabois-salle__divider-arrow--r {
	border-left: 7px solid currentColor; /* pointe vers la droite */
}

/* Salle : reste en 2 colonnes (texte | carrousel) sur desktop/laptop ; empilée
   seulement en mobile pour que le carrousel garde une largeur utile. */
@media (max-width: 760px) {
	.brabois-salle,
	.brabois-salle--reverse {
		flex-direction: column;
		gap: 40px;
	}
	.brabois-salle__left,
	.brabois-salle__right {
		flex: 1 1 100%;
		width: 100%;
	}
	.brabois-salle-encart--white .brabois-salle__right {
		margin-top: 0; /* plus de débord vers le haut une fois empilé */
	}
}

/* ==========================================================================
   Section 6 — fond --beige-clair (contenu à venir). Démarre juste après la
   section reserve (qui finit au bas de l'encart des salles).
   ========================================================================== */
.brabois-evt-sec6 {
	width: 100%;
	box-sizing: border-box;
	margin-block-start: 0;
	background: var(--beige-clair);
	display: flex;
	flex-direction: column;
	align-items: center;
	/* padding-top 0 : l'encart pattern est collé EN HAUT de la section. */
	padding: 0 24px 110px;
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Encart pattern (média 13) — MÊME largeur que l'encart des salles (1360). */
.brabois-mat-contact {
	width: 100%;
	max-width: 1360px;
	box-sizing: border-box;
	background-color: #44525f;
	background-image: var(--mat-pattern);
	background-size: cover;
	background-position: center;
	padding: 48px 40px;
	display: flex;
	justify-content: center;
	color: var(--evt-blanc);
}
.brabois-mat-contact__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 96px;
}
.brabois-mat-contact__addr {
	margin: 0;
	font-style: normal;
	color: var(--evt-blanc);
	font-family: "Montserrat", sans-serif;
	font-size: 17px;
	font-weight: 600;
	line-height: 23.12px;
}
.brabois-mat-contact__sep {
	flex: 0 0 auto;
	width: 1px;
	height: 99px;
	background: var(--evt-blanc);
	opacity: 0.3;
}
.brabois-mat-contact__tel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}
.brabois-mat-contact__tel-lbl {
	color: var(--evt-blanc);
	font-family: "Montserrat", sans-serif;
	font-size: 17px;
	font-weight: 600;
	line-height: 23.12px;
}
.brabois-mat-contact__tel-num .t {
	font-family: "Cormorant Infant", Georgia, serif;
	font-style: italic;
	font-weight: 700;
	font-size: 20px;
	line-height: 27.2px;
	color: var(--evt-blanc);
}
.brabois-mat-contact__tel-num .n {
	font-family: "Cormorant Infant", Georgia, serif;
	font-style: italic;
	font-weight: 600;
	font-size: 36px;
	line-height: 48.96px;
	color: var(--evt-blanc);
}

/* Titre + grille de matériel. */
.brabois-mat {
	width: 100%;
	max-width: 1225px;
	margin-top: 130px;
}
.brabois-mat__title {
	margin: 0 0 18px;
	text-align: center;
	color: var(--bleu-chateau, #3f5565);
	font-family: "Montserrat", sans-serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 29.92px;
}
/* Séparateur à pointes pleines sous le titre (réutilise ligne + triangles). */
.brabois-mat__sep {
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 380px;
	margin: 0 auto 56px;
	opacity: 0.3;
	color: var(--bleu-chateau, #3f5565);
}
.brabois-mat__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 77px;
}
.brabois-mat-card {
	width: 357px;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.brabois-mat-card__body {
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.brabois-mat-card__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}
.brabois-mat-card__name {
	margin: 0;
	color: var(--bleu-chateau, #3f5565);
	font-family: "Cormorant Infant", Georgia, serif;
	font-style: italic;
	font-weight: 700;
	font-size: 24px;
	line-height: 32.64px;
}
.brabois-mat-card__rule {
	width: 100%;
	height: 1px;
	background: rgba(63, 85, 101, 0.4);
}
.brabois-mat-card__desc {
	min-height: 145px;
	color: var(--anthracite, #404040);
	font-family: "Geist", "Montserrat", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
}
.brabois-mat-card__desc p {
	margin: 0;
}
.brabois-mat-card__img {
	display: block;
	width: 100%;
	height: 210px;
	object-fit: cover;
}

/* ==========================================================================
   Section 7 — fond --beige-lumineux : titre centré + séparateur, puis image
   « assiette reservation » en bas à droite ; la section finit au bas de l'image.
   ========================================================================== */
.brabois-evt-sec7 {
	width: 100%;
	box-sizing: border-box;
	margin-block-start: 0;
	background: var(--beige-lumineux);
	display: flex;
	flex-direction: column;
	/* padding-bas 0 : la section s'arrête EXACTEMENT au bas de l'image. */
	padding: 96px 0 0;
	overflow: hidden;
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.brabois-evt-sec7__head {
	padding: 0 24px;
	text-align: center;
}
.brabois-evt-sec7__title {
	margin: 0 0 18px;
	text-align: center;
	color: var(--bleu-chateau, #3f5565);
	font-family: "Montserrat", sans-serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 29.92px;
}
/* Image collée à droite (touche le bord droit), gap à gauche, remontée sous le
   séparateur. La section se termine à son bas. */
.brabois-evt-sec7__img {
	display: block;
	width: 82%;
	max-width: 1280px;
	height: auto;
	margin: 80px 0 0 auto;
}
@media (max-width: 900px) {
	.brabois-evt-sec7 {
		padding-top: 64px;
	}
	.brabois-evt-sec7__img {
		width: 100%;
		margin-top: 56px;
	}
}

@media (max-width: 900px) {
	.brabois-mat {
		margin-top: 80px;
	}
	.brabois-mat__grid {
		gap: 48px;
	}
	.brabois-mat-contact__inner {
		gap: 40px;
	}
	.brabois-mat-contact__sep {
		display: none;
	}
}

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

@media (max-width: 1100px) {
	.brabois-evt {
		padding: 110px 20px 220px;
	}
	.brabois-evt__photo {
		width: 94%;
	}
	:root {
		--evt-photo-rise: 150px;
	}
	.brabois-formats__grid {
		justify-content: center;
	}
	/* Forfaits : restent à 3 de front, gap resserré pour tenir sur petit desktop. */
	.brabois-forfaits__row {
		gap: 32px;
	}
}

@media (max-width: 782px) {
	.brabois-evt {
		padding: 80px 18px 140px;
	}
	.brabois-evt__title {
		font-size: 26px;
		line-height: 1.18;
	}
	.brabois-evt__tel-num {
		font-size: 30px;
	}
	.brabois-evt__actions {
		gap: 20px;
	}
	.brabois-evt__photo {
		width: 100%;
		max-width: 100%;
		align-self: stretch;
	}
	:root {
		--evt-photo-rise: 60px;
	}
	.brabois-atouts--evt {
		padding-top: 56px;
	}
	.brabois-formats {
		padding: 64px 18px 80px;
	}
	.brabois-fmt-card {
		width: 100%;
		max-width: 360px;
	}
	.brabois-formats__grid {
		justify-content: center;
	}
}

/* ==========================================================================
   Section 8 — fond pattern olive : 2 colonnes (restaurant/brasserie + hôtel),
   séparateur vertical entre elles. Titre blanc + séparateur à pointes blanc +
   description + bouton blanc (texte olive).
   ========================================================================== */
.brabois-evt-sec8 {
	width: 100%;
	box-sizing: border-box;
	margin-block-start: 0;
	background-color: #7e8b6f;
	background-image: var(--sec8-olive);
	background-size: cover;
	background-position: center;
	/* padding-bas généreux : l'encart de la section 9 déborde SUR cette zone. */
	padding: 96px 24px 170px;
	display: flex;
	justify-content: center;
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.brabois-evt-sec8__inner {
	width: 100%;
	max-width: 1360px;
	display: flex;
	align-items: stretch;
	gap: 80px;
}
.brabois-rh {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
	color: var(--evt-blanc);
}
.brabois-rh__head {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 24px;
}
.brabois-rh__title {
	margin: 0;
	color: var(--evt-blanc);
	font-family: "Montserrat", sans-serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 29.92px;
}
.brabois-rh__sep {
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 460px;
	opacity: 0.3;
	color: var(--evt-blanc);
}
.brabois-rh__desc {
	margin: 0;
	width: 446px;
	max-width: 100%;
	color: var(--evt-blanc);
	font-family: "Geist", "Montserrat", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
}
.brabois-rh__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13.5px 17px;
	background: var(--evt-blanc);
	outline: 1px solid var(--evt-blanc);
	outline-offset: -1px;
	text-decoration: none;
	color: var(--vert-olive, #7e8b6f);
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	font-weight: 600;
}
.brabois-rh__btn img {
	height: 16px;
	width: auto;
	display: block;
}
.brabois-rh__col-divider {
	flex: 0 0 auto;
	width: 1px;
	align-self: stretch;
	background: var(--evt-blanc);
	opacity: 0.24;
}

/* ==========================================================================
   Section 9 — fond --beige-lumineux : encart pattern clair « établissement engagé »
   qui DÉBORDE (remonte) sur la section 8. Gauche = texte + tél + bouton olive,
   droite = image « etablissement engage » (déborde en haut de l'encart).
   ========================================================================== */
.brabois-evt-sec9 {
	width: 100%;
	box-sizing: border-box;
	margin-block-start: 0;
	background: var(--beige-lumineux);
	padding: 0 24px 110px;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.brabois-eng {
	position: relative;
	z-index: 2; /* au-dessus de la section 8 */
	width: 100%;
	max-width: 1360px;
	box-sizing: border-box;
	margin-top: -130px; /* remonte SUR la section 8 (pattern olive) */
	border: 0.6px solid var(--anthracite, #404040);
	background-color: #fdf9f2;
	background-image: var(--eng-clair);
	background-size: cover;
	background-position: center;
	padding: 64px;
	display: flex;
	align-items: center;
	gap: 56px;
	overflow: visible; /* l'image de droite déborde en haut */
}
.brabois-eng__left {
	flex: 1 1 52%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
}
.brabois-eng__group {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
}
.brabois-eng__head {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 24px;
}
.brabois-eng__title {
	margin: 0;
	color: var(--bleu-chateau, #3f5565);
	font-family: "Montserrat", sans-serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 29.92px;
}
.brabois-eng__sep {
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 460px;
	opacity: 0.3;
	color: var(--bleu-chateau, #3f5565);
}
.brabois-eng__desc {
	margin: 0;
	color: var(--anthracite, #404040);
	font-family: "Geist", "Montserrat", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
}
.brabois-eng__tel {
	margin: 0;
}
.brabois-eng__tel .lbl {
	color: var(--anthracite, #404040);
	font-family: "Montserrat", sans-serif;
	font-size: 18px;
	font-weight: 600;
}
.brabois-eng__tel .num {
	color: var(--bleu-chateau, #3f5565);
	font-family: "Cormorant Infant", Georgia, serif;
	font-style: italic;
	font-weight: 600;
	font-size: 36px;
	line-height: 48.96px;
}
.brabois-eng__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13.5px 17px;
	background: var(--vert-olive, #7e8b6f);
	text-decoration: none;
	color: var(--evt-blanc);
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	font-weight: 600;
}
.brabois-eng__btn img {
	height: 16px;
	width: auto;
	display: block;
}
.brabois-eng__right {
	flex: 1 1 48%;
	min-width: 0;
	align-self: stretch;
	display: flex;
	align-items: center;
}
.brabois-eng__right img {
	display: block;
	width: 100%;
	height: auto;
	/* déborde en haut de l'encart (image plus haute). */
	margin: -80px 0;
}

@media (max-width: 900px) {
	.brabois-evt-sec8__inner {
		flex-direction: column;
		gap: 48px;
	}
	.brabois-rh__col-divider {
		width: 100%;
		height: 1px;
		align-self: stretch;
	}
	.brabois-eng {
		flex-direction: column;
		align-items: stretch;
		gap: 40px;
		padding: 48px 24px;
	}
	.brabois-eng__right img {
		margin: 0;
	}
}

/* ==========================================================================
   Section 12 — avis « événement d'entreprise » (section avis réutilisée de
   l'accueil). Sur l'accueil, .brabois-avis a padding-top:300px (débord des cartes
   chambres) : ici PAS de débord -> padding-top réduit. Grosse marge basse : le
   footer remonte.
   ========================================================================== */
/* Formulaire sur événement : collé à la section précédente (pas de gap) ; la carte
   blanche déborde de ~1/4 sur la section avis (le beige-lumineux s'arrête au 3/4). */
.brabois-cform--evt {
	margin-block-start: 0;
	margin-top: 0;
	position: relative;
	z-index: 2;
	padding-bottom: 0;
}
.brabois-cform--evt .brabois-cform__form {
	position: relative;
	z-index: 2;
	margin-bottom: -166px; /* ~1/4 de la carte -> le beige finit au 3/4 de la carte */
}

.brabois-avis--evt {
	position: relative;
	z-index: 1;
	/* dégage le débord de la carte du formulaire (166) + respiration. */
	padding-top: 246px;
	/* marge basse = remontée du footer (-250) + respiration : le footer couvre pile
	   cette zone, sans laisser de grand vide beige au-dessus/scrollable. */
	padding-bottom: 274px;
	/* le slider (track overflow-x:auto) ne doit pas créer de scroll horizontal du
	   document en mobile : on clippe la section (le track garde son scroll interne). */
	overflow-x: clip;
}
/* Aligné sur les breakpoints de remontée du footer (-180 ≤1024, -120 ≤640). */
@media (max-width: 1024px) {
	.brabois-avis--evt {
		padding-bottom: 200px;
	}
}
@media (max-width: 640px) {
	.brabois-avis--evt {
		padding-bottom: 140px;
	}
}

/* ==========================================================================
   RESPONSIVE — page « Organiser un événement » (≤1380 laptop/tablet + mobile)
   ========================================================================== */

/* Hero : contraindre le head (flex item shrink-to-fit) à la largeur de l'inner,
   sinon le titre (width:701) déborde le viewport en mobile. */
.brabois-evt__head {
	width: 100%;
}

/* ---- ≤1380 : encarts/gaps resserrés ---- */
@media (max-width: 1380px) {
	.brabois-reserve__olive {
		padding-left: 6vw;
		padding-right: 6vw;
	}
	.brabois-evt-sec8__inner {
		gap: 56px;
	}
	.brabois-eng {
		gap: 40px;
		padding: 56px;
	}
}

/* ---- ≤1200 : forfaits empilés (3 colonnes 344 ne tiennent plus) ---- */
/* Forfaits : empilés seulement en mobile (les 3 restent alignés sur desktop/laptop). */
@media (max-width: 760px) {
	/* empilé : on retire le padding des colonnes -> rajouter un padding-bas de
	   section pour ne pas coller le dernier forfait à la section du dessous. */
	.brabois-forfaits {
		padding-bottom: 56px;
	}
	.brabois-forfaits__row {
		flex-direction: column;
		align-items: center;
		gap: 40px;
	}
	.brabois-forfait {
		/* en colonne, flex-basis:344 = HAUTEUR fixe -> énorme vide sous le prix.
		   On repasse en auto. Et on retire le padding 40/48 (qui servait aux
		   séparateurs verticaux desktop) -> plus d'écart parasite avant le trait. */
		flex: 0 0 auto;
		padding: 0;
		align-items: center;
		text-align: center;
	}
	.brabois-forfaits__sep {
		align-self: center;
		width: 240px;
		height: 1px;
	}
}

/* ---- ≤1024 : les blocs 2 colonnes passent en pile (salle traitée à part ≤760) ---- */
@media (max-width: 1024px) {
	/* Restaurant / hôtel */
	.brabois-evt-sec8__inner {
		flex-direction: column;
		gap: 44px;
	}
	.brabois-rh__col-divider {
		width: 100%;
		height: 1px;
		align-self: stretch;
	}
	/* Établissement engagé */
	.brabois-eng {
		flex-direction: column;
		align-items: stretch;
		gap: 36px;
	}
	.brabois-eng__right img {
		margin: 0; /* plus de débord haut/bas */
	}
	/* Barre contact matériel */
	.brabois-mat-contact__inner {
		gap: 40px;
	}
	.brabois-mat-contact__sep {
		display: none;
	}
}

/* ---- Mobile ≤700 : tout en pile, paddings réduits, débords neutralisés ---- */
@media (max-width: 700px) {
	.brabois-evt {
		padding: 64px 16px 200px;
	}
	.brabois-evt__title {
		font-size: 24px;
		line-height: 1.2;
	}
	.brabois-evt__text {
		font-size: 15px;
	}
	.brabois-evt__actions {
		flex-direction: column;
		gap: 16px;
	}
	.brabois-evt__tel-num {
		font-size: 30px;
	}
	/* Photo qui empiète sur le hero : remontée plus haut en mobile. */
	:root {
		--evt-photo-rise: 130px;
	}

	/* Atouts (4 pictos) : compactés en mobile (2x2) pour prendre moins de place. */
	.brabois-atouts--evt {
		padding-top: 28px;
		padding-bottom: 28px;
	}
	.brabois-atouts--evt .brabois-atouts__grid {
		gap: 18px 0;
	}
	.brabois-atouts--evt .brabois-atouts__item {
		gap: 12px;
		padding: 4px 12px;
	}
	.brabois-atouts--evt .brabois-atouts__icon {
		height: 40px;
	}
	.brabois-atouts--evt .brabois-atouts__text {
		font-size: 14px;
		line-height: 20px;
	}

	/* Réserver / salles */
	.brabois-reserve {
		padding: 64px 16px 0;
	}
	.brabois-reserve__olive {
		padding: 40px 20px;
	}
	.brabois-reserve__text {
		width: 100%;
	}
	.brabois-reserve__actions {
		gap: 16px;
	}
	.brabois-reserve__tel .num {
		font-size: 30px;
	}
	.brabois-salle-encart {
		padding: 40px 20px;
	}
	.brabois-salle-encart--first {
		padding-top: 120px;
	}
	.brabois-salle__divider {
		margin-top: 72px;
	}

	/* Section 6 (matériel) */
	.brabois-mat {
		margin-top: 56px;
	}
	.brabois-mat-contact {
		padding: 40px 20px;
	}
	.brabois-mat-contact__addr {
		text-align: center;
	}

	/* Section 7 (assiette) */
	.brabois-evt-sec7 {
		padding-top: 56px;
	}
	.brabois-evt-sec7__img {
		width: 100%;
		margin-top: 48px;
	}

	/* Sections 8 / 9 */
	.brabois-evt-sec8 {
		padding: 64px 16px 120px;
	}
	.brabois-rh__desc {
		width: 100%;
	}
	.brabois-eng {
		padding: 40px 20px;
		gap: 32px;
		/* remonte moins sur la section 8 en mobile (sinon cache le bouton
		   « RÉSERVER DES CHAMBRES »). */
		margin-top: -60px;
	}
	.brabois-eng__tel .num {
		font-size: 30px;
	}

	/* Formulaire : pas de débord de carte au mobile */
	.brabois-cform--evt {
		padding-bottom: 64px;
	}
	.brabois-cform--evt .brabois-cform__form {
		margin-bottom: 0;
	}

	/* Avis : padding-top compact (plus de débord carte en mobile). Le padding-bottom
	   est géré par les breakpoints alignés sur le footer (200 ≤1024 / 140 ≤640). */
	.brabois-avis--evt {
		padding-top: 64px;
	}
}

/* ------------------------------------------------------------------
   Contacts séminaires : adresse mail au lieu du 03 83 95 53 62
   Retour de la cliente du 31/08/2026 : ce numéro n'existe pas, les
   demandes de séminaire passent par une adresse dédiée.
   Une adresse de 34 signes ne se lit pas en 36px italique, et le
   `white-space:nowrap` hérité la ferait sortir de l'écran : on rend
   donc la coupure possible et on ramène la taille au lisible.
   ------------------------------------------------------------------ */
.brabois-evt__tel--mail {
	white-space: normal;
	overflow-wrap: anywhere;
}
.brabois-evt__tel--mail .brabois-evt__tel-num {
	font-size: 22px;
	line-height: 30px;
}
.brabois-mat-contact__tel-num--mail {
	text-decoration: none;
	overflow-wrap: anywhere;
}
.brabois-mat-contact__tel-num--mail .n {
	font-size: 20px;
	line-height: 27px;
}

@media (max-width: 560px) {
	.brabois-evt__tel--mail .brabois-evt__tel-num {
		font-size: 18px;
		line-height: 25px;
	}
	.brabois-mat-contact__tel-num--mail .n {
		font-size: 17px;
		line-height: 24px;
	}
}

/* Ancre du bouton « Découvrir nos salles » (retour client 23/09/2026) : décale la cible
   de la hauteur du header pour que le titre des salles ne passe pas dessous. */
#nos-salles {
	scroll-margin-top: calc(var(--brabois-header-h, 92px) + 24px);
}