/**
 * PDC - Table of Contents Timeline
 * Style chronologie/timeline sticky a gauche
 * Utilise les variables CSS du theme PDC
 *
 * @package PDC
 * @since 1.0.0
 */

/* ==========================================================================
   TOC - Base (override .page-body ol li { list-style-type: decimal })
   ========================================================================== */

.pdc-toc-list .pdc-toc-item {
    list-style: none;
}

/* ==========================================================================
   TOC DESKTOP - Timeline sticky a gauche
   Affiche uniquement sur grands ecrans (>= 1200px)
   ========================================================================== */

.pdc-toc-timeline {
    display: none;
}

@media (min-width: 1200px) {
    .pdc-toc-timeline {
        display: block;
        position: fixed;
        /* Positionne par rapport au contenu : bord droit du TOC aligne avec bord gauche du contenu */
        left: calc((100vw - var(--content-width, 800px)) / 2 - 20px);
        transform: translateX(-100%);
        top: 200px;
        width: 280px;
        max-width: calc((100vw - var(--content-width, 800px)) / 2 - 40px);
        max-height: calc(100vh - 200px);
        overflow-y: auto;
        z-index: 100;
        padding: 0 var(--spacing-4);
        transition: opacity 0.3s ease;
    }

    .pdc-toc-inner {
        padding: 0;
    }

    /* Titre - aligne a droite */
    .pdc-toc-title {
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-semibold);
        text-transform: uppercase;
        letter-spacing: var(--letter-spacing-wider);
        color: var(--color-text-muted);
        margin-bottom: var(--spacing-3);
        text-align: right;
    }

    /* Liste */
    .pdc-toc-list {
        list-style: none;
        margin: 0;
        padding: 0;
        position: relative;
    }

    /* Ligne verticale de la timeline - a DROITE */
    .pdc-toc-list::before {
        content: '';
        position: absolute;
        right: 4px;
        left: auto;
        top: 8px;
        bottom: 8px;
        width: 2px;
        background: var(--color-border);
        border-radius: 1px;
    }

    /* Ligne de progression - a DROITE */
    .pdc-toc-list::after {
        content: '';
        position: absolute;
        right: 4px;
        left: auto;
        top: 8px;
        width: 2px;
        height: var(--progress-height, 0);
        background: var(--color-primary);
        border-radius: 1px;
        transition: height 0.3s ease;
        z-index: 1;
    }

    /* Item - padding a droite pour le point */
    .pdc-toc-item {
        position: relative;
        padding-left: 0;
        padding-right: var(--spacing-5);
        margin-bottom: var(--spacing-2);
    }

    .pdc-toc-item:last-child {
        margin-bottom: 0;
    }

    /* Point de la timeline - a DROITE */
    .pdc-toc-dot {
        position: absolute;
        right: 0;
        left: auto;
        top: 6px;
        width: 10px;
        height: 10px;
        background: var(--color-border);
        border-radius: 50%;
        border: 2px solid var(--color-bg);
        box-shadow: 0 0 0 2px var(--color-border);
        transition: all 0.3s ease;
    }

    /* Lien - aligne a droite */
    .pdc-toc-link {
        display: block;
        font-size: var(--font-size-sm);
        line-height: 1.4;
        color: var(--color-text-secondary);
        text-decoration: none;
        text-align: right;
        transition: opacity 0.2s ease, color 0.2s ease;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .pdc-toc-link:hover {
        color: var(--color-primary);
    }

    /* Item actif */
    .pdc-toc-item.is-active .pdc-toc-dot {
        background: var(--color-primary);
        box-shadow: 0 0 0 2px var(--color-primary);
        transform: scale(1.2);
    }

    .pdc-toc-item.is-active .pdc-toc-link {
        color: var(--color-primary);
        font-weight: var(--font-weight-semibold);
    }

    /* Items passes (deja lus) */
    .pdc-toc-item.is-passed .pdc-toc-dot {
        background: var(--color-primary);
        box-shadow: 0 0 0 2px var(--color-primary);
    }

    .pdc-toc-item.is-passed .pdc-toc-link {
        color: var(--color-text-secondary);
    }

    /* H3 - sous-sections, padding a droite augmente */
    .pdc-toc-item--h3 {
        padding-right: var(--spacing-8);
        padding-left: 0;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        margin-bottom: 0;
        transition: max-height 0.3s ease, opacity 0.3s ease, margin-bottom 0.3s ease;
    }

    /* H3 visibles quand le H2 parent est actif */
    .pdc-toc-item--h3.is-visible {
        max-height: 50px;
        opacity: 1;
        margin-bottom: var(--spacing-2);
    }

    .pdc-toc-item--h3 .pdc-toc-dot {
        width: 6px;
        height: 6px;
        top: 8px;
        right: 14px;
        left: auto;
    }

    .pdc-toc-item--h3 .pdc-toc-link {
        font-size: var(--font-size-xs);
    }

    /* Scrollbar personnalisee */
    .pdc-toc-timeline::-webkit-scrollbar {
        width: 4px;
    }

    .pdc-toc-timeline::-webkit-scrollbar-track {
        background: transparent;
    }

    .pdc-toc-timeline::-webkit-scrollbar-thumb {
        background: var(--color-border);
        border-radius: 2px;
    }

    .pdc-toc-timeline::-webkit-scrollbar-thumb:hover {
        background: var(--color-text-muted);
    }

    /* Masquer le TOC mobile sur desktop */
    .pdc-toc-mobile {
        display: none;
    }
}

