/* Import Google Font - Oswald */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&display=swap');

@font-face {
	font-family: 'PP Gatwick';
	src: url('../fonts/PPGatwick-Bold.woff2') format('woff2'),
		url('../fonts/PPGatwick-Bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'PP Gatwick';
	src: url('../fonts/PPGatwick-Ultralight.woff2') format('woff2'),
		url('../fonts/PPGatwick-Ultralight.woff') format('woff');
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'PP Neue Montreal Medium';
	font-style: normal;
	font-weight: normal;
	src: local('PP Neue Montreal Medium'), url('../fonts/ppneuemontreal-medium.woff') format('woff');
}

@font-face {
	font-family: 'PP Neue Montreal Book';
	src: url('../fonts/PPNeueMontreal-Book.woff2') format('woff2'),
		url('../fonts/PPNeueMontreal-Book.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

html,
bod,
* {
	font-family: 'PP Neue Montreal Book', sans-serif;
}


/* Conteneur de la carte - pleine hauteur */
.ffs-map-container {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

.ffs-map {
	position: absolute;
	top: 0;
	/* Hauteur du header */
	left: 0;
	right: 0;
	bottom: 0;
	width: 100% !important;
	height: 100vh !important;
}

/* Header fixe */
.ffs-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: #ffffff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	z-index: 1000;
	padding: 12px 20px;
	display: flex;
	align-items: center;
	gap: 15px;
	flex-wrap: wrap;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-20px);
	animation: slideDownFadeIn 0.6s ease-out forwards;
}

@keyframes slideDownFadeIn {
	to {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
}

/* Animation pour les filtres */
.ffs-filters {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
	flex: 1;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	animation: slideDownFadeIn 0.5s ease-out 0.2s forwards;
}

/* Animation pour la recherche */
.ffs-search-container {
	position: relative;
	min-width: 250px;
	opacity: 0;
	visibility: hidden;
	transform: scale(0.95);
	animation: scaleIn 0.5s ease-out 0.3s forwards;
}

@keyframes scaleIn {
	to {
		opacity: 1;
		visibility: visible;
		transform: scale(1);
	}
}

/* Header de filtres */
.ffs-map-header {
	position: fixed;
	z-index: 0;
	border-radius: 10px;
	padding: 0;
	margin: 0;
	z-index: 999;
	width: calc(100% - 40px);
	top: 20px;
	right: 20px;
	left: 20px;
}

.ffs-marker {
	width: 24px;
	height: 24px;
	background: red;
	border-radius: 50%;
	border: 2px solid white;
	cursor: pointer;
	/* transition: transform 0.2s ease;*/
}

.ffs-marker:hover {
	transform: scale(1.1);
}

/* Marker avec icône personnalisée */
.ffs-marker--has-icon {
	width: 32px;
	height: 32px;
	background: #ffffff;
	border: none;
	border-radius: 50%;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Marker par défaut (sans icône) */
.ffs-marker--default {
	background: #D9AA4A;
	border: none;
	border-radius: 50%;
}


/* ligne horizontale = header découpé en colonnes */
.ffs-filters-inner {
	display: grid;
	grid-template-columns: minmax(0, 5fr) 2fr 2fr 2fr 2fr minmax(0, 2fr);
	width: 100%;
	min-height: 54px;
	align-items: stretch;
}


/* chaque cellule du header */
.ffs-filters-cell {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f5f5f5;
	border-left: 1px solid #ffffff;
	padding: 0 16px;
	box-sizing: border-box;
	min-height: 54px;
}


.ffs-filters-inner .ffs-filters-cell:first-child {
	padding: 0 0 0 16px;
}

/* cellule logo + search */
.ffs-filters-cell--search {
	justify-content: flex-start;
	gap: 16px;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	background: #000;
	border: none;
}

/* couleurs dorées sur les blocs de filtres */
.ffs-filters-cell--spiritueux,
.ffs-filters-cell--matiere,
.ffs-filters-cell--type-site,
.ffs-filters-cell--maison {
	background: #D9AA4A;
	color: #fff;
}

/* cellule toggle "Ouvert au public" */
.ffs-filters-cell--toggle {
	background: #ffffff;
	justify-content: center;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}

/* logo à gauche */
.ffs-logo-block {
	display: inline-flex;
	flex-direction: column;
	line-height: 1.1;
	background-color: black;
	flex-grow: 1
}

.ffs-logo-block img {
	height: 54px;
	max-width: initial;
	width: auto;
}

.ffs-logo-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #999;
}

.ffs-logo-main {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
}

/* Search */
.ffs-search-block {
	position: relative;
	flex: 0 0 273px;
	height: 100%;
}

.ffs-search-input {
	width: 100%;
	padding: 10px 40px 10px 15px;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-family: 'PP Neue Montreal Book';
	font-weight: 500;
	font-size: 13px;
	line-height: 1.1;
	transition: border-color 0.2s ease;
	border-radius: 0;
	border: none;
	height: 100%;
}

.ffs-search-input:focus {
	outline: none;
	border-color: #cfeb4c;
}

.ffs-search-input::placeholder {
	color: #999;
}

/* icône loupe à droite */
.ffs-search-icon {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	border-radius: 100%;
	border: 2px solid #D9AA4A;
	box-sizing: border-box;
}

.ffs-search-icon::after {
	content: '';
	position: absolute;
	width: 8px;
	height: 2px;
	background: #D9AA4A;
	bottom: -4px;
	right: -4px;
	transform: rotate(45deg);
}

/* liste d'autocomplétion */
.ffs-search-results {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #ffffff;
	border: 1px solid #d4d4d4;
	border-top: none;
	max-height: 220px;
	overflow-y: auto;
	display: none;
	z-index: 25;
}

.ffs-search-results.is-visible {
	display: block;
}

.ffs-search-results-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ffs-search-results-item {
	padding: 6px 10px;
	font-size: 13px;
	cursor: pointer;
}

.ffs-search-results-item:hover {
	background: #f2f2f2;
}

/* labels et selects dans les cellules dorées */
.ffs-filter-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-right: 8px;
	line-height: 1.2;
}

.ffs-select {
	min-width: 120px;
	padding: 4px 8px;
	border: none;
	border-radius: 0;
	font-size: 13px;
	background: #D9AA4A;
	color: #fff;
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	background-position: right 6px center;
	background-repeat: no-repeat;
	background-image: linear-gradient(45deg, transparent 50%, #fff 50%),
		linear-gradient(135deg, #fff 50%, transparent 50%);
	background-size: 6px 6px, 6px 6px;
	background-position: calc(100% - 8px) 50%, calc(100% - 4px) 50%;
}

/* flèche des selects visible sur fond doré */
.ffs-select:focus {
	outline: 1px solid #fff;
}

/* toggle Ouvert au public */
.ffs-toggle-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
}

.ffs-toggle-label {
	font-family: 'PP Neue Montreal Book';
	font-size: 12px;
	font-weight: 400;
	color: #272322;
	text-transform: uppercase;
	cursor: pointer;
	user-select: none;
	margin-bottom: 0 !important;
}

/* Masquer le checkbox natif */
.ffs-toggle-wrapper input[type="checkbox"] {
	display: none;
}

/* Switch container */
.ffs-switch {
	position: relative;
	display: inline-block;
	width: 34px;
	height: 13px;
	background-color: #ccc;
	border-radius: 6.5px;
	cursor: pointer;
	transition: background-color 0.3s ease;
	margin-bottom: 0 !important;
}

/* Switch slider */
.ffs-switch::before {
	content: '';
	position: absolute;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background-color: white;
	top: 2px;
	left: 2px;
	transition: transform 0.3s ease, background-color 0.3s ease;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* État actif (checked) */
.ffs-toggle-wrapper input[type="checkbox"]:checked+.ffs-switch {
	background-color: #222222;
}

.ffs-toggle-wrapper input[type="checkbox"]:checked+.ffs-switch::before {
	background-color: #DDAE53;
	transform: translateX(21px);
}

/* Hover effect */
.ffs-switch:hover {
	opacity: 0.9;
}

/* responsive basique */
@media (max-width: 1180px) {
	.ffs-filters-inner {
		grid-template-columns: 1fr;
	}

	.ffs-filters-cell {
		justify-content: flex-start;
		border-left: none;
		border-top: 1px solid #fff;
	}

	.ffs-filter-dropdown-menu {
		width: calc(100vw - 40px);
		left: 50%;
		transform: translateX(-50%);
	}
}

/* Popup styles */
.ffs-popup {
	padding: 0px;
	max-width: 300px;
}

.ffs-popup h3 {
	margin: 0 0 0px 0;
	font-size: 16px;
}

.ffs-popup p {
	margin: 5px 0;
	font-size: 13px;
}

.ffs-popup a {
	color: #00A0DC;
	text-decoration: none;
}

.ffs-popup a:hover {
	text-decoration: underline;
}

/* ============================================
   PANNEAU LATÉRAL (SIDEBAR)
   ============================================ */

/* ============================================
   PANNEAU LATÉRAL (SIDEBAR)
   ============================================ */

.ffs-sidebar {
	position: absolute;
	left: -517px;
	bottom: 0px;
	/* Positionné sous le conteneur DOM-TOM (~80px + ~80px de haut + marge) */
	width: 517px;
	height: calc(100% - 200px);
	background: #fff;
	box-shadow: 2px 0 10px rgba(0, 0, 0, 0.15);
	transition: left 0.3s ease;
	z-index: 150;
	overflow-y: auto;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	scrollbar-width: none;
	/* Firefox */
	-ms-overflow-style: none;
	/* IE and Edge */
}

.ffs-sidebar::-webkit-scrollbar {
	display: none;
	/* Chrome, Safari, Opera */
}

.ffs-sidebar.is-open {
	left: 20px;
}


/* Contenu du panneau */
.ffs-sidebar-content {
	position: relative;
}

/* Badge région */
.ffs-sidebar-badge {
	background: #f0f0f0;
	padding: 10px 0px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #666;
}

/* Image de la maison */
.ffs-sidebar-image {
	width: 100%;
	height: 250px;
	object-fit: cover;
	display: block;
}

/* Padding intérieur */
.ffs-sidebar-inner {
	padding: 0 30px 0 30px;
}

/* Titre principal */
.ffs-sidebar-title {
	color: #D9AA4A;
	font-size: 36px;
	font-weight: bold;
	margin: 0 0 20px 0;
	line-height: 1.2;
}

/* Icônes */
.ffs-sidebar-icons {
	display: flex;
	gap: 30px;
	margin: 30px 0;
}

.ffs-sidebar-icon {
	text-align: center;
	flex: 1;
}

.ffs-sidebar-icon .icon {
	font-size: 32px;
	margin-bottom: 8px;
}

.ffs-sidebar-icon div:last-child {
	font-size: 10px;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 0.5px;
}

/* Description */
.ffs-sidebar-title--region {
	font-family: 'PP Neue Montreal Book';
	font-size: 14px;
	font-weight: 500;
	color: #222;
	text-transform: uppercase;
	margin-bottom: 15px;
	padding-bottom: 2px;
	border-bottom: 1px solid #ddd;
}

/* Titres de section */
.ffs-sidebar-description {
	font-size: 18px;
	line-height: 1.2;
	color: #666;
	margin: 0 0 20px 0;
}

/* Titres de section */
.ffs-sidebar-section-title {
	color: #D9AA4A;
	font-size: 16px;
	font-weight: bold;
	text-transform: uppercase;
	margin: 30px 0 10px 0;
	letter-spacing: 0.5px;
}

/* Sections */
.ffs-sidebar-section {
	font-size: 14px;
	line-height: 1.6;
	color: #333;
}

.ffs-sidebar-section p {
	margin: 5px 0;
}

/* Lien site web */
.ffs-sidebar-website {
	display: inline-block;
	margin-top: 20px;
	color: #D9AA4A;
	text-decoration: none;
	font-weight: 600;
	border-bottom: 2px solid #D9AA4A;
	padding-bottom: 2px;
}

.ffs-sidebar-website:hover {
	color: #c09030;
}

/* Bouton fermer */
.ffs-sidebar-close {
	position: absolute;
	right: 15px;
	top: 10px;
	background: rgba(255, 255, 255, 0.9);
	border: none;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	z-index: 10;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	transition: all 0.2s;
	/* hide temporary
	display: none;*/
}

.ffs-sidebar-close:hover {
	background: #fff;
	transform: scale(1.1);
}

/* ============================================
   FILTRES DROPDOWN AVEC CHECKBOXES
   ============================================ */

/* Container du dropdown */
.ffs-filter-dropdown {
	position: relative;
	width: 100%;
}

/* Bouton toggle du dropdown */
.ffs-filter-dropdown-toggle {
	width: 100%;
	background: transparent;
	border: none;
	color: #ffffff;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
	/* Réduit pour correspondre à l'image de référence */
	padding: 8px 12px;
	transition: opacity 0.2s;
}

.ffs-filter-dropdown-label {
	font-family: 'PP Neue Montreal Book';
	font-weight: 500;
	font-size: 13px;
	line-height: 1.1;
}

.ffs-filter-dropdown-arrow {
	color: rgba(17, 15, 15, 0.34);
	/* 34% de #110F0F */
	font-size: 10px;
	transition: transform 0.2s ease;
}

.ffs-filter-dropdown-toggle:hover {
	opacity: 0.9;
}

/* Compteur de sélections */
.ffs-filter-dropdown-count {
	font-size: 12px;
	font-weight: 400;
}

.ffs-filter-dropdown-count:empty {
	display: none;
}

/* Flèche du dropdown */
.ffs-filter-dropdown-arrow {
	font-size: 10px;
	transition: transform 0.3s;
}

.ffs-filter-dropdown.is-open .ffs-filter-dropdown-arrow {
	transform: rotate(180deg);
}

/* Menu déroulant */
.ffs-filter-dropdown-menu {
	position: absolute;
	top: 100%;
	left: 0;
	/* right: 0; removed to allow auto width or fixed width // */
	width: 420px;
	/* Fixed width for better grid */
	background: #ffffff;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
	z-index: 1000;
	display: none;
	margin-top: 8px;
	padding: 20px;
	box-sizing: border-box;
}

.ffs-filter-dropdown.is-open .ffs-filter-dropdown-menu {
	display: block;
}

/* Grille de filtres (Pills) */
.ffs-filter-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-height: 300px;
	overflow-y: auto;
	padding-bottom: 10px;
}

/* Option (Label wrapping input + span) */
.ffs-filter-option {
	display: inline-flex;
	margin: 0;
	padding: 0;
	cursor: pointer;
	border: none;
}

.ffs-filter-option:hover {
	background: transparent;
}

/* Masquer la checkbox native */
.ffs-filter-option input[type="checkbox"] {
	display: none;
}

/* Le pill visuel */
.ffs-filter-option span {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	border: 1px solid #ddd;
	border-radius: 20px;
	background: #fff;
	color: #333333;
	font-size: 13px;
	font-weight: 500;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.ffs-filter-option:hover span {
	border-color: #aaa;
	background: #f9f9f9;
}

/* Selected State */
.ffs-filter-option input[type="checkbox"]:checked+span {
	background-color: #E6F0EE;
	/* Light green tint based on image */
	border-color: #B8D6D0;
	color: #1a1a1a;
	font-weight: 600;
}

/* Actions Footer */
.ffs-filter-actions {
	margin-top: 15px;
	padding-top: 15px;
	border-top: 1px solid #f0f0f0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.ffs-btn-reset {
	background: none;
	border: none;
	text-decoration: underline;
	font-size: 13px;
	color: #333;
	cursor: pointer;
	padding: 0;
}

.ffs-btn-reset:hover {
	color: #000;
}

.ffs-btn-validate {
	/**/
	background: #272322;
	color: #fff;
	border: none;
	padding: 8px 20px;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s;
	display: none;
}

.ffs-btn-validate:hover {
	background: #000;
}

/* Scrollbar personnalisée */
.ffs-filter-grid::-webkit-scrollbar {
	width: 4px;
}

.ffs-filter-grid::-webkit-scrollbar-track {
	background: #f1f1f1;
}

.ffs-filter-grid::-webkit-scrollbar-thumb {
	background: #ccc;
	border-radius: 2px;
}

/* ============================================
   BADGES DE FILTRES ACTIFS
   ============================================ */

/* Conteneur des badges */
.ffs-filter-badges-container {
	position: fixed;
	/* ← AJOUTER fixed comme le header */
	top: 54px;
	/* ← Juste en dessous du header (hauteur du header) */
	left: 0;
	right: 0;
	z-index: 998;
	/* ← Juste en dessous du header (999) */
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 15px 20px;
	background: transparent;
	min-height: 20px;
	transition: transform 0.3s ease;
}

.ffs-filter-badges-container:empty {
	display: none;
}

/* cellule toggle "Ouvert au public" */
.ffs-filters-cell--toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-5px);
	animation: filterItemIn 0.4s ease-out 0.6s forwards;
}

/* Dropdowns de filtres */
.ffs-filter-dropdown {
	position: relative;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-5px);
	animation: filterItemIn 0.4s ease-out forwards;
}

/* Animation en cascade pour chaque filtre */
.ffs-filter-dropdown:nth-child(1) {
	animation-delay: 0.3s;
}

.ffs-filter-dropdown:nth-child(2) {
	animation-delay: 0.4s;
}

.ffs-filter-dropdown:nth-child(3) {
	animation-delay: 0.5s;
}

@keyframes filterItemIn {
	to {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
}

.ffs-filter-button {
	background: #f8f8f8;
	border: 1px solid #ddd;
	padding: 8px 16px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: all 0.2s ease;
}

.ffs-filter-button:hover {
	background: #efefef;
	border-color: #cfeb4c;
}

/* Badge individuel */
.ffs-filter-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #D9AA4A;
	color: #ffffff;
	padding: 8px 15px;
	border-radius: 20px;
	font-size: 13px;
	font-weight: bold;
	text-transform: uppercase;
	transition: all 0.3s ease;
	animation: badgeAppear 0.3s ease;
}

@keyframes badgeAppear {
	from {
		opacity: 0;
		transform: scale(0.8);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* Icône du badge */
.ffs-filter-badge-icon {
	width: 18px;
	height: 18px;
	object-fit: contain;
	flex-shrink: 0;
}

/* Texte du badge */
.ffs-filter-badge-text {
	flex: 1;
}

/* Bouton de suppression (croix) */
.ffs-filter-badge-remove {
	background: transparent;
	border: none;
	color: #ffffff;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
	padding: 0;
	margin: 0;
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s;
	flex-shrink: 0;
}

.ffs-filter-badge-remove:hover {
	transform: scale(1.2);
}

/* Badge qui disparaît */
.ffs-filter-badge.removing {
	animation: badgeDisappear 0.3s ease forwards;
}

@keyframes badgeDisappear {
	to {
		opacity: 0;
		transform: scale(0.8);
	}
}

/* ============================================
   SIDEBAR RÉGION (nouvelle fonctionnalité)
   ============================================ */

/* Badge région avec couleur spécifique */
.ffs-sidebar-badge--region {
	background: #00A0DC;
	color: #ffffff;
}

/* Titre région avec couleur spécifique */
.ffs-sidebar-title--region {
	color: #00A0DC;
}

/* Classe pour différencier sidebar région de sidebar maison */
.ffs-sidebar--region .ffs-sidebar-badge {
	background: transparent;
	position: absolute;
	z-index: 20;
	top: 0;
	left: 30px
}

.ffs-sidebar--region .ffs-sidebar-title {
	color: #fff;
	font-family: 'PP Gatwick', serif;
}

/* ============================================
   AUTOCOMPLÉTION DE RECHERCHE (améliorée)
   ============================================ */

.ffs-search-results {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #ffffff;
	border: 1px solid #ddd;
	border-radius: 4px;
	max-height: 300px;
	overflow-y: auto;
	z-index: 1000;
	display: none;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	margin-top: 4px;
}

.ffs-search-results.is-visible {
	display: block;
}

.ffs-search-results-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ffs-search-results-list li {
	padding: 12px 16px;
	/* Plus de marge intérieure */
	cursor: pointer;
	/* Curseur pointer */
	border-bottom: 1px solid #f0f0f0;
	transition: background-color 0.2s ease;
}

.ffs-search-results-list li:last-child {
	border-bottom: none;
}

.ffs-search-results-list li:hover {
	background-color: #f5f5f5;
}

.ffs-search-results-list li:active {
	background-color: #e8e8e8;
}

/* ============================================
   DOM-TOM ICONS (en bas à droite)
   ============================================ */

.ffs-domtom-container {
	position: absolute;
	top: 100px;
	left: 20px;
	background: rgba(255, 255, 255, 0.70);
	border-radius: 8px;
	padding: 5px 0px;
	/* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);*/
	z-index: 100;
	display: flex;
	flex-direction: row;
	/* gap: 15px; */
	align-items: center;
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
}

.ffs-domtom-container.loaded {
	opacity: 1;
}

/* Loader pour le conteneur DOM-TOM */
.ffs-domtom-loader {
	width: 30px;
	height: 30px;
	border: 3px solid #f3f3f3;
	border-top: 3px solid #cfeb4c;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin: 20px auto;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/* Carte de France pour retour à la vue par défaut */
.ffs-france-map {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	transition: transform 0.2s ease-in-out;
	width: 100%;
	padding-left: 20px;
}

.ffs-france-map:hover {
	transform: scale(1.05);
}

.ffs-france-icon {
	width: auto;
	object-fit: contain;
	transition: filter 0.2s ease;
	filter: brightness(0) saturate(100%);
	/* Couleur noire par défaut */
}

.ffs-france-map:hover .ffs-france-icon,
.ffs-france-map.active .ffs-france-icon {
	filter: brightness(0) saturate(100%) invert(79%) sepia(36%) saturate(961%) hue-rotate(334deg) brightness(99%) contrast(94%);
	/* Couleur #F2AF4E au hover et à l'état actif */
}

.ffs-france-label {
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #333;
	text-align: center;
}

/* Container des icônes DOM-TOM */
.ffs-france-label {
	font-size: 9px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #333;
	text-align: center;
}

/* Container des icônes DOM-TOM */
.ffs-domtom-icons {
	display: flex;
	gap: 1px;
	align-items: center;
	padding: 0px 10px 0px 10px;
}

.ffs-domtom-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	transition: transform 0.2s ease;
	min-width: 80px;
}

.ffs-domtom-item:hover .ffs-domtom-icon,
.ffs-domtom-item.active .ffs-domtom-icon {
	filter: brightness(0) saturate(100%) invert(79%) sepia(36%) saturate(961%) hue-rotate(334deg) brightness(99%) contrast(94%);
	/* Correspond à la couleur #F2AF4E */
}

.ffs-domtom-icon {
	width: 40px;
	height: 40px;
	object-fit: contain;
	transition: filter 0.2s ease;
	filter: brightness(0) saturate(100%);
	/* Rend l'icône noire par défaut */
}

.ffs-domtom-label {
	font-size: 9px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #333;
	text-align: center;
	line-height: 1.2;
	max-width: 70px;
	font-family: 'PP Neue Montreal Book'
}


/* Responsive */
@media (max-width: 768px) {
	.ffs-sidebar {
		/* Mobile: draggable du bas vers le haut */
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		top: auto;
		/* width retiré : left: 0 + right: 0 = 100% automatique */
		height: auto;
		max-height: auto;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		z-index: 1000;
		/* Optimisation performance pour le drag */
		will-change: transform;
		/* Caché par défaut */
		transform: translate3d(0, 100%, 0);
		transition: none;
		/* Fix bug 001 : Assurer alignement parfait */
		margin: 0;
		padding: 0;
	}


	.ffs-sidebar.is-open {
		/* Ouvert mais pas encore positionné */
		transform: translate3d(0, 100%, 0);
		/* Override desktop left: 20px */
		left: 0;
	}


	.ffs-sidebar.is-collapsed {
		/* Position basse : 30% visible */
		transform: translate3d(0, 70%, 0);
	}

	.ffs-sidebar.is-expanded {
		/* Position haute : 100% visible */
		transform: translate3d(0, 0, 0);
	}

	.ffs-sidebar.is-animating {
		/* Transition smooth après release du drag */
		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.ffs-sidebar.is-dragging {
		/* Pendant le drag : pas de transition */
		transition: none;
		user-select: none;
		-webkit-user-select: none;
	}



	.ffs-domtom-container {
		bottom: 10px;
		right: 10px;
		padding: 10px 15px;
		gap: 15px;
	}

	.ffs-domtom-icon {
		width: 35px;
		height: 35px;
	}

	.ffs-domtom-label {
		font-size: 8px;
		max-width: 50px;
	}
}

/* ============================================
   SLIDER REGIONS
   ============================================ */

.ffs-region-slider {
	position: relative;
	width: 100%;
	height: 269px;
	/* Hauteur fixe (522x269 aspect ratio responsive) */
	overflow: hidden;
	margin-bottom: 25px;
}

.ffs-region-slides {
	display: flex;
	width: 100%;
	height: 100%;
	transform: translateX(0);
	/* Initial position */
	transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	/* Ajout transition smooth */
	cursor: grab;
}

.ffs-region-slides:active {
	cursor: grabbing;
}

.ffs-region-slide {
	position: relative;
	flex: 0 0 100%;
	/* Force width to container */
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
}

/* Bullets de navigation */
.ffs-region-bullets {
	position: absolute;
	top: 46px;
	right: 19px;
	display: flex;
	gap: 10px;
	z-index: 2;
}

.ffs-region-bullet {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	transition: background 0.3s;
}

.ffs-region-bullet.active {
	background: #fff;
}

/* Titre Région Spécifique */
.ffs-sidebar-title--region-specific {
	font-family: 'PP Neue Montreal Book';
	font-size: 30px;
	font-weight: bold;
	line-height: 1.1;
	color: #ffffff;
	text-transform: uppercase;

	position: absolute;
	bottom: 20px;
	left: 20px;
	z-index: 20;

	/* Optionnel : Ombre portée pour lisibilité sur image */
	pointer-events: none;
	/* Clic traverse le texte */
}

/* -------------------------------------------------------------------------- */
/*                                NOUVEAU FO5 : Chiffres Clés                 */
/* -------------------------------------------------------------------------- */
.ffs-region-key-figures {
	margin-top: 30px;
	border-top: 1px solid rgba(221, 174, 83, 0.2);
	padding-top: 30px;
}

.ffs-kf-title {
	font-family: 'PP Neue Montreal Medium';
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 25px;
	letter-spacing: 1px;
	color: #DDAE53;
	text-transform: uppercase;
}

.ffs-key-figures-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.ffs-key-figure-item {
	flex: 0 0 calc(33.333% - 14px);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.ffs-kf-number {
	font-family: 'PP Gatwick', serif;
	font-weight: bold;
	font-size: 30px;
	/* Increased size based on visual */
	line-height: 1;
	color: #DDAE53;
	margin-bottom: 5px;
}

.ffs-kf-desc {
	font-family: 'PP Neue Montreal Book', sans-serif;
	font-size: 14px;
	line-height: 1.2;
	color: #DDAE53;
	font-style: italic;
}

/* RECTIFICATION: Le JS injecte le titre dans .ffs-sidebar-inner, donc sous le slider. 
   Mais la demande est "afficher le nom au dessus du slider".
   "Au dessus" peut vouloir dire "superposé" (overlay) ou "avant" (before).
   Vu l'image de référence fournie (implied context), c'est souvent un overlay sur l'image.
   MAIS le texte dit "Nom de la region doit-être affiché au dessus du slider".
   "Au dessus" en français peut être ambigu.
   Si c'est "Overlay": ma CSS .ffs-sidebar-title--region-specific est OK si je déplace le HTML.
   Si c'est "Avant": block normal.
   
   REGARDONS L'IMAGE FOURNIE PAR LE USER.
   L'image montre "NOUVELLE AQUITAINE" SUR L'IMAGE (Overlay).
   
   DONC, je dois modifier le JS pour mettre le titre DANS le slider container, ou le CSS pour le remonter.
   Le JS actuel met le titre APRES le slider.
   
   Je vais CSS hack pour le remonter en absolute si le parent est relatif ? 
   Non, le titre est dans .ffs-sidebar-inner qui est sibling de .ffs-region-slider.
   
   Je vais modifier l'instruction CSS pour cibler le bon élément, mais attention le HTML actuel ne permet pas l'overlay facile sans structure.
   
   CORRECTION PLAN:
   Je vais modifier le JS pour inclure le titre DANS le .ffs-region-slider ou juste après mais en absolute remonté.
   Ou mieux, le mettre DANS le slider en overlay.
   
   WAIT. L'instruction utilisateur "Le nom de la region doit-être affiché au dessus du slider" + Image.
   L'image montre clairement le texte SUR l'image.
   
   Je vais modifier map-init.js pour mettre le titre DANS le slider container.
   C'est plus propre que de bidouiller le CSS.
*/
/* ============================================
   LIGHTBOX REGIONS
   ============================================ */
.ffs-lightbox {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.9);
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	backdrop-filter: blur(5px);
}

.ffs-lightbox.visible {
	opacity: 1;
	visibility: visible;
}

.ffs-lightbox-content {
	position: relative;
	max-width: 90%;
	max-height: 90%;
}

.ffs-lightbox-img {
	max-width: 100%;
	max-height: 90vh;
	border-radius: 4px;
	box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
}

.ffs-lightbox-close {
	position: absolute;
	top: -40px;
	right: -40px;
	background: transparent;
	border: none;
	color: #fff;
	font-size: 40px;
	cursor: pointer;
	line-height: 1;
	transition: transform 0.2s;
	outline: none;
}

.ffs-lightbox-close:hover {
	transform: scale(1.1);
	color: #ffd700;
}

@media (max-width: 768px) {
	.ffs-lightbox-close {
		top: -40px;
		right: 0;
	}
}

/* ============================================
   SECTIONS TAXONOMIES RÉGION (F03)
   ============================================ */

.ffs-region-taxonomy-section {
	margin: 40px 0;
	position: relative;
}

.ffs-region-taxonomy-title {
	color: #DDAE53;
	font-family: 'PP Neue Montreal Medium', sans-serif;
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 20px;
}

.ffs-taxonomy-slider-container {
	/* position: relative; */
	width: 100%;
}

.ffs-taxonomy-slider-track {
	display: flex;
	gap: 15px;
	overflow-x: auto;
	padding-bottom: 10px;
	scrollbar-width: none;
	/* Firefox */
	-ms-overflow-style: none;
	/* IE and Edge */
	scroll-behavior: smooth;
}

.ffs-taxonomy-slider-track::-webkit-scrollbar {
	display: none;
	/* Chrome, Safari, Opera */
}

.ffs-taxonomy-card {
	flex: 0 0 calc(25% - 12px);
	min-width: 80px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ffs-taxonomy-card-image {
	width: 100%;
	aspect-ratio: 1 / 1;
	background-color: #fbf8f0;
	background-size: 92px 92px;
	background-position: center;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	background-repeat: no-repeat;
}

.ffs-taxonomy-card-image-spiritueux {
	width: 100%;
	aspect-ratio: 1 / 1;
	background-color: #fbf8f0;
	background-size: 90px 90px;
	background-position: center;
	background-repeat:no-repeat;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.ffs-taxonomy-card-label {
	font-family: 'PP Neue Montreal Book', sans-serif;
	font-size: 12px;
	color: #333;
	font-style: italic;
	line-height: 1.2;
	text-align: center;
}

/* Boutons de navigation */
.ffs-taxonomy-nav {
	position: absolute;
	right: -10px;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 50%;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 5;
	font-size: 20px;
	color: #DDAE53;
	transition: all 0.2s;
}

.ffs-taxonomy-nav:hover {
	background: #DDAE53;
	color: #fff;
	border-color: #DDAE53;
}

.ffs-taxonomy-nav--prev {
	left: -10px;
	right: auto;
	display: none;
	/* Masqué par défaut */
}

@media (max-width: 960px) {
	.ffs-taxonomy-card {
		flex: 0 0 calc(33.33% - 10px);
	}
}

/* ============================================
   MAPBOX POPUP CUSTOM STYLING (POST.md)
   ============================================ */

.mapboxgl-popup {
	z-index: 200;
}

.mapboxgl-popup-content {
	padding: 0;
	border-radius: 30px !important;
	/* Arrondi sur les 4 côtés */
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
	width: 269px;
	/* Taille optimale F01 */
	background: #fff;
}

/* Masquer la flèche Mapbox pour un look plus "carte" flottante si l'arrondi est fort */
.mapboxgl-popup-tip {
	display: none !important;
}

.mapboxgl-popup-close-button {
	position: absolute;
	top: 10px;
	right: 10px;
	background: rgba(255, 255, 255, 0.8);
	color: #333;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	outline: none;
	border: none;
}

/* Slider dans le Popup */
.ffs-popup-slider-container {
	position: relative;
	width: 100%;
	height: 140px;
	/* Taille optimisée F01 */
	background: #f0f0f0;
}

.ffs-popup-slider {
	width: 100%;
	height: 100%;
	position: relative;
}

.ffs-popup-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.ffs-popup-slide.active {
	opacity: 1;
}

/* Pagination Dots (POST.md: haut à droite) */
.ffs-popup-dots {
	position: absolute;
	top: 15px;
	right: 15px;
	/* Haut à droite */
	display: flex;
	gap: 6px;
	z-index: 5;
}

.ffs-popup-dot {
	width: 6px;
	height: 6px;
	background: rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	cursor: pointer;
	transition: all 0.2s;
}

.ffs-popup-dot.active {
	background: #fff;
	transform: scale(1.2);
}

/* Content Area */
.ffs-popup-content-inner {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.ffs-popup-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px;
}

.ffs-popup-titles {
	flex: 1;
}

.ffs-popup-title {
	font-family: 'PP Gatwick', sans-serif;
	font-weight: bold;
	/* PP Gatwick Bold */
	font-size: 20px;
	margin: 0 0 5px 0;
	color: #D9AA4A;
	/* Gold color */
	line-height: 1.1;
}

.ffs-popup-site-name {
	font-family: 'PP Gatwick Bold', sans-serif;
	/* PP Gatwick Book/Ultralight fallback */
	font-size: 12px;
	color: #D9AA4A;
}

.ffs-popup-address {
	font-family: 'PP Neue Montreal Book';
	font-weight: 200;
	/* PP Gatwick Book/Ultralight fallback */
	font-size: 14px;
	color: #333;
	line-height: 1.3;
	max-width: 80%;
}

/* Bloc "À VISITER" */
.ffs-visit-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	min-width: 60px;
}

.ffs-visit-icon {
	width: 28px;
	height: auto;
}

.ffs-visit-text {
	font-family: 'PP Neue Montreal Medium', sans-serif;
	font-size: 8px;
	color: #91466D;
	/* Couleur pourpre mockup */
	letter-spacing: 0.05em;
}

/* Section Activités (F03) */
.ffs-popup-activities-separator {
	height: 1px;
	background: #EEEEEE;
	margin: 5px 0 15px 0;
	width: 100%;
}

.ffs-popup-activities {
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
	gap: 15px;
	padding-bottom: 10px;
}

.ffs-popup-activity-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	/* flex: 1; removed to allow left align */
}

.ffs-popup-activity-icon {
	height: 24px;
	width: auto;
	/* Si ce sont des SVGs, on pourrait forcer la couleur ici, 
	   mais ACF renvoie l'URL de l'image. 
	   On assume que l'icône téléchargée a déjà la bonne couleur. */
}

.ffs-popup-activity-label {
	font-family: "PP Neue Montreal Book", sans-serif;
	font-weight: 200;
	/* PP Gatwick Book */
	font-size: 9px;
	color: #91466D;
	text-align: center;
	line-height: 1.1;
	text-transform: uppercase;
}

/* ============================================
   SIDEBAR POST (FO4) - Unified with Regions
   ============================================ */

/* On utilise ffs-sidebar--region pour la structure et le titre en overlay.
   Ici on définit uniquement les styles pour les champs spécifiques aux posts. */

.ffs-sidebar-site-name {
	color: #DDAE53;
	font-family: "PP Gatwick", serif;
	font-size: 30px;
	font-style: normal;
	font-weight: 700;
	line-height: 35px;
	/* 116.667% */
	text-transform: uppercase;
	margin-bottom: 20px;
}

/* Overlay Sidebar Header (FO4) */
.ffs-sidebar-header-overlay {
	position: absolute;
	bottom: 20px;
	left: 20px;
	right: 20px;
	z-index: 20;
	display: flex;
	justify-content: end;
	align-items: flex-end;
	pointer-events: none;

}

.ffs-sidebar-header-overlay h2 {
	display: none
}

.ffs-sidebar-header-overlay .ffs-sidebar-title--region-specific {
	position: static !important;
	/* Reset absolute from region style */
	margin: 0 !important;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.ffs-sidebar-visit-overlay {
	background-color: transparent;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
}

.ffs-sidebar-visit-overlay img {
	width: 33px;
	height: auto;
	filter: brightness(0) invert(1);
	/* Ensure it's white */
}

.ffs-sidebar-visit-overlay span {
	color: #ffffff;
	font-family: 'PP Neue Montreal Book';
	font-size: 8px;
	font-weight: 400;
}

/* Full Description (FO4) */
.ffs-sidebar-full-description {
	font-family: 'PP Neue Montreal Book', sans-serif;
	font-size: 18px;
	/* Bigger as per mockup */
	line-height: 1.4;
	color: #333;
	margin-bottom: 30px;
}

/* Activities Bottom Section (FO4) */
.ffs-sidebar-activities {
	display: flex;
	/* justify-content: space-around; */
	align-items: flex-start;
	padding-top: 20px;
	border-top: 1px solid #eee;
	margin-top: 20px;
}

.ffs-sidebar-activity-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: 25%;
}

.ffs-sidebar-activity-icon-wrapper {
	height: 35px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ffs-sidebar-activity-icon {
	width: 50px;
	height: auto;
	max-height: 100%;
}

.ffs-sidebar-activity-label {
	font-family: 'PP Neue Montreal Book', sans-serif;
	font-size: 9px;
	color: #91466D;
	text-align: center;
	text-transform: uppercase;
}

/* Produit Emblématique Section (FO4) */
.ffs-section-produit-emblematique {
	margin-top: 30px;
	margin-bottom: 20px;
}

.ffs-section-produit-emblematique .ffs-region-slider {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	height: 180px;
	/* Specific height for product slider */
}

.ffs-sidebar-produit-overlay {
	position: absolute;
	bottom: 20px;
	left: 20px;
	z-index: 10;
	color: #ffffff;
	font-family: 'PP Gatwick', sans-serif;
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
	pointer-events: none;
}

.ffs-section-produit-emblematique .ffs-region-bullets {
	top: 15px;
	bottom: auto;
	right: 15px;
	z-index: 10;
}

.ffs-section-produit-emblematique .ffs-region-slide {
	height: 100%;
}

/* Region Link in Post Sidebar Badge (FO4) */
.ffs-sidebar-region-link {
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
	text-transform: uppercase;
	/* Respecter la casse du nom de la région */
}

.ffs-sidebar-region-link:hover {
	text-decoration: none;
}

/* No Image Placeholder in Sidebar (Uniform with Map Selection Color) */
.ffs-sidebar-no-image-placeholder {
	width: 100%;
	height: 100%;
	background-color: #B04A42;
	/* Couleur de la région sélectionnée sur la carte */
}

/* ============================================
   SIDEBAR FOOTER
   ============================================ */
.ffs-sidebar-footer {
	margin-top: 40px;
	padding-top: 30px;
	border-top: 1px solid #eee;
}

.ffs-sidebar-footer-section-title {
	color: #D9AA4A;
	font-size: 16px;
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 15px;
	letter-spacing: 0.5px;
	font-family: 'PP Neue Montreal Medium', sans-serif;
}

.ffs-sidebar-footer-address {
	font-family: 'PP Neue Montreal', sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: #222;
	margin-bottom: 25px;
}

/* Flex Container Top (Address + Visitors) */
.ffs-sidebar-footer-top-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 20px;
	margin-bottom: 10px;
}

.ffs-sidebar-footer-address-col {
	flex: 1;
	min-width: 0;
	/* Prevents overflow */
}

/* Bloc Visiteurs */
.ffs-sidebar-footer-visitors {
	background-color: #DDAE53;
	border-radius: 12px;
	padding: 15px 20px;
	display: flex;
	align-items: center;
	gap: 15px;
	color: #fff;
	width: fit-content;
	flex-shrink: 0;
	/* Prevent shrinking */
	margin-bottom: 0;
	/* Handled by row gap/margin */
	color: #fff;
	white-space: nowrap;
}

.ffs-sidebar-footer-visitors-icon {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ffs-sidebar-footer-visitors-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ffs-sidebar-footer-visitors-text {
	display: flex;
	flex-direction: column;
	align-items: center;

}

.ffs-sidebar-footer-visitors-count {
	font-family: 'PP Neue Montreal', sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #000000;
	line-height: 1.2;
}

.ffs-sidebar-footer-visitors-label {
	font-family: 'PP Neue Montreal', sans-serif;
	font-size: 9px;
	color: #000000;
	margin-top: 0px;
}


/* Contacts Icons */
.ffs-sidebar-footer-contacts {
	display: flex;
	gap: 25px;
	margin-top: 20px;
	margin-bottom: 40px;
	/* justify-content: center; */

}

.ffs-sidebar-footer-contact-icon {
	width: 54px;
	height: 54px;
	background-color: #DDAE53;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s ease, background-color 0.2s ease;
	text-decoration: none;
}

.ffs-sidebar-footer-contact-icon:hover {
	background-color: #c09030;
	transform: scale(1.05);
}

.ffs-sidebar-footer-contact-icon img {
	width: 24px;
	/* Adapter selon la taille de l'icone interne */
	height: 24px;
	object-fit: contain;
}

/* Static Visit Icon (Sidebar with no image) */
.ffs-sidebar-visit-static {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	margin-top: 5px;
	/* Align slightly */
}

.ffs-sidebar-visit-static img {
	width: 33px;
	height: auto;
	/* No filter needed if SVG is correct color, or use filter to match desire. 
       Usually "visit" icon is white in overlay. If we want gold/black here?
       User said "icône à visiter", reusing the same SVG (white?)
       If SVG is white, we need to invert it to be black/dark.
    */
	filter: none;
	/* Assuming original is colored or we want black? */
	/* If original is white (for overlay), we must invert to make it black. */
	filter: brightness(0);
}

.ffs-sidebar-visit-static span {
	font-family: 'PP Neue Montreal Book';
	font-size: 8px;
	font-weight: 400;
	color: #000;
	/* Black text */
}


/* Produit Emblématique Text */
.ffs-produit-emblematique-text {
	font-family: "PP Gatwick", serif;
	font-size: 11px;
	font-style: normal;
	font-weight: 700;
	line-height: 17px;
	/* 154.545% */
	text-transform: uppercase;
	color: #000000;
}


/* Remove header and footer of the site */
.page-template-template-carte #wrapper-navbar {
	display: none !important;
}

body .page-template-template-carte {
	height: 100dvh;
	overflow: hidden;
}

/* Sidebar No Image State */
.ffs-sidebar-content--no-image {
	padding-top: 40px !important;
}

.ffs-sidebar-content--no-image .ffs-sidebar-badge--region {
	color: #000000 !important;
}

/* Static Title (No Image State) */
.ffs-sidebar-title-static {
	font-family: "PP Gatwick", serif;
	font-size: 30px;
	/* Same visual weight as requested */
	font-weight: 700;
	color: #DDAE53;
	/* Gold */
	text-transform: uppercase;
	margin: 0 0 15px 0;
	line-height: 1.2;
	border: none;
	position: static;
	/* Vital: ensures it flows in flex */
}

/* Masquer les badges de filtres */
#ffs-map-1-filter-badges,
.ffs-filter-badges-container {
	display: none !important;
}

.is-mobile-only {
	display: none;
}

@media(min-width:1025px) {
	.ffs-mobile-filter-panel {
		display: none !important;
	}
}

/* Responsive */
@media(max-width: 1024px) {
	body {
		padding-top: 0 !important;
	}

	.is-desktop-only {
		display: none;
	}

	.is-mobile-only {
		display: block
	}

	.ffs-sidebar {
		width: 100% !important;
		height: auto !important;
		max-height: auto !important;
	}

	/* Cacher les popups sur mobile (redondant avec le sidebar) */
	.mapboxgl-popup,
	.ffs-popup {
		display: none !important;
	}

	.ffs-map-header {
		overflow: hidden;
		right: 10px;
		left: 10px;
		width: calc(100% - 20px);
		z-index: 1001;
		/* Au-dessus du sidebar mobile */
	}

	.ffs-domtom-container {
		left: 10px;
		top: 90px;
		z-index: 1001;
		/* Au-dessus du sidebar mobile */
	}

	.ffs-filters-cell {
		border-top: none !important;
	}

	.ffs-filters-inner .ffs-filters-cell:first-child {
		padding: 0 0 0 0;
	}

	.ffs-filters-cell:not(.ffs-filters-cell--search) {
		display: none;
	}

	.ffs-filters-cell .ffs-logo-block.is-mobile-only {
		width: 58px;
		height: 58px;
		overflow: hidden;
	}

	.ffs-filters-cell .ffs-logo-block.is-mobile-only a {
		padding-top: 0px;
	}

	.ffs-filters-cell .ffs-search-block {
		flex: 0 0 calc(100% - 58px);
	}

	.ffs-france-map {
		padding-left: 0;
		width: 80px;
	}

	.ffs-domtom-icons {
		gap: 1rem
	}

	.ffs-domtom-item {
		min-width: fit-content;
	}

	.ffs-domtom-container {
		padding: 10px 15px 0 15px
	}

	#ffs-map-1-domtom {
		height: fit-content;
	}

	.ffs-domtom-icons {
		justify-content: space-between;
		flex-grow: 1
	}

	/* Filtre */
	.filter-open {
		position: fixed;
		bottom: 80px;
		left: 50%;
		transform: translateX(-50%);
		width: 116px;
		height: 37px;
		border-radius: 20px;
		border: 1px solid #FFF;
		background: #DDAE53;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20px;
		z-index: 10;
	}

	.filter-open span {
		color: #FFF;
		text-align: center;
		font-family: Oswald;
		font-size: 11px;
		font-style: normal;
		font-weight: 500;
		line-height: normal;
		text-transform: uppercase;
	}

	/* ============================================
	   ACCORDÉON MOBILE POUR FILTRES
	   ============================================ */

	/* Cacher les éléments mobiles sur desktop */
	.ffs-mobile-filter-overlay,
	.ffs-mobile-filter-panel {
		display: none;
	}

	/* Overlay de fond */
	.ffs-mobile-filter-overlay {
		display: block;
		/* Override desktop display: none */
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 1002;
		/* Au-dessus des DOM-TOM (1001) */
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, visibility 0.3s ease;
	}


	.ffs-mobile-filter-overlay.is-open {
		opacity: 1;
		visibility: visible;
	}

	/* Panneau accordéon */
	.ffs-mobile-filter-panel {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #ffffff;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
		z-index: 1003;
		/* Au-dessus de l'overlay (1002) et des DOM-TOM (1001) */
		max-height: 85vh;
		display: flex;
		flex-direction: column;
		transform: translateY(100%);
		transition: transform 0.3s ease;
	}

	.ffs-mobile-filter-panel.is-open {
		transform: translateY(0);
	}

	/* Header du panneau */
	.ffs-mobile-filter-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px;
		border-bottom: 1px solid #e0e0e0;
		flex-shrink: 0;
	}

	.ffs-mobile-filter-header h3 {
		margin: 0;
		font-family: 'PP Neue Montreal Book';
		font-size: 18px;
		font-weight: 600;
		color: #272322;
		text-transform: uppercase;
	}

	.ffs-mobile-filter-close {
		background: transparent;
		border: none;
		font-size: 28px;
		line-height: 1;
		color: #666;
		cursor: pointer;
		padding: 0;
		width: 30px;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* Contenu scrollable */
	.ffs-mobile-filter-content {
		flex: 1;
		overflow-y: auto;
		padding: 0;
	}

	/* Section accordéon */
	.ffs-mobile-accordion-section {
		border-bottom: 1px solid #ffffff;
	}

	/* Header de section */
	.ffs-mobile-accordion-header {
		width: 100%;
		background: #D9AA4A;
		border: none;
		padding: 16px 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		cursor: pointer;
		transition: background 0.2s ease;
		border-bottom: 1px solid #ffffff;
	}

	.ffs-mobile-accordion-header:active {
		background: #c99a3a;
	}

	.ffs-mobile-accordion-label {
		font-family: 'PP Neue Montreal Book';
		font-size: 13px;
		font-weight: 500;
		color: #ffffff;
		text-transform: uppercase;
		flex: 1;
		text-align: left;
	}

	.ffs-mobile-accordion-count {
		font-family: 'PP Neue Montreal Book';
		font-size: 12px;
		font-weight: 400;
		color: #ffffff;
		margin-right: 8px;
	}

	.ffs-mobile-accordion-count:empty {
		display: none;
	}

	.ffs-mobile-accordion-arrow {
		color: rgba(17, 15, 15, 0.34);
		font-size: 10px;
		transition: transform 0.3s ease;
	}

	.ffs-mobile-accordion-section.is-expanded .ffs-mobile-accordion-arrow {
		transform: rotate(180deg);
	}

	/* Contenu de section */
	.ffs-mobile-accordion-content {
		max-height: 0;
		overflow: hidden;
		background: #ffffff;
		transition: max-height 0.3s ease, padding 0.3s ease;
		padding: 0 20px;
	}

	.ffs-mobile-accordion-section.is-expanded .ffs-mobile-accordion-content {
		max-height: 400px;
		overflow-y: auto;
		padding: 20px;
	}

	/* Pills dans l'accordéon mobile */
	.ffs-mobile-accordion-content .ffs-filter-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		max-height: none;
		padding-bottom: 0;
	}

	/* Section toggle */
	.ffs-mobile-toggle-section {
		background: #ffffff;
		padding: 16px 20px;
		border-bottom: 1px solid #e0e0e0;
	}

	/* Boutons d'action */
	.ffs-mobile-filter-actions {
		display: flex;
		gap: 12px;
		padding: 16px 20px;
		background: #ffffff;
		border-top: 1px solid #e0e0e0;
		flex-shrink: 0;
	}

	.ffs-mobile-btn-reset {
		flex: 0 0 auto;
		background: transparent;
		border: 1px solid #D9AA4A;
		color: #D9AA4A;
		padding: 12px 16px;
		border-radius: 25px;
		font-family: 'PP Neue Montreal Book';
		font-size: 13px;
		font-weight: 500;
		cursor: pointer;
		display: flex;
		align-items: center;
		gap: 8px;
		transition: all 0.2s ease;
	}

	.ffs-mobile-btn-reset:active {
		background: #f5f5f5;
	}

	.ffs-mobile-btn-reset svg {
		width: 16px;
		height: 16px;
	}

	.ffs-mobile-btn-show-map {
		flex: 1;
		background: #D9AA4A;
		border: 1px solid #D9AA4A;
		color: #ffffff;
		padding: 12px 24px;
		border-radius: 25px;
		font-family: 'PP Neue Montreal Book';
		font-size: 13px;
		font-weight: 500;
		text-transform: uppercase;
		cursor: pointer;
		transition: all 0.2s ease;
	}

	.ffs-mobile-btn-show-map:active {
		background: #c99a3a;
		border-color: #c99a3a;
	}

	.ffs-sidebar-site-name {
		font-size: 20px;
		line-height: 25px;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.ffs-taxonomy-card-image-spiritueux {
		background-size: 120px 120px;
	}
	.ffs-sidebar {
		max-width: 650px !important;
		height:1150px!important;
	}
	.ffs-sidebar:not(.is-open) {
		left:-660px;
	}

	.ffs-map-header {
		overflow: visible;
		z-index:9999
	}

}

@media (min-width: 768px) and (max-width: 1180px) {
	.ffs-sidebar {
		height:850px!important;
	}
}