/* ═══════════════════════════════════════════════════════════
   COMPONENT — stage-band
   Bandeau de regroupement par stade dans les tableaux de pipeline.
   Barre verticale verte 4 px à gauche + titre Lora italic 500 +
   compteur (N) + hint optionnel.
   ───────────────────────────────────────────────────────────
   Pattern de référence : Demandes chiffrages actuel (« À qualifier (3) »).
   À propager sur Devis (qui utilise aujourd'hui un pill « 🎯 À chiffrer 1 »
   sur bandeau pâle — à éliminer).
   ───────────────────────────────────────────────────────────
   HTML attendu :
     <div class="stage-band">
       <h2 class="stage-band__title">
         À qualifier <span class="stage-band__count">(3)</span>
       </h2>
       <p class="stage-band__hint">en attente de qualification Go/No-go</p>
     </div>
     <table>...lignes du stade...</table>
   ───────────────────────────────────────────────────────────
   Variantes :
   - .stage-band (par défaut, vert SOMA)
   - .stage-band--muted   (stade vide ou clos, barre grise)
   ───────────────────────────────────────────────────────────
   Tokens : --soma-green, --soma-muted, --soma-text, --soma-text2,
            --soma-font-italic, --soma-font-body, --soma-text-2xl,
            --soma-text-md, --soma-weight-*, --soma-s-*
   ═══════════════════════════════════════════════════════════ */

.stage-band {
  display: flex;
  flex-direction: column;
  gap: var(--soma-s-2);
  margin: var(--soma-s-9) 0 var(--soma-s-5);
  padding-left: var(--soma-s-5);
  border-left: 4px solid var(--soma-green);
  line-height: 1;
}

.stage-band__title {
  margin: 0;
  color: var(--soma-text);
  font-family: var(--soma-font-italic);
  font-style: italic;
  font-weight: 500;
  font-size: var(--soma-text-2xl);
  letter-spacing: 0;
  line-height: 1.1;
}

.stage-band__count {
  margin-left: var(--soma-s-2);
  color: var(--soma-muted);
  font-family: var(--soma-font-body);
  font-style: normal;
  font-weight: var(--soma-weight-regular);
  font-variant-numeric: tabular-nums;
}

.stage-band__hint {
  margin: 0;
  color: var(--soma-muted);
  font-family: var(--soma-font-body);
  font-size: var(--soma-text-md);
  font-weight: var(--soma-weight-regular);
  line-height: 1.4;
}

/* ── Variante muted : stade vide ou clos ────────────────── */

.stage-band--muted {
  border-left-color: var(--soma-muted2);
}

.stage-band--muted .stage-band__title {
  color: var(--soma-muted);
}