/* ============================================================
   COMPARO — Custom Styles
   Brand: #C9A43A (Or Premium) | #EBD8BA (Or Clair)
          #000000 (Noir Prestige) | #FFFFFF | #F4F4F4
============================================================ */

:root {
  --gold:       #C9A43A;
  --gold-light: #EBD8BA;
  --gold-dark:  #A8841E;
  --black:      #000000;
  --white:      #FFFFFF;
  --gray-bg:    #F4F4F4;
  --gray-100:   #111111;
  --gray-200:   #1a1a1a;
  --gray-300:   #2a2a2a;
  --gray-400:   #444444;
  --gray-500:   #888888;
  --gray-600:   #bbbbbb;
}

/* ── Base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
}

/* ── Typography ───────────────────────────────────────────── */
.text-gold        { color: var(--gold); }
.text-gold-light  { color: var(--gold-light); }
.bg-gold          { background-color: var(--gold); }
.bg-gold-light    { background-color: var(--gold-light); }
.border-gold      { border-color: var(--gold); }

/* ── Gradient utilities ───────────────────────────────────── */
.gradient-gold {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold), var(--gold-light));
}
.gradient-text-gold {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold), var(--gold-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gradient-radial-gold {
  background: radial-gradient(ellipse at center, rgba(201,164,58,0.15) 0%, transparent 70%);
}

/* ── Glassmorphism ────────────────────────────────────────── */
.glass {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(201,164,58,0.15);
}
.glass-dark {
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(201,164,58,0.2);
}

/* ── Glow effects ─────────────────────────────────────────── */
.glow-gold {
  box-shadow: 0 0 20px rgba(201,164,58,0.3), 0 0 40px rgba(201,164,58,0.1);
}
.glow-gold-sm {
  box-shadow: 0 0 10px rgba(201,164,58,0.25);
}
.text-glow-gold {
  text-shadow: 0 0 20px rgba(201,164,58,0.5), 0 0 40px rgba(201,164,58,0.2);
}

/* ── Particles Canvas ─────────────────────────────────────── */
#particles-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ── Navbar ───────────────────────────────────────────────── */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  transition: background 0.3s, box-shadow 0.3s, padding 0.3s;
  padding: 1rem 0;
}
.navbar.scrolled {
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 2px 30px rgba(201,164,58,0.08);
  padding: 0.6rem 0;
}
.navbar-logo {
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.navbar-search-input {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(201,164,58,0.25);
  border-radius: 9999px;
  color: var(--white);
  padding: 0.4rem 1rem;
  font-size: 0.875rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}
.navbar-search-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,164,58,0.15);
}
.navbar-search-input::placeholder { color: var(--gray-500); }

/* ── Hero Section ─────────────────────────────────────────── */
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 60%, rgba(201,164,58,0.08) 0%, transparent 65%),
              radial-gradient(ellipse at 80% 20%, rgba(201,164,58,0.05) 0%, transparent 50%),
              var(--black);
}
.hero-title {
  font-size: clamp(2.5rem, 8vw, 6rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  /* A 4,25rem sur trois lignes, chaque centieme coute pres de 2 px par ligne. */
  line-height: 1.02;
}
.hero-title span.brand {
  display: block;
  background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 40%, var(--gold-light) 70%, var(--gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 30px rgba(201,164,58,0.4));
}
.hero-subtitle {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: var(--gray-600);
  max-width: 600px;
  line-height: 1.7;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 1rem;
  border: 1px solid rgba(201,164,58,0.4);
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-light);
  background: rgba(201,164,58,0.08);
  margin-bottom: 1.5rem;
}
.hero-badge::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--gold);
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.7); }
}

