/* ============================================================
   JOXIA — Launcher gaming (mode soleil)
   Crème/chaud #FFF7EC · Orange JOXIA #FF6A2A · Inter / Plus Jakarta Sans
   Sidebar persistante + topbar + hero immersif + launcher
   (thème sombre conservé en option via [data-theme="dark"])
   ============================================================ */
:root{
    color-scheme:light;
    /* Primitives — mode soleil */
    --bg:#FFF7EC;
    --bg-2:#FFF1DE;
    --surface:#FFFFFF;
    --surface-2:#F7F0E4;
    --surface-3:#EDE2CF;
    --text:#20180F;
    --text-2:#5C5344;
    --text-3:#9A8F7C;
    --orange:#FF6A2A;
    --orange-light:#FF8A3D;
    --orange-2:#FF5722;
    --sun:#FFC24B;
    --success:#1FA56B;
    --danger:#E5484D;
    --border:rgba(32,24,15,.10);
    --border-soft:rgba(32,24,15,.07);
    --hover:rgba(32,24,15,.05);
    --glass:rgba(255,247,236,.80);
    --chip-bg:rgba(255,255,255,.78);
    --input-bg:rgba(32,24,15,.04);
    --input-border:rgba(32,24,15,.12);
    --scroll-thumb:rgba(32,24,15,.18);
    --overlay:rgba(32,24,15,.38);
    /* Composants */
    --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px;
    --sidebar-w:215px;
    --ease:cubic-bezier(.2,.8,.2,1);
    --font:'Inter','Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
    --grad-orange:linear-gradient(120deg,var(--orange),var(--orange-light));
    --shadow-card:0 12px 30px rgba(120,70,20,.10);
    --shadow-lg:0 20px 50px rgba(120,70,20,.16);
    --glow-orange:0 0 30px rgba(255,138,61,.35);
}

/* ---------- Thème sombre (optionnel) ---------- */
:root[data-theme="dark"]{
    color-scheme:dark;
    --bg:#050812; --bg-2:#0a0f1e;
    --surface:#0B1020; --surface-2:#111729; --surface-3:#161d30;
    --text:#F5F4F1; --text-2:#A9ADB8; --text-3:#737887;
    --border:rgba(255,255,255,.08); --border-soft:rgba(255,255,255,.06);
    --hover:rgba(255,255,255,.05);
    --glass:rgba(5,8,18,.72);
    --chip-bg:rgba(11,16,32,.6);
    --input-bg:rgba(255,255,255,.045);
    --input-border:rgba(255,255,255,.09);
    --scroll-thumb:rgba(255,255,255,.12);
    --overlay:rgba(5,8,18,.7);
    --shadow-card:0 15px 40px rgba(0,0,0,.25);
    --shadow-lg:0 20px 50px rgba(0,0,0,.30);
    --glow-orange:0 0 30px rgba(255,106,42,.15);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{
    color:var(--text);
    font-family:var(--font);
    line-height:1.5;
    background:
      radial-gradient(1000px 540px at 82% -12%, rgba(255,194,75,.34) 0%, rgba(255,194,75,0) 60%),
      radial-gradient(780px 580px at -12% 18%, rgba(255,138,61,.20) 0%, rgba(255,138,61,0) 55%),
      linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
    background-attachment:fixed;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    font-weight:400;
}
::selection{background:rgba(255,106,42,.28);}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:var(--font);cursor:pointer;}

::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:99px;border:3px solid transparent;background-clip:content-box;}
::-webkit-scrollbar-thumb:hover{background:var(--text-3);border:3px solid transparent;background-clip:content-box;}

button,a,input,.avatar-opt,.color-opt{outline:none;}
:focus-visible{outline:2px solid #FF7A2F;outline-offset:3px;border-radius:8px;}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar{
    position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w);
    display:flex;flex-direction:column;
    background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-right:1px solid var(--border-soft);
    z-index:50;padding:0 12px;
}
.logo{
    display:flex;align-items:center;gap:10px;
    padding:24px 14px 20px;font-family:'Plus Jakarta Sans',var(--font);
    font-weight:800;font-size:1.3rem;letter-spacing:.5px;
}
.logo-pad{
    width:40px;height:40px;border-radius:13px;display:grid;place-items:center;
    background:var(--grad-orange);box-shadow:var(--glow-orange);position:relative;overflow:hidden;
}
.logo-pad::after{
    content:"";position:absolute;inset:0;border-radius:inherit;
    background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,0) 55%);
    pointer-events:none;
}
.logo-text{color:var(--text);}
.logo-text::first-letter{color:var(--orange);}

.nav{display:flex;flex-direction:column;gap:4px;margin-top:14px;}
.nav-item{
    display:flex;align-items:center;gap:12px;height:50px;padding:0 14px;
    border:none;border-radius:14px;background:transparent;color:var(--text-2);
    font-size:.92rem;font-weight:600;text-align:left;width:100%;
    transition:background .18s var(--ease),color .18s var(--ease);
}
.nav-item svg{flex-shrink:0;}
.nav-admin{text-decoration:none;color:var(--orange);}
.nav-item:hover{background:var(--hover);color:var(--text);}
.nav-item.active{
    background:linear-gradient(90deg,var(--orange),rgba(255,138,61,.35));
    color:#fff;
}
.nav-badge{
    margin-left:auto;font-style:normal;background:var(--orange);color:#fff;
    font-size:.68rem;font-weight:700;min-width:18px;height:18px;line-height:18px;
    text-align:center;border-radius:50%;padding:0 5px;
}

