@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

body { font-family: 'Inter', sans-serif; background: #f9fafe; color: #111; }
.form_header {
    text-align: center;
    margin-bottom: 0px; /* Espace entre le titre et le formulaire */
    padding: 20px;padding-bottom:0px;
}

.form_header h1 {
    font-size: 2rem;
    color: #1e293b; /* Bleu très foncé pour le titre */
    margin-bottom: 0px;
}

.form_header p {
    font-size: 1.1rem;
    color: #64748b; /* Gris pour le sous-titre */
    margin: 0;
}
.trust-bar {
    display: flex;
    justify-content: space-between;
    padding: 20px 40px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    margin: 30px auto;
    max-width: 900px;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.icon-bg {
    width: 45px;
    height: 45px;
    background: #eff6ff; /* Bleu très clair */
    color: #2563eb;     /* Bleu intense */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.2rem;
}

.text {
    display: flex;
    flex-direction: column;
}

.text strong { color: #1e293b; font-size: 0.95rem; }
.text span { color: #64748b; font-size: 0.85rem; }
.form_section { padding: 40px 20px; max-width: 1100px; margin: auto; }
.form_container { display: grid; grid-template-columns: 350px 1fr; gap: 40px; border: 1px solid #e5e7eb; padding: 30px; border-radius: 12px; background: white; }
.form_sidebar { background: #f4f7fe; padding: 20px; border-radius: 8px; }
.form_grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.form_group { margin-bottom: 15px; position: relative; }
.form_group label { display: block; font-weight: bold; margin-bottom: 5px; font-size: 0.9rem; }
.form_group input, .form_group select { width: 100%; padding: 10px; border: 1px solid #d1d5db; border-radius: 6px; box-sizing: border-box; }
.error-message {
    display: none; /* Caché par défaut */
    color: #dc2626;
    font-size: 0.75rem;
    margin-top: 5px;
    font-weight: 600;
}
.pwd-wrapper { position: relative; }
.eye-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #6b7280;
}
/* On ajoute une classe pour quand l'input est en erreur */
.input-error {
    border-color: #dc2626 !important;
}
/* Style pour l'œil */
.toggle-password { position: absolute; right: 10px; top: 35px; cursor: pointer; user-select: none; }

.form_submit { width: 100%; padding: 15px; background: #0047ff; color: white; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; }
.form_validation { list-style: none; padding: 0; color: #9ca3af; font-size: 0.85rem; margin-bottom: 20px; }
.form_validation li.valid { color: #059669; font-weight: bold; }
.form_group { position: relative; } /* Important pour le positionnement absolu */
.eye-icon {
    position: absolute;
    right: 10px;
    top: 20px; /* Ajuste selon la hauteur de ton label */
    cursor: pointer;
    user-select: none;
    font-size: 1.2rem;
}
.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
/* Cette structure est maintenant ton standard pour tous les inputs */
.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}.pwd-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.pwd-wrapper input {
    width: 100%;
    padding-left: 40px;  /* Espace pour le verrou à gauche */
    padding-right: 40px; /* Espace pour l'œil à droite */
    box-sizing: border-box;
}

/* Position du verrou à gauche */
.pwd-wrapper .icon-inside {
    position: absolute;
    left: 12px;
    color: #6b7280;
    pointer-events: none;
}

/* Position de l'œil à droite (déjà définie) */
.pwd-wrapper .eye-icon {
    position: absolute;
    right: 12px;
    cursor: pointer;
    color: #6b7280;
}

.input-wrapper input {
    padding-left: 40px; /* L'icône est à gauche, donc on décale le texte */
    width: 100%;        /* Assure que l'input prend toute la largeur */
    box-sizing: border-box; /* Important pour ne pas dépasser du cadre */
}

.icon-inside {
    position: absolute;
    left: 12px;
    color: #6b7280;
    font-size: 1.1rem;
    pointer-events: none;
}
.input-wrapper input {
    padding-left: 40px; /* Espace nécessaire pour l'icône */
}

.icon-inside {
    position: absolute;
    left: 12px;
    color: #6b7280; /* Couleur grise */
    font-size: 1.1rem;
    pointer-events: none; /* L'icône ne bloque pas le clic */
}
.input-wrapper input {
    /* Le padding-left laisse la place à l'icône */
    padding-left: 40px; 
}

.icon-inside {
    position: absolute;
    left: 12px;
    color: #6b7280; /* Couleur grise comme sur ta capture */
    font-size: 1.1rem;
    pointer-events: none; /* Empêche l'icône de bloquer le clic sur l'input */
}
.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrapper input {
    padding-left: 40px; /* L'astuce est là : on décale le texte vers la droite */
}

.icon-inside {
    position: absolute;
    left: 12px; /* Position de l'icône à gauche */
    color: #6b7280;
    font-size: 1.1rem;
}
@media (max-width: 768px) { .form_container { grid-template-columns: 1fr; } .form_grid { grid-template-columns: 1fr; } }