/* ── Search Bar ───────────────────────────────────────────── */
.search-bar-hero {
  background: rgba(255,255,255,0.05);
  border: 1.5px solid rgba(201,164,58,0.3);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  transition: border-color 0.3s, box-shadow 0.3s;
  overflow: hidden;
  max-width: 700px;
  width: 100%;
}
.search-bar-hero:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(201,164,58,0.12), 0 8px 40px rgba(201,164,58,0.15);
}
.search-bar-hero input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--white);
  padding: 1rem 1.5rem;
  font-size: 1rem;
}
.search-bar-hero input::placeholder { color: rgba(255,255,255,0.3); }
/* Wrapper ville : icône + select + flèche */
.search-city-wrapper {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  border-left: 1.5px solid rgba(201,164,58,0.4);
  padding: 0 0.9rem;
  flex-shrink: 0;
  background: rgba(201,164,58,0.04);
}
.search-city-icon {
  width: 14px; height: 14px;
  color: var(--gold);
  flex-shrink: 0;
}
.search-city-arrow {
  width: 12px; height: 12px;
  color: var(--gold-light);
  flex-shrink: 0;
  pointer-events: none;
  opacity: 0.7;
}
.search-bar-hero select {
  background: transparent;
  border: none;
  color: var(--gold-light);
  padding: 0.75rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  min-width: 80px;
}
.search-bar-hero select option { background: #111; color: var(--white); }
.search-btn-hero {
  margin: 0.35rem;
  padding: 0.7rem 1.5rem;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  border: none;
  border-radius: 9999px;
  color: var(--black);
  font-weight: 700;
  font-size: 0.875rem;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}
.search-btn-hero:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 20px rgba(201,164,58,0.4);
}

/* ── Stats row ────────────────────────────────────────────── */
.stats-row {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}
.stat-item { text-align: center; }
.stat-number {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
  display: block;
}
.stat-label {
  font-size: 0.75rem;
  color: var(--gray-500);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ── Trending ticker ──────────────────────────────────────── */
.ticker-wrapper {
  overflow: hidden;
  background: rgba(201,164,58,0.06);
  border-top: 1px solid rgba(201,164,58,0.15);
  border-bottom: 1px solid rgba(201,164,58,0.15);
  padding: 0.6rem 0;
}
.ticker-track {
  display: flex;
  animation: ticker-scroll 35s linear infinite;
  white-space: nowrap;
}
.ticker-track:hover { animation-play-state: paused; }
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 2rem;
  font-size: 0.875rem;
  color: var(--gray-600);
  cursor: pointer;
  transition: color 0.2s;
}
.ticker-item:hover { color: var(--gold); }
.ticker-item .price { color: var(--gold); font-weight: 700; }
.ticker-dot { width: 4px; height: 4px; background: var(--gold-dark); border-radius: 50%; flex-shrink: 0; }
@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Section titles ───────────────────────────────────────── */
.section-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.section-title {
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.2;
}
.section-divider {
  width: 3rem;
  height: 3px;
  background: linear-gradient(to right, var(--gold), transparent);
  border-radius: 9999px;
  margin-top: 1rem;
}

/* ── Category Cards ───────────────────────────────────────── */
.category-card {
  position: relative;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(201,164,58,0.1);
  border-radius: 1.25rem;
  padding: 1.75rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1),
              border-color 0.3s, box-shadow 0.3s, background 0.3s;
  overflow: hidden;
}
.category-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(201,164,58,0.08) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
}
.category-card:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: rgba(201,164,58,0.4);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(201,164,58,0.15);
  background: rgba(201,164,58,0.05);
}
.category-card:hover::before { opacity: 1; }
.category-icon {
  width: 3.5rem; height: 3.5rem;
  margin: 0 auto 1rem;
  border-radius: 1rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(201,164,58,0.1);
  border: 1px solid rgba(201,164,58,0.2);
  transition: background 0.3s, transform 0.3s;
  color: #C9A43A;
}
.category-icon svg { width: 1.6rem; height: 1.6rem; stroke: #C9A43A; }
.category-card:hover .category-icon {
  background: rgba(201,164,58,0.2);
  transform: rotate(-5deg) scale(1.1);
}
.category-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 0.25rem;
}
.category-count {
  font-size: 0.75rem;
  color: var(--gray-500);
}

