@media (min-device-width: 1024px) and (aspect-ratio < 1) {
  
    /**
 * SOLVYLA COU - TALL
 * Version 0.1
 * Desktop / grand ecran en format portrait.
 * Les libelles courts ne seront actives qu'au breakpoint critique.
 */

    .solvyla-cou .cou-app {
        width: 100%;
        height: 100dvh;
        overflow: hidden;
    }

    .solvyla-cou .cou-topbar {
        width: 100%;
    }

    .solvyla-cou .cou-body {
        display: grid;
        grid-template-columns: minmax(190px, 22vw) minmax(0, 1fr);
        min-height: 0;
    }

    .solvyla-cou .cou-sidebar {
        min-width: 0;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .solvyla-cou .cou-workspace {
        min-width: 0;
        min-height: 0;
        overflow: auto;
    }

    .solvyla-cou .cou-menu-label-short {
        display: none;
    }
}

/* TALL COMPACT : meme logique visuelle que le mobile portrait.
 * Le seuil 1100px est provisoire et sera calibre apres tests visuels.
 */
@media (min-width: 1024px) and (max-width: 1100px) and (aspect-ratio < 1/1) {
    .solvyla-cou .cou-body {
        display: flex;
        flex-direction: column;
        min-width: 0;
        min-height: 0;
    }

    .solvyla-cou .cou-sidebar {
        width: 100%;
        min-width: 0;
        min-height: auto;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        flex: 0 0 auto;
    }

    .solvyla-cou .cou-navigation {
        display: flex;
        flex-direction: row;
        width: max-content;
        min-width: 100%;
    }

    .solvyla-cou .cou-menu-group {
        display: flex;
        flex: 0 0 auto;
    }

    .solvyla-cou .cou-menu-title,
    .solvyla-cou .cou-menu-content {
        flex: 0 0 auto;
    }

    .solvyla-cou .cou-menu-content {
        display: flex;
        flex-direction: row;
    }

    .solvyla-cou .cou-menu-label-long {
        display: none;
    }

    .solvyla-cou .cou-menu-label-short {
        display: inline;
    }

    .solvyla-cou .cou-workspace {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        min-height: 0;
        overflow: auto;
    }
}