/**
 * COLLECTION BOUTONS PREMIUM
 * ==========================
 * 
 * Collection complète de boutons premium avec animations liquid gold
 * Différents styles : Gold, Silver, Copper, Blue, Green, Purple, Dark
 * Même base d'animation pour tous les styles
 * 
 * Usage: 
 * <button class="btn-premium [style]">Texte</button>
 * 
 * Styles disponibles:
 * - btn-premium gold (défaut)
 * - btn-premium silver  
 * - btn-premium copper
 * - btn-premium blue
 * - btn-premium green
 * - btn-premium purple
 * - btn-premium dark
 * 
 * Créé par Maxime Berthet - EMOCARD
 * Version: Collection Premium v1.0
 */

/* Import de la police premium */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Variables CSS pour les effets dynamiques */
:root {
    /* Variables d'animation communes */
    --mouse-x: 50%;
    --mouse-y: 50%;
    --glow-opacity-before: 0;
    --glow-opacity-after: 0;
    
    /* PALETTE GOLD (défaut) */
    --gold-primary: #c8a23f;
    --gold-light: #A67C00;
    --gold-dark: #91742f;
    --gold-warm: #92560d;
    --gold-rich: #9c7314;
    --gold-shadow: rgba(139, 105, 20, 0.3);
    
    /* PALETTE SILVER */
    --silver-primary: #c0c0c0;
    --silver-light: #e6e6e6;
    --silver-dark: #909090;
    --silver-warm: #b8b8b8;
    --silver-rich: #a8a8a8;
    --silver-shadow: rgba(160, 160, 160, 0.3);
    
    /* PALETTE COPPER */
    --copper-primary: #b87333;
    --copper-light: #cd853f;
    --copper-dark: #8b4513;
    --copper-warm: #a0522d;
    --copper-rich: #964b00;
    --copper-shadow: rgba(184, 115, 51, 0.3);
    
    /* PALETTE BLUE */
    --blue-primary: #4a9eff;
    --blue-light: #70b4ff;
    --blue-dark: #2871cc;
    --blue-warm: #3a8bff;
    --blue-rich: #1e5fa3;
    --blue-shadow: rgba(74, 158, 255, 0.3);
    
    /* PALETTE GREEN */
    --green-primary: #50c878;
    --green-light: #7ad696;
    --green-dark: #3a9b5c;
    --green-warm: #45b86b;
    --green-rich: #2d7a47;
    --green-shadow: rgba(80, 200, 120, 0.3);
    
    /* PALETTE PURPLE */
    --purple-primary: #9b59b6;
    --purple-light: #bb7bdb;
    --purple-dark: #744290;
    --purple-warm: #8e44ad;
    --purple-rich: #663399;
    --purple-shadow: rgba(155, 89, 182, 0.3);
    
    /* PALETTE DARK */
    --dark-primary: #2c3e50;
    --dark-light: #34495e;
    --dark-dark: #1a252f;
    --dark-warm: #273746;
    --dark-rich: #1c2833;
    --dark-shadow: rgba(44, 62, 80, 0.3);
}

/* BASE COMMUNE POUR TOUS LES BOUTONS */
.btn-premium {
    position: relative;
    display: inline-block;
    padding: 18px 45px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #edeceb;
    border: none;
    border-radius: 32px;
    cursor: pointer;
    overflow: visible;
    user-select: none;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    /* Animation contrôlée par JavaScript */
    transform: translateY(0) scale(1);
    transition: none;
    
    /* Base gradient gold par défaut */
    background: linear-gradient(135deg, 
        var(--gold-dark) 0%, 
        var(--gold-primary) 25%, 
        var(--gold-light) 50%, 
        var(--gold-primary) 75%, 
        var(--gold-rich) 100%
    );
    background-size: 300% 300%;
    
    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);
    filter: drop-shadow(0 6px 12px var(--gold-shadow));
}

/* PSEUDO-ÉLÉMENTS POUR EFFETS LUMINEUX */
.btn-premium::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    width: calc(100% + 100px);
    height: calc(100% + 100px);
    background: 
        radial-gradient(ellipse 200px 120px at var(--mouse-x) var(--mouse-y), 
            rgba(255, 255, 255, 0.08) 0%, 
            rgba(166, 124, 0, 0.06) 20%,
            rgba(139, 105, 20, 0.04) 40%,
            rgba(139, 105, 20, 0.02) 60%,
            transparent 80%
        );
    border-radius: 80px;
    opacity: var(--glow-opacity-before);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none;
    will-change: opacity;
    z-index: 1;
    filter: blur(8px);
}

.btn-premium::after {
    content: '';
    position: absolute;
    top: -70px;
    left: -70px;
    width: calc(100% + 140px);
    height: calc(100% + 140px);
    background: 
        radial-gradient(ellipse 400px 200px at var(--mouse-x) var(--mouse-y), 
            rgba(139, 105, 20, 0.03) 0%, 
            rgba(154, 115, 24, 0.02) 30%,
            rgba(166, 124, 0, 0.01) 50%,
            transparent 70%
        );
    border-radius: 100px;
    opacity: var(--glow-opacity-after);
    transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1);
    pointer-events: none;
    will-change: opacity;
    z-index: 0;
    filter: blur(15px);
}

