/* Reset & Base */
* { box-sizing: border-box; }
:root {
  --bg:#0f1115; --text:#e8ecf1; --muted:#9aa4b2; --card:#191c22;
  --border:#1f232b; --accent:#1e90ff; --success:#28a745; --danger:#cc2233;
}
html,body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif
}

/* Appbar & Tabs */
.appbar{
  position:sticky;top:0;z-index:10;background:#0f1115dd;
  backdrop-filter:blur(6px) saturate(1.2);border-bottom:1px solid var(--border);
  padding:12px 16px;font-weight:800;display:flex;justify-content:center
}
.appbar .title{font-size:18px}
.tabs{
  position:sticky;bottom:0;z-index:9;display:grid;grid-template-columns:repeat(4,1fr);
  gap:8px;padding:10px;background:#0f1115ee;border-top:1px solid var(--border)
}
.tabs a{
  text-align:center;text-decoration:none;padding:10px 8px;border:1px solid var(--border);
  background:#121722;color:var(--muted);border-radius:12px;font-weight:700;font-size:14px
}
.tabs a.active{color:var(--text);border-color:#2a3140;background:#18202e}

/* Index */
.categories{display:flex;gap:8px;flex-wrap:wrap;padding:12px}
.category{
  text-decoration:none;background:#151a23;border:1px solid var(--border);
  color:var(--text);padding:8px 12px;border-radius:999px;font-size:14px
}

/* ===== Produits : 1 carte par ligne (même PC) ===== */
.products{
  padding:12px 12px 90px;
  display:flex; flex-direction:column;
  gap:12px;
}
.product-card{
  background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
  padding-bottom:12px;
  /* largeur full */
  width:100%;
}

/* Media (image/vidéo) dans la carte */
.product-card img,
.product-card video{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
  border-bottom:1px solid var(--border);
  background:#0a0d14; /* fond pour vidéos sans poster */
}
.product-card video{
  /* optimise l’aperçu : muet/loop côté HTML ; ici on s’assure du rendu */
  max-height:70vh;
}

.product-card h3{margin:10px 10px 4px;font-size:16px}
.product-card p{margin:0 10px 10px;color:var(--muted);font-size:14px}
.btn{
  display:inline-block;text-decoration:none;padding:10px 12px;border-radius:10px;background:var(--accent);
  color:#fff;font-weight:800;border:none
}

/* Detail */
.product-detail{
  padding:16px 12px 90px;max-width:820px;margin:0 auto
}
.product-detail .product-image{
  width:100%;border-radius:14px;border:1px solid var(--border);
  box-shadow:0 6px 16px rgba(0,0,0,.18);margin-bottom:12px;object-fit:cover
}
.product-detail h1{font-size:22px;margin:6px 0 2px}
.product-detail .price{color:var(--success);font-weight:800;margin:2px 0 10px;font-size:18px}
.product-detail .description{color:var(--muted);line-height:1.5;font-size:15px;margin-bottom:16px}
.btn-order{
  display:block;text-align:center;text-decoration:none;background:var(--accent);color:#fff;
  padding:14px 16px;border-radius:12px;font-weight:900;border:1px solid #256fdb
}

/* Admin layout */
h1,h2{margin:16px 12px 8px}
.admin-wrap{padding:0 12px 90px;max-width:900px;margin:0 auto}
.form{
  background:var(--card);border:1px solid var(--border);border-radius:16px;padding:12px;margin:12px
}
.row-2,.row-3{display:grid;gap:8px}
.row-2{grid-template-columns:repeat(2,1fr)}
.row-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:640px){.row-2,.row-3{grid-template-columns:1fr}}
input[type="text"],input[type="number"],input[type="file"],select,textarea{
  width:100%;background:#121722;color:var(--text);border:1px solid #2b3342;border-radius:12px;padding:10px 12px;font-size:14px
}
textarea{min-height:100px;resize:vertical}
button,.btn-inline{
  background:var(--accent);color:#fff;border:none;border-radius:12px;padding:10px 12px;font-weight:800;cursor:pointer
}
button.danger,.btn.danger{background:var(--danger)}
.help{color:var(--muted);font-size:13px}
.admin-list{list-style:none;padding:0 12px 12px;margin:0}
.admin-list li{
  display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--card);
  border:1px solid var(--border);border-radius:12px;padding:10px 12px;margin:8px 0
}

/* chips prix */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.chip{
  background:#121722;border:1px solid #2b3342;padding:8px 12px;border-radius:999px;
  cursor:pointer; user-select:none;
}
.chip b{margin-left:6px}
.chip.active{border-color:var(--accent);background:#18202e}

/* petites utilitaires */
.mt8{margin-top:8px} .mt12{margin-top:12px}
.center{text-align:center}
.hidden{display:none!important}
