/* === EA — slider mobile cartes génération/carrosserie (≤768px, grilles 3+ cartes) === */
@media (max-width: 768px) {
  .ea-l2c-grid.cols-3,
  .ea-l2c-grid.cols-4,
  .ea-l2c-grid.cols-5,
  .ea-l2c-grid.cols-6,
  .ea-l2c-grid.cols-7 {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
    /* full-bleed : le slider touche les bords de l'écran + petit padding pour l'ombre/snap */
    margin-left: -16px;
    margin-right: -16px;
    padding: 4px 16px 12px;
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* IE/Edge legacy */
  }
  .ea-l2c-grid.cols-3::-webkit-scrollbar,
  .ea-l2c-grid.cols-4::-webkit-scrollbar,
  .ea-l2c-grid.cols-5::-webkit-scrollbar,
  .ea-l2c-grid.cols-6::-webkit-scrollbar,
  .ea-l2c-grid.cols-7::-webkit-scrollbar { display: none; } /* Chrome/Safari */

  /* Cartes : ~2,5 visibles → largeur 40% (100/2,5), figées (pas de shrink), snap à gauche. */
  .ea-l2c-grid.cols-3 > .ea-l2c-card,
  .ea-l2c-grid.cols-4 > .ea-l2c-card,
  .ea-l2c-grid.cols-5 > .ea-l2c-card,
  .ea-l2c-grid.cols-6 > .ea-l2c-card,
  .ea-l2c-grid.cols-7 > .ea-l2c-card {
    flex: 0 0 40% !important;
    width: 40% !important;
    min-width: 40% !important;
    max-width: 40% !important;
    scroll-snap-align: start;
    /* compaction : cartes un peu plus petites */
    padding: 10px !important;
    gap: 8px !important;
  }

  /* Réduction du contenu interne (titres/sous-titres/visuel) pour des cartes plus compactes. */
  .ea-l2c-grid.cols-3 > .ea-l2c-card .ea-l2c-card-img,
  .ea-l2c-grid.cols-4 > .ea-l2c-card .ea-l2c-card-img,
  .ea-l2c-grid.cols-5 > .ea-l2c-card .ea-l2c-card-img,
  .ea-l2c-grid.cols-6 > .ea-l2c-card .ea-l2c-card-img,
  .ea-l2c-grid.cols-7 > .ea-l2c-card .ea-l2c-card-img { aspect-ratio: 1 / 1; }

  .ea-l2c-grid[class*="cols-"] > .ea-l2c-card .ea-l2c-card-title { font-size: 13.5px; }
  .ea-l2c-grid[class*="cols-"] > .ea-l2c-card .ea-l2c-card-sub   { font-size: 10.5px; }
  .ea-l2c-grid[class*="cols-"] > .ea-l2c-card .ea-l2c-card-info  { gap: 4px; padding: 0 2px 2px; }
  .ea-l2c-grid[class*="cols-"] > .ea-l2c-card .ea-l2c-badge      { font-size: 10px; padding: 3px 7px; }
  .ea-l2c-grid[class*="cols-"] > .ea-l2c-card .ea-l2c-arrow      { font-size: 14px; }
}