:root {
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  color: #17324d;
  background: #f2f6fa;
  --blue: #075a9b;
  --blue-light: #0a7bc9;
  --green: #168a5b;
  --border: #d9e4ee;
  --danger: #b42318;
  --warning: #b54708;
  --shadow: 0 10px 30px rgba(15, 49, 80, 0.12);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #f2f6fa;
}

button,
input,
select,
textarea {
  font: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(10, 123, 201, 0.35);
  outline-offset: 2px;
}

.app-shell {
  min-height: 100vh;
  padding: 18px;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 22px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 14px 18px;
  box-shadow: var(--shadow);
}

.brand-logo {
  width: min(390px, 38vw);
  max-height: 105px;
  object-fit: contain;
  object-position: left center;
}

.topbar-copy {
  flex: 1;
}

.topbar-copy p {
  margin: 0.4rem 0;
  color: #5d7185;
}

.top-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.eyebrow {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 800;
  color: var(--blue);
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 14px 0;
}

.stats > div,
.admin-stats > div {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  text-align: center;
}

.stats strong,
.admin-stats strong {
  display: block;
  font-size: 1.55rem;
  color: var(--blue);
}

.stats span,
.admin-stats span {
  color: #65798d;
  font-size: 0.87rem;
}

.workspace {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 14px;
  min-height: 680px;
  align-items: stretch;
}

.sidebar,
.map-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
}

.sidebar {
  padding: 16px;
  overflow: auto;
}

.map-panel {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  padding: 8px;
  min-width: 0;
  min-height: 0;
}

.map {
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-height: max(630px, calc(100vh - 245px));
  border-radius: 15px;
}

.panel-form {
  display: grid;
  gap: 9px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

label {
  display: grid;
  gap: 6px;
  font-weight: 650;
  font-size: 0.9rem;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid #b9cbd9;
  border-radius: 10px;
  padding: 10px 11px;
  background: #fff;
  color: #17324d;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--blue-light);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #a8bccd;
  border-radius: 10px;
  padding: 10px 13px;
  background: #fff;
  color: #17324d;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  background: #f4f8fb;
}

.button.primary,
.button.route {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

.button.route {
  background: linear-gradient(135deg, var(--blue), var(--blue-light));
}

.button.location {
  width: 100%;
  margin: 14px 0;
}

.text-button {
  border: 0;
  background: transparent;
  color: var(--blue);
  padding: 2px;
  cursor: pointer;
  text-decoration: underline;
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px;
}

.fuel-selector {
  border: 0;
  padding: 0 0 16px;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.fuel-selector legend {
  grid-column: 1 / -1;
  font-weight: 800;
  margin-bottom: 3px;
}

.fuel-option {
  position: relative;
  display: block;
  cursor: pointer;
}

.fuel-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.fuel-option span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border: 2px solid #b8cad8;
  border-radius: 12px;
  background: #fff;
  font-weight: 850;
}

.fuel-option input:checked + span {
  border-color: var(--blue);
  background: #eaf5ff;
  color: var(--blue);
  box-shadow: 0 0 0 3px rgba(7, 90, 155, 0.12);
}

.fuel-option:nth-of-type(2) input:checked + span {
  border-color: var(--green);
  background: #ecf8f2;
  color: #106b45;
  box-shadow: 0 0 0 3px rgba(22, 138, 91, 0.12);
}

.view-count {
  padding: 12px 0 6px;
  font-size: 0.94rem;
}

.map-status {
  border-radius: 10px;
  padding: 9px 10px;
  background: #f4f7fa;
  color: #526b7d;
  font-size: 0.83rem;
}

.map-status[data-kind="loading"] {
  background: #eef6fc;
  color: #075a9b;
}

.map-status[data-kind="success"] {
  background: #eaf8ec;
  color: #185b22;
}

.map-status[data-kind="error"] {
  background: #fff0ef;
  color: #8c1d18;
}

.info-box,
.route-summary {
  background: #edf7ff;
  border: 1px solid #c8e4f8;
  border-radius: 12px;
  padding: 12px;
  margin-top: 10px;
}

.info-box p,
.route-summary p {
  font-size: 0.83rem;
  line-height: 1.45;
  margin: 0.5rem 0 0;
}

.alert {
  padding: 12px 14px;
  border-radius: 12px;
  margin: 12px 0;
  background: #fff4e5;
  border: 1px solid #f6c778;
  color: #7a3e00;
}

.alert.error {
  background: #fff0ef;
  border-color: #ffb4ab;
  color: #8c1d18;
}

.alert.success {
  background: #eaf8ec;
  border-color: #9bd6a2;
  color: #185b22;
}

.alert.info {
  display: block;
  color: #075a9b;
  background: #eaf5ff;
  border-color: #9cccf2;
}

.hidden {
  display: none !important;
}

.station-popup h2 {
  font-size: 1rem;
  margin: 0.2rem 0;
}

.station-id {
  font-size: 0.75rem;
  color: #6a7c8d;
}

.tag {
  display: inline-block;
  background: #e9f4ff;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 0.75rem;
}

.fuel-card {
  border: 1px solid #d9e4ee;
  border-radius: 10px;
  padding: 9px;
  margin-top: 9px;
}

.fuel-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.fuel-price {
  font-weight: 800;
  color: var(--blue);
}

.status {
  font-size: 0.78rem;
  margin-top: 5px;
}

.status.warning {
  color: var(--warning);
}

.status.danger {
  color: var(--danger);
}

.community-box {
  margin-top: 7px;
  background: #fff8e8;
  border-radius: 8px;
  padding: 7px;
  font-size: 0.78rem;
}

.popup-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 9px;
}

.popup-actions button {
  font-size: 0.75rem;
  padding: 7px;
  border: 1px solid #b8cad8;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.route-link {
  display: block;
  margin-top: 8px;
  color: var(--blue);
}

.cluster-label {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
  font-weight: 800;
  font-size: 12px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
  pointer-events: none !important;
}

.cluster-label::before {
  display: none !important;
}

footer {
  text-align: center;
  color: #65798d;
  font-size: 0.78rem;
  padding: 18px;
}

dialog {
  border: 0;
  border-radius: 18px;
  padding: 0;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
  max-width: 480px;
  width: calc(100% - 32px);
}

dialog::backdrop {
  background: rgba(10, 34, 54, 0.55);
}

.dialog-card {
  display: grid;
  gap: 12px;
  padding: 24px;
  position: relative;
}

.dialog-close {
  position: absolute;
  right: 12px;
  top: 9px;
  border: 0;
  background: transparent;
  font-size: 1.8rem;
  cursor: pointer;
}

.field-group {
  display: grid;
  gap: 6px;
}

.install-page,
.admin-page {
  min-height: 100vh;
  padding: 28px;
  background: linear-gradient(135deg, #eaf6ff, #f5fbf2);
}

.install-card,
.admin-card {
  max-width: 850px;
  margin: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 28px;
  box-shadow: var(--shadow);
}

.install-logo,
.admin-logo {
  width: min(480px, 100%);
  max-height: 170px;
  object-fit: contain;
  object-position: left;
}

.install-form {
  display: grid;
  gap: 13px;
}

.install-form h2 {
  margin: 18px 0 0;
}

.install-form small {
  font-weight: 400;
  color: #63778b;
}

.admin-nav {
  display: flex;
  gap: 20px;
  margin: 12px 0;
}

.admin-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.report-table {
  overflow: auto;
}

.report-table table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.82rem;
}

.report-table th,
.report-table td {
  border-bottom: 1px solid var(--border);
  padding: 8px;
  text-align: left;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .app-shell {
    padding: 8px;
  }

  .topbar {
    flex-wrap: wrap;
  }

  .brand-logo {
    width: 75%;
    max-height: 92px;
  }

  .topbar-copy {
    order: 3;
    flex-basis: 100%;
  }


  .stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .workspace {
    grid-template-columns: 1fr;
  }

  .map-panel {
    order: 1;
  }

  .sidebar {
    order: 2;
  }

  .map-panel {
    display: block;
  }

  .map {
    width: 100%;
    height: 62vh;
    min-height: 470px;
  }
}

@media (max-width: 520px) {
  .brand-logo {
    width: 100%;
  }

  .top-actions {
    width: 100%;
  }

  .top-actions .button {
    flex: 1;
  }

  .popup-actions {
    grid-template-columns: 1fr;
  }

  .install-page,
  .admin-page {
    padding: 10px;
  }

  .install-card,
  .admin-card {
    padding: 17px;
  }
}


/* V0.6.0 */
.admin-footer-link {
  display: inline-block;
  margin-top: 4px;
  color: #6b7f91;
  font-size: 0.75rem;
}

.brand-box {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 8px 0;
  padding: 8px;
  border-radius: 10px;
  background: #f2f7fa;
  border: 1px solid #d7e3eb;
  min-height: 42px;
}

.brand-logo-small {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
}

.brand-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #075a9b;
  color: #fff;
  font-weight: 900;
}

.brand-details {
  min-width: 0;
}

.brand-details strong,
.brand-details small {
  display: block;
  overflow-wrap: anywhere;
}

.pdf-button {
  width: 100%;
  margin-top: 10px;
  background: #17324d;
  color: #fff;
  border-color: #17324d;
}

.popup-open .map-status {
  opacity: 0.75;
}

.admin-brand-form {
  max-width: 680px;
  margin-bottom: 28px;
}

.admin-stats {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 620px) {
  .admin-stats {
    grid-template-columns: 1fr;
  }
}


/* ------------------------------------------------------------------
   Version V0.7.0 : identification de build, prix sur marqueurs et liste
   ------------------------------------------------------------------ */

.release-badge,
.footer-release {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 5px;
  border: 1px solid #b8cad8;
  border-radius: 999px;
  padding: 4px 9px;
  background: #f7fafc;
  color: #526b7d;
  font-size: 0.72rem;
  font-weight: 750;
}

.release-badge[data-release-state="current"],
.footer-release[data-release-state="current"] {
  border-color: #9bd6a2;
  background: #edf9ef;
  color: #185b22;
}

.release-badge[data-release-state="mismatch"],
.footer-release[data-release-state="mismatch"] {
  border-color: #f6c778;
  background: #fff5e6;
  color: #7a3e00;
}

.map-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 4px 10px;
}

.view-switcher {
  display: inline-flex;
  gap: 5px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #f4f7fa;
}

.view-button {
  border: 0;
  border-radius: 8px;
  padding: 8px 11px;
  background: transparent;
  color: #526b7d;
  font-weight: 750;
  cursor: pointer;
}

.view-button.active {
  background: #fff;
  color: var(--blue);
  box-shadow: 0 2px 8px rgba(15, 49, 80, 0.12);
}

.sort-control {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
}

.sort-control select {
  width: auto;
  min-width: 155px;
  padding: 8px 10px;
}

.map-results-layout {
  flex: 1 1 auto;
  min-height: max(630px, calc(100vh - 300px));
  display: grid;
  gap: 10px;
  min-width: 0;
  min-height: 0;
}

.map-results-layout.view-map {
  grid-template-columns: minmax(0, 1fr);
}

.map-results-layout.view-map .results-panel {
  display: none;
}

.map-results-layout.view-list {
  grid-template-columns: minmax(0, 1fr);
}

.map-results-layout.view-list .map {
  display: none;
}

.map-results-layout.view-split {
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.75fr);
}

.map-results-layout .map {
  height: 100%;
  min-height: max(630px, calc(100vh - 300px));
}

.results-panel {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: #f8fbfd;
  display: flex;
  flex-direction: column;
}

.results-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid var(--border);
  background: #fff;
}

.results-panel-head span {
  color: #65798d;
  font-size: 0.78rem;
}

.results-list {
  overflow: auto;
  padding: 9px;
  display: grid;
  align-content: start;
  gap: 8px;
}

.empty-results {
  margin: 20px;
  color: #65798d;
  text-align: center;
}

.station-list-card {
  border: 1px solid #d9e4ee;
  border-radius: 12px;
  padding: 10px;
  background: #fff;
}

.station-list-main {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.station-list-brand {
  color: var(--blue);
  font-weight: 850;
}

.station-list-location {
  font-weight: 750;
}

.station-list-address {
  color: #65798d;
  font-size: 0.8rem;
}

.station-list-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 9px;
}

.station-list-metrics > * {
  border-radius: 999px;
  padding: 4px 7px;
  background: #eef4f8;
  font-size: 0.72rem;
}

.station-list-metrics strong {
  background: #e8f5ed;
  color: #106b45;
}

.station-list-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.station-list-actions button,
.station-list-actions a {
  border: 1px solid #b8cad8;
  border-radius: 8px;
  padding: 6px 8px;
  background: #fff;
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
}

.price-div-icon {
  background: transparent;
  border: 0;
}

.price-pin {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 62px;
  min-height: 31px;
  padding: 5px 7px;
  border: 2px solid #fff;
  border-radius: 12px 12px 12px 2px;
  box-shadow: 0 3px 12px rgba(15, 49, 80, 0.35);
  color: #fff;
  transform: rotate(-2deg);
  white-space: nowrap;
}

.price-pin::after {
  content: "";
  position: absolute;
  left: 6px;
  bottom: -7px;
  width: 12px;
  height: 12px;
  background: inherit;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

.price-pin small,
.price-pin strong {
  position: relative;
  z-index: 1;
}

.price-pin small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  color: #17324d;
  font-weight: 900;
}

.price-pin strong {
  font-size: 0.76rem;
}

.price-pin.level-low {
  background: #198754;
}

.price-pin.level-mid {
  background: #075a9b;
}

.price-pin.level-high {
  background: #b54708;
}

.price-pin.level-unknown {
  background: #65798d;
}

.price-pin.has-report {
  outline: 3px solid #f5b942;
  outline-offset: 1px;
}

.footer-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 1100px) {
  .map-results-layout.view-split {
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.85fr);
  }
}

