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

      .left-side {
        flex: 1;
      }
	  
@font-face {
  font-family: 'MyFont';
  src: url('assets/fonts/woff2/BasicallyASansSerif-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

      body {
		    font-family: 'MyFont', sans-serif;
		     touch-action: manipulation;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
      }
	  input {
  font-family: 'MyFont', sans-serif;
}
input::-webkit-input-placeholder {
  color: #b8b8b8;
}

input::-moz-placeholder {
  color: #b8b8b8;
}

input:-ms-input-placeholder {
  color: #b8b8b8;
}

input::-ms-input-placeholder {
  color: #b8b8b8;
}

      /* Header */

      .logo {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .dropdown-arrow {
        font-size: 12px;
      }

      /* Main content */
      .main-content {
        display: flex;
        align-items: center;
        justify-content: center;
        /* La largeur et hauteur ajustées */
        width: 100%;
        height: calc(100vh - 280px);
        /* occupe toute la hauteur de la fenêtre */
        padding: 0 65px;
      }


.content-wrapper {
    display: flex;
    width: min(90vw, 1450px, calc((100vh - 120px) * 1450 / 800));
    height: min(calc(100vh - 120px), 800px, 90vw * 800 / 1450);
    
    max-width: 1450px;
    max-height: 800px;
    min-width: 830px;
    
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin: 280px 0px 0px 0px;
}






      /* Version portable message */
      #versionMobile {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        z-index: 100;
      }

.un {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard syntax */
}
	
      /* Left side - Logo */
      .left-side {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgb(229, 252, 250);
        padding: 60px 0px;
        position: relative;
      }

      .left-side img {
        position: relative;
      }



      .form-container {
        margin-top: 165px;
        /* Plus haut que 10vh */
        transition: margin-top 0.3s ease;
        background: transparent;
        backdrop-filter: none;
        border-radius: 0;
        padding: 0;
        box-shadow: none;
        border: none;
      }

      .otp-container {
        margin-top: 15vh;
        /* Plus haut que 10vh */
        transition: margin-top 0.3s ease;
        background: transparent;
        backdrop-filter: none;
        border-radius: 0;
        padding: 0;
        box-shadow: none;
        border: none;
      }

      .form-title {
        font-size: 24px;
        font-weight: 600;
        color: black;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .form-subtitle {
        font-size: 14px;
        margin-bottom: 32px;
        line-height: 1.5;
      }

      .form-group {
        margin-bottom: 24px;
      }

      .form-label {
        display: block;
        color: #000;
        /* corrigé de #black à #000 */
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 8px;
      }

      .form-input {
        width: 100%;
        height: 40px;
        padding: 16px;
        border: 1px solid #e1e8ed;
        border-radius: 12px;
        font-size: 14px;
        color: #000;
        /* corrigé de #black à #000 */
        background: #ffffff;
        transition: all 0.3s ease;
      }

      .form-input:focus {
        outline: none;
        border-color: black;
        /*box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);*/
        background: white;
      }

      .password-container {
        position: relative;
      }

      .password-toggle {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: #95a5a6;
        cursor: pointer;
        padding: 4px;
        border-radius: 4px;
        transition: color 0.2s;
      }
/*
       .password-toggle:hover {
         color: #7f8c8d;
      }

       .forgot-password {
         margin-bottom: 32px;
       }
	  */

      .forgot-link {
        font-size: 14px;
        text-decoration: underline;
        background: none;
        border: none;
        cursor: pointer;
        transition: color 0.2s;
      }

      .signup-link {
        color: black;
        text-decoration: underline;
        background: none;
        border: none;
        cursor: pointer;
        transition: color 0.2s;
      }

      .signup-link:hover {
        color: #34495e;
      }

      /* Footer */
      .footer {
        position: absolute;
        bottom: 24px;
        left: 50%;
        transform: translateX(-50%);
      }

      .footer-links {
        display: flex;
        gap: 5px;
        font-size: 12px;
      }

      .footer-link {
        text-decoration: underline;
		color:#6e6d6d;
        background: none;
        border: none;
        cursor: pointer;
        transition: color 0.2s;
      }

      .footer-link:hover {
        color: #2c3e50;
      }

      /* Modal styles (inchangés) */

      /* (le reste du style modal reste inchangé) */
      /* Responsive media queries */
      @media (max-width: 949px) {

        /* Cache le contenu principal et affiche le message portable */
        #versionPC {
          display: none;
        }

        #versionMobile {
          display: flex;
        }
      }

      @media (max-height: 650px) {

        /* Cache le contenu principal et affiche le message portable */
        #versionPC {
          display: none;
        }


        #versionMobile {
          display: flex;
        }
      }
	  
	  /*OTP mobile*/
	    @media (min-width: 500px) {
    .otp-containerMobile {
      gap: 10%;
    }
  }

