:root{
  --bg:#ffffff;
  --text:#0f172a;
  --muted:#60697a;
  --primary:#1d3557;
  --accent:#c7a64b;
  --card:#f7f7fb;
  --stroke:#e8e9ef;
  --radius:18px;
  --shadow: 0 10px 30px rgba(16,24,40,.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;line-height:1.7}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1180px,92%);margin-inline:auto}
header.site{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.86); backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--stroke)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{font-family:Poppins,system-ui; font-weight:700; letter-spacing:.5px}
.brand span{color:var(--primary)}
nav.links a{margin-left:18px; opacity:.9}
.btn{display:inline-block; border:1px solid var(--text); border-radius:999px; padding:10px 14px; font-weight:600}
.btn.primary{border-color:var(--primary); background:var(--primary); color:#fff}
.btn.ghost{border-color:var(--stroke); background:#fff}
.badge{display:inline-block;border:1px solid var(--stroke);border-radius:999px;padding:6px 10px;font-size:12px;background:var(--card)}
.cart-link{position:relative}
.cart-count{position:absolute; right:-10px; top:-10px; background:var(--primary); color:#fff; border-radius:999px; padding:2px 7px; font-size:12px; font-weight:700}
.hamb{display:none; cursor:pointer}
.hamb span{display:block;width:22px;height:2px;background:#0f172a;margin:4px 0}
.mobile{display:none; position:absolute; left:4%; right:4%; top:65px; background:#fff; border:1px solid var(--stroke); border-radius:12px; padding:12px}
.mobile a{display:block;padding:10px 8px;border-bottom:1px dashed var(--stroke)}
.mobile a:last-child{border-bottom:0}
@media (max-width:860px){ nav.links{display:none} .hamb{display:block} }
.hero{display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center; padding:56px 0}
.hero .photo{height:520px; border-radius:22px; background:#ddd center/cover no-repeat; box-shadow:var(--shadow)}
.kicker{letter-spacing:.18em; text-transform:uppercase; color:var(--primary); font-size:12px}
h1{font-family:Poppins,system-ui; font-size: clamp(30px, 5.2vw, 56px); line-height:1.1; margin:10px 0 14px}
p.lead{color:var(--muted); max-width:56ch}
section{padding:64px 0}
h2{font-family:Poppins,system-ui; font-size: clamp(24px, 3vw, 38px); margin:0 0 16px}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media (max-width:980px){ .grid{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .hero{grid-template-columns:1fr} .grid{grid-template-columns:1fr} .hero .photo{height:380px} }
.card{background:#fff; border:1px solid var(--stroke); border-radius:16px; overflow:hidden; box-shadow:var(--shadow)}
.card .img{height:260px; background:#eee center/cover no-repeat}
.pad{padding:16px}
.price{font-weight:700}
.muted{color:var(--muted)}
.actions{display:flex; gap:10px; align-items:center; justify-content:space-between; margin-top:8px}
.tile{border:1px solid var(--stroke); border-radius:18px; background:linear-gradient(180deg,#fff,var(--card)); padding:22px}
footer.site{padding:60px 0 80px; border-top:1px solid var(--stroke); color:var(--muted)}
.cols{display:grid; grid-template-columns:2fr 1fr 1fr; gap:20px}
@media (max-width:900px){ .cols{grid-template-columns:1fr} }
/* Product detail */
.product-hero{display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:start}
.product-hero .big{height:520px; border-radius:16px; background:#eee center/cover no-repeat; border:1px solid var(--stroke)}
.thumbs{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:10px}
.thumbs div{height:90px; border-radius:10px; background:#eee center/cover no-repeat; border:1px solid var(--stroke); cursor:pointer}
@media (max-width:900px){ .product-hero{grid-template-columns:1fr} .product-hero .big{height:420px} }
/* Tables / panier */
.table{width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--stroke); border-radius:12px; overflow:hidden; box-shadow:var(--shadow)}
.table th, .table td{padding:14px; border-bottom:1px solid var(--stroke); text-align:left}
.table th{background:#fafbff}
.qty{display:flex; align-items:center; gap:8px}
.qty input{width:64px; padding:8px 10px; border:1px solid var(--stroke); border-radius:8px}
.total{font-size:20px; font-weight:700}
.toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:#111; color:#fff; padding:12px 16px; border-radius:999px; opacity:0; pointer-events:none; transition:opacity .25s ease}
.toast.show{opacity:1}
/* Utility */
.center{text-align:center}
.mt-20{margin-top:20px}
.mb-20{margin-bottom:20px}