/* =========================================================
   PROJECT MASTER PRO — feuille de styles
   ========================================================= */
:root{
  --navy-999:#060a14;
  --navy-950:#0b1220;
  --navy-900:#111a2e;
  --navy-800:#16213b;
  --navy-700:#1c2b4a;
  --blue-600:#2563eb;
  --blue-500:#3b82f6;
  --blue-100:#dbeafe;
  --teal-500:#0ea5a3;
  --amber-500:#f59e0b;
  --amber-100:#fef3c7;
  --red-500:#ef4444;
  --red-100:#fee2e2;
  --green-500:#16a34a;
  --green-100:#dcfce7;
  --slate-50:#f7f8fb;
  --slate-100:#eef1f6;
  --slate-200:#e3e8f0;
  --slate-300:#cbd5e1;
  --slate-400:#94a3b8;
  --slate-500:#64748b;
  --slate-600:#475569;
  --slate-700:#334155;
  --slate-800:#1e293b;
  --slate-900:#0f172a;
  --radius:10px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow-md:0 4px 14px rgba(15,23,42,.08);
  --shadow-lg:0 12px 32px rgba(15,23,42,.16);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; font-family:var(--font); background:var(--slate-50); color:var(--slate-800);
  font-size:14px; line-height:1.45;
}
h1,h2,h3,h4{ margin:0 0 8px; color:var(--slate-900); }
a{ color:var(--blue-600); }
.hidden{ display:none !important; }
code{ background:var(--slate-100); padding:1px 6px; border-radius:4px; font-size:12px; }

