/*
 * Breadcrumb — rendu par le helper `breadcrumb(...)`
 *   <nav class="breadcrumb"><ol class="breadcrumb-list">
 *     <li class="breadcrumb-item"><a class="breadcrumb-link">…</a></li>
 *     <li class="breadcrumb-separator">/</li>
 *     <li class="breadcrumb-item"><span class="breadcrumb-page">…</span></li>
 *   </ol></nav>
 *   modifier : breadcrumb-inverse (sur fond sombre)
 */

.breadcrumb {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent-text);
}
.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.breadcrumb-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 0.5px solid currentColor;
  transition: color var(--transition-base);
}
.breadcrumb-link:hover { color: var(--color-primary-dark); }
.breadcrumb-separator { color: var(--color-on-surface-muted); }
.breadcrumb-page { color: var(--color-on-surface-muted); }

.breadcrumb-inverse { color: rgba(255, 255, 255, 0.55); }
.breadcrumb-inverse .breadcrumb-link:hover { color: rgba(255, 255, 255, 0.9); }
.breadcrumb-inverse .breadcrumb-separator { color: rgba(255, 255, 255, 0.35); }
.breadcrumb-inverse .breadcrumb-page { color: rgba(255, 255, 255, 0.85); }