@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Inter:wght@400;450;500;600;700&display=swap');

/* ═══════════════════════════════════════════════════════════════════
   SpaceBump — feuille de style
   Warm dark · accent corail (parcimonieux) · surfaces plates ·
   bordures fines · monospace pour les données. Conçu pour respirer
   la main d'un dev, pas d'un générateur : retenue > décoration.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Surfaces — neutres chaudes, peu d'écart entre les niveaux */
  --bg:     #0c0a09;
  --bg-2:   #110e0c;
  --surf:   #15120f;
  --surf-2: #1b1713;
  --raise:  #221d18;
  --deep:   #0a0807;

  /* Accent — utilisé avec parcimonie, juste pour l'action et l'actif */
  --acc:    #f2683c;
  --acc-h:  #ff7d54;
  --acc-d:  #c84e26;
  --acc-w:  rgba(242,104,60,0.10);   /* wash très léger */

  --gold:   #d99a2b;
  --gold-w: rgba(217,154,43,0.10);
  --green:  #3f9d5f;
  --red:    #d65151;

  /* Texte */
  --tx:     #ebe7e1;
  --tx-2:   #b8b2a8;
  --mut:    #7c756b;
  --faint:  #4a443c;

  /* Lignes — c'est elles qui structurent (pas les ombres) */
  --ln:     rgba(235,231,225,0.08);
  --ln-2:   rgba(235,231,225,0.13);

  /* Rayons — nets, faibles, cohérents */
  --r-xs: 3px; --r-sm: 5px; --r: 7px; --r-lg: 10px;

  /* Ombres — discrètes, jamais colorées */
  --sh-s: 0 1px 2px rgba(0,0,0,0.30);
  --sh:   0 2px 8px rgba(0,0,0,0.35);
  --sh-l: 0 8px 28px rgba(0,0,0,0.45);

  --t: 0.14s ease;

  --f-d: 'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  --f:   'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --f-m: ui-monospace,'SF Mono','Cascadia Code','JetBrains Mono','Roboto Mono',Menlo,Consolas,monospace;
}

/* ── Remap variables pages ── */
body {
  --bg-main:var(--bg)!important; --bg-card:var(--surf)!important;
  --bg-elevated:var(--surf-2)!important; --bg0:var(--deep)!important;
  --bg1:var(--bg)!important; --bg2:var(--surf)!important;
  --panel:var(--surf)!important; --panel2:var(--surf-2)!important;
  --card:var(--surf)!important; --card2:var(--surf-2)!important;
  --accent:var(--acc)!important; --acc:var(--acc)!important; --brand:var(--acc)!important;
  --theme-a:var(--acc)!important; --theme-b:var(--acc-h)!important; --theme-c:var(--acc-h)!important;
  --accent2:var(--acc-d)!important; --accent-soft:var(--acc-w)!important;
  --text-main:var(--tx)!important; --txt:var(--tx)!important; --muted2:var(--tx)!important;
  --text-muted:var(--mut)!important; --mut:var(--mut)!important;
  --border:var(--ln)!important; --border-muted:var(--ln)!important;
  --border2:var(--ln-2)!important; --line:var(--ln)!important;
  --success:var(--green)!important; --good:var(--green)!important;
  --danger:var(--red)!important; --bad:var(--red)!important;
  --gold:var(--gold)!important; --premium-gold:var(--gold)!important;
  --vip-gold:var(--gold)!important; --adv-gold:var(--gold)!important;
  --shadow-1:var(--sh-s)!important; --shadow-2:var(--sh)!important;
  --radius-2:var(--r-lg)!important; --r:var(--r)!important;
  --card-radius:var(--r)!important; --btn-radius:var(--r-sm)!important;
  --tag-radius:var(--r-sm)!important; --sb-radius:var(--r)!important;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}

