@media (max-device-width: 520px)
    and (orientation: portrait) 
    and (hover: none) 
    and (pointer: coarse){

 /**
 * SOLVYLA COU - MOBILE PORTRAIT
 * Version 0.1
 * Smartphone tactile portrait.
 * Header + menu horizontal scrollable + workspace pleine largeur.
 */     
    .solvyla-cou .cou-app {
        width: 100%;
        height: 100dvh;
        min-height: 100dvh;
        overflow: hidden;
        touch-action: auto;
    }

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

    .solvyla-cou .cou-body {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: calc(100dvh - var(--cou-topbar-height));
        min-width: 0;
        min-height: 0;
    }

    /* BARRE DE MENU SOUS LA TOPBAR */
    .solvyla-cou .cou-sidebar {
        position: relative;
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        min-height: auto;
        padding: 1vh 1vw;
        padding-right: 38px;
        overflow-x: auto;
        overflow-y: hidden;
        background: var(--cou-blue-dark);
        color: #ffffff;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        touch-action: pan-x pinch-zoom;
    }

    .solvyla-cou .cou-sidebar::-webkit-scrollbar {
        display: none;
    }

    .solvyla-cou .cou-navigation {
        display: flex;
        flex-flow: row wrap;
        align-items: flex-start;
        align-content: flex-start;
        width: max-content;
        min-width: 100%;
        column-gap: 1vw;
        row-gap: 1.8vh;
        color: #ffffff;
    }

    .solvyla-cou .cou-menu-group {
        display: flex;
        flex: 0 0 auto;
        align-items: flex-start;
        width: auto;
        margin: 0;
        border-radius: 0.7vmin;
        transition:
            background 0.22s ease,
            box-shadow 0.22s ease;
    }

    .solvyla-cou .cou-menu-title {
        flex: 0 0 auto;
        width: auto;
        min-height: 44px;
        padding: 0.8vh 1.5vw;
        border: 0;
        background: transparent;
        color: #ffffff;
        font-family: 'Inter', sans-serif;
        font-size: 1.3em;
        font-weight: 700;
        text-align: left;
        white-space: nowrap;
        text-shadow: 0 0.2vh 0.3vh rgba(0, 0, 0, 0.28);
        cursor: pointer;
        touch-action: manipulation;
    }

    .solvyla-cou .cou-menu-group.is-open {
        background: rgba(0, 25, 52, 0.32);
        box-shadow:
            inset 0 0.35vh 0.7vh rgba(0, 0, 0, 0.30),
            inset 0 -0.15vh 0.3vh rgba(255, 255, 255, 0.06);
    }

    .solvyla-cou .cou-menu-content {
        display: flex;
        flex: 0 0 auto;
        flex-direction: row;
        align-items: stretch;
        width: max-content;
        padding-bottom: 0;
    }

    .solvyla-cou .cou-menu-content button {
        flex: 0 0 auto;
        width: auto;
        min-height: 44px;
        padding: 0.7vh 1.5vw;
        border: 0;
        background: transparent;
        color: #ffffff;
        font-family: 'Inter', sans-serif;
        font-size: 1em;
        font-weight: 700;
        text-align: left;
        white-space: nowrap;
        cursor: pointer;
        touch-action: manipulation;
    }

    /* En portrait etroit, les libelles courts pourront etre fournis par languages/. */
    .solvyla-cou .cou-menu-label-long {
        display: none;
    }

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

    /* ZONE DE TRAVAIL */
    .solvyla-cou .cou-workspace {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        min-height: 0;
        overflow: auto;
        background: transparent;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y pinch-zoom;
    }

    /* Futur module : 98% de la largeur en portrait. */
    .solvyla-cou .cou-module {
        width: 98%;
        max-width: 98%;
        margin-inline: auto;
    }
}