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

.custom-breadcrumb__item {
    display: flex;
    align-items: center;
}

/* ──────────────────────────────────────────────────────────────────
 * Responsive (avril 2026) : sur mobile/tablette, le breadcrumb peut
 * devenir trop long avec L2 + L3 + nom du produit. On passe en scroll
 * horizontal interne (et on retire le wrap pour garder le fil sur une
 * seule ligne).
 * ──────────────────────────────────────────────────────────────────*/
@media (max-width: 768px) {
    .custom-breadcrumb {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
        /* Évite un saut de layout : la scrollbar n'occupe pas de place
           si masquée. On garde un petit padding pour le confort tactile. */
        padding-bottom: 4px;
    }

    .custom-breadcrumb__list {
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    .custom-breadcrumb__item {
        flex-shrink: 0;
    }

    .custom-breadcrumb__link,
    .custom-breadcrumb__current {
        white-space: nowrap;
    }
}

.custom-breadcrumb__item:not(:last-child)::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 0 10px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.79289 6.29289C9.18342 5.90237 9.81658 5.90237 10.2071 6.29289L15.2071 11.2929C15.5976 11.6834 15.5976 12.3166 15.2071 12.7071L10.2071 17.7071C9.81658 18.0976 9.18342 18.0976 8.79289 17.7071C8.40237 17.3166 8.40237 16.6834 8.79289 16.2929L13.0858 12L8.79289 7.70711C8.40237 7.31658 8.40237 6.68342 8.79289 6.29289Z' fill='%230B3954'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
}

.custom-breadcrumb__link,
.custom-breadcrumb__current {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.custom-breadcrumb__link {
    color: #333;
}

.custom-breadcrumb__link:hover {
    color: #0B3954;
}

.custom-breadcrumb__current {
    color: #666;
}

.custom-breadcrumb--white .custom-breadcrumb__link,
.custom-breadcrumb--white .custom-breadcrumb__current {
    color: #fff;
}

.custom-breadcrumb--white .custom-breadcrumb__link:hover {
    color: rgba(255, 255, 255, 0.7);
}

.custom-breadcrumb--white .custom-breadcrumb__item:not(:last-child)::after {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.79289 6.29289C9.18342 5.90237 9.81658 5.90237 10.2071 6.29289L15.2071 11.2929C15.5976 11.6834 15.5976 12.3166 15.2071 12.7071L10.2071 17.7071C9.81658 18.0976 9.18342 18.0976 8.79289 17.7071C8.40237 17.3166 8.40237 16.6834 8.79289 16.2929L13.0858 12L8.79289 7.70711C8.40237 7.31658 8.40237 6.68342 8.79289 6.29289Z' fill='%23ffffff'/%3E%3C/svg%3E");
}

@media (max-width: 768px) {
    .custom-breadcrumb__link,
    .custom-breadcrumb__current {
        font-size: 11px;
    }

    .custom-breadcrumb__item:not(:last-child)::after {
        margin: 0 8px;
        font-size: 10px;
    }
}