/* ========================================= */
/*               STYLES GOLD                 */
/* ========================================= */

.btn-premium.gold,
.btn-premium {
    background: linear-gradient(135deg, 
        var(--gold-dark) 0%, 
        var(--gold-primary) 25%, 
        var(--gold-light) 50%, 
        var(--gold-primary) 75%, 
        var(--gold-rich) 100%
    );
    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);
    filter: drop-shadow(0 6px 12px var(--gold-shadow));
}

/* ========================================= */
/*               STYLES SILVER               */
/* ========================================= */

.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-rich) 100%
    );
    box-shadow: 
        0 12px 35px var(--silver-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    filter: drop-shadow(0 6px 12px var(--silver-shadow));
    color: #2c3e50;
}

.btn-premium.silver::before {
    background: 
        radial-gradient(ellipse 200px 120px at var(--mouse-x) var(--mouse-y), 
            rgba(255, 255, 255, 0.15) 0%, 
            rgba(192, 192, 192, 0.08) 20%,
            rgba(160, 160, 160, 0.05) 40%,
            rgba(160, 160, 160, 0.02) 60%,
            transparent 80%
        );
}

.btn-premium.silver::after {
    background: 
        radial-gradient(ellipse 400px 200px at var(--mouse-x) var(--mouse-y), 
            rgba(160, 160, 160, 0.04) 0%, 
            rgba(180, 180, 180, 0.02) 30%,
            rgba(192, 192, 192, 0.01) 50%,
            transparent 70%
        );
}

/* ========================================= */
/*               STYLES COPPER               */
/* ========================================= */

