.senova-carte-wrapper {
	--senova-carte-hauteur: 900px;
	--senova-blue: #2f6fed;
	--senova-blue-bg: #eef4ff;
	--senova-green: #16a34a;
	--senova-grey-border: #d8dce1;
	--senova-grey-text: #6b7280;
	--senova-placeholder-bg: #cfe3f5;
	--senova-border-radius: 8px;
	width: 100%;
	max-width: 90%;
	margin: 0 auto;
	font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	color: #000; 
	/* --senova-box-shadow: 3px 3px 9.2px 0px rgba(0, 0, 0, 0.25); */
	--senova-box-shadow: 1px 1px 7px 0px rgba(0, 0, 0, 0.25);
;
}

.senova-carte-header {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 28px;
}

.senova-carte-header h2 {
	font-size: 26px;
	font-weight: 700;
	margin: 0 0 8px;
}

.senova-carte-soustitre {
	font-size: 15px;
	color: var(--senova-grey-text);
	margin: 0 0 4px;
}

.senova-carte-description {
	font-size: 14px;
	color: var(--senova-grey-text);
	margin: 0;
}

.senova-carte-body {
	display: flex;
	flex-wrap: wrap;
	/* gap: 20px; */
	align-items: flex-start;
	border: 1px solid #eceef1;
	border-radius: var(--senova-border-radius);
	box-shadow: var(--senova-box-shadow);
}

/* Deux zones distinctes : l'en-tête garde sa hauteur propre, seule la liste
   défile. Le défilement porté par la colonne entière laissait les fiches
   glisser derrière les filtres. */
.senova-carte-filtres {
	display: flex;
	flex-direction: column;
	flex: 0 0 460px;
	max-width: 460px;
	padding: 20px;
	background: #fff;
	/* border: 1px solid #eceef1; */
	border-radius: var(--senova-border-radius);
	/* box-shadow: var(--senova-box-shadow); */
	/* border-box : en content-box, les 40px de padding s'ajouteraient à la
	   hauteur et la colonne dépasserait la carte d'autant. */
	box-sizing: border-box;
	max-height: var(--senova-carte-hauteur);
	overflow: hidden;
}

.senova-carte-filtres::-webkit-scrollbar {
	width: 6px;
}

.senova-carte-filtres::-webkit-scrollbar-track {
	background: transparent;
}

.senova-carte-filtres::-webkit-scrollbar-thumb {
	background: #d1d5db;
	border-radius: 3px;
}

.senova-carte-filtres::-webkit-scrollbar-thumb:hover {
	background: #9ca3af;
}

.senova-carte-map-container {
	position: relative;
	flex: 1 1 400px;
	/* min() plutôt qu'une valeur fixe : sous 280px de large (petits mobiles),
	   un plancher fixe l'emporterait sur le width: 100% du mode colonne et
	   ferait déborder la carte hors de l'écran. */
	min-width: min(280px, 100%);
	height: var(--senova-carte-hauteur);
	border-radius: 0 var(--senova-border-radius) var(--senova-border-radius) 0;
	overflow: hidden;
	/* border: 1px solid #eceef1; */
	box-shadow: var(--senova-box-shadow);
}

.senova-carte-watermark {
	position: absolute;
	bottom: 10px;
	left: 10px;
	z-index: 400;
	pointer-events: none;
	opacity: 0.75;
	/* background: rgba(255, 255, 255, 0.85); */
	/* border-radius: 6px; */
	padding: 4px 8px;
	/* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); */
}

.senova-carte-watermark img {
	display: block;
	max-height: 32px;
	max-width: 120px;
	width: auto;
	height: auto;
}

#senova-carte-map {
	width: 100%;
	height: 100%;
}

/* Recherche, filtres et compteur restent affichés pendant que la liste défile
   sous eux : ce sont les commandes qui la pilotent. Un conteneur unique évite
   d'avoir à décaler chaque bloc de la hauteur des précédents. */
.senova-carte-entete {
	flex: 0 0 auto;
	background: #fff;
	padding-bottom: 4px;
}

.senova-search-box {
	position: relative;
	margin-bottom: 14px;
}

/* Le champ hérite de content-box : ses 54px de padding s'ajouteraient à sa
   largeur et le feraient déborder de la colonne, quelle que soit la taille
   de l'écran. */
