/* ==========================================================================
   TweaxHub — nouveau système de design (v2)
   Principes repris de Liner : surfaces en verre, hairlines discrètes, un seul easing,
   contrôles sobres. Identité TweaxHub : fond noir bleuté + accent rouge #828282.
   Ce fichier REMPLACE tweax-redesign.css, liner-visual.css, ui-polish.css et tweax-ux.css.
   Il se charge en dernier et redéfinit les variables utilisées par tous les CSS de page.
   ========================================================================== */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;

  /* Nouveaux tokens */
  --tx-canvas: #050608;
  --tx-surface: #0b0c10;
  --tx-elevated: #121318;
  --tx-glass: rgba(70, 72, 84, 0.2);
  --tx-glass-solid: rgba(20, 21, 26, 0.92);
  --tx-fill-subtle: rgba(255, 255, 255, 0.035);
  --tx-fill: rgba(255, 255, 255, 0.06);
  --tx-fill-hover: rgba(255, 255, 255, 0.1);
  --tx-fill-strong: rgba(255, 255, 255, 0.14);
  --tx-line: rgba(255, 255, 255, 0.08);
  --tx-line-strong: rgba(255, 255, 255, 0.18);
  --tx-text: #f7f7f8;
  --tx-text-2: rgba(255, 255, 255, 0.68);
  --tx-text-3: rgba(255, 255, 255, 0.42);
  --tx-accent: #828282;
  --tx-accent-soft: rgba(130,130,130,0.14);
  --tx-ok: #808080;
  --tx-warn: #c4c4c4;
  --tx-r-control: 8px;
  --tx-r-item: 12px;
  --tx-r-panel: 20px;
  --tx-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tx-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.85);
  --tx-shadow-sm: 0 8px 24px -10px rgba(0, 0, 0, 0.7);

  /* Anciennes variables (lues par tous les CSS de page) remappées sur le nouveau système */
  --bg: var(--tx-canvas);
  --bg2: var(--tx-surface);
  --bg3: var(--tx-elevated);
  --glass: var(--tx-fill-subtle);
  --glass-border: var(--tx-line);
  --blue: #ececef;
  --blue-light: #ffffff;
  --cyan: #b9bcc6;
  --green: var(--tx-ok);
  --text: var(--tx-text);
  --text-dim: var(--tx-text-2);
  --text-muted: var(--tx-text-3);
  --grad: linear-gradient(180deg, #e9e9ed, #cfd0d6);
  --grad-cyan: linear-gradient(180deg, #e9e9ed, #a9acb6);
  --grad-dark: linear-gradient(180deg, #181a20, #0d0e12);
  --on-light: #08090b;
  --shadow-blue: 0 10px 30px -12px rgba(0, 0, 0, 0.8);
  --shadow-cyan: 0 10px 30px -12px rgba(0, 0, 0, 0.8);
  --radius: var(--tx-r-panel);
  --radius-sm: var(--tx-r-item);
}

/* ── 2. Base ───────────────────────────────────────────────────────────── */
html { background: var(--tx-canvas); scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  background:
    radial-gradient(900px 420px at 50% -120px, rgba(255, 255, 255, 0.045), transparent 70%),
    var(--tx-canvas);
  color: var(--tx-text);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.003em;
}
::selection { background: rgba(130,130,130,0.35); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.26); background-clip: content-box; border: 3px solid transparent; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid rgba(255,255,255,.7); outline-offset: 2px; border-radius: var(--tx-r-control); }

/* Fond : plus d'orbes ni de logo géant, une surface calme */
.bg-orb, .bg-logo { display: none !important; }

/* Transition de page */
#page-content, main { animation: tx-page-in 0.22s var(--tx-ease) both; }
@keyframes tx-page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── 3. Boutons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 18px; height: 40px; border-radius: var(--tx-r-item);
  font: 600 0.88rem/1 "Inter", sans-serif; letter-spacing: -0.005em;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  background: var(--tx-fill); color: var(--tx-text);
  transition: background .18s var(--tx-ease), border-color .18s var(--tx-ease), transform .12s var(--tx-ease), opacity .18s;
}
.btn:hover { background: var(--tx-fill-hover); transform: none; }
.btn:active { transform: scale(0.975); }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-primary { background: #dcdce0; color: #08090b; border-color: transparent; box-shadow: none; }
.btn-primary:hover { background: #ffffff; box-shadow: none; }
.btn-outline { background: transparent; border-color: var(--tx-line-strong); color: var(--tx-text); }
.btn-outline:hover { background: var(--tx-fill); border-color: rgba(255,255,255,.3); }
.btn-ghost { background: transparent; color: var(--tx-text-2); }
.btn-ghost:hover { background: var(--tx-fill); color: var(--tx-text); }
.btn-danger { background: var(--tx-accent-soft); color: var(--tx-accent); border-color: rgba(130,130,130,.22); }
.btn-danger:hover { background: rgba(130,130,130,.22); }
.btn-discord { background: #717171; color: #fff; }
.btn-discord:hover { background: #828282; }
.btn-sm { height: 32px; padding: 0 12px; font-size: .8rem; border-radius: 10px; }
.btn-lg { height: 48px; padding: 0 26px; font-size: .95rem; border-radius: 14px; }
.btn-full { width: 100%; }

/* ── 4. Formulaires ────────────────────────────────────────────────────── */
.form-group { margin-bottom: 1rem; }
.form-label { display: block; margin-bottom: 6px; font-size: .76rem; font-weight: 600; letter-spacing: .01em; color: var(--tx-text-2); }
.form-input, input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="url"], input[type="number"], textarea, select {
  width: 100%; min-height: 40px; padding: 10px 14px;
  background: var(--tx-fill); color: var(--tx-text);
  border: 1px solid var(--tx-line); border-radius: var(--tx-r-item);
  font: 500 .9rem "Inter", sans-serif; outline: none;
  transition: background .18s var(--tx-ease), border-color .18s var(--tx-ease);
}
textarea { resize: vertical; line-height: 1.5; }
.form-input:hover, input:hover, textarea:hover, select:hover { background: var(--tx-fill-hover); }
.form-input:focus, input:focus, textarea:focus, select:focus { background: var(--tx-fill-hover); border-color: rgba(255,255,255,.34); box-shadow: none; }
::placeholder { color: var(--tx-text-3); opacity: 1; }
.form-error { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; background: var(--tx-accent-soft); color: #adadad; font-size: .82rem; font-weight: 500; }
.form-success { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; background: rgba(128,128,128,.12); color: #bebebe; font-size: .82rem; font-weight: 500; }
.form-row { display: flex; gap: 12px; }
.form-check-box { border-radius: 6px; border: 1px solid var(--tx-line-strong); background: var(--tx-fill); }
input[type="range"] { accent-color: #e4e4e8; }

/* ── 5. Barre du haut ──────────────────────────────────────────────────── */
#navbar {
  position: fixed; top: 12px; left: 16px; right: 16px; z-index: 1000;
  height: 56px; padding: 0 14px 0 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--tx-glass); border: 1px solid var(--tx-line); border-radius: var(--tx-r-item);
  -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
  box-shadow: none;
}
#navbar.tx-scrolled { background: rgba(14, 15, 19, .8); }
.nav-logo { display: flex; align-items: center; gap: 10px; font: 700 1.02rem "Inter", sans-serif; letter-spacing: -0.02em; color: var(--tx-text); }
.nav-logo-img { width: 30px; height: 30px; border-radius: 9px; box-shadow: none; }
#sidebar-toggle, #nav-burger { background: transparent; border: 0; color: var(--tx-text-2); border-radius: 10px; width: 36px; height: 36px; }
#sidebar-toggle:hover, #nav-burger:hover { background: var(--tx-fill); color: var(--tx-text); }
#nav-user-area { display: flex; align-items: center; gap: 6px; }
#notif-bell-btn, #friends-btn, #nav-shop-btn {
  position: relative; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 10px; background: transparent; color: var(--tx-text-2); cursor: pointer;
  transition: background .18s var(--tx-ease), color .18s;
}
#notif-bell-btn:hover, #friends-btn:hover, #nav-shop-btn:hover { background: var(--tx-fill); color: var(--tx-text); }
.notif-badge { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--tx-accent); color: #fff; font-size: .62rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; border: 0; }
.user-avatar-btn { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--tx-fill); border: 1px solid transparent; cursor: pointer; transition: background .18s; }
.user-avatar-btn:hover { background: var(--tx-fill-hover); }
.user-avatar-btn .username { font-size: .84rem; font-weight: 600; }
.avatar-circle { border-radius: 50%; object-fit: cover; }
.user-points { color: var(--tx-text-2); font-weight: 600; }
.navbar-status-dot, .status-dot { box-shadow: 0 0 0 3px rgba(128,128,128,.12); }

/* ── 6. Menus déroulants, notifications, modales ───────────────────────── */
.dropdown-menu, .notif-dropdown {
  background: var(--tx-glass-solid); border: 1px solid var(--tx-line); border-radius: 14px;
  box-shadow: var(--tx-shadow); padding: 6px;
  -webkit-backdrop-filter: blur(30px) saturate(150%); backdrop-filter: blur(30px) saturate(150%);
}
.dropdown-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--tx-text-2); font-size: .86rem; font-weight: 550; cursor: pointer; transition: background .15s, color .15s; }
.dropdown-item:hover { background: var(--tx-fill-hover); color: var(--tx-text); }
.dropdown-item.red { color: #adadad; }
.dropdown-item.red:hover { background: var(--tx-accent-soft); color: #979797; }
.dropdown-divider { height: 1px; margin: 6px 4px; background: var(--tx-line); border: 0; }
.notif-dropdown-head { padding: 10px 12px; font-weight: 700; font-size: .86rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--tx-line); }
.notif-item { border-radius: 10px; transition: background .15s; }
.notif-item:hover { background: var(--tx-fill); }
.notif-item-dot { background: var(--tx-accent); }
.notif-empty, .empty-state, .friends-empty, .groups-empty, .sub-empty { color: var(--tx-text-3); }

.modal-overlay { background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.modal {
  background: var(--tx-glass-solid); border: 1px solid var(--tx-line); border-radius: var(--tx-r-panel);
  box-shadow: var(--tx-shadow); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px);
}
.modal-header { border-bottom: 1px solid var(--tx-line); }
.modal-title { font-weight: 700; letter-spacing: -0.015em; }
.modal-close { border-radius: 10px; background: transparent; color: var(--tx-text-2); border: 0; }
.modal-close:hover { background: var(--tx-fill-hover); color: var(--tx-text); }
.modal-footer { border-top: 1px solid var(--tx-line); }
.friends-tab, .sub-add-tab { border-radius: 10px; color: var(--tx-text-2); font-weight: 600; }
.friends-tab.active, .sub-add-tab.active { background: var(--tx-fill-hover); color: var(--tx-text); }

/* ── 7. Notifications toast ────────────────────────────────────────────── */
#toast-container, #tx-toasts { gap: 8px; pointer-events: none; }
.toast, .tx-toast, .notif-toast {
  pointer-events: auto; padding: 12px 16px; border-radius: 12px; min-width: 240px;
  background: var(--tx-glass-solid); border: 1px solid var(--tx-line); color: var(--tx-text);
  font-size: .84rem; font-weight: 560; box-shadow: var(--tx-shadow-sm);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  animation: tx-toast-in .26s var(--tx-ease) both;
}
.toast.success { border-color: rgba(128,128,128,.4); }
.toast.error { border-color: rgba(130,130,130,.45); }
.tx-toast.out { animation: tx-toast-out .22s ease forwards; }
@keyframes tx-toast-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes tx-toast-out { to { opacity: 0; transform: translateY(6px); } }

/* ── 8. Barre latérale (rail en verre) ─────────────────────────────────── */
#cat-sidebar {
  position: fixed; top: 80px; left: 16px; bottom: 16px; width: 252px; z-index: 900;
  display: flex; flex-direction: column; padding: 14px 12px 12px; overflow: hidden auto;
  background: var(--tx-glass); border: 1px solid var(--tx-line); border-radius: var(--tx-r-item);
  -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
  box-shadow: none; transition: width .26s var(--tx-ease);
}
#cat-sidebar.collapsed { width: 76px; }
.cat-sidebar-head { padding: 0 4px 12px; }
.cat-sidebar-head-label { font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-text-3); }
.cat-sidebar-collapse-btn { width: 30px; height: 30px; border-radius: 9px; background: transparent; border: 0; color: var(--tx-text-3); }
.cat-sidebar-collapse-btn:hover { background: var(--tx-fill-hover); color: var(--tx-text); border: 0; }
.cat-list { gap: 2px; border-bottom: 1px solid var(--tx-line); }
.cat-item, .cat-sidebar-footer .dropdown-item {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 10px; margin: 0;
  border: 1px solid transparent; border-radius: var(--tx-r-item);
  color: var(--tx-text-3); font-size: .87rem; font-weight: 580;
  transition: background .16s var(--tx-ease), color .16s var(--tx-ease);
}
.cat-item i, .cat-sidebar-footer .dropdown-item i {
  width: 32px; height: 32px; padding: 7px; flex-shrink: 0; box-sizing: border-box;
  background: transparent; border: 0; border-radius: 10px; box-shadow: none; color: inherit;
  transition: none;
}
.cat-item:hover, .cat-sidebar-footer .dropdown-item:hover { background: var(--tx-fill); color: var(--tx-text); transform: none; }
.cat-item:hover i { background: transparent; transform: none; border: 0; }
.cat-item.active, .cat-item[aria-current="page"], .cat-sidebar-footer .dropdown-item.active {
  background: var(--tx-fill-hover); color: var(--tx-text); border-color: transparent; box-shadow: none; padding: 8px 10px;
}
.cat-item.active::before {
  content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 3px;
  background: var(--tx-accent); box-shadow: none; transform: none;
}
.cat-item.active i { background: transparent; color: var(--tx-text); box-shadow: none; }
.cat-sidebar-footer { border-top: 0; padding-top: 10px; }
.cat-soon { font-size: .6rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--tx-fill); color: var(--tx-text-3); border: 0; }
#dm-sidebar-badge { background: var(--tx-accent); color: #fff; border-radius: 999px; }
#cat-sidebar.collapsed .cat-item, #cat-sidebar.collapsed .cat-sidebar-footer .dropdown-item { justify-content: center; padding: 8px 0; }
#cat-sidebar.collapsed .cat-item.active::before { display: block; left: -12px; }

