:root{
    --clr-neutral-400: #FFFFFF;
    --clr-neutral-450: #f9f9f9; /* BODY ? */
    --clr-neutral-500: #f0f2f4;
    --clr-neutral-600: #d4f3fe;
    --clr-neutral-700: #f6f6f6;
    --clr-neutral-800: #e0e0e0;
    --clr-neutral-850: #b4b4b4;
    --clr-neutral-900: #878787;
    --clr-neutral-950: #636361;
    --clr-neutral-1000: #3e3f3a;
    --clr-dark: #121212;
    --clr-well: #f8f5f0;

    --clr-nav-barre: #00a4c0;

    --clr-base-green: #93c54b;
    --clr-base-purple: #a434eb;
    --clr-base-pink: #eb34ab;

    --clr-glossy-green: #58c074;
    --clr-glossy-yellow: #fbb376;
    --clr-glossy-orange: #f19e38;
    --clr-glossy-red: #ea3751;
    --clr-glossy-dark-blue: #5654d4;
    --clr-glossy-dark-blue-light: #7876e6;
    --clr-glossy-blue: #5cc8e4;

    --clr-pastel-yellow: #fcecbd;
    --clr-pastel-blue: #e7f5ff;
    --clr-pastel-dark-blue: #1885e4;
    --clr-pastel-red: #FF9A9A;

    --clr-pastel-green: #e7ffe7;
    --clr-pastel-dark-green: #88b645;

    --clr-elec: #1c8be7;
    --clr-combustible: #0aa30c;
    --clr-eau: #0bdff3;
    --clr-generique: #eecd0d;

    --clr-elec-c1: #93c54b;
    --clr-elec-c2: #93c54b;
    --clr-elec-c3: #93c54b;
    --clr-elec-c4: #FBB376FF;
    --clr-elec-c5: #1e3a8a;

    --clr-gaz-t1: #1E3A8A;
    --clr-gaz-t2: #6366F1;
    --clr-gaz-t3: #06B6D4;
    --clr-gaz-t4: #0EA5A4;

    --clr-to-be-assigned: #ffa50080;
    --clr-in-progress: #009dff80;
    --clr-ended: #00800080;
    --clr-budget-estimer: #ffc0cb7a;

    --clr-icon-elec: #3654ff;
    --clr-icon-gaz: #ae36ff;
    --clr-icon-eau:  #0bdff3;
    --clr-icon-generique: #868686;

    --p1-gaz: #00a4c0;
    --p2-gaz: #c832e8;
    --p1-light-gaz: #eaf4fe;
    --p2-light-gaz: #fae9fd;
}

.bg-neutral-color-400{ background-color: var(--clr-neutral-400); }
.bg-neutral-450 {background-color: var(--clr-neutral-450); }
.bg-neutral-color-500{ background-color: var(--clr-neutral-500); }
.bg-neutral-color-700{ background-color: var(--clr-neutral-700); }
.bg-neutral-color-600{ background-color: var(--clr-neutral-600); }
.bg-neutral-color-800{ background-color: var(--clr-neutral-800); }
.bg-neutral-color-900{ background-color: var(--clr-neutral-900); }
.bg-neutral-color-950{background-color: var(--clr-neutral-950); }
.bg-neutral-color-1000{ background-color: var(--clr-neutral-1000); }
.bg-neutral-dark { background-color: var(--clr-dark); }
.bg-well{ background-color: var(--clr-well); }

.bg-elec-c1 {background-color: var(--clr-elec-c1); }
.bg-elec-c2 {background-color: var(--clr-elec-c2); }
.bg-elec-c3 {background-color: var(--clr-elec-c3); }
.bg-elec-c4 {background-color: var(--clr-elec-c4); }
.bg-elec-c5 {background-color: var(--clr-elec-c5); }

.bg-gaz-t1 {background-color: var(--clr-gaz-t1); }
.bg-gaz-t2 {background-color: var(--clr-gaz-t2); }
.bg-gaz-t3 {background-color: var(--clr-gaz-t3); }
.bg-gaz-t4 {background-color: var(--clr-gaz-t4); }

