/* V7 PROFESSIONAL */
:root{
  --bg:#060611;
  --panel:#0A0A1F;
  --neon: #6EE7B7;
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.62);
  --border:rgba(255,255,255,.10);
  --danger:#ff6b6b;
  --shadow: 0 0 28px rgba(1,230,118,.18);
  --shadow2: 0 0 0 1px rgba(1,230,118,.10), 0 0 36px rgba(1,230,118,.14);
  --radius:22px;
}
*{box-sizing:border-box}
html,body{height:100%;overflow-x:hidden}
body{
  margin:0;
  font-family: "Space Grotesk", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1100px 600px at 18% 12%, rgba(1,230,118,0.10), transparent 58%),
    radial-gradient(900px 520px at 85% 92%, rgba(1,230,118,0.08), transparent 62%),
    radial-gradient(700px 380px at 70% 12%, rgba(255,255,255,0.06), transparent 60%),
    var(--bg);
}
img,video,canvas{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.neon{color:rgba(1,230,118,.95);text-shadow:0 0 18px rgba(1,230,118,.22)}
.sub{color:var(--muted);font-size:13px;line-height:1.5}
.container{max-width:1140px;margin:0 auto;padding:22px}

.logo{
  width:46px;height:46px;border-radius:16px;
  background: radial-gradient(circle at 30% 30%, rgba(1,230,118,.40), transparent 60%), rgba(255,255,255,.05);
  border:1px solid rgba(1,230,118,.25);
  box-shadow: var(--shadow);
}

.btn{
  border:1px solid rgba(1,230,118,.30);
  background: rgba(1,230,118,.10);
  color: rgba(255,255,255,.95);
  padding: 11px 14px;
  border-radius: 16px;
  cursor:pointer;
  transition:.18s ease;
  font-weight: 800;
  letter-spacing:.2px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  user-select:none;
}
.btn:hover{background:rgba(1,230,118,.16);box-shadow:var(--shadow)}
.btn.ghost{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.04)}
.btn.ghost:hover{border-color:rgba(1,230,118,.26);background:rgba(1,230,118,.06)}
.btn.danger{border-color:rgba(255,107,107,.35);background:rgba(255,107,107,.08)}
.btn.danger:hover{background:rgba(255,107,107,.12)}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding: 7px 10px;border-radius:999px;font-size:12px;
  border:1px solid rgba(1,230,118,.35);
  background:rgba(1,230,118,.08);
}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:999px;font-size:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.86);
}
hr.sep{border:none;border-top:1px solid rgba(255,255,255,.08);margin:16px 0}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  backdrop-filter: blur(12px);
}
.card.glow{box-shadow:var(--shadow2)}
.card.soft{background:rgba(255,255,255,.03)}
h1,h2,h3{margin:0}
h1{font-size:44px;letter-spacing:-.6px;line-height:1.02}
h2{font-size:26px;letter-spacing:-.3px}
h3{font-size:20px}
.kicker{font-size:12px;letter-spacing:1.3px;text-transform:uppercase;color:rgba(1,230,118,.78);font-weight:800}

