:root {
  --bg: #F7F5F0;
  --surface: #FFFFFF;
  --surface2: #F0EDE6;
  --border: rgba(0,0,0,0.08);
  --border2: rgba(0,0,0,0.14);
  --text: #1A1814;
  --text2: #6B6760;
  --text3: #A09D99;
  --accent: #2D5A3D;
  --accent2: #4A8C60;
  --accent-bg: #EAF2EC;
  --red: #C0392B;
  --red-bg: #FDECEA;
  --amber: #B5660A;
  --amber-bg: #FEF3E2;
  --blue: #1A4A7A;
  --blue-bg: #E8F0FB;
  --purple: #4A3580;
  --purple-bg: #EDEBF8;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --sidebar-w: 220px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;overflow-x:hidden}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;min-height:100vh}
.app{display:flex;min-height:100vh;width:100%}

/* ── SIDEBAR ── */
.sidebar{width:var(--sidebar-w);background:var(--surface);border-right:1px solid var(--border);padding:24px 0;position:fixed;top:0;left:0;height:100vh;display:flex;flex-direction:column;z-index:100;transition:transform .25s;flex-shrink:0}
.main{margin-left:var(--sidebar-w);flex:1;padding:32px;width:calc(100% - var(--sidebar-w));min-width:0}
.logo{padding:0 20px 24px;border-bottom:1px solid var(--border);margin-bottom:16px}
.logo-title{font-family:'DM Serif Display',serif;font-size:20px;color:var(--text)}
.logo-sub{font-size:11px;color:var(--text3);margin-top:2px}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 20px;font-size:13px;color:var(--text2);cursor:pointer;border:none;background:none;width:100%;text-align:left;border-left:2px solid transparent;transition:all .15s;text-decoration:none;box-sizing:border-box}
.nav-item:hover{background:var(--surface2);color:var(--text)}
.nav-item.active{color:var(--accent);font-weight:500;border-left-color:var(--accent);background:var(--accent-bg)}
.nav-icon{font-size:16px;width:18px;text-align:center}
.nav-group-toggle{justify-content:space-between}
.nav-caret{font-size:11px;color:var(--text3);transition:transform .15s;margin-left:auto}
.nav-group.open .nav-caret{transform:rotate(90deg)}
.nav-subitems{overflow:hidden;max-height:0;transition:max-height .2s ease}
.nav-group.open .nav-subitems{max-height:260px}
.nav-subitem{padding-left:48px;font-size:12.5px}
.nav-section{font-size:10px;font-weight:500;color:var(--text3);padding:16px 20px 6px;letter-spacing:.08em;text-transform:uppercase}
.sidebar-bottom{margin-top:auto;padding:16px 20px;border-top:1px solid var(--border)}

/* Burger mobile */
.burger{display:none;position:fixed;top:12px;left:12px;z-index:200;background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius-sm);padding:8px 10px;cursor:pointer;font-size:18px;line-height:1}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.35);z-index:99}

