/* ===== Carte (PNG + SVG) ===== */
.kholoh_msd-carte .kholoh_msd-carte-inner {
  position: relative;
  display: inline-block;
  width: 100%;
}

/* Titre au-dessus de la planche */
.kholoh_msd-planche-heading {
  margin: 0 0 8px;
}

/* Image PNG : limitée à la hauteur dispo (calculée en JS dans --msd-max-h) */
.kholoh_msd-carte img.msd-png {
  display: block;
  max-height: var(--msd-max-h, 100vh);
  width: auto;
  height: auto;
  margin: 0 auto;
  position: relative;
  z-index: 0;
}

/* Overlay SVG : au-dessus du PNG + capte les events */
.kholoh_msd-carte .msd-svg-wrap {
  position: absolute;
  inset: 0;
  pointer-events: auto; /* important */
  z-index: 1;
}

/* L’SVG occupe tout le wrapper */
.kholoh_msd-carte .msd-svg-wrap svg.kh-msd-svg {
  width: 100%;
  height: 100%;
  max-height: var(--msd-max-h, 100vh);
}

/* Garantit que les zones reçoivent les events même si fill=none */
.kholoh_msd-carte .msd-svg-wrap svg.kh-msd-svg [id^="zone-"] {
  pointer-events: all;
}

/* fallback général : zones peintes seulement */
.kholoh_msd-carte .msd-svg-wrap svg.kh-msd-svg * {
  pointer-events: visiblePainted;
}

/* Highlight vert (contour) appliqué aux zones ciblées */
.kholoh_msd-highlight {
  stroke: #22c55e;
  stroke-width: 2;
  fill: transparent !important;
}

/* Tooltip qui suit la souris */
.kholoh_msd-tooltip {
  position: fixed;
  padding: 6px 8px;
  font-size: 14px;
  background: rgba(0, 0, 0, .75);
  color: #fff;
  border-radius: 4px;
  transform: translate(8px, 8px);
  pointer-events: none;
  z-index: 99999;
  white-space: nowrap;
  display: none;
}

/* ===== Sidebar ===== */
.kholoh_msd-sidebar .kholoh_msd-planche-title {
  padding: 0 6px;
  font-weight: 600;
}

.kholoh_msd-sidebar .kholoh_msd-liste {
  list-style: none;
  padding: 0;
  margin: 8px 0 12px;
}

.kholoh_msd-sidebar .kholoh_msd-liste li {
  padding: 6px 4px;
  cursor: default;
}

.kholoh_msd-sidebar .kholoh_msd-liste li:hover {
  background: rgba(0,0,0,.05);
}