.items {
    display: flex;
    flex-wrap: wrap;
    /*gap: 15px;*/
}

.item {
    width: 150px; /* ou flex-basis: 150px; */
    height: 100px;
    justify-content: flex-end;
}

:root {
    --height-header: 8%;
    --height-controls: 235px;/*25%;*/
    --height-tones: 43%;
    --height-keyboard: 24%;
    --box-padding: 8px;
}

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    overflow: hidden;
}

main {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 5px;
}

/* scrollbar */
main ::-webkit-scrollbar {
    width: 8px;
}

main ::-webkit-scrollbar-track {
    background: #54607f;
    border-radius: 4px;
}

    main ::-webkit-scrollbar-thumb {
        background: #3f4960;
        border-radius: 4px;
    }

        main ::-webkit-scrollbar-thumb:hover {
            background: #1e1e1e;
        }

/* Box styles */
.box {
    box-sizing: border-box;
   /* border: 2px solid #dc2626;
    border-radius: 12px;*/
    padding: var(--box-padding);
    overflow-y: auto;
}

/* Row 1 : 3 columns */
.header {
    display: flex;
    height: var(--height-header);
}

    .header .box-1 {
        flex: 2;
    }

    .header .box-2 {
        flex: 5;
    }

    .header .box-3 {
        flex: 2;
    }

/* Row 2 : 3 columns */
.row-2 {
    display: flex;
    height: var(--height-controls);
}

    .row-2 .box-4 {
        flex: 1;
    }

    .row-2 .box-5 {
        flex: 0 0 380px; /* Ne grandit pas, ne rétrécit pas, largeur fixe 200px */;
    }

    .row-2 .box-6 {
        flex: 5;
    }

/* Row 3 : 2 columns */
.row-3 {
    display: flex;
    height: var(--height-tones);
}

    .row-3 .box-7 {
        flex: 2;
    }

    .row-3 .box-8 {
        flex: 5;
    }

.row-4 {
    display: flex;
}

    .row-4 .box-9 {
        flex: 1;
    }

/* Alignement horizontal */
.align-right {
    display: flex;
    justify-content: flex-end;
}

.align-center {
    display: flex;
    justify-content: center;
}

/* Alignement vertical */
.align-v-center {
    display: flex;
    align-items: center;
    height: 100%;
}

.align-v-top {
    display: flex;
    align-items: flex-start;
    height: 100%;
}

.align-v-bottom {
    display: flex;
    align-items: flex-end;
    height: 100%;
}

/* Combinaisons utiles */
.align-right-center {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
}

.align-center-center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.align-between-center {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

/* Media query pour smartphone */
@media (max-width: 576px) {
    html, body {
        overflow: auto; /* Réactive le scroll */
        height: auto; /* Hauteur automatique */
    }

    main {
        padding: 3px;
        gap: 3px;
    }

    /* Row 1 : Passe en colonne sur mobile */
    .header {
        flex-wrap: wrap;
        height: 60px;
        gap: 3px;
    }
        .header .box-2 {
            display: none;
        }

        .header .box-1,
        .header .box-3 {
            flex: 1 ;
        }

    .header .box-1 h1 {
        font-size: 1.2rem; /* Titre plus petit sur mobile */
    }

    /* Row 2 : Passe en colonne sur mobile */
    .row-2 {
        flex-wrap: wrap;
        height: auto;
        gap: 3px;
    }

        .row-2 .box-4,
        .row-2 .box-5,
        .row-2 .box-6 {
            flex: 1 1 100%;
            min-height: 100px;
        }

        .row-2 .box-5 {
            flex: 1 1 100%; /* Annule la largeur fixe sur mobile */
        }

    /* Row 3 : Passe en colonne sur mobile */
    .row-3 {
        flex-wrap: wrap;
        height: auto;
        gap: 3px;
    }

        .row-3 .box-7,
        .row-3 .box-8 {
            flex: 1 1 100%;
            min-height: 200px;
        }

    /* Row 4 : Reste pareil mais ajuste la hauteur */
    .row-4 {
        height: auto;
    }

        .row-4 .box-9 {
            min-height: 150px;
        }

    /* Réduit le padding des box sur mobile */
    .box {
        padding: 8px;
    }
}

/* Pour les très petits écrans */
@media (max-width: 480px) {
    main {
        padding: 2px;
    }

    .box {
        padding: 5px;
        border-width: 1px;
    }
}