@font-face {
  font-family: 'CenturyGothic';
  src: local('Century Gothic'), local('CenturyGothic');
}
:root {
  --red:       #e40521;
  --red-dark:  #d00013;
  --red-soft:  #fdecef;
  --sidebar:   #24222d;
  --bg:        #f5f7fb;
  --white:     #ffffff;
  --black:     #24222d;
  --text:      #24222d;
  --text-light:#64748b;
  --border:    #e2e8f0;
  --thead:     #f5f7fb;
  --radius:    6px;

  /* ── Espacements ── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  /* ── Typographie ── */
  --text-xs:   0.68rem;
  --text-sm:   0.78rem;
  --text-base: 0.88rem;
  --text-lg:   1rem;
  --text-xl:   1.2rem;

  /* ── Transitions ── */
  --transition-fast: 0.12s ease;
  --transition-base: 0.2s ease;

  /* ── Sidebar width ── */
  --sidebar-w: 210px;

  /* ── Safe area iOS ── */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
* { margin:0; padding:0; box-sizing:border-box; font-family:'CenturyGothic','Century Gothic',sans-serif; }
html, body { height:100%; overflow:hidden; background:var(--bg); color:var(--text); font-family:'Century Gothic','CenturyGothic',sans-serif; }
.shell { display:flex; height:100vh; overflow:hidden; }

/* Sidebar */
aside { width:210px; background:var(--sidebar); display:flex; flex-direction:column; padding:0; flex-shrink:0; overflow:visible; position:relative; }
.db-status { margin:0 12px 16px; padding:6px 10px; border-radius:var(--radius); font-size:.58rem; border:1px solid rgba(255,255,255,.15); color:rgba(255,255,255,.45); }
.db-status.ok    { border-color:#4ade80; color:#4ade80; background:rgba(74,222,128,.08); }
.db-status.error { border-color:#f87171; color:#f87171; background:rgba(248,113,113,.08); }
nav { flex:1; }
.nav-item { display:flex; align-items:center; gap:9px; padding:10px 18px; cursor:pointer; font-size:.82rem; font-weight:600; color:rgba(255,255,255,.5); border-left:3px solid transparent; transition:all .15s; font-family:'Century Gothic','CenturyGothic',sans-serif; }
.nav-item:hover { color:#fff; background:rgba(228,5,33,.18,255,.07); }
.nav-item.active { color:#fff; border-left-color:var(--red); background:rgba(255,255,255,.10); }
.nav-icon { width:16px; height:16px; opacity:.5; flex-shrink:0; }
.nav-item.active .nav-icon { opacity:1; }
/* Sous-items sidebar */
.nav-sub { overflow:hidden; max-height:0; transition:max-height .2s ease; }
.nav-sub.open { max-height:300px; }
.nav-sub-item { display:flex; align-items:center; gap:8px; padding:7px 18px 7px 42px; cursor:pointer; font-size:.76rem; font-weight:500; color:rgba(255,255,255,.4); border-left:3px solid transparent; transition:all .15s; font-family:'Century Gothic','CenturyGothic',sans-serif; }
.nav-sub-item:hover { color:rgba(255,255,255,.85); background:rgba(255,255,255,.06); }
.nav-sub-item.active { color:#fff; border-left-color:var(--red); background:rgba(255,255,255,.08); }
.nav-item .nav-chevron { margin-left:auto; width:12px; height:12px; opacity:.4; transition:transform .2s; flex-shrink:0; }
.nav-item.open .nav-chevron { transform:rotate(180deg); opacity:.7; }
.sidebar-footer { padding:12px 18px 0; border-top:1px solid rgba(255,255,255,.10); font-size:.58rem; color:rgba(255,255,255,.3); font-family:'Century Gothic','CenturyGothic',sans-serif; }

/* Main - no overflow, flex column */
main { flex:1; display:flex; flex-direction:column; height:100vh; overflow:hidden; background:var(--bg); min-width:0; }

/* Pages */
.page { display:none; flex-direction:column; height:100%; overflow:hidden; }
.page.active { display:flex; animation:fadeIn .2s ease; }

/* Pages non-biens : scroll normal */
#page-dashboard.active,
#page-config.active {
  display:flex;
  flex-direction:column;
  overflow-y:auto;
}

/* ── PAGE OFFRES : même structure que Transactions ── */
#page-offres { padding:0; }

/* ── TABLE OFFRES : sticky headers ── */
#offres-table { width:100%; border-collapse:collapse; table-layout:auto; }
#offres-table thead tr th {
  position:sticky; top:0; z-index:10;
  background:var(--thead);
  border-bottom:2px solid var(--border);
  white-space:nowrap;
}
#offres-table tbody tr:hover td { background:#f5f7fb; }
#offres-table tbody tr.selected:hover td { background:#fdecef !important; }
tbody tr.row-hovered td { background:#f5f7fb !important; }
tbody tr.row-hovered.selected td { background:#fdecef !important; }

/* ── Décaler modal Offre quand drawer ouvert ── */
/* (géré via flex row, cf. ci-dessous) */
#modal-offre-new.drawer-open .modal { transition: none; }

/* ── Champs offre désactivés selon type bâtiment ── */
.of-field.of-na {
  opacity: .28;
  pointer-events: none;
}
.of-field.of-na input,
.of-field.of-na select,
.of-field.of-na textarea {
  background: rgba(200,200,210,.15) !important;
  color: rgba(100,100,120,.35) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  border-color: rgba(200,200,210,.25) !important;
}
.of-field.of-na label { opacity: .5; }

@keyframes fadeIn        { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:translateY(0)} }
@keyframes sheetSlideUp  { from{transform:translateY(100%)} to{transform:translateY(0)} }
@keyframes sheetSlideDown{ from{transform:translateY(0)}    to{transform:translateY(106%)} }
@keyframes bgFadeIn      { from{background:rgba(0,0,0,0)}   to{background:rgba(0,0,0,.3)} }
@keyframes bgFadeOut     { from{background:rgba(0,0,0,.3)}  to{background:rgba(0,0,0,0)} }

/* Page header - always visible, never scrolls */
.page-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px;
  border-bottom:1px solid var(--border);
  background:var(--bg);
  flex-shrink:0;
  z-index:20;
}
.page-header h2 { font-size:1.3rem; font-weight:800; color:var(--black); font-family:'Century Gothic','CenturyGothic',sans-serif; }
.page-header h2 span { color:var(--red); font-family:'Century Gothic','CenturyGothic',sans-serif; }

/* ── PAGES TABLEAU (Parc + Transactions + Demandes + Loyers) : structure fixe ── */
#page-biens, #page-transactions, #page-demandes, #page-loyers { padding:0; }

/* Zone filtre + barre actions : sticky, ne scroll pas */
#biens-top-zone {
  flex-shrink:0;
  background:var(--bg);
  padding:14px 28px 10px;
  z-index:15;
  border-bottom:1px solid var(--border);
}

/* Même structure fixe pour demandes/loyers */
#dp-top-zone, #ly-top-zone {
  flex-shrink:0;
  background:var(--bg);
  padding:14px 28px 10px;
  z-index:15;
  border-bottom:1px solid var(--border);
}
#dp-pagination-bar, #ly-pagination-bar { flex-shrink:0; }
/* Marges latérales desktop pour les scroll containers demandes/loyers */
#dp-table-scroll, #ly-table-scroll { margin:0 28px; }

/* Sticky headers pour dp-table / ly-table */
#dp-table { width:100%; border-collapse:collapse; table-layout:auto; }
#dp-table thead tr th {
  position:sticky; top:0; z-index:10;
  background:var(--thead);
  border-bottom:2px solid var(--border);
  white-space:nowrap;
}
#ly-table { width:100%; border-collapse:collapse; table-layout:auto; }
#ly-table thead tr th {
  position:sticky; top:0; z-index:10;
  background:var(--thead);
  border-bottom:2px solid var(--border);
  white-space:nowrap;
}

/* Boutons bas de modal */
.modal-actions {
  display:flex; justify-content:flex-end; align-items:center; gap:8px;
  margin-top:24px; padding-top:16px;
  border-top:1px solid var(--border);
}

/* Zone tableau + pagination : prend tout l'espace restant, scroll interne */
#biens-table-zone {
  flex:1;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding:0 28px 14px;
  min-height:0;
}

/* Wrapper tableau scrollable */
#biens-table-scroll, .biens-table-scroll {
  flex:1;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--white);
  min-height:0;
  position:relative;
}

/* Barre pagination */
#pagination-bar, .pagination-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 4px 0;
  flex-shrink:0;
  gap:12px;
  flex-wrap:wrap;
}
/* Barres de pagination des pages demandes/loyers — padding latéral desktop */
#dp-pagination-bar, #ly-pagination-bar {
  padding: 10px 28px 14px;
}

/* Stats */
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:28px; }
.stat-card { background:var(--white); border:1px solid var(--border); border-top:3px solid var(--red); border-radius:var(--radius); padding:18px; }
.stat-label { font-size:.64rem; color:var(--text-light); text-transform:uppercase; letter-spacing:.09em; margin-bottom:8px; font-family:'Century Gothic','CenturyGothic',sans-serif; }
.stat-value { font-size:1.8rem; font-weight:800; color:var(--black); font-family:'Century Gothic','CenturyGothic',sans-serif; }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:5px; padding:7px 14px; border-radius:var(--radius); font-weight:700; font-size:.68rem; cursor:pointer; border:none; transition:all .15s; font-family:'CenturyGothic','Century Gothic',sans-serif; }
.btn-primary { background:var(--red); color:#fff; }
.btn-primary:hover { background:var(--red-dark); }
.btn-danger  { background:transparent; color:var(--red); border:1px solid var(--red); }
.btn-danger:hover { background:var(--red-soft); }
.btn-ghost   { background:transparent; color:var(--text-light); border:1px solid var(--border); }
.btn-ghost:hover { color:var(--black); border-color:var(--border); background:var(--bg); }
.btn-sm { padding:4px 8px; font-size:.62rem; }

/* Table */
.table-wrap { background:var(--white); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
table { width:100%; border-collapse:collapse; }

/* Anti-scraping : désactive la sélection de texte sur les lignes de données */
#biens-table tbody, #trans-table tbody, #offres-table tbody {
  -webkit-user-select: none;
  user-select: none;
}

/* ── TABLE BIENS : sticky headers ── */
#biens-table { width:100%; border-collapse:collapse; table-layout:auto; }
#biens-table thead tr th {
  position:sticky;
  top:0;
  z-index:10;
  background:var(--thead);
  border-bottom:2px solid var(--border);
  white-space:nowrap;
}

th { text-align:left; padding:9px 12px; font-size:.63rem; text-transform:uppercase; letter-spacing:.07em; color:var(--text-light); border-bottom:1px solid var(--border); font-weight:700; font-family:'Century Gothic','CenturyGothic',sans-serif; }
td { padding:6px 12px; font-size:.8rem; border-bottom:1px solid var(--border); color:var(--text); white-space:nowrap; }
tr:last-child td { border-bottom:none; }
.td-light { color:var(--text-light); font-size:.76rem; }

/* Badge */
.badge { display:inline-block; padding:2px 8px; border-radius:99px; font-size:.64rem; font-weight:700; }
.badge-green  { background:#dcfce7; color:#15803d; }
.badge-orange { background:#fff7ed; color:#c2410c; }
.badge-red    { background:#fee2e2; color:var(--red); }
.badge-blue   { background:#eff6ff; color:#2563eb; }

/* Modal */
.overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.3); z-index:100; align-items:center; justify-content:center; cursor:pointer; }
/* Modaux d'édition au-dessus des fiches */
#modal-bien, #modal-transaction, #modal-offre-new { z-index: 102; }
#modal-historique { z-index: 110; }
#modal-confirm-delete, #modal-confirm-selection { z-index: 1100; }
/* Modaux accessibles depuis la page login (z-index > 99999) */
#modal-forgot-password, #modal-reset-password { z-index: 100001; }
.modal { cursor:default; }
.overlay.open { display:flex; animation:fadeIn .15s ease; }
.modal { background:var(--white); border:1px solid var(--border); border-top:3px solid var(--red); border-radius:8px; padding:26px; width:510px; max-width:95vw; max-height:90vh; overflow-y:auto; }
.modal h3 { font-size:.95rem; font-weight:800; color:var(--black); margin-bottom:18px; padding-bottom:12px; border-bottom:1px solid var(--border); font-family:'Century Gothic','CenturyGothic',sans-serif; }
h1,h2,h3,h4 { font-family:'Century Gothic','CenturyGothic',sans-serif; }

/* Form */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.form-full { grid-column:1/-1; }
.field { display:flex; flex-direction:column; gap:4px; }
label { font-size:.64rem; color:var(--text-light); text-transform:uppercase; letter-spacing:.07em; font-weight:700; font-family:'Century Gothic','CenturyGothic',sans-serif; }
#b-types-bat-checks label { font-family:'Century Gothic','CenturyGothic',sans-serif; text-transform:none; letter-spacing:normal; font-weight:400; color:var(--black); }
input, select, textarea { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); color:var(--black); padding:8px 11px; font-size:.83rem; outline:none; transition:border-color .15s; font-family:'CenturyGothic','Century Gothic',sans-serif; }
input:focus, select:focus, textarea:focus { border-color:var(--red); box-shadow:0 0 0 3px var(--red-soft); }
textarea { resize:vertical; min-height:68px; }
select option { background:var(--white); }
.form-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; padding-top:18px; border-top:1px solid var(--border); }

/* Toast */
#toast { position:fixed; bottom:22px; right:22px; background:var(--white); border:1px solid var(--border); border-left:3px solid var(--red); border-radius:var(--radius); padding:11px 16px; font-size:.78rem; font-weight:600; z-index:999; transform:translateY(70px); opacity:0; transition:all .25s; pointer-events:none; color:var(--text); }
#toast.show { transform:translateY(0); opacity:1; }
#toast.err  { border-left-color:#f87171; color:#dc2626; }

/* Cards */
.init-card, .config-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:22px; max-width:470px; }
.init-card h3, .config-card h3 { font-size:.82rem; font-weight:700; color:var(--text-light); margin-bottom:12px; text-transform:uppercase; letter-spacing:.07em; font-family:'Century Gothic','CenturyGothic',sans-serif; }
.empty { text-align:center; padding:48px; color:var(--text-light); font-size:.88rem; }
.empty-icon { font-size:2.2rem; margin-bottom:10px; }

/* ── Overlay "aucun résultat" centré dans la zone visible du scroll container ──
   position:absolute + inset:0 = relative au scroll container (padding box),
   PAS au contenu scrollable → toujours centré visuellement, même si on scrolle. */
