/* Carte de France — rendu public */

/*
 * Définis sur :root (et non .cartefr-map-wrap) : la popup est ajoutée à
 * document.body (position: fixed, hors de la carte) et doit hériter les
 * mêmes jetons de couleur — sinon son fond reste transparent.
 */
:root {
	--cartefr-accent: #d41367;
	--cartefr-accent-contrast: #ffffff;
	--cartefr-map-fill: #fafafa;
	--cartefr-surface: #ffffff;
	--cartefr-text: #1a1a1a;
	--cartefr-text-muted: #5a5a5a;
	--cartefr-border: rgba(20, 22, 31, 0.08);
	--cartefr-radius-lg: 12px;
	--cartefr-radius-md: 10px;
	--cartefr-shadow: 0 4px 20px -6px rgba(15, 23, 42, 0.1);
}

.cartefr-map-wrap {
	box-sizing: border-box;
	max-width: 900px;
	margin: 0 auto;
	position: relative;
}

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

/* --- Barre de recherche --- */

.cartefr-map-search {
	position: relative;
	max-width: 360px;
	margin: 0 0 14px;
}

.cartefr-map-search-icon {
	position: absolute;
	left: 14px;
	top: 50%;
	width: 15px;
	height: 15px;
	transform: translateY(-50%);
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a6' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.2' y2='16.2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/*
 * Sélecteur scopé par l'ancêtre .cartefr-map-search (et non
 * .cartefr-map-search-input seul) : certains thèmes (ex. Neve) stylent les
 * champs natifs via des sélecteurs du type input[type="search"], dont la
 * spécificité (élément + attribut) dépasse une simple classe et écrasait
 * silencieusement padding/border/border-radius — invisible en local, réel
 * sur un site de production avec un thème agressif sur les formulaires.
 */
.cartefr-map-search .cartefr-map-search-input {
	width: 100%;
	padding: 11px 14px 11px 38px;
	font-size: 14px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	color: var(--cartefr-text);
	background: var(--cartefr-surface);
	border: 1px solid var(--cartefr-border);
	border-radius: 999px;
	box-shadow: 0 2px 10px -6px rgba(15, 23, 42, 0.12);
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	appearance: none;
	-webkit-appearance: none;
}

.cartefr-map-search .cartefr-map-search-input::-webkit-search-cancel-button {
	appearance: none;
	-webkit-appearance: none;
}

.cartefr-map-search .cartefr-map-search-input:focus {
	border-color: var(--cartefr-accent);
	box-shadow: 0 0 0 3px rgba(212, 19, 103, 0.12);
}

.cartefr-map-search .cartefr-map-search-input::placeholder {
	color: var(--cartefr-text-muted);
}

.cartefr-map-search .cartefr-search-suggestions {
	position: absolute;
	z-index: 20;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--cartefr-surface);
	border: 1px solid var(--cartefr-border);
	border-radius: var(--cartefr-radius-md);
	box-shadow: var(--cartefr-shadow);
	max-height: 300px;
	overflow-y: auto;
}

