:root{
    --couleur-menu-niv0 : #333;
    --couleur-menu-niv1 : #555555;
    --couleur-menu-niv2 : #888888;
    --couleur-menu-niv3 : #AAAAAA;
    --couleur-menu-select: #26209e;
    --couleur-menu-texte: white;
}

@media screen and (min-width:1000px){
    :root{
        --marge-menu: 80px;
    }
}
@media screen and (min-width:800px) and (max-width:1000px){
    :root{
        --marge-menu: 40px;
    }
}

@media screen and (max-width:800px){
    :root{
        --marge-menu: 0;
    }
}


.topnavbar {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    overflow: hidden;
    background-color: var(--couleur-menu-niv0);
}
.topnavbar .subnavbar-btn, .topnavbar .entete_menu > div, .topnavbar.responsive .entete_menu > div{
    float: left;
    text-align: center;
    padding: 14px 16px;
}
.subnavbar-content div, .topnavbar a, .topnavbar .entete_menu > div, .topnavbar.responsive .entete_menu > div{
    font-size: 16px;
    color: var(--couleur-menu-texte);
    text-decoration: none;
}

.subnavbar_1, .subnavbar_2 {
    float: left;
    overflow: hidden;
}


.topnavbar .subnavbar-btn:hover{
    background-color: var(--couleur-menu-select);
}

.topnavbar .menu_moncompte .subnavbar-btn:hover{
    background-color: var(--couleur-menu-niv1);
}


/* The "responsive" class is added to the navbar with JavaScript when the user clicks on the icon. This class makes the navbar look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
    :root{
        --hauteur-bandeau-menu : 55px;
    }

    .masque-topnavbar{
        height:var(--hauteur-bandeau-menu);
    }
    .topnavbar{
        width:100vw;
        position:absolute;
        top: 0;
        left: 0;
        z-index:50;
    }
    .topnavbar > div, .topnavbar > a{
      display:none;
    }
    .menu_connect>i,.menu_connect>a>span{display: none;}
    .menu_connect>a{margin-left:15px;}
    .menu_connect i{font-size: 1.5rem;}
    /*
    .topnavbar.responsive a.icon-connect{
        position :absolute;
        right:0;
        top:0;
    }*/
    .topnavbar.responsive > div, .topnavbar.responsive > a{display: block;}
    .topnavbar.responsive {position:absolute;overflow-y:scroll;}
    .topnavbar.responsive a.icon-menu {
      position: absolute;
      left: 0;
      top: 0;
    }
    .topnavbar .corps_menu{display:block;}
    .topnavbar.responsive a {
      float: none;
      text-align: left;
    }
    .topnavbar{
        display:flex;
        flex-direction: column;
    }
    .corps_menu{
        display:flex;
        flex-direction: column;
        flex : 1 1 auto;
    }

    .topnavbar.responsive .subnavbar_1-content{
        display:flex;
        flex-direction: column;
    }

    .topnavbar.responsive .corps_menu{
        display:flex;
        flex-direction: column;
    }
    .topnavbar.responsive .subnavbar_1{
        display:flex;
        flex-direction: column;
        align-items:baseline;
    }

    .topnavbar.responsive .subnavbar_2{
        display:flex;
        flex-direction: column;
        align-items:baseline;
    }

    .topnavbar.responsive .subnavbar_2-content{
        display:flex;
        flex-direction: column;
    }
    .topnavbar.responsive .subnavbar_3{
        display:flex;
        flex-direction: column;
    }

    .topnavbar.responsive .subnavbar_2 {
        margin-left: 30px;
    }
    .topnavbar.responsive .subnavbar_3 {
        margin-left: 30px;
    }

    .topnavbar .subnavbar_3-ferme .subnavbar_3-content{
        display:none !important;
    }
    .topnavbar .subnavbar_2-ferme .subnavbar_2-content{
        display:none !important;
    }
    .topnavbar .subnavbar_1-ferme .subnavbar_1-content{
        display:none !important;
    }
    .topnavbar.responsive .subnavbar-content{
        margin-top:0 !important;
    }
    .topnavbar.responsive .subnavbar-btn{
        text-align: left !important;
    }

    .topnavbar.responsive .ecr_reduit_menu_masq{
        display:none;
    }
} 






