/* =========================================================
   MOBILE.CSS (clean)
   - Nettoyé: doublons supprimés, sections regroupées
   - Objectifs: lisibilité + cartes serveur + header caché + bottom bar agrandie/visible
   ========================================================= */

/* ===============================
   0) BASE MOBILE
================================ */
@media (max-width: 768px){
  body{ font-size:15px; padding-top:0 !important; }

  .container, .wrapper, main{
    width:100%;
    max-width:100%;
    padding-left:14px !important;
    padding-right:14px !important;
  }

  h1{ font-size:22px !important; line-height:1.15 !important; }
  h2{ font-size:18px !important; }
  p{ font-size:14px !important; line-height:1.45 !important; }

  input, select, textarea{
    width:100%;
    font-size:16px;
    padding:12px;
    border-radius:12px;
    min-height:44px;
  }
}

/* ===============================
   1) TABLE -> CARTES (Index / All Servers)
================================ */
@media (max-width: 768px){
  .filters-row{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    padding:10px 12px !important;
    max-width:540px !important;
    margin:0 auto 12px auto !important;

    position:sticky;
    top:64px;
    z-index:900;

    background:rgba(10, 0, 21, .85);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-radius:14px;
    border:1px solid rgba(0,240,255,.15);
  }

  .filters-row select,
  .filters-row input{ width:100%; }

  .table-wrap{
    max-width:980px;
    margin:0 auto;
    padding:0 12px;
  }

  .t-head{ display:none !important; }

  .t-row{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    padding:14px !important;
    margin:10px auto !important;
    width:100% !important;
    max-width:540px !important;

    border-radius:16px !important;
    background:rgba(15, 5, 35, .85) !important;
    border:1px solid rgba(0,240,255,.18) !important;
    box-shadow:0 10px 35px rgba(0,0,0,.35);
  }

  .t-cell{
    display:flex !important;
    align-items:baseline !important;
    justify-content:space-between !important;
    gap:12px !important;
    padding:8px 0 !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
    min-width:0;
  }
  .t-cell:last-child{ border-bottom:0 !important; }

  .t-cell::before{
    content:attr(data-label);
    opacity:.75;
    font-weight:700;
    flex:0 0 auto;
    max-width:45%;
  }

  .t-cell > *{
    margin-left:auto;
    text-align:right;
    max-width:55%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .t-row a, .t-row button, .btn, button{ min-height:44px; }

  .server-name, .srv-name{
    font-size:1.15rem !important;
    font-weight:800 !important;
  }
}

/* ===============================
   2) HERO (boutons Add + All) compacts
================================ */
@media (max-width: 768px){
  .hero, .hero-section{ padding:18px 0 !important; }

  .hero .hero-actions,
  .hero-section .hero-actions,
  .hero .buttons,
  .hero-section .buttons{
    display:flex !important;
    gap:10px !important;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    margin-top:12px !important;
  }

  .hero a.btn,
  .hero button.btn,
  .hero-section a.btn,
  .hero-section button.btn,
  a.btn-add-server,
  a.btn-all-servers{
    font-size:13px !important;
    padding:10px 12px !important;
    border-radius:12px !important;
    min-height:40px !important;
    width:auto !important;
    max-width:100%;
    box-shadow:0 8px 18px rgba(0,0,0,.18) !important;
  }

  .hero .hero-content,
  .hero-section .hero-content{
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    padding:12px !important;
    border-radius:14px !important;
  }
}

/* ===============================
   3) THEME (palette + contrastes)
================================ */
:root{
  --bg-0:#070A12;
  --bg-1:#0B1020;
  --card:#0F1730;
  --card-2:#111C3A;

  --text:#EAF0FF;
  --muted:#B6C2E2;
  --hint:#8FA3D6;

  --accent:#4DE1FF;
  --accent2:#D14CFF;

  --border:rgba(255,255,255,.10);
  --shadow:0 12px 30px rgba(0,0,0,.35);
}

body{
  background:
    radial-gradient(900px 500px at 15% 10%, rgba(77,225,255,.10), transparent 55%),
    radial-gradient(700px 450px at 85% 15%, rgba(209,76,255,.10), transparent 60%),
    var(--bg-0) !important;
  color:var(--text) !important;
}

a{ color:var(--accent); }
a:hover{ color:#8AF0FF; }

p, li, .text, .desc{ color:var(--muted) !important; }

h1,h2,h3,h4{
  color:var(--text) !important;
  text-shadow:0 2px 18px rgba(0,0,0,.45);
}

.card, .server-card, .panel, .box, .content-box{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important;
  border:1px solid var(--border) !important;
  box-shadow:var(--shadow) !important;
  border-radius:16px;
}
.card:hover, .server-card:hover{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)) !important;
}

