html, body {
    margin: 0;
    padding: 0;
    overflow: hidden; /* Empêche les barres de défilement */
    background-color: #000; /* Fond noir */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* 2) Fond étoilé : Canvas #background */
#background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Derrière tous les autres éléments */
}

/* 3) Menu de navigation (navbar) */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999; /* Toujours au-dessus */
}

.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.menu > li {
    position: relative;
}

.menu > li > a {
    display: block;
    padding: 15px 20px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}

.menu > li > a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* 3.1) Sous-menu (submenu) */
.submenu {
    display: none;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.8);
    margin: 0;
    padding: 0;
    top: 100%;
    left: 0;
    z-index: 9999;
}

.submenu li a {
    padding: 10px 15px;
    color: #fff;
    text-decoration: none;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.submenu li a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.menu > li:hover .submenu {
    display: block;
}

/* 4) Texte défilant (marquee) */
.marquee-container {
    position: fixed;
    bottom: 2cm;      /* Ajustement la hauteur */
    width: 100%;
    overflow: hidden;
    z-index: 3;       /* Au-dessus du fond étoilé */
    height: 2em;
}

#marquee-text {
    white-space: nowrap;
    color: pink;
    font-size: 1.5em;
    position: absolute;
    transform: translateX(100%); /* Commence à droite, hors de l'écran */
}

/* 5) Texte fil de fer (#wireframe-text) */
#wireframe-text {
    position: absolute;
    top: 40%;         /* Ajuste la position verticale */
    left: 50%;
    transform: translate(-50%, -50%);
    color: transparent; /* Le texte est “creux” */
    font-size: 5rem;
    -webkit-text-stroke: 2px #fff; /* Fil de fer : contour blanc */
    text-transform: uppercase;
    z-index: 4;
    -webkit-transition: -webkit-text-stroke-color 1s ease;
    transition: text-stroke-color 1s ease;
}

/* 6) Sphères 3D (#sphere-left, #sphere-right) */
#sphere-left, #sphere-right {
    position: absolute;
    width: 400px;       /* Ajuste la taille voulue */
    height: 400px;
    background-color: transparent;
    z-index: 1;
    pointer-events: none; /* La souris “passe à travers” */
}

#sphere-left {
    top: 40%;
    left: 10%;
    transform: translateY(-50%);
}

#sphere-right {
    top: 40%;
    right: 10%;
    transform: translateY(-50%);
}

/* 7) Cube 3D (#cube-canvas) */
#cube-canvas {
    position: absolute;
    top: 70%;
    left: 50%;
    width: 300px;
    height: 300px;
    background-color: transparent;
    transform: translate(-50%, -50%);
    z-index: 2; /* Ajuste selon la superposition  */
}

/* 8) Triangle 3D (#triangle-canvas) 
   
*/
#triangle-canvas {
    position: absolute;
    width: 200px;       /* Taille du canvas */
    height: 200px;
    top: 20%;           /* Ajuste position au-dessus du texte "Hiroshiman" */
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: transparent;
    z-index: 2;         /* Ajuste le z-index  */
}