/* ==========================================================================
   VENTES IMMO - Carte des agences immobilières locales
   Pourtours jaunes (#d9a938) sur fond #277a86 ; cadres or cohérents avec l'éventail.
   ========================================================================== */

/* Même habillage que la page Liens Web : fond uni sous le bandeau fixe (78px) */
body:has(#cartesMain) {
	background-color: #277a86 !important;
}

body:has(#cartesMain) .main-body-container {
	margin-top: 78px !important;
	padding-top: 0 !important;
	background-color: #277a86 !important;
}

#cartesMain {
	background-color: #277a86;
	color: #ffffff;
	position: relative;
	padding: 14px 20px 40px 20px;
	max-width: 100%;
	width: 100%;
	min-height: calc(100vh - 120px);
	box-sizing: border-box;
}

/* ---------- En-tête ---------- */
.cartes-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-bottom: 18px;
}

.cartes-title {
	margin: 0;
	font-size: 2.1rem;
	font-weight: 800;
	letter-spacing: 2px;
	color: #d9a938;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.cartes-subtitle {
	margin: 3px 0 14px 0;
	font-size: 1.05rem;
	color: #e2e8f0;
}

/* Mention d'information sous la carte : sélection de liens, sans garantie, partenariats indiqués distinctement */
.cartes-info {
	width: 100%;
	margin: 16px 0 0 0;
	padding: 10px 16px;
	text-align: left;
	/* Discret : fond translucide intégré au fond de page, texte clair */
	background: rgba(255, 255, 255, 0.08);
	color: #e2e8f0;
	border: 1px solid rgba(217, 169, 56, 0.45);
	border-radius: 10px;
	font-size: 0.88rem;
}

.cartes-info-title {
	font-size: 0.95rem;
	font-weight: 700;
	margin: 0;
	color: #e2e8f0;
}

.cartes-info-body {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.cartes-info p {
	margin: 0 0 4px 0;
}

.cartes-info p:last-child {
	margin-bottom: 0;
}

.cartes-info a {
	color: #d9a938;
	font-weight: 700;
	text-decoration: underline;
}

.cartes-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px 26px;
	width: 100%;
}

.cartes-search {
	flex: 0 1 460px;
	min-width: 240px;
}

.cartes-search-input {
	width: 100%;
	padding: 9px 16px;
	border: 2px solid #d9a938;
	border-radius: 30px;
	background: rgba(255, 255, 255, 0.95);
	color: #1f2a37;
	font-size: 1rem;
}

.cartes-search-input:focus {
	outline: 3px solid rgba(217, 169, 56, 0.55);
	outline-offset: 1px;
}

/* ---------- Légende ---------- */
.cartes-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9rem;
	color: #e2e8f0;
}

.cartes-legend li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.cartes-legend-swatch {
	display: inline-block;
	width: 22px;
	height: 14px;
	border: 2px solid #d9a938;
	border-radius: 3px;
}

.cartes-legend-swatch--vide {
	background: transparent;
}

.cartes-legend-swatch--data {
	background: rgba(217, 169, 56, 0.28);
}

.cartes-legend-swatch--active {
	background: rgba(217, 169, 56, 0.6);
	border-color: #ffffff;
}

/* ---------- Messages ---------- */
.cartes-message {
	margin: 0 auto 14px auto;
	max-width: 780px;
	padding: 10px 16px;
	border: 1px solid #d9a938;
	border-radius: 10px;
	background: rgba(27, 83, 92, 0.85);
	text-align: center;
}

.cartes-message[hidden] {
	display: none;
}

.cartes-message--erreur {
	border-color: #f3a6a6;
	background: rgba(120, 30, 30, 0.55);
}

/* ---------- Disposition carte + panneau ---------- */
.cartes-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
	gap: 24px;
	align-items: start;
}

.cartes-map-frame {
	position: relative;
	border: 2px solid #d9a938;
	border-radius: 16px;
	background: #1b535c;
	padding: 12px;
}

.cartes-map-svg {
	display: block;
	width: 90%;
	height: auto;
	max-height: 70vh;
	margin: 0 auto;
}

