body{
    font-family: Arial;
    background:#f2f2f2;
}

h1{

    text-align:center;

    margin:30px 0;

}

.liste-produits{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:30px;

}

.produit{

    width:150px;

    background:white;

    border-radius:10px;

    box-shadow:0 0 10px gray;

    text-align:center;

    padding:15px;

}

.produit img{

    width:140px;

    height:200px;

    object-fit:cover;

}

button{

    background:green;

    color:white;

    border:none;

    padding:10px 20px;

    cursor:pointer;

    border-radius:5px;

}
#listeProduits{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}
#btnMenu{
    padding:10px 20px;
    font-size:18px;
    cursor:pointer;
}

.menu-cache{
    display:none;
    background:white;
    border:1px solid gray;
    width:200px;
    margin-top:10px;
}

.menu-cache ul{
    list-style:none;
    padding:0;
    margin:0;
}

.menu-cache li{
    padding:10px;
    border-bottom:1px solid #ddd;
}

.menu-cache li:hover{
    background:#f0f0f0;
}

.menu-cache a{
    text-decoration:none;
    color:black;
}


.logoAnime{
    width:200px;
    animation: saut 1s infinite;
}

@keyframes saut{
    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-30px);
    }
}

.centre{
    text-align: center;
}

.logoAnime{
    width: 300px;
}
.produit button {
    display: block;
    margin-bottom: 8px;
}

.produit button {
    width: 120px;
    margin-top: 5px;
}
.entete-admin {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.ligne-bouton {
    display: flex;
    align-items: center;
    margin-top: 15px;
}

#apercuImage {
    width: 150px;
    display: none;
    border: 1px solid #ccc;
    border-radius: 8px;
}

#btnAjouter {
    margin-left: auto;   /* pousse le bouton complètement à droite */
    padding: 10px 25px;
}



/* ===== PANIER ===== */

#tablePanier{

    width:100%;
    border-collapse:collapse;
    margin-top:20px;

}

#tablePanier th{

    background:#2c7be5;
    color:white;
    padding:12px;
    text-align:center;

}

#tablePanier td{

    border:1px solid #ddd;
    padding:10px;
    text-align:center;
    vertical-align:middle;

}

#tablePanier tr:nth-child(even){

    background:#f7f7f7;

}

#tablePanier tr:hover{

    background:#eef5ff;

}
#tablePanier button{

    width:45px;
    height:45px;

    border:none;
    border-radius:8px;

    background:#f5f5f5;

    font-size:22px;

    cursor:pointer;

    transition:.2s;

}

#tablePanier button:hover{

    transform:scale(1.2);

}
#totalPanier{

    text-align:right;
    margin-top:20px;
    color:#2c7be5;
    font-size:28px;

}
.btn-danger,
.btn-success{

    padding:12px 25px;
    border:none;
    border-radius:8px;
    font-size:18px;
    cursor:pointer;
    margin-top:20px;
    margin-right:10px;

}

.btn-danger{

    background:#dc3545;
    color:white;

}

.btn-success{

    background:#28a745;
    color:white;

}

.btn-danger:hover{

    background:#bb2d3b;

}

.btn-success:hover{

    background:#218838;

}

.imgPanier{

    width:55px;
    height:55px;

    object-fit:cover;

    border-radius:8px;

    display:block;

    margin:auto;

}
#tablePanier td{

    border:1px solid #ddd;
    padding:8px;
    text-align:center;
    vertical-align:middle;

}
.piedPanier{

    margin-top:30px;

    text-align:right;

}

#tablePanier{

    width:100%;

    border-collapse:collapse;

    background:white;

    border-radius:12px;

    overflow:hidden;

    box-shadow:0 5px 15px rgba(0,0,0,.12);

}
/* ============================= */
/* Formulaire de commande */
/* ============================= */

#formCommande {

    width: 450px;
    margin: 40px auto;
    padding: 25px;

    background: #ffffff;

    border-radius: 10px;

    box-shadow: 0 4px 15px rgba(0,0,0,0.15);

}

#formCommande p{
    margin-bottom:18px;
}

#formCommande label{

    font-weight:bold;

}

#formCommande input,
#formCommande textarea{

    width:100%;
    padding:10px;
    margin-top:5px;

    border:1px solid #ccc;
    border-radius:5px;

    box-sizing:border-box;

    font-size:16px;

}

#formCommande textarea{

    resize:vertical;
    min-height:90px;

}

#totalCommande{

    text-align:center;
    color:#0b7a0b;
    margin:20px 0;

}

#formCommande button{

    width:100%;
    padding:12px;

    font-size:18px;

    border:none;
    border-radius:6px;

    cursor:pointer;

}
.commande{

    width:600px;
    margin:20px auto;

    padding:20px;

    border:1px solid #ccc;
    border-radius:8px;

    background:white;

    box-shadow:0 2px 8px rgba(0,0,0,.15);

}


