/* ═══════════════════════════════════════════════════════════════════════════
   SOMA — LES ONGLETS DE VUE ET LES CHIPS DE FILTRE, PARTAGÉS
   ───────────────────────────────────────────────────────────────────────────
   MISSION-HOMOGENEISATION-SIG, 24/08. Quatre écrans, QUATRE grammaires
   d'onglets pour le même geste (« montre-moi cette vue-là »), relevées au
   fichier près avant d'écrire une ligne :

     Devis         rail teinté vert, actif = pastille blanche + texte vert,
                   icône 15 px, compteur en chip           ← LA RÉFÉRENCE
     Bibliothèque  chips claires posées à plat, compteur en texte nu
     Clients       rail carte, actif = NOIR PLEIN + texte blanc
     Fournisseurs  aucun onglet

   Le noir plein de Clients n'existe NULLE PART ailleurs dans SOMA. Il s'en va.
   La mission tranche : « une seule grammaire, celle de Devis ».

   L'ICÔNE EST FACULTATIVE, et ce n'est pas une entorse. Devis a quatre icônes
   qui veulent dire quelque chose (brouillon, envoyé, clôturé, tout). La
   Bibliothèque a sept onglets — Titres, Articles, Sections, Paragraphes,
   Notes, Consommables, Documents — pour lesquels aucune icône n'existe. En
   inventer sept ferait exactement ce qu'on reproche au reste : décider tout
   seul et appeler ça une charte. Ce qui unifie, c'est le RAIL, la pastille
   active et le compteur ; l'icône est un plus quand elle a un sens.

   LES CHIPS suivent la Bibliothèque, seule à respecter la règle « actif = vert
   pâle » — Clients les faisait noires, Devis les faisait vert plein.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══ LES ONGLETS ══════════════════════════════════════════════════════════ */
.soma-onglets {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: rgba(26, 110, 60, .06);
  border: 0;
  border-radius: 100px;
  margin-bottom: 8px;
  /* Sept onglets ne tiennent pas toujours sur un écran serré : ils défilent
     dans leur rail au lieu de casser la ligne. */
  max-width: 100%;
  overflow-x: auto;
}

.soma-onglet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: transparent;
  border: none;
  border-radius: 100px;
  font-family: inherit;
  font-size: 14px;          /* on ne réduit jamais les textes */
  font-weight: 600;
  color: var(--text2);
  cursor: pointer;
  transition: all .18s ease;
  letter-spacing: -.1px;
  line-height: 1;
  white-space: nowrap;
}
.soma-onglet:hover { color: var(--text); background: transparent; }

/* L'ACTIF EST UNE PASTILLE CLAIRE, jamais un aplat noir. Le noir plein dit
   « ceci est sélectionné » avec la force d'une alerte — or changer d'onglet
   n'est pas un événement, c'est un regard qui se déplace. */
.soma-onglet.is-active {
  background: var(--card);
  color: var(--green);
  box-shadow: 0 1px 3px rgba(13, 27, 15, .08);
}

.soma-onglet__ico { width: 15px; height: 15px; flex-shrink: 0; opacity: .7; transition: opacity .15s; }
.soma-onglet.is-active .soma-onglet__ico { opacity: 1; }

/* Le compteur : une chip, centrée, qui encaisse 4 chiffres sans casser */
.soma-onglet__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 0 7px;
  height: 19px;
  line-height: 1;
  background: rgba(13, 27, 15, .07);
  color: var(--text2);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  white-space: nowrap;
}
.soma-onglet.is-active .soma-onglet__count {
  background: var(--green-light, rgba(237, 250, 243, .85));
  color: var(--green);
}

/* ══ LES CHIPS DE FILTRE ══════════════════════════════════════════════════ */
.soma-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 14px;
}
/* Le libellé qui introduit une rangée de chips (« DOMAINE : ») */
.soma-chips__label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 4px;
}

.soma-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--text2);
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}
.soma-chip:hover { border-color: var(--green-border, rgba(47, 191, 122, .38)); color: var(--text); }

/* ACTIF = VERT PÂLE. Jamais noir plein (c'était Clients), jamais vert plein
   (c'était Devis) : un filtre actif est un état calme, pas une alarme. */
.soma-chip.is-active {
  background: var(--green-soft);
  border-color: var(--green-border);
  color: var(--green-dark);
}

.soma-chip__count { font-size: 11px; font-weight: 700; opacity: .7; }
.soma-chip.is-active .soma-chip__count { opacity: .85; }

/* Ce qui n'est PAS cliquable ne prend pas la forme d'une chip. Clients
   affichait « Tri · Intelligent » dans une pilule noire identique à ses
   filtres actifs — un CONSTAT déguisé en bouton, que le gardien de
   l'expérience vécue compte comme un bouton mort. */
.soma-mention {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
.soma-mention b { color: var(--text2); font-weight: 900; }