:root {
  --red: #c8102e;
  --red-dark: #980b22;
  --ink: #121923;
  --muted: #667483;
  --line: #dbe3ea;
  --bg: #eef2f5;
  --panel: #ffffff;
  --teal: #006b70;
  --amber: #a8792b;
  --radius: 8px;
  --shadow: 0 14px 38px rgba(18, 25, 35, .10);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.52), rgba(255,255,255,0) 240px),
    var(--bg);
  color: var(--ink);
  font-family: Inter, Arial, sans-serif;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, .btn, input, select, textarea { touch-action: manipulation; }

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(rgba(18, 25, 35, .88), rgba(18, 25, 35, .88)),
    url('../../assets/photos/cff_cover.jpg') center/cover;
}
.login-card {
  width: min(460px, 100%);
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 34px;
}
.login-logo { width: 220px; display: block; margin-bottom: 28px; }
.login-back { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-size: .88rem; font-weight: 600; color: var(--muted); text-decoration: none; transition: color .15s; }
.login-back:hover { color: var(--red); }
.login-back i { font-size: .8rem; }

.admin-layout {
  display: grid;
  grid-template-columns: 284px 1fr;
  min-height: 100vh;
}
.sidebar {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, #111a22 0%, #0a1015 100%);
  color: #fff;
  padding: 20px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  border-right: 1px solid rgba(255,255,255,.08);
}
.sidebar-logo { display: block; width: 196px; margin: 4px auto 22px; }
.nav-section { color: rgba(255,255,255,.45); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; margin: 22px 10px 8px; }
.side-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border-radius: 6px;
  color: rgba(255,255,255,.76);
  margin-bottom: 3px;
  min-height: 38px;
}
.side-link:hover, .side-link.active {
  background: rgba(255,255,255,.09);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--red);
}
.side-link span:first-child {
  min-width: 24px;
  width: 24px;
  text-align: center;
  color: #ff4d64;
  font-size: .82rem;
  font-weight: 900;
}

