/* ════════════════════════════════════════════════════════════════════════════
   fil-ariane.css — LE STYLE DU FIL D'ARIANE, POUR LES DEUX MONDES.

   Même organisation que menu-lateral.css : le balisage vit dans
   inclusions/fil_ariane.php, le style ici, et les deux mondes chargent l'un et
   l'autre — les pages du shell (shell_haut.php) et les pages héritées
   (entete.php). Un composant partagé ne peut pas avoir sa feuille dans shell.css,
   que les pages héritées ne chargent pas.

   ⚠ NE PAS RECOPIER CES RÈGLES DANS shell.css « pour aller plus vite » : elles
   divergeraient, et le fil changerait de forme selon la page.

   ── D'OÙ VIENT CE STYLE, ET OÙ IL EN EST ────────────────────────────────────
   a-propos-du-cours.php portait un SECOND fil, écrit à la main, en pastilles.
   Le 2026-08-04 on a retiré ce doublon — deux fils sur un même écran, c'est un
   de trop — et repris son habillage ici : pastilles bordées, pictogramme à
   l'orange de marque.
   Le 2026-08-05, les pastilles sont TOMBÉES, d'abord sur le cran courant puis
   sur tous. Ce qui subsiste de ce passage : les pictogrammes, les chevrons, et
   l'idée qu'un seul fil suffit. Le reste est redevenu du texte — voir plus bas
   pourquoi, et ce qui signale désormais qu'un cran est cliquable.

   ⚠ AUCUNE RÈGLE N'EST SCOPÉE À .cc. Le fil s'affiche à DEUX endroits selon la
     page : au haut du contenu (shell_haut.php) ou, quand la page le diffère,
     dans son .cc après le bandeau. Une règle « .cc .fil » ne l'aurait habillé
     qu'à moitié.
   ════════════════════════════════════════════════════════════════════════════ */

/* La marge du bas sépare le fil du contenu ; celle du haut le détache du
   bandeau, sous lequel il passe désormais (voir .content dans shell.css). */
.fil{margin:14px 0 20px}

/* ── L'ÉCART AUTOUR DU CHEVRON, ÉGAL DES DEUX CÔTÉS (2026-08-04) ─────────────
   ⚠ LE `gap` NE TOMBE QUE D'UN CÔTÉ, et c'est ce qui déséquilibrait le fil.
     Le chevron est un ::before porté par le <li> : il vit DANS le cran suivant.
     Le `column-gap` sépare donc deux <li>, c'est-à-dire la pastille précédente
     et le CHEVRON — jamais le chevron de sa propre pastille. Avec 14px de gap et
     4px de marge, on avait 18px à gauche du chevron et 4px à droite : le signe
     « > » paraissait collé au cran qu'il annonce.

   L'écart ne se règle donc PAS avec `gap`, mais avec la seule marge du chevron,
   qui s'applique symétriquement. `column-gap` passe à zéro ; `row-gap` reste,
   lui, pour les fils qui reviennent à la ligne — sans quoi deux rangées se
   toucheraient. */
.fil ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;
  column-gap:0;row-gap:8px;margin:0;padding:0;
  font-size:.86rem;line-height:1.4;color:var(--ink2)}
.fil li{display:inline-flex;align-items:center;color:var(--ink2);min-width:0}

/* Le chevron reste dessiné en CSS : décoratif, il ne doit pas être lu à voix
   haute — c'est pourquoi il n'est pas dans le balisage. Même trait que le
   « bi-chevron-right » qu'employait le fil de a-propos-du-cours.
   Sa marge EST l'écart : 7px de chaque côté, soit 14px entre deux pastilles. */
.fil li+li::before{content:"";flex:none;width:6px;height:6px;margin:0 7px;
  border-top:1.6px solid var(--ink3);border-right:1.6px solid var(--ink3);
  transform:rotate(45deg);opacity:.85}

/* ── PLUS AUCUNE PASTILLE (2026-08-05, demande du client) ────────────────────
   Le cran courant avait été libéré de sa pastille la veille ; les autres l'ont
   suivi. Le fil redevient ce qu'il est — un REPÈRE, pas une barre de boutons :
   une file de pastilles bordées se lisait comme une rangée d'actions, et pesait
   plus lourd à l'œil que le titre de la page qu'elle surmonte.

   ⚠ CE QUI SIGNALE ENCORE QU'ON PEUT CLIQUER. En retirant le cadre, on retire
     l'indice visuel du lien : il faut le rendre autrement, sinon le fil n'est
     plus qu'un texte. C'est le SOULIGNÉ AU SURVOL qui s'en charge, doublé du
     passage à la couleur du rôle. Un lien qui ne se distingue que par sa
     couleur n'est pas repérable par tout le monde ; le survol, lui, le dit à
     tous ceux qui peuvent le déclencher. */
.fil a{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:var(--ink2);
  padding:5px 2px;border-radius:6px;transition:.14s;text-decoration:none}
.fil a:hover,.fil a:focus-visible{color:var(--blue-7);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1.5px}
.fil a i{color:var(--stu-or-k,#b35c36)}

/* Une rubrique n'est pas une destination : même dépouillement et même graisse
   que les crans cliquables, mais sans survol — rien ne doit laisser croire
   qu'on peut cliquer dessus. */
.fil li:not([aria-current]) > span{display:inline-flex;align-items:center;gap:6px;
  font-weight:800;color:var(--ink2);padding:5px 2px}
.fil li:not([aria-current]) > span i{color:var(--stu-or-k,#b35c36)}

/* ── LE CRAN COURANT EST LE SEUL EN GRAISSE NORMALE (2026-08-05) ─────────────
   C'était l'inverse : lui seul était gras. Le client a demandé le contraire, et
   cela se tient — le CHEMIN est gras, la DESTINATION ne l'est pas ; l'œil suit
   la trace et s'arrête là où elle s'allège. Le cran courant garde en revanche
   l'encre pleine (--ink) quand les autres restent en --ink2 : c'est ce qui le
   désigne encore, puisqu'il n'a plus ni cadre ni graisse pour le faire. */
.fil li[aria-current] > span{display:inline-flex;align-items:center;gap:6px;font-weight:500;
  color:var(--ink);padding:5px 2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46ch}
.fil li[aria-current] > span i{color:var(--stu-or-k,#b35c36)}

@media(max-width:620px){
  /* Sur petit écran, seuls les deux derniers crans comptent : d'où l'on vient,
     et où l'on est. Le reste tiendrait sur trois lignes pour rien. */
  .fil li{display:none}
  .fil li:nth-last-child(-n+2){display:inline-flex}
  .fil li:nth-last-child(2)::before{display:none}
}
@media print{.fil{display:none}}