/* Configuration des canvas de background */
#shared-background-canvas,
#shared-foreground-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    pointer-events: none;
    opacity: 1;
}

#shared-background-canvas {
    z-index: -1;
    background: linear-gradient(180deg, rgba(17, 24, 39, 1) 0%, rgba(31, 41, 55, 1) 100%);
}

#shared-foreground-canvas {
    z-index: 900;
    background: transparent;
}

/* Configuration globale de la page */
body.trainings-page {
    background: #111827 !important;
}

/* S'assurer que seule la TrainingsPage utilise le fond gris */
/* NE PAS appliquer ce fond sur les autres pages */
body:not(.trainings-page) .trainings-background,
body:not(.trainings-page) #shared-background-canvas,
body:not(.trainings-page) #shared-foreground-canvas {
    display: none !important;
}

/* Hiérarchie z-index pour les contenus */
.content-layer {
    position: relative;
    z-index: 2;
}

.section-content {
    position: relative;
    z-index: 10;
}

/* Application de la classe aux éléments existants */
#app,
#main-content,
.trainings-page,
.hero-text-content,
.hero-image-container,
.service-content,
.why-content,
.team-content,
.cta-content,
#hero-container,
#service-section-container,
#why-section-container,
#team-section-container,
#cta-section-container {
    position: relative;
    z-index: 10;
}

@media (max-width: 768px) {
    #shared-background-canvas {
        opacity: 0.6;
    }
}