/* =========================================================
   BASE
========================================================= */

html, body {
    height: 100%;
    font-family: 'Urbanist', sans-serif;
}

#login-page {
    min-height: calc(100vh - 140px); /* header + breadcrumb */
}

#login-page *,
#login-page *::before,
#login-page *::after {
    box-sizing: border-box;
}

/* =========================================================
   LAYOUT GLOBAL
========================================================= */

.login-layout {
    display: flex;
    min-height: 100%;
    background: var(--var-login-bg) center / cover no-repeat;
}

@media (max-width: 800px) {
    .login-layout {
        background: var(--var-login-bg-mini) center / cover no-repeat;
    }
}

/* =========================================================
   VISUEL / SLOGAN
========================================================= */

.login-visual {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-overlay {
    text-align: center;
}

.login-overlay h2 {
    margin: 0;
    font-size: 3.9rem !important;
    line-height: 1.15;
    font-weight: 700;
    color: #fff;
}

.login-overlay h2 span {
    position: relative;
    display: inline-block;
    font-style: italic;
    font-weight: 400;
    z-index: 1;
}

.login-overlay h2 span::after {
    content: "";
    position: absolute;
    left: -6px;
    right: -6px;
    bottom: 6px;
    height: 14px;
    background: #1c2258;
    opacity: .9;
    z-index: -1;
    border-radius: 2px;
}

/* =========================================================
   PANEL LOGIN
========================================================= */

.login-panel {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px 160px; /* SAFE AREA FOOTER */
}

.login-card {
    width: 100%;
    max-width: 520px;
    background: #fff;
    padding: 44px;
    border-radius: 28px;
    box-shadow: 0 25px 60px rgba(0,0,0,.15);
}

/* TITRE */

.login-card h1 {
    font-size: 1.5rem !important;
    font-weight: 700;
    color: var(--text-primary);
}

.login-card h1 span {
    color: #e1001a;
}

.required-note {
    font-size: .8rem !important;
    color: #6b6f8a;
}

/* =========================================================
   FORMULAIRE
========================================================= */

.form-group {
    position: relative;
    margin-bottom: 16px;
}

.form-group label {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
}

.form-group input {
    width: 100%;
    height: 48px;
    padding: 0 44px 0 14px;
    border-radius: 10px;
    border: 1.5px solid var(--text-primary);
    font-size: 14px;
}

.form-group input::placeholder {
    color: #9aa0b3;
    font-style: italic;
}

.form-group input:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59,75,216,.12);
}

/* AIDE EMAIL */

