/*
 * Signets de navigation (§2.4, §8).
 * Fond --color-bg-surface. Active = border-bottom 2px amber. Passees = muted.
 * Preparees (MJ) = amber italic. Espacement aere.
 */
.bookmarks {
  display: flex;
  align-items: stretch;
  gap: var(--space-5);
  height: 100%;
  overflow-x: auto;
}

.bookmarks__crumb {
  display: flex;
  align-items: center;
  color: var(--color-ink-secondary);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
}

.bookmarks__sep {
  color: var(--color-ink-muted);
  align-self: center;
}

.bookmark {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 var(--space-1);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-ink-muted);
  font-family: var(--font-body);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  transition: var(--transition-fast);
}

/* Scene active */
.bookmark--active {
  color: var(--color-ink-primary);
  border-bottom-color: var(--color-amber);
}

/* Scenes passees (lecture seule) */
.bookmark--past {
  color: var(--color-ink-muted);
}

/* Scenes preparees (MJ uniquement) */
.bookmark--prepared {
  color: var(--color-amber);
  font-style: italic;
}

.bookmark:hover {
  opacity: 0.85;
}