.table-empty-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 4;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--white);
  color: var(--text-light);
  font-size: .88rem;
  pointer-events: none;
}
.table-empty-overlay .empty-icon { font-size: 2.2rem; }
input::placeholder, textarea::placeholder { color:#bbbbc8; }

/* ── Tri colonnes ── */
th.sortable { cursor:pointer; user-select:none; white-space:nowrap; }
th.sortable:hover { background:#eeeef6; color:var(--black); }
th.sort-asc  { background:#f0edf8 !important; color:var(--red) !important; }
th.sort-desc { background:#f0edf8 !important; color:var(--red) !important; }
th.sort-asc::after  { content:' ↑'; font-size:.7em; }
th.sort-desc::after { content:' ↓'; font-size:.7em; }

/* ── Sélection lignes ── */
tr.selected td { background:#fdecef !important; }
tr.selected { outline:2px solid var(--red); outline-offset:-2px; }
th.col-check, td.col-check { width:32px; padding:6px 8px !important; text-align:center; }
input[type=checkbox] { width:14px; height:14px; accent-color:var(--red); cursor:pointer; }

/* ── Colonnes figées ── */
td.col-frozen {
  position: sticky;
  background: var(--white);
  z-index: 3;
  box-shadow: 2px 0 5px -2px rgba(0,0,0,.10);
}
th.col-frozen {
  position: sticky;
  background: var(--thead) !important;
  z-index: 12 !important;
  box-shadow: 2px 0 5px -2px rgba(0,0,0,.12);
}
td.col-frozen::after, th.col-frozen::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 2px;
  background: var(--red);
  opacity: .35;
}
td.col-frozen { position: sticky; }
tr.selected td.col-frozen { background: #fdecef !important; }
/* Dernier col figé : ligne rouge pleine */
td.col-frozen-last::after, th.col-frozen-last::after { opacity: 1; }

/* Bouton pin dans les en-têtes */
.col-pin-btn {
  display: inline-flex;
  align-items: center;
  margin-left: 5px;
  padding: 1px 3px;
  border: none;
  background: none;
  cursor: pointer;
  color: #aaa;
  font-size: .72rem;
  opacity: 0.3;
  transition: opacity .15s, color .15s, transform .15s;
  vertical-align: middle;
  line-height: 1;
}
th:hover .col-pin-btn { opacity: 1; color: var(--text-light); }
.col-pin-btn.pinned { opacity: 1 !important; color: var(--red); transform: rotate(45deg); }

/* ── Grille réponses formulaires ── */
.fm-grid { width: max-content; min-width: 100%; border-collapse: collapse; }
.fm-grid th, .fm-grid td { padding: 5px 10px; border: 1px solid var(--border); font-size: .78rem; white-space: nowrap; text-align: left; }
.fm-grid thead tr { background: var(--thead); }
.fm-grid thead th { position: sticky; top: 0; z-index: 5; font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-light); font-weight: 700; }
.fm-grid td { cursor: pointer; }
.fm-grid td:hover { filter: brightness(.96); }
.fm-grid-fixed { position: sticky; left: 0; background: var(--white) !important; z-index: 4; box-shadow: 2px 0 4px -2px rgba(0,0,0,.08); }
.fm-grid thead .fm-grid-fixed { z-index: 6; }
.fm-grid-agence { font-weight: 700; font-size: .8rem; min-width: 130px; color: var(--black); }
.fm-grid-orange { background: #fff3e0 !important; }
.fm-grid-red { background: #fee2e2 !important; }
tr:hover .fm-grid-fixed { background: #f9f9fc !important; }

/* ── Barre d'actions sélection ── */
#selection-bar, .selection-bar {
  display:none; align-items:center; gap:12px;
  background:#fff0f1; border:1px solid var(--red);
  border-radius:var(--radius); padding:8px 16px;
  margin-bottom:10px; font-size:.78rem; font-weight:600; color:var(--red);
  flex-shrink:0;
}
#selection-bar.visible, .selection-bar.visible { display:flex; }

/* ── Panneau de filtres ── */
#filter-panel, .filter-panel {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius); padding:12px 16px;
  margin-bottom:10px;
  flex-shrink:0;
}
#filter-panel .filter-grid, .filter-panel .filter-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:10px; margin-top:10px;
}
#filter-panel .filter-field { display:flex; flex-direction:column; gap:4px; }
#filter-panel label { font-size:.62rem; color:var(--text-light); text-transform:uppercase; letter-spacing:.06em; font-weight:700; font-family:'Sen',sans-serif; }

#filter-panel select, #filter-panel input,
.filter-panel select, .filter-panel input {
  font-size:.76rem; padding:5px 8px; border:1px solid var(--border);
  border-radius:var(--radius); background:var(--bg); color:var(--black);
  font-family:'CenturyGothic','Century Gothic',sans-serif;
}
#filter-panel select:focus, #filter-panel input:focus,
.filter-panel select:focus, .filter-panel input:focus { border-color:var(--red); outline:none; }
#filter-panel label, .filter-panel label { font-size:.62rem; color:var(--text-light); text-transform:uppercase; letter-spacing:.06em; font-weight:700; font-family:'Sen',sans-serif; }
.filter-panel .filter-field { display:flex; flex-direction:column; gap:4px; }
.filter-header { display:flex; align-items:center; justify-content:space-between; }
.filter-header h4 { font-size:.78rem; font-weight:700; color:var(--black); font-family:'Sen',sans-serif; }
#filter-count { font-size:.72rem; color:var(--text-light); margin-left:8px; }

/* Range double-input dans un filter-field */
.range-inputs { display:flex; align-items:center; gap:4px; }
.range-inputs input { flex:1; min-width:0; }
.range-sep { color:var(--text-light); font-size:.75rem; flex-shrink:0; }

/* ── Panneau colonnes ── */
#col-panel {
  display:none; position:absolute; top:100%; right:0; z-index:200;
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius); padding:12px 16px;
  box-shadow:0 4px 16px rgba(0,0,0,.1);
  min-width:220px; max-height:400px; overflow-y:auto;
}
#col-panel.open { display:block; }
#col-panel h5 { font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; color:var(--text-light); font-family:'Sen',sans-serif; margin-bottom:8px; }
.col-check-item { display:flex; align-items:center; gap:8px; padding:4px 0; font-size:.78rem; cursor:pointer; user-select:none; }
.col-check-item:hover { color:var(--red); }
.col-check-item input { width:13px; height:13px; accent-color:var(--red); cursor:pointer; flex-shrink:0; }
.col-drag-handle { cursor:grab; color:var(--text-light); font-size:.9rem; padding:0 2px; flex-shrink:0; line-height:1; }
.col-drag-handle:active { cursor:grabbing; }
.col-check-item.dragging { opacity:.4; background:var(--bg); border-radius:4px; }
.col-check-item.drag-over { border-top:2px solid var(--red); }

/* ── Presets de colonnes ── */
.col-presets { margin-bottom:8px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.col-presets-label { font-size:.62rem; text-transform:uppercase; letter-spacing:.07em; color:var(--text-light); font-family:'Sen',sans-serif; margin-bottom:5px; }
.col-preset-chips { display:flex; flex-wrap:wrap; gap:4px; }
.col-preset-chip {
  display:inline-flex; align-items:center; gap:3px; padding:3px 9px;
  border:1px solid var(--border); border-radius:20px; font-size:.7rem;
  cursor:pointer; background:var(--bg); color:var(--text); transition:all .15s;
  font-family:'CenturyGothic','Century Gothic',sans-serif;
}
.col-preset-chip:hover { border-color:var(--red); color:var(--red); }
.col-preset-chip .preset-del { margin-left:1px; opacity:.5; font-size:.85rem; line-height:1; }
.col-preset-chip:hover .preset-del { opacity:1; }
.col-preset-save {
  display:inline-flex; align-items:center; gap:3px; padding:3px 9px;
  border:1px dashed var(--border); border-radius:20px; font-size:.7rem;
  cursor:pointer; background:transparent; color:var(--text-light); transition:all .15s;
  font-family:'CenturyGothic','Century Gothic',sans-serif;
}
.col-preset-save:hover { border-color:var(--red); color:var(--red); border-style:solid; }

/* ── PAGINATION ── */
.pagination-info {
  font-size:.72rem; color:var(--text-light); font-family:'Sen',sans-serif;
}
.pagination-info strong { color:var(--black); }
.pagination-controls { display:flex; align-items:center; gap:6px; }
.page-btn {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:30px; height:28px; padding:0 8px;
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--white); color:var(--text);
  font-size:.72rem; font-weight:600; cursor:pointer;
  transition:all .15s; font-family:'Sen',sans-serif;
}
.page-btn:hover { border-color:var(--red); color:var(--red); }
.page-btn.active { background:var(--red); color:#fff; border-color:var(--red); }
.page-btn:disabled { opacity:.35; cursor:not-allowed; pointer-events:none; }
.per-page-group { display:flex; align-items:center; gap:6px; }
.per-page-label { font-size:.68rem; color:var(--text-light); font-family:'Sen',sans-serif; white-space:nowrap; }
.per-page-btn {
  padding:4px 10px; border:1px solid var(--border); border-radius:var(--radius);
  background:var(--white); color:var(--text-light);
  font-size:.68rem; font-weight:700; cursor:pointer; transition:all .15s; font-family:'Sen',sans-serif;
}
.per-page-btn:hover { border-color:var(--red); color:var(--red); }
.per-page-btn.active { background:var(--red); color:#fff; border-color:var(--red); }

/* ── ACTIONS HOVER sur lignes ── */
#biens-table tbody tr:hover td { background:#f5f7fb; }
#biens-table tbody tr.selected:hover td { background:#fdecef !important; }

/* Scroll containers : position:relative pour que le FAB absolu soit ancré dedans */
#biens-table-scroll, #t-table-scroll, #o-table-scroll { position: relative; }

/* Floating action bar — absolute dans le scroll container, suit la ligne au scroll */
#row-actions-float {
  position:absolute;
  display:none;
  align-items:center;
  gap:3px;
  z-index:9999;
  pointer-events:all;
  padding:2px 4px;
  background:transparent;
  border:none;
}
#row-actions-float.visible { display:flex; }
#row-actions-float.on-selected { background:transparent; }
.row-action-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px;
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--white); color:var(--text-light);
  font-size:.7rem; cursor:pointer; transition:background .1s, color .1s, border-color .1s;
  box-shadow:0 1px 6px rgba(0,0,0,.1);
  flex-shrink:0;
}
.row-action-btn:hover { background:var(--red-soft); border-color:var(--red); color:var(--red); border-color:#bbb; background:#f9f9fc; }
.row-action-btn.danger { color:var(--red); border-color:rgba(228,18,35,.3); background:var(--white); }
.row-action-btn.danger:hover { background:var(--red-soft); border-color:var(--red); }

/* ── Fiche bien ── */
#modal-fiche .modal { width:920px; max-width:97vw; }

/* Mode côte à côte : fiche-parc se décale à gauche, fiche-transaction s'ancre juste à droite */
/* ══════════════════════════════════════════════════════
   FICHE BIEN — SYSTÈME PANNEAUX CÔTE À CÔTE
   ══════════════════════════════════════════════════════ */
#modal-fiche {
  align-items: center;
  justify-content: center;
  cursor: default;
  padding: 20px 12px;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
}
#modal-fiche.open { cursor: default; }

/* Wrapper : centré, ne prend que la place de son contenu, jamais plus large que l'écran */
#fiche-panels-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  /* width = somme des slots visibles, mais plafonné à l'écran */
  width: fit-content;
  max-width: calc(100vw - 24px);
}

/* Slot OFFRE (gauche) — largeur fixe 580px, rétrécit si nécessaire */
#fiche-slot-offre {
  flex: 0 1 580px;
  width: 580px;
  max-width: 580px;
  min-width: 0;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  animation: slideInLeft .2s ease;
}
#fiche-slot-offre .modal {
  width: 100% !important;
  max-width: 100% !important;
  max-height: none;
  overflow-y: visible;
  box-sizing: border-box;
}

/* Slot BIEN (centre) — largeur fixe 920px */
#fiche-slot-bien {
  flex: 0 1 920px;
  width: 920px;
  max-width: 920px;
  min-width: 0;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
#fiche-slot-bien .modal {
  width: 100% !important;
  max-width: 100% !important;
  max-height: none;
  overflow-y: visible;
  box-sizing: border-box;
}

/* Slot TRANSACTION (droite) — largeur fixe 580px */
#fiche-slot-transaction {
  flex: 0 1 580px;
  width: 580px;
  max-width: 580px;
  min-width: 0;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  animation: slideInRight .2s ease;
}
#fiche-slot-transaction .modal {
  width: 100% !important;
  max-width: 100% !important;
  max-height: none;
  overflow-y: visible;
  box-sizing: border-box;
}

@keyframes slideInLeft {
  from { opacity:0; transform: translateX(-14px); }
  to   { opacity:1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity:0; transform: translateX(14px); }
  to   { opacity:1; transform: translateX(0); }
}
.fiche-grid { display:grid; grid-template-columns:1fr 1fr; gap:0; }
.fiche-map { border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); height:260px; }
.fiche-section { margin-bottom:18px; }
.fiche-section h4 { font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-light); font-family:'Sen',sans-serif; font-weight:700; margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid var(--border); }
.fiche-row { display:flex; justify-content:space-between; padding:4px 0; border-bottom:1px solid rgba(224,224,232,.5); font-size:.8rem; gap:12px; }
.fiche-row:last-child { border-bottom:none; }
.fiche-row .fk { color:var(--text-light); font-size:.72rem; flex-shrink:0; }
.fiche-row .fv { color:var(--black); font-weight:600; text-align:right; }
.fiche-badge-id { display:inline-block; background:var(--red); color:#fff; padding:3px 10px; border-radius:99px; font-size:.75rem; font-weight:700; font-family:'Sen',sans-serif; margin-bottom:4px; }
.fiche-trans-table { width:100%; border-collapse:collapse; font-size:.78rem; }
.fiche-trans-table th { text-align:left; padding:6px 8px; font-size:.62rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-light); border-bottom:1px solid var(--border); font-family:'Sen',sans-serif; }
.fiche-trans-table td { padding:6px 8px; border-bottom:1px solid rgba(224,224,232,.4); }
.fiche-trans-table tr:last-child td { border-bottom:none; }

/* ── Form states ── */
.all-locked input, .all-locked select, .all-locked textarea {
  background:#c8c8d4 !important; color:#888 !important; cursor:not-allowed !important; pointer-events:none !important;
}
.all-locked label { opacity:.5; }
.all-locked .btn { opacity:.4; pointer-events:none; }
.field-na input, .field-na select, .field-na textarea,
.field-na input.auto-filled, .field-na select.auto-filled {
  background:rgba(220,220,230,.08) !important; color:rgba(150,150,165,.4) !important;
  cursor:not-allowed !important; pointer-events:none !important; border-color:rgba(220,220,230,.3) !important;
}
.field-na label { opacity:.2; }

