/* VARIABLES */
:root{
  --mx-blue:#0066cc;
  --mx-yellow:#ffb400;
  --muted:#666;
  --bg:#fafafa;
  --card:#fff;
  --radius:10px;
}

/* RESET */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,system-ui,Arial,sans-serif;background:var(--bg);color:#111;line-height:1.5}

/* HEADER FIXE */
.mx-header{
  background:var(--card);
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:1000;
  border-bottom:1px solid #eaeaea;
}
.mx-top{display:flex;align-items:center;gap:12px;padding:10px 16px;flex-wrap:wrap}
.mx-left{display:flex;align-items:center;gap:10px}
.mx-hamburger{padding:8px;border-radius:8px;border:0;background:#f3f4f6;cursor:pointer}
.mx-logo{font-weight:800;color:var(--mx-blue);font-size:1.2rem}
.mx-search{display:flex;align-items:center;gap:8px;flex:1;max-width:800px}
.mx-search input{flex:1;padding:10px;border-radius:8px;border:1px solid #e8eef6}
.mx-search select{padding:8px;border-radius:8px;border:1px solid #e8eef6}
.mx-search button{padding:10px 12px;border-radius:8px;border:0;background:var(--mx-blue);color:#fff;cursor:pointer}
.mx-right{display:flex;align-items:center;gap:8px}
.mx-cart{background:#fff;border:1px solid #e8eef6;padding:8px;border-radius:8px;cursor:pointer}
#cartCount{background:var(--mx-yellow);padding:2px 7px;border-radius:999px;margin-left:6px;font-weight:700}

/* NAVIGATION */
.mx-nav{display:flex;gap:10px;padding:8px 16px;background:linear-gradient(180deg,#fff,#fbfdff);border-top:1px solid #f5f7fb;flex-wrap:wrap}
.nav-link{background:none;border:0;padding:8px 10px;border-radius:8px;cursor:pointer;color:var(--muted)}
.nav-link:hover{background:#f3f7fb}

/* MAIN CONTENT */
.mx-main{
  max-width:1200px;
  margin:140px auto 30px; /* 140px pour header fixe */
  padding:0 14px;
}
.mx-hero{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:18px;background:linear-gradient(90deg,#fff,#f8fbff);border-radius:12px;margin-bottom:16px;flex-wrap:wrap}
.quick-filters .qf{background:var(--mx-yellow);border:0;padding:8px 12px;border-radius:8px;cursor:pointer;color:#111;margin-left:6px}

/* SECTION TITRES */
.mx-section{margin:30px 0}
.mx-section h3{margin-bottom:12px;color:var(--mx-blue)}

/* GRID PRODUITS */
.mx-grid{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(2,1fr); /* mobile par défaut 2 colonnes */
}
.mx-card{background:var(--card);border-radius:10px;padding:12px;border:1px solid #eef6fb;position:relative;display:flex;flex-direction:column}
.mx-card img{width:100%;height:160px;object-fit:cover;border-radius:8px}
.mx-card h4{margin:8px 0 4px;font-size:1rem}
.mx-card p{margin:0;color:var(--muted);font-size:0.95rem}
.meta{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.price{font-weight:800;color:var(--mx-blue)}
.badge{position:absolute;top:12px;left:12px;padding:6px 8px;border-radius:8px;color:#fff;font-size:0.78rem}
.badge.promo{background:#e74c3c}
.badge.top{background:#f39c12}
.badge.best{background:#27ae60}

/* CARROUSELS */
.carousel-container{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
}
.carousel-track{
  display:flex;
  overflow-x:auto;
  scroll-behavior:smooth;
  gap:14px;
  padding:10px 0;
}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-btn{
  background:var(--mx-blue);
  color:#fff;
  border:none;
  font-size:1.5rem;
  padding:8px 12px;
  cursor:pointer;
  border-radius:50%;
  z-index:10;
}
.carousel-btn.left{position:absolute;left:0;top:50%;transform:translateY(-50%)}
.carousel-btn.right{position:absolute;right:0;top:50%;transform:translateY(-50%)}
.carousel-track .mx-card{
  flex:0 0 200px;
  display:flex;
  flex-direction:column;
}
.carousel-track .mx-card img{height:140px;object-fit:cover;border-radius:8px;margin-bottom:6px}
.carousel-track .mx-card h4{font-size:0.95rem;margin-bottom:4px}
.carousel-track .mx-card p{font-size:0.85rem;color:var(--muted);margin-bottom:6px}
.carousel-track .mx-card .price{font-weight:700;color:var(--mx-blue);margin-bottom:6px}
.carousel-track .mx-card button{padding:6px 10px;border:0;border-radius:6px;background:var(--mx-yellow);color:#111;cursor:pointer}

/* CHECKOUT */
.mx-checkout{display:flex;gap:18px;flex-wrap:wrap}
.checkout-side{width:100%;max-width:300px;background:var(--card);padding:12px;border-radius:10px;border:1px solid #eef6fb}

/* CART MODAL */
.mx-cartmodal{position:fixed;inset:0;display:none}
.mx-cartmodal[aria-hidden="false"]{display:block}
.cart-back,.drawer-back{position:fixed;inset:0;background:rgba(0,0,0,0.4)}
.cart-panel{position:fixed;right:0;top:0;height:100%;width:360px;background:var(--card);box-shadow:-14px 0 40px rgba(10,20,40,0.12);display:flex;flex-direction:column}
.cart-head{display:flex;justify-content:space-between;align-items:center;padding:12px;border-bottom:1px solid #f3f6f9}
.cart-items{padding:12px;overflow:auto;flex:1}
.cart-items .row{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px dashed #f1f6fb}

/* DRAWER MOBILE */
.mx-drawer{position:fixed;inset:0;display:none}
.mx-drawer[aria-hidden="false"]{display:block}
.drawer-panel{position:fixed;left:0;top:0;height:100%;width:300px;background:var(--card);box-shadow:8px 0 30px rgba(10,20,40,0.08);display:flex;flex-direction:column}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:12px;border-bottom:1px solid #f0f4f8}
.drawer-body{padding:12px;display:flex;flex-direction:column;gap:8px}
.drawer-link{padding:10px;border-radius:8px;border:0;background:none;text-align:left}

/* BUTTONS */
.btn-primary{background:var(--mx-blue);color:#fff;padding:10px;border-radius:8px;border:0;cursor:pointer}
.btn-secondary{background:#eef6fb;color:var(--mx-blue);padding:8px;border-radius:8px;border:0;cursor:pointer}

/* FOOTER */
.mx-footer{padding:18px;text-align:center;color:var(--muted);margin-top:30px}

/* RESPONSIVE GRIDS */
@media (min-width:600px){ /* tablette */
  .mx-grid{grid-template-columns:repeat(3,1fr);}
  .carousel-track .mx-card{flex:0 0 220px;}
}
@media (min-width:900px){ /* ordinateur */
  .mx-grid{grid-template-columns:repeat(4,1fr);}
  .carousel-track .mx-card{flex:0 0 240px;}
}
@media(max-width:500px){
  .mx-search input{flex:1}
  .mx-hero{flex-direction:column;align-items:flex-start}
  .catalog-controls{flex-direction:column;align-items:flex-start;gap:6px}
}