.soc-map-wrapper {
	/* Couleurs de période : conservées telles quelles (code couleur métier,
	   indépendant de la charte graphique du site). */
	--soc-hivernage: #2563eb;
	--soc-nidification: #ea580c;
	--soc-migration: #16a34a;
	--soc-dernier: #dc2626;
	--soc-autre: #94a3b8;

	/* Palette neutre alignée sur l'identité du site (tons crème/vert foncé
	   plutôt que le gris-bleu par défaut) : chaque site pourra surcharger
	   ces variables CSS depuis son thème si besoin. */
	--soc-card-bg: #faf9f2;
	--soc-card-border: #dddecf;
	--soc-accent: #1f3d33;
	--soc-text: #202b23;
	--soc-text-muted: #626e60;
	--soc-popup-bg: #faf9f2;
	--soc-info-btn-bg: #ffffff;
	--soc-info-btn-bg-hover: #faf9f2;
	--soc-radius-lg: 22px;
	--soc-radius-md: 14px;
	--soc-font-display: 'Fredoka', sans-serif;

	position: relative;
	font-family: inherit;
	color: var(--soc-text);
	max-width: 100%;
	isolation: isolate;
}

/* Aura décorative discrète derrière le composant, pour un rendu plus
   habité et moins "outil d'admin" — purement esthétique. */
.soc-map-wrapper::before {
	content: "";
	position: absolute;
	top: -60px;
	left: -60px;
	width: 320px;
	height: 320px;
	background: radial-gradient(circle, color-mix(in srgb, var(--soc-accent) 16%, transparent) 0%, transparent 70%);
	filter: blur(10px);
	pointer-events: none;
	z-index: -1;
}

.soc-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: flex-end;
	background: var(--soc-card-bg);
	background: color-mix(in srgb, var(--soc-card-bg) 92%, transparent);
	backdrop-filter: saturate(160%) blur(10px);
	-webkit-backdrop-filter: saturate(160%) blur(10px);
	border: 1px solid var(--soc-card-border);
	border-radius: var(--soc-radius-lg);
	padding: 18px 20px;
	margin-bottom: 16px;
	box-shadow: 0 2px 10px rgba(32,43,35,.05);
	position: relative;
	z-index: 1;
	animation: soc-slide-fade .5s ease both;
}
.soc-filter-field { display: flex; flex-direction: column; gap: 6px; min-width: 140px; }
.soc-filter-field label {
	font-size: 11px;
	font-weight: 700;
	color: var(--soc-text-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
	font-family: inherit;
}
.soc-filter-field select,
.soc-filter-field input[type="date"] {
	padding: 9px 12px;
	border-radius: var(--soc-radius-md);
	border: 1.5px solid var(--soc-card-border);
	background: #fff;
	font-size: 13px;
	font-family: inherit;
	color: var(--soc-text);
	min-width: 150px;
	transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.soc-filter-field select:hover,
.soc-filter-field input[type="date"]:hover { border-color: var(--soc-accent); }
.soc-filter-field select:focus,
.soc-filter-field input[type="date"]:focus {
	outline: none;
	border-color: var(--soc-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--soc-accent) 15%, transparent);
}
.soc-filter-actions { align-self: flex-end; }

.soc-btn {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 18px 6px 6px;
	border-radius: 999px;
	border: 1.5px solid var(--soc-accent);
	background: #fff;
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	color: var(--soc-text) !important;
	transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.soc-btn:hover {
	background: var(--soc-card-bg);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--soc-accent) 20%, transparent);
	transform: translateY(-1px);
	color: var(--soc-text) !important;
}
.soc-btn:focus, .soc-btn:active { color: var(--soc-text) !important; background: #fff; }
.soc-btn:active { transform: translateY(0); }
.soc-btn-icon-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--soc-accent);
	color: #fff;
	font-size: 14px;
	flex-shrink: 0;
	box-sizing: border-box;
	transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.soc-btn:hover .soc-btn-icon-circle { transform: rotate(-30deg); }

#soc-map {
	width: 100%;
	border: 1px solid var(--soc-card-border);
	z-index: 1;
	/* Couleur affichée en fond le temps que les tuiles se chargent. */
	background: #dbe6ea;
	box-shadow: 0 14px 34px -12px color-mix(in srgb, var(--soc-accent) 35%, transparent);
	animation: soc-map-in .6s ease .1s both;
}

