.icon-map-legend {
  height: calc(var(--unit) * 1);
  width: calc(var(--unit) * 2);
  background-repeat: no-repeat;
}

.icon-map-legend-sdom-zone-0 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20' width='40px' height='20px' fill='%230000ff'><rect width='100%' height='100%' /></svg>");
}

.icon-map-legend-sdom-zone-0-potentielle {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='url(%23texture_diagonal)' viewBox='0 0 40 20' width='40px' height='20px'><defs><pattern id='texture_diagonal' x='0' y='0' width='10%' height='10%' patternTransform='rotate(45 0 0)' patternUnits='userSpaceOnUse'><line x1='0' y1='0' x2='0' y2='10' style='stroke: %230000FF; stroke-width: 2'/></pattern></defs><rect width='100%' height='100%' /></svg>")
}

.icon-map-legend-sdom-zone-1 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20' width='40px' height='20px' fill='%2300ff7f'><rect width='100%' height='100%' /></svg>");
}

.icon-map-legend-sdom-zone-2 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20' width='40px' height='20px' fill='%23ffaa00'><rect width='100%' height='100%' /></svg>");
}
