html.global {
/* #region COULEURS */
/* --------------------------------------------- */
/* RGB ou Hex vers HSLA : https://hslpicker.com/ */
/* ------- Nuance-500 = Couleur de base -------- */
/* --------------------------------------------- */
/* #region COULEUR PRIMAIRE */
/* --------------------------------------------- */
/* --- Utilisée pour: Boutons, liens, titres --- */
/* --------- Couleur de base = #9ac41c --------- */
/* --------------------------------------------- */
/* Paramétrage de référence */
--ig-primary-h: 107deg;
--ig-primary-s: 54%;
--ig-primary-l: 40%;
--ig-primary-a: 1;
/* Nuances de la couleur primaire */
--ig-primary-50: var(--ig-primary-h), var(--ig-primary-s), var(--ig-primary-l); /* Couleur du fond des boutons désactivés */
--ig-primary-200: var(--ig-white); /* Couleur du texte des boutons & pills */
--ig-primary-600: var(--ig-secondary-h), var(--ig-secondary-s), var(--ig-secondary-l); /* Couleur du hover des boutons & des pills */
--ig-primary-700: var(--ig-primary-600);
--ig-primary-900: var(--ig-primary-h), 100%, 51%; /* Couleur du texte des footers */
/* #endregion */
/* #region COULEUR SECONDAIRE */
/* --------------------------------------------- */
/* --- Utilisée pour: Titres, liens & effets --- */
/* --------- Couleur de base = #479d2f --------- */
/* --------------------------------------------- */
/* Paramétrage de référence */
--ig-secondary-h: 75deg;
--ig-secondary-s: 75%;
--ig-secondary-l: 44%;
--ig-secondary-a: 1;
/* #endregion */
/* #region TONALITES DE GRIS */
/* --- Couleur de référence = #666666 --- */
--ig-gray-h: 0deg;
--ig-gray-s: 0%;
--ig-gray-l: 40%;
--ig-gray-a: 1;
/* Nuances de gris souhaitées */
--ig-gray-100: var(--ig-gray-h), var(--ig-gray-s), 90%; /* Couleur de fond des cellules des lignes paires */
--ig-gray-200: var(--ig-gray-h), var(--ig-gray-s), 80%; /* Couleur de fond des cellules hover & selected dans les grilles Infragistics */
--ig-gray-400: var(--ig-surface-300-contrast); /* Couleur des labels Infragistics désactivés */
--ig-gray-600: var(--ig-surface-500-contrast); /* Couleur du texte des fenêtres de dialogue */
--ig-gray-700: var(--ig-surface-300-contrast); /* Couleur des labels des champs de saisie */
--ig-gray-900: var(--ig-surface-500-contrast); /* Couleur des placeholders & saisie des champs de saisie actifs */
/* #endregion */
/* #region COULEUR SURFACES */
/* --- Couleur de référence = #FFFFFF = Blanc --- */
--ig-surface-h: 100deg;
--ig-surface-s: 0%;
--ig-surface-l: 100%;
--ig-surface-a: 1;
/* Calcul automatique de la luminosité des surfaces */
--ig-surface-l-ref: clamp(0%, calc((var(--ig-surface-l) - 60%) * 100), 100%); /* Luminosité de référence */
--ig-surface-l-400: clamp(5%, var(--ig-surface-l-ref) - 5%, 95%); /* Luminosité des surfaces de rang 1 */
--ig-surface-l-300: clamp(20%, var(--ig-surface-l-ref) - 25%, 75%); /* Luminosité des surfaces de rang 2 */
--ig-surface-l-900: 50%; /* Luminosité des surfaces de rang 3 */
/* -- Application de la luminosité des surfaces -- */
--ig-surface-500: var(--ig-surface-h), var(--ig-surface-s), var(--ig-surface-l-ref); /* Couleur de fond du site */
--ig-surface-400: var(--ig-surface-h), var(--ig-surface-s), var(--ig-surface-l-400); /* Couleur de fond pour les div elevation de rang 1 (ex. layouts) */
--ig-surface-300: var(--ig-surface-h), var(--ig-surface-s), var(--ig-surface-l-300); /* Couleur de fond pour les div elevation de rang 2 (ex. formulaires) */
--ig-surface-900: var(--ig-surface-h), var(--ig-surface-s), var(--ig-surface-l-900); /* Couleur de fond pour le bloc d'accessibilité (rang 3) */
/* #endregion */
/* #region COULEURS DES TEXTES */
/* --------------------------------------------- */
/* --- NE PAS CHANGER, CALCULS AUTOMATIQUES ---- */
/* --------------------------------------------- */
--ig-surface-500-contrast: hsl(var(--ig-surface-h), var(--ig-surface-s), clamp(0%, calc(calc(var(--ig-surface-l-ref) - 60%) * -100), 100%)); /* Couleur de contraste pour les textes sur le fond du site */
--ig-surface-400-contrast: hsl(var(--ig-surface-h), var(--ig-surface-s), clamp(0%, calc(calc(var(--ig-surface-l-400) - 60%) * -100), 100%)); /* Couleur de contraste pour les textes sur les surfaces de rang 1 */
--ig-surface-300-contrast: hsl(var(--ig-surface-h), var(--ig-surface-s), clamp(0%, calc(calc(var(--ig-surface-l-300) - 60%) * -100), 100%)); /* Couleur de contraste pour les textes sur les surfaces de rang 2 */
--ig-surface-900-contrast: hsl(var(--ig-surface-h), var(--ig-surface-s), clamp(0%, calc(calc(var(--ig-surface-l-900) - 60%) * -100), 100%)); /* Couleur de contraste pour les textes sur les surfaces de rang 3 */
--ig-primary-500-contrast: hsl(var(--ig-primary-h), var(--ig-primary-s), clamp(0%, calc(calc(var(--ig-primary-l) - 60%) * -100), 100%)); /* Couleur de contraste pour les textes sur la couleur primaire */
--ig-secondary-500-contrast: hsl(var(--ig-secondary-h), var(--ig-secondary-s), clamp(0%, calc(calc(var(--ig-secondary-l) - 60%) * -100), 100%)); /* Couleur de contraste pour les textes sur la couleur secondaire */
/* #endregion */
/* #endregion */
/* #region VARIABLES SPECIFIQUES */
/* Police d'écriture du site */
--ig-font-family: Calibri, sans-serif;
--specific-title-font-family: var(--ig-font-family);
/* /!\ Avant de modifier ces variables, ajustez les couleurs primaires & secondaires en priorité /!\ */
/* #region SURFACES */
--surface-0-fond: hsl(var(--ig-surface-500)); /* Fond de l'application */
--surface-0-texte: var(--ig-surface-500-contrast);
--surface-1-fond: hsl(var(--ig-surface-400)); /* Cadres & surfaces primaires de l'application */
--surface-1-texte: var(--ig-surface-400-contrast);
--surface-2-fond: hsl(var(--ig-surface-300)); /* Formulaires & surfaces secondaires de l'application (ex. Headers des grilles) */
--surface-2-texte: var(--ig-surface-300-contrast);
--accessibilite-fond: hsl(var(--ig-surface-900)); /* Bloc d'accessibilité */
--accessibilite-texte: var(--ig-surface-900-contrast);
--footer-fond: hsl(var(--ig-surface-400)); /* Fond du footer */
--footer-texte: hsl(var(--ig-primary-500)); /* Texte du footer */
--header-fond: hsl(var(--ig-surface-500)); /* Fond de l'entête */
--header-texte: var(--ig-surface-500-contrast); /* Texte de l'entête */
--cartes-texte: hsl(var(--ig-primary-500)); /* Text des cartes cliquables (ex. Page "Mes passages en déchetterie") */
--cartes-paires-fond: hsla(var(--ig-secondary-500), clamp(20%, calc((var(--ig-surface-l-ref) - 20%) * -100), 80%)); /* Fond des cartes cliquables d'index pair */
--cartes-impaires-fond: hsla(var(--ig-secondary-500), clamp(40%, calc((var(--ig-surface-l-ref) - 40%) * -100), 60%)); /* Texte des cartes cliquables d'index impair */
--cartes-bords-couleur: var(--ig-surface-500-contrast); /* Couleur des bordures des cartes cliquables */
/*#endregion */
/* #region BOUTONS */
--bouton-fond: hsl(var(--ig-primary-500)); /* Fond des boutons */
--bouton-texte: var(--ig-primary-500-contrast); /* Texte des boutons */
--bouton-hover-fond: hsl(var(--ig-secondary-500)); /* Fond des boutons lors du passage de la souris */
--bouton-hover-texte: var(--ig-secondary-500-contrast); /* Texte des boutons lors du passage de la souris */
--bouton-focus-fond: hsl(var(--ig-secondary-500)); /* Fond des boutons lors du clic */
--bouton-focus-texte: var(--ig-secondary-500-contrast); /* Texte des boutons lors du clic */
/*#endregion */
/* #region LIENS*/
--lien-texte: hsl(var(--ig-primary-500)); /* Couleur des liens génériques */
--lien-texte-surface-0: var(--lien-texte); /* Couleur des liens génériques */
--lien-texte-surface-1: var(--lien-texte); /* Couleur des liens génériques */
--lien-texte-surface-2: var(--lien-texte); /* Couleur des liens génériques */
--lien-hover-texte: hsl(var(--ig-secondary-500)); /* Couleur des liens génériques lors du passage de la souris */
--lien-hover-texte-surface-0: var(--lien-hover-texte); /* Couleur des liens génériques lors du passage de la souris */
--lien-hover-texte-surface-1: var(--lien-hover-texte); /* Couleur des liens génériques lors du passage de la souris */
--lien-hover-texte-surface-2: var(--lien-hover-texte); /* Couleur des liens génériques lors du passage de la souris */
/*#endregion*/
/* #region TITRES */
--titre-site-texte: hsl(var(--ig-primary-500)); /* Couleur du titre du site (= h1) */
--sous-titre-site-texte: hsl(0, 0%, 27%); /* Couleur du sous-titre du site */
--titre-site-poids: bold; /* Poids du titre du site (= h1) */
--titre-page-texte: hsl(var(--ig-primary-500)); /* Couleur du titre d'une page (= h2) */
--titre-categorie-texte: hsl(var(--ig-primary-500)); /* Couleur du titre d'une catégorie (= h3) */
--sous-titre-texte: hsl(var(--ig-primary-500)); /* Couleur des sous-titres de manière générale */
--specific-title-font-family: var(--ig-font-family);
--ig-h1-font-family: var(--specific-title-font-family);
--ig-h2-font-family: var(--specific-title-font-family);
--ig-h3-font-family: var(--specific-title-font-family);
/*#endregion */
/* #region GRILLES */
--grille-header-fond: hsl(var(--ig-surface-300)); /* Fond de l'entête des grilles */
--grille-header-texte: var(--ig-surface-300-contrast); /* Texte de l'entête des grilles */
--sort-icon: var(--ig-surface-300-contrast); /* Couleur des icônes de tri dans les grilles */
--grille-ligne-paire-texte: var(--ig-gray-100-contrast); /* Change la couleur du texte des cellules paires des tableaux Infragistics */
--grille-ligne-paire-fond: hsl(var(--ig-gray-100)); /* Change la couleur de fond des cellules paires des tableaux Infragistics */
--grille-ligne-impaire-texte: var(--ig-surface-500-contrast); /* Change la couleur du texte des cellules impaires des tableaux Infragistics */
--grille-ligne-impaire-fond: hsl(var(--ig-surface-500)); /* Change la couleur de fond des cellules impaires des tableaux Infragistics */
/*#endregion */
/* #region CHAMPS DES FORMULAIRES */
--champs-saisie-texte: hsl(var(--ig-black)); /* Couleur du texte des champs de saisie et des suffixes */
--champs-saisie-focus-texte: hsl(var(--ig-black)); /* Couleur du texte des champs de saisie en cours d'écriture */
--champs-saisie-placeholder-texte: hsl(var(--ig-gray-200)); /* Couleur des placeholders des champs de saisie désactivés */
--champs-saisie-bord: var(--ig-gray-400); /* Couleur des bordures des champs de saisie */
--suffixe-champs: var(--input-group-text-color);
--suffixe-champs-focus: var(--input-group-text-color);
/*#endregion*/
/* #region AUTRES*/
--checkbox-desactivee-fond: hsla(var(--ig-primary-500), 50%); /* Fond des cases à cocher désactivées */
--couleur-icones: var(--ig-surface-500-contrast); /* Couleur des icônes */
--tile-menu: hsl(var(--ig-primary-500)); /* Couleur des tuiles du menu */
/*#endregion*/
/*#endregion*/
/* #region VARIABLES DE CONFIGURATION */
/* -------- NE PAS MODIFIER! ------- */
--ig-button-font-size: 1.25rem; /* Taille de la police des boutons & des pills */
--ig-button-line-height: 1.5; /* Hauteur de ligne des boutons & des pills */
--igx-grid-header-border-width: 0; /* Elimine les bords obsolètes des grilles */
--ig-radius-factor: 0.5; /* Facteur d'arrondissement des bords pour les champs de saisie */
--igx-button-border-radius: 0; /* Permet de ne pas appliquer de ratio d'arrondissement aux boutons Infragistics */
--ig-h2-font-weight: 700; /* Change le poids du titre de page (h2) */
--ig-h2-font-size: 1.6rem; /* Change la taille du titre de page (h2) */
--ig-h1-font-size: 2rem; /* Change la taille du titre principal (h1) */
--ig-h3-font-size: 1.4rem; /* Change la taille du titre de catégories (h3) */
--ig-h5-font-size: 1.2rem; /* Change la taille des sous-titres (h5) */
--igx-button-shadow-color: transparent; /* Supprime l'ombre des boutons Infragistics */
--ig-white: 360deg, 100%, 100%; /* Blanc */
--ig-black: 0deg, 0%, 0%; /* Noir */
--igx-stepper-current-indicator-outline: transparent; /* Supprime le contour de l'indicateur de progression des steppers (bug graphique) */
--igx-stepper-invalid-indicator-outline: transparent; /* Supprime le contour de l'indicateur d'erreur des steppers (bug graphique) */
--igx-drop-down-border-width: 0px;
--ig-h1-font-weight: var(--titre-site-poids); /* Poids du titre du site (= h1) */
/*#endregion*/
/* /!\ NE PAS MODIFIER, NE PAS OVERRIDE /!\ */
/* #region BINDINGS IGX & VARIABLES LOCALES */
/* #region BOUTONS */
--igx-button-background: var(--bouton-fond);
--igx-button-foreground: var(--bouton-texte);
--igx-button-focus-background: var(--bouton-focus-fond);
--igx-button-focus-foreground: var(--bouton-focus-texte);
--igx-button-hover-background: var(--bouton-hover-fond);
--igx-button-hover-foreground: var(--bouton-hover-texte);
--igx-button-disabled-background: var(--bouton-fond);
/* #endregion */
/* #region CHAMPS DES FORMULAIRES */
--igx-input-group-border-color: var(--champs-saisie-bord);
--igx-input-group-disabled-placeholder-color: var(--champs-saisie-placeholder-texte);
--igx-input-group-filled-text-color: var(--champs-saisie-texte);
--igx-input-group-focused-text-color: var(--champs-saisie-focus-texte);
--igx-input-group-input-suffix-color: var(--suffixe-champs);
--igx-input-group-input-suffix-color--focused: var(--suffixe-champs-focus);
--igx-select-toggle-button-background: hsl(var(--ig-gray-300));
--igx-input-group-box-border-radius: 0.25rem;
--box-border-radius: 0.25rem;
/* #endregion */
/* #region GRILLES */
--igx-grid-header-text-color: var(--grille-header-texte);
--igx-grid-header-background: var(--grille-header-fond);
/* #endregion */
/* #region AUTRES */
--igx-card-content-text-color: var(--cartes-texte);
--igx-checkbox-disabled-color: var(--checkbox-desactivee-fond);
--igx-icon-color: var(--couleur-icones);
/* #endregion */
/* #endregion */
}