body {
    font-family: 'Segoe UI', sans-serif;
    background: #f6faf8;
    color: #333;
    margin: 0;
    padding: 0 0 40px 0;
}
h1 {
    text-align: center;
    color: #388e3c;
    margin: 30px 0 10px 0;
    letter-spacing: 1px;
}
form {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}
form input[type="text"] {
    padding: 8px 12px;
    border-radius: 4px 0 0 4px;
    border: 1px solid #bcd;
    min-width: 220px;
    font-size: 1em;
}
form button {
    padding: 8px 16px;
    border: none;
    background: #388e3c;
    color: white;
    font-weight: bold;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    transition: background 0.2s;
}
form button:hover {
    background: #245622;
}
table {
    width: 98%;
    margin: 0 auto 20px auto;
    border-collapse: collapse;
    background: #fff;
    box-shadow: 0 2px 8px #ccd7e180;
    border-radius: 8px;
    overflow: hidden;
}
table thead th {
    background: #388e3c;
    color: #fff;
    padding: 12px 7px;
    font-weight: 600;
    font-size: 1em;
    text-align: left;
    border-bottom: 2px solid #245622;
}
table tbody td {
    padding: 10px 7px;
    border-bottom: 1px solid #eef2fa;
    font-size: 0.98em;
    vertical-align: top;
}
table tr:nth-child(even) {
    background: #edf7ed;
}
table tr:hover {
    background: #e2f2e2;
    transition: background 0.15s;
}
.button, .btn-action {
    background: #388e3c;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 7px 14px;
    text-decoration: none;
    margin-right: 6px;
    font-size: 1em;
    cursor: pointer;
    transition: background 0.2s;
    display: inline-block;
}
.button:hover, .btn-action:hover {
    background: #245622;
}
@media (max-width: 750px) {
    table, thead, tbody, th, td, tr {
        display: block;
    }
    thead {
        display: none;
    }
    table tr {
        margin-bottom: 17px;
        border-radius: 5px;
        box-shadow: 0 2px 5px #bcd7e150;
        background: #fff;
    }
    table td {
        padding: 10px 7px 10px 45%;
        position: relative;
        border: none;
        border-bottom: 1px solid #eaf4e8;
        min-height: 38px;
    }
    table td:before {
        position: absolute;
        left: 10px;
        top: 10px;
        width: 41%;
        white-space: nowrap;
        font-weight: bold;
        color: #388e3c;
    }
    table td:nth-child(1):before { content: "Code"; }
    table td:nth-child(2):before { content: "Libellé"; }
    table td:nth-child(3):before { content: "Fournisseur"; }
    table td:nth-child(4):before { content: "Prix HT"; }
    table td:nth-child(5):before { content: "Prix TTC"; }
    table td:nth-child(6):before { content: "Unité"; }
    table td:nth-child(7):before { content: "TVA (%)"; }
}
@media (max-width: 450px) {
    body { padding: 0 2px; }
    form { flex-direction: column; align-items: stretch; }
    form input[type="text"], form button { border-radius: 4px; margin-bottom: 7px; width: 100%; }
}