@media (max-width: 900px) {
  .map-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .view-switcher {
    width: 100%;
  }

  .view-button {
    flex: 1;
  }

  .sort-control {
    justify-content: space-between;
  }

  .map-results-layout,
  .map-results-layout.view-split {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .map-results-layout.view-split .map,
  .map-results-layout.view-split .results-panel {
    min-height: 52vh;
  }

  .map-results-layout .map {
    height: 62vh;
    min-height: 470px;
  }

  .results-panel {
    max-height: 62vh;
  }
}


/* Géolocalisation V0.7.1 */

.location-panel {
  display: grid;
  gap: 8px;
  padding: 0 0 16px;
  margin: 0 0 14px;
  border-bottom: 1px solid var(--border);
}

.location-panel .button.location {
  margin: 0;
}

.location-panel .button[aria-busy="true"] {
  opacity: 0.75;
  cursor: progress;
}

.auto-location-option {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 8px;
  color: #526b7d;
  font-size: 0.78rem;
  font-weight: 550;
  cursor: pointer;
}

.auto-location-option input {
  width: auto;
  margin: 2px 0 0;
}

.location-status {
  min-height: 2.6em;
  margin: 0;
  border-radius: 9px;
  padding: 7px 9px;
  background: #f4f7fa;
  color: #526b7d;
  font-size: 0.76rem;
  line-height: 1.35;
}

.location-status[data-kind="loading"] {
  background: #eef6fc;
  color: #075a9b;
}

.location-status[data-kind="success"] {
  background: #eaf8ec;
  color: #185b22;
}

.location-status[data-kind="warning"] {
  background: #fff5e6;
  color: #7a3e00;
}

.location-status[data-kind="error"] {
  background: #fff0ef;
  color: #8c1d18;
}


/* Administration des enseignes V0.7.3 */

.admin-brand-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 14px 0 22px;
}

.admin-brand-grid .admin-brand-form {
  align-content: start;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  background: #f8fbfd;
}

.inline-admin-form {
  display: inline-flex;
  margin: 2px;
}

.brand-details {
  display: grid;
  gap: 2px;
}

.brand-details small {
  display: block;
}

@media (max-width: 760px) {
  .admin-brand-grid {
    grid-template-columns: 1fr;
  }
}


