body {
      margin: 0;
      background: #000000;
      font-family: Arial, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    #scoreboard {
      font-size: 28px;
      margin: 20px;
      color: white;
      background: rgba(0, 0, 0, 0.6);
      padding: 10px 20px;
      border-radius: 10px;
    }

    canvas {
      background: #6db36d;
      display: block;
      touch-action: manipulation;
       width: 100%;
 
  justify-content: center; 
    }

    #controls {
      margin: 20px;
      color: white;
      text-align: center;
    }

    label {
      margin: 0 10px;
    }

    #soundToggle,
    #restartBtn {
      margin-top: 10px;
      padding: 10px 20px;
      font-size: 18px;
      background: #444;
      color: white;
      border: none;
      border-radius: 8px;
      cursor: pointer;
    }

    #soundToggle:hover,
    #restartBtn:hover {
      background: #666;
    }



    /* Menu blanc sur fond noir */
#sous-menu-lignes {
  background: #000;           /* optionnel si le body est déjà noir */
  padding: 10px 0;
}

#sous-menu-lignes .menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px;
  justify-content: center;
}

#sous-menu-lignes .menu-list li { display: inline; }

/* liens du menu en blanc */
#sous-menu-lignes a.menu-lien {
  color: #fff !important;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 6px;
}

/* hover/focus: reste blanc, petit fond clair pour feedback */
#sous-menu-lignes a.menu-lien:hover,
#sous-menu-lignes a.menu-lien:focus-visible {
  color: #fff !important;
  background: rgba(255,255,255,0.12);
  outline: none;
}


/* Menu en blanc 24px */
#sous-menu .menu-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  justify-content:center;
}

#sous-menu .menu-lien,
#sous-menu .menu-lien:visited{
  color:#fff !important;      /* force le blanc même si a { color: ... } ailleurs */
  font-size:24px;
  font-weight:600;
  text-decoration:none;
  line-height:1.2;
  padding:6px 10px;
  border-radius:6px;
  transition:opacity .2s, text-decoration-color .2s;
}

#sous-menu .menu-lien:hover,
#sous-menu .menu-lien:focus{
  opacity:.85;                /* léger feedback */
  text-decoration:underline;
}

#sous-menu{ padding:12px 0; } /* optionnel, espace autour du menu */




/* --- Correction pour que le menu soit cliquable --- */
.menu-container {
  position: relative;
   z-index: 9999; /* le menu passe au-dessus de tout */
}

.menu-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  display: none;

  background: #222;
  padding: 10px 0;
  border: 1px solid #444;
  border-radius: 8px;
  list-style: none;
  z-index: 10000; /* encore au-dessus */
}

.menu-dropdown.show {
  display: block;
}

.scene {
  position: relative;
  z-index: 1; /* le cube reste derrière le menu */
}


 html, body {  
    background-color: black!important;
   }

:root{
  --menu-height: 90px; /* ajuste si besoin */
}

body{
  padding-top: var(--menu-height);
}

  h2 {
      margin: 0;
      padding: 0;
      height: 60px;
      line-height: 60px;
      text-align: center!important;
      font-size: 24px;
    }