.header-promo{
    width: 100%;
    max-width: 100dvw;
    height: var(--height-header-promo);
    display: flex;
    justify-self: center;
    justify-content: center;
    align-items: center;
    background-color: var(--color2);
    font-size: calc(var(--font-size)/2.2);
    color: var(--color4);
    font-family: var(--secondaryFont);
    z-index: 999;
    position: fixed;
    cursor: pointer;
    top: 0; 
}
    .promo-wrapper {
        overflow: hidden;
        height: 100%;
        display: flex;
        align-items: center;
    }
    #promo-text {
        display: inline-block;
        transition: transform 0.5s ease;
        font-size: var(--font-size-header-promo);
    }
 

.section-header-menu{
    left: 50%;
    transform: translate(-50%, 0);
    height: var(--height-header-menu);
    display: flex;
    justify-content: space-between;
    top: calc(var(--height-header-promo) + var(--gap-top-header-menu));    
    z-index: 99999;
    position: fixed;
    gap: var(--gap-menu);
}


.header-menu{
    width: auto;
    height: auto;
    display: flex;
    flex-direction: var(--flex-direction-header-menu);
    padding: calc(var(--gap-menu)/calc(var(--ratio)*1.5));
    gap: calc(var(--gap-menu)/1.5);
    border-radius: var(--radius);
    backdrop-filter: blur(8px);

    box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -1px 0 rgba(255,255,255,0.15),
    0 10px 30px rgba(0,0,0,0.08);
}
    #header-menu-usds{background-color: var(--sable-opacity);}
    #header-menu-111{background-color: var(--bleu-111-opacity);}
    .header-menu a{display: contents; align-items: center}

    .logos-header{ 
        display: flex;
        justify-content: center;
        align-content: center;
        align-items: center;
        width: auto;
        height: 100%;
    }
        .logos-header img{
            width: auto;
            height: var(--height-header-main-logo-usds);
            cursor: pointer;
            transition: 0.2s;
        }
        /*.logos-header img:hover{transform: scale(102%);}*/
    
    .menu{
        display: flex ;
        flex-wrap: nowrap;  
        flex-direction: row;
        justify-content: var(--justify-content-menu);
        gap: calc(var(--gap-menu)/1.5);
        margin-block: 0;
        align-items: center;
        font-size: var(--font-size-header-menu);
    }
        .menu a{
            text-decoration: none;
        }

    .cta-menu{
        text-wrap: nowrap;
        transition: 0.2s;
        opacity: 60%;
    }
    .cta-menu.usds{
        font-family: DINA-CHAUMONT-TEXT-BOLD;
        color: var(--mer);
    }
    .cta-menu.jeu111{
        font-family: var(--principalFont111);
        color: var(--blanc);
    }
        .cta-menu:hover{opacity: 100%; translate: 0 -2px}

        .active{opacity: 100%;}