:root { --bg: #111015; --card: #1c1a22; --rose: #ff2e88; --jaune: #ffe600; --txt: #f4f1f6; --gris: #9a95a3; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--txt); font: 17px/1.55 -apple-system, "Helvetica Neue", Arial, sans-serif; }
main { max-width: 720px; margin: 0 auto; padding: 40px 22px 60px; }
.logo { display: block; width: 150px; margin: 0 auto 10px; }
h1 { font: 900 64px/1 Impact, "Arial Black", sans-serif; text-align: center; color: var(--rose); text-shadow: 5px 5px 0 var(--jaune);
  transform: rotate(-3deg); letter-spacing: 2px; margin: 10px 0 18px; }
.accroche { text-align: center; font-size: 20px; margin-bottom: 34px; }
h2 { font: 900 26px Impact, "Arial Black", sans-serif; color: var(--jaune); margin: 34px 0 12px; letter-spacing: 1px; }
.etapes { display: grid; gap: 12px; }
.etape { background: var(--card); border-radius: 16px; padding: 16px 18px; }
.etape b { color: var(--rose); }
.stores { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 30px 0 10px; }
.btn { display: inline-block; background: var(--rose); color: #111; font-weight: 800; text-decoration: none; border-radius: 14px; padding: 14px 22px; }
.btn.creux { background: none; border: 2px solid var(--jaune); color: var(--jaune); }
.bientot { text-align: center; color: var(--gris); font-size: 14px; }
.code { font: 900 54px Impact, sans-serif; letter-spacing: 10px; color: var(--jaune); text-align: center; margin: 14px 0; }
footer { text-align: center; color: var(--gris); font-size: 14px; margin-top: 50px; }
footer a, .texte a { color: var(--gris); }
.texte p, .texte li { margin-bottom: 10px; }
.texte ul { padding-left: 22px; }
.langues { text-align: center; font-size: 13px; color: var(--gris); margin-bottom: 18px; line-height: 1.9; }
.langues a { color: var(--gris); text-decoration: none; }
.langues a:hover { color: var(--txt); text-decoration: underline; }
.langues b { color: var(--jaune); }