/* =========================================================
 * travel map
 * ========================================================= */
.map-container {
  display: none;
  position: fixed;
  inset: 0;
  overflow: hidden;
}


.map-container.show {
  display: block;
}


.map-container>.travelmap-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.map-container>.travelmap-container>.travelmap {
  position: relative;
  width: 100%;
  height: 100%;
}

/* =========================================================
 * Leaflet — tuiles / seams / quadrillage
 * ========================================================= */

.leaflet-container img,
.leaflet-container .leaflet-tile {
  max-width: none !important;
  max-height: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.leaflet-container .leaflet-tile-container {
  margin: -1px;
  will-change: transform;
}

.leaflet-container .leaflet-tile {
  transform: translateZ(0);
  backface-visibility: hidden;
}

.leaflet-container {
  transform: none !important;
  filter: none !important;
}

/* =========================================================
 * TravelMap — général
 * ========================================================= */

.travelmap .leaflet-interactive {
  transition:
    stroke-width 140ms ease,
    opacity 140ms ease,
    stroke 140ms ease;
}

.travelmap .leaflet-popup-content {
  margin: 10px 12px;
}

.travelmap .tm-popup {
  padding-top:5px;
  line-height: 1.35;
}

/* =========================================================
 * Marker base commun — container / label / hover
 * ========================================================= */

.marker-poi-container {
  position: relative;
  pointer-events: auto;
}

.marker-poi-container .marker-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition:
    transform 140ms ease,
    filter 140ms ease,
    opacity 140ms ease;
}

.marker-poi-container .marker-container.itinerary-marker-container {
  z-index: 600 !important;
}

.marker-poi-container .marker-container.itinerary-marker-container .marker {
  box-shadow: 0 0 0 3px #ff9800;
}


.marker-poi-container .marker-label {
  position: absolute;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  padding: 0;
  background: transparent;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    visibility 180ms ease;
}

/* affichage label */
.marker-poi-container.label-visible .marker-label,
.marker-poi-container.is-hover .marker-label,
.travelmap .marker-poi-container:hover .marker-label {
  opacity: 1;
  visibility: visible;
}

/* hover global */
.travelmap .marker-poi-container.is-hover .marker-container,
.travelmap .marker-poi-container:hover .marker-container {
  transform: translateY(-2px) scale(1.03);
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.25));
}

/* option : désactiver l’affichage du label au hover */
.marker-poi-container.poi-label-hover-disabled.is-hover .marker-label,
.travelmap .marker-poi-container.poi-label-hover-disabled:hover .marker-label {
  opacity: 0;
  visibility: hidden;
}

/* =========================================================
 * Positions label communes
 * ========================================================= */

.marker-poi-container.pos-right .marker-label {
  left: 100%;
  top: 50%;
  transform: translate(0, -50%);
  margin-left: 4px;
}

.marker-poi-container.pos-left .marker-label {
  right: 100%;
  top: 50%;
  transform: translate(0, -50%);
  margin-right: 8px;
}

.marker-poi-container.pos-top .marker-label {
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, 0);
  margin-bottom: 8px;
}

.marker-poi-container.pos-bottom .marker-label {
  left: 50%;
  top: 100%;
  transform: translate(-50%, 0);
  margin-top: 8px;
}

/* =========================================================
 * Transition caché → visible commune
 * ========================================================= */

.marker-poi-container.poi-label-managed:not(.label-visible):not(.is-hover).pos-right .marker-label {
  transform: translate(-4px, -50%);
}

.marker-poi-container.poi-label-managed:not(.label-visible):not(.is-hover).pos-left .marker-label {
  transform: translate(4px, -50%);
}

.marker-poi-container.poi-label-managed:not(.label-visible):not(.is-hover).pos-top .marker-label {
  transform: translate(-50%, 4px);
}

.marker-poi-container.poi-label-managed:not(.label-visible):not(.is-hover).pos-bottom .marker-label {
  transform: translate(-50%, -4px);
}

/* =========================================================
 * Marker POI stand
 * ========================================================= */

.marker-poi {
  z-index: 500;
  width: 24px;
  height: 32px;
}

.marker-poi .marker {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 24px;
  border-radius: 50% 50% 50% 0;
  transform: translate(-50%, -50%) rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.marker-poi .marker .inner {
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transform: rotate(45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.marker-poi .marker .inner .uiicon,
.marker-poi .marker .inner svg {
  width: 18px !important;
  height: 18px !important;
  display: block;
  flex: 0 0 18px;
}

.marker-poi .marker-label {
  text-shadow:
    0 1px 2px rgba(255, 255, 255, 0.92),
    0 2px 4px rgba(0, 0, 0, 0.38);
}

/* =========================================================
 * Marker POI road
 * ========================================================= */

.marker-poi-road {
  position: relative;
  z-index: 600 !important;
}

.marker-poi-road .marker-container {
  background-clip: padding-box;
  border-radius: 20px;
}

.marker-poi-road .marker {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin: 4px;
  padding: 1px 5px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}

.marker-poi-road .marker-label {
  text-shadow:
    0 1px 2px rgba(255, 255, 255, 0.92),
    0 2px 4px rgba(0, 0, 0, 0.38);
}

/* =========================================================
 * Thèmes road
 * ========================================================= */

.marker-poi-road.theme-blue .marker-container {
  background-color: rgba(66, 133, 244, 0.30);
}

.marker-poi-road.theme-blue .marker {
  background-color: rgba(26, 115, 232, 0.96);
  color: #fff;
}

.marker-poi-road.theme-blue .marker-label {
  color: #1a73e8;
}

/* exemple thème rose si besoin */
.marker-poi-road.theme-pink .marker-container {
  background-color: rgba(195, 11, 130, 0.18);
}

.marker-poi-road.theme-pink .marker {
  background-color: rgba(195, 11, 130, 0.96);
  color: #fff;
}

.marker-poi-road.theme-pink .marker-label {
  color: #c30b82;
}

.travelmap-fixed-popup {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 5000;
  width: min(300px, calc(100% - 24px));
  pointer-events: none;
}

.travelmap-fixed-popup-inner {
  pointer-events: auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  padding: 14px 16px;
  max-height: 35vh;
  overflow: auto;
}

.tm-selection-marker {
  background: transparent;
  border: none;
}

.tm-selection-marker-wrap {
  position: relative;
  width: 40px;
  height: 40px;
}

.tm-selection-marker-circle {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a73e8;
  border-radius: 50%;
  box-shadow:
    0 0 0 4px rgba(26, 115, 232, 0.25),
    0 6px 14px rgba(0, 0, 0, 0.25);
  animation: tm-marker-pop 160ms ease-out;
}

@keyframes tm-marker-pop {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }

  70% {
    transform: scale(1.08);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}