/**
 * Carte SVG CercleKit — styles.
 * Les couleurs/tailles sont pilotées par des variables CSS posées par le widget
 * Elementor sur .ck-svgmap (onglet Style). Repli hérité de l'identité CercleKit.
 */

.ck-svgmap {
	--ck-map-fill:     #e8e6f4;
	--ck-map-hover:    #534ab7;
	--ck-map-stroke:   #ffffff;
	--ck-map-stroke-w: 1px;
	--ck-map-h:        520px;
	--ck-map-accent:   #534ab7;
	--ck-map-ctrl-text:#1a1a2e;
	--ck-map-marker:          #d85830;
	--ck-map-marker-size:     14px;
	--ck-map-marker-stroke:   #ffffff;
	--ck-map-marker-stroke-w: 2px;
	--ck-map-ctx-fill:   #f0eef7;
	--ck-map-ctx-stroke: #ffffff;
	--ck-map-label:        #fffcf8;
	--ck-map-label-size:   13px;
	--ck-map-label-halo:   rgba(11, 23, 38, .45);
	--ck-map-label-halo-w: 3px;
	--ck-map-label-out:      #0b1726;
	--ck-map-label-out-halo: transparent;
	--ck-map-siege-dot:          #fffcf8;
	--ck-map-siege-dot-stroke:   rgba(11, 23, 38, .5);
	--ck-map-siege-dot-stroke-w: 2px;
	--ck-map-siege-text:     #fffcf8;
	--ck-map-siege-halo:     rgba(11, 23, 38, .5);
	--ck-map-siege-halo-w:   4px;
	--ck-map-siege-size:     16px;
	--ck-map-siege-sub-size: 12px;

	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	font-family: inherit;
}

/* --- Barre : retour + fil d'Ariane --- */
.ck-svgmap__bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 12px;
	min-height: 28px;
}

/* Le bouton Retour a deux vies : pilule intégrée par défaut, OU aspect du module
   Boutons CercleKit (classes ck-btn ck-btn--<slug> posées par le widget) — dans ce
   cas la pilule s'efface entièrement (:not(.ck-btn)) et le module prend la main. */
.ck-svgmap__back {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	cursor: pointer;
}
.ck-svgmap__back:not(.ck-btn) {
	border: 1px solid color-mix(in srgb, var(--ck-map-accent) 40%, transparent);
	background: color-mix(in srgb, var(--ck-map-accent) 8%, transparent);
	color: var(--ck-map-accent);
	font: inherit;
	font-size: 0.85em;
	line-height: 1;
	padding: 6px 12px;
	border-radius: 999px;
	transition: background .15s, color .15s;
}
.ck-svgmap__back:not(.ck-btn):hover {
	background: var(--ck-map-accent);
	color: #fff;
}
.ck-svgmap__back > span { font-size: 1.2em; }

.ck-svgmap__crumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 6px;
	font-size: 0.85em;
	color: var(--ck-map-ctrl-text);
}
.ck-svgmap__crumb-link {
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	color: var(--ck-map-accent);
	cursor: pointer;
	text-decoration: none;
}
.ck-svgmap__crumb-link:hover { text-decoration: underline; }
.ck-svgmap__crumb-cur { font-weight: 600; }
.ck-svgmap__sep { opacity: .5; }

/* --- Boutons + / - : rapprocher l'etage affiche ---------------------------
   Un zoom d'AFFICHAGE, pas un drill-down : il ne change pas d'etage. Sur un
   telephone, une carte de region tombe a 300 px de haut et les noms ne se
   lisent plus — le drill-down, lui, emmene ailleurs, ce n'est pas la meme
   envie. La barre est toujours construite ; c'est --ck-map-zoom-ui qui decide
   de la montrer, ce qui la rend reglable PAR APPAREIL. */
.ck-svgmap__zoomui {
	position: absolute;
	z-index: 2;
	top:    var(--ck-map-zoom-top, 10px);
	left:   var(--ck-map-zoom-left, 10px);
	right:  var(--ck-map-zoom-right, auto);
	bottom: var(--ck-map-zoom-bottom, auto);
	display: var(--ck-map-zoom-ui, none);
	flex-direction: column;
	gap: 8px;
}
.ck-svgmap__zoomgrp {
	display: flex;
	flex-direction: column;
	background: var(--ck-map-zoom-bg, #ffffff);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(11, 23, 38, .18), 0 4px 12px rgba(11, 23, 38, .10);
	overflow: hidden;
}
.ck-svgmap__zoombtn {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: none;
	margin: 0;
	padding: 0;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ck-map-ctrl-text);
	cursor: pointer;
	transition: background .15s ease;
}
.ck-svgmap__zoombtn:hover { background: rgba(11, 23, 38, .06); }
/* Bute en haut ou en bas de la course : le bouton le DIT, il ne se contente
   pas de ne rien faire. */
