.menu-titre {
    grid-area: titre;
    text-align: center;
    margin-left: 12%;
}

#desc_Banner {
    color: var(--main-color);
    font-size: 30px;
    text-align: center;
    margin: 65px auto 50px auto;
    line-height: 50px;
    max-width: 800px;
    z-index: 4;
        position: relative;
 }


nav#menu_niveaux{ background: #737474; background: linear-gradient(to bottom, #737474 1%,#515353 100%); margin:0 0 20px 0;}
nav#menu_niveaux ul{list-style:none; display:flex; margin:0; padding:0;}
nav#menu_niveaux ul li{flex:1}
nav#menu_niveaux ul li a {
    display: block;
    text-align: center;
    font-size: 20px;
    border-left: 1px solid var(--dark-gray);
    line-height: 48px;
    color: var(--white);
    text-decoration: none;
}
nav#menu_niveaux ul li:first-child a{border-left:0;}
nav#menu_niveaux ul li a:hover, nav#menu_niveaux ul li a.selected{background: #515353; background: linear-gradient(to bottom, #515353 0%,#737474 100%);}

/* -- Menus et sous-menus -- */
section.sous-rubrique{margin:0 0 1px 0; position:relative;}
section.sous-rubrique>div {
    display: grid;
    grid-template-columns: 95% 5%;
    grid-template-areas: "titre support";
    font-size: 18px;
    line-height: 23px;
    font-weight: bold;
    color: var(--main-color);
    margin: 17px;
    background: var(--white);
    padding: 13px 51px 13px 16px;
    cursor: pointer;
    border: var(--main-color) solid;
    border-radius: 40px;
    align-content: center;
    justify-content: center;
    align-items: center;
    justify-items: center;
    grid-auto-flow: column;
}
section.sous-rubrique>div:hover {
    display: grid;
    grid-template-columns: 95% 5%;
    grid-template-areas: "titre support";
    font-size: 18px;
    line-height: 23px;
    font-weight: bold;
    color: var(--white);
    margin: 17px;
    background: var(--main-color);
    padding: 13px 51px 13px 16px;
    cursor: pointer;
    border: var(--white) solid;
    border-radius: 40px;
    align-content: center;
    justify-content: center;
    align-items: center;
    justify-items: center;
    grid-auto-flow: column;
}
section.sous-rubrique.exos div{background: #356aa0; background: linear-gradient(to bottom,  #356aa0 0%,#24476b 100%);}

section.sous-rubrique .support {
    font-size: 12px;
    color: var(--main-color);
    /*float:right;*/
    display: inline-block;
    grid-area: support;
}
section.sous-rubrique .support:hover {
    font-size: 12px;
    color: var(--white);
    /*float:right;*/
    display: inline-block;
    grid-area: support;
    background-color: var(--white);
}
section.sous-rubrique .openclose{/*float:right;*/ position:absolute; top: 18px; right:50px; width:28px; height:16px; background-image:url(../../../img/elements/action-triangle-down.png);}
section.sous-rubrique.selected .openclose {background-image:url(../../../img/elements/action-triangle-up.png);}

section.sous-rubrique ul{margin:0 0 0 0; list-style:none; display:none;}

section.sous-rubrique ul li>a.all {
    display: block;
    position: relative;
    padding: 14px 20px;
    margin-bottom: 1px;
    font-size: 16px;
    font-weight: bold;
    color: var(--white);
    text-decoration: none;
    text-shadow: 0px -1px 0px rgba(147, 147, 147, 1);
    background-color: #A4A4A4;
}

section.sous-rubrique ul li>span {
    display: block;
    position: relative;
    padding: 14px 25px;
    margin: 10px;
    font-size: 16px;
    font-weight: bold;
    color: var(--white);
    text-decoration: none;
    background-color: var(--white);
    cursor: pointer;
}
/* section.sous-rubrique ul li > a.all:hover,  */
/* section.sous-rubrique ul li > span:hover{background-color:#FF6600;} */
section.sous-rubrique ul li>span.selected {
    /*background-color:#FF6600;*/
    cursor: default;
    color: var(--main-color);
}

section.sous-rubrique ul li.rubrique_section>span {
    background-color: var(--main-color);
    padding: 20px 20px;
    font-style: italic;
    border-radius: 40px;
}

/*section.sous-rubrique ul li > span div.lvl{display:none;}*/
section.sous-rubrique ul li > span div.lvl{display:block;position:absolute;right:0;top:0;display:flex;padding:0;background:transparent;}

section.sous-rubrique ul li > span div.lvl span,
section.sous-rubrique ul li>span div.lvl a {
    display: block;
    text-shadow: none;
    text-align: center;
    color: var(--main-color);
    width: 0;
    height: 44px;
    line-height: 44px;
    text-decoration: none;
    transition: all 0.3s;
    overflow: hidden;
    margin: 0 5px 0 0;
    background: rgba(255, 255, 255, 0.9);
}
section.sous-rubrique ul li > span div.lvl span{background:rgba(255, 255, 255, 0.1); color:rgba(0, 0, 0, 0.15);}
section.sous-rubrique ul li > span.selected div.lvl span{width:55px;}
section.sous-rubrique ul li > span.selected div.lvl a{width:55px !important; width:auto;}
section.sous-rubrique ul li>span.selected div.lvl a:hover {
    color: var(--main-color);
    background-color: var(--white);
}


section.sous-rubrique ul li > span.engaged{background-image:url(../../../img/elements/check-black.png); background-repeat:no-repeat; background-position:4px 15px;}
section.sous-rubrique ul li > span.completed{background-color:#adc19a !important;background-image:url(../../../img/elements/check-white.png); background-repeat:no-repeat; background-position:4px 15px;}
section.sous-rubrique ul li>span.selected div.lvl a.engaged {
    background: #1356b8;
    color: var(--white);
    background-image: url(../../../img/elements/check-black.png);
    background-repeat: no-repeat;
    background-position: bottom 4px right 4px;
}

section.sous-rubrique ul li>span.selected div.lvl a.completed {
    background: #62a228;
    color: var(--white);
    background-image: url(../../../img/elements/check-white.png);
    background-repeat: no-repeat;
    background-position: bottom 4px right 4px;
}

section.sous-rubrique ul li ul li > span { padding:14px 30px !important; }