/* LE SOMMAIRE DE GAUCHE, comme celui du manuel : les rubriques de la page,
   celle qu'on lit allumée. Il tient dans la marge laissée par la colonne de
   960 px, et ne paraît donc que sur un écran assez large pour l'accueillir. */
.sommaire-page { display: none; }

@media (min-width: 1400px) {
  .sommaire-page {
    display: block;
    position: fixed;
    top: 24px;
    left: 20px;
    z-index: 15;
    width: min(240px, calc((100vw - 960px) / 2 - 40px));
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 16px 12px;
    background: var(--papier);
    border: 1px solid var(--bordure);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    font-size: 14px;
  }

  /* Le sommaire couvre le coin du lien de retour, et sa marque en reprend le
     role : le lien s'efface, mais seulement si le sommaire a bien ete bati. */
  .avec-sommaire .retour { display: none; }
}

.sommaire-page .marque {
  display: block;
  margin: 0 8px 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bordure);
  font-size: 16px;
  font-weight: 700;
  color: var(--encre);
  text-decoration: none;
}
.sommaire-page ul { margin: 0; padding: 0; list-style: none; }
.sommaire-page li { margin: 2px 0; }
.sommaire-page a.rubrique {
  display: block;
  padding: 5px 8px;
  border-radius: 6px;
  color: var(--encre);
  text-decoration: none;
  line-height: 1.3;
}
.sommaire-page a.rubrique:hover { background: var(--fond); }
.sommaire-page a.rubrique[aria-current="true"] {
  background: var(--fond);
  color: var(--bleu);
  font-weight: 600;
}
.sommaire-page .date { display: block; font-size: 12px; font-weight: 400; color: var(--gris); }