:root {
    --primary: #2c3e50;
    --accent: #e74c3c;
    --bg: #f8f9fa;
    --card-bg: #ffffff;
    --text: #333;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

body { background-color: var(--bg); color: var(--text); display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

header { background: var(--primary); color: white; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
header select { padding: 8px 15px; font-size: 16px; border-radius: 5px; border: none; font-weight: bold; }

main { display: flex; flex: 1; overflow: hidden; }

/* Menu */
#menu-section { flex: 3; display: flex; flex-direction: column; background: #f0f2f5; border-right: 2px solid #e0e0e0; }

#categories-bar { display: flex; gap: 10px; padding: 15px; overflow-x: auto; background: white; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
#categories-bar::-webkit-scrollbar { height: 5px; }
.cat-btn { background: #e2e8f0; border: none; padding: 10px 18px; font-size: 14px; font-weight: 600; border-radius: 20px; cursor: pointer; transition: all 0.2s; }
.cat-btn.active { background: var(--primary); color: white; }

#items-grid { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; padding: 20px; overflow-y: auto; align-content: start; }
.item-card { background: var(--card-bg); border-radius: 10px; padding: 15px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 2px 4px rgba(0,0,0,0.05); cursor: pointer; border: 1px solid transparent; transition: transform 0.1s; }
.item-card:active { transform: scale(0.98); }
.item-card h3 { font-size: 16px; margin-bottom: 5px; }
.item-card p { font-size: 12px; color: #777; margin-bottom: 10px; flex-grow: 1; }
.item-card .price { font-weight: bold; color: var(--primary); font-size: 15px; }

/* Panier */
#cart-section { flex: 1.2; min-width: 320px; background: white; display: flex; flex-direction: column; padding: 20px; box-shadow: -2px 0 5px rgba(0,0,0,0.05); }
#cart-section h2 { margin-bottom: 15px; font-size: 18px; padding-bottom: 10px; border-bottom: 2px solid #eee; }

#cart-items { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.empty-cart { color: #aaa; text-align: center; margin-top: 5px; font-style: italic; }

.cart-item { display: flex; justify-content: space-between; align-items: center; background: #f8f9fa; padding: 10px; border-radius: 6px; border-left: 4px solid var(--primary); }
.cart-item-info { flex: 1; }
.cart-item-qty { font-weight: bold; margin-right: 8px; color: var(--accent); }
.cart-item-comment { font-size: 11px; color: #888; border: none; background: transparent; border-bottom: 1px dashed #ccc; width: 90%; margin-top: 4px; padding: 2px 0; }
.cart-item-comment:focus { outline: none; border-bottom-color: var(--primary); }
.btn-remove { background: none; border: none; color: #ccc; font-size: 18px; cursor: pointer; padding: 0 5px; }
.btn-remove:hover { color: var(--accent); }

#cart-total { padding: 15px 0; font-size: 20px; font-weight: bold; text-align: right; border-top: 2px solid #eee; }
#btn-send-order { background: #2ecc71; color: white; border: none; padding: 15px; border-radius: 8px; font-size: 16px; font-weight: bold; cursor: pointer; width: 100%; transition: background 0.2s; }
#btn-send-order:disabled { background: #cccccc; cursor: not-allowed; }

/* Responsive mobile */
@media (max-width: 768px) {
    main { flex-direction: column; }
    #menu-section { flex: 2; }
    #cart-section { flex: 1; min-width: 100%; }
}