.topnav{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 18px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background: rgba(10,10,31,.35);
  backdrop-filter: blur(10px);
  position:sticky;top:0;z-index:10;
}
.topnav .left{display:flex;align-items:center;gap:12px;flex:0 0 auto;min-width:260px}
/* nav-center: pas de wrap (évite les "bugs" / sauts), scroll horizontal si besoin */
.topnav .nav-center{display:flex;align-items:center;gap:10px;flex:1 1 auto;flex-wrap:nowrap;justify-content:center;min-width:240px;overflow:auto;scrollbar-width:none}
.topnav .nav-center::-webkit-scrollbar{display:none}
.topnav .nav-right{display:flex;align-items:center;gap:10px;flex:0 0 auto;flex-wrap:nowrap;justify-content:space-between;max-width:620px;min-width:260px}
.topnav .nav-right .nav-right-left{display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0}
.topnav .nav-right .nav-right-right{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.topnav .nav-right .nav-right-left .nav-clip{max-width:170px}
.topnav .nav-pill{display:inline-flex;align-items:center;gap:10px}
.topnav .nav-avatar{width:22px;height:22px;max-width:22px;max-height:22px;object-fit:cover;border-radius:999px;border:1px solid rgba(255,255,255,.14);flex:0 0 auto}
.topnav .nav-dot{width:9px;height:9px;border-radius:999px}
.topnav .nav-clip{max-width:210px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:bottom}
.topnav .nav-actions{white-space:nowrap}

/* Dropdown menu (mobile) */
.nav-dd{display:none;position:relative}
.nav-dd-btn{white-space:nowrap}
.nav-dd.open .nav-dd-btn{border-color:rgba(1,230,118,.35);box-shadow:0 0 18px rgba(1,230,118,.14)}
.nav-dd-menu{
  position:absolute;right:0;top:52px;min-width:240px;z-index:50;
  padding:12px;border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(10,10,31,.92);
  box-shadow:0 0 0 1px rgba(1,230,118,.12), 0 0 36px rgba(0,0,0,.35);
  display:none;flex-direction:column;gap:8px;
  transform-origin: top right;
}
.nav-dd.open .nav-dd-menu{display:flex;animation: navPop .14s ease-out}
@keyframes navPop{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}

/* Petit overlay invisible pour click-outside (injecté via JS) */
.nav-dd-backdrop{position:fixed;inset:0;z-index:40;display:none}
.nav-dd.open .nav-dd-backdrop{display:block}

.nav-dd-menu{
  /* au-dessus du backdrop */
  z-index:50;
}
.nav-dd-menu a{padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.nav-dd-menu a:hover{border-color:rgba(1,230,118,.22);background:rgba(1,230,118,.06)}
.nav-dd-muted{font-size:12px;opacity:.82;padding:6px 8px}

@media (max-width: 1180px){
  .topnav .nav-center{display:none}
  .nav-dd{display:block}
  .topnav .nav-right{max-width:none}
}

@media (max-width: 720px){
  .topnav{padding:12px 12px}
  .topnav .left{min-width:0}
  .topnav .nav-clip{max-width:150px}
}

/* Mobile ultra-compact (navbar trop grande sur téléphone) */
@media (max-width: 520px){
  .container{padding:16px}
  .topnav{padding:10px 10px;gap:10px}
  .topnav .left{gap:10px}
  .topnav .left img{width:34px !important;height:34px !important;border-radius:12px !important;padding:4px !important}
  .topnav .left .sub{display:none}
  .topnav .left div{line-height:1.1}
  .nav-dd-btn{padding:8px 10px;border-radius:14px;font-size:13px}
  .topnav .nav-right .nav-right-left{display:none}
}

/* Inputs/buttons désactivés : garder un contraste lisible (mobile + dark) */
input:disabled,textarea:disabled,select:disabled{
  opacity:1;
  color:rgba(255,255,255,.75) !important;
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(255,255,255,.10) !important;
  -webkit-text-fill-color:rgba(255,255,255,.75) !important;
}
button:disabled,.btn:disabled{
  opacity:.6;
  cursor:not-allowed;
}

/* Anti "décalage vers la droite" (élément trop large) */
.card,.pill,.table,.topbar,.topnav{max-width:100%}
.topnav a.link{
  padding:8px 10px;
  border-radius:14px;
  border:1px solid transparent;
  background:rgba(255,255,255,.02);
  color:rgba(255,255,255,.86);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  font-size:13px;
  will-change:transform;
}
.topnav a.link:hover{
  border-color:rgba(1,230,118,.22);
  background:rgba(1,230,118,.06);
  box-shadow:0 0 0 1px rgba(1,230,118,.12), 0 0 26px rgba(1,230,118,.12);
  transform:translateY(-1px);
}
.topnav a.link:active{transform:translateY(0)}

/* FAQ: même style que les autres liens (pas de traitement spécial) */


/* Badge discret (Support) */
.nav-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 6px;
  margin-left:6px;
  border-radius:999px;
  font-size:11px;font-weight:950;
  color:rgba(10,10,31,.95);
  background:rgba(1,230,118,.95);
  box-shadow:0 0 0 1px rgba(1,230,118,.25), 0 0 18px rgba(1,230,118,.22);
}

/* Navbar: glow animé + état actif plus néon */
.topnav a.link{
  position:relative;
  overflow:hidden;
}
.topnav a.link:before{
  content:"";
  position:absolute;
  inset:-2px;
  background:radial-gradient(circle at 30% 30%, rgba(1,230,118,.18), transparent 55%),
             radial-gradient(circle at 70% 70%, rgba(120,80,255,.12), transparent 55%);
  opacity:.0;
  transform:translate3d(-18%, 18%, 0) scale(1.05);
  transition:opacity .18s ease;
  pointer-events:none;
}
.topnav a.link:hover:before{opacity:1;animation:navGlow 1.6s ease-in-out infinite;}
@keyframes navGlow{
  0%{transform:translate3d(-18%, 18%,0) scale(1.05)}
  50%{transform:translate3d(18%, -18%,0) scale(1.07)}
  100%{transform:translate3d(-18%, 18%,0) scale(1.05)}
}

.topnav a.link.active{
  border-color:rgba(1,230,118,.35);
  background:rgba(1,230,118,.10);
  box-shadow:0 0 0 1px rgba(1,230,118,.22), 0 0 34px rgba(1,230,118,.28), 0 0 90px rgba(1,230,118,.12);
}
.topnav a.link.active:before{opacity:1;animation:navGlow 1.2s ease-in-out infinite;}
.topnav a.link.active:after{
  content:"";
  position:absolute;left:10px;right:10px;bottom:6px;height:2px;
  background:linear-gradient(90deg, transparent, rgba(1,230,118,.9), transparent);
  opacity:.85;
  filter:drop-shadow(0 0 10px rgba(1,230,118,.45));
  animation:navScan 1.8s linear infinite;
}
@keyframes navScan{0%{transform:translateX(-35%)}100%{transform:translateX(35%)}}

@media (prefers-reduced-motion: reduce){
  .topnav a.link:hover:before,.topnav a.link.active:before,.topnav a.link.active:after{animation:none}
}

/* Boutons navbar plus compacts + un peu plus de "punch" */
.btn.nav-actions,
.btn.nav-dd-btn{
  padding:8px 10px;
  border-radius:14px;
  font-size:13px;
  gap:8px;
}

.btn{will-change:transform}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.hero{
  position:relative;
  overflow:hidden;
}
.hero:before{
  content:"";
  position:absolute;inset:-120px;
  background: radial-gradient(circle at 20% 20%, rgba(1,230,118,.18), transparent 60%);
  transform: rotate(10deg);
}
.hero .inner{position:relative;z-index:1}
.hero-grid{
  display:grid;grid-template-columns: 1.2fr .8fr;gap:16px;margin-top:18px;
}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.feature-grid{
  display:grid;grid-template-columns:repeat(12,1fr);gap:14px;margin-top:14px;
}
.feature{grid-column:span 4}
@media (max-width: 980px){
  h1{font-size:38px}
  .hero-grid{grid-template-columns:1fr}
  .feature{grid-column:span 6}
}
@media (max-width: 720px){
  .feature{grid-column:span 12}
}

label{display:block;font-size:12px;color:var(--muted);margin: 12px 0 6px}
input,select,textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,10,31,.55);
  color: var(--text);
  outline:none;
  transition:.18s ease;
}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:rgba(1,230,118,.45);box-shadow:0 0 0 3px rgba(1,230,118,.12)}

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (max-width: 760px){.grid-2{grid-template-columns:1fr}}