.btn, button, .button, a.btn{
  color:#071018 !important;
  font-weight:700;
  border:0 !important;
  background:linear-gradient(90deg, var(--accent), var(--accent2)) !important;
  box-shadow:0 12px 28px rgba(77,225,255,.18), 0 12px 28px rgba(209,76,255,.12) !important;
}

/* ===============================
   4) HEADER: caché sur mobile
================================ */
@media (max-width: 768px){
  header, .site-header, .main-header, #header{ display:none !important; }
}

/* ===============================
   5) BOTTOM BAR: agrandie + plus visible (UN SEUL BLOC)
================================ */
@media (max-width: 768px){
  .bottom-nav,
  .bottom-bar,
  .mobile-bottom-bar,
  nav.bottom-bar,
  #bottom-nav{
    height:100px !important;
    padding:12px 12px !important;
    background:rgba(10, 14, 28, .97) !important;
    border-top:1px solid rgba(255,255,255,.18) !important;
    box-shadow:
      0 -10px 30px rgba(0,0,0,.55),
      0 -1px 0 rgba(255,255,255,.10),
      0 0 18px rgba(77,225,255,.18) !important;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    z-index:99999 !important;
  }

  .bottom-nav a,
  .bottom-bar a,
  .mobile-bottom-bar a,
  #bottom-nav a{
    padding:12px 10px !important;
    min-width:74px !important;
    border-radius:16px !important;
    color:rgba(234,240,255,.95) !important;
    font-weight:800 !important;
    border:1px solid rgba(255,255,255,.12) !important;
    background:rgba(255,255,255,.04) !important;
    -webkit-tap-highlight-color:transparent;
    transition:transform .12s ease, filter .12s ease;
  }

  .bottom-nav a:active,
  .bottom-bar a:active,
  .mobile-bottom-bar a:active,
  #bottom-nav a:active{
    transform:translateY(-1px);
    filter:brightness(1.08);
  }

  .bottom-nav a i,
  .bottom-bar a i,
  .mobile-bottom-bar a i,
  #bottom-nav a i,
  .bottom-nav a svg,
  .bottom-bar a svg,
  .mobile-bottom-bar a svg,
  #bottom-nav a svg{
    width:26px !important;
    height:26px !important;
    font-size:26px !important;
    margin-bottom:7px !important;
    opacity:1 !important;
    display:inline-block;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.55));
  }

  .bottom-nav a span,
  .bottom-bar a span,
  .mobile-bottom-bar a span,
  #bottom-nav a span{
    font-size:13.5px !important;
    line-height:1 !important;
    opacity:1 !important;
    text-shadow:0 2px 12px rgba(0,0,0,.55);
  }

  .bottom-nav a.active,
  .bottom-bar a.active,
  .mobile-bottom-bar a.active,
  #bottom-nav a.active{
    background:linear-gradient(90deg, rgba(77,225,255,.28), rgba(209,76,255,.20)) !important;
    border-color:rgba(77,225,255,.45) !important;
    box-shadow:0 10px 22px rgba(77,225,255,.10), 0 10px 22px rgba(209,76,255,.08) !important;
    color:#EAF0FF !important;
  }

  body{ padding-bottom:110px !important; }
  main, .page-content{ padding-bottom:110px !important; }
}

/* ===============================
   6) VIP: cartes plus compactes (mobile)
================================ */
@media (max-width: 768px){
  .vip-card,
  .vip-server-card,
  .vipServers .card,
  .vip-servers .card,
  #vip .card{
    padding:10px 12px !important;
    border-radius:14px !important;
    box-shadow:0 10px 22px rgba(0,0,0,.28) !important;
  }

  .vip-card h3,
  .vip-server-card h3,
  .vip-card .title,
  .vip-server-card .title{
    font-size:15px !important;
    margin:0 0 6px 0 !important;
    line-height:1.15 !important;
  }

  .vip-card p,
  .vip-server-card p,
  .vip-card .meta,
  .vip-server-card .meta{
    font-size:12.5px !important;
    margin:4px 0 !important;
    opacity:.9;
  }

  .vip-card .btn,
  .vip-server-card .btn,
  .vip-card a.btn,
  .vip-server-card a.btn{
    font-size:12.5px !important;
    padding:8px 10px !important;
    border-radius:12px !important;
    min-height:36px !important;
  }
}