/* Retour à une carte simple, lisible et interactive par zone. */
.micro-zone-map{
  min-height:390px!important;
  display:block!important;
  background:
    radial-gradient(circle at 50% 50%,rgba(15,142,181,.10) 0 28%,transparent 29%),
    linear-gradient(145deg,#f8fbfc,#edf4f6)!important;
  border:1px solid #dce8ec!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.72),0 18px 42px rgba(16,42,58,.10)!important;
}
.micro-zone-map-img{
  display:none!important;
}
.micro-zone-map:before{
  content:""!important;
  position:absolute!important;
  z-index:1!important;
  left:50%!important;
  top:50%!important;
  width:58%!important;
  max-width:310px!important;
  aspect-ratio:1!important;
  height:auto!important;
  transform:translate(-50%,-50%) rotate(-12deg)!important;
  border-radius:48% 42% 50% 45%!important;
  background:
    radial-gradient(circle at 50% 50%,#fff 0 23%,transparent 24%),
    conic-gradient(from 8deg,
      #dbe7eb 0deg 54deg,
      #d96b45 54deg 106deg,
      #dbe7eb 106deg 181deg,
      #d96b45 181deg 240deg,
      #dbe7eb 240deg 360deg)!important;
  box-shadow:inset 0 0 0 10px rgba(255,255,255,.70),0 20px 42px rgba(16,42,58,.12)!important;
  pointer-events:none!important;
}
.micro-zone-map:after{
  content:""!important;
  position:absolute!important;
  z-index:1!important;
  left:50%!important;
  top:50%!important;
  width:24%!important;
  max-width:128px!important;
  aspect-ratio:1!important;
  transform:translate(-50%,-50%) rotate(-12deg)!important;
  border-radius:48% 42% 44% 52%!important;
  background:#fff!important;
  box-shadow:0 0 0 8px rgba(255,255,255,.86)!important;
  pointer-events:none!important;
}
.micro-zone-map-overlay{
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
}
.micro-zone-map .map-sector{
  position:absolute!important;
  z-index:3!important;
  right:auto!important;
  bottom:auto!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  transform:translate(-50%,-50%)!important;
  border:1px solid #dfe8ec!important;
  background:#fff!important;
  color:var(--ocean)!important;
  backdrop-filter:none!important;
  box-shadow:0 10px 24px rgba(16,42,58,.12)!important;
}
.micro-zone-map .map-sector:hover{
  transform:translate(-50%,-50%) translateY(-2px)!important;
  box-shadow:0 16px 32px rgba(16,42,58,.16)!important;
}
.micro-zone-map .map-sector:has(input:checked){
  background:linear-gradient(135deg,var(--coral),#d36a47)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.42)!important;
}
.micro-zone-map .map-sector-nord{top:17%!important;left:47%!important}
.micro-zone-map .map-sector-est{top:43%!important;left:76%!important}
.micro-zone-map .map-sector-sud{top:78%!important;left:56%!important}
.micro-zone-map .map-sector-ouest{top:52%!important;left:20%!important}
.micro-zone-map .map-sector-cirques-hauts{top:47%!important;left:49%!important}
.micro-zone-map .map-sector-all,
.micro-zone-map .map-sector-toute-l-le{top:90%!important;left:50%!important;background:#e9f8fb!important;color:var(--lagon-d)!important}
.micro-zone-map .map-sector-all:has(input:checked),
.micro-zone-map .map-sector-toute-l-le:has(input:checked){background:linear-gradient(135deg,var(--coral),#d36a47)!important;color:#fff!important}

@media(max-width:560px){
  .micro-zone-map{min-height:300px!important}
  .micro-zone-map .map-sector{font-size:10.5px!important;grid-template-columns:25px auto!important;padding:6px 8px 6px 6px!important}
  .micro-zone-map .map-sector .map-dot{width:25px!important;height:25px!important}
}