/* Ecrans moyens - largeur augmentee */
@media (min-width: 1400px) {
    .pdc-toc-timeline {
        width: 320px;
    }
}

/* Ecrans ultra-larges */
@media (min-width: 1600px) {
    .pdc-toc-timeline {
        width: 380px;
        max-width: calc((100vw - var(--content-width, 800px)) / 2 - 60px);
    }
}

/* ==========================================================================
   TOC MOBILE - Au debut du contenu
   Affiche uniquement sur ecrans < 1200px
   ========================================================================== */

@media (max-width: 1199px) {
    .pdc-toc-mobile {
        margin-bottom: var(--spacing-6);
        padding: var(--spacing-4);
        background-color: var(--color-bg-muted);
        border-radius: var(--radius-lg);
    }

    .pdc-toc-mobile .pdc-toc-inner {
        padding: 0;
    }

    /* Temps de lecture mobile */
    .pdc-toc-mobile .pdc-toc-reading-time {
        margin-bottom: var(--spacing-3);
        padding-bottom: var(--spacing-3);
        border-bottom: 1px solid var(--color-border);
    }

    .pdc-toc-mobile .pdc-toc-reading-time .pdc-toc-title {
        margin-bottom: var(--spacing-1);
    }

    .pdc-toc-mobile .pdc-toc-reading-value {
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
        font-size: var(--font-size-base);
        color: var(--color-text);
    }

    .pdc-toc-mobile .pdc-toc-clock {
        font-size: var(--font-size-lg);
        line-height: 1;
    }

    .pdc-toc-mobile .pdc-toc-title {
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-semibold);
        text-transform: uppercase;
        letter-spacing: var(--letter-spacing-wider);
        color: var(--color-text-muted);
        margin-bottom: var(--spacing-3);
    }

    .pdc-toc-mobile .pdc-toc-list {
        list-style: none;
        margin: 0;
        padding: 0;
        position: relative;
    }

    /* Ligne verticale */
    .pdc-toc-mobile .pdc-toc-list::before {
        content: '';
        position: absolute;
        left: 4px;
        top: 8px;
        bottom: 8px;
        width: 2px;
        background: var(--color-border);
        border-radius: 1px;
    }

    .pdc-toc-mobile .pdc-toc-item {
        position: relative;
        padding-left: var(--spacing-5);
        margin-bottom: var(--spacing-2);
    }

    .pdc-toc-mobile .pdc-toc-item:last-child {
        margin-bottom: 0;
    }

    /* Point */
    .pdc-toc-mobile .pdc-toc-dot {
        position: absolute;
        left: 0;
        top: 6px;
        width: 10px;
        height: 10px;
        background: var(--color-border);
        border-radius: 50%;
        border: 2px solid var(--color-bg-muted);
        box-shadow: 0 0 0 2px var(--color-border);
        transition: all 0.3s ease;
    }

    /* Lien */
    .pdc-toc-mobile .pdc-toc-link {
        display: block;
        font-size: var(--font-size-sm);
        line-height: 1.4;
        color: var(--color-text-secondary);
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .pdc-toc-mobile .pdc-toc-link:hover {
        color: var(--color-primary);
    }

    /* Item actif mobile */
    .pdc-toc-mobile .pdc-toc-item.is-active .pdc-toc-dot {
        background: var(--color-primary);
        box-shadow: 0 0 0 2px var(--color-primary);
        transform: scale(1.1);
    }

    .pdc-toc-mobile .pdc-toc-item.is-active .pdc-toc-link {
        color: var(--color-primary);
        font-weight: var(--font-weight-semibold);
    }

    /* H3 indentes */
    .pdc-toc-mobile .pdc-toc-item--h3 {
        padding-left: var(--spacing-8);
    }

    .pdc-toc-mobile .pdc-toc-item--h3 .pdc-toc-dot {
        width: 6px;
        height: 6px;
        top: 8px;
        left: 14px;
    }

    .pdc-toc-mobile .pdc-toc-item--h3 .pdc-toc-link {
        font-size: var(--font-size-xs);
    }

    /* Items caches par defaut */
    .pdc-toc-mobile .pdc-toc-item--hidden {
        display: none;
    }

    /* Afficher les items quand ouvert */
    .pdc-toc-mobile.is-open .pdc-toc-item--hidden {
        display: block;
    }

    /* Bouton "Voir le sommaire complet" */
    .pdc-toc-more {
        display: block;
        width: 100%;
        margin-top: var(--spacing-3);
        padding: var(--spacing-2) var(--spacing-4);
        background: var(--color-bg);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        font-family: inherit;
        font-size: var(--font-size-sm);
        color: var(--color-text-secondary);
        cursor: pointer;
        text-align: center;
        transition: border-color 0.2s ease, color 0.2s ease;
    }

    .pdc-toc-more:hover {
        border-color: var(--color-primary);
        color: var(--color-primary);
    }

    /* Masquer le bouton quand ouvert */
    .pdc-toc-mobile.is-open .pdc-toc-more {
        display: none;
    }
}

