header{
    position: absolute;
    top:0px;
    left:0px;
    width: 100%;
    z-index: 1;
}

header>.bar{
    position: absolute;
    top:0px;
    left:0px;
    width: 100%;
    height: var(--header_bar_h);
    z-index: 4;
    background-color: var(--color_bleufonce_neomedia);
    
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--header_separateur_ecart);
}

header>.bar>span{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--header_separateur_ecart);
    line-height: 1;
    color: var(--color_grisfonce_neomedia);
}

header>a[class*="menu"]{
    position: absolute;
    top:calc(var(--header_bar_h) + var(--header_bar_h)/2);
    right:var(--header_logo_ecart);;
    width: var(--header_bouton_h);
    height: var(--header_bouton_h);
    z-index: 3;
    display: none;
    transform: rotate(0deg);

    transition-property: color,transform;
    transition-duration:var(--anim_time2);
    transition-timing-function:var(--anim_ease);
    transition-delay: var(--anim_delay);
}
header>a[class*="menu"]:hover,
header>a[class*="menu"][class*="selected"]{color: var(--color_rosefonce_neomedia);transform: rotate(90deg);}

header>a[class="logo"]{
    position: absolute;
    width: var(--header_logo_L);
    height: var(--header_logo_H);
    top: calc(var(--header_bar_h) + (var(--header_menu_h) - var(--header_logo_H))/2 );
    left: var(--header_logo_ecart);
    z-index: 2;

    background-image:var(--header_logo_file);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: auto 100%;
    aspect-ratio: 1 / 1;
    opacity:1;

    transition-property: opacity;
    transition-duration:var(--anim_time2);
    transition-timing-function:var(--anim_ease);
    transition-delay: var(--anim_delay);
}
header>a[class="logo"]:hover{opacity:.5;}



header>.fond{
    position: absolute;
    top:var(--header_bar_h);
    left:0px;
    width: 100%;
    height: var(--header_menu_h);
    background-color: var(--color_grisclaireplus_neomedia);
    z-index: 0;
}

header>.main{
    position: absolute;
    top:var(--header_bar_h);
    left:0px;
    width: 100%;
    height: var(--header_menu_h);
    z-index: 1;

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






@media (min-width: 580px) and (max-width: 730px) {

    header>.bar span:first-of-type {
        display: none;
    }

}
@media (max-width: 580px) {

    header>.bar span:first-of-type {
        display: none;
    }
    
    header>a[class*="menu"]{
        display: flex;
        align-items: center;
        font-size: var(--header_bouton_h);
        text-decoration: none;
    }
    
    header>.main{
        top:0px;
        left:0px;
        width: 100%;
        height: 100%;
        z-index: 5;
    }
}