* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Arial", sans-serif;
    background: #f6f1e8;
    color: #394437;
    padding-bottom: 120px;
}


/* HEADER */

header {
    background: linear-gradient(135deg, #8da47d, #5f7956);
    color: white;
    padding: 45px 20px;
    text-align: center;
    border-radius: 0 0 35px 35px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}

header h1 {
    font-size: 34px;
    margin-bottom: 15px;
}

header p {
    line-height: 1.6;
    font-size: 16px;
}


/* CATALOGUE */

#catalogue {
    max-width: 900px;
    margin: 30px auto;
    padding: 0 15px;
}


.categorie {
    margin-bottom: 35px;
}

.categorie h2 {
    margin-bottom: 15px;
    color: #536b4c;
}


/* PRODUITS */

.produit {
    background: white;
    border-radius: 22px;
    padding: 15px;
    margin-bottom: 18px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    gap: 15px;
}


.produit img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 15px;
    background: #eee;
}


.info-produit {
    flex: 1;
}


.info-produit h3 {
    font-size: 18px;
    margin-bottom: 8px;
}


.prix {
    font-weight: bold;
    color: #6b8b5e;
    font-size: 18px;
}


/* QUANTITE */

.quantite {
    display: flex;
    align-items: center;
    gap: 8px;
}


.quantite button {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: #7f9b70;
    color: white;
    font-size: 20px;
    cursor: pointer;
}


.quantite span {
    min-width: 25px;
    text-align: center;
    font-weight: bold;
}


/* PANIER BAS */

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: white;
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.12);
    z-index: 10;
}


#panier,
#payer,
#payerModal {

    border: none;
    padding: 14px 18px;
    border-radius: 15px;
    font-weight: bold;
    cursor: pointer;
}


#panier {
    background: #ece4d5;
}


#payer,
#payerModal {
    background: #66835c;
    color:white;
}


#total {
    font-size: 16px;
}


#nbArticles {

    background:#d9534f;
    color:white;
    border-radius:50%;
    padding:3px 8px;
    font-size:12px;

}


/* MODALE PANIER */


.modal {

    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.45);
    z-index:20;

}


.modal-content {

    background:#fff;
    width:90%;
    max-width:450px;
    margin:60px auto;
    padding:20px;
    border-radius:25px;

}


.modal-header {

    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;

}


.modal-header button {

    border:none;
    background:none;
    font-size:30px;
    cursor:pointer;

}


.ligne-panier {

    display:flex;
    justify-content:space-between;
    margin-bottom:12px;

}


.resumePanier {

    border-top:1px solid #ddd;
    padding-top:15px;
    margin-top:20px;

}


/* MOBILE */

@media(max-width:600px){

    .produit {

        flex-direction:row;

    }


    .produit img {

        width:75px;
        height:75px;

    }


    footer {

        flex-wrap:wrap;

    }


    #total {

        width:100%;
        text-align:center;

    }

}