/**
 * DéfisMed Map — front-end styles.
 *
 * @package DefismedMap
 */

.defismed-map-wrap {
	/* Design tokens — cf. docs/DESIGN.md (identité DéfisMed). */
	--dm-primary: #1E7C6E;
	--dm-primary-hover: #13473E;
	--dm-secondary: #47C4E4;
	--dm-tertiary: #92ABA7;
	--dm-tertiary-dark: #13473E;
	/* --dm-accent = couleur d'action de marque (les couleurs de catégories
	   restent pilotées par la donnée via --dm-chip-color). */
	--dm-accent: var( --dm-primary );
	--dm-bg: #fff;
	--dm-text: #1f2933;
	--dm-muted: #6b7280;
	--dm-border: #dfe4e2;
	--dm-surface: #f2f5f4;
	--dm-radius-sm: 4px;
	--dm-radius-md: 8px;
	--dm-radius-lg: 16px;
	--dm-radius-pill: 999px;
	--dm-radius: var( --dm-radius-lg );
	--dm-shadow: 0 6px 24px rgba( 19, 71, 62, 0.14 );
	position: relative;
	font-family: inherit;
	color: var( --dm-text );
	box-sizing: border-box;
}

.defismed-map-wrap *,
.defismed-map-wrap *::before,
.defismed-map-wrap *::after {
	box-sizing: border-box;
}

/* Accessible focus ring (WCAG) — bleu secondaire, cf. DESIGN.md. */
.defismed-map-wrap :where( button, a, input, [tabindex] ):focus-visible,
.defismed-map-panel :where( button, a, input, [tabindex] ):focus-visible {
	outline: 2px solid var( --dm-secondary );
	outline-offset: 2px;
}

/* --- Filter bar --- */
.defismed-map-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 12px;
	background: var( --dm-bg );
	border-radius: var( --dm-radius );
	box-shadow: var( --dm-shadow );
	margin-bottom: 12px;
	position: sticky;
	top: 8px;
	z-index: 5;
}

.defismed-map-search {
	display: flex;
	align-items: center;
	gap: 6px;
	background: var( --dm-surface );
	border-radius: 999px;
	padding: 6px 14px;
	flex: 1 1 220px;
	min-width: 180px;
	color: var( --dm-muted );
}

.defismed-map-search__input {
	border: 0;
	background: transparent;
	outline: none;
	width: 100%;
	font-size: 15px;
	color: var( --dm-text );
}

.defismed-map-chips,
.defismed-map-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.defismed-map-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 2px solid var( --dm-chip-color, var( --dm-border ) );
	background: #fff;
	color: var( --dm-text );
	border-radius: 999px;
	padding: 5px 12px;
	font-size: 14px;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}

.defismed-map-chip.is-active {
	background: var( --dm-chip-color, var( --dm-accent ) );
	color: #fff;
}

.defismed-map-chip__icon {
	width: 18px;
	height: 18px;
	object-fit: contain;
}

.defismed-map-tag {
	border: 1px solid var( --dm-border );
	background: #fff;
	border-radius: 999px;
	padding: 4px 10px;
	font-size: 13px;
	cursor: pointer;
	color: var( --dm-muted );
}

.defismed-map-tag.is-active {
	background: var( --dm-accent );
	border-color: var( --dm-accent );
	color: #fff;
}

.defismed-map-tag.is-static {
	cursor: default;
	background: var( --dm-surface );
	color: var( --dm-text );
}

.defismed-map-toggles {
	display: flex;
	gap: 12px;
}

.defismed-map-toggle {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 14px;
	cursor: pointer;
}

.defismed-map-reset {
	margin-left: auto;
	border: 0;
	background: var( --dm-surface );
	border-radius: 999px;
	padding: 6px 14px;
	cursor: pointer;
	font-size: 14px;
	color: var( --dm-text );
}

.defismed-map-reset:hover {
	background: #e9ecef;
}

/* Advanced filters: inline on desktop, bottom sheet on mobile. */
.defismed-map-advanced {
	display: contents;
}

.defismed-map-advanced__head,
.defismed-map-advanced__close,
.defismed-map-advanced__apply,
.defismed-map-more-filters,
.defismed-map-sheet-backdrop {
	display: none;
}

/* --- Map stage --- */
.defismed-map-stage {
	position: relative;
	border-radius: var( --dm-radius );
	overflow: hidden;
	box-shadow: var( --dm-shadow );
}

.defismed-map-canvas {
	width: 100%;
	min-height: 320px;
	background: #e9ecef;
	z-index: 1;
}

/* En mode filtres latéraux la carte est bord à bord : pas d'arrondi ni
   d'ombre (ils laissaient apparaître des liserés gris sur les bords). */
.defismed-map-wrap.is-filters-left .defismed-map-stage {
	border-radius: 0;
	box-shadow: none;
}

.defismed-map-loading {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: rgba( 255, 255, 255, 0.7 );
	z-index: 500;
	font-size: 15px;
	color: var( --dm-muted );
}

.defismed-map-spinner {
	width: 22px;
	height: 22px;
	border: 3px solid var( --dm-border );
	border-top-color: var( --dm-accent );
	border-radius: 50%;
	animation: dm-spin 0.8s linear infinite;
	display: inline-block;
}

@keyframes dm-spin {
	to {
		transform: rotate( 360deg );
	}
}

/* --- Legend --- */
.defismed-map-legend {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 450;
	background: var( --dm-bg );
	border-radius: var( --dm-radius-md );
	box-shadow: var( --dm-shadow );
	max-width: 220px;
	/* Ne jamais déborder de la carte : la légende reste contenue dans le stage
	   et sa liste scrolle si les catégories sont nombreuses. */
	max-height: calc( 100% - 24px );
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.defismed-map-legend__toggle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	gap: 10px;
	border: 0;
	background: transparent;
	padding: 10px 14px;
	font-weight: 600;
	cursor: pointer;
	font-size: 14px;
}

.defismed-map-legend__list {
	list-style: none;
	margin: 0;
	padding: 0 8px 8px;
	overflow-y: auto;
}

.defismed-map-legend__item {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	border: 0;
	background: transparent;
	padding: 6px 8px;
	border-radius: 8px;
	cursor: pointer;
	font-size: 13px;
	text-align: left;
}

.defismed-map-legend__item.is-active,
.defismed-map-legend__item:hover {
	background: var( --dm-surface );
}

.defismed-map-legend__dot {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.defismed-map-legend__dot img {
	width: 14px;
	height: 14px;
	object-fit: contain;
	filter: brightness( 0 ) invert( 1 );
}

/* --- Geolocation button --- */
.defismed-map-geoloc {
	position: absolute;
	bottom: 20px;
	right: 12px;
	z-index: 450;
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 50%;
	background: var( --dm-bg );
	box-shadow: var( --dm-shadow );
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var( --dm-accent );
}

/* Taille du picto forcée : certains thèmes contraignent `svg` en largeur
   (rendu écrasé). On fige la taille et on empêche le flex de le compresser. */
.defismed-map-geoloc svg {
	width: 26px !important;
	height: 26px !important;
	flex: 0 0 auto;
}

/* --- Markers --- */
.dm-marker {
	background: transparent;
	border: 0;
}

.dm-pin {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50% 50% 50% 0;
	transform: rotate( -45deg );
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.35 );
	border: 2px solid #fff;
}

