/*
 * Archive Produits — Styles thème enfant Hello Elementor
 * Couleur principale : #073d40
 * Style : Corporate / Professionnel — fond clair, texte sombre
 */

/* ─── Palette & Variables ──────────────────────────────────────────────── */
:root {
  --ap-primary:        #073d40;
  --ap-primary-hover:  #0a5259;
  --ap-primary-light:  #e8f2f2;
  --ap-primary-mid:    #2a7a7e;
  --ap-white:          #ffffff;
  --ap-bg:             #f5f7f7;
  --ap-bg-2:           #eef2f2;
  --ap-surface:        #ffffff;
  --ap-border:         #dde5e5;
  --ap-border-light:   #ecf0f0;
  --ap-text:           #0f1f20;
  --ap-text-secondary: #3d5557;
  --ap-muted:          #7a9496;
  --ap-focus:          rgba(7,61,64,.2);
  --ap-font-body:      var(--e-global-typography-text-font-family), Sans-serif;
  --ap-font-head:      var( --e-global-typography-primary-font-family ), Sans-serif;
  --ap-container:      1240px;
  --ap-gap:            15px;
  --ap-radius:         10px;
  --ap-radius-sm:      6px;
  --ap-shadow-sm:      0 1px 4px rgba(7,61,64,.06), 0 1px 2px rgba(7,61,64,.04);
  --ap-shadow:         0 4px 16px rgba(7,61,64,.09);
  --ap-shadow-hover:   0 12px 32px rgba(7,61,64,.14), 0 4px 8px rgba(7,61,64,.08);
  --ap-trans:          .2s ease;
  --ap-trans-slow:     .35s ease;

  /* Synchronise le plugin produits-filter */
  --pf-primary:        #073d40;
  --pf-primary-light:  #e8f2f2;
  --pf-primary-dark:   #051f21;
}

/* ─── Reset local ──────────────────────────────────────────────────────── */
.archive-produits *, .archive-produits *::before, .archive-produits *::after {
  box-sizing: border-box;
}

/* ─── Page ─────────────────────────────────────────────────────────────── */
.archive-produits {
	width:100%;
	padding:0 15px;
}

/* ─── Hero ─────────────────────────────────────────────────────────────── */
.archive-produits__hero {
  background: var( --e-global-color-secondary );
  padding: 56px 15px 44px;
  position: relative;
  overflow: hidden;
}
.archive-produits__hero::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  pointer-events: none;
}
.archive-produits__hero::after {
  content: '';
  position: absolute;
  bottom: -80px; right: 120px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  pointer-events: none;
}
.archive-produits__hero-inner {
  max-width: var(--ap-container);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Breadcrumb */
.ap-breadcrumb {
  display: flex;
  flex-wrap: wrap;	
  align-items: center;
  gap: 0.4rem;
  font-size: 11px;
  color: rgba(255,255,255,.5);
  margin-bottom: 16px;
}
.ap-breadcrumb a {
  color: rgba(255,255,255,.65);
  text-decoration: none;
  transition: color var(--ap-trans);
}
.ap-breadcrumb a:hover { color: #fff; }
.ap-breadcrumb span[aria-hidden] { opacity: .4; }

/* Titre */
.archive-produits__title {
  font-family: var(--ap-font-head);
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  font-weight: 700;
  margin: 0 0 14px;
  line-height: 1.15;
  letter-spacing: -.02em;
}
.archive-produits__title::after {
  content: '';
  display: block;
  width: 48px; height: 3px;
  background: var( --e-global-color-primary );
  border-radius: 2px;
  margin-top: 14px;
}

/* Description */
.archive-produits__desc {
  font-size: .975rem;
  color: rgba(255,255,255,.68);
  margin: 0;
  max-width: 520px;
  line-height: 1.65;
}

/* ─── Container ────────────────────────────────────────────────────────── */
.archive-produits__container {
  max-width: var(--ap-container);
  margin: 0 auto;
  padding: 40px 0px 72px;
}

/* ─── Overrides plugin pf-app ──────────────────────────────────────────── */
#archive-produits .pf-sidebar { width: 248px; }

#archive-produits .pf-check-label:hover { color: var(--ap-primary); }
#archive-produits .pf-check-input:checked + .pf-check-box {
  background: var(--ap-primary);
  border-color: var(--ap-primary);
}
#archive-produits .pf-search-input:focus {
  box-shadow: 0 0 0 1px var(--ap-focus);
  outline:none;	
}
.pf-group.pf-group--search
 {
    margin-bottom: 1.5rem;
}
#archive-produits .pf-btn--reset {
  margin:1.5rem 0;	
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--ap-primary);	
}
#archive-produits .pf-btn--reset:hover {
  background: var(--ap-primary);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(7, 61, 64, .25);	
  color: #fff;
}

