/*
 * LFDS Vitrine — Styles publics (foires & tarifs)
 * Variables de couleur propres à ce plugin : il doit pouvoir tourner
 * seul, sans dépendre des variables CSS du plugin LFDS Agrumes.
 * Les teintes reprennent volontairement la même identité (vert forêt /
 * orange) pour rester cohérent visuellement si les deux plugins sont
 * utilisés ensemble sur le même site.
 */

:root {
	--lfdsv-green: #1f3d2b;
	--lfdsv-orange: #e07a3f;
	--lfdsv-cream: #f4f1ea;
	--lfdsv-text: #2b2b25;
	--lfdsv-border: #ddd6c7;
}

/* ---------- Liste des foires (shortcode [lfds_evenements]) ---------- */

/*
 * Liste resserrée : padding et taille de texte réduits par rapport à la
 * première version, qui prenait trop de place à l'écran pour une simple
 * liste de dates.
 */

.lfdsv-events {
	list-style: none;
	margin: 20px 0;
	padding: 0;
	max-width: 720px;
}

.lfdsv-events__item {
	position: relative;
	padding: 7px 0 7px 20px;
	border-bottom: 1px solid var(--lfdsv-border);
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--lfdsv-text);
	transition: opacity 0.15s ease, background-color 0.2s ease;
}

/*
 * Seuls les événements géolocalisés (voir events.php : data-event-id
 * n'est ajouté que si latitude/longitude existent) sont rendus
 * visuellement cliquables — inutile de suggérer une interaction qui
 * n'ouvrirait rien faute de marqueur sur la carte.
 */
.lfdsv-events__item[data-event-id] {
	cursor: pointer;
	border-radius: 6px;
}

.lfdsv-events__item[data-event-id]:hover {
	background-color: rgba(224, 122, 63, 0.06);
}

.lfdsv-events__item.is-clicked {
	background-color: rgba(224, 122, 63, 0.12);
}

.lfdsv-events__item::before {
	content: "";
	position: absolute;
	left: 3px;
	top: 15px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--lfdsv-orange);
}

.lfdsv-events__item:last-child {
	border-bottom: none;
}

/*
 * Événements passés : légèrement estompés plutôt que masqués, pour que
 * les visiteurs puissent se faire une idée du rythme des foires sur
 * l'année entière.
 */
.lfdsv-events__item.is-past {
	opacity: 0.5;
}

.lfdsv-events__item.is-past::before {
	background: #9b9686;
}

/*
 * Le tout prochain événement à venir se détache du reste de la liste :
 * fond teinté, pastille plus grosse, coins arrondis. Il n'y en a
 * toujours qu'un seul (le premier non-passé dans l'ordre chronologique).
 */
.lfdsv-events__item.is-next {
	background: rgba(224, 122, 63, 0.07);
	border-radius: 8px;
	border-bottom-color: transparent;
	padding-left: 24px;
}

.lfdsv-events__item.is-next::before {
	width: 8px;
	height: 8px;
	top: 14px;
	left: 4px;
	box-shadow: 0 0 0 4px rgba(224, 122, 63, 0.15);
}

.lfdsv-events__title {
	font-weight: 700;
	color: var(--lfdsv-green);
}

.lfdsv-events__location {
	color: var(--lfdsv-green);
}

a.lfdsv-events__location {
	text-decoration: none;
	border-bottom: 1px dotted var(--lfdsv-green);
}

a.lfdsv-events__location:hover {
	border-bottom-style: solid;
}

.lfdsv-events__date {
	font-weight: 600;
}