/* Les tuiles OpenStreetMap standard sont assez chargées visuellement
   (routes, points d'intérêt, labels). On les adoucit en CSS pur (plutôt
   que de dépendre d'un prestataire tiers "neutre" qui pourrait un jour
   exiger une clé API, comme ça a été le cas avec CARTO) pour un rendu
   plus sobre, cohérent avec le reste de l'interface. */
#soc-map .leaflet-tile-pane {
	filter: grayscale(55%) brightness(1.08) contrast(0.92) saturate(0.6);
}

.soc-map-loading {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(255,255,255,.95);
	padding: 10px 18px;
	border-radius: var(--soc-radius-md);
	font-size: 13px;
	font-family: inherit;
	color: var(--soc-text-muted);
	box-shadow: 0 4px 12px rgba(0,0,0,.1);
	pointer-events: none;
	z-index: 900;
}
.soc-map-wrapper:not(.soc-loading) .soc-map-loading { display: none; }

/* Points de localisation : cercles pleins, colorés par période, avec une
   légère apparition en "pop" à chaque rendu. */
.soc-marker-box {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.soc-marker-dot {
	position: relative;
	z-index: 2;
	display: block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,.45);
	animation: soc-marker-pop .3s ease both;
}
.soc-marker-dot.soc-marker-last {
	width: 22px;
	height: 22px;
	border-width: 3px;
	box-shadow: 0 1px 5px rgba(0,0,0,.5);
}
/* Anneau radar pulsant : met en valeur le dernier relevé connu. */
.soc-marker-pulse {
	position: absolute;
	z-index: 1;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	opacity: .55;
	animation: soc-marker-ping 2.2s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes soc-marker-pop {
	from { transform: scale(0); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}
@keyframes soc-marker-ping {
	0% { transform: scale(1); opacity: .55; }
	75%, 100% { transform: scale(2.6); opacity: 0; }
}

/* Barre dédiée au-dessus de la carte (hors du fond de carte, pour ne
   jamais dépendre visuellement de ses couleurs). */
.soc-map-toolbar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 10px;
	position: relative;
	z-index: 5;
}

/* Bouton "info oiseau" + panneau déroulant. */
.soc-info-control {
	position: relative;
	font-family: inherit;
}
.soc-info-toggle {
	all: unset;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--soc-info-btn-bg);
	color: var(--soc-accent) !important;
	box-shadow: 0 2px 8px rgba(32,43,35,.35);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	transition: background-color .15s ease, transform .15s ease;
	animation: soc-attention .8s ease-out;
}
.soc-info-toggle-icon { display: flex; }
.soc-info-toggle-icon svg { display: block; }
.soc-info-toggle:hover { background: var(--soc-info-btn-bg-hover); transform: scale(1.06); color: var(--soc-accent) !important; }
.soc-info-toggle:focus, .soc-info-toggle:active { color: var(--soc-accent) !important; background: var(--soc-info-btn-bg); }
.soc-info-toggle[hidden] { display: none; }
.soc-info-toggle-badge {
	position: absolute;
	bottom: -2px;
	right: -2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--soc-accent);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #fff;
	box-sizing: border-box;
}

@keyframes soc-attention {
	0% { transform: scale(.5); opacity: 0; }
	60% { transform: scale(1.12); opacity: 1; }
	100% { transform: scale(1); }
}

