/* ==========================================================================
   RESPONSIVE
   Toutes les media queries, du plus grand au plus petit
   ========================================================================== */

/* ── 1024px — tablette paysage ── */
@media (max-width: 1024px) {
  .gpx-featured { grid-template-columns: 1fr; }
  .gpx-featured .gpx-map-preview { height: 220px; border-radius: 12px; }
}

/* ── 900px — tablette portrait ── */
@media (max-width: 900px) {
  .hero-content { grid-template-columns: 1fr; }

  .hero-card {
    display: block !important;
    margin-top: 25px;
    width: 100%;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }

  .infos-grid        { grid-template-columns: 1fr; }
  .spirit-block      { grid-template-columns: 1fr; padding: 32px 24px; }
  .gpx-grid          { grid-template-columns: 1fr 1fr; }
  .actu-grid         { grid-template-columns: 1fr 1fr; }
  .footer-top        { grid-template-columns: 1fr 1fr; }
  .content-layout,
  .account-grid      { grid-template-columns: 1fr; }

  /* Navigation desktop masquée — le kebab drawer prend le relais sur mobile.
     Le hamburger (.menu-toggle) a été supprimé (v3.9.6) : navigation unifiée sur #kebab-panel. */
  .main-nav { display: none; }
}

/* ── 768px ── */
@media (max-width: 768px) {
  .hero-info-item { margin-bottom: 20px; }
  .hero-info-sep  { display: none; }
}

/* ── 600px — mobile ── */
@media (max-width: 600px) {
  /* Anti-overflow universel mobile (iOS Safari) */
  main, .site-wrapper { overflow-x: clip; max-width: 100vw; }
  .gpx-grid,
  .actu-grid         { grid-template-columns: 1fr; }
  .hero h1           { font-size: 46px; }
  .footer-top        { grid-template-columns: 1fr; }
  .planning-locked   { padding: 36px 22px; }

  /* ── Compte membre ── */

  /* Réduire le padding du container de 28px à 10px */
  .account-page .container { padding-inline: 10px; }

  /* Nav compte membre : scroll horizontal — évite la grille cassée avec items impairs */
  .account-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-radius: 12px;
    gap: 0;
  }
  .account-nav::-webkit-scrollbar { display: none; }
  .account-nav a {
    flex: 0 0 auto;
    padding: 11px 14px;
    font-size: 12px;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    border-right: 1px solid rgba(255,255,255,.1);
  }
  .account-nav a:last-child { border-right: none; }

  /* Contenu : padding réduit */
  .account-content { padding: 16px !important; }

  /* ── Mes résultats : stopper le débordement ── */
  .account-page     { overflow-x: hidden; }
  .account-content  { overflow-x: hidden; }

  /* Tout ce qui est généré par le shortcode jdm_ann_import_fields */
  .account-content * {
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ── 480px — mobile étroit (iPhone SE, Galaxy A) ── */
@media (max-width: 480px) {
  /* Kebab btn : agrandir à 44×44px (minimum cible tactile recommandé) */
  .kebab-btn {
    width: 44px;
    height: 44px;
  }

  /* Masquer le texte du prénom dans le header pour éviter la saturation */
  .user-menu-toggle .uname {
    display: none;
  }

  /* Resserrer le padding interne du toggle utilisateur */
  .user-menu-toggle {
    padding: 6px 8px 6px 6px;
    gap: 6px;
  }

  /* Btn "Rejoindre le club" : texte court sur très petit écran */
  .btn-join-text {
    display: none;
  }
}

/* ── Hover : désactiver les transforms sur vrais appareils tactiles ──
   Évite les états "collés" après un tap sur iOS/Android              */
@media (hover: none) {
  /* Désactiver tous les effets transform/box-shadow au hover sur appareils tactiles
     Évite les états "collés" après un tap sur iOS/Android */
  .info-card:hover,
  .jdm-social-icon:hover,
  .btn-join:hover,
  .gpx-card:hover,
  .sortie-card:hover,
  .fp-sortie-link:hover,
  .fp-lieu-row:hover,
  .page-404-sortie-row:hover,
  .jdm-db-sc:hover,
  .jdm-db-insc-row:hover,
  .jdm-db-step--todo:hover,
  .jdm-db-actu-row:hover,
  .kebab-btn:hover,
  .user-menu-toggle:hover,
  .btn-join:hover {
    transform: none;
    box-shadow: none;
  }
}

/* ── Boutons-actions dans la galerie : décalage en mobile portrait ── */
@media (max-width: 767px) and (orientation: portrait) {
  :root {
    --gal-btn-top: calc(var(--header-h, 70px) + 52px + 12px);
  }
}