/* ==========================================================================
   Header — Château de Brabois
   Contenu identique sur tout le site ; les couleurs varient selon la page.
   Variante "home"  : sans fond, posée sur le hero, textes blancs.
   Variante "beige" : barre beige-clair, écritures/pictos/logo en vert-olive.
   ========================================================================== */

:root {
	--beige-clair: #fffcf5;
	--vert-olive: #7e8b6f;
}

.brabois-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin-inline: auto;
	max-width: 1440px;
	z-index: 50;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	/* Padding vertical symétrique et minimal -> header compact et centré. */
	padding: 6px 40px;
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Garde-fou : pas de paragraphe vide parasite (wpautop) en tête de page. */
.home .wp-site-blocks > p:empty {
	display: none;
}

/* Aucune marge (block-gap TT5) entre le header — quelle que soit sa variante —
   et le contenu/hero qui le suit, sur TOUTES les pages.
   `~` (et pas `+`) : un modal caché « evtchoice » peut être injecté juste après le
   header -> le hero n'est plus le voisin DIRECT ; on vise donc tous les frères qui
   suivent le header (le modal caché n'a de toute façon pas de hauteur). */
.brabois-header ~ * {
	margin-block-start: 0;
}

.brabois-header * {
	box-sizing: border-box;
}

/* wpautop enveloppe le logo (élément inline entre deux <div>) dans un <p> dont
   les marges par défaut (~44px) gonflaient la hauteur du header. `display:contents`
   rend ce <p> transparent au layout : le logo redevient enfant flex direct.
   -> la hauteur du header = celle du logo, sans marge fantôme. */
.brabois-header p {
	display: contents;
}

.bh__left,
.bh__right {
	display: flex;
	align-items: center;
	gap: 40px;
}
.bh__left {
	flex: 1 1 0;
}
.bh__right {
	flex: 1 1 0;
	justify-content: flex-end;
}
.bh__logo {
	flex: 0 0 auto;
	display: block;
	line-height: 0;
}
.bh__logo img {
	display: block;
	height: 80px;
	width: auto;
}

/* --- MENU (burger + libellé, déclencheur du menu déroulant) --- */
.bh__menu {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}
.bh__burger {
	display: block;
	width: 36px;
	height: auto;
}
.bh__menu-label {
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.02em;
}

/* --- Téléphone --- */
.bh__tel {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: inherit;
}
.bh__tel img {
	display: block;
	width: 18px;
	height: 18px;
}
.bh__tel span {
	font-size: 16px;
	font-weight: 600;
}

