.vm-marker{
  position:relative;
  width:34px;
  height:34px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  border:2px solid rgba(255,255,255,.95);
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}

.vm-marker svg{
  width:18px;
  height:18px;
  display:block;
}

.vm-status-new{background:#b00020}
.vm-status-progress{background:#0b4ea2}
.vm-status-resolved{background:#1b7f3a}
.vm-status-rejected{background:#6b7280}

.vm-marker-bar{
  position:absolute;
  bottom:-2px;
  left:6px;
  right:6px;
  height:5px;
  border-radius:999px;
  opacity:.95;
}

.vm-category-voirie .vm-marker-bar{background:#f59e0b}
.vm-category-arbres .vm-marker-bar{background:#16a34a}
.vm-category-inondations .vm-marker-bar{background:#0ea5e9}
.vm-category-reseaux .vm-marker-bar{background:#f97316}
.vm-category-eclairage .vm-marker-bar{background:#eab308}
.vm-category-proprete .vm-marker-bar{background:#64748b}
.vm-category-securite .vm-marker-bar{background:#ef4444}
.vm-category-autre .vm-marker-bar{background:#8b5cf6}

.vm-marker-archived{
  opacity:.52;
  filter:grayscale(.7);
}

@keyframes vm-marker-bounce{
  0%{transform:translateY(0)}
  30%{transform:translateY(-10px)}
  60%{transform:translateY(0)}
  80%{transform:translateY(-5px)}
  100%{transform:translateY(0)}
}

.vm-marker.bounce{animation:vm-marker-bounce .55s ease}