/* Desktop */
@media screen and (min-width : 1280px) {
    
    /* meublepres */

    #cont-meublepres{
        margin-left: 11vw;
    }
    #gridmp{
        margin-left: 12vw;
        grid-template-columns: repeat(20, 4vw);
        grid-template-rows: repeat(10, 4vw);
    }
    #gridmp img{
        width: 100%;
        height: 100%;
        object-fit: contain;
        box-sizing: border-box;
    }
    #meub_img {
        grid-column: 2/8;
        grid-row: 1/7;
    }
    .slider {
        grid-column: 1/9;
        grid-row: 8/10;
        display: flex;
        gap: 1vw;
    }
    #gridmp h2 {
        grid-column: 10/21;
        grid-row: 2/4;
        font-family: 'rocket';
        font-weight: 800;
        font-size: 4rem;
    }
    #gridmp form {
        grid-column: 10/16;
        grid-row: 4/11;
        margin-top: 4vh;
    }
    #gridmp label {
        margin-left: 3vw;
    }
    #img-ess {
        grid-column: 16/18;
        grid-row: 4/6;
        margin-top: 4vh;
    }
    .thumbmeub{
        cursor: pointer;
        max-width: 7vw;
    }
    #config {
        width: 20vw;
        display: flex;
        flex-direction: column;
        gap: 2.5vh;
    }
    #commentaire-container > p {
        margin-left: 3vw;
        font-size: 1.2em;
        font-weight: 600;
    }
    #options-container {
        margin-left: 3vw;
        display: flex;
        flex-direction: column;
        gap: 1vh;
    }
    #options-container label {
        margin-left: 0;
        font-size: 1.2em;
        cursor: pointer;
    }
    #option1, #option2 {
        cursor: pointer;
    }
    #config :nth-child(5) {
        display: none;
    }
    #qty {
        margin-right: 0;
        border: none;
    }
    #trait {
        grid-column: 9/10;
        grid-row: 2/10;
        border-left: 2px solid var(--main-color);
    }
    #aa {
        display: flex;
        justify-content: end;
        align-items: center;
        gap: 1vw;
        position: relative;
        top: 5vh;
        left: 10vw;
        font-size: 1.8em;
        width: 30vw;
        height: 4vh;
    }
    #aa > input {
        font-size: 0.8em;
        border-radius: 2vh;
        width: 40%;
    }
}

/* Tablette */
@media  screen and (min-width : 768px) and (max-width : 1279px) {
    #gridmp {
        width: 80%;
        margin-left: 10%;
        display: flex;
        flex-direction: column;
        gap: 2vh;
        position: relative;
        overflow: hidden;
        align-items: center;
        justify-content: space-around;
    }
    #gridmp h2 {
        order: -1;
        align-self: flex-start;
        margin-left: 5vw;
    }
    #gridmp form {
        align-self: flex-start;
        margin-left: 5vw;
    }
    .slider {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 40vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .thumbmeub {
        position: absolute;
        left: 0; top: 0vh;
        width: 100%;
        height: 60vh;
        object-fit: contain;
        opacity: 0;
        pointer-events: none;
        transition: transform 0.5s, opacity 0.5s;
        z-index: 1;
    }
    .thumbmeub.active {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
        z-index: 2;
    }
    .thumbmeub.slide-left {
        transform: translateX(-100%);
        opacity: 0;
    }
    .thumbmeub.slide-right {
        transform: translateX(100%);
        opacity: 0;
    }
    #config :nth-child(5), #meub_img,#img-ess {
        display: none;
    }
    #commentaire {
        font-weight: 600;
        height: 3vh;
    }
    #ref {
        width: max-content;
        padding-left: 3%;
        text-align: right;
    }
    #essence, #finition {
        width: 20%;
        text-align: right;
    }
    #qty {
        width: 15%;
        text-align: right;
    }
    #aa {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        margin-top: 4vh;
    }
    #tot {
        font-size: 1.5rem;
        font-weight: 700;
    }
}

/* Mobile */
@media screen and (max-width : 767px) {
    #gridmp {
        width: 96%;
        margin-left: 2%;
        display: flex;
        flex-direction: column;
        gap: 2vh;
        align-items: center;
        justify-content: space-around;
    }
    .slider {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 40vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .thumbmeub {
        position: absolute;
        left: 0; top: 0vh;
        object-fit: contain;
        opacity: 0;
        pointer-events: none;
        transition: transform 0.5s, opacity 0.5s;
        z-index: 1;
    }
    .thumbmeub.active {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
        z-index: 2;
    }
    .thumbmeub.slide-left {
        transform: translateX(-100%);
        opacity: 0;
    }
    .thumbmeub.slide-right {
        transform: translateX(100%);
        opacity: 0;
    }
    #gridmp h2 {
        order: -1;
        align-self: flex-start;
        margin: 0 4vw;
    }
    #config {
        align-self: flex-start;
        margin-left: 5vw;
    }
    #config :nth-child(5), #meub_img,#img-ess {
        display: none;
    }
    #commentaire {
        font-weight: 600;
        height: 3vh;
    }
    #ref {
        width: max-content;
        padding-left: 3%;
        text-align: right;
    }
    #essence, #finition {
        width: 20%;
        text-align: right;
    }
    #qty {
        width: 15%;
        text-align: right;
    }
    #aa {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        margin-top: 4vh;
    }
    #tot {
        font-size: 1.5rem;
        font-weight: 700;
    }
}