.container-contact {
    /*position: relative;*/
    padding: 90px 20px;
}

.bg-contact {
    position: relative;
    width: 100%;
    min-height: 600px;
    overflow: hidden;
    color: #1a1f36;
    box-sizing: border-box;
    word-wrap: break-word;
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Ubuntu,sans-serif;
}

.loginbackground {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Fond en arrière-plan */
}

/* Conteneur du formulaire */
.formbg-outer {
    position: relative;
    z-index: 2; /* Formulaire au-dessus du fond */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    margin-top: 60px;
}

/* Formulaire */
.formbg {
    padding: 32px 50px 32px 50px;
    margin: 0px auto;
    max-width: 1100px;
    background: white;
    border-radius: 4px;
    box-shadow: rgba(60, 66, 87, 0.12) 0px 7px 14px 0px, rgba(0, 0, 0, 0.12) 0px 3px 6px 0px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "form-left form-right";
    column-gap: 70px;
}

.form-left{
    grid-area: form-left;
}
.form-right{
    grid-area: form-right;
}


.bg-title-contact{
  position: relative;
}
.form-right .title-section-contact{
  font-size: 20px;
  /*padding-top: 48px;*/
}
.bottom-title{
  position: absolute;
  background-color: #ffb142;
  height: 5px;
  width: 25%;
  border-radius: 10px;
  bottom: -8px;
}


.form-right p{
    display: flex;
    align-items: center;
}

.contain-form-right p:nth-child(1){
  margin-bottom: 50px;
  margin-top: 50px;
}
.contain-form-right p:nth-child(2){
  margin-bottom: 50px;
}
.contain-form-right p:nth-child(3){
  margin-bottom: 50px;
}
.contain-form-right p:nth-child(4){
  margin-bottom: 50px;
}
.contain-form-right p span{
    padding-left: 50px;
    font-size: 16px;
}
/*contain-tel-contact{
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-areas:"tel-1"
                      "tel-2" !important;
}
.tel-1{
  grid-area: tel-1;
}
.tel-2{
  grid-area: tel-2;
}*/



/* Styles pour les champs du formulaire */
.field input,
.field textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}

.field input[type="submit"] {
    background-color: #5469d4;
    color: white;
    border: none;
    cursor: pointer;
    padding: 12px 20px;
    font-size: 16px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.field input[type="submit"]:hover {
    background-color: #3a4a9e;
}



.bg-contact h1 {
    letter-spacing: -1px;
}
.bg-contact a {
  color: #5469d4;
  text-decoration: unset;
}
.bg-contact .login-root {
    background: #fff;
    display: flex;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
}
.bg-contact .loginbackground {
    z-index: 0;
    overflow: hidden;
}
.bg-contact .flex-flex {
    display: flex;
}
.bg-contact .align-center {
  align-items: center; 
}
.bg-contact .center-center {
  align-items: center;
  justify-content: center;
}
.bg-contact .box-root {
    box-sizing: border-box;
}
.bg-contact .flex-direction--column {
    -ms-flex-direction: column;
    flex-direction: column;
}
.bg-contact .loginbackground-gridContainer {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: [start] 1fr [left-gutter] (86.6px)[16] [left-gutter] 1fr [end];
    grid-template-columns: [start] 1fr [left-gutter] repeat(16,86.6px) [left-gutter] 1fr [end];
    -ms-grid-rows: [top] 1fr [top-gutter] (64px)[8] [bottom-gutter] 1fr [bottom];
    grid-template-rows: [top] 1fr [top-gutter] repeat(8,64px) [bottom-gutter] 1fr [bottom];
    justify-content: center;
    margin: 0 -2%;
    transform: rotate(-12deg) skew(-12deg);
}
.bg-contact .box-divider--light-all-2 {
    box-shadow: inset 0 0 0 2px #e3e8ee;
    /*box-shadow: inset 0 0 0 1px rgba(176, 142, 107, 1.0);*/
}
.bg-contact .box-background--blue {
    /*background-color: #5469d4;*/
    background-color: rgba(167, 202, 215, 1.0);
}
.bg-contact .box-background--white {
  /*background-color: #ffffff; */
}
.bg-contact .box-background--blue800 {
    background-color: #ffb142;
}
.bg-contact .box-background--gray100 {
    background-color: #e3e8ee;
}
.bg-contact .box-background--cyan200 {
    background-color: #7fd3ed;
}
.bg-contact .padding-top--64 {
  padding-top: 64px;
}
.bg-contact .padding-top--24 {
  padding-top: 24px;
}
.bg-contact .padding-top--48 {
  padding-top: 48px;
}
.bg-contact .padding-bottom--24 {
  padding-bottom: 24px;
}
.bg-contact .padding-horizontal--48 {
  /*padding: 48px;*/
}
.bg-contact .padding-bottom--15 {
  padding-bottom: 15px;
}


.bg-contact .flex-justifyContent--center {
  -ms-flex-pack: center;
  justify-content: center;
}

.bg-contact span {
    display: block;
    font-size: 20px;
    line-height: 28px;
    color: #1a1f36;
}
.bg-contact label {
    margin-bottom: 10px;
}
.bg-contact .reset-pass a,label {
    font-size: 14px;
    font-weight: 600;
    display: block;
}
.bg-contact .reset-pass > a {
    text-align: right;
    margin-bottom: 10px;
}
.bg-contact .grid--50-50 {
    display: grid;
    grid-template-columns: 50% 50%;
    align-items: center;
}

.bg-contact .field input {
    font-size: 16px;
    line-height: 28px;
    padding: 8px 16px;
    width: 100%;
    min-height: 44px;
    border: unset;
    border-radius: 4px;
    outline-color: rgb(84 105 212 / 0.5);
    background-color: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}

.bg-contact input[type="submit"] {
    background-color: #ffb142;
    color: black;
    font-weight: 600;
    cursor: pointer;
}
.bg-contact .field-checkbox input {
    width: 20px;
    height: 15px;
    margin-right: 5px; 
    box-shadow: unset;
    min-height: unset;
}
.bg-contact .field-checkbox label {
    display: flex;
    align-items: center;
    margin: 0;
}
.bg-contact .bg-contact a.ssolink {
    display: block;
    text-align: center;
    font-weight: 600;
}
.bg-contact .footer-link span {
    font-size: 14px;
    text-align: center;
}
.bg-contact .listing a {
    color: #697386;
    font-weight: 600;
    margin: 0 10px;
}

.bg-contact .animationRightLeft {
  animation: animationRightLeft 5s ease-in-out infinite;
}
.bg-contact .animationLeftRight {
  animation: animationLeftRight 5s ease-in-out infinite;
}
.bg-contact .tans3s {
  animation: animationLeftRight 6s ease-in-out infinite;
}
.bg-contact .tans4s {
  animation: animationLeftRight 7s ease-in-out infinite;
}

@keyframes animationLeftRight {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(1000px);
  }
  100% {
    transform: translateX(0px);
  }
} 

@keyframes animationRightLeft {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(-1000px);
  }
  100% {
    transform: translateX(0px);
  }
}