:root {
  /* Polices de la marque (alignées sur la façade) */
  --app-sans: 'Inter', -apple-system, 'Segoe UI', 'Aptos', sans-serif;
  --app-serif: 'Fraunces', 'Georgia', serif;
  --bg: #FAF7F2;
  --bg-card: #FFFFFF;
  --ink: #1A1814;
  --ink-soft: #5A544B;
  --ink-mute: #9A9388;
  --line: #E8E2D6;
  --line-soft: #F0EBE0;
  --accent: #B8654A;
  --accent-soft: #E8C9B8;
  --accent-bg: #F5E8DD;
  --gold: #A88B5C;
  --success: #6B8E5A;
  --warn: #D4A24C;
  --danger: #C25A4A;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--app-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
.display { font-family: var(--app-sans); font-weight: 600; letter-spacing: -0.01em; }
button, input, select, textarea { font-family: var(--app-sans); }
.display, .brand-logo, .page-title, .card-title, .kpi-value, .project-info h4, .project-amount, .table .ref, .table .amount, .project-name, .agenda-day, .lines-foot-row.total, .lib-item-price, .kan-count, .kan-card-name, .client-name, .modal-title, .dashboard-list-title { font-family: var(--app-sans); font-weight: 600; letter-spacing: -0.01em; }

.layout { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }

/* SIDEBAR */
.sidebar {
  background: var(--bg);
  border-right: 1px solid var(--line);
  padding: 36px 28px;
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.brand { margin-bottom: 56px; display:flex; flex-direction:column; align-items:center; }
.brand-img { width: 174px; max-width: 100%; height: auto; display: block; margin: 0 auto; }
.brand-logo { font-family: var(--app-sans); font-size: 28px; font-weight: 500; letter-spacing: 0.18em; }
.brand-sub { display:none; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-label { font-size: 10px; letter-spacing: 0.24em; color: var(--ink-mute); text-transform: uppercase; padding: 0 12px 12px; margin-top: 24px; }
.nav-label:first-child { margin-top: 0; }
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 6px;
  color: var(--ink-soft); cursor: pointer;
  font-size: 14px; font-weight: 500;
  transition: all 0.15s ease;
  border: none; background: none; text-align: left; width: 100%;
}
.nav-item:hover { background: var(--line-soft); color: var(--ink); }
.nav-item.active { background: var(--ink); color: var(--bg); }
.nav-item svg { width: 16px; height: 16px; stroke-width: 1.75; }
.sidebar-footer { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.user-card { display: flex; align-items: center; gap: 12px; padding: 6px 4px; }
.user-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--bg); display: flex; align-items: center; justify-content: center; font-family: var(--app-sans); font-weight: 500; font-size: 14px; }
.user-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.user-role { font-size: 11px; color: var(--ink-mute); letter-spacing: 0.04em; }

/* MAIN */
.main { padding: 40px 56px 80px; max-width: 1400px; }
.page { display: none; animation: fadeIn 0.3s ease; }
.page.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 40px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.page-title { font-family: var(--app-sans); font-size: 44px; font-weight: 400; letter-spacing: -0.02em; line-height: 1.05; }
.page-eyebrow { font-size: 11px; letter-spacing: 0.28em; color: var(--accent); text-transform: uppercase; margin-bottom: 12px; font-weight: 600; }
.page-date { font-size: 13px; color: var(--ink-mute); font-feature-settings: 'tnum'; }

/* BUTTONS */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 4px; font-family: var(--app-sans);
  font-size: 13px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer;
  transition: all 0.15s ease; border: 1px solid transparent;
}
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { background: var(--accent); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-link { display: inline-flex; align-items: center; gap: 4px; background: transparent; color: var(--accent); padding: 6px 0; font-weight: 600; }
.btn-link:hover { color: var(--ink); }
.btn svg { width: 14px; height: 14px; stroke-width: 2; }

/* KPI GRID */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin-bottom: 48px; }
.kpi { background: var(--bg-card); padding: 28px 24px; position: relative; }
.kpi-label { font-size: 11px; letter-spacing: 0.16em; color: var(--ink-mute); text-transform: uppercase; font-weight: 600; margin-bottom: 16px; }
.kpi-value { font-family: var(--app-sans); font-size: 36px; font-weight: 400; letter-spacing: -0.02em; line-height: 1; font-feature-settings: 'tnum'; }
.kpi-unit { font-size: 18px; color: var(--ink-mute); margin-left: 2px; }
.kpi-trend { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 12px; color: var(--ink-soft); }
.kpi-trend.up { color: var(--success); }
.kpi-trend.down { color: var(--danger); }

/* GRID 2 COL */
.col-2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 32px; }

/* CARDS */
.card { background: var(--bg-card); border: 1px solid var(--line); border-radius: 6px; padding: 28px; }
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.card-title { font-family: var(--app-sans); font-size: 22px; font-weight: 400; }
.card-sub { font-size: 11px; letter-spacing: 0.18em; color: var(--ink-mute); text-transform: uppercase; font-weight: 600; }

/* PROJECT LIST */
.project-row { display: grid; grid-template-columns: 1fr auto auto; gap: 20px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line-soft); }
.project-row:first-of-type { border-top: 0; padding-top: 4px; }
.project-info h4 { font-family: var(--app-sans); font-size: 17px; font-weight: 500; margin-bottom: 4px; }
.project-info p { font-size: 12px; color: var(--ink-mute); letter-spacing: 0.04em; }
.project-amount { font-family: var(--app-sans); font-size: 18px; font-feature-settings: 'tnum'; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 100px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; }
.badge-dot { width: 6px; height: 6px; border-radius: 50%; }
.badge.attente { background: #FBF1DC; color: #8A6B1F; }
.badge.attente .badge-dot { background: var(--warn); }
.badge.signe { background: #E4EEDF; color: #496D3C; }
.badge.signe .badge-dot { background: var(--success); }
.badge.cours { background: var(--accent-bg); color: var(--accent); }
.badge.cours .badge-dot { background: var(--accent); }
.badge.relance { background: #F5DAD4; color: #8A3D2F; }
.badge.relance .badge-dot { background: var(--danger); }
.badge.paye { background: var(--line-soft); color: var(--ink-soft); }
.badge.paye .badge-dot { background: var(--ink-mute); }

/* AGENDA */
.agenda-item { display: flex; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line-soft); }
.agenda-item:first-of-type { border-top: 0; padding-top: 4px; }
.agenda-date { text-align: center; min-width: 44px; }
.agenda-day { font-family: var(--app-sans); font-size: 22px; font-weight: 500; line-height: 1; }
.agenda-month { font-size: 10px; letter-spacing: 0.18em; color: var(--ink-mute); text-transform: uppercase; margin-top: 4px; font-weight: 600; }
.agenda-info h5 { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.agenda-info p { font-size: 12px; color: var(--ink-mute); }

/* TABLE DEVIS */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 10px; letter-spacing: 0.2em; color: var(--ink-mute); text-transform: uppercase; font-weight: 600; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.table td { padding: 18px 16px; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.table tr:last-child td { border-bottom: 0; }
.table tr:hover { background: var(--line-soft); }
.table .ref { font-family: var(--app-sans); font-weight: 500; }
.table .amount { font-family: var(--app-sans); font-feature-settings: 'tnum'; font-size: 15px; }

/* PROJECT CARDS */
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 24px; }
.project-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; transition: all 0.2s ease; }
.project-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.project-cover { height: 140px; background: linear-gradient(135deg, var(--accent-bg) 0%, var(--line-soft) 100%); position: relative; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--line); }
.project-cover svg { width: 36px; height: 36px; color: var(--accent); opacity: 0.4; stroke-width: 1; }
.project-body { padding: 22px; }
.project-name { font-family: var(--app-sans); font-size: 19px; font-weight: 500; margin-bottom: 4px; }
.project-address { font-size: 12px; color: var(--ink-mute); letter-spacing: 0.04em; margin-bottom: 16px; }
.project-meta { display: flex; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--line-soft); font-size: 12px; }
.project-meta-label { color: var(--ink-mute); }
.project-meta-value { font-weight: 600; }
.drive-links { display: flex; gap: 8px; margin-top: 16px; }
.drive-link { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 4px; font-size: 12px; font-weight: 600; color: var(--ink); text-decoration: none; transition: all 0.15s ease; }
.drive-link:hover { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.drive-link svg { width: 14px; height: 14px; stroke-width: 2; }

/* FILTERS */
.filters { display: flex; gap: 12px; margin-bottom: 24px; }
.filter-chip { padding: 8px 14px; border: 1px solid var(--line); border-radius: 100px; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--ink-soft); }
.filter-chip:hover { border-color: var(--ink); color: var(--ink); }
.filter-chip.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
button.filter-chip { background: transparent; font-family: inherit; }
button.filter-chip.active { background: var(--ink); }

