body {
            margin: 0;
            padding: 0;
            background-color: black !important;
            color: white;
            font-family: Arial, sans-serif;
            text-align: center;
        }

        .centered-text {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 30px;
        }

        .scene {
            width: 300px;
            height: 300px;
            perspective: 600px;
            margin: 260px auto 20px auto;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: grab;
            position: relative;
        }

        .scene:active {
            cursor: grabbing;
        }

        .cube {
            width: 300px;
            height: 300px;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.2s ease-out;
        }

        .face {
            position: absolute;
            width: 300px;
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            text-align: center;
            color: white;
            cursor: pointer;
        }

        .front  { transform: translateZ(150px); background: #FF6347; }
        .back   { transform: rotateY(180deg) translateZ(150px); background: #4682B4; }
        .left   { transform: rotateY(-90deg) translateZ(150px); background: #32CD32; }
        .right  { transform: rotateY(90deg) translateZ(150px); background: #FFD700; }
        .top    { transform: rotateX(90deg) translateZ(150px); background: #800080; }
        .bottom { transform: rotateX(-90deg) translateZ(150px); background: #FF4500; }

        .hidden {
            display: none !important;
        }

   #infoImage {
    width: 400px;
    max-width: 90vw;
    position: fixed; /* fixé au centre de la fenêtre */
    top: 50%;
    left: 50%;
    transform: translate(-50%, 41px); /* déplacement unique et correct */
    z-index: 100;
    display: none;
    transition: all 0.3s ease-in-out;
    pointer-events: none;
}


#infoBox {
    font-size: 60px;
    line-height: 1.5em;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 50px); /* juste au-dessus du cube */
    text-align: center;
    color: white;
    display: none;
    z-index: 101;
    background-color: rgba(0,0,0,0.6);
    padding: 12px 20px;
    border-radius: 12px;
    max-width: 90vw;
}



        #changeCubeButton {
            margin-top: 102px;
            padding: 10px 20px;
            font-size: 24px;
        }

/* --- Correction pour que le menu soit cliquable --- */
..menu-float{
  position: relative;
  margin-top: -60px;
  z-index: 9999;
}


.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: black;
  height: auto !important;
  min-height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}


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



#infoBox,
#infoImage {
  /* centrer horizontalement + remonter de 88px */
  transform: translate(-50%, -88px);
}



.menu-lien {  
       color: white;
       font-size: 25px;
       font-weight: bold;

 }