/* ===== Section map ===== */
.map {
  position: relative;
  width: 100%;
  min-height: 700px;
  background: #000000;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 50px;
  text-align: center;
}

.map h1 {
  color: orangered;
  font-size: 2rem;
  margin-bottom: 20px;
}

/* ===== Carte et container ===== */
.map .img_container {
  width: 450px;
  height: 400px;
  position: relative;
  margin-bottom: 20px;
  background-color: #000000;
}

.map .img_container img {
  width: 100%;
  height: auto;
}

/* ===== Markers ===== */
.map #markerSA{
  width: 15px;
  height: 15px;
  position: absolute;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.3s ease;
  transform: translate(-50%, -50%) scale(1);
  top:400px;
  left:260px;
  overflow: hidden;
  border: 1px solid orangered;
}
.map #markerSN{
  width: 15px;
  height: 15px;
  position: absolute;
  transform: translate(-50%, -50%) scale(1);
  border: 1px solid orangered;
  border-radius: 50%;
  background-color: white;
  cursor: pointer;
  transition: transform 0.3s ease;
  z-index: 2;
  top:150px;
  left:50px;
  overflow: hidden;
}

.map .markerSN:hover, .map .markerSA:hover {
  transform: translate(-50%, -50%) scale(1.3);
}

/* ===== Liens ===== */
.map-links {
  display: flex;
  gap: 15px;                  /* espace entre les liens */
  justify-content: center;     /* centre les liens horizontalement */
  flex-wrap: wrap;             /* passe à la ligne si écran petit */
  padding-top: 30px;
}

.map-links a {
  margin-top:63px;
  display: none;               /* caché par défaut */
  font-size: 1rem;
  font-weight: 600;
  color:rgba(245, 234, 230, 0.84);
  text-decoration: none;
  padding: 8px 15px;           /* petit padding type bouton */
  border:none;   /* bordure légère */
  border-radius: 6px;           /* coins arrondis */
  background-color: rgba(223, 63, 0, 0.902); /* léger fond transparent */
  transition: all 0.3s ease;
}

.map-links a:hover {
  color: rgba(243, 243, 243, 0.824);
  background-color:rgba(255, 68, 0, 0.856); /* survol plus visible */
  border-color:rgba(255, 68, 0, 0.884);
  text-decoration: none;
  transform: translateY(-3px) scale(1.05); /* léger effet “pop” */
  box-shadow: 0 4px 12px rgba(255, 68, 0, 0.041); /* ombre douce */
}

.map-links a.show {
  display: inline-block;
  opacity: 0;
  animation: fadeIn 0.4s forwards; /* apparition fluide */
}

@keyframes fadeIn {
  to { opacity: 1; }
}

/* ===== Texte ===== */
.map p {
  color:rgb(245, 244, 243);
}

/* ===== Responsive ===== */
@media (max-width: 950px) {
  html, body {
    overflow-x: hidden;
  }
  .map {
    padding-top: 30px;
  }
}

@media (max-width: 600px) {
  .map .img_container { width: 90%; height: auto; }
  .map-links a { font-size: 0.85rem; padding: 3px 3px; }
 .map #markerSN { top: 34%; left: 12%; }
  .map #markerSA { top: 88%; left: 60%; }
}

@media (max-width: 400px) {
  .map h1 { font-size: 1.3rem; }
 .map #markerSN{width: 12px; height: 12px; }
  .map #markerSA { width: 12px; height: 12px; }
  .map-links a { font-size: 0.75rem; padding: 5px 8px; }
}