.help-icon {
    position: absolute;
    top: 0;
    right: 4px;
    width: 18px;
    height: 18px;
    background: #fdebed;
    color: #e1001a;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* PASSWORD */

.password-wrapper {
    position: relative;
}

.toggle-password {
    position: absolute;
    top: -25px;
    right: 0;
    background: none;
    border: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.icon-eye {
    width: 18px;
    height: 18px;
    background: url("/refonte/icons/icon-eye.svg") center / contain no-repeat;
}

.toggle-password.is-visible .icon-eye {
    background-image: url("/refonte/icons/icon-eye-off.svg");
}

.forgot-link {
    font-size: 12px;
    color: var(--text-primary);
    text-decoration: underline;
    display: inline-block;
    margin-bottom: 20px;
}

/* =========================================================
   CTA
========================================================= */

.btn-login {
    display: block;
    margin-left: auto;
    min-width: 180px;
    padding: 12px 28px;
    border-radius: 50px;
    border: none;
    background: #1c2258;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.btn-login:hover {
    background: var(--color-red-primary);
}

/* =========================================================
   HELP BOXES
========================================================= */

.login-help {
    margin-top: 26px;
    display: grid;
    gap: 14px;
}

.help-box {
    display: flex;
    gap: 12px;
    padding: 14px;
    border-radius: 12px;
    background: #f4f6ff;
    font-size: 13px;
}

.help-box strong {
    font-weight: 700;
    text-align: left !important
}

.help-icon-box {
    width: 51px;
    height: 51px;
    background: #e9edff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.help-icon-box img {
    width: 51px;
    height: 51px;
}

/* =========================================================
   TABLETTE
========================================================= */

@media (max-width: 1024px) {

    .login-layout {
        flex-direction: column;
    }

    .login-visual {
        height: 220px;
        flex: 0 0 auto;
    }

    .login-overlay h2 {
        font-size: 32px;
    }

    .login-panel {
        width: 100%;
        padding: 24px 20px 180px;
    }

    .login-card {
        max-width: 640px;
    }
}

/* =========================================================
   MOBILE PORTRAIT
========================================================= */

@media (max-width: 768px) {

    .login-visual {
        display: none;
    }

    .login-panel {
        padding: 16px 16px 180px;
    }

    .login-card {
        max-width: 100%;
        padding: 24px 20px;
        border-radius: 20px;
    }

    .btn-login {
        width: 100%;
        margin-left: 0;
    }
}

/* =========================================================
   MOBILE PAYSAGE
========================================================= */

@media (max-height: 500px) and (orientation: landscape) {

    .login-visual {
        display: none;
    }

    .login-panel {
        width: 100%;
        padding: 16px 16px 220px; /* FOOTER SAFE */
    }

    .login-card {
        margin-bottom: 120px;
    }

    .btn-login {
        width: 100%;
        margin-left: 0;
    }
}


/* ======================================
   EMAIL HELP POPOVER
====================================== */

.email-help-popover {
    position: absolute;
    top: 56px;
    right: 0;
    width: 300px;
    background: #ffffff;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 16px 40px rgba(0,0,0,.18);
    z-index: 100;
    display: none;
}

.email-help-popover::before {
    content: "";
    position: absolute;
    top: -8px;
    right: 16px;
    width: 14px;
    height: 14px;
    background: #ffffff;
    transform: rotate(45deg);
    box-shadow: -3px -3px 8px rgba(0,0,0,.04);
}
.email-help-popover .popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    background: white;
}

.email-help-popover .popover-header strong {
    font-size: 15px;
    font-weight: 700;
    color: #1c2258;
}

.email-help-popover .popover-close {
    background: none;
    border: none;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    color: #1c2258;
}
.email-help-popover .popover-content {
    font-size: 13px;
    line-height: 1.45;
    color: #5a5f7a;
}
.email-help-popover.is-visible {
    display: block;
}

/* ======================================
   RGAA – MESSAGE D’ERREUR / ALERT
====================================== */

.alert[role="alert"] {
    position: relative;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.4;
}

/* Variante erreur (alert-danger) */
.alert-danger[role="alert"] {
    background-color: #fdebed;
    border: 1px solid #e1001a;
    color: #8a0012;
}

/* Icône visuelle (optionnelle mais utile UX) */
.alert-danger[role="alert"]::before {
    content: "⚠";
    font-weight: 700;
    margin-right: 8px;
}

/* ======================================
   ERREURS CHAMPS – AFFICHAGE CONDITIONNEL
====================================== */
/* Caché par défaut */
.field-error {
    display: none;
    color: #e1001a;
    font-size: 12px;
    margin-top: 6px;
}

/* Visible seulement après submit */
form.is-submitted input.is-invalid + .field-error {
    display: block;
}

/* Bordure erreur */
form.is-submitted input.is-invalid {
    border-color: #e1001a;
}

/* ===============================
   ERREURS DE CHAMP
================================ */

/* Caché par défaut */
.field-error {
    display: none;
    color: #e1001a;
    font-size: 12px;
    margin-top: 6px;
}

/* Affichage uniquement après submit */
.form-group.is-invalid .field-error {
    display: block;
}

/* Bordure champ invalide */
.form-group.is-invalid input {
    border-color: #e1001a;
}


/* =====================================
   PAGE : MOT DE PASSE OUBLIÉ (REM)
   ===================================== */

#passwordForgotten {
    padding: 3.75rem 1.25rem;
    background: #ffffff;
}

/* Conteneur principal */
#passwordForgotten .smallWrapper {
    max-width: 37.5rem;
    margin: 0 auto;
    text-align: left;
}