.sidebar-footer{margin-top:auto;padding:16px 6px;border-top:1px solid var(--border);}
.sp-connect{
    width:100%;height:44px;border:none;border-radius:12px;display:flex;align-items:center;justify-content:center;
    background:var(--grad-orange);color:#fff;font-weight:700;font-size:.9rem;letter-spacing:.3px;
    box-shadow:var(--glow-orange),inset 0 1px 0 rgba(255,255,255,.28);
    transition:filter .18s var(--ease),transform .18s var(--ease);
}
.sp-connect:hover{filter:brightness(1.05);transform:translateY(-1px);}
.sp-connect:active{transform:scale(.97);}
.sp-user{width:100%;}
.sp-row{display:flex;align-items:center;gap:12px;}
.sp-avatar-wrap{position:relative;flex-shrink:0;}
.sp-avatar-wrap img{
    width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--surface-2);
    border:1px solid var(--border);
}
.sp-dot{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;border:2px solid var(--bg);}
.sp-dot.on{background:var(--success);}
.sp-dot.off{background:var(--text-3);}
.sp-meta{display:flex;flex-direction:column;min-width:0;}
.sp-name{font-weight:700;font-size:.92rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sp-level{font-size:.76rem;color:var(--text-3);font-weight:500;}
.sp-xp{height:5px;border-radius:99px;background:var(--surface-2);margin-top:12px;overflow:hidden;}
.sp-xp-fill{display:block;height:100%;width:0;border-radius:99px;background:var(--grad-orange);transition:width .5s var(--ease);}

/* ============================================================
   MAIN + TOPBAR
   ============================================================ */
.main{margin-left:var(--sidebar-w);min-height:100vh;display:flex;flex-direction:column;}

.topbar{
    position:sticky;top:0;z-index:40;
    display:flex;align-items:center;gap:16px;justify-content:space-between;
    padding:12px 36px;
    background:var(--glass);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--border-soft);
}
.search{position:relative;flex:0 1 575px;max-width:575px;display:flex;align-items:center;}
.search-icon{position:absolute;left:16px;color:var(--text-3);pointer-events:none;}
#searchInput{
    width:100%;height:42px;padding:0 18px 0 44px;border-radius:999px;
    background:var(--input-bg);border:1px solid var(--input-border);
    color:var(--text);font-size:.92rem;font-weight:500;font-family:var(--font);
    transition:border-color .2s var(--ease),background .2s var(--ease);
}
#searchInput::placeholder{color:var(--text-3);}
#searchInput:focus{border-color:rgba(255,106,42,.55);background:var(--surface);}

.topbar-actions{display:flex;align-items:center;gap:9px;flex-shrink:0;}
.pill{
    display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;
    border-radius:999px;background:var(--input-bg);border:1px solid var(--border);
    color:var(--text-2);font-size:.85rem;font-weight:600;transition:.18s var(--ease);
}
.pill:hover{background:var(--hover);color:var(--text);transform:translateY(-1px);}
.pill:active{transform:scale(.97);}
.pill-discord svg{color:#7289da;}
.pill-online{color:var(--text-2);}
.online-dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px rgba(31,165,107,.18);}
.pill-online #onlineCount{color:var(--text-2);font-weight:500;}
.pill-fs{padding:0 13px;font-size:1.05rem;}

/* ============================================================
   HERO (asymétrique)
   ============================================================ */
.hero{
    display:grid;grid-template-columns:1.05fr 1fr;gap:32px;align-items:center;
    padding:44px 36px 40px;position:relative;overflow:hidden;
    max-width:1600px;margin:0 auto;width:100%;
}
.hero-content{position:relative;z-index:2;}
.hero-badge{
    display:inline-flex;align-items:center;gap:6px;
    background:rgba(255,106,42,.10);border:1px solid rgba(255,106,42,.28);
    color:var(--orange-2);font-size:.78rem;font-weight:600;
    padding:7px 14px;border-radius:999px;letter-spacing:.2px;
}
.hero h1{
    font-family:'Plus Jakarta Sans',var(--font);
    font-size:clamp(2.4rem,4.6vw,3.4rem);line-height:1.05;font-weight:800;letter-spacing:-1.5px;
    margin:20px 0 14px;
}
.hero h1 .accent{color:var(--orange);}
.hero-desc{color:var(--text-2);font-size:1.02rem;max-width:500px;}
.hero-benefits{display:flex;gap:0;margin-top:30px;flex-wrap:wrap;}
.benefit{display:flex;align-items:center;gap:12px;padding:0 26px;position:relative;}
.benefit:first-child{padding-left:0;}
.benefit + .benefit::before{
    content:"";position:absolute;left:0;top:12%;bottom:12%;width:1px;background:var(--border);
}
.benefit-ico{
    width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:1.2rem;
    background:rgba(255,106,42,.12);border:1px solid rgba(255,106,42,.20);flex-shrink:0;
}
.benefit b{display:block;font-size:.92rem;font-weight:700;color:var(--text);}
.benefit span{font-size:.8rem;color:var(--text-3);}

/* --- Visuel hero (image IA) --- */
.hero-visual{position:relative;height:340px;border-radius:var(--r-xl);}
.hero-glow{
    position:absolute;inset:-6% -4%;z-index:0;filter:blur(34px);
    background:radial-gradient(circle at 68% 30%, rgba(255,194,75,.5), rgba(255,138,61,.18) 55%, transparent 75%);
}
.hero-img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
    border-radius:var(--r-xl);border:1px solid var(--border);box-shadow:var(--shadow-lg);
}
.chip{
    position:absolute;z-index:3;padding:8px 14px;border-radius:999px;font-size:.78rem;font-weight:600;
    background:var(--chip-bg);border:1px solid var(--border);color:var(--text-2);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.chip-top{left:10px;top:10px;}
.chip-bottom{left:14px;bottom:14px;}

/* ============================================================
   SECTIONS + GRILLE
   ============================================================ */
.section{max-width:1600px;margin:0 auto;width:100%;padding:28px 36px 8px;}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:22px;gap:16px;}
.section-title{font-family:'Plus Jakarta Sans',var(--font);font-size:1.5rem;font-weight:750;letter-spacing:-.3px;line-height:1.15;}
.section-sub{color:var(--text-3);font-size:.9rem;margin-top:3px;}
.link-btn{
    background:none;border:none;color:var(--orange-2);font-size:.9rem;font-weight:700;
    padding:6px 2px;transition:.18s var(--ease);white-space:nowrap;
}
.link-btn:hover{color:var(--orange);transform:translateX(2px);}

