/* =========================================================================
   La Truffolie — Feuille de style principale
   Direction : terroir raffiné, fond herbe global, cards dark glassmorphism,
   accents chromatiques vert/orange/jaune/rouge, typo display variable.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1) Tokens (variables CSS — modifier ici pour changer toute la charte)
   ------------------------------------------------------------------------- */
:root {
	/* Couleurs charte (validées par le client) */
	--c-vert:       #408020;
	--c-vert-dark:  #2d5816;
	--c-vert-deep:  #1a2a14;
	--c-orange:     #CC6600;
	--c-jaune:      #FFAE18;
	--c-rouge:      #EA4335;

	/* Neutres */
	--c-blanc:      #ffffff;
	--c-creme:      #F4F0E6;
	--c-gris:       #A8A8A0;
	--c-noir:       #0a0e07;

	/* Cards : verre teinté sombre — utilise --c-veil par défaut */
	--c-card:       rgba(0, 0, 0, 0.6);
	--c-card-border:rgba(255, 255, 255, 0.06);
	--c-card-light: rgba(244, 240, 230, 0.95);

	/* Typo — specs Figma : Sanseriffic pour titres (fallback Outfit en attendant licence),
	   Open Sans pour le body. Toutes les tailles principales : line-height 100%, letter-spacing 4%. */
	--font-display: 'Sanseriffic', 'Outfit', 'Helvetica Neue', Arial, sans-serif;
	--font-body:    'Open Sans', system-ui, -apple-system, sans-serif;

	/* H1 spec : 48px / line-height 100% / letter-spacing 4% / centré */
	--h1-size:        clamp(2rem, 1.4rem + 2.6vw, 3rem);  /* 32px mobile → 48px desktop */
	--h1-lh:          1;
	--h1-tracking:    0.04em;

	/* H2 spec : 28px / line-height 100% / letter-spacing 4% / centré */
	--h2-size:        clamp(1.4rem, 1.1rem + 1.4vw, 1.75rem); /* ~22px → 28px */
	--h3-size:        clamp(1.15rem, 1rem + 0.7vw, 1.4rem);

	/* Body : 18px / line-height confortable pour la lecture */
	--body-size:      18px;
	--body-lh:        1.55;

	/* Espacements modulaires (4px scale) */
	--sp-1:  4px;
	--sp-2:  8px;
	--sp-3:  12px;
	--sp-4:  16px;
	--sp-5:  24px;
	--sp-6:  32px;
	--sp-7:  48px;
	--sp-8:  64px;
	--sp-9:  96px;

	/* Rayons */
	--r-card:    32px;
	--r-card-sm: 18px;
	--r-pill:    999px;
	--r-input:   10px;

	/* Voile sombre cards : opacité 60% + blur 6px */
	--c-veil:        rgba(0, 0, 0, 0.6);
	--c-veil-strong: rgba(0, 0, 0, 0.78);
	--veil-blur:     blur(6px);

	/* Ombres */
	--shadow-card: 0 18px 48px -16px rgba(0, 0, 0, 0.55);
	--shadow-cta:  0 8px 20px -6px rgba(64, 128, 32, 0.6);

	/* Container — 1280px sur la home (Figma : 620 + 40 + 620 = 1280) */
	--wrap-max: 1280px;
	--wrap-pad: clamp(16px, 4vw, 32px);

	/* Header — englobe un logo de 110px + padding (logo dépasse la pill nav) */
	--header-h: 150px;
}
@media (max-width: 880px) {
	:root { --header-h: 100px; }
}

/* -------------------------------------------------------------------------
   2) Reset / base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--body-size);
	line-height: var(--body-lh);
	color: var(--c-creme);
	/* Couleur de secours : le ::before (fond photo) couvre toute la page ; ce vert n'apparaît
	   que si l'image ne charge pas. */
	background: var(--c-vert-deep);
	min-height: 100vh;
	overflow-x: hidden;
	/* Sticky footer : main pousse le footer en bas si contenu court */
	display: flex;
	flex-direction: column;
	/* relative pour que body::before (absolute) soit calé sur body et scrolle avec lui */
	position: relative;
}
.trf-main {
	flex: 1 0 auto;
	/* Plus de padding-top : en desktop ET en mobile, le header est en static
	   et prend sa propre place dans le flux → pas besoin de compenser. */
}
.trf-footer { flex-shrink: 0; }

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color 0.2s ease, opacity 0.2s ease; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4, h5 {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 1.15;
	margin: 0 0 var(--sp-4);
	letter-spacing: var(--h1-tracking);
}
h1 { font-size: var(--h1-size); line-height: var(--h1-lh); text-align: center; font-weight: 400; }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); }

p { margin: 0 0 var(--sp-4); }

.trf-skip {
	position: absolute; top: -100px; left: 0;
	background: var(--c-vert); color: #fff; padding: 12px 20px; z-index: 9999;
}
.trf-skip:focus { top: 0; }

.screen-reader-text {
	position: absolute !important; clip: rect(1px, 1px, 1px, 1px);
	width: 1px; height: 1px; overflow: hidden;
}

/* -------------------------------------------------------------------------
   3) Fond herbe global
   ------------------------------------------------------------------------- */
body::before {
	--bg-img: url('../img/bg-herbe.jpg');
	content: '';
	/* fixed + inset : le fond est calé sur l'écran, pas sur la hauteur de page.
	   Le cover recadre donc l'image de façon identique quelle que soit la page (dont la
	   hauteur totale varie, surtout en mobile où le contenu s'empile) → plus de fond qui
	   "change" d'une page à l'autre. Même référence que le voile body::after ci-dessous.
	   inset:0 (pas de 100vh / -webkit-fill-available) : évite le piège des barres d'URL mobiles. */
	position: fixed;
	inset: 0;
	z-index: -2;
	background-image: var(--bg-img);
	background-size: cover;            /* remplit la zone 100vh sans laisser de vide */
	background-position: top center;
	background-repeat: no-repeat;
}
/* Home : fond dédié (cf. body_class 'is-home' ajoutée dans theme-setup.php) */
body.is-home::before {
	--bg-img: url('../img/bg-home.jpg');
}
/* Vignette horizontale : on assombrit UNIQUEMENT les bords au-delà des 1440px
   centrés. La zone centrale de l'image (= les 1440px de la maquette) reste clean,
   pas d'opacité par-dessus. Sur écran ≤ 1440px, les positions calculées sont ≤ 0
   donc le gradient est entièrement transparent (aucun assombrissement). */
