/* Import Google Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

/* Container */
.bouton-whaou-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    min-height: 150px;
}

/* Button Base */
.bouton-whaou-btn {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: transparent;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
    overflow: visible;
}

/* Text & Icon Base */
.bouton-whaou-text {
    position: relative;
    z-index: 10;
    color: var(--text-color, #fff);
    pointer-events: none;
}

.bouton-whaou-icon {
    position: relative;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    pointer-events: none;
    transition: all 0.3s ease;
}

.bouton-whaou-icon svg {
    fill: currentColor;
    width: 1em;
    height: 1em;
}

.bouton-whaou-icon,
.bouton-whaou-icon i {
    color: var(--text-color, #fff);
}

/* Size Variations */
.btn-size-small {
    padding: calc(var(--padding-v, 18px) * 0.7) calc(var(--padding-h, 35px) * 0.7);
}

.btn-size-medium {
    padding: var(--padding-v, 22px) var(--padding-h, 50px);
}

.btn-size-large {
    padding: calc(var(--padding-v, 26px) * 1.2) calc(--padding-h, 60px) * 1.2);
}

.btn-size-xl {
    padding: calc(var(--padding-v, 30px) * 1.5) calc(var(--padding-h, 70px) * 1.5);
}

/* === STYLES === */

/* 1. 3D */
.btn-style-3d {
    background: linear-gradient(145deg, var(--primary-color, #3b82f6), var(--secondary-color, #2563eb));
    border-radius: var(--border-radius, 60px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), 0 5px 10px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-style-3d::before {
    content: '';
    position: absolute;
    inset: -3px;
    background: linear-gradient(145deg, var(--border-color, #60a5fa), transparent 50%);
    border-radius: calc(var(--border-radius, 60px) + 3px);
    z-index: -1;
    opacity: 0.6;
}

.btn-style-3d:hover {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 8px 15px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transform: translateY(-3px);
}

.btn-style-3d:active {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    transform: translateY(0);
}

/* 2. ULTRA */
.btn-style-ultra {
    border-radius: var(--border-radius, 60px);
}

.btn-style-ultra::before {
    content: '';
    position: absolute;
    inset: -4px;
    background: linear-gradient(60deg, var(--primary-color, #ff00ff), var(--secondary-color, #00f2ff), #ff0080, #7000ff, #00ff88, var(--primary-color, #ff00ff));
    background-size: 400% 400%;
    border-radius: inherit;
    z-index: -2;
    animation: ultraGradient 4s linear infinite, liquidMorph 8s ease-in-out infinite;
    filter: blur(10px);
    opacity: 0.9;
}

@keyframes ultraGradient {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.btn-style-ultra::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(10, 10, 30, 0.98), rgba(20, 20, 50, 0.95));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: inherit;
    z-index: 0;
    animation: liquidMorph 8s ease-in-out infinite;
}

@keyframes liquidMorph {

    0%,
    100% {
        border-radius: var(--border-radius, 60px);
    }

    25% {
        border-radius: 65% 35% 50% 50% / 55% 45% 55% 45%;
    }

    50% {
        border-radius: 45% 55% 35% 65% / 50% 50% 50% 50%;
    }

    75% {
        border-radius: 35% 65% 65% 35% / 45% 55% 45% 55%;
    }
}

.btn-style-ultra:hover::before {
    filter: blur(15px);
    opacity: 1;
    inset: -6px;
}

/* 3. GRADIENT */
.btn-style-gradient {
    background: linear-gradient(135deg, var(--primary-color, #667eea), var(--secondary-color, #764ba2));
    background-size: 200% 200%;
    border-radius: var(--border-radius, 60px);
    animation: gradientShift 4s ease infinite;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

@keyframes gradientShift {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.btn-style-gradient::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    background-size: 200% 200%;
    animation: gradientShift 4s ease infinite reverse;
}

.btn-style-gradient:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
    animation-duration: 2s;
}

/* 4. GRADIENT WAVE */
.btn-style-gradient_wave {
    position: relative;
    background: linear-gradient(45deg, var(--primary-color, #667eea), var(--secondary-color, #764ba2));
    background-size: 400% 400%;
    border-radius: var(--border-radius, 60px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    animation: gradientWave 5s ease-in-out infinite;
}

@keyframes gradientWave {
    0% {
        background-position: 0% 50%;
        filter: hue-rotate(0deg);
    }

    25% {
        background-position: 100% 50%;
        filter: hue-rotate(5deg);
    }

    50% {
        background-position: 100% 100%;
        filter: hue-rotate(0deg);
    }

    75% {
        background-position: 0% 100%;
        filter: hue-rotate(-5deg);
    }

    100% {
        background-position: 0% 50%;
        filter: hue-rotate(0deg);
    }
}

.btn-style-gradient_wave::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(-45deg, transparent 0%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 100%);
    background-size: 200% 200%;
    animation: gradientWaveOverlay 4s ease-in-out infinite;
    z-index: 1;
}

@keyframes gradientWaveOverlay {

    0%,
    100% {
        background-position: 0% 0%;
        transform: translateX(0) rotate(0deg);
    }

    50% {
        background-position: 100% 100%;
        transform: translateX(5px) rotate(2deg);
    }
}

.btn-style-gradient_wave::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    animation: gradientSweep 3s linear infinite;
    z-index: 2;
}

@keyframes gradientSweep {
    0% {
        transform: translateX(-100%) rotate(0deg);
    }

    100% {
        transform: translateX(100%) rotate(360deg);
    }
}

.btn-style-gradient_wave:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
    transform: translateY(-3px) scale(1.02);
    animation: gradientWave 2s ease-in-out infinite reverse;
}

.btn-style-gradient_wave:hover::before {
    animation-duration: 2s;
    animation-direction: reverse;
}

.btn-style-gradient_wave:hover::after {
    animation-duration: 1.5s;
}

/* 5. GRADIENT PULSE */
.btn-style-gradient_pulse {
    position: relative;
    background: linear-gradient(135deg, var(--primary-color, #667eea), var(--secondary-color, #764ba2));
    border-radius: var(--border-radius, 60px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    overflow: visible;
    animation: gradientPulseBase 2s ease-in-out infinite;
}

@keyframes gradientPulseBase {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    }
}

.btn-style-gradient_pulse::before {
    content: '';
    position: absolute;
    inset: -3px;
    background: linear-gradient(135deg, var(--primary-color, #667eea), var(--secondary-color, #764ba2));
    border-radius: inherit;
    opacity: 0;
    filter: blur(15px);
    z-index: -1;
    animation: gradientPulseGlow 2s ease-in-out infinite;
}

@keyframes gradientPulseGlow {

    0%,
    100% {
        opacity: 0.3;
        inset: -3px;
    }

    50% {
        opacity: 0.8;
        inset: -8px;
    }
}

.btn-style-gradient_pulse::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
    border-radius: inherit;
    opacity: 0;
    animation: gradientPulseFlash 2s ease-in-out infinite;
    z-index: 1;
}

@keyframes gradientPulseFlash {

    0%,
    100% {
        opacity: 0;
        transform: scale(0.8);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.2);
    }
}

.btn-style-gradient_pulse:hover {
    animation: gradientPulseBase 1s ease-in-out infinite;
}

.btn-style-gradient_pulse:hover::before {
    animation: gradientPulseGlow 1s ease-in-out infinite;
}

.btn-style-gradient_pulse:hover::after {
    animation: gradientPulseFlash 1s ease-in-out infinite;
}

/* 6. GRADIENT SPIRAL */
.btn-style-gradient_spiral {
    position: relative;
    background: conic-gradient(from 0deg at 50% 50%, var(--primary-color, #667eea), var(--secondary-color, #764ba2), var(--primary-color, #667eea));
    border-radius: var(--border-radius, 60px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    animation: gradientSpiralRotate 4s linear infinite;
}

@keyframes gradientSpiralRotate {
    0% {
        filter: hue-rotate(0deg);
    }

    100% {
        filter: hue-rotate(360deg);
    }
}

.btn-style-gradient_spiral::before {
    content: '';
    position: absolute;
    inset: -50%;
    background: conic-gradient(from 45deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
    animation: gradientSpiralSpin 3s linear infinite;
}

@keyframes gradientSpiralSpin {
    0% {
        transform: rotate(0deg) scale(2);
    }

    100% {
        transform: rotate(360deg) scale(2);
    }
}

.btn-style-gradient_spiral:hover {
    animation: gradientSpiralRotate 2s linear infinite reverse;
    box-shadow: 0 8px 35px rgba(0, 0, 0, 0.4);
    transform: scale(1.05);
}

.btn-style-gradient_spiral:hover::before {
    animation: gradientSpiralSpin 1.5s linear infinite;
}

/* 7. GRADIENT BURST */
.btn-style-gradient_burst {
    position: relative;
    background: radial-gradient(circle at center, var(--primary-color, #667eea), var(--secondary-color, #764ba2));
    border-radius: var(--border-radius, 60px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    animation: gradientBurstPulse 3s ease-in-out infinite;
}

@keyframes gradientBurstPulse {

    0%,
    100% {
        background: radial-gradient(circle at center, var(--primary-color, #667eea), var(--secondary-color, #764ba2));
    }

    50% {
        background: radial-gradient(circle at center, var(--secondary-color, #764ba2), var(--primary-color, #667eea));
    }
}

.btn-style-gradient_burst::before {
    content: '';
    position: absolute;
    inset: -100%;
    background: repeating-conic-gradient(from 0deg, transparent 0deg, rgba(255, 255, 255, 0.1) 15deg, transparent 30deg);
    animation: gradientBurstRadar 4s linear infinite;
}

@keyframes gradientBurstRadar {
    0% {
        transform: rotate(0deg) scale(2);
        opacity: 0.5;
    }

    100% {
        transform: rotate(360deg) scale(2);
        opacity: 0.5;
    }
}

.btn-style-gradient_burst::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    animation: gradientBurstExplosion 2s ease-in-out infinite;
}

@keyframes gradientBurstExplosion {

    0%,
    100% {
        transform: scale(0.5);
        opacity: 0;
    }

    50% {
        transform: scale(1.5);
        opacity: 0.4;
    }
}

.btn-style-gradient_burst:hover {
    animation: gradientBurstPulse 1.5s ease-in-out infinite;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
}

.btn-style-gradient_burst:hover::before {
    animation: gradientBurstRadar 2s linear infinite;
}

.btn-style-gradient_burst:hover::after {
    animation: gradientBurstExplosion 1s ease-in-out infinite;
}

/* 8. GRADIENT FLOW */
.btn-style-gradient_flow {
    position: relative;
    background: linear-gradient(90deg, var(--primary-color, #667eea), var(--secondary-color, #764ba2), var(--primary-color, #667eea), var(--secondary-color, #764ba2));
    background-size: 300% 100%;
    border-radius: var(--border-radius, 60px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    animation: gradientFlowMove 8s linear infinite;
}

@keyframes gradientFlowMove {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 300% 50%;
    }
}

.btn-style-gradient_flow::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent, rgba(255, 255, 255, 0.1), transparent);
    background-size: 200% 100%;
    animation: gradientFlowWave 4s ease-in-out infinite;
    transform: skewX(-10deg);
}

@keyframes gradientFlowWave {
    0% {
        background-position: -200% 0;
        transform: skewX(-10deg) translateY(0);
    }

    50% {
        background-position: 0% 0;
        transform: skewX(-10deg) translateY(-5px);
    }

    100% {
        background-position: 200% 0;
        transform: skewX(-10deg) translateY(0);
    }
}

.btn-style-gradient_flow:hover {
    animation: gradientFlowMove 4s linear infinite;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    transform: translateY(-2px);
}

.btn-style-gradient_flow:hover::before {
    animation: gradientFlowWave 2s ease-in-out infinite;
}

/* 9. GRADIENT SHIMMER */
.btn-style-gradient_shimmer {
    position: relative;
    background: var(--primary-color, #667eea);
    border-radius: var(--border-radius, 60px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.btn-style-gradient_shimmer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, transparent 30%, var(--secondary-color, #764ba2) 50%, transparent 70%);
    background-size: 200% 200%;
    animation: gradientShimmerLayer1 3s ease-in-out infinite;
    opacity: 0.6;
}

@keyframes gradientShimmerLayer1 {

    0%,
    100% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 100% 100%;
    }
}

.btn-style-gradient_shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(-45deg, transparent 20%, rgba(255, 255, 255, 0.3) 50%, transparent 80%);
    background-size: 200% 200%;
    animation: gradientShimmerLayer2 4s ease-in-out infinite 1s;
}

@keyframes gradientShimmerLayer2 {

    0%,
    100% {
        background-position: 100% 100%;
    }

    50% {
        background-position: 0% 0%;
    }
}

.btn-style-gradient_shimmer:hover {
    box-shadow: 0 8px 35px rgba(0, 0, 0, 0.4);
    transform: scale(1.03);
}

.btn-style-gradient_shimmer:hover::before {
    animation: gradientShimmerLayer1 1.5s ease-in-out infinite;
}

.btn-style-gradient_shimmer:hover::after {
    animation: gradientShimmerLayer2 2s ease-in-out infinite;
}

/* 10. GRADIENT AURORA */
.btn-style-gradient_aurora {
    position: relative;
    background: linear-gradient(135deg, var(--primary-color, #667eea), var(--secondary-color, #764ba2));
    border-radius: var(--border-radius, 60px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.btn-style-gradient_aurora::before {
    content: '';
    position: absolute;
    inset: -50%;
    background: linear-gradient(0deg, transparent, var(--primary-color, #667eea), transparent, var(--secondary-color, #764ba2), transparent);
    animation: gradientAuroraWaves 6s ease-in-out infinite;
    opacity: 0.7;
    filter: blur(20px);
}

@keyframes gradientAuroraWaves {

    0%,
    100% {
        transform: translateY(0) scaleY(1);
        filter: blur(20px) hue-rotate(0deg);
    }

    25% {
        transform: translateY(-10%) scaleY(1.1);
        filter: blur(25px) hue-rotate(15deg);
    }

    50% {
        transform: translateY(0) scaleY(0.9);
        filter: blur(20px) hue-rotate(0deg);
    }

    75% {
        transform: translateY(10%) scaleY(1.1);
        filter: blur(25px) hue-rotate(-15deg);
    }
}

.btn-style-gradient_aurora::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: gradientAuroraShimmer 4s ease-in-out infinite;
}

@keyframes gradientAuroraShimmer {

    0%,
    100% {
        transform: translateX(-100%) skewX(-20deg);
    }

    50% {
        transform: translateX(100%) skewX(-20deg);
    }
}

.btn-style-gradient_aurora:hover {
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
    transform: translateY(-3px);
}

.btn-style-gradient_aurora:hover::before {
    animation: gradientAuroraWaves 3s ease-in-out infinite;
}

.btn-style-gradient_aurora:hover::after {
    animation: gradientAuroraShimmer 2s ease-in-out infinite;
}

/* 11. HOLOGRAPHIC */
.btn-style-holographic {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #667eea 100%);
    background-size: 400% 400%;
    border-radius: var(--border-radius, 60px);
    overflow: hidden;
    animation: holoShift 8s ease infinite;
}

@keyframes holoShift {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.btn-style-holographic::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.8) 50%, transparent 70%);
    background-size: 200% 200%;
    opacity: 0;
    transition: opacity 0.3s;
    animation: holoReflection 3s linear infinite;
    z-index: 5;
    pointer-events: none;
}

@keyframes holoReflection {
    0% {
        background-position: -100% -100%;
    }

    100% {
        background-position: 200% 200%;
    }
}

.btn-style-holographic:hover::before {
    opacity: 0.6;
}

/* 12. LIQUID */
.btn-style-liquid {
    background: linear-gradient(135deg, var(--primary-color, #667eea), var(--secondary-color, #764ba2));
    border-radius: 60% 40% 70% 30% / 60% 30% 70% 40%;
    animation: liquidMorph2 6s ease-in-out infinite, liquidColor 8s ease infinite;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

@keyframes liquidMorph2 {

    0%,
    100% {
        border-radius: 60% 40% 70% 30% / 60% 30% 70% 40%;
    }

    20% {
        border-radius: 40% 60% 50% 50% / 70% 50% 50% 30%;
    }

    40% {
        border-radius: 50% 50% 30% 70% / 50% 70% 30% 50%;
    }

    60% {
        border-radius: 70% 30% 50% 50% / 40% 50% 60% 50%;
    }

    80% {
        border-radius: 50% 50% 60% 40% / 50% 60% 40% 60%;
    }
}

@keyframes liquidColor {

    0%,
    100% {
        filter: hue-rotate(0deg);
    }

    50% {
        filter: hue-rotate(30deg);
    }
}

.btn-style-liquid::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: liquidMorph2 6s ease-in-out infinite reverse;
    z-index: -1;
}

.btn-style-liquid:hover {
    animation-duration: 3s, 4s;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
    transform: scale(1.05);
}

/* 13. BRUTALIST */
.btn-style-brutalist {
    background: var(--primary-color, #000);
    border: 4px solid var(--border-color, #000);
    border-radius: var(--border-radius, 0);
    box-shadow: 8px 8px 0 var(--secondary-color, #ff0000);
    transition: all 0.2s ease;
}

.btn-style-brutalist .bouton-whaou-text,
.btn-style-brutalist .bouton-whaou-icon {
    color: var(--text-color, #fff);
    font-weight: 800;
    letter-spacing: 1px;
}

.btn-style-brutalist:hover {
    transform: translate(4px, 4px);
    box-shadow: 4px 4px 0 var(--secondary-color, #ff0000);
}

.btn-style-brutalist:active {
    transform: translate(8px, 8px);
    box-shadow: 0 0 0 var(--secondary-color, #ff0000);
}

/* === EFFECTS === */

/* AURORA GLOW */
.bouton-whaou-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 220%;
    height: 220%;
    background: radial-gradient(circle at 50% 50%, var(--primary-color, #00f2ff) 0%, var(--secondary-color, #7000ff) 20%, rgba(255, 0, 128, 0.3) 40%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 1;
    filter: blur(35px);
}

.has-glow:hover .bouton-whaou-glow {
    opacity: calc(0.85 * (var(--intensity, 100) / 100));
    animation: glowMove 3s ease-in-out infinite alternate;
}

@keyframes glowMove {
    0% {
        transform: translate(-50%, -50%) scale(0.95) rotate(0deg);
    }

    50% {
        transform: translate(-48%, -52%) scale(1.15) rotate(180deg);
    }

    100% {
        transform: translate(-52%, -48%) scale(1.05) rotate(360deg);
    }
}

/* SHIMMER */
.bouton-whaou-shimmer {
    position: absolute;
    top: -50%;
    left: -100%;
    width: 40%;
    height: 200%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.05) 70%, transparent 100%);
    transform: skewX(-20deg);
    z-index: 5;
    pointer-events: none;
}

.has-shimmer:hover .bouton-whaou-shimmer {
    animation: shimmer calc(2s / var(--speed, 1)) ease-in-out infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }

    100% {
        left: 200%;
    }
}

/* PARTICLES */
.bouton-whaou-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.has-particles:hover .bouton-whaou-particles {
    opacity: calc(1 * (var(--intensity, 100) / 100));
}

.bouton-whaou-particle {
    position: absolute;
    width: 5px;
    height: 5px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4) 50%, transparent);
    border-radius: 50%;
    opacity: 0;
}

.bouton-whaou-particle:nth-child(1) {
    left: 15%;
    animation: float1 calc(2.5s / var(--speed, 1)) ease-in-out infinite;
}

.bouton-whaou-particle:nth-child(2) {
    left: 35%;
    animation: float2 calc(3s / var(--speed, 1)) ease-in-out infinite 0.5s;
}

.bouton-whaou-particle:nth-child(3) {
    left: 55%;
    animation: float3 calc(2.8s / var(--speed, 1)) ease-in-out infinite 1s;
}

.bouton-whaou-particle:nth-child(4) {
    left: 75%;
    animation: float4 calc(3.2s / var(--speed, 1)) ease-in-out infinite 0.3s;
}

.bouton-whaou-particle:nth-child(5) {
    left: 90%;
    animation: float5 calc(2.7s / var(--speed, 1)) ease-in-out infinite 0.8s;
}

@keyframes float1 {
    0% {
        bottom: 0;
        opacity: 0;
        transform: translateX(0) scale(0);
    }

    15% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

    85% {
        opacity: 1;
    }

    100% {
        bottom: 100%;
        opacity: 0;
        transform: translateX(15px) scale(0.4);
    }
}

@keyframes float2 {
    0% {
        bottom: 0;
        opacity: 0;
        transform: translateX(0) scale(0);
    }

    15% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

    85% {
        opacity: 1;
    }

    100% {
        bottom: 100%;
        opacity: 0;
        transform: translateX(-10px) scale(0.4);
    }
}

@keyframes float3 {
    0% {
        bottom: 0;
        opacity: 0;
        transform: translateX(0) scale(0);
    }

    15% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

    85% {
        opacity: 1;
    }

    100% {
        bottom: 100%;
        opacity: 0;
        transform: translateX(20px) scale(0.4);
    }
}

@keyframes float4 {
    0% {
        bottom: 0;
        opacity: 0;
        transform: translateX(0) scale(0);
    }

    15% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

    85% {
        opacity: 1;
    }

    100% {
        bottom: 100%;
        opacity: 0;
        transform: translateX(-15px) scale(0.4);
    }
}

@keyframes float5 {
    0% {
        bottom: 0;
        opacity: 0;
        transform: translateX(0) scale(0);
    }

    15% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

    85% {
        opacity: 1;
    }

    100% {
        bottom: 100%;
        opacity: 0;
        transform: translateX(10px) scale(0.4);
    }
}

/* ACTIVE STATE */
.bouton-whaou-btn:active {
    transform: scale(0.97);
}

/* === RESPONSIVE === */

/* Tablet & smaller */
@media (max-width: 1024px) {
    .bouton-whaou-container {
        padding: 30px 20px;
    }

    /* Réduire animations pour performance */
    .btn-style-ultra::before,
    .btn-style-gradient_spiral,
    .btn-style-gradient_burst::before,
    .btn-style-holographic {
        animation-duration: 6s !important;
    }

    /* Simplifier les effets blur pour performance */
    .bouton-whaou-glow {
        filter: blur(25px);
    }
}

/* Mobile */
@media (max-width: 768px) {
    .bouton-whaou-container {
        padding: 20px 15px;
        min-height: 100px;
    }

    /* Tailles de bouton plus petites sur mobile */
    .btn-size-small {
        padding: calc(var(--padding-v, 15px) * 0.6) calc(var(--padding-h, 30px) * 0.6);
    }

    .btn-size-medium {
        padding: calc(var(--padding-v, 18px) * 0.8) calc(var(--padding-h, 40px) * 0.8);
    }

    .btn-size-large {
        padding: var(--padding-v, 20px) var(--padding-h, 50px);
    }

    .btn-size-xl {
        padding: calc(var(--padding-v, 22px) * 1.1) calc(var(--padding-h, 55px) * 1.1);
    }

    /* Optimiser les animations pour mobile */
    .btn-style-ultra::before,
    .btn-style-gradient_wave,
    .btn-style-gradient_pulse,
    .btn-style-gradient_spiral,
    .btn-style-gradient_burst,
    .btn-style-gradient_flow,
    .btn-style-liquid {
        animation-duration: 8s !important;
    }

    /* Réduire complexité des effets */
    .bouton-whaou-glow {
        filter: blur(20px);
        width: 180%;
        height: 180%;
    }

    .bouton-whaou-particle {
        width: 4px;
        height: 4px;
    }

    /* Désactiver certains pseudo-elements complexes si préférence réduite */
    @media (prefers-reduced-motion: reduce) {

        .btn-style-ultra::before,
        .btn-style-gradient_wave::after,
        .btn-style-gradient_spiral::before,
        .btn-style-gradient_burst::before,
        .btn-style-liquid::before,
        .bouton-whaou-particles {
            animation: none !important;
            display: none;
        }
    }
}

/* Très petit mobile */
@media (max-width: 480px) {
    .bouton-whaou-container {
        padding: 15px 10px;
    }

    /* Texte plus petit sur très petit écran */
    .bouton-whaou-text {
        font-size: 14px;
    }

    /* Icônes un peu plus petites */
    .bouton-whaou-icon {
        font-size: 14px;
    }

    /* Réduire encore les tailles */
    .btn-size-small {
        padding: 12px 25px;
    }

    .btn-size-medium {
        padding: 14px 32px;
    }

    .btn-size-large {
        padding: 16px 40px;
    }

    .btn-size-xl {
        padding: 18px 48px;
    }
}

/* Optimisation pour écrans tactiles */
@media (hover: none) and (pointer: coarse) {

    /* Sur mobile tactile, les effets hover deviennent active */
    .bouton-whaou-btn:active {
        transform: scale(0.95);
    }

    /* Activer les effets au tap/touch */
    .bouton-whaou-btn:active .bouton-whaou-glow {
        opacity: calc(0.7 * (var(--intensity, 100) / 100));
    }

    .bouton-whaou-btn:active .bouton-whaou-shimmer {
        animation: shimmer calc(1.5s / var(--speed, 1)) ease-in-out forwards;
    }
}