/* ── Product Cards ────────────────────────────────────────── */
.product-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 1rem;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1),
              border-color 0.3s, box-shadow 0.3s;
  position: relative;
}
.product-card:hover {
  transform: translateY(-5px);
  border-color: rgba(201,164,58,0.3);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(201,164,58,0.1);
}
.product-card-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
}
.product-card-badge {
  position: absolute;
  top: 0.75rem; left: 0.75rem;
  background: var(--gold);
  color: var(--black);
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.product-card-body { padding: 1rem; }
.product-card-source {
  font-size: 0.7rem;
  color: var(--gold);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.35rem;
}
.product-card-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--white);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  margin-bottom: 0.75rem;
}
.product-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.product-price {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--gold);
}
.product-price-old {
  font-size: 0.75rem;
  color: var(--gray-500);
  text-decoration: line-through;
}
.btn-fav {
  width: 2rem; height: 2rem;
  border-radius: 50%;
  border: 1px solid rgba(201,164,58,0.2);
  background: transparent;
  color: var(--gray-500);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.btn-fav:hover, .btn-fav.active {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(201,164,58,0.1);
}

/* ── Skeleton loading ─────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: 0.5rem;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── How it works ─────────────────────────────────────────── */
.step-card {
  position: relative;
  padding: 2rem;
  text-align: center;
}
.step-number {
  width: 3.5rem; height: 3.5rem;
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--gold);
  color: var(--gold);
  font-size: 1.2rem;
  font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.25rem;
  transition: background 0.3s, color 0.3s;
}
.step-card:hover .step-number {
  background: var(--gold);
  color: var(--black);
}
.step-connector {
  position: absolute;
  top: 2rem + 1.75rem;
  right: -30%;
  width: 60%;
  height: 1px;
  background: linear-gradient(to right, rgba(201,164,58,0.4), rgba(201,164,58,0.1));
}

/* ── Values section ───────────────────────────────────────── */
.value-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(201,164,58,0.08);
  border-radius: 1rem;
  padding: 2rem;
  transition: border-color 0.3s, background 0.3s, transform 0.3s;
}
.value-card:hover {
  border-color: rgba(201,164,58,0.3);
  background: rgba(201,164,58,0.03);
  transform: translateY(-3px);
}
.value-icon {
  width: 3rem; height: 3rem;
  border-radius: 0.75rem;
  background: rgba(201,164,58,0.1);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
  color: var(--gold);
}

/* ── Footer ───────────────────────────────────────────────── */
.footer {
  background: #080808;
  border-top: 1px solid rgba(201,164,58,0.12);
}
.footer-logo {
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: 0.15em;
}
.footer-link {
  color: var(--gray-500);
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 0.2s;
  display: block;
  padding: 0.2rem 0;
}
.footer-link:hover { color: var(--gold); }
.footer-social {
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  border: 1px solid rgba(201,164,58,0.2);
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-500);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  cursor: pointer;
  text-decoration: none;
}
.footer-social:hover {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(201,164,58,0.1);
}
.footer-divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.05);
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: var(--black);
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
  letter-spacing: 0.02em;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(201,164,58,0.4);
}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 2rem;
  background: transparent;
  color: var(--gold);
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 9999px;
  border: 1.5px solid var(--gold);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.btn-secondary:hover {
  background: rgba(201,164,58,0.1);
  box-shadow: 0 0 15px rgba(201,164,58,0.2);
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: transparent;
  color: var(--gray-600);
  font-size: 0.875rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s, background 0.2s;
}
.btn-ghost:hover {
  color: var(--white);
  background: rgba(255,255,255,0.07);
}