/* Pastille « témoignages » : posée sur le conteneur du pin (pas sur `.dm-pin`,
   qui est pivoté à -45°). */
.dm-pin__exp {
	position: absolute;
	top: -2px;
	right: -2px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #47C4E4;
	border: 2px solid #fff;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.35 );
}

.dm-pin img {
	width: 22px;
	height: 22px;
	object-fit: contain;
	transform: rotate( 45deg );
	filter: brightness( 0 ) invert( 1 );
}

.dm-user-dot {
	animation: dm-pulse 1.8s ease-out infinite;
}

@keyframes dm-pulse {
	0% {
		stroke-opacity: 0.8;
	}
	100% {
		stroke-opacity: 0.2;
	}
}

/* --- Animations (entrée + interactions) ---
   IMPORTANT : Leaflet positionne les marqueurs via `transform` sur `.dm-marker`.
   On n'anime donc jamais `.dm-marker` (sinon le placement casse) — uniquement
   les éléments internes (`.dm-pin`, la bulle du cluster) qui, eux, ne portent
   pas la translation de Leaflet. */

/* Apparition des pins (au chargement et à chaque re-filtrage). */
.dm-pin {
	animation: dm-pin-in 0.3s cubic-bezier( 0.34, 1.56, 0.64, 1 ) both;
}

@keyframes dm-pin-in {
	from {
		opacity: 0;
		transform: rotate( -45deg ) scale( 0.3 );
	}
	to {
		opacity: 1;
		transform: rotate( -45deg ) scale( 1 );
	}
}

/* Survol des marqueurs : la bulle « gigote » et passe au premier plan.
   `hover: hover` exclut le tactile (pas de hover fantôme sur mobile). */
@media ( hover: hover ) {
	.dm-marker:hover {
		z-index: 10000 !important;
	}

	.dm-marker:hover .dm-pin {
		animation: dm-wiggle 0.45s ease;
		box-shadow: 0 6px 14px rgba( 0, 0, 0, 0.4 );
	}

	/* Survol des clusters : léger zoom de la bulle (pas du conteneur Leaflet). */
	.defismed-map-wrap .marker-cluster div {
		transition: transform 0.15s ease;
	}

	.defismed-map-wrap .marker-cluster:hover div {
		transform: scale( 1.12 );
	}

	/* Bouton géoloc : petit rebond au survol. */
	.defismed-map-geoloc {
		transition: transform 0.15s ease, background 0.15s, color 0.15s;
	}

	.defismed-map-geoloc:hover {
		transform: scale( 1.08 );
	}
}

@keyframes dm-wiggle {
	0% {
		transform: rotate( -45deg ) scale( 1 );
	}
	25% {
		transform: rotate( -34deg ) scale( 1.14 );
	}
	50% {
		transform: rotate( -56deg ) scale( 1.14 );
	}
	75% {
		transform: rotate( -40deg ) scale( 1.12 );
	}
	100% {
		transform: rotate( -45deg ) scale( 1.1 );
	}
}

/* Accessibilité : couper toute animation si l'utilisateur le demande. */
@media ( prefers-reduced-motion: reduce ) {
	.dm-user-dot,
	.defismed-map-wrap .marker-cluster:hover div,
	.defismed-map-geoloc,
	.defismed-map-geoloc:hover {
		animation: none !important;
		transition: none !important;
		transform: none !important;
	}

	/* Le pin garde sa rotation de base mais sans animation d'entrée ni wiggle. */
	.dm-pin,
	.dm-marker:hover .dm-pin {
		animation: none !important;
		transform: rotate( -45deg ) !important;
	}
}

/* --- Leaflet popup --- */
.dm-popup .leaflet-popup-content-wrapper {
	border-radius: var( --dm-radius-md );
	padding: 0;
	overflow: hidden;
}

.dm-popup .leaflet-popup-content {
	margin: 0;
	width: 240px !important;
}

.dm-popup__img img {
	width: 100%;
	height: 120px;
	object-fit: cover;
	display: block;
}

.dm-popup__text {
	padding: 10px 12px 12px;
}

.dm-popup__badge {
	display: inline-block;
	color: #fff;
	font-size: 11px;
	border-radius: 999px;
	padding: 2px 8px;
	margin-bottom: 6px;
}

.dm-popup__title {
	display: block;
	font-size: 15px;
	margin-bottom: 4px;
}

.dm-popup__desc {
	font-size: 13px;
	color: var( --dm-muted );
	margin: 0 0 8px;
}

.dm-popup__more {
	border: 0;
	background: var( --dm-accent );
	color: #fff;
	border-radius: var( --dm-radius-pill );
	padding: 7px 16px;
	font-size: 13px;
	cursor: pointer;
	transition: background 0.15s;
}

.dm-popup__more:hover {
	background: var( --dm-primary-hover );
}

/* --- Results list --- */
.defismed-map-results {
	margin-top: 12px;
	background: var( --dm-bg );
	border-radius: var( --dm-radius );
	box-shadow: var( --dm-shadow );
	padding: 12px;
}

.defismed-map-results__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.defismed-map-results__count {
	font-weight: 600;
}

.defismed-map-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 240px, 1fr ) );
	gap: 12px;
}

.defismed-map-card {
	display: flex;
	flex-direction: column;
	border: 1px solid #e9ecef;
	border-radius: var( --dm-radius-md );
	overflow: hidden;
	cursor: pointer;
	transition: box-shadow 0.15s, transform 0.15s;
	background: #fff;
}

.defismed-map-card:hover {
	box-shadow: var( --dm-shadow );
	transform: translateY( -2px );
}

.defismed-map-card__thumb img {
	width: 100%;
	height: 130px;
	object-fit: cover;
	display: block;
}

.defismed-map-card__body {
	padding: 10px 12px;
}

.defismed-map-card__badge {
	display: inline-block;
	color: #fff;
	font-size: 11px;
	border-radius: 999px;
	padding: 2px 8px;
	margin-bottom: 6px;
}

/* Ligne badge principal + pictos des filtres secondaires. */
.defismed-map-card__badges {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 6px;
}

.defismed-map-card__badges .defismed-map-card__badge {
	margin-bottom: 0;
}

.defismed-map-card__dots {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 4px;
}

.defismed-map-card__dot {
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: #fff;
	border: 1.5px solid var( --dm-chip-color, var( --dm-tertiary ) );
	color: var( --dm-chip-color, var( --dm-tertiary-dark ) );
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	cursor: help;
	line-height: 1;
}

.defismed-map-card__dot img {
	width: 14px;
	height: 14px;
	object-fit: contain;
	display: block;
}

