:root{--bg:#0b0b0f;--panel:#111118;--gold:#d6a300;--text:#f2f2f2;--muted:#bdbdbd;--card:#161623}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.hero{text-align:center;padding:40px 10px;background:#111118}
.logo{width:110px;margin-bottom:8px;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.subtitle{color:var(--muted)}
.searchbar{display:flex;justify-content:center;gap:10px;margin:14px 0}
.searchbar input,.searchbar select{padding:12px 14px;border-radius:12px;border:1px solid #24243a;background:#161623;color:var(--text);min-width:180px}
.searchbar button{padding:12px 18px;border-radius:12px;background:var(--gold);color:#111;border:0;font-weight:700;cursor:pointer}
.container{max-width:1100px;margin:24px auto;padding:0 16px}
.category h2{margin:20px 4px 12px;font-weight:600;color:var(--gold);letter-spacing:.5px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.card{display:flex;align-items:center;gap:12px;background:linear-gradient(180deg,var(--card),#12121a);border:1px solid #24243a;border-radius:14px;padding:12px;box-shadow:0 6px 24px rgba(0,0,0,.35)}
.thumb{width:84px;height:60px;object-fit:cover;border-radius:10px;border:1px solid #2a2a40}
.item-name{margin:0;font-size:1.02rem}
.price{font-weight:800;color:#111;background:linear-gradient(90deg,#ffd36a,#d6a300);display:inline-block;padding:6px 10px;border-radius:999px}
.empty{background:#161623;border:1px dashed #313154;border-radius:14px;padding:14px;margin:20px 0;color:var(--muted)}
.footer{border-top:1px solid #24243a;margin-top:28px}
.foot-inner{max-width:1100px;margin:0 auto;padding:14px 16px}
@media (max-width:680px){.searchbar{flex-direction:column}}

/* Footer centré (de ta demande précédente) */
.footer {
  border-top: 1px solid #24243a;
  margin-top: 40px;
  background: #0b0b0f;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 25px 0;
}
.foot-inner { text-align:center; color:#ccc; font-size:.95rem; line-height:1.6; }
.foot-inner strong { color:#f2f2f2; }
.powered { display:block; margin-top:6px; font-size:.9rem; color:#d6a300; letter-spacing:.6px; }

/* Accordion catégories */
.accordion { max-width: 1100px; margin: 0 auto; }
.panel {
  background: linear-gradient(180deg, #161623, #12121a);
  border: 1px solid #24243a;
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
}
.panel > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  display: flex; align-items: center; gap: 10px;
  user-select: none;
}
.panel > summary::-webkit-details-marker { display: none; }

.caret {
  width: 10px; height: 10px; border-right: 2px solid #d6a300; border-bottom: 2px solid #d6a300;
  transform: rotate(-45deg); transition: transform .25s ease;
  margin-right: 2px;
}
.panel[open] > summary .caret { transform: rotate(45deg); }

.cat-name { font-weight: 600; letter-spacing: .4px; }
.count {
  margin-left: auto;
  font-size: .8rem;
  color: #0b0b0f;
  background: linear-gradient(90deg, #ffd36a, #d6a300);
  border-radius: 999px; padding: 2px 8px; font-weight: 700;
}

.panel-body { padding: 6px 10px 14px; }
.row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-bottom: 1px solid #24243a;
}
.row:last-child { border-bottom: 0; }

.icon { width: 36px; height: 36px; display: grid; place-items: center; }
.icon img {
  width: 32px; height: 32px; object-fit: cover; border-radius: 8px; border: 1px solid #2a2a40;
  background: #0b0b0f;
}
.emoji { font-size: 20px; filter: saturate(1.1); }

.title { font-size: 1rem; }
.price {
  font-weight: 800; color: #111;
  background: linear-gradient(90deg, #ffd36a, #d6a300);
  padding: 6px 10px; border-radius: 999px; white-space: nowrap;
}

/* Search UI cohérente avec ta v2 */
.searchbar .clear {
  display:inline-block; padding:12px 14px; border-radius:12px;
  border:1px solid #24243a; color:#bdbdbd; text-decoration:none; font-size:.9rem;
}