@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* Colors - Deep & Modern Palette */
  --g900: #041d14;
  --g800: #093021;
  --g700: #104c32;
  --g600: #1b7a54;
  --g500: #26a370;
  --g400: #42c692;
  --g300: #7ae0b8;
  --g100: #e6f9f0;
  --g50: #f0fdf7;

  /* Accents */
  --accent: #22c55e;
  --accent-glow: rgba(34, 197, 94, 0.3);
  
  /* Grays & Neutrals */
  --white: #ffffff;
  --gray-25: #fcfcfd;
  --gray-50: #f9fafb;
  --gray-100: #f2f4f7;
  --gray-200: #eaecf0;
  --gray-300: #d0d5dd;
  --gray-400: #98a2b3;
  --gray-500: #667085;
  --gray-600: #475467;
  --gray-700: #344054;
  --gray-800: #1d2939;
  --gray-900: #101828;

  /* Semantic */
  --red: #ef4444;
  --amber: #f59e0b;
  --blue: #3b82f6;
  
  /* Dimensions */
  --sidebar-w: 260px;
  --header-h: 70px;
  
  /* Shadows - Layered & Soft */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.1), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
  --shadow-xl: 0 20px 24px -4px rgba(16, 24, 40, 0.08), 0 8px 8px -4px rgba(16, 24, 40, 0.03);
  
  /* Effects */
  --glass: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.1);
  --r: 10px;
  --r-lg: 16px;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.premium-dark {
  background: radial-gradient(at 0% 0%, #0f172a 0, transparent 50%),
              radial-gradient(at 50% 0%, #041d14 0, transparent 50%),
              #020617;
  color: #f8fafc;
}

.glass-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.terminal-text {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  color: var(--g400);
}

.pulse-red {
  background: var(--red) !important;
  color: #fff !important;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px; scroll-behavior: smooth;}
body{
  font-family:'Inter', sans-serif;
  background-color: var(--gray-50);
  background-image: radial-gradient(at 0% 0%, rgba(34, 197, 94, 0.03) 0, transparent 50%),
                    radial-gradient(at 50% 0%, rgba(34, 197, 94, 0.02) 0, transparent 50%);
  color:var(--gray-900);
  -webkit-font-smoothing:antialiased;
  overflow-x: clip;
}
a{text-decoration:none;color:inherit; transition: var(--transition);}
ul{list-style:none}
img{max-width:100%;display:block}
input,select,textarea,button{font-family:inherit; outline: none;}

/* ── LAYOUT ── */
.app-layout{display:flex;min-height:100vh}

/* ── SIDEBAR ── */
.sidebar{
  width:var(--sidebar-w);flex-shrink:0;
  background: linear-gradient(180deg, var(--g900) 0%, var(--g800) 100%);
  color:rgba(255,255,255,.7);
  display:flex;flex-direction:column;
  position:fixed;top:0;left:0;bottom:0;z-index:100;
  overflow-y:auto;
  box-shadow: 4px 0 24px rgba(0,0,0,0.1);
  border-right: 1px solid rgba(255,255,255,0.05);
}
.sidebar-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 99; backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.sidebar-overlay.show { opacity: 1; pointer-events: all; }
.sidebar-logo{
  padding:2rem 1.5rem;display:flex;align-items:center;gap:.75rem;
  font-weight:800;font-size:1.2rem;color:#fff;
  letter-spacing: 1px;
}
.sidebar-section{padding:.75rem 0; display: flex; flex-direction: column;}
.sidebar-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  color:rgba(255,255,255,.3);padding:.75rem 1.5rem .5rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: color 0.2s;}
.sidebar-label:hover { color: rgba(255,255,255,0.7); }
.sidebar-label .icon { transition: transform 0.3s; opacity: 0.6; width: 14px; height: 14px; flex-shrink: 0; }
.sidebar-section.collapsed .sidebar-label .icon { transform: rotate(-90deg); }
.sidebar-items { overflow: hidden; transition: max-height 0.3s ease-in-out; max-height: 500px; }
.sidebar-section.collapsed .sidebar-items { max-height: 0; }
.sidebar-item{
  display:flex;align-items:center;gap:.8rem;
  padding:.8rem 1.5rem;font-size:.9rem;font-weight:500;
  margin: 0.2rem 0.75rem;
  border-radius: var(--r);
  transition:var(--transition);cursor:pointer;
  position: relative;
}
.sidebar-item:hover{background:rgba(255,255,255,.05);color:#fff}
.sidebar-item.active{
  background: var(--g700);
  color:#fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.sidebar-item .icon{width:20px;height:20px;opacity:.6;flex-shrink:0; transition: var(--transition);}
.sidebar-item.active .icon{opacity:1; color: var(--g300);}
.sidebar-bottom{margin-top:auto;padding:1.5rem;background: rgba(0,0,0,0.1);}
.sidebar-bottom .btn{min-height: 44px; touch-action: manipulation;}
.plan-badge{
  display:inline-flex;align-items:center;gap:.4rem;
  background: linear-gradient(90deg, var(--g600), var(--g500));
  color:#fff;font-size:.75rem;font-weight:700;padding:.3rem .75rem;border-radius:50px;
  box-shadow: 0 4px 12px rgba(27, 122, 84, 0.3);
}

/* ── MAIN CONTENT ── */
.main{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-height:100vh; min-width:0; overflow-x:clip;}

/* ── TOP BAR ── */
.topbar{
  height:var(--header-h);
  background: #ffffff;
  border-bottom: 1px solid var(--gray-200);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 2.5rem;position:sticky;top:0;z-index:99;
}
.page-title{font-size:1.25rem;font-weight:800;color:var(--gray-900); letter-spacing: -0.5px;}
.topbar-left{display:flex;align-items:center;gap:1rem;}
.topbar-right{display:flex;align-items:center;gap:1.25rem}

/* ── COMPANY SWITCHER BUTTON (TOPBAR) ── */
.company-switcher-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  padding: 0.35rem 0.75rem 0.35rem 0.45rem;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  font-family: inherit;
  text-align: left;
}
.company-switcher-btn:hover {
  background: var(--gray-50);
  border-color: var(--g400);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}
.company-icon-badge {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--g100);
  color: var(--g700);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.company-switcher-btn:hover .company-icon-badge {
  background: var(--g700);
  color: #ffffff;
}
.company-info-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  max-width: 170px;
}
.company-label-sub {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.company-name-val {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gray-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.company-caret-icon {
  color: var(--gray-400);
  transition: all 0.2s ease;
  flex-shrink: 0;
  margin-left: 0.15rem;
}
.company-switcher-btn:hover .company-caret-icon {
  color: var(--g700);
  transform: translateY(1px);
}
.avatar{
  width:40px;height:40px;border-radius:12px;
  background: linear-gradient(135deg, var(--g600), var(--g800));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:.9rem;cursor:pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: var(--transition);
}
.avatar:hover{transform: scale(1.05); box-shadow: 0 6px 15px rgba(0,0,0,0.15);}

/* ── PAGE BODY ── */
.page-body{padding:1.75rem 2rem;flex:1}

/* ── KPI CARDS ── */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:1.5rem;margin-bottom:2rem}
.kpi-card{
  background:var(--white);
  border: 1px solid var(--gray-200);
  border-radius:var(--r-lg);
  padding:1.5rem;
  transition:var(--transition);
  position: relative;
  overflow: hidden;
}
.kpi-card::before{
  content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%;
  background: var(--g500); opacity: 0; transition: var(--transition);
}
.kpi-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.kpi-card:hover::before{ opacity: 1; }
.kpi-label{font-size:.8rem;color:var(--gray-500);font-weight:600;margin-bottom:.5rem; text-transform: uppercase; letter-spacing: 0.5px;}
.kpi-value{font-size:1.8rem;font-weight:800;color:var(--gray-900);line-height:1; letter-spacing: -1px;}
.kpi-delta{display:inline-flex;align-items:center;gap:.2rem;font-size:.75rem;font-weight:600;margin-top:.4rem}
.kpi-delta.up{color:#10B981}
.kpi-delta.down{color:var(--red)}
.kpi-sub{font-size:.72rem;color:var(--gray-400);margin-top:.15rem}

/* ── CARDS & PANELS ── */
.card{
  background:var(--white);
  border:1px solid var(--gray-200);
  border-radius:var(--r-lg);
  padding:2rem;
  box-shadow: var(--shadow-sm);
}
.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.75rem}
.card-title{font-size:1.1rem;font-weight:800;color:var(--gray-900); letter-spacing: -0.3px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.mb-4{margin-bottom:1rem}
.mb-6{margin-bottom:1.5rem}

/* ── TABLE ── */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--gray-400);padding:.65rem 1rem;border-bottom:1px solid var(--gray-200);text-align:left}
td{font-size:.85rem;color:var(--gray-700);padding:.75rem 1rem;border-bottom:1px solid var(--gray-100)}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--gray-50)}

/* ── BADGE ── */
.badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;font-weight:600;
  padding:.2rem .55rem;border-radius:50px}
.badge-green{background:#D1FAE5;color:#065F46}
.badge-red{background:#FEE2E2;color:#991B1B}
.badge-amber{background:#FEF3C7;color:#92400E}
.badge-blue{background:#DBEAFE;color:#1E40AF}
.badge-gray{background:var(--gray-100);color:var(--gray-500)}

/* ── BUTTONS ── */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.25rem;
  border-radius:var(--r);font-weight:700;font-size:.85rem;cursor:pointer;
  border:none;transition:var(--transition);
  justify-content: center;
  touch-action: manipulation;
  white-space: nowrap;
  box-sizing: border-box;
}
.btn-sm {
  padding: 0.35rem 0.85rem !important;
  font-size: 0.82rem !important;
  height: 38px !important;
  min-height: 38px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1;
}

/* ── Topbar Actions Normalization ── */
.btn-topbar-export {
  background: var(--gray-100) !important;
  color: var(--gray-700) !important;
  border: 1px solid var(--gray-200) !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  padding: 0 0.85rem !important;
  height: 38px !important;
  min-height: 38px !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
}
.btn-topbar-export:hover {
  background: var(--gray-200) !important;
  color: var(--gray-900) !important;
}
.btn-topbar-quote {
  background: #1e293b !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  padding: 0 1rem !important;
  height: 38px !important;
  min-height: 38px !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.btn-topbar-quote:hover {
  background: #0f172a !important;
}
.btn-topbar-invoice {
  background: linear-gradient(135deg, var(--g700, #05603a), var(--g800, #044e32)) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
  padding: 0 1.15rem !important;
  height: 38px !important;
  min-height: 38px !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(4, 78, 50, 0.25) !important;
}
.btn-topbar-invoice:hover {
  background: linear-gradient(135deg, var(--g600, #0d9488), var(--g700, #05603a)) !important;
}
.btn-primary{
  background: linear-gradient(135deg, var(--g700), var(--g800));
  color:#fff;
  box-shadow: 0 4px 12px rgba(16, 76, 50, 0.2);
}
.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 76, 50, 0.3);
  background: linear-gradient(135deg, var(--g600), var(--g700));
}
.btn-ghost{
  background: var(--gray-100);
  color:var(--gray-700);
  border: 1px solid transparent;
}
.btn-ghost:hover{
  background: var(--gray-200);
  color:var(--gray-900);
}
.btn-danger{
  background: #fef2f2;
  color:#b91c1c;
  border: 1px solid #fee2e2;
}
.btn-danger:hover{ background: #fee2e2; }
.btn-icon{
  width: 36px; height: 36px;
  border-radius: 10px;
  background:var(--gray-100);
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:var(--transition);
  color: var(--gray-600);
}
.btn-icon:hover{
  background: var(--g100);
  color: var(--g700);
  transform: rotate(5deg) scale(1.1);
}
.btn-close-squircle {
  width: 32px;
  height: 32px;
  min-width: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  color: #ffffff;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  transition: all 0.15s ease;
  padding: 0;
}
.btn-close-squircle:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.05);
  color: #ffffff;
}

/* ── FORMS ── */
.form-group{margin-bottom:1rem}
.form-label{display:block;font-size:.8rem;font-weight:600;color:var(--gray-700);margin-bottom:.4rem}
.form-input{
  width:100%;padding:.6rem .9rem;border:1.5px solid var(--gray-200);border-radius:var(--r);
  font-size:.875rem;color:var(--gray-900);background:var(--white);outline:none;
  transition:var(--transition);
}
.form-input:focus{border-color:var(--g600);box-shadow:0 0 0 3px rgba(29,77,53,.07)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}
.form-check{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--gray-700);cursor:pointer}

/* ── MODAL SALE DETAILS ITEMS DESKTOP DEFAULTS ── */
.det-mobile-total,
.det-mobile-sub {
  display: none;
}
.det-desktop-total {
  display: inline;
}

/* ── MODAL SALE DETAILS FOOTER DESKTOP DEFAULTS ── */
#modal-sale-details .modal {
  max-width: 920px;
  width: 95%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#modal-sale-details .modal-body {
  overflow-y: auto;
  flex: 1;
}
#modal-sale-details .modal-footer {
  padding: 0.85rem 1.25rem !important;
  background: var(--gray-25) !important;
  border-top: 1px solid var(--gray-200) !important;
  border-radius: 0 0 24px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
}
.det-footer-actions-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 1;
  width: 100%;
}
.det-more-wrap {
  display: none;
}
.det-secondary-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.det-primary-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
#modal-sale-details .modal-footer .btn,
#modal-sale-details .det-action-item {
  min-height: 38px;
  height: 38px;
  padding: 0 0.85rem;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 8px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* ── MODAL PREVIEW PDF DESKTOP DEFAULTS ── */
#modal-preview-pdf .preview-pdf-modal-container {
  max-width: 1050px;
  width: 95%;
  height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border-radius: 16px;
}
#modal-preview-pdf .preview-pdf-header {
  background: linear-gradient(135deg, var(--g900, #044e32), var(--g700, #05603a));
  color: #ffffff;
  border-bottom: none;
  padding: 1rem 1.5rem;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#modal-preview-pdf #preview-pdf-title {
  color: #ffffff !important;
  font-size: 1.1rem;
  font-weight: 800;
}
#modal-preview-pdf .preview-pdf-header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
#modal-preview-pdf .preview-pdf-header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
#modal-preview-pdf .preview-pdf-body {
  padding: 0 !important;
  margin: 0 !important;
  flex: 1 1 auto;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: #525659;
}
#modal-preview-pdf iframe,
#modal-preview-pdf #preview-pdf-iframe {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  display: block;
}

/* ── MODAL ── */
.modal-overlay{
  position:fixed;inset:0;
  background: rgba(4, 29, 20, 0.4);
  backdrop-filter: blur(6px);
  z-index:999;
  display:flex;align-items:center;justify-content:center;padding:1.5rem;
  opacity:0;pointer-events:none;visibility:hidden;transition: var(--transition);
}
.modal-overlay.open{opacity:1;pointer-events:all;visibility:visible}
.modal{
  background:var(--white);
  border-radius:24px;
  width:100%;max-width:640px;
  max-height:90vh;overflow-y:auto;
  transform: scale(0.95) translateY(20px);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--gray-200);
}
.modal-overlay.open .modal{transform: scale(1) translateY(0)}

/* ── UI DIALOGS (CONFIRM & ALERT) HIGHEST Z-INDEX ── */
#ui-confirm.modal-overlay,
#ui-alert.modal-overlay {
  z-index: 999999 !important;
  background: rgba(4, 29, 20, 0.75) !important;
  backdrop-filter: blur(6px) !important;
}
#ui-confirm .modal,
#ui-alert .modal {
  z-index: 1000000 !important;
  max-width: 440px !important;
  width: 92% !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
#ui-confirm .modal-header,
#ui-alert .modal-header {
  background: linear-gradient(135deg, var(--g900, #044e32), var(--g700, #05603a)) !important;
  color: #ffffff !important;
  border-radius: 20px 20px 0 0 !important;
}
.modal-header{
  padding: 1.25rem 1.75rem;
  border-bottom: 1px solid var(--gray-100);
  background: var(--gray-25);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 24px 24px 0 0;
}
.modal-title{font-size:1.15rem;font-weight:800;color:var(--gray-900); letter-spacing: -0.4px;}
.modal-body{padding:2rem 2.5rem}
.modal-footer{
  padding:1.25rem 2.5rem;
  background: var(--gray-25);
  border-top:1px solid var(--gray-100);
  display:flex;gap:0.75rem;justify-content:flex-end;
  border-radius: 0 0 24px 24px;
}

/* ── CHART container ── */
.chart-container{position:relative;height:200px}

/* ── ALERT ── */
.alert{display:flex;gap:.75rem;padding:.9rem 1.1rem;border-radius:var(--r);font-size:.85rem;margin-bottom:1rem}
.alert-amber{background:#FEF3C7;border:1px solid #FCD34D;color:#92400E}
.alert-red{background:#FEE2E2;border:1px solid #FECACA;color:#991B1B}
.alert-green{background:#D1FAE5;border:1px solid #6EE7B7;color:#065F46}

/* ── MODULE LOCK ── */
.module-locked{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:4rem;text-align:center;gap:.75rem;
}
.module-locked .lock-icon{font-size:2.5rem}
.module-locked h3{font-size:1rem;font-weight:700;color:var(--gray-900)}
.module-locked p{font-size:.875rem;color:var(--gray-400);max-width:300px}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--gray-200);border-radius:10px}

/* ── TOGGLE ── */
.toggle{position:relative;display:inline-block;width:40px;height:22px}
.toggle input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;inset:0;background:var(--gray-200);border-radius:50px;cursor:pointer;transition:.2s}
.toggle-slider::before{content:'';position:absolute;width:16px;height:16px;left:3px;top:3px;
  background:#fff;border-radius:50%;transition:.2s}
.toggle input:checked+.toggle-slider{background:var(--g600)}
.toggle input:checked+.toggle-slider::before{transform:translateX(18px)}

/* ── ANIMATIONS ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes sidebarSlideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.page-body > * {
  animation: fadeInUp 0.5s ease-out both;
}

.kpi-card:nth-child(1) { animation-delay: 0.1s; }
.kpi-card:nth-child(2) { animation-delay: 0.2s; }
.kpi-card:nth-child(3) { animation-delay: 0.3s; }
.kpi-card:nth-child(4) { animation-delay: 0.4s; }
.kpi-card:nth-child(5) { animation-delay: 0.5s; }

/* ── TABLE HOVER ENHANCEMENT ── */
tr { transition: var(--transition); }
tr:hover { background-color: var(--g50) !important; }
td { transition: var(--transition); }

.mobile-hamburger-btn {
  display: none !important;
}

/* ── RESPONSIVE ── */
@media(max-width:1024px){.kpi-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){
  .sidebar{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 85vw;
    z-index: 99999 !important;
    box-shadow: 4px 0 24px rgba(0,0,0,0.35);
    background: linear-gradient(180deg, var(--g900) 0%, var(--g800) 100%) !important;
  }
  .sidebar.open{
    display: flex !important;
    animation: sidebarSlideIn 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
  .sidebar-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.55) !important;
    z-index: 99998 !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .sidebar-overlay.show {
    opacity: 1 !important;
    pointer-events: all !important;
  }
  .mobile-sidebar-close-btn {
    display: inline-flex !important;
  }
  .sidebar-item {
    min-height: 44px;
    touch-action: manipulation !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .sidebar-sub-items,
  .sidebar .sidebar-sub-items {
    display: none !important;
  }
  .sidebar-bottom .btn { min-height: 44px; touch-action: manipulation; }
  .main{margin-left:0; overflow-x: clip; max-width: 100vw;}
  .card{padding:1rem}
  .kpi-grid,.grid-2,.grid-3{grid-template-columns:1fr !important}
  .form-row,.form-row-3{grid-template-columns:1fr !important}
  .page-body{padding:0.75rem 0.65rem 4.5rem 0.65rem !important;}
  .page-body > * { animation: none !important; }

  /* ── TOPBAR FLICKER-FREE & STABLE ── */
  .topbar {
    padding: 0.55rem 0.85rem !important;
    min-height: 52px !important;
    height: auto !important;
    max-width: 100vw !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid var(--gray-200) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
    overflow: hidden !important;
  }
  .topbar-left {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .topbar-left .page-title,
  .topbar .page-title,
  .page-title {
    display: inline-block !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: var(--gray-900) !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }
  #company-selector-wrap,
  .company-switcher-btn {
    display: none !important;
  }
  .mobile-hamburger-btn {
    display: inline-flex !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--gray-50) !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: 8px !important;
    color: var(--gray-800) !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
  }
  .mobile-hamburger-btn:active {
    background: var(--gray-200) !important;
  }
  .mobile-hamburger-btn * {
    pointer-events: none !important;
  }
  .topbar-right {
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    flex-shrink: 0 !important;
    width: auto !important;
  }
  .topbar-right:has(.btn), .topbar-right:has(.segmented-control) { margin-top: 0; }
  /* Masquer systématiquement les boutons secondaires, de config ou d'export dans la topbar mobile */
  .topbar-right .btn-ghost,
  .topbar-right .btn-secondary,
  .topbar-right .btn-cols-config,
  .topbar-right .btn-topbar-export,
  .topbar-right .btn-topbar-quote,
  .topbar-right button:not(.btn-primary):not(.mobile-hamburger-btn):not(#notif-bell-wrap) {
    display: none !important;
  }
  .topbar-right .btn-primary {
    padding: 0.4rem 0.85rem !important;
    font-size: 0.84rem !important;
    min-height: 44px !important;
    height: 44px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    max-width: 140px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    justify-content: center !important;
    text-align: center !important;
    touch-action: manipulation !important;
  }
  .topbar-right .segmented-control { flex: 1 1 100%; margin: 0 !important; }
  .topbar-right .avatar {
    position: static;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    font-size: 0.75rem !important;
    touch-action: manipulation;
    flex-shrink: 0;
  }
  #suivix-bell-wrap {
    min-width: 36px !important;
    min-height: 36px !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    touch-action: manipulation;
    flex-shrink: 0;
    border: 1px solid var(--gray-200) !important;
    background: var(--gray-50) !important;
  }
  .table-wrap th, .table-wrap td { white-space: nowrap; }
  
  /* Anti-zoom iOS Safari sur tous les formulaires & inputs */
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .form-input {
    font-size: 16px !important;
    min-height: 44px;
  }
  
  /* Corrections formulaires, modales et onglets pour mobile */
  .modal-header { padding: 1.25rem 1.5rem !important; }
  .modal-body { padding: 1.5rem !important; }
  .modal-footer { padding: 1.25rem 1.5rem !important; flex-direction: column; gap: 0.75rem; }
  .modal-footer .btn { width: 100%; min-height: 48px; justify-content: center; margin: 0 !important; touch-action: manipulation; }
  .modal-inner-padding { padding: 1.25rem 1rem !important; }
  .filters-bar { flex-wrap: wrap; }
  .charts-grid { grid-template-columns: 1fr !important; }
  .v-tabs-container { margin: 0 0 0.75rem 0 !important; width: 100% !important; }
  .v-tabs {
    background: var(--gray-100) !important;
    padding: 3px !important;
    border-radius: 10px !important;
    display: flex !important;
    gap: 3px !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border: 1px solid var(--gray-200) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .v-tabs::-webkit-scrollbar { display: none; }
  .v-tab {
    background: transparent !important;
    color: var(--gray-600) !important;
    border: none !important;
    border-radius: 7px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    padding: 0.4rem 0.8rem !important;
    min-height: 38px !important;
    touch-action: manipulation !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease !important;
  }
  .v-tab.active {
    background: #ffffff !important;
    color: var(--g800) !important;
    font-weight: 800 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
  }
  .desktop-text { display: none !important; }
  .mobile-text { display: inline !important; }
  
  #notif-dropdown {
    width: calc(100vw - 2rem) !important;
    position: fixed !important;
    top: 75px !important;
    right: 1rem !important;
    left: 1rem !important;
  }
}

.modal-inner-padding { padding: 2.5rem; }

/* ── SEGMENTED CONTROL ── */
.segmented-control {
  display: flex;
  background: var(--gray-100);
  padding: 4px;
  border-radius: 12px;
  gap: 4px;
  border: 1px solid var(--gray-200);
  flex-wrap: wrap;
}
.segmented-control label {
  flex: 1;
  text-align: center;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  transition: var(--transition);
  color: var(--gray-500);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.segmented-control input { display: none; }
.segmented-control label:has(input:checked) {
  background: var(--white);
  color: var(--g700);
  box-shadow: var(--shadow-sm);
}
.segmented-control label:hover:not(:has(input:checked)) {
  background: rgba(255,255,255,0.5);
}
.segmented-control label:has(input:checked) svg {
  color: var(--g500);
}

/* ── PLANNING / CALENDAR ── */
.planning-table {
  border-spacing: 0.5rem;
  border-collapse: separate;
}
.planning-table td {
  padding: 1rem;
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: 12px;
  text-align: center;
  min-width: 100px;
}
.planning-table th {
  text-align: center;
  padding: 0.75rem;
}
.shift-tag {
  display: block;
  padding: 0.4rem;
  border-radius: 8px;
  background: var(--g100);
  color: var(--g800);
  font-weight: 700;
  font-size: 0.75rem;
  border: 1px solid var(--g300);
}
.shift-outside {
  background: var(--blue-50);
  color: var(--blue-800);
  border-color: var(--blue-200);
}
/* ── NEW TIMELINE UI ── */
.day-selector {
  display: flex;
  gap: 0.5rem;
  background: var(--gray-100);
  padding: 0.5rem;
  border-radius: var(--r-lg);
  justify-content: center;
}
.btn-day {
  flex: 1;
  padding: 0.6rem;
  border: none;
  background: transparent;
  border-radius: var(--r);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--gray-500);
  cursor: pointer;
  transition: var(--transition);
}
.btn-day.active {
  background: var(--white);
  color: var(--g700);
  box-shadow: var(--shadow-sm);
}
.btn-day:hover:not(.active) {
  background: rgba(255,255,255,0.5);
}

.timeline-container {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
}
.timeline-header {
  display: flex;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}
.timeline-label-col {
  width: 180px;
  flex-shrink: 0;
  padding: 1rem;
  border-right: 1px solid var(--gray-200);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--gray-400);
}
.timeline-ruler {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--gray-400);
}
.timeline-ruler div {
  padding: 0.75rem 0;
  border-right: 1px solid rgba(0,0,0,0.03);
}

.timeline-row {
  display: flex;
  border-bottom: 1px solid var(--gray-100);
  min-height: 50px;
  position: relative;
}
.timeline-content {
  flex: 1;
  position: relative;
  background-image: linear-gradient(to right, var(--gray-100) 1px, transparent 1px);
  background-size: calc(100% / 24) 100%;
}
.shift-block {
  position: absolute;
  top: 8px;
  bottom: 8px;
  border-radius: 6px;
  background: var(--blue);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  cursor: grab;
  transition: box-shadow 0.2s;
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
  z-index: 10;
}
.shift-block:active {
  cursor: grabbing;
}
.shift-block:hover {
  filter: brightness(1.1);
  box-shadow: var(--shadow-md);
}

.break-block {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2); /* Fond sombre semi-transparent */
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  z-index: 5;
  pointer-events: none;
}

/* Resizers */
.resizer {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: ew-resize;
  z-index: 11;
  background: rgba(255,255,255,0.1);
  transition: background 0.2s;
}
.resizer:hover {
  background: rgba(255,255,255,0.3);
}
.resizer-l { left: 0; }
.resizer-r { right: 0; }

.shift-info {
  pointer-events: none;
  padding: 0 10px;
}

.shift-block.opening {
  background: var(--g500);
  box-shadow: 0 0 10px rgba(38, 163, 112, 0.2);
}
.shift-block.outside {
  background: var(--amber);
}

/* Opening hours config */
.hours-config {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  background: var(--gray-50);
  padding: 1.5rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--gray-200);
}
.day-config-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--r);
}
.day-config-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 0.85rem;
}

/* Timeline resource column (Employees) */
.timeline-label-col {
  width: 200px;
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  border-right: 1px solid var(--gray-200);
  background: var(--gray-50);
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 0.85rem;
  position: relative;
  transition: var(--transition);
}

.timeline-row:hover .timeline-label-col {
  background: var(--white);
}

.timeline-label-col strong {
  color: var(--gray-800);
  display: block;
}

.timeline-label-col small {
  color: var(--gray-500);
  font-size: 0.75rem;
}

.timeline-label-col[draggable="true"] {
  cursor: grab;
}
.timeline-label-col[draggable="true"]:active {
  cursor: grabbing;
}

/* Contract Badges */
.badge-contract {
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
}
.badge-cdi { background: #e0f2fe; color: #0369a1; }
.badge-cdd { background: #fef3c7; color: #92400e; }
.badge-alternance { background: #f3e8ff; color: #6b21a8; }
.badge-apprentissage { background: #dcfce7; color: #166534; }
.badge-stage { background: #ffedd5; color: #9a3412; }
.badge-intérim { background: #f1f5f9; color: #475569; }

.emp-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--g500);
}
.emp-card:active {
  cursor: grabbing;
}
.emp-card strong {
  font-size: 0.9rem;
  color: var(--gray-800);
}
.emp-card small {
  color: var(--gray-400);
  font-size: 0.75rem;
}

/* Delete button on shift blocks */
.btn-delete-shift {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  background: var(--red-500);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 20;
  border: 1px solid white;
}
.shift-block:hover .btn-delete-shift {
  opacity: 1;
}
.btn-delete-shift:hover {
  transform: scale(1.2);
  background: var(--red-600);
}

.timeline-row:hover {
  background: var(--gray-25);
}
.timeline-row.opening-row {
  background: var(--g50);
}

/* --- Onboarding Widget Styles --- */
.onboarding-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 340px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  box-shadow: var(--shadow-xl);
  z-index: 9999;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  overflow: hidden;
}
.onboarding-widget.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.onboarding-widget.minimized {
  transform: translateY(calc(100% - 60px));
}
.onb-header {
  padding: 1rem 1.25rem;
  background: var(--gray-25);
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.onb-title-area {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.onb-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--gray-900);
}
.onb-toggle-btn {
  background: none;
  border: none;
  color: var(--gray-500);
  cursor: pointer;
  padding: 0.2rem;
  transition: transform 0.3s;
}
.onboarding-widget.minimized .onb-toggle-btn {
  transform: rotate(180deg);
}
.onb-body {
  padding: 1.25rem;
  max-height: 400px;
  overflow-y: auto;
}
.onb-progress-container {
  margin-bottom: 1.25rem;
}
.onb-progress-text {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-600);
  margin-bottom: 0.4rem;
}
.onb-progress-bar {
  height: 6px;
  background: var(--gray-200);
  border-radius: 4px;
  overflow: hidden;
}
.onb-progress-fill {
  height: 100%;
  background: var(--g500);
  width: 0%;
  transition: width 0.5s ease-in-out;
}
.onb-step-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.onb-step {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--gray-100);
  background: var(--white);
  transition: var(--transition);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.onb-step:not(.completed):hover {
  border-color: var(--g300);
  background: var(--g50);
  transform: translateY(-1px);
}
.onb-step.completed {
  opacity: 0.6;
  background: var(--gray-50);
}
.onb-step-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--gray-300);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  flex-shrink: 0;
  transition: var(--transition);
}
.onb-step.completed .onb-step-icon {
  background: var(--g500);
  border-color: var(--g500);
  color: white;
}
.onb-step-content {
  flex: 1;
}
.onb-step-title {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--gray-900);
  margin-bottom: 0.2rem;
}
.onb-step-desc {
  font-size: 0.75rem;
  color: var(--gray-500);
  line-height: 1.4;
}
.onb-step.completed .onb-step-title {
  text-decoration: line-through;
  color: var(--gray-500);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODULE VENTES, DEVIS, FACTURATION & MODALE DE VENTE MOBILE (DA SUIVIX)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Visibilité Desktop / Mobile ── */
.desktop-text { display: inline !important; }
.mobile-text { display: none !important; }

/* ── Onglets & Configuration ── */
.v-tabs-container { margin: 0 0 1.25rem 0; }
.v-tabs {
  display: flex;
  gap: .375rem;
  background: var(--gray-100);
  padding: .3rem;
  border-radius: 10px;
  border: 1px solid var(--gray-200);
  width: fit-content;
}
.v-tab {
  background: transparent;
  border: none;
  border-radius: 7px;
  padding: .45rem 1.1rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--gray-500);
  cursor: pointer;
  transition: all .18s ease;
  white-space: nowrap;
}
.v-tab:hover {
  background: rgba(255,255,255,.7);
  color: var(--gray-900);
}
.v-tab.active {
  background: #fff;
  color: var(--g800);
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.btn-tabs-config {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--gray-600);
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: .42rem .8rem;
  cursor: pointer;
  transition: all .18s ease;
  white-space: nowrap;
}
.btn-tabs-config:hover {
  background: var(--gray-50);
  color: var(--g800);
  border-color: var(--gray-300);
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.tab-preset-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .75rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--gray-700);
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 20px;
  cursor: pointer;
  transition: all .18s ease;
}
.tab-preset-pill:hover {
  background: #fff;
  color: var(--g800);
  border-color: var(--g700, #10b981);
  box-shadow: 0 2px 5px rgba(0,0,0,.06);
  transform: translateY(-1px);
}
.tab-config-icon-box {
  width: 38px;
  height: 38px;
  min-width: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  flex-shrink: 0;
  transition: transform .15s ease;
}
.tab-config-row:hover .tab-config-icon-box {
  transform: scale(1.05);
}
.tab-config-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  border-radius: 12px;
  cursor: pointer;
  transition: all .15s ease;
}
.custom-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.custom-switch .custom-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #cbd5e1;
  transition: .25s ease;
  border-radius: 24px;
}
.custom-switch .custom-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .25s ease;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.custom-switch input:checked + .custom-slider {
  background-color: var(--g700, #10b981);
}
.custom-switch input:checked + .custom-slider:before {
  transform: translateX(20px);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Analytics & Stats Ventes ── */
.stat-banner {
  display: flex;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.stat-card {
  flex: 1;
  padding: 1rem 1.25rem;
  border-right: 1px solid var(--gray-100);
  position: relative;
}
.stat-card:last-child { border-right: none; }
.stat-card.primary { background: linear-gradient(135deg, var(--g900), var(--g700)); }
.stat-card-label {
  font-size: .68rem;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .2rem;
}
.stat-card.primary .stat-card-label { color: rgba(255,255,255,.6); }
.stat-card-value {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--gray-900);
}
.stat-card.primary .stat-card-value { color: #fff; }
.stat-card-delta {
  font-size: .7rem;
  color: var(--gray-400);
  margin-top: .1rem;
}
.stat-card.primary .stat-card-delta { color: rgba(255,255,255,.55); }

.charts-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}
.chart-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 1.25rem;
}
.chart-title {
  font-size: .75rem;
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 1rem;
}
.chart-wrap { position: relative; height: 220px; }
.top-products {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 1.25rem;
}
.product-rank {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--gray-50);
}
.product-rank:last-child { border-bottom: none; }
.rank-num {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--g100); color: var(--g700);
  font-size: .7rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.rank-bar-wrap { flex:1; height:6px; background:var(--gray-100); border-radius:3px; overflow:hidden; }
