:root { --fond: #f7f8f7; --texte: #18211f; --doux: #55625e; --accent: #0b3d5c; --carte: #fff; --bord: #d9dfdc; }
@media (prefers-color-scheme: dark) { :root { --fond: #111614; --texte: #e8edeb; --doux: #a3b0ab; --accent: #5fb3e6; --carte: #1a211f; --bord: #2c3633; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 17px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
header { padding: 12px 16px; background: var(--accent); color: #fff; }
main { max-width: 640px; margin: 0 auto; padding: 24px 16px 32px; }
h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 6px; }
h2 { font-size: 1.15rem; margin: 28px 0 8px; }
.intro, .details, footer { color: var(--doux); }
.details { font-size: 14px; }
.atouts { padding-left: 20px; }
.atouts li { margin: 6px 0; }
.bouton { display: block; text-align: center; padding: 16px; border-radius: 12px; background: var(--accent); color: #fff; font-weight: 700; text-decoration: none; margin-top: 20px; }
.note { padding: 12px; border-radius: 10px; background: var(--carte); border: 1px solid var(--bord); font-size: 15px; }
code { word-break: break-all; font-size: 13px; }
section { margin-top: 28px; border-top: 1px solid var(--bord); }
footer { max-width: 640px; margin: 0 auto; padding: 0 16px 32px; font-size: 14px; }
footer a { color: var(--doux); }