/* ============================================================
   FIL D'ARIANE — composant global
   Rempli via le bloc breadcrumb de base.html.
   Markup attendu (la <nav> porte aussi .container pour l'alignement) :
     <nav class="scrib-breadcrumb container" aria-label="Fil d'Ariane">
       <a href="…">Accueil</a>
       <span class="breadcrumb-sep" aria-hidden="true">›</span>
       <a href="…">Section</a>
       <span class="breadcrumb-sep" aria-hidden="true">›</span>
       <span class="breadcrumb-current" aria-current="page">Page courante</span>
     </nav>
   NB : classe préfixée pour éviter toute collision avec .breadcrumb de Bootstrap.
   ============================================================ */

.breadcrumb-bar {
  border-bottom: 1px solid var(--border);
  background: var(--surface-warm, var(--surface));
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Conteneur vide (page sans fil d'Ariane) → on n'affiche rien */
.breadcrumb-bar:empty {
  display: none;
}

.scrib-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--text-muted);
}

.scrib-breadcrumb a {
  color: var(--accent);
  text-decoration: none;
  border-radius: 4px;
  transition: color 0.15s ease;
}

.scrib-breadcrumb a:hover,
.scrib-breadcrumb a:focus-visible {
  color: var(--accent-hover);
  text-decoration: underline;
}

.scrib-breadcrumb .breadcrumb-sep {
  color: var(--border-strong);
  user-select: none;
}

.scrib-breadcrumb .breadcrumb-current {
  color: var(--text);
  font-weight: 500;
}

/* Icône de tête (emoji) légèrement détachée du libellé */
.scrib-breadcrumb .breadcrumb-ico {
  margin-right: 2px;
}

/* ── Mobile : barre défilable horizontalement, pas de retour à la ligne ── */
@media (max-width: 991.98px) {
  .scrib-breadcrumb {
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .scrib-breadcrumb::-webkit-scrollbar { display: none; }
  .scrib-breadcrumb > * { flex: 0 0 auto; }
}

[data-theme="dark"] .breadcrumb-bar {
  background: var(--surface);
}