.defismed-map-card__title {
	font-size: 15px;
	margin: 0 0 4px;
}

.defismed-map-card__desc {
	font-size: 13px;
	color: var( --dm-muted );
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.defismed-map-card__distance {
	display: inline-block;
	margin-top: 6px;
	font-size: 12px;
	color: var( --dm-accent );
	font-weight: 600;
}

.defismed-map-results__empty {
	text-align: center;
	color: var( --dm-muted );
	padding: 20px;
}

/* --- Detail panel --- */
.defismed-map-overlay {
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, 0.4 );
	z-index: 9998;
}

.defismed-map-panel {
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	width: 400px;
	max-width: 100%;
	background: var( --dm-bg );
	box-shadow: -8px 0 30px rgba( 0, 0, 0, 0.2 );
	z-index: 9999;
	overflow-y: auto;
	transform: translateX( 0 );
	transition: transform 0.28s ease;
}

/* Panel slide transition (driven by Alpine x-transition classes). */
.dm-slide-tr {
	transition: transform 0.28s ease;
}

.dm-slide-start {
	transform: translateX( 100% );
}

.dm-slide-end {
	transform: translateX( 0 );
}

.defismed-map-panel__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.9 );
	color: var( --dm-text );
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.2 );
}

.defismed-map-panel__close:hover {
	background: #fff;
	color: var( --dm-primary );
}

.defismed-map-panel__loading {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 200px;
}

.defismed-map-panel__gallery {
	position: relative;
	border-radius: var( --dm-radius-md );
	overflow: hidden;
	border: 1px solid var( --dm-border );
	box-shadow: 0 2px 10px rgba( 19, 71, 62, 0.1 );
	margin-bottom: 16px;
}

.defismed-map-panel__gallery img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	display: block;
}

.defismed-map-panel__gallery-arrow {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0 0 3px;
	border: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.92 );
	color: var( --dm-primary );
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.18 );
	transition: background 0.15s, color 0.15s;
}

.defismed-map-panel__gallery-arrow.is-prev {
	left: 10px;
}

.defismed-map-panel__gallery-arrow.is-next {
	right: 10px;
}

.defismed-map-panel__gallery-arrow:hover,
.defismed-map-panel__gallery-arrow:focus {
	background: var( --dm-primary );
	color: #fff;
	outline: none;
}

.defismed-map-panel__gallery-count {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX( -50% );
	background: rgba( 19, 71, 62, 0.65 );
	color: #fff;
	border-radius: 999px;
	padding: 3px 12px;
	font-size: 13px;
}

.defismed-map-panel__video iframe {
	display: block;
}

.defismed-map-panel__content {
	padding: 18px;
}

.defismed-map-panel__title {
	font-size: 22px;
	margin: 6px 0 10px;
}

.defismed-map-panel__title a {
	color: inherit;
	text-decoration: none;
}

.defismed-map-panel__title a:hover,
.defismed-map-panel__title a:focus {
	color: var( --dm-primary );
	text-decoration: underline;
}

.defismed-map-panel__meta {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.defismed-map-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var( --dm-surface );
	border-radius: 999px;
	padding: 3px 10px;
	font-size: 13px;
}

.defismed-map-pill__icon {
	width: 16px;
	height: 16px;
	object-fit: contain;
}

/* --- Custom fields (detail panel + single page) --- */
/* Single ordered stream: block fields take a full row, consecutive link
   buttons sit side by side. */
.defismed-map-panel__cf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
}

.defismed-map-cf.is-block {
	flex: 1 1 100%;
}

.defismed-map-cf.is-button {
	flex: 0 0 auto;
	gap: 0;
}

.defismed-map-cf {
	display: flex;
	gap: 8px;
	font-size: 14px;
}

.defismed-map-cf__icon {
	flex: 0 0 auto;
	line-height: 1.4;
}

.defismed-map-cf__icon img {
	width: 18px;
	height: 18px;
	object-fit: contain;
}

.defismed-map-cf__body {
	min-width: 0;
}

.defismed-map-cf__label {
	display: block;
	font-weight: 600;
	color: var( --dm-primary );
}

.defismed-map-cf__value {
	color: var( --dm-text );
	word-break: break-word;
}

a.defismed-map-cf__value {
	color: var( --dm-accent );
	text-decoration: none;
}

a.defismed-map-cf__value:hover {
	text-decoration: underline;
}

.defismed-map-cf__rows {
	list-style: none;
	margin: 2px 0 0;
	padding: 0;
	display: grid;
	gap: 2px;
}

.defismed-map-cf__rows li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.defismed-map-cf__row-label {
	color: var( --dm-muted );
}

.defismed-map-cf__row-value {
	white-space: nowrap;
}

.defismed-map-cf__rows li.is-closed .defismed-map-cf__row-value {
	color: var( --dm-muted );
}

/* Link fields displayed as buttons (socials, booking…) — kept compact so they
   don't dwarf the surrounding values. */
.defismed-map-cf-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 12px;
	font-size: 13px;
	font-weight: 500;
	border-width: 1px;
}

.defismed-map-cf-btn__icon {
	width: 15px;
	height: 15px;
	object-fit: contain;
}

/* Grouped choices in the "Par type" filter section. */
.defismed-map-cf-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.defismed-map-cf-group__label {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	font-weight: 600;
	color: var( --dm-primary );
}

/* Collapsible variant: header button + revealed choice list packed in a
   single rectangle (une seule bordure autour du tout). */
