body { 
  margin: 0; 
  overflow: hidden;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#time {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: lightblue;
  font-family: monospace;
  background: rgba(0,0,0,0.5);
  padding: 5px 10px;
  border-radius: 5px;
  pointer-events: none;
}

/* Style des Pop-ups pour les universités */
.scene-tooltip {
  background-color: rgba(255, 255, 255, 0.95);
  color: #333;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  text-align: center;
  min-width: 200px;
}
.scene-tooltip h3 { margin: 0 0 5px 0; font-size: 16px; color: #0056b3; }
.scene-tooltip p { margin: 0 0 10px 0; font-size: 13px; color: #666; }
.scene-tooltip img { width: 100%; height: 120px; object-fit: cover; border-radius: 4px; }

/* --- Style du Panneau d'Information au Clic --- */
#panneau-info {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 0; /* <-- C'est ici que la magie opère, on enlève la bordure blanche */
  overflow: hidden; /* <-- Coupe l'image pour respecter les coins arrondis */
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  text-align: center;
  width: 300px;
  z-index: 1000;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Classe pour cacher le panneau */
#panneau-info.masque {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -40%); /* Petit effet de glissement */
}

#panneau-info img { width: 100%; height: 180px; object-fit: cover; border-radius: 8px; margin-bottom: 15px;}
#panneau-info img { 
  width: 100%; 
  height: 180px; 
  object-fit: cover; 
  margin: 0; 
  display: block;
}

#panneau-info h3 { 
  margin: 15px 0 5px 0; /* Espace entre la photo et le titre */
  font-size: 20px; 
  color: #0056b3; 
  padding: 0 20px; /* Espace sur les côtés */
}

#panneau-info p { 
  margin: 0 0 20px 0; /* Espace tout en bas de la carte */
  font-size: 15px; 
  color: #666; 
  padding: 0 20px; /* Espace sur les côtés */
}

/* --- Adaptation pour les Téléphones Portables --- */
@media (max-width: 768px) {
  #panneau-info {
    top: auto;
    bottom: 0;
    left: 0;
    transform: translateY(0);
    width: 100%;
    border-radius: 25px 25px 0 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  #panneau-info.masque {
    transform: translateY(100%); /* Le panneau descend sous l'écran pour se cacher */
  }

}

/* --- Style de la Légende (Design Tech) --- */
#legende {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(2, 8, 19, 0.7); /* Fond sombre transparent */
  backdrop-filter: blur(5px);
  border: 1px solid #1c497d; /* Bordure bleu lumineux */
  padding: 12px 25px;
  border-radius: 30px;
  display: flex;
  gap: 30px; /* Espace entre les 3 éléments */
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  z-index: 500; /* Pour passer au-dessus du globe */
}

.legende-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Les petits ronds de couleur façon néon */
.pastille {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 10px currentColor; /* Le halo lumineux prend la couleur de la pastille */
}

.pastille.bleu { background-color: #00ffff; color: #00ffff; }
.pastille.rouge { background-color: #ff0055; color: #ff0055; } /* Un rouge légèrement rosé pour un bel effet néon */
.pastille.violet { background-color: #aa00ff; color: #aa00ff; }

/* Adaptation pour les téléphones portables */
/* --- Adaptation pour les Téléphones Portables --- */
@media (max-width: 768px) {
  
  /* 1. Le Panneau d'Information (Plus spacieux) */
  #panneau-info {
    top: auto;
    bottom: 0;
    left: 0;
    transform: translateY(0);
    width: 100%;
    border-radius: 25px 25px 0 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  #panneau-info.masque {
    transform: translateY(100%);
  }

  /* On agrandit la photo et les textes pour le confort de lecture */
  #panneau-info img { height: 220px; }
  #panneau-info h3 { font-size: 24px; margin-top: 20px; }
  #panneau-info p { font-size: 16px; margin-bottom: 30px; }

  /* 2. La Légende (Déplacée en haut et grossie) */
  #legende {
    top: 20px;       /* On la place tout en haut ! */
    bottom: auto;    /* On annule la position du bas */
    width: 85%;      /* Un peu moins large pour faire joli */
    flex-direction: column; 
    gap: 12px;
    padding: 15px 20px;
    border-radius: 15px;
    font-size: 16px; /* Texte plus gros */
  }

  /* Des pastilles plus grosses pour la visibilité */
  .pastille {
    width: 18px;
    height: 18px;
  }
}