d9-eql/web/themes/custom/eql/scss/pages/_home.scss

.field--type-entity-reference-revisions{
        .paragraph-summary{
            font-family: $font-family-default;
            font-size: 5rem;
            font-weight: 600;
            color: $black !important;
            text-transform: capitalize;
        
            span:nth-of-type(2n){
                    display: block;
                    font-size: 1rem;
                }
            }        
       .paragraph-summary:nth-of-type(2n) {
        font-size: 2rem;
        
       }
        
}

// 1er bandeau

.block-views-blockhome-nodes-block-1{

    .node-type-static{
        div:first-child{
            display: grid;
            // flex-direction: column;
            grid-template-columns: 1fr repeat(4, 2fr) 1fr;
            grid-template-rows: repeat(4, auto);
            .field--name-field-images{
                z-index: -99;
                filter: grayscale(100%);
                filter: brightness(0%);
                opacity: 0.5;
                // display: none;
                grid-column: 1 /span 10;
                grid-row: 1 / span 4;
                img{
                    width: 100vw;
                    height: auto;
                }
            }
            .field--name-field-accroche{
                grid-column: 2 /span 3;
                grid-row: 2 / span 3;
                font-size: 6rem;
                font-weight: 800;
                color: $blue-light;
                p{
                    margin: 0;
                }
                margin: 0;
            }
            .field--name-title{
                grid-column: 4;
                grid-row: 1;
                margin-top: 2rem;
                h2{ 
                    a{
                        color: #e1000f;
                        font-weight: 900;
                        text-transform: uppercase;
                    }
                }
            }
            .links.inline{
                grid-column: 2;
                grid-row: 4;
                max-width: 70%;
                min-width: fit-content;
                height: 1.5rem;
                padding: 0.4rem 1rem;
                font-size: 0.8rem;
                margin-bottom: 2.5rem;
                background-color: $white;
                border: 2px solid $blue-light;  
                list-style: none;
                text-align: center !important;

                a{
                    display: inline-flex;
                    text-transform: uppercase;
                    font-weight: 700;
                    color: $blue-light;
                    &:after{
                        display: block;
                        content: url('data:image/svg+xml,<svg width="40" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1"><polyline points="71.9,49 24.3,49 24.3,51 71.9,51 58.1,64.8 59.5,66.2 75.7,50 59.5,33.8 58.1,35.2" transform="scale(0.5) translate(0,-25)"  fill="rgb(0,158,227)" stroke="rgb(0,158,227)" stroke-width="0.7"/></svg>');

                    }
                }
            }
        }
    }
    
}

// bouton déposer candidature
.block-block-content.block-block-content9448ca2a-90e3-488b-89cf-8ec6a986a9ca{
    display: grid;
    grid-template-columns: 1fr repeat(4, 2fr) 1fr;
    height: 0;
    .field--type-link {
        grid-column: 3;
        // justify-self: end;
        position: relative;
        max-width: 70%;
        min-width: fit-content;
        height: 1.5rem;
        padding: 0.4rem 1rem;
        font-size: 0.8rem;
        margin: 0;
        background-color: $white;
        border: 2px solid $blue-light;  
        list-style: none; 
        top: -200%;
        text-align: center !important;
      
        a{
            display: inline-flex;
            text-transform: uppercase;
            font-weight: 700;
            color: $blue-light;

        } 
        a::after{
            content: url('data:image/svg+xml,<svg width="40" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1"><polyline points="71.9,49 24.3,49 24.3,51 71.9,51 58.1,64.8 59.5,66.2 75.7,50 59.5,33.8 58.1,35.2" transform="scale(0.5) translate(0,-25)"  fill="rgb(0,158,227)" stroke="rgb(0,158,227)" stroke-width="0.7"/></svg>');
    
        }
    }
}

// bouton foire aux questions
.block-region-content{
    position: relative;
}
.block-block-content.block-block-content1bb9024b-d95f-4137-894c-362abf10a483{
    display: grid;
    grid-template-columns: 1fr repeat(4, 2fr) 1fr;
    position: relative;
    background-color: $blue-light;
    height: 0;
    width: 100%;
    position: relative;

    .field--name-field-lien.field--type-link{
        position: relative;
        bottom: +326%;
        grid-column: 5;
        width:inherit;
        font-size: 0.8rem;
        list-style: none;
        background-color: $blue-light;
        display: flex;
        justify-content: center;

        a{
            text-transform: uppercase;
            font-weight: 700;
            color: $blue-dark;
            &:before{
                display: block;
                width: fit-content;
                content: url('data:image/svg+xml,<svg width="40" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1"><polyline points="71.9,49 24.3,49 24.3,51 71.9,51 58.1,64.8 59.5,66.2 75.7,50 59.5,33.8 58.1,35.2" transform="scale(0.5) translate(0,-25)" fill="white" stroke="white" stroke-width="0.7"/></svg>');
            }
        }
    }   
    .field--name-field-description{
        position: relative;
        bottom: +140%;
        grid-column: 5;
        background-color: $blue-light;
        p{
            color: $white;
            font-size: 1.2rem;
            padding-left: 1rem;
            padding-right: 1rem;
            margin-top: 0;
            text-align: center;
        }
    } 

}

// bandeau actus