/* Toolbar */
#archive-produits .pf-results__toolbar {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ap-border-light);
  margin-bottom: 24px;
}
#archive-produits .pf-count {
  font-size: .8rem;
  color: var(--ap-muted);
}
#archive-produits .pf-sort__select {
  border-color: var(--ap-border);
  border-radius: var(--ap-radius-sm);
  font-size: .85rem;
  color: var(--ap-text);
}
#archive-produits .pf-sort__select:focus {
  border-color: var(--ap-primary);
  outline: none;
  box-shadow: 0 0 0 3px var(--ap-focus);
}

/* Tags actifs */
#archive-produits .pf-tag {
  background: var(--ap-primary-light);
  color: var(--ap-primary);
  border: 1px solid var(--ap-border);
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .04em;
}
button.pf-tag__remove {
    padding: 0;
    width: 24px;
    height: 24px;
    border-radius: 20px;
}
/* Pagination */
#archive-produits .pf-pagination .page-numbers {
  border-color: var(--ap-border);
  color: var(--ap-text-secondary);
  font-size: .85rem;
  border-radius: var(--ap-radius-sm);
}
#archive-produits .pf-pagination .page-numbers:hover {
  border-color: var(--ap-primary);
  color: var(--ap-primary);
}
#archive-produits .pf-pagination .page-numbers.current {
  background: var(--ap-primary);
  border-color: var(--ap-primary);
  color: #fff;
}

/* Load more */
#archive-produits .pf-btn--load-more {
  background: var(--ap-primary);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  border-radius: var(--ap-radius-sm);
  padding: 13px 36px;
}
#archive-produits .pf-btn--load-more:hover , #archive-produits .pf-btn--load-more:focus { 
	background: var(--ap-primary-hover);
	color:#fff;
}

#archive-produits .pf-grid { gap: var(--ap-gap); }
#archive-produits .pf-spinner {
  border-color: var(--ap-border);
  border-top-color: var(--ap-primary);
}


/* Boutons / swatches */
#archive-produits .pf-btn--filter:hover,
#archive-produits .pf-btn--filter.is-active {
  background: var(--ap-primary);
  border-color: var(--ap-primary);
  color: #fff;
}
#archive-produits .pf-swatch.is-active { outline-color: var(--ap-primary); }

/* Select dropdown */
#archive-produits .pf-select:focus {
  border-color: var(--ap-primary);
  box-shadow: 0 0 0 3px var(--ap-focus);
}

/* ─── Carte Produit ────────────────────────────────────────────────────── */
.prod-card {
  background: var(--ap-surface);
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: var(--ap-shadow-sm);
  transition: box-shadow var(--ap-trans-slow), transform var(--ap-trans), border-color var(--ap-trans);
  font-family: var(--ap-font-body);
}
.prod-card:hover {
  box-shadow: var(--ap-shadow-hover);
  transform: translateY(-4px);
  border-color: transparent;
}

/* Media */
.prod-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--ap-bg-2);
  aspect-ratio: 4 / 3;
  flex-shrink: 0;
  text-decoration: none;
}
.prod-card__img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .55s cubic-bezier(.25,.46,.45,.94);
}
.prod-card:hover .prod-card__img { transform: scale(1.06); }

.prod-card__img-placeholder {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  color: var(--ap-border);
}

/* Overlay gradient hover */
.prod-card__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 55%, rgba(7,61,64,.18) 100%);
  opacity: 0;
  transition: opacity var(--ap-trans-slow);
  pointer-events: none;
}
.prod-card:hover .prod-card__media::after { opacity: 1; }

/* Badge */
.prod-card__badge {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--ap-primary);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: 4px 10px;
  border-radius: 4px;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(7,61,64,.28);
}

/* Body */
.prod-card__body {
  padding: 20px 22px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Tags */
.prod-card__tags { display: flex; flex-wrap: wrap; gap: 5px; }
.prod-card__tag {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ap-primary-mid);
  background: var(--ap-primary-light);
  padding: 3px 8px;
  border-radius: var(--ap-radius-sm);
  text-decoration: none;
  transition: background var(--ap-trans), color var(--ap-trans);
}
.prod-card__tag:hover { background: var(--ap-primary); color: #fff; }

/* Titre */
.prod-card__title {
  font-family: var(--ap-font-head);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ap-text);
  margin: 0;
  line-height: 1.35;
  letter-spacing: -.01em;
}
.prod-card__title a { color: inherit; text-decoration: none; transition: color var(--ap-trans); }
.prod-card__title a:hover,
.prod-card:hover .prod-card__title a { color: var(--ap-primary); }

