/* Page de connexion — même charte que le tableau de bord (styles.css + theme-21st.css). Aucune règle inline (CSP stricte). */
@font-face { font-family: "Titillium Web"; src: url("/fonts/titillium-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Titillium Web"; src: url("/fonts/titillium-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Titillium Web"; src: url("/fonts/titillium-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root, [data-theme="light"] {
    --background: #ffffff; --background-subtle: #f7f7f8; --foreground: #16181d; --muted: #eff0f2;
    --muted-foreground: #5f6670; --faint: #8d939c; --border: #e3e5e8; --border-strong: #c9cdd3;
    --accent: #2f5577; --accent-soft: #e8eef4; --ok: #2e7d4f; --danger: #c62828; --warn: #e0a100;
    --ring: color-mix(in srgb, var(--foreground) 18%, transparent);
    --font-sans: "Titillium Web", Candara, "Segoe UI", ui-sans-serif, system-ui, sans-serif;
    --shadow-card: 0 1px 2px rgba(16, 20, 28, .05), 0 12px 32px rgba(16, 20, 28, .06);
    --shadow-pop: 0 10px 30px rgba(16, 20, 28, .14), 0 1px 3px rgba(16, 20, 28, .08);
    --glass: rgba(255, 255, 255, .78); --dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23000' fill-opacity='0.07'/%3E%3C/svg%3E");
    /* Bouton Google (recommandations de marque : fond clair, contour gris, texte foncé) */
    --g-bg: #ffffff; --g-fg: #1f1f1f; --g-border: #747775; --g-hover: #f8fafd;
    color-scheme: light;
}
[data-theme="dark"] {
    --background: #121417; --background-subtle: #0c0d0f; --foreground: #e9ebee; --muted: #1e2125;
    --muted-foreground: #a3a9b2; --faint: #717882; --border: #262a30; --border-strong: #3a4048;
    --accent: #8db4d8; --accent-soft: #1b2733; --ok: #5cbf86; --danger: #f2655f; --warn: #f5b82e;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, .4); --shadow-pop: 0 10px 30px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .4);
    --glass: rgba(24, 27, 31, .78); --dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23fff' fill-opacity='0.06'/%3E%3C/svg%3E");
    --g-bg: #131314; --g-fg: #e3e3e3; --g-border: #8e918f; --g-hover: #1e1f20;
    color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
    min-height: 100vh; display: flex; flex-direction: column;
    font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: var(--foreground);
    background-color: var(--background-subtle); background-image: var(--dots); background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { display: block; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* Bouton de thème (même style que le tableau de bord), dans la carte */
.lg-icon-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border); background: var(--background); color: var(--foreground); cursor: pointer; transition: background .15s, border-color .15s; }
.lg-icon-btn:hover { border-color: var(--border-strong); background: var(--muted); }
.lg-icon-btn svg { width: 16px; height: 16px; }
.lg-theme { position: absolute; top: 14px; right: 14px; }
/* Comme le tableau de bord : lune en mode clair, soleil en mode sombre */
[data-theme="dark"] .lg-moon, :root:not([data-theme="dark"]) .lg-sun { display: none; }

/* Carte centrale */
.lg-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px 16px 40px; }
.lg-card {
    position: relative; width: min(440px, 100%); padding: 40px 32px 24px; text-align: center;
    background: var(--background); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-card);
    animation: lg-rise .45s cubic-bezier(.2, .7, .2, 1) both;
}
.lg-logo { width: 64px; height: 64px; margin: 0 auto 18px; }
.lg-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-foreground); }
.lg-card h1 { margin: 4px 0 8px; font-size: 22px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }
.lg-sub { color: var(--muted-foreground); font-size: 14px; margin: 0 auto 26px; max-width: 34ch; }

/* Bouton « Se connecter avec Google » */
.lg-google {
    display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 44px; padding: 0 16px;
    border-radius: 22px; border: 1px solid var(--g-border); background: var(--g-bg); color: var(--g-fg);
    font: 500 14px/1 Roboto, "Segoe UI", var(--font-sans); letter-spacing: .01em; text-decoration: none; cursor: pointer;
    transition: background .15s, box-shadow .15s, transform .08s;
}
.lg-google:hover { background: var(--g-hover); box-shadow: 0 1px 3px rgba(60, 64, 67, .18), 0 4px 8px rgba(60, 64, 67, .08); }
.lg-google:active { transform: scale(.985); }
.lg-google img { width: 18px; height: 18px; flex: none; }
.lg-google .lg-spin { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--g-fg) 25%, transparent); border-top-color: var(--g-fg); animation: lg-spin .7s linear infinite; }
.lg-google.is-loading { pointer-events: none; opacity: .85; }
.lg-google.is-loading img { display: none; }
.lg-google.is-loading .lg-spin { display: inline-block; }

.lg-legal { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--faint); text-wrap: balance; }

/* Page intermédiaire après la connexion */
.lg-wait { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lg-wait .lg-spin-lg { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent); animation: lg-spin .8s linear infinite; }
.lg-btn-plain { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--background); color: var(--foreground); text-decoration: none; font-weight: 600; font-size: 13px; }

/* Toasts — même structure que le tableau de bord, en verre dépoli */
.toast-region { position: fixed; right: 20px; bottom: 20px; z-index: 300; display: flex; flex-direction: column; gap: 10px; width: 380px; max-width: calc(100vw - 32px); }
.toast {
    position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: 10px; padding: 12px 10px 14px 14px;
    background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
    border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-pop);
    animation: lg-toast-in .38s cubic-bezier(.2, .9, .25, 1.15) both;
}
.toast.is-leaving { animation: lg-toast-out .22s ease-in both; }
.toast-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 6px; background: var(--faint); }
.toast-success .toast-dot { background: var(--ok); }
.toast-error .toast-dot { background: var(--danger); }
.toast-info .toast-dot { background: var(--accent); }
.toast-body { flex: 1; min-width: 0; }
.toast-title { font-size: 13px; font-weight: 600; }
.toast-detail { font-size: 12px; color: var(--muted-foreground); word-break: break-word; margin-top: 1px; }
.toast-close { appearance: none; border: 0; background: none; color: var(--faint); cursor: pointer; padding: 2px; display: inline-flex; border-radius: 6px; }
.toast-close:hover { color: var(--foreground); background: var(--muted); }
.toast-close svg { width: 14px; height: 14px; }
.toast-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; transform-origin: left; background: currentColor; opacity: .35; animation: lg-bar linear forwards; }
.toast-success .toast-bar { color: var(--ok); } .toast-error .toast-bar { color: var(--danger); } .toast-info .toast-bar { color: var(--accent); }
.toast:hover .toast-bar { animation-play-state: paused; }

@keyframes lg-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes lg-spin { to { transform: rotate(360deg); } }
@keyframes lg-toast-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes lg-toast-out { to { opacity: 0; transform: translateY(8px) scale(.97); } }
@keyframes lg-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (max-width: 520px) {
    .lg-card { padding: 28px 20px 22px; border-radius: 14px; }
    .lg-card h1 { font-size: 20px; }
    .toast-region { left: 16px; right: 16px; bottom: 16px; width: auto; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }