/* Style général du corps */
body {
  margin: 0;
  padding: 20px;
  font-family: 'Share Tech Mono', monospace;
  background-color: #0d0d0d; /* fond noir profond */
  color: #00ffe1; /* Bleu néon clair par défaut */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  overflow: hidden;
  background: radial-gradient(circle, #000000, #0f0f0f);
}

/* Conteneur pour la scène 3D */
#container {
  width: 100%;
  height: 60%; /* 60% de la hauteur de la fenêtre pour la scène 3D */
  position: relative;
  box-shadow: 0 0 40px rgba(0, 255, 225, 0.8); /* effet néon bleu sur le conteneur */
  border-radius: 20px;
}

/* Carte 2D en haut à gauche */
#map2dContainer {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10;
  width: 20vw; /* Réduit à 20% de la largeur de la fenêtre */
  max-width: 200px; /* Limite la largeur à 200px */
  height: 20vw; /* Hauteur également réduite à 20% de la largeur */
  max-height: 200px; /* Limite à 200px de hauteur */
  border: 3.5px solid #00ffe1; /* Bordure bleu néon clair */
  border-radius: 20px;
  box-shadow: 0 0 15px rgba(0, 255, 225, 0.8); /* Ombre lumineuse */
  backdrop-filter: blur(6px);
  transition: all 0.3s ease-in-out; /* Transition douce pour les effets */
}

/* Responsivité mobile */
@media (max-width: 768px) {
  #map2dContainer {
    width: 30vw; /* 30% de la largeur de l'écran sur mobile */
    height: 30vw; /* Hauteur proportionnelle */
    max-width: 150px; /* Limite à 150px de largeur sur mobile */
    max-height: 150px; /* Limite à 150px de hauteur sur mobile */
    top: 10px; /* Ajuste la position pour plus d'espace */
    left: 10px;
  }
}

/* Panneau de contrôle des coordonnées */
#controlPanel {
  position: fixed;
  bottom: 10%;
  left: 5%;
  z-index: 20;
  background-color: rgba(0, 0, 0, 0.8);
  padding: 15px;
  border-radius: 20px;
  font-size: 14px;
  width: 90%;
  max-width: 350px;
  box-sizing: border-box;
  border: 3.5px solid #00ffe1; /* Bordure bleu néon clair */
  box-shadow: 0 0 20px rgba(0, 255, 225, 0.9);
  backdrop-filter: blur(6px);
}

#userCoordinates {
  margin-top: 15px;
}

#latInput, #lonInput {
  width: calc(100% - 20px); /* Ajuste la largeur en fonction du padding */
  padding: 10px;
  margin: 5px 0;
  border-radius: 10px;
  border: 3.5px solid #00ffe1; /* bordure bleu néon clair */
  background-color: #222; /* fond sombre pour le champ */
  color: white;
  font-size: 16px;
  box-shadow: 0 0 10px rgba(0, 255, 225, 0.8);
}

#latInput:focus, #lonInput:focus {
  outline: none;
  box-shadow: 0 0 20px rgba(0, 255, 225, 1); /* effet lumineux au focus */
  border: 3.5px solid #00ffe1;
}

/* Bouton général */
button {
  width: 100%;
  padding: 12px;
  background-color: rgba(0, 0, 0, 0.3);
  color: white;
  border: 3.5px solid #00ffe1; /* bordure bleu néon clair */
  border-radius: 10px;
  font-size: 16px;
  transition: all 0.3s ease;
  box-shadow: 0 0 14px #00ffe180;
  backdrop-filter: blur(6px);
  font-family: 'Orbitron', sans-serif;
  overflow: hidden;
}

button:hover {
  background: rgba(128, 0, 128, 0.6); /* Fond violet transparent au survol */
  box-shadow: 0 0 20px rgba(128, 0, 128, 0.8), inset 0 0 15px rgba(128, 0, 128, 0.3); /* Ombre violet au survol */
}

/* Bouton "Localisez-moi" rectangulaire */
#locateBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 18px;
  background: linear-gradient(45deg, #00ffe1, #00cc99, #006666); /* Gradient bleu néon clair */
  color: white;
  border: none;
  cursor: pointer;
  width: 200px; /* Largeur rectangulaire */
  height: 50px; /* Hauteur rectangulaire */
  font-size: 20px;
  box-shadow: 0 0 25px rgba(0, 255, 225, 1), 0 0 35px rgba(0, 255, 225, 0.8); /* Ombre néon bleu clair */
  animation: glowing 1.5s infinite ease-in-out; /* Animation de scintillement */
  z-index: 30;
  transition: transform 0.3s ease-in-out;
  border-radius: 10px; /* Coins légèrement arrondis */
}

#locateBtn:hover {
  transform: scale(1.1); /* Effet de zoom au survol */
  box-shadow: 0 0 30px rgba(0, 255, 225, 1), 0 0 50px rgba(0, 255, 225, 0.8);
}

/* Animation du bouton "Localisez-moi" (scintillement néon) */
@keyframes glowing {
  0% { box-shadow: 0 0 10px rgba(0, 255, 225, 1), 0 0 20px rgba(0, 255, 225, 0.8); }
  50% { box-shadow: 0 0 25px rgba(0, 255, 225, 1), 0 0 35px rgba(0, 255, 225, 0.8); }
  100% { box-shadow: 0 0 10px rgba(0, 255, 225, 1), 0 0 20px rgba(0, 255, 225, 0.8); }
}

/* Animation du bouton "Localisez-moi" (scintillement néon) */
@keyframes glowing {
  0% { box-shadow: 0 0 10px rgba(0, 255, 225, 1), 0 0 20px rgba(0, 255, 225, 0.8); }
  50% { box-shadow: 0 0 25px rgba(0, 255, 225, 1), 0 0 35px rgba(0, 255, 225, 0.8); }
  100% { box-shadow: 0 0 10px rgba(0, 255, 225, 1), 0 0 20px rgba(0, 255, 225, 0.8); }
}

/* Responsivité mobile */
@media (max-width: 768px) {
  #container {
    height: 50%;
  }

  #map2dContainer {
    width: 80%;
    margin: 0 auto;
  }

  #controlPanel {
    bottom: 5%;
    left: 5%;
    width: 90%;
    font-size: 12px;
  }

  #locateBtn {
    bottom: 10px;
    right: 10px;
    padding: 15px;
  }

  #latInput, #lonInput {
    padding: 8px;
    margin: 3px 0;
  }

  /* Réduction de la taille de la carte sur petits écrans */
  #map2dContainer {
    width: 90%;
    max-width: 250px;
  }
}