#passwordForgotten .smallWrapper > p{
    font-size: 1rem !important
}
/* =====================
   TITRE & TEXTE
   ===================== */

#passwordForgotten .titleSection {
    font-size: 1.375rem;
    font-weight: 700;
    color: #1C2258;
    margin-bottom: 0.75rem;
}

#passwordForgotten p.center {
    font-size: 0.875rem;
    line-height: 1.5;
    color: #4A4A4A;
    margin-bottom: 1.25rem;
}

/* =====================
   MESSAGE D’ERREUR
   ===================== */

#passwordForgotten .alert-expired {
    background: #FFE4E6;
    color: #BC1722;
    border-radius: 0.5rem;
    padding: 0.625rem 0.875rem;
    font-size: 0.8125rem;
    margin: 1rem auto;
    width: 100%;
}

/* =====================
   FORMULAIRE
   ===================== */

#passwordForgotten .form-group {
    text-align: left;
    margin-bottom: 1.5rem;
}

#passwordForgotten label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1C2258;
    margin-bottom: 0.375rem;
}

/* Champ email */
#passwordForgotten input[type="email"] {
    width: 100%;
    height: 2.75rem;
    padding: 0 0.875rem;
    font-size: 0.875rem;
    border-radius: 0.625rem;
    border: 0.0625rem solid #D1D5DB;
    transition: border-color 0.2s ease;
}

#passwordForgotten input[type="email"]:focus {
    outline: none;
    border-color: #2C2F7B;
}

/* =====================
   BOUTON SUBMIT
   ===================== */

#passwordForgotten .wrapperSubmit {
    margin-top: 1.5rem;
}

#passwordForgotten .submitBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #2C2F7B;
    border-radius: 1.375rem;
    padding: 0.75rem 1.75rem;
    cursor: pointer;
    gap: 0.375rem;
    transition: background 0.2s ease-in-out;
}

#passwordForgotten .submitBtn:hover {
    background: #1C2258;
}

#passwordForgotten .submitBtn input {
    background: none;
    border: none;
    color: #FFFFFF;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

/* =====================
   BLOC AIDE / FAQ
   ===================== */

#passwordForgotten .helpBox {
    margin-top: 2.25rem;
    padding: 0.875rem 1rem;
    border: 0.0625rem solid #E5E7EB;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-align: left;
}

#passwordForgotten .helpBox strong {
    font-size: 0.8125rem;
    color: #1C2258;
    display: block;
}

#passwordForgotten .helpBox span {
    font-size: 0.8125rem;
    color: #6B7280;
}

/* =====================
   RESPONSIVE MOBILE
   ===================== */

@media (max-width: 48rem) {
    #passwordForgotten {
        padding: 2.5rem 1rem;
    }

    #passwordForgotten .titleSection {
        font-size: 1.25rem;
    }
}
#passwordForgotten .wrapperSubmit {
    display: flex;
    justify-content: flex-end;
}
.border-mauve{
    border:1px solid #CACAFF
}

.invalid-feedback{
    display: none !important;
}




#validation {
    text-align: left;
}

#validation .validation-wrapper {
    width: 40%;
    margin: 120px auto;
}

#validation .validationIcon {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

#validation .validationIcon img {
    width: 177px;
    height: auto;
}

.nickel img{
    width: 64px !important;
    height: 64px !important;
}
.validation-title.nickel{
    font-size: 1.4rem !important;
    margin-bottom: 10px
}

#validation .validation-title {
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    color: #1C2258;
    margin-bottom: 12px;
}

#validation .validation-text {
    font-size: 14px;
    color: #000000;
    margin-bottom: 16px;
}

#validation .validation-help {
    font-size: 13px;
    line-height: 1.6;
    color: #000000;
    margin-bottom: 32px;
}

#validation .validation-help span{
    color: #1C2258;
    font-size: 1.2rem;
    font-weight: 700
}

#validation .validation-help a {
    color: #000000;
    font-weight: 400;
    text-decoration: underline;
}

#validation .validation-actions {
    display: flex;
    justify-content: center;
}


/* ============================
   RESET PASSWORD – LAYOUT
   ============================ */

