.filter-types { display:flex; flex-wrap:wrap; gap:8px; }
.type-chip { position:relative; }
.type-chip input { position:absolute; opacity:0; inset:0; }
.type-chip label{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border:1.5px solid #e5e7eb; border-radius:999px;
  background:#fff; cursor:pointer; user-select:none;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
  min-height:40px;  /* cible tactile 40px+ */
}
.type-chip label .chip-icon{
  width:22px; height:22px; display:grid; place-items:center;
  border-radius:999px; background:var(--bg, #e5e7eb); color:#fff;
  font-size:16px; line-height:1;
}
.type-chip input:checked + label{
  border-color:var(--bg, #111);
  background: color-mix(in srgb, var(--bg, #111) 12%, white);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bg, #111) 20%, transparent);
}
.type-chip label:hover{ transform: translateY(-1px); }
@supports not (color-mix(in srgb, white, black)){
  .type-chip input:checked + label{ background: rgba(0,0,0,.04); } /* fallback */
}

.map-hint {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, .7);
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 14px;
    z-index: 5;
}