body::after {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to right,
		rgba(10, 18, 8, 0.7) 0,
		rgba(10, 18, 8, 0)  calc(50vw - 720px),
		rgba(10, 18, 8, 0)  calc(50vw + 720px),
		rgba(10, 18, 8, 0.7) 100%
	);
	pointer-events: none;
}

/* -------------------------------------------------------------------------
   4) Container / layout helpers
   ------------------------------------------------------------------------- */
.trf-wrap {
	max-width: var(--wrap-max);
	margin: 0 auto;
	padding-left: var(--wrap-pad);
	padding-right: var(--wrap-pad);
}


/* On utilise padding-top/bottom (pas le shorthand) pour ne pas écraser
   le padding-left/right de .trf-wrap quand les deux classes sont combinées
   (cf. page-carte.php : <section class="trf-wrap trf-section">). */
.trf-section {
	padding-top: var(--sp-7);
	padding-bottom: var(--sp-7);
}
@media (min-width: 768px) {
	.trf-section {
		padding-top: var(--sp-8);
		padding-bottom: var(--sp-8);
	}
}

/* -------------------------------------------------------------------------
   5) Header — ISO maquette Frame 293 : logo standalone à gauche,
      pill noire (nav + CTA) à droite, fond #000000CC + blur 12 + radius 32.
   ------------------------------------------------------------------------- */
.trf-header {
	/* Desktop : header dans le flux normal, descend hors écran quand on scrolle.
	   Le mobile l'override en fixed (cf. plus bas) pour garder le CTA Réservation accessible. */
	position: static;
	padding-top: 16px;
	z-index: 100;
}
.trf-header__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 var(--wrap-pad);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
}
.trf-logo {
	display: block;
	flex-shrink: 0;
	pointer-events: auto;
	position: relative;
	isolation: isolate; /* contexte propre : le voile ::before reste derrière l'image, pas derrière le reste du site */
}
/* Voile sombre rond centré sur le logo. Garantit la lisibilité du logo
   quand on scroll sur du contenu clair derrière. */
.trf-logo::before {
	content: '';
	position: absolute;
	top: -70px;
	left: -70px;
	right: -70px;
	bottom: -70px;
	background: radial-gradient(
		circle closest-side at center,
		rgba(0, 0, 0, 0.85) 0%,
		rgba(0, 0, 0, 0.60) 25%,
		rgba(0, 0, 0, 0.30) 50%,
		rgba(0, 0, 0, 0)    100%
	);
	pointer-events: none;
	z-index: -1;
}
.trf-logo img {
	width: 180px;
	height: auto;
	max-height: 110px;
	object-fit: contain;
	filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45));
	position: relative; /* assure que l'img reste au-dessus du voile dans le contexte d'isolation */
}
@media (max-width: 880px) {
	.trf-logo::before {
		top: -60px;
		left: -50px;
		right: -50px;
		bottom: -60px;
		/* ellipse au lieu de circle → le fondu s'adapte au ratio de la box
		   (le logo + l'inset font une box plus large que haute, donc l'ellipse
		   évite le cut net en haut/bas que produisait un cercle parfait). */
		background: radial-gradient(
			ellipse at center,
			rgba(0, 0, 0, 0.75) 0%,
			rgba(0, 0, 0, 0.45) 35%,
			rgba(0, 0, 0, 0)    78%
		);
	}
}
/* Pill noire qui contient les liens ET le CTA Réservation.
   Le CTA est collé à droite (padding-right: 0) et a la même hauteur que la pill
   (align-items: stretch) : son arrondi droit FERME visuellement la pill,
   pas d'arrondi noir entre "CONTACT" et le CTA. */
.trf-nav {
	display: flex;
	align-items: stretch;
	gap: 40px; /* 40px entre liens et CTA (et entre toggle/list/CTA en théorie) */
	background: var(--c-veil);
	backdrop-filter: var(--veil-blur);
	-webkit-backdrop-filter: var(--veil-blur);
	border-radius: 999px;
	padding: 0 0 0 32px; /* 32 gauche pour aérer les liens, 0 partout ailleurs */
	pointer-events: auto;
	box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.45);
}
/* Spec Figma : 40px entre chaque lien sur desktop, dégradé pour les écrans étroits */
.trf-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(8px, 1.5vw, 40px);
}
/* Spec Figma : Open Sans 400 / 18px / line-height 100% / letter-spacing 0% / uppercase
   Padding 12/24 + radius 40 pour matcher la zone cliquable des CTA. */
.trf-nav__list a {
	display: inline-block;
	color: var(--c-blanc);
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	padding: 12px 24px;
	border-radius: 40px;
	position: relative;
	transition: color 0.3s ease;
}
/* Underline jaune calé sur la zone du texte (entre les paddings), pas sur tout le bouton */
.trf-nav__list a::after {
	content: '';
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 8px;
	height: 2px;
	background: var(--c-jaune);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.3s ease;
}
.trf-nav__list a:hover::after,
.trf-nav__list .current-menu-item a::after,
.trf-nav__list .current_page_item a::after { transform: scaleX(1); }
.trf-nav__list a:hover,
.trf-nav__list .current-menu-item a,
.trf-nav__list .current_page_item a { color: var(--c-jaune); }

.trf-nav__toggle {
	display: none;
	background: transparent; border: none; padding: 8px;
	color: var(--c-blanc);
}
.trf-burger,
.trf-burger::before,
.trf-burger::after {
	content: '';
	display: block;
	width: 24px; height: 2px;
	background: currentColor;
	transition: transform 0.3s ease, opacity 0.3s ease;
}
.trf-burger::before { transform: translateY(-7px); }
.trf-burger::after  { transform: translateY(5px); }

