/* Page de connexion (login.html) — s'appuie sur les variables de login.css et theme.css */

.lt-body {
    /* Bleu marine du logo YouBug (#294064) à la place de l'indigo / violet de login.css */
    --primary: #294064;
    --primary-hover: #3b5a8a;
    --secondary: #3b5a8a;
    --accent: #5fa9a9;
    display: block;
    overflow: auto;
    min-height: 100vh;
    color: var(--text-primary);
}
.lt-body::before,
.lt-body::after { display: none; }

/* ---------- Commun ---------- */
.lt-split h1, .lt-split h2 { color: var(--text-primary); font-weight: 600; line-height: 1.25; text-wrap: balance; }
.lt-split label { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; }
.lt-split input {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    margin-bottom: 14px;
    border-radius: 8px;
    border: 1px solid var(--border-light);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font: inherit;
    font-size: 14px;
}
.lt-split input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(41, 64, 100, 0.25); }

.lt-btn-primary, .lt-btn-ms {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 44px;
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.lt-btn-primary {
    border: none; color: #fff;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    box-shadow: 0 8px 22px rgba(41, 64, 100, 0.35);
    transition: transform .15s, box-shadow .15s;
}
.lt-btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(41, 64, 100, 0.45); }
.lt-btn-primary:disabled { opacity: .7; cursor: wait; }
.lt-btn-ms { border: 1px solid var(--border-light); background: var(--bg-secondary); color: var(--text-primary); transition: border-color .15s; }
.lt-btn-ms:hover { border-color: var(--primary); }
.lt-btn-primary:focus-visible, .lt-btn-ms:focus-visible, .lt-back:focus-visible,
.lt-demo-panel:focus-visible { outline: 2px solid var(--primary-hover); outline-offset: 2px; }

.lt-ms-logo { display: grid; grid-template-columns: 8px 8px; gap: 2px; }
.lt-ms-logo i { width: 8px; height: 8px; display: block; }
.lt-ms-logo i:nth-child(1) { background: #f25022; }
.lt-ms-logo i:nth-child(2) { background: #7fba00; }
.lt-ms-logo i:nth-child(3) { background: #00a4ef; }
.lt-ms-logo i:nth-child(4) { background: #ffb900; }

.lt-back {
    display: inline-flex; align-items: center; gap: 8px;
    margin-bottom: 10px; padding: 4px 0;
    border: none; background: none; cursor: pointer;
    color: var(--text-secondary); font: inherit; font-size: 13px;
}
.lt-back [data-echo] { font-weight: 700; color: var(--text-primary); }
.lt-hint { font-size: 13px; color: var(--text-secondary); margin: 0 0 18px; line-height: 1.5; }
.lt-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.lt-small { font-size: 12px; }
.lt-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0; font-size: 12px; color: var(--text-muted); }
.lt-divider::before, .lt-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-light); }
.lt-field-error { font-size: 12px; color: var(--danger); margin: -8px 0 12px; }
.lt-alert { margin-bottom: 16px; padding: 10px 12px; border-radius: 8px; font-size: 13px; line-height: 1.45; background: var(--danger-bg, rgba(239, 68, 68, 0.12)); color: var(--danger); }
.lt-alert[data-kind="info"] { background: var(--info-bg); color: var(--info); }
.lt-alert[data-kind="warning"] { background: var(--warning-bg, rgba(245, 158, 11, 0.12)); color: var(--warning); }

/* ---------- Écran partagé ---------- */
.lt-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 100vh; }
.lt-brand {
    --bx: clamp(24px, 5vw, 64px);
    position: relative;
    overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
    padding: 40px var(--bx);
    color: #dbe5f2;
    /* trame de points + halo + dégradé indigo → violet */
    background:
        radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.5px) 0 0 / 22px 22px,
        radial-gradient(circle at 85% 15%, rgba(154, 209, 209, 0.18), transparent 45%),
        radial-gradient(circle at 10% 95%, rgba(41, 64, 100, 0.4), transparent 50%),
        linear-gradient(175deg, #34507d 0%, #294064 30%, #1c2d4a 68%, #142139 100%);
}
.lt-brand > * { position: relative; }

