/* Frontend responsive mix - scroll desktop, grid mobile
   Remplace ou ajoute à la fin de ton frontend.css */

/* Base layout container */
.pml-form, .pml-books, #pml-vote-form {
  box-sizing: border-box;
  max-width: 1100px;
  margin: 18px auto;
  padding: 0 12px; /* un petit padding côté pour mobile */
}

/* Desktop (par défaut) : horizontal scroll */
.pml-books {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 4px;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
}

/* Carte */
.pml-item {
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #eee;
  position: relative;
  min-width: 0; /* important for flex children */
  box-sizing: border-box;
}

/* Cover */
.pml-item .pml-cover img,
.pml-cover-placeholder {
  width: 160px;
  height: 240px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

/* Rank / handle / titles (kept as-is) */
.pml-handle { position:absolute; left:8px; top:8px; width:28px; height:28px; display:flex; align-items:center; justify-content:center; cursor:grab; opacity:0.9; }
.pml-rank { position:absolute; right:8px; top:8px; min-width:34px; height:34px; border-radius:17px; background:#0073aa; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }

/* Form fields and messages unchanged */
.pml-fields { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:12px; margin-top:14px; }
.pml-fields input{ padding:10px; border-radius:6px; border:1px solid #ddd; width:100%; box-sizing:border-box; }
.pml-submit{ margin-top:12px; padding:12px 18px; background:#0073aa; color:#fff; border:none; border-radius:8px; cursor:pointer; }
.pml-message{ margin-top:12px; padding:10px; border-radius:8px; display:none; }
.pml-message.success{ background:#e6f9ef; color:#06643a; }
.pml-message.error{ background:#fdecea; color:#7a1d19; }

/* =========================
   MOBILE / SMALL SCREENS
   Grid + centering, no horizontal scroll
   ========================= */
@media (max-width: 768px) {
  /* Force grid layout on mobile - use !important to override other rules */
  .pml-books {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    gap: 14px !important;
    overflow-x: visible !important;
    padding: 10px 6px !important;
    justify-items: center !important;   /* centre chaque carte */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Ensure cards don't keep flex sizing */
  .pml-item {
    flex: none !important;
    min-width: 0 !important;    /* permet l'écrasement si nécessaire */
    width: 100% !important;
    max-width: 160px !important; /* limite la largeur pour éviter l'étirement */
  }

  .pml-item .pml-cover img,
  .pml-cover-placeholder {
    width: 120px !important;
    height: 180px !important;
  }

  /* Optionnel : réduire padding et tailles du texte sur très petits écrans */
  @media (max-width: 420px) {
    .pml-item { max-width: 140px !important; padding:10px; }
    .pml-item .pml-cover img, .pml-cover-placeholder { width:110px !important; height:165px !important; }
  }
}

/* Safety override: if some JS or inline style forces overflow-x, make sure container can grow vertically */
.pml-books[style] { overflow-x: visible !important; }

/* If still a horizontal scrollbar appears, try this (last resort - overrides everything) */
/* .pml-books { display:grid !important; grid-auto-flow:row !important; } */