.breadcrumb {
    font-size: 16px;
    color: #333;
    margin: 20px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-left: 0;
    overflow-x: auto; /* Permet de défiler horizontalement si nécessaire */
    white-space: nowrap; /* Empêche les éléments de se casser sur une nouvelle ligne */
}

.breadcrumb a {
    color: #d63384;
    text-decoration: none;
    font-weight: 500;
}

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

.breadcrumb-separator {
    color: #ccc;
    font-size: 16px;
}

.breadcrumb-current {
    color: #333;
    font-weight: 400;
}

/* Pour les écrans très petits (432px x 874px) */
@media (max-width: 432px) {
    .breadcrumb {
        font-size: 12px; /* Réduire encore la taille de la police sur cet écran */
    }

    .breadcrumb a {
        font-weight: 400; /* Réduire le poids de la police pour les petites résolutions */
    }

    .breadcrumb-separator {
        font-size: 12px; /* Réduire la taille du séparateur pour mieux s'adapter */
    }
}

/* Pour les écrans de petite taille (mobile) */
@media (max-width: 767px) {
    .breadcrumb {
        font-size: 14px; /* Réduire légèrement la taille de la police sur mobile */
    }

    .breadcrumb a {
        font-weight: 400; /* Réduire le poids de la police pour les mobiles */
    }

    .breadcrumb-separator {
        font-size: 14px; /* Réduire la taille du séparateur sur mobile */
    }
}

/* Pour les écrans moyens (tablettes) */
@media (min-width: 768px) and (max-width: 1024px) {
    .breadcrumb {
        font-size: 15px; /* Ajuster légèrement la taille de la police */
    }
}

/* Pour les grands écrans (desktops) */
@media (min-width: 1025px) {
    .breadcrumb {
        font-size: 16px; /* Taille de police par défaut pour les grands écrans */
    }
}