/* Correction de l'espacement dans le fil d'Ariane */
.breadcrumb {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.1);
    padding: 10px 20px;
    border-radius: 30px;
    margin: 0;
    align-items: center;
    gap: 20px !important; /* Augmentation de l'espacement entre les éléments */
}

.breadcrumb-item {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    position: relative;
    padding: 0 8px;
}

.breadcrumb-item + .breadcrumb-item {
    margin-left: 20px !important; /* Augmentation de la marge à gauche */
    position: relative;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.4);
    content: " / " !important; /* Ajout d'espaces autour du slash */
    width: auto;
    height: auto;
    display: inline-block;
    background-color: transparent; /* Suppression du fond */
    position: absolute;
    left: -18px !important; /* Ajustement de la position */
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    padding: 0;
    font-size: 16px;
}

/* Correction spécifique pour toutes les pages du site */
nav .breadcrumb-item span {
    margin: 0 5px !important;
    padding: 0 5px !important;
}

/* Assurer que ce CSS est appliqué partout */
.page-header .breadcrumb-item {
    margin-right: 10px !important;
}

/* Forcer le style inline pour être sûr qu'il s'applique */
.breadcrumb-item a, 
.breadcrumb-item.active {
    display: inline-block !important;
    margin: 0 5px !important;
}

/* Style pour la classe ajoutée par JavaScript */
.breadcrumb-item.has-separator::before {
    content: " / " !important;
    display: inline-block !important;
    margin: 0 10px !important;
    color: rgba(255, 255, 255, 0.7) !important;
}