/* =========================================================================
   Osiris — Portail foncier & viticole · MDCV  (v2, responsive + PWA)
   Palette : pierre calcaire, feuille de vigne, terre, lie-de-vin.
   ========================================================================= */
:root {
  --stone-50:#f7f5f0; --stone-100:#efebe2; --stone-200:#e2dccf; --stone-300:#cdc4b1;
  --ink:#2b2a26; --ink-soft:#6b6557;
  --vine:#3f5a3a; --vine-dk:#2c4029; --vine-lt:#e8eee4;
  --lees:#6e2a3c; --terra2:#b07b4c; --gold:#c19a4b;
  --line:#d9d2c4; --white:#fffefb;
  --ok:#3f5a3a; --warn:#b5822e; --bad:#9b3b34;
  --shadow-sm:0 1px 2px rgba(43,42,38,.06),0 1px 3px rgba(43,42,38,.08);
  --shadow-md:0 4px 14px rgba(43,42,38,.10);
  --shadow-lg:0 12px 40px rgba(43,42,38,.16);
  --radius:9px; --radius-sm:6px;
  --font-display:"Fraunces","Hoefler Text",Georgia,serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --topbar-h:52px; --controlbar-h:50px; --mobilemenu-h:58px;
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; height:100%; background:var(--stone-50); color:var(--ink); font-family:var(--font-body); font-size:14px; -webkit-font-smoothing:antialiased; }
#app { display:flex; flex-direction:column; height:100vh; height:100dvh; overflow:hidden; }
.ic { width:18px; height:18px; flex-shrink:0; }
.hidden { display:none !important; }
button { font-family:inherit; cursor:pointer; }

