/* ==========================================================================
   Confrère — Espace client (connexion + tableau de bord)
   Démonstration front-end (données fictives). Voir note de sécurité.
   ========================================================================== */
:root{
  --ink:#0F1720; --green:#1E3A34; --green-d:#142822; --green-dd:#0E211C;
  --gold:#D4B483; --gold-s:#E4CFA6; --cream:#F4F1EA; --beige:#E7E3DB;
  --line:rgba(15,23,32,0.1); --muted:#6B7580; --ink-soft:#3B4650;
  --serif:"Playfair Display",Georgia,serif; --sans:"Inter",system-ui,sans-serif;
  --radius:14px;
}
*,*::before,*::after{ box-sizing:border-box; }
body{ margin:0; font-family:var(--sans); color:var(--ink); background:var(--cream); -webkit-font-smoothing:antialiased; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--serif); margin:0; }
.mono-c{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px; background:var(--green-d); color:var(--gold); font-family:var(--serif); font-weight:700; font-size:20px; }

/* ---------- Connexion ---------- */
.auth{ min-height:100vh; display:grid; grid-template-columns:1.05fr 1fr; }
.auth-brand{ background:var(--green-d) url('../img/columns-dark.svg') center/cover no-repeat; color:var(--cream); padding:56px; display:flex; flex-direction:column; justify-content:space-between; position:relative; }
.auth-brand::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,16,14,.55),rgba(11,16,14,.82)); }
.auth-brand > *{ position:relative; z-index:1; }
.auth-brand .logo{ font-family:var(--serif); font-size:26px; font-weight:700; display:flex; align-items:center; gap:12px; }
.auth-brand h2{ font-size:clamp(28px,3vw,40px); line-height:1.1; margin-bottom:14px; }
.auth-brand p{ color:rgba(244,241,234,.78); max-width:420px; font-size:16px; }
.auth-brand .eyebrow{ color:var(--gold); font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; }
.auth-form-wrap{ display:flex; align-items:center; justify-content:center; padding:40px; }
.auth-form{ width:100%; max-width:380px; }
.auth-form h1{ font-size:30px; margin-bottom:6px; }
.auth-form .sub{ color:var(--muted); margin:0 0 28px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:13px; font-weight:600; margin-bottom:7px; }
.field input{ width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:9px; font-family:inherit; font-size:15px; background:#fff; }
.field input:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(30,58,52,.1); }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 22px; border-radius:9px; font-weight:600; font-size:15px; border:1px solid transparent; cursor:pointer; font-family:inherit; }
.btn-green{ background:var(--green); color:var(--cream); width:100%; } .btn-green:hover{ background:var(--green-d); }
.auth-err{ background:#fbecec; color:#a12; border:1px solid #f0c9c9; padding:11px 14px; border-radius:9px; font-size:13.5px; margin-bottom:18px; display:none; }
.auth-hint{ margin-top:22px; font-size:12.5px; color:var(--muted); background:var(--beige); border-radius:9px; padding:12px 14px; }
.auth-back{ margin-top:20px; font-size:13.5px; color:var(--muted); }
.auth-back a{ color:var(--green); font-weight:600; }
@media (max-width:820px){ .auth{ grid-template-columns:1fr; } .auth-brand{ display:none; } }

/* ---------- Tableau de bord ---------- */
.app{ display:grid; grid-template-columns:260px 1fr; min-height:100vh; }
.side{ background:var(--green-d); color:var(--cream); padding:26px 18px; display:flex; flex-direction:column; }
.side .logo{ display:flex; align-items:center; gap:11px; font-family:var(--serif); font-size:22px; font-weight:700; padding:0 8px 8px; }
.side .logo .mono-c{ background:rgba(212,180,131,.14); }
.side nav{ display:flex; flex-direction:column; gap:3px; margin-top:22px; }
.side nav a{ display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:10px; font-size:14.5px; color:rgba(244,241,234,.8); }
.side nav a svg{ width:19px; height:19px; opacity:.85; }
.side nav a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.side nav a.active{ background:rgba(212,180,131,.16); color:#fff; }
.side nav a.active svg{ color:var(--gold); opacity:1; }
.side .side-foot{ margin-top:auto; display:flex; flex-direction:column; gap:3px; padding-top:16px; border-top:1px solid rgba(255,255,255,.08); }
.main{ background:var(--cream); padding:30px 40px 60px; overflow:auto; }
.topbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:30px; gap:16px; flex-wrap:wrap; }
.topbar h1{ font-size:30px; } .topbar .welcome{ color:var(--muted); font-size:14.5px; margin-top:2px; }
.topbar-r{ display:flex; align-items:center; gap:16px; }
.user-chip{ display:flex; align-items:center; gap:11px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:6px 14px 6px 6px; cursor:pointer; }
.user-chip .ava{ width:34px; height:34px; border-radius:50%; background:var(--green-d) center 15%/cover; }
.user-chip .nm{ font-size:14px; font-weight:600; }
.user-chip svg{ width:15px; height:15px; color:var(--muted); }
.btn-gold{ background:var(--green); color:var(--cream); border-radius:9px; }
.btn-gold:hover{ background:var(--green-d); }

.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:22px; }
.stat{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px; }
.stat .ic{ width:40px; height:40px; border-radius:10px; background:var(--beige); display:flex; align-items:center; justify-content:center; color:var(--green); margin-bottom:16px; }
.stat .ic svg{ width:21px; height:21px; }
.stat .val{ font-family:var(--serif); font-size:34px; font-weight:600; line-height:1; }
.stat .lbl{ color:var(--muted); font-size:13.5px; margin-top:6px; }
.stat .delta{ font-size:12.5px; font-weight:600; margin-top:8px; } .up{ color:#2f855a; } .flat{ color:var(--muted); }

.cols{ display:grid; grid-template-columns:1.4fr 1fr; gap:18px; }
@media (max-width:1100px){ .stat-row{ grid-template-columns:1fr 1fr; } .cols{ grid-template-columns:1fr; } }
@media (max-width:720px){ .app{ grid-template-columns:1fr; } .side{ display:none; } .main{ padding:22px; } .stat-row{ grid-template-columns:1fr 1fr; } }

.panel{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; margin-bottom:18px; }
.panel-h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.panel-h h3{ font-size:18px; } .panel-h a{ font-size:13px; color:var(--green); font-weight:600; }
.rdv{ display:flex; align-items:center; gap:14px; padding:13px 0; border-top:1px solid var(--line); }
.rdv:first-of-type{ border-top:none; }
.rdv .d{ text-align:center; min-width:48px; }
.rdv .d b{ display:block; font-family:var(--serif); font-size:20px; line-height:1; } .rdv .d span{ font-size:11px; text-transform:uppercase; color:var(--muted); }
.rdv .info{ flex:1; } .rdv .info b{ font-size:14.5px; } .rdv .info span{ display:block; font-size:12.5px; color:var(--muted); }
.tag-wa{ font-size:11.5px; color:#128C4B; background:rgba(37,211,102,.12); padding:4px 9px; border-radius:999px; font-weight:600; }
.tag-pend{ font-size:11.5px; color:#8a6d1a; background:rgba(212,180,131,.22); padding:4px 9px; border-radius:999px; font-weight:600; }
.art{ display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--line); }
.art:first-of-type{ border-top:none; }
.art .info{ flex:1; } .art .info b{ font-size:14px; } .art .info span{ display:block; font-size:12px; color:var(--muted); }
.art .btn-mini{ font-size:12.5px; font-weight:600; color:var(--green); border:1px solid var(--line); border-radius:7px; padding:6px 11px; cursor:pointer; }
.rating-box{ display:flex; align-items:center; gap:16px; }
.rating-box .num{ font-family:var(--serif); font-size:40px; font-weight:600; color:var(--green); line-height:1; }
.rating-box .stars{ color:var(--gold); letter-spacing:2px; }
.mini-site{ display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--line); }
.mini-site:first-of-type{ border-top:none; }
.mini-site .th{ width:56px; height:40px; border-radius:7px; background:var(--green-d) center/cover; }
.mini-site .info{ flex:1; } .mini-site .info b{ font-size:14px; } .mini-site .info span{ font-size:12px; color:var(--muted); }
.badge-pub{ font-size:11px; color:#2f855a; background:rgba(47,133,90,.12); padding:3px 9px; border-radius:999px; font-weight:600; }
.demo-banner{ background:var(--green-d); color:var(--cream); text-align:center; font-size:12.5px; padding:8px 16px; }
.demo-banner a{ color:var(--gold); font-weight:700; }
.chart{ width:100%; height:auto; display:block; margin-top:6px; }
.chart text{ font-family:var(--sans); font-size:12px; fill:var(--muted); }
.chart .dot{ fill:#fff; stroke:var(--gold); stroke-width:2.5; }
.btn-suggest{ margin-top:16px; width:100%; display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; border:1px dashed var(--line); border-radius:10px; background:var(--beige); color:var(--green); font-weight:600; font-size:14px; cursor:pointer; font-family:inherit; }
.btn-suggest:hover{ border-color:var(--green); }

/* Messagerie WhatsApp */
.wa-thread{ display:flex; align-items:flex-start; gap:13px; padding:14px 0; border-top:1px solid var(--line); cursor:pointer; }
.wa-thread:first-of-type{ border-top:none; }
.wa-thread .wa-ava{ width:40px; height:40px; border-radius:50%; background:var(--beige); color:var(--green); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13.5px; flex-shrink:0; }
.wa-thread .msg{ flex:1; min-width:0; }
.wa-thread .msg b{ font-size:14.5px; display:flex; align-items:center; gap:8px; }
.wa-thread .msg p{ margin:3px 0 0; font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wa-thread .meta{ text-align:right; flex-shrink:0; }
.wa-thread .meta time{ font-size:11.5px; color:var(--muted); display:block; }
.wa-thread .meta .unread{ display:inline-flex; align-items:center; justify-content:center; min-width:19px; height:19px; border-radius:999px; background:#25D366; color:#fff; font-size:11px; font-weight:700; margin-top:5px; padding:0 5px; }
.wa-head{ display:flex; align-items:center; gap:8px; }
.wa-head .wa-logo{ width:20px; height:20px; color:#25D366; }
.tag-rdv{ font-size:10.5px; color:var(--green); background:var(--beige); padding:3px 8px; border-radius:999px; font-weight:600; }

/* Veille juridique */
.veille-item{ display:flex; align-items:flex-start; gap:12px; padding:13px 0; border-top:1px solid var(--line); }
.veille-item:first-of-type{ border-top:none; }
.veille-item .v-tag{ font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:4px 9px; border-radius:6px; flex-shrink:0; margin-top:2px; }
.v-legi{ background:rgba(30,58,52,.1); color:var(--green); }
.v-juri{ background:rgba(212,180,131,.25); color:#8a6d1a; }
.v-actu{ background:rgba(94,42,59,.1); color:#5e2a3b; }
.veille-item .info{ flex:1; } .veille-item .info b{ font-size:14px; line-height:1.35; display:block; }
.veille-item .info span{ font-size:12px; color:var(--muted); }
.veille-badge{ font-size:11.5px; color:var(--green); background:var(--beige); padding:5px 11px; border-radius:999px; font-weight:600; }

/* Assistant IA juridique */
.ai-panel{ background:linear-gradient(160deg,var(--green-d),var(--green-dd)); color:var(--cream); border:1px solid rgba(212,180,131,0.2); }
.ai-panel h3{ color:#fff; }
.ai-head{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.ai-head .ai-ic{ width:34px;height:34px;border-radius:9px;background:rgba(212,180,131,0.16);color:var(--gold);display:flex;align-items:center;justify-content:center; }
.ai-head .ai-ic svg{ width:19px;height:19px; }
.ai-sub{ font-size:12.5px; color:rgba(244,241,234,0.65); margin:0 0 14px; }
.ai-log{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px; max-height:260px; overflow-y:auto; }
.ai-msg{ font-size:13.5px; line-height:1.5; padding:11px 14px; border-radius:12px; white-space:pre-wrap; }
.ai-msg.u{ background:var(--gold); color:var(--ink); align-self:flex-end; max-width:85%; border-bottom-right-radius:4px; }
.ai-msg.a{ background:rgba(255,255,255,0.06); color:rgba(244,241,234,0.92); border:1px solid rgba(212,180,131,0.14); align-self:flex-start; max-width:92%; border-bottom-left-radius:4px; }
.ai-msg.a.think{ color:rgba(244,241,234,0.5); font-style:italic; }
.ai-form{ display:flex; gap:8px; }
.ai-form input{ flex:1; padding:11px 14px; border-radius:10px; border:1px solid rgba(212,180,131,0.22); background:rgba(255,255,255,0.05); color:var(--cream); font-family:inherit; font-size:14px; }
.ai-form input::placeholder{ color:rgba(244,241,234,0.45); }
.ai-form input:focus{ outline:none; border-color:var(--gold); }
.ai-form button{ background:var(--gold); color:var(--ink); border:none; border-radius:10px; width:44px; display:flex;align-items:center;justify-content:center; cursor:pointer; }
.ai-form button svg{ width:18px;height:18px; }
.ai-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px; }
.ai-chips button{ font-size:12px; color:rgba(244,241,234,0.85); background:rgba(255,255,255,0.05); border:1px solid rgba(212,180,131,0.2); border-radius:999px; padding:6px 11px; cursor:pointer; font-family:inherit; }
.ai-chips button:hover{ border-color:var(--gold); color:#fff; }
.ai-disc{ font-size:11px; color:rgba(244,241,234,0.4); margin-top:10px; }