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

.panier-container {
    width: 85%;
    max-width: 900px;
    margin: 40px auto;
    background-color: #3d2c21;
    border-radius: 12px;
    padding: 30px;
    font-family: Arial, sans-serif;
    box-shadow: 0 0 20px rgba(0,0,0,0.4);
}

.panier-titre {
    text-align: center;
    font-size: 26px;
    margin-bottom: 25px;
    color: #f1e0c6;
}

.panier-vide {
    text-align: center;
    font-size: 18px;
    color: #f1e0c6;
}

/* Tableau du panier */
.panier-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 25px;
}

.panier-table th,
.panier-table td {
    padding: 12px 15px;
    text-align: center;
    border-bottom: 1px solid #5a3f2e;
    color: #f1e0c6;
    vertical-align: middle;
}

.panier-table thead th {
    background-color: #2e1f15;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.panier-table tbody tr:hover {
    background-color: #4e3828;
}

/* Image dans le panier */
.panier-img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 6px;
    margin-right: 10px;
    vertical-align: middle;
}

.panier-item-nom {
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Formulaire de modification de quantité */
.form-qte {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
}

.input-qte {
    width: 55px;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #000;
    background-color: #ffe1becc;
    text-align: center;
    font-size: 14px;
    appearance: textfield;
    -moz-appearance: textfield;
}

.input-qte::-webkit-outer-spin-button,
.input-qte::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.btn-qte {
    padding: 5px 10px;
    background-color: #f1e0c6;
    border: 1px solid #000;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: 0.2s;
}

.btn-qte:hover {
    background-color: #f1e0c6;
}

/* Bouton supprimer une ligne */
.btn-supprimer {
    padding: 6px 12px;
    background-color: #8b2e2e;
    color: #fff;
    border: 1px solid #000;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    transition: 0.2s;
}

.btn-supprimer:hover {
    background-color: #a83333;
}

/* Pied du panier */
.panier-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 10px;
}

.panier-total {
    font-size: 20px;
    color: #f1e0c6;
}

.panier-actions {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-end;
}

/* Bouton vider le panier */
.btn-vider {
    padding: 10px 18px;
    background-color: #5a1a1a;
    color: #fff;
    border: 1px solid #000;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: 0.2s;
}

.btn-vider:hover {
    background-color: #7a2222;
}

/* Messages erreur / succès */
.erreurs {
    background-color: #5a1a1a;
    border-radius: 6px;
    padding: 10px 15px;
    margin-bottom: 15px;
}

.erreur {
    color: #ff9999;
    margin: 4px 0;
}

.succes {
    background-color: #1a3a1a;
    border-radius: 6px;
    padding: 10px 15px;
    margin-bottom: 15px;
    color: #99ff99;
}

/* Contrôles quantité +/- */
.qte-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    width: 100%;
}

.couleur-gold {
    color: #ffeaa7;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}

.form-qte {
    margin: 0;
}

.btn-moins,
.btn-plus {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid #000;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

.btn-moins {
    background-color: #5a1a1a;
    color: #fff;
}

.btn-moins:hover {
    background-color: #7a2222;
}

.btn-plus {
    background-color: #1a3a1a;
    color: #fff;
}

.btn-plus:hover {
    background-color: #225522;
}

.btn-plus:disabled,
.btn-moins:disabled {
    background-color: #333;
    color: #666;
    cursor: not-allowed;
    border-color: #444;
    opacity: 0.5;
}


/* Contrôles quantité +/- */
.qte-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-moins,
.btn-plus {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid #000;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

.btn-moins {
    background-color: #5a1a1a;
    color: #fff;
}

.btn-moins:hover {
    background-color: #7a2222;
}

.btn-plus {
    background-color: #1a3a1a;
    color: #fff;
}

.btn-plus:hover {
    background-color: #225522;
}

.btn-plus:disabled,
.btn-moins:disabled {
    background-color: #333;
    color: #666;
    cursor: not-allowed;
    border-color: #444;
    opacity: 0.5;
}

/* Bouton acheter le panier */
.btn-acheter {
    margin-top: 20px;
    padding: 12px 22px;
    background: linear-gradient(15deg, #f1e0c6, #ffc078cc);
    color: #000;
    border: 1px solid #000;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    transition: 0.2s;
    text-decoration: none;
}

.btn-acheter:hover {
    background: linear-gradient(15deg, #ffc98bcc, #ffb25bcc);
}

/* Résumé du panier */
.panier-resume {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Solde affiché dans le panier */
.panier-solde {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-family: Arial, sans-serif;
    justify-content: end;
}

.panier-solde-label {
    color: #c09565cc;
    font-weight: bold;
    font-size: 15px;
    margin-right: 4px;
}

/* Avertissement solde insuffisant */
.panier-insuffisant {
    background-color: #5a1a1a;
    border: 1px solid #c0392b;
    border-radius: 6px;
    padding: 8px 14px;
    color: #ff9999;
    font-size: 14px;
    font-weight: bold;
}


.btn-submit-panier {
    width: 100%;
    margin-top: 20px;
    padding: 12px;
    background: linear-gradient(15deg, #f1e0c6, #ffc078cc);
    border-radius: 6px;
    border: 1px solid #000;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
    color: #000;
    font-weight: bold;
    font-family: Arial, sans-serif;
    transition: 0.2s;
}

.btn-submit-panier:hover {
    background: linear-gradient(15deg, #ffc98bcc, #ffb25bcc);
}

@media (max-width: 768px) {
    .panier-container {
        width: calc(100% - 24px);
        margin: 20px auto 36px;
        padding: 18px 14px;
    }

    .panier-table,
    .panier-table thead,
    .panier-table tbody,
    .panier-table th,
    .panier-table td,
    .panier-table tr {
        display: block;
        width: 100%;
    }

    .panier-table {
        margin-bottom: 16px;
    }

    .panier-table thead {
        display: none;
    }

    .panier-table tbody {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .panier-table tr {
        background: rgba(46, 31, 21, 0.95);
        border: 1px solid #5a3f2e;
        border-radius: 12px;
        padding: 12px;
    }

    .panier-table td {
        border-bottom: none;
        text-align: left;
        padding: 8px 0;
    }

    .panier-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 6px;
        color: #c09565cc;
        font-size: 12px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 0.8px;
    }

    .panier-item-nom {
        align-items: center;
    }

    .panier-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .panier-actions {
        align-items: stretch;
    }

    .panier-solde {
        justify-content: flex-start;
    }

    .btn-submit-panier,
    .btn-acheter,
    .btn-vider {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 520px) {
    .panier-container {
        width: calc(100% - 16px);
        padding: 14px 10px;
    }

    .panier-titre {
        font-size: 22px;
    }

    .panier-item-nom {
        gap: 8px;
    }

    .panier-img {
        width: 42px;
        height: 42px;
    }

    .qte-controls {
        justify-content: flex-start;
    }
}