/* Styles pour les séparateurs du header et du footer - Thème spatial */

/* Variables communes pour les séparateurs */
:root {
    --separator-height: 4px;
    --separator-height-mobile: 3px;
    --separator-glow-blur: 3px;
    --separator-shadow: 0 5px 15px rgba(0, 0, 0, 0.8), 0 5px 15px rgba(110, 159, 255, 0.2);
    --separator-shadow-inset: 0 15px 35px rgba(0, 0, 0, 0.8) inset, 0 -15px 35px rgba(0, 0, 0, 0.8) inset;
}

/* Séparateur pour le header */
header .cosmic-header {
    /* Séparateur inférieur pour démarquer le header du contenu */
    border-bottom: var(--separator-height) solid;
    border-image: linear-gradient(90deg, transparent, rgba(110, 159, 255, 0.7), rgba(156, 110, 255, 0.7), rgba(255, 110, 159, 0.7), rgba(110, 255, 177, 0.7), rgba(255, 222, 89, 0.7), transparent) 1;
    /* Effet de profondeur pour démarquer la section */
    box-shadow: var(--separator-shadow);
    position: relative;
    z-index: 1000;
}

/* Effet de lueur sous le header */
header .cosmic-header::after {
    content: '';
    position: absolute;
    bottom: calc(-1 * var(--separator-height));
    left: 0;
    width: 100%;
    height: var(--separator-height);
    background: linear-gradient(90deg, transparent, rgba(110, 159, 255, 0.3), rgba(156, 110, 255, 0.3), rgba(255, 110, 159, 0.3), rgba(110, 255, 177, 0.3), rgba(255, 222, 89, 0.3), transparent);
    filter: blur(var(--separator-glow-blur));
    opacity: 0;
    animation: header-glow 4s ease-in-out infinite alternate;
}

/* Animation de lueur pour le header */
@keyframes header-glow {
    0% { opacity: 0.3; }
    50% { opacity: 0.8; }
    100% { opacity: 0.3; }
}

/* Séparateur pour le footer */
footer {
    /* Séparateur supérieur pour démarquer le footer du contenu */
    border-top: var(--separator-height) solid;
    border-image: linear-gradient(90deg, transparent, rgba(255, 222, 89, 0.7), rgba(110, 255, 177, 0.7), rgba(255, 110, 159, 0.7), rgba(156, 110, 255, 0.7), rgba(110, 159, 255, 0.7), transparent) 1;
    /* Effet de profondeur pour démarquer la section */
    box-shadow: 0 -15px 35px rgba(0, 0, 0, 0.8) inset, 0 -5px 15px rgba(110, 159, 255, 0.2);
    position: relative;
}

/* Effet de lueur au-dessus du footer */
footer::before {
    content: '';
    position: absolute;
    top: calc(-1 * var(--separator-height));
    left: 0;
    width: 100%;
    height: var(--separator-height);
    background: linear-gradient(90deg, transparent, rgba(255, 222, 89, 0.3), rgba(110, 255, 177, 0.3), rgba(255, 110, 159, 0.3), rgba(156, 110, 255, 0.3), rgba(110, 159, 255, 0.3), transparent);
    filter: blur(var(--separator-glow-blur));
    opacity: 0;
    animation: footer-glow 4s ease-in-out infinite alternate;
}

/* Animation de lueur pour le footer */
@keyframes footer-glow {
    0% { opacity: 0.3; }
    50% { opacity: 0.8; }
    100% { opacity: 0.3; }
}

/* Styles pour les séparateurs de sections */
.services-section,
.processus-section,
#portfolio.hero-section,
#contact.hero-section {
    /* Séparateurs pour toutes les sections */
    border-top: var(--separator-height) solid;
    border-bottom: var(--separator-height) solid;
    border-image: linear-gradient(90deg, transparent, rgba(110, 159, 255, 0.7), rgba(156, 110, 255, 0.7), rgba(255, 110, 159, 0.7), rgba(110, 255, 177, 0.7), rgba(255, 222, 89, 0.7), transparent) 1;
    /* Effet de profondeur pour démarquer les sections */
    box-shadow: var(--separator-shadow-inset);
    position: relative;
    z-index: 1;
}

/* Responsive design */
@media (max-width: 768px) {
    :root {
        --separator-height: var(--separator-height-mobile);
    }
    
    header .cosmic-header,
    footer,
    .services-section,
    .processus-section,
    #portfolio.hero-section,
    #contact.hero-section {
        border-top-width: var(--separator-height-mobile);
        border-bottom-width: var(--separator-height-mobile);
    }
    
    header .cosmic-header::after {
        height: var(--separator-height-mobile);
        bottom: calc(-1 * var(--separator-height-mobile));
    }
    
    footer::before {
        height: var(--separator-height-mobile);
        top: calc(-1 * var(--separator-height-mobile));
    }
}