.cartefr-map-search .cartefr-search-suggestion {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 12px;
	border-radius: 8px;
	cursor: pointer;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

.cartefr-map-search .cartefr-search-suggestion.is-active,
.cartefr-map-search .cartefr-search-suggestion:hover {
	background: rgba(212, 19, 103, 0.08);
}

.cartefr-map-search .cartefr-search-suggestion-name {
	font-weight: 600;
	font-size: 13.5px;
	color: var(--cartefr-text);
}

.cartefr-map-search .cartefr-search-suggestion-dep {
	font-size: 12px;
	color: var(--cartefr-text-muted);
	white-space: nowrap;
}

/* --- Indication discrète (ex. "Aucun club dans cette zone") --- */

.cartefr-map-hint {
	position: absolute;
	left: 50%;
	top: 14px;
	transform: translate(-50%, -6px);
	padding: 7px 16px;
	background: var(--cartefr-surface);
	color: var(--cartefr-text-muted);
	font-size: 12.5px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	border: 1px solid var(--cartefr-border);
	border-radius: 999px;
	box-shadow: var(--cartefr-shadow);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
	z-index: 6;
	white-space: nowrap;
}

.cartefr-map-hint.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

@media (max-width: 640px) {
	.cartefr-map-search {
		max-width: none;
	}

	/* Sous 16px, Safari iOS zoome automatiquement la page au focus du champ. */
	.cartefr-map-search-input {
		font-size: 16px;
	}

	/* Cibles tactiles élargies (recommandation ~44px) : la zone cliquable du
	   marqueur par défaut (12px) et des boutons de zoom (30px) est trop juste
	   au doigt. Les marqueurs avec icône (30px + 7px de marge) sont déjà assez
	   grands et ne sont pas concernés. */
	.cartefr-marker--default {
		padding: 16px;
	}

	.cartefr-zoom-btn {
		width: 40px;
		height: 40px;
		font-size: 18px;
	}
}

.cartefr-map-inner {
	position: relative;
	width: 100%;
	aspect-ratio: 800 / 746.2951792775806;
	background: var(--cartefr-surface);
	border-radius: var(--cartefr-radius-lg);
	box-shadow: var(--cartefr-shadow);
	padding: 4%;
	overflow: hidden;
	cursor: grab;
	touch-action: none;
	/* Sans ça, un glisser tactile (pan) ou un appui long sélectionne le texte
	   des libellés ou déclenche le menu contextuel iOS au lieu de déplacer la carte. */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}

.cartefr-map-inner.is-panning {
	cursor: grabbing;
}

.cartefr-map-world {
	position: absolute;
	inset: 0;
	transform-origin: 0 0;
	will-change: transform;
}

.cartefr-map-world.is-animating {
	transition: transform 0.22s ease;
}

.cartefr-map-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.cartefr-map-shapes .cartefr-shape {
	fill: var(--cartefr-map-fill);
	stroke: var(--cartefr-accent);
	stroke-width: 0.75;
	stroke-linejoin: round;
}

.cartefr-map-shapes .cartefr-shape-andorra,
.cartefr-map-shapes .cartefr-shape-monaco {
	fill: var(--cartefr-map-fill);
	stroke: var(--cartefr-accent);
	stroke-width: 0.75;
	stroke-opacity: 0.6;
}

.cartefr-markers {
	position: absolute;
	inset: 0;
}

.cartefr-marker {
	position: absolute;
	/*
	 * transform-origin doit coïncider avec le point d'ancrage (centre du
	 * marqueur, à cause du translate ci-dessous) : sinon le contre-scale du
	 * zoom pivote autour d'un autre point que le point géographique réel, et
	 * le marqueur dérive visuellement de sa position — imperceptible à
	 * faible zoom, mais de plus en plus visible en s'approchant du zoom
	 * maximal. Ancrage centré (et non bas-centre façon "pin") : pour une
	 * commune dont le point réel se trouve tout près d'une frontière/côte
	 * (ex. Évian, Saint-Malo), un ancrage bas-centre ferait déborder tout le
	 * disque d'un seul côté du point (souvent le mauvais) ; centré, le léger
	 * débordement visuel inévitable à faible zoom (le disque fait plusieurs
	 * px, la marge réelle jusqu'au tracé peut être sub-pixel à ce niveau de
	 * zoom) se répartit également dans toutes les directions.
	 */
	transform-origin: 50% 50%;
	transform: translate(-50%, -50%) scale(calc(1 / var(--cartefr-scale, 1)));
	background: none;
	border: none;
	margin: 0;
	padding: 7px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	line-height: 0;
	/*
	 * Sans z-index explicite, l'empilement suit l'ordre du DOM (l'ordre des
	 * communes dans l'option cartefr_points), sans rapport avec le nombre de
	 * clubs : une commune à club unique insérée plus tard pouvait ainsi
	 * recouvrir visuellement le badge chiffré d'une commune à plusieurs
	 * clubs toute proche. cf. .cartefr-marker--multi ci-dessous pour la
	 * priorité réelle recherchée.
	 */
	z-index: 1;
}

/*
 * Renforce le "background: none" ci-dessus sur les états interactifs :
 * certains thèmes (ex. Neve) stylent tous les <button> via des sélecteurs
 * du type "button:hover", dont la spécificité (élément + pseudo-classe)
 * dépasse une simple classe comme .cartefr-marker et faisait apparaître un
 * carré de couleur (fond du thème) autour du point au survol/focus/clic —
 * invisible en local, réel sur un site de production avec un tel thème.
 */
.cartefr-marker:hover,
.cartefr-marker:focus,
.cartefr-marker.is-active {
	background: none;
}

/* Commune à plusieurs clubs : le badge chiffré doit toujours rester lisible
 * par-dessus les marqueurs simples avec lesquels il peut se chevaucher. */
.cartefr-marker--multi {
	z-index: 2;
}

.cartefr-marker.is-active,
.cartefr-marker:focus-visible {
	z-index: 3;
}

.cartefr-marker-dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--cartefr-accent);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.15);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	overflow: hidden;
}

