/* =============================================================================
 * SERIGRAPHIE-BOUTIQUE — Breadcrumbs v0.2.0
 * =============================================================================
 * Dépendance : tokens.css
 *
 * Usage : navigation hiérarchique sur PLP + PDP + pages éditoriales.
 * Crucial pour SEO (structured data BreadcrumbList) et UX (retour en arrière).
 *
 * Template HTML :
 * <nav class="sb-breadcrumbs" aria-label="Fil d'Ariane">
 *   <ol class="sb-breadcrumbs__list">
 *     <li><a href="/">Accueil</a></li>
 *     <li><a href="/serigraphie/">Sérigraphie</a></li>
 *     <li aria-current="page">Encres plastisol</li>
 *   </ol>
 * </nav>
 *
 * À associer avec JSON-LD BreadcrumbList pour rich snippets Google.
 * ============================================================================= */

.sb-breadcrumbs {
  font-family: var(--sb-font-sans);
  font-size: var(--sb-fs-xs);
  color: var(--sb-text-secondary);
  line-height: var(--sb-lh-normal);
}

.sb-breadcrumbs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sb-sp-2);
}

.sb-breadcrumbs__list li {
  display: flex;
  align-items: center;
  gap: var(--sb-sp-2);
}

/* Séparateur "/" entre items — ajouté en ::before sauf sur le premier */
.sb-breadcrumbs__list li + li::before {
  content: "/";
  color: var(--sb-color-cendre);
  font-weight: var(--sb-fw-regular);
  user-select: none;
  margin-right: var(--sb-sp-1);
}

.sb-breadcrumbs__list a {
  color: var(--sb-text-secondary);
  text-decoration: none;
  transition: color var(--sb-duration-fast) var(--sb-ease-out);
}

.sb-breadcrumbs__list a:hover {
  color: var(--sb-color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sb-breadcrumbs__list a:focus-visible {
  outline: none;
  box-shadow: var(--sb-shadow-focus);
  border-radius: var(--sb-radius-sm);
}

/* Page courante (non-cliquable) */
.sb-breadcrumbs__list li[aria-current="page"] {
  color: var(--sb-text-primary);
  font-weight: var(--sb-fw-medium);
}

/* ---------------------------------------------------------------------------
 * Variante INVERTED — sur fond sombre (hero Sérigraphie p.ex)
 * ------------------------------------------------------------------------- */
.sb-breadcrumbs--inverted {
  color: rgba(250, 250, 247, 0.7);
}

.sb-breadcrumbs--inverted .sb-breadcrumbs__list a {
  color: rgba(250, 250, 247, 0.7);
}

.sb-breadcrumbs--inverted .sb-breadcrumbs__list a:hover {
  color: var(--sb-color-accent);
}

.sb-breadcrumbs--inverted .sb-breadcrumbs__list li + li::before {
  color: rgba(250, 250, 247, 0.3);
}

.sb-breadcrumbs--inverted .sb-breadcrumbs__list li[aria-current="page"] {
  color: var(--sb-color-paper);
}

/* ---------------------------------------------------------------------------
 * Responsive — truncate sur mobile avec scroll horizontal
 * ------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .sb-breadcrumbs__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--sb-sp-1);
  }

  .sb-breadcrumbs__list::-webkit-scrollbar {
    display: none;
  }

  .sb-breadcrumbs__list li {
    white-space: nowrap;
    flex-shrink: 0;
  }
}