/*
 * PBC Vitrine — Styles publics (foires & tarifs)
 * Variables de couleur propres à ce plugin : il doit pouvoir tourner
 * seul, sans dépendre des variables CSS du plugin de catalogue
 * (woo-cat-grid).
 *
 * Palette construite autour du bleu de la pépinière (#1d8aeb) : le bleu
 * sert d'accent (puces, survol, prix, mise en avant), un bleu marine plus
 * soutenu prend le rôle "texte fort" (titres, emphase) — même logique à
 * deux teintes que la version originale (vert/orange), juste recalée sur
 * cette couleur.
 */

:root {
	--pbcv-blue: #1d8aeb;
	--pbcv-navy: #163b57;
	--pbcv-cream: #eef5fb;
	--pbcv-text: #263544;
	--pbcv-border: #d7e3ee;
}

/* ---------- Liste des foires (shortcode [pbc_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.
 */

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

.pbcv-events__item {
	position: relative;
	padding: 7px 0 7px 20px;
	border-bottom: 1px solid var(--pbcv-border);
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--pbcv-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.
 */
.pbcv-events__item[data-event-id] {
	cursor: pointer;
	border-radius: 6px;
}

.pbcv-events__item[data-event-id]:hover {
	background-color: rgba(29, 138, 235, 0.07);
}

.pbcv-events__item.is-clicked {
	background-color: rgba(29, 138, 235, 0.14);
}

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

.pbcv-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.
 */
.pbcv-events__item.is-past {
	opacity: 0.5;
}

.pbcv-events__item.is-past::before {
	background: #9aa3ab;
}

/*
 * 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).
 */
.pbcv-events__item.is-next {
	background: rgba(29, 138, 235, 0.08);
	border-radius: 8px;
	border-bottom-color: transparent;
	padding-left: 24px;
}

.pbcv-events__item.is-next::before {
	width: 8px;
	height: 8px;
	top: 14px;
	left: 4px;
	box-shadow: 0 0 0 4px rgba(29, 138, 235, 0.18);
}

.pbcv-events__title {
	font-weight: 700;
	color: var(--pbcv-navy);
}

.pbcv-events__location {
	color: var(--pbcv-navy);
}

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

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

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

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

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

.pbcv-events__desc {
	margin: 2px 0 0;
	font-size: 12px;
	color: #67727c;
}

/*
 * ---------- Encart Tarifs (shortcode [pbc_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) : ç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.
 */

.pbcv-pricing {
	background: #fff;
	border: 1px solid var(--pbcv-border);
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(22, 59, 87, 0.08);
	padding: 20px 26px;
	box-sizing: border-box;
	text-align: center;

	/*
	 * Largeur forcée en !important : le thème/l'éditeur de page impose
	 * souvent une largeur 100% à ce bloc avec une spécificité CSS qu'on
	 * ne maîtrise pas depuis le plugin. max-width seul ne suffit
	 * généralement 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;
}

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

.pbcv-pricing__header svg {
	flex: none;
	color: var(--pbcv-blue);
}

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

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

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

.pbcv-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(--pbcv-border);
}

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

.pbcv-pricing__label {
	font-size: 12px;
	color: #7c8790;
}

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

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

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

.pbcv-map-wrapper {
	border: 1px solid var(--pbcv-border);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(22, 59, 87, 0.1);
	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 [pbc_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 [pbc_evenements_carte] (mise en page
 * combinée), où c'est la colonne flex qui fixe déjà la largeur.
 */
.pbcv-map-standalone {
	margin: 24px auto;
}

@media (min-width: 783px) {

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

}

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

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

.pbcv-map-empty {
	color: #7c8790;
	font-style: italic;
}

/*
 * Réchauffe/ajuste la teinte par défaut d'OpenStreetMap vers la palette
 * bleue 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. Ici on va vers un rendu
 * légèrement plus froid/bleuté plutôt que la version sépia d'origine,
 * pour rester cohérent avec l'accent bleu.
 */
.pbcv-map .leaflet-tile-pane {
	filter: saturate(90%) hue-rotate(2deg) brightness(1.02);
}

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

.pbcv-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) */
.pbcv-map-marker {
	filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.25));
}

/* Infobulle */
.pbcv-map-popup .leaflet-popup-content-wrapper {
	border-radius: 10px;
	box-shadow: 0 6px 20px rgba(22, 59, 87, 0.2);
}

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

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

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

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

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

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

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

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

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

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

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

@media (min-width: 783px) {

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

	.pbcv-combo__list,
	.pbcv-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.
	 */
	.pbcv-combo__list {
		max-height: 430px;
		overflow-y: auto;
		padding-right: 16px;
	}

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

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

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

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

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

}