/* ============================================
   BADGES - Système harmonisé AEM77
   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);
}

/* Compétences */
.badge_accordeon.c1 { background-color: #4A90D9; }
.badge_accordeon.c2 { background-color: #F5C542; color: #333; }
.badge_accordeon.c3 { background-color: #E87D28; }
.badge_accordeon.c4 { background-color: #5AB55E; }

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

.badge_accordeon.duree_lecon {
  font-size: 12px;
  transform: rotate(-15deg);
}

/* 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;
}

/* Statuts (rectangulaires - stages code) */
.badge.termine { background: #e2e3e5; color: #383d41; }
.badge.en_cours { background: #fff3cd; color: #856404; }
.badge.prochainement { background: #d1ecf1; color: #0c5460; }
.badge.disponible { background: #d4edda; color: #155724; }
.badge.complet { background: #f8d7da; color: #721c24; }

/* --------------------------------------------
   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);
}

/* Rôles équipe */
.badge.badge_ovale.role { background-color: #546E7A; }
.badge.badge_ovale.referent { background-color: #2E7D32; }
.badge.badge_ovale.direction { background-color: #546E7A; }

/* Badge nouveau (avis) */
.badge.badge_ovale.nouveau {
  color: #494949;
  background: #fff;
  border: 1px solid #494949;
}

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

/* --------------------------------------------
   4. CONTENEUR RÔLES ÉQUIPE
   -------------------------------------------- */

.equipe_roles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

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

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

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