/* ===========================================================
 | ░▒▓▓▓   MODULE : COLORSWAP - [COLSWAP]              ▓▓▓▒░ |
 | ░▒▓▓▓   MOD_1  : COLSWAP - [BASE] ➜ [LIGHT]         ▓▓▓▒░ |
 | ░▒▓▓▓   MOD_2  : COLSWAP - [BASE] ➜ [DARK]          ▓▓▓▒░ |
 | ░▒▓▓▓   MOD_3  : COLSWAP - [BASE] ➜ [WHITE]         ▓▓▓▒░ |
 | ░▒▓▓▓   MOD_4  : COLSWAP - [BASE] ➜ [REV-WHITE]     ▓▓▓▒░ |
 | ░▒▓▓▓                                               ▓▓▓▒░ |
 | ░▒▓▓▓   MOD_5  : COLSWAP - [DARK] ➜ [BASE]          ▓▓▓▒░ |
 | ░▒▓▓▓   MOD_6  : COLSWAP - [DARK] ➜ [LIGHT]         ▓▓▓▒░ |
 | ░▒▓▓▓   MOD_7  : COLSWAP - [DARK] ➜ [WHITE]         ▓▓▓▒░ |
 | ░▒▓▓▓   MOD_8  : COLSWAP - [DARK] ➜ [REV-WHITE]     ▓▓▓▒░ |
 | ░▒▓▓▓                                               ▓▓▓▒░ |
 | ░▒▓▓▓   MOD_9  : COLSWAP - [LIGHT] ➜ [DARK]         ▓▓▓▒░ |
 | ░▒▓▓▓   MOD_10 : COLSWAP - [LIGHT] ➜ [WHITE]        ▓▓▓▒░ |
 | ░▒▓▓▓   MOD_11 : COLSWAP - [LIGHT] ➜ [REV-WHITE]    ▓▓▓▒░ |
 | ░▒▓▓▓   MOD_12 : COLSWAP - [LIGHT] ➜ [BASE]         ▓▓▓▒░ |
 | ░▒▓▓▓                                               ▓▓▓▒░ |
 | ░▒▓▓▓   MOD_13 : COLSWAP - [WHITE] ➜ [BASE]         ▓▓▓▒░ |
 | ░▒▓▓▓   MOD_14 : COLSWAP - [WHITE] ➜ [DARK]         ▓▓▓▒░ |
 | ░▒▓▓▓   MOD_15 : COLSWAP - [WHITE] ➜ [LIGHT]        ▓▓▓▒░ |
 | ░▒▓▓▓                                               ▓▓▓▒░ |
 | ░▒▓▓▓   MOD_16 : COLSWAP - [REV-WHITE] ➜ [BASE]     ▓▓▓▒░ |
 | ░▒▓▓▓   MOD_17 : COLSWAP - [REV-WHITE] ➜ [DARK]     ▓▓▓▒░ |
 | ░▒▓▓▓   MOD_18 : COLSWAP - [REV-WHITE] ➜ [LIGHT]    ▓▓▓▒░ |
 | ░▒▓▓▓   MOD_19 : COLSWAP - [REV-WHITE] ➜ [LIGHT]    ▓▓▓▒░ |
 |-----------------------------------------------------------|
 | Description : Styles de transition du clair vers foncé    |
 | Auteur      : Mirage Noctis pour Allan                    |
 | ░▒▓▓▓   MOD_1  : COLSWAP - [BASE] ➜ [LIGHT]         ▓▓▓▒░ |
 |===========================================================*/

[class^="colswap-purple-to-"] {
  background-color: var(--purple);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
  color: white;
}

.colswap-purple-to-light-purple {
  background-color: var(--purple);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
  color: white;
}

.colswap-purple-to-light-purple:hover {
  background-color: var(--purple-light);
  color: var(--purple);
  border-color: var(--purple);
  transition: all 0.3s ease;
}

.colswap-blue-to-light-blue {
  background-color: var(--blue);
  color: white;
  border: 1px solid var(--blue);
  transition: all 0.3s ease;
}

.colswap-blue-to-light-blue:hover {
  background-color: var(--blue-light);
  color: var(--blue);
  border-color: var(--blue);
}

.colswap-red-to-light-red {
  background-color: var(--red);
  color: white;
  border: 1px solid var(--red);
  transition: all 0.3s ease;
}

.colswap-red-to-light-red:hover {
  background-color: var(--red-light);
  color: var(--red);
  border-color: var(--red);
}

.colswap-green-to-light-green {
  background-color: var(--green);
  color: white;
  border: 1px solid var(--green);
  transition: all 0.3s ease;
}

.colswap-green-to-light-green:hover {
  background-color: var(--green-light);
  color: var(--green);
  border-color: var(--green);
}

.colswap-yellow-to-light-yellow {
  background-color: var(--yellow);
  color: white;
  border: 1px solid var(--yellow);
  transition: all 0.3s ease;
}

.colswap-yellow-to-light-yellow:hover {
  background-color: var(--yellow-light);
  color: var(--yellow);
  border-color: var(--yellow);
}

.colswap-orange-to-light-orange {
  background-color: var(--orange);
  color: white;
  border: 1px solid var(--orange);
  transition: all 0.3s ease;
}

.colswap-orange-to-light-orange:hover {
  background-color: var(--orange-light);
  color: var(--orange);
  border-color: var(--orange);
}

.colswap-gray-to-light-gray {
  background-color: var(--gray);
  color: white;
  border: 1px solid var(--gray);
  transition: all 0.3s ease;
}

.colswap-gray-to-light-gray:hover {
  background-color: var(--gray-light);
  color: var(--gray);
  border-color: var(--gray);
}

.colswap-pink-to-light-pink {
  background-color: var(--pink);
  color: white;
  border: 1px solid var(--pink);
  transition: all 0.3s ease;
}

.colswap-pink-to-light-pink:hover {
  background-color: var(--pink-light);
  color: var(--pink);
  border-color: var(--pink);
}

.colswap-teal-to-light-teal {
  background-color: var(--teal);
  color: white;
  border: 1px solid var(--teal);
  transition: all 0.3s ease;
}

.colswap-teal-to-light-teal:hover {
  background-color: var(--teal-light);
  color: var(--teal);
  border-color: var(--teal);
}

.colswap-gold-to-light-gold {
  background-color: var(--gold);
  color: white;
  border: 1px solid var(--gold);
  transition: all 0.3s ease;
}

.colswap-gold-to-light-gold:hover {
  background-color: var(--gold-light);
  color: var(--gold);
  border-color: var(--gold);
}

.colswap-brown-to-light-brown {
  background-color: var(--brown);
  color: white;
  border: 1px solid var(--brown);
  transition: all 0.3s ease;
}

.colswap-brown-to-light-brown:hover {
  background-color: var(--brown-light);
  color: var(--brown);
  border-color: var(--brown);
}

.colswap-beige-to-light-beige {
  background-color: var(--beige);
  color: white;
  border: 1px solid var(--beige);
  transition: all 0.3s ease;
}

.colswap-beige-to-light-beige:hover {
  background-color: var(--beige-light);
  color: var(--beige);
  border-color: var(--beige);
}

.colswap-cyan-to-light-cyan {
  background-color: var(--cyan);
  color: white;
  border: 1px solid var(--cyan);
  transition: all 0.3s ease;
}

.colswap-cyan-to-light-cyan:hover {
  background-color: var(--cyan-light);
  color: var(--cyan);
  border-color: var(--cyan);
}

.colswap-indigo-to-light-indigo {
  background-color: var(--indigo);
  color: white;
  border: 1px solid var(--indigo);
  transition: all 0.3s ease;
}

.colswap-indigo-to-light-indigo:hover {
  background-color: var(--indigo-light);
  color: var(--indigo);
  border-color: var(--indigo);
}

.colswap-silver-to-light-silver {
  background-color: var(--silver);
  color: white;
  border: 1px solid var(--silver);
  transition: all 0.3s ease;
}

.colswap-silver-to-light-silver:hover {
  background-color: var(--silver-light);
  color: var(--silver);
  border-color: var(--silver);
}

.colswap-black-to-light-black {
  background-color: var(--black);
  color: white;
  border: 1px solid var(--black);
  transition: all 0.3s ease;
}

.colswap-black-to-light-black:hover {
  background-color: var(--black-light);
  color: var(--black);
  border-color: var(--black);
}

.colswap-white-to-light-white {
  background-color: var(--white);
  color: white;
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}

.colswap-white-to-light-white:hover {
  background-color: var(--white-light);
  color: var(--white);
  border-color: var(--white);
}

.colswap-lime-to-light-lime {
  background-color: var(--lime);
  color: white;
  border: 1px solid var(--lime);
  transition: all 0.3s ease;
}

.colswap-lime-to-light-lime:hover {
  background-color: var(--lime-light);
  color: var(--lime);
  border-color: var(--lime);
}

.colswap-sky-to-light-sky {
  background-color: var(--sky);
  color: white;
  border: 1px solid var(--sky);
  transition: all 0.3s ease;
}

.colswap-sky-to-light-sky:hover {
  background-color: var(--sky-light);
  color: var(--sky);
  border-color: var(--sky);
}

.colswap-magenta-to-light-magenta {
  background-color: var(--magenta);
  color: white;
  border: 1px solid var(--magenta);
  transition: all 0.3s ease;
}

.colswap-magenta-to-light-magenta:hover {
  background-color: var(--magenta-light);
  color: var(--magenta);
  border-color: var(--magenta);
}

.colswap-coral-to-light-coral {
  background-color: var(--coral);
  color: white;
  border: 1px solid var(--coral);
  transition: all 0.3s ease;
}

.colswap-coral-to-light-coral:hover {
  background-color: var(--coral-light);
  color: var(--coral);
  border-color: var(--coral);
}

.colswap-navy-to-light-navy {
  background-color: var(--navy);
  color: white;
  border: 1px solid var(--navy);
  transition: all 0.3s ease;
}

.colswap-navy-to-light-navy:hover {
  background-color: var(--navy-light);
  color: var(--navy);
  border-color: var(--navy);
}

.colswap-olive-to-light-olive {
  background-color: var(--olive);
  color: white;
  border: 1px solid var(--olive);
  transition: all 0.3s ease;
}

.colswap-olive-to-light-olive:hover {
  background-color: var(--olive-light);
  color: var(--olive);
  border-color: var(--olive);
}

/* ==========================================================
 | ░▒▓▓▓   MOD_2  : COLSWAP - [BASE] ➜ [DARK]         ▓▓▓▒░ |
 |----------------------------------------------------------|
 | Description : Transitions de base vers teinte foncé      |
 |==========================================================*/

.colswap-purple-to-dark-purple {
  background-color: var(--purple);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
  color: white;
}

.colswap-purple-to-dark-purple:hover {
  background-color: var(--purple-dark);
  color: white;
  border: 1px solid var(--purple-dark);
}

.colswap-blue-to-dark-blue {
  background-color: var(--blue);
  color: white;
  border: 1px solid var(--blue);
}

.colswap-blue-to-dark-blue:hover {
  background-color: var(--blue-dark);
  color: white;
  border: 1px solid var(--blue-dark);
}

.colswap-red-to-dark-red {
  background-color: var(--red);
  color: white;
  border: 1px solid var(--red);
}

.colswap-red-to-dark-red:hover {
  background-color: var(--red-dark);
  color: white;
  border: 1px solid var(--red-dark);
}

.colswap-green-to-dark-green {
  background-color: var(--green);
  color: white;
  border: 1px solid var(--green);
}

.colswap-green-to-dark-green:hover {
  background-color: var(--green-dark);
  color: white;
  border: 1px solid var(--green-dark);
}

.colswap-yellow-to-dark-yellow {
  background-color: var(--yellow);
  color: white;
  border: 1px solid var(--yellow);
}

.colswap-yellow-to-dark-yellow:hover {
  background-color: var(--yellow-dark);
  color: white;
  border: 1px solid var(--yellow-dark);
}

.colswap-orange-to-dark-orange {
  background-color: var(--orange);
  color: white;
  border: 1px solid var(--orange);
}

.colswap-orange-to-dark-orange:hover {
  background-color: var(--orange-dark);
  color: white;
  border: 1px solid var(--orange-dark);
}

.colswap-gray-to-dark-gray {
  background-color: var(--gray);
  color: white;
  border: 1px solid var(--gray);
}

.colswap-gray-to-dark-gray:hover {
  background-color: var(--gray-dark);
  color: white;
  border: 1px solid var(--gray-dark);
}

.colswap-pink-to-dark-pink {
  background-color: var(--pink);
  color: white;
  border: 1px solid var(--pink);
}

.colswap-pink-to-dark-pink:hover {
  background-color: var(--pink-dark);
  color: white;
  border: 1px solid var(--pink-dark);
}

.colswap-teal-to-dark-teal {
  background-color: var(--teal);
  color: white;
  border: 1px solid var(--teal);
}

.colswap-teal-to-dark-teal:hover {
  background-color: var(--teal-dark);
  color: white;
  border: 1px solid var(--teal-dark);
}

.colswap-gold-to-dark-gold {
  background-color: var(--gold);
  color: white;
  border: 1px solid var(--gold);
}

.colswap-gold-to-dark-gold:hover {
  background-color: var(--gold-dark);
  color: white;
  border: 1px solid var(--gold-dark);
}

.colswap-brown-to-dark-brown {
  background-color: var(--brown);
  color: white;
  border: 1px solid var(--brown);
}

.colswap-brown-to-dark-brown:hover {
  background-color: var(--brown-dark);
  color: white;
  border: 1px solid var(--brown-dark);
}

.colswap-beige-to-dark-beige {
  background-color: var(--beige);
  color: white;
  border: 1px solid var(--beige);
}

.colswap-beige-to-dark-beige:hover {
  background-color: var(--beige-dark);
  color: white;
  border: 1px solid var(--beige-dark);
}

.colswap-cyan-to-dark-cyan {
  background-color: var(--cyan);
  color: white;
  border: 1px solid var(--cyan);
}

.colswap-cyan-to-dark-cyan:hover {
  background-color: var(--cyan-dark);
  color: white;
  border: 1px solid var(--cyan-dark);
}

.colswap-indigo-to-dark-indigo {
  background-color: var(--indigo);
  color: white;
  border: 1px solid var(--indigo);
}

.colswap-indigo-to-dark-indigo:hover {
  background-color: var(--indigo-dark);
  color: white;
  border: 1px solid var(--indigo-dark);
}

.colswap-silver-to-dark-silver {
  background-color: var(--silver);
  color: white;
  border: 1px solid var(--silver);
}

.colswap-silver-to-dark-silver:hover {
  background-color: var(--silver-dark);
  color: white;
  border: 1px solid var(--silver-dark);
}
.colswap-black-to-dark-black {
  background-color: var(--black);
  color: white;
  border: 1px solid var(--black);
}

.colswap-black-to-dark-black:hover {
  background-color: var(--black-dark);
  color: white;
  border: 1px solid var(--black-dark);
}

.colswap-white-to-dark-white {
  background-color: var(--white);
  color: white;
  border: 1px solid var(--white);
}

.colswap-white-to-dark-white:hover {
  background-color: var(--white-dark);
  color: white;
  border: 1px solid var(--white-dark);
}

.colswap-lime-to-dark-lime {
  background-color: var(--lime);
  color: white;
  border: 1px solid var(--lime);
}

.colswap-lime-to-dark-lime:hover {
  background-color: var(--lime-dark);
  color: white;
  border: 1px solid var(--lime-dark);
}

.colswap-sky-to-dark-sky {
  background-color: var(--sky);
  color: white;
  border: 1px solid var(--sky);
}

.colswap-sky-to-dark-sky:hover {
  background-color: var(--sky-dark);
  color: white;
  border: 1px solid var(--sky-dark);
}

.colswap-magenta-to-dark-magenta {
  background-color: var(--magenta);
  color: white;
  border: 1px solid var(--magenta);
}

.colswap-magenta-to-dark-magenta:hover {
  background-color: var(--magenta-dark);
  color: white;
  border: 1px solid var(--magenta-dark);
}

.colswap-coral-to-dark-coral {
  background-color: var(--coral);
  color: white;
  border: 1px solid var(--coral);
}

.colswap-coral-to-dark-coral:hover {
  background-color: var(--coral-dark);
  color: white;
  border: 1px solid var(--coral-dark);
}

.colswap-navy-to-dark-navy {
  background-color: var(--navy);
  color: white;
  border: 1px solid var(--navy);
}

.colswap-navy-to-dark-navy:hover {
  background-color: var(--navy-dark);
  color: white;
  border: 1px solid var(--navy-dark);
}

.colswap-olive-to-dark-olive {
  background-color: var(--olive);
  color: white;
  border: 1px solid var(--olive);
}

.colswap-olive-to-dark-olive:hover {
  background-color: var(--olive-dark);
  color: white;
  border: 1px solid var(--olive-dark);
}

/* ==========================================================
 | ░▒▓▓▓   MOD_3  : COLSWAP - [BASE] ➜ [WHITE]        ▓▓▓▒░ |
 |----------------------------------------------------------|
 | Description : Transitions du blanc vers blanc            |
 |==========================================================*/

