.auth-page {
  display: grid;
  grid-template-columns: 460px 1fr; /* largeur connexion / largeur animation */
  min-height: 100vh;
  background-color: #ffffff;
  padding-left: 84px; /* décale tout vers la droite */
  gap: 32px; /* espace horizontal entre connexion et animation */
}



.auth-left {
  width: 420px;      /* largeur bloc ajustée */
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-left: 64px; /* léger décalage depuis la gauche */
  margin-top: 80px; /* ajuste la valeur pour plus ou moins d’espace */
}



.auth-left h1 {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  color: #1f2937; /* gris foncé Leboncoin */
  margin-bottom: 32px;
}

//
.auth-left label {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 6px;
}

.auth-left input[type="email"] {
  height: 36px;
  width: 350px;
  padding: 0 16px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 250;
  border-radius: 12px;
  border: 1px solid #d1d5db;
  outline: none;
}

.auth-left input[type="email"]:focus {
  border: 2px solid #2563eb; /* bleu + épais */
  
}


.auth-right {
  display: flex;
  align-items: flex-start; /* commencer sous le header */
  justify-content: flex-end;
  padding: 64px 32px; /* espace intérieur */
  overflow: hidden;
  background-color: #ffffff;
  height: calc(100vh - 64px); /* toute la hauteur restante après header */
  
}
.auth-header {
  height:28px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 32px;
  background-color: #ffffff;
  box-shadow: 0 4px 6px -2px rgba(30, 58, 138, 0.5), /* bleu foncé moins opaque */
              0 4px 10px -2px rgba(0, 0, 0, 0.25);    /* noir moins intense */
  position: relative;
  z-index: 10;
}
/* header  */
.auth-header .logo img {
  width: 180px;  /* Ajuste si besoin */
  height: 46;
}

.auth-header .back-btn img {
  width: 60px;  /* Ajuste si besoin */
  height: 35;
}

/*fin header */

.info-box {
  background-color: #fff6d8; /* gris clair */
  color: #374151;           /* gris foncé lisible */
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  padding: 16px 18px;
  border-radius: 12px;
  margin-bottom: 24px;
}
.form-messager {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  color: #f87171;
  font-size: 14px;
  margin-bottom: 16px;
}

.form-messager .error-icon {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}


.hidden {
  display: none;
}
.forgot-password1 {
  display: inline-block;
  margin-top: 8px;
  font-size: 38px;
  color: #f87171;
  text-decoration: none;
}


.forgot-password {
  display: inline-block;
  margin-top: 8px;
  font-size: 28px;
  color: #2563eb;
  text-decoration: none;
}

.forgot-password:hover {
  text-decoration: underline;
}

/* bouton avec flèche */
.btn-primary.with-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* wrapper mot de passe */
/* conteneur du champ mot de passe */


/* input mot de passe */
/* plus*/


/*plus*/

.password-wrapper {
  display: flex;
  align-items: center;
  width: 380px;
  height: 36px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  overflow: hidden;
}

.password-wrapper input {
  flex: 1;
  border: none;
  padding: 0 12px;
  font-size: 16px;
  font-family: 'Inter', sans-serif;
  padding-left: 10px;      /* espace gauche */
  padding-right: 10px;     /* espace droit pour que le texte ne touche pas le bouton */
  padding-top: 20px;
  outline: none;
  
}

.password-wrapper .password-separator {
  width: 1px;
  background: #ccc; /* couleur de la barre verticale */
  height: 90%;      /* hauteur de la barre par rapport au champ */
  margin: 0 5px;
}
.password-wrapper .toggle-password {
  border: none;
  background: transparent;
  height: 100%;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}


.password-label {
  display: block;
  margin-bottom: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}


/* barre verticale */

.password-separator {
  width: 1px;
  background-color: #d1d5db;
}


/* bouton œil intégré */

.toggle-password {
  width: 44px;
  height: 100%;
  border-left: 1px solid #d1d5db; /* trait vertical séparateur */
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.toggle-password:hover {
  color: #374151;
}

.toggle-password img {
  width: 24px;
  height: 24px; /* œil bien visible */
}


.toggle-password:hover {
  color: #374151;
}


/* focus identique à l’email */

.password-wrapper:focus-within {
  border: 2px solid #2563eb;
}


/* lien mot de passe oublié (gris sombre) */
.forgot-password {
  display: inline-block;
  margin-top: 8px;
  font-size: 14px;
  color: #4b5563;
  text-decoration: none;
}

.forgot-password:hover {
  text-decoration: underline;
  color: #1f2937;
}

/*  */



/*  */



body, html {
  margin: 0;
  padding: 0;
  background-color: #ffffff; /* fond blanc uniforme */
  font-family: 'Inter', sans-serif;
}









.btn-primary {
  height: 40px;
  width: 380px;
  background-color: #e85f0f;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  
  border-radius: 12px;
  border: none;
  cursor: pointer;
}




.btn-primary:hover {
  background-color: #ff8f3f; /* léger effet hover */
}


input {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  margin-bottom: 24px;
}


/* 
.btn-primary {
  width: 100%;
  background: var(--primary);
  color: white;
  padding: 14px;
  border-radius: 999px;
  border: none;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
}
*/



.btn-social {
  height: 40px;
  width: 380px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #111827;
  cursor: pointer;
  
}

.btn-social img {
  width: 20px;
  height: 20px;
}

/* HOVER → fond ciel clair */
.btn-social:hover {
  background-color: #e0f2ff; /* bleu ciel clair */
}




.separator {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0; /* espace réduit */
}

.separator::before,
.separator::after {
  content: "";
  flex: 1;
  height: 1px;
  width: 20px;
  background-color: #e5e7eb; /* gris clair */
}

.separator span {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #6b7280;
  white-space: nowrap;
}
.legal-text {
  font-family: 'Inter', sans-serif;
  color: #374151;
  
}

/* * champs obligatoires : police plus petite */
.required {
  font-size: 12px;
  margin: 0;
}


.info {
  margin-top: 2em;
  margin-bottom: 0;
  font-size: 14px;
}

/* lien uniquement */
.info-link {
  text-decoration: underline;
  color: #000;
  cursor: pointer;
  filter: blur(0.3px);
}

/* texte non cliquable mais parfaitement aligné */
.info-inline {
  color: #000;
}

/* ligne suivante indentée */
.info-detail {
  display: inline-block;
  margin-left: 32px;
  margin-top: 4px;
  color: #374151;
}



/* dernier paragraphe : encore descendu de 3 lignes */
.confirmation {
  margin-top: 2em;
  font-size: 14px;
}