/* Sommaire latéral — styles neutres, hérités du thème (couleur du texte, police). */
:root{--sml-width:360px;--sml-gap:32px;--sml-top:6rem;--sml-accent:currentColor}

.sml{font-size:.875rem;line-height:1.35;margin:0 0 2rem;max-width:100%}
.sml__box{border:1px solid rgba(128,128,128,.35);border:1px solid color-mix(in srgb,currentColor 18%,transparent);border-radius:6px;padding:.65rem .9rem;background:rgba(128,128,128,.07);background:color-mix(in srgb,currentColor 4%,transparent)}
/* Le titre est le bouton qui replie le sommaire : les trois éléments — libellé, compte, chevron —
   restent groupés. Le chevron était poussé au bord du panneau par margin-left:auto ; passé à
   360 px de large, il se retrouvait à 300 px du mot « Sommaire » et ne se lisait plus comme sa
   commande, surtout replié, où il ne reste que cette ligne à l'écran. */
.sml__title{cursor:pointer;font-weight:700;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;list-style:none;display:flex;align-items:center;gap:.5rem;margin:0;padding:.3rem 0;white-space:nowrap;width:fit-content;transition:opacity .15s}
.sml__title:hover{opacity:.65}
.sml__title::-webkit-details-marker{display:none}
.sml__title::after{content:"";width:.5em;height:.5em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);opacity:.6;transition:transform .2s}
.sml__box[open]>.sml__title::after{transform:rotate(-135deg) translate(-2px,-2px)}
.sml__count{opacity:.55;font-weight:500;letter-spacing:0}
/* Spécificité volontairement haute : un thème de contenu (Divi : .entry-content ol) pose
   list-style-type:decimal à spécificité égale et, chargé après, l'emporterait. Les deux
   niveaux doivent être nommés : une règle sur .sml__list seule laisse la sous-liste numérotée. */
.sml ol.sml__list,.sml ol.sml__sub{list-style:none;padding:0}
.sml ol.sml__list{margin:.6rem 0 0}
.sml ol.sml__list>li,.sml ol.sml__sub>li{list-style:none;margin:0;padding:0;text-indent:0;background:none}
.sml ol.sml__sub{margin:.1rem 0 .35rem 1.1rem}
.sml li{margin:0;padding:0}
/* Les deux niveaux se lisent de la même façon : ni la graisse ni la taille ne les séparent,
   seul le retrait le fait. Un titre 2 mis en avant hiérarchisait une liste que le lecteur
   parcourt à plat, et la graisse était héritée du thème, donc imprévisible d'un site à l'autre. */
.sml a{display:block;padding:.3rem .5rem .3rem .65rem;font-size:.92em;font-weight:400;text-decoration:none;color:inherit;opacity:.78;border-left:2px solid transparent;border-radius:0 3px 3px 0;transition:opacity .15s,background .15s}
.sml a:hover,.sml a:focus-visible{opacity:1;background:rgba(128,128,128,.12);background:color-mix(in srgb,currentColor 7%,transparent);outline:none}
.sml a:focus-visible{box-shadow:0 0 0 2px var(--sml-accent)}
.sml a.is-current{opacity:1;color:var(--sml-accent);border-left-color:var(--sml-accent)}
.sml__item--h3 a{padding-top:.22rem;padding-bottom:.22rem}
.sml__tab{display:none}

