/* ===== CONTAINER ===== */
#password-reset {
    max-width: 420px;
    margin: 60px auto;
    background: #ffffff;
    padding: 30px 25px;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    border: 1px solid #e2e8f0;
    font-size: 15px;
}

/* ===== TITRE ===== */
#password-reset h1 {
    font-size: 22px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 25px;
    color: #1e293b;
}

/* ===== FORM GROUP ===== */
#password-reset form > div {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

/* ===== LABEL ===== */
#password-reset label {
    font-size: 14px;
    font-weight: 500;
    color: #475569;
    margin-bottom: 6px;
}

/* ===== INPUT ===== */
#password-reset input[type="email"] {
    border: 1px solid #e2e8f0;
    padding: 10px 12px;
    font-size: 14px;
    transition: all 0.2s ease;
}

/* Focus */
#password-reset input[type="email"]:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(64,113,32,0.1);
    outline: none;
}

#password-reset input[type="email"] {
    padding-left: 36px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2-.5a.5.5 0 0 0-.5.5v.217l6.5 3.25 6.5-3.25V4a.5.5 0 0 0-.5-.5H2zm13 2.383l-5.857 2.929a1 1 0 0 1-.886 0L2.4 5.883V12a.5.5 0 0 0 .5.5h10.2a.5.5 0 0 0 .5-.5V5.883z'/%3E%3C/svg%3E") no-repeat 10px center;
    background-size: 16px;
}

/* ===== INPUT PASSWORD ===== */
#password-reset input[type="password"],
#password-reset .control.has-eye input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #e2e8f0;
    padding: 10px 12px;
    font-size: 14px;
    transition: all 0.2s ease;
}

#password-reset input[type="password"]:focus,
#password-reset .control.has-eye input[type="text"]:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(64,113,32,0.1);
    outline: none;
}

/* ===== TEXTE INFO ===== */
#password-reset small {
    font-size: 15px;
    color: #64748b;
    line-height: 1.6;
    display: block;
    margin-bottom: 12px;
}

/* ===== BOUTON ===== */
#password-reset .btn {
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

/* ===== CHAMP + ŒIL D'AFFICHAGE =====
   Repris du bloc mot de passe du profil (public/css/user/profile.css), scopé
   sous #password-reset et avec les couleurs résolues : la palette --c-* du
   profil n'est pas chargée sur cette page. */
#password-reset .field {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

#password-reset .control.has-eye {
    position: relative;
}

#password-reset .toggle-eye {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: none;
    background: none;
    color: #667589;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    box-sizing: border-box;
    line-height: 1;
}

#password-reset .toggle-eye:hover {
    background: #e3f6f4;
    color: #1f9c93;
}

#password-reset .control.has-eye input[type="password"],
#password-reset .control.has-eye input[type="text"] {
    padding-right: 52px;
}

#password-reset .field-error {
    display: block;
    font-size: 12px;
    color: #e2635b;
    font-weight: 600;
    margin-top: 4px;
}

#password-reset .field-error ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#password-reset #confirmPasswordField.invalid .control input {
    border-color: #e2635b;
    background: #fdecea;
}

/* ===== JAUGE DE FORCE ===== */
#password-reset .strength-block {
    margin: -4px 0 8px;
}

#password-reset .strength {
    margin-bottom: 12px;
}

#password-reset .bars {
    display: flex;
    gap: 5px;
}

#password-reset #strengthBars span {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: #e3e7ee;
    transition: background 0.2s ease, opacity 0.2s ease;
}

#password-reset .strength-label {
    display: block;
    margin-top: 8px;
    color: #707b8e;
    font-size: 13px;
    font-weight: 700;
}

#password-reset .checks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px 14px;
}

#password-reset .checks li {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #707b8e;
    font-size: 12.5px;
    line-height: 1.4;
}

#password-reset .checks li .tick {
    width: 15px;
    height: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1.5px solid #cbd3e0;
    transition: background 0.15s ease, border-color 0.15s ease;
    background: transparent;
}

#password-reset .checks li .tick svg {
    opacity: 0;
}

#password-reset .checks li.ok {
    color: #3fa15c;
    font-weight: 600;
}

#password-reset .checks li.ok .tick {
    background: #3fa15c;
    border-color: #3fa15c;
}

#password-reset .checks li.ok .tick svg {
    opacity: 1;
    color: #fff;
}

#password-reset .btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}