.bg-nav-barre {background-color: var(--clr-nav-barre); }
.bg-budget-estime {background-color: var(--clr-budget-estimer) }

.clr-base-green{color: var(--clr-base-green); }
.clr-base-purple{color: var(--clr-base-purple); }

.clr-neutral-400 {color: var(--clr-neutral-400); }
.clr-neutral-850 { color: var(--clr-neutral-850); }
.clr-neutral-900 { color: var(--clr-neutral-900); }
.clr-neutral-950{color: var(--clr-neutral-950); }
.clr-neutral-1000 { color: var(--clr-neutral-1000); }
.clr-neutral-dark { color: var(--clr-dark); }
.clr-glossy-green{ color: var(--clr-glossy-green);}
.clr-glossy-yellow{ color: var(--clr-glossy-yellow); }
.clr-glossy-orange{ color: var(--clr-glossy-orange); }
.clr-glossy-red{ color: var(--clr-glossy-red); }
.clr-glossy-dark-blue{ color: var(--clr-glossy-dark-blue); }
.clr-glossy-blue{ color: var(--clr-glossy-blue);}
.clr-glossy-dark-blue-light {color: var(--clr-glossy-dark-blue-light);}

.clr-pastel-yellow{ color: var(--clr-pastel-yellow);}
.clr-pastel-blue{ color: var(--clr-pastel-blue);}
.clr-pastel-dark-blue{ color: var(--clr-pastel-dark-blue);}
.clr-pastel-red{ color: var(--clr-pastel-red)}

.bg-glossy-green{ background-color: var(--clr-glossy-green);}
.bg-glossy-yellow{ background-color: var(--clr-glossy-yellow); }
.bg-glossy-orange{ background-color: var(--clr-glossy-orange); }
.bg-glossy-red{ background-color: var(--clr-glossy-red); } 
.bg-glossy-dark-blue{ background-color: var(--clr-glossy-dark-blue); }
.bg-glossy-blue{ background-color: var(--clr-glossy-blue);}
.bg-glossy-dark-blue-light {background-color: var(--clr-glossy-dark-blue-light); }

.bg-base-purple{background-color: var(--clr-base-purple); }

.bg-pastel-yellow{ background-color: var(--clr-pastel-yellow);}
.bg-pastel-blue{ background-color: var(--clr-pastel-blue);}
.bg-pastel-dark-blue{ background-color: var(--clr-pastel-dark-blue);}
.bg-pastel-red{ background-color: var(--clr-pastel-red)}

.bg-icon-elec {background-color: var(--clr-icon-elec); }
.bg-icon-gaz {background-color: var(--clr-icon-gaz); }
.bg-icon-eau {background-color: var(--clr-icon-eau);}
.bg-icon-generique {background-color: var(--clr-icon-generique);}

.badge-glossy-blue {background-color: var(--clr-glossy-blue); color: var(--clr-neutral-400);}

.clr-icon-elec {color: var(--clr-icon-elec); }
.clr-icon-gaz {color: var(--clr-icon-gaz); }
.clr-icon-eau {color: var(--clr-icon-eau);}
.clr-icon-generique {color: var(--clr-icon-generique);}

.clr-budget-estime {color: var(--clr-budget-estimer) }
.clr-icon-eau {color: var(--clr-icon-eau);}
.clr-icon-generique {color: var(--clr-icon-generique);}

.clr-nav-barre {color: var(--clr-nav-barre); }

.clr-p1-gaz {color: var(--p1-gaz) !important; }
.clr-p2-gaz {color: var(--p2-gaz) !important; }
.clr-p1-light-gaz {color: var(--p1-light-gaz) !important; }
.clr-p2-light-gaz {color: var(--p2-light-gaz) !important; }

.bg-p1-light-gaz {background-color: var(--p1-light-gaz) !important;}
.bg-p2-light-gaz {background-color: var(--p2-light-gaz) !important;}