.defismed-map-cf-group--collapsible {
	gap: 0;
	border: 1px solid var( --dm-border, #dfe4e3 );
	border-radius: var( --dm-radius-md, 8px );
	background: var( --dm-neutral, #fff );
	overflow: hidden;
}

.defismed-map-cf-group__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	padding: 8px 12px;
	background: transparent;
	color: var( --dm-primary );
	border: 0;
	border-radius: 0;
	cursor: pointer;
	font: inherit;
	text-align: left;
}

.defismed-map-cf-group__toggle .defismed-map-cf-group__toggle span,
.defismed-map-cf-group__toggle span {
	color: inherit;
}

@media ( hover: hover ) {
	.defismed-map-cf-group__toggle:hover {
		background: var( --dm-surface, #f2f5f4 );
	}
}

.defismed-map-cf-group__hint {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 500;
	color: var( --dm-muted, #6b7876 );
}

.defismed-map-cf-group__placeholder {
	color: var( --dm-muted, #6b7876 );
}

.defismed-map-cf-group__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var( --dm-primary );
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
}

.defismed-map-cf-group__chevron {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.15s ease;
	color: var( --dm-primary );
}

.defismed-map-cf-group--collapsible.is-open .defismed-map-cf-group__chevron {
	transform: rotate( 180deg );
}

.defismed-map-cf-group__choices {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 8px 12px 10px;
	max-height: 220px;
	overflow-y: auto;
	border-top: 1px solid var( --dm-border, #dfe4e3 );
	background: transparent;
}

.defismed-map-panel__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 12px;
}

/* Compteur d'expériences partagées (lien vers la page accueillant). */
.defismed-map-panel__exp {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 12px;
	padding: 5px 12px;
	border-radius: var( --dm-radius-pill );
	background: var( --dm-surface );
	border: 1px solid var( --dm-border );
	font-size: 13px;
	font-weight: 600;
	color: var( --dm-primary );
	text-decoration: none;
}

@media ( hover: hover ) {
	.defismed-map-panel__exp:hover {
		border-color: var( --dm-primary );
	}
}

/* Compteur et invitation à témoigner, côte à côte. */
.defismed-map-panel__exp-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}

.defismed-map-panel__exp-row .defismed-map-panel__exp {
	margin-bottom: 0;
}

/* Invitation à témoigner (visiteur connecté) : blanche au repos, bleu
   DéfisMed au survol. Texte teal foncé sur le bleu (le blanc échoue AA). */
.defismed-map-panel__exp-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 14px;
	border-radius: var( --dm-radius-pill );
	background: #fff;
	border: 1px solid var( --dm-primary );
	font-size: 13px;
	font-weight: 600;
	color: var( --dm-primary );
	text-decoration: none;
}

/* Le thème colore les liens : sans !important le libellé ressortait invisible
   (vert sur vert). Cible le lien ET son <span>. */
.defismed-map-wrap .defismed-map-panel__exp-cta,
.defismed-map-wrap .defismed-map-panel__exp-cta span,
.defismed-map-panel .defismed-map-panel__exp-cta,
.defismed-map-panel .defismed-map-panel__exp-cta span {
	color: var( --dm-primary ) !important;
}

.defismed-map-wrap .defismed-map-panel__exp,
.defismed-map-wrap .defismed-map-panel__exp span,
.defismed-map-panel .defismed-map-panel__exp,
.defismed-map-panel .defismed-map-panel__exp span {
	color: var( --dm-primary ) !important;
}

@media ( hover: hover ) {
	.defismed-map-panel .defismed-map-panel__exp-cta:hover {
		background: var( --dm-secondary ) !important;
		border-color: var( --dm-secondary ) !important;
	}

	.defismed-map-panel .defismed-map-panel__exp-cta:hover,
	.defismed-map-panel .defismed-map-panel__exp-cta:hover span {
		color: var( --dm-tertiary-dark ) !important;
	}
}

/* Libellé réservé aux lecteurs d'écran (indépendant du thème). */
.defismed-map-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
	border: 0;
}

.defismed-map-panel__desc {
	font-size: 15px;
	line-height: 1.6;
	margin-bottom: 16px;
}

.defismed-map-panel__contact {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: grid;
	gap: 8px;
	font-size: 14px;
}

.defismed-map-panel__contact a {
	color: var( --dm-accent );
	text-decoration: none;
}

.defismed-map-panel__members {
	background: #eaf7fb;
	border: 1px solid #b7e5f2;
	border-radius: var( --dm-radius-md );
	padding: 12px;
	margin-bottom: 16px;
	font-size: 14px;
}

.defismed-map-members-badge {
	display: inline-block;
	background: var( --dm-secondary );
	color: var( --dm-tertiary-dark );
	border-radius: 999px;
	padding: 2px 10px;
	font-size: 12px;
	font-weight: 600;
	margin-bottom: 8px;
}

