/* ===================================
   THREE.JS ANIMATION - CSS (OPTION 1: FULL WIDTH)
   Animation Three.js sur toute la largeur du Hero
   =================================== */

/* Canvas Three.js - Full Width dans le Hero */
#threejs-canvas-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;        /* ← FULL WIDTH */
    height: 100%;
    z-index: 1;         /* Au-dessus des particules mais sous le contenu */
    pointer-events: none;
    overflow: hidden;
    transition: opacity 0.3s ease;
}

#threejs-canvas-container canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* Canvas Particules - Partout en arrière-plan */
#particleCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;        /* Tout en arrière-plan */
    pointer-events: none;
}

/* Hero section doit être relative pour contenir les animations */
.hero {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}

/* Contenu du hero au-dessus des 2 animations */
.hero .container {
    position: relative;
    z-index: 10;        /* Au-dessus de Three.js ET particules */
}

.hero-content,
.hero-title,
.hero-subtitle,
.hero-buttons,
.service-icons {
    position: relative;
    z-index: 10;
}

/* Améliorer la lisibilité du texte sur les animations */
.hero-title,
.hero-subtitle {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Boutons - Assurer qu'ils sont cliquables */
.hero-buttons .btn {
    position: relative;
    z-index: 15;
    pointer-events: auto;
}

/* Service Icons - Assurer visibilité */
.service-icon {
    position: relative;
    z-index: 10;
}

/* Mobile - Réduire l'intensité des deux animations */
@media (max-width: 768px) {
    #threejs-canvas-container {
        opacity: 0.7;
    }
    
    #particleCanvas {
        opacity: 0.6;
    }
}

/* Performance - Réduire sur très petits écrans */
@media (max-width: 480px) {
    #threejs-canvas-container {
        opacity: 0.5;
    }
    
    #particleCanvas {
        opacity: 0.5;
    }
}

/* Préférence motion réduite (accessibilité) */
@media (prefers-reduced-motion: reduce) {
    #threejs-canvas-container {
        display: none;
    }
    
    #particleCanvas {
        opacity: 0.3;
    }
}

/* Assurer que le header reste au-dessus de tout */
.header {
    z-index: 100 !important;
}