/* ============================================================
   GameZone — mobile.css
   Système responsive complet — source unique de vérité
   Breakpoints : 1024 / 768 / 600 / 480 / 360
   ============================================================ */

/* ============================================================
   VARIABLES MOBILE
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --gz-header-h: 56px;
    --gz-wrap-px: 14px;
  }
}

@media (max-width: 360px) {
  :root { --gz-wrap-px: 10px; }
}

/* iOS : éviter le zoom sur les inputs */
@media (max-width: 768px) {
  input, select, textarea, button { font-size: max(16px, 1em) !important; }
}

/* ============================================================
   WRAP
   ============================================================ */
@media (max-width: 768px) {
  .gz-wrap { padding-left: var(--gz-wrap-px, 14px) !important; padding-right: var(--gz-wrap-px, 14px) !important; }
}

/* ============================================================
   HEADER
   ============================================================ */
@media (max-width: 768px) {
  #gz-header { height: 56px; }
  .gz-logo-text { font-size: 1.1rem; }
  .gz-logo-icon { width: 28px; height: 28px; font-size: 14px; }

  /* Cacher la recherche dans le header sur mobile */
  .gz-header-search { display: none; }

  /* User bar compact */
  .gz-header-user-name { display: none; }
  .gz-user-level-badge { display: none; }
  .gz-header-user-btn { padding: 4px; border-radius: 50%; background: rgba(255,255,255,.06); }

  /* Dropdown user positionné correctement */
  .gz-header-user-dropdown {
    right: 0;
    left: auto;
    min-width: 160px;
  }
}

/* Navigation mobile overlay */
@media (max-width: 768px) {
  .gz-nav { display: none; }

  .gz-nav.open {
    display: block;
    position: fixed;
    top: 56px;
    left: 0; right: 0;
    background: rgba(9,9,15,.98);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid #1e1e32;
    padding: 8px 14px 20px;
    z-index: 998;
    max-height: calc(100svh - 56px);
    overflow-y: auto;
  }

  .gz-nav.open ul {
    flex-direction: column !important;
    gap: 2px !important;
  }

  .gz-nav.open ul li a {
    padding: 12px 14px !important;
    font-size: .95rem !important;
    border-radius: 8px !important;
    display: block !important;
  }

  .gz-menu-toggle { display: flex !important; }
}

/* ============================================================
   LAYOUT PRINCIPAL
   ============================================================ */
