:root{ --acc:#e63946; --acc2:#c92a37; --bg:#f5f5f5; --card:#fff; --ink:#1d2b3a; --muted:#8a95a3; }
  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; background:var(--bg); color:var(--ink);
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; }
  header.shop-top{ background:var(--acc); color:#fff; padding:18px 20px; position:sticky; top:0; z-index:5; }
  header.shop-top h1{ margin:0; font-size:22px; }
  header.shop-top p{ margin:4px 0 0; opacity:.9; font-size:14px; }
  main{ padding:16px 16px 120px; max-width:1000px; margin:0 auto; }
  h2.cat{ font-size:18px; margin:22px 4px 12px; }
  .grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
  .card{ background:var(--card); border-radius:14px; overflow:hidden; box-shadow:0 1px 6px rgba(0,0,0,.08);
    display:flex; flex-direction:column; cursor:pointer; border:0; text-align:left; padding:0; }
  .card .ph{ height:130px; background:#fff; display:flex; align-items:center; justify-content:center; font-size:34px; padding:8px; }
  .card .ph img{ max-width:100%; max-height:100%; object-fit:contain; }
  .card .b{ padding:10px 12px 12px; }
  .card h3{ margin:0 0 4px; font-size:15px; line-height:1.25; }
  .card .price{ font-weight:700; color:var(--acc2); }
  .card .out{ color:var(--muted); font-weight:600; font-size:13px; }
  header.shop-top .brand{ display:flex; align-items:center; }
  header.shop-top .brand h1{ margin:0; font-size:22px; }
  header.shop-top .brand-logo{ max-height:52px; max-width:220px; width:auto; display:block; }
  /* barre commander */
  .bar{ position:fixed; left:0; right:0; bottom:0; background:#fff; box-shadow:0 -2px 12px rgba(0,0,0,.12);
    padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; z-index:6; }
  .bar .sum b{ font-size:20px; }
  .bar button{ background:var(--acc); color:#fff; border:0; border-radius:12px; padding:14px 22px; font-size:17px; font-weight:700; cursor:pointer; }
  .bar button:disabled{ opacity:.4; cursor:default; }
  /* overlay + panneaux */
  .overlay{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; z-index:10; }
  .overlay.on{ display:block; }
  .sheet{ position:fixed; left:0; right:0; bottom:0; background:#fff; border-radius:18px 18px 0 0; z-index:11;
    transform:translateY(100%); transition:transform .25s ease; max-height:92vh; overflow:auto; }
  .sheet.on{ transform:translateY(0); }
  .sheet .ph{ padding:16px 20px 0; display:flex; justify-content:space-between; align-items:center; }
  .sheet h2{ margin:0; font-size:20px; }
  .sheet .close{ background:none; border:0; font-size:26px; cursor:pointer; line-height:1; }
  .sheet .body{ padding:12px 20px 24px; max-width:560px; margin:0 auto; }
  .detail-img{ width:100%; height:220px; border-radius:12px; background:#fff; border:1px solid #eceff3; display:flex; align-items:center; justify-content:center; font-size:52px; margin-bottom:12px; padding:10px; }
  .detail-img img{ max-width:100%; max-height:100%; object-fit:contain; }
  .detail-desc{ color:#4a5563; font-size:15px; line-height:1.5; }
  .stock{ display:inline-block; font-size:13px; font-weight:600; padding:3px 10px; border-radius:999px; margin:8px 0; }
  .stock.ok{ background:#e6f4ea; color:#1e7d34; }
  .stock.no{ background:#fdeaea; color:#c92a37; }
  .attr{ margin:14px 0; }
  .attr .lab{ font-size:13px; font-weight:700; margin-bottom:8px; }
  .pills{ display:flex; flex-wrap:wrap; gap:8px; }
  .pill{ border:2px solid #cfd6df; background:#fff; border-radius:999px; padding:9px 16px; font-size:15px; cursor:pointer; }
  .pill.sel{ border-color:var(--acc); background:var(--acc); color:#fff; }
  .pill:disabled{ opacity:.35; cursor:default; }
  .detail-price{ font-size:22px; font-weight:800; color:var(--acc2); margin:12px 0; }
  .qtyrow{ display:flex; align-items:center; gap:14px; margin:14px 0; }
  .qtyrow button{ width:44px; height:44px; border:0; border-radius:12px; background:#eceff3; font-size:24px; cursor:pointer; }
  .qtyrow .q{ font-size:20px; font-weight:700; min-width:28px; text-align:center; }
  .addbtn{ width:100%; background:var(--acc); color:#fff; border:0; border-radius:12px; padding:16px; font-size:18px; font-weight:700; cursor:pointer; }
  .addbtn:disabled{ opacity:.4; cursor:default; }
  /* checkout */
  .recap{ list-style:none; padding:0; margin:0 0 14px; }
  .recap li{ display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px dashed #e3e7ec; font-size:15px; }
  label.f{ display:block; font-size:13px; font-weight:600; margin:12px 0 4px; }
  input.f{ width:100%; padding:13px 14px; border:1px solid #cfd6df; border-radius:10px; font-size:16px; }
  .row2{ display:grid; grid-template-columns:1fr 2fr; gap:10px; }
  .pay{ width:100%; margin-top:18px; background:var(--acc); color:#fff; border:0; border-radius:12px; padding:16px; font-size:18px; font-weight:700; cursor:pointer; }
  .pay:disabled{ opacity:.5; }
  .err{ color:var(--acc2); font-size:14px; margin-top:10px; min-height:18px; }
  .empty{ color:#888; padding:30px 4px; }
  .legal-foot{ text-align:center; padding:26px 10px 8px; color:var(--muted); font-size:13px; line-height:2; }
  .legal-foot a{ color:var(--muted); text-decoration:none; }
  .legal-foot a:hover{ text-decoration:underline; }

/* ---- Barre de recherche ---- */
.searchbar{ background:var(--bg); padding:14px 16px 2px; max-width:1000px; margin:0 auto; }
.searchbar input{ width:100%; padding:13px 16px; border:1px solid #d5dbe3; border-radius:12px; font-size:16px; background:#fff; }
.searchbar input:focus{ outline:none; border-color:var(--acc); }

/* ---- Panier ---- */
.cart-row{ display:grid; grid-template-columns:1fr auto auto auto; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid #eef1f4; }
.cart-row .ci-name{ font-size:15px; font-weight:600; line-height:1.3; }
.cart-row .ci-unit{ display:block; font-size:12px; color:var(--muted); font-weight:400; }
.cart-row .ci-ctrl{ display:flex; align-items:center; gap:8px; }
.cart-row .ci-ctrl button{ width:34px; height:34px; border:0; border-radius:9px; background:#eceff3; font-size:20px; line-height:1; cursor:pointer; }
.cart-row .ci-qty{ min-width:22px; text-align:center; font-weight:700; }
.cart-row .ci-price{ font-weight:700; min-width:64px; text-align:right; }
.cart-row .ci-rm{ border:0; background:none; font-size:18px; cursor:pointer; opacity:.7; }
.cart-row .ci-rm:hover{ opacity:1; }
.cart-total-row{ display:flex; justify-content:space-between; align-items:center; padding:14px 0 4px; font-size:16px; }
.cart-total-row b{ font-size:22px; color:var(--acc2); }