/* mod_francemap — Pomme Cannelle */

.mod-francemap {
	position: relative;
	margin-inline: auto;
}

.mfm-svg {
	display: block;
	width: 100%;
	height: auto;
}

.mfm-dept {
	stroke: var(--mfm-stroke, #9a9a9a);
	stroke-width: 0.7;
	stroke-linejoin: round;
	transition: filter 0.15s ease, stroke 0.15s ease, stroke-width 0.15s ease;
}

.mfm-dept.mfm-has-popup {
	cursor: pointer;
}

.mfm-dept:hover,
.mfm-dept:focus-visible,
.mfm-dept.mfm-active {
	stroke: var(--mfm-hover-stroke, #14663a);
	stroke-width: 1.6;
	filter: brightness(0.94);
	outline: none;
}

/* Popup */
.mfm-popup {
	position: absolute;
	z-index: 50;

	/* Largeur fixe : tous les popups ont la même taille, quel que soit le
	   contenu. box-sizing pour que le padding n'élargisse pas au-delà. */
	width: var(--mfm-pop-w, 280px);
	box-sizing: border-box;
	max-height: var(--mfm-pop-maxh, none);
	overflow-y: var(--mfm-pop-overflow, visible);
	padding: var(--mfm-pop-pad, 16px);
	background: var(--mfm-pop-bg, #fff);
	color: var(--mfm-pop-color, #212529);
	border: 1.5px solid var(--mfm-hover-stroke, #14663a);
	border-radius: var(--mfm-pop-radius, 10px);
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
	font-size: var(--mfm-pop-font, 0.9rem);
	line-height: 1.45;
	pointer-events: none;
}

/* Une hauteur maxi implique de pouvoir faire défiler : le popup capte
   alors la souris, contrairement au cas par défaut. */
.mod-francemap.is-scrollable .mfm-popup {
	pointer-events: auto;
}

.mfm-popup[hidden] {
	display: none;
}

.mfm-popup > :first-child {
	margin-top: 0;
}

.mfm-popup > :last-child {
	margin-bottom: 0;
}

/* Légende */
.mfm-legend {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	font-size: 0.9rem;
}

.mfm-legend li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.mfm-swatch {
	flex: 0 0 auto;
	width: 1.6em;
	height: 1.15em;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.mfm-dept {
		transition: none;
	}
}

/* Contenu du popup */
.mfm-popup img {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
	margin: 0.25em 0;
}

.mfm-popup p {
	margin: 0 0 0.5em;
}

/* Gabarit « titre » */
.mfm-popup .mfm-title {
	margin: 0 0 var(--mfm-tpl-gap, 14px);
	font-size: 1.15em;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--mfm-tpl-title, #1a1a18);
	line-height: 1.25;
}

/* Gabarit « bloc image + texte » */
.mfm-popup .mfm-row {
	display: flex;
	align-items: center;
	gap: calc(var(--mfm-tpl-gap, 14px) - 2px);
	margin-bottom: var(--mfm-tpl-gap, 14px);
}

.mfm-popup .mfm-row:last-child {
	margin-bottom: 0;
}

.mfm-popup .mfm-row > img {
	flex: 0 0 var(--mfm-tpl-img, 56px);
	width: var(--mfm-tpl-img, 56px);
	height: auto;
	margin: 0;
	object-fit: contain;
}

/* Tant que l'image charge, sa hauteur est inconnue et le popup se placerait
   mal. On réserve un carré, que object-fit corrigera au chargement. */
.mfm-popup .mfm-row > img:not([src=""]) {
	min-height: var(--mfm-tpl-img, 56px);
}

/* Une image absente ne doit pas laisser un cadre cassé */
.mfm-popup .mfm-row > img[src=""] {
	display: none;
}

.mfm-popup .mfm-row > div {
	min-width: 0;
}

.mfm-popup .mfm-row strong {
	display: block;
	margin-bottom: 0.25em;
	font-weight: 700;
	color: var(--mfm-tpl-title, #1a1a18);
}

.mfm-popup .mfm-row p {
	margin: 0 0 0.15em;
	font-weight: 700;
	color: var(--mfm-tpl-value, #0f6e56);
}

.mfm-popup .mfm-row p:last-child {
	margin-bottom: 0;
}