:root {
  --bg: #0a0f1c;
  --bg-2: #101828;
  --card: #141d31;
  --card-2: #1a2540;
  --line: rgba(255, 255, 255, .08);
  --text: #eef2fb;
  --muted: #9aa6c2;
  --accent: #ffb020;
  --accent-2: #ff5a3c;
  --ok: #3ddc97;
  --warn: #ffcc4d;
  --bad: #ff5d6c;
  --radius: 18px;
  --display: 'Fredoka', system-ui, sans-serif;
  --body: 'Nunito', system-ui, sans-serif;
  --bronze: linear-gradient(135deg, #7a4a24, #c98a4b 45%, #6b3d1b);
  --argent: linear-gradient(135deg, #8d97a8, #e6ebf3 45%, #7c8698);
  --or: linear-gradient(135deg, #8a6410, #ffd76a 45%, #a6780f);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.05; margin: 0 0 .4em; letter-spacing: -.01em; }
h2 { font-size: clamp(2rem, 5vw, 3.4rem); }
p { margin: 0 0 1em; }
.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
.muted { color: var(--muted); }
.accent { color: var(--accent); }
.center { text-align: center; }
.eyebrow { font: 600 .78rem/1 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; display: inline-flex; gap: 8px; align-items: center; }
section { padding: 96px 0; }
.section-head { max-width: 680px; margin-bottom: 44px; }
.section-head.center { margin-inline: auto; }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border-radius: 999px; border: 0; cursor: pointer;
  font: 600 1rem/1 var(--display); text-decoration: none; color: #1b1203; background: linear-gradient(135deg, var(--accent), #ff8a1f); transition: transform .15s, box-shadow .15s, opacity .15s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -10px rgba(255, 160, 32, .6); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn.ghost { background: rgba(255, 255, 255, .06); color: var(--text); border: 1px solid var(--line); }
.btn.ghost:hover { background: rgba(255, 255, 255, .1); box-shadow: none; }
.btn.discord { background: #5865f2; color: #fff; }
.btn.small { padding: 9px 16px; font-size: .9rem; }
.btn.block { width: 100%; }
.btn small { font-weight: 500; opacity: .75; font-family: var(--body); }
.link { color: var(--accent); text-decoration: none; font-weight: 700; }
.link:hover { text-decoration: underline; }

/* En-tête */
.top { position: sticky; top: 0; z-index: 50; background: rgba(10, 15, 28, .78); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 24px; height: 68px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 700 1.25rem var(--display); letter-spacing: .04em; }
.logo-mark { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #1b1203; font-size: 1.1rem; }
.logo-mark img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { padding: 8px 14px; border-radius: 999px; text-decoration: none; color: var(--muted); font-weight: 700; font-size: .95rem; }
.nav a:hover, .nav a.on { color: var(--text); background: rgba(255, 255, 255, .06); }
.top-actions { display: flex; align-items: center; gap: 10px; }
.cart-btn { position: relative; }
.cart-count { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--accent-2); color: #fff; font: 700 .72rem/20px var(--body); text-align: center; }
.avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--card-2); }
.burger { display: none; background: none; border: 1px solid var(--line); color: var(--text); border-radius: 12px; width: 42px; height: 42px; font-size: 1.2rem; cursor: pointer; }
.announce { background: linear-gradient(90deg, var(--accent-2), var(--accent)); color: #1b1203; text-align: center; font-weight: 800; padding: 8px 16px; font-size: .9rem; }
@media (max-width: 900px) {
  .burger { display: block; }
  .nav { display: none; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; background: var(--bg-2); padding: 12px 16px 20px; border-bottom: 1px solid var(--line); }
  .nav.open { display: flex; }
  .top-actions .hide-sm { display: none; }
}

/* Héros */
.hero { position: relative; min-height: calc(100vh - 68px); display: grid; place-items: center; text-align: center; overflow: hidden; padding: 80px 0 60px; }
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hero-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(10, 15, 28, .35), rgba(10, 15, 28, .92) 75%), linear-gradient(transparent 60%, var(--bg)); }
.hero-bg.default { background: radial-gradient(circle at 20% 20%, rgba(255, 90, 60, .35), transparent 45%), radial-gradient(circle at 80% 30%, rgba(255, 176, 32, .25), transparent 40%), linear-gradient(180deg, #121a33, var(--bg)); }
.skyline { position: absolute; bottom: 0; left: 0; width: 100%; height: 42%; opacity: .55; }
.hero-inner { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(4rem, 15vw, 10rem); line-height: .9; margin: 0; letter-spacing: .02em; display: flex; justify-content: center; flex-wrap: wrap; gap: 0 .02em; }
.hero h1 span { display: inline-block; background: linear-gradient(180deg, #fff, #ffd98c); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 8px 30px rgba(255, 140, 30, .35)); animation: pop .7s cubic-bezier(.2, 1.4, .4, 1) backwards; }
.hero h1 .gap { width: .3em; }
.hero .sub-title { font: 600 clamp(1.1rem, 3vw, 1.6rem) var(--display); color: var(--accent); letter-spacing: .3em; text-transform: uppercase; margin-top: 4px; }
@keyframes pop { from { opacity: 0; transform: translateY(40px) scale(.8); } }
.hero .tagline { color: var(--muted); font-weight: 700; margin: 18px 0 28px; }
.live { display: inline-flex; align-items: center; gap: 12px; padding: 10px 20px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); margin-bottom: 28px; }
.live b { font: 700 1.6rem var(--display); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(61, 220, 151, .7); animation: pulse 2s infinite; }
.dot.off { background: var(--bad); animation: none; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(61, 220, 151, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0); } }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: -40px; position: relative; z-index: 2; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.stat small { display: block; font: 600 .72rem var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.stat b { display: block; font: 700 1.8rem var(--display); margin: 6px 0 2px; }
.stat span { color: var(--muted); font-size: .9rem; }
@media (max-width: 800px) { .stats { grid-template-columns: 1fr 1fr; } }

/* Étapes */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.step { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; position: relative; }
.step .num { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font: 700 1.3rem var(--display); background: rgba(255, 176, 32, .14); color: var(--accent); margin-bottom: 16px; }
.step .hint { font: 600 .72rem var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; display: block; }
.rp-note { margin-top: 24px; padding: 22px 26px; border-radius: var(--radius); background: linear-gradient(135deg, rgba(255, 176, 32, .1), rgba(255, 90, 60, .06)); border: 1px solid rgba(255, 176, 32, .2); }
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; } }

/* Métiers */
.jobs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.job { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; transition: transform .2s, border-color .2s; }
.job:hover { transform: translateY(-4px); border-color: rgba(255, 176, 32, .35); }
.job .tags { display: flex; gap: 6px; margin-bottom: 14px; }
.tag { font: 600 .7rem var(--display); letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .07); color: var(--muted); }
.tag.vip { background: rgba(255, 176, 32, .16); color: var(--accent); }
.job h3 { font-size: 1.45rem; }
.job .perk { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--line); color: var(--accent); font-weight: 700; font-size: .95rem; }
@media (max-width: 900px) { .jobs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .jobs { grid-template-columns: 1fr; } }

/* Cartes VIP */
.vip-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.vip-mini { border-radius: var(--radius); padding: 24px; border: 1px solid var(--line); background: var(--card); }
.vip-mini ul { list-style: none; padding: 0; margin: 14px 0 0; }
.vip-mini li { padding: 6px 0; border-top: 1px solid var(--line); font-weight: 700; font-size: .95rem; }
.vip-mini .price { font: 700 1.6rem var(--display); }
.plastic { aspect-ratio: 1.586; border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; justify-content: space-between; color: rgba(0, 0, 0, .75); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .5); position: relative; overflow: hidden; margin-bottom: 18px; }
.plastic::before { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .45) 45%, transparent 60%); transform: translateX(-100%); transition: transform .8s; }
.plastic:hover::before { transform: translateX(100%); }
.plastic.bronze { background: var(--bronze); color: rgba(255, 240, 225, .9); }
.plastic.argent { background: var(--argent); }
.plastic.or { background: var(--or); }
.plastic .row { display: flex; justify-content: space-between; align-items: center; font: 700 .85rem var(--display); letter-spacing: .14em; }
.plastic .chip { width: 38px; height: 28px; border-radius: 6px; background: linear-gradient(135deg, #f5e2a0, #b8913a); }
.plastic .holder { font: 600 1rem var(--display); letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 900px) { .vip-cards { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

/* Discord */
.discord-box { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: center; background: linear-gradient(135deg, #2b2f7a, #1a1d4a); border-radius: 28px; padding: 48px; border: 1px solid rgba(88, 101, 242, .4); }
.channels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.channel { background: rgba(255, 255, 255, .07); border-radius: 14px; padding: 14px 16px; }
.channel b { display: block; font-family: var(--display); }
.channel span { color: #c4c9ff; font-size: .9rem; }
.links3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
.linkcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; text-decoration: none; display: block; transition: border-color .2s; }
.linkcard:hover { border-color: rgba(255, 176, 32, .4); }
.linkcard b { font-family: var(--display); font-size: 1.15rem; display: block; margin-bottom: 4px; }
@media (max-width: 800px) { .discord-box { grid-template-columns: 1fr; padding: 28px; } .links3 { grid-template-columns: 1fr; } }

.outro { text-align: center; padding: 120px 0; background: radial-gradient(ellipse at center bottom, rgba(255, 176, 32, .14), transparent 60%); }
.outro h2 { font-size: clamp(2.6rem, 8vw, 5rem); }
.copy-ip { font-family: ui-monospace, Menlo, monospace; background: rgba(255, 255, 255, .06); padding: 4px 10px; border-radius: 8px; cursor: pointer; border: 1px solid var(--line); color: var(--text); font-size: .95rem; }

/* Pied de page */
footer { border-top: 1px solid var(--line); padding: 44px 0; color: var(--muted); font-size: .92rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; }
footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
footer a { text-decoration: none; }
footer a:hover { color: var(--text); }

/* Pages texte */
.page-head { padding: 72px 0 32px; }
.page-head h1 { font-size: clamp(2.6rem, 7vw, 4.4rem); }
.prose { max-width: 760px; padding-bottom: 80px; }
.prose h2 { font-size: 1.7rem; margin-top: 1.6em; }
.prose h3 { font-size: 1.25rem; margin-top: 1.4em; }
.prose li { margin: 6px 0; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px; margin-bottom: 10px; }
.faq summary { font: 600 1.1rem var(--display); cursor: pointer; }
.faq details p { margin: 12px 0 0; color: var(--muted); }

/* Boutique */
.shop-hero { padding: 72px 0 40px; text-align: center; }
.shop-hero h1 { font-size: clamp(2.8rem, 8vw, 5.2rem); }
.featured { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 760px; margin: 26px auto 0; }
.feat { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px; text-align: left; cursor: pointer; color: var(--text); font: inherit; }
.feat:hover { border-color: rgba(255, 176, 32, .4); }
.feat .thumb { aspect-ratio: 1.4; border-radius: 10px; margin-bottom: 8px; }
.feat small { font: 600 .65rem var(--display); letter-spacing: .1em; color: var(--accent); text-transform: uppercase; }
.feat b { display: block; font-family: var(--display); font-size: .95rem; line-height: 1.2; }
@media (max-width: 700px) { .featured { grid-template-columns: 1fr 1fr; } }
.fair { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 34px; }
.fair div { text-align: center; }
.fair b { display: block; font-family: var(--display); }
.fair span { color: var(--muted); font-size: .9rem; }
@media (max-width: 700px) { .fair { grid-template-columns: 1fr; } }
.shop-tabs { position: sticky; top: 68px; z-index: 20; background: rgba(10, 15, 28, .9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.shop-tabs .wrap { display: flex; gap: 6px; overflow-x: auto; padding: 10px 0; }
.shop-tabs a { white-space: nowrap; padding: 8px 14px; border-radius: 999px; text-decoration: none; color: var(--muted); font-weight: 700; }
.shop-tabs a:hover { background: rgba(255, 255, 255, .06); color: var(--text); }
.billing-toggle { display: inline-flex; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 4px; margin-bottom: 30px; }
.billing-toggle button { border: 0; background: none; color: var(--muted); padding: 10px 20px; border-radius: 999px; font: 600 .95rem var(--display); cursor: pointer; }
.billing-toggle button.on { background: var(--accent); color: #1b1203; }
.billing-toggle button small { display: block; font: 500 .72rem var(--body); opacity: .8; }
.sub-card { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 24px; display: flex; flex-direction: column; position: relative; }
.sub-card.hot { border-color: rgba(255, 176, 32, .55); box-shadow: 0 30px 60px -30px rgba(255, 176, 32, .35); }
.sub-card .ribbon { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #1b1203; font: 700 .72rem var(--display); letter-spacing: .1em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.sub-card h3 { font-size: 1.6rem; margin: 0; }
.sub-card .price { font: 700 2.4rem var(--display); margin: 10px 0 0; }
.sub-card .price small { font-size: 1rem; color: var(--muted); }
.sub-card ul { list-style: none; padding: 0; margin: 18px 0 0; }
.sub-card li { padding: 10px 0; border-top: 1px solid var(--line); }
.sub-card li b { display: block; }
.sub-card li span { color: var(--muted); font-size: .88rem; }
.sub-card li::before { content: '✓'; color: var(--ok); font-weight: 900; float: left; margin-right: 10px; }
.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.product { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s, border-color .2s; }
.product:hover { transform: translateY(-3px); border-color: rgba(255, 176, 32, .35); }
.product .thumb { aspect-ratio: 16/10; position: relative; }
.thumb { background: radial-gradient(circle at 30% 30%, rgba(255, 176, 32, .25), transparent 60%), linear-gradient(135deg, #1d2a4a, #121a30); display: grid; place-items: center; font: 700 2rem var(--display); color: rgba(255, 255, 255, .85); background-size: cover; background-position: center; }
.product .badge { position: absolute; top: 10px; left: 10px; background: var(--accent-2); color: #fff; font: 700 .7rem var(--display); letter-spacing: .06em; padding: 5px 10px; border-radius: 999px; text-transform: uppercase; }
.product .body { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.product h4 { font-size: 1.2rem; margin-bottom: 4px; }
.product p { color: var(--muted); font-size: .92rem; flex: 1; }
.product ul { margin: 0 0 12px; padding-left: 18px; color: var(--muted); font-size: .9rem; }
.product .buy { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.product .p { font: 700 1.35rem var(--display); }
.product .p s { font-size: .9rem; color: var(--muted); font-weight: 500; margin-right: 6px; }
.cat { padding: 56px 0 8px; scroll-margin-top: 130px; }
.cat h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }

/* Panier (tiroir) */
.drawer-bg { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 90; opacity: 0; pointer-events: none; transition: opacity .2s; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: var(--bg-2); z-index: 100; transform: translateX(100%); transition: transform .25s; display: flex; flex-direction: column; border-left: 1px solid var(--line); }
.drawer-open .drawer { transform: none; }
.drawer-open .drawer-bg { opacity: 1; pointer-events: auto; }
.drawer header { display: flex; justify-content: space-between; align-items: center; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.drawer header h3 { margin: 0; font-size: 1.4rem; }
.drawer .items { flex: 1; overflow-y: auto; padding: 12px 22px; }
.drawer .line { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.drawer .line .thumb { width: 56px; height: 56px; border-radius: 12px; font-size: 1rem; flex-shrink: 0; }
.drawer .line div { flex: 1; min-width: 0; }
.drawer .line b { display: block; font-family: var(--display); }
.drawer .line small { color: var(--muted); }
.qty { display: inline-flex; align-items: center; gap: 6px; }
.qty button, .x { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line); background: none; color: var(--text); cursor: pointer; }
.drawer footer { padding: 18px 22px; border-top: 1px solid var(--line); border-radius: 0; display: block; color: var(--text); }
.drawer .total { display: flex; justify-content: space-between; font: 700 1.3rem var(--display); margin: 10px 0 14px; }
.field { display: block; margin-bottom: 10px; }
.field span { display: block; font-size: .82rem; color: var(--muted); margin-bottom: 4px; font-weight: 700; }
input, select, textarea { width: 100%; background: var(--card); border: 1px solid var(--line); color: var(--text); border-radius: 12px; padding: 11px 13px; font: inherit; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(255, 176, 32, .5); border-color: transparent; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .85rem; color: var(--muted); margin: 10px 0 14px; }
.check input { width: auto; margin-top: 3px; }
.row-inline { display: flex; gap: 8px; }
.err { color: var(--bad); font-size: .9rem; min-height: 1.2em; margin: 6px 0; }
.empty { text-align: center; color: var(--muted); padding: 48px 0; }

/* Toast */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(120px); background: var(--card-2); border: 1px solid var(--line); padding: 12px 20px; border-radius: 14px; z-index: 200; transition: transform .25s; font-weight: 700; }
.toast.show { transform: translateX(-50%); }

/* Compte */
.account-head { display: flex; align-items: center; gap: 18px; padding: 56px 0 24px; flex-wrap: wrap; }
.account-head img { width: 72px; height: 72px; border-radius: 18px; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; margin-bottom: 18px; }
.panel h3 { font-size: 1.3rem; }
table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.table-scroll { overflow-x: auto; }
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 800; background: rgba(255, 255, 255, .08); }
.pill.ok, .pill.delivered, .pill.paid, .pill.active { background: rgba(61, 220, 151, .15); color: var(--ok); }
.pill.pending, .pill.canceling { background: rgba(255, 204, 77, .15); color: var(--warn); }
.pill.failed, .pill.refunded, .pill.canceled, .pill.cancelled { background: rgba(255, 93, 108, .15); color: var(--bad); }
.notice { padding: 14px 18px; border-radius: 14px; background: rgba(61, 220, 151, .1); border: 1px solid rgba(61, 220, 151, .3); margin-bottom: 18px; }
.notice.warn { background: rgba(255, 204, 77, .1); border-color: rgba(255, 204, 77, .3); }
.steam-btn { background: #171a21; color: #fff; border: 1px solid #2a475e; }
.steam-btn:hover { box-shadow: 0 10px 30px -10px rgba(102, 192, 244, .5); }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s, transform .6s; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } * { animation: none !important; transition: none !important; } }

/* Visuels VIP alternatifs (logement, statut, pass) */
.vipv { position: relative; aspect-ratio: 1.6; border-radius: 16px; overflow: hidden; margin-bottom: 18px; background: #0f1628;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .06); transition: transform .3s; }
.vipv svg { width: 100%; height: 100%; display: block; }
.vipv::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .28) 45%, transparent 60%); transform: translateX(-100%); transition: transform .9s; pointer-events: none; }
.sub-card:hover .vipv, .vip-mini:hover .vipv { transform: translateY(-4px) rotate(-.6deg); }
.sub-card:hover .vipv::after, .vip-mini:hover .vipv::after { transform: translateX(100%); }
.vipv .win.on { animation: twinkle 4s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: 1; } 45% { opacity: .55; } 50% { opacity: .9; } }
.vipv-tag { position: absolute; left: 12px; bottom: 12px; padding: 6px 12px; border-radius: 999px; background: rgba(10, 15, 28, .75); backdrop-filter: blur(6px);
  font: 600 .85rem var(--display); border: 1px solid rgba(255, 255, 255, .12); }
.vipv.statut svg circle { transition: filter .3s; }
.sub-card:hover .vipv.statut svg { filter: drop-shadow(0 0 18px rgba(255, 207, 77, .35)); }
.vipv.pass { background: transparent; box-shadow: none; }
.vipv.pass svg { filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .55)); }
.sub-card:hover .vipv.pass { transform: translateY(-4px) rotate(-1.5deg); }
@media (prefers-reduced-motion: reduce) { .vipv .win.on { animation: none; } }

/* Style « Dossier d'enquête » (RCBI, agence fictive) */
.vipv.dossier { container-type: inline-size; background:
  radial-gradient(circle at 86% 22%, transparent 6cqw, rgba(120, 72, 30, .28) 6.4cqw, transparent 7.4cqw),
  repeating-linear-gradient(95deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 9px), linear-gradient(160deg, #3a2618, #1d130c); }
.dossier .d-back { position: absolute; left: 7%; right: 7%; top: 16%; bottom: -4%; border-radius: 1.6cqw; background: linear-gradient(#cfa86c, #b98f55); box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, .5); }
.dossier .d-tab { position: absolute; left: 6%; top: -7cqw; height: 7.6cqw; padding: 0 3cqw; border-radius: 1.6cqw 1.6cqw 0 0; background: #cfa86c;
  font: 700 2.4cqw/7.6cqw ui-monospace, Menlo, monospace; color: #4a3014; letter-spacing: .1em; }
.dossier .d-sheet { position: absolute; left: 11%; right: 11%; top: 12%; height: 92%; padding: 3cqw 3.4cqw; background: #f4efe2; color: #22201b; border-radius: .8cqw;
  box-shadow: 0 .6cqw 2cqw rgba(0, 0, 0, .35); transform: translateY(9%) rotate(-1.2deg); transition: transform .55s cubic-bezier(.2, .9, .3, 1.2); font-family: ui-monospace, Menlo, monospace; }
.dossier .d-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: .35cqw solid #22201b; padding-bottom: 1cqw; margin-bottom: 1.6cqw; }
.dossier .d-head b { font: 700 4.4cqw var(--display); letter-spacing: .2em; }
.dossier .d-head span { font-size: 2.3cqw; text-transform: uppercase; letter-spacing: .14em; }
.dossier .d-body { display: flex; gap: 3cqw; }
.dossier .d-photo { position: relative; flex: 0 0 13cqw; height: 15cqw; padding: .9cqw .9cqw 2.6cqw; background: #fff; box-shadow: 0 .5cqw 1.4cqw rgba(0, 0, 0, .3); transform: rotate(-4deg); }
.dossier .d-photo img, .dossier .d-photo svg { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.15); }
.dossier .d-clip { position: absolute; top: -2.4cqw; left: 40%; width: 3.4cqw; height: 8cqw; border: .6cqw solid #9aa3ad; border-radius: 2cqw; }
.dossier .d-info { display: grid; gap: .6cqw; font-size: 2.6cqw; min-width: 0; line-height: 1.25; }
.dossier .d-info small { display: block; font-size: 1.9cqw; text-transform: uppercase; letter-spacing: .14em; color: #7a7466; }
.dossier .d-info b { display: block; font-size: 3cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dossier .d-status { color: #b3261e; }
.dossier .d-threat { display: inline-flex; gap: 1cqw; }
.dossier .d-threat i { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; border: .4cqw solid #b3261e; }
.dossier .d-threat i.on { background: #b3261e; }
.dossier .d-leaks li { padding: 0; border: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sub-card .dossier .d-leaks li::before, .dossier .d-leaks li::before { content: '▸ '; color: #b3261e; float: none; margin: 0; font-weight: 400; }
.dossier .d-leaks { list-style: none; margin: 1.8cqw 0 0; padding: 0; display: grid; gap: .5cqw; font-size: 2.5cqw; line-height: 1.4; }
.dossier .redact { background: #16140f; color: transparent; padding: 0 .8cqw; border-radius: .3cqw; transition: background .4s, color .4s; }
.dossier .d-leaks li:nth-child(2) .redact { transition-delay: .15s; }
.dossier .d-leaks li:nth-child(3) .redact { transition-delay: .3s; }
.dossier .d-front { position: absolute; left: 7%; right: 7%; bottom: -4%; height: 52%; border-radius: 1.6cqw; background: linear-gradient(#d8b37a, #c39a5e);
  box-shadow: 0 -1cqw 3cqw rgba(0, 0, 0, .35); transition: transform .55s; transform-origin: bottom; }
.dossier .d-label { position: absolute; left: 5%; top: 14%; padding: .8cqw 2.4cqw; border-radius: .6cqw; font: 700 2.6cqw var(--display); letter-spacing: .14em; color: #1b1203; }
.dossier.bronze .d-label { background: var(--bronze); color: #fff3e3; }
.dossier.argent .d-label { background: var(--argent); }
.dossier.or .d-label { background: var(--or); }
.dossier .d-stamp { position: absolute; right: 7%; top: 18%; padding: .8cqw 2.6cqw; border: .7cqw double #b3261e; border-radius: 1cqw; color: #b3261e;
  font: 700 4.6cqw var(--display); letter-spacing: .12em; transform: rotate(-11deg); opacity: .85; mix-blend-mode: multiply; }
.sub-card:hover .dossier .d-sheet, .vip-mini:hover .dossier .d-sheet { transform: translateY(-4%) rotate(.6deg); }
.sub-card:hover .dossier .d-front, .vip-mini:hover .dossier .d-front { transform: translateY(94%); }
.sub-card:hover .dossier .redact, .vip-mini:hover .dossier .redact { background: transparent; color: #22201b; transition-delay: .35s; }
.sub-card:hover .dossier .d-leaks li:nth-child(2) .redact { transition-delay: .55s; }
.sub-card:hover .dossier .d-leaks li:nth-child(3) .redact { transition-delay: .75s; }
.sub-card:hover .dossier .d-stamp, .vip-mini:hover .dossier .d-stamp { animation: stamp .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes stamp { 0% { transform: rotate(-11deg) scale(2.2); opacity: 0; } 70% { transform: rotate(-11deg) scale(.92); opacity: .95; } 100% { transform: rotate(-11deg) scale(1); opacity: .85; } }
.vipv.dossier::after { display: none; }

/* Dossier niveau 2 : feuilles supplémentaires en éventail */
.dossier .d-extra { position: absolute; left: 15%; right: 15%; top: 13%; height: 84%; padding: 2.6cqw 3cqw; border-radius: .8cqw; background: #ece4d0; color: #3a352a;
  font-family: ui-monospace, Menlo, monospace; box-shadow: 0 .6cqw 2cqw rgba(0, 0, 0, .35); transition: transform .65s cubic-bezier(.2, .9, .3, 1.2); }
.dossier .d-extra b { display: block; font-size: 2.2cqw; text-transform: uppercase; letter-spacing: .12em; padding-bottom: 1cqw; border-bottom: .3cqw solid #8b8270; margin-bottom: 1.4cqw; }
.dossier .d-extra i { display: block; height: 1cqw; margin-top: 1.6cqw; width: 82%; border-radius: .5cqw; background: #cdc3ab; }
.dossier .d-extra i:nth-of-type(2n) { width: 64%; }
.dossier .d-circle { position: absolute; right: 12%; top: 34%; width: 14cqw; height: 9cqw; border: .5cqw solid #c0392b; border-radius: 50%; transform: rotate(-8deg); }
.dossier .d-surv { display: block; height: 70%; border-radius: .5cqw; background: radial-gradient(circle at 60% 38%, #6d7480 0 4cqw, transparent 4.2cqw),
  radial-gradient(ellipse at 60% 95%, #6d7480 0 9cqw, transparent 9.2cqw), repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 4px), #2a2f38; filter: contrast(1.2); }
.dossier.lvl2 .d-sheet { left: 16%; right: 16%; }
.dossier .e1 { transform: translateY(10%) rotate(-3deg); }
.dossier .e2 { transform: translateY(10%) rotate(3.5deg); }
.dossier .e3 { transform: translateY(10%) rotate(-1deg); }
.sub-card:hover .dossier .e1, .vip-mini:hover .dossier .e1 { transform: translate(-46%, 2%) rotate(-20deg); transition-delay: .05s; }
.sub-card:hover .dossier .e2, .vip-mini:hover .dossier .e2 { transform: translate(46%, 0%) rotate(18deg); transition-delay: .15s; }
.sub-card:hover .dossier .e3, .vip-mini:hover .dossier .e3 { transform: translate(-30%, -16%) rotate(-8deg); transition-delay: .25s; }

/* Dossier niveau 3 : scène 3D, table, lampe, agents */
.dossier.lvl3 { perspective: 80cqw; background: radial-gradient(ellipse at 50% 20%, #232a3c, #07090f 75%); }
.lvl3 .d3-lamp { position: absolute; left: 50%; top: -3%; width: 90cqw; height: 70cqw; transform: translateX(-50%); z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse 45% 80% at 50% 0, rgba(255, 214, 140, .32), transparent 70%); mix-blend-mode: screen; }
.lvl3 .d3-lamp::before { content: ''; position: absolute; left: 50%; top: 0; width: 12cqw; height: 4cqw; transform: translateX(-50%); border-radius: 0 0 6cqw 6cqw / 0 0 3cqw 3cqw;
  background: linear-gradient(#2b3242, #10141d); box-shadow: 0 1cqw 3cqw rgba(255, 214, 140, .5); }
.lvl3 .d3-agents { position: absolute; left: 0; top: 2%; width: 100%; height: 56%; z-index: 0; transition: transform .9s ease; }
.lvl3 .d3-agent { animation: breathe 4s ease-in-out infinite; transform-box: fill-box; }
@keyframes breathe { 50% { translate: 0 -1.2px; } }
.lvl3 .d3-table { position: absolute; left: -4%; right: -4%; bottom: -2%; height: 60%; z-index: 1; transform-style: preserve-3d; transform: rotateX(50deg); transform-origin: 50% 100%;
  border-radius: 3cqw; background: radial-gradient(ellipse at 50% 35%, rgba(255, 214, 140, .22), transparent 60%), repeating-linear-gradient(92deg, rgba(0, 0, 0, .12) 0 3px, transparent 3px 14px), linear-gradient(#5a3a22, #3a2416);
  box-shadow: 0 -.6cqw 0 #7a5233 inset, 0 3cqw 6cqw rgba(0, 0, 0, .7); }
.lvl3 .d3-folder { position: absolute; left: 34%; width: 32%; top: 16%; height: 62%; transform-style: preserve-3d; transform: rotateZ(-5deg); }
.lvl3 .d3-cover { position: absolute; inset: 0; border-radius: 1cqw; background: linear-gradient(135deg, #d8b37a, #b88f55); box-shadow: 0 1cqw 2cqw rgba(0, 0, 0, .45); }
.lvl3 .d3-cover.front { transform-origin: 0 50%; transform: translateZ(3px); transition: transform 1s cubic-bezier(.3, .8, .3, 1); backface-visibility: visible; }
.lvl3 .d3-cover.front .d-label { left: 7%; top: 12%; font-size: 2cqw; }
.lvl3 .d3-cover.front .d-stamp { right: 6%; top: 40%; font-size: 3.1cqw; }
.lvl3 .d3-cover.front > * { backface-visibility: hidden; }
.lvl3 .d3-case { position: absolute; left: 7%; bottom: 10%; font: 700 1.5cqw ui-monospace, Menlo, monospace; color: #4a3014; letter-spacing: .1em; }
.lvl3 .d3-paper { position: absolute; inset: 5% 6%; border-radius: .6cqw; background: #f4efe2; padding: 1.4cqw; font-family: ui-monospace, Menlo, monospace; color: #3a352a;
  box-shadow: 0 .4cqw 1cqw rgba(0, 0, 0, .35); transition: transform 1s cubic-bezier(.2, .8, .3, 1); }
.lvl3 .d3-paper b { display: block; font-size: 1.7cqw; letter-spacing: .1em; border-bottom: .25cqw solid #8b8270; padding-bottom: .5cqw; }
.lvl3 .d3-paper i { display: block; height: 55%; margin-top: 1cqw; background: repeating-linear-gradient(#cdc3ab 0 .7cqw, transparent .7cqw 2cqw); }
.lvl3 .p2 i, .lvl3 .p6 i { background: radial-gradient(circle at 50% 40%, #6d7480 0 2.6cqw, transparent 2.8cqw), #2a2f38; }
.lvl3 .d3-paper.p1 { transform: translateZ(1px) rotate(2deg); } .lvl3 .p2 { transform: translateZ(1.2px) rotate(-3deg); } .lvl3 .p3 { transform: translateZ(1.4px) rotate(4deg); }
.lvl3 .p4 { transform: translateZ(1.6px) rotate(-2deg); } .lvl3 .p5 { transform: translateZ(1.8px) rotate(3deg); } .lvl3 .p6 { transform: translateZ(2px) rotate(-4deg); } .lvl3 .p7 { transform: translateZ(2.2px) rotate(1deg); }
.dossier.lvl3 .d-sheet { left: 11%; right: 11%; top: 3%; height: auto; padding-bottom: 2.6cqw; z-index: 4; opacity: 0; transform-origin: 50% 0;
  transform: translateY(70%) rotateX(60deg) scale(.4); transition: transform .8s cubic-bezier(.2, .9, .3, 1.1), opacity .4s; }
.dossier.lvl3::after { display: none; }
/* Au survol : les agents se penchent, le dossier s'ouvre, les feuilles s'éparpillent, la fiche se lève */
.sub-card:hover .lvl3 .d3-agents, .vip-mini:hover .lvl3 .d3-agents { transform: translateY(5%) scale(1.06); }
.sub-card:hover .lvl3 .d3-cover.front, .vip-mini:hover .lvl3 .d3-cover.front { transform: translateZ(3px) rotateY(-172deg); }
.sub-card:hover .lvl3 .p1, .vip-mini:hover .lvl3 .p1 { transform: translate(-125%, -18%) rotate(-24deg); transition-delay: .35s; }
.sub-card:hover .lvl3 .p2, .vip-mini:hover .lvl3 .p2 { transform: translate(118%, -26%) rotate(19deg); transition-delay: .41s; }
.sub-card:hover .lvl3 .p3, .vip-mini:hover .lvl3 .p3 { transform: translate(-100%, 46%) rotate(14deg); transition-delay: .47s; }
.sub-card:hover .lvl3 .p4, .vip-mini:hover .lvl3 .p4 { transform: translate(112%, 50%) rotate(-16deg); transition-delay: .53s; }
.sub-card:hover .lvl3 .p5, .vip-mini:hover .lvl3 .p5 { transform: translate(-200%, 14%) rotate(-9deg); transition-delay: .59s; }
.sub-card:hover .lvl3 .p6, .vip-mini:hover .lvl3 .p6 { transform: translate(196%, 6%) rotate(11deg); transition-delay: .65s; }
.sub-card:hover .lvl3 .p7, .vip-mini:hover .lvl3 .p7 { transform: translate(8%, 78%) rotate(5deg); transition-delay: .71s; }
.sub-card:hover .dossier.lvl3 .d-sheet, .vip-mini:hover .dossier.lvl3 .d-sheet { opacity: 1; transform: translateY(0) rotateX(0) scale(.74); transition-delay: .95s; }
.sub-card:hover .dossier.lvl3 .redact { transition-delay: 1.6s; }
.sub-card:hover .dossier.lvl3 .d-leaks li:nth-child(2) .redact { transition-delay: 1.8s; }
.sub-card:hover .dossier.lvl3 .d-leaks li:nth-child(3) .redact { transition-delay: 2s; }
@media (prefers-reduced-motion: reduce) { .lvl3 .d3-agent { animation: none; } }