/* ============================================================
   KlausFinanz — Espace client (connexion + tableau de bord)
   S'appuie sur les variables de style.css (--lime, --ink-deep, etc.)
   ============================================================ */

/* ---------- sélecteur de langue (espace client) ---------- */
.topbar .user .lang{position:relative}
.auth-card .top .lang{position:relative;margin-right:auto}
.topbar .user .lang .lang-menu,.auth-card .top .lang .lang-menu{right:auto;left:0}

/* ---------- bandeau démo ---------- */
.demo-bar{background:var(--ink-deep);color:#fff;text-align:center;font-size:13px;padding:8px 16px}
.demo-bar b{color:var(--lime)}

/* ============================================================
   CONNEXION
   ============================================================ */
.auth{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.auth-aside{background:linear-gradient(160deg,var(--ink-deep),#0c2400);color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.auth-aside .brand{color:#fff;font-weight:800;font-size:22px;display:flex;align-items:center;gap:10px;text-decoration:none}
.auth-aside .brand svg{width:38px;height:38px}
.auth-aside h2{font-size:clamp(26px,3vw,38px);line-height:1.1;letter-spacing:-.02em;margin-top:auto;max-width:440px}
.auth-aside p{color:#c9d6c1;margin-top:14px;max-width:420px;font-size:16px}
.auth-aside .pts{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.auth-aside .pts li{display:flex;gap:10px;align-items:center;font-size:15px;color:#e6efe0}
.auth-aside .pts .ic{width:26px;height:26px;border-radius:50%;background:var(--lime);color:var(--ink-deep);display:grid;place-items:center;font-weight:800;flex:none;font-size:14px}
.auth-aside .glow{position:absolute;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(159,232,112,.25),transparent 70%);top:-90px;right:-90px}

.auth-main{display:flex;align-items:center;justify-content:center;padding:40px}
.auth-card{width:100%;max-width:400px}
.auth-card .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}
.auth-card .top .back{font-size:14px;color:var(--mute);text-decoration:none}
.auth-card .top .back:hover{color:var(--ink-deep)}
.auth-card h1{font-size:28px;letter-spacing:-.02em;color:var(--ink)}
.auth-card .sub{color:var(--mute);margin-top:6px;font-size:15px}
.auth-form{margin-top:26px;display:grid;gap:16px}
.fieldset{display:grid;gap:6px}
.fieldset label{font-size:13px;font-weight:700;color:var(--body)}
.fieldset input{padding:13px 14px;border:1.5px solid var(--soft);border-radius:var(--r-sm);font:inherit;font-size:15px;color:var(--ink);background:#fff;transition:border-color .18s,box-shadow .18s}
.fieldset input:focus{outline:none;border-color:var(--ink-deep);box-shadow:0 0 0 3px var(--lime-pale)}
.auth-row{display:flex;justify-content:space-between;align-items:center;font-size:14px}
.auth-row label{display:flex;gap:8px;align-items:center;color:var(--body);cursor:pointer}
.auth-row a{color:var(--ink-deep);font-weight:600;text-decoration:none}
.auth-row a:hover{text-decoration:underline}
.auth-form .btn{width:100%;justify-content:center;margin-top:4px}
.auth-error{display:none;background:#fdecec;color:var(--negative);font-size:14px;font-weight:600;padding:10px 14px;border-radius:var(--r-sm)}
.auth-error.show{display:block}
.auth-foot{margin-top:26px;text-align:center;font-size:14px;color:var(--mute)}
.auth-foot a{color:var(--ink-deep);font-weight:700}
.demo-hint{margin-top:22px;background:var(--soft-2);border:1px dashed var(--soft);border-radius:var(--r-sm);padding:12px 14px;font-size:13px;color:var(--body)}
.demo-hint b{color:var(--ink-deep)}

/* ============================================================
   TABLEAU DE BORD
   ============================================================ */
.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh;background:var(--soft-2)}
.side{background:#fff;border-right:1px solid var(--soft);padding:22px 16px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.side .brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:19px;color:var(--ink);text-decoration:none;padding:0 8px 20px}
.side .brand svg{width:32px;height:32px}
.side nav{display:grid;gap:4px}
.side nav a{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:var(--r-sm);color:var(--body);font-weight:600;font-size:14.5px;text-decoration:none;transition:background .15s,color .15s}
.side nav a svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8}
.side nav a:hover{background:var(--soft-2);color:var(--ink)}
.side nav a.active{background:var(--lime-pale);color:var(--ink-deep)}
.side .advisor{margin-top:auto;background:var(--soft-2);border-radius:var(--r-md);padding:14px}
.side .advisor .who{display:flex;gap:10px;align-items:center}
.side .advisor .av{width:38px;height:38px;border-radius:50%;background:var(--ink-deep);color:#fff;display:grid;place-items:center;font-weight:700}
.side .advisor .who b{font-size:14px;display:block;color:var(--ink)}
.side .advisor .who span{font-size:12px;color:var(--mute)}
.side .advisor a{display:block;margin-top:10px;text-align:center;font-size:13px;font-weight:700;color:var(--ink-deep);text-decoration:none;background:#fff;border:1px solid var(--soft);border-radius:var(--r-sm);padding:8px}

.main{padding:26px 34px 60px;max-width:1100px}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}
.topbar h1{font-size:24px;letter-spacing:-.02em;color:var(--ink)}
.topbar .hello{font-size:14px;color:var(--mute);margin-top:2px}
.topbar .user{display:flex;align-items:center;gap:12px}
.topbar .user .av{width:40px;height:40px;border-radius:50%;background:var(--lime);color:var(--ink-deep);display:grid;place-items:center;font-weight:800}
.topbar .user .logout{font-size:13px;color:var(--mute);text-decoration:none;border:1px solid var(--soft);padding:8px 12px;border-radius:var(--r-sm);background:#fff}
.topbar .user .logout:hover{color:var(--negative);border-color:var(--negative)}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}
.kpi{background:#fff;border:1px solid var(--soft);border-radius:var(--r-md);padding:18px}
.kpi .k{font-size:13px;color:var(--mute);font-weight:600}
.kpi .v{font-size:26px;font-weight:800;color:var(--ink);letter-spacing:-.02em;margin-top:4px}
.kpi .v small{font-size:14px;font-weight:600;color:var(--mute)}

.panel{background:#fff;border:1px solid var(--soft);border-radius:var(--r-md);padding:22px;margin-bottom:20px}
.panel h2{font-size:17px;color:var(--ink);margin-bottom:4px}
.panel .psub{font-size:13.5px;color:var(--mute);margin-bottom:18px}

/* ---- stepper de statut ---- */
.steps{display:grid;gap:0}
.step{display:grid;grid-template-columns:34px 1fr;gap:14px;position:relative;padding-bottom:22px}
.step:last-child{padding-bottom:0}
.step .dot{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;z-index:1;
  background:var(--soft-2);color:var(--mute);border:2px solid var(--soft)}
.step .line{position:absolute;left:16px;top:34px;bottom:0;width:2px;background:var(--soft)}
.step:last-child .line{display:none}
.step.done .dot{background:var(--lime);color:var(--ink-deep);border-color:var(--lime)}
.step.done .line{background:var(--lime)}
.step.current .dot{background:var(--ink-deep);color:#fff;border-color:var(--ink-deep);box-shadow:0 0 0 4px var(--lime-pale)}
.step .st-t{font-weight:700;color:var(--ink);font-size:15px}
.step .st-d{font-size:13.5px;color:var(--mute);margin-top:2px}
.step .st-date{font-size:12.5px;color:var(--mute);margin-top:4px}
.step.current .st-t{color:var(--ink-deep)}

/* ---- tableau récap ---- */
.dl{display:grid;grid-template-columns:1fr 1fr;gap:0 30px}
.dl .li{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--soft-2);font-size:14.5px}
.dl .li .k{color:var(--mute)}
.dl .li .v{font-weight:700;color:var(--ink)}

/* ---- documents ---- */
.docs{display:grid;gap:10px}
.doc{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--soft);border-radius:var(--r-sm)}
.doc .di{width:34px;height:34px;border-radius:8px;background:var(--lime-pale);color:var(--ink-deep);display:grid;place-items:center;font-weight:800;font-size:12px;flex:none}
.doc .dn{font-weight:600;font-size:14px;color:var(--ink)}
.doc .dm{font-size:12.5px;color:var(--mute)}
.doc .tag{margin-left:auto;font-size:12px;font-weight:700;padding:4px 10px;border-radius:var(--r-pill)}
.tag.ok{background:var(--lime-pale);color:var(--ink-deep)}
.tag.wait{background:#fff4d6;color:#8a6d00}

.notice{font-size:13px;color:var(--mute);background:var(--soft-2);border-radius:var(--r-sm);padding:12px 14px;margin-top:6px}

/* ---- échéancier (Mein Kredit) ---- */
.table-wrap{overflow-x:auto}
.sched{width:100%;border-collapse:collapse;font-size:14px}
.sched th,.sched td{text-align:right;padding:10px 12px;border-bottom:1px solid var(--soft-2);white-space:nowrap}
.sched th:first-child,.sched td:first-child{text-align:left}
.sched thead th{font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--mute);font-weight:700;border-bottom:1.5px solid var(--soft)}
.sched tbody tr:hover{background:var(--soft-2)}
.sched .more-row td{text-align:center;color:var(--mute);font-style:italic;background:var(--soft-2)}

/* ---- upload de documents ---- */
.up-form{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.up-form input[type=file]{flex:1;min-width:200px;font:inherit;font-size:14px;padding:10px;border:1.5px dashed var(--soft);border-radius:var(--r-sm);background:var(--soft-2)}
.up-form .up-msg{font-size:13px;font-weight:600;color:var(--ink-deep)}

/* ---- documents : lien ansehen ---- */
.doc .doc-dl{margin-left:14px;font-size:13px;font-weight:700;color:var(--ink-deep);text-decoration:none;border:1px solid var(--soft);padding:6px 12px;border-radius:var(--r-sm)}
.doc .doc-dl:hover{background:var(--lime-pale)}

/* ---- messagerie (Nachrichten) ---- */
.thread{display:flex;flex-direction:column;gap:14px;max-height:440px;overflow-y:auto;padding:4px 2px 8px}
.msg{max-width:76%;display:flex;flex-direction:column;gap:4px}
.msg.advisor{align-self:flex-start;align-items:flex-start}
.msg.client{align-self:flex-end;align-items:flex-end}
.msg .bubble{padding:12px 15px;border-radius:16px;font-size:14.5px;line-height:1.45}
.msg.advisor .bubble{background:var(--soft-2);color:var(--ink);border-bottom-left-radius:4px}
.msg.client .bubble{background:var(--ink-deep);color:#fff;border-bottom-right-radius:4px}
.msg .meta{font-size:11.5px;color:var(--mute)}
.msg-form{display:flex;gap:10px;margin-top:18px;border-top:1px solid var(--soft);padding-top:16px}
.msg-form input{flex:1;padding:13px 14px;border:1.5px solid var(--soft);border-radius:var(--r-sm);font:inherit;font-size:14.5px;color:var(--ink)}
.msg-form input:focus{outline:none;border-color:var(--ink-deep);box-shadow:0 0 0 3px var(--lime-pale)}

/* ---- profil ---- */
.profile-head{display:flex;align-items:center;gap:18px;margin-bottom:22px}
.profile-head .big-av{width:64px;height:64px;border-radius:50%;background:var(--lime);color:var(--ink-deep);display:grid;place-items:center;font-weight:800;font-size:24px}
.profile-head .big-name{font-size:20px;font-weight:800;color:var(--ink)}
.profile-head .big-sub{font-size:13.5px;color:var(--mute)}
.prof-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.prof-field{background:var(--soft-2);border-radius:var(--r-md);padding:14px 16px}
.prof-field .pk{font-size:12px;color:var(--mute);font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.prof-field .pv{font-size:15.5px;color:var(--ink);font-weight:600;margin-top:4px}
@media(max-width:700px){.prof-grid{grid-template-columns:1fr}.msg{max-width:88%}}

/* ---- responsive ---- */
@media(max-width:900px){
  .auth{grid-template-columns:1fr}
  .auth-aside{display:none}
  .app{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px}
  .side .brand{padding:0 8px 0 0}
  .side nav{display:flex;flex-wrap:wrap;flex:1}
  .side .advisor{display:none}
  .cards{grid-template-columns:1fr}
  .dl{grid-template-columns:1fr}
  .main{padding:20px}
}