#resetPassword {
    padding: 80px 0;
}

#resetPassword .smallWrapper {
    max-width: 520px;
    margin: 0 auto;
}

/* ============================
   TITRES & TEXTES
   ============================ */

#resetPassword .titleSection {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    color: #1C2258;
    margin-bottom: 12px;
}

#resetPassword p.center {
    text-align: center;
    font-size: 14px;
    color: #6B7280;
    margin-bottom: 8px;
}

#resetPassword .required-fields {
    font-size: 12px;
    color: #6B7280;
    margin-bottom: 24px;
}

/* ============================
   FORM GROUP
   ============================ */

#resetPassword .form-group {
    margin-bottom: 28px;
}

#resetPassword label {
    font-size: 14px;
    font-weight: 600;
    color: #1C2258;
}

/* Label + afficher */
#resetPassword .label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

/* ============================
   INPUT PASSWORD
   ============================ */

#resetPassword input[type="password"],
#resetPassword input[type="text"] {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid #1C2258;
    font-size: 14px;
    color: #1C2258;
}

#resetPassword input::placeholder {
    color: #9CA3AF;
}

/* ============================
   TOGGLE PASSWORD
   ============================ */

#resetPassword .toggle-password {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    color: #1C2258;
    cursor: pointer;
}

#resetPassword .toggle-password .eye-icon {
    width: 18px;
    height: 18px;
    background: url("/refonte/icons/icon-eye.svg") no-repeat center / contain;
}

#resetPassword .toggle-password.is-visible .eye-icon {
    background-image: url("/refonte/icons/icon-eye-off.svg");
}

/* ============================
   PASSWORD RULES
   ============================ */

#resetPassword .password-rules {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
}

#resetPassword .password-rules li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6B7280;
    margin-bottom: 6px;
}

#resetPassword .password-rules .rule-icon {
    width: 14px;
    font-weight: 700;
    color: #9CA3AF;
}

/* Valid state */
#resetPassword .password-rules li.valid {
    color: #15803D;
}

#resetPassword .password-rules li.valid .rule-icon {
    color: #15803D;
}

/* ============================
   SUBMIT BUTTON
   ============================ */

#resetPassword .form-actions {
    margin-top: 36px;
}


/* ============================
   HELP BOX
   ============================ */

#resetPassword .login-help {
    margin-top: 48px;
}

#resetPassword .help-box {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 10px;
    background: #F9FAFB;
}

#resetPassword .help-box.border-mauve {
    border: 1px solid #C7B8FF;
}

a.help-link{
    color: #1c2258 !important;
    text-decoration: none
}

#resetPassword .help-icon-box img {
    width: 32px;
    height: 32px;
}

#resetPassword .help-content {
    font-size: 13px;
    color: #1C2258;
}

#resetPassword .help-content strong {
    font-weight: 700;
}


/* Bouton reset mot de passe */
.btn-gris {
    appearance: none;
    border: none;
    background: #949494 !important;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 999px;
    cursor: not-allowed;
    line-height: 1;
    min-width: 240px;
    text-align: center;
    box-shadow: none;
}
.btn-gris:hover {
    appearance: none;
    border: none;
    background: #1C2258 !important;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 999px;
    cursor: not-allowed;
    line-height: 1;
    min-width: 240px;
    text-align: center;
    box-shadow: none;
}


/* État actif (quand JS valide tout) */
#passwordForgotten .form-actions button.is-active,
#passwordForgotten .submitBtn input[type="submit"].is-active {
    background: #1C2258;
    cursor: pointer;
}

/* Hover uniquement si actif */
#passwordForgotten .form-actions button.is-active:hover,
#passwordForgotten .submitBtn input[type="submit"].is-active:hover {
    background: #151A45;
}

/* Focus accessibilité */
#passwordForgotten .form-actions button:focus-visible,
#passwordForgotten .submitBtn input[type="submit"]:focus-visible {
    outline: 2px solid #1C2258;
    outline-offset: 3px;
}


.password-reinit{
    top: 0 !important
}

.error-message{
    color: red;
}