/* DEVIS BUILDER */
.builder { display: grid; grid-template-columns: 1fr 320px; gap: 24px; }
.builder-main { background: var(--bg-card); border: 1px solid var(--line); border-radius: 6px; padding: 32px; }
.builder-side { display: flex; flex-direction: column; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-field label { display: block; font-size: 11px; letter-spacing: 0.16em; color: var(--ink-mute); text-transform: uppercase; font-weight: 600; margin-bottom: 6px; }
.form-field input, .form-field select { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px; font-family: inherit; font-size: 14px; background: var(--bg); color: var(--ink); }
.form-field input:focus, .form-field select:focus { outline: none; border-color: var(--accent); }

.lines-table { margin-top: 24px; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.lines-head, .lines-row { display: grid; grid-template-columns: 2.5fr 80px 70px 90px 100px 30px; gap: 12px; padding: 12px 14px; align-items: center; }
.lines-head { background: var(--line-soft); font-size: 10px; letter-spacing: 0.18em; color: var(--ink-mute); text-transform: uppercase; font-weight: 600; }
.lines-row { border-top: 1px solid var(--line-soft); font-size: 13px; }
.lines-row .num, .lines-row .qty, .lines-row .price, .lines-row .total { text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
.lines-row .total { font-weight: 600; }
.delete-btn { background: none; border: none; color: var(--ink-mute); cursor: pointer; padding: 4px; }
.delete-btn:hover { color: var(--danger); }
.lines-foot { padding: 16px 14px; display: flex; flex-direction: column; gap: 8px; background: var(--bg); border-top: 1px solid var(--line); }
.lines-foot-row { display: flex; justify-content: space-between; font-size: 13px; }

/* Parcours devis en 3 étapes (Phase 6b) */
.devis-stepper { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.devis-step-tab { display: flex; align-items: center; gap: 8px; background: var(--bg-card); border: 1px solid var(--line); border-radius: 8px; padding: 10px 16px; cursor: pointer; font-size: 13px; color: var(--ink-mute); font-weight: 600; }
.devis-step-tab .step-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--line); color: var(--ink); font-size: 12px; }
.devis-step-tab.active { border-color: var(--accent); color: var(--ink); }
.devis-step-tab.active .step-num { background: var(--accent); color: #fff; }
.devis-step-nav { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line-soft); }

/* ─────────────────────────────────────────────
   Phase 8 — Polish final : feedback, transitions, responsive
   ───────────────────────────────────────────── */
.activity-item { cursor: pointer; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.activity-item:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.05); }
.kan-card { cursor: pointer; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.kan-card:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.devis-step-tab { transition: border-color .15s ease, color .15s ease, background .15s ease; }
.devis-step-tab:hover { border-color: var(--ink); color: var(--ink); }

/* Apparition douce des fenêtres modales */
@keyframes anteaModalIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
[id$="-overlay"] > div { animation: anteaModalIn .18s ease; }
.modal-backdrop.show .modal { animation: anteaModalIn .18s ease; }

/* Responsive : tablette et petits écrans */
@media (max-width: 1100px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .col-2 { grid-template-columns: 1fr; }
  .builder { grid-template-columns: 1fr; }
  .kanban { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(220px, 80%); overflow-x: auto; padding-bottom: 8px; }
}
@media (max-width: 680px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .devis-actions-bar { flex-wrap: wrap; }
  .devis-stepper { font-size: 12px; }
}

/* Barre d'avancement auto des cartes projet (encaissé / facturé) */
.project-progress { margin-top: 12px; }
.project-progress-head { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-mute); margin-bottom: 5px; font-variant-numeric: tabular-nums; }
.project-progress-track { height: 6px; background: var(--line-soft); border-radius: 99px; overflow: hidden; }
.project-progress-fill { height: 100%; background: var(--accent); border-radius: 99px; transition: width .3s ease; }
.lines-foot-row.total { font-family: var(--app-sans); font-size: 24px; font-weight: 500; padding-top: 8px; border-top: 1px solid var(--line-soft); margin-top: 4px; }

.library-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: 6px; padding: 20px; }
.library-card h4 { font-family: var(--app-sans); font-size: 16px; margin-bottom: 4px; }
.library-card p { font-size: 11px; color: var(--ink-mute); margin-bottom: 16px; }
.library-search { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px; font-size: 13px; margin-bottom: 12px; background: var(--bg); }
.library-list { max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.lib-item { padding: 10px 12px; border-radius: 4px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 8px; transition: background 0.1s; }
.lib-item:hover { background: var(--accent-bg); }
.lib-item-name { font-size: 12px; flex: 1; }
.lib-item-price { font-family: var(--app-sans); font-size: 12px; font-weight: 500; color: var(--accent); font-feature-settings: 'tnum'; }

/* KANBAN */
.kanban { display: grid; gap: 16px; }  /* colonnes definies plus bas : 6 sur desktop, scroll horizontal <=1100px */
.kan-col { background: var(--bg-card); border: 1px solid var(--line); border-radius: 6px; padding: 16px; min-height: 400px; }
.kan-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.kan-title { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; }
.kan-count { font-family: var(--app-sans); font-size: 14px; color: var(--ink-mute); }
.kan-card { background: var(--bg); border: 1px solid var(--line-soft); border-radius: 4px; padding: 12px; margin-bottom: 8px; cursor: grab; }
.kan-card:hover { border-color: var(--accent); }
.kan-card-name { font-family: var(--app-sans); font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.kan-card-meta { font-size: 11px; color: var(--ink-mute); margin-bottom: 8px; }
.kan-card-amount { font-size: 12px; font-weight: 600; color: var(--accent); font-feature-settings: 'tnum'; }

/* MAILS */
.mail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mail-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: 6px; padding: 24px; cursor: pointer; transition: all 0.2s; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.mail-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; }
.mail-card:hover { border-color: var(--accent); }
.mail-card:hover::before { transform: scaleX(1); }
.mail-icon { width: 36px; height: 36px; border-radius: 6px; background: var(--accent-bg); color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.mail-card h3 { font-family: var(--app-sans); font-size: 18px; font-weight: 500; margin-bottom: 6px; }
.mail-card p { font-size: 13px; color: var(--ink-soft); margin-bottom: 16px; flex: 1; }
.mail-card-foot { display: flex; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line-soft); margin-top: auto; }
.mail-card-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all .15s ease; }
.mail-card-btn svg { width: 14px; height: 14px; stroke-width: 1.8; }
.mail-card-btn.ghost { border: 1px solid var(--line); background: var(--bg-card); color: var(--ink); }
.mail-card-btn.ghost:hover { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }
.mail-card-btn.primary { border: 1px solid var(--ink); background: var(--ink); color: var(--bg); }
.mail-card-btn.primary:hover { background: var(--accent); border-color: var(--accent); }

/* CLIENTS */
.client-list { background: var(--bg-card); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.client-row { display: grid; grid-template-columns: 60px 2fr 1.5fr 1fr 1fr 100px; gap: 20px; padding: 18px 24px; border-top: 1px solid var(--line-soft); align-items: center; }
.client-row:first-child { border-top: 0; }
.client-row:hover { background: var(--line-soft); }
.client-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-bg); color: var(--accent); display: flex; align-items: center; justify-content: center; font-family: var(--app-sans); font-weight: 500; }
.client-name { font-family: var(--app-sans); font-size: 16px; font-weight: 500; }
.client-email { font-size: 12px; color: var(--ink-mute); margin-top: 2px; }
.client-meta { font-size: 13px; }
.client-meta-label { font-size: 10px; letter-spacing: 0.14em; color: var(--ink-mute); text-transform: uppercase; font-weight: 600; }