/* Mobile : on casse la pill desktop.
   Layout header = [logo gauche] [CTA Réservation centré absolu] [burger droite].
   Le CTA reste visible en permanence (hors du drawer).
   Le drawer du menu = plein écran, voile noir fort + blur, liens centrés.
   Header reste cliquable au-dessus du drawer (z-index relatif au contexte .trf-header).
*/
@media (max-width: 880px) {
	/* Header reste en static (cf. règle desktop) : descend hors écran au scroll
	   comme demandé. On garde juste les overrides spécifiques au layout mobile (burger + drawer). */
	.trf-header__inner { position: relative; gap: var(--sp-3); }

	.trf-logo {
		position: relative;
		z-index: 2;
	}
	.trf-logo img { width: 140px; max-height: 90px; }

	/* La nav perd la pill desktop. Ses enfants (CTA + burger) sont alignés
	   à droite et collés l'un à l'autre via flex + gap. */
	.trf-nav {
		background: transparent;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		box-shadow: none;
		border-radius: 0;
		padding: 0;
		display: flex;
		align-items: center;
		gap: var(--sp-3);
	}

	/* CTA Réservation : dans le flux normal, collé au burger côté droit. */
	.trf-nav .trf-btn--reservation {
		display: inline-flex;
		position: static;
		transform: none;
		padding: 9px 20px;
		font-size: 14px;
		letter-spacing: 0;
		box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.5);
		order: 1;
	}
	.trf-nav .trf-btn--reservation:hover,
	.trf-nav .trf-btn--reservation:focus-visible {
		transform: none;
		background: transparent;
		border-color: var(--c-vert);
		color: var(--c-blanc);
	}

	/* Burger : bouton rond autonome, charte dark glass */
	.trf-nav__toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		border-radius: 999px;
		background: var(--c-veil);
		backdrop-filter: var(--veil-blur);
		-webkit-backdrop-filter: var(--veil-blur);
		border: 1px solid var(--c-card-border);
		color: var(--c-blanc);
		box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
		position: relative;
		z-index: 2;
		order: 2;
	}

	/* Drawer = mini-card flottante en haut à droite, juste sous le CTA/burger.
	   Décalé vers le bas (+28px) pour ne pas chevaucher la ligne header. */
	.trf-nav__list {
		position: fixed;
		top: calc(var(--header-h) + 28px);
		right: var(--wrap-pad);
		left: auto;
		bottom: auto;
		width: min(220px, calc(100vw - var(--wrap-pad) * 2));
		background: var(--c-veil-strong);
		backdrop-filter: blur(16px);
		-webkit-backdrop-filter: blur(16px);
		border: 1px solid var(--c-card-border);
		border-radius: var(--r-card-sm);
		box-shadow: 0 18px 48px -14px rgba(0, 0, 0, 0.6);
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: var(--sp-3) var(--sp-5);
		transform: translateY(-12px) scale(0.96);
		transform-origin: top right;
		opacity: 0;
		visibility: hidden;
		transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
		            opacity 0.2s ease,
		            visibility 0.2s ease;
		z-index: 1;
	}
	.trf-nav.is-open .trf-nav__list {
		transform: translateY(0) scale(1);
		opacity: 1;
		visibility: visible;
	}
	.trf-nav__list li + li {
		border-top: 1px solid rgba(255, 255, 255, 0.07);
	}
	.trf-nav__list a {
		display: block;
		font-family: var(--font-body);
		font-size: 1rem;
		font-weight: 500;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		text-align: right;
		padding: 14px 0;
		color: var(--c-blanc);
	}
	.trf-nav__list a::after {
		left: auto;
		right: 0;
		bottom: 6px;
		background: var(--c-jaune);
	}
	.trf-nav__list a:hover::after,
	.trf-nav__list .current-menu-item a::after,
	.trf-nav__list .current_page_item a::after {
		width: 100%;
		left: auto;
		right: 0;
	}

	/* Animation burger → croix */
	.trf-nav.is-open .trf-burger { transform: rotate(45deg); }
	.trf-nav.is-open .trf-burger::before { transform: rotate(-90deg) translateX(0); }
	.trf-nav.is-open .trf-burger::after { opacity: 0; }
}

/* -------------------------------------------------------------------------
   6) Boutons — HOVER : bg transparent + border + text de la couleur du btn
   ------------------------------------------------------------------------- */
.trf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	padding: 12px 28px;
	border-radius: var(--r-pill);
	font-family: var(--font-body);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border: 2px solid transparent;
	cursor: pointer;
	transition: all 0.3s ease;
	background: var(--c-vert);
	color: var(--c-blanc);
	white-space: nowrap;
}
.trf-btn:hover, .trf-btn:focus-visible {
	background: transparent;
	border-color: var(--c-vert);
	color: var(--c-vert);
}
.trf-btn--orange { background: var(--c-orange); }
.trf-btn--orange:hover, .trf-btn--orange:focus-visible { border-color: var(--c-orange); color: var(--c-orange); background: transparent; }
.trf-btn--jaune  { background: var(--c-jaune); color: var(--c-vert-deep); }
.trf-btn--jaune:hover, .trf-btn--jaune:focus-visible { border-color: var(--c-jaune); color: var(--c-jaune); background: transparent; }
.trf-btn--rouge  { background: var(--c-rouge); }
.trf-btn--rouge:hover, .trf-btn--rouge:focus-visible { border-color: var(--c-rouge); color: var(--c-rouge); background: transparent; }

/* Spec Figma : 18px / line-height 100% / padding 12/24 / radius 40 / Open Sans 400 uppercase */
.trf-btn--reservation {
	background: var(--c-vert);
	color: var(--c-blanc);
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	padding: 12px 24px;
	border-radius: 40px;
}
.trf-btn--reservation:hover, .trf-btn--reservation:focus-visible {
	background: transparent;
	border-color: var(--c-vert);
	color: var(--c-vert);
	transform: none; /* override du translateY(-1px) global : le CTA réservation reste immobile en hover */
}

.trf-btn--outline {
	background: transparent;
	border-color: var(--c-blanc);
	color: var(--c-blanc);
}
.trf-btn--outline:hover, .trf-btn--outline:focus-visible {
	background: var(--c-blanc);
	color: var(--c-vert-deep);
	border-color: var(--c-blanc);
}

/* -------------------------------------------------------------------------
   7) Cards — l'élément clé du design
   ------------------------------------------------------------------------- */
.trf-card {
	background: var(--c-veil);
	backdrop-filter: var(--veil-blur);
	-webkit-backdrop-filter: var(--veil-blur);
	border: 1px solid var(--c-card-border);
	border-radius: var(--r-card);
	padding: var(--sp-6);
	box-shadow: var(--shadow-card);
}
.trf-card--light {
	background: var(--c-card-light);
	color: var(--c-vert-deep);
}
.trf-card--green {
	background: linear-gradient(135deg, var(--c-vert) 0%, var(--c-vert-dark) 100%);
	color: var(--c-blanc);
}
.trf-card--orange {
	background: linear-gradient(135deg, var(--c-orange) 0%, #a25200 100%);
	color: var(--c-blanc);
}

/* -------------------------------------------------------------------------
   8) Home
   ------------------------------------------------------------------------- */
.home-hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(24px, 3vw, 40px);
	padding: 80px 0; /* 80px sous le nav avant la card H1 */
}
@media (min-width: 900px) {
	.home-hero {
		/* 2 cards × 620px + 40px de gap = 1280px (spec Figma) */
		grid-template-columns: 1fr 1fr;
		gap: 40px;
		padding: 80px 0;
	}
}

