/* Espace client EZA Group : papier clair, panneaux noirs, citron. Les coins coupés reprennent l'angle de 45° de la marque. */
:root{--paper:#F4F5F0;--paper-2:#E8EBE0;--ink:#0A0A0A;--mute:#5A6055;--line:#D3D7C8;--lime:#A6FF1E;--lime-deep:#2C7A00;
 --red:#B3261E;--red-bg:#FDECEA;--amber:#8A5300;--amber-bg:#FFF3D6;--green:#1E6B00;--green-bg:#E9F7DA;--side:248px;--r:0}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:1rem/1.6 "Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-underline-offset:4px;text-decoration-color:var(--lime-deep)}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.015em;line-height:1.1}
h1{font-size:clamp(1.9rem,4vw,2.7rem)}h2{font-size:1.25rem;margin-bottom:.7em}h3{font-size:1.05rem}
p{margin:0 0 1em}.lead{color:var(--mute);font-size:1.05rem;max-width:40em;margin:.5em 0 0}.muted{color:var(--mute)}.small{font-size:.9rem}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.88rem;word-break:break-all}
:focus-visible{outline:3px solid var(--lime-deep);outline-offset:2px}
.skip{position:absolute;left:-999px;top:8px;background:var(--lime);padding:8px 14px;z-index:30}.skip:focus{left:8px}