.colswap-purple-to-white {
  background-color: var(--purple);
  color: white;
  border: 1px solid var(--purple);
  transition: all 0.3s ease;
}
.colswap-purple-to-white:hover {
  background-color: white;
  color: var(--purple);
  border-color: white;
}

.colswap-blue-to-white {
  background-color: var(--blue);
  color: white;
  border: 1px solid var(--blue);
  transition: all 0.3s ease;
}
.colswap-blue-to-white:hover {
  background-color: white;
  color: var(--blue);
  border-color: white;
}

.colswap-red-to-white {
  background-color: var(--red);
  color: white;
  border: 1px solid var(--red);
  transition: all 0.3s ease;
}
.colswap-red-to-white:hover {
  background-color: white;
  color: var(--red);
  border-color: white;
}

.colswap-green-to-white {
  background-color: var(--green);
  color: white;
  border: 1px solid var(--green);
  transition: all 0.3s ease;
}
.colswap-green-to-white:hover {
  background-color: white;
  color: var(--green);
  border-color: white;
}

.colswap-yellow-to-white {
  background-color: var(--yellow);
  color: white;
  border: 1px solid var(--yellow);
  transition: all 0.3s ease;
}
.colswap-yellow-to-white:hover {
  background-color: white;
  color: var(--yellow);
  border-color: white;
}

.colswap-orange-to-white {
  background-color: var(--orange);
  color: white;
  border: 1px solid var(--orange);
  transition: all 0.3s ease;
}
.colswap-orange-to-white:hover {
  background-color: white;
  color: var(--orange);
  border-color: white;
}

.colswap-gray-to-white {
  background-color: var(--gray);
  color: white;
  border: 1px solid var(--gray);
  transition: all 0.3s ease;
}
.colswap-gray-to-white:hover {
  background-color: white;
  color: var(--gray);
  border-color: white;
}

.colswap-pink-to-white {
  background-color: var(--pink);
  color: white;
  border: 1px solid var(--pink);
  transition: all 0.3s ease;
}
.colswap-pink-to-white:hover {
  background-color: white;
  color: var(--pink);
  border-color: white;
}

.colswap-teal-to-white {
  background-color: var(--teal);
  color: white;
  border: 1px solid var(--teal);
  transition: all 0.3s ease;
}
.colswap-teal-to-white:hover {
  background-color: white;
  color: var(--teal);
  border-color: white;
}

.colswap-gold-to-white {
  background-color: var(--gold);
  color: white;
  border: 1px solid var(--gold);
  transition: all 0.3s ease;
}
.colswap-gold-to-white:hover {
  background-color: white;
  color: var(--gold);
  border-color: white;
}

.colswap-brown-to-white {
  background-color: var(--brown);
  color: white;
  border: 1px solid var(--brown);
  transition: all 0.3s ease;
}
.colswap-brown-to-white:hover {
  background-color: white;
  color: var(--brown);
  border-color: white;
}

.colswap-beige-to-white {
  background-color: var(--beige);
  color: white;
  border: 1px solid var(--beige);
  transition: all 0.3s ease;
}
.colswap-beige-to-white:hover {
  background-color: white;
  color: var(--beige);
  border-color: white;
}

.colswap-cyan-to-white {
  background-color: var(--cyan);
  color: white;
  border: 1px solid var(--cyan);
  transition: all 0.3s ease;
}
.colswap-cyan-to-white:hover {
  background-color: white;
  color: var(--cyan);
  border-color: white;
}

.colswap-indigo-to-white {
  background-color: var(--indigo);
  color: white;
  border: 1px solid var(--indigo);
  transition: all 0.3s ease;
}
.colswap-indigo-to-white:hover {
  background-color: white;
  color: var(--indigo);
  border-color: white;
}

.colswap-silver-to-white {
  background-color: var(--silver);
  color: white;
  border: 1px solid var(--silver);
  transition: all 0.3s ease;
}
.colswap-silver-to-white:hover {
  background-color: white;
  color: var(--silver);
  border-color: white;
}

.colswap-black-to-white {
  background-color: var(--black);
  color: white;
  border: 1px solid var(--black);
  transition: all 0.3s ease;
}
.colswap-black-to-white:hover {
  background-color: white;
  color: var(--black);
  border-color: white;
}

