/* ============================================================
   SHARED TOC — sidebar table-of-contents for admin + public pages.
   Both use <details class="toc"> markup.
   Public:  server-rendered links (about, charte, licence)
   Admin:   JS-populated links (contenus, accès, paramètres — admin-toc.js)
   ============================================================ */

/* ── Shared list styles (.toc-list) ─────────────────────────────────────── */
.toc-list,
.toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
}

.toc-list a,
.toc ul a {
    display: block;
    font-family: var(--font-body);
    font-size: var(--step-0);
    font-weight: 300;
    color: var(--text-primary);
    text-decoration: none;
    padding: var(--space-3xs) 0;
    transition: color 0.15s;
}

.toc-list a:hover {
    color: var(--accent-primary);
}

.toc-list a.toc-active,
.toc ul a.toc-active {
    color: var(--accent-primary);
    font-weight: 400;
}

/* ── Public TOC (details/summary block) ─────────────────────────────────── */
.toc {
    border: none;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

.toc[open] {
    padding-bottom: 0;
}

.toc > :not(summary) {
    padding-left: 0;
    padding-right: 0;
}

.toc summary {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 400;
    color: var(--text-primary);
    padding: 0 0 var(--space-2xs) 0;
    border-bottom: 1px solid var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    background: transparent;
    cursor: pointer;
    list-style: none;
}

.toc summary::-webkit-details-marker {
    display: none;
}

.toc summary:hover {
    color: inherit;
    background: transparent;
}

/* Caret icon inside summary — visible only on mobile */
.toc-caret {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.toc[open] > summary .toc-caret {
    transform: rotate(180deg);
}

/* Sidebar links (about page — custom links below TOC) */
.toc-sidebar-link:first-of-type {
    padding-top: var(--space-s);
    border-top: 1px solid var(--border-primary);
}

.toc-sidebar-link + .toc-sidebar-link {
    padding-top: var(--space-xs);
}

.toc-sidebar-link a {
    font-size: var(--step--2);
    color: var(--accent-primary);
    text-decoration: none;
    transition: opacity 0.15s;
}

.toc-sidebar-link a:hover {
    opacity: 0.8;
}

/* ── Desktop: sticky sidebar ───────────────────────────────────────────── */
@media (min-width: 768px) {
    .toc {
        position: sticky;
        top: var(--space-l);
        grid-column: 1;
    }

    .toc summary {
        pointer-events: none;
    }

    .toc-caret {
        display: none;
    }
}

/* ── Mobile: collapsible TOC ────────────────────────────────────────────── */
@media (max-width: 767px) {
    .toc {
        position: static;
        grid-column: 1;
    }

    .toc summary {
        cursor: pointer;
        list-style: revert;
    }
}