/* =====================================================================================
   LISTES INTERMINABLES SUR TELEPHONE — 27/09/2026
   Audit a 390 px : la concession du garage faisait 30 000 px de haut (94 cartes de 300 px
   empilees), le hangar 7 800, le port 10 300. Sur un pouce, c'est une page qu'on ne
   parcourt pas : on abandonne avant d'avoir vu la moitie du catalogue.

   Ce fichier ne touche QUE le telephone (≤ 640 px) : au bureau, les grandes cartes photo
   restent telles quelles, car elles y tiennent a deux par ligne et font envie.

   Les cartes des vehicules portent des styles en ligne (ceux du bureau) : d'ou les
   !important ci-dessous, qui ne visent que la mise en page. JAMAIS sur `display` de la
   carte elle-meme : les filtres du catalogue (catalogue-filtres.js) cachent une carte en
   posant display:none en ligne, et un display:grid !important la ferait reapparaitre.
   ===================================================================================== */
@media (max-width: 640px) {
  /* La carte couchee, sur le modele des iles (iles.js, .il-carte.cat) : photo de 116 px
     a gauche, texte a droite. */
  .ml-veh {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    height: auto !important;
    min-height: 132px;
    border-radius: 14px !important;
    background: #101a38;
  }
  .grid.g2:has(> .ml-veh) { gap: 10px !important; }

  /* La photo ne couvre plus toute la carte : elle reste dans sa colonne. */
  .ml-veh-img {
    position: relative !important;
    inset: auto !important;
    min-height: 100%;
    overflow: hidden;
  }

  /* Le panneau n'est plus pose sur la photo : plus besoin du degrade ni de l'ombre du
     texte, qui baveraient sur un fond uni. */
  .ml-veh-panel {
    position: static !important;
    background: none !important;
    text-shadow: none !important;
    padding: 9px 10px 10px !important;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  .ml-veh-tete {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 2px !important;
  }
  .ml-veh-nom {
    font-size: 15px !important;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ml-veh-sous { font-size: 11.5px !important; }
  .ml-veh-prix { text-align: left !important; font-size: 14px !important; }
  .ml-veh-prix b { font-size: 14px !important; }

  /* La description est un clin d'oeil, pas une fiche : deux lignes suffisent. */
  .ml-veh-desc {
    font-size: 12px !important;
    line-height: 1.35 !important;
    margin: 4px 0 3px !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ml-veh-spec {
    font-size: 11px !important;
    line-height: 1.35;
    opacity: .85 !important;
  }
  .ml-veh-lien { margin-top: auto !important; padding-top: 5px; }

  /* Le bouton tombe toujours en bas de la carte, quelle que soit la longueur du texte. */
  .ml-veh-btn {
    margin-top: auto !important;
    padding: 7px 10px !important;
    min-height: 40px !important;
    font-size: 13px !important;
  }
  .ml-veh-panel > .ml-veh-spec:last-of-type { margin-bottom: 7px; }
}

/* =====================================================================================
   « VOIR PLUS » des grands classements (pantheon des joueurs, buteurs de tous les temps,
   reputation des clubs) — 27/09/2026. Valable sur tous les ecrans : la logique est dans
   index.html (mlPaginer / mlVoirPlus), ceci n'est que l'habit du bouton.
   ===================================================================================== */
.ml-plus-zone {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}
.ml-plus {
  min-width: 180px;
  min-height: 44px;           /* une cible qu'un pouce attrape du premier coup */
}