/* Au Petit Grillon (Corpataux).
 *
 * The restaurant's own print identity: the charcoal and gold of the flyers
 * and the white script logo, and the cartes it prints itself (2026: ivory
 * paper, a classic serif, italic descriptions, prices in red). The home page
 * opens on a full-screen film of the kitchen and the room. The cartes read
 * like a printed sheet: Cormorant Garamond for headings, dishes and prices,
 * its italic for descriptions, Figtree for everything you read or tap,
 * square 4px corners, thin gold rules.
 *
 *   coal    #131519   header, hero, dark bands, footer
 *   coal-2  #1b1e24   panels on coal
 *   gold    #c9a053   rules, actions and accents on dark
 *   gold-d  #7a5a1e   small accents on light
 *   wine    #8c2a20   prices on paper (the red of the printed cartes)
 *   ivory   #f4f0e8   text on dark
 *   paper   #f6f1e6   reading sections; sheet #fffcf5 under a carte
 */

:root {
	--tn-logo-h: 30px;
	--tn-radius: 4px;
	--tn-rule: #ddd0b8;
	--pg-coal: #131519;
	--pg-coal-2: #1b1e24;
	--pg-gold: #c9a053;
	--pg-wine: #8c2a20;
	--pg-sheet: #fffcf5;
	/* A printed carte's double rule. */
	--pg-frame: 0 0 0 1px var(--pg-gold), 0 0 0 5px var(--pg-sheet), 0 0 0 6px rgba(201, 160, 83, 0.6);
	--pg-gold-2: #e3c27f;
	--pg-gold-d: #7a5a1e;
	--pg-ivory: #f4f0e8;
	--pg-line-d: rgba(207, 167, 91, 0.28);
}

body { font-size: 17px; line-height: 1.6; font-variant-numeric: lining-nums; } /* Cormorant's figures default to old-style */

/* ---------- Type ---------- */
.display, h1, h2,
.tn-head h2, .tn-page-hero h1, .section-head h2, .faq-head h2 {
	font-family: var(--font-display);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.02;
	color: var(--ink);
}
h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: 0; }
.tn-head h2 { font-size: clamp(40px, 5vw, 66px); }
.tn-intro { color: var(--ink-soft); }
.eyebrow { text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 600; color: var(--pg-gold-d); }

