/*---------------------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");
}

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

main {
    display: grid;
    margin-inline: 1.75rem;
}

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

    > * {
        grid-area: pile;
    }
}

h1 {
    font-family: "Kiblind-Expanded";
    font-size: clamp(2rem, 5vw + 0.75rem, 4.688rem);
    line-height: 110%;
    letter-spacing: -4%;
    padding-block: 4rem 1.75rem;
}

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

p {
    font-family: "Kiblind-Normal";
    font-weight: normal;
    font-size: clamp(1.125rem, 3vw - 2.5rem, 1.5rem);
    padding-block: 0.5em;
    line-height: 150%;
}

.text-container {
 width: 75%;
 padding-bottom: 3.5rem;
}

.wordLink {
    text-decoration: underline;
    text-decoration-thickness: 0.07em;

    a {
        color: black;
    }
}
/*--------------NAV--------------*/
nav {
    position: relative;
    z-index: 100;
    top: 0;
    gap: 1rem;
    display: flex;
    align-items: center;
    align-self: stretch;
    margin-bottom: 0.5rem;
}

.navButton {
    font-family: "freight-text-pro", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.125rem;
    color: black;
    background-color: white;
    display: flex;
    padding: 0.125rem 1.125rem;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 99px;
    border: 1px solid #000;
}

/*--------------HEADER--------------*/
header {
    position: relative;
    z-index: 20;
    top: 0;
    display: flex;
    padding: 1.5rem 1.75rem;
    justify-content: space-between;
    flex-wrap: wrap;
    background-color: white;
}

#Logo-Small {
    position: relative;
    height: 4rem;
    width: auto;
}


.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;
}

/*--------------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;

    & 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;
    }

    #Logo {
        padding: 1rem;
    }

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

    .text-container {
     width: 100%;
    }

    main {
       margin-inline: 1rem;
    }
}

@media (max-width: 507px) {
    .navButton {
        height: 38px;

        svg {
            visibility: collapse;
        }
    }
}

/*--------------LIEUX DE DISTRIBUTION------------*/
.content-container {
    height: fit-content;
}