/*
 * Carte interactive du lac Malawi : feuille de style du plugin carte-malawi.php
 *
 * À placer dans le même dossier que carte-malawi.php (wp-content/mu-plugins/).
 * Elle est chargée après le CSS de Leaflet, uniquement sur les pages qui utilisent
 * [carte_malawi] ou [carte_malawi_liste]. Les hauteurs de carte restent définies
 * par les shortcodes (attribut hauteur), pas par ce fichier.
 */


/* ==========================================================================
   1. Carte (toutes les cartes)
   ========================================================================== */

.malaw-loc-map {
	position: relative;
	z-index: 0;
	width: 100%;
	border-radius: var(--aqua-arrondi, 4px);
}

/* Évite que le thème (img { max-width: 100% }) ne déforme les tuiles de la carte. */
.malaw-loc-map img,
.malaw-loc-map .leaflet-tile {
	max-width: none !important;
}

.malaw-loc-map .leaflet-popup-content {
	margin: 12px 14px;
	line-height: 1.4;
}


/* ==========================================================================
   2. Marqueurs et noms affichés sur la carte
   La couleur et le diamètre des points sont fixés par le plugin (attribut taille, 12px par défaut).
   ========================================================================== */

.malaw-loc-pin span {
	display: block;
	border-radius: 50%;
	border: 1.5px solid #fff;
	box-sizing: border-box;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

/* Localités voisines (attribut voisins) : plus pâles. */
.malaw-loc-pin-sm span {
	border-width: 1px;
	opacity: .8;
}

/* Marqueur de survol ou d'épinglage dans la liste (article « liste + carte »). */
.malaw-loc-pin-lg span {
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .55), 0 1px 5px rgba(0, 0, 0, .6);
}

/* Nom affiché à côté du point : texte sans cadre, avec un liseré clair pour rester lisible sur la carte. */
.leaflet-tooltip.malaw-loc-label {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0 2px;
	margin-left: 0;
	font-size: 11px;
	line-height: 1.2;
	color: #1f2937;
	opacity: 1;
	white-space: nowrap;
	text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 3px #fff;
}

.leaflet-tooltip-right.malaw-loc-label::before {
	display: none;
}

/* Carte centrée sur des localités précises (attribut localites) : noms un peu plus grands. */
.leaflet-tooltip.malaw-loc-label.malaw-loc-label-lg {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.25;
}

/* Étiquette masquée parce qu'elle en recouvre une autre : elle réapparaît au survol du point. */
.leaflet-tooltip.malaw-loc-label.malaw-loc-hide:not(.malaw-loc-peek) {
	opacity: 0 !important;
}

.leaflet-tooltip.malaw-loc-label.malaw-loc-peek {
	opacity: 1;
	z-index: 1000;
}

/* Infobulle au survol d'un point sans nom permanent : le nom seulement. */
.leaflet-tooltip.malaw-loc-tip {
	font-size: 12px;
	padding: 2px 6px;
}


/* ==========================================================================
   3. Vue d'ensemble (panneau à droite des vues forcées)
   ========================================================================== */

.malaw-loc-ovwrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 190px;
	gap: 12px;
	align-items: start;
}

.malaw-loc-ov {
	min-width: 0;
}

.malaw-loc-ovmap {
	position: relative;
	z-index: 0;
	width: 100%;
	border-radius: var(--aqua-arrondi, 4px);
	border: 1px solid rgba(127, 127, 127, .4);
	box-sizing: border-box;
}

.malaw-loc-ovmap,
.malaw-loc-ovmap.leaflet-container {
	cursor: pointer;
}

/* Vue d'ensemble de l'article « liste + carte » : non cliquable, elle montre seulement la zone affichée. */
.malaw-loc-ovmap-static,
.malaw-loc-ovmap-static.leaflet-container {
	cursor: default;
}

.malaw-loc-ovmap img,
.malaw-loc-ovmap .leaflet-tile {
	max-width: none !important;
}

.malaw-loc-ovcap {
	font-size: .8em;
	opacity: .7;
	text-align: center;
	margin-top: 4px;
}


/* ==========================================================================
   4. Modification depuis l'article (administrateur, carte complète)
   ========================================================================== */

