/*#region ========================		Color  Zone		======================== */
:root {
	/* Couleurs des marques (indipendantes du thème actif): */

	/* Hexaom */
	--color-brand-hexaom-primary: rgb(35, 44, 69);
	--color-brand-hexaom-secondary: #e22f3e;
	--color-brand-hexaom-grey: #182844;

	/* MFC */
	--color-brand-mfc-primary: #004289;
	--color-brand-mfc-secondary: #e01f21;
	--color-brand-mfc-grey: #1d1d1b;
	--color-mfc-brand-blue: #236bad;
	--color-mfc-brand-blue-dark: #074e8e;

	/* MCA */
	--color-brand-mca-primary: #004459;
	--color-brand-mca-secondary: #84102d;

	/* Couleurs du thème */
	--color-base: rgb(0, 0, 0); /* texte de body */

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

	--color-secondary: #e22f3e;
	--color-secondary-light: #f0969d;
	--color-secondary-extralight: #f9d4d7;

	--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-success: var(--color-theme-green); /* #5CB85C */
	--color-success-light: var(--color-theme-green-light);
	--color-success-extralight: var(--color-theme-green-extralight);

	--color-info: #5bc0de;
	--color-info-light: #acdfee;
	--color-info-extralight: #ddf2f8;

	--color-warning: var(--color-theme-yellow);
	--color-warning-light: var(--color-theme-yellow-light);
	--color-warning-extralight: var(--color-theme-yellow-extralight);

	--color-danger: var(--color-secondary);
	--color-danger-light: var(--color-secondary-light);
	--color-danger--extralight: var(--color-secondary-extra-light);

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

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

	/* Réseaux sociaux */
	--color-socials-facebook: #1877f2;
	--color-socials-facebook-gradient: linear-gradient(
		90deg,
		var(--color-socials-facebook) 0%,
		var(--color-socials-facebook) 100%
	);
	--color-socials-fb-messenger: rgb(10, 124, 255);
	--color-socials-fb-messenger-gradient: radial-gradient(
		108.96% 108.96% at 19.25% 99.47%,
		#0099ff 0%,
		#a033ff 60.98%,
		#ff5280 93.48%,
		#ff7061 100%
	);
	--color-socials-instagram: #e1306c;
	--color-socials-instagram-gradient: linear-gradient(
		45deg,
		#ffdc80 0%,
		#fcaf45 10%,
		#f77737 20%,
		#f56040 30%,
		#fd1d1d 40%,
		#e1306c 50%,
		#c13584 60%,
		#833ab4 70%,
		#5851db 80%,
		#405de6 100%
	);
	--color-socials-whatsapp: #25d366;
	--color-socials-whatsapp-gradient: linear-gradient(
		45deg,
		#25d366 0%,
		#25d366 100%
	);
	--color-socials-twitter: #1da1f2;
	--color-socials-linkedin: #2867b2;
	--color-socials-pinterest: #e60023;
	--color-socials-google: #4285f4;
	--color-socials-google-gradient: linear-gradient(
		90deg,
		#f2f1f0 0%,
		#f2f1f0 100%
	);

	/* Couleurs temporaires */
	--colortest: #fff;

	--color-fake1: #fdd6c8;
	--color-fake2: #f7c0e7;
	--color-fake3: rgb(220, 255, 215);

	/*
		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;

	--color-extension-renovation-darker: #8b5d05;
	--color-extension-renovation: #faa200;
	--color-extension-renovation-light: #fcc765;
	--color-extension-renovation-extralight: #ffecca;
	--color-extension-renovation-txt: #fff;

	--color-favs: var(--color-theme-red);

	/*#region		 Header 		*/

	--color-header-bg-1: #fff;
	--color-header-font: inherit;

	/* #endregion */

	/*#region		 Formulaires	*/
	--forms-color: #bfbfbf;
	--input-color: var(--color-base);
	--input-bg: #fff;
	--input-border-width: 1px;
	--input-border-color: 1px;
	--input-border-radius: 9px;
	--input-placeholder-color: #747474;
	--input-font-size: inherit;
	--input-box-shadow: none;
	--input-group-addon-color: #000;
	--input-group-addon-border: #bfbfbf;
	--input-group-addon-bg: #f1f1f1;
	--button-bg: var(--color-muted);
	/* Vérification du password */
	--entities-passchecker__valid--bg: var(--color-success);
	--entities-passchecker__valid--color: var(--color-success);
	--entities-passchecker__medium--bg: var(--color-theme-yellow); /* #ffdd00 */
	--entities-passchecker__error--bg: var(--color-error-light);
	--entities-passchecker__error--color: var(--color-error);
	--entities-passchecker__error--border: var(--color-error-light);
	--entities-passchecker__meter--radius: 10px;
	--entities-passchecker__info--bg: #fff;
	--entities-passchecker__info__close: #222;
	--entities-passchecker__info--color: inherit;
	--entities-passchecker__info--radius: 10px;
	--entities-passchecker__info--shadow: 0 0.9px 1px rgba(0, 0, 0, 0.037),
		0 2.2px 2.6px rgba(0, 0, 0, 0.053), 0 4.4px 5.3px rgba(0, 0, 0, 0.067),
		0 9.1px 11px rgba(0, 0, 0, 0.083), 0 25px 30px rgba(0, 0, 0, 0.12);

	/* #endregion */

	/*#region		Ombres			*/
	--card-box-shadow: 0 0.8px 2.1px rgba(0, 0, 0, 0.07),
		0 2.1px 5.8px rgba(0, 0, 0, 0.04), 0 5.1px 13.9px rgba(0, 0, 0, 0.034),
		0 17px 46px rgba(0, 0, 0, 0.027);
	--card-box-shadow--hover: 0 0.9px 0.9px rgba(0, 0, 0, 0.035),
		0 2.4px 2.4px rgba(0, 0, 0, 0.05), 0 5.7px 5.7px rgba(0, 0, 0, 0.065),
		0 19px 19px rgba(0, 0, 0, 0.1);

	--shadow-xl: 0 2.8px 2.2px rgba(0, 0, 0, 0.028),
		0 6.7px 5.3px rgba(0, 0, 0, 0.04), 0 12.5px 10px rgba(0, 0, 0, 0.05),
		0 22.3px 17.9px rgba(0, 0, 0, 0.06),
		0 41.8px 33.4px rgba(0, 0, 0, 0.072), 0 100px 80px rgba(0, 0, 0, 0.1);

	/*#endregion*/

	/*#region		 Notifications	*/

	--notification-page-background-color: rgba(0, 0, 0, 0.15);
	--notification-modal-radius: 10px;
	--notification-modal-background-color: #fff;
	--notification-modal-color: inherit;
	--notification-modal-shadow: 0 1.7px 1.6px rgba(0, 0, 0, 0.026),
		0 4px 3.7px rgba(0, 0, 0, 0.037), 0 7.2px 6.7px rgba(0, 0, 0, 0.046),
		0 11.9px 11.1px rgba(0, 0, 0, 0.054),
		0 19.6px 18.3px rgba(0, 0, 0, 0.063),
		0 34.2px 31.9px rgba(0, 0, 0, 0.074), 0 74px 69px rgba(0, 0, 0, 0.1);

	/* #endregion */

	/*#region		 NAVS 			*/

	/* main */
	--nav-main-link-color: var(--color-base);
	--nav-main-hover-color: var(--color-secondary);
	--nav-main-active-color: var(--color-primary);
	--nav-main-bg: var(--color-light);
	--nav-main-lvl2-bg: var(--color-light);
	--nav-main-lvl2--hover_bg: var(--color-smoke);
	/* shortcuts (boutons de droite) */
	--nav-shortcuts-links-color: #001f45;
	--nav-shortcuts-icons-color: var(--color-primary);
	--nav-shortcuts-accent-color: var(--color-secondary);

	/* Small / 3D */
	--nav-small-bg: var(--color-primary);
	--nav-small-list-link-color: #ffffffbb;
	--nav-small-list-link-hover-color: var(--color-light);
	--nav-small-list-link-hover-bg: #ffffff1c;
	--nav-small-list-link-currt-color: #fff;
	--nav-small-list-link-currt-hover-color: #fff;
	/* Footer social */
	--nav-small-socials-link-color: var(--color-light);
	--nav-small-socials-link-hover-color: var(--color-light);

	/* tabbar */
	--tabbar-bg-color: rgba(255, 255, 255, 0.72); /* + effet de blur */

	/* #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: var(--color-theme-yellow);

	/*#endregion*/

	/*#region		 Maps 		*/

	--map-zone-bg-color: #ccc;
	--map-zone-border-color: #000;
	--map-zone-opacity: 0.85;
	--map-zone-hover-bg-color: #fff;
	--map-zone-hover-border-color: var(--map-zone-border-color);
	--map-zone-hover-opacity: 1;

	/*#endregion*/

	/*#region		 Accueil 		*/

	/* Slider main */
	--home-slider-main-hoverlay-color: transparent;

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

/*#region ========================		FONTS  Zone		======================== */
:root {
	--font-size-body: clamp(1rem, 0.7813rem + 0.4688vw, 1.4rem);

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

	/*
	Font weights
	*/
	--weight-thin: 100;
	--weight-extralight: 200;
	--weight-light: 300;
	--weight-regular: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;
	--weight-extrabold: 800;
	--weight-black: 900;
}
/*#endregion*/

/*#region ========================		LAYOUT  Zone	======================== */

/*#region 		Wrappers 					*/

/*#region 	Small  S			*/
:root {
	--layout-wrapper-small-margin-left: 8vw;
	--layout-wrapper-small-margin-right: 8vw;
	--layout-wrapper-small-width: calc(
		100vw - var(--layout-wrapper-small-margin-left) -
			var(--layout-wrapper-small-margin-right)
	);
}
@media screen and (min-width: 577px) {
}
@media screen and (min-width: 769px) {
	:root {
		--layout-wrapper-small-margin-left: 12vw;
		--layout-wrapper-small-margin-right: 12vw;
	}
}
@media screen and (min-width: 993px) {
	:root {
		--layout-wrapper-small-margin-left: 15vw;
		--layout-wrapper-small-margin-right: 15vw;
	}
}
@media screen and (min-width: 1200px) {
}
@media screen and (min-width: 1600px) {
	:root {
		--layout-wrapper-small-margin-right: 20vw;
		--layout-wrapper-small-margin-left: 20vw;
	}
}
@media screen and (min-width: 1920px) {
}
@media screen and (min-width: 3840px) {
}
@media screen and (min-width: 7680px) {
}
/*#endregion*/

/*#region 	MEDIUM  M			*/
:root {
	--layout-wrapper-medium-margin-left: 5vw;
	--layout-wrapper-medium-margin-right: 5vw;
	--layout-wrapper-medium-width: calc(
		100vw - var(--layout-wrapper-medium-margin-left) -
			var(--layout-wrapper-medium-margin-right)
	);
}
@media screen and (min-width: 577px) {
}
@media screen and (min-width: 769px) {
	:root {
		--layout-wrapper-medium-margin-left: 8vw;
		--layout-wrapper-medium-margin-right: 8vw;
	}
}
@media screen and (min-width: 993px) {
}
@media screen and (min-width: 1200px) {
	:root {
		--layout-wrapper-medium-margin-left: 10vw;
		--layout-wrapper-medium-margin-right: 10vw;
	}
}
@media screen and (min-width: 1600px) {
}
@media screen and (min-width: 1920px) {
}
@media screen and (min-width: 3840px) {
}
@media screen and (min-width: 7680px) {
}
/*#endregion*/

/*#region 	LARGE  L 			*/
:root {
	--layout-wrapper-large-margin-left: 2vw;
	--layout-wrapper-large-margin-right: 2vw;
	--layout-wrapper-large-width: calc(
		100vw - var(--layout-wrapper-large-margin-left) -
			var(--layout-wrapper-large-margin-right)
	);
}
@media screen and (min-width: 577px) {
}
@media screen and (min-width: 769px) {
	:root {
		--layout-wrapper-large-margin-left: 4vw;
		--layout-wrapper-large-margin-right: 4vw;
	}
}
@media screen and (min-width: 993px) {
}
@media screen and (min-width: 1200px) {
}
@media screen and (min-width: 1600px) {
}
@media screen and (min-width: 1920px) {
}
@media screen and (min-width: 3840px) {
}
@media screen and (min-width: 7680px) {
}
/*#endregion*/

/*#endregion*/

/*#region 	 	Box : 						*/

/* - rythme vertical */

:root {
	--box-spacer: 5em;
	--box-spacer-small: 3em;
}
@media screen and (min-width: 577px) {
}
@media screen and (min-width: 769px) {
}
@media screen and (min-width: 993px) {
}
@media screen and (min-width: 1200px) {
	:root {
		--box-spacer: 6em;
		--box-spacer-small: 4em;
	}
}
@media screen and (min-width: 1600px) {
}
@media screen and (min-width: 1920px) {
}
@media screen and (min-width: 3840px) {
}
@media screen and (min-width: 7680px) {
}

/*#endregion*/

/*#region 	 	Variables d'environnement 	*/

/*
			* Définition des marges de périphériques (zones tranquilles)
			* laisser un espace (calculé automatiquement) par chaque device
			* en bas pour que l'utilisateur accède à la barre du "home indicator"
			*
			* Exemple :
			* .element-en-bas-de-page {
			* 		--padding-b: calc( var(--safe-area-inset-bottom) + 2em );
			* 		padding-bottom: var(--padding-b);
			*	}
			*/
:root {
	--safe-area-inset-top: 0;
	--safe-area-inset-bottom: 0;
}
@supports (padding-top: env(safe-area-inset-top)) {
	:root {
		--safe-area-inset-top: env(safe-area-inset-top);
	}
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
	:root {
		--safe-area-inset-bottom: env(safe-area-inset-bottom);
	}
}

/* #endregion */

/*#endregion /Layout ============================================================================ */

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

:root {
	/* Les pictos sprite, utilisent pour le moment la currentColor
		(c'est à dire la couleur du texte (color: tomato;) de votre élément).

		C'est cool, mais parfois pas suffisant.
		Par exmple, en cas de modification de la couleur d'un élément du symbôle
		ou

		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
		Il est possible de la modifier ainsi:

		! à n'utiliser que localement pour modifier l'existant
		! et ne pas utiliser sur :root…

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

	*/
}

/*#region 		Composants 		*/

/*#region 		 		*/

/*#endregion*/

/*#endregion*/