:root{
  --bg:#0b0b0f; --bg-2:#111116; --fg:#e9ffee; --muted:#a1a1aa;
  --green:#a7f3a1; --pink:#ff2e86; --outline:#232327;
  --radius:18px; --radius-lg:26px; --shadow:0 10px 30px rgba(0,0,0,.45);
  --maxw:1100px; --font-ui: system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  --font-brand: "Pacifico", cursive;
}

/* Base */
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0; color:var(--fg); font-family:var(--font-ui); line-height:1.4;
  background:
    radial-gradient(1200px 800px at 80% -10%, color-mix(in oklab, var(--pink) 18%, transparent), transparent 60%),
    radial-gradient(1000px 700px at   0% 110%, color-mix(in oklab, var(--green) 20%, transparent), transparent 55%),
    var(--bg);
  background-attachment:fixed;
}
[hidden]{display:none !important}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.h2{margin:0;font-size:22px}

/* Header */
.site-header{
  max-width:var(--maxw); margin:20px auto 0; padding:0 18px;
  display:grid; grid-template-columns: 1fr auto; gap:18px; align-items:center;
}
.brand{display:flex;gap:14px;align-items:center}
.brand-logo{width:465px;height:150px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.45))}
.brand-title{margin:0;font-family:var(--font-brand);font-weight:900;letter-spacing:.4px;font-size:clamp(40px,5.6vw,64px);color: var(--pink);}
.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.brand-sub{margin:2px 0 0 25px;color:var(--green)}
.profile-hero{
  width:200px;height:200px;border-radius:22px;object-fit:cover;
  border:1px solid var(--outline); box-shadow:var(--shadow);
}

@media (max-width: 640px) {
  .site-header {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 16px;
  }

  .profile-hero {
    order: -1;
    width: 160px;
    height: 160px;
  }

  .brand {
    flex-direction: column;
    align-items: center;
  }

  .brand-logo {
    width: 100%;
    height: auto;
    max-width: 90vw;
  }

  .brand-sub {
    margin: 8px 0 0;
    text-align: center;
  }
}

.subtitle{
  max-width:var(--maxw); margin:14px auto 28px auto; padding:0 18px;
  font-size:28px; font-weight:900; color:var(--green); text-align:center;
}

/* Layout */
.wrap{max-width:var(--maxw); margin:20px auto; padding:0 18px}
.grid{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:760px){ .grid{grid-template-columns:1.1fr .9fr} }

/* Cards */
.card{
  border:1px solid var(--outline);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:clip;
}
.card-inner{padding:18px}

