/* ==========================================================================
   Home page
   ========================================================================== */
/* Barre de catégories persistante, sous la nav — toujours visible en
   parcourant les annonces (comme la nav secondaire de Snipes), au lieu
   d'être enterrée dans le hero. */
.category-bar{
  background: var(--chrome-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.category-bar .container{
  display: flex; gap: var(--space-2); padding: 12px var(--space-5);
  overflow-x: auto; scrollbar-width: none;
}
.category-bar .container::-webkit-scrollbar{ display: none; }

.hero{
  position: relative; text-align: center; padding: var(--space-7) var(--space-5) var(--space-6);
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(24,200,117,0.14), transparent 70%), var(--black);
  overflow: hidden;
}
/* Blob ambiant qui dérive lentement — signature "modern dark cinematic" */
.hero::before{
  content: ''; position: absolute; top: -120px; left: 50%; width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(24,200,117,0.16), transparent 70%);
  transform: translateX(-50%); filter: blur(40px); pointer-events: none;
  animation: hero-drift 14s ease-in-out infinite alternate;
}
@keyframes hero-drift{ from{ transform: translate(-58%, 0) scale(1); } to{ transform: translate(-42%, 20px) scale(1.08); } }

.hero-eyebrow{
  font-family: var(--font-body); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--green); margin-bottom: var(--space-4); position: relative;
  animation: hero-rise var(--dur-slow) var(--ease-out) both;
}
.hero h1{
  font-size: clamp(32px, 6vw, 60px); max-width: 820px; margin: 0 auto; position: relative;
}
.hero-title-line{
  display: block; clip-path: inset(0 0 100% 0);
  animation: hero-title-reveal 900ms var(--ease-out) 80ms both;
}
.hero-title-line--accent{ animation-delay: 260ms; }
.hero h1 .accent{ color: var(--green); }
.hero-title-line--accent .accent{ display: inline-block; animation: hero-accent-glow 1s var(--ease-out) 780ms both; }
.hero-copy{
  width: min(100%, 760px); min-height: 158px; margin: var(--space-5) auto 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  text-align: center;
}
.hero-copy-label{
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px;
  border: 0; border-radius: var(--radius-sm); background: var(--green); box-shadow: var(--shadow-glow);
  color: var(--black); font-size: 13px; font-weight: 700; line-height: 1; text-transform: uppercase;
}
.hero-copy-label::before{ content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.hero-copy-headline{
  margin: 0; color: var(--white); font-size: 24px; font-weight: 700; line-height: 1.25;
  transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out), filter 360ms var(--ease-out);
}
.hero-copy-text{
  display: flex; align-items: center; justify-content: center; min-height: 24px; margin: 0; max-width: 660px;
  color: var(--text-dim); font-size: 15px; line-height: 1.5;
  filter: blur(0); transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out), filter 360ms var(--ease-out);
}
.hero .hero-copy-text{ animation: none; }
.hero-copy.is-changing .hero-copy-headline,
.hero-copy.is-changing .hero-copy-text{ opacity: 0; transform: translateY(-10px); filter: blur(3px); }
.hero-copy-progress{ display: flex; justify-content: center; gap: 7px; }
.hero-copy-progress span{ width: 20px; height: 3px; border-radius: var(--radius-pill); background: var(--line-strong); transition: width var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.hero-copy-progress span.is-active{ width: 38px; background: var(--green); }
.hero-copy-controls{ display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 34px; }
.hero-copy-next{
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 30px;
  border: 0; border-radius: var(--radius-sm); color: var(--text-dim); background: transparent;
  opacity: 0; pointer-events: none; transform: translateX(-5px) scale(0.9);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.hero-copy:hover .hero-copy-next,
.hero-copy.is-interacting .hero-copy-next,
.hero-copy-next:focus-visible{
  opacity: 1; pointer-events: auto; transform: translateX(0);
  color: var(--green); background: var(--green-dim);
}
.hero-copy-next:hover{ background: var(--green); color: var(--black); box-shadow: var(--shadow-glow); }
.hero-copy-next:focus-visible{ outline: 2px solid var(--green); outline-offset: 3px; }
.hero-copy-chevron{ position: relative; width: 15px; height: 2px; background: currentColor; transform: translateX(-2px); transition: transform var(--dur-fast) var(--ease-out); }
.hero-copy-chevron::after{ content: ''; position: absolute; top: -3px; right: 0; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.hero-copy-next:hover .hero-copy-chevron{ transform: translateX(0); }
.hero p{
  margin-top: var(--space-4); color: var(--text-dim); max-width: 560px; margin-left: auto; margin-right: auto;
  position: relative; animation: hero-rise var(--dur-slow) var(--ease-out) 120ms both;
}
@keyframes hero-rise{ from{ opacity: 0; transform: translateY(14px); } to{ opacity: 1; transform: translateY(0); } }
@keyframes hero-title-reveal{
  from{ opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(22px); }
  to{ opacity: 1; clip-path: inset(0); transform: translateY(0); }
}
@keyframes hero-accent-glow{
  0%, 100%{ text-shadow: 0 0 0 transparent; }
  45%{ text-shadow: 0 0 24px var(--green-line); }
}

@media (prefers-reduced-motion: reduce){
  .hero-title-line, .hero-title-line--accent .accent{ animation-delay: 0ms; }
}

.hero-search{
  max-width: 620px; margin: var(--space-6) auto 0; display: flex; gap: 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 8px 8px 8px 20px; position: relative;
  animation: hero-rise var(--dur-slow) var(--ease-out) 180ms both;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.hero-search:focus-within{ border-color: var(--green-line); box-shadow: var(--shadow-glow); }
.hero-search input{ flex: 1; background: none; border: none; color: var(--white); font-size: 14.5px; }
.hero-search input:focus{ outline: none; }
@media (max-width: 640px){ .hero-copy{ min-height: 194px; } .hero-copy-headline{ font-size: 20px; } .hero-copy-text{ min-height: 48px; } }
@media (prefers-reduced-motion: reduce){ .hero-copy-headline, .hero-copy-text, .hero-copy-progress span, .hero-copy-next{ transition: none; } }

.category-chip{
  font-size: 12.5px; font-weight: 600; padding: 9px 18px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); color: var(--text-dim); background: transparent; white-space: nowrap; flex-shrink: 0;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.category-chip:hover{ border-color: var(--green-line); color: var(--green); transform: translateY(-1px); }
.category-chip.active{ background: var(--green); border-color: var(--green); color: var(--black); }

.section-label{
  font-family: var(--font-body); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: var(--space-2);
}
.filters-panel{
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: var(--space-4); margin-bottom: var(--space-5);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md);
  animation: filters-in var(--dur-base) var(--ease-out);
}
.filters-panel[hidden]{ display: none; }
@keyframes filters-in{ from{ opacity: 0; transform: translateY(-6px); } to{ opacity: 1; transform: translateY(0); } }
.filter-input{
  background: var(--surface-quiet); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 9px 12px; color: var(--white); font-size: 13.5px; font-family: inherit;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  min-width: 0; flex: 1 1 140px;
}
.filter-input:focus{ outline: none; border-color: var(--green); background: var(--green-dim); }
.filter-input::placeholder{ color: var(--text-faint); }
#applyFilters{ flex: 0 0 auto; }
@media (max-width: 640px){ .filters-panel{ flex-direction: column; align-items: stretch; } .filter-input{ flex: 1 1 auto; } }

.section-title{ display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-5); }
.section-title h2{ font-size: 24px; font-weight: 700; letter-spacing: -0.01em; text-transform: uppercase; }
.section-title a{ font-size: 13px; color: var(--green); transition: opacity var(--dur-fast) var(--ease-out); }
.section-title a:hover{ opacity: 0.75; }

.listing-grid{
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3);
}
.load-more-row{ display: flex; flex-wrap: wrap; justify-content: center; margin-top: var(--space-5); }
.load-more-row[hidden]{ display: none; }
#loadMoreSentinel{ flex: 0 0 100%; height: 1px; }
.load-more-row .btn{ min-width: 190px; }
@media (max-width: 1200px){ .listing-grid{ grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px){ .listing-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px){ .listing-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px){ .listing-grid{ grid-template-columns: 1fr; } }

.listing-card{
  display: block; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden; transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.listing-card:hover{ border-color: var(--green-line); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.listing-card .thumb{ aspect-ratio: 1/1; background: var(--panel-2); position: relative; overflow: hidden; }
.listing-card .thumb img{ width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.listing-card:hover .thumb img{ transform: scale(1.06); }
.listing-card .thumb .no-image{ display:flex; align-items:center; justify-content:center; height:100%; color: var(--text-faint); font-size: 12px; }
.favorite-btn{
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--favorite-border);
  background: var(--favorite-bg); backdrop-filter: blur(4px);
  color: var(--favorite-color); display: flex; align-items: center; justify-content: center;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.favorite-btn svg{ width: 16px; height: 16px; }
.favorite-btn:hover{ transform: scale(1.1); }
.favorite-btn.is-active{ color: var(--favorite-active-color); background: var(--favorite-active-bg); border-color: var(--favorite-active-bg); }
.favorite-btn.is-active:hover{ transform: scale(1.15); }

.thumb-brand{
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, rgba(24,200,117,0.16), transparent 70%), var(--panel-2);
}
.thumb-brand .brand-mark{ width: 34%; opacity: 0.9; }
.thumb-brand .brand-mark .brand-logo{ width: 100%; height: 100%; object-fit: contain; }
.thumb-badge{
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: var(--green); color: var(--black); font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; padding: 4px 9px; border-radius: var(--radius-pill);
}
.listing-card .body{ padding: 12px; }
.listing-card .price{ font-family: var(--font-display); font-weight: 700; font-size: 15.5px; color: var(--green); }
.listing-card .title{ font-size: 13px; font-weight: 600; margin-top: 3px; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.listing-card .meta{ font-size: 11px; color: var(--text-faint); margin-top: 5px; display: flex; justify-content: space-between; }
.listing-card .seller-line{ display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 11px; color: var(--text-dim); }
.listing-card .seller-line .seller-avatar{ width: 18px; height: 18px; font-size: 8px; }

.how-it-works{ padding: var(--space-8) 0; border-top: 1px solid var(--line); }
.how-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-6); }
@media (max-width: 800px){ .how-grid{ grid-template-columns: 1fr; } }
.how-card{
  padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-md);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.how-card:hover{ border-color: var(--line-strong); transform: translateY(-3px); }
.how-card .step-num{ font-family: var(--font-body); color: var(--green); font-size: 12px; margin-bottom: var(--space-3); }
.how-card h3{ font-size: 17px; margin-bottom: var(--space-2); }
.how-card p{ font-size: 13.5px; color: var(--text-dim); }