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

:root {
	/* COULEURS */
	--blanc: #fff;
	--noir: #000;
	--couleur-principale: #036bb0;	
	--couleur-hover-principale: #007ED1;	
	--couleur-secondaire: #B62280;
	--couleur-3: #99CCED;
    --couleur-4:#303030	;
	--couleur-5: #F7F7F7;



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


    
    /* TYPO */
	--typo-principale: "Poppins", sans-serif;
	--typo-secondaire: ;








/* Desktop */


    --size-titre-1: 72px;
    --size-titre-2: 48px; 
    --size-titre-3: 32px; 
    --size-titre-4: 24px; 
    --size-titre-5: 18px; 
    
    --size-contenu-oversize-1: 24px;
    --size-contenu-oversize-2: 24px; 
    
    --size-intertitre: 16px; 
    
    --size-contenu-1: 16px; 
    --size-contenu-2: 16px; 
    --size-contenu-3: 14px; 
    --size-legende: 12px; 
    


  --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 {
      
    --size-titre-1: 64px;
    --size-titre-2: 44px; 
    --size-titre-3: 29px; 
    --size-titre-4: 22px; 
    --size-titre-5: 18px; 
    
    --size-contenu-oversize-1: 22px;
    --size-contenu-oversize-2: 22px; 
    
    --size-intertitre: 16px; 
    
    --size-contenu-1: 16px; 
    --size-contenu-2: 16px; 
    --size-contenu-3: 14px; 
    --size-legende: 12px; 
    
      
      
      
    --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 {
      
    --size-titre-1: 48px;
    --size-titre-2: 32px; 
    --size-titre-3: 28px; 
    --size-titre-4: 20px; 
    --size-titre-5: 18px; 
    
    --size-contenu-oversize-1: 20px;
    --size-contenu-oversize-2: 20px; 
    
    --size-intertitre: 16px; 
    
    --size-contenu-1: 16px; 
    --size-contenu-2: 16px; 
    --size-contenu-3: 14px; 
    --size-legende: 12px; 
      
      
      
    --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;
  }
}