/*
 * Directory Pro — Breadcrumbs (Fil d'Ariane)
 * File: public/css/dp-breadcrumbs.css
 * Requires: dp-front.css (CSS variables)
 */

/* ════════════════════════════════════════════
   BREADCRUMBS
   ════════════════════════════════════════════ */

.dp-breadcrumbs {
    font-family: var(--dp-font);
    font-size: var(--dp-font-size-sm);
    color: var(--dp-text-muted);
    padding: var(--dp-space-3) 0;
    margin-bottom: var(--dp-space-4);
}

.dp-breadcrumbs__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

.dp-breadcrumbs__item {
    display: inline-flex;
    align-items: center;
}

.dp-breadcrumbs__item a {
    color: var(--dp-primary);
    text-decoration: none;
    transition: color var(--dp-transition);
}

.dp-breadcrumbs__item a:hover {
    color: var(--dp-primary-dark);
    text-decoration: underline;
}

/* Element courant (dernier) */
.dp-breadcrumbs__item:last-child span {
    color: var(--dp-text);
    font-weight: 500;
}

/* Separateur */
.dp-breadcrumbs__sep {
    margin: 0 var(--dp-space-2);
    color: var(--dp-text-muted);
    font-size: var(--dp-font-size-xs);
    user-select: none;
}

/* ════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════ */

@media (max-width: 480px) {
    .dp-breadcrumbs {
        font-size: var(--dp-font-size-xs);
    }
}