/* --- Variables Globales --- */
:root {
  --pink-base: #ff69b4;
  --second_color: rgba(255, 105, 180, 0.3) ;
  --background_container_color: rgba(11, 11, 11, 0.95);
  --background_color: #0b0b0b;
  --text_color : white;
  --menu-height: 80px;
  --transition-speed: 0.3s;
}
/* Style pour le bouton actif */
.menu-box.active {
  background: var(--pink-base) !important;
  color: #0b0b0b !important; /* Texte noir pour la lisibilité */
  box-shadow: 0 0 15px var(--pink-base);
  font-weight: bold;
}
/* --- Reset & Base --- */
body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: var(--background_color);
  color: var(--text_color);
  font-family: sans-serif;
  overflow: hidden; /* Garde le contrôle du scroll par page */
}

/* --- Éléments Partagés (Bulles) --- */
#bubble-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.bubble {
  position: absolute;
  border-radius: 50%;
  opacity: 0.3;
  animation: rise linear infinite;
}

@keyframes rise {
  0% { transform: translateY(100vh); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(-50px); opacity: 0; }
}

.bottom-menu {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--menu-height);
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--background_container_color);
  border-top: 1px solid var(--second_color);
  z-index: 1000;
}

.menu-box {
  flex: 1;
  max-width: 220px;
  height: 50px;
  margin: 0 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--pink-base);
  color: var(--text_color);
  text-decoration: none;
  font-weight: bold;
  transition: all var(--transition-speed) ease;
}

.menu-box:hover {
  background: var(--pink-base);
  color: var(--background_color);
  box-shadow: 0 0 15px var(--pink-base);
}