/* Carte Sport-Santé Vallespir — couleurs surchargeables depuis le thème via les variables --vss-*. */
.vss-carte {
	--vss-vert: #5a9e32;
	--vss-vert-fonce: #2f6b2a;
	--vss-orange: #ef8a22;
	--vss-bleu: #1c78b8;
	--vss-texte: #1f2a22;
	--vss-texte-doux: #5d6b62;
	--vss-fond: #ffffff;
	--vss-fond-doux: #f3f8ef;
	--vss-bord: #d8e3d3;
	--vss-vallespir: #dde9f2;
	--vss-haut-vallespir: #e2eedb;
	--vss-rayon: 12px;

	color: var(--vss-texte);
	margin: 0 0 2em;
}

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

.vss-carte__titre {
	margin: 0 0 .75em;
}

/* Filtres ---------------------------------------------------------------- */
.vss-filtres {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px 20px;
	padding: 16px;
	margin: 0 0 16px;
	background: var(--vss-fond-doux);
	border: 1px solid var(--vss-bord);
	border-radius: var(--vss-rayon);
}

.vss-filtres__champ {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1 1 220px;
}

.vss-filtres__champ label {
	font-size: .85em;
	font-weight: 600;
}

.vss-filtres input[type="search"],
.vss-filtres select {
	width: 100%;
	min-height: 42px;
	padding: 8px 12px;
	font: inherit;
	color: inherit;
	background: #fff;
	border: 1px solid var(--vss-bord);
	border-radius: 8px;
}

.vss-filtres__cases {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	flex: 1 1 260px;
	padding-bottom: 10px;
}

.vss-filtres__cases label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}

.vss-filtres__cases input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--vss-vert);
}

.vss-filtres__resultat {
	flex-basis: 100%;
	margin: 0;
	font-size: .9em;
	color: var(--vss-texte-doux);
}

/* Carte ------------------------------------------------------------------ */
.vss-carte__map {
	position: relative;
	padding: 8px;
	background: var(--vss-fond);
	border: 1px solid var(--vss-bord);
	border-radius: var(--vss-rayon);
}

.vss-carte__map svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.vss-commune {
	stroke: #fff;
	stroke-width: 1.5;
	stroke-linejoin: round;
	transition: fill .15s ease;
}

.vss-commune--vallespir { fill: var(--vss-vallespir); }
.vss-commune--haut-vallespir { fill: var(--vss-haut-vallespir); }

.vss-commune.is-active {
	fill: var(--vss-vert);
	cursor: pointer;
}

.vss-commune.is-active:hover,
.vss-commune.is-active:focus {
	fill: var(--vss-orange);
	outline: none;
}

.vss-commune.is-active:focus-visible {
	stroke: var(--vss-texte);
	stroke-width: 3;
}

.vss-epci path {
	fill: none;
	stroke: var(--vss-vert-fonce);
	stroke-width: 2.2;
	stroke-linejoin: round;
	opacity: .55;
	pointer-events: none;
}

.vss-labels {
	pointer-events: none;
}

.vss-label text {
	text-anchor: middle;
	font-family: inherit;
	paint-order: stroke;
	stroke-linejoin: round;
}

.vss-label__nom {
	font-size: 11px;
	fill: var(--vss-texte-doux);
	stroke: rgba(255, 255, 255, .8);
	stroke-width: 3px;
}

.vss-label__badge {
	display: none;
}

.vss-label.is-active .vss-label__nom {
	font-size: 15px;
	font-weight: 700;
	fill: #fff;
	stroke: var(--vss-vert-fonce);
	stroke-width: 3.5px;
}

.vss-label.is-active .vss-label__badge {
	display: inline;
}

.vss-label__badge circle {
	fill: #fff;
	stroke: var(--vss-vert-fonce);
	stroke-width: 2;
}

.vss-label__count {
	font-size: 13px;
	font-weight: 700;
	fill: var(--vss-vert-fonce);
}

.vss-legende {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 8px 4px 2px;
	padding: 0;
	list-style: none;
	font-size: .85em;
	color: var(--vss-texte-doux);
}

.vss-legende li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
}

.vss-legende__puce {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 4px;
	border: 1px solid rgba(0, 0, 0, .12);
}

.vss-legende__puce--active { background: var(--vss-vert); }
.vss-legende__puce--vallespir { background: var(--vss-vallespir); }
.vss-legende__puce--haut-vallespir { background: var(--vss-haut-vallespir); }

/* Liste des communes (alternative clavier / mobile) ------------------------ */
.vss-communes-liste {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.vss-communes-liste li {
	margin: 0;
}

.vss-communes-liste button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 6px 8px 6px 14px;
	font: inherit;
	font-size: .95em;
	color: var(--vss-vert-fonce);
	background: var(--vss-fond-doux);
	border: 1px solid var(--vss-bord);
	border-radius: 999px;
	cursor: pointer;
}

