
#actualites{
    // background-color: #f6f7f3;
    // background-color:white !important;
    main{
        background-color:white ;
        padding-bottom: 0;
        @media(max-width: 810px){
            display: flex;
            flex-direction: column-reverse;
        }
    }
    .layout-container main{
        padding-top: $header-height-big;
    }
      
    .layout-content{
        // padding-top: 1rem;
        .content_container{
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: white;

            #block-quartiers-de-demain-titredepage{
                margin-top: 3rem;
                margin-left: 15%;
                margin-bottom: 4rem;
                width: 70%;
                @media(max-width: 810px){
                    display: flex;
                    margin:auto;
                    margin-top: 13rem;
                    margin-bottom: 4rem;
                }
                h1{
                    width: fit-content;
                    margin: auto;
                    text-transform: none;
                    color: black;
                    font-size: 2rem;
                    font-family: "gilroy-medium"
                }
                
                
            }
            .views-element-container{
                
                

                .view-rows-wrapper{
                    display: flex;
                    flex-direction: column;
                    flex-wrap: wrap;
                    background-color: white;
                    // margin-left: 20%;
                    
                    .views-row{
                        width: 60%;
                        margin-left: 30%;
                        font-size: 0.5rem;
                        margin-bottom: 2rem;
                        padding-bottom: 1rem;
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        @media(max-width: 810px){
                            margin-left: 5%;
                            width: 90%;
                        } 
                        &:not(:last-of-type){
                            border-bottom: solid black 0.5px;}
                        .node-type-actualite{
                            width: 85%;
                            // padding-bottom: 2rem;
                            
                            .content-wrapper-actu{
                                display: grid;
                                grid-template-columns: 1fr 2fr;
                                grid-template-rows: repeat(5 1fr);
                                @media(max-width: 810px){
                                    display: flex;
                                    flex-direction: column;
                                 }
                                .field_field_images{
                                   grid-column: 1;
                                   grid-row: 1 /span 5;
                                   width: 250px;
                                //    display: flex;
                                //    margin: auto;
                                    margin-right: 1rem;
                                    @media(max-width: 810px){
                                        margin-bottom: 1rem;
                                     }

                                   .actu-diaporama{
                                        // height: 150px;
                                        width: 100%;
                                        display: flex;
                                        flex-direction: row;
                                        align-items: center !important;
                                        margin:auto;
                                        margin-right: 1rem;
                                        .slick-list{
                                            margin: auto;
                                            padding-top: 0 !important;
                                            .cadre-img-zoom{
                                                display: flex;
                                                margin: auto;
                                                width: 250px;
                                                height: auto;
                                                img{
                                                    width: 100%;
                                                    height: auto;
                                                    object-fit: cover;
                                                    -moz-border-radius: 9px; /* pour Mozilla */
                                                    -khtml-border-radius: 9px; /* pour Safari et Chrome */
                                                    -webkit-border-radius: 9px; /* pour Safari sur Mac */
                                                    border-radius: 9px; /* CSS3 */
                                                    aspect-ratio: 4/5;
                                                }
                                            }
                                            blockquote.image-field-caption{
                                                display: none;
                                                margin: 0;
                                                p{
                                                    margin-top: 0;
                                                    font-size: 0.4rem;
                                                }
                        
                                            }
                                        }
                                        button{
                                            margin: auto;
                                            transform: none;
                                            top: 30%;
                                            height: 0;
                                            width: 0;
                                            &:before{
                                                transform: scale(0.4) !important;
                                                &:hover{
                                                    filter: brightness(1.75);
                                                }
                                            }
                                        }
                                        button.slick-next{
                                            right: 15% ;
                                            padding: 0;
                                        }
                                        button.slick-prev{
                                            left: 5%;
                                            padding: 0;
                                        }
                                    }
                                }
                                .field_field_type_d_actualite,
                                .field_field_date,
                                .field_field_site,
                                .field_title,
                                .field_body,
                                .field_field_liens{
                                   grid-column: 2;
                                   
                                }
                                .field_field_type_d_actualite{
                                    order: 2;
                                    // a{
                                    text-transform: uppercase;
                                    color: red;
                                    font-size: 0.6rem;
                                    font-weight: 600;
                                    display: inline-flex;
                                    align-items: center;
                                    padding-bottom: 0.1rem;
                                        &::before{
                                            content: "";
                                            display: inline-block;
                                            width: 16px; /* Ajuste la largeur */
                                            height: 16px; /* Ajuste la hauteur */
                                            background-image: url('../img/type-actu.svg');
                                            background-size: contain;
                                            background-repeat: no-repeat;
                                            // margin-right: 0.4rem;
                                            padding-right: 0.4rem;
                                        }
                                    // }
                                    
                                }
                                .field_field_date{
                                    order: 3;
                                    color: red;
                                    font-size: 0.6rem;
                                    font-weight: 600;
                                    display: inline-flex;
                                    align-items: center;
                                    // margin-left: 1rem;
                                    &::before{
                                        content: "";
                                        display: inline-block;
                                        width: 16px; /* Ajuste la largeur */
                                        height: 16px; /* Ajuste la hauteur */
                                        background-image: url('../img/date-actu.svg');
                                        background-size: contain;
                                        background-repeat: no-repeat;
                                        // margin-right: 0.4rem;
                                        padding-right: 0.4rem;
                                    }
                                }
                                .field_field_site{
                                    order: 4;
                                    margin-top: 0.2rem;
                                    a{
                                        color: red;
                                        font-size: 0.6rem;
                                        font-weight: 600;
                                        display: inline-flex;
                                        align-items: center;
                                        // margin-left: 1rem;
                                        padding-left: 0.1rem;
                                        
                                        &::before{
                                            content: "";
                                            display: inline-block;
                                            width: 10px; /* Ajuste la largeur */
                                            height: 17px; /* Ajuste la hauteur */
                                            background-image: url("../img/map_pointer.svg");
                                            background-size: contain;
                                            background-repeat: no-repeat;
                                            // margin-right: 0.4rem;
                                            padding-right: 0.5rem;
                                        }
                                    }
                                }
                                .field_title{
                                    order: 5;
                                    h2{
                                        font-size: 1.2rem;
                                        font-family: 'gilroy-medium';
                                        color: $blue_QDD;
                                    }
                                    a{
                                        // color: $blue_QDD;
                                        // pointer-events: none; 
                                        // cursor: default;
                                    }
                                }
                                .field_field_sous_titre{
                                    color: $blue_QDD;
                                    font-family: 'gilroy-light';
                                    font-size: 1.2rem;
                                }
                            
                                .field_body {
                                    order: 6;
                                    // padding-bottom: 2rem;
                                    opacity: 1 !important;
                                    transform:none !important;
                                    font-family: 'gilroy-light';

                                    p{
                                    font-size: 0.8rem;
                                    }
                                }
                                .links.inline{
                                    text-transform: uppercase;
                                    padding-left: 0;
                                    font-size: 0.7rem;
                                    font-family: "gilroy-bold";
                                    width: fit-content;
                                    display: inline-flex;
                                    align-items: center;
                                    a{
                                        width: 5em;
                                        display: block;
                                        overflow: hidden;
                                        white-space: nowrap;
                                    }

                                    &::after{
                                        content: "+";
                                        display: block;
                                        // width: 20px;
                                        padding-left: 0.4rem;
                                        font-size: 1.8rem;
                                        height: fit-content;
                                    }
                                }
                                .field_field_liens{
                                    order: 7;
                                    padding:0;
                                    width: fit-content;
                                    a{  
                                        display: flex;
                                        flex-direction: row;
                                        padding-left: 0.5rem;
                                        padding-top: 0.2rem;
                                        padding-bottom: 0.2rem;
                                        display: inline-flex;
                                        align-items: center;
                                        color: white;
                                        background: black;
                                        text-transform: uppercase;
                                        font-size: 0.6rem;
                                        margin-bottom: 0.5rem;
                                        svg{
                                            display: none;
                                        }
                                        &::after{
                                            display: inline-flex;
                                            content: url("../img/noun-arrow-to-right.svg");
                                            padding-right: 0.2rem;
                                            padding-left: 0.2rem;
                                            height: 25px;
                                            
                                        }
                                    }
                                    
                                }
                

                            }
                        }
                        .toggle-actualite {
                            display: block;
                            width: 40px;
                            height: 40px;
                            margin: 10px auto;
                            border: none;
                            background-color: transparent;
                            background-image: url("../img/fleche-bas.svg");
                            background-size: contain;
                            background-repeat: no-repeat;
                            background-position: center;
                            cursor: pointer;
                            transition: transform 0.3s ease;
                        }
                        
                        .toggle-actualite.open {
                            transform: rotate(180deg);
                        }
                    

                    }

                }
                footer .view-rows-wrapper{
                    width: 100%;
                    background-color: $background-gris;
                    padding-top: 2rem;
                    .field_title{
                        h2{
                            font-size: 1rem !important;                            
                        }
                    }
                    .field_field_sous_titre{
                        font-size: 1rem !important; 
                    }

                }
                
            }
            
        }
    }
}
