/* ============================================================
   BTP Chantiers – Design System
   ============================================================ */

/* --- Police Inter hébergée en local (aucune dépendance externe) ---
   Fichiers dans /public/fonts. font-display:swap => texte visible
   immédiatement, remplacé par Inter dès qu'elle est chargée. */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:800; font-display:swap; src:url('/fonts/inter-800.woff2') format('woff2'); }

:root {
  --primary:      #f97316;
  --primary-dark: #ea580c;
  --secondary:    #1e40af;
  --success:      #16a34a;
  --danger:       #dc2626;
  --warning:      #d97706;
  --info:         #0891b2;
  --bg:           #f1f5f9;
  --page-bg:      #d8e0ea;
  --card-bg:      #ffffff;
  --sidebar-bg:   #1e293b;
  --sidebar-text: #e2e8f0;
  --sidebar-hover:#334155;
  --border:       #e2e8f0;
  --text:         #0f172a;
  --text-muted:   #475569;
  --text-soft:    #334155;
  --radius:       8px;
  --shadow:       0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:    0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; background: var(--page-bg); color: var(--text); font-size: 14px; font-weight: 400; line-height: 1.55; -webkit-font-smoothing: antialiased; }
/* Les champs de formulaire et boutons n'héritent pas de la police du body : on la force partout. */
input, select, textarea, button, optgroup, option { font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; color: var(--text); line-height: 1.25; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Layout ── */
.app-wrapper   { display: flex; min-height: 100vh; }
.main-content  { flex: 1; margin-left: 240px; display: flex; flex-direction: column; min-height: 100vh; transition: margin .3s; }
.page-content  { padding: 24px; flex: 1; }
.topbar        { background: var(--card-bg); border-bottom: 1px solid var(--border); padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; box-shadow: var(--shadow); }
.topbar-title  { font-size: 18px; font-weight: 600; color: var(--text); }
.topbar-right  { display: flex; align-items: center; gap: 12px; }
.user-badge    { display: flex; align-items: center; gap: 8px; background: var(--bg); padding: 6px 12px; border-radius: 20px; font-size: 13px; color: var(--text-muted); }
.user-badge strong { color: var(--text); }

/* ── Sidebar ── */
.sidebar       { width: 240px; background: var(--sidebar-bg); position: fixed; top: 0; left: 0; height: 100vh; overflow-y: auto; z-index: 100; display: flex; flex-direction: column; }
.sidebar-brand { padding: 20px 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-brand h2 { color: var(--primary); font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.sidebar-brand span { color: var(--sidebar-text); font-size: 11px; display: block; margin-top: 2px; }
.sidebar-nav   { flex: 1; padding: 12px 0; }
.nav-section   { padding: 16px 16px 4px; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #94a3b8; font-weight: 700; }
.nav-item      { display: flex; align-items: center; gap: 10px; padding: 9px 16px; color: var(--sidebar-text); font-size: 13.5px; transition: all .2s; border-left: 3px solid transparent; cursor: pointer; }
.nav-item:hover, .nav-item.active { background: var(--sidebar-hover); color: #fff; border-left-color: var(--primary); text-decoration: none; }
.nav-item svg  { width: 16px; height: 16px; flex-shrink: 0; }
.nav-item.nav-sub { padding-left: 30px; font-size: 13px; opacity: .92; }
.nav-item.nav-sub svg { width: 14px; height: 14px; }
.sidebar-footer { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.08); }

/* ── Cards ── */
.card          { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--border); }
.card-header   { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.card-title    { font-size: 15px; font-weight: 600; color: var(--text); }
.card-body     { padding: 20px; }

/* ── Stats ── */
.stats-grid    { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card     { background: var(--card-bg); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); border: 1px solid var(--border); display: flex; align-items: center; gap: 16px; }
.stat-icon     { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stat-icon svg { width: 24px; height: 24px; }
.stat-icon.orange { background: #fff7ed; color: var(--primary); }
.stat-icon.blue   { background: #eff6ff; color: var(--secondary); }
.stat-icon.green  { background: #f0fdf4; color: var(--success); }
.stat-icon.red    { background: #fef2f2; color: var(--danger); }
.stat-icon.yellow { background: #fefce8; color: var(--warning); }
.stat-value    { font-size: 22px; font-weight: 700; color: var(--text); }
.stat-label    { font-size: 12px; color: var(--text-soft); margin-top: 2px; font-weight: 500; }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--radius); font-size: 13px; font-weight: 500; cursor: pointer; border: none; transition: all .15s; white-space: nowrap; }
.btn svg { width: 14px; height: 14px; }
.btn-primary   { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); text-decoration: none; color: #fff; }
.btn-secondary { background: var(--bg); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--border); text-decoration: none; }
.btn-success   { background: var(--success); color: #fff; }
.btn-success:hover { background: #15803d; text-decoration: none; color: #fff; }
.btn-danger    { background: var(--danger); color: #fff; }
.btn-danger:hover  { background: #b91c1c; text-decoration: none; color: #fff; }
.btn-warning   { background: var(--warning); color: #fff; }
.btn-sm        { padding: 4px 10px; font-size: 12px; }
.btn-group     { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ── Badges ── */
.badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.badge-primary { background: #fff7ed; color: var(--primary); }
.badge-success { background: #f0fdf4; color: var(--success); }
.badge-danger  { background: #fef2f2; color: var(--danger); }
.badge-warning { background: #fefce8; color: var(--warning); }
.badge-info    { background: #ecfeff; color: var(--info); }
.badge-gray    { background: #f1f5f9; color: var(--text-muted); }
.badge-blue    { background: #eff6ff; color: var(--secondary); }

/* ── Alerts ── */
.alert { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 16px; font-size: 13.5px; border-left: 4px solid; }
.alert-success { background: #f0fdf4; border-color: var(--success); color: #166534; }
.alert-error   { background: #fef2f2; border-color: var(--danger);  color: #991b1b; }
.alert-warning { background: #fefce8; border-color: var(--warning); color: #92400e; }
.alert-info    { background: #ecfeff; border-color: var(--info);    color: #155e75; }

/* ── Forms ── */
.form-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group label { font-size: 13px; font-weight: 600; color: var(--text-soft); }
.form-group input, .form-group select, .form-group textarea {
  padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 14px; color: var(--text); background: #fff; transition: border .15s; width: 100%;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(249,115,22,.12);
}
.form-group textarea { resize: vertical; min-height: 90px; }
.form-actions { display: flex; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.form-span2 { grid-column: span 2; }

/* ── Search bar ── */
.search-bar   { background: var(--card-bg); padding: 16px 20px; border-radius: var(--radius); border: 1px solid var(--border); margin-bottom: 20px; }
.search-row   { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.search-group { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 160px; }
.search-group label { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.search-group input, .search-group select {
  padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 13px; background: #fff;
}

/* ── Table ── */
.table-wrapper { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th { background: var(--bg); padding: 10px 12px; text-align: left; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-soft); border-bottom: 2px solid var(--border); white-space: nowrap; }
tbody td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:hover { background: #fafafa; }
tbody tr.row-selected { background: #fef9c3 !important; }
.table-actions { display: flex; gap: 6px; }

/* ── Empty state ── */
.empty-state { text-align: center; padding: 48px 20px; color: var(--text-muted); }
.empty-state svg { width: 48px; height: 48px; margin: 0 auto 12px; display: block; opacity: .3; }
.empty-state h3 { font-size: 15px; margin-bottom: 6px; color: var(--text); }

/* ── Detail grid ── */
.detail-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 16px; }
.detail-row   { display: flex; flex-direction: column; gap: 2px; }
.detail-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-soft); font-weight: 600; }
.detail-value { font-size: 14px; color: var(--text); font-weight: 500; }

/* ── Progress bar ── */
.progress-bar { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 4px; transition: width .5s; }
.progress-fill.green  { background: var(--success); }
.progress-fill.orange { background: var(--warning); }
.progress-fill.red    { background: var(--danger); }

/* ── Login page ── */
.login-page   { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); }
.login-card   { background: #fff; border-radius: 16px; padding: 40px; width: 100%; max-width: 400px; box-shadow: 0 25px 50px rgba(0,0,0,.25); }
.login-logo   { text-align: center; margin-bottom: 28px; }
.login-logo h1 { color: var(--primary); font-size: 22px; font-weight: 700; }
.login-logo p  { color: var(--text-muted); font-size: 13px; margin-top: 4px; }
.login-card .form-group { margin-bottom: 16px; }
.login-card .btn-primary { width: 100%; justify-content: center; padding: 11px; font-size: 14px; }

/* ── Breadcrumb ── */
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-soft); margin-bottom: 16px; }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--primary); }

/* ── Hamburger ── */
.hamburger { display: none; background: none; border: none; cursor: pointer; padding: 4px; border-radius: 6px; }
.hamburger svg { width: 22px; height: 22px; fill: var(--text); }

/* ── Responsive ── */
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); transition: transform .3s; }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; }
  .hamburger { display: inline-flex; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-span2 { grid-column: span 1; }
}

/* ── Utilitaires ── */
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.fw-600 { font-weight: 600; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-16 { margin-bottom: 16px; }
.flex-between { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.gap-8 { gap: 8px; }
.num { font-variant-numeric: tabular-nums; font-family: 'Courier New', monospace; }

/* ── Stat cards cliquables ── */
.stat-link { text-decoration:none; display:flex; transition:transform .15s, box-shadow .15s; }
.stat-link:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.1); text-decoration:none; }
.stat-link:hover .stat-value { color:var(--primary); }
.stat-sub { font-size:11px; color:var(--text-muted); margin-top:2px; }

/* ── Statut badges ── */
.badge-cloture { background:#f0fdf4; color:#16a34a; }

/* ── Documents justificatifs ── */
.doc-card { display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--bg); border-radius:var(--radius); border:1px solid var(--border); margin-bottom:8px; }
.doc-icon { width:36px; height:36px; background:var(--primary); color:#fff; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:16px; }
.doc-info { flex:1; min-width:0; }
.doc-name { font-size:13px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.doc-meta { font-size:11px; color:var(--text-muted); }

/* ── Stats page ── */
.chart-bar-wrap { display:flex; align-items:flex-end; gap:4px; height:160px; padding:0 4px; }
.chart-bar { flex:1; border-radius:4px 4px 0 0; min-width:20px; position:relative; transition:opacity .2s; }
.chart-bar:hover { opacity:.8; }
.chart-bar-label { font-size:10px; text-align:center; margin-top:4px; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rentabilite-table tr.rentable td:first-child { border-left:3px solid var(--success); }
.rentabilite-table tr.depasse td:first-child { border-left:3px solid var(--danger); }

/* ── Bouton retour ── */
.btn-back { display:inline-flex; align-items:center; gap:6px; color:var(--text-muted); font-size:13px; padding:6px 12px; border-radius:var(--radius); border:1px solid var(--border); background:#fff; cursor:pointer; text-decoration:none; transition:all .15s; }
.btn-back:hover { background:var(--bg); color:var(--text); text-decoration:none; border-color:var(--text-muted); }
.btn-back svg { width:14px; height:14px; }

/* ════════════════════════════════════════════════════════════
   SIDEBAR USER + LOGOUT (proportionné)
   ════════════════════════════════════════════════════════════ */
.sidebar-user {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.1);
  margin-top: auto;
}
.user-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0; text-transform: uppercase;
}
.user-info { flex: 1; min-width: 0; }
.user-name { font-size: 13px; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-role { font-size: 10px; margin-top: 2px; }
.user-logout {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.6); background: rgba(255,255,255,.05);
  transition: all .15s; text-decoration: none;
}
.user-logout:hover { background: var(--danger); color: #fff; }
.user-logout svg { width: 16px; height: 16px; }  /* taille fixe — plus de disproportion */

.nav-section-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
  color: rgba(255,255,255,.4); padding: 14px 16px 6px; font-weight: 700;
}
.sidebar-close { display: none; background: none; border: none; color: rgba(255,255,255,.6); font-size: 20px; cursor: pointer; }

/* ════════════════════════════════════════════════════════════
   MOBILE — affichage empilé (max 768px)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .sidebar-close { display: block; }

  /* Tout en une colonne */
  .stats-grid { grid-template-columns: 1fr !important; }
  .form-grid  { grid-template-columns: 1fr !important; }
  .form-span2 { grid-column: span 1 !important; }

  /* Les blocs en grid 2-col passent en 1 col */
  [style*="grid-template-columns:3fr 2fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(auto-fill,minmax(280px,1fr))"] {
    grid-template-columns: 1fr !important;
  }

  /* Lignes de demande de fonds empilées */
  [style*="grid-template-columns:3fr 1.5fr 1fr 1.5fr auto"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:3fr 1.5fr 1fr 1.5fr auto"] button {
    width: 100%;
  }

  /* Tableaux : scroll horizontal */
  .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 600px; }

  /* Barre de recherche empilée */
  .search-row { flex-direction: column; }
  .search-group { width: 100%; flex: 1 1 100% !important; }

  /* Actions de tableau empilées */
  .table-actions { flex-wrap: wrap; gap: 4px; }
  .table-actions .btn, .table-actions form { flex: 0 0 auto; }

  /* Topbar compacte */
  .topbar { padding: 10px 14px; }
  .topbar-title { font-size: 15px; }
  .user-badge span.badge { display: none; }
  .user-badge .text-muted { color: var(--text-muted); }

  /* Cards plus compactes */
  .card-body { padding: 14px; }
  .card-header { padding: 12px 14px; flex-wrap: wrap; gap: 8px; }

  /* KPI stat cards plus petites */
  .stat-card { padding: 14px; }
  .stat-value { font-size: 18px; }

  /* Boutons d'en-tête empilés */
  .flex-between { flex-direction: column; align-items: stretch; }
  .flex-between > .btn, .flex-between .btn-group { width: 100%; }
  .btn-group { display: flex; flex-wrap: wrap; gap: 6px; }
  .btn-group .btn, .btn-group form { flex: 1 1 auto; }
  .btn-group .btn { width: 100%; }

  /* Formulaires pleine largeur */
  .card[style*="max-width"] { max-width: 100% !important; }

  /* Détails en pile */
  .detail-grid { grid-template-columns: 1fr !important; }
}

/* Très petits écrans */
@media (max-width: 480px) {
  .stat-value { font-size: 16px; }
  .main-content { padding: 12px; }
  .breadcrumb { font-size: 12px; }
}

/* ── Overlay mobile sidebar ── */
#sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.5); z-index: 90;
}
#sidebar-overlay.show { display: block; }
@media (max-width: 768px) {
  .sidebar { z-index: 100; }
}

/* ── Sidebar header / logo (taille contrôlée) ── */
.sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px; border-bottom: 1px solid rgba(255,255,255,.1);
}
.sidebar-logo {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 700; color: #fff; min-width: 0;
}
.sidebar-logo svg {
  width: 26px; height: 26px; flex-shrink: 0; color: var(--primary);
}
.sidebar-logo span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ============================================================
   AJUSTEMENTS MOBILE (revue dédiée)
   Complète les règles responsives existantes : confort tactile,
   suppression du zoom automatique iOS, et prise en charge des
   composants récents (encarts partenaires, encart flottant
   catalogue, matrice des droits).
   ============================================================ */
@media (max-width: 768px) {

  /* iOS Safari zoome automatiquement sur un champ dont la police
     est < 16px : on remonte à 16px pour éviter ce recadrage. */
  .form-group input, .form-group select, .form-group textarea,
  .search-group input, .search-group select,
  .lignes-table input, .lignes-table select,
  .cat-price-form-row input, .cat-price-form-row select,
  input[type="text"], input[type="number"], input[type="email"],
  input[type="password"], input[type="date"], select, textarea {
    font-size: 16px;
  }

  /* Cibles tactiles : minimum confortable au doigt */
  .btn { min-height: 40px; padding: 9px 16px; font-size: 14px; }
  .btn-sm { min-height: 36px; padding: 7px 12px; font-size: 13px; }
  .nav-item { padding: 12px 16px; font-size: 14px; }
  input[type="checkbox"], input[type="radio"] { min-width: 20px; min-height: 20px; }

  /* Grilles d'encarts (partenaires, clients, chantiers, fournisseurs)
     → une seule colonne, sinon minmax(300px) déborde sur 360px de large */
  .enc-grid, .cat-layout, .act-grid, .settings-grid, .cat-list {
    grid-template-columns: 1fr !important;
  }
  .enc-card { padding: 14px !important; }
  .enc-card-head { flex-wrap: wrap !important; }
  .enc-roles { flex-direction: row !important; align-items: center !important; }

  /* Encart flottant du catalogue (saisie de devis) : jamais plus large
     que l'écran, et liste limitée en hauteur pour rester atteignable */
  .cat-pop { max-width: calc(100vw - 20px) !important; }
  .cat-pop-list { max-height: 45vh !important; }
  .cat-pop-item { padding: 11px 12px !important; }

  /* Matrice des droits : défilement horizontal maîtrisé */
  .perm-table { min-width: 520px !important; }

  /* Conversion de rôle et cases de rôle : boutons pleine largeur */
  .conv-actions { flex-direction: column !important; align-items: stretch !important; }
  .conv-actions form, .conv-actions .btn { width: 100%; }
  .roles-box { flex-direction: column !important; }
  .role-check { width: 100% !important; }

  /* Encarts d'aide un peu plus compacts */
  .cat-aide, .part-aide, .chantier-info { padding: 10px 12px !important; font-size: 12.5px !important; }

  /* Champ prix + bouton catalogue : le bouton reste accessible */
  .pu-wrap { gap: 6px !important; }
  .pu-cat-btn { min-height: 38px !important; min-width: 40px !important; }

  /* Filtres en pastilles : défilement horizontal plutôt qu'un empilement confus */
  .filtres-scroll { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch;
                    gap: 8px; padding-bottom: 4px; flex-wrap: nowrap !important; }
  .filtres-scroll > * { flex: 0 0 auto; }
}

/* Très petits écrans (≤ 480px) */
@media (max-width: 480px) {
  .enc-card { padding: 12px !important; }
  .enc-name { font-size: 15px !important; }
  .enc-row { font-size: 12.5px !important; }
  .card-header { padding: 10px 12px; }
  .card-body { padding: 12px; }
  .cat-hero { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; padding: 14px 16px !important; }
  .cat-hero .btn { width: 100%; justify-content: center; }
  .table-wrapper table { min-width: 520px; }
  /* Actions d'encart : deux boutons côte à côte plutôt que débordants */
  .enc-actions { flex-wrap: wrap !important; }
  .enc-actions .btn, .enc-actions form { flex: 1 1 calc(50% - 3px); }
  .enc-actions .btn { width: 100%; justify-content: center; }
}

/* Évite l'agrandissement typographique en rotation paysage (iOS) */
html { -webkit-text-size-adjust: 100%; }

/* ============================================================
   TABLEAUX ADAPTATIFS — chaque ligne devient une fiche sur mobile
   Le data-label des cellules est posé automatiquement par le script
   de layout-end.ejs à partir des en-têtes de colonnes.
   ============================================================ */
@media (max-width: 768px) {
  table.table-stack { min-width: 0 !important; width: 100%; border-collapse: separate; border-spacing: 0; }
  table.table-stack thead { display: none; }
  table.table-stack, table.table-stack tbody, table.table-stack tr, table.table-stack td { display: block; }

  table.table-stack tbody tr {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-left: 3px solid #2F6FB0;
    border-radius: 10px;
    padding: 8px 12px;
    margin-bottom: 10px;
    box-shadow: var(--shadow);
  }
  table.table-stack tbody tr:hover { background: var(--card-bg); }

  table.table-stack td {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 5px 0; border: none; text-align: right;
    font-size: 13px;
  }
  table.table-stack td + td { border-top: 1px solid #f1f5f9; }
  table.table-stack td::before {
    content: attr(data-label);
    flex: 0 0 auto; text-align: left;
    font-size: 11.5px; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .3px;
  }
  /* Cellule sans libellé (colonne d'actions) : occupe toute la largeur */
  table.table-stack td[data-label=""]::before,
  table.table-stack td:not([data-label])::before { content: none; }
  table.table-stack td:not([data-label]) { justify-content: flex-end; flex-wrap: wrap; }

  /* Les champs et boutons dans une cellule restent utilisables */
  table.table-stack td input, table.table-stack td select { max-width: 60%; }
  table.table-stack td .btn { flex: 0 0 auto; }

  /* Le conteneur ne défile plus horizontalement pour ces tableaux */
  .table-wrapper:has(table.table-stack) { overflow-x: visible; }
}

/* ============================================================
   RESPONSIVE — CORRECTIONS GÉNÉRIQUES
   Les règles précédentes ciblaient chaque grille par sa chaîne de style
   exacte : toute vue ajoutée ensuite échappait au traitement. Les règles
   ci-dessous sont génériques et donc rétroactives.
   ============================================================ */
@media (max-width: 768px) {

  /* 1. DÉBORDEMENT DES TABLEAUX
     Les tableaux non empilables gardent une largeur minimale lisible.
     Plutôt que d'exiger un conteneur de défilement dans chaque vue, on le
     donne au bloc qui les contient toujours : le corps de carte. */
  .card-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .card-body > table,
  .card-body > form > table,
  .card-body > div > table { min-width: 520px; }

  /* Les tableaux empilés en fiches n'ont, eux, aucune largeur minimale */
  table.table-stack { min-width: 0 !important; }
  .card-body:has(table.table-stack) { overflow-x: visible; }

  /* 2. GRILLES — repli générique
     Toute grille déclarée en style inline avec minmax() passe sur une colonne :
     sans cela, une piste de 300 px déborde d'un écran de 320 px. */
  [style*="minmax("] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* Grilles déclarées par classe dans les modules récents */
  .fac-liste, .abo-grid, .uni-grid, .settings-grid, .enc-grid, .frn-grid, .settings-hub,
  .detail-grid, .form-grid, .stats-grid { grid-template-columns: 1fr !important; }

  /* 3. BLOCS D'INFORMATION EN LIGNE
     Ces séries d'indicateurs alignés horizontalement se replient. */
  .dup-source, .sit-marche, .abo-rows, .fac-corps { flex-direction: column; gap: 8px; }
  .sit-marche div, .dup-source div { text-align: left; }
  .sit-entete { flex-direction: column; gap: 12px; }

  /* 4. DÉCOMPTES ET RÉCAPITULATIFS
     Alignés à droite sur grand écran, ils occupent toute la largeur ici. */
  .decompte, .apercu { max-width: 100% !important; margin-left: 0 !important; }

  /* 5. ÉTAPES DE CHANTIER */
  .et-item { flex-wrap: wrap; }
  .et-actions { flex-direction: row; width: 100%; justify-content: flex-end; margin-top: 6px; }
  .et-form { flex-direction: column; align-items: stretch; }
  .et-form input, .et-form select { width: 100%; }

  /* 6. ENCARTS FLOTTANTS (catalogue, prix, unités, article)
     Contraints à la largeur de l'écran, avec une hauteur bornée. */
  .cat-pop { max-width: calc(100vw - 24px) !important; max-height: 60vh; overflow-y: auto; }

  /* 7. EN-TÊTES DE CARTE : titre et boutons empilés plutôt que comprimés */
  .card-header { flex-wrap: wrap; gap: 8px; }

  /* 8. ZONE DE SAISIE DES LIGNES DE DEVIS
     Le tableau conserve ses colonnes et défile horizontalement : l'empiler
     rendrait la saisie ligne par ligne illisible. */
  .lignes-table { min-width: 720px; }
}

@media (max-width: 480px) {
  /* Boutons d'action pleine largeur : cibles tactiles confortables */
  .form-actions { flex-direction: column; }
  .form-actions .btn { width: 100%; justify-content: center; }
  .card-header > div:last-child .btn { flex: 1 1 auto; justify-content: center; }
  .search-row { flex-direction: column; }
  .search-group { width: 100%; }
}