#classement {
    width: 100%; /* Utilise toute la largeur disponible */
    max-width: 1200px; /* Largeur maximale */
    margin: 60px auto; /* Centre le conteneur */
    padding: 40px; /* Espace autour du contenu */
    background-color: #2a2a2a; /* Couleur de fond souhaitée */
    border-radius: 12px; /* Rayon des coins */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); /* Ombre portée */
    gap: 20px; /* Espace entre les éléments internes */
    transition: all 0.3s ease-in-out; /* Transition pour les effets */
    border: 2px solid rgba(255, 255, 255, 0.1); /* Bordure */
}

.leaderboard-table {
    width: 100%; /* Prend toute la largeur disponible */
    border-collapse: separate;
    border-spacing: 0 15px; /* Espace vertical entre les lignes */
    table-layout: fixed; /* Utiliser le layout fixe */
}

.leaderboard-table th,
.leaderboard-table td {
    padding: 20px 30px; /* Espace horizontal dans les cellules */
    text-align: left; /* Alignement à gauche */
    border: none; /* Aucune bordure pour les cellules */
    color: white; /* Texte blanc pour le contraste */
    min-width: 100px; /* Largeur minimale pour les cellules d'en-tête */
}

.leaderboard-table th {
    color: #ccc; /* Couleur pour les en-têtes */
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1em; /* Taille de police d'en-tête */
    letter-spacing: 1px;
    width: 33%; /* Ajustez cette largeur si nécessaire pour chaque colonne */
    padding-bottom: 15px; /* Espacement sous l'en-tête */
}

.leaderboard-table tr {
    background: #333; /* Fond des lignes du tableau */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.leaderboard-table tr:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.leaderboard-table tr td:first-child {
    border-radius: 10px 0 0 10px;
}

.leaderboard-table tr td:last-child {
    border-radius: 0 10px 10px 0;
}

.avatar {
    width: 90px; /* Taille de l'avatar pour équilibrer */
    height: 90px;
    margin-right: 20px;
}

.pseudo {
    font-weight: bold;
    font-size: 1.3em; /* Taille de police pour le pseudo */
    color: white; /* Texte blanc pour le contraste */
}

.deaths {
    font-size: 1.1em; /* Taille de police pour les deaths */
    color: #aaa; /* Couleur pour les deaths */
}

/* Espacement accru entre les lignes */
.leaderboard-table tr + tr {
    margin-top: 15px;
}

/* Responsive styling */
@media (max-width: 600px) {
    #classement {
        padding: 20px; /* Ajuste le padding sur mobile */
        width: 100%; /* Utilise toute la largeur sur mobile */
        max-width: none; /* Enlève la largeur maximale sur mobile */
    }
    .leaderboard-table th,
    .leaderboard-table td {
        padding: 14px 18px;
        width: auto; /* Enlève la largeur fixe pour les petits écrans */
    }
    .avatar {
        width: 60px; /* Ajuste la taille de l'avatar sur mobile */
        height: 60px;
    }
}

.buttons-container {
    display: flex;
    justify-content: flex-end; /* Aligne les boutons à droite */
    margin-bottom: 20px; /* Espace entre les boutons et le tableau */
}

.toggle-button {
    background: #007BFF; /* Couleur de fond bleue */
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    margin-left: 10px; /* Espace entre les boutons */
    cursor: pointer;
    transition: background 0.3s ease;
}

.toggle-button:hover {
    background: #0056b3; /* Couleur de fond plus foncée au survol */
}

.toggle-button i {
    margin-right: 5px; /* Espace entre l'icône et le texte */
}
.neon-text {
    color: #ffffff; /* Texte en blanc */
    text-shadow: 
        0 0 5px rgba(255, 255, 255, 0.8), /* Lumière blanche */
        0 0 10px rgba(255, 255, 255, 0.6), /* Lumière blanche plus diffuse */
        0 0 15px rgba(0, 200, 255, 0.4); /* Lumière cyan pour l'effet néon */
    font-weight: bold; /* Mettre le texte en gras */
    
    font-size: 40px;
    
}