/* Fichier: /public/css/hearts.css */

.heart-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    color: var(--support_user_text);
    text-decoration: none;
}

.heart-btn:hover {
    background-color: rgba(255, 182, 193, 0.1);
    transform: translateY(-1px);
}

.heart-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.heart-icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    position: relative;
}

.heart-icon::before {
    content: "";
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: all 0.2s ease;
}

/* État "cœur donné" */
.heart-icon.hearted::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23e74c3c' stroke='%23e74c3c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
}

.heart-btn.hearted {
    color: #e74c3c;
}

.heart-btn.hearted:hover {
    background-color: rgba(231, 76, 60, 0.1);
}

.heart-count {
    font-weight: 500;
    min-width: 1rem;
    text-align: left;
}

/* Animation de pulsation au clic */
@keyframes heartPulse {
    0% { 
        transform: scale(1); 
    }
    50% { 
        transform: scale(1.3); 
    }
    100% { 
        transform: scale(1); 
    }
}

.heart-pulse {
    animation: heartPulse 0.3s ease-out;
}

/* Styles pour les statistiques d'écho */
.echo-stats {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--support_user_border);
}

.echo-stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--support_user_text);
    opacity: 0.7;
}

.echo-stat-icon {
    width: 16px;
    height: 16px;
    opacity: 0.6;
}

/* Responsive */
@media (max-width: 768px) {
    .heart-btn {
        padding: 0.4rem 0.6rem;
        font-size: 0.85rem;
    }
    
    .heart-icon {
        width: 16px;
        height: 16px;
    }
    
    .heart-icon::before {
        width: 14px;
        height: 14px;
    }
}