/* ---------- Buttons ---------- */
.btn { border-radius: var(--tn-radius); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 16px; padding: 14px 24px; }
.btn-primary { background: var(--pg-coal); color: var(--pg-ivory); }
.btn-primary:hover { background: #000; color: #fff; box-shadow: none; transform: none; }
.btn-ghost { border: 1px solid currentColor; color: var(--ink); }
.btn-ghost:hover { background: var(--pg-coal); border-color: var(--pg-coal); color: var(--pg-ivory); }
.btn-light { background: var(--pg-gold); color: var(--pg-coal); }
.btn-light:hover { background: var(--pg-gold-2); }
.btn .arr, .btn-arrow { display: none; }

/* ---------- Header: charcoal, white script logo ---------- */
.nav, .nav.scrolled { background: var(--pg-coal); border-bottom: 1px solid var(--pg-line-d); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav-center { background: transparent; padding: 0; gap: 2px; }
.nav-center a { font-size: 15px; font-weight: 500; color: rgba(244, 240, 232, 0.82); background: transparent; }
.nav-center a:hover { color: var(--pg-gold-2); background: transparent; }
/* The current page: gold, with one gold hairline under the word. */
.nav-center .current-menu-item > a, .nav-center .current_page_item > a { color: var(--pg-gold-2); background: transparent; }
.nav-center .current-menu-item > a::after, .nav-center .current_page_item > a::after { height: 1px; bottom: 4px; background: var(--pg-gold); }
.nav-phone { font-size: 15px; color: rgba(244, 240, 232, 0.82); border-radius: var(--tn-radius); }
.nav-phone:hover { color: var(--pg-gold-2); background: transparent; }
.nav-cta-btn { background: var(--pg-gold); color: var(--pg-coal); border-radius: var(--tn-radius); font-size: 15px; padding: 11px 18px; }
.nav-cta-btn:hover { background: var(--pg-gold-2); transform: none; }
.nav-cta-btn .arr { display: none; }
.nav-menu-btn { border-color: rgba(244, 240, 232, 0.3); color: var(--pg-ivory); }
.nav-account { border-color: rgba(244, 240, 232, 0.3); color: var(--pg-ivory); }

/* ---------- Home hero: the film ---------- */
.pg-hero {
	position: relative;
	display: grid;
	grid-template-rows: 1fr auto;
	min-height: max(620px, calc(100svh - 68px));
	overflow: hidden;
	color: var(--pg-ivory);
	background: var(--pg-coal);
}
.pg-hero-film { position: absolute; inset: 0; background: var(--pg-coal); }
.pg-hero-film::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(19, 21, 25, 0.78) 0%, rgba(19, 21, 25, 0.42) 45%, rgba(19, 21, 25, 0.12) 100%),
		linear-gradient(0deg, rgba(19, 21, 25, 0.86) 0%, rgba(19, 21, 25, 0) 36%);
}
.pg-hero .tn-media-toggle { z-index: 4; top: 18px; right: 18px; bottom: auto; background: rgba(19, 21, 25, 0.55); }
.pg-hero-inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
	gap: clamp(32px, 6vw, 96px);
	align-items: end;
	width: 100%;
	padding-top: clamp(56px, 10vh, 120px);
	padding-bottom: clamp(36px, 6vh, 64px);
}
.pg-hero-place { margin: 0 0 14px; font-size: 16px; font-weight: 500; color: var(--pg-gold-2); }
.pg-hero-title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(64px, 9vw, 140px);
	line-height: 0.92;
	letter-spacing: -0.015em;
	color: var(--pg-ivory);
}
.pg-hero-sub { margin: 22px 0 0; max-width: 40ch; font-size: 19px; line-height: 1.5; color: rgba(244, 240, 232, 0.86); }
.pg-hero-status { margin: 22px 0 0; font-size: 18px; font-weight: 500; color: var(--pg-ivory); }
.pg-hero-status.is-open::before { background: #61c27f; box-shadow: 0 0 0 4px rgba(97, 194, 127, 0.22); }
.pg-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.pg-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 24px; border-radius: var(--tn-radius); font-size: 16px; font-weight: 600; text-decoration: none; transition: background .2s ease, border-color .2s ease; }
.pg-btn-gold { background: var(--pg-gold); color: var(--pg-coal); }
.pg-btn-gold:hover { background: var(--pg-gold-2); }
.pg-btn-line { border: 1px solid rgba(244, 240, 232, 0.55); color: var(--pg-ivory); }
.pg-btn-line span { font-weight: 500; color: rgba(244, 240, 232, 0.8); }
.pg-btn-line strong { font-weight: 600; color: var(--pg-gold-2); }
.pg-btn-line:hover { border-color: var(--pg-ivory); }

