/* ================================
   ServeursRank — Global Styles (clean)
   ================================ */

/* ---- Tokens ---- */
:root{
  /* ... tes tokens existants ... */
  --bg: #0b0f14;
  --panel: #111827;
  --panel-2: #0c131c;
  --card: #121923;
  --text: #e6eef7;
  --muted: #9fb3c8;
  --border: #1f2a38;
  --primary: #3b82f6;
  --primary-2: #2563eb;
  --shadow: 0 12px 32px rgba(0,0,0,.35);

  --surface: var(--panel);
  --surface-2: var(--panel-2);
  --stroke: var(--border);
  --txt: var(--text);
  --brand: #6aa7ff;          /* on se sert de --brand pour la lueur */
  --ok: #78e3a0;
  --danger: #ff9b9b;
  --shadow-1: 0 6px 18px rgba(0,0,0,.35);
  --shadow-2: 0 18px 50px rgba(0,0,0,.35);

  --cursor-glow-color: color-mix(in srgb, var(--brand) 32%, transparent);
  --cursor-glow-size: 26vmin;          /* un poil plus petit améliore la perf */
  --cursor-glow-blur: 9px;             /* blur moindre = mieux sur GPU faibles */
  --cursor-glow-opacity: .55;
}

.cursor-glow{
  position:fixed;
  pointer-events:none;
  z-index:9999;
  width:var(--cursor-glow-size,28vmin);
  height:var(--cursor-glow-size,28vmin);
  left:0; top:0;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, var(--cursor-glow-color, rgba(106,167,255,.22)), transparent);
  mix-blend-mode:screen;
  filter:blur(var(--cursor-glow-blur,10px));
  opacity:var(--cursor-glow-opacity,.55);
}
html.is-touch .cursor-glow{ display:none; }
@media (prefers-reduced-motion: reduce){ .cursor-glow{ display:none } }



/* ---- Base ---- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background: radial-gradient(1400px 700px at 10% -10%, #0f1724 0, #0b0f14 40%, #0b0f14 100%);
  font: 16px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial;
}
img{max-width:100%; display:block}
.container{max-width:1100px; margin:0 auto; padding:16px 24px}
a{color:inherit}

/* ================================
   Buttons / Inputs / Cards / Helpers
   ================================ */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:12px; border:1px solid var(--border);
  background:var(--panel-2); color:var(--text); text-decoration:none; cursor:pointer;
  transition: border-color .2s ease, transform .05s ease;
}
.btn:hover{border-color:var(--primary)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:#0f1724}
.btn.primary:hover{border-color:#60a5fa}
.btn.ghost{background:transparent}
.btn.full{width:100%}
.btn.solid{
  background:#0f1724; border:1px solid var(--stroke); color:var(--txt);
  padding:10px 14px; border-radius:12px; text-decoration:none; cursor:pointer; font-weight:700
}
.btn.solid:hover{ border-color:#5f8fff } /* fallback */
@supports (color-mix(in oklab, white 0%, black 0%)){
  .btn.solid:hover{ border-color: color-mix(in oklab, var(--brand), white 18%) }
}

input, select, textarea{
  width:100%; background:var(--panel-2); color:var(--text);
  border:1px solid var(--border); border-radius:12px; padding:10px 12px; outline:none;
}
input:focus, select:focus, textarea:focus{border-color:var(--primary)}

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow);
}

.pill{
  background:var(--panel-2); border:1px solid var(--border);
  padding:6px 10px; border-radius:999px; font-size:12px; color:var(--muted)
}

.muted{color:var(--muted)}
.back{color:var(--muted); text-decoration:none; border:1px solid var(--border); padding:6px 10px; border-radius:8px}
.back:hover{color:var(--text); border-color:var(--primary)}

/* ================================
   NAV — Off-canvas slide
   ================================ */

.topnav{
  position:sticky; top:0; z-index:1000;
  background:rgba(10,14,20,.75);
  border-bottom:1px solid var(--border);
  backdrop-filter:saturate(1.1) blur(10px);
  -webkit-backdrop-filter:saturate(1.1) blur(10px);
}
.nav-row{display:flex; align-items:center; gap:16px}

/* Brand */
.brand{
  display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text);
  font-weight:800; letter-spacing:.2px; font-size:18px;
}
.brand span{color:var(--primary)}
.logo-dot{width:10px; height:10px; border-radius:999px; background:var(--primary); box-shadow:0 0 16px var(--primary)}