.soc-info-panel {
	position: absolute;
	top: 48px;
	right: 0;
	background: var(--soc-card-bg);
	background: color-mix(in srgb, var(--soc-card-bg) 94%, transparent);
	backdrop-filter: saturate(160%) blur(12px);
	-webkit-backdrop-filter: saturate(160%) blur(12px);
	border: 1px solid var(--soc-card-border);
	border-radius: var(--soc-radius-md);
	box-shadow: 0 8px 24px rgba(32,43,35,.3);
	padding: 16px 18px;
	width: 280px;
	max-width: calc(100vw - 48px);
	max-height: 280px;
	overflow-y: auto;
	font-size: 12.5px;
	font-family: inherit;
	line-height: 1.5;
	color: var(--soc-text);
	box-sizing: border-box;
	transform-origin: top right;
	opacity: 0;
	transform: scale(.95) translateY(-6px);
	pointer-events: none;
	transition: opacity .18s ease, transform .18s ease;
}
.soc-info-panel.is-open {
	opacity: 1;
	transform: scale(1) translateY(0);
	pointer-events: auto;
}
.soc-info-panel h4 { margin: 0 8px 6px 0; font-size: 15px; font-family: var(--soc-font-display); font-weight: 600; padding-right: 18px; }
.soc-info-panel p { margin: 0; }
.soc-info-panel-close {
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 8px;
	right: 8px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	color: var(--soc-text-muted) !important;
	transition: background-color .15s ease, color .15s ease;
}
.soc-info-panel-close:hover { color: var(--soc-text) !important; background: rgba(0,0,0,.06); }
.soc-info-panel-close:focus, .soc-info-panel-close:active { color: var(--soc-text-muted) !important; }

/* Encart légende + fiche de l'oiseau (coin bas-droit de la carte). */
.soc-map-legend-box {
	background: var(--soc-card-bg);
	background: color-mix(in srgb, var(--soc-card-bg) 92%, transparent);
	backdrop-filter: saturate(160%) blur(12px);
	-webkit-backdrop-filter: saturate(160%) blur(12px);
	border: 1px solid var(--soc-card-border);
	border-radius: var(--soc-radius-md);
	box-shadow: 0 4px 14px rgba(32,43,35,.22);
	padding: 14px 16px;
	min-width: 180px;
	max-width: calc(100vw - 48px);
	font-size: 12.5px;
	font-family: inherit;
	color: var(--soc-text);
	box-sizing: border-box;
	animation: soc-slide-fade .5s ease .05s both;
}
.soc-map-legend-box h4 { margin: 0; font-size: 16px; font-family: var(--soc-font-display); font-weight: 600; }
.soc-map-legend-box .soc-legend-status { margin: 2px 0 10px; font-style: italic; color: var(--soc-text-muted); }
.soc-map-legend-box ul { list-style: none; margin: 0; padding: 0; }
.soc-map-legend-box li {
	display: flex; align-items: center; gap: 8px; padding: 3px 2px;
	border-radius: 6px;
	transition: background-color .15s ease, transform .15s ease;
}
.soc-map-legend-box li:hover { background: color-mix(in srgb, var(--soc-accent) 8%, transparent); transform: translateX(2px); }
.soc-map-legend-box li i {
	width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex-shrink: 0;
	transition: transform .15s ease;
}
.soc-map-legend-box li:hover i { transform: scale(1.35); }
.soc-map-legend-box .soc-legend-count { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--soc-card-border); color: var(--soc-text-muted); font-size: 11.5px; }
.soc-map-legend-box .soc-legend-attribution { margin: 6px 0 0; font-size: 10.5px; color: var(--soc-text-muted); }
.soc-map-legend-box .soc-legend-attribution a { color: inherit; }

/* Bulle d'information (popup Leaflet au clic sur un point). */
.soc-map-wrapper .leaflet-popup-content-wrapper {
	background: var(--soc-popup-bg);
	background: color-mix(in srgb, var(--soc-popup-bg) 95%, transparent);
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(32,43,35,.3);
	padding: 0;
}
.soc-map-wrapper .leaflet-popup-content { margin: 0; }
.soc-map-wrapper .leaflet-popup-tip { background: var(--soc-popup-bg); }
.soc-map-wrapper .leaflet-popup-close-button {
	all: unset;
	box-sizing: border-box;
	position: absolute;
	top: 10px;
	right: 10px;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--soc-text-muted) !important;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	transition: background-color .15s ease, color .15s ease;
}
.soc-map-wrapper .leaflet-popup-close-button:hover {
	background: rgba(0,0,0,.06);
	color: var(--soc-text) !important;
}
.soc-map-wrapper .leaflet-popup-close-button:focus,
.soc-map-wrapper .leaflet-popup-close-button:active {
	color: var(--soc-text-muted) !important;
}

