/*
 * Le Buronnier — feuille de style du site.
 *
 * Sommaire
 *   1.  Fondations : variables, remise à zéro, typographie
 *   2.  Éléments partagés : conteneurs, boutons, pastilles, tampons, visuels
 *   3.  En-tête, navigation, menu mobile
 *   4.  Haut de page
 *   5.  Le circuit
 *   6.  Bandeaux défilants
 *   7.  Les viandes
 *   8.  La carte
 *   9.  Les vins et le mot du sommelier
 *   10. L'équipe, les avis
 *   11. La terrasse et sa météo
 *   12. Appel, carte cadeau, privatisation
 *   13. Pied de page
 *   14. Stickers, pages simples, apparitions
 *   15. Recrutement
 *   16. Questions fréquentes
 *   17. Page d’attente (maintenance)
 *
 * Un seul point de bascule : 1150 px.
 */

/* ------------------------------------------------------------------ *
 * 1. Fondations
 * ------------------------------------------------------------------ */

:root {
	--ink: #14100f;
	--cream: #fffcea;
	--accent: #b41d1d;
	--bord: #7D0339;
	--red: #6d1f24;
	--or: #e8d9a8;
	--vert: #2e6b3c;   /* terrasse ouverte : 5,9:1 sur le crème, lisible en petit */
	--mq: 34s;
	--lb-bandeau: 76px; /* hauteur du bandeau collant */

	--gouttiere: clamp(20px, 5vw, 64px);
	--largeur: 1320px;
	--section: clamp(48px, 7vw, 104px);
	--entree: cubic-bezier(.22, .61, .36, 1);
	--glissement: cubic-bezier(.3, .7, .25, 1);
	--lb-hauteur-logo: clamp(62px, 6vw, 88px);
	--filet: 1px solid rgba(20, 16, 15, .16);
	--filet-clair: 1px solid rgba(255, 252, 234, .2);
	--raye: repeating-linear-gradient(135deg, #efe8d4 0 11px, #e5ddc8 11px 22px);
}

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

/* `hidden` doit l'emporter sur nos propres `display`. Sans cette règle, un
   bloc mis en `display:flex` ici resterait affiché malgré l'attribut, car une
   déclaration d'auteur passe avant celle du navigateur. */
[hidden] {
	display: none !important;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--cream);
	color: var(--ink);
	font: 400 15px/1.5 Barlow, system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
}

.lb-page {
	width: 100%;
	overflow-x: clip;
}

img,
video {
	max-width: 100%;
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	color: var(--accent);
}

h1,
h2,
h3 {
	margin: 0;
}

p {
	margin: 0;
	text-wrap: pretty;
}

button {
	font-family: inherit;
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

/* Sur les fonds sombres (bordeaux, rouge, encre), l'accent ne ressort pas
   (moins de 3:1) : le contour passe en crème, à plus de 6:1 sur chacun. */
.lb-hero__intro :focus-visible,
.lb-viandes :focus-visible,
.lb-vins :focus-visible,
.lb-feuille :focus-visible,
.lb-video-modale :focus-visible,
.lb-presse :focus-visible,
.lb-appel :focus-visible,
.lb-cadeau :focus-visible,
.lb-privatisation__encart :focus-visible,
.lb-footer :focus-visible,
.lb-poste__conditions :focus-visible {
	outline-color: var(--cream);
}

/* Cibles de focus posées par le script (section visée par le menu, titre du
   remerciement) : un contour autour d'un bloc entier gênerait la lecture. */
section[tabindex="-1"]:focus,
footer[tabindex="-1"]:focus,
.lb-carte__section[tabindex="-1"]:focus,
[data-lb-merci-titre]:focus {
	outline: none;
}

/* Cibles d'ancre : elles s'arrêtent sous le bandeau collant, pas dessous. */
section[id],
footer[id],
.lb-carte__section[id] {
	scroll-margin-top: var(--lb-bandeau);
}

/* Un élément atteint au clavier (Maj+Tab notamment) ne doit pas finir caché
   sous le bandeau. Limité au contenu et au pied de page : le bandeau et les
   fenêtres fixes n'ont pas à faire défiler la page. */
main :is(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])),
.lb-footer :is(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])) {
	scroll-margin-top: calc(var(--lb-bandeau) + 12px);
}

.lb-video-modale :is(a[href], button, video),
.lb-feuille :is(a[href], button, input) {
	scroll-margin-top: 0;
}

.lb-evitement {
	position: absolute;
	left: -9999px;
	z-index: 100;
	padding: 14px 20px;
	background: var(--ink);
	color: var(--cream);
	font: 700 11px/1 Barlow, sans-serif;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.lb-evitement:focus {
	left: 12px;
	top: 12px;
	color: var(--cream);
}

/* Texte réservé aux lecteurs d'écran. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Typographie partagée ---------------------------------------------- */

.lb-titre {
	font: 900 clamp(30px, 4vw, 54px)/.98 'Barlow Condensed', sans-serif;
	letter-spacing: -.01em;
	text-transform: uppercase;
	margin: 16px 0 0;
}

.lb-titre--geant {
	font-size: clamp(36px, 6vw, 100px);
	line-height: .9;
	letter-spacing: -.015em;
	margin-top: 18px;
}

.lb-titre--condense {
	font-size: clamp(32px, 5vw, 68px);
	line-height: .95;
	margin: 0;
}

.lb-titre--clair {
	color: var(--cream);
}

.lb-manuscrit {
	display: inline-block;
	font: 400 .94em/.86 'Permanent Marker', cursive;
	letter-spacing: 0;
	text-transform: none;
	color: var(--accent);
}

.lb-manuscrit--or,
.lb-titre--or .lb-manuscrit {
	color: var(--or);
}

.lb-surtitre {
	display: block;
	font: 700 11px/1 Barlow, sans-serif;
	letter-spacing: .24em;
	text-transform: uppercase;
}

.lb-surtitre--accent {
	color: var(--accent);
}

.lb-surtitre--or {
	color: var(--or);
}

.lb-surtitre--sourdine {
	color: rgba(20, 16, 15, .72);
}

.lb-mono {
	font: 400 11px/1.4 ui-monospace, Menlo, monospace;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.lb-etiquette {
	display: block;
	font: 600 11px/1 Barlow, sans-serif;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(20, 16, 15, .72);
	margin-bottom: 9px;
}

label.lb-etiquette {
	cursor: pointer;
}

/* Plus clair que l'étiquette, mais sans opacité : 4,5:1 au moins. */
.lb-etiquette__option {
	letter-spacing: .08em;
	color: rgba(20, 16, 15, .68);
}

.lb-etoiles {
	font: 400 16px/1 Barlow, sans-serif;
	letter-spacing: .14em;
	color: var(--accent);
}

.lb-filet {
	flex: 1;
	min-width: 30px;
	height: 1px;
	background: rgba(20, 16, 15, .22);
}

/* ------------------------------------------------------------------ *
 * 2. Éléments partagés
 * ------------------------------------------------------------------ */

.lb-conteneur {
	width: 100%;
	max-width: var(--largeur);
	margin: 0 auto;
}

.lb-conteneur--large {
	max-width: none;
	padding: 0 var(--gouttiere);
}

.lb-bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font: 700 11px/1 Barlow, sans-serif;
	letter-spacing: .16em;
	text-transform: uppercase;
	min-height: 44px; /* cible tactile */
	padding: 14px 22px;
	border: 1px solid transparent;
	white-space: nowrap;
	cursor: pointer;
	transition: background .22s var(--entree), color .22s var(--entree), border-color .22s var(--entree);
}

/* Envoi en cours : le bouton reste focalisable (aria-disabled, pas disabled). */
.lb-bouton[aria-disabled="true"] {
	opacity: .55;
	cursor: progress;
}

.lb-bouton--sombre {
	background: var(--ink);
	color: var(--cream);
}

.lb-bouton--sombre:hover {
	background: var(--accent);
	color: var(--cream);
}

.lb-bouton--accent {
	background: var(--accent);
	color: var(--cream);
	padding: 18px 20px;
	letter-spacing: .16em;
}

.lb-bouton--accent:hover {
	background: var(--cream);
	color: var(--ink);
}

.lb-bouton--clair {
	background: var(--cream);
	color: var(--ink);
	padding: 16px 26px;
}

.lb-bouton--clair:hover {
	background: var(--ink);
	color: var(--cream);
}

.lb-bouton--ligne {
	border-color: var(--accent);
	color: var(--accent);
	padding: 13px 17px;
	letter-spacing: .14em;
}

.lb-bouton--ligne:hover {
	background: var(--accent);
	color: var(--cream);
}

.lb-bouton--fantome {
	border-color: rgba(20, 16, 15, .34);
	color: var(--ink);
	background: transparent;
}

.lb-bouton--fantome:hover {
	background: var(--ink);
	color: var(--cream);
}

.lb-bouton--fantome-clair {
	border-color: rgba(255, 252, 234, .5);
	color: var(--cream);
	background: transparent;
	padding: 16px 26px;
}

.lb-bouton--fantome-clair:hover {
	background: var(--cream);
	color: var(--ink);
}

.lb-bouton--bloc {
	display: flex;
	width: 100%;
	margin-top: 12px;
	text-align: center;
}

.lb-bouton--compact {
	height: 44px;
	padding: 0 16px;
	font-size: 10.5px;
	letter-spacing: .14em;
}

/* Pastilles de filtre ----------------------------------------------- */

.lb-pastille {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	font: 700 10.5px/1 Barlow, sans-serif;
	letter-spacing: .14em;
	text-transform: uppercase;
	border: 1px solid rgba(255, 252, 234, .32);
	background: transparent;
	color: var(--cream);
	cursor: pointer;
	transition: background .18s, color .18s, border-color .18s;
}

.lb-pastille:hover {
	border-color: var(--cream);
}

.lb-pastille.est-actif {
	background: var(--cream);
	border-color: var(--cream);
	color: var(--ink);
}

.lb-pastille--sombre {
	border-color: rgba(20, 16, 15, .3);
	color: var(--ink);
}

.lb-pastille--sombre.est-actif {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--cream);
}

.lb-tag {
	display: inline-block;
	font: 700 clamp(11px, .6vw + 8px, 12px)/1 Barlow, sans-serif;
	letter-spacing: .16em;
	text-transform: uppercase;
	padding: 7px 10px;
	border: 1px solid var(--or);
	color: var(--or);
}

/* Tampons ronds ------------------------------------------------------ */

.lb-tampon {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	border-radius: 50%;
	background: var(--accent);
	color: var(--cream);
	text-align: center;
	transition: background .26s var(--entree);
}

.lb-tampon:hover {
	background: var(--ink);
	color: var(--cream);
}

.lb-tampon__titre {
	padding-left: .14em;
	font: 900 clamp(17px, 1.6vw, 21px)/1 'Barlow Condensed', sans-serif;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.lb-tampon__tel {
	font: 400 11px/1 ui-monospace, Menlo, monospace;
	letter-spacing: .06em;
}

/* Tampon à deux liens (haut de page, menu) : tout le disque ouvre la
   réservation, comme avant ; le numéro passe au-dessus et appelle. */
.lb-tampon > .lb-tampon__titre::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
}

.lb-tampon > .lb-tampon__tel {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 4px 8px;
}

/* Sans cela, `a:hover` mettrait du rouge sur le disque rouge. */
.lb-tampon a,
.lb-tampon a:hover {
	color: inherit;
}

.lb-tampon a:focus-visible {
	outline: 2px solid var(--cream);
	outline-offset: 2px;
}

.lb-tampon--hero {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: clamp(126px, 13vw, 164px);
	height: clamp(126px, 13vw, 164px);
}

.lb-tampon--privatisation {
	position: relative;
	flex: none;
	margin-left: auto;
	width: clamp(140px, 13vw, 178px);
	height: clamp(140px, 13vw, 178px);
	padding: 14px;
}

.lb-tampon--privatisation .lb-tampon__fleche {
	position: absolute;
	left: 50%;
	bottom: 16%;
	transform: translateX(-50%);
}

.lb-tampon__libelle {
	padding-left: .1em;
	font: 900 clamp(15px, 1.35vw, 18px)/1.1 'Barlow Condensed', sans-serif;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-wrap: balance;
}

.lb-tampon__fleche {
	font: 400 13px/1 Barlow, sans-serif;
}

/* Frises, visuels, pictogrammes -------------------------------------- */

.lb-frise {
	height: 26px;
	width: 100%;
	background: repeating-linear-gradient(90deg, var(--accent) 0 25px, #14100f 25px 26px, #f2ece0 26px 51px, #14100f 51px 52px);
}

.lb-frise--menu {
	height: 14px;
}

.lb-visuel {
	position: relative;
	overflow: hidden;
	background: var(--raye);
}

.lb-visuel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Photo en <img> (lb_photo()) : elle remplit son cadre, qui garde son ratio
   et son fond de chargement. Le cadre est en `position: relative`. */
.lb-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
}

.lb-visuel--panoramique {
	aspect-ratio: 21/9;
}

.lb-visuel--portrait {
	aspect-ratio: 4/5;
}

.lb-visuel__legende {
	position: absolute;
	left: 14px;
	bottom: 14px;
	font: 400 clamp(11px, .6vw + 8px, 12px)/1.5 ui-monospace, Menlo, monospace;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(20, 16, 15, .72);
}

.lb-maison {
	display: inline-flex;
	align-items: center;
	align-self: center;
	flex: none;
	color: var(--accent);
}

.lb-reseaux {
	display: flex;
	gap: 8px;
}

.lb-reseau {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 252, 234, .3);
	color: var(--cream);
	transition: background .22s, color .22s;
}

.lb-reseau:hover {
	background: var(--cream);
	color: var(--ink);
}

/* Dans le menu, les icônes seules : pas de cadre. */
.lb-reseaux--menu {
	gap: 2px;
}

.lb-reseaux--menu .lb-reseau {
	border-color: transparent;
	color: var(--ink);
}

.lb-reseaux--menu .lb-reseau:hover {
	background: var(--ink);
	color: var(--cream);
}

/* Horaires ----------------------------------------------------------- */

.lb-horaires {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 8px 16px;
	font: 500 13px/1.2 Barlow, sans-serif;
	font-variant-numeric: tabular-nums;
	color: rgba(255, 252, 234, .88);
}

.lb-horaires__creneaux {
	text-align: right;
}

.lb-horaires__ferme {
	opacity: .72;
}

.lb-horaires--hero {
	margin-top: auto;
	grid-template-columns: auto auto;
	justify-content: end;
	gap: 9px clamp(28px, 3vw, 48px);
	font-weight: 500;
}

/* ------------------------------------------------------------------ *
 * 3. En-tête, navigation, menu mobile
 * ------------------------------------------------------------------ */

.lb-header {
	position: sticky;
	top: 0;
	z-index: 40;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px clamp(14px, 2.5vw, 30px);
	padding: 10px var(--gouttiere);
	min-height: 76px;
	width: 100%;
	background: rgba(255, 252, 234, .93);
	backdrop-filter: blur(10px);
	border-bottom: var(--filet);
	box-shadow: 0 1px 0 rgba(20, 16, 15, .04);
}

