:root{
    --width-mobile: 23.4375rem;
    --width-tablet: 43rem;
    --width-desktop: 90rem;   
    --space_8px: 0.5rem;
    --space_12px: 0.75rem;
    --space_16px: 1rem;
    --space_24px: 1.5rem;
    --space_32px: 2rem;
    --space_40px: 2.5rem;
}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body{
    min-height: 100vh; 
    display: flex;
    justify-content: center;
    align-items: center;
    background: #e4f4fd;
}

.text{
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1rem;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    line-height: 1.5;
    color: #4e6e7e;
}

.text-bold{
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.5rem;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    line-height: 1.25;
    color: #133041;
}

button:hover{
    cursor: pointer;
}

.error{
    font-size: 0.875rem;
    color: #d73328;
    position: absolute;
        top: 5.5rem;
}

.error-radio{
    font-size: 0.875rem;
    color: #d73328;
    position: absolute;
        top: 8.7rem;
}

/*MAIN*/

.container{
    max-width: var(--width-tablet);
    width: 100%;
    background: #fff;
    border-radius: 1.5rem;
}

.sr-only{
    width: 0;
    height: 0;
    overflow: hidden;
    position: absolute;
}

.myForm{
    padding: var(--space_32px) var(--space_24px);
    text-align: left;
}

fieldset{
    border: none;
}

.main-title{
    margin-bottom: 0.5rem;
}

.button-reset{
    text-decoration: underline #4e6e7e;
    background: transparent;
    border: none;
}

.button-reset:hover{
    text-decoration: underline #133041;
    color: #133041;
}


/*INPUT*/

.container-input{
    margin-top: var(--space_24px); 
    position: relative;
}

.display-input{
    display: block;
    width: 100%;
    height: 3rem;
    border: 0.0625rem solid #6b94a8;
    border-radius: 0.2rem;
    margin-top: 0.8rem;
    color: #6b94a8;
    font-size: 1.125rem;
    position: relative;
}

.display-input:hover{
    border: 0.0625rem solid #133041;
}

.display-input span{
    display: inline-block;
    width: 2.75rem;
    height: 100%;    
    background: #e4f4fd;
    color: #4e6e7e;
    font-size: 1.125rem;    
    border-radius: 0.2rem 0 0 0.2rem;
    text-align: center;
    padding-top: 0.6rem; 
}

.container-input:nth-of-type(1) .display-input span{
    position: absolute;
        left: 0;
}

.container-input:nth-of-type(1) .display-input input[type="tel"]{
    text-indent: 4rem;
}

.container-input:nth-of-type(2) .display-input span{
    width: 5rem;
    border-radius: 0 0.2rem 0.2rem 0;
    position: absolute;
        right: 0;
}

.container-input:nth-of-type(3) .display-input span{
    border-radius: 0 0.2rem 0.2rem 0;
    position: absolute;
        right: 0;
}
       
input[type="tel"]{
    width: 100%;
    height: 90%;
    font-size: 1.2rem;
    text-indent: 1rem;
    border: none;
}

input[type="tel"]:focus{
    outline: none;
}


/*RADIO*/

.label-radio{
    display: block;
    font-size: 1.125rem;
    width: 100%;
    height: 3rem;
    border: 0.0625rem solid #6b94a8;
    border-radius: 0.2rem;
    margin-top: 0.5rem;
}

.label-radio span{
    display: inline-block;
    position: relative;
        bottom: 0.2rem;
}

.label-radio:hover{
    border: 0.0625rem solid #d8db2f;
}

input[type="radio"]{
    appearance: none;
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0.8rem 0.8rem 0 0.5rem;
    border: 0.1rem solid #133041;
    border-radius: 50%;
}

input[type="radio"]:checked{
    border: 0.1rem solid #d8db2f;
    position: relative;
}

input[type="radio"]:checked::after{
    content: '';
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: #d8db2f;
    position: absolute;
        top: 0.15rem; left: 0.19rem;
}



.button-submit{
    background: #d8db2f;
    color: #133041; 
    border: none;
    border-radius: 1.75rem;
    font-size: 1rem;
    width: 100%;
    height: 3.5rem;
    margin-top: 1.4rem;
}

.button-submit::before{
    content: '';
    width: 1.5rem;
    height: 1.5rem;
    display: inline-block;
    background: url(./images/icon-calculator.svg) no-repeat;
    vertical-align: middle;
    margin-right: 1rem;
}

.button-submit:hover{
    background: hsla(61, 70%, 52%, 0.6);
}



.result{
    background: #133041;
    text-align: center;
}

.image-result{
    display: block;
    width: 12rem;
    object-fit: cover;
    margin: 0 auto;
    padding-top: var(--space_32px);
}

.title-result{
    color: #fff;
    margin-bottom: 1rem;
}

.text-result{
    max-width: 38rem;
    color: #9abed5;
    padding-bottom: var(--space_32px);
    margin: 0 auto;
}




.result-paiement{
    color: #fff;
    text-align: left;
    padding: var(--space_32px) var(--space_24px);
}

.display-figure{
    background: hsl(199, 56%, 10%);
    border-top: 0.25rem solid #d8db2f;
    padding: var(--space_24px) var(--space_16px);
    border-radius: 0.2rem 0.2rem 0 0;
}

.display-figure p{
    color: #9abed5;
}

.display-figure p:nth-of-type(1) span{
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    color: #d8db2f;
}

.display-figure p:nth-of-type(2) span{
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
}

.line{
    margin: var(--space_16px) 0;
    border: none;
    height: 0.08rem;
    background: #9abed5;
}


@media screen and (min-width: 48rem)
{

    .container{
        margin: var(--space_40px) auto var(--space_40px);
    }

    .myForm{
        padding: var(--space_40px);
    }
    
    .myForm fieldset{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(5, min-content);
    }

    .main-title{
        grid-column: 1;
        grid-row: 1;
    }

    .button-reset{
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        margin-top: -2.3rem;
    }

    .container-input:nth-of-type(1){
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .container-input:nth-of-type(2){
        grid-column: 1;
        grid-row: 3;
        width: 18.25rem;
    }

    .container-input:nth-of-type(3){
        grid-column: 2;
        grid-row: 3;
        justify-self: end;
        width: 18.25rem;
    }

    .container-input:nth-of-type(4){
        grid-column: 1 / -1;
        grid-row: 4;
    }

    .button-submit{
        grid-column: 1 / -1;
        grid-row: 5;
        width: 19.625rem;
    }



    .result{
        border-radius: 0 0 2rem 2rem;
    }

}


@media screen and (min-width: 90rem)
{

    .container{
        max-width: 63rem;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1fr;
    }

    .myForm{
        width: 504px;
        grid-column: 1;
        grid-row: 1;
    }

    .container-input{
        margin-top: var(--space_24px); 
    }

    .container-input:nth-of-type(2){
        width: 12.5rem;
    }

    .container-input:nth-of-type(3){
        width: 12.5rem;
    }

    .button-submit{
        margin-top: var(--space_32px);
    }



    .result{
        width: 31.5rem;
        grid-column: 2;
        grid-row: 1;
        padding: var(--space_40px);
        border-radius: 0 1.5rem 1.5rem 5rem;
    }

    .container-text{
        padding-top: 2.5rem;
    }

}