.toggle-row{display:flex;gap:10px;flex-wrap:wrap}
.toggle{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  border-radius:999px;
  padding:10px 12px;
  display:inline-flex;align-items:center;gap:8px;
  cursor:pointer;
  transition:.18s ease;
}
.toggle:hover{border-color:rgba(1,230,118,.22);background:rgba(1,230,118,.06)}
.toggle input{width:auto}
.toggle.on{border-color:rgba(1,230,118,.35);background:rgba(1,230,118,.10);box-shadow:0 0 0 1px rgba(1,230,118,.14)}

.avail-grid{
  overflow:auto;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
}
.avail-grid table{width:100%;border-collapse:collapse;min-width:820px;background:rgba(10,10,31,.35)}
.avail-grid th,.avail-grid td{padding:10px;border-bottom:1px solid rgba(255,255,255,.08);text-align:center}
.avail-grid th{font-size:12px;color:rgba(255,255,255,.70);font-weight:800;position:sticky;top:0;background:rgba(10,10,31,.85);backdrop-filter: blur(10px)}
.avail-grid td:first-child,.avail-grid th:first-child{text-align:left;position:sticky;left:0;background:rgba(10,10,31,.85)}
.checkbox{
  width:18px;height:18px;accent-color: var(--neon);
  cursor:pointer;
}

