/**
 * Surcharges visuelles widget 4escape - charte La Fabrique.
 * Cible les classes f-* injectées par widgets.4escape.app (Vue).
 * Textes et structure : configurables dans le back-office 4escape.
 */

:root {
	--lf-fe-primary: #9b4c34;
	--lf-fe-primary-hover: #7d3d2a;
	--lf-fe-navy: #262762;
	--lf-fe-navy-dark: #171b51;
	--lf-fe-cream: #faf8f5;
	--lf-fe-sand: #fbe4b9;
	--lf-fe-border: #e8e4df;
	--lf-fe-white: #ffffff;
	--lf-fe-muted: #5c5c72;
	--lf-fe-radius: 0.75rem;
	--lf-fe-radius-lg: 1rem;
}

.lf-forescape {
	font-family: var(--lf-font-body, "Open Sauce One", system-ui, sans-serif);
	color: var(--lf-fe-navy);
}

.lf-forescape .forescape-root,
.lf-forescape .f-catalog-container,
.lf-forescape .f-catalog-panel,
.lf-forescape .f-catalog-section {
	font-family: inherit;
	color: inherit;
}

/* Titres de sections widget (« Quel montant ? », salles…) */
.lf-forescape .f-h3,
.lf-forescape .f-availability-hero-room-title,
.lf-forescape .f-availability-hero-room-heading-title {
	font-family: var(--lf-font-subtitle, inherit) !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
}

.lf-forescape .f-h3 {
	color: var(--lf-fe-navy) !important;
}

/*
 * Le nom de salle est incrusté EN BAS DU VISUEL, sur un dégradé noir monté par
 * 4escape : il doit rester blanc. Le navy appliqué à tous les titres le rendait
 * illisible sur les quatre cartes de la page Réserver.
 *
 * L'ombre porte le texte quand la photo est claire à cet endroit (le dégradé
 * 4escape ne descend qu'à 60 % d'opacité).
 *
 * Sur les pages activité, le visuel est masqué et le titre remonte en en-tête de
 * carte blanche : il y repasse en navy, plus bas dans ce fichier.
 */
.lf-forescape .f-availability-hero-room-heading-title,
.lf-forescape .f-availability-hero-room-title {
	color: #ffffff !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 12px rgba(0, 0, 0, 0.35);
}

/*
 * Bandeaux de titre (« Informations clients », « Produits complémentaires »…).
 *
 * Ils étaient arrondis en haut et carrés en bas — un dessin qui n'a de sens que
 * collé au panneau qu'il coiffe. Or 4escape pose un `f-mt-4` sur ce panneau, et
 * le thème lui donne ses quatre coins arrondis : le bandeau flottait donc seul,
 * 16 px au-dessus, avec deux angles droits dans le vide.
 *
 * On soude les deux en une seule carte : bandeau arrondi en haut, panneau
 * arrondi en bas, aucune marge entre les deux. Un bandeau qui ne coiffe pas de
 * panneau (cas plus rare) reprend ses quatre coins arrondis.
 */
.lf-forescape .f-highlight {
	background: var(--lf-fe-sand) !important;
	border-radius: var(--lf-fe-radius) !important;
	margin-bottom: 0 !important;
}

.lf-forescape .f-highlight:has(+ .f-panel) {
	border-radius: var(--lf-fe-radius) var(--lf-fe-radius) 0 0 !important;
}

.lf-forescape .f-highlight + .f-panel {
	margin-top: 0 !important;
	border-top-color: transparent !important;
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
}

.lf-forescape .f-panel,
.lf-forescape .f-card {
	background: var(--lf-fe-white) !important;
	border: 1px solid var(--lf-fe-border) !important;
	border-radius: var(--lf-fe-radius-lg) !important;
	box-shadow: 0 8px 24px rgba(23, 27, 81, 0.06) !important;
}

/*
 * `overflow: hidden` UNIQUEMENT sur .f-card (rogne les visuels aux angles).
 *
 * Sur .f-panel il rognait le menu déroulant des prix des bons cadeaux :
 * .f-listbox-options est en position absolue et dépasse volontairement du
 * panneau (81 px de haut pour une liste de 240 px). Résultat, on ne voyait
 * qu'un liseré de quelques pixels au lieu des montants.
 */
.lf-forescape .f-card {
	overflow: hidden;
}

.lf-forescape .f-panel {
	overflow: visible;
}

.lf-forescape .f-section {
	margin-bottom: 1.25rem;
}

/* Boutons principaux */
.lf-forescape .f-btn.f-btn-primary,
.lf-forescape .f-btn.f-btn-cta,
.lf-forescape .f-btn-primary {
	background-color: var(--lf-fe-primary) !important;
	border-color: var(--lf-fe-primary) !important;
	color: var(--lf-fe-white) !important;
	border-radius: 999px !important;
	font-family: inherit !important;
	font-weight: 600 !important;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
}

.lf-forescape .f-btn.f-btn-primary:not(:disabled):hover,
.lf-forescape .f-btn.f-btn-cta:not(:disabled):hover,
.lf-forescape .f-btn-primary:not(:disabled):hover {
	background-color: var(--lf-fe-primary-hover) !important;
	border-color: var(--lf-fe-primary-hover) !important;
}

.lf-forescape .f-btn.f-btn-secondary,
.lf-forescape .f-btn.f-btn-alt,
.lf-forescape .f-btn-secondary {
	background: var(--lf-fe-white) !important;
	border: 2px solid var(--lf-fe-navy) !important;
	color: var(--lf-fe-navy) !important;
	border-radius: 999px !important;
	font-weight: 600 !important;
}

/*
 * `.f-opacity-25` est le seul marqueur que 4escape pose sur le bouton d'ajout
 * quand la quantité est à zéro. À 25 % il ne se lit plus comme désactivé mais
 * comme cassé : on le ramène au même 45 % que les autres boutons inactifs.
 */
.lf-forescape .f-btn:disabled,
.lf-forescape .f-btn[disabled],
.lf-forescape .f-btn.f-opacity-25 {
	opacity: 0.45 !important;
	cursor: not-allowed !important;
}

/* Listbox / selects */
.lf-forescape .f-listbox {
	background: var(--lf-fe-cream) !important;
	border: 1px solid var(--lf-fe-border) !important;
	border-radius: var(--lf-fe-radius) !important;
	color: var(--lf-fe-navy) !important;
	min-height: 3rem;
	padding: 0.65rem 1rem !important;
}

/* -------------------------------------------------------------------------
 * Sélecteur de quantité (page produit bons cadeaux)
 *
 * Aligné sur le sélecteur de joueurs de la modale : c'est le même contrôle vu
 * par le même visiteur à deux étapes du parcours, il n'a aucune raison de
 * changer d'apparence.
 * ------------------------------------------------------------------------- */
.lf-forescape .f-quantity-picker-button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 2.1rem;
	height: 2.1rem;
	min-width: 2.1rem;
	min-height: 2.1rem;
	padding: 0 !important;
	background: var(--lf-fe-white) !important;
	border: 2px solid var(--lf-fe-navy) !important;
	border-radius: 0.5rem !important;
	color: var(--lf-fe-navy) !important;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.lf-forescape .f-quantity-picker-button svg {
	display: block !important;
	width: 0.9rem !important;
	height: 0.9rem !important;
}

.lf-forescape .f-quantity-picker-button svg,
.lf-forescape .f-quantity-picker-button svg path {
	fill: var(--lf-fe-navy) !important;
	color: var(--lf-fe-navy) !important;
}

/* 4escape envoie disabled="false" sur les boutons actifs : ne viser que "true". */
.lf-forescape .f-quantity-picker-button:not([disabled="true"]):hover {
	border-color: var(--lf-fe-primary) !important;
	color: var(--lf-fe-primary) !important;
	background: #fff8f5 !important;
}

.lf-forescape .f-quantity-picker-button:not([disabled="true"]):hover svg path {
	fill: var(--lf-fe-primary) !important;
}

.lf-forescape .f-quantity-picker-button[disabled="true"] {
	opacity: 0.35;
	cursor: not-allowed;
	border-color: #d8d2cb !important;
	pointer-events: none;
}

