/* ===========================
   PMEShop – Archive / Catalogue
   Version propre (sans doublons)
   =========================== */

:root{
  --pme-max: 1320px;
  --pme-gap: 20px;
  --pme-col-gap: 28px;
  --pme-left-w: 340px;

  --pme-radius: 14px;
  --pme-border: #e9e9ee;
  --pme-soft: #f7f7fa;
  --pme-text: #1a1a1a;
  --pme-muted:#6b6b6b;
  --pme-accent:#d4af37;
  --pme-price:#1e293b;

  --halo-color:#cb9440;
}

/* Conteneur global */
.pmeshop-archive{
  margin: 40px auto;
  max-width: var(--pme-max);
  padding: 0 18px;
  color: var(--pme-text);
}

/* Barre titre + tri */
.pme-hero{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--pme-gap);
  margin-bottom: 16px;
}
.pme-hero h1{
  margin: 0;
  font-size: clamp(20px, 2.6vw, 28px);
  letter-spacing: .2px;
}

.pme-controls{
  display:flex;
  align-items:center;
  gap:10px;
}
.pme-controls label{ font-size: 0; } /* sr-only visuel */
.pme-controls select{
  min-width: 190px;
  border: 1px solid var(--pme-border);
  border-radius: 999px;
  padding: 10px 14px;
  background:#fff;
  outline: none;
}

/* Layout 2 colonnes : filtres + résultats */
.pme-layout{
  display: grid;
  grid-template-columns: var(--pme-left-w) 1fr;
  column-gap: var(--pme-col-gap);
  row-gap: var(--pme-gap);
  align-items: start;
}

@media (max-width: 1100px){
  :root{ --pme-left-w: 300px; }
}
@media (min-width: 1400px){
  :root{ --pme-left-w: 360px; --pme-col-gap: 32px; }
  .pmeshop-archive{ max-width: 1380px; }
}
@media (max-width: 860px){
  .pme-layout{ grid-template-columns: 1fr; }
}

/* Filtres */
.pme-filters{
  display: grid;
  gap: 12px;
  align-content: start;
}

/* Desktop: sticky */
@media (min-width: 861px){
  .pme-filters{ position: sticky; top: 16px; }
}

.pme-filters section{
  background:#fff;
  border: 1px solid var(--pme-border);
  border-radius: var(--pme-radius);
  padding: 12px 14px;
}
.pme-filters h3{
  margin: 0 0 10px;
  font-size: 14px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #444;
}

/* Empêche les césures moches dans les filtres */
.pme-filters, .pme-filters *{
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: manual;
}

.pme-checks{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.pme-checks label{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

/* Filtres prix */
.pme-price{
  display: flex;
  align-items: center;
  gap: 8px;
}
.pme-price input[type="number"]{
  width: 90px;
  border: 1px solid var(--pme-border);
  border-radius: 8px;
  padding: 8px 10px;
  background:#fff;
  color:var(--pme-price);
}
.pme-apply-price{
  border: 1px solid var(--pme-border);
  background: #fff;
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
}
.pme-reset{
  border: 0;
  background: transparent;
  color: var(--pme-muted);
  cursor: pointer;
  padding: 6px 8px;
  text-decoration: underline;
  justify-self: start;
}

/* Résultats */
.pme-results{
  min-width: 0; /* important en grid pour éviter les overflows */
}

/* Grille produits : responsive avec --cols réellement utilisé */
.pme-results .pme-grid{
  --cols: 5;

  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 16px;

  margin: 0;         /* supprime les offsets */
  padding: 0;
  text-align: center;
}

@media (max-width: 1280px){ .pme-results .pme-grid{ --cols: 4; } }
@media (max-width: 1024px){ .pme-results .pme-grid{ --cols: 3; } }
@media (max-width: 760px) { .pme-results .pme-grid{ --cols: 2; } }
@media (max-width: 440px) { .pme-results .pme-grid{ --cols: 1; } }

/* Carte produit */
.pme-card{
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--pme-border);
  border-radius: var(--pme-radius);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);

  transform: translateZ(0);
  transition: transform .15s ease, box-shadow .15s ease;
}
.pme-card:hover{
  transform: translateY(-2px) scale(1.01);
  z-index: 3;
  box-shadow:
    0 18px 40px -12px rgba(0,0,0,.22),
    0 0 38px 12px color-mix(in oklab, var(--halo-color) 28%, transparent);
  outline: none;
}

/* Vignette ratio fixe (recadrage propre) */
.pme-card .thumb{
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--pme-soft);
}
.pme-card .thumb img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Contenu */
.pme-card .content{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  flex: 1;
}
.pme-card h3{
  margin: 0;
  font-size: 15px;
  line-height: 1.35;
  min-height: 2.6em;
}
.pme-card .price{
  font-weight: 800;
  color: var(--pme-price);
}

/* Prix promo (si tu l’utilises) */
.pme-price.pme-price--promo .pme-regular{
  text-decoration: line-through;
  color: #c0392b;
  font-size: 0.75rem;
  opacity: 0.8;
}

/* Bouton */
.pme-card .button{
  margin-top: auto;
  display: block;
  width: 100%;
  text-align: center;
  padding: 10px 14px;
  border: 1px solid var(--pme-border);
  border-radius: 999px;
  text-decoration: none;
  transition: transform .05s ease, background .15s ease, border-color .15s ease;
}
.pme-card .button:hover{
  background: #f5f5f8;
  border-color: var(--pme-accent);
  color: var(--pme-price);
}
.pme-card .button:active{ transform: translateY(1px); }

.pme-card .ph{
  height: 100%;
  background: linear-gradient(180deg,#fafafa,#f1f1f1);
}

/* Pagination */
.pme-pagination{
  display:flex;
  gap:6px;
  margin-top:16px;
  flex-wrap: wrap;
}
.pme-page{
  border:1px solid var(--pme-border);
  background:#fff;
  border-radius:8px;
  padding:6px 10px;
  cursor:pointer;
}
.pme-page.is-active{
  background:#111;
  color:#fff;
  border-color:#111;
}

/* Loader */
.pme-loading{
  margin-top:12px;
  color: var(--pme-muted);
}

/* ===========================
   Mobile: tiroir filtres
   =========================== */

/* Bouton filtres : caché desktop */
.pme-filter-toggle{ display:none; }

@media (max-width: 860px){
  .pmeshop-archive{ padding: 0 12px; }

  .pme-filter-toggle{
    display:inline-flex;
    align-items:center;
    gap:8px;
    border:1px solid var(--pme-border);
    border-radius:999px;
    background:#fff;
    padding:8px 12px;
    cursor:pointer;
    font-size:14px;
  }

  /* Filtres fermés par défaut sur mobile (si tu ajoutes .is-open en JS) */
  #pme-filters.pme-filters{
    display:block;
    max-height:0;
    overflow:hidden;
    transition:max-height .25s ease, margin-bottom .2s ease;
    border:0;
    padding:0;
    margin:0;
  }
  #pme-filters.pme-filters.is-open{
    max-height: 70vh;
    overflow:auto;
    margin-bottom: 10px;
  }

  /* Sections filtres avec respiration */
  .pme-filters section{ margin:10px 0; }

  /* Empêche tout scroll horizontal */
  .pmeshop-archive, .pme-layout, .pme-results{
    max-width: 100%;
    overflow-x: clip;
  }
}

/* Desktop : filtres toujours visibles, ignore is-open */
@media (min-width: 861px){
  #pme-filters.pme-filters{
    max-height:none;
    overflow:visible;
  }
}