.layout{display:flex;min-height:100vh}
.sidebar{
  width: 300px;
  background: linear-gradient(180deg, rgba(10,10,31,1), rgba(10,10,31,.94));
  border-right: 1px solid rgba(255,255,255,.08);
  padding: 18px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.content{flex:1;padding: 26px}
.side-top{display:flex;align-items:center;justify-content:space-between;padding:10px 10px 18px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:14px}
.side-title{display:flex;gap:12px;align-items:center}
.side-title h2{margin:0;font-size:14px;letter-spacing:.8px}
.side-title p{margin:2px 0 0;font-size:12px;color:var(--muted)}
.section-title{padding:10px 10px 6px;font-size:11px;color:rgba(1,230,118,.78);letter-spacing:1.2px;text-transform:uppercase;font-weight:800}
.nav{display:flex;flex-direction:column;gap:8px;padding:0 6px}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:16px;background:rgba(255,255,255,.02);border:1px solid transparent;transition:.18s ease;color:rgba(255,255,255,.84);font-size:13px}
.dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.18);transition:.18s ease}
.nav a:hover{border-color:rgba(1,230,118,.26);background:rgba(1,230,118,.06);box-shadow:var(--shadow2)}
.nav a:hover .dot{background:var(--neon);box-shadow:0 0 18px rgba(1,230,118,.55)}
.nav a.active{border-color:rgba(1,230,118,.36);background:rgba(1,230,118,.10);box-shadow:0 0 0 1px rgba(1,230,118,.18), 0 0 26px rgba(1,230,118,.14)}
.nav a.active .dot{background:var(--neon);box-shadow:0 0 20px rgba(1,230,118,.62)}
.side-footer{position:absolute;left:16px;right:16px;bottom:16px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--muted);font-size:12px}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg, rgba(10,10,31,.10), rgba(10,10,31,.28))}
.site-footer-grid{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ascii{margin:0;color:rgba(255,255,255,.58);font-size:12px;line-height:1.08;white-space:pre;
  padding:12px 14px;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.18);overflow:auto;max-width:100%}
@media(max-width:720px){.ascii{font-size:10px}}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.page-title p{margin:6px 0 0;color:var(--muted);font-size:13px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.stat{grid-column:span 4;min-height:130px;position:relative;overflow:hidden}
.stat:before{content:"";position:absolute;inset:-70px;background:radial-gradient(circle at 30% 30%, rgba(1,230,118,.14), transparent 58%);transform:rotate(12deg)}
.stat .inner{position:relative;z-index:1}
.stat h4{margin:0 0 8px;font-size:13px;color:rgba(255,255,255,.72);font-weight:900}
.stat .value{font-size:32px;font-weight:900;letter-spacing:.2px}
.stat .subtxt{margin-top:8px;font-size:12px;color:var(--muted)}

.table{width:100%;border-collapse:separate;border-spacing:0 10px}
.table th{text-align:left;font-size:12px;color:var(--muted);font-weight:900;padding:0 12px}
.table td{padding:14px 12px}
.tr{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:16px}
.tr td:first-child{border-top-left-radius:16px;border-bottom-left-radius:16px}
.tr td:last-child{border-top-right-radius:16px;border-bottom-right-radius:16px}

.tabs{display:flex;gap:10px;flex-wrap:wrap;margin: 10px 0 14px}
.tab{
  padding:10px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.84);
  transition:.18s ease;
}
.tab:hover{border-color:rgba(1,230,118,.22);background:rgba(1,230,118,.06)}
.tab.active{border-color:rgba(1,230,118,.36);background:rgba(1,230,118,.10);box-shadow:0 0 0 1px rgba(1,230,118,.14)}
@media (max-width: 980px){.sidebar{width:245px}.stat{grid-column:span 6}}
@media (max-width: 720px){
  .layout{flex-direction:column}
  .sidebar{position:relative;height:auto;width:auto}
  .side-footer{position:relative;left:auto;right:auto;bottom:auto;margin-top:14px}
  .content{padding:16px}
  .stat{grid-column:span 12}

  /* Tables & grilles : éviter l'overflow qui décale toute la page */
  .table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .avail-grid{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* vLiteRP branding helpers */
.hero-bg{position:absolute;inset:0;opacity:.22;pointer-events:none;background-size:cover;background-position:center;filter:saturate(1.1) contrast(1.05);}
.shopgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:12px}
@media(max-width:980px){
.shopgrid{grid-template-columns:1fr}}
.shopitem{padding:16px;border-radius:22px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.22);position:relative;overflow:hidden}
.shopitem:before{content:"";position:absolute;inset:-1px;background:radial-gradient(650px 240px at 10% 0%, rgba(110,231,183,.18), transparent 62%);opacity:.95;pointer-events:none}
.shopimg{height:150px;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center}
.shopimg img{width:100%;height:100%;object-fit:cover}
.shopprice{font-weight:950;font-size:18px}
.shopmeta{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.neonText{color:var(--neon);text-shadow:0 0 18px rgba(110,231,183,.25)}
.neonBadge{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:999px;border:1px solid rgba(110,231,183,.25);background:rgba(110,231,183,.10);font-weight:900}
/* ===== Page Transition (vLiteRP) ===== */
.page-transition{
  position:fixed;
  inset:0;
  z-index:99999;
  pointer-events:none;
  opacity:0;
  transform:scale(1.02);
  transition:opacity .22s ease, transform .22s ease;
  background:linear-gradient(180deg, rgba(5,7,14,.92) 0%, rgba(5,7,14,.88) 100%);
  backdrop-filter: blur(18px);
}

/* =========================
   vLiteRP Transition (VT)
========================= */
.vt{
  position:fixed;
  inset:0;
  z-index:999999;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(6,8,14,.92); /* opaque => on ne voit plus derrière */
  backdrop-filter: blur(14px);
}
.vt.show{display:flex}

.vt-inner{
  width:min(1100px, calc(100vw - 32px));
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:18px;
  align-items:center;
}
@media(max-width: 900px){
  .vt-inner{grid-template-columns:1fr}
  .vt-right{display:none}
}

.vt-left{display:flex;flex-direction:column;gap:14px}
.vt-brand{display:flex;align-items:center;gap:12px}
.vt-logo{
  width:54px;height:54px;border-radius:18px;
  border:1px solid rgba(1,230,118,.25);
  box-shadow:0 0 34px rgba(1,230,118,.18);
  background:rgba(255,255,255,.04);
  padding:8px;
}
.vt-title{font-weight:900;letter-spacing:.2px;font-size:18px}
.vt-neon{color: var(--neon); text-shadow: 0 0 22px rgba(1,230,118,.25)}
.vt-sub{color:rgba(255,255,255,.65);margin-top:3px;font-size:13px}

.vt-card{
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.34);
  box-shadow: 0 18px 80px rgba(0,0,0,.55);
  padding:16px;
  position:relative;
  overflow:hidden;
}
.vt-card:before{
  content:"";
  position:absolute;
  inset:-2px;
  background:radial-gradient(650px 240px at 10% 0%, rgba(110,231,183,.22), transparent 62%);
  opacity:.9;
  pointer-events:none;
}

