.header{
    background-color: var(--principal);
    display:flex;
    flex-direction: row;
    position:fixed;
    top:0;
    right: 0;
    left:0;
    height:86px;
    box-shadow:0px 2px 4px rgba(0,0,0,0.1);
    z-index:2;
    justify-content: center;
    transition: all 250ms ease;
}

.centrer{
    justify-content: space-between;
}

.marginheader{
    padding:0.5rem;
}

.blocs{
    margin: 0 1rem 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-around;

    
}

.jambon-beurre{
    
    margin: 0 1rem 0 1rem;
    display:grid;
    align-items: center;
    justify-content: space-around;

    span{
        margin:2.5px;
        height:5px;
        width:30px;
        background-color: var(--psombre);
        transition: all 500ms ease;
    }

    
}

.jambon-beurre.active {
    span:nth-child(1){
        transform: translateY(6px) translateX(2.5px);
        
        width:25px;
    }
    span:nth-child(2){
        transform: rotate(90deg);
        transition: all 500ms ease;
    }
    span:nth-child(3){
        opacity: 0;
        transition: all 500ms ease;
    }

    
}

.jambon-beurre:hover{
    span{background-color: rgba(44, 44, 44, 0.60);}
}

.menu{
    backdrop-filter: blur(15px);
    left:0px;
    top:86px;
    transform: translateX(-300px);
    z-index:-10;
    background: rgba(44, 44, 44, 0.75);
    border-radius: 20px;
    height:fit-content;
    width:fit-content;
    position: absolute;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(15px);
    justify-content: center;
    opacity:1;
    transition: all 500ms ease;
    pointer-events: none;
}

.menu.active{
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0px);
}

.accueil{
    display:flex;
    align-items: center;
    -webkit-user-select: none;
    user-select: none;
    text-decoration: none;
}
.accueil:hover{
    background-color: var(--p1);
    
    height:68px;
    
}
.barrepetite{
    width:100%;
}

.barregrande{
    min-width: 1100px;
}

.barrepetite, .barregrande{
    display:none;
    transition: all 1s ease;
}

@media(min-width: 1080px) {
    .barregrande{
        display:flex;
    }   
}

@media(max-width: 1080px) {
    .barrepetite{
        display:flex;
    }
}

@media(max-width:755px){
    .stras{
        display:none;
    }
    .espace1{
        display:grid;
        justify-content: center;
    }
    .accueil{
        
        h1{
            font-size:5vw;
        }
        img{
            height:4.5vw;
        }
    }
    .blocs{
        margin: 0 0.4vh 0 0.4vh;
    }
}