/* ═══════════════════════════════════════════════════════════
   PAYNELIA · TEXTILES-GOODIES-OBJETS-PUB
   Charte appliquée + overlay orange sur images Walomo
   ═══════════════════════════════════════════════════════════ */

:root{
  --pn-orange:#FF3B00;
  --pn-orange-dark:#E63400;
  --pn-orange-light:#FFF5F0;
  --pn-black:#1A1A1A;
  --pn-cream:#FBF9F6;
  --pn-white:#FFFFFF;
  --pn-border:#E5E5E5;
  --pn-gray-100:#F5F5F3;
  --pn-gray-200:#EBEBE8;
  --pn-gray-300:#D4D4D1;
  --pn-gray-500:#999996;
  --pn-gray-700:#6B6B68;
  --pn-radius-sm:8px;
  --pn-radius-md:12px;
  --pn-radius-lg:14px;
  --pn-radius-signature:32px;
  --pn-max-width:1400px;
  --pn-container-pad:32px;
  --pn-font-hero:'Bebas Neue',Impact,sans-serif;
  --pn-font-head:'Syne',system-ui,-apple-system,sans-serif;
  --pn-font-body:'Inter',system-ui,-apple-system,sans-serif;
  --pn-font-mono:'DM Mono',ui-monospace,Menlo,monospace;
}

/* ═══ OVERLAY ORANGE SUR IMAGES WALOMO (bâches bleues) ═══ */
.pn-walomo-img-wrap{
  position:relative;
  overflow:hidden;
  border-radius:var(--pn-radius-md);
  background:var(--pn-cream);
}
.pn-walomo-img-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .3s ease;
}
.pn-walomo-img-wrap::after{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(255,59,0,0.06);
  mix-blend-mode:multiply;
  pointer-events:none;
  transition:background .2s ease;
}
.pn-walomo-img-wrap:hover::after{background:rgba(255,59,0,0.02)}
.pn-walomo-img-wrap:hover img{transform:scale(1.04)}

/* Variante sans overlay (si l'image est déjà dans la charte) */
.pn-walomo-img-wrap.no-overlay::after{display:none}

/* ═══ CARTE PRODUIT (catalogue + categorie) ═══ */
.pn-walomo-card{
  background:#fff;
  border:1px solid var(--pn-border);
  border-radius:var(--pn-radius-md);
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  display:flex;
  flex-direction:column;
}
.pn-walomo-card:hover{
  transform:translateY(-3px);
  border-color:var(--pn-orange);
  box-shadow:0 12px 28px rgba(0,0,0,.08), 0 4px 12px rgba(255,59,0,.10);
}
.pn-walomo-card .pn-walomo-img-wrap{
  aspect-ratio:1/1;
  border-radius:0;
}
.pn-walomo-card-body{padding:14px 16px;flex:1;display:flex;flex-direction:column}
.pn-walomo-card-cat{
  font-family:var(--pn-font-mono);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--pn-orange);
  font-weight:700;
  margin-bottom:4px;
}
.pn-walomo-card-name{
  font-family:var(--pn-font-head);
  font-weight:700;
  font-size:14px;
  color:var(--pn-black);
  margin:0 0 8px;
  line-height:1.3;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.pn-walomo-card-meta{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  font-size:11px;
  color:var(--pn-gray-700);
  margin-bottom:8px;
}
.pn-walomo-card-meta-item{
  background:var(--pn-cream);
  padding:2px 8px;
  border-radius:50px;
  font-family:var(--pn-font-mono);
}
.pn-walomo-card-price{
  margin-top:auto;
  font-family:var(--pn-font-mono);
  font-size:13px;
  color:var(--pn-orange);
  font-weight:700;
}
.pn-walomo-card-price small{color:var(--pn-gray-700);font-weight:500;font-size:11px}

/* ═══ GRID ═══ */
.pn-walomo-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:16px;
}
@media(max-width:600px){
  .pn-walomo-grid{grid-template-columns:repeat(2,1fr);gap:10px}
}

/* ═══ HERO PAGE ═══ */
.pn-walomo-hero{
  padding:48px 0 36px;
  background:linear-gradient(180deg,var(--pn-cream) 0%,var(--pn-white) 100%);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.pn-walomo-hero::before{
  content:'';
  position:absolute;
  top:-200px;right:-200px;
  width:600px;height:600px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,59,0,.08) 0%,transparent 70%);
  pointer-events:none;
}
.pn-walomo-hero-inner{
  max-width:920px;
  margin:0 auto;
  padding:0 var(--pn-container-pad);
  position:relative;
  z-index:2;
}
.pn-walomo-eyebrow{
  display:inline-block;
  font-family:var(--pn-font-mono);
  font-size:11px;
  color:var(--pn-orange);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:16px;
  padding:5px 12px;
  border:1px solid var(--pn-orange);
  border-radius:50px;
}
.pn-walomo-title{
  font-family:var(--pn-font-hero);
  font-size:clamp(40px,6vw,72px);
  line-height:.95;
  letter-spacing:-.01em;
  text-transform:uppercase;
  margin-bottom:18px;
}
.pn-walomo-title span{color:var(--pn-orange)}
.pn-walomo-lead{
  font-size:16px;
  line-height:1.5;
  color:var(--pn-gray-700);
  max-width:620px;
  margin:0 auto 22px;
}