/* PHASE 2 ENHANCEMENTS */
.phase-pill { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:100px; border:1px solid var(--line); background:var(--bg-card); color:var(--ink-soft); font-size:12px; font-weight:700; letter-spacing:.04em; }
.logo-mark { width:38px; height:38px; border:1px solid var(--accent-soft); border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:14px; color:var(--accent); font-family:var(--app-sans); font-size:18px; background:var(--accent-bg); }
.lines-row input[type="text"], .lines-row input[type="number"] { width:100%; padding:7px 8px; border:1px solid transparent; border-radius:3px; font-family:inherit; font-size:13px; background:transparent; color:var(--ink); }
.lines-row input:hover { border-color:var(--line); background:var(--bg); }
.lines-row input:focus { outline:none; border-color:var(--accent); background:#fff; }
.lines-row .num { text-align:right; font-feature-settings:'tnum'; }
.lines-row.section { grid-template-columns:1fr 30px; background:var(--line-soft); font-weight:700; color:var(--accent); letter-spacing:.08em; text-transform:uppercase; font-size:11px; }
.lines-row.section input { font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.08em; }
.empty-state { padding:32px; text-align:center; color:var(--ink-mute); font-size:13px; font-style:italic; border-top:1px solid var(--line-soft); }
.lines-actions { display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--line-soft); background:var(--bg); }
.lines-actions .btn { padding:7px 12px; font-size:12px; }
.lines-foot-row.tva { align-items:center; gap:12px; }
.tva-controls { display:flex; gap:8px; align-items:center; }
.tva-controls select, .tva-controls input { padding:6px 8px; border:1px solid var(--line); border-radius:4px; font-family:inherit; font-size:13px; background:#fff; color:var(--ink); }
.tva-controls input { width:78px; display:none; }
.library-card.phase2 { position:sticky; top:24px; max-height:calc(100vh - 48px); display:flex; flex-direction:column; }
.library-toolbar { display:flex; gap:8px; margin-bottom:10px; }
.library-toolbar .btn { flex:1; justify-content:center; padding:7px 10px; font-size:11px; }
.library-list.phase2 { max-height:none; flex:1; padding-right:4px; }
.lib-category { border-top:1px solid var(--line-soft); }
.lib-category:first-child { border-top:0; }
.lib-category-head { width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; border:0; background:transparent; padding:11px 4px; cursor:pointer; color:var(--ink); font-family:inherit; }
.lib-category-title { font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:800; color:var(--accent); text-align:left; }
.lib-category-count { font-family:var(--app-sans); color:var(--ink-mute); font-size:13px; }
.lib-category-body { display:none; flex-direction:column; gap:3px; padding-bottom:8px; }
.lib-category.open .lib-category-body { display:flex; }
.lib-item { align-items:flex-start; border:1px solid transparent; flex-direction:column; }
.lib-item:hover { border-color:var(--accent-soft); }
.lib-item-top { display:flex; justify-content:space-between; gap:8px; width:100%; align-items:flex-start; }
.lib-item-meta { font-size:10px; color:var(--ink-mute); line-height:1.3; margin-top:2px; }
.toast { position: fixed; bottom: 30px; right: 30px; background: var(--ink); color: var(--bg); padding: 14px 20px; border-radius: 6px; font-size: 13px; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,0.2); opacity: 0; transform: translateY(20px); transition: all 0.25s ease; pointer-events: none; z-index: 1000; }
.toast.show { opacity: 1; transform: translateY(0); }



/* PHASE 2.1 — DEVIS / FACTURES / AGENDA FONCTIONNELS */
.btn-clean { border-radius:999px; padding:9px 14px; background:var(--bg-card); border:1px solid var(--line); color:var(--ink); box-shadow:0 4px 16px rgba(26,24,20,.04); }
.btn-clean:hover { border-color:var(--accent); background:var(--accent-bg); color:var(--accent); transform:translateY(-1px); }
.activity-list { display:flex; flex-direction:column; gap:12px; }
.activity-item { display:grid; grid-template-columns:40px 1fr auto; gap:14px; align-items:center; border:1px solid var(--line); background:var(--bg); border-radius:8px; padding:14px; }
.activity-icon { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--accent-bg); color:var(--accent); }
.activity-title { font-weight:800; font-size:13px; margin-bottom:3px; }
.activity-meta { font-size:12px; color:var(--ink-mute); }
.activity-amount { font-family:var(--app-sans); font-size:17px; white-space:nowrap; }
.agenda-toolbar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.agenda-item.editable { cursor:pointer; border-radius:8px; padding:12px; border:1px solid transparent; }
.agenda-item.editable:hover { border-color:var(--accent-soft); background:var(--accent-bg); }
.mini-note { font-size:11px; color:var(--ink-mute); margin-top:10px; line-height:1.45; }

.agenda-list { display:flex; flex-direction:column; gap:10px; }
#agenda-list .agenda-item { display:grid; grid-template-columns:54px minmax(0,max-content) auto; justify-content:start; gap:16px; align-items:center; border:1px solid var(--line-soft); background:var(--bg); border-radius:8px; padding:12px; }
.agenda-actions { display:flex; gap:8px; justify-content:flex-end; align-items:center; }
.agenda-actions .icon-btn { background:var(--bg-card); border:1px solid var(--line); }

