@import url('https://fonts.cdnfonts.com/css/century-gothic-paneuropean');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

:root {
    /*FONTS*/
    /*--font-display : sans-serif;*/
    --font-ff-title: 'Century Gothic Paneuropean', sans-serif; /*Pour les headings*/
    --font-ff-body: "Inter", sans-serif; /*Pour le body*/
    /*--font-tertiary : sans-serif;*/

    
    /* TYPESCALE */
        /* set base value 1rem = 16px */
        /*device size : max-> 1920px & min-> 320px*/
    --font-fs-title-hero: clamp(3rem, calc(3rem + 0.325vw), 3.5rem);                    /* 48px - 56px */
    --font-fs-title-screen: clamp(2.5rem, calc(2.5rem + 0.325vw), 2.8125rem);           /* 40px - 45px */
    --font-fs-title-section: clamp(1.75rem, calc(1.75rem + 0.25vw), 2rem);              /* 28px - 32px */
    --font-fs-title-subsection: clamp(1.3125rem, calc(1.3125rem + 0.1875vw), 1.5rem);   /* 21px - 24px */
    --font-fs-title-body: clamp(1rem, calc(1rem + 0.125vw), 1.125rem);                  /* 16px - 18px */
    --font-fs-title-group: clamp(0.875rem, calc(0.875rem + 0.125vw), 1rem);             /* 14px - 16px */
    /*--font-fs-title-eyebrow : clamp(1rem, 0.9565rem + 0.2174vi, 1.125rem);*/          /* TO DEFINE */
    --font-fs-body-lg: clamp(1rem, calc(1rem + 0.13vw), 1.125rem);                      /* 16px - 18px */
    --font-fs-body-md: clamp(0.875rem, calc(0.875rem + 0.13vw), 1rem);                  /* 14px - 16px */
    --font-fs-body-sm: clamp(0.75rem, calc(0.75rem + 0.13vw), 0.875rem);                /* 12px - 14px */
    --font-fs-caption : 0.75rem;                                                        /* 12px */

    /*LINE HEIGHT*/
    --font-lh-title : 1.3;
    --font-lh-body : 1.5;
    --font-lh-caption: 1.4;

    /*LETTER SPACING*/
    --font-ls-title : -0.5;
    --font-ls-body : 0.12;
    --font-ls-caption : 0.12;

    /*FONT WEIGHT*/
    --font-fw-light : 300;
    --font-fw-regular : 400;
    --font-fw-medium : 500;
    --font-fw-semi-bold : 600;
    --font-fw-bold : 700;
    --font-fw-black : 900;
}


/*h1.hero {
    font-family: ;
    font-weight: ;
    color: ;
    font-size: ;
}*/
h1,h2,h3,h4,h5 {
    font-family: var(--font-ff-title);
    font-weight: var(--font-fw-semi-bold);
    color: var(--primary-shade-3);
    margin-top: 0px;
}
h1{font-size: var(--font-fs-title-screen);}
h2{font-size: var(--font-fs-title-section);}
h3{font-size: var(--font-fs-title-subsection);}
h4{font-size: var(--font-fs-title-body);}
h5{font-size: var(--font-fs-title-group);}
p,a,li,div{
    font-family: var(--font-ff-body);
    font-size: var(--font-fs-body-lg); 
    font-weight: var(--font-fw-regular);
    color: var(--font-neutral-shade-3);
    list-style-type: none;
}
ul {
    padding: 0 16px;
}
caption{
    font-size: var(--font-fs-caption);
    font-family: var(--font-ff-body);
    font-weight: var(--font-fw-medium);
    color: var(--neutral-base);
}
a {
    text-decoration: none; 
    font-weight: var(--font-fw-medium); 
    color: var(--info-base); 
    position: relative;
}