.lf-forescape .f-quantity-picker-quantity {
	min-width: 1.75rem;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	color: var(--lf-fe-navy);
	font-variant-numeric: tabular-nums;
}

/*
 * 4escape applique `f-py-6` deux fois sur ce conteneur : 24 px de marge haute
 * et basse autour d'un unique sélecteur, dans un panneau qui paraissait vide.
 */
.lf-forescape .f-quantity-picker-container {
	gap: 0.5rem;
	padding-top: 0.75rem !important;
	padding-bottom: 0.75rem !important;
}

/*
 * Visuel produit plafonné.
 *
 * Il montait à ~400 px et repoussait le titre, le prix et la description sous la
 * ligne de flottaison. La vignette est recadrée en 16:9 par Cloudinary côté
 * 4escape (`ar_16:9,c_fill`) : le packshot est déjà rogné dans le fichier livré,
 * `contain` sur fond crème est le rendu le plus propre possible.
 */
.lf-forescape .f-product-view .f-ui-picture {
	position: relative;
	aspect-ratio: auto !important;
	height: 14rem;
	max-height: 14rem;
	background: var(--lf-fe-cream) !important;
	border-bottom: 1px solid var(--lf-fe-border);
	overflow: hidden;
}

.lf-forescape .f-product-view .f-ui-picture img {
	width: 100%;
	height: 100%;
	padding: 0.75rem;
	object-fit: contain !important;
}


/* Datepicker */
.lf-forescape .f-datepicker {
	gap: 0.75rem;
}

.lf-forescape .f-datepicker-input {
	background: var(--lf-fe-white) !important;
	border: 1px solid var(--lf-fe-border) !important;
	border-radius: var(--lf-fe-radius-lg) !important;
	color: var(--lf-fe-navy) !important;
	font-weight: 600 !important;
	padding: 0.85rem 1.15rem !important;
}

.lf-forescape .f-datepicker-btn {
	background: var(--lf-fe-cream) !important;
	border: 1px solid var(--lf-fe-border) !important;
	border-radius: var(--lf-fe-radius) !important;
	color: var(--lf-fe-navy) !important;
}

.lf-forescape .f-datepicker-btn:hover {
	border-color: var(--lf-fe-primary) !important;
	color: var(--lf-fe-primary) !important;
}

/* -------------------------------------------------------------------------
 * Catalogue page Réservation - grille compacte multi-activités (4 cards).
 * Ne pas appliquer hors .lf-reservation-page / .lf-forescape--catalog :
 * sur single activité, on conserve la vue calendrier (datepicker) native.
 * Ordre des salles : back-office 4escape (pas de nth-child CSS).
 * ------------------------------------------------------------------------- */