.home-intro {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
}
.home-intro h1 {
	color: var(--c-blanc);
	margin-bottom: var(--sp-4);
}
.home-intro__bloc { text-align: center; }
/* Spec Figma : Sanseriffic 28px / line-height 100% / letter-spacing 4% / regular */
.home-intro__bloc h2 {
	font-family: var(--font-display);
	font-size: var(--h2-size);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.04em;
	margin-bottom: var(--sp-4);
}
.home-intro__bloc p {
	color: rgba(244, 240, 230, 0.88);
	font-size: var(--body-size);
	line-height: 1.1; /* spec Figma : 110% — serré, accent typographique */
	margin-bottom: var(--sp-3);
}
.home-intro__bloc p:last-child { margin-bottom: 0; }
/* Liens dans les paragraphes d'intro : soulignés pour être visibles (le strong autour
   les rend gras, mais sans underline ils sont indiscernables du reste du texte). */
.home-intro__bloc p a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}
.home-intro__bloc p a:hover,
.home-intro__bloc p a:focus-visible {
	color: var(--c-jaune);
}

/* Galerie : panneau orange englobant, rounds de 4 photos en pattern miroir A/B.
   Spec Figma (1440px viewport) : 40px de padding panneau + 40px de gap partout.
   On utilise clamp pour le responsive : ~16px mobile → 40px desktop.
   Round A (impair) : 2 carrés (haut-gauche) + 1 wide (bas-gauche) + 1 tall (droite)
   Round B (pair)   : 1 tall (gauche) + 2 carrés (haut-droite) + 1 wide (bas-droite) */
.home-gallery {
	display: flex;
	flex-direction: column;
	gap: clamp(16px, 3vw, 40px);
	/* Spec Figma : orange clair 66% d'opacité (#FF953AA8) — le fond herbe transparaît par-dessous */
	background: #FF953AA8;
	padding: clamp(16px, 3vw, 40px);
	border-radius: var(--r-card);
	box-shadow: var(--shadow-card);
	/* La galerie est un container query : son layout dépend de sa propre largeur,
	   pas du viewport. Utile car en desktop elle occupe 1 col du hero (~600px),
	   en mobile elle occupe toute la largeur — on veut basculer selon CETTE taille. */
	container-type: inline-size;
}
.home-gallery__round {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: clamp(16px, 3vw, 40px);
	aspect-ratio: 3 / 2;
}
.home-gallery__round--a {
	grid-template-areas:
		"a b c"
		"d d c";
}
.home-gallery__round--b {
	grid-template-areas:
		"c a b"
		"c d d";
}
.home-gallery__item {
	position: relative;
	overflow: hidden;
	border-radius: var(--r-card-sm);
	cursor: zoom-in;
	background: rgba(0, 0, 0, 0.3);
	border: none;
	padding: 0;
	min-height: 0;
	min-width: 0;
}
.home-gallery__round > .home-gallery__item:nth-child(1) { grid-area: a; }
.home-gallery__round > .home-gallery__item:nth-child(2) { grid-area: b; }
.home-gallery__round > .home-gallery__item:nth-child(3) { grid-area: c; } /* tall */
.home-gallery__round > .home-gallery__item:nth-child(4) { grid-area: d; } /* wide */

/* Bloc extra : items restants (1 à 3) après les rounds en pattern, affichés
   en row de carrés simples sur leur propre ligne en bas de la galerie. */
.home-gallery__extra {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(16px, 3vw, 40px);
}
.home-gallery__extra .home-gallery__item {
	aspect-ratio: 1 / 1;
}

.home-gallery__item img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-gallery__item:hover img,
.home-gallery__item:focus-visible img { transform: scale(1.06); }
.home-gallery__item:focus-visible { outline: 3px solid var(--c-jaune); outline-offset: 3px; }

/* Layout "étroit" : quand la galerie elle-même est <= 500px de large, on bascule
   en pattern 2 cols × 3 rows par block. Pas de media query : on regarde la largeur
   du container (.home-gallery), donc ça marche en mobile ET sur tablette en
   desktop avant que le hero ne passe en 2 cols.
   ⚙ Ajuster le seuil ci-dessous (500px) si la bascule arrive trop tôt ou trop tard. */
@container (max-width: 440px) {
	.home-gallery__round {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr;
		grid-template-areas:
			"a c"
			"b c"
			"d d";
		aspect-ratio: 2 / 3;
		gap: clamp(12px, 3vw, 20px);
	}
}

/* -------------------------------------------------------------------------
   9) Lightbox
   ------------------------------------------------------------------------- */
.trf-lightbox {
	position: fixed; inset: 0; z-index: 200;
	background: rgba(0, 0, 0, 0.94);
	display: flex; align-items: center; justify-content: center;
	padding: var(--sp-5);
	opacity: 0; visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}
.trf-lightbox.is-open { opacity: 1; visibility: visible; }
.trf-lightbox img {
	max-width: 92vw; max-height: 88vh;
	border-radius: 12px;
	box-shadow: 0 30px 80px -10px rgba(0, 0, 0, 0.7);
}
.trf-lightbox__close {
	position: absolute; top: 24px; right: 24px;
	width: 48px; height: 48px;
	border: 2px solid var(--c-blanc);
	background: transparent;
	color: var(--c-blanc);
	border-radius: 50%;
	font-size: 24px;
	display: flex; align-items: center; justify-content: center;
	transition: background 0.2s ease, color 0.2s ease;
}
.trf-lightbox__close:hover, .trf-lightbox__close:focus-visible {
	background: var(--c-blanc); color: var(--c-noir);
}
.trf-lightbox__nav {
	position: absolute;
	top: 50%; transform: translateY(-50%);
	width: 52px; height: 52px;
	background: rgba(255, 255, 255, 0.1);
	border: 2px solid rgba(255, 255, 255, 0.4);
	color: var(--c-blanc);
	border-radius: 50%;
	font-size: 24px;
	display: flex; align-items: center; justify-content: center;
	transition: all 0.2s ease;
}
.trf-lightbox__nav--prev { left: 24px; }
.trf-lightbox__nav--next { right: 24px; }
.trf-lightbox__nav:hover { background: var(--c-blanc); color: var(--c-noir); }

/* -------------------------------------------------------------------------
   10) Page Menus — card noire transparente avec bandeau coloré en haut.
   ------------------------------------------------------------------------- */
