/* Barre d'actions d'un avis (J'aime / J'aime pas / Partager / Signaler / Message / Répondre /
   Voir l'avis) - partagée par vuecommerce.aspx et aviscommerce.aspx. Remplace l'ancienne mise en
   page (deux colonnes de boutons empilés à largeur fixe 130px, qui débordait et se repliait mal
   sur une carte de 520px de large) par une seule ligne compacte.
   Les classes fonctionnelles (btn-like, btn-dislike, btn-outline-success/btn-success,
   btn-outline-danger/btn-danger, active, count-likes, count-dislikes, count-partages,
   btn-signaler-avis, count-signalements) sont celles que le JavaScript de chaque page
   manipule directement (voterAvis/updateButtonStates/updateCounters, partagerAvis,
   ModalSignalement) - ne jamais les renommer, seule leur habillage visuel change ici. */

.avis-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0 2px;
    border-top: 1px solid #eef0f1;
}

/* J'aime / J'aime pas : un seul contrôle segmenté plutôt que deux boutons empilés */
.avis-vote-group {
    display: flex;
    border: 1px solid #d8dcdf;
    border-radius: 999px;
    overflow: hidden;
    flex-shrink: 0;
}

    .avis-vote-group .btn {
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 6px 12px;
        font-size: 0.82rem;
        font-weight: 600;
        border: none;
        border-radius: 0;
        background: transparent;
        color: #495057;
        line-height: 1;
    }

        .avis-vote-group .btn:first-child {
            border-right: 1px solid #d8dcdf;
        }

        .avis-vote-group .btn:hover:not(:disabled) {
            background: #f4f5f6;
        }

        .avis-vote-group .btn.btn-success,
        .avis-vote-group .btn.btn-danger {
            color: #fff;
        }

        .avis-vote-group .btn.btn-success {
            background: #198754;
        }

        .avis-vote-group .btn.btn-danger {
            background: #dc3545;
        }

        .avis-vote-group .btn:disabled {
            opacity: .6;
            cursor: default;
        }

        .avis-vote-group .badge {
            background: transparent !important;
            color: inherit;
            font-size: 0.78rem;
            font-weight: 700;
            padding: 0;
        }

/* Partager / Signaler / Message / Répondre : boutons discrets icône + libellé, libellé masqué
   sous 768px pour laisser la place au contrôle de vote sur mobile. */
.avis-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border: 1px solid #d8dcdf;
    border-radius: 999px;
    background: #fff;
    color: #495057;
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
    line-height: 1;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

    .avis-action-btn:hover:not(:disabled) {
        background: #f4f5f6;
        border-color: #b6bcc2;
        color: #212529;
        text-decoration: none;
    }

    .avis-action-btn.btn-signaler-avis:hover:not(:disabled) {
        background: #fdecea;
        border-color: #dc3545;
        color: #dc3545;
    }

    .avis-action-btn .avis-action-count {
        font-size: 0.76rem;
        font-weight: 700;
        color: #6c757d;
    }

.avis-action-label {
}

/* Lien "Voir l'avis" : reste sur la même ligne que le reste (margin-left: auto), au lieu
   d'occuper sa propre colonne réservée comme avant. */
.avis-action-link {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 2px;
    font-size: 0.82rem;
    color: #6c757d;
    text-decoration: none;
    white-space: nowrap;
}

    .avis-action-link:hover {
        color: #00785F;
        text-decoration: none;
    }

@media (max-width: 767.98px) {
    .avis-action-label {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .avis-actions {
        gap: 6px;
    }

    .avis-vote-group .btn,
    .avis-action-btn {
        padding: 5px 8px;
        font-size: 0.78rem;
    }
}