.rank-bar { height:100%; background:linear-gradient(90deg,var(--g600),var(--g400)); border-radius:3px; transition:width .6s ease; }

/* ── Badges & Types de documents ── */
.sale-row-mode {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; font-weight: 700;
  padding: .2rem .5rem; border-radius: 4px;
}
.sale-row-mode.boutique { background: #f0fdf4; color: #166534; }
.sale-row-mode.delivery { background: #eff6ff; color: #1e40af; }

.badge-quote   { background:#f3f4f6; color:#374151; }
.badge-order   { background:#ede9fe; color:#5b21b6; border: 1px solid #ddd6fe; }
.badge-delivery_note { background:#dbeafe; color:#1e40af; border: 1px solid #bfdbfe; }
.badge-invoice { background:#e0f2fe; color:#075985; }
.badge-credit_note { background:#fee2e2; color:#991b1b; }

/* ── Procédure de Relances (Droit Français) ── */
.remind-level-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.remind-level-card {
  border: 2px solid var(--gray-200);
  border-radius: 10px;
  padding: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #fff;
  text-align: left;
  user-select: none;
}
.remind-level-card:hover {
  border-color: var(--gray-400);
  transform: translateY(-1px);
}
.remind-level-card.level-1.active {
  border-color: #10B981;
  background: #F0FDF4;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
}
.remind-level-card.level-2.active {
  border-color: #F59E0B;
  background: #FFFBEB;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
}
.remind-level-card.level-3.active {
  border-color: #EF4444;
  background: #FEF2F2;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.15);
}
.remind-level-tag {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.35rem;
  display: inline-block;
}
.remind-level-card.level-1 .remind-level-tag { color: #059669; }
.remind-level-card.level-2 .remind-level-tag { color: #D97706; }
.remind-level-card.level-3 .remind-level-tag { color: #DC2626; }
.remind-level-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #1E293B;
  margin-bottom: 0.2rem;
}
.remind-level-desc {
  font-size: 0.72rem;
  color: #64748B;
  line-height: 1.35;
}
.remind-breakdown-box {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 1.25rem;
}
.remind-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  margin-top: 0.6rem;
}
.remind-stat-item {
  background: #fff;
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  border: 1px solid #E2E8F0;
}
.remind-stat-label {
  font-size: 0.68rem;
  color: #64748B;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.remind-stat-value {
  font-size: 0.92rem;
  font-weight: 800;
  color: #1E293B;
}
.remind-stat-item.total {
  background: #ECFDF5;
  border-color: #A7F3D0;
}
.remind-stat-item.total .remind-stat-value {
  color: #065F46;
  font-size: 1rem;
}
.remind-history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #E2E8F0;
  font-size: 0.78rem;
  margin-bottom: 0.4rem;
}
.remind-badge-pill {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  text-transform: uppercase;
}
.remind-badge-pill.level-1 { background: #D1FAE5; color: #065F46; }
.remind-badge-pill.level-2 { background: #FEF3C7; color: #92400E; }
.remind-badge-pill.level-3 { background: #FEE2E2; color: #991B1B; }

/* ── BARRE DE FILTRES & RECHERCHE (DESKTOP) ── */
.filters-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-100);
}
.filters-bar input, 
.filters-bar select {
  height: 34px;
  padding: 0 0.65rem;
  font-size: 0.8rem;
  border-radius: 7px;
}
.filters-bar label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.78rem;
  margin: 0;
}

/* ── Tri & Filtres ── */
.sortable-th {
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.sortable-th:hover {
  background: var(--g50);
  color: var(--g800);
}
.sort-icon {
  font-size: 0.72rem;
  margin-left: 0.3rem;
  color: var(--gray-400);
  display: inline-block;
  vertical-align: middle;
}
.sortable-th.active-sort {
  color: var(--g800);
  background: rgba(26,71,49,0.06);
}
.sortable-th.active-sort .sort-icon {
  color: var(--g700);
  font-weight: 800;
}

/* ── Autocomplétion & Sélecteurs dans Modales ── */
.autocomplete-container { position:relative; width:100%; }
.results-list {
  position:absolute; top:100%; left:0; right:0;
  background:#fff; border:1px solid var(--gray-200);
  border-radius:8px; box-shadow:0 10px 25px rgba(0,0,0,.1);
  z-index:1000; max-height:200px; overflow-y:auto;
  display:none; margin-top:4px;
}
.result-item {
  padding:.6rem 1rem; cursor:pointer;
  border-bottom:1px solid var(--gray-50);
  font-size:.83rem; display:flex; flex-direction:column;
}
.result-item:hover { background:var(--gray-50); }
.result-item .title  { font-weight:600; color:var(--gray-900); }
.result-item .subtitle { font-size:.72rem; color:var(--gray-400); }

.sel-tag {
  background:var(--g50); border:1px solid var(--g200);
  color:var(--g800); padding:.45rem .9rem; border-radius:6px;
  font-size:.85rem; font-weight:700; display:none;
  align-items:center; justify-content:space-between; margin-top:.4rem;
}
.product-selector-wrap {
  border:1px solid var(--gray-200); border-radius:8px;
  overflow:hidden; margin-top:.6rem; max-height:220px; overflow-y:auto;
}
.psel-table { width:100%; border-collapse:collapse; font-size:.8rem; }
.psel-table th {
  background:var(--gray-50); padding:.45rem .75rem;
  text-align:left; font-size:.7rem; font-weight:700;
  color:var(--gray-400); text-transform:uppercase; position:sticky; top:0;
}
.psel-table td { padding:.5rem .75rem; border-bottom:1px solid var(--gray-100); }
.psel-table tr:hover td { background:var(--g50); cursor:pointer; }
.psel-table tr.selected td { background:var(--g100); }

.total-strip {
  display:flex; justify-content:space-between; align-items:center;
  padding:1.2rem; background:var(--g900); color:#fff;
  border-radius:10px; margin-top:1rem;
}
.total-val { font-size:1.8rem; font-weight:800; color:var(--g400); }
.det-highlight {
  border-left:4px solid var(--g400); background:var(--g50);
  padding:1rem; border-radius:0 8px 8px 0;
}
.modal-sale-glow { box-shadow:0 0 40px rgba(82,168,126,.15); }
.cart-table { width:100%; font-size:.8rem; margin-top:.5rem; }
.cart-table th { text-align:left; color:var(--gray-400); font-size:.7rem; padding:.5rem; }
.cart-table td { padding:.5rem; border-top:1px solid var(--gray-100); }
.cart-empty { text-align:center; padding:2rem; color:var(--gray-300); font-style:italic; font-size:.8rem; }
.clickable-row { cursor: pointer; transition: background .15s; }
.clickable-row:hover td { background: var(--gray-50); }

/* ── MULTI-DÉPÔT EN VENTES (SUIVIX DA) ── */
.sale-default-wh-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #F0FDF4;
  border: 1.5px solid #A7F3D0;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
  transition: all 0.2s ease;
}
.sale-default-wh-wrap:hover {
  border-color: #6EE7B7;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.08);
}
.sale-default-wh-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.sale-default-wh-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--g800);
  color: #34D399;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sale-default-wh-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sale-default-wh-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--g900);
  white-space: nowrap;
}
.sale-default-wh-subtitle {
  font-size: 0.72rem;
  color: var(--g700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sale-default-wh-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.sale-default-wh-select {
  background: #ffffff;
  border: 1.5px solid #6EE7B7;
  color: var(--g900);
  font-weight: 700;
  font-size: 0.84rem;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  outline: none;
  min-height: 36px;
  transition: all 0.15s ease;
}
.sale-default-wh-select:focus {
  border-color: var(--g700);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}
.sale-default-wh-remember-lbl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--g800);
  cursor: pointer;
  user-select: none;
}
.sale-default-wh-remember-lbl input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--g700);
  cursor: pointer;
}

/* Ligne d'article : sélecteur de dépôt et indicateurs */
.cart-wh-select {
  width: 100%;
  padding: 5px 8px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  background: #ffffff;
  color: var(--gray-800);
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s;
}
.cart-wh-select:focus {
  border-color: var(--g700);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15);
}
.cart-wh-badge-service {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--gray-500);
  background: var(--gray-100);
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.cart-wh-stock-warn {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  color: #DC2626;
  margin-top: 2px;
}
.cart-wh-stock-ok {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--g700);
  margin-top: 2px;
}

.invoice-dropdown-wrap {
  position: relative;
  display: inline-block;
}
.invoice-dropdown-menu {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  width: 320px;
  background: #ffffff;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.05);
  z-index: 1000;
  overflow: hidden;
  padding: 6px;
  animation: dropdownPop 0.15s ease-out;
}
@keyframes dropdownPop {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.invoice-dropdown-item {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  color: var(--gray-900);
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}
.invoice-dropdown-item:hover { background: var(--gray-50); }
.invoice-dropdown-item.primary:hover { background: #f0fdf4; }
.invoice-dropdown-item .item-title {
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #0f172a;
}
.invoice-dropdown-item .item-desc {
  font-size: 0.72rem;
  color: #64748b;
  margin-top: 2px;
  line-height: 1.3;
}
.invoice-dropdown-item .item-badge {
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  margin-left: auto;
}
.invoice-dropdown-divider {
  height: 1px;
  background: var(--gray-100);
  margin: 4px 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADAPTATIONS MOBILES : VENTES, KPIS & MODALE NOUVELLE VENTE TACTILE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .invoice-dropdown-menu {
    right: auto;
    left: 0;
    width: 290px;
  }
  .remind-level-grid { grid-template-columns: 1fr; }
  .remind-breakdown-grid { grid-template-columns: repeat(2, 1fr); }
  .page-body > div[style*="background:rgba(16,185,129,0.06)"] {
    display: none !important;
  }
  .btn-tabs-config {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    color: var(--gray-700) !important;
    background: #ffffff !important;
    border: 1px solid var(--gray-300) !important;
    border-radius: 8px !important;
    padding: 0 0.65rem !important;
    min-height: 38px !important;
    height: 38px !important;
    touch-action: manipulation !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  /* 1. KPIs Ventes Compacts (2x2) */
  .kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 0.75rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  .kpi-card {
    background: #ffffff !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: 10px !important;
    padding: 0.65rem 0.8rem !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }
  .kpi-card:first-child .kpi-label {
    color: var(--gray-500) !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    margin-bottom: 0.2rem !important;
  }
  .kpi-card:first-child .kpi-value {
    color: var(--g800) !important;
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
  }
  .kpi-card:nth-child(4) {
    border-color: #fee2e2 !important;
  }
  .kpi-card:nth-child(4) .kpi-label {
    color: #991b1b !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    margin-bottom: 0.2rem !important;
  }
  .kpi-card:nth-child(4) .kpi-value {
    color: #ef4444 !important;
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
  }
  .kpi-grid > .kpi-card:nth-child(2),
  .kpi-grid > .kpi-card:nth-child(3),
  .kpi-grid > .kpi-card:nth-child(5),
  .kpi-card div[id$="-delta"], 
  .kpi-card div[id$="-desc"], 
  .kpi-card div[id$="-val"] {
    display: none !important;
  }

  /* 2. Recherche Ventes Mobile */
  .filters-bar {
    background: transparent !important;
    padding: 0 0 8px 0 !important;
    border: none !important;
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .filters-bar input#global-search {
    background: #ffffff !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: 8px !important;
    min-height: 40px !important;
    font-size: 16px !important;
    padding: 0 0.85rem 0 2.4rem !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02) !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="%2394a3b8" stroke-width="2.5"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: 10px center !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .filters-bar > div:has(#sort-select),
  .filters-bar label,
  .filters-bar #filter-user,
  .filters-bar #filter-month {
    display: none !important;
  }

  /* 3. Cartes de Transactions 2 Lignes Tactiles */
  .card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  .table-wrap {
    background: transparent !important;
    border: none !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }
  .table-wrap table,
  .table-wrap tbody {
    display: block !important;
    width: 100% !important;
  }
  .table-wrap thead {
    display: none !important;
  }
  .table-wrap tbody tr.clickable-row {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "client amount"
      "ref status" !important;
    gap: 3px 8px !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: 10px !important;
    padding: 9px 12px !important;
    margin-bottom: 7px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    width: 100% !important;
    transition: background 0.15s ease !important;
  }
  .table-wrap tbody tr.clickable-row:active {
    background: var(--gray-50) !important;
  }
  .table-wrap tbody tr.clickable-row td {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    white-space: normal !important;
    box-sizing: border-box !important;
  }
  .table-wrap tbody tr.clickable-row td:nth-child(3) {
    grid-area: client !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: var(--gray-900) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .table-wrap tbody tr.clickable-row td:nth-child(4) {
    grid-area: amount !important;
    font-size: 0.98rem !important;
    font-weight: 800 !important;
    color: var(--gray-900) !important;
    text-align: right !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
  }
  .table-wrap tbody tr.clickable-row td:nth-child(4)::before {
    content: none !important;
  }
  .table-wrap tbody tr.clickable-row td:nth-child(2) {
    grid-area: ref !important;
    font-size: 0.7rem !important;
    color: var(--gray-500) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .table-wrap tbody tr.clickable-row td:nth-child(2) div:has(code),
  .table-wrap tbody tr.clickable-row td:nth-child(2) div {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .table-wrap tbody tr.clickable-row td:nth-child(2) code {
    font-size: 0.72rem !important;
    white-space: nowrap !important;
    color: var(--gray-600) !important;
    background: transparent !important;
    padding: 0 !important;
    font-family: inherit !important;
    font-weight: 600 !important;
  }
  .table-wrap tbody tr.clickable-row td:nth-child(2) div:not(:first-child) {
    display: none !important;
  }
  .table-wrap tbody tr.clickable-row td:nth-child(7) {
    grid-area: status !important;
    text-align: right !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
  .table-wrap tbody tr.clickable-row td:nth-child(7) select,
  .table-wrap tbody tr.clickable-row select {
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    padding: 0 6px !important;
    border-radius: 4px !important;
    min-width: unset !important;
    width: auto !important;
    max-width: 90px !important;
    border: none !important;
    box-sizing: border-box !important;
    line-height: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    cursor: pointer !important;
  }
  .table-wrap tbody tr.clickable-row .badge {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
    height: 20px !important;
    box-sizing: border-box !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    line-height: 16px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }
  .table-wrap tbody tr.clickable-row td:first-child,
  .table-wrap tbody tr.clickable-row td:nth-child(5),
  .table-wrap tbody tr.clickable-row td:nth-child(6),
  .table-wrap tbody tr.clickable-row td:last-child {
    display: none !important;
  }

  /* 4. MODALE NOUVELLE VENTE MOBILE (#modal-sale) DESIGN TACTILE PREMIUM */
  #modal-sale.modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    background: rgba(4, 29, 20, 0.85) !important;
    z-index: 10000 !important;
  }
  #modal-sale .modal {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    margin: 0 !important;
    background: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
  }
  #modal-sale .modal-header {
    border-radius: 0 !important;
    padding-top: max(0.9rem, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 0.85rem !important;
    padding-left: max(1rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important;
    flex-shrink: 0 !important;
    min-height: calc(56px + env(safe-area-inset-top, 0px)) !important;
    background: linear-gradient(135deg, var(--g900, #044e32), var(--g700, #05603a)) !important;
    color: #ffffff !important;
    border-bottom: none !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10010 !important;
    box-sizing: border-box !important;
  }
  #modal-sale .modal-header .modal-title,
  #modal-sale .modal-header #sale-modal-title {
    color: #ffffff !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
  }
  #modal-sale .modal-header #sale-modal-subtitle {
    color: #A7F3D0 !important;
    font-size: 0.78rem !important;
    margin-top: 0.15rem !important;
  }
  #modal-sale .modal-header .btn-close-squircle {
    background: rgba(255,255,255,0.18) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }
  #modal-sale .modal-body {
    padding-top: 1rem !important;
    padding-bottom: calc(8.5rem + env(safe-area-inset-bottom, 0px)) !important;
    padding-left: max(0.85rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(0.85rem, env(safe-area-inset-right, 0px)) !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }
  
  /* Sections dans la modale de vente */
  #modal-sale .sale-modal-section {
    background: transparent !important;
    color: var(--gray-900) !important;
    padding: 0 !important;
    margin: 1.25rem 0 0.6rem 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
  }
  #modal-sale .sale-modal-section > div {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }
  #modal-sale .sale-modal-section button {
    width: 100% !important;
    min-height: 40px !important;
    background: var(--gray-50) !important;
    color: var(--gray-800) !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
    justify-content: center !important;
    touch-action: manipulation !important;
  }

  /* Cartes Articles de Facture dans la modale Mobile */
  #modal-sale .cart-table-wrapper {
    border: none !important;
    background: transparent !important;
    overflow: visible !important;
  }
  #modal-sale .cart-table {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    border: none !important;
  }
  #modal-sale .cart-table thead {
    display: none !important;
  }
  #modal-sale .cart-table tbody {
    display: block !important;
    width: 100% !important;
  }
  #modal-sale .cart-table tbody tr {
    display: grid !important;
    grid-template-columns: 75px 1fr 85px auto !important;
    grid-template-areas:
      "desc desc desc del"
      "qty price tva tva"
      "total total total total" !important;
    gap: 6px 6px !important;
    background: #ffffff !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: 12px !important;
    padding: 10px !important;
    margin-bottom: 8px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
  #modal-sale .cart-table tbody tr.has-wh {
    grid-template-areas:
      "desc desc desc del"
      "wh wh wh wh"
      "qty price tva tva"
      "total total total total" !important;
  }
  #modal-sale .cart-table tbody tr td {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    box-sizing: border-box !important;
  }
  #modal-sale .cart-table tbody tr td.col-desc { grid-area: desc !important; }
  #modal-sale .cart-table tbody tr td.col-desc input {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
  }
  #modal-sale .cart-table tbody tr td.col-del {
    grid-area: del !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }
  #modal-sale .cart-table tbody tr td.col-del button {
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    min-width: 44px !important;
    border-radius: 8px !important;
    touch-action: manipulation !important;
  }
  #modal-sale .cart-table tbody tr td.col-wh {
    grid-area: wh !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 4px 0 6px 0 !important;
  }
  #modal-sale .cart-table tbody tr td.col-wh select {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
  }
  #modal-sale .cart-table tbody tr td.col-qty { grid-area: qty !important; }
  #modal-sale .cart-table tbody tr td.col-qty input {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 16px !important;
    text-align: center !important;
    border-radius: 8px !important;
  }
  #modal-sale .cart-table tbody tr td.col-purchase { display: none !important; }
  #modal-sale .cart-table tbody tr td.col-price { grid-area: price !important; }
  #modal-sale .cart-table tbody tr td.col-price input {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
  }
  #modal-sale .cart-table tbody tr td.col-tva { grid-area: tva !important; }
  #modal-sale .cart-table tbody tr td.col-tva select {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
  }
  #modal-sale .cart-table tbody tr td.line-total-cell {
    grid-area: total !important;
    padding-top: 6px !important;
    border-top: 1px dashed var(--gray-200) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    color: var(--g800) !important;
  }

  /* Responsive banner défaut entrepôt sur mobile */
  .sale-default-wh-wrap {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  .sale-default-wh-right {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .sale-default-wh-select {
    min-height: 44px !important;
    font-size: 16px !important;
    width: 100% !important;
  }

  #modal-sale .form-row {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  #modal-sale .form-row .form-group {
    width: 100% !important;
  }
  #modal-sale .total-strip {
    flex-direction: column !important;
    gap: 0.6rem !important;
    text-align: center !important;
    padding: 1rem !important;
  }
  #modal-sale .total-val {
    font-size: 1.6rem !important;
  }

  /* Pied de page CTA fixé au bas de l'écran */
  #modal-sale .modal-footer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding-top: 0.75rem !important;
    padding-bottom: max(0.85rem, env(safe-area-inset-bottom, 0px)) !important;
    padding-left: max(1rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important;
    background: #ffffff !important;
    border-top: 1px solid var(--gray-200) !important;
    border-radius: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1.6fr !important;
    gap: 0.5rem !important;
    z-index: 10005 !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08) !important;
    box-sizing: border-box !important;
  }
  #modal-sale .modal-footer button,
  #modal-sale .modal-footer .btn {
    width: 100% !important;
    min-height: 46px !important;
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    border-radius: 10px !important;
    margin: 0 !important;
    justify-content: center !important;
    touch-action: manipulation !important;
  }

  /* 4.1 MODALE DÉTAILS VENTE MOBILE (#modal-sale-details) & WORKFLOW MODALS */
  #modal-sale-details.modal-overlay,
  #modal-create-order.modal-overlay,
  #modal-create-delivery-note.modal-overlay,
  #modal-payment-reminder.modal-overlay,
  #modal-edit-sale.modal-overlay,
  #modal-sign.modal-overlay,
  #modal-deposit.modal-overlay,
  #modal-cancel.modal-overlay,
  #modal-payment.modal-overlay,
  #modal-tabs-config.modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    background: rgba(4, 29, 20, 0.85) !important;
    z-index: 10000 !important;
  }
  #modal-sale-details .modal,
  #modal-create-order .modal,
  #modal-create-delivery-note .modal,
  #modal-payment-reminder .modal,
  #modal-edit-sale .modal,
  #modal-sign .modal,
  #modal-deposit .modal,
  #modal-cancel .modal,
  #modal-payment .modal,
  #modal-tabs-config .modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    margin: 0 !important;
    background: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
  }
  #modal-sale-details .modal-header,
  #modal-create-order .modal-header,
  #modal-create-delivery-note .modal-header,
  #modal-payment-reminder .modal-header,
  #modal-edit-sale .modal-header,
  #modal-sign .modal-header,
  #modal-deposit .modal-header,
  #modal-cancel .modal-header,
  #modal-payment .modal-header,
  #modal-tabs-config .modal-header {
    border-radius: 0 !important;
    padding-top: max(0.9rem, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 0.85rem !important;
    padding-left: max(1rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important;
    flex-shrink: 0 !important;
    min-height: calc(56px + env(safe-area-inset-top, 0px)) !important;
    background: linear-gradient(135deg, var(--g900, #044e32), var(--g700, #05603a)) !important;
    color: #ffffff !important;
    border-bottom: none !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10010 !important;
    box-sizing: border-box !important;
  }
  #modal-sale-details .modal-header .modal-title,
  #modal-sale-details .modal-header #det-title {
    color: #ffffff !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
  }
  #modal-sale-details .modal-header .btn-close-squircle,
  #modal-create-order .modal-header .btn-close-squircle,
  #modal-create-delivery-note .modal-header .btn-close-squircle,
  #modal-payment-reminder .modal-header .btn-close-squircle,
  #modal-edit-sale .modal-header .btn-close-squircle,
  #modal-sign .modal-header .btn-close-squircle,
  #modal-deposit .modal-header .btn-close-squircle,
  #modal-cancel .modal-header .btn-close-squircle,
  #modal-payment .modal-header .btn-close-squircle,
  #modal-tabs-config .modal-header .btn-close-squircle {
    background: rgba(255,255,255,0.18) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }
  #modal-sale-details .modal-body,
  #modal-create-order .modal-body,
  #modal-create-delivery-note .modal-body,
  #modal-payment-reminder .modal-body,
  #modal-edit-sale .modal-body,
  #modal-sign .modal-body,
  #modal-deposit .modal-body,
  #modal-cancel .modal-body,
  #modal-payment .modal-body {
    padding-top: 1rem !important;
    padding-bottom: calc(7.5rem + env(safe-area-inset-bottom, 0px)) !important;
    padding-left: max(0.85rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(0.85rem, env(safe-area-inset-right, 0px)) !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }

  /* 4.2 MODALE APERÇU PDF MOBILE (#modal-preview-pdf) */
  #modal-preview-pdf.modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
    background: rgba(4, 29, 20, 0.85) !important;
    z-index: 10000 !important;
  }
  #modal-preview-pdf .modal,
  #modal-preview-pdf .preview-pdf-modal-container {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    overflow: hidden !important;
    transform: none !important;
  }
  #modal-preview-pdf .modal-header,
  #modal-preview-pdf .preview-pdf-header {
    background: linear-gradient(135deg, var(--g900, #044e32), var(--g700, #05603a)) !important;
    color: #ffffff !important;
    padding-top: max(0.85rem, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 0.75rem !important;
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
    min-height: calc(52px + env(safe-area-inset-top, 0px)) !important;
    flex-shrink: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-radius: 0 !important;
    gap: 0.5rem !important;
    box-sizing: border-box !important;
  }
  #modal-preview-pdf .preview-pdf-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  #modal-preview-pdf #preview-pdf-title {
    color: #ffffff !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
  }
  #modal-preview-pdf #preview-pdf-badge {
    display: none !important;
  }
  #modal-preview-pdf .preview-pdf-header-right {
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    flex-shrink: 0 !important;
  }
  #modal-preview-pdf .btn-pdf-download,
  #modal-preview-pdf .btn-pdf-print {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 0.55rem !important;
    border-radius: 8px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #modal-preview-pdf .btn-pdf-download {
    background: rgba(255,255,255,0.18) !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    color: #ffffff !important;
  }
  #modal-preview-pdf .btn-close-squircle {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    background: rgba(255,255,255,0.18) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    border-radius: 8px !important;
  }
  #modal-preview-pdf .modal-body,
  #modal-preview-pdf .preview-pdf-body {
    padding: 0 !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    background: #333333 !important;
    box-sizing: border-box !important;
  }
  #modal-preview-pdf iframe,
  #modal-preview-pdf #preview-pdf-iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    display: block !important;
  }
  
  /* Grilles & Highlights dans les détails */
  #modal-sale-details .grid-2 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  #modal-sale-details .det-highlight {
    background: var(--gray-50, #f8fafc) !important;
    border: 1px solid var(--gray-200, #e2e8f0) !important;
    border-left: 4px solid var(--g600, #10b981) !important;
    border-radius: 10px !important;
    padding: 0.85rem 1rem !important;
  }

  /* Tableau d'articles dans les détails -> Cartes tactiles 2 lignes */
  #modal-sale-details .cart-table thead {
    display: none !important;
  }
  #modal-sale-details .cart-table tbody tr {
    display: flex !important;
    flex-direction: column !important;
    padding: 0.75rem 0.85rem !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    border: 1px solid var(--gray-200) !important;
    margin-bottom: 0.65rem !important;
    gap: 0.25rem !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
  }
  #modal-sale-details .cart-table tbody td {
    padding: 0 !important;
    border: none !important;
    text-align: left !important;
  }
  #modal-sale-details .cart-table .det-mobile-total {
    display: block !important;
  }
  #modal-sale-details .cart-table .det-desktop-total,
  #modal-sale-details .cart-table .det-col-qty,
  #modal-sale-details .cart-table .det-col-price {
    display: none !important;
  }
  #modal-sale-details .cart-table .det-col-total {
    text-align: left !important;
  }

  /* Pied de page actions des détails - Barre compacte unique */
  #modal-sale-details .modal-footer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding-top: 0.5rem !important;
    padding-bottom: max(0.6rem, env(safe-area-inset-bottom, 0px)) !important;
    padding-left: max(0.85rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(0.85rem, env(safe-area-inset-right, 0px)) !important;
    min-height: calc(52px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    background: #ffffff !important;
    border-top: 1px solid var(--gray-200) !important;
    border-radius: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.5rem !important;
    z-index: 10005 !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08) !important;
    box-sizing: border-box !important;
  }
  #modal-sale-details .det-footer-actions-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    gap: 0.5rem !important;
  }
  #modal-sale-details .det-more-wrap {
    display: block !important;
    flex-shrink: 0 !important;
  }
  #modal-sale-details #det-btn-more {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 0.85rem !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    background: var(--gray-50) !important;
    border: 1.5px solid var(--gray-300) !important;
    color: var(--gray-800) !important;
  }
  #modal-sale-details .det-secondary-group {
    display: none !important;
  }
  #modal-sale-details .det-secondary-group.open-mobile-drawer {
    display: flex !important;
    flex-direction: column !important;
    position: absolute !important;
    bottom: calc(100% + 8px) !important;
    left: 0.75rem !important;
    right: 0.75rem !important;
    max-width: 320px !important;
    background: #ffffff !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: 14px !important;
    padding: 0.6rem !important;
    gap: 0.45rem !important;
    box-shadow: 0 -12px 35px rgba(0,0,0,0.2) !important;
    z-index: 10020 !important;
  }
  #modal-sale-details .det-secondary-group.open-mobile-drawer .det-action-item {
    width: 100% !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 0.4rem 0.85rem !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    justify-content: flex-start !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }
  #modal-sale-details .det-primary-group {
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
  }
  #modal-sale-details .det-primary-group button,
  #modal-sale-details .det-primary-group .btn {
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 0.85rem !important;
    font-size: 0.84rem !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }
  #modal-sale-details .modal-body {
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Modales 2 boutons de workflow sur mobile */
  #modal-create-order .modal-footer,
  #modal-create-delivery-note .modal-footer,
  #modal-payment-reminder .modal-footer,
  #modal-edit-sale .modal-footer,
  #modal-sign .modal-footer,
  #modal-deposit .modal-footer,
  #modal-cancel .modal-footer,
  #modal-payment .modal-footer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding-top: 0.5rem !important;
    padding-bottom: max(0.6rem, env(safe-area-inset-bottom, 0px)) !important;
    padding-left: max(0.85rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(0.85rem, env(safe-area-inset-right, 0px)) !important;
    min-height: calc(52px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    background: #ffffff !important;
    border-top: 1px solid var(--gray-200) !important;
    border-radius: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1.5fr !important;
    gap: 0.5rem !important;
    z-index: 10005 !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08) !important;
    box-sizing: border-box !important;
  }
  #modal-create-order .modal-footer button,
  #modal-create-delivery-note .modal-footer button,
  #modal-payment-reminder .modal-footer button,
  #modal-edit-sale .modal-footer button,
  #modal-sign .modal-footer button,
  #modal-deposit .modal-footer button,
  #modal-cancel .modal-footer button,
  #modal-payment .modal-footer button {
    width: 100% !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 0.85rem !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    margin: 0 !important;
    justify-content: center !important;
    touch-action: manipulation !important;
  }

  /* Menu déroulant Facture ouvrant vers le HAUT sur mobile */
  #modal-sale-details .invoice-dropdown-menu {
    bottom: calc(100% + 6px) !important;
    top: auto !important;
    right: 0 !important;
    max-width: 90vw !important;
    width: 320px !important;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.2) !important;
  }

  /* 4.3 MODALE CONFIGURATION DES ONGLETS MOBILE (#modal-tabs-config) */
  #modal-tabs-config .modal-header .modal-title {
    color: #ffffff !important;
    font-size: 1.02rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
  }
  #modal-tabs-config .modal-header .modal-subtitle {
    font-size: 0.72rem !important;
    color: rgba(255,255,255,0.8) !important;
    display: block !important;
    line-height: 1.2 !important;
  }
  #modal-tabs-config .modal-body {
    padding-top: 1rem !important;
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important;
    padding-left: max(0.85rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(0.85rem, env(safe-area-inset-right, 0px)) !important;
    flex: 1 1 auto !important;
    max-height: none !important;
    height: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }
  #modal-tabs-config .tab-preset-pill {
    min-height: 38px !important;
    padding: 0.45rem 0.75rem !important;
    touch-action: manipulation !important;
    font-size: 0.75rem !important;
  }
  #modal-tabs-config .tab-config-row {
    min-height: 52px !important;
    padding: 0.75rem 0.85rem !important;
    touch-action: manipulation !important;
    user-select: none !important;
  }
  #modal-tabs-config .tab-config-row:active {
    background: var(--g100, #dcfce7) !important;
  }
  #modal-tabs-config .custom-switch {
    touch-action: manipulation !important;
  }
  #modal-tabs-config .modal-footer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding-top: 0.6rem !important;
    padding-bottom: max(0.65rem, env(safe-area-inset-bottom, 0px)) !important;
    padding-left: max(0.85rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(0.85rem, env(safe-area-inset-right, 0px)) !important;
    min-height: calc(54px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    background: #ffffff !important;
    border-top: 1px solid var(--gray-200) !important;
    border-radius: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.5rem !important;
    z-index: 10005 !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08) !important;
    box-sizing: border-box !important;
  }
  #modal-tabs-config .modal-footer button {
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 0.85rem !important;
    border-radius: 8px !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: manipulation !important;
    box-sizing: border-box !important;
  }
  #modal-tabs-config .modal-footer .btn-reset-tabs {
    flex-shrink: 0 !important;
  }

  /* 5. MODALE NOUVEAU PRODUIT / SERVICE & CLIENT MOBILE */
  #modal-product.modal-overlay,
  #modal-new-client.modal-overlay,
  #modal-iframe-product.modal-overlay,
  #modal-iframe-client.modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    background: rgba(4, 29, 20, 0.85) !important;
    z-index: 20000 !important;
  }
  #modal-product .modal,
  #modal-new-client .modal,
  #modal-iframe-product .modal,
  #modal-iframe-client .modal {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    margin: 0 !important;
    background: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
  }
  body:not(.is-embedded-modal) #modal-product .modal-header,
  body:not(.is-embedded-modal) #modal-new-client .modal-header,
  #modal-iframe-product .modal-header,
  #modal-iframe-client .modal-header {
    border-radius: 0 !important;
    padding-top: max(0.9rem, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 0.85rem !important;
    padding-left: max(1rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important;
    flex-shrink: 0 !important;
    min-height: calc(56px + env(safe-area-inset-top, 0px)) !important;
    background: linear-gradient(135deg, var(--g900, #044e32), var(--g700, #05603a)) !important;
    color: #ffffff !important;
    border-bottom: none !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 20010 !important;
    box-sizing: border-box !important;
  }
  #modal-product .modal-header .modal-title,
  #modal-new-client .modal-header .modal-title,
  #modal-iframe-product .modal-header .modal-title,
  #modal-iframe-client .modal-header .modal-title {
    color: #ffffff !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
  }
  #modal-product .modal-header .btn-close-squircle,
  #modal-new-client .modal-header .btn-close-squircle,
  #modal-iframe-product .modal-header .btn-close-squircle,
  #modal-iframe-client .modal-header .btn-close-squircle {
    background: rgba(255,255,255,0.18) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }
  #modal-iframe-product .modal-body,
  #modal-iframe-client .modal-body {
    padding: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    height: calc(100dvh - 56px - env(safe-area-inset-top, 0px)) !important;
  }
  #modal-iframe-product iframe,
  #modal-iframe-client iframe {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    border: none !important;
    display: block !important;
  }
  #modal-product .modal-body,
  #modal-new-client .modal-body {
    padding-top: 1rem !important;
    padding-bottom: calc(8.5rem + env(safe-area-inset-bottom, 0px)) !important;
    padding-left: max(0.85rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(0.85rem, env(safe-area-inset-right, 0px)) !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }
  #modal-product .modal-inner-padding,
  #modal-new-client .modal-inner-padding {
    padding: 0 !important;
  }
  #modal-product .prod-modal-section,
  #modal-new-client .client-modal-section {
    font-size: 0.9rem !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 8px !important;
    margin: 1.25rem 0 0.65rem 0 !important;
  }
  #modal-product .prod-grid-2,
  #modal-product .prod-grid-3,
  #modal-product #product-attributes,
  #modal-product #simple-fields-gen,
  #modal-product #simple-fields-fin,
  #modal-product #simple-fields-log,
  #modal-product .form-row,
  #modal-new-client .client-grid-2,
  #modal-new-client .client-grid-3,
  #modal-new-client .detail-grid,
  #modal-new-client .form-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    width: 100% !important;
  }
  #modal-product .form-group,
  #modal-new-client .form-group {
    width: 100% !important;
  }
  #modal-product .form-input,
  #modal-product select.form-input,
  #modal-new-client .form-input,
  #modal-new-client select.form-input {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }
  #modal-product .segmented-control,
  #modal-new-client .segmented-control {
    display: flex !important;
    width: 100% !important;
    gap: 2px !important;
  }
  #modal-product .segmented-control label,
  #modal-new-client .segmented-control label {
    flex: 1 1 0 !important;
    min-height: 42px !important;
    padding: 0.4rem 0.25rem !important;
    font-size: 0.82rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    touch-action: manipulation !important;
  }
  #modal-product .bom-group-container {
    padding-left: 0 !important;
    width: 100% !important;
  }
  #modal-product .bom-row-item,
  #modal-product .intangible-row-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.6rem !important;
    background: #ffffff !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: 12px !important;
    padding: 0.85rem !important;
    margin-bottom: 0.65rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
  }
  
  /* En-tête de carte mobile avec sélecteur / libellé occupant la largeur moins le bouton */
  #modal-product .bom-row-item .bom-col-main,
  #modal-product .intangible-row-item .intangible-col-main {
    width: 100% !important;
    padding-right: 46px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Bouton supprimer positionné en haut à droite de la carte */
  #modal-product .bom-row-item .bom-col-del,
  #modal-product .intangible-row-item .intangible-col-del {
    position: absolute !important;
    top: 0.85rem !important;
    right: 0.85rem !important;
    margin: 0 !important;
    width: 38px !important;
    height: 42px !important;
    display: flex !important;
    align-items: flex-end !important;
  }
  #modal-product .bom-row-item .btn-del-row,
  #modal-product .intangible-row-item .btn-del-row {
    width: 38px !important;
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 8px !important;
  }

  /* Sous-champs (Qté, % Perte, Option / Coût HT, Option) */
  #modal-product .bom-row-item .bom-col-qty,
  #modal-product .bom-row-item .bom-col-waste,
  #modal-product .bom-row-item .bom-col-opt,
  #modal-product .intangible-row-item .intangible-col-cost,
  #modal-product .intangible-row-item .intangible-col-opt {
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  #modal-product .bom-row-item .form-label,
  #modal-product .intangible-row-item .form-label {
    width: 100% !important;
    text-align: left !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: var(--gray-700) !important;
    margin-bottom: 0.25rem !important;
  }

  #modal-product .bom-row-item .form-input,
  #modal-product .intangible-row-item .form-input {
    width: 100% !important;
    min-height: 42px !important;
    height: 42px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }
  #modal-product .modal-footer,
  #modal-new-client .modal-footer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding-top: 0.75rem !important;
    padding-bottom: max(0.85rem, env(safe-area-inset-bottom, 0px)) !important;
    padding-left: max(1rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important;
    background: #ffffff !important;
    border-top: 1px solid var(--gray-200) !important;
    border-radius: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1.6fr !important;
    gap: 0.5rem !important;
    z-index: 20005 !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08) !important;
    box-sizing: border-box !important;
  }
  .is-embedded-modal .modal-footer,
  .is-embedded-modal #modal-product .modal-footer,
  .is-embedded-modal #modal-new-client .modal-footer {
    position: static !important;
    flex-shrink: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1.6fr !important;
    gap: 0.5rem !important;
    padding-top: 0.75rem !important;
    padding-bottom: max(0.85rem, env(safe-area-inset-bottom, 0px)) !important;
    padding-left: max(1rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important;
    background: #ffffff !important;
    border-top: 1px solid var(--gray-200) !important;
    z-index: 100 !important;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05) !important;
    box-sizing: border-box !important;
  }
  #modal-product .modal-footer button,
  #modal-product .modal-footer .btn,
  #modal-new-client .modal-footer button,
  #modal-new-client .modal-footer .btn,
  .is-embedded-modal .modal-footer button,
  .is-embedded-modal .modal-footer .btn {
    width: 100% !important;
    min-height: 46px !important;
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    border-radius: 10px !important;
    margin: 0 !important;
    justify-content: center !important;
    touch-action: manipulation !important;
  }

  /* ── 4.3 MODULE CATALOGUE MOBILE ÉPURÉ & ULTRA ESTHÉTIQUE ── */
  .btn-export-csv {
    display: none !important;
  }

  /* Topbar bouton Nouveau Produit (min 44px) */
  .topbar-right button.btn-primary {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0.4rem 0.85rem !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    touch-action: manipulation !important;
  }

  /* Onglets discrets et tactiles 44px */
  .cat-tabs {
    display: flex !important;
    width: 100% !important;
    gap: 4px !important;
    margin-bottom: 0.65rem !important;
    padding: 0.2rem !important;
    box-sizing: border-box !important;
  }
  .cat-tabs .tab-btn {
    flex: 1 1 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    justify-content: center !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    font-size: 0.84rem !important;
    padding: 0.35rem 0.5rem !important;
    touch-action: manipulation !important;
  }

  /* Grille KPIs condensée sur mobile (1 seule ligne discrète, 2 KPIs vitaux) */
  .cat-kpi-grid {
    display: flex !important;
    gap: 0.5rem !important;
    margin-bottom: 0.65rem !important;
    box-sizing: border-box !important;
  }
  .cat-kpi-grid .kpi-card {
    flex: 1 1 0 !important;
    padding: 0.45rem 0.75rem !important;
    border-radius: 10px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
  }
  .cat-kpi-grid .kpi-card .kpi-label {
    font-size: 0.68rem !important;
    margin-bottom: 0 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2px !important;
  }
  .cat-kpi-grid .kpi-card .kpi-value {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
  }
  .cat-kpi-grid .kpi-card:nth-child(2),
  .cat-kpi-grid .kpi-card:nth-child(3),
  .cat-kpi-grid .kpi-card:nth-child(5) {
    display: none !important;
  }

  /* Card Header Mobile : 1 seule ligne compacte (Recherche + Bouton Filtres) */
  .cat-main-card {
    border-radius: 14px !important;
    border: 1px solid var(--gray-200) !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .cat-card-header {
    display: block !important;
    padding: 0.65rem 0.85rem !important;
    border-bottom: none !important;
    box-sizing: border-box !important;
  }
  .cat-header-left {
    display: none !important;
  }
  .cat-header-right {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .cat-search-wrap {
    flex: 1 1 auto !important;
    width: auto !important;
    position: relative !important;
    box-sizing: border-box !important;
  }
  .cat-search-icon {
    position: absolute !important;
    left: 0.75rem !important;
    color: var(--gray-400) !important;
  }
  .cat-search-input {
    width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
    padding: 0.4rem 0.75rem 0.4rem 2.2rem !important;
    background: #ffffff !important;
    border: 1px solid var(--gray-300) !important;
    box-sizing: border-box !important;
  }
  .btn-mobile-filter-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 0.85rem !important;
    border-radius: 10px !important;
    border: 1px solid var(--gray-300) !important;
    background: #ffffff !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    color: var(--gray-800) !important;
    flex-shrink: 0 !important;
    touch-action: manipulation !important;
    box-sizing: border-box !important;
  }
  .btn-mobile-filter-toggle.active {
    background: var(--g50) !important;
    border-color: var(--g700) !important;
    color: var(--g800) !important;
  }

  /* Panneau de Filtres Mobile : Dépliable à la demande ! */
  .cat-filter-bar {
    display: none !important;
    flex-direction: column !important;
    padding: 0.85rem 1rem !important;
    gap: 0.65rem !important;
    background: var(--gray-50) !important;
    border-bottom: 1px solid var(--gray-200) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  .cat-filter-bar.is-open {
    display: flex !important;
  }
  .cat-mobile-tools-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .cat-mobile-tools-row .btn-cols-config {
    width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;
    justify-content: center !important;
    border-radius: 8px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    touch-action: manipulation !important;
    box-sizing: border-box !important;
  }
  .cat-filter-inputs-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .cat-select-brand,
  .cat-select-color,
  .cat-select-model,
  .cat-select-category {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
    padding: 0 0.5rem !important;
    border: 1px solid var(--gray-300) !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
  }
  .cat-select-sort {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
    padding: 0 0.5rem !important;
    border: 1px solid var(--gray-300) !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
  }
  .cat-filter-price-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    width: 100% !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
  }
  .cat-input-pmin,
  .cat-input-pmax {
    flex: 1 1 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
    padding: 0 0.5rem !important;
    border: 1px solid var(--gray-300) !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
  }
  .cat-filter-divider {
    display: none !important;
  }
  .cat-mobile-filter-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 0.35rem !important;
    border-top: 1px dashed var(--gray-200) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .cat-mobile-filter-footer .btn {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 1.25rem !important;
    touch-action: manipulation !important;
  }

  /* Transformation du Tableau Catalogue en Cartes Tactiles */
  .cat-table-wrap {
    background: transparent !important;
    border: none !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    padding: 0.65rem 0.75rem 0.5rem 0.75rem !important;
    box-sizing: border-box !important;
  }
  #cat-table,
  #cat-table tbody {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    border: none !important;
    box-sizing: border-box !important;
  }
  #cat-thead {
    display: none !important;
  }
  .cat-desktop-col {
    display: none !important;
  }
  .cat-mobile-card-cell {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-sizing: border-box !important;
  }
  .cat-product-row {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    margin-bottom: 0.65rem !important;
    border: 1px solid var(--gray-200) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    touch-action: manipulation !important;
    transition: background 0.15s ease !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
  }
  .cat-product-row:active {
    background: var(--gray-50) !important;
  }
  .cat-mobile-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.45rem !important;
    padding: 0.85rem 1rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .cat-card-line-1 {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }
  .cat-card-identity {
    flex: 1 !important;
    min-width: 0 !important;
  }
  .cat-card-badges {
    display: flex !important;
    gap: 0.35rem !important;
    margin-bottom: 0.25rem !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }
  .cat-cat-badge {
    font-size: 0.65rem !important;
    padding: 1px 6px !important;
  }
  .cat-card-name {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    color: var(--gray-900) !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .cat-card-desc {
    font-size: 0.72rem !important;
    color: var(--gray-500) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-top: 2px !important;
  }
  .cat-card-price-box {
    text-align: right !important;
    flex-shrink: 0 !important;
  }
  .cat-card-price {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: var(--gray-900) !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
  }
  .cat-card-price-sub {
    font-size: 0.7rem !important;
    color: var(--gray-400) !important;
    white-space: nowrap !important;
    margin-top: 1px !important;
  }
  .cat-card-line-2 {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }
  .cat-card-specs {
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    flex-wrap: wrap !important;
    font-size: 0.74rem !important;
    color: var(--gray-600) !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .cat-sku-code {
    background: var(--gray-100) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: var(--gray-700) !important;
  }
  .cat-brand-badge,
  .cat-color-badge {
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    padding: 1px 6px !important;
  }
  .cat-model-text {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: var(--gray-700) !important;
  }
  .cat-card-margin {
    flex-shrink: 0 !important;
  }
  .cat-card-line-3 {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-top: 1px dashed var(--gray-200) !important;
    padding-top: 0.5rem !important;
    margin-top: 0.15rem !important;
  }
  .cat-card-stock {
    font-size: 0.8rem !important;
  }
  .cat-card-actions {
    display: flex !important;
    gap: 0.4rem !important;
  }
  .btn-action-mobile {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 8px !important;
    background: var(--gray-100) !important;
    border: 1px solid var(--gray-200) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
  }
  .btn-action-mobile.btn-action-del {
    background: #fee2e2 !important;
    border-color: #fecaca !important;
    color: #b91c1c !important;
  }

  /* Onglet 2 Attributs Mobile */
  #tab-attributes .grid-3 {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }
  #tab-attributes .card {
    border-radius: 12px !important;
    border: 1px solid var(--gray-200) !important;
  }
  #tab-attributes .form-input {
    min-height: 44px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
  }
  #tab-attributes .btn {
    min-height: 44px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
  }
  #tab-attributes li {
    min-height: 42px !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.85rem !important;
    border-radius: 8px !important;
    background: var(--gray-50) !important;
    border: 1px solid var(--gray-200) !important;
  }

  /* Modale Personnalisation Colonnes & Bulk Stocks sur Mobile */
  #modal-columns-config .modal,
  #modal-bulk-ignore-stock .modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  #modal-columns-config .modal-header,
  #modal-bulk-ignore-stock .modal-header {
    padding-top: max(0.9rem, env(safe-area-inset-top, 0px)) !important;
    border-radius: 0 !important;
    flex-shrink: 0 !important;
  }
  #modal-columns-config .modal-body,
  #modal-bulk-ignore-stock .modal-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    padding: 1rem !important;
  }
  #modal-columns-config .modal-footer,
  #modal-bulk-ignore-stock .modal-footer {
    padding-bottom: max(0.85rem, env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 0 !important;
    flex-shrink: 0 !important;
  }

  /* Sous-modales tertiaires Catalogue sur Mobile */
  #modal-quick-attr .modal,
  #modal-quick-material .modal,
  #modal-supplier .modal {
    width: calc(100vw - 1.5rem) !important;
    max-width: 440px !important;
    margin: auto !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2) !important;
    overflow: hidden !important;
  }
  #modal-quick-attr .modal-header,
  #modal-quick-material .modal-header,
  #modal-supplier .modal-header {
    padding: 1rem 1.25rem !important;
    border-radius: 16px 16px 0 0 !important;
  }
  #modal-quick-attr .modal-body,
  #modal-quick-material .modal-body,
  #modal-supplier .modal-body {
    padding: 1.25rem !important;
  }
  #modal-quick-attr .modal-footer,
  #modal-quick-material .modal-footer,
  #modal-supplier .modal-footer {
    padding: 0.85rem 1.25rem !important;
  }
  #modal-quick-attr .modal-footer button,
  #modal-quick-material .modal-footer button,
  #modal-supplier .modal-footer button {
    min-height: 42px !important;
    touch-action: manipulation !important;
    font-size: 0.88rem !important;
  }

  /* ── Modale Détails Produit Mobile (#cat-detail-overlay) ── */
  #cat-detail-overlay.cat-detail-panel-overlay {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
    background: rgba(4, 29, 20, 0.85) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 20000 !important;
    display: none;
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: hidden !important;
  }
  #cat-detail-overlay.cat-detail-panel-overlay.open {
    display: flex !important;
  }
  #cat-detail-overlay .cat-detail-panel {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--gray-50, #f8fafc) !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }
  #cat-detail-overlay .cat-dp-header {
    padding-top: max(0.9rem, env(safe-area-inset-top, 0px)) !important;
    min-height: calc(58px + env(safe-area-inset-top, 0px)) !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-bottom: 0.85rem !important;
    background: linear-gradient(135deg, var(--g800), var(--g700)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
    border-radius: 0 !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }
  #cat-detail-overlay .cat-dp-header-identity {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    min-width: 0 !important;
    flex: 1 !important;
  }
  #cat-detail-overlay .cat-dp-header-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    color: #ffffff !important;
  }
  #cat-detail-overlay .cat-dp-header-icon svg {
    width: 20px !important;
    height: 20px !important;
  }
  #cat-detail-overlay .cat-dp-header-text {
    flex: 1 !important;
    min-width: 0 !important;
  }
  #cat-detail-overlay .cat-dp-title-row {
    display: flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    flex-wrap: nowrap !important;
  }
  #cat-detail-overlay .cat-dp-title {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 !important;
    min-width: 0 !important;
  }
  #cat-detail-overlay .cat-dp-badge {
    background: #10b981 !important;
    color: #ffffff !important;
    padding: 2px 7px !important;
    border-radius: 100px !important;
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.03em !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  #cat-detail-overlay .cat-dp-sub {
    font-size: 0.74rem !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin-top: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #cat-detail-overlay .cat-dp-close-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
  }

  /* Onglets Segmentés Mobile */
  #cat-detail-overlay .cat-dp-mobile-tabs {
    display: flex !important;
    background: #ffffff !important;
    border-bottom: 1px solid var(--gray-200) !important;
    padding: 0.4rem 0.75rem !important;
    gap: 0.5rem !important;
    flex-shrink: 0 !important;
  }
  #cat-detail-overlay .cat-dp-tab-btn {
    flex: 1 1 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 8px !important;
    border: 1px solid transparent !important;
    background: var(--gray-100) !important;
    color: var(--gray-600) !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
  }
  #cat-detail-overlay .cat-dp-tab-btn.active {
    background: var(--g800, #044e32) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 6px rgba(4, 78, 50, 0.25) !important;
  }
  #cat-detail-overlay .cat-dp-tab-count {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    padding: 1px 6px !important;
    border-radius: 10px !important;
  }
  #cat-detail-overlay .cat-dp-tab-btn:not(.active) .cat-dp-tab-count {
    background: var(--gray-200) !important;
    color: var(--gray-700) !important;
  }

  /* Corps de modale défilable */
  #cat-detail-overlay .cat-dp-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0.85rem 0.85rem calc(5.5rem + env(safe-area-inset-bottom, 0px)) 0.85rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.85rem !important;
    box-sizing: border-box !important;
  }
  #cat-detail-overlay .cat-dp-section.mobile-tab-hidden {
    display: none !important;
  }

  /* KPIs Mobile 2 colonnes */
  #cat-detail-overlay .dp-grid-kpi {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 0.55rem !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #cat-detail-overlay .cat-dp-kpi-card {
    background: #ffffff !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: 12px !important;
    padding: 0.65rem 0.7rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  #cat-detail-overlay .cat-dp-kpi-note {
    grid-column: span 2 !important;
    min-width: 0 !important;
  }
  #cat-detail-overlay .cat-dp-kpi-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }
  #cat-detail-overlay .cat-dp-kpi-icon svg {
    width: 18px !important;
    height: 18px !important;
  }
  #cat-detail-overlay .cat-dp-kpi-info {
    min-width: 0 !important;
    flex: 1 1 0% !important;
    overflow: hidden !important;
  }
  #cat-detail-overlay .cat-dp-kpi-label {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    color: var(--gray-500) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #cat-detail-overlay .cat-dp-kpi-val {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: var(--gray-900) !important;
    margin-top: 1px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Cartes de sections */
  #cat-detail-overlay .cat-dp-card {
    background: #ffffff !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: 12px !important;
    padding: 1rem !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
  }

  /* Grille Notes Avancées HPC Mobile : 3 colonnes compactes */
  #cat-detail-overlay .dp-grid-adv {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.5rem !important;
  }
  #cat-detail-overlay .dp-grid-adv > div {
    padding: 0.6rem 0.35rem !important;
    border-radius: 10px !important;
  }
  #cat-detail-overlay .dp-grid-adv > div div:nth-child(2) {
    font-size: 0.65rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #cat-detail-overlay .dp-grid-adv > div div:nth-child(3) {
    font-size: 1.05rem !important;
  }

  /* Alertes / Insights HPC Mobile */
  #cat-detail-overlay .cat-dp-insights-list {
    margin-top: 0.85rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.45rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #cat-detail-overlay .cat-dp-insight-badge {
    background: #fef2f2 !important;
    color: #991b1b !important;
    border: 1px solid #fecaca !important;
    padding: 0.45rem 0.75rem !important;
    border-radius: 8px !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
  #cat-detail-overlay .cat-dp-insight-badge svg {
    flex-shrink: 0 !important;
    color: #dc2626 !important;
  }
  #cat-detail-overlay .cat-dp-insight-badge.healthy {
    background: #d1fae5 !important;
    color: #065f46 !important;
    border: 1px solid #a7f3d0 !important;
  }
  #cat-detail-overlay .cat-dp-insight-badge.healthy svg {
    color: #059669 !important;
  }

  /* Graphique Mobile */
  #cat-detail-overlay .cat-dp-chart-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.65rem !important;
    margin-bottom: 0.85rem !important;
  }
  #cat-detail-overlay .cat-dp-chart-title-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }
  #cat-detail-overlay .cat-dp-chart-icon {
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
    background: rgba(82, 168, 126, 0.12) !important;
    color: var(--g800) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }
  #cat-detail-overlay .cat-dp-card-eyebrow {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: var(--gray-500) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
  }
  #cat-detail-overlay .cat-dp-card-title {
    font-size: 0.84rem !important;
    font-weight: 800 !important;
    color: var(--gray-900) !important;
  }
  #cat-detail-overlay .cat-dp-chart-legend {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-start !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
  }
  #cat-detail-overlay .cat-dp-legend-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    padding: 0.25rem 0.65rem !important;
    border-radius: 100px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
  }
  #cat-detail-overlay .chip-ca {
    background: rgba(16, 185, 129, 0.08) !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
    color: #065f46 !important;
  }
  #cat-detail-overlay .chip-score {
    background: rgba(245, 158, 11, 0.08) !important;
    border: 1px solid rgba(245, 158, 11, 0.25) !important;
    color: #92400e !important;
  }
  #cat-detail-overlay .legend-dot {
    width: 8px !important;
    height: 8px !important;
    display: inline-block !important;
  }
  #cat-detail-overlay .dot-ca {
    border-radius: 2px !important;
    background: #10b981 !important;
  }
  #cat-detail-overlay .dot-score {
    border-radius: 50% !important;
    background: #f59e0b !important;
  }
  #cat-detail-overlay .cat-dp-chart-wrapper {
    position: relative !important;
    height: 200px !important;
    width: 100% !important;
  }

  /* Tableau d'Historique des Ventes Mobile : Cartes tactiles 2 lignes */
  #cat-detail-overlay .cat-dp-sec-header {
    margin-bottom: 0.85rem !important;
  }
  #cat-detail-overlay .cat-dp-sec-title {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: var(--gray-600) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
  }
  #cat-detail-overlay .cat-dp-table-wrap {
    max-height: none !important;
    border: none !important;
    overflow: visible !important;
  }
  #cat-detail-overlay .cat-history-table,
  #cat-detail-overlay .cat-history-table tbody {
    display: block !important;
    width: 100% !important;
  }
  #cat-detail-overlay .cat-history-table thead {
    display: none !important;
  }
  #cat-detail-overlay .cat-dp-dt-col {
    display: none !important;
  }
  #cat-detail-overlay .cat-dp-cell-content {
    display: block !important;
  }
  #cat-detail-overlay .cat-dp-history-row {
    display: block !important;
    padding: 0.75rem 0.85rem !important;
    margin-bottom: 0.5rem !important;
    background: #ffffff !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    box-sizing: border-box !important;
  }
  #cat-detail-overlay .cat-dp-history-row:last-child {
    margin-bottom: 0 !important;
  }
  #cat-detail-overlay .cat-dp-history-row td {
    border: none !important;
    padding: 0 !important;
    font-size: 0.82rem !important;
  }
  #cat-detail-overlay .cat-dp-history-line-1 {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }
  #cat-detail-overlay .cat-dp-history-inv-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
  }
  #cat-detail-overlay .cat-dp-dot-sep {
    color: var(--gray-400) !important;
    font-size: 0.75rem !important;
    flex-shrink: 0 !important;
  }
  #cat-detail-overlay .cat-dp-history-date {
    font-weight: 600 !important;
    font-size: 0.78rem !important;
    color: var(--gray-600) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  #cat-detail-overlay .cat-dp-history-line-2 {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    font-size: 0.78rem !important;
    color: var(--gray-600) !important;
    margin-top: 0.35rem !important;
  }
  #cat-detail-overlay .cat-dp-history-client {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    color: var(--gray-700) !important;
    font-weight: 500 !important;
  }
  #cat-detail-overlay .cat-dp-history-qty {
    font-weight: 600 !important;
    color: var(--gray-700) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  #cat-detail-overlay .cat-dp-inv-code {
    background: var(--gray-100) !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: 6px !important;
    padding: 2px 6px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: var(--gray-800) !important;
    white-space: nowrap !important;
    display: inline-block !important;
    max-width: 160px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    vertical-align: middle !important;
  }
  #cat-detail-overlay .cat-dp-price-val {
    color: var(--g800, #044e32) !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  #cat-detail-overlay .cat-dp-history-empty td {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 2rem !important;
  }

  /* Pied de page tactile fixé */
  #cat-detail-overlay .cat-dp-mobile-footer {
    display: flex !important;
    gap: 0.65rem !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10020 !important;
    background: #ffffff !important;
    border-top: 1px solid var(--gray-200) !important;
    padding: 0.65rem 1rem !important;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px)) !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08) !important;
    box-sizing: border-box !important;
  }
  #cat-detail-overlay .cat-dp-mobile-footer .btn {
    flex: 1 1 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.4rem !important;
    touch-action: manipulation !important;
    box-sizing: border-box !important;
  }
  #cat-detail-overlay .cat-dp-btn-edit {
    background: var(--g700, #05603a) !important;
    color: #ffffff !important;
    border: none !important;
  }
  #cat-detail-overlay .cat-dp-btn-close {
    background: var(--gray-100) !important;
    color: var(--gray-700) !important;
    border: 1px solid var(--gray-200) !important;
  }

  /* Anti-zoom automatique Safari iOS (16px minimum) */
  #tab-products input,
  #tab-products select,
  #tab-attributes input,
  #tab-attributes select,
  #modal-quick-attr input,
  #modal-quick-material input,
  #modal-quick-material select,
  #modal-supplier input,
  #modal-supplier select,
  #modal-supplier textarea,
  .dep-filter-select,
  .dep-filter-input,
  .dep-search-input,
  #modal-expense input,
  #modal-expense select,
  #modal-expense textarea {
    font-size: 16px !important;
  }

  /* ── 4.4 MODULE DÉPENSES MOBILE (DA SUIVIX & GOOGLE MOBILE-FIRST) ── */

  /* KPIs Dépenses Mobile (Grille 2x2 compacte) */
  .dep-kpi-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
    margin-bottom: 0.75rem !important;
  }
  .dep-kpi-grid .kpi-card {
    padding: 0.65rem 0.85rem !important;
    border-radius: 12px !important;
    min-height: auto !important;
    box-sizing: border-box !important;
  }
  .dep-kpi-grid .kpi-label {
    font-size: 0.72rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .dep-kpi-grid .kpi-value {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    margin: 0.2rem 0 !important;
  }
  .dep-kpi-icon-wrap {
    display: none !important;
  }

  /* Masquer le graph analytique volumineux sur mobile (priorité concision & liste des dépenses) */
  .dep-analytics-grid {
    display: none !important;
  }

  /* Card Principale & En-tête Toolbar */
  .dep-main-card {
    border-radius: 14px !important;
    border: 1px solid var(--gray-200) !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .dep-card-header {
    padding: 0.75rem 0.85rem !important;
    border-bottom: 1px solid var(--gray-100) !important;
    box-sizing: border-box !important;
  }
  .dep-header-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.65rem !important;
    width: 100% !important;
  }
  .dep-tabs-row {
    display: flex !important;
    width: 100% !important;
    gap: 4px !important;
    background: var(--gray-100) !important;
    padding: 3px !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
  }
  .dep-tab-btn {
    flex: 1 1 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    padding: 0 0.5rem !important;
    border: none !important;
    touch-action: manipulation !important;
  }
  .dep-tab-btn.active {
    background: #ffffff !important;
    color: var(--g800) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  }
  .dep-filters-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  .dep-filter-supplier {
    grid-column: 1 / -1 !important;
  }
  .dep-search-wrap {
    grid-column: 1 / -1 !important;
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .dep-search-icon {
    position: absolute !important;
    left: 0.75rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--gray-400) !important;
    pointer-events: none !important;
  }
  .dep-search-input {
    width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
    padding: 0.4rem 0.75rem 0.4rem 2.2rem !important;
    background: #ffffff !important;
    border: 1px solid var(--gray-300) !important;
    box-sizing: border-box !important;
  }
  .dep-filter-select,
  .dep-filter-input {
    width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
    padding: 0 0.65rem !important;
    border: 1px solid var(--gray-300) !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
  }

  /* Transformation du Tableau Dépenses en Cartes Tactiles */
  .dep-table-wrap {
    background: transparent !important;
    border: none !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    padding: 0.65rem 0.75rem !important;
    box-sizing: border-box !important;
  }
  #dep-table,
  #dep-table tbody {
    display: block !important;
    width: 100% !important;
    border: none !important;
    box-sizing: border-box !important;
  }
  #dep-thead {
    display: none !important;
  }
  .dep-desktop-col {
    display: none !important;
  }
  .dep-mobile-card-cell {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-sizing: border-box !important;
  }
  .dep-expense-row {
    display: block !important;
    width: 100% !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    margin-bottom: 0.65rem !important;
    border: 1px solid var(--gray-200) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    touch-action: manipulation !important;
    transition: background 0.15s ease !important;
    box-sizing: border-box !important;
  }
  .dep-expense-row:active {
    background: var(--gray-50) !important;
  }
  .dep-mobile-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    padding: 0.85rem 1rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
  }
  .dep-card-line-1 {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }
  .dep-card-identity {
    flex: 1 !important;
    min-width: 0 !important;
  }
  .dep-card-badges {
    display: flex !important;
    gap: 0.35rem !important;
    margin-bottom: 0.25rem !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }
  .dep-supplier-pill {
    background: #f1f5f9 !important;
    color: #334155 !important;
    font-weight: 700 !important;
    font-size: 0.72rem !important;
    padding: 0.2rem 0.5rem !important;
    border-radius: 6px !important;
  }
  .dep-card-title {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    color: var(--gray-900) !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .dep-card-desc {
    font-size: 0.72rem !important;
    color: var(--gray-500) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-top: 2px !important;
  }
  .dep-card-price-box {
    text-align: right !important;
    flex-shrink: 0 !important;
    margin-left: 0.5rem !important;
  }
  .dep-card-price {
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: var(--gray-900) !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
  }
  .dep-card-price-sub {
    font-size: 0.7rem !important;
    color: var(--gray-400) !important;
    white-space: nowrap !important;
    margin-top: 1px !important;
  }
  .dep-card-line-2 {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }
  .dep-card-meta-left {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-size: 0.78rem !important;
    color: var(--gray-600) !important;
  }
  .dep-card-date {
    font-weight: 600 !important;
  }
  .dep-card-payment {
    background: var(--gray-100) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 0.72rem !important;
    color: var(--gray-700) !important;
  }
  .dep-card-status {
    flex-shrink: 0 !important;
  }
  .dep-card-line-3 {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-top: 1px dashed var(--gray-200) !important;
    padding-top: 0.5rem !important;
    margin-top: 0.15rem !important;
  }
  .dep-card-invoice .btn {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 0.85rem !important;
    display: inline-flex !important;
    align-items: center !important;
    border-radius: 8px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    touch-action: manipulation !important;
  }
  .dep-card-actions {
    display: flex !important;
    gap: 0.4rem !important;
  }

  /* Modale Saisir une Dépense Mobile Plein Écran */
  #modal-expense .modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
  }
  #modal-expense .modal-header {
    padding-top: max(0.9rem, env(safe-area-inset-top, 0px)) !important;
    border-radius: 0 !important;
    flex-shrink: 0 !important;
  }
  #modal-expense .modal-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    max-height: none !important;
    padding: 0 !important;
  }
  #modal-expense .modal-body > div {
    padding: 1.25rem 1rem !important;
  }
  #modal-expense .modal-footer {
    padding-bottom: max(0.85rem, env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 0 !important;
    flex-shrink: 0 !important;
  }
  #modal-expense .form-row {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  #modal-expense .form-group {
    width: 100% !important;
    margin-bottom: 0.5rem !important;
  }
  #modal-expense #invoice-dropzone {
    padding: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .dep-receipt-buttons-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.6rem !important;
    width: 100% !important;
  }
  .btn-camera-snap,
  .btn-file-browse {
    width: 100% !important;
    min-height: 46px !important;
    font-size: 0.92rem !important;
  }

  /* Modale Paywall / Abonnement Mobile 100% Responsive */
  #modal-paywall .modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }
  #modal-paywall .modal > div {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 1.5rem 1rem !important;
  }
  #modal-paywall button[onclick="handlePaywallClose()"] {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    top: max(0.75rem, env(safe-area-inset-top, 0px)) !important;
    right: 0.75rem !important;
    touch-action: manipulation !important;
  }
  #modal-paywall #btn-trial {
    min-height: 44px !important;
    height: 44px !important;
    touch-action: manipulation !important;
  }
  #modal-paywall #paywall-cycle-monthly,
  #modal-paywall #paywall-cycle-annual {
    min-height: 44px !important;
    touch-action: manipulation !important;
  }
  #modal-paywall .paywall-plan-btn,
  #modal-paywall a[href*="checkout"],
  #modal-paywall button {
    min-height: 44px !important;
    touch-action: manipulation !important;
  }
  #modal-paywall input {
    font-size: 16px !important;
    min-height: 42px !important;
  }
  #modal-paywall .modal > div:first-child {
    padding-top: max(1.75rem, calc(env(safe-area-inset-top, 0px) + 1rem)) !important;
  }
  #modal-paywall .modal > div:last-child {
    padding-bottom: max(1.75rem, calc(env(safe-area-inset-bottom, 0px) + 1rem)) !important;
  }

  /* ── 4.5 MODULE STOCKS MOBILE (DA SUIVIX & GOOGLE MOBILE-FIRST) ── */

  /* KPIs Stocks Mobile (Grille 2 colonnes compacte) */
  .stock-kpi-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
    margin-bottom: 0.75rem !important;
  }
  .stock-kpi-grid > .kpi-card,
  .stock-kpi-grid > .kpi-card:nth-child(2),
  .stock-kpi-grid > .kpi-card:nth-child(3) {
    display: flex !important;
    padding: 0.65rem 0.85rem !important;
    border-radius: 12px !important;
    min-height: auto !important;
    box-sizing: border-box !important;
  }
  .stock-kpi-grid > .kpi-card:nth-child(3) {
    grid-column: span 2 !important;
  }
  .stock-kpi-grid .kpi-label {
    font-size: 0.70rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: -0.2px !important;
  }
  .stock-kpi-grid .kpi-value {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    margin: 0.2rem 0 !important;
  }
  .stock-kpi-icon {
    display: none !important;
  }

  /* Donut Graphique Stock & Alertes */
  .stock-charts-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    margin-bottom: 0.75rem !important;
  }
  .stock-charts-grid .donut-card {
    display: none !important;
  }
  .stock-alerts-card {
    border-radius: 14px !important;
    border: 1px solid var(--gray-200) !important;
    max-height: 280px !important;
    background: #ffffff !important;
  }

  /* Card Principale & Filtres / Tabs */
  .stock-main-card {
    border-radius: 14px !important;
    border: 1px solid var(--gray-200) !important;
    overflow: hidden !important;
    background: #ffffff !important;
  }
  .stock-card-header {
    padding: 0.85rem !important;
    border-bottom: 1px solid var(--gray-100) !important;
  }
  .stock-filters-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.65rem !important;
    width: 100% !important;
    align-items: stretch !important;
  }
  .stock-tabs-scroll {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.4rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .stock-tabs-scroll .btn {
    width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 0.5rem !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    border-radius: 10px !important;
    touch-action: manipulation !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .stock-filters-row {
    margin-left: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }
  .stock-search-wrap {
    position: relative !important;
    width: 100% !important;
  }
  .stock-search-input {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 16px !important;
    padding: 0 1rem !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
  }
  .stock-selects-wrap {
    display: flex !important;
    gap: 0.5rem !important;
    width: 100% !important;
    align-items: center !important;
  }
  .stock-filter-select {
    flex: 1 !important;
    min-height: 44px !important;
    font-size: 16px !important;
    padding: 0 0.75rem !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
  }
  .stock-filter-btn {
    min-height: 44px !important;
    padding: 0 0.85rem !important;
    font-size: 0.82rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
    touch-action: manipulation !important;
  }

  /* Table transformation en Cartes Tactiles Mobiles */
  #prod-thead,
  #table-products thead,
  #view-movements table thead,
  #view-transfers table thead {
    display: none !important;
  }
  #table-products,
  #view-movements table,
  #view-transfers table {
    display: block !important;
    width: 100% !important;
    border: none !important;
  }
  #table-products tbody,
  #view-movements table tbody,
  #view-transfers table tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.65rem !important;
    width: 100% !important;
    padding: 0.5rem 0.75rem 1rem 0.75rem !important;
    box-sizing: border-box !important;
  }
  .stock-item-row {
    display: block !important;
    width: 100% !important;
    border: none !important;
    background: transparent !important;
  }
  .stock-desktop-col {
    display: none !important;
  }
  .stock-mobile-card-cell {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-sizing: border-box !important;
  }
  .stock-mobile-card {
    background: #ffffff !important;
    border-radius: 14px !important;
    border: 1px solid var(--gray-200) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    padding: 0.9rem 1rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.6rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    touch-action: manipulation !important;
    transition: background 0.15s ease !important;
    cursor: pointer !important;
  }
  .stock-mobile-card:active {
    background: var(--gray-50) !important;
  }
  .stock-card-line-1 {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    width: 100% !important;
  }
  .stock-card-identity {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 75px) !important;
    overflow: hidden !important;
  }
  .stock-card-badges {
    display: flex !important;
    gap: 0.35rem !important;
    margin-bottom: 0.25rem !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }
  .stock-card-title {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    color: var(--gray-900) !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
  .stock-card-meta {
    display: flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    margin-top: 0.25rem !important;
    flex-wrap: wrap !important;
  }
  .stock-sku-pill {
    background: #f1f5f9 !important;
    color: #334155 !important;
    font-weight: 700 !important;
    font-size: 0.72rem !important;
    padding: 0.15rem 0.5rem !important;
    border-radius: 6px !important;
  }
  .stock-supplier-label {
    font-size: 0.75rem !important;
    color: var(--gray-500) !important;
  }
  .stock-card-stock-box {
    text-align: right !important;
    flex: 0 0 70px !important;
    min-width: 70px !important;
    width: 70px !important;
  }
  .stock-card-stock-val {
    font-size: 1.35rem !important;
    font-weight: 900 !important;
    color: var(--g800) !important;
    line-height: 1.1 !important;
  }
  .stock-card-stock-val.stock-val-alert {
    color: #d97706 !important;
  }
  .stock-card-stock-unit {
    font-size: 0.72rem !important;
    color: var(--gray-400) !important;
    font-weight: 600 !important;
  }
  .stock-card-line-2 {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: var(--gray-50) !important;
    padding: 0.45rem 0.75rem !important;
    border-radius: 8px !important;
    font-size: 0.8rem !important;
  }
  .stock-card-cost-info {
    color: var(--gray-700) !important;
  }
  .stock-cost-label {
    color: var(--gray-500) !important;
    margin-right: 0.25rem !important;
  }
  .stock-cost-val {
    color: var(--gray-900) !important;
    font-weight: 700 !important;
  }
  .stock-alert-threshold {
    color: var(--gray-600) !important;
    font-size: 0.75rem !important;
  }
  .stock-card-line-3 {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    border-top: 1px solid var(--gray-100) !important;
    padding-top: 0.6rem !important;
    margin-top: 0.1rem !important;
  }
  .stock-card-actions {
    display: flex !important;
    gap: 0.5rem !important;
    align-items: center !important;
    width: 100% !important;
    justify-content: flex-end !important;
  }
  .stock-action-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    padding: 0 0.75rem !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    border: 1px solid var(--gray-200) !important;
    background: #ffffff !important;
  }
  .stock-action-transfer {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #1d4ed8 !important;
    flex: 1 !important;
  }
  .stock-action-adj {
    background: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
    color: var(--g800) !important;
    flex: 1 !important;
  }
  .stock-action-edit {
    color: #d97706 !important;
    width: 44px !important;
    padding: 0 !important;
  }
  .stock-action-del {
    color: #dc2626 !important;
    border-color: #fecaca !important;
    width: 44px !important;
    padding: 0 !important;
  }

  /* ── Mobile Inline Stock Transfer (1-2 Clics) ── */
  .stock-mobile-subcard {
    border-left: 3px solid var(--g700) !important;
    background: #fbfdfc !important;
  }
  .stock-mobile-wh-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 2px 7px !important;
    border-radius: 6px !important;
    background: var(--gray-100) !important;
    color: var(--gray-800) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    border: 1px solid var(--gray-200) !important;
    white-space: nowrap !important;
  }
  .stock-mobile-wh-tag svg {
    color: var(--g700) !important;
    flex-shrink: 0 !important;
  }
  .stock-card-multi-tot {
    font-size: 0.75rem !important;
    color: var(--gray-600) !important;
  }
  .stock-mobile-quick-transfer {
    background: var(--gray-50) !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: 10px !important;
    padding: 0.65rem 0.75rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
  .stock-mqt-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .stock-mqt-label {
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    color: var(--gray-700) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
  }
  .stock-mqt-label svg {
    color: var(--g700) !important;
    flex-shrink: 0 !important;
  }
  .stock-mqt-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }
  .stock-mqt-target-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.2rem !important;
    width: 100% !important;
  }
  .stock-mqt-sublabel {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: var(--gray-500) !important;
    text-transform: uppercase !important;
  }
  .stock-mqt-select {
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    font-size: 16px !important; /* Anti-zoom Safari iOS */
    border-radius: 8px !important;
    border: 1px solid var(--gray-300) !important;
    background: #ffffff !important;
    color: var(--gray-900) !important;
    padding: 0 0.65rem !important;
    touch-action: manipulation !important;
    font-weight: 600 !important;
    box-sizing: border-box !important;
  }
  .stock-mqt-actions-row {
    display: flex !important;
    gap: 0.5rem !important;
    align-items: flex-end !important;
    width: 100% !important;
  }
  .stock-mqt-qty-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.2rem !important;
    width: 105px !important;
    flex: 0 0 105px !important;
  }
  .stock-mqt-qty-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  .stock-mqt-max-btn {
    border: none !important;
    background: var(--gray-200) !important;
    color: var(--gray-700) !important;
    border-radius: 4px !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    padding: 1px 5px !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    height: 20px !important;
  }
  .stock-mqt-max-btn:active {
    background: var(--gray-300) !important;
  }
  .stock-mqt-input {
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    font-size: 16px !important; /* Anti-zoom Safari iOS */
    border-radius: 8px !important;
    border: 1px solid var(--gray-300) !important;
    background: #ffffff !important;
    color: var(--gray-900) !important;
    text-align: center !important;
    padding: 0 0.25rem !important;
    touch-action: manipulation !important;
    font-weight: 700 !important;
    box-sizing: border-box !important;
  }
  .stock-mqt-btn-col {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .stock-mqt-submit-btn {
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 8px !important;
    background: var(--g800) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 0.85rem !important;
    padding: 0 0.75rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    border: none !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }
  .stock-mqt-submit-btn:active {
    background: var(--g900) !important;
    transform: scale(0.98) !important;
  }
  .stock-mqt-submit-btn:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
  }

  .stock-transfer-detail-btn {
    width: 100% !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.4rem !important;
    border-radius: 10px !important;
    border: 1px solid var(--gray-200) !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
  }

  /* Vue Dépôts & Chantiers Mobile */
  .wh-hub-view {
    padding: 0.75rem !important;
  }
  .wh-hub-summary-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
    padding: 1.1rem !important;
    border-radius: 14px !important;
    margin-bottom: 1.25rem !important;
  }
  .wh-donut-col {
    border-right: none !important;
    border-bottom: 1px solid var(--gray-200) !important;
    padding-right: 0 !important;
    padding-bottom: 1.25rem !important;
  }
  #wh-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Modales Stocks Mobile Plein Écran */
  #modal-material .modal,
  #modal-stock .modal,
  #modal-supplier .modal,
  #modal-attribute .modal,
  #modal-transfer .modal,
  #modal-warehouse-create .modal,
  #modal-transfer-detail .modal,
  #modal-bulk-ignore-stock .modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
  }
  #modal-material .modal-header,
  #modal-stock .modal-header,
  #modal-supplier .modal-header,
  #modal-attribute .modal-header,
  #modal-transfer .modal-header,
  #modal-warehouse-create .modal-header,
  #modal-transfer-detail .modal-header,
  #modal-bulk-ignore-stock .modal-header {
    padding-top: max(0.9rem, env(safe-area-inset-top, 0px)) !important;
    border-radius: 0 !important;
    flex-shrink: 0 !important;
  }
  #modal-material .modal-body,
  #modal-stock .modal-body,
  #modal-supplier .modal-body,
  #modal-attribute .modal-body,
  #modal-transfer .modal-body,
  #modal-warehouse-create .modal-body,
  #modal-transfer-detail .modal-body,
  #modal-bulk-ignore-stock .modal-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    max-height: none !important;
    padding: 0 !important;
  }
  #modal-material .modal-body > div,
  #modal-stock .modal-body > div,
  #modal-supplier .modal-body > div,
  #modal-attribute .modal-body > div,
  #modal-transfer .modal-body > div,
  #modal-warehouse-create .modal-body > div,
  #modal-transfer-detail .modal-body > div,
  #modal-bulk-ignore-stock .modal-body > div {
    padding: 1.25rem 1rem !important;
  }
  #modal-material .modal-footer,
  #modal-stock .modal-footer,
  #modal-supplier .modal-footer,
  #modal-attribute .modal-footer,
  #modal-transfer .modal-footer,
  #modal-warehouse-create .modal-footer,
  #modal-transfer-detail .modal-footer,
  #modal-bulk-ignore-stock .modal-footer {
    padding-bottom: max(0.85rem, env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 0 !important;
    flex-shrink: 0 !important;
  }
  #modal-material .form-row,
  #modal-stock .form-row,
  #modal-supplier .form-row,
  #modal-attribute .form-row,
  #modal-transfer .form-row,
  #modal-warehouse-create .form-row,
  #modal-transfer-detail .form-row,
  #modal-bulk-ignore-stock .form-row {
    flex-direction: column !important;
    display: flex !important;
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  #modal-material .form-group,
  #modal-stock .form-group,
  #modal-supplier .form-group,
  #modal-attribute .form-group,
  #modal-transfer .form-group,
  #modal-warehouse-create .form-group,
  #modal-transfer-detail .form-group,
  #modal-bulk-ignore-stock .form-group {
    width: 100% !important;
    margin-bottom: 0.5rem !important;
  }
  #modal-material input, #modal-material select, #modal-material textarea,
  #modal-stock input, #modal-stock select, #modal-stock textarea,
  #modal-supplier input, #modal-supplier select, #modal-supplier textarea,
  #modal-attribute input, #modal-attribute select, #modal-attribute textarea,
  #modal-transfer input, #modal-transfer select, #modal-transfer textarea,
  #modal-warehouse-create input, #modal-warehouse-create select, #modal-warehouse-create textarea,
  #modal-transfer-detail input, #modal-transfer-detail select, #modal-transfer-detail textarea,
  #modal-bulk-ignore-stock input, #modal-bulk-ignore-stock select, #modal-bulk-ignore-stock textarea {
    font-size: 16px !important;
    min-height: 44px !important;
    height: 44px !important;
    box-sizing: border-box !important;
  }
  #modal-material .btn,
  #modal-stock .btn,
  #modal-supplier .btn,
  #modal-attribute .btn,
  #modal-transfer .btn,
  #modal-warehouse-create .btn,
  #modal-transfer-detail .btn,
  #modal-bulk-ignore-stock .btn {
    min-height: 44px !important;
    touch-action: manipulation !important;
  }
  #modal-material .btn-close-squircle,
  #modal-stock .btn-close-squircle,
  #modal-supplier .btn-close-squircle,
  #modal-attribute .btn-close-squircle,
  #modal-transfer .btn-close-squircle,
  #modal-warehouse-create .btn-close-squircle,
  #modal-transfer-detail .btn-close-squircle,
  #modal-bulk-ignore-stock .btn-close-squircle {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #modal-material input[type="checkbox"] {
    min-width: 22px !important;
    min-height: 22px !important;
    width: 22px !important;
    height: 22px !important;
  }
  #modal-material label:has(input[type="checkbox"]) {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  #modal-material .modal-footer,
  #modal-stock .modal-footer,
  #modal-supplier .modal-footer,
  #modal-attribute .modal-footer,
  #modal-transfer .modal-footer,
  #modal-warehouse-create .modal-footer,
  #modal-transfer-detail .modal-footer,
  #modal-bulk-ignore-stock .modal-footer {
    display: flex !important;
    gap: 0.75rem !important;
    padding: 1rem !important;
  }
  #modal-material .modal-footer button,
  #modal-stock .modal-footer button,
  #modal-supplier .modal-footer button,
  #modal-attribute .modal-footer button,
  #modal-transfer .modal-footer button,
  #modal-warehouse-create .modal-footer button,
  #modal-transfer-detail .modal-footer button,
  #modal-bulk-ignore-stock .modal-footer button {
    min-height: 48px !important;
    height: 48px !important;
    flex: 1 !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    touch-action: manipulation !important;
  }

  /* ── 4.6 MODALE DÉTAILS CLIENT MOBILE (#modal-client-details) ── */
  #modal-client-details.modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    background: rgba(4, 29, 20, 0.85) !important;
    z-index: 20000 !important;
    overflow: hidden !important;
  }
  #modal-client-details .modal,
  #modal-client-details .client-details-modal {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    margin: 0 !important;
    background: #f8fafc !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
  }
  #modal-client-details .client-details-header {
    border-radius: 0 !important;
    padding-top: max(0.85rem, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 0.75rem !important;
    padding-left: max(0.85rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(0.85rem, env(safe-area-inset-right, 0px)) !important;
    flex-shrink: 0 !important;
    min-height: calc(54px + env(safe-area-inset-top, 0px)) !important;
    background: linear-gradient(135deg, var(--g900, #044e32), var(--g700, #05603a)) !important;
    color: #ffffff !important;
    border-bottom: none !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10010 !important;
    box-sizing: border-box !important;
  }
  #modal-client-details .client-details-identity {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    min-width: 0 !important;
    flex: 1 !important;
  }
  #modal-client-details .client-details-avatar {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 800 !important;
    font-size: 1.05rem !important;
    flex-shrink: 0 !important;
  }
  #modal-client-details .client-details-title-wrap {
    min-width: 0 !important;
    flex: 1 !important;
    overflow: hidden !important;
  }
  #modal-client-details .client-details-name-row {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
  }
  #modal-client-details .client-details-name {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    margin: 0 !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 170px !important;
  }
  #modal-client-details .client-status-badge {
    padding: 2px 7px !important;
    border-radius: 10px !important;
    font-weight: 800 !important;
    font-size: 0.65rem !important;
    white-space: nowrap !important;
  }
  #modal-client-details .client-status-active {
    background: #10B981 !important;
    color: #ffffff !important;
  }
  #modal-client-details .client-status-archived {
    background: #EF4444 !important;
    color: #ffffff !important;
  }
  #modal-client-details .client-details-sub {
    font-size: 0.72rem !important;
    color: rgba(255, 255, 255, 0.75) !important;
    margin-top: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #modal-client-details .client-details-header-actions {
    display: none !important;
  }
  #modal-client-details .client-details-close-btn {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 1.2rem !important;
    touch-action: manipulation !important;
    flex-shrink: 0 !important;
  }

  /* Onglets Segmentés Tactiles Mobile */
  #modal-client-details .client-details-mobile-tabs {
    display: flex !important;
    gap: 4px !important;
    background: #ffffff !important;
    padding: 6px 10px !important;
    border-bottom: 1px solid var(--gray-200) !important;
    flex-shrink: 0 !important;
  }
  #modal-client-details .client-det-tab-btn {
    flex: 1 !important;
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 8px !important;
    border: 1px solid transparent !important;
    background: var(--gray-100) !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    color: var(--gray-600) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    transition: all 0.15s ease !important;
  }
  #modal-client-details .client-det-tab-btn.active {
    background: var(--g800, #044e32) !important;
    color: #ffffff !important;
    border-color: var(--g800) !important;
    box-shadow: 0 2px 6px rgba(4, 78, 50, 0.25) !important;
  }
  #modal-client-details .client-tab-count {
    background: rgba(255,255,255,0.25) !important;
    color: #ffffff !important;
    font-size: 0.65rem !important;
    padding: 1px 6px !important;
    border-radius: 10px !important;
    font-weight: 800 !important;
  }
  #modal-client-details .client-det-tab-btn:not(.active) .client-tab-count {
    background: var(--gray-300) !important;
    color: var(--gray-700) !important;
  }

  /* Corps de la Modale Mobile */
  #modal-client-details .client-details-body {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0.85rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.85rem !important;
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* 4 KPIs Mobile (Grille 2 colonnes compacte) */
  #modal-client-details .client-details-kpis {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.6rem !important;
  }
  #modal-client-details .client-det-kpi-card {
    background: #ffffff !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: 12px !important;
    padding: 0.75rem 0.85rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }
  #modal-client-details .client-det-kpi-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }
  #modal-client-details .kpi-icon-blue {
    background: #eff6ff !important;
    color: #3b82f6 !important;
  }
  #modal-client-details .kpi-icon-green {
    background: #ecfdf5 !important;
    color: #10b981 !important;
  }
  #modal-client-details .kpi-icon-purple {
    background: #f5f3ff !important;
    color: #8b5cf6 !important;
  }
  #modal-client-details .kpi-icon-red {
    background: #fef2f2 !important;
    color: #ef4444 !important;
  }
  #modal-client-details .client-det-kpi-content {
    min-width: 0 !important;
    flex: 1 !important;
  }
  #modal-client-details .client-det-kpi-label {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: var(--gray-500) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #modal-client-details .client-det-kpi-value {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: var(--gray-900) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #modal-client-details .kpi-label-danger {
    color: #ef4444 !important;
  }
  #modal-client-details .kpi-val-danger {
    color: #ef4444 !important;
  }
  #modal-client-details .client-det-kpi-sub-danger {
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    color: #b91c1c !important;
    margin-top: 2px !important;
  }

  /* Dispositions Sections & Cartes Mobile */
  #modal-client-details .client-details-main-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.85rem !important;
    width: 100% !important;
  }
  #modal-client-details .client-details-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.85rem !important;
    width: 100% !important;
  }
  #modal-client-details .client-details-col.mobile-tab-hidden {
    display: none !important;
  }
  #modal-client-details .client-det-card {
    background: #ffffff !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: 14px !important;
    padding: 1rem !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
  #modal-client-details .client-sec-header {
    background: var(--g700, #05603a) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    margin-bottom: 1rem !important;
    padding: 0.65rem 0.85rem !important;
    border-radius: 8px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
  }
  #modal-client-details .client-sec-title {
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
  }
  #modal-client-details .client-type-badge {
    font-size: 0.70rem !important;
    padding: 2px 7px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
  }
  #modal-client-details .badge-b2b {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
  }
  #modal-client-details .badge-b2c {
    background: #fef3c7 !important;
    color: #92400e !important;
  }

  /* Formulaires et Champs Mobile (Anti-zoom iOS 16px) */
  #modal-client-details .client-fields-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.85rem !important;
  }
  #modal-client-details .field-span-2 {
    grid-column: span 2 !important;
  }
  #modal-client-details .client-field-label {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: var(--gray-500) !important;
    margin-bottom: 3px !important;
  }
  #modal-client-details .client-val-strong {
    font-weight: 800 !important;
    font-size: 1rem !important;
    color: var(--gray-900) !important;
    word-break: break-word !important;
  }
  #modal-client-details .client-val-mono {
    font-weight: 700 !important;
    font-family: 'JetBrains Mono', monospace !important;
    color: var(--gray-900) !important;
    font-size: 0.88rem !important;
    word-break: break-all !important;
  }
  #modal-client-details .client-val-medium {
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    color: var(--gray-800) !important;
    word-break: break-word !important;
  }
  #modal-client-details .client-val-muted {
    color: var(--gray-400) !important;
  }
  #modal-client-details .client-link-green {
    color: var(--g700, #05603a) !important;
    text-decoration: underline !important;
    word-break: break-all !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
    touch-action: manipulation !important;
  }
  #modal-client-details .client-link-tel {
    color: var(--gray-900) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
    touch-action: manipulation !important;
  }
  #modal-client-details .form-input,
  #modal-client-details select.form-input,
  #modal-client-details textarea.form-input {
    font-size: 16px !important;
    min-height: 44px !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #modal-client-details [style*="display: none"],
  #modal-client-details [style*="display:none"],
  #modal-client-details [x-cloak] {
    display: none !important;
  }
  #modal-client-details .client-input-mono {
    font-family: 'JetBrains Mono', monospace !important;
  }
  #modal-client-details .client-contact-inputs {
    display: flex;
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  #modal-client-details .client-address-edit-group {
    display: flex;
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  #modal-client-details .client-address-row {
    display: flex;
    gap: 0.5rem !important;
  }
  #modal-client-details .client-input-cp {
    width: 80px !important;
    flex: 0 0 80px !important;
  }
  #modal-client-details .client-input-city {
    flex: 1 !important;
  }
  #modal-client-details .client-input-country {
    width: 90px !important;
    flex: 0 0 90px !important;
  }

  /* Carnet d'adresses Mobile */
  #modal-client-details .client-addresses-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  #modal-client-details .client-addr-item {
    padding: 0.75rem !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: 10px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    background: #ffffff !important;
  }
  #modal-client-details .client-addr-info {
    min-width: 0 !important;
    flex: 1 !important;
  }
  #modal-client-details .client-addr-header {
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    margin-bottom: 0.25rem !important;
    flex-wrap: wrap !important;
  }
  #modal-client-details .client-addr-label {
    font-weight: 700 !important;
    font-size: 0.88rem !important;
  }
  #modal-client-details .client-addr-type {
    font-size: 0.65rem !important;
    padding: 2px 6px !important;
    border-radius: 10px !important;
    background: var(--gray-100) !important;
    color: var(--gray-600) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
  }
  #modal-client-details .client-addr-text {
    font-size: 0.82rem !important;
    color: var(--gray-700) !important;
    word-break: break-word !important;
  }
  #modal-client-details .btn-add-addr {
    background: #ffffff !important;
    color: var(--g700, #05603a) !important;
    border: none !important;
    padding: 4px 8px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    min-height: 44px !important;
    touch-action: manipulation !important;
  }
  #modal-client-details .btn-del-addr {
    color: #ef4444 !important;
    padding: 8px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: manipulation !important;
  }
  #modal-client-details .client-add-addr-form {
    padding: 0.85rem !important;
    border: 1px dashed #10b981 !important;
    border-radius: 10px !important;
    background: #ecfdf5 !important;
    margin-top: 0.5rem !important;
  }
  #modal-client-details .client-add-addr-title {
    font-weight: 700 !important;
    color: #065f46 !important;
    margin-bottom: 0.75rem !important;
    font-size: 0.9rem !important;
  }
  #modal-client-details .client-add-addr-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    margin-bottom: 0.75rem !important;
  }
  #modal-client-details .client-add-addr-actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 0.5rem !important;
  }
  #modal-client-details .client-add-addr-actions .btn {
    min-height: 44px !important;
    touch-action: manipulation !important;
  }
  #modal-client-details .btn-save-addr {
    background: #10b981 !important;
    border: none !important;
    color: #ffffff !important;
  }

  /* Fil d'Activité / Timeline Mobile */
  #modal-client-details .client-timeline-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
  }
  #modal-client-details .client-history-filter {
    background: #ffffff !important;
    color: var(--gray-800) !important;
    border: 1px solid var(--gray-300) !important;
    font-size: 16px !important;
    min-height: 44px !important;
    height: 44px !important;
    border-radius: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  #modal-client-details .client-timeline-wrap {
    position: relative !important;
    margin-left: 8px !important;
    border-left: 2px solid var(--gray-200) !important;
    padding-left: 16px !important;
    padding-right: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
    max-height: none !important;
    overflow-y: visible !important;
  }
  #modal-client-details .client-timeline-item {
    position: relative !important;
    background: var(--gray-50) !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: 10px !important;
    padding: 0.75rem !important;
  }
  #modal-client-details .client-timeline-dot {
    position: absolute !important;
    left: -24px !important;
    top: 10px !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
  }
  #modal-client-details .client-timeline-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin-bottom: 0.5rem !important;
    gap: 0.5rem !important;
  }
  #modal-client-details .client-timeline-meta {
    min-width: 0 !important;
    flex: 1 !important;
  }
  #modal-client-details .client-timeline-title {
    font-weight: 800 !important;
    font-size: 0.9rem !important;
    color: var(--gray-900) !important;
    word-break: break-word !important;
  }
  #modal-client-details .client-timeline-items {
    font-size: 0.75rem !important;
    color: var(--gray-600) !important;
    margin-top: 2px !important;
    word-break: break-word !important;
  }
  #modal-client-details .client-timeline-status {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    margin-top: 4px !important;
  }
  #modal-client-details .client-timeline-amount-box {
    text-align: right !important;
    flex-shrink: 0 !important;
  }
  #modal-client-details .client-timeline-amount {
    font-weight: 800 !important;
    font-size: 1rem !important;
  }
  #modal-client-details .client-badge-paid {
    display: inline-block !important;
    font-size: 0.62rem !important;
    background: #d1fae5 !important;
    color: #065f46 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-weight: 800 !important;
    margin-top: 2px !important;
  }
  #modal-client-details .client-badge-unpaid {
    display: inline-block !important;
    font-size: 0.62rem !important;
    background: #fee2e2 !important;
    color: #991b1b !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-weight: 800 !important;
    margin-top: 2px !important;
  }
  #modal-client-details .client-timeline-date {
    font-size: 0.70rem !important;
    color: var(--gray-400) !important;
    margin-top: 2px !important;
  }
  #modal-client-details .client-timeline-actions {
    display: flex !important;
    gap: 0.4rem !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    border-top: 1px solid var(--gray-100) !important;
    padding-top: 0.4rem !important;
  }
  #modal-client-details .btn-timeline-action {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    padding: 4px 8px !important;
    min-height: 40px !important;
    height: 40px !important;
    border: 1px solid var(--gray-200) !important;
    background: #ffffff !important;
    border-radius: 6px !important;
    display: inline-flex;
    align-items: center !important;
    gap: 3px !important;
    touch-action: manipulation !important;
  }
  #modal-client-details .btn-action-pay {
    border-color: #34d399 !important;
    color: #059669 !important;
    background: #ecfdf5 !important;
  }
  #modal-client-details .btn-action-cancel {
    border-color: #fca5a5 !important;
    color: #dc2626 !important;
    background: #fef2f2 !important;
  }

  /* Note Post-it Mobile */
  #modal-client-details .client-note-card {
    background: #fef3c7 !important;
    border: 1px solid #fde68a !important;
    border-radius: 12px !important;
    padding: 1rem !important;
    position: relative !important;
  }
  #modal-client-details .client-note-icon {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    color: #f59e0b !important;
  }
  #modal-client-details .client-note-title {
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    color: #92400e !important;
    margin-bottom: 0.4rem !important;
  }
  #modal-client-details .client-note-text {
    font-weight: 500 !important;
    color: #92400e !important;
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
    white-space: pre-wrap !important;
  }
  #modal-client-details .client-note-input {
    background: rgba(255, 255, 255, 0.65) !important;
    border-color: #fde68a !important;
    color: #92400e !important;
    font-size: 16px !important;
    width: 100% !important;
  }

  /* Barre Sticky Actions Inférieure Mobile */
  #modal-client-details .client-details-mobile-footer {
    display: flex !important;
    position: sticky !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border-top: 1px solid var(--gray-200) !important;
    padding: 0.65rem 0.85rem calc(0.65rem + env(safe-area-inset-bottom, 0px)) 0.85rem !important;
    z-index: 10020 !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06) !important;
    flex-shrink: 0 !important;
  }
  #modal-client-details .client-mobile-footer-row {
    display: flex !important;
    gap: 0.5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #modal-client-details .client-mobile-footer-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    min-height: 44px !important;
    height: 44px !important;
    border-radius: 8px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 0 4px !important;
    touch-action: manipulation !important;
  }
  #modal-client-details .btn-mobile-invoice {
    background: rgba(5, 96, 58, 0.08) !important;
    color: var(--g700, #05603a) !important;
    border: 1px solid rgba(5, 96, 58, 0.25) !important;
  }
  #modal-client-details .btn-mobile-quote {
    background: #ffffff !important;
    color: var(--gray-800) !important;
    border: 1px solid var(--gray-300) !important;
  }
  #modal-client-details .btn-mobile-edit {
    background: var(--g700, #05603a) !important;
    color: #ffffff !important;
    border: none !important;
  }
  #modal-client-details .btn-mobile-cancel {
    background: var(--gray-100) !important;
    color: var(--gray-700) !important;
    border: 1px solid var(--gray-300) !important;
  }
  #modal-client-details .btn-mobile-save {
    background: #10b981 !important;
    color: #ffffff !important;
    border: none !important;
  }
}

