/* Vitrine Kodamori : couleurs, polices et espacements de l'application (docs/brand/identity.md), en clair. */
@font-face {
  font-family: 'Klee One';
  src: url('fonts/klee-one-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('fonts/nunito-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('fonts/nunito-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
/* Japonais : sous-ensembles de Zen Maru Gothic couvrant les caractères de la page (pas de tiers). */
@font-face {
  font-family: 'Zen Maru Gothic';
  font-weight: 400;
  font-display: swap;
  src: url('fonts/zen/zen-maru-gothic-60-400-normal.woff2') format('woff2');
  unicode-range: U+2227,U+26a0,U+2713,U+301f,U+4ff8,U+5239,U+526a,U+54fa,U+5740,U+5937,U+5993,U+59fb,U+5a3c,U+5c41,U+6028,U+626e,U+646f,U+647a,U+64b0,U+64e2,U+65a7,U+66fe,U+6727,U+6955,U+6bef,U+6f23,U+724c,U+767c,U+7a83,U+7ac4,U+7b67,U+8000,U+8471,U+8513,U+8599,U+86db,U+8718,U+87f2,U+88f3,U+8ad2,U+8e2a,U+8fa3,U+95a5,U+9798,U+9910,U+9957,U+9bab,U+9c3b,U+9daf,U+ff95;
}
@font-face {
  font-family: 'Zen Maru Gothic';
  font-weight: 400;
  font-display: swap;
  src: url('fonts/zen/zen-maru-gothic-81-400-normal.woff2') format('woff2');
  unicode-range: U+2010,U+2502,U+25b6,U+4f3a,U+514b,U+5265,U+52c3,U+5339,U+53ec,U+54c0,U+55b0,U+5854,U+5b8f,U+5cb3,U+5e84,U+60da,U+6247,U+6249,U+628a,U+62cd,U+65ac,U+6838,U+690e,U+6cf0,U+6f02,U+6f2c,U+6f70,U+708a,U+7434,U+75be,U+77ef,U+7c60,U+7c98,U+7d1b,U+7e2b,U+80a5,U+81e3,U+820c,U+8210,U+8475,U+862d,U+8650,U+8997,U+906d,U+91c8,U+9700,U+9727,U+9df9,U+ff3a,U+ff9a;
}
@font-face {
  font-family: 'Zen Maru Gothic';
  font-weight: 400;
  font-display: swap;
  src: url('fonts/zen/zen-maru-gothic-88-400-normal.woff2') format('woff2');
  unicode-range: U+25bd,U+4e59,U+4ec1,U+4ff3,U+515a,U+518a,U+525b,U+5375,U+552f,U+57a3,U+5b9c,U+5c3d,U+5e3d,U+5e7b,U+5f0a,U+6094,U+6458,U+654f,U+67f3,U+6b8a,U+6bd2,U+6c37,U+6ce1,U+6e56,U+6e7f,U+6ed1,U+6ede,U+6f0f,U+70ad,U+7267,U+7363,U+786c,U+7a42,U+7db2,U+7f85,U+8178,U+829d,U+8896,U+8c5a,U+8cb0,U+8ce2,U+8ed2,U+9047,U+9177,U+970a,U+9ea6,U+ff1b,U+ff31,U+ff39,U+ff80;
}
@font-face {
  font-family: 'Zen Maru Gothic';
  font-weight: 400;
  font-display: swap;
  src: url('fonts/zen/zen-maru-gothic-107-400-normal.woff2') format('woff2');
  unicode-range: U+23,U+3c,U+2192,U+4e45,U+4efb,U+4f50,U+4f8b,U+4fc2,U+5024,U+5150,U+5272,U+5370,U+53bb,U+542b,U+56db,U+56e3,U+57ce,U+5bc4,U+5bcc,U+5f71,U+60aa,U+6238,U+6280,U+629c,U+6539,U+66ff,U+670d,U+677e-677f,U+6839,U+69cb,U+6b4c,U+6bb5,U+6e96,U+6f14,U+72ec,U+7389,U+7814,U+79cb,U+79d1,U+79fb,U+7a0e,U+7d0d,U+85e4,U+8d64,U+9632,U+96e2,U+9805,U+99ac,U+ff1e;
}
@font-face {
  font-family: 'Zen Maru Gothic';
  font-weight: 400;
  font-display: swap;
  src: url('fonts/zen/zen-maru-gothic-108-400-normal.woff2') format('woff2');
  unicode-range: U+2605-2606,U+301c,U+4e57,U+4fee,U+5065,U+52df,U+533b,U+5357,U+57df,U+58eb,U+58f0,U+591c,U+592a-592b,U+5948,U+5b85,U+5d0e,U+5ea7,U+5ff5,U+6025,U+63a1,U+63a5,U+63db,U+643a,U+65bd,U+671d,U+68ee,U+6982,U+6b73,U+6bd4,U+6d88,U+7570,U+7b11,U+7d76,U+8077,U+8217,U+8c37,U+8c61,U+8cc7,U+8d85,U+901f,U+962a,U+9802,U+9806,U+9854,U+98f2,U+9928,U+99c5,U+9ed2;
}
@font-face {
  font-family: 'Zen Maru Gothic';
  font-weight: 400;
  font-display: swap;
  src: url('fonts/zen/zen-maru-gothic-109-400-normal.woff2') format('woff2');
  unicode-range: U+266a,U+4f11,U+533a,U+5343,U+534a,U+53cd,U+5404,U+56f3,U+5b57-5b58,U+5bae,U+5c4a,U+5e0c,U+5e2f,U+5eab,U+5f35,U+5f79,U+614b,U+6226,U+629e,U+65c5,U+6625,U+6751,U+6821,U+6b69,U+6b8b,U+6bce,U+6c42,U+706b,U+7c21,U+7cfb,U+805e,U+80b2,U+82b8,U+843d,U+8853,U+88c5,U+8a3c,U+8a66,U+8d8a,U+8fba,U+9069,U+91cf,U+9752,U+975e,U+9999,U+ff0f-ff10,U+ff14-ff15;
}
@font-face {
  font-family: 'Zen Maru Gothic';
  font-weight: 400;
  font-display: swap;
  src: url('fonts/zen/zen-maru-gothic-113-400-normal.woff2') format('woff2');
  unicode-range: U+26,U+5f,U+2026,U+203b,U+4e09,U+4eac,U+4ed5,U+4fa1,U+5143,U+5199,U+5207,U+539f,U+53e3,U+53f7,U+5411,U+5473,U+5546,U+55b6,U+5929,U+597d,U+5bb9,U+5c11,U+5c4b,U+5ddd,U+5f97,U+5fc5,U+6295,U+6301,U+6307,U+671b,U+76f8,U+78ba,U+795e,U+7d30,U+7d39,U+7d9a,U+89e3,U+8a00,U+8a73,U+8a8d,U+8a9e,U+8aad,U+8abf,U+8cea,U+8eca,U+8ffd,U+904b,U+9650,U+ff11-ff12;
}
@font-face {
  font-family: 'Zen Maru Gothic';
  font-weight: 400;
  font-display: swap;
  src: url('fonts/zen/zen-maru-gothic-114-400-normal.woff2') format('woff2');
  unicode-range: U+3e,U+3005,U+4e0d,U+4e88,U+4ecb,U+4ee3,U+4ef6,U+4fdd,U+4fe1,U+500b,U+50cf,U+5186,U+5316,U+53d7,U+540c,U+544a,U+54e1,U+5728,U+58f2,U+5973,U+5b89,U+5c71,U+5e02,U+5e97,U+5f15,U+5fc3,U+5fdc,U+601d,U+611b,U+611f,U+671f,U+6728,U+6765,U+683c,U+6b21,U+6ce8,U+6d3b,U+6d77,U+7530,U+7740,U+7acb,U+7d50,U+826f,U+8f09,U+8fbc,U+9001,U+9053,U+91ce,U+9762,U+98df;
}
@font-face {
  font-family: 'Zen Maru Gothic';
  font-weight: 400;
  font-display: swap;
  src: url('fonts/zen/zen-maru-gothic-116-400-normal.woff2') format('woff2');
  unicode-range: U+a9,U+3010-3011,U+30e2,U+4e0b,U+4eca,U+4ed6,U+4ed8,U+4f53,U+4f5c,U+4f7f,U+53d6,U+540d,U+54c1,U+5730,U+5916,U+5b50,U+5c0f,U+5f8c,U+624b,U+6570,U+6587,U+6599,U+691c,U+696d,U+6cd5,U+7269,U+7279,U+7406,U+767a-767b,U+77e5,U+7d04,U+7d22,U+8005,U+80fd,U+81ea,U+8868,U+8981,U+89a7,U+901a,U+9023,U+90e8,U+91d1,U+9332,U+958b,U+96c6,U+9ad8,U+ff1a,U+ff1f;
}
@font-face {
  font-family: 'Zen Maru Gothic';
  font-weight: 400;
  font-display: swap;
  src: url('fonts/zen/zen-maru-gothic-117-400-normal.woff2') format('woff2');
  unicode-range: U+4e,U+a0,U+3000,U+300c-300d,U+4e00,U+4e0a,U+4e2d,U+4e8b,U+4eba,U+4f1a,U+5165,U+5168,U+5185,U+51fa,U+5206,U+5229,U+524d,U+52d5,U+5408,U+554f,U+5831,U+5834,U+5927,U+5b9a,U+5e74,U+5f0f,U+60c5,U+65b0,U+65b9,U+6642,U+6700,U+672c,U+682a,U+6b63,U+6c17,U+7121,U+751f,U+7528,U+753b,U+76ee,U+793e,U+884c,U+898b,U+8a18,U+9593,U+95a2,U+ff01,U+ff08-ff09;
}
@font-face {
  font-family: 'Zen Maru Gothic';
  font-weight: 400;
  font-display: swap;
  src: url('fonts/zen/zen-maru-gothic-118-400-normal.woff2') format('woff2');
  unicode-range: U+21-22,U+27-2a,U+2c-3b,U+3f,U+41-4d,U+4f-5d,U+61-7b,U+7d,U+ab,U+ae,U+b2-b3,U+b7,U+bb,U+c9,U+cd,U+d6,U+d8,U+dc,U+e0-e5,U+e7-ed,U+ef,U+f1-f4,U+f6,U+f8,U+fa,U+fc-fd,U+103,U+14d,U+1b0,U+300-301,U+1ebf,U+1ec7,U+2013-2014,U+201c-201d,U+2039-203a,U+203c,U+2048-2049,U+2113,U+2122,U+65e5,U+6708,U+70b9;
}
@font-face {
  font-family: 'Zen Maru Gothic';
  font-weight: 400;
  font-display: swap;
  src: url('fonts/zen/zen-maru-gothic-119-400-normal.woff2') format('woff2');
  unicode-range: U+20,U+2027,U+3001-3002,U+3041-307f,U+3081-308f,U+3091-3093,U+3099-309a,U+309d-309e,U+30a1-30e1,U+30e3-30ed,U+30ef-30f0,U+30f2-30f4,U+30fb-30fe,U+ff0c,U+ff0e;
}
@font-face {
  font-family: 'Zen Maru Gothic';
  font-weight: 400;
  font-display: swap;
  src: url('fonts/zen/zen-maru-gothic-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  --bg: #f6f1e4;
  --surface: #fffdf7;
  --text: #2f3a2f;
  --muted: #5f6a5a;
  --border: #e3dccb;
  --accent: #5b7f4a;
  --accent-hover: #4f7040; /* plus foncé : le texte blanc garde un contraste AA */
  --accent-soft: #e4ecd9;
  --accent-text: #4a6a3c;
  --forest: #2f4a3a;
  --mist: #cfe3e0;
  --sun: #e8b04b;
  --sun-text: #8a6114;
  --bark: #7a5c3e;
  --leaf-deep: #3f5e33;
  --on-accent: #ffffff;
  --shadow: 0 6px 24px rgb(47 74 58 / 0.08);
  --shadow-lg: 0 24px 60px rgb(47 74 58 / 0.18);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --ja: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Yu Gothic', 'Noto Sans JP', sans-serif;
  color-scheme: light; /* la marque est papier et aquarelle : la vitrine reste claire */
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.6 'Nunito', system-ui, sans-serif;
  overflow-x: hidden;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-5);
}

h1,
h2,
h3 {
  font-family: 'Klee One', 'Nunito', serif;
  font-weight: 600;
  color: var(--forest);
  line-height: 1.25;
  margin: 0 0 var(--space-4);
}

h1 {
  font-size: clamp(36px, 5.5vw, 60px);
}

h2 {
  font-size: clamp(28px, 3.6vw, 40px);
}

h3 {
  font-size: 21px;
  margin-bottom: var(--space-2);
}

p {
  margin: 0 0 var(--space-4);
}

a {
  color: var(--accent-text);
}

[lang='ja'] {
  font-family: var(--ja);
}

rt {
  font-size: 0.55em;
  color: var(--muted);
}

.nobr {
  white-space: nowrap;
}

.muted {
  color: var(--muted);
}

a:focus-visible,
.button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 3px;
}

/* --- Boutons --- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--space-3) var(--space-5);
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 16px rgb(91 127 74 / 0.3);
}

.button:hover {
  background: var(--accent-hover);
}

.button.small {
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  font-size: 15px;
  box-shadow: none;
}

.button.big {
  min-height: 56px;
  padding: var(--space-4) var(--space-6);
  font-size: 18px;
}

.button.secondary {
  background: var(--surface);
  color: var(--accent-text);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.button.secondary:hover {
  background: var(--accent-soft);
}

.link-arrow {
  display: inline-block;
  padding: var(--space-3) 0;
  font-weight: 700;
  text-decoration: none;
}

/* --- En-tête --- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgb(246 241 228 / 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.topbar-inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: 72px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  font-family: 'Klee One', serif;
  font-weight: 600;
  font-size: 22px;
  color: var(--forest);
  min-height: 44px;
}

.logo img {
  border-radius: 10px;
}

.logo-ja {
  font-size: 14px;
  color: var(--muted);
}

.nav {
  display: none;
  gap: var(--space-5);
  margin-left: auto;
}

.nav a {
  display: inline-block;
  padding: var(--space-3) 0;
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
}

.nav a:hover {
  color: var(--accent-text);
}

.topbar .button {
  margin-left: auto;
}

/* --- Premier écran --- */
.hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-8) 0 var(--space-9);
  background:
    radial-gradient(circle at 85% 20%, rgb(232 176 75 / 0.18), transparent 40%),
    radial-gradient(circle at 10% 90%, rgb(207 227 224 / 0.9), transparent 45%),
    linear-gradient(180deg, var(--bg), #eef3e6);
}

.hero-grid {
  position: relative;
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

.pill {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: 700;
  font-size: 14px;
}

.hl {
  color: var(--accent-text);
  background: linear-gradient(180deg, transparent 62%, rgb(232 176 75 / 0.35) 62%);
}

.lead {
  font-size: 20px;
  max-width: 34em;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin: var(--space-6) 0;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}

.chips li {
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 15px;
}

/* Lucioles : la série de jours, en décor. */
.fireflies i {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 12px 4px rgb(232 176 75 / 0.55);
  opacity: 0.8;
}

.fireflies i:nth-child(1) {
  top: 18%;
  left: 8%;
}
.fireflies i:nth-child(2) {
  top: 70%;
  left: 46%;
}
.fireflies i:nth-child(3) {
  top: 12%;
  left: 58%;
}
.fireflies i:nth-child(4) {
  top: 82%;
  left: 88%;
}
.fireflies i:nth-child(5) {
  top: 40%;
  left: 96%;
}
.fireflies i:nth-child(6) {
  top: 55%;
  left: 3%;
}

/* --- Téléphone : le lecteur de l'app, reproduit en HTML --- */
.phone-stage {
  position: relative;
  display: flex;
  justify-content: center;
  padding: var(--space-5) 0;
}

.phone {
  width: 300px;
  max-width: 100%;
  padding: var(--space-3);
  border-radius: 44px;
  background: var(--forest);
  box-shadow: var(--shadow-lg);
  transform: rotate(-2deg);
}

.phone-screen {
  border-radius: 34px;
  background: var(--bg);
  padding: var(--space-4) var(--space-3) var(--space-5);
  min-height: 560px;
}

.app-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.app-title {
  font-family: 'Klee One', serif;
  font-weight: 600;
  color: var(--forest);
}

.app-badge {
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 700;
}

.app-card,
.app-quiz {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}

.app-card p {
  font-size: 16px;
  line-height: 2.1;
  margin: 0;
  word-break: auto-phrase;
}

.app-story-title {
  font-weight: 700;
  color: var(--forest);
}

.app-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.app-play,
.app-ghost {
  padding: var(--space-2) var(--space-3);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.app-play {
  background: var(--accent);
  color: var(--on-accent);
}

.app-ghost {
  background: var(--accent-soft);
  color: var(--accent-text);
}

.app-q {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: var(--space-2);
}

.app-choice {
  display: block;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-top: var(--space-2);
  font-size: 15px;
}

.app-choice.ok {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: 700;
}

.float {
  position: absolute;
  z-index: 2;
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
}

.f1 {
  top: 6%;
  left: 0;
  color: var(--sun-text);
}
.f2 {
  top: 46%;
  right: 0;
  color: var(--accent-text);
}
.f3 {
  bottom: 8%;
  left: 4%;
  color: var(--forest);
}

/* --- Sections --- */
.section {
  padding: var(--space-9) 0;
}

.section.tinted {
  background: linear-gradient(180deg, #eef3e6, var(--bg));
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-text);
  margin-bottom: var(--space-2);
}

.section-lead {
  font-size: 19px;
  max-width: 40em;
}

.steps,
.game-grid,
.trust-grid,
.faq-grid,
.beta-cards {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.step,
.game-card,
.trust {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: var(--space-5);
  box-shadow: var(--shadow);
}

.step p,
.game-card p,
.trust p {
  margin: 0;
}

.step-n {
  position: absolute;
  top: calc(-1 * var(--space-4));
  left: var(--space-5);
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}

.mini {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 72px;
  padding: var(--space-3) var(--space-4);
  margin: var(--space-3) 0 var(--space-4);
  border-radius: 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 14px;
}

.mini span {
  color: var(--muted);
}

.reading {
  justify-content: space-between;
  font-size: 22px;
}

.reading span {
  color: var(--text);
}

.reading .mini-play {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 14px;
}

/* Graine, pousse, arbuste : les stades de la forêt de mots, dessinés en CSS. */
.sprouts,
.forest-strip {
  justify-content: space-around;
  align-items: flex-end;
}

.seed,
.sprout,
.sapling {
  position: relative;
  display: inline-block;
}

.seed {
  width: 20px;
  height: 12px;
  border-radius: 50% 50% 45% 45%;
  background: var(--bark);
}

.sprout {
  width: 3px;
  height: 34px;
  background: var(--accent);
}

.sprout::before,
.sprout::after,
.sapling::before,
.sapling::after {
  content: '';
  position: absolute;
}

.sprout::before,
.sprout::after {
  top: 2px;
  width: 14px;
  height: 9px;
  background: var(--accent);
  border-radius: 0 100% 0 100%;
}

.sprout::before {
  left: 3px;
}

.sprout::after {
  left: -14px;
  transform: scaleX(-1);
}

.sapling {
  width: 4px;
  height: 54px;
  background: var(--bark);
  border-radius: 2px;
}

.sapling::before {
  top: -16px;
  left: -16px;
  width: 36px;
  height: 30px;
  border-radius: 50%;
  background: var(--leaf-deep);
}

.sapling::after {
  top: -8px;
  left: -4px;
  width: 22px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
}

.forest-strip {
  display: flex;
  margin-top: var(--space-7);
  padding: var(--space-7) var(--space-4) var(--space-4);
  border-radius: 24px;
  background: linear-gradient(180deg, var(--mist), var(--accent-soft));
}

.game-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: var(--accent-soft);
  font-size: 28px;
  margin-bottom: var(--space-4);
}

.firefly-icon {
  background: rgb(232 176 75 / 0.2);
  color: var(--sun-text);
}

.story-grid {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

.story {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: var(--space-6);
  box-shadow: var(--shadow-lg);
}

.story p {
  font-size: 20px;
  line-height: 2.2;
  margin: 0 0 var(--space-2);
  word-break: auto-phrase;
}

.story-title {
  font-family: var(--ja);
  font-size: 24px;
}

.trust b {
  display: block;
  color: var(--forest);
  font-size: 18px;
  margin-bottom: var(--space-2);
}

/* --- Bêta --- */
.beta-band {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-7) var(--space-5);
  border-radius: 32px;
  background: linear-gradient(135deg, var(--forest), var(--leaf-deep));
  color: #f6f1e4;
  box-shadow: var(--shadow-lg);
}

.beta-band h2 {
  color: #ffffff;
}

.eyebrow.light {
  color: #e4ecd9;
}

.beta-cards {
  margin-top: 0;
}

.beta-card {
  background: var(--surface);
  color: var(--text);
  border-radius: 24px;
  padding: var(--space-5);
}

/* --- FAQ --- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

details.card summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--forest);
  min-height: 44px;
  padding: var(--space-4) var(--space-5);
}

details.card > p {
  margin: 0;
  padding: 0 var(--space-5) var(--space-5);
}

.faq-grid {
  align-items: start;
}

/* --- Pied de page --- */
.footer {
  padding: var(--space-7) 0;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.footer-inner {
  display: grid;
  gap: var(--space-4);
  align-items: center;
}

.footer p {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.footer p a {
  display: inline-block;
  padding-block: var(--space-3);
}

/* --- Mentions légales --- */
.legal {
  max-width: 760px;
  padding-top: var(--space-7);
  padding-bottom: var(--space-8);
}

.legal h2 {
  font-size: 24px;
  margin-top: var(--space-6);
}

/* --- Grands écrans --- */
@media (min-width: 720px) {
  .steps,
  .trust-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .beta-cards,
  .game-grid,
  .faq-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-inner {
    grid-template-columns: auto 1fr auto;
  }
}

@media (min-width: 980px) {
  .nav {
    display: flex;
  }

  .nav + .button {
    margin-left: 0;
  }

  .hero-grid,
  .story-grid {
    grid-template-columns: 1.1fr 0.9fr;
  }

  /* Le téléphone à droite, les bulles dans l'espace libre à sa gauche : elles ne cachent pas l'écran. */
  .phone-stage {
    justify-content: flex-end;
    padding-right: var(--space-6);
  }

  .f1 {
    top: 10%;
  }

  .f2 {
    top: 52%;
    right: -8px;
  }

  .f3 {
    bottom: 14%;
    left: 0;
  }

  .game-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .beta-band {
    grid-template-columns: 1fr 1.4fr;
    align-items: center;
    padding: var(--space-8);
  }
}

@media (max-width: 480px) {
  .float {
    display: none; /* sur petit téléphone, les bulles cacheraient l'aperçu */
  }

  .logo-ja {
    display: none;
  }

  .container {
    padding: 0 var(--space-4);
  }
}

/* --- Mouvement doux (jamais si l'utilisateur l'a désactivé) --- */
@media (prefers-reduced-motion: no-preference) {
  .fireflies i {
    animation: drift 7s ease-in-out infinite alternate;
  }

  .fireflies i:nth-child(2n) {
    animation-duration: 9s;
    animation-delay: -3s;
  }

  .fireflies i:nth-child(3n) {
    animation-duration: 11s;
    animation-delay: -5s;
  }

  .float {
    animation: bob 5s ease-in-out infinite alternate;
  }

  .f2 {
    animation-delay: -2s;
  }

  .f3 {
    animation-delay: -4s;
  }

  .button {
    transition: background 0.2s ease;
  }
}

@keyframes drift {
  from {
    transform: translate(0, 0);
    opacity: 0.35;
  }
  to {
    transform: translate(18px, -24px);
    opacity: 0.95;
  }
}

@keyframes bob {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-8px);
  }
}