/**
 * EMOCARD CUSTOM BUTTONS - VERSION SIMPLIFIÉE
 * ==========================================
 * 
 * Correction des problèmes de boutons et suppression des effets d'images
 */

/* Variables couleurs */
:root {
    --silver-primary: #c0c0c0;
    --silver-light: #e6e6e6;
    --silver-dark: #909090;
    --silver-shadow: rgba(192, 192, 192, 0.4);
    
    --gold-primary: #b28859;
    --gold-light: #c19668;
    --gold-dark: #9a7349;
    --gold-shadow: rgba(178, 136, 89, 0.3);
}



/* BOUTON SILVER POUR LE HEADER */
.btn-premium.silver {
    background: linear-gradient(135deg, 
        var(--silver-dark) 0%, 
        var(--silver-primary) 25%, 
        var(--silver-light) 50%, 
        var(--silver-primary) 75%, 
        var(--silver-dark) 100%
    ) !important;
    background-size: 300% 300% !important;
    
    /* Texte NOIR pour contraste sur argenté */
    color: #2c3e50 !important;
    
    /* AUCUNE transition CSS - le JavaScript gère tout */
    transition: none !important;
    
    /* Ombres argentées */
    box-shadow: 
        0 12px 35px var(--silver-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
    filter: drop-shadow(0 6px 12px var(--silver-shadow)) !important;
}

/* États hover/focus/active silver avec texte NOIR */
.btn-premium.silver:hover,
.btn-premium.silver:focus,
.btn-premium.silver:active {
    /* MAINTENIR LE TEXTE NOIR */
    color: #2c3e50 !important;
    text-decoration: none !important;
    
    /* Maintenir le background silver */
    background: linear-gradient(135deg, 
        var(--silver-dark) 0%, 
        var(--silver-primary) 25%, 
        var(--silver-light) 50%, 
        var(--silver-primary) 75%, 
        var(--silver-dark) 100%
    ) !important;
    background-size: 300% 300% !important;
    
    /* AUCUNE transition pour éviter l'effet abrupt */
    transition: none !important;
}

/* Header special silver */
.btn-premium.silver.header-special {
    /* Gradient silver plus brillant */
    background: linear-gradient(135deg, 
        #a8a8a8 0%, 
        var(--silver-light) 20%, 
        #f5f5f5 40%, 
        var(--silver-light) 60%, 
        var(--silver-primary) 80%,
        var(--silver-dark) 100%
    ) !important;
    
    /* Texte NOIR pour le header */
    color: #2c3e50 !important;
    
    /* Ombres plus prononcées */
    box-shadow: 
        0 16px 45px rgba(192, 192, 192, 0.8),
        inset 0 2px 0 rgba(255, 255, 255, 0.6),
        inset 0 -2px 0 rgba(0, 0, 0, 0.1),
        0 0 40px rgba(192, 192, 192, 0.6) !important;
    filter: drop-shadow(0 8px 16px rgba(192, 192, 192, 0.7)) !important;
    
    /* AUCUNE animation CSS qui interfère */
    animation: none !important;
    transition: none !important;
}

/* BOUTONS GOLD POUR LES AUTRES */
.btn-premium.gold {
    background: linear-gradient(135deg, 
        var(--gold-dark) 0%, 
        var(--gold-primary) 25%, 
        var(--gold-light) 50%, 
        var(--gold-primary) 75%, 
        var(--gold-dark) 100%
    ) !important;
    background-size: 300% 300% !important;
    
    /* Texte blanc pour les boutons gold */
    color: #ffffff !important;
    
    /* AUCUNE transition CSS */
    transition: none !important;
    
    /* Ombres dorées */
    box-shadow: 
        0 12px 35px var(--gold-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3) !important;
    filter: drop-shadow(0 6px 12px var(--gold-shadow)) !important;
}

/* États hover gold avec texte blanc */
.btn-premium.gold:hover,
.btn-premium.gold:focus,
.btn-premium.gold:active {
    /* MAINTENIR LE TEXTE BLANC */
    color: #ffffff !important;
    text-decoration: none !important;
    
    /* Maintenir le background gold */
    background: linear-gradient(135deg, 
        var(--gold-dark) 0%, 
        var(--gold-primary) 25%, 
        var(--gold-light) 50%, 
        var(--gold-primary) 75%, 
        var(--gold-dark) 100%
    ) !important;
    background-size: 300% 300% !important;
    
    /* AUCUNE transition */
    transition: none !important;
}

/* SUPPRIMER TOUS LES EFFETS D'IMAGES PROBLÉMATIQUES */
.portfolio-item img,
.about-photo img,
.hero-photo img,
.portfolio-grid img,
.testimonial-avatar img {
    /* Réinitialiser les effets */
    transition: none !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
}

.portfolio-item img:hover,
.about-photo img:hover,
.hero-photo img:hover,
.portfolio-grid img:hover,
.testimonial-avatar img:hover {
    /* Pas d'effets pour l'instant */
    transition: none !important;
    transform: none !important;
    filter: none !important;
}

.portfolio-item::before {
    display: none !important;
}

/* Forcer la spécificité pour éviter les conflits */
body .btn-premium.silver {
    color: #2c3e50 !important;
}

body .btn-premium.gold {
    color: #ffffff !important;
}

body .btn-premium.silver:hover,
body .btn-premium.silver:focus,
body .btn-premium.silver:active {
    color: #2c3e50 !important;
}

body .btn-premium.gold:hover,
body .btn-premium.gold:focus,
body .btn-premium.gold:active {
    color: #ffffff !important;
}