.zone p {
    font-size: var(--medium);
}

.zone__presentation__wraper {
    margin: 40px 0;
    font-size: var(--medium);
    line-height: 1.2;
}

.date__selector {
    margin: 40px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size:var(--medium);
}

.dateSelect {
    margin: 20px 0;
}
.date__selector input[type=date], .date__selector button {
    border-radius: 10px 0 0 10px;
}
.date__selector button {
    border-radius: 0px 10px 10px 0;
}

.map__content h2 {
    text-align: center;
}

#map {
    width: 90%;
    margin: 10px auto;
    height: 500px;

    border: solid 1px rgb(68,80,169);
}

.legend {
    display: flex;
    justify-content: center;
    list-style: none;
    
}

.legend li {
    padding: 5px 10px;

    margin: 5px 20px;

    font-size: var(--small);
    color:white
}

.leaflet-tooltip.newContent {
  background-color: #0583d2;
  color : white;
  padding: 4px;
  border : none;
  font-size:var(--small);
}


.spot__selector__wraper {
    margin: 20px 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px,1fr));
    grid-row-gap: 20px;
    grid-column-gap: 10px ;
}