/* ── Toggle switch (Oui/Non — vert/rouge) ── */
.toggle-wrap {
  display:flex; align-items:center; gap:10px;
}
.toggle-wrap label.toggle-label {
  font-size:.72rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.05em; color:var(--text); cursor:pointer;
  font-family:'Sen',sans-serif;
}
.toggle-switch {
  position:relative; display:inline-block; width:40px; height:22px; flex-shrink:0;
}
.toggle-switch input { opacity:0; width:0; height:0; position:absolute; }
.toggle-slider {
  position:absolute; cursor:pointer; inset:0;
  background:#e74c3c; border-radius:22px;
  transition:background .2s;
}
.toggle-slider::before {
  content:''; position:absolute;
  width:16px; height:16px; left:3px; top:3px;
  background:#fff; border-radius:50%; transition:transform .2s;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.toggle-switch input:checked + .toggle-slider { background:#27ae60; }
.toggle-switch input:checked + .toggle-slider::before { transform:translateX(18px); }
.toggle-switch input:disabled + .toggle-slider { opacity:.4; cursor:not-allowed; }

/* ── Overlay carte ── */
#map-overlay {
  position:absolute; inset:0; z-index:500;
  background:rgba(180,180,196,.6);
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius); cursor:not-allowed;
}
#map-overlay.hidden { display:none; }
#map-overlay p {
  background:#fff; border:1px solid var(--border); border-left:3px solid var(--red);
  padding:10px 16px; border-radius:var(--radius);
  font-size:.78rem; color:var(--text); font-weight:600; pointer-events:none;
}

/* ── Classes partagées Parc / Transactions ── */

/* Panneau colonnes transactions — même style que #col-panel du Parc */
.col-panel-shared {
  display:none; position:absolute; top:100%; right:0; z-index:200;
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius); padding:12px 16px;
  box-shadow:0 4px 16px rgba(0,0,0,.1);
  min-width:240px; max-height:420px; overflow-y:auto;
}
.col-panel-shared.open { display:block; }
.col-panel-shared h5 {
  font-size:.68rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--text-light); font-family:'Sen',sans-serif; margin-bottom:8px;
}
/* ── Champs transaction désactivés selon type (Utilisateur/Invest) ── */
.tf-field.tf-na {
  opacity: .28;
  pointer-events: none;
}
.tf-field.tf-na input,
.tf-field.tf-na select,
.tf-field.tf-na textarea {
  background: rgba(200,200,210,.15) !important;
  color: rgba(100,100,120,.35) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  border-color: rgba(200,200,210,.25) !important;
}
.tf-field.tf-na label { opacity: .5; }

/* Sticky headers pour trans-table */
#trans-table { width:100%; border-collapse:collapse; table-layout:auto; }
#trans-table thead tr th {
  position:sticky; top:0; z-index:10;
  background:var(--thead);
  border-bottom:2px solid var(--border);
  white-space:nowrap;
}

/* Hover lignes transactions */
#trans-table tbody tr:hover td { background:#f5f7fb; }
#trans-table tbody tr.selected:hover td { background:#fdecef !important; }

/* ── Photo fiche bien ── */
#fi-photo-zone:hover #fi-photo-hover { display:flex !important; }

/* ── Panneau couches carte ── */
.map-baselayer-btn {
  display:flex; align-items:center; gap:7px;
  padding:6px 10px; font-size:.7rem; font-weight:600;
  cursor:pointer; font-family:'Sen',sans-serif; color:var(--text);
  border:none; background:transparent; width:100%; text-align:left;
  transition:background .12s;
}
.map-baselayer-btn:hover { background:var(--bg); }
.map-baselayer-btn.active { color:var(--red); background:var(--red-soft); }
.bl-dot {
  width:9px; height:9px; border-radius:50%; background:#ccc; flex-shrink:0;
  border:1.5px solid rgba(0,0,0,.12);
}
.map-baselayer-btn.active .bl-dot { background:var(--red); border-color:var(--red-dark); }

.map-overlay-btn {
  display:flex; align-items:center; gap:7px;
  padding:6px 10px; font-size:.7rem; font-weight:600;
  cursor:pointer; font-family:'Sen',sans-serif; color:var(--text);
  border:none; background:transparent; width:100%; text-align:left;
  transition:background .12s;
}
.map-overlay-btn:hover { background:var(--bg); }
.map-overlay-btn.active { color:var(--red); background:var(--red-soft); }
.overlay-dot {
  width:9px; height:9px; border-radius:50%; background:#ccc; flex-shrink:0;
  border:1.5px solid rgba(0,0,0,.12); transition:background .12s;
}
.map-overlay-btn.active .overlay-dot { background:var(--red); border-color:var(--red-dark); }

/* ══════════════════════════════════════════════════════
   DRAWER BÂTIMENT — système flex centré
   Même principe que les fiches :
   overlay → wrapper flex → [formulaire] [drawer bien]
   Centré, jamais superposés, s'adapte à l'écran.
   ══════════════════════════════════════════════════════ */

/* Le drawer n'est plus fixed — il est un slot dans le flex */
#bien-drawer {
  display: none;
  flex: 0 1 680px;
  width: 680px;
  min-width: 0;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--red);
  border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0,0,0,.18);
  flex-direction: column;
  animation: slideInRight .22s cubic-bezier(.4,0,.2,1);
}
#bien-drawer.open {
  display: flex;
}
#bien-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--border);
  flex-shrink: 0; background: var(--bg);
  border-radius: 5px 5px 0 0;
}
#bien-drawer-body { flex: 1; overflow-y: auto; padding: 20px; }
#bien-drawer-footer {
  flex-shrink: 0; padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 8px;
  background: var(--bg);
}

/* Wrapper flex dans modal-transaction et modal-offre-new */
#modal-transaction,
#modal-offre-new {
  padding: 20px 12px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
}

/* Décalage désactivé (plus nécessaire) */
#modal-transaction.drawer-open,
#modal-offre-new.drawer-open {
  justify-content: center;
}
#modal-transaction.drawer-open .modal,
#modal-offre-new.drawer-open .modal {
  transition: none;
}
.modal-with-drawer-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  /* fit-content pour centrage correct, mais limité à l'écran */
  width: fit-content;
  max-width: calc(100vw - 24px);
}

/* Le formulaire : taille idéale 1500px (comme avant), réduit si nécessaire */
.modal-with-drawer-row > .modal {
  flex: 0 1 1500px;
  width: 1500px;
  max-width: 1500px;
  min-width: 0;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  box-sizing: border-box;
}

/* Sans drawer : le formulaire reprend sa taille normale (1500px) */

/* Le drawer bâtiment dans le row */
.modal-with-drawer-row > #bien-drawer {
  flex: 0 1 820px;
  width: 820px;
  max-width: 820px;
  min-width: 0;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  box-sizing: border-box;
}

/* Décalage désactivé (plus nécessaire) */
#modal-transaction.drawer-open,
#modal-offre-new.drawer-open {
  justify-content: center;
}
#modal-transaction.drawer-open .modal,
#modal-offre-new.drawer-open .modal {
  transition: none;
}


/* ── Compte menu sidebar ── */
.compte-btn {
  display:flex;align-items:center;gap:9px;padding:10px 16px;
  cursor:pointer;border-top:1px solid rgba(255,255,255,.08);
  margin-top:auto;transition:background .15s;position:relative;flex-shrink:0;
}
.compte-btn:hover { background:rgba(255,255,255,.07); }
.compte-avatar {
  width:32px;height:32px;border-radius:50%;
  background:var(--red);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:'Sen',sans-serif;font-size:.75rem;font-weight:800;flex-shrink:0;
  overflow:hidden;cursor:pointer;position:relative;
  border:2px solid rgba(255,255,255,.15);
  transition:border-color .15s;
}
.compte-avatar:hover { border-color:rgba(255,255,255,.5); }
.compte-avatar img {
  width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;
}
.compte-avatar .avatar-initials {
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Sen',sans-serif;font-size:.75rem;font-weight:800;color:#fff;
}
/* Input file caché pour upload avatar */
#avatar-file-input { display:none; }
.compte-info { flex:1;min-width:0; }
.compte-name { font-size:.75rem;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.compte-role { font-size:.62rem;color:rgba(255,255,255,.45);font-family:'Sen',sans-serif;text-transform:uppercase;letter-spacing:.06em; }
.compte-chevron { color:rgba(255,255,255,.35);font-size:.7rem;transition:transform .2s;flex-shrink:0; }
.compte-btn.open .compte-chevron { transform:rotate(180deg); }
.compte-dropdown {
  position:absolute;bottom:calc(100% + 6px);left:10px;right:10px;
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:0 8px 24px rgba(0,0,0,.14);overflow:hidden;
  display:none;z-index:9000;
}
.compte-dropdown.open { display:block; }
.compte-dropdown-item {
  display:flex;align-items:center;gap:9px;padding:9px 13px;
  font-size:.78rem;color:var(--text);cursor:pointer;transition:background .12s;
}
.compte-dropdown-item:hover { background:var(--bg); }
.compte-dropdown-item svg { width:14px;height:14px;stroke:var(--text-light);flex-shrink:0; }
.compte-dropdown-item.danger { color:var(--red); }
.compte-dropdown-item.danger svg { stroke:var(--red); }
.compte-dropdown-sep { border:none;border-top:1px solid var(--border);margin:3px 0; }

/* ── Page login ── */
#page-login {
  position:fixed;inset:0;background:var(--bg);z-index:99999;
  display:none;align-items:center;justify-content:center;
}
#page-login.visible { display:flex; }

/* Bloquer l'app si non connecté */
/* blur supprimé — #page-login couvre tout via z-index:99999 */

.login-card {
  background:var(--white);border:1px solid var(--border);border-radius:10px;
  box-shadow:0 8px 40px rgba(0,0,0,.12);padding:40px 44px;width:420px;max-width:95vw;
}
.login-logo { text-align:center;margin-bottom:24px; }
.login-logo img { width:120px;margin-bottom:6px; }
.login-logo p { font-size:.72rem;color:var(--text-light);font-family:'Sen',sans-serif;text-transform:uppercase;letter-spacing:.1em; }
.login-title { font-family:'Sen',sans-serif;font-size:1.3rem;font-weight:800;color:var(--black);margin-bottom:4px;text-align:center; }
.login-sub { font-size:.78rem;color:var(--text-light);text-align:center;margin-bottom:22px; }
.login-field { margin-bottom:13px; }
.login-field label { display:block;font-size:.72rem;font-weight:700;color:var(--text-light);margin-bottom:5px;text-transform:uppercase;letter-spacing:.05em; }
.login-field input { width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius);font-size:.85rem;background:var(--white);color:var(--text);box-sizing:border-box; }
.login-field input:focus { border-color:var(--red);outline:none;box-shadow:0 0 0 3px var(--red-soft); }
.login-btn { width:100%;padding:10px;background:var(--red);color:#fff;border:none;border-radius:var(--radius);font-family:'Sen',sans-serif;font-size:.82rem;font-weight:800;cursor:pointer;transition:background .15s;margin-top:4px; }
.login-btn:hover { background:var(--red-dark); }
.login-btn:disabled { opacity:.6;cursor:not-allowed; }
.login-sso-sep { display:flex;align-items:center;gap:10px;margin:16px 0; }
.login-sso-sep span { font-size:.7rem;color:var(--text-light);white-space:nowrap; }
.login-sso-sep::before,.login-sso-sep::after { content:'';flex:1;border-top:1px solid var(--border); }
.login-sso-btn { width:100%;padding:9px;background:var(--white);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);font-size:.78rem;font-weight:700;cursor:pointer;transition:background .15s;display:flex;align-items:center;justify-content:center;gap:8px; }
.login-sso-btn:hover { background:var(--bg); }
.login-error { background:#fff5f5;border:1px solid #fcc;border-radius:var(--radius);padding:8px 12px;font-size:.78rem;color:var(--red);margin-bottom:12px;display:none; }
.login-error.show { display:block; }

/* ── Page login ── */
#page-login {
  position:fixed;inset:0;background:var(--bg);z-index:99999;
  display:none;align-items:center;justify-content:center;
}
#page-login.visible { display:flex; }
/* app masquée par #page-login z-index:99999 */

.login-card {
  background:var(--white);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 12px 48px rgba(0,0,0,.12);padding:44px 48px;width:440px;max-width:96vw;
}
.login-logo { text-align:center;margin-bottom:28px; }
.login-logo img { width:130px;margin-bottom:8px;display:block;margin:0 auto 8px; }
.login-logo p { font-size:.7rem;color:var(--text-light);font-family:'Sen',sans-serif;
  text-transform:uppercase;letter-spacing:.12em;margin-top:4px; }
.login-title { font-family:'Sen',sans-serif;font-size:1.35rem;font-weight:800;
  color:var(--black);text-align:center;margin-bottom:4px; }
.login-sub { font-size:.78rem;color:var(--text-light);text-align:center;margin-bottom:26px; }
.login-field { margin-bottom:14px; }
.login-field label { display:block;font-size:.7rem;font-weight:700;color:var(--text-light);
  margin-bottom:5px;text-transform:uppercase;letter-spacing:.06em; }
.login-field input { width:100%;padding:9px 12px;border:1px solid var(--border);
  border-radius:var(--radius);font-size:.85rem;color:var(--text);
  background:var(--white);box-sizing:border-box;transition:border-color .15s,box-shadow .15s; }
.login-field input:focus { border-color:var(--red);outline:none;box-shadow:0 0 0 3px var(--red-soft); }
.login-btn { width:100%;padding:10px 16px;background:var(--red);color:#fff;border:none;
  border-radius:var(--radius);font-family:'Sen',sans-serif;font-size:.82rem;font-weight:800;
  cursor:pointer;transition:background .15s;margin-top:6px;letter-spacing:.02em; }
.login-btn:hover { background:var(--red-dark); }
.login-btn:disabled { opacity:.6;cursor:not-allowed; }
.login-sso-sep { display:flex;align-items:center;gap:10px;margin:18px 0; }
.login-sso-sep span { font-size:.7rem;color:var(--text-light);white-space:nowrap; }
.login-sso-sep::before,.login-sso-sep::after { content:'';flex:1;border-top:1px solid var(--border); }
.login-sso-btn { width:100%;padding:9px;background:var(--white);color:var(--text);
  border:1px solid var(--border);border-radius:var(--radius);font-size:.78rem;font-weight:600;
  cursor:pointer;transition:background .15s;display:flex;align-items:center;justify-content:center;gap:8px; }