.ck-svgmap__zoombtn:disabled { opacity: .3; cursor: default; background: none; }
.ck-svgmap__zoombtn + .ck-svgmap__zoombtn { border-top: 1px solid rgba(11, 23, 38, .12); }
.ck-svgmap__zoombtn svg { width: 18px; height: 18px; display: block; }

/* Le recadrage n'a de sens qu'une fois zoome. */
.ck-svgmap__zoomreset { display: none; }
.ck-svgmap.is-zoomed .ck-svgmap__zoomreset { display: flex; }

/* Glisser la carte : seulement quand il y a de quoi glisser. */
.ck-svgmap.is-zoomed .ck-svgmap__stage { cursor: grab; touch-action: none; }
.ck-svgmap.is-zoomed .ck-svgmap__stage.is-panning { cursor: grabbing; }

/* --- Scène (SVG) --- */
/* HAUTEUR AUTOMATIQUE. Une carte ne remplit jamais que SA FORME : le dessin se
   cale sur la plus petite des deux contraintes, et sur un ecran etroit c'est
   toujours la largeur. Garder une boite plus haute n'ajoutait que du vide
   (mesure, ecran 375 : 520 px regles, 302 px dessines, 218 px de vide — et
   monter a 800 px n'agrandissait la carte d'aucun pixel, seulement le vide).
   La scene prend donc le rapport de la carte, pose par le moteur des qu'il le
   connait (--ck-map-ar), et le reglage « Hauteur » devient un PLAFOND.
   Avant que le rapport soit connu, la hauteur reglee tient la place : sans
   elle la page sauterait a l'arrivee de la carte. */
.ck-svgmap__stage {
	position: relative;
	width: 100%;
	height: var(--ck-map-h);
	max-height: var(--ck-map-h);
	min-height: 160px;
	overflow: hidden; /* le SVG zoomé (drill-down animé) ne doit pas déborder */
}
.ck-svgmap__svg {
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible;
}