/* Filtres et campagne V0.7.4 */
.availability-filters { display:grid; gap:8px; border:0; padding:0 0 16px; margin:0 0 16px; border-bottom:1px solid var(--border); }
.availability-filters legend { margin-bottom:3px; font-weight:800; }
.switch-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; border:1px solid var(--border); border-radius:12px; padding:10px; background:#f8fbfd; cursor:pointer; }
.switch-row > span:first-child { display:grid; gap:2px; }
.switch-row small { color:#65798d; font-weight:450; line-height:1.3; }
.switch-row input { position:absolute; opacity:0; pointer-events:none; }
.switch-control { position:relative; width:46px; height:26px; border-radius:999px; background:#b9c8d3; transition:background 160ms ease; }
.switch-control::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 5px rgba(15,49,80,.3); transition:transform 160ms ease; }
.switch-row input:checked + .switch-control { background:var(--blue); }
.switch-row input:checked + .switch-control::after { transform:translateX(20px); }
.switch-row input:focus-visible + .switch-control { outline:3px solid rgba(10,123,201,.35); outline-offset:3px; }
.filter-note { margin:2px 0 0; color:#65798d; font-size:.75rem; line-height:1.4; }
.availability-badges { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.availability-badge { display:inline-flex; align-items:center; border-radius:999px; padding:4px 7px; font-size:.7rem; font-weight:800; }
.availability-badge.broken { background:#fff0ef; color:#8c1d18; }
.availability-badge.rupture { background:#fff5e6; color:#7a3e00; }
.availability-badge.no-price { background:#eef2f5; color:#526b7d; }
.price-pin.is-broken { outline:4px solid #d92d20; outline-offset:1px; }
.price-pin.is-rupture { box-shadow:0 0 0 4px #f5b942,0 3px 12px rgba(15,49,80,.35); }
.price-pin.is-no-price { border-style:dashed; }
.brand-campaign { display:grid; gap:10px; margin:16px 0 22px; border:1px solid #b8d8ee; border-radius:16px; padding:16px; background:#f2f9fe; }
.brand-campaign progress { width:100%; height:18px; }
.brand-campaign p { margin:0; }
.brand-campaign-details { color:#526b7d; font-size:.82rem; }
.brand-campaign-actions { display:flex; flex-wrap:wrap; gap:8px; }


/* Google Places V0.7.6 */
.google-places-config {
  display: grid;
  gap: 12px;
  margin: 12px 0 24px;
  border: 1px solid #cbddec;
  border-radius: 16px;
  padding: 16px;
  background: #f8fbfd;
}

.google-places-form {
  max-width: 680px;
}

.config-status {
  display: inline-flex;
  margin-left: 6px;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 0.75rem;
  font-weight: 800;
}

.config-status.configured {
  background: #eaf8ec;
  color: #185b22;
}

.config-status.missing {
  background: #fff5e6;
  color: #7a3e00;
}

.google-maps-attribution {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  color: #5e5e5e;
}

.google-maps-attribution a {
  color: inherit;
  font-weight: 650;
}


/* Source officielle gratuite V0.7.7 */

.official-source-note {
  color: #526b7d;
  font-size: 0.82rem;
  line-height: 1.45;
}


/* Référentiel centralisé V0.8.0 */
.admin-brand-logo { width: 82px; height: 46px; object-fit: contain; border-radius: 8px; background: #fff; border: 1px solid var(--border); padding: 4px; }
.brand-logo-small { object-fit: contain; background: rgba(255,255,255,.92); }


/* ------------------------------------------------------------------
   V0.9.0 : navigation, proximité et ergonomie smartphone
   ------------------------------------------------------------------ */

.sidebar-mobile-head,
.mobile-menu-toggle,
.sidebar-backdrop {
  display: none;
}

.route-start-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: stretch;
}

.button.route-location {
  min-width: 112px;
  padding-inline: 10px;
  color: var(--blue);
  border-color: #8ebde0;
  background: #eef7ff;
}

.route-start-status,
.location-status {
  color: #65798d;
  font-size: 0.76rem;
  line-height: 1.4;
}

.route-start-status[data-kind="loading"],
.location-status[data-kind="loading"] {
  color: var(--blue);
}

.route-start-status[data-kind="success"],
.location-status[data-kind="success"] {
  color: #106b45;
}

.route-start-status[data-kind="error"],
.location-status[data-kind="error"] {
  color: var(--danger);
}

.nearby-panel {
  display: grid;
  gap: 9px;
  padding: 0 0 16px;
  margin: 0 0 14px;
  border-bottom: 1px solid var(--border);
}

.nearby-summary {
  color: #65798d;
  font-size: 0.72rem;
  font-weight: 700;
}

.nearby-results {
  display: grid;
  gap: 7px;
}

.nearby-results > p {
  margin: 0;
  color: #65798d;
  font-size: 0.78rem;
  line-height: 1.45;
}

.nearby-station {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 1px solid #d7e3eb;
  border-radius: 11px;
  padding: 9px;
  background: #f8fbfd;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.nearby-station:hover {
  border-color: #8ebde0;
  background: #eef7ff;
}

.nearby-station > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.nearby-station strong,
.nearby-station small {
  overflow-wrap: anywhere;
}

.nearby-station small {
  color: #65798d;
  font-size: 0.72rem;
}

.nearby-station-metrics {
  text-align: right;
}

.nearby-station-metrics strong {
  color: #106b45;
  white-space: nowrap;
}

.popup-navigation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 10px;
}

.navigation-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border: 1px solid #b8cad8;
  border-radius: 9px;
  padding: 8px 9px;
  background: #fff;
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}

.navigation-google {
  border-color: #8ebde0;
  background: #eef7ff;
}

.navigation-waze {
  border-color: #9bd8d3;
  background: #edfafa;
  color: #075f69;
}

.navigation-osm {
  grid-column: 1 / -1;
}

@media (min-width: 901px) {
  .workspace {
    height: calc(100dvh - 245px);
    min-height: 600px;
    align-items: stretch;
  }

  .sidebar,
  .map-panel {
    height: 100%;
    min-height: 0;
  }

  .sidebar {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  .map-panel {
    overflow: hidden;
  }

  .map-results-layout,
  .map-results-layout .map {
    height: 100%;
    min-height: 0;
  }
}

@media (max-width: 900px) {
  body {
    overflow-x: hidden;
  }

  body.sidebar-mobile-open {
    overflow: hidden;
  }

  .app-shell {
    padding: 8px;
  }

  .workspace {
    display: block;
    min-height: 0;
  }

  .map-panel {
    min-height: 610px;
    height: calc(100dvh - 16px);
    border-radius: 16px;
    padding: 6px;
  }

  .map-toolbar {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 7px;
    padding: 2px 2px 7px;
  }

  .mobile-menu-toggle {
    display: inline-flex;
    width: 100%;
    min-height: 44px;
    border-color: var(--blue);
    background: var(--blue);
    color: #fff;
  }

  .view-switcher {
    width: 100%;
  }

  .view-button {
    min-height: 40px;
  }

  .view-button[data-view-mode="split"] {
    display: none;
  }

  .sort-control {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .sort-control select {
    width: 100%;
    min-width: 0;
  }

  .map-results-layout,
  .map-results-layout.view-split {
    height: 100%;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  .map-results-layout .map,
  .map-results-layout.view-split .map {
    height: 100%;
    min-height: 0;
  }

  .results-panel {
    max-height: none;
    height: 100%;
  }

  .sidebar {
    position: fixed;
    z-index: 2200;
    inset: 0 auto 0 0;
    width: min(92vw, 390px);
    height: 100dvh;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    border-radius: 0 18px 18px 0;
    padding: 0 16px calc(24px + env(safe-area-inset-bottom));
    transform: translateX(-104%);
    transition: transform 190ms ease;
    box-shadow: 18px 0 50px rgba(15, 49, 80, 0.28);
  }

  body.sidebar-mobile-open .sidebar {
    transform: translateX(0);
  }

  .sidebar-mobile-head {
    position: sticky;
    z-index: 3;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 -16px 15px;
    padding:
      calc(13px + env(safe-area-inset-top))
      16px
      13px;
    border-bottom: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
  }

  .sidebar-mobile-close {
    min-height: 40px;
    border: 1px solid #b8cad8;
    border-radius: 9px;
    padding: 7px 10px;
    background: #fff;
    color: var(--blue);
    font-weight: 800;
    cursor: pointer;
  }

  .sidebar-backdrop {
    position: fixed;
    z-index: 2100;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(10, 34, 54, 0.48);
    cursor: pointer;
  }

  body.sidebar-mobile-open .sidebar-backdrop {
    display: block;
  }

  .leaflet-popup-content-wrapper {
    max-width: calc(100vw - 30px);
  }

  .leaflet-popup-content {
    width: auto !important;
    max-width: calc(100vw - 62px);
    margin: 13px;
  }

  .popup-actions button,
  .navigation-button {
    min-height: 44px;
  }
}

@media (max-width: 520px) {
  .topbar {
    gap: 8px;
    padding: 9px;
    border-radius: 14px;
  }

  .brand-logo {
    width: min(66%, 260px);
    max-height: 62px;
  }

  .topbar-copy p {
    font-size: 0.76rem;
  }

  .eyebrow {
    font-size: 0.66rem;
  }

  .release-badge {
    font-size: 0.64rem;
  }

  .stats {
    gap: 6px;
    margin: 8px 0;
  }

  .stats > div {
    padding: 8px 5px;
    border-radius: 11px;
  }

  .stats strong {
    font-size: 1.15rem;
  }

  .stats span {
    font-size: 0.68rem;
  }

  .map-panel {
    height: calc(100dvh - 12px);
    min-height: 560px;
  }

  .route-start-row {
    grid-template-columns: 1fr;
  }

  .button.route-location {
    width: 100%;
  }

  .popup-navigation {
    grid-template-columns: 1fr 1fr;
  }

  .navigation-osm {
    grid-column: 1 / -1;
  }
}


/* ------------------------------------------------------------------
   V0.9.1 : autocomplétion des communes
   ------------------------------------------------------------------ */

.commune-autocomplete {
  position: relative;
  min-width: 0;
}

.commune-autocomplete > input {
  width: 100%;
}

.search-help {
  display: block;
  margin-top: 6px;
  color: #65798d;
  font-size: 0.74rem;
  line-height: 1.4;
}

.commune-suggestions {
  position: absolute;
  z-index: 2600;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  max-height: min(340px, 46vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid #b8cad8;
  border-radius: 12px;
  padding: 5px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(15, 49, 80, 0.22);
}

.commune-suggestion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 49px;
  border: 0;
  border-radius: 9px;
  padding: 8px 10px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.commune-suggestion + .commune-suggestion {
  border-top: 1px solid #edf1f4;
}

.commune-suggestion:hover,
.commune-suggestion.active,
.commune-suggestion[aria-selected="true"] {
  background: #eaf5ff;
  color: #075a9b;
}

.commune-suggestion > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.commune-suggestion strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.commune-suggestion small {
  color: #65798d;
  font-size: 0.72rem;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .search-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .search-row > .button {
    width: 100%;
  }

  .commune-suggestions {
    position: fixed;
    z-index: 2700;
    top: auto;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: 10px;
    max-height: min(52vh, 420px);
    border-radius: 16px;
    padding: 7px;
  }

  .commune-suggestion {
    min-height: 54px;
  }
}


/* ------------------------------------------------------------------
   V0.9.3 : autocomplétion du parcours
   ------------------------------------------------------------------ */

.route-autocomplete {
  position: relative;
  min-width: 0;
}

.route-autocomplete > input {
  width: 100%;
}

.route-start-row > .route-autocomplete {
  min-width: 0;
}

.route-commune-suggestions {
  z-index: 2800;
}

@media (max-width: 520px) {
  .route-autocomplete .route-commune-suggestions {
    position: fixed;
    z-index: 2900;
    top: auto;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: 10px;
    max-height: min(52vh, 420px);
  }
}


/* ------------------------------------------------------------------
   V0.9.4 : ascenseur visible sur smartphone
   ------------------------------------------------------------------ */

.mobile-sidebar-scrollbar {
  display: none;
}

@media (max-width: 900px) {
  .sidebar {
    overflow-y: scroll !important;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    scrollbar-width: thin;
    scrollbar-color: #1780c4 rgba(225, 239, 247, 0.9);
  }

  .sidebar::-webkit-scrollbar {
    width: 10px;
  }

  .sidebar::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(225, 239, 247, 0.9);
  }

  .sidebar::-webkit-scrollbar-thumb {
    min-height: 52px;
    border: 2px solid rgba(225, 239, 247, 0.9);
    border-radius: 999px;
    background:
      linear-gradient(180deg, #66c72f 0%, #1780c4 100%);
  }

  .mobile-sidebar-scrollbar {
    position: fixed;
    z-index: 2250;
    top: calc(76px + env(safe-area-inset-top));
    bottom: calc(16px + env(safe-area-inset-bottom));
    left: calc(min(92vw, 390px) - 14px);
    display: block;
    width: 9px;
    border-radius: 999px;
    background: rgba(213, 231, 242, 0.9);
    box-shadow:
      0 0 0 1px rgba(21, 85, 127, 0.15),
      0 4px 14px rgba(15, 49, 80, 0.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease;
  }

  .mobile-sidebar-scrollbar.visible {
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-sidebar-scroll-thumb {
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    min-height: 52px;
    border-radius: 999px;
    background:
      linear-gradient(180deg, #66c72f 0%, #1780c4 100%);
    box-shadow: 0 2px 8px rgba(15, 49, 80, 0.34);
    cursor: grab;
    touch-action: none;
    will-change: transform;
  }

  .mobile-sidebar-scroll-thumb:active,
  body.sidebar-scrollbar-dragging
    .mobile-sidebar-scroll-thumb {
    cursor: grabbing;
  }

  body.sidebar-scrollbar-dragging {
    user-select: none;
  }
}

@media (max-width: 420px) {
  .mobile-sidebar-scrollbar {
    left: calc(92vw - 13px);
  }
}


/* ------------------------------------------------------------------
   V0.9.5 : ascenseur mobile élargi et plus visible
   ------------------------------------------------------------------ */

@media (max-width: 900px) {
  .sidebar {
    padding-right: 52px;
    scrollbar-width: auto;
    scrollbar-color: #075a9b #dcecf5;
  }

  .sidebar::-webkit-scrollbar {
    width: 16px;
  }

  .sidebar::-webkit-scrollbar-track {
    border: 1px solid #9fc1d7;
    background: #dcecf5;
  }

  .sidebar::-webkit-scrollbar-thumb {
    min-height: 76px;
    border: 3px solid #dcecf5;
    background:
      linear-gradient(
        180deg,
        #79d83a 0%,
        #2f9bd5 52%,
        #075a9b 100%
      );
    box-shadow:
      inset 0 0 0 1px rgba(0, 61, 105, 0.28);
  }

  .mobile-sidebar-scrollbar {
    top: calc(82px + env(safe-area-inset-top));
    bottom: calc(22px + env(safe-area-inset-bottom));
    left: calc(min(92vw, 390px) - 44px);
    width: 30px;
    border: 2px solid #6b9fbd;
    background: rgba(220, 236, 245, 0.98);
    box-shadow:
      0 0 0 3px rgba(255, 255, 255, 0.78),
      0 6px 20px rgba(15, 49, 80, 0.34);
  }

  .mobile-sidebar-scrollbar.visible {
    opacity: 1;
  }

  .mobile-sidebar-scroll-thumb {
    left: 5px;
    width: 16px;
    min-height: 76px;
    border: 2px solid #ffffff;
    background:
      linear-gradient(
        180deg,
        #7ee041 0%,
        #35a6df 48%,
        #075a9b 100%
      );
    box-shadow:
      0 0 0 2px rgba(7, 90, 155, 0.42),
      0 4px 12px rgba(15, 49, 80, 0.48);
  }

  .mobile-sidebar-scroll-thumb::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 22px;
    border-top: 3px solid rgba(255, 255, 255, 0.95);
    border-bottom: 3px solid rgba(255, 255, 255, 0.95);
    transform: translate(-50%, -50%);
    opacity: 0.95;
  }

  .mobile-sidebar-scrollbar::before {
    content: "↕";
    position: absolute;
    top: 8px;
    left: 50%;
    color: #075a9b;
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
    transform: translateX(-50%);
    pointer-events: none;
  }

  .mobile-sidebar-scrollbar::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.92);
    pointer-events: none;
  }
}

@media (max-width: 420px) {
  .sidebar {
    padding-right: 48px;
  }

  .mobile-sidebar-scrollbar {
    left: calc(92vw - 42px);
    width: 28px;
  }

  .mobile-sidebar-scroll-thumb {
    left: 5px;
    width: 14px;
  }
}


/* ------------------------------------------------------------------
   V0.9.6 : ascenseur de la page principale sur smartphone
   ------------------------------------------------------------------ */

.mobile-page-scrollbar {
  display: none;
}

@media (max-width: 900px) {
  /*
   * Le panneau Filtres et parcours conserve uniquement son défilement
   * naturel. Les règles très larges des V0.9.4 et V0.9.5 sont annulées.
   */
  .sidebar {
    padding-right: 16px;
    scrollbar-width: thin;
    scrollbar-color: #1780c4 rgba(225, 239, 247, 0.9);
  }

  .sidebar::-webkit-scrollbar {
    width: 8px;
  }

  .sidebar::-webkit-scrollbar-thumb {
    min-height: 44px;
    border: 2px solid rgba(225, 239, 247, 0.9);
  }

  .mobile-sidebar-scrollbar {
    display: none !important;
  }

  .mobile-page-scrollbar {
    position: fixed;
    z-index: 2050;
    top: calc(18px + env(safe-area-inset-top));
    right: 5px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    display: block;
    width: 32px;
    border: 2px solid #5d94b7;
    border-radius: 999px;
    background: rgba(222, 238, 247, 0.97);
    box-shadow:
      0 0 0 3px rgba(255, 255, 255, 0.82),
      0 7px 22px rgba(15, 49, 80, 0.38);
    opacity: 0;
    pointer-events: none;
    transition:
      opacity 150ms ease,
      transform 150ms ease;
    transform: translateX(5px);
  }

  .mobile-page-scrollbar.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
  }

  body.sidebar-mobile-open .mobile-page-scrollbar {
    opacity: 0;
    pointer-events: none;
    transform: translateX(8px);
  }

  .mobile-page-scrollbar::before {
    content: "PAGE";
    position: absolute;
    top: 11px;
    left: 50%;
    color: #075a9b;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.5px;
    writing-mode: vertical-rl;
    transform: translateX(-50%);
    pointer-events: none;
  }

  .mobile-page-scrollbar::after {
    content: "↕";
    position: absolute;
    right: 0;
    bottom: 8px;
    left: 0;
    color: #075a9b;
    font-size: 17px;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    pointer-events: none;
  }

  .mobile-page-scroll-thumb {
    position: absolute;
    top: 0;
    left: 6px;
    width: 16px;
    min-height: 88px;
    border: 2px solid #fff;
    border-radius: 999px;
    background:
      linear-gradient(
        180deg,
        #80df42 0%,
        #38a9df 48%,
        #075a9b 100%
      );
    box-shadow:
      0 0 0 2px rgba(7, 90, 155, 0.46),
      0 4px 12px rgba(15, 49, 80, 0.48);
    cursor: grab;
    touch-action: none;
    will-change: transform;
  }

  .mobile-page-scroll-thumb::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 24px;
    border-top: 3px solid rgba(255, 255, 255, 0.96);
    border-bottom: 3px solid rgba(255, 255, 255, 0.96);
    transform: translate(-50%, -50%);
  }

  .mobile-page-scroll-thumb:active,
  body.page-scrollbar-dragging
    .mobile-page-scroll-thumb {
    cursor: grabbing;
  }

  body.page-scrollbar-dragging {
    user-select: none;
  }

  /*
   * Évite que le nouvel ascenseur recouvre les boutons situés à droite.
   */
  body:not(.sidebar-mobile-open) .app-shell,
  body:not(.sidebar-mobile-open) footer {
    padding-right: 43px;
  }
}

@media (max-width: 420px) {
  .mobile-page-scrollbar {
    right: 4px;
    width: 30px;
  }

  .mobile-page-scroll-thumb {
    left: 6px;
    width: 14px;
  }

  body:not(.sidebar-mobile-open) .app-shell,
  body:not(.sidebar-mobile-open) footer {
    padding-right: 40px;
  }
}


/* V0.9.7 : ascenseur du menu, logo centré, commentaires retirés */
@media (max-width: 900px) {
  .topbar {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
  }
  .brand-logo {
    display: block;
    width: min(340px, 82vw);
    max-width: 100%;
    max-height: 128px;
    margin: 0 auto;
    object-position: center;
  }
  .topbar-copy { width: 100%; text-align: center; }
  .mobile-sidebar-scrollbar {
    position: fixed;
    z-index: 2250;
    top: calc(78px + env(safe-area-inset-top));
    bottom: calc(18px + env(safe-area-inset-bottom));
    left: calc(min(92vw, 390px) - 29px);
    display: block !important;
    width: 18px;
    border: 1px solid #78a8c5;
    border-radius: 999px;
    background: rgba(222, 238, 247, 0.97);
    box-shadow: 0 0 0 2px rgba(255,255,255,.76),0 4px 14px rgba(15,49,80,.28);
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease;
  }
  .mobile-sidebar-scrollbar.visible { opacity: 1; pointer-events: auto; }
  .mobile-sidebar-scroll-thumb {
    position: absolute;
    top: 0;
    left: 3px;
    width: 10px;
    min-height: 64px;
    border: 1px solid #fff;
    border-radius: 999px;
    background: linear-gradient(180deg,#78da3b 0%,#2e9ed7 52%,#075a9b 100%);
    box-shadow: 0 0 0 1px rgba(7,90,155,.38),0 3px 10px rgba(15,49,80,.4);
    cursor: grab;
    touch-action: none;
    will-change: transform;
  }
  .mobile-sidebar-scroll-thumb::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 5px; height: 18px;
    border-top: 2px solid rgba(255,255,255,.96);
    border-bottom: 2px solid rgba(255,255,255,.96);
    transform: translate(-50%,-50%);
  }
  body:not(.sidebar-mobile-open) .mobile-sidebar-scrollbar { opacity: 0; pointer-events: none; }
  body.sidebar-mobile-open .mobile-sidebar-scrollbar.visible { opacity: 1; pointer-events: auto; }
  .sidebar { padding-right: 30px; }
}
@media (max-width: 520px) {
  .brand-logo { width: min(315px, 86vw); max-height: 120px; }
}
@media (max-width: 420px) {
  .mobile-sidebar-scrollbar { left: calc(92vw - 28px); width: 17px; }
  .mobile-sidebar-scroll-thumb { left: 3px; width: 9px; }
  .sidebar { padding-right: 28px; }
}


/* V0.9.8 */
.topbar-logo-only{justify-content:center}.topbar-logo-only .brand-logo{object-position:center;margin-inline:auto}.stats-sidebar{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--border)}.stats-sidebar>div{padding:9px 5px;border-radius:11px;background:#f7fbfd}.stats-sidebar strong{font-size:1.15rem}.stats-sidebar span{font-size:.72rem}.footer-meta{display:grid;justify-items:center;gap:6px;margin:0 auto 12px}.footer-meta p{margin:0}.footer-sources{max-width:900px;margin:0 auto 10px}.gps-tracking-badge{display:inline-flex;align-items:center;width:fit-content;margin-top:8px;border:1px solid #b7cbd8;border-radius:999px;padding:5px 9px;background:#f4f8fa;color:#65798d;font-size:.72rem;font-weight:800}.gps-tracking-badge[data-state="on"]{border-color:#84cba9;background:#eaf8f1;color:#126942}.gps-tracking-badge[data-state="on"]::before{content:"";width:8px;height:8px;margin-right:6px;border-radius:50%;background:#2aa36b;box-shadow:0 0 0 4px rgba(42,163,107,.14)}.route-place-suggestion .place-kind{max-width:90px;overflow:hidden;color:var(--blue);text-overflow:ellipsis;white-space:nowrap}.map-results-layout{position:relative}.map-gesture-hint{position:absolute;z-index:900;top:50%;left:50%;max-width:250px;border-radius:12px;padding:10px 14px;background:rgba(15,49,80,.88);color:#fff;font-size:.82rem;font-weight:800;text-align:center;pointer-events:none;opacity:0;transform:translate(-50%,-50%);transition:opacity 130ms ease}.map-gesture-hint.visible{opacity:1}
@media(max-width:900px){.topbar-logo-only{min-height:130px}.topbar-logo-only .brand-logo{width:min(330px,78vw);max-height:118px}.stats-sidebar{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.mobile-page-scrollbar{display:none!important}body:not(.sidebar-mobile-open) .app-shell,body:not(.sidebar-mobile-open) footer{padding-right:8px!important}.topbar-logo-only{min-height:118px}.topbar-logo-only .brand-logo{width:min(300px,78vw);max-height:106px}body.phone-two-finger-map .map{cursor:default}body.phone-two-finger-map .leaflet-container{overscroll-behavior:contain}}


/* ------------------------------------------------------------------
   V0.9.9 : stabilité du mode Liste sur smartphone
   ------------------------------------------------------------------ */

@media (max-width: 600px) {
  .map-results-layout.view-list {
    display: block;
    height: auto;
    min-height: 0;
  }

  .map-results-layout.view-list .map {
    display: none !important;
  }

  .map-results-layout.view-list .results-panel {
    display: flex;
    width: 100%;
    height: auto;
    min-height: 55vh;
    max-height: none;
    overflow: visible;
  }

  .map-results-layout.view-list .results-list {
    overflow: visible;
    max-height: none;
  }

  /*
   * Le défilement de la liste est celui de la page principale :
   * on évite un second conteneur scrollable sur petit écran.
   */
  .map-results-layout.view-list .station-list-card {
    scroll-margin-top: 12px;
  }
}


/* ------------------------------------------------------------------
   V0.9.10 : popup station calibré pour smartphone
   ------------------------------------------------------------------ */

@media (max-width: 600px) and (pointer: coarse) {
  .leaflet-popup {
    width: calc(100vw - 28px) !important;
    max-width: 420px !important;
  }

  .leaflet-popup-content-wrapper {
    width: 100% !important;
    max-width: none !important;
    border-radius: 16px;
    box-sizing: border-box;
    box-shadow:
      0 10px 34px rgba(15, 49, 80, 0.30);
  }

  .leaflet-popup-content {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 14px 14px 16px;
    box-sizing: border-box;
    max-height: 68dvh;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .leaflet-popup-scrolled {
    border-top: 0;
    border-bottom: 0;
    padding-right: 10px;
  }

  .leaflet-popup-close-button {
    top: 6px !important;
    right: 6px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96) !important;
    color: #075a9b !important;
    font-size: 26px !important;
    line-height: 32px !important;
    box-shadow: 0 2px 9px rgba(15, 49, 80, 0.18);
  }

  .station-popup {
    width: 100%;
    min-width: 0;
    text-align: left;
  }

  .station-popup .station-id {
    margin: 0 44px 5px 0;
    font-size: 0.70rem;
  }

  .station-popup h2 {
    margin: 7px 0 3px;
    font-size: 1rem;
    line-height: 1.28;
    overflow-wrap: anywhere;
  }

  .station-popup > p {
    margin: 3px 0;
    line-height: 1.35;
  }

  .station-popup .brand-box {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin: 7px 0 8px;
    padding: 8px 10px;
  }

  .station-popup .brand-logo-small {
    width: 46px;
    height: 46px;
  }

  .station-popup .brand-details {
    min-width: 0;
  }

  .station-popup .brand-details strong {
    font-size: 0.90rem;
  }

  .station-popup .brand-details small {
    font-size: 0.70rem;
  }

  .station-popup .fuel-card {
    margin-top: 9px;
    padding: 10px;
  }

  .station-popup .fuel-head {
    align-items: center;
  }

  .station-popup .fuel-price {
    font-size: 1.05rem;
    white-space: nowrap;
  }

  .station-popup .status,
  .station-popup .community-box {
    line-height: 1.35;
  }

  .station-popup .popup-actions {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }

  .station-popup .popup-actions button {
    min-height: 44px;
    padding: 8px 7px;
    font-size: 0.72rem;
    line-height: 1.2;
  }

  .station-popup .route-link {
    width: 100%;
    min-height: 42px;
    margin-top: 10px;
    border: 1px solid #8ebde0;
    border-radius: 9px;
    padding: 8px 10px;
    background: #eef7ff;
    color: #075a9b;
    font-weight: 800;
    text-align: center;
  }

  .station-popup .popup-navigation {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: 8px;
  }

  .station-popup .navigation-button {
    min-height: 44px;
    padding: 8px 6px;
    font-size: 0.74rem;
  }

  .station-popup .navigation-osm {
    grid-column: 1 / -1;
  }

  .leaflet-popup-tip-container {
    margin-top: -1px;
  }
}

@media (max-width: 360px) and (pointer: coarse) {
  .leaflet-popup {
    width: calc(100vw - 20px) !important;
  }

  .leaflet-popup-content {
    padding: 12px;
  }

  .station-popup .popup-actions,
  .station-popup .popup-navigation {
    grid-template-columns: 1fr;
  }

  .station-popup .navigation-osm {
    grid-column: auto;
  }
}


/* ------------------------------------------------------------------
   V0.9.12 : suggestions de lieux et stations
   ------------------------------------------------------------------ */

.route-place-suggestion .place-kind {
  border-radius: 999px;
  padding: 3px 7px;
  background: #edf6fb;
  color: #075a9b;
  font-size: 0.68rem;
  font-weight: 800;
}

.route-place-suggestion:hover .place-kind,
.route-place-suggestion.active .place-kind,
.route-place-suggestion[aria-selected="true"] .place-kind {
  background: #d8edfa;
}


/* ------------------------------------------------------------------
   V0.9.13 : optimisation plein écran sur tablette
   ------------------------------------------------------------------ */
@media (min-width: 901px) and (max-width: 1280px),
       (min-width: 901px) and (hover: none) and (pointer: coarse) {
  html,
  body {
    height: 100%;
  }

  body {
    overflow: hidden;
  }

  .app-shell {
    min-height: 100dvh;
    height: 100dvh;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 10px;
    padding: 10px;
    overflow: hidden;
  }

  .topbar {
    padding: 10px 14px;
    min-height: 0;
  }

  .topbar-logo-only {
    justify-content: center;
  }

  .topbar-logo-only .brand-logo,
  .brand-logo {
    width: min(300px, 34vw);
    max-height: 84px;
  }

  .workspace {
    height: 100%;
    min-height: 0;
    gap: 10px;
    grid-template-columns: minmax(285px, 320px) minmax(0, 1fr);
    align-items: stretch;
  }

  .sidebar,
  .map-panel {
    height: 100%;
    min-height: 0;
  }

  .sidebar {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px;
  }

  .map-panel {
    overflow: hidden;
    padding: 6px;
  }

  .map-toolbar {
    padding: 2px 2px 6px;
    gap: 8px;
  }

  .map-results-layout,
  .map-results-layout .map {
    height: 100%;
    min-height: 0;
  }

  .map {
    min-height: 0;
  }

  footer {
    padding: 8px 6px 2px;
    font-size: 0.72rem;
  }

  .footer-meta {
    gap: 4px;
    margin: 0 auto 6px;
  }

  .footer-sources {
    margin: 0 auto 6px;
    max-width: none;
  }

  .footer-actions {
    margin-top: 4px;
  }
}


/* ------------------------------------------------------------------
   V0.9.14 : popup smartphone plus compact et guidage depuis l'arrivée
   ------------------------------------------------------------------ */
@media (max-width: 600px) and (pointer: coarse) {
  .leaflet-popup {
    width: calc(100vw - 60px) !important;
    max-width: 360px !important;
  }

  .leaflet-popup-content {
    padding: 12px 12px 14px;
    max-height: 52dvh;
  }

  .leaflet-popup-close-button {
    width: 34px !important;
    height: 34px !important;
    font-size: 24px !important;
    line-height: 30px !important;
  }

  .station-popup .station-id {
    margin: 0 40px 4px 0;
    font-size: 0.66rem;
  }

  .station-popup h2 {
    margin: 6px 0 2px;
    font-size: 0.95rem;
    line-height: 1.22;
  }

  .station-popup > p {
    font-size: 0.84rem;
  }

  .station-popup .brand-box {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 8px;
    margin: 6px 0 7px;
    padding: 7px 9px;
  }

  .station-popup .brand-logo-small {
    width: 40px;
    height: 40px;
  }

  .station-popup .brand-details strong {
    font-size: 0.85rem;
  }

  .station-popup .brand-details small {
    font-size: 0.66rem;
  }

  .station-popup .fuel-card {
    margin-top: 8px;
    padding: 9px;
  }

  .station-popup .fuel-head strong {
    font-size: 0.82rem;
  }

  .station-popup .fuel-price {
    font-size: 0.96rem;
  }

  .station-popup .status,
  .station-popup .community-box,
  .station-popup .fuel-card small {
    font-size: 0.77rem;
  }

  .station-popup .popup-actions {
    gap: 6px;
  }

  .station-popup .popup-actions button {
    min-height: 40px;
    padding: 7px 6px;
    font-size: 0.68rem;
  }

  .station-popup .route-link {
    min-height: 40px;
    margin-top: 8px;
    padding: 7px 9px;
    font-size: 0.82rem;
  }

  .station-popup .popup-navigation {
    gap: 6px;
    margin-top: 7px;
  }

  .station-popup .navigation-button {
    min-height: 40px;
    padding: 7px 6px;
    font-size: 0.70rem;
  }
}

@media (max-width: 360px) and (pointer: coarse) {
  .leaflet-popup {
    width: calc(100vw - 40px) !important;
  }

  .leaflet-popup-content {
    max-height: 50dvh;
    padding: 10px;
  }
}


/* ------------------------------------------------------------------
   V0.9.15 : liens Google Maps / Waze toujours visibles dans le popup
   ------------------------------------------------------------------ */
.popup-guidance {
  margin-top: 8px;
}

@media (max-width: 600px) and (pointer: coarse) {
  .station-popup .popup-guidance {
    margin-top: 7px;
    margin-bottom: 8px;
    padding: 8px;
    border: 1px solid #c8ddea;
    border-radius: 11px;
    background: #f7fbfe;
  }

  .station-popup .popup-guidance .route-link {
    margin-top: 0;
  }

  .station-popup .popup-guidance .popup-navigation {
    margin-top: 6px;
  }

  .station-popup .popup-guidance .navigation-google,
  .station-popup .popup-guidance .navigation-waze {
    font-weight: 900;
  }

  .station-popup .popup-guidance .navigation-osm {
    min-height: 34px;
    padding-block: 5px;
    font-size: 0.66rem;
  }
}


/* ------------------------------------------------------------------
   V0.10.0 : licence gratuite
   ------------------------------------------------------------------ */
.license-page {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at top, #eef8ff 0, #f7fbfd 42%, #e8f2f7 100%);
}

.license-card {
  width: min(560px, 100%);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 26px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(15, 49, 80, 0.16);
  text-align: center;
}

.license-logo {
  display: block;
  width: min(310px, 76vw);
  max-height: 140px;
  object-fit: contain;
  margin: 0 auto 12px;
}

.license-card h1 {
  margin: 8px 0 10px;
  color: var(--blue);
}

.license-intro,
.license-help {
  color: var(--muted);
  line-height: 1.55;
}

.license-form {
  display: grid;
  gap: 12px;
  margin-top: 20px;
  text-align: left;
}

.license-form input {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.license-form .button {
  width: 100%;
  margin-top: 4px;
}

.license-active-box {
  display: grid;
  gap: 6px;
  margin: 20px 0;
  border: 1px solid #91d6b2;
  border-radius: 14px;
  padding: 16px;
  background: #edfaf3;
  color: #126942;
}

.license-active-box span,
.license-key-created code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-weight: 800;
}

.license-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.license-actions form {
  margin: 0;
}

.license-release {
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 0.75rem;
}

.license-admin-card {
  width: 100%;
  max-width: none;
  margin: 0;
}

.license-admin-section {
  margin-top: 24px;
  border-top: 1px solid var(--border);
  padding-top: 20px;
}

.license-admin-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.license-admin-form label {
  display: grid;
  gap: 6px;
}

.license-notes-field {
  grid-column: 1 / -1;
}

.license-key-created {
  display: grid;
  gap: 8px;
  margin: 18px 0;
  border: 2px solid #64bd8e;
  border-radius: 14px;
  padding: 16px;
  background: #edfaf3;
}

.license-key-created code {
  display: block;
  overflow-wrap: anywhere;
  font-size: clamp(1rem, 3vw, 1.35rem);
  color: #075a9b;
}

.license-status {
  display: inline-flex;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 0.72rem;
  font-weight: 800;
}

.license-status.active {
  background: #eaf8f1;
  color: #126942;
}

.license-status.revoked {
  background: #fff0f0;
  color: #9b2c2c;
}

.license-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.license-row-actions form {
  margin: 0;
}

@media (max-width: 760px) {
  .license-page {
    padding: 14px;
  }

  .license-card {
    padding: 20px 16px;
  }

  .license-admin-form {
    grid-template-columns: 1fr;
  }

  .license-notes-field {
    grid-column: auto;
  }
}


/* ------------------------------------------------------------------
   V0.10.1 : demande publique de licence gratuite
   ------------------------------------------------------------------ */
.license-request-button {
  width: 100%;
  margin-top: 10px;
  text-align: center;
}

.license-request-panel {
  display: grid;
  gap: 12px;
}

.license-request-panel h2 {
  margin: 0;
  color: var(--blue);
  font-size: 1.1rem;
}

.license-request-form textarea {
  width: 100%;
  resize: vertical;
}

.license-request-form small {
  font-weight: 400;
  color: #65798d;
}

.license-consent {
  display: grid !important;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 500 !important;
  line-height: 1.4;
}

.license-consent input {
  width: auto !important;
  margin-top: 3px;
}

.license-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.license-secondary-link {
  justify-self: center;
  color: var(--blue);
  font-weight: 800;
}

.license-request-count {
  display: inline-flex;
  margin-left: 8px;
  border-radius: 999px;
  padding: 3px 8px;
  background: #fff3cd;
  color: #7a5800;
  font-size: 0.72rem;
  vertical-align: middle;
}

.license-request-status {
  display: inline-flex;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 0.72rem;
  font-weight: 800;
}

.license-request-status.pending {
  background: #fff3cd;
  color: #765600;
}

.license-request-status.approved {
  background: #e7f7ee;
  color: #14653f;
}

.license-request-status.rejected {
  background: #fdeaea;
  color: #922f2f;
}

.license-request-message {
  min-width: 180px;
  max-width: 360px;
  white-space: normal;
}


/* ------------------------------------------------------------------
   V0.10.2 : délivrance automatique des licences
   ------------------------------------------------------------------ */

.license-auto-delivery {
  display: grid;
  gap: 9px;
  margin: 18px 0;
  border: 1px solid #8fd0ad;
  border-radius: 14px;
  padding: 16px;
  background: #edf9f3;
  color: #195d3f;
}

.license-auto-delivery > strong {
  color: #126a43;
  font-size: 1rem;
}

.license-auto-delivery p {
  margin: 0;
  line-height: 1.5;
}

.license-auto-tip {
  color: #60798b;
  font-size: 0.82rem;
}


/* ------------------------------------------------------------------
   V0.10.3 : proposition automatique d'installation PWA
   ------------------------------------------------------------------ */

.pwa-install-banner {
  position: fixed;
  z-index: 5000;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  left: 14px;
  display: grid;
  gap: 11px;
  max-width: 430px;
  margin: 0 auto;
  border: 1px solid #b9d3e3;
  border-radius: 18px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 20px 52px rgba(15, 49, 80, 0.28);
  color: #17324d;
  backdrop-filter: blur(10px);
}

.pwa-install-heading {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding-right: 28px;
}

.pwa-install-heading img {
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 12px;
}

.pwa-install-heading div {
  display: grid;
  gap: 3px;
}

.pwa-install-heading strong {
  color: #075a9b;
  font-size: 1rem;
}

.pwa-install-heading span {
  color: #60798b;
  font-size: 0.78rem;
}

.pwa-install-copy,
.pwa-install-status {
  margin: 0;
  line-height: 1.45;
}

.pwa-install-copy {
  font-size: 0.86rem;
}

.pwa-install-status {
  color: #60798b;
  font-size: 0.76rem;
}

.pwa-install-status:empty {
  display: none;
}

.pwa-install-status.important {
  border-radius: 10px;
  padding: 9px 10px;
  background: #eef7fd;
  color: #075a9b;
  font-weight: 700;
}

.pwa-install-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 8px;
}

.pwa-install-actions .button {
  min-height: 44px;
}

.pwa-install-close {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #60798b;
  font-size: 25px;
  line-height: 30px;
  cursor: pointer;
}

.pwa-install-close:hover {
  background: #eef4f7;
  color: #075a9b;
}

@media (min-width: 701px) {
  .pwa-install-banner {
    display: none !important;
  }
}

@media (max-width: 360px) {
  .pwa-install-banner {
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    left: 8px;
    gap: 9px;
    padding: 13px;
  }

  .pwa-install-actions {
    grid-template-columns: 1fr;
  }
}


/* ------------------------------------------------------------------
   V0.10.4 : bascule vers PWA déjà installée
   ------------------------------------------------------------------ */

.pwa-install-banner .pwa-install-status.important {
  display: block;
}

.pwa-install-banner .pwa-install-copy strong {
  color: #075a9b;
}


/* ------------------------------------------------------------------
   V0.10.5 : panneau PWA toujours visible hors mode application
   ------------------------------------------------------------------ */

@media (max-width: 760px) {
  .pwa-install-banner-always {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}


/* ------------------------------------------------------------------
   V0.10.6 : gestion avancée des licences actives
   ------------------------------------------------------------------ */

.license-admin-help {
  max-width: 980px;
  border-left: 4px solid #8ebde0;
  border-radius: 0 10px 10px 0;
  padding: 10px 12px;
  background: #f4f9fc;
  color: #526f84;
  font-size: 0.82rem;
  line-height: 1.5;
}

.license-mail-success {
  width: fit-content;
  border-radius: 999px;
  padding: 7px 10px;
  background: #eaf8f1;
  color: #126942;
  font-size: 0.78rem;
  font-weight: 800;
}

.license-device-limit-form {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: end;
  gap: 5px;
}

.license-device-limit-form label {
  display: grid;
  gap: 2px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #60798b;
}

.license-device-limit-form input[type="number"] {
  width: 76px;
  min-height: 34px;
  padding: 5px 7px;
}

.license-action-note {
  align-self: center;
  color: #7b8d99;
}

@media (max-width: 760px) {
  .license-device-limit-form {
    grid-template-columns: 1fr auto;
    width: 100%;
  }

  .license-device-limit-form label {
    width: 100%;
  }

  .license-device-limit-form input[type="number"] {
    width: 100%;
  }
}


/* ------------------------------------------------------------------
   V0.10.7 : accès application rendu côté serveur sur smartphone
   ------------------------------------------------------------------ */

.pwa-entry-panel {
  position: fixed;
  z-index: 12000;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  left: 12px;
  display: grid;
  gap: 11px;
  max-width: 440px;
  margin: 0 auto;
  border: 1px solid #b7d2e3;
  border-radius: 18px;
  padding: 16px;
  background: #ffffff;
  box-shadow: 0 22px 55px rgba(15, 49, 80, 0.32);
  color: #17324d;
}

.pwa-entry-panel.hidden {
  display: none !important;
}

.pwa-entry-heading {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding-right: 28px;
}

.pwa-entry-heading img {
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 12px;
}

.pwa-entry-heading div {
  display: grid;
  gap: 3px;
}

.pwa-entry-heading strong {
  color: #075a9b;
  font-size: 1rem;
}

.pwa-entry-heading span {
  color: #60798b;
  font-size: 0.78rem;
}

.pwa-entry-copy,
.pwa-entry-status {
  margin: 0;
  line-height: 1.45;
}

.pwa-entry-copy {
  font-size: 0.86rem;
}

.pwa-entry-status {
  color: #60798b;
  font-size: 0.76rem;
}

.pwa-entry-status:empty {
  display: none;
}

.pwa-entry-status.important {
  border-radius: 10px;
  padding: 9px 10px;
  background: #eef7fd;
  color: #075a9b;
  font-weight: 700;
}

.pwa-entry-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 8px;
}

.pwa-entry-actions .button {
  min-height: 44px;
}

.pwa-entry-close {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #60798b;
  font-size: 25px;
  line-height: 30px;
  cursor: pointer;
}

.pwa-entry-launcher {
  position: fixed;
  z-index: 11990;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  min-height: 42px;
  border: 1px solid #8ebde0;
  border-radius: 999px;
  padding: 8px 14px;
  background: #075a9b;
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(15, 49, 80, 0.26);
  font-weight: 800;
}

.pwa-entry-launcher.hidden {
  display: none !important;
}

@media (max-width: 360px) {
  .pwa-entry-panel {
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    left: 8px;
    padding: 13px;
  }

  .pwa-entry-actions {
    grid-template-columns: 1fr;
  }
}


/* ------------------------------------------------------------------
   V0.10.8 : point GPS temps réel
   ------------------------------------------------------------------ */

/*
 * Le marqueur reste volontairement compact mais plus lisible sur
 * smartphone. La position elle-même est animée par app.js.
 */
.user-live-location-marker {
  filter:
    drop-shadow(0 1px 3px rgba(15, 49, 80, .35));
}

@media (max-width: 760px) {
  .user-live-location-marker {
    filter:
      drop-shadow(0 1px 4px rgba(15, 49, 80, .42));
  }
}


/* ------------------------------------------------------------------
   V0.10.11 : bandeau paysage écologique + ombre du logo
   ------------------------------------------------------------------ */

.topbar.topbar-logo-only {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 172px;
  padding: 18px 22px;
  border-color: rgba(255, 255, 255, .76);
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, .42) 0%,
      rgba(255, 255, 255, .18) 42%,
      rgba(255, 255, 255, .08) 100%
    ),
    url("bandeau-paysage-eco-v01011.png") center 58% / cover no-repeat;
  box-shadow:
    0 12px 30px rgba(15, 49, 80, .16),
    inset 0 0 0 1px rgba(255, 255, 255, .24);
}

.topbar.topbar-logo-only::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(
      ellipse at center,
      rgba(255, 255, 255, .78) 0%,
      rgba(255, 255, 255, .48) 34%,
      rgba(255, 255, 255, .12) 70%,
      rgba(255, 255, 255, .02) 100%
    );
  pointer-events: none;
}

.topbar.topbar-logo-only .brand-logo {
  position: relative;
  z-index: 1;
  width: min(430px, 45vw);
  max-height: 132px;
  object-fit: contain;
  object-position: center;
  margin-inline: auto;
  filter:
    drop-shadow(0 6px 7px rgba(8, 39, 70, .34))
    drop-shadow(0 14px 20px rgba(8, 39, 70, .18));
}

@media (max-width: 900px) {
  .topbar.topbar-logo-only {
    min-height: 148px;
    padding: 14px 16px;
    background-position: center 56%;
  }

  .topbar.topbar-logo-only .brand-logo {
    width: min(390px, 84vw);
    max-height: 118px;
    filter:
      drop-shadow(0 5px 6px rgba(8, 39, 70, .34))
      drop-shadow(0 10px 16px rgba(8, 39, 70, .16));
  }
}

@media (max-width: 600px) {
  .topbar.topbar-logo-only {
    min-height: 126px;
    padding: 10px 12px;
    border-radius: 16px;
    background-position: center 55%;
  }

  .topbar.topbar-logo-only::before {
    background:
      radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, .82) 0%,
        rgba(255, 255, 255, .54) 40%,
        rgba(255, 255, 255, .10) 82%
      );
  }

  .topbar.topbar-logo-only .brand-logo {
    width: min(350px, 88vw);
    max-height: 102px;
  }
}


/* ------------------------------------------------------------------
   V0.10.12 : panneau installation persistant
   ------------------------------------------------------------------ */

@media (display-mode: standalone),
       (display-mode: fullscreen) {
  .pwa-entry-panel,
  .pwa-entry-launcher {
    display: none !important;
  }
}


/* ------------------------------------------------------------------
   V0.10.13 : installation / ouverture évidente mobile et tablette
   ------------------------------------------------------------------ */

.pwa-entry-backdrop {
  position: fixed;
  z-index: 49990;
  inset: 0;
  display: block;
  background: rgba(6, 29, 49, .64);
  backdrop-filter: blur(4px);
}

.pwa-entry-backdrop.hidden {
  display: none !important;
}

.pwa-entry-panel {
  z-index: 50000 !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  width: min(540px, calc(100vw - 30px));
  max-width: 540px;
  max-height: calc(100dvh - 30px);
  overflow-y: auto;
  margin: 0 !important;
  border: 2px solid rgba(255,255,255,.95);
  border-radius: 22px;
  padding: 20px;
  background: #fff;
  box-shadow:
    0 30px 90px rgba(3, 27, 49, .48),
    0 0 0 7px rgba(255, 255, 255, .14);
  transform: translate(-50%, -50%);
}

.pwa-entry-panel.hidden {
  display: none !important;
}

.pwa-entry-heading {
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
}

.pwa-entry-heading img {
  width: 64px;
  height: 64px;
  border-radius: 15px;
  box-shadow: 0 8px 22px rgba(15,49,80,.22);
}

.pwa-entry-heading strong {
  font-size: 1.2rem;
  line-height: 1.24;
}

.pwa-entry-heading span {
  font-size: .86rem;
}

.pwa-entry-copy {
  font-size: .96rem;
  line-height: 1.55;
}

.pwa-entry-status {
  font-size: .84rem;
  line-height: 1.5;
}

.pwa-entry-actions {
  grid-template-columns: 1fr;
  gap: 10px;
}

.pwa-entry-actions .button {
  min-height: 50px;
  font-size: .96rem;
  font-weight: 800;
}

#pwa-entry-primary {
  min-height: 58px;
  border-radius: 13px;
  font-size: 1.04rem;
  box-shadow: 0 9px 20px rgba(7,90,155,.22);
}

#pwa-entry-stay {
  background: #f3f7f9;
  color: #3f596d;
}

.pwa-entry-close {
  top: 10px;
  right: 10px;
  width: 39px;
  height: 39px;
  background: #edf3f6;
  font-size: 28px;
}

.pwa-entry-launcher {
  z-index: 49980 !important;
  min-height: 50px;
  padding: 10px 18px;
  border: 2px solid #fff;
  box-shadow: 0 10px 30px rgba(3,27,49,.36);
  font-size: .9rem;
}

body.pwa-entry-modal-open {
  overflow: hidden !important;
}

/* Smartphone */
@media (max-width: 760px) {
  .pwa-entry-panel {
    width: calc(100vw - 18px);
    max-height: calc(100dvh - 18px);
    padding: 17px;
    border-radius: 18px;
  }

  .pwa-entry-heading {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 11px;
  }

  .pwa-entry-heading img {
    width: 56px;
    height: 56px;
  }

  .pwa-entry-heading strong {
    font-size: 1.06rem;
  }
}

/* Tablettes, y compris paysage */
@media (min-width: 761px) and (max-width: 1280px),
       (hover: none) and (pointer: coarse) {
  .pwa-entry-panel {
    width: min(580px, calc(100vw - 48px));
    max-width: 580px;
    padding: 24px;
  }

  .pwa-entry-heading strong {
    font-size: 1.28rem;
  }

  #pwa-entry-primary {
    min-height: 60px;
    font-size: 1.08rem;
  }
}

/* Si l'application est déjà ouverte : aucune proposition */
@media (display-mode: standalone),
       (display-mode: fullscreen) {
  .pwa-entry-panel,
  .pwa-entry-backdrop,
  .pwa-entry-launcher {
    display: none !important;
  }
}


/* ------------------------------------------------------------------
   V0.10.14 : proposition également sur ordinateur
   ------------------------------------------------------------------ */

@media (min-width: 1281px) and (hover: hover) and (pointer: fine) {
  .pwa-entry-panel {
    width: min(560px, calc(100vw - 64px));
    max-width: 560px;
    padding: 24px;
  }

  .pwa-entry-heading {
    grid-template-columns: 68px minmax(0, 1fr);
  }

  .pwa-entry-heading img {
    width: 68px;
    height: 68px;
  }

  .pwa-entry-heading strong {
    font-size: 1.3rem;
  }

  #pwa-entry-primary {
    min-height: 60px;
    font-size: 1.08rem;
  }

  .pwa-entry-launcher {
    right: 20px;
    bottom: 20px;
  }
}


/* ------------------------------------------------------------------
   V0.11.0 — administration sécurité
   ------------------------------------------------------------------ */

.admin-nav-form {
  display: inline-flex;
  margin: 0;
}

.admin-nav-link {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--blue);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.security-admin-card {
  max-width: 1000px;
}

.security-score {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.security-score > div {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  text-align: center;
  background: #fff;
}

.security-score strong {
  display: block;
  font-size: 1.8rem;
}

.security-score-ok strong {
  color: #167349;
}

.security-score-warn strong {
  color: #9a6700;
}

.security-score-fail strong {
  color: #b42318;
}

.security-note {
  border-left: 4px solid #6d879b;
  padding: 10px 13px;
  background: #f4f7f9;
}

.security-check-list {
  display: grid;
  gap: 10px;
  margin: 18px 0 26px;
}

.security-check {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 13px;
  background: #fff;
}

.security-check-state {
  display: inline-flex;
  justify-content: center;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: .74rem;
  font-weight: 850;
}

.security-ok .security-check-state {
  background: #e7f7ef;
  color: #12673f;
}

.security-warn .security-check-state {
  background: #fff4d6;
  color: #805300;
}

.security-fail .security-check-state {
  background: #feeceb;
  color: #a12018;
}

.security-check p {
  margin: 4px 0 0;
  color: #60758a;
}

.security-event-list {
  display: grid;
  gap: 8px;
}

.security-event {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 14px;
  border-bottom: 1px solid var(--border);
  padding: 10px 4px;
}

.security-event div {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.security-event span,
.security-event time {
  color: #65798d;
  font-size: .82rem;
}

.security-event code {
  grid-column: 1 / -1;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: .76rem;
}

@media (max-width: 700px) {
  .security-score {
    grid-template-columns: 1fr;
  }

  .security-check {
    grid-template-columns: 1fr;
  }

  .security-check-state {
    width: fit-content;
  }
}


/* ------------------------------------------------------------------
   V0.11.1 — restauration de licence silencieuse
   ------------------------------------------------------------------ */

.license-recovery-pending #license-manual-activation {
  display: none !important;
}

#license-manual-activation[hidden] {
  display: none !important;
}

.license-recovery-pending #license-auto-recovery-status {
  display: block;
}