.menus-header {
	text-align: center;
	padding: 80px 0 var(--sp-6); /* 80px sous le nav avant le H1 "Les menus" */
	/* Contient le halo p::before (bleed -240px latéral) : sinon overflow horizontal
	   sur mobile → scroll/déplacement parasite. clip ne crée pas de conteneur de scroll. */
	overflow-x: clip;
}
.menus-header p {
	max-width: 720px;
	margin: 0 auto;
	color: rgba(244, 240, 230, 0.9);
	font-size: 0.95rem;
}

/* Halo radial sombre derrière les paragraphes d'intro (pages Menus + Carte) :
   même effet que le voile du logo header, version ellipse pour épouser le
   format rectangulaire du paragraphe. Transparence pile aux bords → pas de cut. */
.menus-header p,
.carte-header p {
	position: relative;
	isolation: isolate;
}
.menus-header p::before,
.carte-header p::before {
	content: '';
	position: absolute;
	top: -60px;
	left: -240px;
	right: -240px;
	bottom: -60px;
	background: radial-gradient(
		ellipse closest-side at center,
		rgba(0, 0, 0, 0.85) 0%,
		rgba(0, 0, 0, 0.60) 25%,
		rgba(0, 0, 0, 0.30) 50%,
		rgba(0, 0, 0, 0)    100%
	);
	pointer-events: none;
	z-index: -1;
}

/* Menu spécial (fête des mères, etc) — fond BLANC + décor magnolia en haut.
   Titre + prix sur une seule ligne centrée séparés par une barre. Sections en
   colonnes (entrées / plats / fromages / desserts) avec "ou" auto entre items. */
.menu-special {
	position: relative;
	border-radius: var(--r-card);
	overflow: hidden;
	margin-bottom: var(--sp-7);
	color: var(--c-noir);
	background: var(--c-blanc);
	box-shadow: var(--shadow-card);
}
.menu-special__bg {
	position: absolute; top: 0; left: 0; right: 0;
	/* Remplit toute la hauteur de la card. height:100% standard partout,
	   -webkit-fill-available pris en compte par Chrome/Safari/Edge (= même résultat). */
	height: 100%;
	height: -webkit-fill-available;
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	pointer-events: none;
	opacity: 0.95;
}
.menu-special__inner {
	position: relative;
	padding: 90px var(--sp-5) var(--sp-5);
}
@media (min-width: 800px) {
	.menu-special__inner {
		padding: 110px var(--sp-6) var(--sp-6);
	}
}

/* Bandeau d'entête (titre + prix sur une ligne + subtitle dessous) */
.menu-special__head {
	text-align: center;
	margin-bottom: var(--sp-5);
}
.menu-special__title-line {
	font-family: var(--font-display);
	font-size: clamp(2rem, 1.2rem + 2.5vw, 3rem); /* ~48px desktop */
	font-weight: 400;
	color: var(--c-noir);
	line-height: 1;
	margin: 0 0 var(--sp-2);
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.5em;
	flex-wrap: wrap;
}
.menu-special__sep {
	color: var(--c-noir);
	font-weight: 300;
	opacity: 0.6;
	display: inline-block;
	transform: scaleX(0.5);
	transform-origin: center;
}
.menu-special__subtitle {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.3;
	color: var(--c-noir);
	margin: 0;
}

/* Grille des sections : 3 colonnes en desktop — entrées | plats | (fromages + desserts).
   La 3e colonne contient deux sections empilées. */
.menu-special__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-5);
}
@media (min-width: 800px) {
	.menu-special__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--sp-5);
	}
}
.menu-special__col {
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
}
.menu-special__section {
	text-align: center;
}
.menu-special__section h3 {
	font-family: var(--font-display); /* aligné sur les titres des autres menus (Sanseriffic/Outfit) */
	font-size: 24px;
	font-weight: 400;
	font-style: normal;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	color: var(--c-accent, var(--c-orange));
	margin: 0 0 var(--sp-3);
}
.menu-special__section p {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: 0;
	color: var(--c-noir);
	margin: 0;
}
.menu-special__or {
	display: block;
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1;
	color: var(--c-accent, var(--c-orange));
	margin: var(--sp-2) 0;
}

/* CTA : texte blanc de base, hover passe en couleur accent sur fond transparent */
.menu-special__cta {
	text-align: center;
	margin-top: var(--sp-5);
}
.menu-special__cta .trf-btn {
	background: var(--c-special, var(--c-rouge));
	color: var(--c-blanc);
	border-color: transparent;
}
.menu-special__cta .trf-btn:hover,
.menu-special__cta .trf-btn:focus-visible {
	background: transparent;
	border-color: var(--c-special, var(--c-rouge));
	color: var(--c-special, var(--c-rouge));
}

/* Grille des 3 menus (du jour / Terroir / Signature) — gap 40px iso home.
   margin-bottom: 80px → évite que la dernière card se colle au footer. */
.menus-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(24px, 3vw, 40px);
	margin-bottom: 80px;
}
@media (min-width: 800px) {
	.menus-grid { grid-template-columns: repeat(3, 1fr); gap: 40px; align-items: start; }
}