/* ----- structure de l'application ----- */
.app{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100vh}
.side{background:#000;color:#fff;display:flex;flex-direction:column;padding:22px 16px;position:sticky;top:0;height:100vh;border-right:5px solid var(--lime)}
.brand img{height:34px;width:auto;display:block}.side .brand{padding:0 8px 26px}
.side nav{display:grid;gap:4px}
.side nav a{display:flex;align-items:center;gap:12px;padding:11px 12px;color:#fff;text-decoration:none;font-weight:600;border-left:4px solid transparent}
.side nav a svg,.signout svg{width:20px;height:20px;fill:currentColor;flex:none}
.side nav a:hover{background:#1b1b1b}.side nav a.on{background:#1b1b1b;border-left-color:var(--lime);color:var(--lime)}
.me{margin-top:auto;border-top:1px solid #333;padding:16px 8px 0}.me-name{font-weight:700}.me-sub{color:#9aa090;font-size:.9rem;margin-bottom:10px;overflow-wrap:anywhere}
.me form{margin:0}.signout{display:flex;align-items:center;gap:10px;background:none;border:0;color:#fff;font:inherit;font-weight:600;cursor:pointer;padding:6px 0}.signout:hover{color:var(--lime)}
.content{display:flex;flex-direction:column;min-width:0}
.content main{width:100%;max-width:1040px;padding:clamp(22px,4vw,48px);flex:1}
.content footer{padding:20px clamp(22px,4vw,48px);color:var(--mute);font-size:.88rem;border-top:1px solid var(--line)}

/* ----- en-têtes de page ----- */
.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.crumb{margin:0 0 14px;font-size:.93rem}.crumb a{color:var(--mute)}

/* ----- boutons et formulaires ----- */
.btn{--c:12px;display:inline-block;background:var(--lime);color:var(--ink);font:700 1rem "Helvetica Neue",Arial,sans-serif;text-decoration:none;padding:13px 26px;border:0;cursor:pointer;
 clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c))}
.btn:hover,.btn:focus-visible{background:var(--ink);color:var(--lime)}.btn.small{--c:9px;padding:10px 20px;font-size:.95rem}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;text-decoration-color:var(--lime-deep);text-underline-offset:4px;cursor:pointer}
.textlink{font-weight:700}
label{display:grid;gap:6px;font-weight:600;font-size:.95rem}
input,select,textarea{font:inherit;font-weight:400;padding:11px 12px;border:2px solid var(--ink);background:#fff;color:var(--ink);border-radius:0;width:100%}
input[type=file]{padding:9px;border-style:dashed}
.stack{display:grid;gap:14px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:end}.grid2 .span2{grid-column:1/-1}.grid2 .btn{justify-self:start}
.inline{display:flex;gap:14px;align-items:end;flex-wrap:wrap;margin-top:18px}.inline label{min-width:220px}
.panel{background:#fff;border:1px solid var(--line);padding:clamp(18px,3vw,28px);margin:0 0 20px}
.empty{background:#fff;border:1px dashed var(--line);padding:26px;color:var(--mute);text-align:center}
#upstatus{margin-left:14px;font-weight:600}

/* ----- messages d'état ----- */
.notice{padding:12px 16px;border-left:6px solid var(--red);background:#fff;margin:0 0 18px}.notice.ok{border-color:var(--lime-deep)}
.alert{display:flex;gap:16px;padding:18px 20px;margin:0 0 16px;border-left:8px solid var(--ink);background:#fff}.alert p{margin:.3em 0 .6em}
.alert-icon{flex:none;width:34px;height:34px;display:grid;place-items:center;font-weight:800;font-size:1.2rem;background:var(--ink);color:var(--lime)}
.alert.late{background:var(--red-bg);border-left-color:var(--red)}.alert.late .alert-icon{background:var(--red);color:#fff}.alert.late strong{color:var(--red);font-size:1.08rem}
.alert.ok{background:var(--green-bg);border-left-color:var(--lime-deep)}

/* ----- étiquettes ----- */
.tag{display:inline-block;padding:3px 10px;font-size:.84rem;font-weight:700;background:var(--paper-2);white-space:nowrap}
.tag.status{background:var(--ink);color:var(--lime)}.tag.retard{background:var(--red);color:#fff}.tag.a_payer{background:var(--amber-bg);color:var(--amber)}
.tag.payee{background:var(--green-bg);color:var(--green)}.tag.annulee{background:var(--paper-2);color:var(--mute)}.tag.lime{background:var(--lime);color:var(--ink)}

/* ----- onglets ----- */
.tabs{display:flex;gap:4px;border-bottom:3px solid var(--ink);margin:0 0 24px;overflow-x:auto}
.tabs a{display:flex;align-items:center;gap:8px;padding:11px 18px;text-decoration:none;font-weight:700;color:var(--mute);white-space:nowrap}
.tabs a:hover{color:var(--ink)}.tabs a.on{background:var(--ink);color:var(--lime)}
.badge{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:11px;font-size:.78rem;background:var(--paper-2);color:var(--ink)}
.badge.red{background:var(--red);color:#fff}.badge.amber{background:#F2B531;color:var(--ink)}.badge.lime{background:var(--lime);color:var(--ink)}.tabs a.on .badge{outline:2px solid var(--lime)}

/* ----- avancement ----- */
.stepper{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);margin:18px 0 20px;padding:0;counter-reset:s}
.stepper li{position:relative;display:grid;justify-items:center;gap:8px;text-align:center;font-size:.9rem;font-weight:600;color:var(--mute)}
.stepper li::before{content:"";position:absolute;top:17px;left:-50%;width:100%;height:4px;background:var(--line);z-index:0}.stepper li:first-child::before{display:none}
.stepper li.done::before,.stepper li.now::before{background:var(--ink)}
.dot{position:relative;z-index:1;width:36px;height:36px;display:grid;place-items:center;background:#fff;border:3px solid var(--line);font-weight:800}
.stepper li.done .dot{background:var(--ink);border-color:var(--ink);color:var(--lime)}.stepper li.now .dot{background:var(--lime);border-color:var(--ink);color:var(--ink)}.stepper li.now{color:var(--ink)}
.step-text{margin:0;font-size:1.05rem}

/* ----- cartes de synthèse ----- */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 20px}
.stat{display:grid;gap:4px;align-content:start;background:#fff;border:1px solid var(--line);border-top:5px solid var(--ink);padding:18px;text-decoration:none}
a.stat:hover{background:var(--paper-2)}.stat.late{border-top-color:var(--red);background:var(--red-bg)}.stat.late .stat-big,.stat.late .stat-v{color:var(--red)}
.stat-k{font-size:.85rem;font-weight:700;color:var(--mute)}.stat-v{font-weight:700}.stat-big{font-size:2.6rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}

/* ----- factures ----- */
.inv{background:#fff;border:1px solid var(--line);border-left:8px solid var(--line);padding:18px 22px;margin:0 0 14px}
.inv.retard{border-left-color:var(--red);background:var(--red-bg)}.inv.a_payer{border-left-color:#F2B531}.inv.payee{border-left-color:var(--lime-deep)}.inv.annulee{opacity:.65}
.inv header{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}.inv header p{margin:.2em 0 0}.inv-amount{text-align:right;font-size:1.5rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.5}
.pay{display:flex;justify-content:space-between;gap:18px;align-items:center;flex-wrap:wrap;margin-top:12px;padding:14px;background:rgba(255,255,255,.7);border:1px dashed var(--line);font-size:.95rem}
.row-actions{display:flex;gap:18px;align-items:center;margin-top:14px;flex-wrap:wrap}.row-actions form{margin:0}

/* ----- messages ----- */
.thread{display:grid;gap:12px;margin:0 0 20px}.msg{background:#fff;border:1px solid var(--line);padding:12px 18px;max-width:46rem}
.msg.eza{border-left:6px solid var(--lime-deep);justify-self:start}.msg.cli{border-left:6px solid var(--ink);justify-self:end}
.msg header{display:flex;gap:12px;align-items:baseline}.msg time{color:var(--mute);font-size:.85rem}.msg p{margin:.4em 0 0}

/* ----- tableaux et listes ----- */
table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);margin:0 0 20px}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}th{background:var(--paper-2);font-size:.85rem;font-weight:700}
.todos{list-style:none;margin:0;padding:0;display:grid;gap:8px}.todo a{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;text-decoration:none;padding:12px 16px;background:var(--paper);border-left:6px solid var(--ink)}
.todo.late a{background:var(--red-bg);border-left-color:var(--red)}.todo.late strong{color:var(--red)}.todo a:hover{background:var(--paper-2)}.todo span{color:var(--mute)}
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.dcard{display:grid;gap:8px;background:#fff;border:1px solid var(--line);border-top:5px solid var(--ink);padding:20px;text-decoration:none}.dcard:hover{background:var(--paper-2)}
.dcard-top{display:flex;justify-content:space-between;gap:10px;align-items:center}.dcard p{margin:0;color:var(--mute)}.dcard-foot{display:flex;gap:8px;flex-wrap:wrap;min-height:26px}

/* ----- connexion et invitation ----- */
.auth{display:grid;grid-template-columns:minmax(300px,5fr) 6fr;min-height:100vh}
.auth-art{background:#000;color:#fff;padding:clamp(26px,5vw,56px);display:flex;flex-direction:column;justify-content:space-between;border-right:6px solid var(--lime);gap:30px}
.auth-art .brand img{height:42px}.kicker{color:var(--lime);font-weight:700;margin:0 0 12px}.pitch{font-size:clamp(1.7rem,3.2vw,2.6rem);font-weight:800;line-height:1.1;letter-spacing:-.015em;margin:0;max-width:11em}
.auth-foot{color:#9aa090;font-size:.9rem;margin:0}
.auth-main{display:grid;place-items:center;padding:clamp(24px,5vw,56px)}.auth-card{width:100%;max-width:440px}.auth-card h1{margin-bottom:.3em}.auth-card .lead{margin-bottom:22px}

/* ----- mobile ----- */
@media (max-width:900px){
 .app{grid-template-columns:1fr}.side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:10px 14px;border-right:0;border-bottom:5px solid var(--lime)}
 .side .brand{padding:0}.side nav{display:flex;order:3;flex:1 1 100%;overflow-x:auto}.side .me{margin-left:auto}.side nav a{padding:9px 10px;border-left:0;border-bottom:3px solid transparent;white-space:nowrap}.side nav a.on{border-bottom-color:var(--lime)}
 .me{margin:0;border:0;padding:0;display:flex;align-items:center;gap:12px}.me-name,.me-sub{display:none}
 .cards3{grid-template-columns:1fr}.grid2{grid-template-columns:1fr}.stepper li .lab{display:none}.stepper li.now .lab{display:block;position:absolute;top:44px;left:50%;transform:translateX(-50%);white-space:nowrap}.stepper{margin-bottom:44px}
 .auth{grid-template-columns:1fr}.auth-art{border-right:0;border-bottom:6px solid var(--lime);gap:18px}.pitch{font-size:1.5rem}
 table,thead,tbody,tr,th,td{display:block}thead{display:none}tr{border-bottom:2px solid var(--line);padding:8px 0}td{border:0;padding:4px 14px}td[data-l]::before{content:attr(data-l) " : ";font-weight:700;color:var(--mute)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}