/* ═══════════════════════════════════════════════════════════
   COMPONENT — tabs-pipeline
   Onglets de vue posés sous la barre commande de chaque page
   de module. Composant UNIQUE pour tous les modules :
   - Devis             → Brouillons / Envoyés / Clôturés / Tous
   - Commercial        → Pipeline / À faire / Relances
   - Demandes chiffrages → À qualifier / Go / No-go / Tous
   - Planning AO       → Tout / AO / RDV
   ───────────────────────────────────────────────────────────
   Règles non négociables :
   - Compteurs `(N)` TOUJOURS entre parenthèses, jamais en chip
   - Underline vert SOMA sous l'onglet actif (2 px)
   - Tabs inactifs : muted gris, hover → text
   - Pas d'espace vide à gauche : barre alignée bord gauche du contenu
   ───────────────────────────────────────────────────────────
   HTML attendu :
     <nav class="tabs-pipeline" role="tablist">
       <button class="tabs-pipeline__tab is-active" role="tab">
         Brouillons <span class="tabs-pipeline__count">(2)</span>
       </button>
       <button class="tabs-pipeline__tab" role="tab">
         Envoyés <span class="tabs-pipeline__count">(2)</span>
       </button>
       …
     </nav>
   ───────────────────────────────────────────────────────────
   Tokens : --soma-border, --soma-muted, --soma-text, --soma-green,
            --soma-green-soft, --soma-font-body, --soma-text-md,
            --soma-weight-*, --soma-s-*, --soma-dur-fast, --soma-ease-out
   ═══════════════════════════════════════════════════════════ */

.tabs-pipeline {
  display: flex;
  gap: 0;
  margin: var(--soma-s-9) 0 var(--soma-s-7);
  border-bottom: 1px solid var(--soma-border);
}

.tabs-pipeline__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--soma-s-3);
  padding: var(--soma-s-7) var(--soma-s-8);
  background: transparent;
  border: 0;
  color: var(--soma-muted);
  font-family: var(--soma-font-body);
  font-size: var(--soma-text-md);
  font-weight: var(--soma-weight-bold);
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--soma-dur-fast) var(--soma-ease-out);
}

.tabs-pipeline__tab:hover {
  color: var(--soma-text);
}

.tabs-pipeline__tab.is-active {
  color: var(--soma-text);
}

/* Underline vert sous l'onglet actif */
.tabs-pipeline__tab.is-active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: var(--soma-s-8);
  right: var(--soma-s-8);
  height: 2px;
  background: var(--soma-green);
  border-radius: 2px 2px 0 0;
}

.tabs-pipeline__tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--soma-green-soft);
  border-radius: var(--soma-r-sm);
}

/* Compteur entre parenthèses, muted par défaut, vert si actif */
.tabs-pipeline__count {
  color: var(--soma-muted);
  font-weight: var(--soma-weight-regular);
  font-variant-numeric: tabular-nums;
}

.tabs-pipeline__tab.is-active .tabs-pipeline__count {
  color: var(--soma-green);
  font-weight: var(--soma-weight-bold);
}

.tabs-pipeline__tab:hover .tabs-pipeline__count {
  color: var(--soma-text);
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 720px) {
  .tabs-pipeline {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* éviter wrapping qui casserait l'underline */
  }
  .tabs-pipeline__tab {
    padding: var(--soma-s-7) var(--soma-s-7);
  }
}