#beguineur-form {
    max-width: 520px;
    margin: 0 auto;
    padding: 22px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
    font-family: "Inter", "Roboto", sans-serif;
    color: #222;
}

#beguineur-form input,
#beguineur-form select,
#beguineur-form textarea {
    width: 100%;
    margin-bottom: 12px;
    padding: 11px;
    border: 1px solid #d9dfe6;
    border-radius: 8px;
    font-size: 15px;
    box-sizing: border-box;
    transition: box-shadow .15s ease, border-color .15s ease;
}

#beguineur-form input:focus,
#beguineur-form select:focus,
#beguineur-form textarea:focus {
    outline: none;
    border-color: #2f80ed;
    box-shadow: 0 4px 18px rgba(47,128,237,0.12);
}

/* Champ mot de passe avec icône œil */
.password-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.password-wrap input {
    width: 100%;
    padding: 10px 40px 10px 12px; /* espace pour l'icône */
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 15px;
}

.password-wrap i.toggle-password {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 18px;
    color: #ed5106;
    transition: color .2s ease;
}

.password-wrap i.toggle-password:hover {
    color: #000;
}


.step {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.26s ease, transform 0.26s ease;
    will-change: opacity, transform;
}
.step.is-active { opacity:1; transform:translateY(0); }

.button-row-registrer {
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:6px;
}
.button-row-registrer .prev-step {
    background:transparent;
    color:#ed5106;
    border:2px solid #ed5106;
    padding:10px 14px;
    border-radius:50px;
    cursor:pointer;
}
.button-row-registrer .next-step,
.button-row-registrer .submit-btn,
.connect-btn {
    margin-left:auto;
    background-color:#ed5106;
    color:#fff;
    border:2px solid #ed5106;
    padding:10px 16px;
    border-radius:50px;
    cursor:pointer;
    text-decoration:none;
    text-align:center;
}
.button-row-registrer .prev-step:hover { background:#ed5106; color:#fff; }
.button-row-registrer .next-step:hover,
.button-row-registrer .submit-btn:hover,
.connect-btn:hover { background-color:transparent; color:#ed5106; }

.form-message { margin-top:14px; text-align:center; font-weight:500; }

.progress-container { margin-bottom:18px; text-align:center; }
.progress-text { margin-bottom:8px; font-weight:600; color:#333; }
.progress-bar { width:100%; height:8px; background:#f0f3f7; border-radius:6px; overflow:hidden; }
.progress-fill { height:100%; width:33.3333%; background:#ed5106; border-radius:6px; transition: width .28s ease; }

.success-wrap { text-align:center; padding:18px 10px; }
.success-msg { margin-bottom:12px; font-size:16px; color:#1a6e3a; }
.connect-btn { background-color:#ed5106; color:#fff; padding:10px 18px; border-radius:8px; display:inline-block; }

@media (max-width:520px){
    #beguineur-form{padding:16px;}
    .button-row-registrer{flex-direction:column-reverse; align-items:stretch;}
    .button-row-registrer .next-step,
    .button-row-registrer .submit-btn,
    .connect-btn,
    .button-row-registrer .prev-step{width:100%; margin-left:0;}
}
