/* ============================================
   BADGES - Système harmonisé CFM77
   3 types de base + variantes
   ============================================ */

/* --------------------------------------------
   1. BADGE ACCORDÉON (rond)
   Usage : compétences C1-C4, durées, checkmarks
   -------------------------------------------- */

.badge_accordeon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  flex-shrink: 0;
  background-color: var(--couleur-theme);
}

/* Durées */
.badge_accordeon.duree {
  transform: rotate(-15deg);
  font-size: 16px;
}

/* Checkmark */
.badge_accordeon.check {
  font-size: 18px;
}

/* Taille petite (modales, listes) */
.badge_accordeon.sm {
  width: 24px;
  height: 24px;
  font-size: 14px;
}

/* Numéro */
.badge_accordeon.numero {
  font-size: 12px;
}

/* Forme ovale (CCP1, Jour 1, etc.) */
.badge_accordeon.oval {
  width: auto;
  padding: 0 15px;
  border-radius: 20px;
}

/* --------------------------------------------
   2. BADGE (base commune)
   Usage : tous les badges texte rectangulaires
   -------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

/* --------------------------------------------
   3. BADGE OVALE (surcharge de .badge)
   Usage : formations, rôles équipe, avis
   -------------------------------------------- */

.badge.badge_ovale {
  border-radius: 20px;
  color: #ffffff;
  background-color: var(--couleur-theme);
}

/* Badge prioritaire (accueil) */
.badge.badge_ovale.prioritaire {
  background-color: #ffffff;
  color: var(--couleur-auto);
  text-transform: uppercase;
}

/* --------------------------------------------
   RESPONSIVE
   -------------------------------------------- */

@media (max-width: 480px) {
  .badge { font-size: 11px; padding: 4px 10px; }

  .badge.badge_ovale { margin-left: 0; }
}