body {
  background-color: #0C151C;
  margin: 0;
  width: 100vw;
  height: 100vh;
}

/* font-family: 'BankGothic Md BT', sans-serif;
font-family: 'Bank Gothic Light', sans-serif;
font-family: 'BankGothic', sans-serif; */


h1 {
  color: #fcab32;
  font-family: 'BankGothic Md BT', sans-serif;
  font-size: 3vw;
}

h2 {
  font-family: 'BankGothic Md BT', sans-serif;
  color: #fcab32;
  font-size: 2vw;
  position: absolute;
  margin-left: -250px;
}

.h3 {
  color: white;
  background-color: #1D5564;
  font-family: 'BankGothic Md BT', sans-serif;
  margin-bottom: 20px;
}

h3 {
  margin: 0;
}

.container-graph {
  border-top: 1px solid #56C9E8;
  border-bottom: 1px solid #56C9E8;
  display: flex;
  flex-direction: column;
  padding: 30px 20%;
  background-color: #1d556466;
  align-items: center;
}

.chiffre {
  font-family: 'DS-Digital', sans-serif;
}

#map {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 25% 50% 25%;
  grid-template-rows: 15% 85%;
  background-image: url(carte-bg.png);
  background-position: top;
  background-repeat: round;
}

#map__header {
  grid-column: 2;
  display: flex;
  text-align: center;
  align-items: center;
}

#map__info_gauche {
  grid-row: 2 / 3;
  grid-column: 1;
}

#map__info_droite {
  grid-row: 2 / 3;
  grid-column: 3;
}

.map__image {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid #1D4D6A;
  background: #0c1f2d72;
}

.map-svg {
  width: 50%;
  float: left;
  background-color: #373737;
  padding: 20px;
  border-radius: 70px;
}

.map__image path {
  fill: #112C3F;
  stroke: #56C9E8;
  stroke-width: 0.5px;
  transition: fill 0.3s
}

.map__image path:hover {
  fill: #56C9E8;
}

.map__transport {
  background-repeat: round;
}

.department-name {
  position: absolute;
  background-color: white;
  padding: 5px;
  border-radius: 5px;
  visibility: hidden;
  font-size: 14px;
  font-weight: bold;
  pointer-events: none;
  /* Pour éviter que le texte interfère avec la carte */
}

#container-carte-france {
  cursor: url('circle-cursor.svg'), auto;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#carte-france {
  width: 100%;
  height: auto;
  /* Maintient les proportions */
  max-height: 100%;
  /* Empêche que la hauteur dépasse celle de la fenêtre */
}

#visualization {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

#region-info {
  font-family: Arial, sans-serif;
  color: #333;
}

#region-title {
  color: #555;
  margin-bottom: 15px;
}

#department-name {
  position: absolute;
  visibility: hidden;
  top: 10px;
  left: 10px;
  font-size: 16px;
  background-color: white;
  padding: 5px;
  border: 1px solid black;
}

.departement-name {
  position: absolute;
  visibility: hidden;
  background-color: white;
  color: black;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
  font-size: 12px;
  pointer-events: none;
  z-index: 10;
}

.legende {
  margin-top: 20px;
  color: white;
  font-family: 'DS-Digital', sans-serif;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 100%;
}

.container-legende {
  display: flex;
  gap: 5px;
  align-items: center;
}

.square {
  width: 10px;
  height: 10px;
}

#voiture .square, #pas .square {
  background-color: #56C9E8;
}

#transports .square, #peu .square {
  background-color: #FCAB32;
}

#velo .square, #assez .square {
  background-color: #E12436;
}

#train .square, #hypothese .square, #beaucoup .square {
  background-color: #1D5564;
}

#rien .square, #certitude .square {
  background-color: #FFFFFF;
}