/* Zoom animé au clic sur une zone (le fetch tourne pendant la transition) */
.ck-svgmap__svg.is-zooming {
	transition: transform .38s cubic-bezier(.4, 0, .2, 1);
	will-change: transform;
}
/* Fondu d'entrée du nouveau niveau après le zoom */
.ck-svgmap__stage.is-entering .ck-svgmap__svg {
	animation: ck-svgmap-enter .28s ease;
}
@keyframes ck-svgmap-enter {
	from { opacity: 0; transform: scale(.94); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.ck-svgmap__svg.is-zooming { transition: none; }
	.ck-svgmap__stage.is-entering .ck-svgmap__svg { animation: none; }
}

/* Fond de contexte : la France en pâle derrière une zone sur mesure. Inerte —
   pointer-events: none garantit qu'il n'intercepte ni clic ni survol, y compris
   sous les départements de la zone. */
.ck-svgmap__ctx {
	fill: var(--ck-map-ctx-fill);
	stroke: var(--ck-map-ctx-stroke);
	stroke-width: var(--ck-map-stroke-w);
	pointer-events: none;
}

.ck-svgmap__zone {
	fill: var(--z, var(--ck-map-fill));
	stroke: var(--ck-map-stroke);
	stroke-width: var(--ck-map-stroke-w);
	vector-effect: non-scaling-stroke; /* épaisseur constante quelle que soit l'échelle */
	cursor: pointer;
	transition: fill .15s ease;
}
.ck-svgmap__zone:hover {
	fill: var(--ck-map-hover);
}
.ck-svgmap__zone.is-static { cursor: default; }
.ck-svgmap--nodrill .ck-svgmap__zone.is-static { cursor: default; }

/* ============================ MODE FOND DE CARTE (tuiles) ============================ */
.ck-svgmap__leaflet {
	width: 100%;
	height: var(--ck-map-h, 520px);
	min-height: 200px;
	border-radius: inherit;
	overflow: hidden;
	background: #e8ecef;
}
.ck-svgmap__leaflet .ck-svgmap__loading { height: 100%; }

/* Pin teardrop (recoloré via --ck-map-marker) */
.ck-svgmap__pin { display: block; width: 100%; height: 100%; }
.ck-svgmap__pin svg {
	width: 100%; height: 100%;
	fill: var(--ck-map-marker, #d85830);
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
}

/* Boutons de contrôle (zoom / position / plein écran) — ronds blancs façon appli carto */
.ck-svgmap--tiles .leaflet-bar,
.ck-svgmap__ctrl {
	border: 0 !important;
	border-radius: 12px !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .16) !important;
	overflow: hidden;
}
.ck-svgmap--tiles .leaflet-bar a,
.ck-svgmap__ctrl-btn {
	width: 40px; height: 40px; line-height: 40px;
	color: var(--ck-map-ctrl-text, #1a1a2e);
	background: #fff;
	display: flex; align-items: center; justify-content: center;
	border-bottom: 1px solid rgba(0, 0, 0, .06) !important;
}
.ck-svgmap--tiles .leaflet-bar a:hover,
.ck-svgmap__ctrl-btn:hover { background: #f3f4f7; color: var(--ck-map-accent, #534ab7); }
.ck-svgmap--tiles .leaflet-control-zoom { margin-left: 14px; margin-top: 14px; }

/* Popup (mode tuiles) — habillée par les mêmes vars que l'infobulle, replis blancs */
.ck-svgmap--tiles .leaflet-popup-content-wrapper {
	background: var(--ck-map-tip-bg, #fff);
	color: var(--ck-map-tip-text, inherit);
	border-radius: var(--ck-map-tip-radius, 12px);
}
.ck-svgmap--tiles .leaflet-popup-tip {
	background: var(--ck-map-tip-bg, #fff);
}
.ck-svgmap__pop { font: inherit; min-width: 160px; }
.ck-svgmap__pop-title { display: block; font-size: 1.02em; margin-bottom: 2px; }
.ck-svgmap__pop-addr { display: block; font-size: .85em; opacity: .8; }
.ck-svgmap__pop-link {
	display: inline-block; margin-top: 8px; font-size: .85em; font-weight: 600;
	color: var(--ck-map-accent, #534ab7); text-decoration: none;
}
.ck-svgmap__pop-link:hover { text-decoration: underline; }

/* --- Marqueurs (points de carte) --- */
.ck-svgmap__marker { cursor: default; }
.ck-svgmap__marker.is-link { cursor: pointer; }
.ck-svgmap__marker-dot {
	/* Taille voulue (slider Elementor, px écran) × compensation d'échelle du niveau
	   (posée par le moteur à chaque rendu) → taille écran constante ET réglage vivant. */
	fill: var(--ck-map-marker);
	/* `vector-effect: non-scaling-stroke` fait lire l'epaisseur en PIXELS ECRAN,
	   quelle que soit l'echelle de l'etage : pas de calc a faire, et le lisere
	   garde la meme finesse a tous les niveaux de zoom.
	   Il n'y a plus UNE SEULE valeur en dur ici : une couleur ecrite en dur sous
	   la variable la neutralisait en silence, et le reglage semblait casse. */
	stroke: var(--ck-map-marker-stroke);
	stroke-width: var(--ck-map-marker-stroke-w);
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	paint-order: stroke;
	transition: fill .15s ease;
}
.ck-svgmap__marker:hover .ck-svgmap__marker-dot { filter: brightness(0.88); }

/* Nom affiché en permanence à côté du point. La taille finale vient du moteur
   (font-size en em, compensé par l'échelle de l'étage) ; ici on ne fixe que
   l'aspect. `paint-order: stroke` dessine le contour SOUS le texte : c'est un
   liseré qui détache le nom de la carte, pas un gras qui l'épaissit. */
.ck-svgmap__marker-label {
	font-family: inherit;
	font-weight: 600;
	/* La taille est un REGLAGE, multiplie par la compensation d'echelle de
	   l'etage courant (--ck-map-r-scale, publiee par le moteur). Elle ne doit
	   JAMAIS etre ecrite en dur par le JS : ca rendait le curseur inerte.
	   Le contour suit la meme regle, sinon son epaisseur change au zoom. */
	font-size: calc(var(--ck-map-label-size, 13px) * var(--ck-map-r-scale, 1));
	fill: var(--ck-map-label);
	paint-order: stroke;
	stroke: var(--ck-map-label-halo);
	stroke-width: var(--ck-map-label-halo-w, 3px);
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	pointer-events: none;
}

/* Survol des points desactive : ni infobulle (cote moteur), ni changement de
   teinte, ni curseur qui promet un clic. */
.ck-svgmap--nomkhover .ck-svgmap__marker:hover .ck-svgmap__marker-dot { filter: none; }

/* Icone personnalisee : c'est une IMAGE, ni le remplissage ni le contour des
   formes vectorielles ne s'y appliquent — les laisser produirait un liseré
   parasite autour du cadre de l'image. */
.ck-svgmap__marker-icon {
	fill: none;
	stroke: none;
	paint-order: normal;
}

/* Icone de bibliotheque (Lucide, Tabler…) : un glyphe de police, donc du HTML
   loge dans un <foreignObject>. Il prend la couleur des marqueurs comme les
   formes vectorielles, et se centre dans son cadre. */
/* Trace d'icone pose dans la carte : il herite de la couleur des marqueurs par
   `currentColor`, exactement comme les formes vectorielles. */
.ck-svgmap__marker-trace { color: var(--ck-map-marker); overflow: visible; }

.ck-svgmap__marker-fo { overflow: visible; }
.ck-svgmap__icon-box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	line-height: 1;
	color: var(--ck-map-marker);
}
.ck-svgmap__icon-box i,
.ck-svgmap__icon-box svg {
	font-size: inherit;
	width: 1em;
	height: 1em;
	display: block;
	fill: currentColor;
}

/* Un point hors de la zone se pose sur le fond de la PAGE, pas sur la couleur :
   les teintes prevues pour l'un sont illisibles sur l'autre. Il lui faut donc
   les siennes (constate : « Luxembourg » en creme sur blanc, invisible). */
.ck-svgmap__marker.is-outside .ck-svgmap__marker-label {
	fill: var(--ck-map-label-out);
	stroke: var(--ck-map-label-out-halo);
}

/* --- Siège social : le logo posé à même la carte --- */
.ck-svgmap__siege { pointer-events: none; }
.ck-svgmap__siege.is-link { pointer-events: auto; cursor: pointer; }
/* Le point du siege : ses propres couleurs, independantes du texte. Contour
   compense par l'echelle, sinon son epaisseur change d'un etage a l'autre. */
.ck-svgmap__siege-dot {
	fill: var(--ck-map-siege-dot);
	stroke: var(--ck-map-siege-dot-stroke);
	stroke-width: var(--ck-map-siege-dot-stroke-w, 2px);
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}
.ck-svgmap__siege-name,
.ck-svgmap__siege-sub {
	font-family: inherit;
	fill: var(--ck-map-siege-text);
	paint-order: stroke;
	stroke: var(--ck-map-siege-halo);
	stroke-width: var(--ck-map-siege-halo-w, 4px);
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}
.ck-svgmap__siege-name {
	font-weight: 700;
	font-size: calc(var(--ck-map-siege-size, 16px) * var(--ck-map-r-scale, 1));
}
.ck-svgmap__siege-sub {
	font-weight: 600;
	opacity: .9;
	font-size: calc(var(--ck-map-siege-sub-size, 12px) * var(--ck-map-r-scale, 1));
}
.ck-svgmap__siege.is-link:hover .ck-svgmap__siege-logo { opacity: .82; }

/* --- Infobulle ---
   Le rendu est piloté par des vars (onglet Style › Infobulle du widget) avec
   replis = look historique. Les mêmes vars habillent la popup du mode tuiles. */
.ck-svgmap__tip {
	position: absolute;
	z-index: 5;
	pointer-events: none;
	max-width: var(--ck-map-tip-maxw, 240px);
	background: var(--ck-map-tip-bg, #1a1a2e);
	color: var(--ck-map-tip-text, #fff);
	font-size: 0.8em;
	line-height: 1.35;
	padding: 6px 10px;
	border-radius: var(--ck-map-tip-radius, 8px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
	opacity: 0;
	transform: translateY(2px);
	transition: opacity .12s ease, transform .12s ease;
}
.ck-svgmap__tip.is-on,
.ck-svgmap__tip.is-flash {
	opacity: 1;
	transform: translateY(0);
}
.ck-svgmap__tip.is-flash {
	left: 50% !important;
	top: 8px !important;
	transform: translateX(-50%);
	background: #b3261e;
}
.ck-svgmap__tip-name { display: block; font-weight: 600; }
.ck-svgmap__tip-txt  { display: block; opacity: .85; margin-top: 2px; }

/* --- États --- */
.ck-svgmap__loading,
.ck-svgmap__error {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--ck-map-h);
	color: color-mix(in srgb, var(--ck-map-ctrl-text) 55%, transparent);
	font-size: 0.9em;
}
.ck-svgmap__error { color: #b3261e; }

.ck-svgmap--loading .ck-svgmap__stage::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, .45);
	backdrop-filter: blur(1px);
}
.ck-svgmap--loading .ck-svgmap__stage::before {
	content: "";
	position: absolute;
	z-index: 2;
	top: 50%; left: 50%;
	width: 26px; height: 26px;
	margin: -13px 0 0 -13px;
	border: 3px solid color-mix(in srgb, var(--ck-map-accent) 25%, transparent);
	border-top-color: var(--ck-map-accent);
	border-radius: 50%;
	animation: ck-svgmap-spin .7s linear infinite;
}
@keyframes ck-svgmap-spin { to { transform: rotate(360deg); } }

/* ============================ BLINDAGE THÈME (front) ============================
   Un thème qui style `button`/`a` avec un sélecteur type `.site button` (0,1,1)
   bat une classe simple (0,1,0) → « ça marche pas en front » alors que l'aperçu
   admin est bon. Parade éprouvée (cf. burger/formulaires) : doubler la spécificité
   (.ck-svgmap .classe = 0,2,0) et RE-DÉCLARER tout ce qu'un thème impose
   couramment (fond, bordure, ombre, casse, espacement, tailles mini). */
.ck-svgmap .ck-svgmap__back:not(.ck-btn),
.ck-svgmap .ck-svgmap__crumb-link {
	-webkit-appearance: none;
	appearance: none;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	text-shadow: none;
	min-width: 0;
	min-height: 0;
	width: auto;
	height: auto;
	margin: 0;
	font-family: inherit;
	font-weight: 400;
	cursor: pointer;
}
.ck-svgmap .ck-svgmap__back:not(.ck-btn) {
	border: 1px solid color-mix(in srgb, var(--ck-map-accent) 40%, transparent);
	background: color-mix(in srgb, var(--ck-map-accent) 8%, transparent);
	color: var(--ck-map-accent);
	font-size: 0.85em;
	line-height: 1;
	padding: 6px 12px;
	border-radius: 999px;
}
.ck-svgmap .ck-svgmap__back:not(.ck-btn):hover {
	background: var(--ck-map-accent);
	color: #fff;
}
/* Les thèmes réappliquent souvent leur fond sur button:focus → on fige le nôtre */
.ck-svgmap .ck-svgmap__back:not(.ck-btn):focus {
	outline: none;
	background: var(--ck-map-accent);
	color: #fff;
	box-shadow: none;
}
.ck-svgmap .ck-svgmap__back:not(.ck-btn):focus-visible {
	outline: 2px solid var(--ck-map-accent);
	outline-offset: 2px;
}
.ck-svgmap .ck-svgmap__crumb-link {
	background: none;
	border: 0;
	padding: 0;
	border-radius: 0;
	color: var(--ck-map-accent);
	font-size: inherit;
	text-decoration: none;
}
.ck-svgmap .ck-svgmap__crumb-link:hover,
.ck-svgmap .ck-svgmap__crumb-link:focus {
	background: none;
	color: var(--ck-map-accent);
	text-decoration: underline;
	outline: none;
	box-shadow: none;
}
/* Liens des contrôles Leaflet et de la popup : pas de soulignement/ombre du thème */
.ck-svgmap--tiles .leaflet-container a { text-decoration: none; box-shadow: none; }
.ck-svgmap .ck-svgmap__pop-link { box-shadow: none; border: 0; background: none; }

/* Survol neutralisé sur un niveau personnalisé (Zones par niveau → « Effet au survol : Non ») */
.ck-svgmap--nohover .ck-svgmap__zone,
.ck-svgmap--nohover .ck-svgmap__zone:hover {
	fill: var(--z, var(--ck-map-fill));
}