.lf-reservation-page .lf-forescape .f-availability-hero-rooms,
.lf-forescape--catalog .f-availability-hero-rooms {
	gap: 0.85rem;
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 900px) {
	.lf-reservation-page .lf-forescape .f-availability-hero-rooms,
	.lf-forescape--catalog .f-availability-hero-rooms {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.lf-reservation-page .lf-forescape .f-availability-hero-room,
.lf-reservation-page .lf-forescape .f-availability-hero-rooms > *,
.lf-forescape--catalog .f-availability-hero-room,
.lf-forescape--catalog .f-availability-hero-rooms > * {
	min-width: 0 !important;
	max-width: none !important;
	flex: 1 1 0 !important;
}

.lf-reservation-page .lf-forescape .f-availability-hero-room-heading-title,
.lf-reservation-page .lf-forescape .f-availability-hero-room-title,
.lf-forescape--catalog .f-availability-hero-room-heading-title,
.lf-forescape--catalog .f-availability-hero-room-title {
	font-size: 0.92rem !important;
}

.lf-reservation-page .lf-forescape .f-availability-hero-room-slots,
.lf-forescape--catalog .f-availability-hero-room-slots {
	gap: 0.45rem !important;
}

.lf-reservation-page .lf-forescape .f-availability-hero-room-slot,
.lf-forescape--catalog .f-availability-hero-room-slot {
	padding: 0.45rem 0.35rem !important;
	font-size: 0.85rem !important;
}

@media (max-width: 639px) {
	.lf-reservation-page .lf-forescape .f-availability-hero-rooms,
	.lf-forescape--catalog .f-availability-hero-rooms {
		grid-template-columns: 1fr !important;
		gap: 0.85rem !important;
	}

	.lf-reservation-page .lf-forescape .f-availability-hero-room,
	.lf-reservation-page .lf-forescape .f-availability-hero-rooms > *,
	.lf-forescape--catalog .f-availability-hero-room,
	.lf-forescape--catalog .f-availability-hero-rooms > * {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}

	.lf-reservation-page .lf-forescape .f-availability-hero-room-heading-title,
	.lf-reservation-page .lf-forescape .f-availability-hero-room-title,
	.lf-forescape--catalog .f-availability-hero-room-heading-title,
	.lf-forescape--catalog .f-availability-hero-room-title {
		font-size: 0.875rem !important;
	}

	.lf-reservation-page .lf-forescape .f-availability-hero-room-slots,
	.lf-forescape--catalog .f-availability-hero-room-slots {
		gap: 0.35rem !important;
	}

	.lf-reservation-page .lf-forescape .f-availability-hero-room-slot,
	.lf-forescape--catalog .f-availability-hero-room-slot {
		padding: 0.35rem 0.25rem !important;
		font-size: 0.8125rem !important;
	}

	.lf-reservation-page .lf-forescape .f-panel.f-p-4,
	.lf-forescape--catalog .f-panel.f-p-4 {
		padding: 0.75rem !important;
	}

	.lf-reservation-page .lf-forescape .f-highlight.f-p-4,
	.lf-forescape--catalog .f-highlight.f-p-4 {
		padding: 0.65rem 0.75rem !important;
	}
}

/* Single activité - vue calendrier (datepicker) : une colonne, pas de grille catalogue */
.lf-activite-reservation .lf-forescape .f-availability-hero-rooms,
.single-activite .lf-forescape .f-availability-hero-rooms,
.lf-forescape--calendar .f-availability-hero-rooms {
	display: flex !important;
	flex-direction: column;
	gap: 1.25rem;
	grid-template-columns: none !important;
}

.lf-activite-reservation .lf-forescape .f-availability-hero-room,
.lf-activite-reservation .lf-forescape .f-availability-hero-rooms > *,
.single-activite .lf-forescape .f-availability-hero-room,
.single-activite .lf-forescape .f-availability-hero-rooms > *,
.lf-forescape--calendar .f-availability-hero-room,
.lf-forescape--calendar .f-availability-hero-rooms > * {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	flex: 1 1 auto !important;
}

.lf-activite-reservation .lf-forescape .f-datepicker,
.single-activite .lf-forescape .f-datepicker,
.lf-forescape--calendar .f-datepicker {
	margin-bottom: 1rem;
}

/* Créneaux horaires (styles communs) */
.lf-forescape .f-availability-hero-rooms {
	gap: 1.25rem;
}

.lf-forescape .f-availability-hero-room-slots {
	gap: 0.65rem !important;
}

.lf-forescape .f-availability-hero-room-slot {
	border: 2px solid var(--lf-fe-border) !important;
	border-radius: var(--lf-fe-radius) !important;
	background: var(--lf-fe-white) !important;
	transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease !important;
}

.lf-forescape .f-availability-hero-room-slot--available {
	cursor: pointer;
}

.lf-forescape .f-availability-hero-room-slot--available:hover {
	border-color: var(--lf-fe-primary) !important;
	background: #fff8f5 !important;
	transform: translateY(-1px);
}

.lf-forescape .f-availability-hero-room-slot--available.f-availability-hero-room-slot--selected,
.lf-forescape .f-availability-hero-room-slot--available[aria-pressed="true"] {
	border-color: var(--lf-fe-primary) !important;
	background: var(--lf-fe-sand) !important;
}

.lf-forescape .f-availability-hero-room-slot-time {
	font-weight: 600 !important;
	color: var(--lf-fe-navy) !important;
}

.lf-forescape .f-availability-hero-room-slot--unavailable,
.lf-forescape .f-availability-room-slot-disabled {
	opacity: 0.55;
	background: var(--lf-fe-cream) !important;
	cursor: not-allowed;
}

.lf-forescape .f-room-slot-remaining {
	color: var(--lf-fe-muted) !important;
	font-size: 0.85rem;
}

.lf-forescape .f-room-slot-unavailable-text {
	color: var(--lf-fe-muted) !important;
	font-size: 0.8rem;
	font-weight: 600;
}

/* -------------------------------------------------------------------------
 * Panier flottant + panneau latéral (montés hors .lf-forescape par Vue)
 * ------------------------------------------------------------------------- */

.forescape-cart,
.lf-forescape-cart-root,
.f-cart,
.f-cart-content {
	font-family: var(--lf-font-body, "Open Sauce One", system-ui, sans-serif);
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

.lf-forescape-cart-root {
	display: block;
	margin: 0;
	padding: 0;
}

.f-cart,
.f-cart.f-fixed {
	position: fixed !important;
	top: auto !important;
	left: 0 !important;
	right: 0 !important;
	bottom: max(1rem, env(safe-area-inset-bottom)) !important;
	width: fit-content !important;
	max-width: calc(100vw - 2rem);
	margin: 0 auto !important;
	padding: 0 !important;
	transform: none !important;
	inset: auto 0 max(1rem, env(safe-area-inset-bottom)) 0 !important;
	z-index: 920;
	pointer-events: none;
}

.f-cart-content {
	pointer-events: auto;
	padding: 0 !important;
	margin: 0 !important;
}

.f-cart-toggle-btn {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 0.75rem !important;
	width: auto !important;
	height: auto !important;
	min-height: 0;
	min-width: 0;
	max-width: min(calc(100vw - 2rem), 22rem);
	padding: 0.5rem 1rem 0.5rem 0.5rem !important;
	background: #ffffff !important;
	background-color: #ffffff !important;
	border: 1px solid #e8e4df !important;
	border-radius: 999px !important;
	box-shadow:
		0 4px 6px rgba(38, 39, 98, 0.05),
		0 12px 32px rgba(38, 39, 98, 0.14) !important;
	color: #262762 !important;
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}

.f-cart-toggle-btn:hover {
	background: #ffffff !important;
	background-color: #ffffff !important;
	border-color: #d8d2cb !important;
	transform: translateY(-2px);
	box-shadow:
		0 6px 10px rgba(38, 39, 98, 0.07),
		0 18px 40px rgba(38, 39, 98, 0.16) !important;
}

.f-cart-toggle-btn-icon {
	order: 1;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.75rem;
	height: 2.75rem;
	background: linear-gradient(145deg, #9b4c34, #874028) !important;
	border-radius: 999px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.f-cart-toggle-btn-icon svg {
	width: 1.1rem;
	height: 1.1rem;
	color: #ffffff;
}

.f-cart-toggle-btn-size {
	position: absolute;
	top: -0.2rem;
	right: -0.2rem;
	display: grid;
	place-items: center;
	min-width: 1.2rem;
	height: 1.2rem;
	padding: 0 0.3rem;
	background: #262762 !important;
	color: #ffffff !important;
	border: 2px solid #ffffff;
	border-radius: 999px;
	font-size: 0.62rem;
	font-weight: 700;
	line-height: 1;
	box-shadow: 0 2px 6px rgba(38, 39, 98, 0.2);
}

.f-cart-toggle-btn-amount {
	order: 2;
	flex: 1;
	min-width: 0;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.15;
	text-align: left;
	white-space: nowrap;
	color: #262762 !important;
}

.f-cart-toggle-btn-amount::before {
	content: "Panier";
	display: block;
	margin-bottom: 0.1rem;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #5c5c72;
}

.f-cart-toggle-btn-timeout,
.f-cart-toggle-btn .f-timeout-countdown {
	order: 3;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	padding-left: 0.75rem;
	margin-left: 0;
	border-left: 1px solid #e8e4df;
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	color: #5c5c72 !important;
	opacity: 1 !important;
	white-space: nowrap;
	background: transparent !important;
}

.f-cart-toggle-btn-timeout::before,
.f-cart-toggle-btn .f-timeout-countdown::before {
	content: "⏱";
	margin-right: 0.3rem;
	font-size: 0.72rem;
	line-height: 1;
}

.f-cart-toggle-btn .f-timeout-countdown .time {
	font-variant-numeric: tabular-nums;
	color: #262762;
}

/* Overlay + panneau latéral */
.f-fixed.f-inset-0.f-overflow-hidden:has(.f-cart-panel) {
	z-index: 9995 !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

.f-fixed.f-inset-0.f-overflow-hidden:has(.f-cart-panel)::before {
	display: none !important;
}

.f-fixed.f-inset-0.f-overflow-hidden:has(.f-cart-panel) > .f-absolute.f-inset-0 {
	background: rgba(23, 27, 81, 0.38) !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

.f-fixed.f-inset-0.f-overflow-hidden:has(.f-cart-panel) .f-pointer-events-auto.f-w-screen,
.f-fixed.f-inset-0.f-overflow-hidden:has(.f-cart-panel) [id^="headlessui-dialog-panel-"] {
	position: relative;
	z-index: 2;
	background: #ffffff !important;
	box-shadow: -16px 0 48px rgba(23, 27, 81, 0.14);
}

.f-cart-panel {
	background: #ffffff !important;
	color: #262762 !important;
	font-family: var(--lf-font-body, "Open Sauce One", system-ui, sans-serif);
	border-left: 1px solid #e8e4df;
	box-shadow: none !important;
}

.f-cart-panel .f-px-4,
.f-cart-panel .f-relative.f-flex-1,
.f-cart-panel .f-border-t.f-border-gray-200 {
	background: #ffffff !important;
}

body:has(.f-cart-panel) .f-cart {
	visibility: hidden;
	pointer-events: none;
}

.f-cart-panel .f-text-lg {
	font-family: var(--lf-font-subtitle, inherit) !important;
	font-size: 1.25rem !important;
	font-weight: 700 !important;
	color: var(--lf-fe-navy) !important;
}

.f-cart-panel .f-cart-header-organization {
	color: var(--lf-fe-muted) !important;
	font-size: 0.75rem !important;
	margin-top: 0.15rem;
}

.f-cart-panel .f-border-gray-200,
.f-cart-panel .f-border-t {
	border-color: var(--lf-fe-border) !important;
}

.f-cart-panel ul[role="list"] > li {
	border-top-color: var(--lf-fe-border) !important;
}

.f-cart-panel .f-text-sm.f-font-medium.f-opacity-90 {
	color: var(--lf-fe-navy) !important;
	font-weight: 600 !important;
	opacity: 1 !important;
}

.f-cart-panel .f-text-xs.f-opacity-70,
.f-cart-panel .f-cart-panel-participants {
	color: var(--lf-fe-muted) !important;
	opacity: 1 !important;
}

.f-cart-panel .f-btn-link {
	color: var(--lf-fe-primary) !important;
	font-weight: 600 !important;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.f-cart-panel .f-btn-link:hover {
	color: var(--lf-fe-primary-hover) !important;
}

.f-cart-panel .f-btn.f-btn-primary {
	background-color: var(--lf-fe-primary) !important;
	border-color: var(--lf-fe-primary) !important;
	color: var(--lf-fe-white) !important;
	border-radius: 999px !important;
	font-weight: 600 !important;
	min-height: 3rem;
}

.f-cart-panel .f-btn.f-btn-primary:hover {
	background-color: var(--lf-fe-primary-hover) !important;
	border-color: var(--lf-fe-primary-hover) !important;
}

.f-cart-panel .f-timeout-countdown {
	color: var(--lf-fe-muted) !important;
	font-size: 0.82rem;
	line-height: 1.45;
	text-align: center;
}

.f-cart-panel button.f-rounded-md.f-text-gray-400 {
	color: var(--lf-fe-muted) !important;
	border-radius: var(--lf-fe-radius) !important;
}

.f-cart-panel button.f-rounded-md.f-text-gray-400:hover {
	color: var(--lf-fe-navy) !important;
	background: rgba(38, 39, 98, 0.06);
}

@media (max-width: 640px) {
	.f-cart {
		left: 0 !important;
		right: 0 !important;
		bottom: max(0.85rem, env(safe-area-inset-bottom)) !important;
		width: calc(100% - 1.5rem) !important;
		max-width: 22rem;
		margin-left: auto !important;
		margin-right: auto !important;
		transform: none !important;
	}

	.f-cart-toggle-btn {
		width: 100% !important;
		max-width: none;
		justify-content: flex-start !important;
	}

	body:has(.lf-contact-bubble) .f-cart {
		bottom: max(0.85rem, env(safe-area-inset-bottom)) !important;
	}
}

@media (max-width: 480px) {
	.f-cart-panel.f-max-w-md {
		max-width: 100% !important;
	}
}

/* -------------------------------------------------------------------------
 * Modal réservation (nombre de joueurs / confirmation créneau)
 * ------------------------------------------------------------------------- */

.f-modal-wrapper {
	position: fixed;
	inset: 0;
	z-index: 9996;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
	background: rgba(23, 27, 81, 0.45);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	font-family: var(--lf-font-body, "Open Sauce One", system-ui, sans-serif);
}

/*
 * .f-modal-content doit être un conteneur flex de hauteur définie.
 *
 * Sans `display: flex` ici, .f-modal-panel garde une hauteur `auto` : son
 * enfant .f-room-view (flex-basis 0, voir plus bas) s'effondre alors à 0 px et
 * le `overflow: hidden` du panneau masque TOUT le corps de la modale (nombre de
 * joueurs, durée, options). Le contenu reste dans le DOM, simplement invisible.
 * Régression constatée en desktop uniquement : en mobile 4escape rend un
 * gabarit différent, d'où un widget qui « marche sur le tél mais pas sur PC ».
 */
.f-modal-content {
	display: flex;
	width: min(100%, 42rem);
	max-height: min(calc(100dvh - 2rem), 46rem);
	overflow: visible;
}

.f-modal-panel {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
	max-height: 100%;
	background: #ffffff;
	border: 1px solid #e8e4df;
	border-radius: 1rem;
	overflow: hidden;
	color: #262762;
	box-shadow: 0 24px 64px rgba(23, 27, 81, 0.2);
}

.f-modal-panel .f-close-button {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 999px;
	color: #5c5c72;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.f-modal-panel .f-close-button:hover {
	background: rgba(38, 39, 98, 0.08);
	color: #262762;
}

.f-modal-panel .f-close-button svg {
	width: 1.25rem;
	height: 1.25rem;
	stroke: currentColor;
}

/*
 * En-tête, visuel et pied ne se compriment pas : seul le corps (.f-room-view)
 * absorbe la hauteur restante et défile.
 */
.f-modal-panel > .f-p-4.f-text-xl,
.f-modal-panel > .f-py-4,
.f-modal-panel .f-ui-picture {
	flex: 0 0 auto;
}

/*
 * Visuel retiré de la modale de RÉSERVATION uniquement.
 *
 * 167 px de photo décorative en haut d'une fenêtre qui doit déjà loger le
 * sélecteur de joueurs et les options : le client arrivait sur une modale où
 * presque tout était sous la ligne de flottaison. Le nom de la salle est repris
 * juste en dessous, et l'utilisateur vient de cliquer sur la carte qui portait
 * cette même photo : elle n'apporte rien à cette étape.
 *
 * La modale PRODUIT (vente additionnelle au checkout) est le cas inverse : le
 * visuel est l'argument de vente, on le garde. D'où le `:has()`.
 */
.f-modal-panel:has(.f-room-view) .f-ui-picture {
	display: none !important;
}

/* En-tête compact */
.f-modal-panel > .f-p-4.f-text-xl {
	padding: 0.85rem 1.5rem 0.7rem !important;
	text-align: center;
	border-bottom: 1px solid #e8e4df;
	background: #ffffff;
}

.f-modal-panel > .f-p-4.f-text-xl img {
	display: block;
	max-height: 2.5rem !important;
	max-width: min(12rem, 70%) !important;
	width: auto;
	height: auto;
	margin: 0 auto 0.5rem;
	object-fit: contain;
}

.f-modal-panel > .f-p-4.f-text-xl .f-font-bold {
	font-family: var(--lf-font-subtitle, inherit);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
	color: #262762;
}

.f-modal-panel > .f-p-4.f-text-xl .f-capitalize {
	margin-top: 0.15rem;
	font-size: 0.88rem;
	font-weight: 500;
	color: #5c5c72;
	text-transform: capitalize;
}

.f-modal-panel > .f-p-4.f-text-xl .f-text-2xl {
	margin-top: 0.1rem;
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.1;
	color: #262762;
	font-variant-numeric: tabular-nums;
}

/*
 * Corps scrollable.
 *
 * `flex: 1 1 auto` et NON `flex: 1` : ce dernier vaut `flex: 1 1 0%`, qui donne
 * une hauteur de base nulle. Si le panneau n'a pas de hauteur définie, le corps
 * reste alors à 0 px et toutes les options disparaissent (cf. .f-modal-content).
 * Avec `auto`, la hauteur de base est celle du contenu : le corps s'affiche puis
 * défile quand la modale atteint sa hauteur max.
 */
.f-modal-panel .f-room-view {
	flex: 1 1 auto;
	min-height: 0;
	padding: 0 1.1rem;
	overflow-y: auto;
}

.f-modal-panel .f-room-view .f-panel {
	margin: 0.5rem 0 0 !important;
	padding: 0.7rem 0.9rem !important;
	background: #faf8f5 !important;
	border: 1px solid #e8e4df !important;
	border-radius: 0.75rem !important;
	box-shadow: none !important;
}

/*
 * Doublons de valeur sélectionnée.
 *
 * Sous chaque menu déroulant d'option, 4escape réaffiche dans un .f-block-title
 * la valeur que le menu montre déjà juste au-dessus : « 1h » sous un menu qui
 * affiche « 1h ». Deux blocs de 32 px plus leurs marges, soit ~96 px de hauteur
 * pour zéro information, dans une modale où la place manque.
 *
 * Ciblé sur .f-attribute uniquement : ailleurs, .f-block-title porte de vrais
 * titres de section (stylés juste en dessous).
 */
.f-modal-panel .f-attribute .f-block-title {
	display: none !important;
}

/* Libellés d'options : le f-text-xl de 4escape est démesuré ici. */
.f-modal-panel .f-attribute .f-text-xl {
	font-size: 0.95rem !important;
	margin-bottom: 0.45rem !important;
}

.f-modal-panel .f-attribute .f-space-y-4 > * + * {
	margin-top: 0 !important;
}

/* Titres de section - supprime les bandeaux orange 4escape */
.f-modal-panel .f-block-title,
.f-modal-panel .f-block-title > div,
.f-modal-panel .f-block-title div {
	background: transparent !important;
	background-color: transparent !important;
	color: #262762 !important;
	padding: 0 !important;
	margin: 0 0 0.65rem !important;
	border: none !important;
	border-radius: 0 !important;
	font-size: 0.92rem !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	text-align: left;
}

.f-modal-panel .f-block-title::after {
	content: "";
	display: block;
	width: 2.5rem;
	height: 3px;
	margin-top: 0.35rem;
	background: #9b4c34;
	border-radius: 999px;
}

/*
 * 4escape peint .f-highlight en orange avec un texte blanc. On retire le fond
 * pour rester dans la charte : il FAUT donc reprendre la couleur du texte,
 * sinon les titres (« Choisissez un nombre de joueurs », « Choisissez vos
 * options ») restent blancs sur blanc et la modale paraît vide.
 */
.f-modal-panel .f-highlight {
	background: transparent !important;
	border-radius: 0 !important;
	padding: 0 !important;
	color: #262762 !important;
}

.f-modal-panel .f-highlight .f-h3,
.f-modal-panel .f-highlight .f-h2,
.f-modal-panel .f-highlight .f-h4 {
	font-family: var(--lf-font-subtitle, inherit) !important;
	font-size: 0.98rem !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	color: #262762 !important;
}

.f-modal-panel .f-section + .f-section {
	margin-top: 0.9rem;
}

/* Sélecteur joueurs */
.f-modal-panel .f-player-picker-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.75rem 1rem;
	padding: 0.3rem 0;
	border-bottom: 1px solid #e8e4df;
}

.f-modal-panel .f-player-picker-row:last-child {
	border-bottom: none;
}

.f-modal-panel .f-player-picker-label {
	font-size: 0.875rem;
	font-weight: 600;
	color: #262762;
	line-height: 1.35;
}

.f-modal-panel .f-player-picker-buttons-container {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-shrink: 0;
}

/*
 * 2.1rem = 33,6 px. En dessous on descend sous la cible tactile confortable,
 * donc on ne comprime pas davantage : la place se gagne ailleurs.
 */
.f-modal-panel .f-player-picker-button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 2.1rem;
	height: 2.1rem;
	min-width: 2.1rem;
	min-height: 2.1rem;
	padding: 0 !important;
	background: #ffffff !important;
	border: 2px solid #262762 !important;
	border-radius: 0.5rem !important;
	color: #262762 !important;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.f-modal-panel .f-player-picker-button svg {
	display: block !important;
	width: 0.9rem !important;
	height: 0.9rem !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: none;
}

.f-modal-panel .f-player-picker-button svg,
.f-modal-panel .f-player-picker-button svg path {
	fill: #262762 !important;
	color: #262762 !important;
}

.f-modal-panel .f-player-picker-button:not([disabled="true"]):hover,
.f-modal-panel .f-player-picker-button[disabled="false"]:hover {
	border-color: #9b4c34 !important;
	color: #9b4c34 !important;
	background: #fff8f5 !important;
}

.f-modal-panel .f-player-picker-button:not([disabled="true"]):hover svg,
.f-modal-panel .f-player-picker-button:not([disabled="true"]):hover svg path,
.f-modal-panel .f-player-picker-button[disabled="false"]:hover svg,
.f-modal-panel .f-player-picker-button[disabled="false"]:hover svg path {
	fill: #9b4c34 !important;
}

/* 4escape envoie disabled="false" sur les boutons actifs - ne cibler que disabled="true" */
.f-modal-panel .f-player-picker-button[disabled="true"] {
	opacity: 0.35;
	cursor: not-allowed;
	border-color: #d8d2cb !important;
	pointer-events: none;
}

.f-modal-panel .f-player-picker-quantity {
	min-width: 1.75rem;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	color: #262762;
	font-variant-numeric: tabular-nums;
}

/*
 * Sélecteur de quantité (modale produit) aligné sur le sélecteur de joueurs.
 *
 * Le style maison des `.f-quantity-picker-button` est scopé `.lf-forescape`, or
 * les modales sont montées en portail au niveau de `<body>`, hors de ce
 * conteneur : elles gardaient donc les pastilles orange pleines de 4escape,
 * à côté des boutons blancs bordés navy de la modale de réservation.
 */
.f-modal-panel .f-quantity-picker-button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 2.1rem;
	height: 2.1rem;
	min-width: 2.1rem;
	min-height: 2.1rem;
	padding: 0 !important;
	background: #ffffff !important;
	border: 2px solid #262762 !important;
	border-radius: 0.5rem !important;
	color: #262762 !important;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.f-modal-panel .f-quantity-picker-button svg {
	display: block !important;
	width: 0.9rem !important;
	height: 0.9rem !important;
}

.f-modal-panel .f-quantity-picker-button svg,
.f-modal-panel .f-quantity-picker-button svg path {
	fill: #262762 !important;
	color: #262762 !important;
}

.f-modal-panel .f-quantity-picker-button:not([disabled="true"]):hover {
	border-color: #9b4c34 !important;
	color: #9b4c34 !important;
	background: #fff8f5 !important;
}

.f-modal-panel .f-quantity-picker-button:not([disabled="true"]):hover svg path {
	fill: #9b4c34 !important;
}

.f-modal-panel .f-quantity-picker-button[disabled="true"] {
	opacity: 0.35;
	cursor: not-allowed;
	border-color: #d8d2cb !important;
	pointer-events: none;
}

.f-modal-panel .f-quantity-picker-quantity {
	min-width: 1.75rem;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	color: #262762;
	font-variant-numeric: tabular-nums;
}

.f-modal-panel .f-quantity-picker-container {
	gap: 0.5rem;
	padding-top: 0.75rem !important;
	padding-bottom: 0.75rem !important;
}

.f-modal-panel .f-text-right.f-opacity-50 {
	margin-top: 0.35rem;
	font-size: 0.82rem !important;
	font-weight: 500;
	color: #5c5c72 !important;
	opacity: 1 !important;
	text-align: right;
}

/* Choix du jeu / listbox dans la modale */
.f-modal-panel .f-listbox,
.f-modal-panel .f-panel .f-listbox {
	background: #ffffff !important;
	border: 1px solid #e8e4df !important;
	border-radius: 0.75rem !important;
	color: #262762 !important;
	min-height: 2.75rem;
}

.f-modal-panel .f-panel p,
.f-modal-panel .f-panel .f-paragraph {
	color: #5c5c72;
	font-size: 0.9rem;
	line-height: 1.5;
}

/* -------------------------------------------------------------------------
 * Modale PRODUIT (vente additionnelle au checkout)
 *
 * Même gabarit `.f-modal-panel` que la réservation, mais un corps
 * `.f-product-view` au lieu de `.f-room-view`. Trois écarts à corriger.
 * ------------------------------------------------------------------------- */

/*
 * 1. Le panneau ne s'étire plus dans le vide.
 *
 * .f-modal-content est un flex column : le panneau, en `flex: 1 1 auto`,
 * grandissait jusqu'à la hauteur max (669 px) alors que son contenu n'en fait
 * que 547. Résultat, un grand blanc entre la quantité et le bouton. La modale
 * de réservation a besoin de cet étirement (son corps défile), pas celle-ci.
 */
.f-modal-content:has(.f-product-view) {
	height: auto !important;
}

/*
 * 2. Visuel du produit conservé, mais en vignette sur fond clair.
 *
 * 4escape sert une vignette recadrée en 16:9 par Cloudinary (`ar_16:9,c_fill`) :
 * le packshot est donc déjà rogné en haut et en bas dans le fichier livré, on ne
 * peut pas le récupérer en CSS. `contain` sur fond crème reste le rendu le plus
 * propre — pas de bandes noires, produit centré.
 */
.f-modal-panel:has(.f-product-view) .f-ui-picture {
	position: relative !important;
	aspect-ratio: auto !important;
	height: 9rem !important;
	max-height: 9rem !important;
	background: #faf8f5 !important;
	border-bottom: 1px solid #e8e4df;
}

.f-modal-panel:has(.f-product-view) .f-ui-picture img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	padding: 0.6rem;
	object-fit: contain !important;
}

/*
 * 3. En-tête : la grille deux colonnes du mode desktop ne vaut que pour la
 * réservation (nom / date / heure + logo). Ici les enfants sont un titre et un
 * paragraphe : la grille coinçait le titre dans une colonne étroite, un mot par
 * ligne. On revient à une colonne centrée.
 */
.f-modal-panel:has(.f-product-view) > .f-p-4.f-text-xl {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	padding: 0.9rem 1.5rem !important;
	text-align: center !important;
}

.f-modal-panel:has(.f-product-view) > .f-p-4.f-text-xl .f-font-bold {
	font-size: 1.05rem !important;
}

.f-modal-panel:has(.f-product-view) > .f-p-4.f-text-xl .f-paragraph {
	padding: 0 !important;
	font-size: 0.9rem !important;
	color: #5c5c72 !important;
}

/* Pied de modale */
.f-modal-panel > .f-py-4 {
	flex-shrink: 0;
	padding: 0.85rem 1.25rem 1.15rem !important;
	background: #ffffff;
	border-top: 1px solid #e8e4df;
}

.f-modal-panel .f-btn.f-btn-primary.f-btn-lg {
	min-height: 3rem;
	padding: 0.7rem 1.25rem !important;
	background-color: #9b4c34 !important;
	border: 2px solid #9b4c34 !important;
	border-radius: 999px !important;
	color: #ffffff !important;
	font-weight: 600 !important;
	line-height: 1.25;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.f-modal-panel .f-btn.f-btn-primary.f-btn-lg:not(:disabled):hover {
	background-color: #7d3d2a !important;
	border-color: #7d3d2a !important;
	transform: translateY(-1px);
}

.f-modal-panel .f-btn.f-btn-primary .f-flex.f-flex-col {
	gap: 0.1rem;
}

.f-modal-panel .f-btn.f-btn-primary .f-text-xs {
	font-size: 0.75rem !important;
	font-weight: 500 !important;
	opacity: 0.92;
}

@media (min-width: 768px) {
	.f-modal-content {
		width: min(100%, 44rem);
		max-height: min(calc(100dvh - 3rem), 46rem);
	}

	.f-modal-panel > .f-p-4.f-text-xl {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-rows: auto auto auto;
		gap: 0.1rem 1.5rem;
		text-align: left;
		padding: 0.85rem 1.75rem 0.7rem !important;
	}

	.f-modal-panel > .f-p-4.f-text-xl img {
		grid-column: 2;
		grid-row: 1 / span 3;
		align-self: center;
		margin: 0;
		max-height: 3rem !important;
		max-width: 9rem !important;
	}

	.f-modal-panel > .f-p-4.f-text-xl .f-text-2xl {
		font-size: 1.5rem;
	}
}

@media (max-width: 480px) {
	.f-modal-content {
		width: 100%;
		max-height: calc(100dvh - 1rem);
	}

	.f-modal-panel .f-player-picker-row {
		grid-template-columns: 1fr;
		gap: 0.5rem;
	}

	.f-modal-panel .f-player-picker-buttons-container {
		justify-content: center;
	}
}

/* -------------------------------------------------------------------------
 * Modal « Ajout réussi » (confirmation panier)
 * ------------------------------------------------------------------------- */

.f-modal-wrapper:has(svg.f-text-green-600),
.f-fixed.f-inset-0:has(svg.f-text-green-600) {
	background: rgba(23, 27, 81, 0.45) !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

.f-flex.f-min-h-full:has(svg.f-text-green-600) {
	width: 100%;
	min-height: 100%;
	padding: 1rem !important;
}

.f-modal-panel:has(svg.f-text-green-600) {
	width: min(100%, 26rem) !important;
	max-width: 26rem !important;
	margin-inline: auto;
	padding: 1.75rem 1.5rem 1.5rem !important;
	background: #ffffff !important;
	border: 1px solid #e8e4df !important;
	border-radius: 1rem !important;
	color: #262762 !important;
	text-align: center;
	box-shadow: 0 24px 64px rgba(23, 27, 81, 0.2) !important;
}

.f-modal-panel:has(svg.f-text-green-600) .f-flex.f-justify-center svg.f-text-green-600,
.f-modal-panel:has(svg.f-text-green-600) svg.f-size-12.f-text-green-600 {
	width: 3.25rem !important;
	height: 3.25rem !important;
	padding: 0.55rem;
	background: #fbe4b9;
	border-radius: 999px;
	color: #9b4c34 !important;
	stroke: #9b4c34 !important;
}

.f-modal-panel:has(svg.f-text-green-600) [id^="headlessui-dialog-title-"] {
	font-family: var(--lf-font-subtitle, inherit);
	font-size: 1.25rem !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	color: #262762 !important;
}

.f-modal-panel:has(svg.f-text-green-600) .f-paragraph,
.f-modal-panel:has(svg.f-text-green-600) .f-text-sm {
	color: #5c5c72 !important;
	font-size: 0.95rem !important;
	line-height: 1.5;
}

.f-modal-panel:has(svg.f-text-green-600) .f-mt-5,
.f-modal-panel:has(svg.f-text-green-600) .sm\:f-mt-6 {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: 0.65rem !important;
	margin-top: 1.35rem !important;
}

@media (min-width: 640px) {
	.f-modal-panel:has(svg.f-text-green-600) .f-mt-5,
	.f-modal-panel:has(svg.f-text-green-600) .sm\:f-mt-6 {
		grid-template-columns: 1fr 1fr;
		gap: 0.75rem !important;
	}
}

.f-modal-panel:has(svg.f-text-green-600) .f-btn.f-btn-secondary {
	min-height: 2.85rem;
	padding: 0.65rem 1.15rem !important;
	background: #ffffff !important;
	border: 2px solid #262762 !important;
	border-radius: 999px !important;
	color: #262762 !important;
	font-weight: 600 !important;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.f-modal-panel:has(svg.f-text-green-600) .f-btn.f-btn-secondary:hover {
	background: #262762 !important;
	color: #ffffff !important;
	border-color: #262762 !important;
}

.f-modal-panel:has(svg.f-text-green-600) .f-btn.f-btn-primary {
	min-height: 2.85rem;
	margin-top: 0 !important;
	padding: 0.65rem 1.15rem !important;
	background-color: #9b4c34 !important;
	border: 2px solid #9b4c34 !important;
	border-radius: 999px !important;
	color: #ffffff !important;
	font-weight: 600 !important;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.f-modal-panel:has(svg.f-text-green-600) .f-btn.f-btn-primary:hover {
	background-color: #7d3d2a !important;
	border-color: #7d3d2a !important;
	transform: translateY(-1px);
}

/*
 * Boutique bons cadeaux : colonne latérale collante.
 *
 * Le `sticky` portait sur `.f-card` seule. Or 4escape place le bouton « Retour »
 * dans un div FRÈRE de la carte, à l'intérieur de la même colonne : la carte
 * restait figée à 6 rem du haut pendant que le bouton, resté statique, remontait
 * avec le défilement et venait se superposer au « Ajouter au panier » de la
 * carte. Chevauchement mesuré : 20 px après 700 px de défilement, et croissant.
 *
 * On rend donc collante la COLONNE entière : carte et bouton restent solidaires.
 */
.lf-forescape .f-page-selection--side {
	position: sticky;
	top: 6rem;
}

.lf-forescape .f-page-selection .f-text-textMain {
	color: var(--lf-fe-navy) !important;
	font-weight: 600;
}

/* Liens */
.lf-forescape a {
	color: var(--lf-fe-primary);
}

.lf-forescape a:hover {
	color: var(--lf-fe-primary-hover);
}

@media (min-width: 768px) {
	.lf-forescape .f-product-view--confirmSide {
		align-items: flex-start;
	}
}


/* -------------------------------------------------------------------------
 * Vue calendrier (pages activité) - en-tête de salle
 *
 * 4escape affiche un visuel de salle plein cadre au-dessus des créneaux,
 * avec le titre en incrustation. Sur une page activité qui a déjà son hero
 * et sa galerie, cette image fait doublon et passe très mal (logo recadré,
 * fond noir, 650 px de haut). On masque donc le visuel et on remonte le
 * titre en en-tête de carte classique.
 *
 * Uniquement sur les pages activité : la page Réserver conserve sa grille
 * de 4 cards avec vignettes.
 * ------------------------------------------------------------------------- */

.lf-activite-reservation .lf-forescape .f-ui-picture,
.lf-forescape--calendar .f-ui-picture {
	position: static !important;
	aspect-ratio: auto !important;
	height: auto !important;
	min-height: 0 !important;
	background: transparent !important;
}

.lf-activite-reservation .lf-forescape .f-ui-picture img,
.lf-activite-reservation .lf-forescape .f-ui-picture video,
.lf-activite-reservation .lf-forescape .f-ui-picture source,
.lf-forescape--calendar .f-ui-picture img,
.lf-forescape--calendar .f-ui-picture video,
.lf-forescape--calendar .f-ui-picture source {
	display: none !important;
}

.lf-activite-reservation .lf-forescape .f-availability-hero-room-heading,
.lf-forescape--calendar .f-availability-hero-room-heading {
	position: static !important;
	inset: auto !important;
	padding: 1.5rem 1.5rem 0 !important;
	background: none !important;
}

.lf-activite-reservation .lf-forescape .f-availability-hero-room-heading-title,
.lf-activite-reservation .lf-forescape .f-availability-hero-room-title,
.lf-forescape--calendar .f-availability-hero-room-heading-title,
.lf-forescape--calendar .f-availability-hero-room-title {
	font-family: var(--lf-font-subtitle) !important;
	font-size: 1.3rem !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
	letter-spacing: -0.01em !important;
	color: var(--lf-fe-navy, #262762) !important;
	text-align: left !important;
	text-shadow: none !important;
}

/* La carte reprend les codes du thème une fois l'image retirée */
.lf-activite-reservation .lf-forescape .f-availability-hero-room,
.lf-forescape--calendar .f-availability-hero-room {
	overflow: hidden !important;
	border: 1px solid var(--lf-fe-border, #e8e4df) !important;
	border-radius: var(--lf-fe-radius, 1rem) !important;
	background: var(--lf-fe-white, #fff) !important;
	box-shadow: 0 8px 32px rgba(23, 27, 81, 0.08) !important;
}

/* -------------------------------------------------------------------------
 * Checkout pack (.lf-forescape--pack)
 *
 * Swiper activités = comportement NATIF 4escape (ne pas forcer grille /
 * slides-per-view / display:contents — ça casse la sélection).
 * On personnalise uniquement couleurs / typo / intro vide / créneaux.
 * ------------------------------------------------------------------------- */

/* Bloc « Informations générales » vide (pas de photo produit). */
.lf-forescape--pack .f-section[data-lf-pack-intro-hidden="1"],
.lf-forescape--pack .f-product-view > div:first-child > .f-section:first-child:has(.f-ui-picture--video:not(:has(img)):not(:has(video))),
.lf-booking-checkout .lf-forescape .f-product-view > div:first-child > .f-section:first-child:has(.f-ui-picture--video:not(:has(img)):not(:has(video))),
.lf-booking-checkout-page .lf-forescape .f-product-view > div:first-child > .f-section:first-child:has(.f-ui-picture--video:not(:has(img)):not(:has(video))) {
	display: none !important;
	margin: 0 !important;
	padding: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
	border: 0 !important;
}

.lf-forescape--pack .f-product-view .f-ui-picture--video:not(:has(img)):not(:has(video)) {
	display: none !important;
	height: 0 !important;
	min-height: 0 !important;
}

/* Calendrier classique (pack) */
.lf-forescape--pack .f-calendar-classic,
.lf-forescape .f-calendar-classic {
	gap: 0.35rem;
}

.lf-forescape--pack .f-calendar-classic-slot,
.lf-forescape .f-calendar-classic-slot {
	min-height: 2.75rem;
	border-radius: 0.65rem !important;
	border-color: var(--lf-fe-border, #e8e4df) !important;
	background: var(--lf-fe-cream, #faf8f5) !important;
	color: var(--lf-fe-navy, #262762) !important;
	transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.lf-forescape--pack .f-calendar-classic-slot-day,
.lf-forescape .f-calendar-classic-slot-day {
	color: var(--lf-fe-navy, #262762) !important;
	font-weight: 600;
}

@media (hover: hover) {
	.lf-forescape--pack .f-calendar-classic-slot.f-cursor-pointer:hover,
	.lf-forescape .f-calendar-classic-slot.f-cursor-pointer:hover {
		border-color: var(--lf-fe-primary, #9b4c34) !important;
		background: #fff8f5 !important;
		color: var(--lf-fe-navy, #262762) !important;
	}

	.lf-forescape--pack .f-calendar-classic-slot.f-cursor-pointer:hover .f-calendar-classic-slot-day,
	.lf-forescape .f-calendar-classic-slot.f-cursor-pointer:hover .f-calendar-classic-slot-day {
		color: var(--lf-fe-navy, #262762) !important;
	}
}

.lf-forescape--pack .f-calendar-classic-slot--selected,
.lf-forescape .f-calendar-classic-slot--selected {
	background: var(--lf-fe-sand, #fbe4b9) !important;
	border-color: var(--lf-fe-primary, #9b4c34) !important;
	color: var(--lf-fe-navy, #262762) !important;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lf-fe-primary, #9b4c34) 35%, transparent);
}

.lf-forescape--pack .f-calendar-classic-slot--selected .f-calendar-classic-slot-day,
.lf-forescape .f-calendar-classic-slot--selected .f-calendar-classic-slot-day {
	color: var(--lf-fe-navy, #262762) !important;
	font-weight: 700;
}

.lf-forescape--pack .f-calendar-classic-slot.f-calendar-bg-disabled,
.lf-forescape .f-calendar-classic-slot.f-calendar-bg-disabled,
.lf-forescape--pack .f-calendar-classic-slot.f-cursor-not-allowed,
.lf-forescape .f-calendar-classic-slot.f-cursor-not-allowed {
	background: #f3f1ee !important;
	border-color: #ebe7e2 !important;
	opacity: 0.55;
}

.lf-forescape--pack .f-calendar-capacity-pill--low,
.lf-forescape .f-calendar-capacity-pill--low {
	background: var(--lf-fe-primary, #9b4c34) !important;
}

.lf-forescape--pack .f-panel .f-text-md.f-flex.f-justify-around svg.f-cursor-pointer {
	color: var(--lf-fe-navy, #262762);
	opacity: 1 !important;
}

.lf-forescape--pack .f-panel .f-text-md.f-flex.f-justify-around svg.f-opacity-25 {
	opacity: 0.25 !important;
}

.lf-forescape--pack .f-room-view .f-panel > .f-flex.f-justify-center {
	color: var(--lf-fe-muted, #5c5c72) !important;
	font-size: 0.9375rem !important;
}

/* Sélecteur joueurs (pack checkout) */
.lf-forescape--pack .f-player-picker-row,
.lf-booking-checkout .lf-forescape .f-player-picker-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.35rem 0;
}

.lf-forescape--pack .f-player-picker-label,
.lf-booking-checkout .lf-forescape .f-player-picker-label {
	font-weight: 600;
	color: var(--lf-fe-navy, #262762);
}

.lf-forescape--pack .f-player-picker-buttons-container,
.lf-booking-checkout .lf-forescape .f-player-picker-buttons-container {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-shrink: 0;
}

.lf-forescape--pack .f-player-picker-button,
.lf-booking-checkout .lf-forescape .f-player-picker-button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	min-width: 2.25rem;
	min-height: 2.25rem;
	padding: 0 !important;
	border-radius: 0.55rem !important;
	background: var(--lf-fe-white, #fff) !important;
	border: 2px solid var(--lf-fe-navy, #262762) !important;
	color: var(--lf-fe-navy, #262762) !important;
	cursor: pointer;
	transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.lf-forescape--pack .f-player-picker-button svg,
.lf-booking-checkout .lf-forescape .f-player-picker-button svg {
	display: block !important;
	width: 0.9rem !important;
	height: 0.9rem !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: none;
}

.lf-forescape--pack .f-player-picker-button svg,
.lf-forescape--pack .f-player-picker-button svg path,
.lf-booking-checkout .lf-forescape .f-player-picker-button svg,
.lf-booking-checkout .lf-forescape .f-player-picker-button svg path {
	fill: currentColor !important;
	color: currentColor !important;
}

@media (hover: hover) {
	.lf-forescape--pack .f-player-picker-button:not([disabled="true"]):hover,
	.lf-booking-checkout .lf-forescape .f-player-picker-button:not([disabled="true"]):hover {
		border-color: var(--lf-fe-primary, #9b4c34) !important;
		color: var(--lf-fe-primary, #9b4c34) !important;
		background: #fff8f5 !important;
	}
}

.lf-forescape--pack .f-player-picker-button[disabled="true"],
.lf-booking-checkout .lf-forescape .f-player-picker-button[disabled="true"] {
	opacity: 0.35;
	cursor: not-allowed;
	border-color: #d8d2cb !important;
	pointer-events: none;
}

.lf-forescape--pack .f-player-picker-quantity,
.lf-booking-checkout .lf-forescape .f-player-picker-quantity {
	min-width: 1.75rem;
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--lf-fe-navy, #262762);
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/*
 * Carrousel activités — NE PAS toucher au layout Swiper.
 * Natif 4escape (pack 3 observé) :
 * - 1 swiper par activité du pack (×3)
 * - slidesPerView: 1.2, centeredSlides: true, navigation Prev/Next
 * - la sélection = activeIndex (pas un clic « carte », pas de grille)
 * On ne retouche que l'habillage des flèches (pastilles rondes).
 */
.lf-forescape--pack swiper-container.f-package-item-carousel,
.lf-booking-checkout swiper-container.f-package-item-carousel {
	/* Taille du chevron seul : le gabarit du bouton est repris plus bas. */
	--swiper-navigation-size: 1.125rem;
	--swiper-navigation-color: var(--lf-fe-primary, #9b4c34);
	--swiper-navigation-sides-offset: 0.5rem;
}

.lf-forescape--pack swiper-container.f-package-item-carousel::part(button-prev),
.lf-forescape--pack swiper-container.f-package-item-carousel::part(button-next),
.lf-booking-checkout swiper-container.f-package-item-carousel::part(button-prev),
.lf-booking-checkout swiper-container.f-package-item-carousel::part(button-next) {
	width: 2.5rem;
	height: 2.5rem;
	margin-top: -1.25rem;
	border: 1px solid var(--lf-fe-border, #e8e4df);
	border-radius: 999px;
	background: var(--lf-fe-white, #fff);
	color: var(--lf-fe-primary, #9b4c34);
	box-shadow: 0 2px 10px rgba(38, 39, 98, 0.12);
	transition: background-color 0.18s ease, color 0.18s ease,
		border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

@media (hover: hover) {
	.lf-forescape--pack swiper-container.f-package-item-carousel::part(button-prev):hover,
	.lf-forescape--pack swiper-container.f-package-item-carousel::part(button-next):hover,
	.lf-booking-checkout swiper-container.f-package-item-carousel::part(button-prev):hover,
	.lf-booking-checkout swiper-container.f-package-item-carousel::part(button-next):hover {
		border-color: var(--lf-fe-primary, #9b4c34);
		background: var(--lf-fe-primary, #9b4c34);
		color: #fff;
		box-shadow: 0 4px 14px rgba(155, 76, 52, 0.28);
		transform: scale(1.05);
	}
}

@media (prefers-reduced-motion: reduce) {
	.lf-forescape--pack swiper-container.f-package-item-carousel::part(button-prev),
	.lf-forescape--pack swiper-container.f-package-item-carousel::part(button-next),
	.lf-booking-checkout swiper-container.f-package-item-carousel::part(button-prev),
	.lf-booking-checkout swiper-container.f-package-item-carousel::part(button-next) {
		transition: none;
		transform: none;
	}
}

/* Créneaux : couleurs uniquement (natif = déjà display:grid, ~4 cols) */
.lf-forescape--pack .f-calendar-chocolate-slot,
.lf-booking-checkout .f-calendar-chocolate-slot {
	border-color: var(--lf-fe-border, #e8e4df) !important;
	border-radius: var(--lf-fe-radius, 0.75rem) !important;
	background: var(--lf-fe-white, #fff) !important;
}

.lf-forescape--pack .f-calendar-chocolate-slot-time,
.lf-booking-checkout .f-calendar-chocolate-slot-time {
	font-weight: 600 !important;
	color: var(--lf-fe-navy, #262762) !important;
}

@media (hover: hover) {
	.lf-forescape--pack .f-calendar-chocolate-slot:not(.f-calendar-chocolate-slot--unavailable):not(.f-availability-room-slot-disabled):hover,
	.lf-booking-checkout .f-calendar-chocolate-slot:not(.f-calendar-chocolate-slot--unavailable):not(.f-availability-room-slot-disabled):hover {
		border-color: var(--lf-fe-primary, #9b4c34) !important;
		background: #fff8f5 !important;
	}
}

.lf-forescape--pack .f-calendar-chocolate-slot--selected,
.lf-forescape--pack .f-calendar-chocolate-slot[aria-pressed="true"],
.lf-booking-checkout .f-calendar-chocolate-slot--selected,
.lf-booking-checkout .f-calendar-chocolate-slot[aria-pressed="true"] {
	border-color: var(--lf-fe-primary, #9b4c34) !important;
	background: var(--lf-fe-sand, #fbe4b9) !important;
}

.lf-forescape--pack .f-calendar-chocolate-slot--unavailable,
.lf-forescape--pack .f-calendar-chocolate-slot.f-availability-room-slot-disabled,
.lf-booking-checkout .f-calendar-chocolate-slot--unavailable,
.lf-booking-checkout .f-calendar-chocolate-slot.f-availability-room-slot-disabled {
	opacity: 0.55;
	background: var(--lf-fe-cream, #faf8f5) !important;
}

.lf-forescape--pack .f-room-slot-unavailable-text,
.lf-booking-checkout .f-room-slot-unavailable-text {
	font-size: 0.72rem !important;
	color: var(--lf-fe-muted, #5c5c72) !important;
}

/* Sidebar sélection : liens moins « bleus soulignés » */
.lf-forescape--pack .f-page-selection a,
.lf-forescape--pack .f-page-selection .f-underline,
.lf-forescape--pack .f-page-selection .f-text-primary {
	color: var(--lf-fe-navy, #262762) !important;
	text-decoration: none !important;
	font-weight: 600;
}

.lf-forescape--pack .f-page-selection a:hover {
	color: var(--lf-fe-primary, #9b4c34) !important;
}

.lf-forescape--pack .f-attribute .f-text-xl {
	font-size: 1.05rem !important;
	font-weight: 600 !important;
	color: var(--lf-fe-navy, #262762) !important;
}

.lf-forescape--pack .f-shop-item-title {
	font-weight: 700;
	color: var(--lf-fe-navy, #262762);
}

.lf-forescape--pack .f-shop-item-price-amount {
	color: var(--lf-fe-primary, #9b4c34);
	font-weight: 700;
}

/* -------------------------------------------------------------------------
 * Boutique bons cadeaux (Pour offrir) — 3 colonnes pour 3 produits.
 * 4escape force md:f-grid-cols-2 → trou vide en bas à droite.
 * ------------------------------------------------------------------------- */
.lf-cadeaux-boutique .lf-forescape--cadeaux .f-grid:has(> .f-card),
.lf-cadeaux-boutique .lf-forescape--cadeaux .md\:f-grid-cols-2:has(> .f-card),
.lf-cadeaux-boutique .lf-forescape--cadeaux [class*="f-grid-cols-2"]:has(> .f-card),
.lf-forescape--cadeaux .f-catalog-section .f-grid:has(> .f-card),
.lf-forescape--cadeaux .f-catalog-panel .f-grid:has(> .f-card) {
	display: grid !important;
	gap: 1.25rem !important;
	grid-template-columns: 1fr !important;
}

@media (min-width: 700px) {
	.lf-cadeaux-boutique .lf-forescape--cadeaux .f-grid:has(> .f-card),
	.lf-cadeaux-boutique .lf-forescape--cadeaux .md\:f-grid-cols-2:has(> .f-card),
	.lf-cadeaux-boutique .lf-forescape--cadeaux [class*="f-grid-cols-2"]:has(> .f-card),
	.lf-forescape--cadeaux .f-catalog-section .f-grid:has(> .f-card),
	.lf-forescape--cadeaux .f-catalog-panel .f-grid:has(> .f-card) {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

.lf-cadeaux-boutique .lf-forescape--cadeaux .f-grid:has(> .f-card) > .f-card,
.lf-cadeaux-boutique .lf-forescape--cadeaux [class*="f-grid-cols-2"]:has(> .f-card) > .f-card,
.lf-forescape--cadeaux .f-catalog-section .f-grid:has(> .f-card) > .f-card {
	min-width: 0 !important;
	max-width: none !important;
	width: 100% !important;
}