/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the navbar (.icon) */
@media screen and (max-width: 600px) {
    /*.topnavbar a:not(:first-child) {display: none;}*/
    .topnavbar .corps_menu{display:none;}
    .topnavbar .entete_menu{
        float:left;
        width:100%;
        display:block;
    }
    .entete_menu .icon-menu {
      float: left;
      display: block;
    }
    .entete_menu .menu_connect{
        float: right !important;
        display:block;
    }
    .entete_menu .nom_site{
      float:left;
      display:block;
    }
}

/* écran de plus de 600 pixels de large */
@media screen and (min-width:600px){
    :root{
        --hauteur-bandeau-menu : 55px;
    }

    .topnavbar{
        position:fixed;
        z-index:50;
        left: var(--marge-menu);
        width:calc(100vw - 2 * var(--marge-menu));
        /*left: -80px;*/
    }

    /*.subnavbar_1-btn{
        background-color: var(--couleur-menu-niv1);
    }*/
    .topnavbar{
        background-color: var(--couleur-menu-niv0);
    }
    .subnavbar_1-content{
        background-color: var(--couleur-menu-niv1);
    }
    .subnavbar_2-content{
        background-color: var(--couleur-menu-niv2);
    }
    .subnavbar_3-content{
        background-color: var(--couleur-menu-niv3);
    }

    .topnavbar .icon-menu, .topnavbar .nom_site {
      display: none;
    }

    .subnavbar_1-content, .subnavbar_2-content{
        display: none;
    }


    .subnavbar_1, .masque-topnavbar{
        height:var(--hauteur-bandeau-menu);
    }
    .subnavbar_1-content{
        top:var(--hauteur-bandeau-menu);
        position: fixed;
        max-width:calc(100vw - 2 * 80px);
    }
    .subnavbar_2{
        height:55px;
    }
    .subnavbar_2-content{
        top:55px;
        position:absolute;
    }
    .menu_moncompte .subnavbar_2{
        height:unset;
    }

    .subnavbar_1:hover .subnavbar_1-content {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }
    .subnavbar_1-content{
        z-index: 51;
    }

    .subnavbar_0:hover, .subnavbar_1:hover, .subnavbar_2:hover {
        background-color: var(--couleur-menu-select);
    }

    .subnavbar_2:hover .subnavbar_2-content{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .subnavbar_3{
        display:flex;
        flex-direction: column;
        flex-wrap: wrap;
    }

    .subnavbar_2-content{
        z-index: 52;
    }

    .subnavbar-content{
        flex: 1 1 auto;
        text-align: left;
    }

    /* déplacement des menus panier et cmoncopmte à droite */
    .topnavbar .menu_minipanier, .topnavbar .menu_moncompte{
        float:right;
    }
    /* masquage du menu pour petit écran (car on est ici en gd écran */
    .topnavbar .entete_menu{
        display:none;
    }
    .menu_moncompte .subnavbar-content{
        align-items: center;
    }

    .menu_moncompte.subnavbar_1:hover .subnavbar_1-content, .menu_minipanier.subnavbar_1:hover .subnavbar_1-content{
        display:flex;
        flex-direction: column;
        height:unset;
    }
}


.banner.style1.fullscreen{
    min-height:calc(100vh - var(--hauteur-bandeau-menu)) !important;
}


.banner.style1 .image img , .banner.style1 .image picture {
    /* height: calc( 100vh - 70px) !important;*/
  }

.subnavbar-btn span{
    white-space: nowrap;
}

/* Menu sans lien */
.topnavbar a:not([href]):hover {
    background-color: var(--couleur-menu-select);
}

/** Spécificité zones */
.menu_zone_innacces::before{
    content: "🔒";
}

.menu_zone_inactive{
    font-style: italic;
}