/*
BANNIÈRE COOKIES
Designer: Erando Ciko
https://erinformatique.com
*/

#cookie-banner-er {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.98) 0%, rgba(45, 45, 45, 0.98) 100%) !important;
    backdrop-filter: blur(20px) !important;
    padding: 20px 15px !important;
    box-shadow: 0 -8px 40px rgba(255, 94, 0, 0.25), 0 -4px 20px rgba(0, 178, 255, 0.15) !important;
    z-index: 999999 !important;
    transform: translateY(120%) !important;
    opacity: 0 !important;
    transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
    border-top: 3px solid transparent !important;
    background-image: linear-gradient(135deg, rgba(26, 26, 26, 0.98) 0%, rgba(45, 45, 45, 0.98) 100%), linear-gradient(90deg, #FF5E00 0%, #00B2FF 100%) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
}

#cookie-banner-er.show-cookie { 
    transform: translateY(0) !important; 
    opacity: 1 !important; 
}

.cookie-container-er { 
    max-width: 1400px; 
    margin: 0 auto; 
    display: grid; 
    grid-template-columns: auto 1fr auto; 
    align-items: center; 
    gap: 20px; 
}

.cookie-icon-wrapper-er { 
    position: relative; 
}

.cookie-icon-er { 
    font-size: 50px; 
    filter: drop-shadow(0 0 15px rgba(255, 94, 0, 0.5)); 
    animation: cookieFloatEr 3s ease-in-out infinite; 
}

@keyframes cookieFloatEr { 
    0%, 100% { transform: translateY(0) rotate(0deg); } 
    25% { transform: translateY(-10px) rotate(-5deg); } 
    75% { transform: translateY(-8px) rotate(5deg); } 
}

.cookie-glow-er { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: 80px; 
    height: 80px; 
    background: radial-gradient(circle, rgba(255, 94, 0, 0.3), transparent); 
    border-radius: 50%; 
    animation: cookiePulseEr 2s ease-in-out infinite; 
}

@keyframes cookiePulseEr { 
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; } 
    50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.2; } 
}

.cookie-content-er { 
    flex: 1; 
}

.cookie-title-er { 
    font-size: 20px; 
    font-weight: 800; 
    margin: 0 0 8px 0; 
    background: linear-gradient(90deg, #FF5E00 0%, #FF8533 50%, #00B2FF 100%); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    background-clip: text; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    animation: cookieShimmerEr 3s ease-in-out infinite; 
    background-size: 200% auto; 
}

@keyframes cookieShimmerEr { 
    0%, 100% { background-position: 0% center; } 
    50% { background-position: 100% center; } 
}

.cookie-text-er { 
    margin: 0; 
    color: #e0e0e0; 
    font-size: 14px; 
    line-height: 1.5; 
}

.cookie-text-er a { 
    color: #FF5E00; 
    text-decoration: none; 
    font-weight: 700; 
    transition: color 0.3s ease; 
}

.cookie-text-er a:hover { 
    color: #00B2FF; 
}

.cookie-buttons-er { 
    display: flex; 
    gap: 12px; 
    align-items: center; 
}

.cookie-btn-er { 
    padding: 10px 20px; 
    border: none; 
    border-radius: 50px; 
    font-size: 13px; 
    font-weight: 700; 
    cursor: pointer; 
    transition: all 0.4s; 
    text-transform: uppercase; 
    letter-spacing: 0.8px; 
}

.btn-accept-er { 
    background: linear-gradient(135deg, #FF5E00 0%, #ff7a33 100%); 
    color: white; 
    box-shadow: 0 4px 20px rgba(255, 94, 0, 0.5); 
}

.btn-accept-er:hover { 
    transform: translateY(-3px) scale(1.05); 
    box-shadow: 0 8px 30px rgba(255, 94, 0, 0.7); 
}

.btn-decline-er { 
    background: rgba(45, 45, 45, 0.8); 
    color: #ccc; 
    border: 2px solid #555; 
}

.btn-decline-er:hover { 
    background: rgba(60, 60, 60, 0.9); 
    color: #fff; 
    border-color: #00B2FF; 
    transform: translateY(-2px); 
}

.btn-close-er { 
    background: rgba(45, 45, 45, 0.6); 
    border: 2px solid #555; 
    color: #888; 
    font-size: 22px; 
    cursor: pointer; 
    padding: 6px; 
    width: 38px; 
    height: 38px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 50%; 
    transition: all 0.3s ease; 
}

.btn-close-er:hover { 
    background: linear-gradient(135deg, #FF5E00, #00B2FF); 
    color: #fff; 
    border-color: transparent; 
    transform: rotate(90deg) scale(1.1); 
}

@media (max-width: 968px) {
    .cookie-container-er { 
        grid-template-columns: 1fr; 
        text-align: center; 
        gap: 15px; 
    }
    .cookie-buttons-er { 
        flex-direction: column; 
        width: 100%; 
    }
    .cookie-btn-er { 
        width: 100%; 
    }
}