/* =====================================================================
   SylphCloud — visuels produits & vignettes (100% CSS, aucun asset)
   ===================================================================== */

/* ============================ carte holo (TOPDECK) ============================ */
.art-holo{ position:absolute; inset:0; overflow:hidden;
  background:
    radial-gradient(130% 100% at 25% 12%, rgba(255,255,255,.16), transparent 55%),
    conic-gradient(from 210deg at 62% 38%, #232842, #3a2d63, #1c3a60, #45285c, #232842);
}
.art-holo::before{ content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(115deg, transparent 0 22px, rgba(255,255,255,.07) 22px 27px);
  mix-blend-mode:screen;
}
.art-holo .frame{ position:absolute; inset:7%; border-radius:10px; border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(160deg, rgba(255,255,255,.08), transparent 45%);
}
.art-holo .bolt{ position:absolute; left:50%; top:50%; width:44%; transform:translate(-50%,-52%) rotate(8deg); opacity:.55; color:#ffd76a; filter:drop-shadow(0 6px 18px rgba(255,175,46,.5)); }
.art-holo .name{ position:absolute; left:13%; top:11%; right:13%; display:flex; justify-content:space-between; gap:8px; font-family:var(--font-display); font-weight:800; color:#fff; font-size:clamp(8px,.9vw,12px); letter-spacing:.02em; }
.art-holo .name .hp{ color:#ffd76a; white-space:nowrap; }
.art-holo .cardfoot{ position:absolute; left:13%; bottom:10%; right:13%; display:flex; justify-content:space-between; gap:8px; font-size:clamp(6px,.65vw,9px); color:rgba(255,255,255,.55); font-family:'JetBrains Mono',ui-monospace,monospace; }

/* ============================ vignettes actus TOPDECK ============================ */
.art-news{ position:absolute; inset:0; overflow:hidden; }

/* booster pack */
.art-pack{ background:radial-gradient(120% 120% at 80% 0%, #232842, #141828 70%); }
.art-pack .pack{
  position:absolute; left:50%; top:54%; width:34%; aspect-ratio:3/4.4;
  transform:translate(-50%,-50%) rotate(-7deg);
  border-radius:7px;
  background:linear-gradient(165deg, #ffb13d 0%, #ff7a1a 46%, #e8483c 100%);
  box-shadow:0 18px 42px -14px rgba(0,0,0,.65);
}
.art-pack .pack::before, .art-pack .pack::after{
  content:""; position:absolute; left:0; right:0; height:9%;
  background:repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 4px, transparent 4px 8px), rgba(0,0,0,.12);
}
.art-pack .pack::before{ top:0; border-radius:7px 7px 0 0; }
.art-pack .pack::after{ bottom:0; border-radius:0 0 7px 7px; }
.art-pack .pack .shine{ position:absolute; inset:0; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.34) 44%, transparent 58%); border-radius:inherit; }
.art-pack .pack svg{ position:absolute; left:50%; top:50%; width:44%; transform:translate(-50%,-50%); color:#fff; filter:drop-shadow(0 3px 8px rgba(0,0,0,.35)); }
.art-pack .glowdot{ position:absolute; width:46%; height:46%; left:8%; bottom:-16%; border-radius:50%; background:radial-gradient(circle, rgba(255,122,26,.35), transparent 65%); }

/* pile de cartes (guide) */
.art-stack{ background:linear-gradient(160deg, #f7f2e9 0%, #eee5d4 100%); }
.art-stack .c{
  position:absolute; width:30%; aspect-ratio:3/4.2; border-radius:7px;
  background:#fff; border:1px solid #e2dac7;
  box-shadow:0 12px 28px -12px rgba(70,58,24,.38);
}
.art-stack .c::before{ content:""; position:absolute; inset:8%; border-radius:5px;
  background:conic-gradient(from 200deg at 60% 40%, #d9e4f5, #e8def4, #d4ecec, #e6e0f2, #d9e4f5); }
.art-stack .c1{ left:18%; top:20%; transform:rotate(-10deg); }
.art-stack .c2{ left:36%; top:26%; transform:rotate(2deg); }
.art-stack .c3{ left:54%; top:16%; transform:rotate(13deg); }

/* podium tournoi */
.art-podium{ background:radial-gradient(120% 130% at 20% 0%, #232842, #141828 72%); }
.art-podium i{ position:absolute; bottom:16%; border-radius:6px 6px 0 0; background:linear-gradient(180deg, #ffaf2e, #ff7a1a); }
.art-podium .p2{ left:24%; width:15%; height:26%; opacity:.75; }
.art-podium .p1{ left:42%; width:16%; height:40%; }
.art-podium .p3{ left:61%; width:15%; height:19%; opacity:.6; }
.art-podium::before{ content:""; position:absolute; left:10%; right:10%; bottom:16%; height:1px; background:rgba(255,255,255,.18); }
.art-podium::after{ content:""; position:absolute; inset:0;
  background:
    radial-gradient(2px 2px at 22% 28%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(2px 2px at 64% 18%, rgba(255,215,106,.9), transparent 60%),
    radial-gradient(1.6px 1.6px at 78% 38%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.6px 1.6px at 36% 12%, rgba(255,175,46,.8), transparent 60%),
    radial-gradient(2px 2px at 50% 30%, rgba(255,255,255,.5), transparent 60%);
}
.art-podium .star{ position:absolute; left:50%; bottom:58%; transform:translateX(-50%); width:13%; color:#ffd76a; filter:drop-shadow(0 4px 12px rgba(255,175,46,.6)); }

/* ============================ vignettes "captures de sites" ============================ */
.thumb{ position:absolute; inset:0; display:flex; flex-direction:column; gap:7%; padding:7% 8%; background:var(--t-bg); }
.thumb i{ display:block; }
.thumb .t-nav{ display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.thumb .t-nav .logo{ width:15px; height:15px; border-radius:5px; background:var(--t-acc); }
.thumb .t-nav .word{ width:34px; height:6px; border-radius:3px; background:var(--t-ink); opacity:.8; }
.thumb .t-nav .l{ width:20px; height:5px; border-radius:3px; background:var(--t-ink); opacity:.22; }
.thumb .t-nav .l:nth-of-type(3){ margin-left:auto; }
.thumb .t-nav .btn{ width:42px; height:15px; border-radius:999px; background:var(--t-acc); margin-left:6px; }
.thumb .t-hero{ flex:1; min-height:0; display:grid; grid-template-columns:1.35fr 1fr; gap:9%; align-items:center; }
.thumb .t-copy .b{ height:9px; border-radius:5px; background:var(--t-ink); }
.thumb .t-copy .b.b1{ width:92%; }
.thumb .t-copy .b.b2{ width:64%; margin-top:7px; }
.thumb .t-copy .s{ height:6px; border-radius:3px; background:var(--t-ink); opacity:.3; width:78%; margin-top:9px; }
.thumb .t-copy .cta{ width:54px; height:16px; border-radius:999px; background:var(--t-acc); margin-top:12px; }
.thumb .t-art{ height:86%; border-radius:9px; background:var(--t-art); position:relative; overflow:hidden; }
.thumb .t-art::before{ content:""; position:absolute; width:42%; aspect-ratio:3/4.2; border-radius:5px; left:18%; top:18%; transform:rotate(-8deg); background:rgba(255,255,255,.85); box-shadow:0 6px 16px rgba(0,0,0,.18); }
.thumb .t-art::after{ content:""; position:absolute; width:42%; aspect-ratio:3/4.2; border-radius:5px; left:42%; top:26%; transform:rotate(9deg); background:rgba(255,255,255,.65); box-shadow:0 6px 16px rgba(0,0,0,.14); }
.thumb .t-cards{ display:flex; gap:7px; flex:0 0 auto; }
.thumb .t-cards i{ flex:1; height:26px; border-radius:6px; background:var(--t-cell); border:1px solid var(--t-cell-b); }

/* ============================ aperçu vitrine (carte Solutions) ============================ */
.t-sylph{ --t-bg:linear-gradient(165deg, #F2F6FD, #E5EDFA); --t-ink:#1E3A6E; --t-acc:#2D54A6;
  --t-art:linear-gradient(150deg, var(--blue-500), var(--violet)); --t-cell:#fff; --t-cell-b:#DFE8F6; }