@media screen and (max-width: 960px) {

    :root {
        --color-black: #000;
        --color-white: #fff;
        --TOP-H: 10vh;
        --TOP-L: 60vh;
        --FONT-SIZE-P: 1.2rem;
        --PADDING-P: .5rem;
    }


    /* ============================================
   RESPONSIVE - MOBILE
   ============================================ */
 
    /* Bloque le scroll horizontal et latéral du body/document */
    html, body {
        overflow-x: hidden;
        overflow-y: auto;
        width: 100vw;
        /* Empêche le scroll horizontal indésirable */
        max-width: 100vw;
    }



    /* Navigation - 2 niveaux */
    header {
        height: 10vh;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        z-index: 9999;
    }

    #navigation {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0;
        /* padding: 1vh 0vw; */
        padding: .5rem .1rem .5rem .3rem;
        height: 100%;
        width: 100%;
        align-items: flex-start;
    }

    #navigation button,
    h3 {
        font-size: 1.5rem;
        line-height: 1;
        padding: 0;
        margin: 0;
        /* text-align: center; */
    }

    #navigation button.active,
    h3.active {
        font-family: "PPPlayground", sans-serif;
        padding: 0;
    }

    /* Main */
    main {
        padding-top: var(--TOP-H);
        width: 100vw;
        max-height: 80vh;
        margin: 0;
    }

    /* Intro Message */
    .intro-message {
        min-width: auto;
        width: 85vw;
        padding: 2rem;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    h1 {
        font-size: 2rem;
        line-height: .9;
    }


    p {
        font-size: var(--FONT-SIZE-P);
        line-height: .9;
    }

    /* Section Information - top: var(--TOP-H), height: 40vh */
    #section-information {
        position: fixed;
        top: var(--TOP-H);
        right: 0;
        width: 100vw;
        height: 50vh;
    }

    #information-container {
        padding: var(--PADDING-P);
        font-size: var(--FONT-SIZE-P);
    }

    .toc-item {
        font-size: var(--FONT-SIZE-P);
    }

    .toc-item a {
        font-size: var(--FONT-SIZE-P);
    }

    .doc-section h2 {
        font-size: 1.4rem;
    }

    .doc-section p {
        font-size: var(--FONT-SIZE-P);
    }

    /* Section Raster - top: var(--TOP-H), height: 40vh */
    #raster-container {
        position: fixed;
        top: var(--TOP-H);
        left: 0;
        width: 100vw;
        height: 40vh;
    }

    .raster-image-control {
        top: 0.5rem;
        right: 0.5rem;
    }

    .raster-image-circle {
        width: 1.2rem;
        height: 1.2rem;
    }

    .raster-image-text {
        font-size: 1rem;
    }

    /* Section Apprentissage - top: 60vh, height: 40vh */
    #section-apprentissage {
        position: fixed;
        top: 60vh;
        left: 0;
        width: 100vw;
        height: 40vh;
        padding: .5rem;
    }

        .apprentissage-question {
            margin-bottom: .5rem;
            padding-bottom: .5rem;
        }

    .apprentissage-question-text {
        font-size: var(--FONT-SIZE-P);
        margin-bottom: .1rem;
    }

    .apprentissage-select {
        padding: .05rem;
        font-size: var(--FONT-SIZE-P);
    }

    .apprentissage-end {
        font-size: var(--FONT-SIZE-P);
        padding: var(--PADDING-P);
    }

    /* Section Langage - top: 40vh, height: 60vh */
    #section-langage {
        position: fixed;
        top: 60vh;
        left: 0;
        width: 100vw;
        height: 60vh;
    }

    /* Database - var(--TOP-H) */
    #database-container {
        position: fixed;
        top: var(--TOP-H);
        left: 0;
        width: 100vw;
        height: 40vh;
        z-index: -1;
    }

    /* Taille responsive des carrés dans la database */
    #database-container {
        --db-square-size: 50px;
        /* Taille réduite pour mobile */
    }

    /* Section Langage - Letters Selector */
    #letters-selector {
        width: 100vw;
        height: 39vh;
        position: fixed;
        top: 60vh;
        left: 0vw;
        background: var(--color-white);
        display: flex;
        flex-direction: column;
        overflow: hidden;

    }

    .letters-wrapper {
        flex: 1;
        display: flex;
        align-items: center;
        align-self: center;
        justify-content: center;
        width: auto;
        height: auto;
        padding: 1rem;
        box-sizing: border-box;
        overflow: hidden;
    }

    .letters-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 0;
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        overflow: hidden;
        box-sizing: border-box;
    }

    .letter-item {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        color: var(--color-black);
        font-family: "forme", sans-serif;
        font-size: 12rem;
        user-select: none;
        overflow: hidden;
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }

    .save-button {
        font-size: 0.9rem;
        padding: 8px;
        width: 60%;
    }

}