/* ============================ CHARGEMENT ============================ */
.loading { position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; background:var(--stone-50); z-index:9999; }
.loading.hidden { display:none; }
.spinner { width:38px; height:38px; border:3px solid var(--stone-200); border-top-color:var(--vine); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.ltext { color:var(--ink-soft); font-size:15px; }

/* ============================ EN-TÊTE ============================ */
.topbar { background:var(--vine-dk); color:var(--stone-50); display:flex; align-items:stretch; height:var(--topbar-h); flex-shrink:0; padding-right:8px; }
.brand { display:flex; align-items:center; gap:9px; padding:0 16px 0 14px; }
.brand-mark { width:26px; height:26px; }
.brand-text { display:flex; flex-direction:column; line-height:1.05; }
.brand-text strong { font-family:var(--font-display); font-size:18px; font-weight:600; letter-spacing:.2px; }
.brand-text span { font-size:10.5px; text-transform:uppercase; letter-spacing:1.5px; color:var(--gold); }
.menu { display:flex; align-items:stretch; gap:1px; }
.menu button { background:transparent; border:none; color:rgba(247,245,240,.72); padding:0 15px; display:flex; align-items:center; gap:7px; font-size:13.5px; font-weight:500; border-bottom:2.5px solid transparent; transition:.16s; }
.menu button:hover { color:var(--stone-50); background:rgba(255,255,255,.05); }
.menu button.active { color:var(--white); border-bottom-color:var(--gold); }
.menu button .lbl { white-space:nowrap; }
.topbar-spacer { flex:1; }

/* Filtre global (entonnoir) */
.global-filter { position:relative; display:flex; align-items:center; gap:7px; color:rgba(247,245,240,.85); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-sm); padding:0 12px; margin:9px 4px; font-size:13px; font-weight:500; }
.global-filter:hover { background:rgba(255,255,255,.13); color:#fff; }
.global-filter.active { background:var(--gold); color:var(--vine-dk); border-color:var(--gold); }
.global-filter .gf-badge { background:var(--lees); color:#fff; min-width:18px; height:18px; border-radius:9px; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 5px; }
.global-filter.active .gf-badge { background:var(--vine-dk); color:var(--gold); }

/* ============================ BARRE DE CONTRÔLE ============================ */
.controlbar { display:flex; align-items:center; gap:8px; padding:0 12px; height:var(--controlbar-h); background:var(--white); border-bottom:1px solid var(--line); flex-shrink:0; position:relative; z-index:50; }
.controlbar.form-mode .search-wrap, .controlbar.form-mode #columns-btn, .controlbar.form-mode #groupby-btn, .controlbar.form-mode #fav-btn, .controlbar.form-mode #export-btn { display:none !important; }
.form-back-inline { display:none; }

.ctrl-btn { position:relative; display:flex; align-items:center; gap:6px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-sm); height:36px; padding:0 11px; color:var(--ink); font-size:13px; font-weight:500; transition:.14s; }
.ctrl-btn:hover { border-color:var(--vine); color:var(--vine); }
.ctrl-btn.icon-only { padding:0; width:36px; justify-content:center; }
.ctrl-btn.active { background:var(--vine); color:#fff; border-color:var(--vine); }

.search-wrap { flex:1; position:relative; min-width:0; }
.search-box { display:flex; align-items:center; gap:7px; flex-wrap:wrap; background:var(--stone-50); border:1px solid var(--line); border-radius:var(--radius-sm); padding:5px 10px; min-height:36px; }
.search-box:focus-within { border-color:var(--vine); box-shadow:0 0 0 3px var(--vine-lt); background:var(--white); }
.search-ic { width:16px; height:16px; color:var(--ink-soft); flex-shrink:0; }
#search-input { flex:1; min-width:120px; border:none; background:transparent; outline:none; font-size:13.5px; color:var(--ink); }
#chips { display:contents; }
.chip { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:500; padding:3px 7px; border-radius:5px; white-space:nowrap; }
.chip.filter { background:var(--vine-lt); color:var(--vine-dk); }
.chip.group { background:#efe3d4; color:var(--terra2); }
.chip.hfilter { background:#e7e0ef; color:#5c4a8c; }
.chip .x { cursor:pointer; font-weight:700; opacity:.6; font-size:14px; line-height:1; }
.chip .x:hover { opacity:1; }

/* dropdown recherche */
.search-dropdown { position:absolute; top:calc(100% + 5px); left:0; right:0; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg); z-index:200; max-height:340px; overflow-y:auto; padding:5px; }
.sd-section-label { font-size:10.5px; text-transform:uppercase; letter-spacing:.8px; color:var(--ink-soft); padding:8px 10px 4px; font-weight:600; }
.sd-item { display:flex; align-items:center; gap:7px; padding:8px 10px; border-radius:var(--radius-sm); font-size:13px; cursor:pointer; }
.sd-item:hover { background:var(--vine-lt); }
.sd-key { font-weight:600; color:var(--vine); }
.sd-tag { margin-left:auto; font-size:10.5px; background:var(--stone-100); color:var(--ink-soft); padding:1px 7px; border-radius:10px; }

/* sélecteur de vues */
.view-switch { display:flex; align-items:center; flex-shrink:0; position:relative; }
.vs-desktop { display:flex; gap:2px; background:var(--stone-100); border-radius:var(--radius-sm); padding:3px; }
.vs-desktop button { width:34px; height:30px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; color:var(--ink-soft); border-radius:5px; transition:.14s; }
.vs-desktop button:hover { color:var(--vine); background:rgba(255,255,255,.6); }
.vs-desktop button.active { background:var(--white); color:var(--vine); box-shadow:var(--shadow-sm); }
.vs-mobile { display:none; align-items:center; gap:6px; background:var(--vine); color:#fff; border:none; border-radius:var(--radius-sm); height:36px; padding:0 12px; font-size:13px; font-weight:600; }
.vs-mobile .chev { width:15px; height:15px; }
.vs-mobile-menu { position:absolute; top:calc(100% + 5px); right:0; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg); z-index:200; padding:5px; min-width:170px; }
.vs-mobile-menu button { display:flex; align-items:center; gap:9px; width:100%; border:none; background:transparent; padding:10px 12px; border-radius:var(--radius-sm); font-size:14px; color:var(--ink); text-align:left; }
.vs-mobile-menu button:hover { background:var(--vine-lt); }
.vs-mobile-menu button.active { background:var(--vine-lt); color:var(--vine); font-weight:600; }

/* ============================ POPOVERS ============================ */
.popover { position:absolute; top:calc(100% + 6px); right:0; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg); z-index:300; min-width:230px; max-width:300px; padding:7px; }
#global-filter-pop { right:0; }
.po-label { font-size:10.5px; text-transform:uppercase; letter-spacing:.8px; color:var(--ink-soft); padding:7px 9px 5px; font-weight:600; }
.po-scroll { max-height:240px; overflow-y:auto; }
.po-item { display:flex; align-items:center; gap:8px; padding:8px 9px; border-radius:var(--radius-sm); font-size:13px; cursor:pointer; color:var(--ink); }
.po-item:hover { background:var(--vine-lt); }
.po-item .po-check { width:16px; height:16px; opacity:0; color:var(--vine); flex-shrink:0; }
.po-item.checked .po-check { opacity:1; }
.po-item.checked { color:var(--vine); font-weight:600; }
.po-item span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.po-sec { color:var(--terra2); font-weight:700; }
.po-del { width:15px; height:15px; opacity:.4; margin-left:auto; }
.po-del:hover { opacity:1; color:var(--bad); }
.po-divider { height:1px; background:var(--line); margin:5px 0; }
.po-add { display:flex; gap:6px; padding:6px 4px 3px; }
.po-add input { flex:1; border:1px solid var(--line); border-radius:var(--radius-sm); padding:7px 9px; font-size:13px; outline:none; }
.po-add input:focus { border-color:var(--vine); }
.po-add button { background:var(--vine); color:#fff; border:none; border-radius:var(--radius-sm); padding:0 13px; font-weight:600; font-size:13px; }

/* mobile "Plus" */
.mobile-more-pop { position:fixed; bottom:calc(var(--mobilemenu-h) + 8px); left:8px; right:8px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg); z-index:600; padding:6px; display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.mobile-more-pop button { display:flex; align-items:center; gap:9px; border:none; background:var(--stone-50); padding:13px 12px; border-radius:var(--radius-sm); font-size:13.5px; color:var(--ink); text-align:left; }
.mobile-more-pop button.active { background:var(--vine-lt); color:var(--vine); font-weight:600; }

/* ============================ ZONE PRINCIPALE ============================ */
.main { flex:1; overflow:hidden; display:flex; flex-direction:column; position:relative; }
.result-meta { display:flex; align-items:baseline; gap:14px; padding:8px 16px; font-size:13px; color:var(--ink-soft); background:var(--stone-50); border-bottom:1px solid var(--line); flex-shrink:0; }
.result-meta strong { color:var(--ink); font-size:15px; }
.surf-total { color:var(--vine); font-weight:600; }
.view-host { flex:1; overflow:auto; position:relative; }

/* ============================ VUE LISTE ============================ */
.list-scroll { height:100%; overflow:auto; }
table.grid { border-collapse:collapse; width:100%; font-size:13px; background:var(--white); }
table.grid thead th { position:sticky; top:0; z-index:10; background:var(--stone-100); border-bottom:2px solid var(--line); text-align:left; font-weight:600; color:var(--ink); white-space:nowrap; }
.th-inner { display:flex; align-items:center; gap:4px; padding:0; }
.th-label { flex:1; padding:9px 8px 9px 12px; cursor:pointer; user-select:none; display:flex; align-items:center; gap:5px; }
.th-label:hover { color:var(--vine); }
.sort-ic { font-size:9px; color:var(--vine); }
.th-menu { background:transparent; border:none; padding:6px 8px 6px 2px; color:var(--ink-soft); display:flex; align-items:center; opacity:.5; }
.th-menu:hover { opacity:1; color:var(--vine); }
.th-menu.filtered { opacity:1; color:var(--lees); }
table.grid th.num .th-inner { flex-direction:row-reverse; }
table.grid th.num .th-label { justify-content:flex-end; }
table.grid td { padding:8px 12px; border-bottom:1px solid var(--stone-100); vertical-align:top; }
table.grid td.num { text-align:right; font-variant-numeric:tabular-nums; }
table.grid td.mono { font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); }
table.grid td.neg { color:var(--bad); }
table.grid td.pos { color:var(--vine); }
table.grid tbody tr[data-uid] { cursor:pointer; }
table.grid tbody tr[data-uid]:hover { background:var(--vine-lt); }
.group-row { background:var(--stone-50); cursor:pointer; }
.group-row:hover { background:var(--stone-100); }
.group-row td { padding:8px 12px; font-size:13px; border-bottom:1px solid var(--line); }
.group-row .caret { display:inline-block; width:14px; color:var(--vine); transition:transform .15s; }
.group-row.collapsed .caret { transform:rotate(-90deg); }
.group-count { color:var(--ink-soft); margin-left:7px; font-weight:400; }
.group-surf { float:right; color:var(--vine); font-weight:600; font-variant-numeric:tabular-nums; }
.badge { display:inline-block; padding:2px 9px; border-radius:11px; font-size:11.5px; font-weight:600; }
.badge-prod { background:#e3eede; color:#2f6b2a; }
.badge-plant { background:#fff0d6; color:#9a6a10; }
.badge-nonprod { background:#f3e3e1; color:#9b3b34; }
.badge-unk { background:var(--stone-100); color:var(--ink-soft); }

/* menu d'en-tête type Sheets */
.hdr-filter-pop { position:fixed; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg); z-index:500; width:260px; padding:6px; }
.hfp-actions { display:flex; flex-direction:column; gap:1px; border-bottom:1px solid var(--line); padding-bottom:5px; margin-bottom:5px; }
.hfp-actions button { display:flex; align-items:center; gap:8px; border:none; background:transparent; padding:8px 9px; border-radius:var(--radius-sm); font-size:13px; color:var(--ink); text-align:left; }
.hfp-actions button:hover { background:var(--vine-lt); color:var(--vine); }
.hfp-actions button .ic { width:15px; height:15px; }
.hfp-search { padding:3px; }
.hfp-search input { width:100%; border:1px solid var(--line); border-radius:var(--radius-sm); padding:7px 9px; font-size:13px; outline:none; }
.hfp-search input:focus { border-color:var(--vine); }
.hfp-tools { display:flex; gap:5px; padding:3px 3px 5px; }
.hfp-tools button { flex:1; border:1px solid var(--line); background:var(--stone-50); border-radius:var(--radius-sm); padding:5px; font-size:12px; color:var(--ink-soft); }
.hfp-tools button:hover { border-color:var(--vine); color:var(--vine); }
.hfp-list { max-height:200px; overflow-y:auto; border-top:1px solid var(--stone-100); padding-top:4px; }
.hfp-item { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:var(--radius-sm); font-size:13px; cursor:pointer; }
.hfp-item:hover { background:var(--stone-50); }
.hfp-item input { width:15px; height:15px; accent-color:var(--vine); }
.hfp-item span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hfp-foot { padding:6px 3px 3px; border-top:1px solid var(--line); margin-top:5px; }
.hfp-apply { width:100%; background:var(--vine); color:#fff; border:none; border-radius:var(--radius-sm); padding:9px; font-weight:600; font-size:13px; }
.hfp-apply:hover { background:var(--vine-dk); }

/* ============================ KANBAN ============================ */
.kanban { display:flex; gap:13px; padding:16px; height:100%; overflow-x:auto; align-items:flex-start; }
.kanban-col { flex:0 0 270px; background:var(--stone-50); border:1px solid var(--line); border-radius:var(--radius); display:flex; flex-direction:column; max-height:100%; }
.kanban-col-head { display:flex; align-items:center; gap:8px; padding:11px 13px; border-bottom:1px solid var(--line); font-size:13.5px; }
.kanban-col-head .dot { width:9px; height:9px; border-radius:50%; }
.kanban-col-head strong { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kc-count { background:var(--stone-200); color:var(--ink-soft); padding:1px 9px; border-radius:11px; font-size:11.5px; font-weight:600; }
.kanban-col-body { overflow-y:auto; padding:9px; display:flex; flex-direction:column; gap:8px; }
.kanban-card { background:var(--white); border:1px solid var(--line); border-left:3px solid var(--vine); border-radius:var(--radius-sm); padding:10px 12px; box-shadow:var(--shadow-sm); cursor:pointer; transition:.14s; }
.kanban-card:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); }
.kc-title { font-weight:600; font-size:13px; margin-bottom:6px; }
.kc-row { display:flex; justify-content:space-between; gap:8px; font-size:12px; color:var(--ink-soft); padding:1px 0; }
.kc-row span:last-child { color:var(--ink); font-weight:500; text-align:right; }

/* ============================ PIVOT ============================ */
.pivot-wrap { padding:16px; height:100%; overflow:auto; }
.pivot-config { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:16px; background:var(--stone-50); padding:13px 15px; border-radius:var(--radius); border:1px solid var(--line); }
.pc-group { display:flex; flex-direction:column; gap:4px; }
.pc-group label { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--ink-soft); font-weight:600; }
.pc-group select { border:1px solid var(--line); border-radius:var(--radius-sm); padding:7px 10px; font-size:13px; background:var(--white); outline:none; min-width:150px; }
.pc-group select:focus { border-color:var(--vine); }
table.pivot { border-collapse:collapse; font-size:13px; background:var(--white); box-shadow:var(--shadow-sm); }
table.pivot th { background:var(--vine-dk); color:var(--stone-50); padding:9px 13px; text-align:right; font-weight:600; position:sticky; top:0; }
table.pivot thead th:first-child { text-align:left; left:0; z-index:11; }
table.pivot tbody th { background:var(--stone-100); text-align:left; position:sticky; left:0; font-weight:600; color:var(--ink); }
table.pivot td { padding:8px 13px; text-align:right; border-bottom:1px solid var(--stone-100); font-variant-numeric:tabular-nums; }
table.pivot td.zero { color:var(--stone-300); text-align:center; }
table.pivot td.heat { font-weight:600; }
table.pivot td.col-total, table.pivot .pivot-total td, table.pivot .pivot-total th { font-weight:700; background:var(--stone-50); border-top:2px solid var(--line); }

/* ============================ GRAPHIQUE ============================ */
.chart-wrap { padding:16px; height:100%; display:flex; flex-direction:column; }
.chart-config { display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end; margin-bottom:16px; background:var(--stone-50); padding:13px 15px; border-radius:var(--radius); border:1px solid var(--line); }
.cc-group { display:flex; flex-direction:column; gap:4px; }
.cc-group label { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--ink-soft); font-weight:600; }
.cc-group select { border:1px solid var(--line); border-radius:var(--radius-sm); padding:7px 10px; font-size:13px; background:var(--white); outline:none; min-width:150px; }
.chart-type-switch { display:flex; gap:3px; background:var(--stone-100); border-radius:var(--radius-sm); padding:3px; }
.chart-type-switch button { width:34px; height:30px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; color:var(--ink-soft); border-radius:5px; }
.chart-type-switch button.active { background:var(--white); color:var(--vine); box-shadow:var(--shadow-sm); }
.chart-canvas-host { flex:1; position:relative; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:14px; min-height:300px; }

/* ============================ CARTE ============================ */
.map-container { position:relative; height:100%; width:100%; }
.map-container.map-fullscreen { position:fixed; inset:0; z-index:2000; }
.map-toolbar { position:absolute; top:10px; left:50px; right:10px; z-index:500; display:flex; flex-wrap:wrap; align-items:center; gap:5px; background:rgba(255,255,255,.94); backdrop-filter:blur(4px); border:1px solid var(--line); border-radius:var(--radius); padding:6px 9px; box-shadow:var(--shadow-md); max-width:fit-content; }
.mtb-label { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--ink-soft); font-weight:600; margin-right:3px; }
.mtb-note { font-size:12px; color:var(--ink-soft); }
.map-toolbar button[data-field] { border:1px solid var(--line); background:var(--white); border-radius:6px; padding:5px 11px; font-size:12.5px; color:var(--ink); font-weight:500; transition:.14s; }
.map-toolbar button[data-field]:hover { border-color:var(--vine); color:var(--vine); }
.map-toolbar button[data-field].active { background:var(--vine); color:#fff; border-color:var(--vine); }
.map-host { height:100%; width:100%; background:#aab; }
.leaflet-container { font-family:var(--font-body); }

/* contrôles carto custom */
.map-locate-ctrl a, .map-fs-ctrl a { display:flex; align-items:center; justify-content:center; width:34px; height:34px; background:var(--white); color:var(--ink); }
.map-locate-ctrl a:hover, .map-fs-ctrl a:hover { background:var(--vine-lt); color:var(--vine); }
.map-locate-ctrl.locating a { color:var(--vine); animation:pulse 1s infinite; }
@keyframes pulse { 50% { opacity:.4; } }
.basemap-ctrl { display:flex; gap:3px; background:var(--white); border-radius:var(--radius-sm); padding:3px; box-shadow:0 1px 5px rgba(0,0,0,.3); }
.basemap-ctrl button { display:flex; align-items:center; gap:5px; border:none; background:transparent; padding:6px 10px; border-radius:5px; font-size:12px; color:var(--ink-soft); font-weight:500; }
.basemap-ctrl button .ic { width:15px; height:15px; }
.basemap-ctrl button.active { background:var(--vine); color:#fff; }

/* étiquettes parcelles (tooltips permanents) */
.leaflet-tooltip.parcel-label { background:transparent; border:none; box-shadow:none; color:#fff; font-size:11px; font-weight:600; text-align:center; text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 4px rgba(0,0,0,.7); padding:0; pointer-events:none; line-height:1.15; }
.leaflet-tooltip.parcel-label::before { display:none; }
.leaflet-tooltip.parcel-label span { display:block; }
/* masquées tant que zoom insuffisant */
.leaflet-container:not(.labels-on) .leaflet-tooltip.parcel-label { display:none; }

/* légende repliable */
.map-legend { background:rgba(255,255,255,.96); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-md); overflow:hidden; max-width:230px; }
.map-legend .lg-head { display:flex; align-items:center; gap:6px; padding:8px 11px; cursor:pointer; }
.map-legend .lg-head h5 { margin:0; flex:1; font-size:12px; text-transform:uppercase; letter-spacing:.4px; color:var(--ink-soft); }
.map-legend .lg-toggle { background:transparent; border:none; color:var(--ink-soft); display:flex; padding:2px; transition:transform .18s; }
.map-legend.collapsed .lg-toggle { transform:rotate(-90deg); }
.map-legend .lg-body { max-height:220px; overflow-y:auto; padding:3px 11px 10px; }
.map-legend.collapsed .lg-body { display:none; }
.lg-row { display:flex; align-items:center; gap:7px; font-size:12px; padding:2px 0; color:var(--ink); }
.lg-swatch { width:13px; height:13px; border-radius:3px; flex-shrink:0; border:1px solid rgba(0,0,0,.15); }

/* popup carto */
.map-popup h4 { margin:0 0 7px; font-family:var(--font-display); font-size:15px; color:var(--vine-dk); }
.map-popup .pp-row { display:flex; justify-content:space-between; gap:14px; font-size:12.5px; padding:2px 0; border-bottom:1px dotted var(--stone-200); }
.map-popup .pp-row span:first-child { color:var(--ink-soft); }
.map-popup .pp-row span:last-child { font-weight:600; text-align:right; }
.map-popup table { border-collapse:collapse; margin-top:8px; font-size:11.5px; width:100%; }
.map-popup table th { background:var(--stone-100); padding:4px 6px; text-align:left; font-size:11px; }
.map-popup table td { padding:3px 6px; border-bottom:1px solid var(--stone-100); }

/* ============================ FORMULAIRE ============================ */
.form-layout { display:grid; grid-template-columns:260px 1fr 380px; height:100%; overflow:hidden; }
.form-list { border-right:1px solid var(--line); background:var(--stone-50); display:flex; flex-direction:column; overflow:hidden; }
.form-list-head { padding:10px 14px; font-size:12px; color:var(--ink-soft); font-weight:600; border-bottom:1px solid var(--line); flex-shrink:0; }
.form-list-body { overflow-y:auto; padding:6px; display:flex; flex-direction:column; gap:2px; }
.fl-item { display:flex; flex-direction:column; gap:2px; border:none; background:transparent; text-align:left; padding:8px 10px; border-radius:var(--radius-sm); cursor:pointer; }
.fl-item:hover { background:var(--white); }
.fl-item.active { background:var(--vine); }
.fl-item.active .fl-title, .fl-item.active .fl-sub { color:#fff; }
.fl-title { font-size:13px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fl-sub { font-size:11.5px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.form-main { display:flex; flex-direction:column; overflow:hidden; background:var(--white); }
.form-toolbar { display:flex; align-items:center; gap:9px; padding:9px 14px; border-bottom:1px solid var(--line); flex-shrink:0; background:var(--stone-50); }
.form-back { display:flex; align-items:center; gap:6px; background:var(--vine); color:#fff; border:none; border-radius:var(--radius-sm); height:34px; padding:0 13px; font-size:13px; font-weight:600; }
.form-back:hover { background:var(--vine-dk); }
.form-list-toggle, .form-map-toggle { display:none; width:34px; height:34px; align-items:center; justify-content:center; border:1px solid var(--line); background:var(--white); border-radius:var(--radius-sm); color:var(--ink); }
.form-nav { display:flex; align-items:center; gap:9px; margin-left:auto; font-size:13px; color:var(--ink-soft); }
.form-nav button { width:30px; height:30px; border:1px solid var(--line); background:var(--white); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; color:var(--ink); }
.form-nav button:hover:not(:disabled) { border-color:var(--vine); color:var(--vine); }
.form-nav button:disabled { opacity:.35; cursor:default; }
.form-scroll { flex:1; overflow-y:auto; padding:18px; }
.form-card { max-width:760px; }
.form-card-head { margin-bottom:18px; padding-bottom:14px; border-bottom:2px solid var(--vine-lt); }
.form-card-head h2 { margin:0; font-family:var(--font-display); font-size:23px; font-weight:600; color:var(--vine-dk); }
.form-card-head .sub { color:var(--terra2); font-size:14px; font-weight:500; margin-top:3px; }
.form-section-title { font-size:12px; text-transform:uppercase; letter-spacing:.7px; color:var(--vine); font-weight:700; margin:22px 0 10px; padding-bottom:5px; border-bottom:1px solid var(--vine-lt); }
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:13px 22px; }
.form-field { display:flex; flex-direction:column; gap:3px; }
.form-field.full { grid-column:1/-1; }
.form-field label { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--ink-soft); font-weight:600; }
.form-field .val { font-size:14px; color:var(--ink); font-weight:500; word-break:break-word; }
.form-field .val.empty { color:var(--stone-300); }
.form-field .val.mono { font-family:var(--font-mono); font-size:13px; }
.form-field .val.neg { color:var(--bad); }
.form-field .val.pos { color:var(--vine); }
.form-field .val .u { font-size:11px; color:var(--ink-soft); font-weight:400; }
.form-related { margin-top:24px; }
.form-related h4 { font-size:13px; color:var(--vine); margin:0 0 9px; }
.form-related table { border-collapse:collapse; width:100%; font-size:12.5px; }
.form-related th { background:var(--stone-100); padding:6px 9px; text-align:left; font-weight:600; }
.form-related td { padding:6px 9px; border-bottom:1px solid var(--stone-100); }

.form-map { border-left:1px solid var(--line); position:relative; overflow:hidden; }
.form-map-wrap.map-fullscreen, .form-map.map-fullscreen { position:fixed; inset:0; z-index:2000; border:none; }
.form-map-host { height:100%; width:100%; background:#aab; }

/* ============================ CARTOGRAPHIE GLOBALE ============================ */
.carto-container { display:grid; grid-template-columns:280px 1fr; height:100%; overflow:hidden; position:relative; }
.carto-container.map-fullscreen { position:fixed; inset:0; z-index:2000; }
.carto-panel { background:var(--white); border-right:1px solid var(--line); overflow-y:auto; padding:14px; }
.carto-panel-head h3 { display:flex; align-items:center; gap:8px; margin:0 0 14px; font-size:15px; font-family:var(--font-display); color:var(--vine-dk); }
.carto-panel-head h3 .ic { color:var(--vine); }
.carto-panel-toggle { display:none; }
.carto-layer { border:1px solid var(--line); border-radius:var(--radius); padding:11px 12px; margin-bottom:10px; transition:.16s; }
.carto-layer.on { border-color:var(--vine); background:var(--vine-lt); }
.cl-toggle { display:flex; align-items:center; gap:9px; cursor:pointer; }
.cl-toggle input { width:17px; height:17px; accent-color:var(--vine); }
.cl-name { display:flex; align-items:center; gap:7px; font-size:14px; font-weight:600; color:var(--ink); }
.cl-name .ic { color:var(--vine); width:17px; height:17px; }
.cl-symbology { display:flex; align-items:center; gap:7px; margin-top:10px; }
.cl-sym-label { font-size:11.5px; color:var(--ink-soft); }
.cl-symbology select { flex:1; border:1px solid var(--line); border-radius:var(--radius-sm); padding:6px 9px; font-size:12.5px; background:var(--white); outline:none; }
.cl-symbology select:focus { border-color:var(--vine); }
.cl-legend { margin-top:9px; display:flex; flex-direction:column; gap:3px; max-height:170px; overflow-y:auto; }
.cl-lg-row { display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink); }
.carto-map-host { height:100%; width:100%; background:#aab; }

/* ============================ TABLEAU DE BORD ============================ */
.dash { padding:22px 26px; max-width:1280px; margin:0 auto; }
.dash h1 { font-family:var(--font-display); font-size:26px; font-weight:600; color:var(--vine-dk); margin:0 0 3px; }
.dash-sub { color:var(--ink-soft); font-size:14px; margin-bottom:22px; }
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; margin-bottom:22px; }
.kpi { background:var(--white); border:1px solid var(--line); border-top:3px solid var(--vine); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow-sm); }
.kpi.terra { border-top-color:var(--terra2); }
.kpi.lees { border-top-color:var(--lees); }
.kpi.gold { border-top-color:var(--gold); }
.kpi-label { font-size:11.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--ink-soft); font-weight:600; }
.kpi-value { font-family:var(--font-display); font-size:31px; font-weight:600; color:var(--vine-dk); line-height:1.1; margin:5px 0; }
.kpi-value .unit { font-size:15px; color:var(--ink-soft); margin-left:5px; font-family:var(--font-body); }
.kpi-sub { font-size:12px; color:var(--ink-soft); }
.dash-row { display:grid; grid-template-columns:1fr 1fr; gap:15px; margin-bottom:15px; }
.dash-panel { background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:15px 17px; box-shadow:var(--shadow-sm); }
.dash-panel h3 { display:flex; align-items:center; gap:8px; margin:0 0 13px; font-size:14px; font-weight:600; color:var(--ink); }
.dash-panel h3 .ic { color:var(--vine); }
.dash-chart-host { position:relative; height:260px; }

.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; color:var(--ink-soft); gap:8px; }

/* ============================ MENU MOBILE (bas) ============================ */
.menu-mobile { display:none; }

/* ============================================================== *
 *  RESPONSIVE — TABLETTE (≤ 1080px)
 * ============================================================== */
@media (max-width:1080px) {
  .form-layout { grid-template-columns:220px 1fr 320px; }
  .kpi-grid { grid-template-columns:repeat(2,1fr); }
  .dash-row { grid-template-columns:1fr; }
}

/* ============================================================== *
 *  RESPONSIVE — SMARTPHONE (≤ 760px)
 * ============================================================== */
@media (max-width:760px) {
  :root { --topbar-h:50px; }

  /* menu principal du haut -> caché, déplacé en bas */
  .menu { display:none; }
  .brand-text span { display:none; }
  .topbar { padding-right:6px; }
  .global-filter { margin:8px 4px; padding:0 10px; }
  .global-filter .lbl { display:none; }

  /* menu mobile en bas, 4 boutons */
  .menu-mobile { display:flex; position:fixed; bottom:0; left:0; right:0; height:var(--mobilemenu-h); background:var(--vine-dk); z-index:800; padding-bottom:env(safe-area-inset-bottom); }
  .menu-mobile button { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; background:transparent; border:none; color:rgba(247,245,240,.65); font-size:10px; font-weight:500; padding:6px 2px; }
  .menu-mobile button .ic { width:21px; height:21px; }
  .menu-mobile button.active { color:var(--gold); }
  .menu-mobile button span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }

  /* la zone principale laisse la place au menu du bas */
  .main { padding-bottom:var(--mobilemenu-h); }
  .map-container.map-fullscreen .main, .map-container.map-fullscreen { padding-bottom:0; }

  /* barre de contrôle : recherche pleine largeur, vues en 1 bouton */
  .controlbar { flex-wrap:wrap; height:auto; padding:8px 10px; gap:7px; }
  .search-wrap { order:3; flex-basis:100%; }
  #export-btn { order:1; }
  .ctrl-btn.icon-only { width:38px; height:38px; }
  .view-switch { order:2; margin-left:auto; }
  .vs-desktop { display:none; }
  .vs-mobile { display:flex; }

  /* liste : un peu plus compacte, scroll horizontal */
  table.grid { font-size:12.5px; }
  table.grid td, .th-label { padding-left:10px; padding-right:8px; }

  /* le menu d'en-tête prend toute la largeur en bas */
  .hdr-filter-pop { position:fixed !important; left:8px !important; right:8px !important; top:auto !important; bottom:calc(var(--mobilemenu-h) + 8px) !important; width:auto !important; }

  /* formulaire : 1 colonne, liste & carte en panneaux glissants */
  .form-layout { display:block; position:relative; }
  .form-main { height:100%; }
  .form-list { position:absolute; top:0; bottom:0; left:0; width:80%; max-width:320px; z-index:30; transform:translateX(-100%); transition:transform .25s; box-shadow:var(--shadow-lg); }
  .form-layout.show-list .form-list { transform:translateX(0); }
  .form-map { position:absolute; inset:0; z-index:25; transform:translateX(100%); transition:transform .25s; border-left:none; }
  .form-layout.show-map .form-map { transform:translateX(0); }
  .form-list-toggle, .form-map-toggle { display:flex; }
  .form-grid { grid-template-columns:1fr; }
  .form-back span { display:none; }
  .form-card-head h2 { font-size:20px; }

  /* cartographie globale : panneau coulissant */
  .carto-container { display:block; position:relative; }
  .carto-map-host { height:100%; }
  .carto-panel { position:absolute; top:0; bottom:0; left:0; width:84%; max-width:300px; z-index:30; transform:translateX(-100%); transition:transform .25s; box-shadow:var(--shadow-lg); }
  .carto-container.panel-open .carto-panel { transform:translateX(0); }
  .carto-panel-toggle { display:flex; position:absolute; top:12px; left:12px; z-index:20; width:42px; height:42px; align-items:center; justify-content:center; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-md); color:var(--vine); }

  /* dashboard */
  .dash { padding:16px 14px; }
  .dash h1 { font-size:21px; }
  .kpi-grid { gap:10px; }
  .kpi-value { font-size:25px; }
  .dash-chart-host { height:230px; }

  /* carto toolbar plus compacte */
  .map-toolbar { left:10px; top:auto; bottom:10px; right:10px; max-width:none; }
  .map-legend { max-width:170px; }
}

@media (max-width:420px) {
  .kpi-grid { grid-template-columns:1fr; }
  .brand { padding:0 8px; }
}

/* mode plein écran : toujours au-dessus de tout */
.map-fullscreen .leaflet-control-container { z-index:2100; }