.lfdsv-events__past-tag {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 7px;
	border-radius: 10px;
	background: #e5e0d3;
	color: #6b6b5f;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.lfdsv-events__next-tag {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 7px;
	border-radius: 10px;
	background: var(--lfdsv-orange);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.lfdsv-events__desc {
	margin: 2px 0 0;
	font-size: 12px;
	color: #6b6b5f;
}

/*
 * ---------- Encart Tarifs (shortcode [lfds_tarifs]) ----------
 * Carte blanche avec bordure + ombre légère. Les tarifs sont affichés en
 * rangée horizontale (plutôt qu'en liste verticale façon ticket de
 * caisse) : avec seulement 3 formats, ça se lit d'un coup d'œil et ça
 * s'harmonise mieux avec le reste de la page, construite sur un
 * vocabulaire de cartes/badges plutôt que de listes.
 */

.lfdsv-pricing {
	background: #fff;
	border: 1px solid var(--lfdsv-border);
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(31, 61, 43, 0.06);
	padding: 20px 26px;
	box-sizing: border-box;
	text-align: center;

	/*
	 * Largeur forcée en !important : le thème/l'éditeur de page impose
	 * visiblement une largeur 100% à ce bloc avec une spécificité CSS
	 * qu'on ne maîtrise pas depuis le plugin. max-width seul ne
	 * suffisait pas à empêcher l'étirement, donc on fixe une largeur
	 * explicite tout en gardant max-width:100% pour ne pas déborder sur
	 * un écran plus étroit.
	 */
	width: 380px !important;
	max-width: 100% !important;
	margin: 20px auto !important;
}

.lfdsv-pricing__header {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 700;
	color: var(--lfdsv-green);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.lfdsv-pricing__header svg {
	flex: none;
	color: var(--lfdsv-orange);
}

.lfdsv-pricing__header--divider {
	display: flex;
	justify-content: center;
	padding-bottom: 12px;
	margin-bottom: 12px;
	border-bottom: 1px solid var(--lfdsv-border);
}

.lfdsv-pricing__intro {
	margin: 0 0 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--lfdsv-border);
	font-size: 12px;
	color: #8a8577;
}

.lfdsv-pricing__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.lfdsv-pricing__list li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	flex: 1 1 0;
	min-width: 90px;
	padding: 0 14px;
	border-right: 1px solid var(--lfdsv-border);
}

.lfdsv-pricing__list li:last-child {
	border-right: none;
}

.lfdsv-pricing__label {
	font-size: 12px;
	color: #8a8577;
}

.lfdsv-pricing__price {
	font-size: 16px;
	font-weight: 700;
	color: var(--lfdsv-orange);
	white-space: nowrap;
}

.lfdsv-pricing__note {
	margin: 14px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--lfdsv-border);
	font-size: 12px;
	font-style: italic;
	color: #8a8577;
}

/* ---------- Carte des événements (shortcode [lfds_carte]) ---------- */

.lfdsv-map-wrapper {
	border: 1px solid var(--lfdsv-border);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(31, 61, 43, 0.08);
	width: 100%;

	/*
	 * Fondu à l'apparition au scroll : masquée + légèrement décalée par
	 * défaut, révélée en douceur dès qu'elle entre dans le viewport (la
	 * classe .is-visible est ajoutée par map.js via IntersectionObserver).
	 * On anime la carte elle-même en CSS plutôt que d'attendre que
	 * Leaflet soit chargé, pour que l'effet démarre immédiatement même si
	 * la bibliothèque met un instant à s'initialiser.
	 */
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

/*
 * Habillage "carte seule" (shortcode [lfds_carte] utilisé isolément) :
 * limitée à la moitié de la largeur de page sur ordinateur, centrée.
 * Sur un conteneur pleine page, la carte montrait beaucoup de zone hors
 * Bretagne qui n'intéresse personne (l'algorithme d'ajustement de zoom
 * de Leaflet cale sa hauteur ET sa largeur sur le point le plus
 * excentré, donc plus le conteneur est large, plus il "gaspille" de
 * largeur pour un gain de zoom nul). Ce conteneur n'intervient PAS
 * quand la carte est utilisée via [lfds_evenements_carte] (mise en page
 * combinée), où c'est la colonne flex qui fixe déjà la largeur.
 */
.lfdsv-map-standalone {
	margin: 24px auto;
}

@media (min-width: 783px) {

	.lfdsv-map-standalone {
		width: 50%;
	}

}

.lfdsv-map-wrapper.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.lfdsv-map {
	width: 100%;
	height: 430px;
	background: var(--lfdsv-cream);
}

.lfdsv-map-empty {
	color: #8a8577;
	font-style: italic;
}

/*
 * Réchauffe la teinte par défaut d'OpenStreetMap (bleus/verts assez
 * froids) vers la palette crème/vert du site, sans dépendre d'un style
 * de carte payant (Mapbox Studio ou équivalent). Un simple filtre CSS
 * appliqué au conteneur des tuiles suffit à changer l'ambiance générale.
 */
.lfdsv-map .leaflet-tile-pane {
	filter: sepia(25%) saturate(85%) hue-rotate(-6deg) brightness(1.02);
}

/* Contrôles de zoom redessinés pour rester cohérents avec le reste du site */
.lfdsv-map .leaflet-control-zoom a {
	color: var(--lfdsv-green) !important;
	border-color: var(--lfdsv-border) !important;
}

.lfdsv-map .leaflet-control-attribution {
	font-size: 10px;
	background: rgba(255, 255, 255, 0.75) !important;
}

/* Marqueurs : pastille en forme de goutte, dessinée en SVG inline (voir map.js) */
.lfdsv-map-marker {
	filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.25));
}

