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

.path-ressources{

    .layout-container {
        overflow: visible;
    }
        .layout-content{
        width: 100vw;
        .region-content{
            width: 100%;
            margin: auto;
            #block-contenudelapageprincipale{
                h2{
                    font-size: 4em;
                    color: $blue-dark;
                    font-weight: 400;
                    text-align: center;
                    margin-bottom: 1rem;
                    width: fit-content;
                    margin-left: 28%;
                    
                    @media (max-width:810px) {
                     margin-left: 0;
                     text-align: left;
                     line-height: 4rem;
                    }
                }
                .layout--onecol{
                    .layout__region--content{
                        .block-region-content{
                            // display: grid;
                            // grid-template-columns: 1fr repeat(4, 1fr) 1fr;
                            display: flex;
                            flex-direction: column;
                            @media (max-width: 479px){
                                display: flex;
                                flex-direction: column;
                            }

                            // texte présentation
                           .block-config-pages-block{
                            width: 60%;
                            margin: auto;
                            margin-left: 28%;
                            @media (max-width:810px) {
                                margin-left: 0;
                                width: 90%;
                               }
                            @media (max-width:479px) {
                                order: 1;
                                margin-left: 0;
                            }

                                .config_pages--base-de-donnees--full{
                                    grid-column: 1 / span 5;
                                    @media (max-width: 810px){
                                        padding-top: 1rem;
                                        padding-left: 2rem;
                                        margin-top:1rem;
                                    }
                                    @media (max-width: 479px){
                                        padding-left: 0;
                                        padding-right: 0;
                                    }
                                    .field--name-field-introduction{
                                        margin: auto;
                                        background: $white;
                                        font-size: 1rem;
                                        // margin-top:5rem;
                                        @media (max-width: 479px){
                                            margin-top:1rem;
                                        }
                                    }
                                }
                            }


                            //button proposer une ressource
                            .block-block-content82917d0c-5004-4bfb-af66-ce334782d82d{
                                // visibility: hidden;
                                grid-column: 6 / span 5;
                                grid-row: 1;
                                margin-top: 4rem;
                                background-color: $blue-light;
                                height: fit-content;
                                width: 100%;
                                @media (max-width: 810px){
                                    grid-column: 5 / span 5;
                                }
                                @media (max-width: 479px){
                                    grid-column: 5 / span 5;
                                    order: 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;
                                }
                                
                            }

                        // grille des ressources
                            .block-views-blockbase-de-donnees-block-1{
                                margin-top: 2rem;
                                width: 100%;

                                @media (max-width:479px) {
                                    order: 3;
                                }
                                .view-base-de-donnees{
                                    display: grid;
                                    grid-template-columns: 22% 80%;
                                    gap: 2rem;
                                    @media (max-width:810px) {
                                        display: flex;
                                        flex-direction: column ;
                                    }
                                    .view-filters{
                                        position: sticky;
                                        align-self: start;
                                        top: 21rem;
                                        left: 0;
                                        background-color: $white;
                                        margin-bottom: 5rem;
                                        padding: 1rem;
                                        padding-left: 2rem;
                                        padding-right: 1.5rem;
                                        z-index: 1;
                                        transform: translateY(-210px);
                                        margin-bottom: -210px;
                                       

                                        @media (max-width: 810px) {
                                            position: static;
                                            margin-bottom: 2rem;
                                            transform: none;
                                            margin-bottom: 0px;

                                        }
                                        @media (max-width: 479px) {
                                            margin-left: 0;                                                
                                        }
                                        
                                        .buttons-filtres-ressources{
                                            &::before{
                                                content: "Afficher : ";
                                                padding-right: 1rem;
                                                font-weight: 800;
                                                font-size: 1rem;
                                                margin-bottom: 1rem;
                                                display: block;
                                                width: 100%;
                                                @media (max-width: 479px){
                                                    padding-bottom: 1rem;
                                                }
                                            }
                                      
                                            a.button{
                                                background-color: transparent;
                                                // border-radius: 30px;
                                                border: 1px solid black;
                                                padding: 0.3rem 0.5rem 0.1rem 0.3rem;
                                                margin-bottom: 0.5rem;
                                                margin-right: 0.5rem;
                                                font-size: 0.8rem;
                                                color: $blue-dark;
                                                display: inline-flex;
                                                flex-direction: row;
                                                align-items: center;
                                                &:hover{
                                                    cursor: grab;
                                                    background-color: $blue-dark;
                                                    color: white;
                                                }
                                                :visited{
                                                    color: $blue-dark;
                                                }
                                                

                                                &.button-videos{
                                                    &::before{
                                                        content:url("../images/pictos/videos.svg");
                                                        padding-right: 0.5rem;
                                                        display: block;

                                                    }
                                                    &:hover::before,
                                                    .is-active &::before{
                                                        content:url("../images/pictos/videos-blanc.svg");
                                                        display: block;

                                                    }
                                                    }
                                                &.button-podcasts{
                                                    &::before{
                                                    content:url("../images/pictos/podcasts.svg");
                                                    padding-right: 0.5rem;
                                                    display: block;
                                                    }
                                                    &:hover::before{
                                                        content:url("../images/pictos/podcasts-blanc.svg");
                                                        display: block;

                                                    }
                                                }
                                                &.button-images---photos{
                                                    &::before{
                                                    content:url("../images/pictos/en-images.svg");
                                                    display: block;
                                                    padding-right: 0.5rem;
                                                    }
                                                    &:hover::before{
                                                        content:url("../images/pictos/en-images-blanc.svg");
                                                        display: block;

                                                    }
                                                }
                                                &.button-livres{
                                                    &::before{
                                                    content:url("../images/pictos/ecrits.svg");
                                                    padding-right: 0.5rem;
                                                    display: block;;
                                                    }
                                                    &:hover::before{
                                                        content:url("../images/pictos/ecrits-blanc.svg");
                                                        display: block;

                                                    }
                                                }
                                                &.button-articles{
                                                    &::before{
                                                    content:url("../images/pictos/ecrits.svg");
                                                    padding-right: 0.5rem;
                                                    display: block;
                                                    }
                                                    &:hover::before{
                                                        content:url("../images/pictos/ecrits-blanc.svg");
                                                        display: block;

                                                    }
                                                }
                                                &.button-publications---rapports{
                                                    &::before{
                                                    content:url("../images/pictos/ecrits.svg");
                                                    padding-right: 0.5rem;
                                                    display: block;
                                                    }
                                                    &:hover::before{
                                                        content:url("../images/pictos/ecrits-blanc.svg");
                                                        display: block;

                                                    }
                                                }


                                            }
                                            button.is-active{
                                                background-color: $blue-dark;
                                                color: white;
                                              
                                                a {
                                                  color: white;
                                                }
                                                &.button-videos{
                                                    margin-top: 1rem;
                                                    a {
                                                         &::before,
                                                        .is-active &::before{
                                                            content:url("../images/pictos/videos-blanc.svg");
                                                        }
                                                       
                                                    }
                                                }
                                                &.button-podcasts{
                                                    a {
                                                        &::before{
                                                            content:url("../images/pictos/podcasts-blanc.svg");
                                                        }
                                                    }
                                                }
                                                &.button-images---photos{
                                                    a {
                                                        &::before{
                                                            content:url("../images/pictos/en-images-blanc.svg");
                                                        }
                                                    }
                                                }
                                                &.button-livres{
                                                    a {
                                                        &::before{
                                                            content:url("../images/pictos/ecrits-blanc.svg");
                                                        }
                                                    }
                                                }
                                                &.button-articles{
                                                    a {
                                                        &::before{
                                                            content:url("../images/pictos/ecrits-blanc.svg");
                                                        }
                                                    }
                                                }
                                                &.button-publications---rapports{
                                                    a {
                                                        &::before{
                                                            content:url("../images/pictos/ecrits-blanc.svg");
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                        form{
                                            &::before{
                                                content: "Filtrer par : ";
                                                padding-right: 1rem;
                                                font-weight: 800;
                                                font-size: 1rem;
                                                margin-bottom: 1rem;
                                                @media (max-width: 479px){
                                                    padding-bottom: 1rem;
                                                }
                                            }
                                            .form-item-field-type-de-media-target-id{
                                                display: none;
                                            }
                                            .form-item{
                                                font-size: 0.8rem;
                                            }
                                            .form-item-combine{
                                                border-top: none;
                                                border-left: none;
                                                border-right: none;
                                                font-size: 0.8rem;
                                                justify-content: flex-start !important;
                                                label{display: none;}
                                                .input-wrapper{
                                                    display: inline-flex;
                                                    position: relative;
                                                    font-size: 0.8rem;
                                                    width: -webkit-fill-available; /* Safari/Chrome */
                                                    width: -moz-available;         /* Firefox */
                                                    width: fill-available;         /* standard futur */
                                                    width: 100%;                   /* fallback */
                                                    max-width: 100%;
                                                    &::after{
                                                        content: url("../images/pictos/loupe.svg");
                                                        display: inline-block;
                                                    }
                                                    input{
                                                        text-align: start !important;
                                                        max-width: 100% !important;
                                                    }
                                                }
                                                
                                                  
                                                  
                                            }
                                            .form-item-combine:not(.form-item-field-date-de-parution-value) .search-with-clear{
                                                .clear-input {
                                                    position: absolute;
                                                    right: -4px;
                                                    top: 50%;
                                                    transform: translateY(-50%);
                                                    background: white;
                                                    border: none;
                                                    padding: 0.5rem;
                                                    margin: 0;
                                                    cursor: pointer;
                                                    color: #888;
                                                    display: none; /* masqué par défaut */
                                                  }
                                                  
                                                  .clear-input:hover {
                                                    color: #000;
                                                  }
                                            }

                                            .form-item-field-date-de-parution-value .clear-input{
                                                display: none;
                                            }
                                            select{
                                                font-size: 0.8rem;
                                                ::placeholder{
                                                    display: none;
                                                }
                                            }
                                            input{
                                                font-size: 0.8rem;
                                            }
                                        }
                                    }
                                    .filtered{
                                        display: flex;
                                        flex-direction: row;
                                        flex-wrap: wrap;
                                        .views-row-wrapper{
                                            flex-wrap: wrap;
                                            width: 85%;
                                            .views-row {
                                                padding: 1rem;
                                                width: 30% !important;
                                            }
                                        }
                                    }
                                    .view-content{
                                        transition: opacity 0.3s ease;
                                        display: flex;
                                        flex-direction: row;
                                        flex-wrap: wrap;
                                        width: 100%;
                                        .border{
                                            width: 80%;
                                            border-top: solid 1px rgba(0, 0, 0, 0.3);
                                            
                                        }
                                        .view-type-slide:not(:first-of-type) {
                                            // width: 80%;
                                            // border-top: solid 1px rgba(0, 0, 0, 0.3);
                                            // padding-top: 2rem;
                                          }
                                        .view-type-slide.type-publications-issues-du-programme-eqld{
                                            order: 1;
                                            &::before{
                                                background-color: $background-actus;
                                            }
                                            .views-row{
                                                width: 45% ;
                                                min-width: 350px !important;
                                                max-width: 500px ;
                                            }
                                        }
                                        .view-type-slide.type-paroles-de-laureats{order: 2;}
                                        .view-type-slide.type-les-projets-en-images{
                                            order: 3;
                                            // width: 80%;
                                            // border-top: solid 1px rgba(0, 0, 0, 0.3);
                                        }
                                        .view-type-slide.type-presse{
                                            order: 5;
                                            &::before{
                                                background-color: $background-actus;
                                            }
                                            h3{border: none;}
                                        }
                                        .view-type-slide.type-publications-des-partenaires-et-laureats{
                                            order: 4;
                                        }
                                        .view-type-slide.type-autres{order: 9;}
                                        .type-documentation-partenariale{order: 6;}
                                        .view-type-slide.type-these-et-memoire{order: 8;}

                                        .view-type-slide:not(footer){
                                            width: 100%;
                                            position: relative;
                                            z-index: 0;
                                            // padding-top: 1rem;
                                            padding-bottom: 1rem;
                                            &::before {
                                                content: "";
                                                position: absolute;
                                                left: -35%;
                                                height: 100%;
                                                width: 110vw;
                                                z-index: 0;
                                            }
                                            > * {
                                                position: relative;
                                                z-index: 1;
                                              }
                                            h3{
                                                // margin-top: 3rem;
                                                top: 1rem;
                                                // padding-top: 1rem;
                                                text-transform: uppercase;
                                                font-family: 'Source Code Pro';
                                                color: rgb(9, 57, 139) !important;
                                                display: flex;
                                                flex-direction: row;
                                                align-items: center;
                                                font-size: 1.7rem;
                                                margin-block: 0em;
                                                @media (max-width: 810px){
                                                    padding-left: 2rem;
                                                } 
                                            }
                                            h3.type-publications-issues-du-programme-eqld {
                                                border: none;
                                                &:before{
                                                    content:url("../images/pictos/picto-ressource-eqld.svg");
                                                    padding-right: 1rem;
                                                }
                                            }
                                            h3.type-paroles-de-laureats {
                                                &:before{
                                                    content:url("../images/pictos/picto-ressource-paroleslaureats.svg");
                                                    padding-right: 1rem;
                                                }
                                            }
                                            h3.type-les-projets-en-images {
                                                width: 80%;
                                                &:before{
                                                    content:url("../images/pictos/picto-ressource-projetsimages.svg");
                                                    padding-right: 1rem;
                                                }
                                            }
                                            h3.type-presse {
                                                &:before{
                                                    content:url("../images/pictos/picto-ressource-presse.svg");
                                                    padding-right: 1rem;
                                                }
                                            }

                                            .tout-voir{
                                                background-color: $white;
                                                border: 1px solid $blue-light;  
                                                list-style: none;
                                                padding: 0.5rem;
                                                position: relative;
                                                left: 60vw;
                                                top: -1.5rem;
                                                // margin-top: 1rem;
                                                a{
                                                    text-transform: uppercase;
                                                    font-size: 0.7rem;
                                                    font-weight: 500;
                                                    color: $blue-light;
                                                    display: inline-flex;
                                                    align-items: center;
                                                    // &: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>');
                                                    // }
                                                }
                                                @media (max-width: 810px){
                                                    left: 81vw;
                                                    top: -4.3rem;
                                                } 
                                                
                                            }
                                            .views-row-wrapper{
                                                display: flex;
                                                flex-direction: row;
                                                .slick-track{
                                                    width: 100% !important;
                                                    display: flex;
                                                    flex-direction: row;
                                                    transform: none;
                                                    .views-row{
                                                        width: 20% ;
                                                        min-width: 250px ;
                                                        max-width: 500px ;
                                                    }
                                                }
                                                
                                                @media (max-width: 810px){
                                                    padding-left: 2rem;
                                                    flex-direction: column;
                                                    .views-row{
                                                        width: 100%;
                                                    }
                                                } 
                                                .slick-next::before{
                                                    content:url("../images/pictos/fleche-droite-dans-rond.png");
                                                    display: block;
                                                }
                                                
                                                .slick-prev::before{
                                                    content:url("../images/pictos/fleche-droite-dans-rond.png");
                                                    display: block;
                                                    transform: scaleX(-1);
                                                    // display: none;
                                                }
                                                .slick-prev.slick-disabled::before,
                                                .slick-next.slick-disabled::before{
                                                    opacity: 0 !important;
                                                }
                                                .slick-next {
                                                    right: 10%;
                                                }
                                            }
                                        }                                                                          
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}