/* Hiérarchie des z-index des modales Catalogue */
#modal-supplier,
#modal-quick-material,
#modal-quick-attr {
  z-index: 30000 !important;
}
#modal-columns-config,
#modal-bulk-ignore-stock {
  z-index: 20000 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODULE CATALOGUE & MODALE NOUVEAU PRODUIT / SERVICE (DESKTOP & BASE)
   ═══════════════════════════════════════════════════════════════════════════ */

.custom-autocomplete-item {
  padding: 0.6rem 0.8rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--gray-800);
  transition: background 0.15s;
}
.custom-autocomplete-item:hover {
  background: var(--gray-100);
  color: var(--gray-900);
}
.cost-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--gray-100);
  padding: .6rem .8rem;
  border-radius: 8px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--gray-600);
  margin-bottom: .75rem;
  border-left: 4px solid var(--g700, #05603a);
}
.bom-group-container {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding-left: .5rem;
}
.btn-cols-config {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--gray-700);
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: .35rem .75rem;
  cursor: pointer;
  transition: all .18s ease;
  white-space: nowrap;
}
.btn-cols-config:hover {
  background: var(--gray-50);
  color: var(--g800);
  border-color: var(--g700, #10b981);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.col-preset-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .75rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--gray-700);
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 20px;
  cursor: pointer;
  transition: all .18s ease;
}
.col-preset-pill:hover {
  background: #fff;
  color: var(--g800);
  border-color: var(--g700, #10b981);
  box-shadow: 0 2px 5px rgba(0,0,0,.06);
  transform: translateY(-1px);
}
.col-config-group-title {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-500);
  margin: 1.25rem 0 0.5rem 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.col-config-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.85rem;
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: all 0.15s ease;
}
.col-config-row:hover {
  border-color: var(--gray-300);
  background: var(--gray-50);
}
.th-sortable {
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.th-sortable:hover {
  background: var(--gray-100);
  color: var(--gray-900);
}
.th-sort-icon {
  font-size: 0.7rem;
  margin-left: 4px;
  color: var(--gray-400);
}
.th-sortable.sorted-asc .th-sort-icon,
.th-sortable.sorted-desc .th-sort-icon {
  color: var(--g800, #104c32);
  font-weight: bold;
}
#cat-table {
  border-collapse: collapse;
  width: 100%;
}
#cat-table th {
  white-space: nowrap;
  padding: 0.75rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  background: var(--gray-50);
  border-bottom: 2px solid var(--gray-200);
  color: var(--gray-600);
}
#cat-table td {
  padding: 0.75rem 0.85rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--gray-100);
  font-size: 0.85rem;
}
#cat-table tbody tr:hover {
  background: #f8fafc;
}

