body {

      margin: 0;

      font-family: Arial, sans-serif;

      background:
      linear-gradient(
        rgba(0,0,0,0.82),
        rgba(0,0,0,0.82)
      ),
      url("../Images/BANNIERE.png");

      background-size: cover;
      background-position: center;
      background-attachment: fixed;

      color: white;
    }

    /* NAVBAR */

    nav {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  box-sizing: border-box;

  padding: 25px 40px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  z-index: 1000;

  transition: 0.4s;

  background: transparent;

  border-bottom: 1px solid transparent;
}
    nav a {

      color: white;

      text-decoration: none;

      font-weight: bold;

      text-transform: uppercase;

      transition: 0.3s;
    }

    .gauche {

  display: flex;

  align-items: center;

  gap: 15px;
}

.logo {

  width: 55px;

  height: 55px;

  border-radius: 10px;
}

.nom-serveur {

  font-size: 32px;

  font-weight: bold;

  color: #d4af37;

  text-shadow:
  0 0 12px rgba(212,175,55,0.35);
}

.menu {

  display: flex;

  gap: 50px;

  align-items: center;
}

    nav a:hover {

      color: #d4af37;
    }

    /* TITRE */

    h1 {

      text-align: center;

      font-size: 65px;

      color: #d4af37;

      margin-top: 60px;

      margin-bottom: 12px;

      text-shadow: 0 0 20px black;
    }

    .description {

      text-align: center;

      color: #bbb;

      font-size: 20px;

      margin-bottom: 35px;
    }

    /* RECHERCHE */

    .search-container {

      display: flex;

      justify-content: center;

      margin-bottom: 45px;
    }

    #searchInput {

      width: 600px;

      max-width: 90%;

      padding: 16px 22px;

      border-radius: 14px;

      border: 2px solid #d4af37;

      background: rgba(15,15,15,0.95);

      color: white;

      font-size: 16px;

      outline: none;

      transition: 0.3s;

      box-shadow: 0 0 18px rgba(212,175,55,0.12);
    }

    #searchInput:focus {

      box-shadow: 0 0 28px rgba(212,175,55,0.28);

      border-color: #f5d76e;
    }

    #searchInput::placeholder {

      color: #888;
    }

    /* FAQ */

    .faq-container {

      max-width: 950px;

      margin: auto;

      padding: 0 20px 100px;
    }

    .faq {

      background: rgba(12,12,12,0.92);

      border: 1px solid rgba(212,175,55,0.45);

      border-left: 4px solid #d4af37;

      border-radius: 14px;

      margin-bottom: 16px;

      padding: 18px 22px;

      transition: 0.25s;
    }

    .faq:hover {

      transform: translateY(-3px);

      background: rgba(18,18,18,0.96);

      box-shadow: 0 0 18px rgba(212,175,55,0.12);
    }

    .faq h2 {

      color: #d4af37;

      font-size: 20px;

      margin-bottom: 8px;
    }

    .faq p {

      color: #d6d6d6;

      font-size: 15px;

      line-height: 1.6;

      margin: 0;
    }

    /* FOOTER */

    footer {

      background: black;

      border-top: 2px solid #d4af37;

      text-align: center;

      padding: 25px;

      color: gray;

      font-size: 14px;
    }

    /* SCROLLBAR */

::-webkit-scrollbar {

  width: 10px;
}

::-webkit-scrollbar-track {

  background: #0a0a0a;
}

::-webkit-scrollbar-thumb {

  background: #d4af37;

  border-radius: 10px;

  border: 2px solid #0a0a0a;
}

::-webkit-scrollbar-thumb:hover {

  background: #f5d76e;
}

#music-btn {

  position: fixed;

  bottom: 25px;

  right: 25px;

  width: 60px;

  height: 60px;

  border-radius: 50%;

  border: 2px solid #d4af37;

  background: rgba(0,0,0,0.85);

  color: #d4af37;

  font-size: 24px;

  cursor: pointer;

  z-index: 9999;

  transition: 0.3s;

  box-shadow:
  0 0 15px rgba(212,175,55,0.25);

}

#music-btn:hover {

  transform: scale(1.08);

  background: #111;

}