@media (max-width: 500px) {
    .otp-containerMobile {
      gap: 8%;
    }
  }

  @media (max-width: 420px) {
    .otp-containerMobile {
      gap: 6%;
    }
  }

  @media (max-width: 370px) {
    .otp-containerMobile {
      gap: 4%;
    }
  }

  @media (max-width: 320px) {
    .otp-containerMobile {
      gap: 3%;
    }
  }

  @media (max-width: 300px) {
    .otp-containerMobile {
      gap: 1%;
    }
  }
                  #otpBtnPC:disabled {
                  background-color: #ccc;
                  cursor: default;
                }
				#otpBtnMobile:hover {
                  background-color: #0056b3;
                }
  
  
  
  /*OTP PC*/
                  .otp-input {
                  width: 43px;
                  height: 55px;
                  border: 2px solid #ddd;
                  border-radius: 5px;
                  text-align: center;
                  font-size: 1.2rem;
                  font-weight: bold;
                  outline: none;
                  transition: all 0.2s ease;
                  background-color: white;
                }

                .otp-input:focus {
                  border-color: #00DED2;
                  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
                }
				
				
				
					  /*OTP PC*/
					  
@media (min-width: 1300px) {
    .otp-containerPC {
      gap: 10%;
    }
  }

@media (max-width: 1300px) {
    .otp-containerPC {
      gap: 9%;
    }
  }

@media (max-width: 1200px) {
    .otp-containerPC {
      gap: 9%;
    }
  }

  @media (max-width: 1100px) {
    .otp-containerPC {
      gap: 8%;
    }
  }

  @media (max-width: 1050px) {
    .otp-containerPC {
      gap: 7%;
    }
  }

  @media (max-width: 1000px) {
    .otp-containerPC {
      gap: 6%;
    }
  }

                #otpBtnPC:hover {
                  background-color: #0056b3;
                }

				.resend-otp {     
    text-decoration: underline;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s;

    align-items: center;

    height: 40px;}
	  
	  
	  
	  
	/*password Recovery    */
	* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    /* Overlay pour couvrir tout l'écran */
    /* La popup */
    /* Bouton fermer */

    .popup-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.4);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
    }

    .popup-content {
      background-color: white;
      border-radius: 16px;
      padding: 15px 36px;
      width: 100%;
      max-width: 600px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
      position: relative;
    }

    /* Styles pour la méthode option */
    .method-option {
      position: relative;
      flex: 1;
    }

    .method-option input[type="radio"] {
      position: absolute;
      opacity: 0;
      cursor: pointer;
    }

    .method-option label {
      display: flex;
      align-items: center;
      padding: 8px 10px;
      background-color: #EAF0F9;
      border-radius: 12px;
      cursor: pointer;
      font-size: 14px;
      color: #1a1a1a;
      transition: all 0.2s ease;
      font-weight: 500;
      border: 2px solid transparent;
      position: relative;
    }

    .method-option input[type="radio"]:checked + label {
      background-color: #EAF0F9;
      border: 2px solid #1a1a1a;
    }

    .method-option label::before {
      content: "";
      width: 14px;
      height: 14px;
      border: 2px solid black;
      border-radius: 50%;
      margin-right: 20px;
      background-color: #EAF0F9;
      transition: all 0.2s ease;
    }

    .method-option input[type="radio"]:checked + label::after {
      content: "";
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      width: 10px;
      height: 10px;
      background-color: #1a1a1a;
      border-radius: 50%;
    }
	
	/*opt RECOVERY*/
	  @media (min-width: 500px) {
    .otp-recoveryPassword{
      gap: 10%;
    }
  }

@media (max-width: 500px) {
    .otp-recoveryPassword{
      gap: 8%;
    }
  }

  @media (max-width: 450px) {
    .otp-recoveryPassword{
      gap: 6%;
    }
  }

  @media (max-width: 400px) {
    .otp-recoveryPassword{
      gap: 4%;
    }
  }

  @media (max-width: 350px) {
    .otp-recoveryPassword{
      gap: 3%;
    }
  }

  @media (max-width: 300px) {
    .otp-recoveryPassword{
      gap: 1%;
    }
  }
  
  	/*app RECOVERY*/
	  @media (min-width: 500px) {
    .app-recoveryPassword{
      gap: 10%;
    }
  }

@media (max-width: 500px) {
    .app-recoveryPassword{
      gap: 8%;
    }
  }

  @media (max-width: 450px) {
    .app-recoveryPassword{
      gap: 6%;
    }
  }

  @media (max-width: 400px) {
    .app-recoveryPassword{
      gap: 4%;
    }
  }

  @media (max-width: 350px) {
    .app-recoveryPassword{
      gap: 3%;
    }
  }

  @media (max-width: 300px) {
    .app-recoveryPassword{
      gap: 1%;
    }
  }
  
  
    	/*2ga RECOVERY*/
	  @media (min-width: 500px) {
    .otp-recovery2Fa{
      gap: 10%;
    }
  }

