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

.path-projets{

        .region-content{
            #block-contenudelapageprincipale{
                span{
                    padding-top: 3rem;
                    padding-bottom: 3rem;
                    vertical-align: middle;
                    h2{
                        margin: 0;
                        padding-top: 2rem;
                        height: 4rem;
                        color: $white;
                        font-family: "Source Code Pro";
                        text-transform: uppercase;
                        background: $blue-light; 
                        padding-left: 13%;
                       
                    }
                }
                .layout--onecol{
                    .block-region-content{
                        display: grid;
                        grid-template-columns: 1fr repeat(7, 1fr) 1fr;
                        
                        @media (max-width: 810px){
                            display: flex;
                            flex-direction: column;
                        }
                        
                        /// carte
                        .block-views-blockprojets-block-2{
                            grid-column: 1 / span 10;
                        }
    
                        //texte de présentation
                        .block-config-pages-block{
                            
                            grid-column: 3 / span 5;
                            // width: 60%;
                            margin: auto;
                            span h2{
                                display: none;
                            }
                            .config_pages--type--les-projets{
                                .field--name-field-introduction{
                                    p:nth-of-type(1){
                                        font-size: 1.5rem;
                                    }
                                }
                            }

                            @media (max-width: 810px){
                                padding: 2rem;
                            }
                           
                        }
                        
                        // bouton projets incubés
                        .block-block-contentaffaf220-dd27-4c9d-ae02-8044c2662220{
                            grid-column: 8 / span 9;
                            margin-top: 4rem;
                            background-color: $blue-light;
                            height: fit-content;
                            width: 60%;
                            margin-left: 2rem;
                            grid-row: 2;
                            .display{
                                display: block;
                            }
                            

                            .field--name-field-lien{
                                display: flex;
                                flex-direction: column;
                                margin-top: 2rem;
                                margin-bottom: 2rem;
                                margin-left: 1.5rem;
                                margin-right: 1.5rem;
                                text-align: center;
                                a{
                                    font-weight: 800;
                                    color: $white;
                                    font-size: 1.3rem;
                                } 
                                &:after{
                                    margin-left: auto;
                                    padding-top: 1rem;
                                    display: block;
                                    content:url("../images/pictos/noun_Arrow_3771902.svg")
                                    
                                }
    
                            }

                            @media (max-width: 810px){
                                margin: auto;
                            }

                        }
            
                        //partie projets
                        .block-views-blockprojets-block-1{
                            grid-column: 2 / span 7;
                            // width: 80%;

                            @media (max-width: 810px){
                                padding: 2rem;
                            }

                            .view-projets{
                               
                                // width: 80%;
                                margin: auto;

                                //filtres
                                .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: 2rem;
                                        margin-bottom: 1rem;
                                        // width: 160px;
                                        min-width: fit-content;
                                        @media (max-width: 479px){
                                            padding-bottom: 1rem;
                                        }
                                    }

                                    #views-exposed-form-projets-block-1{
                                        
                                        display: flex;
                                        flex-direction: row;
                                        flex-wrap: wrap;
                                        position: relative;
                                        .form-item{
                                            margin-right: 2rem;
                                            margin-bottom: 2rem;
                                        }
                                        #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;
                                                padding-top: 1rem;
                                                margin-inline-start: 0px;
                                            }
                                        }
                                        #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;
                                                margin-inline-start: 0px;

                                            }
                                        }
                                        .js-form-type-textfield{
                                            label{display: none;}
                                        }
                                        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{
                                            display: inline-block;
                                            background-color: $blue-light; 
                                            color: white;
                                            text-transform: uppercase;
                                            border: none;
                                            padding: 0.3rem 0.7rem;
                                            // margin-left: 2rem;
                                            @media (max-width: 479px){
                                                margin-left: 0rem;
                                                margin-right: 2rem;
                                            }
                                            @media (min-width:1495px) {
                                                // margin-left: 0;
                                                position: absolute;
                                                right: 150px;
                                            }
                                        }
                                        #edit-reset{
                                            background-color: $blue-light; 
                                            color: white;
                                            text-transform: uppercase;
                                            border: none;
                                            padding: 0.3rem 0.7rem;
                                            margin-left: 1rem;
                                            @media (min-width:1495px) {
                                                position: absolute;
                                                right: 0px;
                                            }

                                        }

                                        input[type="checkbox"]{
                                            display: none;
                                        }
                                        input[type="checkbox"] + 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="checkbox"]:checked + label::before{
                                            background:$blue-light;
                                        }
                                        @media (max-width: 479px){
                                            flex-direction: column;
                                            #edit-actions{
                                                width: 100%;
                                            }
                                        }
                                    }
            
            
                                }
            
                                //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;
                                            .field__item{
                                                display:none;
                                            }
                                            .field__item:first-child{
                                                display:block;
                                            }
                                            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;
                                        }
                                        .field--name-field-region{
                                            display: none;
                                        }
                                        .field--name-field-type-de-moa{
                                            display: none;
                                        }
                                        .field--name-field-type-de-projet{
                                            display: none;
                                        }
                                        .field--name-field-etape-du-projet{
                                            display: none;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

}