/* Territoires : pourtour jaune, remplissage transparent (reste cliquable) */
.cartes-territoire path {
	fill: transparent;
	stroke: #d9a938;
	stroke-width: 1;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	transition: fill 0.15s ease;
}

.cartes-territoire {
	cursor: pointer;
	outline: none;
}

/* Territoires dont les agences sont renseignées : légèrement plus marqués */
.cartes-territoire.has-data path {
	fill: rgba(217, 169, 56, 0.2);
}

.cartes-territoire:hover path,
.cartes-territoire.is-hover path {
	fill: rgba(217, 169, 56, 0.38);
}

/* Survol synchronisé carte / vignette : contour blanc pour repérer les petits départements */
.cartes-territoire.is-hover path {
	stroke: #ffffff;
	stroke-width: 2;
}

.cartes-territoire:focus-visible path {
	stroke: #ffffff;
	stroke-width: 2.5;
}

.cartes-territoire.is-selected path {
	fill: rgba(217, 169, 56, 0.6);
	stroke: #ffffff;
	stroke-width: 2.2;
}

/* Repères de villes : point et nom, au-dessus des territoires, sans prise sur la souris */
.cartes-ville {
	pointer-events: none;
}

.cartes-ville circle {
	fill: #ffffff;
	stroke: #d9a938;
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
}

.cartes-ville text {
	fill: #ffffff;
	font-weight: 600;
	stroke: #0f3f47;
	stroke-width: 3px;
	stroke-linejoin: round;
	paint-order: stroke;
	vector-effect: non-scaling-stroke;
	user-select: none;
}

/* ---------- Vignette Île-de-France (en haut à droite de la carte) ---------- */
.cartes-vignette {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	width: clamp(120px, 19%, 230px);
	padding: 6px 8px 8px 8px;
	border: 2px solid #d9a938;
	border-radius: 12px;
	background: #1b535c;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.cartes-vignette[hidden] {
	display: none;
}

.cartes-vignette-titre {
	display: block;
	margin-bottom: 4px;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.5px;
	text-align: center;
	text-transform: uppercase;
	color: #d9a938;
}

.cartes-vignette-svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Petit écran : la vignette passe sous la carte au lieu de la recouvrir */
@media (max-width: 575.98px) {
	.cartes-map-frame {
		padding: 8px;
		overflow: hidden;
	}

	/*
	 * Carte de France + Corse : le viewBox réserve 20 % de vide à droite (pour la vignette sur grand écran).
	 * Ici la vignette est sous la carte : on agrandit le SVG de 20 % et on rogne ce vide hors du cadre.
	 */
	.cartes-map-svg {
		width: 120%;
		max-width: none;
		max-height: none;
		margin: 0 -20% 0 0;
	}

	/*
	 * Vignette Île-de-France : taille réglée pour qu'un département (ex. Seine-et-Marne)
	 * ait à l'écran la taille de la carte principale (ex. Puy-de-Dôme), soit ~17 % de la largeur du cadre, agrandi ensuite de 107 % (4 × +20 %) pour faciliter le toucher (≈ 35,3 %).
	 */
	.cartes-vignette {
		position: static;
		width: 35.3%;
		padding: 3px 4px 4px 4px;
		border-width: 1px;
		border-radius: 8px;
		margin: 10px auto 0 auto;
	}

	.cartes-vignette-titre {
		font-size: 0.5rem;
		margin-bottom: 2px;
	}
}

/* ---------- Carte principale à deux vues : France / territoire d'outre-mer (composant carte_territoires.js) ---------- */
/* Élément momentanément retiré : carte non affichée, encart du territoire déjà montré en grand */
.cartes-map-svg.is-masque,
.cartes-encart.is-masque {
	display: none;
}

/*
 * Grande carte d'un territoire d'outre-mer : même boîte que la carte de la France (le composant fournit son ratio),
 * donc même hauteur et aucun saut de mise en page ; le viewBox, ajusté au territoire, est centré dans cette boîte.
 */
