:root {
    --primary-color: #3F7343;
    --secondary-color :#06668C;
    --nav-color : #427AA1;
    --nav-txt-color : #EBF2FA;
    --fond : #427AA1;
    --txt-main : #EBF2FA;
    --h4 :#cce90d;
    --h5: #afc522;
}

/*  DIV GAUCHE  */
.navigation {
    background-color: var(--secondary-color);
    position: sticky;
    top: 56px; /* */
    /*padding-top: 20px;*/
    /*left: 0;*/
    width: 20%;
    height: calc(100vh - 56px);
    /*height: calc(100vh - 0px);*/
    overflow-y: auto;
}

/*sur le nav*/
.nav-link:hover{
    background-color: var(--h5);
}

.contenue{
    padding: 20px;
}


.nav-pills .nav-link.active {
    background-color: var(--nav-color);
    /*color: white;*/
}
.nav-pills .nav-link{
    color: var(--nav-txt-color);
}

/*  RESPONSIVE  */
@media (max-width: 770px) {
    .navigation {
        display: none;
    }

    /*.contenue {
        margin-left: 10%;
    }*/
}
div.formation div:hover{
    background-color: var(--secondary-color);
    border-left: var(--h4) solid 5px;
}

/*  photo de profil */
.pp {
    /*box-shadow : 0 0 30px var(--h4),
	15px 0 30px var(--primary-color),
	-15px 0 30px var(--secondary-color);*/
    height: 175px;
    width: 175px;
    display: flex;
    margin: auto;
    border: solid var(--h5) 5px;
    border-radius: 50%;  
}
.pp:hover{
    box-shadow : 0 0 30px var(--h4),
	15px 0 30px var(--primary-color),
	-15px 0 30px var(--secondary-color);
}