/*----- Animation Particules proposition -------*/

#particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* pour ne pas bloquer les clics */
    z-index:3;
}

.particle {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    opacity: 0;
    animation: explode ease-out forwards, twinkle 0.3s infinite alternate;
    /*animation: explode ease-out forwards, flicker 0.2s infinite alternate;*/
}

@keyframes explode {
    /* totalement visible au départ */
    0% {
        transform: scale(0.5) translate(0,0);
        opacity: 1;
    }
    /* commence à s’atténuer */
    50% {
        transform: scale(1.2) translate(var(--x), var(--y));
        opacity: 0.7;
    }
    /* presque disparu */
    80% {
        transform: scale(1.4) translate(var(--x), var(--y));
        opacity: 0.3;
    }
    /* totalement disparu */
    100% {
        transform: scale(1.5) translate(var(--x), var(--y));
        opacity: 0;
    }
}

@keyframes flicker {
    from {
        opacity: 0.3;
    }

    to {
        opacity: 1;
    }
}

.trail {
    position: absolute;
    width: 5px;
    height: 30px;
    background: white;
    opacity: 0.8;
    position: relative;
    animation: rise 1.2s ease-out forwards;
}

    .trail::after {
        content: "";
        position: absolute;
        top: -8px;
        left: 50%;
        transform: translateX(-50%);
        width: 8px;
        height: 8px;
        background: orange;
        border-radius: 50%;
        animation: flicker 0.3s infinite alternate;
    }

@keyframes rise {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        transform: translateY(-400px);
        opacity: 0.5;
    }
}


/* Formes variées */
.circle {
    border-radius: 50%;
}

.square {
    border-radius: 0; /* carré parfait */
}

.triangle {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.diamond {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.star {
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.heart {
    clip-path: polygon( 50% 15%, 61% 6%, 75% 6%, 85% 15%, 85% 30%, 70% 45%, 50% 70%, 30% 45%, 15% 30%, 15% 15%, 25% 6%, 39% 6% );
}

.spiral {
    border-radius: 50%;
    background: conic-gradient(red, yellow, green, blue, red);
    /*animation: spin 2s linear infinite;*/
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.ribbon {
    clip-path: polygon(0 40%, 100% 0%, 100% 60%, 0% 100%);
}

.candle {
    width: 6px;
    height: 20px;
    background: white;
    position: relative;
}

    .candle::after {
        content: "";
        position: absolute;
        top: -8px;
        left: 50%;
        transform: translateX(-50%);
        width: 8px;
        height: 8px;
        background: orange;
        border-radius: 50%;
        animation: flicker 0.3s infinite alternate;
    }

.confetti {
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.snowflake {
    clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
}