/* Panneau flottant dans la marge (quand elle est assez large) */
.sml--floating{position:fixed;top:var(--sml-top);width:var(--sml-width);margin:0;z-index:20;max-height:calc(100vh - var(--sml-top) - 2rem);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
body.admin-bar .sml--floating{top:calc(var(--sml-top) + 32px);max-height:calc(100vh - var(--sml-top) - 2rem - 32px)}
.sml--floating .sml__box{background:transparent;border:0;border-radius:0;padding:0 0 0 .9rem;border-left:1px solid rgba(128,128,128,.35);border-left:1px solid color-mix(in srgb,currentColor 18%,transparent)}
.sml--floating a{border-left-width:2px}

/* Collé dans un conteneur du thème (barre latérale) */
.sml--docked{position:sticky;top:var(--sml-top);margin:0 0 2rem;max-height:calc(100vh - var(--sml-top) - 2rem);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;z-index:2}
body.admin-bar .sml--docked{top:calc(var(--sml-top) + 32px);max-height:calc(100vh - var(--sml-top) - 2rem - 32px)}
.sml--docked .sml__box{background:transparent;border:0;border-radius:0;padding:0 0 0 .9rem;border-left:1px solid rgba(128,128,128,.35);border-left:1px solid color-mix(in srgb,currentColor 18%,transparent)}

/* Tiroir : languette sur le bord de l'écran, panneau qui glisse par-dessus le texte (marge trop étroite) */
.sml--rail{position:fixed;top:var(--sml-top);width:min(var(--sml-width),86vw);margin:0;z-index:30;background:var(--sml-bg,#fff);border:1px solid rgba(128,128,128,.35);border:1px solid color-mix(in srgb,currentColor 18%,transparent);transition:transform .25s ease,box-shadow .25s ease}
body.admin-bar .sml--rail{top:calc(var(--sml-top) + 32px)}
.sml--rail.sml--left{left:0;border-left:0;border-radius:0 6px 6px 0;transform:translateX(-100%)}
.sml--rail.sml--right{right:0;border-right:0;border-radius:6px 0 0 6px;transform:translateX(100%)}
.sml--rail.is-open{transform:none;box-shadow:0 12px 32px rgba(0,0,0,.18)}
.sml--rail .sml__box{border:0;border-radius:0;background:transparent;padding:.8rem 1rem .9rem;max-height:calc(100vh - var(--sml-top) - 2rem);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
body.admin-bar .sml--rail .sml__box{max-height:calc(100vh - var(--sml-top) - 2rem - 32px)}
.sml--rail .sml__title{pointer-events:none}
.sml--rail .sml__title::after{display:none}
/* La languette est le seul élément visible tant que le tiroir est fermé : elle doit se lire
   comme un bouton, pas comme un liseré. D'où le pictogramme, la largeur et l'ombre portée. */
.sml--rail .sml__tab{display:flex;flex-direction:column;align-items:center;gap:.6rem;position:absolute;top:0;margin:0;border:0;cursor:pointer;background:var(--sml-accent);color:var(--sml-bg,#fff);font:inherit;font-weight:700;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;line-height:1;padding:.8rem .6rem .95rem;box-shadow:0 0 0 2px var(--sml-bg,#fff),0 4px 16px rgba(0,0,0,.28);transition:transform .2s ease,filter .2s ease,box-shadow .2s ease}
.sml--rail .sml__tab[hidden]{display:none}
.sml--rail .sml__tab-label{writing-mode:vertical-rl}
.sml--rail .sml__tab-icon{flex:none;width:15px;height:11px;background:linear-gradient(currentColor,currentColor) 0 0/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 50%/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat}
.sml--rail.sml--left .sml__tab{left:100%;border-radius:0 6px 6px 0}
.sml--rail.sml--right .sml__tab{right:100%;border-radius:6px 0 0 6px}
.sml--rail .sml__tab:hover{filter:brightness(1.08);box-shadow:0 0 0 2px var(--sml-bg,#fff),0 6px 22px rgba(0,0,0,.34)}
.sml--rail.sml--left .sml__tab:hover{transform:translateX(3px)}
.sml--rail.sml--right .sml__tab:hover{transform:translateX(-3px)}
.sml--rail .sml__tab:focus-visible{outline:2px solid var(--sml-bg,#fff);outline-offset:-4px}
/* Article entièrement remonté : plus rien à sommairer, la languette s'efface. */
.sml--rail.is-past{opacity:0;pointer-events:none;transition:opacity .2s ease,transform .25s ease}

/* ---- Ancres : le titre visé ne se cache sous rien ----
 * --sml-anchor est posé par le JS avec la hauteur réellement mesurée de ce qui
 * occupe le haut de l'écran (barre collante comprise) : c'est lui qui fait foi
 * dès que le JS tourne, donc à chaque clic dans le sommaire. Les valeurs de
 * repli ne servent qu'à l'arrivée directe sur une adresse à ancre (#section),
 * où le navigateur défile avant que le JS ait pu mesurer — d'où le plancher
 * sur petit écran, calculé pour une barre collante. */
.sml-h{scroll-margin-top:var(--sml-anchor,calc(var(--sml-top) - 2rem))}
@media (max-width:1023px){.sml-h{scroll-margin-top:var(--sml-anchor,max(5.5rem,calc(var(--sml-top) - 2rem)))}}


/* =========================================================================
 * PETIT ÉCRAN — deux formes, au choix dans les réglages
 * -------------------------------------------------------------------------
 * « barre »  : le sommaire reste en tête d'article et revient se coller en
 *              haut de l'écran dès qu'on l'a dépassé, en affichant la section
 *              en cours de lecture.
 * « tiroir » : la languette du bord d'écran, comme sur ordinateur.
 * Les deux reprennent l'aspect de cette languette — remplissage en couleur du
 * site, texte et liseré blancs. C'est ce qui les rend visibles par-dessus un
 * bandeau de la même couleur que l'école, et ce qui les fait reconnaître d'un
 * appareil à l'autre. --sml-fill et --sml-on-fill sont résolus en JS, parce
 * que l'accent peut valoir currentColor.
 * ====================================================================== */

.sml--inline .sml__box,.sml--bar .sml__box{background:var(--sml-fill,var(--sml-accent));color:var(--sml-on-fill,#fff);border:2px solid var(--sml-on-fill,#fff);border-radius:6px;box-shadow:0 2px 10px rgba(0,0,0,.18);padding:.15rem .75rem .5rem}
/* Le titre prend toute la largeur : le chevron se range à droite et le nom de la
   section en cours dispose de la place qui reste. */
.sml--inline .sml__title,.sml--bar .sml__title{width:auto;padding:.55rem 0}
.sml--inline .sml__title::after,.sml--bar .sml__title::after{margin-left:auto;opacity:.9;flex:none}
.sml__here{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;letter-spacing:0;text-transform:none;opacity:.85}
/* Seul le nom de la section se rétrécit : sans cela la ligne déborde de quelques pixels
   sur un téléphone étroit et le chevron sort du cadre. */
.sml--bar .sml__count,.sml--inline .sml__count{flex:none}
/* Le nom de la section en cours ne s'affiche QUE dans la barre collée : c'est là qu'il
   répond à « où suis-je » une fois le titre de section remonté hors de l'écran. Partout
   ailleurs — panneau de marge, tiroir, bloc replié — le sommaire est lu en entier et
   l'entrée surlignée le dit déjà. */
.sml__here{display:none}
.sml--bar.is-stuck .sml__here{display:block}
/* Sur ce fond plein, un lien courant coloré à l'accent serait invisible : c'est le
   blanc franc et le fond translucide qui le distinguent, comme sur la languette. */
.sml--inline a,.sml--bar a{opacity:.88}
.sml--inline a:hover,.sml--bar a:hover,.sml--inline a:focus-visible,.sml--bar a:focus-visible,.sml--inline a.is-current,.sml--bar a.is-current{opacity:1;color:inherit;background:rgba(255,255,255,.18)}
.sml--inline a.is-current,.sml--bar a.is-current{border-left-color:currentColor}
.sml--inline ol.sml__list,.sml--bar ol.sml__list{margin-top:.35rem;padding-top:.35rem;border-top:1px solid rgba(255,255,255,.3)}

/* La barre collante. Position fixe et non « sticky » : un constructeur de pages pose
   volontiers overflow:hidden sur la ligne qui entoure l'article, ce qui ferait échouer
   sticky sans le dire. L'espaceur rend la hauteur libérée, donc rien ne saute. */
.sml--bar{margin:0 0 1.5rem}
.sml--bar.is-stuck{position:fixed;left:0;right:0;margin:0;z-index:40;padding:0 .4rem .4rem;background:var(--sml-bg,#fff);box-shadow:0 4px 14px rgba(0,0,0,.13)}
.sml--bar.is-stuck .sml__box{border-top-width:0;border-radius:0 0 6px 6px}
.sml--bar.is-stuck ol.sml__list{max-height:calc(100vh - var(--sml-bar-h,3rem) - 4rem);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
/* Article entièrement remonté : la barre s'efface, comme la languette d'ordinateur. */
.sml--bar.is-past{opacity:0;pointer-events:none}
/* L'espaceur reste dans le flux en permanence, à hauteur nulle : c'est lui qui sert de
   repère pour savoir si le sommaire a été dépassé. En display:none il ne mesurerait rien
   — sa position vaudrait zéro — et la barre ne se collerait jamais. */
.sml__spacer{display:block;height:0}

/* Tiroir sur téléphone : légèrement translucide et flouté. Sur un écran étroit il
   empiète forcément sur le texte ; le laisser devinable dessous évite l'impression
   d'avoir perdu la page, sans rendre le sommaire lui-même illisible. */
.sml--rail.sml--mobile{background:color-mix(in srgb,var(--sml-bg,#fff) 92%,transparent);-webkit-backdrop-filter:blur(8px) saturate(1.15);backdrop-filter:blur(8px) saturate(1.15)}
.sml--rail.sml--mobile .sml__box{max-width:86vw}

@media (prefers-reduced-motion:reduce){.sml *{transition:none!important}}
@media print{.sml{display:none}}