/* =========================
   Mobile polish (<= 520px)
   - réduit les gros titres
   - évite les débordements horizontaux
   - rend les tableaux scrollables
========================= */
@media (max-width: 520px){
  .container{padding:14px}
  h1{font-size:32px;line-height:1.05}
  h2{font-size:22px}
  .card{padding:14px}
  .btn{padding:10px 12px}
  .topnav{padding:10px 10px}
  .topnav .nav-clip{max-width:120px}
  .grid{gap:12px}
  .table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table th,.table td{white-space:nowrap}
  .pill{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

@media (max-width: 420px){
  h1{font-size:28px}
  .btn{border-radius:14px}
}
.vt-kicker{font-weight:900;color:rgba(255,255,255,.72);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.vt-big{margin-top:8px;font-weight:950;font-size:24px;line-height:1.1}
.vt-small{margin-top:8px;color:rgba(255,255,255,.72);line-height:1.6}

.vt-progress{
  margin-top:14px;
  height:12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  overflow:hidden;
}
.vt-bar{
  height:100%;
  width:0%;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(1,230,118,.95), rgba(110,231,183,.95));
  box-shadow: 0 0 28px rgba(1,230,118,.22);
  transform: translateZ(0);
}

.vt-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.vt-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.20);
  font-weight:900;font-size:12px;
}

.vt-right{display:flex;justify-content:flex-end}
.vt-box{
  width:100%;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.34);
  box-shadow: 0 18px 80px rgba(0,0,0,.55);
  overflow:hidden;
}
.neonStrong{color:var(--neon);text-shadow:0 0 18px rgba(1,230,118,.35)}
/* ===== Ambient Neon Background (global) ===== */
.bg-ambient{
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}

.bg-ambient:before,
.bg-ambient:after{
  content:"";
  position:absolute;
  width: 820px;
  height: 820px;
  border-radius: 999px;
  filter: blur(70px);
  opacity: .22;
  transform: translate3d(0,0,0);
  background: radial-gradient(circle at 30% 30%,
    rgba(1,230,118,.85) 0%,
    rgba(1,230,118,.25) 35%,
    rgba(1,230,118,0) 68%);
  animation: ambientFloat 14s ease-in-out infinite;
}

.bg-ambient:before{
  left: -240px;
  top: -260px;
}

.bg-ambient:after{
  right: -260px;
  bottom: -280px;
  opacity: .18;
  animation-duration: 18s;
}
/* ===== vt brand text ===== */
.vt-brandtext{margin-top:2px}
.vt-title{
  font-weight:950;
  letter-spacing:.3px;
  font-size:18px;
  line-height:1.1;
}
.vt-neon{
  color: rgba(1,230,118,1);
  text-shadow:
    0 0 14px rgba(1,230,118,.25),
    0 0 30px rgba(1,230,118,.12);
  animation: vtPulse 2.2s ease-in-out infinite;
}
@keyframes vtPulse{
  0%,100%{ filter: brightness(1); transform: translateY(0); }
  50%{ filter: brightness(1.15); transform: translateY(-1px); }
}