.btn-premium.copper {
    background: linear-gradient(135deg, 
        var(--copper-dark) 0%, 
        var(--copper-primary) 25%, 
        var(--copper-light) 50%, 
        var(--copper-primary) 75%, 
        var(--copper-rich) 100%
    );
    box-shadow: 
        0 12px 35px var(--copper-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    filter: drop-shadow(0 6px 12px var(--copper-shadow));
}

.btn-premium.copper::before {
    background: 
        radial-gradient(ellipse 200px 120px at var(--mouse-x) var(--mouse-y), 
            rgba(255, 255, 255, 0.08) 0%, 
            rgba(205, 133, 63, 0.06) 20%,
            rgba(184, 115, 51, 0.04) 40%,
            rgba(184, 115, 51, 0.02) 60%,
            transparent 80%
        );
}

.btn-premium.copper::after {
    background: 
        radial-gradient(ellipse 400px 200px at var(--mouse-x) var(--mouse-y), 
            rgba(184, 115, 51, 0.03) 0%, 
            rgba(160, 82, 45, 0.02) 30%,
            rgba(205, 133, 63, 0.01) 50%,
            transparent 70%
        );
}

/* ========================================= */
/*               STYLES BLUE                 */
/* ========================================= */

.btn-premium.blue {
    background: linear-gradient(135deg, 
        var(--blue-dark) 0%, 
        var(--blue-primary) 25%, 
        var(--blue-light) 50%, 
        var(--blue-primary) 75%, 
        var(--blue-rich) 100%
    );
    box-shadow: 
        0 12px 35px var(--blue-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    filter: drop-shadow(0 6px 12px var(--blue-shadow));
}

.btn-premium.blue::before {
    background: 
        radial-gradient(ellipse 200px 120px at var(--mouse-x) var(--mouse-y), 
            rgba(255, 255, 255, 0.08) 0%, 
            rgba(112, 180, 255, 0.06) 20%,
            rgba(74, 158, 255, 0.04) 40%,
            rgba(74, 158, 255, 0.02) 60%,
            transparent 80%
        );
}

.btn-premium.blue::after {
    background: 
        radial-gradient(ellipse 400px 200px at var(--mouse-x) var(--mouse-y), 
            rgba(74, 158, 255, 0.03) 0%, 
            rgba(58, 139, 255, 0.02) 30%,
            rgba(112, 180, 255, 0.01) 50%,
            transparent 70%
        );
}

/* ========================================= */
/*               STYLES GREEN                */
/* ========================================= */

.btn-premium.green {
    background: linear-gradient(135deg, 
        var(--green-dark) 0%, 
        var(--green-primary) 25%, 
        var(--green-light) 50%, 
        var(--green-primary) 75%, 
        var(--green-rich) 100%
    );
    box-shadow: 
        0 12px 35px var(--green-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    filter: drop-shadow(0 6px 12px var(--green-shadow));
}

.btn-premium.green::before {
    background: 
        radial-gradient(ellipse 200px 120px at var(--mouse-x) var(--mouse-y), 
            rgba(255, 255, 255, 0.08) 0%, 
            rgba(122, 214, 150, 0.06) 20%,
            rgba(80, 200, 120, 0.04) 40%,
            rgba(80, 200, 120, 0.02) 60%,
            transparent 80%
        );
}

.btn-premium.green::after {
    background: 
        radial-gradient(ellipse 400px 200px at var(--mouse-x) var(--mouse-y), 
            rgba(80, 200, 120, 0.03) 0%, 
            rgba(69, 184, 107, 0.02) 30%,
            rgba(122, 214, 150, 0.01) 50%,
            transparent 70%
        );
}

/* ========================================= */
/*               STYLES PURPLE               */
/* ========================================= */

.btn-premium.purple {
    background: linear-gradient(135deg, 
        var(--purple-dark) 0%, 
        var(--purple-primary) 25%, 
        var(--purple-light) 50%, 
        var(--purple-primary) 75%, 
        var(--purple-rich) 100%
    );
    box-shadow: 
        0 12px 35px var(--purple-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    filter: drop-shadow(0 6px 12px var(--purple-shadow));
}

.btn-premium.purple::before {
    background: 
        radial-gradient(ellipse 200px 120px at var(--mouse-x) var(--mouse-y), 
            rgba(255, 255, 255, 0.08) 0%, 
            rgba(187, 123, 219, 0.06) 20%,
            rgba(155, 89, 182, 0.04) 40%,
            rgba(155, 89, 182, 0.02) 60%,
            transparent 80%
        );
}

.btn-premium.purple::after {
    background: 
        radial-gradient(ellipse 400px 200px at var(--mouse-x) var(--mouse-y), 
            rgba(155, 89, 182, 0.03) 0%, 
            rgba(142, 68, 173, 0.02) 30%,
            rgba(187, 123, 219, 0.01) 50%,
            transparent 70%
        );
}

/* ========================================= */
/*               STYLES DARK                 */
/* ========================================= */

.btn-premium.dark {
    background: linear-gradient(135deg, 
        var(--dark-dark) 0%, 
        var(--dark-primary) 25%, 
        var(--dark-light) 50%, 
        var(--dark-primary) 75%, 
        var(--dark-rich) 100%
    );
    box-shadow: 
        0 12px 35px var(--dark-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.4);
    filter: drop-shadow(0 6px 12px var(--dark-shadow));
    color: #ecf0f1;
}

.btn-premium.dark::before {
    background: 
        radial-gradient(ellipse 200px 120px at var(--mouse-x) var(--mouse-y), 
            rgba(255, 255, 255, 0.05) 0%, 
            rgba(52, 73, 94, 0.04) 20%,
            rgba(44, 62, 80, 0.03) 40%,
            rgba(44, 62, 80, 0.02) 60%,
            transparent 80%
        );
}

.btn-premium.dark::after {
    background: 
        radial-gradient(ellipse 400px 200px at var(--mouse-x) var(--mouse-y), 
            rgba(44, 62, 80, 0.02) 0%, 
            rgba(39, 55, 70, 0.01) 30%,
            rgba(52, 73, 94, 0.01) 50%,
            transparent 70%
        );
}

/* ========================================= */
/*              TAILLES                      */
/* ========================================= */

.btn-premium.size-small {
    padding: 12px 30px;
    font-size: 0.9rem;
}

.btn-premium.size-large {
    padding: 22px 55px;
    font-size: 1.2rem;
}

.btn-premium.size-xl {
    padding: 28px 70px;
    font-size: 1.4rem;
}

/* ========================================= */
/*              VARIANTES                    */
/* ========================================= */

.btn-premium.outline {
    background: transparent;
    border: 2px solid var(--gold-primary);
    color: var(--gold-primary);
    box-shadow: 
        0 6px 20px rgba(139, 105, 20, 0.15),
        inset 0 0 0 rgba(255, 255, 255, 0);
}

.btn-premium.outline.silver {
    border-color: var(--silver-primary);
    color: var(--silver-primary);
    box-shadow: 0 6px 20px var(--silver-shadow);
}

.btn-premium.outline.copper {
    border-color: var(--copper-primary);
    color: var(--copper-primary);
    box-shadow: 0 6px 20px var(--copper-shadow);
}

.btn-premium.outline.blue {
    border-color: var(--blue-primary);
    color: var(--blue-primary);
    box-shadow: 0 6px 20px var(--blue-shadow);
}

.btn-premium.outline.green {
    border-color: var(--green-primary);
    color: var(--green-primary);
    box-shadow: 0 6px 20px var(--green-shadow);
}

.btn-premium.outline.purple {
    border-color: var(--purple-primary);
    color: var(--purple-primary);
    box-shadow: 0 6px 20px var(--purple-shadow);
}

.btn-premium.outline.dark {
    border-color: var(--dark-primary);
    color: var(--dark-primary);
    box-shadow: 0 6px 20px var(--dark-shadow);
}

/* ========================================= */
/*              RESPONSIVE                   */
/* ========================================= */

@media (max-width: 768px) {
    .btn-premium {
        padding: 16px 35px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .btn-premium {
        padding: 14px 30px;
        font-size: 0.95rem;
    }
}

/* Classe utilitaire pour désactiver temporairement les effets */
.btn-premium.effects-disabled::before,
.btn-premium.effects-disabled::after {
    display: none;
}