/* ==============================
   BREADCRUMB — PROPRE & ALIGNÉ
   ============================== */

.arsenal-breadcrumb {
  max-width: 1200px;           /* ajuste si ton site est plus large (ex: 1320px) */
  margin: 18px auto 18px;      /* centre + espace haut/bas */
  padding: 0 20px;             /* évite que ça colle à la fenêtre */
  font-size: 14px;
  line-height: 1.4;
}

.arsenal-breadcrumb .breadcrumb-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;                    /* espace entre les éléments */
}

.arsenal-breadcrumb a {
  color: #333;
  text-decoration: none;
}

.arsenal-breadcrumb a:hover {
  text-decoration: underline;
}

.arsenal-breadcrumb .sep {
  color: #999;
  padding: 0 6px;              /* espace autour du séparateur */
}

.arsenal-breadcrumb .current {
  font-weight: 800;
  color: #e1251b;
}
/* ==============================
   BREADCRUMB PRODUIT — ALIGNEMENT
   ============================== */

.arsenal-breadcrumb--product {
  margin: 18px 0 14px;     /* espace avant le titre */
}

/* On le laisse suivre la largeur du container parent.
   Pas de max-width arbitraire ici, car ton thème gère déjà la grille. */
.single-product .arsenal-breadcrumb--product .breadcrumb-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  position: relative;
}

/* Espacement clair entre les sections */
.single-product .arsenal-breadcrumb--product .sep {
  color: #999;
  padding: 0 6px;
}

.single-product .arsenal-breadcrumb--product a {
  color: #333;
  text-decoration: none;
}

.single-product .arsenal-breadcrumb--product a:hover {
  text-decoration: underline;
}

.single-product .arsenal-breadcrumb--product .current {
  font-weight: 800;
  color: #e1251b;
}
/* Pages produit: on suit EXACTEMENT le container du thème (pas de max-width centré) */
.single-product .arsenal-breadcrumb--product {
  max-width: none !important;
  margin: 18px 0 14px !important;
  padding: 0 !important;
}

/* La colonne qui contient le breadcrumb dans la grille */
.arsenal-breadcrumb-col {
  padding-left: 15px;
  padding-right: 15px;
}

/* Archive: laisser la grille gérer la largeur */
.arsenal-breadcrumb--archive {
  max-width: none !important;
  margin: 18px 0 18px !important;
  padding: 0 !important;
}
/* Actif (TOUS niveaux) : met en évidence l’item réellement sélectionné */
.filtre-produits li.is-active > a {
  color: #c40000 !important;
  font-weight: 700 !important;
}

.filtre-produits li.is-active {
  border-left: 4px solid #c40000;
  padding-left: 12px;
  background-color: #e4e4e4;
  border-radius: 6px;
}
/* ==============================
   Actif (tous niveaux du menu)
   ============================== */
.filtre-produits li.is-active {
  border-left: 4px solid #c40000;
  padding-left: 12px;
  background-color: #e4e4e4;
  border-radius: 6px;
}
.filtre-produits li.is-active > a {
  color: #c40000 !important;
  font-weight: 700 !important;
}

/* ==============================
   Breadcrumb archive aligné à la grille
   ============================== */
.arsenal-breadcrumb--archive {
  max-width: none !important;
  margin: 18px 0 18px !important;
  padding: 0 !important;
}
.arsenal-breadcrumb-col {
  padding-left: 15px;
  padding-right: 15px;
}
/* Actif: si le  n'est pas enfant direct */
.filtre-produits li.is-active a {
  color: #c40000 !important;
  font-weight: 700 !important;
}
/* ✅ Met en évidence L'ITEM ACTIF, peu importe le niveau (2 ou 3) */
.filtre-produits li.is-active {
  border-left: 4px solid #c40000 !important;
  background-color: #e4e4e4 !important;
}

/* ✅ Met en évidence LE LIEN du niveau actif */
.filtre-produits li.is-active > a,
.filtre-produits li.is-active a {
  color: #c40000 !important;
  font-weight: 700 !important;
}
/* ===== FIX NIVEAU 3 ACTIF ===== */

.archive-product .filtre-produits li.is-active > a,
.archive-product .filtre-produits li.is-active a {
  color: #c40000 !important;
  font-weight: 700 !important;
}

/* Fond gris pour niveau actif */
.archive-product .filtre-produits li.is-active {
  background-color: #e9e9e9 !important;
  border-left: 4px solid #c40000 !important;
}