/* ═══════════════════════════════════════════════
   FUNDIO — Styles principaux
   ═══════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#login-screen .login-card{animation:fadeIn .3s ease}
:root{
  /* Palette FUNDIO — bleu institutionnel #2C5F8A */
  --bg:#F7F5F2;
  --card:#FFFFFF;
  --border:#EAE6E0;
  --bl:#F2EFE9;

  --dark:#18140F;
  --mid:#6B6457;
  --muted:#A09880;

  /* Couleur primaire : rouge-grenat danse */
  --rose:#2C5F8A;
  --rose-l:#C8DDEF;
  --rose-bg:#EEF4FA;
  --rose-br:#9BBEDD;

  /* Or / chamois pour accents secondaires */
  --or:#C49A3C;
  --or-bg:#FBF5E6;
  --or-br:#E8D49A;

  /* Bleu-encre pour financements confirmés */
  --bleu:#2C4A7C;
  --bleu-bg:#EDF1F8;
  --bleu-br:#B4C6E4;

  /* Vert sobrement ancré */
  --vert:#2E6B50;
  --vert-bg:#E8F3ED;
  --vert-br:#A8D4BC;

  /* Orange alerte */
  --orange:#C5622A;
  --orange-bg:#FAF0E8;

  --sand:#C8B89A;
  --sidebar:#18140F;
}

body{font-family:'DM Sans',system-ui,sans-serif;background:var(--bg);color:var(--dark);font-size:13px;min-height:100vh;display:flex}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

/* ═══ SIDEBAR ═══ */
#sidebar{
  width:232px;background:var(--sidebar);min-height:100vh;
  display:flex;flex-direction:column;flex-shrink:0;
  position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:visible;
  border-right:1px solid rgba(255,255,255,.04)
}
.slogo{padding:22px 20px 16px}
.slogo-name{
  font-family:'Fraunces',serif;
  font-size:19px;font-weight:700;color:#fff;
  letter-spacing:-.3px;line-height:1.1
}
.slogo-name em{font-style:italic;color:var(--rose-l);font-weight:300}
.slogo-tag{font-size:9.5px;color:rgba(255,255,255,.25);letter-spacing:.7px;margin-top:4px;text-transform:uppercase}

