/*---------------------GENERAL-------------------------------*/
:root {
    --rouge: #e73b2b;
    --jaune: #ffda68;
    --orange: #ec6724;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    font-weight: normal;
}

@font-face {
    font-family: "Kiblind-Condensed";
    src: url("./fonts/Kiblind-Condensed.woff2") format("woff2");
}

@font-face {
    font-family: "Kiblind-Expanded";
    src: url("./fonts/Kiblind-Expanded.woff2") format("woff2");
}
@font-face {
    font-family: "Objectivity-Medium";
    src: url("./fonts/Objectivity-Medium.woff2") format("woff2");
}
@font-face {
    font-family: "Kiblind-Extra-Expanded";
    src: url("./fonts/Kiblind-Extra-Expanded.woff2") format("woff2");
}
@font-face {
    font-family: "Kiblind-Normal";
    src: url("./fonts/Kiblind-Normal.woff2") format("woff2");
}
@font-face {
    font-family: "Kiblind-Semi-Condensed";
    src: url("./fonts/Kiblind-Semi-Condensed.woff2") format("woff2");
}
@font-face {
    font-family: "Kiblind-Semi-Expanded";
    src: url("./fonts/Kiblind-Semi-Expanded.woff2") format("woff2");
}
@font-face {
    font-family: "Kiblind-Ultra-Expanded";
    src: url("./fonts/Kiblind-Ultra-Expanded.woff2") format("woff2");
}
@font-face {
    font-family: "Brownstone";
    src: url("./fonts/BNBrownstone.otf") format("opentype");
}

html {
    font-size: 100%;
    font-family: sans-serif;
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
    overflow-x: hidden;
}

section {
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    scroll-snap-align: start;
}

.pile {
    display: grid;
    grid-template-areas: "pile";
    place-items: center;

    > * {
        grid-area: pile;
    }
}

img {
    width: 100vw;
    height: 100vh;
    /*object-fit: cover;*/
}

.photo {
    object-fit: contain;
}

h1 {
    font-family: "Brownstone";
    font-size: clamp(150px, 16vw + 1rem, 400px);
    text-transform: uppercase;
    text-align: center;
    line-height: 80%;
    padding-top: 4rem;
}

h2 {
    text-align: center;
    font-family: "Kiblind-Condensed";
    text-transform: uppercase;
    font-size: clamp(72px, 7rem, 300px);
    text-decoration: underline;
    text-decoration-thickness: 0.07em;
    line-height: 95%;
    letter-spacing: -5%;
    padding-bottom: 0.5em;
}

h3 {
    font-family: "Kiblind-Normal";
    letter-spacing: -4%;
    line-height: 110%;
    font-size: clamp(1.625rem, 5vw - 1rem, 3.5rem);
}

h4 {
    text-align: center;
    font-family: "Brownstone";
    text-transform: uppercase;
    font-size: clamp(120px, 12vw + 1rem, 300px);
    line-height: 80%;
    padding-block: 0.5em;
    color: var(--rouge);
}

h5 {
    text-align: center;
    font-family: "Brownstone";
    text-transform: uppercase;
    font-size: clamp(80px, 7vw + 1rem, 200px);
    line-height: 85%;
    padding-block: 0.5em;
    color: var(--orange);
}

h6 {
    text-align: center;
    font-family: "Kiblind-Condensed";
    text-transform: uppercase;
    font-size: clamp(3.5rem, 6vw - 1.5rem, 6rem);
    text-decoration: underline;
    text-decoration-thickness: 0.07em;
    line-height: 95%;
    letter-spacing: -5%;
    padding-bottom: 0.5em;
}

p {
    text-align: center;
    font-family: "Kiblind-Normal";
    font-weight: normal;
    font-size: clamp(1.125rem, 5vw - 3rem, 2.5rem);
    padding-block: 0.5em;
    padding-inline: clamp(1rem, 15vw, 40rem);
    line-height: 140%;
}

