/* ================================
   PARTICULES CONNECTÉES 2D - THÈME VIOLET
   ================================ */

/* Canvas des particules connectées */
#connected-particles-canvas {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    pointer-events: none !important;
    z-index: 1 !important; /* Derrière les éléments mais devant le background */
    opacity: 0.4 !important;
    background: transparent !important;
    transform: translateZ(0) !important;
    will-change: transform !important;
    backface-visibility: hidden !important;
}

/* Masquer les particules dans la section hero */
.hero-redesigned,
#hero,
.page-hero,
.hero-section {
    position: relative !important;
    z-index: 2 !important;
}

.hero-redesigned::before,
#hero::before,
.page-hero::before,
.hero-section::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: inherit !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Optimisations pour les performances */
#connected-particles-canvas {
    image-rendering: optimizeSpeed !important;
    image-rendering: -moz-crisp-edges !important;
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
}

/* Responsive design pour les particules */
@media (max-width: 1024px) {
    #connected-particles-canvas {
        opacity: 0.3 !important;
    }
}

@media (max-width: 768px) {
    #connected-particles-canvas {
        opacity: 0.25 !important;
    }
}

@media (max-width: 480px) {
    #connected-particles-canvas {
        opacity: 0.2 !important;
    }
}

/* Mode sombre/clair adaptatif */
@media (prefers-color-scheme: dark) {
    #connected-particles-canvas {
        opacity: 0.5 !important;
    }
}

@media (prefers-color-scheme: light) {
    #connected-particles-canvas {
        opacity: 0.3 !important;
    }
}

/* Réduction de mouvement pour l'accessibilité */
@media (prefers-reduced-motion: reduce) {
    #connected-particles-canvas {
        opacity: 0.15 !important;
        animation: none !important;
    }
}

/* Animation de pulsation subtile */
@keyframes particlePulse {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.6;
    }
}

/* Appliquer l'animation seulement si l'utilisateur ne préfère pas la réduction de mouvement */
@media (prefers-reduced-motion: no-preference) {
    #connected-particles-canvas {
        animation: particlePulse 8s ease-in-out infinite !important;
    }
}

/* Conteneur pour les particules */
.connected-particles-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    pointer-events: none !important;
    z-index: 1 !important;
    overflow: hidden !important;
}

/* Styles pour les éléments interactifs */
.particle-interactive {
    transition: opacity 0.3s ease !important;
}

.particle-interactive:hover {
    opacity: 0.8 !important;
}

/* Optimisations pour les performances sur mobile */
@media (max-width: 768px) {
    #connected-particles-canvas {
        transform: translateZ(0) scale(1) !important;
        will-change: auto !important;
    }
}

/* Support pour les écrans haute résolution */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    #connected-particles-canvas {
        image-rendering: -webkit-optimize-contrast !important;
    }
}

/* Mode économie d'énergie */
@media (prefers-reduced-data: reduce) {
    #connected-particles-canvas {
        opacity: 0.1 !important;
    }
}