body { font-family: Arial, sans-serif; background:#f5f5f5; }
nav a { margin-right:10px; text-decoration:none; color:#333; }
.cards { display:flex; gap:20px; margin:20px 0; }
.card { padding:20px; background:#fff; border-radius:8px; box-shadow:0 2px 5px rgba(0,0,0,0.1);}
.card.alert { background:#f8d7da; color:#721c24;}
.card.total { background:#d4edda; color:#155724;}
/* Animation des cartes articles */
.card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.card:active {
    transform: scale(0.97);
    background:#e8f5e9;
}

/* Transition du panier et total */
#panier-table tbody tr {
    transition: all 0.3s ease;
}
#total {
    transition: all 0.3s ease;
    font-weight:700;
    font-size:22px;
    color:#f1c40f;
}

/* Bouton valider */
#valider {
    transition: all 0.3s ease;
}
#valider:active {
    transform: scale(0.97);
}
#valider {
    background:#d4af37;
    color:#000;
    width:100%;
    padding:14px;
    font-size:16px;
    border:none;
    border-radius:10px;
    cursor:pointer;
    transition:all 0.3s;
}

#valider:hover {
    background:#b5b110;
    transform:scale(1.03);
}
/* Scroll smooth pour panier */
.panier {
    scroll-behavior: smooth;
}
.qte-box{
display:flex;
align-items:center;
gap:6px;
}

.btn-plus,.btn-moins{

border:none;
width:26px;
height:26px;
border-radius:50%;
cursor:pointer;
font-weight:bold;
}

.btn-plus{
background:#28a745;
color:white;
}

.btn-moins{
background:#dc3545;
color:white;
}

.btn-sup{
border:none;
background:#eee;
padding:4px 8px;
border-radius:6px;
cursor:pointer;
}

.total-box{
font-size:20px;
margin-top:15px;
font-weight:bold;
}

.btn-valider{
width:100%;
margin-top:15px;
padding:12px;
background:#007bff;
color:white;
border:none;
border-radius:8px;
cursor:pointer;
font-size:16px;
}

.recherche{
    width:100%;
    padding:10px;
    margin-bottom:15px;
    border-radius:8px;
    border:1px solid #d4af37;
    outline:none;
}