body {
  margin:0; font-family:var(--f);
  background-color:var(--bg)!important;
  /* Vignette statique très discrète — aucune animation, aucun blob */
  background-image:radial-gradient(120% 80% at 50% -20%, rgba(242,104,60,0.045), transparent 45%)!important;
  background-attachment:fixed!important;
  color:var(--tx)!important;
  line-height:1.6;
  font-size:15px;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-0.003em;
}

/* Wrappers transparents */
body > div:not([class*="modal"]):not([class*="overlay"]):not([class*="topbar"]):not([class*="top-action"]):not([class*="support"]):not([class*="announcement"]):not([class*="loader"]),
body > main,[class*="page-wrap"],[class*="page-body"],[class*="main-content"],[class*="site-wrap"],[class*="sb-wrap"]{
  background-color:transparent!important; position:relative; z-index:1;
}

/* ── Typo ── */
h1,h2,h3,h4{font-family:var(--f-d);color:var(--tx);letter-spacing:-0.02em;line-height:1.2;font-weight:700}
h1{font-weight:800}
a{color:var(--acc);text-decoration:none;transition:color var(--t)}
a:hover{color:var(--acc-h)}

/* Données chiffrées et libellés techniques → monospace (signature dev) */
.stat-value,[class*="stat-value"],[class*="-number"],[class*="count-"],
.member-weekly-trend,.rating-count,.stat-chip{
  font-family:var(--f-m)!important; font-variant-numeric:tabular-nums; letter-spacing:-0.01em;
}

/* ── Barre d'actions haut ── */
.top-actions-bar{background:var(--deep)!important;border-bottom:1px solid var(--ln)!important}
.top-action-btn{background:transparent!important;border:1px solid var(--ln-2)!important;color:var(--mut)!important;font-size:12px!important;font-weight:500!important;border-radius:var(--r-sm)!important;padding:6px 13px!important;transition:all var(--t)!important;letter-spacing:0}
.top-action-btn:hover{background:var(--surf)!important;border-color:var(--ln-2)!important;color:var(--tx-2)!important;transform:none!important}
.top-action-btn-pub{border-color:rgba(217,154,43,0.30)!important;color:var(--gold)!important}

/* ── Support bar ── */
.support-bar{background:var(--deep)!important;border-bottom:1px solid var(--ln)!important;font-size:13px}
.support-phone,.support-bar a{color:var(--acc)!important;font-weight:600!important;font-family:var(--f-m)!important;letter-spacing:-0.02em}
.support-btn{background:transparent!important;border:1px solid var(--ln-2)!important;color:var(--mut)!important;border-radius:var(--r-sm)!important;font-size:12px!important;font-weight:500!important;transition:all var(--t)!important}
.support-btn:hover{background:var(--surf)!important;color:var(--tx-2)!important;transform:none!important}
.support-btn-live{border-color:rgba(63,157,95,0.32)!important;color:var(--green)!important}

/* ── Bandeau annonce ── (sobre : fond plat, pas de dégradé) */
.announcement-bar{background:var(--surf)!important;border-bottom:1px solid var(--ln)!important;color:var(--tx-2)!important;font-weight:500!important;font-size:12.5px!important;letter-spacing:0!important;text-align:left!important}
.announcement-bar strong{color:var(--acc)!important;font-weight:700!important}

/* ── Topbar ── (1px de ligne, pas de blur lourd ni de glow) */
.topbar{background:rgba(12,10,9,0.92)!important;border-bottom:1px solid var(--ln)!important;backdrop-filter:blur(10px)!important;position:sticky!important;top:0;z-index:100!important}
body.theme-light .topbar{background:rgba(247,244,239,0.92)!important}
.topbar::after{display:none!important} /* pas de ligne décorative */

.brand-logo{background:var(--surf-2)!important;border:1px solid var(--ln-2)!important;border-radius:var(--r-sm)!important;box-shadow:none!important;overflow:hidden!important}
.brand-logo img{width:100%!important;height:100%!important;object-fit:cover!important}
.brand-title{font-family:var(--f-d)!important;font-weight:700!important;font-size:16px!important;letter-spacing:-0.02em!important;color:var(--tx)!important;background:none!important;-webkit-text-fill-color:currentColor!important}
.brand-sub{color:var(--faint)!important;font-size:11px!important;font-family:var(--f)!important;letter-spacing:0!important}

