/* ================================================================
   MOBILE V3 — Server Tracker — CSS MOBILE UNIFIÉ
   ================================================================ */

/* ─────────────────────────────────────
   VARIABLES
───────────────────────────────────── */
:root {
  --mv3-px: 16px;
  --mv3-h: 44px;   /* hauteur touch minimum */
  --mv3-r: 14px;   /* border-radius */
}

/* ─────────────────────────────────────
   BASE ≤ 1023px
───────────────────────────────────── */
@media (max-width: 1023px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  img, video { max-width: 100%; }
  /* z-index header v4 */
  .hc-header  { z-index: 5000 !important; }
  .hc-overlay { z-index: 4990 !important; }
  .hc-menu    { z-index: 5001 !important; }
  /* Anciens sélecteurs header (compatibilité) */
  .st-header  { z-index: 5000 !important; }
  .st-overlay { z-index: 4990 !important; }
  .st-mobile  { z-index: 5001 !important; }
}

/* ─────────────────────────────────────
   MOBILE ≤ 767px
───────────────────────────────────── */
@media (max-width: 767px) {

  body { font-size: 15px; line-height: 1.56; -webkit-text-size-adjust: 100%; }

  /* ── Typo ── */
  h1 { font-size: clamp(1.5rem, 7vw, 2.1rem)   !important; line-height: 1.15 !important; }
  h2 { font-size: clamp(1.2rem, 5vw, 1.5rem) !important; line-height: 1.2  !important; }
  h3 { font-size: clamp(1rem,   4.5vw, 1.2rem) !important; }

  /* ── Conteneurs ── */
  .mns-wrap,
  .lb-page, .pd-wrap, .td-wrap, .pg,
  .server-detail, .vip-container, .bc-inner,
  .container, .container-fluid, .wrap {
    padding-left:  var(--mv3-px) !important;
    padding-right: var(--mv3-px) !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* ── Sidebar → plein largeur ── */
  .sidebar, .aside, .side-panel {
    width: 100% !important; max-width: 100% !important;
    position: static !important; margin-bottom: 16px !important;
  }

  /* ────────────────────────────────────
     COMPOSANT LISTE SERVEURS / JEUX
  ──────────────────────────────────── */
  .mns-list { gap: 10px !important; }
  .mns-row  {
    border-radius: var(--mv3-r) !important;
    overflow: hidden !important;
  }
  /* Grille de la card → colonne */
  .mns-row-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 12px !important;
    align-items: stretch !important;
    /* override inline style */
    grid-template-columns: none !important;
  }
  .mns-rank {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    justify-content: flex-start !important;
    font-size: 15px !important;
  }
  .mns-banner {
    width: 100% !important;
    height: 86px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    position: relative !important;
  }
  .mns-banner img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
  .mns-name-top {
    display: block !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .mns-right {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    grid-template-columns: none !important;
  }
  .mns-right > * { width: 100% !important; }
  .mns-stat {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 7px 10px !important;
    background: rgba(255,255,255,.04) !important;
    border-radius: 9px !important;
  }
  .mns-stat .lbl { font-size: 11px !important; opacity: .72 !important; }
  .mns-stat .val  { font-size: 13px !important; font-weight: 800 !important; }
  .mns-pill {
    width: 100% !important;
    padding: 11px 14px !important;
    font-size: 13px !important;
    justify-content: center !important;
    border-radius: var(--mv3-r) !important;
  }
  .mns-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    justify-content: stretch !important;
  }
  .mns-action {
    flex: 1 !important;
    min-width: calc(50% - 4px) !important;
    min-height: var(--mv3-h) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: var(--mv3-r) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .vote-form { width: 100% !important; }
  .vote-next { font-size: 11px !important; text-align: center !important; }
  /* Filtre inline sur games.php */
  .st-filter-card { padding: 12px !important; border-radius: var(--mv3-r) !important; margin: 0 0 14px !important; }
  .st-filter-grid { grid-template-columns: 1fr !important; gap: 10px !important; display: flex !important; flex-direction: column !important; }
  /* inline style override pour games.php */
  div[style*="grid-template-columns: 1.2fr"] { grid-template-columns: 1fr !important; display: flex !important; flex-direction: column !important; }

  /* ────────────────────────────────────
     HERO PAGE INDEX
  ──────────────────────────────────── */
  .st-hero { padding: 26px var(--mv3-px) 14px !important; }
  .st-hero-title { font-size: clamp(1.8rem, 8vw, 2.6rem) !important; line-height: 1.1 !important; }
  .st-hero-sub   { font-size: 14px !important; margin-top: 8px !important; }
  .st-hero-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 18px !important;
  }
  .st-hero-btn {
    width: 100% !important;
    padding: 13px 20px !important;
    font-size: 15px !important;
    border-radius: 999px !important;
    text-align: center !important;
    display: block !important;
    box-sizing: border-box !important;
  }
  .st-section-title {
    flex-direction: column !important;
    gap: 6px !important;
    margin: 16px 0 12px !important;
  }

  /* ────────────────────────────────────
     PAGE SERVER DETAIL
  ──────────────────────────────────── */
  .server-detail {
    padding: 12px var(--mv3-px) 40px !important;
    margin: 0 !important;
  }
  .server-header {
    padding: 16px !important;
    border-radius: var(--mv3-r) !important;
    margin-bottom: 14px !important;
  }
  .server-banner {
    width: 100% !important;
    max-height: 150px !important;
    border-radius: 10px !important;
    margin-bottom: 12px !important;
    object-fit: cover !important;
    display: block !important;
  }
  .server-title  { font-size: clamp(1.2rem, 5vw, 1.5rem) !important; margin: 8px 0 !important; }
  .server-meta   { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
  .server-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 12px !important;
  }
  .server-actions .btn,
  .server-actions form { width: 100% !important; }
  .server-actions .btn { width: 100% !important; }
  .server-info-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .info-card { border-radius: var(--mv3-r) !important; }

  /* ────────────────────────────────────
     PAGE LEADERBOARD
  ──────────────────────────────────── */
  .lb-page { padding: 0 var(--mv3-px) 50px !important; }
  .lb-hero {
    padding: 28px 0 0 !important;
    margin-bottom: 22px !important;
  }
  .lb-hero-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding-bottom: 20px !important;
    gap: 16px !important;
  }
  .lb-hero-title { font-size: clamp(2.6rem, 11vw, 4.5rem) !important; letter-spacing: -1px !important; }
  .lb-hero-sub   { font-size: 13px !important; max-width: 100% !important; }
  .lb-hero-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    min-width: unset !important;
    width: 100% !important;
  }
  .lb-grid       { grid-template-columns: 1fr !important; gap: 14px !important; }
  .lb-sidebar    {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .lb-table-hd,
  .lb-row {
    grid-template-columns: 36px 1fr 66px 86px !important;
    padding: 0 10px !important;
  }
  .lb-th.c-active, .lb-stat.c-active,
  .lb-th.c-done,   .lb-stat.c-done { display: none !important; }
  .lb-row { height: 54px !important; }
  .lb-player-name { font-size: 13px !important; }
  .lb-filters {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  .lb-type-toggle { width: 100% !important; margin-left: 0 !important; }
  .lb-filter-btn  {
    flex: 1 !important;
    min-width: calc(50% - 4px) !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* ────────────────────────────────────
     PAGE PLAYER DETAIL
  ──────────────────────────────────── */
  .pd-wrap       { padding: 16px var(--mv3-px) 50px !important; }
  .pd-layout     { grid-template-columns: 1fr !important; gap: 14px !important; }
  .pd-breadcrumb { padding: 22px 0 18px !important; }
  .pd-bc-title   { font-size: clamp(1.3rem, 5.5vw, 1.8rem) !important; }
  .pd-card       { border-radius: var(--mv3-r) !important; }
  .pd-counters   { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .pd-about-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .pd-about-side { flex-direction: row !important; flex-wrap: wrap !important; gap: 8px !important; }
  .pd-stat-box   { flex: 1 !important; min-width: 100px !important; }
  .pd-trn-row    { grid-template-columns: 36px 1fr 68px !important; }
  .pd-trn-date, .pd-trn-arrow { display: none !important; }
  .pd-form-grid  { grid-template-columns: 1fr !important; gap: 10px !important; }

  /* ────────────────────────────────────
     PAGE VIP
  ──────────────────────────────────── */
  .vip-container { padding: 18px var(--mv3-px) 40px !important; }
  .vip-header    { padding: 20px 12px !important; text-align: center !important; }
  .vip-badge     { font-size: 50px !important; }
  .vip-title     { font-size: clamp(1.7rem, 7vw, 2.3rem) !important; }
  .vip-subtitle  { font-size: 14px !important; }
  .plans-grid    { grid-template-columns: 1fr !important; gap: 16px !important; }
  .plan-card     {
    padding: 20px 16px !important;
    border-radius: var(--mv3-r) !important;
    transform: none !important;
  }
  .plan-card.featured { transform: none !important; }
  .plan-price    { font-size: 2rem !important; }
  .plan-btn      { width: 100% !important; }

  /* ────────────────────────────────────
     PAGE TOURNAMENT
  ──────────────────────────────────── */
  .td-hero       { height: 270px !important; }
  .td-hero__title { font-size: clamp(1.5rem, 6.5vw, 2rem) !important; }
  .td-hero__top  { padding: 0 var(--mv3-px) !important; }
  .td-hero__content { padding: 0 var(--mv3-px) 20px !important; }
  .td-hero__stats { flex-wrap: wrap !important; gap: 6px !important; }
  .td-stat-chip  { padding: 6px 9px !important; font-size: 11px !important; }
  .td-grid       { grid-template-columns: 1fr !important; gap: 14px !important; }
  .td-wrap       { padding: 14px var(--mv3-px) 50px !important; }
  .td-countdown  {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 14px !important;
  }
  .td-countdown__units { flex-wrap: wrap !important; gap: 7px !important; }
  .cd-unit       { padding: 9px 11px !important; min-width: 54px !important; }
  .cd-unit__num  { font-size: 24px !important; }
  .td-tabs       {
    overflow-x: auto !important;
    scrollbar-width: none !important;
    gap: 0 !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .td-tabs::-webkit-scrollbar { display: none; }
  .td-tab {
    padding: 11px 13px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  .td-panel  { border-radius: var(--mv3-r) !important; }
  .td-back   { font-size: 12px !important; padding: 7px 12px !important; }

  /* ────────────────────────────────────
     PAGE TEAMS
  ──────────────────────────────────── */
  .bc  { padding: 22px 0 18px !important; overflow: hidden !important; }
  .bc-inner { padding: 0 var(--mv3-px) !important; }
  .pg  { padding: 16px var(--mv3-px) 50px !important; }
  .t-filters {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-bottom: 18px !important;
    align-items: stretch !important;
  }
  .t-filter-select,
  .t-search input,
  .t-search { width: 100% !important; }
  .t-section-hd {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
  }
  .t-create-btn { width: 100% !important; text-align: center !important; justify-content: center !important; }
  .t-grid { grid-template-columns: 1fr !important; gap: 12px !important; margin-bottom: 28px !important; }
  .t-card { border-radius: var(--mv3-r) !important; }
  .t-card-banner,
  .t-card-banner-default { height: 96px !important; }
  .t-card-body { padding: 30px 14px 14px !important; }
  .t-card-name { font-size: 14px !important; }

  /* ────────────────────────────────────
     PAGE PLAYERS
  ──────────────────────────────────── */
  .pl-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .pl-card { border-radius: var(--mv3-r) !important; }
  .pl-card-top { height: 58px !important; }
  .pl-card-body { padding: 30px 12px 14px !important; }
  .pl-card-name { font-size: 12px !important; }
  .pl-search-bar {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .pl-search-bar input,
  .pl-search-bar select { width: 100% !important; }

  /* ────────────────────────────────────
     FORMULAIRES GLOBAUX
  ──────────────────────────────────── */
  form { max-width: 100% !important; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="range"]),
  select,
  textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-height: var(--mv3-h) !important;
    font-size: 15px !important;
    padding: 10px 13px !important;
    border-radius: var(--mv3-r) !important;
    box-sizing: border-box !important;
  }
  label { font-size: 13px !important; margin-bottom: 5px !important; display: block !important; }
  .form-grid, .form-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* ────────────────────────────────────
     BOUTONS GLOBAUX
  ──────────────────────────────────── */
  .btn,
  .button,
  [class*="btn-"]:not(.hc-burger):not([class*="dot"]) {
    min-height: var(--mv3-h) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: var(--mv3-r) !important;
  }

  /* ────────────────────────────────────
     TABLES
  ──────────────────────────────────── */
  .table-responsive,
  table { display: block !important; width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  th, td { white-space: nowrap; }

  /* ────────────────────────────────────
     TABS / ONGLETS
  ──────────────────────────────────── */
  .nav-tabs, .tabs, .tab-list {
    display: flex !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    gap: 6px !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 2px !important;
  }
  .nav-tabs::-webkit-scrollbar,
  .tabs::-webkit-scrollbar { display: none; }
  .nav-tabs a, .tabs a, .tab-item {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* ────────────────────────────────────
     MODALES
  ──────────────────────────────────── */
  .modal-content, .modal-dialog {
    width: calc(100% - 20px) !important;
    margin: 10px !important;
    border-radius: var(--mv3-r) !important;
  }

  /* ────────────────────────────────────
     PAGINATION
  ──────────────────────────────────── */
  .pagination, .pager {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 14px 0 !important;
  }
  .pagination a, .pagination button, .page-link {
    min-width: 38px !important;
    height: 38px !important;
    padding: 0 10px !important;
    border-radius: 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ────────────────────────────────────
     FOOTER
  ──────────────────────────────────── */
  .site-footer__inner {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 16px var(--mv3-px) !important;
  }
  .footer-links { width: 100% !important; }
  .footer-links__list { flex-wrap: wrap !important; gap: 6px !important; }
  .footer-link { font-size: 12px !important; }
  .site-footer__bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    font-size: 11px !important;
    padding: 10px var(--mv3-px) 14px !important;
  }

  /* ────────────────────────────────────
     UTILITAIRES
  ──────────────────────────────────── */
  a, button { -webkit-tap-highlight-color: transparent; }
  html { scroll-behavior: smooth; }
  .hide-mobile  { display: none !important; }
  .show-mobile  { display: block !important; }

} /* end 767px */

/* ─────────────────────────────────────
   XS ≤ 380px
───────────────────────────────────── */
@media (max-width: 380px) {
  :root { --mv3-px: 11px; }
  .mns-banner { height: 70px !important; }
  .mns-action { font-size: 12px !important; }
  .lb-hero-title { font-size: clamp(2rem, 10vw, 2.8rem) !important; }
  .td-hero   { height: 220px !important; }
  .pl-grid   { grid-template-columns: 1fr !important; }
}

/* ─────────────────────────────────────
   TABLET 640–767px
───────────────────────────────────── */
@media (min-width: 640px) and (max-width: 767px) {
  .mns-row-inner {
    display: grid !important;
    grid-template-columns: 58px 1fr !important;
    gap: 12px !important;
  }
  .pl-grid  { grid-template-columns: repeat(3, 1fr) !important; }
  .t-grid   { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ─────────────────────────────────────
   TABLET LARGE 768–1023px
───────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  .mns-row-inner {
    grid-template-columns: 64px 1fr auto !important;
    gap: 14px !important;
  }
  .mns-banner { height: 100px !important; }
  .lb-grid    { grid-template-columns: 1fr !important; }
  .lb-hero-stats { grid-template-columns: repeat(4, 1fr) !important; }
  .pd-layout  { grid-template-columns: 280px 1fr !important; }
  .td-grid    { grid-template-columns: 1fr 320px !important; }
  .t-grid     { grid-template-columns: repeat(2, 1fr) !important; }
  .pl-grid    { grid-template-columns: repeat(3, 1fr) !important; }
  .plans-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ────────────────────────────────────
   PLAYER PAGE — Lisibilité renforcée (≤ 767px)
   NOTE: player.php embarque beaucoup de CSS desktop en inline,
   donc on force ici des overrides mobiles (avec !important).
──────────────────────────────────── */
@media (max-width: 767px) {
  /* Breadcrumb */
  .pd-breadcrumb-inner { padding: 0 var(--mv3-px) !important; }
  .pd-bc-trail { flex-wrap: wrap !important; row-gap: 4px !important; }
  .pd-bc-trail, .pd-bc-trail a, .pd-bc-trail span { font-size: 12px !important; }

  /* Sidebar card */
  .pd-avatar-zone { padding: 22px 16px 16px !important; }
  .pd-avatar, .pd-avatar-initials { width: 108px !important; height: 108px !important; }
  .pd-avatar-initials { font-size: 34px !important; }
  .pd-name { font-size: 18px !important; margin-top: 18px !important; }
  .pd-sub  { font-size: 11px !important; letter-spacing: 1.6px !important; }

  .pd-lb-rank { margin: 0 16px 16px !important; padding: 12px !important; gap: 12px !important; }
  .pd-lb-rank-num { font-size: 28px !important; }
  .pd-lb-rank-pts { font-size: 16px !important; }

  .pd-meta { padding: 0 16px 14px !important; }
  .pd-meta-row { padding: 10px 0 !important; }
  .pd-meta-key { font-size: 10px !important; letter-spacing: 1.3px !important; }
  .pd-meta-val { font-size: 11px !important; }

  .pd-actions { padding: 14px 16px !important; }
  .pd-btn { width: 100% !important; padding: 12px 14px !important; font-size: 11px !important; letter-spacing: 1.4px !important; }

  /* Counters */
  .pd-counter { padding: 16px 10px !important; }
  .pd-counter-num { font-size: 26px !important; }
  .pd-counter-lbl { font-size: 10px !important; letter-spacing: 1.3px !important; }

  /* Tabs */
  .pd-tabs { margin-bottom: 14px !important; }
  .pd-tab { padding: 12px 14px !important; font-size: 12px !important; letter-spacing: 1.2px !important; }

  /* Panels */
  .pd-panel { margin-bottom: 14px !important; }
  .pd-panel-hd { padding: 14px 14px 12px !important; flex-wrap: wrap !important; }
  .pd-panel-hd h2 { font-size: 12px !important; letter-spacing: 1.2px !important; }
  .pd-panel-hd .pd-hd-link { font-size: 12px !important; width: 100% !important; }
  .pd-panel-bd { padding: 14px !important; }

  /* About */
  .pd-bio-text { font-size: 14px !important; line-height: 1.65 !important; }
  .pd-bullet-list { margin-top: 14px !important; }
  .pd-bullet-list li { font-size: 13px !important; }
  .pd-stat-box { padding: 12px !important; }
  .pd-stat-box-label { font-size: 10px !important; letter-spacing: 1.3px !important; }
  .pd-stat-box-val { font-size: 22px !important; }

  /* Tournament rows: plus lisible, empile le statut */
  .pd-trn-row { grid-template-columns: 34px 1fr !important; padding: 12px 0 !important; }
  .pd-trn-date, .pd-trn-arrow { display: none !important; }
  .pd-trn-num { font-size: 12px !important; }
  .pd-trn-name { max-width: none !important; font-size: 13px !important; }
  .pd-trn-team { font-size: 12px !important; }
  .pd-trn-status { grid-column: 2 !important; text-align: left !important; margin-top: 6px !important; }
  .pd-status-pill { font-size: 10px !important; letter-spacing: 1.4px !important; padding: 5px 10px !important; border-radius: 10px !important; }

  /* Forms */
  .pd-form-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .pd-field input, .pd-field textarea { font-size: 15px !important; padding: 12px !important; }
  .pd-av-drop { padding: 14px !important; }

  /* Background: un peu moins chargé */
  .pd-grid { opacity: .018 !important; }
}

@media (max-width: 420px) {
  .pd-avatar, .pd-avatar-initials { width: 100px !important; height: 100px !important; }
  .pd-counter-num { font-size: 24px !important; }
}