.cartefr-marker--icon .cartefr-marker-dot {
	width: 30px;
	height: 30px;
	background: var(--cartefr-surface);
	border: 2px solid var(--cartefr-surface);
	box-shadow: 0 0 0 1px var(--cartefr-accent), 0 1px 3px rgba(15, 23, 42, 0.12);
}

.cartefr-marker:hover .cartefr-marker-dot {
	transform: scale(1.08);
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
}

.cartefr-marker--icon:hover .cartefr-marker-dot {
	box-shadow: 0 0 0 1px var(--cartefr-accent), 0 2px 6px rgba(15, 23, 42, 0.16);
}

/*
 * :focus (et pas seulement :focus-visible) neutralise tout style de focus
 * natif du navigateur dans tous les cas — sinon un moteur qui ne ferait pas
 * correspondre le clic à :focus-visible pourrait laisser apparaître son
 * anneau bleu par défaut le temps du clic. L'anneau cranberry ci-dessous ne
 * s'affiche lui que pour :focus-visible (navigation clavier), jamais au clic.
 */
.cartefr-marker:focus {
	outline: none;
}

/*
 * Anneau plein (pas de transparence) : à 3px cranberry translucide, le
 * contraste non-textuel contre un fond clair reste sous le seuil de 3:1
 * recommandé pour un indicateur de focus. Le séparateur blanc détache
 * l'anneau du point plutôt que de le faire toucher directement.
 */
.cartefr-marker:focus-visible .cartefr-marker-dot {
	box-shadow: 0 0 0 2px var(--cartefr-surface), 0 0 0 4px var(--cartefr-accent);
}

.cartefr-marker--icon:focus-visible .cartefr-marker-dot {
	box-shadow: 0 0 0 1px var(--cartefr-accent), 0 0 0 3px var(--cartefr-surface), 0 0 0 5px var(--cartefr-accent);
}

/* État actif : discret mais net (pas de halo épais, pas de "pop" agressif). */
.cartefr-marker.is-active .cartefr-marker-dot {
	transform: scale(1.1);
	box-shadow: 0 0 0 4px rgba(212, 19, 103, 0.16), 0 2px 6px rgba(15, 23, 42, 0.2);
}

.cartefr-marker--icon.is-active .cartefr-marker-dot {
	box-shadow: 0 0 0 1px var(--cartefr-accent), 0 0 0 5px rgba(212, 19, 103, 0.16), 0 2px 6px rgba(15, 23, 42, 0.18);
}

.cartefr-marker-icon {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cartefr-marker-count {
	position: absolute;
	top: 3px;
	right: 3px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--cartefr-text);
	color: #fff;
	font-size: 9.5px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
	box-shadow: 0 0 0 2px var(--cartefr-surface);
}

/* --- Libellés géographiques (régions / départements / communes) --- */

.cartefr-geo-labels {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 4;
}

.cartefr-geo-label {
	position: absolute;
	transform: translate(-50%, -50%);
	white-space: nowrap;
	pointer-events: none;
	color: var(--cartefr-text-muted);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	transition: opacity 0.2s ease;
	will-change: opacity;
}

.cartefr-geo-label--region {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #b9a9b3;
}

.cartefr-geo-label--departement {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: #b3a6ac;
}

.cartefr-geo-label--grande {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--cartefr-text);
}

.cartefr-geo-label--moyenne {
	font-size: 11px;
	font-weight: 600;
	color: var(--cartefr-text);
	opacity: 0.85;
}

.cartefr-geo-label--petite {
	font-size: 10px;
	font-weight: 500;
	color: var(--cartefr-text-muted);
}

.cartefr-geo-label--village {
	font-size: 9.5px;
	font-weight: 400;
	color: var(--cartefr-text-muted);
}

/*
 * Communes à club (toujours visibles) et commune activement recherchée :
 * couleur accent, identique à celle des marqueurs et des frontières — pour
 * rester reconnaissable au premier coup d'œil. Un halo clair est nécessaire
 * car cette même couleur accent sert aussi au tracé des frontières : sans lui,
 * un nom passant devant une frontière deviendrait illisible.
 */
.cartefr-geo-label--active,
.cartefr-geo-label--club {
	color: var(--cartefr-accent);
	text-shadow:
		0 0 3px var(--cartefr-surface),
		0 0 3px var(--cartefr-surface),
		0 1px 2px var(--cartefr-surface);
}

.cartefr-geo-label--active {
	font-size: 13px;
	font-weight: 700;
}

.cartefr-geo-label--club {
	font-size: 12.5px;
	font-weight: 700;
}