/* Une card menu : bandeau coloré + corps sur voile noir transparent. */
.menu-card {
	border-radius: var(--r-card);
	overflow: hidden;
	background: var(--c-veil);
	backdrop-filter: var(--veil-blur);
	-webkit-backdrop-filter: var(--veil-blur);
	color: var(--c-blanc);
	display: flex;
	flex-direction: column;
	box-shadow: var(--shadow-card);
}
.menu-card__banner {
	position: relative;
	padding: var(--sp-5) var(--sp-5) var(--sp-7); /* +16px en bas → air entre la note et la vague */
	text-align: center;
	/* Hauteur mini du bandeau coloré ; il s'étire au-delà si le contenu (titre + note)
	   est plus haut — typiquement les colonnes étroites (~850px) où le titre et la note
	   passent sur plusieurs lignes. */
	min-height: 150px;
	/* Le PNG (coins arrondis en haut, vague en bas) épouse TOUTE la box via 100% 100% :
	   il reste donc collé au coin HAUT de la card et s'étire avec le contenu, la vague
	   toujours calée sur le bord bas.
	   En "100% auto" (hauteur liée à la largeur), une colonne étroite rendait l'image
	   plus courte que le contenu → un vide sombre apparaissait en haut, le bandeau se
	   "décollait" du coin haut. Pas de background-color : la zone transparente sous la
	   vague doit laisser voir le corps sombre de la card. */
	background-color: transparent;
	background-image: var(--bg-banner, none);
	background-size: 100% 100%;
	background-position: top center;
	background-repeat: no-repeat;
}
.menu-card__price {
	position: absolute;
	top: var(--sp-4);
	right: var(--sp-5);
	font-family: var(--font-display);
	font-size: 1.35rem;
	font-weight: 500;
	color: var(--c-noir); /* prix en noir sur le bandeau, iso Frame 227 */
}
.menu-card__title {
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 1.3rem + 0.9vw, 2.1rem);
	font-weight: 400;
	margin: 0 0 var(--sp-2);
	color: var(--c-blanc);
	letter-spacing: 0.01em;
}
.menu-card__note {
	font-style: italic;
	font-size: 0.85rem;
	margin: 0;
	color: var(--c-blanc);
	opacity: 0.92;
}
.menu-card__body {
	padding: var(--sp-5) var(--sp-5) var(--sp-6);
}
/* Liste simple (menu du jour : pas de catégories) */
.menu-card__simple {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	text-align: center;
}
.menu-card__simple li {
	font-size: 0.95rem;
	line-height: 1.5;
	padding: var(--sp-2) 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.menu-card__simple li:last-child { border-bottom: none; }

/* Groupes catégorisés (Terroir, Signature) */
.menu-card__group { margin-bottom: var(--sp-4); }
.menu-card__group:last-child { margin-bottom: 0; }
.menu-card__group h4 {
	font-family: var(--font-display);
	font-size: 1.4rem;
	font-weight: 400;
	font-style: italic;
	letter-spacing: 0;
	text-transform: none;
	color: var(--c-jaune);
	text-align: center;
	margin: 0 0 var(--sp-3);
}
.menu-card__group ul li {
	font-size: 0.88rem;
	line-height: 1.55;
	padding: var(--sp-1) 0;
	text-align: center;
}

/* Bandeau galerie Menus — card noire (.trf-card) pleine largeur, 6 photos carrées.
   6 colonnes desktop → 3 tablette → 2 mobile. Mêmes carrés que la galerie home
   (.home-gallery__extra) : gap/arrondi/zoom + lightbox via data-gallery-item.
   --top    : place par défaut (sous le texte), séparé des 3 menus.
   --bottom : sous les 3 menus quand un menu spécial occupe le haut. */
.menus-gallery {
	/* override du padding fixe de .trf-card pour matcher exactement le gap des photos
	   (= padding du conteneur de la galerie home). */
	padding: clamp(16px, 3vw, 40px);
}
.menus-gallery--top    { margin-bottom: var(--sp-7); } /* 48px : aère avant les 3 menus */
.menus-gallery--bottom { margin-bottom: 80px; }        /* espace avant le footer (iso .menus-grid) */

.menus-gallery__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: clamp(16px, 3vw, 40px);
}
.menus-gallery__item {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--r-card-sm);
	cursor: zoom-in;
	background: rgba(0, 0, 0, 0.3);
	border: none;
	padding: 0;
	min-width: 0;
}
.menus-gallery__item img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.menus-gallery__item:hover img,
.menus-gallery__item:focus-visible img { transform: scale(1.06); }
.menus-gallery__item:focus-visible { outline: 3px solid var(--c-jaune); outline-offset: 3px; }

/* Bascule responsive : 6 → 3 (tablette) → 2 (mobile). À 6 col les carrés font ~170px,
   soit la taille des carrés extra de la home ; en dessous de 900px ils deviendraient
   trop petits, d'où la bascule à 3 puis 2. */
@media (max-width: 900px) {
	.menus-gallery__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 540px) {
	.menus-gallery__grid { grid-template-columns: repeat(2, 1fr); }
}

/* -------------------------------------------------------------------------
   11) Page Carte — cards noir transparent, titres jaune italique.
   ------------------------------------------------------------------------- */
.carte-header {
	text-align: center;
	padding: 80px 0 var(--sp-6); /* 80px sous le nav avant le H1 "La carte" */
	/* Contient le halo p::before (bleed -240px latéral) : sinon overflow horizontal
	   sur mobile → scroll/déplacement parasite. clip ne crée pas de conteneur de scroll. */
	overflow-x: clip;
}
.carte-header p {
	max-width: 680px;
	margin: 0 auto;
	color: rgba(244, 240, 230, 0.9);
}
.carte-category {
	margin-bottom: var(--sp-5);
	padding: var(--sp-6) var(--sp-7);
}
@media (max-width: 700px) {
	.carte-category { padding: var(--sp-5) var(--sp-4); }
}
.carte-category h2 {
	text-align: center;
	font-family: var(--font-display);
	font-style: normal;
	font-weight: 400;
	font-size: 24px;
	line-height: 1;
	color: var(--c-cat, var(--c-jaune));
	margin-bottom: var(--sp-4);
}
.carte-list { display: flex; flex-direction: column; }
.carte-list__item {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--sp-4);
	padding: var(--sp-3) 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.carte-list__item:last-child { border-bottom: none; }
.carte-list__name {
	flex: 1;
	font-size: 0.92rem;
	color: var(--c-blanc);
	line-height: 1.5;
}
.carte-list__price {
	font-family: var(--font-display);
	color: var(--c-cat, var(--c-orange));
	font-weight: 500;
	font-size: 0.95rem;
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
   12) Page Contact — layout 12 cols, gap 40px (spec Figma 1440px) :
       row 1 : info(span 4 = 400px) | hours(span 8 = 840px)
       row 2 : form(span 8 = 840px) | side(span 4 = 400px)
   ------------------------------------------------------------------------- */
.contact-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-5);
	padding: 80px 0; /* 80px sous le nav avant la 1re card */
}
@media (min-width: 900px) {
	.contact-grid {
		grid-template-columns: repeat(12, 1fr);
		gap: 40px;
	}
	.contact-info   { grid-column: span 4; }
	.contact-hours  { grid-column: span 8; }
	.contact-form   { grid-column: span 8; }
	.contact-side   { grid-column: span 4; }
}

/* Bloc vert (infos resto) : spec Figma #408020A8 + blur 12 */
.contact-info {
	background: #408020A8;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	color: var(--c-blanc);
}
.contact-info h2 {
	font-family: var(--font-display);
	font-size: 48px;
	font-weight: 400;
	line-height: 1;
	margin-bottom: var(--sp-5);
}
.contact-info ul li {
	display: flex;
	gap: var(--sp-3);
	margin-bottom: var(--sp-4);
	font-size: 0.95rem;
}
.contact-info svg {
	flex-shrink: 0;
	margin-top: 3px;
	color: var(--c-blanc);
}

