/*#region ========================		Color  Zone		======================== */
:root {
	/* Couleurs du thème */
	--color-base: 					rgb(0,0,0);		/* texte de body */


	--color-primary:				#a10918; 	/* WCAG AA pour le texte blac */
	--color-primary-light:			#89a4cc;
	--color-primary-extralight:		#d0ddeb;

	--color-secondary: 				#000;
	--color-secondary-light: 		#f0969d;
	--color-secondary-extralight:	#f4e6db;

	--color-theme-blue-darker: 		#174ED7;
	--color-theme-blue: 			#0084fa;
	--color-theme-blue-light: 		#8ab4ea;
	--color-theme-blue-extralight: 	#d1dcf7;

	--color-theme-bluegreen: 		#00C3BB;
	--color-theme-bluegreen-light: 	#7ee0dc;
	--color-theme-bluegreen-extralight: #b6e8e6;

	--color-theme-green: 			#00DC9D;
	--color-theme-green-light: 		#7eedcd;
	--color-theme-green-extralight: #cbf7eb;

	--color-theme-orange: 			#F0AD4E;
	--color-theme-orange-light: 	#fde991;
	--color-theme-orange-extralight:#fef6d2;

	--color-theme-yellow: 			#fdd525;
	--color-theme-yellow-light: 	#fde991;
	--color-theme-yellow-extralight:#fef6d2;

	--color-theme-red-darker: 		#e24d54;
	--color-theme-red: 				#F54646;
	--color-theme-red-light: 		#f9a1a1;
	--color-theme-red-extralight: 	#fcd9d9;

	--color-light:					#FFF;
	--color-smoke:					#f8f8f8;
	--color-muted:					#e7e9ed;
	--color-colored-dark: 			#182844;
	--color-mediumdark-grey:		#515151;
	--color-grey:					#808080;
	--color-medium-grey:			var(--color-grey, #808080);
	--color-grey-light:				#919191;
	--color-grey-extralight:		#e2e2e2;
	--color-primary-grey:			hsl(0, 0%, 30%);
	--color-black:					#313131;

	--color-inverse	: 				#333;
	--color-ghost  	: 				transparent;
	--color-muted  	: 				#e7e9ed;

	/* Loader */
	--loader-color: 				rgb(10, 124, 255);


	/*
		Application dans le template :
		évoiter les couleurs directes ici
		afin d'écviter les répétations.
		Préférer des variable du dessus.
	*/
	/* Theme */
	--color-theme-bg: 				#fff;

	--color-models: 				var(--color-theme-blue);
	--color-models-light: 			var(--color-theme-blue-light);
	--color-models-extralight: 		var(--color-theme-blue-extralight);
	--color-models-txt: 			#fff;

	--color-landhouses: 			var(--color-theme-bluegreen);
	--color-landhouses-light: 		var(--color-theme-bluegreen-light);
	--color-landhouses-extralight: 	var(--color-theme-bluegreen-extralight);
	--color-landhouses-txt: 		#fff;

	--color-lands: 					var(--color-theme-green);
	--color-lands-light: 			var(--color-theme-green-light);
	--color-lands-extralight: 		var(--color-theme-green-extralight);
	--color-lands-txt: 				#fff;

	--color-agencies-darker: 		var(--color-theme-red-darker);
	--color-agencies: 				var(--color-theme-red);
	--color-agencies-light: 		var(--color-theme-red-light);
	--color-agencies-extralight: 	var(--color-theme-red-extralight);
	--color-agencies-txt: 			#fff;


	/*#region		 Forme SVG 		*/

		/* Arrières plans de couleurs */
		--bigshapes-color:			var(--color-primary);		/* Couleur */
		--bigshapes-opacity:		1;			/* opacité */
		--bigshapes-blend-mode:		color;		/* Mode de fusion */

	/*#endregion*/

	
	/*#region		 Footer 		*/

		--color-footer-bg-1: var(--color-mfc-brand-blue);
		--color-footer-bg-2: var(--color-mfc-brand-blue-dark);
		--color-footer-font: #fff;
		/* Footer Sub */
		--color__footer_sub-bg: #fff;
		--color__footer_sub-txt: #000;

	/*#endregion*/


	/*#region		 Contenus 		*/

		/* Titles */
		--color-highlighted_txt: rgba(194, 59, 39, .5);

	/*#endregion*/


	/*#region		 Accueil 		*/

		/* Slider */
		--home-slider-main-hoverlay-color:		rgba(0, 0, 0, .2);

	/*#endregion*/


/*#endregion /Colors =========================================================== */



/*#region ========================		FONTS  Zone		======================== */


	--font-size-body: clamp(1rem, 0.7813rem + 0.4688vw, 1.4rem);

	--font-size-desktop: min(max(1rem, 4vw), 22px);
    --font-icon-MFC: 'icon-mfc';

/*#endregion*/


/*#region ========================		Pictos  Zone		======================== */



	/* Pour obtenir des icônes/picto de plusieurs couleurs, un sprite SVG est présent du site. 
		(Ne pas confondre avec les font-icône, à utiliser comme tu sais déjà le faire.)


		Les couleurs de ces pictos sont modifiables via CSS (oui, c'est chouette), 
		Les pictos utilisent par défaut la currentColor 
		(c'est à dire la couleur du texte de votre élément). 
		
		Comme ces éléments sont dans le shaddow DOM, 
		il n'est pas possible de les modifier via des propriétés CSS classique, 
		d'où l'usage des propriétés personnalisées CSS.
		
		! à n'utiliser que localement pour modifier l'existant
		! et ne pas utiliser sur :root…

		Il est possible de la modifier ainsi :

		? Exemple avec un thème banana :
		.picto-sprite.banana {
			--picto-color-base: 		yellow;
			--picto-color-contrast: 	brown;
			--picto-color-opacity: 		.5;
		}

	*/

}