/**
 * Carte et liste des cavistes.
 *
 * Palette reprise du site : #ffac27 (orange Salon du Rhum), #0e1317 (texte).
 * Les cartouches de région utilisent une crème tirée de cet orange plutôt
 * qu'un gris neutre, pour rester dans la charte sans concurrencer les liens.
 */

.bpc-carte-enveloppe {
	margin: 0 0 2.5rem;
}

.bpc-carte {
	width: 100%;
	min-height: 280px;
	border-radius: 10px;
	border: 1px solid #e7e7e8;
	box-shadow: 0 0 10px rgba( 0, 0, 0, 0.04 );
	z-index: 0; /* sans quoi la carte passe au-dessus du menu collant d'Elementor */
}

/* ---- Pin de la carte -----------------------------------------------------
   L'icône du panier est en grande partie sombre et transparente : posée
   directement sur les zones foncées d'OpenStreetMap (forêts, eau, bâti), elle
   devenait illisible. Le disque blanc la détache du fond quel que soit le
   terrain, et permet de réduire la taille sans perdre en lisibilité.

   L'image est inscrite à 68 % du diamètre : au-delà, les coins du carré
   ressortent du cercle et le disque paraît rogné. */
.bpc-pin {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #0e1317;
	border-radius: 50%;
	box-sizing: border-box;
	/* Liseré clair plutôt qu'une ombre portée : sur un disque sombre l'ombre ne
	   se voit pas, alors que le liseré détache la pin des zones foncées de la
	   carte (forêts, plans d'eau, bâti dense). */
	box-shadow: 0 0 0 1px rgba( 255, 255, 255, 0.85 ), 0 1px 4px rgba( 0, 0, 0, 0.4 );
}

.bpc-pin img {
	display: block;
	width: 68%;
	height: 68%;
}

/* Le thème souligne tous les liens : les commandes de zoom de Leaflet en
   héritaient. On les remet à plat, en restant cantonné à la carte. */
.bpc-carte .leaflet-control a,
.bpc-carte .leaflet-control a:hover,
.bpc-carte .leaflet-control a:focus {
	text-decoration: none;
	box-shadow: none;
	border-bottom: 0;
}

.bpc-popup .leaflet-popup-content {
	margin: 12px 16px;
}

.bpc-popup-nom {
	display: block;
	font-size: 1.05rem;
	line-height: 1.3;
	color: #0e1317;
}

.bpc-popup-region {
	display: block;
	margin-top: 2px;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #7a7f83;
}

.bpc-popup-adresse {
	display: block;
	margin-top: 6px;
	color: #40474d;
}

.bpc-popup-lien,
.bpc-popup-itineraire {
	display: inline-block;
	margin-top: 8px;
	font-weight: 700;
	color: #ffac27;
	text-decoration: none;
}

.bpc-popup-lien + .bpc-popup-itineraire {
	margin-left: 14px;
}

.bpc-popup-lien:hover,
.bpc-popup-lien:focus,
.bpc-popup-itineraire:hover,
.bpc-popup-itineraire:focus {
	text-decoration: underline;
}

/* ---- Liste en colonnes ---------------------------------------------------
   grid plutôt que columns : le multi-colonnes CSS coupe un cartouche en deux
   quand il tombe en fin de colonne, ce qui est inacceptable pour un encadré. */
.bpc-liste {
	display: grid;
	grid-template-columns: repeat( var( --bpc-colonnes, 2 ), minmax( 0, 1fr ) );
	gap: 1.5rem;
	align-items: start;
}

/* --bpc-titre : couleur du titre de région. La bordure du cartouche en est
   dérivée à 15 % d'opacité, donc les deux restent liées si la couleur change. */
.bpc-groupe {
	--bpc-titre: 14, 19, 23;
	margin: 0;
	padding: 1.25rem 1.4rem 1.1rem;
	background: #fbf8f5;
	border: 1px solid rgba( var( --bpc-titre ), 0.15 );
	border-radius: 12px;
}

.bpc-region {
	margin: 0 0 0.75rem;
	padding-bottom: 0.55rem;
	border-bottom: 1px solid #ffac27;
	color: rgb( var( --bpc-titre ) );
}

.bpc-cavistes {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bpc-caviste {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.3rem 0;
	margin: 0;
}

/* Séparateur interne plus discret que celui du titre : même teinte que la
   bordure du cartouche, moitié moins marquée, pour ne pas rivaliser avec le
   filet orange du titre. */
.bpc-caviste + .bpc-caviste {
	border-top: 1px solid rgba( var( --bpc-titre ), 0.08 );
}

/* Le nom : un lien, rien de plus. Au survol on souligne et on ne touche à rien
   d'autre — surtout pas au fond, qui est justement ce que le thème voulait
   noircir quand c'était un <button>. Les états sont écrits explicitement pour
   qu'aucune règle de thème ne vienne les repeindre. */
.bpc-liste .bpc-nom,
.bpc-liste .bpc-nom:link,
.bpc-liste .bpc-nom:visited,
.bpc-liste .bpc-nom:hover,
.bpc-liste .bpc-nom:focus,
.bpc-liste .bpc-nom:active {
	flex: 1 1 auto;
	min-width: 0;
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0;
	margin: 0;
	font: inherit;
	font-weight: 700;
	text-align: left;
	color: #ffac27;
	text-decoration: none;
}

.bpc-liste .bpc-nom:hover,
.bpc-liste .bpc-nom:focus-visible {
	text-decoration: underline;
}

.bpc-liste .bpc-nom-inerte {
	color: #0e1317;
	cursor: default;
}

.bpc-actions {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.bpc-liste .bpc-ico,
.bpc-liste .bpc-ico:link,
.bpc-liste .bpc-ico:visited,
.bpc-liste .bpc-ico:hover,
.bpc-liste .bpc-ico:focus,
.bpc-liste .bpc-ico:active {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 50%;
	background: none;
	box-shadow: none;
	color: #ffac27;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.bpc-liste .bpc-ico:hover,
.bpc-liste .bpc-ico:focus-visible {
	background: #fff;
	border-color: rgba( var( --bpc-titre ), 0.15 );
}

.bpc-ico svg {
	display: block;
}

/* Cible tactile : 30 px suffisent à la souris, pas au doigt. On élargit la
   zone cliquable sans changer l'apparence. */
@media ( hover: none ) {
	.bpc-ico {
		width: 40px;
		height: 40px;
	}
}

/* Le point visé par un clic depuis la liste : un halo bref, pour que l'œil
   retrouve la pin sur une carte qui en porte treize. */
.bpc-pin-actif {
	animation: bpc-halo 1.1s ease-out 2;
}

@keyframes bpc-halo {
	0%   { filter: drop-shadow( 0 0 0 rgba( 255, 172, 39, 0.9 ) ); }
	60%  { filter: drop-shadow( 0 0 12px rgba( 255, 172, 39, 0.95 ) ); }
	100% { filter: drop-shadow( 0 0 0 rgba( 255, 172, 39, 0 ) ); }
}

@media ( max-width: 900px ) {
	.bpc-liste {
		grid-template-columns: 1fr;
	}
}

@media ( max-width: 600px ) {
	.bpc-carte {
		height: 340px !important;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.bpc-pin-actif {
		animation: none;
	}
}