/* ===== Tableau horaires (section noire à droite) =====
   Tout en blanc, première colonne libre pour l'intitulé du service,
   icônes valide/cross en <img> 24px centrées, pill verte pour notes (mer/dim). */
.hours-title {
	font-family: var(--font-display);
	text-align: center;
	color: var(--c-blanc);
	font-size: 1.3rem;
	margin: 0 0 var(--sp-5);
}
.contact-hours {
	padding-top: 40px;     /* 40px au-dessus du titre "Jour et horaires…" */
	padding-bottom: 25px;  /* combiné au margin-top de la légende ≈ 50px d'espace sous le tableau */
}
.hours-table {
	width: 100%;
	border-collapse: collapse;
	color: var(--c-blanc);
}
.hours-table th,
.hours-table td {
	padding: 4px 6px;       /* lignes plus serrées */
	text-align: center;
	vertical-align: middle;
	color: var(--c-blanc);
}
.hours-table thead th {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	letter-spacing: 0.02em;
}
.hours-service {
	text-align: center !important;
	font-weight: 400;
	padding-right: 16px;
}
.hours-service__title {
	display: block;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 15px;
	color: var(--c-blanc);
}
.hours-service__time {
	display: block;
	font-family: var(--font-body);
	font-weight: 400;
	font-style: italic;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.85);
	margin-top: 2px;
}
.hours-icon {
	display: block;
	width: auto;
	height: 24px;
	margin: 0 auto;
}
/* Note verte (Réservé aux groupes / Uniquement l'été) — juste du texte vert, pas de pill */
.hours-pill {
	display: block;
	margin: 2px auto 0;
	color: #408020;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 16px;
	letter-spacing: 0;
	text-align: center;
}
.hours-legend {
	margin: 25px 0 0;        /* 25px sous le tableau → légende à mi-hauteur des 50px */
	font-family: var(--font-body);
	font-style: italic;
	font-weight: 400;
	font-size: 10px;
	line-height: 1;
	color: #d3d3d3;
	text-align: left;
}

/* ===== Vue mobile (alternative au tableau) =====
   Grid 3 colonnes plat : Jour | Déjeuner | Dîner. Le header (1re row) affiche les
   noms de service + horaires UNE seule fois, puis chaque jour est une row de 3 cells. */
.hours-mobile { display: none; }

@media (max-width: 700px) {
	.hours-table { display: none; }
	.hours-mobile {
		display: grid;
		grid-template-columns: auto 1fr 1fr;
		gap: 6px 12px;
		align-items: center;
	}
	/* Header (1re row) : cell vide à gauche + 2 cells service avec titre + horaire */
	.hours-mobile__corner { /* coin vide en haut à gauche */ }
	.hours-mobile__head-service {
		text-align: center;
		padding-bottom: 10px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	}
	.hours-mobile__head-title {
		display: block;
		font-family: var(--font-body);
		font-weight: 500;
		font-size: 14px;
		color: var(--c-blanc);
	}
	.hours-mobile__head-time {
		display: block;
		font-family: var(--font-body);
		font-style: italic;
		font-weight: 400;
		font-size: 11px;
		color: rgba(255, 255, 255, 0.85);
		margin-top: 2px;
	}
	/* Lignes des jours */
	.hours-mobile__name {
		font-family: var(--font-body);
		font-weight: 500;
		font-size: 15px;
		color: var(--c-blanc);
		padding: 4px 0;
	}
	.hours-mobile__service {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 32px;
		color: var(--c-blanc);
	}
}

/* Formulaire de contact */
.contact-form {
	background: var(--c-card-light);
	color: var(--c-vert-deep);
	padding-top: 40px;
}
.contact-form h2 {
	font-family: var(--font-display);
	text-align: center;
	font-size: 48px;
	font-weight: 400;
	line-height: 1;
	color: var(--c-vert); /* #408020 */
	margin-bottom: var(--sp-3);
}
.contact-form > p {
	text-align: center;
	font-size: 0.9rem;
	color: var(--c-noir);
	margin: 0 auto var(--sp-5);
	max-width: 380px; /* force le retour à la ligne au milieu de la phrase */
}
.trf-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.trf-form-grid .full { grid-column: 1 / -1; }
.trf-form input,
.trf-form select,
.trf-form textarea {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid #d4cfc0;
	border-radius: var(--r-input);
	background: #fff;
	font-family: var(--font-body);
	font-size: 0.95rem;
	color: var(--c-vert-deep);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.trf-form input:focus,
.trf-form select:focus,
.trf-form textarea:focus {
	outline: none;
	border-color: var(--c-vert);
	box-shadow: 0 0 0 3px rgba(64, 128, 32, 0.18);
}
.trf-form textarea { min-height: 170px; resize: vertical; }
.trf-form .hp { position: absolute; left: -9999px; }
.trf-form-actions { display: flex; justify-content: center; margin-top: var(--sp-5); }
.trf-form .form-status {
	margin-top: var(--sp-4);
	padding: 14px 18px;
	border-radius: var(--r-input);
	font-size: 0.95rem;
	font-weight: 600;
	text-align: center;
	background: #fff;
	border: 2px solid transparent;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}
.trf-form .form-status.is-ok { background: var(--c-noir); border-color: var(--c-noir); color: var(--c-blanc); }
.trf-form .form-status.is-error { background: var(--c-rouge); border-color: var(--c-rouge); color: var(--c-blanc); }

@media (max-width: 600px) {
	.trf-form-grid { grid-template-columns: 1fr; }
}

/* Map + Reviews stack */
.contact-side {
	display: flex; flex-direction: column;
	gap: var(--sp-5);
}
.contact-map {
	height: 365px;             /* spec maquette */
	border-radius: var(--r-card); /* 32px */
	overflow: hidden;
	box-shadow: var(--shadow-card);
	position: relative;
}
.contact-map__iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.reviews-card {
	background: var(--c-blanc);
	color: var(--c-vert-deep);
	text-align: center;
	padding: var(--sp-5);
	border-radius: var(--r-card); /* 32px iso autres cards */
	box-shadow: var(--shadow-card);
	overflow: hidden; /* contient le widget grw au cas où il dépasse */
}
.reviews-card__rating {
	font-family: var(--font-display);
	font-size: 1.8rem;
	font-weight: 500;
	color: var(--c-vert-deep);
}
.reviews-card__stars { color: var(--c-jaune); font-size: 1.2rem; margin: var(--sp-2) 0; }
.reviews-card__count {
	font-size: 0.85rem;
	color: #666;
}
.reviews-card__count a { color: var(--c-vert); text-decoration: underline; }
.reviews-card__google {
	margin-top: var(--sp-3);
	display: inline-flex;
	gap: var(--sp-2);
	align-items: center;
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   13) Footer — ISO maquette : fond vert plein, 5 zones alignées
   ------------------------------------------------------------------------- */
.trf-footer {
	background: var(--c-vert);
	color: var(--c-blanc);
	padding: var(--sp-6) 0;
	position: relative;
}
.trf-footer__inner {
	max-width: var(--wrap-max);
	margin: 0 auto;
	padding: 0 var(--wrap-pad);
	/* Mobile : grid 2 cols, tout centré horizontalement (rien collé aux bords).
	   Row 1 = logo (centré, full width)
	   Row 2 = contact (gauche) + menu nav (droite), chacun centré dans sa col
	   Row 3 = tagline (centré, full width)
	   Row 4 = CTA (centré, taille auto, pas étiré). */
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		'logo    logo'
		'contact nav'
		'tagline tagline'
		'cta     cta';
	gap: var(--sp-5);
	justify-items: center;
	align-items: center;
	text-align: center;
}
.trf-footer__logo    { grid-area: logo; }
.trf-footer__contact { grid-area: contact; align-items: center; }
.trf-footer__nav     { grid-area: nav; align-items: center; }
.trf-footer__tagline { grid-area: tagline; }
.trf-footer .trf-btn--reservation-outline { grid-area: cta; }

@media (min-width: 900px) {
	.trf-footer__inner {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--sp-5);
		text-align: left;
		justify-items: initial;
		/* En desktop, les grid-area sont ignorés (parent en flex). */
	}
	.trf-footer__contact { align-items: flex-start; }
	.trf-footer__nav     { align-items: flex-start; }
}
.trf-footer__logo {
	flex-shrink: 0;
}
.trf-footer__logo img {
	width: 180px;
	height: auto;
	max-height: 110px;
	object-fit: contain;
}
.trf-footer__tagline {
	font-size: 0.85rem;
	max-width: 220px;
	margin: 0;
	line-height: 1.55;
	opacity: 0.95;
	text-align: center;
}
.trf-footer__contact {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}
.trf-footer__contact li {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-2);
	font-size: 0.85rem;
	line-height: 1.4;
}
.trf-footer__icon { flex-shrink: 0; margin-top: 3px; }
.trf-footer__contact a { transition: color 0.2s ease; }
.trf-footer__contact a:hover { color: var(--c-jaune); }

