html,body {
    margin: 0;
    padding:0;
    width:100%;
    font-size: 100%;
    border: 0 none;
    font-family:Arvo;
    background-color:#FFF;
    color:#000;
    overflow-x:hidden;
}

header {
    margin-top:2vh;
    display:grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-columns: auto;
}

.logo {
    grid-column:1;
    grid-row:1;
    justify-self:end;
    margin:1em 0 0 0;
}

.baseline {
    grid-column:2 / 4;
    grid-row:1;
    padding-left:1em;
}

.baseline p {
    justify-self:start;
    line-height:0.7em;
}

.nom {
    font-weight:bold;
}

.fonction {
    font-style:italic;
}

.topnav {
    grid-column: 3 / 7;
    grid-row:1;
    justify-self:end;

}

a {
    color:#000;
    transition: color 0.3s ease-out;
}

a:hover {
    color:#777;
}



.headline {
    grid-column:3 / 7;
    grid-row:2;
    justify-self:end;
    font-size:5vw;
    letter-spacing:0.2em;
    width:50vw;
    margin:auto;
    display:block;
    margin:0 auto 75vh;
}

.question {
    width:35vw;
    display:block;
    margin:0 auto 20vh;
}

.question p {
    font-size:3vw;
    letter-spacing:0.2em;
    line-height:1.5em;
    border-bottom:1px solid;
    padding-bottom:1em;
}

.question a {
    font-size:1.2em;
}

.darkContainer {
    display:grid;
    grid-template-columns:2;
    background:#000;
    color:#fff;
} 

.darkContainer p {
    grid-column:2;
    justify-self:start;
    align-self:center;
    width:33vw;
    font-family:Cantarell;
    font-size:2vw;
    letter-spacing:0.2em;
    line-height:1.5em;
} 

.lightContainer {
    display:grid;
    grid-template-columns:2;
    background:#fff;
    color:#000;
    margin-top:15vh;
    align-items: center;
    min-height:100vh;
}

h2 {
    grid-column:1;
    justify-self:end;
    width:26vw;
    font-size:3vw;
    letter-spacing:0.2em;
    line-height:1.5em;
    font-weight:bold;
    text-align:right;
} 

h3 {
    font-family:Cantarell;
    font-size:1.3em;
    margin:0 0 -0.3em 0;
}

.lightContent {
    margin:2em;
    padding-left:2em;
    border-left:1px solid black;
    grid-column:2;
    max-width:40vw;
}

.lightContent li {
    list-style-type:square;
    line-height: 2em;
}

.flex {
    display:flex;
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:3em;
}

.flex img {
    max-width: 10em;
}

.etape {
    font-size:0.8em;
}

.etape ul {
    border-bottom:1px solid black;
    padding:0 0 1em 0;
}

footer {
    margin : 0 0 3em 0;    
}

footer li {
    list-style:none;
    margin:0 0 0.7em -2.5em;
}

footer .logo {
    position:relative;
    left:3em;
}

.copyright {
    position:relative;
    left:3em;
}
article {
    margin:0 0 0 2em;
}

figure img {
    width:30vw;
}

figcaption {
    font-size:.8em;
}

figcaption a {
    color:#fff;
}

.logo_medias img {
    width:50px;
}

/* Smartphones */
@media screen and (max-width: 767px) {
    
    .headline {
        font-size:10vw;
        text-align:right;
    }
    .headline span {
        display:none;
    }
    .question {
        width:80%;
    }
    .question p {
        font-size:7vw;
}
    .question a {
        font-size:1.2em;
    }
    figure img {
        width:80vW;
    }
    figcaption {
        font-size:.6em;
    }
    .darkContainer {
        display:block;
        padding:2em 0 2em 0;
    }
    .darkContainer p {
        font-size:7vw;
        width:80%;
        margin:1em 2em 5em 1em;
        color:#fff;
    }
    h2 {
        width:80%;
        font-size:2em;
        letter-spacing:0.2em;
        line-height:1.5em;
        font-weight:bold;
        text-align:right;
        margin:0 0 0 1em
    }
    .lightContainer {
        display:block;
    }
    .lightContent {
        padding-left:1em;
        font-size:4vw;
        border:none;
    }
    .lightContent p {
        width:80vw;
    }
    .lightContent ul {
        width:70vw;
    }
    .flex {
        display:flex;
        flex-wrap:wrap;
        gap:1em;
    }
    .flex img {
        max-width: 80vw;
    }
    #contact {
        margin:12em 0 0 0;
    }
}