:root {
    --primary: #006847; /* Vert Guinée */
    --accent: #F97316;  /* Orange Action */
    --bg: #F8FAFC;
    --text: #1E293B;
    --card-bg: #FFFFFF;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }

body { background-color: var(--bg); color: var(--text); padding-bottom: 80px; }

/* NAV */
.navbar {
    background: var(--card-bg); padding: 15px 20px; display: flex; justify-content: space-between;
    align-items: center; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.logo { font-weight: 800; font-size: 1.4rem; color: var(--primary); letter-spacing: -1px; }
.dot { color: var(--accent); }

/* HERO */
.hero {
    background: linear-gradient(135deg, #006847 0%, #004d35 100%);
    color: white; padding: 40px 20px; text-align: center; border-radius: 0 0 25px 25px;
}
.hero h1 { font-size: 1.8rem; line-height: 1.2; margin-bottom: 15px; }
.search-box {
    margin-top: 20px; display: flex; background: white; border-radius: 50px; padding: 5px;
}
.search-box input {
    border: none; flex: 1; padding: 10px 15px; border-radius: 50px; outline: none; font-size: 1rem;
}
.search-box button {
    background: var(--accent); border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
}

/* CATEGORIES SCROLL */
.scroll-h {
    display: flex; gap: 10px; overflow-x: auto; padding: 20px; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Hide scrollbar Firefox */
}
.cat-item {
    background: white; padding: 10px 20px; border-radius: 30px; font-weight: 600; white-space: nowrap;
    border: 1px solid #eee; box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

/* PRODUCTS */
.container { padding: 0 20px; }
.section-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.section-title h2 { font-size: 1.2rem; }
.section-title a { color: var(--accent); text-decoration: none; font-size: 0.9rem; font-weight: 600; }

.product-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px;
}
.product-card {
    background: white; border-radius: 15px; overflow: hidden; position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: transform 0.2s;
}
.product-card:active { transform: scale(0.98); }
.product-card img { width: 100%; height: 140px; object-fit: cover; background: #eee; }
.badge-quartier {
    position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.7); color: white;
    padding: 3px 8px; border-radius: 4px; font-size: 0.7rem; backdrop-filter: blur(4px);
}
.p-info { padding: 12px; }
.p-info small { color: #888; font-size: 0.75rem; text-transform: uppercase; }
.p-info h3 { font-size: 0.95rem; margin: 5px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.price-row { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.price { font-weight: 800; color: var(--primary); font-size: 1rem; }
.btn-add {
    background: #E6F4EA; color: var(--primary); border: none; width: 32px; height: 32px;
    border-radius: 8px; font-size: 1.2rem; font-weight: bold; cursor: pointer;
}

/* FOOTER */
.features { display: flex; justify-content: space-around; padding: 30px 20px; background: #eefcf5; margin-top: 30px; }
.feat { font-weight: 600; font-size: 0.85rem; color: var(--primary); }
footer { text-align: center; padding: 40px 20px; color: #999; font-size: 0.8rem; }

/* Desktop Responsive */
@media (min-width: 768px) {
    .product-grid { grid-template-columns: repeat(4, 1fr); }
    .hero { border-radius: 0; padding: 80px 20px; }
    .search-box { max-width: 500px; margin: 30px auto; }
}