/* Memes jetons que le plan admin : l'identite doit etre la meme de la porte d'entree au
   back-office. Duplique plutot que partage — Host.Auth ne sert aucun asset de Host.Admin. */
:root {
    --color-primary: #124a9a;
    --color-primary-hover: #0e3b7c;
    --color-primary-subtle: #e7eefb;
    --color-on-primary: #ffffff;
    --color-info-accent: #008dbd;
    --color-text: #1c2434;
    --color-text-strong: #263974;
    --color-text-muted: #5b6472;
    --color-surface: #ffffff;
    --color-surface-sunken: #f4f6f9;
    --color-border: #d9dee6;
    --color-border-strong: #b6bec9;
    --color-danger: #b91c1c;
    --color-danger-subtle: #fdecec;
    --focus-ring: 0 0 0 3px rgba(18, 74, 154, .35);
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --radius-field: 8px;
    --radius-card: 12px;
    --shadow-2: 0 4px 12px rgba(28, 36, 52, .12);
    --shadow-3: 0 12px 32px rgba(28, 36, 52, .14);
    --font-heading: "DIN OFFC Pro", "D-DIN", Barlow, system-ui, sans-serif;
    --font-body: Inter, system-ui, sans-serif;
    --ease-out: cubic-bezier(.2, .8, .3, 1);
    --duration-hover: 140ms;
    --duration-enter: 260ms;
}

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

html, body { height: 100%; }

body {
    align-items: center;
    background:
        radial-gradient(circle at 12% 18%, rgba(0, 141, 189, .10), transparent 42%),
        radial-gradient(circle at 88% 82%, rgba(18, 74, 154, .12), transparent 46%),
        var(--color-surface-sunken);
    color: var(--color-text);
    display: flex;
    font-family: var(--font-body);
    justify-content: center;
    line-height: 1.5;
    margin: 0;
    padding: var(--space-6);
}

main { width: 100%; }

.auth-card {
    animation: auth-card-enter var(--duration-enter) var(--ease-out) both;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-3);
    margin: 0 auto;
    max-width: 420px;
    padding: var(--space-8);
}

.auth-brand {
    align-items: baseline;
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}

.auth-brand__name {
    color: var(--color-text-strong);
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.auth-brand__eyebrow {
    color: var(--color-info-accent);
    font-size: .7rem;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.auth-card h1 {
    color: var(--color-text-strong);
    font-family: var(--font-heading);
    font-size: 1.375rem;
    margin: 0 0 var(--space-2);
}

.auth-lead {
    color: var(--color-text-muted);
    font-size: .875rem;
    margin: 0 0 var(--space-6);
}

form { display: grid; gap: var(--space-4); }

label {
    color: var(--color-text);
    display: block;
    font-size: .875rem;
    font-weight: 650;
    margin-bottom: var(--space-1);
}

input[type="email"],
input[type="password"],
input[type="text"],
input:not([type]) {
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-field);
    color: var(--color-text);
    font: inherit;
    min-height: 44px;
    padding: 0 var(--space-3);
    transition:
        border-color var(--duration-hover) var(--ease-out),
        box-shadow var(--duration-hover) var(--ease-out);
    width: 100%;
}

input:hover { border-color: var(--color-primary); }

input:focus-visible,
button:focus-visible,
a:focus-visible {
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
    outline: none;
}

/* Un code TOTP se lit chiffre par chiffre : chasse fixe et lettres espacees. */
input[inputmode="numeric"] {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 1.25rem;
    letter-spacing: .35em;
    text-align: center;
}

.auth-checkbox {
    align-items: center;
    color: var(--color-text-muted);
    display: flex;
    font-size: .875rem;
    font-weight: 500;
    gap: var(--space-2);
    margin: 0;
}

.auth-checkbox input { min-height: 0; width: auto; }

button[type="submit"] {
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-field);
    color: var(--color-on-primary);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    min-height: 44px;
    transition:
        background-color var(--duration-hover) var(--ease-out),
        box-shadow var(--duration-hover) var(--ease-out),
        transform var(--duration-hover) var(--ease-out);
    width: 100%;
}

button[type="submit"]:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    box-shadow: var(--shadow-2);
}

button[type="submit"]:active { transform: translateY(1px); }

.validation-summary-errors {
    background: var(--color-danger-subtle);
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-field);
    color: var(--color-danger);
    font-size: .875rem;
    padding: var(--space-3) var(--space-4);
}

.validation-summary-errors ul { margin: 0; padding-left: var(--space-5); }
.validation-summary-errors:empty,
.validation-summary-valid { display: none; }

.auth-key {
    background: var(--color-surface-sunken);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-field);
    display: block;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: .95rem;
    letter-spacing: .12em;
    padding: var(--space-3);
    text-align: center;
    word-break: break-all;
}

.auth-help { color: var(--color-text-muted); font-size: .8125rem; margin: 0; }

.auth-steps {
    color: var(--color-text-muted);
    font-size: .8125rem;
    list-style: none;
    display: flex;
    gap: var(--space-2);
    margin: 0 0 var(--space-5);
    padding: 0;
}

.auth-steps li { align-items: center; display: flex; gap: var(--space-2); }
.auth-steps li::after { background: var(--color-border-strong); content: ""; height: 1px; width: 14px; }
.auth-steps li:last-child::after { display: none; }

.auth-steps__dot {
    background: var(--color-border-strong);
    border-radius: 50%;
    height: 7px;
    width: 7px;
}

.auth-steps li[aria-current="step"] { color: var(--color-primary); font-weight: 700; }
.auth-steps li[aria-current="step"] .auth-steps__dot { background: var(--color-primary); }
.auth-steps li[data-done="true"] .auth-steps__dot { background: var(--color-info-accent); }

a { color: var(--color-primary); transition: color var(--duration-hover) var(--ease-out); }

.auth-footnote {
    color: var(--color-text-muted);
    font-size: .75rem;
    margin: var(--space-6) auto 0;
    max-width: 420px;
    text-align: center;
}

@keyframes auth-card-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

.auth-qr {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    margin: 0 0 var(--space-5);
    padding: var(--space-4);
    text-align: center;
}

/* Le QR doit rester lisible sans etre enorme : la camera vise une cible nette, pas large. */
.auth-qr svg {
    display: block;
    height: auto;
    margin: 0 auto;
    max-width: 190px;
    width: 100%;
}

.auth-qr figcaption {
    color: var(--color-text-muted);
    font-size: .75rem;
    margin-top: var(--space-3);
}

.auth-fallback {
    border-top: 1px solid var(--color-border);
    margin-bottom: var(--space-5);
    padding-top: var(--space-4);
}

.auth-fallback summary {
    color: var(--color-primary);
    cursor: pointer;
    font-size: .875rem;
    font-weight: 650;
}

.auth-fallback summary:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-field); outline: none; }
.auth-fallback > *:not(summary) { margin-top: var(--space-3); }

.auth-action {
    background: var(--color-primary);
    border-radius: var(--radius-field);
    color: var(--color-on-primary);
    display: inline-block;
    font-weight: 700;
    padding: 10px var(--space-4);
    text-decoration: none;
    transition:
        background-color var(--duration-hover) var(--ease-out),
        box-shadow var(--duration-hover) var(--ease-out),
        transform var(--duration-hover) var(--ease-out);
}

.auth-action:hover {
    background: var(--color-primary-hover);
    box-shadow: var(--shadow-2);
    color: var(--color-on-primary);
    transform: translateY(-1px);
}