.senova-search-box input {
	box-sizing: border-box;
	width: 100%;
}

.senova-search-box input[type="text"] {
	width: 100%;
	padding: 12px 14px 12px 40px;
	border: 1px solid var(--senova-grey-border);
	border-radius: var(--senova-border-radius);
	font-size: 14px;
	box-shadow: var(--senova-box-shadow);
}

.senova-search-box input[type="text"]::placeholder {
	color: #9ca3af;
	font-style: italic;
}

.senova-icon-search {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: #9ca3af;
	display: flex;
}

/* ===== Autocomplétion (projets + adresses) ===== */
.senova-autocomplete {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 20;
	background: #fff;
	border: 1px solid var(--senova-grey-border, #e0dede);
	border-radius: var(--senova-border-radius);
	box-shadow: var(--senova-box-shadow);
	max-height: 320px;
	overflow-y: auto;
	padding: 6px;
}

.senova-autocomplete-section-label {
	padding: 8px 10px 4px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #9ca3af;
}

.senova-autocomplete-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.12s ease;
}

.senova-autocomplete-item:hover,
.senova-autocomplete-item.active {
	background: var(--senova-blue-bg, #eef4ff);
}

.senova-autocomplete-icon {
	flex-shrink: 0;
	display: flex;
	color: var(--senova-blue);
}

.senova-autocomplete-item--adresse .senova-autocomplete-icon {
	color: var(--senova-green);
}

.senova-autocomplete-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	font-size: 13.5px;
	color: #111827;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.senova-autocomplete-text strong {
	font-weight: 600;
}

.senova-autocomplete-text span {
	font-size: 12px;
	color: var(--senova-grey-text);
}

/* ===== Carte "Recherche autour de cette adresse" (épinglée en tête de liste) ===== */
.senova-search-origin-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	margin-bottom: 10px;
	border: 1px solid var(--senova-blue);
	border-radius: var(--senova-border-radius);
}

.senova-search-origin-icon {
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--senova-blue);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.senova-search-origin-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.senova-search-origin-body strong {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--senova-blue);
}

.senova-search-origin-label {
	font-size: 13px;
	font-weight: 600;
	color: #111827;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.senova-search-origin-count {
	font-size: 12px;
	color: var(--senova-grey-text);
}

.senova-search-origin-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.senova-search-origin-radius {
	font-size: 12px;
	padding: 5px 6px;
	border-radius: 6px;
	border: 1px solid var(--senova-grey-border, #e0dede);
	background: #fff;
	color: #111827;
}

.senova-search-origin-clear {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: none;
	background: #fff;
	color: var(--senova-grey-text);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.senova-search-origin-clear:hover {
	background: var(--senova-blue);
	color: #fff;
}

.senova-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}

.senova-pills-statut {
	padding-top: 0;
}

.senova-separator {
	border: none;
	border-top: 1px solid #eceef1;
	margin: 12px 0;
}

.senova-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border-radius: var(--senova-border-radius);
	border: 2px solid var(--senova-grey-border);
	background: #fff;
	color: var(--senova-grey-text);
	font-size: 13px;
	cursor: pointer;
	transition: all 0.15s ease;
	line-height: 1.2;
	/* box-shadow: var(--senova-box-shadow); */
}

.senova-pill:hover {
	border-color: var(--senova-blue);
	color: var(--senova-blue);
}

.senova-pill.active {
	border-color: var(--senova-blue);
	color: var(--senova-blue);
	/* background: var(--senova-blue-bg); */
	/* font-weight: 600; */
	/* box-shadow: var(--senova-box-shadow); */
}

.senova-carte-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 4px 0 12px;
	padding-bottom: 12px;
}

.senova-carte-reset {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	border: 1.5px solid var(--senova-grey-border);
	border-radius: 999px;
	color: var(--senova-grey-text);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	padding: 6px 12px;
	white-space: nowrap;
	box-shadow: var(--senova-box-shadow);
	transition: all 0.15s ease;
}

.senova-carte-reset:hover {
	border-color: var(--senova-blue);
	color: var(--senova-blue);
	background: var(--senova-blue-bg);
}

.senova-carte-compteur {
	display: inline-flex;
	gap: 6px;
	font-size: 13px;
	color: var(--senova-green);
	font-weight: 600;
}