/* ==========================================================================
   TOC LINKED PRODUCTS - Desktop (sous le TOC)
   Affichage vertical simple
   ========================================================================== */

@media (min-width: 1200px) {
    .pdc-toc-products {
        margin-top: var(--spacing-6);
        padding-top: var(--spacing-4);
        border-top: 1px solid var(--color-border);
    }

    .pdc-toc-products__title {
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-semibold);
        text-transform: uppercase;
        letter-spacing: var(--letter-spacing-wider);
        color: var(--color-text-muted);
        margin-bottom: var(--spacing-3);
        text-align: right;
    }

    /* Liste verticale */
    .pdc-toc-products__list {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-2);
    }

    /* Product card - format horizontal compact */
    .pdc-toc-product {
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
        padding: var(--spacing-2);
        background: var(--color-bg-muted);
        border-radius: var(--radius-md);
        text-decoration: none;
        transition: background-color 0.2s ease;
    }

    .pdc-toc-product:hover {
        background: var(--color-bg-tertiary);
    }

    .pdc-toc-product__img {
        width: 40px;
        height: 40px;
        object-fit: cover;
        border-radius: var(--radius-sm);
        flex-shrink: 0;
    }

    .pdc-toc-product__info {
        flex: 1;
        min-width: 0;
        text-align: right;
    }

    .pdc-toc-product__name {
        display: block;
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
        color: var(--color-text);
        margin-bottom: 2px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.3;
    }

    .pdc-toc-product__price {
        display: block;
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-semibold);
        color: var(--color-primary);
    }

    .pdc-toc-product__price del {
        color: var(--color-text-muted);
        font-weight: normal;
        font-size: 10px;
        margin-right: 2px;
    }

    .pdc-toc-product__price ins {
        text-decoration: none;
    }
}

/* ==========================================================================
   TOC STICKY PRODUCTS - Mobile (barre sticky en bas)
   ========================================================================== */