/* Extrait */
.prod-card__excerpt {
  font-size: .845rem;
  color: var(--ap-text-secondary);
  line-height: 1.6;
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Footer */
.prod-card__footer {
  padding: 14px 22px 18px;
  border-top: 1px solid var(--ap-border-light);
  margin-top: auto;
}
.prod-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ap-primary);
  text-decoration: none;
  transition: gap var(--ap-trans), color var(--ap-trans);
  position: relative;
}
.prod-card__cta::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1.5px;
  background: var(--ap-primary);
  transition: width var(--ap-trans);
}
.prod-card__cta:hover::after,
.prod-card:hover .prod-card__cta::after { width: 100%; }
.prod-card__cta:hover { gap: 11px; }
.prod-card__cta svg { transition: transform var(--ap-trans); }
.prod-card__cta:hover svg { transform: translateX(3px); }

/* ─── Fallback sans plugin ─────────────────────────────────────────────── */
.archive-produits__grid--fallback {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ap-gap);
}
.archive-produits__pagination { margin-top: 48px; text-align: center; }
.archive-produits__empty { text-align: center; color: var(--ap-muted); padding: 80px 0; }

/* ─── Focus visible ────────────────────────────────────────────────────── */
.prod-card__cta:focus-visible,
.prod-card__title a:focus-visible,
.prod-card__tag:focus-visible {
  outline: 2px solid var(--ap-primary);
  outline-offset: 3px;
  border-radius: 2px;
}

/*plugin css */

/* ── Active tags ─────────────────────────────────────────── */
.pf-active-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pf-tag {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--ap-primary-light); color: var(--ap-primary-dark);
  border-radius: 20px; padding: 3px 10px; font-size: .8rem;
}
.pf-tag__remove {
  background: none; border: none; cursor: pointer; color: inherit;
  padding: 0; line-height: 1; font-size: .9rem; opacity: .7;
  transition: opacity var(--ap-trans);
}
.pf-tag__remove:hover { opacity: 1; }

/* ── Checklist ───────────────────────────────────────────── */
.pf-checklist { list-style: none; margin: 0; padding: 0; }
.pf-checklist__item { margin-bottom: 4px; }
.pf-checklist__item--hidden { display: none; }
.pf-check-label {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: .875rem !important; padding: 3px 0;
  transition: color var(--ap-trans);
}
.pf-check-label:hover { color: var(--ap-primary); }
.pf-check-input { position: absolute; opacity: 0; width: 0; height: 0; }
.pf-check-box {
  width: 16px; height: 16px; border: 2px solid var(--ap-border);
  border-radius: 4px; flex-shrink: 0; transition: all var(--ap-trans);
  display: flex; align-items: center; justify-content: center;
}
.pf-check-input:checked + .pf-check-box {
  background: var(--ap-primary); border-color: var(--ap-primary);
}
.pf-check-input:checked + .pf-check-box::after {
  content: ''; width: 5px; height: 9px; border: 2px solid white;
  border-top: none; border-left: none; transform: rotate(45deg) translateY(-1px);
}
span.pf-group__title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ap-muted);
    margin: 1.5rem 0 .8rem;
    display: flex;
    align-items: center;
    gap: .4rem;
	position:relative;
}
span.pf-group__title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--ap-border);
}
ul.pf-checklist.pf-checklist--children.pf-checklist--depth-1
 {
    padding-left: 24px;
    margin: 8px 0;
}
/* ── Select ──────────────────────────────────────────────── */
.pf-select {
  width: 100%; padding: 8px 28px 8px 10px;
  border: 1px solid var(--ap-border); border-radius: var(--ap-radius);
  font-size: .875rem; background: var(--ap-white); cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0l6 8 6-8z' fill='%236b7280'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}

/* ── Show more ───────────────────────────────────────────── */
.pf-show-more {
  margin-top: 6px; background: none; border: none; cursor: pointer;
  color: var(--pf-primary); font-size: .8rem; padding: 0;
  text-decoration: underline;
}

/* ── Reset button ────────────────────────────────────────── */
.pf-btn--reset {
  width: 100%; padding: 8px; border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius); background: none; cursor: pointer;
  font-size: .875rem; color: var(--ap-muted); transition: all var(--ap-trans);
}
.pf-btn--reset:hover { background: var(--ap-bg); color: var(--ap-text); }

