div.header {
    background-image: url('../images/about.jpg');
    background-image: url('../images/presentation.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    height: 40vh;
    width: 100%x;
    display: flex;
    align-items: center;
    justify-content: center;
}

h1 {
    font-size: 5em;
}

div.presentation {
    width: 100%;
    height: auto;
    display: flex;
    position: relative;
    border-bottom: dotted 2px rgba(0, 0, 0, 0.1);
    padding: 10px 0 100px;
}

ul.chapitres {
    margin: 10px;
    padding: 20px;
    position: sticky;
    top: 60px;
    list-style: none;
    width: 150px;
    height: 140px;
    line-height: 25px;
}
ul.chapitres a {
    color: #c8baa6;
    text-decoration: none;
}
div.chapitres {
    width: calc(100% - 150px);
}

section {
    width: 100%;
    height: auto;
    padding: 20px;
}

@media screen and (max-width: 850px) {
    div.header h1 {
        font-size: 4em;
    }
}
@media screen and (max-width: 680px) {
    div.header h1 {
        font-size: 3em;
    }
    ul.chapitres {
        display: none;
    }
    div.chapitres {
        width: 100%;
    }
    div.chapitres p {
        text-align: justify;
    }
}
@media screen and (max-width: 520px) {
    div.header h1 {
        font-size: 2em;
    }
}
@media screen and (max-width: 350px) {
    div.header h1 {
        font-size: 1em;
    }
}
@media screen and (max-width: 190px) {
    div.header h1 {
        display: none;
    }
}