.block-views-blockactus-blocks-pages-block-1{
    clear: both;
    border-bottom: 5px solid $blue-light;
    border-top: 5px solid $blue-light;
    .view-content{

        display: grid;
        grid-template-columns: 1fr repeat(4, 2fr) 1fr;
        margin: auto;
        padding-top: 2rem;
        padding-bottom: 4rem;
        .views-row:nth-of-type(1) { grid-column: 2; }

        .node-type-actualite{
            color: $black;
            line-height: 1.5rem;
            padding: 0.5rem;
            div:first-child{           // block actu dans le bandeau
                display: flex;
                flex-direction: column;
                :nth-child(1) { order: 1; } 
                :nth-child(4) { order: 2; }  
                :nth-child(5) { order: 3; }            
            }
            .field--name-field-images {
                .field__item img{  
                    max-width: 70%; 
                    max-height: 130px;
                    object-fit: cover;
                    width: 100%; 
                    padding-bottom: 1rem;
                }
                // &::after{ 
                //     display: block;
                //     content:url('data:image/svg+xml,<svg width="160" height="40" xmlns="http://www.w3.org/2000/svg" version="1.1"> <line x1="0" x2="80" y1="20" y2="20" stroke-linecap="cube" stroke="white" stroke-width="5"/></svg>');
                // }
            }
            time{ 
                font-size: 0.9rem;
                font-weight: 800;
                padding-right: 1rem;
                width: fit-content;
                &:after{ 
                    padding-left: 0.5rem;
                    content: "|";}
            }
            
            .field:not(.field--name-field-images){
                width: 100%;
            }
            h2{ margin:0; }
            a{ color: $black; } 

            .inline.links{
                padding-top: none !important;
                list-style: none;
                width: fit-content;
                align-self: flex-end;
                padding-right: 1rem;
                a{
                    display: none;
                }
                // a{
                //     content: url('data:image/svg+xml,<svg width="40" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1"><polyline points="71.9,49 24.3,49 24.3,51 71.9,51 58.1,64.8 59.5,66.2 75.7,50 59.5,33.8 58.1,35.2" transform="scale(0.5) translate(0,-25)" fill="rgb(0,158,227)" stroke="rgb(0,158,227)" stroke-width="0.7"/></svg>');
                // }
            }
            .field--name-field-actu-type{
                padding-top: 1rem;
            }
        }
    }
}



// bouton voir toutes actus du bandeau bleu
// .layout--onecol{
.block-block-content.block-block-content3ee1f633-aaa7-4b4c-a42a-02206e26d3a2{
    display: grid;
    grid-template-columns: 1fr repeat(8, 2fr) 1fr;
    position: relative;
    height: 0;
        
    .field--type-link {
        grid-area: 8 / span 9;
        justify-self: end;
        position: relative;
        top: -200%;
        width: fit-content;
        height: fit-content;
        padding: 0.4rem 1rem;
        font-size: 0.8rem;
        margin: 0;
        background-color: $white;
        border: 2px solid $blue-light;  
        list-style: none; 
      
        a{
            text-transform: uppercase;
            font-weight: 700;
            color: $blue-light;

        } 
        a::after{
            content: url('data:image/svg+xml,<svg width="40" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1"><polyline points="71.9,49 24.3,49 24.3,51 71.9,51 58.1,64.8 59.5,66.2 75.7,50 59.5,33.8 58.1,35.2" transform="scale(0.5) translate(0,-25)"  fill="rgb(0,158,227)" stroke="rgb(0,158,227)" stroke-width="0.7"/></svg>');
    
        }
    }
}
// }


// boutons en savoir plus pour lien vers pages statiques 
// présentation programme

.view-display-id-block_2:is(.view-id-home_nodes){
    padding-top: 2rem;
    // background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"  version="1.1"><rect x="0" y="0" width="80" height="80" transform="rotate(35) translate(430, -800) scale(15)" fill="none" stroke="rgb(0,158,227)" stroke-width="0.4px"/></svg>');
    background: url('../images/pictos/carre-contour-bleu.svg');
    // background-position-y: 50%;
    background-repeat: no-repeat;
    max-width: 100vw;
    background-size: cover;

    
    .node-type-static{
        width: 70%;
        margin: auto;
        div:first-child:not(.field__item):not(.field){
        display: flex;
        flex-direction: row;
    }

        .inline.links{
            align-self: flex-end;
            width: fit-content;
            height: fit-content;
            padding: 0.4rem 1rem;
            font-size: 0.8rem;
            margin: 0;
            background-color: $white;
            border: 2px solid $blue-light;  
            list-style: none;

            a{
                text-transform: uppercase;
                font-weight: 700;
                color: $blue-light;
                &:after{
                    // display: block;
                    content: url('data:image/svg+xml,<svg width="40" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1"><polyline points="71.9,49 24.3,49 24.3,51 71.9,51 58.1,64.8 59.5,66.2 75.7,50 59.5,33.8 58.1,35.2" transform="scale(0.5) translate(0,-25)" fill="rgb(0,158,227)" stroke="rgb(0,158,227)" stroke-width="0.7"/></svg>');
                }
            }
        }
        .field--name-field-images{
            // grid-column: 2 / 4;
            .field__item{
                img{
                    width: 15rem;
                    height: auto;
                }
            }
        }
        .field--name-title{
            display: none;
        }
        .field--name-field-accroche{
            flex: 1 1 50px;
            // grid-column: 4 / 9;
            padding-left: 1rem;
            p{
                background-color: $white;
                font-size: 1.5rem;
                width: 110%;
                margin-bottom: 2rem;
                padding-bottom: 2rem;
                margin-block-start: 0;
            }

        }
    }

}