...
...
... contenu avec h2, h3, etc. ...
*/
.page-with-toc {
max-width: var(--container);
margin: 0 auto;
padding: 16px;
}
@media (min-width: 768px) {
.page-with-toc {
display: grid;
grid-template-columns: 280px 1fr;
gap: 28px;
align-items: start;
}
}
/* ============================================
Centrer le contenu principal en desktop
============================================ */
@media (min-width: 768px) {
.page-body {
max-width: 900px; /* largeur premium, centrée */
margin: 0 auto; /* centrage horizontal */
padding-top: 0.5rem; /* optionnel, équilibre visuel */
}
}
/* =========================================================
5. SOMMAIRES (TOC)
========================================================= */
/* =============== rajout 17 37 =============== */
/* Sommaire – base */
#toc {
margin: 1.5rem 0;
}
#toc-list {
list-style: none;
margin: 0;
padding-left: 0;
}
/* Mobile : bouton + sommaire rétractable */
@media (max-width: 767px) {
.page-with-toc {
display: block;
}
#toc .toc-heading.none-si-inf-768 {
display: none;
}
#toc-list {
display: none;
}
#toc[data-open="true"] #toc-list {
display: block;
margin-top: 0.5rem;
}
}
/* Desktop : sommaire fixe à gauche */
@media (min-width: 768px) {
.page-with-toc {
display: grid;
grid-template-columns: minmax(230px, 280px) 1fr;
gap: 2rem;
align-items: flex-start;
}
#toc {
position: sticky;
top: 96px; /* à ajuster selon la hauteur de ton header */
}
.toc-toggle {
display: none;
}
#toc .toc-heading.none-si-inf-768 {
display: block;
font-weight: 600;
margin-bottom: 0.75rem;
}
#toc-list {
display: block;
}
}
/* =============== 5.1 Base commune =============== */
#toc {
z-index: 3;
}
#toc .toc-list {
margin: .75rem 0 0 1.25rem;
padding: 0;
}
#toc .toc-list > li {
margin: .35rem 0;
}
#toc a {
text-decoration: none;
color: var(--blue-main);
}
#toc a:hover {
text-decoration: underline;
}
/* Surbrillance de la section active (pages filles avec JS IntersectionObserver) */
#toc a.active {
font-weight: 700;
}
/* “Sommaire” (texte de titre) visible uniquement en desktop */
.none-si-inf-768 { display: none; }
@media (min-width: 768px) {
.none-si-inf-768 { display: block; }
}
/* On s’assure que le TOC reste cliquable, même avec des z-index ailleurs */
#toc, #toc * {
pointer-events: auto;
}
/* =============== 5.2 Page FILLES – nav#toc dans .page-with-toc =============== */
/* Desktop : nav#toc devient sticky à gauche et toujours ouvert */
@media (min-width: 768px) {
.page-with-toc #toc {
position: sticky;
top: 88px;
height: fit-content;
}
.page-with-toc #toc .toc-toggle { display: none; }
.page-with-toc #toc .toc-list { display: block !important; }
}
/* Mobile : accordéon, bouton visible */
@media (max-width: 767px) {
.page-with-toc {
display: block;
max-width: var(--container);
margin: 0 auto;
padding: 16px;
}
.page-with-toc #toc {
position: relative;
top: auto;
z-index: 9999; /* pour passer devant si besoin */
}
.page-with-toc #toc .toc-toggle {
display: inline-flex;
width: 100%;
justify-content: space-between;
align-items: center;
cursor: pointer;
}
.page-with-toc #toc[data-open="false"] .toc-list {
display: none !important;
}
}
/* =============== 5.3 Page MÈRE – aside.toc + sommaire mobile =============== */
/* Sommaire desktop dans la colonne de gauche */
aside.toc {
position: sticky;
top: 16px;
align-self: start;
background: #F7FAFC;
border: 1px solid #E6EAF0;
border-radius: var(--radius);
padding: 14px;
box-shadow: var(--shadow);
height: max-content;
}
.toc small {
color: var(--muted);
display: block;
margin-bottom: 10px;
}
.toc ul {
list-style: none;
margin: 0;
padding: 0;
}
.toc li {
margin: 8px 0;
}
/* Bouton toggle pour mobile (page mère) */
.toc-toggle {
display: none; /* visible uniquement en mobile sur la page mère */
width: 100%;
background: #F7FAFC;
border: 1px solid #E6EAF0;
border-radius: var(--radius);
padding: 12px 14px;
margin: 12px 0 0;
font-weight: 600;
text-align: left;
}
/* Nav mobile cloné (id="toc-mobile") */
#toc-mobile {
/* même aspect général que le TOC */
}
.toc--mobile {
position: static;
margin-top: 8px;
}
/* Animation d’ouverture/fermeture du sommaire mobile */
[hidden] {
display: none !important;
}
.toc--anim {
overflow: hidden;
max-height: 0;
transition: max-height .28s ease;
}
.toc--anim.is-open {
max-height: 1000px;
}
/* Réduction des animations si préférence utilisateur */
@media (prefers-reduced-motion: reduce) {
.toc--anim { transition: none; }
}
/* Mobile : le sommaire desktop disparaît, le bouton apparaît */
@media (max-width: 768px) {
.wrap {
grid-template-columns: 1fr;
}
aside.toc {
display: none;
}
.toc-toggle {
display: block;
}
}
/* Desktop : on cache le TOC mobile */
@media (min-width: 768px) {
#toc-mobile {
display: none !important;
}
}
/* Corrections de scroll sur mobile pour les ancres (pages filles) */
@media (max-width: 767px) {
main h2[id] {
scroll-margin-top: 20px;
}
}
/* =========================================================
6. BREADCRUMB
---------------------------------------------------------
HTML type :