.defismed-map-panel__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.defismed-map-btn {
	border: 1px solid var( --dm-primary );
	background: #fff;
	border-radius: var( --dm-radius-pill );
	padding: 10px 22px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	color: var( --dm-primary );
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.defismed-map-btn:hover {
	background: var( --dm-surface );
}

.defismed-map-btn--primary {
	background: var( --dm-accent );
	border-color: var( --dm-accent );
	color: #fff;
}

.defismed-map-btn--primary:hover {
	background: var( --dm-primary-hover );
	border-color: var( --dm-primary-hover );
	color: #fff;
}

/* --- Coups de cœur ---
   Le rouge est sémantique (état « aimé »), pas une couleur de marque : il ne
   sert qu'au cœur et n'apparaît jamais en fond de bloc. */
.defismed-map-wrap {
	--dm-heart: #d94f5c;
}

.defismed-map-fav {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 16px;
	line-height: 1;
}

.defismed-map-wrap .defismed-map-fav.is-fav,
.defismed-map-wrap .defismed-map-fav.is-fav span {
	color: var( --dm-heart );
}

.defismed-map-wrap .defismed-map-fav.is-fav {
	border-color: var( --dm-heart );
}

.defismed-map-fav__count {
	font-size: 13px;
	font-weight: 600;
}

.defismed-map-chip--fav.is-active {
	--dm-chip-color: var( --dm-heart );
}

/* Invite d'adhésion (visiteur non connecté).
   `fixed` et au-dessus du panneau détail (z-index 9999) : en `absolute` dans
   le wrap, elle passait derrière le panneau plein écran mobile. */
.defismed-map-fav-invite {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX( -50% );
	z-index: 10001;
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: calc( 100% - 32px );
	background: var( --dm-bg );
	border: 1px solid var( --dm-border );
	border-radius: var( --dm-radius-md );
	box-shadow: var( --dm-shadow );
	padding: 12px 44px 12px 16px;
	font-size: 14px;
}

.defismed-map-fav-invite p {
	margin: 0;
}

/* Le libellé du CTA tient sur une seule ligne, même dans l'encart étroit du
   mobile (le bouton ne rétrécit pas sous son texte). */
.defismed-map-fav-invite .defismed-map-btn {
	flex: 0 0 auto;
	white-space: nowrap;
}

.defismed-map-fav-invite__close {
	position: absolute;
	top: 6px;
	right: 8px;
	background: none;
	border: 0;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	color: var( --dm-muted );
}

@media ( max-width: 640px ) {
	.defismed-map-fav-invite {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}
}

/* --- Durcissement anti-thème -------------------------------------------------
   Le thème (Elementor/Hello) colore les <button> en rose #cc3366 (base) et en
   blanc sur fond rose au survol, SANS !important. Le libellé des contrôles est
   souvent dans un <span> : une couleur posée sur le bouton n'atteint pas
   toujours le span (une règle directe du thème bat l'héritage), donc on cible
   bouton ET span. Scoping `.defismed-map-wrap` (spécificité 0,2,x) pour ne
   toucher que l'UI du plugin et passer devant les sélecteurs du thème. Les
   couleurs de catégorie (--dm-chip-color, dots, badges) restent pilotées par la
   donnée éditoriale : on n'y touche pas. */

/* Légende : titre + toggle (+/-) en vert de marque. Fond neutre (jamais rose)
   au survol / focus / clic (le thème colore button:hover ET button:focus). */
.defismed-map-wrap .defismed-map-legend__toggle,
.defismed-map-wrap .defismed-map-legend__toggle span {
	color: var( --dm-primary ) !important;
}

.defismed-map-wrap .defismed-map-legend__toggle:hover,
.defismed-map-wrap .defismed-map-legend__toggle:focus,
.defismed-map-wrap .defismed-map-legend__toggle:active {
	background: var( --dm-surface ) !important;
}

/* Légende : libellés en texte neutre, en base comme au survol (sinon le thème
   les passe en blanc, illisibles sur le fond clair). */
.defismed-map-wrap .defismed-map-legend__item,
.defismed-map-wrap .defismed-map-legend__item span {
	color: var( --dm-text ) !important;
}

.defismed-map-wrap .defismed-map-legend__item:hover,
.defismed-map-wrap .defismed-map-legend__item:focus,
.defismed-map-wrap .defismed-map-legend__item:active {
	background: var( --dm-surface ) !important;
}

/* Chips inactifs : texte neutre + fond clair dans tous les états interactifs
   (survol / focus / clic). Couvrir :focus est indispensable : après avoir
   désactivé un chip, il garde le focus et le thème le repasserait en rose. */
.defismed-map-wrap .defismed-map-chip,
.defismed-map-wrap .defismed-map-chip span,
.defismed-map-wrap .defismed-map-chip:hover,
.defismed-map-wrap .defismed-map-chip:hover span,
.defismed-map-wrap .defismed-map-chip:focus,
.defismed-map-wrap .defismed-map-chip:focus span,
.defismed-map-wrap .defismed-map-chip:active,
.defismed-map-wrap .defismed-map-chip:active span {
	color: var( --dm-text ) !important;
}

.defismed-map-wrap .defismed-map-chip:hover,
.defismed-map-wrap .defismed-map-chip:focus,
.defismed-map-wrap .defismed-map-chip:active {
	background: var( --dm-surface ) !important;
}

/* Chips actifs : fond = couleur de catégorie + texte blanc, tous états. */
.defismed-map-wrap .defismed-map-chip.is-active,
.defismed-map-wrap .defismed-map-chip.is-active:hover,
.defismed-map-wrap .defismed-map-chip.is-active:focus,
.defismed-map-wrap .defismed-map-chip.is-active:active {
	background: var( --dm-chip-color, var( --dm-accent ) ) !important;
}

.defismed-map-wrap .defismed-map-chip.is-active span,
.defismed-map-wrap .defismed-map-chip.is-active:hover span,
.defismed-map-wrap .defismed-map-chip.is-active:focus span,
.defismed-map-wrap .defismed-map-chip.is-active:active span {
	color: #fff !important;
}

/* Tags (mêmes états que les chips : survol / focus / clic couverts). */
.defismed-map-wrap .defismed-map-tag {
	color: var( --dm-muted ) !important;
}

.defismed-map-wrap .defismed-map-tag:hover,
.defismed-map-wrap .defismed-map-tag:focus,
.defismed-map-wrap .defismed-map-tag:active {
	background: var( --dm-surface ) !important;
	border-color: var( --dm-primary ) !important;
	color: var( --dm-text ) !important;
}

.defismed-map-wrap .defismed-map-tag.is-active,
.defismed-map-wrap .defismed-map-tag.is-active:hover,
.defismed-map-wrap .defismed-map-tag.is-active:focus,
.defismed-map-wrap .defismed-map-tag.is-active:active {
	background: var( --dm-accent ) !important;
	border-color: var( --dm-accent ) !important;
	color: #fff !important;
}

.defismed-map-wrap .defismed-map-tag.is-static,
.defismed-map-wrap .defismed-map-tag.is-static:hover,
.defismed-map-wrap .defismed-map-tag.is-static:focus,
.defismed-map-wrap .defismed-map-tag.is-static:active {
	background: var( --dm-surface ) !important;
	border-color: var( --dm-border ) !important;
	color: var( --dm-text ) !important;
}

/* Popup « Voir les détails » : bouton d'action vert (jamais rose). */
.defismed-map-wrap .dm-popup__more,
.dm-popup .dm-popup__more {
	background: var( --dm-accent ) !important;
	color: #fff !important;
}

.defismed-map-wrap .dm-popup__more:hover,
.dm-popup .dm-popup__more:hover {
	background: var( --dm-primary-hover ) !important;
	color: #fff !important;
}

/* Croix de fermeture du panneau : neutre en base, vert au survol (jamais le
   rose du thème ni le fond rose). */
.defismed-map-wrap .defismed-map-panel__close {
	background: rgba( 255, 255, 255, 0.9 ) !important;
	color: var( --dm-text ) !important;
}

.defismed-map-wrap .defismed-map-panel__close:hover {
	background: #fff !important;
	color: var( --dm-primary ) !important;
}

/* Boutons du panneau détail (Itinéraire = primaire, Partager = secondaire).
   Base lisible : texte blanc sur vert / texte vert sur blanc. Survol = bleu
   DéfisMed. Texte foncé sur le bleu : blanc sur #47C4E4 échoue WCAG AA
   (cf. design.md), on garde donc le teal foncé #13473E (ratio ~5,2:1). */
.defismed-map-wrap .defismed-map-btn,
.defismed-map-wrap .defismed-map-btn span {
	color: var( --dm-primary ) !important;
}

/* Classes combinées (0,3,0) pour battre la règle `.defismed-map-btn` verte
   ci-dessus, l'ancre Itinéraire portant les deux classes. */
.defismed-map-wrap .defismed-map-btn.defismed-map-btn--primary,
.defismed-map-wrap .defismed-map-btn.defismed-map-btn--primary span {
	color: #fff !important;
}

/* `hover: hover` : sur écran tactile, un `:hover` reste collé après le tap —
   le bouton gardait sa couleur de survol une fois relâché.
   Seul le FOND change au survol : la couleur du texte reste celle de l'état de
   base. Un changement simultané fond + texte se lisait toujours en deux temps
   (le thème n'anime pas les deux à la même vitesse) et faisait « clignoter »
   le libellé. */
@media ( hover: hover ) {
	.defismed-map-wrap .defismed-map-btn:hover {
		background: var( --dm-surface ) !important;
		border-color: var( --dm-primary ) !important;
	}

	.defismed-map-wrap .defismed-map-btn.defismed-map-btn--primary:hover {
		background: var( --dm-primary-hover ) !important;
		border-color: var( --dm-primary-hover ) !important;
	}
}

/* Le thème pose sa propre transition (plus lente) sur les <button> : le fond
   traînait derrière le texte. Même durée imposée au bouton et à son <span>. */
.defismed-map-wrap .defismed-map-btn,
.defismed-map-wrap .defismed-map-btn span,
.defismed-map-wrap .defismed-map-panel__exp,
.defismed-map-wrap .defismed-map-panel__exp span,
.defismed-map-wrap .defismed-map-panel__exp-cta,
.defismed-map-wrap .defismed-map-panel__exp-cta span {
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease !important;
}

/* Au focus seul (après un clic, sans survol) : on rétablit l'apparence de base
   au lieu du fond rose du thème (bug « Lien copié ! » puis « Partager » qui
   restait rose, et « Suivant » du formulaire d'expérience qui virait au rose
   après le clic). Les deux variantes sont couvertes. */
.defismed-map-wrap .defismed-map-btn:not( .defismed-map-btn--primary ):focus:not( :hover ) {
	background: #fff !important;
	border-color: var( --dm-primary ) !important;
}

.defismed-map-wrap .defismed-map-btn.defismed-map-btn--primary:focus:not( :hover ) {
	background: var( --dm-accent ) !important;
	border-color: var( --dm-accent ) !important;
}

/* Bulles de clustering (« heatmap ») : palette bleu DéfisMed au lieu du
   dégradé vert/jaune/orange par défaut. Numéro en teal foncé pour le contraste. */
.defismed-map-wrap .marker-cluster-small {
	background-color: rgba( 71, 196, 228, 0.35 );
}
.defismed-map-wrap .marker-cluster-small div {
	background-color: rgba( 71, 196, 228, 0.75 );
}
.defismed-map-wrap .marker-cluster-medium {
	background-color: rgba( 71, 196, 228, 0.4 );
}
.defismed-map-wrap .marker-cluster-medium div {
	background-color: rgba( 71, 196, 228, 0.85 );
}
.defismed-map-wrap .marker-cluster-large {
	background-color: rgba( 71, 196, 228, 0.45 );
}
.defismed-map-wrap .marker-cluster-large div {
	background-color: rgba( 71, 196, 228, 0.95 );
}
.defismed-map-wrap .marker-cluster div {
	color: var( --dm-tertiary-dark );
	font-weight: 600;
}

/* Barre de recherche : pas de contour noir hérité du thème (input[type=search])
   ni d'anneau bleu au focus. Le focus se matérialise par un anneau vert arrondi
   sur le conteneur pilule (box-shadow, suit le border-radius, pas de décalage). */
.defismed-map-wrap .defismed-map-search__input {
	border: 0 !important;
	outline: none !important;
	box-shadow: none !important;
	background: transparent !important;
}

.defismed-map-wrap .defismed-map-search {
	transition: box-shadow 0.15s ease;
}

.defismed-map-wrap .defismed-map-search:focus-within {
	box-shadow: 0 0 0 2px rgba( 30, 124, 110, 0.45 );
}

/* Bouton « Me localiser » : icône verte sur fond blanc en base ; au survol /
   focus / clic, fond vert + icône blanche (jamais le rose du thème). */
.defismed-map-wrap .defismed-map-geoloc {
	color: var( --dm-accent ) !important;
}

.defismed-map-wrap .defismed-map-geoloc:hover,
.defismed-map-wrap .defismed-map-geoloc:focus,
.defismed-map-wrap .defismed-map-geoloc:active {
	background: var( --dm-primary ) !important;
	color: #fff !important;
}

/* Bouton « Plus de filtres » (mobile) : fond blanc, texte vert, contour vert.
   Neutralise le rose du thème sur bouton ET span, à tous les états. */
.defismed-map-wrap .defismed-map-more-filters,
.defismed-map-wrap .defismed-map-more-filters span,
.defismed-map-wrap .defismed-map-more-filters:hover,
.defismed-map-wrap .defismed-map-more-filters:hover span,
.defismed-map-wrap .defismed-map-more-filters:focus,
.defismed-map-wrap .defismed-map-more-filters:focus span,
.defismed-map-wrap .defismed-map-more-filters:active,
.defismed-map-wrap .defismed-map-more-filters:active span {
	background: #fff !important;
	color: var( --dm-primary ) !important;
}

/* Le badge du bouton garde son fond vert plein + texte blanc. */
.defismed-map-wrap .defismed-map-more-filters .defismed-map-more-filters__badge {
	background: var( --dm-primary ) !important;
	color: #fff !important;
}

/* --- Filtres latéraux (à gauche de la carte) --- */
/* Libellés de groupe : masqués en disposition « au-dessus », visibles à gauche. */
.defismed-map-group__label {
	display: none;
}

/* Applique la disposition latérale sur desktop uniquement ; sur mobile les
   filtres repassent au-dessus de la carte (media query max-width plus bas). */
@media ( min-width: 769px ) {
	/* L'enveloppe Elementor du shortcode se dimensionne à son contenu : en mode
	   latéral la carte (div vide) n'a pas de largeur intrinsèque, donc le flex
	   s'effondre sur la seule sidebar et la carte disparaît. On force la pleine
	   largeur de l'enveloppe pour rendre la place à la carte. */
	.elementor-widget-shortcode:has( .defismed-map-wrap.is-filters-left ),
	.elementor-widget-shortcode:has( .defismed-map-wrap.is-filters-left ) .elementor-shortcode {
		width: 100%;
	}

	.defismed-map-wrap.is-filters-left {
		width: 100%;
	}

	.defismed-map-wrap.is-filters-left .defismed-map-layout {
		display: flex;
		width: 100%;
		align-items: flex-start;
		gap: 0;
	}

	.defismed-map-wrap.is-filters-left .defismed-map-filters {
		flex: 0 0 300px;
		width: 300px;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		/* Panneau plein blanc collé à la carte : pas de carte flottante. */
		margin: 0;
		border-radius: 0;
		box-shadow: none;
		padding: 16px;
		gap: 6px;
		/* Même hauteur que la carte ; la liste scrolle à l'intérieur si besoin. */
		height: var( --dm-map-height, 80vh );
		max-height: var( --dm-map-height, 80vh );
		overflow-y: auto;
		scrollbar-width: thin;
		scrollbar-color: var( --dm-tertiary ) transparent;
	}

	.defismed-map-wrap.is-filters-left .defismed-map-filters::-webkit-scrollbar {
		width: 10px;
	}

	.defismed-map-wrap.is-filters-left .defismed-map-filters::-webkit-scrollbar-track {
		margin: 4px 0;
	}

	/* Bordure transparente + background-clip : le pouce apparaît décollé du bord. */
	.defismed-map-wrap.is-filters-left .defismed-map-filters::-webkit-scrollbar-thumb {
		background: var( --dm-border );
		border-radius: var( --dm-radius-pill );
		border: 3px solid transparent;
		background-clip: padding-box;
	}

	.defismed-map-wrap.is-filters-left .defismed-map-stage {
		flex: 1 1 auto;
		min-width: 0;
		height: var( --dm-map-height, 80vh );
	}

	/* Le canvas remplit toute la hauteur du stage (au lieu de sa hauteur inline),
	   pour garantir l'alignement parfait avec la sidebar. */
	.defismed-map-wrap.is-filters-left .defismed-map-canvas {
		height: 100% !important;
	}

	.defismed-map-wrap.is-filters-left .defismed-map-search {
		flex: 0 0 auto;
		width: 100%;
	}

	.defismed-map-wrap.is-filters-left .defismed-map-group__label {
		display: block;
		font-weight: 600;
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: var( --dm-primary );
		margin: 12px 0 4px;
		padding-top: 12px;
		border-top: 1px solid var( --dm-border );
	}

	/* Pas de séparateur avant le tout premier groupe (juste sous la recherche). */
	.defismed-map-wrap.is-filters-left .defismed-map-search + .defismed-map-group__label {
		margin-top: 4px;
		padding-top: 0;
		border-top: 0;
	}

	.defismed-map-wrap.is-filters-left .defismed-map-chips {
		flex-direction: column;
		align-items: stretch;
	}

	.defismed-map-wrap.is-filters-left .defismed-map-chip {
		width: 100%;
		justify-content: flex-start;
	}

	.defismed-map-wrap.is-filters-left .defismed-map-toggles {
		flex-direction: column;
		gap: 8px;
	}

	.defismed-map-wrap.is-filters-left .defismed-map-reset {
		margin-left: 0;
		align-self: flex-start;
	}

	/* Panneau détail ouvert à gauche. */
	.defismed-map-wrap.is-panel-left .defismed-map-panel {
		right: auto;
		left: 0;
		box-shadow: 8px 0 30px rgba( 0, 0, 0, 0.2 );
	}

	.defismed-map-wrap.is-panel-left .dm-slide-start {
		transform: translateX( -100% );
	}
}

/* --- Responsive --- */
@media ( max-width: 768px ) {
	/* Panel: quasi plein écran, slide depuis le bas. */
	.defismed-map-panel {
		width: 100%;
		height: 92%;
		top: auto;
		bottom: 0;
		border-radius: var( --dm-radius-lg ) var( --dm-radius-lg ) 0 0;
	}

	/* Sur mobile, le panneau glisse depuis le bas. */
	.dm-slide-start {
		transform: translateY( 100% );
	}

	.dm-slide-end {
		transform: translateY( 0 );
	}

	.defismed-map-legend {
		max-width: 150px;
	}

	.defismed-map-cards {
		grid-template-columns: 1fr;
	}

	/* Barre de filtres compacte : ligne 1 = recherche + « Plus de filtres »,
	   ligne 2 = chips scrollables horizontalement. */
	.defismed-map-filters {
		gap: 8px;
		flex-wrap: wrap;
	}

	.defismed-map-search {
		flex: 1 1 auto;
		min-width: 0;
	}

	.defismed-map-chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		flex: 1 1 100%;
		order: 3;
	}

	.defismed-map-chips::-webkit-scrollbar {
		display: none;
	}

	.defismed-map-chip {
		flex: 0 0 auto;
	}

	.defismed-map-more-filters {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		border: 1px solid var( --dm-primary );
		background: #fff;
		color: var( --dm-primary );
		font-weight: 600;
		border-radius: var( --dm-radius-pill );
		padding: 7px 16px;
		font-size: 14px;
		cursor: pointer;
		white-space: nowrap;
	}

	.defismed-map-more-filters__badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 18px;
		height: 18px;
		padding: 0 5px;
		border-radius: var( --dm-radius-pill );
		background: var( --dm-primary );
		color: #fff;
		font-size: 12px;
	}

	.defismed-map-sheet-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba( 0, 0, 0, 0.4 );
		z-index: 9998;
	}

	/* La barre de filtres est `position: sticky` avec un z-index bas : elle crée
	   un contexte d'empilement qui plafonnait le bottom sheet sous la légende
	   (z-index 450). On la remonte pour que le sheet et son fond passent devant. */
	.defismed-map-filters {
		z-index: 9990;
	}

	/* Bottom sheet: tout s'empile verticalement et défile, plutôt que de se
	   tasser sur une ligne horizontale illisible. */
	.defismed-map-advanced .defismed-map-toggles {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.defismed-map-advanced .defismed-map-toggle {
		display: flex;
		align-items: center;
		gap: 8px;
		width: 100%;
		padding: 6px 0;
	}

	.defismed-map-advanced .defismed-map-toggle input {
		flex: 0 0 auto;
	}

	.defismed-map-advanced .defismed-map-cf-group {
		width: 100%;
		padding-top: 8px;
		border-top: 1px solid var( --dm-border );
	}

	/* Les options d'un champ à valeurs sont indentées sous son intitulé. */
	.defismed-map-advanced .defismed-map-cf-group .defismed-map-toggle {
		padding-left: 8px;
	}

	.defismed-map-advanced .defismed-map-tags {
		gap: 8px;
	}

	/* Bottom sheet. */
	.defismed-map-advanced {
		display: flex;
		flex-direction: column;
		gap: 14px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
		background: var( --dm-bg );
		border-radius: var( --dm-radius-lg ) var( --dm-radius-lg ) 0 0;
		box-shadow: 0 -8px 30px rgba( 19, 71, 62, 0.2 );
		padding: 16px;
		max-height: 80%;
		overflow-y: auto;
		transform: translateY( 100% );
		transition: transform 0.28s ease;
	}

	.defismed-map-advanced.is-open {
		transform: translateY( 0 );
	}

	.defismed-map-advanced__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-weight: 600;
		font-size: 16px;
	}

	.defismed-map-advanced__close {
		border: 0;
		background: transparent;
		font-size: 26px;
		line-height: 1;
		cursor: pointer;
		color: var( --dm-muted );
	}

	.defismed-map-advanced .defismed-map-tags {
		flex-wrap: wrap;
	}

	.defismed-map-advanced .defismed-map-reset {
		margin-left: 0;
		align-self: flex-start;
	}

	.defismed-map-advanced__apply {
		display: block;
		width: 100%;
		border: 0;
		background: var( --dm-accent );
		color: #fff;
		font-weight: 600;
		border-radius: var( --dm-radius-pill );
		padding: 12px;
		font-size: 15px;
		cursor: pointer;
	}
}

