/* Carte maison de l'annuaire des domaines, MapLibre seul.
 *
 * Cette feuille ne sert que le chemin du moteur maison. Celle de l'ancien
 * chemin, css/archive-domaines-carte.css, reste chargée dans les deux cas : elle
 * porte la bascule liste et carte sous 1120px, qui est la même de part et
 * d'autre. Ses règles d'habillage de bulle Leaflet, elles, ne servent plus rien
 * ici et partiront avec Leaflet.
 *
 * CUSTOM : tout ce fichier. Il habille des éléments que MapLibre fabrique
 * lui-même, bulle et conteneur, sur lesquels aucune classe utilitaire ne peut
 * être posée depuis un gabarit.
 */

/* Le conteneur remplit #container-map, qui porte déjà la hauteur, la position
   collante au-dessus de 1120px et l'escamotage en dessous. */
#vb-carte {
	width: 100%;
	height: 100%;
}

/* Bulle d'information au clic sur un point.
 *
 * Les mesures sont reprises de l'habillage Leaflet d'aujourd'hui, pour que la
 * bulle ne change pas d'apparence : seule sa livraison change. Le balisage est
 * le même, vb_afficher_bulle_domaine() servant les deux chemins. */
.maplibregl-popup-content {
	width: 300px;
	/* MapLibre pose 10px 10px 15px de marge intérieure sur le contenu. Le
	   balisage de la bulle porte déjà la sienne, en p-3 sur son bloc de texte et
	   en pleine largeur sur l'image d'en-tête : la marge de MapLibre lui
	   ajouterait un liseré blanc autour de la photo. */
	padding: 0;
	overflow: hidden;
	border-radius: 6px;
}

.maplibregl-popup-content p {
	margin: 0;
}

.maplibregl-popup-content .vb-bulle-titre {
	font-size: 18px;
}

.maplibregl-popup-content a {
	color: var(--color-primary);
}

/* Ligne de région : même gris que sur les cards, et picto d'un cran plus petit
   que les 24px du helper partagé, la bulle étant plus étroite qu'une card. Le
   picto tient sa taille d'attributs width et height posés par le helper : seule
   une règle de feuille peut la reprendre. */
.maplibregl-popup-content .vb-map-marker-region a {
	color: var(--color-muted);
}

.maplibregl-popup-content .vb-map-marker-region .picto-taxonomie-small {
	width: 18px;
	height: 18px;
}

/* Image d'en-tête de la bulle. */
.maplibregl-popup-content .vb-bulle-image > a > div {
	height: 150px;
	background-size: cover;
	background-position: center;
}

/* La croix de fermeture flotte au-dessus de la photo, qui monte jusqu'au bord :
   sans fond ni ombre elle disparaîtrait sur les clichés clairs.

   Elle est DÉCOLLÉE du bord de huit pixels, et pas seulement pour l'allure :
   collée à l'angle, sa zone de clic mordait sur le rayon de la bulle, donc une
   partie du disque blanc débordait sur un coin arrondi et le geste ratait par
   le haut. */
.maplibregl-popup-close-button {
	position: absolute;
	top: 8px;
	right: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.9 );
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.18 );
	color: #1c1917;
	font-size: 18px;
	line-height: 1;
}

.maplibregl-popup-close-button:hover {
	background: #ffffff;
}

/* Repli, quand le contenu n'a pas pu être chargé du tout. */
.vb-bulle-repli {
	padding: 0.75rem;
	font-size: 13px;
	color: var(--color-muted);
}

