/* ============================================================
   cl-tabs.css — barre d'onglets d'un univers (cf. cl-tabs.js)
   Posée sous le titre du contenu principal, jamais dans la barre latérale :
   elle ne doit pas entrer en concurrence avec la barre mobile collante
   (`.clm-bar`, cl-mobile.css), qui reste la navigation de premier niveau
   sur téléphone.
   ============================================================ */

.cl-tabs {
  display: flex;
  align-items: center;
  gap: 0.3em;
  margin: 0.1em 0 0.8em;
  padding-bottom: 0.1em;
  /* Sur téléphone la barre défile plutôt que de se replier sur deux lignes :
     l'onglet actif reste à sa place d'un écran à l'autre. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cl-tabs::-webkit-scrollbar { display: none; }

.cl-tabs-universe {
  font-size: 0.82em;
  font-weight: 600;
  color: var(--fg-muted, #888);
  white-space: nowrap;
  margin-right: 0.5em;
  padding-right: 0.6em;
  border-right: 1px solid var(--border-soft, #e5e0d2);
}

.cl-tab {
  display: inline-flex;
  align-items: center;
  min-height: 40px;          /* cible tactile (règle cl-mobile) */
  padding: 0 0.9em;
  border-radius: 7px;
  font-size: 0.95em;
  color: var(--fg-soft, #555);
  text-decoration: none;
  white-space: nowrap;
}
.cl-tab:hover { background: var(--accent-soft, #f0ece0); color: var(--accent, #8a6a12); text-decoration: none; }
.cl-tab.active {
  background: var(--accent, #8a6a12);
  color: #fff;
  font-weight: 600;
  cursor: default;
}

@media (max-width: 768px) {
  .cl-tabs { margin: 0.1em -1em 0.7em; padding: 0 1em; }
  .cl-tabs-universe { display: none; }  /* l'univers est déjà dans le titre */
}