body {
    font-family: "Sofia Sans", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;  
}

.volet-overlay {
    position: fixed;
    top:0; left:0; right:0; bottom:0;
    background-color: #333;
    opacity: .5;
}

.volet {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: #FFFFFF;
    transition: .25s ease all;
}

.volet-client {
    width: 90%;
    right: -90%;
}

.volet-job {
    width: 80%;
    right: -80%;
}

.volet-tache {
    width: 70%;
    right: -70%;
}

.transition {
    transition: .35s ease all;
}

.w-33-desktop { width: 33%; }
.w-50-desktop { width: 50%; }
.w-66-desktop { width: 66%; }
.w-100-desktop { width: 100%; }

.desktop { display: inline; }

@media only screen and (max-width:1100px) {
    .w-33-desktop, .w-50-desktop, .w-66-desktop  { width: 100%; }
    .desktop { display: none; }
}