/* ── Layout ── */
.catv2-ui { display: flex; flex-direction: column; height: 100%; }

.catv2-header {
  position: sticky; top: 0; z-index: 10;
  background: var(--card);
  padding: 16px 16px 0;
  border-bottom: 0.5px solid var(--b2);
}

/* ── Top row: title + count ── */
.catv2-top-row {
  display: flex; align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}
.catv2-title { font-size: 28px; font-weight: 900; color: var(--text); letter-spacing: -.5px; line-height: 1.1; }
.catv2-count { font-size: 13px; color: var(--text2); }

/* ── Toggle pill ── */
.catv2-toggle-row {
  display: flex;
  background: var(--b2);
  border-radius: 10px;
  padding: 3px;
  margin-bottom: 12px;
}
.catv2-toggle-btn {
  flex: 1; border: none; background: transparent;
  border-radius: 8px; padding: 7px 0;
  font-size: 14px; font-weight: 500;
  color: var(--text2); cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.catv2-toggle-btn.active {
  background: var(--card);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* ── Métier chips row ── */
.catv2-metier-row {
  display: flex; align-items: center;
  gap: 8px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.catv2-metier-label { font-size: 12px; color: var(--text2); white-space: nowrap; }
.catv2-chips-wrap { display: flex; gap: 6px; flex-wrap: wrap; }
.catv2-chip {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 20px;
  font-size: 12px; font-weight: 500;
  background: var(--b2); color: var(--text2);
  border: 0.5px solid var(--b2); cursor: pointer;
}
.catv2-chip.active { background: var(--accent-light); color: #E85D2A; border-color: #E85D2A; }

/* ── Search bar ── */
.catv2-search-wrap {
  display: flex; align-items: center; gap: 8px;
  background: var(--b2); border: 0.5px solid var(--b2);
  border-radius: 10px; padding: 9px 12px;
  margin-bottom: 12px;
}
.catv2-search-ico { font-size: 16px; color: var(--text3); }
.catv2-search {
  flex: 1; border: none; background: transparent;
  font-size: 15px; color: var(--text); outline: none;
}
.catv2-search::placeholder { color: var(--text3); }

/* ── Empty state ── */
.catv2-empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px; padding: 40px 24px; text-align: center;
}
.catv2-empty-ico { font-size: 36px; color: var(--text3); }
.catv2-empty-title { font-size: 15px; font-weight: 500; color: var(--text2); }
.catv2-empty-sub { font-size: 13px; color: var(--text3); }

/* ── Article list ── */
.catv2-list { padding: 12px 16px; display: flex; flex-direction: column; gap: 1px; }

/* ── Article card ── */
.catv2-card {
  display: flex; align-items: center;
  padding: 13px 0;
  border-bottom: 0.5px solid var(--b);
  cursor: pointer; gap: 10px;
}
.catv2-card:last-child { border-bottom: none; }
.catv2-card-info { flex: 1; min-width: 0; }
.catv2-card-desig {
  font-size: 14px; font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.catv2-card-meta {
  display: flex; align-items: center; gap: 6px;
  margin-top: 3px;
}
.catv2-card-unite { font-size: 12px; color: var(--text2); }
.catv2-badge {
  font-size: 11px; font-weight: 500;
  padding: 1px 7px; border-radius: 10px;
}
.catv2-badge-dv { background: var(--info-bg); color: var(--info-tx); }
.catv2-badge-perso { background: var(--ok-bg); color: var(--ok-tx); }
.catv2-card-prix { font-size: 14px; font-weight: 600; color: var(--text); flex-shrink: 0; }

/* ── FAB ── */
.catv2-fab {
  position: fixed; bottom: 90px; right: 16px;
  background: #E85D2A; color: white; border: none;
  border-radius: 24px; padding: 12px 20px;
  font-size: 14px; font-weight: 500;
  display: flex; align-items: center; gap: 6px;
  cursor: pointer; z-index: 30;
  box-shadow: 0 4px 12px rgba(232,93,42,0.35);
}

/* ── Add modal ── */
#catv2-add-modal {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--card); display: none;
  flex-direction: column; height: 100dvh;
}
#catv2-add-modal.open { display: flex; }
.catv2-form-topbar {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 20px 16px 16px;
  border-bottom: 0.5px solid var(--b2);
  flex-shrink: 0;
}
.catv2-form-topbar-title { font-size: 18px; font-weight: 500; }
.catv2-form-back {
  background: none; border: none;
  font-size: 22px; color: var(--text2); cursor: pointer;
  display: flex; align-items: center;
}
.catv2-form-body {
  flex: 1; overflow-y: auto;
  padding: 20px 16px;
  display: flex; flex-direction: column; gap: 18px;
}
.catv2-section-title {
  font-size: 11px; font-weight: 500; color: var(--text3);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.catv2-form-field { display: flex; flex-direction: column; gap: 6px; }
.catv2-form-field label { font-size: 13px; font-weight: 500; color: var(--text2); }
.catv2-form-field input,
.catv2-form-field select {
  width: 100%; box-sizing: border-box;
  background: var(--card); border: 0.5px solid var(--b2);
  border-radius: 8px; padding: 10px 12px;
  font-size: 15px; color: var(--text); font-family: inherit;
}
.catv2-form-row { display: flex; gap: 12px; }
.catv2-form-row .catv2-form-field { flex: 1; }
.catv2-form-divider { height: 0.5px; background: var(--b2); }
.catv2-info-banner {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--info-bg); border-radius: 8px; padding: 10px 12px;
}
.catv2-info-banner i { font-size: 16px; color: var(--info-tx); flex-shrink: 0; margin-top: 1px; }
.catv2-info-banner span { font-size: 13px; color: var(--info-tx); line-height: 1.4; }
.catv2-form-sticky {
  padding: 12px 16px 32px; background: var(--card);
  border-top: 0.5px solid var(--b2); flex-shrink: 0;
}
.catv2-form-actions { display: flex; gap: 12px; }
.catv2-btn-cancel {
  flex: 1; background: var(--b2); color: var(--text2);
  border: 0.5px solid var(--b2); border-radius: 8px;
  padding: 14px; font-size: 15px; font-weight: 500; cursor: pointer;
}
.catv2-btn-save {
  flex: 2; background: #16a34a; color: white;
  border: none; border-radius: 8px;
  padding: 14px; font-size: 15px; font-weight: 500; cursor: pointer;
}

/* ── Fiche détail article ── */
.catv2-detail-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:100;display:none}
.catv2-detail-overlay.open{display:block}
.catv2-detail-sheet{position:fixed;bottom:0;left:0;right:0;background:var(--card);border-radius:16px 16px 0 0;z-index:101;padding:0 0 calc(56px + 24px);transform:translateY(100%);transition:transform 0.3s ease}
.catv2-detail-sheet.open{transform:translateY(0)}
.catv2-detail-handle{width:36px;height:4px;background:var(--b2);border-radius:2px;margin:12px auto 20px}
.catv2-detail-header{padding:0 16px 16px;border-bottom:0.5px solid var(--b2)}
.catv2-detail-cat{font-size:11px;font-weight:500;color:#E85D2A;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:4px}
.catv2-detail-title{font-size:18px;font-weight:500;color:var(--text);line-height:1.3}
.catv2-detail-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:500;margin-top:6px}
.catv2-detail-badge.dv{background:var(--info-bg);color:var(--info-tx)}
.catv2-detail-badge.perso{background:var(--ok-bg);color:var(--ok-tx)}
.catv2-detail-body{padding:16px;display:flex;flex-direction:column;gap:12px}
.catv2-detail-row{display:flex;justify-content:space-between;align-items:center}
.catv2-detail-label{font-size:13px;color:var(--text2)}
.catv2-detail-value{font-size:14px;font-weight:500;color:var(--text)}
.catv2-detail-divider{height:0.5px;background:var(--b2)}
.catv2-detail-price{display:flex;justify-content:space-between;align-items:center;background:var(--b2);border-radius:8px;padding:12px 14px}
.catv2-detail-price-label{font-size:13px;color:var(--text2)}
.catv2-detail-price-val{font-size:18px;font-weight:500;color:var(--text)}
.catv2-detail-actions{display:flex;gap:10px;padding:0 16px;margin-top:4px}
.catv2-detail-btn-edit{flex:1;background:#E85D2A!important;color:white!important;border:none;border-radius:8px;padding:13px;font-size:15px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.catv2-detail-btn-del{width:48px;height:48px;background:var(--er-bg);border:0.5px solid #fecaca;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;color:var(--er);font-size:22px}

/* ── Picker bottom sheet (devis form) ── */
.catv2-picker-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:200;display:none}
.catv2-picker-overlay.open{display:block}
.catv2-picker-sheet{position:fixed;bottom:0;left:0;right:0;background:var(--card);border-radius:16px 16px 0 0;z-index:201;padding:0 0 32px;transform:translateY(100%);transition:transform 0.3s ease;min-height:60vh;max-height:75vh;display:flex;flex-direction:column}
.catv2-picker-sheet.open{transform:translateY(0)}
.catv2-picker-handle{width:36px;height:4px;background:var(--b2);border-radius:2px;margin:12px auto 16px;flex-shrink:0}
.catv2-picker-header{padding:0 16px 12px;border-bottom:0.5px solid var(--b2);flex-shrink:0}
.catv2-picker-title{font-size:17px;font-weight:500;color:var(--text);margin-bottom:10px}
.catv2-picker-toggle{display:flex;background:var(--b2);border-radius:10px;padding:3px;margin-bottom:10px}
.catv2-picker-btn{flex:1;border:none;background:transparent;border-radius:8px;padding:6px 0;font-size:13px;font-weight:500;color:var(--text2);cursor:pointer;transition:background 0.15s,color 0.15s}
.catv2-picker-btn.active{background:var(--card);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,0.1)}
.catv2-picker-search-wrap{display:flex;align-items:center;gap:8px;background:var(--b2);border:0.5px solid var(--b2);border-radius:10px;padding:8px 12px}
.catv2-picker-search{flex:1;border:none;background:transparent;font-size:14px;color:var(--text);outline:none}
.catv2-picker-search::placeholder{color:var(--text3)}
.catv2-picker-list{flex:1;overflow-y:auto;padding:0 16px}
.catv2-picker-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px;text-align:center;gap:8px}
.catv2-picker-empty-title{font-size:15px;font-weight:500;color:var(--text2)}
.catv2-picker-empty-sub{font-size:13px;color:var(--text3)}
.catv2-picker-card{display:flex;align-items:center;padding:12px 0;border-bottom:0.5px solid var(--b);gap:10px}
.catv2-picker-card:last-child{border-bottom:none}
.catv2-picker-card-info{flex:1;min-width:0}
.catv2-picker-card-name{font-size:14px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.catv2-picker-card-meta{font-size:12px;color:var(--text2);display:flex;align-items:center;gap:6px;margin-top:2px}
.catv2-picker-card-prix{font-size:14px;font-weight:500;color:var(--text);flex-shrink:0}
.catv2-picker-add-btn{background:#E85D2A;color:white;border:none;border-radius:8px;padding:6px 12px;font-size:13px;font-weight:500;cursor:pointer;flex-shrink:0}