/* Base mobile-first */
* { box-sizing: border-box; }

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-family: 'Orbitron', Arial, sans-serif;
  background: #0a0a0a;
  color: #0ff;
  overflow: hidden;
}

/* Espace pour les planètes et satellites */
.space {
  width: 100%; 
  height: calc(100% - 160px); /* Header + Footer */
  margin-top: 80px;
  margin-bottom: 80px;
  position: relative;
}

/* Planète centrale */
.planet {
  position: absolute;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 20px #0ff, 0 0 40px #0ff inset;
  border: 2px solid #0ff;
  transition: transform 0.3s, box-shadow 0.3s;
}

/* Satellites */
.satellite {
  position: absolute;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 10px #0ff, 0 0 20px #0ff inset;
  filter: drop-shadow(0 0 8px #0ff);
  transition: transform 0.3s, box-shadow 0.3s;
}

/* Traînée des satellites */
.sat-trail {
  pointer-events: none;
  filter: blur(2px);
  position: absolute;
  border-radius: 50%;
}

/* Hover / sélection */
.planet:hover, .satellite:hover,
.planet.selected, .satellite.selected {
  transform: scale(1.3);
  box-shadow: 0 0 40px #0ff, 0 0 80px #0ff inset;
}

/* Halo animé */
.planet.selected::before,
.satellite.selected::before {
  content: '';
  position: absolute;
  top: -15%; left: -15%;
  width: 130%; height: 130%;
  border-radius: 50%;
  box-shadow: 0 0 20px #0ff, 0 0 40px #0ff inset;
  animation: halo 2s infinite alternate;
  pointer-events: none;
  z-index: -1;
}

@keyframes halo {
  0% { box-shadow: 0 0 20px #0ff, 0 0 40px #0ff inset; transform: scale(1); }
  50% { box-shadow: 0 0 35px #0ff, 0 0 70px #0ff inset; transform: scale(1.1); }
  100% { box-shadow: 0 0 20px #0ff, 0 0 40px #0ff inset; transform: scale(1); }
}

/* Orbites visibles optionnelles */
.orbit-path {
  position: absolute;
  border: 1px dashed rgba(0, 255, 255, 0.3);
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

/* Responsive desktop */
@media(min-width: 768px) {
  .space {
    height: calc(100% - 160px);
    margin-top: 100px;
    margin-bottom: 100px;
  }
}