#license-auto-recovery-status:not([hidden]) {
  display: block;
}


/* ------------------------------------------------------------------
   V0.11.2 — champs obligatoires création de licence
   ------------------------------------------------------------------ */

.license-required-note {
  margin: 0;
  font-size: .82rem;
  color: #60758a;
}

.license-admin-form label > span[aria-hidden="true"] {
  color: #b42318;
  font-weight: 850;
}

.license-admin-form label small {
  color: #60758a;
  font-weight: 500;
}


/* ------------------------------------------------------------------
   V0.11.3 — suppression des licences révoquées
   ------------------------------------------------------------------ */

.license-delete-button {
  font-weight: 850;
}

.license-row-actions form:has(.license-delete-button) {
  margin-top: 3px;
}


/* ------------------------------------------------------------------
   V0.11.4 — identifiant appareil et limite d'activations
   ------------------------------------------------------------------ */

.license-device-limit-form input[type="number"] {
  width: 82px;
}

.license-device-limit-form .text-button {
  white-space: nowrap;
}


/* ------------------------------------------------------------------
   V0.11.5 — avis utilisateur et messages éditeur
   ------------------------------------------------------------------ */

.feedback-footer-button {
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.feedback-dialog {
  width: min(560px, calc(100vw - 28px));
  max-width: 560px;
  border: 0;
  border-radius: 18px;
  padding: 0;
  box-shadow: 0 24px 70px rgba(18, 39, 58, .28);
}

.feedback-dialog::backdrop {
  background: rgba(18, 39, 58, .48);
  backdrop-filter: blur(2px);
}

.feedback-dialog-card {
  width: 100%;
  margin: 0;
}

.feedback-intro {
  margin: 0 0 16px;
  color: #60758a;
  line-height: 1.55;
}

.feedback-rating {
  margin: 4px 0 16px;
  padding: 0;
  border: 0;
}

.feedback-rating legend {
  margin-bottom: 8px;
  font-weight: 800;
}

.feedback-rating legend span {
  color: #b42318;
}

.feedback-stars {
  display: flex;
  gap: 6px;
  flex-direction: row-reverse;
  justify-content: flex-end;
  width: fit-content;
}

.feedback-stars input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.feedback-stars label {
  color: #b7c2cc;
  font-size: 2.15rem;
  line-height: 1;
  cursor: pointer;
  transition: transform .12s ease, color .12s ease;
}

.feedback-stars label:hover,
.feedback-stars label:hover ~ label,
.feedback-stars input:checked ~ label {
  color: #e5a700;
}

.feedback-stars label:hover {
  transform: translateY(-1px) scale(1.05);
}

.feedback-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.feedback-dialog textarea {
  width: 100%;
  resize: vertical;
}

.feedback-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0 24px;
}