/* Menu ouvert : le bandeau passe au-dessus du voile (55) et du menu (58),
   pour que la croix et « Réserver » restent nets. */
.lb-header:has(.lb-burger[aria-expanded="true"]) {
	z-index: 60;
}

.lb-header__logo {
	flex: none;
	display: flex;
	align-items: center;
}

.lb-header__logo img {
	height: 48px;
	width: auto;
	display: block;
}

.lb-header__nom {
	font: 900 22px/1 'Barlow Condensed', sans-serif;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.lb-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px clamp(12px, 2vw, 26px);
	font: 600 11px/1 Barlow, sans-serif;
	letter-spacing: .16em;
	text-transform: uppercase;
	white-space: nowrap;
}

.lb-nav__lien {
	display: inline-block;
	padding: 6px 0;
	transition: color .18s;
}

.lb-nav__lien:hover,
.lb-nav__lien.est-actif {
	color: var(--accent);
}

.lb-header__actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 14px;
}

.lb-header__tel {
	font: 600 13.5px/1 Barlow, sans-serif;
	letter-spacing: .03em;
	white-space: nowrap;
}

.lb-header__mobile {
	display: none;
	margin-left: auto;
	align-items: center;
	gap: 8px;
}

.lb-burger {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ink);
	cursor: pointer;
	transition: color .28s ease;
}

.lb-burger[aria-expanded="true"] {
	color: var(--accent);
}

.lb-burger__barres {
	position: relative;
	display: block;
	width: 24px;
	height: 16px;
	flex: none;
	background: repeating-linear-gradient(180deg, currentColor 0 2px, transparent 2px 7px);
}

/* Les deux traits de la croix, à plat et invisibles tant que le menu est fermé. */
.lb-burger__barres::before,
.lb-burger__barres::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 7px;
	height: 2px;
	background: currentColor;
	opacity: 0;
	transition: transform .34s var(--glissement), opacity .2s ease;
}

/* Menu ouvert : les trois barres laissent place à une croix. */
.lb-burger[aria-expanded="true"] .lb-burger__barres {
	background: none;
}

.lb-burger[aria-expanded="true"] .lb-burger__barres::before,
.lb-burger[aria-expanded="true"] .lb-burger__barres::after {
	opacity: 1;
}

.lb-burger[aria-expanded="true"] .lb-burger__barres::before {
	transform: rotate(45deg);
}

.lb-burger[aria-expanded="true"] .lb-burger__barres::after {
	transform: rotate(-45deg);
}

/* Appel direct, sur petit écran (le bloc est masqué au-dessus de 1150 px). */
.lb-header__appel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--ink);
}

.lb-header__appel:hover {
	color: var(--accent);
}

/* Menu mobile -------------------------------------------------------- */

.lb-voile {
	position: fixed;
	inset: 0;
	z-index: 55;
	background: rgba(20, 16, 15, .5);
	opacity: 0;
	transition: opacity .3s ease;
}

.lb-voile.est-ouvert {
	opacity: 1;
}

.lb-voile--filtres {
	z-index: 62;
	background: rgba(20, 16, 15, .55);
}

.lb-menu-mobile {
	position: fixed;
	left: 0;
	right: 0;
	top: 75px;
	z-index: 58;
	/* Tout l'écran sous le bandeau, mais au-dessus des barres du navigateur :
	   avec dvh, la barre flottante de Safari (iOS) cachait le bas du menu. */
	height: calc(100vh - 75px);
	height: calc(100svh - 75px);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--cream);
	border-top: var(--filet);
	box-shadow: 0 30px 60px rgba(20, 16, 15, .28);
	transform: translateY(-14px);
	transform-origin: top;
	opacity: 0;
	transition: opacity .26s ease, transform .46s var(--entree);
}

.lb-menu-mobile.est-ouvert {
	opacity: 1;
	transform: translateY(0);
}

.lb-menu-mobile__corps {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	padding: clamp(18px, 5vw, 26px) clamp(20px, 5vw, 30px) 0;
}

.lb-menu-mobile__accroche {
	font: 400 clamp(22px, 7vw, 30px)/1 'Permanent Marker', cursive;
	text-transform: uppercase;
	color: var(--accent);
}

.lb-menu-mobile__nav {
	display: flex;
	flex-direction: column;
	margin-top: clamp(14px, 4vw, 20px);
}

.lb-menu-mobile__lien {
	display: flex;
	align-items: baseline;
	gap: 12px;
	min-height: 54px;
	padding: 10px 0;
	border-bottom: 1px solid rgba(20, 16, 15, .14);
	color: var(--ink);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .4s ease var(--lb-delai, 0s), transform .46s var(--entree) var(--lb-delai, 0s);
}

.lb-menu-mobile.est-ouvert .lb-menu-mobile__lien {
	opacity: 1;
	transform: translateY(0);
}

.lb-menu-mobile__libelle {
	font: 900 clamp(27px, 7.6vw, 40px)/1 'Barlow Condensed', sans-serif;
	letter-spacing: .01em;
	text-transform: uppercase;
	white-space: nowrap;
}

.lb-menu-mobile__filet {
	flex: 1;
	min-width: 18px;
}

.lb-menu-mobile__numero {
	font: 400 15px/1 'Instrument Serif', serif;
	color: var(--accent);
}

/* Réserver, appeler, l'adresse : en bas de l'écran. */
.lb-menu-mobile__infos {
	margin-top: auto;
	padding-top: clamp(18px, 5vw, 26px);
	padding-bottom: clamp(18px, 5vw, 24px);
}

/* Réserver en ligne ou appeler : les deux gestes qui comptent, côte à côte. */
.lb-menu-mobile__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 14px;
}

.lb-menu-mobile__actions .lb-bouton {
	justify-content: center;
	min-height: 48px;
	padding: 0 12px;
	white-space: nowrap;
}

/* Les questions pratiques en liens légers, sur deux colonnes : texte, petite
   flèche, filet fin. Plus de cadres empilés. */
.lb-menu-mobile__raccourcis {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 18px;
}

.lb-menu-mobile__raccourcis a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 44px;
	border-bottom: 1px solid rgba(20, 16, 15, .1);
	font: 600 12px/1.25 Barlow, sans-serif;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(20, 16, 15, .78);
	transition: color .2s;
}

.lb-menu-mobile__raccourcis a::after {
	content: '→';
	flex: none;
	font: 400 13px/1 Barlow, sans-serif;
	color: var(--accent);
	transition: transform .2s var(--entree);
}

.lb-menu-mobile__raccourcis a:hover {
	color: var(--accent);
}

.lb-menu-mobile__raccourcis a:hover::after {
	transform: translateX(3px);
}

.lb-menu-mobile__pied {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 16px;
}

.lb-menu-mobile__adresse {
	font: 400 13.5px/1.4 Barlow, sans-serif;
	color: rgba(20, 16, 15, .7);
}

/* Retour visuel a l appui : la cible est petite, l utilisateur doit voir
   que son geste a ete pris en compte. */
.lb-menu-mobile__raccourcis a:active,
.lb-menu-mobile__lien:active {
	opacity: .55;
}

/* ------------------------------------------------------------------ *
 * 4. Haut de page
 * ------------------------------------------------------------------ */

.lb-hero {
	padding: var(--section) 0 0;
}

.lb-hero__entete {
	padding: 0 var(--gouttiere) clamp(44px, 6vw, 92px);
	border-bottom: var(--filet);
}

.lb-hero__titre {
	margin: 0;
	font-weight: 400;
}

.lb-hero__titre-condense {
	display: block;
	font: 900 clamp(34px, 6.4vw, 104px)/.94 'Barlow Condensed', sans-serif;
	letter-spacing: -.012em;
	text-transform: uppercase;
}

.lb-hero__titre-manuscrit {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 clamp(12px, 1.8vw, 28px);
	margin-top: clamp(4px, .6vw, 10px);
}

.lb-hero__titre-manuscrit .lb-manuscrit {
	font-size: clamp(29px, 5.4vw, 88px);
	line-height: .9;
	text-transform: uppercase;
}

.lb-hero__sigle {
	height: clamp(30px, 5.4vw, 84px);
	width: auto;
	flex: none;
	align-self: center;
}

.lb-hero__corps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	align-items: stretch;
}

.lb-hero__intro {
	padding: clamp(40px, 5vw, 72px) clamp(24px, 4vw, 56px);
	display: flex;
	flex-direction: column;
	gap: clamp(26px, 3.4vw, 44px);
	background: var(--ink);
	color: var(--cream);
}

.lb-hero__texte {
	font: 400 clamp(24px, 2.5vw, 34px)/1.25 'Instrument Serif', serif;
}

.lb-hero__visuels {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: clamp(420px, 44vw, 660px);
}

.lb-hero__photo {
	position: relative;
	overflow: hidden;
	background: #efe8d4 center/cover no-repeat;
}

/* Lien vers l'itinéraire, sous les horaires du bloc sombre. */
.lb-hero__adresse {
	align-self: flex-start;
	font: 400 14px/1.5 Barlow, sans-serif;
	color: var(--or);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.lb-hero__adresse:hover {
	color: var(--cream);
}

/* Pause de la vidéo : en absolu dans la grille des visuels, il n'y crée pas
   de troisième cellule. */
.lb-hero__pause {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(20, 16, 15, .6);
	color: var(--cream);
	font: 400 13px/1 Barlow, sans-serif;
	cursor: pointer;
}

.lb-hero__pause:focus-visible {
	outline: 2px solid var(--cream);
	outline-offset: 2px;
}

/* contain: size — la vidéo, verticale, ne dicte pas la hauteur du bandeau :
   elle remplit la case que lui laisse la photo. */
.lb-hero__video {
	contain: size;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	background: #e8e0cb;
	pointer-events: none;
}

/* ------------------------------------------------------------------ *
 * 5. Le circuit
 * ------------------------------------------------------------------ */

.lb-circuit {
	position: relative;
	padding: 0 var(--gouttiere);
	border-top: var(--filet);
}

.lb-circuit__piste {
	position: relative;
	height: 300vh;
}

.lb-circuit__collant {
	position: sticky;
	top: 84px;
	width: 100%;
	max-width: var(--largeur);
	margin: 0 auto;
	min-height: calc(100vh - 84px);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: clamp(20px, 3vh, 40px);
	padding: clamp(14px, 2.4vh, 30px) 0 clamp(14px, 2vh, 24px);
}

.lb-circuit__grille {
	position: relative;
	flex: 1;
	min-height: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: clamp(22px, 4vw, 72px);
	align-items: center;
	align-content: center;
}

.lb-circuit__texte {
	margin-top: 20px;
	max-width: 34ch;
	font: 400 clamp(14.5px, 1.25vw, 17px)/1.6 Barlow, sans-serif;
	color: rgba(20, 16, 15, .85);
}

.lb-circuit__pile {
	position: relative;
	height: clamp(380px, 68vh, 820px);
}

.lb-etape {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	opacity: 0;
	transform: translateY(26px);
	pointer-events: none;
	transition: opacity .55s var(--entree), transform .55s var(--entree);
}

.lb-etape.est-actif {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.lb-etape__entete {
	display: flex;
	align-items: baseline;
	gap: clamp(12px, 1.6vw, 22px);
}

.lb-etape__numero {
	font: 400 clamp(30px, 3.4vw, 54px)/.9 'Instrument Serif', serif;
	color: var(--accent);
}

.lb-etape__titre {
	font: 900 clamp(20px, 2.2vw, 32px)/1.05 'Barlow Condensed', sans-serif;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.lb-etape__texte {
	margin-top: 14px;
	max-width: 46ch;
	font: 400 clamp(14px, 1.2vw, 16.5px)/1.6 Barlow, sans-serif;
	color: rgba(20, 16, 15, .85);
}

.lb-etape__visuel {
	position: relative;
	flex: 1;
	min-height: 0;
	aspect-ratio: 3/4;
	align-self: flex-start;
	width: auto;
	margin-top: 16px;
	background: #efe8d4 center/cover no-repeat;
}

/* Sans photo : le sigle du restaurant au centre, pas de texte provisoire. */
.lb-etape__visuel--vide {
	display: flex;
	align-items: center;
	justify-content: center;
}

.lb-etape__sigle {
	width: 28%;
	height: auto;
	opacity: .5;
}

.lb-etape__legende {
	font: 400 clamp(11px, .6vw + 8px, 12px)/1.5 ui-monospace, Menlo, monospace;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(20, 16, 15, .72);
}

.lb-circuit__segments {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
}

.lb-circuit__segments--bureau {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -17px;
}

.lb-circuit__segment {
	position: relative;
	display: block;
	height: 3px;
	background: rgba(20, 16, 15, .15);
}

.lb-circuit__jauge {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0;
	background: var(--accent);
}

.lb-circuit__indicateur {
	display: none;
	align-items: center;
	gap: 12px;
	margin-top: 16px;
}

.lb-circuit__indicateur .lb-circuit__segments {
	flex: 1;
}

.lb-circuit__rang {
	font: 400 15px/1 'Instrument Serif', serif;
	color: var(--accent);
	font-variant-numeric: tabular-nums;
}

.lb-circuit__total {
	font: 400 11px/1 ui-monospace, Menlo, monospace;
	letter-spacing: .1em;
	color: rgba(20, 16, 15, .68);
}

.lb-producteurs {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding-top: clamp(16px, 2.4vh, 26px);
	border-top: 1px solid rgba(20, 16, 15, .2);
}

/* Le sur-titre à gauche, la pause du bandeau à droite. */
.lb-producteurs .lb-bandeau__commandes {
	justify-content: space-between;
}

.lb-producteur {
	display: inline-flex;
	align-items: baseline;
	gap: .45em;
	font: 400 clamp(22px, 2.6vw, 42px)/1.1 'Instrument Serif', serif;
	white-space: nowrap;
	color: inherit;
}

/* Précision (lieu, spécialité) en petites capitales, après le nom. */
.lb-producteur__detail {
	font: 600 clamp(10px, .75vw, 12px)/1 Barlow, sans-serif;
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: .7;
}

.lb-producteur--lien {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
	text-decoration-color: rgba(20, 16, 15, .3);
	transition: text-decoration-color .2s;
}

.lb-producteur--lien:hover,
.lb-producteur--lien:focus-visible {
	text-decoration-color: currentColor;
}

.lb-producteurs__sigle {
	height: clamp(13px, 1.3vw, 20px);
	width: auto;
	flex: none;
	align-self: center;
	opacity: .85;
}

/* ------------------------------------------------------------------ *
 * 6. Bandeaux défilants
 * ------------------------------------------------------------------ */

@keyframes lb-defile {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

.lb-bandeau {
	overflow: hidden;
	margin-top: clamp(16px, 2vw, 26px);
	mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.lb-bandeau__piste {
	display: flex;
	align-items: center;
	width: max-content;
	animation: lb-defile var(--mq) linear infinite;
}

/* Sans script : l'animation CSS, arrêtée au survol et au clavier. */
.lb-bandeau:hover .lb-bandeau__piste,
.lb-bandeau:focus-within .lb-bandeau__piste {
	animation-play-state: paused;
}

/* Avec le script, le bandeau est une zone qui défile : il avance seul, et
   se reprend au doigt (ou à la souris, en le faisant glisser). La durée de
   l'animation reste déclarée, le script y lit la vitesse. */
.lb-bandeau--js {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	cursor: grab;
}

.lb-bandeau--js::-webkit-scrollbar {
	display: none;
}

.lb-bandeau--js.est-attrape {
	cursor: grabbing;
	user-select: none;
}

.lb-bandeau--js .lb-bandeau__piste {
	animation-name: none;
}

.lb-bandeau__commandes {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 16px;
}

.lb-bandeau__groupe {
	display: flex;
	align-items: center;
	gap: clamp(14px, 1.8vw, 30px);
	padding-right: clamp(14px, 1.8vw, 30px);
}

.lb-bandeau__piste--lente {
	animation-duration: calc(var(--mq) * 1.8);
}

.lb-bandeau--inverse .lb-bandeau__piste {
	animation-direction: reverse;
}

/* ------------------------------------------------------------------ *
 * 7. Les viandes
 * ------------------------------------------------------------------ */

.lb-viandes {
	position: relative;
	padding: clamp(44px, 6vw, 100px) var(--gouttiere);
	background-color: var(--red);
	background-image: linear-gradient(rgba(109, 31, 36, .982), rgba(109, 31, 36, .982)), var(--lb-fond, none);
	background-size: cover;
	background-position: center;
	color: var(--cream);
}

.lb-viandes__entete {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 20px clamp(24px, 4vw, 60px);
	align-items: end;
}

.lb-viandes__entete .lb-titre {
	font-size: clamp(32px, 5.2vw, 72px);
	line-height: .94;
	letter-spacing: -.012em;
}

.lb-viandes__texte,
.lb-vins__texte {
	max-width: 48ch;
	font: 400 clamp(14.5px, 1.25vw, 17px)/1.62 Barlow, sans-serif;
	color: rgba(255, 252, 234, .92);
}

.lb-viandes__filet {
	margin-top: clamp(24px, 3vw, 38px);
	padding-top: clamp(18px, 2vw, 26px);
	border-top: 1px solid rgba(255, 252, 234, .22);
}

.lb-viandes__corps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: clamp(24px, 3.5vw, 54px);
	align-items: start;
}

.lb-races {
	min-width: 0;
}

.lb-race {
	display: block;
	width: 100%;
	text-align: left;
	padding: 13px 12px;
	border: 0;
	border-bottom: 1px solid rgba(255, 252, 234, .13);
	background: transparent;
	color: var(--cream);
	cursor: pointer;
	box-shadow: inset 3px 0 0 transparent;
	transition: background .18s, box-shadow .18s;
}

.lb-race:hover {
	background: rgba(255, 252, 234, .05);
}

.lb-race.est-ouvert {
	background: rgba(255, 252, 234, .09);
	box-shadow: inset 3px 0 0 var(--accent);
}

.lb-race__ligne {
	display: flex;
	align-items: baseline;
	gap: 0 14px;
}

.lb-race__numero {
	width: 30px;
	flex: none;
	font: 400 11px/1 ui-monospace, Menlo, monospace;
	letter-spacing: .06em;
	opacity: .86;
}

/* Un mot du nom n'est jamais coupé ni recouvert ; c'est l'origine, alignée à
   droite, qui passe sur deux lignes quand la place manque. */
.lb-race__nom {
	flex: 1 1 auto;
	min-width: min-content;
	font: 400 clamp(23px, 2.7vw, 38px)/1.05 'Instrument Serif', serif;
}

.lb-race__origine {
	flex: 0 1 auto;
	min-width: 0;
	max-width: 55%;
	overflow-wrap: break-word;
	font: 600 11px/1.4 Barlow, sans-serif;
	letter-spacing: .16em;
	text-transform: uppercase;
	opacity: .92;
	text-align: right;
}

.lb-race__fiche {
	display: none;
	padding: 16px 0 6px 44px;
}

.lb-race.est-ouvert .lb-race__fiche {
	display: block;
}

.lb-race__note {
	display: block;
	max-width: 60ch;
	font: 400 14px/1.6 Barlow, sans-serif;
}

.lb-race__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: 14px;
}

.lb-jauges {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 9px 14px;
	align-items: center;
	max-width: 420px;
	margin-top: 16px;
}

.lb-jauges__label {
	font: 600 clamp(11px, .6vw + 8px, 12px)/1 Barlow, sans-serif;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 252, 234, .9);
}

.lb-jauges__piste {
	display: block;
	height: 5px;
	background: rgba(255, 252, 234, .2);
}

.lb-jauges__valeur {
	display: block;
	height: 5px;
	background: var(--or);
	transition: width .32s var(--entree);
}

.lb-race__decoupes,
.lb-race__accord {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 12px;
	margin-top: 16px;
}

.lb-race__accord {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 252, 234, .22);
}

.lb-race__etiquette {
	font: 600 clamp(11px, .6vw + 8px, 12px)/1 Barlow, sans-serif;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 252, 234, .9);
}