/* Curseur en croix pendant « Ajouter un point ». */
.malaw-loc-map.malaw-loc-adding,
.malaw-loc-map.malaw-loc-adding .leaflet-grab,
.malaw-loc-map.malaw-loc-adding .leaflet-interactive {
	cursor: crosshair !important;
}

/* Carte verrouillée : les outils de modification sont masqués. */
.malaw-loc-map:not(.malaw-loc-editing) .malaw-loc-editonly,
.malaw-loc-map:not(.malaw-loc-editing) .malaw-loc-addlink {
	display: none !important;
}

.malaw-loc-addbar a {
	width: auto !important;
	padding: 0 12px;
	font-weight: 600;
	line-height: 30px;
	white-space: nowrap;
}

.malaw-loc-form .malaw-loc-f {
	display: block;
	margin: 0 0 8px;
}

.malaw-loc-form .malaw-loc-f span {
	display: block;
	font-size: 12px;
	margin-bottom: 2px;
}

.malaw-loc-form input,
.malaw-loc-form textarea {
	width: 100%;
	box-sizing: border-box;
}

.malaw-loc-coords {
	font-size: 12px;
	opacity: .75;
	margin: 4px 0;
}

.malaw-loc-msg {
	font-size: 12px;
	color: var(--aqua-alerte, #b32d2e);
	min-height: 1em;
}

.malaw-loc-row {
	margin-top: 8px;
}

.malaw-loc-row button {
	margin-right: 6px;
	cursor: pointer;
}


/* ==========================================================================
   5. Article « liste + carte » : [carte_malawi_liste]
   La variable --malaw-loc-h (hauteur de la carte) est définie par le shortcode.
   ========================================================================== */

.malaw-loc-split {
	display: grid;
	grid-template-columns: minmax(220px, 300px) 1fr;
	gap: 16px;
	align-items: start;
}

.malaw-loc-split .malaw-loc-mapwrap {
	min-width: 0;
}

/* Extrait de carte avec vue d'ensemble : la vue d'ensemble se place à droite de la carte. */
.malaw-loc-split .malaw-loc-mapwrap.malaw-loc-has-ov {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 190px;
	gap: 12px;
	align-items: start;
}

/* Barre au-dessus de la liste et de la carte : liste déroulante et recherche à gauche, légende des couleurs à droite. */
.malaw-loc-splitwrap .malaw-loc-topbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin: 0 0 10px;
}

.malaw-loc-splitwrap .malaw-loc-tools {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	flex: 0 1 auto;
}

.malaw-loc-splitwrap .malaw-loc-filter {
	width: auto;
	max-width: 100%;
	margin: 0;
}

.malaw-loc-splitwrap .malaw-loc-searchwrap {
	position: relative;
	display: block;
	width: 220px;
	max-width: 100%;
	margin: 0;
}

.malaw-loc-splitwrap .malaw-loc-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	list-style: none;
	margin: 0 0 0 auto;
	padding: 0;
	font-size: .9em;
}

.malaw-loc-splitwrap .malaw-loc-legend li {
	margin: 0;
	padding: 0;
	white-space: nowrap;
}

.malaw-loc-splitwrap .malaw-loc-legend .malaw-loc-dot,
.malaw-loc-split .malaw-loc-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 6px;
	border-radius: 50%;
	vertical-align: baseline;
	box-shadow: 0 0 0 1px rgba(127, 127, 127, .5);
}

.malaw-loc-split .malaw-loc-side {
	min-width: 0;
}

/* Sur ordinateur, la liste a la hauteur de la carte et défile seule. */
@media (min-width: 721px) {
	.malaw-loc-split .malaw-loc-side .malaw-loc-items {
		height: var(--malaw-loc-h, 700px);
		max-height: none;
	}
}

/* Liste déroulante de filtrage (zones, types). */
.malaw-loc-splitwrap .malaw-loc-filter {
	box-sizing: border-box;
}

/* Champ de recherche entre la liste déroulante et la liste, avec une croix pour l'effacer. */
.malaw-loc-splitwrap .malaw-loc-search {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding-right: 30px;
}

.malaw-loc-splitwrap .malaw-loc-search::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.malaw-loc-splitwrap .malaw-loc-clear {
	position: absolute;
	top: 50%;
	right: 4px;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font-size: 20px;
	line-height: 24px;
	text-align: center;
	cursor: pointer;
	opacity: .6;
}

