.home {
    background: var(--blue);
    padding: 20px;
    max-width: 1440px;

    main {
        background: var(--white);
        border-radius: 38px;
        margin: 0 auto auto auto;

        .inscription_connexion {
            display: flex;
            justify-content: space-between;

            @media (max-width: 991px) {
                flex-direction: column-reverse;
            }

            @media (max-width: 500px) {
                .inscription_img_left {
                    border-radius: 0 0 38px 38px !important;

                    img {
                        height: 200px !important;

                        &#img_bg1 {
                            border-radius: 0 !important;
                        }
                    }
                }
            }

            @media (min-width: 501px) and (max-width: 991px) {
                .inscription_img_left {
                    flex-direction: row !important;
                    border-radius: 0 0 38px 38px !important;

                    img {
                        width: 50%;
                        height: unset !important;
                        border-radius: 0 !important;
                    }
                }
            }

            @media (min-width: 992px) {
                min-height: 980px;
            }

            .inscription_img_left {
                display: flex;
                flex-direction: column;
                border-radius: 38px 0 0 38px;
                overflow: hidden;
                position: relative;

                @media (min-width: 501px) and (max-width: 991px) {
                    &:after {
                        bottom: 20px !important;
                        left: 53% !important;
                    }
                }

                @media (min-width: 992px) {
                    max-width: 400px;

                    img {
                        min-height: 425px;
                    }
                }

                @media (min-width: 1200px) {
                    max-width: 580px;
                }

                #img_bg1 {
                    border-top-right-radius: 38px;
                    height: 50%;
                    object-fit: cover;
                }

                #img_bg2 {
                    border-bottom-right-radius: 38px;
                    height: 50%;
                    object-fit: cover;
                }

                &:after {
                    content: url('../img/apple.svg');
                    width: 30px;
                    height: 35px;
                    position: absolute;
                    bottom: 30px;
                    left: 30px;
                    z-index: 2;
                }
            }

            .formulaires {
                margin-bottom: 20px;
                padding: 0 20px;

                @media (min-width: 992px) {
                    padding: 0 45px;
                    margin-bottom: 50px;
                }

                @media (min-width: 1400px) {
                    padding: 0 90px;
                }

                .title_forms {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                }

                h1 {
                    font-size: 24px;
                    line-height: 36px;
                    font-weight: 700;
                    text-align: center;
                    color: var(--blue);
                    margin: 30px 0px 0;

                    @media (min-width: 992px) {
                        font-size: 30px;
                        line-height: 48px;
                    }

                    @media (min-width: 1400px) {
                        margin: 30px 30px 0;
                    }
                }

                .form_wrapper {
                    position: relative;

                    .bouton_connexion {
                        text-align: center;
                        background: #000;
                        color: var(--white);
                        font-size: 14px;
                        padding: 15px 10px;
                        border-radius: 50px;
                        font-weight: 500;
                        transition: var(--transition);

                        @media (min-width: 1050px) {
                            margin: 0;
                            position: absolute;
                            bottom: 0;
                            left: 155px;
                        }

                        @media (min-width: 1400px) {
                            padding: 15px 20px;
                        }

                        @media (max-width: 440px) {
                            display: flex;
                        }

                        &:hover {
                            background: var(--blue);
                        }
                    }

                    &.inscription {
                        .bouton_connexion {
                            margin-top: 20px;
                        }

                        @media (max-width: 1049px) {
                            display: flex;
                            flex-direction: column;
                        }
                    }

                    &.connexion {
                        display: none;

                        .login-password,
                        .lost-password {
                            display: none !important;
                        }

                        .bouton_connexion {
                            @media (min-width: 1050px) {
                                left: 145px !important;
                            }
                        }
/* 
                        .lost-password {
                            margin: 20px 0;
                        } */

                        form {

                            .login-remember {
                                display: none;
                            }

                            @media (max-width: 992px) {
                                .login-username {
                                    margin-top: 20px;

                                    label:first-child {
                                        line-height: normal;
                                    }
                                }
                            }

                            * label {
                                font-size: 20px;
                                color: var(--blue);
                                line-height: 50px;
                                font-weight: 500;
                                margin: 0;
                            }

                            * input, button {
                                background: var(--grey);
                                border-radius: 100px;
                                border: 0;
                                box-shadow: none;
                                height: 50px;
                                padding: 0 20px;
                                color: var(--blue);
                                font-weight: 500;
                                font-size: 16px;
                                transition: var(--transition);
                                border: 2px solid transparent;
                                outline: 2px solid transparent;

                                &:hover {
                                    border: 2px solid var(--grey);
                                }

                                &:focus,
                                &:focus-visible {
                                    outline: 2px solid var(--blue) !important;
                                }

                                &[type="submit"] {
                                    text-align: center;
                                    color: var(--white);
                                    font-size: 14px;
                                    padding: 12px 20px 15px 20px;
                                    border-radius: 50px;
                                    font-weight: 500;
                                    transition: var(--transition);
                                    font-family: var(--main-font);
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    background: var(--red);
                                    cursor: pointer;

                                    &:hover {
                                        background: var(--blue);
                                    }
                                }
                            }
                        }
                    }

                    .gform_wrapper {
                        width: 100%;

                        .gform_fields {
                            gap: 10px;

                            .gfield {
                                &.gfield--type-email {
                                    display: flex;
                                    flex-direction: column;

                                    .gfield_label {
                                        order: -2;
                                    }

                                    .gfield_description:not(.validation_message.gfield_validation_message) {
                                        order: -1;
                                        position: relative;
                                        font-weight: 300;
                                        color: var(--blue);
                                        font-style: italic;
                                        font-size: 14px;
                                        line-height: 20px;
                                        margin: -5px 0px 15px 0;
                                        display: flex;

                                        &:before {
                                            content: url('../img/warning.svg');
                                            margin-right: 10px;
                                        }
                                    }
                                }

                                &.gfield--type-password {

                                    .gform-field-label.gform-field-label--type-sub {
                                        display: none;
                                    }
                                }
                            }
                        }

                        .gform_required_legend,
                        .gfield_required.gfield_required_asterisk {
                            display: none !important;
                        }

                        * .gfield_label {
                            font-size: 20px;
                            color: var(--blue);
                            line-height: 50px;
                            font-weight: 500;
                            margin: 0;
                        }

                        .ginput_container {

                            &>input,
                            >* input[type="password"] {
                                background: var(--grey);
                                border-radius: 100px;
                                border: 0;
                                box-shadow: none;
                                height: 50px;
                                padding: 0 20px;
                                color: var(--blue);
                                font-weight: 500;
                                font-size: 16px;
                                transition: var(--transition);
                                border: 2px solid transparent;
                                outline: 2px solid transparent;

                                &:hover {
                                    border: 2px solid var(--grey);
                                }

                                &:focus,
                                &:focus-visible {
                                    outline: 2px solid var(--blue) !important;
                                }
                            }
                        }

                        .gfield_radio {
                            flex-direction: row;
                            background: var(--grey);
                            width: fit-content;
                            padding: 5px;
                            border-radius: 100px;
                            gap: 5px !important;

                            .gfield-choice-input {
                                display: none;

                                &:checked+label {
                                    background: var(--blue);
                                    color: var(--white);
                                }
                            }

                            label {
                                cursor: pointer;
                                background: var(--white);
                                padding: 9px 12px;
                                border-radius: 50px;
                                margin: 0;
                                font-weight: 500;
                                font-size: 16px;
                                color: var(--blue);
                                transition: var(--transition);

                                &:hover {
                                    background: var(--blue);
                                    color: var(--white);
                                }
                            }
                        }

                        .gform-footer {
                            input.gform_button {
                                background: var(--red);
                                padding: 17px 47px;
                                border-radius: 50px;
                                transition: var(--transition);

                                &:hover {
                                    background: var(--blue);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}