#particles-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

#particles-background canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* ============================================ */
/* PARTICULES IMPRÉVISIBLES */
/* ============================================ */

.particles-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0.6;
}

/* Particule de base */
.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(0, 212, 255, 0.8);
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.6);
}

/* Particules cyan - Trajectoires aléatoires */
.p1 {
    animation: path1 12s linear infinite;
}

.p2 {
    animation: path2 15s linear infinite;
}

.p3 {
    animation: path3 18s linear infinite;
}

.p4 {
    animation: path4 10s linear infinite;
}

.p5 {
    animation: path5 14s linear infinite;
}

.p6 {
    animation: path6 16s linear infinite;
}

.p7 {
    animation: path7 13s linear infinite;
}

.p8 {
    animation: path8 17s linear infinite;
}

.p9 {
    animation: path9 11s linear infinite;
}

.p10 {
    animation: path10 19s linear infinite;
}

.p11 {
    animation: path11 15s linear infinite;
}

.p12 {
    animation: path12 13s linear infinite;
}

/* Particules orange */
.particle-orange {
    background: rgba(255, 107, 53, 0.8);
    box-shadow: 0 0 10px rgba(255, 107, 53, 0.6);
}

.p13 {
    animation: path13 14s linear infinite;
}

.p14 {
    animation: path14 16s linear infinite;
}

.p15 {
    animation: path15 12s linear infinite;
}

/* Particules violettes */
.particle-purple {
    background: rgba(168, 85, 247, 0.8);
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.6);
}

.p16 {
    animation: path16 18s linear infinite;
}

.p17 {
    animation: path17 15s linear infinite;
}

.p18 {
    animation: path18 13s linear infinite;
}

/* ============================================ */
/* TRAJECTOIRES IMPRÉVISIBLES */
/* ============================================ */

/* Diagonale bas-gauche → haut-droite */
@keyframes path1 {
    0% { left: -5%; top: 100%; opacity: 0; }
    5% { opacity: 1; }
    50% { left: 50%; top: 50%; }
    95% { opacity: 1; }
    100% { left: 105%; top: 0%; opacity: 0; }
}

/* Zigzag horizontal */
@keyframes path2 {
    0% { left: -5%; top: 20%; opacity: 0; }
    5% { opacity: 1; }
    25% { top: 40%; }
    50% { left: 50%; top: 20%; }
    75% { top: 35%; }
    95% { opacity: 1; }
    100% { left: 105%; top: 25%; opacity: 0; }
}

/* Courbe de droite à gauche */
@keyframes path3 {
    0% { left: 105%; top: 30%; opacity: 0; }
    5% { opacity: 1; }
    30% { top: 60%; }
    60% { left: 50%; top: 40%; }
    95% { opacity: 1; }
    100% { left: -5%; top: 70%; opacity: 0; }
}

/* Bas vers haut avec dérive */
@keyframes path4 {
    0% { left: 30%; top: 105%; opacity: 0; }
    5% { opacity: 1; }
    40% { left: 45%; }
    70% { left: 35%; }
    95% { opacity: 1; }
    100% { left: 40%; top: -5%; opacity: 0; }
}

/* Diagonale haut-droite → bas-gauche */
@keyframes path5 {
    0% { left: 105%; top: 0%; opacity: 0; }
    5% { opacity: 1; }
    50% { left: 50%; top: 50%; }
    95% { opacity: 1; }
    100% { left: -5%; top: 100%; opacity: 0; }
}

/* Spirale partielle */
@keyframes path6 {
    0% { left: 50%; top: -5%; opacity: 0; transform: rotate(0deg); }
    5% { opacity: 1; }
    25% { left: 70%; top: 30%; transform: rotate(90deg); }
    50% { left: 50%; top: 60%; transform: rotate(180deg); }
    75% { left: 30%; top: 40%; transform: rotate(270deg); }
    95% { opacity: 1; }
    100% { left: 50%; top: 105%; opacity: 0; transform: rotate(360deg); }
}

/* Horizontal avec vagues */
@keyframes path7 {
    0% { left: -5%; top: 60%; opacity: 0; }
    5% { opacity: 1; }
    20% { top: 50%; }
    40% { top: 70%; }
    60% { top: 55%; }
    80% { top: 65%; }
    95% { opacity: 1; }
    100% { left: 105%; top: 60%; opacity: 0; }
}

