/**
 * Barre d'ancres collante d'une fiche circuit.
 *
 * Elle se cale sous la barre d'administration quand il y en a une : Drupal
 * publie ce décalage, que le thème relaie en --tc-chrome-offset.
 */

.tc-trip-anchors {
  position: sticky;
  top: var(--tc-chrome-offset, 0px);
  z-index: 30;
  margin-top: 22px;
  border-block: 1px solid var(--tc-border);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
}

.tc-trip-anchors__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  max-width: var(--tc-max-width);
  margin-inline: auto;
  padding-inline: var(--tc-gutter);
}

.tc-trip-anchors__list {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.tc-trip-anchors__list::-webkit-scrollbar {
  display: none;
}

.tc-trip-anchors__link {
  display: inline-block;
  padding: 20px 14px 17px;
  border-bottom: 3px solid transparent;
  font-size: var(--tc-fs-sm);
  font-weight: 600;
  color: var(--tc-ink-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: color 160ms ease, border-color 160ms ease;
}

.tc-trip a.tc-trip-anchors__link {
  color: var(--tc-ink-soft);
}

.tc-trip a.tc-trip-anchors__link:hover {
  color: var(--tc-ink);
}

.tc-trip a.tc-trip-anchors__link.is-active {
  border-bottom-color: var(--tc-action);
  color: var(--tc-accent);
}

.tc-trip-anchors__link:focus-visible {
  outline-offset: -3px;
}

@media (max-width: 700px) {
  .tc-trip-anchors {
    margin-top: 16px;
  }

  /* Centrée, la liste trop large se rognerait au début : on la cale à gauche
     et elle défile. */
  .tc-trip-anchors__inner {
    justify-content: flex-start;
  }

  .tc-trip-anchors__link {
    padding: 16px 10px 14px;
    font-size: 13.5px;
  }
}