body {
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.left-interface{
    position: relative;
    width: 63vw;
    height: 100vh;
}

.conseiller{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    position: absolute;
    transform: translate(-50%, -50%);
    border-radius: 1vw;
    padding: 1.5vw;
    width: 45vw;
    height: 15vw;
}

.title-infoConnect:nth-child(2){
    text-align: left;
    margin-top: 0.6vw;
    margin-left: 7vw;
    grid-column: 1 / 3;
    grid-row: 1;
}

button.conseiller:nth-of-type(2) .title-infoConnect {
    text-align: right;
    margin-top: 0.6vw;
    margin-left: 3vw;
    grid-column: 2 / 4;
    grid-row: 1;
}

button.conseiller:nth-of-type(2) .icon{
    grid-column: 4 / 4;
    grid-row: 1;
}

button.conseiller:nth-of-type(2) .info-connect{
    grid-column: 1 / 5;
}

button.conseiller:nth-of-type(3) .title-infoConnect{
    text-align: left;
    margin-top: 0.6vw;
    margin-left: 7vw;
    grid-column: 1 / 2;
    grid-row: 1;
}

.argument1, .argument2{
    grid-column: 1 / 2;
    grid-row: 2;
    width: 18vw;
}

.info-connect{
    grid-column: 1 / 4;
    grid-row: 2;

}

.conseiller:hover{
    width: 46vw;
    height: 16vw;
}

.conseiller:nth-child(1){
    top: 17.5%;
    left: 40%;
    background: #fca211;
    background-image: url(img/cartographer.png);
    background-position: center;
    background-size: 40%;
}

.conseiller:nth-child(2){
    top: 50%;
    left: 60%;
    background: #FCA311;
    background-image: url(img/cartographer.png);
    background-position: center;
    background-size: 40%;
}

.conseiller:nth-child(3){
    top: 82.5%;
    left: 40%;
    background: #FCA311;
    background-image: url(img/cartographer.png);
    background-position: center;
    background-size: 40%;
}

.icon{
    grid-column: 1 / 1;
    grid-row: 1;
    margin-top: 0.5vw;
    margin-left: 1vw;
    background: var(--fifthColor);
    border-radius: 0.6vw;
    width: 4.5vw;
    height: 4.5vw;
}

.title-infoConnect{
    font-family: var(--firstFont);
    color: var(--fifthColor);
    font-size: 1.57vw;
}

.slogan-title{
    text-wrap: nowrap;
    font-family: var(--firstFont);
    margin: 0;
    color: var(--fifthColor);
    letter-spacing: 0.1vw;
    font-size: 0.8vw;
}

.info-connect{
    font-family: var(--secondFont);
    margin: 0;
    color: var(--fifthColor);
    font-size: 0.7vw;
}


info{
    font-size: 0.7vw;
    line-height: 1.5;
}

.info3 {
    text-align: center;
    width: 38vw;
}

.argument1, .argument2, .info3{
    font-family: var(--secondFont);
    color: var(--fifthColor);
    font-size: 0.85vw;
    text-align: left;
    margin: 0;
}

.argument2{
    margin-left: 20vw;
}

.LR_box{
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    background: var(--secondColor);
    width: 37vw;
    height: 100vh;
}

.LR_title{
    font-family: var(--firstFont);
    margin-top: 2.5vw;
    margin-bottom: 0;
    color: var(--fifthColor);
    font-size: 4.5vw;
}

.LR_form{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 25vw;
}

.labelLR{
    font-family: var(--firstFont);
    text-align: center;
    color: var(--fifthColor);
    font-size: 2.2vw;
}

.adressIcon::before{
    top: 45%;
    left: 6%;
    background-image: url(img/mail1.png);
    width: 1.2vw;
    height: 1.2vw;
}

.adressIcon:focus-within::before{
    background-image: url(img/mail2.png);
}

.adressIcon.filled::before {
    background-image: url(img/mail2.png);
}

/* ICON LABEL FORMULAIRE */

.iconNameUser1::before, .iconNameUser2::before{
    top: 50%;
    left: 13%;
    background-image: url(img/user1.png);
    width: 1.2vw;
    height: 1.2vw;
}

.iconNameUser1:focus-within::before, .iconNameUser2:focus-within::before{
    background-image: url(img/user2.png);
}

.iconNameUser1.filled::before, .iconNameUser2.filled::before{
    background-image: url(img/user2.png);
}

.iconTypeUser::before{
    top: 50%;
    left: 6%;
    background-image: url(img/user1.png);
    width: 1.2vw;
    height: 1.2vw;
}

.iconTypeUser:focus-within::before{
    background-image: url(img/user2.png);
}

.iconTypeUser.filled::before {
    background-image: url(img/user2.png);
}

.adressIcon, .passwordIcon, .iconTypeUser, .secretIcon, .iconNameUser1, .iconNameUser2, .verifPassword{
    position: relative;
    margin-top: 1vw;
}

.adressIcon::before, .iconNameUser1::before, .iconNameUser2::before, .iconTypeUser::before, .passwordIcon::before, .secretIcon::before{
    content: "";
    position: absolute;
    transform: translate(-50%, -50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.passwordIcon::before{
    top: 50%;
    left: 6%;
    background-image: url(img/password1.png);
    width: 1.3vw;
    height: 1.3vw;
}

.passwordIcon:focus-within::before{
    background-image: url(img/password2.png);
}

.passwordIcon.filled::before{
    background-image: url(img/password2.png);
}

.secretIcon::before{
    top: 50%;
    left: 6%;
    background-image: url(img/secret1.png);
    width: 1.3vw;
    height: 1.3vw;
}

.secretIcon:focus-within::before{
    background-image: url(img/secret2.png);
}

.secretIcon.filled::before{
    background-image: url(img/secret2.png);
}

/* INPUT FORMULAIRE */

.groupInput{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.inputLR{
    font-family: var(--secondFont);
    border: none;
    background: #192b53;
    color: var(--fifthColor);
    border-radius: 0.4vw;
    padding: 0 0 0 3.5vw;
    font-size: 1vw;
    width: 21.5vw;
    height: 2.5vw;
}

#typeUser{
    width: 25vw;
}

#firstnameInput, #nameInput{
    padding: 0 0 0 3.5vw;
    width: 8.5vw;
}

#passwordInputLogin{
    width: 18.5vw;
}

.verifPassword{
    background: #192b53;
    border-radius: 0.4vw;
    width: 2.5vw;
    height: 2.5vw;
}

.verifPassword{
    background-image: url(img/view1.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 70%;
}

.reloadCode, .activeCondition{
    text-align: center;
    font-weight: bold;
    font-family: var(--secondFont);
    margin-top: 1vw;
    color: var(--fifthColor);
    font-size: 0.7vw;
}

.activeCondition{
    display: flex;
    flex-direction: row;
    align-items: center;
}

#activeConditionInput{
    margin-right: 0.75vw;
    width: 1vw;
    height: 1vw;
}

.LR_submit{
    font-family: var(--firstFont);
    background: none;
    border: none;
    color: var(--fifthColor);
    font-size: 3.25vw;
}

.connect_page{
    font-family: var(--secondFont);
    font-weight: bold;
    color: #0f8ae2;
    font-size: 0.9vw;
}