/* --- Structure globale --- */
.touline-pagination-picto {
  position: relative;
  width: 100%;
}

/* La ligne grise qui traverse (visible uniquement sur desktop pour ne pas casser le mobile) */
.touline-pagination-picto__line {
  position: absolute;
  bottom: 12px; /* Ajuster pour aligner avec le bas des textes */
  left: 10%;
  right: 10%;
  height: 2px;
  background-color: #e9ecef;
  z-index: 0;
}

/* --- Le Bouton (Item) --- */
.touline-pagination-picto__btn {
  cursor: pointer;
  color: #adb5bd; /* Gris par défaut */
  transition: all 0.3s ease;
  opacity: 0.8;
}

.touline-pagination-picto__btn:hover {
  opacity: 1;
  color: #6c757d;
}

/* --- État ACTIF --- */
.touline-pagination-picto__btn.active {
  color: #0dcaf0; /* Bleu Cyan (ajuste avec ta couleur Hex exacte) */
  opacity: 1;
}

/* --- Gestion des Icônes (Images) --- */
.touline-pagination-picto__icon img {
  transition: all 0.3s ease;
  /* Astuce : rend l'image grise et un peu transparente par défaut */
  filter: grayscale(100%) opacity(0.6);
}

.touline-pagination-picto__btn:hover .touline-pagination-picto__icon img {
  filter: grayscale(50%) opacity(0.8);
}

.touline-pagination-picto__btn.active .touline-pagination-picto__icon img {
  /* On remet l'image normale et on la fait "sauter" un peu */
  filter: none; 
  opacity: 1;
  transform: translateY(-5px);
}

/* --- Indicateur (Barre bleue sous le texte) --- */
.touline-pagination-picto__indicator {
  width: 0; /* Invisible par défaut */
  height: 4px;
  background-color: #0dcaf0; /* Même bleu que le texte */
  border-radius: 2px;
  transition: width 0.3s ease;
  margin: 0 auto; /* Centré */
}

/* Quand actif, la barre grandit */
.touline-pagination-picto__btn.active .touline-pagination-picto__indicator {
  width: 100%;
  min-width: 40px;
}

/* --- Responsive mobile --- */
@media (max-width: 767.98px) {
  .touline-pagination-picto__icon img {
    width: 30px;
    height: 30px;
  }
  .touline-pagination-picto__label {
    font-size: 0.7rem;
  }
}