/* PF Accounts — /connexion/, /inscription/, /mot-de-passe-oublie/, /nouveau-mot-de-passe/.
   Reprise de la page de connexion de passlord.net (style/passlord_responsive.css, règles passlord-login-* et
   passlord-social-auth-*, plus les retouches de la charte dans pf_brand_late.css), sur les jetons communs pf-brand.css. */

.pfl-page { width: 100%; margin: 2rem auto 3rem; }
.pfl-shell { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, 460px); gap: 1.5rem; align-items: stretch; }

.pfl-aside,
.pfl-card { position: relative; border-radius: 32px; border: 1px solid var(--pfb-ligne); }
.pfl-aside { padding: 2rem; overflow: hidden; background: var(--pfb-surface-2); }
.pfl-card { padding: 2rem; background: var(--pfb-surface); }

.pfl-aside h1,
.pfl-card__head h2 { margin: 0; color: var(--pfb-encre); font-family: var(--pfb-font-titre); font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; text-wrap: balance; }
.pfl-aside h1 { font-size: clamp(2rem, 3vw, 3.2rem); }
.pfl-card__head h2 { font-size: 2rem; }

.pfl-eyebrow { margin: 0 0 0.75rem; font-family: var(--pfb-font-texte); font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pfb-encre-2); }
.pfl-card__head .pfl-eyebrow { font-size: 0.95rem; line-height: 1.3; letter-spacing: .1em; color: var(--pfb-encre); }

.pfl-lead,
.pfl-card__head p:not(.pfl-eyebrow),
.pfl-feature span,
.pfl-card__footer p,
.pfl-note { margin: 0; color: var(--pfb-encre-corps); font-size: 1rem; line-height: 1.65; }
.pfl-card__head p:not(.pfl-eyebrow) { margin-top: 0.35rem; }

.pfl-features { display: grid; gap: 0.9rem; margin-top: 1.6rem; }
.pfl-feature { display: grid; gap: 0.2rem; padding: 1rem 1.05rem; border-radius: 20px; background: var(--pfb-surface); border: 1px solid var(--pfb-ligne); }
.pfl-feature strong { color: var(--pfb-encre); font-size: 0.96rem; }

