.progressBarreContainer{

    width:80%;
    background-color:#ddd;
    border-radius: var(--main-border-radius);
    overflow: hidden;;
    transform: translateY(50%);
    margin: auto; /* centrage simple sans transform */

}

.skill{
    width:100%;
    height:10px; 
    text-align:right;
    color:white;
    font-size: 0.5em;
    background-color: rgb(21, 253, 40);
}

.cpp{ width: 100%; }
.csharp{ width: 90%; }
.fr{ width: 80%;}
.java{ width: 80%; }
.c{ width: 70%;}
.en{ width: 50%;}
.javascript{ width: 40%;}
.html{ width: 30%;}
.python{ width: 30%;}


@media (max-width: 768px){
    .progressBarreContainer{
        width:50%;
    }
    .skill{
        height:5px; 
    }

}