/* Menu Quest — landing publique (menu-quest.com). Dossier autonome : rien n'est chargé hors de landing/.
 * Polices embarquées : Luckiest Guy (Apache 2.0) et Nunito (SIL OFL 1.1), licences dans assets/.
 * Valeurs reprises de src/styles/tokens.css (copiées, car ce dossier est publié seul). */
@font-face { font-family: "Luckiest Guy"; src: url("assets/luckiest-guy-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face {
  font-family: "Nunito"; src: url("assets/nunito-latin-wght.woff2") format("woff2"); font-weight: 200 1000; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito"; src: url("assets/nunito-latin-ext-wght.woff2") format("woff2"); font-weight: 200 1000; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+20A0-20C0;
}
:root {
  --cream: #fbf5ea; --paper: #fffdf8; --parchment: #f4e9d4; --line: #e8dcc6;
  --ink: #1e2a45; --ink-2: #45506b; --orange: #e8622a; --orange-d: #c44d19; --yellow: #f2b830;
  --radius-l: 24px; --shadow-s: 0 1px 2px rgb(30 42 69 / 8%), 0 2px 6px rgb(30 42 69 / 6%); --shadow-l: 0 10px 40px rgb(30 42 69 / 18%);
}
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--ink); font: 400 1rem/1.5 "Nunito", "Segoe UI", system-ui, sans-serif; overflow-x: hidden;
  background: radial-gradient(circle at 0% 0%, rgb(232 98 42 / 12%), transparent 35%), radial-gradient(circle at 100% 30%, rgb(242 184 48 / 14%), transparent 35%), var(--cream);
}
img { max-width: 100%; height: auto; }
h1, h2, h3, p, ul { margin: 0; }
.display { font-family: "Luckiest Guy", "Arial Rounded MT Bold", system-ui, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .01em; }
main { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

.nav { padding: 10px 24px; background: rgb(251 245 234 / 85%); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); font-size: 1.35rem; }
.brand img { mix-blend-mode: multiply; }
.brand b { color: var(--orange); font-weight: 400; }

.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; padding: 56px 0 40px; }
.eyebrow { font-weight: 900; color: var(--orange-d); text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
.hero h1 { font-size: clamp(2.3rem, 5vw, 3.9rem); line-height: 1.02; margin: 12px 0 18px; }
.hero h1 em { font-style: normal; color: var(--orange); display: inline-block; transform: rotate(-2deg); }
.lead { font-size: 1.15rem; color: var(--ink-2); max-width: 52ch; }
.soon { display: inline-block; margin-top: 24px; padding: 8px 18px; border-radius: 99px; background: var(--yellow); font-weight: 900; text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; }
.hero__box { width: 100%; border-radius: var(--radius-l); box-shadow: var(--shadow-l); transform: rotate(1.5deg); }

.band { padding: 60px 0 20px; }
.band h2, .cards h2 { line-height: 1.1; font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-bottom: 22px; }
.band--soft .lead b { color: var(--ink); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.steps article { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 22px 20px; box-shadow: var(--shadow-s); }
.steps h3 { font-weight: 900; font-size: 1.1rem; margin-bottom: 6px; padding-right: 36px; }
.steps p { color: var(--ink-2); font-size: .95rem; }
.n { position: absolute; top: 14px; right: 18px; font-family: "Luckiest Guy", sans-serif; font-size: 2.4rem; color: var(--parchment); }

.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 60px 0 20px; }
.cards__sample { justify-self: center; width: min(100%, 360px); border-radius: 16px; box-shadow: var(--shadow-l); transform: rotate(-2deg); }
.cats { display: flex; flex-wrap: wrap; gap: 14px; list-style: none; padding: 0; margin-top: 22px; }
.cats li { display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 800; color: var(--ink-2); }

.foot { display: flex; align-items: center; gap: 14px; max-width: 1100px; margin: 60px auto 0; padding: 28px 24px 40px; border-top: 1px solid var(--line); color: var(--ink-2); }
.foot img { mix-blend-mode: multiply; }

@media (max-width: 760px) {
  .hero, .cards { grid-template-columns: 1fr; gap: 28px; padding-top: 32px; }
  .steps { grid-template-columns: 1fr; }
}