.lb-race__valeur {
	font: 400 15px/1.4 'Instrument Serif', serif;
}

.lb-race__vin {
	font: 400 16px/1.4 'Instrument Serif', serif;
	color: var(--or);
}

.lb-race__photo {
	display: none;
	aspect-ratio: 3/2;
	margin-top: 18px;
	background-image: linear-gradient(rgba(93, 16, 22, .2), rgba(20, 16, 15, .78)), var(--lb-fond, none);
	background-size: cover;
	background-position: center;
}

.lb-race__photo-legende {
	display: flex;
	height: 100%;
	align-items: flex-end;
	padding: 16px;
	font: 600 11px/1.4 Barlow, sans-serif;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--or);
}

.lb-viandes__aparte {
	position: sticky;
	top: 96px;
}

@keyframes lb-visuel-race {
	from {
		opacity: 0;
		transform: translateY(16px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* Rejouée à chaque changement de race (classe posée par le script). */
.lb-race-visuel.est-change {
	animation: lb-visuel-race .45s var(--entree) both;
}

.lb-race-visuel {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4/5;
	min-height: 280px;
	/* L'aparté est collant (top 96px) : visuel et bouton « Réserver » (60px
	   avec sa marge) tiennent dans l'écran, avec 24px de marge en bas. Le
	   fond en `cover` recadre. */
	max-height: calc(100vh - 180px);
	background-color: var(--red);
	background-size: cover;
	background-position: center;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: clamp(18px, 2.2vw, 30px);
}

/* Voile d'assombrissement. Un `box-shadow: inset` ne conviendrait plus : il se
   peint sous les enfants, donc la vidéo passerait par-dessus. */
.lb-race-visuel::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(20, 16, 15, .55);
	pointer-events: none;
}

.lb-race-visuel > span {
	position: relative;
	z-index: 2;
}

/* Crédit de la photo, discret, en haut à droite. */
.lb-race-visuel > .lb-race-visuel__credit {
	position: absolute;
	top: 10px;
	right: 12px;
	max-width: 70%;
	text-align: right;
	font: 400 10px/1.3 Barlow, sans-serif;
	letter-spacing: .02em;
	color: rgba(255, 252, 234, .72);
}

.lb-race-visuel__credit:empty {
	display: none;
}

.lb-race-visuel__ligne {
	display: flex;
	align-items: center;
	gap: clamp(12px, 1.4vw, 20px);
}

/* Bouton de lecture, à côté du nom de la race. Le disque rouge est un
   pseudo-élément : le bouton lui-même porte l'anneau de texte, plus large. */
.lb-play {
	position: relative;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 116px;
	height: 116px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--cream);
	cursor: pointer;
}

.lb-play::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 54px;
	height: 54px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--accent);
	transition: background .24s var(--entree), transform .24s var(--entree);
}

.lb-play:hover::before {
	background: var(--cream);
	transform: translate(-50%, -50%) scale(1.08);
}

.lb-play__glyphe {
	position: relative;
	z-index: 1;
	font: 400 17px/1 Barlow, sans-serif;
	transition: color .24s var(--entree);
}

.lb-play:hover .lb-play__glyphe {
	color: var(--ink);
}

.lb-play__glyphe .lb-icone-lecture,
.lb-reel__lecture .lb-icone-lecture,
.lb-hero__pause-glyphe .lb-icone-lecture {
	display: block;
	width: 20px;
	height: 20px;
}

/* Mobile : sous la fiche de la race ouverte, un bandeau qui annonce la vidéo
   (disque rouge, libellé, nom de la race), dans le prolongement de la fiche.
   Affiché par le script (attribut hidden). */
.lb-play-mobile {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	margin: 0 0 10px;
	padding: 12px 14px 12px 12px;
	border: 1px solid rgba(255, 252, 234, .2);
	background: rgba(20, 16, 15, .22);
	color: var(--cream);
	text-align: left;
	cursor: pointer;
	transition: background .2s, border-color .2s;
}

.lb-play-mobile:active {
	background: rgba(20, 16, 15, .4);
}

.lb-play-mobile:focus-visible {
	outline: 2px solid var(--cream);
	outline-offset: 2px;
}

.lb-play-mobile__disque {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 0 5px rgba(180, 29, 29, .25);
}

/* Avec une couverture : la vignette de la vidéo, l'icône par-dessus. */
.lb-play-mobile__disque--image {
	position: relative;
	background: var(--accent) center/cover no-repeat;
	box-shadow: 0 0 0 2px var(--accent), 0 0 0 6px rgba(180, 29, 29, .25);
}

.lb-play-mobile__disque--image::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: rgba(20, 16, 15, .35);
}

.lb-play-mobile__disque--image .lb-icone-lecture {
	position: relative;
}

.lb-play-mobile__disque .lb-icone-lecture {
	width: 20px;
	height: 20px;
}

.lb-play-mobile__texte {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.lb-play-mobile__surtitre {
	font: 700 11px/1.2 Barlow, sans-serif;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--or);
}

.lb-play-mobile__nom {
	font: 400 20px/1.1 'Instrument Serif', serif;
}

/* Texte circulaire, en rotation continue. */
@keyframes lb-anneau {
	to {
		transform: rotate(360deg);
	}
}

.lb-play__anneau {
	position: absolute;
	inset: 0;
	animation: lb-anneau 16s linear infinite;
}

.lb-play__anneau svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}

.lb-play__anneau text {
	fill: var(--cream);
	font-family: Barlow, sans-serif;
	font-size: 8.4px;
	font-weight: 700;
	/* L espacement est calcule par le script pour boucler le cercle. */
	letter-spacing: .12em;
	text-transform: uppercase;
}

.lb-play:hover .lb-play__anneau {
	animation-play-state: paused;
}

/* Pop-up vidéo ------------------------------------------------------- */

.lb-voile--video {
	z-index: 70;
	background: rgba(20, 16, 15, .75);
}

/* La fenêtre épouse la vidéo : `fit-content` évite les bandes noires autour
   d'un format vertical. */
.lb-video-modale {
	position: fixed;
	left: 50%;
	top: 50%;
	/* Milieu de la zone réellement visible : sur iPhone, 50 % compte aussi la
	   barre d'outils de Safari. Seule la vidéo compte dans le centrage : le
	   bouton de fermeture et le titre débordent au-dessus et en dessous. */
	top: 50dvh;
	z-index: 72;
	transform: translate(-50%, -50%) scale(.97);
	width: fit-content;
	max-width: 92vw;
	opacity: 0;
	transition: opacity .26s ease, transform .38s var(--entree);
}

.lb-video-modale.est-ouvert {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

.lb-video-modale__cadre {
	position: relative;
	background: var(--ink);
	line-height: 0;
}

.lb-video-modale__lecteur {
	display: block;
	width: auto;
	height: auto;
	max-width: 92vw;
	/* Place au-dessus pour le bouton de fermeture, en dessous pour le titre. */
	max-height: 78vh;
	max-height: min(78vh, calc(100svh - 150px));
}

.lb-video-modale__titre {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	margin-top: 12px;
	font: 400 clamp(18px, 2vw, 26px)/1.2 'Instrument Serif', serif;
	color: var(--cream);
	text-align: center;
}

/* Posé au-dessus de la vidéo, hors du cadre : dedans, il recouvrait les
   commandes du lecteur (le son, sur iPhone). La fenêtre passe au-dessus du
   bandeau collant, qui ne le coupe donc pas. */
.lb-video-modale__fermer {
	position: absolute;
	right: 0;
	top: -52px;
	z-index: 2;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: var(--accent);
	color: var(--cream);
	font: 400 22px/1 Barlow, sans-serif;
	cursor: pointer;
	transition: background .2s, color .2s;
}

.lb-video-modale__fermer:hover {
	background: var(--cream);
	color: var(--ink);
}

.lb-race-visuel__famille {
	font: 700 10.5px/1 Barlow, sans-serif;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--or);
}

.lb-race-visuel__nom {
	margin-top: 12px;
	font: 400 clamp(34px, 4.2vw, 60px)/.96 'Instrument Serif', serif;
}

.lb-race-visuel__origine {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 252, 234, .3);
	font: 600 11px/1.4 Barlow, sans-serif;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.lb-pieces {
	margin-top: clamp(30px, 4vw, 52px);
	padding-top: clamp(24px, 3vw, 36px);
	border-top: 1px solid rgba(255, 252, 234, .22);
}

.lb-pieces__entete {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px 20px;
}

.lb-pieces__titre {
	font: 900 clamp(21px, 2.2vw, 28px)/1 'Barlow Condensed', sans-serif;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.lb-pieces__mention {
	font: 400 13px/1 'Instrument Serif', serif;
	font-style: italic;
	color: var(--or);
}

.lb-pieces__grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
	gap: clamp(10px, 1.2vw, 14px);
	margin-top: 18px;
}

.lb-piece {
	border: 1px solid rgba(255, 252, 234, .2);
	padding: 16px;
	transition: background .2s, border-color .2s;
}

.lb-piece:hover {
	background: rgba(255, 252, 234, .06);
	border-color: var(--or);
}

.lb-piece__poids {
	font: 600 clamp(11px, .6vw + 8px, 12px)/1 Barlow, sans-serif;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 252, 234, .9);
}

.lb-piece__nom {
	margin-top: 10px;
	font: 400 clamp(19px, 1.8vw, 24px)/1.15 'Instrument Serif', serif;
}

.lb-piece__prix {
	margin-top: 12px;
	font: 600 16px/1 Barlow, sans-serif;
	font-variant-numeric: tabular-nums;
	color: var(--or);
}

.lb-pieces__note {
	margin-top: 16px;
	font: 400 12.5px/1.6 Barlow, sans-serif;
	color: rgba(255, 252, 234, .75);
}