/* ── Desktop Only Styles pour Catalogue (Strictement isolés sous @media min-width: 769px) ── */
@media (min-width: 769px) {
  .cat-mobile-card-cell {
    display: none !important;
  }
  .cat-desktop-col {
    display: table-cell !important;
  }
  #cat-thead {
    display: table-header-group !important;
  }
  #cat-table {
    display: table !important;
    width: 100% !important;
  }
  #cat-table tbody {
    display: table-row-group !important;
  }
  .cat-product-row {
    display: table-row !important;
  }
  .cat-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    padding: 1.25rem 1.5rem 1rem 1.5rem !important;
    border-bottom: none !important;
  }
  .cat-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    flex-wrap: wrap !important;
  }
  .cat-header-right {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-left: auto !important;
  }
  .cat-search-wrap {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    width: 260px !important;
  }
  .cat-search-icon {
    position: absolute !important;
    left: 0.75rem !important;
    color: var(--gray-400) !important;
    pointer-events: none !important;
  }
  .cat-search-input {
    width: 260px !important;
    padding: 0.35rem 0.7rem 0.35rem 2.2rem !important;
    font-size: 0.8rem !important;
    min-height: 32px !important;
    height: 32px !important;
  }
  .btn-mobile-filter-toggle {
    display: none !important;
  }

  /* Barre de filtres Desktop : 1 SEULE LIGNE HORIZONTALE */
  .cat-filter-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    padding: 0.85rem 1.5rem !important;
    background: var(--gray-50) !important;
    border-bottom: 1px solid var(--gray-200) !important;
    align-items: center !important;
  }
  .cat-mobile-tools-row {
    display: none !important;
  }
  .cat-filter-inputs-row {
    display: flex !important;
    gap: 0.5rem !important;
    align-items: center !important;
  }
  .cat-select-brand,
  .cat-select-color,
  .cat-select-model {
    width: 130px !important;
    padding: 0.3rem 0.5rem !important;
    font-size: 0.75rem !important;
    height: 32px !important;
    display: inline-block !important;
  }
  .cat-select-category {
    width: 140px !important;
    padding: 0.3rem 0.5rem !important;
    font-size: 0.75rem !important;
    height: 32px !important;
    display: inline-block !important;
  }
  .cat-filter-price-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    margin-left: auto !important;
  }
  .cat-input-pmin,
  .cat-input-pmax {
    width: 75px !important;
    padding: 0.3rem 0.5rem !important;
    font-size: 0.75rem !important;
    height: 32px !important;
    display: inline-block !important;
  }
  .cat-filter-price-sep {
    font-size: 0.75rem;
    color: var(--gray-500);
  }
  .cat-filter-divider {
    border-left: 1px solid var(--gray-200);
    height: 24px;
    margin: 0 0.5rem;
    display: block !important;
  }
  .cat-select-sort {
    width: 180px !important;
    padding: 0.3rem 0.5rem !important;
    font-size: 0.75rem !important;
    font-weight: bold !important;
    height: 32px !important;
    display: inline-block !important;
  }
  .cat-mobile-filter-footer {
    display: none !important;
  }

  /* ── Desktop Dépenses Styles ── */
  .dep-mobile-card-cell {
    display: none !important;
  }
  .dep-desktop-col {
    display: table-cell !important;
  }
  #dep-thead {
    display: table-header-group !important;
  }
  #dep-table {
    display: table !important;
    width: 100% !important;
  }
  #dep-table tbody {
    display: table-row-group !important;
  }
  .dep-expense-row {
    display: table-row !important;
  }
  .dep-analytics-grid {
    display: grid !important;
    grid-template-columns: 3fr 2fr !important;
    gap: 1.25rem !important;
    margin-bottom: 1.5rem !important;
  }
  .dep-card-header {
    margin-bottom: 1rem !important;
  }
  .dep-header-inner {
    display: flex !important;
    gap: 0.5rem !important;
    align-items: center !important;
    width: 100% !important;
    flex-wrap: wrap !important;
  }
  .dep-tabs-row {
    display: flex !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
  }
  .dep-tab-btn {
    border-radius: 100px !important;
    padding: 0.4rem 1rem !important;
  }
  .dep-filters-row {
    margin-left: auto !important;
    display: flex !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
  }
  .dep-search-wrap {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  .dep-search-icon {
    position: absolute !important;
    left: 0.6rem !important;
    color: var(--gray-400) !important;
    pointer-events: none !important;
  }
  .dep-search-input {
    width: 180px !important;
    height: 32px !important;
    padding: 0 0.5rem 0 1.8rem !important;
    font-size: 0.75rem !important;
  }
  .dep-filter-select {
    width: auto !important;
    height: 32px !important;
    padding: 0 0.5rem !important;
    font-size: 0.75rem !important;
  }
  .dep-filter-year {
    width: 80px !important;
    height: 32px !important;
    padding: 0 0.5rem !important;
    font-size: 0.75rem !important;
  }
  .dep-filter-month {
    width: auto !important;
    height: 32px !important;
    padding: 0 0.5rem !important;
    font-size: 0.75rem !important;
  }

  /* ── Desktop Stocks Styles ── */
  .stock-mobile-card-cell {
    display: none !important;
  }
  .stock-desktop-col {
    display: table-cell !important;
  }
  #prod-thead,
  #table-products thead,
  #view-movements table thead,
  #view-transfers table thead {
    display: table-header-group !important;
  }
  #table-products,
  #view-movements table,
  #view-transfers table {
    display: table !important;
    width: 100% !important;
  }
  #table-products tbody,
  #view-movements table tbody,
  #view-transfers table tbody {
    display: table-row-group !important;
  }
  .stock-item-row {
    display: table-row !important;
  }
  .stock-charts-grid {
    display: grid !important;
    grid-template-columns: 3fr 2fr !important;
    gap: 1.25rem !important;
    margin-bottom: 1.5rem !important;
  }
  .stock-filters-row {
    margin-left: auto !important;
    display: flex !important;
    gap: 0.5rem !important;
    align-items: center !important;
  }
  .stock-selects-wrap {
    display: flex !important;
    gap: 0.5rem !important;
    align-items: center !important;
  }
  .stock-search-input {
    width: 180px !important;
    height: 32px !important;
    padding: 0 1rem !important;
    font-size: 0.75rem !important;
    border-radius: 100px !important;
  }
  .stock-filter-select {
    width: auto !important;
    height: 32px !important;
    padding: 0 1rem !important;
    font-size: 0.75rem !important;
    border-radius: 100px !important;
  }
  .stock-filter-btn {
    height: 32px !important;
    padding: 0 0.85rem !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    border-color: var(--gray-300) !important;
    color: var(--gray-700) !important;
    border-radius: 100px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
  }

  /* ── Desktop Inline Stock Transfer (1-2 Clics) ── */
  .stock-quick-transfer-bar {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: #ffffff !important;
    border: 1px solid var(--gray-200) !important;
    padding: 3px 5px !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    white-space: nowrap !important;
  }
  .stock-qt-arrow {
    color: var(--gray-400) !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    user-select: none !important;
    padding: 0 1px !important;
  }
  .stock-qt-select {
    height: 28px !important;
    border-radius: 6px !important;
    border: 1px solid var(--gray-200) !important;
    background: var(--gray-50) !important;
    color: var(--gray-800) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    padding: 1px 6px !important;
    outline: none !important;
    max-width: 140px !important;
    cursor: pointer !important;
  }
  .stock-qt-select:focus {
    border-color: var(--g700) !important;
    background: #ffffff !important;
  }
  .stock-qt-qty-wrap {
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    background: var(--gray-50) !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: 6px !important;
    padding: 1px 3px !important;
  }
  .stock-qt-input {
    width: 44px !important;
    height: 24px !important;
    border: none !important;
    background: transparent !important;
    text-align: center !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: var(--gray-900) !important;
    outline: none !important;
    padding: 0 !important;
  }
  .stock-qt-max-btn {
    border: none !important;
    background: var(--gray-200) !important;
    color: var(--gray-700) !important;
    border-radius: 4px !important;
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    padding: 1px 4px !important;
    cursor: pointer !important;
    transition: background 0.1s !important;
    user-select: none !important;
    height: 20px !important;
    line-height: 18px !important;
  }
  .stock-qt-max-btn:hover {
    background: var(--gray-300) !important;
    color: var(--gray-900) !important;
  }
  .stock-qt-submit-btn {
    height: 28px !important;
    padding: 0 0.6rem !important;
    border-radius: 6px !important;
    border: none !important;
    background: var(--g800) !important;
    color: #ffffff !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    user-select: none !important;
  }
  .stock-qt-submit-btn:hover {
    background: var(--g900, #033622) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(4, 78, 50, 0.2) !important;
  }
  .stock-qt-submit-btn:active {
    transform: translateY(0) !important;
  }
  .stock-qt-submit-btn:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
  }
  .stock-qt-empty {
    font-size: 0.75rem !important;
    color: var(--gray-400) !important;
    font-style: italic !important;
  }

  /* ── Desktop Client Details Styles (#modal-client-details) ── */
  #modal-client-details.client-details-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    background: rgba(4, 29, 20, 0.55) !important;
    z-index: 20000 !important;
  }
  #modal-client-details .client-details-modal {
    width: 92% !important;
    max-width: 1240px !important;
    height: 90vh !important;
    max-height: 90vh !important;
    border-radius: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    background: #f8fafc !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    overflow: hidden !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0,0,0,0.06) !important;
  }
  
  /* En-tête Desktop */
  #modal-client-details .client-details-header {
    background: linear-gradient(135deg, var(--g900, #044e32) 0%, var(--g700, #05603a) 60%, #064e3b 100%) !important;
    padding: 1.35rem 2rem !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-radius: 20px 20px 0 0 !important;
    flex-shrink: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
  }
  #modal-client-details .client-details-identity {
    display: flex !important;
    align-items: center !important;
    gap: 1.25rem !important;
  }
  #modal-client-details .client-details-avatar {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.25) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 800 !important;
    font-size: 1.45rem !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    flex-shrink: 0 !important;
  }
  #modal-client-details .client-details-name-row {
    display: flex !important;
    align-items: center !important;
    gap: 0.85rem !important;
  }
  #modal-client-details .client-details-name {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    margin: 0 !important;
    color: #ffffff !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
  }
  #modal-client-details .client-status-badge {
    padding: 3px 10px !important;
    border-radius: 9999px !important;
    font-weight: 800 !important;
    font-size: 0.70rem !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
  }
  #modal-client-details .client-status-active {
    background: #10B981 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35) !important;
  }
  #modal-client-details .client-status-archived {
    background: #EF4444 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.35) !important;
  }
  #modal-client-details .client-details-sub {
    font-size: 0.85rem !important;
    color: rgba(255, 255, 255, 0.75) !important;
    margin-top: 3px !important;
    font-weight: 500 !important;
  }
  #modal-client-details [style*="display: none"],
  #modal-client-details [style*="display:none"],
  #modal-client-details [x-cloak] {
    display: none !important;
  }

  #modal-client-details .client-details-header-actions {
    display: flex !important;
    gap: 0.65rem !important;
    align-items: center !important;
  }
  #modal-client-details .client-details-header-actions .btn {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    padding: 0.55rem 1.1rem !important;
    border-radius: 9px !important;
    transition: all 0.15s ease !important;
    height: 38px !important;
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
  }
  #modal-client-details .client-details-header-actions .btn-ghost {
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
  }
  #modal-client-details .client-details-header-actions .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
  }
  #modal-client-details .client-details-header-actions .btn-header-invoice {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
  }
  #modal-client-details .client-details-header-actions .btn-header-invoice:hover {
    background: rgba(255, 255, 255, 0.25) !important;
  }
  #modal-client-details .client-details-header-actions .btn-header-quote {
    background: #ffffff !important;
    color: var(--g800, #044e32) !important;
    font-weight: 800 !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  }
  #modal-client-details .client-details-header-actions .btn-header-quote:hover {
    background: #f1f5f9 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  }
  #modal-client-details .client-details-header-actions .btn-restore,
  #modal-client-details .client-details-header-actions .btn-save {
    background: #10B981 !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35) !important;
  }
  #modal-client-details .client-details-close-btn {
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    border-radius: 9px !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 1.1rem !important;
    transition: all 0.15s ease !important;
    margin-left: 0.25rem !important;
  }
  #modal-client-details .client-details-close-btn:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    transform: scale(1.05) !important;
  }

  /* Corps Desktop */
  #modal-client-details .client-details-mobile-tabs,
  #modal-client-details .client-details-mobile-footer {
    display: none !important;
  }
  #modal-client-details .client-details-body {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 1.75rem 2rem 2.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.75rem !important;
    background: #f8fafc !important;
  }

  /* 4 KPIs Desktop */
  #modal-client-details .client-details-kpis {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.25rem !important;
  }
  #modal-client-details .client-det-kpi-card {
    background: #ffffff !important;
    border: 1px solid var(--gray-200, #e2e8f0) !important;
    border-radius: 14px !important;
    padding: 1.15rem 1.35rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
  }
  #modal-client-details .client-det-kpi-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px -2px rgba(0, 0, 0, 0.06) !important;
    border-color: var(--gray-300) !important;
  }
  #modal-client-details .client-det-kpi-icon {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }
  #modal-client-details .kpi-icon-blue {
    background: #eff6ff !important;
    color: #2563eb !important;
    border: 1px solid #dbeafe !important;
  }
  #modal-client-details .kpi-icon-green {
    background: #ecfdf5 !important;
    color: #059669 !important;
    border: 1px solid #a7f3d0 !important;
  }
  #modal-client-details .kpi-icon-purple {
    background: #f5f3ff !important;
    color: #7c3aed !important;
    border: 1px solid #ddd6fe !important;
  }
  #modal-client-details .kpi-icon-red {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    border: 1px solid #fecaca !important;
  }
  #modal-client-details .client-det-kpi-content {
    min-width: 0 !important;
    flex: 1 !important;
  }
  #modal-client-details .client-det-kpi-label {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: var(--gray-500, #64748b) !important;
    margin-bottom: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #modal-client-details .client-det-kpi-value {
    font-size: 1.45rem !important;
    font-weight: 800 !important;
    color: var(--gray-900, #0f172a) !important;
    white-space: nowrap !important;
    letter-spacing: -0.02em !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 1.2 !important;
  }
  #modal-client-details .kpi-label-danger,
  #modal-client-details .kpi-val-danger {
    color: #dc2626 !important;
  }
  #modal-client-details .client-det-kpi-sub-danger {
    font-size: 0.70rem !important;
    font-weight: 700 !important;
    color: #b91c1c !important;
    margin-top: 2px !important;
  }

  /* Disposition Principale Desktop (2 Colonnes) */
  #modal-client-details .client-details-main-grid {
    display: grid !important;
    grid-template-columns: 1.15fr 1fr !important;
    gap: 1.5rem !important;
    align-items: start !important;
  }
  #modal-client-details .client-details-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  /* Cartes de Contenu Desktop */
  #modal-client-details .client-det-card {
    background: #ffffff !important;
    border: 1px solid var(--gray-200, #e2e8f0) !important;
    border-radius: 16px !important;
    padding: 1.35rem 1.5rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  }

  /* En-têtes de Sections Raffinés (Adieu les gros blocs verts opaques !) */
  #modal-client-details .client-sec-header {
    background: transparent !important;
    color: var(--gray-900, #0f172a) !important;
    font-weight: 800 !important;
    font-size: 1rem !important;
    margin-bottom: 1.15rem !important;
    padding: 0 0 0.85rem 0 !important;
    border-bottom: 1px solid var(--gray-100, #f1f5f9) !important;
    border-radius: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.75rem !important;
    flex-wrap: nowrap !important;
  }
  #modal-client-details .client-sec-title {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    font-weight: 800 !important;
    font-size: 0.98rem !important;
    color: var(--gray-900) !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  #modal-client-details .client-sec-title span {
    white-space: nowrap !important;
  }
  #modal-client-details .client-sec-title svg {
    color: var(--g700, #05603a) !important;
    background: rgba(5, 96, 58, 0.08) !important;
    padding: 6px !important;
    border-radius: 8px !important;
    width: 30px !important;
    height: 30px !important;
    box-sizing: border-box !important;
  }
  #modal-client-details .client-type-badge {
    padding: 3px 10px !important;
    border-radius: 9999px !important;
    font-weight: 700 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.02em !important;
  }
  #modal-client-details .badge-b2b {
    background: #ecfdf5 !important;
    color: #065f46 !important;
    border: 1px solid #a7f3d0 !important;
  }
  #modal-client-details .badge-b2c {
    background: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #fde68a !important;
  }

  /* Grille des Champs d'Informations (Tuiles Claires Épurées) */
  #modal-client-details .client-fields-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.85rem !important;
  }
  #modal-client-details .client-fields-grid > div {
    background: var(--gray-50, #f8fafc) !important;
    border: 1px solid var(--gray-200, #e2e8f0) !important;
    border-radius: 10px !important;
    padding: 0.75rem 0.95rem !important;
    transition: border-color 0.15s ease !important;
  }
  #modal-client-details .client-fields-grid > div:hover {
    border-color: var(--gray-300) !important;
  }
  #modal-client-details .field-span-2 {
    grid-column: span 2 !important;
  }
  #modal-client-details .client-field-label {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: var(--gray-500, #64748b) !important;
    margin-bottom: 4px !important;
  }
  #modal-client-details .client-val-strong {
    font-weight: 800 !important;
    font-size: 0.98rem !important;
    color: var(--gray-900, #0f172a) !important;
    word-break: break-word !important;
  }
  #modal-client-details .client-val-mono {
    font-weight: 700 !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.88rem !important;
    color: var(--gray-800, #1e293b) !important;
  }
  #modal-client-details .client-val-medium {
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    color: var(--gray-800, #1e293b) !important;
    word-break: break-word !important;
  }
  #modal-client-details .client-val-muted {
    color: var(--gray-400, #94a3b8) !important;
    font-style: italic !important;
    font-weight: 500 !important;
  }
  #modal-client-details .client-link-green {
    color: var(--g700, #05603a) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: color 0.15s !important;
    word-break: break-all !important;
  }
  #modal-client-details .client-link-green:hover {
    color: var(--g900, #044e32) !important;
    text-decoration: underline !important;
  }
  #modal-client-details .client-link-tel {
    color: var(--gray-900) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
  }

  /* Formulaires en Édition Desktop */
  #modal-client-details .form-input,
  #modal-client-details select.form-input,
  #modal-client-details textarea.form-input {
    font-size: 0.88rem !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 8px !important;
    border: 1px solid var(--gray-300) !important;
    background: #ffffff !important;
    color: var(--gray-900) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #modal-client-details .client-contact-inputs {
    display: flex;
    flex-direction: column !important;
    gap: 0.45rem !important;
    margin-top: 4px !important;
  }
  #modal-client-details .client-address-edit-group {
    display: flex;
    flex-direction: column !important;
    gap: 0.45rem !important;
    margin-top: 4px !important;
  }
  #modal-client-details .client-address-row {
    display: flex;
    gap: 0.45rem !important;
  }
  #modal-client-details .client-contact-inputs[style*="display: none"],
  #modal-client-details .client-contact-inputs[style*="display:none"],
  #modal-client-details .client-address-edit-group[style*="display: none"],
  #modal-client-details .client-address-edit-group[style*="display:none"] {
    display: none !important;
  }
  #modal-client-details .client-input-cp {
    width: 90px !important;
    flex: 0 0 90px !important;
  }
  #modal-client-details .client-input-city {
    flex: 1 !important;
  }
  #modal-client-details .client-input-country {
    width: 110px !important;
    flex: 0 0 110px !important;
  }

  /* Carnet d'Adresses Desktop */
  #modal-client-details .btn-add-addr {
    background: rgba(5, 96, 58, 0.08) !important;
    color: var(--g700, #05603a) !important;
    border: 1px solid rgba(5, 96, 58, 0.2) !important;
    border-radius: 7px !important;
    padding: 0.35rem 0.75rem !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
  }
  #modal-client-details .btn-add-addr:hover {
    background: rgba(5, 96, 58, 0.15) !important;
    color: var(--g900) !important;
  }
  #modal-client-details .client-addresses-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  #modal-client-details .client-empty-msg {
    border: 2px dashed var(--gray-200) !important;
    border-radius: 10px !important;
    padding: 1.25rem !important;
    text-align: center !important;
    color: var(--gray-400) !important;
    font-size: 0.85rem !important;
    background: var(--gray-50) !important;
  }
  #modal-client-details .client-addr-item {
    padding: 0.85rem 1rem !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: 10px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    background: var(--gray-50) !important;
    transition: border-color 0.15s ease !important;
  }
  #modal-client-details .client-addr-item:hover {
    border-color: var(--gray-300) !important;
  }
  #modal-client-details .client-addr-header {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-bottom: 0.3rem !important;
  }
  #modal-client-details .client-addr-label {
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    color: var(--gray-900) !important;
  }
  #modal-client-details .client-addr-type {
    font-size: 0.65rem !important;
    padding: 2px 7px !important;
    border-radius: 6px !important;
    background: var(--gray-200) !important;
    color: var(--gray-700) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
  }
  #modal-client-details .client-addr-text {
    font-size: 0.82rem !important;
    color: var(--gray-600) !important;
  }

  /* Fil d'Activité / Timeline Desktop */
  #modal-client-details .client-history-filter {
    background: #ffffff !important;
    color: var(--gray-700) !important;
    border: 1px solid var(--gray-300) !important;
    border-radius: 8px !important;
    font-size: 0.80rem !important;
    font-weight: 600 !important;
    padding: 0.3rem 0.7rem !important;
    height: 32px !important;
    min-height: 32px !important;
    cursor: pointer !important;
    width: auto !important;
  }
  #modal-client-details .client-timeline-wrap {
    position: relative !important;
    margin-left: 0 !important;
    border-left: none !important;
    padding-left: 36px !important;
    padding-right: 8px !important;
    padding-bottom: 1.75rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.15rem !important;
    max-height: 560px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scroll-padding-bottom: 1.75rem !important;
  }
  #modal-client-details .client-timeline-wrap::before {
    content: '' !important;
    position: absolute !important;
    top: 16px !important;
    bottom: 24px !important;
    left: 16px !important;
    width: 2px !important;
    background: var(--gray-200, #e2e8f0) !important;
    z-index: 1 !important;
  }
  #modal-client-details .client-timeline-wrap::-webkit-scrollbar {
    width: 6px !important;
  }
  #modal-client-details .client-timeline-wrap::-webkit-scrollbar-track {
    background: var(--gray-100) !important;
    border-radius: 4px !important;
  }
  #modal-client-details .client-timeline-wrap::-webkit-scrollbar-thumb {
    background: var(--gray-300) !important;
    border-radius: 4px !important;
  }
  #modal-client-details .client-timeline-wrap::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400) !important;
  }
  #modal-client-details .client-timeline-item {
    position: relative !important;
    background: #ffffff !important;
    border: 1px solid var(--gray-200, #e2e8f0) !important;
    border-radius: 12px !important;
    padding: 1rem 1.25rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.2s ease !important;
  }
  #modal-client-details .client-timeline-item:hover {
    border-color: rgba(5, 96, 58, 0.35) !important;
    box-shadow: 0 6px 16px -2px rgba(0, 0, 0, 0.05) !important;
  }
  #modal-client-details .client-timeline-dot {
    position: absolute !important;
    left: -27px !important;
    top: 18px !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 0 0 2px var(--gray-300) !important;
    background: var(--g700, #05603a);
    z-index: 3 !important;
  }
  #modal-client-details .client-timeline-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 1rem !important;
  }
  #modal-client-details .client-timeline-meta {
    min-width: 0 !important;
    flex: 1 !important;
  }
  #modal-client-details .client-timeline-title {
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    color: var(--gray-900) !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    white-space: nowrap !important;
  }
  #modal-client-details .client-timeline-items {
    font-size: 0.80rem !important;
    color: var(--gray-600) !important;
    margin-top: 3px !important;
    word-break: break-word !important;
  }
  #modal-client-details .client-timeline-status {
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    margin-top: 4px !important;
  }
  #modal-client-details .client-timeline-amount-box {
    text-align: right !important;
    flex-shrink: 0 !important;
  }
  #modal-client-details .client-timeline-amount {
    font-weight: 800 !important;
    font-size: 1.15rem !important;
    font-variant-numeric: tabular-nums !important;
  }
  #modal-client-details .client-badge-paid {
    display: inline-block;
    font-size: 0.65rem !important;
    background: #d1fae5 !important;
    color: #065f46 !important;
    padding: 2px 7px !important;
    border-radius: 5px !important;
    font-weight: 800 !important;
    margin-top: 3px !important;
    letter-spacing: 0.03em !important;
  }
  #modal-client-details .client-badge-unpaid {
    display: inline-block;
    font-size: 0.65rem !important;
    background: #fee2e2 !important;
    color: #991b1b !important;
    padding: 2px 7px !important;
    border-radius: 5px !important;
    font-weight: 800 !important;
    margin-top: 3px !important;
    letter-spacing: 0.03em !important;
  }
  #modal-client-details .client-timeline-date {
    font-size: 0.72rem !important;
    color: var(--gray-400) !important;
    margin-top: 3px !important;
  }
  #modal-client-details .client-timeline-actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 0.5rem !important;
    margin-top: 0.75rem !important;
    padding-top: 0.75rem !important;
    border-top: 1px solid var(--gray-100) !important;
  }
  #modal-client-details .btn-timeline-action {
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    padding: 0.35rem 0.75rem !important;
    min-height: 32px !important;
    height: 32px !important;
    border: 1px solid var(--gray-200) !important;
    background: var(--gray-50) !important;
    color: var(--gray-700) !important;
    border-radius: 6px !important;
    display: inline-flex;
    align-items: center !important;
    gap: 4px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
  }
  #modal-client-details .btn-timeline-action[style*="display: none"],
  #modal-client-details .btn-timeline-action[style*="display:none"] {
    display: none !important;
  }
  #modal-client-details .btn-timeline-action:hover {
    background: var(--gray-100) !important;
    color: var(--gray-900) !important;
  }
  #modal-client-details .btn-action-pay {
    border-color: #a7f3d0 !important;
    color: #065f46 !important;
    background: #ecfdf5 !important;
  }
  #modal-client-details .btn-action-pay:hover {
    background: #d1fae5 !important;
    border-color: #6ee7b7 !important;
  }
  #modal-client-details .btn-action-cancel {
    border-color: #fecaca !important;
    color: #991b1b !important;
    background: #fef2f2 !important;
  }
  #modal-client-details .btn-action-cancel:hover {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
  }

  /* Note Épinglée Desktop */
  #modal-client-details .client-note-card {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
    border: 1px solid #fde68a !important;
    border-radius: 14px !important;
    padding: 1.25rem 1.5rem !important;
    position: relative !important;
  }
  #modal-client-details .client-note-icon {
    position: absolute !important;
    top: 1.25rem !important;
    right: 1.25rem !important;
    color: #f59e0b !important;
  }
  #modal-client-details .client-note-title {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    color: #92400e !important;
    margin-bottom: 0.5rem !important;
  }
  #modal-client-details .client-note-text {
    font-weight: 500 !important;
    color: #78350f !important;
    font-size: 0.86rem !important;
    line-height: 1.55 !important;
    white-space: pre-wrap !important;
  }
  #modal-client-details .client-note-input {
    background: rgba(255, 255, 255, 0.75) !important;
    border-color: #fde68a !important;
    color: #92400e !important;
    font-size: 0.88rem !important;
  }
}
 