/* ═══ BREADCRUMB SECTION ═══ */
.pn-walomo-breadcrumb{padding:14px 0;border-bottom:1px solid var(--pn-border)}
.pn-walomo-breadcrumb-inner{
  max-width:var(--pn-max-width);
  margin:0 auto;
  padding:0 var(--pn-container-pad);
  display:flex;
  gap:6px;
  align-items:center;
  font-family:var(--pn-font-mono);
  font-size:11px;
  color:var(--pn-gray-500);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.pn-walomo-breadcrumb-inner a{color:var(--pn-gray-700);text-decoration:none}
.pn-walomo-breadcrumb-inner a:hover{color:var(--pn-orange)}
.pn-walomo-breadcrumb-inner .sep{color:var(--pn-gray-300)}

/* ═══ SECTION GENERIC ═══ */
.pn-walomo-section{
  max-width:var(--pn-max-width);
  margin:0 auto;
  padding:48px var(--pn-container-pad);
}
.pn-walomo-section-title{
  font-family:var(--pn-font-hero);
  font-size:clamp(28px,4vw,42px);
  line-height:1;
  text-transform:uppercase;
  margin:0 0 24px;
}
.pn-walomo-section-title span{color:var(--pn-orange)}

/* ═══ CATEGORY HUB CARDS ═══ */
.pn-walomo-cathub{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-bottom:32px;
}
@media(max-width:799px){.pn-walomo-cathub{grid-template-columns:1fr}}
.pn-walomo-cathub-card{
  background:#fff;
  border:1px solid var(--pn-border);
  border-radius:var(--pn-radius-md);
  border-bottom-right-radius:var(--pn-radius-signature);
  padding:24px 28px;
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
  gap:6px;
  transition:all .2s ease;
}
.pn-walomo-cathub-card:hover{
  border-color:var(--pn-orange);
  transform:translateY(-3px);
  box-shadow:0 16px 32px rgba(0,0,0,.06);
}
.pn-walomo-cathub-eyebrow{
  font-family:var(--pn-font-mono);
  font-size:10px;
  color:var(--pn-orange);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:700;
}
.pn-walomo-cathub-title{
  font-family:var(--pn-font-hero);
  font-size:32px;
  text-transform:uppercase;
  letter-spacing:-.01em;
  color:var(--pn-black);
}
.pn-walomo-cathub-desc{font-size:13px;color:var(--pn-gray-700);line-height:1.5}
.pn-walomo-cathub-meta{
  font-family:var(--pn-font-mono);
  font-size:11px;
  color:var(--pn-gray-500);
  margin-top:8px;
  letter-spacing:.04em;
}

/* ═══ FILTRES CATEGORIE ═══ */
.pn-walomo-filters{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  padding:16px 0;
  margin-bottom:16px;
  border-bottom:1px solid var(--pn-border);
}
.pn-walomo-filter-pill{
  background:#fff;
  border:1.5px solid var(--pn-border);
  padding:6px 14px;
  border-radius:50px;
  font-family:var(--pn-font-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-weight:700;
  cursor:pointer;
  color:var(--pn-gray-700);
  transition:all .15s;
}
.pn-walomo-filter-pill:hover{border-color:var(--pn-orange);color:var(--pn-orange)}
.pn-walomo-filter-pill.active{background:var(--pn-orange);color:#fff;border-color:var(--pn-orange)}

/* ═══ PAGINATION ═══ */
.pn-walomo-pagination{
  display:flex;
  justify-content:center;
  gap:6px;
  padding:32px 0;
  flex-wrap:wrap;
}
.pn-walomo-pagination a, .pn-walomo-pagination span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:38px;
  height:38px;
  padding:0 12px;
  border-radius:50px;
  font-family:var(--pn-font-mono);
  font-size:12px;
  font-weight:700;
  text-decoration:none;
  border:1.5px solid var(--pn-border);
  color:var(--pn-gray-700);
  transition:all .15s;
}
.pn-walomo-pagination a:hover{border-color:var(--pn-orange);color:var(--pn-orange)}
.pn-walomo-pagination .current{background:var(--pn-orange);color:#fff;border-color:var(--pn-orange)}
.pn-walomo-pagination .disabled{opacity:.4;pointer-events:none}