body{
    font-family: Arial, sans-serif;
    background:#f4f4f4;
    margin:0;
    padding:30px;
}

h1{
    text-align:center;
    margin-bottom:40px;
}

.dashboard{
    display:flex;
    justify-content:center;
    gap:30px;
    flex-wrap:wrap;
}

.carte{
    width:200px;
    background:white;
    border-radius:10px;
    box-shadow:0 2px 10px rgba(0,0,0,0.2);
    padding:25px;
    text-align:center;
}

.carte h2{
    margin-top:0;
}

.carte button{
    margin-top:20px;
    padding:10px 20px;
    background:#28a745;
    color:white;
    border:none;
    border-radius:5px;
    cursor:pointer;
}

.carte button:hover{
    background:#1f8a38;
}

/* ================= MODAL ================= */

.modal{

    display:none;

    position:fixed;

    left:0;
    top:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,.5);

    z-index:1000;

}

.modal-contenu{

    background:white;

    width:500px;

    margin:50px auto;

    padding:25px;

    border-radius:12px;

    position:relative;

}

.fermer{

    position:absolute;

    right:15px;

    top:10px;

    font-size:30px;

    cursor:pointer;

}

.modal input{

    width:100%;

    padding:10px;

    margin-top:10px;

    margin-bottom:15px;

    box-sizing:border-box;

}


.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
}

.modal-contenu {
    background: white;
    width: 600px;
    max-width: 90%;
    max-height: 90vh;
    overflow-y: auto;

    padding: 20px;
    border-radius: 10px;
}
.table-commandes{

    width:100%;
    border-collapse:collapse;
    margin-top:20px;

}

.table-commandes th,
.table-commandes td{

    border:1px solid #ddd;
    padding:12px;
    text-align:center;

}

.table-commandes th{

    background:#0b7d20;
    color:white;

}

.table-commandes tr:nth-child(even){

    background:#f8f8f8;

}

.table-commandes tr:hover{

    background:#eef6ff;

}
.table-commandes td{
    white-space: nowrap;
}
h2{
    text-align:center;
}
.table-commandes + h2{
    text-align:center;
}
.tableProduits{
    width:100%;
    border-collapse:collapse;
    margin-top:20px;
    margin-bottom:20px;
}

.tableProduits th{
    background:#0b6b2f;
    color:white;
    padding:12px;
    text-align:center;
    font-size:18px;
}

.tableProduits td{
    padding:12px;
    border-bottom:1px solid #ddd;
    text-align:center;
    font-size:17px;
}

.tableProduits tr:nth-child(even){
    background:#f7f7f7;
}

.tableProduits tr:hover{
    background:#eef8ee;
}
.infosCommande{
    background:#f8f8f8;
    border-left:5px solid #0b6b2f;
    padding:15px;
    margin:20px 0;
    border-radius:8px;
}

.infosCommande p{
    margin:8px 0;
    font-size:18px;
}

.totalCommande{
    text-align:right;
    font-size:30px;
    font-weight:bold;
    color:#0b6b2f;
    margin-top:25px;
    border-top:2px solid #0b6b2f;
    padding-top:15px;
}
.tableProduits td:nth-child(2),
.tableProduits td:nth-child(3),
.tableProduits td:nth-child(4),
.tableProduits th:nth-child(2),
.tableProduits th:nth-child(3),
.tableProduits th:nth-child(4){
    text-align:right;
}
.tableProduits td{
    padding:12px 16px;
}
.etatCommande{
    display:flex;
    justify-content:center;
    gap:40px;
    margin:20px 0 30px;
    flex-wrap:wrap;
}

.etatCommande p{
    margin:0;
    font-size:18px;
}

.badgeEtat,
.badgePaiement{
    background:#0b6b2f;
    color:white;
    padding:4px 10px;
    border-radius:20px;
    font-weight:bold;
}
#modalCommande {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);

    justify-content: center;
    align-items: center;
}

.modalCommandeContent {
    width: 90%;
    max-width: 900px;

    max-height: 90vh;   /* ne dépasse jamais l'écran */
    overflow-y: auto;   /* défilement uniquement dans la fenêtre */

    background: white;
    border-radius: 10px;
    padding: 25px;
}
.commandeSelectionnee {
    background-color: #d8f5d0;
    border-left: 5px solid #0b7d2b;
    font-weight: bold;
}
.actionsCommande {
    margin-top: 20px;
}

.commandeSelectionnee {
    background-color: #d8f5d0;
    border-left: 5px solid #0b7d2b;
    font-weight: bold;
}
.commandeSelectionnee {
    background-color: #fff3b0;
    border-left: 5px solid #ff9800;
}
tr.commandeSelectionnee td {
    background-color: #ffe082 !important;
}