.badge {
    display: inline-flex;           /* aligne l'icône et le texte verticalement */
    align-items: center;           /* centrage vertical de l'icône */
    gap: 6px;                      /* petit espace entre icône et texte */
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: var(--radius);
    color: #fff;
    /* Empêcher les retours à la ligne “lettre par lettre” quand le badge est compressé en flex */
    white-space: nowrap;
    flex-shrink: 0;
  }
  .badge .lucide-icon { width: 16px; height: 16px; margin: 0; vertical-align: middle; display: inline-block; }
  
  /* Variantes */
  .badge-success { background: var(--success); }
  .badge-danger { background: var(--danger); }
  .badge-warning { background: var(--warning); }
  .badge-info { background: var(--info); }
  .badge-accent { background: var(--accent); }
  /* Alias pour les libellés "alerte" utilisés dans la modale */
  .badge-alert { background: var(--warning); }
  .badge-brand { background: var(--brand); }
  /* Badge neutre basé sur variables de thème */
  .badge-muted { background: var(--badge-muted-bg); color: var(--badge-muted-fg); }

  /* Désactivé / neutre léger */
  .badge-disabled {
    background: var(--badge-muted-bg);
    color: var(--badge-muted-fg);
    border: 1px solid var(--line);
  }


  /* Badges stations (éclaircis à partir des couleurs du thème) */
  .slot-station {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--brand) 12%, white 88%);
    color: color-mix(in srgb, var(--brand) 70%, black 30%);
  }
  /* Mapping par type de station (numéro) → couleur thème éclaircie */
  .slot-station.station-type-1 { /* Danger */
    background: color-mix(in srgb, var(--danger) 14%, white 86%);
    border-color: color-mix(in srgb, var(--danger) 28%, white 72%);
    color: color-mix(in srgb, var(--danger) 80%, black 20%);
  }
  .slot-station.station-type-2 { /* Warning */
    background: color-mix(in srgb, var(--warning) 14%, white 86%);
    border-color: color-mix(in srgb, var(--warning) 28%, white 72%);
    color: color-mix(in srgb, var(--warning) 70%, black 30%);
  }
  .slot-station.station-type-3 { /* Info */
    background: color-mix(in srgb, var(--info) 14%, white 86%);
    border-color: color-mix(in srgb, var(--info) 28%, white 72%);
    color: color-mix(in srgb, var(--info) 75%, black 25%);
  }
  .slot-station.station-type-4 { /* Success */
    background: color-mix(in srgb, var(--success) 14%, white 86%);
    border-color: color-mix(in srgb, var(--success) 28%, white 72%);
    color: color-mix(in srgb, var(--success) 75%, black 25%);
  }
  .slot-station.station-type-5 { /* Accent */
    background: color-mix(in srgb, var(--accent) 14%, white 86%);
    border-color: color-mix(in srgb, var(--accent) 28%, white 72%);
    color: color-mix(in srgb, var(--accent) 75%, black 25%);
  }
  .slot-station.station-type-6 { /* Brand */
    background: color-mix(in srgb, var(--brand) 14%, white 86%);
    border-color: color-mix(in srgb, var(--brand) 28%, white 72%);
    color: color-mix(in srgb, var(--brand) 75%, black 25%);
  }

  /* ================================
     Animation: feedback étoiles (UI)
     ================================ */
  .te-feedback-badge {
    will-change: transform, box-shadow, filter;
  }
  .te-feedback-badge--change {
    animation: teFeedbackPulse 900ms ease-out 1;
  }
  .te-feedback-badge--up {
    animation: teFeedbackPulseUp 900ms ease-out 1;
  }
  .te-feedback-badge--down {
    animation: teFeedbackPulseDown 900ms ease-out 1;
  }

  @keyframes teFeedbackPulse {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(59,130,246,0.0); filter: saturate(1); }
    30%  { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(59,130,246,0.25); filter: saturate(1.1); }
    100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(59,130,246,0.0); filter: saturate(1); }
  }
  @keyframes teFeedbackPulseUp {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(34,197,94,0.0); filter: saturate(1); }
    30%  { transform: scale(1.07); box-shadow: 0 0 0 7px rgba(34,197,94,0.28); filter: saturate(1.15); }
    100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(34,197,94,0.0); filter: saturate(1); }
  }
  @keyframes teFeedbackPulseDown {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(239,68,68,0.0); filter: saturate(1); }
    30%  { transform: scale(1.07); box-shadow: 0 0 0 7px rgba(239,68,68,0.25); filter: saturate(1.1); }
    100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(239,68,68,0.0); filter: saturate(1); }
  }

  @media (prefers-reduced-motion: reduce) {
    .te-feedback-badge--change,
    .te-feedback-badge--up,
    .te-feedback-badge--down {
      animation: none !important;
    }
  }