.sorg{
  margin:0 12px 18px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;padding:11px 13px;
  display:flex;align-items:center;gap:9px
}
.sorg-av{
  width:30px;height:30px;background:var(--rose);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces',serif;font-size:12px;font-weight:700;
  font-style:italic;color:#fff;flex-shrink:0
}
.sorg-name{font-size:11px;font-weight:600;color:#fff;line-height:1.2}
.sorg-sub{font-size:9px;color:rgba(255,255,255,.28);margin-top:2px}

nav{flex:1;padding:0 8px}
.nsection{
  font-size:9px;font-weight:700;color:rgba(255,255,255,.18);
  text-transform:uppercase;letter-spacing:.9px;
  padding:14px 11px 6px
}
.nav-sep{height:1px;background:rgba(255,255,255,.07);margin:8px 16px;}
.nbtn{
  width:100%;display:flex;align-items:center;gap:10px;
  padding:8px 12px;border-radius:9px;border:none;cursor:pointer;
  font-family:'DM Sans',inherit;font-size:12px;font-weight:400;
  color:rgba(255,255,255,.38);background:transparent;
  margin-bottom:1px;transition:all .15s;text-align:left
}
.kb-card:hover{box-shadow:0 3px 12px rgba(0,0,0,.12);transform:translateY(-1px)}
.kb-card:active{cursor:grabbing}
.kb-cards.drag-over{background:var(--bl)!important;outline:2px dashed var(--sand);outline-offset:-4px}
.nbtn:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.70)}
.nbtn.active{background:var(--rose);color:#fff;font-weight:600}
.nbtn .ni{font-size:15px;width:20px;text-align:center;flex-shrink:0;opacity:.85}
.nbtn.active .ni{opacity:1}

.suser:hover{background:rgba(255,255,255,.04)}
.suser{
  padding:14px 16px;
  border-top:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;gap:9px
}
.suser-av{
  width:30px;height:30px;border-radius:50%;
  background:rgba(192,50,74,.5);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#fff;flex-shrink:0
}
.suser-name{font-size:11px;font-weight:600;color:#fff}
.suser-role{font-size:9px;color:rgba(255,255,255,.28)}

/* ═══ MAIN ═══ */
#main{flex:1;display:flex;flex-direction:column;min-width:0;min-height:100vh}
#topbar{
  background:var(--card);border-bottom:1px solid var(--border);
  padding:12px 26px;display:flex;justify-content:space-between;align-items:center;
  position:sticky;top:0;z-index:10
}
.tb-title{
  font-family:'Fraunces',serif;
  font-size:17px;font-weight:600;letter-spacing:-.2px;color:var(--dark)
}
.tb-title em{font-style:italic;color:var(--rose)}
.tb-sub{font-size:11px;color:var(--muted);margin-top:1px}
.tb-actions{display:flex;align-items:center;gap:8px}
.ibtn{
  background:var(--bl);border:1px solid var(--border);
  border-radius:8px;padding:7px 10px;cursor:pointer;font-size:14px;
  position:relative;line-height:1;transition:background .15s
}
.ibtn:hover{background:var(--border)}
.nbadge{
  position:absolute;top:-4px;right:-4px;
  width:15px;height:15px;background:var(--rose);
  border-radius:50%;font-size:8px;color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700
}

#content{flex:1;overflow-y:auto}
.screen{display:none;padding:24px;animation:fadeIn .18s ease}
.screen.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ═══ CARDS ═══ */
.card{
  background:var(--card);border-radius:13px;
  border:1px solid var(--border);
  box-shadow:0 1px 4px rgba(0,0,0,.04);overflow:hidden
}
.ch{
  padding:14px 17px;border-bottom:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;gap:8px
}
.ct{font-family:'Fraunces',serif;font-weight:600;font-size:14px;color:var(--dark)}
.ct em{font-style:italic;color:var(--rose)}
.cs{font-size:11px;color:var(--muted);margin-top:2px}

/* ═══ TAGS ═══ */
.tag{
  display:inline-flex;align-items:center;font-size:10px;font-weight:700;
  padding:2px 8px;border-radius:20px;white-space:nowrap;letter-spacing:.3px
}
.tg{background:var(--vert-bg);color:var(--vert)}
.tr{background:var(--rose-bg);color:var(--rose)}
.to{background:var(--orange-bg);color:var(--orange)}
.ty{background:var(--or-bg);color:var(--or)}
.tb{background:var(--bleu-bg);color:var(--bleu)}
.tmuted{background:var(--bl);color:var(--muted)}

/* ═══ BOUTONS ═══ */
.btn{
  padding:8px 15px;border-radius:8px;border:none;
  font-family:'DM Sans',inherit;font-size:12px;font-weight:600;
  cursor:pointer;white-space:nowrap;transition:opacity .15s
}
.btn:hover{opacity:.83}
.bprim{background:var(--rose);color:#fff}
.bsec{background:var(--rose-bg);color:var(--rose);border:1px solid var(--rose-br)!important}
.bghost{background:transparent;color:var(--muted);border:1px solid var(--border)!important}
.bor{background:var(--or-bg);color:var(--or);border:1px solid var(--or-br)!important}
.bsm{padding:5px 11px;font-size:11px}

/* ═══ GRIDS ═══ */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.g5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}

/* ═══ KPI ═══ */
.kpi{padding:16px 18px}
.kpi-icon{font-size:18px;margin-bottom:8px}
.kpi-lbl{font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.7px;margin-bottom:5px}
.kpi-val{font-family:'Fraunces',serif;font-size:26px;font-weight:700;letter-spacing:-1px;margin-bottom:3px}
.kpi-sub{font-size:11px;color:var(--muted)}
.kpi-trend{font-size:11px;font-weight:600;margin-top:4px}
.kpi-up{color:var(--vert)}.kpi-down{color:var(--rose)}

/* ═══ PROGRESS ═══ */
.prog{height:5px;background:var(--bl);border-radius:3px;position:relative;overflow:hidden}
.prog-bar{height:100%;border-radius:3px;transition:width .4s ease}
.prog-sm{height:4px}

/* ═══ TABLE ═══ */
.thead{
  padding:8px 16px;background:#FAFAF7;
  border-bottom:1px solid var(--border);
  font-size:9.5px;color:var(--muted);font-weight:700;
  text-transform:uppercase;letter-spacing:.6px;
  display:flex;align-items:center;gap:0
}
.trow{
  padding:12px 16px;border-bottom:1px solid var(--bl);
  display:flex;align-items:center;transition:background .1s;cursor:default
}
.trow:hover{background:#FAFAF7}
.trow:last-child{border-bottom:none}

/* ═══ TABS ═══ */
.tabs{display:flex;border-bottom:2px solid var(--border);margin-bottom:16px;overflow-x:auto}
.tbtn{
  padding:9px 15px;font-size:12px;font-weight:500;color:var(--muted);
  background:none;border:none;border-bottom:2px solid transparent;
  margin-bottom:-2px;cursor:pointer;font-family:inherit;
  white-space:nowrap;transition:color .15s
}
.tbtn:hover{color:var(--dark)}
.tbtn.active{color:var(--rose);border-bottom-color:var(--rose);font-weight:600}

/* ═══ FILTER PILLS ═══ */
.pills{display:flex;gap:7px;flex-wrap:wrap}
.pill{
  padding:5px 14px;border-radius:20px;
  border:1px solid var(--border);background:#fff;
  color:var(--muted);font-size:12px;font-weight:600;
  cursor:pointer;font-family:inherit;transition:all .15s
}
.pill:hover{border-color:var(--rose-br);color:var(--rose)}
.pill.active{background:var(--rose-bg);color:var(--rose);border-color:var(--rose)}

/* ═══ MISC ═══ */
.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}.mb20{margin-bottom:20px}
.row{display:flex;align-items:center}
.rowb{display:flex;align-items:center;justify-content:space-between}
.gap6{gap:6px}.gap8{gap:8px}.gap12{gap:12px}
.sinput{
  border:1px solid var(--border);border-radius:8px;
  padding:7px 12px;font-size:12px;font-family:inherit;
  outline:none;background:#fff;color:var(--dark);width:200px
}
.sinput:focus{border-color:var(--rose)}
.finput{
  width:100%;border:1px solid var(--border);border-radius:8px;
  padding:9px 12px;font-size:13px;font-family:inherit;
  outline:none;background:#fff;color:var(--dark)
}
.finput:focus{border-color:var(--rose);outline:none}
.fsel{
  width:100%;border:1px solid var(--border);border-radius:8px;
  padding:9px 12px;font-size:13px;font-family:inherit;
  outline:none;background:#fff;color:var(--dark)
}
.fsel:focus{border-color:var(--rose)}

/* ═══ SECTION DIVIDER ═══ */
.sdiv{
  display:flex;align-items:center;gap:8px;
  margin:18px 0 10px;font-size:9.5px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.8px;font-weight:700
}
.sdiv::after{content:'';flex:1;height:1px;background:var(--border)}

/* ═══ SOLDE INDICATOR ═══ */
.solde-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:20px;
  font-size:12px;font-weight:700
}