/* ASCII block */
.vt-ascii{
  margin-top:10px;
  font-size:13px;
  line-height:1.35;
  color: rgba(255,255,255,.78);
  font-weight:700;
  letter-spacing:.2px;
}
.vt-line{
  opacity:0;
  transform: translateY(6px);
  animation: vtLineIn .6s ease forwards;
}
.vt-line:nth-child(1){ animation-delay: .05s; }
.vt-line:nth-child(2){ animation-delay: .20s; }
.vt-line:nth-child(3){ animation-delay: .35s; }
.vt-line:nth-child(4){ animation-delay: .50s; }
.vt-line:nth-child(5){ animation-delay: .65s; }

@keyframes vtLineIn{
  to{ opacity:1; transform: translateY(0); }
}

/* little separators */
.vt-dot{
  color: rgba(1,230,118,.9);
  text-shadow: 0 0 12px rgba(1,230,118,.25);
  margin: 0 4px;
}

/* hearts */
.vt-love{
  display:inline-block;
  transform: translateZ(0);
  filter: drop-shadow(0 0 14px rgba(1,230,118,.20));
  animation: vtHeart 1.6s ease-in-out infinite;
}
.vt-love:nth-of-type(2){ animation-delay: .2s; }
@keyframes vtHeart{
  0%,100%{ transform: scale(1); filter: drop-shadow(0 0 10px rgba(1,230,118,.18)); }
  50%{ transform: scale(1.12); filter: drop-shadow(0 0 18px rgba(1,230,118,.30)); }
}

/* shine lines */
.vt-shine{
  position: relative;
  color: rgba(255,255,255,.85);
  text-shadow: 0 0 14px rgba(1,230,118,.10);
  overflow:hidden;
}
.vt-shine::after{
  content:"";
  position:absolute;
  top:-30%;
  left:-45%;
  width:45%;
  height:160%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(1,230,118,.28) 50%,
    transparent 100%);
  filter: blur(2px);
  animation: vtShine 2.2s ease-in-out infinite;
}
.roleTags{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:10px}
.rolePill{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
  font-weight:900;
  color:rgba(255,255,255,.88);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.staffBio{
  margin-top:10px;
  color:var(--muted);
  line-height:1.6;
  opacity:.95;
}

/* Badge rôle */
.roleBadge{
  position:relative;
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.22);
  font-weight:950;
  overflow:hidden;
}
.roleIcon{filter:drop-shadow(0 0 10px rgba(1,230,118,.15))}
.roleTxt{letter-spacing:.2px}
.roleDot{
  width:10px;height:10px;border-radius:999px;
  background:rgba(1,230,118,.95);
  box-shadow:0 0 18px rgba(1,230,118,.35);
  animation: rolePulse 1.8s ease-in-out infinite;
}
@keyframes rolePulse{
  0%,100%{transform:scale(1);filter:brightness(1)}
  50%{transform:scale(1.12);filter:brightness(1.2)}
}

/* Glow interne qui “passe” */
.roleGlow{
  position:absolute;inset:-2px;
  background:linear-gradient(90deg, transparent 0%, rgba(1,230,118,.18) 50%, transparent 100%);
  transform:translateX(-120%);
  filter:blur(1px);
  opacity:.8;
  animation: roleShine 2.4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes roleShine{
  0%{transform:translateX(-120%)}
  55%{transform:translateX(120%)}
  100%{transform:translateX(120%)}
}

/* Variantes couleur par rôle */
.role-owner{
  border-color:rgba(255,215,90,.25);
  box-shadow:0 0 50px rgba(255,215,90,.08);
}
.role-owner .roleDot{
  background:rgba(255,215,90,.95);
  box-shadow:0 0 18px rgba(255,215,90,.30);
}
.role-owner .roleGlow{
  background:linear-gradient(90deg, transparent 0%, rgba(255,215,90,.22) 50%, transparent 100%);
}

.role-lead{
  border-color:rgba(110,190,255,.22);
  box-shadow:0 0 50px rgba(110,190,255,.07);
}
.role-lead .roleDot{
  background:rgba(110,190,255,.95);
  box-shadow:0 0 18px rgba(110,190,255,.25);
}
.role-lead .roleGlow{
  background:linear-gradient(90deg, transparent 0%, rgba(110,190,255,.20) 50%, transparent 100%);
}

.role-staff{
  border-color:rgba(1,230,118,.22);
  box-shadow:0 0 50px rgba(1,230,118,.07);
}

.vt-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.vt-center{justify-content:center}
.vt-bunny{font-weight:900;letter-spacing:.2px;filter:drop-shadow(0 0 10px rgba(1,230,118,.12))}
.vt-bunny-r{opacity:.95}
.vt-hearts{display:inline-flex;gap:6px;align-items:center}
.vt-text{font-weight:900;letter-spacing:.3px}
.vt-bubbles{display:inline-flex;gap:7px;align-items:center}
.vt-bub{
  width:8px;height:8px;border-radius:999px;
  background:rgba(1,230,118,.9);
  box-shadow:0 0 18px rgba(1,230,118,.28);
  animation: vtBub 1.2s ease-in-out infinite;
}
.vt-bub:nth-child(2){animation-delay:.15s;opacity:.85}
.vt-bub:nth-child(3){animation-delay:.3s;opacity:.7}
@keyframes vtBub{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-5px) scale(1.12)}
}

