*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background: #f4f2ef; color: #1a1a1a; font-size: 14px; min-height: 100vh; }
:root {
  --accent: #c9a96e; --accent-dark: #a8854d; --accent-light: #f5ead8;
  --white: #fff; --gray-50: #fafaf9; --gray-100: #f2f0ed; --gray-200: #e8e4df;
  --gray-300: #d5d0cb; --gray-400: #a09990; --gray-500: #8c8580; --gray-600: #6b6560; --gray-800: #3a3530;
  --radius: 12px; --shadow: 0 1px 8px rgba(0,0,0,.08); --shadow-md: 0 4px 20px rgba(0,0,0,.12);
  --danger: #e53935; --success: #43a047;
}

/* ── TOPBAR ── */
.topbar { background: var(--white); border-bottom: 1px solid var(--gray-200); padding: 0 24px; height: 60px; display: flex; align-items: center; gap: 16px; position: sticky; top: 0; z-index: 200; box-shadow: 0 1px 8px rgba(0,0,0,.06); }
.topbar-logo { font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 600; color: var(--accent-dark); display: flex; align-items: center; gap: 8px; }
.topbar-logo span { font-size: 22px; }
.topbar-sep { flex: 1; }
.topbar-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; border: none; transition: all .2s; text-decoration: none; }
.city-badge { display:inline-block; background:var(--accent-light); color:var(--accent-dark); font-size:11px; font-weight:600; padding:2px 8px; border-radius:20px; margin-left:6px; }
.city-list-item { display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--gray-100); }
.city-list-item:last-child { border-bottom:none; }
.city-info { flex:1; }
.city-name-label { font-size:14px; font-weight:600; color:var(--gray-800); }
.city-code-label { font-size:12px; color:var(--gray-400); margin-top:2px; font-family:monospace; letter-spacing:1px; }
.superadmin-section { background:linear-gradient(135deg,#2c1a0e,#5c3317); border-radius:14px; padding:16px 20px; color:#fff; margin-bottom:20px; }
.superadmin-section h3 { font-size:15px; font-weight:600; margin-bottom:4px; }
.superadmin-section p { font-size:12px; opacity:.75; margin-bottom:12px; }
.gray-500 { color: #8c8580; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-ghost { background: transparent; color: var(--gray-600); border: 1.5px solid var(--gray-200); }
.btn-ghost:hover { background: var(--gray-100); color: var(--gray-800); }
.btn-danger { background: #fff0f0; color: var(--danger); border: none; }
.btn-danger:hover { background: #ffdede; }
.btn-sm { padding: 6px 12px; font-size: 12px; }

/* ── VIEWS ── */
#view-list, #view-editor { display: none; }
#view-list.active, #view-editor.active { display: block; }

/* ── LIST VIEW ── */
.list-header { padding: 32px 24px 20px; display: flex; align-items: center; gap: 16px; max-width: 1100px; margin: 0 auto; }
.list-header h1 { font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 600; }
.list-header-sub { font-size: 13px; color: var(--gray-600); margin-top:2px; }
.properties-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; padding: 0 24px 40px; max-width: 1100px; margin: 0 auto; }

/* ── PROPERTY CARD ── */
.prop-card { background: var(--white); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; transition: box-shadow .2s, transform .2s; position: relative; }
.prop-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.prop-cover { height: 160px; background: linear-gradient(135deg, #4a3728, #c9a96e); position: relative; overflow: hidden; }
.prop-cover img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.prop-cover-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 48px; }
.prop-badge { position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,.4); backdrop-filter: blur(6px); color: #fff; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 10px; }
.prop-no-steps-dot { position: absolute; top: 12px; left: 12px; width: 13px; height: 13px; border-radius: 50%; background: #e53e3e; border: 2.5px solid rgba(255,255,255,0.9); box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.prop-body { padding: 16px; }
.prop-name { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.prop-location { font-size: 13px; color: var(--gray-600); display: flex; align-items: center; gap: 5px; margin-bottom: 14px; }
.prop-meta { font-size: 12px; color: var(--gray-400); }
.prop-actions { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--gray-100); }
.prop-actions .topbar-btn { flex: 1; justify-content: center; }

/* ── EMPTY STATE ── */
.empty-state { text-align: center; padding: 80px 24px; color: var(--gray-400); }
.empty-state .empty-icon { font-size: 56px; margin-bottom: 16px; }
.empty-state h3 { font-size: 18px; font-weight: 600; color: var(--gray-600); margin-bottom: 8px; }
.empty-state p { font-size: 14px; margin-bottom: 24px; }

/* ── EDITOR HEADER ── */
.editor-topbar { background: var(--white); border-bottom: 1px solid var(--gray-200); padding: 0 24px; height: 56px; display: flex; align-items: center; gap: 12px; }
.editor-title { font-size: 15px; font-weight: 600; }
.editor-subtitle { font-size: 13px; color: var(--gray-400); margin-left: 4px; }
.save-status { font-size: 12px; color: var(--gray-400); display: flex; align-items: center; gap: 6px; }
.save-status.saved { color: var(--success); }

/* ── EDITOR LAYOUT ── */
.editor-body { display: flex; height: calc(100vh - 116px); overflow: hidden; }
.editor-sidebar { width: 220px; flex-shrink: 0; background: var(--white); border-right: 1px solid var(--gray-200); overflow-y: auto; padding: 16px 0; }
.editor-content { flex: 1; overflow-y: auto; padding: 28px 32px; max-width: 800px; }
.sidebar-item { display: flex; align-items: center; gap: 10px; padding: 10px 20px; font-size: 13px; font-weight: 500; color: var(--gray-600); cursor: pointer; transition: all .15s; border-left: 3px solid transparent; }
.sidebar-item:hover { background: var(--gray-50); color: var(--gray-800); }
.sidebar-item.active { background: var(--accent-light); color: var(--accent-dark); border-left-color: var(--accent); }

/* ── EDITOR PANELS ── */
.editor-panel { display: none; }
.editor-panel.active { display: block; }
.panel-title { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 600; margin-bottom: 4px; }
.panel-desc { font-size: 13px; color: var(--gray-600); margin-bottom: 24px; }

/* ── FORM ── */
.form-group { margin-bottom: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 0; }
.form-label { display: block; font-size: 12px; font-weight: 600; color: var(--gray-600); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; }
.form-input, .form-textarea, .form-select { width: 100%; padding: 10px 12px; border: 1.5px solid var(--gray-200); border-radius: 8px; font-size: 14px; font-family: 'Inter', sans-serif; background: var(--white); color: var(--gray-800); transition: border-color .2s; outline: none; }
.form-input:focus, .form-textarea:focus, .form-select:focus { border-color: var(--accent); }
.form-textarea { resize: vertical; min-height: 90px; }
.form-hint { font-size: 12px; color: var(--gray-400); margin-top: 5px; }
.form-section-title { font-size: 14px; font-weight: 600; color: var(--gray-800); margin: 24px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--gray-200); }

/* ── PHOTO INPUT ── */
.photo-input-wrap { display: flex; gap: 12px; align-items: flex-start; }
.photo-preview { width: 100px; height: 70px; border-radius: 8px; object-fit: cover; background: var(--gray-100); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; overflow: hidden; border: 1.5px solid var(--gray-200); }
.photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.photo-input-actions { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.file-upload-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--gray-100); border: 1.5px dashed var(--gray-300); border-radius: 8px; font-size: 12px; color: var(--gray-600); cursor: pointer; transition: all .2s; width: 100%; justify-content: center; }
.file-upload-btn:hover { background: var(--accent-light); border-color: var(--accent); color: var(--accent-dark); }
.file-upload-btn input { display: none; }

/* ── LIST ITEMS ── */
.items-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.list-item { display: flex; align-items: center; gap: 10px; background: var(--gray-50); border: 1.5px solid var(--gray-200); border-radius: 10px; padding: 10px 12px; transition: all .2s; }
.list-item:hover { border-color: var(--gray-300); background: var(--white); }
.item-drag { cursor: grab; color: var(--gray-300); font-size: 16px; flex-shrink: 0; }
.item-content { flex: 1; min-width: 0; }
.item-title { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-sub { font-size: 12px; color: var(--gray-400); }
.item-photo-thumb { width: 44px; height: 36px; border-radius: 6px; object-fit: cover; flex-shrink: 0; background: var(--gray-200); }
.item-actions { display: flex; gap: 4px; flex-shrink: 0; }
.icon-btn { width: 30px; height: 30px; border-radius: 6px; border: none; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; transition: all .2s; background: transparent; }
.icon-btn:hover { background: var(--gray-200); }
.icon-btn.danger:hover { background: #ffdede; color: var(--danger); }
.add-item-btn { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 2px dashed var(--gray-200); border-radius: 10px; color: var(--gray-400); font-size: 13px; font-weight: 500; cursor: pointer; transition: all .2s; background: none; width: 100%; }
.add-item-btn:hover { border-color: var(--accent); color: var(--accent-dark); background: var(--accent-light); }

/* ── MODAL ── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 999; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal { background: var(--white); border-radius: 16px; width: 100%; max-width: 520px; box-shadow: 0 20px 60px rgba(0,0,0,.2); transform: scale(.96); transition: transform .2s; overflow: hidden; max-height: 90vh; display: flex; flex-direction: column; }
.modal-overlay.open .modal { transform: scale(1); }
.modal-header { padding: 20px 24px; border-bottom: 1px solid var(--gray-200); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.modal-title { font-size: 16px; font-weight: 600; }
.modal-close { width: 32px; height: 32px; border-radius: 8px; border: none; background: var(--gray-100); cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.modal-close:hover { background: var(--gray-200); }
.modal-body { padding: 20px 24px; overflow-y: auto; flex: 1; }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--gray-200); display: flex; gap: 10px; justify-content: flex-end; flex-shrink: 0; }

/* ── EMOJI PICKER ── */
.emoji-picker-wrap { display:flex; flex-direction:column; gap:8px; }
.emoji-selected-display { font-size:32px; text-align:center; padding:8px; background:var(--gray-50); border:1.5px solid var(--gray-200); border-radius:10px; }
.emoji-grid { display:flex; flex-wrap:wrap; gap:4px; }
.emoji-btn { width:36px; height:36px; border-radius:8px; border:1.5px solid transparent; background:var(--gray-50); cursor:pointer; font-size:18px; display:flex; align-items:center; justify-content:center; transition:all .15s; padding:0; }
.emoji-btn:hover { background:var(--accent-light); border-color:var(--accent); transform:scale(1.15); }
.emoji-btn.selected { background:var(--accent-light); border-color:var(--accent); box-shadow:0 0 0 2px var(--accent); }

/* ── TYPE CHIPS ── */
.type-chip { display:inline-flex; align-items:center; gap:4px; background:#f5f0e8; color:var(--gray-500); border:1.5px solid #ddd; border-radius:20px; padding:3px 10px 3px 12px; font-size:12px; font-weight:500; cursor:pointer; transition:all .15s; }
.type-chip:hover { border-color:var(--accent); color:var(--accent-dark); }
.type-chip.type-chip-selected { background:var(--accent-light); color:var(--accent-dark); border-color:var(--accent); }
.type-chip-del { background:none; border:none; cursor:pointer; font-size:14px; color:var(--gray-400); line-height:1; padding:0; opacity:.7; transition:opacity .15s; }
.type-chip-del:hover { opacity:1; color:var(--danger); }

/* ── TOAST ── */
.toast { position: fixed; bottom: 24px; right: 24px; background: var(--gray-800); color: #fff; padding: 12px 20px; border-radius: 10px; font-size: 13px; font-weight: 500; z-index: 9999; transform: translateY(100px); opacity: 0; transition: all .3s; pointer-events: none; box-shadow: var(--shadow-md); }
.toast.show { transform: translateY(0); opacity: 1; }
.toast.success { background: #1b5e20; }

/* ── RESPONSIVE ── */
@media(max-width: 768px) {
  .editor-sidebar { display: none; }
  .editor-content { padding: 20px 16px; }
  .form-row { grid-template-columns: 1fr; }
  .properties-grid { grid-template-columns: 1fr; padding: 0 16px 40px; }
  .list-header { padding: 24px 16px 16px; }
}
#login-screen { position:fixed; inset:0; background:linear-gradient(135deg,#1a0e06 0%,#2c1a0e 50%,#1a0e06 100%); display:flex; align-items:center; justify-content:center; z-index:9999; padding:20px; }
#login-screen.hidden { display:none; }
.login-box { background:#fff; border-radius:24px; padding:40px 36px; width:100%; max-width:400px; box-shadow:0 24px 60px rgba(0,0,0,.4); }
.login-logo { font-family:'Playfair Display',serif; font-size:26px; font-weight:700; color:#2c1a0e; text-align:center; margin-bottom:4px; }
.login-sub { font-size:13px; color:#8c8580; text-align:center; margin-bottom:32px; }
.login-label { display:block; font-size:12px; font-weight:600; color:#5c3317; text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
.login-input { width:100%; padding:12px 14px; border:1.5px solid #e8e0d8; border-radius:10px; font-size:14px; outline:none; transition:border-color .2s; box-sizing:border-box; font-family:inherit; }
.login-input:focus { border-color:#c9a96e; }
.login-field { margin-bottom:16px; }
.login-btn { width:100%; padding:13px; background:linear-gradient(135deg,#5c3317,#8b5a2b); color:#fff; border:none; border-radius:12px; font-size:15px; font-weight:600; cursor:pointer; margin-top:8px; transition:opacity .2s; font-family:inherit; }
.login-btn:hover { opacity:.88; }
.login-error { color:#e53e3e; font-size:13px; text-align:center; margin-top:10px; min-height:18px; }
.login-divider { width:40px; height:2px; background:linear-gradient(90deg,#c9a96e,#8b5a2b); border-radius:2px; margin:0 auto 24px; }

/* ── DB viewer ── */
#db-table-wrap table{width:100%;border-collapse:collapse;font-size:.77rem}
#db-table-wrap th{background:#f9f7f4;padding:8px 12px;text-align:left;font-size:.7rem;color:#666;font-weight:600;border-bottom:1px solid #e8e4dc;position:sticky;top:0;z-index:2;white-space:nowrap}
#db-table-wrap td{padding:6px 12px;border-bottom:1px solid #f5f3ef;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;transition:background .1s;position:relative}
#db-table-wrap td:hover{background:#fffbf4!important;outline:1px solid #c9a96e}
#db-table-wrap td[contenteditable="true"]{background:#fffef0;outline:2px solid #c9a96e;white-space:normal;max-width:none;min-width:120px;cursor:text;overflow:visible}
#db-table-wrap tr:hover td{background:#fdf9f4}
#db-table-wrap td.db-num{color:#aaa;cursor:default;width:32px}
#db-table-wrap td.db-num:hover{background:transparent!important;outline:none}
.db-ok{color:#16a34a;font-weight:600}.db-ko{color:#dc2626}
.db-bdg{display:inline-block;padding:2px 7px;border-radius:20px;font-size:.67rem;font-weight:600;background:#e0f2fe;color:#075985}
.fill-handle{position:absolute;bottom:-4px;right:-4px;width:8px;height:8px;background:#c9a96e;border:2px solid #fff;border-radius:1px;cursor:crosshair;z-index:30;box-shadow:0 0 0 1px #c9a96e;display:none}
#db-table-wrap td.db-active .fill-handle{display:block}
#db-table-wrap td.db-active{outline:2px solid #c9a96e!important;background:#fffef0!important;overflow:visible!important}
#db-table-wrap td.fill-target{background:#fef9ec!important;outline:1px dashed #c9a96e!important}
#db-table-wrap td.fill-target-last{outline:2px solid #c9a96e!important}

/* ══════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS — 375px fixes
══════════════════════════════════════════════════════ */

/* ── Topbar: hide long-text buttons on small screens ── */
@media(max-width: 600px) {
  .topbar { padding: 0 12px; gap: 8px; height: auto; min-height: 56px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
  .topbar-logo { font-size: 15px; }
  /* Hide DB viewer button on mobile — admin still accessible via editor */
  .topbar button[onclick="showDbViewer()"] { display: none; }
  /* Logout button: icon only */
  .topbar button[onclick="logout()"] { padding: 8px 10px; font-size: 0; width: 36px; justify-content: center; }
  .topbar button[onclick="logout()"]::before { content: '🔓'; font-size: 16px; }
  #topbar-actions { order: 3; width: 100%; display: flex; justify-content: flex-end; }
  #topbar-actions .topbar-btn { font-size: 12px; padding: 6px 10px; }
}

/* ── Editor topbar: wrap on small screens ── */
@media(max-width: 600px) {
  .editor-topbar { height: auto; min-height: 48px; flex-wrap: wrap; padding: 8px 12px; gap: 6px; }
  .editor-topbar .editor-title { font-size: 14px; }
  .editor-topbar .topbar-sep { display: none; }
  .editor-topbar .save-status { order: 10; font-size: 11px; }
  /* Stack preview and save buttons */
  .editor-topbar .topbar-btn { font-size: 12px; padding: 6px 10px; }
  /* Editor body height must account for taller topbar */
  .editor-body { height: calc(100vh - 140px); }
}

/* ── Mobile panel nav: show a horizontal scroll tab bar instead of sidebar ── */
@media(max-width: 768px) {
  .editor-body { flex-direction: column; height: auto; min-height: calc(100vh - 116px); overflow: visible; }
  .editor-content { overflow-y: visible; padding: 16px 12px 40px; max-width: 100%; }

  /* Panel nav: horizontal scrollable tab bar */
  #editor-sidebar {
    display: flex !important;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 2px solid var(--gray-200);
    padding: 0 8px;
    gap: 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    background: var(--white);
  }
  #editor-sidebar::-webkit-scrollbar { display: none; }
  .sidebar-item {
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    padding: 8px 12px;
    font-size: 11px;
    border-left: none;
    border-bottom: 3px solid transparent;
    gap: 4px;
    white-space: nowrap;
  }
  .sidebar-item.active {
    border-left: none;
    border-bottom-color: var(--accent);
    background: var(--accent-light);
  }
  .sidebar-item span { font-size: 18px; }
}

/* ── Property list: ensure grid doesn't overflow ── */
@media(max-width: 480px) {
  .properties-grid { padding: 0 12px 40px; gap: 12px; }
  .list-header { padding: 16px 12px 12px; flex-wrap: wrap; gap: 10px; }
  .list-header h1 { font-size: 20px; }
}

/* ── Prop card actions: wrap on very small screens ── */
@media(max-width: 420px) {
  .prop-actions { flex-wrap: wrap; }
  .prop-actions .topbar-btn { flex: 1 1 calc(50% - 4px); min-width: 0; font-size: 12px; padding: 7px 6px; }
}

/* ── DB Viewer modal: overflow-x on table ── */
#db-viewer-modal { overflow-x: hidden; }
#db-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* DB viewer action bar: wrap on mobile ── */
@media(max-width: 600px) {
  #db-viewer-modal > div { padding: 12px; }
  #db-viewer-modal > div > div > div:first-child { flex-wrap: wrap; gap: 6px; }
  #db-viewer-modal > div > div > div:first-child button,
  #db-viewer-modal > div > div > div:first-child div { font-size: .7rem; }
  /* DB tab buttons: scroll horizontally */
  #db-viewer-modal .db-tab-bar { overflow-x: auto; scrollbar-width: none; }
  #db-viewer-modal [onclick^="switchDbTab"] { white-space: nowrap; }
  /* Hint text: hide on mobile */
  #db-viewer-modal div[style*="margin-left:auto"] { display: none !important; }
}

/* ── DB viewer tab row: make it scrollable ── */
@media(max-width: 600px) {
  #db-viewer-modal > div > div > div:nth-child(3) > div:first-child {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
}

/* ── Login box: tighter padding on small screens ── */
@media(max-width: 420px) {
  .login-box { padding: 28px 20px; border-radius: 16px; }
}

/* ── Form row already collapses but ensure no overflow at 375 ── */
@media(max-width: 375px) {
  .form-input, .form-textarea, .form-select { font-size: 16px; } /* prevent iOS zoom */
  .editor-content { padding: 12px 10px 40px; }
}

/* ── Barre de recherche liste ── */
.list-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.list-search-icon {
  position: absolute;
  left: 10px;
  font-size: 0.85rem;
  pointer-events: none;
  opacity: 0.5;
}
.list-search-input {
  padding: 0.45rem 0.85rem 0.45rem 2rem;
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 8px;
  font-size: 0.875rem;
  background: #fff;
  color: var(--gray-800, #1f2937);
  outline: none;
  width: 240px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.list-search-input:focus {
  border-color: var(--accent, #C9943A);
  box-shadow: 0 0 0 3px rgba(201,148,58,0.12);
}
.list-search-input::placeholder { color: var(--gray-400, #9ca3af); }
.list-search-input::-webkit-search-cancel-button { cursor: pointer; }
@media (max-width: 600px) {
  .list-header { flex-wrap: wrap; gap: 0.75rem; }
  .list-search-wrap { order: 3; width: 100%; }
  .list-search-input { width: 100%; }
}

/* ── Filtre procédures ── */
.list-filter-wrap { display:flex; gap:6px; align-items:center; }
.list-filter-btn {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--gray-200, #e5e7eb);
  background: transparent;
  color: var(--gray-600);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.list-filter-btn:hover { background: var(--gray-100); color: var(--gray-800); }
.list-filter-btn.active {
  background: var(--accent, #C9943A);
  border-color: var(--accent, #C9943A);
  color: #fff;
}
@media (max-width: 600px) {
  .list-filter-wrap { order: 4; width: 100%; flex-wrap: wrap; }
}

/* ══════════════════════════════════
   FILTER BAR — multi-filtres livrets
══════════════════════════════════ */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px 20px;
  max-width: 1100px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.filter-bar-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-400, #9ca3af);
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
  flex-shrink: 0;
}
.filter-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.filter-divider {
  width: 1px;
  height: 20px;
  background: var(--gray-200, #e5e7eb);
  margin: 0 2px;
  flex-shrink: 0;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1.5px solid var(--gray-200, #e5e7eb);
  background: #fff;
  color: var(--gray-600, #4b5563);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
  line-height: 1.4;
}
.filter-chip:hover {
  border-color: var(--accent, #c9a96e);
  color: var(--accent-dark, #a07840);
  background: rgba(201,169,110,.06);
}
.filter-chip--all {
  font-weight: 600;
}
.filter-chip--all.active {
  background: var(--gray-800, #1f2937);
  border-color: var(--gray-800, #1f2937);
  color: #fff;
}
.filter-chip--warn.active {
  background: rgba(201,169,110,.12);
  border-color: var(--accent, #c9a96e);
  color: var(--accent-dark, #a07840);
  font-weight: 600;
}
.fc-icon {
  font-size: 13px;
  line-height: 1;
}
.filter-count {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--accent, #c9a96e);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
}
/* Suppression anciens styles obsolètes */
.list-filter-wrap, .list-filter-btn { display: none !important; }

@media (max-width: 700px) {
  .filter-bar { padding: 0 16px 16px; gap: 8px; }
  .filter-chip { font-size: 12px; padding: 4px 10px; }
}