/* ========================================================= Dynamic Page – Layout avec Sommaire (TOC) ========================================================= */ /* * Fix sticky : bootstrap.weber.css pose overflow-x: hidden sur , * ce qui crée un scroll-container et empêche position: sticky de fonctionner. * On rétablit overflow: visible sur html ET body uniquement quand la mise en * page TOC est présente, via la surcharge ci-dessous. * overflow-x: clip (≠ hidden) masque le débordement horizontal SANS créer * de scroll-container, ce qui préserve le sticky. */ html:has(.dp-toc-layout), body:has(.dp-toc-layout) { overflow-x: clip; overflow-y: visible; /* le scroll natif du viewport est restauré */ } /* * Fix sticky #2 (cause principale) : * .vlt-main a overflow: hidden dans le CSS du thème (vlt-main.css), * ce qui en fait le scroll-container et annule position: sticky. * On le neutralise uniquement quand le layout TOC est présent. */ .vlt-main:has(.dp-toc-layout) { overflow: visible; } /* ── Conteneur principal ── */ .dp-toc-layout { display: flex; align-items: flex-start; gap: 2rem; max-width: 1400px; margin: 0 auto; padding: 0 1rem; } /* ── Colonne gauche : sommaire ── */ .dp-toc-sidebar { flex: 0 0 260px; width: 260px; position: sticky; top: 100px; /* laisser de la place pour un éventuel header fixe */ max-height: calc(100vh - 120px); overflow-y: auto; padding: 1.25rem 1rem; background: #f8f9fa; border-left: 3px solid #F7901D; border-radius: 0 4px 4px 0; } /* ── Colonne droite : contenu ── */ .dp-toc-content { flex: 1 1 0; min-width: 0; /* évite le débordement flexbox */ } /* ── Loader / spinner ── */ .dp-toc-loader { display: flex; justify-content: center; align-items: center; padding: 1rem 0; } .dp-toc-spinner { display: inline-block; width: 28px; height: 28px; border: 3px solid #d0dde8; border-top-color: #005f9e; border-radius: 50%; animation: dp-toc-spin 0.75s linear infinite; } @keyframes dp-toc-spin { to { transform: rotate(360deg); } } /* ── Navigation générée ── */ .dp-toc-nav { font-size: 0.875rem; line-height: 1.5; } .dp-toc-nav ul { list-style: none; margin: 0; padding: 0; } .dp-toc-nav > ul > li { margin-bottom: 0.35rem; } /* Sous-niveaux (h3, h4…) */ .dp-toc-nav ul ul { padding-left: 1rem; margin-top: 0.2rem; border-left: 1px solid #d0dde8; } .dp-toc-nav a { display: block; color: #333; text-decoration: none; padding: 0.15rem 0.25rem; border-radius: 3px; transition: background 0.15s, color 0.15s; } .dp-toc-nav a:hover, .dp-toc-nav a:focus { background: #e3edf7; color: #1B1E3D; outline: none; } .dp-toc-nav a.dp-toc-active { background: #1B1E3D; color: #fff; font-weight: 600; } /* ── Titre du sommaire ── */ .dp-toc-title { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #005f9e; margin-bottom: 0.75rem; } /* ── Responsive : masquer le sommaire sur mobile ── */ @media (max-width: 991px) { .dp-toc-layout { display: block; } .dp-toc-sidebar { display: none; } .dp-toc-content { width: 100%; } }