/* =============================================================
   Socle · Fil d'Ariane (.sc-breadcrumb)
   Anatomie : <nav> > __list (<ol>) > __item (<li>) > __link ou
   __current. Les maillons sont des .sc-link--subtle : aucun style
   de lien n'est redéfini ici.
   Variante : --slash. Le maillon courant porte aria-current="page"
   et n'est pas un lien.
   ============================================================= */

.sc-breadcrumb {
  /* Tokens de composant : la variante ne fait que réassigner ceci. */
  --_crumb-gap: var(--gap-xs);
  --_crumb-text: var(--color-text-secondary);
  --_crumb-current-text: var(--color-text);
  --_crumb-separator: var(--color-text-muted);
  /* Structurel : le chevron est une boîte à deux côtés tracés,
     tournée d'un quart de tour. */
  --_crumb-separator-width: var(--space-6);
  --_crumb-separator-height: var(--space-6);
  --_crumb-separator-border-block: var(--border-hairline);
  --_crumb-separator-border-inline: var(--border-hairline);
  --_crumb-separator-rotate: 45deg;

  color: var(--_crumb-text);
  font-size: var(--text-body-s-size);
  line-height: var(--leading-snug);
}

/* La liste replie ses maillons plutôt que de pousser la page. */
.sc-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--_crumb-gap);
  row-gap: var(--gap-2xs);
  padding: 0;
  list-style: none;
}

.sc-breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--_crumb-gap);
  /* Autorise le maillon courant à se tronquer plutôt qu'à déborder. */
  min-width: 0;
}

/* ---- Séparateur ----
   Pseudo-élément vide, donc muet, là où un caractère écrit dans le
   HTML serait lu à chaque niveau. Côtés logiques : en RTL le
   chevron se retourne seul. */

.sc-breadcrumb__item + .sc-breadcrumb__item::before {
  content: "";
  flex: none;
  width: var(--_crumb-separator-width);
  height: var(--_crumb-separator-height);
  border-block-start: var(--_crumb-separator-border-block) solid var(--_crumb-separator);
  border-inline-end: var(--_crumb-separator-border-inline) solid var(--_crumb-separator);
  transform: rotate(var(--_crumb-separator-rotate));
}

/* ---- Maillons ----
   Couleur, survol, focus et désactivation appartiennent à
   .sc-link, qui les double déjà pour la doc. */

.sc-breadcrumb__link {
  min-width: 0;
  /* Un libellé reste d'un seul tenant : le fil se replie entre
     deux maillons, jamais au milieu d'un nom de page. */
  white-space: nowrap;
}

/* Dernier maillon : ni lien ni bouton, donc aucun état. La couleur
   pleine et la graisse suffisent à le distinguer. */
.sc-breadcrumb__current {
  min-width: 0;
  color: var(--_crumb-current-text);
  font-weight: var(--text-label-weight);
  /* Débordement : le titre de la page courante, souvent le plus
     long, se tronque au lieu de pousser le fil hors du cadre. */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---- Variante barre oblique ----
   Même boîte, un seul côté tracé, inclinaison plus douce. */

.sc-breadcrumb--slash {
  --_crumb-separator-width: 0;
  --_crumb-separator-height: var(--space-12);
  --_crumb-separator-border-block: 0;
  --_crumb-separator-rotate: 20deg;
}