/* "Aujourd'hui": today's lunch, delivery, the village check. */
.pg-today { padding: 24px 26px 26px; background: rgba(19, 21, 25, 0.72); border: 1px solid var(--pg-line-d); border-radius: var(--tn-radius); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pg-today-title { margin: 0 0 6px; font-family: var(--font-display); font-size: 32px; font-weight: 500; letter-spacing: 0; color: var(--pg-ivory); }
.pg-today-row { padding: 14px 0; border-bottom: 1px solid rgba(244, 240, 232, 0.12); }
.pg-today-label { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--pg-gold-2); }
.pg-today-text, .pg-today-mdj { margin: 0; font-size: 16px; line-height: 1.5; color: rgba(244, 240, 232, 0.9); }
.pg-today-text a { color: var(--pg-ivory); font-weight: 600; text-decoration: none; white-space: nowrap; }
.pg-today-mdj .tn-mdj-today-items { display: grid; gap: 6px; }
.pg-today-mdj .tn-mdj-label { color: rgba(244, 240, 232, 0.66); font-weight: 500; }
.pg-today-mdj .tn-mdj-name { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--pg-ivory); }
.pg-today-mdj .tn-mdj-price { color: var(--pg-gold-2); font-weight: 600; }
.pg-today-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font-size: 15px; font-weight: 500; color: var(--pg-ivory); text-decoration: underline; text-decoration-color: var(--pg-gold); text-underline-offset: 5px; }
.pg-today-checker { margin-top: 16px; }
.pg-today-checker .tn-checker-label { font-size: 14px; font-weight: 600; color: var(--pg-gold-2); }
.pg-today-checker .tn-checker-input { height: 48px; border: 1px solid rgba(244, 240, 232, 0.45); border-right: 0; border-radius: var(--tn-radius) 0 0 var(--tn-radius); background: rgba(244, 240, 232, 0.06); color: var(--pg-ivory); }
.pg-today-checker .tn-checker-input::placeholder { color: rgba(244, 240, 232, 0.55); }
.pg-today-checker .tn-checker-button { height: 48px; border: 0; border-radius: 0 var(--tn-radius) var(--tn-radius) 0; background: var(--pg-ivory); color: var(--pg-coal); }
.pg-today-checker .tn-checker-result { border-radius: var(--tn-radius); font-size: 15px; }

