.resizable-offcanvas {
    min-width: 250px;
    max-width: 80vw;
    /*transition: none !important;*/ /* Désactive la transition pendant le redimensionnement */
}

.resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: transparent;
    cursor: col-resize;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .resize-handle:before {
        content: "\f7a5";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 24px;
        width: 5px;
        overflow: hidden;
        color: var(--primary-color-light-40);
    }

    .resize-handle:hover {
        background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    }

    .resize-handle:active {
        background: color-mix(in srgb, var(--primary-color) 20%, transparent);
    }

/* Pour offcanvas de droite */
.offcanvas-end .resize-handle {
    left: 0;
    right: auto;
}
    .offcanvas-end .resize-handle:before {
        padding-left: 2px;
    }