/* --- Durcissement anti-thème : composants ajoutés en Phase 5 ----------------
   Rappel (cf. .claude/rules/design.md) : le thème Elementor/Hello colore TOUT
   <button> en rose #cc3366, au repos comme au survol et au focus. Chaque
   nouveau bouton du plugin doit donc être neutralisé explicitement ici, sinon
   il ressort rose. Ces règles arrivent volontairement en fin de feuille pour
   passer devant le bloc de durcissement générique plus haut. */

/* Visionneuse de galerie (page accueillant) : pastilles blanches, glyphe
   centré, survol gris très clair. */
.defismed-map-wrap .defismed-single__lightbox button,
.defismed-map-wrap .defismed-single__lightbox button span {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff !important;
	color: var( --dm-tertiary-dark ) !important;
	border: 0 !important;
	padding: 0 !important;
}

.defismed-map-wrap .defismed-single__lightbox button:hover,
.defismed-map-wrap .defismed-single__lightbox button:focus {
	background: var( --dm-surface ) !important;
	color: var( --dm-primary ) !important;
}

/* Croix de fermeture de l'invite d'adhésion. */
.defismed-map-wrap .defismed-map-fav-invite__close,
.defismed-map-wrap .defismed-map-fav-invite__close:hover,
.defismed-map-wrap .defismed-map-fav-invite__close:focus {
	background: none !important;
	border: 0 !important;
	color: var( --dm-muted ) !important;
}