/* The bar: five ways in, along the bottom of the film. */
.pg-hero-bar { position: relative; z-index: 2; border-top: 1px solid var(--pg-line-d); background: rgba(19, 21, 25, 0.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pg-hero-bar-inner { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pg-hero-bar a, .pg-hero-bar button {
	display: grid;
	gap: 2px;
	padding: 18px 20px 20px 0;
	border: 0;
	background: none;
	font: inherit;
	text-align: left;
	color: var(--pg-ivory);
	text-decoration: none;
	cursor: pointer;
}
.pg-hero-bar a + a, .pg-hero-bar a + button { padding-left: 20px; border-left: 1px solid rgba(244, 240, 232, 0.12); }
.pg-bar-title { font-size: 17px; font-weight: 600; }
.pg-bar-sub { font-size: 14px; color: rgba(244, 240, 232, 0.66); }
.pg-hero-bar a:hover .pg-bar-title, .pg-hero-bar button:hover .pg-bar-title { color: var(--pg-gold-2); }

/* ---------- Sections ---------- */
.tn-section { background: var(--paper); }
.tn-tone-alt { background: var(--surface-2); }
.tn-tone-brand { background: var(--pg-coal); color: var(--pg-ivory); }
.tn-tone-brand .tn-head h2, .tn-tone-brand h2, .tn-tone-brand h3 { color: var(--pg-ivory); }
.tn-tone-brand .tn-intro, .tn-tone-brand .tn-prose { color: rgba(244, 240, 232, 0.82); }
.tn-tone-brand .tn-kicker { color: var(--pg-gold-2); }
.tn-tone-brand .tn-link-arrow { color: var(--pg-ivory); text-decoration-color: var(--pg-gold); }
.tn-tone-brand .tn-network-body .tn-network-name { color: var(--pg-ivory); }

/* Pizza sizes: the printed carte's look on the home page. */
.pg-sizes .tn-table-scroll { padding: clamp(18px, 3vw, 40px); background: var(--pg-sheet); box-shadow: var(--pg-frame); }
.pg-sizes .tn-price-table thead th { font-family: var(--font-display); font-style: italic; font-size: 18px; font-weight: 500; color: var(--pg-gold-d); border-bottom: 1px solid var(--pg-gold); }
.pg-sizes .tn-table-name { font-family: var(--font-display); font-weight: 600; font-size: 23px; letter-spacing: 0; color: var(--ink); }
.pg-sizes .tn-table-desc { font-family: var(--font-display); font-style: italic; font-size: 17px; color: var(--muted); }
.pg-sizes .tn-price-table td { font-family: var(--font-display); font-weight: 700; font-size: 23px; font-variant-numeric: lining-nums tabular-nums; color: var(--pg-wine); }

/* Gallery: plain frames */
.pg-gallery .tn-gallery-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: auto; gap: 12px; }
.pg-gallery .tn-gallery-grid figure,
.pg-gallery .tn-gallery-grid figure:first-child { grid-column: span 1; grid-row: span 1; aspect-ratio: 4 / 5; border-radius: var(--tn-radius); }

/* Delivery film */
.pg-delivery .tn-media { aspect-ratio: 21 / 9; border-radius: var(--tn-radius); }

/* Checker and zones */
.tn-checker-input { border-width: 1px; border-radius: var(--tn-radius) 0 0 var(--tn-radius); }
.tn-checker-button { border-width: 1px; border-radius: 0 var(--tn-radius) var(--tn-radius) 0; background: var(--pg-coal); border-color: var(--pg-coal); color: var(--pg-ivory); }
.tn-zone { border-top: 1px solid var(--pg-coal); }
.tn-zone-min { font-family: var(--font-display); font-weight: 600; font-size: 34px; letter-spacing: 0; color: var(--pg-wine); }

/* Inner pages */
.tn-page-hero:not(.has-media) { background: var(--pg-coal); }
.tn-page-hero:not(.has-media) h1 { color: var(--pg-ivory); }
.tn-page-hero:not(.has-media) .tn-lead, .tn-page-hero:not(.has-media) .tn-chips { color: rgba(244, 240, 232, 0.84); }
.tn-page-hero:not(.has-media) .tn-breadcrumbs ol { color: rgba(244, 240, 232, 0.66); }
.tn-page-hero:not(.has-media) .btn-ghost { color: var(--pg-ivory); }
.tn-page-hero:not(.has-media) .btn-primary { background: var(--pg-gold); color: var(--pg-coal); }
.tn-page-hero h1 { font-weight: 500; letter-spacing: -0.01em; line-height: 0.98; }

/* ---------- Cartes: a printed sheet ----------
   Dish names and prices in the serif, descriptions in its italic, a dotted
   leader to the price, sizes once as column heads, a double gold rule
   around the sheet. */
.tn-menu-sections { padding: clamp(24px, 4vw, 56px); background: var(--pg-sheet); box-shadow: var(--pg-frame); }
.tn-menu-section-title { padding-bottom: 8px; border-bottom: 1px solid var(--pg-gold); font-family: var(--font-display); font-weight: 600; font-size: clamp(30px, 3vw, 40px); letter-spacing: 0; color: var(--ink); }
.tn-menu-section-note, .tn-menu-note { font-family: var(--font-display); font-style: italic; font-size: 18px; color: var(--muted); }
.tn-menu-item { padding: 12px 0 13px; border-bottom-color: #ece2cf; }
.tn-menu-item-name { font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 1.22; color: var(--ink); }
.tn-menu-item-dots { align-self: end; margin-bottom: 0.4em; border-bottom: 1px dotted #b9a786; }
.tn-menu-item-price { font-family: var(--font-display); font-weight: 700; font-size: 21px; font-variant-numeric: lining-nums tabular-nums; color: var(--pg-wine); }
.tn-menu-item-price .tn-price-size { font-weight: 500; font-style: italic; color: var(--pg-gold-d); }
.tn-menu-item-desc { margin-top: 2px; font-family: var(--font-display); font-style: italic; font-size: 17.5px; line-height: 1.4; color: var(--muted); }
.tn-menu-sizes { font-family: var(--font-display); font-style: italic; font-size: 17px; color: var(--pg-gold-d); border-bottom-color: var(--pg-gold); }
.tn-tag-icon.tn-tag-piquant { color: var(--pg-wine); vertical-align: -1px; }
/* Rubric tabs above the sheet. */
.tn-menu-nav { background: var(--paper); border-bottom-color: var(--pg-gold); }
.tn-menu-nav a { font-family: var(--font-display); font-size: 19px; font-weight: 500; color: var(--ink-soft); }
.tn-menu-nav a:hover { color: var(--pg-wine); }
.tn-menu-nav a.is-active { color: var(--pg-wine); border-bottom-color: var(--pg-wine); }

/* ---------- Menu du jour: the same sheet, day by day ---------- */
.tn-mdj-week { padding: clamp(24px, 4vw, 48px); background: var(--pg-sheet); box-shadow: var(--pg-frame); }
.tn-mdj-week + .tn-mdj-week { margin-top: 48px; }
.tn-mdj-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(32px, 3.6vw, 46px); letter-spacing: 0; }
.tn-mdj-head { border-bottom-color: var(--pg-gold); }
.tn-mdj-serving { font-family: var(--font-display); font-style: italic; font-size: 18px; }
.tn-mdj-dayname { font-family: var(--font-display); font-weight: 600; font-size: 25px; }
.tn-mdj-daynum { font-family: var(--font-display); font-style: italic; font-size: 17px; }
.tn-mdj-label { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 17px; color: var(--pg-gold-d); }
.tn-mdj-name { font-family: var(--font-display); font-weight: 600; font-size: 21px; }
.tn-mdj-desc { font-family: var(--font-display); font-style: italic; font-size: 17px; }
.tn-mdj-price { font-family: var(--font-display); font-weight: 700; font-size: 21px; font-variant-numeric: lining-nums tabular-nums; color: var(--pg-wine); }
.tn-mdj-weekly { background: transparent; border-top: 1px solid var(--pg-gold); border-radius: 0; }
.tn-mdj-weekly-title { font-family: var(--font-display); font-weight: 600; font-size: 25px; }
.tn-mdj-today-tag { background: var(--pg-gold); color: var(--pg-coal); }
.tn-mdj-day.is-today { background: rgba(201, 160, 83, 0.1); }
.tn-mdj-day.is-past .tn-mdj-price { color: var(--muted); }

/* ---------- The seasonal carte on the home page (autumn) ---------- */
.pg-season > .wrap { width: min(1256px, calc(100% - 32px)); padding: clamp(28px, 4vw, 56px); background: var(--pg-sheet); box-shadow: var(--pg-frame); }
.pg-season .tn-pick { border-top-color: #ece2cf; }
.pg-season .tn-pick-name { font-family: var(--font-display); font-weight: 600; font-size: 23px; }
.pg-season .tn-pick-price { font-family: var(--font-display); font-weight: 700; font-size: 21px; font-variant-numeric: lining-nums tabular-nums; color: var(--pg-wine); }
.pg-season .tn-pick-desc { font-family: var(--font-display); font-style: italic; font-size: 17.5px; }
.pg-season .tn-pick-dots { border-bottom: 1px dotted #b9a786; }

/* FAQ, footer */
.faq .eyebrow { display: none; }
.faq-q span:first-child { font-family: var(--font-display); font-weight: 600; font-size: 22px; }
.footer-brand p { font-family: var(--font-display); font-style: italic; font-size: 26px; line-height: 1.3; }
.footer { background: var(--pg-coal); }

/* Opening-hours card: a charcoal tag with the live status. */
.tn-info-card,
.tn-info-card:not(.is-compact),
.tn-info-card.is-compact { border-radius: var(--tn-radius); background: var(--pg-coal); color: var(--pg-ivory); border: 1px solid var(--pg-line-d); box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.6); }
.tn-info-card:not(.is-compact), .tn-info-card.is-compact { padding-left: 16px; }
.tn-info-card:hover { border-color: var(--pg-gold); }
.tn-info-card .ic-avatar { display: none; }
.tn-info-card, .tn-info-card.is-compact { min-height: 44px; }
.tn-info-card .tn-status.is-open::before { background: #61c27f; }

/* ---------- Small screens ---------- */
@media (max-width: 1100px) {
	.pg-hero-bar-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pg-hero-bar a, .pg-hero-bar button { border-bottom: 1px solid rgba(244, 240, 232, 0.12); }
}
@media (max-width: 900px) {
	/* The film fills the first screen with the name and the two actions;
	   the "Aujourd'hui" panel and the bar follow on charcoal. */
	.pg-hero { display: block; min-height: 0; }
	.pg-hero-film { position: absolute; inset: 0 0 auto 0; height: min(calc(100svh - 60px), 780px); }
	.pg-hero-film::after { background: linear-gradient(0deg, var(--pg-coal) 0%, rgba(19, 21, 25, 0.72) 32%, rgba(19, 21, 25, 0.2) 70%, rgba(19, 21, 25, 0.35) 100%); }
	.pg-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 0; padding-bottom: 28px; }
	.pg-hero-copy { display: flex; flex-direction: column; justify-content: flex-end; min-height: min(calc(100svh - 60px), 780px); padding-bottom: 8px; }
	.pg-hero-title { font-size: clamp(48px, 14vw, 72px); }
	.pg-hero-sub { font-size: 17px; }
	.pg-hero-actions .pg-btn { flex: 1 1 100%; justify-content: center; }
	.pg-today { background: var(--pg-coal-2); -webkit-backdrop-filter: none; backdrop-filter: none; }
	.pg-hero-bar { background: var(--pg-coal); }
	.pg-hero-bar-inner { grid-template-columns: 1fr 1fr; }
	.pg-hero-bar a, .pg-hero-bar button, .pg-hero-bar a + a, .pg-hero-bar a + button { padding: 16px 12px 16px 0; border-left: 0; border-bottom: 1px solid rgba(244, 240, 232, 0.12); }
	.pg-hero-bar a:nth-child(even), .pg-hero-bar button:nth-child(even) { padding-left: 14px; border-left: 1px solid rgba(244, 240, 232, 0.12); }
	.pg-hero-bar button { grid-column: 1 / -1; padding-left: 0 !important; border-left: 0 !important; }
	.pg-gallery .tn-gallery-grid { grid-template-columns: 1fr 1fr; }
	.pg-delivery .tn-media { aspect-ratio: 16 / 10; }
}

/* Four equal frames: the shared gallery's "no orphan on the last row" rule
   spans a 12-column grid and would stretch the fourth photo across this
   4-column one. */
.pg-gallery .tn-gallery-grid figure,
.pg-gallery .tn-gallery-grid figure:first-child,
.pg-gallery .tn-gallery-grid figure:nth-child(4):last-child,
.pg-gallery .tn-gallery-grid figure:nth-child(4):nth-last-child(2),
.pg-gallery .tn-gallery-grid figure:nth-child(5):last-child,
.pg-gallery .tn-gallery-grid figure:nth-child(even):last-child { grid-column: span 1; grid-row: span 1; }
@media (max-width: 900px) {
	.pg-gallery .tn-gallery-grid figure:nth-child(even):last-child { grid-column: span 1; }
}

/* The room on film, four frames under it. */
.pg-salle .tn-media { aspect-ratio: 21 / 9; border-radius: var(--tn-radius); }
.pg-salle .tn-media-strip { grid-template-columns: repeat(4, 1fr); margin-top: 12px; }
.pg-salle .tn-ctas { margin-top: 28px; }
@media (max-width: 900px) {
	.pg-salle .tn-media { aspect-ratio: 16 / 10; }
	.pg-salle .tn-media-strip { grid-template-columns: 1fr 1fr; }
}