.game-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;}
.discover-grid{grid-template-columns:repeat(4,minmax(0,1fr));}

/* ============================================================
   GAME CARD (launcher)
   ============================================================ */
.game-card{
    display:flex;flex-direction:column;overflow:hidden;
    background:var(--surface);border:1px solid var(--border);border-radius:14px;
    box-shadow:var(--shadow-card);transition:transform .22s var(--ease),border-color .22s var(--ease);
}
.game-card:hover{transform:translateY(-4px);border-color:rgba(255,106,42,.5);}
.game-card.extra{display:none;}
.game-grid.show-all .game-card.extra{display:flex;}

.game-card__cover{position:relative;height:145px;overflow:hidden;background:var(--surface-2);}
.game-card__cover::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(to bottom,transparent 40%,rgba(32,24,15,.18) 100%);
}
.game-card__cover img{width:100%;height:100%;object-fit:cover;transition:transform .3s var(--ease);}
.game-card:hover .game-card__cover img{transform:scale(1.03);}
.cover-badge{
    position:absolute;top:10px;left:10px;z-index:2;
    background:var(--grad-orange);color:#fff;font-size:.62rem;font-weight:700;letter-spacing:.6px;
    padding:4px 9px;border-radius:999px;text-transform:uppercase;
}

.game-card__content{display:flex;flex-direction:column;gap:12px;padding:14px 16px 16px;flex:1;}
.game-card__header{display:flex;align-items:center;gap:11px;}
.game-icon{
    width:36px;height:36px;border-radius:10px;flex-shrink:0;display:grid;place-items:center;
    background:linear-gradient(150deg,var(--surface-3),var(--surface-2));
    border:1px solid var(--border);color:var(--orange-2);font-weight:800;font-size:1rem;
}
.game-card__header h3{font-size:.98rem;font-weight:700;line-height:1.2;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.game-status{display:flex;align-items:center;gap:6px;font-size:.74rem;color:var(--text-3);font-weight:500;margin-top:2px;}
.game-status .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.dot.on{background:var(--success);}
.dot.off{background:var(--text-3);}

.game-card__tags{display:flex;flex-wrap:wrap;gap:6px;}
.game-card__tags span{
    padding:5px 9px;border-radius:999px;background:var(--hover);
    font-size:11px;font-weight:600;color:var(--text-2);
}

.game-card__play{
    margin-top:auto;height:40px;border-radius:10px;border:none;width:100%;
    display:inline-flex;align-items:center;justify-content:center;gap:7px;
    background:var(--surface-2);color:var(--text);font-weight:700;font-size:.92rem;
    transition:.18s var(--ease);border:1px solid var(--border);
}
.game-card__play:hover{background:var(--surface-3);transform:translateY(-1px);}
.game-card__play:active{transform:scale(.97);}
.game-card__play.primary{background:var(--grad-orange);color:#fff;border:none;box-shadow:var(--glow-orange);}
.game-card__play.primary:hover{filter:brightness(1.05);}

/* --- Cartes découverte (compactes) --- */
.game-card.disco .game-card__cover{height:120px;}
.game-card.disco .game-card__content{gap:10px;}
.game-card.disco .game-card__content h3{font-size:.98rem;font-weight:700;color:var(--text);line-height:1.25;}
.disco-sub{color:var(--text-3);font-size:.8rem;margin-top:-6px;}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
    margin-top:auto;padding:26px 36px 40px;text-align:center;
    color:var(--text-3);font-size:.85rem;border-top:1px solid var(--border-soft);
}
.footer a{color:var(--orange-2);font-weight:700;}

/* ============================================================
   MODALES
   ============================================================ */
.modal{
    display:none;position:fixed;inset:0;background:var(--overlay);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    z-index:200;align-items:center;justify-content:center;padding:16px;
    animation:fade .18s var(--ease);
}
@keyframes fade{from{opacity:0;}to{opacity:1;}}
.modal-content{
    background:var(--surface);padding:30px 26px;border-radius:var(--r-lg);border:1px solid var(--border);
    width:100%;max-width:400px;text-align:center;position:relative;box-shadow:var(--shadow-lg);
    max-height:90vh;overflow-y:auto;animation:pop .22s var(--ease);
}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.97);}to{opacity:1;transform:none;}}
.modal-wide{max-width:460px;}
.close-btn{
    position:absolute;top:12px;right:16px;cursor:pointer;color:var(--text-3);
    font-size:1.5rem;line-height:1;width:34px;height:34px;display:flex;align-items:center;
    justify-content:center;border-radius:10px;transition:.15s;
}
.close-btn:hover{background:var(--surface-2);color:var(--text);}
.modal-title{font-family:'Plus Jakarta Sans',var(--font);font-size:1.25rem;font-weight:800;margin-bottom:16px;letter-spacing:-.2px;}
#authTitle{font-family:'Plus Jakarta Sans',var(--font);font-size:1.4rem;margin-bottom:22px;font-weight:800;letter-spacing:-.3px;}

