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

.path-incubateur{
    background: url('../images/pictos/carre-contour-bleu_programme.svg');
    background-repeat: no-repeat;
    background-position-y: 7rem;
    max-width: 100vw;
    background-size: contain;
    
    .layout-container{
        overflow: unset;
        // display: flex;
        // flex-direction: column;
        // flex-flow: row wrap;
        // header{
        //     flex: 0 0 100%;
        // }
        // main{
        //     flex: 0 0 100%;
            .layout-content{
                
                .region-content{
                    #block-contenudelapageprincipale{
                        span{
                            width: fit-content;
                            // margin-left: 11%;
                            // margin-top: 15vh;
                            // @media (max-width: 810px){
                            //     margin-left: 8%;
                            //     margin-right: 5%;
                            // }
                            h2{
                                width: fit-content;
                                margin-left: 11%;
                                margin-top: 15vh;
                                color: $white;
                                font-family: "Source Code Pro";
                                text-transform: uppercase;
                                font-size: 2rem;
                                font-weight: 800;
                                background: $blue-light; 
                                margin-bottom: 15vh;
                               
                            }
                        }
                        .layout--threecol-25-50-25{
                            // menu ancres a gauche
                            .layout__region--first{             // menu ancres a gauche
                                position: relative;
                                .block-region-first{
                                    .block-config-pages-block{
                                        display: flex;
                                        justify-content: flex-end;
                                        position: -webkit-sticky;
                                        position: sticky;
                                        top: 10rem;
                                        @media (max-width: 810px){
                                        display: none;
                                        }
                                        .config_pages--type--incubateur-du-programme {
                                            display: flex;
                                            flex-direction: row-reverse;
                                            width: 50%;
                                            background-color: $white;
                                            padding-right: 2rem;
                                            
                                            .field--name-field-titre{
                                                display: flex;
                                                flex-direction: column;
                                                font-size: 1rem;
                                                font-weight: 1000;
                                                color: $blue-dark;
                                                border-bottom: 1px solid $blue-light;
                                                padding-bottom: 0.8rem;
                                                padding-right: 1rem;
                                                margin-top: 1rem;
                                                scroll-margin-top: 7em;
                                
                                                &:hover{
                                                    text-decoration: underline;
                                                }
                                            }
                                        }  
                                    }

            
                                }
                            }
            
                            // paragraphe texte
                            .layout__region--second{   
                                 
                                .block-config-pages-block{
                                    .config_pages--type--incubateur-du-programme{
                                        
                                        .field--name-field-textes{
                                            .field__item{
                                                .paragraph--type--texte{
                                                    padding-right: 2rem;
                                                    margin-top: 1rem;
                                                    background-color: $white;
                                                    .field--name-field-titre{
                                                        font-size: 1.5rem;
                                                        font-weight: 1000;
                                                        font-family: 'Source Code Pro', monospace;
                                                        color: $blue-dark;
                                                        text-transform: uppercase;
                                                        // margin-top: 2rem;
                                                        margin-bottom: 0.8rem;
                                                    }
                                                    .field--name-field-texte{
                                                        
                                                            
                                                            margin-bottom: 2rem;
                                                        
                                                    }

                                                }
                                            }

                                        }

                                    }
                                    
                                }    
                            }
                            // colone de droite fichiers et ressources liées
                            .layout__region--third{     
                                .block-region-third{
                                    .block-config-pages-block{
                                        .config_pages--type--incubateur-du-programme{
                                            margin-top: 1rem;
                                            display: flex;
                                            flex-direction: column;
                                            width: 70%;
                                            // position: -webkit-sticky;
                                            // position: sticky;
                                            // top: 9rem; 
                                            @media (max-width: 810px){
                                                margin: auto;
                                            }               
                                            .field--name-field-documents{
                                                height: fit-content;
                                                border: 2px solid $blue-light;
                                                background-color: $white;
                                                margin-bottom: 1rem;
                                                .field__item{
                                                    min-height: 4rem;
                                                    background: $white;
                                                    color: $blue-light;
                                                    padding-left: 0.8rem;
                                                    padding-top: 1rem;
                                                   
                                            
                                                    span:nth-of-type(2){
                                                        display: none;
                                                    }
                                                    
                                                    .file--mime-application-pdf{    
                                                        height: inherit;      
                                                        margin: auto;  
                                                        ::before{
                                                            content: url("../images/pictos/noun_Download_file_307900.svg");
                                                            min-width:40px;
                                                            height: auto;
                                                            padding-right: 0.5rem;
                                                            display: inline-flex;
                                                            align-items: center;
                                                        }
                                                        a{
                                                            hyphens: auto;
                                                            display: inline-flex;
                                                            align-items: center;
                                                            color: $blue-light;
                                                            font-weight: 800;
                                                            // max-width: 80px ;
                                                        }
                                                    }
                                            
                                                }
                                            }         
 
                                            
                                            .field--name-field-liens{
                                                .field__item{
                                                    margin: auto;  
                                                    height: fit-content;
                                                    border: 2px solid $blue-light;
                                                    min-height: 4rem;
                                                    background: $white;
                                                    color: $blue-light;
                                                    padding-left: 0.8rem;
                                                    padding-top: 1rem;
                                                    margin-bottom: 1rem;
                                                    
                                                }
                                                a{
                                                    display: inline-flex;
                                                    align-items: center;
                                                    justify-items: center;
                                                    color: $blue-light;
                                                    font-weight: 800;
                                                    &::before{
                                                        content: url("../images/pictos/noun_External Link_674151.svg");
                                                        min-width: 40px;
                                                        height: auto;
                                                        padding-right: 0.5rem;
                                                        display: inline-flex;
                                                        align-items: center;
                                                    }
                                                    svg.ext{
                                                        display: none;
                                                    }
                                                }
                                            }
                                            
                                            
                                        
                                        
                                            // .block-entity-fieldnodefield-ress{
                                            //     margin-top: 3rem;        
                                        
                                            //     h2{
                                            //         font-size: 0.8rem;
                                            //         color: $black;
                                            //         font-weight: 900;
                                            //     }
                                        
                                            //     .node-type-ressource{
                                            //         display: flex;
                                            //         flex-direction: column;
                                            //         border: 2px solid $blue-light;
                                            //         padding: 1rem;
                                    
                                            //         height: fit-content;
                                            //         margin-bottom: 1rem;
                                            //         background-color: $white;
                                            //         &:first-of-type{
                                            //             border-top: 1px solid $blue-light;
                                            //             padding-top: 1rem;
                                            //             &::after{
                                            //                 content: url("../images/pictos/noun_Arrow_3771902.svg");
                                            //                 align-self: flex-end;
                                            //             }
                                            //         }
                                            //         .field--name-title{
                                            //             a{
                                            //                 color: $black;
                                            //                 font-size: 1.4rem;
                                            //                 font-weight: 600;
                                    
                                            //             }
                                            //         }
                                            //         .field--name-field-auteur-s-{
                                            //             font-weight: 800;
                                            //             p{
                                            //                 margin: 0;
                                            //             }
                                            //             .field__label{
                                            //                 display:none;
                                            //             }
                                            //         }
                                            //         .field--name-field-edition{
                                            //             p{
                                            //                 margin: 0;
                                            //             }
                                            //             .field__label{
                                            //                 display:none;
                                            //             }
                                            //         }
                                            //         .field--name-field-images{
                                            //             display: none;
                                            //             width: 50%;
                                            //             img{
                                            //                 width: 100%;
                                            //                 height: auto;
                                            //             }
                                            //         }
                                            //         .field--name-field-type-de-ressource{
                                            //             display: inline-flex;
                                            //             margin-top: 2rem;
                                            //             background: $blue-dark;
                                            //             margin-right: 1rem;
                                            //             padding-left: 0.3rem;
                                            //             padding-right: 0.3rem;
                                            //             color: $white;
                                            //             font-weight: 800;
                                            //             vertical-align: middle;
                                            //         }
                                            //     }
                                            // }
                                        }

                                    }

                                
                                }
                                
                            
                            }

                            // filtre et grille projets
                            .layout__region--bottom{
                                .block-region-bottom{
                                    .block-views-blockprojets-block-3{
                                        padding-top: 1rem;
                                        background-color: white;
                                        .view-projets{
                           
                                            width: 80%;
                                            margin: auto;

                                            .view-filters{
                                                margin-top: 4rem;
                                                display: flex;
                                                flex-direction: row;
                                                @media (max-width: 479px){
                                                    flex-direction: column;
                                                    padding-bottom: 3rem;
                                                }
                                                &::before{
                                                    content: 'Filtrer par :';
                                                    margin-right: 1rem;
                                                    @media (max-width: 479px){
                                                        padding-bottom: 1rem;
                                                    }
                                                }
                                                #views-exposed-form-projets-block-3{
                                                    // width: 100%;
                                                    display: flex;
                                                    flex-direction: row;
                                                    #edit-field-neuf-rehabilitation-value--wrapper{
                                                        legend{display: none;}
                                                        .js-form-item-field-neuf-rehabilitation-value:first-of-type{
                                                            display: none;
                                                        }
                                                        @media (max-width: 479px){
                                                            padding-bottom: 1rem;
                                                        }
                                                    }
                                                    #edit-field-encours-fini-value--wrapper{
                                                        legend{display: none;}
                                                        .js-form-item-field-encours-fini-value:first-of-type{
                                                            display: none;
                                                        }
                                                        @media (max-width: 479px){
                                                            padding-bottom: 1rem;


                                                        }
                                                    }
                                                    
                                                    .js-form-type-textfield{
                                                        label{display: none;}
                                                        @media (max-width: 479px){
                                                            padding-bottom: 1rem;
                                                        }
                                                    }
                                                    input[type="radio"]{
                                                        display: none;
                                                    }
                                                    input[type="radio"] + label::before{
                                                        content:"";
                                                        display:inline-block;
                                                        width: 15px;
                                                        height: 15px;
                                                        background:#fff;
                                                        border-radius:0px;
                                                        border-color: rgba($color: #000000, $alpha: 1);
                                                        border-style: solid;
                                                        border-width: 1px;
                                                        margin-right: 0.5rem;
            
                                                    }
                                                    input[type="radio"]:checked + label::before{
                                                        background:$blue-light;
                                                    }
                                                    label{
                                                        padding-right: 1rem;
                                                    }
                                                    #edit-submit-projets{
                                                        background-color: $blue-light; 
                                                        color: white;
                                                        text-transform: uppercase;
                                                        border: none;
                                                        padding: 0.1rem 0.7rem;
                                                        margin-left: 2rem;
                                                        @media (max-width: 479px){
                                                            margin-left: 0rem;
                                                            margin-right: 2rem;
                                                        }
                                                       
                                                    }
                                                    #edit-reset{
                                                        background-color: $blue-light; 
                                                        color: white;
                                                        text-transform: uppercase;
                                                        border: none;
                                                        padding: 0.1rem 0.7rem;
                                                        margin-left: 1rem;
                                                    }
                                                    @media (max-width: 479px){
                                                        flex-direction: column;
                                                       
                                                    }
                                                }
                        
                        
                                            }
                        
                                            //grille de projets
                                            .view-content{
                                                margin-top: 2rem;
                                                display: flex;
                                                flex-direction: row;
                                                flex-wrap: wrap;
                                                @media (max-width: 810px){
                                                    flex-direction: column;
                                                }
                                                .views-row{
                                                    width: 25%;
                                                    // flex: 0 0 25%;
                                                    @media (max-width: 810px){
                                            
                                                        width: 100%;
                                                    }
                                                }
                        
                                            }
                                            .node-type-projet{
                                                color: $blue-dark;
                                                line-height: 1.5rem;
                                                padding: 0.5rem;
                                                padding-right: 1rem;
                                                padding-left: 1rem;
                                                @media (max-width: 479px){
                                                    padding-left: 0rem;
                                                    padding-right: 0rem;
                                                    padding-top: 2rem;
                                                }
                                                div:first-child{                
                                                    display: flex;
                                                    flex-direction: column;
                                               
                                                    a{
                                                        color: $blue-dark;
                                                    } 
                                                    .field--name-field-photo {
                                                        order:1;
                                                        img{  
                                                            width: 100%; 
                                                            max-height: 175px;
                                                            object-fit: cover;
                                                        }
                                                        &::after{ 
                                                            display: block;
                                                            content:url('data:image/svg+xml,<svg width="160" height="25" xmlns="http://www.w3.org/2000/svg" version="1.1"> <line x1="0" x2="80" y1="20" y2="20" stroke-linecap="cube" stroke="rgb(9,57,139)" stroke-width="2.5"/></svg>');
                                                        }
                                                    }
                                                    .field--name-field-adresse{
                                                        order:2;
                                                        display: flex;
                                                        text-transform: uppercase;
                                                        font-size: 0.9rem;
                                                        font-weight: 800;
                                                        margin-top: 0.8rem;
                                                        line-height: 0.6rem;
                                                        .address{
                                                            display: flex;
                                                            flex-direction: row;
                                                            margin: 0;
                                                            .locality{
                                                                padding-top: 0 !important;
                                                                padding-bottom: 0 !important;
                                                                &::after{
                                                                    content:",";
                                                                    margin-right: 0.3rem;
                                                                }
                                                            }  
                                                            .country{
                                                                padding-top: 0 !important;
                                                                padding-bottom: 0 !important;
                                                            }                                      }
                                                    }
                                                    .field--name-field-sous-titre{
                                                        margin-top: 0.5rem;
                                                        font-size: 0.9rem;
                                                        font-weight: 800;
                                                        order: 4;
                                                    }
                                                    .field--name-title{
                                                        order: 3;
                                                        margin-top: 0.5rem;
                                                        font-size: 0.9rem;
                                                        font-weight: 800;
                                                        h2{margin: 0;}
                                                    }
                        
                                                    .field--name-field-incube{
                                                        order:4;
                                                        color: red;
                                                        margin-top: 0.8rem;
                                                        font-size: 0.7rem;
                                                    }
                                                }
                                            }
                                        }

                                    }

                                }
                            }
                        }
                    }
                }
            }
        // }
    }
}