/******** COURSE PAGE PRESENTATION ********/
#bouton-menu{
    display: none;
}
#bouton-menu:checked + .sommaire{
    left: -300px;
}
#bouton-menu:checked ~ .contenu{
    left: 0px;
    width: 90%;
}
.sommaire{
    position: absolute;
    left: 0px;
    width: 300px;
    padding: 0;
    margin:0;
    background-color: /*#e8e8e8;*/#9ab5c4;
    transition: left 0.25s;
    z-index: 10000;
    border-radius: 0 10px 10px 0;
}
.sommaire h2{
    text-align: center;
    font-size: 24px;
    font-weight: 500;
    color: #424558;/*#FFF #767676;*/    
}
.sommaire h3{
    text-align: left;
    padding: 0px 0px 0px 15px;
    font-size: 20px;
    color: #424558;/*#767676;*/
    font-weight: 500;
}
.sommaire ol{
    padding-left: 50px;
}
.sommaire li{
    font-size: 15px;
    font-weight: 400;
    padding-bottom: 4px;
    color: #424558;/*#222;*/
    text-align: left;
}

.sommaire li a{
    text-decoration: none;
    color: inherit;
}

.contenu{
    position: absolute;
    display: block;
    left: 300px;
    padding: 20px 5% 20px 5%;
    background-color: #e8e8e8;
    width: calc(90% - 300px);
    height: 1500px;
    transition: left 0.25s, width 0.25s;
    border: none;
}


/******** RESPONSIVE ********/
@media screen and (max-width: 970px){
    .contenu{
    left: 0px;
    width: 90%;
    }
}