/* Live */
.live-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.badge{display:inline-flex;align-items:center;gap:8px;font-weight:700;letter-spacing:.3px;
  padding:8px 12px;border-radius:999px;border:1px solid var(--outline);background:#12121a}
.badge .led{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.badge.live{border-color: color-mix(in oklab, var(--pink) 50%, var(--outline));
  background: linear-gradient(90deg, rgba(255,94,168,.18), rgba(0,230,135,.18))}
.badge.live .led{background:var(--pink);box-shadow:0 0 16px 2px color-mix(in oklab, var(--pink) 60%, transparent)}
.status{color:var(--muted);margin-top:6px}
.embed-wrap{margin-top:14px;border:1px solid var(--outline);border-radius:var(--radius);overflow:clip;background:#000}
#twitch-embed{width:100%;min-height:400px}
.offline{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border-radius:var(--radius);border:1px dashed var(--outline);background:#0f0f14}
.offline .action{padding:8px 12px;border-radius:10px;border:1px solid var(--outline)}

/* Boutique */
.shop-cta .cta-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.cta{padding:12px 16px;border-radius:12px;font-weight:700;letter-spacing:.3px;border:1px solid var(--outline);background:#101016}
.cta.primary{border-color: color-mix(in oklab, var(--green) 45%, var(--outline)); box-shadow:0 0 0 2px color-mix(in oklab, var(--green) 18%, transparent) inset}
.cta.secondary{border-color: color-mix(in oklab, var(--pink) 30%, var(--outline))}

/* Sociaux — principal */
.socials-main{margin-top:24px}
.social-grid{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:620px){ .social-grid{grid-template-columns:1fr 1fr} }
@media (min-width:980px){ .social-grid{grid-template-columns:1fr 1fr 1fr} }

.social-btn{
  display:flex;align-items:center;gap:12px;
  padding:16px 18px;border-radius:16px;font-weight:800;letter-spacing:.4px;
  border:1px solid transparent;background:linear-gradient(#0f0f14,#0f0f14) padding-box,
           linear-gradient(90deg,var(--green),var(--pink)) border-box;
  transition:transform .12s ease, box-shadow .12s ease;
  box-shadow:0 4px 18px rgba(0,0,0,.35);
}
.social-btn .icon{width:22px;height:22px;flex:0 0 22px;fill:currentColor}
.social-btn:hover{transform:translateY(-1px); box-shadow:0 8px 28px rgba(0,0,0,.45)}

.social-btn.twitch{color:#BF94FF}
.social-btn.youtube{color:#FF4E45}
.social-btn.instagram{color:#FF77B4}
.social-btn.tiktok{color:#69C9D0}
.social-btn.x{color:#FFFFFF}

/* Footer */
.site-footer{margin:30px 0 40px;text-align:center;color:var(--muted);font-size:14px}

/* Nav section */
.card.nav-section { margin-top: 32px; }
.card.nav-section .h2 { margin-bottom: 12px; }

.nav-grid {
  display: grid; gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 620px){ .nav-grid { grid-template-columns: 1fr 1fr; } }

.nav-tile {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px; border-radius: 18px; font-weight: 900; letter-spacing: .3px;
  border: 1px solid transparent;
  background:
    linear-gradient(#0f0f14, #0f0f14) padding-box,
    linear-gradient(90deg, var(--green), var(--pink)) border-box;
  box-shadow: 0 6px 22px rgba(0,0,0,.40);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.nav-tile .icon { width: 24px; height: 24px; fill: currentColor; flex: 0 0 24px; }
.nav-tile:hover { transform: translateY(-1px); box-shadow: 0 10px 32px rgba(0,0,0,.48); }
.nav-tile:focus-visible { outline: 2px solid color-mix(in oklab, var(--green) 50%, white); outline-offset: 2px; }

.nav-tile.general { color: #00e687; }  /* vert */
.nav-tile.vips    { color: #ff5ea8; }  /* rose */

/* Commandes page */
:root { --content-narrow: 920px; }

.command-group.narrow {      /* section conteneur */
  margin: 18px 0;
}
.command-group.narrow .card-inner{
  padding: 0;
  max-width: var(--maxw);
  margin: 0 auto;
}

.group-title {
  font-size: 22px;
  color: var(--green);
  margin: 18px auto 12px;
  max-width: var(--maxw);
  border-bottom: 2px solid var(--outline);
  padding-bottom: 6px;
}

/* Tableaux (plein style sombre, bordure propre) */
.table-wrap{ max-width: var(--maxw); margin: 0 auto 28px;}
.table-scroll { overflow:auto; -webkit-overflow-scrolling:touch; border-radius:16px; }

.command-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15px;
  color: var(--fg);
  background: var(--bg-2);
  border: 1px solid var(--outline);
  border-radius: 16px;
  overflow: hidden;
}
.command-table thead th{
  padding:12px 14px; text-align:left; font-weight:800; letter-spacing:.3px;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--green) 15%, #0f0f14),
    color-mix(in oklab, var(--pink) 15%, #0f0f14));
  color:var(--fg);
  border-bottom:1px solid var(--outline);
}
.command-table tbody td{
  padding:12px 14px; vertical-align:top; border-top:1px solid var(--outline);
}
/* Alternance sombre lisible */
.command-table tbody tr:nth-child(odd){  background:#0f0f14; }
.command-table tbody tr:nth-child(even){ background:#16161c; }
/* Hover discret */
.command-table tbody tr:hover{ background: color-mix(in oklab, var(--green) 6%, #16161c); }

/* Accents */
.command-name{ font-weight:700; color:var(--green); white-space:nowrap; }
.command-description{ color:var(--fg); opacity:.95; }
.command-permission{ color:var(--pink); font-weight:600; white-space:nowrap; text-align:center; }

/* Mobile */
@media (max-width:720px){
  .command-table thead{ position:sticky; top:0; z-index:1; }
  .command-table .command-description{ min-width:360px; }
}