/* ── Grid ────────────────────────────────────────────────── */
.pf-grid { display: grid; gap: 24px; transition: opacity .2s; }
.pf-grid--loading { opacity: .5; pointer-events: none; }
.pf-cols-2 { grid-template-columns: repeat(2, 1fr); }
.pf-cols-3 { grid-template-columns: repeat(3, 1fr); }
.pf-cols-4 { grid-template-columns: repeat(4, 1fr); }
.pf-layout-list .pf-grid { grid-template-columns: 1fr !important; }

/* Loading spinner */
.pf-loading {
  grid-column: 1/-1; display: flex; align-items: center; justify-content: center;
  padding: 60px 20px; color: var(--ap-muted);
}
.pf-spinner {
  width: 32px; height: 32px; border: 3px solid var(--ap-border);
  border-top-color: var(--ap-primary); border-radius: 50%;
  animation: pf-spin .7s linear infinite;
}
@keyframes pf-spin { to { transform: rotate(360deg); } }

/* No results */
.pf-no-results {
  grid-column: 1/-1; text-align: center; padding: 60px 20px;
  color: var(--ap-muted); font-size: 1rem;
}

/* ── Button group filters ────────────────────────────────── */
.pf-btn-group { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-btn--filter {
  cursor: pointer;
  transition: all var(--ap-trans);
}
.pf-btn--filter:hover    { border-color: var(--ap-primary); color: var(--ap-primary); }
.pf-btn--filter.is-active {
  background: var(--ap-primary); border-color: var(--ap-primary); color: var(--ap-white);
}

/* ── Cards ───────────────────────────────────────────────── */
/* ── Cards ───────────────────────────────────────────────── */
.produit-card {
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius);
  background: var(--ap-white);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--ap-trans), transform var(--ap-trans);
  height: 100%; /* Pour uniformiser les cartes dans une grid */
}

.produit-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

/* Image */
.produit-card__img-wrap {
  padding: 20px; /* Plus d'espace autour de l'image */
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative; /* Pour le badge offre */
}

.produit-card__img-wrap img {
  width: 100%;
  height: 200px; /* Hauteur plus raisonnable */
  object-fit: contain;
  display: block;
  transition: transform var(--ap-trans);
}

.produit-card:hover .produit-card__img-wrap img {
  transform: scale(1.05);
}

/* Image placeholder */
.produit-card__img--placeholder {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  color: #cbd5e1;
}

/* Badge offre (Neuf/Occasion/Obsolète) */
.produit-card__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--ap-primary);
  color: white;
  z-index: 1;
}

/* Variation selon type d'offre (optionnel) */
.badge--offre[data-offre="occasion"] {
  background: #6b7280;
}

.badge--offre[data-offre="obsolete"] {
  background: #dc2626;
}

/* Corps de la carte */
.produit-card__body {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Titre */
.produit-card__title {
  margin: 0 0 8px;
  font-size: 1rem !important;
  font-weight: 600;
  line-height: 1.4;
}

.produit-card__title a {
  color: var(--ap-text);
  text-decoration: none;
  transition: color var(--ap-trans);
}

.produit-card__title a:hover {
  color: var(--ap-primary);
}

/* Marque / Constructeur */
.produit-card__brand {
  font-size: 0.75rem;
  color: var(--ap-muted);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.produit-card__sep {
  margin: 0 2px;
  opacity: 0.5;
}

/* Tags (spécifications techniques) */
.produit-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.produit-card__tag {
  font-size: 10px;
  font-weight: 500;
  padding: 4px 8px;
  background: #f1f5f9;
  color: #1e293b;
  border-radius: 4px;
  letter-spacing: 0.3px;
}

.produit-card__tag--hi {
  background: var(--ap-primary);
  color: white;
}

/* Footer */
.produit-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  margin-top: auto; /* Pousse le footer en bas */
  border-top: 1px solid var(--ap-border);
  gap: 12px;
}

/* Délai de livraison */
.produit-card__del {
  font-size: 10px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 4px;
  line-height: 1.2;
}

.produit-card__del-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Délai : En stock / 48h (vert) */
.produit-card__del.badge--del-stock {
  color: #059669;
  background-color: #ecfdf5;
}

.produit-card__del.badge--del-stock .produit-card__del-dot {
  background-color: #10b981;
  box-shadow: 0 0 0 1px #a7f3d0;
  animation: pulse-dot 1.5s ease-in-out infinite;
}

/* Délai : 5–7 jours (orange) */
.produit-card__del.badge--del-short {
  color: #ea580c;
  background-color: #fff7ed;
}

.produit-card__del.badge--del-short .produit-card__del-dot {
  background-color: #f97316;
  box-shadow: 0 0 0 1px #fed7aa;
}

/* Délai : Sur commande (bleu) */
.produit-card__del.badge--del-order {
  color: #1e40af;
  background-color: #eff6ff;
}

.produit-card__del.badge--del-order .produit-card__del-dot {
  background-color: #3b82f6;
  box-shadow: 0 0 0 1px #bfdbfe;
}

/* Délai : Par défaut (gris) */
.produit-card__del.badge--del-default {
  color: #4b5563;
  background-color: #f3f4f6;
}

.produit-card__del.badge--del-default .produit-card__del-dot {
  background-color: #9ca3af;
  box-shadow: 0 0 0 1px #e5e7eb;
}

/* Bouton CTA */
.produit-card__cta {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--ap-primary);
  color: #fff !important;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--ap-trans);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.produit-card__cta:hover {
  background: color-mix(in srgb, var(--ap-primary) 80%, black);
  transform: translateX(2px);
}