/* Nav links — soulignement net (2px) sans glow */
.nav-link{position:relative!important;background:transparent!important;border:none!important;color:var(--mut)!important;font-family:var(--f)!important;font-size:13px!important;font-weight:500!important;padding:5px 1px!important;margin:0 9px!important;border-radius:0!important;transition:color var(--t)!important}
.nav-link::after{content:'';position:absolute;left:0;bottom:-5px;height:2px;width:0;background:var(--acc);transition:width var(--t)}
.nav-link:hover{color:var(--tx)!important;transform:none!important}
.nav-link:hover::after{width:100%}

/* Nav buttons */
.nav-btn{border-radius:var(--r-sm)!important;font-weight:600!important;font-size:13px!important;background:transparent!important;border:1px solid var(--ln-2)!important;color:var(--tx)!important;transition:all var(--t)!important;box-shadow:none!important}
.nav-btn:hover{transform:none!important;background:var(--surf)!important;border-color:var(--ln-2)!important;filter:none!important}
.nav-btn-primary{background:var(--acc)!important;border:1px solid var(--acc)!important;color:#fff!important;box-shadow:none!important}
.nav-btn-primary:hover{background:var(--acc-d)!important;border-color:var(--acc-d)!important;filter:none!important;box-shadow:none!important;transform:none!important}
.nav-btn-strong{border-color:var(--acc)!important;color:var(--acc)!important}

.subbar{background:var(--deep)!important;border-top:1px solid var(--ln)!important}
.user-pill{background:var(--surf)!important;border:1px solid var(--ln)!important;border-radius:var(--r-sm)!important;box-shadow:none!important}
.user-pill .mini-admin{background:var(--acc)!important;border:none!important;color:#fff!important;box-shadow:none!important;border-radius:var(--r-xs)!important}

/* ── Boutons ── (plats, hover sobre — pas de translateY, pas de glow) */
.btn{border-radius:var(--r-sm)!important;font-weight:600!important;font-size:13.5px!important;padding:10px 18px!important;display:inline-flex!important;align-items:center!important;gap:7px!important;transition:all var(--t)!important;font-family:var(--f)!important}
.btn-primary{background:var(--acc)!important;border:1px solid var(--acc)!important;color:#fff!important;box-shadow:none!important}
.btn-primary:hover{background:var(--acc-d)!important;border-color:var(--acc-d)!important;transform:none!important;box-shadow:none!important;filter:none!important;color:#fff!important}
.btn-ghost{background:transparent!important;border:1px solid var(--ln-2)!important;color:var(--tx)!important}
.btn-ghost:hover{background:var(--surf)!important;border-color:var(--mut)!important;transform:none!important}

/* ── Hero ── (texte plein, pas de dégradé sur les mots) */
.hero{background:transparent!important;border:none!important;box-shadow:none!important;padding:56px 0 44px!important;position:relative;z-index:1}
.hero-main-title{font-family:var(--f-d)!important;font-size:clamp(28px,4.6vw,46px)!important;font-weight:800!important;letter-spacing:-0.03em!important;color:var(--tx)!important;line-height:1.1!important;margin-bottom:16px!important}
.hero-highlight{display:inline!important;color:var(--acc)!important;background:none!important;-webkit-text-fill-color:var(--acc)!important;border:none!important;box-shadow:none!important;padding:0!important;border-radius:0!important}
.hero-subtitle{color:var(--tx-2)!important;font-size:15px!important;line-height:1.68!important;max-width:600px;margin-bottom:26px!important}
.hero-note{color:var(--mut)!important;font-size:12.5px!important;line-height:1.6!important;margin-top:18px!important}
.hero-actions{display:flex!important;gap:10px!important;flex-wrap:wrap!important}

/* ── Stats ── (encart bordé sobre, chiffres en mono) */
.stats-card{background:var(--surf)!important;border:1px solid var(--ln)!important;border-radius:var(--r)!important;box-shadow:none!important;padding:20px!important}
.label-small{color:var(--faint)!important;font-size:11px!important;font-weight:600!important;text-transform:uppercase!important;letter-spacing:0.06em!important;font-family:var(--f)!important}
.stats-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:1px!important;background:var(--ln)!important;border:1px solid var(--ln)!important;border-radius:var(--r-sm)!important;overflow:hidden!important}
.stat-item{background:var(--surf)!important;border:none!important;border-radius:0!important;padding:16px!important;transition:background var(--t)!important}
.stat-item:hover{background:var(--surf-2)!important;transform:none!important}
.stat-label{font-size:10.5px!important;font-weight:600!important;text-transform:uppercase!important;letter-spacing:0.06em!important;color:var(--faint)!important;margin-bottom:6px!important;font-family:var(--f)!important}
.stat-value{font-family:var(--f-m)!important;font-size:24px!important;font-weight:600!important;color:var(--tx)!important;letter-spacing:-0.02em!important;line-height:1!important;margin-bottom:5px!important}
.stat-chip{font-size:10.5px!important;color:var(--faint)!important;font-weight:400!important;font-family:var(--f)!important}
.vip-info,.vip-info *{font-size:12.5px!important;color:var(--mut)!important;line-height:1.6}

/* ── Cartes serveur ── (plates, bordure fine, hover = bordure seulement) */
.server-card,.server-card-v2{
  position:relative!important; background:var(--surf)!important;
  border:1px solid var(--ln)!important; border-radius:var(--r)!important;
  box-shadow:none!important; transition:border-color var(--t), background var(--t)!important;
  overflow:hidden!important;
}
.server-card:hover,.server-card-v2:hover{
  background:var(--surf-2)!important; border-color:var(--ln-2)!important;
  box-shadow:none!important; transform:none!important;
}
.server-card-elite{border-color:rgba(217,154,43,0.22)!important}
.server-card-elite:hover{border-color:rgba(217,154,43,0.40)!important}

.server-card-banner{height:88px!important;overflow:hidden!important;position:relative!important;border-bottom:1px solid var(--ln)!important}
.server-card-banner img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important}
.server-card-banner::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 50%,rgba(21,18,15,0.78))}
img[src=""],img[src="null"],img[src="undefined"],img:not([src]){display:none!important;width:0!important;height:0!important}

