:root{
    --bg:#f6f1e9; --ink:#1f1f1f; --muted:#6c6257; --line:#eadfcd; --card:#fff;
    --gold:#f3d481; --gold-2:#e8c35a; --gold-dark:#c49b30;
    --radius:16px;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,Segoe UI,Roboto,Arial}
  a{color:inherit;text-decoration:none}
  .top{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
  .top .inner{max-width:1240px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:12px;justify-content:space-between}
  .brand{display:flex;gap:10px;align-items:center;font-weight:900}
  .logo{width:34px;height:34px;border-radius:12px;background:linear-gradient(145deg,#f5e8c6,#d9b362);display:grid;place-items:center;border:1px solid var(--gold-dark);color:#3f2e0c}
  .tabs{display:flex;gap:8px}
  .tab{padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:#fff}
  .wrap{max-width:1240px;margin:20px auto;padding:0 16px}
  .board{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .col{display:flex;flex-direction:column;gap:16px;min-height:20px}
  .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:0 8px 20px rgba(0,0,0,.05);cursor:grab}
  .card:active{cursor:grabbing}
  h3{margin:0 0 10px}
  label{font-size:12px;color:var(--muted);text-transform:uppercase}
  input,select,textarea{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:#fff;margin-top:6px;margin-bottom:10px;font-size:14px}
  table{width:100%;border-collapse:collapse}
  th,td{padding:10px;border-bottom:1px dashed var(--line);text-align:left;font-size:14px}
  th{font-size:12px;color:#7b7166;text-transform:uppercase}
  .placeholder{height:64px;border:2px dashed var(--gold-dark);border-radius:14px;background:#fff8ea}
  .muted{color:#7b7166;font-size:12px}
  .btn{border:1px solid var(--gold-dark);border-radius:12px;padding:10px 14px;font-weight:800;cursor:pointer;background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#1d1c19;box-shadow:0 4px 10px rgba(180,140,40,.35)}
  .pill{display:inline-block;padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:#fff;margin-right:6px}
  .kpis{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
  .kpis .tile{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff}
  .tile .icon{width:28px;height:28px;border-radius:8px;border:1px solid #efd8a0;background:#fff7dd;display:grid;place-items:center}
  .rightbar{position:fixed;right:16px;bottom:18px;width:320px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 22px rgba(0,0,0,.1);padding:12px}
  .rightbar h4{margin:6px 0 10px}
  .rightbar .item{display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-top:1px dashed var(--line)}
  .switch{appearance:none;width:42px;height:24px;border-radius:999px;background:#e9dfcf;border:1px solid var(--line);position:relative;cursor:pointer}
  .switch:checked{background:#d9c18c}
  .switch:before{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:2.5px;left:2.5px;transition:.2s}
  .switch:checked:before{left:21px}
  @media (max-width:980px){.board{grid-template-columns:1fr}.rightbar{position:static;width:auto;margin-top:16px}}
/* Bouton doré lisible (texte noir) */
.btn-gold {
  background: linear-gradient(180deg,#F2C96A,#E2B54A);
  color:#111;
  border:0;
  padding:.6rem 1rem;
  border-radius:10px;
  box-shadow: 0 6px 16px rgba(226,181,74,.35);
}
.btn-gold:hover { filter: brightness(0.98); }

/* Petite grille */
.grid-4 { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:12px; }
.grid-2 { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
.gap-12 { gap:12px; }
.mt-12 { margin-top:12px; }
.mt-16 { margin-top:16px; }
.align-end { display:flex; align-items:end; }

/* Table simple */
.table table { width:100%; border-collapse:separate; border-spacing:0; }
.table thead th { font-weight:600; text-align:left; padding:.6rem .8rem; }
.table tbody td { border-top:1px solid #eee3; padding:.6rem .8rem; }

/* ---------- Employés : carte compacte ---------- */
.card-sm {
  max-width: 980px;           /* largeur max en desktop */
  margin: 0 auto 16px;        /* centrée, écart sous la carte */
}

.form-compact input,
.form-compact select,
.form-compact button {
  height: 36px;
  padding: .35rem .6rem;
  font-size: .95rem;
}

/* Grille des champs employé (desktop) */
.emp-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr)); /* 4 colonnes */
  gap: 12px;
}

/* Ligne d’identifiants (nom/role/pin/€H) */
.emp-line-1 { grid-column: 1 / -1; display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:12px; }
/* Ligne coûts (€/jour, €H sup, attribution chantiers, bouton) */
.emp-line-2 { grid-column: 1 / -1; display:grid; grid-template-columns: 1fr 1fr 2fr auto; gap:12px; align-items:end; }

/* Table des employés compacte */
.table-emps table { width:100%; border-collapse: separate; border-spacing:0; }
.table-emps thead th { font-weight:600; text-align:left; padding:.5rem .6rem; }
.table-emps tbody td { border-top:1px solid #eee3; padding:.5rem .6rem; }

/* Responsive */
@media (max-width: 980px) {
  .emp-line-1 { grid-template-columns: 1fr 1fr; }
  .emp-line-2 { grid-template-columns: 1fr 1fr; }
  .card-sm { max-width: 100%; margin: 0 8px 16px; }
}