/* Ajustements pour les images de fond / titres */
.main-global{
    padding: 0.1vh 0;
}

.main-payment{
    display: flex;
    gap: 5vw;
    padding-top: 3vh;
}

.section-title{
    margin-left: 10vw;
}

/* Section formulaire */
.form{
    display: flex;
    flex-direction: column;
    gap: 15vh;
    margin: 8vh 0 0 10vw;
    align-items: end;
}

.form-section{
    display: flex;
    flex-direction: column;
    gap: 5vh;
}

.form-row{
    display: flex;
    gap: 7vw;
}

.form-label{
    font-family: Lora;
    font-size: 15px;
    font-weight: 700;
    margin-left: 2vw;
}

.form-input{
    all: unset;
}

.input-short{
    background-image: url("../images/rectangle-prenom-nom-mot-de-passe-confirmation.png");
    background-repeat: no-repeat;
    background-position: 0vw;
    padding: 4vh;
}

.input-long{
    background-image: url("../images/rectangle-adresse-couriel-carte-de-credit.png");
    background-repeat: no-repeat;
    background-position: 0vw;
    padding: 4vh;
}

.form-field{
    display: flex;
    flex-direction: column;
}
.form-row{
    display: flex;
    gap: 5vw;
}
.confirmation-button{
    all: unset;
    width: 20vw;
    height: 10vh;
    font-family: Inter;
    background-image: url("../images/bouton-confirmation.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    color: white;
    font-size: 25px;
}
.form-button{
    button:hover{
        animation-name: LowerElement;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
    }
}

.confirmation-button{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20vh;
}
/* Section facture */
.bill-input{
    all: unset;
    height: 5.5vh;
    width: 8vw;
    font-weight: bold;
    background-image: url("../images/rectangle-recapitulatif-de-commande-prix.png");
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 2vh;
}

.bill-title{
    font-family: Lora;
    font-weight: 500;
    color: #f37551;
    font-size: x-large;
    display: flex;
    align-items: start;
    gap: 2vw;
}

.bill{
    background-color:#FFFFFF60;
    border-radius: 14vh;
    padding: 3vw;
}

.bill-contents{
    display: flex;
    gap: 5vw;
    font-family: Inter;
}

.bill-section{
    display: flex;
    flex-direction: column;
    gap: 2vw;
}

.centered-bill-section{
    align-items: center;
}

.bill-section-title{
    font-family: Lora;
    font-weight: 600;
}

.bill-article-name{
    font-family: Lora;
}

.first-bill-item{
    margin-top: 1.5vh;
    margin-bottom: 4.5vh;
}
.first-bill-input{
    margin-bottom: 0.5vw;
}
.bill-price-info-start{
    margin-top: 10vh;
}
.first-total-input{
    margin-top: 10vh;
}
.bill-price-info{
    margin-top: 2vh;
}

.bill-price-total{
    margin-top: 8vh;
}

.bill-payment-button{
    all: unset;
    width: 10vw;
    height: 5vh;
    font-family: Inter;
    background-image: url("../images/bouton-payer.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 15px;
    color: white;
    font-size: 25px;
    margin-top: 5vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.bill-payment-button:hover{
    animation-name: LowerElement;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
}
.bill-item-label{
    font-size: 20px;
    font-weight: 400;
}

.bill-price-label{
    font-size: 20px;
    font-weight: 500;
}

.bill-total-label{
    font-size: 20px;
    font-weight: 700;
}
.mobile-button{
    display: none;
}
@media screen and (max-width: 1200px){
    .desktop-button{
        display: none;
    }
    .main-global{
        flex-direction: column;
    }

    .section-title{
        margin-top: 8vh;
    }

    .form-section{
        width: 90%;
        margin-left: 10vw;
    }

    .form-input{
        width: 100%;
    }

    .form-row{
        gap: 10vw;
    }
    .confirmation-button{
        margin-right: 15vw;
        padding: 7vh;
        height: 0;
        margin-bottom: 0;
    }
    .bill{
        width: 65%;
        margin-left: 12vw;
    }
    .bill-contents{
        gap: 0;
    }
    .bill-input{
        width: 12.2vw;
        height: 8vh;
    }
    .bill-section{
        margin-left: 9vw;
    }
    .first-bill-input{
        margin-top: 1px;
    }
    .first-total-input{
        margin-top: 11vh;
    }
    .bill-payment-button{
        padding: 10vh;
    }
    .mobile-button{
        display: flex;
        justify-self: end;
        margin-right: 20vw;
    }
    .button:active{
        border-radius: 50px;
        animation-name: ObservatoryButtonShadow;
        animation-duration: 1s;
    }
}
@media screen and (max-width: 1080px){
    .page-title{
        margin-left: 33%;
    }
    .confirmation-button{
        display: none;
    }
    .form{
        gap: 5vh;
    }
    .bill-title{
        display: flex;
        justify-self: center;
    }
    .bill-payment-button{
        justify-self: center;
        margin-left: 20vw;
        width: 30vw;
        font-size: 50px;
    }
    .bill-input{
        width: 86%;
    }
    .first-total-input{
        margin-top: 17vh;
    }
    .bill-price-total{
        margin-top: 5vh;
    }
    .bill-total-label{
        margin-top: 8vh;
    }
}