/* --- Conteneur principal des boutons --- */
.buttons-container {
    display: inline-flex;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    border: 2px solid #CE9400;
    width: max-content;
}

/* --- Groupe contenant un bouton et son compteur --- */
.vote-group {
    display: flex;
    align-items: center;
    gap: 12px; /* Espace entre le bouton et le compteur */
}

/* --- Style général des boutons --- */
.vote-btn {
    border: 2px solid #d5cdcd;
    color: #ffffff !important;
    font-size: 1.2em; /* Taille de l'icône */
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease; /* Animation fluide au survol */
    background-color: #464646 !important;
}

/* --- Style des compteurs --- */
.count {
    font-size: 1.1em;
    font-weight: bold;
    min-width: 30px; /* Empêche le layout de bouger quand le nombre change */
    text-align: left;
}

/* --- Effets au survol (Hover) --- */

/* Bouton LIKE au survol */
#likeBtn:hover {
    border-color: #9f0;
    box-shadow: 0 0 10px rgba(153, 255, 0, 0.5);
}

/* Bouton DISLIKE au survol */
#dislikeBtn:hover {
    border-color: #f44336;
    box-shadow: 0 0 10px rgba(244, 67, 54, 0.5);
}

/* Style pour les boutons une fois qu'un vote a été effectué */
.vote-btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Style pour mettre en évidence le choix de l'utilisateur */
.vote-btn.active#likeBtn {
    border-color: #9f0;
}

.vote-btn.active#dislikeBtn {
    border-color: #f44336;
}

/* On annule l'effet de survol sur les boutons désactivés */
.vote-btn.disabled:hover {
    box-shadow: none;
}