.feedback-summary-grid > div {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  padding: 14px;
}

.feedback-summary-grid strong {
  display: block;
  font-size: 1.35rem;
}

.license-feedback-cell {
  min-width: 200px;
}

.license-feedback-rating {
  font-weight: 850;
  white-space: nowrap;
}

.license-feedback-history {
  margin-top: 8px;
}

.license-feedback-history summary {
  cursor: pointer;
  color: var(--blue);
  font-weight: 750;
}

.license-feedback-event {
  margin-top: 9px;
  padding: 9px 10px;
  border-left: 3px solid var(--border);
  background: #f7f9fb;
  white-space: normal;
}

.license-feedback-event p {
  margin: 4px 0 0;
  white-space: pre-wrap;
}

.license-feedback-event small {
  color: #60758a;
}

@media (max-width: 760px) {
  .feedback-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ============================================================
   V0.11.8 — renouvellement de clé et historique appareils
   ============================================================ */
.license-renew-panel { margin-top: 18px; }
.license-device-history { margin-top: 8px; min-width: 290px; }
.license-device-history > summary { cursor: pointer; font-weight: 700; }
.license-device-event {
  margin-top: 10px; padding: 10px; border: 1px solid #d7e4ec;
  border-radius: 10px; background: #f8fbfd; display: grid; gap: 4px;
}
.license-device-heading { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.license-device-name-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 5px; }
.license-device-name-form input[type="text"] { min-width: 160px; max-width: 220px; padding: 6px 8px; }
.license-device-event small { display: block; }
@media (max-width: 760px) {
  .license-device-history { min-width: 0; }
  .license-device-name-form input[type="text"] { width: 100%; max-width: none; }
}


/* ------------------------------------------------------------------
   V0.11.9 — présence en ligne des appareils
   ------------------------------------------------------------------ */

.license-device-state-group {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
}

.device-presence {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  font-weight: 800;
  white-space: nowrap;
}

.device-presence-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  flex: 0 0 10px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .9);
}

