/* Une page d'assistance, pas une plaquette : lisible d'abord, à la couleur de la marque. */
:root {
  --bg: #faf9f7; --ink: #17171a; --ink-soft: #55555c; --ink-faint: #8a8a92;
  --brand: #c02128; --carte: #fff; --bord: #e7e5e1;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #131316; --ink: #f4f3f1; --ink-soft: #b4b3b8; --ink-faint: #85848b;
          --carte: #1c1c20; --bord: #2c2c32; }
}
* { box-sizing: border-box; }
body {
  margin: 0; padding: 0 22px 72px; background: var(--bg); color: var(--ink);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}
.enveloppe { max-width: 42rem; margin: 0 auto; }
header { padding: 56px 0 8px; }
.marque { display: flex; align-items: center; gap: 12px; }
.marque svg { flex: none; }
.nom { font-size: 15px; letter-spacing: .01em; }
.nom b { display: block; font-size: 27px; letter-spacing: -.02em; line-height: 1.1; }
.nom span { color: var(--ink-faint); }
h1 { font-size: 31px; letter-spacing: -.02em; margin: 34px 0 6px; }
h2 { font-size: 20px; margin: 44px 0 10px; letter-spacing: -.01em; }
h3 { font-size: 17.5px; margin: 28px 0 6px; letter-spacing: -.005em; }
code {
  font-size: .92em; padding: 1px 5px; border-radius: 5px;
  background: var(--carte); border: 1px solid var(--bord);
}
p, li { color: var(--ink-soft); }
li { margin: 6px 0; }
a { color: var(--brand); }
.chapeau { font-size: 19px; color: var(--ink-soft); margin-top: 0; }
.carte {
  background: var(--carte); border: 1px solid var(--bord); border-radius: 14px;
  padding: 18px 20px; margin: 22px 0;
}
.carte p:first-child { margin-top: 0; } .carte p:last-child { margin-bottom: 0; }
footer {
  margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--bord);
  font-size: 14px; color: var(--ink-faint);
}
footer a { color: var(--ink-faint); }