.login-sso-btn:hover { background:var(--bg); }
.login-error { background:#fff5f5;border:1px solid #fcc;border-radius:var(--radius);
  padding:8px 12px;font-size:.78rem;color:var(--red);margin-bottom:14px;display:none; }
.login-error.show { display:block; }

/* ── Params layout ── */
/* Chaîne hauteur : .page(100%) → .params-layout(flex:1) → .params-content(flex:1) → .param-tab(flex:1) → .param-card(flex:1) → .param-table-scroll(flex:1) */
.params-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  flex: 1;
  overflow: hidden;
  min-height: 0;
  height: 100%;
}
.params-nav { border-right:1px solid var(--border);background:var(--white);
  padding:16px 10px;display:flex;flex-direction:column;gap:2px;overflow-y:auto; }
.params-nav-sep { font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;
  color:var(--text-light);padding:10px 10px 4px;margin-top:4px; }
.params-nav-item { display:flex;align-items:center;gap:9px;padding:8px 10px;
  border-radius:var(--radius);font-size:.8rem;font-weight:600;color:var(--text-light);
  cursor:pointer;transition:background .12s,color .12s; }
.params-nav-item svg { width:14px;height:14px;flex-shrink:0; }
.params-nav-item:hover { background:var(--bg);color:var(--text); }
.params-nav-item.active { background:var(--red-soft);color:var(--red);font-weight:700; }
.params-nav-item.admin-only { display:none; }
body.role-admin .params-nav-item.admin-only { display:flex; }
body.role-super_admin .params-nav-item.admin-only { display:flex; }
.params-nav-sep.admin-only { display:none; }
body.role-admin .params-nav-sep.admin-only { display:block; }
body.role-super_admin .params-nav-sep.admin-only { display:block; }
.params-nav-item.super-admin-only { display:none; }
body.role-super_admin .params-nav-item.super-admin-only { display:flex; }
.params-nav-sep.super-admin-only { display:none; }
body.role-super_admin .params-nav-sep.super-admin-only { display:block; }
.params-nav-item.form-region-only { display:none; }
body.has-form-region .params-nav-item.form-region-only { display:flex; }
.params-nav-sep.form-region-only { display:none; }
body.has-form-region .params-nav-sep.form-region-only { display:block; }

/* ── Agence chips / tags ── */
.agence-chips-wrap {
  display:flex; flex-wrap:wrap; gap:5px;
  min-height:32px; padding:4px 6px;
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--bg);
}
.agence-chip {
  display:inline-flex; align-items:center; gap:4px;
  background:var(--red-soft); color:var(--red);
  font-size:.72rem; font-weight:700;
  padding:2px 7px 2px 8px; border-radius:99px;
  font-family:'Sen',sans-serif;
}
.agence-chip button {
  background:none; border:none; cursor:pointer;
  color:var(--red); font-size:.85rem; line-height:1;
  padding:0; margin:0; opacity:.7;
}
.agence-chip button:hover { opacity:1; }

/* ── Sélecteur de formulaires (chips) ── */
.fm-form-chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; border-radius:8px;
  border:1px solid var(--border);
  background:var(--white); color:var(--black);
  font-size:.75rem; font-weight:600; cursor:pointer;
  transition:background .15s, border-color .15s;
}
.fm-form-chip:hover { border-color:var(--red); color:var(--red); }
.fm-form-chip.active {
  background:var(--red); color:#fff; border-color:var(--red);
}
.fm-form-chip-name { max-width:none; white-space:normal; text-align:left; }
.fm-form-chip-badge {
  background:rgba(255,255,255,.3); border-radius:8px;
  padding:0px 5px; font-size:.68rem; font-weight:700;
}
.fm-form-chip.active .fm-form-chip-badge { background:rgba(255,255,255,.35); }
.fm-form-chip:not(.active) .fm-form-chip-badge {
  background:var(--bg); color:var(--text-light);
}

/* Le contenu prend tout l'espace restant — flex col */
.params-content {
  overflow: hidden;
  padding: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* grid item : align-self + height:100% pour remplir la hauteur de la ligne */
  align-self: stretch;
  height: 100%;
}
/* Tabs formulaires (profil, rôles, db, sso) : padding + scroll vertical normal */
.param-tab { display:none; flex-direction:column; gap:14px; }
.param-tab.active {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 24px 28px;
}

/* ── Tabs avec table (users, logs, notifs) — même principe que pages tableau ──
   La tab est overflow:hidden + flex:1, la card s'étire, le scroll container prend le reste. */
#ptab-users.active,
#ptab-logs.active,
#ptab-notifs.active {
  overflow: hidden;
  padding: 16px 28px 0;
  gap: 12px;
}
/* La card principale s'étire */
#ptab-users > .param-card,
#ptab-logs > .param-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
/* Notifs : 1re card taille fixe, 2e card (liste envoyées) s'étire */
#ptab-notifs > .param-card:first-child { flex-shrink: 0; }
#ptab-notifs > .param-card:last-child {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
/* Scroll container : remplit tout l'espace de la card */
.param-table-scroll {
  flex: 1;
  overflow-x: auto;
  overflow-y: auto;
  min-height: 0;
  max-height: none;
  border-top: 1px solid var(--border);
  -webkit-overflow-scrolling: touch;
}
.param-table-scroll table { min-width: 600px; width: 100%; }
.param-table-scroll .user-table { min-width: 700px; }

/* Cards */
.param-card { background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden; }
/* Cards contenant un tableau : border-radius conservé mais scroll horizontal autorisé */
#ptab-users > .param-card,
#ptab-logs > .param-card,
#ptab-formulaires > .param-card:last-child { overflow: visible; }
/* SSO : cards à hauteur naturelle, pas de troncature */
#ptab-sso .param-card {
  overflow: visible;
  /* Les coins arrondis des headers colorés sont gérés directement sur le header */
}
#ptab-sso .param-card > .param-card-hdr {
  border-top-left-radius:  calc(var(--radius) - 1px);
  border-top-right-radius: calc(var(--radius) - 1px);
  flex-wrap: wrap;
  gap: 8px;
  row-gap: 8px;
}
#ptab-sso .param-card-body {
  overflow: visible;
  word-break: break-word;
  overflow-wrap: break-word;
}
#ptab-sso .param-card-body input,
#ptab-sso .param-card-body select { min-width: 0; }
#ptab-sso .param-card-hdr > div,
#ptab-sso .param-card-hdr > span { min-width: 0; }
.param-card-hdr { display:flex;align-items:center;justify-content:space-between;
  padding:13px 18px;border-bottom:1px solid var(--border); }
.param-card-title { font-family:'Sen',sans-serif;font-size:.7rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.1em;color:var(--text-light); }
.param-card-body { padding:18px; min-width:0; }

