/* ==========================================================================
   DIX TOC Bar - Barre de sommaire horizontale sticky
   Partagee entre pages produit (tous viewports) et blog (mobile < 1200px)
   ========================================================================== */

:root {
    --toc-bar-height: 44px;
}

.dix-toc-bar {
    position: sticky;
    top: var(--header-height, 80px);
    z-index: calc(var(--z-sticky, 200) - 1);
    background: var(--color-bg, #fff);
    border-bottom: 1px solid var(--color-border, #eee);
    height: var(--toc-bar-height);
    overflow: hidden;
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
}

.dix-toc-bar.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* Track horizontal scrollable */
.dix-toc-bar__track {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 100%;
    padding: 0 var(--spacing-4, 16px);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 1100px;
    margin: 0 auto;
}

.dix-toc-bar__track::-webkit-scrollbar {
    display: none;
}

/* Items (pills) */
.dix-toc-bar__item {
    flex-shrink: 0;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary, #666);
    white-space: nowrap;
    border-radius: 20px;
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease;
    line-height: 1;
}

.dix-toc-bar__item:hover {
    color: var(--color-text, #333);
    background-color: var(--color-bg-secondary, #f5f5f5);
}

.dix-toc-bar__item.is-active {
    color: var(--color-primary, #1e3a8a);
    background-color: rgba(30, 58, 138, 0.1);
    font-weight: 600;
}

/* ==========================================================================
   Contexte : Blog (mobile only, le sidebar desktop reste)
   ========================================================================== */

.dix-toc-bar[data-context="blog"] {
    display: none;
}

@media (max-width: 1199px) {
    .dix-toc-bar[data-context="blog"] {
        display: block;
    }
}

/* ==========================================================================
   Contexte : Product (toujours visible)
   ========================================================================== */

.dix-toc-bar[data-context="product"] {
    display: block;
}

/* ==========================================================================
   Mobile adjustments
   ========================================================================== */

@media (max-width: 768px) {
    .dix-toc-bar {
        top: var(--header-height-mobile, 60px);
    }

    .dix-toc-bar__track {
        padding: 0 var(--spacing-3, 12px);
        gap: 2px;
    }

    .dix-toc-bar__item {
        padding: 5px 10px;
        font-size: 12px;
    }
}