.lb-encart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 24px;
	margin-top: clamp(30px, 4vw, 56px);
	padding: clamp(20px, 2.4vw, 30px);
	background: var(--ink);
}

.lb-encart__texte {
	font: 400 clamp(24px, 2.8vw, 38px)/1.1 'Instrument Serif', serif;
}

.lb-encart .lb-bouton {
	margin-left: auto;
}

/* ------------------------------------------------------------------ *
 * 8. La carte
 * ------------------------------------------------------------------ */

.lb-carte {
	position: relative;
	padding: clamp(44px, 6vw, 96px) var(--gouttiere) 0;
	background-color: #f3ecd9;
	background-image: linear-gradient(rgba(243, 236, 217, .955), rgba(243, 236, 217, .955)), var(--lb-fond, none);
	background-size: cover;
	background-position: center;
}

.lb-carte__entete {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 16px 24px;
}

.lb-carte__intro {
	font: 400 clamp(14px, 1.3vw, 17px)/1.5 'Instrument Serif', serif;
	font-style: italic;
	color: var(--ink);
	max-width: 56ch;
}

.lb-carte__signature {
	display: block;
	margin-top: 8px;
	font-size: clamp(21px, 2.4vw, 34px);
	line-height: .9;
}

.lb-preferes {
	margin-top: clamp(28px, 3.6vw, 48px);
}

.lb-preferes__entete {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px 18px;
}

.lb-preferes__mention {
	font: 400 13px/1 'Instrument Serif', serif;
	font-style: italic;
	color: rgba(20, 16, 15, .75);
}

.lb-preferes__grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: clamp(16px, 2vw, 28px);
	margin-top: clamp(18px, 2vw, 26px);
}

.lb-prefere {
	display: flex;
	flex-direction: column;
}

.lb-prefere__visuel {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4/3;
	background: #e6ddc6 center/cover no-repeat;
}

.lb-prefere__nom {
	margin-top: 16px;
	font: 400 clamp(22px, 2.2vw, 30px)/1.1 'Instrument Serif', serif;
}

.lb-prefere__texte {
	margin-top: 9px;
	flex: 1;
	font: 400 13.5px/1.55 Barlow, sans-serif;
	color: rgba(20, 16, 15, .78);
}

.lb-prefere__prix {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid rgba(20, 16, 15, .2);
	font: 700 clamp(17px, 1.7vw, 21px)/1 Barlow, sans-serif;
	font-variant-numeric: tabular-nums;
	color: var(--accent);
}

/* Bord à bord, quelle que soit la largeur du conteneur : `50% - 50vw` le
   ramène aux bords de la fenêtre (le `overflow-x: clip` de .lb-page absorbe
   la barre de défilement). Hauteur au ratio 32/9, 150px au moins : un
   aspect-ratio avec min-height imposait 533px de large sur mobile. */
.lb-carte__banniere {
	position: relative;
	overflow: hidden;
	margin: clamp(30px, 4vw, 56px) calc(50% - 50vw) clamp(6px, 1vw, 14px);
	height: clamp(150px, 28.125vw, 540px);
	background: #e6ddc6 center/cover no-repeat;
}

.lb-carte__colonnes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: clamp(26px, 4vw, 58px);
	margin-top: clamp(28px, 4vw, 52px);
}

.lb-carte__section {
	margin: clamp(26px, 3vw, 40px) 0 6px;
	font: 400 clamp(22px, 2vw, 28px)/1 'Instrument Serif', serif;
	color: var(--accent);
}

.lb-carte__colonne > .lb-carte__section:first-child {
	margin-top: 0;
}

.lb-carte__section-mention {
	font-size: .62em;
	font-style: italic;
}

.lb-carte__section-note {
	margin: 0 0 6px;
	font: 400 13px/1.5 Barlow, sans-serif;
	font-style: italic;
	color: rgba(20, 16, 15, .78);
}

.lb-plat {
	padding: 12px 0;
	border-bottom: 1px solid rgba(20, 16, 15, .14);
}

.lb-plat:last-child {
	border-bottom: 0;
}

.lb-plat__ligne {
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.lb-plat__nom {
	font: 400 16px/1.35 Barlow, sans-serif;
}

.lb-plat--detaille .lb-plat__nom {
	font-weight: 600;
}

.lb-plat__precision {
	color: rgba(20, 16, 15, .72);
}

.lb-plat__prix {
	margin-left: auto;
	font: 600 15px/1 Barlow, sans-serif;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--accent);
}

.lb-plat__description {
	margin-top: 5px;
	font: 400 13px/1.5 Barlow, sans-serif;
	color: rgba(20, 16, 15, .72);
}

.lb-carte__visuel {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16/10;
	width: 100%;
	margin-top: clamp(22px, 2.6vw, 34px);
	background: #efe8d4 center/cover no-repeat;
}

.lb-carte__allergenes {
	margin-top: clamp(20px, 2.6vw, 32px);
	text-align: center;
	font: 400 11px/1.5 ui-monospace, Menlo, monospace;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(20, 16, 15, .7);
}

.lb-carte__galerie {
	/* Bord à bord : la galerie déborde des gouttières de la section. */
	margin: clamp(28px, 3.4vw, 50px) calc(var(--gouttiere) * -1) 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(50%, 220px), 1fr));
}

.lb-carte__vignette {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1;
	background: #e6ddc6 center/cover no-repeat;
}

/* ------------------------------------------------------------------ *
 * 9. Les vins et le mot du sommelier
 * ------------------------------------------------------------------ */

.lb-vins {
	padding: clamp(40px, 5vw, 80px) var(--gouttiere) clamp(50px, 6vw, 100px);
	background-color: var(--bord);
	background-image: linear-gradient(rgba(125, 3, 57, .985), rgba(125, 3, 57, .985)), var(--lb-fond, none);
	background-size: cover;
	background-position: center;
	color: var(--cream);
}

.lb-vins__entete {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 18px clamp(24px, 4vw, 60px);
	align-items: end;
}

.lb-vins__entete .lb-titre {
	font-size: clamp(30px, 4.6vw, 62px);
	line-height: .96;
}

.lb-vins__barre {
	position: sticky;
	top: 76px;
	z-index: 10;
	background: var(--bord);
	margin-top: clamp(24px, 3vw, 38px);
	padding: 18px 0;
	border-top: 1px solid rgba(255, 252, 234, .22);
	border-bottom: 1px solid rgba(255, 252, 234, .22);
}

/* Écran bas : bandeau et filtres sur deux lignes figeraient plus d'un quart
   de la hauteur pendant toute la liste. La barre reste en tête de liste. */
@media (min-width: 1150px) and (max-height: 900px) {
	.lb-vins__barre {
		position: static;
	}
}

/* Barre des filtres sur une ligne : couleurs, « Au verre », menus région et
   culture, compteur à droite. Elle reste collée en tête de liste : basse. */
.lb-filtres--bureau {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.lb-filtres--bureau .lb-filtres__valeurs {
	gap: 6px;
}

.lb-filtres--bureau .lb-pastille {
	min-height: 36px;
	padding: 0 13px;
}

.lb-filtres--bureau .lb-filtres__separateur {
	margin: 0 6px;
}

.lb-filtres__menu select {
	-webkit-appearance: none;
	appearance: none;
	min-height: 36px;
	padding: 0 34px 0 13px;
	border: 1px solid rgba(255, 252, 234, .32);
	border-radius: 0;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23fffcea' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 13px center;
	color: var(--cream);
	font: 700 10.5px/1 Barlow, sans-serif;
	letter-spacing: .14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color .18s, background-color .18s, color .18s;
}

.lb-filtres__menu select:hover {
	border-color: var(--cream);
}

.lb-filtres__menu select:focus-visible {
	outline: 2px solid var(--or);
	outline-offset: 2px;
}

/* Un menu qui filtre prend l'aspect d'une pastille active. */
.lb-filtres__menu select.est-actif {
	border-color: var(--cream);
	background-color: var(--cream);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2314100f' stroke-width='1.5'/%3E%3C/svg%3E");
	color: var(--ink);
}

.lb-filtres__menu option {
	background: var(--cream);
	color: var(--ink);
	text-transform: none;
	letter-spacing: 0;
}

/* Choix sans résultat avec les autres filtres en cours : grisé, inactif. */
.lb-filtres__menu option:disabled {
	color: rgba(20, 16, 15, .35);
}

.lb-pastille.est-vide,
.lb-pastille:disabled {
	opacity: .32;
	cursor: not-allowed;
	pointer-events: none;
}

.lb-filtres__label {
	font: 600 11px/1 Barlow, sans-serif;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(255, 252, 234, .78);
	white-space: nowrap;
}

.lb-filtres__valeurs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Couleur et culture se partagent la première ligne. */
.lb-filtres__rangee {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px clamp(10px, 1.4vw, 20px);
}

.lb-filtres__separateur {
	width: 1px;
	height: 22px;
	background: rgba(255, 252, 234, .26);
}

/* Rangée compteur + « Effacer les filtres », sur toute la largeur de la
   grille (le bouton est poussé à droite par sa marge automatique). */
.lb-filtres__etat {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 14px;
}

.lb-filtres__compact {
	display: none;
	align-items: center;
	gap: 10px;
}

.lb-filtres__declencheur {
	gap: 9px;
	min-height: 46px;
	padding: 0 16px;
	border-color: rgba(255, 252, 234, .5);
	color: var(--cream);
	font-size: 10.5px;
	letter-spacing: .16em;
}

.lb-filtres__declencheur:hover {
	background: var(--cream);
	color: var(--ink);
}

.lb-filtres__glyphe {
	display: block;
	width: 15px;
	height: 9px;
	background: repeating-linear-gradient(180deg, currentColor 0 1.5px, transparent 1.5px 4.5px);
}

.lb-filtres__compteur {
	font: 500 12px/1.3 Barlow, sans-serif;
	color: rgba(255, 252, 234, .8);
	font-variant-numeric: tabular-nums;
}

.lb-filtres__effacer {
	margin-left: auto;
	min-height: 46px;
	padding: 0 6px;
	border: 0;
	background: transparent;
	color: var(--or);
	font: 600 10.5px/1 Barlow, sans-serif;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: underline;
	cursor: pointer;
}

.lb-filtres--bureau .lb-filtres__effacer {
	margin-left: 0;
	min-height: 36px;
}

.lb-vins__liste {
	margin-top: clamp(18px, 2vw, 26px);
}

/* Ordinateur : deux colonnes de quilles sur toute la largeur. Grille par
   rangées : l'ordre de lecture reste gauche → droite, et chaque rangée
   aligne ses filets. Bouton « Voir la suite » et message vide en travers. */
@media (min-width: 1150px) {
	.lb-vins__liste {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: clamp(40px, 4.5vw, 72px);
	}

	.lb-vins__suite,
	.lb-vins__vide {
		grid-column: 1 / -1;
	}
}

.lb-vin {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 8px clamp(12px, 1.4vw, 20px);
	padding: 16px 0;
	border-bottom: 1px solid rgba(255, 252, 234, .13);
	transition: background .18s;
}

.lb-vin:hover {
	background: rgba(255, 252, 234, .045);
}

.lb-vin__pastille {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	margin-top: 10px;
	flex: none;
	background: var(--accent);
}

.lb-vin__pastille--blanc {
	background: var(--or);
}

.lb-vin__pastille--rose {
	background: #e3a49b;
}

/* Champagne : un anneau doré, pour le distinguer du blanc. */
.lb-vin__pastille--champagne {
	background: transparent;
	box-shadow: inset 0 0 0 2px var(--or);
}

.lb-vin__corps {
	flex: 1 1 220px;
	min-width: 0;
}

.lb-vin__entete {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 12px;
}

.lb-vin__nom {
	font: 400 clamp(19px, 1.9vw, 26px)/1.15 'Instrument Serif', serif;
}

.lb-vin__labels {
	font: 700 clamp(11px, .6vw + 8px, 12px)/1 Barlow, sans-serif;
	letter-spacing: .16em;
	text-transform: uppercase;
	padding: 6px 9px;
	border: 1px solid var(--or);
	color: var(--or);
}

.lb-vin__origine {
	margin-top: 6px;
	font: 500 12.5px/1.45 Barlow, sans-serif;
	letter-spacing: .02em;
	color: rgba(255, 252, 234, .78);
}

/* Cépages puis dégustation, sur deux lignes au plus avant de passer à la ligne. */
.lb-vin__notes {
	margin-top: 7px;
	max-width: 68ch;
	font: 400 14.5px/1.45 'Instrument Serif', serif;
	color: rgba(255, 252, 234, .72);
}

.lb-vin__cepages {
	display: block;
	margin-bottom: 2px;
	font: 500 12.5px/1.45 Barlow, sans-serif;
	letter-spacing: .02em;
	color: rgba(255, 252, 234, .86);
}

.lb-vin__accord {
	margin-top: 9px;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 5px 10px;
}

.lb-vin__etiquette {
	font: 600 clamp(11px, .6vw + 8px, 12px)/1 Barlow, sans-serif;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 252, 234, .78);
}

.lb-vin__accord .lb-vin__etiquette {
	font-weight: 700;
	color: var(--or);
}

.lb-vin__plat {
	font: 400 14.5px/1.35 'Instrument Serif', serif;
}

.lb-vin__prix {
	flex: 0 0 auto;
	margin-left: auto;
	display: flex;
	gap: clamp(14px, 1.8vw, 30px);
	white-space: nowrap;
	text-align: right;
}

.lb-vin__montant {
	margin-top: 6px;
	font: 600 15.5px/1 Barlow, sans-serif;
	font-variant-numeric: tabular-nums;
}

.lb-vins__suite {
	display: flex;
	justify-content: center;
	padding: clamp(24px, 3vw, 36px) 0 6px;
}

.lb-vins__vide {
	padding: 44px 0;
	text-align: center;
}

.lb-vins__vide p {
	font: 400 clamp(20px, 2vw, 26px)/1.3 'Instrument Serif', serif;
	margin-bottom: 18px;
}

/* Pop-up des filtres -------------------------------------------------- */

.lb-feuille {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 64;
	max-height: 86vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 20px clamp(20px, 5vw, 30px) 22px;
	background: var(--bord);
	color: var(--cream);
	border-top: 2px solid var(--cream);
	box-shadow: 0 -20px 50px rgba(20, 16, 15, .4);
	display: flex;
	flex-direction: column;
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .26s ease, transform .42s var(--entree);
}

.lb-feuille.est-ouvert {
	opacity: 1;
	transform: translateY(0);
}

.lb-feuille__entete {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(255, 252, 234, .2);
}

.lb-feuille__titre {
	font: 400 clamp(24px, 7vw, 32px)/1 'Instrument Serif', serif;
}

.lb-feuille__compteur {
	font: 500 12px/1.3 Barlow, sans-serif;
	color: rgba(255, 252, 234, .72);
	font-variant-numeric: tabular-nums;
}

.lb-feuille__fermer {
	margin-left: auto;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 252, 234, .3);
	background: transparent;
	color: var(--cream);
	font: 400 20px/1 Barlow, sans-serif;
	cursor: pointer;
}

