:root{
        
            --jumia-orange:#f68b1e;
            --jumia-dark:#313133;
            --jumia-light:#f1f1f2;
            --jumia-border:#e6e6e6;
            --success:#00a651;
        
        }
        
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        
        body{
        
            background:#f5f5f5;
            font-family:Arial, Helvetica, sans-serif;
            color:#222;
        
        }
        
        /* =========================================
           NAVBAR
        ========================================= */
        
        .top-navbar{
        
            background:#fff;
            box-shadow:0 2px 10px rgba(0,0,0,.05);
            position:sticky;
            top:0;
            z-index:999;
        
        }
        
        .logo{
        
            font-size:28px;
            font-weight:900;
            color:var(--jumia-orange);
            text-decoration:none;
        
        }
        
        .search-form{
        
            width:100%;
            max-width:750px;
        
        }
        
        .search-wrapper{
        
            position:relative;
        
        }
        
        .search-input{
        
            height:48px;
            border:2px solid var(--jumia-border);
            border-radius:8px;
            padding-left:50px;
            font-size:15px;
        
        }
        
        .search-input:focus{
        
            border-color:var(--jumia-orange);
            box-shadow:none;
        
        }
        
        .search-icon{
        
            position:absolute;
            left:18px;
            top:50%;
            transform:translateY(-50%);
            color:#888;
            z-index:10;
        
        }
        
        .search-btn{
        
            background:var(--jumia-orange);
            color:#fff;
            border:none;
            height:48px;
            padding:0 28px;
            border-radius:8px;
            font-weight:700;
            transition:.3s;
        
        }
        
        .search-btn:hover{
        
            background:#e07d17;
        
        }
        
        /* =========================================
           SIDEBAR
        ========================================= */
        
        .sidebar{
        
            background:#fff;
            border-radius:10px;
            padding:5px;
            border:1px solid #eee;
        
        }
        
        .sidebar-title{
        
            font-size:18px;
            font-weight:800;
            margin-bottom:5px;
        
        }
        
        .category-link{
        
            display:flex;
            align-items:center;
            gap:10px;
        
            padding:1px 5px;
        
            border-radius:8px;
        
            text-decoration:none;
            color:#333;
        
            transition:.3s;
        
            margin-bottom:4px;
        
        }
        
        .category-link:hover,
        .category-link.active{
        
            background:#fff4ea;
            color:var(--jumia-orange);
        
        }
        
        /* =========================================
           PRODUITS
        ========================================= */
        
        .product-card{
        
            background:#fff;
            border-radius:10px;
            overflow:hidden;
        
            border:1px solid #eee;
        
            transition:.3s;
            position:relative;
        
            height:100%;
        
        }
        
        .product-card:hover{
        
            transform:translateY(-4px);
        
            box-shadow:0 10px 25px rgba(0,0,0,.08);
        
        }
        
        .product-image{
        
            height:220px;
            background:#fff;
        
            display:flex;
            align-items:center;
            justify-content:center;
        
            padding:15px;
        
        }
        
        .product-image img{
        
            max-width:100%;
            max-height:100%;
            object-fit:contain;
            transition:.3s;
        
        }
        
        .product-card:hover img{
        
            transform:scale(1.05);
        
        }
        
        .product-body{
        
            padding:14px;
        
        }
        
        .product-name{
        
            font-size:14px;
            font-weight:600;
            line-height:1.5;
            height:42px;
            overflow:hidden;
        
        }
        
        .product-price{
        
            font-size:22px;
            font-weight:800;
            color:var(--jumia-dark);
        
        }
        
        .old-price{
        
            font-size:13px;
            color:#999;
            text-decoration:line-through;
        
        }
        
        .discount-badge{
        
            position:absolute;
            top:10px;
            left:10px;
        
            background:#fff1e5;
            color:var(--jumia-orange);
        
            padding:4px 10px;
            border-radius:6px;
        
            font-size:12px;
            font-weight:700;
        
        }
        
        .stock{
        
            color:var(--success);
            font-size:13px;
            font-weight:600;
        
        }
        
        .add-cart-btn{
        
            width:100%;
            background:var(--jumia-orange);
            color:#fff;
        
            border:none;
        
            height:45px;
            border-radius:8px;
        
            font-weight:700;
        
            transition:.3s;
        
        }
        
        .add-cart-btn:hover{
        
            background:#d97310;
        
        }
        
        .top-actions{
        
            display:flex;
            gap:10px;
            align-items:center;
        
        }
        
        .action-btn{
        
            background:#fff;
            border:1px solid #ddd;
            color:#333;
        
            height:46px;
        
            border-radius:8px;
        
            padding:0 16px;
        
            text-decoration:none;
        
            display:flex;
            align-items:center;
            justify-content:center;
        
            position:relative;
        
            transition:.3s;
        
        }
        
        .action-btn:hover{
        
            border-color:var(--jumia-orange);
            color:var(--jumia-orange);
        
        }
        
        .cart-count{
        
            position:absolute;
            top:-6px;
            right:-6px;
        
            width:22px;
            height:22px;
        
            border-radius:50%;
        
            background:red;
            color:#fff;
        
            display:flex;
            align-items:center;
            justify-content:center;
        
            font-size:11px;
            font-weight:700;
        
        }
        .search-wrapper{
            width:100%;
        }
        
        .search-wrapper .search-input{
            height:48px;
            padding-left:45px;
        }
        
        .search-wrapper .search-icon{
            position:absolute;
            left:15px;
            top:50%;
            transform:translateY(-50%);
            color:#888;
        }
        /* =========================================
           MOBILE
        ========================================= */
        
        @media(max-width:768px){
        
            .product-image{
        
                height:160px;
        
            }
        
            .search-btn{
        
                width:100%;
                margin-top:10px;
        
            }
        
            .top-actions{
        
                margin-top:15px;
                width:100%;
                justify-content:space-between;
        
            }
        
        }
        @media (min-width: 992px) {
            .sidebar {
                position: sticky;
                top: 90px; /* hauteur navbar */
                height: calc(100vh - 100px);
                overflow-y: auto;
            }
        }