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;
            grid-template-columns: 1fr repeat(4, 2fr) 1fr;
            .field--name-field-images{
                grid-column: 1 /span 10;
                img{
                    height: auto;
                }
            }

        }
    }
    .field--name-field-accroche{
        display: none;
    }
    .field--name-title{
        grid-column: 2;
        h2{ 
            grid-column: 2;
            a{
                color: $blue-light;
                font-weight: 900;
        
            }
        }
    
    }
    .links.inline{
        grid-column: 2;
        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>');
            }
        }
    }
}


// bandeau actus

.block-views-blockactus-blocks-pages-block-1{
    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;
        .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%; 
                    height: fit-content;  
                    max-height: 200px;
                    object-fit: contain;
                }
                &::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-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{
                    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: 2rem;
            }
        }
    }
}



// bouton voir toutes actus du bandeau bleu
.layout--onecol{
    .block-block-content{
        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;
            }

        }
    }

}