/* ========================================================================== 
   PLANET MODS — RESPONSIVE V3
   --------------------------------------------------------------------------
   IMPORTANT : aucune règle desktop ici.
   Cette feuille complète le CSS existant uniquement sur tablette/mobile.
   Le rendu >= 1025px reste intégralement celui du site d'origine.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TABLETTE / PETITS ÉCRANS DESKTOP (<= 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body img,
  body video,
  body canvas,
  body iframe,
  body svg {
    max-width: 100%;
  }

  body #content,
  body .container-central {
    min-width: 0;
    max-width: 100%;
  }

  body .container-central {
    width: 94%;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Empêche les contenus flex/grid de forcer la largeur de la page. */
  body .row > *,
  body [class*="col-"],
  body .studio-content,
  body .fiche-jeu-droite,
  body .pm-profile-column,
  body .pm-team-profile-column,
  body .pm-article-body,
  body .pm-news-card,
  body .pm-notification-card {
    min-width: 0;
  }

  /* Les tableaux restent utilisables sans agrandir toute la page. */
  body .table-responsive,
  body .studio-table,
  body .pm-table-scroll,
  body .admin-panel {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Accueil : ne jamais masquer articles / packs / héros. */
  body .home-max,
  body .pm-home-articles-section,
  body .pm-home-packs-section {
    max-width: 100%;
  }

  body .hero-featured,
  body .hero-featured.hero-compact {
    max-width: 100%;
  }

  /* Fiche jeu : les contrôles peuvent revenir à la ligne proprement. */
  body .fiche-jeu-droite .d-flex,
  body #categoryFilters,
  body .pm-secondary-tab-controls {
    min-width: 0;
  }

  /* Creator Studio : évite qu'une carte ou un filtre impose sa largeur. */
  body .creator-studio,
  body .studio-content,
  body .cs-grid,
  body .studio-menu {
    min-width: 0;
  }

  /* Articles : contenu riche sans débordement. */
  body .pm-article-body img,
  body .pm-article-body video,
  body .pm-article-body iframe,
  body .pm-article-body table,
  body .pm-article-body pre {
    max-width: 100%;
  }

  body .pm-article-body table,
  body .pm-article-body pre {
    overflow-x: auto;
  }
}

