:root {
  --bg: #f5f7fb;
  --card: #ffffff;
  --ink: #1f2937;
  --muted: #6b7280;
  --line: #d7dce5;
  --accent: #0f4c81;
  --accent-soft: #eaf2fb;
  --danger: #a32121;
  --ok: #0b7a43;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--bg);
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
}
.topbar {
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 5;
}
.topbar-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 22px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: bold;
  color: #0f172a;
}
.brand img { height: 52px; width: auto; }
.nav { display: flex; gap: 16px; flex-wrap: wrap; }
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
}
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.kpi-title { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.kpi-value { font-size: 28px; font-weight: bold; }
.kpi-sub { margin-top: 8px; font-size: 13px; color: var(--muted); }
.notice {
  border-left: 5px solid #d97706;
  background: #fff8eb;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.success {
  border-left: 5px solid var(--ok);
  background: #eefbf4;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.table-wrap { overflow-x: auto; }
table {
  width: 100%;
  border-collapse: collapse;
  background: white;
}
th, td {
  border: 1px solid var(--line);
  padding: 10px 12px;
  vertical-align: top;
  font-size: 14px;
}
th {
  background: #edf2f7;
  text-align: left;
}
label { display: block; font-weight: bold; font-size: 14px; margin-bottom: 6px; }
input, textarea, select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #cdd6e2;
  font: inherit;
  background: white;
}
textarea { min-height: 100px; resize: vertical; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.form-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.btn {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--accent);
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}
.btn.secondary { background: #fff; color: var(--accent); border-color: var(--accent); }
.btn.danger { background: var(--danger); }
.small { font-size: 12px; color: var(--muted); }
.badge {
  display: inline-block;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: bold;
}
.section-title { margin: 0 0 12px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.checkbox-line { display: flex; gap: 8px; align-items: center; }
.checkbox-line input { width: auto; }
.doc-shell {
  width: 210mm;
  min-height: 297mm;
  margin: 12px auto;
  background: #fff;
  padding: 14mm 12mm;
  color: #111827;
}
.doc-header {
  display: grid;
  grid-template-columns: 120px 1fr 240px;
  gap: 12px;
  align-items: start;
}
.doc-header img { width: 95px; height: auto; }
.doc-title { font-size: 18px; font-weight: bold; margin: 8px 0 16px; }
.doc-company { font-size: 18px; font-weight: bold; margin: 8px 0 18px; }
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  border: 1px solid #d1d5db;
  margin-top: 10px;
}
.info-grid > div {
  padding: 10px 12px;
  border-right: 1px solid #d1d5db;
  background: #f5f5f5;
  min-height: 110px;
}
.info-grid > div:last-child { border-right: 0; }
.doc-table th {
  background: #b40000;
  color: #fff;
}
.doc-right-summary {
  width: 320px;
  margin-left: auto;
  margin-top: 16px;
}
.doc-right-summary td:first-child { background: #fafafa; }
.doc-total {
  font-weight: bold;
  font-size: 16px;
}
.doc-amount-box {
  border: 2px solid #111827;
  font-weight: bold;
}
.doc-block {
  margin-top: 18px;
  line-height: 1.45;
}
.doc-rib {
  border: 1px solid #9ca3af;
  padding: 12px;
  margin-top: 12px;
}
.doc-sign {
  margin-top: 22px;
  text-align: right;
  min-height: 80px;
}
.report-title {
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  margin: 10px 0;
}
.report-subtitle { text-align: center; font-weight: bold; font-size: 18px; margin-bottom: 8px; }
.report-name { text-align: center; font-weight: bold; font-size: 16px; margin-bottom: 22px; }
.report-table td, .report-table th { font-size: 13px; }
.print-actions { max-width: 210mm; margin: 16px auto; display:flex; gap:10px; }
@media print {
  .topbar, .actions, .print-actions { display: none !important; }
  body { background: white; }
  .doc-shell { margin: 0; box-shadow: none; border: none; }
}
@media (max-width: 1100px) {
  .grid-4, .grid-3, .grid-2, .form-grid, .form-grid-3, .doc-header, .info-grid { grid-template-columns: 1fr; }
  .doc-shell { width: auto; min-height: auto; }
  .doc-right-summary { width: 100%; }
}

.info-grid table, .doc-header table { width:100%; border-collapse:collapse; }
.info-grid table td, .doc-header table td { border:1px solid #d1d5db; padding:6px 8px; font-size:13px; }
ul { margin-top: 8px; }


.stakeholder-card{min-height:260px}
.stakeholder-top{display:flex;gap:16px;align-items:flex-start}
.stakeholder-logo{width:96px;height:96px;object-fit:contain;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:10px}
.muted{color:#475569}

.info-box{background:#f8fbff;border:1px solid #dbeafe;border-radius:12px;padding:14px;}

.nav a{padding:6px 8px;border-radius:8px}.nav a:hover{background:#eef4fb;text-decoration:none}
h1.section-title{font-size:24px}
.doc-table{width:100%;border-collapse:collapse}.doc-table td,.doc-table th{border:1px solid #d1d5db;padding:8px 10px;font-size:13px}


.progress{height:10px;background:#e5e7eb;border-radius:999px;overflow:hidden}.progress.compact{height:8px;margin-top:8px}.progress-bar{height:100%;background:var(--accent);border-radius:999px}
.timeline{display:flex;flex-direction:column;gap:12px}.timeline-item{padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff}
.kanban-board{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}.kanban-column{min-height:280px}.kanban-card{padding:12px;border:1px solid var(--line);border-radius:12px;background:#f8fbff;margin-bottom:10px}
.gantt-track{position:relative;height:28px;border-radius:999px;background:#eef2f7;overflow:hidden}.gantt-bar{position:absolute;top:4px;bottom:4px;background:var(--accent);border-radius:999px;color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;white-space:nowrap}.gantt-table td{vertical-align:middle}
@media (max-width: 1100px){.kanban-board{grid-template-columns:1fr}}


.doc-explorer-layout{display:grid;grid-template-columns:320px 1fr;gap:16px;align-items:start}.doc-explorer-layout-wide{grid-template-columns:300px 1fr}.doc-tree-card{position:sticky;top:92px;max-height:calc(100vh - 110px);overflow:auto}.tree-wrap{margin-top:14px}.tree-list{list-style:none;margin:0;padding-left:0}.tree-list li{margin:4px 0}.tree-folder{border-radius:12px}.tree-folder-summary{list-style:none;cursor:pointer;display:block}.tree-folder-summary::-webkit-details-marker{display:none}.tree-folder-summary::before{content:"▸";display:inline-block;margin-right:6px;color:#64748b;transition:transform .15s ease}.tree-folder[open]>.tree-folder-summary::before{transform:rotate(90deg)}.tree-children{padding-left:18px;margin-top:4px;border-left:1px dashed #d7e1f1;margin-left:10px}.tree-link{display:inline-block;padding:7px 10px;border-radius:10px;color:var(--ink);width:calc(100% - 8px)}.tree-link:hover{background:#eef4fb;text-decoration:none}.tree-link.active{background:var(--accent-soft);color:var(--accent);font-weight:bold}.tree-link.file{font-size:13px}.doc-toolbar{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}.doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}.doc-card{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);border-radius:14px;padding:10px;background:#fff;color:var(--ink);transition:.15s ease}.doc-card:hover{text-decoration:none;transform:translateY(-1px);box-shadow:0 8px 22px rgba(15,23,42,.08)}.doc-card.active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(37,99,235,.12)}.doc-card-folder{justify-content:center;align-items:center;text-align:center;min-height:220px;background:#f8fbff}.doc-thumb-wrap{width:100%;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#f8fafc;border:1px solid var(--line)}.doc-thumb-image{width:100%;height:100%;object-fit:cover;display:block}.doc-thumb{display:flex;align-items:center;justify-content:center;font-size:56px}.doc-thumb-folder{width:100%;aspect-ratio:4/3;border:1px dashed #bfd2f8;border-radius:12px;background:#eef4ff}.doc-card-body strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.doc-preview-header{display:flex;gap:16px;align-items:center;margin-bottom:14px}.doc-preview-thumb{width:180px;max-width:38vw;border:1px solid var(--line);border-radius:12px;background:#fff}.doc-preview-frame{width:100%;height:78vh;border:1px solid var(--line);border-radius:12px;background:#fff}.doc-preview-image{max-width:100%;height:auto;border:1px solid var(--line);border-radius:12px;background:#fff}.doc-preview-text{white-space:pre-wrap;background:#0f172a;color:#e5e7eb;padding:16px;border-radius:12px;overflow:auto;max-height:70vh}.doc-preview-note{margin-top:10px}
.doc-filters{display:grid;grid-template-columns:minmax(240px,1.6fr) minmax(180px,.8fr) auto;gap:12px;align-items:end;margin-top:16px}.doc-filter-field{display:flex;flex-direction:column;gap:6px}.doc-filter-field label{font-size:12px;color:var(--muted);font-weight:700}.doc-filter-field input,.doc-filter-field select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff}.doc-filter-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:end}.doc-main-panels,.doc-main-panels-permanent{display:grid;grid-template-columns:minmax(360px,0.95fr) minmax(520px,1.25fr);gap:16px;align-items:start}.doc-preview-panel{position:sticky;top:92px}.doc-preview-frame{min-height:68vh}.doc-preview-panel:fullscreen,.doc-preview-panel:-webkit-full-screen,#doc-preview-fullscreen-target:fullscreen,#doc-preview-fullscreen-target:-webkit-full-screen{background:#fff;padding:14px;overflow:auto}.doc-preview-panel:fullscreen .doc-preview-frame,#doc-preview-fullscreen-target:fullscreen .doc-preview-frame{height:92vh}.doc-preview-panel:fullscreen .doc-preview-image,#doc-preview-fullscreen-target:fullscreen .doc-preview-image{max-height:92vh;width:auto;max-width:100%}
 @media (max-width: 1100px){.doc-explorer-layout,.doc-explorer-layout-wide{grid-template-columns:1fr}.doc-tree-card{position:static;max-height:none}.doc-preview-header{flex-direction:column;align-items:flex-start}.doc-preview-thumb{width:100%;max-width:320px}.doc-main-panels,.doc-main-panels-permanent{grid-template-columns:1fr}.doc-preview-panel{position:static}.doc-filters{grid-template-columns:1fr}.doc-filter-actions{align-items:stretch}}

/* Gantt interactif modifiable */
.gantt-editor-card { overflow: hidden; }
.gantt-editor-toolbar { display:flex; justify-content:space-between; gap:14px; align-items:center; margin-bottom:14px; flex-wrap:wrap; }
.gantt-editor { display:grid; grid-template-columns:minmax(360px, 440px) minmax(720px, 1fr); border:1px solid var(--line); border-radius:14px; overflow:auto; background:#fff; }
.gantt-head { position:sticky; top:0; z-index:2; background:#edf2f7; font-weight:bold; border-bottom:1px solid var(--line); min-height:48px; }
.gantt-left { border-right:1px solid var(--line); padding:10px 12px; }
.gantt-right { position:relative; min-width:720px; }
.gantt-scale { height:48px; }
.gantt-tick-label { position:absolute; top:15px; transform:translateX(-50%); font-size:12px; color:#334155; white-space:nowrap; }
.gantt-row-label { min-height:94px; border-bottom:1px solid var(--line); background:#fff; }
.gantt-row-track { min-height:94px; border-bottom:1px solid var(--line); background:linear-gradient(180deg,#fff,#f8fafc); }
.gantt-grid-line { position:absolute; top:0; bottom:0; border-left:1px dashed #d7dce5; pointer-events:none; }
.gantt-edit-bar { position:absolute; top:30px; height:34px; border-radius:999px; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; cursor:grab; box-shadow:0 6px 16px rgba(15,76,129,.22); min-width:32px; touch-action:none; }
.gantt-edit-bar:active { cursor:grabbing; }
.gantt-bar-label { font-size:12px; font-weight:bold; padding:0 16px; white-space:nowrap; }
.gantt-handle { position:absolute; top:0; width:12px; height:34px; background:rgba(255,255,255,.42); border:1px solid rgba(255,255,255,.8); cursor:ew-resize; }
.gantt-handle.left { left:0; border-radius:999px 0 0 999px; }
.gantt-handle.right { right:0; border-radius:0 999px 999px 0; }
.gantt-quick-edit { display:grid; grid-template-columns:1fr 1fr 1fr 1fr 72px; gap:6px; margin-top:8px; }
.gantt-quick-edit input, .gantt-quick-edit select { padding:6px 7px; border-radius:8px; font-size:12px; }
.badge.dirty, #ganttSaveStatus.dirty { background:#fff7ed; color:#9a3412; }
@media (max-width: 1100px) {
  .gantt-editor { grid-template-columns:minmax(300px, 1fr) minmax(620px, 1fr); }
  .gantt-quick-edit { grid-template-columns:1fr 1fr; }
}