/* =============================================================================
    Sommaire
    - Layouts
    - navigations
   ========================================================================== */

/* Layout Home */
.layout-home:not([data-pagekey="nos-engagements"], [data-pagekey="ebra-story"]) {
    .sectionMiddle {
        > * {
            &:nth-child(odd) {
                background-color: var(--clear-blue);
            }
            &:nth-child(even) {
                background-color: var(--white);
            }
        }
    }
}
.layout-home {
    .S_main , 
    .sectionTop, 
    .sectionBottom{
        display: flex;
        flex-direction: column;
    }
}
.layout-home:not([data-pagekey="nos-engagements"], [data-pagekey="ebra-story"]) {
    .sectionMiddle {
        > * {
            padding: 80px 0;
        }
    }
}
.layout-home[data-pagekey="ebra-story"],
.layout-home[data-pagekey="nos-engagements"] {
    .sectionMiddle {
        > * {
            padding: 40px 0;
        }
    }
}
.layout-home[data-pagekey="nos-engagements"] {
    .sectionTop {
        gap: 42px;
    }
}

/* Layout List */
.Layout_light:not(:has(.detail_PagesLegales)){
    padding: 140px 0 42px 0;
}



.hero {
    padding: 140px 20px 30px;
    min-height: 600px;
    display: flex;
    align-items: center;
    .hero-wrapper {
        z-index: 1;
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin: 0;
        padding: 32px;
        .breadcrumb {
            ul {
                display: flex;
                align-items: center;
                a, p, span {
                    color: var(--white);
                    font-size: 1.4rem;
                    line-height: 1;
                }
            }
        }
        .tag {
            background-color: var(--rouge-ebra);
            border-radius: calc(infinity * 1px);
            padding: 4px 16px;
            color: var(--white);
            font-size: 1.4rem;
            text-transform: uppercase;
            width: fit-content;
        }
        h1 {
            display: flex;
            flex-direction: column;
            color: var(--white);
            line-height: 1;
            span {
                font-style: italic;
                color: var(--bleu);
            }
        }
        p {
            color: var(--white);
        }
    }
    &[data-filigrane="actus"],
    &[data-filigrane="nos-realisations"] {
        margin-bottom: 42px;
    }
    &.with-bg {
        position: relative;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;

        &::before {
            position: absolute;
            content: "";
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--gradient);
            opacity: 0.8;
        }
    }
}
 @media screen and (min-width: 1200px) and (max-width: 1280px) {
    .hero {
        min-height: 450px;
    }
    main[data-pagekey="ebra-story"] {
        .hero {
            padding: 20px 20px 30px;
        }
    }
 }
 @media screen and (max-width: 1200px) {
     .hero {
        min-height: fit-content;
        .hero-wrapper {
            padding: 0;
        }
    }
 }
.detail_default {
    .hero {
        .hero-wrapper {
            margin: auto;
            padding: 0;
        }
    }
}

/* Layout Details */

.Layout_details[data-section="nos-realisations"] {
    padding: 150px 0 0 0;
}

/* =============================================================================
    Navigation
   ========================================================================== */
.ancreAll {
    background-color: var(--grey-light);
    padding: 20px 0;
    .ancres-list{ 
        ul {
            display: flex;
            column-gap: 30px;
            row-gap: 10px;
            flex-wrap: wrap;
            justify-content: center;
            .ico_EBA2 {
                font-size: 1rem;
            }
        }
    }
}

.aside .nav_model07 {
    flex-direction: column;
    gap: 5px;
}
    .aside .nav_model07 a {
        display: block;
        line-height: 32px;
        padding: 0 10px;
        border: 1px dashed transparent;
    }
    .aside .nav_model07 a:hover {
        border: 1px dashed var(--grey);
    }

/* =============================================================================
    Layout_connexion
   ========================================================================== */

.Layout_connexion {
    & .illustration-authentification {
        display: grid;
        grid: 80vh / 100%;
        grid-template-areas: 
            'illustration illustration'
            'authentification authentification';

        @media only screen and (min-width: 768px) {
            grid: 100vh / 60% 40%;
            grid-template-areas: 'illustration authentification';
        }

        & .illustration {
            grid-area: illustration;
            position: relative;
            display: block;

            .Model8, 
            .Model8 .image {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                height: 100%;
            }

            & .Model8 {              
                & .content {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    position: relative;
                    z-index: 2;
                    height: 100%;
                    padding: 20px 52px 40px 52px;
                    
                    &:before {
                        content: '';
                        position: absolute;
                        top: 0;
                        right: 0;
                        bottom: 0;
                        left: 0;
                        background: var(--gradient);
                        opacity: 0.8;
                    }
                    
                    & .title,
                    & .headline,
                    & .benefits {
                        z-index: 1;
                        margin-top: 50px;
                        font-size: var(--f-l);
                        color: var(--white);
                        .item {
                            
                            text-align: center;
                        }
                        .ico_facture {
                            width: 60px;
                            height: 60px;
                            background-image: url("../images/PICTO\ Facture.png");
                            background-size: contain;
                        }
                        .ico_campagne {
                            width: 60px;
                            height: 60px;
                            background-image: url("../images/PICTO\ Campagne.png");
                            background-size: contain;
                        }
                        .ico_info {
                            width: 60px;
                            height: 60px;
                            background-image: url("../images//Picto\ ESPACE\ DONNEES.png");
                            background-size: contain;
                        }
                    }
                    .title h1 {
                        color: var(--white);
                    }
                    
                    & .headline {
                        margin-top: 16px;
                        font-size: 2rem;
                        font-style: italic;
                    }

                    & .benefits {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        justify-content: space-between;
                        gap: 8px;

                        @media only screen and (min-width: 1024px) {
                            flex-direction: row;
                        }

                        & .item {
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                            gap: 8px;
                            
                            @media only screen and (min-width: 1024px) {
                                flex-direction: column;
                            }
                        }
                    }
                }

                & .image {
                    background-position: center right;
                    background-repeat: no-repeat;
                    background-size: cover;
                }
            }
        }

        & .authentification {
            grid-area: authentification;

            & .GXCO_content {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100%;
                padding: 32px;
                
                & .form_content {
                    display: flex;
                    flex-direction: column;
                    gap: 16px;
                    width: 500px;
                    position: relative;

                    & fieldset {
                        padding: 0;
                        /* border: 1px solid var(--bleu-ebra); */
                        border: 0;

                        &.active {
                            & .section-title {
                                background-color: var(--bleu-ebra);
                                color: #FFFFFF;
                            }
                        }
                        
                        & .section-title {
                            background-color: var(--grey-light);
                            color: var(--bleu-ebra);
                            padding: 16px;
                            position: relative;
                            border-radius: 8px;

                            & label {
                                &:after {
                                    content: '';
                                    display: block;
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    width: 100%;
                                    height: 100%;
                                    cursor: pointer;
                                }
                            }
                        }

                        & .formulaire {
                            margin-top: 32px;
                        }
                    }
                }

                & fieldset#formulaire-creation,
                & fieldset#formulaire-connexion {
                    padding: 0;
                    border: 0;

                    & .field {
                        margin-top: 0;

                        &:nth-last-child(1 of .field) {
                            margin-bottom: 0;
                        }
                    }

                    & .listaction {
                        margin: 16px 0;

                        &#cgu {
                            display: flex;
                            gap: 4px;

                            & label.error {
                                order: 3;
                                display: flex;
                                align-items: center;
                            }
                        }
                    }

                    & .blocbutton {
                        margin-top: 16px;
                    } 
                }
            }
        }
    }
}