/* Ergon components.css */
  .btn { padding: 7px 14px; border-radius: var(--radius); border: 1px solid var(--border2); background: var(--surface); cursor: pointer; font-size: 13px; color: var(--text); display: inline-flex; align-items: center; gap: 6px; transition: background 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s, transform 0.06s; font-family: inherit; white-space: nowrap; }
  .btn:hover { background: var(--blue-light); border-color: var(--blue); color: var(--blue-dark); }
  .btn:active { background: var(--blue); border-color: var(--blue-dark); color: #fff; transform: translateY(1px); }
  .btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
  .btn-primary { background: var(--blue); color: #fff; border-color: var(--blue); }
  .btn-primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); color: #fff; box-shadow: 0 2px 6px rgba(44,111,196,0.28); }
  .btn-primary:active { background: var(--blue-dark); transform: translateY(1px); box-shadow: 0 1px 2px rgba(44,111,196,0.4); }
  .btn-sm { padding: 4px 10px; font-size: 12px; }
  .btn-xs { padding: 3px 7px; font-size: 11px; }
  .btn-danger { color: var(--red-txt); border-color: #F09595; }
  .btn-danger:hover { background: var(--red-bg); border-color: var(--red-txt); color: var(--red-txt); }
  .btn-danger:active { background: var(--red-txt); border-color: var(--red-txt); color: #fff; transform: translateY(1px); }
  .btn-teal { background: var(--teal-bg); color: var(--teal-txt); border-color: #9FE1CB; }
  .btn-teal:hover { background: #C8EBDD; border-color: var(--teal-txt); color: var(--teal-txt); }
  .btn-teal:active { background: var(--teal-txt); border-color: var(--teal-txt); color: #fff; transform: translateY(1px); }
  .tax-widget { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; margin-bottom: 1.25rem; }
  .tax-widget-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; flex-wrap: wrap; gap: 8px; }
  .tax-widget-header h2 { font-size: 14px; font-weight: 700; }
  .tax-grid { display: flex; flex-direction: column; gap: 6px; }
  .tax-row { display: grid; grid-template-columns: 20px 1fr 80px 90px 32px; align-items: center; gap: 8px; padding: 10px 12px; background: var(--bg); border-radius: var(--radius); border: 1px solid var(--border); overflow: visible; }
  .tax-row-label { font-size: 14px; color: var(--text); font-weight: 600; }
  .tax-pct-wrap { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
  .tax-pct-input { width: 58px; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--border2); font-size: 13px; text-align: right; background: var(--surface); color: var(--text); font-family: inherit; }
  .tax-pct-input:focus { outline: none; border-color: var(--blue); }
  .tax-row-amount { font-size: 14px; font-weight: 700; color: var(--red-txt); white-space: nowrap; text-align: right; }
  .tax-net-row { background: var(--green-bg); border: 1px solid #C0DD97; border-radius: var(--radius); padding: 12px 1rem; display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; }
  .tax-net-label { font-size: 13px; font-weight: 700; color: var(--green-txt); }
  .tax-net-amount { font-size: 20px; font-weight: 800; color: var(--green-txt); }
  .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 1.25rem; }
  .card-header { padding: 12px 1.25rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
  .card-header h2 { font-size: 14px; font-weight: 700; }
  table { width: 100%; border-collapse: collapse; font-size: 13px; }
  th { text-align: left; padding: 10px 14px; color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border); background: var(--bg); }
  td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
  tr:last-child td { border-bottom: none; }
  tr:hover td { background: #fafbfd; }
  .td-mono { font-family: 'Courier New', monospace; font-size: 12px; color: var(--muted); }
  .td-bold { font-weight: 600; }
  .td-muted { color: var(--muted); }
  .td-right { text-align: right; }
  .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; }
  .badge::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; opacity:0.6; }
  .badge-green { background:var(--green-bg); color:var(--green-txt); }
  .badge-amber { background:var(--amber-bg); color:var(--amber-txt); }
  .badge-red { background:var(--red-bg); color:var(--red-txt); }
  .badge-blue { background:var(--blue-light); color:var(--blue); }
  .badge-gray { background:var(--gray-bg); color:var(--gray-txt); }
  .badge-teal { background:var(--teal-bg); color:var(--teal-txt); }
  .actions-bar { display:flex; gap:4px; }
  .toolbar { padding:10px 1.25rem; border-bottom:1px solid var(--border); display:flex; gap:10px; align-items:center; background:var(--bg); flex-wrap:wrap; }
  .toolbar input { flex:1; min-width:160px; max-width:300px; }
  .form-section { margin-bottom:1.25rem; }
  .form-section-title { font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:10px; padding-bottom:6px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
  .form-row { display:grid; gap:12px; margin-bottom:12px; }
  .form-row-2 { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .form-row-3 { grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); }
  .form-group { display:flex; flex-direction:column; gap:5px; }
  label { font-size:12px; color:var(--muted); font-weight:600; }
  input, select, textarea { width:100%; padding:8px 10px; border:1px solid var(--border2); border-radius:var(--radius); font-size:13px; background:var(--surface); color:var(--text); font-family:inherit; transition:border-color 0.1s; }
  input:focus, select:focus, textarea:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(242,106,10,0.1); }
  input[type=number] { text-align:right; }
  input[type=checkbox] { width:auto; }
  .tax-checkbox { width:18px !important; height:18px !important; min-height:18px !important; min-width:18px !important; -webkit-appearance:none !important; appearance:none !important; border:2px solid var(--border); border-radius:4px; background:var(--bg); cursor:pointer; flex-shrink:0 !important; position:relative; padding:0 !important; }
  .tax-checkbox:checked { background:var(--blue); border-color:var(--blue); }
  .tax-checkbox:checked::after { content:"✓"; position:absolute; top:-2px; left:2px; font-size:13px; color:white; font-weight:bold; }
  textarea { resize:vertical; min-height:60px; line-height:1.5; }
  .toggle-row { display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--bg); border-radius:var(--radius); border:1px solid var(--border); }
  .toggle-row label { margin:0; font-size:13px; color:var(--text); cursor:pointer; font-weight:500; }
  .pos-wrap { border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-bottom:12px; }
  .pos-wrap table { font-size:12px; }
  .pos-wrap th { font-size:10px; padding:7px 8px; }
  .pos-wrap td { padding:5px 6px; }
  .pos-wrap td input, .pos-wrap td select { padding:5px 7px; font-size:12px; }
  .pos-wrap tr:last-child td { border-bottom:none; }
  .totals-box { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:12px 1rem; text-align:right; margin-bottom:12px; }
  .totals-box p { font-size:13px; color:var(--muted); margin:3px 0; }
  .totals-box .total-gross { font-size:18px; font-weight:800; color:var(--text); margin-top:8px; }
  .catalog-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:10px; }
  .catalog-item { border:1px solid var(--border); border-radius:var(--radius); padding:10px 12px; cursor:pointer; transition:all 0.1s; background:var(--surface); }
  .catalog-item:hover { border-color:var(--blue); background:var(--blue-light); }
  .ci-name { font-size:13px; font-weight:600; margin-bottom:3px; }
  .ci-price { font-size:12px; color:var(--muted); }
  .ci-unit { font-size:11px; color:var(--hint); }
  .modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.45); display:flex; align-items:center; justify-content:center; z-index:200; padding:1rem; }
  .modal { background:var(--surface); border-radius:var(--radius-lg); border:1px solid var(--border); width:100%; max-width:740px; max-height:94vh; display:flex; flex-direction:column; box-shadow:0 24px 64px rgba(0,0,0,0.18); }
  .modal-header { padding:1rem 1.5rem; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
  .modal-header h2 { font-size:16px; font-weight:700; }
  .modal-body { padding:1.5rem; overflow-y:auto; flex:1; }
  .modal-footer { padding:1rem 1.5rem; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px; flex-shrink:0; background:var(--bg); border-radius:0 0 var(--radius-lg) var(--radius-lg); }
  .modal-wide { max-width:900px; }
  .modal-sm { max-width:500px; }
  .doc-sheet { background:white; color:#222; font-family:'Georgia',serif; padding:2.5rem; border:1px solid #ddd; box-shadow:0 2px 12px rgba(0,0,0,0.08); }
  .doc-sheet table { width:100%; border-collapse:collapse; font-size:13px; font-family:'Segoe UI',sans-serif; }
  .doc-sheet th { background:#F26A0A; color:white; padding:7px 10px; text-align:left; font-weight:500; vertical-align:middle; }
  .doc-sheet td { padding:8px 10px; border-bottom:1px solid #eee; }
  .empty { text-align:center; padding:3rem 2rem; color:var(--hint); }
  .empty-icon { font-size:36px; margin-bottom:12px; }
  .empty p { font-size:14px; }
  .toast { position:fixed; bottom:1.5rem; right:1.5rem; background:#1a1d23; color:#fff; padding:10px 18px; border-radius:var(--radius); font-size:13px; z-index:999; box-shadow:0 4px 20px rgba(0,0,0,0.2); animation:slideUp 0.2s ease; }
  @keyframes slideUp { from{transform:translateY(10px);opacity:0} to{transform:translateY(0);opacity:1} }
  .pill { display:inline-block; padding:2px 8px; border-radius:20px; font-size:11px; font-weight:600; }
  .pill-blue { background:var(--blue-light); color:var(--blue); }
  .pill-green { background:var(--green-bg); color:var(--green-txt); }
  /* MONTEUR */
  .sig-canvas { border:1.5px solid var(--border2); border-radius:var(--radius); background:#fff; cursor:crosshair; touch-action:none; display:block; width:100%; }
  .sig-wrap { background:#fff; border-radius:var(--radius); border:1.5px solid var(--border2); padding:8px; }
  .photo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; margin-top:8px; }
  .photo-thumb { position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); aspect-ratio:4/3; background:var(--bg); }
  .photo-thumb img { width:100%; height:100%; object-fit:cover; }
  .photo-thumb .del-btn { position:absolute; top:4px; right:4px; background:rgba(0,0,0,0.55); color:#fff; border:none; border-radius:50%; width:22px; height:22px; cursor:pointer; font-size:12px; display:flex; align-items:center; justify-content:center; }
  .checklist-item { display:flex; align-items:center; gap:10px; padding:8px 10px; background:var(--bg); border-radius:var(--radius); border:1px solid var(--border); margin-bottom:6px; }
  .checklist-item input[type=checkbox] { width:18px; height:18px; flex-shrink:0; accent-color:var(--blue); }
  .checklist-item label { font-size:13px; flex:1; cursor:pointer; }
  .time-display { font-size:20px; font-weight:700; color:var(--blue); }
  /* LAYOUT EDITOR */
  .layout-preview { border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.5rem; background:#fff; }
  .color-swatch { width:32px; height:32px; border-radius:6px; border:2px solid var(--border2); cursor:pointer; display:inline-block; }
  /* ── RESPONSIVE BREAKPOINTS ────────────────────────────────────── */
  /* ── SAFARI / WEBKIT FIXES ─────────────────────────────────────── */
  * { -webkit-tap-highlight-color: transparent; }
  input:not([type=checkbox]):not([type=radio]), select, textarea { -webkit-appearance: none; appearance: none; border-radius: var(--radius); }
  select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px !important; }
  button { -webkit-appearance: none; cursor: pointer; }
  .sig-canvas { touch-action: none; -webkit-user-select: none; user-select: none; }

  /* ── TABLET (max 1024px) ────────────────────────────────────────── */