.device-presence.online { color: #16733a; }
.device-presence.online .device-presence-dot { background: #22a447; }
.device-presence.offline { color: #a12622; }
.device-presence.offline .device-presence-dot { background: #d63c32; }

@media (max-width: 700px) {
  .license-device-heading { align-items: flex-start; }
  .license-device-state-group { justify-content: flex-start; }
}


/* V0.11.10 — licence unique par e-mail et correction appareils fantômes */
.license-device-over-limit { color: #b42318; }
.license-device-over-limit-note { margin-top: .35rem; color: #b42318; font-size: .78rem; font-weight: 700; }
.license-existing-key-form { display: grid; gap: .35rem; padding: .55rem; border: 1px solid #d7e4ec; border-radius: .6rem; background: #f8fbfd; }
.license-existing-key-form label { display: grid; gap: .25rem; font-size: .8rem; }
.license-existing-key-form input { width: min(100%, 19rem); padding: .45rem .55rem; border: 1px solid #b8cad6; border-radius: .45rem; font: inherit; }
.license-key-stored { color: #176a45; font-weight: 700; }


/* ------------------------------------------------------------------
   V0.11.13 : administration licences pleine largeur + filtres
   ------------------------------------------------------------------ */
.admin-page.license-admin-page {
  padding: 14px;
}

.license-admin-card .report-table {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

.license-admin-card .report-table table {
  width: 100%;
}

.license-admin-card .report-table th,
.license-admin-card .report-table td {
  white-space: normal;
  vertical-align: top;
}

.license-admin-card .report-table th:last-child,
.license-admin-card .report-table td:last-child {
  min-width: 190px;
}

.license-admin-filters {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(150px, 1fr)) auto;
  gap: 10px;
  align-items: end;
  margin: 12px 0 16px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #f7fbfd;
}

.license-admin-filters label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.license-admin-filters label > span {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 700;
}

.license-admin-filters input,
.license-admin-filters select {
  width: 100%;
  min-width: 0;
}

.license-filter-count {
  align-self: center;
  justify-self: end;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 700;
  white-space: nowrap;
}

.license-requests-table td:nth-child(4) {
  min-width: 180px;
  max-width: 340px;
}

.licenses-table .license-device-history-cell {
  min-width: 300px;
}

@media (max-width: 1100px) {
  .license-admin-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .license-filter-count {
    justify-self: start;
  }
}

@media (max-width: 620px) {
  .admin-page.license-admin-page {
    padding: 6px;
  }

  .license-admin-card {
    border-radius: 12px;
    padding: 14px 10px;
  }

  .license-admin-filters {
    grid-template-columns: 1fr;
  }
}


/* ==================================================================
   V0.12.0 — ergonomie unifiée ordinateur / tablette / smartphone
   ================================================================== */

:root {
  --ux-panel-width: 390px;
  --ux-toolbar-height: 54px;
  --ux-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ux-safe-top: env(safe-area-inset-top, 0px);
}

.topbar-logo-only {
  min-height: 88px;
  padding-block: 8px;
}

.topbar-logo-only .brand-logo {
  width: min(250px, 34vw);
  max-height: 78px;
}

.ux-workspace {
  grid-template-columns: var(--ux-panel-width) minmax(0, 1fr);
  gap: 12px;
  min-height: 640px;
}

.ux-sidebar {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  overflow: hidden;
}

.sidebar-controls-body {
  flex: 0 1 auto;
  max-height: min(50dvh, 540px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 14px 8px;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

.ux-section {
  margin: 0 0 10px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--border);
}

.ux-section-heading {
  align-items: center;
  margin-bottom: 8px;
}

.ux-section-kicker {
  color: #60798b;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.ux-search-form,
.ux-route-form {
  margin: 0;
  padding: 0;
  border: 0;
}

.ux-search-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.ux-search-submit {
  min-width: 98px;
}

.ux-search-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.ux-search-actions .button.location {
  min-height: 38px;
  padding: 7px 10px;
}

.ux-fuel-selector {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  padding: 0;
  margin: 0 0 10px;
  border: 0;
}

.ux-fuel-selector legend {
  grid-column: 1 / -1;
  margin-bottom: 2px;
}

.ux-fuel-selector .fuel-option {
  min-width: 0;
  min-height: 58px;
  border: 1px solid #c8d8e4;
  border-radius: 11px;
  padding: 8px;
  background: #fff;
}

.ux-fuel-selector .fuel-option > span {
  display: grid;
  gap: 1px;
}

.ux-fuel-selector .fuel-option small {
  font-size: .64rem;
  font-weight: 600;
  color: #6b8090;
}

.ux-fuel-selector .fuel-option:has(input:checked) {
  border-color: #68a9d3;
  box-shadow: 0 0 0 2px rgba(7,90,155,.09);
  background: #f5fbff;
}

.fuel-option-gplc:has(input:checked) { border-color: #6bbd8e; background: #f2fbf6; }
.fuel-option-e85:has(input:checked) { border-color: #75acd2; background: #f4faff; }
.fuel-option-both:has(input:checked) { border-color: #7fa8c1; background: #f4f8fb; }

.ux-filter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ux-filter-grid input,
.ux-filter-grid select {
  min-height: 40px;
  padding: 8px 9px;
}

.ux-reset-filters {
  font-size: .72rem;
}

.ux-result-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 9px;
}

.ux-result-summary > div {
  display: grid;
  gap: 1px;
  border-radius: 10px;
  padding: 8px 9px;
  background: #f3f8fb;
  border: 1px solid #dbe7ef;
}

.ux-result-summary strong {
  color: var(--blue);
  font-size: .98rem;
}

.ux-result-summary span {
  color: #667d8e;
  font-size: .66rem;
}

.ux-details {
  margin: 0 14px 9px;
  border: 1px solid #d9e5ed;
  border-radius: 11px;
  background: #fff;
}

.ux-details > summary {
  cursor: pointer;
  padding: 10px 11px;
  font-weight: 800;
  color: #24445d;
  list-style-position: inside;
}

.ux-details[open] > summary {
  border-bottom: 1px solid #e0e9ef;
  color: var(--blue);
}

.ux-details-body {
  padding: 10px 11px;
}

.ux-help {
  display: block;
  margin-top: 6px;
  color: #687e8e;
  line-height: 1.4;
}

.ux-results-panel {
  display: flex;
  flex: 1 1 auto;
  min-height: 220px;
  margin: 0 8px 8px;
  border-radius: 13px;
  background: #f7fafc;
}

.ux-results-panel .results-panel-head {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 9px 10px;
}

.results-list {
  padding: 7px;
  gap: 7px;
}

.station-list-card {
  padding: 9px;
  border-radius: 11px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.station-list-card:hover,
.station-list-card.is-selected {
  border-color: #72acd1;
  box-shadow: 0 5px 15px rgba(15,49,80,.10);
}

.station-list-heading {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.station-list-heading > span:last-child {
  display: grid;
  gap: 1px;
}

.station-list-logo {
  width: 44px;
  height: 38px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid #dce6ed;
  background: #fff;
  padding: 3px;
}

.station-list-logo-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  font-weight: 900;
}

.station-list-fuels {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

.fuel-price-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 8px;
  padding: 5px 7px;
  border: 1px solid #cbdce7;
  background: #fff;
  font-size: .74rem;
  font-variant-numeric: tabular-nums;
}

.fuel-price-pill-gplc { border-left: 4px solid #21925f; }
.fuel-price-pill-e85 { border-left: 4px solid #176fa9; }

.station-list-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.station-list-actions button,
.station-list-actions a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.ux-map-panel {
  min-width: 0;
  overflow: hidden;
}

.ux-map-panel .map-toolbar {
  min-height: var(--ux-toolbar-height);
  align-items: center;
}

.ux-map-panel .map-results-layout,
.ux-map-panel .map {
  min-height: 0;
  height: 100%;
}

/* Desktop : résultats dans le panneau gauche, carte toujours visible. */
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  .ux-workspace {
    height: calc(100dvh - 196px);
    min-height: 590px;
  }

  .ux-sidebar,
  .ux-map-panel {
    height: 100%;
  }

  .ux-map-panel .view-switcher,
  .ux-map-panel .mobile-menu-toggle {
    display: none;
  }

  .ux-map-panel .map-toolbar {
    justify-content: flex-end;
  }

  .ux-map-panel .map-results-layout.view-list .map,
  .ux-map-panel .map-results-layout.view-map .map,
  .ux-map-panel .map-results-layout.view-split .map {
    display: block;
  }
}

/* Marqueurs : G, E ou G+E visible même sans dépendre de la couleur. */
.price-pin {
  min-width: 76px;
  gap: 4px;
  transform: none;
}

.fuel-pin-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  min-height: 20px;
  padding: 2px 4px;
  border-radius: 6px;
  background: rgba(255,255,255,.96);
  color: #17364d;
  font-size: .62rem;
  font-weight: 950;
  letter-spacing: -.02em;
}

.price-pin.fuel-kind-gplc .fuel-pin-badge { color: #11683f; }
.price-pin.fuel-kind-e85 .fuel-pin-badge { color: #075a9b; }
.price-pin.fuel-kind-both .fuel-pin-badge { color: #174b73; }

.price-pin.is-selected {
  outline: 4px solid rgba(255,255,255,.95);
  box-shadow: 0 0 0 6px #f0a51a, 0 5px 18px rgba(15,49,80,.42);
  transform: translateY(-3px) scale(1.08);
  z-index: 10;
}

.fuel-cards {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.fuel-card-gplc { border-left: 4px solid #21925f; }
.fuel-card-e85 { border-left: 4px solid #176fa9; }

.fuel-text-badge {
  display: inline-flex;
  border-radius: 6px;
  padding: 2px 6px;
  background: #eef5f8;
}

/* Fiche basse smartphone. */
.station-sheet {
  display: none;
}

@media (max-width: 760px) {
  html,
  body {
    min-height: 100%;
  }

  body {
    overflow: hidden;
  }

  .app-shell {
    height: 100dvh;
    min-height: 100dvh;
    padding: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0;
    overflow: hidden;
  }

  .topbar-logo-only {
    min-height: calc(58px + var(--ux-safe-top));
    height: calc(58px + var(--ux-safe-top));
    padding: var(--ux-safe-top) 8px 4px;
    border-radius: 0;
  }

  .topbar-logo-only .brand-logo {
    width: min(170px, 46vw);
    max-height: 52px;
  }

  #alert,
  footer {
    display: none;
  }

  .ux-workspace {
    display: block;
    height: 100%;
    min-height: 0;
  }

  .ux-map-panel {
    position: relative;
    height: 100%;
    min-height: 0;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }

  .ux-map-panel .map-toolbar {
    position: absolute;
    z-index: 900;
    top: 8px;
    left: 8px;
    right: 8px;
    min-height: 48px;
    padding: 5px;
    border: 1px solid rgba(190,210,223,.92);
    border-radius: 14px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 6px 20px rgba(15,49,80,.15);
    backdrop-filter: blur(8px);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 5px;
  }

  .mobile-menu-toggle {
    display: inline-flex;
    min-height: 38px;
    padding: 7px 9px;
    font-size: 0;
  }

  .mobile-menu-toggle::before {
    content: '☰';
    font-size: 1rem;
  }

  .view-switcher {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-width: 0;
  }

  .view-button {
    min-height: 36px;
    padding: 6px 9px;
  }

  .view-button-split {
    display: none;
  }

  .sort-control {
    font-size: 0;
  }

  .sort-control select {
    min-width: 94px;
    min-height: 38px;
    padding: 6px 7px;
    font-size: .72rem;
  }

  .ux-map-panel .map-results-layout {
    height: 100%;
    min-height: 0;
    display: block;
  }

  .ux-map-panel .map {
    height: 100%;
    min-height: 100%;
    border-radius: 0;
  }

  .map-gesture-hint {
    top: 68px;
  }

  .ux-sidebar {
    position: fixed;
    z-index: 2200;
    top: var(--ux-safe-top);
    left: 0;
    bottom: 0;
    width: min(92vw, 390px);
    height: auto;
    max-height: none;
    border-radius: 0 18px 18px 0;
    transform: translateX(-104%);
    transition: transform .22s ease;
    box-shadow: 12px 0 35px rgba(5,35,58,.24);
    background: #fff;
  }

  body.sidebar-mobile-open .ux-sidebar {
    transform: translateX(0);
  }

  .sidebar-mobile-head {
    display: flex;
    min-height: 54px;
    padding-top: var(--ux-safe-top);
  }

  .sidebar-controls-body {
    max-height: none;
    flex: 1 1 auto;
    padding: 10px 10px 4px;
  }

  .ux-results-panel {
    display: none;
  }

  .map-results-layout.view-list .map {
    display: none;
  }

  .map-results-layout.view-list .ux-results-panel {
    display: flex;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding-top: 62px;
    border: 0;
    border-radius: 0;
    background: #f5f8fa;
  }

  .map-results-layout.view-list .results-panel-head {
    top: 62px;
  }

  .map-results-layout.view-list .results-list {
    padding: 8px 8px calc(12px + var(--ux-safe-bottom));
  }

  .station-sheet:not(.hidden) {
    display: flex;
    position: absolute;
    z-index: 1250;
    left: 6px;
    right: 6px;
    bottom: calc(6px + var(--ux-safe-bottom));
    max-height: min(62dvh, 560px);
    flex-direction: column;
    border: 1px solid #c9dce8;
    border-radius: 20px 20px 14px 14px;
    background: #fff;
    box-shadow: 0 -10px 35px rgba(7,45,72,.25);
    overflow: hidden;
    animation: station-sheet-in .2s ease-out;
  }

  @keyframes station-sheet-in {
    from { transform: translateY(18px); opacity: .35; }
    to { transform: translateY(0); opacity: 1; }
  }

  .station-sheet-handle {
    width: 48px;
    height: 5px;
    margin: 7px auto 1px;
    border-radius: 999px;
    background: #c6d3dc;
  }

  .station-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 5px 10px 5px 14px;
    border-bottom: 1px solid #e0e9ef;
  }

  .station-sheet-close {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: #eef3f6;
    color: #25465f;
    font-size: 1.35rem;
    cursor: pointer;
  }

  .station-sheet-content {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 2px 12px 12px;
  }

  .station-sheet .station-popup {
    width: auto;
    max-width: none;
  }

  .station-sheet .popup-guidance {
    position: sticky;
    bottom: -2px;
    z-index: 2;
    padding: 8px;
    border: 1px solid #c8ddea;
    border-radius: 11px;
    background: rgba(247,251,254,.98);
  }

  .leaflet-popup {
    display: none !important;
  }

  .station-list-card {
    padding: 10px;
  }

  .station-list-actions {
    grid-template-columns: repeat(2, 1fr);
  }

  .ux-filter-grid,
  .ux-result-summary {
    grid-template-columns: 1fr 1fr;
  }
}

/* Tablette tactile : carte pleine surface + panneau latéral superposé. */
@media (min-width: 761px) and (max-width: 1280px) and (hover: none),
       (min-width: 761px) and (max-width: 1280px) and (pointer: coarse) {
  body {
    overflow: hidden;
  }

  .app-shell {
    height: 100dvh;
    min-height: 100dvh;
    grid-template-rows: auto auto minmax(0,1fr) auto;
    overflow: hidden;
  }

  .ux-workspace {
    display: block;
    height: 100%;
    min-height: 0;
  }

  .ux-map-panel {
    height: 100%;
    min-height: 0;
  }

  .ux-sidebar {
    position: fixed;
    z-index: 2200;
    top: max(8px, var(--ux-safe-top));
    left: 8px;
    bottom: max(8px, var(--ux-safe-bottom));
    width: min(420px, 68vw);
    height: auto;
    transform: translateX(calc(-100% - 24px));
    transition: transform .22s ease;
  }

  body.sidebar-mobile-open .ux-sidebar {
    transform: translateX(0);
  }

  .sidebar-mobile-head,
  .mobile-menu-toggle {
    display: flex;
  }

  .sidebar-controls-body {
    max-height: 52%;
  }

  .ux-map-panel .map-results-layout,
  .ux-map-panel .map {
    height: 100%;
    min-height: 0;
  }

  .view-button-split {
    display: none;
  }
}

@media (max-width: 430px) {
  .ux-search-row {
    grid-template-columns: 1fr;
  }

  .ux-search-submit {
    width: 100%;
  }

  .ux-fuel-selector {
    grid-template-columns: 1fr 1fr;
  }

  .fuel-option-both {
    grid-column: 1 / -1;
  }

  .ux-filter-grid {
    grid-template-columns: 1fr;
  }

  .station-list-heading {
    grid-template-columns: 40px minmax(0,1fr);
  }

  .station-list-logo {
    width: 40px;
    height: 36px;
  }
}

/* V0.12.0 — priorité aux données : bandeau compact sans perdre l'identité. */
.topbar.topbar-logo-only {
  min-height: 94px;
  height: 94px;
  padding: 7px 14px;
}

.topbar.topbar-logo-only .brand-logo {
  width: min(230px, 32vw);
  max-height: 78px;
}

@media (min-width: 761px) and (max-width: 1280px) {
  .topbar.topbar-logo-only {
    min-height: 84px;
    height: 84px;
    padding: 6px 12px;
  }

  .topbar.topbar-logo-only .brand-logo {
    width: min(210px, 38vw);
    max-height: 70px;
  }
}

@media (max-width: 760px) {
  .topbar.topbar-logo-only {
    min-height: calc(62px + var(--ux-safe-top));
    height: calc(62px + var(--ux-safe-top));
    padding: var(--ux-safe-top) 8px 4px;
    border-radius: 0;
  }

  .topbar.topbar-logo-only .brand-logo {
    width: min(172px, 48vw);
    max-height: 56px;
  }
}


/* ==================================================================
   V0.12.0 final — tablette tactile : hauteur cartographique fiable
   ================================================================== */
@media (min-width: 761px) and (max-width: 1280px) and (hover: none),
       (min-width: 761px) and (max-width: 1280px) and (pointer: coarse) {
  html,
  body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
  }

  .app-shell {
    position: relative;
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    padding: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0;
    overflow: hidden;
  }

  .app-shell > #alert {
    position: fixed;
    z-index: 2400;
    top: calc(92px + var(--ux-safe-top));
    left: 50%;
    width: min(620px, calc(100vw - 32px));
    margin: 0;
    transform: translateX(-50%);
    box-shadow: 0 8px 24px rgba(15,49,80,.18);
  }

  .ux-workspace {
    width: auto;
    height: auto;
    min-height: 0;
    margin: 8px;
    display: block;
    overflow: hidden;
  }

  .ux-map-panel {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 6px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
  }

  .ux-map-panel .map-toolbar {
    min-height: var(--ux-toolbar-height);
  }

  .ux-map-panel .map-results-layout {
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: hidden;
  }

  .ux-map-panel .map-results-layout.view-map,
  .ux-map-panel .map-results-layout.view-list {
    grid-template-rows: minmax(0, 1fr);
  }

  .ux-map-panel .map {
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  .map-results-layout.view-list .ux-results-panel {
    height: 100%;
    min-height: 0;
    margin: 0;
  }

  .ux-sidebar {
    top: calc(92px + var(--ux-safe-top));
    bottom: max(8px, var(--ux-safe-bottom));
    max-height:
      calc(
        100dvh
        - 100px
        - var(--ux-safe-top)
        - var(--ux-safe-bottom)
      );
  }

  /*
   * Le pied de page ne prend plus une ligne du grid principal :
   * les actions restent disponibles en surimpression compacte.
   */
  .app-shell > footer {
    position: fixed;
    z-index: 850;
    right: 14px;
    bottom: calc(12px + var(--ux-safe-bottom));
    width: auto;
    max-width: calc(100vw - 28px);
    margin: 0;
    padding: 5px 7px;
    border: 1px solid rgba(190,210,223,.92);
    border-radius: 12px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 5px 18px rgba(15,49,80,.14);
    backdrop-filter: blur(8px);
  }

  .app-shell > footer .footer-meta,
  .app-shell > footer .footer-sources {
    display: none;
  }

  .app-shell > footer .footer-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .app-shell > footer .admin-footer-link {
    min-height: 32px;
    padding: 5px 8px;
    border-radius: 8px;
    background: #fff;
  }
}


/* ==================================================================
   V0.12.1 — panneau Recherche et filtres + interaction Leaflet
   ================================================================== */
:root {
  --ux-panel-width: clamp(360px, 30vw, 460px);
  --ux-overlay-panel-width: clamp(360px, 30vw, 460px);
  --ux-panel-radius: 18px;
  --ux-panel-shadow: 0 14px 38px rgba(13, 51, 78, .16);
}

.ux-workspace {
  grid-template-columns: var(--ux-panel-width) minmax(0, 1fr);
}

.ux-sidebar {
  display: grid;
  grid-template-rows: auto auto minmax(150px, 1fr);
  align-content: stretch;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  overflow-y: hidden !important;
  border: 1px solid #d4e2eb;
  border-radius: var(--ux-panel-radius);
  background: #fff;
  box-shadow: var(--ux-panel-shadow);
}

.sidebar-mobile-head {
  position: sticky;
  z-index: 12;
  top: 0;
  display: flex;
  min-width: 0;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px 9px 15px;
  border-bottom: 1px solid #dbe7ef;
  background: rgba(255, 255, 255, .98);
  backdrop-filter: blur(10px);
}

.sidebar-mobile-head strong {
  min-width: 0;
  color: #123f63;
  font-size: 1.02rem;
  font-weight: 900;
  line-height: 1.2;
}

.sidebar-mobile-close {
  display: none;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid #c5d8e5;
  border-radius: 50%;
  padding: 0;
  background: #fafdff;
  color: #164c73;
  box-shadow: 0 3px 10px rgba(15, 49, 80, .12);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color .14s ease,
    border-color .14s ease,
    box-shadow .14s ease,
    transform .08s ease;
}

.sidebar-mobile-close span {
  display: block;
  margin-top: -2px;
  font-size: 1.65rem;
  font-weight: 400;
  line-height: 1;
}

.sidebar-mobile-close:hover {
  border-color: #83b3d3;
  background: #eef7fc;
  box-shadow: 0 5px 14px rgba(15, 49, 80, .16);
}

.sidebar-mobile-close:active {
  transform: scale(.94);
  background: #e5f1f8;
}

.sidebar-mobile-close:focus-visible,
.station-list-action:focus-visible,
.mobile-menu-toggle:focus-visible {
  outline: 3px solid rgba(34, 126, 184, .32);
  outline-offset: 2px;
}

.sidebar-controls-body {
  min-height: 0;
  max-height: min(52dvh, 500px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 12px 13px 5px;
  scrollbar-width: none;
}

.sidebar-controls-body::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.ux-section {
  margin-bottom: 9px;
  padding-bottom: 9px;
}

.ux-section-heading {
  min-height: 28px;
  margin-bottom: 7px;
}

.ux-section-heading strong {
  color: #183f5d;
  font-size: .89rem;
  font-weight: 900;
}

.ux-section-kicker {
  font-size: .62rem;
  letter-spacing: .055em;
}

.ux-search-form label,
.ux-filter-grid label,
.ux-fuel-selector legend {
  color: #35546b;
  font-size: .73rem;
  font-weight: 800;
}

.ux-fuel-selector {
  gap: 6px;
}

.ux-fuel-selector .fuel-option {
  min-height: 54px;
  border-radius: 10px;
  padding: 7px;
}

.ux-fuel-selector .fuel-option:has(input:checked) {
  box-shadow:
    0 0 0 2px rgba(7, 90, 155, .08),
    0 4px 10px rgba(15, 49, 80, .05);
}

.ux-filter-grid {
  gap: 7px;
}

.ux-filter-grid input,
.ux-filter-grid select {
  min-height: 38px;
  border-radius: 9px;
}

.ux-result-summary {
  align-items: stretch;
  gap: 7px;
  margin-top: 8px;
}

.ux-result-summary > div {
  min-height: 62px;
  grid-template-rows: auto 1fr;
  align-content: center;
  padding: 8px 9px;
  border: 1px solid #d8e5ed;
  border-radius: 11px;
  background: #f6fafc;
}

.ux-result-summary strong {
  font-size: 1rem;
  line-height: 1.05;
}

.ux-result-summary span {
  align-self: end;
  font-size: .65rem;
  line-height: 1.25;
}

.ux-results-panel {
  min-height: 0;
  margin: 5px 8px 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #dce7ee;
  border-radius: 13px;
  background: #f7fafc;
}

.ux-results-panel .results-panel-head {
  position: relative;
  flex: 0 0 auto;
  min-height: 42px;
  padding: 9px 10px;
  border-bottom: 1px solid #dce7ee;
  background: #f7fafc;
}

.ux-results-panel .results-panel-head strong {
  color: #183f5d;
  font-size: .86rem;
  font-weight: 900;
}

.ux-results-panel .results-panel-head span {
  color: #637b8d;
  font-size: .7rem;
  font-weight: 750;
}

.ux-results-panel .results-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 7px;
  gap: 7px;
}

.station-list-card {
  gap: 7px;
  padding: 10px;
  border: 1px solid #d9e5ec;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 7px rgba(15, 49, 80, .035);
  transform: none;
}

.station-list-card:hover {
  transform: none;
}

.station-list-card.is-selected {
  border-color: #69a8cf;
  box-shadow:
    0 0 0 2px rgba(7, 90, 155, .08),
    0 7px 18px rgba(15, 49, 80, .10);
}

.station-list-main {
  gap: 6px;
}

.station-list-brand {
  color: #173e5b;
  font-size: .86rem;
  font-weight: 900;
}

.station-list-location {
  color: #5f788a;
  font-size: .69rem;
}

.station-list-address {
  margin-top: 4px;
  color: #4f6778;
  font-size: .7rem;
  line-height: 1.3;
}

.station-list-fuels {
  margin-top: 1px;
}

.fuel-price-pill {
  min-height: 30px;
  padding: 4px 7px;
  border-radius: 8px;
  font-size: .7rem;
}

.station-list-metrics {
  gap: 4px 6px;
  color: #5b7384;
  font-size: .67rem;
}

.station-list-metrics > span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  border-radius: 7px;
  padding: 3px 6px;
  background: #f5f8fa;
}

.station-list-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 1px;
}

.station-list-action {
  min-height: 38px;
  border: 1px solid #b9cfdd;
  border-radius: 9px;
  padding: 7px 9px;
  background: #fff;
  color: #15537f;
  font: inherit;
  font-size: .72rem;
  font-weight: 850;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.station-list-action:hover {
  border-color: #78add0;
  background: #f0f8fd;
}

.station-list-action:active {
  background: #e5f2f9;
}

.station-list-action-primary {
  border-color: #80b2d2;
  background: #f4faff;
}

.station-list-action-route {
  border-color: #92c7aa;
  background: #f3faf6;
  color: #176243;
}

@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  .ux-sidebar {
    height: 100%;
  }

  .sidebar-mobile-head {
    display: flex;
  }

  .sidebar-mobile-close {
    display: none;
  }

  .sidebar-controls-body {
    max-height: min(52dvh, 500px);
  }
}

@media (min-width: 761px) and (max-width: 1700px) and (min-height: 521px) and (hover: none),
       (min-width: 761px) and (max-width: 1700px) and (min-height: 521px) and (pointer: coarse) {
  :root {
    --ux-overlay-panel-width: clamp(360px, 30vw, 460px);
  }

  html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .app-shell {
    height: 100dvh;
    min-height: 100dvh;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
  }

  .ux-workspace {
    display: block;
    height: auto;
    min-height: 0;
    margin: 8px;
    overflow: hidden;
  }

  .ux-map-panel {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    transition:
      width .22s ease,
      margin-left .22s ease;
  }

  .ux-sidebar {
    position: fixed;
    z-index: 2200;
    top: calc(92px + var(--ux-safe-top));
    left: 8px;
    bottom: max(8px, var(--ux-safe-bottom));
    width: var(--ux-overlay-panel-width);
    height: auto;
    max-height:
      calc(
        100dvh
        - 100px
        - var(--ux-safe-top)
        - var(--ux-safe-bottom)
      );
    transform: translateX(calc(-100% - 24px));
    transition: transform .22s ease;
  }

  body.sidebar-mobile-open .ux-sidebar {
    transform: translateX(0);
  }

  body.sidebar-mobile-open .ux-map-panel {
    width:
      calc(
        100%
        - var(--ux-overlay-panel-width)
        - 16px
      );
    margin-left:
      calc(
        var(--ux-overlay-panel-width)
        + 16px
      );
  }

  .sidebar-mobile-head,
  .mobile-menu-toggle {
    display: flex;
  }

  .sidebar-mobile-close {
    display: inline-flex;
  }

  .sidebar-controls-body {
    max-height: min(50dvh, 470px);
  }

  .ux-results-panel {
    min-height: 150px;
  }

  body.sidebar-mobile-open .leaflet-popup-content-wrapper {
    max-width:
      min(
        360px,
        calc(
          100vw
          - var(--ux-overlay-panel-width)
          - 64px
        )
      );
  }

  body.sidebar-mobile-open .leaflet-popup-content {
    width: auto !important;
    max-width:
      min(
        330px,
        calc(
          100vw
          - var(--ux-overlay-panel-width)
          - 92px
        )
      ) !important;
  }

  .sidebar-backdrop {
    background: rgba(10, 34, 54, .22);
  }
}

@media (max-width: 760px) {
  .ux-sidebar {
    top: calc(8px + var(--ux-safe-top));
    left: 3vw;
    right: auto;
    bottom: calc(8px + var(--ux-safe-bottom));
    width: min(94vw, 420px);
    height: auto;
    max-height:
      calc(
        100dvh
        - 16px
        - var(--ux-safe-top)
        - var(--ux-safe-bottom)
      );
    grid-template-rows: auto minmax(0, 1fr);
    border-radius: 18px;
    transform: translateX(calc(-110% - 3vw));
  }

  body.sidebar-mobile-open .ux-sidebar {
    transform: translateX(0);
  }

  .sidebar-mobile-head {
    display: flex;
    min-height: 58px;
    padding: 9px 9px 9px 14px;
  }

  .sidebar-mobile-close {
    display: inline-flex;
  }

  .sidebar-controls-body {
    max-height: none;
    height: 100%;
    overflow-y: auto;
    padding: 10px 11px 14px;
    scrollbar-width: auto;
  }

  .sidebar-controls-body::-webkit-scrollbar {
    width: 5px;
  }

  .sidebar-controls-body::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #bbccd8;
  }

  .ux-results-panel {
    display: none;
  }

  .map-results-layout.view-list .ux-results-panel {
    display: flex;
  }

  .leaflet-top.leaflet-left {
    top: auto;
    left: auto;
    right: 12px;
    bottom: calc(54px + var(--ux-safe-bottom));
  }

  .leaflet-top.leaflet-left .leaflet-control {
    float: none;
    margin: 0;
  }

  .leaflet-control-zoom {
    border: 1px solid rgba(184, 205, 218, .95) !important;
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 5px 16px rgba(15, 49, 80, .18);
  }

  .leaflet-control-zoom a {
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
    color: #164c73 !important;
    background: rgba(255,255,255,.97) !important;
  }
}

/* Smartphone tactile en paysage : ne jamais basculer en layout tablette. */
@media (max-height: 520px) and (max-width: 950px) and (pointer: coarse) {
  .topbar.topbar-logo-only {
    min-height: calc(54px + var(--ux-safe-top));
    height: calc(54px + var(--ux-safe-top));
    padding: var(--ux-safe-top) 7px 3px;
  }

  .topbar.topbar-logo-only .brand-logo {
    width: min(150px, 34vw);
    max-height: 48px;
  }

  .ux-workspace {
    display: block;
    margin: 0;
  }

  .ux-map-panel,
  body.sidebar-mobile-open .ux-map-panel {
    width: 100%;
    height: 100%;
    margin-left: 0;
  }

  .ux-sidebar {
    top: calc(5px + var(--ux-safe-top));
    left: 3vw;
    right: auto;
    bottom: calc(5px + var(--ux-safe-bottom));
    width: min(94vw, 420px);
    height: auto;
    max-height:
      calc(
        100dvh
        - 10px
        - var(--ux-safe-top)
        - var(--ux-safe-bottom)
      );
    grid-template-rows: auto minmax(0, 1fr);
    border-radius: 18px;
    transform: translateX(calc(-110% - 3vw));
  }

  body.sidebar-mobile-open .ux-sidebar {
    transform: translateX(0);
  }

  .sidebar-mobile-head {
    display: flex;
    min-height: 50px;
    padding: 6px 8px 6px 13px;
  }

  .sidebar-mobile-close {
    display: inline-flex;
  }

  .sidebar-controls-body {
    height: 100%;
    max-height: none;
    overflow-y: auto;
    padding: 7px 10px 10px;
    scrollbar-width: auto;
  }

  .sidebar-controls-body::-webkit-scrollbar {
    width: 5px;
  }

  .ux-sidebar > .ux-results-panel {
    display: none;
  }

  .map-results-layout.view-list .ux-results-panel {
    display: flex;
  }

  .leaflet-top.leaflet-left {
    top: auto;
    left: auto;
    right: 10px;
    bottom: calc(48px + var(--ux-safe-bottom));
  }

  .leaflet-top.leaflet-left .leaflet-control {
    float: none;
    margin: 0;
  }

  .leaflet-control-zoom {
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 5px 16px rgba(15,49,80,.18);
  }

  .leaflet-control-zoom a {
    width: 38px !important;
    height: 38px !important;
    line-height: 38px !important;
  }
}


/* ==================================================================
   V0.12.2 — distance libre, accès tactiles et scroll administration
   ================================================================== */

.touch-quick-access {
  display: none;
}

/* Les pages admin ne doivent jamais hériter du verrouillage plein écran. */
html.admin-document {
  width: 100% !important;
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
  scroll-behavior: auto;
}

html.admin-document body.admin-page {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100dvh !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  touch-action: pan-y pinch-zoom;
  overscroll-behavior-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

html.admin-document body.admin-page .admin-card {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 auto;
  overflow: visible !important;
}

html.admin-document body.admin-page .report-table {
  max-height: none !important;
  overflow-x: auto;
  overflow-y: visible;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}

html.admin-document body.admin-page .admin-nav {
  flex-wrap: wrap;
}

/* Smartphone, y compris paysage. */
@media (max-width: 760px),
       (max-height: 520px) and (max-width: 950px) and (pointer: coarse) {
  .topbar.topbar-logo-only {
    position: relative;
    padding-right: 126px;
  }

  .touch-quick-access {
    position: absolute;
    z-index: 1200;
    top: calc(var(--ux-safe-top) + 8px);
    right: 7px;
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .touch-quick-access a {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #bfd3df;
    border-radius: 10px;
    padding: 5px 8px;
    background: rgba(255,255,255,.97);
    color: #14527e;
    box-shadow: 0 3px 10px rgba(15,49,80,.10);
    font-size: .69rem;
    font-weight: 850;
    line-height: 1;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  .touch-quick-access a:active {
    background: #e9f4fa;
  }

  .touch-quick-access a:focus-visible {
    outline: 3px solid rgba(34,126,184,.32);
    outline-offset: 2px;
  }
}

/* Tablettes tactiles. */
@media (min-width: 761px) and (max-width: 1700px) and (pointer: coarse),
       (min-width: 761px) and (max-width: 1700px) and (hover: none) {
  .topbar.topbar-logo-only {
    position: relative;
    padding-right: 154px;
  }

  .touch-quick-access {
    position: absolute;
    z-index: 1200;
    top: calc(var(--ux-safe-top) + 18px);
    right: 12px;
    display: flex;
    align-items: center;
    gap: 7px;
  }

  .touch-quick-access a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #bfd3df;
    border-radius: 10px;
    padding: 7px 10px;
    background: rgba(255,255,255,.98);
    color: #14527e;
    box-shadow: 0 3px 10px rgba(15,49,80,.10);
    font-size: .74rem;
    font-weight: 850;
    text-decoration: none;
  }

  .touch-quick-access a:active {
    background: #e9f4fa;
  }
}

@media (max-width: 900px), (pointer: coarse) {
  html.admin-document body.admin-page {
    padding: 10px !important;
  }

  html.admin-document body.admin-page .admin-card {
    width: 100%;
    border-radius: 14px;
    padding: 16px 12px;
  }

  html.admin-document body.admin-page .admin-nav {
    gap: 8px 14px;
    margin: 10px 0 16px;
  }

  html.admin-document body.admin-page .admin-nav a,
  html.admin-document body.admin-page .admin-nav-link {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }
}