.page-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:28px;flex-wrap:wrap;gap:12px}
.page-title{font-family:'DM Serif Display',serif;font-size:28px;color:var(--text)}
.page-sub{font-size:13px;color:var(--text3);margin-top:4px}
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-bottom:28px}
.metric{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow)}
.metric-label{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.metric-value{font-family:'DM Serif Display',serif;font-size:24px;color:var(--text);line-height:1.1}
.metric-sub{font-size:12px;color:var(--text3);margin-top:6px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px 24px;box-shadow:var(--shadow);margin-bottom:20px;width:100%;min-width:0}
.card-title{font-size:12px;font-weight:500;color:var(--text3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:16px}
.tag{display:inline-flex;align-items:center;font-size:11px;padding:3px 9px;border-radius:99px;font-weight:500}
.tag-pos{background:var(--accent-bg);color:var(--accent)}
.tag-neg{background:var(--red-bg);color:var(--red)}
.tag-neutral{background:var(--surface2);color:var(--text2)}
.tag-blue{background:var(--blue-bg);color:var(--blue)}
.tag-amber{background:var(--amber-bg);color:var(--amber)}
.tag-purple{background:var(--purple-bg);color:var(--purple)}
.data-table{width:100%;border-collapse:collapse}
.data-table th{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;font-weight:500;padding:8px 12px;text-align:left;border-bottom:1px solid var(--border)}
.data-table th:not(:first-child){text-align:right}
.data-table td{padding:12px 12px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle}
.data-table td:not(:first-child){text-align:right}
.data-table tr:last-child td{border-bottom:none}
.data-table tr:hover td{background:var(--surface2)}
.data-table th[style*="center"],
.data-table td[style*="center"]{text-align:center !important;}
.form-group{margin-bottom:16px}
.form-label{font-size:12px;color:var(--text2);margin-bottom:6px;display:block;font-weight:500}
.form-input{width:100%;background:var(--surface2);border:1px solid var(--border2);border-radius:var(--radius-sm);padding:9px 12px;font-size:13px;color:var(--text);font-family:'DM Sans',sans-serif;outline:none;transition:border-color .15s}
.form-input:focus{border-color:var(--accent)}
.form-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.form-grid4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:14px}
.rte-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.rte-sep{width:1px;align-self:stretch;background:var(--border2);margin:0 2px}
.rte-btn{background:var(--surface2);border:1px solid var(--border2);border-radius:6px;color:var(--text);font-size:12px;padding:5px 10px;cursor:pointer;font-family:'DM Sans',sans-serif}
.rte-btn:hover{background:var(--border)}
.rte-color{width:30px;height:28px;padding:2px;border:1px solid var(--border2);border-radius:6px;background:var(--surface2);cursor:pointer}
.rte-content{width:100%;min-height:76px;max-width:100%;resize:vertical;overflow-y:auto;box-sizing:border-box;line-height:1.5}
.rte-content ul,.rte-content ol{padding-left:28px;margin:6px 0}
.rte-content li{margin-bottom:2px}
.rte-content:empty:before{content:attr(data-placeholder);color:var(--text3)}
.notes-render ul,.notes-render ol{padding-left:28px;margin:6px 0}
.notes-render li{margin-bottom:4px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:var(--radius-sm);font-size:13px;font-family:'DM Sans',sans-serif;cursor:pointer;transition:all .15s;border:none;font-weight:500}
.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent2)}
.btn-ghost{background:transparent;color:var(--text2);border:1px solid var(--border2)}.btn-ghost:hover{background:var(--surface2);color:var(--text)}
.btn-danger{background:transparent;color:var(--red);border:1px solid var(--red-bg)}.btn-danger:hover{background:var(--red-bg)}
.btn-sm{padding:6px 12px;font-size:12px}
.legend{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:12px}
.legend-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text2)}
.legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.rank-bar-bg{background:var(--surface2);border-radius:99px;height:4px;margin-top:5px;overflow:hidden}
.rank-bar-fill{height:4px;border-radius:99px;transition:width .5s}
.transfer-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.transfer-item:last-child{border-bottom:none}
.transfer-arrow{color:var(--text3);font-size:13px}
.env-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.env-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.env-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
.env-name{font-size:13px;font-weight:500;color:var(--text)}
.env-type{font-size:11px;color:var(--text3)}
.env-val{font-family:'DM Serif Display',serif;font-size:18px;color:var(--text)}
.credit-progress-bg{background:var(--surface2);border-radius:99px;height:8px;margin:10px 0;overflow:hidden}
.credit-progress-fill{height:8px;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.notif{position:fixed;bottom:24px;right:24px;background:var(--text);color:var(--bg);padding:12px 20px;border-radius:var(--radius-sm);font-size:13px;z-index:999;opacity:0;transform:translateY(8px);transition:all .25s;pointer-events:none}
.notif.show{opacity:1;transform:translateY(0)}
.theme-btn{background:var(--surface2);border:1px solid var(--border2);border-radius:var(--radius-sm);padding:6px 10px;cursor:pointer;font-size:14px;color:var(--text2)}
.chart-wrap{position:relative;width:100%;min-width:0}
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:200;align-items:center;justify-content:center}
.modal-bg.open{display:flex}
.modal{background:var(--surface);border-radius:var(--radius);padding:28px;width:560px;max-width:95vw;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-md)}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.modal-title{font-family:'DM Serif Display',serif;font-size:20px}
.load-error{display:none;background:var(--red-bg);border:1px solid var(--red);border-radius:var(--radius-sm);padding:14px 18px;margin-bottom:20px;font-size:13px;color:var(--red);line-height:1.6}
.load-error strong{display:block;margin-bottom:4px;font-size:14px}
.load-error code{background:rgba(0,0,0,0.07);border-radius:4px;padding:1px 5px;font-size:12px}
.dash-alert{display:none;background:var(--amber-bg);border:1px solid var(--amber);border-radius:var(--radius-sm);padding:14px 18px;margin-bottom:20px;font-size:13px;color:var(--amber);line-height:1.6}
.dash-alert strong{display:block;margin-bottom:4px;font-size:14px}
.dash-alert ul{margin:8px 0 0;padding-left:18px}
.dash-alert li{margin-bottom:2px}

