/*========================
*
* 				VARIABLES
* 
* ======================*/

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

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




    
    /* TYPO */
	--poppins: "Poppins", sans-serif;
	--bit: "Bitcount Grid Single", system-ui;



/* 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;
  --22px: 22px;
  --20px: 20px;
  --18px: 18px;
  --16px: 16px;
  --14px: 14px;
  --12px: 12px;
  --10px: 10px;

}
/* Tablet (≤1000px) */
@media all and (max-width: 1000px) {
  :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é */
	--22px: 20px;
    --20px: 18px;
    --18px: 16px;
    --16px: 14px;
    --14px: 13px;
    --12px: 11px;
	--10px: 9px;
  }
}

/* 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é */
	--22px: 17px;
    --20px: 16px;
    --18px: 15px;
    --16px: 15px;
    --14px: 12px;
    --12px: 10px;
	--10px: 8px;
  }
}

/* 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é */
	--22px: 15px;
    --20px: 14px;
    --18px: 13px;
    --16px: 12px;
    --14px: 11px;
    --12px: 9px;
	--10px: 8px;
  }
}