.vss-communes-liste button:hover,
.vss-communes-liste button:focus-visible {
	color: #fff;
	background: var(--vss-orange);
	border-color: var(--vss-orange);
}

.vss-communes-liste__count {
	min-width: 26px;
	padding: 2px 7px;
	font-size: .85em;
	font-weight: 700;
	text-align: center;
	color: #fff;
	background: var(--vss-vert);
	border-radius: 999px;
}

/* Pop-up ----------------------------------------------------------------- */
html.vss-modal-open {
	overflow: hidden;
}

.vss-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.vss-modal[hidden] {
	display: none;
}

.vss-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(20, 35, 25, .55);
}

.vss-modal__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 1000px;
	max-height: 100%;
	color: var(--vss-texte);
	background: var(--vss-fond);
	border-radius: var(--vss-rayon);
	box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
	animation: vss-pop .18s ease-out;
}

.vss-modal__dialog:focus {
	outline: none;
}

@keyframes vss-pop {
	from { opacity: 0; transform: translateY(12px) scale(.98); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.vss-modal__dialog { animation: none; }
}

.vss-modal__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 20px 14px;
	border-bottom: 4px solid var(--vss-vert);
}

.vss-modal__titre {
	margin: 0;
	font-size: 1.5em;
	line-height: 1.2;
	color: var(--vss-vert-fonce);
}

.vss-modal__sous-titre {
	margin: 4px 0 0;
	font-size: .9em;
	color: var(--vss-texte-doux);
}

.vss-modal__close {
	flex: none;
	width: 40px;
	height: 40px;
	padding: 0;
	font-size: 28px;
	line-height: 1;
	color: var(--vss-texte);
	background: var(--vss-fond-doux);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.vss-modal__close:hover,
.vss-modal__close:focus-visible {
	color: #fff;
	background: var(--vss-orange);
}

.vss-modal__body {
	overflow-y: auto;
	padding: 20px;
	background: var(--vss-fond-doux);
	border-radius: 0 0 var(--vss-rayon) var(--vss-rayon);
}

.vss-vide {
	margin: 0;
	text-align: center;
	color: var(--vss-texte-doux);
}

.vss-fiches {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 16px;
}

/* Fiche ------------------------------------------------------------------ */
.vss-fiche {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	background: #fff;
	border: 1px solid var(--vss-bord);
	border-top: 4px solid var(--vss-bleu);
	border-radius: 10px;
	font-size: .95em;
	line-height: 1.45;
}

.vss-fiche p,
.vss-fiche ul {
	margin: 0;
}

.vss-fiche__head {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.vss-fiche__logo {
	flex: none;
	width: 52px;
	height: 52px;
	object-fit: contain;
	border-radius: 8px;
}

.vss-fiche__discipline {
	font-size: .8em;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--vss-orange);
}

.vss-fiche__nom {
	margin: 2px 0 0;
	font-size: 1.15em;
	line-height: 1.25;
	color: var(--vss-texte);
}

.vss-fiche__criteres {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0;
	list-style: none;
}

.vss-fiche__criteres li {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 3px 10px 3px 6px;
	font-size: .82em;
	font-weight: 600;
	color: var(--vss-vert-fonce);
	background: #e4f2dc;
	border-radius: 999px;
}

.vss-fiche__presentation {
	color: var(--vss-texte-doux);
}

.vss-fiche__contact {
	display: grid;
	gap: 6px;
	padding: 0;
	list-style: none;
}

.vss-fiche__contact li {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin: 0;
	overflow-wrap: anywhere;
}

.vss-fiche__contact a {
	color: var(--vss-bleu);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.vss-icon {
	display: inline-flex;
	flex: none;
	margin-top: 2px;
	color: var(--vss-vert);
}

.vss-fiche__criteres .vss-icon {
	margin-top: 0;
}

.vss-fiche__publics {
	margin-top: auto;
	padding-top: 10px;
	border-top: 1px dashed var(--vss-bord);
}

.vss-fiche__publics-titre {
	margin-bottom: 6px !important;
	font-size: .8em;
	font-weight: 700;
	color: var(--vss-texte-doux);
}

.vss-fiche__publics ul {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	padding: 0;
	list-style: none;
}

.vss-fiche__publics li {
	margin: 0;
	padding: 2px 8px;
	font-size: .8em;
	background: var(--vss-fond-doux);
	border: 1px solid var(--vss-bord);
	border-radius: 6px;
}

@media (max-width: 640px) {
	/* Sur mobile : pastilles agrandies seules, les noms sont dans la liste sous la carte. */
	.vss-label__nom,
	.vss-label.is-active .vss-label__nom { display: none; }
	.vss-label__badge { transform: translate(0, 4px) scale(1.6); }
	.vss-modal { padding: 0; }
	.vss-modal__dialog { height: 100%; max-height: none; border-radius: 0; }
	.vss-modal__body { border-radius: 0; padding: 12px; }
	.vss-fiches { grid-template-columns: 1fr; }
}