/* ── Zone Justificatif / Facture (Prise de photo mobile & Import document) ── */
.dep-receipt-zone {
  border: 2px dashed var(--g300, #a3e635);
  border-radius: 12px;
  padding: 1.25rem;
  background: var(--gray-50, #f8fafc);
  margin-bottom: 1.25rem;
  transition: border-color 0.2s, background 0.2s;
  box-sizing: border-box;
  width: 100%;
  text-align: center;
}
.dep-receipt-buttons-row {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
  margin-top: 0.85rem;
  flex-wrap: wrap;
}
.btn-camera-snap {
  min-height: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0 1.25rem;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: 10px;
  background: var(--g700, #05603a);
  color: #ffffff;
  border: none;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  touch-action: manipulation;
  transition: background 0.15s ease, transform 0.1s ease;
}
.btn-camera-snap:hover {
  background: var(--g800, #033c24);
}
.btn-camera-snap:active {
  background: #022c1a;
  transform: scale(0.98);
}
.btn-file-browse {
  min-height: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0 1.25rem;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: 10px;
  background: #ffffff;
  color: var(--gray-800, #1e293b);
  border: 1px solid var(--gray-300, #cbd5e1);
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn-file-browse:hover {
  background: var(--gray-50, #f8fafc);
  border-color: var(--gray-400);
}
.btn-file-browse:active {
  background: var(--gray-100, #f1f5f9);
}

/* ── Modale Détails Produit Desktop (#cat-detail-overlay) ── */
@media (min-width: 769px) {
#cat-detail-overlay.cat-detail-panel-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  z-index: 9999;
  padding: 1.5rem;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  transition: opacity 0.2s ease;
}
#cat-detail-overlay.cat-detail-panel-overlay.open {
  display: flex !important;
}
#cat-detail-overlay .cat-detail-panel {
  background: var(--gray-25, #fafafa);
  border-radius: 24px;
  width: 90%;
  max-width: 1100px;
  height: 90vh;
  max-height: 900px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
#cat-detail-overlay .cat-dp-header {
  background: linear-gradient(135deg, var(--g700), var(--g800));
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 24px 24px 0 0;
  flex-shrink: 0;
}
#cat-detail-overlay .cat-dp-header-identity {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  width: 100%;
  min-width: 0;
}
#cat-detail-overlay .cat-dp-header-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#cat-detail-overlay .cat-dp-header-text {
  flex: 1;
  min-width: 0;
}
#cat-detail-overlay .cat-dp-title-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
#cat-detail-overlay .cat-dp-title {
  font-size: 1.4rem;
  font-weight: 800;
  margin: 0;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#cat-detail-overlay .cat-dp-badge {
  background: #10B981;
  color: #fff;
  padding: 3px 10px;
  border-radius: 100px;
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}
#cat-detail-overlay .cat-dp-sub {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 3px;
}
#cat-detail-overlay .cat-dp-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 700;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}
#cat-detail-overlay .cat-dp-close-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.05);
}
#cat-detail-overlay .cat-dp-mobile-tabs {
  display: none !important;
}
#cat-detail-overlay .cat-dp-mobile-footer {
  display: none !important;
}
#cat-detail-overlay .cat-dp-body {
  padding: 1.75rem 2rem;
  overflow-y: auto;
  flex: 1;
}
#cat-detail-overlay .cat-dp-section {
  display: block !important;
}
#cat-detail-overlay .dp-grid-kpi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
#cat-detail-overlay .cat-dp-kpi-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.05));
}
#cat-detail-overlay .cat-dp-kpi-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#cat-detail-overlay .kpi-rev-icon {
  background: #eff6ff;
  color: #2563eb;
}
#cat-detail-overlay .kpi-avg-icon {
  background: #f5f3ff;
  color: #7c3aed;
}
#cat-detail-overlay .kpi-note-icon {
  background: #fffbeb;
  color: #f59e0b;
}
#cat-detail-overlay .cat-dp-kpi-info {
  flex: 1;
}
#cat-detail-overlay .cat-dp-kpi-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
#cat-detail-overlay .cat-dp-kpi-val {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--gray-900);
  margin-top: 2px;
}
#cat-detail-overlay .cat-dp-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: var(--shadow-xs);
  margin-bottom: 1.5rem;
}
#cat-detail-overlay .dp-grid-adv {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}
#cat-detail-overlay .cat-dp-insights-list {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
#cat-detail-overlay .cat-dp-insight-badge {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
#cat-detail-overlay .cat-dp-insight-badge.healthy {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}
#cat-detail-overlay .cat-dp-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}
#cat-detail-overlay .cat-dp-chart-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
#cat-detail-overlay .cat-dp-chart-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(82, 168, 126, 0.12);
  color: var(--g800);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#cat-detail-overlay .cat-dp-card-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
