html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; } /* Prevent any page scroll/white bars */
/* Disable browser gestures globally except map */
body { touch-action: none; }
/* Fill the viewport reliably on mobile (fallback to 100vh) */
#map { height: 100vh; height: 100dvh; }
/* Allow gestures on map */
#map, .leaflet-container { touch-action: pinch-zoom pan-x pan-y; }
.emoji-marker { font-size: 1.5rem; line-height: 1.5rem; text-align: center; }
.leaflet-popup-content { font-size: 0.875rem; }
/* Keep popup width at 190px; wrap description text on multiple lines */
.leaflet-popup-content-wrapper { min-width: unset; max-width: unset; width: auto; }
.leaflet-popup-content { width: 190px; max-width: none; }
.leaflet-popup-content .description-text { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
/* Description toggle button now replaced by inline read-more */

/* Styles pour les markers Live */
.live-user-marker {
  /* IMPORTANT: Do NOT set transform/position/animation here.
     Leaflet positions this element via translate3d(...).
     Any transform/position here would override Leaflet and push the icon to top-left. */
  z-index: 10000 !important;
  pointer-events: auto !important;
}

.live-user-marker div {
  /* Animate only the INNER node so Leaflet's translate3d on the container stays intact */
  font-size: 2rem !important;
  line-height: 2rem !important;
  text-shadow: 0 0 0.3125rem white, 0 0 0.625rem white !important;
  filter: drop-shadow(0 0 0.1875rem rgba(0,0,0,0.5)) !important;
  animation: pulse 2s infinite; /* safe: applies on inner node, not on container */
}

/* Apply same pulse/shadow effect to custom image icons used for Live Riders */
.live-user-marker img {
  /* Keep animation on the inner element to preserve Leaflet's positioning */
  filter: drop-shadow(0 0 0.3125rem rgba(255,255,255,0.9))
          drop-shadow(0 0 0.625rem rgba(255,255,255,0.8))
          drop-shadow(0 0 0.1875rem rgba(0,0,0,0.5));
  animation: pulse 2s infinite;
  pointer-events: none; /* ensure clicks go to the marker */
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Garder les crédits en bas */
.leaflet-bottom.leaflet-right .leaflet-control-attribution {
    margin-bottom: 0 !important;
}

/* Smaller OSM attribution text */
.leaflet-control-attribution { font-size: 0.3438rem !important; }

/* Slightly smaller square markers */
.rms-marker div{ width:0.875rem; height:0.875rem; border-radius:0.125rem; background:#fff; }

#slopeProfilePopup {
  position: fixed;
  top: 4.5rem;
  right: 0.75rem;
  width: min(20rem, 85vw);
  padding: 0.75rem 0.875rem 0.875rem;
  background: #fff;
  border-radius: 0.75rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 0.75rem 1.5rem rgba(15, 23, 42, 0.18);
  z-index: 1200;
  transition: opacity 0.2s ease, transform 0.2s ease;
  font-size: 0.875rem;
}
#slopeProfilePopup.slope-profile-hidden {
  opacity: 0;
  transform: translateY(-0.5rem);
  pointer-events: none;
}
.slope-profile-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}
.slope-profile-title {
  display: flex;
  gap: 0.5rem;
}
.slope-profile-icon {
  font-size: 1.5rem;
  line-height: 1.5rem;
}
#slopeProfileLabel {
  font-weight: 600;
  font-size: 0.9375rem;
  color: #0f172a;
  line-height: 1.2;
}
#slopeProfileLabel .slope-label-category {
  display: block;
}
#slopeProfileLabel .slope-label-stats {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #475569;
  margin-top: 0.0625rem;
}
.slope-profile-gain {
  display: flex;
  gap: 0.75rem;
  font-size: 0.8125rem;
  color: #475569;
}
#slopeProfileClose {
  background: none;
  border: none;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  color: #475569;
  padding: 0;
}
.slope-profile-chart {
  margin-top: 0.5rem;
}
#slopeProfileChart {
  width: 100%;
  height: 80px;
  display: block;
}
#slopeProfileChart path {
  fill: #047a8c;
  fill-opacity: 0.85;
  stroke: none;
}
#slopeProfileChart line {
  stroke: #e2e8f0;
  stroke-width: 1;
}
#slopeProfileCursorLine {
  stroke: #0ea5e9;
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}
#slopeProfileCursorDot {
  fill: #0ea5e9;
  stroke: #fff;
  stroke-width: 1.5;
  pointer-events: none;
}
.slope-profile-altitudes {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  font-size: 0.8125rem;
  color: #0f172a;
  margin-top: 0.25rem;
}

@media (max-width: 768px) {
  #slopeProfilePopup {
    left: 0.55rem;
    right: 0.55rem;
    width: auto;
    bottom: 0.55rem;
    top: auto;
  }
}