/* /tiklive-games.php — page de vente de TikLive Games (11/10/2026). DA du site : surfaces sans bord, grande ombre,
   filet de lumière en haut ; rose / cyan / violet ; titres Unbounded. Préfixe tg-. */
@font-face { font-family: Unbounded; src: url(/assets/fonts/unbounded.woff2) format("woff2"); font-weight: 200 900; font-display: swap; }
.tlx { --tg-surface: linear-gradient(160deg, #17122a, #0e0c18); --tg-ombre: 0 20px 44px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07);
  --tg-rose: #ff2d6b; --tg-cyan: #25f4ee; --tg-violet: #9000ff; --tg-or: #ffd24a; --tg-titre: Unbounded, 'Bricolage Grotesque', system-ui, sans-serif; }
.tg-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: 24px; box-sizing: border-box; }
.tg-hero { padding: 64px 0 28px; background: radial-gradient(900px 520px at 80% -10%, rgba(144,0,255,.22), transparent 60%),
  radial-gradient(700px 480px at -10% 40%, rgba(255,45,107,.14), transparent 60%); }
.tg-hero-in { display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; align-items: center; }
.tg-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; font: 700 12.5px var(--tg-titre);
  letter-spacing: .02em; background: rgba(255,255,255,.07); color: #fff; }
.tg-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--tg-cyan); box-shadow: 0 0 12px var(--tg-cyan); }
.tg-h1 { font: 800 clamp(34px, 5.4vw, 64px)/1.04 var(--tg-titre); margin: 18px 0 16px; color: #fff; }
.tg-h1 span { background: linear-gradient(100deg, var(--tg-cyan), var(--tg-rose)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 22px rgba(255,45,107,.25)); }
.tg-lead { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; color: rgba(255,255,255,.78); margin: 0 0 14px; max-width: 620px; }
.tg-prix { font: 700 15px var(--tg-titre); color: var(--tg-or); margin: 0 0 22px; }
.tg-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.tg-btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 999px; font: 800 15px var(--tg-titre); color: #fff;
  text-decoration: none; background: linear-gradient(135deg, var(--tg-rose), var(--tg-violet)); box-shadow: 0 12px 30px rgba(255,45,107,.42);
  transition: transform .15s, box-shadow .15s; }
.tg-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(255,45,107,.58); }
.tg-btn2 { display: inline-flex; align-items: center; padding: 15px 24px; border-radius: 999px; font-weight: 700; color: #fff; text-decoration: none;
  background: rgba(255,255,255,.08); transition: background .15s, transform .15s; }
.tg-btn2:hover { background: rgba(255,255,255,.14); transform: translateY(-2px); }
.tg-fine { font-size: 13px; color: rgba(255,255,255,.5); margin: 12px 0 0; }
.tg-hero-img img { width: 100%; height: auto; border-radius: 22px; box-shadow: var(--tg-ombre); display: block; }
.tg-bandeau { margin: 8px 0 0; padding: 16px 20px; border-radius: 18px; background: rgba(255,210,74,.09); color: #ffe7a0; line-height: 1.5;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.tg-faits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 30px; }
.tg-fait { padding: 20px; border-radius: 20px; background: var(--tg-surface); box-shadow: var(--tg-ombre); display: flex; flex-direction: column; gap: 6px; }
.tg-fait b { font: 700 15px var(--tg-titre); color: #fff; }
.tg-fait span { color: rgba(255,255,255,.68); font-size: 14.5px; line-height: 1.5; }
.tg-h2 { font: 800 clamp(26px, 3.4vw, 40px)/1.15 var(--tg-titre); color: #fff; margin: 64px 0 8px; }
.tg-h3 { font: 800 clamp(20px, 2.2vw, 26px)/1.2 var(--tg-titre); color: #fff; margin: 0 0 8px; }
.tg-sous { color: rgba(255,255,255,.68); margin: 0 0 24px; }
.tg-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.tg-jeu { border-radius: 22px; overflow: hidden; background: var(--tg-surface); box-shadow: var(--tg-ombre); display: flex; flex-direction: column;
  transition: transform .18s; }
.tg-jeu:hover { transform: translateY(-3px); }
.tg-jeu img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.tg-jeu-in { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tg-jeu h3 { font: 800 18px var(--tg-titre); color: #fff; margin: 0; }
.tg-jeu p { margin: 0; color: rgba(255,255,255,.72); line-height: 1.55; font-size: 15px; flex: 1; }
.tg-jeu-bas { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 6px; }
.tg-jeu-bas b { font: 800 20px var(--tg-titre); color: var(--tg-or); }
.tg-jeu-bas span { font-size: 13px; color: rgba(255,255,255,.55); text-align: right; }
.tg-etapes { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: e; }
.tg-etapes li { counter-increment: e; padding: 22px 20px; border-radius: 20px; background: var(--tg-surface); box-shadow: var(--tg-ombre); display: flex;
  flex-direction: column; gap: 6px; }
.tg-etapes li::before { content: counter(e); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 800 15px var(--tg-titre);
  background: linear-gradient(135deg, var(--tg-cyan), var(--tg-rose)); color: #07080d; margin-bottom: 6px; }
.tg-etapes b { font: 700 15px var(--tg-titre); color: #fff; }
.tg-etapes span { color: rgba(255,255,255,.68); font-size: 14.5px; line-height: 1.5; }
.tg-premium { margin-top: 56px; padding: 26px 28px; border-radius: 22px; background: linear-gradient(135deg, rgba(37,244,238,.10), rgba(144,0,255,.12));
  box-shadow: var(--tg-ombre); }
.tg-premium p { margin: 0; color: rgba(255,255,255,.78); line-height: 1.6; }
.tg-faq { padding-bottom: 72px; }
.tg-faq details { margin-top: 12px; border-radius: 18px; background: var(--tg-surface); box-shadow: var(--tg-ombre); padding: 0 22px; }
.tg-faq summary { cursor: pointer; padding: 18px 0; font: 700 16px var(--tg-titre); color: #fff; list-style: none; }
.tg-faq summary::-webkit-details-marker { display: none; }
.tg-faq summary::after { content: '+'; float: right; color: var(--tg-cyan); }
.tg-faq details[open] summary::after { content: '−'; }
.tg-faq details p { margin: 0 0 18px; color: rgba(255,255,255,.74); line-height: 1.6; }
.tg-liens { margin-top: 26px; }
.tg-liens a { color: var(--tg-cyan); font-weight: 700; }
@media (max-width: 960px) {
  .tg-hero-in { grid-template-columns: 1fr; }
  .tg-faits, .tg-etapes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .tg-wrap { padding-inline: 16px; }
  .tg-faits, .tg-etapes { grid-template-columns: 1fr; }
  .tg-grille { grid-template-columns: 1fr; }
  .tg-btn, .tg-btn2 { width: 100%; justify-content: center; }
}