@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    /*FONTS*/
    /*--font-ff-display : sans-serif;*/
    --font-ff-title: "Syne", sans-serif; /*Pour les headings*/
    --font-ff-body: "Work Sans", sans-serif; /*Pour le body*/
    /*--font-ff-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.title_hero {
    font-family: var(--font-ff-title);
    font-weight: var(--font-fw-medium) ;
    color: var(--font-neutral-shade-4);
    font-size: var(--font-fs-title-hero) ;
}
h1,h2,h3,h4,h5 {
    font-family: var(--font-ff-title);
    font-weight: var(--font-fw-semi-bold);
    color: var(--font-neutral-shade-4);
}
h1{font-size: var(--font-fs-title-screen);}
h2{
    font-size: var(--font-fs-title-section);     
    margin-bottom: 24px;
}
h3{
    font-size: var(--font-fs-title-subsection);
    margin-bottom: 16px;}
h4{
    font-size: var(--font-fs-title-body);
    margin-bottom: 8px;}
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);
}
ul {padding: 0 0 0 24px;}
li {list-style-type: none;}
a {
    text-decoration: none; 
    font-weight: var(--font-fw-medium); 
    color: var(--info-base); 
    position: relative;
}
caption{
    font-size: var(--font-fs-caption);
    font-family: var(--font-ff-body);
    font-weight: var(--font-fw-medium);
    color: var(--neutral-base);
}