/* Structure : header, navigation, menu mobile, footer. */

/* ---------- Header ---------- */
.site-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 40;
	isolation: isolate;
	color: var(--c-cream);
}

/*
 * Fond du header sur un calque à part : le flou (backdrop-filter) appliqué
 * directement au header piégerait le menu mobile (position: fixed) dans sa hauteur.
 */
.site-header::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: var(--header-h);
	z-index: -1;
	background: var(--c-night);
	transition:
		background-color 0.5s var(--ease-soft),
		box-shadow 0.5s var(--ease-soft);
}

/* Sur fond photo (futur Hero) : header transparent jusqu'au défilement. */
body.has-hero .site-header:not(.is-solid)::before {
	background: linear-gradient(to bottom, rgb(22 27 46 / 0.6), transparent);
}

.site-header.is-solid::before {
	background: rgb(22 27 46 / 0.95);
	box-shadow: 0 1px 0 rgb(243 238 228 / 0.08);
	backdrop-filter: blur(8px);
}

.site-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	max-width: var(--container);
	height: var(--header-h);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.site-header__start,
.site-header__end {
	display: flex;
	align-items: center;
	gap: 1.75rem;
}

.site-header__end {
	justify-content: flex-end;
}

/* Sélecteur FR / EN (inc/i18n.php) : à droite du menu, visible aussi sur téléphone. */
.lang-switch {
	display: flex;
	align-items: center;
	font: 400 0.85rem/1 var(--f-serif);
	letter-spacing: 0.1em;
}

.lang-switch a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem; /* zone tactile 44 px */
	min-height: 2.75rem;
	padding: 0 0.2rem;
	color: rgb(243 238 228 / 0.55);
	text-decoration: none;
	transition: color var(--dur) var(--ease-soft);
}

.lang-switch a:hover,
.lang-switch a:focus-visible,
.lang-switch a[aria-current="true"] {
	color: var(--c-cream);
}

.lang-switch a[aria-current="true"] {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.45em;
}

.lang-switch span {
	color: rgb(243 238 228 / 0.3);
}

.site-header__logo {
	display: block;
	padding-inline: 0.75rem;
}

.site-header__logo-img {
	width: 3rem;
}

@media (min-width: 64rem) {
	.site-header__logo-img {
		width: 4rem;
	}
}

/* Navigation desktop */
.site-nav {
	display: none;
}