/* Profil hero */
.profil-hero { background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius);padding:22px 24px;display:flex;align-items:center;gap:22px; }
.profil-avatar-wrap { display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0; }
.profil-avatar {
  width:80px;height:80px;border-radius:50%;background:var(--red);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  cursor:pointer;position:relative;border:3px solid #fff;
  box-shadow:0 0 0 2px var(--red-soft);transition:box-shadow .2s;
}
.profil-avatar:hover { box-shadow:0 0 0 3px var(--red); }
.profil-avatar img { width:100%;height:100%;object-fit:cover;border-radius:50%;display:block; }
.profil-avatar-overlay { position:absolute;inset:0;background:rgba(0,0,0,.45);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#fff;opacity:0;transition:opacity .15s;border-radius:50%;font-size:.62rem; }
.profil-avatar:hover .profil-avatar-overlay { opacity:1; }
.profil-info { flex:1;min-width:0; }
.profil-info-name { font-family:'Sen',sans-serif;font-size:1.3rem;font-weight:800;
  color:var(--black);margin-bottom:2px; }
.profil-info-email { font-size:.82rem;color:var(--text-light);margin-bottom:10px; }
.profil-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
.profil-grid-3 { display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px; }
.profil-cards-grid { display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start; }

/* Role badges */
.role-badge { display:inline-block;font-family:'Sen',sans-serif;font-size:.65rem;
  font-weight:800;padding:2px 9px;border-radius:99px;text-transform:uppercase;letter-spacing:.04em; }
.role-badge.super_admin { background:#1e1b4b;color:#a5b4fc;border:1px solid #4338ca; }
.role-badge.admin   { background:#fef2f2;color:var(--red);border:1px solid #fcc; }
.role-badge.editeur { background:#eff6ff;color:#2563eb;border:1px solid #bfdbfe; }
.role-badge.lecture { background:var(--bg);color:var(--text-light);border:1px solid var(--border); }

/* Sélecteur de rôle inline dans tableau utilisateurs */
.role-inline-select { font-family:'Sen',sans-serif;font-weight:800;padding:2px 9px;border-radius:99px;letter-spacing:.04em;text-transform:uppercase;font-size:.65rem; }
.role-inline-select.role-super_admin { background:#1e1b4b;color:#a5b4fc; }
.role-inline-select.role-admin   { background:#fef2f2;color:var(--red); }
.role-inline-select.role-editeur { background:#eff6ff;color:#2563eb; }
.role-inline-select.role-lecture { background:var(--bg);color:var(--text-light); }

/* Rôles définitions */
.roles-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:12px; }
.role-def-card { background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius);padding:18px;border-top:3px solid transparent; }
.role-def-card.admin { border-top-color:var(--red); }
.role-def-card.editeur { border-top-color:#2563eb; }
.role-def-card.lecture { border-top-color:#64748b; }
.role-def-hdr { display:flex;align-items:center;justify-content:space-between;margin-bottom:12px; }
.role-perm-list { list-style:none;padding:0;display:flex;flex-direction:column;gap:5px; }
.role-perm-list li { display:flex;align-items:flex-start;gap:7px;font-size:.78rem;color:var(--text); }
.role-perm-list .ok  { color:#16a34a;font-weight:800;flex-shrink:0;font-size:.8rem; }
.role-perm-list .no  { color:#dc2626;font-weight:800;flex-shrink:0;font-size:.8rem; }

/* Toggle switch */
.toggle { position:relative;display:inline-block;width:38px;height:21px;flex-shrink:0; }
.toggle input { display:none; }
.toggle-sl { position:absolute;inset:0;background:#d1d5db;border-radius:99px;
  cursor:pointer;transition:background .2s; }
.toggle-sl::before { content:'';position:absolute;left:3px;top:3px;
  width:15px;height:15px;border-radius:50%;background:#fff;transition:transform .2s; }
.toggle input:checked + .toggle-sl { background:var(--red); }
.toggle input:checked + .toggle-sl::before { transform:translateX(17px); }

/* Users table */
.user-table { width:100%;border-collapse:collapse;font-size:.8rem; }
.user-table th { text-align:left;padding:8px 12px;font-size:.65rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;color:var(--text-light);
  background:var(--bg);border-bottom:1px solid var(--border); }
.user-table td { padding:8px 12px;border-bottom:1px solid var(--border);vertical-align:middle; }
.user-table tr:last-child td { border-bottom:none; }
.user-table tr:hover td { background:var(--bg); }
.u-avatar { width:28px;height:28px;border-radius:50%;background:var(--red);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Sen',sans-serif;font-size:.6rem;font-weight:800;flex-shrink:0; }

/* Logs */
.log-badge { font-size:.67rem;font-weight:700;padding:1.5px 7px;border-radius:4px; }
.log-create { background:#f0fdf4;color:#16a34a; }
.log-update { background:#eff6ff;color:#2563eb; }
.log-delete { background:#fef2f2;color:#dc2626; }
.log-login  { background:#f5f3ff;color:#7c3aed; }


/* ── Contrôle d'accès par rôle via CSS ── */
body.role-lecture [data-require="canAdd"],
body.role-lecture [data-require="canEdit"],
body.role-lecture [data-require="canDelete"] { display:none !important; }

/* ── Filtres utilisateur ── */
.user-filter-tags { display:flex;flex-wrap:wrap;gap:3px;max-width:160px; }
.uft { display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:99px;
  font-size:.62rem;font-weight:700;font-family:'Sen',sans-serif;white-space:nowrap; }
.uft.log { background:#e6f4ee;color:#2d7a4f; }
.uft.bur { background:#e8f4fb;color:#2563eb; }
.uft.com { background:#fce8f3;color:#be185d; }
.uft.act { background:#f0eeff;color:#6b5fd6; }
.uft.alt { background:#f5ecff;color:#9b4fa6; }
.uft.mix { background:#fff4e6;color:#c2770a; }
.uft.uti { background:#e8f4fb;color:#0369a1; }
.uft.inv { background:#f0fdf4;color:#16a34a; }
.uft.all { background:var(--bg);color:var(--text-light); }

/* Modal filtres utilisateur */
.filter-chips-grid { display:grid;grid-template-columns:1fr 1fr;gap:6px; }
.filter-chip { display:flex;align-items:center;gap:8px;padding:8px 12px;
  border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;
  transition:background .12s,border-color .12s;font-size:.8rem;background:var(--white); }
.filter-chip:hover { background:var(--bg); }
.filter-chip input[type="checkbox"] { width:14px;height:14px;accent-color:var(--red);flex-shrink:0; }
.filter-chip.selected { border-color:var(--red);background:var(--red-soft); }

/* ── Notifications ── */
.notif-btn { position:relative; width:32px; height:32px; border-radius:var(--radius);
  background:var(--white); border:1px solid var(--border); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s; flex-shrink:0; }
.notif-btn:hover { background:var(--bg); }
.notif-btn svg { width:16px; height:16px; color:var(--text); }
.notif-badge { position:absolute; top:-4px; right:-4px; min-width:16px; height:16px;
  background:var(--red); color:#fff; border-radius:99px; font-size:.6rem;
  font-weight:800; display:flex; align-items:center; justify-content:center;
  padding:0 3px; border:2px solid var(--white); display:none; }
.notif-badge.visible { display:flex; }
.notif-panel { position:fixed; top:0; right:0; width:340px; height:100vh;
  background:var(--white); border-left:1px solid var(--border);
  box-shadow:-4px 0 24px rgba(0,0,0,.1); z-index:1500;
  display:flex; flex-direction:column; transform:translateX(100%);
  transition:transform .25s ease; }
.notif-panel.open { transform:translateX(0); }
.notif-panel-hdr { display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-bottom:1px solid var(--border); flex-shrink:0; }
.notif-panel-title { font-family:'Sen',sans-serif; font-size:.85rem; font-weight:800;
  color:var(--black); }
.notif-list { flex:1; overflow-y:auto; }
.notif-item { display:flex; gap:12px; padding:14px 18px;
  border-bottom:1px solid var(--border); cursor:pointer; transition:background .12s; }
.notif-item:hover { background:var(--bg); }
.notif-item.unread { background:var(--red-soft); }
.notif-item.unread:hover { background:#fce8ea; }
.notif-icon { width:34px; height:34px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; flex-shrink:0; }
.notif-icon.type-etude  { background:#eff6ff; color:#2563eb; }
.notif-icon.type-bien   { background:#f0fdf4; color:#16a34a; }
.notif-icon.type-system { background:#f5f3ff; color:#7c3aed; }
.notif-icon.type-alerte { background:#fef2f2; color:var(--red); }
.notif-text { flex:1; min-width:0; }
.notif-text-title { font-size:.8rem; font-weight:600; color:var(--text);
  margin-bottom:2px; }
.notif-text-sub { font-size:.72rem; color:var(--text-light); }
.notif-text-time { font-size:.68rem; color:var(--text-light); margin-top:3px; }
.notif-empty { display:flex; flex-direction:column; align-items:center;
  justify-content:center; flex:1; padding:40px 20px; color:var(--text-light);
  font-size:.8rem; text-align:center; gap:8px; }
.notif-panel-footer { padding:12px 18px; border-top:1px solid var(--border);
  display:flex; justify-content:space-between; gap:8px; flex-shrink:0; }
/* Vue compacte */
body.compact-mode td { padding-top:3px !important; padding-bottom:3px !important; }
body.compact-mode .bien-row td { height:auto !important; }

.notif-pref-row { display:flex; align-items:center; justify-content:space-between;
  padding:8px 16px; gap:12px; cursor:pointer; }
.notif-pref-row:hover { background:var(--bg); }
.notif-pref-info { display:flex; flex-direction:column; min-width:0; }
.notif-pref-label { font-size:.78rem; font-weight:600; color:var(--text); }
.notif-pref-desc { font-size:.68rem; color:var(--text-light); }

/* Bouton supprimer une notif */
.notif-delete-btn {
  flex-shrink:0; background:none; border:none; cursor:pointer; padding:2px 4px;
  color:var(--text-light); font-size:.78rem; line-height:1;
  opacity:0; transition:opacity .12s;
}
.notif-action-btn {
  flex-shrink:0; background:none; border:none; cursor:pointer; padding:2px 4px;
  color:var(--text-light); font-size:.72rem; line-height:1;
  opacity:0; transition:opacity .12s;
}
.notif-item-actions { display:flex; align-items:flex-start; gap:2px; margin-left:auto; }
.notif-item:hover .notif-delete-btn,
.notif-item:hover .notif-action-btn { opacity:1; }
.notif-item.selected { background:var(--red-soft); outline:2px solid var(--red-light); outline-offset:-2px; }
.notif-item.selected.unread { background:#fce8ea; }

/* Panneau envoi notif admin (slide depuis la droite, par-dessus le notif-panel) */
.notif-send-panel {
  position:fixed; top:0; right:0; width:380px; height:100vh;
  background:var(--white); border-left:1px solid var(--border);
  z-index:1601; transform:translateX(100%); transition:transform .25s ease;
  display:flex; flex-direction:column;
}
.notif-send-panel.open { transform:translateX(0); }
.notif-send-panel-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-bottom:1px solid var(--border); flex-shrink:0;
}
.notif-send-panel-body { flex:1; overflow-y:auto; padding:16px 18px; }
.notif-send-panel-footer {
  padding:12px 18px; border-top:1px solid var(--border);
  display:flex; justify-content:flex-end; gap:8px; flex-shrink:0;
}

/* Table notifs envoyées */
.notif-sent-table { width:100%; border-collapse:collapse; font-size:.78rem; }
.notif-sent-table th {
  background:var(--thead); border-bottom:2px solid var(--border);
  padding:8px 10px; text-align:left; font-size:.65rem;
  text-transform:uppercase; letter-spacing:.05em; color:var(--text-light);
  font-family:'Sen',sans-serif; font-weight:700;
}
.notif-sent-table td { padding:8px 10px; border-bottom:1px solid var(--border); }
.notif-sent-table tbody tr:hover td { background:var(--bg); }

@media (max-width:600px){
  .notif-send-panel { width:100%; }
}

/* ════════════════════════════════════════
   DASHBOARD MODULAIRE
   ════════════════════════════════════════ */
.dash-area { padding:0 0 24px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:0; }
.dash-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:12px 24px 0; }
.dash-toolbar-title { font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--text-light); }

/* Grille de widgets drag & drop */
.dash-grid {
  position:relative;
  min-height:600px;
  width:calc(100% - 48px);
  margin:16px 24px 0;
}
.dash-grid.dash-edit {
  background:
    linear-gradient(to right, rgba(228,5,33,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(228,5,33,.04) 1px, transparent 1px);
  background-size:40px 40px;
  border-radius:8px;
  border:1px dashed rgba(228,5,33,.2);
}

/* Widget */
.dash-widget {
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  position:absolute;
  box-sizing:border-box;
  min-width:160px; min-height:120px;
  transition:box-shadow .2s;
  user-select:none;
}
.dash-widget.is-dragging {
  opacity:.85;
  box-shadow:0 12px 40px rgba(0,0,0,.18);
  z-index:1000;
  cursor:grabbing;
}
.dash-widget.dragging { opacity:.5; transform:scale(.97); box-shadow:0 8px 32px rgba(0,0,0,.18); }
.dash-widget.drag-over { border-color:var(--red); box-shadow:0 0 0 2px var(--red-soft); }
/* Tailles widget en position absolue — contrôlées via JS (width/height inline) */

/* Widget header */
.dash-widget-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px 8px; border-bottom:1px solid var(--border);
  background:var(--bg);
}
.dash-widget-title { font-family:'Sen',sans-serif; font-size:.68rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.08em; color:var(--text-light); }
.dash-widget-icon { width:20px; height:20px; border-radius:4px; display:flex;
  align-items:center; justify-content:center; flex-shrink:0; }
.dash-widget-icon svg { width:12px; height:12px; }
.dash-widget-drag-handle { cursor:grab; color:var(--text-light); opacity:.4;
  font-size:14px; padding:0 2px; display:none; }
.dash-edit .dash-widget-drag-handle { display:block; }
.dash-widget-body { flex:1; padding:14px; display:flex; flex-direction:column; justify-content:center; }

/* Types de widgets */
.dash-kpi { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.dash-kpi-value { font-family:'Sen',sans-serif; font-size:2rem; font-weight:800; color:var(--black); line-height:1; }
.dash-kpi-sub { font-size:.72rem; color:var(--text-light); }
.dash-kpi-delta { font-size:.68rem; padding:1px 6px; border-radius:99px; }
.dash-kpi-delta.up { background:#f0fdf4; color:#16a34a; }
.dash-kpi-delta.down { background:#fef2f2; color:var(--red); }

.dash-bar-list { display:flex; flex-direction:column; gap:6px; }
.dash-bar-row { display:flex; align-items:center; gap:8px; }
.dash-bar-label { font-size:.72rem; color:var(--text); width:80px; flex-shrink:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dash-bar-track { flex:1; height:6px; background:var(--bg); border-radius:99px; overflow:hidden; }
.dash-bar-fill { height:100%; border-radius:99px; transition:width .4s ease; }
.dash-bar-val { font-size:.7rem; color:var(--text-light); width:45px; text-align:right; flex-shrink:0; }

.dash-recent-list { display:flex; flex-direction:column; gap:0; }
.dash-recent-row { display:flex; align-items:center; gap:10px; padding:6px 0;
  border-bottom:1px solid var(--border); font-size:.75rem; }
.dash-recent-row:last-child { border-bottom:none; }
.dash-recent-badge { font-size:.62rem; padding:1px 7px; border-radius:4px; flex-shrink:0; }

/* Catalogue widgets (mode édition) */
.dash-catalogue { background:var(--white); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px; display:none; margin:12px 24px 0; }
.dash-catalogue.open { display:block; }
.dash-cat-grid { display:flex; flex-wrap:wrap; gap:5px; margin-top:10px; }
.dash-cat-item { border:1px solid var(--border); border-radius:99px;
  padding:3px 10px; cursor:pointer; transition:background .12s, border-color .12s;
  display:flex; align-items:center; gap:5px; white-space:nowrap; }
.dash-cat-item:hover { background:var(--red-soft); border-color:var(--red); }
.dash-cat-item.active { background:var(--red-soft); border-color:var(--red); opacity:.45; cursor:not-allowed; }
.dash-cat-name { font-size:.7rem; font-weight:600; color:var(--text); font-family:'Sen',sans-serif; }
.dash-cat-desc { display:none; }
.dash-cat-sep { font-size:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  color:var(--text-light); padding:4px 2px 0; width:100%; }

/* Placeholder widget vide */
.dash-widget-placeholder { border:2px dashed var(--border); background:transparent;
  display:flex; align-items:center; justify-content:center; min-height:120px;
  color:var(--text-light); font-size:.78rem; border-radius:var(--radius); cursor:pointer; }
.dash-widget-placeholder:hover { border-color:var(--red); color:var(--red); background:var(--red-soft); }

/* Bouton supprimer widget */
.dash-widget-remove { position:absolute; top:6px; right:6px; width:18px; height:18px;
  border-radius:50%; background:var(--red-soft); color:var(--red); border:none;
  cursor:pointer; display:none; align-items:center; justify-content:center;
  font-size:9px; font-weight:800; z-index:10; }
.dash-edit .dash-widget-remove { display:flex; }

/* ── Typographie globale ── */
@font-face {
  font-family: 'Century Gothic';
  src: local('Century Gothic'), local('CenturyGothic');
  font-weight: 400;
}
@font-face {
  font-family: 'Century Gothic';
  src: local('Century Gothic Bold'), local('CenturyGothic-Bold');
  font-weight: 700;
}

/* ── Titres : Sen ── */
h1, h2, h3, h4, h5, h6,
.page-header h2,
.param-card-title,
.params-nav-sep,
.dash-widget-title,
.dash-kpi-value,
.dash-toolbar-title,
.profil-info-name,
.login-title,
.notif-panel-title,
.stat-label,
.stat-value,
.nav-item,
.param-card-title,
.role-badge,
.u-avatar,
.log-badge {
  font-family: 'Sen', sans-serif;
}
/* ── Titres display grands ── */
.page-header h2 span,
.login-title,
.profil-info-name,
.dash-kpi-value {
  font-family: 'Sen',sans-serif;
}

/* Héritage Century Gothic sur formulaires */
input, select, textarea, button {
  font-family: inherit;
}
/* Forcer Sen sur les éléments de navigation et labels */
.nav-item, .nav-icon + *, aside nav .nav-item {
  font-family: 'Sen', sans-serif;
}

/* ── Widget cards ── */
.dash-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  padding: 4px 0;
}
.dash-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s, transform .1s;
  min-width: 0;
  border-top: 3px solid transparent;
}
.dash-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  border-color: #cbd5e1;
  transform: translateY(-1px);
}
.dash-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
}
.dash-card-badge {
  font-size: .6rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: .04em;
  flex-shrink: 0;
  font-family: 'Sen', sans-serif;
}
.dash-card-id {
  font-size: .62rem;
  color: var(--text-light);
  font-family: 'Century Gothic','CenturyGothic',sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-card-title {
  font-size: .8rem;
  font-weight: 700;
  color: var(--black);
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-family: 'Sen', sans-serif;
}
.dash-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.dash-card-meta-item {
  font-size: .68rem;
  color: var(--text-light);
  display: flex;
  align-items: center;
  gap: 3px;
}
.dash-card-value {
  font-size: 1rem;
  font-weight: 800;
  color: var(--black);
  font-family: 'Sen',sans-serif;
  line-height: 1;
}
.dash-card-value-sub {
  font-size: .65rem;
  color: var(--text-light);
  font-weight: 400;
}
.dash-card-footer {
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dash-card-tag {
  font-size: .62rem;
  color: var(--text-light);
}
/* Variantes couleurs selon type bat */
.dash-card.c-log  { border-top-color: #2d7a4f; }
.dash-card.c-bur  { border-top-color: #5ba3d9; }
.dash-card.c-com  { border-top-color: #e879a0; }
.dash-card.c-act  { border-top-color: #6b5fd6; }
.dash-card.c-alt  { border-top-color: #9b4fa6; }
.dash-card.c-mix  { border-top-color: #f97316; }
.dash-card.c-inv  { border-top-color: #16a34a; }
.dash-card.c-uti  { border-top-color: #2563eb; }
.dash-card.c-off  { border-top-color: #c2770a; }

/* ── Typo dans les widgets dashboard ── */
/* Header du widget : titre = Sen */
.dash-widget-title,
.dash-toolbar-title,
.dash-cat-name,
.dash-tab {
  font-family: 'Sen', sans-serif !important;
}
/* Tout le CONTENU d'un widget = Century Gothic, sans exception */
.dash-widget-body,
.dash-widget-body * {
  font-family: 'Century Gothic','CenturyGothic',sans-serif !important;
}
/* Les titres de cartes à l'intérieur du widget restent Sen */
.dash-widget-body .dash-card-title {
  font-family: 'Sen', sans-serif !important;
}

/* ── Widgets formes libres ── */
.dash-shape-widget {
  border:none !important;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.dash-shape-canvas {
  flex:1;
  width:100%;
  min-height:140px;
}
.shape-edit-bar {
  display:none;
  flex-wrap:wrap;
  gap:6px;
  padding:8px 12px;
  border-top:1px solid var(--border);
  background:var(--bg);
}
.dash-edit .shape-edit-bar { display:flex; }
.shape-color-btn {
  width:20px;height:20px;border-radius:50%;border:2px solid transparent;
  cursor:pointer;transition:transform .1s;
}
.shape-color-btn:hover,.shape-color-btn.active { border-color:#000;transform:scale(1.2); }
.shape-tool-btn {
  padding:3px 8px;border:1px solid var(--border);border-radius:4px;
  background:var(--white);cursor:pointer;font-size:.7rem;
  font-family:'Sen',sans-serif;font-weight:700;
}
.shape-tool-btn.active { background:var(--red-soft);border-color:var(--red);color:var(--red); }

/* ── Widgets carte Leaflet ── */
.dash-map-widget { border:none !important; overflow:hidden; z-index:1; }
.dash-map-container { flex:1;width:100%;min-height:200px; }

/* ── Onglets dashboard (style Excel) ── */
.dash-tabs-bar {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding: 12px 24px 0;
  background: var(--bg);
  border-bottom: 2px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
}
.dash-tabs-bar::-webkit-scrollbar { display:none; }
.dash-tab {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px 6px;
  font-size: .75rem;
  font-family: 'Sen', sans-serif;
  font-weight: 600;
  color: var(--text-light);
  background: var(--bg);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, color .12s;
  position: relative;
  top: 2px;
  min-width: 80px;
  max-width: 160px;
}
.dash-tab:hover { background: var(--white); color: var(--text); }
.dash-tab.active {
  background: var(--white);
  color: var(--black);
  border-color: var(--border);
  border-bottom-color: var(--white);
  z-index: 1;
  font-weight: 700;
}
.dash-tab-name {
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.dash-tab input.dash-tab-rename {
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  color: inherit;
  width: 100%;
  padding: 0;
}
.dash-tab-close {
  opacity: 0;
  font-size: .7rem;
  line-height: 1;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  flex-shrink: 0;
  color: var(--text-light);
}
.dash-tab:hover .dash-tab-close,
.dash-tab.active .dash-tab-close { opacity: 1; }
.dash-tab-close:hover { background: var(--red-soft); color: var(--red); }
.dash-tab-add {
  padding: 6px 10px;
  font-size: .85rem;
  color: var(--text-light);
  cursor: pointer;
  border-radius: 5px 5px 0 0;
  transition: background .12s;
  top: 2px;
  position: relative;
  line-height: 1;
}
.dash-tab-add:hover { background: var(--white); color: var(--text); }

/* ══════════════════════════════════════════════════════
   RESPONSIVE — 3 niveaux
   Mobile  : < 768px
   Tablette: 768px – 1024px
   Desktop : > 1024px (styles de base)
   ══════════════════════════════════════════════════════ */

/* ── Variables responsive ── */
:root {
  --sidebar-w: 210px;
}

/* Burger — masqué par défaut (desktop) */
#mob-burger { display: none; }
#mob-nav-overlay { display: none; }
#mob-params-burger { display: none; }
#mob-params-overlay { display: none; }
/* Bouton fermeture sticky formulaire — masqué sur desktop */
.mob-modal-close { display: none; }
/* Bouton toggle métadonnées éditeur — masqué sur desktop */
.fme-meta-toggle-btn { display: none; }
/* Boutons exit menus burger — masqués sur desktop */
#mob-nav-close { display: none; }
.mob-params-nav-close { display: none; }

/* ─────────────────────────────────────────────────────
   TABLETTE (768px – 1024px) — ajustements légers
   ───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Sidebar légèrement plus étroite */
  aside { width: 180px; }
  .page-header { padding: 12px 18px; }
  #biens-top-zone { padding: 12px 18px 8px; }
  #biens-table-zone { padding: 0 18px 12px; }
  .dash-grid { width: calc(100% - 36px); margin: 12px 18px 0; }
  .dash-toolbar { padding: 10px 18px 0; }
  .dash-catalogue { margin: 10px 18px 0; }
  .dash-tabs-bar { padding: 10px 18px 0; }
  /* Fiches côte à côte : limiter les slots */
  #fiche-slot-bien { flex-basis: 720px; width: 720px; max-width: 720px; }
  #fiche-slot-offre, #fiche-slot-transaction { flex-basis: 460px; width: 460px; max-width: 460px; }
  .modal-with-drawer-row > .modal { flex-basis: 900px; width: 900px; max-width: 900px; }
  .modal-with-drawer-row > #bien-drawer { flex-basis: 560px; width: 560px; max-width: 560px; }
}

/* ─────────────────────────────────────────────────────
   MOBILE (< 768px)
   ───────────────────────────────────────────────────── */
@media (max-width: 767px) {

  /* ── Layout shell ── */
  .shell { flex-direction: column; }
  html, body { overflow: hidden; }

  /* ── Sidebar masquée → burger drawer ── */
  aside { display: none; }
  aside.mob-open {
    display: flex;
    position: fixed;
    inset: 0 auto 0 0;
    width: 260px;
    z-index: 10000;
    box-shadow: 4px 0 24px rgba(0,0,0,.3);
    overflow-y: auto;
    padding-top: env(safe-area-inset-top, 0px);
  }

  /* Bouton fermeture menu principal */
  #mob-nav-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    right: 10px;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    color: rgba(255,255,255,.8);
    font-size: 1rem;
    cursor: pointer;
    flex-shrink: 0;
    z-index: 10001;
  }
  #mob-nav-close:hover { background: rgba(255,255,255,.22); color: #fff; }

  /* Overlay burger */
  #mob-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 9999;
  }
  #mob-nav-overlay.open { display: block; }

  /* Bouton burger */
  #mob-burger {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    left: calc(env(safe-area-inset-left, 0px) + 10px);
    z-index: 199;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--white);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
  }
  #mob-burger svg { width: 18px; height: 18px; color: var(--text); }
  /* Overlays et modals au-dessus du burger sur mobile */
  .overlay { z-index: 200 !important; }
  #modal-bien, #modal-transaction, #modal-offre-new { z-index: 202 !important; }
  #modal-historique { z-index: 210 !important; }
  #modal-confirm-delete, #modal-confirm-selection { z-index: 1100 !important; }
  #modal-forgot-password, #modal-reset-password { z-index: 1200 !important; }

  /* ── Page header — décalé pour le burger fixe ── */
  /* Le shell a déjà du padding-top pour le notch ; le header n'en a pas besoin */
  .page-header {
    padding: 10px 14px 10px 60px;
    gap: 8px;
    flex-wrap: wrap;
    min-height: 56px;
    flex-shrink: 0;
  }
  .page-header h2 { font-size: 1rem; }
  .page-header-actions { display: flex; flex-wrap: wrap; gap: 6px; }

  /* ── Zone filtre / tableau ── */
  #biens-top-zone { padding: 10px 12px 8px; }
  #biens-table-zone { padding: 0 12px 10px; }

  /* ── Zones filtre demandes/loyers ── */
  #dp-top-zone, #ly-top-zone { padding: 10px 12px 8px; }
  #dp-table-scroll, #ly-table-scroll { margin: 0 12px; }
  #dp-pagination-bar, #ly-pagination-bar { padding: 8px 12px 10px; }

  /* ── Panneaux colonnes → bottom sheet sur mobile ── */
  #col-panel,
  .col-panel-shared {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto !important;
    border-radius: var(--radius) var(--radius) 0 0;
    max-height: 70vh;
    overflow-y: auto;
    box-shadow: 0 -4px 24px rgba(0,0,0,.18);
    z-index: 5000;
    min-width: unset;
    width: 100%;
  }

  /* ── Filtres ── */
  #filter-panel .filter-grid, .filter-panel .filter-grid {
    grid-template-columns: 1fr;
  }

  /* ── Tableaux — scroll horizontal + sticky col ── */
  #biens-table-scroll, .biens-table-scroll { overflow-x: auto; }
  #biens-table, #trans-table, #offres-table {
    min-width: 600px;
  }
  #biens-table th:first-child,
  #biens-table td:first-child,
  #trans-table th:first-child,
  #trans-table td:first-child,
  #offres-table th:first-child,
  #offres-table td:first-child {
    position: sticky;
    left: 0;
    background: var(--white);
    z-index: 5;
  }
  #biens-table thead th:first-child,
  #trans-table thead th:first-child,
  #offres-table thead th:first-child {
    background: var(--thead);
    z-index: 11;
  }

  /* ── Lignes de tableau plus compactes ── */
  #biens-table td, #trans-table td, #offres-table td,
  #dp-table td, #ly-table td { padding: 4px 8px; font-size: .74rem; }

  /* ── Pagination ── */
  #pagination-bar, .pagination-bar { gap: 8px; flex-wrap: wrap; }
  #dp-pagination-bar, #ly-pagination-bar { padding: 10px 12px 12px; }
  .per-page-group { display: none; }
  .pagination-controls { flex-wrap: wrap; gap: 4px; }
  .pagination-info { width: 100%; text-align: center; }

  /* ── Formulaires — 1 colonne ── */
  .form-grid { grid-template-columns: 1fr; }
  .form-full { grid-column: 1; }
  .form-actions {
    flex-direction: column;
    gap: 8px;
  }
  .form-actions .btn { width: 100%; justify-content: center; }

  /* Hauteur min tactile pour champs interactifs */
  input, select, textarea, .btn, .toggle-switch, .page-btn {
    min-height: 44px;
  }
  .btn-sm { min-height: 36px; }
  textarea { min-height: 68px; }
  .toggle-switch { min-height: unset; width: 44px; height: 26px; }
  .toggle-slider::before { width: 18px; height: 18px; }
  .toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); }

  /* ── Modals — volet depuis le bas ── */
  .overlay {
    align-items: flex-end;
    padding: 0;
  }
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    /* Ne pas dépasser le bas de la safe-area supérieure (encoche / Dynamic Island) */
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 6px);
    border-radius: 12px 12px 0 0;
    border-top: 3px solid var(--red);
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding: 10px 16px 24px;  /* top réduit : le pill occupe l'espace haut */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* ── Pill indicateur de volet — tous les modaux standards ── */
  .overlay:not(#modal-bien):not(#modal-transaction):not(#modal-offre-new):not(#modal-fiche):not(#modal-etude-dashboard):not(#modal-fiche-transaction) > .modal::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: 2px auto 12px;
    flex-shrink: 0;
  }

  /* Fiches : overlay scrollable, aligné en haut */
  #modal-fiche.open {
    align-items: flex-start;
    padding: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Fiches côte à côte → stack vertical */
  #fiche-panels-row {
    flex-direction: column;
    width: 100%;
    max-width: 100%;
  }
  #fiche-slot-bien,
  #fiche-slot-offre,
  #fiche-slot-transaction {
    flex: none;
    width: 100%;
    max-width: 100%;
    max-height: none;
  }
  /* Ordre visuel mobile : bien en haut, offre/transaction en dessous */
  #fiche-slot-bien        { order: 1; }
  #fiche-slot-offre       { order: 2; }
  #fiche-slot-transaction { order: 3; }
  /* Chaque slot prend 100% de largeur, scroll interne délégué à l'overlay */
  #fiche-slot-bien .modal,
  #fiche-slot-offre .modal,
  #fiche-slot-transaction .modal {
    max-height: none !important;
    overflow-y: visible !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
  }
  /* Header sticky dans chaque slot */
  .fiche-slot-hdr {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--white);
    padding-top: 12px;
    margin-top: -4px;
  }

  /* Modal formulaire + drawer → stack vertical */
  .modal-with-drawer-row {
    flex-direction: column;
    width: 100%;
    max-width: 100%;
  }
  .modal-with-drawer-row > .modal {
    flex: none;
    width: 100%;
    max-width: 100%;
    max-height: none;
  }
  .modal-with-drawer-row > #bien-drawer {
    flex: none;
    width: 100%;
    max-width: 100%;
    height: 70vh;
    max-height: 70vh;
  }
  #bien-drawer { width: 100%; max-width: 100%; flex-basis: auto; }

  /* ── Grille fiche ── */
  .fiche-grid { grid-template-columns: 1fr; }

  /* Fiche bien : grille 2 colonnes → colonne unique */
  .fiche-bien-grid {
    grid-template-columns: 1fr !important;
    width: 100%;
  }
  /* Fiche offre : idem */
  .fiche-offre-grid {
    grid-template-columns: 1fr !important;
    width: 100%;
  }
  /* Carte : largeur 100%, hauteur plafonnée */
  .fiche-map-wrap {
    width: 100% !important;
    max-height: 250px !important;
    min-height: 0 !important;
    flex: none !important;
  }
  #fiche-map {
    height: 250px !important;
    min-height: 0 !important;
  }
  /* Encarts liés (offres, transactions) : scroll horizontal natif si débordement */
  #fi-offres-section,
  #fi-offres-section + .fiche-section {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Colonne droite fiche bien : pas de scroll interne, flux naturel */
  .fiche-bien-grid > div:last-child {
    overflow-y: visible;
  }

  /* ── Stats ── */
  .stats-grid { grid-template-columns: 1fr; }

  /* ── Params layout ── */
  .params-layout { grid-template-columns: 1fr; }
  /* Params nav → drawer mobile */
  .params-nav {
    display: none;
    position: fixed;
    inset: 0 auto 0 0;
    width: 260px;
    z-index: 10000;
    background: var(--white);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    flex-direction: column;
    box-shadow: 4px 0 24px rgba(0,0,0,.2);
    padding: 20px 10px;
  }
  .params-nav.mob-open { display: flex; }

  /* Bouton fermeture menu paramètres */
  .mob-params-nav-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--white);
    color: var(--text);
    font-size: .85rem;
    cursor: pointer;
    flex-shrink: 0;
    z-index: 10001;
  }

  #mob-params-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 9999;
  }
  #mob-params-overlay.open { display: block; }
  #mob-params-burger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--white);
    cursor: pointer;
    flex-shrink: 0;
  }
  #mob-params-burger svg { width: 18px; height: 18px; color: var(--text); }

  /* ── Formulaires Bien / Transaction / Offre — layout mobile ── */
  /* Modal plein écran, scroll sur lui-même */
  /* Overlay formulaires → scrollable pour permettre d'atteindre le bien-drawer en dessous */
  #modal-bien,
  #modal-transaction,
  #modal-offre-new {
    overflow-y: auto !important;
    align-items: flex-start !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Bouton fermeture fixe sur les formulaires plein-écran */
  #modal-bien .mob-modal-close,
  #modal-transaction .mob-modal-close,
  #modal-offre-new .mob-modal-close {
    position: fixed;
    top: 12px;
    right: 16px;
    z-index: 9999;
  }
  #modal-bien .modal,
  #modal-transaction .modal,
  #modal-offre-new .modal {
    max-height: none !important;
    height: auto !important;
    min-height: 100vh;
    border-radius: 0 !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
  }
  /* Bien-drawer : hauteur auto, scroll naturel dans l'overlay parent */
  .modal-with-drawer-row > #bien-drawer {
    height: auto !important;
    max-height: none !important;
  }
  /* Header bien-drawer sticky dans l'overlay qui scrolle */
  #bien-drawer-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--white);
  }
  /* Footer bien-drawer sticky en bas */
  #bien-drawer-footer {
    position: sticky;
    bottom: 0;
    background: var(--white);
    z-index: 20;
  }
  /* Wrapper interne carte+form → stack vertical, plus d'overflow:hidden */
  #modal-bien .modal > div,
  #modal-transaction .modal > div,
  #modal-offre-new .modal > div {
    flex-direction: column !important;
    overflow: visible !important;
    height: auto !important;
    flex: none !important;
  }
  /* Colonne carte → pleine largeur */
  #modal-bien .modal > div > div:first-child,
  #modal-transaction .modal > div > div:first-child,
  #modal-offre-new .modal > div > div:first-child {
    width: 100% !important;
    flex-shrink: 1 !important;
  }
  /* Cartes → hauteur fixe réduite */
  #bien-map, #tm-map, #om-map {
    min-height: 200px !important;
    max-height: 200px !important;
    height: 200px !important;
  }
  /* Colonnes formulaire → pleine largeur, scroll délégué au modal */
  #form-col, #tm-form-col, #om-form-col {
    flex: none !important;
    width: 100% !important;
    overflow-y: visible !important;
    min-width: 0;
  }

  /* ── Scroll tableaux ── */
  /* Scroll H+V sur tous les conteneurs de table */
  #biens-table-scroll, .biens-table-scroll,
  #t-table-scroll, #o-table-scroll {
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }
  #biens-table, #trans-table, #offres-table {
    min-width: 800px;
  }
  /* Filtre ouvert → max-height pour ne pas écraser le tableau */
  #filter-panel {
    max-height: 45vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Zones tableau : laisser flex gérer la hauteur naturellement */
  #biens-table-zone {
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* ── Profil ── */
  .profil-hero { flex-direction: column; align-items: flex-start; gap: 14px; }
  .profil-grid, .profil-grid-3 { grid-template-columns: 1fr; }
  .profil-cards-grid { grid-template-columns: 1fr; }
  .roles-grid { grid-template-columns: 1fr; }

  /* ── Dashboard widgets — colonne unique ── */
  .dash-grid { width: calc(100% - 24px); margin: 10px 12px 0; min-height: 200px; }

  /* ── Page header actions — empiler sur mobile ── */
  #biens-top-zone .page-header-actions,
  .selection-bar { flex-wrap: wrap; }

  /* ── Panneau notifs ── */
  .notif-panel { width: 100%; }

  /* ── Toast ── */
  #toast { bottom: 12px; right: 12px; left: 12px; }

  /* ── Dashboard tabs ── */
  .dash-tabs-bar { padding: 8px 12px 0; }
  .dash-toolbar { padding: 8px 12px 0; }
  .dash-catalogue { margin: 8px 12px 0; }

  /* ── Mod 2 — Boutons header : icône seule ── */
  .page-header .btn-label { display: none; }
  .page-header .compte-info { display: none; }
  .page-header .compte-chevron { display: none; }

  /* ── Mod 3 — Croix fermeture sticky formulaire ── */
  .mob-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    align-self: flex-end;
    z-index: 50;
    width: 34px;
    height: 34px;
    margin-bottom: 4px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--white);
    color: var(--text);
    font-size: 1rem;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
  }

  /* ── Mod 4 — Pages tableau : chaque page remplit 100dvh, scroll interne ── */
  /* main ne scrolle plus ; chaque page est un écran complet en flex column */
  html, body { overflow: hidden; }
  main { overflow: hidden !important; }

  /* Pages tableau : height:100% hérité de main (100vh), flex column */
  #page-biens.active,
  #page-transactions.active,
  #page-offres.active,
  #page-demandes.active,
  #page-loyers.active {
    height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Supprimer les marges latérales sur mobile pour utiliser tout l'espace */
  #dp-table-scroll, #ly-table-scroll { margin: 0 !important; }

  /* Le scroll container de table prend tout l'espace restant */
  #biens-table-zone {
    flex: 1 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: auto !important;
  }
  #biens-table-scroll, .biens-table-scroll {
    flex: 1 !important;
    overflow: auto !important;
    height: auto !important;
    min-height: 0 !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Études : scroll vertical natif */
  #page-etudes.active {
    height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  /* Page-header : taille naturelle, ne doit PAS prendre le flex restant */
  #page-etudes > .page-header {
    flex: none !important;
    overflow: visible !important;
  }
  /* Zone de contenu : prend tout l'espace restant et scrolle */
  #page-etudes > div:not(.page-header) {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
  }

  /* Dashboard : scroll vertical natif */
  #page-dashboard.active {
    height: 100% !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Params : écran fixe, tout visible sans scroll de page */
  #page-params.active {
    height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Params layout → flex colonne pour propager la hauteur (remplace grid sur mobile) */
  .params-layout {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    height: auto !important;
  }
  /* Params content → flex colonne, remplit la hauteur restante */
  .params-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    height: auto !important;
    padding: 0 !important;
    align-self: auto !important;
  }
  /* Tabs formulaires (profil, rôles, db, sso) : scroll interne */
  .param-tab.active {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    height: auto !important;
    padding: 16px !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Tabs avec table : chaîne flex vers scroll container */
  #ptab-users.active,
  #ptab-logs.active,
  #ptab-notifs.active {
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    height: auto !important;
    padding: 12px 12px 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  /* Cards dans ces tabs */
  #ptab-users > .param-card,
  #ptab-logs > .param-card,
  #ptab-notifs > .param-card:last-child,
  #ptab-formulaires > .param-card:last-child {
    flex: 1 !important;
    min-height: 200px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 12px;
  }
  /* Card "envoyer notif" : taille naturelle seulement */
  #ptab-notifs > .param-card:first-child {
    flex: none !important;
    flex-shrink: 0 !important;
    min-height: 0 !important;
  }
  /* Scroll container : prend tout l'espace, scroll H+V */
  .param-table-scroll {
    flex: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Safe area iPhone notch / home bar ── */
  /* Le shell recule du notch — tout le contenu commence dessous */
  .shell {
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    box-sizing: border-box;
    height: 100vh;     /* fallback navigateurs anciens */
    height: 100dvh;    /* navigateurs modernes — s'adapte à la barre d'adresse */
  }
  main {
    height: 100%;  /* hérite de la hauteur du shell */
    min-height: 0;
  }
  .modal { padding-bottom: calc(24px + var(--safe-bottom)); }
  /* Padding bottom home bar : sur la zone scrollable du modal études */
  #modal-etude-dashboard > .modal > div:last-child {
    padding-bottom: calc(20px + var(--safe-bottom)) !important;
  }
  #toast { bottom: calc(12px + var(--safe-bottom)); right: 12px; left: 12px; }
  .notif-panel-footer { padding-bottom: calc(12px + var(--safe-bottom)); }
  aside.mob-open { padding-bottom: var(--safe-bottom); }
  /* Overlays plein écran (bien/transaction/offre) : ne pas cacher sous le notch */
  #modal-bien, #modal-transaction, #modal-offre-new {
    padding-top: env(safe-area-inset-top, 0px) !important;
  }
  /* Boutons fermeture fixés sur ces modals */
  #modal-bien .mob-modal-close,
  #modal-transaction .mob-modal-close,
  #modal-offre-new .mob-modal-close {
    top: calc(12px + env(safe-area-inset-top, 0px));
  }

  /* ── Tap targets accessibles (min 44px) ── */
  .nav-sub-item { min-height: 44px; display: flex; align-items: center; }
  .row-action-btn { min-height: 44px; min-width: 44px; }
  /* Float bar : garder les boutons compacts pour ne pas déborder */
  #row-actions-float .row-action-btn { min-height: 32px; min-width: 32px; width: 32px; height: 32px; }
  .page-btn { min-height: 44px; min-width: 44px; }
  .notif-item { min-height: 44px; }
  .compte-dropdown-item { min-height: 44px; }
  .params-nav-item { min-height: 44px; }

  /* ── Scroll momentum iOS ── */
  .notif-list,
  #biens-table-scroll,
  .biens-table-scroll,
  #t-table-scroll,
  #o-table-scroll { -webkit-overflow-scrolling: touch; }

  /* ── Focus visible accessibilité ── */
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  a:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

  /* ── Tableaux → Cards sur mobile (commenté — décommenter si souhaité) ──
  #biens-table thead, #trans-table thead, #offres-table thead { display: none; }
  #biens-table tr, #trans-table tr, #offres-table tr {
    display: block; border: 1px solid var(--border); border-radius: var(--radius);
    margin-bottom: 8px; padding: 8px 0; background: var(--white);
  }
  #biens-table td, #trans-table td, #offres-table td {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 6px 12px; border-bottom: none; white-space: normal; text-align: right; gap: 12px;
  }
  #biens-table td::before, #trans-table td::before, #offres-table td::before {
    content: attr(data-label); font-size: .62rem; text-transform: uppercase;
    letter-spacing: .06em; color: var(--text-light); font-weight: 700; flex-shrink: 0; text-align: left;
  }
  ── */
}