.date {
    border-radius: 1em;
    background-color: var(--jaune);
    color: var(--rouge);
    padding: 0.1em 0.9em 0.2em 0.9em;
    font-family: "Kiblind-Extra-Expanded";
    font-size: clamp(1rem, 5vw - 1rem, 1.75rem);
    letter-spacing: -6%;
    text-transform: uppercase;
    width: fit-content;
    text-align: center;
}

/*button {
    border-radius: 60px;
    background-color: white;
    color: black;
    border: 2px solid black;
    padding: 0.6rem 1rem 1rem 1rem;
    font-family: "Kiblind-Semi-Condensed";
    font-size: 1.5em;
    letter-spacing: -6%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    transition: background-color 0.2s;

    a {
        color: black;
        text-decoration: none;
    }
}

button:hover {
    background-color: black;
    color: white;

    a {
        color: white;
        text-decoration: none;
    }
}*/

.text-container {
    display: flex;
    flex-direction: column;
    place-items: center;
    padding: 0 1rem;
}

.two-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /*padding-inline: clamp(1rem, 15vw, 40rem);*/
    padding-inline: 3em;
    gap: 2em;
    align-items: center;
}

/*--------------HEADER--------------*/
header {
    position: fixed;
    z-index: 20;
    top: 0;
    gap: 1rem;
}

#Logo {
    position: absolute;
    height: auto;
    width: 100vw;
    padding: 1.75rem;
    margin-bottom: 3rem;
}

/*--------------SECTION 4------------*/
#section4 {
    display: flex;
    position: relative;
    z-index: 21;
    scroll-snap-type: y mandatory;

    span {
        text-align: center;
        font-family: "Kiblind-Normal";
        font-size: 32px;
    }
}

#section4 .text-container {
    align-self: flex-end;
    z-index: 27;
}

#flamme {
    height: 100vh;
    width: 100vw;
    background-image: url("elements/flamme1.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    animation: flamme 500ms infinite;
}

@keyframes flamme {
    0% {
        background-image: url("elements/flamme1.png");
    }
    33% {
        background-image: url("elements/flamme2.png");
    }
    66% {
        background-image: url("elements/flamme3.png");
    }
    100% {
        background-image: url("elements/flamme1.png");
    }
}

/*--------------SECTION 5------------*/
#section5 {
    position: relative;
    background-color: white;

    img {
        height: 80vh;
        z-index: 27;
        padding: 0 3rem;
    }
}

/*--------------SECTION 6------------*/
#section6 {
    color: #ffda68;
    display: flex;
    position: relative;
    z-index: 100;
    background-color: white;
    height: fit-content;
    min-height: 100vh;
    background-image: url("elements/grille.jpg");
    background-size: cover;
    background-repeat: no-repeat;

    h2 {
        transform: rotate(0.5deg);
    }

    h4 {
        transform: rotate(-0.5deg);
    }

    .date {
        transform: rotate(-1deg);
        transition: rotate 2s ease-in-out;
    }

    .date:hover {
        transform: rotate(2deg);
    }
}

/*--------------SECTION 7------------*/
#section7 {
    color: var(--jaune);
    display: flex;
    position: relative;
    z-index: 100;
    background-color: white;
    height: fit-content;
    min-height: 100vh;
    background-image: url("elements/grille.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

/*--------------SECTION 8------------*/
#section8 {
    color: var(--jaune);
    display: flex;
    position: relative;
    z-index: 100;
    background-color: white;
    height: fit-content;
    min-height: 100vh;
    background-image: url("elements/grille.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    padding-bottom: 6rem;

    h2 {
        padding-bottom: 1em;
    }

    h5 {
        color: var(--jaune);
    }

    ul {
        /*margin: 0 1em;*/
        padding: 0;
    }

    li {
        /*text-align: center;*/
        font-family: "Kiblind-Normal";
        font-weight: normal;
        color: var(--rouge);
        font-size: clamp(1.125rem, 5vw - 3rem, 2.5rem);
        /*padding-inline: clamp(1rem, 15vw, 40rem);*/
        line-height: 140%;
    }

    li::before {
        content: "";
        display: inline-block;
        height: 1em;
        width: 1em;
        background-size: contain;
        background-repeat: no-repeat;
        background-image: url("elements/miniflamme.svg");
    }
}

/*--------------SECTION 9------------*/
#section9 {
    color: var(--jaune);
    display: flex;
    position: relative;
    z-index: 100;
    background-color: white;
    height: fit-content;
    min-height: 100vh;
    background-image: url("elements/grille.jpg");
    background-size: cover;
    background-repeat: no-repeat;

    p {
        padding-inline: 0;
    }

    img {
        width: 100%;
        height: fit-content;
    }
}

