/* CSS pour les lignes latérales - Compatible WordPress FSE */
/* Conteneur principal avec lignes latérales */
.side-lines-container {
    position: relative;
    width: 100%;
    overflow-x: hidden;
}

/* Lignes latérales avec pseudo-éléments */
.side-lines-container::before,
.side-lines-container::after {
    content: '';
    position: fixed;
    top: 0;
    height: 100vh;
    background-color: #7bb731;
    z-index: 10;
}

.side-lines-container::before {
    left: 0;
}

.side-lines-container::after {
    right: 0;
}

/* Contenu principal avec espacement pour les lignes */
/* .side-lines-content {
    position: relative;
    z-index: 15;
    width: 100%;
} */

/* Breakpoints responsive - Mobile First */

/* Little Mobile - Base (0px) */
.side-lines-container::before,
.side-lines-container::after {
    width: 20px;
}

/* .side-lines-content {
    padding-left: 30px !important;
    padding-right: 30px !important;
} */

/* Mobile - 350px */
@media (min-width: 350px) {
    .side-lines-container::before,
    .side-lines-container::after {
        width: 25px;
    }
    
    /* .side-lines-content {
        padding-left: 35px !important;
        padding-right: 35px !important;
    } */
}

/* Tablet - 768px */
@media (min-width: 768px) {
    .side-lines-container::before,
    .side-lines-container::after {
        width: 40px;
    }
    
    /* .side-lines-content {
        padding-left: 50px !important;
        padding-right: 50px !important;
    } */
}

/* Desktop - 1024px */
@media (min-width: 1024px) {
    .side-lines-container::before,
    .side-lines-container::after {
        width: 50px;
    }
    
    /* .side-lines-content {
        padding-left: 70px !important;
        padding-right: 70px !important;
    } */
}

/* Large Desktop - 1200px */
@media (min-width: 1200px) {
    .side-lines-container::before,
    .side-lines-container::after {
        width: 60px;
    }
    
    /* .side-lines-content {
        padding-left: 80px !important;
        padding-right: 80px !important;
    } */
}

/* Extra Desktop - 1400px */
@media (min-width: 1400px) {
    .side-lines-container::before,
    .side-lines-container::after {
        width: 70px;
    }
    
    /* .side-lines-content {
        padding-left: 90px !important;
        padding-right: 90px !important;
    } */
}
/* Extra extra extra Desktop - 1900px */
@media (min-width: 1900px) {
    .side-lines-container::before,
    .side-lines-container::after {
        width: 130px;
    }
    
    /* .side-lines-content {
        padding-left: 90px !important;
        padding-right: 90px !important;
    }     */
}

/* Variantes de couleurs */
.side-lines-container.has-primary-color::before,
.side-lines-container.has-primary-color::after {
    background-color: var(--wp--preset--color--primary);
}

.side-lines-container.has-secondary-color::before,
.side-lines-container.has-secondary-color::after {
    background-color: var(--wp--preset--color--secondary);
}

.side-lines-container.has-accent-color::before,
.side-lines-container.has-accent-color::after {
    background-color: var(--wp--preset--color--accent);
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
    .side-lines-container::before,
    .side-lines-container::after {
        transition: none;
    }
}

/* Support pour les utilisateurs avec des préférences de contraste élevé */
@media (prefers-contrast: high) {
    .side-lines-container::before,
    .side-lines-container::after {
        border: 2px solid var(--wp--preset--color--contrast, #000);
    }
}