/* ── Tableau réponses formulaires : colonnes secondaires masquées sur mobile ── */
@media (max-width: 767px) {
  #fm-table th:nth-child(3),
  #fm-table td:nth-child(3),
  #fm-table th:nth-child(5),
  #fm-table td:nth-child(5),
  #fm-table th:nth-child(6),
  #fm-table td:nth-child(6) { display: none; }
  #fm-table { min-width: 0; }
}

/* ══════════════════════════════════════════════════════
   TABLETTE (768px – 1024px) — volets identiques mobile
   ══════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1024px) {

  /* ── Tailles de texte légèrement réduites ── */
  td { font-size: .82rem; }
  th { font-size: .66rem; }
  label { font-size: .66rem; }
  .btn { font-size: .74rem; padding: 8px 14px; }
  .nav-item { font-size: .84rem; padding: 11px 18px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-grid { width: calc(100% - 36px); }
  .params-layout { grid-template-columns: 180px 1fr; }

  /* ── Overlays → volets depuis le bas (comme mobile) ── */
  .overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 88vh;
    border-radius: 14px 14px 0 0;
    border-top: 3px solid var(--red);
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    padding: 10px 24px 28px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* ── Pill indicateur ── */
  .overlay:not(#modal-bien):not(#modal-transaction):not(#modal-offre-new):not(#modal-fiche):not(#modal-etude-dashboard):not(#modal-fiche-transaction) > .modal::before {
    content: '';
    display: block;
    width: 44px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: 2px auto 14px;
    flex-shrink: 0;
  }

  /* ── Bouton X — visible sur tablette aussi ── */
  .mob-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    align-self: flex-end;
    z-index: 50;
    width: 36px;
    height: 36px;
    margin-bottom: 6px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--white);
    color: var(--text);
    font-size: 1rem;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
  }
  #modal-bien .mob-modal-close,
  #modal-transaction .mob-modal-close,
  #modal-offre-new .mob-modal-close {
    position: fixed;
    top: 12px;
    right: 16px;
    z-index: 9999;
  }

  /* ── Dashboard étude → volet tablette (même qu'iPhone) ── */
  .etude-modal-handle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 100%;
    padding: 10px 0 6px;
    cursor: grab;
    touch-action: pan-y;
  }
  .etude-modal-handle::after {
    content: '';
    display: block;
    width: 44px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
  }
  #modal-etude-dashboard {
    padding: 0 !important;
    align-items: flex-end !important;
    overflow: hidden !important;
  }
  #modal-etude-dashboard > .modal {
    width: 100% !important;
    max-width: 100% !important;
    height: 90dvh;
    max-height: 90dvh;
    border-radius: 16px 16px 0 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  #modal-etude-dashboard > .modal > div:last-child {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain;
    padding: 16px 24px 24px !important;
  }
  #modal-etude-dashboard > .modal > div:nth-child(2) { flex-shrink: 0 !important; }
  #modal-etude-dashboard > .modal > div:nth-child(3) {
    flex-shrink: 0 !important;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    padding: 16px 24px 14px !important;
  }

  /* ── Formulaires Bien / Transaction / Offre — plein écran tablette ── */
  #modal-bien,
  #modal-transaction,
  #modal-offre-new {
    overflow-y: auto !important;
    align-items: flex-start !important;
    -webkit-overflow-scrolling: touch;
  }
  #modal-bien .modal,
  #modal-transaction .modal,
  #modal-offre-new .modal {
    max-height: none !important;
    height: auto !important;
    min-height: 100vh;
    border-radius: 0 !important;
    overflow-y: visible !important;
  }

  /* ── Fiche → stack vertical sur tablette ── */
  #modal-fiche.open {
    align-items: flex-start;
    padding: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #fiche-panels-row {
    flex-direction: column;
    width: 100%;
    max-width: 100%;
  }
  #fiche-slot-bien, #fiche-slot-offre, #fiche-slot-transaction {
    flex: none;
    width: 100%;
    max-width: 100%;
    max-height: none;
  }
  #fiche-slot-bien .modal,
  #fiche-slot-offre .modal,
  #fiche-slot-transaction .modal {
    max-height: none !important;
    overflow-y: visible !important;
    border-radius: 0 !important;
  }

  /* ── Modal bien-drawer → pleine largeur ── */
  .modal-with-drawer-row {
    flex-direction: column;
    width: 100%;
    max-width: 100%;
  }
  .modal-with-drawer-row > .modal {
    flex: none;
    width: 100%;
    max-width: 100%;
    max-height: none;
  }
  #bien-drawer { width: 100%; max-width: 100%; flex-basis: auto; }

  /* ── Formulaires — 2 colonnes max ── */
  .form-grid { grid-template-columns: 1fr 1fr; }
}