.lb-feuille__corps {
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 20px 0 4px;
}

.lb-feuille__label {
	font: 600 11px/1 Barlow, sans-serif;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(255, 252, 234, .7);
}

.lb-feuille__valeurs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 11px;
}

.lb-feuille__bas {
	display: flex;
	gap: 10px;
	padding-top: 18px;
	margin-top: auto;
	border-top: 1px solid rgba(255, 252, 234, .2);
}

.lb-feuille__bas .lb-bouton {
	min-height: 52px;
}

.lb-feuille__valider {
	flex: 1;
}

/* Le mot du sommelier ------------------------------------------------- */

.lb-sommelier {
	position: relative;
	margin: clamp(34px, 4vw, 64px) calc(var(--gouttiere) * -1) 0;
	padding-top: clamp(26px, 3vw, 44px);
	border-top: 1px solid rgba(255, 252, 234, .22);
}

.lb-sommelier .lb-conteneur {
	padding: 0 var(--gouttiere);
}

.lb-sommelier__entete {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px clamp(24px, 4vw, 50px);
}

.lb-sommelier__entete .lb-titre {
	font-size: clamp(30px, 4vw, 54px);
}

.lb-sommelier__texte {
	max-width: 42ch;
	font: 400 clamp(14.5px, 1.2vw, 16.5px)/1.6 Barlow, sans-serif;
	color: rgba(255, 252, 234, .9);
}

.lb-bandeau--reels {
	margin-top: calc(clamp(26px, 3vw, 42px) - 12px);
	padding-top: 12px;
	mask-image: none;
	-webkit-mask-image: none;
}

.lb-bandeau--reels .lb-bandeau__groupe {
	align-items: flex-start;
	gap: clamp(12px, 1.4vw, 20px);
	padding-right: clamp(12px, 1.4vw, 20px);
}

.lb-reel {
	flex: none;
	width: clamp(196px, 21vw, 272px);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lb-reel__cadre {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 9/16;
	overflow: hidden;
	background: #241c1a center/cover no-repeat;
	transition: transform .5s var(--entree);
}

.lb-reel__cadre--vide {
	background: repeating-linear-gradient(135deg, #241c1a 0 12px, #191413 12px 24px);
}

.lb-reel__cadre:hover {
	transform: translateY(-10px);
}

.lb-reel__cadre video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Reel avec vidéo : la vignette est un bouton qui ouvre la pop-up. */
.lb-reel__cadre--video {
	width: 100%;
	padding: 0;
	border: 0;
	font: inherit;
	cursor: pointer;
}

.lb-reel__cadre--video::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 15, 14, 0) 55%, rgba(20, 15, 14, .45));
	transition: opacity .3s;
}

.lb-reel__cadre--video .lb-reel__lecture {
	position: relative;
	z-index: 1;
	background: rgba(20, 15, 14, .35);
	transition: background .25s, border-color .25s, transform .25s;
}

.lb-reel__cadre--video:hover .lb-reel__lecture,
.lb-reel__cadre--video:focus-visible .lb-reel__lecture {
	background: var(--accent);
	border-color: var(--accent);
	transform: scale(1.08);
}

.lb-reel__cadre--video:focus-visible {
	outline: 2px solid var(--cream);
	outline-offset: 3px;
}

.lb-reel__lecture {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 252, 234, .7);
	display: flex;
	align-items: center;
	justify-content: center;
	font: 400 17px/1 Barlow, sans-serif;
	color: var(--cream);
}

.lb-reel__format {
	position: absolute;
	left: 13px;
	bottom: 13px;
	font: 400 clamp(11px, .6vw + 8px, 12px)/1.5 ui-monospace, Menlo, monospace;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(255, 252, 234, .62);
}

.lb-reel__nom {
	font: 400 clamp(18px, 1.6vw, 22px)/1.2 'Instrument Serif', serif;
}

.lb-reel__soustitre {
	margin-top: 5px;
	font: 600 11px/1.4 Barlow, sans-serif;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 252, 234, .72);
}

/* ------------------------------------------------------------------ *
 * 10. L'équipe, les avis
 * ------------------------------------------------------------------ */

.lb-equipe {
	position: relative;
	padding: 0 var(--gouttiere);
}

.lb-equipe__fond {
	position: relative;
	margin: 0 calc(var(--gouttiere) * -1);
	min-height: clamp(430px, 48vw, 640px);
	background: #efe8d4 center/cover no-repeat;
	display: flex;
	align-items: flex-end;
	padding: clamp(110px, 22vw, 180px) var(--gouttiere) clamp(22px, 3vw, 46px);
}

.lb-equipe__fond--vide {
	background: repeating-linear-gradient(135deg, #efe8d4 0 12px, #e5ddc8 12px 24px);
}

.lb-equipe__carte {
	position: relative;
	width: 100%;
	max-width: 640px;
	background: var(--cream);
	padding: clamp(24px, 3vw, 42px);
	box-shadow: 0 14px 44px rgba(20, 16, 15, .16);
}

.lb-equipe__carte .lb-titre {
	font-size: clamp(28px, 3.6vw, 48px);
}

.lb-equipe__texte {
	margin-top: 20px;
	font: 400 clamp(14.5px, 1.25vw, 16.5px)/1.62 Barlow, sans-serif;
}

.lb-equipe__texte strong {
	font-weight: 600;
}

.lb-equipe__carte > .lb-bouton {
	margin-top: 24px;
}

.lb-avis {
	position: relative;
	padding: clamp(44px, 6vw, 90px) 0;
	border-top: var(--filet);
}

.lb-avis__entete {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 14px clamp(22px, 3vw, 44px);
	padding: 0 var(--gouttiere);
}

.lb-avis__lien {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-left: auto;
}

.lb-avis__lien a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font: 600 11px/1 Barlow, sans-serif;
	letter-spacing: .14em;
	text-transform: uppercase;
	white-space: nowrap;
}

.lb-avis__corps {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: clamp(16px, 2vw, 28px);
	margin-top: clamp(24px, 3vw, 38px);
}

.lb-avis__lignes {
	flex: 1 1 520px;
	min-width: 0;
	order: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: clamp(12px, 1.4vw, 18px);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.lb-bandeau--avis {
	margin-top: 0;
	mask-image: none;
	-webkit-mask-image: none;
}

.lb-bandeau--avis .lb-bandeau__piste {
	align-items: stretch;
	animation-duration: calc(var(--mq) * 2);
}

.lb-bandeau--avis.lb-bandeau--inverse .lb-bandeau__piste {
	animation-duration: calc(var(--mq) * 2.4);
}

.lb-bandeau--avis .lb-bandeau__groupe {
	align-items: stretch;
	gap: clamp(12px, 1.4vw, 18px);
	padding-right: clamp(12px, 1.4vw, 18px);
}

.lb-avis__carte {
	flex: none;
	width: min(78vw, 330px);
	margin: 0;
	border: 1px solid rgba(20, 16, 15, .2);
	background: var(--cream);
	padding: clamp(18px, 2vw, 24px);
	display: flex;
	flex-direction: column;
	gap: 13px;
}

.lb-avis__texte {
	margin: 0;
	flex: 1;
	font: 400 clamp(16px, 1.45vw, 19px)/1.5 'Instrument Serif', serif;
	color: rgba(20, 16, 15, .82);
}

.lb-avis__signature {
	font: 600 11.5px/1 Barlow, sans-serif;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(20, 16, 15, .75);
}

.lb-presse {
	flex: 0 1 clamp(280px, 30vw, 420px);
	margin-right: var(--gouttiere);
	order: 2;
	align-self: stretch;
	background: var(--accent);
	color: var(--cream);
	padding: clamp(20px, 2.2vw, 28px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
}

.lb-presse__entete {
	display: flex;
	align-items: center;
	gap: 12px;
}

.lb-presse__entete .lb-mono {
	color: rgba(255, 252, 234, .88);
	line-height: 1.5;
}

.lb-presse__texte {
	font: 400 clamp(14.5px, 1.15vw, 16px)/1.55 'Instrument Serif', serif;
}

/* ------------------------------------------------------------------ *
 * 11. La terrasse et sa météo
 * ------------------------------------------------------------------ */

.lb-terrasse {
	position: relative;
	overflow: hidden;
	padding: clamp(44px, 6vw, 96px) var(--gouttiere);
	border-top: var(--filet);
}

.lb-terrasse__entete {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 14px clamp(24px, 4vw, 50px);
}

.lb-terrasse__texte {
	max-width: 40ch;
	font: 400 clamp(14.5px, 1.2vw, 16.5px)/1.6 Barlow, sans-serif;
	color: rgba(20, 16, 15, .85);
}

.lb-terrasse__cta {
	margin-left: auto;
	padding: 16px 24px;
}

/* Hors saison : une mention à la place du bouton et de la météo. */
.lb-terrasse__saison {
	margin-left: auto;
	padding: 14px 20px;
	border: 1px solid var(--accent);
	font: 700 11px/1.2 Barlow, sans-serif;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--accent);
}

.lb-meteo {
	margin-top: clamp(22px, 2.6vw, 32px);
	border-top: var(--filet);
	border-bottom: var(--filet);
	overflow-x: auto;
	scrollbar-width: none;
}

.lb-meteo::-webkit-scrollbar {
	display: none;
}

.lb-meteo__grille {
	display: grid;
	grid-template-columns: auto repeat(7, minmax(74px, 1fr));
	align-items: stretch;
	min-width: max-content;
}

.lb-meteo__intro {
	position: sticky;
	left: 0;
	z-index: 1;
	background: var(--cream);
	min-width: 150px;
	padding: 14px 18px 14px 0;
	border-right: var(--filet);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 7px;
}

.lb-meteo__titre {
	font: 700 10.5px/1 Barlow, sans-serif;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--accent);
}

.lb-meteo__regle {
	font: 400 12px/1.4 Barlow, sans-serif;
	color: rgba(20, 16, 15, .6);
}

.lb-meteo__jour {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	padding: 14px 10px;
	text-align: center;
	border-right: 1px solid rgba(20, 16, 15, .1);
}

.lb-meteo__jour:last-child {
	border-right: 0;
}

.lb-meteo__jour--aujourdhui {
	background: rgba(20, 16, 15, .035);
}

.lb-meteo__date {
	font: 600 10.5px/1 Barlow, sans-serif;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(20, 16, 15, .62);
}

/* Deux services par jour, l'un sous l'autre, séparés d'un filet. */
.lb-meteo__service {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	width: 100%;
	padding-top: 10px;
	margin-top: 4px;
	border-top: 1px solid rgba(20, 16, 15, .1);
}

.lb-meteo__moment {
	font: 700 11px/1 Barlow, sans-serif;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--accent);
}

/* Service sans ouverture : en gris, sans opacité, qui ferait tomber le
   contraste sous 2:1. « Fermée » reste une information à lire (4,5:1). */
.lb-meteo__service--sans .lb-meteo__moment,
.lb-meteo__service--sans .lb-meteo__temp,
.lb-meteo__service--sans .lb-meteo__ciel,
.lb-meteo__service--sans .lb-meteo__etat {
	color: rgba(20, 16, 15, .68);
}

.lb-meteo__temp {
	font: 400 clamp(20px, 1.8vw, 26px)/1 'Instrument Serif', serif;
	font-variant-numeric: tabular-nums;
}

.lb-meteo__icone {
	display: block;
	font: 400 20px/1 ui-sans-serif, system-ui, sans-serif;
	color: rgba(20, 16, 15, .32);
}

.lb-meteo__icone.est-ouvert {
	color: var(--accent);
}

.lb-meteo__ciel {
	font: 400 11px/1.3 Barlow, sans-serif;
	color: rgba(20, 16, 15, .72);
}

/* L'état seul, en couleur : rouge fermé, vert ouvert. Gris quand il n'y a
   tout simplement pas de service ce jour-là — ce n'est pas la météo qui ferme. */
/* Libellés parfois longs (« Pas de service », « Prévision à venir ») dans
   des colonnes étroites : ils passent à la ligne. */
.lb-meteo__etat {
	display: inline-block;
	margin-top: 2px;
	font: 700 11px/1.2 Barlow, sans-serif;
	letter-spacing: .14em;
	text-transform: uppercase;
	white-space: normal;
	color: var(--accent);
}

.lb-meteo__etat.est-ouvert {
	color: var(--vert);
}

.lb-terrasse__visuels {
	margin-top: clamp(24px, 3vw, 38px);
	display: flex;
	flex-direction: column;
	gap: clamp(10px, 1.2vw, 14px);
}

.lb-terrasse__vignettes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: clamp(10px, 1.2vw, 14px);
}

/* ------------------------------------------------------------------ *
 * 12. Appel, carte cadeau, privatisation
 * ------------------------------------------------------------------ */

.lb-appel {
	position: relative;
	overflow: hidden;
	padding: clamp(50px, 7vw, 110px) var(--gouttiere);
	background-color: var(--accent);
	background-image: linear-gradient(rgba(180, 29, 29, .86), rgba(180, 29, 29, .86)), var(--lb-motif, none);
	background-repeat: no-repeat, repeat;
	background-size: auto, 360px;
	color: var(--cream);
	text-align: center;
}

.lb-appel__titre {
	margin: 0 auto;
	max-width: 24ch;
	font: 900 clamp(32px, 5.6vw, 76px)/.96 'Barlow Condensed', sans-serif;
	letter-spacing: -.012em;
	text-transform: uppercase;
}

.lb-appel__boutons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: clamp(24px, 3vw, 38px);
}

.lb-appel__boutons .lb-bouton {
	padding: 18px 30px;
	font-size: 12px;
}

.lb-cadeau {
	position: relative;
	padding: clamp(40px, 5vw, 84px) var(--gouttiere);
	background-color: var(--bord);
	background-image: linear-gradient(rgba(125, 3, 57, .955), rgba(125, 3, 57, .955)), var(--lb-fond, none);
	background-size: cover;
	background-position: center;
	color: var(--cream);
}

.lb-cadeau__grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
}

.lb-cadeau__grille .lb-titre {
	font-size: clamp(30px, 4.4vw, 58px);
	line-height: .96;
}

.lb-cadeau__texte {
	max-width: 50ch;
	font: 400 clamp(15px, 1.3vw, 17px)/1.62 Barlow, sans-serif;
	color: rgba(255, 252, 234, .9);
}

.lb-cadeau__boutons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 26px;
}

.lb-privatisation {
	position: relative;
	padding: clamp(44px, 6vw, 96px) var(--gouttiere);
}

.lb-privatisation__entete {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px clamp(24px, 4vw, 50px);
}

.lb-privatisation__texte {
	max-width: 46ch;
	font: 400 clamp(14.5px, 1.2vw, 16.5px)/1.62 Barlow, sans-serif;
	color: rgba(20, 16, 15, .85);
}

.lb-privatisation__corps {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(16px, 2vw, 26px);
	margin-top: clamp(26px, 3.5vw, 44px);
	align-items: stretch;
}

