body {
    font-family: 'Segoe UI', sans-serif;
    background: #f7f9fa;
    color: #333;
    margin: 0;
    padding: 0 0 40px 0;
}
h1 {
    text-align: center;
    color: #2c4f7b;
    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 #ccd;
    min-width: 220px;
    font-size: 1em;
}
form button {
    padding: 8px 16px;
    border: none;
    background: #1976d2;
    color: white;
    font-weight: bold;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    transition: background 0.2s;
}
form button:hover {
    background: #1255a5;
}
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: #1976d2;
    color: #fff;
    padding: 12px 7px;
    font-weight: 600;
    font-size: 1em;
    text-align: left;
    border-bottom: 2px solid #14549c;
}
table tbody td {
    padding: 10px 7px;
    border-bottom: 1px solid #eef2fa;
    font-size: 0.98em;
    vertical-align: top;
}
table tr:nth-child(even) {
    background: #f4f8fc;
}
table tr:hover {
    background: #e3eefd;
    transition: background 0.15s;
}
.button, .btn-action {
    background: #1976d2;
    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: #14549c;
}
@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 #ccd7e150;
        background: #fff;
    }
    table td {
        padding: 10px 7px 10px 45%;
        position: relative;
        border: none;
        border-bottom: 1px solid #f2f5fa;
        min-height: 38px;
    }
    table td:before {
        position: absolute;
        left: 10px;
        top: 10px;
        width: 41%;
        white-space: nowrap;
        font-weight: bold;
        color: #1976d2;
    }
    /* Adapte les intitulés selon le nombre et l'ordre de tes colonnes */
    table td:nth-child(1):before { content: "Nom"; }
    table td:nth-child(2):before { content: "Adresse"; }
    table td:nth-child(3):before { content: "Téléphone"; }
    table td:nth-child(4):before { content: "Email"; }
}
@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%; }
}