/* Drag handle — masqué sur desktop, affiché uniquement sur mobile par la media query */
.etude-modal-handle { display: none; }

/* ══════════════════════════════════════════════════
   ÉTUDES — Grille de cartes
   ══════════════════════════════════════════════════ */
#etudes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.etude-study-card { transition: box-shadow .15s, transform .15s; }

/* ── Études page scroll ── */
#page-etudes > div:not(.page-header) {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* Le page-header ne doit jamais scroller */
#page-etudes > .page-header {
  overflow: visible;
  flex-shrink: 0;
}
#page-etudes.active {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════
   DASHBOARD ÉTUDE OVERLAY
   ══════════════════════════════════════════════════ */
/* Script row output terminal */
.etude-script-row [id^="script-output-"] {
  font-size: .65rem;
  max-height: 320px;
  overflow-y: auto;
}

/* ══════════════════════════════════════════════════
   FORMULAIRES — onglet params
   ══════════════════════════════════════════════════ */
#fm-form-list {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  flex-wrap: nowrap;
  min-height: 36px;
}
#ptab-formulaires > div:nth-child(2) { /* en-tête formulaire */
  flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════
   MOBILE (< 768px) — Études + Baromètre + Formulaires
   ══════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Page études ── */
  #page-etudes > div:not(.page-header) { padding: 12px 12px 16px 12px; }
  #etude-search { max-width: 100% !important; }
  #etudes-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* ── Drag handle — visible seulement sur mobile ── */
  .etude-modal-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 100%;
    padding: 10px 0 6px;   /* zone tactile large pour le swipe */
    cursor: grab;
    touch-action: pan-y;
  }
  .etude-modal-handle::after {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
  }

  /* ── Dashboard étude — bottom sheet full-height ── */
  #modal-etude-dashboard {
    padding: 0 !important;
    align-items: flex-end !important;
    overflow: hidden !important;   /* l'overlay ne scrolle pas : c'est le modal qui gère */
  }
  #modal-etude-dashboard > .modal {
    width: 100% !important;
    max-width: 100% !important;
    /* Hauteur = plein écran moins la safe-area du haut (encoche / Dynamic Island)
       + 6px de marge visuelle pour que le drag handle soit bien visible */
    height: calc(100dvh - env(safe-area-inset-top, 0px) - 6px);
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 6px);
    border-radius: 14px 14px 0 0 !important;
    border-top: none !important;
    overflow: hidden !important;    /* le modal lui-même ne scrolle pas… */
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  /* …c'est le contenu (body div) qui scrolle */
  #modal-etude-dashboard > .modal > div:last-child {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain;
  }
  /* Accent bar — flex-shrink:0 pour qu'il garde sa hauteur */
  #modal-etude-dashboard > .modal > div:nth-child(2) {
    flex-shrink: 0 !important;
  }
  /* Header dashboard (3e enfant) — pas sticky (le flex column suffit) */
  #modal-etude-dashboard > .modal > div:nth-child(3) {
    flex-shrink: 0 !important;
    background: var(--white);
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 14px 16px 12px !important;
    border-bottom: 1px solid var(--border);
    z-index: 20;
  }
  #modal-etude-dashboard > .modal > div:nth-child(3) > div:last-child {
    width: 100%;
    justify-content: flex-start !important;
    flex-wrap: wrap;
    gap: 6px !important;
  }
  /* Texte "Réinitialiser" masqué → icône seule */
  #modal-etude-dashboard [onclick*="resetEtudeProgress"] .fa-rotate-left + *,
  #modal-etude-dashboard [onclick*="resetEtudeProgress"] { font-size: .75rem; }
  /* Fermer : toujours visible, taille tactile correcte */
  #modal-etude-dashboard [onclick*="closeEtudeDashboard"] {
    min-width: 44px;
    min-height: 44px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  /* Body dashboard padding réduit */
  #modal-etude-dashboard > .modal > div:last-child {
    padding: 12px 14px 20px !important;
    gap: 14px !important;
  }
  /* ── Réduire la section "Formulaires liés" — juste le titre + liste compacte ── */
  #etude-dash-formulaires .etude-form-row {
    padding: 6px 8px !important;
    font-size: .78rem !important;
  }
  /* ── Réduire la section "Fichiers de production" ── */
  #etude-dash-documents .etude-doc-row {
    padding: 6px 8px !important;
  }

  /* ── Script rows — sortie terminal ── */
  .etude-script-row [id^="script-output-"] {
    max-height: 180px;
    font-size: .62rem;
  }
  /* Script row padding réduit */
  .etude-script-row { padding: 8px 10px !important; }

  /* ── Suivi indicateurs baromètre ── */
  /* Empile le label et les boutons */
  #etude-section-suivi > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }

  /* ── Formulaires tab ── */
  #fm-form-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  /* Actions en-tête formulaire → colonne */
  #ptab-formulaires > div:nth-child(2) > div:last-child {
    width: 100%;
    justify-content: flex-start !important;
  }
  /* Masquer libellés longs sur petits boutons */
  #fm-btn-duplicate .fa-copy + *,
  #fm-btn-edit svg ~ * { display: none; }
  /* Stats formulaires 2 col → 1 col */
  #ptab-formulaires .stats-grid { grid-template-columns: 1fr 1fr; }

  /* Masquer colonnes fm-table moins importantes */
  #fm-table th:nth-child(4),
  #fm-table td:nth-child(4),
  #fm-table th:nth-child(5),
  #fm-table td:nth-child(5),
  #fm-table th:nth-child(6),
  #fm-table td:nth-child(6) { display: none; }

  /* ── Suivi baromètre — lignes ── */
  .baro-suivi-row {
    flex-wrap: wrap;
    padding: 8px 10px 8px 16px !important;
    gap: 6px !important;
  }
  .baro-suivi-row > span:first-child {
    width: 100%;       /* label prend toute la ligne */
    white-space: normal !important;
    flex: none !important;
  }
  .baro-suivi-source { display: none; } /* source masquée sur mobile */

  /* ── Modal baromètre indicateur ── */
  #modal-baro-ind .modal { max-height: 90dvh; overflow-y: auto; }

  /* ── Éditeur formulaire — bouton toggle métadonnées ── */
  .fme-meta-toggle-btn { display: flex; }
  .fme-meta-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: .82rem;
    font-weight: 700;
    color: var(--black);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .fme-meta-toggle-btn i { transition: transform .2s; font-size: .75rem; color: var(--text-light); }

  /* ── Éditeur formulaire — mobile ── */
  #modal-form-editor {
    overflow-y: auto !important;
    align-items: flex-start !important;
    -webkit-overflow-scrolling: touch;
  }
  #modal-form-editor .modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    min-height: 100vh;
    border-radius: 0 !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    padding: 10px 10px 32px;
  }
  /* Croix fermeture sticky */
  #modal-form-editor .mob-modal-close {
    position: sticky;
    top: 8px;
    z-index: 50;
    align-self: flex-end;
    margin-bottom: 8px;
  }
  /* Métadonnées : 1 colonne — style calqué sur "Nouveau bien" */
  #fme-meta-grid { grid-template-columns: 1fr !important; }
  #fme-meta-grid .field > label {
    font-size: .64rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
    color: var(--text-light) !important;
    font-family: 'Century Gothic','CenturyGothic',sans-serif !important;
  }
  #fme-meta-grid input:not([type="checkbox"]),
  #fme-meta-grid select,
  #fme-meta-grid textarea {
    font-size: .83rem !important;
    padding: 8px 11px !important;
    min-height: 44px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #fme-meta-grid textarea { min-height: 72px !important; }
  /* Checkbox cyclique : taille réduite */
  #fme-cyclique { width: 13px !important; height: 13px !important; flex-shrink: 0; }
  /* Texte long cyclique masqué */
  .fme-cyclique-desc { display: none; }
  /* Layout éditeur : 1 colonne pleine largeur */
  #fme-editor-layout {
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }
  /* Panneau aperçu temps réel : masqué */
  #fme-preview-iframe,
  #fme-sections-wrap ~ div { display: none !important; }
  /* Panneau sections : pleine largeur, scroll interne supprimé */
  #fme-sections-wrap {
    border-right: none !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  #fme-sections {
    max-height: none !important;
    overflow-y: visible !important;
    padding-right: 0 !important;
  }
  /* Champs dans les cartes de section — compacts mais cohérents */
  #modal-form-editor .field { min-width: 0; }
  #modal-form-editor input[type="checkbox"],
  #modal-form-editor input[type="radio"] {
    width: auto !important; min-height: auto !important;
    height: auto !important; flex-shrink: 0;
  }
  /* Inputs principaux hors meta-grid : taille reference "Nouveau bien" */
  #fme-sections input:not([type="checkbox"]):not([type="radio"]),
  #fme-sections select {
    font-size: .83rem;
    min-height: 40px;
    padding: 6px 10px;
    width: 100%;
    box-sizing: border-box;
  }
  #fme-sections textarea {
    font-size: .83rem;
    padding: 6px 10px;
    width: 100%;
    box-sizing: border-box;
  }
  /* Labels sections : style "Nouveau bien" */
  #fme-sections label,
  #fme-sections .fme-field-label-wrap {
    font-size: .64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-light);
  }
  /* Titre du modal */
  #modal-form-editor h3 {
    font-size: .88rem !important;
    font-weight: 800;
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
  }
  /* Pills : taille lisible sur mobile (= référence "Nouveau bien") */
  #modal-form-editor .fme-pill-toggle {
    font-size: .83rem;
    padding: 7px 14px;
    min-height: 38px;
  }
  /* Bouton toggle métadonnées — style discret cohérent */
  .fme-meta-toggle-btn {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-light);
    background: var(--bg);
  }
  /* Boutons d'action en bas */
  #modal-form-editor .modal-actions {
    flex-direction: column-reverse;
    gap: 10px;
  }
  #modal-form-editor .modal-actions .btn {
    width: 100%;
    justify-content: center;
    min-height: 48px;
    font-size: 1rem;
  }
}