/* Logo blanc posé directement sur le dégradé */
.lt-brand-head { align-self: flex-start; display: inline-flex; }
.lt-logo-tile { display: inline-flex; align-items: center; }
.lt-logo-tile img { height: 88px; width: auto; filter: drop-shadow(0 6px 18px rgba(8, 14, 26, 0.45)); }
.lt-brand-title { font-size: clamp(26px, 2.8vw, 38px); color: #fff !important; max-width: 17ch; margin-bottom: 14px; letter-spacing: -0.01em; }
/* Couleur unie : un texte en dégradé (background-clip) perd le lissage ClearType et semble d'une autre police */
.lt-grad { color: #9ad1d1; white-space: nowrap; }

.lt-demo-panel {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 22px;
    padding: 9px 16px;
    border-radius: 999px;
    font: inherit; font-size: 14px; color: #dbe5f2; cursor: pointer;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(154, 209, 209, 0.35);
    transition: background .15s, border-color .15s;
}
.lt-demo-panel strong { color: #fff; }
.lt-demo-panel:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(154, 209, 209, 0.7); }
.lt-demo-panel:disabled { opacity: .7; cursor: wait; }

/* Aperçu du tableau de bord */
.lt-stage { position: relative; padding: 18px 28px 30px 0; }
.lt-preview {
    background: rgba(12, 20, 36, 0.55);
    border: 1px solid rgba(169, 189, 219, 0.22);
    border-radius: 14px;
    padding: 14px 16px 16px;
    box-shadow: 0 24px 60px rgba(8, 14, 26, 0.55);
    backdrop-filter: blur(6px);
}
.lt-window-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; font-size: 12px; color: #a9bddb; }
.lt-window-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(169, 189, 219, 0.35); }
.lt-window-bar span { margin-left: 8px; }
.lt-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.lt-kpis div { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 9px; padding: 10px 12px; }
.lt-kpis span { display: block; font-size: 12px; color: #a9bddb; }
.lt-kpis strong { display: block; font-size: 22px; color: #fff; font-variant-numeric: tabular-nums; }
.lt-kpis em { font-style: normal; font-size: 11px; color: #a9bddb; }
.lt-kpis em.up { color: #6ee7b7; }
.lt-bars { display: flex; align-items: flex-end; gap: 8px; height: 96px; }
.lt-bars i {
    flex: 1;
    border-radius: 5px 5px 0 0;
    background: linear-gradient(180deg, #5b7db3, rgba(41, 64, 100, 0.35));
    transform-origin: bottom;
    animation: lt-grow .9s cubic-bezier(.2, .8, .2, 1) both;
}
.lt-bars i.hi { background: linear-gradient(180deg, #9ad1d1, #5fa9a9); }
.lt-bars i:nth-child(1) { height: 40%; }
.lt-bars i:nth-child(2) { height: 65%; animation-delay: .06s; }
.lt-bars i:nth-child(3) { height: 50%; animation-delay: .12s; }
.lt-bars i:nth-child(4) { height: 88%; animation-delay: .18s; }
.lt-bars i:nth-child(5) { height: 60%; animation-delay: .24s; }
.lt-bars i:nth-child(6) { height: 74%; animation-delay: .30s; }
.lt-bars i:nth-child(7) { height: 55%; animation-delay: .36s; }
@keyframes lt-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.lt-float {
    position: absolute;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    color: #1c2d4a;
    box-shadow: 0 14px 34px rgba(8, 14, 26, 0.45);
    animation: lt-float 6s ease-in-out infinite;
}
.lt-float strong { display: block; font-size: 12.5px; }
.lt-float small { display: block; font-size: 11.5px; color: #6b7280; }
.lt-float-a { right: 0; top: 0; }
.lt-float-c { left: -12px; top: 64%; animation-delay: -1.5s; }
.lt-float-b { right: 4px; bottom: 0; animation-delay: -3s; }
.lt-float-icon {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 26px; height: 26px; border-radius: 8px;
    background: #e3ecf6; color: #294064; font-size: 12px;
}
.lt-up { color: #dc2626; font-weight: 600; }
.lt-float .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.lt-float .dot.warn { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2); }
.lt-float .dot.ok { background: #10b981; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2); }
@keyframes lt-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.lt-brand-points { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: #dbe5f2; }
.lt-brand-points li { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.1); }
.lt-brand-points i { margin-right: 4px; color: #9ad1d1; }

/* ---------- Panneau de connexion ---------- */
.lt-panel {
    position: relative;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: 40px clamp(24px, 5vw, 72px) 72px;
    background:
        radial-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1.5px) 0 0 / 22px 22px,
        radial-gradient(circle at 100% 0%, rgba(41, 64, 100, 0.14), transparent 40%),
        radial-gradient(circle at 0% 100%, rgba(41, 64, 100, 0.10), transparent 45%),
        var(--bg-card);
}
.lt-form-wrap {
    width: 100%; max-width: 420px;
    padding: 36px 34px;
    border-radius: 18px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}
.lt-step[hidden] { display: none; }
.lt-split h2 { font-size: 28px; margin-bottom: 6px; letter-spacing: -0.01em; }
.lt-lead { font-size: 14px; color: var(--text-secondary); margin-bottom: 24px; }
.lt-input-icon { position: relative; }
.lt-input-icon > i { position: absolute; left: 13px; top: 14px; font-size: 14px; color: var(--text-muted); pointer-events: none; }
.lt-input-icon input { padding-left: 38px; }
.lt-input-icon:focus-within > i { color: var(--primary); }
.lt-secure { margin-top: 18px; font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.lt-secure i { color: var(--success); }
.lt-panel-footer {
    position: absolute; left: 0; right: 0; bottom: 22px;
    display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px;
    font-size: 12px; color: var(--text-muted);
}

/* ---------- Mobile ---------- */
@media (max-width: 820px) {
    .lt-split { grid-template-columns: 1fr; min-height: 0; }
    .lt-brand { --bx: 16px; padding: 28px 16px; gap: 18px; }
    .lt-logo-tile img { height: 64px; }
    .lt-stage, .lt-brand-points { display: none; }
    .lt-panel { padding: 32px 16px; }
    .lt-form-wrap { padding: 28px 20px; }
    .lt-panel-footer { position: static; margin-top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .lt-btn-primary, .lt-btn-ms, .lt-demo-panel { transition: none; }
    .lt-bars i, .lt-float { animation: none !important; }
}