:root{
    --or:#ffd66e; --or-clair:#ffe6a4; --or-fonce:#8a5608;
    --rose:#ffb2e2; --rose-fonce:#a83b7c; --framboise:#ff6fa5;
    --violet-1:#4a2f8f; --violet-2:#2a1a5e; --violet-3:#150c33;
    --ivoire:#fff7ec; --texte:#efe7ff; --texte-doux:#b9aee0;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    font-family:'Nunito',system-ui,sans-serif;color:var(--texte);
    background:var(--violet-3);line-height:1.55;overflow-x:hidden;position:relative;
  }
  /* fond dégradé fixe, derrière tout, sans background-attachment (janky sur mobile) */
  body::before{content:'';position:fixed;inset:0;z-index:-1;
    background:radial-gradient(120% 90% at 78% 0%, #4a2f8f 0%, #2a1a5e 42%, #150c33 100%);}
  .baloo{font-family:'Baloo 2',system-ui,sans-serif;font-weight:800}
  a{color:inherit;text-decoration:none}
  .wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 22px}
  img{max-width:100%;display:block}

  /* ---- étoiles de fond ---- */
  .stars{position:fixed;inset:0;z-index:0;pointer-events:none}
  .stars i{position:absolute;background:#fff;border-radius:50%;opacity:.5;animation:tw 4s ease-in-out infinite}
  @keyframes tw{50%{opacity:.15}}

  /* ---- en-tête ---- */
  header{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;
    padding:18px 22px;max-width:1120px;margin:0 auto}
  .brand{display:flex;align-items:center;gap:11px;font-size:20px;letter-spacing:.5px}
  .brand img{width:40px;height:40px;border-radius:11px;box-shadow:0 4px 14px #0007}
  .brand span .a{color:var(--or)}.brand span .f{color:var(--rose)}
  nav{display:flex;gap:24px;font-weight:800;font-size:14px;color:var(--texte-doux)}
  nav a:hover{color:#fff}
  @media(max-width:620px){nav{display:none}}

  /* ---- hero ---- */
  .hero{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:30px;
    align-items:center;padding:44px 0 70px}
  .hero-logo{width:min(430px,86%);filter:drop-shadow(0 14px 30px #0006)}
  .hero-tag{font-size:23px;font-weight:800;color:#f3ecff;margin:22px 0 6px;max-width:440px}
  .hero-sub{font-size:16px;color:var(--texte-doux);max-width:430px;margin-bottom:26px}
  .lion-halo{position:relative;display:flex;justify-content:center;align-items:flex-start}
  .lion-halo::before{content:'';position:absolute;top:6%;width:74%;aspect-ratio:1;border-radius:50%;
    background:radial-gradient(circle,#ffd66e66,transparent 62%);filter:blur(20px);animation:pulse 4s ease-in-out infinite}
  @keyframes pulse{50%{transform:scale(1.1);opacity:.8}}
  .lion-halo img.totem{width:min(420px,92%);position:relative;filter:drop-shadow(0 20px 44px #ffb43033) drop-shadow(0 30px 60px #0008);animation:float 5.5s ease-in-out infinite}
  @keyframes float{50%{transform:translateY(-14px)}}
  /* graines mignonnes qui flottent autour du lion */
  .hero-seed{position:absolute;width:78px;z-index:3;filter:drop-shadow(0 8px 14px #0007);animation:bob 3.4s ease-in-out infinite}
  .hero-seed.s1{left:-6%;top:28%;width:90px;animation-delay:.1s}
  .hero-seed.s2{right:-4%;top:16%;width:72px;animation-delay:.7s}
  .hero-seed.s3{right:2%;bottom:6%;width:84px;animation-delay:1.2s}
  .hero-seed.s4{left:2%;bottom:12%;width:66px;animation-delay:1.7s}
  @keyframes bob{50%{transform:translateY(-10px) rotate(-4deg)}}
  @media(max-width:820px){.hero{grid-template-columns:1fr;text-align:center;padding:20px 0 40px}
    .hero-tag,.hero-sub{margin-left:auto;margin-right:auto}.hero-logo{margin:0 auto}
    .lion-halo{order:-1;margin-bottom:6px}.stores{justify-content:center}
    .hero-seed.s2{right:2%}.hero-seed.s1{left:2%}}
  @media(max-width:480px){.hero-seed{display:none}}

  /* ---- boutons stores ---- */
  .stores{display:flex;gap:14px;flex-wrap:wrap}
  .store{display:flex;align-items:center;gap:11px;background:linear-gradient(180deg,#2b1c58,#1c1240);
    border:1px solid #ffffff26;border-radius:16px;padding:11px 20px;transition:.15s;box-shadow:0 6px 18px #0005}
  .store:hover{transform:translateY(-2px);border-color:#ffd66e88}
  .store svg{width:26px;height:26px;fill:#fff;flex:0 0 auto}
  .store div{line-height:1.15}
  .store .small{font-size:10px;color:var(--texte-doux);font-weight:700}
  .store .big{font-size:15px;font-weight:800;color:#fff}
  .badge-soon{display:inline-block;margin-top:16px;font-size:12px;font-weight:800;color:#0c0726;
    background:var(--or);padding:5px 13px;border-radius:20px;letter-spacing:.4px}

  /* ---- sections ---- */
  section{position:relative;z-index:2;padding:56px 0}
  .h2{font-size:32px;text-align:center;margin-bottom:8px}
  .h2 .a{color:var(--or)}.h2 .f{color:var(--rose)}
  .lead{text-align:center;color:var(--texte-doux);max-width:560px;margin:0 auto 38px}

  .feat{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  @media(max-width:780px){.feat{grid-template-columns:1fr}}
  .card{background:linear-gradient(180deg,#ffffff14,#ffffff07);border:1px solid #ffffff1f;
    border-radius:22px;padding:26px 22px;text-align:center;box-shadow:inset 0 1px 0 #ffffff1a}
  .card .ic{font-size:40px;margin-bottom:12px}
  .card h3{font-size:19px;margin-bottom:7px;color:#fff}
  .card p{font-size:14.5px;color:var(--texte-doux)}

  /* ---- vedette des graines ---- */
  .seeds-showcase{display:flex;justify-content:center;gap:min(3vw,34px);flex-wrap:wrap;margin-top:8px}
  .seed-item{display:flex;flex-direction:column;align-items:center;gap:8px;width:112px}
  .seed-item img{width:96px;filter:drop-shadow(0 10px 16px #0007);transition:transform .2s;animation:bob 3.4s ease-in-out infinite}
  .seed-item:nth-child(2n) img{animation-delay:.6s}
  .seed-item:nth-child(3n) img{animation-delay:1.1s}
  .seed-item:hover img{transform:translateY(-8px) scale(1.08)}
  .seed-item b{font-size:13px;font-weight:800;color:var(--texte)}
  @media(max-width:560px){.seed-item{width:88px}.seed-item img{width:74px}}

  /* ---- bande hors-ligne ---- */
  .band{background:linear-gradient(100deg,#33236e,#1e1447);border:1px solid #ffffff1f;border-radius:26px;
    padding:34px;text-align:center;box-shadow:0 20px 50px #0006}
  .band h3{font-size:24px;margin-bottom:8px}.band p{color:var(--texte-doux);max-width:600px;margin:0 auto}

  /* ---- communauté ---- */
  .social{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:10px}
  .soc{display:flex;align-items:center;gap:9px;background:#ffffff14;border:1px solid #ffffff24;
    border-radius:14px;padding:11px 18px;font-weight:800;font-size:14px;transition:.15s}
  .soc:hover{background:#ffffff22;transform:translateY(-2px)}

  /* ---- pied de page ---- */
  footer{position:relative;z-index:2;border-top:1px solid #ffffff1a;margin-top:30px;padding:34px 0 44px}
  .foot-grid{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
  .foot-links{display:flex;gap:20px;flex-wrap:wrap;font-size:13.5px;font-weight:700;color:var(--texte-doux)}
  .foot-links a:hover{color:#fff}
  .foot-brand{display:flex;align-items:center;gap:10px;font-size:15px}
  .foot-brand img{width:34px;height:34px;border-radius:9px}
  .copyright{margin-top:18px;font-size:12.5px;color:#8f84b8}
  .copyright b{color:var(--or)}

/* sélecteur de langue segmenté : la langue courante est mise en avant */
.langsw{display:inline-flex;border:1px solid #ffffff33;border-radius:10px;overflow:hidden;align-self:center}
.langsw a{padding:4px 10px;font-size:12px;font-weight:800;color:#b9aee0;line-height:1.4}
.langsw a.on{background:var(--or);color:#3a2470}
.langsw a:not(.on):hover{background:#ffffff14;color:#fff}

/* Bouton "Jouer maintenant" du héros : la démo jouable dans le navigateur */
.play-cta{display:inline-flex;flex-direction:column;align-items:center;gap:2px;
  margin:6px 0 18px;padding:15px 40px;border-radius:999px;text-decoration:none;
  font-weight:800;font-size:21px;letter-spacing:.3px;color:#5a3a06;
  background:linear-gradient(180deg,#fff3c4,#ffd66e 42%,#ff9f43);
  box-shadow:0 1px 0 #fff9 inset,0 14px 30px -8px rgba(255,159,67,.7);
  transition:transform .12s ease, box-shadow .2s ease;}
.play-cta span{font-family:'Nunito',system-ui,sans-serif;font-weight:800;
  font-size:11px;letter-spacing:.5px;color:#7a5410;text-transform:none;}
.play-cta:hover{transform:translateY(-2px);box-shadow:0 1px 0 #fff9 inset,0 18px 36px -8px rgba(255,159,67,.85);}
.play-cta:focus-visible{outline:3px solid #2c1f6e;outline-offset:3px;}