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

:root {
	/* COULEURS */
	--blanc: #fff;
	--noir: #000;
	--couleur-principale: #DCAFA4;	
	--couleur-secondaire: #1C1C1C;
	--couleur-3: #F5F5F5; /* Hover des ctas */
	/*--couleur-4: #D1D5DB;
	--couleur-5: #F3F4F6;*/
	--couleur-bg: #F5F5F5;

	/* 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: "Gambarino", sans-serif;
	--typo-secondaire: "Switzer", sans-serif;
	--typo-icon: "CS3" !important; 
	/*
	* TODO : ajouter via https://icomoon.io/app/#/select > les icons custom du projet 
	* Importer en svg les icons > importer dans icomoon
	*/ 

	/* SIZE DESKTOP */
	--size-titre-1: 72px;
	--size-titre-2: 52px; 
	--size-titre-3: 32px; 
	--size-titre-4: 24px; 
	--size-titre-5: 20px; 
	--size-intertitre: 12px; 
	--size-contenu-1: 16px; 
	--size-contenu-2: 16px; 
	--size-legende: 12px; 
	--size-hyperlien: 14px;
	/* SIZE TEXTE CTA */
	--size-cta-principal: 12px;

	/* VALEURS MARGIN OU PADDING */
	--space-xxs: 8px;
	--space-xs: 16px;
	--space-s: 32px;
	--space-m: 48px;
	--space-l: 64px;
	--space-xl: 80px;
	--space-xxl: 96px;
	--space-xxxl: 128px;

	/* RADIUS PAR DEFAUT SUR TOUS LES CTAS */
	--radius-cta-principal: 4px;

	/* BORDURES ARRONDIS */
	--radius-none: 0;
	--radius-xxs: 4px;
	--radius-xs: 8px;
	--radius-s: 16px;
	--radius-m: 32px;
	--radius-l: 48px;
	--radius-xl: 64px;

	/* AUTRES VARIABLES DE TAILLES */
	--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;

}
/* Large / Laptop (≤1200px) */
@media all and (max-width: 1200px) {
	:root {
		--size-titre-1: 64px;
		--size-titre-2: 46px; 
		--size-titre-3: 30px; 
		--size-titre-4: 24px; 
		--size-titre-5: 20px; 

		--size-intertitre: 12px; 

		--size-contenu-1: 16px; 
		--size-contenu-2: 16px; 
		--size-legende: 12px; 
		--size-hyperlien: 14px;

		/* SIZE TEXTE CTA */
		--size-cta-principal: 14px;
	}
}

/* Medium / Tablette (≤1000px) */
@media all and (max-width: 1000px) {
	:root {
		--size-titre-1: 56px;
		--size-titre-2: 40px; 
		--size-titre-3: 30px; 
		--size-titre-4: 22px; 
		--size-titre-5: 19px; 

		--size-intertitre: 12px; 

		--size-contenu-1: 16px;
		--size-contenu-2: 16px; 
		--size-legende: 12px; 
		--size-hyperlien: 14px;

		/* SIZE TEXTE CTA */
		--size-cta-principal: 14px;
	}
}

/* Small / 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-intertitre: 12px; 

		--size-contenu-1: 14px; 
		--size-contenu-2: 12px; 
		--size-legende: 12px; 
		--size-hyperlien: 12px;

		/* SIZE TEXTE CTA */
		--size-cta-principal: 12px;
	}
}