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

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

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

@media (min-width: 1200px) {
    .dix-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;
    }

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

    /* Temps de lecture - aligne a droite */
    .dix-toc-reading-time {
        margin-bottom: var(--spacing-4);
        padding-bottom: var(--spacing-4);
        border-bottom: 1px solid var(--color-border);
        text-align: right;
    }

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

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

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

    /* Titre - aligne a droite */
    .dix-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 */
    .dix-toc-list {
        list-style: none;
        margin: 0;
        padding: 0;
        position: relative;
    }

    /* Ligne verticale de la timeline - a DROITE */
    .dix-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 */
    .dix-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 */
    .dix-toc-item {
        position: relative;
        padding-left: 0;
        padding-right: var(--spacing-5);
        margin-bottom: var(--spacing-2);
    }

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

    /* Point de la timeline - a DROITE */
    .dix-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 */
    .dix-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;
    }

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

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

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

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

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

    /* H3 - sous-sections, padding a droite augmente */
    .dix-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 */
    .dix-toc-item--h3.is-visible {
        max-height: 50px;
        opacity: 1;
        margin-bottom: var(--spacing-2);
    }

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

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

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

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

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

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

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

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

/* Ecrans ultra-larges */
@media (min-width: 1600px) {
    .dix-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) {
    .dix-toc-mobile {
        margin-bottom: var(--spacing-6);
        padding: var(--spacing-4);
        background-color: var(--color-bg-muted);
        border-radius: var(--radius-lg);
    }

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

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

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

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

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

    .dix-toc-mobile .dix-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);
    }

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

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

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

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

    /* Point */
    .dix-toc-mobile .dix-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 */
    .dix-toc-mobile .dix-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;
    }

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

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

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

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

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

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

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

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

    /* Bouton "Voir le sommaire complet" */
    .dix-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;
    }

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

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