/* CUSTOM: squelette d'attente de la bulle.
 *
 * Le contenu d'une bulle demande environ 1,8 seconde au serveur, non pas à
 * cause de ce qu'il contient mais parce que chaque appel paie un démarrage
 * complet de WordPress qu'aucun cache ne sert. Un simple « Chargement… »
 * laissait la bulle figée tout ce temps, et une interface figée se lit comme
 * une panne plutôt que comme une attente.
 *
 * LE SQUELETTE REPREND LA FORME EXACTE DE LA BULLE : bande d'image de 150px,
 * puis titre, ligne de région et trois lignes de description, aux mêmes
 * hauteurs et aux mêmes écarts. La bulle ne change donc pas de taille quand le
 * contenu arrive, et le remplacement ne fait pas sauter la carte sous le
 * curseur. C'est la raison d'être d'un squelette plutôt que d'un rond qui
 * tourne : il annonce la forme de ce qui vient.
 *
 * Règle de feuille et non utilitaires Tailwind : un balayage demande des
 * keyframes et un dégradé qu'on déplace, ce qu'aucune classe utilitaire ne
 * pose. Il passe par background-position, la seule propriété d'arrière-plan
 * que le compositeur sait animer sans repeindre à chaque image.
 */
.vb-bulle-attente__image,
.vb-bulle-attente__ligne {
	background-color: #ece8e1;
	background-image: linear-gradient(
		90deg,
		rgba( 255, 255, 255, 0 ),
		rgba( 255, 255, 255, 0.7 ),
		rgba( 255, 255, 255, 0 )
	);
	background-repeat: no-repeat;
	background-size: 45% 100%;
	background-position: -70% 0;
	animation: vb-bulle-balayage 1.4s ease-in-out infinite;
}

@keyframes vb-bulle-balayage {
	to { background-position: 170% 0; }
}

.vb-bulle-attente__image { height: 150px; }

.vb-bulle-attente__texte {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px;
}

.vb-bulle-attente__ligne {
	height: 10px;
	border-radius: 3px;
}

/* Les deux premières barres ne sont pas des lignes de texte mais le titre et la
   région, qui n'ont ni la même hauteur ni la même longueur. Les trois suivantes
   figurent la description, dont la dernière est écourtée : une dernière ligne
   pleine largeur se lit comme un paragraphe coupé au milieu. */
.vb-bulle-attente__titre  { height: 18px; width: 72%; }
.vb-bulle-attente__region { height: 11px; width: 46%; margin-top: 2px; }
.vb-bulle-attente__fin    { width: 58%; }

/* Le texte que seuls les lecteurs d'écran reçoivent : pour eux, un squelette
   n'est rien du tout. */
.vb-bulle-attente__annonce {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

@media ( prefers-reduced-motion: reduce ) {
	.vb-bulle-attente__image,
	.vb-bulle-attente__ligne {
		background-image: none;
		animation: none;
	}
}

/* Bouton « Rechercher dans cette zone ».
 *
 * Il remplace la case « rechercher en déplaçant la carte » de WP Grid Builder,
 * cochée d'office au-dessus de 1120px : la carte s'explore désormais sans rien
 * perdre, et le filtrage devient une action délibérée. Le bouton n'apparaît
 * qu'après un mouvement réel et s'efface dès que la carte revient à la zone déjà
 * cherchée, ce qui est piloté par js/vb-carte.js.
 *
 * Posé en haut et centré : la commande de zoom occupe le coin haut gauche, et le
 * bas de l'écran appartient au bouton de bascule liste et carte sous 1120px.
 * Le z-index passe au-dessus des commandes de MapLibre, qui sont à 2.
 *
 * Blanc plutôt qu'en couleur de charte : il flotte sur une carte dont les
 * couleurs changent d'un endroit à l'autre, et c'est le fond neutre qui reste
 * lisible partout. */
.vb-carte-zone {
	position: absolute;
	top: 12px;
	left: 50%;
	transform: translateX( -50% );
	z-index: 3;
	padding: 0.55rem 1.1rem;
	border: 1px solid rgba( 0, 0, 0, 0.12 );
	border-radius: 999px;
	background: #ffffff;
	color: #1c1917;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.18 );
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.vb-carte-zone:hover,
.vb-carte-zone:focus-visible {
	background: #1c1917;
	color: #ffffff;
}