/* --------------------------------------------------------------------------
   MOBILE / TABLETTE PORTRAIT (<= 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /*
   * style.css contient d'anciennes règles globales mobiles sur .container et
   * nav ul. On les neutralise uniquement lorsque nécessaire pour ne pas
   * casser les composants récents (tabs, pagination, footer...).
   */
  body .container-central {
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }

  body #content {
    width: 100%;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
  }

  /* Fil d'Ariane : plus d'absolu/nowrap sur mobile. */
  body .container_ariane {
    position: relative;
    left: auto;
    width: 100%;
    max-width: 100%;
    margin: 8px auto 0;
    padding: 4px 12px;
    transform: none;
    white-space: normal;
    text-align: left;
    font-size: .78rem;
  }

  body .container_ariane .breadcrumb {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 2px 0;
    margin: 0;
  }

  /* Carrousel du header : le JS 7-jeux reste maître de la largeur. */
  body .carousel-wrapper.pm-games-carousel {
    top: auto;
  }

  body .pm-games-carousel .carousel-arrow {
    display: flex !important;
  }

  /* Les anciens nav ul mobiles ne doivent pas transformer les onglets en menu. */
  body .nav.nav-pills,
  body .nav.nav-tabs,
  body .pagination,
  body .pm-all-mods-pagination,
  body .pm-profile-mod-pagination,
  body .pm-team-profile-pagination,
  body .pm-news-pagination {
    flex-direction: row;
    align-items: center;
  }

  /* ======================== ACCUEIL ======================== */
  body .home-max,
  body .pm-home-articles-section,
  body .pm-home-packs-section {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  body .hero-featured.hero-compact {
    min-height: 220px;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  body .hero-featured .hero-content {
    max-width: calc(100% - 24px);
    padding: 16px;
  }

  body .dlc-swiper .swiper-slide > .hero-featured {
    width: 100%;
    flex-basis: 100%;
  }

  body .pm-home-articles-grid {
    grid-template-columns: 1fr;
  }

  body .pm-home-articles-grid .pm-home-article-card {
    width: 100%;
    max-width: none;
    grid-column: auto;
  }

  body .pm-home-pack-modstyle {
    width: 100%;
    max-width: 335px;
  }

  /* ======================== FICHE JEU ======================== */
  body .fiche-jeu-wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    width: 100%;
  }

  body .fiche-jeu-gauche {
    flex: 0 0 auto !important;
    width: 100%;
    margin: 0 auto 14px;
    text-align: center;
  }

  body .fiche-jeu-gauche .jaquette-fixe {
    width: min(200px, 58vw);
    height: auto;
    aspect-ratio: 200 / 286;
  }

  body .fiche-jeu-droite {
    width: 100%;
    min-width: 0;
    margin-top: 0;
    padding: 10px;
  }

  body .fiche-jeu-droite .nav-pills.fiche-tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 4px;
    margin-top: 0;
    padding-bottom: 3px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  body .fiche-jeu-droite .nav-pills.fiche-tabs::-webkit-scrollbar {
    display: none;
  }

  body .fiche-jeu-droite .nav-pills.fiche-tabs .nav-item {
    flex: 0 0 auto;
    margin: 0;
  }

  body .fiche-jeu-droite .nav-pills.fiche-tabs .nav-link {
    white-space: nowrap;
  }

  body #categoryFilters,
  body #recherche .pm-mods-toolbar,
  body #dlc .pm-secondary-tab-controls,
  body #packs-mods .pm-secondary-tab-controls {
    width: 100%;
  }

  body #categoryFilters .custom-select,
  body #categoryFilters select,
  body #resetFiltersBtn {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  body .mods-masonry {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding-left: 0;
    padding-right: 0;
  }

  body .mods-masonry .masonry-item {
    width: min(100%, 335px);
    margin-inline: auto;
  }

  /* ======================== TEAMS / PROFILS ======================== */
  body .pm-team-profile-shell,
  body .pm-profile-shell {
    border-radius: 16px;
  }

  body .pm-team-profile-body,
  body .pm-profile-body {
    min-width: 0;
  }

  body .pm-team-profile-actions,
  body .pm-profile-actions {
    max-width: 100%;
  }

  /* ======================== CREATOR STUDIO ======================== */
  body .creator-studio {
    width: 100%;
    max-width: 100%;
  }

  body .studio-sidebar {
    width: 100%;
    min-width: 0;
  }

  body .studio-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body .studio-menu .studio-btn {
    min-width: 0;
  }

  body .studio-menu .studio-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body .studio-content {
    width: 100%;
    max-width: 100%;
    padding: 12px !important;
  }

  body .cs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body .studio-content form .row > [class*="col-"],
  body .studio-content .row > [class*="col-"] {
    min-width: 0;
  }

  /* ======================== ARTICLES ======================== */
  body .pm-articles-shell,
  body .pm-news-page {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  body .pm-article-hero,
  body .pm-news-heading,
  body .pm-news-card {
    border-radius: 14px;
  }

  body .pm-article-cover {
    max-height: none;
    aspect-ratio: 16 / 9;
  }

  body .pm-article-head {
    padding: 22px 16px 18px;
  }

  body .pm-article-head h1 {
    font-size: clamp(1.65rem, 8vw, 2.45rem);
  }

  body .pm-article-body {
    width: 100%;
    padding: 28px 16px 38px;
    font-size: .98rem;
    line-height: 1.72;
  }

  body .pm-article-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* ======================== NOTIFICATIONS ======================== */
  body .pm-notifications-page,
  body .pm-notifications-shell {
    width: 100%;
    max-width: 100%;
  }

  body .pm-notification-card {
    min-width: 0;
  }

  body .pm-notification-card-title,
  body .pm-notification-card-message {
    overflow-wrap: anywhere;
  }

  /* ======================== LISTE /MODS ======================== */
  body .pm-all-mods {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  body .pm-all-mods-filter {
    width: 100%;
  }

  body .pm-all-mods-per-page {
    max-width: 100%;
    flex-wrap: wrap;
  }

  body .pm-all-mods-grid {
    gap: 16px;
  }

  /* ======================== FORMULAIRES / MODALES ======================== */
  body .custom-modal .modal-content,
  body .modal-dialog,
  body .pm-modal,
  body .pm-dialog {
    max-width: calc(100vw - 24px);
  }

  body input,
  body select,
  body textarea,
  body button {
    min-width: 0;
  }

  /* Publicité : jamais plus large que l'écran. */
  body #ads-footer-wrap,
  body #ads-footer-wrap .adsbygoogle {
    max-width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   PETITS MOBILES (<= 576px)
   -------------------------------------------------------------------------- */
@media (max-width: 576px) {
  body .container-central {
    padding-left: 9px;
    padding-right: 9px;
  }

  body .overlay-text {
    max-width: calc(100% - 20px);
    overflow: hidden;
    font-size: clamp(1.25rem, 8vw, 2rem);
    text-overflow: clip;
  }

  /* Accueil */
  body .hero-featured.hero-compact {
    min-height: 200px;
  }

  body .hero-featured.hero-compact .hero-content h1 {
    font-size: clamp(1.35rem, 8vw, 2rem);
  }

  body .mods-grid > .tilt {
    flex: 0 1 min(100%, 350px);
    width: min(100%, 350px);
  }

  body .pm-home-article-card {
    min-height: 200px;
  }

  /* Creator Studio */
  body .studio-menu {
    grid-template-columns: 1fr;
  }

  body .cs-grid {
    grid-template-columns: 1fr;
  }

  body .cs-grid .mod-card,
  body .studio-content .mod-card {
    width: min(100%, 360px);
    max-width: 100%;
    margin-inline: auto;
  }

  /* Fiche jeu / liste mods : une carte par ligne avec largeur maîtrisée. */
  body .basic-card,
  body .dlc-card,
  body .top-card,
  body .mod-card,
  body .pm-all-mods .mod-card {
    flex-basis: min(100%, 335px);
    max-width: min(100%, 335px);
  }

  /* Profil/team : boutons pleine largeur quand l'espace devient trop court. */
  body .pm-profile-actions,
  body .pm-team-profile-actions {
    width: 100%;
  }

  body .pm-profile-actions > *,
  body .pm-team-profile-actions > *,
  body .pm-profile-button,
  body .pm-team-profile-button {
    max-width: 100%;
  }

  /* Articles */
  body .pm-article-meta {
    gap: 8px;
    font-size: .8rem;
  }

  body .pm-article-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Notifications */
  body .pm-notification-card-actions,
  body .pm-notification-actions {
    width: 100%;
  }

  /* Pagination compacte sans débordement. */
  body .pagination,
  body .pm-all-mods-pagination,
  body .pm-profile-mod-pagination,
  body .pm-team-profile-pagination,
  body .pm-news-pagination {
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
  }
}

/* --------------------------------------------------------------------------
   ACCESSIBILITÉ TACTILE / MOUVEMENTS
   -------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
  body a,
  body button,
  body input,
  body select,
  body summary {
    touch-action: manipulation;
  }
}

@media (prefers-reduced-motion: reduce) {
  body *,
  body *::before,
  body *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}