.malaw-loc-splitwrap .malaw-loc-clear:hover,
.malaw-loc-splitwrap .malaw-loc-clear:focus {
	opacity: 1;
	background: rgba(127, 127, 127, .2);
	outline: none;
}

.malaw-loc-splitwrap .malaw-loc-clear[hidden] {
	display: none;
}

.malaw-loc-split .malaw-loc-empty {
	margin: 6px 10px;
	font-style: italic;
	opacity: .7;
}

/* Zone défilante de la liste : sa hauteur maximale suit celle de la carte. */
.malaw-loc-split .malaw-loc-items {
	max-height: var(--malaw-loc-h, 700px);
	overflow: auto;
	padding-right: 4px;
}

.malaw-loc-split .malaw-loc-side ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Une localité de la liste : espace haut et bas à 0 (le premier chiffre du padding) ; l'augmenter pour aérer la liste. */
.malaw-loc-split .malaw-loc-side li {
	padding: 0 10px;
	border-radius: var(--aqua-arrondi, 4px);
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
	margin: 0;
	line-height: 1.5;
}

.malaw-loc-split .malaw-loc-side li:hover,
.malaw-loc-split .malaw-loc-side li:focus,
.malaw-loc-split .malaw-loc-side li.is-active {
	background: rgba(127, 127, 127, .2);
	outline: none;
}

/* Pastille de la couleur du type, avant le nom de la localité. */
.malaw-loc-split .malaw-loc-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 8px;
	border-radius: 50%;
	vertical-align: baseline;
	box-shadow: 0 0 0 1px rgba(127, 127, 127, .5);
}

.malaw-loc-split .malaw-loc-r {
	display: inline-flex;
	gap: 8px;
	align-items: baseline;
	white-space: nowrap;
}

.malaw-loc-split .malaw-loc-d {
	font-size: .8em;
	opacity: .7;
}

.malaw-loc-split .malaw-loc-go {
	font-size: .8em;
	white-space: nowrap;
}

/* Note de diagnostic visible des administrateurs seulement (points écartés par le filtre type). */
.malaw-loc-split .malaw-loc-note {
	font-size: .8em;
	opacity: .8;
	margin: 12px 4px 0;
}


/* ==========================================================================
   6. Petits écrans
   ========================================================================== */

@media (max-width: 720px) {
	.malaw-loc-splitwrap .malaw-loc-tools {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.malaw-loc-splitwrap .malaw-loc-tools .malaw-loc-filter,
	.malaw-loc-splitwrap .malaw-loc-tools .malaw-loc-searchwrap {
		width: 100%;
	}

	.malaw-loc-splitwrap .malaw-loc-legend {
		margin-left: 0;
	}

	/* Vue d'ensemble : panneau plus étroit. */
	.malaw-loc-ovwrap {
		grid-template-columns: minmax(0, 1fr) 110px;
		gap: 8px;
	}

	/* Liste + carte : la carte passe au-dessus et reste visible pendant le défilement de la liste. */
	.malaw-loc-split {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.malaw-loc-split .malaw-loc-mapwrap {
		order: -1;
		position: sticky;
		top: 0;
		z-index: 5;
	}

	.malaw-loc-split .malaw-loc-map,
	.malaw-loc-split .malaw-loc-ovmap {
		height: 50vh !important;
	}

	.malaw-loc-split .malaw-loc-mapwrap.malaw-loc-has-ov {
		grid-template-columns: minmax(0, 1fr) 110px;
		gap: 8px;
	}

	.malaw-loc-split .malaw-loc-items,
	.malaw-loc-split .malaw-loc-side .malaw-loc-items {
		height: auto;
		max-height: none;
		overflow: visible;
	}
}


/* ==========================================================================
   7. Espace au-dessus et au-dessous des cartes
   ========================================================================== */

/* !important : certains thèmes imposent leurs propres marges aux blocs de l'article. */
.malaw-loc-block,
.malaw-loc-splitwrap {
	margin-top: var(--aqua-marge-bloc, 30px) !important;
	margin-bottom: var(--aqua-marge-bloc, 30px) !important;
}