/* =============================================
   AFRIJUS — CSS Page Produits (produits.css)
   ============================================= */

/* ── PAGE HERO ── */
.page-hero {
  position: relative;
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: var(--header-h);
}
.page-hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--vert-fonce) 0%, var(--vert-moyen) 60%, var(--vert-clair) 100%);
}
.page-hero-overlay {
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.page-hero-content {
  position: relative; z-index: 2;
  text-align: center; color: var(--blanc);
  padding: 80px 20px 0;
}
.page-hero-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 900; margin: 16px 0 12px;
  text-shadow: 0 2px 20px rgba(0,0,0,0.2);
}
.page-hero-sub { font-size: 1.05rem; opacity: 0.88; margin-bottom: 20px; }
.page-hero-wave {
  position: absolute; bottom: -1px; left: 0;
  width: 100%; height: 60px; z-index: 3;
}
.breadcrumb {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; font-size: 0.85rem; opacity: 0.75; margin-top: 8px;
}
.breadcrumb a { color: var(--blanc); text-decoration: none; transition: var(--transition); }
.breadcrumb a:hover { color: var(--or); }
.breadcrumb span { color: rgba(255,255,255,0.5); }

/* ── FILTRES ── */
.filters-bar {
  display: flex; align-items: center;
  gap: 10px; flex-wrap: wrap; margin-bottom: 28px;
}
.filter-btn {
  padding: 10px 22px; border-radius: 50px;
  border: 2px solid rgba(46,125,50,0.2);
  background: transparent; color: var(--vert-fonce);
  font-family: 'Nunito', sans-serif; font-weight: 700;
  font-size: 0.875rem; cursor: pointer; transition: var(--transition);
}
.filter-btn:hover { border-color: var(--vert); background: var(--vert-pale); }
.filter-btn.active {
  background: var(--vert-fonce); color: var(--blanc);
  border-color: var(--vert-fonce); box-shadow: 0 4px 15px rgba(27,94,32,0.3);
}

.results-count { font-size: 0.875rem; color: var(--gris); margin-bottom: 32px; font-weight: 600; }
.results-count span:first-child { color: var(--vert-fonce); font-size: 1.1rem; font-weight: 800; }

/* ── GRILLE PRODUITS FULL ── */
.products-grid-full {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 30px;
}
.product-emoji-bg {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 5rem; transition: transform 0.5s ease;
}
.product-card:hover .product-emoji-bg { transform: scale(1.1) rotate(5deg); }

.product-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tag {
  font-size: 0.72rem; font-weight: 700;
  background: var(--vert-pale); color: var(--vert-fonce);
  padding: 3px 10px; border-radius: 50px;
  border: 1px solid rgba(46,125,50,0.15);
}
.product-volume { font-size: 0.8rem; color: var(--gris); font-weight: 400; }

.btn-overlay-wa {
  display: inline-flex; align-items: center; gap: 8px;
  background: #25D366; color: white; text-decoration: none;
  padding: 12px 24px; border-radius: 50px;
  font-weight: 800; font-size: 0.9rem; transition: var(--transition);
  box-shadow: 0 4px 20px rgba(37,211,102,0.4);
}
.btn-overlay-wa svg { width: 18px; height: 18px; fill: white; }
.btn-overlay-wa:hover { background: #1DA851; transform: scale(1.05); }

.product-card.hidden { display: none; }
.product-card.fade-in { animation: fadeInCard 0.4s ease forwards; }
@keyframes fadeInCard {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── CTA GROS ── */
.bulk-cta {
  background: linear-gradient(135deg, var(--vert-fonce), var(--vert-moyen));
  text-align: center; color: var(--blanc); padding: 70px 5%;
}
.bulk-cta-inner { max-width: 600px; margin: 0 auto; }
.bulk-cta-icon { font-size: 3.5rem; margin-bottom: 20px; animation: bounce-slow 2s ease-in-out infinite; }
.bulk-cta h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 900; margin-bottom: 14px;
}
.bulk-cta p { font-size: 1rem; opacity: 0.88; line-height: 1.75; margin-bottom: 30px; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .page-hero { height: 300px; }
  .filter-btn { padding: 8px 16px; font-size: 0.8rem; }
  .products-grid-full { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
}
@media (max-width: 480px) {
  .products-grid-full { grid-template-columns: 1fr; }
  .page-hero-title { font-size: 1.8rem; }
}

/* Le ticker sur les pages secondaires vient APRES page-hero */
.page-hero + .ticker-wrap { margin-top: 0; }