/* AyCariba — Design moderne & épuré */
:root {
  --vert: #2E7D32;
  --vert-fonce: #1B5E20;
  --vert-clair: #E8F5E9;
  --vert-moyen: #4CAF50;
  --or: #FFC107;
  --texte: #1A1A1A;
  --gris: #666;
  --gris-clair: #F5F7F6;
  --bordure: #E4E7E6;
  --blanc: #FFFFFF;
  --radius: 12px;
  --ombre: 0 2px 8px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --ombre-hover: 0 8px 24px rgba(0,0,0,.10);
}

* { margin:0; padding:0; box-sizing:border-box; font-family:'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; }
body { background:var(--blanc); color:var(--texte); line-height:1.5; }

/* ===== HEADER ===== */
.topbar { background:var(--vert-fonce); color:white; font-size:12px; padding:6px 0; text-align:center; letter-spacing:.3px; }
header { background:var(--blanc); border-bottom:1px solid var(--bordure); padding:0 24px; position:sticky; top:0; z-index:100; }
.header-inner { max-width:1280px; margin:0 auto; display:flex; align-items:center; gap:24px; height:64px; }
.logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.logo img { height:36px; border-radius:6px; }
.logo-text { font-size:22px; font-weight:800; font-style:italic; color:var(--vert-fonce); }
.logo-text span { color:var(--or); }
.search-box { flex:1; max-width:520px; position:relative; }
.search-box input { width:100%; padding:10px 16px; border:1.5px solid var(--bordure); border-radius:8px; font-size:14px; outline:none; transition:border-color .15s; }
.search-box input:focus { border-color:var(--vert); box-shadow:0 0 0 3px rgba(46,125,50,.12); }
.header-actions { display:flex; align-items:center; gap:16px; margin-left:auto; }
.header-actions a { color:var(--texte); text-decoration:none; font-size:13px; font-weight:600; display:flex; align-items:center; gap:6px; padding:8px 12px; border-radius:8px; transition:background .15s; }
.header-actions a:hover { background:var(--gris-clair); }
.header-actions .btn-primary { background:var(--vert); color:white; }
.header-actions .btn-primary:hover { background:var(--vert-fonce); }

/* ===== NAV CATEGORIES ===== */
.cat-nav { border-bottom:1px solid var(--bordure); background:var(--blanc); padding:0 24px; }
.cat-nav-inner { max-width:1280px; margin:0 auto; display:flex; gap:4px; overflow-x:auto; padding:8px 0; }
.cat-nav button { border:none; background:none; padding:8px 16px; border-radius:8px; cursor:pointer; font-size:13px; font-weight:600; color:var(--gris); white-space:nowrap; transition:all .15s; }
.cat-nav button:hover { background:var(--gris-clair); color:var(--texte); }
.cat-nav button.active { background:var(--vert); color:white; }

/* ===== HERO ===== */
.hero { background:linear-gradient(135deg, var(--vert-fonce) 0%, var(--vert) 60%, var(--vert-moyen) 100%); color:white; text-align:center; padding:56px 24px 48px; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; top:-60%; left:-20%; width:60%; height:200%; background:radial-gradient(circle, rgba(255,193,7,.15) 0%, transparent 60%); }
.hero h1 { font-size:36px; font-weight:800; margin-bottom:8px; position:relative; }
.hero p { font-size:16px; opacity:.92; max-width:560px; margin:0 auto; position:relative; }
.hero .pill { display:inline-block; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); padding:6px 16px; border-radius:20px; font-size:12px; font-weight:600; margin-bottom:16px; letter-spacing:.5px; position:relative; }

/* ===== MAIN ===== */
main { max-width:1280px; margin:0 auto; padding:28px 24px 60px; }
.section-title { font-size:18px; font-weight:700; margin-bottom:16px; display:flex; align-items:center; justify-content:space-between; }
.section-title .count { font-size:13px; color:var(--gris); font-weight:500; }

/* ===== GRID PRODUITS ===== */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:20px; }
.prod { background:var(--blanc); border:1px solid var(--bordure); border-radius:var(--radius); overflow:hidden; transition:all .2s; cursor:pointer; }
.prod:hover { box-shadow:var(--ombre-hover); transform:translateY(-2px); border-color:transparent; }
.prod .img-wrap { aspect-ratio:1; background:var(--gris-clair); overflow:hidden; position:relative; }
.prod .img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.prod:hover .img-wrap img { transform:scale(1.05); }
.prod .badge-sale { position:absolute; top:10px; left:10px; background:var(--or); color:#333; font-size:11px; font-weight:700; padding:3px 8px; border-radius:4px; }
.prod .info { padding:14px 16px 16px; }
.prod .cat-label { font-size:11px; color:var(--vert); font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
.prod h3 { font-size:14px; font-weight:600; margin-bottom:6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:40px; }
.prod .rating { font-size:12px; color:var(--gris); margin-bottom:6px; }
.prod .rating .stars { color:var(--or); }
.prod .price-row { display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.prod .price { font-size:17px; font-weight:700; color:var(--texte); }
.prod .price .old { font-size:12px; color:var(--gris); text-decoration:line-through; margin-left:6px; font-weight:400; }
.btn-add { background:var(--vert); color:white; border:none; width:32px; height:32px; border-radius:8px; cursor:pointer; font-size:18px; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.btn-add:hover { background:var(--vert-fonce); }

/* ===== CART BAR ===== */
.cart-bar { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--vert-fonce); color:white; padding:14px 28px; border-radius:40px; box-shadow:0 8px 30px rgba(0,0,0,.3); cursor:pointer; font-weight:600; font-size:14px; display:flex; align-items:center; gap:10px; z-index:200; transition:transform .15s; }
.cart-bar:hover { transform:translateX(-50%) scale(1.02); }
.cart-bar .cart-icon { font-size:18px; }

/* ===== FOOTER ===== */
footer { background:var(--vert-fonce); color:white; padding:32px 24px; text-align:center; font-size:13px; }
footer a { color:rgba(255,255,255,.85); text-decoration:none; margin:0 12px; }
footer a:hover { color:white; text-decoration:underline; }

@media (max-width: 640px) {
  .header-inner { gap:12px; }
  .logo-text { font-size:18px; }
  .hero h1 { font-size:26px; }
  .grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
  .prod .info { padding:10px 12px 12px; }
  .prod h3 { font-size:13px; min-height:36px; }
}