@media (max-width: 1024px) {
  .gz-layout {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .gz-sidebar {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 12px !important;
  }
}

@media (max-width: 600px) {
  .gz-sidebar {
    grid-template-columns: 1fr !important;
  }
  .gz-layout { gap: 14px !important; padding: 14px 0 !important; }
}

/* ============================================================
   HERO SLIDER
   ============================================================ */
@media (max-width: 768px) {
  .gz-slider { height: auto !important; min-height: 0 !important; }
  .gz-slider__track { height: auto !important; }
  .gz-slider__slide { position: relative !important; height: auto !important; }
  .gz-slider__slide:not(.active) { display: none !important; }
  .gz-slider__slide.active { position: relative !important; opacity: 1 !important; }

  .gz-slider__bg {
    position: absolute !important;
    height: 200px !important;
    top: 0 !important;
    transform: none !important;
    filter: none !important;
  }

  .gz-slider__overlay {
    min-height: 200px !important;
    background: linear-gradient(to top, rgba(9,9,15,1) 40%, rgba(9,9,15,.5) 75%, rgba(9,9,15,.2) 100%) !important;
  }

  .gz-slider__content { position: relative !important; padding-top: 140px !important; height: auto !important; }
  .gz-slider__inner { padding: 0 0 16px !important; max-width: 100% !important; }
  .gz-slider__title { font-size: 1.3rem !important; margin-bottom: 8px !important; }
  .gz-slider__excerpt { display: none !important; }
  .gz-slider__score { padding: 6px 12px !important; }
  .gz-slider__score-num { font-size: 1.4rem !important; }
  .gz-slider__cta { padding: 9px 16px !important; font-size: .82rem !important; }
  .gz-slider__arrow { display: none !important; }

  .gz-slider__thumbs { padding: 8px 14px 14px !important; gap: 6px !important; }
  .gz-slider__thumb { min-width: 100px !important; max-width: 130px !important; padding: 5px 8px !important; }
  .gz-slider__thumb-title { font-size: .68rem !important; }
  .gz-slider__thumb-img { width: 28px !important; height: 28px !important; }
}

/* ============================================================
   GRILLES DE CARDS
   ============================================================ */
@media (max-width: 900px) {
  .gz-grid--4 { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width: 700px) {
  .gz-grid--4 { grid-template-columns: repeat(2, 1fr) !important; }
  .gz-grid--3 { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 480px) {
  .gz-grid--4,
  .gz-grid--3,
  .gz-grid--2,
  .gz-grid   { grid-template-columns: 1fr !important; gap: 10px !important; }
}

@media (max-width: 768px) {
  .gz-game-card__body { padding: 10px 12px !important; }
  .gz-game-card__title { font-size: .88rem !important; }
  .gz-game-card__score-wrap { font-size: .85rem !important; }
}

/* ============================================================
   HOMEPAGE SECTIONS
   ============================================================ */
@media (max-width: 768px) {
  .gz-home-section { margin-bottom: 24px !important; }
  .gz-section-title h2 { font-size: .95rem !important; }
  .gz-home-split { gap: 14px !important; grid-template-columns: 1fr !important; }
}

@media (max-width: 768px) {
  .gz-trending__rank { font-size: 1.2rem !important; min-width: 22px !important; }
  .gz-trending__thumb { width: 56px !important; height: 42px !important; }
  .gz-trending__title { font-size: .82rem !important; }
  .gz-trending__score { min-width: 30px !important; height: 30px !important; font-size: .78rem !important; }
  .gz-post-item { grid-template-columns: 76px 1fr !important; gap: 8px !important; padding: 8px !important; }
  .gz-post-item__thumb { width: 76px !important; height: 54px !important; }
  .gz-post-item__title { font-size: .82rem !important; }
}

/* ============================================================
   FICHE JEU (single-jeu.php)
   ============================================================ */
@media (max-width: 768px) {
  /* Banner */
  .gz-game-header__banner { height: auto !important; min-height: 0 !important; }
  .gz-game-header__banner img { max-height: 180px !important; filter: none !important; }
  .gz-game-header__banner-overlay { display: none !important; }

  /* Infos header */
  .gz-game-header__info {
    position: static !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 14px !important;
  }

  .gz-game-cover { width: 72px !important; height: 96px !important; border-radius: 7px !important; }
  .gz-game-header__text { flex: 1 !important; min-width: 0 !important; }
  .gz-game-header__title { font-size: 1.15rem !important; margin-bottom: 6px !important; }
  .gz-score-global { display: none !important; }
  .gz-game-header__details { font-size: .75rem !important; gap: 6px !important; flex-wrap: wrap !important; }

  /* Corps fiche */
  .gz-game-body { padding: 14px !important; }

  /* Sous-scores */
  .gz-score-breakdown { padding: 14px !important; }
  .gz-sub-score { grid-template-columns: 85px 1fr 28px !important; gap: 6px !important; }
  .gz-sub-score__label { font-size: .76rem !important; }

  /* Liens achat */
  .gz-buy-links { padding: 14px !important; flex-wrap: wrap !important; gap: 6px !important; }
  .gz-buy-btn { padding: 8px 12px !important; font-size: .8rem !important; }

  /* Wishlist */
  .gz-list-buttons { flex-wrap: wrap !important; gap: 5px !important; }
  .gz-list-btn { font-size: .78rem !important; padding: 6px 10px !important; }

  /* Pros/Cons */
  .gz-pros-cons { grid-template-columns: 1fr !important; gap: 10px !important; }

  /* Tableau infos */
  .gz-info-table td { font-size: .8rem !important; padding: 6px 0 !important; }
  .gz-info-table td:first-child { width: 95px !important; }

  /* Scores comparaison */
  .gz-scores-comparison { gap: 10px !important; }
  .gz-score-panel__num { font-size: 2.5rem !important; }

  /* Onglets jeu */
  .gz-game-tab { padding: 11px 10px !important; font-size: .76rem !important; gap: 4px !important; }
  .gz-game-tab svg { display: none !important; }
}

/* ============================================================
   ARTICLE (single.php)
   ============================================================ */
@media (max-width: 768px) {
  .gz-article-banner { max-height: 200px !important; }
  .gz-article-banner__img { max-height: 200px !important; }

  .gz-article-header { padding: 14px !important; margin: 10px 0 !important; }
  .gz-article-header__title { font-size: 1.35rem !important; line-height: 1.3 !important; }
  .gz-article-header__chapo { font-size: .92rem !important; }

  .gz-article-header__meta {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .gz-article-meta-right { flex-wrap: wrap !important; gap: 6px !important; }
  .gz-article-meta-item { font-size: .75rem !important; }

  .gz-content { padding: 16px 14px !important; }
  .gz-content h2 { font-size: 1.15rem !important; }
  .gz-content h3 { font-size: 1rem !important; }

  .gz-article-nav { grid-template-columns: 1fr !important; gap: 8px !important; }
  .gz-article-nav__item--next { text-align: left !important; }
  .gz-article-nav__item { padding: 12px !important; }

  .gz-toc { padding: 12px !important; }
  .gz-author-card { flex-direction: column !important; padding: 14px !important; gap: 12px !important; }
}

/* ============================================================
   AVIS (reviews)
   ============================================================ */
@media (max-width: 600px) {
  .gz-reviews-header { flex-direction: column !important; gap: 10px !important; align-items: flex-start !important; }

  .gz-review-score-btns { gap: 3px !important; }
  .gz-score-btn { width: 28px !important; height: 28px !important; font-size: .72rem !important; border-radius: 5px !important; }

  .gz-review-card { padding: 12px !important; }
  .gz-review-card__header { flex-direction: column !important; gap: 8px !important; }
  .gz-review-card__score-wrap { align-self: flex-start !important; }
}

/* ============================================================
   FORUM
   ============================================================ */
@media (max-width: 768px) {
  .gz-forum-header { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
  .gz-forum-filters { flex-direction: column !important; gap: 8px !important; }
  .gz-forum-cats { flex-wrap: wrap !important; }

  .gz-topic-card {
    grid-template-columns: 24px 1fr !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  .gz-topic-card__stats { display: none !important; }
  .gz-topic-card__title { font-size: .85rem !important; }

  .gz-post { grid-template-columns: 1fr !important; }
  .gz-post__user {
    flex-direction: row !important;
    border-right: none !important;
    border-bottom: 1px solid #1e1e32 !important;
    padding: 10px 14px !important;
    gap: 10px !important;
  }
  .gz-post__avatar { width: 32px !important; height: 32px !important; }
  .gz-post__body { padding: 12px 14px !important; }

  .gz-reply-form { padding: 14px !important; }
  .gz-reply-form textarea { min-height: 100px !important; }
}

/* ============================================================
   COMMENTAIRES
   ============================================================ */
@media (max-width: 600px) {
  .gz-comments-header { flex-direction: column !important; gap: 8px !important; align-items: flex-start !important; }
  .gz-comment__inner { padding: 12px !important; gap: 8px !important; }
  .gz-avatar { width: 32px !important; height: 32px !important; }
  .gz-comment__children { padding-left: 32px !important; }
  .gz-comment-form { padding: 14px !important; }
  .gz-cf-row { grid-template-columns: 1fr !important; }
}

/* ============================================================
   MODAL AUTH
   ============================================================ */
@media (max-width: 480px) {
  .gz-auth-modal { margin: 0 !important; border-radius: 0 !important; min-height: 100svh !important; align-self: flex-end !important; }
  .gz-auth-overlay { align-items: flex-end !important; }
  .gz-auth-panel-inner { padding: 18px 16px !important; }
  .gz-auth-heading { font-size: 1.05rem !important; }
  .gz-reg-steps { gap: 0 !important; }
}

/* ============================================================
   RÉACTIONS + PARTAGE
   ============================================================ */
@media (max-width: 600px) {
  .gz-reactions { padding: 10px 12px !important; gap: 5px !important; flex-wrap: wrap !important; }
  .gz-reaction-btn { padding: 5px 9px !important; font-size: .78rem !important; }
  .gz-share-section { flex-wrap: wrap !important; gap: 5px !important; }
  .gz-share-btn { padding: 6px 11px !important; font-size: .75rem !important; }
  .gz-share-label { width: 100% !important; }
}

/* ============================================================
   NOTIFICATIONS + LIVE SEARCH
   ============================================================ */
@media (max-width: 600px) {
  .gz-notif-dropdown { width: calc(100vw - 20px) !important; right: -60px !important; }
  .gz-search-dropdown { left: -50px !important; right: -10px !important; }
}

/* ============================================================
   FOOTER
   ============================================================ */
@media (max-width: 768px) {
  .gz-footer-top { grid-template-columns: 1fr 1fr !important; gap: 20px !important; padding: 28px 0 16px !important; }
  .gz-footer-bottom { flex-direction: column !important; gap: 5px !important; text-align: center !important; padding: 12px 0 !important; }
}

@media (max-width: 480px) {
  .gz-footer-top { grid-template-columns: 1fr !important; }
  .gz-footer-socials { gap: 5px !important; }
  .gz-social-btn { width: 36px !important; height: 36px !important; font-size: .85rem !important; }
}

/* ============================================================
   BREADCRUMB + PAGINATION
   ============================================================ */
@media (max-width: 600px) {
  .gz-breadcrumb {
    font-size: .72rem !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    scrollbar-width: none !important;
  }
  .gz-breadcrumb::-webkit-scrollbar { display: none; }

  .gz-pagination { gap: 3px !important; }
  .gz-pagination a, .gz-pagination span { min-width: 32px !important; height: 32px !important; font-size: .8rem !important; }
}

/* ============================================================
   HUB COMMUNAUTAIRE
   ============================================================ */
@media (max-width: 768px) {
  .gz-hub-grid { grid-template-columns: 1fr !important; }
  .gz-hub-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .gz-hub-header { flex-direction: column !important; gap: 10px !important; }
  .gz-hub-title { font-size: 1.3rem !important; }
  .gz-hub-reviews { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  .gz-hub-stats { grid-template-columns: 1fr 1fr !important; }
  .gz-hub-nav__link { padding: 11px 12px !important; font-size: .8rem !important; }
}

/* ============================================================
   LEADERBOARD
   ============================================================ */
@media (max-width: 768px) {
  .gz-leaderboard__row {
    grid-template-columns: 26px 36px 1fr !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  .gz-leaderboard__stats { display: none !important; }
  .gz-leaderboard__progress { display: none !important; }
  .gz-levels-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ============================================================
   PROFIL
   ============================================================ */
@media (max-width: 600px) {
  .gz-profile__header { flex-direction: column !important; align-items: center !important; text-align: center !important; }
  .gz-profile__stats { justify-content: center !important; flex-wrap: wrap !important; }
  .gz-profile__badges-grid { grid-template-columns: 1fr 1fr !important; }
  .gz-profile__topic-link span:last-child { display: none !important; }
}

/* ============================================================
   SECTIONS IMAGES/VIDEOS
   ============================================================ */
@media (max-width: 600px) {
  .gz-images-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .gz-videos-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   BACK TO TOP mobile
   ============================================================ */
@media (max-width: 768px) {
  #gz-back-top { bottom: 16px !important; right: 14px !important; width: 36px !important; height: 36px !important; }
}

/* ============================================================
   TOUCH — supprimer les effets hover qui bloquent
   ============================================================ */
@media (hover: none) {
  .gz-game-card:hover { transform: none !important; box-shadow: none !important; }
  .gz-game-card:hover .gz-game-card__thumb img { transform: none !important; }
  .gz-widget-top-item:hover { background: transparent !important; }
  .gz-list-btn:hover { transform: none !important; }
}

/* ============================================================
   HEADER MOBILE — réécriture complète propre
   ============================================================ */

@media (max-width: 768px) {

  /* Header */
  #gz-header {
    height: 56px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    overflow: visible !important; /* crucial pour le dropdown */
  }

  .gz-header-inner {
    gap: 8px !important;
    padding: 0 var(--gz-wrap-px, 14px) !important;
  }

  /* Logo */
  .gz-logo-icon { width: 28px !important; height: 28px !important; font-size: 14px !important; }
  .gz-logo-text { font-size: 1rem !important; }

  /* Nav — cachée sur mobile, affichée en overlay quand .open */
  .gz-nav {
    display: none !important;
    position: fixed !important;
    top: 56px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(9,9,15,.97) !important;
    backdrop-filter: blur(16px) !important;
    z-index: 999 !important;
    overflow-y: auto !important;
    padding: 16px 0 40px !important;
    border-top: 1px solid #1e1e32 !important;
  }

  .gz-nav.open {
    display: block !important;
  }

  .gz-nav ul {
    flex-direction: column !important;
    gap: 2px !important;
    padding: 0 12px !important;
    list-style: none !important;
    margin: 0 !important;
  }

  .gz-nav ul li {
    width: 100% !important;
  }

  .gz-nav ul li a {
    padding: 14px 16px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    display: block !important;
    width: 100% !important;
    color: #b8b8d0 !important;
  }

  .gz-nav ul li a:hover {
    background: rgba(124,58,237,.12) !important;
    color: #fff !important;
  }

  /* Cacher la barre de recherche dans le header sur mobile */
  .gz-header-search { display: none !important; }

  /* Afficher le burger */
  .gz-menu-toggle { display: flex !important; }

  /* User bar compact */
  .gz-header-user-btn {
    padding: 4px !important;
  }

  /* Notif bell */
  .gz-notif-trigger {
    width: 32px !important;
    height: 32px !important;
  }

  /* Dropdown user — bien positionné */
  .gz-header-user-dropdown {
    right: 0 !important;
    left: auto !important;
    top: calc(100% + 8px) !important;
    min-width: 160px !important;
    position: absolute !important;
    z-index: 9998 !important;
  }

  /* Notif dropdown — ne pas déborder à gauche */
  .gz-notif-dropdown {
    right: -4px !important;
    left: auto !important;
    width: min(320px, calc(100vw - 20px)) !important;
  }

}

/* Très petit écran — logo encore plus compact */
@media (max-width: 360px) {
  .gz-logo-text { display: none !important; }
  .gz-logo-icon { width: 30px !important; height: 30px !important; }
}

/* ============================================================
   CONTENU — centrage et padding cohérent
   ============================================================ */

@media (max-width: 768px) {

  /* Le wrap doit toujours avoir le même padding */
  .gz-wrap {
    padding-left: var(--gz-wrap-px, 14px) !important;
    padding-right: var(--gz-wrap-px, 14px) !important;
    max-width: 100% !important;
  }

  /* Sections homepage */
  .gz-home-section > .gz-wrap,
  .gz-section-title { padding-left: 0 !important; padding-right: 0 !important; }

  /* Section title responsive */
  .gz-section-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 14px !important;
    flex-wrap: nowrap !important;
  }

  .gz-section-title h2 {
    font-size: .9rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Éviter les overflow horizontaux globaux */
  body { overflow-x: hidden !important; }
  .gz-slider, .gz-slider__track, .gz-slider__thumbs { max-width: 100vw !important; }

}