/* Mise en forme ciblée — Activité récente + boutons agenda */
#recent-activity-list { gap:10px; }
#recent-activity-list .activity-item {
  grid-template-columns:44px minmax(0, 1fr) 138px;
  gap:16px;
  align-items:center;
  min-height:74px;
  padding:14px 16px;
  border-radius:10px;
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
#recent-activity-list .activity-item:hover {
  border-color:var(--accent-soft);
  background:#fffaf5;
  transform:translateY(-1px);
}
#recent-activity-list .activity-icon {
  width:38px;
  height:38px;
  border-radius:10px;
  flex:0 0 38px;
}
#recent-activity-list .activity-title {
  margin:0 0 4px;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#recent-activity-list .activity-meta {
  line-height:1.3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#recent-activity-list .activity-amount {
  justify-self:stretch;
  min-width:138px;
  text-align:center;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--bg-card);
  color:var(--ink);
  font-size:13px;
  font-weight:800;
  line-height:1;
  overflow:hidden;
  text-overflow:ellipsis;
}
#agenda-list .agenda-item {
  grid-template-columns:54px fit-content(420px) 80px;
  justify-content:start;
}
#agenda-list .agenda-info h5,
#agenda-list .agenda-info p {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.agenda-actions .icon-btn {
  width:34px;
  height:34px;
  border-radius:9px;
  box-shadow:0 1px 0 rgba(26,24,20,.04);
}
.agenda-actions .icon-btn svg { width:15px; height:15px; stroke-width:2.2; }
.agenda-actions .icon-btn:hover {
  background:var(--accent-bg);
  border-color:var(--accent-soft);
  color:var(--accent);
  transform:translateY(-1px);
}
.agenda-actions .icon-btn.danger:hover {
  background:#F5DAD4;
  border-color:#E8B5AC;
  color:var(--danger);
}
.invoice-toolbar { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.invoice-action-row { display:flex; gap:8px; align-items:center; justify-content:flex-end; }
.invoice-type { display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border:1px solid var(--line); border-radius:999px; background:var(--bg); font-size:11px; font-weight:800; color:var(--ink-soft); }
.table tr.clickable-row { cursor:pointer; }
.table tr.clickable-row:hover td { background:var(--accent-bg); }

.invoice-helper { margin-top:14px; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.invoice-helper-item { border:1px solid var(--line); background:var(--bg); border-radius:8px; padding:12px; }
.invoice-helper-label { font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); font-weight:800; margin-bottom:4px; }
.invoice-helper-value { font-family:var(--app-sans); font-size:22px; color:var(--accent); }
.invoice-modal-summary { border:1px solid var(--line); border-radius:8px; background:var(--bg); padding:16px; margin-top:16px; display:grid; gap:8px; }
.invoice-modal-line { display:flex; justify-content:space-between; gap:16px; font-size:13px; }
.invoice-modal-line strong { font-family:var(--app-sans); font-size:18px; }
.invoice-table-card { padding:0; overflow-x:auto; }
.invoice-table { min-width:980px; table-layout:fixed; }
.invoice-table th, .invoice-table td { white-space:nowrap; vertical-align:middle; padding:14px 12px; }
.invoice-table th:nth-child(1), .invoice-table td:nth-child(1) { width:112px; }
.invoice-table th:nth-child(2), .invoice-table td:nth-child(2) { width:155px; }
.invoice-table th:nth-child(3), .invoice-table td:nth-child(3) { width:170px; overflow:hidden; text-overflow:ellipsis; }
.invoice-table th:nth-child(4), .invoice-table td:nth-child(4) { width:210px; overflow:hidden; text-overflow:ellipsis; }
.invoice-table th:nth-child(5), .invoice-table td:nth-child(5) { width:92px; }
.invoice-table th:nth-child(6), .invoice-table td:nth-child(6) { width:125px; text-align:right; }
.invoice-table th:nth-child(7), .invoice-table td:nth-child(7) { width:118px; }
.invoice-table th:nth-child(8), .invoice-table td:nth-child(8) { width:92px; text-align:right; }
.invoice-table .badge, .invoice-table .invoice-type { max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.invoice-action-row { flex-wrap:nowrap; }

/* ─────────────────────────────────────────────
   Phase 2 — Recadrage des pages Factures
   ───────────────────────────────────────────── */
/* La zone principale (grille) doit pouvoir retrecir : sinon les tableaux
   larges (min-width 980) poussent toute la page hors de l'ecran sur les
   laptops. Avec min-width:0, le tableau defile dans sa propre carte. */
.main { min-width: 0; }

/* Factures (encaissements) — 9 colonnes : Ref, Type, Client, Echeance, TTC, Paye, Reste, Statut, Actions */
#factures .invoice-table { min-width: 980px; }
#factures .invoice-table th:nth-child(1), #factures .invoice-table td:nth-child(1) { width: 116px; }
#factures .invoice-table th:nth-child(2), #factures .invoice-table td:nth-child(2) { width: 150px; }
#factures .invoice-table th:nth-child(3), #factures .invoice-table td:nth-child(3) { width: auto; }
#factures .invoice-table th:nth-child(4), #factures .invoice-table td:nth-child(4) { width: 96px; }
#factures .invoice-table th:nth-child(5), #factures .invoice-table td:nth-child(5) { width: 104px; text-align: right; }
#factures .invoice-table th:nth-child(6), #factures .invoice-table td:nth-child(6) { width: 116px; text-align: right; }
#factures .invoice-table th:nth-child(7), #factures .invoice-table td:nth-child(7) { width: 108px; text-align: right; }
#factures .invoice-table th:nth-child(8), #factures .invoice-table td:nth-child(8) { width: 118px; }
#factures .invoice-table th:nth-child(9), #factures .invoice-table td:nth-child(9) { width: 78px; text-align: right; }

/* Factures fournisseur : modele de colonnes dedie a SES 8 colonnes
   (les largeurs globales etaient calees sur le tableau encaissements). */
#factures-fournisseur .invoice-table { min-width: 820px; }
#factures-fournisseur .invoice-table th:nth-child(2),
#factures-fournisseur .invoice-table td:nth-child(2) { width: auto; overflow: hidden; text-overflow: ellipsis; } /* Fournisseur (flexible) */
#factures-fournisseur .invoice-table th:nth-child(3),
#factures-fournisseur .invoice-table td:nth-child(3) { width: 128px; }                    /* Commande */
#factures-fournisseur .invoice-table th:nth-child(4),
#factures-fournisseur .invoice-table td:nth-child(4) { width: 104px; }                    /* Echeance */
#factures-fournisseur .invoice-table th:nth-child(5),
#factures-fournisseur .invoice-table td:nth-child(5) { width: 128px; text-align: right; } /* Montant TTC */
#factures-fournisseur .invoice-table th:nth-child(6),
#factures-fournisseur .invoice-table td:nth-child(6) { width: 118px; text-align: left; }  /* Paiement */
#factures-fournisseur .invoice-table th:nth-child(7),
#factures-fournisseur .invoice-table td:nth-child(7) { width: 64px; text-align: center; } /* Scan */
#factures-fournisseur .invoice-table th:nth-child(8),
#factures-fournisseur .invoice-table td:nth-child(8) { width: 96px; text-align: right; }  /* Actions */


/* SCROLLBAR */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-mute); }


/* PROJETS DETAIL */
.project-card.clickable { cursor:pointer; }
.project-card.clickable .drive-link { pointer-events:none; }
.project-detail { display:none; animation:fadeIn .25s ease; }
.project-detail.show { display:block; }
.project-detail-head { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:24px; }
.project-back { margin-bottom:18px; }
.project-detail-grid { display:grid; grid-template-columns:1.35fr .85fr; gap:24px; align-items:start; }
.progress-wrap { margin:18px 0 8px; }
.progress-top { display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--ink-soft); margin-bottom:8px; font-weight:700; }
.progress-bar { height:8px; border-radius:100px; background:var(--line-soft); overflow:hidden; }
.progress-fill { height:100%; background:var(--accent); border-radius:100px; }
.project-doc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:12px; }
.project-doc { border:1px solid var(--line); background:var(--bg); border-radius:6px; padding:16px; text-decoration:none; color:var(--ink); display:flex; flex-direction:column; gap:10px; transition:all .15s ease; }
.project-doc:hover { border-color:var(--accent); background:var(--accent-bg); color:var(--accent); }
.project-doc svg { width:20px; height:20px; stroke-width:1.8; }
.project-doc-title { font-weight:800; font-size:13px; }
.project-doc-sub { font-size:11px; color:var(--ink-mute); }
.timeline { display:flex; flex-direction:column; gap:12px; margin-top:6px; }
.timeline-item { display:grid; grid-template-columns:22px 1fr; gap:10px; align-items:start; }
.timeline-dot { width:10px; height:10px; border-radius:50%; background:var(--line); margin-top:5px; }
.timeline-item.done .timeline-dot { background:var(--success); }
.timeline-item.current .timeline-dot { background:var(--accent); box-shadow:0 0 0 5px var(--accent-bg); }
.timeline-title { font-size:13px; font-weight:800; }
.timeline-date { font-size:11px; color:var(--ink-mute); margin-top:2px; }
.client-row.has-project { cursor:pointer; }
.client-row.has-project:hover .client-name { color:var(--accent); }

/* MODAL NOUVEAU CLIENT */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(26, 24, 20, 0.42);
  display: none; align-items: center; justify-content: center;
  padding: 24px; z-index: 2000; backdrop-filter: blur(3px);
}
.modal-backdrop.show { display: flex; }
.modal {
  width: min(760px, 100%); background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 24px 80px rgba(0,0,0,.22); overflow: hidden;
  animation: modalIn .2s ease;
}
@keyframes modalIn { from { opacity:0; transform: translateY(10px) scale(.98); } to { opacity:1; transform: translateY(0) scale(1); } }
.modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding:26px 30px 20px; border-bottom:1px solid var(--line); }
.modal-title { font-family:var(--app-sans); font-size:28px; font-weight:400; letter-spacing:-.02em; }
.modal-subtitle { margin-top:6px; color:var(--ink-mute); font-size:13px; }
.modal-close { border:0; background:transparent; color:var(--ink-mute); cursor:pointer; padding:6px; border-radius:4px; }
.modal-close:hover { background:var(--line-soft); color:var(--ink); }
.modal-body { padding:26px 30px; }
.modal-footer { display:flex; justify-content:flex-end; gap:10px; padding:18px 30px 26px; border-top:1px solid var(--line-soft); background:var(--bg); }
.form-row.three { grid-template-columns: 1fr 1fr 1fr; }
.form-field textarea { width:100%; min-height:88px; padding:10px 12px; border:1px solid var(--line); border-radius:4px; font-family:inherit; font-size:14px; background:var(--bg); color:var(--ink); resize:vertical; }
.form-field textarea:focus { outline:none; border-color:var(--accent); }
.field-error { display:none; margin-top:5px; font-size:11px; color:var(--danger); font-weight:600; }
.form-field.invalid input, .form-field.invalid textarea { border-color:var(--danger); }
.form-field.invalid .field-error { display:block; }

