#site-header{

    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 100000;

    width: 100vw;
    height: var(--header-h);
    padding: 0 var(--padding-body);

    background-color: transparent;
    border-bottom: var(--border);
    border-color: transparent;

    // display: grid;
    // grid-template-columns: 1fr;

    display: flex;
    align-items: center;
    justify-content: space-between;

    .burger svg{
        fill: var(--color-txt);
        width: 40px;
    }

  

    .site-title{
        display: flex;
        width: 120px;
        overflow: hidden;
        svg{
            fill: var(--color-txt);
            
        }
    }



    nav{
        height: 0;
        overflow: hidden;
        opacity: 0;
    }
    nav ul{
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2ch;
        list-style: none;
    }


    .header-left, .header-right{
        width: 100px;
    }


    .header-center{
  
        display: flex;
        flex-direction: column;
        align-items: center;

     
    }


    #go-to-panier{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 1ch;
        text-decoration: none;


        #go-to-panier__nbr{
        
            min-width: 2.6ch;
            height: 2.6ch;
            border-radius: 1.3ch;
            border: var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 6px;
        }
    }


    &.is-shrinked{
        background-color: var(--color-bg);
        height: var(--header-h-shrinked);
        transition: ease-in .3s;
        border-color: var(--color-txt);

        nav{
            height: var(--h-block);
            opacity: 1;
        }

        .site-title{
            opacity: 0;
            height: 0;
        }
    }
}