/* Animation du dot pour le stock */
@keyframes pulse-dot {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.3);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Responsive */

/* ─── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  #archive-produits .pf-sidebar { width: 220px; }
  .pf-cols-3 { grid-template-columns: repeat(2, 1fr); }	
  .archive-produits__grid--fallback { grid-template-columns: repeat(2, 1fr); }
}
@media(min-width:769px){
button#pf-filters-close
 {
    display: none;
}
}
@media (max-width: 768px) {
  .archive-produits__hero { padding: 36px 20px 28px; }
  .archive-produits__container { padding: 24px 16px 48px; }

  .archive-produits__grid--fallback,
  #archive-produits .pf-cols-3,
  #archive-produits .pf-cols-2 { grid-template-columns: repeat(2, 1fr); }
  #archive-produits .pf-sidebar
    {
        width: 300px;
    }
    /* ── App layout ─────────────────────────────── */
  .pf-app.pf-position-left,
  .pf-app.pf-position-top {
    flex-direction: column;
    gap: 0;
  }

  /* ── Sidebar : cachée par défaut, ouverte via drawer ─── */
  .pf-app.pf-position-left .pf-sidebar {
    width: 100%;
    position: fixed;
    top: 0; left: 0;
    height: 100dvh;
    z-index: 9999;
    background: #fff;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px 20px 40px;
    box-shadow: 4px 0 24px rgba(0,0,0,.15);
    transform: translateX(-110%);
    transition: transform .3s cubic-bezier(.22,1,.36,1);
    -webkit-overflow-scrolling: touch;
  }
  .pf-app.pf-position-left .pf-sidebar--open {
    transform: translateX(0);
  }

  /* Overlay derrière le drawer */
  .pf-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 9998;
    backdrop-filter: blur(2px);
  }
  .pf-sidebar-overlay--visible { display: block; }

  /* ── Bouton "Filtres" mobile ─────────────────── */
  .pf-mobile-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 0 16px;
    border-bottom: 1px solid var(--pf-border);
    margin-bottom: 20px;
  }
  .pf-sidebar-close {
    padding: 0 0 16px !important;
    background: none !important;
	float:right;  
  }
  .pf-sidebar-close svg { color: var(--pf-muted); }
  .pf-sidebar-close span { display:none; }	
	
}

@media (max-width: 540px) {
  .archive-produits__grid--fallback,
  #archive-produits .pf-cols-3,
  #archive-produits .pf-cols-2 { grid-template-columns: 1fr; }
  .prod-card__media { aspect-ratio: 16 / 9; }
  .archive-produits__title { font-size: 1.7rem; }
}

@media (max-width: 768px) {
  .produit-card__img-wrap {
    padding: 12px;
  }
  
  .produit-card__img-wrap img {
    height: 160px;
  }
  
  .produit-card__body {
    padding: 12px;
  }
  
  .produit-card__tags {
    gap: 6px;
  }
  
  .produit-card__footer {
    flex-wrap: wrap;
  }
  
  .produit-card__cta {
    width: 100%;
    justify-content: center;
  }
}