/* ==========================================================================
   Hero d'accueil — Château de Brabois
   4 blocs plein écran (image de fond + libellé + flèche)
   ========================================================================== */

:root {
	--bleu-chateau: #3f5565;
	--beige-lumineux: #f8efe8;
}

.brabois-hero {
	position: relative;
	display: flex;
	width: 100%;
	min-height: 100vh;
	/* Annule le block-gap TT5 qui pousse le hero vers le bas (bande blanche en tête). */
	margin-block-start: 0;
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Badge circulaire « Découvrir » — à cheval sur le bas du hero,
   centré horizontalement sous le 3ᵉ bloc « Organiser un événement » (62,5 %). */
.brabois-hero__badge {
	position: absolute;
	bottom: 0;
	left: 67%; /* légèrement à droite du centre du bloc « Organiser un événement » */
	/* Centré sur la couture hero / section 1 : la moitié haute du badge est sur le
	   hero, la moitié basse sur le beige de l'intro (translate Y de 50%).
	   Le padding-top de .brabois-intro (95px) dégage le contenu en dessous. */
	transform: translate(-50%, 50%);
	z-index: 5;
	width: 104px;
	height: 104px;
	/* Cliquable (lien vers /le-chateau/) : zone de clic bornée au disque, et pas
	   de contour de focus au clic souris (cohérent avec le reste du site). */
	border-radius: 9999px;
	-webkit-tap-highlight-color: transparent;
}
.brabois-hero__badge:focus:not(:focus-visible) {
	outline: none;
}
.brabois-hero__badge img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* Rotation continue en boucle infinie. */
	animation: brabois-badge-spin 26s linear infinite;
}
@keyframes brabois-badge-spin {
	to {
		transform: rotate(360deg);
	}
}
/* Respect de l'accessibilité : pas d'animation si l'utilisateur la refuse. */
@media (prefers-reduced-motion: reduce) {
	.brabois-hero__badge img {
		animation: none;
	}
}

.brabois-hero__item {
	position: relative;
	flex: 1 1 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	min-height: 100vh;
	overflow: hidden;
	text-decoration: none;
	color: #fcfcfc;
	-webkit-tap-highlight-color: transparent;
}

/* Pas de contour de focus au clic souris (la séparation fine reste, elle, permanente).
   On garde un focus clavier discret pour l'accessibilité. */
.brabois-hero__item:focus {
	outline: none;
}
.brabois-hero__item:focus:not(:focus-visible) {
	outline: none;
}
.brabois-hero__item:focus-visible {
	outline: 2px solid rgba(252, 252, 252, 0.6);
	outline-offset: -2px;
}

/* Séparation blanche au premier plan : peu prononcée (blanc ~40 %) et
   fondue à ses extrémités haute et basse (dégradé transparent → blanc → transparent). */
.brabois-hero__item + .brabois-hero__item::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 2px;
	background: linear-gradient(
		to bottom,
		rgba(252, 252, 252, 0) 0%,
		rgba(252, 252, 252, 0.4) 22%,
		rgba(252, 252, 252, 0.4) 78%,
		rgba(252, 252, 252, 0) 100%
	);
	z-index: 3;
	pointer-events: none;
}

/* Image de fond */
.brabois-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--bhg);
	background-size: cover;
	background-position: center;
	transition: transform 0.7s ease;
	will-change: transform;
}

/* Dégradés bleu Château : opaques aux extrémités (haut foncé + bas Bleu-Château),
   transparents au centre → l'image reste bien visible au milieu. */
.brabois-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(63, 85, 101, 0) 66%, var(--bleu-chateau) 100%),
		linear-gradient(180deg, #13222c 0%, rgba(19, 34, 44, 0) 32%);
}

.brabois-hero__item:hover .brabois-hero__bg,
.brabois-hero__item:focus-visible .brabois-hero__bg {
	transform: scale(1.05);
}

/* Contenu (libellé + flèche) */
.brabois-hero__content {
	position: relative;
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 0 16px 56px;
	text-align: center;
}

.brabois-hero__title {
	display: flex;
	flex-direction: column;
}

.brabois-hero__title .l1 {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: 0.02em;
}

.brabois-hero__title .l2 {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0.02em;
}

.brabois-hero__arrow {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: contain;
	transition: transform 0.3s ease;
}

.brabois-hero__item:hover .brabois-hero__arrow,
.brabois-hero__item:focus-visible .brabois-hero__arrow {
	transform: translateX(4px);
}

