/* Sur-mesure.php */

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

    #smm {
        margin-top: 10vh;
        margin-left: 14vw;
        width: 84vw;
        display: grid;
        grid-template: repeat(5, 12vh)  / repeat(10, 1fr);
    }
    #smm input {
        margin-right: 0;
    }
    #smm-intro {
        grid-column: span 10;
        grid-row: 1/2;
    }
    #smm-1a {
        grid-column: 1/3;
        grid-row: 2/3;
        padding: 1vw;
    }
    #smm-1b {
        display: none;
        grid-column: 1/3;
        grid-row: 3/4;
        padding: 1vw;
    }
    .radio-input {
        display: flex;
        flex-direction: column;
    }
    .radio-input label {
        display: flex;
        gap: 0.5vw;
        height: 3vh;
        align-items: center;
        cursor: pointer;
    }
    .radio-input input[type="radio"] {
        display: none;
    }
    .radio-circle {
        width: 1.5vh;
        height: 1.5vh;
        border-radius: 50%;
        border: 2px solid var(--main-color);
        position: relative;
    }
    .radio-circle::before {
        content: "";
        display: block;
        width: 1vh;
        height: 1vh;
        border-radius: 50%;
        background-color: #ddd;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0);
        transition: all 0.2s ease-in-out;
    }
    .radio-input input[type="radio"]:checked + .radio-circle::before {
        transform: translate(-50%, -50%) scale(1);
        background-color: var(--main-color);
    }
    #smm-2 {
        grid-column: 3/8;
        grid-row: 2/7;
        padding: 1vh 2vw;
        border-left: 2px solid var(--main-color);
        display: flex;
        flex-direction: column;
        gap: 1vh;
    }
    label[for="p_img"],label[for="m_img"] {
        padding: 0.3vh 0.5vw;
        border: 2px solid var(--main-color);
        border-radius: 1vh;
        cursor: pointer;
    }
    #p_img,#m_img {
        display: none;
    }
    .file {
        background-color: rgba(0, 0, 0, 0.05);
        border: 2px solid var(--main-color);
        border-radius: 1vh;
        padding: 0.3vh 0.3vw;
        max-width: 90%;
    }
    .file > li {
        display: flex;
        justify-content: space-between;
        height: 5vh;
        margin: 0.5vh 0;
    }
    #mplus {
        cursor: pointer;
        margin-left: 3vw;
    }
    #reset-list {
        cursor: pointer;
        margin-left: 3vw;
    }
    #smm-3 {
        grid-column: 3/8;
        grid-row: 2/7;
        padding: 1vw;
        border-left: 2px solid var(--main-color);
        display: none;
        flex-direction: column;
        gap: 1vh;
    }
    #smm-4 {
        grid-column: 3/8;
        grid-row: 2/7;
        padding: 1vw;
        border-left: 2px solid var(--main-color);
        display: none;
        flex-direction: column;
        gap: 1vh;
    }
    .button-submit {
        width: 40%;
        margin-left: 30%;
        margin-top: 3vh;
        margin-bottom: 3vh;
    }
    textarea {
        resize: none;
        padding: 0.5vw;
        border-radius: 1vh;
    }
    input[type="number"] {
        text-align: end;
    }
}

/* Tablette */
@media  screen and (min-width : 768px) and (max-width : 1279px) {
    #smm {
        display: flex;
        flex-direction: column;
        gap: 2vh;
        width: 90%;
        margin: 10vh 5% 0 5%;
    }
    #smm-1a {
        display: flex;
        flex-direction: column;
    }
    #smm-1a > div {
        display: flex;
        justify-content: space-around;
    }
    #smm-1a > div > label {
        width:50%;
        display: flex;
        gap: 2vw
    }
    #smm-1b {
        display: none;
    }
    #smm-1b > div {
        width: 100%;
        display: flex;
        justify-content: space-around;
    }
    #smm-1b > div > label {
        width:50%;
        display: flex;
        gap: 2vw
    }
    #smm-2 {
        display: flex;
        flex-direction: column;
        gap: 1vh;
    }
    label[for="p_img"],label[for="m_img"] {
        padding: 0.5vh 0.8vw;
        border: 2px solid var(--main-color);
        border-radius: 1vh;
    }
    #p_img,#m_img {
        display: none;
    }
    .file {
        background-color: rgba(0, 0, 0, 0.05);
        border: 2px solid var(--main-color);
        border-radius: 1vh;
        padding: 0.3vh 0.3vw;
        max-width: 90%;
    }
    .file > li {
        display: flex;
        justify-content: space-between;
        height: 5vh;
        margin: 0.5vh 0;
    }
    input[type="number"] {
        text-align: end;
    }
    #mplus {
        margin-left: 3vw;
    }
    #reset-list {
        margin-left: 3vw;
    }
    #smm-list {
        margin-left: 3vw;
    }
    #smm-3, #smm-4 {
        display: none;
        flex-direction: column;
        gap: 1vh;
    }
    #smm-2 > div:last-of-type, #smm-3 > div:last-of-type, #smm-4 > div:last-of-type {
        justify-content: center;
    }
}

/* Mobile */
@media screen and (max-width : 767px) {
    #smm {
        display: flex;
        flex-direction: column;
        gap: 2vh;
        width: 90%;
        margin: 10vh 5% 0 5%;
    }
    #smm-1a {
        display: flex;
        flex-direction: column;
    }
    #smm-1a > div {
        display: flex;
        flex-direction: column;
    }
    #smm-1a > div > label {
        display: flex;
        gap: 2vw
    }
    #smm-1b {
        display: none;
    }
    #smm-1b > div {
        display: flex;
        flex-direction: column;
    }
    #smm-1b > div > label {
        display: flex;
        gap: 2vw
    }
    #smm-2 {
        display: flex;
        flex-direction: column;
        gap: 1vh;
    }
    label[for="p_img"],label[for="m_img"] {
        width: 100%;
        padding: 0.5vh 0.5vw;
        border: 2px solid var(--main-color);
        border-radius: 1vh;
        cursor: pointer;
        font-size: 0.9rem;
        text-align: center;
    }
    #p_img, #m_img {
        display: none;
    }
    .file {
        background-color: rgba(0, 0, 0, 0.05);
        border: 2px solid var(--main-color);
        border-radius: 1vh;
        padding: 0.3vh 0.3vw;
        max-width: 90%;
    }
    .file > li {
        display: flex;
        justify-content: space-between;
        height: 5vh;
        margin: 0.5vh 0;
    }
    input[type="number"] {
        text-align: end;
    }
    #mplus {
        margin-left: 3vw;
    }
    #reset-list {
        margin-left: 3vw;
    }
    #smm-3, #smm-4 {
        display: none;
        flex-direction: column;
        gap: 1vh;
    }
    #smm-2 input, #smm-3 input, #smm-4 input {
        width: 30%;
    }
    #smm-2 > div:last-of-type, #smm-3 > div:last-of-type, #smm-4 > div:last-of-type {
        justify-content: center;
    }
}