/* MENU A ONGLETS - NOUVELLE VERSION */
nav.subnav-2020 {
    display: block;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden; 
    white-space: nowrap;
    color: #4a4a4a;
    color: var(--darkgrey-color);
}
nav.subnav-2020 > ul {
    display: block;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid #d8d8d8; /* pour IE */
    border-bottom: 1px solid var(--mediumgrey-color);
    font-family: LatoRegular, Arial, sans-serif; /* pour IE */
    font-family: var(--text-font);
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}
nav.subnav-2020::-webkit-scrollbar-track, nav.subnav-2020 > ul::-webkit-scrollbar-track,
nav.subnav-2020::-webkit-scrollbar-thumb, nav.subnav-2020 > ul::-webkit-scrollbar-thumb { background: transparent; }

h1 + nav.subnav-2020 { margin-top: 3rem; }
.subnav-2020 .subnav__item {
    display: inline-block;
    border: none;
    position: relative;
    margin: 0;
    text-align: center;
    height: auto;
    padding: 0;
    vertical-align: bottom;
}
.subnav-2020 .subnav__link {
    display: block;
    border: none;
    position: relative;
    margin: 0;
    text-align: center;
    height: auto;
    padding: 1.4rem 1.8rem;
    font-size: 1.6rem;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    color: #4a4a4a;
    color: var(--darkgrey-color);
    overflow:hidden;
    vertical-align: bottom;
}
.subnav-2020 .subnav__link:first-letter {
    text-transform: uppercase;
}
.subnav-2020 .subnav__link:focus {
    background-color: transparent;
    color: inherit;
    outline: 3px double #17479e;
    outline-offset: -3px;
}
.subnav-2020 .subnav__link:hover, .subnav-2020 .subnav__link.subnav__link--active {
    color: #17479e;
    color: var(--primary-blue-color);
    background-color: transparent;
    font-weight: inherit;
}

/* souligné actif */
.subnav-2020 .subnav__link:before {
    content:"";
    position: absolute; left:-101%; bottom:0;
    width:100%; height:4px;
    background-color: #17479e;
    background-color: var(--primary-blue-color);
    border-radius: 2px;
}
.subnav-2020 .subnav__link:hover:before, .subnav-2020 .subnav__link.subnav__link--active:before {
    left:0;
}

nav.navOperation {
	margin-top: 3rem;
	margin-bottom: 4rem;
}

/* pour DSK */
@media only screen and (min-width: 939.5px) {
	.subnav-2020 .subnav__link br { display: none; }
}

/* pour TAB */
@media only screen and (min-width: 767.5px) and (max-width: 939.5px) {
	.subnav-2020:not(#menu-navigation-2020-ccp) .subnav__link br { display: none; }
}

@media only screen and (max-width: 767.5px) {
	.navigationConsulterResponsive { display: none; }
	.navigationConsulterResponsive + nav.subnav-2020 { display: block; visibility: visible; }
    nav.subnav-2020 {
        min-width: 100%;
        margin: 1.5rem 0 2rem;
    }
    nav.subnav-2020.endOfScroll {
        margin-right: 0;
    }
    nav.subnav-2020 > ul {
        min-width: 100%;
    }
    .subnav-2020 .subnav__link {
        font-size: 1.6rem;
        padding: 1.1rem;
        min-height: 0;
        height: auto;
        width: auto;
        display: inline-block;
    }
    #main>.subnav-2020 .subnav__link {
        min-height: 4rem;
    }
    .consulter .subnav-2020 .subnav__link {
        padding: 1rem 1.6rem;
    }
    
    /* et c'est là que le drame commence. l'affichage scrollable veut qu'il n'y ait pas de marge de 10px au bord de l'écran lorsqu'il reste des onglets à scroller.
    s'ensuit tout un tas de manipulations combinées à JS pour que ça fasse ce qu'il faut dans tous les cas, et c'est pas simple... */
    nav.subnav-2020.toCheckSize > ul {
        width: fit-content;
    }
    nav.subnav-2020.scrollableTabs {
        margin: 1.5rem -1rem 2rem;
    }
    nav.subnav-2020.scrollableTabs > ul {
        width: fit-content;
        border:none;
        display: flex;
    	align-items: flex-end;
    }
    .subnav-2020.scrollableTabs .subnav__item {
    	border-bottom: 1px solid #d8d8d8; /* pour IE */
    	border-bottom: 1px solid var(--mediumgrey-color);
    }
    .subnav-2020.scrollableTabs .subnav__item:first-child {
    	margin-left: 1rem;
    }
    .subnav-2020.scrollableTabs .subnav__item:last-child {
    	margin-right: 1rem;
    }

}