/**
 * Fil d'Ariane — CDOS 30
 *
 * Mesures de la maquette, confirmées sur la production :
 *
 *   corps ............ Barlow 16 px, interligne 1,3, capitales
 *   graisse .......... 400 pour les niveaux supérieurs, 700 pour la page
 *   couleur .......... celle de la rubrique de la page visée
 *   puce ............. un rond de 6 px, 6 px avant l'intitulé
 *   réserve haute .... 20 px
 *   filet ............ 1 px, 10 px sous le fil
 *
 * La puce était un pictogramme FontAwesome dans la production — un SVG
 * et une requête pour dessiner un rond. Elle est ici tracée en CSS, et
 * prend « currentcolor » : elle suit donc toujours la couleur de son
 * maillon, ce que la production ne faisait pas tout à fait (ses ronds
 * étaient réglés à la main, et le premier était resté noir sur un
 * intitulé marine).
 */

/*
 * Le filet prend le gris de filet du thème, #dee1e3, et non le #dadada
 * relevé sur la production : quatre points d'écart, invisibles, pour un
 * gris de moins à tenir. Le jour où la nuance compte, c'est le token
 * qu'il faut changer, et tous les filets suivront.
 */
.fil-ariane {
  padding-block: 20px 10px;
  border-bottom: 1px solid var(--couleur-filet);
}

.fil-ariane__liste {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;

  /* 6 px entre deux maillons, rien de plus entre les lignes : en pile,
     l'interligne suffit à les séparer. */
  gap: 0 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fil-ariane__item {
  color: var(--couleur-rubrique-texte);
  font-family: var(--police-texte);
  font-size: 1rem;
  font-weight: var(--graisse-normale);
  line-height: 1.3;
  text-transform: uppercase;
}

/*
 * La puce est posée dans le flux du texte plutôt qu'en bord de boîte :
 * alignée sur le milieu de la ligne, elle reste à sa place quand un
 * intitulé long passe à la ligne. C'est la leçon de la pastille du menu.
 */
.fil-ariane__item::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: var(--rayon-rond);
  background-color: currentcolor;
  vertical-align: middle;
}

.fil-ariane__item--courant { font-weight: var(--graisse-forte); }

.fil-ariane a {
  color: inherit;
  text-decoration: none;
}

.fil-ariane a:hover,
.fil-ariane a:focus-visible { text-decoration: underline; }

/* ---------------------------------------------------------------
 * À 992 px et en dessous — un niveau par ligne
 * --------------------------------------------------------------- */

@media (max-width: 992px) {

  .fil-ariane__liste {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--e-3xs);
  }
}