/**
 * Map Interactive — styles front.
 *
 * PRINCIPE : on n'impose NI police NI couleur de texte.
 * Le titre (<h3>), le texte (<p>) et le bouton (<a>) de l'infobulle — ainsi
 * que la liste — utilisent des balises sémantiques SANS font-family ni color,
 * afin d'hériter intégralement de la typo et des couleurs du site
 * (CercleKit stylise h1…p / a / body, voir inject_fonts_css). On ne pose que
 * la mise en page, les surfaces neutres et l'accent (= couleur de marqueur
 * réglée dans l'admin, exposée en --mi-brand).
 * Mobile-first, responsive.
 */

.mi-wrap {
	--mi-brand: var(--mi-marker, #534ab7);
	--mi-radius: 14px;
	box-sizing: border-box;
	position: relative;   /* repère pour l'infobulle en mode Unique */
	/* --mi-font est posé par le shortcode si une police CercleKit est choisie ;
	   sinon « inherit » = on hérite de la police du site. */
	font-family: var(--mi-font, inherit);
}
/* Carte ouverte : le conteneur passe au-dessus des autres sections/calques
   pour que l'infobulle (qui déborde du cadre) ne soit jamais masquée. */
.mi-wrap.mi-tip-open { z-index: 9999; }
/* Renforce l'application de la police (au cas où un widget Elementor la
   surcharge sur un conteneur intermédiaire). */
.mi-wrap .mi-list-btn,
.mi-wrap .mi-list-name,
.mi-wrap .mi-tooltip { font-family: var(--mi-font, inherit); }
.mi-wrap *,
.mi-wrap *::before,
.mi-wrap *::after { box-sizing: border-box; }

/* --- Mise en page : empilé sur mobile, 2 colonnes au-delà --------------- */
.mi-wrap--global {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}
@media (min-width: 768px) {
	.mi-wrap--global {
		grid-template-columns: minmax(260px, 360px) 1fr;
		align-items: stretch;
	}
}

/* --- Colonne liste ------------------------------------------------------ */
.mi-col--list {
	display: flex;
	flex-direction: column;
	max-height: var(--mi-h, 560px);
	min-height: 0;
}
.mi-list-title { margin: 0 0 .75rem; }   /* hérite de h2 (police/couleur/taille du site) */
.mi-list {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	flex: 1 1 auto;
	-webkit-overflow-scrolling: touch;
}
.mi-list-item { margin: 0 0 8px; }
.mi-list-btn {
	display: block;
	width: 100%;
	text-align: left;
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease, color .18s ease;
	font: inherit;
	-webkit-appearance: none;
	appearance: none;
	/* Tout est pilotable depuis l'admin (Apparence des onglets). On force avec
	   !important pour battre le style « button » du thème/Elementor (qui sinon
	   écrase le fond/la bordure). Valeurs par défaut neutres si non réglées. */
	background: var(--mi-list-bg, rgba(0,0,0,.035)) !important;
	border: var(--mi-list-bw, 1px) solid var(--mi-list-border, transparent) !important;
	border-radius: var(--mi-list-radius, 14px) !important;
	padding: var(--mi-list-pad, 12px) calc(var(--mi-list-pad, 12px) + 2px) !important;
	color: var(--mi-list-text, inherit) !important;
	box-shadow: none !important;
}
.mi-list-btn:hover,
.mi-list-btn:focus-visible {
	background: var(--mi-list-bg-hover, rgba(0,0,0,.06)) !important;
	border-color: var(--mi-list-border-hover, currentColor) !important;
	color: var(--mi-list-text-hover, var(--mi-list-text, inherit)) !important;
	outline: none;
}
.mi-list-item.is-active .mi-list-btn {
	background: var(--mi-list-bg-active, rgba(0,0,0,.06)) !important;
	border-color: var(--mi-list-border-active, currentColor) !important;
	color: var(--mi-list-text-active, var(--mi-list-text, inherit)) !important;
}
.mi-list-name { display: block; font-weight: 600; line-height: 1.25; }
.mi-list-desc {
	display: block;
	margin-top: 4px;
	font-size: .9em;
	line-height: 1.4;
	opacity: .72;           /* hiérarchie via opacité, garde la teinte héritée */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.mi-loading,
.mi-empty { opacity: .7; font-size: .9em; padding: 8px 2px; }

/* --- Colonne carte ------------------------------------------------------ */
/* position:relative = repère pour l'infobulle (attachée ici, pas dans .mi-map
   qui clippe), afin qu'elle puisse déborder du cadre de la carte. */
.mi-col--map { min-width: 0; position: relative; }
.mi-map {
	position: relative;
	width: 100%;
	height: var(--mi-h-mobile, 380px);
	border-radius: var(--mi-radius);
	overflow: hidden;
	z-index: 0;
	background: #e9e7f2;
}
@media (min-width: 768px) {
	.mi-map { height: var(--mi-h, 560px); }
}
.mi-wrap--unique .mi-map { height: var(--mi-h, 380px); }

/* IMPORTANT : Leaflet impose sa propre police à .leaflet-container et à tous
   ses enfants (dont l'infobulle). On la neutralise pour hériter de la page
   (donc de CercleKit). Idem couleur. */
.mi-wrap .leaflet-container { font-family: inherit; color: inherit; }

/* Animation du fond (Ken Burns) : zoom lent sur la COUCHE DE TUILES seulement,
   donc marqueurs et clics intacts. Pause pendant la navigation. */
@keyframes mi-kenburns {
	from { transform: scale(1); }
	to   { transform: scale(var(--mi-kb-scale, 1.08)); }
}
.mi-wrap.mi-kenburns .leaflet-tile-pane {
	transform-origin: 50% 50%;
	animation: mi-kenburns var(--mi-kb-dur, 40s) ease-in-out infinite alternate;
	will-change: transform;
}
.mi-wrap.mi-kenburns.mi-kb-pause .leaflet-tile-pane { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
	.mi-wrap.mi-kenburns .leaflet-tile-pane { animation: none; }
}

/* Effet projecteur : overlay au-dessus de la carte. Le centre (au marqueur
   survolé) est lumineux/transparent → le point ressort ; le reste est
   assombri. pointer-events:none = la carte reste cliquable. */
.mi-map .mi-spotlight {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 500;            /* au-dessus des tuiles et marqueurs, sous l'infobulle (1000) */
	opacity: 0;
	transition: opacity .28s ease;
	background: radial-gradient(
		circle var(--mi-spot-r, 150px) at var(--mi-spot-x, 50%) var(--mi-spot-y, 50%),
		rgba(255,255,255,.18) 0%,
		rgba(0,0,0,0) 38%,
		rgba(0,0,0, var(--mi-spot-dim, .5)) 100%
	);
}
.mi-map .mi-spotlight.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.mi-map .mi-spotlight { transition: none; }
}

/* --- Marqueurs ----------------------------------------------------------
 * COMPORTEMENT : tous les marqueurs sont GRIS au repos. Ils reprennent leur
 * couleur d'origine au survol DU marqueur, au survol de l'onglet de la liste
 * (.is-hl posé par le JS), ou s'ils sont l'activité ciblée en mode Unique
 * (.mi-pin--active). Transition douce, pas d'animation gadget.
 * ---------------------------------------------------------------------- */
.mi-pin-wrap { background: none; border: none; }
/* Supprime le cadre bleu de focus du navigateur autour du marqueur. */
.mi-wrap .leaflet-marker-icon,
.mi-wrap .leaflet-marker-icon:focus,
.mi-wrap .leaflet-interactive:focus { outline: none; }
.mi-pin {
	display: block;
	width: var(--mi-marker-size, 40px);
	height: var(--mi-marker-size, 40px);
	line-height: 0;
	cursor: pointer;
	transform-origin: bottom center;
	transition: transform .18s ease, filter .25s ease;
}
.mi-pin svg { width: 100%; height: 100%; display: block; }

/* Léger agrandissement quand le marqueur est mis en avant. */
.mi-pin-wrap:hover .mi-pin,
.mi-pin-wrap.is-hl .mi-pin,
.mi-pin-wrap.is-sel .mi-pin { transform: scale(1.14); }

/* État « colorisé » = survol marqueur, survol onglet, ou actif (mode Unique). */

/* — Pin par défaut (sans SVG) — */
.mi-pin:not(.mi-pin--custom) {
	filter: drop-shadow(0 4px 6px rgba(0,0,0,.25));
}
.mi-pin:not(.mi-pin--custom) svg path:first-of-type,
.mi-pin:not(.mi-pin--custom) svg > path {
	fill: var(--mi-marker-inactive, #b8b5d6);   /* gris par défaut */
	transition: fill .25s ease;
}
.mi-pin-wrap:hover .mi-pin:not(.mi-pin--custom) svg path:first-of-type,
.mi-pin-wrap:hover .mi-pin:not(.mi-pin--custom) svg > path,
.mi-pin-wrap.is-hl .mi-pin:not(.mi-pin--custom) svg path:first-of-type,
.mi-pin-wrap.is-hl .mi-pin:not(.mi-pin--custom) svg > path,
.mi-pin-wrap.is-sel .mi-pin:not(.mi-pin--custom) svg path:first-of-type,
.mi-pin-wrap.is-sel .mi-pin:not(.mi-pin--custom) svg > path,
.mi-pin--active:not(.mi-pin--custom) svg path:first-of-type,
.mi-pin--active:not(.mi-pin--custom) svg > path {
	fill: var(--mi-marker, #534ab7);            /* couleur d'origine */
}

/* — SVG personnalisé : grisé par défaut, couleurs d'origine en avant — */
.mi-pin--custom {
	filter: grayscale(1) opacity(.6) drop-shadow(0 4px 6px rgba(0,0,0,.2));
}
.mi-pin-wrap:hover .mi-pin--custom,
.mi-pin-wrap.is-hl .mi-pin--custom,
.mi-pin-wrap.is-sel .mi-pin--custom,
.mi-pin--custom.mi-pin--active {
	filter: drop-shadow(0 4px 7px rgba(0,0,0,.3));   /* plus de grayscale = couleurs d'origine */
}

/* --- Infobulle CSS custom (pas de popup native) -------------------------
 * Hérite ENTIÈREMENT de la typo et des couleurs du site :
 * aucun font-family ni color n'est déclaré sur le titre/texte/lien.
 * On ne pose que la carte (surface + ombre + flèche) et le gabarit du bouton.
 * ---------------------------------------------------------------------- */
.mi-wrap .mi-tooltip {
	position: absolute;
	transform: translate(-50%, -100%);
	margin-top: -14px;
	width: 280px;
	max-width: min(82vw, 320px);
	/* Fond / texte / rayon pilotables depuis l'admin (Apparence de l'infobulle).
	   Texte = couleur LISIBLE par défaut (la carte est claire) ; n'hérite pas
	   de la couleur de la section (souvent blanche → illisible). */
	background: var(--mi-tip-bg, #fff);
	color: var(--mi-tip-text, #1f1e29);
	border-radius: var(--mi-tip-radius, 16px);
	box-shadow: 0 20px 55px -14px rgba(20,18,40,.45), 0 2px 8px -4px rgba(20,18,40,.2);
	padding: 18px 20px 20px;
	z-index: 9999;
	text-align: left;
	animation: mi-pop .18s ease;
	box-sizing: border-box;
}
@keyframes mi-pop {
	from { opacity: 0; transform: translate(-50%, calc(-100% + 8px)); }
	to   { opacity: 1; transform: translate(-50%, -100%); }
}
.mi-wrap .mi-tooltip-arrow {
	position: absolute;
	left: 50%;
	bottom: -7px;
	width: 16px;
	height: 16px;
	background: var(--mi-tip-bg, #fff);
	transform: translateX(-50%) rotate(45deg);
	border-radius: 0 0 4px 0;
	box-shadow: 5px 5px 10px -6px rgba(20,18,40,.35);
}
/* Titre : hérite police + couleur de h3. On ne cale que l'espacement
   (taille reprise du site ; line-clamp pour rester propre dans la carte). */
.mi-wrap .mi-tooltip .mi-tooltip-title {
	margin: 0 28px .45rem 0;
	padding: 0;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.25;
	color: inherit;            /* = couleur neutre lisible de la carte */
	overflow-wrap: anywhere;
}
/* Texte : hérite police + couleur de p. */
.mi-wrap .mi-tooltip .mi-tooltip-desc {
	margin: 0 0 1rem;
	padding: 0;
	font-size: .92em;
	line-height: 1.5;
	opacity: .85;
}
/* Bouton « En savoir plus » sans classe dédiée du site : pilule sobre qui
   reprend la couleur héritée du lien (currentColor) — n'impose aucune teinte.
   Si une classe de bouton CercleKit est fournie (réglage admin), ce style
   ne s'applique pas et le bouton du site prend le relais à 100 %. */
.mi-wrap .mi-tooltip a.mi-tooltip-btn,
.mi-wrap .mi-tooltip a.mi-tooltip-btn:link,
.mi-wrap .mi-tooltip a.mi-tooltip-btn:visited {
	display: inline-block;
	margin-top: 2px;
	padding: 9px 18px;
	border: 1.6px solid currentColor;
	border-radius: 999px;
	background: transparent;
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	color: inherit;          /* = couleur de lien du site */
	transition: background .15s ease, transform .15s ease;
}
.mi-wrap .mi-tooltip a.mi-tooltip-btn:hover,
.mi-wrap .mi-tooltip a.mi-tooltip-btn:focus-visible {
	background: color-mix(in srgb, currentColor 12%, transparent);
	transform: translateY(-1px);
	text-decoration: none;
	outline: none;
}
/* Bouton fermer : contrôle d'UI neutre. Reset total pour échapper aux
   styles « button » du thème (sinon il devient un gros bloc coloré). */
.mi-wrap .mi-tooltip .mi-tooltip-close {
	all: unset;
	position: absolute;
	top: 12px;
	right: 14px;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border-radius: 50%;
	font-size: 18px;
	line-height: 1;
	color: currentColor;
	opacity: .9;
	background: rgba(255,255,255,.9);
	color: #1c1b22;
	box-shadow: 0 1px 5px rgba(0,0,0,.25);   /* lisible aussi par-dessus une image */
	cursor: pointer;
	transition: opacity .15s ease, background .15s ease;
}
.mi-wrap .mi-tooltip .mi-tooltip-close:hover { opacity: 1; background: #fff; }

/* Image mise en avant en haut de l'infobulle. */
.mi-wrap .mi-tooltip .mi-tip-img {
	margin: -4px -6px 10px;
	border-radius: 10px;
	overflow: hidden;
	line-height: 0;
}
.mi-wrap .mi-tooltip .mi-tip-img img {
	width: 100%;
	height: 130px;
	object-fit: cover;
	display: block;
}

/* Statut d'ouverture (pastille) dans l'infobulle. */
.mi-wrap .mi-tooltip .mi-tip-status {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 .6rem;
	font-size: .85em;
	font-weight: 600;
}
.mi-wrap .mi-tooltip .mi-tip-status-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #9ca3af;
	flex: 0 0 auto;
}
.mi-wrap .mi-tooltip .mi-tip-status--open .mi-tip-status-dot { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.2); }
.mi-wrap .mi-tooltip .mi-tip-status--soon .mi-tip-status-dot { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.2); }
.mi-wrap .mi-tooltip .mi-tip-status--closed .mi-tip-status-dot { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.18); }

/* Champs supplémentaires (ACF/meta). */
.mi-wrap .mi-tooltip .mi-tip-fields {
	margin: 0 0 .9rem;
	padding: 0;
	display: grid;
	gap: 4px;
}
.mi-wrap .mi-tooltip .mi-tip-field {
	display: flex;
	gap: 6px;
	font-size: .85em;
	line-height: 1.35;
}
.mi-wrap .mi-tooltip .mi-tip-field dt { margin: 0; font-weight: 600; opacity: .7; }
.mi-wrap .mi-tooltip .mi-tip-field dd { margin: 0; }

/* --- Contrôles de zoom Leaflet (UI carte neutre) ------------------------ */
.mi-map .leaflet-control-zoom {
	border: none;
	box-shadow: 0 6px 18px -6px rgba(28,27,34,.4);
	border-radius: 12px;
	overflow: hidden;
}
.mi-map .leaflet-control-zoom a {
	width: 34px;
	height: 34px;
	line-height: 34px;
	font-size: 20px;
	color: #1c1b22;
	background: #fff;
	border: none;
}
.mi-map .leaflet-control-zoom a:hover { background: rgba(0,0,0,.08); color: #000; }
.mi-map .leaflet-bar a:first-child { border-bottom: 1px solid rgba(0,0,0,.08); }
.mi-map .leaflet-control-attribution { display: none; }

/* ========================================================================
 * Géolocalisation : bouton « Ma position » + point « vous êtes ici »
 * ===================================================================== */
.mi-map .mi-locate a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	color: #1c1b22;
	background: #fff;
}
.mi-map .mi-locate a:hover { background: rgba(0,0,0,.06); color: var(--mi-marker, #534ab7); }
.mi-map .mi-locate.is-loading a { opacity: .5; pointer-events: none; }

/* Bouton plein écran (même gabarit carré que les autres contrôles). */
.mi-map .mi-fs-ctrl a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	color: #1c1b22;
	background: #fff;
}
.mi-map .mi-fs-ctrl a:hover { background: rgba(0,0,0,.06); color: var(--mi-marker, #534ab7); }
.mi-fs-ctrl .mi-fs-close { display: none; }
.mi-wrap.mi-fs .mi-fs-ctrl .mi-fs-open { display: none; }
.mi-wrap.mi-fs .mi-fs-ctrl .mi-fs-close { display: block; }

/* Plein écran : le conteneur prend tout l'écran, la carte le remplit. */
body.mi-fs-lock { overflow: hidden; }
.mi-wrap.mi-fs {
	position: fixed;
	inset: 0;
	z-index: 99999;
	margin: 0;
	padding: 12px;
	background: var(--mi-tip-bg, #fff);
	display: block;
	overflow: hidden;
}
.mi-wrap.mi-fs .mi-col--list { display: none; }   /* en plein écran : la carte seule */
.mi-wrap.mi-fs .mi-col--map { height: 100%; }
.mi-wrap.mi-fs .mi-map {
	height: calc(100vh - 24px) !important;
	height: calc(100dvh - 24px) !important;
}
/* Croix de fermeture du plein écran (visible seulement en plein écran). */
.mi-fs-exit { display: none; }
.mi-wrap.mi-fs .mi-fs-exit {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 100000;
	width: 46px;
	height: 46px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #fff;
	color: #1c1b22;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 8px 22px -6px rgba(0,0,0,.45);
}
.mi-wrap.mi-fs .mi-fs-exit:hover { background: rgba(0,0,0,.07); }

/* Point bleu pulsé « vous êtes ici ». */
.mi-userdot {
	position: relative;
	display: block;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #1a73e8;
	border: 2px solid #fff;
	box-shadow: 0 0 0 2px rgba(26,115,232,.4);
}
.mi-userdot::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: rgba(26,115,232,.35);
	transform: translate(-50%, -50%);
	animation: mi-userpulse 2s ease-out infinite;
}
@keyframes mi-userpulse {
	0%   { transform: translate(-50%, -50%) scale(1); opacity: .6; }
	100% { transform: translate(-50%, -50%) scale(3.2); opacity: 0; }
}
.leaflet-interactive.mi-usercircle { fill: #1a73e8; fill-opacity: .12; }
@media (prefers-reduced-motion: reduce) { .mi-userdot::after { animation: none; } }

/* ========================================================================
 * MOBILE — carte seule (la liste est masquée par défaut)
 * ===================================================================== */
@media (max-width: 767px) {
	.mi-wrap--global { display: block; }
	.mi-wrap--global .mi-col--map { min-height: 0; }
	/* La hauteur mobile vient du réglage « Hauteur mobile (px) » (var --mi-h-mobile),
	   on ne la force plus. */
	/* Liste masquée sur mobile, sauf si l'option « afficher la liste » est cochée. */
	.mi-wrap--global.mi-mobile-maponly .mi-col--list { display: none; }
	/* Si la liste est affichée sur mobile, elle passe SOUS la carte, déroulée. */
	.mi-wrap--global:not(.mi-mobile-maponly) .mi-col--list { max-height: none; margin-top: 16px; }

	/* MOBILE (tactile, pas de survol) : marqueurs en COULEUR D'ORIGINE direct,
	   aucune animation, projecteur désactivé. */
	.mi-pin { transition: none !important; transform: none !important; }
	.mi-pin svg path { transition: none !important; }
	.mi-pin:not(.mi-pin--custom) svg path:first-of-type,
	.mi-pin:not(.mi-pin--custom) svg > path { fill: var(--mi-marker, #534ab7); }
	.mi-pin--custom { filter: drop-shadow(0 4px 7px rgba(0,0,0,.3)); }
	.mi-map .mi-spotlight { display: none !important; }
}

/* Réduction des animations pour les utilisateurs sensibles. */
@media (prefers-reduced-motion: reduce) {
	.mi-tooltip { animation: none; }
	.mi-pin, .mi-list-btn, .mi-tooltip-btn { transition: none; }
}