@font-face { font-family: "Gloock"; src: url("img/gloock.ttf"); font-display: swap; }
:root { --vert: #2F7A4F; --encre: #14130F; --creme: #FAF8F4; --doux: #5C584E; --gris: #8A8375; --papier: #E8E3DA; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--creme); color: var(--encre); font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
a { color: var(--vert); }
.page { max-width: 760px; margin: 0 auto; padding: 0 20px 60px; }
header { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; }
header img { height: 34px; }
header nav a { margin-left: 18px; font-size: 15px; color: var(--doux); text-decoration: none; }
h1, h2 { font-family: "Gloock", Georgia, serif; font-weight: 400; letter-spacing: -0.3px; line-height: 1.15; }
h1 { font-size: 44px; margin: 36px 0 12px; }
h2 { font-size: 26px; margin: 40px 0 8px; }
h3 { font-size: 18px; margin: 26px 0 4px; }
.sous { font-size: 19px; color: var(--doux); margin: 0 0 26px; }
.demo { width: 100%; max-width: 520px; border-radius: 20px; display: block; margin: 10px 0 8px; }
.legende { font-size: 13px; color: var(--gris); }
.bouton { display: inline-block; background: var(--encre); color: var(--creme); text-decoration: none; padding: 14px 22px; border-radius: 14px; font-weight: 600; margin-top: 18px; }
.etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 14px; }
.etape { background: #fff; border: 1px solid var(--papier); border-radius: 16px; padding: 16px; }
.etape b { display: block; margin-bottom: 4px; }
.doc p, .doc li { color: #2b2a26; }
.a-completer { background: #FFF3C4; padding: 0 4px; border-radius: 4px; }
footer { border-top: 1px solid var(--papier); margin-top: 50px; padding-top: 18px; font-size: 13px; color: var(--gris); }
footer a { color: var(--gris); margin-right: 14px; }
@media (max-width: 520px) { h1 { font-size: 34px; } header nav a { margin-left: 10px; font-size: 14px; } }