@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

@layer fonts {
    /* Configuration des variables */
    :root,
    *::before,
    *::after {
        --font-size-h1: 20rem;
        --font-size-h1-level2: 17rem;
        --font-size-h2: 7rem;
        --font-size-h3: 4.5rem;
        --font-size-h4: 3.2rem;
        --font-size-standard: 2.3rem;
        --font-size-s: 2rem;
        --font-size-quote: 7rem;
        --font-size-hat: 34rem;
        --line-height: 1.5em;
        --line-height-h1-level2: 1.12em;
        --line-height-h2: 1.12em;
        --font-color: #000;
        --font-color-invert: #FFF;
    }

    @media screen and (max-width: 900px) {
        :root,
        *::before,
        *::after {
            --font-size-h1: 4.8rem;
            --font-size-h1-level2: 4.8rem;
            --font-size-h2: 3.2rem;
            --font-size-h3: 2.4rem;
            --font-size-h4: 1.8rem;
            --font-size-standard: 1.6rem;
            --font-size-s: 1.6rem;
            --font-size-quote: 2.4rem;
            --font-size-hat: 1.6rem;
        }
    }

    /* Globale */
    html {
        font-size: 62.5%;
    }

    body {
        font-family: "Inter", sans-serif;
        font-optical-sizing: auto;
        font-size: var(--font-size-standard);
        line-height: var(--line-height);
        font-weight: 400;
        font-style: normal;
        color: var(--font-color);
        letter-spacing: 2%;
    }

    h1,
    .h1 {
        font-size: var(--font-size-h1);
        line-height: var(--line-height);
    }

    .page--souspage h1,
    .page--souspage .h1 {
        font-size: var(--font-size-h1-level2);
        line-height: var(--line-height-h1-level2);
    }

    h2,
    .h2 {
        font-size: var(--font-size-h2);
        line-height: var(--line-height-h2);
    }

    h3,
    .h3 {
        font-size: var(--font-size-h3);
        line-height: var(--line-height);
    }

    h4,
    .h4,
    .main-title__suptitle {
        font-size: var(--font-size-h4);
        line-height: var(--line-height);
    }

    h1,
    h2,
    h3,
    h4 {
        font-weight: 400;
        font-style: normal;
    }

    a {
        text-underline-offset: 5px;
    }

    blockquote,
    .anm-quote {
        font-size: var(--font-size-quote);
        line-height: normal;
    }

    .anm-quote__author {
        font-size: var(--font-size-h4);
        line-height: var(--line-height);
    }

    .anm-hat {
        font-size: var(--font-size-hat);
        line-height: var(--line-height);
    }

    .font--small {
        font-size: var(--font-size-s);
        line-height: var(--line-height);
    }

    /* Page création */
    .page--creation h1 {
        font-size: var(--font-size-h1-level2);
        line-height: var(--line-height-h1-level2);
    }

    .page--creation .introduction-summary h3 {
        font-size: var(--font-size-h4);
        line-height: var(--line-height);
    }
}