/* ═══════════════════════════════════════════════════════
   MECA·DZ — Feuille de style principale
   ═══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --bg:        #080A0D;
  --bg2:       #0F1318;
  --bg3:       #161B22;
  --border:    #1E252E;
  --border2:   #2A3441;
  --orange:    #F97316;
  --orange2:   #FB923C;
  --orange-d:  rgba(249,115,22,.14);
  --green:     #22C55E;
  --red:       #EF4444;
  --blue:      #3B82F6;
  --yellow:    #EAB308;
  --purple:    #A855F7;
  --text:      #E2E8F0;
  --text2:     #94A3B8;
  --muted:     #64748B;
  --shadow:    0 4px 24px rgba(0,0,0,.5);
  --radius:    10px;
  --trans:     .18s ease;
  --font:      'DM Sans', sans-serif;
  --font-head: 'Rajdhani', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { font-size:16px; scroll-behavior:smooth }
body { background:var(--bg); color:var(--text); font-family:var(--font); line-height:1.6; min-height:100vh }
a { color:var(--orange); text-decoration:none; transition:color var(--trans) }
a:hover { color:var(--orange2) }
img { max-width:100%; height:auto; display:block }
::-webkit-scrollbar { width:6px; height:6px }
::-webkit-scrollbar-track { background:transparent }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:3px }
::-webkit-scrollbar-thumb:hover { background:var(--muted) }

/* ── LAYOUT ── */
.container { width:min(1280px,100%); margin-inline:auto; padding-inline:20px }
.wrap-lg { max-width:1100px; margin-inline:auto; padding-inline:20px }
.grid { display:grid }
.g2 { grid-template-columns:1fr 1fr; gap:20px }
.g3 { grid-template-columns:repeat(3,1fr); gap:20px }
.g4 { grid-template-columns:repeat(4,1fr); gap:18px }
.flex { display:flex }
.flex-col { flex-direction:column }
.items-center { align-items:center }
.justify-between { justify-content:space-between }
.gap-2 { gap:8px } .gap-3 { gap:12px } .gap-4 { gap:16px } .gap-6 { gap:24px }
.mt-2 { margin-top:8px } .mt-3 { margin-top:12px } .mt-4 { margin-top:16px }
.mt-6 { margin-top:24px } .mt-8 { margin-top:32px } .mb-2 { margin-bottom:8px }
.mb-4 { margin-bottom:16px } .mb-6 { margin-bottom:24px }
.p-4 { padding:16px } .p-6 { padding:24px }
.w-full { width:100% } .text-center { text-align:center } .text-right { text-align:right }

/* ── TYPOGRAPHY ── */
h1,h2,h3,h4 { font-family:var(--font-head); font-weight:700; line-height:1.2 }
h1 { font-size:clamp(28px,5vw,48px) }
h2 { font-size:clamp(22px,4vw,36px) }
h3 { font-size:20px }
h4 { font-size:16px }
.text-muted { color:var(--muted) }
.text-orange { color:var(--orange) }
.text-green { color:var(--green) }
.text-red { color:var(--red) }
.font-mono { font-family:var(--font-mono) }

/* ── CARD ── */
.card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius) }
.card-body { padding:20px }
.card-header { padding:14px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between }
.card-title { font-family:var(--font-head); font-size:14px; font-weight:700; letter-spacing:.5px; text-transform:uppercase }

/* ── BADGE ── */
.badge { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:20px; font-size:11px; font-weight:700; letter-spacing:.5px; white-space:nowrap }
.badge-orange { background:var(--orange-d); color:var(--orange); border:1px solid rgba(249,115,22,.3) }
.badge-green  { background:rgba(34,197,94,.1); color:var(--green); border:1px solid rgba(34,197,94,.3) }
.badge-red    { background:rgba(239,68,68,.1); color:var(--red); border:1px solid rgba(239,68,68,.3) }
.badge-blue   { background:rgba(59,130,246,.1); color:var(--blue); border:1px solid rgba(59,130,246,.3) }
.badge-yellow { background:rgba(234,179,8,.1); color:var(--yellow); border:1px solid rgba(234,179,8,.3) }
.badge-purple { background:rgba(168,85,247,.1); color:var(--purple); border:1px solid rgba(168,85,247,.3) }
.badge-muted  { background:var(--bg3); color:var(--muted); border:1px solid var(--border) }

