.real-map-shell { position: relative; background: #dfe9ec; }
.map-card { margin: 0 22px 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; }
.map-detail { overflow: hidden; }
.route-map { position: relative; z-index: 0; width: 100%; background: #dfe9ec; }
.map-card .route-map { height: 220px; }
.map-detail .route-map { height: 430px; }
.detail-map-panel { margin-bottom: 20px; overflow: hidden; }

.map-fallback {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; color: #71828c;
  background: linear-gradient(145deg, #dce9e8, #e8edef 48%, #d9e5e2);
}
.fallback-grid {
  position: absolute; inset: -20%; opacity: .55;
  background-image: linear-gradient(rgba(91,124,133,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(91,124,133,.18) 1px, transparent 1px);
  background-size: 34px 34px; transform: rotate(-7deg);
}
.fallback-place {
  position: absolute; padding: 2px 4px; border-radius: 3px; color: #5c707a;
  background: rgba(246,249,249,.72); font-size: 10px; font-weight: 700; white-space: nowrap;
}
.place-sainte-adresse { left: 5%; top: 48%; }
.place-octeville { left: 25%; top: 8%; }
.place-fontaine { left: 48%; top: 23%; }
.place-montivilliers { left: 66%; top: 13%; }
.place-le-havre { left: 25%; top: 60%; font-size: 12px; }
.place-harfleur { left: 65%; top: 62%; }
.place-gonfreville { right: 3%; top: 75%; }

.map-offline-note {
  display: none; position: absolute; z-index: 900; left: 50%; top: 12px; transform: translateX(-50%);
  max-width: calc(100% - 24px); padding: 7px 10px; color: #6c4c18; background: rgba(255,244,221,.96);
  border: 1px solid #e8c982; border-radius: 7px; box-shadow: 0 3px 12px rgba(23,50,77,.12);
  font-size: 11px; font-weight: 700; text-align: center;
}
.tiles-unavailable .map-offline-note { display: block; }
.leaflet-unavailable .route-map { min-height: 220px; }

.map-meta {
  min-height: 38px; padding: 8px 10px; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; color: var(--muted); background: var(--white); border-top: 1px solid var(--line); font-size: 10px;
}
.map-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.map-legend > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.legend-marker {
  width: 19px; height: 19px; display: inline-grid; place-items: center; color: var(--white);
  font-size: 9px; font-style: normal; font-weight: 800;
  box-shadow: 0 0 0 2px var(--white), 0 0 0 3px rgba(23,50,77,.2);
}
.legend-a { border-radius: 50%; background: #3568b8; }
.legend-b { border-radius: 4px; background: #0f806d; }
.legend-depot { border-radius: 3px; background: var(--navy); }
.legend-new-client { border-radius: 50%; background: #d97706; box-shadow: 0 0 0 3px #fff0d6, 0 0 0 4px #d97706; }
.legend-route-line { width: 24px; height: 0; display: inline-block; border-top: 4px solid; border-radius: 999px; }
.legend-route-a { border-color: #3568b8; }
.legend-route-b { border-color: #0f806d; }
.map-disclaimer { white-space: nowrap; font-style: italic; }
.trace-ready .map-disclaimer { color: var(--teal-dark); }
.trace-unavailable .map-disclaimer { color: #8a4f18; font-style: normal; font-weight: 750; }

.map-div-icon { background: transparent; border: 0; }
.map-marker {
  width: 28px; height: 28px; display: grid; place-items: center; color: #fff; border: 2px solid #fff;
  font-size: 11px; font-weight: 800; box-shadow: 0 2px 8px rgba(23,50,77,.38);
}
.marker-route.marker-a { border-radius: 50%; background: #3568b8; }
.marker-route.marker-b { border-radius: 6px; background: #0f806d; }
.marker-depot { border-radius: 4px; background: var(--navy); }
.marker-new-client {
  width: 34px; height: 34px; border-radius: 50%; background: #d97706;
  box-shadow: 0 0 0 4px rgba(255,240,214,.95), 0 2px 10px rgba(92,55,7,.45);
}

.leaflet-container { z-index: 1; font-family: Inter, "Segoe UI", Arial, sans-serif; background: transparent; }
.leaflet-control-attribution { font-size: 9px; }
.map-popup { min-width: 170px; color: var(--ink); }
.map-popup strong, .map-popup > span { display: block; }
.map-popup strong { margin-bottom: 2px; color: var(--navy); font-size: 14px; }
.map-popup > span { margin-bottom: 8px; color: var(--muted); font-size: 11px; }
.map-popup dl { margin: 0; }
.map-popup dl > div { padding: 5px 0; display: grid; grid-template-columns: 66px 1fr; gap: 7px; border-top: 1px solid var(--line); }
.map-popup dt { color: var(--muted); font-size: 10px; }
.map-popup dd { margin: 0; font-size: 11px; font-weight: 700; }

@media (max-width: 650px) {
  .map-card { margin-inline: 14px; }
  .map-card .route-map { height: 250px; }
  .map-detail .route-map { height: 360px; }
  .map-meta { align-items: flex-start; flex-direction: column; }
  .map-disclaimer { white-space: normal; }
}