body{
    display: flex;
    flex-direction: column;
    align-items: center;
}

header, footer, main, aside, .activite{
    width: 100vw;
    border: 0px solid #000;
    min-height: 50px;    
    max-width: 1024px;
}

h1 {
    
    
}
ol, ul{
    padding-left: 20px;
}
.activite {
    display: flex;

    & .info, & .diagramme, & .notes{
        display: flex;
        flex-direction: column;
        border-right: 1px dashed red;
        width: 33.3%;
        padding: 8px;
    }
    & .notes{
        border-right: 0px;
    }
}
aside{
    text-align: left;
    font-size: 10px;
    
}
.liste_activite{
    display: flex;
    flex-direction: row;
}
.liste{
    width: 50%;
    border-right: 1px solid #000;
}
.exemple{
    padding-left: 8px;
}
@media screen and (max-width : 800px){
    .activite {
        flex-direction: column;
        & .info, & .diagramme, & .notes{
            width: 100vw;
        }
    }
    
    header, footer, main, aside, .activite{
        width: 100vw;
        min-height: 50px;
    }
 
    
    .liste_activite{
        width: 100vw;
        flex-direction: column;
    }
    .liste{
        width: 100%;
        
}
}