/* ── BUTTONS ── */
.btn { display:inline-flex; align-items:center; gap:7px; padding:10px 20px; border-radius:8px; font-family:var(--font); font-size:13px; font-weight:600; cursor:pointer; border:none; transition:all var(--trans); white-space:nowrap; text-decoration:none; line-height:1 }
.btn-lg { padding:14px 28px; font-size:15px }
.btn-sm { padding:6px 14px; font-size:12px; border-radius:6px }
.btn-xs { padding:4px 10px; font-size:11px; border-radius:5px }
.btn-orange { background:var(--orange); color:#000; font-weight:700 }
.btn-orange:hover { background:var(--orange2); color:#000; transform:translateY(-1px) }
.btn-outline { background:transparent; color:var(--text2); border:1px solid var(--border) }
.btn-outline:hover { color:var(--text); border-color:var(--muted) }
.btn-ghost { background:transparent; color:var(--muted); padding:8px }
.btn-ghost:hover { color:var(--text); background:var(--bg3) }
.btn-red { background:rgba(239,68,68,.12); color:var(--red); border:1px solid rgba(239,68,68,.3) }
.btn-red:hover { background:rgba(239,68,68,.22) }
.btn-green { background:rgba(34,197,94,.12); color:var(--green); border:1px solid rgba(34,197,94,.3) }
.btn-green:hover { background:rgba(34,197,94,.22) }
.btn-block { width:100%; justify-content:center }
.btn-group { display:flex; gap:8px }

/* ── FORMS ── */
.form-group { display:flex; flex-direction:column; gap:6px; margin-bottom:16px }
.form-grid { display:grid; gap:16px }
.form-grid-2 { grid-template-columns:1fr 1fr }
.form-grid-3 { grid-template-columns:1fr 1fr 1fr }
label { font-size:12px; font-weight:600; color:var(--text2); text-transform:uppercase; letter-spacing:.5px }
label.required::after { content:' *'; color:var(--red) }
input,select,textarea {
  background:var(--bg3); border:1px solid var(--border); border-radius:8px;
  padding:10px 14px; color:var(--text); font-family:var(--font); font-size:14px;
  outline:none; transition:border-color var(--trans),box-shadow var(--trans); width:100%;
}
input:focus,select:focus,textarea:focus {
  border-color:var(--orange); box-shadow:0 0 0 3px rgba(249,115,22,.15)
}
input::placeholder { color:var(--muted) }
textarea { resize:vertical; min-height:100px }
select option { background:var(--bg3); color:var(--text) }
.input-group { position:relative }
.input-group input { padding-left:40px }
.input-group .icon { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:16px }
.form-hint { font-size:11px; color:var(--muted); margin-top:4px }
.form-error { font-size:12px; color:var(--red); margin-top:4px }

/* ── TOGGLE ── */
.toggle-wrap { display:flex; align-items:center; gap:10px; cursor:pointer }
.toggle { position:relative; width:40px; height:22px; flex-shrink:0 }
.toggle input { opacity:0; width:0; height:0; position:absolute }
.toggle-slider { position:absolute; inset:0; background:var(--bg3); border:1px solid var(--border); border-radius:22px; transition:var(--trans) }
.toggle-slider::after { content:''; position:absolute; width:16px; height:16px; background:var(--muted); border-radius:50%; top:2px; left:2px; transition:var(--trans) }
.toggle input:checked + .toggle-slider { background:var(--orange); border-color:var(--orange) }
.toggle input:checked + .toggle-slider::after { background:#000; left:20px }
.toggle-label { font-size:13px; font-weight:500; color:var(--text2) }

/* ── UPLOAD ZONE ── */
.upload-zone { border:2px dashed var(--border2); border-radius:10px; padding:28px 20px; text-align:center; cursor:pointer; transition:all var(--trans); background:var(--bg3) }
.upload-zone:hover,.upload-zone.drag { border-color:var(--orange); background:var(--orange-d) }
.upload-icon { font-size:32px; margin-bottom:8px }
.upload-text { font-size:14px; font-weight:600; color:var(--text2) }
.upload-sub { font-size:12px; color:var(--muted); margin-top:4px }
.upload-zone input[type=file] { display:none }

/* ── TABLE ── */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch }
table { width:100%; border-collapse:collapse; font-size:13px }
thead th { padding:10px 14px; text-align:left; font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--border); background:rgba(255,255,255,.02); white-space:nowrap }
tbody td { padding:13px 14px; border-bottom:1px solid rgba(255,255,255,.04); vertical-align:middle }
tbody tr:last-child td { border-bottom:none }
tbody tr:hover td { background:rgba(255,255,255,.02) }

/* ── ALERT / FLASH ── */
.alert { padding:13px 18px; border-radius:8px; font-size:13px; display:flex; align-items:flex-start; gap:10px; margin-bottom:16px; line-height:1.5 }
.alert-success { background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.3); color:var(--green) }
.alert-error   { background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.3); color:var(--red) }
.alert-warning { background:rgba(234,179,8,.1); border:1px solid rgba(234,179,8,.3); color:var(--yellow) }
.alert-info    { background:rgba(59,130,246,.1); border:1px solid rgba(59,130,246,.3); color:var(--blue) }
.alert-orange  { background:var(--orange-d); border:1px solid rgba(249,115,22,.3); color:var(--orange2) }