/* Panneau utilisateur / connexion */
.sidebar-user-panel, .sidebar-login-panel { background: var(--tx-fill-subtle); border: 1px solid var(--tx-line); border-radius: var(--tx-r-item); box-shadow: none; }
.sup-username { font-weight: 650; font-size: .86rem; }
.sup-activity { color: var(--tx-text-3); font-size: .74rem; }
.sup-icon-btn { border-radius: 9px; background: transparent; border: 0; color: var(--tx-text-3); }
.sup-icon-btn:hover { background: var(--tx-fill-hover); color: var(--tx-text); }
.sup-login-btn { width: 100%; }

/* Lecteur latéral (mini-player) */
.sidebar-now-playing { background: var(--tx-fill-subtle); border: 1px solid var(--tx-line); border-radius: 14px; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.tx-playing .sidebar-now-playing { border-color: rgba(255,255,255,.18); box-shadow: none; }
.mini-player-art { border-radius: 10px; overflow: hidden; }
.mini-player-title { font-weight: 650; letter-spacing: -0.01em; }
.mini-player-progress-track { background: var(--tx-fill-strong); border-radius: 4px; height: 4px; }
.mini-player-progress-fill { background: #e4e4e8; border-radius: 4px; }
.mini-player-controls button { border-radius: 50%; background: transparent; border: 0; color: var(--tx-text-2); }
.mini-player-controls button:hover { background: var(--tx-fill-hover); color: var(--tx-text); }
.mini-player-resume-btn { border-radius: 10px; background: var(--tx-fill); border: 0; }
#mobile-menu { background: var(--tx-glass-solid); border: 1px solid var(--tx-line); border-radius: 0 0 var(--tx-r-item) var(--tx-r-item); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); }
.mobile-menu-link { border-radius: 10px; color: var(--tx-text-2); }
.mobile-menu-link:hover { background: var(--tx-fill); color: var(--tx-text); }

/* ── 9. Contenu : en-têtes, cartes, accueil ────────────────────────────── */
.section-title, .hero-title, h1, h2 { letter-spacing: -0.03em; }
.section-header { margin-bottom: 1.4rem; }
.landing-eyebrow { color: var(--tx-text-3); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.grad-text { background: linear-gradient(180deg, #ffffff 30%, #b7bac4 110%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-badge { background: var(--tx-fill); border: 1px solid var(--tx-line); color: var(--tx-text-2); border-radius: 999px; font-weight: 600; }
.hero-desc { color: var(--tx-text-2); }
.hero-card, .channel-card, .feature-card, .step-card, .group-card, .stat-item, .ban-card {
  background: var(--tx-fill-subtle); border: 1px solid var(--tx-line); border-radius: var(--tx-r-panel);
  box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: background .2s var(--tx-ease), border-color .2s var(--tx-ease);
}
.hero-card { background: var(--tx-glass); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.channel-card:hover, .feature-card:hover, .step-card:hover, .group-card:hover, .hero-card:hover {
  background: var(--tx-fill); border-color: var(--tx-line-strong); transform: none; box-shadow: none;
}
.channel-card::after, .feature-card::after, .hero-card::after { display: none; }
.feature-icon, .step-num { background: var(--tx-fill-hover); color: var(--tx-text); border: 0; box-shadow: none; border-radius: 12px; }
.stat-num { color: var(--tx-text); font-weight: 750; letter-spacing: -0.03em; }
.hero-bar { background: linear-gradient(180deg, #f2f2f4, #8d909a); }
.hero-thumb { background: var(--tx-fill-strong); }
#cta-banner .cta-banner-inner { background: var(--tx-glass); border: 1px solid var(--tx-line); border-radius: var(--tx-r-panel); box-shadow: none; }

.site-footer { border-top: 1px solid var(--tx-line); background: transparent; }
.footer-col a, .footer-bottom-links a, .footer-brand p { color: var(--tx-text-3); transition: color .15s; }
.footer-col a:hover, .footer-bottom-links a:hover { color: var(--tx-text); }
.footer-socials a { border-radius: 10px; background: var(--tx-fill); border: 0; }
.footer-socials a:hover { background: var(--tx-fill-hover); }

/* Assistant (bouton flottant + panneau) */
.ai-chat-fab { background: #dcdce0; color: #08090b; box-shadow: var(--tx-shadow-sm); }
.ai-chat-fab:hover { background: #fff; box-shadow: var(--tx-shadow-sm); }
.ai-chat-fab-dot { background: var(--tx-ok); border-color: var(--tx-canvas); }
.ai-chat-panel, .ai-chat-tip { background: var(--tx-glass-solid); border: 1px solid var(--tx-line); box-shadow: var(--tx-shadow); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); }
.ai-chat-head, .ai-chat-form { background: transparent; border-color: var(--tx-line); }
.ai-chat-msg.assistant { background: var(--tx-fill); border: 1px solid var(--tx-line); }
.ai-chat-msg.user { background: #dcdce0; color: #08090b; }
.ai-chat-input { background: var(--tx-fill); border: 1px solid var(--tx-line); border-radius: 12px; }
.ai-chat-send { background: #dcdce0; color: #08090b; border-radius: 12px; }

/* Badges, tableaux, séparateurs */
.badge, .tag, .chip, .pill { border-radius: 999px; }
hr, .divider { border-color: var(--tx-line); }
table { border-color: var(--tx-line); }
thead th { color: var(--tx-text-3); font-weight: 600; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; }
tbody tr:hover { background: var(--tx-fill-subtle); }

/* ── 10. Utilitaires JS existants (palette, progression, squelettes, reveal) ── */
#tx-progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 9999; pointer-events: none; background: linear-gradient(90deg, transparent, var(--tx-accent)); transform-origin: left; transform: scaleX(0); }
.tx-reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--tx-ease), transform .6s var(--tx-ease); }
.tx-reveal.tx-in { opacity: 1; transform: none; }
.tx-skeleton, .skeleton { position: relative; overflow: hidden; background: var(--tx-fill-subtle); border-radius: var(--tx-r-item); min-height: 1em; }
.tx-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); animation: tx-shimmer 1.4s infinite; }
@keyframes tx-shimmer { to { transform: translateX(100%); } }
#tx-palette { position: fixed; inset: 0; z-index: 10000; display: none; align-items: flex-start; justify-content: center; padding: 14vh 1rem 1rem; background: rgba(0,0,0,.5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
#tx-palette.open { display: flex; animation: tx-page-in .16s var(--tx-ease) both; }
.tx-pal-box { width: min(580px, 100%); border-radius: var(--tx-r-panel); overflow: hidden; background: var(--tx-glass-solid); border: 1px solid var(--tx-line); box-shadow: var(--tx-shadow); }
.tx-pal-input, .tx-pal-box input { width: 100%; padding: 16px 20px; font-size: 1rem; background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--tx-line) !important; border-radius: 0 !important; color: var(--tx-text); outline: none; }
.tx-pal-list { max-height: min(52vh, 420px); overflow: auto; padding: 8px; }
.tx-pal-group { padding: 10px 12px 4px; font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--tx-text-3); }
.tx-pal-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--tx-r-item); color: var(--tx-text-2); font-size: .9rem; font-weight: 560; cursor: pointer; }
.tx-pal-item[aria-selected="true"], .tx-pal-item.sel, .tx-pal-item:hover { background: var(--tx-fill-hover); color: var(--tx-text); }
.tx-pal-item kbd, .tx-pal-item small { margin-left: auto; }
.tx-pal-empty { padding: 24px; text-align: center; color: var(--tx-text-3); font-size: .86rem; }
kbd, .tx-kbd { padding: 2px 7px; border-radius: 6px; background: var(--tx-fill); border: 1px solid var(--tx-line); color: var(--tx-text-2); font: 600 .68rem "Inter", sans-serif; }
.tx-help { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; padding: 22px 24px; font-size: .88rem; color: var(--tx-text-2); }

/* ── 11. Mobile ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  #navbar { top: 8px; left: 8px; right: 8px; height: 52px; }
  #cat-sidebar { top: 68px; left: 8px; bottom: 8px; box-shadow: var(--tx-shadow); background: var(--tx-glass-solid); }
}
@media (max-width: 600px) { .btn-lg { height: 44px; padding: 0 20px; } .hero-cta .btn { flex: 1; } }
@media (hover: none) { .channel-card:hover, .feature-card:hover, .hero-card:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .tx-reveal { opacity: 1; transform: none; }
}

/* Statistiques de l'accueil */
.hero-stats { gap: 12px; }
.stat-item { padding: 14px 20px; min-width: 120px; display: flex; flex-direction: column; gap: 4px; }
.stat-label { color: var(--tx-text-3); font-size: .68rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }

/* Corrections de cohérence */
.cat-sidebar-footer .dropdown-item i { width: 32px !important; height: 32px !important; padding: 8px; }
.grad-text { background-size: 100% 100% !important; animation: none !important; -webkit-text-fill-color: transparent; }

/* Compteur « en ligne » : intégré au centre de la barre du haut (ne recouvre plus les pages) */
#online-count-badge {
  position: fixed; top: 24px; left: 50%; right: auto; transform: translateX(-50%); z-index: 1001;
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
  background: var(--tx-fill); border: 1px solid var(--tx-line); color: var(--tx-text-2);
  font-size: .74rem; font-weight: 600; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
@media (max-width: 900px) { #online-count-badge { top: 20px; } }
@media (max-width: 640px) { #online-count-badge { top: 18px; right: auto; left: 50%; padding: 5px 10px; } }

/* Mot mis en avant des titres : ton atténué plutôt qu'un dégradé */
.grad-text, .hero-title .grad-text, .section-title .grad-text {
  background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
  color: rgba(255, 255, 255, 0.5) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.5) !important;
}