.modal-content input{
    width:100%;padding:13px 16px;margin-bottom:14px;background:var(--surface-2);
    border:1px solid var(--border);color:var(--text);border-radius:var(--r-md);
    font-size:.95rem;font-weight:500;outline:none;transition:.2s var(--ease);font-family:var(--font);
}
.modal-content input:focus{border-color:rgba(255,106,42,.55);box-shadow:0 0 0 4px rgba(255,106,42,.14);}
.field-label{
    display:block;text-align:left;font-size:.74rem;font-weight:600;text-transform:uppercase;
    letter-spacing:.8px;color:var(--text-3);margin:16px 0 8px;
}
.auth-sub{color:var(--text-2);font-weight:500;font-size:.88rem;margin:-12px 0 4px;}
#authModal .field-label{margin:14px 0 8px;}
.form-msg{font-size:.85rem;font-weight:600;margin-top:8px;min-height:1.2em;text-align:left;}
.form-msg.ok{color:var(--success);}
.form-msg.bad{color:var(--danger);}
.form-msg.muted{color:var(--text-3);}

.login-btn{
    background:var(--grad-orange);color:#fff;font-weight:700;letter-spacing:.5px;
    border:none;padding:13px 22px;border-radius:12px;height:48px;
    box-shadow:0 6px 20px rgba(255,106,42,.30),inset 0 1px 0 rgba(255,255,255,.28);transition:.18s var(--ease);
}
.login-btn:hover{filter:brightness(1.05);transform:translateY(-1px);}
.login-btn:active{transform:scale(.97);}
#confirmBtn{
    background:var(--grad-orange) !important;color:#fff !important;font-weight:700;
    letter-spacing:.5px;height:50px;border-radius:12px;font-family:var(--font);
}
.auth-switch{margin-top:16px;font-size:.9rem;color:var(--text-2);font-weight:500;}
.auth-switch a{color:var(--orange-2);font-weight:700;}

.pw-wrap{position:relative;margin-bottom:14px;}
.pw-wrap input{margin-bottom:0;padding-right:46px;}
.pw-toggle{
    position:absolute;right:6px;top:50%;transform:translateY(-50%);
    background:transparent;border:none;font-size:1.1rem;cursor:pointer;padding:6px;line-height:1;color:var(--text-2);
}
.pw-toggle:hover{color:var(--text);}

.ghost-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--surface-2);color:var(--text);border:1px solid var(--border);padding:11px 16px;border-radius:12px;font-weight:600;}
.ghost-btn:hover{background:var(--surface-3);border-color:var(--border);}
.ghost-btn.danger{color:var(--danger);border-color:rgba(229,72,77,.35);}
.ghost-btn.danger:hover{background:rgba(229,72,77,.08);}

/* ---- Icônes inline (remplacement des emoji) ---- */
.section-title svg{vertical-align:-3px;margin-right:10px;color:var(--orange);}
.modal-title svg{vertical-align:-3px;margin-right:8px;color:var(--orange);}
.friend-sub svg{vertical-align:-4px;margin-right:7px;color:var(--orange);}
.setting-row svg{vertical-align:-3px;margin-right:9px;color:var(--text-2);}
.chip svg{vertical-align:-2px;margin-right:6px;}
.ghost-btn svg{flex-shrink:0;}
.pw-toggle{display:inline-flex;align-items:center;justify-content:center;}
.benefit-ico svg{display:block;}
.lb-medal{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;font-size:.72rem;font-weight:800;line-height:1;color:#20180F;}

/* ---- CTA Discord + notif ---- */
.discord-cta{
    display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
    background:linear-gradient(120deg,#5865F2,#404EED);
    border-radius:20px;padding:28px 32px;color:#fff;
    box-shadow:0 12px 32px rgba(88,101,242,.28);
    border:1px solid rgba(255,255,255,.12);
}
.discord-cta__brand{display:flex;align-items:center;gap:16px;min-width:0;flex:1 1 360px;}
.discord-cta__logo{
    width:56px;height:56px;border-radius:16px;display:grid;place-items:center;flex-shrink:0;
    background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.18);
}
.discord-cta h2{font-family:'Plus Jakarta Sans',var(--font);font-size:1.35rem;font-weight:800;letter-spacing:-.3px;line-height:1.15;}
.discord-cta p{color:rgba(255,255,255,.85);font-size:.92rem;margin-top:5px;max-width:480px;}
.discord-btn{
    display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 26px;border-radius:14px;
    background:#fff;color:#404EED;font-weight:800;font-size:1rem;letter-spacing:.2px;text-decoration:none;
    box-shadow:0 8px 20px rgba(0,0,0,.18);transition:.18s var(--ease);flex-shrink:0;
}
.discord-btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(0,0,0,.26);}
.discord-btn:active{transform:scale(.97);}

