/*
 * Styles de la carte interactive Blogod'eau.
 *
 * Séparé en fichier CSS dédié (plutôt que des styles inline comme
 * jusqu'ici) car cette mise en page a besoin de media queries pour le
 * comportement mobile — chose impossible avec des styles inline.
 */

.bdo-carte-bloc {
	position: relative;
	height: 85vh;
	min-height: 480px;
	width: 100%;
	overflow: hidden;
	border-radius: 8px;
}

.bdo-carte-bloc .bdo-carte {
	position: absolute;
	inset: 0;
}

/* ==========================================================================
   Légende latérale
   ========================================================================== */

.bdo-carte-legende {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 300px;
	max-width: 80vw;
	background: var( --bdo-ecume, #FBF8F2 );
	overflow-y: auto;
	padding: 18px;
	z-index: 1001; /* au-dessus des contrôles Leaflet (zoom, attribution) */
	box-shadow: 2px 0 10px rgba( 0, 0, 0, 0.15 );
}

.bdo-icone-sur-carte {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 999; /* au-dessus des tuiles de la carte, sous les contrôles Leaflet (zoom) */
	display: inline-block;
	line-height: 0;
}

.bdo-icone-sur-carte img {
	height: 56px;
	width: auto;
	filter: drop-shadow( 0 2px 8px rgba( 0, 0, 0, 0.35 ) );
}

@media ( max-width: 640px ) {
	.bdo-icone-sur-carte {
		top: 10px;
		right: 10px;
	}

	.bdo-icone-sur-carte img {
		height: 44px;
	}
}

.bdo-carte-legende-titre {
	font-family: var( --bdo-police-donnee, monospace );
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var( --bdo-mangrove, #3F6B4F );
	margin: 18px 0 8px;
}

.bdo-bouton-signaler {
	display: block;
	width: 100%;
	text-align: center;
	background: var( --bdo-curcuma, #E0A23A );
	color: var( --bdo-abysse, #0B2E3D );
	border: none;
	border-radius: 6px;
	padding: 10px;
	font-weight: 600;
	cursor: pointer;
}

.bdo-instruction-signaler {
	font-size: 13px;
	margin-top: 8px;
}

/* ==========================================================================
   Cases à cocher des couches — pastilles de couleur
   ========================================================================== */

.bdo-couche-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 4px;
	cursor: pointer;
	border-radius: 6px;
}

.bdo-chevron-couche {
	margin-left: auto;
	background: none;
	border: none;
	color: var( --bdo-mangrove, #3F6B4F );
	font-size: 13px;
	cursor: pointer;
	padding: 2px 6px;
	flex: 0 0 auto;
	transition: transform 0.15s ease;
}

.bdo-chevron-couche.bdo-chevron-replie {
	transform: rotate( -90deg );
}

.bdo-sous-elements {
	overflow: hidden;
}

.bdo-case-noms-couche {
	display: block;
	font-size: 12px;
	color: #555;
	margin: 4px 0 8px 22px;
	cursor: pointer;
}

.bdo-case-noms-couche input {
	margin-right: 6px;
	accent-color: var( --bdo-mangrove, #3F6B4F );
}

.bdo-couche-item:hover {
	background: rgba( 11, 46, 61, 0.05 );
}

/* Case à cocher réelle : conservée pour l'accessibilité (navigation
   clavier, lecteurs d'écran) mais visuellement masquée — jamais en
   display:none, qui la retirerait aussi de la navigation clavier. */
.bdo-couche-checkbox {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
}

.bdo-couche-pastille {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	flex: 0 0 auto;
	background-color: var( --couleur-couche, #999 );
	border: 2px solid rgba( 255, 255, 255, 0.6 );
	box-shadow: 0 0 0 1px rgba( 11, 46, 61, 0.15 );
	opacity: 0.3;
	filter: grayscale( 70% );
	transition: opacity 0.15s, filter 0.15s;
}

/* Case cochée : la pastille retrouve sa vraie couleur. */
.bdo-couche-checkbox:checked + .bdo-couche-pastille {
	opacity: 1;
	filter: none;
}

/* Contour de focus visible au clavier, cohérent avec le reste du site. */
.bdo-couche-checkbox:focus-visible + .bdo-couche-pastille {
	outline: 3px solid var( --bdo-curcuma, #E0A23A );
	outline-offset: 2px;
}

.bdo-couche-nom {
	font-size: 14px;
	color: var( --bdo-abysse, #0B2E3D );
}

/* ==========================================================================
   Icône d'information sur la source d'une couche
   ========================================================================== */

.bdo-icone-source {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1px solid var( --bdo-mangrove, #3F6B4F );
	background: transparent;
	color: var( --bdo-mangrove, #3F6B4F );
	font-size: 11px;
	font-style: italic;
	font-family: Georgia, serif;
	line-height: 1;
	padding: 0;
	cursor: pointer;
	flex: 0 0 auto;
	margin-left: 2px;
}

.bdo-icone-source:hover {
	background: var( --bdo-mangrove, #3F6B4F );
	color: #fff;
}

.bdo-bulle-source {
	display: block;
	font-size: 12px;
	color: #555;
	background: rgba( 63, 107, 79, 0.08 );
	border-left: 2px solid var( --bdo-mangrove, #3F6B4F );
	padding: 6px 10px;
	margin: 2px 0 8px 22px;
	border-radius: 0 4px 4px 0;
}

/* ==========================================================================
   Bouton d'ouverture de la légende, mobile uniquement
   ========================================================================== */

.bdo-toggle-legende {
	display: none;
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1002;
	background: var( --bdo-abysse, #0B2E3D );
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 8px 14px;
	font-weight: 600;
	cursor: pointer;
}

@media ( max-width: 640px ) {

	.bdo-toggle-legende {
		display: block;
	}

	.bdo-carte-legende {
		transform: translateX( -100% );
		transition: transform 0.2s ease;
	}

	.bdo-carte-legende.bdo-legende-ouverte {
		transform: translateX( 0 );
	}
}