/*
 * Carte des listes en MapLibre seul.
 *
 * CUSTOM: conteneur interne créé par carte/liste.js dans #map. MapLibre pose
 * position:relative sur le conteneur qu'on lui donne ; en le gardant à
 * l'intérieur de #map, le sticky (bureau) et le fixed (overlay mobile) de
 * .content-map, définis dans custom/custom.css, restent intacts. #map étant
 * en flex colonne et borné à 100vh, flex:1 lui donne toute la hauteur.
 */
.rrma-carte-liste {
	flex: 1 1 auto;
	width: 100%;
	min-height: 0;
}

/*
 * CUSTOM: les bulles reprennent les cartes .card-infowindow générées par
 * lld-rrma. La croix de fermeture de MapLibre, en haut à droite du contenu,
 * est dimensionnée ici (28 px, au lieu de la taille de police héritée).
 */
.rrma-carte-liste .maplibregl-popup-content {
	padding: 12px;
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.15 );
}

/*
 * CUSTOM: la croix touchait l'étiquette « ADHÉRENT » posée en haut à droite
 * de l'image. carte/liste.js pose la classe rrma-bulle-bande sur les seules
 * bulles qui portent cette étiquette : leur contenu descend de 30 px et la
 * croix tient dans cette bande, au-dessus de l'image.
 */
.rrma-carte-liste .rrma-bulle-bande .maplibregl-popup-content {
	padding-top: 30px;
}

.rrma-carte-liste .maplibregl-popup-close-button {
	width: 28px;
	height: 28px;
	padding: 0;
	font-size: 1.25rem;
	line-height: 28px;
	border-radius: 0 6px 0 0;
}

/*
 * CUSTOM: message affiché à la place de la carte sans WebGL (carte/liste.js,
 * afficherIndisponible()). #map est en flex colonne : les marges automatiques
 * le centrent dans les deux sens.
 */
.rrma-carte-indisponible {
	margin: auto;
	padding: 1rem;
	max-width: 22rem;
	text-align: center;
	color: #1c1917;
	font-size: 0.95rem;
}

/* CUSTOM: une bulle ouverte près du haut de la carte passe au-dessus du bouton « Rechercher dans cette zone » (z-index 3). */
.rrma-carte-liste .maplibregl-popup {
	z-index: 4;
}

/*
 * CUSTOM: bouton « Rechercher dans cette zone », pastille blanche en haut au
 * centre de la carte, inversée au survol et au focus (repris de Vignerons Bio).
 * Masqué par l'attribut hidden, que le reboot de Bootstrap traduit en
 * display:none !important.
 */
.rrma-carte-zone {
	position: absolute;
	top: 12px;
	left: 50%;
	transform: translateX( -50% );
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.95rem;
	border: 0;
	border-radius: 999px;
	background: #fff;
	color: #1c1917;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.2 );
	cursor: pointer;
}

.rrma-carte-zone:hover,
.rrma-carte-zone:focus-visible {
	background: #1c1917;
	color: #fff;
	outline: 2px solid #fff;
	outline-offset: -4px;
}

/*
 * CUSTOM: overlay plein écran sous 992 px (classe map-mobile-open posée par
 * custom/custom.js). Le bouton fixe « Voir la liste » (#btn-openliste, bas
 * centre de l'écran, custom/custom.css) recouvrait les dernières lignes de la
 * légende ouverte (coin inférieur gauche) et aurait recouvert l'attribution
 * dépliée (coin inférieur droit, elle s'étend vers la gauche jusque sous le
 * bouton). Les deux coins remontent au-dessus du bouton : décalage bas 1rem,
 * hauteur d'un .btn Bootstrap 2,25rem (ligne 1,5rem + marges internes
 * 0,75rem) plus 2px de bordure, plus 8px d'air, soit 3,25rem + 10px (55,5 px
 * avec la racine à 14 px sous 992 px). La seconde déclaration ajoute l'écart
 * entre 100vh et 100dvh : sur mobile, la carte fait 100vh (barres du
 * navigateur comprises) alors que le bouton suit le bas visible ; un
 * navigateur sans dvh l'ignore et garde la première.
 */
@media ( max-width: 991.98px ) {
	html.map-mobile-open .rrma-carte-liste .maplibregl-ctrl-bottom-left,
	html.map-mobile-open .rrma-carte-liste .maplibregl-ctrl-bottom-right {
		margin-bottom: calc( 3.25rem + 10px );
		margin-bottom: calc( 3.25rem + 10px + 100vh - 100dvh );
	}
}