/* ==========================================================================
   WS BANNIERE - LE FIL D'ARIANE

   Bloc partage, destine a toutes les bannieres. Il n'habille que lui-meme et
   ne suppose l'existence d'aucune d'entre elles : ses variables sont posees
   sur l'enveloppe du widget et descendent par heritage.

   DEUX FORMES POUR UN SEUL BLOC
   Saisi ici, on maitrise le balisage : une `<ol>` dont chaque `<li>` porte son
   separateur en `::after`. Repris du site, le balisage appartient a
   l'extension qui le produit : on ne le decoupe pas, on l'habille par
   l'exterieur. D'ou les deux jeux de regles, et le `:where()` qui evite de
   faire monter la specificite en visant des balises qu'on ne controle pas.

   CHAQUE VALEUR PORTE SON REPLI. Un `var()` sans valeur de secours rend la
   declaration invalide, pas seulement vide : le fil perdrait sa taille et ses
   ecarts d'un coup.
   ========================================================================== */

.wsbn-fil{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--wsbn-fil-gap, 8px);
  margin:0 0 var(--wsbn-fil-bas, 26px);
  padding:0;
  list-style:none;
  font-size:var(--wsbn-fil-size, 13px);
  font-weight:600;
  line-height:1.4;
}

.wsbn-fil li{
  display:flex;
  align-items:center;
  gap:var(--wsbn-fil-gap, 8px);
  min-width:0;
}

/* LE SEPARATEUR EST DECORATIF, DONC IL EST EN CSS.
   Ecrit dans le texte, il serait lu a voix haute entre chaque niveau. */
.wsbn-fil li::after{
  content:var(--wsbn-fil-sep, "\203A");
  color:var(--wsbn-fil-sep-color, rgba(255,255,255,.45));
  font-weight:400;
}
.wsbn-fil li:last-child::after{
  content:none;
}

.wsbn-fil a{
  color:var(--wsbn-fil-lien, rgba(255,255,255,.72));
  text-decoration:none;
  transition:color .18s ease;
}
/* `a.` devant la classe : sans ca, une classe de composant simple perd contre
   le reset `a{color:inherit}` que posent beaucoup de themes. */
.wsbn-fil a:hover,
.wsbn-fil a:focus-visible{
  color:var(--wsbn-fil-lien-h, #FFFFFF);
}

.wsbn-fil__actuel{
  color:var(--wsbn-fil-actuel, #FFFFFF);
}

/* --------------------------------------------------------------------------
   LE FIL REPRIS DU SITE

   Rank Math, Yoast et Breadcrumb NavXT produisent chacun leur balisage, et
   aucun ne se ressemble : l'un enveloppe dans `<nav>`, l'autre dans `<p>`,
   le troisieme ajoute ses propres separateurs en texte. On ne cherche donc
   pas a le normaliser, on l'habille : la taille, les couleurs et l'espace
   sous le bloc suffisent a le faire entrer dans la banniere.

   `:where()` garde la specificite a zero sur les balises visees : une regle
   du theme qui voudrait reprendre la main y arrive encore.
   -------------------------------------------------------------------------- */
.wsbn-fil--site{
  margin:0 0 var(--wsbn-fil-bas, 26px);
  font-size:var(--wsbn-fil-size, 13px);
  font-weight:600;
  line-height:1.4;
  color:var(--wsbn-fil-actuel, #FFFFFF);
}
.wsbn-fil--site :where(p, nav, ol, ul){
  margin:0;
  padding:0;
  list-style:none;
  display:inline;
}
.wsbn-fil--site :where(a){
  color:var(--wsbn-fil-lien, rgba(255,255,255,.72));
  text-decoration:none;
}
.wsbn-fil--site :where(a):hover{
  color:var(--wsbn-fil-lien-h, #FFFFFF);
}
/* Le separateur de ces extensions est du TEXTE : on ne peut que le colorer,
   pas le remplacer. `.separator` est le nom qu'emploient Rank Math et
   Breadcrumb NavXT ; Yoast n'en pose pas de classe, le sien restera de la
   couleur du bloc. */
.wsbn-fil--site :where(.separator, .breadcrumb-separator){
  color:var(--wsbn-fil-sep-color, rgba(255,255,255,.45));
  font-weight:400;
}