.trf-footer__menu {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 500;
}
.trf-footer__menu a {
	position: relative;
	padding: 2px 0;
	display: inline-block;
}
.trf-footer__menu a::before {
	content: '';
	position: absolute;
	left: 0; bottom: 0;
	width: 0; height: 1px;
	background: var(--c-jaune);
	transition: width 0.3s ease;
}
.trf-footer__menu a:hover { color: var(--c-jaune); }
.trf-footer__menu a:hover::before { width: 100%; }

.trf-btn--reservation-outline {
	background: var(--c-blanc);
	border: 2px solid var(--c-blanc);
	color: var(--c-vert);
	padding: 10px 24px;
}
.trf-btn--reservation-outline:hover,
.trf-btn--reservation-outline:focus-visible {
	background: transparent;
	color: var(--c-blanc);
	border-color: var(--c-blanc);
}

/* -------------------------------------------------------------------------
   14) Modal Réservation
   ------------------------------------------------------------------------- */
.trf-modal {
	position: fixed; inset: 0; z-index: 300;
	background: rgba(0, 0, 0, 0.75);
	display: flex; align-items: center; justify-content: center;
	padding: var(--sp-4);
	opacity: 0; visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}
.trf-modal.is-open { opacity: 1; visibility: visible; }
.trf-modal__inner {
	background: linear-gradient(135deg, var(--c-vert) 0%, var(--c-vert-dark) 100%);
	color: var(--c-blanc);
	border-radius: var(--r-card);
	padding: var(--sp-6);
	max-width: 580px; width: 100%;
	max-height: 92vh; overflow-y: auto;
	position: relative;
	box-shadow: 0 30px 80px -10px rgba(0, 0, 0, 0.7);
	transform: translateY(20px);
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.trf-modal.is-open .trf-modal__inner { transform: translateY(0); }
.trf-modal__close {
	position: absolute;
	top: 16px; right: 16px;
	width: 36px; height: 36px;
	background: transparent;
	border: 2px solid rgba(255, 255, 255, 0.5);
	color: var(--c-blanc);
	border-radius: 50%;
	font-size: 20px;
	display: flex; align-items: center; justify-content: center;
}
.trf-modal__close:hover { background: var(--c-blanc); color: var(--c-vert-deep); }
.trf-modal h2 {
	font-family: var(--font-display);
	font-size: 2rem;
	text-align: center;
	margin-bottom: var(--sp-3);
}
.trf-modal__intro {
	text-align: center;
	font-size: 1.05rem;
	margin-bottom: var(--sp-5);
	opacity: 0.92;
}
.trf-modal input,
.trf-modal select,
.trf-modal textarea {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: var(--r-input);
	background: rgba(255, 255, 255, 0.92);
	color: var(--c-vert-deep);
	font-family: var(--font-body);
	font-size: 1.05rem;
}
/* iOS Safari ajoute un min-width intrinsèque (~format YYYY-MM-DD + icône
   calendrier) sur input[type="date"] qui ignore le width:100% → déborde du
   parent. Le reset d'appearance + min-width:0 le force à respecter la grid. */
.trf-modal input[type="date"] {
	-webkit-appearance: none;
	appearance: none;
	min-width: 0;
}
.trf-modal input:focus,
.trf-modal select:focus,
.trf-modal textarea:focus {
	outline: none;
	background: var(--c-blanc);
	box-shadow: 0 0 0 3px rgba(255, 174, 24, 0.4);
}
.trf-modal textarea { min-height: 100px; }
.trf-modal .form-status { font-size: 1.05rem; }
.trf-modal__submit { display: flex; justify-content: center; margin-top: var(--sp-4); }
.trf-modal__submit .trf-btn { background: var(--c-orange); font-size: 1.1rem; }
.trf-modal__submit .trf-btn:hover {
	background: transparent;
	border-color: var(--c-orange);
	color: var(--c-orange);
}

/* -------------------------------------------------------------------------
   15) Reduced motion
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* -------------------------------------------------------------------------
   16) Print
   ------------------------------------------------------------------------- */
@media print {
	.trf-header, .trf-footer, .trf-modal, .trf-lightbox { display: none; }
	body::before, body::after { display: none; }
	body { color: #000; background: #fff; }
}