<script setup>
/**
 * RouteMap — carte de TOURNÉES réutilisable (revue du dispatch auto, onglet « Tournées », etc.).
 *
 * props.routes = [{ id, name, color, home:{lat,lon}|null, stops:[{lat,lon,seq,subject}] }]
 *  - LIGNES = couches GL (tracé instantané droit → géométrie ROUTIÈRE réelle OSRM via hub, cache module partagé)
 *  - ARRÊTS = MARQUEURS HTML (le numéro vit DANS la pastille = même élément, même niveau → jamais de chiffre orphelin
 *    par-dessus un voisin ; occlusion correcte). Au survol : la pastille passe au 1er plan ET si des pastilles se
 *    chevauchent, le groupe s'ÉCLATE en éventail pour les rendre toutes lisibles/cliquables.
 *  - émet 'metrics' { id:{km,mins} } (routes réelles) ; expose fitTo(id) / fitAll() / setActive(id).
 */
import { watch, onMounted, onBeforeUnmount } from 'vue'
import { installMaplibre, basemapStyle, addSatelliteLayer, satellitePref, setSatellitePref, setSatelliteVisible } from 'src/config/basemap' // fond MapLibre/OSM auto-hébergé (plus de Mapbox) + couche satellite ESRI
import * as roster from 'src/api/roster'
import { initials } from 'src/composables/useFormatters' // initiales (source unique, ex-locale dé-dupliquée)

const props = defineProps({
  routes: { type: Array, default: () => [] },
  live: { type: Array, default: () => [] }, // positions GPS LIVE : [{ techId, name|techName, color, lat, lon, time, speed(nœuds) }]
  pins: { type: Array, default: () => [] }, // jobs NON assignés à situer : [{ lat, lon, subject, name, color(priorité), city }]
  track: { type: Object, default: null }, // tracé GPS RÉEL (Traccar) d'UN tech sur la journée : { coords:[[lon,lat]…] } — couche orange au 1er plan (vs tournées prévues)
  height: { type: String, default: '440px' },
})
const emit = defineEmits(['metrics', 'stop-click', 'pin-click'])

let el = null; let map = null; let ro = null; let ready = false; let drawSeq = 0
let stopMk = []; let homeMk = []; let liveMk = []; let pinMk = [] // marqueurs HTML (arrêts + domiciles + positions live + jobs non assignés)
const _rmCache = RouteMapCache() // cache module (partagé entre instances) : signature → { geometry, km, mins }
function RouteMapCache () { const g = globalThis; if (!g.__opsRouteMapCache) g.__opsRouteMapCache = new Map(); return g.__opsRouteMapCache }
function setEl (node) { el = node }

function ensureMapbox () { return Promise.resolve(installMaplibre()) } // MapLibre bundlé + protocole pmtiles:// (alias window.mapboxgl)
const okLL = (lon, lat) => isFinite(+lon) && isFinite(+lat) && Math.abs(+lat) > 0.01 // écarte (0,0) / invalides qui feraient dézoomer la carte
function boundsOf (routes) {
  const b = new window.mapboxgl.LngLatBounds()
  for (const r of routes) { if (r.home && okLL(r.home.lon, r.home.lat)) b.extend([+r.home.lon, +r.home.lat]); for (const s of (r.stops || [])) if (okLL(s.lon, s.lat)) b.extend([+s.lon, +s.lat]) }
  return b
}
function lineFeatures (routes) {
  const lines = []
  for (const r of routes) {
    const coords = []
    if (r.home) coords.push([+r.home.lon, +r.home.lat])
    for (const s of (r.stops || [])) coords.push([+s.lon, +s.lat])
    if (r.home && coords.length >= 2) coords.push([+r.home.lon, +r.home.lat]) // RETOUR au départ : boucle domicile→arrêts→domicile
    if (coords.length >= 2) lines.push({ type: 'Feature', geometry: { type: 'LineString', coordinates: coords }, properties: { color: r.color, id: r.id, rid: r.id } })
  }
  return lines
}
async function realLine (r) { // géométrie routière réelle d'une tournée (OSRM via hub), cache par signature — BOUCLE avec retour au départ
  const pts = []; if (r.home) pts.push([+r.home.lon, +r.home.lat]); for (const s of (r.stops || [])) pts.push([+s.lon, +s.lat])
  if (r.home) pts.push([+r.home.lon, +r.home.lat]) // le tech revient à son point de départ → compté dans km/min
  if (pts.length < 2 || pts.length > 52) return null
  const sig = pts.map(p => p[0].toFixed(5) + ',' + p[1].toFixed(5)).join(';')
  if (_rmCache.has(sig)) return _rmCache.get(sig)
  try {
    const d = await roster.osrmRoute(pts)
    if (!d || !Array.isArray(d.geometry) || !d.geometry.length) return null
    const info = { geometry: { type: 'LineString', coordinates: d.geometry }, km: d.km, mins: d.mins }
    _rmCache.set(sig, info); return info
  } catch (e) { return null }
}