.client-row.manageable { grid-template-columns: 52px minmax(230px, 2fr) minmax(150px, 1.05fr) minmax(80px, .62fr) minmax(96px, .72fr) 152px; gap:12px; padding:18px 22px; }
.client-actions { display:flex; gap:6px; justify-content:flex-end; align-items:center; }
.status-select { min-width:100px; padding:6px 24px 6px 10px; border:0; border-radius:100px; font-family:inherit; font-size:11px; font-weight:700; cursor:pointer; appearance:auto; }
.status-select:focus { outline:2px solid var(--accent-soft); outline-offset:2px; }
.status-select.attente { background:#FBF1DC; color:#8A6B1F; }
.status-select.cours { background:var(--accent-bg); color:var(--accent); }
.status-select.relance { background:#F5DAD4; color:#8A3D2F; }
.status-select.signe { background:#E4EEDF; color:#496D3C; }
.status-select.paye { background:var(--line-soft); color:var(--ink-soft); }
.icon-btn { width:30px; height:30px; border:0; background:transparent; border-radius:4px; color:var(--ink-mute); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:all .15s ease; }
.icon-btn:hover { color:var(--accent); background:var(--accent-bg); }
.icon-btn.danger:hover { color:var(--danger); background:#F5DAD4; }
.legal-card { margin-top:24px; background:var(--bg-card); border:1px solid var(--line); border-radius:6px; padding:24px; }
.legal-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:16px; }
.legal-item-label { font-size:10px; letter-spacing:.16em; color:var(--ink-mute); text-transform:uppercase; font-weight:700; margin-bottom:4px; }
.legal-item-value { font-size:13px; color:var(--ink); line-height:1.45; }
@media (max-width: 900px) { .legal-grid { grid-template-columns:1fr 1fr; } .client-row.manageable { grid-template-columns: 44px 1fr; } .client-actions { justify-content:flex-start; grid-column:2; } }



/* PROJECTS MVP SYNC */
.clickable { cursor:pointer; }
.project-card .drive-links { display:none; }
.project-detail.show { display:block; }
.project-detail-toolbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:18px 0 0; }
.progress-edit { display:none !important; grid-template-columns:1fr 82px; gap:12px; align-items:center; margin-top:14px; }
.progress-edit input[type=range] { width:100%; accent-color: var(--accent); }
.progress-edit input[type=number] { width:82px; padding:8px; border:1px solid var(--line); border-radius:4px; font-family:inherit; text-align:right; background:#fff; }
.step-check { display:flex; align-items:flex-start; gap:10px; padding:12px 0; border-top:1px solid var(--line-soft); cursor:pointer; }
.step-check:first-child { border-top:0; }
.step-check input { margin-top:3px; accent-color:var(--accent); }
.step-check.done .timeline-title { text-decoration:line-through; color:var(--ink-mute); }
.project-doc-grid.editable { grid-template-columns:repeat(3,1fr); }
.project-doc { cursor:pointer; }
.project-doc input { display:none; }
.doc-actions { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.doc-chip { border:0; background:var(--line-soft); color:var(--ink-soft); border-radius:100px; padding:4px 8px; font-size:11px; font-weight:700; }
.project-doc-actions { display:flex; gap:8px; margin-top:10px; flex-wrap:nowrap; align-items:center; }
.project-doc > div { flex:1; min-width:0; }
.project-doc-action { border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:4px; padding:7px 10px; font-size:11px; font-weight:800; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:6px; transition:all .15s ease; font-family:inherit; white-space:nowrap; flex:1; min-width:0; }
.project-doc-action:hover { border-color:var(--accent); background:var(--accent-bg); color:var(--accent); }
.project-doc-action svg { width:13px; height:13px; }
.dashboard-project-row { cursor:pointer; }
#dashboard .kpi { cursor:pointer; transition: all .15s ease; }
#dashboard .kpi:hover { background: var(--accent-bg); }
.dashboard-list { display:flex; flex-direction:column; gap:10px; }
.dashboard-list-item { width:100%; border:1px solid var(--line); background:var(--bg); border-radius:6px; padding:14px; display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center; text-align:left; cursor:pointer; font-family:inherit; color:var(--ink); }
.dashboard-list-item:hover { border-color:var(--accent); background:var(--accent-bg); }
.dashboard-list-title { font-family:var(--app-sans); font-size:17px; font-weight:500; margin-bottom:3px; }
.dashboard-list-meta { font-size:12px; color:var(--ink-mute); }
.dashboard-list-action { font-size:12px; font-weight:800; color:var(--accent); }
.dashboard-project-row:hover { background:var(--line-soft); }


.finance-card { grid-column: 1 / -1; }
.dashboard-list-meta { line-height: 1.45; }
.project-card .project-meta-value { text-align:right; }



/* ACTIVITÉ RÉCENTE — version premium simple, CSS uniquement */
#dashboard .col-2 .card:first-child {
  overflow:hidden;
}
#dashboard .col-2 .card:first-child .card-head {
  margin-bottom:18px;
}
#dashboard .col-2 .card:first-child .project-row,
#dashboard .col-2 .card:first-child .activity-item {
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) 132px !important;
  gap:14px !important;
  align-items:center !important;
  min-height:54px !important;
  padding:12px 14px !important;
  margin:0 0 8px 0 !important;
  border:1px solid var(--line-soft) !important;
  border-radius:12px !important;
  background:var(--bg) !important;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
#dashboard .col-2 .card:first-child .project-row:hover,
#dashboard .col-2 .card:first-child .activity-item:hover {
  background:#fffaf5 !important;
  border-color:var(--accent-soft) !important;
  transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(26,24,20,.06);
}
#dashboard .col-2 .card:first-child .project-info,
#dashboard .col-2 .card:first-child .activity-item > div:nth-child(2) {
  min-width:0;
}
#dashboard .col-2 .card:first-child .project-info h4,
#dashboard .col-2 .card:first-child .activity-title {
  margin:0 !important;
  font-family:inherit !important;
  font-size:14px !important;
  font-weight:800 !important;
  line-height:1.2 !important;
  color:var(--ink) !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#dashboard .col-2 .card:first-child .project-info p,
#dashboard .col-2 .card:first-child .activity-meta,
#dashboard .col-2 .card:first-child .activity-icon {
  display:none !important;
}
#dashboard .col-2 .card:first-child .badge,
#dashboard .col-2 .card:first-child .activity-amount {
  width:100% !important;
  min-width:0 !important;
  height:30px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 12px !important;
  border-radius:999px !important;
  border:1px solid var(--line) !important;
  background:var(--bg-card) !important;
  color:var(--ink-soft) !important;
  font-size:11px !important;
  font-weight:800 !important;
  letter-spacing:.02em !important;
  line-height:1 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  text-align:center !important;
}
#dashboard .col-2 .card:first-child .badge.cours,
#dashboard .col-2 .card:first-child .badge.signe,
#dashboard .col-2 .card:first-child .badge.attente,
#dashboard .col-2 .card:first-child .badge.relance {
  border-color:transparent !important;
}
#dashboard .col-2 .card:first-child .badge-dot {
  flex:0 0 6px;
}
#dashboard .col-2 .card:first-child .project-amount {
  width:100% !important;
  height:30px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 12px !important;
  border-radius:999px !important;
  border:1px solid var(--line) !important;
  background:var(--bg-card) !important;
  color:var(--accent) !important;
  font-family:inherit !important;
  font-size:12px !important;
  font-weight:800 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
@media (max-width: 980px) {
  #dashboard .col-2 .card:first-child .project-row,
  #dashboard .col-2 .card:first-child .activity-item {
    grid-template-columns:minmax(0, 1fr) 112px !important;
  }
  #dashboard .col-2 .card:first-child .project-amount,
  #dashboard .col-2 .card:first-child .activity-amount { display:none !important; }
}


/* Phase 2.12 — Devis : champs de saisie plus confortables */
.lines-row input[type="text"], .lines-row input[type="number"] {
  min-height: 34px;
}
.lines-row input:focus {
  border-color: var(--accent) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(184,101,74,.10);
}

/* --- Bloc CSS extrait du mockup --- */