/* ═══ MODAL ═══ */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.50);
  z-index:100;display:none;align-items:center;justify-content:center;padding:20px
}
.modal-overlay.open{display:flex}
.modal{
  background:#fff;border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.20);
  width:100%;max-width:560px;max-height:90vh;overflow-y:auto;
  animation:modalIn .2s ease
}
@keyframes modalIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.modal-head{
  padding:18px 20px;border-bottom:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;
  position:sticky;top:0;background:#fff;z-index:1
}
.modal-close{
  width:30px;height:30px;border-radius:8px;border:none;
  background:var(--bl);cursor:pointer;font-size:16px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0
}
.modal-body{padding:20px}
.fgroup{margin-bottom:14px}
.flbl{
  font-size:10px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px
}
.frow2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.modal-foot{
  padding:14px 20px;border-top:1px solid var(--border);
  display:flex;justify-content:flex-end;gap:8px;background:#FAFAF7
}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.50}}
.pulsing{animation:pulse 1.4s infinite}

/* ═══ CHART BAR ═══ */
.chart-bars{display:flex;gap:8px;align-items:flex-end}
.ccol{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px}
.bpair{width:100%;display:flex;gap:3px;align-items:flex-end}
.bar{flex:1;border-radius:4px 4px 0 0;min-height:4px;transition:opacity .2s}
.bar:hover{opacity:.75}

/* ═══ TRESORERIE ═══ */
.treo-month{
  flex:1;display:flex;flex-direction:column;
  align-items:center;padding:12px 8px;
  border-radius:10px;background:#FAFAF7;
  border:1px solid var(--border)
}
.treo-month.alert{background:var(--rose-bg);border-color:var(--rose-br)}