.cartes-map-svg--territoire {
	aspect-ratio: var(--carte-ratio, 1.1);
}

.cartes-map-svg--territoire .cartes-territoire path {
	stroke-width: 1.2;
}

.cartes-map-svg--territoire .cartes-territoire.is-hover path {
	stroke-width: 1.8;
}

.cartes-map-svg--territoire .cartes-territoire.is-selected path {
	stroke-width: 1.8;
}

/* Apparition douce de la carte affichée (la classe est posée par le composant) */
.cartes-map-svg.is-entree {
	animation: cartes-map-entree 0.2s ease-out both;
}

@keyframes cartes-map-entree {
	from {
		opacity: 0;
		transform: scale(0.97);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* La légende ne concerne que la carte de la France : masquée sans libérer sa place (barre d'outils stable) */
.cartes-legend {
	transition: opacity 0.2s ease;
}

.cartes-legend.is-hors-vue {
	opacity: 0;
	visibility: hidden;
}

/* Vignette « France » : toujours la première de la rangée du bas ; surlignée quand la France est la carte principale */
.cartes-encart.cartes-encart--france .cartes-encart-svg path {
	stroke-width: 0.8;
}

.cartes-encart--france.is-affichee {
	border-color: #d9a938;
	background: #236a75;
	cursor: default;
}

.cartes-encart--france.is-affichee .cartes-encart-svg path {
	fill: rgba(217, 169, 56, 0.3);
}

@media (prefers-reduced-motion: reduce) {
	.cartes-map-svg.is-entree {
		animation: none;
	}

	.cartes-legend,
	.cartes-encart {
		transition: none;
	}
}

/* Petit écran : la carte de la France est élargie à 120 % puis rognée à droite (voir plus haut) ; la grande carte d'un
   territoire garde la même hauteur avec 100 % de largeur et un ratio divisé par 1,2 (--carte-ratio-mobile). */
@media (max-width: 575.98px) {
	.cartes-map-svg.cartes-map-svg--territoire {
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
		aspect-ratio: var(--carte-ratio-mobile, 0.92);
	}
}

/* Étiquette du lieu affiché en carte principale : en haut à gauche du cadre, par-dessus la carte (sous la vignette Île-de-France) */
.cartes-map-etiquette {
	position: absolute;
	top: 10px;
	left: 12px;
	z-index: 1;
	max-width: calc(100% - 24px);
	padding: 4px 10px;
	border-radius: 6px;
	background: rgba(27, 83, 92, 0.75);
	color: #d9a938;
	font-size: 1.2rem;
	font-weight: 800;
	letter-spacing: 0.5px;
	line-height: 1.25;
	text-transform: uppercase;
	pointer-events: none;
}

@media (max-width: 575.98px) {
	.cartes-map-etiquette {
		top: 8px;
		left: 8px;
		max-width: calc(100% - 16px);
		font-size: 0.95rem;
	}
}

/* ---------- Outre-mer ---------- */
.cartes-sub-title {
	margin: 20px 0 10px 0;
	font-size: 1.2rem;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #d9a938;
}

.cartes-encarts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
	gap: 12px;
}

.cartes-encart {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 8px 6px 10px 6px;
	border: 2px solid rgba(217, 169, 56, 0.55);
	border-radius: 12px;
	background: #1b535c;
	color: #ffffff;
	font: inherit;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.cartes-encart:hover,
.cartes-encart:focus-visible,
.cartes-encart.is-selected {
	border-color: #d9a938;
	background: #236a75;
}

.cartes-encart:focus-visible {
	outline: 3px solid rgba(255, 255, 255, 0.8);
	outline-offset: 2px;
}

.cartes-encart-svg {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
}

.cartes-encart-label {
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
}

.cartes-encart-code {
	color: #d9a938;
	font-weight: 800;
}

/* Petits territoires (îles, atolls) : trait plus épais pour rester visibles */
.cartes-encart .cartes-encart-svg path {
	fill: transparent;
	stroke: #d9a938;
	stroke-width: 1.4;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.cartes-encart.has-data .cartes-encart-svg path {
	fill: rgba(217, 169, 56, 0.2);
}

.cartes-encart:hover .cartes-encart-svg path,
.cartes-encart.is-hover .cartes-encart-svg path {
	fill: rgba(217, 169, 56, 0.38);
}

.cartes-encart.is-selected .cartes-encart-svg path {
	fill: rgba(217, 169, 56, 0.6);
	stroke: #ffffff;
}

/* ---------- Panneau latéral ---------- */
.cartes-panel {
	position: sticky;
	top: 98px;
	max-height: calc(100vh - 118px);
	overflow-y: auto;
	padding: 20px;
	border: 2px solid #d9a938;
	border-radius: 16px;
	background: #1b535c;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.cartes-panel:focus {
	outline: none;
}

.cartes-panel-placeholder {
	text-align: center;
	padding: 30px 10px;
	color: #e2e8f0;
}

.cartes-panel-placeholder .bi {
	display: block;
	margin-bottom: 8px;
	font-size: 2.4rem;
	color: #d9a938;
}

.cartes-panel-entete {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(217, 169, 56, 0.5);
}

.cartes-panel-code {
	flex-shrink: 0;
	min-width: 46px;
	padding: 6px 10px;
	border: 2px solid #d9a938;
	border-radius: 10px;
	background: rgba(217, 169, 56, 0.18);
	font-weight: 800;
	text-align: center;
	color: #d9a938;
}

.cartes-panel-titre {
	margin: 0;
	font-size: 1.4rem;
	font-weight: 800;
	color: #ffffff;
}

.cartes-panel-section + .cartes-panel-section {
	margin-top: 18px;
}

.cartes-panel-section-titre {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 0 0 10px 0;
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #d9a938;
}

.cartes-panel-compteur {
	padding: 2px 10px;
	border: 1px solid #d9a938;
	border-radius: 20px;
	font-size: 0.8rem;
	color: #ffffff;
}

.cartes-liste {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cartes-site {
	padding: 10px 12px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.06);
}

.cartes-site-nom {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	color: #ffffff;
}

.cartes-site-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

/* Cartes du panneau */
.cartes-site--locale {
	display: flex;
	flex-direction: column;
}

.cartes-site-mention {
	padding: 1px 8px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 10px;
}

/* Partenariat commercial signalé distinctement */
.cartes-site-mention--partenaire_commercial {
	border-color: #d9a938;
	color: #d9a938;
	font-weight: 700;
}

.cartes-site-signaler {
	margin-left: auto;
	color: #e2e8f0;
	text-decoration: underline;
}

.cartes-site-signaler:hover,
.cartes-site-signaler:focus-visible {
	color: #d9a938;
}

.cartes-lien {
	display: inline-block;
	padding: 4px 12px;
	border: 1.5px solid #d9a938;
	border-radius: 20px;
	background: #d9a938;
	color: #1f3864;
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: none;
}

.cartes-lien--secondaire {
	background: transparent;
	color: #d9a938;
}

.cartes-lien:hover,
.cartes-lien:focus-visible {
	background: #ffffff;
	border-color: #ffffff;
	color: #1f3864;
}

/* ---------- Vignette d'agence ---------- */
/* Espacement réduit entre vignettes (limité à la page Ventes immo) */
#cartesMain .cartes-liste {
	gap: 6px;
}

.vi-agence.cartes-site {
	padding: 0.55rem 0.7rem;
}

/* Mobile : empilement compact (texte, puis boutons et lien de signalement).
   Textes agrandis de 40 % (x1,4) ; les marges entre vignettes restent inchangées. */
.vi-agence .cartes-site-nom {
	margin: 0;
	font-size: 1.4rem; /* 1rem x 1,4 */
	overflow-wrap: anywhere;
}

.vi-agence-texte {
	flex: 1 1 auto;
	min-width: 0;
}

.vi-agence-tete {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 8px;
}

/* Pastille du partenaire commercial, à côté du nom */
.vi-agence-tete .cartes-site-mention {
	padding: 0 10px; /* 7px x 1,4 */
	font-size: 1.01rem; /* 0.72rem x 1,4 */
	line-height: 1.5;
}

.vi-agence-description {
	margin: 2px 0 0 0;
	font-size: 1.19rem; /* 0.85rem x 1,4 */
	color: #d5dde6;
	overflow-wrap: anywhere;
}

/* Date de contrôle des liens : très discrète */
.vi-agence-meta {
	margin: 2px 0 0 0;
	font-size: 1.01rem; /* 0.72rem x 1,4 */
	color: #a9b7c6;
	overflow-wrap: anywhere;
}

/* Note de territoire (ex. aucune agence locale) : encadré d'information, distinct d'une agence */
.vi-note-texte {
	margin: 0;
	font-size: 1.19rem; /* 0.85rem x 1,4 */
	line-height: 1.4;
	color: #d5dde6;
	overflow-wrap: anywhere;
}

.vi-note .cartes-site-actions {
	margin-top: 6px;
}

.vi-note .vi-agence-meta {
	margin-top: 6px;
}

.vi-agence-droite {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	margin-top: 6px;
}

.vi-agence-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.vi-agence .cartes-lien {
	padding: 3px 14px; /* 2px 10px x 1,4 */
	font-size: 1.12rem; /* 0.8rem x 1,4 */
	line-height: 1.3;
}

.vi-agence .cartes-site-signaler {
	margin-left: 0;
	font-size: 1.01rem; /* 0.72rem x 1,4 */
	color: #c5d0dc;
	white-space: nowrap;
}

.vi-agence .cartes-site-signaler:hover,
.vi-agence .cartes-site-signaler:focus-visible {
	color: #d9a938;
}

.vi-agence .cartes-site-signaler:focus-visible,
.vi-agence .cartes-lien:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

/* ---------- Panneau Ventes immo : en-tête du territoire et titre de section (x1,4) ----------
   Scopé sous #cartesPanelContent : la page Professionnels (#proPanneauContenu) n'est pas concernée. */
#cartesPanelContent .cartes-panel-code {
	min-width: 64px; /* 46px x 1,4 */
	padding: 8px 14px; /* 6px 10px x 1,4 */
	border-radius: 14px;
	font-size: 1.4rem; /* badge du code, proportionnel au nom */
	line-height: 1.2;
}

#cartesPanelContent .cartes-panel-titre {
	font-size: 1.96rem; /* 1.4rem x 1,4 */
	line-height: 1.2;
	min-width: 0;
	overflow-wrap: anywhere;
}

#cartesPanelContent .cartes-panel-section-titre {
	font-size: 1.4rem; /* 1rem x 1,4 */
}

#cartesPanelContent .cartes-panel-compteur {
	padding: 3px 14px; /* 2px 10px x 1,4 */
	border-radius: 28px;
	font-size: 1.12rem; /* 0.8rem x 1,4 */
}

/* Écran large : nom et description à gauche, boutons et signalement à droite, centrés verticalement */
@media (min-width: 768px) {
	.vi-agence.cartes-site--locale {
		flex-direction: row;
		align-items: center;
		gap: 0.6rem;
	}

	.vi-agence-droite {
		flex: 0 1 auto;
		max-width: 62%;
		min-width: 0;
		justify-content: flex-end;
		margin-top: 0;
	}
}

.cartes-vide {
	margin: 0;
	padding: 10px 12px;
	border: 1px dashed rgba(217, 169, 56, 0.7);
	border-radius: 10px;
	font-style: italic;
	color: #e2e8f0;
}

/* ---------- Responsive : la carte passe au-dessus du panneau ---------- */
@media (max-width: 991.98px) {
	.cartes-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.cartes-panel {
		position: static;
		max-height: none;
		overflow: visible;
	}
}

@media (max-width: 767.98px) {
	#cartesMain {
		padding: 12px 10px 30px 10px;
	}

	.cartes-title {
		font-size: 1.45rem;
		letter-spacing: 1px;
	}

	.cartes-subtitle {
		font-size: 0.95rem;
	}

	.cartes-encarts {
		grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
		gap: 8px;
	}

	/* Cibles tactiles d'au moins 40 px de haut malgré le padding réduit */
	.vi-agence .cartes-lien,
	.vi-agence .cartes-site-signaler {
		display: inline-flex;
		align-items: center;
		min-height: 40px;
	}
}