body{font-family:Arial,sans-serif;color:#1A1814;margin:40px;background:#fff} h1{font-family:Georgia,serif;font-weight:400;font-size:34px;margin:0 0 8px}.muted{color:#777;font-size:13px}.head{display:flex;justify-content:space-between;border-bottom:1px solid #ddd;padding-bottom:22px;margin-bottom:28px}.brand{font-family:Georgia,serif;letter-spacing:.18em;font-size:24px}table{width:100%;border-collapse:collapse;margin-top:24px}th{font-size:11px;text-transform:uppercase;letter-spacing:.12em;text-align:left;border-bottom:1px solid #ddd;padding:10px}td{border-bottom:1px solid #eee;padding:12px 10px;font-size:13px} .right{text-align:right}.total{margin-top:24px;text-align:right;font-family:Georgia,serif;font-size:26px}.actions{position:fixed;right:24px;bottom:24px}@media print{.actions{display:none}body{margin:24px}}
  
/* Phase 2.12 — Devis : champs de saisie plus confortables */
.lines-row input[type="text"], .lines-row input[type="number"] {
  min-height: 34px;
}
.lines-row input:focus {
  border-color: var(--accent) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(184,101,74,.10);
}

/* --- Bloc CSS extrait du mockup --- */

body{font-family:Arial,sans-serif;color:#1A1814;margin:40px;background:#fff} h1{font-family:Georgia,serif;font-weight:400;font-size:34px;margin:0 0 8px}.muted{color:#777;font-size:13px}.head{display:flex;justify-content:space-between;border-bottom:1px solid #ddd;padding-bottom:22px;margin-bottom:28px}.brand{font-family:Georgia,serif;letter-spacing:.18em;font-size:24px}table{width:100%;border-collapse:collapse;margin-top:24px}th{font-size:11px;text-transform:uppercase;letter-spacing:.12em;text-align:left;border-bottom:1px solid #ddd;padding:10px}td{border-bottom:1px solid #eee;padding:12px 10px;font-size:13px} .right{text-align:right}.total{margin-top:24px;text-align:right;font-family:Georgia,serif;font-size:26px}.actions{position:fixed;right:24px;bottom:24px}@media print{.actions{display:none}body{margin:24px}}
  
/* PROJECTS: suppression visuelle des pourcentages/jauges d'avancement, sans modifier les boutons */
#projects .progress-wrap, #projects .progress-edit { display: none !important; }

/* Phase 2.12 — Projets : suppression complète des jauges orange, sans impact sur les boutons */
#projets .progress-wrap,
#projets .progress-edit,
#projets .progress-bar,
#projets .progress-fill {
  display: none !important;
}


/* Phase 2.12 — Devis : champs de saisie plus confortables */
.lines-row input[type="text"], .lines-row input[type="number"] {
  min-height: 34px;
}
.lines-row input:focus {
  border-color: var(--accent) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(184,101,74,.10);
}

.nav a.nav-item {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav a.nav-item:visited {
  color: inherit;
}

.nav a.nav-item {
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
  padding: 12px 14px;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav a.nav-item:hover,
.nav a.nav-item.active {
  background: rgba(255, 255, 255, 0.08);
}

.premium-project-card {
  background: #fff;
  border: 1px solid #ece4d8;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: 0.25s ease;
}

.premium-project-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
  border-color: var(--accent);
}

.project-card-body {
  padding: 22px;
}

.project-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.project-client {
  font-size: 14px;
  color: #8b7355;
}

.project-statut-badge {
  text-transform: capitalize;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent-bg);
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
}

.project-title {
  font-size: 26px;
  margin-bottom: 18px;
  font-family: "Fraunces", serif;
}

.project-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #5c5246;
  font-size: 14px;
  margin-bottom: 22px;
}

.project-info div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.project-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.project-actions {
  position: relative;
}

.project-menu {
  display: none;
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  min-width: 170px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.10);
  padding: 6px;
  z-index: 50;
  flex-direction: column;
}

.project-menu.active {
  display: flex;
}

.project-menu a,
.project-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: none;
  background: none;
  font-size: 14px;
  color: var(--ink);
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
}

.project-menu a:hover,
.project-menu button:hover {
  background: var(--accent-bg);
  color: var(--accent);
}

.project-menu button {
  color: #c0392b;
}

.project-menu button:hover {
  background: #fbe9e7;
  color: #c0392b;
}
/* ── Pagination projets ── */
.project-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 32px 0 8px;
}
.project-pagination .page-btn {
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-soft);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
}
.project-pagination .page-btn:hover:not(.disabled):not(.active) {
  border-color: var(--accent);
  color: var(--accent);
}
.project-pagination .page-btn.active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  font-weight: 600;
}
.project-pagination .page-btn.nav {
  font-size: 18px;
  line-height: 1;
  color: var(--ink-soft);
}
.project-pagination .page-btn.disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ── Barre de recherche clients ── */
.client-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 16px;
  margin-bottom: 20px;
  transition: border-color 0.15s ease;
}
.client-search-bar:focus-within {
  border-color: var(--accent);
}
.client-search-bar svg {
  width: 18px;
  height: 18px;
  color: var(--ink-mute);
  flex-shrink: 0;
}
.client-search-bar input {
  flex: 1;
  border: none;
  outline: none;
  background: none;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
}
.client-search-bar input::placeholder {
  color: var(--ink-mute);
}

/* ════ ONGLET DEVIS — refonte esthétique (hors bibliothèque) ════ */
#devis .builder-main {
  border-radius: 14px;
  padding: 30px 32px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
#devis .form-field input,
#devis .form-field select {
  border-radius: 8px;
  padding: 11px 13px;
  transition: border-color .15s, box-shadow .15s;
}
#devis .form-field input:focus,
#devis .form-field select:focus {
  box-shadow: 0 0 0 3px var(--accent-bg);
}
#devis .form-row { gap: 18px; margin-bottom: 18px; }

/* Tableau des lignes */
#devis .lines-table {
  border-radius: 12px;
  border-color: var(--line);
  margin-top: 28px;
}
#devis .lines-head {
  background: var(--accent-bg);
  color: var(--accent);
  font-weight: 700;
  padding: 13px 16px;
}
#devis .lines-row { padding: 13px 16px; transition: background .12s; align-items: center; }
#devis .lines-row:hover { background: var(--bg); }
/* Tous les champs de la ligne à la même hauteur et alignés */
#devis .lines-row input[type="text"],
#devis .lines-row input[type="number"] {
  height: 38px;
  padding: 8px 10px;
  font-size: 14px;
  display: flex;
  align-items: center;
}
/* Champs numériques (qté, unité, PU) alignés à droite comme les en-têtes */
#devis .lines-row input.num { text-align: right; }
#devis .lines-head { align-items: center; }
/* La cellule Total HT : même hauteur, centrée verticalement, alignée à droite */
#devis .lines-row .total {
  font-family: var(--app-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
/* Le bouton supprimer centré sur la ligne */
#devis .lines-row .delete-btn {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#devis .lines-actions { padding: 14px 16px; gap: 10px; }

/* Bloc des totaux — élégant */
#devis .lines-foot {
  padding: 20px 18px;
  background: linear-gradient(180deg, #FCFAF6, #F8F3EB);
  gap: 10px;
}
#devis .lines-foot-row { font-size: 14px; color: var(--ink-soft); }
#devis .lines-foot-row.total {
  background: var(--ink);
  color: #fff;
  margin: 10px -18px -20px;
  padding: 18px 18px;
  border-top: none;
  border-radius: 0 0 12px 12px;
  align-items: center;
}
#devis .lines-foot-row.total span:last-child { color: var(--gold); }

/* Barre d'actions du bas (s'applique aussi a la page de creation de devis) */
#devis .devis-actions-bar, #devis-creation .devis-actions-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}

/* ════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM v2 — Refonte premium (placé en fin de fichier : priorité
   par ordre source). N'efface aucune règle ; affine l'existant.
   ════════════════════════════════════════════════════════════════════ */

/* Base — neutralise le body "Arial/margin:40px" résiduel du mockup */
html, body { margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--app-sans); }

/* Densité & largeur de contenu (moins de vide, plus efficace) */
.main { padding: 30px 44px 72px; max-width: 1520px; }
.page-head { margin-bottom: 26px; padding-bottom: 18px; align-items: center; }
.page-title { font-size: 30px; letter-spacing: -0.02em; line-height: 1.1; }
.page-eyebrow { margin-bottom: 7px; letter-spacing: 0.2em; }

/* Sidebar premium */
.layout { grid-template-columns: 248px 1fr; }
.sidebar { padding: 24px 16px; }
.brand { margin-bottom: 26px; }
.brand-img { width: 116px; }
.nav-item { padding: 9px 12px; font-size: 13.5px; border-radius: 8px; font-weight: 500; }
.nav-item svg { width: 17px; height: 17px; opacity: .8; }
.nav-item:hover svg { opacity: 1; }
.nav-item.active { box-shadow: 0 8px 18px -10px rgba(26,24,20,.55); }
.nav-item.active svg { opacity: 1; }
.nav-label { margin-top: 18px; padding: 0 12px 7px; font-size: 10px; letter-spacing: 0.16em; }

