h1 {
  font-size: 20px;
  color: #333333;
  margin: 5px;
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
}

.figure {
  width: 100%;
}

#carte {
  width: 100%;
  height: 100%;
}

p {
  font-size: 12px;
  margin: 5px;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}
.titre {
  font-size: 20px;
  color: #333333;
  margin: 5px;
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
}
.classQuartier{
  font-size: 12px;
  color: #333333;
  margin: 10px;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}
.classEducation{
  font-size: 12px;
  color: #333333;
  margin: 10px;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}
.classMino{
  font-size: 12px;
  color: #333333;
  margin: 10px;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}
.legende{
  font-size: 10px;
  color: #333333;
  margin: 10px;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}

@media (max-width: 600px) {
.classQuartier{
  font-size: 16px;
}
.classEducation{
  font-size: 16px;
}
.classMino{
  font-size: 16px;
}
.legende{
  font-size: 14px;
}
}