/* ── PROGRESS BAR ── */
.progress { height:6px; background:var(--border); border-radius:4px; overflow:hidden }
.progress-fill { height:100%; border-radius:4px; background:var(--orange); transition:width .4s }

/* ── STAT CARD ── */
.stat-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:20px; position:relative; overflow:hidden }
.stat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--accent,var(--orange)) }
.stat-label { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:2px; font-weight:700 }
.stat-value { font-family:var(--font-head); font-size:34px; font-weight:700; line-height:1.1; margin:8px 0 6px }
.stat-icon { position:absolute; right:16px; top:16px; font-size:32px; opacity:.12 }
.stat-delta { font-size:12px; display:flex; align-items:center; gap:4px }

/* ── HEADER NAVBAR ── */
.navbar { background:rgba(8,10,13,.95); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; backdrop-filter:blur(12px) }
.navbar-inner { display:flex; align-items:center; gap:24px; height:64px; padding-inline:24px }
.navbar-logo { font-family:var(--font-head); font-size:24px; font-weight:700; color:var(--orange); letter-spacing:2px; white-space:nowrap }
.navbar-logo span { color:var(--text2); font-weight:400; font-size:13px; letter-spacing:4px; display:block; margin-top:-4px }
.navbar-search { flex:1; max-width:520px }
.navbar-search input { background:var(--bg3); border-color:var(--border2); height:42px }
.navbar-actions { display:flex; align-items:center; gap:10px; margin-left:auto }
.nav-links { display:flex; align-items:center; gap:4px }
.nav-link { color:var(--text2); font-size:14px; font-weight:500; padding:8px 12px; border-radius:7px; transition:var(--trans) }
.nav-link:hover,.nav-link.active { color:var(--text); background:var(--bg3) }

/* ── PRODUCT CARD ── */
.product-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:all var(--trans); cursor:pointer }
.product-card:hover { border-color:var(--orange); transform:translateY(-3px); box-shadow:0 8px 32px rgba(249,115,22,.15) }
.product-card-img { aspect-ratio:1; background:var(--bg3); display:flex; align-items:center; justify-content:center; font-size:48px; position:relative; overflow:hidden }
.product-card-img img { width:100%; height:100%; object-fit:contain; padding:12px }
.product-card-body { padding:14px }
.product-card-brand { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:4px }
.product-card-title { font-size:13px; font-weight:600; line-height:1.4; margin-bottom:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.product-card-price { font-family:var(--font-head); font-size:18px; font-weight:700; color:var(--orange) }
.product-card-footer { display:flex; align-items:center; justify-content:space-between; margin-top:10px; padding-top:10px; border-top:1px solid var(--border) }

/* ── SELLER STORE ── */
.store-header { background:linear-gradient(135deg,var(--bg2),var(--bg3)); border:1px solid var(--border); border-radius:var(--radius); padding:24px; display:flex; align-items:center; gap:20px; margin-bottom:24px }
.store-logo { width:72px; height:72px; border-radius:12px; background:var(--bg3); border:2px solid var(--border2); overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:28px; flex-shrink:0 }
.store-name { font-family:var(--font-head); font-size:22px; font-weight:700 }
.store-meta { font-size:13px; color:var(--muted); margin-top:4px }
.store-stats { display:flex; gap:24px; margin-top:14px }
.store-stat-val { font-family:var(--font-head); font-size:20px; font-weight:700; color:var(--orange) }
.store-stat-lbl { font-size:11px; color:var(--muted) }

/* ── HERO ── */
.hero { background:radial-gradient(ellipse 80% 60% at 50% -10%, rgba(249,115,22,.18), transparent), var(--bg); padding:80px 0 60px; text-align:center }
.hero-title { font-family:var(--font-head); font-size:clamp(36px,7vw,72px); font-weight:700; line-height:1; margin-bottom:16px }
.hero-title span { color:var(--orange) }
.hero-sub { font-size:18px; color:var(--text2); max-width:580px; margin:0 auto 32px }
.hero-search { max-width:640px; margin:0 auto; display:flex; gap:8px }
.hero-search input { flex:1; height:52px; font-size:15px; padding:0 18px }
.hero-search button { height:52px; padding:0 24px; font-size:15px }
.hero-stats { display:flex; justify-content:center; gap:40px; margin-top:40px }
.hero-stat-num { font-family:var(--font-head); font-size:32px; font-weight:700; color:var(--orange) }
.hero-stat-lbl { font-size:13px; color:var(--muted) }

/* ── CATEGORY CARD ── */
.cat-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:20px; text-align:center; transition:all var(--trans); cursor:pointer; text-decoration:none; display:flex; flex-direction:column; align-items:center; gap:10px }
.cat-card:hover { border-color:var(--orange); transform:translateY(-2px); color:var(--text) }
.cat-icon { font-size:32px }
.cat-name { font-size:13px; font-weight:700; color:var(--text) }
.cat-count { font-size:11px; color:var(--muted) }

