/* ==========================================================================
   03 - Fil d'Ariane
   Lot 3. C'est la demande numéro un du client : « une fois qu'on est dans
   jeunesse, on n'a pas le retour arrière ».
   Le fil ne défile jamais horizontalement, il passe à la ligne.
   ========================================================================== */

.lm-breadcrumb {
  max-width: var(--lm-container);
  margin: 1.25rem auto .25rem;
  padding-inline: 1rem;
  font-size: .75rem;
  line-height: 1.5;
  color: var(--lm-muted);
}

/* EN LIGNE, PAS EN FLEX, depuis le 24/09/2026 (« essayer de mettre sur la
   même ligne »). En flex, chaque niveau était un bloc : un titre d'article
   trop long pour finir la ligne descendait EN ENTIER à la suivante, avec son
   chevron isolé au milieu de la marge gauche. En texte courant, le titre
   enchaîne derrière « Actualités › » et passe à la ligne comme une phrase.

   Le PHP n'écrit aucune espace entre les <li> : c'est le chevron qui porte
   les coupures possibles. Espace insécable avant (« Actualités › » reste
   groupé, une ligne ne commence jamais par un chevron), espace ordinaire
   après (la ligne peut se couper juste derrière). Sans elle, un fil profond
   sur mobile ne formerait qu'un seul bloc insécable et déborderait. */
.lm-breadcrumb ol {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lm-breadcrumb li {
  display: inline;
  margin: 0;
}

/* Les rubriques ne se coupent pas en leur milieu : seul le titre final, en
   texte, passe à la ligne. */
.lm-breadcrumb a {
  white-space: nowrap;
}

/* Chevron de séparation, repris de la maquette (ChevronRight). */
.lm-breadcrumb li + li::before {
  content: "\00a0› ";
  color: var(--lm-border);
  font-size: 1.1em;
  white-space: pre-wrap;
}

.lm-breadcrumb a {
  color: inherit;
  text-decoration: none;
  border-bottom: var(--lm-rule) solid transparent;
  transition: color .2s ease;
}

.lm-breadcrumb a:hover,
.lm-breadcrumb a:focus-visible {
  color: var(--lm-primary);
  border-bottom-color: currentColor;
}

.lm-breadcrumb [aria-current="page"] {
  color: var(--lm-foreground);
  font-weight: 500;
}

@media (max-width: 767px) {
  .lm-breadcrumb {
    font-size: .6875rem;
    margin-top: .75rem;
  }
}