/* Styles communs pour tous les badges personnalisés */
.col-maroon, .col-magenta, .col-red, .col-orange,
.col-yellow, .col-lime, .col-olive, .col-green,
.col-teal, .col-cyan, .col-blue, .col-darkblue, .col-purple,
.col-navy, .col-black, .col-gray, .col-silver,
.col-white, .col-bbr {
  color: white;
  -border-radius: 0.25rem;
  -padding: 0.5em 0.75em;
  -display: inline-block;
  -font-weight: 600;
  transition: background-color 0.3s ease, color 0.3s ease; /* Pour un effet de transition doux */
}

/* Couleurs spécifiques pour chaque variante avec plus de saturation */
.col-maroon {
  background-color: #800000; /* Bordeaux vif */
}

.col-maroon:hover {
  background-color: #660000; /* Couleur légèrement plus foncée */
  color: white;
}

.col-magenta {
  background-color: #E91E63; /* Magenta vif */
}

.col-magenta:hover {
  background-color: #C2185B; /* Couleur légèrement plus foncée */
  color: white;
}

.col-red {
  background-color: #FF5252; /* Rouge vif */
}

.col-red:hover {
  background-color: #E53935; /* Couleur légèrement plus foncée */
  color: white;
}

.col-orange {
  background-color: #FF9800; /* Orange plus marqué */
}

.col-orange:hover {
  background-color: #FB8C00; /* Couleur légèrement plus foncée */
  color: white;
}

.col-yellow {
  background-color: #FFEB3B; /* Jaune vif */
  color: black;
}

.col-yellow:hover {
  background-color: #FBC02D; /* Couleur légèrement plus foncée */
  color: black;
}

.col-lime {
  background-color: #CDDC39; /* Lime vif */
  color: black;
}

.col-lime:hover {
  background-color: #AFB42B; /* Couleur légèrement plus foncée */
  color: black;
}

.col-olive {
  background-color: #808000; /* Olive légèrement plus saturé */
}

.col-olive:hover {
  background-color: #6B6B00; /* Couleur légèrement plus foncée */
  color: white;
}

.col-green {
  background-color: #4CAF50; /* Vert vif */
}

.col-green:hover {
  background-color: #388E3C; /* Couleur légèrement plus foncée */
  color: white;
}

.col-teal {
  background-color: #009688; /* Teal plus marqué */
}

.col-teal:hover {
  background-color: #00796B; /* Couleur légèrement plus foncée */
  color: white;
}

.col-cyan {
  background-color: #00BCD4; /* Cyan plus marqué */
  color: black;
}

.col-cyan:hover {
  background-color: #00ACC1; /* Couleur légèrement plus foncée */
  color: black;
}

.col-blue {
  background-color: #007BFF; /* Bleu vif, similaire à btn-primary */
}

.col-blue:hover {
  background-color: #0056b3; /* Couleur légèrement plus foncée */
  color: white;
}

.col-darkblue {
  background-color: #004080; /* Bleu plus foncé */
}

.col-darkblue:hover {
  background-color: #003366; /* Couleur encore plus foncée pour le hover */
  color: white;
}

.col-purple {
  background-color: #673AB7; /* Pourpre vif */
}

.col-purple:hover {
  background-color: #512DA8; /* Couleur légèrement plus foncée */
  color: white;
}

.col-navy {
  background-color: #001F3F; /* Navy plus vif et sombre */
}

.col-navy:hover {
  background-color: #001737; /* Couleur légèrement plus foncée */
  color: white;
}

.col-black {
  background-color: #212121; /* Noir vif */
}

.col-black:hover {
  background-color: #1B1B1B; /* Couleur légèrement plus foncée */
  color: white;
}

.col-gray {
  background-color: #757575; /* Gris plus marqué */
}

.col-gray:hover {
  background-color: #616161; /* Couleur légèrement plus foncée */
  color: white;
}

.col-silver {
  background-color: #B0BEC5; /* Argent vif */
  color: black;
}

.col-silver:hover {
  background-color: #90A4AE; /* Couleur légèrement plus foncée */
  color: black;
}

.col-white {
  background-color: #F5F5F5; /* Blanc légèrement teinté pour un effet moins brut */
  color: black;
  border: 1px solid #ccc; /* Pour distinguer le badge sur fond blanc */
}

.col-white:hover {
  background-color: #E0E0E0; /* Couleur légèrement plus foncée */
  color: black;
}

/* Badge Bleu-Blanc-Rouge avec Dégradé */
.col-bbr {
  background: linear-gradient(to right, dodgerblue 20%, dodgerblue 25%, snow 45%, snow 55%, crimson 75%, crimson 80%); /* Gradient fluide Bleu-Blanc-Rouge avec transition floue */
  color: black; /* Pour contraste sur blanc */
  border: none;
}

.col-bbr:hover {
  -filter: brightness(0.9); /* Légèrement plus foncé pour l'effet de survol */
  color: black;
}