header{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    // grid-gap: 10px;
    grid-template-rows: repeat(3, 1fr);
    height: $header-height;
    background-color: $white-header;
    z-index: 99;
    width: 38vw;
    max-width: 100vw;
    // position: fixed;
    top: 0;
    border: 1px solid #808080;
    // @media (max-width:810px) {
    //         // width: 800px;
    //         height: $header-height-pad;
    // }
    // @media(max-width: 660px){
    //     height: $header-height-small;
    // }
    // @media(max-width: 450px){
    //     display: flex;
    //     height: $header-height-ultrasmall;
    // }
    .contextual-region{
        width: max-content;
    }

     .header_left_container{
         grid-column: 1 /span 11;
         grid-row: 1 /span 3;
        display: flex;
        flex-direction: row;
         border-right: 1px solid #808080;
         padding-left: 2%;
         padding-right: 2%;
         @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{
            //  margin-left: auto;
             padding-right: 5%;
             margin: auto;

         }
         img{
             width: auto;
             margin: auto;
             height: $header-height;
             @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{
        margin: auto;
        @media(max-width: 660px){
            padding-right: 0;
        }
        .language-switcher-language-url{
            text-transform: uppercase;
            ul{
                display: flex;
                flex-direction: row;   
                font-size: $font-normal;
                padding: 0;
                @media(max-width: 660px){
                    margin-bottom: 0;      
                }
                @media(max-width: 500px){
                    flex-direction: column;
                    // margin-bottom: 0;
                    margin: auto;      
                }
                li:nth-child(1){
                    &::after{
                        content: " / ";
                        white-space: pre;
                        @media(max-width: 660px){
                            content:none ;      
                        }
                    }
                }
               
                .is-active{
                    font-weight: 600;
    
                }

            }
                        
        }
     }

    .header_nav_container{
        display: none;
        grid-row: 3;
        grid-column: 1 /span 12;
        // position: absolute;
        top: 100%; 
        width: 100%;
        background: $bleu_fond_header;
        border-bottom: 1px solid #808080;
        border-top: 1px solid #808080;
        font-size: $font-big;
        text-align: center;
        #block-quartiers-de-demain-entete{
            grid-column: 1 /span 11;
            order: 2;
            margin: auto;
            h2{
                display: none;
            }
            @media(max-width: 660px){

            }
        }
    }
    
    .display-nav-opened{
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-gap: 10px;
    }

    
    .open-block, .open-block.opened{
        cursor:pointer;
        span{
            display: block;
            width: 58px;
            height: 2px;
            position: relative;
            background: black;
            border-radius: 3px;
            z-index: 1;
            @media(max-width: 660px){
                width: 25px;
            }
        }
    }
    .open-block{
        height: 100%;
        display: grid;
        align-items: center;
        margin: auto;
        @media(max-width: 450px){
            height: $header-height-ultrasmall;
        }
        span{
            margin-bottom: 13px;	
            transform-origin: 4px 0px;
            @media(max-width: 660px){
                margin-bottom: 5px;
            }
        }

    }
    .open-block.opened {
        margin: auto;
        span {
            transform-origin: center;
            margin-bottom: 0;
        }
        &>div>span:first-child {
            transform: translateY(57%) rotate(45deg);
        }
        &>div>span:nth-child(2) {
            transform: rotate(-45deg);
        }
        &>div>span:nth-child(3) {
            display: none;
        }

    }
    
}