/* Badge — fin, plat */
.premium-pill{position:absolute!important;top:9px!important;left:10px!important;z-index:2!important;background:var(--gold-w)!important;border:1px solid rgba(217,154,43,0.36)!important;color:var(--gold)!important;font-size:10.5px!important;font-weight:600!important;padding:3px 9px!important;border-radius:var(--r-xs)!important;display:inline-flex!important;align-items:center!important;gap:4px!important;letter-spacing:0.02em!important;backdrop-filter:none!important}
.premium-pill-elite{background:var(--gold-w)!important;border-color:rgba(217,154,43,0.45)!important;box-shadow:none!important}

.card-top{display:flex!important;align-items:flex-start!important;gap:11px!important;padding:13px 14px 8px!important}
.server-icon{flex-shrink:0!important;width:46px!important;height:46px!important;border-radius:var(--r-sm)!important;overflow:hidden!important;background:var(--raise)!important;border:1px solid var(--ln-2)!important}
.server-icon img{width:100%!important;height:100%!important;object-fit:cover!important}
.server-icon-fallback{font-size:20px!important;display:flex!important;align-items:center!important;justify-content:center!important;height:100%!important}
.server-name{font-family:var(--f-d)!important;font-size:14px!important;font-weight:700!important;color:var(--tx)!important;letter-spacing:-0.01em!important;margin-bottom:3px!important}
.card-stats{display:flex!important;flex-wrap:wrap!important;gap:9px!important}
.stat,.stat *{font-size:12px!important;color:var(--mut)!important;font-family:var(--f-m)!important}
.stat-ico{font-size:11px!important}