/*
 * Libellé d'une commune à club : cliquable au même titre que son marqueur
 * (cf. frontend.js, délégation par data-commune-code). Pas d'effet sur
 * l'opacity — déjà pilotée en inline par le fondu d'apparition/disparition,
 * qui l'emporterait sur toute règle CSS de survol.
 */
.cartefr-geo-label--clickable {
	pointer-events: auto;
	cursor: pointer;
	border-radius: 3px;
	text-decoration-line: underline;
	text-decoration-color: transparent;
	text-underline-offset: 2px;
	transition: opacity 0.2s ease, text-decoration-color 0.15s ease;
}

.cartefr-geo-label--clickable:hover,
.cartefr-geo-label--clickable:focus-visible {
	text-decoration-color: currentColor;
}

/* Cf. .cartefr-marker:focus ci-dessus : neutralise tout style de focus natif. */
.cartefr-geo-label--clickable:focus {
	outline: none;
}

.cartefr-geo-label--clickable:focus-visible {
	outline: 2px solid var(--cartefr-accent);
	outline-offset: 3px;
}

/* --- Contrôles de zoom --- */

.cartefr-map-controls {
	position: absolute;
	right: 14px;
	bottom: 14px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	z-index: 5;
}

.cartefr-zoom-btn {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var(--cartefr-border);
	background: var(--cartefr-surface);
	color: var(--cartefr-text);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}

.cartefr-zoom-btn:hover {
	background: var(--cartefr-accent);
	border-color: var(--cartefr-accent);
	color: var(--cartefr-accent-contrast);
}

.cartefr-zoom-btn:active {
	transform: scale(0.94);
}

.cartefr-zoom-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(212, 19, 103, 0.3);
}

.cartefr-zoom-btn:disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

/* --- Popup : petite carte attachée au marqueur, pas de fenêtre modale --- */

.cartefr-popup {
	position: fixed;
	width: min(320px, calc(100vw - 24px));
	max-height: min(70vh, 480px);
	overflow-y: auto;
	background: var(--cartefr-surface);
	border-radius: var(--cartefr-radius-lg);
	box-shadow: 0 12px 32px -14px rgba(15, 23, 42, 0.22), 0 2px 10px rgba(15, 23, 42, 0.06);
	padding: 20px 22px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
	z-index: 100000;
}

.cartefr-popup.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.cartefr-popup-tail {
	position: absolute;
	bottom: -5px;
	width: 10px;
	height: 10px;
	background: var(--cartefr-surface);
	transform: translateX(-50%) rotate(45deg);
	box-shadow: 3px 3px 6px -3px rgba(15, 23, 42, 0.16);
}

.cartefr-popup--below .cartefr-popup-tail {
	bottom: auto;
	top: -5px;
	box-shadow: -3px -3px 6px -3px rgba(15, 23, 42, 0.14);
}

.cartefr-popup-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: none;
	background: rgba(20, 22, 31, 0.05);
	color: var(--cartefr-text-muted);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.cartefr-popup-close:hover {
	background: rgba(20, 22, 31, 0.1);
	color: var(--cartefr-text);
}

.cartefr-popup-eyebrow {
	margin: 0 26px 10px 0;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--cartefr-text-muted);
}

.cartefr-popup-eyebrow[hidden] {
	display: none;
}

.cartefr-popup-club + .cartefr-popup-club {
	margin-top: 16px;
}

.cartefr-popup-divider {
	margin: 16px 0;
	border: none;
	border-top: 1px solid var(--cartefr-border);
}

.cartefr-popup-icon {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: 12px;
	display: block;
	box-shadow: 0 0 0 1px var(--cartefr-border);
}

.cartefr-popup-title {
	margin: 0 0 6px;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--cartefr-accent);
	padding-right: 20px;
}

.cartefr-popup-description {
	margin: 0 0 12px;
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--cartefr-text-muted);
	white-space: pre-line;
}

.cartefr-popup-clubs--multi .cartefr-popup-description {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cartefr-popup-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: 4px;
	border: 1.5px solid var(--cartefr-accent);
	background: transparent;
	color: var(--cartefr-accent);
	text-decoration: none;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.cartefr-popup-link:hover {
	background: var(--cartefr-accent);
	color: var(--cartefr-accent-contrast);
}

@media (max-width: 640px) {
	.cartefr-popup {
		left: 0 !important;
		right: 0;
		top: auto !important;
		bottom: 0;
		width: 100%;
		max-height: 75vh;
		border-radius: 14px 14px 0 0;
		padding: 22px 20px 26px;
		transform: translateY(100%);
	}

	.cartefr-popup.is-open {
		transform: translateY(0);
	}

	.cartefr-popup-tail {
		display: none;
	}
}