.sdm-wrap {
	--sdm-primary: #A8542E;
	--sdm-marker: #6E3B23;
	--sdm-cream: #F7F3ED;
	--sdm-dark: #2B1810;
	--sdm-border: #E4DDD2;
	--sdm-muted: #8a7d6c;
	font-family: var(--sdm-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
	color: #2B2119;
	max-width: 1400px;
	margin: 0 auto;
	padding: var(--sdm-search-wrap-padding, 0);
}

.sdm-wrap * { box-sizing: border-box; }

/* Reset défensif : neutralise les styles globaux du thème/page builder
   (largeur 100%, display block, marges, listes à puces...) qui peuvent
   s'appliquer aux boutons/inputs/listes génériques d'Elementor ou du thème. */
.sdm-wrap button,
.sdm-wrap input,
.sdm-wrap select,
.sdm-wrap a {
	all: revert;
	box-sizing: border-box;
	font-family: inherit;
}
/* Le reset ci-dessus ("all: revert") s'applique aussi aux boutons/liens internes
   de Leaflet (zoom, popup...) et leur fait perdre leur mise en forme d'origine —
   on la restaure explicitement en !important pour ces éléments précis plutôt que
   d'exclure ".leaflet-container" du reset (qui augmenterait sa spécificité au
   point de l'emporter ensuite sur nos propres couleurs de liens ci-dessous). */
.sdm-wrap ul, .sdm-wrap ol { list-style: none; margin: 0; padding: 0; }
.sdm-wrap h1, .sdm-wrap h2, .sdm-wrap h3, .sdm-wrap h4 { margin: 0; }
.sdm-wrap button { cursor: pointer; background: none !important; border: none; }
.sdm-wrap a { text-decoration: none; color: inherit; }

/* Composants indépendants [sdm_carte] / [sdm_liste] — mêmes variables et même
   reset défensif que .sdm-wrap ci-dessus (voir commentaires plus haut), pour
   un rendu identique au composant combiné bien qu'ils vivent hors de
   .sdm-wrap. --sdm-primary est déjà global (:root, voir class-sdm-shortcode.php)
   donc pas répété ici. */
.sdm-modular-map-wrap, .sdm-modular-list-wrap {
	--sdm-marker: #6E3B23;
	--sdm-cream: #F7F3ED;
	--sdm-dark: #2B1810;
	--sdm-border: #E4DDD2;
	--sdm-muted: #8a7d6c;
	font-family: var(--sdm-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
	color: #2B2119;
}
.sdm-modular-map-wrap *, .sdm-modular-list-wrap * { box-sizing: border-box; }
.sdm-modular-list-wrap button,
.sdm-modular-list-wrap input,
.sdm-modular-list-wrap select,
.sdm-modular-list-wrap a {
	all: revert;
	box-sizing: border-box;
	font-family: inherit;
}
.sdm-modular-list-wrap ul, .sdm-modular-list-wrap ol { list-style: none; margin: 0; padding: 0; }
.sdm-modular-list-wrap h1, .sdm-modular-list-wrap h2, .sdm-modular-list-wrap h3, .sdm-modular-list-wrap h4 { margin: 0; }
.sdm-modular-list-wrap button { cursor: pointer; background: none !important; border: none; }
.sdm-modular-list-wrap a { text-decoration: none; color: inherit; }
.sdm-modular-map {
	width: 100%;
	border: 1px solid var(--sdm-border, #E4DDD2);
	border-radius: 10px;
	background: var(--sdm-cream, #F7F3ED);
	box-shadow: 0 2px 16px rgba(43,24,16,.07);
}

/* Utilitaire partagé — bascule entre la carte "Trouver un —" et le
   questionnaire "Je cherche par envie" quand les deux sont sur la même page
   (voir frontend.js / envie.js) : masque complètement l'un des deux blocs
   sans devoir jongler avec des styles inline dans deux fichiers séparés. */
.sdm-hidden { display: none !important; }
/* Cas précis où .sdm-hidden doit l'emporter sur ".sdm-tabs .sdm-tab-mobile-only"
   (même spécificité à 2 classes, donc l'ordre dans le fichier déciderait sinon
   — un sélecteur d'ID tranche sans ambiguïté) — utilisé pour masquer l'onglet
   "Liste" en mode "Je cherche par envie" sur mobile (retour du 24/08), où il
   n'a pas lieu d'être. */
#sdm-tab-liste.sdm-hidden { display: none !important; }

/* Onglets "Carte interactive" / "Je cherche par envie" */
.sdm-tabs {
	display: flex;
	gap: 22px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--sdm-border, #E4DDD2);
}
/* Sélecteurs à deux classes (".sdm-tabs .sdm-tab" plutôt que ".sdm-tab" seul) :
   volontaire, pas juste stylistique — nécessaire pour l'emporter de façon fiable
   sur le reset ".sdm-wrap a { all:revert }" plus haut (même mécanique que pour
   les liens de carte plus bas). Idem pour .sdm-popup-site et .sdm-btn-primary. */
.sdm-tabs .sdm-tab {
	display: inline-block;
	padding: 0 0 10px;
	font-size: 14px;
	color: #9a8b78 !important;
	cursor: pointer;
	background: none !important;
	border-radius: 0 !important;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color .15s ease;
}
.sdm-tabs .sdm-tab:hover { color: var(--sdm-primary, #A8542E) !important; }
.sdm-tabs .sdm-tab-active {
	color: var(--sdm-primary, #A8542E) !important;
	font-weight: 600;
	border-bottom-color: var(--sdm-primary, #A8542E);
}
/* "Liste" n'a de sens que sur mobile (desktop montre déjà carte + liste côte à
   côte, sans besoin de basculer de l'une à l'autre). Sélecteur à deux classes
   + !important : nécessaire pour l'emporter sur ".sdm-tabs .sdm-tab" ci-dessus
   (même spécificité, deux classes) — un simple ".sdm-tab-mobile-only" seul
   perdait face à lui et restait visible sur desktop malgré "display:none".
   Même mécanique que pour ".sdm-tabs .sdm-tab" face au reset all:revert. */
.sdm-tabs .sdm-tab-mobile-only { display: none !important; }
@media (max-width: 900px) {
	.sdm-tabs .sdm-tab-mobile-only { display: inline-block !important; }
}

/* Barre de recherche + selects */
.sdm-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 14px;
}
.sdm-search {
	position: relative;
	flex: 1 1 240px;
}
.sdm-search input {
	width: 100%;
	padding: 10px 14px 10px 36px;
	border: 1px solid var(--sdm-border, #E4DDD2);
	border-radius: 8px;
	font-size: 14px;
	background: #fff;
}
.sdm-icon-search {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	opacity: .45;
	font-size: 13px;
}
.sdm-toolbar select {
	padding: 10px 32px 10px 15px !important;
	border: 1px solid var(--sdm-border, #E4DDD2) !important;
	border-radius: 8px !important;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%238a7d6c' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") no-repeat right 15px center !important;
	appearance: none;
	-webkit-appearance: none;
	font-size: 13.5px !important;
	color: #4a3f34 !important;
	min-width: 150px;
	flex: 0 1 200px;
	height: 42px;
	box-sizing: border-box;
	line-height: 1.2;
}
.sdm-near-btn {
	display: flex !important;
	align-items: center;
	gap: 7px !important;
	padding: 10px 15px !important;
	border: 1px solid var(--sdm-border, #E4DDD2) !important;
	border-radius: 8px !important;
	background: #fff !important;
	font-size: 13.5px !important;
	color: #4a3f34 !important;
	cursor: pointer;
	white-space: nowrap;
	flex: 0 0 auto;
}
.sdm-near-btn svg { flex-shrink: 0; color: #8a7d6c; }
.sdm-near-btn:hover { border-color: var(--sdm-primary) !important; color: var(--sdm-primary) !important; }
.sdm-near-btn:hover svg { color: var(--sdm-primary); }
.sdm-near-btn-active { background: var(--sdm-dark, #2B1810) !important; border-color: var(--sdm-dark, #2B1810) !important; color: #fff !important; }
.sdm-near-btn-active svg { color: #fff; }
.sdm-near-btn[disabled] { opacity: .6; cursor: wait; }

.sdm-reset-link {
	display: flex !important;
	align-items: center;
	gap: 6px !important;
	padding: 6px 4px !important;
	background: none !important;
	border: none !important;
	color: #2C1810 !important;
	font-size: 13px !important;
	cursor: pointer;
	flex-shrink: 0;
}
.sdm-reset-link svg { flex-shrink: 0; }
.sdm-reset-link:hover { color: var(--sdm-primary) !important; }

/* Menu "Type de retraite" — bouton + panneau de cases à cocher cumulables,
   remplace l'ancienne rangée de pills (redondante avec ce même menu). */
.sdm-dropdown { position: relative; flex: 0 1 200px !important; min-width: 150px; }
.sdm-dropdown-btn {
	position: relative;
	width: 100% !important;
	display: flex !important;
	align-items: center;
	/* Même box model que .sdm-toolbar select ci-dessus (padding identique des
	   deux côtés) plutôt qu'un espacement flexbox à part : c'est ce qui
	   garantissait un rendu jamais tout à fait identique malgré des valeurs
	   proches (retour du 23/08 — "toujours pas réglé au niveau du padding").
	   La flèche est donc positionnée en absolu ci-dessous (voir .sdm-dropdown-
	   btn svg), exactement comme le fond de flèche du select. Toutes les
	   propriétés de boîte en !important : la largeur ne l'était pas encore
	   (contrairement au reste), seule propriété que le thème pouvait donc
	   encore écraser malgré tout le reste déjà correct.
	*/
	padding: 10px 32px 10px 15px !important;
	border: 1px solid var(--sdm-border, #E4DDD2) !important;
	border-radius: 8px !important;
	background: #fff !important;
	font-size: 13.5px !important;
	color: #4a3f34 !important;
	cursor: pointer;
	white-space: nowrap;
	height: 42px !important;
	box-sizing: border-box !important;
	line-height: 1.2;
	min-width: 0;
	max-width: none !important;
	margin: 0 !important;
	flex: 1 1 auto;
}
.sdm-dropdown-btn svg {
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	flex-shrink: 0;
	color: #8a7d6c;
}
.sdm-dropdown-btn-active { border-color: var(--sdm-primary) !important; color: var(--sdm-primary) !important; }
.sdm-dropdown-btn-active svg { color: var(--sdm-primary); }
.sdm-dropdown-panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 20;
	width: 300px;
	max-height: 400px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid var(--sdm-border, #E4DDD2);
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(43,24,16,.14);
	padding: 14px 16px;
}
.sdm-dropdown-group { margin-bottom: 14px; }
.sdm-dropdown-group:last-of-type { margin-bottom: 4px; }
.sdm-dropdown-group-label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #9a8b78;
	margin-bottom: 8px;
}
.sdm-dropdown-check {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	color: #2B2119;
	padding: 5px 0;
	cursor: pointer;
}
.sdm-dropdown-check input { margin: 0; accent-color: var(--sdm-primary); cursor: pointer; }
.sdm-dropdown-footer {
	border-top: 1px solid var(--sdm-border, #E4DDD2);
	padding-top: 10px;
	text-align: right;
}
.sdm-dropdown-footer button {
	font-size: 12.5px !important;
	color: var(--sdm-primary) !important;
	cursor: pointer;
}
.sdm-dropdown-footer button:hover { text-decoration: underline; }

/* Layout carte / liste */
.sdm-body {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: var(--sdm-search-body-gap, 24px);
	align-items: start;
}
.sdm-map-col { position: sticky; top: 20px; max-width: var(--sdm-search-map-max-width, none); }
#sdm-map {
	height: var(--sdm-search-map-height-desktop, 650px);
	width: 100%;
	border: 1px solid var(--sdm-border, #E4DDD2);
	border-radius: 10px;
	background: var(--sdm-cream, #F7F3ED);
	box-shadow: 0 2px 16px rgba(43,24,16,.07);
	z-index: 1;
}
/* Panneau "Je cherche par envie" intégré (retour du 24/08) : mêmes dimensions
   que la carte qu'il remplace, pour que la bascule entre les deux onglets ne
   fasse sauter ni redimensionner rien autour — jamais l'impression de changer
   de page. Défilement interne si le contenu dépasse (plusieurs options avec
   description peuvent être plus hautes qu'une carte à hauteur fixe). */
#sdm-envie-pane {
	height: var(--sdm-search-map-height-desktop, 650px);
	width: 100%;
	border: 1px solid var(--sdm-border, #E4DDD2);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 2px 16px rgba(43,24,16,.07);
	box-sizing: border-box;
	padding: 28px;
	overflow-y: auto;
}
@media (max-width: 900px) {
	/* Hauteur naturelle plutôt que calquée sur celle, fixe et réduite, de la
	   carte mobile : un questionnaire à plusieurs options a besoin de bien
	   plus de place verticale qu'une carte, la page défile normalement plutôt
	   que de tout comprimer dans un petit cadre à défilement interne. */
	#sdm-envie-pane { height: auto; min-height: 320px; padding: 20px 16px; }
}
.sdm-legend {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
	gap: 10px 18px;
	margin-top: 10px;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid var(--sdm-border, #E4DDD2);
	border-radius: 10px;
	font-size: 12px;
	color: #6b5f52;
}
.sdm-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sdm-legend-item i {
	width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0;
}

.sdm-list-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
	font-size: 13px;
	color: #6b5f52;
}
.sdm-mobile-toggle { display: none !important; }

.sdm-list, .sdm-modular-list {
	display: flex;
	flex-direction: column;
	gap: var(--sdm-list-card-gap, 8px);
	/* Volontairement pas de max-height/overflow ici : un scroll interne à la
	   liste donnait l'impression d'être dans une seconde page scrollable.
	   La liste s'étend donc avec la page normale ; la carte reste visible
	   grâce à .sdm-map-col { position: sticky } ci-dessous. */
}

/* Propriétés de mise en page forcées en !important : une carte de liste est
   un flex-row (image alignée verticalement au centre du texte) — un thème ou
   un reset Elementor qui applique display:block/align-items par défaut aux
   divs cassait cet alignement en production, même si rien ne le fait ici en
   apparence (même piège déjà rencontré avec les boutons — voir plus haut). */
.sdm-card {
	display: flex !important;
	align-items: center !important;
	gap: var(--sdm-list-card-gap, 8px) !important;
	padding: var(--sdm-list-card-padding, 12px) !important;
	border: 1px solid var(--sdm-border, #E4DDD2);
	border-radius: 10px;
	background: #fff;
	transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
	cursor: pointer;
}
.sdm-card:hover, .sdm-card.sdm-card-active {
	border-color: var(--sdm-border-strong, #D8CCBA);
	background: var(--sdm-cream, #F7F3ED);
	box-shadow: 0 4px 14px rgba(43,24,16,.08);
}
.sdm-card-thumb img, .sdm-thumb-placeholder {
	width: var(--sdm-list-image-size, 100px); height: var(--sdm-list-image-size, 100px); border-radius: 8px; object-fit: cover; background: #EDE8DF; flex-shrink: 0;
}
.sdm-card-body { flex: 1; min-width: 0; }
/* Toutes les tailles ci-dessous en !important : un thème/reset (Elementor,
   Astra...) qui cible génériquement h3/p/a avec une taille fixe passerait
   sinon devant nos variables réglables en back-office — piège déjà rencontré
   sur .sdm-single-details p (bloqué à 15px, retour du 21/08). */
.sdm-card-body h3 { margin: 0 0 var(--sdm-field-row-gap, 3px); font-family: var(--sdm-font-heading, Georgia, serif); font-size: var(--sdm-size-name, 15px) !important; font-style: italic; line-height: 1.25; }
.sdm-card-body h3 a { color: #2C1810; text-decoration: none; }
.sdm-card-meta { margin: 0 0 var(--sdm-field-row-gap, 3px); font-size: var(--sdm-size-region, 11px) !important; font-weight: 600; display: flex; align-items: center; gap: 5px; font-family: var(--sdm-font-body, sans-serif); }
.sdm-card-order-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.sdm-card-row {
	margin: 0 0 var(--sdm-field-row-gap, 3px);
	font-size: var(--sdm-size-address, 12px) !important;
	color: #2C1810;
	line-height: 1.4;
	display: flex;
	align-items: center;
	gap: 5px;
}
.sdm-card-row svg { flex-shrink: 0; color: #9a8b78; width: var(--sdm-list-icon-size, 14px) !important; height: var(--sdm-list-icon-size, 14px) !important; }
.sdm-card-row { gap: var(--sdm-icon-text-gap, 5px); }
.sdm-card-phone svg { width: var(--sdm-icon-size-phone, 14px) !important; height: var(--sdm-icon-size-phone, 14px) !important; }
.sdm-card-contact svg { width: var(--sdm-icon-size-email, 14px) !important; height: var(--sdm-icon-size-email, 14px) !important; }
.sdm-card-website svg { width: var(--sdm-icon-size-site, 14px) !important; height: var(--sdm-icon-size-site, 14px) !important; }
.sdm-card-row a { color: #2C1810; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: inherit !important; }
.sdm-card-row a:hover { text-decoration: underline; color: var(--sdm-primary); }
.sdm-card-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: inherit !important; }
.sdm-card-address { margin-bottom: var(--sdm-field-row-gap, 3px); font-size: var(--sdm-size-address, 12px) !important; }
.sdm-card-phone { font-size: var(--sdm-size-phone, 12px) !important; }
.sdm-card-contact { font-size: var(--sdm-size-contact, 12px) !important; }
.sdm-card-website { font-size: var(--sdm-size-website, 12px) !important; }
/* Variante compacte (aperçu accueil) : nom + ordre/région seulement, aucun
   espace superflu — un seul bloc d'information visuel, pas une fiche.
   Conservée au cas où (non utilisée par défaut depuis le retour du 21/08 :
   l'aperçu accueil affiche désormais des cartes complètes, comme la liste
   de "Trouver un —", pour que qui veut plus de détails les ait déjà). */
.sdm-card-compact { padding: 12px 14px !important; gap: 0 !important; }
.sdm-card-compact .sdm-card-body h3 { margin-bottom: 2px; }
.sdm-card-compact .sdm-card-meta { margin: 0; font-weight: 500; }
.sdm-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.sdm-badge {
	font-size: 9.5px;
	letter-spacing: .01em;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--sdm-cream, #F7F3ED);
	border: 1px solid var(--sdm-border, #E4DDD2);
	color: #2C1810;
	white-space: nowrap;
}
.sdm-card-arrow {
	color: var(--sdm-primary);
	font-size: 16px;
	text-decoration: none;
	flex-shrink: 0;
	opacity: .7;
	align-self: center;
	transition: opacity .15s ease, transform .15s ease;
}
.sdm-card:hover .sdm-card-arrow { opacity: 1; transform: translateX(2px); }
.sdm-card-article { margin: 8px 0 0; }
.sdm-card-article a {
	font-size: 12px;
	font-weight: 600;
	color: var(--sdm-primary);
	text-decoration: none;
}
.sdm-card-article a:hover { text-decoration: underline; }
/* Mobile uniquement (retour du 23/08) : sur desktop la carte est déjà visible
   à côté de la liste, ce lien n'aurait pas d'utilité. */
.sdm-card-locate {
	display: none;
	margin-top: 6px;
	font-size: var(--sdm-locate-link-size, 12px) !important;
	font-weight: 600;
	color: var(--sdm-primary) !important;
	text-decoration: underline;
	padding: 0 !important;
}
.sdm-no-results { padding: 40px 20px; text-align: center; color: #8a7d6c; }
.sdm-no-results p { margin: 0 0 14px; }
.sdm-no-results-reset {
	display: inline-flex !important;
	align-items: center;
	gap: 6px !important;
	padding: 8px 18px !important;
	border-radius: 999px !important;
	border: 1px solid var(--sdm-border, #E4DDD2) !important;
	background: #fff !important;
	color: #2C1810 !important;
	font-size: 13px !important;
	cursor: pointer;
}
.sdm-no-results-reset:hover { border-color: var(--sdm-primary) !important; color: var(--sdm-primary) !important; }

/* Squelette de chargement — remplace le texte "Chargement..." par une
   silhouette animée des cartes à venir, pour un retour visuel immédiat sur
   la zone qui se met à jour plutôt qu'un simple mot dans le compteur. */
.sdm-skeleton-card {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding: 22px;
	border: 1px solid var(--sdm-border, #E4DDD2);
	border-radius: 10px;
	background: #fff;
}
.sdm-skeleton-thumb, .sdm-skeleton-lines span {
	background: linear-gradient(90deg, #EDE8DF 25%, #F5F1E9 37%, #EDE8DF 63%);
	background-size: 400% 100%;
	animation: sdm-skeleton-pulse 1.4s ease infinite;
	border-radius: 6px;
	display: block;
}
.sdm-skeleton-thumb { width: var(--sdm-list-image-size, 100px); height: var(--sdm-list-image-size, 100px); flex-shrink: 0; border-radius: 8px; }
.sdm-skeleton-lines { flex: 1; padding-top: 4px; }
.sdm-skeleton-lines span { height: 11px; margin-bottom: 12px; }
.sdm-skeleton-lines span:nth-child(1) { width: 55%; height: 15px; }
.sdm-skeleton-lines span:nth-child(2) { width: 80%; }
.sdm-skeleton-lines span:nth-child(3) { width: 40%; margin-bottom: 0; }
@keyframes sdm-skeleton-pulse {
	0% { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
	.sdm-skeleton-thumb, .sdm-skeleton-lines span { animation: none; background: #EDE8DF; }
}

/* Détails ajoutés en bas du contenu de la fiche individuelle (page theme
   standard) — hors de .sdm-wrap, donc styles autonomes avec repli de police.
   Tailles en !important : le thème définit son propre "font-size: 15px" sur
   les paragraphes de contenu (.entry-content p ou équivalent), qui passait
   sinon devant nos réglages back-office (retour du 21/08 — mail/site web
   restaient bloqués à 15px quel que soit le réglage). */
.sdm-single-details {
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid #E4DDD2;
	font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
.sdm-single-details p { margin: 0 0 var(--sdm-field-row-gap, 10px); font-size: var(--sdm-size-address, 15px) !important; line-height: 1.5; color: #2C1810; }
.sdm-single-details strong { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #9a8b78; margin-bottom: 4px; font-weight: 600; }
.sdm-single-details a { color: #A8542E; text-decoration: none; }
.sdm-single-details a:hover { text-decoration: underline; }
.sdm-single-article-link { font-weight: 600; }
.sdm-single-details .sdm-field-region { font-size: var(--sdm-size-region, 11px) !important; }
.sdm-single-details .sdm-field-phone { font-size: var(--sdm-size-phone, 12px) !important; }
.sdm-single-details .sdm-field-contact { font-size: var(--sdm-size-contact, 12px) !important; }
.sdm-single-details .sdm-field-website { font-size: var(--sdm-size-website, 12px) !important; }

/* Nom du monastère = titre de l'article, géré par le thème (pas par ce
   fichier CSS) — on le cible depuis l'extérieur via la classe de corps de
   page que WordPress ajoute automatiquement sur cette page. Sélecteurs de
   secours inclus pour les emplacements de titre les plus courants (Astra et
   la plupart des thèmes utilisent .entry-title) ; si le titre ne change
   toujours pas de taille sur le site, indiquer la classe exacte du thème
   pour affiner ce sélecteur. */
body.single-sdm_monastere .entry-title,
body.single-sdm_monastere h1.entry-title,
body.single-sdm_monastere .entry-header h1,
body.single-sdm_monastere article h1 {
	font-size: var(--sdm-size-name, 15px) !important;
}

.sdm-pagination, .sdm-modular-pagination {
	display: flex;
	gap: 6px;
	margin-top: 14px;
	flex-wrap: wrap;
}
.sdm-page-btn {
	width: 32px !important; height: 32px !important;
	border-radius: 999px !important;
	border: 1px solid transparent !important;
	background: none !important;
	color: #2C1810 !important;
	cursor: pointer;
	font-size: 13px !important;
	transition: color .15s ease, border-color .15s ease;
}
.sdm-page-btn:hover, .sdm-page-btn.active {
	background: none !important;
	border-color: var(--sdm-primary) !important;
	color: var(--sdm-primary) !important;
}
.sdm-page-prev, .sdm-page-next { color: #2C1810 !important; font-weight: 600; border-color: transparent !important; }
.sdm-page-prev:hover, .sdm-page-next:hover { color: var(--sdm-primary) !important; }

/* Marqueur Leaflet personnalisé — taille définie dynamiquement en JS */
.sdm-marker-dot {
	display: block;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(0,0,0,.35);
	transition: transform .12s ease;
}
.leaflet-marker-icon:hover .sdm-marker-dot { transform: scale(1.15); }
.leaflet-marker-icon:hover svg { filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); transform: scale(1.08); transform-origin: bottom center; }
/* Style "point + halo" (par défaut) : le halo s'élargit légèrement et le point
   central grossit un peu au survol, sans bouger l'ancrage (transform-origin
   centré) puisque ce marqueur n'a pas de pointe directionnelle comme le pin. */
.leaflet-marker-icon:hover span > span:first-child { transform: scale(1.15); transition: transform .15s ease; }
.leaflet-marker-icon:hover span > span:last-child { transform: scale(1.1); transition: transform .15s ease; }
.leaflet-marker-icon span > span { transform-origin: center; transition: transform .15s ease; }

/* Halo des clusters : grossit nettement plus que le disque au survol (c'est
   la demande précise), le disque avec le chiffre grossit à peine pour rester
   parfaitement lisible pendant l'animation. */
.sdm-cluster-icon:hover .sdm-cluster-halo { transform: scale(1.45) !important; opacity: .28 !important; }
.sdm-cluster-icon:hover .sdm-cluster-disc { transform: scale(1.06) !important; }
.sdm-cluster-halo, .sdm-cluster-disc { transition: transform .18s ease, opacity .18s ease; }

/* Nom des régions en filigrane sur la carte — taille/couleur réglables
   dans Réglages → Design (variables --sdm-region-label-size/color) */
.sdm-region-label {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	color: var(--sdm-region-label-color, #6B5A52);
	font-family: var(--sdm-font-body, "DM Sans", sans-serif);
	font-size: var(--sdm-region-label-size, 8px);
	font-weight: 500;
	letter-spacing: .02em;
	opacity: .65;
	pointer-events: none;
	white-space: nowrap;
}
.sdm-region-label::before { display: none; }

/* Contrôle de zoom Leaflet — restylé pour s'accorder à la charte */
.leaflet-control-zoom {
	border: none !important;
	box-shadow: 0 2px 10px rgba(43,24,16,.12) !important;
	border-radius: 10px !important;
	overflow: hidden;
}
.leaflet-control-zoom a {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 32px !important;
	height: 32px !important;
	line-height: 32px !important;
	background: #fff !important;
	color: var(--sdm-dark, #2B1810) !important;
	border: none !important;
	font-size: 16px !important;
	font-weight: 400;
	text-decoration: none !important;
	text-align: center;
}
.leaflet-control-zoom a:first-child { border-bottom: 1px solid var(--sdm-border, #E4DDD2) !important; }
.leaflet-control-zoom a:hover { background: var(--sdm-cream, #F7F3ED) !important; color: var(--sdm-primary, #A8542E) !important; }
.leaflet-control-zoom-in, .leaflet-control-zoom-out { border-radius: 0 !important; }

/* Popup Leaflet au survol d'un marqueur — image + adresse + site */
.leaflet-popup.sdm-popup-hover .leaflet-popup-content-wrapper {
	padding: 0;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(43,24,16,.18);
	overflow: hidden;
}
.leaflet-popup.sdm-popup-hover .leaflet-popup-content { margin: 0; width: 220px !important; }
.leaflet-popup.sdm-popup-hover .leaflet-popup-tip { display: none; }
.sdm-map-popup { font-family: var(--sdm-font-body, sans-serif); }
.sdm-popup-thumb img { width: 100%; height: 110px; object-fit: cover; display: block; }
.sdm-popup-body { padding: 10px 12px 12px; }
.sdm-popup-body strong {
	display: block;
	font-family: var(--sdm-font-heading, Georgia, serif);
	font-style: italic;
	font-size: 14px;
	color: var(--sdm-dark, #2B1810);
	margin-bottom: 3px;
	line-height: 1.25;
}
.sdm-popup-ordre { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: 11px; font-weight: 600; color: var(--sdm-primary, #A8542E); }
.sdm-popup-address { margin: 0 0 4px; font-size: 11px; color: var(--sdm-muted, #8a7d6c); line-height: 1.35; }
.sdm-map-popup .sdm-popup-site { font-size: 11.5px; color: var(--sdm-primary, #A8542E); text-decoration: none; }
.sdm-map-popup .sdm-popup-site:hover { text-decoration: underline; }

/* Aperçu carte — page d'accueil : carte à gauche, liste des plus proches à
   droite (desktop) ; aperçu zoomé + bouton (mobile). Réutilise .sdm-card
   (styles de la carte principale) pour la liste — même code HTML injecté
   (list_html), donc rendu visuel garanti identique, pas de CSS dupliqué. */
.sdm-preview-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--sdm-home-wrap-padding, 0);
	font-family: var(--sdm-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
	/* Filet de sécurité (retour du 24/08 — carte mobile "pas centrée",
	   débordement horizontal) : quelle que soit la cause exacte côté Leaflet
	   (rendu SVG interne calculé avant que la taille définitive du conteneur
	   soit connue), rien ne peut dépasser visuellement de ce bloc ni forcer un
	   défilement horizontal de la page. */
	overflow-x: hidden;
}
.sdm-preview-wrap * { box-sizing: border-box; }
.sdm-preview-wrap button,
.sdm-preview-wrap a { all: revert; box-sizing: border-box; font-family: inherit; }
.sdm-preview-header { text-align: center; margin-bottom: 24px; }
.sdm-preview-header h2 { font-family: var(--sdm-font-heading, Georgia, serif); font-size: 28px; font-style: italic; color: var(--sdm-dark, #2B1810); margin: 0 0 8px; }
.sdm-preview-header p { color: #6b5f52; margin: 0; }

.sdm-preview-desktop {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: var(--sdm-home-body-gap, 20px);
	/* La carte a une hauteur fixe (ci-dessous) ; la liste garde sa hauteur
	   naturelle à côté plutôt que de s'étirer pour l'égaler — sans ça, une
	   liste de 3-4 lignes se retrouverait avec un grand vide en dessous, ou un
	   scroll interne si trop de résultats étaient demandés (retour du 22/08 :
	   éviter tout défilement inutile, hauteur qui s'adapte au nombre choisi). */
	align-items: start;
}
.sdm-preview-map-col { }
.sdm-preview-map {
	width: 100%;
	height: var(--sdm-preview-height-desktop, 420px);
	border: 1px solid var(--sdm-border, #E4DDD2);
	border-radius: 12px;
	background: var(--sdm-cream, #F7F3ED);
	box-shadow: 0 2px 16px rgba(43,24,16,.07);
	z-index: 1;
}
.sdm-preview-list-col { }
.sdm-preview-list {
	display: flex;
	flex-direction: column;
	gap: var(--sdm-list-card-gap, 10px);
}
/* La liste de l'aperçu accueil utilise désormais .sdm-card-compact (voir plus
   haut) pour son espacement — plus besoin de surcharge ici. */
.sdm-preview-loading, .sdm-preview-list .sdm-no-results { padding: 20px; text-align: center; color: #8a7d6c; font-size: 13px; }

.sdm-preview-cta-desktop { text-align: center; margin-top: 24px; }
.sdm-preview-cta .sdm-btn-primary,
.sdm-preview-mobile-cta.sdm-btn-primary {
	display: inline-block !important;
	padding: 12px 26px !important;
	border-radius: 999px !important;
	background: var(--sdm-primary) !important;
	color: #fff !important;
	text-decoration: none;
	font-weight: 600;
	transition: opacity .15s ease;
}
.sdm-preview-cta .sdm-btn-primary:hover,
.sdm-preview-mobile-cta.sdm-btn-primary:hover { opacity: .88; color: #fff !important; }

/* Composition mobile : volontairement différente du desktop (pas juste la
   même grille repliée) — un aperçu de carte zoomé et un seul bouton clair
   vers la carte complète, pas de liste ni de filtres ici. */
.sdm-preview-mobile { display: none; }
.sdm-preview-mobile .sdm-preview-map {
	height: var(--sdm-preview-height-mobile, 240px);
	margin: 0 auto 14px;
	max-width: 100%;
	overflow: hidden;
}
.sdm-preview-mobile-cta { display: block !important; text-align: center; }
/* Leaflet peut, sur ce rendu purement vectoriel (pas de tuiles), calculer sa
   zone de dessin interne un peu avant que la largeur définitive du conteneur
   ne soit stabilisée — ce filet garantit qu'elle ne dépasse jamais la sienne,
   quel que soit ce calcul interne (retour du 24/08). */
.sdm-preview-mobile .leaflet-container { max-width: 100%; }

@media (max-width: 700px) {
	.sdm-preview-header h2 { font-size: 22px; }
}
@media (max-width: 900px) {
	.sdm-preview-desktop, .sdm-preview-cta-desktop { display: none; }
	.sdm-preview-mobile { display: block; }

	.sdm-legend { display: none !important; }
	.sdm-toolbar select { flex: 1 1 140px; }
	.sdm-near-btn { flex: 1 1 140px; justify-content: center; }
	.sdm-dropdown { flex: 1 1 140px; }
	.sdm-dropdown-panel { width: min(300px, 85vw); left: 0; right: auto; }
	/* Filtre "Type de retraite" masqué sur mobile (retour du 22/08) — interface
	   volontairement plus simple : Recherche, Région, Ordre uniquement. Reste
	   pleinement fonctionnel en desktop ; à réactiver ici en supprimant cette
	   seule règle si besoin plus tard. */
	#sdm-retraite-dropdown { display: none; }
	.sdm-body { grid-template-columns: 1fr; }
	.sdm-map-col { position: relative; top: 0; max-width: none; }
	#sdm-map { height: var(--sdm-search-map-height-mobile, 300px); }
	.sdm-list { max-height: none; }
	.sdm-region-label { display: none; }
	/* Zoom plus grand et plus facile à toucher au doigt (retour du 22/08 —
	   30px jugé trop petit). */
	.leaflet-control-zoom a { width: 44px !important; height: 44px !important; line-height: 44px !important; font-size: 20px !important; }
	.leaflet-control-zoom { border-radius: 8px !important; overflow: hidden; }

	/* Photo toujours masquée sur mobile pour une liste compacte, quel que soit
	   le réglage "Photo dans la liste" (qui ne s'applique qu'au desktop) —
	   et espacements resserrés pour limiter la hauteur de chaque résultat et,
	   avec elle, le nombre de pages de pagination. */
	.sdm-card-thumb { display: none !important; }
	.sdm-card-locate { display: inline-block; }
	.sdm-card { padding: 10px 12px !important; gap: 10px !important; }
	.sdm-card-row, .sdm-card-meta, .sdm-card-body h3 { margin-bottom: 2px !important; }

	.sdm-wrap.sdm-mobile-list-only .sdm-map-col { display: none; }
	.sdm-wrap.sdm-mobile-map-only .sdm-list-col { display: none; }
}
@media (max-width: 480px) {
	.leaflet-popup.sdm-popup-hover .leaflet-popup-content { width: 180px !important; }
}

/* Accessibilité — focus clavier visible sur tous les éléments interactifs.
   Le reset ("all: revert") plus haut supprime le contour de focus par défaut
   du navigateur sur les boutons ; on le restaure explicitement plutôt que de
   laisser quelqu'un naviguer au clavier sans jamais voir où il se trouve. */
.sdm-wrap a:focus-visible,
.sdm-wrap button:focus-visible,
.sdm-wrap input:focus-visible,
.sdm-wrap select:focus-visible,
.sdm-preview-wrap a:focus-visible,
.sdm-preview-wrap button:focus-visible {
	outline: 2px solid var(--sdm-primary, #A8542E) !important;
	outline-offset: 2px;
}
.sdm-card:focus-within { border-color: var(--sdm-primary); box-shadow: 0 0 0 2px rgba(168,84,46,.25); }