:root{
  --paper:#EAF6FD;
  --paper-raised:#FFFFFF;
  --ink:#163A4D;
  --ink-soft:#5E7C8C;
  --gold:#2FA8E0;
  --gold-soft:#AEE0F7;
  --wine:#EF5F74;
  --forest:#22B37A;
  --line:#CFE9F6;
  --sidebar:#125A82;
  --sidebar-soft:#1B7CAD;
  --sidebar-text:#EAF6FD;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--paper); color:var(--ink); font-family:'IBM Plex Sans',sans-serif; font-size:14.5px; line-height:1.5;}
h1,h2,h3,.serif{font-family:'Fraunces',serif;}
.num{font-variant-numeric:tabular-nums;}
.mono{font-family:'IBM Plex Mono',monospace;}
a{color:inherit;}

/* Login */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 15% 20%, rgba(47,168,224,0.16), transparent 45%),
             radial-gradient(circle at 85% 80%, rgba(34,179,122,0.12), transparent 45%), var(--paper);}
.login-card{width:100%; max-width:440px; padding:44px 40px 36px; background:var(--paper-raised); border:1px solid var(--line); position:relative;}
.login-card::before{content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg, var(--gold), var(--wine));}
.login-mark .cross{font-family:'Fraunces',serif; font-size:26px; color:var(--gold);}
.login-eyebrow{color:var(--ink-soft); font-size:13px; margin:6px 0 26px;}
.login-card h1{font-size:25px; font-weight:600; margin:0 0 22px; letter-spacing:-.01em;}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:16px;}
.field label{font-size:12.5px; color:var(--ink-soft);}
.field input, .field select{padding:11px 12px; border:1px solid var(--line); font-family:inherit; font-size:14px; background:#fff;}
.btn-primary{width:100%; padding:13px; background:var(--gold); color:#fff; border:none; font-weight:700; font-size:14.5px; cursor:pointer;}
.btn-primary:hover{background:#1B8FC4;}
.error-box{background:#F6DEDE; border:1px solid var(--wine); color:var(--wine); padding:10px 13px; font-size:13px; margin-bottom:18px;}
.demo-note{margin-top:24px; padding-top:18px; border-top:1px solid var(--line); font-size:11.8px; color:var(--ink-soft); line-height:1.6;}

/* Shell */
#shell{display:flex; min-height:100vh;}
.sidebar{width:250px; background:var(--sidebar); color:var(--sidebar-text); flex-shrink:0; display:flex; flex-direction:column; padding:26px 0;}
.sb-brand{padding:0 22px 22px; border-bottom:1px solid rgba(255,255,255,.09);}
.sb-brand .cross{color:var(--gold-soft); font-family:'Fraunces',serif; font-size:20px;}
.sb-brand .name{font-family:'Fraunces',serif; font-size:16.5px; margin-top:6px;}
.sb-brand .sub{font-size:11.5px; color:#9AA6AE; margin-top:2px;}
.sb-context{padding:16px 22px; border-bottom:1px solid rgba(255,255,255,.09); font-size:12.5px; color:#B9C2C9;}
.sb-context b{color:var(--sidebar-text); display:block; font-size:13.5px; margin-top:2px; font-weight:600;}
.sb-nav{padding:14px 10px; flex:1;}
.sb-nav a{display:flex; align-items:center; gap:10px; padding:11px 12px; color:#C7CFD5; font-size:13.8px; text-decoration:none; border-left:2px solid transparent;}
.sb-nav a:hover{color:#fff;}
.sb-nav a.active{background:var(--sidebar-soft); color:#fff; border-left:2px solid var(--gold-soft);}
.sb-nav .dot{width:6px;height:6px;border-radius:50%;background:currentColor; opacity:.55; flex-shrink:0;}
.sb-foot{padding:16px 22px 0; border-top:1px solid rgba(255,255,255,.09);}
.logout-link{display:block; margin-top:4px; font-size:12px; color:#8B96A0; text-decoration:none;}
.logout-link:hover{color:#fff;}

.main{flex:1; padding:34px 42px 60px;}
.page-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:26px; flex-wrap:wrap; gap:14px;}
.page-head h1{font-size:25px; font-weight:600; margin:0;}
.page-head .desc{color:var(--ink-soft); font-size:13px; margin-top:4px;}
.readonly-flag{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--wine); border:1px solid var(--wine); padding:5px 10px;}
.back-link{font-size:12.5px; color:var(--ink-soft); text-decoration:none; margin-bottom:8px; display:inline-block;}
.back-link:hover{color:var(--gold);}

.flash{padding:11px 16px; font-size:13px; margin-bottom:20px; border:1px solid;}
.flash-success{background:#E7EFE9; border-color:var(--forest); color:var(--forest);}
.flash-error{background:#F6DEDE; border-color:var(--wine); color:var(--wine);}
.flash-warning{background:#FDF3E0; border-color:#F5A623; color:#8A6114;}

.kpi-row{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line); margin-bottom:34px;}
.kpi{padding:18px 20px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper-raised);}
.kpi .label{font-size:12px; color:var(--ink-soft); margin-bottom:8px;}
.kpi .value{font-family:'Fraunces',serif; font-size:26px; font-weight:600;}
.kpi .value.wine{color:var(--wine);}
.kpi .value.forest{color:var(--forest);}
.kpi .sub{font-size:11.5px; color:var(--ink-soft); margin-top:5px;}

section.block{margin-bottom:38px;}
section.block h2{font-size:17px; font-weight:600; margin:0 0 3px;}
.block-desc{color:var(--ink-soft); font-size:12.8px; margin-bottom:16px;}

table.ledger{width:100%; border-collapse:collapse; font-size:13.3px;}
table.ledger th{text-align:left; font-weight:600; color:var(--ink-soft); font-size:11.5px; padding:0 12px 10px 0; border-bottom:1px solid var(--ink);}
table.ledger td{padding:12px 12px 12px 0; border-bottom:1px solid var(--line); vertical-align:middle;}
table.ledger tr:hover td{background:rgba(169,124,52,0.05);}
table.ledger td.num, table.ledger th.num{text-align:right;}

.status-tag{display:inline-flex; align-items:center; gap:6px; font-size:12px;}
.status-tag .led{width:7px;height:7px;border-radius:50%;}
.status-tag.ok .led{background:var(--forest);}
.status-tag.pending .led{background:#F5A623;}
.status-tag.late .led{background:var(--wine);}
.link-action{font-size:11.5px; color:var(--gold); text-decoration:underline; cursor:pointer; margin-left:6px;}
.link-action:hover{color:var(--wine);}

.bar-wrap{display:flex; align-items:center; gap:10px;}
.bar-track{flex:1; height:7px; background:var(--line); position:relative; max-width:120px;}
.bar-fill{position:absolute; left:0; top:0; height:100%; background:var(--gold);}
.bar-fill.over{background:var(--wine);}

.paroisse-name{font-weight:600;}
.paroisse-loc{color:var(--ink-soft); font-size:12px;}
.paroisse-link{text-decoration:none; color:inherit;}
.paroisse-link:hover .paroisse-name{color:var(--gold); text-decoration:underline;}

.top-panel{display:flex; gap:0; margin-bottom:30px; border:1px solid var(--line); flex-wrap:wrap;}
.top-panel .solde{flex:1; min-width:200px; padding:22px 24px; background:var(--paper-raised); border-right:1px solid var(--line);}
.top-panel .solde .label{font-size:12px; color:var(--ink-soft);}
.top-panel .solde .value{font-family:'Fraunces',serif; font-size:30px; font-weight:600; margin-top:6px;}
.top-panel .actions{display:flex; gap:10px; padding:22px 24px; align-items:center; background:var(--paper-raised); flex-wrap:wrap;}

.action-btn{padding:11px 18px; font-size:13.5px; font-weight:600; cursor:pointer; border:1px solid var(--ink); background:transparent; color:var(--ink); text-decoration:none; display:inline-block;}
.action-btn.recette{border-color:var(--forest); color:var(--forest);}
.action-btn.recette:hover{background:var(--forest); color:#fff;}
.action-btn.depense{border-color:var(--wine); color:var(--wine);}
.action-btn.depense:hover{background:var(--wine); color:#fff;}

.form-box{border:1px solid var(--line); background:var(--paper-raised); padding:22px 24px; margin-bottom:26px; max-width:680px;}
.form-box h3{margin:0 0 16px; font-size:16px;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px 18px;}
.form-field{display:flex; flex-direction:column; gap:6px;}
.form-field.span2{grid-column:1/3;}
.form-field label{font-size:12px; color:var(--ink-soft);}
.form-field input, .form-field select, .form-field textarea{padding:10px 11px; border:1px solid var(--line); font-family:inherit; font-size:13.5px; background:#fff;}
.assist-note{font-size:12px; color:var(--gold); margin-top:10px; display:flex; align-items:center; gap:6px;}
.form-actions{margin-top:18px; display:flex; gap:10px;}
.form-actions button, .form-actions a{padding:10px 20px; font-size:13.5px; font-weight:600; cursor:pointer; border:none; text-decoration:none; display:inline-block;}
.btn-submit{background:var(--gold); color:#fff; font-weight:700;}
.btn-submit:hover{background:#1B8FC4;}
.btn-cancel{background:transparent; color:var(--ink-soft); border:1px solid var(--line) !important;}

.pending-badge{font-size:10.5px; background:#FDE8B8; color:#9A6B00; padding:2px 7px; margin-left:8px; font-weight:600;}
.empty-note{color:var(--ink-soft); font-size:12.8px; font-style:italic; padding:14px 0;}

.quete-row{display:flex; justify-content:space-between; align-items:center; padding:11px 0; border-bottom:1px solid var(--line); font-size:13.3px;}
.quete-row:last-child{border-bottom:none;}
.quete-row .qname{width:220px; flex-shrink:0;}
.quete-row .qbar{flex:1; height:8px; background:var(--line); position:relative; margin:0 16px;}
.quete-row .qbar .fill{position:absolute; left:0; top:0; height:100%; background:var(--gold);}
.quete-row .qamt{width:120px; text-align:right;}

/* Accueil — tuiles d'accès rapide */
.home-columns{display:flex; gap:0 44px; flex-wrap:wrap;}
.home-columns > div{flex:1 1 380px; min-width:300px;}
.home-section{margin-bottom:32px;}
.home-section h2{font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); margin:0 0 14px;}
.tile-grid{display:flex; flex-wrap:wrap; gap:10px;}
.tile{background:var(--sidebar); color:var(--sidebar-text); text-decoration:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:22px 8px; text-align:center; font-size:12px; font-weight:600; line-height:1.3; flex:1 1 128px; max-width:170px; min-width:112px;}
.tile:hover{background:var(--sidebar-soft);}
.tile svg{width:26px; height:26px; color:var(--gold-soft); flex-shrink:0;}
@media (max-width:900px){.home-columns > div{flex:1 1 100%;}}