.pdc-toc-sticky-products {
    display: none;
}

@media (max-width: 1199px) {
    .pdc-toc-sticky-products {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--color-bg);
        border-top: 1px solid var(--color-border);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
        z-index: 999;
        padding: var(--spacing-3) var(--spacing-4);
        transform: translateY(100%);
        opacity: 0;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .pdc-toc-sticky-products.is-visible {
        transform: translateY(0);
        opacity: 1;
    }

    /* Header with title */
    .pdc-toc-sticky-products__header {
        padding: 0 var(--spacing-4);
        padding-bottom: var(--spacing-2);
        margin-bottom: var(--spacing-2);
        border-bottom: 1px solid var(--color-border);
    }

    .pdc-toc-sticky-products__title {
        display: block;
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-semibold);
        text-transform: uppercase;
        letter-spacing: var(--letter-spacing-wider);
        color: var(--color-text-muted);
        text-align: center;
    }

    .pdc-toc-sticky-products__inner {
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
        max-width: 600px;
        margin: 0 auto;
    }

    /* Navigation arrows */
    .pdc-toc-sticky-products__nav {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        background: var(--color-bg-muted);
        border: 1px solid var(--color-border);
        border-radius: 50%;
        cursor: pointer;
        flex-shrink: 0;
        transition: background-color 0.2s ease, border-color 0.2s ease;
        color: var(--color-text);
    }

    .pdc-toc-sticky-products__nav:hover {
        background: var(--color-bg-tertiary);
        border-color: var(--color-primary);
    }

    /* Slides track */
    .pdc-toc-sticky-products__track {
        flex: 1;
        min-width: 0;
        position: relative;
        overflow: hidden;
    }

    .pdc-toc-sticky-products__slide {
        display: none;
        align-items: center;
        gap: var(--spacing-3);
    }

    .pdc-toc-sticky-products__slide.is-active {
        display: flex;
    }

    /* Product link */
    .pdc-toc-sticky-products__product {
        display: flex;
        align-items: center;
        gap: var(--spacing-3);
        flex: 1;
        min-width: 0;
        text-decoration: none;
    }

    .pdc-toc-sticky-products__img {
        width: 44px;
        height: 44px;
        object-fit: cover;
        border-radius: var(--radius-sm);
        flex-shrink: 0;
    }

    .pdc-toc-sticky-products__info {
        flex: 1;
        min-width: 0;
    }

    .pdc-toc-sticky-products__name {
        display: block;
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
        color: var(--color-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
    }

    .pdc-toc-sticky-products__price {
        display: block;
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-semibold);
        color: var(--color-primary);
        line-height: 1.3;
    }

    .pdc-toc-sticky-products__price del {
        color: var(--color-text-muted);
        font-weight: normal;
        font-size: var(--font-size-xs);
        margin-right: var(--spacing-1);
    }

    .pdc-toc-sticky-products__price ins {
        text-decoration: none;
    }

    /* View product button */
    .pdc-toc-sticky-products__btn {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--spacing-2) var(--spacing-4);
        background: var(--color-primary);
        color: white;
        border-radius: var(--radius-md);
        flex-shrink: 0;
        text-decoration: none;
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-semibold);
        transition: background-color 0.2s ease, transform 0.2s ease;
        white-space: nowrap;
    }

    .pdc-toc-sticky-products__btn:hover {
        background: var(--color-primary-dark, var(--color-primary));
        transform: scale(1.02);
    }

    /* Dots */
    .pdc-toc-sticky-products__dots {
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: var(--spacing-1);
    }

    .pdc-toc-sticky-products__dot {
        width: 6px;
        height: 6px;
        background: var(--color-border);
        border-radius: 50%;
        cursor: pointer;
        transition: background-color 0.2s ease, transform 0.2s ease;
    }

    .pdc-toc-sticky-products__dot.is-active {
        background: var(--color-primary);
        transform: scale(1.2);
    }

    .pdc-toc-sticky-products__dot:hover {
        background: var(--color-primary);
    }

    /* Add padding to body to account for sticky bar with header */
    body:has(.pdc-toc-sticky-products.is-visible) {
        padding-bottom: 110px;
    }
}