$cl-primary: #3a5199;
$cl-secondary: #2F2E33;
$cl-tertiary: #D5D6D2;
$cl-black: #353535;
$cl-white: white;
$cl-gris: #E6E6E6;
$cl-gris-clair: #EFEEE6;
$cl-gris-fonce: #5D647A;
$cl-jaune: #FFC961;
$cl-jaune-clair: #FFC961;
$cl-orange: #E25026;
$cl-orange-clair: #EC6E47;
$cl-bleu: #374754;
$cl-bleu-clair: #98cbd3;
$cl-rouge: #982F0F;
$cl-rouge-clair: #FC0505;
$cl-vert: #5cb85c;

/* ------- BACKGROUND -------- */
@mixin bg-cl($color){background-color: $color;}

/* ------- TEXT -------- */
@mixin text-cl($color){color: $color;}

/* -------- BORDER ----- */
@mixin border-cl($color){
    border: 1px solid;
    border-color: $color;
}

/* ------- BACKGROUND -------- */
.bg-cl-primary{@include bg-cl($cl-primary);}

.bg-cl-secondary{@include bg-cl($cl-secondary);}

.bg-cl-tertiary{@include bg-cl($cl-tertiary);}

.bg-cl-black{@include bg-cl($cl-black);}

.bg-cl-white{@include bg-cl($cl-white);}

.bg-cl-gris{@include bg-cl($cl-gris);}

.bg-cl-gris-clair{@include bg-cl($cl-gris-clair);}

.bg-cl-gris-fonce{@include bg-cl($cl-gris-fonce);}

.bg-cl-jaune{@include bg-cl($cl-jaune);}

.bg-cl-jaune-clair{@include bg-cl($cl-jaune-clair);}

.bg-cl-orange{@include bg-cl($cl-orange);}

.bg-cl-orange-clair{@include bg-cl($cl-orange-clair);}

.bg-cl-bleu{@include bg-cl($cl-bleu);}

.bg-cl-bleu-clair{@include bg-cl($cl-bleu-clair);}

.bg-cl-rouge{@include bg-cl($cl-rouge);}

.bg-cl-rouge-clair{@include bg-cl($cl-rouge-clair);}

.bg-cl-vert{@include bg-cl($cl-vert);}

/* ------- TEXT -------- */
.text-cl-primary{@include text-cl($cl-primary);}

.text-cl-secondary{@include text-cl($cl-secondary);}

.text-cl-tertiary{@include text-cl($cl-tertiary);}

.text-cl-black{@include text-cl($cl-black);}

.text-cl-white{@include text-cl($cl-white);}

.text-cl-gris{@include text-cl($cl-gris);}

.text-cl-gris-clair{@include text-cl($cl-gris-clair);}

.text-cl-gris-fonce{@include text-cl($cl-gris-fonce);}

.text-cl-jaune{@include text-cl($cl-jaune);}

.text-cl-jaune-clair{@include text-cl($cl-jaune-clair);}

.text-cl-orange{@include text-cl($cl-orange);}

.text-cl-orange-clair{@include text-cl($cl-orange-clair);}

.text-cl-bleu{@include text-cl($cl-bleu);}

.text-cl-bleu-clair{@include text-cl($cl-bleu-clair);}

.text-cl-rouge{@include text-cl($cl-rouge);}

.text-cl-rouge-clair{@include text-cl($cl-rouge-clair);}

.text-cl-vert{@include text-cl($cl-vert);}

/* -------- BORDER ----- */
.border-cl-primary{@include border-cl($cl-primary);}

.border-cl-secondary{@include border-cl($cl-secondary);}

.border-cl-tertiary{@include border-cl($cl-tertiary);}

.border-cl-black{@include border-cl($cl-black);}

.border-cl-white{@include border-cl($cl-white);}

.border-cl-gris{@include border-cl($cl-gris);}

.border-cl-gris-clair{@include border-cl($cl-gris-clair);}

.border-cl-gris-fonce{@include border-cl($cl-gris-fonce);}

.border-cl-jaune{@include border-cl($cl-jaune);}

.border-cl-jaune-clair{@include border-cl($cl-jaune-clair);}

.border-cl-orange{@include border-cl($cl-orange);}

.border-cl-orange-clair{@include border-cl($cl-orange-clair);}

.border-cl-bleu{@include border-cl($cl-bleu);}

.border-cl-bleu-clair{@include border-cl($cl-bleu-clair);}

.border-cl-rouge{@include border-cl($cl-rouge);}

.border-cl-rouge-clair{@include border-cl($cl-rouge-clair);}

.border-cl-vert{@include border-cl($cl-vert);}