/* ==========================================================================
   ADMINISTRATION RAPIDE (administrateur connecté uniquement, outils_admin.js)
   Styles communs aux pages Ventes immo et Professionnels immo (cette feuille est chargée par les deux).
   Contrastes : textes ≥ 4,5:1 sur le fond du panneau (#1b535c) ou sur leur propre fond.
   ========================================================================== */

/* Bandeau du panneau : bouton « ＋ Ajouter un professionnel » aligné à droite */
.pro-admin-barre {
	display: flex;
	justify-content: flex-end;
	margin: -6px 0 10px 0;
}

.pro-admin-ajout {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #ffffff;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.pro-admin-ajout--panneau {
	padding: 3px 12px;
	border: 1.5px dashed #d9a938;
	border-radius: 20px;
	font-size: 0.85rem;
}

/* « ＋ » compact des en-têtes de catégorie / spécialité */
.pro-admin-ajout--mini {
	justify-content: center;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border: 1.5px dashed #d9a938;
	border-radius: 50%;
	font-size: 0.95rem;
	line-height: 1;
}

.pro-admin-ajout:hover,
.pro-admin-ajout:focus-visible {
	background: #d9a938;
	border-style: solid;
	color: #1f3864;
}

.pro-admin-ajout:focus-visible,
.pro-admin-bouton:focus-visible,
.pro-admin-toast button:focus-visible,
.pro-admin-modale button:focus-visible,
.pro-admin-modale input:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

