/* Conteneur principal du bloc de rareté */
.product-rarity-container {
  margin-top: 20px; /* Espace au-dessus du bloc */
}

/* Label affiché au-dessus de la jauge (ex : "Degré de rareté : Rare") */
.rarity-label {
  font-weight: bold;       /* Texte en gras */
  margin-bottom: 5px;      /* Espacement avec la jauge en dessous */
}

/* Barre de fond représentant le fond de la jauge */
.rarity-bar {
  width: 100%;             /* Prend toute la largeur disponible */
  max-width: 300px;        /* Ne dépasse jamais 300px */
  height: 16px;            /* Hauteur de la jauge */
  background: #e0e0e0;     /* Couleur de fond gris clair */
  border-radius: 10px;     /* Bords arrondis pour un effet "capsule" */
  overflow: hidden;        /* Cache les débordements de la barre colorée */
}

/* Barre colorée intérieure représentant le niveau de rareté */
.rarity-bar-fill {
  height: 100%;            /* Prend toute la hauteur de la jauge */
  transition: width 0.3s ease-in-out; /* Animation fluide lors du changement de niveau */
}

/* Niveau 1 : Facile à trouver (jauge verte ~33%) */
.rarity-low {
  background-color: #84c947;
}
.rarity-low-txt {
  color: #84c947;
}

/* Niveau 2 : Peu courant (jauge orange ~66%) */
.rarity-medium {
  background-color: #f4b400;
}
.rarity-medium-txt {
  color: #f4b400;
}

/* Niveau 3 : Rare (jauge rouge ~100%) */
.rarity-high {
  background-color: #db4437;
}
.rarity-high-txt {
  color: #db4437;
}

/* (Optionnel) Affichage du texte de rareté en petit */
.rarity-value {
  font-size: 12px;
  color: #666;
}