/* Mise en page du manuel : un sommaire qui reste sous les yeux, une colonne de
 * lecture, et rien d'autre. */

main.manuel-grille{
  display:grid;grid-template-columns:1fr;gap:28px;
  max-width:1180px;margin:0 auto;padding:24px 20px 80px;
}
@media(min-width:960px){
  main.manuel-grille{grid-template-columns:250px minmax(0,1fr);gap:44px}
}

/* --------------------------------------------------------------- sommaire */
.sommaire-lateral{
  position:sticky;top:78px;align-self:start;max-height:calc(100vh - 100px);
  display:flex;flex-direction:column;min-width:0;
}
.sommaire-lateral .titre-sommaire{
  margin:0 0 10px;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent);font-weight:700;
}
.sommaire-lateral nav{
  display:flex;flex-direction:column;gap:1px;overflow-y:auto;padding-right:4px;
  border-left:1px solid var(--trait);scrollbar-width:thin;
}
.sommaire-lateral a{
  font-size:13.5px;line-height:1.4;padding:7px 12px;text-decoration:none;
  color:var(--encre-douce);border-left:2px solid transparent;margin-left:-1px;
  transition:color var(--transition),border-color var(--transition),background var(--transition);
}
.sommaire-lateral a:hover{color:var(--accent-vif);background:var(--accent-clair)}
.sommaire-lateral a.sous{padding-left:26px;font-size:12.5px}
.sommaire-lateral a.courant{
  color:var(--accent-vif);border-left-color:var(--accent);font-weight:600;
  background:var(--accent-clair);
}

/* Sur petit écran, le sommaire se replie au-dessus du texte plutôt que de
   manger la moitié de la page. */
@media(max-width:959px){
  .sommaire-lateral{
    position:static;max-height:none;background:var(--carte);border:1px solid var(--trait);
    border-radius:var(--arrondi);padding:14px 16px;box-shadow:var(--ombre);
  }
  .sommaire-lateral nav{
    flex-direction:row;flex-wrap:wrap;gap:6px;border-left:none;overflow:visible;
  }
  .sommaire-lateral a{
    border:1px solid var(--trait);border-radius:99px;padding:5px 11px;margin:0;
    background:var(--papier);
  }
  .sommaire-lateral a.sous{padding-left:11px}
  .sommaire-lateral a.courant{border-color:var(--accent)}
}

/* ---------------------------------------------------------------- lecture */
article.manuel{max-width:760px;min-width:0}
article.manuel h2{
  font-family:"Iowan Old Style",Georgia,serif;font-size:23px;font-weight:600;
  margin:38px 0 10px;letter-spacing:0;text-transform:none;color:var(--encre);
  padding-bottom:6px;border-bottom:1px solid var(--trait);scroll-margin-top:80px;
}
article.manuel h2:first-child{margin-top:0}
article.manuel h3{
  font-size:16px;margin:22px 0 6px;font-weight:600;color:var(--accent-vif);
  scroll-margin-top:80px;
}
article.manuel p{margin:10px 0}
article.manuel li{margin:6px 0}
article.manuel ul,article.manuel ol{padding-left:22px}
article.manuel .grille-infos{margin:16px 0}
article.manuel .chiffre .quoi{margin-top:6px;line-height:1.45}

table.reglages{margin:14px 0;background:var(--carte);border:1px solid var(--trait);
  border-radius:var(--arrondi);overflow:hidden;display:block;overflow-x:auto}
table.reglages td{white-space:normal;vertical-align:top}
table.reglages td:first-child{font-weight:600;white-space:nowrap;width:150px}
table.reglages tr:last-child td{border-bottom:none}

.encadre{
  background:var(--accent-clair);border:1px solid var(--trait);border-left:3px solid var(--accent);
  border-radius:var(--arrondi);padding:16px 18px;margin:24px 0;
}
.encadre h3{margin-top:0;color:var(--accent-vif)}
.encadre p:last-child{margin-bottom:0}