/*
 * mobile-global-polish.css
 * Étend au reste du site les caractéristiques responsive validées sur l'accueil :
 *   - rythme vertical resserré (padding de section niveau mobile, pas desktop)
 *   - titres plafonnés (plus de 40-45px coupés)
 *   - grilles de cartes en 2 colonnes (au lieu d'1 pleine largeur)
 * Chargé EN DERNIER. 100% additif, @media max-width:768px, desktop intact.
 * Classes mutualisées (.lt-section / .lt-section-title) → corrige plusieurs
 * pages de contenu d'un coup ; blocs ciblés pour ccm / vendre / événements / carte.
 */
@media (max-width: 768px) {

  /* ── Sections de contenu génériques (communauté, à-propos, faq, frais,
        guides, cgv, événements…) : padding vertical mobile resserré ── */
  .lt-section,
  .ccm-section,
  .vendre-gl-section,
  .evenements-news-section {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  /* ── Titres de section / page plafonnés (étaient 39-45px) ── */
  .lt-section-title,
  .ccm-hero h1,
  .ccm-section h2,
  .carte-page .carte-page__h1 {
    font-size: clamp(1.5rem, 6.2vw, 2.1rem) !important;
    line-height: 1.14 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }

  /* ── Comment ça marche : cartes "types" en 2 colonnes (images 87%vw → ~43%).
        Sélecteur (0,3,0) pour battre le catch-all "[class*=grid]→1fr !important". ── */
  .ccm-type-grid:not(.lt26-piece):not(.lt26-hero__shelf-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.7rem !important;
  }

  /* ── Événements : liste d'actualités en 2 colonnes au lieu d'1 ── */
  .news-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.8rem !important;
  }

  /* ── Vendre : héros un peu moins haut (garde le dégagement du header) ── */
  .vendre-gl-hero {
    padding-bottom: 2rem !important;
  }
}

/* ── Acheter : grille d'annonces responsive proportionnelle ───────────────
   Le catch-all "[class*=grid]→1fr !important" forçait #statuesGrid en 1 seule
   colonne sur mobile. Règle alignée sur la GRILLE CANONIQUE (bundle-acheter.css) :
   auto-fill fluide, 2 colonnes garanties dès 320px — l'ID ne sert qu'à battre
   le catch-all en spécificité. Jamais de nombre de colonnes en dur. */
@media (max-width: 768px) {
  body.lt-acheter-gl #statuesGrid.statues-grid-acheter {
    grid-template-columns: repeat(auto-fill, minmax(min(160px, 46%), 1fr)) !important;
    gap: 0.6rem !important;
  }
}

/* ── Acheter : barre de recherche — input + bouton "Rechercher" empilés dans
   le flux (le bouton débordait sous la barre et chevauchait les CTA
   "Explorer les pièces" / "Déposer une annonce"). ── */
@media (max-width: 768px) {
  body.lt-acheter-gl .ae-search {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    gap: 0.5rem !important;
  }
  body.lt-acheter-gl .ae-search-submit {
    width: 100% !important;
  }
  /* Filet de séparation avec le bloc de CTA qui suit. */
  body.lt-acheter-gl .ae-hero .lt-actions,
  body.lt-acheter-gl .lt-actions--center {
    margin-top: 0.85rem !important;
  }

  /* Pills de tri : tout afficher (retour à la ligne) au lieu d'un scroll
     horizontal qui coupait "Prix croissant". */
  body.lt-acheter-gl .ae-sort {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
  }
}

/* Très petits écrans : 1 colonne reste plus lisible que 2 étriquées. */
@media (max-width: 360px) {
  .ccm-type-grid,
  .news-cards {
    grid-template-columns: 1fr !important;
  }
}

/* ── Favoris : grille produit canonique — 2 colonnes fluides dès 320px.
   La base (260px min) + bundle-theme (1fr !important) donnaient des cartes
   pleine largeur sur mobile (images géantes). Exclue du catch-all
   "[class*=grid]→1fr" comme les autres grilles produit. ── */
@media (max-width: 768px) {
  .favoris-grid,
  .favoris-page-wrap .favoris-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(160px, 46%), 1fr)) !important;
    gap: 10px !important;
  }
}