/* Fil d'Ariane — partagé par toutes les pages
   Markup attendu :
   <nav class="breadcrumb" aria-label="Fil d'Ariane">
     <a href="/">L'Atelier CBD</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">Page courante</span>
   </nav>
*/

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 30px 0;
  font-size: 0.875rem;
  color: var(--orange);
}

/* Tous les breadcrumbs démarrent à 100px du bord du conteneur 1280px.
   Pour la page article, voir blog-article.css (le breadcrumb y est imbriqué
   dans .article-container qui a déjà 60px de padding, on y ajoute donc 40px
   pour atteindre les mêmes 100px). */
.container > .breadcrumb {
  padding-inline: 100px;
}

.breadcrumb a {
  color: var(--orange);
  font-style: italic;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.breadcrumb a:hover {
  opacity: 0.75;
  text-decoration: underline;
}

.breadcrumb-sep {
  color: var(--orange);
  opacity: 0.6;
  user-select: none;
}

.breadcrumb-current {
  color: var(--orange);
  font-weight: 700;
}

@media (max-width: 480px) {
  .breadcrumb {
    padding: 16px 0;
    font-size: 0.75rem;
  }
}