main{
    background-color: #f6f7f3;
}
#lesprojets{
    #header_right_container{
        visibility: hidden !important;
    }
    .content_container{
        // background-color: red;
        display: flex;
        flex-direction: column;
        align-items: center;
        #block-quartiers-de-demain-titredepage{
            margin-top: 1rem;
            width: fit-content;
            margin-left: 10%;
            margin: auto;
            // padding-left: 20%;

            @media(max-width: 810px){
                margin-top: 14rem;
                grid-column: 2 /span 9;
                padding-left: 0%;
            } 

            h1{
                text-align: center;
                text-transform: none;
                color: $blue_QDD;
                font-size: 2rem;
                font-weight: 500;
            }
        }
        .views-element-container{
            width: 90%;
          
            .views-row{
                display: flex;
                flex-direction: row;
                border-top: solid 1px $blue_QDD;
                padding-top: 2rem;
                margin-left: 2rem;
                margin-right: 2rem;
                $sites-pictos: (
                    marseille: "marseille.svg",
                    sedan: "sedan.svg",
                    lodève: "lodeve.svg",
                    colmar: "colmar.svg",
                    manosque: "manosque.svg",
                    pessac: "pessac.svg",
                    corbeil-essonnes: "corbeil-essonnes.svg",
                    caen: "caen.svg",
                    le-mans: "le-mans.svg",
                    coulommiers: "coulommiers.svg"
                    );
                  
                .views-field-group {
                    width: 18%;
                    margin-bottom: 2rem;
                    font-size: 0.4rem;
                    position: relative;
                    @media(max-width: 810px){
                        font-size: 1rem;   
                    }
                    transition: transform 0.4s ease-in-out; 
                    &:hover {
                        transform: scale(1.05); 
                        }
                    &::before {
                        content: "";
                        position: absolute;
                        top: -1rem;
                        left: -1rem;
                        width: 3rem;
                        height: 3rem;
                        background-repeat: no-repeat;
                        background-position: center;
                        background-size: contain;
                        pointer-events: none;
                        opacity: 0; // par défaut caché
                    }

                    // Pour chaque site, on applique juste le bon pictogramme
                    @each $name, $file in $sites-pictos {
                        &.#{$name}::before {
                        background-image: url("../img/pictos_sites/#{$file}");
                        opacity: 1;
                        }
                    }
                 
                    .views-field-title{
                        h2{
                            margin: 0;
                            color: $blue_QDD;
                                font-family: "gilroy-bold";
                                padding-top: 0.5rem;    
                                font-size: 0.55rem ;
                                @media(max-width: 550px){
                                    font-size: 0.7rem ;
                                }
                            a{
                                color: $blue_QDD;
                                font-family: "gilroy-bold";
                                padding-top: 0.5rem;    
                                font-size: 0.55rem ;
                                @media(max-width: 550px){
                                    font-size: 0.7rem ;
                                }
                            }
                        }
                    }
                    .views-field-field-images .field-content img{
                        width: 100%;
                        height: auto;
                        aspect-ratio: 3/2;
                        object-fit: cover;
                    }
                    .views-field-view-node{
                        visibility: hidden;
                        width: fit-content;
                        padding-left: 0.5rem;
                        background: black;
                        margin-top: 0.5rem;
                        @media (max-width:810px) {  
                            margin-left: 0;
                        }
                        a{
                            display: inline-flex;
                            justify-content: space-between;
                            align-items: center;
                            color: white;
                            text-transform: uppercase;
                            font-size: 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;
                                // padding-bottom: 0.2rem;
                                height: 25px;
                            }
                        }  
                    }
                }
                .views-field-field-projets-lie{
                        width: 70%;
                        padding-left: 0;
                        margin: auto;
                        align-content: space-between;
                        margin-right: 0;
                        margin-top: 0;
                        margin-bottom: 0;
                        div{
                            background-color: #f6f7f3;
                           
                        }
                       
                    .field-content{
                        ul{
                            display: flex;
                            flex-direction: row;
                            margin-top: 0;
                            li{
                                display: flex;
                                justify-content: end;
                                .node-type-projet{
                                    font-size: 0.4rem;
                                    width: 80%;
                                    transition: transform 0.4s ease-in-out; // animation plus fluide
                                    &:hover {
                                        transform: scale(1.05); /* effet de zoom léger */
                                    }
                                        position: relative;
                                        &.is-laureat{
                                            z-index: 0;
                                            
                                        }
                                        &.is-laureat::before {
                                            content: "";
                                            position: absolute;
                                            // display: block;
                                            top:-1.3rem;
                                            left: -1.3rem;
                                            width: 2.5rem;
                                            height: 2.5rem;
                                            // background-color: #f6f7f3;
                                            background-image: url("../img/laureat-ouvert.svg");
                                            background-repeat: no-repeat;
                                            background-position: center;
                                            background-size: contain;
                                            z-index: 0;
                                            
                                        }
                                   
                                    div{
                                        display: flex;
                                        flex-direction: column;
                                        
                                    }
                                    .field_field_image{
                                        order: 2;
                                        img{
                                            width: 100%;
                                            height: auto;
                                            aspect-ratio: 3/2;
                                            object-fit: cover;
                                        }
                                        .image-field-caption{
                                            display: none;
                                        }
                                    }
    
                                    .field_field_laureats{
                                        order: 1;
                                        font-size: 0px;
                                    }
                                    .node-projet-title{
                                        order: 3;
                                        font-size: 0.6rem;
                                        margin-bottom: 0.3rem;
                                        margin-top: 0.3rem;
                                        font-family: "gilroy-bold";
                                        @media(max-width: 810px){
                                            font-size: 1rem;   
                                        }
                                    }
                                    .field_field_nom_de_l_equipe{
                                        order: 4;
                                        h3{
                                            font-size: 0.5rem;
                                            margin: 0;
                                            text-transform: uppercase;
                                            @media(max-width: 810px){
                                                font-size: 0.8rem;   
                                            }
                                        }
                                    }
                                    .field_field_intro{
                                        order: 5;
                                        display: none;
                                        p{
                                            font-size: 0.5rem;
                                            font-family: "gilroy-light";
                                            margin-top: 0;
                                        }
                                        .more-link{
                                            display: none;
                                        }
                                    }
                                    
                                }
                            } 
                            
                        }
                    }
                }
            }

            @media (max-width: 768px) {
                /* Conteneur global = carrousel horizontal */
                .views-row {
                    display: flex;
                    overflow-x: auto;
                    gap: 1rem;
                    padding: 1.5rem 1rem 2rem;
                    scroll-snap-type: x mandatory;
                    -webkit-overflow-scrolling: touch;
                    margin: 0;
                    .views-field-group{
                        flex: 0 0 90%;
                        
                    }
                    .views-field-group::before{
                            // top: -0.5rem !important;
                            // left: -0.5rem !important;
                            width: 4rem;
                            height: 4rem;
                            padding-left: 2rem !important;
                        
                    }
                }
              
                /* Masquer les barres de défilement */
                .views-row::-webkit-scrollbar {
                  display: none;
                }
                .views-row {
                  -ms-overflow-style: none;
                  scrollbar-width: none;
                }
              
                /* Chaque "carte" du carrousel (site + projets) */
                .views-field-group,
                .views-field-field-projets-lie li,
                .views-field-field-projets-lie .node-type-projet {
                  flex: 0 0 130%;              /* largeur identique pour tous */
                  scroll-snap-align: start;
                  box-sizing: border-box;
                }
              
                /* Harmonisation du style visuel */
                .views-field-group,
                .views-field-field-projets-lie .node-type-projet {
                  padding: 1rem;
                }
                
                
              
                /* La liste UL des projets devient horizontale */
                .views-field-field-projets-lie {
                    ul {
                        display: contents; /* On laisse les LI se comporter comme des enfants directs du carrousel */
                        list-style: none;
                        padding: 0;
                        margin: 0;
                        li {
                            margin: 0;
                            padding: 0;
                          //   width: 110% !important;
                            .node-type-projet {  
                                flex: 0 0 105%;
                            }
                            .node-type-projet::before{
                            //    top: -0.5rem !important;
                                left: -0.5rem !important;
                                width: 2rem !important;
                                height: 4rem !important;
                                padding-left: 2rem !important;
                            
                        }
                        }
                    }
                }
            }
              
              
            
        }
    }
}

