/* hom — pages publiques : téléchargement et invitations. */
:root {
  --bg: #F4EFE6;
  --surface: #FBF8F2;
  --text: #1F1D1A;
  --muted: #6E675C;
  --line: rgba(31, 29, 26, 0.12);
  --amber: #D9984A;
  --btn: #1F1D1A;
  --on-btn: #F4EFE6;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171613;
    --surface: #211F1B;
    --text: #F4EFE6;
    --muted: #A39C8F;
    --line: rgba(244, 239, 230, 0.1);
    --btn: #F4EFE6;
    --on-btn: #1F1D1A;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wrap { width: min(1040px, 100%); margin: 0 auto; padding: 0 20px; }
header { padding: 28px 0; }
.lockup { height: 40px; width: auto; display: block; }
.lockup .word { stroke: var(--text); }

.hero { padding: 56px 0 40px; display: grid; gap: 28px; }
h1 { font-size: clamp(38px, 7vw, 64px); line-height: 1.05; letter-spacing: -0.02em; font-weight: 700; max-width: 14ch; }
.lead { font-size: clamp(18px, 2.4vw, 21px); color: var(--muted); max-width: 40ch; }
.rang { width: min(420px, 90%); height: auto; color: var(--text); opacity: 0.9; }

.download { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px; border-radius: 999px;
  background: var(--btn); color: var(--on-btn);
  font-weight: 650; font-size: 17px; text-decoration: none;
}
.btn:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.btn svg { width: 20px; height: 20px; }
.btn.ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line); }
.note { color: var(--muted); font-size: 15px; }
.soon { padding: 18px 22px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); max-width: 560px; }
.soon strong { display: block; margin-bottom: 4px; }

section { padding: 56px 0; border-top: 1px solid var(--line); }
h2 { font-size: clamp(26px, 4vw, 34px); letter-spacing: -0.01em; margin-bottom: 28px; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; list-style: none; padding: 0; counter-reset: step; }
.steps li { background: var(--surface); border-radius: 22px; padding: 24px; box-shadow: inset 0 0 0 1px var(--line); counter-increment: step; }
.steps li::before {
  content: counter(step); display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%; margin-bottom: 14px;
  background: var(--btn); color: var(--on-btn); font-weight: 700; font-size: 16px;
}
.steps h3 { font-size: 19px; margin-bottom: 6px; }
.steps p { color: var(--muted); font-size: 16px; }

.mac { display: grid; gap: 14px; max-width: 680px; }
.mac ol { padding-left: 22px; display: grid; gap: 8px; }
.mac li::marker { color: var(--muted); }
kbd, .path { font: inherit; font-weight: 600; }

.promise { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; }
.promise h3 { font-size: 19px; margin-bottom: 6px; }
.promise p { color: var(--muted); font-size: 16px; }

footer { padding: 40px 0 56px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; display: flex; align-items: center; gap: 12px; }
footer svg { width: 28px; height: 28px; flex: none; }
[hidden] { display: none !important; }

/* --- Page d'invitation --- */
.invite { padding: 40px 0 56px; display: grid; gap: 28px; max-width: 640px; }
.invite h1 { max-width: 18ch; }
.choice { display: grid; gap: 16px; }
.choice .soon { max-width: none; display: grid; gap: 12px; }
.choice ol { padding-left: 22px; display: grid; gap: 6px; color: var(--muted); }
.copied { color: var(--muted); font-size: 15px; }
.link-box {
  width: 100%; font: 14px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--bg); color: var(--text); resize: none; overflow-wrap: anywhere;
}

/* --- Commande à copier --- */
.command {
  margin: 4px 0; padding: 14px 16px; border-radius: 14px;
  background: #1F1D1A; color: #F4EFE6; overflow-x: auto;
  font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}