.defismed-map-wrap .defismed-map-fav-invite__close:hover {
	color: var( --dm-primary ) !important;
}

/* --- Coup de cœur actif ----------------------------------------------------
   L'état « aimé » doit se lire d'un coup d'œil : cœur plein rouge, fond rosé
   très clair, bordure rouge. Rouge sémantique (--dm-heart), pas une couleur de
   marque. Déclaré après le durcissement générique des .defismed-map-btn, qui
   forcerait sinon le vert. */
.defismed-map-wrap .defismed-map-fav.is-fav,
.defismed-map-wrap .defismed-map-fav.is-fav span {
	color: var( --dm-heart ) !important;
}

.defismed-map-wrap .defismed-map-fav.is-fav {
	background: #fdeef0 !important;
	border-color: var( --dm-heart ) !important;
}

@media ( hover: hover ) {
	.defismed-map-wrap .defismed-map-fav.is-fav:hover,
	.defismed-map-wrap .defismed-map-fav.is-fav:hover span {
		background: var( --dm-heart ) !important;
		border-color: var( --dm-heart ) !important;
		color: #fff !important;
	}
}

/* Cœur légèrement plus gros que le libellé, pour porter l'état. */
.defismed-map-fav > span[aria-hidden="true"] {
	font-size: 18px;
	line-height: 1;
}

