/* Onglets — un élément actif parmi plusieurs ; `--segmented` pour un choix de vue.
   Référence : docs/design-system.md. */

.tabs {
  display: flex;
  gap: 0;

  /* La barre est un cadre blanc ; l'onglet actif y est teinté et porte un trait plein (#767). */
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-md);

  /* Neuf onglets font 821 px : ils ne rentreront jamais dans les 311 px d'un
     téléphone. Ils glissent, plutôt que de pousser toute la page de côté. */
  overflow-x: auto;
  scrollbar-width: thin;
}

.tabs__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-3);
  border: 0;
  border-bottom: 4px solid transparent;
  background: none;
  color: var(--color-text-secondary);
  font-family: inherit;
  font-size: var(--text-13);
  font-weight: var(--weight-medium);
  line-height: inherit; /* un bouton ne l'hérite pas : même hauteur qu'un lien */
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast),
    background-color var(--transition-fast);
}

.tabs__item:hover {
  color: var(--color-text);
  text-decoration: none;
}

/* un onglet-bouton inactif (une vue pas encore disponible) : même état que
   `.btn:disabled` */
.tabs__item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tabs__item:focus-visible {
  outline: 2px solid var(--color-primary-light);
  outline-offset: -2px;
}

.tabs__item--active,
.tabs__item--active:hover {
  color: var(--color-tint-text);
  background: var(--color-tint-bg);
  border-bottom-color: var(--color-primary);
}

/* --- Second niveau : sous-onglets d'un onglet, une simple ligne sous la rangée --- */
.tabs--sub {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--color-card-border);
  border-radius: 0;
}

.tabs--sub .tabs__item {
  padding: var(--space-2) var(--space-4);
  border-bottom-width: 2px;
}

/* --- La rangée passe à la ligne au lieu de glisser --- */
.tabs--wrap {
  flex-wrap: wrap;
  overflow-x: visible;
}

/* --- Contrôle segmenté : un cadre, des segments joints, l'actif plein --- */
.tabs--segmented {
  display: inline-flex;
}

.tabs--segmented .tabs__item {
  padding: var(--space-1-5) var(--space-3-5);
  border-bottom: 0;
  border-right: 1px solid var(--color-border);
  background: var(--color-surface);
}

.tabs--segmented .tabs__item:last-child {
  border-right: 0;
}

.tabs--segmented .tabs__item:hover {
  background: var(--color-bg-subtle);
}

.tabs--segmented .tabs__item--active,
.tabs--segmented .tabs__item--active:hover {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}