.senova-carte-compteur svg {
	color: var(--senova-green);
	flex-shrink: 0;
}

.senova-carte-liste {
	display: flex;
	flex-direction: column;
	gap: 10px;
	/* min-height:0 lève la taille minimale implicite d'un élément flex, sans
	   quoi la liste déborde au lieu de défiler. */
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: #d1d5db transparent;
	/* Dégage la barre de défilement du bord des cartes. */
	padding-right: 4px;
}

/* Les cartes sont elles-mêmes des éléments flex : sans flex-shrink:0 elles se
   compriment pour tenir dans la hauteur disponible au lieu de déborder, et la
   liste n'a alors rien à faire défiler. */
.senova-carte-liste > * {
	flex: 0 0 auto;
}

.senova-carte-liste-item {
	display: flex;
	align-items: stretch;
	gap: 0;
	padding: 0;
	border-radius: var(--senova-border-radius);
	background: #fff;
	/* border: 1px solid #eceef1; */
	box-shadow: var(--senova-box-shadow);
	overflow: hidden;
	cursor: pointer;
	text-decoration: none;
	color: inherit;
}

.senova-carte-liste-item:hover {
	border-color: var(--senova-blue);
}

.senova-carte-liste-item img,
.senova-carte-liste-item .senova-thumb-placeholder {
	width: 128px;
	min-height: 100%;
	object-fit: cover;
	border-radius: 0;
	flex-shrink: 0;
	background: var(--senova-placeholder-bg);
}

.senova-carte-liste-item-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	font-size: 13px;
	min-width: 0;
	padding: 14px 16px;
}

.senova-carte-liste-item-body strong {
	font-size: 14.5px;
	color: #111827;
	font-weight: 700;
}

.senova-item-address {
	display: flex;
	align-items: center;
	gap: 4px;
	color: var(--senova-grey-text);
	font-size: 12px;
}

.senova-item-address svg {
	flex-shrink: 0;
}

.senova-item-tags {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: 2px;
}

.senova-tag {
	display: flex;
	align-items: center;
	border: 1px solid var(--senova-grey-border);
	color: var(--senova-grey-text);
	border-radius: 5px;
	padding: 2px 10px;
	font-size: 11px;
}

.senova-tag.senova-tag-blue {
	border-color: var(--senova-blue);
	color: var(--senova-blue);
}

.senova-cta-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: 999px;
	border: 1.5px solid var(--senova-blue);
	color: var(--senova-blue);
	background: #fff;
	padding: 5px 12px;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	margin-top: 6px;
	width: fit-content;
	/* box-shadow: var(--senova-box-shadow); */
}

.senova-cta-pill.senova-cta-green {
	border-color: var(--senova-green);
	color: var(--senova-green);
	/* box-shadow: var(--senova-box-shadow); */
}

/* Leaflet 1.9.x compose les tuiles en "plus-lighter" pour adoucir les fondus
   de changement de zoom. Les tuiles se recouvrant d'une fraction de pixel, ce
   mode éclaircit la jointure et dessine un quadrillage blanc sur la carte, à
   certains zooms et niveaux de zoom d'écran. Le fondu perdu ici est
   imperceptible ; le quadrillage, lui, ne l'était pas. */
.leaflet-container img.leaflet-tile {
	mix-blend-mode: normal;
}

/* Largeur de la popup.

   Leaflet mesure le contenu puis écrit une largeur en style inline sur
   .leaflet-popup-content (ici 210px). Cette mesure est faite avant que nos
   styles ne s'appliquent et ne tient donc pas compte de la largeur voulue :
   le contenu s'enroule, et la popup devient haute et étroite. Le !important
   est le seul moyen de l'emporter sur un style inline.

   La largeur est posée ici, sur le parent, et non sur .senova-popup : un
   enfant ne peut pas élargir un parent en largeur fixe, et un pourcentage
   déclaré sur l'enfant se résout contre ce parent déjà réduit — il se
   saborde lui-même.

   Le min() borne la popup à la carte sur les petits mobiles, où 240px
   dépasseraient la largeur disponible. Les 26px retirés compensent les
   marges de .leaflet-popup-content (13px de chaque côté). */