#cat-detail-overlay .cat-dp-card-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--gray-900);
}
#cat-detail-overlay .cat-dp-chart-legend {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
}
#cat-detail-overlay .cat-dp-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.75rem;
  border-radius: 100px;
}
#cat-detail-overlay .chip-ca {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: #065f46;
}
#cat-detail-overlay .chip-score {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  color: #92400e;
}
#cat-detail-overlay .legend-dot {
  width: 9px;
  height: 9px;
  display: inline-block;
}
#cat-detail-overlay .dot-ca {
  border-radius: 2px;
  background: #10b981;
}
#cat-detail-overlay .dot-score {
  border-radius: 50%;
  background: #f59e0b;
}
#cat-detail-overlay .cat-dp-chart-wrapper {
  position: relative;
  height: 260px;
  width: 100%;
}
#cat-detail-overlay .cat-dp-sec-header {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
}
#cat-detail-overlay .cat-dp-sec-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
#cat-detail-overlay .cat-history-table {
  width: 100%;
  border-collapse: collapse;
}
#cat-detail-overlay .cat-history-table th {
  background: var(--gray-100, #f1f5f9);
  color: var(--gray-600, #475569);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.75rem 1.25rem;
  position: sticky;
  top: 0;
  border-bottom: 1px solid var(--gray-200);
  text-align: left;
}
#cat-detail-overlay .cat-history-table td {
  font-size: 0.85rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-800);
}
#cat-detail-overlay .cat-history-table tr:hover td {
  background: rgba(82, 168, 126, 0.04);
}
#cat-detail-overlay .cat-dp-table-wrap {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  overflow-x: auto;
}
#cat-detail-overlay .cat-dp-cell-content {
  display: none !important;
}
#cat-detail-overlay .cat-dp-dt-col {
  display: table-cell !important;
}
}

/* Skeleton Loading CSS */
.skeleton-text { background: #e2e8f0; border-radius: 4px; height: 1rem; position: relative; overflow: hidden; }
.skeleton-box { background: #e2e8f0; border-radius: 12px; height: 48px; width: 48px; position: relative; overflow: hidden; }
.skeleton-text::after, .skeleton-box::after {
  content: ""; display: block; position: absolute; left: -150px; top: 0; height: 100%; width: 150%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: skel 1.2s ease-in-out infinite;
}
@keyframes skel { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* ── Structure Modale Produit / Service (#modal-product) Desktop ── */
#modal-product .modal {
  max-width: 680px;
  width: 95%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid var(--gray-200);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
#modal-product .modal-header {
  background: linear-gradient(135deg, var(--g900, #044e32), var(--g700, #05603a));
  color: #ffffff;
  padding: 1.25rem 1.75rem;
  border-bottom: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
#modal-product .modal-title {
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 800;
}
#modal-product .modal-body {
  padding: 1.5rem 1.75rem;
  overflow-y: auto;
  flex: 1 1 auto;
}
.link-add-attr {
  font-size: 0.78rem;
  color: var(--g700, #05603a);
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.link-add-attr:hover {
  color: var(--g900, #044e32);
  text-decoration: underline;
}
.prod-modal-section {
  background: var(--g700, #05603a);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 0.55rem 0.95rem;
  border-radius: 8px;
  margin: 1.75rem 0 1rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.prod-modal-section:first-of-type {
  margin-top: 0;
}
.prod-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.prod-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}
/* ── Grille Desktop Consommables & Frais Additionnels ── */
.bom-group-container {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  width: 100%;
  box-sizing: border-box;
}
.bom-empty-state {
  font-size: 0.8rem;
  color: var(--gray-400);
  font-style: italic;
  padding: 0.5rem 0.75rem;
}
.bom-row-item {
  display: grid;
  gap: 0.6rem;
  align-items: flex-end;
  background: #ffffff;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  width: 100%;
  box-sizing: border-box;
}
.bom-row-item.has-waste {
  grid-template-columns: minmax(160px, 2.2fr) minmax(80px, 1fr) minmax(80px, 1fr) minmax(110px, 1.2fr) 38px;
}
.bom-row-item.no-waste {
  grid-template-columns: minmax(180px, 2.5fr) minmax(90px, 1fr) minmax(120px, 1.4fr) 38px;
}

.intangible-row-item {
  display: grid;
  grid-template-columns: minmax(180px, 2.5fr) minmax(100px, 1.2fr) minmax(120px, 1.3fr) 38px;
  gap: 0.6rem;
  align-items: flex-end;
  background: #ffffff;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  width: 100%;
  box-sizing: border-box;
}

.bom-row-item .form-label,
.intangible-row-item .form-label {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--gray-600);
  margin-bottom: 0.25rem;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bom-row-item .form-input,
.intangible-row-item .form-input {
  width: 100%;
  min-height: 38px;
  height: 38px;
  font-size: 0.85rem;
  border-radius: 8px;
  padding: 0 0.55rem;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid var(--gray-300);
}

.btn-del-row {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 8px;
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  font-size: 0.95rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  padding: 0;
  margin: 0;
}
.btn-del-row:hover {
  background: #fca5a5;
  color: #991b1b;
}
#modal-product .modal-footer {
  padding: 1.25rem 1.75rem;
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  align-items: center;
  flex-shrink: 0;
}

/* ── Modale Iframe Produit & Client dans Ventes (#modal-iframe-product & #modal-iframe-client) ── */
#modal-iframe-product .modal,
#modal-iframe-client .modal {
  max-width: 720px;
  width: 95%;
  height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
  border-radius: 20px !important;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
}
#modal-iframe-product .modal-header,
#modal-iframe-client .modal-header {
  background: linear-gradient(135deg, var(--g900, #044e32), var(--g700, #05603a)) !important;
  color: #ffffff !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 1rem 1.5rem !important;
  border-bottom: none !important;
  flex-shrink: 0 !important;
  border-radius: 20px 20px 0 0 !important;
}
#modal-iframe-product .modal-header .modal-title,
#modal-iframe-client .modal-header .modal-title {
  color: #ffffff !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.2px !important;
}
#modal-iframe-product .modal-header .btn-close-squircle,
#modal-iframe-client .modal-header .btn-close-squircle {
  background: rgba(255,255,255,0.18) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
#modal-iframe-product .modal-header .btn-close-squircle:hover,
#modal-iframe-client .modal-header .btn-close-squircle:hover {
  background: rgba(255,255,255,0.28) !important;
}
#modal-iframe-product .modal-body,
#modal-iframe-client .modal-body {
  padding: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
  height: 100% !important;
}
#modal-iframe-product iframe,
#modal-iframe-client iframe {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  display: block !important;
}

/* ── MODE MODALE EMBEDDED DANS IFRAME (ZÉRO INTERFÉRENCE CSS) ── */
html.is-embedded-modal,
body.is-embedded-modal {
  background: #ffffff !important;
  overflow: hidden !important;
  min-height: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.is-embedded-modal .sidebar,
.is-embedded-modal .topbar,
.is-embedded-modal .page-body,
.is-embedded-modal #sidebar,
.is-embedded-modal .app-layout > aside,
.is-embedded-modal .app-layout > .main > .topbar,
.is-embedded-modal .app-layout > .main > .page-body {
  display: none !important;
}
.is-embedded-modal .app-layout,
.is-embedded-modal .main {
  display: contents !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
.is-embedded-modal .modal-overlay:not(#modal-product):not(#modal-new-client):not(.open) {
  display: none !important;
}
.is-embedded-modal .modal-overlay.open:not(#modal-product):not(#modal-new-client) {
  display: flex !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 50000 !important;
  background: rgba(4, 29, 20, 0.65) !important;
  backdrop-filter: blur(4px) !important;
  opacity: 1 !important;
  pointer-events: all !important;
  visibility: visible !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1rem !important;
}
.is-embedded-modal .modal-overlay.open:not(#modal-product):not(#modal-new-client) .modal {
  display: flex !important;
  flex-direction: column !important;
  max-width: 440px !important;
  width: 95% !important;
  max-height: 85vh !important;
  height: auto !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.35) !important;
  overflow: hidden !important;
  margin: auto !important;
  position: relative !important;
  z-index: 50001 !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  transform: scale(1) !important;
}
.is-embedded-modal .modal-overlay.open:not(#modal-product):not(#modal-new-client) .modal .modal-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  background: linear-gradient(135deg, var(--g900, #044e32), var(--g700, #05603a)) !important;
  color: #ffffff !important;
  padding: 1rem 1.25rem !important;
  border-radius: 18px 18px 0 0 !important;
  flex-shrink: 0 !important;
  border-bottom: none !important;
}
.is-embedded-modal .modal-overlay.open:not(#modal-product):not(#modal-new-client) .modal .modal-header .modal-title {
  color: #ffffff !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
}
.is-embedded-modal .modal-overlay.open:not(#modal-product):not(#modal-new-client) .modal .modal-header .btn-close-squircle {
  background: rgba(255,255,255,0.18) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.9rem !important;
  cursor: pointer !important;
}
.is-embedded-modal .modal-overlay.open:not(#modal-product):not(#modal-new-client) .modal .modal-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  padding: 1.25rem !important;
  height: auto !important;
  max-height: 65vh !important;
}
.is-embedded-modal .modal-overlay.open:not(#modal-product):not(#modal-new-client) .modal .modal-footer {
  flex-shrink: 0 !important;
  position: static !important;
  background: var(--gray-50, #f9fafb) !important;
  border-top: 1px solid var(--gray-200) !important;
  padding: 0.85rem 1.25rem !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 0.5rem !important;
}
.is-embedded-modal .modal-overlay.open:not(#modal-product):not(#modal-new-client) .modal .modal-footer button,
.is-embedded-modal .modal-overlay.open:not(#modal-product):not(#modal-new-client) .modal .modal-footer .btn {
  min-height: 38px !important;
  padding: 0.4rem 1rem !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
}
.is-embedded-modal #modal-product.modal-overlay,
.is-embedded-modal #modal-new-client.modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  background: #ffffff !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 1 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.is-embedded-modal #modal-product .modal,
.is-embedded-modal #modal-new-client .modal {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  overflow: hidden !important;
  transform: none !important;
}
.is-embedded-modal #modal-product .modal-header,
.is-embedded-modal #modal-new-client .modal-header,
.is-embedded-modal .modal .modal-header,
.is-embedded-modal .modal-header {
  display: none !important;
}
.is-embedded-modal #modal-product .modal-body,
.is-embedded-modal #modal-new-client .modal-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 1.25rem 1.5rem !important;
  box-sizing: border-box !important;
  max-height: none !important;
  height: auto !important;
}
.is-embedded-modal .modal-footer,
.is-embedded-modal #modal-product .modal-footer,
.is-embedded-modal #modal-new-client .modal-footer {
  flex-shrink: 0 !important;
  position: static !important;
  background: #ffffff !important;
  border-top: 1px solid var(--gray-200) !important;
  padding: 0.85rem 1.5rem !important;
  z-index: 100 !important;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05) !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 0.75rem !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
.is-embedded-modal .modal-footer button,
.is-embedded-modal .modal-footer .btn,
.is-embedded-modal #modal-product .modal-footer button,
.is-embedded-modal #modal-product .modal-footer .btn,
.is-embedded-modal #modal-new-client .modal-footer button,
.is-embedded-modal #modal-new-client .modal-footer .btn {
  min-height: 42px !important;
  padding: 0.5rem 1.35rem !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  margin: 0 !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODULE CLIENTS & CRM PRO (DESKTOP & MOBILE)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Modale Nouveau Client (Normalisation SuiviX) */
.client-modal-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-left: 3px solid var(--g700);
  color: var(--gray-900);
  font-weight: 800;
  font-size: 0.92rem;
  padding: 0.6rem 0.85rem;
  border-radius: 8px;
  margin: 1.25rem 0 0.75rem 0;
}
.client-modal-section:first-of-type {
  margin-top: 0;
}
.client-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.client-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.predictive-ltv { color: var(--g700); font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 0.9rem; }
.vision-3d-btn { background: var(--g700); color: #fff; border: none; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 0.7rem; font-weight: 700; transition: var(--transition); }
.vision-3d-btn:hover { background: var(--g800); transform: translateY(-1px); }

.risk-alert { background: rgba(239, 68, 68, 0.05); }
.risk-alert td { border-left: 4px solid #ef4444 !important; }

.pro-card-header { background: rgba(0,0,0,0.02); border-bottom: 1px solid rgba(0,0,0,0.05); }

/* Vision 3D Modal Specifics */
.modal-3d { max-width: 900px; border-radius: 20px; overflow: hidden; }
.vision-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.5rem; }
.vision-section { padding: 1.25rem; border-radius: 16px; background: #fff; border: 1px solid var(--gray-200); box-shadow: var(--shadow-sm); }
.vision-label { font-size: 0.65rem; text-transform: uppercase; color: var(--gray-500); margin-bottom: 1rem; font-weight: 900; letter-spacing: 1px; display: flex; align-items: center; gap: 6px; }
.vision-label svg { color: var(--g600); }

.status-pill { padding: 2px 8px; border-radius: 12px; font-size: 0.7rem; font-weight: 700; }

/* Client Details Modal */
.history-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.history-table th { text-align: left; padding: 8px; border-bottom: 2px solid var(--gray-100); color: var(--gray-500); }
.history-table td { padding: 8px; border-bottom: 1px solid var(--gray-50); }

.tab-btn { background: none; border: none; padding: 8px 16px; font-weight: 700; cursor: pointer; color: var(--gray-400); border-bottom: 2px solid transparent; }
.tab-btn.active { color: var(--g700); border-bottom-color: var(--g700); }

.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* Mini Dashboard Styles */
.mini-dashboard {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.dash-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}
.dash-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
}
.dash-title {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--gray-900);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.top-client-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--gray-50);
}
.top-client-item:last-child { border-bottom: none; }
.client-rank {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--g100);
  color: var(--g700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 800;
}
.client-bar-wrap { flex: 1; height: 8px; background: var(--gray-100); border-radius: 4px; overflow: hidden; margin-top: 4px; }
.client-bar { height: 100%; background: linear-gradient(90deg, var(--g600), var(--g400)); border-radius: 4px; }

/* ── BASE DESKTOP KPIS & DASHBOARD ── */
.clients-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}
.mini-dashboard-analysis-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  flex: 1;
  align-items: center;
}
@media(max-width: 1100px) {
  .clients-kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .mini-dashboard { grid-template-columns: 1fr; }
  .mini-dashboard-analysis-inner { grid-template-columns: 1fr; }
}

/* Barre de filtres clients */
.clients-filter-bar {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.clients-filter-bar .filter-btn-group {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ADAPTATIONS MOBILES SPÉCIFIQUES À LA PAGE CLIENTS */
@media (max-width: 768px) {
  .clients-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
    margin-bottom: 0.85rem !important;
    width: 100% !important;
  }
  .clients-kpi-grid .kpi-card:nth-child(2),
  .clients-kpi-grid .kpi-card:nth-child(4),
  .clients-kpi-grid .kpi-card:nth-child(5) {
    display: none !important;
  }
  .clients-kpi-grid .kpi-card {
    padding: 0.65rem 0.8rem !important;
    border-radius: 10px !important;
    border: 1px solid var(--gray-200) !important;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    min-height: auto !important;
  }
  .clients-kpi-grid .kpi-card:first-child {
    border-left: 3px solid var(--g700, #05603a) !important;
  }
  .clients-kpi-grid .kpi-card:nth-child(3) {
    border: 1px solid #fee2e2 !important;
    border-left: 3px solid #ef4444 !important;
    background: #fffafa !important;
  }
  .clients-kpi-grid .kpi-card > div:first-child {
    margin-bottom: 0.35rem !important;
    gap: 0.5rem !important;
  }
  .clients-kpi-grid .kpi-card > div:first-child > div:first-child {
    width: 32px !important;
    height: 32px !important;
  }
  .clients-kpi-grid .kpi-card > div:first-child svg {
    width: 16px !important;
    height: 16px !important;
  }
  .clients-kpi-grid .kpi-card div:has(> div:nth-child(2)) > div:first-child {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
  }
  .clients-kpi-grid .kpi-card div:has(> div:nth-child(2)) > div:nth-child(2) {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
  }
  .clients-kpi-grid .kpi-card > div:last-child {
    font-size: 0.68rem !important;
  }

  .mini-dashboard {
    display: none !important;
  }

  /* 4. FILTRES & RECHERCHE NATIVE CLIENTS */
  .main > .page-body > .card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  .main > .page-body > .card > .card-header {
    padding: 0 0 0.6rem 0 !important;
    border-bottom: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
  }
  .main > .page-body > .card > .card-header .card-title,
  .card-header .card-title {
    display: none !important;
  }
  .clients-filter-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }
  .clients-filter-bar > div:first-child {
    width: 100% !important;
    position: relative !important;
  }
  .clients-filter-bar input {
    width: 100% !important;
    border-radius: 10px !important;
    border: 1px solid var(--gray-300) !important;
    background: #ffffff !important;
    min-height: 42px !important;
    font-size: 16px !important;
    padding: 0.5rem 0.75rem 0.5rem 2.4rem !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
  }
  .clients-filter-bar .filter-btn-group {
    display: flex !important;
    gap: 0.4rem !important;
    overflow-x: auto !important;
    width: 100% !important;
    padding: 2px 0 4px 0 !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 !important;
  }
  .clients-filter-bar .filter-btn-group::-webkit-scrollbar {
    display: none !important;
  }
  .clients-filter-bar .filter-btn-group .btn {
    flex-shrink: 0 !important;
    min-height: 36px !important;
    padding: 0.35rem 0.75rem !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    touch-action: manipulation !important;
  }

  /* 5. CARTES CLIENTS TACTILES 2 LIGNES (DA SUIVIX) */
  .clients-table-wrap {
    background: transparent !important;
    border: none !important;
    width: 100% !important;
    overflow-x: hidden !important;
    padding: 0 !important;
  }
  .clients-table-wrap table,
  .clients-table-wrap tbody {
    display: block !important;
    width: 100% !important;
    border: none !important;
  }
  .clients-table-wrap thead {
    display: none !important;
  }
  .clients-table-wrap tbody tr {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "client amount"
      "contact status" !important;
    gap: 4px 10px !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
    margin-bottom: 8px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    width: 100% !important;
    transition: background 0.15s ease !important;
  }
  .clients-table-wrap tbody tr:active {
    background: var(--gray-50) !important;
  }
  .clients-table-wrap tbody tr td {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    box-sizing: border-box !important;
  }

  /* Ligne 1 Haut Gauche : Avatar + Nom Client */
  .clients-table-wrap tbody tr td:first-child {
    grid-area: client !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
  }
  .clients-table-wrap tbody tr td:first-child > div {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    min-width: 0 !important;
  }
  .clients-table-wrap tbody tr td:first-child > div > div:first-child {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.8rem !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
  }
  .clients-table-wrap tbody tr td:first-child > div > div:last-child {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
  }
  .clients-table-wrap tbody tr td:first-child > div > div:last-child > div:first-child {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    color: var(--gray-900) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .clients-table-wrap tbody tr td:first-child > div > div:last-child > div:last-child {
    display: none !important;
  }

  /* Ligne 1 Haut Droite : CA Cumulé HT */
  .clients-table-wrap tbody tr td:nth-child(4) {
    grid-area: amount !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: var(--gray-900) !important;
    text-align: right !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
  }

  /* Ligne 2 Bas Gauche : Téléphone / Contact */
  .clients-table-wrap tbody tr td:nth-child(2) {
    grid-area: contact !important;
    font-size: 0.74rem !important;
    color: var(--gray-500) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
  }
  .clients-table-wrap tbody tr td:nth-child(2) > div {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.5rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
  }
  .clients-table-wrap tbody tr td:nth-child(2) > div > div:last-child {
    display: none !important;
  }

  /* Ligne 2 Bas Droite : Statut Solde / Impayé */
  .clients-table-wrap tbody tr td:nth-child(5) {
    grid-area: status !important;
    text-align: right !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    white-space: nowrap !important;
  }
  .clients-table-wrap tbody tr td:nth-child(5) > div {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }
  .clients-table-wrap tbody tr td:nth-child(5) > div > div:first-child {
    display: none !important;
  }
  .clients-table-wrap tbody tr td:nth-child(5) span {
    height: 20px !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    margin: 0 !important;
    line-height: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
  }

  /* Masquage des colonnes secondaires non vitales */
  .clients-table-wrap tbody tr td:nth-child(3),
  .clients-table-wrap tbody tr td:nth-child(6),
  .clients-table-wrap tbody tr td:nth-child(7) {
    display: none !important;
  }
}

/* ── Universal Stock Badges & Indicators ── */
.stock-wh-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--gray-100);
  color: var(--gray-800);
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid var(--gray-200);
}
.stock-wh-pill svg {
  color: var(--g700);
  flex-shrink: 0;
}
.stock-multi-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 100px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid #bfdbfe;
}
.stock-subrow-indicator {
  color: var(--gray-400);
  font-weight: 700;
  margin-right: 4px;
  display: inline-block;
}
.stock-item-subrow {
  background: #fafbfc;
}
.stock-item-subrow:hover {
  background: #f1f5f9 !important;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   MODULE ÉQUIPE (Gestion d'Équipe & Modales Associées) - RESPONSIVE & DA
   ========================================================================== */

/* Bannière Pro & Quota */
.team-pro-banner {
  background: linear-gradient(135deg, var(--g900), var(--g700));
  color: #fff;
  padding: 1.5rem;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.team-pro-banner-content {
  flex: 1 1 300px;
}
.team-pro-title {
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 0.25rem;
  color: #ffffff;
}
.team-pro-desc {
  opacity: 0.85;
  font-size: 0.88rem;
  margin: 0;
  color: #ffffff;
}
.team-quota-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.team-quota-pill {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.6rem 1.25rem;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.88rem;
  flex-wrap: wrap;
}
.team-quota-plan {
  font-weight: 700;
  color: #fff;
}
.team-quota-badge {
  font-weight: 800;
  white-space: nowrap !important;
}
.team-quota-temp-badge {
  background: rgba(245, 158, 11, 0.25);
  color: #fef3c7;
  border: 1px solid rgba(245, 158, 11, 0.4);
  white-space: nowrap !important;
}

/* Grille & Cartes Utilisateurs */
.grid-users {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}
.user-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: var(--transition);
}
.user-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.user-card-expired {
  opacity: 0.8;
  border-color: var(--red) !important;
}
.user-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.user-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--g100);
  color: var(--g800);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.user-avatar-expired {
  background: #fee2e2 !important;
  color: #b91c1c !important;
}
.user-info {
  flex: 1;
  min-width: 0;
}
.user-name {
  font-weight: 700;
  color: var(--gray-900);
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-email {
  font-size: 0.8rem;
  color: var(--gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-header .badge {
  flex-shrink: 0;
  white-space: nowrap !important;
}

.user-card-section {
  border-top: 1px solid var(--gray-100);
  padding-top: 1rem;
}
.user-section-title {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  letter-spacing: 0.04em;
}
.stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.stat-box {
  background: var(--gray-50);
  padding: 0.75rem;
  border-radius: 10px;
  text-align: center;
  border: 1px solid var(--gray-100);
}
.stat-val {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--g800);
}
.stat-lbl {
  font-size: 0.65rem;
  text-transform: uppercase;
  color: var(--gray-400);
  letter-spacing: 0.05em;
  margin-top: 0.2rem;
}
.user-card-footer {
  border-top: 1px solid var(--gray-100);
  padding-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  align-items: center;
  margin-top: auto;
}
.user-card-footer .badge-linked {
  margin-right: auto;
  white-space: nowrap !important;
}
.user-card-footer .btn-declare {
  margin-right: auto;
  white-space: nowrap !important;
}
.btn-delete-user {
  color: var(--red) !important;
  border-color: var(--red) !important;
  white-space: nowrap !important;
}
.btn-delete-user:hover {
  background: #fef2f2 !important;
}
.btn-perms-user {
  white-space: nowrap !important;
}
.badge-expired {
  background: #fee2e2 !important;
  color: #b91c1c !important;
  border: 1px solid #fca5a5 !important;
  white-space: nowrap !important;
}
.badge-temp-auditor {
  background: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid #fde68a !important;
  white-space: nowrap !important;
}

/* Modales d'Équipe (Général) */
.modal-team-user,
.modal-team-employee {
  max-width: 500px;
}
.modal-team-perms {
  max-width: 640px;
}
.modal-header-gradient {
  background: linear-gradient(135deg, var(--g700), var(--g800));
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 24px 24px 0 0;
  border-bottom: none;
}
.modal-title-white {
  color: #ffffff !important;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.modal-close-white {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.modal-body-scroll {
  padding: 0;
  overflow-y: auto;
  max-height: calc(90vh - 140px);
  -webkit-overflow-scrolling: touch;
}
.modal-footer-styled {
  padding: 1.25rem 2.5rem;
  border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
  border-radius: 0 0 24px 24px;
}
.btn-team-submit {
  background: var(--g800) !important;
  border-radius: 100px !important;
  padding: 0.5rem 1.5rem !important;
  font-weight: 700 !important;
}
.team-modal-intro {
  font-size: 0.95rem;
  color: var(--gray-600);
  margin-bottom: 1.5rem;
  line-height: 1.5;
}
.team-section-banner {
  background: var(--g700);
  color: #ffffff;
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: 1.25rem;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.team-field-hint {
  font-size: 0.75rem;
  color: var(--gray-500);
  margin-top: 0.4rem;
}
.team-temp-notice {
  margin-top: 1rem;
  background: var(--amber-50, #fffbeb);
  padding: 1.25rem;
  border-radius: 12px;
  border: 1px solid var(--amber-200, #fde68a);
}
.team-temp-label {
  color: var(--amber-800, #92400e) !important;
}
.team-temp-desc {
  font-size: 0.8rem;
  color: var(--amber-800, #92400e);
  margin-top: 0.6rem;
  margin-bottom: 0;
  line-height: 1.4;
}
.form-input-readonly {
  background: var(--gray-50) !important;
  cursor: default;
}

/* Grille & Lignes de Permissions (#modal-permissions) */
.perm-table-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.perm-header-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 0.5rem;
  padding: 0 1rem 0.5rem 1rem;
  font-weight: 800;
  color: var(--gray-500);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.perm-header-col {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.perm-header-icon {
  flex-shrink: 0;
}
.perm-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 0.5rem;
  align-items: center;
  padding: 0.6rem 0.75rem;
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: 12px;
  font-weight: 600;
  color: var(--gray-900);
  transition: all 0.2s;
}
.perm-row:hover {
  background: #fff;
  border-color: var(--g200, #a7f3d0);
  box-shadow: var(--shadow-sm);
}
.perm-module-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.perm-module-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.9rem;
}
.perm-module-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.perm-icon-blue { background: #eff6ff; color: #2563eb; }
.perm-icon-amber { background: #fffbeb; color: #d97706; }
.perm-icon-green { background: #f0fdf4; color: #16a34a; }
.perm-icon-gray { background: var(--gray-100); color: var(--gray-700); }
.perm-icon-white { background: #fff; color: #166534; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

.perm-check-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
  touch-action: manipulation;
  margin: 0;
}
.perm-check-cell input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--g600);
  touch-action: manipulation;
}
.perm-check-cell-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.perm-check-cell-disabled input[type="checkbox"] {
  cursor: not-allowed;
}
.perm-row-accounting {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7) !important;
  border-color: #86efac !important;
}
.perm-module-accounting-title {
  color: #166534;
  font-weight: 700;
}
.perm-accounting-notice {
  font-size: 0.75rem;
  color: #166534;
  background: #f0fdf4;
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid #86efac;
  margin-top: 0.75rem;
  line-height: 1.5;
}

.btn-export-csv svg {
  vertical-align: text-bottom;
  margin-right: 4px;
}
/* ==========================================================================
   MODULE ÉQUIPE - RÈGLES RESPONSIVES MOBILE (<= 768px & <= 480px)
   ========================================================================== */
@media (max-width: 768px) {
  /* Topbar Équipe */
  .btn-export-csv {
    display: none !important;
  }

  /* Bannière Pro Équipe */
  .team-pro-banner {
    padding: 1.25rem 1rem !important;
    border-radius: 14px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.85rem !important;
  }
  .team-pro-banner-content {
    flex: 0 0 auto !important;
    width: 100% !important;
  }
  .team-pro-title {
    font-size: 1.1rem !important;
  }
  .team-pro-desc {
    font-size: 0.82rem !important;
  }
  .team-quota-wrapper {
    width: 100% !important;
  }
  .team-quota-pill {
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: space-between !important;
    padding: 0.6rem 0.85rem !important;
    font-size: 0.8rem !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255, 255, 255, 0.16) !important;
  }

  /* Grille des Membres */
  .grid-users {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .user-card {
    padding: 1.15rem 1rem !important;
    border-radius: 14px !important;
  }
  .user-header {
    gap: 0.75rem !important;
  }
  .user-avatar {
    width: 42px !important;
    height: 42px !important;
    font-size: 1.05rem !important;
  }
  .user-name {
    font-size: 0.95rem !important;
  }
  .user-email {
    font-size: 0.78rem !important;
  }
  .user-card-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.6rem !important;
  }
  .user-card-footer .badge-linked {
    margin-right: 0 !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 0.4rem 0.75rem !important;
    font-size: 0.8rem !important;
  }
  .user-card-footer .btn {
    width: 100% !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: manipulation !important;
    font-size: 0.88rem !important;
    border-radius: 8px !important;
  }

  /* Modales d'Équipe Mobile (Bottom Sheet / Fullscreen) */
  #modal-user .modal,
  #modal-declare-employee .modal,
  #modal-permissions .modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
  }

  #modal-user .modal-header,
  #modal-declare-employee .modal-header,
  #modal-permissions .modal-header {
    padding-top: max(0.9rem, env(safe-area-inset-top, 0px)) !important;
    border-radius: 0 !important;
    flex-shrink: 0 !important;
  }
  #modal-user .modal-header .btn-icon,
  #modal-declare-employee .modal-header .btn-icon,
  #modal-permissions .modal-header .btn-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: manipulation !important;
  }

  #modal-user .modal-body,
  #modal-declare-employee .modal-body,
  #modal-permissions .modal-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    max-height: none !important;
    padding: 0 !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #modal-user .modal-inner-padding,
  #modal-declare-employee .modal-inner-padding,
  #modal-permissions .modal-inner-padding {
    padding: 1.25rem 1rem !important;
  }

  #modal-user .modal-footer,
  #modal-declare-employee .modal-footer,
  #modal-permissions .modal-footer {
    padding-bottom: max(0.85rem, env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 0 !important;
    flex-shrink: 0 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    display: flex !important;
    gap: 0.6rem !important;
  }

  #modal-user .modal-footer .btn,
  #modal-declare-employee .modal-footer .btn,
  #modal-permissions .modal-footer .btn {
    flex: 1 1 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0.5rem 1rem !important;
    touch-action: manipulation !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
  }

  /* Anti-Zoom iOS Safari & Sizing */
  #modal-user input,
  #modal-user select,
  #modal-declare-employee input,
  #modal-declare-employee select,
  #modal-permissions input {
    font-size: 16px !important;
  }

  #modal-user .form-row,
  #modal-declare-employee .form-row {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  /* Bannières de sections dans les modales mobiles (DA SuiviX sobre) */
  .team-section-banner {
    background: transparent !important;
    color: var(--gray-900) !important;
    padding: 0 !important;
    margin: 1.25rem 0 0.75rem 0 !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    border-bottom: 2px solid var(--g100) !important;
    padding-bottom: 0.35rem !important;
    border-radius: 0 !important;
  }
  .team-section-banner svg {
    color: var(--g700) !important;
  }

  /* Modale Permissions sur Mobile */
  .perm-header-row {
    padding: 0 0.5rem 0.4rem 0.5rem !important;
    font-size: 0.72rem !important;
    grid-template-columns: 1fr 48px 48px !important;
  }
  .perm-row {
    grid-template-columns: 1fr 48px 48px !important;
    padding: 0.5rem 0.5rem !important;
  }
  .perm-module-title {
    font-size: 0.85rem !important;
    white-space: normal !important;
    line-height: 1.25 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
  .perm-module-icon {
    width: 28px !important;
    height: 28px !important;
  }
  .perm-module-icon svg {
    width: 15px !important;
    height: 15px !important;
  }
  .perm-check-cell {
    min-width: 44px !important;
    min-height: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .perm-check-cell input[type="checkbox"] {
    min-width: 22px !important;
    min-height: 22px !important;
    width: 22px !important;
    height: 22px !important;
  }
}

@media (max-width: 480px) {
  .user-header {
    flex-wrap: wrap !important;
  }
  .user-header .badge {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    margin-top: 0.25rem !important;
  }
  .perm-header-row {
    grid-template-columns: 1.5fr 1fr 1fr !important;
  }
  .perm-row {
    grid-template-columns: 1.5fr 1fr 1fr !important;
  }
}

/* ==========================================================================
   MODULE EMPLOYÉS (RH & PLANNING) - BASE & DESKTOP
   ========================================================================== */
.day-date {
  display: block;
  font-size: 0.65rem;
  opacity: 0.7;
  font-weight: 500;
  margin-top: 2px;
}
.day-tab {
  padding: 0.6rem 1.25rem;
  border: 1px solid var(--gray-200);
  background: #fff;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.15s;
  min-width: 85px;
  text-align: center;
  font-family: inherit;
}
.day-tab:hover {
  border-color: var(--accent);
  background: var(--gray-25, #fafafa);
}
.day-tab.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.day-tab.active .day-date {
  opacity: 1;
}
.day-tabs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  scrollbar-width: none;
}
.day-tabs::-webkit-scrollbar {
  display: none;
}

/* Onglets du Module Employés */
.emp-tabs-bar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.emp-tabs-bar::-webkit-scrollbar {
  display: none;
}
.emp-tabs-bar .btn {
  white-space: nowrap;
}

/* Titres de section dans les modales Employés */
.emp-modal-section-title {
  background: var(--g700);
  color: #ffffff;
  font-weight: 800;
  font-size: 1rem;
  margin-bottom: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.planning-week-card {
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.planning-nav-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.planning-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
}
.planning-toolbar-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.kpi-abs {
  color: var(--amber);
}
.kpi-unjust {
  color: var(--red);
}

/* Modales Standards Employés */
.emp-modal-sm { max-width: 440px; border-radius: 24px; overflow: hidden; }
.emp-modal-md { max-width: 480px; border-radius: 24px; overflow: hidden; }
.emp-modal-lg { max-width: 540px; border-radius: 24px; overflow: hidden; }
.emp-modal-xl { max-width: 640px; border-radius: 24px; overflow: hidden; }

.emp-modal-header {
  background: linear-gradient(135deg, var(--g700), var(--g800));
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 24px 24px 0 0;
  border-bottom: none;
  padding: 1.25rem 1.75rem;
}
.emp-modal-title {
  color: #ffffff;
  font-weight: 800;
  font-size: 1.15rem;
}
.emp-modal-body {
  padding: 1.5rem;
}
.emp-modal-footer {
  padding: 1.2rem 1.75rem;
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
}

/* Base Desktop Employés & Absences */
.emp-main-info .emp-job-badge,
.emp-status-badge,
.emp-mobile-label {
  display: none;
}
.emp-col-actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.emp-col-actions .btn-icon {
  color: var(--gray-700);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  cursor: pointer;
}
.emp-col-actions .btn-icon.text-error {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.2);
}
.emp-account-badge {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.emp-account-badge .badge {
  padding: 0.2rem 0.45rem;
  font-size: 0.65rem;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.emp-account-badge .btn-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  font-size: 0.75rem;
}

.abs-col-actions {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}
.abs-col-actions .btn-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #ef4444;
  cursor: pointer;
}

/* ==========================================================================
   MODULE EMPLOYÉS - RÈGLES RESPONSIVES MOBILE (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {
  /* Topbar Employés */
  .btn-export-csv {
    display: none !important;
  }
  .topbar-right .btn-primary {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0.4rem 0.85rem !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: manipulation !important;
  }

  /* KPIs Employés (Grille 2x2 compacte) */
  .kpi-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
    margin-bottom: 0.85rem !important;
  }
  .kpi-grid .kpi-card {
    padding: 0.65rem 0.85rem !important;
    border-radius: 12px !important;
    min-height: auto !important;
    box-sizing: border-box !important;
  }
  .kpi-grid .kpi-label {
    font-size: 0.72rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .kpi-grid .kpi-value {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    margin: 0.2rem 0 !important;
  }

  /* Onglets Principaux Employés sur Mobile */
  .emp-tabs-bar {
    display: flex !important;
    width: 100% !important;
    gap: 4px !important;
    background: var(--gray-100) !important;
    padding: 3px !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }
  .emp-tabs-bar .btn {
    flex: 1 1 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.78rem !important;
    padding: 0 0.5rem !important;
    border-radius: 8px !important;
    border: none !important;
    box-shadow: none !important;
    touch-action: manipulation !important;
  }
  .emp-tabs-bar .btn.btn-primary {
    background: #ffffff !important;
    color: var(--g800) !important;
    font-weight: 800 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
  }
  .emp-tabs-bar .btn.btn-ghost {
    background: transparent !important;
    color: var(--gray-600) !important;
    font-weight: 600 !important;
  }

  /* Transformation du Tableau Employés en Cartes Tactiles */
  #view-employees .table-wrap {
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
  }
  #view-employees table,
  #view-employees tbody,
  #view-employees tr.emp-row-card {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #view-employees thead {
    display: none !important;
  }
  #view-employees tr.emp-row-card {
    background: #ffffff !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: 14px !important;
    padding: 1rem !important;
    margin-bottom: 0.85rem !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.6rem !important;
  }
  #view-employees td {
    padding: 0 !important;
    border: none !important;
    font-size: 0.85rem !important;
  }
  #view-employees .emp-col-main {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid var(--gray-100) !important;
    padding-bottom: 0.5rem !important;
  }
  #view-employees .emp-main-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }
  #view-employees .emp-main-info strong {
    font-size: 1.05rem !important;
    color: var(--gray-900) !important;
    font-weight: 800 !important;
  }
  #view-employees .emp-main-info .emp-job-badge {
    display: inline-block !important;
    font-size: 0.78rem !important;
    color: var(--gray-500) !important;
    font-weight: 600 !important;
  }
  #view-employees .emp-status-badge {
    display: block !important;
  }
  #view-employees .emp-mobile-label {
    display: inline !important;
    font-weight: 600 !important;
    color: var(--gray-500) !important;
    font-size: 0.8rem !important;
  }
  #view-employees .emp-col-job,
  #view-employees .emp-col-hire,
  #view-employees .emp-col-status {
    display: none !important;
  }
  #view-employees .emp-col-contract,
  #view-employees .emp-col-hours,
  #view-employees .emp-col-gross,
  #view-employees .emp-col-net {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  #view-employees .emp-col-actions {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-top: 0.25rem !important;
    padding-top: 0.5rem !important;
    border-top: 1px solid var(--gray-100) !important;
  }
  #view-employees .emp-col-actions .btn-icon {
    min-height: 44px !important;
    height: 44px !important;
    flex: 1 1 0 !important;
    width: auto !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: manipulation !important;
  }
  #view-employees .emp-account-badge {
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    flex: 1 1 auto !important;
  }
  #view-employees .emp-account-badge .badge {
    height: 44px !important;
    padding: 0 0.65rem !important;
    display: inline-flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    font-size: 0.78rem !important;
  }
  #view-employees .emp-account-badge .btn-icon {
    min-height: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    width: 44px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: manipulation !important;
  }

  /* Transformation du Tableau Absences en Cartes Tactiles */
  #view-absences .table-wrap {
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
  }
  #view-absences table,
  #view-absences tbody,
  #view-absences tr.abs-row-card {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #view-absences thead {
    display: none !important;
  }
  #view-absences tr.abs-row-card {
    background: #ffffff !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: 14px !important;
    padding: 1rem !important;
    margin-bottom: 0.85rem !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  #view-absences td {
    padding: 0 !important;
    border: none !important;
    font-size: 0.85rem !important;
  }
  #view-absences .card-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
    padding: 1rem !important;
  }
  #view-absences .card-header .btn-primary {
    min-height: 44px !important;
    height: 44px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #view-absences .abs-col-main {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid var(--gray-100) !important;
    padding-bottom: 0.5rem !important;
  }
  #view-absences .abs-main-info {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }
  #view-absences .abs-col-reason {
    display: none !important;
  }
  #view-absences .abs-col-start,
  #view-absences .abs-col-end,
  #view-absences .abs-col-justified,
  #view-absences .abs-col-status {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  #view-absences .abs-col-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    border-top: 1px solid var(--gray-100) !important;
    padding-top: 0.5rem !important;
  }
  #view-absences .abs-col-actions .btn-icon {
    min-height: 44px !important;
    height: 44px !important;
    width: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Planning & Calendrier sur Mobile */
  .planning-week-card {
    padding: 1rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.85rem !important;
    align-items: stretch !important;
  }
  .planning-nav-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }
  .planning-nav-row .btn {
    min-height: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: manipulation !important;
  }
  .day-tabs {
    width: 100% !important;
    display: flex !important;
    gap: 0.4rem !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
  }
  .day-tab {
    flex: 0 0 72px !important;
    min-width: 72px !important;
    min-height: 48px !important;
    padding: 0.45rem 0.5rem !important;
    box-sizing: border-box !important;
    touch-action: manipulation !important;
  }

  /* Barre d'outils Planning */
  .planning-toolbar {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    align-items: stretch !important;
    padding: 1rem !important;
  }
  .planning-toolbar-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }
  .planning-toolbar-actions .btn {
    min-height: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.78rem !important;
    touch-action: manipulation !important;
  }
  .planning-toolbar-actions .btn.btn-primary {
    grid-column: span 2 !important;
  }

  /* Timeline interne avec défilement autonome */
  .timeline-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 12px !important;
    max-width: 100% !important;
  }
  .timeline-header,
  .timeline-row {
    min-width: 750px !important;
  }
  .timeline-label-col {
    width: 130px !important;
    padding: 0.75rem 0.5rem !important;
    font-size: 0.7rem !important;
  }

  /* Postes & Règles de Pauses */
  #view-postes .card-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
    padding: 1rem !important;
  }
  #view-postes .card-header .btn-primary {
    min-height: 44px !important;
    height: 44px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #view-postes .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #view-postes .table-wrap table {
    min-width: 600px !important;
  }

  /* ========================================================================
     MODALES EMPLOYÉS MOBILE (PLEIN ÉCRAN / BOTTOM-SHEET & ANTI-ZOOM)
     ======================================================================== */
  #modal-save-template,
  #modal-templates,
  #modal-emp,
  #modal-absence,
  #modal-shift,
  #modal-job,
  #modal-break-rule,
  #modal-generate-schedule,
  #modal-generate-result {
    padding: 0 !important;
    align-items: flex-end !important;
  }

  #modal-save-template .modal,
  #modal-templates .modal,
  #modal-emp .modal,
  #modal-absence .modal,
  #modal-shift .modal,
  #modal-job .modal,
  #modal-break-rule .modal,
  #modal-generate-schedule .modal,
  #modal-generate-result .modal {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #modal-save-template .modal-header,
  #modal-templates .modal-header,
  #modal-emp .modal-header,
  #modal-absence .modal-header,
  #modal-shift .modal-header,
  #modal-job .modal-header,
  #modal-break-rule .modal-header,
  #modal-generate-schedule .modal-header,
  #modal-generate-result .modal-header {
    border-radius: 0 !important;
    padding: calc(0.85rem + env(safe-area-inset-top, 0px)) 1rem 0.85rem 1rem !important;
    flex-shrink: 0 !important;
  }

  #modal-save-template .modal-body,
  #modal-templates .modal-body,
  #modal-emp .modal-body,
  #modal-absence .modal-body,
  #modal-shift .modal-body,
  #modal-job .modal-body,
  #modal-break-rule .modal-body,
  #modal-generate-schedule .modal-body,
  #modal-generate-result .modal-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 1rem !important;
    max-height: none !important;
  }

  #modal-save-template .modal-footer,
  #modal-templates .modal-footer,
  #modal-emp .modal-footer,
  #modal-absence .modal-footer,
  #modal-shift .modal-footer,
  #modal-job .modal-footer,
  #modal-break-rule .modal-footer,
  #modal-generate-schedule .modal-footer,
  #modal-generate-result .modal-footer {
    padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0px)) 1rem !important;
    display: flex !important;
    gap: 0.6rem !important;
    flex-shrink: 0 !important;
    background: #ffffff !important;
    border-top: 1px solid var(--gray-200) !important;
  }

  #modal-save-template .modal-footer .btn,
  #modal-templates .modal-footer .btn,
  #modal-emp .modal-footer .btn,
  #modal-absence .modal-footer .btn,
  #modal-shift .modal-footer .btn,
  #modal-job .modal-footer .btn,
  #modal-break-rule .modal-footer .btn,
  #modal-generate-schedule .modal-footer .btn,
  #modal-generate-result .modal-footer .btn {
    flex: 1 1 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: manipulation !important;
    border-radius: 8px !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
  }

  /* Anti-Zoom iOS Safari & Sizing */
  #modal-save-template input,
  #modal-save-template select,
  #modal-templates input,
  #modal-emp input,
  #modal-emp select,
  #modal-absence input,
  #modal-absence select,
  #modal-shift input,
  #modal-shift select,
  #modal-job input,
  #modal-job select,
  #modal-break-rule input,
  #modal-break-rule select {
    font-size: 16px !important;
  }

  /* Empilement des form-row dans les modales */
  #modal-emp .form-row,
  #modal-absence .form-row,
  #modal-job .form-row,
  #modal-break-rule .form-row {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  /* Titres de section dans les modales Employés (DA sobre SuiviX) */
  .emp-modal-section-title {
    background: transparent !important;
    color: var(--gray-900) !important;
    padding: 0 !important;
    margin: 1.25rem 0 0.75rem 0 !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    border-bottom: 2px solid var(--g100) !important;
    padding-bottom: 0.35rem !important;
    border-radius: 0 !important;
  }
}

