/* ---------- style flash / cartoon (accueil + tokens) ---------- */
:root{ --pop:"Lilita One","Arial Black",Impact,sans-serif; --y:#FFD83D; --k:#14121C; --pk:#FF5FA2; --cy:#3DDCFF; --lm:#B6F23C; }
.pop{ font-family:var(--pop); font-weight:400; letter-spacing:.01em; }
.hero h1.pop{ font-size:clamp(2.4rem,6.2vw,4.4rem); line-height:1.02; text-shadow:4px 4px 0 #000; }
.hero h1 .w{ display:inline-block; padding:0 .18em; border:3px solid var(--k); border-radius:12px; color:var(--k); text-shadow:none; box-shadow:5px 5px 0 #000; margin:0 .04em .12em 0; }
.hero h1 .w1{ background:var(--y); transform:rotate(-3deg); } .hero h1 .w2{ background:var(--pk); transform:rotate(2deg); } .hero h1 .w3{ background:var(--cy); transform:rotate(-1.5deg); }
.btn-pop{ background:var(--y)!important; color:var(--k)!important; border:3px solid var(--k)!important; box-shadow:5px 5px 0 #F5F1E8; font-family:var(--pop); font-size:1.05rem; letter-spacing:.02em; transition:transform .15s, box-shadow .15s; }
.btn-pop:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 #F5F1E8; }
.burst{ position:absolute; top:-6px; right:2%; z-index:5; width:150px; aspect-ratio:1; display:grid; place-items:center; text-align:center; background:var(--pk); color:var(--k); font-family:var(--pop); line-height:1.05; font-size:1.05rem; transform:rotate(12deg); animation:wig 3s ease-in-out infinite;
  clip-path:polygon(50% 0%,61% 15%,79% 8%,82% 27%,100% 32%,90% 50%,100% 68%,82% 73%,79% 92%,61% 85%,50% 100%,39% 85%,21% 92%,18% 73%,0% 68%,10% 50%,0% 32%,18% 27%,21% 8%,39% 15%); }
.burst b{ display:block; font-size:1.7rem; }
@keyframes wig{ 0%,100%{ transform:rotate(10deg) scale(1); } 50%{ transform:rotate(15deg) scale(1.07); } }
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:34px; }
.pillar{ position:relative; display:flex; flex-direction:column; gap:10px; padding:26px 24px 24px; border:3px solid var(--k); border-radius:20px; color:var(--k); box-shadow:8px 8px 0 #F5F1E8; transition:transform .15s, box-shadow .15s; }
.pillar:hover{ transform:translate(-3px,-3px) rotate(-.6deg); box-shadow:11px 11px 0 #F5F1E8; }
.pillar:nth-child(1){ background:var(--y); } .pillar:nth-child(2){ background:var(--pk); } .pillar:nth-child(3){ background:var(--cy); }
.pillar .big{ font-size:2.6rem; line-height:1; }
.pillar h3{ font-family:var(--pop); font-weight:400; font-size:1.7rem; margin:0; color:var(--k); }
.pillar p{ margin:0; color:#2a2536; font-weight:500; }
.pillar .price{ margin-top:auto; font-family:var(--pop); font-size:1.15rem; }
.pillar .go{ align-self:flex-start; font-family:var(--pop); background:var(--k); color:#fff; border-radius:999px; padding:6px 16px; text-decoration:none; }
.tok-wrap h2.pop{ font-size:clamp(2rem,4.5vw,3rem); text-shadow:3px 3px 0 #000; }
.deal{ display:flex; flex-wrap:wrap; gap:14px; margin:22px 0 6px; }
.deal>span{ font-family:var(--pop); font-size:1.25rem; color:var(--k); background:var(--lm); border:3px solid var(--k); border-radius:999px; padding:6px 18px; box-shadow:4px 4px 0 #000; transform:rotate(-1.5deg); }
.deal>span:nth-child(2){ background:var(--y); transform:rotate(1.5deg); }
.tok-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:26px; }
.tok{ border:3px solid var(--k); border-radius:18px; padding:12px; color:var(--k); box-shadow:6px 6px 0 #000; text-align:center; transition:transform .15s; }
.tok:hover{ transform:translateY(-4px) rotate(1deg); }
.tok.c0{ background:var(--y); } .tok.c1{ background:var(--cy); } .tok.c2{ background:var(--pk); } .tok.c3{ background:var(--lm); }
.tok-img{ aspect-ratio:63/88; border-radius:14px; background:rgba(255,255,255,.35); display:grid; place-items:center; overflow:hidden; }
.tok-img.soon{ background:#fff; border:3px dashed #999; }
.tok-img img{ width:100%; height:100%; object-fit:cover; }
.tok-img.soon::after{ content:"?"; font-family:var(--pop); font-size:3.4rem; color:#bbb; }
.tok h3{ font-family:var(--pop); font-weight:400; font-size:1.15rem; margin:10px 0 2px; color:var(--k); }
.tok .tp{ display:inline-block; font-family:var(--pop); background:var(--k); color:#fff; border-radius:999px; padding:2px 14px; }
@media (max-width:900px){ .pillars{ grid-template-columns:1fr; } .tok-grid{ grid-template-columns:repeat(2,1fr); } .burst{ width:112px; font-size:.85rem; } .burst b{ font-size:1.25rem; } }

.cbadge{ position:absolute; top:-8px; left:-6px; z-index:3; background:#14121C; color:#FFD83D; font-family:"Lilita One","Arial Black",Impact,sans-serif; font-size:.72rem; letter-spacing:.06em; padding:2px 9px; border-radius:6px; border:2px solid #FFD83D; transform:rotate(-6deg); }
.tok{ position:relative; }
.deal>span:nth-child(3){ background:#3DDCFF; transform:rotate(-1deg); }

/* ---------- v23 : liens du titre, bouton catalogue cartoon, éventail de tokens ---------- */
.hero h1 a.w{ text-decoration:none; cursor:pointer; transition:transform .15s, box-shadow .15s; }
.hero h1 a.w:hover, .hero h1 a.w:focus-visible{ transform:translate(-2px,-3px) rotate(0deg); box-shadow:7px 8px 0 #000; }
.btn-pop-cy{ background:var(--cy)!important; }
.fan-card.tokcard{ padding:0; background:#14121C; border:3px solid var(--k); box-shadow:6px 6px 0 #000; display:block; }
.fan-card.tokcard::after{ display:none; }
.fan-card.tokcard img{ display:block; width:100%; height:100%; object-fit:cover; }

/* v24 : écureuil au centre, éléphant bien visible, grenouille en retrait */
.fan-card.tokcard:nth-child(1){ filter:brightness(.62); }
.fan-card.tokcard:nth-child(4){ z-index:2; filter:none; }
.burst small{ display:block; font-size:.78rem; margin-top:2px; }

/* page « Pour les créateurs » — en construction */
.wip{ max-width:680px; margin:0 auto; text-align:center; padding:40px 28px; border:3px solid var(--k); border-radius:24px; background:var(--pk); color:var(--k); box-shadow:10px 10px 0 #F5F1E8; }
.wip-ico{ font-size:3.2rem; line-height:1; margin-bottom:10px; }
.wip .eyebrow{ color:var(--k); }
.wip h1.pop{ font-size:clamp(2rem,5vw,3.2rem); margin:.2em 0 .4em; color:var(--k); }
.wip p{ color:#2a2536; font-weight:500; max-width:48ch; margin:0 auto 10px; }
.wip-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:22px; }
.wip-msgr{ background:#fff !important; }
.wip .btn-pop{ box-shadow:5px 5px 0 #14121C; }

/* ============================================================
   v30 — ACCUEIL : fond spatial « distorsion » + pub Spécial Commander
   ============================================================ */
body.home{ background:#04040A; }
#warp{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.space-glow{ position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(700px 480px at 62% 34%, rgba(80,140,255,.16), transparent 70%),
    radial-gradient(900px 600px at 12% 90%, rgba(179,107,255,.14), transparent 70%),
    radial-gradient(600px 420px at 95% 80%, rgba(255,111,181,.08), transparent 70%); }
body.home main, body.home .site-footer{ position:relative; z-index:1; }
body.home .site-header{ background:rgba(4,4,10,.72); }
body.home .hero{ background:none; }

.promo-wrap{ padding:6px 0 38px; }
.promo-ad{ position:relative; display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:18px 30px;
  padding:26px 30px; border:3px solid var(--k); border-radius:22px; text-decoration:none; color:var(--k);
  background:linear-gradient(115deg, var(--y) 0%, #FFE98A 55%, var(--y) 100%); box-shadow:8px 8px 0 #F5F1E8; transform:rotate(-.6deg);
  transition:transform .15s, box-shadow .15s; }
.promo-ad:hover{ transform:rotate(0) translate(-2px,-2px); box-shadow:11px 11px 0 #F5F1E8; }
.pa-tag{ position:absolute; top:-15px; left:24px; background:var(--pk); color:var(--k); font-family:var(--pop); font-size:.95rem; padding:3px 14px; border:3px solid var(--k); border-radius:999px; transform:rotate(-3deg); }
.pa-main{ display:flex; flex-direction:column; gap:3px; }
.pa-k{ font-weight:700; font-size:.92rem; text-transform:uppercase; letter-spacing:.08em; }
.pa-title{ font-family:var(--pop); font-size:clamp(1.7rem,3.6vw,2.6rem); line-height:1; }
.pa-sub{ font-weight:600; font-size:.92rem; color:#3a3420; }
.pa-price{ display:flex; align-items:baseline; gap:10px; font-family:var(--pop); }
.pa-price s{ font-size:1.4rem; opacity:.55; }
.pa-price b{ font-weight:400; font-size:clamp(2.8rem,6vw,4.2rem); line-height:1; text-shadow:3px 3px 0 #fff; }
.pa-go{ font-family:var(--pop); font-size:1.15rem; background:var(--k); color:var(--y); padding:12px 20px; border-radius:999px; white-space:nowrap; }
@media (max-width:820px){
  .promo-ad{ grid-template-columns:1fr; text-align:left; padding:26px 20px 22px; }
  .pa-go{ justify-self:start; }
}