/* Boutons — système cohérent */
.btn { height: 38px; padding: 0 15px; border-radius: 8px; font-size: 13px;
  font-weight: 600; line-height: 1; transition: all .14s ease; white-space: nowrap; }
.btn svg { width: 15px; height: 15px; }
.btn-primary { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.10); }
.btn-primary:hover { background: #000; box-shadow: 0 6px 16px -6px rgba(0,0,0,.45); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(0,0,0,.10); }
.btn-ghost { background: var(--bg-card); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink-soft); background: var(--bg-card); transform: translateY(-1px); }
.btn-clean { background: transparent; color: var(--ink-soft); border-color: transparent; }
.btn-clean:hover { background: var(--line-soft); color: var(--ink); }
.btn-danger, .btn-destructive { background: transparent; color: var(--danger); border-color: transparent; }
.btn-danger:hover, .btn-destructive:hover { background: #FBEAE6; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Icon-button — actions discrètes (tableaux) */
.icon-btn { width: 32px; height: 32px; min-width: 32px; padding: 0; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; background: transparent; color: var(--ink-mute);
  cursor: pointer; transition: all .14s ease; }
.icon-btn:hover { background: var(--line-soft); color: var(--ink); }
.icon-btn.danger { color: var(--ink-mute); }
.icon-btn.danger:hover { background: #FBEAE6; color: var(--danger); }
.icon-btn svg { width: 15px; height: 15px; }

/* Cartes — ombre très subtile */
.card { border-radius: 10px; box-shadow: 0 1px 2px rgba(26,24,20,.04); }

/* Tableaux premium — plus denses, lisibles */
.table th { padding: 10px 14px; font-size: 10px; letter-spacing: 0.12em; background: var(--bg); }
.table td { padding: 13px 14px; font-size: 13.5px; vertical-align: middle; }
.table tr { transition: background .12s ease; }
.table tbody tr:hover { background: var(--accent-bg); }
.table .num-col, .table td.num-col, .table th.num-col { text-align: right; font-variant-numeric: tabular-nums; }
.table .actions-col, .table th.actions-col { text-align: right; white-space: nowrap; }
.table td strong { font-variant-numeric: tabular-nums; }

/* Badges — palette de statut cohérente (pastilles propres, sans point) */
.badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 7px;
  font-size: 11px; font-weight: 600; letter-spacing: .01em; line-height: 1.4;
  border: 1px solid transparent; white-space: nowrap; }
.badge .badge-dot { display: none; }
.badge.gris, .badge.brouillon, .badge.archive,
.badge.paye { background: var(--line-soft); color: var(--ink-soft); }            /* fournisseur "paye" = neutre ici, override plus bas */
.badge.vert, .badge.signe, .badge.accepte, .badge.encaisse, .badge.encaisse2,
.badge.termine, .badge.livre, .badge.payee { background: #E4EEDF; color: #41663A; }
.badge.bleu, .badge.envoye { background: #E7EEF6; color: #355E88; }
.badge.orange, .badge.cours, .badge.partiel, .badge.attente { background: #FBEEDC; color: #94601C; }
.badge.rouge, .badge.relance, .badge.impaye, .badge.retard { background: #F8E3DE; color: #97382A; }
.badge.violet, .badge.planifie, .badge.venir { background: #EEE8F4; color: #66498A; }
/* "Payée"/"Encaissée" = vert (prioritaire sur le neutre) */
.badge.vert { background: #E4EEDF; color: #41663A; }

/* Champs de formulaire — focus cohérent */
.form-field input, .form-field select, .form-field textarea { transition: border-color .14s ease, box-shadow .14s ease; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(184,101,74,.10); }

/* Dashboard "page d'action" (Phase B) */
.kpi.kpi-alert { box-shadow: inset 3px 0 0 var(--danger); }
.kpi.kpi-alert .kpi-value { color: var(--danger); }
/* Montant/echeance urgent -> pastille rouge, y compris dans "A traiter cette semaine"
   (qui force sinon color/border en !important sur .activity-amount). */
.activity-amount.relance-amount,
#dashboard .col-2 .card:first-child .activity-amount.relance-amount {
  color: var(--danger) !important; background: #F8E3DE !important; border-color: var(--danger) !important;
}
@media (min-width: 1100px) { .kpi-grid.kpi-6 { grid-template-columns: repeat(3, 1fr); } }

/* Kanban metier (Phase D) — cartes propres (le repeat(6) est sur la regle de base) */
.kan-card { display:block; text-decoration:none; color:inherit; }
.kan-card-client { font-size:10px; color:var(--ink-mute); letter-spacing:.06em; text-transform:uppercase; font-weight:600; }
.kan-card-name { font-size:13.5px; font-weight:600; margin:3px 0 8px; line-height:1.3; }
.kan-card-row { display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:12px; }
.kan-card-ref { color:var(--ink-mute); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kan-card-amount { font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.kan-bar { height:4px; border-radius:99px; background:var(--line-soft); overflow:hidden; margin:10px 0 4px; }
.kan-bar-fill { height:100%; background:linear-gradient(90deg,var(--gold),var(--accent)); border-radius:99px; }
.kan-card-foot { font-size:10px; color:var(--ink-mute); font-variant-numeric:tabular-nums; }
.kan-card-cta { display:none; align-items:center; gap:4px; font-size:11px; color:var(--accent); font-weight:600; margin-top:8px; }
.kan-card:hover .kan-card-cta { display:inline-flex; }
.kan-empty { font-size:12px; color:var(--ink-mute); padding:6px 2px; }
/* Drag & drop (P3) */
.kan-card { cursor: grab; }
.kan-card:active { cursor: grabbing; }
.kan-card.dragging { opacity: .45; }
.kan-col.dragover { background: var(--accent-bg); outline: 2px dashed var(--accent); outline-offset: -2px; border-radius: 8px; }
/* 6 colonnes uniquement >=1101px ; en dessous, la media query (max-width:1100px) reprend
   la main (defilement horizontal). Placee apres tout pour gagner en ordre source. */
@media (min-width: 1101px) { .kanban { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Coherence finale (Phase E) */
.badge.cap { text-transform: capitalize; }
.fac-paye-input { width: 92px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; font-size: 13px; text-align: right; box-sizing: border-box; }

/* ════════════════════════════════════════════════════════════════════
   PREMIUM REFRESH v2 — palette, boutons, cartes, sidebar, animations
   (override par ordre source ; aucune variable existante renommee)
   ════════════════════════════════════════════════════════════════════ */
:root {
  --bg: #F8F6F2;
  --ink: #161616;
  --ink-mute: #8F8880;
  --accent: #B86B4B;
  --accent-dark: #8F4F34;
  --line: #E6DDD4;
  --success: #5F8A57;
  --danger: #B85C48;
  /* Alias forward-compat (memes valeurs, noms du brief) */
  --card: var(--bg-card);
  --text: var(--ink);
  --muted: var(--ink-mute);
  --primary: var(--accent);
  --primary-dark: var(--accent-dark);
  --border: var(--line);
}

/* Boutons premium : 42px, rayon 12px, hover translateY, ombre douce, focus */
.btn { height: 42px; border-radius: 12px; padding: 0 18px; gap: 9px; box-shadow: 0 1px 2px rgba(22,22,22,.05); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); box-shadow: 0 9px 22px -7px rgba(184,107,75,.55); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.icon-btn { border-radius: 9px; }

/* Cartes premium : bordure fine, ombre legere, hover subtil */
.card { border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 1px 3px rgba(22,22,22,.04);
  transition: box-shadow .25s ease, border-color .25s ease; }
.card:hover { box-shadow: 0 12px 32px -16px rgba(22,22,22,.20); border-color: var(--line); }

/* Sidebar : actif net + meilleur espacement vertical */
.nav { gap: 3px; }
.nav-item { border-radius: 10px; padding: 10px 12px; }
.nav-item.active { background: var(--ink); color: #fff; box-shadow: 0 8px 18px -10px rgba(22,22,22,.6); }
.nav-label { margin-top: 22px; }

/* Apparition douce des cartes / KPI a l'affichage d'une page */
@keyframes anteaCardIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.page.active .card, .page.active .kpi { animation: anteaCardIn .28s ease both; }
.kpi { transition: background .15s ease, box-shadow .25s ease; }

/* ════════════════════════════════════════════════════════════
   SLIDE PANEL — détail chantier (P4, style Notion / Linear)
   ════════════════════════════════════════════════════════════ */
.proj-panel-overlay{ position:fixed; inset:0; background:rgba(22,22,22,.30);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  opacity:0; transition:opacity .28s ease; z-index:1200; }
.proj-panel-overlay.show{ opacity:1; }
.proj-panel{ position:fixed; top:0; right:0; height:100vh; width:min(940px,92vw); max-width:92vw;
  background:var(--bg,#F8F6F2); box-shadow:-18px 0 60px rgba(22,22,22,.18);
  transform:translateX(100%); transition:transform .34s cubic-bezier(.22,.61,.36,1);
  z-index:1201; display:flex; flex-direction:column; }
.proj-panel.open{ transform:translateX(0); }
.proj-panel-bar{ display:flex; align-items:center; justify-content:flex-end; gap:6px;
  padding:12px 18px; border-bottom:1px solid var(--border,var(--line,#E6DDD4));
  background:var(--card,#fff); flex-shrink:0; }
.proj-panel-bar .proj-panel-close,
.proj-panel-bar .proj-panel-expand{ width:36px; height:36px; border-radius:9px;
  border:1px solid var(--border,var(--line,#E6DDD4)); background:var(--card,#fff);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  color:var(--muted,var(--ink-mute,#8F8880)); transition:all .15s; text-decoration:none; }
.proj-panel-bar .proj-panel-close:hover,
.proj-panel-bar .proj-panel-expand:hover{ color:var(--text,var(--ink,#161616));
  border-color:var(--text,var(--ink,#161616)); }
.proj-panel-bar svg{ width:18px; height:18px; }
.proj-panel-body{ flex:1; overflow-y:auto; overflow-x:hidden; padding:26px 30px 64px; }
.proj-panel-body .page-head{ margin-top:0; }
/* En panneau étroit : on empile pour un confort de lecture vertical */
.proj-panel-body .detail-grid{ grid-template-columns:1fr; }
.proj-panel-body .cmd-grid{ grid-template-columns:repeat(2,1fr); }
/* "Retour" est redondant dans le panneau (X / Échap / clic-extérieur ferment déjà) */
.proj-panel-body .cockpit-back{ display:none; }
.proj-panel-loading{ display:flex; align-items:center; gap:10px; justify-content:center;
  padding:90px 0; color:var(--muted,var(--ink-mute,#8F8880)); font-size:14px; }
.proj-panel-loading .spinner{ width:18px; height:18px; border-radius:50%;
  border:2px solid var(--border,var(--line,#E6DDD4)); border-top-color:var(--primary,var(--accent,#B86B4B));
  animation:anteaSpin .7s linear infinite; }
@keyframes anteaSpin{ to{ transform:rotate(360deg); } }
@media (max-width:600px){
  .proj-panel{ width:100vw; max-width:100vw; }
  .proj-panel-body{ padding:18px 16px 52px; }
  .proj-panel-body .cmd-grid{ grid-template-columns:1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   IDENTITÉ — titres éditoriaux en serif (Fraunces), alignés sur la façade.
   Les chiffres et données restent en Inter (lisibilité + tnum).
   ════════════════════════════════════════════════════════════════════ */
.page-title,
.display,
.card-title,
.modal-title,
.dashboard-list-title,
.agenda-day {
  font-family: var(--app-serif);
  letter-spacing: 0;
}
.page-title { font-weight: 500; }
.card-title { font-weight: 500; }
.modal-title { font-weight: 500; }

/* ════════════════════════════════════════════════════════════════════
   IDENTITÉ (étape 2) — rayons adoucis, cohérence avec la façade.
   Surfaces/cartes ~14px, modales 16px, contrôles ~10px. Override source.
   ════════════════════════════════════════════════════════════════════ */
.card,
.kpi-grid,
.project-card,
.builder-main,
.library-card,
.kan-col,
.mail-card,
.client-list,
.project-doc,
.legal-card,
.lines-table {
  border-radius: 14px;
}
.modal { border-radius: 16px; }
.nav-item,
.form-field input,
.form-field select,
.form-field textarea,
.library-search,
.lib-item,
.kan-card,
.drive-link,
.mail-icon,
.mail-card-btn,
.tva-controls select,
.tva-controls input,
.progress-edit input[type=number],
.project-doc-action,
.dashboard-list-item,
.toast {
  border-radius: 10px;
}

/* ════════════════════════════════════════════════════════════════════
   IDENTITÉ (étape 3) — cartes KPI aérées : tuiles séparées au lieu d'une
   grille à traits internes facon tableur. Plus premium, comme la façade.
   ════════════════════════════════════════════════════════════════════ */
.kpi-grid {
  gap: 16px;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}
.kpi {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(22, 22, 22, .04);
  transition: box-shadow .18s ease, transform .18s ease;
}
.kpi:hover {
  box-shadow: 0 10px 28px -16px rgba(33, 28, 22, .35);
  transform: translateY(-2px);
}

/* Surlignage temporaire d'une ligne ciblée (clic depuis "À traiter") */
.facture-client-row td { transition: background .4s ease; }
tr.row-highlight td { background: var(--accent-bg); }

/* Agenda "Cette semaine" : 2 rendez-vous par ligne (plus compact). */
#agenda-list { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
#agenda-list > p, #agenda-list .mini-note { grid-column:1 / -1; }
#agenda-list .agenda-item { grid-template-columns:54px minmax(0,1fr) auto; justify-content:stretch; }
@media (max-width:820px) { #agenda-list { grid-template-columns:1fr; } }

/* ════════════════════════════════════════════════════════════════════
   PAGE PROJETS — cartes uniformes, mini-timeline, pastilles d'icônes
   ════════════════════════════════════════════════════════════════════ */
/* Cartes de hauteur égale + pied épinglé en bas (Voir le projet | •••) */
#projets .project-card { display:flex; flex-direction:column; }
#projets .project-card-body { display:flex; flex-direction:column; flex:1; }
/* Titre à hauteur fixe (2 lignes) -> les 3 lignes d'infos (n° / devis / adresse)
   commencent au MÊME niveau sur toutes les cartes (fixes, alignées). La barre
   d'avancement (+ le pied) reste ancrée en bas, le gap variable est entre les
   deux. */
#projets .project-title { min-height:66px; line-height:1.25; display:flex; align-items:center; }
#projets .project-progress { margin-top:auto; }
#projets .project-card-footer { padding-top:16px; border-top:1px solid var(--line-soft); }

/* Icônes "infos" en pastilles */
#projets .project-info > div { gap:11px; align-items:center; }
#projets .project-info > div > i,
#projets .project-info > div > svg { flex:0 0 28px; width:28px; height:28px; padding:6px; border-radius:9px; background:var(--accent-bg); color:var(--accent); box-sizing:border-box; }

/* Mini-timeline d'avancement (5 étapes) sur chaque carte */
#projets .mini-stepper { display:flex; align-items:flex-start; margin-top:8px; }
#projets .mini-step { flex:1; display:flex; flex-direction:column; align-items:center; position:relative; }
#projets .mini-step .ms-line { position:absolute; top:9px; left:-50%; width:100%; height:2px; background:var(--line-soft); z-index:0; }
#projets .mini-step.done .ms-line, #projets .mini-step.active .ms-line { background:var(--accent); }
#projets .mini-step .ms-dot { width:20px; height:20px; border-radius:50%; background:var(--bg-card); border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; z-index:1; }
#projets .mini-step .ms-dot svg { width:11px; height:11px; color:var(--ink-mute); }
#projets .mini-step.done .ms-dot { background:var(--accent); border-color:var(--accent); }
#projets .mini-step.done .ms-dot svg { color:#fff; }
#projets .mini-step.active .ms-dot { border:2px solid var(--accent); background:var(--accent-bg); }
#projets .mini-step.active .ms-dot svg { color:var(--accent); }
#projets .mini-step .ms-label { font-size:9px; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-mute); margin-top:5px; line-height:1.1; text-align:center; }
#projets .mini-step.done .ms-label, #projets .mini-step.active .ms-label { color:var(--ink-soft); }

/* Pagination : flèches parfaitement centrées */
.project-pagination .page-btn { display:inline-flex; align-items:center; justify-content:center; }