:root {
  --green: #1f6f43;
  --green-dark: #154d2f;
  --yellow: #f2c230;
  --red: #c8102e;
  --bg: #f6f7f5;
  --text: #1d2320;
  --muted: #66706b;
  --border: #dde2de;
  --sidebar-w: 320px;
  --topbar-h: 56px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: "Segoe UI", system-ui, sans-serif; color: var(--text); }

.topbar {
  position: fixed; inset: 0 0 auto 0; height: var(--topbar-h); z-index: 1000;
  display: flex; align-items: center; gap: 12px; padding: 0 12px;
  background: var(--green); color: #fff;
  border-bottom: 4px solid var(--yellow);
}
.brand { display: flex; flex-direction: column; line-height: 1.15; }
.brand span { font-size: 12px; opacity: .85; }
.icon-btn { background: none; border: 0; color: inherit; font-size: 22px; cursor: pointer; padding: 4px 8px; }

.search { position: relative; margin-left: auto; width: min(380px, 45vw); }
.search input { width: 100%; padding: 8px 12px; border-radius: 6px; border: 0; font-size: 14px; }
#search-results {
  position: absolute; top: 100%; left: 0; right: 0; margin: 4px 0 0; padding: 0; list-style: none;
  background: #fff; color: var(--text); border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.2);
  max-height: 320px; overflow-y: auto;
}
#search-results li { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--border); font-size: 14px; }
#search-results li:hover, #search-results li.active { background: #eef5f0; }
#search-results small { color: var(--muted); display: block; }

#sidebar {
  position: fixed; top: var(--topbar-h); bottom: 0; left: 0; width: var(--sidebar-w); z-index: 900;
  background: var(--bg); border-right: 1px solid var(--border); overflow-y: auto;
  transition: transform .25s;
}
body.collapsed #sidebar { transform: translateX(-100%); }
#map { position: fixed; top: var(--topbar-h); bottom: 0; right: 0; left: var(--sidebar-w); transition: left .25s; }
body.collapsed #map { left: 0; }

.tabs { display: flex; position: sticky; top: 0; background: #fff; border-bottom: 1px solid var(--border); z-index: 1; }
.tab { flex: 1; padding: 10px 4px; background: none; border: 0; border-bottom: 3px solid transparent; cursor: pointer; font-size: 13px; color: var(--muted); }
.tab.active { color: var(--green); border-bottom-color: var(--green); font-weight: 600; }
.panel { display: none; padding: 12px 16px 24px; }
.panel.active { display: block; }
.panel h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--green-dark); margin: 16px 0 8px; }
.panel h3:first-child { margin-top: 4px; }
.hint { font-size: 12px; color: var(--muted); }

.layer-item { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 14px; cursor: pointer; }
.layer-item input { margin: 0; }
.swatch { width: 18px; height: 12px; border-radius: 2px; flex: none; border: 1px solid rgba(0,0,0,.15); }
.swatch.line { height: 4px; border: 0; }
.swatch.dot { width: 12px; height: 12px; border-radius: 50%; }
.legend-sub { margin: 0 0 6px 28px; padding: 0; list-style: none; font-size: 12px; color: var(--muted); }
.legend-sub li { display: flex; align-items: center; gap: 6px; padding: 1px 0; }

