/*========================
*
* 				VARIABLES
* 
* ======================*/
:root {
/* COULEURS */
--blanc: #fff;
--noir: #000;


/* TYPO */
/*<weight>: Use a value from 300 to 900*/
--figtree: "Figtree", sans-serif;

/* FONT_WEIGHT */
--thin: 100;
--extra-light: 200;
--light: 300;
--regular: 400;
--medium: 500;
--semi-bold: 600;
--bold: 700;
--extra-bold: 800;
--black: 900;

/* Desktop */
--250px: 250px;
--120px: 120px;
--116px: 116px;
--112px: 112px;
--108px: 108px;
--104px: 104px;
--100px: 100px;
--96px: 96px;
--92px: 92px;
--88px: 88px;
--84px: 84px;
--80px: 80px;
--76px: 76px;
--72px: 72px;
--68px: 68px;
--64px: 64px;
--62px: 62px;
--60px: 60px;
--56px: 56px;
--52px: 52px;
--50px: 50px;
--48px: 48px;
--44px: 44px;
--40px: 40px;
--36px: 36px;
--32px: 32px;
--30px: 30px;
--28px: 28px;
--25px: 25px;
--24px: 24px;
--20px: 20px;
--18px: 18px;
--16px: 16px;
--14px: 14px;
--12px: 12px;

}
/* Tablet (≤1024px) */
@media all and (max-width: 1024px) {
    :root {
        --250px: 225px;
        --120px: 108px;
        --116px: 104px;
        --112px: 100px;
        --108px: 96px;
        --104px: 92px;
        --100px: 88px;
        --96px: 84px;
        --92px: 80px;
        --88px: 76px;
        --84px: 72px;
        --80px: 72px;
        --76px: 68px;
        --72px: 64px;
        --68px: 60px;
        --64px: 56px;
        --62px: 56px;   /* adapté */
        --60px: 54px;   /* nouveau */
        --56px: 52px;
        --52px: 50px;
        --50px: 45px;
        --48px: 44px;
        --44px: 42px;
        --40px: 36px;   /* nouveau */
        --36px: 34px;
        --32px: 29px;
        --30px: 27px;
        --28px: 25px;
        --25px: 23px;
        --24px: 22px;   /* adapté */
        --20px: 18px;
        --18px: 16px;
        --16px: 14px;
        --14px: 13px;
        --12px: 11px;
    }
}

/* Mobile (≤768px) */
@media all and (max-width: 768px) {
    :root {
        --250px: 203px;
        --120px: 97px;
        --116px: 94px;
        --112px: 92px;
        --108px: 88px;
        --104px: 84px;
        --100px: 80px;
        --96px: 76px;
        --92px: 72px;
        --88px: 68px;
        --84px: 64px;
        --80px: 60px;
        --76px: 56px;
        --72px: 52px;
        --68px: 48px;
        --64px: 46px;
        --62px: 44px;   /* adapté */
        --60px: 42px;   /* nouveau */
        --56px: 41px;
        --52px: 40px;
        --50px: 41px;
        --48px: 38px;
        --44px: 36px;
        --40px: 33px;   /* nouveau */
        --36px: 32px;
        --32px: 26px;
        --30px: 24px;
        --28px: 22px;
        --25px: 20px;
        --24px: 19px;   /* adapté */
        --20px: 16px;
        --18px: 15px;
        --16px: 15px;
        --14px: 12px;
        --12px: 10px;
    }
}

/* Small Mobile (≤480px) */
@media all and (max-width: 480px) {
    :root {
        --250px: 180px;
        --120px: 90px;
        --116px: 87px;
        --112px: 84px;
        --108px: 80px;
        --104px: 76px;
        --100px: 72px;
        --96px: 68px;
        --92px: 64px;
        --88px: 60px;
        --84px: 56px;
        --80px: 52px;
        --76px: 48px;
        --72px: 46px;
        --68px: 44px;
        --64px: 40px;
        --62px: 36px;   /* adapté */
        --60px: 34px;   /* nouveau */
        --56px: 35px;
        --52px: 34px;
        --50px: 35px;
        --48px: 32px;
        --44px: 30px;
        --40px: 28px;   /* nouveau */
        --36px: 28px;
        --32px: 22px;
        --30px: 20px;
        --28px: 18px;
        --25px: 16px;
        --24px: 17px;   /* adapté */
        --20px: 14px;
        --18px: 13px;
        --16px: 12px;
        --14px: 14px;
        --12px: 9px;
    }
}