/* PCRT - pages d'authentification (connexion, configuration initiale).
 * S'appuie sur les jetons de style.css (--bg, --surface, --text, --muted,
 * --border, --fill, --danger...) : clair et sombre suivent <html data-theme>. */

body.lg {
    margin: 0; padding: 0 !important;       /* annule body{padding-top:var(--ptopbar-h)} */
    /* Occupe exactement la zone visible, sans dépendre des unités vh/dvh
     * (calculées différemment selon les navigateurs) ; défile si la fenêtre est basse. */
    position: fixed; inset: 0; min-height: 0; overflow: auto;
    display: grid; grid-template-columns: minmax(340px, 5fr) 7fr; grid-template-rows: minmax(100%, auto);
    background: var(--bg); color: var(--text);
}
html:has(body.lg) { background: var(--bg); }
body.lg.lg-solo { grid-template-columns: minmax(0, 1fr); }

/* ── Panneau de marque ─────────────────────────────────────── */
.lg-brand {
    background: var(--navy-deepest, #0b1b29); color: #e6eef4;
    padding: 2.5rem; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
}
:root[data-theme="dark"] .lg-brand { background: #071420; border-right: 1px solid var(--border); }
.lg-mark { display: flex; align-items: center; gap: .75rem; }
.lg-mark img { width: 40px; height: 40px; display: block; }
.lg-mark span { font-size: 20px; font-weight: 600; letter-spacing: .04em; }
.lg-pitch { max-width: 30rem; }
.lg-pitch h2 { margin: 0 0 .75rem; font-size: 28px; line-height: 1.25; font-weight: 600; text-wrap: balance; }
.lg-pitch p { margin: 0; font-size: 15px; line-height: 1.55; color: #a9bccb; max-width: 60ch; text-wrap: pretty; }
.lg-ver { font-size: 12px; color: #8ea3b3; }

/* ── Panneau de formulaire ─────────────────────────────────── */
.lg-main { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2rem 1.5rem; gap: 1.5rem; }
.lg-box { width: 100%; max-width: 22.5rem; }
.lg-solo .lg-box { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 2rem; max-width: 26rem; }
.lg-box h1 { margin: 0 0 1.5rem; font-size: 24px; line-height: 1.25; font-weight: 600; }
.lg-box > p { margin: -.75rem 0 1.5rem; color: var(--muted); font-size: 14px; }

.lg-field { margin-bottom: 1rem; }
.lg-field label { display: block; margin-bottom: .375rem; font-size: 13px; font-weight: 500; }
.lg-input, body.lg input.lg-input {
    width: 100%; height: 40px; padding: 0 .75rem; box-sizing: border-box;
    font: inherit; font-size: 15px; color: var(--text);
    background: var(--card); border: 1px solid var(--field-border); border-radius: var(--r-ctl, 6px);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.lg-input:hover { border-color: var(--muted); }
.lg-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent); }
.lg-input[aria-invalid="true"] { border-color: var(--danger-hover, #b91c1c); }
.lg-pw { position: relative; }
.lg-pw .lg-input { padding-right: 2.75rem; }
.lg-eye {
    position: absolute; top: 2px; right: 2px; width: 36px; height: 36px; padding: 0;
    display: grid; place-items: center; background: none; border: 0; border-radius: 4px;
    color: var(--muted); cursor: pointer;
}
.lg-eye:hover { color: var(--text); background: var(--sunk, #f1f5f9); }
.lg-eye svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lg-eye .off { display: none; }
.lg-eye[aria-pressed="true"] .on { display: none; }
.lg-eye[aria-pressed="true"] .off { display: block; }
.lg-hint { margin: .375rem 0 0; font-size: 12px; color: var(--warning); }
.lg-hint[hidden] { display: none; }

.lg-alert { margin: 0 0 1rem; padding: .625rem .75rem; border-radius: var(--r-ctl, 6px); font-size: 14px; border: 1px solid; }
.lg-alert.err  { background: var(--danger-light); border-color: color-mix(in srgb, var(--danger-hover, #b91c1c) 40%, transparent); color: var(--danger-hover, #b91c1c); }
.lg-alert.warn { background: var(--warning-light); border-color: color-mix(in srgb, var(--warning) 40%, transparent); color: var(--warning); }
:root[data-theme="dark"] .lg-alert.err { color: #f08a8a; }

.lg-submit { width: 100%; height: 40px; margin-top: .5rem; font-size: 15px; }

.lg-foot { display: flex; align-items: center; justify-content: flex-start; gap: .75rem; width: 100%; max-width: 22.5rem; font-size: 13px; color: var(--muted); }
.lg-theme { background: none; border: 0; padding: .25rem 0; font: inherit; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.lg-theme:hover { color: var(--text); }

/* ── Connexion Google (affichée seulement si activée) ── */
.lg-sep { display: flex; align-items: center; gap: .75rem; margin: 1rem 0; color: var(--muted); font-size: 13px; }
.lg-sep::before, .lg-sep::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.lg-google { width: 100%; height: 40px; font-size: 15px; text-decoration: none; }

/* ── Mobile : une colonne, bandeau de marque compact ───────── */
@media (max-width: 860px) {
    body.lg { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
    .lg-brand { padding: 1rem 1.25rem; flex-direction: row; align-items: center; }
    .lg-pitch, .lg-ver { display: none; }
    .lg-main { justify-content: flex-start; padding-top: 2rem; }
}

/* Choix Compte local / Annuaire */
.lg-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 2px; margin-bottom: 1.25rem; border: 1px solid var(--field-border); border-radius: 8px; background: var(--surface-2); }
.lg-seg label { position: relative; display: block; margin: 0; text-align: center; border-radius: 6px; font-size: 14px; font-weight: 500; color: var(--muted); cursor: pointer; }
.lg-seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.lg-seg span { display: block; padding: .5rem .5rem; }
.lg-seg label:hover { color: var(--text); }
.lg-seg label:has(input:checked) { background: var(--card); color: var(--text); box-shadow: 0 0 0 1px var(--border); }
.lg-seg label:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 1px; }

#lgModeHint { color: var(--muted); }