:root {
   --gold: #F2A30F;
   --gold-dark: #D88C05;
   --gold-soft: #FCE7BE;
   --ink: #241E17;
   --ink-soft: #6B6154;
   --paper: #FBF8F3;
   --card: #FFFFFF;
   --border: #EAE2D3;
   --focus-ring: rgba(242, 163, 15, 0.35);
   --radius: 18px;
 }

 body {
   position: relative;
   text-align: center;
   font-family: "Inter", sans-serif;
 }


 .content {
   box-sizing: border-box;
   background: #ffffff;
   max-width: 600px;
   position: relative;
   text-align: center;
   overflow: hidden;
   margin: auto;
   margin-left: auto;
   margin-right: auto;
 }

 .logo {
   padding-top: 20px;
   position: relative;
   overflow: hidden;
   width: 75px;

 }

 .logo_texte {
   position: relative;
   overflow: hidden;
   width: 120px;
 }


 .ligne {
   display: inline-block;
   position: relative;
   width: 90%;
   padding-bottom: 15px;
   align-items: center;
   justify-content: center;
 }


 .modal-title {
   text-align: left;
   font-weight: 600;
   font-size: 16px;
   font-family: "Inter-SemiBold", sans-serif;
 }

 .modal-body {
   text-align: left;
   font-size: 12px;
   font-family: "Inter-SemiBold", sans-serif;
 }

 .modal-footer {
   text-align: left;
   font-size: 12px;
   font-family: "Inter-SemiBold", sans-serif;
 }


 .label {
   color: #2b2b2b;
   text-align: left;
   font-family: "Inter-SemiBold", sans-serif;
   font-size: 12px;
   font-weight: 600;
   align-self: stretch;
   text-decoration: none;
 }

 .label_input {
   color: #2b2b2b;
   text-align: left;
   font-family: "Inter-SemiBold", sans-serif;
   font-size: 14px;
   font-weight: 600;
   align-self: stretch;
 }

 .iti {
   width: 100%;
 }

 .input {
   background: #ffffff;
   border-radius: 15px;
   border-style: solid;
   border-color: #cfd6dd;
   border-width: 1px;
   padding: 14px 16px 14px 16px;
   gap: 10px;
   align-items: center;
   justify-content: flex-start;
   align-self: stretch;
   width: 100%;
   flex-shrink: 0;
   height: 45px;
 }


 .input_80 {
   background: #ffffff;
   border-radius: 15px;
   border-style: solid;
   border-color: #cfd6dd;
   border-width: 1px;
   padding: 14px 16px 14px 16px;
   gap: 10px;
   align-items: center;
   justify-content: flex-start;
   align-self: stretch;
   width: 80%;
   flex-shrink: 0;
   height: 45px;
 }


 .input_20 {
   background: #ffffff;
   border-radius: 15px;
   border-style: solid;
   border-color: #cfd6dd;
   border-width: 1px;
   padding: 14px 16px 14px 16px;
   gap: 10px;
   align-items: center;
   justify-content: flex-start;
   align-self: stretch;
   width: 20%;
   flex-shrink: 0;
   height: 45px;
 }

 .input_select {
   background: #ffffff;
   border-radius: 15px;
   border-style: solid;
   border-color: #cfd6dd;
   border-width: 1px;
   padding: 10px 10px 10px 10px;
   align-items: center;
   justify-content: flex-start;
   align-self: stretch;
   width: 100%;
   flex-shrink: 0;
   height: 45px;
 }

 .input_select_20 {
   background: #ffffff;
   border-radius: 15px;
   border-style: solid;
   border-color: #cfd6dd;
   border-width: 1px;
   padding: 10px 10px 10px 10px;
   align-items: center;
   justify-content: flex-start;
   align-self: stretch;
   width: 20%;
   flex-shrink: 0;
   height: 45px;
 }

 .textarea {
   background: #ffffff;
   border-radius: 15px;
   border-style: solid;
   border-color: #cfd6dd;
   border-width: 1px;
   padding: 14px 16px 14px 16px;
   gap: 10px;
   align-items: center;
   justify-content: flex-start;
   align-self: stretch;
   width: 100%;
   flex-shrink: 0;
   height: 100px;
 }


 .input_password {
   background: #ffffff;
   border-radius: 15px;
   border-style: solid;
   border-color: #cfd6dd;
   border-width: 1px;
   padding: 14px 16px 14px 16px;
   gap: 10px;
   align-items: center;
   justify-content: flex-start;
   align-self: stretch;
   width: calc(100% - 35px);
   flex-shrink: 0;
   height: 45px;
 }

 .note_input {
   color: #373737;
   text-align: left;
   font-family: "Inter-Regular", sans-serif;
   font-size: 12px;
   font-weight: 400;
   position: relative;
   width: 100%;
 }

 .quick-sign-up {
   color: #2b2b2b;
   text-align: center;
   font-family: "Inter-SemiBold", sans-serif;
   font-size: 18px;
   font-weight: 600;
   position: relative;
   padding-top: 25px;
   padding-bottom: 25px;
   ;

 }

 // workaround
 .intl-tel-input {
   display: table-cell;
 }

 .intl-tel-input .selected-flag {
   z-index: 4;
 }

 .intl-tel-input .country-list {
   z-index: 5;
 }

 .input-group .intl-tel-input .form-control {
   border-top-left-radius: 4px;
   border-top-right-radius: 0;
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 0;
 }

 .rectangle-6 {
   background: #ffffff;
   border-radius: 15px;
   border-style: solid;
   border-color: #cfd6dd;
   border-width: 1px;
   position: relative;

 }

 .rectangle-7 {
   background: #ffffff;
   border-radius: 15px;
   border-style: solid;
   border-color: #cfd6dd;
   border-width: 1px;
   width: 20px;
   height: 20px;
   position: absolute;
   left: 36px;
   top: 695px;
 }

 .remember-me {
   color: #373737;
   text-align: left;
   font-family: "Inter-Medium", sans-serif;
   font-size: 12px;
   font-weight: 500;
   position: absolute;
   left: 68px;
   top: 697px;
 }

 .mdi-eye-off {
   width: 24px;
   height: 24px;
   position: absolute;
   left: 320px;
   top: 472px;
   overflow: visible;
   aspect-ratio: 1;
 }

 .mdi-eye-off2 {
   width: 24px;
   height: 24px;
   position: absolute;
   left: 320px;
   top: 604px;
   overflow: visible;
   aspect-ratio: 1;
 }



 .text {
   width: 100%;
   height: 14.86%;
   position: absolute;
   right: 0%;
   left: 0%;
   bottom: -0.01%;
   top: 85.14%;
   overflow: visible;
 }

 .symbol {
   width: 48.11%;
   height: 72.33%;
   position: absolute;
   right: 26.15%;
   left: 25.74%;
   bottom: 27.67%;
   top: 0%;
   overflow: visible;
 }

 .frame-21 {
   display: flex;
   flex-direction: column;
   gap: 6px;
   align-items: flex-start;
   justify-content: flex-start;
   width: 320px;
   position: absolute;
   left: 37px;
   top: 251px;
 }


 .frame-5 {
   border-radius: 15px;
   border-style: solid;
   border-color: #cfd6dd;
   border-width: 1px;
   padding: 14px 16px 14px 16px;
   display: flex;
   flex-direction: row;
   gap: 10px;
   align-items: center;
   justify-content: flex-start;
   align-self: stretch;
   flex-shrink: 0;
   height: 47px;
   position: relative;
 }

 .name-gmail-com {
   color: #808386;
   text-align: left;
   font-family: "Inter-Regular", sans-serif;
   font-size: 16px;
   font-weight: 400;
   position: relative;
 }

 .frame-24 {
   display: flex;
   flex-direction: column;
   gap: 6px;
   align-items: flex-start;
   justify-content: flex-start;
   width: 320px;
   position: absolute;
   left: 37px;
   top: 569px;
 }

 .confirm-your-password {
   color: #2b2b2b;
   text-align: left;
   font-family: "Inter-SemiBold", sans-serif;
   font-size: 14px;
   font-weight: 600;
   position: relative;
   align-self: stretch;
 }

 .frame-7 {
   border-radius: 15px;
   border-style: solid;
   border-color: #cfd6dd;
   border-width: 1px;
   padding: 14px 16px 14px 16px;
   display: flex;
   flex-direction: row;
   gap: 10px;
   align-items: center;
   justify-content: flex-start;
   align-self: stretch;
   flex-shrink: 0;
   height: 47px;
   position: relative;
 }

 .div {
   color: #808386;
   text-align: left;
   font-family: "Inter-Regular", sans-serif;
   font-size: 16px;
   font-weight: 400;
   position: relative;
 }

 .by-creating-an-account-in-the-app-you-agree-to-the-terms-of-service-and-privacy-policy {
   text-align: left;
   font-family: "Inter-Regular", sans-serif;
   font-size: 12px;
   font-weight: 400;
   position: absolute;
   left: 68px;
   top: 655px;
   width: 288px;
 }

 .by-creating-an-account-in-the-app-you-agree-to-the-terms-of-service-and-privacy-policy-span {
   color: #373737;
 }

 .by-creating-an-account-in-the-app-you-agree-to-the-terms-of-service-and-privacy-policy-span2 {
   color: #3b65c9;
 }

 .frame-23 {
   display: flex;
   flex-direction: column;
   gap: 9px;
   align-items: center;
   justify-content: flex-start;
   width: 320px;
   position: absolute;
   left: 37px;
   top: 437px;
 }

 .frame-22 {
   display: flex;
   flex-direction: column;
   gap: 6px;
   align-items: flex-start;
   justify-content: flex-start;
   align-self: stretch;
   flex-shrink: 0;
   position: relative;
 }

 .set-password {
   color: #2b2b2b;
   text-align: left;
   font-family: "Inter-SemiBold", sans-serif;
   font-size: 14px;
   font-weight: 600;
   position: relative;
   align-self: stretch;
 }

 .frame-6 {
   border-radius: 15px;
   border-style: solid;
   border-color: #cfd6dd;
   border-width: 1px;
   padding: 14px 16px 14px 16px;
   display: flex;
   flex-direction: row;
   gap: 10px;
   align-items: center;
   justify-content: flex-start;
   align-self: stretch;
   flex-shrink: 0;
   height: 47px;
   position: relative;
 }

 .the-password-must-contain-at-least-8-letters-and-at-least-one-number {
   color: #373737;
   text-align: left;
   font-family: "Inter-Regular", sans-serif;
   font-size: 12px;
   font-weight: 400;
   position: relative;
   width: 288px;
 }

 .frame-2 {
   background: #3b65c9;
   border-radius: 15px;
   padding: 17px 162px 17px 162px;
   display: flex;
   flex-direction: row;
   gap: 10px;
   align-items: center;
   justify-content: center;
   width: 320px;
   position: absolute;
   left: 50%;
   translate: -50%;
   top: 755px;
 }



 .frame-14 {
   display: flex;
   flex-direction: column;
   gap: 6px;
   align-items: flex-start;
   justify-content: flex-start;
   width: 320px;
   position: absolute;
   left: 50%;
   translate: -50%;
   top: 344px;
 }

 .phone-number {
   color: #2b2b2b;
   text-align: left;
   font-family: "Inter-SemiBold", sans-serif;
   font-size: 14px;
   font-weight: 600;
   position: relative;
   align-self: stretch;
 }

 .frame-52 {
   border-radius: 15px;
   border-style: solid;
   border-color: #cfd6dd;
   border-width: 1px;
   padding: 14px 16px 14px 16px;
   display: flex;
   flex-direction: row;
   gap: 26px;
   align-items: center;
   justify-content: flex-start;
   align-self: stretch;
   flex-shrink: 0;
   height: 47px;
   position: relative;
 }

 .frame-11 {
   display: flex;
   flex-direction: row;
   gap: 10px;
   align-items: center;
   justify-content: flex-start;
   flex-shrink: 0;
   position: relative;
 }

 .group-21 {
   flex-shrink: 0;
   width: 21px;
   height: 19.65px;
   position: static;
 }

 .rectangle-26 {
   background: #f7f7f7;
   border-radius: 1.35px;
   border-style: solid;
   border-color: #cfd6dd;
   border-width: 0.68px;
   width: 21px;
   height: 19.65px;
   position: absolute;
   left: 0px;
   top: 0px;
 }

 .flag {
   display: flex;
   flex-direction: row;
   gap: 0px;
   align-items: flex-start;
   justify-content: flex-start;
   width: 14.23px;
   height: 12.19px;
   position: absolute;
   left: 3.39px;
   top: 3.39px;
 }

 .rectangle-24 {
   background: #0b2a74;
   flex: 1;
   height: 12.19px;
   position: relative;
 }

 .rectangle-25 {
   background: #ffffff;
   flex: 1;
   height: 12.19px;
   position: relative;
 }

 .rectangle-23 {
   background: #ff0000;
   flex: 1;
   height: 12.19px;
   position: relative;
 }

 .vector-5 {
   border-radius: 0px;
   flex-shrink: 0;
   width: 6px;
   height: 5.4px;
   position: relative;
   overflow: visible;
 }

 ._3-900-000-00-00 {
   color: #808386;
   text-align: left;
   font-family: "Inter-Regular", sans-serif;
   font-size: 16px;
   font-weight: 400;
   position: relative;
 }

 .modal-content {
   font-family: "Inter-SemiBold", sans-serif;
 }

 .icon-wrapper-upload {
   position: relative;
   display: inline-block;
   width: 40px;
   height: 40px;
 }

 .icon-upload {
   width: 40px;
 }

 .badge-upload {
   position: absolute;
   top: -1px;
   right: -1px;
   background-color: red;
   color: white;
   font-size: 12px;
   font-weight: bold;
   min-width: 18px;
   height: 18px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 4px;
   box-sizing: border-box;
 }

 @keyframes blink {

   0%,
   100% {
     transform: scale(1);
     box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.5);
   }

   50% {
     transform: scale(1.15);
     box-shadow: 0 0 0 6px rgba(229, 57, 53, 0);
   }
 }

 @keyframes pulse {

   0%,
   100% {
     opacity: 1;
   }

   50% {
     opacity: 0.25;
   }
 }

 @keyframes fly-out {
   0% {
     transform: translateY(6px);
     opacity: 0;
   }

   15% {
     opacity: 1;
   }

   70% {
     transform: translateY(-16px);
     opacity: 1;
   }

   100% {
     transform: translateY(-22px);
     opacity: 0;
   }
 }


 .btn-primary {
   background: #fec62a;
   border: none;

   --bs-btn-hover-color: #2A2118;
   --bs-btn-hover-bg: #E07A0A;
   --bs-btn-hover-border-color: #E07A0A;

   --bs-btn-active-color: #2A2118;
   --bs-btn-active-bg: #C96A08;
   --bs-btn-active-border-color: #C96A08;
   --bs-btn-active-shadow: none;

   --bs-btn-focus-shadow-rgb: 242, 163, 15;
   /* anneau de focus, sinon il reste bleu */

   --bs-btn-disabled-bg: #fec62a;
   --bs-btn-disabled-border-color: #fec62a;
 }

 .btn-primary:hover {
   background: #D88C05;
   color: #fff;
 }

 .btn-primary:active {
   background: #D88C05;
   color: #fff;
   transform: translateY(1px);
   transform: translateX(1px);
 }

 .btn-primary:focus-visible {
   outline: none;
   box-shadow: 0 0 0 4px var(--focus-ring), 0 10px 20px -8px rgba(242, 163, 15, 0.55);
 }