.soc-popup {
	font-family: inherit;
	color: var(--soc-text);
	padding: 16px 18px;
}
.soc-popup-header { margin-bottom: 12px; padding-right: 18px; }
.soc-popup-header h4 { margin: 0 0 8px; font-size: 17px; font-family: var(--soc-font-display); font-weight: 600; }
.soc-popup-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.soc-popup-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 700;
	color: #fff;
	letter-spacing: .02em;
	white-space: nowrap;
}

.soc-popup-grid { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.soc-popup-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--soc-card-border);
}
.soc-popup-row:last-child { border-bottom: none; padding-bottom: 0; }
.soc-popup-row dt {
	margin: 0;
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--soc-text-muted);
	white-space: nowrap;
}
.soc-popup-row dd {
	margin: 0;
	font-size: 12.5px;
	font-weight: 600;
	text-align: right;
	color: var(--soc-text);
}

/* Contrôles natifs de Leaflet (zoom, attribution) : alignés sur la même charte. */
.soc-map-wrapper .leaflet-bar {
	border-radius: 10px;
	border-color: var(--soc-card-border);
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(32,43,35,.2);
}
.soc-map-wrapper .leaflet-bar a {
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	cursor: pointer;
	color: var(--soc-text) !important;
	background: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	border-bottom: 1px solid var(--soc-card-border);
	transition: background-color .15s ease;
}
.soc-map-wrapper .leaflet-bar a:last-child { border-bottom: none; }
.soc-map-wrapper .leaflet-bar a:hover { background: var(--soc-card-bg); color: var(--soc-text) !important; }
.soc-map-wrapper .leaflet-bar a:focus,
.soc-map-wrapper .leaflet-bar a:active {
	color: var(--soc-text) !important;
	background: #fff;
}
.soc-map-wrapper .leaflet-bar a.leaflet-disabled {
	cursor: default;
	color: var(--soc-text-muted) !important;
	opacity: .5;
}
.soc-map-wrapper .leaflet-control-attribution {
	background: color-mix(in srgb, var(--soc-card-bg) 85%, transparent);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-radius: 999px;
	padding: 2px 10px;
	font-size: 10.5px;
	font-family: inherit;
	color: var(--soc-text-muted);
}
.soc-map-wrapper .leaflet-control-attribution a { color: var(--soc-text); }

@keyframes soc-slide-fade {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes soc-map-in {
	from { opacity: 0; transform: scale(.99); }
	to { opacity: 1; transform: scale(1); }
}

/* Respecte les préférences d'accessibilité : coupe les animations
   décoratives pour les personnes qui en ont fait la demande. */
@media (prefers-reduced-motion: reduce) {
	.soc-filters, #soc-map, .soc-map-legend-box, .soc-info-toggle,
	.soc-marker-dot, .soc-marker-pulse {
		animation: none !important;
	}
	.soc-btn, .soc-btn-icon-circle, .soc-info-panel, .soc-map-legend-box li, .soc-map-legend-box li i {
		transition: none !important;
	}
}

/* `all: unset` neutralise le style de BASE des boutons, mais pas les
   règles :focus/:active que le thème peut définir séparément (souvent
   avec un contour ou un fond de couleur, parfois en !important). On les
   neutralise ici explicitement et on fournit à la place un focus visible
   cohérent avec notre propre design, pour ne rien perdre côté accessibilité. */
.soc-map-wrapper button:focus,
.soc-map-wrapper button:active,
.soc-map-wrapper a:focus,
.soc-map-wrapper a:active {
	outline: none !important;
	box-shadow: none !important;
}
.soc-map-wrapper button:focus-visible,
.soc-map-wrapper a:focus-visible {
	outline: 2px solid var(--soc-accent) !important;
	outline-offset: 2px;
}

/* Écrans étroits : encarts plus compacts pour rester lisibles sans déborder. */
@media (max-width: 480px) {
	.soc-filters { padding: 14px 16px; border-radius: var(--soc-radius-md); }
	.soc-info-toggle { width: 34px; height: 34px; font-size: 15px; }
	.soc-info-panel,
	.soc-map-legend-box {
		padding: 12px 14px;
		font-size: 12px;
		max-width: calc(100vw - 24px);
	}
	.soc-info-panel { width: 240px; max-height: 220px; }
	.soc-map-legend-box { min-width: 150px; }
}