/* =========================================================
   LYS-MOI — COMPOSANT BADGES / PILLS
   ---------------------------------------------------------
   Badges communs : rôles, statuts, tags, notifications.
   Ne modifie PAS les anciens badges tant qu’on ne migre pas
   les pages manuellement.
   ========================================================= */

.lm-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  width: fit-content;
  max-width: 100%;

  padding: 6px 10px;

  border: 1px solid var(--lm-border-soft);
  border-radius: var(--lm-radius-pill);

  color: var(--lm-text-muted);
  background: var(--lm-surface-soft);

  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;

  white-space: normal;
  overflow-wrap: anywhere;
}

.lm-badge--sm {
  padding: 4px 8px;
  font-size: 0.74rem;
}

.lm-badge--lg {
  padding: 8px 12px;
  font-size: 0.92rem;
}

.lm-badge--accent {
  color: var(--lm-accent);
  background: var(--lm-accent-soft);
  border-color: var(--lm-border-gold);
}

.lm-badge--success {
  color: var(--lm-success);
  background: var(--lm-success-soft);
  border-color: var(--lm-success-border);
}

.lm-badge--danger {
  color: var(--lm-danger-text);
  background: var(--lm-danger-soft);
  border-color: var(--lm-danger-border);
}

.lm-badge--warning {
  color: var(--lm-warning);
  background: var(--lm-warning-soft);
  border-color: var(--lm-warning-border);
}

.lm-badge--muted {
  color: var(--lm-text-faint);
  background: rgba(255, 255, 255, 0.035);
  border-color: var(--lm-border-soft);
}

/* =========================================================
   STATUTS D’ŒUVRES
   ========================================================= */

.lm-badge--ongoing,
.lm-status--ongoing {
  color: #ffe2a6;
  background: rgba(240, 198, 116, 0.14);
  border-color: rgba(240, 198, 116, 0.24);
}

.lm-badge--finished,
.lm-status--finished {
  color: #d6f3dc;
  background: rgba(120, 220, 160, 0.12);
  border-color: rgba(120, 220, 160, 0.22);
}

/* =========================================================
   TAGS
   ========================================================= */

.lm-tag {
  display: inline-flex;
  align-items: center;

  width: fit-content;
  max-width: 100%;

  padding: 6px 10px;

  border-radius: var(--lm-radius-pill);
  border: 1px solid var(--lm-border-soft);

  color: var(--lm-text-muted);
  background: var(--lm-surface-soft);

  font-size: 0.78rem;
  line-height: 1.25;

  white-space: normal;
  overflow-wrap: anywhere;
}

.lm-tag--accent {
  color: var(--lm-accent);
  background: var(--lm-accent-soft);
  border-color: var(--lm-border-gold);
}

.lm-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* =========================================================
   DOTS / NOTIFICATIONS
   ========================================================= */

.lm-dot {
  display: inline-block;

  width: 9px;
  height: 9px;

  border-radius: 999px;

  background: var(--lm-accent);
  box-shadow: 0 0 12px rgba(240, 198, 116, 0.72);
}

.lm-dot--danger {
  background: #ff8f8f;
  box-shadow: 0 0 12px rgba(255, 120, 120, 0.72);
}

.lm-dot--success {
  background: var(--lm-success);
  box-shadow: 0 0 12px rgba(159, 211, 167, 0.62);
}

.lm-counter-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 22px;
  height: 22px;

  padding: 0 7px;

  border-radius: var(--lm-radius-pill);
  border: 1px solid var(--lm-border-gold);

  color: var(--lm-accent);
  background: var(--lm-accent-soft);

  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1;
}