:root {
    --modu-resi-grab-width: 0px;

    /* Largeurs sur grand écran */
    --modu-filt-width-large: calc(min(160px, 20%));
    --modu-list-width-large: calc(50%);
    --modu-edit-width-large: calc(50%);
    --modu-supp-width-large: calc(50%);

    /* Largeurs sur mobile */
    --modu-filt-width: calc(min(160px, 20%));
    --modu-list-width: 50%;
    --modu-edit-width: 50%;
    --modu-supp-width: 50%;
}

@media screen and (min-width: 1200px) {
    :root {
        /* --modu-resi-grab-width: 8px; */
        --modu-filt-width: var(--modu-filt-width-large, calc(min(160px, 20%)));
        --modu-list-width: var(--modu-list-width-large, calc(50%));
        --modu-edit-width: var(--modu-edit-width-large, calc(50%));
        --modu-supp-width: var(--modu-supp-width-large, calc(50%));
    }
}

#modu-list.reduit, #modu-list:has(#filt-corp:empty) {
    --modu-filt-width: 0px;
}

html.resize #modu-list,
html.resize #modu-edit,
html.resize #modu-supp,
html.resize #modu-vole,
html.resize #list-corp {
    transition: none !important;
}

html.resize #modu-list,
html.resize #modu-edit,
html.resize #modu-supp,
html.resize #modu-vole {
    filter: brightness(0.75);
}

html.resize #list-corp .list-corp-lign + .list-corp-lign {
    display: none;
}

.modu-resizer {
    height: 100%;
    width: var(--modu-resi-grab-width);
    min-width: var(--modu-resi-grab-width);
    display: none;

    background-color: #999999;
    cursor: col-resize;
}

.modu-resizer.active {
    background: repeating-linear-gradient(45deg, #EEEEEE 0 16px, #999999 0 32px);
}

@media screen and (min-width: 1480px) {
    #list-filt {
        max-width: var(--modu-filt-width);
        width: var(--modu-filt-width);
    }

    #list-cont {
        max-width: calc(100% - var(--modu-filt-width));
        width: calc(100% - var(--modu-filt-width));
    }

    /* Volet list */
    #page-modu-tran:not(.affi-edit, .affi-supp) #modu-list-resizer {
        display: block;
    }

    #page-modu-tran:not(.affi-edit, .affi-supp) #modu-list {
        min-width: var(--modu-list-width);
        width: var(--modu-list-width);
        max-width: var(--modu-list-width);
    }

    #page-modu-tran:not(.affi-edit, .affi-supp) #modu-edit {
        min-width: var(--modu-edit-width);
        width: var(--modu-edit-width);
        max-width: var(--modu-edit-width);
    }

    #page-modu-tran:not(.affi-edit, .affi-supp) #modu-supp {
        min-width: var(--modu-supp-width);
        width: var(--modu-supp-width);
        max-width: var(--modu-supp-width);
    }

    /* Volet edit */
    #page-modu-tran.affi-edit:not(.affi-supp) #modu-edit-resizer {
        display: block;
    }

    #page-modu-tran.affi-edit:not(.affi-supp) #modu-list {
        min-width: calc(100% - var(--modu-edit-width));
        width: calc(100% - var(--modu-edit-width));
        max-width: calc(100% - var(--modu-edit-width));
    }

    #page-modu-tran.affi-edit:not(.affi-supp) #modu-edit {
        min-width: calc(var(--modu-edit-width) - var(--modu-resi-grab-width));
        width: calc(var(--modu-edit-width) - var(--modu-resi-grab-width));
        max-width: calc(var(--modu-edit-width) - var(--modu-resi-grab-width));
    }

    #page-modu-tran.affi-edit:not(.affi-supp) #modu-supp {
        min-width: 50%;
        width: 50%;
        max-width: 50%;
    }

    /* Volet supp */
    #page-modu-tran.affi-supp #modu-supp-resizer {
        display: block;
    }

    #page-modu-tran.affi-supp #modu-list {
        min-width: 50%;
        width: 50%;
        max-width: 50%;
    }

    #page-modu-tran.affi-supp #modu-edit {
        min-width: calc(100% - var(--modu-supp-width));
        width: calc(100% - var(--modu-supp-width));
        max-width: calc(100% - var(--modu-supp-width));
    }

    #page-modu-tran.affi-supp #modu-supp {
        min-width: calc(var(--modu-supp-width) - var(--modu-resi-grab-width));
        width: calc(var(--modu-supp-width) - var(--modu-resi-grab-width));
        max-width: calc(var(--modu-supp-width) - var(--modu-resi-grab-width));
    }

    /* Volet recherche */
    #page-modu-tran.affi-rech {
        --modu-filt-width: 0px;
    }

    #page-modu-tran.affi-rech #modu-rech {
        min-width: calc(100% - var(--modu-list-width));
        width: calc(100% - var(--modu-list-width));
        max-width: calc(100% - var(--modu-list-width));
    }

    #page-modu-tran.affi-rech #modu-list #list-filt {
        display: none;
    }

    /* Volet volet */
    #modu-vole {
        min-width: calc(var(--modu-edit-width) - var(--modu-resi-grab-width));
        width: calc(var(--modu-edit-width) - var(--modu-resi-grab-width));
        max-width: calc(var(--modu-edit-width) - var(--modu-resi-grab-width));
        right: -50% !important;
    }

    #page-modu-tran.affi-supp #modu-vole {
        min-width: calc(var(--modu-edit-width));
        width: calc(var(--modu-edit-width));
        max-width: calc(var(--modu-edit-width));
        right: calc(0% - var(--modu-edit-width)) !important;
    }

    #page-modu-tran:has(#modu-edit.modu-edit-gran) #modu-vole {
        min-width: 50%;
        width: 50%;
        max-width: 50%;
        right: -50% !important;
    }

    #modu-vole.modu-vole-gauche:not(.modu-plei) {
        min-width: calc(100% - var(--modu-edit-width));
        width: calc(100% - var(--modu-edit-width));
        max-width: calc(100% - var(--modu-edit-width));
        right: calc(-50% + var(--modu-edit-width)) !important;
    }

    #modu-vole.modu-plei {
        --modu-edit-width: 100%;
        --modu-resi-grab-width: 0px;
    }

    /* ------------------------ Forcé à 100% ------------------------ */
    #page-modu-tran.affi-supp #modu-edit.modu-edit-gran {
        min-width: 100%;
        width: 100%;
        max-width: 100%;
    }

    #page-modu-tran.affi-supp-gran, #page-modu-tran.sans-list  {
        --modu-resi-grab-width: 0px;
        --modu-list-width: 50%;
        --modu-supp-width: 50%;
        --modu-edit-width: 50%;
    }
}