/* ========================================================================
   MODULE CALENDRIER EMPLOYÉS (calendrier.html)
   ======================================================================== */

/* Variables de couleurs des événements */
:root {
  --cal-rdv: #3B82F6;
  --cal-arret_maladie: #EF4444;
  --cal-arret_accident: #B91C1C;
  --cal-conge_paye: #10B981;
  --cal-conge_sans_solde: #F59E0B;
  --cal-rtt: #8B5CF6;
  --cal-formation: #06B6D4;
  --cal-astreinte: #EC4899;
  --cal-autre: #6B7280;
}

/* Grille Calendrier Desktop */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-header-row {
  margin-bottom: 0.5rem;
}
.cal-header-day {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gray-500);
  padding: 0.5rem 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cal-header-sat { color: #F59E0B; }
.cal-header-sun { color: #EF4444; }

.cal-cell {
  min-height: 110px;
  background: #fff;
  border: 1px solid var(--gray-100);
  border-radius: 10px;
  padding: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.cal-cell:hover {
  border-color: var(--g500);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.12);
}
.cal-cell.today {
  border-color: var(--g600);
  background: rgba(16, 185, 129, 0.04);
}
.cal-cell.other-month {
  background: var(--gray-25);
  opacity: 0.55;
}
.cal-cell.weekend {
  background: #fafafa;
}
.cal-cell.selected-day {
  border-color: var(--g600);
  box-shadow: 0 0 0 2px var(--g500);
  background: rgba(16, 185, 129, 0.08);
}
.cal-day-num {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gray-700);
  margin-bottom: 4px;
}
.cal-cell.today .cal-day-num {
  color: var(--g700);
  font-weight: 800;
}
.cal-cell.selected-day .cal-day-num {
  color: var(--g700);
}

.cal-event {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  margin-bottom: 2px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: opacity 0.15s;
}
.cal-event:hover { opacity: 0.85; }
.cal-event.all-day { opacity: 0.95; }
.cal-more {
  font-size: 0.62rem;
  color: var(--gray-500);
  font-weight: 600;
  cursor: pointer;
  margin-top: 2px;
}

/* Pastilles d'événements pour mobile */
.cal-dots-container {
  display: none;
  gap: 3px;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding: 2px 0;
}
.cal-event-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Barre de Contrôles du Calendrier */
.cal-controls-card {
  padding: 1rem 1.25rem;
}
.cal-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.cal-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.cal-nav .btn-nav-arrow {
  min-width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
}
.cal-month-label {
  font-weight: 800;
  font-size: 1.1rem;
  min-width: 170px;
  text-align: center;
  color: var(--gray-900);
}
.cal-view-selector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.cal-view-label {
  font-size: 0.78rem;
  color: var(--gray-500);
  font-weight: 600;
}

/* Filtres Employés */
.emp-filter-bar {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.emp-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.8rem;
  border-radius: 20px;
  border: 1px solid var(--gray-200);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  background: #fff;
  touch-action: manipulation;
}
.emp-pill:hover {
  border-color: var(--g500);
}
.emp-pill.active {
  background: var(--g700);
  color: #fff;
  border-color: var(--g700);
}
.emp-pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

/* Légende */
.cal-legend-card {
  padding: 0.75rem 1.25rem;
}
.cal-legend-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}
.cal-legend-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--gray-700);
  white-space: nowrap;
}
.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.dot-rdv { background: var(--cal-rdv); }
.dot-arret-maladie { background: var(--cal-arret_maladie); }
.dot-arret-accident { background: var(--cal-arret_accident); }
.dot-conge-paye { background: var(--cal-conge_paye); }
.dot-conge-sans-solde { background: var(--cal-conge_sans_solde); }
.dot-rtt { background: var(--cal-rtt); }
.dot-formation { background: var(--cal-formation); }
.dot-astreinte { background: var(--cal-astreinte); }
.dot-autre { background: var(--cal-autre); }

.cal-check-label {
  margin: 0 !important;
  font-weight: 600 !important;
}
.btn-delete-ev {
  margin-right: auto;
  display: none;
}
.btn-delete-ev svg {
  vertical-align: text-bottom;
  margin-right: 3px;
}
.cal-agenda-time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cal-agenda-empty-text {
  margin-bottom: 0.6rem;
}
.btn-agenda-add-empty {
  touch-action: manipulation;
  min-height: 38px;
}

/* Bloc Agenda du Jour Mobile */
.cal-day-agenda {
  display: none;
  margin-top: 1rem;
}
.cal-agenda-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 0.75rem;
}
.cal-agenda-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--gray-900);
}
.cal-agenda-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.cal-agenda-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-left: 4px solid var(--g600);
  border-radius: 8px;
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  cursor: pointer;
  transition: background 0.15s;
  touch-action: manipulation;
}
.cal-agenda-card:active {
  background: var(--gray-50);
}
.cal-agenda-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}
.cal-agenda-card-title {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--gray-900);
}
.cal-agenda-card-emp {
  font-size: 0.75rem;
  color: var(--gray-500);
  font-weight: 600;
}
.cal-agenda-card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: var(--gray-600);
  margin-top: 0.2rem;
}
.cal-agenda-empty {
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--gray-500);
  font-size: 0.85rem;
}

/* Modale Événement */
.modal.event-form {
  max-width: 640px;
}
.cal-modal-section-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--gray-900);
  padding-bottom: 0.35rem;
  margin: 1.25rem 0 0.75rem 0;
  border-bottom: 2px solid var(--g100);
}
.cal-modal-section-title:first-child {
  margin-top: 0;
}
.cal-allday-check-wrap {
  margin-bottom: 1rem;
  padding: 0.65rem 0.85rem;
  background: var(--gray-50);
  border-radius: 8px;
  border: 1px solid var(--gray-200);
}

/* ========================================================================
   RESPONSIVE MOBILE CALENDRIER (@media (max-width: 768px))
   ======================================================================== */
@media (max-width: 768px) {
  .cal-controls-card {
    padding: 0.75rem 0.85rem !important;
  }
  .cal-controls-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }
  .cal-nav {
    justify-content: space-between !important;
    width: 100% !important;
  }
  .cal-nav .btn {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 0.5rem 0.85rem !important;
    touch-action: manipulation !important;
  }
  .cal-month-label {
    font-size: 1rem !important;
    min-width: 130px !important;
    flex: 1 1 auto !important;
  }
  .cal-view-selector {
    width: 100% !important;
    justify-content: space-between !important;
  }
  .cal-view-selector .btn {
    flex: 1 1 0 !important;
    min-height: 44px !important;
    text-align: center !important;
    justify-content: center !important;
    touch-action: manipulation !important;
  }

  /* Filtre employé mobile horizontal défilant */
  .emp-filter-bar {
    overflow-x: auto !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 4px !important;
  }
  .emp-filter-bar::-webkit-scrollbar {
    display: none !important;
  }
  .emp-pill {
    flex-shrink: 0 !important;
    min-height: 44px !important;
    padding: 0.45rem 0.85rem !important;
    box-sizing: border-box !important;
  }

  /* Légende mobile défilante horizontalement */
  .cal-legend-card {
    padding: 0.65rem 0.85rem !important;
  }
  .cal-legend-container {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 2px !important;
    gap: 0.75rem !important;
  }
  .cal-legend-container::-webkit-scrollbar {
    display: none !important;
  }

  /* Grille Calendrier Mobile */
  .cal-grid {
    gap: 2px !important;
  }
  .cal-header-day {
    padding: 0.35rem 0 !important;
    font-size: 0.65rem !important;
  }
  .cal-cell {
    min-height: 52px !important;
    height: 52px !important;
    padding: 3px 2px !important;
    align-items: center !important;
    border-radius: 6px !important;
    touch-action: manipulation !important;
  }
  .cal-day-num {
    font-size: 0.75rem !important;
    margin-bottom: 1px !important;
    text-align: center !important;
  }
  .cal-cell.today .cal-day-num {
    background: var(--g700);
    color: #fff !important;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50%;
    margin: 0 auto;
  }
  .cal-cell.selected-day {
    border-color: var(--g600) !important;
    background: rgba(16, 185, 129, 0.12) !important;
  }
  .cal-cell.selected-day .cal-day-num {
    font-weight: 800 !important;
  }

  /* Sur mobile, masquer les longs blocs textuels et afficher les pastilles */
  .cal-event,
  .cal-more {
    display: none !important;
  }
  .cal-dots-container {
    display: flex !important;
  }

  /* Agenda du Jour Mobile Actif */
  .cal-day-agenda {
    display: block !important;
  }

  /* Modale Événement Plein Écran Mobile */
  #modal-event {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  #modal-event .modal {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  #modal-event .modal-header {
    border-radius: 0 !important;
    padding: calc(0.85rem + env(safe-area-inset-top, 0px)) 1rem 0.85rem 1rem !important;
    flex-shrink: 0 !important;
  }
  #modal-event .modal-body {
    padding: 1rem !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: none !important;
  }
  #modal-event .modal-body > div {
    padding: 0 !important;
  }
  #modal-event .modal-footer {
    border-radius: 0 !important;
    padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0px)) 1rem !important;
    background: #fff !important;
    border-top: 1px solid var(--gray-200) !important;
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 0.5rem !important;
    flex-shrink: 0 !important;
  }
  #modal-event .modal-footer .btn {
    width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    touch-action: manipulation !important;
  }
  #modal-event input,
  #modal-event select,
  #modal-event textarea {
    font-size: 16px !important;
    min-height: 44px !important;
  }
  #modal-event .form-row {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  #modal-event .cal-allday-check-wrap {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }
  #modal-event .form-check {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }
  #modal-event .form-check input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    cursor: pointer !important;
  }
}

/* ==========================================================================
   MODULE COMPTABILITÉ & CONFORMITÉ FISCALE (comptabilite.html)
   ========================================================================== */

/* ── ONGLETS COMPTABILITÉ ── */
.acc-tabs {
  display: flex;
  gap: .375rem;
  background: var(--gray-100);
  padding: .3rem;
  border-radius: 10px;
  margin-bottom: 1.5rem;
  border: 1px solid var(--gray-200);
  width: fit-content;
}
.acc-tab {
  background: transparent;
  border: none;
  border-radius: 7px;
  padding: .45rem 1.1rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--gray-500);
  cursor: pointer;
  transition: all .18s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  touch-action: manipulation;
}
.acc-tab:hover {
  background: rgba(255,255,255,.7);
  color: var(--gray-900);
}
.acc-tab.active {
  background: #fff;
  color: var(--g800);
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.tab-panel {
  display: none;
}
.tab-panel.active {
  display: block;
}

/* ── BADGES COMPTABILITÉ ── */
.badge-paid        { background: #dcfce7; color: #166534; }
.badge-unpaid      { background: #fee2e2; color: #991b1b; }
.badge-partial     { background: #fef3c7; color: #92400e; }
.badge-invoice     { background: #e0f2fe; color: #075985; }
.badge-credit_note { background: #fee2e2; color: #991b1b; }
.badge-paid-exp    { background: #dcfce7; color: #166534; }
.badge-to_pay      { background: #fef3c7; color: #92400e; }
.badge-to_verify   { background: #f3f4f6; color: #374151; }
.badge-no-invoice  { background: #f9fafb; color: #9ca3af; border: 1px dashed #d1d5db; }
.badge-unfinalized { background: #f9fafb; color: #9ca3af; border: 1px dashed #d1d5db; }

/* ── RÉSUMÉ TVA ── */
.tva-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.tva-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.tva-card.primary {
  background: linear-gradient(135deg, var(--g900), var(--g700));
  border-color: transparent;
}
.tva-card.primary.tva-credit {
  background: linear-gradient(135deg, #7f1d1d, #991b1b);
}
.tva-val-collected  { color: #1d4ed8; }
.tva-val-paid       { color: #166534; }
.tva-sub-unpaid     { color: #991b1b; }
.tva-val-deductible { color: #b45309; }
.tva-card-label {
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gray-400);
}
.tva-card.primary .tva-card-label {
  color: rgba(255,255,255,.6);
}
.tva-card-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--gray-900);
}
.tva-card.primary .tva-card-value {
  color: #fff;
}
.tva-card-sub {
  font-size: .72rem;
  color: var(--gray-400);
}
.tva-card.primary .tva-card-sub {
  color: rgba(255,255,255,.5);
}

.tva-note-card {
  padding: 1.5rem;
  margin-top: 1.5rem;
}
.tva-note-title {
  font-size: .85rem;
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 1rem;
}
.tva-note-body {
  font-size: .85rem;
  color: var(--gray-600);
  line-height: 1.7;
  display: grid;
  gap: .5rem;
}
.tva-note-footer {
  font-size: .75rem;
  color: var(--gray-400);
  border-top: 1px solid var(--gray-100);
  padding-top: .75rem;
  margin-top: .25rem;
}

/* ── FILTRES ── */
.filters-bar {
  display: flex;
  gap: .5rem;
  align-items: center;
  padding: .75rem 1rem;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-100);
  flex-wrap: wrap;
}
.filters-bar input,
.filters-bar select {
  height: 34px;
  padding: 0 .65rem;
  font-size: .8rem;
  border-radius: 7px;
}
.filter-date-input {
  width: 145px;
}
.filter-period-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--gray-600);
}
.filter-arrow {
  color: var(--gray-400);
  font-size: .85rem;
}

/* ── TABLES COMPTABILITÉ ── */
.acc-mobile-card-cell {
  display: none !important;
}
.acc-cat-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gray-600);
  background: var(--gray-100);
}
.acc-client-cell {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn-download-pdf {
  padding: .3rem .6rem;
  font-size: .75rem;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.btn-pj-btn {
  padding: .25rem .55rem;
  font-size: .72rem;
}
.acc-pj-desktop-wrap {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}
.acc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .83rem;
}
.acc-table th {
  background: var(--gray-50);
  padding: .65rem 1rem;
  text-align: left;
  font-size: .68rem;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}
.acc-table td {
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--gray-50);
  color: var(--gray-800);
  vertical-align: middle;
}
.acc-table tbody tr:hover td {
  background: var(--gray-50);
}
.acc-table .mono {
  font-family: 'Courier New', monospace;
  font-size: .75rem;
  color: var(--gray-500);
}

.hash-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: #f0fdf4;
  border: 1px solid #86efac;
  color: #166534;
  border-radius: 5px;
  padding: .15rem .5rem;
  font-size: .65rem;
  font-family: monospace;
}
.no-data {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--gray-400);
  font-style: italic;
  font-size: .85rem;
}

/* ── LOADING SKELETON ── */
.skel {
  background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-50) 50%, var(--gray-100) 75%);
  background-size: 200% 100%;
  animation: skel 1.5s infinite;
  border-radius: 5px;
  height: 14px;
}

/* ── COCKPIT INTÉGRITÉ & CONFORMITÉ ── */
.integrity-kpis-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}
.integrity-kpi-card {
  background: #FFFFFF;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.integrity-kpi-card:hover {
  border-color: var(--gray-300);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transform: translateY(-1px);
}
.kpi-icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kpi-icon-circle.green  { background: #ECFDF5; color: #10B981; }
.kpi-icon-circle.blue   { background: #EFF6FF; color: #3B82F6; }
.kpi-icon-circle.purple { background: #FAF5FF; color: #8B5CF6; }

.kpi-info {
  flex: 1;
  min-width: 0;
}
.kpi-title {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.kpi-value {
  font-size: 15px;
  font-weight: 800;
  font-family: var(--font-heading);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpi-value.text-green   { color: #10B981; }
.kpi-value.text-heading { color: var(--gray-900); }
.kpi-value.text-purple  { color: #8B5CF6; }

/* ── SPLIT GRID : TERMINAL CRYPTO + ESPACE CABINET ── */
.integrity-split-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 16px;
  margin-bottom: 22px;
}
.terminal-card {
  background: #0D261B;
  color: #FFFFFF;
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(16,185,129,0.25);
  box-shadow: 0 4px 16px rgba(13,38,27,0.25);
}
.terminal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 8px;
}
.terminal-title {
  font-size: 11px;
  font-family: var(--font-mono, monospace);
  color: #84E1BC;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.5px;
}
.terminal-badge {
  font-size: 9.5px;
  background: rgba(16,185,129,0.2);
  color: #34D399;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  border: 1px solid rgba(52,211,153,0.3);
}
.terminal-body {
  font-size: 11.5px;
  font-family: var(--font-mono, monospace);
  color: #94A3B8;
  line-height: 1.65;
  margin-bottom: 12px;
}
.terminal-label {
  color: #6EE7B7;
  font-weight: 700;
}
.terminal-hash {
  color: #E2E8F0;
  word-break: break-all;
  margin: 2px 0 6px 0;
  background: rgba(0,0,0,0.3);
  padding: 5px 8px;
  border-radius: 4px;
  border: 1px dashed rgba(255,255,255,0.15);
  cursor: pointer;
  transition: all .2s;
  font-size: 11px;
}
.terminal-hash:hover {
  border-color: #34D399;
  color: #FFFFFF;
  background: rgba(16,185,129,0.1);
}
.terminal-row {
  margin-top: 4px;
}
.terminal-val {
  color: #E2E8F0;
}
.terminal-status-ok {
  color: #34D399;
  font-weight: 700;
}
.accountant-footer-note {
  font-size: 11px;
  color: var(--gray-400);
  text-align: center;
  font-weight: 500;
  margin-top: 14px;
}
.accountant-access-list {
  display: grid;
  gap: 8px;
}
.accountant-empty-item {
  border-style: dashed;
  background: #FAFAFA;
}
.accountant-empty-content {
  min-width: 0;
  flex: 1;
}
.accountant-empty-title {
  color: var(--gray-700);
  font-size: 12px;
}
.accountant-empty-sub {
  color: var(--gray-400);
  font-size: 10.5px;
}
.accountant-invite-btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
}
.accountant-user-info {
  min-width: 0;
  flex: 1;
}
.accountant-user-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.accountant-user-email {
  font-size: 10px;
  color: var(--gray-500);
  font-weight: 500;
}
.btn-export-csv-submit {
  background: var(--g900);
  border-color: var(--g900);
  font-weight: 700;
}
.terminal-footer {
  font-size: 10.5px;
  color: #84E1BC;
  font-family: var(--font-mono, monospace);
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}

.accountant-card {
  background: #FFFFFF;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.accountant-header {
  font-size: 12px;
  font-weight: 800;
  color: var(--suivx-forest-deep, #133E2B);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.accountant-item {
  background: #F8FAFC;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.accountant-item strong {
  font-size: 12.5px;
  color: var(--gray-900);
}
.accountant-item .subtext {
  font-size: 10.5px;
  color: var(--gray-500);
  margin-top: 2px;
}
.btn-generate-fec {
  background: #EBF3EE;
  color: var(--suivx-forest-deep, #133E2B);
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 6px;
  border: 1px solid rgba(19,62,43,0.15);
  cursor: pointer;
  transition: all .18s;
  touch-action: manipulation;
}
.btn-generate-fec:hover {
  background: var(--suivx-forest-deep, #133E2B);
  color: #FFFFFF;
}
.badge-connected {
  font-size: 11px;
  font-weight: 700;
  color: #10B981;
  background: #ECFDF5;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #BBF7D0;
}
.accountant-footer-note {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--gray-100);
  font-size: 11px;
  color: var(--gray-500);
  text-align: center;
}

/* Modale Export */
.export-format-group {
  margin-bottom: 1.25rem;
}
.export-format-label {
  font-weight: 700;
}
.export-format-options {
  display: grid;
  gap: 0.5rem;
}
.export-format-card {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 0.15s, background 0.15s;
}
.export-format-card.fec {
  border: 1px solid #86efac;
  background: #f0fdf4;
}
.export-format-card.csv {
  border: 1px solid var(--gray-200);
  background: #fff;
}
.export-format-radio {
  margin-top: 0.2rem;
  width: 18px;
  height: 18px;
}
.export-format-title-fec {
  color: #166534;
  font-size: 0.88rem;
}
.export-format-desc-fec {
  font-size: 0.75rem;
  color: #166534;
  opacity: 0.85;
  margin: 0.15rem 0 0 0;
  line-height: 1.4;
}
.export-format-title-csv {
  color: var(--gray-900);
  font-size: 0.88rem;
}
.export-format-desc-csv {
  font-size: 0.75rem;
  color: var(--gray-500);
  margin: 0.15rem 0 0 0;
  line-height: 1.4;
}
.fec-info-badge {
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 8px;
  padding: .75rem 1rem;
  font-size: .75rem;
  color: #166534;
  margin-top: .5rem;
}
.btn-export-fec-submit {
  background: #166534;
  border-color: #166534;
  font-weight: 700;
}
.btn-export-fec-topbar {
  background: #166534;
  border-color: #166534;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.acc-mobile-card-cell {
  display: none;
}
.cell-flex-gap {
  display: flex;
  gap: .4rem;
  align-items: center;
}
.cell-flex-wrap-gap {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}
.client-cell {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn-action-compact {
  padding: .3rem .6rem !important;
  font-size: .75rem !important;
}
.btn-pj-compact {
  padding: .25rem .55rem !important;
  font-size: .72rem !important;
}
.v-align-bottom {
  vertical-align: text-bottom;
}
.mr-3 {
  margin-right: 3px;
}
.font-bold {
  font-weight: 700;
}
.font-semibold {
  font-weight: 600;
}
.font-extrabold {
  font-weight: 800;
}
.text-g800 {
  color: var(--g800);
}
.text-g700 {
  color: var(--g700);
}
.text-gray-900 {
  color: var(--gray-900);
}
.text-gray-600 {
  color: var(--gray-600);
}
.text-gray-500 {
  color: var(--gray-500);
}
.text-xs {
  font-size: .75rem;
}
.text-right {
  text-align: right;
}
.mb-125 {
  margin-bottom: 1.25rem;
}
.badge-unfinalized {
  background: #f9fafb;
  color: #9ca3af;
  border: 1px dashed #d1d5db;
}
.card-table-container {
  padding: 0;
  overflow: hidden;
}
.modal-export-dialog {
  max-width: 480px;
}
.export-format-options {
  display: grid;
  gap: 0.5rem;
}
.format-choice-card {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--gray-200);
  background: #fff;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.format-choice-card.active {
  border-color: #86efac;
  background: #f0fdf4;
}
.format-fec-title {
  color: #166534;
  font-size: 0.88rem;
}
.format-fec-desc {
  font-size: 0.75rem;
  color: #166534;
  opacity: 0.85;
  margin: 0.15rem 0 0 0;
  line-height: 1.4;
}
.format-csv-title {
  color: var(--gray-900);
  font-size: 0.88rem;
}
.format-csv-desc {
  font-size: 0.75rem;
  color: var(--gray-500);
  margin: 0.15rem 0 0 0;
  line-height: 1.4;
}
.fec-info-banner {
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 8px;
  padding: .75rem 1rem;
  font-size: .75rem;
  color: #166534;
  margin-top: .5rem;
}
.tva-note-card {
  padding: 1.5rem;
  margin-top: 1.5rem;
}
.tva-note-title {
  font-size: .85rem;
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 1rem;
}
.tva-note-body {
  font-size: .85rem;
  color: var(--gray-600);
  line-height: 1.7;
  display: grid;
  gap: .5rem;
}
.tva-positive-text {
  color: #166534;
}
.tva-negative-text {
  color: #991b1b;
}
.tva-legal-footer {
  font-size: .75rem;
  color: var(--gray-400);
  border-top: 1px solid var(--gray-100);
  padding-top: .75rem;
  margin-top: .25rem;
}
.skel-w80 {
  width: 80%;
}
.skel-w50 {
  width: 50%;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.hidden {
  display: none !important;
}
.tva-summary-error {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2rem;
  color: var(--gray-400);
}

/* ── COMPTABILITÉ RESPONSIVE ── */
@media (max-width: 900px) {
  .integrity-kpis-grid {
    grid-template-columns: 1fr;
  }
  .integrity-split-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  /* Topbar */
  .topbar {
    padding: 0 1rem;
  }
  .page-title .desktop-text {
    display: none;
  }
  .page-title .mobile-text {
    display: inline;
  }
  .btn-export-csv-topbar {
    display: none !important;
  }
  .btn-export-fec-topbar {
    min-height: 44px;
    padding: 0 0.75rem;
    touch-action: manipulation;
  }
  .btn-export-fec-topbar .desktop-text {
    display: none;
  }
  .btn-export-fec-topbar .mobile-text {
    display: inline;
  }

  /* Cockpit & Grids */
  .integrity-kpis-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 12px;
  }
  .integrity-kpi-card {
    padding: 12px 14px;
    gap: 12px;
  }
  .kpi-icon-circle {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }
  .integrity-split-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 16px;
  }
  .terminal-card {
    padding: 14px 16px;
  }
  .terminal-title {
    font-size: 10px;
  }
  .terminal-hash {
    font-size: 10px;
    padding: 4px 6px;
  }
  .terminal-footer {
    font-size: 9.5px;
  }
  .accountant-card {
    padding: 14px 16px;
  }

  /* Onglets segmentés défilables */
  .acc-tabs {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 1rem;
    padding: 0.25rem;
  }
  .acc-tabs::-webkit-scrollbar {
    display: none;
  }
  .acc-tab {
    flex: 1 1 0;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    text-align: center;
    justify-content: center;
    font-size: 0.78rem;
  }

  /* Barre de filtres */
  .filters-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.5rem;
    padding: 0.75rem;
    align-items: center;
  }
  .filter-period-label {
    grid-column: 1 / -1;
    margin-bottom: 0.1rem;
  }
  .filter-date-input {
    width: 100% !important;
    min-height: 44px;
    font-size: 16px !important;
  }
  .filter-arrow {
    text-align: center;
  }
  .btn-clear-filters {
    grid-column: 1 / -1;
    min-height: 40px;
    width: 100%;
    margin-top: 0.25rem;
    touch-action: manipulation;
  }

  /* Transformation des tables en cartes tactiles */
  .acc-desktop-col {
    display: none !important;
  }
  .acc-mobile-card-cell {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    border: none !important;
  }
  .table-wrap {
    overflow-x: visible;
  }
  .acc-table thead {
    display: none;
  }
  .acc-table,
  .acc-table tbody,
  .acc-table tr,
  .acc-table td {
    display: block;
    width: 100%;
  }
  .acc-table tbody {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem;
  }
  .acc-table tbody tr {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: background 0.15s;
    touch-action: manipulation;
  }
  .acc-table tbody tr:active {
    background: var(--gray-50);
  }
  .acc-table td {
    padding: 0 !important;
    border: none !important;
    text-align: left !important;
  }

  /* Cartes Factures Vente Mobile */
  .acc-sale-row-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
  }
  .acc-sale-ref-wrap {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
  }
  .acc-sale-ref {
    font-weight: 700;
    color: var(--g800);
    font-size: 0.92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .acc-sale-amount-ttc {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--g700);
    white-space: nowrap;
  }
  .acc-sale-row-mid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--gray-600);
  }
  .acc-sale-client {
    font-weight: 600;
    color: var(--gray-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .acc-sale-row-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--gray-200);
  }
  .btn-download-pdf-mobile {
    min-height: 44px !important;
    padding: 0 0.85rem !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    touch-action: manipulation !important;
  }

  /* Cartes Factures Achat Mobile */
  .acc-purch-row-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
  }
  .acc-purch-label {
    font-weight: 700;
    color: var(--gray-900);
    font-size: 0.92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .acc-purch-amount-ttc {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--g700);
    white-space: nowrap;
  }
  .acc-purch-row-mid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--gray-600);
  }
  .acc-purch-supplier {
    color: var(--gray-700);
  }
  .acc-purch-row-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--gray-200);
  }
  .btn-download-pj-mobile {
    min-height: 44px !important;
    padding: 0 0.85rem !important;
    font-size: 0.82rem !important;
    touch-action: manipulation !important;
  }

  /* Grille Résumé TVA */
  .tva-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
  }
  .tva-card {
    padding: 0.85rem 1rem;
  }
  .tva-card.primary {
    grid-column: span 2;
  }
  .tva-card-value {
    font-size: 1.25rem;
  }

  /* Modale Export Mobile */
  #modal-export {
    align-items: flex-end !important;
  }
  #modal-export .modal {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 90vh !important;
    padding-bottom: env(safe-area-inset-bottom, 16px) !important;
  }
  #modal-export .modal-footer {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  #modal-export .modal-footer .btn {
    width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    touch-action: manipulation !important;
  }
  #modal-export input,
  #modal-export select {
    font-size: 16px !important;
    min-height: 44px !important;
  }
  #modal-export .form-row {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  .export-format-card {
    min-height: 52px;
  }
}