/* Montée en escalier */
@keyframes path8 {
    0% { left: 10%; top: 105%; opacity: 0; }
    5% { opacity: 1; }
    25% { left: 30%; top: 70%; }
    50% { left: 50%; top: 40%; }
    75% { left: 70%; top: 20%; }
    95% { opacity: 1; }
    100% { left: 90%; top: -5%; opacity: 0; }
}

/* Trajectoire en S */
@keyframes path9 {
    0% { left: -5%; top: 80%; opacity: 0; }
    5% { opacity: 1; }
    25% { left: 25%; top: 60%; }
    50% { left: 50%; top: 50%; }
    75% { left: 75%; top: 40%; }
    95% { opacity: 1; }
    100% { left: 105%; top: 20%; opacity: 0; }
}

/* Descente avec rebond */
@keyframes path10 {
    0% { left: 70%; top: -5%; opacity: 0; }
    5% { opacity: 1; }
    30% { top: 40%; }
    50% { top: 30%; }
    70% { top: 60%; }
    95% { opacity: 1; }
    100% { left: 60%; top: 105%; opacity: 0; }
}

/* Diagonale inversée */
@keyframes path11 {
    0% { left: 105%; top: 60%; opacity: 0; }
    5% { opacity: 1; }
    50% { left: 50%; top: 30%; }
    95% { opacity: 1; }
    100% { left: -5%; top: 0%; opacity: 0; }
}

/* Cercle partiel */
@keyframes path12 {
    0% { left: 80%; top: 50%; opacity: 0; transform: rotate(0deg) translateX(0); }
    5% { opacity: 1; }
    50% { transform: rotate(180deg) translateX(100px); }
    95% { opacity: 1; }
    100% { left: 20%; top: 50%; opacity: 0; transform: rotate(360deg) translateX(0); }
}

/* Orange - Trajectoire rapide */
@keyframes path13 {
    0% { left: -5%; top: 40%; opacity: 0; }
    5% { opacity: 1; }
    30% { top: 55%; }
    70% { top: 35%; }
    95% { opacity: 1; }
    100% { left: 105%; top: 45%; opacity: 0; }
}

/* Orange - Montée en arc */
@keyframes path14 {
    0% { left: 20%; top: 105%; opacity: 0; }
    5% { opacity: 1; }
    50% { left: 50%; top: 20%; }
    95% { opacity: 1; }
    100% { left: 80%; top: -5%; opacity: 0; }
}

/* Orange - Descente en zigzag */
@keyframes path15 {
    0% { left: 60%; top: -5%; opacity: 0; }
    5% { opacity: 1; }
    25% { left: 50%; top: 30%; }
    50% { left: 60%; top: 60%; }
    75% { left: 50%; top: 80%; }
    95% { opacity: 1; }
    100% { left: 55%; top: 105%; opacity: 0; }
}

/* Violet - Trajectoire complexe */
@keyframes path16 {
    0% { left: 90%; top: 105%; opacity: 0; }
    5% { opacity: 1; }
    30% { left: 70%; top: 70%; }
    60% { left: 50%; top: 40%; }
    95% { opacity: 1; }
    100% { left: 30%; top: -5%; opacity: 0; }
}

/* Violet - Spirale inverse */
@keyframes path17 {
    0% { left: 10%; top: 50%; opacity: 0; transform: rotate(0deg); }
    5% { opacity: 1; }
    50% { left: 50%; top: 50%; transform: rotate(-180deg); }
    95% { opacity: 1; }
    100% { left: 90%; top: 50%; opacity: 0; transform: rotate(-360deg); }
}

/* Violet - Rebond multiple */
@keyframes path18 {
    0% { left: 50%; top: -5%; opacity: 0; }
    5% { opacity: 1; }
    20% { top: 30%; }
    30% { top: 20%; }
    50% { top: 60%; }
    60% { top: 50%; }
    80% { top: 80%; }
    95% { opacity: 1; }
    100% { left: 50%; top: 105%; opacity: 0; }
}