/* ============================================================  
   RESET & VARIABLES  
   ============================================================ */  
*, *::before, *::after {  
  box-sizing: border-box;  
  margin: 0;  
  padding: 0;  
}

:root {  
  --primary:    #4f46e5;  
  --primary-dk: #3730a3;  
  --primary-lt: #eef2ff;  
  --accent:     #06b6d4;  
  --danger:     #ef4444;  
  --success:    #22c55e;  
  --warn:       #f59e0b;  
  --bg:         #f1f5f9;  
  --card:       #ffffff;  
  --border:     #e2e8f0;  
  --text:       #1e293b;  
  --muted:      #64748b;  
  --radius:     12px;  
  --radius-sm:  8px;  
  --shadow:     0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.07);  
  --shadow-lg:  0 8px 32px rgba(0,0,0,.12);  
  --sidebar-w:  240px;  
  --topbar-h:   64px;  
  --transition: .18s ease;  
}

body {  
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;  
  background: var(--bg);  
  color: var(--text);  
  min-height: 100vh;  
  line-height: 1.5;  
}

/* ============================================================  
   LAYOUT — Sidebar fixe + Main scrollable  
   ============================================================ */  
.layout {  
  display: flex;  
  min-height: 100vh;  
}

/* ============================================================  
   SIDEBAR  
   ============================================================ */  
.sidebar {  
  width: var(--sidebar-w);  
  min-width: var(--sidebar-w);  
  background: linear-gradient(175deg, #312e81 0%, var(--primary) 60%, #4338ca 100%);  
  color: #fff;  
  display: flex;  
  flex-direction: column;  
  position: fixed;  
  top: 0;  
  left: 0;  
  height: 100vh;  
  z-index: 50;  
  box-shadow: 4px 0 20px rgba(0,0,0,.15);  
}

.sidebar-logo {  
  font-size: 1.45rem;  
  font-weight: 800;  
  letter-spacing: -0.5px;  
  padding: 22px 24px 20px;  
  border-bottom: 1px solid rgba(255,255,255,.12);  
  display: flex;  
  align-items: center;  
  gap: 2px;  
}

.sidebar-logo span { color: var(--accent); }

.sidebar nav {  
  margin-top: 12px;  
  flex: 1;  
  overflow-y: auto;  
  padding-bottom: 8px;  
}

.nav-item {  
  display: flex;  
  align-items: center;  
  gap: 12px;  
  padding: 11px 20px 11px 18px;  
  cursor: pointer;  
  border-left: 3px solid transparent;  
  transition: background var(--transition), border-color var(--transition);  
  font-size: .9rem;  
  font-weight: 500;  
  color: rgba(255,255,255,.82);  
  margin: 2px 8px;  
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;  
}

.nav-item:hover {  
  background: rgba(255,255,255,.1);  
  color: #fff;  
  border-left-color: rgba(255,255,255,.4);  
}

.nav-item.active {  
  background: rgba(255,255,255,.15);  
  color: #fff;  
  border-left-color: var(--accent);  
  font-weight: 600;  
}

.nav-item svg {  
  width: 18px;  
  height: 18px;  
  flex-shrink: 0;  
  opacity: .85;  
}

.nav-item.active svg,  
.nav-item:hover svg { opacity: 1; }

.sidebar-footer {  
  padding: 14px 24px;  
  font-size: .72rem;  
  color: rgba(255,255,255,.4);  
  border-top: 1px solid rgba(255,255,255,.1);  
}

/* ============================================================  
   MAIN — décalé de la sidebar  
   ============================================================ */  
.main {  
  flex: 1;  
  margin-left: var(--sidebar-w);  
  display: flex;  
  flex-direction: column;  
  min-width: 0;  
  min-height: 100vh;  
}

/* ============================================================  
   TOPBAR  
   ============================================================ */  
.topbar {  
  background: var(--card);  
  border-bottom: 1px solid var(--border);  
  padding: 0 32px;  
  height: var(--topbar-h);  
  display: flex;  
  align-items: center;  
  justify-content: space-between;  
  position: sticky;  
  top: 0;  
  z-index: 40;  
  box-shadow: 0 1px 4px rgba(0,0,0,.06);  
  gap: 16px;  
}

.topbar h1 {  
  font-size: 1.1rem;  
  font-weight: 700;  
  color: var(--text);  
  white-space: nowrap;  
  flex-shrink: 0;  
}

.topbar-actions {  
  display: flex;  
  gap: 10px;  
  align-items: center;  
  flex-wrap: wrap;  
}

/* ============================================================  
   CONTENT  
   ============================================================ */  
.content {  
  padding: 28px 32px 40px;  
  flex: 1;  
  overflow-y: auto;  
}

/* ============================================================  
   STATS — 4 cartes bien proportionnées  
   ============================================================ */  
.stats {  
  display: grid;  
  grid-template-columns: repeat(4, 1fr);  
  gap: 16px;  
  margin-bottom: 24px;  
}

.stat-card {  
  background: var(--card);  
  border-radius: var(--radius);  
  padding: 22px 24px;  
  box-shadow: var(--shadow);  
  display: flex;  
  flex-direction: column;  
  gap: 8px;  
  border-top: 3px solid transparent;  
  transition: transform var(--transition), box-shadow var(--transition);  
  position: relative;  
  overflow: hidden;  
}

.stat-card:hover {  
  transform: translateY(-2px);  
  box-shadow: var(--shadow-lg);  
}

.stat-card:nth-child(1) { border-top-color: var(--primary); }  
.stat-card:nth-child(2) { border-top-color: var(--success); }  
.stat-card:nth-child(3) { border-top-color: var(--warn); }  
.stat-card:nth-child(4) { border-top-color: var(--muted); }

/* Icône décorative en fond */  
.stat-card::after {  
  content: attr(data-icon);  
  position: absolute;  
  right: 16px;  
  top: 50%;  
  transform: translateY(-50%);  
  font-size: 2.4rem;  
  opacity: .07;  
  pointer-events: none;  
}

.stat-label {  
  font-size: .72rem;  
  color: var(--muted);  
  text-transform: uppercase;  
  letter-spacing: .07em;  
  font-weight: 600;  
}

.stat-value {  
  font-size: 2.2rem;  
  font-weight: 800;  
  line-height: 1;  
  letter-spacing: -1px;  
}

.stat-value.blue   { color: var(--primary); }  
.stat-value.green  { color: var(--success); }  
.stat-value.orange { color: var(--warn); }  
.stat-value.gray   { color: var(--muted); }

/* ============================================================  
   TOOLBAR — barre de filtres  
   ============================================================ */  
.toolbar {  
  background: var(--card);  
  border-radius: var(--radius);  
  padding: 14px 20px;  
  display: flex;  
  flex-wrap: wrap;  
  gap: 10px;  
  align-items: center;  
  box-shadow: var(--shadow);  
  margin-bottom: 20px;  
}

.toolbar input,  
.toolbar select {  
  border: 1px solid var(--border);  
  border-radius: var(--radius-sm);  
  padding: 8px 12px;  
  font-size: .875rem;  
  background: var(--bg);  
  color: var(--text);  
  outline: none;  
  transition: border-color var(--transition), box-shadow var(--transition);  
  height: 38px;  
}

.toolbar input:focus,  
.toolbar select:focus {  
  border-color: var(--primary);  
  box-shadow: 0 0 0 3px rgba(79,70,229,.1);  
}

.toolbar input[type="text"] {  
  min-width: 240px;  
  flex: 1;  
}

.toolbar select { min-width: 150px; }

#result-count {  
  margin-left: auto;  
  color: var(--muted);  
  font-size: .82rem;  
  white-space: nowrap;  
  font-weight: 500;  
}