/* ---------- Login ---------- */
.login-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 20% 20%, var(--navy-700) 0%, var(--navy-950) 55%, var(--navy-999) 100%);
  padding:24px;
}
.login-box{
  width:100%; max-width:420px; background:#fff; border-radius:16px; box-shadow:var(--shadow-lg);
  padding:36px 32px; animation:fadeUp .35s ease;
}
@keyframes fadeUp{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
.login-logo{ text-align:center; margin-bottom:22px; }
.logo-mark{
  width:112px; height:112px; margin:0 auto 12px; border-radius:28px;
  background:linear-gradient(135deg, var(--blue-600), var(--teal-500));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:36px; letter-spacing:.5px; box-shadow:var(--shadow-md);
}
.logo-mark.small{ width:36px; height:36px; font-size:12px; border-radius:10px; }
.login-logo h1{ font-size:20px; margin-bottom:6px; }
.login-logo p{ color:var(--slate-500); font-size:12.5px; margin:0; padding:0 8px; }
.login-form{ display:flex; flex-direction:column; gap:14px; margin-top:20px; }
.login-form label{ display:flex; flex-direction:column; gap:6px; font-size:12.5px; font-weight:600; color:var(--slate-600); }
.login-form input{
  font-size:14px; padding:10px 12px; border-radius:8px; border:1px solid var(--slate-300);
  font-family:var(--font); font-weight:400; color:var(--slate-900);
}
.login-form input:focus{ outline:2px solid var(--blue-500); outline-offset:1px; border-color:var(--blue-500); }
.login-error{ color:var(--red-500); font-size:12.5px; min-height:14px; }
.login-demo{ margin-top:22px; border-top:1px solid var(--slate-200); padding-top:14px; }
.login-demo p{ font-size:11.5px; color:var(--slate-500); margin:0 0 8px; }
.login-demo-list{ display:flex; flex-wrap:wrap; gap:6px; }
.demo-chip{
  font-size:11.5px; background:var(--slate-100); border:1px solid var(--slate-200); border-radius:20px;
  padding:5px 10px; cursor:pointer; color:var(--slate-700);
}
.demo-chip:hover{ background:var(--blue-100); border-color:var(--blue-500); color:var(--blue-600); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:6px; justify-content:center;
  padding:8px 14px; border-radius:8px; font-size:13px; font-weight:600; border:1px solid transparent;
  cursor:pointer; font-family:var(--font); transition:.15s ease;
}
.btn-block{ width:100%; }
.btn-primary{ background:var(--blue-600); color:#fff; }
.btn-primary:hover{ background:#1d4ed8; }
.btn-secondary{ background:var(--slate-100); color:var(--slate-700); border-color:var(--slate-200); }
.btn-secondary:hover{ background:var(--slate-200); }
.btn-success{ background:var(--green-500); color:#fff; }
.btn-success:hover{ background:#15803d; }
.btn-danger{ background:var(--red-500); color:#fff; }
.btn-danger:hover{ background:#dc2626; }
.btn-ghost{ background:transparent; color:var(--slate-200); border-color:rgba(255,255,255,.25); }
.btn-ghost:hover{ background:rgba(255,255,255,.1); }
.btn-sm{ padding:5px 10px; font-size:12px; border-radius:6px; }
.btn-xs{ padding:3px 8px; font-size:11px; border-radius:6px; }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn-link{ background:none; border:none; color:var(--slate-400); font-size:12px; cursor:pointer; text-decoration:underline; padding:0; }
.icon-btn{ background:none; border:none; font-size:18px; cursor:pointer; color:var(--slate-600); padding:4px 8px; border-radius:6px; }
.icon-btn:hover{ background:var(--slate-100); }

/* ---------- App shell ---------- */
.app-shell{ display:flex; min-height:100vh; }
.sidebar{
  width:250px; flex:none; background:linear-gradient(180deg, var(--navy-900), var(--navy-950));
  color:#e2e8f0; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto;
  transition:width .18s ease;
}
.sidebar.collapsed{ width:70px; }
.sidebar.collapsed .logo-title,.sidebar.collapsed .logo-sub,.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-section-title, .sidebar.collapsed .sidebar-footer{ display:none; }
.sidebar-logo{ display:flex; align-items:center; gap:10px; padding:18px 16px; border-bottom:1px solid rgba(255,255,255,.08); }
.logo-title{ font-weight:700; font-size:13.5px; color:#fff; }
.logo-sub{ font-size:10.5px; color:var(--slate-400); }
.sidebar-nav{ flex:1; padding:10px 8px; overflow-y:auto; }
.nav-section-title{ font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--slate-400); padding:14px 10px 6px; }
.nav-item{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; color:#cbd5e1;
  cursor:pointer; font-size:13px; margin-bottom:2px; white-space:nowrap;
}
.nav-item .nav-icon{ width:18px; text-align:center; flex:none; }
.nav-item:hover{ background:rgba(255,255,255,.06); color:#fff; }
.nav-item.active{ background:var(--blue-600); color:#fff; }
.sidebar-footer{ padding:12px 14px; border-top:1px solid rgba(255,255,255,.08); }

.main-col{ flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar{
  height:60px; flex:none; background:#fff; border-bottom:1px solid var(--slate-200);
  display:flex; align-items:center; padding:0 20px; gap:14px; position:sticky; top:0; z-index:20;
}
.topbar-title{ font-weight:700; font-size:16px; color:var(--slate-900); flex:1; }
.topbar-right{ display:flex; align-items:center; gap:14px; }
.topbar-alerts{ font-size:13px; color:var(--slate-500); }
.topbar-alerts .alert-pill{ background:var(--red-100); color:var(--red-500); padding:4px 10px; border-radius:20px; font-weight:700; font-size:12px; }
.topbar-user{ display:flex; align-items:center; gap:8px; }
.user-avatar{
  width:34px; height:34px; border-radius:50%; background:var(--blue-100); color:var(--blue-600);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px;
}
.user-name{ font-size:12.5px; font-weight:700; color:var(--slate-800); }
.user-role{ font-size:11px; color:var(--slate-500); }
.content{ padding:22px 26px 60px; flex:1; }

/* ---------- Page bits ---------- */
.page-head{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:18px; gap:16px; flex-wrap:wrap;}
.page-head h2{ font-size:19px; }
.page-head p{ color:var(--slate-500); font-size:12.5px; margin:2px 0 0; max-width:640px; }
.page-actions{ display:flex; gap:8px; flex-wrap:wrap; }

.grid{ display:grid; gap:16px; }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:1100px){ .grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);} }
@media (max-width:680px){ .grid-4,.grid-3,.grid-2{grid-template-columns:1fr;} }

.card{ background:#fff; border:1px solid var(--slate-200); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.card-pad{ padding:18px; }
.card-title{ font-size:13px; font-weight:700; color:var(--slate-700); margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; }

.kpi{ padding:16px 18px; }
.kpi-label{ font-size:11.5px; color:var(--slate-500); text-transform:uppercase; letter-spacing:.04em; font-weight:700; }
.kpi-value{ font-size:24px; font-weight:800; color:var(--slate-900); margin-top:4px; }
.kpi-sub{ font-size:11.5px; color:var(--slate-500); margin-top:4px; }
.kpi-accent-blue{ border-top:3px solid var(--blue-600); }
.kpi-accent-amber{ border-top:3px solid var(--amber-500); }
.kpi-accent-green{ border-top:3px solid var(--green-500); }
.kpi-accent-red{ border-top:3px solid var(--red-500); }
.kpi-accent-teal{ border-top:3px solid var(--teal-500); }

table{ width:100%; border-collapse:collapse; font-size:12.8px; }
th{ text-align:left; background:var(--slate-50); color:var(--slate-500); font-size:11px; text-transform:uppercase;
    letter-spacing:.03em; padding:9px 10px; border-bottom:1px solid var(--slate-200); white-space:nowrap; }
td{ padding:9px 10px; border-bottom:1px solid var(--slate-100); vertical-align:middle; }
tbody tr:hover{ background:var(--slate-50); }
.table-wrap{ overflow-x:auto; border-radius:var(--radius); border:1px solid var(--slate-200); background:#fff; }
.table-wrap table{ border:none; }
.text-right{ text-align:right; }
.text-center{ text-align:center; }
.muted{ color:var(--slate-500); }
.small{ font-size:11.5px; }
.mono{ font-variant-numeric:tabular-nums; }
.empty-state{ text-align:center; padding:40px 20px; color:var(--slate-400); }

.badge{ display:inline-block; padding:3px 9px; border-radius:20px; font-size:11px; font-weight:700; white-space:nowrap; }
.badge-gray{ background:var(--slate-100); color:var(--slate-600); }
.badge-blue{ background:var(--blue-100); color:var(--blue-600); }
.badge-amber{ background:var(--amber-100); color:#92400e; }
.badge-green{ background:var(--green-100); color:#15803d; }
.badge-red{ background:var(--red-100); color:#b91c1c; }
.badge-teal{ background:#ccfbf1; color:#0f766e; }

.progress{ height:7px; background:var(--slate-100); border-radius:6px; overflow:hidden; }
.progress > div{ height:100%; background:var(--blue-600); border-radius:6px; }
.progress.green > div{ background:var(--green-500); }
.progress.amber > div{ background:var(--amber-500); }
.progress.red > div{ background:var(--red-500); }

.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--slate-200); margin-bottom:16px; flex-wrap:wrap; }
.tab{ padding:9px 14px; font-size:12.8px; font-weight:600; color:var(--slate-500); cursor:pointer; border-bottom:2px solid transparent; }
.tab:hover{ color:var(--slate-800); }
.tab.active{ color:var(--blue-600); border-color:var(--blue-600); }

.filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; align-items:flex-end; }
.field{ display:flex; flex-direction:column; gap:4px; }
.field label{ font-size:11px; font-weight:700; color:var(--slate-500); text-transform:uppercase; letter-spacing:.03em; }
.field input, .field select, .field textarea{
  font-family:var(--font); font-size:13px; padding:8px 10px; border:1px solid var(--slate-300); border-radius:7px; color:var(--slate-900); background:#fff;
  min-width:160px;
}
.field textarea{ min-width:260px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--blue-500); outline-offset:0; border-color:var(--blue-500); }
.field-full{ grid-column:1/-1; }
.form-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px 16px; }
.form-grid.cols-1{ grid-template-columns:1fr; }
.form-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr !important; } }
.hint{ font-size:11px; color:var(--slate-400); margin-top:2px; }

.workflow{ display:flex; align-items:center; flex-wrap:wrap; gap:0; margin:10px 0 4px; }
.wf-step{ display:flex; flex-direction:column; align-items:center; text-align:center; width:120px; position:relative; }
.wf-dot{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700;
  background:var(--slate-200); color:var(--slate-500); border:2px solid var(--slate-200); }
.wf-step.done .wf-dot{ background:var(--green-500); border-color:var(--green-500); color:#fff; }
.wf-step.current .wf-dot{ background:var(--blue-600); border-color:var(--blue-600); color:#fff; box-shadow:0 0 0 4px var(--blue-100); }
.wf-step.rejected .wf-dot{ background:var(--red-500); border-color:var(--red-500); color:#fff; }
.wf-label{ font-size:10.5px; font-weight:700; color:var(--slate-600); margin-top:6px; max-width:110px; }
.wf-date{ font-size:9.5px; color:var(--slate-400); }
.wf-line{ flex:1; height:2px; background:var(--slate-200); margin-top:15px; min-width:16px; }
.wf-line.done{ background:var(--green-500); }

.timeline{ list-style:none; margin:0; padding:0; border-left:2px solid var(--slate-200); }
.timeline li{ position:relative; padding:0 0 18px 18px; }
.timeline li::before{ content:''; position:absolute; left:-7px; top:2px; width:12px; height:12px; border-radius:50%; background:var(--blue-600); border:2px solid #fff; box-shadow:0 0 0 1px var(--slate-200); }
.timeline .tl-title{ font-weight:700; font-size:12.8px; color:var(--slate-800); }
.timeline .tl-meta{ font-size:11px; color:var(--slate-400); }
.timeline .tl-desc{ font-size:12px; color:var(--slate-600); margin-top:2px; }

/* ---------------- gantt ---------------- */
.gantt-wrap{ display:flex; border:1px solid var(--slate-200); border-radius:var(--radius); background:#fff; overflow:hidden; }
.gantt-labels{ flex:none; width:220px; border-right:1px solid var(--slate-200); }
.gantt-labels-head{ height:36px; display:flex; align-items:center; padding:0 10px; font-size:11px; font-weight:700;
  color:var(--slate-500); text-transform:uppercase; letter-spacing:.03em; border-bottom:1px solid var(--slate-200); background:var(--slate-50); }
.gantt-label-row{ height:34px; display:flex; align-items:center; padding:0 10px; border-bottom:1px solid var(--slate-100);
  font-size:12.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--slate-700); }
.gantt-label-row.phase{ font-weight:700; color:var(--slate-800); background:var(--slate-50); }
.gantt-label-row.activite{ padding-left:22px; }
.gantt-scroll{ flex:1; overflow-x:auto; }
.gantt-inner{ position:relative; }
.gantt-months{ display:flex; height:36px; border-bottom:1px solid var(--slate-200); background:var(--slate-50); }
.gantt-month{ flex:none; display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:700;
  color:var(--slate-500); border-right:1px solid var(--slate-200); text-transform:capitalize; white-space:nowrap; }
.gantt-row-track{ height:34px; border-bottom:1px solid var(--slate-100); position:relative; }
.gantt-row-track.phase{ background:var(--slate-50); }
.gantt-bar{ position:absolute; top:7px; height:20px; min-width:4px; border-radius:5px; background:var(--blue-100);
  border:1px solid var(--blue-500); overflow:hidden; }
.gantt-bar.phase{ background:var(--slate-200); border-color:var(--slate-400); top:8px; height:18px; }
.gantt-bar.late{ border-color:var(--red-500); }
.gantt-bar-fill{ position:absolute; top:0; left:0; bottom:0; background:var(--blue-500); }
.gantt-bar.phase .gantt-bar-fill{ background:var(--slate-500); }
.gantt-bar.late .gantt-bar-fill{ background:var(--red-500); }
.gantt-today{ position:absolute; top:0; bottom:0; width:2px; background:var(--red-500); z-index:2; }
.gantt-today-label{ position:absolute; top:-16px; left:4px; font-size:9.5px; font-weight:700; color:var(--red-500); white-space:nowrap; }

.matrice-phase-row td{ background:var(--slate-50); font-weight:700; color:var(--slate-800); }
.matrice-foot td{ background:var(--slate-50); font-weight:700; border-top:2px solid var(--slate-200); }

.pill-row{ display:flex; gap:8px; flex-wrap:wrap; }
.chain{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:12px; }
.chain .seg{ background:var(--slate-100); border-radius:6px; padding:5px 9px; font-weight:600; color:var(--slate-700); }
.chain .arrow{ color:var(--slate-300); }

.modal-overlay{ position:fixed; inset:0; background:rgba(15,23,42,.5); display:flex; align-items:center; justify-content:center; z-index:100; padding:20px; }
.modal-box{ background:#fff; border-radius:12px; width:100%; max-width:640px; max-height:88vh; display:flex; flex-direction:column; box-shadow:var(--shadow-lg); animation:fadeUp .18s ease; }
.modal-box.wide{ max-width:920px; }
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--slate-200); }
.modal-head h3{ font-size:15px; margin:0; }
.modal-body{ padding:18px 20px; overflow-y:auto; }
.modal-foot{ padding:14px 20px; border-top:1px solid var(--slate-200); display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.modal-close{ background:none; border:none; font-size:18px; cursor:pointer; color:var(--slate-400); }

.toast-container{ position:fixed; bottom:20px; right:20px; display:flex; flex-direction:column; gap:8px; z-index:200; }
.toast{ background:var(--slate-900); color:#fff; padding:10px 16px; border-radius:8px; font-size:12.8px; box-shadow:var(--shadow-md); animation:fadeUp .18s ease; }
.toast.success{ background:var(--green-500); }
.toast.error{ background:var(--red-500); }
.toast.info{ background:var(--slate-800); }

.alert-box{ display:flex; gap:10px; padding:11px 14px; border-radius:8px; font-size:12.5px; margin-bottom:10px; align-items:flex-start; }
.alert-box.warn{ background:var(--amber-100); color:#92400e; }
.alert-box.danger{ background:var(--red-100); color:#991b1b; }
.alert-box.info{ background:var(--blue-100); color:#1e40af; }
.alert-box.ok{ background:var(--green-100); color:#166534; }

.list-clean{ list-style:none; margin:0; padding:0; }
.list-clean li{ padding:9px 0; border-bottom:1px solid var(--slate-100); display:flex; justify-content:space-between; gap:10px; align-items:center; }
.list-clean li:last-child{ border-bottom:none; }

.link-row{ cursor:pointer; }
.link-row:hover td{ color:var(--blue-600); }

.mention-item:hover{ background:var(--slate-100); }
.mention-tag{ color:var(--blue-600); font-weight:600; }
.avatar-sm{ width:24px; height:24px; border-radius:50%; background:var(--slate-200); display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:var(--slate-600); margin-right:6px; }

.matrix-table td, .matrix-table th{ text-align:center; }
.matrix-table td:first-child, .matrix-table th:first-child{ text-align:left; }

/* Assistant IA — panneau coulissant (Phase 4) */
.ai-panel{ position:fixed; top:0; right:0; bottom:0; width:380px; max-width:92vw; background:var(--slate-50);
  box-shadow:var(--shadow-lg); z-index:150; display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .22s ease; }
.ai-panel.open{ transform:translateX(0); }
.ai-panel-head{ background:var(--navy-900); color:#fff; padding:14px 16px; display:flex; align-items:center; gap:10px; }
.ai-panel-head-title{ flex:1; min-width:0; }
.ai-panel-head-title strong{ display:block; font-size:14px; }
.ai-panel-head-title span{ display:block; font-size:11.5px; color:var(--slate-300); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ai-panel-close{ background:none; border:none; color:#fff; font-size:18px; cursor:pointer; opacity:.85; padding:2px 6px; }
.ai-panel-close:hover{ opacity:1; }
.ai-panel-body{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; }
.ai-disclosure{ background:var(--blue-100); border:1px solid var(--blue-500); color:var(--slate-700); font-size:12.5px; padding:10px 12px; border-radius:8px; margin-bottom:12px; }
.ai-msg{ max-width:85%; padding:8px 12px; border-radius:10px; margin-bottom:8px; white-space:pre-wrap; word-break:break-word; font-size:13.3px; line-height:1.45; }
.ai-msg-user{ margin-left:auto; background:var(--blue-600); color:#fff; border-bottom-right-radius:2px; }
.ai-msg-assistant{ margin-right:auto; background:#fff; border:1px solid var(--slate-200); border-bottom-left-radius:2px; }
.ai-msg-notice{ margin:0 auto 8px; background:var(--amber-100); color:#92400e; border:1px solid var(--amber-500); font-size:12px; text-align:center; max-width:100%; }
.ai-msg-tool{ margin:0 auto 8px; background:var(--slate-100); color:var(--slate-600); border:1px solid var(--slate-200); font-size:11.5px; text-align:center; max-width:100%; padding:5px 10px; }
.ai-msg-pending{ margin-right:auto; background:#fff; border:1px solid var(--slate-200); color:var(--slate-400); font-style:italic; }
.ai-panel-foot{ border-top:1px solid var(--slate-200); padding:10px 12px; display:flex; gap:8px; align-items:flex-end; background:#fff; }
.ai-panel-foot textarea{ flex:1; resize:none; max-height:100px; }
.ai-proposal{ background:#fff; border:1px solid var(--blue-500); border-radius:8px; padding:10px 12px; margin-bottom:8px; font-size:12.8px; }
.ai-proposal-title{ font-weight:700; color:var(--blue-600); margin-bottom:6px; }
.ai-proposal-row{ margin-bottom:3px; }
.ai-proposal-hint{ color:var(--slate-500); font-size:11.5px; margin:6px 0 8px; }

@media print{
  .sidebar, .topbar, .page-actions, .no-print{ display:none !important; }
  .content{ padding:0; }
  body{ background:#fff; }
}