body {
      margin: 0;

      font-family: Arial, sans-serif;

      background-image:
      linear-gradient(
        rgba(0,0,0,0.7),
        rgba(0,0,0,0.7)
      ),
      url("../Images/fondmetier.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-size: 15px;

      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: 70px;

      color: #d4af37;

      margin-top: 60px;

      margin-bottom: 60px;

      text-shadow: 0 0 20px black;
    }

    /* CARTES */

    .cards {
      display: flex;

      justify-content: center;

      flex-wrap: wrap;

      gap: 35px;

      padding: 20px 50px 80px;
    }

    .card {
      width: 320px;

      background-color: rgba(20,20,20,0.9);

      border: 2px solid black;

      border-radius: 15px;

      overflow: hidden;

      transition: 0.3s;
    }

    .card:hover {
      transform: translateY(-10px);

      box-shadow: 0 0 25px rgba(212, 175, 55, 0.4);
    }

    .card img {
      width: 100%;

      height: 200px;

      object-fit: cover;
    }

    .card-content {
      padding: 25px;
      text-align: center;
    }

    .card h2 {
      color: #d4af37;

      margin-bottom: 15px;
    }

    .card p {
      color: #ddd;

      font-size: 15px;
    }

    /* 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;

}