/* ============================================================  
   BUTTONS  
   ============================================================ */  
.btn {  
  display: inline-flex;  
  align-items: center;  
  gap: 7px;  
  padding: 8px 16px;  
  border-radius: var(--radius-sm);  
  border: none;  
  cursor: pointer;  
  font-size: .875rem;  
  font-weight: 600;  
  transition: all var(--transition);  
  white-space: nowrap;  
  line-height: 1.4;  
}

.btn:active { transform: scale(.97); }

.btn-primary       { background: var(--primary); color: #fff; }  
.btn-primary:hover { background: var(--primary-dk); box-shadow: 0 4px 12px rgba(79,70,229,.35); }

.btn-accent        { background: var(--accent); color: #fff; }  
.btn-accent:hover  { filter: brightness(1.08); box-shadow: 0 4px 12px rgba(6,182,212,.35); }

.btn-danger        { background: var(--danger); color: #fff; }  
.btn-danger:hover  { filter: brightness(1.08); }

.btn-pappers       { background: #7c3aed; color: #fff; }  
.btn-pappers:hover { background: #6d28d9; }

.btn-outline       { background: transparent; border: 1px solid var(--border); color: var(--text); }  
.btn-outline:hover { background: var(--bg); border-color: #cbd5e1; }

.btn-sm { padding: 5px 10px; font-size: .78rem; }

.btn-pappers img,  
.btn-accent img {  
  width: 16px;  
  height: 16px;  
  vertical-align: middle;  
  border-radius: 3px;  
}

/* ============================================================  
   TABLE WRAP  
   ============================================================ */  
.table-wrap {  
  background: var(--card);  
  border-radius: var(--radius);  
  box-shadow: var(--shadow);  
  overflow: hidden;  
}

table {  
  width: 100%;  
  border-collapse: collapse;  
  font-size: .845rem;  
  table-layout: fixed;  
}

/* Largeurs de colonnes */  
table colgroup col:nth-child(1) { width: 18%; }  /* Société */  
table colgroup col:nth-child(2) { width: 12%; }  /* Gérant */  
table colgroup col:nth-child(3) { width: 10%; }  /* Ville */  
table colgroup col:nth-child(4) { width: 12%; }  /* Secteur */  
table colgroup col:nth-child(5) { width: 8%;  }  /* Création */  
table colgroup col:nth-child(6) { width: 8%;  }  /* Statut */  
table colgroup col:nth-child(7) { width: 9%;  }  /* Consulté */  
table colgroup col:nth-child(8) { width: 23%; }  /* Actions ← élargi */  

thead {  
  background: linear-gradient(90deg, var(--primary-dk), var(--primary));  
  color: #fff;  
}

thead th {  
  padding: 13px 14px;  
  text-align: left;  
  font-weight: 600;  
  font-size: .72rem;  
  letter-spacing: .06em;  
  text-transform: uppercase;  
  cursor: pointer;  
  user-select: none;  
  white-space: nowrap;  
  overflow: hidden;  
  text-overflow: ellipsis;  
}

thead th:hover        { background: rgba(255,255,255,.12); }  
thead th .sort-icon   { opacity: .45; margin-left: 4px; font-size: .7rem; }  
thead th.sorted .sort-icon { opacity: 1; }

tbody tr {  
  border-bottom: 1px solid var(--border);  
  transition: background var(--transition);  
}

tbody tr:last-child { border-bottom: none; }  
tbody tr:hover      { background: #f8faff; }

td {  
  padding: 11px 14px;  
  vertical-align: middle;  
  overflow: hidden;  
  text-overflow: ellipsis;  
  white-space: nowrap;  
}

td.company-name {  
  font-weight: 600;  
  color: var(--primary);  
}

td.company-name:hover { text-decoration: underline; cursor: pointer; }

.gerant-cell {  
  font-size: .8rem;  
  color: var(--muted);  
}

.date-cell {  
  font-size: .8rem;  
  color: var(--muted);  
}

.last-seen-cell { font-size: .78rem; }

.ls-never    { color: var(--muted); font-style: italic; }  
.ls-recent   { color: var(--success); font-weight: 600; }  
.ls-old      { color: var(--warn); }  
.ls-very-old { color: var(--danger); }

.actions-cell {  
  display: flex;  
  gap: 4px;  
  align-items: center;  
  white-space: nowrap;  
  overflow: visible !important;  
  padding: 6px 8px !important;  
}  

/* ============================================================  
   BADGES  
   ============================================================ */  
.badge {  
  display: inline-block;  
  padding: 3px 10px;  
  border-radius: 99px;  
  font-size: .72rem;  
  font-weight: 700;  
  letter-spacing: .02em;  
}

.badge-green  { background: #dcfce7; color: #15803d; }  
.badge-blue   { background: #dbeafe; color: #1d4ed8; }  
.badge-orange { background: #fef3c7; color: #b45309; }  
.badge-gray   { background: #f1f5f9; color: #475569; }

/* ============================================================  
   PAGINATION  
   ============================================================ */  
.pagination {  
  display: flex;  
  align-items: center;  
  justify-content: space-between;  
  padding: 14px 20px;  
  border-top: 1px solid var(--border);  
  font-size: .82rem;  
  color: var(--muted);  
  background: #fafbfc;  
}

.pagination-btns { display: flex; gap: 5px; flex-wrap: wrap; }

.page-btn {  
  padding: 5px 11px;  
  border: 1px solid var(--border);  
  border-radius: 6px;  
  background: var(--card);  
  cursor: pointer;  
  font-size: .8rem;  
  font-weight: 500;  
  transition: all .15s;  
  min-width: 34px;  
  text-align: center;  
}

.page-btn:hover   { background: var(--primary-lt); border-color: var(--primary); color: var(--primary); }  
.page-btn.active  { background: var(--primary); color: #fff; border-color: var(--primary); }  
.page-btn:disabled { opacity: .38; cursor: not-allowed; }

/* ============================================================  
   MODAL  
   ============================================================ */  
.modal-overlay {  
  display: none;  
  position: fixed;  
  inset: 0;  
  background: rgba(15,23,42,.5);  
  z-index: 200;  
  align-items: center;  
  justify-content: center;  
  backdrop-filter: blur(2px);  
}

.modal-overlay.open { display: flex; }

.modal {  
  background: var(--card);  
  border-radius: 16px;  
  padding: 32px;  
  width: 100%;  
  max-width: 640px;  
  box-shadow: 0 24px 64px rgba(0,0,0,.22);  
  position: relative;  
  max-height: 90vh;  
  overflow-y: auto;  
  animation: modalIn .2s ease;  
}

@keyframes modalIn {  
  from { transform: scale(.96) translateY(8px); opacity: 0; }  
  to   { transform: scale(1)   translateY(0);   opacity: 1; }  
}

.modal h2 {  
  font-size: 1.15rem;  
  margin-bottom: 24px;  
  font-weight: 700;  
  color: var(--text);  
}

.modal-close {  
  position: absolute;  
  top: 18px;  
  right: 20px;  
  background: var(--bg);  
  border: none;  
  font-size: 1.1rem;  
  cursor: pointer;  
  color: var(--muted);  
  width: 32px;  
  height: 32px;  
  border-radius: 50%;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  transition: background var(--transition), color var(--transition);  
}

.modal-close:hover { background: #fee2e2; color: var(--danger); }

.form-grid {  
  display: grid;  
  grid-template-columns: 1fr 1fr;  
  gap: 16px;  
}

.form-group {  
  display: flex;  
  flex-direction: column;  
  gap: 5px;  
}

.form-group.full { grid-column: 1 / -1; }

.form-group label {  
  font-size: .78rem;  
  font-weight: 700;  
  color: var(--muted);  
  text-transform: uppercase;  
  letter-spacing: .04em;  
}

.form-group input,  
.form-group select,  
.form-group textarea {  
  border: 1px solid var(--border);  
  border-radius: var(--radius-sm);  
  padding: 9px 12px;  
  font-size: .9rem;  
  outline: none;  
  transition: border-color var(--transition), box-shadow var(--transition);  
  font-family: inherit;  
  background: #fff;  
  color: var(--text);  
}

.form-group input:focus,  
.form-group select:focus,  
.form-group textarea:focus {  
  border-color: var(--primary);  
  box-shadow: 0 0 0 3px rgba(79,70,229,.1);  
}

.form-group textarea {  
  resize: vertical;  
  min-height: 80px;  
}

.modal-footer {  
  margin-top: 24px;  
  display: flex;  
  gap: 10px;  
  justify-content: flex-end;  
  padding-top: 16px;  
  border-top: 1px solid var(--border);  
}

.section-title {  
  font-size: .72rem;  
  font-weight: 700;  
  color: var(--primary);  
  text-transform: uppercase;  
  letter-spacing: .07em;  
  padding: 8px 12px;  
  border-radius: 6px;  
  background: var(--primary-lt);  
  grid-column: 1 / -1;  
  margin-top: 4px;  
}

/* ============================================================  
   GÉRANTS  
   ============================================================ */  
.gerants-list {  
  display: flex;  
  flex-direction: column;  
  gap: 8px;  
}

.gerant-row {  
  display: flex;  
  gap: 8px;  
  align-items: center;  
}

.gerant-row input {  
  flex: 1;  
  border: 1px solid var(--border);  
  border-radius: var(--radius-sm);  
  padding: 8px 12px;  
  font-size: .88rem;  
  outline: none;  
  font-family: inherit;  
  background: #fff;  
  transition: border-color var(--transition);  
}

.gerant-row input:focus { border-color: var(--primary); }

.btn-add-gerant {  
  margin-top: 6px;  
  font-size: .82rem;  
  padding: 7px 14px;  
  background: var(--primary-lt);  
  border: 1.5px dashed var(--primary);  
  color: var(--primary);  
  border-radius: var(--radius-sm);  
  cursor: pointer;  
  font-weight: 600;  
  transition: all var(--transition);  
  display: inline-block;  
}

.btn-add-gerant:hover { background: #e0e7ff; }

.btn-rm-gerant {  
  background: none;  
  border: none;  
  color: var(--danger);  
  cursor: pointer;  
  font-size: 1rem;  
  padding: 4px 6px;  
  flex-shrink: 0;  
  border-radius: 4px;  
  transition: background var(--transition);  
}

.btn-rm-gerant:hover { background: #fee2e2; }

/* ============================================================  
   IMPORT ZONE  
   ============================================================ */  
.import-zone {  
  border: 2px dashed var(--primary);  
  border-radius: var(--radius);  
  padding: 40px 32px;  
  text-align: center;  
  cursor: pointer;  
  transition: background var(--transition), transform var(--transition);  
  background: var(--primary-lt);  
  margin-bottom: 20px;  
}

.import-zone:hover {  
  background: #e0e7ff;  
  transform: scale(1.005);  
}

.import-zone svg {  
  width: 44px;  
  height: 44px;  
  color: var(--primary);  
  margin-bottom: 12px;  
}

.import-zone p {  
  color: var(--muted);  
  font-size: .9rem;  
  line-height: 1.6;  
}

.import-zone strong { color: var(--primary); }

/* ============================================================  
   PROGRESS — IMPORT  
   ============================================================ */  
.progress-wrap {  
  display: none;  
  margin-bottom: 16px;  
  background: var(--card);  
  border-radius: var(--radius);  
  padding: 20px 24px;  
  box-shadow: var(--shadow);  
  border-left: 4px solid var(--primary);  
}

.progress-wrap.visible { display: block; }

.progress-label {  
  font-size: .88rem;  
  font-weight: 600;  
  color: var(--text);  
  margin-bottom: 10px;  
}

.progress-bar-bg {  
  background: var(--border);  
  border-radius: 99px;  
  height: 10px;  
  overflow: hidden;  
}

.progress-bar-fill {  
  height: 100%;  
  background: linear-gradient(90deg, var(--primary), var(--accent));  
  border-radius: 99px;  
  transition: width .25s ease;  
  width: 0%;  
}

.progress-stats {  
  font-size: .8rem;  
  color: var(--muted);  
  margin-top: 8px;  
}

/* ============================================================  
   PROGRESS — PATCH  
   ============================================================ */  
.patch-progress-wrap {  
  display: none;  
  margin-top: 16px;  
  background: var(--card);  
  border-radius: var(--radius);  
  padding: 20px 24px;  
  box-shadow: var(--shadow);  
  border-left: 4px solid var(--warn);  
}

.patch-progress-wrap.visible { display: block; }

.patch-progress-label {  
  font-size: .88rem;  
  color: var(--text);  
  margin-bottom: 10px;  
  font-weight: 600;  
}

.patch-progress-bar-bg {  
  background: var(--border);  
  border-radius: 99px;  
  height: 10px;  
  overflow: hidden;  
}

.patch-progress-bar-fill {  
  height: 100%;  
  background: var(--warn);  
  border-radius: 99px;  
  transition: width .3s;  
  width: 0%;  
}

.patch-progress-stats {  
  font-size: .8rem;  
  color: var(--muted);  
  margin-top: 8px;  
}

/* ============================================================  
   EMPTY STATE  
   ============================================================ */  
.empty-state {  
  text-align: center;  
  padding: 72px 20px;  
  color: var(--muted);  
}

.empty-state svg {  
  width: 64px;  
  height: 64px;  
  margin-bottom: 16px;  
  opacity: .3;  
}

.empty-state p {  
  font-size: .95rem;  
  line-height: 1.7;  
}

/* ============================================================  
   TOAST  
   ============================================================ */  
#toast-container {  
  position: fixed;  
  bottom: 24px;  
  right: 24px;  
  display: flex;  
  flex-direction: column;  
  gap: 10px;  
  z-index: 999;  
  pointer-events: none;  
}

.toast {  
  background: #1e293b;  
  color: #fff;  
  padding: 12px 20px;  
  border-radius: 10px;  
  font-size: .875rem;  
  box-shadow: 0 8px 24px rgba(0,0,0,.25);  
  animation: slideIn .25s ease;  
  display: flex;  
  align-items: center;  
  gap: 10px;  
  pointer-events: all;  
  max-width: 360px;  
}

.toast.success { border-left: 4px solid var(--success); }  
.toast.error   { border-left: 4px solid var(--danger); }  
.toast.info    { border-left: 4px solid var(--accent); }

@keyframes slideIn {  
  from { transform: translateX(60px); opacity: 0; }  
  to   { transform: translateX(0);    opacity: 1; }  
}

/* ============================================================  
   BOUTON SIRÈNE  
   ============================================================ */  
.btn-sirene {  
  background: #eef2ff;  
  color: var(--primary);  
  border: 1px solid #c7d2fe;  
  font-size: .875rem;  
}

.btn-sirene:hover {  
  background: var(--primary);  
  color: #fff;  
  border-color: var(--primary);  
}

/* ============================================================  
   BOUTON PAGES JAUNES — Toggle cochable  
   ============================================================ */  
/* Compacte les boutons d'action */  
.actions-cell .btn-sm {  
  padding: 4px 6px;  
  font-size: .72rem;  
}

.btn-pj-toggle {  
  background: #f8f8f8;  
  color: #555;  
  border: 1px solid #ddd;  
  font-size: .68rem;  
  font-weight: 600;  
  padding: 4px 5px;  
  min-width: 44px;  
  white-space: nowrap;  
  transition: all .18s ease;  
}

.btn-pj-toggle.btn-pj-active {  
  background: #FFCC00;  
  color: #1a1a1a;  
  border-color: #e6b800;  
  font-weight: 700;  
  box-shadow: 0 2px 8px rgba(255,204,0,.35);  
}

.btn-pj-toggle:hover {  
  background: #fff9e6;  
  border-color: #FFCC00;  
  color: #b8860b;  
}

/* FIX — Bouton Modifier toujours visible */  
.actions-cell .btn-outline {  
  min-width: 28px;  
  padding: 4px 6px;  
  display: inline-flex;  
  align-items: center;  
  justify-content: center;  
}  

/* ============================================================  
   SCROLLBAR personnalisée  
   ============================================================ */  
::-webkit-scrollbar       { width: 6px; height: 6px; }  
::-webkit-scrollbar-track { background: transparent; }  
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }  
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ============================================================  
   RESPONSIVE  
   ============================================================ */  
@media (max-width: 1200px) {  
  .stats { grid-template-columns: repeat(2, 1fr); }  
}

@media (max-width: 900px) {  
  .sidebar { width: 200px; min-width: 200px; }  
  .main    { margin-left: 200px; }  
  .content { padding: 20px 20px 32px; }  
  .topbar  { padding: 0 20px; }  
}

@media (max-width: 768px) {  
  .sidebar { display: none; }  
  .main    { margin-left: 0; }  
  .content { padding: 16px; }  
  .form-grid { grid-template-columns: 1fr; }  
  .topbar  { padding: 0 16px; }  
  .stats   { grid-template-columns: repeat(2, 1fr); }  
  .topbar-actions .btn:not(.btn-primary) { display: none; }  
}

@media (max-width: 480px) {  
  .stats { grid-template-columns: 1fr; }  
}  
/* ============================================================
   NAV MOBILE — tiroir coulissant (correctif navigation mobile)
   ============================================================ */
.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  color: var(--primary, #4f46e5);
  padding: 0 10px 0 0;
}
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  z-index: 999;
}
@media (max-width: 768px) {
  .mobile-menu-btn { display: inline-flex; align-items: center; }
  .sidebar {
    display: flex !important;          /* annule le display:none précédent */
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 1000;
    width: 270px;
    min-width: 270px;
    box-shadow: 4px 0 24px rgba(0, 0, 0, .35);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay.show { display: block; }
}

/* Mobile : rendre le bot Google accessible depuis le téléphone */
@media (max-width: 768px) {
  .topbar-actions { flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
  #btn-gbot,
  #btn-gbot-segment { display: inline-flex !important; align-items: center; }
}

/* ============================================================
   RESPONSIVE MOBILE — correctifs (topbar + tableau)  v2
   ============================================================ */
@media (max-width: 768px) {

  /* 1) Topbar : hauteur auto → les boutons ne débordent plus sur le contenu */
  .topbar {
    height: auto;
    min-height: var(--topbar-h);
    flex-wrap: wrap;
    align-items: center;
    padding: 8px 14px;
    row-gap: 6px;
  }
  .topbar h1 {
    font-size: 1.05rem;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .topbar-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    width: 100%;
  }
  /* Boutons compacts en mobile */
  .topbar-actions .btn { font-size: .8rem; padding: 7px 10px; }

  /* 2) Tableau : défilement horizontal + colonnes dimensionnées au contenu */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #crmTable, .table-wrap table {
    table-layout: auto;
    width: auto;
    min-width: 760px;          /* force le scroll horizontal plutôt que l'écrasement */
  }
  .table-wrap table colgroup col { width: auto !important; }
  thead th, td { padding: 10px 12px; }

  /* 3) Indice visuel de défilement horizontal */
  .table-wrap::-webkit-scrollbar { height: 6px; }
  .table-wrap::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }

  /* 4) Filtres : on évite que les chips collent à la topbar */
  .content { padding-top: 14px; }
}