/* ---- Boutons sociaux (gabarit du bouton officiel Apple : 52 px, pilule) ---- */
.pfl-social { display: grid; gap: 0.75rem; width: 100%; max-width: 375px; margin: 0 auto 1.4rem; }
.pfl-social__btn {
    display: flex; align-items: center; justify-content: center; gap: 0.75rem;
    width: 100%; height: 52px; padding: 0 1.15rem; border-radius: 26px;
    border: 1px solid var(--pfb-ligne); background: var(--pfb-surface); color: var(--pfb-encre);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 19px; font-weight: 600; line-height: 1; letter-spacing: -0.01em;
    text-decoration: none !important; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pfl-social__btn:hover,
.pfl-social__btn:focus-visible { transform: translateY(-1px); box-shadow: 0 16px 28px rgba(15, 23, 42, 0.08); }
.pfl-social__btn--discord { background: #5865F2; border-color: transparent; color: #fff; }
.pfl-social__btn--discord:hover, .pfl-social__btn--discord:focus-visible { background: var(--pfb-graphite); color: #fff; box-shadow: 0 16px 28px rgba(88, 101, 242, 0.32); }
.pfl-social__btn--apple { background: linear-gradient(135deg, #111827 0%, #1f2937 100%); border-color: transparent; color: #fff; }
.pfl-social__btn--apple:hover, .pfl-social__btn--apple:focus-visible { color: #fff; }
.pfl-social__btn--google:hover, .pfl-social__btn--google:focus-visible { background: var(--pfb-surface-2); border-color: #c5c8cc; color: var(--pfb-encre); }
.pfl-social__btn--facebook { background: #1877f2; border-color: transparent; color: #fff; }
.pfl-social__btn--facebook:hover, .pfl-social__btn--facebook:focus-visible { background: #166fe5; color: #fff; }
.pfl-social__icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: rgba(255, 255, 255, 0.22); flex-shrink: 0; }
.pfl-social__icon svg { width: 22px; height: 22px; display: block; }
.pfl-social__icon--google { background: transparent; width: 24px; height: 24px; }
.pfl-social__icon--google svg { width: 24px; height: 24px; }
.pfl-social__icon--apple { background: transparent; }

.pfl-divider { position: relative; margin: 0 0 1.4rem; text-align: center; }
.pfl-divider::before { content: ""; position: absolute; inset: 50% 0 auto; border-top: 1px solid var(--pfb-ligne); }
.pfl-divider span { position: relative; z-index: 1; display: inline-block; padding: 0 0.9rem; background: var(--pfb-surface); color: var(--pfb-encre-corps); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---- Formulaire ---- */
.pfl-form { display: grid; gap: 1rem; margin-top: 1.5rem; }
.pfl-field { display: grid; gap: 0.5rem; }
.pfl-field label { margin: 0; color: var(--pfb-encre); font-size: 0.92rem; font-weight: 700; }
.pfl-label-row { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; }
.pfl-meta-link { color: var(--pfb-lien); font-size: 0.88rem; font-weight: 700; text-decoration: none; }
.pfl-input {
    width: 100%; min-height: 56px; padding: 0.95rem 1rem; border-radius: 18px;
    border: 1px solid var(--pfb-ligne); background: var(--pfb-surface); color: var(--pfb-encre);
    font: inherit; font-size: 1rem; transition: border-color 160ms ease, box-shadow 160ms ease;
}
.pfl-input::placeholder { color: var(--pfb-encre-2); }
.pfl-input:focus { outline: none; border-color: var(--pfb-encre); box-shadow: 0 0 0 3px var(--pfb-jaune); }
.pfl-input--code { letter-spacing: .3em; font-variant-numeric: tabular-nums; }

.pfl-btn {
    display: inline-flex; justify-content: center; align-items: center; min-height: 52px; padding: 0.9rem 1.2rem;
    border-radius: 18px; border: 1px solid transparent; font-family: var(--pfb-font-texte); font-size: 1rem; font-weight: 700;
    letter-spacing: .01em; text-decoration: none !important; cursor: pointer; transition: transform 160ms ease, background 160ms ease;
}
.pfl-btn:hover, .pfl-btn:focus-visible { transform: translateY(-1px); }
.pfl-btn:disabled { opacity: .6; cursor: default; transform: none; }
.pfl-btn--wide { width: 100%; }
.pfl-btn--primary { border: 0; background: var(--pfb-jaune); color: var(--pfb-noir); }
.pfl-btn--primary:hover { background: var(--pfb-jaune-ombre); color: var(--pfb-noir); }
.pfl-btn--ghost { background: transparent; color: var(--pfb-encre); border-color: var(--pfb-ligne); }
.pfl-btn--ghost:hover { color: var(--pfb-encre); border-color: var(--pfb-encre); }

.pfl-switch { justify-self: center; padding: 0; border: 0; background: none; font: inherit; font-size: 0.92rem; font-weight: 700; color: var(--pfb-lien); cursor: pointer; }
.pfl-switch:hover { text-decoration: underline; }

.pfl-check { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.92rem; line-height: 1.5; color: var(--pfb-encre-corps); }
.pfl-check input { margin-top: 4px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--pfb-noir); }
.pfl-check a { color: var(--pfb-lien); font-weight: 700; }
.pfl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.pfl-alert { margin: 1.35rem 0 0; padding: 0.95rem 1rem; border-radius: 18px; background: rgba(214, 94, 66, 0.1); border: 1px solid rgba(203, 90, 63, 0.18); color: #b14633; font-weight: 700; }
.pfl-alert.is-ok { background: rgba(39, 142, 98, 0.1); border-color: var(--pfb-ligne); color: var(--pfb-encre); font-weight: 600; }

.pfl-card__footer { display: grid; gap: 0.8rem; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--pfb-ligne); }
.pfl-card__footer p { text-align: center; }

/* Un formulaire ou un bloc masqué (étape suivante, autre mode) reste masqué malgré display:grid. */
.pfc [hidden] { display: none !important; }

@media (max-width: 980px) {
    .pfl-shell { grid-template-columns: 1fr; }
    /* Comme sur passlord.net : le formulaire d'abord, la présentation dessous. */
    .pfl-card { order: 1; }
    .pfl-aside { order: 2; }
}

@media (max-width: 767px) {
    .pfl-page { margin: 1rem auto 2rem; }
    .pfl-aside, .pfl-card { padding: 1.2rem; border-radius: 24px; }
    .pfl-aside h1, .pfl-card__head h2 { font-size: 1.8rem; }
    .pfl-label-row { flex-direction: column; align-items: flex-start; }
    .pfl-social__btn { font-size: 17px; }
}