/* ============================================================
   Creation de compte - finalisation d'une Invitation (Flux 2).
   Design "Creation de compte" (Claude Design).

   Les primitives de carte/champ (.mfp-card, .mfp-field__*, .mfp-h1, .mfp-sub)
   sont dupliquees depuis login.scss plutot que factorisees dans un partial
   commun : les deux entrypoints (login / invitation_claim) ne se chargent
   jamais ensemble, et toucher login.scss engagerait la politique de
   non-regression design (diff + capture avant/apres) sur une page hors
   perimetre de cette tache.
   ============================================================ */

body {
    background: var(--mfp-bg-app) !important;
    color: var(--mfp-text);
}

.mfp-invite-nav,
.mfp-invite-wrap {
    font-family: var(--mfp-font-body);
}

/* ---- En-tete : logo seul, pas de mosaique (page plus sobre que le login) */
.mfp-invite-nav {
    height: 64px;
    display: flex;
    align-items: center;
    padding: 0 24px;
    background: var(--mfp-surface);
    border-bottom: 1px solid var(--mfp-border-lt);
}

.mfp-invite-wrap {
    min-height: calc(100vh - 64px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 48px 24px;
}

/* ---- Carte (largeur propre a ce design, 520px dans la maquette) ---- */
.mfp-invite-card {
    width: 520px;
    max-width: 100%;
    padding: 32px;
    background: var(--mfp-surface);
    border-radius: var(--mfp-radius-xl);
    box-shadow: 0 24px 60px rgba(15, 40, 80, 0.14);
}

.mfp-h1 {
    margin: 0 0 4px;
    font-family: var(--mfp-font-display);
    font-weight: 700;
    font-size: 28px;
    line-height: 1.15;
    color: var(--mfp-navy);
}

.mfp-sub {
    margin: 0 0 24px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--mfp-text-muted);
}

/* ---- Bandeau d'invitation ---- */
.mfp-invite-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--mfp-bg-app);
    border-left: 4px solid var(--mfp-primary);
    border-radius: 4px;
    padding: 12px 14px;
    margin-bottom: 20px;

    > i {
        font-size: 18px;
        line-height: 1.2;
        color: var(--mfp-primary);
    }
}

.mfp-invite-banner__title {
    display: block;
    font-weight: 500;
    font-size: 13px;
    color: var(--mfp-text);
}

.mfp-invite-banner__line {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--mfp-text-muted);
}

/* ---- Champs (dupliques de login.scss) ---- */
.mfp-field__label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 14px;
    color: var(--mfp-text);
}

.mfp-field__box {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    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); }
}

.mfp-field__icon {
    font-size: 14px;
    color: var(--mfp-text-soft);
}

/* AJOUT: le theme de formulaire global (bootstrap_5_custom.html.twig) ajoute
   toujours .form-control, qui impose font-size/line-height Bootstrap - a
   specificite egale avec .mfp-field__input, l'ordre de chargement des
   feuilles deciderait (piege deja rencontre : cf. memoire
   project_scss_overrides_after_bootstrap). Selecteur a deux classes pour
   gagner sans dependre de cet ordre. */
.mfp-field__box .form-control.mfp-field__input {
    font-size: 13px;
    line-height: 1.2;
    color: var(--mfp-text);

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

.mfp-field__toggle {
    display: flex;
    align-items: center;
    padding: 4px;
    border: none;
    background: transparent;
    color: var(--mfp-text-muted);
    cursor: pointer;

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

.mfp-field__hint {
    margin-top: 6px;
    font-size: 11px;
    color: var(--mfp-text-soft);
}

/* ---- Robustesse du mot de passe (password_strength_controller.js) ---- */
.mfp-strength {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;

    /* Le orange "moyen" n'a pas de token app.scss dedie (seuls primary/danger
       existent) : variable locale a ce composant plutot que polluer le theme
       global pour ce seul usage. */
    --mfp-warning: #de847b;

    /* AJOUT: display:flex ici est en origine auteur, donc prioritaire sur le
       display:none de l'agent utilisateur pour [hidden] (peu importe la
       specificite) - sans cette regle, meterTarget.hidden=true du controller
       Stimulus n'a aucun effet visible. Meme piege pour .mfp-match ci-dessous. */
    &[hidden] { display: none; }
}

.mfp-strength__bar {
    height: 5px;
    flex: 1;
    border-radius: 999px;
    background: var(--mfp-border-lt);
}

.mfp-strength__label {
    font-family: var(--mfp-font-display);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.mfp-strength--weak .mfp-strength__bar:nth-child(-n+1) { background: var(--mfp-danger); }
.mfp-strength--weak .mfp-strength__label { color: var(--mfp-danger); }

.mfp-strength--medium .mfp-strength__bar:nth-child(-n+2) { background: var(--mfp-warning); }
.mfp-strength--medium .mfp-strength__label { color: var(--mfp-warning); }

.mfp-strength--strong .mfp-strength__bar { background: var(--mfp-primary); }
.mfp-strength--strong .mfp-strength__label { color: var(--mfp-primary); }

/* ---- Correspondance de la confirmation ---- */
.mfp-match {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 11px;

    &[hidden] { display: none; }
}

.mfp-match--error { color: var(--mfp-danger); }
.mfp-match--ok { color: var(--mfp-primary); }

/* ---- Bouton et lien (dupliques de login.scss - meme raison qu'en tete de
   fichier : cette page ne charge jamais login.scss). ---- */
.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-link {
    font-size: 13px;
    font-weight: 500;
    color: var(--mfp-accent);

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