.page-colocation {
        max-width: 1100px;
        margin: 24px auto;
        padding: 16px;
    }

    .page-colocation section {
        margin: 20px 0;
        padding: 20px;
        border: 1px solid #d5dde5;
        border-radius: 12px;
        background: #fff;
        color: #243247;
    }

    .colocation-montant {
        font-size: 1.5rem;
        font-weight: bold;
    }

    .colocation-grille {
        display: grid;
        grid-template-columns: repeat(
            auto-fit,
            minmax(220px, 1fr)
        );
        gap: 16px;
    }

    .colocation-saisie label {
        display: block;
        margin: 14px 0;
    }

    .colocation-saisie input:not([type="hidden"]),
    .colocation-saisie select {
        display: block;
        width: 100%;
        margin-top: 6px;
        padding: 10px;
        box-sizing: border-box;
    }

    .page-colocation button {
        padding: 10px 14px;
        cursor: pointer;
    }

    .colocation-boutons {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
    }

    #colocation-apercu {
        font-weight: bold;
    }

    .colocation-tableau {
        overflow-x: auto;
    }

    .colocation-tableau table {
        width: 100%;
        border-collapse: collapse;
    }

    .colocation-tableau th,
    .colocation-tableau td {
        padding: 10px;
        text-align: left;
        border-bottom: 1px solid #ddd;
    }

    /* Actions compactes dans l’historique */
.colocation-history td:last-child {
    white-space: nowrap;
}

.colocation-history td:last-child form {
    display: inline-block;
    width: auto;
    margin: 0 0 0 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Boutons icônes Modifier et Supprimer */
.page-colocation .colocation-history .colocation-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: #4f46e5;
    color: #fff;
    font-size: 17px;
    text-decoration: none;
    cursor: pointer;
}

.page-colocation .colocation-history .colocation-action:hover {
    background: #4338ca;
}

.page-colocation .colocation-history .colocation-action:focus-visible {
    outline: 2px solid #4338ca;
    outline-offset: 3px;
}

    .page-colocation [hidden] {
        display: none !important;
    }

/* Date de l’historique sur une seule ligne */
.colocation-history td:first-child,
.colocation-history th:first-child {
    white-space: nowrap;
}
/* Bouton pour ouvrir ou refermer le formulaire */
#colocation-titre-formulaire {
    display: list-item;
    width: fit-content;
    padding: 12px 18px;
    border-radius: 8px;
    background: #4f46e5;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

#colocation-titre-formulaire:hover {
    background: #4338ca;
}

#colocation-titre-formulaire:focus-visible {
    outline: 2px solid #4338ca;
    outline-offset: 3px;
}

#colocation-saisie[open] > summary {
    margin-bottom: 20px;
	
}

.colocation-history .colocation-detail {
    display: block;
    margin: 2px 0 0;
    padding: 0;
    line-height: 1.3;
}

/* Historique adapté aux téléphones */
@media (max-width: 700px) {
    .page-colocation {
        margin: 12px auto;
        padding: 8px;
    }

    .page-colocation section {
        padding: 12px;
    }

    .page-colocation .colocation-tableau {
        overflow: visible;
    }

    .page-colocation .colocation-history,
    .page-colocation .colocation-history tbody {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .page-colocation .colocation-history thead {
        display: none;
    }

    .page-colocation .colocation-history tbody > tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "date actions"
            "operation operation"
            "personne total"
            "gwen damien"
            "solde solde";
        gap: 12px;
        margin-bottom: 12px;
        padding: 12px;
        border: 1px solid #d5dde5;
        border-radius: 10px;
        background: #fff;
    }

    .page-colocation .colocation-history tbody > tr > td {
        display: block;
        width: auto;
        min-width: 0;
        padding: 0;
        border: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* Libellés des montants et des personnes */
    .page-colocation .colocation-history td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        color: #596579;
        font-size: 0.8rem;
        font-weight: normal;
    }

    .page-colocation .colocation-history .colocation-date {
        grid-area: date;
        align-self: center;
        white-space: nowrap;
        font-weight: 600;
    }

    .page-colocation .colocation-history .colocation-date small {
        margin: 0 0 3px;
        text-transform: capitalize;
        font-weight: normal;
    }

    .page-colocation .colocation-history .colocation-actions {
        grid-area: actions;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 8px;
    }

    .page-colocation .colocation-history .colocation-actions form {
        margin: 0;
    }

    .page-colocation .colocation-history .colocation-action {
        width: 44px;
        height: 44px;
    }

    .page-colocation .colocation-history .colocation-operation {
        grid-area: operation;
        padding-bottom: 10px;
        border-bottom: 1px solid #e5e7eb;
        font-weight: 600;
    }

    .page-colocation .colocation-history .colocation-operation small {
        font-weight: normal;
    }

    .page-colocation .colocation-history .colocation-personne {
        grid-area: personne;
    }

    .page-colocation .colocation-history .colocation-total {
        grid-area: total;
        font-weight: 700;
    }

    .page-colocation .colocation-history .colocation-part-gwen {
        grid-area: gwen;
    }

    .page-colocation .colocation-history .colocation-part-damien {
        grid-area: damien;
    }

    .page-colocation .colocation-history .colocation-solde-ligne {
        grid-area: solde;
        padding: 10px;
        border-radius: 6px;
        background: #eef2ff;
        font-weight: 700;
    }

    .page-colocation .colocation-history .colocation-solde-ligne small {
        font-weight: normal;
    }

    /* Message lorsque l’historique est vide */
    .page-colocation .colocation-history td[colspan] {
        grid-column: 1 / -1;
    }
}