.discord-toast{
    position:fixed;right:20px;bottom:20px;z-index:220;
    display:flex;align-items:center;gap:14px;max-width:400px;width:calc(100% - 40px);
    padding:14px 14px 14px 16px;border-radius:16px;
    background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-lg);
    transform:translateY(150%);opacity:0;
    transition:transform .45s var(--ease),opacity .45s var(--ease);
}
.discord-toast.show{transform:translateY(0);opacity:1;}
.discord-toast__icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#5865F2;color:#fff;flex-shrink:0;}
.discord-toast__txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.discord-toast__txt b{font-size:.92rem;font-weight:700;color:var(--text);}
.discord-toast__txt span{font-size:.8rem;color:var(--text-2);}
.discord-toast__btn{
    flex-shrink:0;height:38px;padding:0 16px;border-radius:10px;
    background:#5865F2;color:#fff;font-weight:700;font-size:.85rem;
    display:inline-flex;align-items:center;text-decoration:none;transition:.15s var(--ease);
}
.discord-toast__btn:hover{background:#4752C4;}
.discord-toast__close{
    flex-shrink:0;width:28px;height:28px;border:none;border-radius:8px;
    background:transparent;color:var(--text-3);font-size:1.2rem;line-height:1;cursor:pointer;
    display:grid;place-items:center;
}
.discord-toast__close:hover{background:var(--hover);color:var(--text);}

@media (max-width:600px){
    .discord-cta{padding:22px 20px;}
    .discord-btn{width:100%;justify-content:center;}
    .discord-toast{right:12px;bottom:12px;width:calc(100% - 24px);}
}

/* --- Avatar --- */
.avatar-preview{display:flex;justify-content:center;margin-bottom:4px;}
.avatar-preview img{width:112px;height:112px;border-radius:26px;background:var(--surface-2);border:2px solid var(--border);}
.avatar-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;}
.avatar-opt{padding:0;border-radius:12px;border:2px solid transparent;background:var(--surface-2);cursor:pointer;overflow:hidden;aspect-ratio:1;transition:.15s var(--ease);}
.avatar-opt img{width:100%;height:100%;object-fit:cover;}
.avatar-opt:hover{transform:scale(1.05);}
.avatar-opt.active{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,106,42,.25);}
.avatar-colors{display:flex;gap:8px;flex-wrap:wrap;}
.color-opt{width:32px;height:32px;border-radius:50%;border:2px solid var(--border);cursor:pointer;padding:0;transition:.15s var(--ease);}
.color-opt:hover{transform:scale(1.08);}
.color-opt.active{border-color:var(--text);box-shadow:0 0 0 3px rgba(255,106,42,.35);transform:scale(1.1);}
.avatar-actions{display:flex;gap:10px;margin-top:22px;}
.avatar-actions .login-btn{flex:1;}

