/*
 * Fil d'Ariane (RGAA 12.1) — utilisé sur les fiches fromage, le blog, le
 * jeu concours... la couleur d'encre varie selon le fond (--breadcrumb-ink).
 */

.breadcrumb {
    margin: 0 0 26px;
}

/* Quand le fil d'Ariane est seul dans un .wrap posé directement dans une
   section flex en colonne (les héros jeu/fromage/blog-article), les marges
   gauche/droite "auto" de .wrap désactivent l'étirement (align-items) et
   centrent la boîte sur sa propre largeur de contenu au lieu de l'étirer —
   comportement standard des marges auto sur l'axe transversal d'un
   flex-item. Un .wrap qui ne contient QUE le fil d'Ariane se retrouvait
   donc centré sur la page entière plutôt qu'aligné à gauche comme le reste
   du contenu. width:100% redonne une taille explicite (plus "auto") à ce
   .wrap : il remplit la largeur disponible aux petits/moyens écrans, et les
   marges auto reprennent leur rôle normal de centrage de la boîte de
   1600px sur les très grands écrans. */
.wrap:has(> .breadcrumb) {
    width: 100%;
}

.breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--breadcrumb-ink, var(--mr-brun));
}

.breadcrumb li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.breadcrumb__sep {
    opacity: 0.6;
}

.breadcrumb a {
    color: inherit;
    text-decoration: underline;
}

.breadcrumb [aria-current='page'] {
    font-weight: 900;
}