/* ── DOCUMENTATION & CENTRE D'AIDE RESPONSIVE ── */
.docs-layout {
  display: flex;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  align-items: flex-start;
}

.docs-nav {
  position: sticky;
  top: 2rem;
  width: 250px;
  flex-shrink: 0;
  background: #ffffff;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--gray-200);
}
.docs-nav-title {
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--gray-900);
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.docs-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.docs-nav li {
  margin-bottom: 0.5rem;
}
.docs-nav a {
  text-decoration: none;
  color: var(--gray-600);
  font-weight: 500;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  padding: 0.45rem 0.65rem;
  border-radius: 6px;
  min-height: 38px;
  font-size: 0.9rem;
}
.docs-nav a:hover,
.docs-nav a.active {
  color: var(--g800);
  background: rgba(82, 168, 126, 0.08);
  font-weight: 700;
}

.docs-container {
  flex: 1;
  min-width: 0;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--gray-200);
  overflow: hidden;
}

.docs-header {
  background: linear-gradient(135deg, var(--g700), var(--g800));
  color: #ffffff !important;
  padding: 3rem 2rem;
  text-align: center;
  position: relative;
}
.docs-header h1 {
  margin: 0 0 0.75rem 0;
  font-size: 2.2rem;
  font-weight: 800;
  color: #ffffff !important;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.docs-header p {
  margin: 0;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 500;
}

.docs-content {
  padding: 2.5rem 3rem;
}

.docs-section {
  margin-bottom: 4rem;
  scroll-margin-top: 2rem;
}
.docs-section h2 {
  color: var(--gray-900);
  margin-bottom: 1.5rem;
  font-size: 1.65rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 2px solid var(--gray-100);
  padding-bottom: 0.5rem;
}
.docs-section h2 svg {
  color: var(--g700);
  flex-shrink: 0;
}

.docs-section h3 {
  color: var(--gray-800);
  font-size: 1.25rem;
  margin: 1.5rem 0 1rem 0;
}

.docs-section p {
  color: var(--gray-600);
  line-height: 1.7;
  margin-bottom: 1rem;
}
.docs-section ul,
.docs-section ol {
  padding-left: 1.5rem;
  color: var(--gray-600);
  margin-bottom: 1.5rem;
}
.docs-section li {
  margin-bottom: 0.75rem;
  line-height: 1.6;
}
.docs-section code {
  background: var(--gray-100);
  color: var(--gray-800);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.85em;
  word-break: break-word;
}

.doc-card {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.doc-card h4 {
  margin: 0 0 0.75rem 0;
  color: var(--gray-900);
}
.doc-card-accent {
  border-left: 4px solid var(--g700);
  background: #ffffff;
}
.doc-card-accent h3,
.doc-card-accent h4 {
  color: var(--g800);
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.doc-card-note {
  font-size: 0.85rem;
  color: var(--gray-600);
  margin-top: 0.5rem;
  background: var(--gray-100);
  padding: 0.6rem 1rem;
  border-radius: 6px;
  line-height: 1.5;
}

.badge-tag {
  background: rgba(82, 168, 126, 0.15);
  color: var(--g800);
  border: 1px solid rgba(82, 168, 126, 0.3);
  padding: 0.2rem 0.6rem;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-left: 0.5rem;
}

/* Quest Hub & Challenges */
.quest-hub-card {
  background: linear-gradient(135deg, #1f2937, #111827);
  color: #ffffff;
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 3rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  border: 2px solid #10b981;
}
.quest-hub-title {
  margin-top: 0;
  color: #10b981;
  font-size: 1.6rem;
  border-bottom: none;
  padding-bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.quest-hub-desc {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}
.quest-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}

.challenge-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.challenge-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}
.challenge-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}
.challenge-card-badge {
  font-size: 0.7rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}
.challenge-badge-green { color: #a7f3d0; }
.challenge-badge-blue { color: #bfdbfe; }
.challenge-badge-red { color: #fca5a5; }
.challenge-badge-yellow { color: #fde047; }
.challenge-badge-purple { color: #ddd6fe; }
.challenge-card-diff {
  font-size: 0.7rem;
  opacity: 0.8;
}
.challenge-card-title {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  color: #ffffff;
  font-weight: 700;
}
.challenge-card-desc {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
  margin-bottom: 1.25rem;
}
.challenge-card-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  border: none;
  padding: 0.55rem 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.2s ease, filter 0.2s ease;
  min-height: 40px;
}
.challenge-card-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.challenge-card-btn:active {
  transform: translateY(0);
}
.challenge-btn-green { background: #10b981; }
.challenge-btn-blue { background: #3b82f6; }
.challenge-btn-red { background: #ef4444; }
.challenge-btn-yellow { background: #eab308; }
.challenge-btn-purple { background: #8b5cf6; }

/* 4-Step Guide Cards */
.docs-steps-stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 1.25rem;
}
.docs-step-card {
  background: #ffffff;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 1.25rem;
}
.docs-step-header {
  font-weight: 800;
  color: var(--g800);
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.docs-step-num {
  background: var(--g100);
  color: var(--g700);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 800;
  flex-shrink: 0;
}
.docs-step-card ul {
  margin-bottom: 0;
  padding-left: 1.5rem;
}

/* Modale Level-Up & Prérequis de tutorial.js */
.quest-level-up {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
}
.level-up-card {
  background: #ffffff;
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  padding: 2rem 1.75rem;
  width: 420px;
  max-width: 100%;
  text-align: center;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  color: var(--gray-900);
  box-sizing: border-box;
}
.level-up-card .btn {
  min-height: 44px;
  touch-action: manipulation;
  font-weight: 700;
}

/* ── RESPONSIVE MOBILE DOCUMENTATION (<= 768px) ── */
@media (max-width: 768px) {
  .docs-layout {
    flex-direction: column;
    gap: 1rem;
    max-width: 100%;
    margin: 0;
  }

  /* Sommaire Horizontal Mobile Défilable */
  .docs-nav {
    position: sticky;
    top: 52px;
    z-index: 100;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    overflow: hidden;
  }
  .docs-nav-title {
    display: none;
  }
  .docs-nav ul {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    gap: 0.5rem;
    padding-bottom: 2px;
    margin: 0;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .docs-nav ul::-webkit-scrollbar {
    display: none;
  }
  .docs-nav li {
    margin-bottom: 0;
    flex-shrink: 0;
    scroll-snap-align: start;
  }
  .docs-nav a {
    min-height: 44px;
    padding: 0.5rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 600;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    white-space: nowrap;
    touch-action: manipulation;
  }
  .docs-nav a:hover,
  .docs-nav a.active {
    background: var(--g700);
    color: #ffffff;
    border-color: var(--g700);
  }

  .docs-container {
    border-radius: 12px;
  }
  .docs-header {
    padding: 1.75rem 1rem;
  }
  .docs-header h1 {
    font-size: 1.45rem;
    margin-bottom: 0.4rem;
  }
  .docs-header p {
    font-size: 0.95rem;
  }

  .docs-content {
    padding: 1.25rem 0.85rem;
  }

  .docs-section {
    margin-bottom: 2.5rem;
    scroll-margin-top: 110px;
  }
  .docs-section h2 {
    font-size: 1.25rem;
    gap: 0.5rem;
    margin-bottom: 1rem;
    line-height: 1.35;
  }
  .docs-section h3 {
    font-size: 1.1rem;
    margin: 1.25rem 0 0.75rem 0;
  }
  .docs-section ul,
  .docs-section ol {
    padding-left: 1.2rem;
  }

  .doc-card {
    padding: 1rem 0.85rem;
    margin-bottom: 1rem;
    border-radius: 8px;
  }
  .doc-card-note {
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
  }

  .quest-hub-card {
    padding: 1.25rem 0.85rem;
    margin-bottom: 2rem;
    border-radius: 10px;
  }
  .quest-hub-title {
    font-size: 1.25rem;
  }
  .quest-hub-desc {
    font-size: 0.85rem;
    margin-bottom: 1rem;
  }
  .quest-hub-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .challenge-card {
    padding: 1rem;
  }
  .challenge-card-btn {
    min-height: 44px;
    font-size: 0.9rem;
  }

  .docs-steps-stack {
    gap: 0.85rem;
  }
  .docs-step-card {
    padding: 1rem 0.85rem;
  }
  .docs-step-header {
    font-size: 0.9rem;
    line-height: 1.35;
  }

  /* Modale Level Up / Prérequis */
  .level-up-card {
    padding: 1.5rem 1rem;
    width: 100%;
    max-width: calc(100vw - 2rem);
    border-radius: 12px;
  }
  .level-up-card .btn {
    min-height: 44px;
    height: 44px;
    font-size: 0.9rem;
  }

  /* Assistant HUD Tutoriel Mobile */
  .quest-hud {
    top: auto !important;
    bottom: max(12px, env(safe-area-inset-bottom, 12px)) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    padding: 0.85rem 1rem !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4) !important;
    animation: slideUpMobileHud 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28) !important;
  }
  @keyframes slideUpMobileHud {
    from { transform: translateY(120px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
  @keyframes slideDownMobileHud {
    from { transform: translateY(-40px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
  .quest-hud.modal-active,
  body:has(.modal:not([style*="display: none"]):not([style*="display:none"]):not(.quest-level-up), [id^="modal-"]:not([style*="display: none"]):not([style*="display:none"]), .modal-overlay.active) .quest-hud {
    top: max(56px, env(safe-area-inset-top, 56px)) !important;
    bottom: auto !important;
    max-height: 190px !important;
    overflow-y: auto !important;
    animation: slideDownMobileHud 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28) !important;
  }
  .quest-hud h3 {
    font-size: 0.88rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .quest-hud p {
    font-size: 0.8rem !important;
    line-height: 1.35 !important;
    margin-bottom: 0.4rem !important;
  }
  .quest-hud .progress-bar-bg {
    margin-bottom: 0.4rem !important;
    height: 6px !important;
  }
  .quest-hud .hud-actions {
    margin-top: 0.4rem !important;
    padding-top: 0.35rem !important;
  }
  .quest-hud .abandon-btn {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    touch-action: manipulation !important;
    padding: 4px 8px !important;
  }
  .quest-hud.minimized {
    padding: 0.6rem 0.85rem !important;
  }
  .quest-hud.minimized .hud-body,
  .quest-hud.minimized .progress-bar-bg,
  .quest-hud.minimized .hud-actions {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .docs-header {
    padding: 1.5rem 0.75rem;
  }
  .docs-header h1 {
    font-size: 1.3rem;
  }
  .docs-content {
    padding: 1rem 0.65rem;
  }
  .docs-section h2 {
    font-size: 1.15rem;
  }
  .doc-card {
    padding: 0.85rem 0.75rem;
  }
}

/* ── RESPONSIVE MOBILE PARAMÈTRES & FORFAITS (<= 768px) ── */
@media (max-width: 768px) {
  /* Layout global de la page Paramètres */
  .page-parametres .page-body {
    padding: 0.85rem 0.85rem calc(1.5rem + env(safe-area-inset-bottom, 0px)) 0.85rem !important;
    overflow-x: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Topbar Mobile Paramètres */
  .page-parametres .topbar {
    background: #ffffff !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 0.85rem !important;
    height: 56px !important;
    min-height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid var(--gray-200) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
  }
  .page-parametres .topbar-left {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    min-width: 0 !important;
  }
  .page-parametres .page-title {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: var(--gray-900) !important;
    letter-spacing: -0.3px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .page-parametres .topbar-right {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex-shrink: 0 !important;
  }
  .page-parametres #save-btn {
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 0.85rem !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    touch-action: manipulation !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 1px 3px rgba(5, 96, 58, 0.2) !important;
  }
  .page-parametres #topbar-avatar {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 50% !important;
  }

  /* Barre d'Onglets Tactile Intégrale (100% visible sans défilement ni coupure) */
  .page-parametres .settings-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.35rem !important;
    width: 100% !important;
    padding-bottom: 0.65rem !important;
    margin-bottom: 1.25rem !important;
    border-bottom: 1px solid var(--gray-200) !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
  .page-parametres .settings-tabs::-webkit-scrollbar {
    display: none !important;
  }
  .page-parametres .settings-tabs .btn {
    flex: 1 1 calc(33.333% - 0.35rem) !important;
    min-width: calc(30% - 0.35rem) !important;
    max-width: 100% !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 0.35rem !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    touch-action: manipulation !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
  .page-parametres .settings-tabs .btn[style*="display: none"],
  .page-parametres .settings-tabs .btn[style*="display:none"] {
    display: none !important;
  }
  .page-parametres .settings-tabs .btn-ghost {
    background: var(--gray-100) !important;
    color: var(--gray-700) !important;
    border: 1px solid var(--gray-200) !important;
  }
  .page-parametres .settings-tabs .btn-primary {
    background: var(--g700, #05603A) !important;
    color: #ffffff !important;
    border: 1px solid var(--g700, #05603A) !important;
    box-shadow: 0 1px 3px rgba(5, 96, 58, 0.2) !important;
  }

  /* Cartes et Conteneurs Spécifiques Paramètres (Préservation du Visuel Cartes) */
  .page-parametres .card {
    background: #ffffff !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: 12px !important;
    padding: 1.25rem 1rem !important;
    margin-bottom: 1rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .page-parametres .card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 0 0.85rem 0 !important;
    margin-bottom: 1rem !important;
    border-bottom: 1px solid var(--gray-200) !important;
  }
  .page-parametres .card-header .card-title,
  .page-parametres .card-title {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--gray-900) !important;
    line-height: 1.3 !important;
  }

  /* Anti-Zoom Safari iOS & Champs de Formulaires */
  .page-parametres .form-input,
  .page-parametres select.form-input,
  .page-parametres textarea.form-input {
    font-size: 16px !important;
    min-height: 44px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    touch-action: manipulation !important;
    width: 100% !important;
  }
  .page-parametres textarea.form-input {
    min-height: 80px !important;
  }
  .page-parametres .form-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    margin-bottom: 0.75rem !important;
    width: 100% !important;
  }
  .page-parametres .form-group {
    margin-bottom: 0.75rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .page-parametres .form-label {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: var(--gray-700) !important;
    margin-bottom: 0.35rem !important;
    display: block !important;
  }
  .page-parametres .grid-2 {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    width: 100% !important;
  }

  /* ── 1. VUE GÉNÉRAL ── */
  #view-general .card button.btn-primary {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: manipulation !important;
  }
  #view-general .card > div[style*="flex-direction:column"] > div[style*="display:flex"] {
    padding: 0.65rem 0 !important;
    border-bottom: 1px solid var(--gray-100) !important;
    gap: 0.75rem !important;
  }
  #view-general .card > div[style*="flex-direction:column"] > div[style*="display:flex"]:last-child {
    border-bottom: none !important;
  }
  .page-parametres .toggle {
    min-width: 44px !important;
    min-height: 26px !important;
    touch-action: manipulation !important;
    flex-shrink: 0 !important;
  }

  /* ── 2. VUE ENTREPRISE ── */
  #view-company {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
  }
  .page-parametres #schedule-grid,
  .page-parametres .schedule-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.6rem !important;
    width: 100% !important;
  }
  .page-parametres .schedule-day-card {
    display: grid !important;
    grid-template-columns: 50px 1fr auto !important;
    align-items: center !important;
    gap: 0.6rem !important;
    padding: 0.65rem 0.75rem !important;
    border-radius: 8px !important;
    background: var(--gray-50) !important;
    border: 1px solid var(--gray-200) !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }
  .page-parametres .schedule-day-title {
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    color: var(--gray-900) !important;
    margin-bottom: 0 !important;
  }
  .page-parametres .schedule-time-row {
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    min-width: 0 !important;
  }
  .page-parametres .schedule-time-input {
    min-height: 38px !important;
    height: 38px !important;
    font-size: 15px !important;
    padding: 0.2rem 0.35rem !important;
    border-radius: 6px !important;
    border: 1px solid var(--gray-300) !important;
    background: #ffffff !important;
    flex: 1 !important;
    min-width: 0 !important;
    text-align: center !important;
    touch-action: manipulation !important;
  }
  .page-parametres .schedule-time-sep {
    color: var(--gray-400) !important;
    flex-shrink: 0 !important;
  }
  .page-parametres .schedule-closed-label {
    margin-top: 0 !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: var(--gray-600) !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-height: 38px !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }
  .page-parametres .schedule-closed-label input {
    width: 18px !important;
    height: 18px !important;
    accent-color: var(--g700) !important;
  }
  #view-company .card[style*="#ef4444"] {
    border: 1.5px solid #ef4444 !important;
    background: #fff8f8 !important;
  }
  #view-company .card[style*="#ef4444"] button.btn-danger {
    width: 100% !important;
    min-height: 44px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    justify-content: center !important;
    touch-action: manipulation !important;
  }

  /* ── 3. VUE NOTIFICATIONS ── */
  .page-parametres .notif-views-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  #notif-prefs > div {
    padding: 0.75rem 0.85rem !important;
    gap: 0.6rem !important;
  }
  .page-parametres div:has(> button[onclick*="sendTestNotif"]) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.6rem !important;
  }
  .page-parametres button[onclick*="sendTestNotif"] {
    min-height: 44px !important;
    height: 44px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    touch-action: manipulation !important;
    border-radius: 8px !important;
    border: 1px solid var(--gray-200) !important;
    background: var(--gray-50) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .page-parametres #notif-log > div {
    font-size: 0.78rem !important;
    padding: 0.5rem 0 !important;
    gap: 0.4rem !important;
  }

  /* ── 4. VUE FORFAITS & ABONNEMENTS (DA SUIVIX) ── */
  #view-plan .card {
    max-width: 100% !important;
    width: 100% !important;
  }
  .page-parametres .current-plan-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 1.15rem 1rem !important;
    gap: 0.85rem !important;
    border-radius: 12px !important;
    background: var(--g50, #E8F5EE) !important;
    border: 1.5px solid var(--g200, #A7D7B9) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .page-parametres .current-plan-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.75rem !important;
    width: 100% !important;
  }
  .page-parametres .current-plan-avatar {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    flex: 0 0 48px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    background: var(--g700, #05603A) !important;
    color: #ffffff !important;
    box-sizing: border-box !important;
  }
  .page-parametres .current-plan-meta {
    flex: 1 !important;
    min-width: 0 !important;
  }
  .page-parametres .current-plan-modules {
    margin-left: 0 !important;
    text-align: left !important;
    width: 100% !important;
    padding-top: 0.6rem !important;
    border-top: 1px solid rgba(4, 78, 50, 0.12) !important;
  }
  .page-parametres .current-plan-modules > div:last-child {
    justify-content: flex-start !important;
  }
  .page-parametres .plan-action-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.65rem !important;
    margin-top: 1rem !important;
    width: 100% !important;
  }
  .page-parametres .plan-action-buttons .btn {
    width: 100% !important;
    min-height: 46px !important;
    height: 46px !important;
    border-radius: 8px !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    touch-action: manipulation !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .page-parametres .plan-guest-banner {
    padding: 1rem !important;
    border-radius: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .page-parametres .plan-guest-buttons {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 0.5rem !important;
  }
  .page-parametres .plan-guest-buttons .btn {
    width: 100% !important;
    min-height: 44px !important;
    justify-content: center !important;
    touch-action: manipulation !important;
  }

  /* Grille des Forfaits : 1 Colonne Complète sur Smartphone */
  .page-parametres .plan-cards-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    margin-top: 1rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .page-parametres .plan-cards-grid > div {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 1.35rem 1.15rem !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    position: relative !important;
    border: 1.5px solid var(--gray-200) !important;
    background: #ffffff !important;
  }
  .page-parametres .plan-cards-grid > div:nth-child(2) {
    border: 2px solid var(--g600, #044E32) !important;
    background: var(--g50, #E8F5EE) !important;
    box-shadow: 0 4px 14px rgba(4, 78, 50, 0.12) !important;
  }
  .page-parametres .plan-cards-grid > div:nth-child(2)::before {
    content: "Recommandé";
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--g700, #05603A);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 100px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }
  .page-parametres .plan-cards-grid ul {
    margin: 1rem 0 !important;
    gap: 0.5rem !important;
  }
  .page-parametres .plan-cards-grid ul li {
    font-size: 0.85rem !important;
    color: var(--gray-700) !important;
    line-height: 1.35 !important;
  }
  .page-parametres .plan-cards-grid .btn {
    width: 100% !important;
    min-height: 46px !important;
    height: 46px !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    touch-action: manipulation !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .page-parametres .settings-promo-box {
    padding: 1.15rem 1rem !important;
    border-radius: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .page-parametres .promo-input-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.6rem !important;
    width: 100% !important;
  }
  .page-parametres .promo-input-group #input-redeem-code {
    max-width: 100% !important;
    width: 100% !important;
    min-height: 44px !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
  }
  .page-parametres .promo-input-group #btn-apply-code {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    touch-action: manipulation !important;
    justify-content: center !important;
  }

  /* ── 5. MODALE SIMULATEUR DE DEVIS SUR-MESURE ── */
  #modal-custom-quote .custom-quote-modal {
    position: fixed !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    max-height: 94dvh !important;
    border-radius: 16px 16px 0 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  #modal-custom-quote .modal-header {
    padding: max(0.9rem, env(safe-area-inset-top, 0px)) 1rem 0.9rem 1rem !important;
    border-bottom: 1px solid var(--gray-200) !important;
    flex-shrink: 0 !important;
  }
  #modal-custom-quote .modal-body {
    padding: 1rem !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex: 1 1 auto !important;
  }
  #modal-custom-quote .custom-quote-options {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
  }
  #modal-custom-quote .custom-quote-footer {
    padding: 0.85rem 1rem max(0.85rem, env(safe-area-inset-bottom, 0px)) 1rem !important;
    border-top: 1px solid var(--gray-200) !important;
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 0.6rem !important;
    flex-shrink: 0 !important;
    background: #ffffff !important;
  }
  #modal-custom-quote .custom-quote-footer .btn {
    width: 100% !important;
    min-height: 46px !important;
    font-weight: 700 !important;
    font-size: 0.92rem !important;
    touch-action: manipulation !important;
    justify-content: center !important;
  }

  /* ── 6. MODALES DE RÉSILIATION ET 2FA ── */
  .modal-overlay .plan-cancel-modal {
    width: calc(100vw - 2rem) !important;
    max-width: 440px !important;
    padding: 1.5rem 1.15rem !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
    margin: auto !important;
  }
  .modal-overlay .plan-cancel-actions {
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 0.6rem !important;
    width: 100% !important;
  }
  .modal-overlay .plan-cancel-actions .btn {
    width: 100% !important;
    min-height: 46px !important;
    justify-content: center !important;
    touch-action: manipulation !important;
    border-radius: 8px !important;
  }
  .modal-overlay .modal-disable-2fa-card {
    width: calc(100vw - 2rem) !important;
    max-width: 440px !important;
    margin: auto !important;
    border-radius: 16px !important;
  }
  .modal-overlay .modal-disable-2fa-footer {
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 0.6rem !important;
  }
  .modal-overlay .modal-disable-2fa-footer .btn {
    width: 100% !important;
    min-height: 46px !important;
    justify-content: center !important;
    touch-action: manipulation !important;
    border-radius: 8px !important;
  }

  /* ── 7. VUE SÉCURITÉ & 2FA ── */
  #view-security .card {
    max-width: 100% !important;
    width: 100% !important;
  }
  .page-parametres .security-2fa-grid,
  #view-security .security-2fa-grid {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
  }
  #view-security .security-2fa-grid > div {
    padding: 1.15rem 1rem !important;
    border-radius: 10px !important;
  }
  #view-security .security-2fa-grid .btn {
    min-height: 44px !important;
    touch-action: manipulation !important;
  }
  #view-security div:has(> #2fa-status-badge) {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.6rem !important;
    margin-bottom: 1rem !important;
  }
  #view-security div:has(> #2fa-status-badge) > div:last-child {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  #view-security #2fa-totp-box {
    padding: 1.15rem 1rem !important;
  }
  .page-parametres .totp-setup-grid,
  #view-security .totp-setup-grid {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 1rem !important;
    padding: 1rem !important;
  }
  #view-security #totp-qr-img {
    margin: 0 auto !important;
    max-width: 150px !important;
    height: auto !important;
  }
  #view-security #totp-secret-text {
    word-break: break-all !important;
    font-size: 0.8rem !important;
    display: block !important;
    margin: 6px auto !important;
    max-width: 100% !important;
  }
  #view-security .totp-input-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.65rem !important;
    width: 100% !important;
    align-items: stretch !important;
  }
  #view-security #totp-verify-code {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    font-size: 22px !important;
    box-sizing: border-box !important;
  }
  #view-security .totp-input-actions .btn {
    width: 100% !important;
    min-height: 46px !important;
    justify-content: center !important;
    touch-action: manipulation !important;
  }
  #view-security #totp-recovery-codes-list {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.4rem !important;
    font-size: 0.82rem !important;
    padding: 0.75rem !important;
  }
  #view-security #2fa-activation-box {
    padding: 1.15rem 1rem !important;
  }
  #view-security .email-2fa-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.6rem !important;
    width: 100% !important;
  }
  #view-security .email-2fa-actions input {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 46px !important;
    font-size: 18px !important;
    box-sizing: border-box !important;
  }
  #view-security .email-2fa-actions .btn {
    width: 100% !important;
    min-height: 44px !important;
    justify-content: center !important;
    touch-action: manipulation !important;
  }
  #view-security .alert-red button.btn-danger {
    width: 100% !important;
    min-height: 44px !important;
    justify-content: center !important;
    touch-action: manipulation !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
  }
}

/* ── AFFINAGE SMARTPHONE ULTRA-COMPACT (<= 480px) ── */
@media (max-width: 480px) {
  .page-parametres .page-body {
    padding: 0.65rem 0.65rem calc(1.5rem + env(safe-area-inset-bottom, 0px)) 0.65rem !important;
  }
  .page-parametres .card {
    padding: 1rem 0.85rem !important;
  }
  .page-parametres .settings-tabs .btn {
    padding: 0 0.25rem !important;
    font-size: 0.76rem !important;
    min-height: 38px !important;
    height: 38px !important;
  }
  .page-parametres .schedule-day-card {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 0.5rem !important;
  }
  .page-parametres .schedule-time-row {
    justify-content: center !important;
  }
  .page-parametres .schedule-closed-label {
    justify-content: center !important;
  }
  .page-parametres #totp-recovery-codes-list {
    grid-template-columns: 1fr !important;
  }
}