header[role="banner"]{
    display: flex;
    flex-direction: row;
    height: 100vh;
    width: 100%;
    z-index: 99;
    max-width: 100vw;
    position: fixed;
    top: 0;
    transition: none;
   
    // transition: height 2s ease-in-out, width 2s ease-in-out; /* Transition pour le changement de taille */
    // transition: height 0.3s, padding 0.3s; /* Add transition for smooth resizing */
    
    .language-switcher-language-url{
        text-transform: uppercase;
        color: white;

        ul{
            display: flex;
            flex-direction: row;   
            font-size:0.6rem;
            padding: 0;
            width: fit-content;

            @media(max-width: 810px){
                font-size: 00.9rem;      
            }
            // @media(max-width: 500px){
            //     flex-direction: column;
            //     // margin-bottom: 0;
            //     margin: auto;      
            // }
            li a {
                color: white;
                font-family: 'gilroy-light';

            }
            li:nth-child(1){
                &::after{
                    content: " / ";
                    white-space: pre;
                    @media(max-width: 660px){
                        // content:none ;      
                    }
                }
            }
            .is-active{
                font-family: 'gilroy-bold';
            }
        }
    }
    
    @media(max-width: 810px){
        height: 100vh;
        header {
            position: relative;
            flex-direction: column;
            height: auto !important;
          }
    }

    .contextual-region{
        width: max-content;
    }

    .header_left_container{
        flex: 0 0 100%;
        display: flex;
        flex-direction: row;
        transition: height 2s ease-in-out, width 2s ease-in-out; /* Transition pour le changement de taille */
        background-color: $white-header;
        img{display: none;}
        @media(max-width: 660px){
        height: inherit;
        }
        #block-quartiers-de-demain-logorepu-2{
        display: none;
            @media(max-width: 891px){
            height: $header-height-pad;
             }   
        }
        #block-quartiers-de-demain-logoepau-2{
        display: none;
        height: $header-height;
        @media(max-width: 891px){
            height: $header-height-pad;
        }

        }
        #block-quartiers-de-demain-logoquartiersdedemain{
            // padding-right: 5%;
            margin: auto;
            .field_field_logo{
                width: 90%;
                margin: auto;
                @media(max-width: 1650px){
                    width: 80%;
                }
                .qdd-header{
                    width: 100%;
                }
            }
        }
        img{
            width: auto;
            margin: auto;
            height: calc($header-height - 1rem);
            padding: 2rem;
            transition: height 0.3s; /* Add transition for smooth resizing */   
            @media(max-width: 891px){
            height: $header-height-pad;
        }
        @media(max-width: 660px){
            height: $header-height-small;
        }
        @media(max-width: 450px){
            height: $header-height-ultrasmall;
        }
        }
    }
    .header_right_container{
        display: none;
        flex: 0 0 0%;
        width: fit-content;
        min-width: fit-content;
        background: $blue_QDD;
        text-align: center;
        transform: translateX(0);
        transition: transform 0.3s ease-in-out;
        z-index: -1 ;
        position: fixed;
        right: 0;
        border-radius: 11px;
        padding: 0.5rem;
        margin: 1rem;
        padding-top: 0rem;
        padding-bottom: 0rem;


        @media(max-width: 660px){
            padding-right: 0;
        }
        .language-switcher-language-url{
            text-transform: uppercase;
            color: white;

            ul{
                display: flex;
                flex-direction: row;   
                font-size:0.6rem;
                padding: 0;

                @media(max-width: 660px){
                    margin-bottom: 0;      
                }
                @media(max-width: 500px){
                    flex-direction: column;
                    // margin-bottom: 0;
                    margin: auto;      
                }
                li a {
                    color: white;
                    font-family: 'gilroy-light';

                }
                li:nth-child(1){
                    &::after{
                        content: " / ";
                        white-space: pre;
                        @media(max-width: 660px){
                            content:none ;      
                        }
                    }
                }
                .is-active{
                    font-family: 'gilroy-bold';
                }
            }
        }
    }

    .header_nav_container{
        flex: 0 0 0%;
        width: 100%;
        min-width: fit-content;
        background: $blue_QDD;
        text-align: center;
        transform: translateX(0);
        transition: transform 0.3s ease-in-out;
        z-index: -1 ;
        display: flex;
        flex-direction: column;

        @media(max-width: 1090px){
            // text-align:left;
            // height: fit-content;
           
        }
        @media(max-width: 810px){
            height: 200px;
            top: -30px;
        }
        @media(max-width: 500px){
            flex: 0 0 40%;
        }
        #block-quartiers-de-demain-entete{
            margin: auto;
            h2{
                display: none;
            }
            ul {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                position: relative;
                padding-left: 1rem;
                padding-right: 1rem;
                margin: auto;
                // padding-top: 5%;
                @media(max-width: 1025px){
                    top: 0;
                    align-items: center;
                    padding-top: 0.3rem;
                }
                @media(max-width: 1090px){
                }
                li{
                    width: 100%;
                    text-align: left;
                    .is-active{
                        font-family: "gilroy-bold";
                    }
                    :hover{
                        font-family: "gilroy-bold";
                    }
                    @media(max-width: 1090px){
                        padding-top: 0.3rem;
                        
                    }
                    @media(max-width: 810px){
                        
                        line-height: 1.3rem;
                    }
                    
                    a{
                        text-transform: uppercase;
                        color: white;
                        font-size: 0.5rem;
                        @media(max-width:1090px){
                            font-size: 0.6rem;
                        }
                        @media(max-width: 810px){
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            font-size: 0.8rem;
                        }
                       
                    }
                    // &:not(:last-of-type){
                    //     ::after{
                    //         content: "";
                    //         display: block;
                    //         border-bottom: solid white 1px;
                    //         padding-bottom: 0.3rem;
                    //         width: 60%; /* Réduit la largeur du soulignement à 50% */
                    //         // margin: 0 auto; /* Centre le soulignement sous l'élément */
                    //     }

                    // }
                } 
            }
            @media(max-width: 660px){

            }
        }
        #block-quartiers-de-demain-selecteurdelangue{
            width: fit-content;
            margin: auto;
            @media(max-width: 810px){
                padding-bottom: 0.5rem;
                margin-bottom: 0.5rem;
                .links{
                    margin-top: 0.5rem;
                }
            }
        }
       
    }

  .header_nav_container.hidden {
    transform: translateX(30%);
  }

  .header_nav_container.visible {
    transform: translateX(0);
  }
    
  .header:hover + .header_nav_container {
    transform: translateX(0);
  }
}
.shrink{
    height: 260px ;
    @media(max-width: 810px){
        height: 170px;
       }
}
/* Taille définitive du header après l'animation */
header[role="banner"].header--collapsed {
    height: $header-height; /* Ou la hauteur que vous souhaitez pour votre header */
    width: 35%;
    transform-origin: bottom right; 
    transition: all 1s ease-in-out;
    @media(max-width: 1090px) {
        height: $header-height-pad;
    }
    @media (min-width: 1400px) {
        height: $header-height-big;
    }
    .qdd-header{
        opacity: 1 !important;
    }
    @media(max-width: 810px){
     width: 100%;
     height: 170px;
    }
    .header_left_container{
        flex: 1 0 65%;
        transform-origin: bottom right; 
        @media(max-width: 810px){
            flex: 1 0 100%;
        }
    }
    .header_nav_container{
        flex: 0 0 30%;
        transform-origin: bottom right; 
        min-width: fit-content;
        @media(max-width: 810px){
            flex: 1 0 100%;
            position: relative;
            left: -100%;
            // top: -45px;  /* a remettre et faire varier si ajoute éléments dans menu */

        }
    }
    
}
header[role="banner"].header--collapsed-already{
    height: $header-height; /* Ou la hauteur que vous souhaitez pour votre header */
    width: 35%;
    transform-origin: bottom right; 
    transition: all 0s ease-in-out;
    .qdd-header{
        opacity: 1 !important;
    }
    @media(max-width: 810px){
        width: 100%;
        // height: 170px;
       }
    @media (min-width: 1400px) {
        height: $header-height-big;
    }
    .header_left_container{
        flex: 1 0 65%;
        transform-origin: bottom right; 
        @media(max-width: 810px){
            flex: 1 0 100%;
        }
    }
    .header_nav_container{
        flex: 0 0 30%;
        min-width: fit-content;
        transform-origin: bottom right; 
        @media(max-width: 810px){
            flex: 1 0 100%;
            position: relative;
            left: -100%;
            // top: -75px;
        }
        @media(max-width: 550px){
            top: 0px;
        }
    }

}
