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