.main {
  min-width: 0;
}
.topbar {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 34px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar h1 { font-size: 1.18rem; margin: 0; letter-spacing: .01em; }
.topbar-actions { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .9rem; }
.content { padding: 30px 34px 44px; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 26px rgba(18, 25, 35, .07);
  overflow: hidden;
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
}
.panel-head h2, .panel h2 { margin: 0; font-size: 1.05rem; }
.panel-body { padding: 22px; }

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric { padding: 20px; border-left: 4px solid rgba(200,16,46,.72); }
.metric small { color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; }
.metric strong { display: block; font-size: 1.75rem; margin-top: 8px; }
.metric span { color: var(--muted); font-size: .88rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 14px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-weight: 700;
  font-size: .9rem;
}
.btn-primary { background: var(--red); border-color: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-dark); border-color: var(--red-dark); }
.btn-muted { background: #eef2f4; }
.btn-danger { color: #8b0b20; border-color: rgba(200,16,46,.24); background: rgba(200,16,46,.06); }
.btn-block { width: 100%; }

.table-wrap { overflow-x: auto; }
.table-wrap { -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 13px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; background: #f7f9fb; }
tbody tr:hover td { background: #fbfcfd; }
tr:last-child td { border-bottom: 0; }
.row-actions { display: flex; gap: 5px; flex-wrap: nowrap; align-items: center; justify-content: flex-end; }
td .row-actions { white-space: nowrap; }
/* Actions de ligne compactes : boutons-icônes avec infobulle (pro, plus d'empilement verbeux) */
.btn.ico {
  min-height: 0; width: 32px; height: 32px; padding: 0; gap: 0;
  border-radius: 7px; color: #5b6b7a; font-size: .88rem; flex: 0 0 auto;
}
.btn.ico:hover { color: var(--ink); background: #eef2f6; border-color: #d3dae1; }
.btn.ico.btn-primary { color:#fff; }
.btn.ico.btn-danger { color:#b3243b; background:#fff; border-color: rgba(200,16,46,.22); }
.btn.ico.btn-danger:hover { color:#fff; background: var(--red); border-color: var(--red); }

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: .76rem;
  font-weight: 800;
  background: #eef2f4;
  color: var(--muted);
}
.badge.ok { background: rgba(0,107,112,.12); color: #00585c; }
.badge.warn { background: rgba(168,121,43,.14); color: #765018; }
.badge.danger { background: rgba(200,16,46,.10); color: #8b0b20; }
.badge.dark { background: rgba(18,25,35,.10); color: var(--ink); }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field.full { grid-column: 1 / -1; }
label { display: block; font-weight: 800; margin-bottom: 6px; font-size: .86rem; }
input, select, textarea {
  width: 100%;
  border: 1px solid #cfd8df;
  background: #fff;
  border-radius: 6px;
  padding: 11px 12px;
  color: var(--ink);
  min-height: 44px;
}
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(200,16,46,.12); border-color: var(--red); }
.hint { color: var(--muted); font-size: .84rem; margin-top: 6px; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.alert {
  padding: 13px 15px;
  border-radius: 6px;
  margin-bottom: 18px;
  background: rgba(168,121,43,.12);
  border: 1px solid rgba(168,121,43,.24);
  color: #6f4b15;
}
.alert.error { background: rgba(200,16,46,.08); border-color: rgba(200,16,46,.22); color: #7d0b1e; }

.items-table input { min-width: 90px; }
.items-table .description-input { min-width: 260px; }
.totals-box {
  margin-left: auto;
  width: min(360px, 100%);
  background: #f8fafb;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 16px;
}
.total-line { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--line); }
.total-line:last-child { border-bottom: 0; font-weight: 900; font-size: 1.1rem; }

.print-page { background: #fff; color: #111; }
.print-wrap { width: min(900px, calc(100% - 32px)); margin: 24px auto; background: #fff; padding: 36px; border: 1px solid #ddd; }
.print-head { display: flex; justify-content: space-between; gap: 28px; border-bottom: 3px solid var(--red); padding-bottom: 24px; margin-bottom: 28px; }
.print-logo { width: 220px; }
.print-title { text-align: right; }
.print-title h1 { margin: 0; font-size: 2rem; }
.print-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 26px; }
.print-table th { background: #f0f2f4; color: #222; }
.qr-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: 28px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafb;
}
.qr-panel h3 { margin: 0 0 6px; }
.qr-panel p { margin: 0; color: var(--muted); }
.qr-code {
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid #ccd5dc;
  padding: 8px;
  flex: 0 0 auto;
}
.qr-code img,
.qr-code svg {
  width: 116px;
  height: 116px;
  display: block;
}
.hr-print .letter-body {
  margin-top: 28px;
  font-size: 1rem;
  line-height: 1.9;
  white-space: normal;
}
.hr-print h2 {
  margin-top: 20px;
  font-size: 1.3rem;
}
.harels-model {
  width: 794px;
  min-height: 1123px;
  padding: 68px 64px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  line-height: 1.26;
  border: 0;
  box-sizing: border-box;
}
.harels-model .print-logo { width: 250px; }
/* En-tête : deux colonnes en hauteur naturelle (plus de hack padding-top qui suppose
   une hauteur de logo fixe — robuste si le texte entreprise ou le logo change). */
.model-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  min-height: 120px;
}
.model-company { flex: 1 1 auto; }
.model-recipient {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 120px;
}
.model-company p,
.model-recipient p { margin: 4px 0 0; }
.model-title {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
}
.model-info {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  border-top: 2px solid #111;
  border-bottom: 2px solid #111;
  padding: 6px 0;
  margin-bottom: 8px;
}
.model-info span {
  display: inline-block;
  width: 118px;
}
.model-info strong { font-weight: 800; }
.model-table {
  font-size: 12px;
  border: 2px solid #111;
  margin-top: 0;
}
.model-table th,
.model-table td {
  border: 1px solid #111;
  padding: 4px 5px;
  background: #fff;
  color: #111;
}
.model-table th {
  text-align: center;
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0;
}
.model-table td:nth-child(1),
.model-table td:nth-child(3),
.model-table td:nth-child(4) { text-align: center; }
.model-table td:nth-child(5),
.model-table td:nth-child(6) { text-align: right; white-space: nowrap; }
.model-pos { width: 36px; font-weight: 800; }
.model-desc {
  width: 390px;
  min-height: 55px;
  font-weight: 600;
}
.model-totals {
  width: 100%;
  margin-top: 0;
  margin-left: auto;
  padding-left: 360px;
}
.model-total-row {
  display: grid;
  grid-template-columns: 1fr 145px;
  gap: 18px;
  padding: 3px 0;
}
.model-total-row b { text-align: right; border-top: 1px solid #111; }
.model-total-row.grand {
  font-weight: 900;
}
.model-total-row.grand b {
  border-top: 2px solid #111;
  border-bottom: 3px double #111;
}
.model-box {
  border: 2px solid #111;
  padding: 5px 6px;
  margin-top: 10px;
}
.model-thanks { margin: 8px 0 6px; }
.qr-bill {
  display: grid;
  grid-template-columns: 200px 1px 1fr;
  gap: 14px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #999;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 8px;
  line-height: 1.08;
}
.qr-bill p { margin: 3px 0 0; }
.qr-bill h3 {
  margin: 0 0 3px;
  font-size: 10px;
}
.qr-cut {
  background: #999;
  min-height: 250px;
}
.qr-payment-grid {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 14px;
}
.qr-bill .qr-code {
  width: 120px;
  height: 120px;
}
.hr-letter {
  width: 794px;
  min-height: 1123px;
  padding: 68px 64px;
  border: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  line-height: 1.55;
  box-sizing: border-box;
}
.hr-letter .print-logo { width: 330px; }
/* Même correctif que .model-head : alignement naturel, plus de hauteur supposée. */
.letter-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 44px;
  min-height: 230px;
}
.letter-recipient {
  flex: 0 0 330px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 230px;
}
.letter-date { text-align: right; margin: 0 0 78px; }
.letter-subject { font-weight: 800; text-decoration: underline; margin-bottom: 34px; }
.letter-signature {
  margin-top: 90px;
  margin-left: 55%;
  min-height: 100px;
}

@media (max-width: 980px) {
  .admin-layout { grid-template-columns: 1fr; }
  .sidebar {
    position: sticky;
    top: 0;
    z-index: 30;
    height: auto;
    max-height: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .sidebar::-webkit-scrollbar { display: none; }
  .sidebar-logo,
  .nav-section { display: none; }
  .side-link {
    flex: 0 0 auto;
    margin: 0;
    min-height: 42px;
    padding: 9px 12px;
    white-space: nowrap;
    background: rgba(255,255,255,.055);
  }
  .side-link span:first-child { min-width: 18px; width: 18px; }
  .topbar {
    position: sticky;
    top: 62px;
    height: auto;
    min-height: 62px;
    padding: 10px 16px;
  }
  .topbar h1 { font-size: 1rem; }
  .topbar-actions { gap: 8px; font-size: .82rem; }
  .content { padding: 16px 14px calc(28px + env(safe-area-inset-bottom)); }
  .grid-2, .grid-3, .grid-4, .form-grid { grid-template-columns: 1fr; }
  .panel-head {
    align-items: flex-start;
    flex-direction: column;
    padding: 16px;
  }
  .panel-body { padding: 16px; }
  .metric { padding: 16px; }
  .metric strong { font-size: 1.45rem; }
  .row-actions, .form-actions { justify-content: flex-start; }
  .btn { min-height: 44px; }
  th, td { padding: 11px 12px; }
  .print-head, .print-meta { grid-template-columns: 1fr; display: grid; text-align: left; }
  .print-title { text-align: left; }
  .harels-model,
  .hr-letter { width: calc(100vw - 18px); min-height: auto; padding: 24px 18px; }
  .model-head,
  .letter-head { flex-direction: column; min-height: 0; }
  .model-info,
  .qr-bill,
  .qr-payment-grid { grid-template-columns: 1fr; }
  .model-recipient,
  .letter-recipient { flex: 1 1 auto; justify-content: flex-start; min-height: 0; margin-top: 18px; }
  .model-totals { padding-left: 0; }
  .qr-cut { display: none; }
}

@media (max-width: 640px) {
  body { background: #f3f6f8; }
  .login-shell { padding: 16px; align-items: start; padding-top: calc(34px + env(safe-area-inset-top)); }
  .login-card { padding: 24px 20px; }
  .login-logo { width: 180px; margin-bottom: 22px; }
  .topbar { top: 62px; }
  .topbar-actions .badge { display: none; }
  .content { padding-left: 10px; padding-right: 10px; }
  .panel { border-radius: 8px; }
  .grid { gap: 12px; }
  .table-wrap table { min-width: 720px; }
  .cal { min-width: 760px; }
  .pnl { grid-template-columns: 1fr; }
  .qr-panel { flex-direction: column; align-items: flex-start; }
  .print-wrap { width: calc(100% - 18px); margin: 9px auto; padding: 22px 18px; }
  .print-logo { width: 190px; }
}

/* Correctif audit 2026-07-01 : marges de page explicites (le navigateur utilisait ses
   marges par défaut faute de règle @page — cause des marges incohérentes signalées). */
@page { size: A4; margin: 10mm 13mm; }
@media print {
  body { background: #fff; }
  .no-print { display: none !important; }
  .print-wrap { width: 100%; margin: 0; border: 0; padding: 0; }
  .harels-model,
  .hr-letter { width: 100%; min-height: auto; padding: 0; }
  thead { display: table-header-group; }
  tr { page-break-inside: avoid; }
  .model-totals, .model-box, .model-thanks, .qr-bill { page-break-inside: avoid; }
}

/* ext: agenda + equipes */
.cal{width:100%;border-collapse:collapse;table-layout:fixed}.cal th{padding:6px;font-size:.72rem;text-transform:uppercase;color:#6b7280;border-bottom:1px solid #e5e7eb}.cal td{vertical-align:top;height:92px;border:1px solid #eef0f2;padding:4px}.cal-empty{background:#fafafa}.cal-today{background:#fff7f7;outline:2px solid #fecaca}.cal-num{font-size:.78rem;color:#6b7280;margin-bottom:3px}.cal-ev{display:block;font-size:.7rem;line-height:1.3;padding:2px 5px;margin:2px 0;border-radius:5px;background:#fee2e2;color:#991b1b;text-decoration:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.cal-ev.done{background:#dcfce7;color:#166534}.cal-ev.cancelled{background:#f3f4f6;color:#6b7280;text-decoration:line-through}.dot{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle}.check-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}.check{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid #e5e7eb;border-radius:8px;font-size:.9rem}

/* compta: pnl + charts */
.pnl{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.pnl-col h3{margin:0 0 8px;font-size:.8rem;text-transform:uppercase;color:#6b7280;letter-spacing:.04em}.pnl-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f1f2f4;font-size:.92rem}.pnl-row.sub{color:#6b7280}.pnl-row.ok strong{color:#16a34a}.pnl-row.danger strong{color:#dc2626}.chart-wrap{width:100%;overflow:hidden}.chart{width:100%;height:auto;display:block}.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px;font-size:.8rem;color:#6b7280}.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:middle}
@media(max-width:720px){.pnl{grid-template-columns:1fr}}

/* === Mobile nav drawer (fix iPhone : remplace la barre horizontale) === */
.nav-toggle{display:none}.nav-overlay{display:none}
@media (max-width:980px){
 .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:4px;background:transparent;border:0;color:#111a22;font-size:1.5rem;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent;flex:0 0 auto}
 .sidebar{position:fixed;top:0;left:0;bottom:0;height:100%;width:284px;max-width:86vw;z-index:60;display:block;flex-direction:column;align-items:stretch;gap:0;overflow-x:hidden;overflow-y:auto;transform:translateX(-100%);transition:transform .25s ease;padding:calc(18px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom))}
 .sidebar-logo{display:block;width:168px;margin:2px 0 16px}
 .nav-section{display:block}
 .side-link{flex:initial;margin:0 0 3px;white-space:normal;min-height:48px;background:transparent;padding:12px}
 .side-link span:first-child{min-width:24px;width:24px}
 body.nav-open .sidebar{transform:translateX(0);box-shadow:0 18px 50px rgba(0,0,0,.55)}
 body.nav-open .nav-overlay{display:block;position:fixed;inset:0;z-index:50;background:rgba(8,12,16,.5)}
 body.nav-open{overflow:hidden}
 .topbar{top:0;min-height:60px;padding:calc(8px + env(safe-area-inset-top)) 14px 8px}
}
@media (max-width:640px){.topbar{top:0}}

/* admin mobile polish (iPhone) */
@media (max-width:980px){
 .table-wrap{-webkit-overflow-scrolling:touch}
 .topbar h1{font-size:1.02rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
 .topbar-actions span:not(.badge){display:none}
 input,select,textarea{font-size:16px}
 .btn{min-height:46px}
 .form-actions{flex-wrap:wrap;gap:8px}
 .form-actions .btn{flex:1 1 auto;justify-content:center}
 .pnl{grid-template-columns:1fr}
}

/* ============================ REDESIGN v2 HARELS ============================ */
:root{
  --red:#c8102e; --red-dark:#9c0c22;
  --ink:#0d1521; --muted:#64748b; --line:#e7ecf2; --bg:#eef1f6; --panel:#ffffff;
  --teal:#0d7377; --amber:#b07d2b;
  --radius:13px; --radius-sm:9px;
  --shadow:0 1px 2px rgba(13,21,33,.05), 0 16px 36px rgba(13,21,33,.09);
  --shadow-sm:0 1px 2px rgba(13,21,33,.06);
}
body{ background:radial-gradient(1200px 380px at 78% -8%, rgba(200,16,46,.06), transparent 60%), var(--bg); }

/* Sidebar */
.admin-layout{ grid-template-columns:270px 1fr; }
.sidebar{
  background:linear-gradient(185deg,#141d2b 0%,#0b1220 100%);
  border-right:1px solid rgba(255,255,255,.06); padding:18px 14px;
}
.sidebar-logo{ width:150px; margin:6px 8px 16px; opacity:.97; }
.nav-section{ color:rgba(255,255,255,.38); font-size:.66rem; letter-spacing:.16em; margin:18px 12px 7px; }
.side-link{
  border-radius:10px; padding:10px 12px; margin-bottom:2px; min-height:42px;
  color:rgba(255,255,255,.72); font-size:.93rem; font-weight:500; transition:background .15s,color .15s;
}
.side-link:hover{ background:rgba(255,255,255,.06); color:#fff; box-shadow:none; }
.side-link.active{ background:linear-gradient(90deg,rgba(200,16,46,.22),rgba(200,16,46,.06)); color:#fff; box-shadow:inset 3px 0 0 var(--red); }
.side-link span:first-child{ color:#ff5d72; font-weight:800; }

/* Topbar */
.topbar{
  height:70px; background:rgba(255,255,255,.82); backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar h1{ font-size:1.16rem; font-weight:700; letter-spacing:-.01em; }
.topbar-actions{ gap:10px; }
.topbar-actions .badge{ background:#eef2f7; color:#475569; }

/* Panels / cards */
.panel{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; }
.panel-head{ padding:18px 20px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.panel-head h2{ font-size:1.02rem; font-weight:700; margin:0; }
.panel-body{ padding:20px; }

/* Metrics KPI */
.metric{ position:relative; padding:18px 20px; border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; }
.metric::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(var(--red),var(--red-dark)); }
.metric small{ color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; font-weight:600; }
.metric strong{ display:block; font-size:1.72rem; font-weight:800; letter-spacing:-.02em; margin:4px 0 2px; color:var(--ink); }
.metric span{ color:var(--muted); font-size:.82rem; }

/* Buttons */
.btn{ border-radius:9px; font-weight:600; padding:9px 15px; min-height:40px; border:1px solid transparent; transition:transform .04s, box-shadow .15s, background .15s; }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:linear-gradient(180deg,var(--red),var(--red-dark)); color:#fff; box-shadow:0 6px 16px rgba(200,16,46,.28); }
.btn-primary:hover{ box-shadow:0 8px 22px rgba(200,16,46,.36); }
.btn-muted{ background:#f1f4f8; color:#334155; border-color:var(--line); }
.btn-muted:hover{ background:#e7ecf3; }
.btn-danger{ background:#fff; color:var(--red); border-color:#f3c9d1; }
.btn-danger:hover{ background:#fff1f3; }

/* Tables */
.table-wrap{ border:1px solid var(--line); border-radius:var(--radius-sm); overflow-x:auto; }
table{ width:100%; border-collapse:collapse; }
thead th{ background:#f7f9fc; color:#5b6b7d; font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700; padding:12px 14px; border-bottom:1px solid var(--line); text-align:left; }
tbody td{ padding:13px 14px; border-bottom:1px solid #f0f3f7; font-size:.92rem; }
tbody tr:last-child td{ border-bottom:0; }
tbody tr:hover{ background:#fafbfd; }

/* Badges */
.badge{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:.74rem; font-weight:600; }
.badge.ok{ background:#e7f7ee; color:#197b46; } .badge.warn{ background:#fff3e0; color:#9a6212; }
.badge.danger{ background:#fde8ec; color:#b3243b; } .badge.dark{ background:#eef2f7; color:#475569; }

/* Forms */
.field label{ font-size:.82rem; font-weight:600; color:#3b4858; margin-bottom:5px; display:block; }
input,select,textarea{ border:1px solid var(--line); border-radius:9px; padding:10px 12px; background:#fff; width:100%; transition:border-color .15s, box-shadow .15s; }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(200,16,46,.13); }
.content{ padding:26px 30px 46px; }

/* === Affichage interne des sections : compact & soigné === */
.content{ padding:22px 30px 40px; max-width:none }
.panel{ border:1px solid var(--line); border-radius:8px; box-shadow:0 1px 2px rgba(18,25,35,.04), 0 8px 22px rgba(18,25,35,.05) }
.panel + .panel{ margin-top:14px }
.panel-head{ padding:14px 18px }
.panel-head h2, .panel h2{ font-size:.96rem; font-weight:700; letter-spacing:-.01em }
.panel-body{ padding:18px }
.grid, .grid-2, .grid-3, .grid-4{ gap:14px }
h1{ font-size:1.45rem }

/* Tableaux */
.table-wrap{ border:1px solid var(--line); border-radius:8px; overflow:hidden }
table{ width:100%; border-collapse:collapse }
thead th{ padding:10px 16px; font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; background:#f7f9fc; color:#64748b; border-bottom:1px solid var(--line) }
tbody td{ padding:11px 16px; font-size:.875rem; border-bottom:1px solid #eef2f7; vertical-align:middle }
/* Anti-débordement : ne coupe QUE les chaînes vraiment trop longues (URLs, texte collé sans
   espace), sans couper les mots/nombres normaux au milieu. L'éditeur .items-table est exclu. */
.table-wrap table:not(.items-table) tbody td{ overflow-wrap:break-word }
/* Éléments qui ne doivent jamais se couper : badges, montants, dates */
.badge{ white-space:nowrap }
.table-wrap td.num, .table-wrap td.money, .table-wrap td .money, .table-wrap td .amount{ white-space:nowrap }
.nowrap{ white-space:nowrap }
tbody tr:last-child td{ border-bottom:0 }
tbody tr:hover td{ background:#fafbfd }
tbody td small{ color:var(--muted); font-size:.78rem }
tbody td a{ color:var(--ink) }
tbody td a:hover{ color:var(--red) }

/* Boutons d'action dans les lignes : icônes compactes sur une seule ligne */
.row-actions{ gap:5px; flex-wrap:nowrap; justify-content:flex-end }
.row-actions .btn{ padding:6px 12px; min-height:30px; font-size:.68rem }
.row-actions .btn.ico{ padding:0; width:32px; height:32px; min-height:0; font-size:.9rem }

/* Contacts multiples d'un client */
.contacts-block{ margin-top:6px }
.contacts-label{ display:block; font-size:.78rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px }
.contact-row{ display:grid; grid-template-columns:1.2fr 1fr 1.3fr 1fr auto; gap:8px; margin-bottom:8px; align-items:center }
.contact-row input{ width:100% }
#add-contact{ margin-top:2px }
@media(max-width:760px){ .contact-row{ grid-template-columns:1fr 1fr } }
.contacts-view{ margin-top:10px; padding-top:10px; border-top:1px solid var(--line) }
.contacts-view ul{ list-style:none; padding:0; margin:6px 0 0; display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:8px }
.contacts-view li{ padding:8px 11px; border:1px solid var(--line); border-radius:8px; font-size:.9rem; line-height:1.35 }
.contacts-view .muted{ color:var(--muted); font-size:.85rem }

/* Cartes de références : boutons alignés en bas quelle que soit la longueur du titre */
.grid .ref-card{ display:flex; flex-direction:column; height:100% }
.ref-card .panel-body{ display:flex; flex-direction:column; flex:1 }
.ref-card .row-actions{ margin-top:auto; padding-top:10px }

/* Cartes métriques : compactes & élégantes */
.metric{ padding:15px 18px; border-radius:8px }
.metric small{ font-size:.66rem; letter-spacing:.06em; font-weight:700 }
.metric strong{ font-size:1.4rem; margin:5px 0 2px; letter-spacing:-.02em }
.metric span{ font-size:.76rem }
.metric::before{ width:3px }

/* En-tête de panneau : bouton plus discret */
.panel-head .btn{ padding:8px 14px; min-height:34px; font-size:.72rem }

/* Formulaires resserrés */
.form-grid{ gap:14px 16px }
.field label{ font-size:.8rem; margin-bottom:5px; color:#3b4858 }
input, select, textarea{ padding:9px 12px }
.badge{ font-size:.72rem; padding:3px 9px }
.alert{ border-radius:6px; font-size:.9rem; padding:12px 14px }

/* re-assert mobile (doit rester APRÈS le redesign) */
.nav-toggle{display:none}.nav-overlay{display:none}
@media (max-width:980px){
  .admin-layout{grid-template-columns:1fr}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:4px;background:transparent;border:0;color:#0d1521;font-size:1.5rem;line-height:1;cursor:pointer;flex:0 0 auto}
  .sidebar{position:fixed;top:0;left:0;bottom:0;height:100%;width:280px;max-width:86vw;z-index:60;display:block;transform:translateX(-100%);transition:transform .25s ease;padding:calc(18px + env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom));overflow-y:auto}
  .sidebar-logo{display:block}.nav-section{display:block}
  .side-link{min-height:48px;white-space:normal}
  body.nav-open .sidebar{transform:translateX(0);box-shadow:0 18px 50px rgba(0,0,0,.55)}
  body.nav-open .nav-overlay{display:block;position:fixed;inset:0;z-index:50;background:rgba(8,12,16,.5)}
  body.nav-open{overflow:hidden}
  .topbar{top:0;height:auto;min-height:58px;padding:calc(8px + env(safe-area-inset-top)) 14px 8px}
  .topbar h1{font-size:1.02rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .topbar-actions span:not(.badge){display:none}
  .grid-2,.grid-3,.grid-4,.form-grid{grid-template-columns:1fr}
  input,select,textarea{font-size:16px}
  .btn{min-height:46px}
  .content{padding:16px 13px calc(28px + env(safe-area-inset-bottom))}
  .table-wrap{-webkit-overflow-scrolling:touch}
  .pnl{grid-template-columns:1fr}
}
/* === Harmonisation avec le design public 2027 === */
body{font-family:Inter,system-ui,Arial,sans-serif}
.topbar h1,.panel h2,.panel-head h2,.metric strong,.login-card h1,.login-card h2,.nav-section,.btn{font-family:Montserrat,Inter,Arial,sans-serif}
.topbar h1,.panel h2,.panel-head h2,.metric strong{letter-spacing:-.01em}
.login-shell{
  background-color:#0b1016;
  background-image:
    linear-gradient(rgba(200,16,46,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,16,46,.16) 1px, transparent 1px),
    linear-gradient(120deg, rgba(11,16,22,.95), rgba(11,16,22,.82)),
    url('../../assets/photos/cff_cover.webp');
  background-size:46px 46px, 46px 46px, cover, cover;
  background-position:center;
  background-repeat:repeat, repeat, no-repeat, no-repeat;
}

/* === Alignement charte du site déployé (style-v2) : rouge officiel + angles nets === */
:root{ --red:#C8102E; --red-dark:#A00C24; }
.btn,.btn-primary,.btn-muted,.btn-danger{ border-radius:4px }
.panel,.login-card,.metric{ border-radius:6px }
input,select,textarea{ border-radius:4px }
.badge{ border-radius:3px }
.side-link{ border-radius:3px }
/* Boutons & accents alignés sur le site original (style-v2) */
.btn{ font-family:Montserrat,Inter,sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.03em; font-size:.78rem; padding:10px 18px; border-radius:4px }
.btn-primary{ background:var(--red); color:#fff; box-shadow:none; border:0 }
.btn-primary:hover{ background:var(--red-dark); transform:translateY(-1px); box-shadow:0 6px 20px rgba(200,16,46,.35) }
.btn-muted{ background:#fff; color:#1c1c1c; border:1.5px solid #d9e0e7 }
.btn-muted:hover{ background:#1c1c1c; color:#fff; border-color:#1c1c1c }
.btn-danger{ background:#fff; color:var(--red); border:1.5px solid #f0c4cc }
.btn-danger:hover{ background:var(--red); color:#fff; border-color:var(--red) }
.topbar{ border-bottom:2px solid var(--red) }
.nav-section{ letter-spacing:.14em }
.side-link.active{ box-shadow:inset 3px 0 0 var(--red) }

/* === Menu groupé en catégories (repliable) === */
.sidebar{ display:flex; flex-direction:column }
.side-top{ display:flex; align-items:center; gap:10px; padding:11px; border-radius:6px; color:#fff; font-family:Montserrat,Inter,sans-serif; font-weight:700; font-size:.9rem; background:rgba(255,255,255,.06); margin-bottom:10px }
.side-top:hover{ background:rgba(255,255,255,.12) }
.side-top.active{ background:var(--red) }
.side-top-ico{ min-width:22px; text-align:center; color:#ff4d64; font-weight:900 }
.side-top.active .side-top-ico{ color:#fff }
.nav-group{ margin-bottom:1px }
.nav-group-head{ display:flex; align-items:center; gap:10px; width:100%; background:none; border:0; cursor:pointer; text-align:left; color:rgba(255,255,255,.82); padding:10px 11px; border-radius:6px; font-family:Montserrat,Inter,sans-serif; font-weight:600; font-size:.84rem }
.nav-group-head:hover{ background:rgba(255,255,255,.07) }
.nav-group-ico{ min-width:22px; text-align:center; color:#ff4d64; font-weight:900; font-size:.8rem }
.nav-group-label{ flex:1 }
.nav-group-caret{ transition:transform .2s; font-size:.62rem; opacity:.5 }
.nav-group.open .nav-group-caret{ transform:rotate(180deg) }
.nav-group.has-active .nav-group-head{ color:#fff }
.nav-group-items{ overflow:hidden; max-height:0; transition:max-height .25s ease }
.nav-group.open .nav-group-items{ max-height:560px }
.side-sub{ display:block; position:relative; padding:8px 12px 8px 42px; border-radius:6px; color:rgba(255,255,255,.72); font-size:.84rem; margin:1px 0 }
.side-sub:hover{ background:rgba(255,255,255,.08); color:#fff }
.side-sub.active{ background:rgba(255,255,255,.1); color:#fff; box-shadow:inset 3px 0 0 var(--red) }
.side-sub::before{ content:""; position:absolute; left:27px; top:50%; width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.28); transform:translateY(-50%) }
.side-sub.active::before{ background:var(--red) }
.nav-foot{ margin-top:auto; padding-top:12px; border-top:1px solid rgba(255,255,255,.08) }

/* === Logo live + icônes Font Awesome + finitions === */
.sidebar-brand{ background:#fff; margin:-20px -16px 16px; padding:18px 16px; text-align:left; border-bottom:1px solid rgba(0,0,0,.06) }
.sidebar-logo{ width:150px; height:auto; margin:0; display:inline-block }
.nav-group-ico, .side-top-ico{ display:inline-flex; align-items:center; justify-content:center; min-width:22px }
.nav-group-ico i, .side-top-ico i{ font-size:.92rem }
.side-sub{ display:flex; align-items:center; gap:10px; padding:8px 14px 8px 30px }
.side-sub-ico{ width:16px; flex:0 0 auto; text-align:center; font-size:.74rem; color:rgba(255,255,255,.4) }
.side-sub.active .side-sub-ico{ color:#ff5d72 }
.side-sub::before{ display:none }
.nav-group-caret i{ font-size:.6rem }
.side-link span:first-child{ display:inline-flex; align-items:center; justify-content:center }

/* === Cartes KPI avec icône === */
.kpi{ display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px 18px; box-shadow:0 1px 2px rgba(18,25,35,.04),0 10px 24px rgba(18,25,35,.06); transition:transform .15s, box-shadow .15s }
.kpi:hover{ transform:translateY(-2px); box-shadow:0 1px 2px rgba(18,25,35,.04),0 16px 32px rgba(18,25,35,.10) }
.kpi-ico{ width:46px; height:46px; flex:0 0 auto; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:1.15rem; color:#fff }
.kpi-body{ min-width:0 }
.kpi-label{ font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700 }
.kpi-val{ font-family:Montserrat,Inter,sans-serif; font-size:1.46rem; font-weight:800; letter-spacing:-.02em; line-height:1.1; margin-top:2px; color:var(--ink) }
.kpi-sub{ font-size:.74rem; color:var(--muted); margin-top:1px }
.kpi-red .kpi-ico{ background:linear-gradient(135deg,#ef3a52,#c8102e) }
.kpi-blue .kpi-ico{ background:linear-gradient(135deg,#3b82f6,#2563eb) }
.kpi-green .kpi-ico{ background:linear-gradient(135deg,#22c55e,#16a34a) }
.kpi-amber .kpi-ico{ background:linear-gradient(135deg,#f59e0b,#d97706) }
.kpi-slate .kpi-ico{ background:linear-gradient(135deg,#64748b,#475569) }
.kpi-teal .kpi-ico{ background:linear-gradient(135deg,#14b8a6,#0d9488) }

/* === Cartes graphiques (Chart.js) === */
.chart-card{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px 22px; box-shadow:0 1px 2px rgba(18,25,35,.04),0 10px 24px rgba(18,25,35,.06) }
.chart-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px }
.chart-head h2{ font-size:1rem; margin:0; font-weight:700 }
.chart-wrap{ position:relative; height:300px }
.chart-wrap-sm{ position:relative; height:236px }
.chart-legend{ display:flex; gap:18px; flex-wrap:wrap; margin-top:14px; font-size:.8rem; color:var(--muted); font-weight:500 }
.chart-legend span{ display:inline-flex; align-items:center; gap:7px }
.chart-legend i{ width:11px; height:11px; border-radius:3px; display:inline-block }

/* === Formulaires soignés === */
form.panel .panel-body{ padding:24px }
.form-actions{ display:flex; justify-content:flex-end; align-items:center; gap:10px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line) }
.field.full{ grid-column:1 / -1 }
.field textarea{ min-height:120px }
input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus){ border-color:#c3cedb }

/* === Graphiques du dashboard (responsive) === */
.dash-charts{ display:grid; grid-template-columns:1.7fr 1fr; gap:14px; margin-top:16px }
.dash-charts > .chart-card{ min-width:0 }
.chart-wrap canvas, .chart-wrap-sm canvas{ max-width:100% !important }
@media(max-width:980px){ html, body{ overflow-x:hidden } }
.main{ overflow-x:hidden; min-width:0 }
.kpi{ min-width:0 }
.kpi-val{ overflow:hidden; text-overflow:ellipsis }

/* === Ajustements mobiles (audit) === */
@media(max-width:980px){
  .dash-charts{ grid-template-columns:1fr }
  .chart-card{ overflow:hidden }
  .chart-head{ flex-wrap:wrap; gap:8px }
  .chart-head .btn{ display:none }
  .sidebar-brand{ margin:-18px -14px 14px }
  .form-actions{ flex-direction:column; align-items:stretch }
  .form-actions .btn{ width:100%; justify-content:center }
  .topbar-actions > i.fa-circle-user{ display:none }
  .chart-wrap{ height:260px }
  .content{ padding:16px 13px calc(28px + env(safe-area-inset-bottom)) }
  form.panel .panel-body{ padding:18px }
  .kpi{ padding:14px 16px }
}

/* === Sidebar noir complet + logo détouré === */
.sidebar{ background:#000; border-right:1px solid rgba(255,255,255,.06) }
.sidebar-brand{ background:transparent; border-bottom:1px solid rgba(255,255,255,.10); margin:-20px -16px 16px; padding:18px 16px }
.sidebar-logo{ width:162px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)) }

/* === Curseurs sur éléments interactifs === */
a, a.kpi, .side-top, .side-sub, .nav-group-head, [data-group-toggle], button, .btn, select, [onclick], [data-add-item], [data-add-cost], summary{ cursor:pointer }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=tel], textarea{ cursor:text }
input[disabled], button[disabled], .btn[disabled]{ cursor:not-allowed }

/* === 2026-07-02 : barre du logo (sidebar) — logo collé à gauche (aligné sur le menu) +
   hauteur = topbar (la ligne sous le logo coïncide avec la ligne du topbar quand le menu est ouvert). */
.sidebar-brand{ height:70px; display:flex; align-items:center; justify-content:flex-start; box-sizing:border-box; padding-top:0; padding-bottom:0 }
.sidebar-logo{ margin:0 }
@media (max-width:980px){
  .sidebar-brand{ height:60px; margin:-18px -14px 12px; padding:0 14px }
  .sidebar-logo{ height:32px; width:auto }
}

/* === Finitions alignement (éditeur, tables) === */
.totals-box{ max-width:340px; margin-left:auto; background:#fff; border:1px solid var(--line); border-radius:8px; padding:4px 16px }
.totals-box .total-line{ display:flex; align-items:center; justify-content:space-between; padding:7px 0; font-size:.92rem }
.totals-box .total-line:last-child{ border-top:1.5px solid var(--ink); margin-top:2px; padding-top:9px; font-weight:800; font-size:1.02rem }
.items-table th, .items-table td{ vertical-align:middle }
.items-table input{ width:100% }
table td, table th{ vertical-align:middle }
.field input, .field select, .field textarea{ width:100% }

/* === Menu : logo centré + texte blanc (retour client) === */
.sidebar-brand{ display:flex; align-items:center; justify-content:center; text-align:center; padding:20px 12px }
.sidebar-logo{ width:172px; max-width:88%; margin:0 auto; display:block }
.nav-group-head{ color:#fff }
.nav-group-head:hover{ color:#fff }
.side-sub{ color:#f2f2f2 }
.side-sub:hover{ color:#fff }
.side-top{ color:#fff }
.side-link{ color:#fff }

/* === Textes plus sobres / moins gros === */
.topbar h1{ font-size:1.1rem }
.panel-head h2, .panel h2{ font-size:.92rem }
.metric strong{ font-size:1.25rem }
.kpi-val{ font-size:1.26rem }
.kpi-ico{ width:42px; height:42px; font-size:1.02rem; border-radius:11px }
.kpi-label{ font-size:.66rem }
.kpi-sub, .metric span{ font-size:.74rem }
.content{ padding:20px 24px 36px }

/* === Menu plus grand & lisible (retour client) === */
.side-top{ font-size:.9rem; padding:11px 12px; margin-bottom:10px }
.side-top-ico i{ font-size:.98rem }
.nav-group-head{ font-size:.86rem; padding:10px 12px }
.nav-group-ico{ min-width:23px }
.nav-group-ico i{ font-size:.96rem }
.nav-group-label{ font-size:.86rem }
.side-sub{ font-size:.84rem; padding:8px 14px 8px 34px }
.side-sub-ico{ font-size:.78rem; width:17px }
.nav-foot .side-link{ font-size:.86rem; padding:10px 12px }
.nav-foot .side-link span:first-child{ min-width:24px }

/* === Scrollbars propres (curseurs) === */
*{ scrollbar-width:thin; scrollbar-color:rgba(130,140,155,.45) transparent }
::-webkit-scrollbar{ width:11px; height:11px }
::-webkit-scrollbar-track{ background:transparent }
::-webkit-scrollbar-thumb{ background:rgba(130,140,155,.40); border-radius:9px; border:3px solid transparent; background-clip:content-box }
::-webkit-scrollbar-thumb:hover{ background:rgba(130,140,155,.62); background-clip:content-box }
.sidebar::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.22); background-clip:content-box }
.sidebar{ scrollbar-color:rgba(255,255,255,.25) transparent }

/* === Mobile : KPI en 2 colonnes, icône au-dessus (texte pleine largeur, pas de coupure) === */
@media(max-width:980px){
  .grid-4, .grid-3{ grid-template-columns:1fr 1fr; gap:10px }
  .kpi{ flex-direction:column; align-items:flex-start; gap:8px; padding:13px 13px; border-radius:11px }
  .kpi-ico{ width:38px; height:38px; font-size:.95rem; border-radius:10px }
  .kpi-body{ width:100% }
  .kpi-label{ font-size:.6rem; white-space:normal; line-height:1.2 }
  .kpi-val{ font-size:1.1rem; white-space:nowrap; overflow:visible; text-overflow:clip }
  .kpi-sub{ font-size:.66rem; line-height:1.2 }
  .metric{ padding:14px }
  .metric strong{ font-size:1.15rem }
}

/* === Mobile : en-têtes de panneau centrés (titre + bouton) partout === */
@media(max-width:980px){
  .panel-head{ flex-direction:column; align-items:center; text-align:center; gap:10px }
  .panel-head h2{ text-align:center; width:100% }
  .panel-head .btn{ width:auto }
}

/* === Logo du menu = boîte blanche arrondie (identique au footer du site) === */
.sidebar-brand{ background:transparent; border-bottom:1px solid rgba(255,255,255,.10); display:flex; align-items:center; justify-content:center; padding:18px 12px }
.sidebar-logo{ background:#fff; padding:6px 14px; border-radius:5px; height:38px; width:auto; max-width:none; display:block; margin:0 auto; filter:none }

/* === Sidebar fixe pleine hauteur (desktop) — suit le scroll, plus de "menu trop petit" === */
@media(min-width:981px){
  .admin-layout{ display:block }
  .sidebar{ position:fixed; top:0; left:0; width:292px; height:100vh; overflow-y:auto; z-index:40 }
  .main{ margin-left:292px }
}

/* === Icônes du menu en rouge logo #C8102E (admin + tous les rôles) === */
.nav-group-ico i, .side-top-ico i{ color:#C8102E }
.side-top.active .side-top-ico i{ color:#fff }
.side-sub-ico{ color:#C8102E }
.nav-foot .side-link i{ color:#C8102E }

/* === Mobile : boutons qui passent à la ligne (n'élargissent plus le contenu) === */
@media(max-width:980px){
  .btn{ white-space:normal; line-height:1.2; height:auto }
  .panel-head{ max-width:100% }
  .panel-head .btn{ max-width:100% }
}

/* === Mobile : tableaux de listes en cartes empilées (libellé au-dessus, valeur dessous) ===
   Scopé à `.table-wrap table` SAUF .items-table (éditeur). Exclut donc automatiquement
   le calendrier .cal (hors .table-wrap) et le modèle imprimé .print-table.
   `min-width:0` annule le .table-wrap table{min-width:720px} qui faisait déborder la page. */
@media(max-width:760px){
  .panel{ overflow:hidden }
  .panel-head{ flex-wrap:wrap }
  .panel-head .btn{ width:100%; max-width:340px; white-space:normal; line-height:1.25 }
  .table-wrap{ border:0; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100% }
  .table-wrap table:not(.items-table) thead{ display:none }
  .table-wrap table:not(.items-table),
  .table-wrap table:not(.items-table) tbody,
  .table-wrap table:not(.items-table) tr,
  .table-wrap table:not(.items-table) td{ display:block; width:100%; max-width:100%; min-width:0 }
  .table-wrap table:not(.items-table) tr{ border:1px solid var(--line); border-radius:10px; margin-bottom:10px; padding:10px 14px; background:#fff }
  .table-wrap table:not(.items-table) tbody tr:hover td{ background:transparent }
  .table-wrap table:not(.items-table) td{ padding:6px 0; border:0; border-bottom:1px solid #eef2f7; text-align:left; font-size:.92rem; word-break:break-word }
  .table-wrap table:not(.items-table) tr td:last-child{ border-bottom:0 }
  .table-wrap table:not(.items-table) td::before{ content:attr(data-label); display:block; font-weight:700; font-size:.62rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:2px }
  .table-wrap table:not(.items-table) td:first-child{ font-weight:700 }
  .table-wrap table:not(.items-table) td:last-child::before{ display:none }
  .table-wrap table:not(.items-table) td .row-actions{ display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; width:100%; max-width:100% }
  .table-wrap table:not(.items-table) td form{ display:inline-flex; margin:0 }
  .table-wrap table:not(.items-table) td .row-actions .btn{ font-size:.72rem; min-height:34px; padding:7px 11px; flex:0 1 auto }
}
/* calendrier agenda : scroll horizontal au lieu de déborder/casser la page (mobile) */
.cal-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100% }
/* agenda : numéro de jour cliquable (créer un RDV) + lien "+N autres" */
.cal-num-link{ text-decoration:none; color:#6b7280; display:inline-block; border-radius:5px; padding:0 5px; font-weight:600 }
.cal-num-link:hover{ background:#C8102E; color:#fff }
.cal-today .cal-num-link{ color:#C8102E }
.cal-today .cal-num-link:hover{ color:#fff }
.cal-more{ display:block; font-size:.66rem; color:#6b7280; text-decoration:none; margin-top:2px; font-weight:600 }
.cal-more:hover{ color:#C8102E }
.agenda-filters select{ padding:8px 10px }

/* bouton "nu" (class="btn" seul, ex. Modifier/Documents/Lettre) : cadre visible pour qu'il ne ressemble pas à du texte */
.btn:not([class*="btn-"]){ border:1px solid var(--line); background:#fff; color:#1f2937 }
.btn:not([class*="btn-"]):hover{ background:#f7f9fc }

/* cases à cocher / radios : ne pas les étirer à 100% comme les autres inputs */
input[type=checkbox], input[type=radio]{ width:18px; height:18px; display:inline-block; vertical-align:middle; accent-color:#C8102E }
.field input[type=checkbox], .field input[type=radio]{ width:18px }

/* calendrier agenda : grille 7 colonnes sur mobile (le week-end n'est plus coupé) */
@media(max-width:760px){
  .cal-scroll{ overflow:visible }
  .cal{ min-width:0; width:100%; table-layout:fixed; border-collapse:collapse }
  .cal thead tr, .cal tbody tr{ display:grid; grid-template-columns:repeat(7,1fr) }
  .cal th{ display:block; padding:4px 1px; font-size:.55rem; text-align:center }
  .cal td{ display:block; min-height:44px; height:auto; padding:2px 1px; font-size:.62rem; overflow:hidden }
  .cal .cal-num{ font-size:.6rem; margin-bottom:1px }
  .cal .cal-ev{ font-size:.5rem; line-height:1.15; padding:1px 2px; margin:1px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
}

/* QR-bill suisse + serif (documents imprimés) */
.print-page,.harels-model,.hr-letter,.print-wrap{font-family:"Times New Roman",Georgia,"Liberation Serif",serif}
.qr-code{position:relative}
.qr-code::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:15%;height:15%;background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iI2ZmZiIvPjxyZWN0IHg9IjYiIHk9IjYiIHdpZHRoPSI4OCIgaGVpZ2h0PSI4OCIgZmlsbD0iIzAwMCIvPjxyZWN0IHg9IjQzIiB5PSIyMiIgd2lkdGg9IjE0IiBoZWlnaHQ9IjU2IiBmaWxsPSIjZmZmIi8+PHJlY3QgeD0iMjIiIHk9IjQzIiB3aWR0aD0iNTYiIGhlaWdodD0iMTQiIGZpbGw9IiNmZmYiLz48L3N2Zz4=") center/contain no-repeat}

/* ============================================================================
   CONSOLIDATION RESPONSIVE — audit alignement 2026-07-01
   Placé en fin de fichier : gagne la cascade sur les blocs mobiles antérieurs.
   Corrige les 2 vrais problèmes mesurés (débordement réel au viewport rendu) :
   1) éditeur de lignes devis/coûts (.items-table) trop large -> cartes empilées
   2) KPI 2 colonnes trop étroit pour les montants CHF à 7 chiffres -> 1 colonne
   Filets de sécurité anti-débordement (min-width:0) sur les conteneurs numériques.
   ============================================================================ */

/* 1. Éditeur de lignes (devis/factures) & coûts : empilé et labellisé sur mobile,
      au lieu d'un tableau 6 colonnes qui obligeait à scroller horizontalement. */
@media (max-width: 760px) {
  .items-table { border: 0; }
  .items-table thead { display: none; }
  .items-table tbody,
  .items-table tr,
  .items-table td { display: block; width: 100%; max-width: 100%; min-width: 0; }
  .items-table tr {
    border: 1px solid var(--line); border-radius: 10px;
    padding: 12px 14px; margin-bottom: 12px; background: #fff;
  }
  .items-table td { padding: 7px 0; border: 0; }
  .items-table td[data-label]::before {
    content: attr(data-label); display: block;
    font-weight: 700; font-size: .62rem; text-transform: uppercase;
    letter-spacing: .04em; color: var(--muted); margin-bottom: 4px;
  }
  .items-table td[data-label=""]::before { display: none; }
  .items-table td input { width: 100%; }
  .items-table td[data-label="Total"] { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 4px; }
  .items-table td[data-label="Total"]::before { margin-bottom: 0; }
  .items-table td[data-label="Total"] strong { font-size: 1.05rem; }
  .items-table td:last-child .btn { width: 100%; justify-content: center; }
  /* neutralise l'ancien min-width:720px qui forçait le scroll de ce tableau */
  .table-wrap:has(.items-table) { overflow: visible; }
  .items-table { min-width: 0 !important; }
}

/* 2. KPI : une seule colonne sur téléphones (≤430px) pour que les montants CHF
      à 6–7 chiffres (ex. 5'752'730.05 CHF) tiennent toujours sur une ligne. */
@media (max-width: 430px) {
  .grid-4, .grid-3 { grid-template-columns: 1fr; }
  .kpi { flex-direction: row; align-items: center; }
  .kpi-body { width: auto; }
  .kpi-val { white-space: nowrap; overflow: visible; text-overflow: clip; font-size: 1.28rem; }
}

/* 3. Filets de sécurité : les valeurs numériques ne peuvent jamais forcer une
      largeur supérieure au conteneur (donc ne sont jamais coupées). */
.pnl-col, .pnl-row, .kpi, .kpi-body, .metric, .total-line { min-width: 0; }
.pnl-row { gap: 12px; }
.pnl-row strong, .total-line span:last-child { text-align: right; overflow-wrap: anywhere; }

/* === 2026-07-02 (FINAL, autoritaire) : alignement du logo sidebar ===
   Logo collé à gauche (aligné sur les items du menu, l=14px) et hauteur de la barre du logo
   égale à celle du topbar (=> la ligne sous le logo coïncide avec la ligne du topbar). */
.sidebar-brand{ justify-content:center !important; text-align:center; }
.sidebar-logo{ margin:0 auto !important; }
@media (max-width:980px){
  .sidebar-brand{ height:62px; padding:0 14px; margin:-18px -14px 12px; }
  .sidebar-logo{ height:32px; width:auto; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ATELIER ACIER — montée en gamme visuelle (identité métallerie HARELS)
   Additif : n'ajuste que des détails ; l'ordre source lui donne la priorité.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --steel:#1c2128; --steel-2:#2b3542; --steel-line:#c9d3dd;
  --weld:#c8102e; --weld-soft:rgba(200,16,46,.10);
}
/* Chiffres alignés (tabular) — précision « atelier » sur tous les montants */
.kpi-val, .num, td.num, th.num, .stat-val, .money{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

/* Cartes KPI : filet acier + spine d'accent soudé sur le bord gauche */
.kpi{ position:relative; overflow:hidden; border-color:var(--steel-line); }
.kpi::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg, var(--weld), var(--red-dark)); }
.kpi-blue::after{ background:linear-gradient(180deg,#3b82f6,#2563eb) }
.kpi-green::after{ background:linear-gradient(180deg,#22c55e,#16a34a) }
.kpi-amber::after{ background:linear-gradient(180deg,#f59e0b,#d97706) }
.kpi-slate::after{ background:linear-gradient(180deg,#64748b,#475569) }
.kpi-teal::after{ background:linear-gradient(180deg,#14b8a6,#0d9488) }
.kpi-ico{ box-shadow:0 6px 14px -4px rgba(18,25,35,.42) }

/* En-tête de panneau : signature « soudure » (tick rouge) + hiérarchie nette */
.panel-head h2{ position:relative; padding-left:15px; }
.panel-head h2::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:4px; height:1.02em; border-radius:1px; background:linear-gradient(180deg,var(--weld),var(--red-dark)); }

/* ── Board de tâches (kanban chantier) ───────────────────────────────── */
.task-progress{ height:6px; background:var(--line); border-radius:99px; overflow:hidden; margin:0 0 14px; }
.task-progress-bar{ height:100%; background:linear-gradient(90deg,#16a34a,#22c55e); border-radius:99px; transition:width .3s; }
.task-board{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.task-col{ background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:10px; min-height:80px; }
.task-col-head{ font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); padding:2px 4px 10px; display:flex; justify-content:space-between; }
.task-col-head span{ background:#fff; border:1px solid var(--line); border-radius:99px; padding:0 8px; color:var(--ink); }
.task-col-todo{ border-top:3px solid #94a3b8 } .task-col-doing{ border-top:3px solid #3b82f6 } .task-col-done{ border-top:3px solid #16a34a }
.task-card{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px 11px; margin-bottom:9px; box-shadow:0 1px 2px rgba(18,25,35,.05) }
.task-card:last-child{ margin-bottom:0 }
.task-card-top{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:.9rem; color:var(--ink) }
.task-prio{ width:9px; height:9px; border-radius:50%; flex:0 0 auto }
.task-title{ min-width:0 }
.task-desc{ font-size:.78rem; color:var(--muted); margin:5px 0 0 }
.task-meta{ display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:8px; font-size:.75rem; color:var(--muted) }
.task-who i{ color:#c8102e; margin-right:3px }
.task-unassigned{ font-style:italic; opacity:.75 }
.task-due{ display:inline-flex; align-items:center; gap:4px }
.task-due.overdue{ color:#c8102e; font-weight:700 }
.task-actions{ display:flex; align-items:center; gap:6px; margin-top:9px }
.task-move{ margin:0; flex:1 1 auto }
.task-move select{ width:100%; font-size:.74rem; padding:4px 6px; border:1px solid var(--line); border-radius:6px; background:#fff }
.task-ico{ border:1px solid var(--line); background:#fff; border-radius:6px; width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; color:var(--muted); font-size:.76rem; padding:0; cursor:pointer }
.task-ico:hover{ color:var(--ink); border-color:var(--muted) }
.task-del:hover{ color:#c8102e; border-color:#c8102e }
.task-empty{ font-size:.78rem; color:var(--muted); text-align:center; padding:14px 0; opacity:.7 }
@media (max-width:820px){ .task-board{ grid-template-columns:1fr } }

/* ── Cartes projets d'accès rapide (dashboard) ───────────────────────── */
.proj-quick{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px }
.proj-card{ display:block; background:#fff; border:1px solid var(--line); border-left:3px solid var(--weld); border-radius:10px; padding:12px 14px; text-decoration:none; color:var(--ink); box-shadow:0 1px 2px rgba(18,25,35,.05); transition:transform .15s, box-shadow .15s }
.proj-card:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(18,25,35,.10) }
.proj-card-title{ font-weight:800; font-size:.92rem; margin-bottom:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.proj-card-meta{ font-size:.74rem; color:var(--muted); display:flex; justify-content:space-between; align-items:center; gap:8px }
.proj-bar{ height:5px; background:var(--line); border-radius:99px; margin-top:8px; overflow:hidden }
.proj-bar-fill{ height:100%; background:linear-gradient(90deg,#c8102e,#ef3a52); border-radius:99px }

/* ── Bandeau identité projet (nom + n° d'affaire) ────────────────────── */
.proj-idbar{ display:flex; flex-wrap:wrap; gap:12px 34px; padding:12px 16px; margin:0 0 14px; background:var(--bg); border:1px solid var(--line); border-left:3px solid var(--weld); border-radius:10px }
.proj-idcell{ display:flex; flex-direction:column; gap:2px }
.proj-idlabel{ font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:800 }
.proj-idval{ font-size:1.05rem; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.01em }

/* ── Échéance de tâche dans le calendrier agenda ─────────────────────── */
.cal-task{ display:block; font-size:.66rem; line-height:1.3; padding:2px 5px; margin-top:3px; border-radius:4px; background:#fff; border:1px solid var(--line); border-left:3px solid var(--weld); color:var(--ink); text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.cal-task i{ font-size:.58rem; opacity:.65; margin-right:2px }
.cal-task:hover{ background:var(--bg); border-color:var(--muted) }
.cal-deliv{ display:block; font-size:.66rem; line-height:1.3; padding:2px 5px; margin-top:3px; border-radius:4px; background:#fff; border:1px solid var(--line); border-left:3px solid #0d7377; color:var(--ink); text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.cal-deliv i{ font-size:.58rem; opacity:.75; margin-right:2px; color:#0d7377 }
.cal-deliv:hover{ background:var(--bg); border-color:var(--muted) }
.proj-card-tasks{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:8px; padding-top:8px; border-top:1px solid var(--line); font-size:.73rem; color:var(--muted) }
.proj-card-tasks i{ opacity:.7; margin-right:2px }
.proj-overdue{ color:#c8102e; font-weight:700 }

/* ── Onglets de la fiche projet ──────────────────────────────────────── */
.proj-tabs{ display:flex; flex-wrap:wrap; gap:2px; margin:18px 0 0; border-bottom:2px solid var(--line) }
.proj-tab{ background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-2px; padding:9px 15px; font-weight:700; font-size:.9rem; color:var(--muted); cursor:pointer; border-radius:7px 7px 0 0 }
.proj-tab:hover{ color:var(--ink); background:var(--bg) }
.proj-tab.active{ color:var(--red); border-bottom-color:var(--red) }
.proj-pane{ display:none }
.proj-pane.active{ display:block; margin-top:16px }
.proj-pane.active > .panel:first-child, .proj-pane.active > .grid:first-child{ margin-top:0 !important }