/* Tablette / mobile : empilement vertical */
@media (max-width: 782px) {
	.brabois-hero {
		flex-direction: column;
		min-height: 0;
	}
	.brabois-hero__item {
		/* 60vh x 4 blocs = 240vh : le contenu de la page commençait à ~2000px.
		   Le plancher en px garde une photo lisible en paysage. */
		min-height: clamp(240px, 34vh, 320px);
	}
	/* Séparation horizontale entre blocs empilés (fondue aux extrémités gauche/droite) */
	.brabois-hero__item + .brabois-hero__item::after {
		left: 0;
		right: 0;
		top: 0;
		bottom: auto;
		width: auto;
		height: 2px;
		background: linear-gradient(
			to right,
			rgba(252, 252, 252, 0) 0%,
			rgba(252, 252, 252, 0.4) 22%,
			rgba(252, 252, 252, 0.4) 78%,
			rgba(252, 252, 252, 0) 100%
		);
	}
}

/* ==========================================================================
   Accueil — Section « intro » (sous le hero)
   ========================================================================== */

.brabois-intro {
	position: relative;
	background: var(--beige-lumineux, #f8efe8);
	/* Marges internes : 95px au-dessus du contenu, 68px en dessous. Le badge,
	   centré sur la couture, descend ~52px dans cette section : les 95px le
	   dégagent (c'est ce que compensait l'ancien padding-top de 36px). */
	padding: 95px 24px 68px;
	overflow: visible;
	/* Pas de block-gap TT5 entre le hero et cette section (sinon bande blanche). */
	margin-block-start: 0;
}

/* Arabesque : arche fine, pleine largeur écran, dont le HAUT déborde sur le hero.
   Hauteur bornée + object-fit:cover/top -> on ne montre QUE l'arche du haut de l'image
   (on recadre la ligne horizontale du bas qui, sinon, traversait le contenu). */
.brabois-intro__arabesque {
	position: absolute;
	top: -120px;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	height: 190px;
	object-fit: cover;
	object-position: top center;
	z-index: 0;
	pointer-events: none;
}

/* Nettoyage des <p> parasites injectés par wpautop dans la section. */
.brabois-intro p:empty {
	display: none;
}
.brabois-intro > p,
.brabois-intro__head > p {
	margin: 0;
}

.brabois-intro__inner {
	position: relative;
	z-index: 1;
	max-width: 988px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	text-align: center;
}

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

.brabois-intro__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--bleu-chateau, #3f5565);
	font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 14px;
	font-weight: 500;
}
.brabois-intro__eyebrow::before {
	content: "";
	width: 11px;
	height: 11px;
	border-radius: 9999px;
	background: #f6b83b; /* Jaune */
	flex: 0 0 auto;
}

