body {
    background-color: #ffffff;
    color: #272727;
    font-family: Exo, sans-serif;
    margin: 0;
}

section {
    margin : 2.5rem 0 0 55px;
}

#logo {
    margin: 10px 30px;
}


.titre {
    margin: 2.8rem 0 0 2rem;
}

.container-flex {
    display: flex;
    justify-content: flex-start;
    color: #ed5628;
    box-shadow: 10px 10px 15px 0 rgba(75, 75, 75, 0.5);
}

.absolute {
    position: absolute;
    display: inline-block;
}

.vignette {
    width: 500px;
    margin: 10px 50px;
    box-shadow: 10px 10px 15px 0 rgba(75, 75, 75, 0.5)
}

.legende-vignette {
    position: absolute;
    left: -450px;
    top: 200px;
    display: inline-block;
    width: 300px;
    padding: 0.2rem;
    background-color: rgba(255, 255, 255, 0.8);
    color: #ed5628;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
}
@font-face {
    font-family: Exo;
    font-style: normal;
    font-weight: normal;
    src: url("/fonts/Exo-Regular.ttf") format("ttf");
}

@font-face {
    font-family: Exo;
    font-style: normal;
    font-weight: normal;
    src: url("/fonts/Exo-Bold.ttf") format("ttf");
}

@font-face {
    font-family: Exo;
    font-style: italic;
    font-weight: normal;
    src: url("/fonts/Exo-Italic.ttf") format("ttf");
}