// dans les attributs style="" inline du template sans passer par la compilation Sass.

/* L'app force body{background:lightgrey} globalement (app.scss) : on retablit
   le fond clair du design uniquement sur cette page.
   MODIF: font-family retire du body (app.scss charge apres avec !important et gagne) ;
   la police est appliquee directement sur les conteneurs de la page login. */
body {
    background: var(--mfp-bg-app) !important;
    color: var(--mfp-text);
}

/* Poppins applique directement sur les conteneurs login pour depasser l'heritage
   de body{font-family:'Open Sans'!important} issu de app.scss. Un selecteur direct
   l'emporte sur une valeur heritee, meme !important sur le parent. */
.mfp-auth-nav,
.mfp-auth-wrap {
    font-family: var(--mfp-font-body);
}

/* ---- Navbar "auth" --------------------------------------------------- */
/* sticky-top bg-white = Bootstrap ; seule la hauteur et la couleur de bordure restent */
.mfp-auth-nav {
    height: 64px;
    border-bottom: 1px solid var(--mfp-border-lt);
}

/* fw-semibold lh-1 = Bootstrap ; letter-spacing et couleur de marque restent */


/* text-decoration-none = Bootstrap ; font-family herite de body */
.mfp-meta-link {
    font-size: 13px;
    font-weight: 500;
    color: var(--mfp-accent);

    &:hover { color: var(--mfp-accent-deep); }
}

/* ---- Scene : carte centree sur une mosaique de logos en filigrane ---- */
.mfp-auth-wrap {
    position: relative;
    min-height: calc(100vh - 64px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    overflow: hidden; /* clippe les tuiles pivotees qui debordent */
}

.mfp-auth-backdrop {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-auto-rows: 120px;
    gap: 28px;
    padding: 60px;
    opacity: 0.55;
    pointer-events: none;
    /* fond degage au centre (lisibilite de la carte), tuiles visibles sur les bords */
    -webkit-mask-image: radial-gradient(ellipse at center, transparent 0%, transparent 32%, #000 78%);
    mask-image: radial-gradient(ellipse at center, transparent 0%, transparent 32%, #000 78%);

    > div {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ---- Carte ----------------------------------------------------------- */
.mfp-card {
    position: relative;
    z-index: 1;
    width: 440px;
    max-width: 100%;
    padding: 40px;
    background: var(--mfp-surface);
    border-radius: var(--mfp-radius-xl);
    box-shadow: 0 24px 60px rgba(15, 40, 80, 0.14);
}

/* fw-semibold text-uppercase = Bootstrap ; font-size et letter-spacing restent */
.mfp-kicker {
    font-size: 11.5px;
    color: var(--mfp-text-muted);
    letter-spacing: 0.06em;
}

/* fw-bold mb-0 = Bootstrap ; font-family display, taille et couleur de marque restent */
.mfp-h1 {
    font-family: var(--mfp-font-display);
    font-size: 28px;
    line-height: 1.1;
    color: var(--mfp-navy);
}

/* font-family herite de body */
.mfp-sub {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--mfp-text-muted);
}

/* ---- Champs ---------------------------------------------------------- */
/* fw-semibold text-uppercase = Bootstrap ; display, taille et letter-spacing restent */
.mfp-field__label {
    display: block;
    margin-bottom: 6px;
    font-size: 11.5px;
    color: var(--mfp-text-muted);
    letter-spacing: 0.06em;
}

.mfp-field__box {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 48px; /* size lg du design (champ d'auth confortable) */
    padding: 0 12px;
    background: var(--mfp-bg-app);
    border: 1px solid var(--mfp-border);
    border-radius: var(--mfp-radius-md);
    transition: border-color 120ms ease-out, box-shadow 120ms ease-out;

    &:focus-within {
        border-color: var(--mfp-primary);
        box-shadow: var(--mfp-focus-ring);
    }

    &.has-error { border-color: var(--mfp-danger); }
}

/* flex-shrink-0 d-inline-flex align-items-center lh-1 = Bootstrap */
.mfp-field__icon {
    font-size: 16px;
    color: var(--mfp-text-muted);
}

/* font-family herite de body */
.mfp-field__input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: var(--mfp-text);
    line-height: 1.2;

    &::placeholder { color: var(--mfp-text-soft); }
}

/* flex-shrink-0 d-inline-flex align-items-center = Bootstrap */
.mfp-field__toggle {
    padding: 0;
    border: none;
    background: transparent;
    color: var(--mfp-text-muted);
    cursor: pointer;

    &:hover { color: var(--mfp-text); }
}

/* ---- Boutons --------------------------------------------------------- */
/* font-family herite de body */
.mfp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    border-radius: var(--mfp-radius-lg);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background 120ms ease-out, color 120ms ease-out, box-shadow 120ms ease-out, transform 80ms ease-out;

    &:active { transform: translateY(1px); }
}

.mfp-btn--secondary {
    background: var(--mfp-surface);
    color: var(--mfp-text);
    border-color: var(--mfp-border);

    &:hover { background: var(--mfp-bg-app); color: var(--mfp-text); }
}

/* ---- Divers ---------------------------------------------------------- */
/* text-decoration-none = Bootstrap ; font-family herite de body */
.mfp-link {
    font-size: 13px;
    font-weight: 500;
    color: var(--mfp-accent);

    &:hover { color: var(--mfp-accent-deep); }
}

.mfp-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 2px 0;

    &::before,
    &::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--mfp-border-lt);
    }

    /* font-family herite de body */
    span {
        font-size: 10.5px;
        font-weight: 600;
        color: var(--mfp-text-soft);
        letter-spacing: 0.06em;
    }
}