.fakebutton {
    border-radius: 0.6em;
    /*background-color: var(--rouge);*/
    color: var(--jaune);
    border: 2px solid var(--jaune);
    padding: 0em 0.85em 0.1em 0.85em;
    font-family: "Kiblind-Condensed";
    font-size: clamp(1.8rem, 4vw - 1rem, 3.5rem);
    letter-spacing: -5%;
    width: fit-content;
    text-align: center;
}

.fakebutton:nth-child(1) {
    transform: rotate(-1deg);
}

.fakebutton:nth-child(2) {
    transform: rotate(2deg);
}

.contreparties {
    display: flex;
    flex-direction: column;
    place-items: center;
    gap: 2em;
    margin: 0.5em 0 3em 0;
}

/*--------------SECTION 10------------*/
#section10 {
    color: var(--jaune);
    display: flex;
    position: relative;
    z-index: 100;
    background-color: white;
    height: fit-content;
    min-height: 100vh;
    background-image: url("elements/grille.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    padding-bottom: 6rem;

    li {
        /*text-align: center;*/
        font-family: "Kiblind-Normal";
        font-weight: normal;
        color: var(--rouge);
        font-size: clamp(1.125rem, 5vw - 3rem, 2.5rem);
        /*padding-inline: clamp(1rem, 15vw, 40rem);*/
        line-height: 140%;
    }

    li::before {
        content: "";
        display: inline-block;
        height: 1em;
        width: 1em;
        background-size: contain;
        background-repeat: no-repeat;
        background-image: url("elements/miniflamme.svg");
    }
}

.button {
    border-radius: 0.6em;
    background-color: var(--rouge);
    color: var(--jaune);
    border: 2px solid var(--rouge);
    padding: 0em 0.85em 0.1em 0.85em;
    font-family: "Kiblind-Condensed";
    font-size: clamp(2.25rem, 5vw - 1rem, 3.5rem);
    letter-spacing: -6%;
    width: fit-content;
    text-align: center;
}

.button:hover {
    background-color: var(--orange);
    color: var(--jaune);
    border: 2px solid var(--orange);
}

a {
    text-decoration: none;
}

.preco {
    display: flex;
    flex-direction: column;
    place-items: center;
    gap: 1rem;
    margin: 2rem 0;

    .button {
        margin: 0.8em;
    }
}

/*--------------FOOTER------------*/
footer {
    width: 100%;
    height: fit-content;
    padding: 1.75rem 1.75rem 0 1.75rem;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 100;
    color: white;
    background-color: black;
    gap: 2rem;
    scroll-snap-align: end;

    & h3 {
        padding-bottom: 2em;
    }
}

li {
    color: white;
    list-style: none;
    font-size: clamp(0.875rem, 5vw - 1rem, 1.25rem);
    font-family: "Kiblind-Normal";
    letter-spacing: -4%;
    font-weight: normal;
    line-height: 150%;
}

.nav {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 1em 0;
    border-top: solid 1px white;
    gap: 0.8em;

    li:hover {
        text-decoration: underline;
    }
}

.nav a {
    text-decoration: none;
    color: white;
}

/*--------------MEDIA QUERIES------------*/
@media (max-width: 620px) {
    h2 {
        font-size: 4rem;
    }

    p {
        padding: 1em 1rem;
    }

    #Logo {
        padding: 1rem;
    }

    .nav {
        justify-content: flex-start;
    }

    .two-columns {
        grid-template-columns: 1fr;
        padding-inline: 1rem;
    }

    .contreparties {
        gap: 1em;
    }
}