.colswap-white-to-white {
  background-color: var(--white);
  color: white;
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-white:hover {
  background-color: white;
  color: var(--white);
  border-color: white;
}

.colswap-lime-to-white {
  background-color: var(--lime);
  color: white;
  border: 1px solid var(--lime);
  transition: all 0.3s ease;
}
.colswap-lime-to-white:hover {
  background-color: white;
  color: var(--lime);
  border-color: white;
}

.colswap-sky-to-white {
  background-color: var(--sky);
  color: white;
  border: 1px solid var(--sky);
  transition: all 0.3s ease;
}
.colswap-sky-to-white:hover {
  background-color: white;
  color: var(--sky);
  border-color: white;
}

.colswap-magenta-to-white {
  background-color: var(--magenta);
  color: white;
  border: 1px solid var(--magenta);
  transition: all 0.3s ease;
}
.colswap-magenta-to-white:hover {
  background-color: white;
  color: var(--magenta);
  border-color: white;
}

.colswap-coral-to-white {
  background-color: var(--coral);
  color: white;
  border: 1px solid var(--coral);
  transition: all 0.3s ease;
}
.colswap-coral-to-white:hover {
  background-color: white;
  color: var(--coral);
  border-color: white;
}

.colswap-navy-to-white {
  background-color: var(--navy);
  color: white;
  border: 1px solid var(--navy);
  transition: all 0.3s ease;
}
.colswap-navy-to-white:hover {
  background-color: white;
  color: var(--navy);
  border-color: white;
}

.colswap-olive-to-white {
  background-color: var(--olive);
  color: white;
  border: 1px solid var(--olive);
  transition: all 0.3s ease;
}
.colswap-olive-to-white:hover {
  background-color: white;
  color: var(--olive);
  border-color: white;
}
/* ==========================================================
 | ░▒███   MOD_4  : COLSWAP - [LIGHT] ➔ [REV-WHITE]   ███▒░ |
 |---------------------------------------------------------- |
 | Description : Transitions du clair vers fond blanc        |
 |==========================================================*/

.colswap-purple-to-rev-white {
  background-color: var(--purple);
  color: white;
  border: 1px solid var(--purple);
  transition: all 0.3s ease;
}
.colswap-purple-to-rev-white:hover {
  background-color: white;
  color: var(--purple);
  border-color: var(--purple);
}

.colswap-blue-to-rev-white {
  background-color: var(--blue);
  color: white;
  border: 1px solid var(--blue);
  transition: all 0.3s ease;
}
.colswap-blue-to-rev-white:hover {
  background-color: white;
  color: var(--blue);
  border-color: var(--blue);
}

.colswap-red-to-rev-white {
  background-color: var(--red);
  color: white;
  border: 1px solid var(--red);
  transition: all 0.3s ease;
}
.colswap-red-to-rev-white:hover {
  background-color: white;
  color: var(--red);
  border-color: var(--red);
}

.colswap-green-to-rev-white {
  background-color: var(--green);
  color: white;
  border: 1px solid var(--green);
  transition: all 0.3s ease;
}
.colswap-green-to-rev-white:hover {
  background-color: white;
  color: var(--green);
  border-color: var(--green);
}

.colswap-yellow-to-rev-white {
  background-color: var(--yellow);
  color: white;
  border: 1px solid var(--yellow);
  transition: all 0.3s ease;
}
.colswap-yellow-to-rev-white:hover {
  background-color: white;
  color: var(--yellow);
  border-color: var(--yellow);
}

.colswap-orange-to-rev-white {
  background-color: var(--orange);
  color: white;
  border: 1px solid var(--orange);
  transition: all 0.3s ease;
}
.colswap-orange-to-rev-white:hover {
  background-color: white;
  color: var(--orange);
  border-color: var(--orange);
}

.colswap-gray-to-rev-white {
  background-color: var(--gray);
  color: white;
  border: 1px solid var(--gray);
  transition: all 0.3s ease;
}
.colswap-gray-to-rev-white:hover {
  background-color: white;
  color: var(--gray);
  border-color: var(--gray);
}

.colswap-pink-to-rev-white {
  background-color: var(--pink);
  color: white;
  border: 1px solid var(--pink);
  transition: all 0.3s ease;
}
.colswap-pink-to-rev-white:hover {
  background-color: white;
  color: var(--pink);
  border-color: var(--pink);
}

.colswap-teal-to-rev-white {
  background-color: var(--teal);
  color: white;
  border: 1px solid var(--teal);
  transition: all 0.3s ease;
}
.colswap-teal-to-rev-white:hover {
  background-color: white;
  color: var(--teal);
  border-color: var(--teal);
}

.colswap-gold-to-rev-white {
  background-color: var(--gold);
  color: white;
  border: 1px solid var(--gold);
  transition: all 0.3s ease;
}
.colswap-gold-to-rev-white:hover {
  background-color: white;
  color: var(--gold);
  border-color: var(--gold);
}

.colswap-brown-to-rev-white {
  background-color: var(--brown);
  color: white;
  border: 1px solid var(--brown);
  transition: all 0.3s ease;
}
.colswap-brown-to-rev-white:hover {
  background-color: white;
  color: var(--brown);
  border-color: var(--brown);
}

.colswap-beige-to-rev-white {
  background-color: var(--beige);
  color: white;
  border: 1px solid var(--beige);
  transition: all 0.3s ease;
}
.colswap-beige-to-rev-white:hover {
  background-color: white;
  color: var(--beige);
  border-color: var(--beige);
}

.colswap-cyan-to-rev-white {
  background-color: var(--cyan);
  color: white;
  border: 1px solid var(--cyan);
  transition: all 0.3s ease;
}
.colswap-cyan-to-rev-white:hover {
  background-color: white;
  color: var(--cyan);
  border-color: var(--cyan);
}

.colswap-indigo-to-rev-white {
  background-color: var(--indigo);
  color: white;
  border: 1px solid var(--indigo);
  transition: all 0.3s ease;
}
.colswap-indigo-to-rev-white:hover {
  background-color: white;
  color: var(--indigo);
  border-color: var(--indigo);
}

.colswap-silver-to-rev-white {
  background-color: var(--silver);
  color: white;
  border: 1px solid var(--silver);
  transition: all 0.3s ease;
}
.colswap-silver-to-rev-white:hover {
  background-color: white;
  color: var(--silver);
  border-color: var(--silver);
}

.colswap-black-to-rev-white {
  background-color: var(--black);
  color: white;
  border: 1px solid var(--black);
  transition: all 0.3s ease;
}
.colswap-black-to-rev-white:hover {
  background-color: white;
  color: var(--black);
  border-color: var(--black);
}

.colswap-white-to-rev-white {
  background-color: var(--white);
  color: white;
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-rev-white:hover {
  background-color: white;
  color: var(--white);
  border-color: var(--white);
}

.colswap-lime-to-rev-white {
  background-color: var(--lime);
  color: white;
  border: 1px solid var(--lime);
  transition: all 0.3s ease;
}
.colswap-lime-to-rev-white:hover {
  background-color: white;
  color: var(--lime);
  border-color: var(--lime);
}

.colswap-sky-to-rev-white {
  background-color: var(--sky);
  color: white;
  border: 1px solid var(--sky);
  transition: all 0.3s ease;
}
.colswap-sky-to-rev-white:hover {
  background-color: white;
  color: var(--sky);
  border-color: var(--sky);
}

.colswap-magenta-to-rev-white {
  background-color: var(--magenta);
  color: white;
  border: 1px solid var(--magenta);
  transition: all 0.3s ease;
}
.colswap-magenta-to-rev-white:hover {
  background-color: white;
  color: var(--magenta);
  border-color: var(--magenta);
}

.colswap-coral-to-rev-white {
  background-color: var(--coral);
  color: white;
  border: 1px solid var(--coral);
  transition: all 0.3s ease;
}
.colswap-coral-to-rev-white:hover {
  background-color: white;
  color: var(--coral);
  border-color: var(--coral);
}

.colswap-navy-to-rev-white {
  background-color: var(--navy);
  color: white;
  border: 1px solid var(--navy);
  transition: all 0.3s ease;
}
.colswap-navy-to-rev-white:hover {
  background-color: white;
  color: var(--navy);
  border-color: var(--navy);
}

.colswap-olive-to-rev-white {
  background-color: var(--olive);
  color: white;
  border: 1px solid var(--olive);
  transition: all 0.3s ease;
}
.colswap-olive-to-rev-white:hover {
  background-color: white;
  color: var(--olive);
  border-color: var(--olive);
}

/* ==========================================================
 | ░▒▓▓▓   MOD_5  : COLSWAP - [DARK] ➜ [BASE]          ▓▓▓▒░ |
 |----------------------------------------------------------|
 | Description : Transitions du foncé vers la couleur base  |
 |==========================================================*/

.colswap-dark-purple-to-purple {
  background-color: var(--purple-dark);
  color: white;
  border: 1px solid var(--purple-dark);
  transition: all 0.3s ease;
}

.colswap-dark-purple-to-purple:hover {
  background-color: var(--purple);
  color: white;
  border-color: var(--purple);
}

.colswap-dark-blue-to-blue {
  background-color: var(--blue-dark);
  color: white;
  border: 1px solid var(--blue-dark);
  transition: all 0.3s ease;
}

.colswap-dark-blue-to-blue:hover {
  background-color: var(--blue);
  color: white;
  border-color: var(--blue);
}

.colswap-dark-red-to-red {
  background-color: var(--red-dark);
  color: white;
  border: 1px solid var(--red-dark);
  transition: all 0.3s ease;
}

.colswap-dark-red-to-red:hover {
  background-color: var(--red);
  color: white;
  border-color: var(--red);
}

.colswap-dark-green-to-green {
  background-color: var(--green-dark);
  color: white;
  border: 1px solid var(--green-dark);
  transition: all 0.3s ease;
}

.colswap-dark-green-to-green:hover {
  background-color: var(--green);
  color: white;
  border-color: var(--green);
}

.colswap-dark-yellow-to-yellow {
  background-color: var(--yellow-dark);
  color: white;
  border: 1px solid var(--yellow-dark);
  transition: all 0.3s ease;
}

.colswap-dark-yellow-to-yellow:hover {
  background-color: var(--yellow);
  color: white;
  border-color: var(--yellow);
}

.colswap-dark-orange-to-orange {
  background-color: var(--orange-dark);
  color: white;
  border: 1px solid var(--orange-dark);
  transition: all 0.3s ease;
}

.colswap-dark-orange-to-orange:hover {
  background-color: var(--orange);
  color: white;
  border-color: var(--orange);
}

.colswap-dark-gray-to-gray {
  background-color: var(--gray-dark);
  color: white;
  border: 1px solid var(--gray-dark);
  transition: all 0.3s ease;
}

.colswap-dark-gray-to-gray:hover {
  background-color: var(--gray);
  color: white;
  border-color: var(--gray);
}

.colswap-dark-pink-to-pink {
  background-color: var(--pink-dark);
  color: white;
  border: 1px solid var(--pink-dark);
  transition: all 0.3s ease;
}

.colswap-dark-pink-to-pink:hover {
  background-color: var(--pink);
  color: white;
  border-color: var(--pink);
}

.colswap-dark-teal-to-teal {
  background-color: var(--teal-dark);
  color: white;
  border: 1px solid var(--teal-dark);
  transition: all 0.3s ease;
}

.colswap-dark-teal-to-teal:hover {
  background-color: var(--teal);
  color: white;
  border-color: var(--teal);
}

.colswap-dark-gold-to-gold {
  background-color: var(--gold-dark);
  color: white;
  border: 1px solid var(--gold-dark);
  transition: all 0.3s ease;
}

.colswap-dark-gold-to-gold:hover {
  background-color: var(--gold);
  color: white;
  border-color: var(--gold);
}

.colswap-dark-brown-to-brown {
  background-color: var(--brown-dark);
  color: white;
  border: 1px solid var(--brown-dark);
  transition: all 0.3s ease;
}

.colswap-dark-brown-to-brown:hover {
  background-color: var(--brown);
  color: white;
  border-color: var(--brown);
}

.colswap-dark-beige-to-beige {
  background-color: var(--beige-dark);
  color: white;
  border: 1px solid var(--beige-dark);
  transition: all 0.3s ease;
}

.colswap-dark-beige-to-beige:hover {
  background-color: var(--beige);
  color: white;
  border-color: var(--beige);
}

.colswap-dark-cyan-to-cyan {
  background-color: var(--cyan-dark);
  color: white;
  border: 1px solid var(--cyan-dark);
  transition: all 0.3s ease;
}

.colswap-dark-cyan-to-cyan:hover {
  background-color: var(--cyan);
  color: white;
  border-color: var(--cyan);
}

.colswap-dark-indigo-to-indigo {
  background-color: var(--indigo-dark);
  color: white;
  border: 1px solid var(--indigo-dark);
  transition: all 0.3s ease;
}

.colswap-dark-indigo-to-indigo:hover {
  background-color: var(--indigo);
  color: white;
  border-color: var(--indigo);
}

.colswap-dark-silver-to-silver {
  background-color: var(--silver-dark);
  color: white;
  border: 1px solid var(--silver-dark);
  transition: all 0.3s ease;
}

.colswap-dark-silver-to-silver:hover {
  background-color: var(--silver);
  color: white;
  border-color: var(--silver);
}

.colswap-dark-black-to-black {
  background-color: var(--black-dark);
  color: white;
  border: 1px solid var(--black-dark);
  transition: all 0.3s ease;
}

.colswap-dark-black-to-black:hover {
  background-color: var(--black);
  color: white;
  border-color: var(--black);
}

.colswap-dark-white-to-white {
  background-color: var(--white-dark);
  color: white;
  border: 1px solid var(--white-dark);
  transition: all 0.3s ease;
}

.colswap-dark-white-to-white:hover {
  background-color: var(--white);
  color: white;
  border-color: var(--white);
}

.colswap-dark-lime-to-lime {
  background-color: var(--lime-dark);
  color: white;
  border: 1px solid var(--lime-dark);
  transition: all 0.3s ease;
}

.colswap-dark-lime-to-lime:hover {
  background-color: var(--lime);
  color: white;
  border-color: var(--lime);
}

.colswap-dark-sky-to-sky {
  background-color: var(--sky-dark);
  color: white;
  border: 1px solid var(--sky-dark);
  transition: all 0.3s ease;
}

.colswap-dark-sky-to-sky:hover {
  background-color: var(--sky);
  color: white;
  border-color: var(--sky);
}

.colswap-dark-magenta-to-magenta {
  background-color: var(--magenta-dark);
  color: white;
  border: 1px solid var(--magenta-dark);
  transition: all 0.3s ease;
}

.colswap-dark-magenta-to-magenta:hover {
  background-color: var(--magenta);
  color: white;
  border-color: var(--magenta);
}

.colswap-dark-coral-to-coral {
  background-color: var(--coral-dark);
  color: white;
  border: 1px solid var(--coral-dark);
  transition: all 0.3s ease;
}

.colswap-dark-coral-to-coral:hover {
  background-color: var(--coral);
  color: white;
  border-color: var(--coral);
}

.colswap-dark-navy-to-navy {
  background-color: var(--navy-dark);
  color: white;
  border: 1px solid var(--navy-dark);
  transition: all 0.3s ease;
}

.colswap-dark-navy-to-navy:hover {
  background-color: var(--navy);
  color: white;
  border-color: var(--navy);
}

.colswap-dark-olive-to-olive {
  background-color: var(--olive-dark);
  color: white;
  border: 1px solid var(--olive-dark);
  transition: all 0.3s ease;
}

.colswap-dark-olive-to-olive:hover {
  background-color: var(--olive);
  color: white;
  border-color: var(--olive);
}

/* ==========================================================
 | ░▒▓▓▓   MOD_6  : COLSWAP - [DARK] ➜ [LIGHT]         ▓▓▓▒░ |
 |----------------------------------------------------------|
 | Description : Transitions du foncé vers une teinte claire|
 |==========================================================*/

.colswap-dark-purple-to-light-purple {
  background-color: var(--purple-dark);
  color: white;
  border: 1px solid var(--purple-dark);
  transition: all 0.3s ease;
}

.colswap-dark-purple-to-light-purple:hover {
  background-color: var(--purple-light);
  color: var(--purple-dark);
  border-color: var(--purple-dark);
}

.colswap-dark-blue-to-light-blue {
  background-color: var(--blue-dark);
  color: white;
  border: 1px solid var(--blue-dark);
  transition: all 0.3s ease;
}

.colswap-dark-blue-to-light-blue:hover {
  background-color: var(--blue-light);
  color: var(--blue-dark);
  border-color: var(--blue-dark);
}

.colswap-dark-red-to-light-red {
  background-color: var(--red-dark);
  color: white;
  border: 1px solid var(--red-dark);
  transition: all 0.3s ease;
}

.colswap-dark-red-to-light-red:hover {
  background-color: var(--red-light);
  color: var(--red-dark);
  border-color: var(--red-dark);
}

.colswap-dark-green-to-light-green {
  background-color: var(--green-dark);
  color: white;
  border: 1px solid var(--green-dark);
  transition: all 0.3s ease;
}

.colswap-dark-green-to-light-green:hover {
  background-color: var(--green-light);
  color: var(--green-dark);
  border-color: var(--green-dark);
}

.colswap-dark-yellow-to-light-yellow {
  background-color: var(--yellow-dark);
  color: white;
  border: 1px solid var(--yellow-dark);
  transition: all 0.3s ease;
}

.colswap-dark-yellow-to-light-yellow:hover {
  background-color: var(--yellow-light);
  color: var(--yellow-dark);
  border-color: var(--yellow-dark);
}

.colswap-dark-orange-to-light-orange {
  background-color: var(--orange-dark);
  color: white;
  border: 1px solid var(--orange-dark);
  transition: all 0.3s ease;
}

.colswap-dark-orange-to-light-orange:hover {
  background-color: var(--orange-light);
  color: var(--orange-dark);
  border-color: var(--orange-dark);
}

.colswap-dark-gray-to-light-gray {
  background-color: var(--gray);
  color: white;
  border: 1px solid var(--gray-dark);
  transition: all 0.3s ease;
}

.colswap-dark-gray-to-light-gray:hover {
  background-color: var(--gray-light);
  color: var(--gray-dark);
  border-color: var(--gray-dark);
}

.colswap-dark-pink-to-light-pink {
  background-color: var(--pink-dark);
  color: white;
  border: 1px solid var(--pink-dark);
  transition: all 0.3s ease;
}

.colswap-dark-pink-to-light-pink:hover {
  background-color: var(--pink-light);
  color: var(--pink-dark);
  border-color: var(--pink-dark);
}

.colswap-dark-teal-to-light-teal {
  background-color: var(--teal-dark);
  color: white;
  border: 1px solid var(--teal-dark);
  transition: all 0.3s ease;
}

.colswap-dark-teal-to-light-teal:hover {
  background-color: var(--teal-light);
  color: var(--teal-dark);
  border-color: var(--teal-dark);
}

.colswap-dark-gold-to-light-gold {
  background-color: var(--gold-dark);
  color: white;
  border: 1px solid var(--gold-dark);
  transition: all 0.3s ease;
}

.colswap-dark-gold-to-light-gold:hover {
  background-color: var(--gold-light);
  color: var(--gold-dark);
  border-color: var(--gold-dark);
}

.colswap-dark-brown-to-light-brown {
  background-color: var(--brown-dark);
  color: white;
  border: 1px solid var(--brown-dark);
  transition: all 0.3s ease;
}

.colswap-dark-brown-to-light-brown:hover {
  background-color: var(--brown-light);
  color: var(--brown-dark);
  border-color: var(--brown-dark);
}

.colswap-dark-beige-to-light-beige {
  background-color: var(--beige-dark);
  color: white;
  border: 1px solid var(--beige-dark);
  transition: all 0.3s ease;
}

.colswap-dark-beige-to-light-beige:hover {
  background-color: var(--beige-light);
  color: var(--beige-dark);
  border-color: var(--beige-dark);
}

.colswap-dark-cyan-to-light-cyan {
  background-color: var(--cyan-dark);
  color: white;
  border: 1px solid var(--cyan-dark);
  transition: all 0.3s ease;
}

.colswap-dark-cyan-to-light-cyan:hover {
  background-color: var(--cyan-light);
  color: var(--cyan-dark);
  border-color: var(--cyan-dark);
}

.colswap-dark-indigo-to-light-indigo {
  background-color: var(--indigo-dark);
  color: white;
  border: 1px solid var(--indigo-dark);
  transition: all 0.3s ease;
}

.colswap-dark-indigo-to-light-indigo:hover {
  background-color: var(--indigo-light);
  color: var(--indigo-dark);
  border-color: var(--indigo-dark);
}

.colswap-dark-silver-to-light-silver {
  background-color: var(--silver-dark);
  color: white;
  border: 1px solid var(--silver-dark);
  transition: all 0.3s ease;
}

.colswap-dark-silver-to-light-silver:hover {
  background-color: var(--silver-light);
  color: var(--silver-dark);
  border-color: var(--silver-dark);
}

.colswap-dark-black-to-light-black {
  background-color: var(--black-dark);
  color: white;
  border: 1px solid var(--black-dark);
  transition: all 0.3s ease;
}

.colswap-dark-black-to-light-black:hover {
  background-color: var(--black-light);
  color: white;;
  border-color: var(--black-dark);
}

.colswap-dark-white-to-light-white {
  background-color: var(--white-dark);
  color: white;
  border: 1px solid var(--white-dark);
  transition: all 0.3s ease;
}

.colswap-dark-white-to-light-white:hover {
  background-color: var(--white-light);
  color: var(--white-dark);
  border-color: var(--white-dark);
}

.colswap-dark-lime-to-light-lime {
  background-color: var(--lime-dark);
  color: white;
  border: 1px solid var(--lime-dark);
  transition: all 0.3s ease;
}

.colswap-dark-lime-to-light-lime:hover {
  background-color: var(--lime-light);
  color: var(--lime-dark);
  border-color: var(--lime-dark);
}

.colswap-dark-sky-to-light-sky {
  background-color: var(--sky-dark);
  color: white;
  border: 1px solid var(--sky-dark);
  transition: all 0.3s ease;
}

.colswap-dark-sky-to-light-sky:hover {
  background-color: var(--sky-light);
  color: var(--sky-dark);
  border-color: var(--sky-dark);
}

.colswap-dark-magenta-to-light-magenta {
  background-color: var(--magenta-dark);
  color: white;
  border: 1px solid var(--magenta-dark);
  transition: all 0.3s ease;
}

.colswap-dark-magenta-to-light-magenta:hover {
  background-color: var(--magenta-light);
  color: var(--magenta-dark);
  border-color: var(--magenta-dark);
}

.colswap-dark-coral-to-light-coral {
  background-color: var(--coral-dark);
  color: white;
  border: 1px solid var(--coral-dark);
  transition: all 0.3s ease;
}

.colswap-dark-coral-to-light-coral:hover {
  background-color: var(--coral-light);
  color: var(--coral-dark);
  border-color: var(--coral-dark);
}

.colswap-dark-navy-to-light-navy {
  background-color: var(--navy-dark);
  color: white;
  border: 1px solid var(--navy-dark);
  transition: all 0.3s ease;
}

.colswap-dark-navy-to-light-navy:hover {
  background-color: var(--navy-light);
  color: var(--navy-dark);
  border-color: var(--navy-dark);
}

.colswap-dark-olive-to-light-olive {
  background-color: var(--olive-dark);
  color: white;
  border: 1px solid var(--olive-dark);
  transition: all 0.3s ease;
}

.colswap-dark-olive-to-light-olive:hover {
  background-color: var(--olive-light);
  color: var(--olive-dark);
  border-color: var(--olive-dark);
}


/* ==========================================================
 | ░▒▓▓▓   MOD_7  : COLSWAP - [DARK] ➜ [WHITE]         ▓▓▓▒░ |
 |----------------------------------------------------------|
 | Description : Transitions du foncé vers fond blanc       |
 |==========================================================*/


.colswap-dark-purple-to-white {
  background-color: var(--purple-dark);
  color: white;
  border: 1px solid var(--purple-dark);
  transition: all 0.3s ease;
}

.colswap-dark-purple-to-white:hover {
  background-color: white;
  color: var(--purple-dark);
  border-color: white;
}

.colswap-dark-blue-to-white {
  background-color: var(--blue-dark);
  color: white;
  border: 1px solid var(--blue-dark);
  transition: all 0.3s ease;
}

.colswap-dark-blue-to-white:hover {
  background-color: white;
  color: var(--blue-dark);
  border-color: white;
}

.colswap-dark-red-to-white {
  background-color: var(--red-dark);
  color: white;
  border: 1px solid var(--red-dark);
  transition: all 0.3s ease;
}

.colswap-dark-red-to-white:hover {
  background-color: white;
  color: var(--red-dark);
  border-color: white;
}

.colswap-dark-green-to-white {
  background-color: var(--green-dark);
  color: white;
  border: 1px solid var(--green-dark);
  transition: all 0.3s ease;
}

.colswap-dark-green-to-white:hover {
  background-color: white;
  color: var(--green-dark);
  border-color: white;
}

.colswap-dark-yellow-to-white {
  background-color: var(--yellow-dark);
  color: white;
  border: 1px solid var(--yellow-dark);
  transition: all 0.3s ease;
}

.colswap-dark-yellow-to-white:hover {
  background-color: white;
  color: var(--yellow-dark);
  border-color: white;
}

.colswap-dark-orange-to-white {
  background-color: var(--orange-dark);
  color: white;
  border: 1px solid var(--orange-dark);
  transition: all 0.3s ease;
}

.colswap-dark-orange-to-white:hover {
  background-color: white;
  color: var(--orange-dark);
  border-color: white;
}

.colswap-dark-gray-to-white {
  background-color: var(--gray-dark);
  color: white;
  border: 1px solid var(--gray-dark);
  transition: all 0.3s ease;
}

.colswap-dark-gray-to-white:hover {
  background-color: white;
  color: var(--gray-dark);
  border-color: white;
}

.colswap-dark-pink-to-white {
  background-color: var(--pink-dark);
  color: white;
  border: 1px solid var(--pink-dark);
  transition: all 0.3s ease;
}

.colswap-dark-pink-to-white:hover {
  background-color: white;
  color: var(--pink-dark);
  border-color: white;
}

.colswap-dark-teal-to-white {
  background-color: var(--teal-dark);
  color: white;
  border: 1px solid var(--teal-dark);
  transition: all 0.3s ease;
}

.colswap-dark-teal-to-white:hover {
  background-color: white;
  color: var(--teal-dark);
  border-color: white;
}

.colswap-dark-gold-to-white {
  background-color: var(--gold-dark);
  color: white;
  border: 1px solid var(--gold-dark);
  transition: all 0.3s ease;
}

.colswap-dark-gold-to-white:hover {
  background-color: white;
  color: var(--gold-dark);
  border-color: white;
}

.colswap-dark-brown-to-white {
  background-color: var(--brown-dark);
  color: white;
  border: 1px solid var(--brown-dark);
  transition: all 0.3s ease;
}

.colswap-dark-brown-to-white:hover {
  background-color: white;
  color: var(--brown-dark);
  border-color: white;
}

.colswap-dark-beige-to-white {
  background-color: var(--beige-dark);
  color: white;
  border: 1px solid var(--beige-dark);
  transition: all 0.3s ease;
}

.colswap-dark-beige-to-white:hover {
  background-color: white;
  color: var(--beige-dark);
  border-color: white;
}

.colswap-dark-cyan-to-white {
  background-color: var(--cyan-dark);
  color: white;
  border: 1px solid var(--cyan-dark);
  transition: all 0.3s ease;
}

.colswap-dark-cyan-to-white:hover {
  background-color: white;
  color: var(--cyan-dark);
  border-color: white;
}

.colswap-dark-indigo-to-white {
  background-color: var(--indigo-dark);
  color: white;
  border: 1px solid var(--indigo-dark);
  transition: all 0.3s ease;
}

.colswap-dark-indigo-to-white:hover {
  background-color: white;
  color: var(--indigo-dark);
  border-color: white;
}

.colswap-dark-silver-to-white {
  background-color: var(--silver-dark);
  color: white;
  border: 1px solid var(--silver-dark);
  transition: all 0.3s ease;
}

.colswap-dark-silver-to-white:hover {
  background-color: white;
  color: var(--silver-dark);
  border-color: white;
}

.colswap-dark-black-to-white {
  background-color: var(--black-dark);
  color: white;
  border: 1px solid var(--black-dark);
  transition: all 0.3s ease;
}

.colswap-dark-black-to-white:hover {
  background-color: white;
  color: var(--black-dark);
  border-color: white;
}

.colswap-dark-white-to-white {
  background-color: var(--white-dark);
  color: white;
  border: 1px solid var(--white-dark);
  transition: all 0.3s ease;
}

.colswap-dark-white-to-white:hover {
  background-color: white;
  color: var(--white-dark);
  border-color: white;
}

.colswap-dark-lime-to-white {
  background-color: var(--lime-dark);
  color: white;
  border: 1px solid var(--lime-dark);
  transition: all 0.3s ease;
}

.colswap-dark-lime-to-white:hover {
  background-color: white;
  color: var(--lime-dark);
  border-color: white;
}

.colswap-dark-sky-to-white {
  background-color: var(--sky-dark);
  color: white;
  border: 1px solid var(--sky-dark);
  transition: all 0.3s ease;
}

.colswap-dark-sky-to-white:hover {
  background-color: white;
  color: var(--sky-dark);
  border-color: white;
}

.colswap-dark-magenta-to-white {
  background-color: var(--magenta-dark);
  color: white;
  border: 1px solid var(--magenta-dark);
  transition: all 0.3s ease;
}

.colswap-dark-magenta-to-white:hover {
  background-color: white;
  color: var(--magenta-dark);
  border-color: white;
}

.colswap-dark-coral-to-white {
  background-color: var(--coral-dark);
  color: white;
  border: 1px solid var(--coral-dark);
  transition: all 0.3s ease;
}

.colswap-dark-coral-to-white:hover {
  background-color: white;
  color: var(--coral-dark);
  border-color: white;
}

.colswap-dark-navy-to-white {
  background-color: var(--navy-dark);
  color: white;
  border: 1px solid var(--navy-dark);
  transition: all 0.3s ease;
}

.colswap-dark-navy-to-white:hover {
  background-color: white;
  color: var(--navy-dark);
  border-color: white;
}

.colswap-dark-olive-to-white {
  background-color: var(--olive-dark);
  color: white;
  border: 1px solid var(--olive-dark);
  transition: all 0.3s ease;
}

.colswap-dark-olive-to-white:hover {
  background-color: white;
  color: var(--olive-dark);
  border-color: white;
}

/* ==========================================================
 | ░▒▓▓▓   MOD_8  : COLSWAP - [DARK] ➜ [REV-WHITE]    ▓▓▓▒░ |
 |----------------------------------------------------------|
 | Description : Transitions du clair vers fond blanc       |
 |==========================================================*/

.colswap-dark-purple-to-rev-white {
  background-color: var(--purple-dark);
  color: white;
  border: 1px solid var(--purple-dark);
  transition: all 0.3s ease;
}
.colswap-dark-purple-to-rev-white:hover {
  background-color: white;
  color: var(--purple-dark);
  border-color: var(--purple-dark);
}

.colswap-dark-blue-to-rev-white {
  background-color: var(--blue-dark);
  color: white;
  border: 1px solid var(--blue-dark);
  transition: all 0.3s ease;
}
.colswap-dark-blue-to-rev-white:hover {
  background-color: white;
  color: var(--blue-dark);
  border-color: var(--blue-dark);
}

.colswap-dark-red-to-rev-white {
  background-color: var(--red-dark);
  color: white;
  border: 1px solid var(--red-dark);
  transition: all 0.3s ease;
}
.colswap-dark-red-to-rev-white:hover {
  background-color: white;
  color: var(--red-dark);
  border-color: var(--red-dark);
}

.colswap-dark-green-to-rev-white {
  background-color: var(--green-dark);
  color: white;
  border: 1px solid var(--green-dark);
  transition: all 0.3s ease;
}
.colswap-dark-green-to-rev-white:hover {
  background-color: white;
  color: var(--green-dark);
  border-color: var(--green-dark);
}

.colswap-dark-yellow-to-rev-white {
  background-color: var(--yellow-dark);
  color: white;
  border: 1px solid var(--yellow-dark);
  transition: all 0.3s ease;
}
.colswap-dark-yellow-to-rev-white:hover {
  background-color: white;
  color: var(--yellow-dark);
  border-color: var(--yellow-dark);
}

.colswap-dark-orange-to-rev-white {
  background-color: var(--orange-dark);
  color: white;
  border: 1px solid var(--orange-dark);
  transition: all 0.3s ease;
}
.colswap-dark-orange-to-rev-white:hover {
  background-color: white;
  color: var(--orange-dark);
  border-color: var(--orange-dark);
}

.colswap-dark-gray-to-rev-white {
  background-color: var(--gray-dark);
  color: white;
  border: 1px solid var(--gray-dark);
  transition: all 0.3s ease;
}
.colswap-dark-gray-to-rev-white:hover {
  background-color: white;
  color: var(--gray-dark);
  border-color: var(--gray-dark);
}

.colswap-dark-pink-to-rev-white {
  background-color: var(--pink-dark);
  color: white;
  border: 1px solid var(--pink-dark);
  transition: all 0.3s ease;
}
.colswap-dark-pink-to-rev-white:hover {
  background-color: white;
  color: var(--pink-dark);
  border-color: var(--pink-dark);
}

.colswap-dark-teal-to-rev-white {
  background-color: var(--teal-dark);
  color: white;
  border: 1px solid var(--teal-dark);
  transition: all 0.3s ease;
}
.colswap-dark-teal-to-rev-white:hover {
  background-color: white;
  color: var(--teal-dark);
  border-color: var(--teal-dark);
}

.colswap-dark-gold-to-rev-white {
  background-color: var(--gold-dark);
  color: white;
  border: 1px solid var(--gold-dark);
  transition: all 0.3s ease;
}
.colswap-dark-gold-to-rev-white:hover {
  background-color: white;
  color: var(--gold-dark);
  border-color: var(--gold-dark);
}

.colswap-dark-brown-to-rev-white {
  background-color: var(--brown-dark);
  color: white;
  border: 1px solid var(--brown-dark);
  transition: all 0.3s ease;
}
.colswap-dark-brown-to-rev-white:hover {
  background-color: white;
  color: var(--brown-dark);
  border-color: var(--brown-dark);
}

.colswap-dark-beige-to-rev-white {
  background-color: var(--beige-dark);
  color: white;
  border: 1px solid var(--beige-dark);
  transition: all 0.3s ease;
}
.colswap-dark-beige-to-rev-white:hover {
  background-color: white;
  color: var(--beige-dark);
  border-color: var(--beige-dark);
}

.colswap-dark-cyan-to-rev-white {
  background-color: var(--cyan-dark);
  color: white;
  border: 1px solid var(--cyan-dark);
  transition: all 0.3s ease;
}
.colswap-dark-cyan-to-rev-white:hover {
  background-color: white;
  color: var(--cyan-dark);
  border-color: var(--cyan-dark);
}

.colswap-dark-indigo-to-rev-white {
  background-color: var(--indigo-dark);
  color: white;
  border: 1px solid var(--indigo-dark);
  transition: all 0.3s ease;
}
.colswap-dark-indigo-to-rev-white:hover {
  background-color: white;
  color: var(--indigo-dark);
  border-color: var(--indigo-dark);
}

.colswap-dark-silver-to-rev-white {
  background-color: var(--silver-dark);
  color: white;
  border: 1px solid var(--silver-dark);
  transition: all 0.3s ease;
}
.colswap-dark-silver-to-rev-white:hover {
  background-color: white;
  color: var(--silver-dark);
  border-color: var(--silver-dark);
}

.colswap-dark-black-to-rev-white {
  background-color: var(--black-dark);
  color: white;
  border: 1px solid var(--black-dark);
  transition: all 0.3s ease;
}
.colswap-dark-black-to-rev-white:hover {
  background-color: white;
  color: var(--black-dark);
  border-color: var(--black-dark);
}

.colswap-dark-white-to-rev-white {
  background-color: var(--white-dark);
  color: white;
  border: 1px solid var(--white-dark);
  transition: all 0.3s ease;
}
.colswap-dark-white-to-rev-white:hover {
  background-color: white;
  color: var(--white-dark);
  border-color: var(--white-dark);
}

.colswap-dark-lime-to-rev-white {
  background-color: var(--lime-dark);
  color: white;
  border: 1px solid var(--lime-dark);
  transition: all 0.3s ease;
}
.colswap-dark-lime-to-rev-white:hover {
  background-color: white;
  color: var(--lime-dark);
  border-color: var(--lime-dark);
}

.colswap-dark-sky-to-rev-white {
  background-color: var(--sky-dark);
  color: white;
  border: 1px solid var(--sky-dark);
  transition: all 0.3s ease;
}
.colswap-dark-sky-to-rev-white:hover {
  background-color: white;
  color: var(--sky-dark);
  border-color: var(--sky-dark);
}

.colswap-dark-magenta-to-rev-white {
  background-color: var(--magenta-dark);
  color: white;
  border: 1px solid var(--magenta-dark);
  transition: all 0.3s ease;
}
.colswap-dark-magenta-to-rev-white:hover {
  background-color: white;
  color: var(--magenta-dark);
  border-color: var(--magenta-dark);
}

.colswap-dark-coral-to-rev-white {
  background-color: var(--coral-dark);
  color: white;
  border: 1px solid var(--coral-dark);
  transition: all 0.3s ease;
}
.colswap-dark-coral-to-rev-white:hover {
  background-color: white;
  color: var(--coral-dark);
  border-color: var(--coral-dark);
}

.colswap-dark-navy-to-rev-white {
  background-color: var(--navy-dark);
  color: white;
  border: 1px solid var(--navy-dark);
  transition: all 0.3s ease;
}
.colswap-dark-navy-to-rev-white:hover {
  background-color: white;
  color: var(--navy-dark);
  border-color: var(--navy-dark);
}

.colswap-dark-olive-to-rev-white {
  background-color: var(--olive-dark);
  color: white;
  border: 1px solid var(--olive-dark);
  transition: all 0.3s ease;
}
.colswap-dark-olive-to-rev-white:hover {
  background-color: white;
  color: var(--olive-dark);
  border-color: var(--olive-dark);
}


/* ==========================================================
 | ░▒▓▓▓   MOD_9  : COLSWAP - [LIGHT] ➜ [DARK]        ▓▓▓▒░ |
 |----------------------------------------------------------|
 | Description : Transitions du clair vers le foncé         |
 |==========================================================*/


.colswap-light-purple-to-dark-purple {
  background-color: var(--purple-light);
  color: var(--purple-dark);
  border: 1px solid var(--purple-dark);
  transition: all 0.3s ease;
}

.colswap-light-purple-to-dark-purple:hover {
  background-color: var(--purple-dark);
  color: white;
  border-color: var(--purple-dark);
}

.colswap-light-blue-to-dark-blue {
  background-color: var(--blue-light);
  color: var(--blue-dark);
  border: 1px solid var(--blue-dark);
  transition: all 0.3s ease;
}

.colswap-light-blue-to-dark-blue:hover {
  background-color: var(--blue-dark);
  color: white;
  border-color: var(--blue-dark);
}

.colswap-light-red-to-dark-red {
  background-color: var(--red-light);
  color: var(--red-dark);
  border: 1px solid var(--red-dark);
  transition: all 0.3s ease;
}

.colswap-light-red-to-dark-red:hover {
  background-color: var(--red-dark);
  color: white;
  border-color: var(--red-dark);
}

.colswap-light-green-to-dark-green {
  background-color: var(--green-light);
  color: var(--green-dark);
  border: 1px solid var(--green-dark);
  transition: all 0.3s ease;
}

.colswap-light-green-to-dark-green:hover {
  background-color: var(--green-dark);
  color: white;
  border-color: var(--green-dark);
}

.colswap-light-yellow-to-dark-yellow {
  background-color: var(--yellow-light);
  color: var(--yellow-dark);
  border: 1px solid var(--yellow-dark);
  transition: all 0.3s ease;
}

.colswap-light-yellow-to-dark-yellow:hover {
  background-color: var(--yellow-dark);
  color: white;
  border-color: var(--yellow-dark);
}

.colswap-light-orange-to-dark-orange {
  background-color: var(--orange-light);
  color: var(--orange-dark);
  border: 1px solid var(--orange-dark);
  transition: all 0.3s ease;
}

.colswap-light-orange-to-dark-orange:hover {
  background-color: var(--orange-dark);
  color: white;
  border-color: var(--orange-dark);
}

.colswap-light-gray-to-dark-gray {
  background-color: var(--gray-light);
  color: var(--gray-dark);
  border: 1px solid var(--gray-dark);
  transition: all 0.3s ease;
}

.colswap-light-gray-to-dark-gray:hover {
  background-color: var(--gray-dark);
  color: white;
  border-color: var(--gray-dark);
}

.colswap-light-pink-to-dark-pink {
  background-color: var(--pink-light);
  color: var(--pink-dark);
  border: 1px solid var(--pink-dark);
  transition: all 0.3s ease;
}

.colswap-light-pink-to-dark-pink:hover {
  background-color: var(--pink-dark);
  color: white;
  border-color: var(--pink-dark);
}

.colswap-light-teal-to-dark-teal {
  background-color: var(--teal-light);
  color: var(--teal-dark);
  border: 1px solid var(--teal-dark);
  transition: all 0.3s ease;
}

.colswap-light-teal-to-dark-teal:hover {
  background-color: var(--teal-dark);
  color: white;
  border-color: var(--teal-dark);
}

.colswap-light-gold-to-dark-gold {
  background-color: var(--gold-light);
  color: var(--gold-dark);
  border: 1px solid var(--gold-dark);
  transition: all 0.3s ease;
}

.colswap-light-gold-to-dark-gold:hover {
  background-color: var(--gold-dark);
  color: white;
  border-color: var(--gold-dark);
}

.colswap-light-brown-to-dark-brown {
  background-color: var(--brown-light);
  color: var(--brown-dark);
  border: 1px solid var(--brown-dark);
  transition: all 0.3s ease;
}

.colswap-light-brown-to-dark-brown:hover {
  background-color: var(--brown-dark);
  color: white;
  border-color: var(--brown-dark);
}

.colswap-light-beige-to-dark-beige {
  background-color: var(--beige-light);
  color: var(--beige-dark);
  border: 1px solid var(--beige-dark);
  transition: all 0.3s ease;
}

.colswap-light-beige-to-dark-beige:hover {
  background-color: var(--beige-dark);
  color: white;
  border-color: var(--beige-dark);
}

.colswap-light-cyan-to-dark-cyan {
  background-color: var(--cyan-light);
  color: var(--cyan-dark);
  border: 1px solid var(--cyan-dark);
  transition: all 0.3s ease;
}

.colswap-light-cyan-to-dark-cyan:hover {
  background-color: var(--cyan-dark);
  color: white;
  border-color: var(--cyan-dark);
}

.colswap-light-indigo-to-dark-indigo {
  background-color: var(--indigo-light);
  color: var(--indigo-dark);
  border: 1px solid var(--indigo-dark);
  transition: all 0.3s ease;
}

.colswap-light-indigo-to-dark-indigo:hover {
  background-color: var(--indigo-dark);
  color: white;
  border-color: var(--indigo-dark);
}

.colswap-light-silver-to-dark-silver {
  background-color: var(--silver-light);
  color: var(--silver-dark);
  border: 1px solid var(--silver-dark);
  transition: all 0.3s ease;
}

.colswap-light-silver-to-dark-silver:hover {
  background-color: var(--silver-dark);
  color: white;
  border-color: var(--silver-dark);
}

.colswap-light-black-to-dark-black {
  background-color: var(--black-light);
  color: var(--black-dark);
  border: 1px solid var(--black-dark);
  transition: all 0.3s ease;
}

.colswap-light-black-to-dark-black:hover {
  background-color: var(--black-dark);
  color: white;
  border-color: var(--black-dark);
}

.colswap-light-white-to-dark-white {
  background-color: var(--white-light);
  color: var(--white-dark);
  border: 1px solid var(--white-dark);
  transition: all 0.3s ease;
}

.colswap-light-white-to-dark-white:hover {
  background-color: var(--white-dark);
  color: white;
  border-color: var(--white-dark);
}

.colswap-light-lime-to-dark-lime {
  background-color: var(--lime-light);
  color: var(--lime-dark);
  border: 1px solid var(--lime-dark);
  transition: all 0.3s ease;
}

.colswap-light-lime-to-dark-lime:hover {
  background-color: var(--lime-dark);
  color: white;
  border-color: var(--lime-dark);
}

.colswap-light-sky-to-dark-sky {
  background-color: var(--sky-light);
  color: var(--sky-dark);
  border: 1px solid var(--sky-dark);
  transition: all 0.3s ease;
}

.colswap-light-sky-to-dark-sky:hover {
  background-color: var(--sky-dark);
  color: white;
  border-color: var(--sky-dark);
}

.colswap-light-magenta-to-dark-magenta {
  background-color: var(--magenta-light);
  color: var(--magenta-dark);
  border: 1px solid var(--magenta-dark);
  transition: all 0.3s ease;
}

.colswap-light-magenta-to-dark-magenta:hover {
  background-color: var(--magenta-dark);
  color: white;
  border-color: var(--magenta-dark);
}

.colswap-light-coral-to-dark-coral {
  background-color: var(--coral-light);
  color: var(--coral-dark);
  border: 1px solid var(--coral-dark);
  transition: all 0.3s ease;
}

.colswap-light-coral-to-dark-coral:hover {
  background-color: var(--coral-dark);
  color: white;
  border-color: var(--coral-dark);
}

.colswap-light-navy-to-dark-navy {
  background-color: var(--navy-light);
  color: var(--navy-dark);
  border: 1px solid var(--navy-dark);
  transition: all 0.3s ease;
}

.colswap-light-navy-to-dark-navy:hover {
  background-color: var(--navy-dark);
  color: white;
  border-color: var(--navy-dark);
}

.colswap-light-olive-to-dark-olive {
  background-color: var(--olive-light);
  color: var(--olive-dark);
  border: 1px solid var(--olive-dark);
  transition: all 0.3s ease;
}

.colswap-light-olive-to-dark-olive:hover {
  background-color: var(--olive-dark);
  color: white;
  border-color: var(--olive-dark);
}


/* ==========================================================
 | ░▒▓▓▓   MOD_10  : COLSWAP - [LIGHT] ➜ [WHITE]        ▓▓▓▒░ |
 |----------------------------------------------------------|
 | Description : Transitions du clair vers fond blanc        |
 |==========================================================*/

.colswap-light-purple-to-white {
  background-color: var(--purple-light);
  color: var(--purple-dark);
  border: 1px solid var(--purple-light);
  transition: all 0.3s ease;
}
.colswap-light-purple-to-white:hover {
  background-color: var(--white);
  color: var(--purple-dark);
  border-color: var(--white);
}

.colswap-light-blue-to-white {
  background-color: var(--blue-light);
  color: var(--blue-dark);
  border: 1px solid var(--blue-light);
  transition: all 0.3s ease;
}
.colswap-light-blue-to-white:hover {
  background-color: var(--white);
  color: var(--blue-dark);
  border-color: var(--white);
}

.colswap-light-red-to-white {
  background-color: var(--red-light);
  color: var(--red-dark);
  border: 1px solid var(--red-light);
  transition: all 0.3s ease;
}
.colswap-light-red-to-white:hover {
  background-color: var(--white);
  color: var(--red-dark);
  border-color: var(--white);
}

.colswap-light-green-to-white {
  background-color: var(--green-light);
  color: var(--green-dark);
  border: 1px solid var(--green-light);
  transition: all 0.3s ease;
}
.colswap-light-green-to-white:hover {
  background-color: var(--white);
  color: var(--green-dark);
  border-color: var(--white);
}

.colswap-light-yellow-to-white {
  background-color: var(--yellow-light);
  color: var(--yellow-dark);
  border: 1px solid var(--yellow-light);
  transition: all 0.3s ease;
}
.colswap-light-yellow-to-white:hover {
  background-color: var(--white);
  color: var(--yellow-dark);
  border-color: var(--white);
}

.colswap-light-orange-to-white {
  background-color: var(--orange-light);
  color: var(--orange-dark);
  border: 1px solid var(--orange-light);
  transition: all 0.3s ease;
}
.colswap-light-orange-to-white:hover {
  background-color: var(--white);
  color: var(--orange-dark);
  border-color: var(--white);
}

.colswap-light-gray-to-white {
  background-color: var(--gray-light);
  color: var(--gray-dark);
  border: 1px solid var(--gray-light);
  transition: all 0.3s ease;
}
.colswap-light-gray-to-white:hover {
  background-color: var(--white);
  color: var(--gray-dark);
  border-color: var(--white);
}

.colswap-light-pink-to-white {
  background-color: var(--pink-light);
  color: var(--pink-dark);
  border: 1px solid var(--pink-light);
  transition: all 0.3s ease;
}
.colswap-light-pink-to-white:hover {
  background-color: var(--white);
  color: var(--pink-dark);
  border-color: var(--white);
}

.colswap-light-teal-to-white {
  background-color: var(--teal-light);
  color: var(--teal-dark);
  border: 1px solid var(--teal-light);
  transition: all 0.3s ease;
}
.colswap-light-teal-to-white:hover {
  background-color: var(--white);
  color: var(--teal-dark);
  border-color: var(--white);
}

.colswap-light-gold-to-white {
  background-color: var(--gold-light);
  color: var(--gold-dark);
  border: 1px solid var(--gold-light);
  transition: all 0.3s ease;
}
.colswap-light-gold-to-white:hover {
  background-color: var(--white);
  color: var(--gold-dark);
  border-color: var(--white);
}

.colswap-light-brown-to-white {
  background-color: var(--brown-light);
  color: var(--brown-dark);
  border: 1px solid var(--brown-light);
  transition: all 0.3s ease;
}
.colswap-light-brown-to-white:hover {
  background-color: var(--white);
  color: var(--brown-dark);
  border-color: var(--white);
}

.colswap-light-beige-to-white {
  background-color: var(--beige-light);
  color: var(--beige-dark);
  border: 1px solid var(--beige-light);
  transition: all 0.3s ease;
}
.colswap-light-beige-to-white:hover {
  background-color: var(--white);
  color: var(--beige-dark);
  border-color: var(--white);
}

.colswap-light-cyan-to-white {
  background-color: var(--cyan-light);
  color: var(--cyan-dark);
  border: 1px solid var(--cyan-light);
  transition: all 0.3s ease;
}
.colswap-light-cyan-to-white:hover {
  background-color: var(--white);
  color: var(--cyan-dark);
  border-color: var(--white);
}

.colswap-light-indigo-to-white {
  background-color: var(--indigo-light);
  color: var(--indigo-dark);
  border: 1px solid var(--indigo-light);
  transition: all 0.3s ease;
}
.colswap-light-indigo-to-white:hover {
  background-color: var(--white);
  color: var(--indigo-dark);
  border-color: var(--white);
}

.colswap-light-silver-to-white {
  background-color: var(--silver-light);
  color: var(--silver-dark);
  border: 1px solid var(--silver-light);
  transition: all 0.3s ease;
}
.colswap-light-silver-to-white:hover {
  background-color: var(--white);
  color: var(--silver-dark);
  border-color: var(--white);
}

.colswap-light-black-to-white {
  background-color: var(--black-light);
  color: var(--black-dark);
  border: 1px solid var(--black-light);
  transition: all 0.3s ease;
}
.colswap-light-black-to-white:hover {
  background-color: var(--white);
  color: var(--black-dark);
  border-color: var(--white);
}

.colswap-light-white-to-white {
  background-color: var(--white-light);
  color: var(--white-dark);
  border: 1px solid var(--white-light);
  transition: all 0.3s ease;
}
.colswap-light-white-to-white:hover {
  background-color: var(--white);
  color: var(--white-dark);
  border-color: var(--white);
}

.colswap-light-lime-to-white {
  background-color: var(--lime-light);
  color: var(--lime-dark);
  border: 1px solid var(--lime-light);
  transition: all 0.3s ease;
}
.colswap-light-lime-to-white:hover {
  background-color: var(--white);
  color: var(--lime-dark);
  border-color: var(--white);
}

.colswap-light-sky-to-white {
  background-color: var(--sky-light);
  color: var(--sky-dark);
  border: 1px solid var(--sky-light);
  transition: all 0.3s ease;
}
.colswap-light-sky-to-white:hover {
  background-color: var(--white);
  color: var(--sky-dark);
  border-color: var(--white);
}

.colswap-light-magenta-to-white {
  background-color: var(--magenta-light);
  color: var(--magenta-dark);
  border: 1px solid var(--magenta-light);
  transition: all 0.3s ease;
}
.colswap-light-magenta-to-white:hover {
  background-color: var(--white);
  color: var(--magenta-dark);
  border-color: var(--white);
}

.colswap-light-coral-to-white {
  background-color: var(--coral-light);
  color: var(--coral-dark);
  border: 1px solid var(--coral-light);
  transition: all 0.3s ease;
}
.colswap-light-coral-to-white:hover {
  background-color: var(--white);
  color: var(--coral-dark);
  border-color: var(--white);
}

.colswap-light-navy-to-white {
  background-color: var(--navy-light);
  color: var(--navy-dark);
  border: 1px solid var(--navy-light);
  transition: all 0.3s ease;
}
.colswap-light-navy-to-white:hover {
  background-color: var(--white);
  color: var(--navy-dark);
  border-color: var(--white);
}

.colswap-light-olive-to-white {
  background-color: var(--olive-light);
  color: var(--olive-dark);
  border: 1px solid var(--olive-light);
  transition: all 0.3s ease;
}
.colswap-light-olive-to-white:hover {
  background-color: var(--white);
  color: var(--olive-dark);
  border-color: var(--white);
}

/* ==========================================================
 | ░▒▓▓▓   MOD_11  : COLSWAP - [LIGHT] ➜ [REV-WHITE]    ▓▓▓▒░ |
 |---------------------------------------------------------- |
 | Description : Transitions du clair vers fond blanc        |
 |==========================================================*/

.colswap-light-purple-to-rev-white {
  background-color: var(--purple-light);
  color: var(--purple-dark);
  border: 1px solid var(--purple-light);
  transition: all 0.3s ease;
}
.colswap-light-purple-to-rev-white:hover {
  background-color: var(--white);
  color: var(--purple-dark);
  border-color: var(--purple-light);
}

.colswap-light-blue-to-rev-white {
  background-color: var(--blue-light);
  color: var(--blue-dark);
  border: 1px solid var(--blue-light);
  transition: all 0.3s ease;
}
.colswap-light-blue-to-rev-white:hover {
  background-color: var(--white);
  color: var(--blue-dark);
  border-color: var(--blue-light);
}

.colswap-light-red-to-rev-white {
  background-color: var(--red-light);
  color: var(--red-dark);
  border: 1px solid var(--red-light);
  transition: all 0.3s ease;
}
.colswap-light-red-to-rev-white:hover {
  background-color: var(--white);
  color: var(--red-dark);
  border-color: var(--red-light);
}

.colswap-light-green-to-rev-white {
  background-color: var(--green-light);
  color: var(--green-dark);
  border: 1px solid var(--green-light);
  transition: all 0.3s ease;
}
.colswap-light-green-to-rev-white:hover {
  background-color: var(--white);
  color: var(--green-dark);
  border-color: var(--green-light);
}

.colswap-light-yellow-to-rev-white {
  background-color: var(--yellow-light);
  color: var(--yellow-dark);
  border: 1px solid var(--yellow-light);
  transition: all 0.3s ease;
}
.colswap-light-yellow-to-rev-white:hover {
  background-color: var(--white);
  color: var(--yellow-dark);
  border-color: var(--yellow-light);
}

.colswap-light-orange-to-rev-white {
  background-color: var(--orange-light);
  color: var(--orange-dark);
  border: 1px solid var(--orange-light);
  transition: all 0.3s ease;
}
.colswap-light-orange-to-rev-white:hover {
  background-color: var(--white);
  color: var(--orange-dark);
  border-color: var(--orange-light);
}

.colswap-light-gray-to-rev-white {
  background-color: var(--gray-light);
  color: var(--gray-dark);
  border: 1px solid var(--gray-light);
  transition: all 0.3s ease;
}
.colswap-light-gray-to-rev-white:hover {
  background-color: var(--white);
  color: var(--gray-dark);
  border-color: var(--gray-light);
}

.colswap-light-pink-to-rev-white {
  background-color: var(--pink-light);
  color: var(--pink-dark);
  border: 1px solid var(--pink-light);
  transition: all 0.3s ease;
}
.colswap-light-pink-to-rev-white:hover {
  background-color: var(--white);
  color: var(--pink-dark);
  border-color: var(--pink-light);
}

.colswap-light-teal-to-rev-white {
  background-color: var(--teal-light);
  color: var(--teal-dark);
  border: 1px solid var(--teal-light);
  transition: all 0.3s ease;
}
.colswap-light-teal-to-rev-white:hover {
  background-color: var(--white);
  color: var(--teal-dark);
  border-color: var(--teal-light);
}

.colswap-light-gold-to-rev-white {
  background-color: var(--gold-light);
  color: var(--gold-dark);
  border: 1px solid var(--gold-light);
  transition: all 0.3s ease;
}
.colswap-light-gold-to-rev-white:hover {
  background-color: var(--white);
  color: var(--gold-dark);
  border-color: var(--gold-light);
}

.colswap-light-brown-to-rev-white {
  background-color: var(--brown-light);
  color: var(--brown-dark);
  border: 1px solid var(--brown-light);
  transition: all 0.3s ease;
}
.colswap-light-brown-to-rev-white:hover {
  background-color: var(--white);
  color: var(--brown-dark);
  border-color: var(--brown-light);
}

.colswap-light-beige-to-rev-white {
  background-color: var(--beige-light);
  color: var(--beige-dark);
  border: 1px solid var(--beige-light);
  transition: all 0.3s ease;
}
.colswap-light-beige-to-rev-white:hover {
  background-color: var(--white);
  color: var(--beige-dark);
  border-color: var(--beige-light);
}

.colswap-light-cyan-to-rev-white {
  background-color: var(--cyan-light);
  color: var(--cyan-dark);
  border: 1px solid var(--cyan-light);
  transition: all 0.3s ease;
}
.colswap-light-cyan-to-rev-white:hover {
  background-color: var(--white);
  color: var(--cyan-dark);
  border-color: var(--cyan-light);
}

.colswap-light-indigo-to-rev-white {
  background-color: var(--indigo-light);
  color: var(--indigo-dark);
  border: 1px solid var(--indigo-light);
  transition: all 0.3s ease;
}
.colswap-light-indigo-to-rev-white:hover {
  background-color: var(--white);
  color: var(--indigo-dark);
  border-color: var(--indigo-light);
}

.colswap-light-silver-to-rev-white {
  background-color: var(--silver-light);
  color: var(--silver-dark);
  border: 1px solid var(--silver-light);
  transition: all 0.3s ease;
}
.colswap-light-silver-to-rev-white:hover {
  background-color: var(--white);
  color: var(--silver-dark);
  border-color: var(--silver-light);
}

.colswap-light-black-to-rev-white {
  background-color: var(--black-light);
  color: var(--black-dark);
  border: 1px solid var(--black-light);
  transition: all 0.3s ease;
}
.colswap-light-black-to-rev-white:hover {
  background-color: var(--white);
  color: var(--black-dark);
  border-color: var(--black-light);
}

.colswap-light-white-to-rev-white {
  background-color: var(--white-light);
  color: var(--white-dark);
  border: 1px solid var(--white-light);
  transition: all 0.3s ease;
}
.colswap-light-white-to-rev-white:hover {
  background-color: var(--white);
  color: var(--white-dark);
  border-color: var(--white-light);
}

.colswap-light-lime-to-rev-white {
  background-color: var(--lime-light);
  color: var(--lime-dark);
  border: 1px solid var(--lime-light);
  transition: all 0.3s ease;
}
.colswap-light-lime-to-rev-white:hover {
  background-color: var(--white);
  color: var(--lime-dark);
  border-color: var(--lime-light);
}

.colswap-light-sky-to-rev-white {
  background-color: var(--sky-light);
  color: var(--sky-dark);
  border: 1px solid var(--sky-light);
  transition: all 0.3s ease;
}
.colswap-light-sky-to-rev-white:hover {
  background-color: var(--white);
  color: var(--sky-dark);
  border-color: var(--sky-light);
}

.colswap-light-magenta-to-rev-white {
  background-color: var(--magenta-light);
  color: var(--magenta-dark);
  border: 1px solid var(--magenta-light);
  transition: all 0.3s ease;
}
.colswap-light-magenta-to-rev-white:hover {
  background-color: var(--white);
  color: var(--magenta-dark);
  border-color: var(--magenta-light);
}

.colswap-light-coral-to-rev-white {
  background-color: var(--coral-light);
  color: var(--coral-dark);
  border: 1px solid var(--coral-light);
  transition: all 0.3s ease;
}
.colswap-light-coral-to-rev-white:hover {
  background-color: var(--white);
  color: var(--coral-dark);
  border-color: var(--coral-light);
}

.colswap-light-navy-to-rev-white {
  background-color: var(--navy-light);
  color: var(--navy-dark);
  border: 1px solid var(--navy-light);
  transition: all 0.3s ease;
}
.colswap-light-navy-to-rev-white:hover {
  background-color: var(--white);
  color: var(--navy-dark);
  border-color: var(--navy-light);
}

.colswap-light-olive-to-rev-white {
  background-color: var(--olive-light);
  color: var(--olive-dark);
  border: 1px solid var(--olive-light);
  transition: all 0.3s ease;
}
.colswap-light-olive-to-rev-white:hover {
  background-color: var(--white);
  color: var(--olive-dark);
  border-color: var(--olive-light);
}

/* ==========================================================
 | ░▒▓▓▓   MOD_12  : COLSWAP - [LIGHT] ➜ [BASE]         ▓▓▓▒░ |
 |----------------------------------------------------------|
 | Description : Transitions du clair vers la couleur base  |
 |==========================================================*/

.colswap-light-purple-to-purple {
  background-color: var(--purple-light);
  color: var(--purple-dark);
  border: 1px solid var(--purple-light);
  transition: all 0.3s ease;
}

.colswap-light-purple-to-purple:hover {
  background-color: var(--purple);
  color: white;
  border-color: var(--purple);
}

.colswap-light-blue-to-blue {
  background-color: var(--blue-light);
  color: var(--blue-dark);
  border: 1px solid var(--blue-light);
  transition: all 0.3s ease;
}

.colswap-light-blue-to-blue:hover {
  background-color: var(--blue);
  color: white;
  border-color: var(--blue);
}

.colswap-light-red-to-red {
  background-color: var(--red-light);
  color: var(--red-dark);
  border: 1px solid var(--red-light);
  transition: all 0.3s ease;
}

.colswap-light-red-to-red:hover {
  background-color: var(--red);
  color: white;
  border-color: var(--red);
}

.colswap-light-green-to-green {
  background-color: var(--green-light);
  color: var(--green-dark);
  border: 1px solid var(--green-light);
  transition: all 0.3s ease;
}

.colswap-light-green-to-green:hover {
  background-color: var(--green);
  color: white;
  border-color: var(--green);
}

.colswap-light-yellow-to-yellow {
  background-color: var(--yellow-light);
  color: var(--yellow-dark);
  border: 1px solid var(--yellow-light);
  transition: all 0.3s ease;
}

.colswap-light-yellow-to-yellow:hover {
  background-color: var(--yellow);
  color: white;
  border-color: var(--yellow);
}

.colswap-light-orange-to-orange {
  background-color: var(--orange-light);
  color: var(--orange-dark);
  border: 1px solid var(--orange-light);
  transition: all 0.3s ease;
}

.colswap-light-orange-to-orange:hover {
  background-color: var(--orange);
  color: white;
  border-color: var(--orange);
}

.colswap-light-gray-to-gray {
  background-color: var(--gray-light);
  color: var(--gray-dark);
  border: 1px solid var(--gray-light);
  transition: all 0.3s ease;
}

.colswap-light-gray-to-gray:hover {
  background-color: var(--gray);
  color: white;
  border-color: var(--gray);
}

.colswap-light-pink-to-pink {
  background-color: var(--pink-light);
  color: var(--pink-dark);
  border: 1px solid var(--pink-light);
  transition: all 0.3s ease;
}

.colswap-light-pink-to-pink:hover {
  background-color: var(--pink);
  color: white;
  border-color: var(--pink);
}

.colswap-light-teal-to-teal {
  background-color: var(--teal-light);
  color: var(--teal-dark);
  border: 1px solid var(--teal-light);
  transition: all 0.3s ease;
}

.colswap-light-teal-to-teal:hover {
  background-color: var(--teal);
  color: white;
  border-color: var(--teal);
}

.colswap-light-gold-to-gold {
  background-color: var(--gold-light);
  color: var(--gold-dark);
  border: 1px solid var(--gold-light);
  transition: all 0.3s ease;
}

.colswap-light-gold-to-gold:hover {
  background-color: var(--gold);
  color: white;
  border-color: var(--gold);
}

.colswap-light-brown-to-brown {
  background-color: var(--brown-light);
  color: var(--brown-dark);
  border: 1px solid var(--brown-light);
  transition: all 0.3s ease;
}

.colswap-light-brown-to-brown:hover {
  background-color: var(--brown);
  color: white;
  border-color: var(--brown);
}

.colswap-light-beige-to-beige {
  background-color: var(--beige-light);
  color: var(--beige-dark);
  border: 1px solid var(--beige-light);
  transition: all 0.3s ease;
}

.colswap-light-beige-to-beige:hover {
  background-color: var(--beige);
  color: white;
  border-color: var(--beige);
}

.colswap-light-cyan-to-cyan {
  background-color: var(--cyan-light);
  color: var(--cyan-dark);
  border: 1px solid var(--cyan-light);
  transition: all 0.3s ease;
}

.colswap-light-cyan-to-cyan:hover {
  background-color: var(--cyan);
  color: white;
  border-color: var(--cyan);
}

.colswap-light-indigo-to-indigo {
  background-color: var(--indigo-light);
  color: var(--indigo-dark);
  border: 1px solid var(--indigo-light);
  transition: all 0.3s ease;
}

.colswap-light-indigo-to-indigo:hover {
  background-color: var(--indigo);
  color: white;
  border-color: var(--indigo);
}

.colswap-light-silver-to-silver {
  background-color: var(--silver-light);
  color: var(--silver-dark);
  border: 1px solid var(--silver-light);
  transition: all 0.3s ease;
}

.colswap-light-silver-to-silver:hover {
  background-color: var(--silver);
  color: white;
  border-color: var(--silver);
}

.colswap-light-black-to-black {
  background-color: var(--black-light);
  color: var(--black-dark);
  border: 1px solid var(--black-light);
  transition: all 0.3s ease;
}

.colswap-light-black-to-black:hover {
  background-color: var(--black);
  color: white;
  border-color: var(--black);
}

.colswap-light-white-to-white {
  background-color: var(--white-light);
  color: var(--white-dark);
  border: 1px solid var(--white-light);
  transition: all 0.3s ease;
}

.colswap-light-white-to-white:hover {
  background-color: var(--white);
  color: white;
  border-color: var(--white);
}

.colswap-light-lime-to-lime {
  background-color: var(--lime-light);
  color: var(--lime-dark);
  border: 1px solid var(--lime-light);
  transition: all 0.3s ease;
}

.colswap-light-lime-to-lime:hover {
  background-color: var(--lime);
  color: white;
  border-color: var(--lime);
}

.colswap-light-sky-to-sky {
  background-color: var(--sky-light);
  color: var(--sky-dark);
  border: 1px solid var(--sky-light);
  transition: all 0.3s ease;
}

.colswap-light-sky-to-sky:hover {
  background-color: var(--sky);
  color: white;
  border-color: var(--sky);
}

.colswap-light-magenta-to-magenta {
  background-color: var(--magenta-light);
  color: var(--magenta-dark);
  border: 1px solid var(--magenta-light);
  transition: all 0.3s ease;
}

.colswap-light-magenta-to-magenta:hover {
  background-color: var(--magenta);
  color: white;
  border-color: var(--magenta);
}

.colswap-light-coral-to-coral {
  background-color: var(--coral-light);
  color: var(--coral-dark);
  border: 1px solid var(--coral-light);
  transition: all 0.3s ease;
}

.colswap-light-coral-to-coral:hover {
  background-color: var(--coral);
  color: white;
  border-color: var(--coral);
}

.colswap-light-navy-to-navy {
  background-color: var(--navy-light);
  color: var(--navy-dark);
  border: 1px solid var(--navy-light);
  transition: all 0.3s ease;
}

.colswap-light-navy-to-navy:hover {
  background-color: var(--navy);
  color: white;
  border-color: var(--navy);
}

.colswap-light-olive-to-olive {
  background-color: var(--olive-light);
  color: var(--olive-dark);
  border: 1px solid var(--olive-light);
  transition: all 0.3s ease;
}

.colswap-light-olive-to-olive:hover {
  background-color: var(--olive);
  color: white;
  border-color: var(--olive);
}

/* ==========================================================
 | ░▒▓▓▓   MOD_13 : COLSWAP - [WHITE] ➜ [BASE]         ▓▓▓▒░ |
 |----------------------------------------------------------|
 | Description : Transitions du blanc vers la couleur base  |
 |==========================================================*/

.colswap-white-to-purple {
  color: var(--purple);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-purple:hover {
  background-color: var(--purple);
  color: white;
  border-color: var(--purple);
}

.colswap-white-to-blue {
  color: var(--blue);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-blue:hover {
  background-color: var(--blue);
  color: white;
  border-color: var(--blue);
}

.colswap-white-to-red {
  color: var(--red);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-red:hover {
  background-color: var(--red);
  color: white;
  border-color: var(--red);
}

.colswap-white-to-green {
  color: var(--green);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-green:hover {
  background-color: var(--green);
  color: white;
  border-color: var(--green);
}

.colswap-white-to-yellow {
  color: var(--yellow);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-yellow:hover {
  background-color: var(--yellow);
  color: white;
  border-color: var(--yellow);
}

.colswap-white-to-orange {
  color: var(--orange);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-orange:hover {
  background-color: var(--orange);
  color: white;
  border-color: var(--orange);
}

.colswap-white-to-gray {
  color: var(--gray);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-gray:hover {
  background-color: var(--gray);
  color: white;
  border-color: var(--gray);
}

.colswap-white-to-pink {
  color: var(--pink);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-pink:hover {
  background-color: var(--pink);
  color: white;
  border-color: var(--pink);
}

.colswap-white-to-teal {
  color: var(--teal);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-teal:hover {
  background-color: var(--teal);
  color: white;
  border-color: var(--teal);
}

.colswap-white-to-gold {
  color: var(--gold);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-gold:hover {
  background-color: var(--gold);
  color: white;
  border-color: var(--gold);
}

.colswap-white-to-brown {
  color: var(--brown);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-brown:hover {
  background-color: var(--brown);
  color: white;
  border-color: var(--brown);
}

.colswap-white-to-beige {
  color: var(--beige);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-beige:hover {
  background-color: var(--beige);
  color: white;
  border-color: var(--beige);
}

.colswap-white-to-cyan {
  color: var(--cyan);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-cyan:hover {
  background-color: var(--cyan);
  color: white;
  border-color: var(--cyan);
}

.colswap-white-to-indigo {
  color: var(--indigo);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-indigo:hover {
  background-color: var(--indigo);
  color: white;
  border-color: var(--indigo);
}

.colswap-white-to-silver {
  color: var(--silver);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-silver:hover {
  background-color: var(--silver);
  color: white;
  border-color: var(--silver);
}

.colswap-white-to-black {
  color: var(--black);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-black:hover {
  background-color: var(--black);
  color: white;
  border-color: var(--black);
}

.colswap-white-to-white {
  color: var(--white);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-white:hover {
  background-color: var(--white);
  color: white;
  border-color: var(--white);
}

.colswap-white-to-lime {
  color: var(--lime);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-lime:hover {
  background-color: var(--lime);
  color: white;
  border-color: var(--lime);
}

.colswap-white-to-sky {
  color: var(--sky);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-sky:hover {
  background-color: var(--sky);
  color: white;
  border-color: var(--sky);
}

.colswap-white-to-magenta {
  color: var(--magenta);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-magenta:hover {
  background-color: var(--magenta);
  color: white;
  border-color: var(--magenta);
}

.colswap-white-to-coral {
  color: var(--coral);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-coral:hover {
  background-color: var(--coral);
  color: white;
  border-color: var(--coral);
}

.colswap-white-to-navy {
  color: var(--navy);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-navy:hover {
  background-color: var(--navy);
  color: white;
  border-color: var(--navy);
}

.colswap-white-to-olive {
  color: var(--olive);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-olive:hover {
  background-color: var(--olive);
  color: white;
  border-color: var(--olive);
}


/* ==========================================================
 | ░▒▓▓▓   MOD_15 : COLSWAP - [WHITE] ➜ [DARK]         ▓▓▓▒░ |
 |----------------------------------------------------------|
 | Description : Transitions du blanc vers teinte foncée    |
 |==========================================================*/

.colswap-white-to-dark-purple {
  color: var(--purple-dark);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-dark-purple:hover {
  background-color: var(--purple-dark);
  color: white;
  border-color: var(--purple-dark);
}

.colswap-white-to-dark-blue {
  color: var(--blue-dark);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-dark-blue:hover {
  background-color: var(--blue-dark);
  color: white;
  border-color: var(--blue-dark);
}

.colswap-white-to-dark-red {
  color: var(--red-dark);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-dark-red:hover {
  background-color: var(--red-dark);
  color: white;
  border-color: var(--red-dark);
}

.colswap-white-to-dark-green {
  color: var(--green-dark);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-dark-green:hover {
  background-color: var(--green-dark);
  color: white;
  border-color: var(--green-dark);
}

.colswap-white-to-dark-yellow {
  color: var(--yellow-dark);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-dark-yellow:hover {
  background-color: var(--yellow-dark);
  color: white;
  border-color: var(--yellow-dark);
}

.colswap-white-to-dark-orange {
  color: var(--orange-dark);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-dark-orange:hover {
  background-color: var(--orange-dark);
  color: white;
  border-color: var(--orange-dark);
}

.colswap-white-to-dark-gray {
  color: var(--gray-dark);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-dark-gray:hover {
  background-color: var(--gray-dark);
  color: white;
  border-color: var(--gray-dark);
}

.colswap-white-to-dark-pink {
  color: var(--pink-dark);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-dark-pink:hover {
  background-color: var(--pink-dark);
  color: white;
  border-color: var(--pink-dark);
}

.colswap-white-to-dark-teal {
  color: var(--teal-dark);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-dark-teal:hover {
  background-color: var(--teal-dark);
  color: white;
  border-color: var(--teal-dark);
}

.colswap-white-to-dark-gold {
  color: var(--gold-dark);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-dark-gold:hover {
  background-color: var(--gold-dark);
  color: white;
  border-color: var(--gold-dark);
}

.colswap-white-to-dark-brown {
  color: var(--brown-dark);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-dark-brown:hover {
  background-color: var(--brown-dark);
  color: white;
  border-color: var(--brown-dark);
}

.colswap-white-to-dark-beige {
  color: var(--beige-dark);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-dark-beige:hover {
  background-color: var(--beige-dark);
  color: white;
  border-color: var(--beige-dark);
}

.colswap-white-to-dark-cyan {
  color: var(--cyan-dark);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-dark-cyan:hover {
  background-color: var(--cyan-dark);
  color: white;
  border-color: var(--cyan-dark);
}

.colswap-white-to-dark-indigo {
  color: var(--indigo-dark);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-dark-indigo:hover {
  background-color: var(--indigo-dark);
  color: white;
  border-color: var(--indigo-dark);
}

.colswap-white-to-dark-silver {
  color: var(--silver-dark);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-dark-silver:hover {
  background-color: var(--silver-dark);
  color: white;
  border-color: var(--silver-dark);
}

.colswap-white-to-dark-black {
  color: var(--black-dark);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-dark-black:hover {
  background-color: var(--black-dark);
  color: white;
  border-color: var(--black-dark);
}

.colswap-white-to-dark-white {
  color: var(--white-dark);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-dark-white:hover {
  background-color: var(--white-dark);
  color: white;
  border-color: var(--white-dark);
}

.colswap-white-to-dark-lime {
  color: var(--lime-dark);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-dark-lime:hover {
  background-color: var(--lime-dark);
  color: white;
  border-color: var(--lime-dark);
}

.colswap-white-to-dark-sky {
  color: var(--sky-dark);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-dark-sky:hover {
  background-color: var(--sky-dark);
  color: white;
  border-color: var(--sky-dark);
}

.colswap-white-to-dark-magenta {
  color: var(--magenta-dark);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-dark-magenta:hover {
  background-color: var(--magenta-dark);
  color: white;
  border-color: var(--magenta-dark);
}

.colswap-white-to-dark-coral {
  color: var(--coral-dark);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-dark-coral:hover {
  background-color: var(--coral-dark);
  color: white;
  border-color: var(--coral-dark);
}

.colswap-white-to-dark-navy {
  color: var(--navy-dark);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-dark-navy:hover {
  background-color: var(--navy-dark);
  color: white;
  border-color: var(--navy-dark);
}

.colswap-white-to-dark-olive {
  color: var(--olive-dark);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-dark-olive:hover {
  background-color: var(--olive-dark);
  color: white;
  border-color: var(--olive-dark);
}


/* ==========================================================
 | ░▒▓▓▓   MOD_15 : COLSWAP - [WHITE] ➜ [LIGHT]        ▓▓▓▒░ |
 |----------------------------------------------------------|
 | Description : Transitions du blanc vers teinte claire     |
 |==========================================================*/

.colswap-white-to-light-purple {
  color: var(--purple);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-light-purple:hover {
  background-color: var(--purple-light);
  color: var(--purple-dark);
  border-color: var(--purple-light);
}

.colswap-white-to-light-blue {
  color: var(--blue);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-light-blue:hover {
  background-color: var(--blue-light);
  color: var(--blue-dark);
  border-color: var(--blue-light);
}

.colswap-white-to-light-red {
  color: var(--red);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-light-red:hover {
  background-color: var(--red-light);
  color: var(--red-dark);
  border-color: var(--red-light);
}

.colswap-white-to-light-green {
  color: var(--green);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-light-green:hover {
  background-color: var(--green-light);
  color: var(--green-dark);
  border-color: var(--green-light);
}

.colswap-white-to-light-yellow {
  color: var(--yellow);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-light-yellow:hover {
  background-color: var(--yellow-light);
  color: var(--yellow-dark);
  border-color: var(--yellow-light);
}

.colswap-white-to-light-orange {
  color: var(--orange);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-light-orange:hover {
  background-color: var(--orange-light);
  color: var(--orange-dark);
  border-color: var(--orange-light);
}

.colswap-white-to-light-gray {
  color: var(--gray);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-light-gray:hover {
  background-color: var(--gray-light);
  color: var(--gray-dark);
  border-color: var(--gray-light);
}

.colswap-white-to-light-pink {
  color: var(--pink);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-light-pink:hover {
  background-color: var(--pink-light);
  color: var(--pink-dark);
  border-color: var(--pink-light);
}

.colswap-white-to-light-teal {
  color: var(--teal);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-light-teal:hover {
  background-color: var(--teal-light);
  color: var(--teal-dark);
  border-color: var(--teal-light);
}

.colswap-white-to-light-gold {
  color: var(--gold);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-light-gold:hover {
  background-color: var(--gold-light);
  color: var(--gold-dark);
  border-color: var(--gold-light);
}

.colswap-white-to-light-brown {
  color: var(--brown);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-light-brown:hover {
  background-color: var(--brown-light);
  color: var(--brown-dark);
  border-color: var(--brown-light);
}

.colswap-white-to-light-beige {
  color: var(--beige);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-light-beige:hover {
  background-color: var(--beige-light);
  color: var(--beige-dark);
  border-color: var(--beige-light);
}

.colswap-white-to-light-cyan {
  color: var(--cyan);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-light-cyan:hover {
  background-color: var(--cyan-light);
  color: var(--cyan-dark);
  border-color: var(--cyan-light);
}

.colswap-white-to-light-indigo {
  color: var(--indigo);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-light-indigo:hover {
  background-color: var(--indigo-light);
  color: var(--indigo-dark);
  border-color: var(--indigo-light);
}

.colswap-white-to-light-silver {
  color: var(--silver);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-light-silver:hover {
  background-color: var(--silver-light);
  color: var(--silver-dark);
  border-color: var(--silver-light);
}

.colswap-white-to-light-black {
  color: var(--black);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-light-black:hover {
  background-color: var(--black-light);
  color: var(--black-dark);
  border-color: var(--black-light);
}

.colswap-white-to-light-white {
  color: var(--white);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-light-white:hover {
  background-color: var(--white-light);
  color: var(--white-dark);
  border-color: var(--white-light);
}

.colswap-white-to-light-lime {
  color: var(--lime);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-light-lime:hover {
  background-color: var(--lime-light);
  color: var(--lime-dark);
  border-color: var(--lime-light);
}

.colswap-white-to-light-sky {
  color: var(--sky);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-light-sky:hover {
  background-color: var(--sky-light);
  color: var(--sky-dark);
  border-color: var(--sky-light);
}

.colswap-white-to-light-magenta {
  color: var(--magenta);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-light-magenta:hover {
  background-color: var(--magenta-light);
  color: var(--magenta-dark);
  border-color: var(--magenta-light);
}

.colswap-white-to-light-coral {
  color: var(--coral);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-light-coral:hover {
  background-color: var(--coral-light);
  color: var(--coral-dark);
  border-color: var(--coral-light);
}

.colswap-white-to-light-navy {
  color: var(--navy);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-light-navy:hover {
  background-color: var(--navy-light);
  color: var(--navy-dark);
  border-color: var(--navy-light);
}

.colswap-white-to-light-olive {
  color: var(--olive);
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-white-to-light-olive:hover {
  background-color: var(--olive-light);
  color: var(--olive-dark);
  border-color: var(--olive-light);
}

/* ==========================================================
 | ░▒▓▓▓   MOD_16 : COLSWAP - [REV-WHITE] ➜ [BASE]    ▓▓▓▒░  |
 |---------------------------------------------------------- |
 | Description : Transitions du blanc vers teinte claire     |
 |==========================================================*/

.colswap-rev-white-to-purple {
  background-color: white;
  color: var(--purple);
  border: 1px solid var(--purple);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-purple:hover {
  background-color: var(--purple);
  color: white;
  border-color: var(--purple);
}

.colswap-rev-white-to-blue {
  background-color: white;
  color: var(--blue);
  border: 1px solid var(--blue);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-blue:hover {
  background-color: var(--blue);
  color: white;
  border-color: var(--blue);
}

.colswap-rev-white-to-red {
  background-color: white;
  color: var(--red);
  border: 1px solid var(--red);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-red:hover {
  background-color: var(--red);
  color: white;
  border-color: var(--red);
}

.colswap-rev-white-to-green {
  background-color: white;
  color: var(--green);
  border: 1px solid var(--green);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-green:hover {
  background-color: var(--green);
  color: white;
  border-color: var(--green);
}

.colswap-rev-white-to-yellow {
  background-color: white;
  color: var(--yellow);
  border: 1px solid var(--yellow);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-yellow:hover {
  background-color: var(--yellow);
  color: white;
  border-color: var(--yellow);
}

.colswap-rev-white-to-orange {
  background-color: white;
  color: var(--orange);
  border: 1px solid var(--orange);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-orange:hover {
  background-color: var(--orange);
  color: white;
  border-color: var(--orange);
}

.colswap-rev-white-to-gray {
  background-color: white;
  color: var(--gray);
  border: 1px solid var(--gray);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-gray:hover {
  background-color: var(--gray);
  color: white;
  border-color: var(--gray);
}

.colswap-rev-white-to-pink {
  background-color: white;
  color: var(--pink);
  border: 1px solid var(--pink);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-pink:hover {
  background-color: var(--pink);
  color: white;
  border-color: var(--pink);
}

.colswap-rev-white-to-teal {
  background-color: white;
  color: var(--teal);
  border: 1px solid var(--teal);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-teal:hover {
  background-color: var(--teal);
  color: white;
  border-color: var(--teal);
}

.colswap-rev-white-to-gold {
  background-color: white;
  color: var(--gold);
  border: 1px solid var(--gold);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-gold:hover {
  background-color: var(--gold);
  color: white;
  border-color: var(--gold);
}

.colswap-rev-white-to-brown {
  background-color: white;
  color: var(--brown);
  border: 1px solid var(--brown);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-brown:hover {
  background-color: var(--brown);
  color: white;
  border-color: var(--brown);
}

.colswap-rev-white-to-beige {
  background-color: white;
  color: var(--beige);
  border: 1px solid var(--beige);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-beige:hover {
  background-color: var(--beige);
  color: white;
  border-color: var(--beige);
}

.colswap-rev-white-to-cyan {
  background-color: white;
  color: var(--cyan);
  border: 1px solid var(--cyan);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-cyan:hover {
  background-color: var(--cyan);
  color: white;
  border-color: var(--cyan);
}

.colswap-rev-white-to-indigo {
  background-color: white;
  color: var(--indigo);
  border: 1px solid var(--indigo);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-indigo:hover {
  background-color: var(--indigo);
  color: white;
  border-color: var(--indigo);
}

.colswap-rev-white-to-silver {
  background-color: white;
  color: var(--silver);
  border: 1px solid var(--silver);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-silver:hover {
  background-color: var(--silver);
  color: white;
  border-color: var(--silver);
}

.colswap-rev-white-to-black {
  background-color: white;
  color: var(--black);
  border: 1px solid var(--black);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-black:hover {
  background-color: var(--black);
  color: white;
  border-color: var(--black);
}

.colswap-rev-white-to-white {
  background-color: white;
  color: var(--white);
  border: 1px solid var(--white);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-white:hover {
  background-color: var(--white);
  color: white;
  border-color: var(--white);
}

.colswap-rev-white-to-lime {
  background-color: white;
  color: var(--lime);
  border: 1px solid var(--lime);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-lime:hover {
  background-color: var(--lime);
  color: white;
  border-color: var(--lime);
}

.colswap-rev-white-to-sky {
  background-color: white;
  color: var(--sky);
  border: 1px solid var(--sky);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-sky:hover {
  background-color: var(--sky);
  color: white;
  border-color: var(--sky);
}

.colswap-rev-white-to-magenta {
  background-color: white;
  color: var(--magenta);
  border: 1px solid var(--magenta);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-magenta:hover {
  background-color: var(--magenta);
  color: white;
  border-color: var(--magenta);
}

.colswap-rev-white-to-coral {
  background-color: white;
  color: var(--coral);
  border: 1px solid var(--coral);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-coral:hover {
  background-color: var(--coral);
  color: white;
  border-color: var(--coral);
}

.colswap-rev-white-to-navy {
  background-color: white;
  color: var(--navy);
  border: 1px solid var(--navy);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-navy:hover {
  background-color: var(--navy);
  color: white;
  border-color: var(--navy);
}

.colswap-rev-white-to-olive {
  background-color: white;
  color: var(--olive);
  border: 1px solid var(--olive);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-olive:hover {
  background-color: var(--olive);
  color: white;
  border-color: var(--olive);
}


/* ==========================================================
 | ░▒▓▓▓   MOD_17 : COLSWAP - [REV-WHITE] ➜ [DARK]    ▓▓▓▒░ |
 |---------------------------------------------------------- |
 | Description : Transitions du blanc vers teinte claire     |
 |==========================================================*/

.colswap-rev-white-to-dark-purple {
  background-color: white;
  color: var(--purple-dark);
  border: 1px solid var(--purple-dark);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-dark-purple:hover {
  background-color: var(--purple-dark);
  color: var(--white);
  border-color: var(--purple-dark);
}

.colswap-rev-white-to-dark-blue {
  background-color: white;
  color: var(--blue-dark);
  border: 1px solid var(--blue-dark);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-dark-blue:hover {
  background-color: var(--blue-dark);
  color: var(--white);
  border-color: var(--blue-dark);
}

.colswap-rev-white-to-dark-red {
  background-color: white;
  color: var(--red-dark);
  border: 1px solid var(--red-dark);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-dark-red:hover {
  background-color: var(--red-dark);
  color: var(--white);
  border-color: var(--red-dark);
}

.colswap-rev-white-to-dark-green {
  background-color: white;
  color: var(--green-dark);
  border: 1px solid var(--green-dark);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-dark-green:hover {
  background-color: var(--green-dark);
  color: var(--white);
  border-color: var(--green-dark);
}

.colswap-rev-white-to-dark-yellow {
  background-color: white;
  color: var(--yellow-dark);
  border: 1px solid var(--yellow-dark);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-dark-yellow:hover {
  background-color: var(--yellow-dark);
  color: var(--white);
  border-color: var(--yellow-dark);
}

.colswap-rev-white-to-dark-orange {
  background-color: white;
  color: var(--orange-dark);
  border: 1px solid var(--orange-dark);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-dark-orange:hover {
  background-color: var(--orange-dark);
  color: var(--white);
  border-color: var(--orange-dark);
}

.colswap-rev-white-to-dark-gray {
  background-color: white;
  color: var(--gray-dark);
  border: 1px solid var(--gray-dark);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-dark-gray:hover {
  background-color: var(--gray-dark);
  color: var(--white);
  border-color: var(--gray-dark);
}

.colswap-rev-white-to-dark-pink {
  background-color: white;
  color: var(--pink-dark);
  border: 1px solid var(--pink-dark);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-dark-pink:hover {
  background-color: var(--pink-dark);
  color: var(--white);
  border-color: var(--pink-dark);
}

.colswap-rev-white-to-dark-teal {
  background-color: white;
  color: var(--teal-dark);
  border: 1px solid var(--teal-dark);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-dark-teal:hover {
  background-color: var(--teal-dark);
  color: var(--white);
  border-color: var(--teal-dark);
}

.colswap-rev-white-to-dark-gold {
  background-color: white;
  color: var(--gold-dark);
  border: 1px solid var(--gold-dark);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-dark-gold:hover {
  background-color: var(--gold-dark);
  color: var(--white);
  border-color: var(--gold-dark);
}

.colswap-rev-white-to-dark-brown {
  background-color: white;
  color: var(--brown-dark);
  border: 1px solid var(--brown-dark);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-dark-brown:hover {
  background-color: var(--brown-dark);
  color: var(--white);
  border-color: var(--brown-dark);
}

.colswap-rev-white-to-dark-beige {
  background-color: white;
  color: var(--beige-dark);
  border: 1px solid var(--beige-dark);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-dark-beige:hover {
  background-color: var(--beige-dark);
  color: var(--white);
  border-color: var(--beige-dark);
}

.colswap-rev-white-to-dark-cyan {
  background-color: white;
  color: var(--cyan-dark);
  border: 1px solid var(--cyan-dark);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-dark-cyan:hover {
  background-color: var(--cyan-dark);
  color: var(--white);
  border-color: var(--cyan-dark);
}

.colswap-rev-white-to-dark-indigo {
  background-color: white;
  color: var(--indigo-dark);
  border: 1px solid var(--indigo-dark);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-dark-indigo:hover {
  background-color: var(--indigo-dark);
  color: var(--white);
  border-color: var(--indigo-dark);
}

.colswap-rev-white-to-dark-silver {
  background-color: white;
  color: var(--silver-dark);
  border: 1px solid var(--silver-dark);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-dark-silver:hover {
  background-color: var(--silver-dark);
  color: var(--white);
  border-color: var(--silver-dark);
}

.colswap-rev-white-to-dark-black {
  background-color: white;
  color: var(--black-dark);
  border: 1px solid var(--black-dark);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-dark-black:hover {
  background-color: var(--black-dark);
  color: var(--white);
  border-color: var(--black-dark);
}

.colswap-rev-white-to-dark-white {
  background-color: white;
  color: var(--white-dark);
  border: 1px solid var(--white-dark);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-dark-white:hover {
  background-color: var(--white-dark);
  color: var(--white);
  border-color: var(--white-dark);
}

.colswap-rev-white-to-dark-lime {
  background-color: white;
  color: var(--lime-dark);
  border: 1px solid var(--lime-dark);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-dark-lime:hover {
  background-color: var(--lime-dark);
  color: var(--white);
  border-color: var(--lime-dark);
}

.colswap-rev-white-to-dark-sky {
  background-color: white;
  color: var(--sky-dark);
  border: 1px solid var(--sky-dark);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-dark-sky:hover {
  background-color: var(--sky-dark);
  color: var(--white);
  border-color: var(--sky-dark);
}

.colswap-rev-white-to-dark-magenta {
  background-color: white;
  color: var(--magenta-dark);
  border: 1px solid var(--magenta-dark);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-dark-magenta:hover {
  background-color: var(--magenta-dark);
  color: var(--white);
  border-color: var(--magenta-dark);
}

.colswap-rev-white-to-dark-coral {
  background-color: white;
  color: var(--coral-dark);
  border: 1px solid var(--coral-dark);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-dark-coral:hover {
  background-color: var(--coral-dark);
  color: var(--white);
  border-color: var(--coral-dark);
}

.colswap-rev-white-to-dark-navy {
  background-color: white;
  color: var(--navy-dark);
  border: 1px solid var(--navy-dark);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-dark-navy:hover {
  background-color: var(--navy-dark);
  color: var(--white);
  border-color: var(--navy-dark);
}

.colswap-rev-white-to-dark-olive {
  background-color: white;
  color: var(--olive-dark);
  border: 1px solid var(--olive-dark);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-dark-olive:hover {
  background-color: var(--olive-dark);
  color: var(--white);
  border-color: var(--olive-dark);
}


/* ==========================================================
 | ░▒▓▓▓   MOD_18 : COLSWAP - [REV-WHITE] ➜ [LIGHT]    ▓▓▓▒░ |
 |---------------------------------------------------------- |
 | Description : Transitions du blanc vers teinte claire     |
 |==========================================================*/

.colswap-rev-white-to-light-purple {
  background-color: white;
  color: var(--purple-light);
  border: 1px solid var(--purple-light);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-light-purple:hover {
  background-color: var(--purple-light);
  color: var(--purple-dark);
  border-color: var(--purple-light);
}

.colswap-rev-white-to-light-blue {
  background-color: white;
  color: var(--blue-light);
  border: 1px solid var(--blue-light);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-light-blue:hover {
  background-color: var(--blue-light);
  color: var(--blue-dark);
  border-color: var(--blue-light);
}

.colswap-rev-white-to-light-red {
  background-color: white;
  color: var(--red-light);
  border: 1px solid var(--red-light);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-light-red:hover {
  background-color: var(--red-light);
  color: var(--red-dark);
  border-color: var(--red-light);
}

.colswap-rev-white-to-light-green {
  background-color: white;
  color: var(--green-light);
  border: 1px solid var(--green-light);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-light-green:hover {
  background-color: var(--green-light);
  color: var(--green-dark);
  border-color: var(--green-light);
}

.colswap-rev-white-to-light-yellow {
  background-color: white;
  color: var(--yellow-light);
  border: 1px solid var(--yellow-light);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-light-yellow:hover {
  background-color: var(--yellow-light);
  color: var(--yellow-dark);
  border-color: var(--yellow-light);
}

.colswap-rev-white-to-light-orange {
  background-color: white;
  color: var(--orange-light);
  border: 1px solid var(--orange-light);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-light-orange:hover {
  background-color: var(--orange-light);
  color: var(--orange-dark);
  border-color: var(--orange-light);
}

.colswap-rev-white-to-light-gray {
  background-color: white;
  color: var(--gray-light);
  border: 1px solid var(--gray-light);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-light-gray:hover {
  background-color: var(--gray-light);
  color: var(--gray-dark);
  border-color: var(--gray-light);
}

.colswap-rev-white-to-light-pink {
  background-color: white;
  color: var(--pink-light);
  border: 1px solid var(--pink-light);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-light-pink:hover {
  background-color: var(--pink-light);
  color: var(--pink-dark);
  border-color: var(--pink-light);
}

.colswap-rev-white-to-light-teal {
  background-color: white;
  color: var(--teal-light);
  border: 1px solid var(--teal-light);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-light-teal:hover {
  background-color: var(--teal-light);
  color: var(--teal-dark);
  border-color: var(--teal-light);
}

.colswap-rev-white-to-light-gold {
  background-color: white;
  color: var(--gold-light);
  border: 1px solid var(--gold-light);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-light-gold:hover {
  background-color: var(--gold-light);
  color: var(--gold-dark);
  border-color: var(--gold-light);
}

.colswap-rev-white-to-light-brown {
  background-color: white;
  color: var(--brown-light);
  border: 1px solid var(--brown-light);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-light-brown:hover {
  background-color: var(--brown-light);
  color: var(--brown-dark);
  border-color: var(--brown-light);
}

.colswap-rev-white-to-light-beige {
  background-color: white;
  color: var(--beige-light);
  border: 1px solid var(--beige-light);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-light-beige:hover {
  background-color: var(--beige-light);
  color: var(--beige-dark);
  border-color: var(--beige-light);
}

.colswap-rev-white-to-light-cyan {
  background-color: white;
  color: var(--cyan-light);
  border: 1px solid var(--cyan-light);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-light-cyan:hover {
  background-color: var(--cyan-light);
  color: var(--cyan-dark);
  border-color: var(--cyan-light);
}

.colswap-rev-white-to-light-indigo {
  background-color: white;
  color: var(--indigo-light);
  border: 1px solid var(--indigo-light);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-light-indigo:hover {
  background-color: var(--indigo-light);
  color: var(--indigo-dark);
  border-color: var(--indigo-light);
}

.colswap-rev-white-to-light-silver {
  background-color: white;
  color: var(--silver-light);
  border: 1px solid var(--silver-light);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-light-silver:hover {
  background-color: var(--silver-light);
  color: var(--silver-dark);
  border-color: var(--silver-light);
}

.colswap-rev-white-to-light-black {
  background-color: white;
  color: var(--black-light);
  border: 1px solid var(--black-light);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-light-black:hover {
  background-color: var(--black-light);
  color: var(--black-dark);
  border-color: var(--black-light);
}

.colswap-rev-white-to-light-white {
  background-color: white;
  color: var(--white-light);
  border: 1px solid var(--white-light);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-light-white:hover {
  background-color: var(--white-light);
  color: var(--white-dark);
  border-color: var(--white-light);
}

.colswap-rev-white-to-light-lime {
  background-color: white;
  color: var(--lime-light);
  border: 1px solid var(--lime-light);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-light-lime:hover {
  background-color: var(--lime-light);
  color: var(--lime-dark);
  border-color: var(--lime-light);
}

.colswap-rev-white-to-light-sky {
  background-color: white;
  color: var(--sky-light);
  border: 1px solid var(--sky-light);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-light-sky:hover {
  background-color: var(--sky-light);
  color: var(--sky-dark);
  border-color: var(--sky-light);
}

.colswap-rev-white-to-light-magenta {
  background-color: white;
  color: var(--magenta-light);
  border: 1px solid var(--magenta-light);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-light-magenta:hover {
  background-color: var(--magenta-light);
  color: var(--magenta-dark);
  border-color: var(--magenta-light);
}

.colswap-rev-white-to-light-coral {
  background-color: white;
  color: var(--coral-light);
  border: 1px solid var(--coral-light);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-light-coral:hover {
  background-color: var(--coral-light);
  color: var(--coral-dark);
  border-color: var(--coral-light);
}

.colswap-rev-white-to-light-navy {
  background-color: white;
  color: var(--navy-light);
  border: 1px solid var(--navy-light);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-light-navy:hover {
  background-color: var(--navy-light);
  color: var(--navy-dark);
  border-color: var(--navy-light);
}

.colswap-rev-white-to-light-olive {
  background-color: white;
  color: var(--olive-light);
  border: 1px solid var(--olive-light);
  transition: all 0.3s ease;
}
.colswap-rev-white-to-light-olive:hover {
  background-color: var(--olive-light);
  color: var(--olive-dark);
  border-color: var(--olive-light);
}

/* ==========================================================
 | ░▒▓▓▓   MOD_19 : COLSWAP - [ClASSIQUE] ➜ [COLOR]    ▓▓▓▒░ |
 |---------------------------------------------------------- |
 | Description : Transitions du blanc vers teinte claire     |
 |==========================================================*/

[class*="colswap-classique-to-color-"] {
    background-color: white;
    color: var(--black);
    border: 1px solid var(--gray);
    transition: all 0.3s ease;
}


.colswap-classique-to-color-purple:hover  { background-color: var(--purple);  color: var(--white); border-color: var(--purple); }
.colswap-classique-to-color-blue:hover    { background-color: var(--blue);    color: var(--white); border-color: var(--blue); }
.colswap-classique-to-color-red:hover     { background-color: var(--red);     color: var(--white); border-color: var(--red); }
.colswap-classique-to-color-green:hover   { background-color: var(--green);   color: var(--white); border-color: var(--green); }
.colswap-classique-to-color-yellow:hover  { background-color: var(--yellow);  color: var(--white); border-color: var(--yellow); }
.colswap-classique-to-color-orange:hover  { background-color: var(--orange);  color: var(--white); border-color: var(--orange); }
.colswap-classique-to-color-gray:hover    { background-color: var(--gray);    color: var(--white); border-color: var(--gray); }
.colswap-classique-to-color-pink:hover    { background-color: var(--pink);    color: var(--white); border-color: var(--pink); }
.colswap-classique-to-color-teal:hover    { background-color: var(--teal);    color: var(--white); border-color: var(--teal); }
.colswap-classique-to-color-gold:hover    { background-color: var(--gold);    color: var(--white); border-color: var(--gold); }
.colswap-classique-to-color-brown:hover   { background-color: var(--brown);   color: var(--white); border-color: var(--brown); }
.colswap-classique-to-color-beige:hover   { background-color: var(--beige);   color: var(--white); border-color: var(--beige); }
.colswap-classique-to-color-cyan:hover    { background-color: var(--cyan);    color: var(--white); border-color: var(--cyan); }
.colswap-classique-to-color-indigo:hover  { background-color: var(--indigo);  color: var(--white); border-color: var(--indigo); }
.colswap-classique-to-color-silver:hover  { background-color: var(--silver);  color: var(--white); border-color: var(--silver); }
.colswap-classique-to-color-black:hover   { background-color: var(--black);   color: var(--white); border-color: var(--black); }
.colswap-classique-to-color-white:hover   { background-color: var(--white-light); color: var(--black); border-color: var(--white-light); }
.colswap-classique-to-color-lime:hover    { background-color: var(--lime);    color: var(--white); border-color: var(--lime); }
.colswap-classique-to-color-sky:hover     { background-color: var(--sky);     color: var(--white); border-color: var(--sky); }
.colswap-classique-to-color-magenta:hover { background-color: var(--magenta); color: var(--white); border-color: var(--magenta); }
.colswap-classique-to-color-coral:hover   { background-color: var(--coral);   color: var(--white); border-color: var(--coral); }
.colswap-classique-to-color-navy:hover    { background-color: var(--navy);    color: var(--white); border-color: var(--navy); }
.colswap-classique-to-color-olive:hover   { background-color: var(--olive);   color: var(--white); border-color: var(--olive); }
.colswap-classique-to-color-scarlet:hover { background-color: var(--scarlet); color: var(--white); border-color: var(--scarlet); }
.colswap-classique-to-color-mint:hover    { background-color: var(--mint);    color: var(--white); border-color: var(--mint); }
.colswap-classique-to-color-steel:hover   { background-color: var(--steel);   color: var(--white); border-color: var(--steel); }
.colswap-classique-to-color-bronze:hover  { background-color: var(--bronze);  color: var(--white); border-color: var(--bronze); }

/* ==========================================================
 | ░▒▓▓▓   MOD_20 : COLSWAP -  [COLOR] ➜ [ClASSIQUE]   ▓▓▓▒░ |
 |---------------------------------------------------------- |
 | Description : Transitions du blanc vers teinte claire     |
 |==========================================================*/
[class*="colswap-color-to-classique-"] {
    color: var(--white);
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.colswap-color-to-classique-purple {
    background-color: var(--purple);
    border-color: var(--purple);
}
.colswap-color-to-classique-purple:hover {
    background-color: var(--gray-light);
    color: var(--black);
    border-color: var(--gray);
}

.colswap-color-to-classique-blue {
    background-color: var(--blue);
    border-color: var(--blue);
}
.colswap-color-to-classique-blue:hover {
    background-color: var(--gray-light);
    color: var(--black);
    border-color: var(--gray);
}

.colswap-color-to-classique-red {
    background-color: var(--red);
    border-color: var(--red);
}
.colswap-color-to-classique-red:hover {
    background-color: var(--gray-light);
    color: var(--black);
    border-color: var(--gray);
}

.colswap-color-to-classique-green {
    background-color: var(--green);
    border-color: var(--green);
}
.colswap-color-to-classique-green:hover {
    background-color: var(--gray-light);
    color: var(--black);
    border-color: var(--gray);
}

.colswap-color-to-classique-yellow {
    background-color: var(--yellow);
    border-color: var(--yellow);
}
.colswap-color-to-classique-yellow:hover {
    background-color: var(--gray-light);
    color: var(--black);
    border-color: var(--gray);
}

.colswap-color-to-classique-orange {
    background-color: var(--orange);
    border-color: var(--orange);
}
.colswap-color-to-classique-orange:hover {
    background-color: var(--gray-light);
    color: var(--black);
    border-color: var(--gray);
}

.colswap-color-to-classique-gray {
    background-color: var(--gray);
    border-color: var(--gray);
}
.colswap-color-to-classique-gray:hover {
    background-color: var(--gray-light);
    color: var(--black);
    border-color: var(--gray);
}

.colswap-color-to-classique-pink {
    background-color: var(--pink);
    border-color: var(--pink);
}
.colswap-color-to-classique-pink:hover {
    background-color: var(--gray-light);
    color: var(--black);
    border-color: var(--gray);
}

.colswap-color-to-classique-teal {
    background-color: var(--teal);
    border-color: var(--teal);
}
.colswap-color-to-classique-teal:hover {
    background-color: var(--gray-light);
    color: var(--black);
    border-color: var(--gray);
}

.colswap-color-to-classique-gold {
    background-color: var(--gold);
    border-color: var(--gold);
}
.colswap-color-to-classique-gold:hover {
    background-color: var(--gray-light);
    color: var(--black);
    border-color: var(--gray);
}

.colswap-color-to-classique-brown {
    background-color: var(--brown);
    border-color: var(--brown);
}
.colswap-color-to-classique-brown:hover {
    background-color: var(--gray-light);
    color: var(--black);
    border-color: var(--gray);
}

.colswap-color-to-classique-beige {
    background-color: var(--beige);
    border-color: var(--beige);
}
.colswap-color-to-classique-beige:hover {
    background-color: var(--gray-light);
    color: var(--black);
    border-color: var(--gray);
}

.colswap-color-to-classique-cyan {
    background-color: var(--cyan);
    border-color: var(--cyan);
}
.colswap-color-to-classique-cyan:hover {
    background-color: var(--gray-light);
    color: var(--black);
    border-color: var(--gray);
}

.colswap-color-to-classique-indigo {
    background-color: var(--indigo);
    border-color: var(--indigo);
}
.colswap-color-to-classique-indigo:hover {
    background-color: var(--gray-light);
    color: var(--black);
    border-color: var(--gray);
}

.colswap-color-to-classique-silver {
    background-color: var(--silver);
    border-color: var(--silver);
}
.colswap-color-to-classique-silver:hover {
    background-color: var(--gray-light);
    color: var(--black);
    border-color: var(--gray);
}

.colswap-color-to-classique-black {
    background-color: var(--black);
    border-color: var(--black);
}
.colswap-color-to-classique-black:hover {
    background-color: var(--gray-light);
    color: var(--black);
    border-color: var(--gray);
}

.colswap-color-to-classique-white {
    background-color: var(--white);
    border-color: var(--gray);
    color: var(--black);
}
.colswap-color-to-classique-white:hover {
    background-color: var(--gray-light);
    color: var(--black);
    border-color: var(--gray);
}

.colswap-color-to-classique-lime {
    background-color: var(--lime);
    border-color: var(--lime);
}
.colswap-color-to-classique-lime:hover {
    background-color: var(--gray-light);
    color: var(--black);
    border-color: var(--gray);
}

.colswap-color-to-classique-sky {
    background-color: var(--sky);
    border-color: var(--sky);
}
.colswap-color-to-classique-sky:hover {
    background-color: var(--gray-light);
    color: var(--black);
    border-color: var(--gray);
}

.colswap-color-to-classique-magenta {
    background-color: var(--magenta);
    border-color: var(--magenta);
}
.colswap-color-to-classique-magenta:hover {
    background-color: var(--gray-light);
    color: var(--black);
    border-color: var(--gray);
}

.colswap-color-to-classique-coral {
    background-color: var(--coral);
    border-color: var(--coral);
}
.colswap-color-to-classique-coral:hover {
    background-color: var(--gray-light);
    color: var(--black);
    border-color: var(--gray);
}

.colswap-color-to-classique-navy {
    background-color: var(--navy);
    border-color: var(--navy);
}
.colswap-color-to-classique-navy:hover {
    background-color: var(--gray-light);
    color: var(--black);
    border-color: var(--gray);
}

.colswap-color-to-classique-olive {
    background-color: var(--olive);
    border-color: var(--olive);
}
.colswap-color-to-classique-olive:hover {
    background-color: var(--gray-light);
    color: var(--black);
    border-color: var(--gray);
}

.colswap-color-to-classique-scarlet {
    background-color: var(--scarlet);
    border-color: var(--scarlet);
}
.colswap-color-to-classique-scarlet:hover {
    background-color: var(--gray-light);
    color: var(--black);
    border-color: var(--gray);
}

.colswap-color-to-classique-mint {
    background-color: var(--mint);
    border-color: var(--mint);
}
.colswap-color-to-classique-mint:hover {
    background-color: var(--gray-light);
    color: var(--black);
    border-color: var(--gray);
}

.colswap-color-to-classique-steel {
    background-color: var(--steel);
    border-color: var(--steel);
}
.colswap-color-to-classique-steel:hover {
    background-color: var(--gray-light);
    color: var(--black);
    border-color: var(--gray);
}

.colswap-color-to-classique-bronze {
    background-color: var(--bronze);
    border-color: var(--bronze);
}
.colswap-color-to-classique-bronze:hover {
    background-color: var(--gray-light);
    color: var(--black);
    border-color: var(--gray);
}


/* ===========================================================
| ░▒▓▓▓   VARIABLE ROOT                                ▓▓▓▒░ |
|===========================================================*/

:root {
  /* PURPLE */
  --purple-dark: #4b0082;
  --purple: #8754d4;
  --purple-light: #d4b3ff;

  /* BLUE */
  --blue-dark: #003f7f;
  --blue: #549fd4;
  --blue-light: #cce5ff;

  /* RED */
  --red-dark: #8b0000;
  --red: #d73434;
  --red-light: #f5b5b5;

  /* GREEN */
  --green-dark: #0b3d0b;
  --green: #28a745;
  --green-light: #a8e6a1;

  /* YELLOW */
  --yellow-dark: #b28f00;
  --yellow: #ffc107;
  --yellow-light: #fff3cd;

  /* ORANGE */
  --orange-dark: #b34700;
  --orange: #ff8c00;
  --orange-light: #ffd8a6;

  /* GRAY */
  --gray-dark: #343a40;
  --gray: #6c757d;
  --gray-light: #d1d1d1;

  /* PINK */
  --pink-dark: #800040;
  --pink: #e83e8c;
  --pink-light: #f8d0e8;

  /* TEAL (turquoise) */
  --teal-dark: #004d4d;
  --teal: #20c997;
  --teal-light: #b2f0e4;

  /* GOLD */
  --gold-dark: #b8860b;
  --gold: #e1ae18;
  --gold-light: #fce9b2;

  /* BROWN */
  --brown-dark: #3e2723;
  --brown: #795548;
  --brown-light: #d7ccc8;

  /* BEIGE */
  --beige-dark: #a68c6d;
  --beige: #f5f5dc;
  --beige-light: #fffaf0;

  /* CYAN */
  --cyan-dark: #007b8a;
  --cyan: #17a2b8;
  --cyan-light: #b2ebf2;

  /* INDIGO */
  --indigo-dark: #2e1a47;
  --indigo: #6610f2;
  --indigo-light: #d6c7f7;

  /* SILVER */
  --silver-dark: #8a8d8f;
  --silver: #c0c0c0;
  --silver-light: #eeeeee;

  /* BLACK */
  --black-dark: #000000;
  --black: #1c1c1c;
  --black-light: #444444;

  /* WHITE */
  --white-dark: #f0f0f0;
  --white: #ffffff;
  --white-light: #ffffff;

  /* LIME */
  --lime-dark: #6b8e23;
  --lime: #bfff00;
  --lime-light: #e6ffb3;

  /* SKY */
  --sky-dark: #007bb5;
  --sky: #00bfff;
  --sky-light: #cceeff;

  /* MAGENTA */
  --magenta-dark: #8b008b;
  --magenta: #ff00ff;
  --magenta-light: #ffb3ff;

  /* CORAL */
  --coral-dark: #b03a2e;
  --coral: #ff7f50;
  --coral-light: #ffd5c2;

  /* NAVY */
  --navy-dark: #000033;
  --navy: #001f3f;
  --navy-light: #6699cc;

  /* OLIVE */
  --olive-dark: #3d5216;
  --olive: #808000;
  --olive-light: #d4e157;
}