.stat-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat-card { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 10px; }
.stat-card b { display: block; font-size: 20px; color: var(--green-dark); }
.stat-card span { font-size: 12px; color: var(--muted); }
.bar-row { font-size: 12px; margin: 6px 0; }
.bar-row .lbl { display: flex; justify-content: space-between; }
.bar { height: 8px; background: #e6ebe7; border-radius: 4px; overflow: hidden; margin-top: 2px; }
.bar > div { height: 100%; background: var(--green); }

button { font: inherit; font-size: 13px; padding: 7px 12px; border-radius: 6px; border: 1px solid var(--border); background: #fff; cursor: pointer; }
button.primary { background: var(--green); border-color: var(--green); color: #fff; }
button.danger { color: var(--red); }
.row { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

#contrib-list { list-style: none; padding: 0; margin: 8px 0 0; max-height: 40vh; overflow-y: auto; }
#contrib-list li { background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--green); border-radius: 6px; padding: 7px 10px; margin-bottom: 6px; font-size: 13px; cursor: pointer; }
#contrib-list li small { color: var(--muted); display: block; margin-top: 2px; }
#contrib-list li.s-Rejeté { opacity: .55; }
#contrib-list li.empty { border-left-color: #ccc; cursor: default; }
.draw-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.filters { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.filters select { font: inherit; font-size: 12px; padding: 5px; border: 1px solid var(--border); border-radius: 6px; background: #fff; }
.filters select:last-child { grid-column: span 2; }
.badge { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 9px; background: #e9ecef; color: #495057; }
.badge.s-À-valider { background: #fff3bf; color: #8a6d00; }
.badge.s-Validé { background: #d3f9d8; color: #1f6f43; }
.badge.s-Traité { background: #d0ebff; color: #1864ab; }
.badge.s-Rejeté { background: #ffe3e3; color: #c8102e; }
.tab-badge { display: inline-block; min-width: 16px; padding: 0 4px; border-radius: 8px; background: var(--red); color: #fff; font-size: 10px; line-height: 16px; }
.popup-photo { display: block; max-width: 100%; max-height: 160px; margin: 6px 0; border-radius: 4px; }
#photo-preview img { max-width: 100%; max-height: 140px; border-radius: 4px; margin: -4px 0 10px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.label-quartier { background: none; border: 0; box-shadow: none; font-size: 11px; font-weight: 600; color: #5235b5; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff; }
.label-quartier::before { display: none; }
.hide-quartier-labels .label-quartier { display: none; }
.stat-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.stat-table th, .stat-table td { padding: 3px 4px; border-bottom: 1px solid var(--border); text-align: right; }
.stat-table th:first-child, .stat-table td:first-child { text-align: left; }
.stat-table th { color: var(--muted); font-weight: 600; }
.load-status { position: fixed; top: calc(var(--topbar-h) + 12px); left: calc(50% + var(--sidebar-w) / 2); transform: translateX(-50%); z-index: 1000; background: #fff; padding: 8px 14px; border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,.25); font-size: 14px; }
.load-status.error { background: #ffe3e3; color: var(--red); max-width: 60vw; }
code { font-size: 12px; background: #e9ecef; padding: 1px 4px; border-radius: 3px; }

.coords { position: fixed; bottom: 4px; left: calc(var(--sidebar-w) + 110px); z-index: 800; background: rgba(255,255,255,.85); font-size: 12px; padding: 2px 8px; border-radius: 4px; pointer-events: none; transition: left .25s; }
body.collapsed .coords { left: 110px; }
.measure-box { position: fixed; top: calc(var(--topbar-h) + 12px); left: 50%; transform: translateX(-50%); z-index: 1000; background: #fff; padding: 8px 14px; border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,.25); font-size: 14px; }
.hidden { display: none !important; }

.modal { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 2000; display: flex; align-items: center; justify-content: center; }
.modal-card { background: #fff; padding: 18px 20px; border-radius: 10px; width: min(480px, 94vw); max-height: 92vh; overflow-y: auto; }
.modal-card h3 { margin-top: 0; color: var(--green-dark); }
.modal-card label { display: block; font-size: 13px; margin-bottom: 10px; }
.modal-card select, .modal-card textarea, .modal-card input { display: block; width: 100%; margin-top: 4px; padding: 7px; border: 1px solid var(--border); border-radius: 6px; font: inherit; }

.tool-bar a { font-size: 16px; font-weight: bold; }
.tool-bar a.on { background: var(--yellow); }
.leaflet-container.crosshair { cursor: crosshair; }
.popup h4 { margin: 0 0 4px; color: var(--green-dark); }
.popup table { font-size: 12px; border-collapse: collapse; }
.popup td { padding: 1px 6px 1px 0; vertical-align: top; }
.popup td:first-child { color: var(--muted); }
.eq-icon { display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); font-size: 12px; color: #fff; }
.label-commune { background: none; border: 0; box-shadow: none; font-weight: 700; color: var(--red); text-shadow: 0 0 3px #fff, 0 0 3px #fff; font-size: 14px; }

@media (max-width: 700px) {
  :root { --sidebar-w: 85vw; }
  #map { left: 0; }
  .coords { display: none; }
  .brand span { display: none; }
}

@media print {
  .topbar, #sidebar, .leaflet-control-container .leaflet-top, .coords { display: none !important; }
  #map { inset: 0 !important; }
}

/* En-tête : liens et menu utilisateur */
.header-link { color: #fff; text-decoration: none; font-size: 13px; padding: 6px 10px; border: 1px solid rgba(255,255,255,.4); border-radius: 6px; background: none; cursor: pointer; white-space: nowrap; }
.header-link:hover { background: rgba(255,255,255,.12); }
.topbar .search + .header-link { margin-left: 4px; }
.user-menu { display: flex; align-items: center; gap: 8px; margin-left: 8px; font-size: 13px; }
.admin-page .user-menu { margin-left: auto; }
.role-badge { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 9px; background: rgba(255,255,255,.2); margin-left: 4px; }
.role-badge.role-admin { background: var(--yellow); color: #3b2f00; }
.role-badge.role-superviseur { background: #d0ebff; color: #1864ab; }
.muted { color: var(--muted); }

/* Écran de connexion */
.auth-screen { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: linear-gradient(rgba(21,77,47,.88), rgba(21,77,47,.88)), url('https://tile.openstreetmap.org/12/1908/1918.png') center / cover; }
.auth-card { background: #fff; border-radius: 12px; padding: 22px 24px; width: min(460px, 100%); max-height: 94vh; overflow-y: auto; box-shadow: 0 10px 40px rgba(0,0,0,.35); border-top: 5px solid var(--yellow); }
.auth-brand strong { display: block; color: var(--green-dark); font-size: 18px; }
.auth-brand span { color: var(--muted); font-size: 13px; }
.auth-login { margin-top: 16px; }
.auth-note { margin: 12px 0 0; line-height: 1.45; }
.auth-note a { color: var(--green); }
.auth-footer { margin: 14px 0 0; font-size: 13px; text-align: center; }
.auth-footer a { color: var(--green); }
.stack label { display: block; font-size: 13px; margin-bottom: 10px; }
.stack input, .stack select { display: block; width: 100%; margin-top: 4px; padding: 8px; border: 1px solid var(--border); border-radius: 6px; font: inherit; }
.stack > input { margin-bottom: 8px; }
.stack button[type=submit] { width: 100%; padding: 10px; font-size: 14px; }
.form-msg { font-size: 13px; color: var(--red); min-height: 1em; margin: 4px 0 10px; }
.form-msg.ok { color: var(--green); background: #d3f9d8; padding: 8px 10px; border-radius: 6px; }
.check { display: flex; align-items: center; gap: 6px; font-size: 12px; grid-column: span 2; }
.filters select:nth-child(3) { grid-column: span 2; }
.filters select:last-child { grid-column: auto; }
.info-table { font-size: 13px; border-collapse: collapse; width: 100%; }
.info-table td { padding: 4px 6px 4px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.info-table td:first-child { color: var(--muted); width: 40%; }
.popup-photo-wrap { font-size: 12px; color: var(--muted); }

/* Adressage */
.label-voie { background: rgba(255,255,255,.85); border: 0; box-shadow: none; padding: 0 4px; font-size: 11px; color: #3b2a8a; border-radius: 3px; }
.label-voie::before, .label-num::before { display: none; }
.label-num { background: none; border: 0; box-shadow: none; padding: 0; font-size: 10px; font-weight: 600; color: var(--text); text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff; }
.adr-big { font-size: 15px; font-weight: 600; color: var(--green-dark); margin: 0 0 4px; }
.badge.adr-Proposée { background: #fff3bf; color: #8a6d00; }
.badge.adr-Validée { background: #d3f9d8; color: #1f6f43; }
.badge.adr-Plaque-posée { background: #d0ebff; color: #1864ab; }
select.full { width: 100%; font: inherit; font-size: 13px; padding: 6px; border: 1px solid var(--border); border-radius: 6px; background: #fff; margin-top: 4px; }
.panel .row select { font: inherit; font-size: 13px; padding: 6px; border: 1px solid var(--border); border-radius: 6px; background: #fff; }

/* Onglets : défilement horizontal s'ils sont nombreux */
.tabs { overflow-x: auto; scrollbar-width: none; }
.tabs .tab { flex: 1 0 auto; padding: 10px 7px; }

/* Itinéraires */
.iti-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.iti-modes label { display: flex; align-items: center; gap: 6px; justify-content: center; padding: 8px; border: 1px solid var(--border); border-radius: 6px; background: #fff; cursor: pointer; font-size: 13px; }
.iti-modes label:has(input:checked) { border-color: #1c7ed6; background: #e7f5ff; color: #1864ab; font-weight: 600; }
.iti-modes input { margin: 0; }
.iti-search { position: relative; }
.iti-search input { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 13px; }
#iti-search-results { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; list-style: none; margin: 2px 0 0; padding: 0; background: #fff; border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.2); max-height: 260px; overflow-y: auto; }
#iti-search-results li { padding: 7px 10px; font-size: 13px; cursor: pointer; border-bottom: 1px solid var(--border); }
#iti-search-results li:hover { background: #eef5f0; }
#iti-search-results small { display: block; color: var(--muted); }
#iti-etapes { list-style: none; padding: 0; margin: 10px 0 6px; }
#iti-etapes li { display: flex; align-items: center; gap: 6px; padding: 5px 6px; background: #fff; border: 1px solid var(--border); border-radius: 6px; margin-bottom: 4px; font-size: 13px; }
#iti-etapes .iti-lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#iti-etapes button { padding: 2px 7px; font-size: 12px; }
.iti-pin { width: 26px; height: 26px; border-radius: 50%; background: #1c7ed6; color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; box-shadow: 0 1px 5px rgba(0,0,0,.45); }
.iti-pin.start { background: var(--green); }
.iti-pin.small { width: 20px; height: 20px; font-size: 11px; flex: none; box-shadow: none; }
.iti-total { font-size: 16px; margin: 10px 0 2px; color: #1864ab; }
.iti-leg { background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; margin: 8px 0; font-size: 13px; }
.iti-leg ol { margin: 6px 0 0; padding-left: 20px; }
.iti-leg li { margin: 3px 0; }
.iti-leg li small { color: var(--muted); white-space: nowrap; }
.iti-menu { display: flex; flex-direction: column; gap: 4px; }
.iti-menu button { text-align: left; }
.iti-menu-popup .leaflet-popup-content { margin: 8px; }
/* Marqueur d'étape en forme d'épingle (distinct des icônes d'équipements) */
.iti-drop { width: 30px; height: 30px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #1c7ed6; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; }
.iti-drop.start { background: var(--green); }
.iti-drop span { transform: rotate(45deg); color: #fff; font-weight: 700; font-size: 13px; }

/* Sélection des données */
.sel-combine { display: flex; gap: 12px; font-size: 13px; margin-bottom: 6px; }
.sel-cond { background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 6px; margin-bottom: 6px; }
.sel-cond-line { display: grid; grid-template-columns: 1fr auto auto; gap: 4px; }
.sel-cond select, .sel-cond input { font: inherit; font-size: 12px; padding: 4px; border: 1px solid var(--border); border-radius: 4px; background: #fff; min-width: 0; }
.sel-cond button { padding: 2px 8px; font-size: 12px; }
.sel-val { margin-top: 4px; display: flex; gap: 4px; flex-wrap: wrap; }
.sel-val select { width: 100%; }
.sel-val input { flex: 1; }
.sel-val small { width: 100%; }
.inline-num { font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
.inline-num input { width: 70px; font: inherit; font-size: 12px; padding: 4px; border: 1px solid var(--border); border-radius: 4px; }
#sel-ref-opts { margin-top: 6px; display: grid; gap: 6px; }
#sel-ref-opts.hidden { display: none; }

.sel-drawer { position: fixed; left: var(--sidebar-w); right: 0; bottom: 0; height: 36vh; z-index: 950; background: #fff; border-top: 3px solid #e64980; display: flex; flex-direction: column; box-shadow: 0 -4px 14px rgba(0,0,0,.15); transition: left .25s; }
body.collapsed .sel-drawer { left: 0; }
body.drawer-open #map { bottom: 36vh; }
.sel-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; font-size: 13px; }
.sel-drawer-actions { display: flex; gap: 6px; align-items: center; }
.sel-drawer-actions select { font: inherit; font-size: 12px; padding: 5px; border: 1px solid var(--border); border-radius: 6px; }
.sel-drawer-actions button { padding: 5px 10px; font-size: 12px; }
.sel-drawer-body { flex: 1; overflow: auto; display: flex; gap: 12px; padding: 0 12px 8px; }
#sel-groups { flex: 0 0 240px; padding-top: 8px; }
#sel-groups:empty { display: none; }
#sel-table { flex: 1; min-width: 0; }
#sel-table .data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
#sel-table th { position: sticky; top: 0; background: #fafbfa; text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); cursor: pointer; white-space: nowrap; color: var(--muted); }
#sel-table th:hover { color: var(--text); }
#sel-table td { padding: 4px 8px; border-bottom: 1px solid #eef0ee; }
#sel-table tbody tr { cursor: pointer; }
#sel-table tbody tr:hover { background: #fff0f6; }
@media (max-width: 700px) { .sel-drawer { left: 0; height: 45vh; } body.drawer-open #map { bottom: 45vh; } #sel-groups { display: none; } }

/* Analyses (isochrones, tampons) */
.ana-switch { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; margin-bottom: 10px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.ana-switch button { border: 0; border-radius: 0; padding: 8px; background: #fff; }
.ana-switch button.active { background: var(--green); color: #fff; font-weight: 600; }
.panel label.field { display: block; font-size: 13px; margin: 8px 0 4px; }
.panel label.field input, .panel label.field select { display: block; width: 100%; margin-top: 3px; font: inherit; font-size: 13px; padding: 6px; border: 1px solid var(--border); border-radius: 6px; background: #fff; }
.ana-points { list-style: none; padding: 0; margin: 6px 0; }
.ana-points li { display: flex; justify-content: space-between; align-items: center; background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; margin-bottom: 4px; font-size: 13px; }
.ana-points button { padding: 1px 7px; font-size: 12px; }
.ana-head { margin: 12px 0 6px; font-size: 13px; }
.ana-table { width: 100%; border-collapse: collapse; font-size: 12px; background: #fff; }
.ana-table th { text-align: left; color: var(--muted); font-weight: 600; padding: 4px; border-bottom: 1px solid var(--border); }
.ana-table td { padding: 5px 4px; border-bottom: 1px solid #eef0ee; vertical-align: middle; white-space: nowrap; }
.ana-table td small { color: var(--muted); }
.ana-table button { padding: 2px 8px; font-size: 12px; }
.ana-table .swatch { display: inline-block; vertical-align: middle; }
.ana-hors td { background: #fff5f5; }
#buf-value { margin-top: 6px; }

/* Outil ⓘ d'identification */
.tool-bar a.idf-btn { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 17px; font-weight: 700; color: #1864ab; }
.tool-bar a.idf-btn.on { background: #1864ab; color: #fff; }
.leaflet-container.identify-cursor, .leaflet-container.identify-cursor .leaflet-interactive { cursor: help !important; }
.identify-panel { position: fixed; top: calc(var(--topbar-h) + 12px); right: 56px; width: 340px; max-height: calc(100vh - var(--topbar-h) - 40px); z-index: 1100;
  background: #fff; border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.28); display: flex; flex-direction: column; border-top: 4px solid #1864ab; }
.idf-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 13px; }
.idf-head #idf-count { color: var(--muted); flex: 1; }
.idf-head button { padding: 2px 8px; font-size: 12px; }
#idf-body { overflow-y: auto; padding: 4px 10px 10px; }
.idf-layer { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #1864ab; font-weight: 700; margin: 10px 0 4px; }
.idf-item { border: 1px solid var(--border); border-radius: 6px; margin-bottom: 4px; background: #fafbfa; }
.idf-item summary { cursor: pointer; padding: 6px 8px; font-size: 13px; font-weight: 600; color: var(--text); }
.idf-item[open] summary { border-bottom: 1px solid var(--border); background: #fff8e1; }
.idf-item table { width: 100%; border-collapse: collapse; font-size: 12px; background: #fff; }
.idf-item td { padding: 3px 8px; border-bottom: 1px solid #f1f3f1; vertical-align: top; }
.idf-item td:first-child { color: var(--muted); width: 45%; }
.idf-zoom { display: inline-block; font-size: 12px; margin: 5px 8px; color: #1864ab; }
@media (max-width: 700px) { .identify-panel { right: 8px; left: 8px; width: auto; top: auto; bottom: 8px; max-height: 50vh; } }

/* Relief et risques naturels */
.rel-titre { margin: 16px 0 4px; font-size: 13px; border-top: 1px solid var(--border); padding-top: 10px; }
.rel-scroll { max-height: 260px; overflow: auto; border: 1px solid var(--border); border-radius: 6px; }
.rel-scroll th { position: sticky; top: 0; background: #fff; }
.rel-chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.rel-chiffres b { color: #212529; }
#rel-graph { position: relative; background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 4px; }
.rel-svg { width: 100%; height: auto; display: block; touch-action: none; }
.rel-svg text { font-size: 9px; fill: #868e96; }
.rel-svg .g { stroke: #e9ecef; stroke-width: 1; }
.rel-svg .l { fill: none; stroke: #5f3dc4; stroke-width: 2; stroke-linejoin: round; }
.rel-svg .a { fill: #5f3dc4; fill-opacity: .1; stroke: none; }
.rel-svg line.c { stroke: #495057; stroke-width: 1; stroke-dasharray: 3 2; }
.rel-svg circle.c { fill: #5f3dc4; stroke: #fff; stroke-width: 2; }
.rel-svg .hidden { display: none; }
.rel-tip { position: absolute; top: 6px; width: 110px; text-align: center; font-size: 12px; background: rgba(255,255,255,.95); border: 1px solid var(--border); border-radius: 4px; padding: 2px 4px; pointer-events: none; }

/* Onglets : passent à la ligne quand ils sont nombreux (espace agents) */
.tabs { flex-wrap: wrap; }
.tab { flex: 1 0 auto; padding: 10px 8px; }
.badge.s-Affecté, .badge.s-En-cours { background: #ffe8cc; color: #a34700; }

/* Terrain : réseau, file d'attente, GPS */
.terrain-reseau { font-size: 12px; margin: 10px 0 0; }
.terrain-reseau.en { color: var(--green); }
.terrain-reseau.hors { color: #c92a2a; font-weight: 600; }
.terrain-attente { background: #fff9db; border: 1px solid #ffe066; border-radius: 6px; padding: 8px 10px; margin-top: 6px; font-size: 13px; }
.terrain-attente ul { list-style: none; padding: 0; margin: 6px 0 0; }
.terrain-attente li { display: flex; justify-content: space-between; gap: 6px; align-items: center; padding: 3px 0; border-top: 1px solid #ffec99; }
.terrain-attente small { color: var(--muted); }
.gps-buttons button { font-size: 12px; padding: 8px 4px; }
.gps-q { display: inline-block; padding: 0 6px; border-radius: 8px; font-size: 11px; color: #fff; }
.gps-q.bonne { background: #2b8a3e; } .gps-q.moyenne { background: #f08c00; } .gps-q.faible { background: #c92a2a; }
.gps-box, .edit-box { max-width: min(640px, 96vw); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 3000; background: #212529; color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 14px; box-shadow: 0 4px 14px rgba(0,0,0,.3); max-width: 92vw; transition: opacity .6s; }
.toast.out { opacity: 0; }

/* Édition des formes */
.edit-vertex { background: #fff; border: 3px solid #f2c230; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.3); cursor: move; }
.edit-vertex.choisi { background: #c92a2a; border-color: #fff; }
.edit-vertex.milieu { background: rgba(255,255,255,.7); border: 2px dashed #f2c230; transform: scale(.8); cursor: copy; }
.idf-corr { margin-top: 6px; font-size: 12px; color: var(--muted); }
.idf-corr button { padding: 3px 8px; font-size: 12px; margin-top: 3px; }

/* Suivi des signalements */
.suivi-cartes { grid-template-columns: 1fr 1fr 1fr; }
.suivi-cartes .stat-card b { font-size: 18px; }
.stat-card.cliquable { cursor: pointer; }
.stat-card.cliquable:hover { border-color: var(--green); }
.stat-card.alerte b { color: #c92a2a; }
#tab-suivi .filters select { grid-column: auto; }
.suivi-liste { list-style: none; padding: 0; margin: 8px 0 0; max-height: 45vh; overflow-y: auto; }
.suivi-liste li { background: #fff; border: 1px solid var(--border); border-left: 4px solid #c8102e; border-radius: 6px; padding: 7px 10px; margin-bottom: 6px; font-size: 13px; cursor: pointer; }
.suivi-liste li small { color: var(--muted); display: block; margin-top: 2px; }
.suivi-liste li.s-Affecté, .suivi-liste li.s-En-cours { border-left-color: #f08c00; }
.suivi-liste li.s-Traité { border-left-color: #1864ab; }
.suivi-liste li.retard { background: #fff5f5; }
.retard-txt { color: #c92a2a; }
.prio { display: inline-block; font-size: 10px; padding: 0 5px; border-radius: 8px; border: 1px solid currentColor; }
.prio-Urgente { color: #c92a2a; font-weight: 700; } .prio-Haute { color: #e8590c; } .prio-Basse { color: #868e96; }
.suivi-photo img, .histo-photo img { max-width: 100%; max-height: 180px; border-radius: 6px; margin: 6px 0; display: block; }
.suivi-sousform { background: #f8f9fa; border: 1px solid var(--border); border-radius: 6px; padding: 10px; margin-top: 8px; }
.suivi-sousform label { font-size: 12px; }
.suivi-sousform textarea, .suivi-sousform select, .stack textarea { display: block; width: 100%; margin-top: 4px; padding: 7px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 13px; }
.histo { list-style: none; padding: 0; margin: 0; }
.histo li { display: flex; gap: 8px; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.histo-ico { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #e6ebe7; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.histo p { margin: 4px 0 0; white-space: pre-wrap; }
.histo small { color: var(--muted); }
.histo button { margin-top: 4px; padding: 3px 8px; font-size: 12px; }
.legende-chaleur { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; margin: 6px 0; }
.legende-chaleur i { display: inline-block; width: 14px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: middle; border: 1px solid rgba(0,0,0,.1); }
.legende-chaleur small { flex-basis: 100%; color: var(--muted); }
#suivi-quartiers .bar-row { display: grid; grid-template-columns: 110px 1fr 28px; gap: 6px; align-items: center; }
#suivi-quartiers .bar { margin: 0; }

/* Adressage : avancement, pose des plaques */
.adr-detail { margin: 8px 0; font-size: 13px; }
.adr-detail summary { cursor: pointer; color: var(--green-dark); font-weight: 600; }
.adr-avancement td { white-space: normal; }
.adr-avancement .bar { width: 60px; display: inline-block; vertical-align: middle; margin: 0 4px 0 0; }
.pose-liste { list-style: none; padding: 0; margin: 8px 0; max-height: 40vh; overflow-y: auto; }
.pose-liste li { display: flex; gap: 6px; align-items: center; background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; margin-bottom: 5px; font-size: 13px; }
.pose-liste li span { flex: 1; }
.pose-liste li small { color: var(--muted); }
.pose-liste li.pose-faite { opacity: .55; }
.pose-num { background: #1c4e80; color: #fff; border: 2px solid #fff; border-radius: 50%; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.poses-svg { width: 100%; height: auto; display: block; margin: 6px 0; }
.poses-svg rect { fill: #1c4e80; }
.poses-svg .g { stroke: #ced4da; }
.poses-svg text { font-size: 9px; fill: #868e96; }
.btn-lien { display: inline-block; padding: 4px 10px; border: 1px solid var(--green); border-radius: 6px; color: var(--green); text-decoration: none; font-size: 13px; }

/* Téléphone : boutons plus grands, fiches plein écran */
@media (max-width: 700px) {
  button { padding: 10px 12px; font-size: 14px; }
  .draw-buttons button { padding: 12px 4px; }
  .modal { align-items: stretch; }
  .modal-card { width: 100vw; max-height: 100vh; border-radius: 0; }
  .measure-box { top: auto; bottom: 12px; font-size: 13px; }
  .edit-vertex { transform: scale(1.3); }
  .suivi-cartes { grid-template-columns: 1fr 1fr; }
}

/* Téléphone : en-tête compact (titre abrégé, menu utilisateur réduit) */
@media (max-width: 700px) {
  .topbar { gap: 6px; padding: 0 6px; }
  .brand { min-width: 0; flex: 0 1 auto; max-width: 34vw; overflow: hidden; }
  .brand strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  .search { width: auto; flex: 1 1 0; min-width: 60px; }
  .search input { padding: 7px 8px; font-size: 13px; }
  .user-menu { margin-left: 0; gap: 4px; flex: none; }
  .user-menu #user-name, .user-menu a[href="index.html"] { display: none; }
  .header-link { padding: 5px 7px; font-size: 12px; }
}

/* Outil ✎ « Modifier une forme » */
.tool-bar a.edit-btn { font-size: 17px; font-weight: 700; color: #b8860b; }
.tool-bar a.edit-btn.on { background: #f2c230; color: #3b2f00; }
.leaflet-container.edit-cursor, .leaflet-container.edit-cursor .leaflet-interactive { cursor: pointer !important; }

/* Foncier : registre des parcelles, dossiers, contrôles */
.fon-avert { background: #f8f9fa; border-left: 3px solid #868e96; padding: 6px 8px; border-radius: 4px; }
.fon-liste li { border-left-width: 5px; }
.fon-liste li.f-Provisoire { border-left-style: dashed; }
.fon-liste li.fon-dossier { border-left-color: #e8590c; }
.fon-liste li.fon-dossier.f-Approuvé { border-left-color: #2b8a3e; }
.fon-liste li.fon-dossier.f-Rejeté, .fon-liste li.fon-dossier.f-Abandonné { border-left-color: #adb5bd; }
.badge.f-Provisoire, .badge.f-Déposé { background: #fff3bf; color: #8a6d00; }
.badge.f-Enregistrée, .badge.f-Approuvé, .badge.f-Avis-favorable { background: #d3f9d8; color: #1f6f43; }
.badge.f-Archivée, .badge.f-Abandonné { background: #e9ecef; color: #495057; }
.badge.f-En-instruction, .badge.f-Visite-effectuée { background: #ffe8cc; color: #a34700; }
.badge.f-Rejeté, .badge.f-Avis-défavorable { background: #ffe3e3; color: #c8102e; }
.fon-classe { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; }
.fon-alertes { list-style: none; padding: 0; margin: 6px 0; font-size: 13px; }
.fon-alertes li { padding: 5px 8px; border-radius: 5px; margin-bottom: 4px; background: #f1f3f5; }
.fon-alertes li.n-bloquant { background: #ffe3e3; color: #8a1c1c; }
.fon-alertes li.n-alerte { background: #fff3bf; color: #6b5200; }
.fon-alertes.sans-haut { margin-top: 0; }
.fon-ok { font-size: 13px; color: #1f6f43; margin: 6px 0; }
.fon-pop-alerte { color: #c92a2a; font-size: 12px; margin: 4px 0; }
.fon-ctl { list-style: none; padding: 0; margin: 4px 0; max-height: 30vh; overflow-y: auto; }
.fon-ctl li { font-size: 12px; padding: 4px 6px; border-bottom: 1px solid var(--border); cursor: pointer; }
.fon-ctl li:hover { background: #f1f3f5; }
.fon-table th { text-align: left; font-weight: 600; color: var(--muted); font-size: 11px; padding: 4px 6px 4px 0; }
.fon-table td:first-child { width: auto; }
.fon-table input { width: 70px; padding: 3px; }
.fon-actions { flex-wrap: wrap; margin-top: 8px; }
.fon-actions button { flex: 1 0 auto; }
.fon-sous { background: #f8f9fa; border: 1px solid var(--border); border-radius: 6px; padding: 10px; margin-top: 8px; }
.fon-sous:empty { display: none; }
.fon-sous h4 { margin: 0 0 6px; }
.fon-sous label { display: block; font-size: 12px; margin-bottom: 8px; }
.fon-sous input:not([type=checkbox]), .fon-sous select, .fon-sous textarea { display: block; width: 100%; margin-top: 4px; padding: 6px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 13px; }
.fon-etapes { display: flex; list-style: none; padding: 0; margin: 8px 0; gap: 2px; font-size: 11px; }
.fon-etapes li { flex: 1; text-align: center; padding: 4px 2px; background: #e9ecef; color: #868e96; }
.fon-etapes li:first-child { border-radius: 4px 0 0 4px; } .fon-etapes li:last-child { border-radius: 0 4px 4px 0; }
.fon-etapes li.fait { background: #2b8a3e; color: #fff; }
.fon-etapes li.actuel { background: #e8590c; color: #fff; font-weight: 600; }
.fon-df-bloc { font-size: 13px; margin-bottom: 10px; }
.fon-df-bloc:empty { display: none; }
.fon-df-bloc button { margin: 4px 4px 0 0; }
button.petit { padding: 3px 8px; font-size: 12px; }
.label-parcelle { background: rgba(255,255,255,.8); border: 0; box-shadow: none; padding: 0 3px; font-size: 10px; color: #212529; border-radius: 3px; }
.label-parcelle::before { display: none; }
.modal-card .check input { display: inline; width: auto; margin: 0 6px 0 0; }
.fon-histo li { display: block; }
#tab-fon .filters select { grid-column: auto; min-width: 0; }
#tab-fon input.full { display: block; width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; padding: 6px; border: 1px solid var(--border); border-radius: 6px; margin: 4px 0 6px; }
#tab-fon .row button { min-width: 0; }
.fon-switch { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); }
.fon-switch button { border-bottom: 1px solid var(--border); }
.fon-switch .tab-badge { margin-left: 2px; }
.fon-bloc { margin-top: 10px; }
.fon-bloc h4 { margin: 8px 0 4px; }
.fon-tit li { cursor: default; }
.fon-tit li.inactif { opacity: .6; }
.fon-tit li button { margin-top: 3px; }
.fon-pieces-liste li small { color: var(--muted); }
.fon-ctl li.fon-lit-ouvert { background: #fff5f5; }
.fon-liste li.fon-litige { border-left-color: #c92a2a; }
.fon-liste li.fon-litige.f-Résolu-à-l-amiable, .fon-liste li.fon-litige.f-Clos { border-left-color: #adb5bd; }
.badge.f-Signalé { background: #ffe3e3; color: #c8102e; }
.badge.f-En-médiation, .badge.f-Transmis-au-tribunal { background: #ffe8cc; color: #a34700; }
.badge.f-Résolu-à-l-amiable, .badge.f-Clos { background: #e9ecef; color: #495057; }
.fon-lit-ico { background: #c92a2a; color: #fff; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,.4); font-size: 13px; line-height: 20px; text-align: center; }
.fon-lab { display: block; font-size: 13px; margin-bottom: 8px; }
.fon-lab select, .fon-lab textarea { display: block; width: 100%; margin-top: 4px; padding: 6px; border: 1px solid var(--border); border-radius: 6px; font: inherit; }
.fon-barres { font-size: 12px; }
.fon-barre { display: grid; grid-template-columns: 38% 1fr auto; gap: 6px; align-items: center; margin: 3px 0; }
.fon-barre span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fon-barre i { display: block; height: 10px; background: #f1f3f5; border-radius: 0 4px 4px 0; }
.fon-barre i b { display: block; height: 100%; background: #2b8a3e; border-radius: 0 4px 4px 0; min-width: 2px; }
.fon-barre em { font-style: normal; color: var(--muted); white-space: nowrap; }
.fon-col { width: 100%; height: auto; display: block; }
.fon-col rect { fill: #2b8a3e; }
.fon-col rect.cible { fill: transparent; }
.fon-col g:hover rect:not(.cible) { fill: #1f6f43; }
.fon-col .axe { stroke: #adb5bd; stroke-width: 1; }
.fon-col text { font-size: 8px; fill: #868e96; text-anchor: middle; }
.fon-col text.v { fill: #212529; font-weight: 600; }
.fon-mini { display: inline-block; width: 40px; height: 6px; background: #f1f3f5; border-radius: 3px; margin-left: 4px; vertical-align: middle; }
.fon-mini b { display: block; height: 100%; background: #2b8a3e; border-radius: 3px; }
#fon-fis .stat-cards b { font-size: 15px; }

/* Table attributaire (bouton ⊞ du panneau des couches) */
.layer-item .table-btn { margin-left: auto; flex: none; padding: 0 6px; height: 22px; line-height: 20px; font-size: 14px; border: 1px solid transparent; background: transparent; color: var(--muted); border-radius: 4px; cursor: pointer; }
.layer-item .table-btn:hover { border-color: var(--border); background: #fff; color: var(--green-dark); }
.table-drawer { border-top-color: #1c7ed6; }
.table-drawer.agrandi { height: 75vh; }
body.drawer-open.drawer-grand #map { bottom: 75vh; }
.table-drawer .ta-titre { min-width: 0; }
.table-drawer .ta-titre span { color: var(--muted); }
.table-drawer .ta-actions { flex-wrap: wrap; }
.table-drawer .ta-actions input { font: inherit; font-size: 12px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; width: 190px; }
.ta-colonnes-wrap { position: relative; }
.ta-colonnes { position: absolute; right: 0; top: 100%; z-index: 5; background: #fff; border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.15); padding: 6px 10px; max-height: 40vh; overflow-y: auto; min-width: 200px; }
.ta-colonnes label { display: flex; gap: 6px; align-items: center; font-size: 12px; padding: 2px 0; white-space: nowrap; }
.ta-corps { flex: 1; min-height: 0; display: flex; }
.ta-msg { padding: 12px; }
.ta-defil { flex: 1; overflow: auto; }
.ta-table { table-layout: fixed; border-collapse: collapse; font-size: 12px; }
.ta-table th { position: sticky; top: 0; z-index: 1; background: #f1f5f9; text-align: left; padding: 0 8px; height: 26px; border-bottom: 1px solid var(--border); border-right: 1px solid #e2e8f0; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #334155; font-weight: 600; }
.ta-table th:hover { background: #e2e8f0; }
.ta-table th.calc { font-style: italic; }
.ta-table td { height: 26px; padding: 0 8px; border-bottom: 1px solid #eef0f2; border-right: 1px solid #f1f3f5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ta-table .ta-n { color: #94a3b8; text-align: right; background: #f8fafc; font-variant-numeric: tabular-nums; }
.ta-table tbody tr[data-i] { cursor: pointer; }
.ta-table tbody tr[data-i]:hover td { background: #eef6ff; }
.ta-table tbody tr.choisie td { background: #fff3bf; }
.ta-table tbody tr.choisie td.ta-n { background: #f2c230; color: #3b2f00; }
@media (max-width: 700px) {
  .table-drawer .ta-actions input { width: 100%; }
  .table-drawer.agrandi { height: 85vh; }
}

/* ---------- Gestion des déchets ---------- */
.dech-marker { background: none; border: 0; }
.dech-ico { position: relative; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--c); color: var(--t); font: 700 11px/1 system-ui, sans-serif; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); }
.dech-ico.ferme { background: #fff; border-color: var(--c); color: var(--c); box-shadow: none; }
.dech-ico.sature { box-shadow: 0 0 0 3px #d03b3b; }
.dech-ico.a-verifier { border-style: dashed; border-color: #212529; }
.dech-ico.choisi { box-shadow: 0 0 0 3px #f2c230, 0 0 0 4px rgba(0, 0, 0, .4); }
.dech-ico i { position: absolute; top: -7px; right: -7px; width: 13px; height: 13px; border-radius: 50%; background: #d03b3b; color: #fff;
  font: 700 9px/13px system-ui, sans-serif; font-style: normal; text-align: center; border: 1px solid #fff; }
.dech-photo img { max-width: 100%; max-height: 220px; border-radius: 4px; margin: 6px 0; }
.dech-ordre { padding-left: 22px; font-size: 13px; }
.dech-ordre li { margin: 4px 0; cursor: pointer; }
.dech-ordre li .row { margin: 3px 0 6px; }
.dech-passage li { padding: 4px 6px; border-radius: 4px; border-left: 3px solid #dee2e6; }
.dech-passage li.d-Collecté { border-left-color: #0ca30c; background: #f4fbf4; }
.dech-passage li.d-Saturé { border-left-color: #d03b3b; background: #fff5f5; }
.dech-passage li.d-Non-collecté { border-left-color: #fab219; background: #fffaeb; }
.dech-progres { height: 8px; background: #f1f3f5; border-radius: 4px; overflow: hidden; }
.dech-progres i { display: block; height: 100%; background: #2b8a3e; }
button.mini { padding: 0 6px; font-size: 12px; margin-left: 2px; }
.dech-jours { border: 1px solid var(--border); border-radius: 4px; padding: 4px 8px; margin: 6px 0; }
.dech-jours label.check { display: inline-flex; margin-right: 8px; }
.fon-liste li.d-inactive { opacity: .6; }
.badge.d-Actif, .badge.d-verifie, .badge.d-Collecté, .badge.d-Terminé { background: #d3f9d8; color: #1f6f43; }
.badge.d-Saturé { background: #ffe3e3; color: #c8102e; }
.badge.d-Fermé, .badge.d-Résorbé, .badge.d-Annulé { background: #e9ecef; color: #495057; }
.badge.d-a-verifier, .badge.d-Non-collecté { background: #fff3bf; color: #8a6d00; }
.badge.d-En-cours { background: #ffe8cc; color: #a34700; }
tr.cliquable { cursor: pointer; }
tr.cliquable:hover td { background: #f8f9fa; }

/* ---------- Protection de l'environnement ---------- */
.env-atteinte { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin: 3px; transform: rotate(45deg);
  background: #212529; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .45); }
.env-atteinte b { transform: rotate(-45deg); color: #fff; font: 700 11px/1 system-ui, sans-serif; }
.env-atteinte.grave { box-shadow: 0 0 0 3px #d03b3b; }
.env-atteinte.close { background: #fff; border-color: #868e96; box-shadow: none; }
.env-atteinte.close b { color: #868e96; }
.badge.e-Protection-intégrale { background: #d3f9d8; color: #1f6f43; font-weight: 600; }
.badge.e-Inconstructible { background: #e7f5ff; color: #1864ab; }
.badge.e-Constructible-sous-conditions, .badge.e-inactive, .badge.e-Tari { background: #e9ecef; color: #495057; }
.badge.e-Signalée, .badge.e-Tarit-en-saison-sèche, .badge.e-g-Moyenne { background: #fff3bf; color: #8a6d00; }
.badge.e-Constatée, .badge.e-Mise-en-demeure { background: #ffe8cc; color: #a34700; }
.badge.e-Sanctionnée, .badge.e-Pollué, .badge.e-g-Grave { background: #ffe3e3; color: #c8102e; }
.badge.e-Remise-en-état, .badge.e-Close, .badge.e-Permanent, .badge.e-g-Faible { background: #d3f9d8; color: #1f6f43; }
.badge.e-Classée-sans-suite { background: #e9ecef; color: #495057; }
.env-switch button { padding-left: 6px; padding-right: 6px; }

/* ---------- Réseaux : éclairage public, bornes-fontaines, pannes et fuites ---------- */
.res-panne { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin: 3px; border-radius: 3px;
  background: #212529; color: #fff; font: 700 11px/1 system-ui, sans-serif; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .45); }
.res-panne.urgente { box-shadow: 0 0 0 3px #d03b3b; }
.res-panne.retard { border-style: dashed; border-color: #d03b3b; }
.res-panne.close { background: #fff; border-color: #868e96; color: #868e96; box-shadow: none; }
.badge.r-Signalée, .badge.r-Débit-faible { background: #fff3bf; color: #8a6d00; }
.badge.r-Transmise { background: #e7f5ff; color: #1864ab; }
.badge.r-En-réparation { background: #ffe8cc; color: #a34700; }
.badge.r-Réparée, .badge.r-En-service { background: #d3f9d8; color: #1f6f43; }
.badge.r-En-panne, .badge.r-Urgente { background: #ffe3e3; color: #c8102e; }
.badge.r-Classée-sans-suite, .badge.r-Hors-service, .badge.r-Volé---détruit, .badge.r-Fermée { background: #e9ecef; color: #495057; }
.res-switch button { padding-left: 6px; padding-right: 6px; }

/* Marchés et gares routières */
.dech-ico.mar-ico { width: 22px; height: 22px; border-radius: 5px; }
.badge.m-En-activité, .badge.m-Libre, .badge.m-Valide { background: #d3f9d8; color: #1f6f43; }
.badge.m-Occupée { background: #e7f5ff; color: #1864ab; }
.badge.m-En-travaux { background: #fff3bf; color: #8a6d00; }
.badge.m-Fermé, .badge.m-Hors-service { background: #e9ecef; color: #495057; }
.badge.m-Annulée { background: #ffe3e3; color: #c8102e; }
.fon-li.annulee b, li.annulee b { text-decoration: line-through; color: #868e96; }
.mar-switch button { padding-left: 6px; padding-right: 6px; }
#mar-rec .filters label { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }

/* Espace agents : onglets en deux groupes (outils communs, services communaux) */
.tabs.tabs-groupes { display: block; padding: 0; }
.tab-groupe { padding: 4px 4px 0; }
a.brand { color: inherit; text-decoration: none; }
.tab-groupe + .tab-groupe { border-top: 1px solid var(--border); }
.tab-groupe-services { background: #f3f8f4; }
.tab-groupe-titre { display: block; padding: 2px 6px 0; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tab-groupe-services .tab-groupe-titre { color: var(--green); }
#tg-services-vide { margin: 2px 6px 6px; }
.modules-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px 8px; margin: 0 0 6px; }
.modules-choix legend { font-size: 13px; padding: 0 4px; }
.modules-choix .check { grid-column: auto; font-size: 13px; margin: 0; }
.modules-choix .check input { display: inline; width: auto; margin: 0; }
.tab-ligne { display: flex; flex-wrap: wrap; }
.tab-ligne .tab { flex: 1 0 auto; padding: 8px 8px; }
.tab-groupe-carte { padding: 4px; }
.tab-ligne .tab.tab-couches { padding: 8px; font-weight: 600; color: var(--green); border: 1px solid var(--border); border-radius: 6px; }
.tab-ligne .tab.tab-couches.active { background: var(--green); color: #fff; border-color: var(--green); }
/* Outils et services : boutons en relief, bien visibles */
.tab-groupe-outils, .tab-groupe-services { padding: 6px 6px 8px; }
.tab-groupe-outils .tab-groupe-titre, .tab-groupe-services .tab-groupe-titre { padding: 0 2px 5px; }
.tab-groupe-outils .tab-ligne, .tab-groupe-services .tab-ligne { gap: 6px; }
.tab-groupe-outils .tab-ligne .tab, .tab-groupe-services .tab-ligne .tab {
  padding: 8px 10px; border: 1px solid #cfd8d2; border-radius: 8px; background: #fff; color: #2b3a31;
  font-weight: 600; box-shadow: 0 1px 0 #cfd8d2, 0 2px 4px rgba(0,0,0,.08); transition: box-shadow .12s, transform .12s; }
.tab-groupe-services .tab-ligne .tab { border-color: #b7d3c0; color: #1f5132; }
.tab-groupe-outils .tab-ligne .tab:hover, .tab-groupe-services .tab-ligne .tab:hover {
  background: #eef6f0; border-color: var(--green); box-shadow: 0 2px 6px rgba(0,0,0,.12); transform: translateY(-1px); }
.tab-groupe-outils .tab-ligne .tab.active, .tab-groupe-services .tab-ligne .tab.active {
  background: var(--green); color: #fff; border-color: var(--green); box-shadow: inset 0 2px 3px rgba(0,0,0,.18); transform: none; }
.tab-groupe-outils .tab-ligne .tab:focus-visible, .tab-groupe-services .tab-ligne .tab:focus-visible { outline: 2px solid var(--yellow); outline-offset: 1px; }

/* Petit téléphone : le titre et l'Administration (tâche de bureau) laissent la place à la recherche et à la déconnexion */
@media (max-width: 520px) {
  .topbar .brand { display: none; }
  #link-admin { display: none !important; }
}

/* Sélection par localisation : fenêtre flottante à droite, la carte reste visible et cliquable */
.modal.loc-flottant { background: transparent; pointer-events: none; justify-content: flex-end; align-items: flex-start; padding: 70px 60px 0 0; }
.loc-flottant .modal-card { pointer-events: auto; box-shadow: 0 8px 30px rgba(0,0,0,.3); width: min(420px, 94vw); }
.loc-predicats { border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px 2px; margin: 0 0 10px; }
.loc-predicats legend { font-size: 13px; padding: 0 4px; }
#loc-predicats { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
#loc-predicats label { margin-bottom: 6px; grid-column: auto; font-size: 13px; }
.loc-progression { position: relative; height: 18px; border: 1px solid var(--border); border-radius: 4px; background: #f8f9fa; margin: 4px 0 8px; overflow: hidden; }
#loc-barre { height: 100%; width: 0; background: #b2f2bb; }
#loc-pct { position: absolute; inset: 0; text-align: center; font-size: 12px; line-height: 18px; }
.loc-journal { max-height: 90px; overflow-y: auto; font-size: 12px; color: var(--muted); }
.loc-journal:empty { display: none; }
@media (max-width: 700px) { .modal.loc-flottant { padding: 60px 0 0; justify-content: center; } }