/* Voyants près du nom : ajout manuel (point orange) et hors quota (gris) */
.pro-admin-voyant {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0 7px;
	border-radius: 10px;
	font-size: 0.68rem;
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
	cursor: help;
}

/* Texte #7a4100 sur #fff1d6 : contraste ≈ 7,6:1 */
.pro-admin-voyant--manuel {
	background: #fff1d6;
	color: #7a4100;
}

.pro-admin-voyant--manuel::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #e8590c;
}

/* Texte #495057 sur #e9ecef : contraste ≈ 7:1 */
.pro-admin-voyant--hors-quota {
	background: #e9ecef;
	color: #495057;
}

/* Boutons « Modifier » / « Retirer » : petits, alignés avec « Signaler une erreur » */
.pro-admin-outils {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.pro-admin-bouton {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 1px 8px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 12px;
	background: transparent;
	color: #e2e8f0;
	font: inherit;
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.pro-admin-bouton--danger {
	border-color: #f3a6a6;
	color: #ffd6d6;
}

.pro-admin-bouton:hover,
.pro-admin-bouton:focus-visible {
	background: #ffffff;
	border-color: #ffffff;
	color: #1f3864;
}

.pro-admin-bouton--danger:hover,
.pro-admin-bouton--danger:focus-visible {
	background: #f3a6a6;
	border-color: #f3a6a6;
	color: #4a0d0d;
}

/* Page Ventes immo : textes des vignettes agrandis (x1,4), outils proportionnels */
.vi-agence .pro-admin-voyant {
	font-size: 0.95rem;
}

.vi-agence .pro-admin-bouton {
	padding: 1px 11px;
	font-size: 1.01rem;
}

#cartesPanelContent .pro-admin-ajout--panneau {
	font-size: 1.12rem;
}

/* ---------- Fenêtre de confirmation ---------- */
html.pro-admin-modale-ouverte {
	overflow: hidden;
}

.pro-admin-modale-fond {
	position: fixed;
	inset: 0;
	z-index: 1080;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(0, 0, 0, 0.6);
}

.pro-admin-modale {
	box-sizing: border-box;
	width: 100%;
	max-width: 480px;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	padding: 18px 20px;
	border: 2px solid #d9a938;
	border-radius: 14px;
	background: #1b535c;
	color: #ffffff;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
	text-align: left;
}

/* Titre en grand corps gras : contraste ≥ 3:1 suffisant (texte large) */
.pro-admin-modale-titre {
	margin: 0 0 6px 0;
	font-size: 1.25rem;
	font-weight: 800;
	color: #d9a938;
}

.pro-admin-modale-nom {
	margin: 0 0 12px 0;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.pro-admin-modale-motifs {
	margin: 0 0 10px 0;
	padding: 0;
	border: 0;
}

.pro-admin-modale-legende,
.pro-admin-modale-label {
	display: block;
	margin: 0 0 4px 0;
	font-size: 0.95rem;
	font-weight: 700;
}

.pro-admin-modale-choix {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 2px 0;
	cursor: pointer;
}

.pro-admin-modale-note {
	box-sizing: border-box;
	width: 100%;
	padding: 6px 10px;
	border: 1.5px solid #d9a938;
	border-radius: 8px;
	background: #ffffff;
	color: #1f2a37;
}

.pro-admin-modale-texte {
	margin: 12px 0 0 0;
	font-size: 0.88rem;
	color: #e2e8f0;
}

.pro-admin-modale-erreur {
	margin: 10px 0 0 0;
	padding: 8px 12px;
	border: 1px solid #f3a6a6;
	border-radius: 8px;
	background: #5c1a1a;
	color: #ffffff;
	font-size: 0.9rem;
}

.pro-admin-modale-erreur[hidden] {
	display: none;
}

.pro-admin-modale-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 14px;
}

.pro-admin-modale-bouton {
	min-height: 38px;
	padding: 6px 16px;
	border: 1.5px solid #ffffff;
	border-radius: 20px;
	background: transparent;
	color: #ffffff;
	font-weight: 700;
	cursor: pointer;
}

.pro-admin-modale-bouton:hover,
.pro-admin-modale-bouton:focus-visible {
	background: #ffffff;
	color: #1f3864;
}

/* Blanc sur #b42318 : contraste ≈ 6,5:1 */
.pro-admin-modale-bouton--danger {
	border-color: #b42318;
	background: #b42318;
}

.pro-admin-modale-bouton--danger:hover,
.pro-admin-modale-bouton--danger:focus-visible {
	border-color: #8f1c13;
	background: #8f1c13;
	color: #ffffff;
}

.pro-admin-modale-bouton:disabled {
	opacity: 0.65;
	cursor: wait;
}

/* ---------- Message de confirmation (toast) ---------- */
.pro-admin-toast {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 1090;
	max-width: min(440px, calc(100vw - 32px));
}

.pro-admin-toast-carte {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	padding: 10px 12px;
	border: 2px solid #d9a938;
	border-radius: 12px;
	background: #1b535c;
	color: #ffffff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.pro-admin-toast-carte--erreur {
	border-color: #f3a6a6;
	background: #5c1a1a;
}

.pro-admin-toast-texte {
	flex: 1 1 200px;
	min-width: 0;
	overflow-wrap: anywhere;
}

.pro-admin-toast-action {
	padding: 3px 12px;
	border: 1.5px solid #d9a938;
	border-radius: 16px;
	background: #d9a938;
	color: #1f3864;
	font-weight: 700;
	cursor: pointer;
}

.pro-admin-toast-action:hover,
.pro-admin-toast-action:focus-visible {
	background: #ffffff;
	border-color: #ffffff;
}

.pro-admin-toast-action:disabled {
	opacity: 0.65;
	cursor: wait;
}

.pro-admin-toast-fermer {
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #ffffff;
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
}

.pro-admin-toast-fermer:hover,
.pro-admin-toast-fermer:focus-visible {
	background: rgba(255, 255, 255, 0.18);
}

/* Attribution des contours de la carte (sources géographiques) */
.cartes-attribution {
	margin: 0.5rem 0 0;
	font-size: 0.7rem;
	line-height: 1.3;
	color: #d4e3e6; /* lisible sur le fond sarcelle (contraste > 6:1), obligation d'attribution des licences */
}