.lb-privatisation__encart {
	flex: 1 1 280px;
	max-width: 480px;
	background: var(--ink);
	color: var(--cream);
	padding: clamp(22px, 2.6vw, 34px);
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.lb-privatisation__nombre {
	font: 400 clamp(44px, 5vw, 68px)/1 'Instrument Serif', serif;
	color: var(--or);
}

.lb-privatisation__legende {
	margin-top: 8px;
	font: 600 10.5px/1.5 Barlow, sans-serif;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.lb-privatisation__ligne {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	padding: 13px 0;
	border-top: var(--filet-clair);
	font: 400 14px/1.4 Barlow, sans-serif;
}

.lb-privatisation__valeur {
	color: var(--or);
}

.lb-privatisation__note {
	font: 400 13.5px/1.6 Barlow, sans-serif;
	color: rgba(255, 252, 234, .86);
}

.lb-privatisation__encart .lb-bouton {
	margin-top: auto;
}

/* Formulaire ---------------------------------------------------------- */

.lb-formulaire {
	flex: 2 1 420px;
	min-width: 0;
	border: 1px solid rgba(20, 16, 15, .24);
	padding: clamp(22px, 2.6vw, 34px);
	background: rgba(20, 16, 15, .02);
}

.lb-formulaire__form {
	display: flex;
	flex-direction: column;
	gap: clamp(18px, 2vw, 24px);
}

.lb-formulaire__duo {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 18px clamp(16px, 2vw, 26px);
}

.lb-formulaire__grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 16px clamp(16px, 2vw, 26px);
}

.lb-choix {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.lb-compteur {
	display: flex;
	align-items: center;
	gap: 10px;
}

.lb-compteur__bouton {
	width: 44px;
	height: 44px;
	border: 1px solid rgba(20, 16, 15, .34);
	background: transparent;
	color: var(--ink);
	font: 400 20px/1 Barlow, sans-serif;
	cursor: pointer;
	transition: background .18s, color .18s;
}

.lb-compteur__bouton:hover {
	background: var(--ink);
	color: var(--cream);
}

.lb-compteur__bouton[aria-disabled="true"] {
	opacity: .35;
	cursor: not-allowed;
}

.lb-compteur__valeur {
	min-width: 52px;
	text-align: center;
	font: 400 30px/1 'Instrument Serif', serif;
	font-variant-numeric: tabular-nums;
}

/* Le nombre est un champ saisissable : même aspect que le chiffre de la
   maquette, sans flèches ni cadre, souligné d'un filet. */
input.lb-compteur__valeur {
	width: 72px;
	min-width: 0;
	padding: 0;
	border: 0;
	border-bottom: 1px solid rgba(20, 16, 15, .34);
	border-radius: 0;
	background: transparent;
	color: var(--ink);
	text-align: center;
	appearance: textfield;
	-moz-appearance: textfield;
}

input.lb-compteur__valeur::-webkit-inner-spin-button,
input.lb-compteur__valeur::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Le contour de focus global reste visible ; le filet passe à l'accent. */
input.lb-compteur__valeur:focus {
	border-bottom-color: var(--accent);
}

input.lb-compteur__valeur[aria-invalid="true"] {
	border-bottom: 2px solid var(--accent);
}

.lb-champ-texte {
	display: block;
}

.lb-champ-texte .lb-etiquette {
	margin-bottom: 4px;
	letter-spacing: .18em;
}

.lb-champ-texte input,
.lb-champ-texte textarea {
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(20, 16, 15, .34);
	padding: 11px 2px;
	/* 16px : sous cette taille, Safari iOS zoome sur le champ au focus. */
	font: 400 16px/1.3 Barlow, sans-serif;
	color: var(--ink);
	outline: none;
	border-radius: 0;
	transition: border-color .2s, box-shadow .2s;
}

.lb-champ-texte input {
	min-height: 44px;
}

.lb-champ-texte textarea {
	resize: vertical;
}

/* Focus : filet d'encre de 3px, distinct de l'erreur (2px d'accent). Le
   contour global est remplacé par ce soulignement, plus proche du dessin. */
.lb-champ-texte input:focus,
.lb-champ-texte textarea:focus {
	border-bottom-color: var(--ink);
	box-shadow: 0 2px 0 0 var(--ink);
}

.lb-champ-texte input[aria-invalid="true"]:focus,
.lb-champ-texte textarea[aria-invalid="true"]:focus {
	border-bottom-color: var(--accent);
	box-shadow: 0 2px 0 0 var(--accent);
}

.lb-champ-texte input::placeholder,
.lb-champ-texte textarea::placeholder {
	color: rgba(20, 16, 15, .48);
}

.lb-champ-texte input[aria-invalid="true"],
.lb-champ-texte textarea[aria-invalid="true"] {
	border-bottom-color: var(--accent);
	border-bottom-width: 2px;
}

.lb-consentement {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	cursor: pointer;
	font: 400 12.5px/1.55 Barlow, sans-serif;
	color: rgba(20, 16, 15, .78);
}

.lb-consentement input {
	width: 17px;
	height: 17px;
	margin-top: 2px;
	accent-color: var(--accent);
	flex: none;
}

.lb-consentement input[aria-invalid="true"] {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* Mention « * obligatoire », en tête des deux formulaires. */
.lb-formulaire__mention {
	font: 400 12px/1.4 Barlow, sans-serif;
	color: rgba(20, 16, 15, .72);
}

/* Message d'erreur sous un champ : 6,5:1 sur le crème. Rouge fixe, et non
   l'accent, réglable dans le personnaliseur. */
.lb-champ__erreur {
	display: block;
	margin-top: 6px;
	font: 500 12px/1.4 Barlow, sans-serif;
	color: #b41d1d;
}

.lb-formulaire__appat {
	position: absolute;
	left: -9999px;
}

.lb-formulaire__pied {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 20px;
	padding-top: clamp(16px, 2vw, 22px);
	border-top: 1px solid rgba(20, 16, 15, .2);
}

.lb-formulaire__pied .lb-bouton {
	margin-left: auto;
	padding: 17px 28px;
	font-size: 11.5px;
}

.lb-formulaire__erreur {
	font: 500 13px/1.5 Barlow, sans-serif;
	color: var(--accent);
}

.lb-formulaire__merci {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
}

.lb-formulaire__titre {
	font: 400 clamp(24px, 2.6vw, 34px)/1.2 'Instrument Serif', serif;
}

.lb-formulaire__recap {
	border: 1px solid rgba(20, 16, 15, .24);
	padding: 16px;
	font: 500 13px/1.7 Barlow, sans-serif;
}

.lb-formulaire__note {
	font: 400 13.5px/1.6 Barlow, sans-serif;
	color: rgba(20, 16, 15, .78);
}

/* ------------------------------------------------------------------ *
 * 13. Pied de page
 * ------------------------------------------------------------------ */

.lb-footer {
	padding: clamp(44px, 6vw, 86px) var(--gouttiere) 0;
	background: var(--ink);
	color: var(--cream);
}

/* Première colonne plus large (300px au moins) : le logo et la pancarte du
   Petit Futé y tiennent côte à côte. Les autres colonnes se répartissent le
   reste. Version fluide sous 1150 px, voir la bascule mobile. */
.lb-footer__grille {
	display: grid;
	grid-template-columns: minmax(300px, 1.4fr) repeat(auto-fit, minmax(190px, 1fr));
	gap: clamp(28px, 3.5vw, 52px);
}

/* Alignés par le bas : la pancarte a la hauteur du logo, son libellé
   « Recommandé par » dépasse au-dessus au lieu de la décaler. */
.lb-footer__entete {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px clamp(20px, 2.4vw, 34px);
}

.lb-footer__logo {
	height: var(--lb-hauteur-logo);
	width: auto;
	display: block;
}

.lb-footer__presse {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.lb-footer__presse img {
	height: 52px;
	width: auto;
	display: block;
}

/* Plaque Petit Futé — pied de page (widget) et encart des avis (sa copie).
   Le script tiers injecte deux conteneurs imbriqués portant `width:100px;
   height:160px` en style inline, avec la pancarte en image de fond. D'où le
   `!important` — seul moyen de passer devant un style inline — et le ratio
   100/160 conservé pour ne pas déformer la plaque. */
/* `line-height: 0` : pas d'interligne sous la plaque en ligne. */
.lb-plaque-pf a {
	display: block;
	line-height: 0;
}

.lb-plaque-pf div {
	height: var(--lb-hauteur-logo) !important;
	width: calc(var(--lb-hauteur-logo) * .625) !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
}

/* Petit logo interne du widget : borné, sinon il ressort de la plaque. */
.lb-plaque-pf div img {
	max-height: 100%;
	max-width: 100%;
	height: auto;
	width: auto;
}

/* Badge de repli, tant que le widget n'a pas pris sa place. */
.lb-plaque-pf > a > img {
	height: var(--lb-hauteur-logo);
	width: auto;
	display: block;
}

.lb-footer__presse .lb-mono {
	color: rgba(255, 252, 234, .8);
}

.lb-footer__texte {
	margin-top: 20px;
	font: 400 13.5px/1.65 Barlow, sans-serif;
	color: rgba(255, 252, 234, .84);
}

.lb-reseaux--footer {
	margin-top: 20px;
}

.lb-footer__titre {
	font: 700 10.5px/1 Barlow, sans-serif;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--or);
	margin: 0 0 16px;
}

.lb-footer__nav a {
	display: block;
	padding: 6px 0;
	font: 400 14px/1.4 Barlow, sans-serif;
	color: rgba(255, 252, 234, .86);
}

.lb-footer__nav a:hover {
	color: var(--cream);
}

.lb-footer__adresse {
	display: block;
	font: 400 17px/1.4 'Instrument Serif', serif;
}

/* Téléphone et e-mail : chacun sur sa ligne, avec une zone cliquable d’au
   moins 32 px de haut pour ne pas se toucher, au doigt comme à la souris. */
.lb-footer__tel,
.lb-footer__email {
	display: flex;
	align-items: center;
	width: fit-content;
	max-width: 100%;
	min-height: 32px;
}

.lb-footer__tel {
	margin-top: 10px;
	font: 600 17px/1.2 Barlow, sans-serif;
	letter-spacing: .02em;
}

.lb-footer__email {
	overflow-wrap: anywhere;
}

.lb-footer__seo {
	margin-top: clamp(24px, 2.6vw, 36px);
	padding-top: clamp(16px, 1.8vw, 22px);
	border-top: var(--filet-clair);
}

.lb-footer__seo-titre {
	font: 700 clamp(11px, .6vw + 8px, 12px)/1.4 Barlow, sans-serif;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(232, 217, 168, .85);
	margin: 0 0 8px;
}

.lb-footer__seo-liens {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 18px;
	align-items: baseline;
}

.lb-footer__seo-liens a {
	display: block;
	padding: 6px 0;
	font: 400 11.5px/1.5 Barlow, sans-serif;
	letter-spacing: .01em;
	color: rgba(255, 252, 234, .66);
}

.lb-footer__seo-liens a:hover {
	color: var(--cream);
}

.lb-footer__seo-texte {
	margin-top: 10px;
	font: 400 11.5px/1.55 Barlow, sans-serif;
	color: rgba(255, 252, 234, .68);
}

.lb-footer__bas {
	margin-top: clamp(18px, 2vw, 26px);
	padding: 16px 0;
	border-top: var(--filet-clair);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 22px;
	font: 400 11.5px/1.5 Barlow, sans-serif;
	color: rgba(255, 252, 234, .7);
}

.lb-footer__copyright {
	margin-left: auto;
}

.lb-footer__signature {
	display: flex;
	align-items: center;
	gap: 9px;
	min-height: 44px;
	opacity: .75;
	transition: opacity .2s;
}

.lb-footer__signature:hover {
	opacity: 1;
}

.lb-footer__signature img {
	height: 28px;
	width: auto;
	display: block;
	filter: invert(1);
}

/* ------------------------------------------------------------------ *
 * 14. Stickers, pages simples, apparitions
 * ------------------------------------------------------------------ */

.lb-sticker {
	position: absolute;
	height: auto;
	pointer-events: none;
	user-select: none;
	z-index: 6;
}

.lb-sticker--circuit {
	left: 44%;
	top: 78%;
	width: clamp(106px, 11vw, 200px);
	transform: rotate(7deg);
	z-index: 1;
}

.lb-sticker--viandes {
	top: 56px;
	right: clamp(-40px, -2vw, 0px);
	width: clamp(120px, 13vw, 230px);
	transform: translateY(-50%) rotate(-9deg);
}

.lb-sticker--vins {
	top: 189px;
	right: clamp(-40px, -2vw, 0px);
	width: clamp(122px, 13vw, 225px);
	transform: translateY(-50%) rotate(11deg);
}

.lb-sticker--avis {
	top: -6px;
	right: clamp(-30px, -1vw, 10px);
	width: clamp(116px, 12vw, 215px);
	transform: translate(0, -50%) rotate(6deg);
}

.lb-sticker--cadeau {
	top: -172px;
	right: clamp(-40px, -2vw, 0px);
	width: clamp(118px, 12.5vw, 220px);
	transform: rotate(-7deg);
	z-index: 1;
}

.lb-sticker--privatisation {
	top: -7px;
	left: clamp(20px, 6vw, 109px);
	width: clamp(112px, 12vw, 210px);
	transform: translateY(-50%) rotate(-6deg);
}

.lb-page-simple {
	padding: clamp(48px, 7vw, 96px) var(--gouttiere);
}

.lb-contenu {
	margin-top: 24px;
	max-width: 70ch;
	font: 400 16px/1.65 Barlow, sans-serif;
}

.lb-contenu p {
	margin-bottom: 1em;
}

/* Interlignage propre aux intertitres, sinon hérité du texte courant (1,65). */
.lb-contenu h2,
.lb-contenu h3 {
	margin: 1.6em 0 .4em;
	line-height: 1.15;
	font-family: 'Barlow Condensed', sans-serif;
	text-transform: uppercase;
	letter-spacing: .02em;
}

.lb-contenu a {
	color: var(--accent);
	text-decoration: underline;
}

/* Résultats de recherche (index.php). */
.lb-recherche__liste {
	margin: clamp(18px, 2vw, 26px) 0 0;
	padding-left: 1.2em;
	font: 400 17px/1.6 Barlow, sans-serif;
}

.lb-recherche__liste a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.lb-404 {
	text-align: center;
}

.lb-404__texte {
	margin: 20px auto 0;
	max-width: 46ch;
	font: 400 16px/1.6 Barlow, sans-serif;
	color: rgba(20, 16, 15, .8);
}

.lb-404__liens {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 30px;
}

@keyframes lb-apparition {
	from { opacity: 0; transform: translateY(22px); }
	to { opacity: 1; transform: none; }
}

.lb-revele {
	animation: lb-apparition .7s var(--entree) both;
	animation-timeline: view();
	animation-range: entry 0% cover 30%;
}

/* Repli pour les navigateurs sans `animation-timeline` (Safari, Firefox) :
   le script pose la classe au passage dans le champ de vision. */
@supports not (animation-timeline: view()) {
	.lb-revele {
		animation: none;
		opacity: 0;
		transform: translateY(22px);
		transition: opacity .7s var(--entree), transform .7s var(--entree);
	}

	.lb-revele.est-visible {
		opacity: 1;
		transform: none;
	}
}


/* ------------------------------------------------------------------ *
 * 15. Recrutement
 * ------------------------------------------------------------------ */

.lb-pastille-nombre {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	margin-left: 7px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--accent);
	color: var(--cream);
	font: 700 10.5px/1 Barlow, sans-serif;
	font-variant-numeric: tabular-nums;
	vertical-align: middle;
}

/* Le lien du pied de page se distingue des autres entrées par sa couleur. */
.lb-footer__recrutement {
	display: block;
	padding: 6px 0;
	font: 400 14px/1.4 Barlow, sans-serif;
	color: var(--or);
}

.lb-footer__recrutement:hover {
	color: var(--cream);
}

.lb-equipe__boutons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 24px;
}

.lb-bouton--recrutement {
	gap: 9px;
	padding: 14px 18px;
	border-color: rgba(20, 16, 15, .3);
	color: var(--ink);
	font-size: 10.5px;
	letter-spacing: .14em;
}

.lb-bouton--recrutement:hover {
	border-color: var(--accent);
	color: var(--accent);
}

/* En-tête de la page ------------------------------------------------- */

.lb-recrut__entete {
	padding: clamp(34px, 4.5vw, 68px) var(--gouttiere) clamp(24px, 3vw, 38px);
}

.lb-recrut__entete-grille {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 18px clamp(24px, 4vw, 56px);
}

.lb-recrut__titre {
	margin: 16px 0 0;
	font: 900 clamp(36px, 6vw, 86px)/.94 'Barlow Condensed', sans-serif;
	letter-spacing: -.012em;
	text-transform: uppercase;
	max-width: 16ch;
	text-wrap: balance;
}

.lb-recrut__chapo {
	margin-bottom: 6px;
	max-width: 46ch;
	font: 400 clamp(14.5px, 1.2vw, 16px)/1.6 Barlow, sans-serif;
	color: rgba(20, 16, 15, .82);
}

/* Les postes --------------------------------------------------------- */

.lb-postes {
	padding: 0 var(--gouttiere) clamp(34px, 4vw, 60px);
}

.lb-postes__liste {
	display: flex;
	flex-direction: column;
	border-top: 1px solid rgba(20, 16, 15, .22);
}

.lb-poste {
	border-bottom: 1px solid rgba(20, 16, 15, .22);
}

.lb-poste__entete {
	margin: 0;
	font: inherit;
}

.lb-poste__bouton {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px clamp(14px, 2vw, 26px);
	padding: clamp(20px, 2.4vw, 30px) 0;
	background: transparent;
	border: 0;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.lb-poste__numero {
	flex: none;
	width: 30px;
	font: 400 clamp(15px, 1.3vw, 19px)/1 'Instrument Serif', serif;
	color: var(--accent);
}

.lb-poste__titre {
	flex: 1;
	min-width: 0;
	font: 900 clamp(22px, 2.8vw, 38px)/1.05 'Barlow Condensed', sans-serif;
	letter-spacing: -.005em;
	text-transform: uppercase;
	transition: color .24s var(--entree);
}

.lb-poste.est-ouvert .lb-poste__titre {
	color: var(--accent);
}

.lb-poste__contrat {
	font: 600 10.5px/1 Barlow, sans-serif;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(20, 16, 15, .62);
}

.lb-poste__signe {
	flex: none;
	font: 400 26px/1 Barlow, sans-serif;
	color: rgba(20, 16, 15, .5);
	transition: transform .3s var(--glissement), color .24s var(--entree);
}

.lb-poste.est-ouvert .lb-poste__signe {
	color: var(--accent);
	transform: rotate(45deg);
}

/* Replié par le script seulement : sans JavaScript, tout reste lisible. */
.lb-poste__panneau {
	overflow: hidden;
}

/* Replié, le panneau sort aussi de l'ordre de tabulation et de l'arbre
   d'accessibilité (`visibility`), une fois la fermeture animée. */
.lb-poste[data-lb-replie] .lb-poste__panneau {
	max-height: 0;
	opacity: 0;
	visibility: hidden;
	transition: max-height .45s var(--entree), opacity .3s ease, visibility 0s linear .45s;
}

.lb-poste[data-lb-replie].est-ouvert .lb-poste__panneau {
	max-height: 1600px;
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

/* Sur grand écran, tous les blocs du poste sur une ligne (quatre au plus) :
   jamais d'encart des conditions seul sous les autres. */
.lb-poste__grille {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: clamp(20px, 3vw, 48px);
	padding: 0 0 clamp(26px, 3vw, 40px);
}

.lb-poste__label {
	display: block;
	font: 600 11px/1 Barlow, sans-serif;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--accent);
}

.lb-poste__texte {
	margin-top: 12px;
	font: 400 14.5px/1.65 Barlow, sans-serif;
	color: rgba(20, 16, 15, .86);
}

.lb-poste__points {
	margin: 12px 0 0;
	padding-left: 18px;
	font: 400 14.5px/1.7 Barlow, sans-serif;
	color: rgba(20, 16, 15, .86);
}

.lb-poste__points li {
	margin-bottom: 4px;
}

.lb-poste__conditions {
	background: var(--ink);
	color: var(--cream);
	padding: clamp(18px, 2vw, 26px);
	display: flex;
	flex-direction: column;
	align-self: start;
}

.lb-poste__condition {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	padding: 12px 0;
	border-top: 1px solid rgba(255, 252, 234, .2);
}

.lb-poste__condition:first-child {
	border-top: 0;
}

.lb-poste__condition-cle {
	font: 400 13.5px/1.4 Barlow, sans-serif;
	color: rgba(255, 252, 234, .8);
}

.lb-poste__condition-valeur {
	font: 600 13.5px/1.4 Barlow, sans-serif;
	color: var(--or);
	text-align: right;
}

.lb-poste__postuler {
	margin-top: 18px;
	padding: 15px 18px;
}

/* La candidature ----------------------------------------------------- */

.lb-candidature {
	padding: clamp(40px, 5vw, 78px) var(--gouttiere) clamp(46px, 5.5vw, 86px);
	background: var(--accent);
	color: var(--cream);
}

.lb-candidature__entete {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
}

.lb-candidature__titre {
	font: 900 clamp(28px, 3.6vw, 48px)/1 'Barlow Condensed', sans-serif;
	letter-spacing: -.01em;
	text-transform: uppercase;
}

.lb-candidature__manuscrit {
	font-size: .96em;
	color: #ffe9b8;
}

.lb-candidature__chapo {
	max-width: 52ch;
	font: 400 14px/1.6 Barlow, sans-serif;
	color: rgba(255, 252, 234, .88);
}

.lb-candidature__carte {
	margin: clamp(22px, 2.6vw, 34px) auto 0;
	max-width: 820px;
	border: 1px solid rgba(20, 16, 15, .18);
	padding: clamp(22px, 2.6vw, 36px);
	background: var(--cream);
	color: var(--ink);
}

.lb-candidature__carte .lb-formulaire__form {
	display: flex;
	flex-direction: column;
	gap: clamp(18px, 2vw, 24px);
}

/* Quatre champs : deux colonnes au plus (`100% / 3` interdit la troisième),
   une seule sur téléphone. Pas de champ seul sur sa ligne. */
.lb-candidature__carte .lb-formulaire__grille {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, max(220px, 100% / 3)), 1fr));
}

