@media only screen and (max-width: 1200px) { /* VERTICAL TABLETS */
    form {
        width: 90%;
    }    
}

@media only screen and (max-width: 900px) { /* VERTICAL TABLETS */
    /* Header OK */
    .headerAccount:focus,
    .headerAccount:focus .accountInfo {
        background-color: transparent;
    }
    .menuClose {
        display: block;
    }
    
    
    /* Menu POPUP */
    div.menu {
        transition: 0.7s ease-out;
        left: calc(-220px - 30px - 20px - 12px);
    }
    div.openMenu {
        transition: 0.7s ease-out;
        left: 0;
    }


    /* Article SHIFT LEFT */
    article.learningTable,
    article.content {
        margin-left: 2.5vw;
    }

    .revision {
        /* border: 1px solid red; */
        grid-template-columns: 100%;
    }
    .task {
        grid-area: 1 / 1 / 2 / 2;
    }
    hr {
        grid-area: 2 / 1 / 3 / 2;
    }
    .date {
        grid-area: 3 / 1 / 4 / 2;
    }
    .revise-btn {
        display: none;
    }
    form {
        width: 90%;
    }

    /* Text displayed when there is not category setup */
    .learningTable * div.no_categ {
        left: 47vw;
        transform: translate(-50%, -50%);
        width: 80vw;
    }
    .main-btn {
        width: max-content;
    }
}

/* Appliquer le style seulement lorsque la largeur de l'écran est inférieure à une certaine valeur, par exemple 600px */
@media (max-width: 635px) {
    /* Menu POPUP */
    div.menu {
        left: -100vw;
    }
    div.openMenu {
        left: 0;
        width: 100vw;
    }
    .menu .menuHead {
        font-size: 1.2em;
        margin-bottom: 10px;
        margin-left: 10px;
    }
    .menu nav ul li {
        font-size: 1.4em;
        line-height: 2em;
    }
    .menu nav ul ul li {
        font-size: 1.5em;
        margin-left: -30px;
        width: 70vw;
    }
    .menu nav ul ul li::before {
        margin-right: 15px;
    }


    article.learningTable,
    article.content {
        margin-top: 20px;
    }
    article.learningTable .title h1,
    article.content .title h1 {
        margin-left: 5vw;
    }
    article.learningTable .title p,
    article.content .title p {
        display: none;
    }

    .headerAccount .accountInfo {
        display: none;
    }
    
    table td,
    table th {
      display: none;
    }
    tr {
      display: block;
      margin-bottom: 10px; /* Espacement entre les éléments <tr> */
    }
    tr td {
      display: block;
    }
    tr + tr {
        margin-top: 20px;
    }

    .revision {
        /* border: 1px solid red; */
        grid-template-columns: 80% 20%;
    }
    .task {
        grid-area: 1 / 1 / 2 / 2;
    }
    hr {
        grid-area: 2 / 1 / 3 / 2;
    }
    .date {
        grid-area: 3 / 1 / 4 / 2;
    }
    .revise-btn {
        display: block;
    }

    .learningTable * tr:nth-child(6n+1) td h2 {
        border-bottom: 5px solid var(--accentBlue);
    }
    .learningTable * tr:nth-child(6n+2) td h2 {
        border-bottom: 5px solid var(--accentGreen);
    }
    .learningTable * tr:nth-child(6n+3) td h2 {
        border-bottom: 5px solid var(--accentRed);
    }
    .learningTable * tr:nth-child(6n+4) td h2 {
        border-bottom: 5px solid var(--accentYellow);
    }
    .learningTable * tr:nth-child(6n+5) td h2 {
        border-bottom: 5px solid var(--accentCyan);
    }

    .learningTable * tr:nth-child(6n+1) td hr {
        border: 1px solid var(--accentBlue);
    }
    .learningTable * tr:nth-child(6n+2) td hr {
        border: 1px solid var(--accentGreen);
    }
    .learningTable * tr:nth-child(6n+3) td hr {
        border: 1px solid var(--accentRed);
    }
    .learningTable * tr:nth-child(6n+4) td hr {
        border: 1px solid var(--accentYellow);
    }
    .learningTable * tr:nth-child(6n+5) td hr {
        border: 1px solid var(--accentCyan);
    }

    .learningTable * td a .cellAdd {
        transition: 0.2s;
        line-height: 55px;
        width: 55px;
        text-align: center;
        font-size: 1.5em;
        border-radius: 50%;
        background-color: transparent;
        margin: 5px 0 0 50%;
        transform: translateX(-50%);
        color: transparent;
        text-decoration: none;
        box-shadow: 0px 3px 7px 0px var(--accentBlueT);
        -webkit-box-shadow: 0px 3px 7px 0px var(--accentBlueT);
        -moz-box-shadow: 0px 3px 7px 0px var(--accentBlueT);
        color: var(--defaultText);
        background-color: var(--white);
    }

    .tableForm {
        min-width: 95vw;
    }
    .tableTitle {
        font-size: 0.85em;
        /* width: 91%; */
    }
    .tableLine {
        font-size: 0.8em;
        /* width: 91%; */
    }
    .tableLine h6 {
        margin-right: 5px;
    }


    .content h3,
    .content * h3 {
        display: none;
    }
}