/* Guide d'utilisation consultable depuis l'application. */

.aide-corps { display: grid; grid-template-columns: 282px 1fr; gap: 40px;
              max-width: 1180px; margin: 0 auto; padding: 30px 24px 70px; }

.aide-sommaire { position: sticky; top: 24px; align-self: start; max-height: calc(100vh - 60px);
                 overflow-y: auto; border-right: 1px solid var(--bord); padding-right: 18px; }
.aide-sommaire a { display: block; padding: 5px 0; font-size: 13.4px; color: var(--texte-doux);
                   text-decoration: none; border-left: 2px solid transparent; padding-left: 10px; }
.aide-sommaire a:hover { color: var(--ambre-clair); }
.aide-sommaire a.n1 { font-weight: 600; color: var(--texte); margin-top: 10px; }
.aide-sommaire a.n2 { padding-left: 24px; font-size: 12.6px; }
.aide-sommaire a.courant { color: var(--ambre-clair); border-left-color: var(--ambre); }

.aide-texte { max-width: 74ch; font-size: 15.2px; line-height: 1.68; }
.aide-texte h2 { font-size: 21px; color: var(--texte); margin: 36px 0 14px;
                 padding-bottom: 8px; border-bottom: 2px solid var(--ambre); }
.aide-texte h2:first-child { margin-top: 0; }
.aide-texte h3 { font-size: 16.5px; color: var(--ambre-clair); margin: 26px 0 9px; }
.aide-texte p { margin: 0 0 13px; color: #d6dfec; }
.aide-texte strong { color: var(--texte); }
.aide-texte code { font-family: 'Source Code Pro', monospace; font-size: 13px;
                   background: #0e1729; border: 1px solid var(--bord); border-radius: 4px;
                   padding: 1px 5px; color: var(--ambre-clair); }
.aide-texte pre { background: #0e1729; border: 1px solid var(--bord); border-radius: 8px;
                  padding: 14px 16px; overflow-x: auto; font-size: 12.8px; line-height: 1.5; }
.aide-texte pre code { background: none; border: none; padding: 0; color: var(--texte); }
.aide-texte table { width: 100%; border-collapse: collapse; margin: 14px 0 20px; font-size: 13.6px; }
.aide-texte th, .aide-texte td { border: 1px solid var(--bord); padding: 8px 11px;
                                 text-align: left; vertical-align: top; }
.aide-texte thead th { background: #16233a; color: var(--ambre-clair); }
.aide-texte ul, .aide-texte ol { padding-left: 22px; color: #d6dfec; }
.aide-texte li { margin-bottom: 6px; }

@media (max-width: 900px) {
  .aide-corps { grid-template-columns: 1fr; }
  .aide-sommaire { position: static; border-right: none; border-bottom: 1px solid var(--bord);
                   padding: 0 0 16px; max-height: none; }
}