/* ── Search Results Page ──────────────────────────────────── */
.results-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2rem;
  align-items: start;
  min-width: 0;
  max-width: 100%;
}
.results-layout > * { min-width: 0; }
@media (max-width: 1024px) {
  .results-layout {
    grid-template-columns: 1fr;
  }
}
.filter-sidebar {
  position: sticky;
  top: 5rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(201,164,58,0.1);
  border-radius: 1.25rem;
  padding: 1.5rem;
}
.filter-group { margin-bottom: 1.5rem; }
.filter-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.75rem;
  display: block;
}
.filter-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--gray-600);
  transition: color 0.2s;
}
.filter-checkbox:hover { color: var(--white); }
.filter-checkbox input[type="checkbox"] {
  accent-color: var(--gold);
  width: 1rem; height: 1rem;
}
.price-range-input {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 9999px;
  background: linear-gradient(to right, var(--gold) 0%, var(--gold) 60%, rgba(255,255,255,0.1) 60%);
  outline: none;
}
.price-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--black);
  box-shadow: 0 0 8px rgba(201,164,58,0.4);
  cursor: pointer;
}

/* Best price highlight */
.best-price-card {
  background: linear-gradient(135deg, rgba(201,164,58,0.08), rgba(201,164,58,0.03));
  border: 1.5px solid rgba(201,164,58,0.4);
  border-radius: 1.25rem;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}
.best-price-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, var(--gold-dark), var(--gold), var(--gold-light));
}
.best-price-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--gold);
  color: var(--black);
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

/* Result list item */
.result-item {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: border-color 0.3s, background 0.3s, transform 0.2s;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.result-item:hover {
  border-color: rgba(201,164,58,0.25);
  background: rgba(201,164,58,0.03);
  transform: translateX(4px);
}
.result-item-img {
  width: 5rem; height: 5rem;
  object-fit: cover;
  border-radius: 0.75rem;
  background: rgba(255,255,255,0.05);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
.result-item-body { flex: 1; min-width: 0; }
.result-item-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--white);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.35rem;
  /* `anywhere` et non `break-word` : seul `anywhere` fait entrer les points de
     cesure dans le calcul de la largeur min-content. Sans lui, la largeur
     minimale du titre reste celle de son plus long mot, le conteneur ne peut
     pas retrecir et un titre long pousse la card hors de l'ecran au lieu de
     passer a la ligne. */
  overflow-wrap: anywhere;
  min-width: 0;
}
.result-item-meta {
  font-size: 0.75rem;
  color: var(--gray-500);
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.result-item-price-col {
  text-align: right;
  flex-shrink: 0;
}
.result-item-price {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--gold);
}
.result-item-store {
  font-size: 0.7rem;
  color: var(--gray-500);
  margin-top: 0.25rem;
}
.result-posted-at {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.68rem;
  color: #6b7280;
  margin-top: 0.35rem;
}
.source-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.source-jumia    { background: rgba(249,115,22,0.15); color: #f97316; }
.source-kilimall { background: rgba(34,197,94,0.15);  color: #22c55e; }
.source-carrefour{ background: rgba(59,130,246,0.15); color: #3b82f6; }
.source-default  { background: rgba(201,164,58,0.15); color: var(--gold); }

/* Sort bar */
.sort-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.sort-btn {
  padding: 0.4rem 1rem;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.1);
  background: transparent;
  color: var(--gray-600);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.sort-btn.active, .sort-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(201,164,58,0.08);
}
.sort-select {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--white);
  border-radius: 0.5rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem;
  outline: none;
  cursor: pointer;
}
.sort-select:focus { border-color: var(--gold); }

/* ── Scroll-to-top ────────────────────────────────────────── */
#scroll-top {
  position: fixed;
  bottom: 2rem; right: 2rem;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: var(--gold);
  color: var(--black);
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(201,164,58,0.4);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s, transform 0.3s;
  z-index: 999;
}
#scroll-top.visible { opacity: 1; transform: translateY(0); }
#scroll-top:hover   { transform: translateY(-2px); }

/* ── Notification Toast ───────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 2rem; left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: rgba(0,0,0,0.9);
  border: 1px solid rgba(201,164,58,0.3);
  border-radius: 0.75rem;
  padding: 0.75rem 1.5rem;
  color: var(--white);
  font-size: 0.875rem;
  z-index: 9999;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
  white-space: nowrap;
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* ── Mobile menu ──────────────────────────────────────────── */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.98);
  z-index: 2000;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}
