* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Segoe UI', sans-serif; background:#f5f5f5; color:#333; }
.container { max-width:1200px; margin:0 auto; padding:20px; }
h1 { margin-bottom:20px; }
.produits { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:20px; margin-top:20px; }
.produit { background:#fff; border-radius:8px; padding:20px; box-shadow:0 2px 10px rgba(0,0,0,0.1); text-align:center; }
.produit h3 { font-size:1.1rem; }
.prix { font-size:1.3rem; font-weight:bold; color:#27ae60; margin:10px 0; }
.btn-ajouter, .btn-panier, .btn-retour, .btn-payer, .btn-maj, .btn-vider, .btn-supprimer {
    display:inline-block; padding:8px 16px; border-radius:5px; text-decoration:none; font-weight:bold; border:none; cursor:pointer;
}
.btn-ajouter { background:#3498db; color:#fff; }
.btn-ajouter:hover { background:#2980b9; }
.btn-panier { background:#f39c12; color:#fff; float:right; margin-bottom:20px; }
.btn-panier:hover { background:#e67e22; }
.btn-retour { background:#95a5a6; color:#fff; }
.btn-retour:hover { background:#7f8c8d; }
.btn-payer { background:#27ae60; color:#fff; font-size:1.2rem; padding:12px 24px; }
.btn-payer:hover { background:#1e8449; }
.btn-maj { background:#3498db; color:#fff; }
.btn-maj:hover { background:#2980b9; }
.btn-vider { background:#e74c3c; color:#fff; }
.btn-vider:hover { background:#c0392b; }
.btn-supprimer { background:#e74c3c; color:#fff; padding:4px 8px; }
.btn-supprimer:hover { background:#c0392b; }
.panier-resume { text-align:right; margin-bottom:20px; }
.table-panier { width:100%; border-collapse:collapse; background:#fff; border-radius:8px; overflow:hidden; }
.table-panier th, .table-panier td { padding:12px 15px; text-align:left; border-bottom:1px solid #ddd; }
.table-panier th { background:#2c3e50; color:#fff; }
.table-panier tfoot td { font-weight:bold; border-top:2px solid #2c3e50; }
.qte-input { width:60px; padding:5px; border:1px solid #ddd; border-radius:4px; text-align:center; }
.actions-panier { margin-top:20px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.actions-panier a, .actions-panier button { margin-right:5px; }
@media (max-width:600px) { .table-panier { font-size:0.9rem; } .produits { grid-template-columns:1fr 1fr; } }