/* ═══ DEMANDE STATUS ═══ */
.dem-card{
  background:#fff;border:1px solid var(--border);border-radius:11px;
  padding:14px;margin-bottom:10px;transition:box-shadow .15s
}
.dem-card:hover{box-shadow:0 4px 14px rgba(0,0,0,.07)}
.dem-bar{
  height:3px;border-radius:2px;margin-bottom:12px
}

/* Tiny sparkline */
.spark{display:flex;gap:2px;align-items:flex-end}
.spark-bar{width:6px;border-radius:2px 2px 0 0;background:var(--rose-l)}


/* ═══ RESPONSIVE MOBILE ═══ */
@media (max-width: 767px) {

  /* Layout de base */
  body { display: block; }

  /* Hamburger visible */
  #hamburger { display: block !important; }

  /* Sidebar : drawer latéral */
  #sidebar {
    position: fixed; top: 0; left: 0; z-index: 50;
    height: 100vh; min-height: 100vh;
    transform: translateX(-100%);
    transition: transform .25s ease;
    width: 260px;
  }
  #sidebar.open { transform: translateX(0); }

  /* Main prend toute la largeur */
  #main { min-width: 0; width: 100%; }

  /* Topbar */
  #topbar { padding: 10px 14px; }
  .tb-actions { gap: 6px; }
  .tb-actions .btn { display: none; } /* masquer les boutons export sur mobile */

  /* Content */
  .screen { padding: 12px; }

  /* Grilles → colonne unique */
  .g2, .g3, .g5 { grid-template-columns: 1fr !important; gap: 10px; }

  /* Cards */
  .card { border-radius: 10px; }

  /* KPI : 2 colonnes sur mobile */
  .g5 { grid-template-columns: 1fr 1fr !important; }

  /* Tableaux : scroll horizontal */
  .card { overflow-x: auto; }
  .thead, .trow {
    min-width: 520px;
    font-size: 11px;
    padding: 9px 10px;
  }

  /* Tabs : scroll horizontal */
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tbtn { padding: 8px 11px; font-size: 11px; }

  /* Pills */
  .pills { gap: 5px; }
  .pill { padding: 4px 10px; font-size: 11px; }

  /* Modales */
  .modal { max-width: 100%; margin: 0; border-radius: 16px 16px 0 0; }
  .modal-overlay { align-items: flex-end; padding: 0; }

  /* Login screen */
  #login-screen > div {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh;
    border-radius: 0 !important;
    padding: 32px 20px !important;
  }

  /* Reset password screen */
  #reset-password-screen > div {
    width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    position: fixed; bottom: 0;
  }

  /* Trésorerie : scroll horizontal */
  .treo-months-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Masquer colonnes secondaires dans les tableaux budgétaires sur très petit écran */
  .trow > div:nth-child(3),
  .trow > div:nth-child(4),
  .thead > div:nth-child(3),
  .thead > div:nth-child(4) { display: none; }

  /* Budget tabs */
  #budget-tabs { overflow-x: auto; }
  #budget-export-actions { flex-wrap: wrap; gap: 6px; }

  /* Saisie dépenses : grille → colonne */
  .frow2 { grid-template-columns: 1fr !important; }

  /* Kanban : colonnes en scroll horizontal */
  .kb-board { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .kb-col { min-width: 260px; flex-shrink: 0; }

  /* Chart bars */
  .chart-bars { overflow-x: auto; }

  /* Topbar title */
  .tb-title { font-size: 14px; }
  .tb-sub { display: none; }

  /* Compta scenario pills */
  #compta-scenario-pills { flex-wrap: wrap; gap: 5px; }
  #compta-scenario-pills .pill { font-size: 10px; padding: 4px 8px; }
}

@media (max-width: 400px) {
  .g5 { grid-template-columns: 1fr !important; }
  .kpi-val { font-size: 20px; }
}

@media print {
  #login-screen, #loading-overlay, #sidebar, .tb-actions, #user-menu,
  .btn, .tbtn, .tabs, [onclick], .modal-overlay { display: none !important; }
  #app { display: block !important; }
  #main { margin: 0; padding: 0; }
  .screen { display: block !important; }
  .screen:not(.active) { display: none !important; }
  body { background: white; }
  .card { break-inside: avoid; box-shadow: none; border: 1px solid #ddd; }
  @page { margin: 1.5cm; }
}