/* =========================================================
   Flow Paris — feuille de style principale
   Design tokens centralisés (:root) — voir AUDIT.md §4
   ========================================================= */

:root {
	--color-black: #000000;
	--color-white: #ffffff;
	--color-text: #2b2b2b;
	--color-muted: #999999;
	--color-line: #ebebeb;
	--color-dark: #111111;

	--font-base: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--fs-h1: 48px;
	--fs-h2: 36px;
	--fs-h3: 22px;
	--fs-body: 16px;

	--maxw: 1140px;
	--gutter: 24px;
	--header-h: 84px;

	--ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset léger ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font-base);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.75;
	color: var(--color-text);
	background: var(--color-white);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color .25s var(--ease); }
h1, h2, h3, h4 { font-family: var(--font-base); font-weight: 700; margin: 0 0 .5em; line-height: 1.2; }
p { margin: 0 0 1em; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0;
	margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: #000; color: #fff; padding: 10px 16px; }
.skip-link:focus { left: 0; }

/* ---------- Titres de section ---------- */
.section-title {
	font-size: var(--fs-h2);
	text-transform: uppercase;
	letter-spacing: 2px;
	text-align: center;
	margin-bottom: 40px;
}

/* ---------- Boutons ---------- */
.btn {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 15px 34px;
	border: 1px solid currentColor;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: background .3s var(--ease), color .3s var(--ease);
}
.btn:hover { background: var(--color-black); color: var(--color-white); border-color: var(--color-black); }
.btn--solid { background: var(--color-white); color: var(--color-black); border-color: var(--color-white); }
.btn--solid:hover { background: transparent; color: var(--color-white); border-color: var(--color-white); }
.btn--ghost-light { color: #fff; border-color: rgba(255,255,255,.7); }
.btn--ghost-light:hover { background: #fff; color: #111; border-color: #fff; }

/* =========================================================
   Barre sociale flottante
   ========================================================= */
.social-rail {
	position: fixed; left: 22px; top: 50%; transform: translateY(-50%);
	z-index: 60; list-style: none; margin: 0; padding: 0;
	display: flex; flex-direction: column; gap: 16px;
}
.social-rail a {
	display: grid; place-items: center; width: 42px; height: 42px;
	background: #000; color: #fff; border: 1px solid #000; border-radius: 50%;
	box-shadow: 0 6px 18px rgba(0,0,0,.22);
	transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.social-rail a:hover { background: #fff; color: #000; border-color: #000; }
@media (max-width: 992px) { .social-rail { display: none; } }

/* =========================================================
   Header / navigation
   ========================================================= */
.site-header {
	position: fixed; top: 0; left: 0; right: 0; z-index: 80;
	height: var(--header-h);
	display: flex; align-items: center;
	background-color: transparent;
	transition: background-color .35s var(--ease), height .35s var(--ease);
}
.site-header.is-scrolled { background-color: var(--color-black); height: 68px; box-shadow: 0 1px 0 rgba(255,255,255,.06); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; }
.site-header__logo { position: relative; z-index: 3; display: flex; align-items: center; gap: 0; } /* au-dessus du menu déroulant mobile */
.site-header__logo img { height: 42px; width: auto; transition: height .35s var(--ease); }
.site-header.is-scrolled .site-header__logo img { height: 34px; }

/* Lockup « COZY by flow » (page Cozy) — révélé en animation : FLOW glisse à droite. */
.site-header__cozy-lockup {
	display: inline-flex; align-items: center; gap: 13px;
	max-width: 0; margin-right: 0; opacity: 0; overflow: hidden;
	/* Départ tout doux, mais fin nette et vive (pas de crawl à la fin). */
	transition:
		max-width .8s cubic-bezier(0.4, 0, 0.6, 0.85),
		margin-right .8s cubic-bezier(0.4, 0, 0.6, 0.85),
		opacity .55s ease .05s;
}
.cozy-revealed .site-header__cozy-lockup { max-width: 140px; margin-right: 13px; opacity: 1; }
.site-header__logo img.site-header__cozy { height: 34px; }
.site-header.is-scrolled .site-header__logo img.site-header__cozy { height: 28px; }
.site-header__by { color: #fff; font-size: 13px; font-style: italic; letter-spacing: 1px; opacity: .85; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .site-header__cozy-lockup { transition: none; } }

.site-header__actions { display: flex; align-items: center; gap: 30px; }

.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 34px; }
.site-nav a {
	color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 2px;
	text-transform: uppercase; position: relative; padding: 4px 0;
}
.site-nav a::after {
	content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px;
	background: #fff; transition: width .3s var(--ease);
}
.site-nav a:hover::after { width: 100%; }

/* Bouton « Réserver » (téléphone) — bordé, carré, façon restaurant haut de gamme. */
.nav-reserve {
	display: inline-flex; align-items: center; gap: 11px;
	padding: 12px 20px;
	border: 1px solid rgba(255,255,255,.55);
	color: #fff;
	font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
	white-space: nowrap;
	transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.nav-reserve svg { width: 15px; height: 15px; flex: none; }
.nav-reserve__label { line-height: 1; }
.nav-reserve__sep { width: 1px; height: 15px; background: currentColor; opacity: .45; }
.nav-reserve__num { font-weight: 400; letter-spacing: .5px; }
.nav-reserve:hover { background: #fff; color: #000; border-color: #fff; }

.site-header__toggle {
	display: none; width: 40px; height: 32px; background: none; border: 0; cursor: pointer;
	flex-direction: column; justify-content: center; gap: 6px; padding: 0;
}
.site-header__toggle span { display: block; height: 2px; width: 26px; background: #fff; transition: transform .3s var(--ease), opacity .3s var(--ease); }
.site-header__toggle { position: relative; z-index: 10; }

/* Contenu additionnel du menu + fond de fermeture : masqués sur desktop. */
.site-nav__extra { display: none; }
.nav-backdrop {
	position: fixed; inset: 0; z-index: 55;
	background: rgba(0,0,0,.5);
	opacity: 0; visibility: hidden;
	transition: opacity .35s var(--ease), visibility .35s var(--ease);
}

@media (max-width: 992px) {
	.site-header__toggle { display: flex; }
	.site-header__actions { gap: 16px; }
	.nav-reserve { padding: 10px 14px; gap: 9px; }
	.nav-reserve__sep, .nav-reserve__num { display: none; }

	/* Header opaque quand le menu est ouvert (raccord visuel avec le dropdown). */
	.nav-open .site-header { background-color: #0a0a0a; }
	.nav-open .nav-reserve { display: none; } /* on dégage la place pour la croix */
	body.nav-open { overflow: hidden; }
	.nav-open .nav-backdrop { opacity: 1; visibility: visible; }

	/* Menu déroulant plein écran. Ancré en haut (top:0) avec un padding = hauteur
	   du header : le contenu démarre sous le header, et translateY(-100%) le cache
	   TOTALEMENT au repos (plus de bande qui dépasse). Le logo et la croix passent
	   au-dessus (z-index) et restent donc toujours visibles. */
	.site-nav {
		position: fixed; left: 0; right: 0; top: 0;
		background: #0a0a0a; z-index: 1;
		padding: calc(var(--header-h) + 24px) 24px 42px;
		text-align: center;
		max-height: 100vh;
		overflow-y: auto;
		transform: translateY(-100%);
		transition: transform .45s var(--ease);
	}
	.nav-open .site-nav { transform: translateY(0); box-shadow: 0 30px 60px rgba(0,0,0,.5); }

	.site-nav ul { flex-direction: column; gap: 0; align-items: stretch; }
	.site-nav li { border-bottom: 1px solid rgba(255,255,255,.08); }
	.site-nav a { display: block; font-size: 15px; letter-spacing: 2px; padding: 20px 0; }
	.site-nav a::after { display: none; }

	.site-nav__extra { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 32px; }
	.site-nav .site-nav__phone {
		display: flex; align-items: center; justify-content: center; gap: 12px;
		width: 100%;
		background: #fff; color: #000; border: 0;
		font-size: 18px; font-weight: 600; letter-spacing: .5px;
		padding: 17px 20px;
		transition: opacity .25s var(--ease);
	}
	.site-nav .site-nav__phone:hover { opacity: .85; }
	.site-nav .site-nav__phone svg { width: 17px; height: 17px; }
	.site-nav__hint { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--color-muted); }

	/* Jours & horaires */
	.site-nav__hours { margin-top: 22px; color: rgba(255,255,255,.75); font-size: 14px; line-height: 1.85; }
	.site-nav__hours h3 { color: #fff; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; }
	.site-nav__hours p { margin: 0; }
	.site-nav__hours strong { color: #fff; font-weight: 600; }

	.site-nav__social { display: flex; gap: 16px; margin-top: 26px; }
	.site-nav__social a { display: grid; place-items: center; width: 42px; height: 42px; color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; transition: background-color .25s var(--ease), color .25s var(--ease); }
	.site-nav__social a:hover { background: #fff; color: #000; }

	.nav-open .site-header__toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
	.nav-open .site-header__toggle span:nth-child(2) { opacity: 0; }
	.nav-open .site-header__toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
	position: relative; min-height: 100vh;
	display: flex; align-items: center; justify-content: center;
	background-size: cover; background-position: center; background-attachment: fixed;
	text-align: center; overflow: hidden;
}
/* Couche de fond parallaxe (hero Flow) — un poil plus haute pour le mouvement. */
.hero__bg {
	position: absolute; top: 0; left: 0; right: 0; height: 122%;
	background-size: cover; background-position: center; background-repeat: no-repeat;
	z-index: 0; will-change: transform;
}
.hero__overlay {
	position: absolute; inset: 0; z-index: 1;
	background:
		linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,.15) 30%, rgba(0,0,0,.2) 70%, rgba(0,0,0,.45) 100%);
}
/* Voile plus léger sur le hero Flow. */
.hero--parallax .hero__overlay {
	background:
		linear-gradient(to bottom, rgba(0,0,0,.3) 0%, rgba(0,0,0,.05) 35%, rgba(0,0,0,.08) 70%, rgba(0,0,0,.3) 100%);
}
.hero__content { position: relative; z-index: 2; padding: 0 24px; }
.hero__logo { width: 352px; max-width: 70vw; margin: 0 auto; }
/* Rectangle noir semi-transparent (bords tranchants) autour du logo FLOW du hero. */
.hero--parallax .hero__content { background: rgba(0,0,0,.62); padding: 46px 70px; }
@media (max-width: 640px) { .hero--parallax .hero__content { padding: 32px 40px; } }
.hero__scroll {
	position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%);
	z-index: 2; color: #fff; animation: flow-bob 2s var(--ease) infinite;
}
@keyframes flow-bob { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,10px); } }
@media (max-width: 768px) { .hero { background-attachment: scroll; } }

/* =========================================================
   Blocs de contenu (texte + image alternés)
   ========================================================= */
.content-blocks { padding: 140px 0 60px; }
.content-block { padding: 76px 0; }
.content-block__inner {
	display: grid; grid-template-columns: 1.25fr 0.9fr; gap: 90px; align-items: center;
}
.content-block--flip .content-block__media { order: 2; }
.content-block--flip .content-block__text { order: 1; }

/* ---- Image : grande, recadrée en format uniforme (gère les ratios mixtes) ---- */
.content-block__media { display: flex; justify-content: center; }
.content-block__frame { position: relative; width: 100%; max-width: 620px; }
.content-block__img {
	width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center;
	box-shadow: 0 24px 55px rgba(0,0,0,.13);
}
/* Deuxième image éventuelle : médaillon décalé, bord blanc net */
.content-block__frame--duo .content-block__img--2 {
	position: absolute; z-index: 3; right: -32px; bottom: -44px;
	width: 44%; aspect-ratio: 3 / 4; border: 6px solid var(--color-white);
	box-shadow: 0 22px 42px rgba(0,0,0,.22);
}
.content-block--flip .content-block__frame--duo .content-block__img--2 { right: auto; left: -32px; }

/* ---- Colonne texte : hiérarchie forte, beaucoup d'air ---- */
.content-block__kicker {
	display: block; font-size: 13px; font-weight: 700; letter-spacing: 5px;
	text-transform: uppercase; color: var(--color-muted); margin-bottom: 22px;
}
.content-block__title {
	font-size: 34px; text-transform: uppercase; letter-spacing: 2px; line-height: 1.22;
	margin-bottom: 24px;
}
.content-block__body { color: #575757; line-height: 1.95; }
.content-block__body p:last-child { margin-bottom: 0; }
.content-block__buttons { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; }

@media (max-width: 900px) {
	.content-blocks { padding-top: 80px; }
	.content-block { padding: 48px 0; }
	.content-block__inner { grid-template-columns: 1fr; gap: 40px; }
	.content-block--flip .content-block__media,
	.content-block--flip .content-block__text { order: initial; }
	.content-block__frame { max-width: 460px; }
	.content-block__text { text-align: center; }
	.content-block__body { margin-left: auto; margin-right: auto; max-width: 52ch; }
	.content-block__buttons { justify-content: center; }
}

/* =========================================================
   Contact (formulaire)
   ========================================================= */
.contact { background: var(--color-black); color: #fff; padding: 100px 0; }
.contact .section-title { color: #fff; }
.contact__form {
	max-width: 720px; margin: 0 auto;
	display: grid; grid-template-columns: 1fr 1fr; gap: 22px 26px;
}
.field { display: flex; flex-direction: column; }
.field--full { grid-column: 1 / -1; }
.contact__form input,
.contact__form select,
.contact__form textarea {
	width: 100%; background: transparent; color: #fff;
	border: 0; border-bottom: 1px solid rgba(255,255,255,.35);
	padding: 12px 2px; font-family: inherit; font-size: 15px;
	transition: border-color .25s var(--ease);
}
.contact__form select { appearance: none; }
.contact__form select option { color: #000; }
.contact__form input::placeholder,
.contact__form textarea::placeholder { color: rgba(255,255,255,.6); }
.contact__form input:focus,
.contact__form select:focus,
.contact__form textarea:focus { outline: none; border-bottom-color: #fff; }
.contact__actions { text-align: center; margin-top: 10px; }
.contact__status { grid-column: 1 / -1; text-align: center; color: rgba(255,255,255,.75); min-height: 1em; margin: 0; }

@media (max-width: 640px) { .contact__form { grid-template-columns: 1fr; } }

/* =========================================================
   Infos pratiques
   ========================================================= */
/* Bandeau à parallaxe « contenu » : la boîte garde une taille fixe, l'image glisse à l'intérieur. */
.infos-band {
	position: relative; overflow: hidden;
	min-height: 620px; display: flex; align-items: center; padding: 90px 0;
}
.infos-band__bg {
	position: absolute; inset: -15% 0; z-index: 1;
	background-size: cover; background-position: center;
	will-change: transform;
}
.infos-band__scrim {
	position: absolute; inset: 0; z-index: 2;
	background: linear-gradient(180deg, rgba(8,12,16,.72), rgba(8,12,16,.58));
}
.infos-band__content { position: relative; z-index: 3; width: 100%; color: #fff; text-align: center; }

.infos-band__head { margin-bottom: 48px; }
.infos-band__pin { display: inline-flex; color: #fff; margin-bottom: 10px; opacity: .9; }
.infos-band__title { font-size: var(--fs-h2); text-transform: uppercase; letter-spacing: 3px; color: #fff; margin: 0; }

.infos-band__cols {
	display: grid; grid-template-columns: repeat(3, 1fr);
	max-width: 980px; margin: 0 auto;
}
.infos-band__col { padding: 4px 38px; }
.infos-band__col + .infos-band__col { border-left: 1px solid rgba(255,255,255,.18); }
.infos-band__col h3 { font-size: 14px; text-transform: uppercase; letter-spacing: 2px; color: #fff; margin-bottom: 16px; }
.infos-band__col p, .infos-band__col > div { color: rgba(255,255,255,.85); font-size: 14.5px; line-height: 1.8; }
.infos-band__hours p { margin: 0 0 6px; }
.infos-band__hours strong { color: #fff; font-weight: 600; }
.infos-band__privat { margin-top: 12px; font-size: 13px; color: rgba(255,255,255,.62); }
.infos-band__col .btn { margin-top: 22px; }

.infos__map { line-height: 0; }
.infos__map iframe { display: block; }

@media (max-width: 860px) {
	.infos-band { min-height: 0; padding: 68px 0; }
	.infos-band__cols { grid-template-columns: 1fr; max-width: 420px; }
	.infos-band__col { padding: 0 20px; }
	.infos-band__col + .infos-band__col { border-left: 0; border-top: 1px solid rgba(255,255,255,.16); padding-top: 32px; margin-top: 32px; }
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer { background: var(--color-black); color: var(--color-muted); padding: 76px 0 34px; position: relative; }
.site-footer__grid {
	display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 48px;
	padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.12);
}
.site-footer__logo { width: 150px; height: auto; margin-bottom: 24px; }
.site-footer__address { font-size: 14px; line-height: 1.75; color: var(--color-muted); margin: 0 0 24px; max-width: 30ch; }
.site-footer__socials { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; }
.site-footer__socials a {
	display: grid; place-items: center; width: 42px; height: 42px;
	background: #000; color: #fff; border: 1px solid rgba(255,255,255,.28); border-radius: 50%;
	transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.site-footer__socials a:hover { background: #fff; color: #000; border-color: #fff; }

.site-footer__heading {
	font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: #fff;
	font-weight: 700; margin: 0 0 20px;
}
.site-footer__links { list-style: none; margin: 0; padding: 0; }
.site-footer__links li { margin-bottom: 12px; }
.site-footer__links a { font-size: 14px; color: var(--color-muted); transition: color .2s var(--ease); }
.site-footer__links a:hover { color: #fff; }
.site-footer__hours { font-size: 13px; line-height: 1.7; color: var(--color-muted); margin-top: 22px; }
.site-footer__hours p { margin: 0 0 4px; }
.site-footer__hours strong { color: #d8d8d8; font-weight: 600; }

.site-footer__bottom {
	display: flex; align-items: center; justify-content: space-between;
	flex-wrap: wrap; gap: 14px; padding-top: 28px;
}
.site-footer__legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 24px; }
.site-footer__legal a { font-size: 13px; color: var(--color-muted); }
.site-footer__legal a:hover { color: #fff; }
.site-footer__credit { font-size: 13px; color: var(--color-muted); margin: 0; }
.site-footer__credit a { color: var(--color-muted); }
.site-footer__credit a:hover { color: #fff; }
.site-footer__credit .sep { margin: 0 8px; opacity: .5; }

.back-top {
	position: absolute; right: var(--gutter); top: 40px; width: 42px; height: 42px;
	display: grid; place-items: center; color: var(--color-muted);
	border: 1px solid rgba(255,255,255,.2); border-radius: 50%;
	transition: color .2s var(--ease), border-color .2s var(--ease);
}
.back-top:hover { color: #fff; border-color: #fff; }

@media (max-width: 860px) {
	.site-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
	.site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	.site-footer { padding-top: 56px; }
	.site-footer__grid { grid-template-columns: 1fr; gap: 36px; }
	.site-footer__bottom { flex-direction: column; align-items: flex-start; }
	.back-top { position: static; margin: 28px 0 0; }
}

/* =========================================================
   Pages génériques
   ========================================================= */
/* NB : classe « page-view » (et non « .page ») pour éviter la collision avec
   la classe « page » ajoutée au <body> par body_class() sur les pages statiques. */
.page-view { padding-top: var(--header-h); }
.page__hero { height: 320px; background-size: cover; background-position: center; }
.page__body { padding-top: 60px; padding-bottom: 80px; }
.page__title { font-size: var(--fs-h1); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 30px; }
.page__content { max-width: 820px; }
.page__content img { margin: 20px 0; }

@media (max-width: 640px) {
	:root { --fs-h1: 34px; --fs-h2: 26px; }
	.content-blocks { padding-top: 70px; }
	.contact, .content-block { padding-top: 60px; padding-bottom: 40px; }
}

/* =========================================================
   Page Cozy (Rooftop by Cozy) — même DA, accent orange
   ========================================================= */
.cozy-page { --accent: #ff6a45; background: #fff; }
.cozy-hero__logo { width: 300px; max-width: 62vw; }
.cozy-hero__tagline {
	display: block; margin-top: 20px; color: rgba(255,255,255,.9);
	font-size: 13px; letter-spacing: 4px; text-transform: uppercase;
}
.cozy-intro { background: #fff; color: var(--color-text); text-align: center; padding: 90px 0 40px; }
.cozy-intro__eyebrow { display: block; color: var(--accent); letter-spacing: 4px; text-transform: uppercase; font-size: 11px; margin-bottom: 18px; }
.cozy-intro__title { font-size: 44px; letter-spacing: 2px; text-transform: uppercase; color: var(--color-black); margin: 0 0 22px; }
.cozy-intro__text { max-width: 620px; margin: 0 auto; color: #666; font-size: 16px; }

/* Blocs de contenu sur fond blanc (réutilise .content-block, textes sombres par défaut) */
.cozy-blocks { background: #fff; padding-top: 30px; }

/* CTA */
.cozy-cta { background: #fff; text-align: center; padding: 20px 0 100px; }
.cozy-btn { color: var(--color-black); border-color: var(--accent); }
.cozy-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.cozy-cta__note { margin: 18px 0 0; color: #888; font-size: 13px; letter-spacing: 1px; }

/* =========================================================
   Page Privatisation
   ========================================================= */
/* Hero plein écran avec accroche (voile plus marqué pour la lisibilité du texte). */
.priv-hero__overlay {
	background: linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.55) 100%);
}
/* Texte du hero englobé dans un carré noir semi-transparent (lisibilité). */
.priv-hero__content { max-width: 680px; color: #fff; background: rgba(0,0,0,.55); padding: 52px 62px; }
@media (max-width: 640px) { .priv-hero__content { padding: 34px 30px; } }
.priv-hero__eyebrow {
	display: block; text-transform: uppercase; letter-spacing: 5px; font-size: 12px;
	color: rgba(255,255,255,.85); margin-bottom: 22px;
}
.priv-hero__title {
	font-size: 54px; line-height: 1.1; text-transform: uppercase; letter-spacing: 3px;
	color: #fff; margin: 0 0 22px;
}
.priv-hero__text { font-size: 18px; line-height: 1.7; color: rgba(255,255,255,.9); margin: 0 auto 34px; max-width: 560px; }
.priv-hero__cta { margin-top: 4px; }
@media (max-width: 640px) { .priv-hero__title { font-size: 36px; } .priv-hero__text { font-size: 16px; } }

/* Les 3 espaces sur un seul écran : panneaux plein écran côte à côte. */
.priv-spaces { min-height: 100vh; display: flex; flex-direction: column; background: #000; }
.priv-spaces__title { color: #fff; padding: 46px 0 26px; margin: 0; }
.priv-spaces__grid { flex: 1 1 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.priv-space { position: relative; overflow: hidden; min-height: 440px; }
.priv-space__img {
	position: absolute; inset: 0; background-size: cover; background-position: center;
	transition: transform .7s var(--ease);
}
.priv-space:hover .priv-space__img { transform: scale(1.06); }
.priv-space__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.55) 42%, rgba(0,0,0,.12) 78%);
}
.priv-space__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 42px 40px; color: #fff; }
.priv-space__cap {
	display: block; text-transform: uppercase; letter-spacing: 3px; font-size: 12px;
	color: rgba(255,255,255,.85); margin-bottom: 12px;
}
.priv-space__name { font-size: 30px; text-transform: uppercase; letter-spacing: 1px; color: #fff; margin: 0 0 14px; }
.priv-space__desc { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.82); }
.priv-space__desc p { margin: 0; }
@media (max-width: 860px) {
	.priv-spaces { min-height: 0; }
	.priv-spaces__grid { grid-template-columns: 1fr; gap: 3px; }
	.priv-space { min-height: 58vh; }
}

/* Formulaire de demande. */
.priv-form { padding-top: 20px; }
.priv-form__intro { text-align: center; max-width: 560px; margin: -18px auto 40px; color: #666; }

/* =========================================================
   Page Carte (menus) — Terrasse / Rooftop
   ========================================================= */
.menu-page {
	--menu-bg: #0e2a37;   /* navy profond, l'âme de la carte Quai */
	--cream: #f2e9d2;
	--accent: #8fb9ab;    /* Terrasse : teal */
	background: var(--menu-bg);
	color: var(--cream);
	padding-top: var(--header-h);
	min-height: 100vh;
}
.menu-page[data-accent="orange"] { --accent: #ff5a26; } /* Carte Cozy : orange (clin d'œil Mikuna) */

.menu-intro { text-align: center; padding: 72px 0 30px; }
.menu-intro__eyebrow { display: block; color: var(--accent); letter-spacing: 4px; text-transform: uppercase; font-size: 11px; margin-bottom: 18px; }
.menu-intro__title { font-size: 46px; letter-spacing: 3px; text-transform: uppercase; color: #f7efda; margin: 0; }

/* Bascule Boissons / Cuisine */
.menu-switch { position: relative; display: inline-flex; margin-top: 28px; border: 1px solid rgba(242,233,210,.28); }
.menu-switch__ink { position: absolute; top: 0; left: 0; bottom: 0; width: 50%; background: var(--accent); z-index: 0; transition: transform .45s var(--ease); }
.menu-page[data-tab="cuisine"] .menu-switch__ink { transform: translateX(100%); }
.menu-switch__btn {
	position: relative; z-index: 1; background: none; border: 0; cursor: pointer;
	padding: 15px 34px; font-family: inherit; font-size: 12px; font-weight: 600;
	letter-spacing: 2px; text-transform: uppercase; color: var(--cream);
	white-space: nowrap; transition: color .35s var(--ease);
}
.menu-switch__btn.is-active { color: #0e2a37; }

/* Panneaux */
.menu-panel.is-hidden { display: none; }

/* Mode « flux » (colonnes qui coulent) — utilisé pour la cuisine. */
.menu-flow { column-count: 2; column-gap: 64px; padding-top: 22px; padding-bottom: 80px; }

/* Mode « rangées » (mise en page 1 ou 2 colonnes) — utilisé pour les boissons. */
.menu-rows { padding-top: 22px; padding-bottom: 80px; }
.menu-row + .menu-row { margin-top: 12px; }
/* Même largeur (820px, centré) que la rangée soit sur 1 ou 2 colonnes. */
.menu-row--1 .menu-sec { max-width: 820px; margin-left: auto; margin-right: auto; }
.menu-row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; max-width: 820px; margin-left: auto; margin-right: auto; }
.menu-row__col { min-width: 0; }

/* En-tête cuisine — logo Mikuna en grand */
.menu-food-head { text-align: center; padding: 26px 24px 6px; }
.menu-food-head__logo { height: 92px; width: auto; max-width: 78%; margin: 0 auto; }
.menu-food-head__text { margin: 16px 0 0; color: rgba(242,233,210,.55); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; }
@media (max-width: 640px) { .menu-food-head__logo { height: 64px; } }

/* --- Thème clair (carte Cozy) : fond blanc, texte sombre, accent orange conservé --- */
.menu-page[data-theme="light"] { background: #fff; color: #2b2b2b; }
.menu-page[data-theme="light"] .menu-intro__title { color: #111; }
.menu-page[data-theme="light"] .menu-sub { color: #111; }
.menu-page[data-theme="light"] .menu-item__name { color: #141414; }
.menu-page[data-theme="light"] .menu-item__price,
.menu-page[data-theme="light"] .menu-item--cols .menu-prices > span { color: #333; }
.menu-page[data-theme="light"] .menu-item__desc { color: #666; }
.menu-page[data-theme="light"] .menu-note { color: #888; }
.menu-page[data-theme="light"] .menu-sec__title { border-bottom-color: rgba(0,0,0,.1); }
.menu-page[data-theme="light"] .menu-item__dots { border-bottom-color: rgba(0,0,0,.22); }
.menu-page[data-theme="light"] .menu-prices .p-empty { color: rgba(0,0,0,.28); }
.menu-page[data-theme="light"] .menu-switch { border-color: rgba(0,0,0,.2); }
.menu-page[data-theme="light"] .menu-switch__btn { color: #222; }
.menu-page[data-theme="light"] .menu-switch__btn.is-active { color: #fff; }
.menu-page[data-theme="light"] .menu-food-head__text { color: #888; }

/* --- Bouton croisé entre les deux cartes (avec logo) --- */
.menu-crosslink {
	display: inline-flex; align-items: center; gap: 11px;
	margin-top: 26px; padding: 13px 24px;
	font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
	transition: opacity .25s var(--ease);
}
.menu-crosslink__logo { height: 20px; width: auto; display: block; }
.menu-crosslink:hover { opacity: .82; }
.menu-page[data-theme="dark"] .menu-crosslink { background: #f2e9d2; color: #0e2a37; }
.menu-page[data-theme="light"] .menu-crosslink { background: #0e2a37; color: #f2e9d2; }

/* --- Header clair (carte Cozy) : nav en texte foncé, lisible sur fond blanc --- */
@media (min-width: 993px) {
	.has-light-header .site-nav a { color: #141414; }
	.has-light-header .site-nav a::after { background: #141414; }
}
.has-light-header .nav-reserve { color: #141414; border-color: rgba(0,0,0,.4); }
.has-light-header .nav-reserve:hover { background: #141414; color: #fff; border-color: #141414; }
.has-light-header .social-rail a:hover { background: #fff; color: #000; border-color: #000; }
.has-light-header .site-header__by { color: #141414; }
.has-light-header .site-header__toggle span { background: #141414; }
.has-light-header .site-header__logo img:not(.site-header__cozy) { filter: brightness(0); } /* logo FLOW → noir */
.has-light-header .site-header.is-scrolled { background-color: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.08); }
/* Menu mobile ouvert (header sombre) : on repasse les éléments de la barre en clair */
.has-light-header.nav-open .site-header,
.has-light-header.nav-open .site-header.is-scrolled { background-color: #0a0a0a; box-shadow: none; }
.has-light-header.nav-open .site-header__toggle span { background: #fff; }
.has-light-header.nav-open .site-header__by { color: #fff; }
.has-light-header.nav-open .site-header__logo img:not(.site-header__cozy) { filter: none; }

/* Lockup « COZY by flow » statique (carte Cozy) : toujours visible, sans animation */
.site-header__cozy-lockup--static { max-width: none; margin-right: 13px; opacity: 1; transition: none; }

/* --- Page Cozy : nav claire au top (hero sombre) → nav foncée + fond blanc au scroll --- */
.cozy-lightnav .site-header.is-scrolled { background-color: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.08); }
.cozy-lightnav.is-scrolled .site-nav a { color: #141414; }
.cozy-lightnav.is-scrolled .site-nav a::after { background: #141414; }
.cozy-lightnav.is-scrolled .nav-reserve { color: #141414; border-color: rgba(0,0,0,.4); }
.cozy-lightnav.is-scrolled .nav-reserve:hover { background: #141414; color: #fff; border-color: #141414; }
.cozy-lightnav.is-scrolled .site-header__by { color: #141414; }
.cozy-lightnav.is-scrolled .site-header__toggle span { background: #141414; }
.cozy-lightnav.is-scrolled .social-rail a:hover { background: #fff; color: #000; border-color: #000; }
/* Logo FLOW : fondu crème → noir, synchronisé avec l'apparition du fond blanc de la nav. */
.cozy-lightnav .site-header__logo img:not(.site-header__cozy) { transition: filter .45s ease, height .35s var(--ease); }
.cozy-lightnav.is-scrolled .site-header__logo img:not(.site-header__cozy) { filter: brightness(0); }
/* Menu mobile ouvert (dropdown sombre) : on force le clair, même si scrollé. */
.cozy-lightnav.nav-open .site-header,
.cozy-lightnav.nav-open .site-header.is-scrolled { background-color: #0a0a0a; box-shadow: none; }
.cozy-lightnav.nav-open .site-nav a { color: #fff; }
.cozy-lightnav.nav-open .site-header__by { color: #fff; }
.cozy-lightnav.nav-open .site-header__toggle span { background: #fff; }
.cozy-lightnav.nav-open .site-header__logo img:not(.site-header__cozy) { filter: none; }
@media (max-width: 760px) {
	.menu-flow { column-count: 1; }
	.menu-row--2 { grid-template-columns: 1fr; gap: 0; }
	.menu-row--1 .menu-sec { max-width: none; }
}

.menu-sec { break-inside: avoid; margin-bottom: 40px; }
.menu-sec__title {
	color: var(--accent); font-size: 13px; letter-spacing: 3px; text-transform: uppercase;
	margin: 0 0 18px; padding-bottom: 11px; border-bottom: 1px solid rgba(242,233,210,.14);
	transition: color .4s var(--ease);
}
.menu-sub { color: #f2e9d2; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; margin: 18px 0 10px; font-weight: 600; }

.menu-items { list-style: none; margin: 0 0 4px; padding: 0; }
.menu-item { break-inside: avoid; }
.menu-items .menu-item + .menu-item { margin-top: 15px; } /* espacement ciblé (n'affecte pas les <li> de la nav qui portent aussi .menu-item) */
.menu-item__head { display: flex; align-items: baseline; }
.menu-item__name { color: #f4ecd8; font-size: 15px; font-weight: 600; }
.menu-item__dots { flex: 1 1 auto; min-width: 16px; margin: 0 9px; border-bottom: 1px dotted rgba(242,233,210,.32); transform: translateY(-3px); }
.menu-item__price { color: rgba(242,233,210,.82); font-size: 14px; letter-spacing: .3px; white-space: nowrap; }
.menu-item__desc { margin: 4px 0 0; color: rgba(242,233,210,.5); font-size: 12.5px; font-style: italic; line-height: 1.55; max-width: 48ch; }
.menu-note { color: rgba(242,233,210,.5); font-size: 11.5px; font-style: italic; margin: 12px 0 0; }

/* Colonnes de prix par quantité (ex. 25cl / 1L) */
.menu-colhead { display: flex; align-items: baseline; margin: 0 0 12px; }
.menu-colhead__spacer { flex: 1 1 auto; }
.menu-prices { display: flex; flex: none; }
.menu-prices > span { width: 52px; text-align: right; }
.menu-colhead .menu-prices > span { color: var(--accent); font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.menu-item--cols .menu-item__head { display: flex; align-items: baseline; gap: 12px; }
.menu-item--cols .menu-item__name { flex: 1 1 auto; min-width: 0; }
.menu-item--cols .menu-prices > span { color: rgba(242,233,210,.82); font-size: 14px; }
.menu-prices .p-empty { color: rgba(242,233,210,.28); }

/* Crédit cuisine (Mikuna) */
.menu-credit { border-top: 1px solid rgba(242,233,210,.12); padding: 48px 0 72px; text-align: center; }
.menu-credit__label { display: block; color: rgba(242,233,210,.5); letter-spacing: 3px; text-transform: uppercase; font-size: 11px; margin-bottom: 18px; }
.menu-credit__logo { height: 42px; width: auto; margin: 0 auto; }
.menu-credit__text { margin: 14px 0 0; color: rgba(242,233,210,.55); font-size: 13px; letter-spacing: 1px; }

@media (max-width: 640px) {
	.menu-intro__title { font-size: 32px; }
	/* Prix (texte libre) sous le nom : évite les débordements. */
	.menu-item__head { display: block; }
	.menu-item__dots { display: none; }
	.menu-item__price { display: inline-block; margin-top: 4px; font-size: 13px; color: rgba(242,233,210,.7); }
	/* Items en colonnes : on garde l'alignement tabulaire. */
	.menu-item--cols .menu-item__head { display: flex; }
	.menu-prices > span { width: 46px; }
}