* {  margin: 0; padding: 0; box-sizing: border-box;}

html, body { background: #1a0015; color: #4c2207; color: #aebcd0; font-family: "Inter", sans-serif; 
  line-height: 1.6; scroll-behavior: smooth; }

#container { width: min(1200px, 100%); position: relative; margin: auto; }
@media (max-width: 1000px) {  #container { width: 1000px; } }

h1 { text-align: center; color: #aebcd0; font-family: 'Arial', sans-serif; font-weight: lighter;
  letter-spacing: 1px; font-size: 30px; margin-bottom: 60px; }

  .intro-section { display: block !important; }

.intro-container { display: flex; justify-content: center; align-items: center;
  max-width: 1000px; margin: 0 auto; }

p { text-align: left; color: #4c2207; font-family: 'Arial', sans-serif; font-weight: lighter;
  letter-spacing: 1px; font-size: 16px; margin-bottom: 60px; }
  
  .menu-item,
  .menu-open-button { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 10%;
    position: absolute; color: #ffffff; transition: transform ease-out 200ms; }
  .menu-open { display: none; }
  
  .lines { display: block;  position: absolute;  top: 50%; left: 50%; margin-left: -17px; margin-top: -1px;
    width: 35px; height: 4px; background: #051026; border-radius: 1em; transition: transform 200ms; }
  .line-1 { transform: translate3d(0, -9px, 0); }
  .line-2 { transform: translate3d(0, 0, 0); }
  .line-3 { transform: translate3d(0, 9px, 0); }
  
  .menu-open:checked + .menu-open-button .line-1 { transform: translate3d(0, 0, 0) rotate(45deg); }
  .menu-open:checked + .menu-open-button .line-2 { transform: translate3d(0, 0, 0) scale(0, 1); }
  .menu-open:checked + .menu-open-button .line-3 { transform: translate3d(0, 0, 0) rotate(-45deg); }
  
  .menu { position: relative; width: 70px; height: 70px; z-index: 1000; margin: 80px auto; margin-bottom: 120px;}

.menu-item { background-image: var(--icon); background-size: 60%; background-repeat: no-repeat;
  background-position: center; backdrop-filter: blur(4px); background-color: rgba(17, 17, 17, 0.6);
  width: 70px; height: 70px; border-radius: 10%; position: absolute; display: flex;
  justify-content: center; align-items: center; transition: background-size .25s ease;
}

/* Texte au hover */
.menu-item::after { content: attr(data-label); position: absolute; opacity: 0; background: rgba(5, 0, 5, 0.8); padding: 8px;
  transform: scale(0.6); transition: opacity .25s ease, transform .25s ease; color: #29ffff;
  font-weight: bold; font-family: 'Arial', sans-serif; font-size: 14px; text-transform: uppercase; letter-spacing: 1px;
  text-shadow: 0 0 8px #29ffff; pointer-events: none;
}

/* Icône disparaît */
.menu-item:hover { background-size: 0%; }

/* Texte apparaît */
.menu-item:hover::after { opacity: 1; transform: scale(1);}
  
  .menu-open-button { background: #ffd700; z-index: 1000; transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition-duration: 0.3s; transform: scale(1.1, 1.1) translate3d(0, 0, 0); cursor: pointer; }
  .menu-open-button:hover { transform: scale(1.2, 1.2) translate3d(0, 0, 0); }
  
  .menu-open:checked + .menu-open-button { transition-timing-function: linear; transition-duration: 0.2s;
    transform: scale(1, 1) translate3d(0, 0, 0);  }
  .menu-open:checked ~ .menu-item { transition-duration: 0.4s; transition-timing-function: cubic-bezier(0.2, 1, 0.2, 1.2);  }
  
  .menu-open:checked ~ .menu-item:nth-child(3) { transform: translate3d(0.08361px, -104.99997px, 0);  }
  .menu-open:checked ~ .menu-item:nth-child(4) { transition-delay: 0.24s; transform: translate3d(90.9466px, -52.47586px, 0); }
  .menu-open:checked ~ .menu-item:nth-child(5) { transition-delay: 0.24s;  transform: translate3d(90.9466px, 52.47586px, 0); }
  .menu-open:checked ~ .menu-item:nth-child(6) { transition-delay: 0.24s; transform: translate3d(0.08361px, 104.99997px, 0); }
  .menu-open:checked ~ .menu-item:nth-child(7) { transition-delay: 0.24s; transform: translate3d(-90.86291px, 52.62064px, 0); }
  .menu-open:checked ~ .menu-item:nth-child(8) { transition-delay: 0.24s; transform: translate3d(-91.03006px, -52.33095px, 0); }
  .menu-open:checked ~ .menu-item:nth-child(9) { transition-delay: 0.24s; transform: translate3d(-0.25084px, -104.9997px, 0); }
     
  .blue { border: 1px solid #29ffff; box-shadow: 0 0 10px #29ffff, 0 0 20px #29ffff; 
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12); }
  .blue:hover { border-color: #111; text-shadow: none; box-shadow: none; }