/* --- Amis --- */
.add-friend{display:flex;gap:8px;margin-top:6px;}
.add-friend input{flex:1;margin-bottom:0 !important;}
.add-friend .login-btn{margin:0 !important;flex-shrink:0;padding:11px 16px;height:auto;}
.friend-sub{text-align:left;font-size:.78rem;font-weight:700;color:var(--text-2);text-transform:uppercase;letter-spacing:.8px;margin:20px 0 10px;}
.friend-list{display:flex;flex-direction:column;gap:8px;max-height:230px;overflow-y:auto;text-align:left;}
.friend-row,.request-row{display:flex;align-items:center;gap:11px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:9px 12px;transition:background .15s;}
.friend-row:hover,.request-row:hover{background:var(--surface-3);}
.friend-avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--surface-3);}
.friend-avatar img{width:100%;height:100%;object-fit:cover;}
.friend-name{flex:1;font-weight:600;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.friend-row .ghost-btn{flex-shrink:0;padding:6px 11px;font-size:.78rem;border-radius:9px;}
.dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.dot.on{background:var(--success);box-shadow:0 0 0 3px rgba(31,165,107,.2);}
.dot.off{background:var(--text-3);}
.request-actions{display:flex;gap:6px;}
.mini-btn{width:34px;height:34px;border-radius:10px;font-weight:700;cursor:pointer;border:none;color:#fff;transition:.15s;}
.mini-btn:hover{filter:brightness(1.06);}
.mini-btn.ok{background:var(--success);}
.mini-btn.no{background:var(--danger);}
.mini-btn.fmsg{background:var(--surface-3);color:var(--text);display:flex;align-items:center;justify-content:center;}
.mini-btn.fmsg:hover{background:var(--orange);color:#fff;}
.empty{color:var(--text-3);font-size:.85rem;font-weight:500;padding:8px 2px;text-align:center;}

/* --- Paramètres --- */
.setting-row{display:flex;align-items:center;justify-content:space-between;padding:14px 2px;border-bottom:1px solid var(--border-soft);font-weight:600;font-size:.94rem;}
.setting-row:first-of-type{border-top:1px solid var(--border-soft);}
.switch{position:relative;display:inline-block;width:50px;height:28px;flex-shrink:0;}
.switch input{opacity:0;width:0;height:0;margin:0;}
.slider{position:absolute;cursor:pointer;inset:0;background:var(--surface-3);border-radius:28px;transition:.2s;}
.slider::before{content:"";position:absolute;height:22px;width:22px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s var(--ease);box-shadow:0 1px 3px rgba(0,0,0,.25);}
.switch input:checked + .slider{background:var(--orange);}
.switch input:checked + .slider::before{transform:translateX(22px);}
.settings-actions{display:flex;flex-direction:column;gap:8px;margin-top:20px;}

/* --- Classement (leaderboard) --- */
.lb-modal{max-width:480px;text-align:left;}
.lb-title{text-align:center;margin-bottom:16px;}
.lb-tabs{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-bottom:16px;}
.lb-mode{display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);margin:0 auto;}
.lb-mode-btn{padding:8px 16px;border-radius:999px;font-size:.85rem;font-weight:700;color:var(--text-2);background:transparent;border:0;transition:.15s var(--ease);}
.lb-mode-btn.active{background:var(--grad-orange);color:#fff;}
.lb-row-tabs{display:flex;gap:7px;width:100%;overflow-x:auto;padding:2px 2px 6px;scroll-snap-type:x proximity;scrollbar-width:thin;}
.lb-row-tabs .lb-tab{flex:0 0 auto;scroll-snap-align:center;}
.lb-hint{margin:0 0 4px;text-align:center;font-size:.8rem;color:var(--text-2);}
.lb-tab{padding:8px 13px;border-radius:999px;background:var(--surface-2);color:var(--text-2);font-size:.82rem;font-weight:600;border:1px solid var(--border);transition:.15s var(--ease);}
.lb-tab:hover{color:var(--text);border-color:rgba(255,106,42,.4);}
.lb-tab.active{background:var(--grad-orange);color:#fff;border-color:transparent;}
.lb-list{max-height:56vh;overflow-y:auto;display:flex;flex-direction:column;gap:7px;padding-right:2px;}
.lb-row{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);font-weight:600;}
.lb-row:hover{border-color:var(--border);background:var(--surface-3);}
.lb-row.top{background:linear-gradient(180deg,rgba(255,106,42,.16),rgba(255,106,42,.04));border-color:rgba(255,106,42,.35);}
.lb-row.me{background:linear-gradient(180deg,rgba(255,106,42,.22),rgba(255,106,42,.06));border-color:rgba(255,106,42,.5);box-shadow:var(--glow-orange);}
.lb-rank{width:28px;text-align:center;font-size:1.05rem;flex-shrink:0;}
.lb-avatar{width:34px;height:34px;border-radius:50%;flex-shrink:0;background:var(--surface-3);object-fit:cover;}
.lb-avatar.ghost{display:flex;align-items:center;justify-content:center;font-size:1rem;}
.lb-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.92rem;}
.lb-you{font-style:normal;font-size:.72rem;color:var(--orange-2);background:rgba(255,106,42,.14);padding:2px 7px;border-radius:50px;margin-left:4px;font-weight:700;}
.lb-score{font-weight:800;color:var(--orange-2);font-size:.98rem;flex-shrink:0;}

/* --- Stats profil --- */
.profile-stats{text-align:left;}
.stat-total{display:flex;align-items:baseline;gap:10px;background:rgba(255,106,42,.10);border:1px solid rgba(255,106,42,.20);border-radius:12px;padding:12px 16px;margin-bottom:10px;}
.stat-total b{font-weight:800;font-size:1.6rem;color:var(--orange-2);line-height:1;}
.stat-total span{color:var(--text-2);font-weight:500;font-size:.82rem;}
.stat-list{display:flex;flex-direction:column;gap:6px;max-height:180px;overflow-y:auto;}
.stat-row{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:var(--surface-2);border:1px solid var(--border);border-radius:11px;font-weight:600;font-size:.9rem;}
.stat-row b{color:var(--orange-2);font-weight:800;}

/* ============================================================
   RESPONSIVE — tablette (sidebar compacte)
   ============================================================ */
@media (max-width:1100px){
    .sidebar{width:72px;padding:0 10px;}
    .main{margin-left:72px;}
    .logo{padding:24px 8px 20px;justify-content:center;}
    .logo-text{display:none;}
    .nav-item{justify-content:center;padding:0;}
    .nav-item span{display:none;}
    .nav-item .nav-badge{position:absolute;margin:0;transform:translate(16px,-14px);}
    .sp-connect{font-size:0;}
    .sp-connect::before{content:"";width:20px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h12a5 5 0 0 1 0 10H6a5 5 0 0 1 0-10z'/%3E%3Cpath d='M8 10.5v3M6.5 12h3'/%3E%3Ccircle cx='15.5' cy='10' r='1' fill='%23fff' stroke='none'/%3E%3Ccircle cx='18' cy='13.5' r='1' fill='%23fff' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat;}
    .sp-user .sp-meta,.sp-user .sp-xp{display:none;}
    .sp-user .sp-row{justify-content:center;}
    .game-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
    .hero{grid-template-columns:1fr;padding:36px 28px 32px;}
    .hero-visual{height:280px;margin-top:10px;}
}

/* ============================================================
   RESPONSIVE — mobile (bottom nav)
   ============================================================ */
@media (max-width:768px){
    body{background-attachment:scroll;}
    .sidebar{
        position:fixed;top:auto;bottom:0;left:0;right:0;width:100%;height:64px;
        flex-direction:row;padding:6px 10px;border-right:none;border-top:1px solid var(--border);
        background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    }
    .sidebar .logo,.sidebar .sidebar-footer{display:none;}
    .sidebar .nav{flex-direction:row;justify-content:space-around;margin:0;width:100%;}
    .nav-item{height:52px;flex:1;justify-content:center;border-radius:12px;}
    .nav-item span{display:none;}
    .nav-item .nav-badge{position:absolute;transform:translate(16px,-12px);}
    .main{margin-left:0;padding-bottom:76px;}
    .topbar{padding:10px 16px;gap:10px;}
    .topbar-actions .pill{padding:0 11px;}
    .pill-discord span,.pill span:not(.online-dot):not(#onlineCount){display:none;}
    .pill-online{display:inline-flex;}
    .search{flex:1 1 auto;}
    .hero{padding:28px 16px 24px;grid-template-columns:1fr;}
    .hero h1{font-size:2rem;}
    .hero-desc{font-size:.94rem;}
    .hero-benefits{flex-direction:column;gap:14px;margin-top:22px;}
    .benefit{padding:0 !important;}
    .benefit + .benefit::before{display:none;}
    .hero-visual{height:220px;}
    .section{padding:22px 16px 6px;}
    .section-title{font-size:1.25rem;}
    .game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
    .discover-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .game-card__cover{height:110px;}
    .game-card.disco .game-card__cover{height:96px;}
    .footer{padding:22px 16px 32px;}
}

/* Motion réduite */
/* ================= CHAT (DM + salon communautaire) ================= */
.chat-modal{
    max-width:760px;padding:0;text-align:left;overflow:hidden;
    display:flex;flex-direction:column;
}
.chat-layout{display:flex;height:min(560px,78vh);}
.chat-side{
    width:250px;flex-shrink:0;border-right:1px solid var(--border);
    display:flex;flex-direction:column;background:var(--surface-2);
}
.chat-side__title{
    font-size:.74rem;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
    color:var(--text-3);padding:16px 18px 10px;display:flex;align-items:center;gap:7px;
}
.chat-side__title svg{color:var(--orange);}
.chat-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:4px;padding:0 8px 12px;}
.chat-item{
    display:flex;align-items:center;gap:11px;width:100%;text-align:left;
    background:transparent;border:1px solid transparent;border-radius:12px;
    padding:9px 10px;cursor:pointer;transition:background .15s var(--ease);
    font-family:var(--font);
}
.chat-item:hover{background:var(--surface-3);}
.chat-item.active{background:var(--surface);border-color:var(--border);box-shadow:0 2px 8px rgba(120,70,20,.08);}
.chat-item__ico{
    width:40px;height:40px;flex-shrink:0;border-radius:11px;display:flex;align-items:center;justify-content:center;
    background:var(--grad-orange);color:#fff;
}
.chat-item__avatar{width:40px;height:40px;flex-shrink:0;border-radius:50%;overflow:hidden;border:1px solid var(--border);background:var(--surface-2);}
.chat-item__avatar img{width:100%;height:100%;object-fit:cover;}
.chat-item__meta{display:flex;flex-direction:column;min-width:0;flex:1;}
.chat-item__meta b{font-size:.86rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chat-item__meta span{font-size:.76rem;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chat-item__badge{
    font-style:normal;background:var(--orange);color:#fff;font-size:.68rem;font-weight:700;
    min-width:18px;height:18px;line-height:18px;text-align:center;border-radius:50%;padding:0 5px;flex-shrink:0;
}

.chat-thread{flex:1;display:flex;flex-direction:column;min-width:0;}
.chat-head{
    padding:12px 54px 12px 18px;border-bottom:1px solid var(--border);
    display:flex;align-items:center;gap:9px;
}
.chat-head h3{font-size:1.02rem;font-weight:800;color:var(--text);letter-spacing:-.2px;}
.chat-sub{font-size:.76rem;color:var(--text-3);display:flex;align-items:center;gap:6px;margin-left:auto;}
.chat-sub .dot{width:8px;height:8px;border-radius:50%;}
.chat-back{
    display:none;width:34px;height:34px;flex-shrink:0;align-items:center;justify-content:center;
    background:var(--surface-2);color:var(--text);border:1px solid var(--border);border-radius:10px;cursor:pointer;
}
.chat-back:hover{background:var(--surface-3);}

.chat-messages{
    flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:10px;
    background:var(--bg);
}
.chat-empty{color:var(--text-3);font-size:.85rem;text-align:center;margin:auto;}
.msg{display:flex;gap:9px;max-width:78%;}
.msg.mine{align-self:flex-end;flex-direction:row-reverse;}
.msg__avatar{width:34px;height:34px;border-radius:50%;flex-shrink:0;border:1px solid var(--border);background:var(--surface-2);}
.msg__body{
    display:flex;flex-direction:column;gap:3px;background:var(--surface-2);
    border:1px solid var(--border);padding:8px 12px;border-radius:14px;border-top-left-radius:4px;
    box-shadow:0 1px 3px rgba(120,70,20,.06);
}
.msg.mine .msg__body{background:var(--grad-orange);border-color:transparent;border-radius:14px;border-top-right-radius:4px;}
.msg__name{font-size:.72rem;font-weight:700;color:var(--orange);}
.msg.mine .msg__name{color:rgba(255,255,255,.85);}
.msg__text{font-size:.9rem;color:var(--text);word-break:break-word;overflow-wrap:anywhere;line-height:1.4;}
.msg.mine .msg__text{color:#fff;}
.msg__time{font-size:.66rem;color:var(--text-3);align-self:flex-end;}
.msg.mine .msg__time{color:rgba(255,255,255,.75);}

.chat-input{
    display:flex;gap:9px;padding:12px 14px;border-top:1px solid var(--border);background:var(--surface);
}
.chat-input input{
    flex:1;margin:0;padding:12px 14px;background:var(--surface-2);border:1px solid var(--border);
    color:var(--text);border-radius:12px;font-size:.9rem;outline:none;transition:.2s var(--ease);font-family:var(--font);
}
.chat-input input:focus{border-color:rgba(255,106,42,.55);box-shadow:0 0 0 4px rgba(255,106,42,.14);}
.chat-send{width:46px;height:46px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:12px;flex-shrink:0;}

@media (max-width:600px){
    .chat-modal{max-width:100%;height:100vh;max-height:100vh;border-radius:0;}
    .chat-layout{height:100%;}
    .chat-side{width:100%;border-right:none;}
    .chat-layout .chat-thread{display:none;}
    .chat-layout.open .chat-side{display:none;}
    .chat-layout.open .chat-thread{display:flex;}
    .chat-back{display:inline-flex;}
}

@media (prefers-reduced-motion:reduce){
    *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}

/* ============================================================
   TENDANCES — carrousel des jeux les plus joués (en direct)
   Défilement natif (scroll-snap) : glisser au doigt, trackpad,
   flèches, vignettes, clavier. Lecture auto en pause au survol/focus.
   ============================================================ */
.trending{max-width:1600px;margin:0 auto;width:100%;padding:8px 36px 8px;}
.trend-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
.trend-title{
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0;
    font-family:'Plus Jakarta Sans',var(--font);font-size:1.5rem;font-weight:750;letter-spacing:-.3px;
}
.trend-live{
    display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
    background:var(--danger);color:#fff;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
}
.trend-live i{width:7px;height:7px;border-radius:50%;background:#fff;animation:trendPulse 1.6s ease-in-out infinite;}
.trend-live[hidden]{display:none;}
.trend-nav{display:flex;gap:8px;}
.trend-arrow{
    width:42px;height:42px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
    background:var(--surface);color:var(--text);border:1px solid var(--border);box-shadow:var(--shadow-card);
    transition:transform .15s var(--ease),border-color .15s;
}
.trend-arrow:hover{border-color:var(--orange);transform:translateY(-1px);}

.trend-viewport{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg);background:#1a130c;}
.trend-track{
    list-style:none;margin:0;padding:0;display:flex;overflow-x:auto;
    scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;
}
.trend-track::-webkit-scrollbar{display:none;}
.trend-slide{
    position:relative;flex:0 0 100%;scroll-snap-align:start;isolation:isolate;overflow:hidden;
    display:grid;grid-template-columns:1.05fr 1fr;gap:32px;align-items:center;
    min-height:340px;padding:34px 40px;color:#fff;
}
/* fond : l'image du jeu floutée (les miniatures 640×400 restent nettes à droite) */
.trend-bg{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
    filter:blur(28px) saturate(1.3) brightness(.6);transform:scale(1.25);
}
.trend-slide::after{
    content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(90deg,rgba(14,10,6,.82) 0%,rgba(14,10,6,.45) 55%,rgba(14,10,6,.2) 100%);
}
.trend-rank{
    display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:999px;
    background:var(--grad-orange);font-size:.8rem;font-weight:800;box-shadow:var(--glow-orange);
}
.trend-info h3{
    font-family:'Plus Jakarta Sans',var(--font);font-size:clamp(1.9rem,3.4vw,2.9rem);font-weight:800;
    letter-spacing:-1px;line-height:1.05;margin:14px 0 8px;
}
.trend-desc{color:rgba(255,255,255,.84);font-size:1rem;max-width:460px;}
.trend-stats{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 20px;}
.trend-stats span{
    display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;font-size:.84rem;font-weight:600;
    background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.trend-stats .is-live{background:rgba(31,165,107,.28);border-color:rgba(53,214,140,.6);}
.trend-stats .is-live::before{
    content:"";width:8px;height:8px;border-radius:50%;background:#35d68c;animation:trendPulse 1.6s ease-in-out infinite;
}
.trend-play{
    display:inline-flex;align-items:center;gap:9px;min-height:50px;padding:0 28px;border:0;border-radius:14px;cursor:pointer;
    background:var(--grad-orange);color:#fff;font:800 1.02rem var(--font);box-shadow:var(--glow-orange);
    transition:transform .15s var(--ease),filter .15s;
}
.trend-play:hover{transform:translateY(-2px);filter:brightness(1.06);}
.trend-art img{
    display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:18px;
    border:1px solid rgba(255,255,255,.18);box-shadow:0 22px 50px rgba(0,0,0,.45);
}

.trend-thumbs{display:flex;gap:10px;margin-top:14px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 6px;}
.trend-thumbs::-webkit-scrollbar{display:none;}
.trend-thumb{
    flex:0 0 auto;display:flex;align-items:center;gap:9px;padding:6px 14px 6px 6px;cursor:pointer;
    border-radius:14px;border:1px solid var(--border);background:var(--surface);color:var(--text);
    font:700 .85rem var(--font);transition:border-color .15s,box-shadow .15s,transform .15s var(--ease);
}
.trend-thumb:hover{transform:translateY(-1px);}
.trend-thumb img{width:48px;height:30px;object-fit:cover;border-radius:8px;}
.trend-thumb b{color:var(--orange);}
.trend-thumb .tdot{width:7px;height:7px;border-radius:50%;background:#35d68c;}
.trend-thumb[aria-selected="true"]{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,106,42,.22);}
.trend-arrow:focus-visible,.trend-play:focus-visible,.trend-thumb:focus-visible,.trend-track:focus-visible{
    outline:3px solid var(--sun);outline-offset:3px;
}
@keyframes trendPulse{0%,100%{opacity:1;}50%{opacity:.35;}}

@media (max-width:768px){
    .trending{padding:6px 16px 8px;}
    .trend-title{font-size:1.2rem;}
    .trend-arrow{width:38px;height:38px;}
    .trend-slide{grid-template-columns:1fr;gap:16px;min-height:0;padding:16px 16px 20px;align-items:start;}
    .trend-art{order:-1;}
    .trend-art img{border-radius:14px;}
    .trend-info h3{margin:10px 0 6px;}
    .trend-desc{font-size:.92rem;}
    .trend-stats{margin:12px 0 16px;}
    .trend-play{width:100%;justify-content:center;}
}
@media (prefers-reduced-motion:reduce){
    .trend-live i,.trend-stats .is-live::before{animation:none;}
    .trend-track{scroll-behavior:auto;}
}

/* Recherche : bandeau de résultats (au-dessus de « Tes jeux ») */
.search-result{max-width:calc(1600px - 72px);width:calc(100% - 72px);margin:18px auto -4px;box-sizing:border-box;padding:10px 14px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);color:var(--text);font-weight:600;font-size:.92rem;scroll-margin-top:84px;}
.search-result[hidden],.section[hidden]{display:none;}
@media (max-width:768px){.search-result{width:calc(100% - 32px);}}
/* Mobile : la recherche passe sur sa propre ligne, pleine largeur (sinon les boutons l'écrasent à la taille d'une icône) */
@media (max-width:600px){
    .topbar{flex-wrap:wrap;row-gap:8px;}
    .topbar-actions{width:100%;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;}
    .topbar-actions .pill{white-space:nowrap;flex-shrink:0;}
    .topbar-actions .pill-fs{margin-left:auto;}
    .topbar-actions::-webkit-scrollbar{display:none;}
    .search{order:2;flex:1 1 100%;max-width:none;}
}