@media (max-width: 500px) {
    .otp-recovery2Fa{
      gap: 8%;
    }
  }

  @media (max-width: 450px) {
    .otp-recovery2Fa{
      gap: 6%;
    }
  }

  @media (max-width: 400px) {
    .otp-recovery2Fa{
      gap: 4%;
    }
  }

  @media (max-width: 350px) {
    .otp-recovery2Fa{
      gap: 3%;
    }
  }

  @media (max-width: 300px) {
    .otp-recovery2Fa{
      gap: 1%;
    }
  }
  
  
  /* CHARGEMENT */
  
        
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(240, 240, 240, 0.2);
            justify-content: center;
            align-items: center;
            z-index: 9999;
            left:-15px;
        }
        
        #l26 {
            width: 8px;
            height: 8px;
            background: transparent; /* Élément principal invisible */
            border-radius: 50%;
            box-shadow: 
                12px -12px 0 0px #000,
                24px -12px 0 0px #000,
                36px -12px 0 0px #000,
                12px 0 0 0px #000,
                24px 0 0 0px #000,
                36px 0 0 0px #000,
                12px 12px 0 0px #000,
                24px 12px 0 0px #000,
                36px 12px 0 0px #000;
            transform: translateX(-24px);
            animation: l26 1.5s infinite ease-in-out;
        }
        
        @keyframes l26 {
            0% {
                box-shadow: 
                    19px -19px 0 5px,
                    38px -19px 0 5px,
                    57px -19px 0 5px,
                    19px 0 0 5px,
                    38px 0 0 5px,
                    57px 0 0 5px,
                    19px 19px 0 5px,
                    38px 19px 0 5px,
                    57px 19px 0 5px;
            }
            10% {
                box-shadow: 
                    19px -19px 0 5px,
                    38px -19px 0 5px,
                    57px -19px 0 5px,
                    19px 0 0 5px,
                    38px 0 0 5px,
                    57px 0 0 5px,
                    19px 19px 0 -1px,
                    38px 19px 0 5px,
                    57px 19px 0 5px;
            }
            20% {
                box-shadow: 
                    19px -19px 0 5px,
                    38px -19px 0 5px,
                    57px -19px 0 5px,
                    19px 0 0 -1px,
                    38px 0 0 5px,
                    57px 0 0 5px,
                    19px 19px 0 5px,
                    38px 19px 0 -1px,
                    57px 19px 0 5px;
            }
            30% {
                box-shadow: 
                    19px -19px 0 -1px,
                    38px -19px 0 5px,
                    57px -19px 0 5px,
                    19px 0 0 5px,
                    38px 0 0 -1px,
                    57px 0 0 5px,
                    19px 19px 0 5px,
                    38px 19px 0 5px,
                    57px 19px 0 -1px;
            }
            40% {
                box-shadow: 
                    19px -19px 0 5px,
                    38px -19px 0 -1px,
                    57px -19px 0 5px,
                    19px 0 0 5px,
                    38px 0 0 5px,
                    57px 0 0 -1px,
                    19px 19px 0 5px,
                    38px 19px 0 5px,
                    57px 19px 0 5px;
            }
            50% {
                box-shadow: 
                    19px -19px 0 5px,
                    38px -19px 0 5px,
                    57px -19px 0 -1px,
                    19px 0 0 5px,
                    38px 0 0 5px,
                    57px 0 0 5px,
                    19px 19px 0 5px,
                    38px 19px 0 5px,
                    57px 19px 0 5px;
            }
            60% {
                box-shadow: 
                    19px -19px 0 5px,
                    38px -19px 0 5px,
                    57px -19px 0 5px,
                    19px 0 0 5px,
                    38px 0 0 5px,
                    57px 0 0 5px,
                    19px 19px 0 5px,
                    38px 19px 0 5px,
                    57px 19px 0 5px;
            }
            100% {
                box-shadow: 
                    19px -19px 0 5px,
                    38px -19px 0 5px,
                    57px -19px 0 5px,
                    19px 0 0 5px,
                    38px 0 0 5px,
                    57px 0 0 5px,
                    19px 19px 0 5px,
                    38px 19px 0 5px,
                    57px 19px 0 5px;
            }
        }
    /* FIRST LOADING */
  #logo-img {
    width: 400px;
  }
  @media (max-width: 600px) {
    #logo-img {
      width: 330px;
	  margin-top:-70px;
    }
  }