/* ================================
   BASE
================================ */

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

#map {
  width: 100vw;
  height: 100vh;
}

/* ================================
   MARKERS
================================ */

.marker-dot {
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
  display: inline-block;
}

.red    { background-color: #ff4d4d; }
.orange { background-color: #ffa500; }
.green  { background-color: #4caf50; }
.gray   { background-color: #999; }

/* ================================
   POPUP
================================ */

.popup-title {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 6px;
  text-align: center;
}

.day-row {
  text-align: center;
  margin-bottom: 6px;
}

.time-group {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

/* ================================
   LÉGENDE — VERSION DESKTOP
================================ */

.surf-legend, .info-box {
  position: absolute;
  background-color: rgba(0,0,0,0.75);
  padding: 8px 12px;
  border-radius: 8px;
  color: white;
  font-family: sans-serif;
  font-size: 14px;
  z-index: 1000;
}

.surf-legend {
  bottom: 20px;
  left: 20px;
  max-width: 180px;
}

.info-box {
  top: 20px;
  left: 80px;
  max-width: 220px;
}

.legend-title {
  font-weight: bold;
  margin-bottom: 6px;
  text-align: center;
}

.legend-row {
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.legend-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-weight: bold;
  font-size: 13px;
  color: white;
  border: 2px solid white;
}

.legend-dot.red    { background-color: #ff4d4d; }
.legend-dot.orange { background-color: #ffa500; }
.legend-dot.green  { background-color: #4caf50; }
.legend-dot.gray   { background-color: #999; }

/* ================================
   LÉGENDE — VERSION RESPONSIVE
================================ */

@media (max-width: 480px) {

  .surf-legend {
    bottom: clamp(10px, 3vw, 16px);
    left: clamp(10px, 3vw, 16px);
    max-width: clamp(120px, 30vw, 150px);
    padding: clamp(6px, 1.5vw, 8px);
    font-size: clamp(10px, 2.5vw, 13px);
  }

  .info-box {
    top: clamp(10px, 3vw, 16px);
    left: clamp(40px, 8vw, 60px);
    max-width: clamp(150px, 40vw, 200px);
    font-size: clamp(10px, 2.5vw, 13px);
  }

  .legend-title {
    margin-bottom: clamp(4px, 1vw, 5px);
    font-size: clamp(11px, 3vw, 14px);
  }

  .legend-row {
    gap: clamp(6px, 2vw, 8px);
  }

  .legend-dot {
    width: clamp(28px, 8vw, 36px);
    height: clamp(28px, 8vw, 36px);
    font-size: clamp(9px, 2.5vw, 11px);
    border-width: clamp(1px, 0.4vw, 2px);
  }
}