/* ==========================================================================
   Jozy — styles
   ========================================================================== */

@font-face {
	font-family: "EB Garamond";
	src: url("../fonts/eb-garamond-latin-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "EB Garamond";
	src: url("../fonts/eb-garamond-latin-500-normal.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "EB Garamond";
	src: url("../fonts/eb-garamond-latin-400-italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

:root {
	--bg: #f4f2ea;
	--ink: #26221e;
	--muted: #8a847a;
	--line: #2b2723;
	--gutter: 4.3vw;
	--header-h: 76px;
	--fs-small: clamp(10px, 0.78vw, 12px);   /* menu, liens */
	--fs-text: clamp(13px, 0.98vw, 15.5px);  /* paragraphes */
	--track-ease: cubic-bezier(0.7, 0, 0.2, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: "EB Garamond", Garamond, "Times New Roman", serif;
	font-size: var(--fs-text);
	line-height: 1.72;
	letter-spacing: 0.085em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
figure { margin: 0; }

.jz-slide:focus,
.jz-slide:focus-visible { outline: none; }

a:focus-visible,
button:focus-visible {
	outline: 1px solid var(--ink);
	outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------------- */
.jz-header {
	position: fixed;
	z-index: 20;
	top: 0;
	left: 0;
	right: 0;
	height: var(--header-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 2.6vw 0 3vw;
	background: var(--bg);
}

.jz-logo {
	display: block;
	line-height: 0;
	color: var(--ink);
	font-size: var(--fs-small);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.16em;
}

.jz-logo-svg,
.jz-logo-img {
	display: block;
	width: auto;
	height: clamp(38px, 3.6vw, 52px);
}

.jz-logo-text { line-height: 1; }

.jz-nav ul {
	display: flex;
	gap: clamp(18px, 2.3vw, 40px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.jz-nav a {
	font-size: calc(var(--fs-small) * 0.92);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--muted);
	transition: color 0.3s;
}

.jz-nav a:hover,
.jz-nav a.is-active { color: var(--ink); }

.jz-menu-toggle { display: none; }

/* --------------------------------------------------------------------------
   Pages (diapositives)
   -------------------------------------------------------------------------- */
.jz-photo {
	overflow: hidden;
	background: #e7e3d8;
}

.jz-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Accueil */
.jz-home {
	position: relative;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.jz-home-images {
	display: flex;
	gap: 1.25vw;
}

.jz-home-images .jz-photo {
	height: min(64vh, 37vw);
	aspect-ratio: 4 / 5;
}

.jz-tagline {
	margin: 5.5vh 0 0;
	font-size: calc(var(--fs-text) * 0.95);
	letter-spacing: 0.2em;
}

.jz-home-reserve {
	position: absolute;
	right: 8.2vw;
	bottom: 7.2vh;
	display: inline-flex;
	align-items: center;
	gap: 0.8em;
	font-size: var(--fs-small);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.jz-arrow {
	flex: none;
	width: 1.25em;
	height: auto;
	transition: transform 0.35s;
}

a:hover > .jz-arrow { transform: translateX(4px); }

/* Photo + texte */
.jz-split {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	column-gap: 8vw;
}

.jz-split-photo {
	height: min(71vh, calc(45vw / var(--ar, 1)));
	aspect-ratio: var(--ar, 1);
}

.jz-cuisine { --ar: 0.8; }
.jz-vins    { --ar: 0.8; }
.jz-offre   { --ar: 0.8; }
.jz-infos   { --ar: 0.8; }

.jz-copy { max-width: 33em; }

.jz-title {
	margin: 0 0 2.2em;
	font-size: var(--fs-text);
	font-weight: 500;
	letter-spacing: 0.12em;
}

.jz-text p { margin-bottom: 0.95em; }

.jz-links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2.8em;
	margin-top: 3.4em;
}

.jz-links:empty { display: none; }

.jz-link {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 2.5em;
	min-width: 15em;
	padding-bottom: 0.9em;
	border-bottom: 1px solid var(--line);
	font-size: calc(var(--fs-small) * 0.95);
	text-transform: uppercase;
	letter-spacing: 0.2em;
}

.jz-link.is-empty { opacity: 0.45; pointer-events: none; }

/* Infos */
.jz-infos .jz-copy { max-width: 36em; }

.jz-infos-grid {
	display: grid;
	grid-template-columns: 1.45fr 1fr;
	gap: 0 3em;
	font-size: calc(var(--fs-text) * 0.92);
}

.jz-infos-col p { margin-bottom: 1.6em; }
.jz-infos-grid a:hover { text-decoration: underline; text-underline-offset: 3px; }

.jz-reserve-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 2.6em;
	padding: 1.45em 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	font-size: calc(var(--fs-small) * 0.95);
	text-transform: uppercase;
	letter-spacing: 0.2em;
}

/* --------------------------------------------------------------------------
   Ordinateur : diaporama horizontal
   -------------------------------------------------------------------------- */
@media (min-width: 900px) and (min-height: 520px) {
	.js .jz-viewport {
		position: fixed;
		inset: 0;
		overflow: hidden;
	}

	.js .jz-track {
		display: flex;
		height: 100%;
		will-change: transform;
		transition: transform 0.95s var(--track-ease);
	}

	.js .jz-track.no-anim { transition: none; }

	.js .jz-slide {
		flex: 0 0 100vw;
		width: 100vw;
		height: 100%;
		overflow-y: auto;
		scrollbar-width: none;
		display: flex;
		padding: var(--header-h) var(--gutter) 4vh;
	}

	.js .jz-slide::-webkit-scrollbar { display: none; }

	.js .jz-home {
		justify-content: flex-start;
		padding-top: 12vh;
	}

	.js .jz-split { display: grid; }

	/* Les pages apparaissent en douceur pendant le glissement. */
	.js .jz-slide > * {
		transition: opacity 0.9s ease 0.15s;
	}
	.js .jz-slide[inert] > * { opacity: 0.35; }
}

/* Sans JavaScript ou écran plus petit : les pages se suivent verticalement. */
.jz-slide { min-height: 100vh; padding: calc(var(--header-h) + 3vh) var(--gutter) 8vh; display: flex; }
.jz-split { display: grid; }

/* --------------------------------------------------------------------------
   Tablette et mobile
   -------------------------------------------------------------------------- */
@media (max-width: 899px), (max-height: 519px) {
	:root {
		--header-h: 60px;
		--gutter: 22px;
		--fs-small: 11px;
		--fs-text: 15px;
	}

	.jz-header { padding: 0 var(--gutter); }
	.jz-logo-svg,
	.jz-logo-img { height: 36px; }

	.jz-menu-toggle {
		display: block;
		position: relative;
		z-index: 2;
		padding: 10px 0 10px 20px;
		border: 0;
		background: none;
		color: var(--ink);
		font: inherit;
		font-size: var(--fs-small);
		text-transform: uppercase;
		letter-spacing: 0.14em;
		cursor: pointer;
	}

	.jz-menu-close,
	.menu-open .jz-menu-open { display: none; }
	.menu-open .jz-menu-close { display: inline; }

	.jz-nav {
		position: fixed;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--bg);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.35s, visibility 0.35s;
	}

	.menu-open .jz-nav { opacity: 1; visibility: visible; }
	.menu-open body { overflow: hidden; }

	.jz-nav ul {
		flex-direction: column;
		align-items: center;
		gap: 30px;
	}

	.jz-nav a {
		font-size: 14px;
		letter-spacing: 0.18em;
		color: var(--ink);
	}

	.jz-slide {
		min-height: 0;
		padding: 0 var(--gutter) 84px;
	}

	.jz-home {
		min-height: 100svh;
		padding-top: calc(var(--header-h) + 10px);
		padding-bottom: 40px;
	}

	.jz-home-images {
		width: 100%;
		max-width: 520px;
		gap: 10px;
	}

	.jz-home-images .jz-photo {
		flex: 1;
		height: auto;
	}

	.jz-tagline { margin-top: 28px; text-align: center; }

	.jz-home-reserve {
		position: static;
		margin-top: 34px;
	}

	.jz-split {
		grid-template-columns: 1fr;
		row-gap: 34px;
		padding-top: 24px;
	}

	.jz-split-photo {
		width: 100%;
		height: auto;
	}

	.jz-copy { max-width: none; }
	.jz-title { margin-bottom: 1.4em; }
	.jz-links { margin-top: 2.4em; gap: 2em; }

	.jz-infos-grid { grid-template-columns: 1fr; }
	.jz-infos-col + .jz-infos-col p { margin-bottom: 0; }

	/* Téléphone : défilement vertical doux, chaque partie apparaît en fondu. */
	html { scroll-behavior: smooth; }

	.js .jz-reveal {
		opacity: 0;
		transform: translateY(28px);
		transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.6, 0.2, 1);
	}

	.js .jz-reveal.is-visible {
		opacity: 1;
		transform: none;
	}
}

/* Petits points pour savoir sur quelle page on est (téléphone). */
.jz-dots {
	display: none;
	position: fixed;
	z-index: 15;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 22px 0 14px;
	justify-content: center;
	gap: 6px;
	background: linear-gradient(rgba(244, 242, 234, 0), var(--bg) 45%);
	pointer-events: none;
}

.jz-dots button {
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	background: none;
	pointer-events: auto;
	cursor: pointer;
}

.jz-dots button::before {
	content: "";
	display: block;
	width: 6px;
	height: 6px;
	margin: auto;
	border-radius: 50%;
	background: var(--ink);
	opacity: 0.22;
	transition: opacity 0.3s;
}

.jz-dots button.is-active::before { opacity: 0.85; }

/* Barre noire WordPress quand vous êtes connecté. */
.admin-bar .jz-header { top: 32px; }
@media (min-width: 900px) and (min-height: 520px) {
	.js body.admin-bar .jz-viewport { top: 32px; }
}
@media (max-width: 782px) {
	.admin-bar .jz-header { top: 46px; }
	#wpadminbar { position: fixed !important; }
}

@media (prefers-reduced-motion: reduce) {
	.js .jz-track,
	.js .jz-slide > *,
	.jz-arrow { transition: none !important; }
	.js .jz-reveal { opacity: 1 !important; transform: none !important; }
	html { scroll-behavior: auto !important; }
}