/* Desktop actions (droite) */
.nav-actions{margin-left:auto; display:flex; align-items:center; gap:10px}

/* Burger */
.nav-toggle{
  margin-left:auto; display:none; width:44px;height:44px;border-radius:12px;
  background:var(--panel-2); border:1px solid var(--border); align-items:center; justify-content:center;
}
.nav-toggle span{display:block; width:22px; height:2px; background:#bfcfe6; border-radius:2px; margin:3px 0}

/* Overlay */
.nav-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.45); backdrop-filter:blur(2px);
  opacity:0; transition:opacity .2s ease; pointer-events:none;
}
.nav-overlay.show{opacity:1; pointer-events:auto}

/* Slide panel */
.nav-panel{
  position:fixed; top:0; right:0; height:100dvh; width:min(320px,86vw);
  background:linear-gradient(180deg, #0c131c, #0b0f14);
  border-left:1px solid var(--border);
  box-shadow:-20px 0 60px rgba(0,0,0,.35);
  transform:translateX(100%); opacity:.98;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
  display:flex; flex-direction:column; gap:8px;
}
.nav-panel.open{transform:translateX(0)}
.nav-panel-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 18px; border-bottom:1px solid var(--border)
}
.nav-title{font-weight:700}
.nav-close{
  width:36px;height:36px;border-radius:10px;background:var(--panel-2);border:1px solid var(--border);color:var(--text)
}
.nav-links{display:flex; flex-direction:column; padding:10px}
.nav-link{
  display:block; padding:10px 12px; border-radius:10px; text-decoration:none;
  color:var(--text); border:1px solid transparent;
}
.nav-link:hover{background:#0f1724; border-color:var(--border)}
.nav-link.danger{color:#ff9b9b}

.nav-auth-block{margin-top:auto; padding:12px; border-top:1px solid var(--border)}
.user-inline{display:flex; align-items:center; gap:10px; margin-bottom:6px}
.user-text small{display:block}
.avatar{
  width:28px; height:28px; border-radius:999px; display:inline-grid; place-items:center;
  background:#1b2432; border:1px solid var(--border); color:#cfe1ff; font-size:12px;
}

/* User dropdown (desktop) */
.user-menu{position:relative}
.user-btn{
  display:flex; align-items:center; gap:8px; background:var(--panel-2);
  border:1px solid var(--border); border-radius:12px; padding:6px 10px; color:var(--text);
}
.user-btn svg{color:#9fb3c8}
.user-menu .menu{
  position:absolute; top:110%; right:0; min-width:180px; padding:8px;
  border:1px solid var(--border); border-radius:12px; background:var(--panel-2);
  box-shadow:var(--shadow); display:none;
}
.user-menu.open .menu{display:block}
.user-menu .menu a{display:block; padding:8px 10px; border-radius:8px; text-decoration:none; color:var(--text)}
.user-menu .menu a:hover{background:#0f1724}
.user-menu .menu a.danger{color:#ff9b9b}

/* Responsive nav logic */
@media (max-width: 980px){
  .nav-actions{display:none}
  .nav-toggle{display:flex}
}

/* ================================
   Page Headers / Toolbars / Grid
   ================================ */

.site-header{padding:28px 0 10px; border-bottom:1px solid var(--border)}
.site-header h1{margin:0; font-size:clamp(26px,4.5vw,40px)}
.site-header p{margin:.25rem 0 1rem; color:var(--muted)}
.toolbar, .list-toolbar{display:flex; gap:12px; flex-wrap:wrap; margin-top:12px}

.grid{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fill, minmax(250px,1fr));
  padding:22px 0;
}
.card-link{display:block; text-decoration:none; color:inherit}
.card .media{position:relative; aspect-ratio:16/9; background:#0c131c; overflow:hidden; border-radius:16px 16px 0 0}
.card .media img{width:100%; height:100%; object-fit:cover; filter:saturate(1.05) contrast(1.05)}
.card .media .badge{
  position:absolute; right:10px; top:10px; background: rgba(0,0,0,.35);
  backdrop-filter: blur(4px); border:1px solid rgba(255,255,255,.2);
  color:white; padding:6px 10px; border-radius:999px; font-size:12px;
}
.card .body{padding:14px 14px 16px}
.card h3{margin:.25rem 0 .35rem; font-size:18px}
.card p{margin:0; color:var(--muted); font-size:14px}

/* Category hero */
.category-hero{
  border-bottom:1px solid var(--border);
  background: radial-gradient(700px 320px at 20% -10%, rgba(59,130,246,.25) 0, transparent 60%), transparent;
}

/* ================================
   Server Lists (legacy small rows)
   ================================ */

.server-list{list-style:none; padding:0; margin:22px 0; display:flex; flex-direction:column; gap:12px}
.server{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:12px 14px;
  transition:border-color .25s ease, transform .2s ease
}
.server:hover{border-color:#2a3a52; transform:translateY(-2px)}
.server-main{display:flex; flex-direction:column}
.server-name{font-size:16px}
.server-ip{color:var(--muted); font-size:13px}
.server-stats{display:flex; gap:8px; align-items:center; flex-wrap:wrap}

/* (Unique) Status — utilisé partout */
.status{ padding:6px 10px; border-radius:999px; font-size:12px; border:1px solid var(--stroke) }
.status.on{ background:#16361f; color:#7ee591; border-color:#1d4d2a }
.status.off{ background:#3b1a1a; color:#ff9b9b; border-color:#5a2a2a }

.vote-btn{border:1px solid var(--border); background:var(--panel-2); color:var(--text); padding:8px 12px; border-radius:10px; cursor:pointer}
.vote-btn:hover{border-color:var(--primary)}

/* ================================
   Forms (login/register/add server)
   ================================ */

.auth-wrap{display:grid; place-items:start; padding:28px 16px}
.form.card{
  width:100%; max-width:460px; background:var(--card); border:1px solid var(--border);
  border-radius:16px; padding:20px; box-shadow:var(--shadow)
}
.form h2{margin:0 0 10px; font-size:22px}
.form label{display:grid; gap:8px; margin:10px 0}
.form .form-error{
  background:#3b1a1a; color:#ffb3b3; border:1px solid #5a2a2a;
  padding:8px 10px; border-radius:10px; margin:6px 0;
}

/* ================================
   Footer
   ================================ */
.site-footer{border-top:1px solid var(--border); margin-top:24px}
.site-footer small{color:var(--muted)}

/* ================================
   Server Hero (fiche)
   ================================ */
.server-hero{
  position:relative; border-bottom:1px solid var(--border);
  background: radial-gradient(900px 400px at 15% -10%, rgba(59,130,246,.25), transparent 60%);
}
.server-hero .banner{
  max-height:300px; overflow:hidden; border-radius:14px; border:1px solid var(--border);
}
.server-hero .banner img{width:100%; height:100%; object-fit:cover; display:block}
.hero-top{display:grid; grid-template-columns: 1fr 260px; gap:16px; align-items:start; margin-top:12px}
.hero-stats{
  background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:12px; box-shadow:var(--shadow);
  display:grid; grid-template-columns: 1fr auto; gap:8px 10px;
}
.hero-stats .label{color:var(--muted); font-size:13px}
.hero-stats .value{font-weight:800}
.hero-cta .btn{width:100%; padding:12px 14px; font-weight:800}

/* ================================
   NEO SERVER CARDS (grid)
   ================================ */

.server-list.server-grid{ list-style:none; padding:0; margin:0 }
.server-grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  padding-block: 18px;
}

/* Card */
.card-neo{
  display:grid; grid-template-rows: 160px auto; border-radius:16px;
  border:1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  box-shadow: var(--shadow-1); overflow:hidden; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card-neo:hover{
  transform: translateY(-3px); box-shadow: var(--shadow-2);
  border-color:#5f8fff; /* fallback */
}
@supports (color-mix(in oklab, white 0%, black 0%)){
  .card-neo:hover{ border-color: color-mix(in oklab, var(--brand), white 15%) }
}

/* media */
.card-neo .media{ position:relative; background:#0a1119 }
.card-neo .media img{
  width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.03) contrast(1.03);
}
.card-neo .rank{
  position:absolute; left:10px; top:10px;
  background: rgba(15,23,36,.7); color:#d7e7ff; border:1px solid rgba(255,255,255,.12);
  padding:4px 8px; border-radius:999px; font-size:12px; backdrop-filter: blur(6px);
}

/* body */
.card-neo .body{ padding:12px 14px 14px; display:grid; gap:10px }
.card-neo h3{
  margin:0; font-size:17px; line-height:1.25;
  display:flex; align-items:center; gap:8px;
}
.card-neo h3 a{ color:var(--txt); text-decoration:none }

/* Stars (unique) */
.stars{ display:inline-flex; gap:4px; vertical-align:middle }
.star{
  width:14px; height:14px; display:inline-block; background:linear-gradient(#ffd166,#ffb02a);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.3l6.18 3.7-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.3l6.18 3.7-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>') center/contain no-repeat;
}
.card-neo .desc{
  color:var(--muted); font-size:14px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden
}

/* tags — unique */
.tags{ display:flex; gap:6px; flex-wrap:wrap }
.tag{
  font-size:12px; padding:4px 8px; border-radius:999px; color:#cfe1ff;
  border:1px solid var(--stroke); background:var(--surface-2)
}

/* meta row */
.meta{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  border:1px solid var(--stroke); background:var(--surface-2);
  padding:8px 10px; border-radius:10px
}
.badge{
  display:inline-flex; gap:6px; align-items:center; font-size:12px;
  color:#cfe1ff; border:1px solid var(--stroke); border-radius:999px; padding:4px 8px; background:#0f1724;
}
.dot{ width:6px; height:6px; border-radius:999px; background:var(--ok) }

/* footer actions */
.actions{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:2px
}
.stats{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.stat-pill{
  font-size:12px; padding:6px 10px; border-radius:999px; color:var(--muted);
  border:1px solid var(--stroke); background:var(--surface-2)
}

/* ================================
   Extra Responsive Tweaks
   ================================ */
@media (max-width:720px){
  .container{padding:14px 16px}
  .server{flex-direction:column; align-items:flex-start}
  .nav-row{gap:12px}
  .hero-top{grid-template-columns:1fr}
}
/* Accessibilité: réduire les animations si demandé */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
}


/* ===== LISTE PRO (row-neo) ===== */
.list-neo{ list-style:none; margin:18px 0; padding:0; display:flex; flex-direction:column; gap:14px }

.row-neo{
  display:grid; grid-template-columns: 190px 1fr 230px; gap:16px;
  align-items:stretch;
  border:1px solid var(--border); border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  box-shadow: var(--shadow);
  padding:12px; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.row-neo:hover{ transform:translateY(-2px); box-shadow:0 18px 50px rgba(0,0,0,.35); border-color:#5f8fff }

/* media (gauche) */
.row-neo .media{ position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--border); background:#0c131c }
.row-neo .media img{ width:100%; height:100%; object-fit:cover; display:block }
.row-neo .rank{
  position:absolute; left:10px; top:10px; padding:4px 8px; border-radius:999px;
  background:rgba(15,23,36,.7); color:#d7e7ff; border:1px solid rgba(255,255,255,.15); font-size:12px; backdrop-filter:blur(4px)
}

/* main (centre) */
.row-neo .main{ display:grid; gap:8px }
.row-neo h3{ margin:0; font-size:18px; display:flex; align-items:center; gap:8px; letter-spacing:.2px }
.row-neo h3 a{ color:var(--text); text-decoration:none }
.row-neo .stars{ display:inline-flex; gap:4px }
.row-neo .star{
  width:14px; height:14px; display:inline-block; background:linear-gradient(#ffd166,#ffb02a);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.3l6.18 3.7-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.3l6.18 3.7-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>') center/contain no-repeat;
}
.row-neo .desc{ color:var(--muted); font-size:14px; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.row-neo .tags{ display:flex; gap:8px; flex-wrap:wrap }
.row-neo .tag{ padding:4px 8px; font-size:12px; border-radius:999px; border:1px solid var(--border); background:var(--panel-2); color:#cfe1ff }

/* linkbar sous la description */
.row-neo .linkbar{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  background:var(--panel-2); border:1px solid var(--border); border-radius:10px; padding:8px 10px
}
.row-neo .badge{ display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:4px 8px; border-radius:999px; border:1px solid var(--border); background:#0f1724; color:#cfe1ff }
.row-neo .dot{ width:6px; height:6px; border-radius:999px; background:#7ee591 }

/* side (droite) */
.row-neo .side{ display:flex; flex-direction:column; gap:10px; justify-content:space-between }
.row-neo .statbox{
  display:grid; grid-template-columns: 1fr auto; gap:6px 12px;
  border:1px solid var(--border); background:var(--panel-2); border-radius:12px; padding:10px
}
.row-neo .label{ color:var(--muted); font-size:13px }
.row-neo .value{ font-weight:800 }
.row-neo .status{ padding:6px 10px; border-radius:999px; font-size:12px; border:1px solid var(--border) }
.row-neo .status.on{ background:#16361f; color:#7ee591; border-color:#1d4d2a }
.row-neo .status.off{ background:#3b1a1a; color:#ff9b9b; border-color:#5a2a2a }
.row-neo .vote-cta .btn{ width:100%; padding:12px 14px; font-weight:800 }

/* responsive */
@media (max-width: 1024px){
  .row-neo{ grid-template-columns: 160px 1fr 200px }
}
@media (max-width: 820px){
  .row-neo{ grid-template-columns: 120px 1fr }
  .row-neo .side{ grid-column: 1 / -1; }
  .row-neo .vote-cta .btn{ width:auto }
}
@media (max-width: 560px){
  .row-neo{ grid-template-columns: 1fr }
  .row-neo .media{ aspect-ratio:16/9 }
}


/* ============================
   LOOK & FEEL BOOST — LISTE PRO
   ============================ */

/* ---- Boutons : taille uniforme + variants ---- */
:root{
  --btn-h: 42px;             /* hauteur standard */
  --btn-r: 12px;             /* rayon */
  --brand-1:#5ea1ff;         /* dégradés doux */
  --brand-2:#4a7ef2;
  --ok-1:#23d18b; --ok-2:#199e67;
  --warn-1:#f59f0b; --warn-2:#d97706;
  --muted-2:#b9c9e4;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--btn-h); height:var(--btn-h); padding:0 16px;
  border-radius:var(--btn-r);
  border:1px solid var(--border);
  background:var(--panel-2);
  color:var(--text); text-decoration:none; cursor:pointer;
  transition:transform .05s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn:hover{ border-color: color-mix(in oklab, var(--brand), white 18%) }
.btn:active{ transform: translateY(1px) }

/* primary = CTA */
.btn.primary{
  border-color:transparent;
  background: linear-gradient(180deg, var(--brand-1), var(--brand-2));
  color:#eaf2ff; font-weight:800; letter-spacing:.2px;
  box-shadow: 0 8px 22px rgba(88,140,255,.25);
}
.btn.primary:hover{
  box-shadow: 0 10px 28px rgba(88,140,255,.35);
  filter:saturate(1.05);
}

/* success / neutral */
.btn.success{
  border-color:transparent;
  background: linear-gradient(180deg, var(--ok-1), var(--ok-2));
  color:#052f1f; font-weight:700;
}
.btn.ghost{ background: transparent; border-color: var(--border); color: var(--muted-2) }
.btn.ghost:hover{ color:var(--text) }

/* ---- Lienbar : même hauteur pour tout ---- */
.row-neo .linkbar{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  background:var(--panel-2); border:1px solid var(--border);
  border-radius:10px; padding:8px 10px;
}
.row-neo .linkbar .btn,
.row-neo .linkbar .badge{ height:var(--btn-h); min-height:var(--btn-h); }

/* Badges (IP / Accès) */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:0 12px;
  border-radius:999px; border:1px solid var(--border);
  background:#0f1724; color:#dbe8ff; font-size:13px; font-weight:600;
}
.badge .dot{ width:8px; height:8px; border-radius:999px; background:var(--ok-1) }

/* ---- Vote à droite : CTA imposant ---- */
.row-neo .vote-cta .btn{
  width:100%;
  background: linear-gradient(180deg, var(--brand-1), var(--brand-2));
  box-shadow: 0 10px 28px rgba(88,140,255,.35);
  border:0;
}
.row-neo .vote-cta .btn:hover{
  transform: translateY(-1px);
}

/* ---- Panneau stats : respiration + colonnes fixes ---- */
.row-neo .statbox{
  display:grid; grid-template-columns: 1fr auto; gap:8px 14px;
  border:1px solid var(--border); background:var(--panel-2);
  border-radius:12px; padding:12px;
}
.row-neo .label{ color:var(--muted); font-size:13px }
.row-neo .value{ font-weight:900; color:#e7f0ff }

/* Statut coloré */
.row-neo .status{
  height:var(--btn-h); min-height:var(--btn-h);
  display:inline-grid; place-items:center;
  padding:0 12px; border-radius:999px; border:1px solid var(--border); font-weight:700;
}
.row-neo .status.on{ background:#16361f; color:#7ee591; border-color:#1d4d2a }
.row-neo .status.off{ background:#3b1a1a; color:#ff9b9b; border-color:#5a2a2a }

/* ---- Couleurs de tags (lisibles) ---- */
.row-neo .tags .tag{
  padding:0 10px; height:32px; display:inline-grid; place-items:center;
  border-radius:999px; border:1px solid var(--border);
  background:var(--panel-2); color:#cfe1ff; font-size:12px; font-weight:600;
}
.row-neo .tags .tag:nth-child(5n+1){ background:#1b2335 }
.row-neo .tags .tag:nth-child(5n+2){ background:#182a2a }
.row-neo .tags .tag:nth-child(5n+3){ background:#2a2135 }
.row-neo .tags .tag:nth-child(5n+4){ background:#2a2320 }
.row-neo .tags .tag:nth-child(5n+5){ background:#1f2a21 }

/* ---- Image : ratio + coin net ---- */
.row-neo .media{
  position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--border);
  background:#0c131c; min-height:120px;
}
.row-neo .media img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.05) }

/* Rank amélioré (Top 3 en couleur) */
.row-neo .rank{
  position:absolute; left:10px; top:10px; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:800;
  background:rgba(15,23,36,.65); color:#e7f0ff; border:1px solid rgba(255,255,255,.15); backdrop-filter:blur(6px)
}
.list-neo > li:nth-child(1) .rank{ background:linear-gradient(180deg,#ffd54a,#ffae00); color:#2f2100 }
.list-neo > li:nth-child(2) .rank{ background:linear-gradient(180deg,#dfe7ff,#b7c8ff); color:#152042 }
.list-neo > li:nth-child(3) .rank{ background:linear-gradient(180deg,#ffd6a4,#ffb46b); color:#3a2412 }

/* ---- Réactivité : confort sur petites largeurs ---- */
@media (max-width: 1024px){
  .row-neo{ grid-template-columns: 160px 1fr 220px }
}
@media (max-width: 860px){
  .row-neo{ grid-template-columns: 120px 1fr }
  .row-neo .side{ grid-column:1/-1; display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center }
  .row-neo .vote-cta .btn{ width:auto; min-width:160px }
}
@media (max-width: 580px){
  .row-neo{ grid-template-columns: 1fr }
  .row-neo .media{ aspect-ratio:16/9 }
  .row-neo .side{ grid-template-columns:1fr }
  .row-neo .vote-cta .btn{ width:100% }
}


.btn { min-width: 110px; justify-content:center; }
.btn.primary { background:#0f1724; border-color:#334155; }
.btn.success { background:#152a1d; border-color:#1d4d2a; }
.btn.success:hover { border-color:#2fb174; }

/* dans ton CSS global */
#votes-history canvas { display:block; }


/* ===== Server page polish ===== */
:root{
  --accent: #6a9cff;               /* défaut si pas fourni par la page */
  --accent-2: color-mix(in oklab, var(--accent), white 18%);
  --panel-3: #0f1622;
}

/* conteneur principal de la page serveur */
.server-wrap{
  display:grid;
  grid-template-columns: 1fr 340px;
  gap:22px;                        /* + d’air entre colonnes */
  margin-top:20px;
}

/* sections (cards) */
.section{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border:1px solid var(--border);
  border-radius:18px;
  padding:16px 16px 18px;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}
.section + .section{ margin-top:16px }   /* espacement vertical entre cards */
.section h3{
  margin:0 0 12px;
  font-size:18px;
  letter-spacing:.2px
}

/* hero */
.server-hero{
  position:relative;
  border-bottom:1px solid var(--border);
  padding:22px 0 26px;
  background:
    radial-gradient(1200px 520px at 12% -10%, color-mix(in oklab, var(--accent), black 70%) , transparent 60%),
    linear-gradient(180deg, rgba(14,20,30,.78), rgba(14,20,30,.66));
}
.server-hero .inner{ position:relative; z-index:1 }
.server-hero .banner-wrap{
  position:absolute; inset:0; z-index:0; opacity:.18;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), rgba(0,0,0,.4) 50%, transparent 100%);
}
.server-hero .banner-wrap img{ width:100%; height:380px; object-fit:cover; filter:saturate(1.05) blur(2px); transform:scale(1.02) }

/* titre + tags */
.hero-title{ margin:0; font-size:clamp(22px,3.2vw,30px) }
.hero-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px }
.hero-tags .tag{
  padding:4px 10px; border:1px solid var(--border); border-radius:999px;
  background: var(--panel-2); color:#cfe1ff; font-size:12px
}

/* colonne latérale (infos) */
.facts{ display:grid; gap:10px }
.fact{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:var(--panel-2)
}
.fact .k{ color:var(--muted); font-size:13px }

/* petits compteurs hero */
.stat-mini{
  display:grid; grid-template-columns:1fr auto; gap:8px 10px;
  padding:12px; border:1px solid var(--border); background:var(--panel); border-radius:14px
}
.stat-mini .label{ color:var(--muted); font-size:13px }
.stat-mini .value{ font-weight:800 }

/* statut */
.status{ padding:6px 10px; border-radius:999px; font-size:12px; border:1px solid var(--border); font-weight:700 }
.status.on{ background:#16361f; color:#7ee591; border-color:#1d4d2a }
.status.off{ background:#3b1a1a; color:#ff9b9b; border-color:#5a2a2a }

/* review item */
.review{
  display:flex; gap:10px; align-items:flex-start;
  padding:12px; border:1px solid var(--border); border-radius:12px; background:var(--panel-2)
}
.review .avatar{
  width:34px;height:34px;border-radius:999px;display:inline-grid;place-items:center;
  background:#1b2432;border:1px solid var(--border);color:#cfe1ff;font-size:12px
}

/* CTA boutons : même taille / joli hover */
.cta-row{ display:flex; gap:10px; flex-wrap:wrap }
.btn{ min-height:42px; padding:10px 14px }
.btn.primary{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  border-color: var(--accent-2);
}
.btn.primary:hover{ box-shadow:0 8px 24px rgba(80,140,255,.25) }
.btn.success{ border-color:#1f5033; background:#0f1b17 }

/* flyer & bannière */
.flyer{ overflow:hidden; border-radius:14px; border:1px solid var(--border); background:#0c131c }
.flyer img{ width:100%; height:auto; display:block }

/* Votes chart block */
#votes-history{ padding-bottom:8px }
#votes-history .chart-wrap{
  height:280px; background:var(--panel-2); border:1px solid var(--border);
  border-radius:14px; padding:8px; overflow:hidden
}
#votes-history canvas{ display:block; width:100% !important; height:100% !important }

/* Responsive */
@media (max-width: 980px){
  .server-wrap{ grid-template-columns: 1fr; gap:16px }
  .section{ padding:14px 14px 16px }
}

.section h3::after{
  content:"";
  display:inline-block;
  width:8px;height:8px;margin-left:8px;border-radius:999px;
  background: var(--accent); box-shadow:0 0 14px var(--accent);
  vertical-align:middle
}

.cta-row .btn{ flex:0 0 auto; min-width:110px; justify-content:center }








/* Overlay et panneau : fixes et plus hauts que tout */
.nav-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 10001;
}
.nav-overlay.show{ opacity:1; pointer-events:auto; }

.nav-panel{
  position: fixed;
  top: 0; right: 0;
  height: 100dvh;
  width: min(320px, 86vw);
  background: linear-gradient(180deg, #0c131c, #0b0f14);
  border-left: 1px solid var(--border);
  box-shadow: -20px 0 60px rgba(0,0,0,.35);
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
  z-index: 10002;            /* > overlay */
}
.nav-panel.open{ transform: translateX(0); }


/* =========================
   HERO — MODE COMPACT (no gap)
   ========================= */

/* 0) Sécurité : neutralise toute marge “collante” du 1er bloc après le hero */
.hero + * { margin-top: 0 !important; }

/* 1) Le hero prend uniquement la hauteur de son contenu */
.hero{
  min-height: 0 !important;        /* annule les min-height/clamp précédents */
  padding-top: 18px !important;
  padding-bottom: 6px !important;   /* très serré sous la recherche */
  border-bottom: none !important;   /* pas de ligne qui “sépare” visuellement */
  position: relative;
  overflow: clip;                   /* évite les collapses de marges internes */
}

/* 2) Si tu utilises un halo ::after dans le hero, réduis-le/neutralise-le */
.hero::after{
  content: none !important;         /* enlève le pseudo-élément si présent */
  /* alternative si tu tiens au fade :
  content:""; position:absolute; left:0; right:0; bottom:0;
  height: 32px; pointer-events:none;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.25));
  */
}

/* 3) Barre de recherche = pas de marge qui pousse le contenu */
.home-search{
  margin-top: 8px !important;
  margin-bottom: 0 !important;
  
}

/* 4) Le conteneur suivant est rapproché au maximum */
.hero + main,
.hero + .container,
.hero + .section,
.hero + section {
  margin-top: -6px !important;      /* tire la grille vers le haut */
  padding-top: 6px !important;      /* micro respiration */
}

/* 5) Si une “ligne” horizontale vient du bloc suivant : on la désactive ici */
.hero + main.container { border-top: 0 !important; }
.hero + .section-head { margin-top: 0 !important; }
#categories{ margin-top: 0 !important; }

/* 6) Option XXL : encore plus serré sur très grands écrans */
@media (min-width: 1600px){
  .hero { padding-bottom: 4px !important; }
  .hero + main,
  .hero + .container,
  .hero + section { margin-top: -8px !important; }
}


/* =========================
   FOOTER
   ========================= */

.site-footer{
  border-top:1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  padding:24px 0;
  color:var(--muted);
  margin-top:24px;
}

.foot-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap:18px;
}
@media (max-width: 980px){
  .foot-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px){
  .foot-grid{ grid-template-columns: 1fr; }
}

.foot-card{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  box-shadow: var(--shadow);
}

.foot-title{
  margin:0 0 8px;
  font-size:16px;
  letter-spacing:.2px;
  color:var(--text);
}
.brand-accent{ color: var(--brand); }

.foot-links{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.foot-links a{
  color:var(--muted); text-decoration:none;
  padding:6px 8px; border-radius:8px;
  border:1px solid transparent; display:block;
}
.foot-links a:hover{
  color:var(--text); border-color: var(--border);
  background: var(--panel-2);
}

.reset-box .reset-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:10px;
  border:1px solid var(--border); background:var(--panel-2);
  font-weight:800; color:var(--text);
}
.countdown{ font-variant-numeric: tabular-nums; }

.tiny{ font-size:12px; color:var(--muted) }



/* =========================
   END FOOTER
   ========================= */


   .vip-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 8px; font-weight:900; font-size:12px;
  color:#0b1020; background:linear-gradient(90deg,#ffd54d,#ffb300);
  border-radius:999px; border:1px solid rgba(0,0,0,.15);
  box-shadow:0 4px 12px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.5);
}

.vip-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 10px; font-weight:900; line-height:1; user-select:none;
  color:#0b1020; letter-spacing:.3px;
  background:linear-gradient(90deg,#ffe58a,#ffbd2f);
  border:1px solid rgba(0,0,0,.18);
  border-radius:999px;
  box-shadow:0 6px 16px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.55);
  text-transform:uppercase;
}
.vip-badge--sm{ font-size:11px; padding:2px 8px; }
.vip-badge--md{ font-size:12px; padding:3px 10px; }
.vip-badge--lg{ font-size:13px; padding:4px 12px; }

/* Option: animation subtile */
@keyframes vipShine {
  from { filter: brightness(1); }
  50%  { filter: brightness(1.08); }
  to   { filter: brightness(1); }
}
.vip-badge{ animation: vipShine 3.6s ease-in-out infinite; }

.username .username-badge,
.user-text strong .username-badge{
  margin-left: 6px;
  vertical-align: middle;
}