/* Période selector */
.period-tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.period-tab{padding:5px 12px;border-radius:var(--radius-sm);font-size:12px;font-weight:500;cursor:pointer;border:1px solid var(--border2);background:transparent;color:var(--text2);font-family:'DM Sans',sans-serif;transition:all .15s}
.period-tab.active{background:var(--accent-bg);color:var(--accent);border-color:var(--accent)}

/* Proj toggle buttons */
.proj-toggles{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.proj-toggle{padding:6px 14px;border-radius:var(--radius-sm);font-size:12px;font-weight:500;cursor:pointer;border:1px solid var(--border2);background:transparent;color:var(--text2);font-family:'DM Sans',sans-serif;transition:all .15s}
.proj-toggle.on-opt{background:var(--accent-bg);color:var(--accent);border-color:var(--accent)}
.proj-toggle.on-neu{background:var(--blue-bg);color:var(--blue);border-color:var(--blue)}
.proj-toggle.on-pes{background:var(--red-bg);color:var(--red);border-color:var(--red)}
.proj-toggle.on-base{background:var(--surface2);color:var(--text2);border-color:var(--border2)}

/* Credit list */
.credit-item{border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;margin-bottom:16px}
.credit-item-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;flex-wrap:wrap;gap:8px}

select.form-input option{background:var(--surface)}
.empty{text-align:center;padding:40px 20px;color:var(--text3);font-size:13px}
.empty-icon{font-size:32px;margin-bottom:12px}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  :root{--sidebar-w:200px}
  .main{padding:24px}
  .form-grid3{grid-template-columns:1fr 1fr}
  .form-grid4{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .burger{display:block}
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .sidebar-overlay.open{display:block}
  .main{margin-left:0;padding:16px;padding-top:56px;width:100%}
  .form-grid2,.form-grid3,.form-grid4{grid-template-columns:1fr}
  .metrics{grid-template-columns:1fr 1fr}
  .page-title{font-size:22px}
  .data-table th:nth-child(n+4),.data-table td:nth-child(n+4){display:none}
  .data-table th:nth-child(6),.data-table td:nth-child(6){display:table-cell}
  .env-grid{grid-template-columns:1fr}
  #list-depenses .data-table th:nth-child(4),
  #list-depenses .data-table td:nth-child(4),
  #list-depenses .data-table th:nth-child(6),
  #list-depenses .data-table td:nth-child(6),
  #list-rentrees .data-table th:nth-child(4),
  #list-rentrees .data-table td:nth-child(4),
  #list-rentrees .data-table th:nth-child(6),
  #list-rentrees .data-table td:nth-child(6){display:none}
}
@media(max-width:480px){
  .metrics{grid-template-columns:1fr}
  .proj-toggles,.period-tabs{gap:4px}
  .proj-toggle,.period-tab{padding:5px 9px;font-size:11px}
}
