/* ======================================================
   Iliade Digital — Fil d’Ariane (ultra discret + scroll)
   Fichier : assets/css/fil-ariane.css
   Dépend : variables.css + styles.css
   Scope  : .il-bc
   ====================================================== */

.il-bc{
  position: relative;
  background: transparent;
  border-bottom: 1px solid var(--line);
}

/* zone fine */
.il-bc .il-container{
  padding-block: 8px;
}

/* Scroll horizontal si trop long */
.il-bc__list{
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  align-items: center;
  gap: 8px;

  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: none; /* Firefox */
}
.il-bc__list::-webkit-scrollbar{ display: none; }

/* pas de puces */
.il-bc__list > li{
  list-style: none;
  margin: 0;
  padding: 0;
}

/* léger fade aux bords pour suggérer le scroll */
.il-bc::before,
.il-bc::after{
  content:"";
  position:absolute;
  top: 0;
  bottom: 0;
  width: 22px;
  pointer-events:none;
  opacity: .9;
}
.il-bc::before{
  left: 0;
  background: linear-gradient(90deg, var(--bg), rgba(255,255,255,0));
}
.il-bc::after{
  right: 0;
  background: linear-gradient(270deg, var(--bg), rgba(255,255,255,0));
}

/* items */
.il-bc__item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

/* séparateur très discret */
.il-bc__item:not(:last-child)::after{
  content: "›";
  color: rgba(16,19,35,.28);
  font-weight: 900;
  line-height: 1;
}

/* texte discret (pas de pills) */
.il-bc__link,
.il-bc__current{
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  white-space: nowrap;

  font-size: 13px;
  font-weight: 800;
  font-family: var(--font-head);
  letter-spacing: -0.01em;
}

.il-bc__link{
  color: rgba(16,19,35,.62);
  padding: 2px 0;
  border-radius: 10px;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
/* Hover sans mouvement (zéro layout shift) */
.il-bc__link{
  padding: 2px 6px;              /* padding constant */
  border-radius: 10px;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

@media (hover:hover){
  .il-bc__link:hover{
    color: rgba(16,19,35,.86);
    background: rgba(23,160,81,.06);
  }
}


.il-bc__current{
  color: rgba(16,19,35,.86);
}

/* Mobile : encore plus fin */
@media (max-width: 680px){
  .il-bc .il-container{ padding-block: 7px; }
  .il-bc__link, .il-bc__current{ font-size: 12.5px; }
  .il-bc::before, .il-bc::after{ width: 18px; }
}
/* Hover sans mouvement (zéro layout shift) */
.il-bc__link{
  padding: 2px 6px;              /* padding constant */
  border-radius: 10px;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

@media (hover:hover){
  .il-bc__link:hover{
    color: rgba(16,19,35,.86);
    background: rgba(23,160,81,.06);
  }
}