.mobile-menu.open { display: flex; }
.mobile-menu-link {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--white);
  text-decoration: none;
  transition: color 0.2s;
  letter-spacing: 0.05em;
}
.mobile-menu-link:hover { color: var(--gold); }

/* ── AOS overrides ────────────────────────────────────────── */
[data-aos] { pointer-events: none; }
[data-aos].aos-animate { pointer-events: auto; }

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb {
  background: rgba(201,164,58,0.3);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ── Selection ────────────────────────────────────────────── */
::selection { background: rgba(201,164,58,0.3); color: var(--white); }

/* ── Best price card — corps responsive (mobile-first) ───────── */
/* Base : layout empilé (mobile) */
.bpc-inner {
  display: flex; align-items: flex-start; gap: .75rem; flex-wrap: wrap;
}
/* overflow-wrap est herite : le poser ici protege le titre et le snippet. */
.bpc-info { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
.bpc-price-col {
  width: 100%; text-align: left;
  padding-top: .75rem;
  border-top: 1px solid rgba(255,255,255,.06);
  /* `stretch` et non `center` : si un libelle passe sur deux lignes, les deux
     boutons gardent la meme hauteur au lieu de se desaligner. */
  display: flex; align-items: stretch; gap: .6rem; flex-wrap: wrap;
}
/* Le prix occupe sa propre ligne sur mobile : sinon il est comprimé par les
   boutons (min-width 120px) et le nombre se coupe en plein milieu. */
.bpc-price { flex: 1 1 100%; min-width: 0; margin-bottom: .15rem; }
.bpc-price .text-3xl {
  font-size: clamp(1.25rem, 6vw, 1.875rem);
  overflow-wrap: normal; word-break: normal;
}

/* Sur un ecran etroit, le titre d'une annonce Marketplace — souvent une phrase
   entiere — montait a sept lignes et repoussait le prix et les boutons sous la
   ligne de flottaison. Une carte « meilleur prix » dont on ne voit ni le prix
   ni l'action ne sert a rien. Trois lignes suffisent a reconnaitre le produit ;
   le titre complet reste sur la page de l'offre. */
@media (max-width: 560px) {
  .bpc-titre {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
    overflow: hidden;
  }
}

/* Mobile : les deux actions se partagent la ligne a parts egales, memes bords
   et meme hauteur. Auparavant « Voir l'offre » prenait tout l'espace restant
   et « Partager », en flex-shrink:0, finissait colle a droite dans une largeur
   differente — deux boutons sans aucun bord commun. */
.bpc-price-col .btn-primary,
.bpc-price-col .wa-share-btn {
  flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center;
  /* Indispensable ici : flex-basis:0 repartit l'espace du CONTENU, pas de la
     boite. Le bouton d'offre porte 64 px de padding horizontal contre 27 px
     pour le partage, et les deux ressortaient a 175 px et 140 px malgre un
     flex identique — soit exactement l'ecart des paddings. */
  box-sizing: border-box;
}

/* Sous 400 px, « Voir l'offre » passait sur deux lignes dans sa moitie de
   largeur et depassait le partage de 27 px de hauteur. On resserre le padding
   plutot que de reduire le libelle. */
@media (max-width: 400px) {
  .bpc-price-col .btn-primary { padding-left: .9rem; padding-right: .9rem; }
}

/* Le partage reste une action secondaire : fond translucide contre le degrade
   plein de l'offre. Mais il cesse d'etre minuscule — a 5 px de padding et
   .72rem il avait l'air d'un reste, pas d'un choix. */
.bpc-price-col .wa-share-btn {
  padding: .5rem .85rem; font-size: .78rem;
  /* Meme rayon que .btn-primary (9999px) : cote a cote, une pilule et un
     rectangle arrondi se lisaient comme deux composants etrangers l'un a
     l'autre. La hierarchie doit venir du remplissage — degrade plein contre
     fond translucide — pas de la forme. */
  border-radius: 9999px;
}

/* Large (≥ 560px) : layout horizontal, colonne de droite en pile alignee */
@media (min-width: 560px) {
  .bpc-inner { align-items: center; gap: 1rem; flex-wrap: nowrap; }

  /* `display: block` laissait chaque bouton prendre sa largeur naturelle :
     le gros bouton d'offre d'un cote, la petite pastille verte de l'autre,
     decalee et sans alignement. En colonne etiree, les deux partagent la meme
     largeur et les memes bords — le prix, l'action, puis le partage. */
  .bpc-price-col {
    width: auto; text-align: right; padding-top: 0; border-top: none;
    display: flex; flex-direction: column; align-items: stretch;
    gap: .5rem;
    max-width: 45%; min-width: 11rem;
  }
  .bpc-price { flex: none; margin-bottom: .1rem; }
  .bpc-price .text-3xl { font-size: 1.875rem; overflow-wrap: normal; }

  /* Les marges utilitaires du gabarit (mt-2) feraient double emploi avec le
     gap de la colonne et casseraient le rythme vertical. */
  .bpc-price-col .btn-primary,
  .bpc-price-col .wa-share-btn { flex: none; width: 100%; margin-top: 0; }
}

/* Desktop : les boutons favori/alerte sont ancres au flanc droit de la card,
   il faut leur reserver la place. Sur mobile ils passent en pied de card, d'ou
   le scope min-width (voir le bloc @media max-width:559px). */
/* Les 5,5 rem reserves aux boutons ancres au flanc droit n_ont plus d_objet :
   les actions vivent desormais dans le pied de carte, en flux normal. Garder
   ce padding laissait une bande vide a droite du prix. */

/* ─────────────────────────────────────────────────────────────────────────
   Carte de resultat — regles PARTAGEES

   Elles vivaient dans le <style> de search_results.html, si bien que la page
   categorie rendait ses resultats avec une tout autre structure : carte-lien,
   actions en position absolue, source affichee deux fois. Deux implementations
   du meme composant, qui divergeaient a chaque retouche.
   ───────────────────────────────────────────────────────────────────────── */
/* Pastilles « etat » et « lieu » sur la carte. Volontairement discretes : ce
   sont des reperes, le prix et le nom restent ce qu_on lit en premier. Elles
   n_apparaissent que lorsque l_information existe. */
.meta-pastille {
  display: inline-flex; align-items: center;
  font-size: .62rem; font-weight: 700; letter-spacing: .02em;
  padding: .12rem .45rem; border-radius: .35rem;
  background: rgba(255,255,255,.055); color: #9ca3af;
  border: 1px solid rgba(255,255,255,.07);
  white-space: nowrap;
}

/* La carte n_est plus un <a> mais un <div> : du contenu interactif ne peut pas
   vivre dans un lien, et les trois actions devaient rejoindre la colonne de
   prix. Le lien est descendu a l_interieur, en `display: contents` — il perd
   sa boite, la mise en page reste donc exactement celle d_avant, et l_image
   comme le titre restent cliquables. */
.result-item-lien {
  display: contents; color: inherit; text-decoration: none;
}
.result-item-price-bloc { text-decoration: none; display: block; }
.result-item-old-price {
  font-size: .7rem; color: #888; text-decoration: line-through;
}

/* Les actions passent sous le prix : elles qualifient l_offre, pas le pied de
   carte. Alignees a droite comme lui, memes tailles, meme ecart.

   Sous 560 px la carte devient une grille et la colonne passe en
   `display: contents` (voir comparo.css) : la regle est donc bornee, sinon
   elle l_ecraserait — ce <style> est parse APRES comparo.css et l_emporte a
   specificite egale. */
@media (min-width: 560px) {
  .result-item-price-col {
    display: flex; flex-direction: column; align-items: flex-end; gap: .45rem;
  }
}
.result-actions {
  display: flex; align-items: center; gap: .3rem; flex-shrink: 0;
}
.result-actions .fav-btn,
.result-actions .result-alert-btn,
.result-actions .share-result-btn {
  position: static; top: auto; right: auto; bottom: auto; transform: none;
  width: 28px; height: 28px; border-radius: .45rem;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.result-actions .fav-btn:hover,
.result-actions .result-alert-btn:hover,
.result-actions .share-result-btn:hover { transform: none; }

/* Bouton partage natif (result-item-wrapper) */
.share-result-btn {
  position: absolute; bottom: 10px; right: 0.75rem;
}

/* ── Pages connexion / inscription ──────────────────────────
   Remplace « pt-28 pb-20 min-h-screen » qui se contredisait : min-h-screen
   centrait deja la carte dans la hauteur de l_ecran, et les 112 px de padding
   l_enfoncaient en plus. Le calcul ignorait par ailleurs la barre fixe, hors
   flux, qui recouvre le haut de la page — la carte etait donc centree dans une
   zone plus grande que la zone reellement visible. */
.auth-page {
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1rem 3rem;
  /* 70px de barre + 46px de sous-navigation categories */
  min-height: calc(100vh - 116px);
}
@media (max-width: 767px) {
  /* La sous-navigation est masquee et body porte deja 56px en haut, 70px en
     bas pour la barre du bas. On abandonne le centrage : sur un ecran etroit
     la carte depasse souvent la hauteur disponible, et la centrer de force
     masquerait son sommet. */
  .auth-page {
    align-items: flex-start;
    min-height: 0;
    padding: 1.25rem 1rem 2rem;
  }
}

/* ── En-tete d_accueil : remonter la barre de recherche ──────
   Le sous-titre porte mb-7 (1,75rem) en toutes tailles. Sur un telephone ou
   l_en-tete occupe deja tout l_ecran, cet espace repousse la barre de
   recherche sous la ligne de flottaison — c_est pourtant l_action principale
   de la page. On le reduit progressivement. */
@media (max-width: 900px) {
  .hero-sous { margin-bottom: 1.25rem !important; }
}
@media (max-width: 559px) {
  .hero-sous { margin-bottom: .9rem !important; font-size: .92rem; }
  .hero-title { letter-spacing: -0.025em; }
}

/* ── Responsive helpers ───────────────────────────────────── */
@media (max-width: 768px) {
  .stats-row       { gap: 1.25rem; }
  .stat-number     { font-size: 1.4rem; }
  .hero-title      { font-size: clamp(2rem, 10vw, 3.5rem); }
  .search-city-wrapper { display: none; }
}

/* ── Mobile (<560px) ──────────────────────────────────────── */
@media (max-width: 559px) {

  /* ─ Search bar ─ (flag-only géré par JS dans le template) */
  .search-btn-hero { padding: 0.65rem 0.9rem; }

  /* ─ Best price card ─ */
  .best-price-card { padding: 1rem; }

  /* ─ Result items : card empilée (image | nom → prix → source) ─
     display:contents sur le body remonte ses enfants au niveau de la grille,
     ce qui permet d'intercaler le prix entre le nom et la source sans toucher
     au HTML (le prix reste un frère du body dans le DOM). */
  .result-item-wrapper .result-item {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    column-gap: .75rem;
    row-gap: .25rem;
    align-items: start;
    padding: .875rem;
  }
  /* Cards DB : pas de ligne "Évolution du prix" sous la card, il faut donc
     réserver soi-même la hauteur de la rangée d'actions. */
  .result-item-wrapper .result-item:not(.live-result) { padding-bottom: 2.4rem; }
  .result-item-body { display: contents; }
  .result-item-img {
    width: 3.25rem !important; height: 3.25rem !important;
    font-size: 1.4rem !important; border-radius: .5rem !important;
    /* span 3 = les 3 lignes toujours présentes (nom, prix, source) */
    grid-column: 1; grid-row: 1 / span 3; align-self: start;
  }
  .result-item-name,
  .result-item-price-col,
  .result-item-meta,
  .result-item-specs,
  .result-posted-at { grid-column: 2; }
  .result-item-name      { order: 1; font-size: .85rem; margin-bottom: 0; }
  /* `display: contents` remonte le prix ET les actions au niveau de la grille :
     le prix garde sa place entre le nom et la source, les actions filent en
     derniere ligne. Sans cela, elles resteraient collees sous le prix, avant
     le badge de source. */
  /* `display: contents` remonte le prix ET les actions au niveau de la grille.
     Sans lui, la colonne redevenait un seul element, perdait son `order` et
     remontait avant le titre : on lisait le prix et les boutons AVANT de
     savoir de quel produit il s_agissait. */
  .result-item-price-col { display: contents; }
  .result-item-price-bloc {
    grid-column: 2; order: 2; text-align: left; padding-right: 0;
  }
  .result-item-price-col .result-actions {
    grid-column: 2; order: 6; justify-content: flex-start; margin-top: .15rem;
  }
  .result-item-meta      { order: 3; }
  .result-item-specs     { order: 4; margin-top: 0 !important; }
  .result-posted-at      { order: 5; margin-top: 0; }
  .result-item-price { font-size: 1.05rem; white-space: nowrap; }
  /* ─ Actions (favori / alerte / partage) : rangée compacte en pied de card ─
     Les 3 boutons quittent le flanc droit (où ils volaient ~52px à la colonne
     texte) pour s'aligner sur la ligne "Évolution du prix".
     Selecteurs scopes sous .result-item-wrapper : search_results.html redefinit
     ces boutons dans un <style> inline, parse apres ce fichier. A specificite
     egale il gagnerait, donc on passe volontairement a (0,2,0). */
  /* Les ancrages au pixel pres (right: 3.9rem, 2.15rem, .4rem) ont disparu
     avec le positionnement absolu : les trois actions forment desormais une
     ligne flex dans le pied de carte, et leur espacement vient du `gap`.
     Rien a redefinir ici — les 28 px conviennent aussi sur petit ecran, et
     c_est deja la limite basse confortable pour une cible tactile.
     (Une redefinition de taille serait d_ailleurs restee sans effet : le
     <style> de search_results.html est parse apres ce fichier et l_emporte
     a specificite egale, comme l_explique le commentaire plus haut.) */
  .result-actions { gap: .25rem; }
  .result-item-wrapper .fav-btn svg,
  .result-item-wrapper .result-alert-btn svg,
  .result-item-wrapper .share-result-btn svg { width: 12px; height: 12px; }

  /* ─ Sort bar ─ */
  .sort-bar { gap: .35rem; }
  .sort-btn { padding: .3rem .65rem; font-size: .74rem; }

  /* ─ Hist btn row — aligne sous la colonne texte, et laisse la place aux
     3 boutons d'action ancrés à droite (~5.4rem). Scope sous le wrapper pour
     la meme raison que les boutons ci-dessus. ─ */
  .result-item-wrapper .hist-btn-row {
    padding-left: calc(.875rem + 3.25rem + .75rem);
    padding-right: .75rem;
  }

  /* ─ Anti-overflow ─ */
  #results-container { width: 100%; min-width: 0; }
  .result-item-wrapper { max-width: 100%; }

  /* ─ Scroll-to-top ─ */
  #scroll-top { bottom: 5rem; right: 1rem; width: 2.25rem; height: 2.25rem; }
}

/* ── Tablette (640–1023px) ────────────────────────────────── */
@media (min-width: 640px) and (max-width: 1023px) {
  .result-item-wrapper .result-item { padding-right: 4.5rem; }
  .result-item-img { width: 4rem !important; height: 4rem !important; }
  .result-item-price { font-size: 1.05rem; }
  .best-price-card { padding: 1.25rem; }
  .bpc-inner { gap: .875rem; }
}