/* ── PAGINATION ── */
.pagination { display:flex; gap:6px; justify-content:center; margin-top:32px }
.page-btn { width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:7px; font-size:13px; font-weight:600; cursor:pointer; border:1px solid var(--border); background:var(--bg2); color:var(--text2); transition:var(--trans) }
.page-btn:hover,.page-btn.active { background:var(--orange); color:#000; border-color:var(--orange) }

/* ── FOOTER ── */
.footer { background:var(--bg2); border-top:1px solid var(--border); padding:48px 0 24px; margin-top:64px }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px }
.footer-brand { font-family:var(--font-head); font-size:20px; color:var(--orange); margin-bottom:12px }
.footer-desc { font-size:13px; color:var(--muted); line-height:1.7 }
.footer-heading { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:2px; color:var(--text2); margin-bottom:14px }
.footer-links { list-style:none; display:flex; flex-direction:column; gap:9px }
.footer-links li a { font-size:13px; color:var(--muted); transition:var(--trans) }
.footer-links li a:hover { color:var(--orange) }
.footer-bottom { border-top:1px solid var(--border); padding-top:20px; display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--muted) }

/* ── BREADCRUMB ── */
.breadcrumb { display:flex; gap:6px; align-items:center; font-size:13px; color:var(--muted); margin-bottom:20px }
.breadcrumb a { color:var(--muted) }
.breadcrumb a:hover { color:var(--orange) }
.breadcrumb span { color:var(--border2) }

/* ── FILTER SIDEBAR ── */
.filter-sidebar { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:20px; position:sticky; top:80px }
.filter-section { margin-bottom:24px }
.filter-title { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--text2); margin-bottom:12px }
.filter-option { display:flex; align-items:center; gap:9px; padding:5px 0; cursor:pointer; font-size:13px; color:var(--text2) }
.filter-option:hover { color:var(--text) }
.filter-option input[type=checkbox] { width:16px; height:16px; accent-color:var(--orange) }

/* ── CHIPS ── */
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px }
.chip { padding:5px 12px; background:var(--bg3); border:1px solid var(--border); border-radius:20px; font-size:12px; color:var(--muted); cursor:pointer; transition:var(--trans); font-weight:500 }
.chip:hover,.chip.active { background:var(--orange-d); border-color:rgba(249,115,22,.4); color:var(--orange) }

/* ── RESPONSIVE ── */
@media (max-width:768px) {
  .g2,.g3,.g4 { grid-template-columns:1fr }
  .form-grid-2,.form-grid-3 { grid-template-columns:1fr }
  .hero { padding:48px 0 40px }
  .footer-grid { grid-template-columns:1fr 1fr }
  .hero-stats { gap:20px }
  .navbar-inner { gap:12px }
  .hide-mobile { display:none }
}
@media (max-width:480px) {
  .footer-grid { grid-template-columns:1fr }
  .hero-title { font-size:36px }
}