/*
 * 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)
   ========================================================================== */

.cml-map {
	position: relative;
	z-index: 0;
	width: 100%;
	border-radius: 4px;
}

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

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


/* ==========================================================================
   2. Marqueurs (la couleur est fixée par le plugin, selon le type de point)
   ========================================================================== */

.cml-pin span {
	display: block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid #fff;
	box-sizing: border-box;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}

/* Localités voisines (attribut voisins) : plus petites et plus pâles. */
.cml-pin-sm span {
	width: 12px;
	height: 12px;
	border-width: 1.5px;
	opacity: .75;
}

/* Marqueur de survol dans la liste (article « liste + carte »). */
.cml-pin-lg span {
	width: 24px;
	height: 24px;
	box-shadow: 0 0 0 4px rgba(255, 255, 255, .55), 0 1px 6px rgba(0, 0, 0, .6);
}


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

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

.cml-ov {
	min-width: 0;
}

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

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

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

.cml-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 ». */
.cml-map.cml-adding,
.cml-map.cml-adding .leaflet-grab,
.cml-map.cml-adding .leaflet-interactive {
	cursor: crosshair !important;
}

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

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

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

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

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

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

.cml-msg {
	font-size: 12px;
	color: #b32d2e;
	min-height: 1em;
}

.cml-row {
	margin-top: 8px;
}

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


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

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

.cml-split .cml-mapwrap {
	min-width: 0;
}

/* Liste déroulante de filtrage par type (affichée s'il y a au moins deux types). */
.cml-split .cml-filter {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 8px;
}

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

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

/* Une localité de la liste : pour réduire l'espacement, diminuer le premier chiffre du padding. */
.cml-split .cml-side li {
	padding: 7px 10px;
	border-radius: 4px;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
	margin: 0;
}

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

/* Pastille de la couleur du type, avant le nom de la localité. */
.cml-split .cml-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);
}

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

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

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

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


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

@media (max-width: 720px) {
	/* Vue d'ensemble : panneau plus étroit. */
	.cml-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. */
	.cml-split {
		grid-template-columns: 1fr;
		gap: 8px;
	}

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

	.cml-split .cml-map {
		height: 50vh !important;
	}

	.cml-split .cml-items {
		max-height: none;
		overflow: visible;
	}
}