/* ══ VARIABLES ═══════════════════════════════════════════════════ */
:root {
  --orange:    #EF7900;
  --orange-lt: #FFF3E6;
  --navy:      #0D1A8C;
  --navy-lt:   #EEF1FF;
  --dark:      #1F2937;
  --gray-bg:   #F3F4F6;
  --gray-brd:  #E5E7EB;
  --text:      #111827;
  --muted:     #6B7280;
  --green:     #10B981;
  --green-lt:  #D1FAE5;
  --red:       #EF4444;
  --nav-h:     60px;
  --card-radius: 14px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  min-height: 100%;
  background: var(--gray-bg);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--text);
}
body { padding-bottom: calc(var(--nav-h) + 24px); }

/* ══ SEARCH BAR ══════════════════════════════════════════════════ */
.search-wrap {
  padding: 14px 16px 16px;
  background: #fff;
  border-bottom: 1px solid var(--gray-brd);
  position: sticky; top: 60px; z-index: 90;
  margin-bottom: 9px;
}
.search-inner {
  display: flex; align-items: center; gap: 10px;
  background: var(--gray-bg); border: 1.5px solid var(--gray-brd);
  border-radius: 12px; padding: 10px 14px;
}
.search-inner i { color: var(--muted); font-size: 16px; flex-shrink: 0; }
.search-input {
  flex: 1; border: none; background: transparent;
  font-size: 14px; color: var(--text); outline: none;
  font-family: inherit;
}
.search-input::placeholder { color: var(--muted); }

/* ══ PAGE ════════════════════════════════════════════════════════ */
.page { padding: 0px 0 0; }

/* ══ SECTION ═════════════════════════════════════════════════════ */
.section { margin-bottom: 28px; }
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; margin-bottom: 14px;
}
.section-title {
  font-size: 17px; font-weight: 800; color: var(--text);
  display: flex; align-items: center; gap: 6px;
}
.section-title .icon { font-size: 18px; }
.section-voir-tout {
  font-size: 13px; font-weight: 700; color: var(--navy);
  text-decoration: none; white-space: nowrap;
}
.section-voir-tout:hover { text-decoration: underline; }

/* ══ FEATURED CARDS (scroll horizontal) ════════════════════════ */
.featured-scroll {
  display: flex; gap: 12px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding: 4px 16px 8px;
}
.featured-scroll::-webkit-scrollbar { display: none; }

.featured-card {
  flex-shrink: 0; width: 155px;
  background: #fff; border: 1.5px solid var(--gray-brd);
  border-radius: var(--card-radius);
  padding: 0 0 14px;
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
  text-decoration: none; color: inherit;
  position: relative; overflow: hidden;
  transition: box-shadow .15s, transform .15s;
  display: flex; flex-direction: column;
}
.featured-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.1); transform: translateY(-2px); }

.featured-img-wrap {
  width: 100%; height: 110px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--card-radius) var(--card-radius) 0 0;
  overflow: hidden; position: relative;
}
.featured-img-wrap img {
  width: 80px; height: 80px; object-fit: contain;
}
.featured-img-placeholder {
  font-size: 44px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}

.featured-body { padding: 10px 12px 0; flex: 1; }
.featured-nom  { font-size: 14px; font-weight: 800; color: var(--text); line-height: 1.25; }
.featured-desc { font-size: 11px; color: var(--muted); margin-top: 2px; }
.featured-prix {
  padding: 8px 12px 0;
  font-size: 11px; color: var(--muted);
}
.featured-prix strong { font-size: 13px; font-weight: 800; color: var(--navy); }

/* Badge coin */
.badge-chip {
  position: absolute; top: 8px; left: 8px;
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 800; letter-spacing: .2px;
  padding: 3px 9px; border-radius: 20px;
  white-space: nowrap; line-height: 1.4;
}

/* ══ GRID CARDS (4 colonnes) ════════════════════════════════════ */
.grid-scroll {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 0 16px;
}
@media (max-width: 360px) {
  .grid-scroll { grid-template-columns: repeat(2, 1fr); }
}

.grid-card {
  background: #fff; border: 1.5px solid var(--gray-brd);
  border-radius: 12px; padding: 10px 8px 10px;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  transition: box-shadow .15s, transform .15s;
  position: relative; overflow: hidden;
}
.grid-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.09); transform: translateY(-1px); }

.grid-img-wrap {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--gray-bg); overflow: hidden;
  flex-shrink: 0;
}
.grid-img-wrap img { width: 38px; height: 38px; object-fit: contain; }
.grid-img-placeholder { font-size: 26px; line-height: 1; }

.grid-nom {
  font-size: 11px; font-weight: 700; color: var(--text);
  line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.grid-desc {
  font-size: 10px; color: var(--muted); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.grid-prix {
  font-size: 10px; color: var(--muted); line-height: 1.3;
}
.grid-prix strong {
  font-size: 11px; font-weight: 800; color: var(--navy);
}

/* Badge mini (grid) */
.grid-card .badge-chip {
  position: static;
  font-size: 9px; padding: 2px 6px;
  margin-top: 2px;
}

/* ══ EMPTY STATE ════════════════════════════════════════════════ */
.empty-state {
  text-align: center; padding: 48px 24px; color: var(--muted);
}
.empty-state i { font-size: 40px; display: block; margin-bottom: 12px; opacity: .3; }
.empty-state p { font-size: 14px; line-height: 1.6; }

/* ══ TOAST ═══════════════════════════════════════════════════════ */
#toast {
  position: fixed; bottom: calc(var(--nav-h) + 16px); left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--dark); color: #fff;
  padding: 11px 20px; border-radius: 10px;
  font-size: 13px; font-weight: 600;
  opacity: 0; transition: all .25s;
  pointer-events: none; z-index: 500; white-space: nowrap;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }