/* Header + base UI (compatible avec ton mnsgame_like.css) */
.site-header{position:sticky;top:0;z-index:50;background:rgba(10,12,20,.86);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.10)}
.header-inner{max-width:1200px;margin:0 auto;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.brand-badge{width:36px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#7c5cff,#5a46ff);box-shadow:0 10px 30px rgba(124,92,255,.25)}
.brand-title{font-weight:900;letter-spacing:.4px}
.nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.nav a{color:rgba(255,255,255,.78);text-decoration:none;padding:8px 10px;border-radius:12px;border:1px solid transparent}
.nav a:hover{color:#fff;border-color:rgba(124,92,255,.45);background:rgba(124,92,255,.10)}
.lang{display:flex;gap:8px}
.lang-btn{color:#fff;text-decoration:none;padding:7px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04)}
.lang-btn:hover{filter:brightness(1.05)}
.burger{display:none;width:44px;height:40px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#fff;font-size:18px;cursor:pointer}

.drawer{display:none;max-width:1200px;margin:0 auto;padding:12px 14px;border-top:1px solid rgba(255,255,255,.10)}
.drawer a{display:block;color:#fff;text-decoration:none;padding:10px 10px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);margin-bottom:10px}
.drawer-lang{display:flex;gap:10px}
.drawer-lang a{flex:1;text-align:center}

@media(max-width: 980px){
  .nav,.lang{display:none}
  .burger{display:inline-flex;align-items:center;justify-content:center}
  .drawer.open{display:block}
}

/* =========================================================
   Unification hauteur bannières (Page Index = Page Jeux)
   - Si une bannière est affichée via .mns-banner, elle aura la même hauteur partout.
   ========================================================= */
:root{
  --st-banner-h: 110px;         /* desktop */
  --st-banner-h-mobile: 92px;   /* mobile */
}

.mns-banner{height: var(--st-banner-h) !important;}
.mns-banner img{height:100% !important; width:100% !important; object-fit:cover;}

/* =========================================================
   Titre/overlay dans les bannières (style page Jeux)
   - Visible sur desktop
   - Masqué sur mobile via st_filters.css + mnsgame_like.css
   ========================================================= */
.mns-title{
  position:absolute;
  left:12px;
  bottom:10px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(8px);
  color:#fff;
  font-weight:900;
  font-size:13px;
  line-height:1;
  max-width: calc(100% - 24px);
}
.mns-title span:last-child{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

@media(max-width: 768px){
  .mns-banner{height: var(--st-banner-h-mobile) !important;}
}


/* === MOBILE GLOBAL VISIBILITY PATCH === */
@media(max-width: 768px){
  /* Prevent horizontal overflow */
  html,body{max-width:100%;overflow-x:hidden}
  body{font-size:15px}

  /* Header: keep everything reachable */
  .header-inner{flex-wrap:wrap;align-items:center}
  .nav{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;gap:8px;padding-bottom:6px}
  .nav a{white-space:nowrap;font-size:13px;padding:8px 10px;border-radius:12px}

  /* Common containers */
  .container,.wrap,.page,.content,.mns-wrap{padding-left:12px;padding-right:12px}

  /* Grids -> single column */
  .grid,.row,[class*="grid-"],[class*="cols-"]{grid-template-columns:1fr !important}
  .row{flex-direction:column}
  .col,.column{width:100% !important}

  /* Cards and lists */
  .card,.mns-card,.server-card{width:100%;max-width:100%}
  .card *{min-width:0}

  /* mns mobile → géré par mobile.css */

  /* Banners */
  .mns-banner{width:100%;border-radius:16px;overflow:hidden}
  .mns-banner img{width:100%;height:100%;object-fit:cover;display:block}

  /* Forms */
  form{max-width:100%}
  input,select,textarea{width:100%;max-width:100%;box-sizing:border-box}
  .form-grid,[class*="form-grid"],.form-row{grid-template-columns:1fr !important}
  .form-row{display:block}

  /* Tables */
  table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  th,td{white-space:nowrap}

  /* Buttons: avoid off-screen */
  .btn,button,[type="submit"],[type="button"],.button{max-width:100%}
}

/* Slightly wider phones / small tablets */
@media(max-width: 980px){
  .header-inner{padding:10px 12px}
}

/* ===============================
   HERO + TITRE SECTION (Index)
   =============================== */
.st-hero{
  text-align:center;
  padding:38px 12px 18px;
  position:relative;
  isolation:isolate;
}
.st-hero::before{
  content:"";
  position:absolute;
  inset:-30px -10px auto -10px;
  height:220px;
  background:
    radial-gradient(240px 140px at 50% 55%, rgba(33,212,255,.16), transparent 70%),
    radial-gradient(260px 160px at 50% 55%, rgba(255,59,191,.10), transparent 72%);
  filter: blur(2px);
  pointer-events:none;
  z-index:-1;
}
.st-hero-title{
  margin:0;
  font-weight:800;
  letter-spacing:.4px;
  line-height:1.05;
  font-size:54px;
  text-shadow:
    0 0 26px rgba(33,212,255,.14),
    0 0 18px rgba(255,59,191,.10);
}
.st-hero-sub{
  margin:10px 0 0;
  opacity:.78;
  font-size:16px;
}
.st-hero-actions{
  margin-top:18px;
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
}
.st-hero-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:999px;
  text-decoration:none;
  color:#0b0d12;
  font-weight:700;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(90deg, rgba(33,212,255,.95), rgba(255,59,191,.92));
  box-shadow:
    0 10px 28px rgba(0,0,0,.40),
    0 0 22px rgba(33,212,255,.16),
    0 0 18px rgba(255,59,191,.10);
}
.st-hero-btn:hover{ filter:brightness(1.05); }

.st-section-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:18px 0 14px;
  text-align:center;
}
.st-section-title h2{
  margin:0;
  font-size:30px;
  letter-spacing:.3px;
  text-shadow:0 0 18px rgba(0,245,255,.12);
}
.st-badge-new{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:10px;
  font-size:11px;
  font-weight:800;
  background:linear-gradient(180deg, rgba(120,255,255,.25), rgba(80,140,255,.20));
  border:1px solid rgba(120,255,255,.25);
  box-shadow:0 0 14px rgba(0,245,255,.12);
}

@media (max-width: 768px){
  .st-hero{ padding:26px 10px 14px; }
  .st-hero-title{ font-size:40px; }
  .st-hero-sub{ font-size:14px; }
  .st-hero-actions{ gap:10px; }
  .st-hero-btn{ width:min(340px, 100%); }
  .st-section-title{ margin:14px 0 10px; }
  .st-section-title h2{ font-size:24px; }
}