@keyframes vtShine{
  0%{ transform: translateX(0) skewX(-18deg); opacity:0; }
  15%{ opacity:1; }
  55%{ opacity:1; }
  100%{ transform: translateX(210%) skewX(-18deg); opacity:0; }
}

@keyframes ambientFloat{
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(90px,40px,0) scale(1.08); }
  100% { transform: translate3d(0,0,0) scale(1); }
}

/* petit “grain” discret (optionnel, très beau) */
.bg-grain{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events:none;
  opacity: .08;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
  background-size: 3px 3px;
  animation: grainShift 10s linear infinite;
}
@keyframes grainShift{
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-30px,18px,0); }
}

.vt-box-head{
  display:flex;gap:8px;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
}
.vt-dot{
  width:10px;height:10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.10);
}
.vt-screens{
  position:relative;
  height:240px;
  background:rgba(0,0,0,.18);
}
.vt-screen{
  position:absolute;inset:0;
  background:
    radial-gradient(600px 220px at 20% 0%, rgba(110,231,183,.18), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.12));
  opacity:.95;
}
.vt-old{filter:saturate(.95) contrast(1.05)}
.vt-new{
  opacity:0;
  transform: translateX(10px);
}
.vt-wipe{
  position:absolute;inset:0;
  background:rgba(6,8,14,.92);
  transform: translateX(-110%);
  box-shadow: 0 0 60px rgba(1,230,118,.08);
}

.vt-box-footer{
  padding:12px 14px;
  border-top:1px solid rgba(255,255,255,.10);
}
.vt-hint{font-weight:900;color:rgba(255,255,255,.72);font-size:12px}
.vt-hint2{margin-top:6px;color:rgba(255,255,255,.72);line-height:1.5}

/* Page fade (optionnel) */
body.vt-lock{overflow:hidden}


.page-transition.show{
  opacity:1;
  transform:scale(1);
  pointer-events:all;
}


/* =========================
   vLiteRP — Ambient animated background
========================= */
.ambient-bg{
  position:absolute;
  inset:-1px;
  pointer-events:none;
  overflow:hidden;
  border-radius:inherit;
}
.ambient-bg:before,
.ambient-bg:after{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  border-radius:42px;
  filter: blur(18px);
  opacity:.55;
  transform: translate3d(0,0,0);
  animation: ambientFloat 10s ease-in-out infinite;
}
.ambient-bg:before{
  left:-140px;
  top:-160px;
  background: radial-gradient(circle at 30% 30%, rgba(110,231,183,.22), transparent 62%);
}
.ambient-bg:after{
  right:-160px;
  bottom:-170px;
  background: radial-gradient(circle at 30% 30%, rgba(110,231,183,.14), transparent 62%);
  animation-duration: 12.5s;
  animation-direction: reverse;
}
@keyframes ambientFloat{
  0%{ transform: translate3d(0,0,0) rotate(0deg) }
  50%{ transform: translate3d(28px, 18px, 0) rotate(6deg) }
  100%{ transform: translate3d(0,0,0) rotate(0deg) }
}

/* =========================
   Smooth reveal on scroll
========================= */
.reveal{
  opacity:0;
  transform: translateY(10px);
  transition: opacity 600ms ease, transform 600ms ease;
  will-change: opacity, transform;
}
.reveal.in{
  opacity:1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .ambient-bg:before,.ambient-bg:after{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
}

/* optional: hover micro animation */
.cardx, .card.glow, .pack, .heroCard{
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.cardx:hover, .pack:hover, .heroCard:hover{
  transform: translateY(-2px);
}


.pt-inner{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  text-align:center;
}

/* Neon badge */
.pt-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(1,230,118,.28);
  background:rgba(1,230,118,.08);
  box-shadow: 0 0 34px rgba(1,230,118,.14);
  font-weight:900;
  letter-spacing:.2px;
}

/* Spinner ring */
.pt-ring{
  width:64px;
  height:64px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.25);
  box-shadow: 0 22px 70px rgba(0,0,0,.55), 0 0 60px rgba(1,230,118,.08);
  position:relative;
  overflow:hidden;
}

