:root { color-scheme: light dark; --bg: #fff; --text: #1a1e33; --muted: #5d6480; --line: #dfe2ec; --card: #f5f6fa; --accent: #1f3cff; --on-accent: #fff; }
@media (prefers-color-scheme: dark) { :root { --bg: #0c0e13; --text: #eef0f6; --muted: #a3a9bd; --line: #2a2e3a; --card: #161922; --accent: #7d8cff; --on-accent: #0c0e13; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { max-width: 720px; margin: 0 auto; padding: 24px 16px 40px; }
h1 { font-size: 28px; line-height: 1.2; margin: 0 0 4px; }
h2 { font-size: 19px; margin: 28px 0 6px; }
p, ul { margin: 0 0 12px; }
ul { padding-left: 20px; }
a { color: inherit; }
.date, footer { color: var(--muted); font-size: 14px; }
footer { margin-top: 36px; padding-top: 14px; border-top: 1px solid var(--line); }

/* Page d'assistance : contact, thèmes et questions dépliables (sans script). */
.lead { font-size: 17px; color: var(--muted); }
.contact-card { display: flex; flex-direction: column; gap: 2px; margin: 18px 0 22px; padding: 16px 18px; border-radius: 16px; background: var(--accent); color: var(--on-accent); text-decoration: none; }
.contact-title { font-weight: 700; font-size: 17px; }
.contact-mail { opacity: .9; font-size: 15px; overflow-wrap: anywhere; }
.topics { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.topics a { padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; text-decoration: none; }
.topics a:hover, .topics a:focus-visible { border-color: var(--accent); color: var(--accent); }
.faq { scroll-margin-top: 16px; }
.faq h2 { margin-top: 32px; }
.faq details { margin: 0 0 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.faq summary { position: relative; padding: 13px 44px 13px 16px; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 22px; font-weight: 400; color: var(--muted); }
.faq details[open] summary::after { content: "−"; }
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 14px; }
.faq details > :not(summary) { margin: 0; padding: 0 16px 14px; }
.faq details ol { padding-left: 36px; }
.faq code { font-size: 14px; }