/* Version mobile ≤ 767px */
/* Tables transformées en cartes empilées lisibles */

@media (max-width: 767px) {
    h1 {
        font-size: 1.5em;
    }

    nav ul {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    table {
        border: 0;
        box-shadow: none;
    }

    table thead {
        display: none;
    }

    table tr {
        display: grid;
        grid-template-columns: 1fr;
        background: white;
        margin-bottom: 1rem;
        border-radius: var(--radius);
        padding: 0.5rem 0.8rem;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    table td {
        display: grid;
        grid-template-columns: 30% 70%;
        align-items: center;
        padding: 0.4rem 0;
        border: none;
    }

    table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--primary);
        padding-right: 0.5rem;
    }

    tr:hover {
        background: white;
    }

    button {
        width: 100%;
    }

    #div-saisie {
        padding-top: 1em;
        flex-direction: column;
        align-items: stretch;
        gap: 1em;
    }

    #div-saisie > * {
        width: 100%;
    }

    .td-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .td-actions form {
        width: 100%;
    }

    .btn-action {
        width: 100%;
    }

    #login-section form {
        flex-direction: column;
        align-items: stretch;
    }

    #login-section input[type="password"],
    #login-section button {
        width: 100%;
    }
}