/* Tags — sobres, rectangulaires */
[class*="tag"]{display:inline-flex!important;background:transparent!important;border:1px solid var(--ln-2)!important;color:var(--mut)!important;font-size:11px!important;font-weight:500!important;padding:3px 8px!important;border-radius:var(--r-xs)!important;letter-spacing:0!important;transition:all var(--t)!important}
[class*="tag"]:hover{background:var(--surf-2)!important;border-color:var(--mut)!important;color:var(--tx-2)!important}

/* Badges sémantiques — washes très légers, pas saturés */
.premium-pill,[class*="vip-badge"],[class*="premium-badge"]{background:var(--gold-w)!important;border:1px solid rgba(217,154,43,0.34)!important;color:var(--gold)!important}
[class*="elite"]:not(img):not([class*="content"]):not([class*="text"]):not([class*="wrap"]):not([class*="section"]):not(.server-card-elite){background:var(--gold-w)!important;background-image:none!important;border:1px solid rgba(217,154,43,0.36)!important;color:var(--gold)!important;box-shadow:none!important}
[class*="verif"]:not(input):not(form):not([class*="section"]):not([class*="btn-"]){background:rgba(63,157,95,0.09)!important;border:1px solid rgba(63,157,95,0.26)!important;color:var(--green)!important}
[class*="partenaire"]:not([class*="section"]):not([class*="content"]){background:var(--gold-w)!important;border:1px solid rgba(217,154,43,0.30)!important;color:var(--gold)!important}
[class*="recommand"],[class*="recommend"]{background:var(--acc-d)!important;background-image:none!important;color:#fff!important}
[class*="join-btn"],[class*="btn-join"],a[href*="discord.com/invite"]{background:var(--acc)!important;background-image:none!important;color:#fff!important;border:1px solid var(--acc)!important;border-radius:var(--r-sm)!important;font-weight:600!important;box-shadow:none!important}
[class*="star"],[class*="rating"]{color:var(--gold)!important}
.rating-count{color:var(--mut)!important}

/* ── Formulaires ── */
input[type="text"],input[type="search"],input[type="email"],input[type="password"],input[type="url"],input[type="number"],select,textarea{background:var(--deep)!important;border:1px solid var(--ln-2)!important;border-radius:var(--r-sm)!important;color:var(--tx)!important;font-family:var(--f)!important;font-size:14px!important;padding:10px 13px!important;outline:none!important;transition:border-color var(--t)!important}
input:focus,select:focus,textarea:focus{border-color:var(--acc)!important;box-shadow:none!important}
input::placeholder,textarea::placeholder{color:var(--faint)!important}
label{font-size:12.5px!important;color:var(--tx-2)!important;font-weight:500}

/* ── Chips / filtres ── */
[class*="chip"],[class*="filter"]{background:transparent!important;border:1px solid var(--ln-2)!important;color:var(--mut)!important;font-size:12px!important;font-weight:500!important;padding:6px 12px!important;border-radius:var(--r-sm)!important;transition:all var(--t)!important;cursor:pointer}
[class*="chip"]:hover,[class*="filter"]:hover{background:var(--surf-2)!important;color:var(--tx-2)!important;border-color:var(--mut)!important}
[class*="chip"].active,[class*="filter"].active{background:var(--acc)!important;border-color:var(--acc)!important;color:#fff!important;box-shadow:none!important}

/* ── Panels génériques ── */
[class*="panel"]:not([class*="server"]):not([class*="banner"]):not([class*="media"]){background:var(--surf)!important;border:1px solid var(--ln)!important;border-radius:var(--r)!important;box-shadow:none!important}

/* ── Mode clair ── */
body.theme-light{--bg:#f6f3ee;--bg-2:#efebe4;--surf:#fff;--surf-2:#f7f4ef;--raise:#efebe4;--deep:#ebe7e0;--ln:rgba(28,23,18,0.10);--ln-2:rgba(28,23,18,0.16);--tx:#1a1611;--tx-2:#4d463d;--mut:#6a6258;--faint:#a39a8e}
body.theme-light{background-color:#f6f3ee!important;background-image:radial-gradient(120% 80% at 50% -20%,rgba(242,104,60,0.05),transparent 45%)!important}
body.theme-light .topbar{background:rgba(246,243,238,0.93)!important}

/* ── Footer ── */
footer,[class*="footer"]{background:var(--deep)!important;border-top:1px solid var(--ln)!important}

/* ── Modales ── (sobres) */
[class*="modal"],[class*="overlay"],[class*="dialog"]{background:rgba(6,5,4,0.78)!important;backdrop-filter:blur(4px)!important;z-index:1000!important}
[class*="modal-content"],[class*="modal-inner"],[class*="dialog-inner"]{background:var(--surf)!important;border:1px solid var(--ln-2)!important;border-radius:var(--r-lg)!important;box-shadow:var(--sh-l)!important}

/* ── Discord ── */
a[href*="auth_discord"],button[class*="discord"],a[class*="discord-btn"]{background:#5865F2!important;color:#fff!important;border:none!important;border-radius:var(--r-sm)!important;font-weight:600!important;padding:11px 22px!important;display:inline-flex!important;align-items:center!important;gap:8px!important;box-shadow:none!important;transition:filter var(--t)!important}
a[href*="auth_discord"]:hover,button[class*="discord"]:hover{filter:brightness(1.07)!important;transform:none!important}

/* ── Avatars ── */
img[class*="avatar"],[class*="avatar"] img{border-radius:50%!important;border:1px solid var(--ln-2)!important;object-fit:cover}

/* ── Tables ── (denses, lignes fines — très "dev") */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{font-size:11px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:var(--faint);font-family:var(--f);padding:9px 12px;border-bottom:1px solid var(--ln-2);text-align:left}
td{padding:10px 12px;border-bottom:1px solid var(--ln);font-family:var(--f)}
td:first-child{font-family:var(--f-m);color:var(--tx-2)}
tr:hover td{background:var(--surf)}

/* ── Alertes ── */
[class*="alert"],[class*="notice"],[class*="message-box"]{background:var(--surf)!important;border:1px solid var(--ln-2)!important;border-left:2px solid var(--acc)!important;border-radius:var(--r-xs)!important;padding:11px 14px!important;font-size:13.5px}

/* ── Progress ── */
[class*="progress"]{background:var(--raise)!important;border-radius:99px!important;overflow:hidden}
[class*="progress"]>*{background:var(--acc)!important;border-radius:99px!important;box-shadow:none!important}

/* ── Scrollbar ── (fine, discrète) */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--ln-2);border-radius:99px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--mut);background-clip:padding-box}
::selection{background:rgba(242,104,60,0.24);color:var(--tx)}
:focus-visible{outline:2px solid var(--acc)!important;outline-offset:1px!important;border-radius:var(--r-xs)!important}

/* ── Entrée : un seul fade discret, pas de stagger théâtral ── */
@keyframes sbFade{from{opacity:0}to{opacity:1}}
.server-card,.server-card-v2{animation:sbFade .2s ease both}
@media (prefers-reduced-motion: reduce){ .server-card,.server-card-v2{animation:none} }

/* ── Liens nav mis en avant (Recrutements / Points via pubs) ── */
.nav-link-cta{
  background:var(--acc-w)!important;
  border:1px solid rgba(242,104,60,0.30)!important;
  color:var(--acc-h)!important;
  border-radius:var(--r-sm)!important;
  padding:5px 11px!important;
  font-weight:600!important;
}
.nav-link-cta::after{display:none!important}
.nav-link-cta:hover{
  background:var(--acc)!important;
  border-color:var(--acc)!important;
  color:#fff!important;
}