/* Champs encadrés, propres à cette page. */
.lb-champ-encadre {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.lb-champ-encadre .lb-etiquette {
	margin-bottom: 0;
}

.lb-champ-encadre input,
.lb-champ-encadre textarea {
	width: 100%;
	padding: 13px 14px;
	border: 1px solid rgba(20, 16, 15, .3);
	background: var(--cream);
	color: var(--ink);
	/* 16px : pas de zoom automatique au focus sur iPhone. */
	font: 400 16px/1.2 Barlow, sans-serif;
	border-radius: 0;
	transition: border-color .2s;
}

.lb-champ-encadre textarea {
	line-height: 1.5;
	resize: vertical;
}

.lb-champ-encadre input:focus,
.lb-champ-encadre textarea:focus {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-color: var(--accent);
}

.lb-champ-encadre input[aria-invalid="true"],
.lb-champ-encadre textarea[aria-invalid="true"] {
	border-color: var(--accent);
	border-width: 2px;
}

/* Zone de dépôt du CV. */
.lb-depot {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 104px;
	padding: 18px;
	text-align: center;
	cursor: pointer;
	border: 1px dashed rgba(20, 16, 15, .35);
	transition: border-color .2s, background .2s;
}

.lb-depot:hover {
	border-color: var(--accent);
}

/* Le champ fichier est invisible : c'est la zone qui porte le focus. */
.lb-depot:focus-within {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-color: var(--accent);
	border-style: solid;
}

.lb-depot:has(input[aria-invalid="true"]) {
	border-color: var(--accent);
	border-style: solid;
}

.lb-depot.est-rempli {
	border-color: var(--accent);
	background: rgba(180, 29, 29, .05);
}

.lb-depot.est-survole {
	border-color: var(--accent);
	background: rgba(180, 29, 29, .09);
}

.lb-depot input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.lb-depot__libelle {
	font: 600 13.5px/1.4 Barlow, sans-serif;
	overflow-wrap: anywhere;
}

.lb-depot__aide {
	font: 400 12px/1.4 Barlow, sans-serif;
	color: rgba(20, 16, 15, .6);
}

.lb-candidature__pied {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

.lb-candidature__pied .lb-bouton {
	padding: 17px 26px;
	font-size: 11.5px;
}

/* ------------------------------------------------------------------ *
 * Bascule mobile — 1150 px
 * ------------------------------------------------------------------ */

@media (max-width: 1149px) {

	.lb-nav,
	.lb-header__actions {
		display: none;
	}

	.lb-header__mobile {
		display: flex;
	}

	.lb-sticker {
		display: none;
	}

	/* Haut de page : titre nettement plus present sur petit ecran. */
	.lb-hero__titre-condense {
		font-size: clamp(40px, 11.5vw, 92px);
		text-wrap: balance;
	}

	/* « ET BONS COPAINS » et le sigle tiennent sur une ligne de 360 à
	   1149 px (texte ≈ 9 fois la taille de police, sigle ≈ 1 fois). */
	.lb-hero__titre-manuscrit {
		gap: 0 10px;
	}

	.lb-hero__titre-manuscrit .lb-manuscrit {
		font-size: clamp(28px, 8vw, 78px);
	}

	.lb-hero__sigle {
		height: clamp(28px, 8vw, 72px);
	}

	/* Horaires alignés à gauche sur le texte, créneaux calés à droite. */
	.lb-horaires--hero {
		justify-content: stretch;
		grid-template-columns: auto 1fr;
	}

	/* Circuit : les étapes glissent horizontalement. Le bloc épinglé prend la
	   hauteur réellement visible (svh : barre d'adresse affichée), bande des
	   producteurs comprise ; c'est la pile des étapes qui s'ajuste. */
	.lb-circuit__piste {
		height: 380vh;
		height: 380svh;
	}

	.lb-circuit__collant {
		top: var(--lb-bandeau);
		height: calc(100vh - var(--lb-bandeau));
		height: calc(100svh - var(--lb-bandeau));
		/* Écran trop bas (téléphone à l'horizontale) : le bloc s'allonge
		   plutôt que de faire chevaucher ses contenus. */
		min-height: min-content;
		gap: 20px;
		padding: 24px 0 18px;
	}

	/* Deux colonnes au plus (`100% / 3` interdit la troisième). Sur une
	   colonne : chapeau, pile, indicateur ; sur deux : chapeau à gauche, pile
	   et indicateur à droite. La pile couvre les rangées 2 et 3 (ou 1 et 2) et
	   absorbe la place restante. De l'air entre le chapeau et l'étape. */
	.lb-circuit__grille {
		gap: 30px;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, max(280px, 100% / 3)), 1fr));
		grid-template-rows: auto minmax(0, 1fr) auto;
	}

	.lb-circuit__pile {
		overflow: hidden;
		grid-row: span 2;
		align-self: stretch;
		height: auto;
		min-height: 180px;
	}

	.lb-etape {
		opacity: 1;
		transform: translateX(var(--lb-decalage, 0));
		transition: none;
		pointer-events: auto;
		will-change: transform;
	}

	.lb-etape__visuel {
		width: 100%;
		aspect-ratio: auto;
		flex: 1;
		min-height: 96px;
		margin-top: 14px;
	}

	.lb-circuit__segments--bureau {
		display: none;
	}

	/* Toujours dans la dernière colonne, donc sous la pile. L'écart de la
	   grille suffit : pas de marge en plus. */
	.lb-circuit__indicateur {
		display: flex;
		grid-column: -2 / -1;
		margin-top: 0;
	}

	/* Viandes : la photo passe sous la race choisie, la liste prend toute la
	   largeur (l'aparté ne garde que le bouton de réservation). */
	.lb-viandes__corps {
		grid-template-columns: 1fr;
	}

	.lb-viandes__aparte .lb-race-visuel {
		display: none;
	}

	.lb-race.est-ouvert .lb-race__photo--mobile {
		display: block;
	}

	.lb-viandes__aparte {
		position: static;
	}

	/* Vins : filtres compacts et pop-up. */
	.lb-filtres--bureau {
		display: none;
	}

	.lb-filtres__compact {
		display: flex;
	}

	/* Météo : sept colonnes à deux services ne tiennent pas en largeur. On
	   passe en liste, un jour par ligne, midi et soir l'un sous l'autre. */
	.lb-meteo {
		overflow-x: visible;
	}

	.lb-meteo__grille {
		display: block;
		min-width: 0;
	}

	.lb-meteo__intro {
		position: static;
		min-width: 0;
		padding: 14px 0;
		border-right: 0;
		border-bottom: var(--filet);
	}

	.lb-meteo__jour {
		display: grid;
		grid-template-columns: 54px 1fr;
		column-gap: 12px;
		align-items: start;
		padding: 10px 0;
		border-right: 0;
		border-bottom: 1px solid rgba(20, 16, 15, .1);
		text-align: left;
	}

	.lb-meteo__jour:last-child {
		border-bottom: 0;
	}

	.lb-meteo__jour--aujourdhui {
		background: transparent;
	}

	.lb-meteo__jour--aujourdhui .lb-meteo__date {
		color: var(--accent);
	}

	.lb-meteo__date {
		grid-row: 1 / span 2;
		padding-top: 7px;
	}

	.lb-meteo__service {
		display: grid;
		grid-template-columns: 40px 38px 22px auto 1fr; /* « MIDI », « SOIR » en 11px */
		align-items: center;
		column-gap: 10px;
		padding: 3px 0;
		margin: 0;
		border: 0;
	}

	.lb-meteo__service + .lb-meteo__service {
		border-top: 1px solid rgba(20, 16, 15, .07);
	}

	.lb-meteo__moment {
		text-align: left;
	}

	.lb-meteo__temp {
		font-size: 17px;
	}

	.lb-meteo__icone {
		font-size: 16px;
		text-align: center;
	}

	.lb-meteo__etat {
		order: 4;
		margin: 0;
	}

	.lb-meteo__ciel {
		order: 5;
		font-size: 11px;
		text-align: right;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Avis : l'encart presse passe pleine largeur. */
	.lb-presse {
		flex: 1 1 100%;
		margin: 0 var(--gouttiere);
		padding: clamp(22px, 6vw, 30px) clamp(20px, 5vw, 30px);
		justify-content: flex-start;
	}

	.lb-avis__lignes {
		order: 0;
	}

	/* Pied de page : colonnes fluides, comme avant la version grand écran. */
	.lb-footer__grille {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr));
	}

	/* Liens du pied de page resserrés : 32px de haut, au-delà des 24px
	   que demande le WCAG 2.2 pour une cible tactile. */
	.lb-footer__nav a,
	.lb-footer__seo-liens a {
		display: flex;
		align-items: center;
		min-height: 32px;
		padding: 0;
	}

	.lb-footer__seo-liens {
		gap: 0 16px;
	}

	.lb-footer__bas a {
		display: inline-flex;
		align-items: center;
		min-height: 32px;
	}

	/* Barre du bas : mentions et cookies, la signature à droite, puis le
	   copyright sur sa ligne. */
	.lb-footer__bas {
		gap: 0 18px;
		padding: 10px 0 14px;
	}

	.lb-footer__bas > a:first-child {
		order: 1;
	}

	.lb-footer__bas .lb-consent__ouvrir {
		order: 2;
		min-height: 32px;
	}

	.lb-footer__signature {
		order: 3;
		margin-left: auto;
	}

	.lb-footer__signature img {
		height: 22px;
	}

	.lb-footer__copyright {
		order: 4;
		flex: 1 1 100%;
		margin-left: 0;
		padding-top: 4px;
	}

	/* Recrutement : blocs du poste sur deux colonnes au plus (2 + 2), une
	   seule sur téléphone. */
	.lb-poste__grille {
		grid-auto-flow: row;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, max(280px, 100% / 3)), 1fr));
	}
}