.nav-list {
	display: flex;
	gap: 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav-list a {
	font-size: 0.88rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	color: rgb(243 238 228 / 0.8);
	transition: color var(--dur) var(--ease-soft);
}

.nav-list a:hover {
	color: var(--c-cream);
}

@media (min-width: 64rem) {
	.site-nav {
		display: block;
	}
}

/* Bouton RÉSERVER du header : compact sur petit écran (reste ≥ 44 px de haut) */
@media (max-width: 39.99rem) {
	.site-header .btn[data-reserve] {
		min-height: 2.75rem;
		padding: 0.55rem 1.1rem;
		font-size: 0.95rem;
		letter-spacing: 0.08em;
		text-indent: 0.14em;
	}
}

/* Burger */
.menu-toggle {
	display: grid;
	place-items: center;
	min-width: 3rem;
	min-height: 3rem; /* zone tactile de 48 px */
	margin-left: -0.75rem;
	padding: 0.75rem;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.menu-toggle__bars {
	position: relative;
	display: block;
	width: 1.5rem;
	height: 0.75rem;
}

.menu-toggle__bars::before,
.menu-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 1px;
	background: currentColor;
	transition:
		transform 0.3s var(--ease-soft),
		top 0.3s var(--ease-soft);
}

.menu-toggle__bars::before {
	top: 0;
}

.menu-toggle__bars::after {
	top: 100%;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before {
	top: 50%;
	transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after {
	top: 50%;
	transform: rotate(-45deg);
}

@media (min-width: 64rem) {
	.menu-toggle {
		display: none;
	}
}

/* ---------- Menu mobile ---------- */
.mobile-menu {
	position: fixed;
	inset: var(--header-h) 0 0;
	overflow-y: auto;
	padding: 2.5rem 1.5rem;
	background: var(--c-night);
}

.mobile-menu[hidden] {
	display: none;
}

.mobile-menu__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mobile-menu__list li + li,
.mobile-menu__list + .mobile-menu__list {
	margin-top: 0.75rem;
}

.mobile-menu__list a {
	display: block;
	padding-block: 0.4rem; /* zone tactile ≥ 44 px */
	font-size: 1.5rem;
	font-weight: 300;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

.mobile-menu__cta {
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid rgb(243 238 228 / 0.1);
}

.mobile-menu__cta .btn {
	width: 100%;
}

@media (min-width: 64rem) {
	.mobile-menu {
		display: none !important;
	}
}

body.menu-open {
	overflow: hidden;
}

/* ---------- Footer ---------- */
.site-footer {
	position: relative;
	isolation: isolate;
	padding-block: 5rem 2.5rem;
	overflow: hidden;
	background: var(--c-night);
	color: var(--c-cream);
}

/* Fond photo assombri (le comptoir), comme les sections de la page. */
.site-footer__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.site-footer__bg {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	opacity: 0.18;
	filter: saturate(0.6);
}

.site-footer__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, var(--c-night), rgb(22 27 46 / 0.6) 30%, rgb(22 27 46 / 0.75) 70%, var(--c-night));
}

.site-footer__top {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
	padding-bottom: 4rem;
	border-bottom: 1px solid rgb(243 238 228 / 0.1);
}

.site-footer__cols + .site-footer__bottom {
	border-top: 1px solid rgb(243 238 228 / 0.1);
}

.site-footer__logo {
	width: 11rem;
}

.site-footer__cols {
	display: grid;
	gap: 2.5rem;
	padding-block: 3.5rem;
	font-size: 1rem;
}

@media (min-width: 40rem) {
	.site-footer__cols {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 64rem) {
	.site-footer__cols {
		grid-template-columns: 1fr 1.3fr 1fr 0.8fr;
		gap: 3rem;
	}
}

.site-footer__cols .eyebrow {
	margin-bottom: 1rem;
}

.site-footer__text {
	font-style: normal;
	line-height: 1.7;
	color: rgb(243 238 228 / 0.75);
}

.site-footer__text p {
	margin: 0;
}

.site-footer__link {
	display: inline-block;
	margin-top: 0.5rem;
	color: rgb(243 238 228 / 0.75);
	text-decoration: underline;
	text-decoration-color: rgb(243 238 228 / 0.3);
	text-underline-offset: 0.3rem;
	overflow-wrap: anywhere;
	transition: color var(--dur) var(--ease-soft);
}

.site-footer__link:hover {
	color: var(--c-cream);
}

.site-footer__social {
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 0.6rem;
	margin-top: 0;
	text-decoration: none;
}

/* Instagram, Facebook : un réseau par ligne. */
.site-footer__social + .site-footer__social {
	margin-top: 0.75rem;
}

.site-footer__bottom {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding-top: 2rem;
	font-size: 0.85rem;
	color: rgb(243 238 228 / 0.6);
}

.site-footer__bottom p {
	margin: 0;
}

.footer-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-nav a {
	text-decoration: none;
}

.footer-nav a:hover {
	color: var(--c-cream);
}

@media (min-width: 40rem) {
	.site-footer__bottom {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

/* ---------- Footer sur téléphone : compact (les horaires détaillés sont juste au-dessus, dans « Nous trouver »). ---------- */
@media (max-width: 39.99rem) {
	.site-footer {
		padding-block: 3.5rem 2rem;
	}

	.site-footer__top {
		padding-bottom: 2.5rem;
	}

	.site-footer__logo {
		width: 7.5rem;
	}

	.site-footer__cols {
		grid-template-columns: 1fr 1fr;
		gap: 2rem 1.25rem;
		padding-block: 2.5rem;
		font-size: 0.85rem;
	}

	.site-footer__cols .eyebrow {
		margin-bottom: 0.6rem;
	}

	.site-footer .hours__list {
		display: none;
	}

	.site-footer .hours__summary {
		margin: 0;
		font-size: 0.95rem;
	}

	.site-footer__bottom {
		text-align: center;
		align-items: center;
	}

	/* Liens faciles à toucher (44 px de haut). */
	.site-footer__link,
	.footer-nav a {
		display: inline-flex;
		align-items: center;
		min-height: 2.75rem;
		margin-top: 0;
	}

	.site-footer__social + .site-footer__social {
		margin-top: 0;
	}

	.footer-nav {
		gap: 0 1.5rem;
	}

	.footer-nav {
		justify-content: center;
	}
}