/* * Sommaire latéral (partial common/_toc.php) — pages à colonne #pageContent : * légales, documentation (aide), théorie musicale. * * - Reste visible au défilement (position: sticky), sous le header fixe * (50px, voir body { padding-top: 50px } dans style.css). * - Repli en flux normal sous le point de rupture lg (992px) : un menu fixe * n'a aucun sens sur petit écran, le sommaire passe simplement au-dessus * du contenu, comme une section de page normale. * - Mise en évidence de la section en cours via Bootstrap Scrollspy (JS, * voir public/assets/js/toc.js) : le lien actif reçoit .active, on ne * surcharge que les variables CSS du list-group (pas de règle « à la main »). */ /* * style.css pose `html, body { overflow-x: hidden }` (garde-fou anti-débordement * horizontal, fichier protégé — travail non commité du porteur du projet, on n'y * touche pas). Or la spec CSS calcule overflow-x/overflow-y comme une paire : dès * qu'un axe n'est pas `visible`, l'autre est forcé à `auto` — même explicitement * déclaré `visible`. Résultat : devient malgré lui son propre conteneur de * défilement aux yeux du moteur de rendu, ce qui casse `position: sticky` sur ses * descendants (l'aside ne trouve plus de fenêtre bornée où se fixer) et fait * pareillement dérailler le Scrollspy Bootstrap (voir js/toc.js). * * On restaure ici les DEUX axes à `visible` sur uniquement (jamais , * qui garde son `overflow-x: hidden` intact) : c'est la déclaration de qui * se propage au viewport et coupe le débordement horizontal de la page — vérifié * (Playwright) qu'aucun scroll horizontal ne réapparaît. lui-même n'a pas * besoin d'être son propre conteneur : il n'est jamais plus large que son contenu. */ body { overflow: visible; } .toc-nav { max-height: calc(100vh - 66px); overflow-y: auto; } .toc-nav .list-group-item-action:not(.active) { color: var(--ink-soft); background: transparent; } .toc-nav .list-group-item-action:hover, .toc-nav .list-group-item-action:focus { color: var(--primary-green); background: transparent; } .toc-nav .list-group-item-action.active { --bs-list-group-active-bg: transparent; --bs-list-group-active-border-color: transparent; --bs-list-group-active-color: var(--primary-green); font-weight: 700; } @media (min-width: 992px) { .toc-aside { position: sticky; top: 66px; } }