/* Reset styles for unordered lists */
.city-info ul {
  padding: 0;
  margin: 0;
}

/* Remove bullet points from list items */
.city-info li {
  list-style: none;
}

/* Style for city points on the map */
.city-point {
  position: absolute;
  width: 25px;
  height: 25px;
  background: radial-gradient(circle at center, white 10%, rgb(0, 0, 0) 80%);
  border-radius: 50%;
  cursor: pointer;
  transform: translate(-50%, -50%);
}

/* Show city info when hovering over city point */
.city-point:hover .city-info {
  display: block;
  z-index: 1 !important;
}

/* Show city info when focusing on city point */
/* .city-point:focus .city-info {
  display: none;
  z-index: 1 !important;
} */

/* Hide the next city point when hovering over a city point */
.city-point:hover .city-info + .city-point {
  display: none;
}

.ctr {
  left: 30px !important;
}

/* Style for city info */
.city-info h3 {
  margin: 0;
  padding: 7px;
  font-size: 1.2em;
}

/* Position and style for city info container */
.city-info {
  display: none;
  padding: 10px;
  margin: 0;
  top: -30px;
  right: 30px;
  position: absolute;
  width: max-content;
  max-width: 200px;
  background-color: white;
  border: 1px solid black;
  border-radius: 5px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
  z-index: 2 !important;
  animation: fadeIn 0.2s ease-in-out;
}

.city-info h3 {
  margin: 0;
  padding: 0;
  font-size: 1.2em;
}

.titre-ville {
  font-size: 1.5rem;
  font-weight: bold;
  cursor: pointer;
  margin: 0;
}

.sub-info {
  font-size: 0.8rem;
  margin: 0;
  padding: 0;
}

/* Coordinates for city points on the map (in percentage relative to the image) */
.paris {
  top: 30%;
  left: 55%;
}

.lyon {
  top: 65%;
  left: 75%;
}

.lille {
  top: 7%;
  left: 60%;
}

.nantes {
  top: 45%;
  left: 25%;
}

.chateauroux {
  top: 50%;
  left: 49%;
}

.bordeaux {
  top: 72%;
  left: 31%;
}

.saint-etienne {
  top: 68%;
  left: 69%;
}

.marseille {
  top: 87%;
  left: 80%;
}

.nice {
  top: 83%;
  left: 95%;
}

.tahiti {
  top: 74%;
  left: 14%;
}

/* Add more cities and their coordinates here */

/* Style for the map container */
.map {
  max-width: 100vw; /* Adjusted to 80% for better visibility on mobile devices */
  height: auto;
  display: block;
  margin: 0 auto;
  width: 80%; /* Adjusted to 80% for better visibility on mobile devices */
  position: relative;
  z-index: 0;
}

/* Style for the map image */
.mapimg {
  max-width: 100vw; /* Adjusted to 80% for better visibility on mobile devices */
  width: 100%; /* Adjust the width to 100% to make the image fill the entire width of the .map container */
  height: auto;
}

/* Adjustments for responsiveness */
@media (max-width: 1024px) {
  .map {
    max-width: 80%; /* Adjusted to occupy the full width on tablets */
    width: 80%; /* Adjusted to occupy the full width on tablets */
  }

  .city-point {
    width: 15px;
    height: 15px;
  }

  .city-info {
    z-index: 2;
    display: none;
    position: absolute;
    top: -20px;
    right: 15px;
    padding: 5px;
    background-color: white;
    font-size: x-small;
    width: max-content; /* Set the width to a fixed value */
    max-width: fit-content;
    border: 1px solid black;
    border-radius: 5px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
  }
}

/* Adjustments for responsiveness */
@media (max-width: 768px) {
  /* Make city points focusable */

  .map {
    max-width: 100%; /* Adjusted to occupy the full width on mobile devices */
    width: 100%; /* Adjusted to occupy the full width on mobile devices */
  }

  .city-info {
    z-index: 2;
    display: none;
    position: absolute;
    top: -20px;
    right: 25px;
    padding: 5px;
    background-color: white;
    font-size: x-small;
    min-width: 20vw; /* Set the width to a fixed value */
    max-width: fit-content;
    border: 1px solid black;
    border-radius: 5px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
  }

  .city-point {
    width: 15px;
    height: 15px;
  }

  .titre-ville {
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    margin: 0;
  }

  .city-info h3 {
    margin: 0;
    padding-bottom: 1vh;
    font-size: 0.8rem;
  }

  .info-a-teco {
    font-size: 0.6rem;
    margin: 0;
    padding-bottom: 1vh;
  }

  .sub-info {
    font-size: 0.5rem;
    margin: 0;
  }
}