// ── Marqueurs HTML : le numéro est DANS la pastille (même élément, même niveau) ──
function clearMarkers () { for (const m of stopMk) m.mk.remove(); for (const m of homeMk) m.mk.remove(); stopMk = []; homeMk = [] }

// ── Positions GPS LIVE des techs (marqueur distinct des arrêts : pastille ronde à initiales + halo pulsé) ──
// initials → composables/useFormatters (source unique)
function clearLive () { for (const m of liveMk) m.mk.remove(); liveMk = [] }
function renderTrack (tk) { // tracé GPS réel (couche GL orange) — vidé si absent
  if (!map || !ready) return
  const src = map.getSource('rm-track'); if (!src) return
  const coords = (tk && Array.isArray(tk.coords)) ? tk.coords : []
  src.setData(coords.length >= 2 ? { type: 'Feature', geometry: { type: 'LineString', coordinates: coords }, properties: {} } : { type: 'FeatureCollection', features: [] })
}
function clearPins () { for (const m of pinMk) m.mk.remove(); pinMk = [] }
function renderLive (list) {
  if (!map || !ready) return
  clearLive()
  const mapboxgl = window.mapboxgl; const now = Date.now()
  for (const p of (list || [])) {
    if (!okLL(p.lon, p.lat)) continue
    const ageMin = p.time ? Math.round((now - Date.parse(p.time)) / 60000) : null
    const stale = ageMin != null && ageMin > 10 // > 10 min sans fix = position vieillie (pas de halo, grisée)
    const color = p.color || '#1e88e5'
    const wrap = document.createElement('div'); wrap.className = 'rm-live' + (stale ? ' stale' : '')
    // Élément INTERNE fannable : Mapbox pose sa transform de positionnement sur `wrap` (racine du marqueur) → on translate `inner`,
    // pas `wrap` (comme les arrêts translatent .rm-pill, enfant de .rm-mk), sinon on casserait le placement GPS.
    const inner = document.createElement('div'); inner.className = 'rm-live-in'
    inner.innerHTML = '<span class="rm-live-pulse" style="background:' + color + '"></span>' +
      '<span class="rm-live-dot" style="background:' + color + '">' + initials(p.name || p.techName) + '</span>'
    wrap.appendChild(inner)
    const spd = (p.speed != null && p.speed > 1) ? Math.round(p.speed * 1.852) + ' km/h' : 'arrêté' // Traccar speed = nœuds → km/h
    const when = ageMin == null ? 'position' : (ageMin <= 1 ? "à l'instant" : 'il y a ' + ageMin + ' min')
    wrap.title = (p.name || p.techName || '') + ' — ' + when + ' · ' + spd
    const mk = new mapboxgl.Marker({ element: wrap, anchor: 'center' }).setLngLat([+p.lon, +p.lat]).addTo(map)
    // Rejoint l'ÉCLATEMENT en éventail : quand une position GPS chevauche des arrêts/gouttes, le groupe se sépare au survol.
    const rec = { mk, el: wrap, disc: inner, rid: p.techId, lngLat: [+p.lon, +p.lat], fan: null, members: null, live: true }
    wrap.addEventListener('mouseenter', () => onEnter(rec))
    wrap.addEventListener('mouseleave', () => onLeave(rec))
    liveMk.push(rec)
  }
  recluster()
}
function esc (s) { return String(s == null ? '' : s).replace(/[&<>"]/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c])) }
// Jobs NON assignés du jour, GROUPÉS PAR ADRESSE : pastille round-rect avec les icônes des types de jobs + le temps
// TOTAL. Clic (tap mobile) → popup listant les jobs de l'adresse (chaque ligne ouvre le détail). Rejoint l'éclatement
// en éventail au chevauchement (recluster/fan) pour rester distinguable/atteignable sur mobile.
function renderPins (list) {
  if (!map || !ready) return
  clearPins()
  const mapboxgl = window.mapboxgl
  for (const p of (list || [])) {
    if (!okLL(p.lon, p.lat)) continue
    const color = p.color || '#f97316'
    const wrap = document.createElement('div'); wrap.className = 'rm-mk rm-mk-pin'
    const disc = document.createElement('div'); disc.className = 'rm-pill'; disc.style.background = color
    const icons = (p.icons && p.icons.length) ? p.icons : [p.icon || 'place']
    let html = icons.map(ic => '<span class="material-icons rm-ic">' + (/^[a-z0-9_]+$/.test(String(ic)) ? ic : 'place') + '</span>').join('')
    if (p.count > 1) html += '<span class="rm-num">' + p.count + '</span>'
    if (p.totalLabel) html += '<span class="rm-time">' + esc(p.totalLabel) + '</span>'
    disc.innerHTML = html
    wrap.appendChild(disc)
    const jobs = p.jobs || []
    wrap.title = (p.count > 1 ? p.count + ' jobs' : (jobs[0] ? jobs[0].subject : 'Job')) + (p.city ? ' · ' + p.city : '') + (p.totalLabel ? ' · ≈' + p.totalLabel : '') + ' — à répartir'
    wrap.addEventListener('click', (ev) => {
      ev.stopPropagation()
      if (jobs.length <= 1) { emit('pin-click', { job: (jobs[0] && jobs[0].job) || p.job }); return }
      const rows = jobs.map((j, i) => `<div class="rm-pop-row" data-i="${i}"><span class="rm-pop-s">${esc(j.subject)}</span><span class="rm-pop-est">${esc(j.est || '')}</span></div>`).join('')
      const pop = new mapboxgl.Popup({ offset: 18, maxWidth: '280px' }).setLngLat([+p.lon, +p.lat])
        .setHTML(`<div class="rm-pop"><div class="rm-pop-hd">${jobs.length} jobs · ≈${esc(p.totalLabel || '')}${p.city ? ' · ' + esc(p.city) : ''}</div>${rows}</div>`).addTo(map)
      setTimeout(() => { const el = pop.getElement(); if (el) el.querySelectorAll('.rm-pop-row').forEach(r => r.addEventListener('click', () => { const j = jobs[+r.dataset.i]; emit('pin-click', { job: j && j.job }); pop.remove() })) }, 0)
    })
    const mk = new mapboxgl.Marker({ element: wrap, anchor: 'center' }).setLngLat([+p.lon, +p.lat]).addTo(map)
    const rec = { mk, el: wrap, disc, rid: null, lngLat: [+p.lon, +p.lat], fan: null, members: null, pin: p }
    wrap.addEventListener('mouseenter', () => onEnter(rec))
    wrap.addEventListener('mouseleave', () => onLeave(rec))
    pinMk.push(rec)
  }
  recluster()
}
function renderMarkers (routes) {
  clearMarkers()
  const mapboxgl = window.mapboxgl
  for (const r of routes) {
    if (r.home) {
      const wrap = document.createElement('div'); wrap.className = 'rm-mk rm-mk-home'; wrap.dataset.rid = String(r.id)
      const d = document.createElement('div'); d.className = 'rm-home'; d.style.borderColor = r.color; wrap.appendChild(d)
      const mk = new mapboxgl.Marker({ element: wrap, anchor: 'center' }).setLngLat([+r.home.lon, +r.home.lat]).addTo(map)
      wrap.title = r.name + ' — départ'
      // Le point de DÉPART (domicile/dépôt) rejoint aussi l'éclatement : disc = pastille interne (mapbox transforme `wrap`) + survol → fan.
      const rec = { mk, el: wrap, disc: d, rid: r.id, lngLat: [+r.home.lon, +r.home.lat], fan: null, members: null, home: true }
      wrap.addEventListener('mouseenter', () => onEnter(rec))
      wrap.addEventListener('mouseleave', () => onLeave(rec))
      homeMk.push(rec)
    }
    for (const s of (r.stops || [])) {
      // Pastille = ROUND-RECT (pill) : icône du type de job + numéro d'ordre (best practice quand 2 infos ; cf. outils de tournée).
      const wrap = document.createElement('div'); wrap.className = 'rm-mk'; wrap.dataset.rid = String(r.id)
      const disc = document.createElement('div'); disc.className = 'rm-pill'; disc.style.background = r.color
      const ic = /^[a-z0-9_]+$/.test(String(s.icon || '')) ? s.icon : 'place'
      disc.innerHTML = '<span class="material-icons rm-ic">' + ic + '</span><span class="rm-num">' + s.seq + '</span>'
      wrap.appendChild(disc)
      const mk = new mapboxgl.Marker({ element: wrap, anchor: 'center' }).setLngLat([+s.lon, +s.lat]).addTo(map)
      const rec = { mk, el: wrap, disc, rid: r.id, lngLat: [+s.lon, +s.lat], seq: s.seq, tech: r.name, subject: s.subject || '', stop: s, fan: null, members: null }
      wrap.addEventListener('mouseenter', () => onEnter(rec))
      wrap.addEventListener('mouseleave', () => onLeave(rec))
      wrap.addEventListener('click', () => emit('stop-click', rec.stop, rec.rid)) // → la page ouvre la fiche détail complète du ticket
      stopMk.push(rec)
    }
  }
  recluster()
}
// Regroupe les pastilles qui se CHEVAUCHENT à l'écran (distance pixel) → calcule pour chacune un décalage en éventail.
function recluster () {
  // TOUS les types d'icônes partagent l'éclatement au chevauchement : arrêts, gouttes (non assignés), positions GPS live ET départs (domicile/dépôt).
  const all = stopMk.concat(pinMk, liveMk, homeMk)
  if (!map || !all.length) return
  const px = all.map(s => map.project(s.lngLat))
  const parent = all.map((_, i) => i)
  const find = (i) => { while (parent[i] !== i) { parent[i] = parent[parent[i]]; i = parent[i] } return i }
  const TH = 24 // pastille ø24 → chevauchement si centres < ~24 px
  for (let i = 0; i < all.length; i++) for (let j = i + 1; j < all.length; j++) {
    const dx = px[i].x - px[j].x, dy = px[i].y - px[j].y
    if (dx * dx + dy * dy < TH * TH) parent[find(i)] = find(j)
  }
  const groups = {}
  for (let i = 0; i < all.length; i++) { const r = find(i); (groups[r] = groups[r] || []).push(i) }
  for (const s of all) { s.fan = null; s.members = null }
  for (const key in groups) {
    const ids = groups[key]; if (ids.length < 2) continue
    const cx = ids.reduce((a, i) => a + px[i].x, 0) / ids.length
    const cy = ids.reduce((a, i) => a + px[i].y, 0) / ids.length
    const R = 18 + ids.length * 6 // rayon d'éclatement croît avec le nombre
    const members = ids.map(i => all[i])
    ids.forEach((i, k) => {
      const ang = (k / ids.length) * 2 * Math.PI - Math.PI / 2
      const tx = cx + R * Math.cos(ang), ty = cy + R * Math.sin(ang)
      all[i].fan = [tx - px[i].x, ty - px[i].y] // décalage (px) de la pastille par rapport à son point
      all[i].members = members
    })
  }
}
let openMembers = null; let clTimer = null
function fan (members, on) {
  for (const m of members) {
    if (on && m.fan) { m.disc.style.transform = `translate(${m.fan[0]}px, ${m.fan[1]}px)`; m.el.classList.add('fanned') }
    else { m.disc.style.transform = ''; m.el.classList.remove('fanned') }
  }
}
function onEnter (rec) {
  if (clTimer) { clearTimeout(clTimer); clTimer = null }
  setActive(rec.rid); rec.el.classList.add('hot')
  if (rec.members && rec.members !== openMembers) { if (openMembers) fan(openMembers, false); fan(rec.members, true); openMembers = rec.members }
}
function onLeave (rec) {
  rec.el.classList.remove('hot')
  clTimer = setTimeout(() => { setActive(null); if (openMembers) { fan(openMembers, false); openMembers = null } }, 200)
}

let _lastSig = ''
async function draw () {
  if (!map || !ready) return
  const seq = ++drawSeq
  const routes = props.routes || []
  const ls = map.getSource('rm-line'); if (!ls) return
  ls.setData({ type: 'FeatureCollection', features: lineFeatures(routes) })
  renderMarkers(routes)
  renderLive(props.live)
  renderPins(props.pins)
  renderTrack(props.track)
  const sig = routes.map(r => r.id + ':' + (r.stops || []).length).join('|') + '#' + (props.pins || []).length
  if (sig !== _lastSig) { _lastSig = sig; try { const b = boundsOf(routes); for (const p of (props.pins || [])) if (okLL(p.lon, p.lat)) b.extend([+p.lon, +p.lat]); if (!b.isEmpty()) map.fitBounds(b, { padding: 60, maxZoom: 13, duration: 400 }) } catch (e) {} }
  // Routes RÉELLES en asynchrone : remplace les segments droits + émet km/min réels. Ignoré si un draw plus récent est parti.
  const results = await Promise.all(routes.map(async r => ({ r, info: await realLine(r) })))
  if (seq !== drawSeq || !map || !map.getSource('rm-line')) return
  const metrics = {}
  const finalLines = results.map(({ r, info }) => {
    if (info) { metrics[r.id] = { km: info.km, mins: info.mins }; return { type: 'Feature', geometry: info.geometry, properties: { color: r.color, id: r.id, rid: r.id } } }
    const coords = []; if (r.home) coords.push([+r.home.lon, +r.home.lat]); for (const s of (r.stops || [])) coords.push([+s.lon, +s.lat])
    return coords.length >= 2 ? { type: 'Feature', geometry: { type: 'LineString', coordinates: coords }, properties: { color: r.color, id: r.id, rid: r.id } } : null
  }).filter(Boolean)
  map.getSource('rm-line').setData({ type: 'FeatureCollection', features: finalLines })
  if (Object.keys(metrics).length) emit('metrics', metrics)
}
function fitTo (id) {
  const r = (props.routes || []).find(x => x.id === id); if (!r || !map) return
  try { const b = boundsOf([r]); if (!b.isEmpty()) map.fitBounds(b, { padding: 60, maxZoom: 13, duration: 400 }) } catch (e) {}
}
function fitAll () { try { const b = boundsOf(props.routes || []); if (!b.isEmpty()) map.fitBounds(b, { padding: 50, maxZoom: 13, duration: 400 }) } catch (e) {} }
// Tournée ACTIVE (survol carte ou chip) : ligne épaissie (couche GL filtrée) + ses marqueurs passent au 1er plan.
let _active = null
function setActive (rid) {
  if (!map || !ready || _active === rid) return
  _active = rid || null
  try { map.setFilter('rm-line-a', ['==', ['get', 'rid'], _active == null ? '___aucun___' : _active]) } catch (e) {}
  for (const m of stopMk) m.el.classList.toggle('route-hot', _active != null && m.rid === _active)
  for (const m of homeMk) m.el.classList.toggle('route-hot', _active != null && m.rid === _active)
}
defineExpose({ fitTo, fitAll, setActive })

onMounted(async () => {
  if (!el) return
  const mapboxgl = await ensureMapbox(); if (!mapboxgl || !el) return
  map = new mapboxgl.Map({ container: el, style: basemapStyle('light'), center: [-73.55, 45.2], zoom: 8 })
  map.addControl(new mapboxgl.NavigationControl({ showCompass: false }), 'top-right')
  ro = new ResizeObserver(() => { if (map) map.resize() }); ro.observe(el)
  map.on('load', () => {
    map.resize()
    addSatelliteLayer(map, satellitePref.value) // couche satellite (sous les tracés + marqueurs), masquée par défaut
    map.addSource('rm-line', { type: 'geojson', data: { type: 'FeatureCollection', features: [] } })
    map.addLayer({ id: 'rm-line', type: 'line', source: 'rm-line', layout: { 'line-join': 'round', 'line-cap': 'round' }, paint: { 'line-color': ['get', 'color'], 'line-width': 3, 'line-opacity': 0.7 } })
    map.addLayer({ id: 'rm-line-a', type: 'line', source: 'rm-line', filter: ['==', ['get', 'rid'], '___aucun___'], layout: { 'line-join': 'round', 'line-cap': 'round' }, paint: { 'line-color': ['get', 'color'], 'line-width': 5.5, 'line-opacity': 0.95 } })
    // Tracé GPS RÉEL (Traccar) d'un seul tech — orange, AU-DESSUS des tournées prévues (halo + trait) → « où il est réellement passé ».
    map.addSource('rm-track', { type: 'geojson', data: { type: 'FeatureCollection', features: [] } })
    map.addLayer({ id: 'rm-track-halo', type: 'line', source: 'rm-track', layout: { 'line-join': 'round', 'line-cap': 'round' }, paint: { 'line-color': '#ff6f00', 'line-width': 9, 'line-opacity': 0.22 } })
    map.addLayer({ id: 'rm-track-l', type: 'line', source: 'rm-track', layout: { 'line-join': 'round', 'line-cap': 'round' }, paint: { 'line-color': '#ef6c00', 'line-width': 3.5, 'line-opacity': 0.85 } })
    map.on('mousemove', 'rm-line', (e) => { const f = e.features && e.features[0]; if (f) setActive(f.properties.rid) })
    map.on('mouseleave', 'rm-line', () => setActive(null))
    map.on('movestart', () => { if (openMembers) { fan(openMembers, false); openMembers = null } }) // décalages px périmés au déplacement
    map.on('moveend', recluster)
    ready = true
    draw()
  })
})
onBeforeUnmount(() => { clearMarkers(); clearLive(); clearPins(); if (ro) { try { ro.disconnect() } catch (e) {} ro = null } if (map) { try { map.remove() } catch (e) {} map = null } ready = false })
watch(() => props.routes, () => { draw() }, { deep: true })
watch(() => props.live, () => { renderLive(props.live) }, { deep: true }) // rafraîchit les positions live (+ recluster interne) sans redessiner les tournées
watch(() => props.pins, () => { renderPins(props.pins) }, { deep: true }) // jobs non assignés (secteur) sans redessiner les tournées
watch(() => props.track, () => { renderTrack(props.track) }, { deep: true }) // tracé GPS réel (1 tech) sans redessiner les tournées
// Satellite : bouton local + préférence PARTAGÉE (satellitePref) → toutes les cartes suivent.
function toggleSat () { setSatellitePref(!satellitePref.value); if (map) setSatelliteVisible(map, satellitePref.value) }
watch(satellitePref, (v) => { if (map) setSatelliteVisible(map, v) })
</script>

<template>
  <div class="rm-wrap" :style="{ height }">
    <div :ref="setEl" class="route-map" style="height:100%" />
    <q-btn round dense size="sm" class="rm-sat-btn" :color="satellitePref ? 'primary' : 'grey-9'" text-color="white" :icon="satellitePref ? 'map' : 'satellite_alt'" @click="toggleSat"><q-tooltip>{{ satellitePref ? 'Vue carte' : 'Vue satellite' }}</q-tooltip></q-btn>
  </div>
</template>

<style scoped>
.rm-wrap { position: relative; }
.route-map { border-radius: 8px; overflow: hidden; border: 1px solid #cfd8dc; }
.rm-sat-btn { position: absolute; top: 8px; left: 8px; z-index: 3; }
</style>

<!-- NON scoped : les marqueurs sont créés en JS et injectés dans le conteneur Mapbox (hors de l'arbre scoped). Préfixe rm- = pas de collision. -->
<style>
.rm-mk { cursor: pointer; will-change: transform; }
.rm-mk .rm-pill {
  display: inline-flex; align-items: center; gap: 3px; box-sizing: border-box;
  height: 22px; padding: 0 7px 0 5px; border-radius: 11px; white-space: nowrap;
  color: #fff; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.45);
  transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .15s;
}
.rm-mk .rm-pill .rm-ic { font-size: 14px; line-height: 1; opacity: .95; }
.rm-mk .rm-pill .rm-num { font-size: 12px; font-weight: 800; line-height: 1; }
.rm-mk .rm-pill .rm-time { font-size: 10.5px; font-weight: 700; line-height: 1; padding-left: 2px; white-space: nowrap; }
/* Popup « jobs à cette adresse » (tap mobile) — bloc <style> non-scopé, s'applique au popup mapbox global */
.rm-pop { font-size: 12px; min-width: 170px; max-width: 240px; max-height: 44vh; overflow-y: auto; }
.rm-pop-hd { font-weight: 700; color: #1e293b; margin-bottom: 4px; }
.rm-pop-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 2px; border-top: 1px solid #eef1f5; cursor: pointer; }
.rm-pop-row:hover { background: #eef2ff; }
.rm-pop-s { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-pop-est { color: #64748b; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.rm-mk .rm-home { width: 15px; height: 15px; border-radius: 50%; box-sizing: border-box; background: #fff; border: 3px solid #888; box-shadow: 0 1px 3px rgba(0,0,0,.4); transition: transform .18s cubic-bezier(.2,.8,.3,1); }
.rm-mk.hot { z-index: 7; }
.rm-mk.hot .rm-pill { transform: scale(1.15); box-shadow: 0 3px 9px rgba(0,0,0,.55); }
.rm-mk.route-hot { z-index: 5; }
.rm-mk.fanned { z-index: 6; }
.rm-mk.fanned .rm-pill { box-shadow: 0 3px 10px rgba(0,0,0,.55); }
/* Position GPS LIVE d'un tech : pastille ronde à initiales + halo pulsé (distincte des pastilles d'arrêt). */
.rm-live { position: relative; width: 0; height: 0; z-index: 8; pointer-events: auto; }
.rm-live.fanned { z-index: 9; } /* éclatée au chevauchement → passe devant arrêts/gouttes */
.rm-live-in { position: absolute; width: 0; height: 0; transition: transform .18s cubic-bezier(.2,.8,.3,1); } /* élément translaté par l'éventail */
.rm-live .rm-live-dot { position: absolute; transform: translate(-50%, -50%); width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.5); color: #fff; font-size: 10.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; z-index: 2; cursor: default; }
.rm-live .rm-live-pulse { position: absolute; width: 28px; height: 28px; border-radius: 50%; opacity: .45; z-index: 1; animation: rm-live-pulse 1.8s ease-out infinite; }
@keyframes rm-live-pulse { 0% { transform: translate(-50%,-50%) scale(1); opacity: .45; } 100% { transform: translate(-50%,-50%) scale(2.8); opacity: 0; } }
.rm-live.stale .rm-live-pulse { display: none; }
.rm-live.stale .rm-live-dot { opacity: .55; filter: grayscale(.5); }
/* Jobs NON assignés (goutte, couleur = priorité) — à situer/répartir */
.rm-pin { position: relative; width: 0; height: 0; z-index: 7; cursor: pointer; pointer-events: auto; }
.rm-pin-drop { position: absolute; left: -9px; bottom: 0; width: 18px; height: 18px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .4); }
.rm-pin:hover .rm-pin-drop { filter: brightness(1.12); }
</style>
