:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 1.5rem 1.25rem 4rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: #1d1d1f;
  background: #ffffff;
  -webkit-text-size-adjust: 100%;
}
main { max-width: 44rem; margin: 0 auto; }
header.site { max-width: 44rem; margin: 0 auto 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid #d8d8dc; }
header.site .app { font-weight: 600; letter-spacing: .02em; }
header.site .op { color: #5c5c62; font-size: .92rem; }
h1 { font-size: 1.5rem; line-height: 1.3; margin: .5rem 0 .25rem; }
h2 { font-size: 1.1rem; margin: 2rem 0 .5rem; }
h3 { font-size: 1rem; margin: 1.25rem 0 .35rem; }
p, li { overflow-wrap: break-word; }
ul, ol { padding-left: 1.3rem; }
li { margin: .3rem 0; }
a { color: #0b57d0; }
code, .ref {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em;
  background: #f2f2f5;
  padding: .1em .35em;
  border-radius: 4px;
}
.maj { color: #5c5c62; font-size: .92rem; margin-top: 0; }
.encadre { border: 1px solid #d8d8dc; border-radius: 8px; padding: .9rem 1rem; margin: 1.25rem 0; background: #fafafa; }
.langue { border-top: 1px solid #d8d8dc; margin-top: 3.5rem; padding-top: 2rem; }
footer { max-width: 44rem; margin: 3rem auto 0; padding-top: 1rem; border-top: 1px solid #d8d8dc; color: #5c5c62; font-size: .9rem; }
footer a { color: #5c5c62; }
table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: .95rem; }
th, td { text-align: left; vertical-align: top; padding: .5rem .6rem; border-bottom: 1px solid #e3e3e7; }
th { font-weight: 600; }
@media (prefers-color-scheme: dark) {
  body { color: #e8e8ea; background: #131316; }
  header.site, .langue, footer, th, td { border-color: #33333a; }
  header.site .op, .maj, footer { color: #a0a0a8; }
  a { color: #7aa7ff; }
  code, .ref { background: #24242a; }
  .encadre { background: #1b1b20; border-color: #33333a; }
}