@media (min-width: 1150px) {
	/* Le voile de la pop-up vidéo sert aussi sur grand écran : lui seul est
	   épargné par cette mise au placard des surfaces mobiles. */
	.lb-menu-mobile,
	.lb-voile:not(.lb-voile--video),
	.lb-feuille {
		display: none !important;
	}

	.lb-race__photo--mobile {
		display: none;
	}

	/* Garde-fou : sur grand écran, la vidéo s'ouvre depuis le visuel de côté. */
	.lb-play-mobile {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.lb-bandeau__piste {
		animation: none;
	}

	.lb-revele {
		animation: none;
		opacity: 1;
		transform: none;
	}

	/* Fondus et glissements ramenés à un changement d'état immédiat. */
	.lb-etape,
	.lb-reel__cadre,
	.lb-jauges__valeur,
	.lb-burger__barres::before,
	.lb-burger__barres::after,
	.lb-voile,
	.lb-menu-mobile,
	.lb-menu-mobile__lien,
	.lb-feuille,
	.lb-video-modale,
	.lb-poste[data-lb-replie] .lb-poste__panneau,
	.lb-poste__signe {
		transition-duration: .01ms;
	}

	.lb-race-visuel.est-change {
		animation: none;
	}

	.lb-play__anneau {
		animation: none;
	}
}

/* ------------------------------------------------------------------ *
 * 16. Questions fréquentes
 * ------------------------------------------------------------------ */

/* Fond parchemin, comme la carte : un palier entre le rouge sombre de la
   carte cadeau et le crème de la privatisation. */
.lb-faq {
	position: relative;
	padding: clamp(44px, 6vw, 96px) var(--gouttiere);
	background: #f3ecd9;
	border-bottom: var(--filet);
}

.lb-faq__grille {
	display: grid;
	grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr);
	gap: clamp(24px, 4vw, 64px);
	align-items: start;
}

.lb-faq__entete {
	position: sticky;
	top: 96px;
}

.lb-faq__entete .lb-titre {
	font-size: clamp(30px, 4.4vw, 58px);
	line-height: .96;
}

.lb-faq__liste {
	border-top: 1px solid rgba(20, 16, 15, .22);
}

.lb-faq__item {
	border-bottom: 1px solid rgba(20, 16, 15, .22);
}

/* Le résumé remplace le triangle du navigateur par un chevron en CSS. */
.lb-faq__question {
	display: flex;
	align-items: baseline;
	gap: 10px clamp(14px, 2vw, 26px);
	padding: clamp(18px, 2.2vw, 26px) 0;
	list-style: none;
	cursor: pointer;
	font: 600 clamp(17px, 1.5vw, 21px)/1.3 Barlow, sans-serif;
	transition: color .24s var(--entree);
}

.lb-faq__question::-webkit-details-marker {
	display: none;
}

.lb-faq__question::marker {
	content: '';
}

/* Avec le script, l'état suit la classe, posée dès le début de l'animation :
   à la fermeture, [open] ne tombe qu'une fois le repli terminé. */
.lb-faq__question:hover,
.lb-faq__item[open]:not(.lb-faq__item--js) .lb-faq__question,
.lb-faq__item.est-ouvert .lb-faq__question {
	color: var(--accent);
}

.lb-faq__question:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 4px;
}

.lb-faq__numero {
	flex: none;
	width: 30px;
	font: 400 clamp(15px, 1.3vw, 19px)/1 'Instrument Serif', serif;
	color: var(--accent);
}

.lb-faq__intitule {
	flex: 1;
	min-width: 0;
}

.lb-faq__chevron {
	flex: none;
	align-self: center;
	width: 10px;
	height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-3px) rotate(45deg);
	transition: transform .3s var(--glissement);
}

.lb-faq__item[open]:not(.lb-faq__item--js) .lb-faq__chevron,
.lb-faq__item.est-ouvert .lb-faq__chevron {
	transform: translateY(3px) rotate(-135deg);
}

.lb-faq__reponse {
	margin: 0 0 clamp(20px, 2.4vw, 30px);
	padding-left: calc(30px + clamp(14px, 2vw, 26px));
	max-width: 62ch;
	font: 400 15px/1.65 Barlow, sans-serif;
	color: rgba(20, 16, 15, .86);
}

.lb-faq__reponse a {
	color: var(--ink);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.lb-faq__reponse a:hover {
	color: var(--accent);
}

@media (max-width: 1149px) {
	.lb-faq__grille {
		grid-template-columns: 1fr;
	}

	.lb-faq__entete {
		position: static;
	}

	.lb-faq__reponse {
		padding-left: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lb-faq__question,
	.lb-faq__chevron {
		transition: none;
	}
}

/* ------------------------------------------------------------------ *
 * 17. Page d'attente (maintenance)
 * ------------------------------------------------------------------ */

.lb-attente-page {
	margin: 0;
	background: var(--cream);
}

/* Le texte à gauche, la photo à droite ; la frise ferme la page. */
.lb-attente {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	grid-template-rows: 1fr auto;
}

.lb-attente__contenu {
	display: flex;
	flex-direction: column;
	gap: clamp(28px, 4vw, 52px);
	padding: clamp(28px, 4vw, 56px) var(--gouttiere) clamp(32px, 4vw, 56px);
}

/* Le logo à gauche, le badge Petit Futé en face. */
.lb-attente__entete {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
}

.lb-attente__logo {
	width: auto;
	height: clamp(64px, 6.4vw, 96px);
}

.lb-attente__badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	color: rgba(20, 16, 15, .64);
	transition: transform .22s var(--entree);
}

.lb-attente__badge:hover {
	transform: translateY(-2px);
}

.lb-attente__badge-texte {
	font: 700 9.5px/1 Barlow, sans-serif;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.lb-attente__badge img {
	display: block;
	width: auto;
	height: clamp(84px, 7.6vw, 120px);
	border-radius: 6px; /* coins arrondis de la plaque */
	box-shadow: 0 6px 18px -8px rgba(20, 16, 15, .45);
}

.lb-attente__message {
	margin: auto 0;
}

.lb-attente__titre {
	margin-top: 14px;
	font-size: clamp(44px, 6vw, 92px);
}

.lb-attente__texte {
	max-width: 46ch;
	margin-top: clamp(18px, 2vw, 26px);
	font: 400 clamp(15.5px, 1.25vw, 18px)/1.65 Barlow, sans-serif;
	color: rgba(20, 16, 15, .82);
}

.lb-attente__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: clamp(22px, 2.4vw, 32px);
}

/* La carte et la cave, en PDF : plus discrets que la réservation. */
.lb-attente__documents {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 10px;
}

.lb-attente__document {
	gap: 10px;
}

.lb-attente__document svg {
	flex-shrink: 0;
}

/* Sur téléphone, les deux PDF côte à côte, à parts égales. */
@media (max-width: 767px) {
	/* Circuit sur téléphone : les étapes l'une sous l'autre, chacune avec une
	   vraie photo. Le bloc épinglé (titre, étape, compteur, producteurs) ne
	   tenait pas dans l'écran une fois les barres du navigateur déduites : la
	   photo tombait à 96 px. Le défilement horizontal reste dès la tablette. */
	.lb-circuit__piste {
		height: auto;
	}

	.lb-circuit__collant {
		position: static;
		height: auto;
		min-height: 0;
		padding: 28px 0 22px;
	}

	.lb-circuit__grille {
		grid-template-rows: none;
	}

	.lb-circuit__pile {
		display: grid;
		gap: 36px;
		height: auto;
		min-height: 0;
		overflow: visible;
	}

	.lb-etape {
		position: static;
		opacity: 1;
		transform: none !important;
	}

	.lb-etape__visuel {
		flex: none;
		aspect-ratio: 4 / 3;
		min-height: 0;
	}

	.lb-circuit__indicateur {
		display: none;
	}

	/* Sur téléphone, les paragraphes vont jusqu'au bord : les largeurs de
	   lecture (en ch) ne servent qu'à partir de la tablette. */
	.lb-circuit__texte,
	.lb-etape__texte,
	.lb-vins__texte,
	.lb-race__note,
	.lb-carte__intro,
	.lb-vin__notes,
	.lb-sommelier__texte,
	.lb-terrasse__texte,
	.lb-cadeau__texte,
	.lb-privatisation__texte,
	.lb-contenu,
	.lb-404__texte,
	.lb-recrut__chapo,
	.lb-candidature__chapo,
	.lb-faq__reponse,
	.lb-attente__texte {
		max-width: none;
	}

	/* Marge latérale réduite et lignes pleines : sur iPhone, text-wrap: pretty
	   raccourcissait des lignes pour éviter un mot seul en fin de paragraphe. */
	:root {
		--gouttiere: 16px;
	}

	p {
		text-wrap: wrap;
	}

	/* Vins : le prix reste à droite, mais à hauteur du nom seulement ; le
	   domaine, les cépages et la dégustation prennent toute la largeur. */
	.lb-vin {
		position: relative;
	}

	.lb-vin__prix {
		position: absolute;
		top: 16px;
		right: 0;
	}

	/* Assez haut pour le bloc prix (libellé et montant) : le domaine commence dessous. */
	.lb-vin__entete {
		min-height: 40px;
		padding-right: 100px;
	}

	/* Verre, pichet et bouteille : trop large pour le coin, colonne d'origine. */
	.lb-vin:has(.lb-vin__prix > div + div) .lb-vin__prix {
		position: static;
	}

	.lb-vin:has(.lb-vin__prix > div + div) .lb-vin__entete {
		padding-right: 0;
	}

	.lb-equipe__fond:not(.lb-equipe__fond--vide) {
		background-color: #14100f;
		background-size: 100% auto;
		background-position: center top;
		padding-top: 58vw;
		min-height: 0;
	}
}

@media (max-width: 599px) {
	.lb-attente__documents {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}

	.lb-attente__document {
		gap: 8px;
		padding-inline: 10px;
	}
}

.lb-attente__format {
	padding: 3px 5px 2px;
	border: 1px solid currentColor;
	font-size: 9px;
	letter-spacing: .1em;
	opacity: .7;
}

@media (prefers-reduced-motion: reduce) {
	.lb-attente__badge {
		transition: none;
	}

	.lb-attente__badge:hover {
		transform: none;
	}
}

/* Horaires, adresse et réseaux sur fond sombre, comme le bloc du haut de page. */
.lb-attente__infos {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 28px clamp(28px, 4vw, 56px);
	padding: clamp(22px, 2.6vw, 34px);
	background: var(--ink);
	color: var(--cream);
}

.lb-attente__label {
	display: block;
	margin-bottom: 14px;
	font: 700 11px/1 Barlow, sans-serif;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--or);
}

.lb-attente__horaires {
	font-size: 14px;
}

.lb-attente__horaires .lb-horaires__creneaux {
	white-space: nowrap;
}

.lb-attente__adresse {
	display: block;
	font: 400 16px/1.5 Barlow, sans-serif;
	color: var(--cream);
}

.lb-attente__itineraire {
	display: block;
	margin-top: 10px;
	font: 700 11px/1 Barlow, sans-serif;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--or);
}

.lb-attente__adresse:hover .lb-attente__itineraire,
.lb-attente__adresse:focus-visible .lb-attente__itineraire {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.lb-attente__reseaux {
	margin-top: 18px;
}

.lb-attente__photo {
	min-height: 100%;
	background: var(--ink) center/cover no-repeat;
}

/* Petit logo Luds en bas à droite, au-dessus de la frise : sur la photo
   (sombre) à l'ordinateur, sur le fond crème sur téléphone. */
.lb-attente__signature {
	position: absolute;
	right: clamp(16px, 2vw, 28px);
	bottom: calc(26px + 12px);
	display: block;
	padding: 8px;
	opacity: .7;
	transition: opacity .2s;
}

.lb-attente__signature:hover,
.lb-attente__signature:focus-visible {
	opacity: 1;
}

.lb-attente__signature img {
	display: block;
	width: auto;
	height: 22px;
}

@media (min-width: 1150px) {
	.lb-attente__signature img {
		filter: invert(1);
	}
}

.lb-attente__frise {
	grid-column: 1 / -1;
}

@media (max-width: 1149px) {
	.lb-attente {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
	}

	/* Sur téléphone, la photo ouvre la page, en bandeau. */
	.lb-attente__photo {
		order: -1;
		min-height: 34vh;
		min-height: 34svh;
	}

	/* Place réservée au logo Luds, sous le bloc des horaires. */
	.lb-attente__contenu {
		gap: 28px;
		padding-bottom: 76px;
	}

	.lb-attente__infos {
		grid-template-columns: minmax(0, 1fr);
	}
}