/* --- Contact et accès (icône carte) --- */
.bh__contact {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: inherit;
}
.bh__contact img {
	display: block;
	width: 18px;
	height: auto;
}
.bh__contact span {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* --- CTA Réserver une chambre --- */
.bh__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 17px;
	text-decoration: none;
	background: var(--vert-olive, #7e8b6f);
	color: #fcfcfc;
	transition: filter 0.2s ease, background-color 0.35s ease, color 0.35s ease;
}
.bh__cta span {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
}
/* Libellé court « Réserver » : mobile uniquement (voir @782). */
.bh__cta-short {
	display: none;
}
/* Flèche du CTA : deux versions (blanche + olive recolorée).
   Par défaut la blanche ; au scroll (home) le CTA s'inverse -> on montre l'olive. */
.bh__cta-arrow {
	display: block;
	height: 22px;
	width: auto;
}
.bh__cta-arrow--o {
	display: none;
}
.brabois-header--home.is-scrolled .bh__cta-arrow--w {
	display: none;
}
.brabois-header--home.is-scrolled .bh__cta-arrow--o {
	display: block;
}
.bh__cta:hover {
	filter: brightness(1.07);
}

/* --- Menu déroulant (mêmes pages que les 4 blocs du hero) --- */
.bh__drop {
	position: absolute;
	top: calc(100% - 8px);
	left: 40px;
	z-index: 60;
	display: flex;
	flex-direction: column;
	min-width: 300px;
	padding: 8px 0;
	background: rgba(38, 54, 61, 0.96);
	backdrop-filter: blur(4px);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}
.bh__drop[hidden] {
	display: none;
}
.bh__drop a {
	padding: 12px 22px;
	color: #fcfcfc;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
	transition: background 0.15s ease;
}
.bh__drop a:hover {
	background: var(--vert-olive, #7e8b6f);
}

/* --- Variante home : transparente, sur le hero, textes blancs.
   Fixée en haut : au scroll, une barre pattern pleine largeur apparaît en fondu. --- */
.brabois-header--home {
	position: fixed;
	background: transparent;
	color: #fcfcfc;
	/* Un peu plus de marge interne verticale sur l'accueil (base = 6px). */
	padding-block: 18px;
}

/* Bande de fond pleine largeur écran (pattern) — révélée au scroll.
   Le contenu reste centré à 1440 px ; cette bande, elle, fait 100vw. */
.brabois-header--home::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 50%;
	width: 100vw;
	transform: translateX(-50%);
	z-index: -1;
	background: var(--bh-pattern) center / cover no-repeat;
	border-bottom: 1px solid rgba(252, 252, 252, 0.14); /* séparateur 1px blanc 14% */
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}
.brabois-header--home.is-scrolled::before {
	opacity: 1;
}

/* Au scroll, le CTA s'inverse : fond beige-clair, texte + flèche vert-olive. */
.brabois-header--home.is-scrolled .bh__cta {
	background: var(--beige-clair, #fffcf5);
	color: var(--vert-olive, #7e8b6f);
}

/* Évite une scrollbar horizontale due à la bande 100vw.
   `clip` (et non `hidden`) : ne transforme PAS <html> en conteneur de scroll,
   donc window.scrollY continue de fonctionner (sinon l'état scroll ne se déclenche pas). */
html {
	overflow-x: clip;
}

/* --- Variante beige : barre pleine largeur beige-clair, écritures/pictos olive.
   Barre STICKY : dans le flux au repos, elle colle en haut au scroll.
   Le contenu reste centré à 1440 px, le fond couvre toute la largeur.
   Le CTA « Réserver une chambre » reste identique (fond olive, texte + flèche blancs).
   z-index 40 au repos : le plat du hero (z:45) passe DEVANT le header ;
   au scroll (.is-scrolled) le header passe à 100 -> au-dessus de tout. --- */
.brabois-header--beige {
	position: sticky;
	top: 0;
	z-index: 40;
	max-width: none;
	background: var(--beige-clair, #fffcf5);
	color: var(--vert-olive, #7e8b6f);
	/* Léger padding vertical (le <p> wpautop est neutralisé, donc c'est le seul vide). */
	padding-block: 12px;
	padding-inline: max(40px, calc(50% - 720px));
}
.brabois-header--beige.is-scrolled {
	z-index: 100;
}
/* Le menu déroulant s'aligne sur le début du contenu centré. */
.brabois-header--beige .bh__drop {
	left: max(40px, calc(50% - 720px));
}
/* Logo agrandi ; barre = hauteur du logo (padding vertical nul). */
.brabois-header--beige .bh__logo img {
	height: 84px;
}

/* --- Variante "pattern" : reprise EXACTE du header d'accueil AU SCROLL, mais
   affiché d'emblée (pages internes type « Séjourner »). Barre pattern pleine largeur
   + séparateur 1px + CTA inversé. Textes/pictos restent blancs.
   STICKY : reste collée en haut de l'écran au scroll (comme sur toutes les pages). --- */
.brabois-header--pattern {
	position: sticky;
	top: 0;
	z-index: 100;
	max-width: none;
	color: #fcfcfc;
	background-color: #44525f; /* fallback si le pattern ne charge pas */
	background-image: var(--bh-pattern);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-bottom: 1px solid rgba(252, 252, 252, 0.14); /* séparateur 1px blanc 14% */
	/* Un peu plus de marge interne verticale que la base (18px). */
	padding-block: 28px;
	padding-inline: max(40px, calc(50% - 720px));
}
/* Le menu déroulant s'aligne sur le début du contenu centré. */
.brabois-header--pattern .bh__drop {
	left: max(40px, calc(50% - 720px));
}
/* CTA inversé, à l'identique de l'état scrollé de l'accueil. */
.brabois-header--pattern .bh__cta {
	background: var(--beige-clair, #fffcf5);
	color: var(--vert-olive, #7e8b6f);
}
.brabois-header--pattern .bh__cta-arrow--w {
	display: none;
}
.brabois-header--pattern .bh__cta-arrow--o {
	display: block;
}

/* --- Responsive --- */
@media (max-width: 1180px) {
	.bh__tel span,
	.bh__contact span {
		display: none;
	}
	.bh__left,
	.bh__right {
		gap: 24px;
	}
}
@media (max-width: 782px) {
	.brabois-header {
		padding: 16px 18px;
		gap: 12px;
	}
	.bh__left,
	.bh__right {
		gap: 16px;
	}
	.bh__logo img {
		height: 52px;
	}
	.bh__menu-label,
	.bh__cta-full {
		display: none;
	}
	/* CTA mobile : simplement « Réserver » en texte, SANS icône (l'icône seule
	   n'était pas compréhensible). */
	.bh__cta-short {
		display: inline;
	}
	.brabois-header .bh__cta .bh__cta-arrow {
		display: none;
	}
	/* Drawer : pleine largeur d'écran (marges 12px) au lieu d'un panneau étroit qui
	   débordait à droite / se coupait ; libellés longs qui reviennent à la ligne. */
	.bh__drop {
		left: 12px;
		right: 12px;
		min-width: 0;
	}
	.bh__drop a {
		white-space: normal;
	}
}

/* ==========================================================================
   Sélecteur « Organiser un événement » — Entreprise ou Particulier
   Modale déclenchée par [data-evt-choice] (bloc hero + entrée de menu).
   ========================================================================== */

.brabois-evtchoice[hidden] {
	display: none;
}
.brabois-evtchoice {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
/* Empêche le scroll de l'arrière-plan quand la modale est ouverte. */
.brabois-evtc-open,
.brabois-evtc-open body {
	overflow: hidden;
}

.brabois-evtchoice__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(31, 42, 51, 0.6);
	backdrop-filter: blur(2px);
	animation: brabois-evtc-fade 0.2s ease;
}

.brabois-evtchoice__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 620px;
	box-sizing: border-box;
	background: var(--beige-clair, #fffcf5);
	border: 1px solid rgba(63, 85, 101, 0.14);
	border-radius: 4px;
	box-shadow: 0 24px 60px rgba(31, 42, 51, 0.28);
	padding: 56px 48px 52px;
	text-align: center;
	animation: brabois-evtc-pop 0.22s ease;
}

.brabois-evtchoice__close {
	position: absolute;
	top: 14px;
	right: 18px;
	width: 40px;
	height: 40px;
	border: 0;
	background: transparent;
	color: #3f5565;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	border-radius: 9999px;
	transition: background 0.15s ease;
}
.brabois-evtchoice__close:hover {
	background: rgba(63, 85, 101, 0.08);
}

.brabois-evtchoice__title {
	margin: 0;
	font-family: "Montserrat", sans-serif;
	font-size: 22px;
	font-weight: 600;
	color: #3f5565;
}
.brabois-evtchoice__sep {
	display: block;
	margin: 16px auto 18px;
	max-width: 300px;
	height: 10px;
}
.brabois-evtchoice__sub {
	margin: 0 0 30px;
	font-family: "Geist", "Montserrat", sans-serif;
	font-size: 15px;
	font-weight: 500;
	color: #404040;
}

.brabois-evtchoice__opts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.brabois-evtchoice__opt {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	text-align: left;
	text-decoration: none;
	padding: 26px 26px 22px;
	border: 1px solid rgba(126, 139, 111, 0.55);
	border-radius: 4px;
	background: #fff;
	transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.brabois-evtchoice__opt:hover,
.brabois-evtchoice__opt:focus-visible {
	background: var(--vert-olive, #7e8b6f);
	border-color: var(--vert-olive, #7e8b6f);
	transform: translateY(-2px);
	outline: none;
}

.brabois-evtchoice__opt-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.brabois-evtchoice__opt-title {
	font-family: "Cormorant Infant", serif;
	font-style: italic;
	font-weight: 600;
	font-size: 28px;
	line-height: 1;
	color: var(--vert-olive, #7e8b6f);
	transition: color 0.18s ease;
}
.brabois-evtchoice__opt-desc {
	font-family: "Geist", "Montserrat", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: #404040;
	transition: color 0.18s ease;
}
.brabois-evtchoice__opt:hover .brabois-evtchoice__opt-title,
.brabois-evtchoice__opt:hover .brabois-evtchoice__opt-desc,
.brabois-evtchoice__opt:focus-visible .brabois-evtchoice__opt-title,
.brabois-evtchoice__opt:focus-visible .brabois-evtchoice__opt-desc {
	color: #fcfcfc;
}

/* Flèche : olive au repos (arrow-olive), blanche au survol (média 10). */
.brabois-evtchoice__opt-arrow {
	width: auto;
	height: 16px;
	margin-top: auto;
}
.brabois-evtchoice__opt-arrow--w {
	display: none;
}
.brabois-evtchoice__opt:hover .brabois-evtchoice__opt-arrow--w,
.brabois-evtchoice__opt:focus-visible .brabois-evtchoice__opt-arrow--w {
	display: inline-block;
}
.brabois-evtchoice__opt:hover .brabois-evtchoice__opt-arrow--o,
.brabois-evtchoice__opt:focus-visible .brabois-evtchoice__opt-arrow--o {
	display: none;
}

@keyframes brabois-evtc-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes brabois-evtc-pop {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 560px) {
	.brabois-evtchoice__dialog {
		padding: 48px 22px 40px;
	}
	.brabois-evtchoice__opts {
		grid-template-columns: 1fr;
	}
	.brabois-evtchoice__opt {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
	}
	.brabois-evtchoice__opt-arrow {
		margin-top: 0;
	}
}

/* ==========================================================================
   MENU — méga-overlay plein écran (DA Château : pattern, arches, olive/or)
   Remplace l'ancien .bh__drop (rendu par [brabois_header], id #bh-drop).
   ========================================================================== */
html.bh-menu-open { overflow: hidden; }
/* Menu ouvert : le header (qui contient le méga-menu) crée un contexte d'empilement
   sticky/fixed à z-index bas (40/100) -> des éléments de héros qui débordent avec un
   z-index plus haut (plat .brabois-sr__dish z:45, ellipses z:99…) passaient AU-DESSUS
   du menu. On élève le contexte du header au-dessus de tout le contenu pendant l'ouverture. */
html.bh-menu-open .brabois-header { z-index: 950; }

.bh__mega { position: fixed; inset: 0; z-index: 900; }
.bh__mega[hidden] { display: none; }

.bh__mega-bd {
	position: absolute; inset: 0;
	background: rgba(18, 26, 31, 0.5);
	-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
	opacity: 0; transition: opacity 0.4s ease;
}
.bh__mega.is-open .bh__mega-bd { opacity: 1; }

.bh__mega-inner {
	position: absolute; inset: 0; overflow-y: auto;
	background-color: #26333b;
	background-image: var(--bh-pattern);
	background-size: cover; background-position: center;
	opacity: 0; transform: translateY(-16px);
	transition: opacity 0.42s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.bh__mega-inner::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(22, 32, 38, 0.9), rgba(22, 32, 38, 0.82));
}
.bh__mega.is-open .bh__mega-inner { opacity: 1; transform: none; }

.bh__mega-x {
	position: absolute; top: 26px; right: max(28px, calc(50% - 900px)); z-index: 4;
	width: 46px; height: 46px; border: 1px solid rgba(252, 252, 252, 0.3);
	border-radius: 50%; background: transparent; cursor: pointer;
	transition: background 0.25s ease, transform 0.35s ease, border-color 0.25s ease;
}
.bh__mega-x span { position: absolute; left: 11px; top: 22px; width: 24px; height: 1.5px; background: #fcfcfc; transition: background 0.25s ease; }
.bh__mega-x span:first-child { transform: rotate(45deg); }
.bh__mega-x span:last-child { transform: rotate(-45deg); }
.bh__mega-x:hover { background: var(--vert-olive, #7e8b6f); border-color: var(--vert-olive, #7e8b6f); transform: rotate(90deg); }

.bh__mega-grid {
	position: relative; z-index: 2; box-sizing: border-box;
	max-width: 1800px; min-height: 100%; margin: 0 auto;
	padding: 122px max(40px, calc(50% - 900px)) 56px;
	display: grid; grid-template-columns: 1.12fr 0.88fr; gap: clamp(64px, 7vw, 130px); align-items: center;
}

.bh__mega-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; font-family: "Geist", sans-serif; font-size: 14px; letter-spacing: 0.02em; color: rgba(252, 252, 252, 0.7); }
.bh__mega-dot { width: 8px; height: 8px; border-radius: 50%; background: #f6b83b; flex: none; }

.bh__mega-list { list-style: none; margin: 0; padding: 0; }
.bh__mega-li { border-top: 1px solid rgba(252, 252, 252, 0.14); opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.bh__mega-li:last-child { border-bottom: 1px solid rgba(252, 252, 252, 0.14); }
.bh__mega.is-open .bh__mega-li { opacity: 1; transform: none; }
.bh__mega.is-open .bh__mega-li:nth-child(1) { transition-delay: 0.10s; }
.bh__mega.is-open .bh__mega-li:nth-child(2) { transition-delay: 0.17s; }
.bh__mega.is-open .bh__mega-li:nth-child(3) { transition-delay: 0.24s; }
.bh__mega.is-open .bh__mega-li:nth-child(4) { transition-delay: 0.31s; }

.bh__mega-link { display: flex; align-items: center; gap: 22px; padding: 22px 6px; text-decoration: none; transition: padding-left 0.32s ease; }
.bh__mega-num { flex: none; width: 34px; font-family: "Cormorant Infant", serif; font-style: italic; font-weight: 600; font-size: 22px; color: rgba(182, 192, 163, 0.7); transition: color 0.3s ease; }
.bh__mega-txt { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.bh__mega-title { font-family: "Montserrat", sans-serif; font-weight: 600; font-size: clamp(22px, 2.4vw, 34px); line-height: 1.08; color: #fcfcfc; letter-spacing: 0.004em; transition: color 0.3s ease; }
.bh__mega-sub { font-family: "Geist", sans-serif; font-size: 14px; color: rgba(252, 252, 252, 0.5); transition: color 0.3s ease; }
.bh__mega-go { flex: none; height: 18px; width: auto; opacity: 0; transform: translateX(-10px); transition: opacity 0.3s ease, transform 0.3s ease; }
.bh__mega-link:hover, .bh__mega-link:focus-visible { padding-left: 18px; outline: none; }
.bh__mega-link:hover .bh__mega-title, .bh__mega-link:focus-visible .bh__mega-title,
.bh__mega-link:hover .bh__mega-num, .bh__mega-link:focus-visible .bh__mega-num { color: #f6b83b; }
.bh__mega-link:hover .bh__mega-go, .bh__mega-link:focus-visible .bh__mega-go { opacity: 1; transform: none; }

.bh__mega-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px; margin-top: 42px; opacity: 0; transition: opacity 0.5s ease 0.34s; }
.bh__mega.is-open .bh__mega-foot { opacity: 1; }
.bh__mega-contact { display: flex; flex-direction: column; gap: 6px; }
.bh__mega-tel { font-family: "Cormorant Infant", serif; font-style: italic; font-weight: 600; font-size: 30px; color: #fcfcfc; text-decoration: none; transition: color 0.25s ease; }
.bh__mega-tel:hover { color: #f6b83b; }
.bh__mega-addr { font-style: normal; font-family: "Geist", sans-serif; font-size: 13px; line-height: 1.5; color: rgba(252, 252, 252, 0.5); }
.bh__mega-reserve { display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px; background: var(--vert-olive, #7e8b6f); color: #fcfcfc; font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.01em; text-decoration: none; transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease; }
.bh__mega-reserve img { height: 16px; width: auto; transition: filter 0.22s ease; }
.bh__mega-reserve:hover { background: #fffcf5; color: var(--vert-olive, #7e8b6f); box-shadow: inset 0 0 0 1px #7e8b6f; }
.bh__mega-reserve:hover img { filter: brightness(0) invert(0.42) sepia(0.30) saturate(260%) hue-rotate(42deg) brightness(1.22) contrast(0.92); }

.bh__mega-aside { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; }
.bh__mega-figure { position: relative; width: 100%; max-width: 500px; margin-left: auto; aspect-ratio: 4 / 5; }
.bh__mega-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 220px 220px 16px 16px; opacity: 0; transform: scale(1.05); transition: opacity 0.6s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.42); }
.bh__mega-photo.is-active { opacity: 1; transform: none; }
.bh__mega-badge { position: absolute; left: -36px; bottom: 44px; width: 96px; height: 96px; background: var(--mega-ellipse) center / contain no-repeat; animation: bh-mega-spin 26s linear infinite; }
@keyframes bh-mega-spin { to { transform: rotate(360deg); } }

@media (max-width: 980px) {
	.bh__mega-grid { grid-template-columns: 1fr; gap: 0; padding-top: 104px; align-items: start; }
	.bh__mega-aside { display: none; }
	.bh__mega-title { font-size: 24px; }
	.bh__mega-foot { margin-top: 30px; }
}
@media (max-width: 560px) {
	.bh__mega-link { gap: 16px; padding: 18px 4px; }
	.bh__mega-num { width: 26px; font-size: 18px; }
	.bh__mega-tel { font-size: 26px; }
	.bh__mega-reserve { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	.bh__mega-inner, .bh__mega-li, .bh__mega-foot, .bh__mega-bd { transition-duration: 0.15s; }
	.bh__mega-inner { transform: none; }
	.bh__mega-li { transform: none; }
	.bh__mega-badge { animation: none; }
}

/* 21/10/2026 : à 360 px, le bloc de droite (accès + « Réserver ») sortait de
   8 px de l'écran. Espacements resserrés sur les très petits écrans. */
@media (max-width: 380px) {
	.brabois-header {
		padding-left: 14px;
		padding-right: 14px;
		gap: 8px;
	}
	.bh__left,
	.bh__right {
		gap: 10px;
	}
	.bh__cta {
		padding: 11px 12px;
	}
}