/* =============================================================================
   E-LOGICIELS NOUVELLE GENERATION — Design system
   Palette moderne, sobre, professionnelle (bleu ardoise + accents verts/ambre)
   ========================================================================== */


:root{
  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface-2: #f8f9fc;
  --border: #e4e8f0;
  --text: #1c2333;
  --text-muted: #667085;
  --text-faint: #98a2b3;
  --primary: #3452e1;
  --primary-dark: #2540c4;
  --primary-soft: #eaeeff;
  --green: #17845a;
  --green-soft: #e5f7ee;
  --amber: #b5720b;
  --amber-soft: #fdf1dc;
  --red: #c4293a;
  --red-soft: #fbe6e8;
  --grey: #5b6472;
  --grey-soft: #eef0f4;
  --blue: #2568c8;
  --blue-soft: #e6f0fd;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 3px rgba(20,25,45,.07), 0 1px 2px rgba(20,25,45,.04);
  --shadow-md: 0 8px 24px rgba(20,25,45,.10), 0 2px 6px rgba(20,25,45,.06);
  --shadow-lg: 0 24px 56px rgba(20,25,45,.20), 0 6px 16px rgba(20,25,45,.10);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.6);
  --sidebar-w: 254px;
}

*, *::before, *::after{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin:0;
  font-family: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  background:
    radial-gradient(1100px 520px at 100% -10%, rgba(52,82,225,.07), transparent 60%),
    radial-gradient(900px 420px at -10% 0%, rgba(23,132,90,.05), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#root{ height: 100%; }
h1,h2,h3,h4{ margin: 0; font-weight: 700; letter-spacing: -0.015em; }
button{ font-family: inherit; }
input, select, textarea{ font-family: inherit; font-size: 14px; }
a{ text-decoration: none; color: inherit; }

/* ---------------------------------------------------------------- SHELL */
.app-shell{ display:flex; min-height:100vh; }

.sidebar{
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: linear-gradient(180deg, #1a2140 0%, #12172c 55%, #0a0e1c 100%);
  color: #cfd6ee;
  padding: 20px 12px 16px;
  display:flex; flex-direction:column;
  overflow-y:auto;
  box-shadow: 6px 0 24px rgba(5,7,16,.25);
  position: relative; z-index: 5;
}
.sidebar-logo{
  font-size: 17px; font-weight: 800; color: #fff;
  padding: 6px 10px 22px; display:flex; align-items:center; gap:8px; letter-spacing: -0.02em;
}
.nav-group{ margin-top: 16px; }
.nav-group-title{
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  color: #6c78a1; padding: 0 10px 7px; font-weight: 700;
}
.nav-subgroup-title{
  margin-top: 10px; padding-left: 20px; font-size: 9.5px; color: #545f85;
}
.nav-link{
  display:block; padding: 9px 12px; border-radius: var(--radius-sm);
  font-size: 13.5px; color: #cfd6ee; margin-bottom: 2px;
  transition: background .12s, color .12s, transform .08s;
}
.nav-link:hover{ background: rgba(255,255,255,.07); color:#fff; }
.nav-link.active{ background: var(--primary); color:#fff; font-weight: 650; box-shadow: 0 4px 14px rgba(52,82,225,.45); }
.sidebar-role{
  margin-top: auto; padding: 12px 10px 4px; font-size: 11.5px; color: #8b96bc; border-top: 1px solid rgba(255,255,255,.08);
}
.sidebar-role b{ color: #cfd6ee; }

.main-col{ flex:1; min-width:0; display:flex; flex-direction:column; }

.topbar{
  height: 64px; flex: 0 0 64px;
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 26px; background: rgba(255,255,255,.82); backdrop-filter: blur(10px); border-bottom:1px solid var(--border);
  gap: 10px; position: sticky; top:0; z-index: 20;
  box-shadow: 0 2px 10px rgba(20,25,45,.04);
}
.topbar-home{ font-weight: 750; font-size: 14.5px; color: var(--text); letter-spacing: -0.01em; }
.topbar-home:hover{ color: var(--primary); }
.topbar-user{ display:flex; align-items:center; gap:10px; }
.user-chip{ display:flex; align-items:center; gap:10px; padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--surface-2); }
.user-avatar{
  width:32px; height:32px; border-radius:50%; background: linear-gradient(135deg, var(--primary), #6b8afd); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex-shrink:0;
}
.user-name{ font-size: 13px; font-weight: 650; line-height:1.2; }
.user-role{ font-size: 11.5px; color: var(--text-muted); line-height:1.2; }

.content{ padding: 26px 30px 60px; flex:1; }
.page{ max-width: 1180px; }
.page-header{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-bottom: 18px; flex-wrap: wrap;
}
.page-header h1{ font-size: 22px; }
.page-sub{ color: var(--text-muted); margin: -10px 0 20px; font-size: 13.5px; }
.back-link{ display:inline-block; margin-bottom: 12px; color: var(--primary); font-size: 13px; font-weight: 650; }
.back-link:hover{ text-decoration: underline; }

/* ---------------------------------------------------------------- CARD */
.card{
  background: linear-gradient(180deg, #ffffff, #fcfdff);
  border:1px solid var(--border); border-radius: var(--radius);
  padding: 20px 22px; box-shadow: var(--shadow-sm), var(--shadow-inset); margin-bottom: 16px;
  transition: box-shadow .15s, transform .15s;
}

/* ------------------------------------------------------------ EMPTY STATE */
.empty-state{
  background: var(--surface); border:1px dashed var(--border); border-radius: var(--radius);
  padding: 48px 24px; text-align:center; color: var(--text-muted);
}
.empty-state-icon{ font-size: 34px; margin-bottom: 10px; }
.empty-state h2{ color: var(--text); margin-bottom: 8px; }

/* ---------------------------------------------------------------- TABLE */
.table-wrap{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  overflow: auto; box-shadow: var(--shadow-sm);
}
.data-table{ width:100%; border-collapse: collapse; font-size: 13.5px; }
.data-table th{
  text-align:left; font-size: 11px; text-transform: uppercase; letter-spacing:.05em;
  color: var(--text-muted); font-weight: 700; padding: 12px 14px; border-bottom:1px solid var(--border);
  background: var(--surface-2); white-space: nowrap;
}
.data-table th.sortable{ cursor:pointer; user-select:none; }
.data-table th.sortable:hover{ color: var(--text); }
.sort-arrow{ color: var(--primary); }
.data-table td{ padding: 11px 14px; border-bottom:1px solid var(--border); vertical-align: middle; }
.data-table tbody tr:last-child td{ border-bottom:none; }
.data-table tbody tr:hover{ background: var(--surface-2); }
.data-table tbody tr.clickable{ cursor:pointer; }
.data-table tbody tr.row-warning{ background: var(--red-soft); }
.col-actions{ text-align:right; white-space:nowrap; width:1%; }
.empty-cell{ color: var(--text-faint); }

.mini-table{ width:100%; border-collapse: collapse; font-size: 13px; }
.mini-table th{ text-align:left; color: var(--text-muted); font-weight:650; font-size:11px; text-transform:uppercase; padding:6px 8px; border-bottom:1px solid var(--border); }
.mini-table td{ padding:7px 8px; border-bottom:1px solid var(--border); }

/* ---------------------------------------------------------------- BUTTONS */
.btn{
  border:1px solid var(--border); background: var(--surface); color: var(--text);
  padding: 9px 15px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 650;
  cursor:pointer; transition: filter .1s, background .1s, box-shadow .1s, transform .05s; display:inline-flex; align-items:center; gap:6px;
}
.btn:hover{ filter: brightness(0.97); }
.btn:active{ transform: scale(0.98); }
.btn-primary{ background: linear-gradient(180deg, #4763e8, var(--primary)); border-color: var(--primary-dark); color:#fff; box-shadow: 0 4px 14px rgba(52,82,225,.32), var(--shadow-inset); }
.btn-primary:hover{ background: linear-gradient(180deg, #3d59e4, var(--primary-dark)); border-color: var(--primary-dark); }
.btn-danger{ background: linear-gradient(180deg, #d84457, var(--red)); border-color: var(--red); color:#fff; box-shadow: 0 4px 14px rgba(196,41,58,.28); }
.btn-danger:hover{ filter: brightness(1.08); }
.btn-secondary{ background: var(--surface); border-color: var(--border); color: var(--text); box-shadow: var(--shadow-sm); }
.btn-secondary:hover{ background: var(--surface-2); }
.btn-ghost{ background: transparent; border-color: transparent; color: var(--text-muted); }
.btn-ghost:hover{ background: var(--surface-2); color: var(--text); }
.btn-small{ padding: 6px 11px; font-size: 12.5px; }
.btn-large{ padding: 13px 24px; font-size: 15px; border-radius: 10px; }
.btn-block{ width:100%; justify-content:center; }
.btn:disabled{ opacity:.55; cursor:not-allowed; }

.icon-btn{
  border:none; background:transparent; cursor:pointer; font-size: 15px; padding: 6px 8px;
  border-radius: var(--radius-sm); line-height:1; transition: background .1s;
}
.icon-btn:hover{ background: var(--surface-2); }
.icon-btn.danger:hover{ background: var(--red-soft); }

/* ---------------------------------------------------------------- BADGES */
.badge{
  display:inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .01em; white-space: nowrap;
}
.badge-green{ background: var(--green-soft); color: var(--green); }
.badge-amber{ background: var(--amber-soft); color: var(--amber); }
.badge-red{ background: var(--red-soft); color: var(--red); }
.badge-grey{ background: var(--grey-soft); color: var(--grey); }
.badge-blue{ background: var(--blue-soft); color: var(--blue); }

/* ------------------------------------------------------------- SWITCH */
.switch{
  width: 40px; height: 22px; border-radius: 999px; border: none; background: #d7dbe6; cursor: pointer;
  position: relative; padding: 0; vertical-align: middle; transition: background .15s; flex-shrink: 0;
}
.switch .switch-knob{
  position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s;
}
.switch.on{ background: var(--green); }
.switch.on .switch-knob{ transform: translateX(18px); }
.switch.disabled{ opacity:.5; cursor:not-allowed; }
.switch-label{ margin-left: 8px; font-size: 12.5px; color: var(--text-muted); font-weight: 600; vertical-align: middle; }

/* ---------------------------------------------------------------- STATS / DASHBOARD */
.stat-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 14px; margin-bottom: 22px; }
.stat-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  padding: 17px 18px; box-shadow: var(--shadow-sm); display:flex; align-items:center; gap:14px;
  transition: transform .12s, box-shadow .12s;
}
.stat-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-icon{
  width:44px; height:44px; border-radius: 11px; background: var(--primary-soft); color: var(--primary);
  display:flex; align-items:center; justify-content:center; font-size: 20px; flex-shrink:0;
}
.stat-value{ font-size: 22px; font-weight: 800; line-height:1.15; }
.stat-label{ font-size: 12px; color: var(--text-muted); }

.dash-grid{ display:grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 980px){ .dash-grid{ grid-template-columns: 1fr; } }

.bar-row{ display:flex; align-items:center; gap:10px; margin: 9px 0; }
.bar-label{ width: 130px; flex-shrink:0; font-size:12.5px; color: var(--text-muted); }
.bar-track{ flex:1; height:9px; border-radius:999px; background: var(--surface-2); overflow:hidden; }
.bar-fill{ height:100%; border-radius:999px; transition: width .3s; }
.tone-green{ background: var(--green); }
.tone-amber{ background: var(--amber); }
.tone-red{ background: var(--red); }
.tone-grey{ background: var(--grey); }
.tone-blue{ background: var(--blue); }

/* ---------------------------------------------------------------- FORM / MODAL */
.modal-overlay{
  position: fixed; inset:0; background: rgba(12,15,28,.55); backdrop-filter: blur(1.5px); display:flex; align-items:flex-start;
  justify-content:center; padding: 40px 16px; overflow-y:auto; z-index: 100;
}
.modal{
  background: var(--surface); border-radius: var(--radius); width: 100%; max-width: 560px;
  box-shadow: var(--shadow-lg); animation: modal-in .14s ease-out;
}
.modal.modal-wide{ max-width: 760px; }
.modal.modal-small{ max-width: 400px; }
@keyframes modal-in{ from{ opacity:0; transform: translateY(-8px) scale(.98);} to{opacity:1; transform:translateY(0) scale(1);} }
.modal-header{
  display:flex; align-items:center; justify-content:space-between; padding: 17px 20px;
  border-bottom:1px solid var(--border);
}
.modal-header h3{ font-size: 16px; }
.modal-body{ padding: 20px; max-height: 72vh; overflow-y:auto; }
.confirm-body{ text-align:center; padding-top: 8px; }
.confirm-icon{ font-size: 32px; margin-bottom: 8px; }

.resource-form{ display:flex; flex-direction:column; gap:14px; }
.field{ display:flex; flex-direction:column; gap:5px; }
.field-label{ font-size: 12.5px; font-weight: 650; color: var(--text-muted); }
.req{ color: var(--red); }
.field input[type=text], .field input[type=number], .field input[type=date], .field input[type=password],
.field select, .field textarea{
  border:1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; font-size: 13.5px;
  background: var(--surface); color: var(--text); width:100%; transition: border-color .1s, box-shadow .1s;
}
.field textarea{ resize: vertical; min-height: 64px; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
}
.field input:disabled, .field select:disabled{ background: var(--surface-2); color: var(--text-muted); cursor:not-allowed; }
.form-error{ background: var(--red-soft); color: var(--red); padding: 10px 13px; border-radius: var(--radius-sm); font-size:13px; font-weight: 550; }
.form-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top: 4px; }

.search-input{
  border:1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 13px; font-size:13.5px;
  min-width: 240px; background: var(--surface); margin-bottom: 14px;
}
.search-input:focus{ outline:none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

/* ---------------------------------------------------------------- EMBEDDED BLOCKS */
.embedded-block{ margin-top: 18px; }
.embedded-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; flex-wrap: wrap; gap: 10px; }
.embedded-header h3{ font-size: 14.5px; }

.kv-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 14px 22px; margin: 14px 0; }
.kv-grid .k{ font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:3px; font-weight: 650; }
.kv-grid .v{ font-size: 14.5px; font-weight: 650; }

/* ---------------------------------------------------------------- LOGIN */
.login-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 15% 15%, #2a3564 0%, #10162a 55%, #0a0e1c 100%);
  padding: 32px 20px;
}
.login-layout{ display:flex; gap: 28px; align-items:flex-start; flex-wrap: wrap; justify-content:center; max-width: 900px; }
.login-card{
  background: var(--surface); border-radius: 18px; padding: 34px 34px 30px; width:100%; max-width: 380px;
  box-shadow: var(--shadow-lg); position: relative;
}
.login-back{ display:inline-block; font-size: 12.5px; color: var(--text-muted); font-weight: 600; margin-bottom: 16px; }
.login-back:hover{ color: var(--primary); }
.login-logo{ font-size: 26px; margin-bottom: 6px; }
.login-sub{ font-size: 13px; color: var(--text-muted); margin-bottom: 22px; }
.login-demo{
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 18px;
  padding: 26px 26px 22px; width: 100%; max-width: 340px; color: #dbe1f5;
}
.login-demo h3{ color: #fff; font-size: 15px; margin-bottom: 6px; }
.login-demo > p{ font-size: 12.5px; color: #a9b2d4; margin: 0 0 16px; }
.demo-account-card{
  display:block; width: 100%; text-align:left; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 10px; cursor:pointer; color: inherit;
  transition: background .12s, border-color .12s;
}
.demo-account-card:hover{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); }
.demo-account-title{ font-weight: 700; font-size: 13.5px; color: #fff; }
.demo-account-user{ font-size: 12px; color: #b7c0e2; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; margin: 2px 0; }
.demo-account-desc{ font-size: 11.5px; color: #939fc4; }

/* ---------------------------------------------------------------- TOAST */
.toast{
  position: fixed; bottom: 24px; right: 26px; padding: 13px 20px; border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 650; box-shadow: var(--shadow-lg); color:#fff; z-index: 200;
  animation: toast-in .15s ease-out; max-width: 360px;
}
@keyframes toast-in{ from{opacity:0; transform: translateY(8px);} to{opacity:1; transform:translateY(0);} }
.toast-ok{ background: var(--green); }
.toast-error{ background: var(--red); }

/* ---------------------------------------------------------------- TABS */
.tabs{ display:flex; gap:4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.tab{
  padding: 10px 16px; font-size: 13.5px; font-weight: 650; color: var(--text-muted); cursor:pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; border-left:none; border-right:none; border-top:none;
}
.tab:hover{ color: var(--text); }
.tab.active{ color: var(--primary); border-bottom-color: var(--primary); }

/* ---------------------------------------------------------------- FACTURE */
.facture-header-card{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.invoice-totals{ max-width: 340px; margin-left:auto; margin-top: 16px; }
.invoice-row{ display:flex; justify-content:space-between; padding: 6px 0; font-size: 13.5px; }
.invoice-row.subtle{ color: var(--text-muted); font-size: 12.5px; }
.invoice-row.total{ border-top: 1px solid var(--border); margin-top:6px; padding-top:11px; font-size: 17px; font-weight: 800; }
.print-header{ display:none; }

/* ---------------------------------------------------------------- LANDING PAGE */
.landing{ background: var(--bg); min-height: 100vh; }
.landing-nav{
  display:flex; align-items:center; justify-content:space-between; padding: 18px 6vw;
  position: sticky; top:0; background: rgba(244,246,251,.85); backdrop-filter: blur(8px); z-index: 10;
  border-bottom: 1px solid var(--border);
}
.landing-logo{ font-weight: 800; font-size: 17px; letter-spacing: -0.02em; }
.landing-hero{
  padding: 72px 6vw 56px; max-width: 980px; margin: 0 auto; text-align:center;
}
.landing-hero-badge{
  display:inline-block; background: var(--primary-soft); color: var(--primary); font-weight: 700; font-size: 12px;
  padding: 5px 14px; border-radius: 999px; margin-bottom: 22px; letter-spacing: .02em;
}
.landing-hero h1{ font-size: clamp(28px, 4.2vw, 44px); line-height: 1.15; margin-bottom: 20px; }
.landing-hero h1 .accent{ color: var(--primary); }
.landing-hero-sub{ font-size: 16px; color: var(--text-muted); max-width: 640px; margin: 0 auto 30px; line-height: 1.6; }
.landing-hero-actions{ display:flex; gap: 14px; justify-content:center; flex-wrap: wrap; margin-bottom: 48px; }
.landing-stats{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px; background: var(--surface); border:1px solid var(--border);
  border-radius: var(--radius); padding: 26px 20px; box-shadow: var(--shadow-sm);
}
.landing-stat-value{ font-size: 26px; font-weight: 800; color: var(--primary); }
.landing-stat-label{ font-size: 12px; color: var(--text-muted); margin-top: 4px; }
@media (max-width: 700px){ .landing-stats{ grid-template-columns: repeat(2, 1fr); } }

.landing-modules{ padding: 20px 6vw 60px; max-width: 1180px; margin: 0 auto; }
.landing-modules h2, .landing-compare h2{ text-align:center; font-size: 28px; margin-bottom: 34px; }
.modules-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.module-card{
  background: var(--surface); border:1px solid var(--border); border-top: 4px solid var(--primary);
  border-radius: var(--radius); padding: 24px 22px; box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .15s;
}
.module-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.module-card-icon{ font-size: 30px; margin-bottom: 12px; }
.module-card h3{ font-size: 16.5px; margin-bottom: 8px; }
.module-card p{ color: var(--text-muted); font-size: 13.5px; margin: 0 0 12px; line-height: 1.5; }
.module-card ul{ margin:0; padding-left: 18px; font-size: 12.8px; color: var(--text); }
.module-card li{ margin-bottom: 6px; line-height: 1.45; }
.tone-border-green{ border-top-color: var(--green); }
.tone-border-blue{ border-top-color: var(--blue); }
.tone-border-amber{ border-top-color: var(--amber); }
.tone-border-red{ border-top-color: var(--red); }

.landing-compare{ padding: 10px 6vw 70px; max-width: 1000px; margin: 0 auto; }
.compare-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 720px){ .compare-grid{ grid-template-columns: 1fr; } }
.compare-card{ border-radius: var(--radius); padding: 26px 24px; }
.compare-card ul{ margin: 14px 0 0; padding-left: 20px; font-size: 13.5px; line-height: 1.7; }
.compare-old{ background: var(--grey-soft); border: 1px solid var(--border); color: var(--text-muted); }
.compare-old h4{ color: var(--text); }
.compare-new{ background: linear-gradient(160deg, var(--primary-soft), #eef4ff); border: 1px solid #d7e0ff; }
.compare-new h4{ color: var(--primary-dark); }

.install-help{ max-width: 560px; margin: 0 auto; text-align:left; }
.install-help-toggle{
  display:flex; align-items:center; justify-content:center; gap:6px; width:100%; background:none; border:none;
  color: var(--text-muted); font-size: 13px; font-weight: 650; cursor:pointer; padding: 8px; text-align:center;
}
.install-help-toggle:hover{ color: var(--primary); }
.install-help-body{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 16px 18px; margin-top: 8px; font-size: 13px; color: var(--text); box-shadow: var(--shadow-sm);
}
.install-help-body > div{ margin-bottom: 8px; line-height: 1.5; }
.install-help-note{ margin: 10px 0 0; color: var(--text-muted); font-size: 12px; }

.landing-footer{
  text-align:center; padding: 34px 6vw 50px; color: var(--text-muted); font-size: 13px;
  display:flex; flex-direction:column; align-items:center; gap: 14px; border-top: 1px solid var(--border);
}

/* ---------------------------------------------------------------- BOOT SCREEN */
.boot-screen{
  min-height: 100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 14px; color: var(--text-muted); font-size: 13.5px; background: var(--bg);
}
.boot-logo{ font-size: 34px; }
.boot-spinner{
  width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--border);
  border-top-color: var(--primary); animation: boot-spin .8s linear infinite;
}
@keyframes boot-spin{ to{ transform: rotate(360deg); } }

/* ---------------------------------------------------------------- GEODESIQUE
   Repris fidèlement de mesur_app.css (vrai module "Mesur v8" en production) :
   même code couleur bleu = Coordonnées / vert = Cotes, pour que l'utilisateur
   habitué au système d'origine retrouve immédiatement ses repères. */
.geo-home-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 18px; margin-top: 20px; }
.geo-card{
  text-align:left; background: var(--surface); border-radius: var(--radius); padding: 26px 24px;
  cursor:pointer; box-shadow: var(--shadow-sm); transition: all .2s ease; font: inherit; color: inherit;
}
.geo-card-icon{ font-size: 30px; margin-bottom: 10px; }
.geo-card h3{ font-size: 17px; margin-bottom: 6px; }
.geo-card p{ color: var(--text-muted); font-size: 13px; margin:0; line-height:1.5; }
.geo-card-coords{ border: 2px solid #bfdbfe; }
.geo-card-coords:hover{ border-color: #2563eb; box-shadow: 0 10px 24px rgba(37,99,235,.15); transform: translateY(-3px); }
.geo-card-cotes{ border: 2px solid #bbf7d0; }
.geo-card-cotes:hover{ border-color: #16a34a; box-shadow: 0 10px 24px rgba(22,163,74,.15); transform: translateY(-3px); }

.geo-params.header-coords{ background: linear-gradient(180deg, #eff6ff, #fff); border-left: 4px solid #2563eb; }
.geo-params.header-cotes{ background: linear-gradient(180deg, #f0fdf4, #fff); border-left: 4px solid #16a34a; }
.geo-params-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 12px 16px; margin-top: 12px; }
.geo-hint{ margin: 12px 0 0; font-size: 13px; color: var(--text-muted); }

.table-coords thead th{ background: #eff6ff !important; }
.table-cotes thead th{ background: #f0fdf4 !important; }
.btn-add-point{ background: #334155 !important; color:#fff !important; }
.btn-add-point:hover{ background:#1e293b !important; }
.btn-coords-primary{ background: linear-gradient(180deg, #3b82f6, #2563eb) !important; border-color:#2563eb !important; color:#fff !important; }
.btn-coords-primary:hover{ filter: brightness(1.05); }
.btn-cotes-primary{ background: linear-gradient(180deg, #22c55e, #16a34a) !important; border-color:#16a34a !important; color:#fff !important; }
.btn-cotes-primary:hover{ filter: brightness(1.05); }
.mono{ font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; }
.cell-error{ background-color:#fecaca !important; color:#991b1b !important; font-weight:700 !important; }

/* ---------------------------------------------------------------- MISC */
.clickable{ cursor:pointer; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background: #d3d8e4; border-radius: 999px; }
::-webkit-scrollbar-track{ background: transparent; }

@media (max-width: 760px){
  .sidebar{ display:none; }
  .content{ padding: 16px; }
  .facture-header-card{ flex-direction: column; }
}

/* ---------------------------------------------------------------- PRINT */
@media print{
  .sidebar, .topbar, .no-print, .toast{ display:none !important; }
  .app-shell, .main-col, .content{ display:block !important; padding:0 !important; margin:0 !important; }
  body{ background:#fff; }
  .print-header{ display:block !important; margin-bottom: 18px; }
  .card{ box-shadow:none; border-color:#ccc; }
  .btn{ display:none !important; }
}

/* =============================================================================
   v3 — composants ajoutés (menu repliable, recherche globale, Kanban, Gantt,
   calendrier, matrice des risques, fiche projet, éditeur de devis…)
   ========================================================================== */
.nav-group-title{ display:flex; justify-content:space-between; align-items:center; width:100%; background:none; border:none; cursor:pointer; text-align:left; font-family:inherit; }
.nav-group-title:hover{ color:#aeb8dc; }
.nav-group-title .chev{ font-size: 11px; }
.nav-subgroup-title{ text-transform: uppercase; letter-spacing:.07em; font-weight:700; padding: 8px 12px 3px; margin-top: 4px; }
.nav-link{ display:flex; align-items:center; gap:8px; padding: 7px 12px; font-size: 13px; }
.nav-icon{ width: 20px; text-align:center; flex-shrink:0; }
.menu-toggle{ display:none; font-size: 20px; }
.sidebar-backdrop{ display:none; }

.global-search{ position:relative; flex: 1; max-width: 460px; }
.global-search input{ width:100%; border:1px solid var(--border); border-radius: 999px; padding: 9px 16px; font-size: 13.5px; background: var(--surface-2); }
.global-search input:focus{ outline:none; border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px var(--primary-soft); }
.global-results{ position:absolute; top: 44px; left:0; right:0; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 60; max-height: 420px; overflow:auto; padding: 6px; }
.global-result{ display:flex; gap:10px; align-items:flex-start; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 13px; }
.global-result:hover{ background: var(--surface-2); }

.page{ max-width: 1280px; }
.page-header > div:first-child{ min-width: 0; }
.page-header .page-sub{ margin: 4px 0 0; }
.page-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.muted{ color: var(--text-muted); }
.faint{ color: var(--text-faint); }
.small{ font-size: 12px; }
.mono{ font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.num{ text-align:right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.text-red{ color: var(--red); font-weight: 650; }
.text-green{ color: var(--green); font-weight: 650; }
.prewrap{ white-space: pre-wrap; }
.clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; overflow:hidden; }
.link{ color: var(--primary); font-weight: 600; display:inline-flex; align-items:center; gap:6px; }
.link:hover{ text-decoration: underline; }
.color-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align: middle; box-shadow: 0 0 0 2px rgba(0,0,0,.05); }
.count-pill{ display:inline-block; margin-left:7px; background: var(--surface-2); color: var(--text-muted); border:1px solid var(--border); border-radius: 999px; padding: 0 8px; font-size: 11px; font-weight: 700; }
.badge-small{ padding: 2px 8px; font-size: 10.5px; }
.chips{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.chip{ background: var(--surface-2); border:1px solid var(--border); border-radius: 999px; padding: 4px 10px 4px 4px; font-weight: 700; font-size: 13px; }
.plain-list{ list-style:none; padding:0; margin: 8px 0 0; }
.plain-list li{ padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.plain-list li:last-child{ border-bottom: none; }
.notice{ background: var(--blue-soft); color: #1d4e94; border:1px solid #cfe0fb; border-radius: var(--radius-sm); padding: 11px 14px; margin-bottom: 14px; font-size: 13px; }
.notice-green{ background: var(--green-soft); color: var(--green); border-color: #c4ead7; }
.notice-red{ background: var(--red-soft); color: var(--red); border-color: #f3c7cd; }
.empty-state.compact{ padding: 22px 14px; border:none; background: transparent; }
.empty-state.compact .empty-state-icon{ font-size: 24px; margin-bottom: 4px; }
.empty-state.compact p{ margin: 0 0 8px; }
.card h3{ font-size: 15px; margin-bottom: 10px; display:flex; align-items:center; gap:6px; flex-wrap: wrap; }
.card h4{ font-size: 13px; margin: 14px 0 6px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.card-accent{ border-left: 4px solid var(--primary); }
.list-toolbar{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom: 12px; }
.list-toolbar .search-input{ margin-bottom:0; }
.list-toolbar select{ border:1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; background: var(--surface); }
.filter-bar{ display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end; padding: 14px 18px; }
.filter-bar .field{ min-width: 170px; }
.row-2, .row-3, .row-4{ display:grid; gap: 12px 16px; margin-bottom: 12px; }
.row-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.row-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.row-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
.field-help{ font-size: 11.5px; color: var(--text-faint); }
.field input[type=color]{ width: 48px; height: 34px; border:1px solid var(--border); border-radius: var(--radius-sm); padding: 2px; background: var(--surface); }
.color-field{ display:flex; align-items:center; gap:10px; }
.resource-form.two-cols{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 18px; }
.resource-form .form-error, .resource-form .field-wide{ grid-column: 1 / -1; }
.data-table td.num, .data-table th.num{ text-align:right; }
.table-wrap.compact .data-table td{ padding: 8px 12px; }
.table-wrap{ margin-bottom: 14px; }
.big-number{ font-size: 30px; font-weight: 800; margin: 10px 0 4px; letter-spacing: -0.02em; }
.big-number span{ font-size: 13px; font-weight: 600; color: var(--text-muted); }

.stat-card.clickable{ cursor:pointer; }
.stat-hint{ font-size: 11.5px; color: var(--text-faint); margin-top: 2px; }
.stat-green .stat-icon{ background: var(--green-soft); color: var(--green); }
.stat-amber .stat-icon{ background: var(--amber-soft); color: var(--amber); }
.stat-red .stat-icon{ background: var(--red-soft); color: var(--red); }
.stat-blue .stat-icon{ background: var(--blue-soft); color: var(--blue); }
.dash-grid{ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
a.bar-row{ display:block; padding: 6px 8px; border-radius: var(--radius-sm); }
a.bar-row:hover{ background: var(--surface-2); }
a.bar-row .bar-label{ width:auto; display:flex; justify-content:space-between; margin-bottom: 4px; color: var(--text); }

.hero-banner{ display:flex; justify-content:space-between; align-items:center; gap: 16px; flex-wrap:wrap;
  background: linear-gradient(120deg, #2a44d4 0%, #3452e1 45%, #5b7cfa 100%); color:#fff; border-radius: 16px; padding: 22px 26px; margin-bottom: 20px;
  box-shadow: 0 14px 34px rgba(52,82,225,.30); }
.hero-banner h1{ font-size: 23px; }
.hero-banner p{ margin: 4px 0 0; opacity: .88; }
.btn-light{ background: rgba(255,255,255,.16); color:#fff; border-color: rgba(255,255,255,.35); }
.btn-light:hover{ background: rgba(255,255,255,.26); }

.progress{ position:relative; height: 18px; background: var(--surface-2); border-radius: 999px; overflow:hidden; border:1px solid var(--border); min-width: 80px; }
.progress.small{ height: 8px; border:none; }
.progress-fill{ height:100%; border-radius: 999px; transition: width .3s; }
.progress-label{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size: 11px; font-weight: 700; color: var(--text); }

.tabs{ flex-wrap: wrap; }
.tab{ display:inline-flex; align-items:center; }

/* Kanban */
.kanban{ display:grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; align-items:start; margin-bottom: 12px; }
.kanban-col{ background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius); padding: 10px; min-height: 120px; transition: background .12s, border-color .12s; }
.kanban-col.drop-target{ background: var(--primary-soft); border-color: var(--primary); }
.kanban-col-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 10px; }
.kanban-card{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 11px; margin-bottom: 8px; box-shadow: var(--shadow-sm); cursor: pointer; font-size: 13px; display:flex; flex-direction:column; gap:5px; }
.kanban-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-1px); }
.kanban-card[draggable=true]{ cursor: grab; }
.kanban-card-title{ font-weight: 650; }
.kanban-card-meta{ display:flex; justify-content:space-between; gap:8px; font-size: 11.5px; color: var(--text-muted); }
.kanban-empty{ text-align:center; color: var(--text-faint); padding: 10px; }

/* Gantt */
.gantt{ font-size: 12.5px; overflow-x:auto; }
.gantt-row{ display:grid; grid-template-columns: 260px 1fr; min-height: 30px; align-items:center; border-bottom: 1px solid var(--border); }
.gantt-row.clickable:hover{ background: var(--surface-2); cursor:pointer; }
.gantt-head{ font-weight:700; color: var(--text-muted); min-height: 26px; }
.gantt-label{ padding: 4px 8px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
.gantt-track{ position:relative; height: 30px; min-width: 420px; }
.gantt-head .gantt-track{ height: 26px; }
.gantt-month{ position:absolute; top: 5px; font-size: 10.5px; color: var(--text-faint); border-left: 1px solid var(--border); padding-left: 3px; text-transform: capitalize; }
.gantt-bar{ position:absolute; top: 8px; height: 14px; background: #b9c6fb; border-radius: 4px; overflow:hidden; }
.gantt-bar.done{ background: #b6e4cc; }
.gantt-bar.late{ background: #f6c1c8; }
.gantt-progress{ display:block; height:100%; background: var(--primary); opacity: .75; }
.gantt-bar.done .gantt-progress{ background: var(--green); }
.gantt-bar.late .gantt-progress{ background: var(--red); }
.gantt-milestone{ position:absolute; top: 5px; transform: translateX(-50%); color: var(--amber); font-size: 16px; }
.gantt-milestone.late{ color: var(--red); }
.gantt-today{ position:absolute; top:0; bottom:0; width: 2px; background: var(--red); opacity: .5; }

/* Calendrier */
.calendar{ display:grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 6px; }
.cal-head{ text-align:center; font-weight: 700; color: var(--text-muted); font-size: 12px; padding: 6px 0; }
.cal-cell{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-sm); min-height: 104px; padding: 6px; display:flex; flex-direction:column; gap:3px; overflow:hidden; }
.cal-cell.empty{ background: transparent; border-style: dashed; }
.cal-cell.today{ border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.cal-day{ font-weight: 700; font-size: 12px; color: var(--text-muted); }
.cal-event{ font-size: 11px; color:#fff; border-radius: 4px; padding: 2px 5px; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }
.cal-event.tone-grey{ background: #7b8494; }
.cal-nav{ display:flex; align-items:center; gap: 8px; text-transform: capitalize; }

/* Matrice des risques */
.risk-matrix{ display:grid; grid-template-columns: 150px repeat(4, minmax(0,1fr)); gap: 4px; max-width: 640px; }
.rm-corner{ font-size: 11px; color: var(--text-faint); display:flex; align-items:flex-end; }
.rm-head{ font-size: 12px; font-weight: 700; color: var(--text-muted); text-align:center; padding: 6px; }
.rm-side{ text-align:right; }
.rm-cell{ height: 48px; border-radius: 6px; display:flex; align-items:center; justify-content:center; font-size: 18px; color:#fff; }
.sev-faible{ background: #7ccfa5; }
.sev-moyenne{ background: #f2c14e; }
.sev-forte{ background: #ef8a3c; }
.sev-très-forte{ background: #d9434f; }

/* Portefeuille / fiche projet */
.project-cards{ display:grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.project-card{ background: var(--surface); border:1px solid var(--border); border-top: 4px solid var(--primary); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-sm); display:flex; flex-direction:column; gap: 8px; transition: transform .12s, box-shadow .12s; }
.project-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
.project-card-head{ display:flex; justify-content:space-between; gap: 8px; align-items:center; }
.project-card-head h3{ font-size: 15.5px; }
.project-card-kpis{ display:flex; flex-wrap:wrap; gap: 6px 14px; font-size: 12px; color: var(--text-muted); }
.meteo{ font-size: 17px; white-space: nowrap; }
.fiche-header{ display:flex; justify-content:space-between; gap: 16px; flex-wrap:wrap; align-items:flex-start; background: var(--surface); border:1px solid var(--border); border-left: 6px solid var(--primary); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
.fiche-header h1{ font-size: 22px; margin-bottom: 6px; }
.fiche-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; }
.quick-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.quick-tile{ border:1px solid var(--border); background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px; display:flex; flex-direction:column; gap: 2px; text-align:left; cursor:pointer; font-size: 12px; color: var(--text-muted); font-family: inherit; }
.quick-tile:hover{ border-color: var(--primary); background: var(--primary-soft); }
.quick-n{ font-size: 20px; font-weight: 800; color: var(--text); }

/* Éditeur de devis */
.input-with-btn{ display:flex; gap: 6px; }
.input-with-btn select{ flex:1; }
.check-group{ display:flex; flex-wrap:wrap; gap: 8px 16px; }
.check{ display:inline-flex; align-items:center; gap: 6px; font-size: 12.5px; }
.article-grid{ display:grid; grid-template-columns: 1fr 2.4fr 1fr 1.2fr 1fr auto; gap: 10px; align-items:end; }
.article-add{ height: 38px; }
.dqe-table .dqe-cat td{ background: var(--primary-soft); font-weight: 700; }
.dqe-table .dqe-subtotal td{ font-weight: 700; background: var(--surface-2); }
.cell-input{ width: 100%; min-width: 120px; border:1px solid transparent; border-radius: 6px; padding: 5px 7px; background: transparent; font-size: 13px; }
.cell-input.small{ min-width: 64px; max-width: 90px; }
.cell-input.num{ text-align:right; }
.cell-input:hover{ border-color: var(--border); }
.cell-input:focus{ outline:none; border-color: var(--primary); background: var(--surface); }
.invoice-totals{ max-width: 520px; }
.invoice-row{ border-bottom: 1px dashed var(--border); }
.invoice-row.total{ font-size: 16px; font-weight: 800; border-bottom: none; border-top: 2px solid var(--text); margin-top: 4px; padding-top: 8px; }
.invoice-row.masked{ opacity: .5; }
.invoice-words{ margin-top: 10px; font-size: 12.5px; color: var(--text-muted); }
.switch-cell{ display:inline-flex; align-items:center; }

@media (max-width: 980px){
  .row-3, .row-4{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .article-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .fiche-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 760px){
  .menu-toggle{ display:inline-block; }
  .sidebar{ display:flex !important; position: fixed; left:0; top:0; bottom:0; transform: translateX(-105%); transition: transform .2s; z-index: 90; }
  .sidebar.open{ transform: translateX(0); }
  .sidebar-backdrop{ display:block; position: fixed; inset:0; background: rgba(0,0,0,.35); z-index: 80; }
  .topbar{ padding: 0 12px; }
  .user-chip > div:last-child, .topbar-user .btn-ghost:not(:last-child){ display:none; }
  .content{ padding: 16px 12px 50px; }
  .row-2, .row-3, .row-4, .resource-form.two-cols, .quick-grid{ grid-template-columns: 1fr; }
  .risk-matrix{ grid-template-columns: 90px repeat(4, minmax(0,1fr)); }
  .gantt-row{ grid-template-columns: 140px 1fr; }
}
.dash-grid > .card, .fiche-grid > .card{ min-width: 0; overflow-x: auto; }
.mini-table td .badge{ white-space: nowrap; }
.stat-grid{ grid-template-columns: repeat(auto-fit, minmax(175px,1fr)); }
.field input:not([type]), .field input[type=email], .field input[type=search]{
  border:1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; font-size: 13.5px;
  background: var(--surface); color: var(--text); width:100%; transition: border-color .1s, box-shadow .1s;
}
.field input:not([type]):disabled{ background: var(--surface-2); color: var(--text-muted); }
.article-grid .field input{ height: 38px; }
.kanban{ grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); overflow-x: auto; padding-bottom: 6px; }

/* ======================================================= v4 : composants ajoutés */
.form-section{ grid-column: 1 / -1; margin: 10px 0 2px; padding-bottom: 4px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 12.5px; letter-spacing: .3px; text-transform: uppercase; color: var(--primary); }
.file-field{ display:flex; align-items:center; gap: 8px; flex-wrap: wrap; min-height: 38px; }
.btn-row{ display:flex; gap: 8px; flex-wrap: wrap; align-items:center; }
.btn-group{ display:inline-flex; gap: 2px; align-items:center; }
.link-btn{ background:none; border:none; color: var(--primary); cursor:pointer; padding: 0; font: inherit; text-decoration: underline; }
.btn-sell{ background: var(--green); color:#fff; border-color: var(--green); }
.btn-sell:hover{ background: #116a48; }
.chip-plain{ font-size: 13px; }
.two-cols-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px){ .two-cols-grid{ grid-template-columns: 1fr; } }
.inline-form{ display:flex; gap: 8px; margin-top: 12px; align-items:center; }
.inline-form.wrap{ flex-wrap: wrap; }
.inline-form input:not([type=checkbox]), .inline-form select{ flex: 1 1 160px; min-width: 0; }
.check-inline{ display:inline-flex; align-items:center; gap: 6px; font-size: 13px; cursor:pointer; }
.plain-list.compact li{ padding: 3px 0; }
.search-card .form-actions{ margin-top: 8px; }

/* Commentaires et check-list */
.comments{ display:flex; flex-direction: column; gap: 10px; }
.comment{ background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; max-width: 88%; }
.comment.mine{ align-self: flex-end; background: var(--primary-soft); border-color: #d3dcff; }
.comment-head{ display:flex; gap: 8px; align-items:center; margin-bottom: 3px; font-size: 12.5px; }
.comment-head .icon-btn{ margin-left: auto; }
.comment-form{ display:flex; gap: 8px; align-items: flex-end; margin-top: 6px; }
.comment-form textarea{ flex: 1; }
.checklist{ display:flex; flex-direction: column; gap: 4px; }
.check-item{ display:flex; align-items:center; justify-content: space-between; padding: 6px 8px; border-radius: var(--radius-sm); }
.check-item:hover{ background: var(--surface-2); }
.check-item label{ display:flex; gap: 8px; align-items:center; cursor:pointer; }
.check-item.done label{ text-decoration: line-through; color: var(--text-muted); }
.icon-btn.small{ width: 24px; height: 24px; font-size: 12px; }

/* Dépendances */
.dep-item{ display:flex; align-items:center; gap: 6px; flex-wrap: wrap; }
.dep-type{ display:inline-block; min-width: 28px; text-align:center; font-size: 11px; font-weight: 700; background: var(--grey-soft); border-radius: 4px; padding: 1px 4px; }

/* Planning */
.planning-toolbar{ display:flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.planning-toolbar .tabs{ margin-bottom: 0; }
.planning-options{ margin: 6px 0 10px; }
tr.row-critical td:first-child{ box-shadow: inset 3px 0 0 var(--red); }
tr.row-late td{ background: #fff6f6; }
tr.row-upcoming td{ background: #f5fbf8; }
.gpro .gantt-row, .gpro-body{ min-width: 720px; }
.gpro-body{ position: relative; }
.gpro .gantt-row{ min-height: 0; }
.gpro-links{ position:absolute; top: 0; left: 260px; width: calc(100% - 260px); pointer-events: none; overflow: visible; }
.gdep path{ stroke: #6b7aa8; stroke-width: 1.3; }
.gdep .gdep-arrow{ fill: #6b7aa8; stroke: none; }
.gdep.conflit path{ stroke: var(--red); stroke-dasharray: 4 3; }
.gdep.conflit .gdep-arrow{ fill: var(--red); stroke-dasharray: none; }
.gantt-bar.critical{ box-shadow: 0 0 0 2px var(--red); }
.gantt-bar.summary{ height: 8px; top: 11px; background: #5b6472; border-radius: 2px; }
.gantt-bar.summary .gantt-progress{ background: #1c2333; }
.gantt-milestone.critical{ color: var(--red); }
.gantt-baseline{ position:absolute; top: 23px; height: 4px; background: #9aa3b2; border-radius: 2px; opacity: .8; }
.gantt-legend{ display:flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; align-items:center; }
.lg{ display:inline-block; width: 18px; height: 9px; border-radius: 3px; vertical-align: middle; }
.lg-bar{ background: #b9c6fb; } .lg-crit{ background: #b9c6fb; box-shadow: 0 0 0 2px var(--red); } .lg-base{ background: #9aa3b2; height: 4px; } .lg-late{ background: #f6c1c8; }
.roadmap .gantt-row{ grid-template-columns: 300px 1fr; }
.roadmap-bar{ background: #c9d3fb; }
.roadmap-overrun{ position:absolute; top: 8px; height: 14px; background: repeating-linear-gradient(45deg, #f6c1c8 0 4px, #fbe6e8 4px 8px); border-radius: 0 4px 4px 0; }

/* Feuille de temps et plan de charge */
.timesheet td, .timesheet th{ padding: 6px 6px; }
.timesheet th.today{ color: var(--primary); }
.timesheet .weekend{ background: var(--surface-2); }
.ts-input{ width: 58px; text-align: right; padding: 5px 6px; }
.timesheet tr.tot td{ background: var(--primary-soft); }
.load-table td.load-cell{ text-align:center; font-variant-numeric: tabular-nums; }
.load-cell.load-ok, .lg.load-ok{ background: #e5f7ee; }
.load-cell.load-high, .lg.load-high{ background: #fdf1dc; }
.load-cell.load-over, .lg.load-over{ background: #fbd5da; color: var(--red); font-weight: 700; }
.load-cell[title]:not([title=""]){ cursor: pointer; }
.stat-grid.compact{ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* Santé du projet */
.sante{ display:inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.sante-green{ background: var(--green-soft); color: var(--green); }
.sante-amber{ background: var(--amber-soft); color: var(--amber); }
.sante-red{ background: var(--red-soft); color: var(--red); }
.sante-card{ border-left: 4px solid var(--green); }
.sante-card.sante-amber{ border-left-color: var(--amber); background: var(--surface); color: inherit; }
.sante-card.sante-red{ border-left-color: var(--red); background: var(--surface); color: inherit; }
.sante-card.sante-green{ background: var(--surface); color: inherit; }
.sante-card{ padding: 18px; font-weight: 400; border-radius: var(--radius); }
.sante-meteo{ margin-top: 10px; font-size: 13px; }
.fiche-progress{ display:flex; align-items:center; gap: 10px; margin-top: 8px; max-width: 460px; }
.fiche-progress .progress{ flex: 1; }
.criteria li{ padding: 5px 0; }

/* Notifications */
.notif-bell{ position: relative; }
.notif-count{ position:absolute; top: -2px; right: -4px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; border-radius: 999px; padding: 1px 5px; line-height: 1.3; }
.notif-backdrop{ position: fixed; inset: 0; z-index: 40; }
.notif-panel{ position:absolute; right: 0; top: 40px; width: 340px; max-height: 70vh; overflow:auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 41; }
.notif-head{ display:flex; justify-content: space-between; align-items:center; padding: 10px 14px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); }
.notif-item{ display:block; padding: 9px 14px; border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; font-size: 13px; }
.notif-item:hover{ background: var(--surface-2); }
.notif-item.unread{ background: var(--primary-soft); }
@media (max-width: 760px){ .notif-panel{ position: fixed; left: 8px; right: 8px; width: auto; top: 58px; } }

/* Foncier : chaîne des propriétaires */
.timeline{ list-style: none; margin: 10px 0; padding: 0 0 0 18px; border-left: 2px solid var(--border); }
.timeline li{ position: relative; padding: 6px 0 10px 10px; }
.timeline li::before{ content: ""; position:absolute; left: -25px; top: 11px; width: 10px; height: 10px; border-radius: 50%; background: var(--text-faint); border: 2px solid var(--surface); }
.timeline li.current::before{ background: var(--green); }
.timeline li .btn-group{ margin-left: 6px; }