/* Bouton d'ouverture d'un champ « Liste déroulante » (filtre repliable) :
   neutralise le rose du thème sur bouton ET spans imbriqués, aux trois états. */
.defismed-map-wrap .defismed-map-cf-group__toggle,
.defismed-map-wrap .defismed-map-cf-group__toggle span {
	color: var( --dm-primary ) !important;
	background: var( --dm-neutral, #fff );
}

.defismed-map-wrap .defismed-map-cf-group__toggle .defismed-map-cf-group__placeholder,
.defismed-map-wrap .defismed-map-cf-group__toggle .defismed-map-cf-group__hint {
	color: var( --dm-muted, #6b7876 ) !important;
}

.defismed-map-wrap .defismed-map-cf-group__toggle .defismed-map-cf-group__badge {
	color: #fff !important;
	background: var( --dm-primary ) !important;
}

@media ( hover: hover ) {
	.defismed-map-wrap .defismed-map-cf-group__toggle:hover,
	.defismed-map-wrap .defismed-map-cf-group__toggle:hover span {
		color: var( --dm-primary ) !important;
	}
	.defismed-map-wrap .defismed-map-cf-group__toggle:hover .defismed-map-cf-group__badge {
		color: #fff !important;
	}
}

.defismed-map-wrap .defismed-map-cf-group__toggle:focus,
.defismed-map-wrap .defismed-map-cf-group__toggle:focus span {
	color: var( --dm-primary ) !important;
}
.defismed-map-wrap .defismed-map-cf-group__toggle:focus .defismed-map-cf-group__badge {
	color: #fff !important;
}

/* --- Pop-up d'adhésion (bandeau bas, visiteurs non connectés) --- */
.defismed-membership-popup {
	position: fixed;
	left: 50%;
	bottom: 16px;
	transform: translateX( -50% );
	z-index: 9998;
	display: flex;
	align-items: center;
	gap: 20px;
	width: min( 720px, calc( 100vw - 32px ) );
	padding: 20px 24px;
	padding-right: 48px;
	background: var( --dm-bg );
	border: 1px solid var( --dm-border );
	border-left: 4px solid var( --dm-primary );
	border-radius: var( --dm-radius-md );
	box-shadow: 0 12px 40px rgba( 19, 71, 62, 0.25 );
	animation: dm-popup-in 0.35s ease both;
}

@keyframes dm-popup-in {
	from { transform: translate( -50%, 20px ); opacity: 0; }
	to   { transform: translate( -50%, 0 ); opacity: 1; }
}

.defismed-membership-popup__close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	border-radius: 999px;
	color: var( --dm-muted );
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.defismed-membership-popup__close:hover {
	background: var( --dm-surface );
	color: var( --dm-primary );
}

.defismed-membership-popup__body {
	flex: 1;
	min-width: 0;
}

.defismed-membership-popup__title {
	margin: 0 0 4px;
	font-size: 17px;
	line-height: 1.25;
	color: var( --dm-primary );
}

.defismed-membership-popup__lead {
	margin: 0 0 8px;
	font-size: 14px;
	color: var( --dm-text );
}

.defismed-membership-popup__list {
	margin: 0;
	padding-left: 18px;
	font-size: 13px;
	color: var( --dm-muted );
	line-height: 1.5;
}

.defismed-membership-popup__list li {
	margin: 0;
}

.defismed-membership-popup__cta {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

@media ( max-width: 640px ) {
	.defismed-membership-popup {
		flex-direction: column;
		align-items: center;
		gap: 12px;
		bottom: 8px;
		padding: 16px 18px 18px;
		width: calc( 100vw - 16px );
		text-align: center;
	}
	.defismed-membership-popup__body {
		text-align: center;
	}
	.defismed-membership-popup__list {
		list-style: none;
		padding-left: 0;
	}
	.defismed-membership-popup__cta {
		align-self: stretch;
	}
	.defismed-membership-popup__cta .defismed-map-btn {
		width: 100%;
		justify-content: center;
	}
}

/* Neutralisation du thème (rose #cc3366) pour le bouton fermer du pop-up d'adhésion. */
.defismed-map-wrap .defismed-membership-popup__close,
.defismed-map-wrap .defismed-membership-popup__close span {
	background: transparent !important;
	color: var( --dm-muted ) !important;
	border: 0 !important;
}

@media ( hover: hover ) {
	.defismed-map-wrap .defismed-membership-popup__close:hover,
	.defismed-map-wrap .defismed-membership-popup__close:hover span {
		background: var( --dm-surface ) !important;
		color: var( --dm-primary ) !important;
	}
}

.defismed-map-wrap .defismed-membership-popup__close:focus,
.defismed-map-wrap .defismed-membership-popup__close:focus span {
	background: transparent !important;
	color: var( --dm-muted ) !important;
}

/* Filtre par date (champ perso daterange). */
.defismed-map-toggle--date {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.defismed-map-toggle--date .defismed-map-toggle__label {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 14px;
}

.defismed-map-date-input {
	border: 1px solid var( --dm-border );
	border-radius: var( --dm-radius-sm );
	background: #fff;
	padding: 4px 8px;
	font-size: 13px;
	color: var( --dm-text );
	font-family: inherit;
}

.defismed-map-date-clear {
	width: 20px;
	height: 20px;
	border: 0;
	background: transparent;
	color: var( --dm-muted );
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
}

.defismed-map-wrap .defismed-map-date-clear,
.defismed-map-wrap .defismed-map-date-clear span {
	background: transparent !important;
	color: var( --dm-muted ) !important;
}

@media ( hover: hover ) {
	.defismed-map-wrap .defismed-map-date-clear:hover,
	.defismed-map-wrap .defismed-map-date-clear:hover span {
		background: var( --dm-surface ) !important;
		color: var( --dm-primary ) !important;
	}
}