.brabois-intro__title {
	margin: 0;
	color: var(--bleu-chateau, #3f5565);
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 32px;
	font-weight: 600;
	line-height: 37.12px;
}

.brabois-intro__text {
	margin: 0;
	max-width: 988px;
	color: #404040; /* Anthracite textes */
	font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
}

@media (max-width: 782px) {
	.brabois-intro {
		padding: 120px 20px 70px;
	}
	.brabois-intro__title {
		font-size: 24px;
		line-height: 1.2;
	}
}

/* ==========================================================================
   Accueil — Section « À propos » (fond pattern olive)
   ========================================================================== */

.brabois-apropos {
	position: relative;
	background: var(--ap-pattern) center / cover no-repeat;
	background-color: var(--vert-olive, #7e8b6f); /* fallback */
	overflow: visible;
	margin-block-start: 0; /* pas de block-gap TT5 */
}

.brabois-apropos__inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 90px max(24px, calc(50% - 720px)) 0; /* pas de padding bas : l'image déborde */
	display: flex;
	align-items: center;
	gap: 80px;
}

.brabois-apropos__left {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
	color: #fcfcfc;
}
.brabois-apropos__text {
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.brabois-apropos__title {
	margin: 0;
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 29.92px;
	color: #fcfcfc;
}
.brabois-apropos__desc {
	margin: 0;
	font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	color: #fcfcfc;
}

/* CTA blanc, texte + flèche olive */
.brabois-apropos__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-apropos__cta span {
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--vert-olive, #7e8b6f);
}
.brabois-apropos__cta img {
	display: block;
	height: 16px;
	width: auto;
}
.brabois-apropos__cta:hover {
	filter: brightness(0.95);
}

/* Colonne droite : photo en arche, plus grande, qui déborde sur la section suivante. */
.brabois-apropos__right {
	flex: 1.45 1 0; /* colonne image plus large que le texte */
	display: flex;
	justify-content: flex-end;
}
.brabois-apropos__img {
	display: block;
	width: 100%;
	max-width: 720px;
	height: auto;
	margin-bottom: -150px;
	position: relative;
	z-index: 2; /* passe AU-DESSUS de la section suivante (beige) pour rester visible */
}

/* Nettoyage éventuel des <p> parasites wpautop. */
.brabois-apropos p:empty {
	display: none;
}

@media (max-width: 900px) {
	.brabois-apropos__inner {
		flex-direction: column;
		align-items: stretch;
		padding-top: 60px;
		gap: 40px;
	}
	.brabois-apropos__img {
		max-width: 100%;
		margin-bottom: -70px;
	}
}

/* ==========================================================================
   Accueil — Section « chiffres clés » (fond beige-clair)
   ========================================================================== */

.brabois-chiffres {
	background: var(--beige-clair, #fffcf5);
	margin-block-start: 0;
	padding: 80px 24px;
}
.brabois-chiffres__inner {
	max-width: 1440px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
.brabois-chiffres__item {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	text-align: right;
	padding: 24px 44px;
}
.brabois-chiffres__item + .brabois-chiffres__item {
	border-left: 1px solid rgba(63, 85, 101, 0.14);
}
.brabois-chiffres__num {
	color: var(--vert-olive, #7e8b6f);
	font-family: "Cormorant Infant", serif;
	font-style: italic;
	font-weight: 600;
	font-size: 70px;
	line-height: 1.1;
}
.brabois-chiffres__desc {
	max-width: 280px;
	color: #404040;
	font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
}

@media (max-width: 900px) {
	.brabois-chiffres__inner {
		grid-template-columns: repeat(2, 1fr);
	}
	.brabois-chiffres__item:nth-child(3) {
		border-left: 0;
	}
}
@media (max-width: 520px) {
	.brabois-chiffres__inner {
		grid-template-columns: 1fr;
	}
	.brabois-chiffres__item + .brabois-chiffres__item {
		border-left: 0;
		border-top: 1px solid rgba(63, 85, 101, 0.14);
	}
}

/* ==========================================================================
   Accueil — Section « L'équipe du Château » (fond beige-lumineux).
   Carrousel coverflow IDENTIQUE à Séjourner « Plongez dans l'ambiance » : on
   réutilise tel quel les classes `.brabois-ambiance__*` (CSS dans sejour.css)
   + le JS `ambiance.js` (chargés partout). Ici on ne fait qu'habiller la section
   et ajouter le titre « double-nom » (style portrait) SOUS le carrousel.
   ========================================================================== */
.brabois-equipe {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	margin-block-start: 0;
	padding: 96px 24px 120px;
	background: var(--beige-lumineux, #f8efe8);
	text-align: center;
	/* Empêche les flèches du carrousel (posées en négatif) de créer un scroll
	   horizontal en mobile. */
	overflow: hidden;
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
/* Le carrousel a un `margin: 100px auto 0` propre à Séjourner : neutralisé ici
   (l'espacement est porté par le padding de la section). */
.brabois-equipe .brabois-ambiance__carousel {
	margin-top: 0;
}
/* Titre sous le carrousel : un plein + un « fantôme » très clair, décalé (comme le
   double-nom du portrait). */
.brabois-equipe__caption {
	position: relative;
	display: inline-block;
	margin-top: 44px;
	line-height: 1;
}
.brabois-equipe__name {
	font-family: "Cormorant Infant", Georgia, serif;
	font-style: italic;
	font-weight: 600;
	font-size: 40px;
	color: var(--vert-olive, #7e8b6f);
	white-space: nowrap;
}
.brabois-equipe__name--ghost {
	position: absolute;
	left: -42px;
	top: -34px;
	opacity: 0.14;
	pointer-events: none;
}

/* Petit/moyen desktop : dès que le carrousel approche sa largeur max (1280) les
   flèches posées à left/right:-30px sortent de l'écran (clippées par overflow:hidden
   -> moitié coupée). On les ramène DANS la section. Seuil ~1360px (au-delà, la marge
   autour du carrousel suffit à contenir le -30px). */
@media (max-width: 1360px) {
	.brabois-equipe .brabois-ambiance__nav {
		width: 64px;
	}
	.brabois-equipe .brabois-ambiance__nav--prev {
		left: 4px;
	}
	.brabois-equipe .brabois-ambiance__nav--next {
		right: 4px;
	}
}

@media (max-width: 860px) {
	.brabois-equipe {
		padding: 64px 20px 88px;
	}
	.brabois-equipe__name {
		font-size: 30px;
	}
	.brabois-equipe__name--ghost {
		left: -30px;
		top: -24px;
	}
	.brabois-equipe .brabois-ambiance__nav {
		width: 46px;
	}
	.brabois-equipe .brabois-ambiance__nav--prev {
		left: 0;
	}
	.brabois-equipe .brabois-ambiance__nav--next {
		right: 0;
	}
}

/* ==========================================================================
   Accueil — Section « restauration » (image + bloc olive).
   (A) `.brabois-resto-img` = image assiette à droite → réutilise `.brabois-evt-sec7*`.
   (B) `.brabois-resto-olive` = bloc olive 2 colonnes → réutilise `.brabois-prolongez*`.
   L'encart « Pour toute réservation » vit désormais dans la section événements
   suivante (`.brabois-aevt`) : il REMONTE sur ce bloc olive ET déborde sur le
   beige-lumineux de la section événements.
   ========================================================================== */

/* ==========================================================================
   Accueil — DERNIÈRE section « événements & cérémonies » (avant footer).
   Fond --beige-lumineux. L'encart « Pour toute réservation » (`.brabois-ambiance__card`,
   margin-top:-150px baked-in) est le 1er enfant → il remonte sur le bloc olive
   au-dessus et déborde sur ce beige. Puis 2 colonnes : gauche = titre + features
   + 2 boutons ; droite = 2 images légèrement superposées. Contenu éditable en
   back-office (inc/accueil-evenements.php).
   ========================================================================== */
.brabois-aevt {
	width: 100%;
	box-sizing: border-box;
	margin-block-start: 0;
	/* Marge interne basse : le footer remonte et ne doit PAS empiéter sur le
	   contenu de cette dernière section (2 images + boutons). */
	padding: 0 24px 300px;
	background: var(--beige-lumineux, #f8efe8);
	/* BFC : la marge négative de l'encart le fait GRIMPER sur l'olive du dessus
	   au lieu de déplacer toute la section (margin-collapse). */
	display: flow-root;
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.brabois-aevt__inner {
	max-width: 1280px;
	margin: 96px auto 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
	column-gap: 72px;
	align-items: center;
}
/* ---- Colonne gauche : titre + features + boutons ---------------------------- */
.brabois-aevt__left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
}
.brabois-aevt__title {
	margin: 0;
	max-width: 650px;
	color: var(--bleu-chateau, #3f5565);
	font-family: "Montserrat", sans-serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 29.92px;
}
.brabois-aevt__features {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	max-width: 542px;
}
.brabois-aevt__feature {
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 16px 0;
	border-bottom: 1px solid rgba(63, 85, 101, 0.3);
}
.brabois-aevt__feature:first-child {
	border-top: 1px solid rgba(63, 85, 101, 0.3);
}
.brabois-aevt__icon {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.brabois-aevt__icon img {
	max-width: 24px;
	max-height: 24px;
	width: auto;
	height: auto;
	display: block;
}
/* Placeholder (icône non encore choisie) : petit carré bleu Château. */
.brabois-aevt__icon--empty {
	width: 18px;
	height: 18px;
	background: var(--bleu-chateau, #3f5565);
}
.brabois-aevt__ftext {
	color: var(--bleu-chateau, #3f5565);
	font-family: "Geist", "Montserrat", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
}
.brabois-aevt__actions {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}
.brabois-aevt__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;
}
.brabois-aevt__btn img {
	display: block;
	height: 16px;
	width: auto;
}
.brabois-aevt__btn--fill {
	background: var(--vert-olive, #7e8b6f);
	color: var(--sj-blanc, #fcfcfc);
}
.brabois-aevt__btn--fill:hover {
	filter: brightness(1.07);
}
.brabois-aevt__btn--outline {
	background: transparent;
	color: var(--vert-olive, #7e8b6f);
	box-shadow: inset 0 0 0 1px var(--vert-olive, #7e8b6f);
}
.brabois-aevt__btn--outline:hover {
	background: rgba(126, 139, 111, 0.08);
}
/* ---- Colonne droite : 2 images légèrement superposées ----------------------- */
.brabois-aevt__media {
	position: relative;
	min-height: 520px;
}
.brabois-aevt__img {
	position: absolute;
	display: block;
	object-fit: cover;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
}
.brabois-aevt__img--1 {
	top: 0;
	right: 0;
	width: 74%;
	height: 66%;
	z-index: 1;
}
.brabois-aevt__img--2 {
	left: 0;
	bottom: 0;
	width: 60%;
	height: 58%;
	z-index: 2;
}
@media (max-width: 1024px) {
	.brabois-aevt {
		padding-bottom: 220px;
	}
	.brabois-aevt__inner {
		grid-template-columns: 1fr;
		row-gap: 64px;
	}
	.brabois-aevt__media {
		min-height: 460px;
	}
}
@media (max-width: 640px) {
	.brabois-aevt {
		padding-bottom: 150px;
	}
	.brabois-aevt__inner {
		margin-top: 64px;
	}
	.brabois-aevt__media {
		min-height: 0;
		display: flex;
		flex-direction: column;
		gap: 16px;
	}
	.brabois-aevt__img {
		position: static;
		width: 100%;
		height: auto;
	}
}