/* ── Tablette (768px–1024px) — Études + Formulaires ── */
@media (min-width: 768px) and (max-width: 1024px) {
  #page-etudes > div { padding: 16px 18px; }
  #etudes-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
  }
  #modal-etude-dashboard > .modal {
    width: 96vw !important;
    max-width: 96vw !important;
  }
  /* Script row sortie terminal */
  .etude-script-row [id^="script-output-"] {
    max-height: 250px;
  }
}

/* ══════════════════════════════════════════════════
   PWA — Standalone display mode (ajouté via l'écran d'accueil)
   ══════════════════════════════════════════════════ */
@media (display-mode: standalone) {
  /* Hauteur dynamique — évite le bug 100vh sur iOS Safari standalone */
  .shell {
    height: 100vh;
    height: 100dvh;
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
}

/* Masquer le badge DB en standalone sur mobile — combinaison display-mode + max-width */
@media (display-mode: standalone) and (max-width: 767px) {
  #dbStatusBadge { display: none; }
}

/* ── PWA : navigation par geste — ne pas couper le contenu sur les bords ── */
@supports (padding: max(0px)) {
  @media (max-width: 767px) {
    .shell {
      padding-left: max(env(safe-area-inset-left, 0px), 0px);
      padding-right: max(env(safe-area-inset-right, 0px), 0px);
    }
    #mob-burger {
      left: max(calc(env(safe-area-inset-left, 0px) + 10px), 10px);
    }
  }
}

/* ══════════════════════════════════════════════════════════
   TRANSITIONS VOLETS — mobile + tablette (max-width: 1024px)
   .opening : classe temporaire présente seulement pendant l'animation
              d'entrée (retirée par JS après 400ms). Cela évite que
              sheetSlideUp se redéclenche lors du drag ou de la fermeture.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* Annuler le fadeIn global (qui déplace la vue) sur mobile/tablette */
  .overlay.open { animation: none; }

  /* ── Entrée : .opening seulement, jamais .open seul ── */
  .overlay:not(#modal-bien):not(#modal-transaction):not(#modal-offre-new):not(#modal-fiche).opening {
    animation: bgFadeIn .28s ease forwards;
  }
  .overlay:not(#modal-bien):not(#modal-transaction):not(#modal-offre-new):not(#modal-fiche).opening > .modal {
    animation: sheetSlideUp .32s cubic-bezier(0.32, 0.72, 0, 1);
  }

  /* ── Fermeture via bouton : glisse vers le bas ── */
  .overlay:not(#modal-bien):not(#modal-transaction):not(#modal-offre-new):not(#modal-fiche).closing {
    animation: bgFadeOut .22s ease forwards;
  }
  .overlay:not(#modal-bien):not(#modal-transaction):not(#modal-offre-new):not(#modal-fiche).closing > .modal {
    animation: sheetSlideDown .22s cubic-bezier(0.32, 0, 0.67, 0) forwards;
  }

  /* ── Snap-back : spring si le drag est abandonné ── */
  .modal.snapping {
    animation: none !important;
    transition: transform .4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    transform: translateY(0) !important;
  }
}

/* ── Éditeur rich-text inline (titre / description section) ── */
.fme-rich-wrap,
.fme-field-label-wrap { border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--white); }
.fme-rich-tb { display:none; gap:2px; padding:3px 5px; background:var(--bg); border-bottom:1px solid var(--border); }
.fme-rich-wrap:focus-within .fme-rich-tb,
.fme-field-label-wrap:focus-within .fme-rich-tb { display:flex; }
.fme-rich-btn { padding:1px 8px; border:1px solid var(--border); border-radius:3px; background:var(--white); font-size:.8rem; cursor:pointer; line-height:1.5; color:var(--black); }
.fme-rich-btn:hover { background:var(--border); }
.fme-rich-btn-u { text-decoration:underline; }
.fme-rich-btn-i { font-style:italic; }
.fme-rich-ce { outline:none; white-space:normal; word-break:break-word; line-height:1.5; cursor:text; }
.fme-rich-ce:empty::before { content:attr(data-placeholder); color:var(--text-light); pointer-events:none; font-weight:400; font-style:italic; }
/* Forcer Century Gothic même sur du texte collé avec une autre police */
.fme-rich-ce, .fme-rich-ce * { font-family: 'Century Gothic','CenturyGothic',sans-serif !important; }
.fme-rich-ce em, .fme-rich-ce i { font-style:italic !important; display:inline; line-height:inherit; vertical-align:baseline; }
.fme-rich-ce strong, .fme-rich-ce b { font-weight:800 !important; display:inline; line-height:inherit; vertical-align:baseline; }
.fme-rich-ce u { text-decoration:underline !important; display:inline; line-height:inherit; vertical-align:baseline; }

/* ── Pill toggles éditeur formulaire (Requis, Condition, Cyclique…) ── */
.fme-pill-toggle {
  display: inline-flex; align-items: center;
  padding: 5px 12px; border-radius: 99px;
  font-size: .75rem; font-weight: 700; font-family: 'Sen', sans-serif;
  border: 1.5px solid var(--border); background: var(--white); color: var(--text-light);
  cursor: pointer; user-select: none; white-space: nowrap; line-height: 1.4;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.fme-pill-toggle:hover { border-color: #94a3b8; color: var(--black); }
/* ON — bleu par défaut */
.fme-pill-toggle.on {
  background: #1a56db; border-color: transparent; color: #fff;
  box-shadow: 0 0 0 2px rgba(26,86,219,.2);
}
/* ON — rouge pour "Requis" */
.fme-pill-toggle.red.on {
  background: var(--red); border-color: transparent; color: #fff;
  box-shadow: 0 0 0 2px rgba(228,5,33,.18);
}

/* ── Drag-and-drop champs éditeur formulaire ── */
.fme-field-card { transition: box-shadow .2s, border-color .2s, opacity .15s; }
.fme-field-card.fme-active {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 2px rgba(192,57,43,.15), 0 4px 18px rgba(192,57,43,.14) !important;
}
.fme-field-card.fme-dragging { opacity: .4; }
.fme-field-card.fme-drag-over-before { box-shadow: 0 -3px 0 0 #e41223 !important; }
.fme-field-card.fme-drag-over-after  { box-shadow: 0 3px 0 0 #e41223 !important; }
.fme-top-field-card.fme-dragging { opacity: .4; }
.fme-top-field-card.fme-drag-over-before { box-shadow: 0 -3px 0 0 #e41223 !important; }
.fme-top-field-card.fme-drag-over-after  { box-shadow: 0 3px 0 0 #e41223 !important; }
/* ── Glow champ actif dans l'aperçu ── */
.pv-field.pv-active {
  outline: 2px solid rgba(192,57,43,.5);
  outline-offset: 2px;
  border-radius: 4px;
  transition: outline .2s;
}
.fme-drag-handle {
  cursor: grab; color: #bbb; font-size: .9rem; padding: 0 4px 0 0;
  line-height: 1; user-select: none; flex-shrink: 0;
}
.fme-drag-handle:hover { color: #888; }
.fme-drag-handle:active { cursor: grabbing; }