/* Carte illustrée de Madagascar (surcharge les styles .destination-card-label de style.css) */
.madagascar-map-wrap { display: block; --pin: 46px; }
.map-hint { text-align: center; font-size: 13px; font-weight: 700; color: var(--red); margin: 0 0 8px; }

.madagascar-map {
	position: relative; width: 100%; max-width: 380px; margin: 0 auto;
	aspect-ratio: 424 / 806;
	background: radial-gradient(circle at 50% 40%, #e8f4fb, #cfe6f4);
	border: 0; border-radius: 0;
}
.madagascar-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mg-base { pointer-events: none; }
.mg-dot { fill: var(--red); stroke: #fff; stroke-width: 2; }
.mg-link { stroke: var(--red); stroke-width: 1.5; stroke-linecap: round; opacity: .6; }

/* Pin = label cliquable posé à son emplacement */
.madagascar-map .map-pin {
	position: absolute; transform: translate(-50%, -50%);
	width: var(--pin); height: var(--pin);
	border: 0; background: none; overflow: visible; box-shadow: none; z-index: 1;
}
.madagascar-map .map-pin input {
	position: absolute; inset: 0; width: 100%; height: 100%; top: 0; left: 0;
	margin: 0; opacity: 0; cursor: pointer; z-index: 3;
}
.map-pin-img {
	display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
	border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4);
	background: var(--gray-lt); transition: transform .15s, border-color .15s;
}
.map-pin-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.map-pin-name {
	position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 3px;
	white-space: nowrap; font-size: 11px; font-weight: 900; line-height: 1.3;
	background: rgba(255,255,255,.95); padding: 0 6px; border-radius: 10px;
	box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.madagascar-map .map-pin:hover { z-index: 5; }
.madagascar-map .map-pin:hover .map-pin-img { transform: scale(1.12); }

/* Sélectionné */
.madagascar-map .map-pin:has(input:checked) { border: 0; z-index: 6; }
.madagascar-map .map-pin:has(input:checked) .map-pin-img { border-color: var(--red); transform: scale(1.18); }
.madagascar-map .map-pin:has(input:checked) .map-pin-name { background: var(--yellow); color: #222; }
.madagascar-map .map-pin:has(input:checked)::after {
	content: '✓'; position: absolute; top: -6px; right: -6px; z-index: 4;
	width: 20px; height: 20px; border-radius: 50%; background: var(--red); color: #fff;
	font-size: 13px; font-weight: 900; display: grid; place-items: center; border: 2px solid #fff;
}
/* Résultat de la recherche (main.js ajoute .is-match) */
.madagascar-map .map-pin.is-match { box-shadow: none; }
.madagascar-map .map-pin.is-match .map-pin-img { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(247,147,30,.55); }

.map-selected { text-align: center; font-size: 13px; margin: 10px 0 0; color: #444; }
.map-selected b { color: var(--red); }

/* Sites sans position */
.map-extra { margin-top: 12px; padding: 10px; background: var(--cream); border: 1px solid var(--line); }
.map-extra-title { font-size: 12px; font-weight: 700; margin: 0 0 6px; color: var(--gray); }
.map-chip { display: inline-flex; align-items: center; gap: 6px; margin: 0 6px 6px 0; padding: 4px 10px; background: #fff; border: 2px solid var(--line); border-radius: 20px; font-size: 13px; font-weight: 700; cursor: pointer; }
.map-chip:has(input:checked) { border-color: var(--red); background: var(--yellow); }
.map-chip input { accent-color: var(--red); }

@media (max-width: 560px) {
	.madagascar-map-wrap { --pin: 38px; }
	.map-pin-name { font-size: 10px; padding: 0 4px; }
}