:root{--bg:#0a0a1f;--bg2:#12122b;--card:#171738;--txt:#f2f2fa;--mut:#a5a5c9;
--violet:#8b5cf6;--cyan:#22d3ee;--yellow:#ffdd00;--red:#ff5a3c;--line:#26265a}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--txt);font-family:'Segoe UI',system-ui,Arial,sans-serif;line-height:1.6}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
header.site{background:linear-gradient(120deg,#12122b,#1c1040);border-bottom:2px solid var(--violet);position:sticky;top:0;z-index:10}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
.hbar{display:flex;align-items:center;justify-content:space-between;padding:12px 0;flex-wrap:wrap;gap:8px}
.logo{font-size:26px;font-weight:900;letter-spacing:.5px;color:var(--txt)}
.logo span{color:var(--yellow)}
nav.main a{color:var(--txt);margin-left:18px;font-weight:700;font-size:15px}
nav.main a:hover{color:var(--yellow);text-decoration:none}
.socials a{margin-left:10px;font-size:14px;font-weight:700}
.hero{padding:34px 0 8px;text-align:left}
.hero h1{font-size:32px;line-height:1.2;font-weight:900}
.hero p{color:var(--mut);margin-top:8px;max-width:640px}
.trending{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:18px 0;font-size:14px}
.trending b{color:var(--yellow);letter-spacing:1px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin:20px 0 30px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:10px}
.card h3{font-size:19px;line-height:1.3}
.card h3 a{color:var(--txt)}
.card p{color:var(--mut);font-size:14.5px;flex:1}
.meta{font-size:12.5px;color:var(--mut)}
.pill{display:inline-block;padding:3px 12px;border-radius:999px;font-size:11.5px;font-weight:800;letter-spacing:.6px;color:#fff;width:max-content}
.pill-astuce{background:linear-gradient(90deg,#7c3aed,#a855f7)}
.pill-jeu{background:linear-gradient(90deg,#0891b2,#22d3ee);color:#06222b}
.pill-code{background:linear-gradient(90deg,#ff5a3c,#ff9a3c);color:#2b0d00}
.links{display:flex;gap:8px;flex-wrap:wrap}
.btn{display:inline-block;padding:8px 14px;border-radius:999px;font-weight:800;font-size:13.5px;color:#fff;background:#2a2a5a;border:1px solid var(--line)}
.btn:hover{text-decoration:none;filter:brightness(1.25)}
.btn-yt{background:#c81e1e}.btn-ig{background:linear-gradient(45deg,#833ab4,#fd1d1d,#fcb045);color:#1c0b00}
.btn-tt{background:#000;border-color:#444}
.btn-main{background:var(--violet)}
h2.sec{font-size:23px;margin:26px 0 6px;font-weight:900}
article.page{padding:26px 0 10px;max-width:760px}
article.page h1{font-size:30px;line-height:1.25;font-weight:900;margin:10px 0}
article.page p{margin:12px 0;color:#e6e6f5}
.facts{background:var(--bg2);border:1px solid var(--line);border-left:4px solid var(--yellow);border-radius:10px;padding:14px 18px;margin:18px 0}
.facts li{margin:5px 0 5px 18px}
.embed{position:relative;padding-top:177.7%;border-radius:14px;overflow:hidden;background:#000;margin:16px 0}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.watch{margin:18px 0}
.ad-slot{border:1.5px dashed #3d3d77;border-radius:12px;color:#6f6fa3;text-align:center;padding:22px 10px;font-size:12.5px;letter-spacing:1px;margin:22px 0;text-transform:uppercase}
.code-row{display:flex;align-items:center;gap:10px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:10px 0;flex-wrap:wrap}
.code{font-family:Consolas,Menlo,monospace;font-size:21px;font-weight:800;color:var(--yellow);letter-spacing:.5px}
.reward{color:var(--mut);font-size:14px;flex:1;min-width:180px}
.exp{color:#ff8a75;font-size:12.5px;font-weight:700}
.copy{cursor:pointer;background:var(--violet);color:#fff;border:0;border-radius:999px;padding:8px 16px;font-weight:800;font-size:13.5px}
.copy.ok{background:#1d9e57}
ol.steps li{margin:8px 0 8px 20px}
.journal{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:12px 16px;font-size:14px;color:var(--mut);margin:14px 0}
footer.site{border-top:1px solid var(--line);margin-top:40px;padding:24px 0 34px;color:var(--mut);font-size:14px}
footer.site a{color:var(--mut);margin-right:14px}
.note{font-size:13px;color:var(--mut)}
@media(max-width:560px){.hero h1{font-size:26px}article.page h1{font-size:25px}.code{font-size:18px}}