@font-face {
    font-family: 'Roboto Regular';
    src: local('Roboto'), local('Roboto-Regular'), url('/assets/font/Roboto/Roboto-Regular.ttf') format('truetype');
}


@font-face {
    font-family: 'Roboto Meduim';
    src: local('Roboto Meduim'), local('Roboto-Medium'), url('/assets/font/Roboto/Roboto-Medium.ttf') format('truetype');

}

@font-face {
    font-family: 'Roboto Black';
    src: local('Roboto Black'), local('Roboto-Black'), url('/assets/font/Roboto/Roboto-Black.ttf') format('truetype');

}


@font-face {
    font-family: 'Roboto Bold';
    src: local('Roboto Bold'), local('Roboto-Bold'), url('/assets/font/Roboto/Roboto-Bold.ttf') format('truetype');

}

/*
@font-face
font-family: 'Roboto'
src: local('Roboto Italic'), local('Roboto-Italic'), url('../fonts/Roboto-Italic.ttf') format('truetype')
font-weight: normal
font-style: italic

@font-face
font-family: 'Roboto'
src: local('Roboto BoldItalic'), local('Roboto-BoldItalic'), url('../fonts/Roboto-BoldItalic.ttf') format('truetype')
font-weight: bold
font-style: italic

@font-face
font-family: 'Roboto'
src: local('Roboto Light'), local('Roboto-Light'), url('../fonts/Roboto-Light.ttf') format('truetype')
font-weight: 300
font-style: normal

@font-face
font-family: 'Roboto'
src: local('Roboto LightItalic'), local('Roboto-LightItalic'), url('../fonts/Roboto-LightItalic.ttf') format('truetype')
font-weight: 300
font-style: italic

@font-face
font-family: 'Roboto'
src: local('Roboto Medium'), local('Roboto-Medium'), url('../fonts/Roboto-Medium.ttf') format('truetype')
font-weight: 500
font-style: normal

@font-face
font-family: 'Roboto'
src: local('Roboto MediumItalic'), local('Roboto-MediumItalic'), url('../fonts/Roboto-MediumItalic.ttf') format('truetype')
font-weight: 500
font-style: italic
*/
/* Roboto-Regular.ttf       400 */
/* Roboto-Bold.ttf          700 */
/* Roboto-Italic.ttf        400 */
/* Roboto-BoldItalic.ttf    700 */
/* Roboto-Medium.ttf        500 */
/* Roboto-MediumItalic.ttf  500 */
/* Roboto-Light.ttf         300 */
/* Roboto-LightItalic.ttf   300 */


/*--------------------------------------------*\
                    POPIN 
/*--------------------------------------------*/

/* ___________________________ */
/*        Popup Connexion      */
.popup-connexion .form-control {
    font-size: 14px;
}


/*-------------------------------------------------------------------------*\
                    MENU par défaut: Taille des caractères 1/3 
        Taille 2/3 = font-weight-12    |    Taille 3/3 = .font-weight-14
/*-------------------------------------------------------------------------*/

/* _______________________________________ */
/*        Menu Principal Utilisateur       */
.notConnected .mainnavheader {
    padding-right: 0;
}

.mainnavheader__menu {
    font-size: calc(var(--basePX) + 4px);
}

/* > fleche sous menu - Taille des caractères 1/3 */
    body.font-weight-12 .mainnavigation--fluid .menuitem_submenu:hover > .mainnavigation__link::before, 
    body.font-weight-14 .mainnavigation--fluid .menuitem_submenu:hover > .mainnavigation__link::before {
        top: 42px;
    }


/* > Menu Ordi seulement */
.menu-utilisateur {
    justify-content: space-between;
    align-items: center;
    flex-flow: row wrap;
    gap: 0.7em
}

.menu-utilisateur .onglet-groupe ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

#mainnavigation__wrapper .menu-principal .nav-item svg {
    padding: 0;
    height: 35px;
}

.onglet-favoris {
    background: var(--main-color_freelance);
    height: 67px;
    width: 67px;
    align-items: center;
    justify-content: center;
}
/* > //Menu Ordi seulement */

/* > Menu Ordi + Tablette */
.mainnavheader__menu--offline li {
    width: 145px;
}

.mainnavheader__menu--offline li.onglet-groupe {
    width: 300px;
}

.mainnavheader__menu--offline li a {
    width: 100%;
    padding: 8px 16px;
}

.menu-utilisateur.mainnavheader__menu--offline li.onglet-groupe ul li.onglet-inscription a.btn,
.menu-utilisateur.mainnavheader__menu--offline li.onglet-groupe ul li.onglet-connexion a.btn {
    line-height: 16px !important;
}

.onglet-profil .picto-profil svg  {
    width: 28px;
    height: auto;
    stroke: white;
}

.menu-utilisateur .onglet-message svg {
    width: 30px;
    height: auto;
}
/* > //Menu Ordi + Tablette */

/* > Code Condition GSM */
.menu-mobile .menu-utilisateur {
    flex-direction: row;
    width: 525px;
    margin: 0 auto;
    max-width: 535px;
}

.menu-mobile .menu-utilisateur li {
    width: 165px;
}