/* Infobulle */
.lfdsv-map-popup .leaflet-popup-content-wrapper {
	border-radius: 10px;
	box-shadow: 0 6px 20px rgba(31, 61, 43, 0.18);
}

.lfdsv-map-popup .leaflet-popup-tip {
	background: #fff;
}

.lfdsv-map-popup__content {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 13px;
	min-width: 170px;
}

.lfdsv-map-popup__content strong {
	color: var(--lfdsv-green);
	font-size: 14px;
	margin-bottom: 2px;
}

.lfdsv-map-popup__location {
	color: var(--lfdsv-text);
}

.lfdsv-map-popup__date {
	font-weight: 600;
	color: var(--lfdsv-orange);
	margin-bottom: 2px;
}

.lfdsv-map-popup__tag {
	display: inline-block;
	align-self: flex-start;
	margin-bottom: 4px;
	padding: 1px 7px;
	border-radius: 8px;
	background: #e5e0d3;
	color: #6b6b5f;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.lfdsv-map-popup__tag--next {
	background: var(--lfdsv-orange);
	color: #fff;
	font-weight: 700;
}

.lfdsv-map-popup__tag--nursery {
	background: var(--lfdsv-green);
	color: #fff;
	font-weight: 700;
}

.lfdsv-map-popup__link {
	margin-top: 4px;
	font-size: 12px;
	color: var(--lfdsv-green);
	text-decoration: none;
	border-bottom: 1px dotted var(--lfdsv-green);
	align-self: flex-start;
}

/* ---------- Mise en page combinée (shortcode [lfds_evenements_carte]) ---------- */

.lfdsv-combo {
	display: flex;
	flex-direction: column;
	gap: 28px;
	margin: 24px 0;
}

@media (min-width: 783px) {

	.lfdsv-combo {
		flex-direction: row;
		align-items: stretch;
	}

	.lfdsv-combo__list,
	.lfdsv-combo__map {
		flex: 1 1 50%;
		min-width: 0; /* évite qu'un long titre d'événement ne force la colonne à s'élargir */
	}

	/*
	 * La liste défile à l'intérieur de son propre cadre à hauteur fixe
	 * (alignée sur celle de la carte) plutôt que de s'étirer indéfiniment
	 * en dessous : ça garde les deux colonnes visuellement équilibrées
	 * même quand il y a beaucoup plus d'événements que ce qui tient dans
	 * la hauteur de la carte.
	 */
	.lfdsv-combo__list {
		max-height: 430px;
		overflow-y: auto;
		padding-right: 16px;
	}

	.lfdsv-combo__list .lfdsv-events {
		max-width: none;
		margin: 0;
	}

	/* Petite barre de défilement discrète, cohérente avec la palette du site */
	.lfdsv-combo__list::-webkit-scrollbar {
		width: 6px;
	}

	.lfdsv-combo__list::-webkit-scrollbar-thumb {
		background: var(--lfdsv-border);
		border-radius: 3px;
	}

	.lfdsv-combo__list {
		scrollbar-width: thin;
		scrollbar-color: var(--lfdsv-border) transparent;
	}

	/* Dans ce contexte, le conteneur de carte remplit toute sa colonne */
	.lfdsv-combo__map .lfdsv-map-wrapper {
		margin: 0;
	}

}