/**
 * D.Majin — Compléments responsive mobile (≤768px) uniquement.
 * - Aucune modification de styles.css, jeu/, jeu.html, jeu-styles.css, jeu/index.html.
 * - Ce fichier n’est pas chargé sur jeu.html ni dans l’iframe jeu (fichiers séparés).
 * - Desktop : aucune règle hors @media ; uniquement des ajouts ici.
 */

@media screen and (max-width: 768px) {
  html {
    -webkit-text-size-adjust: 100%;
  }

  main.page-content img,
  main.page-content video,
  main.page-content svg {
    max-width: 100%;
    height: auto;
  }

  main.page-content .page-logo img,
  main.page-content .post-card-image img {
    max-width: 100%;
  }

  main.page-content table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  main.page-content {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }

  .menu-book-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
  }

  .menu-book-toolbar .btn-menu-book {
    width: 100%;
    justify-content: center;
  }

  .menu-book-mini-tools {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .menu-book-stage {
    max-width: 100%;
  }

  .artistes-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .artiste-links-row {
    flex-direction: column;
    align-items: stretch;
  }

  .artiste-links-row .btn-artiste-link {
    width: 100%;
    text-align: center;
  }

  .leaderboard-card {
    max-width: 100%;
  }

  .leaderboard-table {
    font-size: 0.85rem;
  }

  .artefacts-redeem-hero-inner {
    flex-direction: column;
    gap: 1rem;
    max-width: 100%;
  }

  .artefacts-redeem-hero-form input,
  .artefacts-redeem-hero-form button {
    max-width: 100%;
  }

  #artefacts-grid.artefacts-grid {
    max-width: 100%;
  }

  .container-compte {
    max-width: 100%;
  }

  body.page-home .hero-home-row {
    grid-template-columns: 1fr;
  }

  body.page-home .hero-content {
    max-width: 100%;
    padding-left: max(0.5rem, env(safe-area-inset-left));
    padding-right: max(0.5rem, env(safe-area-inset-right));
  }

  .hunter-glitch-overlay {
    padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right))
      max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
  }

  .hunter-glitch-modal {
    width: min(100%, 26rem);
  }

  .hero-intro-layer {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }

  .hero-intro-copy {
    max-width: 100%;
  }

  .site-footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
  }

  .site-footer-address {
    max-width: 100%;
  }

  /* Nav mobile : éviter le "vide" (menu centré verticalement par défaut dans styles.css) */
  .nav-links {
    justify-content: flex-start !important;
    gap: var(--space-md) !important;
    padding-top: max(4rem, env(safe-area-inset-top)) !important;
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    align-items: flex-start !important;
  }

  .nav-links > li {
    width: 100%;
  }

  .nav-links a {
    width: 100%;
  }

  .nav-submenu a {
    width: auto;
  }
}

@media screen and (max-width: 768px) {
  .admin-screen {
    padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right))
      max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
  }

  .admin-login-box {
    margin: 8vh auto;
    padding: 1.25rem;
    max-width: calc(100vw - 2rem);
  }

  .admin-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .admin-tablist {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-tab-btn {
    width: 100%;
    text-align: center;
  }
}