/*-------BODY--------*/
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');
}

@font-face {
    font-family: 'Archivo Narrow';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/archivonarrow/v35/tss0ApVBdCYD5Q7hcxTE1ArZ0bbwiXxw2d8o.woff2) format('woff2');
}

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/archivo/v25/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLydOxKsv4Rn.woff2) format('woff2');
}

body {
    margin: 0;
    background-color: black;
    color: white;
    font-family: 'Montserrat';
}

.inner {
    max-width: 75%;
    margin: auto;
}

.titre {
    height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 0;
}

.presentation {
    margin: auto;
    max-width: 1000px;
}

header img {
    width: 100px;
}

.logo {
    padding: 20px;
}

/*----TYPOGRAPPHIE--------*/

h1 {
    font-size: 128px;
    text-transform: uppercase;
    font-family: 'Archivo Narrow';
    font-weight: 400;
    margin: 0;
}

.titre p {
    margin: 0;
}

.avantages h3 {
    font-family: 'Archivo Narrow';
    text-transform: uppercase;
    font-size: 70px;
    font-weight: 400;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    text-align: center;
}

h2 {
    font-family: 'Archivo';
    font-size: 40px;
    margin: 0;
}

.alcool .texte {
    color: #b2322f;
}

.securite .texte {
    color: #948bbe;
}

.campagne .texte {
    color: #5c94cc;
}

.pas-cher .texte {
    color: #c5aa46;
}

.texte {
    font-family: 'Archivo';
    font-size: 40px;
    margin-top: 100px;
}

/*-----VIDEOS IMAGES-------*/

video,
img {
    width: 100%;
    max-width: auto;
}

.alcool,
.pas-cher,
.securite,
.campagne {
    position: relative;
    height: 100vh;
    display: flex;
}



/*------AVANTAGES-----*/

.video,
.dessin,
.texte {
    position: absolute;
    inset: 0;
}

/*------FOOTER-------*/
footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 3em;
    padding-bottom: 3em;
    padding-right: 15em;
    padding-left: 15em;

    background-color: #c5aa46;
    color: black;
}

footer img {
    width: 100px;
}

/*-------PRESENTATION---------*/

.presentation {
    display: flex;
    gap: 5vh;
    padding-bottom: 15vh;
}

.presentation .col-2 {
    max-width: 60vh;
}