.pt-ring:before{
  content:"";
  position:absolute;
  inset:-22px;
  background:conic-gradient(
    rgba(1,230,118,.0),
    rgba(1,230,118,.85),
    rgba(1,230,118,.0)
  );
  animation:ptSpin .9s linear infinite;
}

.pt-ring:after{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:18px;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(1,230,118,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

/* Small glowing dot */
.pt-dot{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:10px;
  height:10px;
  border-radius:999px;
  background:rgba(1,230,118,.95);
  box-shadow:0 0 22px rgba(1,230,118,.35);
  z-index:2;
  animation:ptPulse 1.05s ease-in-out infinite;
}

/* Scanline effect */
.pt-scan{
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.0;
  background:linear-gradient(180deg, transparent 0%, rgba(1,230,118,.10) 50%, transparent 100%);
  transform:translateY(-30%);
  transition:opacity .18s ease;
}

.page-transition.show ~ .pt-scan{
  opacity:.75;
  animation:ptScan 0.9s ease-in-out infinite;
}

/* Hide any accidental text selection flash */
.pt-text{display:none;}

@keyframes ptSpin{to{transform:rotate(360deg)}}
@keyframes ptPulse{
  0%{transform:translate(-50%,-50%) scale(1); opacity:.6}
  50%{transform:translate(-50%,-50%) scale(1.55); opacity:1}
  100%{transform:translate(-50%,-50%) scale(1); opacity:.6}
}
@keyframes ptScan{
  0%{transform:translateY(-30%); opacity:.0}
  35%{opacity:.75}
  100%{transform:translateY(30%); opacity:.0}
}

/* Page fade-in */
body.page-fade-in{
  animation:pageFadeIn .22s ease both;
}
@keyframes pageFadeIn{
  from{opacity:.0; transform:translateY(2px)}
  to{opacity:1; transform:translateY(0)}
}


/* ===== Règlement ===== */
.rule-list{margin:10px 0 0 18px;color:rgba(255,255,255,.82);line-height:1.65}
.rule-list li{margin:7px 0}

details.acc{margin-top:10px;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);overflow:hidden}
details.acc > summary{cursor:pointer;list-style:none;padding:12px 14px;font-weight:950;display:flex;align-items:center;justify-content:space-between;gap:10px}
details.acc > summary::-webkit-details-marker{display:none}
details.acc > summary:after{content:"＋";opacity:.75}
details.acc[open] > summary:after{content:"－"}
details.acc .acc-body{padding:0 14px 14px 14px}


/* Décor animé (ASCII / néon) — réutilisable */
.ascii-banner{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
  letter-spacing:.6px;
  opacity:.92;
  line-height:1.25;
  white-space:pre-wrap;
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  position:relative;
  overflow:hidden;
}
.ascii-banner:before{
  content:"";
  position:absolute;inset:-120px;
  background:conic-gradient(from 180deg, rgba(1,230,118,.0), rgba(1,230,118,.16), rgba(120,80,255,.10), rgba(1,230,118,.0));
  animation:asciiSpin 10s linear infinite;
  filter:blur(18px);
  opacity:.85;
}
.ascii-banner > *{position:relative;z-index:1}
@keyframes asciiSpin{to{transform:rotate(360deg)}}


/* (déco ascii supprimée à la demande) */


/* ===== Mobile: perf + pas de decallage + tables VIP lisibles ===== */
@media (max-width: 768px){
  html, body{overflow-x:hidden;}
  body{max-width:100vw;}

  /* Evite les lags: blur/backdrop + grosses ombres */
  .card, .hero, .nav, .sidebar{
    backdrop-filter:none !important;
  }
  .card, .btn, .nav, .sidebar{
    box-shadow:none !important;
  }
  *{scroll-behavior:auto;}

  /* Stop animations/transitions to reduce lag on mobile */
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
  }
  .ascii-banner:before{animation:none !important;}

  /* Tables (VIP/features) -> scroll horizontal au lieu de casser */
  table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  th, td{white-space:nowrap;}

  /* Grids trop larges -> une colonne */
  .grid, .grid2, .grid3{grid-template-columns:1fr !important;}
  .row{flex-direction:column !important;}
}

/* Respect system setting */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}