.border-cl-none{ border: none;}

/* ---------------------------------------  HOVER   ------------------------------------------------ */
/* ------- HOVER BACKGROUND -------- */
.hover-bg-cl-primary:hover{@include bg-cl($cl-primary);}

.hover-bg-cl-secondary:hover{@include bg-cl($cl-secondary);}

.hover-bg-cl-tertiary:hover{@include bg-cl($cl-tertiary);}

.hover-bg-cl-black:hover{@include bg-cl($cl-black);}

.hover-bg-cl-white:hover{@include bg-cl($cl-white);}

.hover-bg-cl-gris:hover{@include bg-cl($cl-gris);}

.hover-bg-cl-gris-clair:hover{@include bg-cl($cl-gris-clair);}

.hover-bg-cl-gris-fonce:hover{@include bg-cl($cl-gris-fonce);}

.hover-bg-cl-jaune:hover{@include bg-cl($cl-jaune);}

.hover-bg-cl-jaune-clair:hover{@include bg-cl($cl-jaune-clair);}

.hover-bg-cl-orange:hover{@include bg-cl($cl-orange);}

.hover-bg-cl-orange-clair:hover{@include bg-cl($cl-orange-clair);}

.hover-bg-cl-bleu:hover{@include bg-cl($cl-bleu);}

.hover-bg-cl-bleu-clair:hover{@include bg-cl($cl-bleu-clair);}

.hover-bg-cl-rouge:hover{@include bg-cl($cl-rouge);}

.hover-bg-cl-rouge-clair:hover{@include bg-cl($cl-rouge-clair);}

.hover-bg-cl-vert:hover{@include bg-cl($cl-vert);}

/* ------- HOVER TEXT -------- */
.hover-text-cl-primary:hover{@include text-cl($cl-primary);}

.hover-text-cl-secondary:hover{@include text-cl($cl-secondary);}

.hover-text-cl-tertiary:hover{@include text-cl($cl-tertiary);}

.hover-text-cl-black:hover{@include text-cl($cl-black);}

.hover-text-cl-white:hover{@include text-cl($cl-white);}

.hover-text-cl-gris:hover{@include text-cl($cl-gris);}

.hover-text-cl-gris-clair:hover{@include text-cl($cl-gris-clair);}

.hover-text-cl-gris-fonce:hover{@include text-cl($cl-gris-fonce);}

.hover-text-cl-jaune:hover{@include text-cl($cl-jaune);}

.hover-text-cl-jaune-clair:hover{@include text-cl($cl-jaune-clair);}

.hover-text-cl-orange:hover{@include text-cl($cl-orange);}

.hover-text-cl-orange-clair:hover{@include text-cl($cl-orange-clair);}

.hover-text-cl-bleu:hover{@include text-cl($cl-bleu);}

.hover-text-cl-bleu-clair:hover{@include text-cl($cl-bleu-clair);}

.hover-text-cl-rouge:hover{@include text-cl($cl-rouge);}

.hover-text-cl-rouge-clair:hover{@include text-cl($cl-rouge-clair);}

.hover-text-cl-vert:hover{@include text-cl($cl-vert);}

/* -------- HOVER BORDER ----- */
.hover-border-cl-primary:hover{@include border-cl($cl-primary);}

.hover-border-cl-secondary:hover{@include border-cl($cl-secondary);}

.hover-border-cl-tertiary:hover{@include border-cl($cl-tertiary);}

.hover-border-cl-black:hover{@include border-cl($cl-black);}

.hover-border-cl-white:hover{@include border-cl($cl-white);}

.hover-border-cl-gris:hover{@include border-cl($cl-gris);}

.hover-border-cl-gris-clair:hover{@include border-cl($cl-gris-clair);}

.hover-border-cl-gris-fonce:hover{@include border-cl($cl-gris-fonce);}

.hover-border-cl-jaune:hover{@include border-cl($cl-jaune);}

.hover-border-cl-jaune-clair:hover{@include border-cl($cl-jaune-clair);}

.hover-border-cl-orange:hover{@include border-cl($cl-orange);}

.hover-border-cl-orange-clair:hover{@include border-cl($cl-orange-clair);}

.hover-border-cl-bleu:hover{@include border-cl($cl-bleu);}

.hover-border-cl-bleu-clair:hover{@include border-cl($cl-bleu-clair);}

.hover-border-cl-rouge:hover{@include border-cl($cl-rouge);}

.hover-border-cl-rouge-clair:hover{@include border-cl($cl-rouge-clair);}

.hover-border-cl-vert:hover{@include border-cl($cl-vert);}