.leaflet-popup-content {
	margin: 13px;
	width: min(240px, calc(100vw - 26px)) !important;
	max-width: none;
}

.leaflet-popup-content-wrapper {
	max-width: 100%;
}

.senova-popup {
	max-width: 100%;
	background: #fff;
	/* border-radius: var(--senova-border-radius); */
	padding: 10px;
	/* box-shadow: var(--senova-box-shadow); */
}

.senova-popup img,
.senova-popup .senova-thumb-placeholder {
	width: 100%;
	height: 110px;
	object-fit: cover;
	border-radius: var(--senova-border-radius);
	margin-bottom: 8px;
	background: var(--senova-placeholder-bg);
}

.senova-popup h4 {
	margin: 0 0 4px;
	font-size: 15px;
	color: #111827;
}

.senova-projets-proximite {
	margin-top: 32px;
}

.senova-projets-proximite-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin-top: 12px;
}

.senova-projet-card {
	display: flex;
	flex-direction: column;
	border: none;
	border-radius: 20px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	background: #fff;
	box-shadow: var(--senova-box-shadow);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.senova-projet-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 24px rgba(51, 51, 51, 0.14);
}

.senova-projet-card-media {
	position: relative;
	overflow: hidden;
}

.senova-projet-card-media img,
.senova-projet-card-media .senova-thumb-placeholder {
	width: 100%;
	height: 120px;
	object-fit: cover;
	display: block;
	background: var(--senova-placeholder-bg);
	transition: transform 0.3s ease;
}

.senova-projet-card:hover .senova-projet-card-media img {
	transform: scale(1.05);
}

.senova-projet-card-distance {
	position: absolute;
	top: 10px;
	right: 10px;
	background: rgba(255, 255, 255, 0.92);
	color: #111827;
	font-size: 12px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
	backdrop-filter: blur(2px);
}

.senova-projet-card-body {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13px;
}

.senova-projet-card-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	font-size: 12px;
	font-weight: 600;
	color: var(--senova-blue);
}

@media (max-width: 1200px) {
	/* La carte passe au-dessus de la liste, et défile avec la page : la liste
	   ayant sa propre zone de défilement, elle ne repousse plus la carte hors
	   de l'écran. */
	.senova-carte-body {
		flex-direction: column-reverse;
		justify-content: flex-end;
	}

	.senova-carte-map-container {
		width: 100%;
		/* flex-basis neutralisée : sa valeur de 400px l'emporterait sur la
		   hauteur voulue, la carte occupant alors la moitié de l'écran. */
		flex: 0 0 auto;
		height: 300px;
	}

	.senova-carte-filtres {
		flex: 1 1 auto;
		max-width: 100%;
		/* Padding resserré : celui du desktop poussait la barre de recherche
		   au-delà de la largeur de l'écran. */
		padding: 14px 12px;
		/* Le défilement est porté par la liste elle-même (voir
		   .senova-carte-liste) : la colonne se contente de borner la hauteur. */
		max-height: 70vh;
	}

	/* Le cadre du composant disparaît : sur mobile il dessine un rectangle
	   autour de toute la page, sans apporter de lisibilité. */
	.senova-carte-body {
		border: 0;
		box-shadow: none;
	}
	.senova-carte-header h2 {
		font-size: 21px;
	}

	/* Dans cette disposition, toucher une carte de la liste ouvre directement
	   la fiche (voir estVueEmpilee() dans senova-map.js) : la pastille est
	   remplie pour annoncer une action, et le retour tactile porte sur toute
	   la carte, le doigt ne visant pas nécessairement le bouton. */
	.senova-carte-liste-item .senova-cta-pill.senova-cta-green {
		background: var(--senova-green);
		color: #fff;
	}

	.senova-carte-liste-item:active {
		background: rgba(0, 0, 0, 0.04);
	}
}


/* ===== Clusters =====
   Le style par défaut de Leaflet code la densité par la couleur (vert/jaune/
   rouge) ; ici la couleur porte l'agence majoritaire, la densité restant
   lisible par la taille et le nombre affiché. */
.senova-cluster {
	background: transparent;
	border: 0;
}

.senova-cluster > span {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 3px solid #fff;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.35);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
	/* Le halo reprend la couleur du cluster par transparence. */
	background-clip: padding-box;
}