body {

      margin: 0;

      font-family: Arial, sans-serif;

      background-image:
      linear-gradient(
        rgba(0,0,0,0.75),
        rgba(0,0,0,0.75)
      ),
      url("../Images/fondillegal.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.active {

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

  backdrop-filter: blur(8px);

  border-bottom: 2px solid #ff0000;

  box-shadow:
  0 0 20px rgba(255,0,0,0.2);
}

.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: #ff0000;

  text-shadow:
  0 0 12px rgba(255,0,0,0.35);
}

.menu {

  display: flex;

  gap: 50px;

  align-items: center;
}

    nav a {

      color: white;

      text-decoration: none;

      font-size: 15px;

      font-weight: bold;

      text-transform: uppercase;

      transition: 0.3s;
    }

    nav a:hover {

      color: #ff0000;
    }

    /* TITRE */

    h1 {

      text-align: center;

      font-size: 80px;

      color: #ff0000;

      margin-top: 60px;

      margin-bottom: 20px;

      text-shadow: 0 0 20px black;
    }

    .description {

      text-align: center;

      font-size: 22px;

      color: #ddd;

      margin-bottom: 70px;

      padding: 40px 40px;
    }

    /* LIGNES */

    .cards,
    .bottom-cards {

      display: flex;

      justify-content: center;

      flex-wrap: wrap;

      gap: 45px;

      margin-bottom: 70px;
    }

    /* IMAGE */

    .image-card {

      width: 360px;

      transition: 0.3s;
    }

    .image-card:hover {

      transform: translateY(-10px);
    }

    .image-card img {

      width: 100%;

      height: 500px;

      object-fit: cover;

      object-position: top;

      border-radius: 18px;

      border: 3px solid #ff0000;

      box-shadow: 0 0 25px rgba(255,0,0,0.5);
    }

    /* TEXTE EN DESSOUS */

    .text {

      text-align: center;

      margin-top: 22px;
    }

    .text h2 {

      color: #ff0000;

      font-size: 36px;

      margin-bottom: 14px;

      text-shadow: 0 0 10px black;
    }

    .text p {

      color: #ddd;

      font-size: 18px;

      line-height: 1.6;

      width: 330px;

      margin: auto;
    }

    /* BAS */

    .bottom-cards {

      padding-bottom: 120px;
    }

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

}