.menu-mobile .menu-utilisateur li:nth-of-type(2) {
    margin-top: .5rem;
    margin-bottom: .5rem;
}

.menu-mobile .menu-utilisateur li a.btn {
    line-height: 16px !important;
    padding: 8px 16px !important;
}

/* >> Condition Apparence = Taille des caractères 3/3 */
.font-weight-14 .menu-utilisateur {
    gap: unset;
}

body.font-weight-14 #mainnavigation__wrapper .menu-principal .onglet-formation .ssMenu-groupe  {
    bottom: 0 !important;
}
/* >> //Condition Apparence = Taille des caractères 3/3 */
/* > //Code Condition GSM */

/* > Condition Apparence = Taille des caractères 2/3 */
.menu-principal .nav {
    flex-wrap: nowrap;
}
/* > //Condition Apparence = Taille des caractères MOYEN */

/* > Condition Apparence = Taille des caractères 3/3 */
.font-weight-14 .menu-principal {
    flex-wrap: nowrap;
}

/* > //Condition Apparence = Taille des caractères GROS */

/*--------------------------------------------*\
                    FOOTER 
/*--------------------------------------------*/

footer nav {
    background-color: #F9F8F8;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-content: flex-start;
}

footer nav section {
    margin: 1.5em 0 0 1em;
}

footer nav section h2 {
    font-size: calc(var(--basePX) + 2px) !important;
    margin: 0;
    font-family: 'Roboto Black';
    font-weight: normal;
}

footer nav section .menu-footer {
    list-style: none;
    padding: 0;
    margin-bottom: 0;
}

footer nav section .menu-footer li {
    margin-top: 4px;
}

footer nav section .menu-footer a {
    font-family: 'Roboto Meduim';
    font-size: calc(var(--basePX) + 2px) !important;
    text-decoration: none;
    color: #212529;   
}

footer nav section .menu-footer a:hover {
    color: #212529;
}

footer .copyright {
    flex: 0 0 100%;
    font-family: 'Roboto Meduim';
    text-align: center;
    font-size: 13px;
    margin: 20px 0 0;
}



/*-------------------------------------------------------------------------*\
                  ** REFONTE ** MENU Milieu par défaut
        Taille 2/3 = font-weight-12    |    Taille 3/3 = .font-weight-14
/*-------------------------------------------------------------------------*/
.menu-principal.nav {
    flex-wrap: nowrap;
}

.menu-principal .onglet-formation {
    cursor: pointer;
}

.menu-principal .onglet-formation:hover::after {
    content: "";
    height: 65px;
    top: 0;
    left: 0;
    width: 100%;
    position: absolute;
    z-index: 1;
}

.menu-principal .onglet-mission, .menu-principal .onglet-ao,  .menu-principal .ssMenu-groupe {
    width: max-content;
}


/* ________________________ */
/* ======> ssMenu Formation */
.menu-principal .onglet-formation .ssMenu-formation {
    display: none;
}

.menu-principal .onglet-formation:hover .ssMenu-groupe,
.menu-principal .onglet-formation:hover .ssMenu-groupe::before,
.menu-principal .onglet-formation:hover .ssMenu-titre,
.menu-principal .onglet-formation:hover .ssMenu-formation {
    display: block;
}

.menu-principal .onglet-formation .ssMenu-titre {
    margin-bottom: 0;
}

.menu-principal .onglet-formation .ssMenu-formation {
    background: var(--main-color_formation) ;
    position: absolute;
    /* top: xxx; => variable' selon menu utilisateur et selon page et selon connecté */
    width: max-content;
    padding: 0.5em;
}

/* Utilisateur connecté & non connecté - Menu Principal - ssMenu Formation - Menu utilisateur sur 1 ligne */
.menu-principal .onglet-formation .ssMenu-formation {top: 53px;} 

/* Utilisateur connecté  + taille caractère 3/3 - Menu Principal - ssMenu Formation */
.font-weight-14 .menu-principal .onglet-formation .ssMenu-formation {   
    top: 56px;
}

.menu-principal .ssMenu-formation a {
    font-size: calc(var(--basePX) + 3px);
    color: var(--white);
    text-transform: uppercase;
    position: relative;
}

.menu-principal .ssMenu-formation a:hover {
    text-decoration: none;
}

.menu-principal .onglet-formation .ssMenu-formation::before { /*  petite fleche ssMenu Formation */
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    content: "";
    left: calc(36% - 13px);
    top: -12px;
    position: absolute;
    pointer-events: none;
    transform: rotate(90deg);
    border-right: 10px solid var(--main-color_formation);
} 
/* ======> ssMenu Formation */
/* ________________________ */


/*-------------------------------------------------------------------------*\
                  PAGE VOIR
/*-------------------------------------------------------------------------*/

/* ________________________________________________ */
/* ======> Fleches de consultation gauche & Droite  */

.voir-cartoucheHeader {
    justify-content: space-between;
}

.voir-cartoucheHeader div:nth-child(2) {
    flex: 0 0 69%;
}

.voir-cartoucheHeader .conteneur-arrowMission {
    padding-left: 0;
    min-width: 100px;
}

/* ======> Fleches de consultation gauche & Droite  */
/* ________________________________________________ */