* {
  box-sizing: border-box;
}

:root {
  --blue: #101010;
  --blue-dark: #000000;
  --background: #eef3f7;
  --panel: #ffffff;
  --text: #1f2933;
  --muted: #5f6b76;
  --border: #d8e0e7;
  --soft: #f8fafc;
  --secondary: #667085;
  --danger: #b42318;
  --success: #176b39;
}

html,
body {
  margin: 0;
  min-height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--background);
  color: var(--text);
}

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

.app-header {
  min-height: 68px;
  padding: 10px 18px;
  background: var(--blue);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.app-header h1 {
  margin: 0;
  font-size: 22px;
}

.subtitle {
  margin-top: 3px;
  font-size: 12px;
  opacity: 0.85;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.header-button {
  margin: 0;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

#status {
  font-size: 13px;
  white-space: nowrap;
}

.layout {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr) 370px;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "search map route"
    "results map route";
  height: calc(100vh - 68px);
}

.search-tools {
  grid-area: search;
  background: var(--panel);
  padding: 16px 16px 8px;
  border-right: 1px solid var(--border);
}

.results-panel {
  grid-area: results;
  background: var(--panel);
  padding: 4px 16px 16px;
  overflow-y: auto;
  border-right: 1px solid var(--border);
}

.map-panel {
  grid-area: map;
  position: relative;
  min-width: 0;
  min-height: 0;
}

#map {
  width: 100%;
  height: 100%;
  min-height: 340px;
}

.map-toolbar {
  position: absolute;
  z-index: 700;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 250px;
}

.map-toolbar button {
  margin: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.map-toolbar .active {
  background: #b54708;
}

.route-panel {
  grid-area: route;
  background: var(--panel);
  padding: 16px;
  overflow-y: auto;
  border-left: 1px solid var(--border);
}

.route-panel h2 {
  margin-top: 0;
}

.route-panel h3 {
  margin: 22px 0 10px;
}

input,
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #cbd5df;
  border-radius: 10px;
  background: white;
  color: var(--text);
}

textarea {
  resize: vertical;
}

#search {
  margin-bottom: 10px;
  font-size: 16px;
}

.filters {
  display: grid;
  gap: 10px;
}

#counter {
  margin: 10px 0 14px;
  color: var(--muted);
  font-size: 14px;
}

.result {
  padding: 14px;
  margin-bottom: 10px;
  border: 1px solid #e2e8ee;
  border-radius: 12px;
  background: var(--soft);
}

.result:hover {
  background: #eef6fc;
}

.result-title {
  font-weight: 700;
  font-size: 16px;
}

.meta {
  margin: 7px 0 10px;
  color: var(--muted);
  font-size: 14px;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 7px;
  border-radius: 999px;
  background: #e7eef5;
  color: #344054;
  font-size: 12px;
}

.badge.trusted {
  background: #e8f6ed;
  color: var(--success);
}

button,
.map-link {
  display: inline-block;
  margin: 4px 5px 4px 0;
  padding: 9px 11px;
  border: 0;
  border-radius: 8px;
  background: var(--blue);
  color: white;
  cursor: pointer;
  text-decoration: none;
  font-size: 13px;
}

button:hover,
.map-link:hover {
  background: var(--blue-dark);
}

button:disabled {
  background: #b8c1cb;
  cursor: not-allowed;
}

.secondary {
  background: var(--secondary);
}

.danger {
  background: var(--danger);
}

.empty {
  color: #777;
  font-style: italic;
}

.popup-title {
  margin-bottom: 5px;
  font-weight: 700;
}

.departure-options {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.departure-options legend {
  padding: 0 6px;
  font-weight: 700;
}

.departure-options label {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  cursor: pointer;
}

.departure-options input[type="radio"] {
  width: auto;
  margin: 0;
}

.information-box {
  margin-top: 12px;
  padding: 11px;
  border-radius: 9px;
  background: #edf5fb;
  color: #31536d;
  font-size: 13px;
}

.start-stop-area {
  margin-top: 15px;
}

.start-stop-area > label {
  display: block;
  margin-bottom: 7px;
  font-weight: 700;
}

.hidden {
  display: none !important;
}

.start-result {
  padding: 9px;
  margin-top: 6px;
  border: 1px solid #dfe5eb;
  border-radius: 8px;
  background: var(--soft);
  cursor: pointer;
}

.start-result:hover {
  background: #eef6fc;
}

.selected-start {
  margin-top: 10px;
  padding: 11px;
  background: #eaf7ef;
  border: 1px solid #b9dfc7;
  border-radius: 9px;
}

.route-item {
  padding: 11px 0;
  border-bottom: 1px solid #e5e9ee;
}

.route-item-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 7px;
}

.route-item-buttons button {
  margin: 0;
}

.route-summary {
  margin-top: 12px;
  padding: 12px;
  background: #f3f8fc;
  border: 1px solid #d4e3ef;
  border-radius: 10px;
  font-size: 14px;
}

.route-actions {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.route-actions button {
  width: 100%;
  margin: 0;
  padding: 11px;
  font-weight: 700;
}

.modal {
  width: min(720px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  padding: 0;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.3);
}

.modal::backdrop {
  background: rgba(15, 23, 42, 0.58);
}

.modal-card {
  padding: 18px;
  overflow-y: auto;
}

.modal-card.large {
  width: 100%;
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.modal-header h2 {
  margin: 0;
}

.icon-button {
  margin: 0;
  padding: 7px 10px;
  background: var(--secondary);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form-grid label,
.modal-card > label {
  display: grid;
  gap: 6px;
  font-weight: 700;
}

.full-width {
  grid-column: 1 / -1;
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

.modal-actions button {
  margin: 0;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.photo-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--soft);
}

.photo-card img {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.library-item {
  padding: 14px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--soft);
}

.library-item h3 {
  margin: 0 0 6px;
}

@media (max-width: 1000px) {
  .layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 420px auto auto;
    grid-template-areas:
      "search"
      "map"
      "route"
      "results";
    height: auto;
  }

  .search-tools {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .map-panel {
    height: 420px;
  }

  .route-panel {
    border-left: 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    overflow: visible;
  }

  .results-panel {
    border-right: 0;
    overflow: visible;
  }
}

@media (max-width: 650px) {
  .app-header {
    align-items: flex-start;
    padding: 10px 12px;
  }

  .app-header h1 {
    font-size: 19px;
  }

  .header-actions {
    max-width: 58%;
  }

  .header-button {
    font-size: 11px;
    padding: 6px 7px;
  }

  #status {
    width: 100%;
    text-align: right;
    font-size: 11px;
  }

  .layout {
    grid-template-rows: auto 350px auto auto;
  }

  .map-panel {
    height: 350px;
  }

  .map-toolbar {
    left: 10px;
    right: 10px;
    top: 48px;
    max-width: none;
  }

  .map-toolbar button {
    font-size: 12px;
  }

  input,
  select,
  textarea {
    font-size: 16px;
  }

  button,
  .map-link {
    font-size: 14px;
    padding: 10px 12px;
  }

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

  .full-width {
    grid-column: auto;
  }
}


.admin-section {
  padding: 4px 0 14px;
}

.admin-section h3 {
  margin-top: 0;
}

.modal-actions.left {
  justify-content: flex-start;
}

.import-report {
  margin-top: 14px;
}

.import-summary {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--soft);
}

.import-summary strong {
  display: block;
  margin-bottom: 7px;
}

.import-progress {
  width: 100%;
  height: 12px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #dfe7ee;
}

.import-progress > div {
  height: 100%;
  width: 0;
  background: var(--blue);
  transition: width 0.2s ease;
}

.route-stop-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 3px solid white;
  border-radius: 50%;
  background: #005493;
  color: white;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.create-stop-cursor {
  cursor: crosshair !important;
}


.line-details {
  margin-top: 18px;
  min-height: 100px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--soft);
}

.line-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.line-color {
  width: 12px;
  height: 38px;
  border-radius: 999px;
  background: var(--blue);
}

.line-stop-list {
  max-height: 360px;
  overflow-y: auto;
  padding-left: 24px;
}

.line-stop-list li {
  margin: 7px 0;
}

.stop-lines-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}

.stop-line-chip {
  padding: 5px 8px;
  border-radius: 999px;
  background: #eaf2f8;
  color: #154e75;
  font-size: 12px;
  cursor: pointer;
}

.gps-screen {
  position: fixed;
  z-index: 5000;
  inset: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  background: #091522;
  color: white;
}

.gps-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) 14px 10px;
  background: #003e70;
}

.gps-route-name {
  font-size: 21px;
  font-weight: 800;
}

.gps-direction {
  margin-top: 3px;
  opacity: 0.85;
}

.gps-information {
  padding: 12px 16px;
  background: #0f2539;
  text-align: center;
}

.gps-next-label {
  font-size: 13px;
  text-transform: uppercase;
  opacity: 0.75;
}

.gps-next-stop {
  margin-top: 4px;
  font-size: 28px;
  font-weight: 800;
}

.gps-distance {
  margin-top: 3px;
  font-size: 22px;
}

.gps-following {
  margin-top: 5px;
  opacity: 0.8;
}

.gps-status {
  display: inline-block;
  margin-top: 9px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #23445f;
  font-size: 13px;
}

.gps-status.off-route {
  background: #b42318;
}

.gps-status.on-route {
  background: #176b39;
}

.gps-map {
  min-height: 0;
}

.gps-footer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  padding: 9px 10px max(9px, env(safe-area-inset-bottom));
  background: #0f2539;
}

.gps-footer button {
  margin: 0;
}

@media (max-width: 650px) {
  .gps-footer {
    grid-template-columns: 1fr 1fr;
  }

  .gps-next-stop {
    font-size: 24px;
  }
}


.gps-map-rotator {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  will-change: transform;
}

.gps-heading-marker {
  width: 34px;
  height: 34px;
  transform-origin: 50% 50%;
  transition: transform 0.25s linear;
}

.gps-heading-arrow {
  width: 0;
  height: 0;
  margin: 0 auto;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 28px solid #1677ff;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}

.gps-follow-paused {
  background: #b54708 !important;
}

.gps-orientation-off {
  background: #667085 !important;
}


.sae-course-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.sae-course-card {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--soft);
  cursor: pointer;
}

.sae-course-card:hover {
  background: #eef6fc;
}

.sae-course-title {
  font-size: 17px;
  font-weight: 800;
}

.sae-course-meta {
  margin-top: 7px;
  color: var(--muted);
}

.sae-match-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
}

.sae-match-source {
  font-weight: 700;
}

.sae-match-time {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.sae-screen {
  position: fixed;
  z-index: 6000;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: #050706;
  color: white;
}

.sae-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  min-height: 66px;
  padding: max(10px, env(safe-area-inset-top)) 18px 10px;
  background: #101311;
  border-bottom: 1px solid #2b302d;
}

.sae-course-name {
  font-size: 21px;
  font-weight: 900;
}

.sae-header-details {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  font-size: 12px;
}

.sae-header-details span {
  padding: 3px 6px;
  border-radius: 5px;
  background: #222825;
}

.sae-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sae-badge {
  padding: 7px 11px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
}

.sae-badge-warning {
  background: #4c1515;
  color: #ff5b5b;
}

.sae-badge-success {
  background: #13391f;
  color: #65e488;
}

.sae-badge-passengers {
  background: #243b13;
  color: #8ce63f;
}

.sae-layout {
  display: grid;
  grid-template-columns: minmax(420px, 700px) minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
  padding: 14px;
}

.sae-main-panel {
  min-width: 0;
  overflow-y: auto;
}

.sae-current-card,
.sae-next-card,
.sae-progress-card {
  margin-bottom: 14px;
  padding: 16px;
  border: 1px solid #343a36;
  border-radius: 14px;
  background: #111512;
}

.sae-current-card {
  border-color: #78d933;
  box-shadow: inset 0 0 0 1px rgba(120, 217, 51, 0.15);
}

.sae-section-label {
  color: #9fb0a5;
  font-size: 12px;
  font-weight: 800;
}

.sae-current-row,
.sae-next-card,
.sae-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.sae-current-stop {
  margin-top: 7px;
  font-size: 29px;
  font-weight: 900;
}

.sae-time-row {
  margin-top: 5px;
  color: #adb8b1;
}

.sae-delay {
  min-width: 110px;
  padding: 12px;
  border-radius: 10px;
  text-align: center;
  font-size: 18px;
  font-weight: 900;
}

.sae-delay-early {
  background: #44200b;
  color: #ffa45d;
}

.sae-delay-late {
  background: #4e1111;
  color: #ff5e5e;
}

.sae-delay-ontime {
  background: #173d1d;
  color: #6de27e;
}

.sae-delay-neutral {
  background: #252a27;
  color: #d4dbd6;
}

.sae-count-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}

.sae-count-box {
  padding: 11px;
  border: 1px solid #343a36;
  border-radius: 11px;
}

.sae-count-title {
  display: flex;
  justify-content: space-between;
  color: #aeb9b2;
  font-size: 12px;
}

.sae-count-title span {
  color: #79e338;
  font-size: 17px;
  font-weight: 900;
}

.sae-count-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 9px;
}

.sae-count-controls button {
  width: 100%;
  margin: 0;
  padding: 12px;
  font-size: 22px;
}

.sae-validate-button {
  width: 100%;
  margin-top: 14px;
  padding: 14px;
  background: #7fdf37;
  color: #081005;
  font-size: 17px;
  font-weight: 900;
}

.sae-next-stop-name {
  margin-top: 6px;
  font-size: 20px;
  font-weight: 800;
}

.sae-next-data {
  display: grid;
  gap: 6px;
  text-align: right;
}

.sae-next-data strong {
  color: #83e740;
  font-size: 22px;
}

.sae-progress-header {
  margin-bottom: 14px;
}

.sae-stop-progress {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 4px 14px;
}

.sae-progress-stop {
  min-width: 120px;
  padding: 9px;
  border-top: 4px solid #434a46;
  color: #a9b3ad;
  font-size: 12px;
}

.sae-progress-stop.current {
  border-color: #7cdf38;
  color: #fff;
  font-weight: 800;
}

.sae-progress-stop.done {
  border-color: #226c35;
  color: #6f8f79;
}

.sae-map-panel {
  position: relative;
  min-width: 0;
  min-height: 0;
  border: 1px solid #343a36;
  border-radius: 14px;
  overflow: hidden;
}

#saeMap {
  width: 100%;
  height: 100%;
  min-height: 500px;
}

.sae-map-buttons {
  position: absolute;
  z-index: 700;
  top: 10px;
  right: 10px;
  display: grid;
  gap: 6px;
}

.sae-map-buttons button {
  margin: 0;
}

@media (max-width: 900px) {
  .sae-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 48vh;
    overflow-y: auto;
  }

  .sae-main-panel {
    overflow: visible;
  }

  .sae-map-panel {
    min-height: 48vh;
  }

  #saeMap {
    min-height: 48vh;
  }
}

@media (max-width: 600px) {
  .sae-header {
    align-items: flex-start;
    padding-left: 10px;
    padding-right: 10px;
  }

  .sae-course-name {
    font-size: 17px;
  }

  .sae-header-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .sae-count-grid {
    grid-template-columns: 1fr;
  }

  .sae-current-stop {
    font-size: 24px;
  }

  .sae-layout {
    padding: 8px;
  }
}


.stop-direction-badge {
  display: inline-block;
  margin-left: 5px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #e8f1f8;
  color: #174d70;
  font-size: 11px;
  font-weight: 700;
}

.sae-map-buttons {
  max-height: calc(100% - 20px);
  overflow-y: auto;
}

.gps-heading-arrow {
  transform: rotate(0deg) !important;
}


/* V5.2 — SAE compact pour iPhone 16 */
.sae-layout-iphone {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(340px, 52vh) auto;
  gap: 10px;
  overflow-y: auto;
  padding: 8px;
}

.sae-layout-iphone .sae-main-panel { overflow: visible; }

.sae-current-card-compact,
.sae-next-card-compact,
.sae-progress-card-compact {
  margin-bottom: 0;
  padding: 12px;
  border-radius: 12px;
}

.sae-current-topline {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.sae-current-card-compact .sae-current-stop {
  margin-top: 3px;
  font-size: 25px;
  line-height: 1.05;
}

.sae-current-card-compact .sae-delay {
  min-width: 104px;
  padding: 9px 10px;
  font-size: 15px;
  line-height: 1.15;
}

.sae-current-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  color: #b8c1bb;
  font-size: 13px;
}

.sae-current-meta strong { color: #fff; }

.sae-count-inline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.sae-count-inline-group {
  display: grid;
  grid-template-columns: 28px 44px 34px 44px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  padding: 6px;
  border: 1px solid #343a36;
  border-radius: 10px;
  background: #0c100d;
}

.sae-count-inline-label {
  font-size: 19px;
  text-align: center;
}

.sae-count-inline-group strong {
  text-align: center;
  color: #80e63a;
  font-size: 18px;
}

.sae-count-inline-group button {
  width: 44px;
  min-width: 44px;
  height: 36px;
  margin: 0;
  padding: 0;
  border-radius: 8px;
  font-size: 20px;
  line-height: 1;
}

.sae-validate-button-compact {
  margin-top: 9px;
  padding: 10px;
  font-size: 15px;
}

.sae-next-card-compact {
  margin-top: 8px;
  min-height: 70px;
}

.sae-next-card-compact .sae-next-stop-name {
  margin-top: 4px;
  font-size: 18px;
}

.sae-next-card-compact .sae-next-data {
  font-size: 18px;
  font-weight: 800;
}

.sae-map-panel-iphone {
  min-height: 340px;
  height: 52vh;
  border-radius: 12px;
}

.sae-map-panel-iphone #saeMap {
  min-height: 340px;
  height: 100%;
}

.sae-map-buttons-compact {
  top: 8px;
  right: 8px;
  display: grid;
  grid-template-columns: repeat(5, 42px);
  gap: 5px;
}

.sae-map-buttons-compact button {
  width: 42px;
  min-width: 42px;
  height: 42px;
  margin: 0;
  padding: 0;
  font-size: 17px;
  border-radius: 9px;
}

.sae-progress-card-compact {
  margin-bottom: max(8px, env(safe-area-inset-bottom));
}

.sae-progress-card-compact .sae-progress-header {
  margin-bottom: 8px;
  font-size: 13px;
}

.sae-progress-card-compact .sae-stop-progress {
  padding-top: 6px;
  padding-bottom: 6px;
}

.sae-progress-card-compact .sae-progress-stop {
  min-width: 104px;
  padding: 7px;
  font-size: 11px;
}

@media (max-width: 650px) {
  .sae-screen { grid-template-rows: auto minmax(0, 1fr); }

  .sae-header {
    min-height: 58px;
    padding: max(7px, env(safe-area-inset-top)) 9px 7px;
  }

  .sae-course-name { font-size: 16px; }
  .sae-header-details { gap: 4px; font-size: 10px; }
  .sae-header-details span { padding: 2px 5px; }
  .sae-header-actions { gap: 5px; }
  .sae-badge { padding: 6px 8px; font-size: 10px; }
  .sae-header-actions .danger { padding: 8px 10px; font-size: 12px; }

  .sae-layout-iphone {
    grid-template-rows: auto minmax(320px, 49vh) auto;
    gap: 8px;
    padding: 7px;
  }

  .sae-map-panel-iphone {
    min-height: 320px;
    height: 49vh;
  }

  .sae-map-panel-iphone #saeMap { min-height: 320px; }

  .sae-current-card-compact .sae-current-stop { font-size: 23px; }

  .sae-count-inline-group {
    grid-template-columns: 24px 38px 28px 38px;
    gap: 4px;
  }

  .sae-count-inline-group button {
    width: 38px;
    min-width: 38px;
    height: 34px;
  }
}


/* ==========================================================
   V5.4 — interface SAE iPhone stable et sans débordement
   ========================================================== */

.sae-auto-summary {
  display: grid;
  gap: 7px;
  margin: 12px 0 16px;
  padding: 12px;
  border: 1px solid #9bcf72;
  border-radius: 11px;
  background: #eef9e8;
  color: #17320b;
}

.sae-auto-summary > div:first-child {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px;
}

.sae-auto-network {
  padding: 3px 7px;
  border-radius: 999px;
  background: #d8efc6;
  font-size: 12px;
}

.sae-auto-summary small {
  color: #42602f;
}

.sae-confidence {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 11px;
}

.sae-confidence.high {
  background: #dff4d4;
  color: #28650f;
}

.sae-confidence.medium {
  background: #fff0bf;
  color: #725700;
}

.sae-confidence.low {
  background: #ffe0dc;
  color: #9b2318;
}

@media (max-width: 650px) {
  html,
  body,
  .sae-screen {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .sae-screen *,
  .sae-screen *::before,
  .sae-screen *::after {
    box-sizing: border-box;
  }

  .sae-header {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    padding:
      max(8px, env(safe-area-inset-top))
      8px
      7px;
  }

  .sae-header > div:first-child {
    min-width: 0;
  }

  .sae-course-name {
    max-width: 100%;
    font-size: 17px;
    line-height: 1.1;
    overflow-wrap: anywhere;
  }

  .sae-header-details {
    gap: 4px;
    margin-top: 5px;
    font-size: 10px;
  }

  .sae-header-details span {
    padding: 2px 5px;
  }

  .sae-header-actions {
    display: grid;
    grid-template-columns: auto auto;
    gap: 5px;
    justify-items: stretch;
  }

  .sae-header-actions .danger {
    grid-column: 1 / 3;
    width: 100%;
    padding: 7px 9px;
  }

  .sae-badge {
    padding: 5px 7px;
    font-size: 10px;
  }

  /*
   * A single mobile column. The original desktop structure remains
   * untouched, which avoids the V5.3 JavaScript regression.
   */
  .sae-layout {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 7px;
  }

  .sae-main-panel,
  .sae-map-panel {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .sae-main-panel {
    display: contents;
  }

  .sae-current-card {
    order: 1;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 10px;
  }

  .sae-next-card {
    order: 2;
    width: 100%;
    min-width: 0;
    min-height: 62px;
    margin: 0;
    padding: 10px;
  }

  .sae-map-panel {
    order: 3;
    min-height: 330px;
    height: 46vh;
    border-radius: 12px;
  }

  #saeMap {
    width: 100%;
    min-height: 330px;
    height: 100%;
  }

  .sae-progress-card {
    order: 4;
    width: 100%;
    min-width: 0;
    margin: 0 0 max(8px, env(safe-area-inset-bottom));
    padding: 10px;
  }

  .sae-current-row {
    align-items: center;
    gap: 7px;
  }

  .sae-current-row > div:first-child {
    min-width: 0;
    flex: 1;
  }

  .sae-current-stop {
    max-width: 100%;
    font-size: 23px;
    line-height: 1.05;
    overflow-wrap: anywhere;
  }

  .sae-delay {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 43%;
    padding: 7px 8px;
    font-size: 13px;
    white-space: normal;
  }

  .sae-time-row {
    margin-top: 4px;
    font-size: 12px;
  }

  /*
   * Keep the original controls but flatten both passenger blocks onto
   * one compact row. No IDs are removed, so the stable event handlers
   * continue to work.
   */
  .sae-count-grid {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
    margin-top: 9px;
  }

  .sae-count-box {
    min-width: 0;
    padding: 5px;
    border-radius: 9px;
  }

  .sae-count-title {
    align-items: center;
    font-size: 0;
  }

  .sae-count-box:first-child .sae-count-title::before {
    content: "⬆️";
    font-size: 17px;
  }

  .sae-count-box:last-child .sae-count-title::before {
    content: "⬇️";
    font-size: 17px;
  }

  .sae-count-title span {
    font-size: 16px;
  }

  .sae-count-controls {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4px;
    margin-top: 4px;
  }

  .sae-count-controls button {
    width: 100%;
    min-width: 0;
    height: 31px;
    padding: 0;
    font-size: 18px;
  }

  .sae-validate-button {
    width: 100%;
    margin-top: 8px;
    padding: 9px;
    font-size: 15px;
  }

  .sae-next-card > div:first-child {
    min-width: 0;
    flex: 1;
  }

  .sae-next-stop-name {
    max-width: 100%;
    margin-top: 3px;
    font-size: 17px;
    overflow-wrap: anywhere;
  }

  .sae-next-data {
    flex: 0 0 auto;
    font-size: 15px;
    white-space: nowrap;
  }

  .sae-next-data strong {
    display: none;
  }

  .sae-map-buttons {
    top: 7px;
    right: 7px;
    max-width: calc(100% - 14px);
    grid-template-columns: repeat(5, 37px);
    grid-auto-flow: column;
    overflow: visible;
  }

  .sae-map-buttons button {
    width: 37px;
    min-width: 37px;
    height: 37px;
    padding: 0;
    font-size: 0;
  }

  #saeZoomIn::after {
    content: "+";
    font-size: 20px;
  }

  #saeZoomOut::after {
    content: "−";
    font-size: 20px;
  }

  #saeFollowToggle::after {
    content: "🎯";
    font-size: 16px;
  }

  #saeOrientationToggle::after {
    content: "🧭";
    font-size: 16px;
  }

  #saeNorthUp::after {
    content: "N";
    font-size: 16px;
  }

  .sae-progress-header {
    margin-bottom: 7px;
    font-size: 12px;
  }

  .sae-stop-progress {
    max-width: 100%;
    padding: 5px 2px;
  }

  .sae-progress-stop {
    min-width: 100px;
    padding: 6px;
    font-size: 11px;
  }
}


/* ==========================================================
   V5.5 — ordre définitif du SAE sur iPhone
   Arrêt actuel > Prochain arrêt > Carte > Progression
   ========================================================== */

@media (max-width: 650px) {
  /*
   * .sae-main-panel utilise display: contents sur mobile.
   * Les deux cartes qu'il contient deviennent donc des éléments directs
   * du conteneur flex .sae-layout.
   */
  .sae-current-card {
    order: 1 !important;
  }

  .sae-next-card {
    order: 2 !important;
  }

  .sae-map-panel {
    order: 3 !important;
  }

  /*
   * La progression est contenue dans .sae-progress-wrapper.
   * C'est ce parent qu'il faut ordonner, et non seulement la carte interne.
   */
  .sae-progress-wrapper {
    order: 4 !important;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .sae-progress-card {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-top: 0;
    margin-bottom: max(10px, env(safe-area-inset-bottom));
  }

  /*
   * La carte reste la zone centrale du SAE.
   */
  .sae-map-panel {
    width: 100%;
    min-height: 350px;
    height: 48vh;
  }

  #saeMap {
    width: 100%;
    min-height: 350px;
    height: 100%;
  }
}


/* ==========================================================
   BreizhStops V6.0 — numéro de version
   ========================================================== */

.brand-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
}

.app-version {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

@media (max-width: 650px) {
  .brand-title {
    gap: 5px;
  }

  .app-version {
    padding: 1px 5px;
    font-size: 9px;
  }
}

/* V6.7 — bannière BreizhStops inspirée du Gwenn ha Du */
.breizhstops-page .app-header {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(0,0,0,.96) 0 31%, rgba(0,0,0,.72) 31% 100%),
    repeating-linear-gradient(to bottom, #fff 0 9px, #050505 9px 18px);
  border-bottom: 3px solid #111;
}
.breizhstops-page .app-header::before {
  content: "♟  ♟  ♟  ♟\A ♟  ♟  ♟\A♟  ♟  ♟  ♟";
  white-space: pre;
  position: absolute;
  inset: 0 auto 0 0;
  width: 180px;
  padding: 5px 10px;
  color: white;
  background: #050505;
  font-size: 15px;
  line-height: 1.15;
  opacity: .22;
}
.breizhstops-page .app-header > * { position: relative; z-index: 1; }
.brand-title { display: flex; align-items: center; gap: 8px; }
.brand-bus-icon { width: 38px; height: 30px; object-fit: contain; }
.header-button { text-decoration: none; }

.breizhstops-page button, .breizhstops-page .map-link { background: #101010; }
.breizhstops-page button:hover, .breizhstops-page .map-link:hover { background: #2a2a2a; }
.breizhstops-page .route-actions button:first-child,
.breizhstops-page #startCreateStop,
.breizhstops-page #toggleWaypointMode { background: #111; }
@media (max-width: 760px) {
  .breizhstops-page .app-header { background: linear-gradient(90deg, #050505, #252525); }
  .brand-bus-icon { width: 32px; }
}


/* V8.2 — Accueil adopte exactement le style des autres boutons */
.home-button,
.home-button:link,
.home-button:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid #475047;
  border-radius: 8px;
  background: #111512;
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
}

.home-button:hover,
.home-button:focus-visible {
  background: #222923;
  color: #ffffff;
}

/* V11.1 — Carte complète, clusters et bibliothèque KML */
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background: rgba(98, 230, 29, .28); }
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div {
  background: #75e923; color: #071008; font-weight: 900; box-shadow: 0 3px 12px rgba(0,0,0,.28);
}
.kml-library-card { max-width: 980px; }
.kml-drop-zone { border: 2px dashed #65a777; border-radius: 18px; min-height: 150px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; cursor:pointer; margin: 12px 0 16px; background: rgba(117,233,35,.035); text-align:center; }
.kml-drop-zone strong { font-size: 1.15rem; }
.kml-drop-zone span { color: #a9bcae; }
.kml-drop-zone.dragging { border-color:#75e923; background:rgba(117,233,35,.13); transform:scale(1.005); }
.kml-toolbar { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.kml-toolbar label { margin-right:auto; display:flex; gap:8px; align-items:center; }
.kml-routes-list { display:grid; gap:8px; max-height:52vh; overflow:auto; padding-right:4px; }
.kml-route-row { display:flex; justify-content:space-between; align-items:center; gap:12px; border:1px solid #31503a; padding:10px 12px; border-radius:12px; background:#0d1a11; }
.kml-route-main { display:flex; align-items:center; gap:10px; min-width:0; }
.kml-route-main > span:last-child { display:flex; flex-direction:column; min-width:0; }
.kml-route-main strong, .kml-route-main small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kml-route-main small { color:#95aa9b; margin-top:3px; }
.kml-route-swatch { width:18px; height:18px; border-radius:50%; flex:0 0 auto; box-shadow:0 0 0 2px rgba(255,255,255,.15); }
.kml-route-actions { display:flex; gap:7px; }
@media(max-width:700px){ .kml-route-row{align-items:flex-start;flex-direction:column}.kml-route-actions{width:100%}.kml-route-actions button{flex:1} }

/* V11.3 — Bibliothèque unifiée des lignes */
.unified-routes-toolbar{display:grid;grid-template-columns:1fr 1.25fr 1.4fr auto;gap:12px;align-items:end;margin:8px 0 14px;padding:14px;border:1px solid #31503a;border-radius:14px;background:#0d1a11}.unified-routes-toolbar label{display:grid;gap:5px;font-weight:700}.unified-routes-toolbar select,.unified-routes-toolbar input{width:100%}.routes-selection-summary{margin:8px 0 12px;padding:10px 12px;border-radius:10px;background:#eaf6ff;color:#17364a}.saved-routes-section{margin-top:16px;border-top:1px solid #d7e1da;padding-top:12px}.saved-routes-section summary{cursor:pointer;font-weight:800}.visible-lines-panel{position:absolute;z-index:850;left:12px;bottom:18px;width:min(360px,calc(100% - 24px));border:1px solid #31503a;border-radius:14px;background:rgba(8,20,12,.94);color:#fff;box-shadow:0 8px 30px rgba(0,0,0,.35);overflow:hidden}.visible-lines-title{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;font-weight:900;background:#102a17}.visible-lines-title button{padding:3px 9px}.visible-lines-panel.collapsed #visibleLinesBody{display:none}#visibleLinesBody{padding:10px 12px;display:grid;gap:9px}.visible-line-chips{display:flex;gap:6px;flex-wrap:wrap}.visible-line-chips span{border-left:5px solid var(--route-color);background:#eef7f0;color:#132318;border-radius:8px;padding:5px 8px;font-weight:800;font-size:.84rem}#visibleLinesBody select{width:100%}#hideAllVisibleRoutes{width:100%}
@media(max-width:900px){.unified-routes-toolbar{grid-template-columns:1fr 1fr}.unified-routes-toolbar button{grid-column:1/-1}}@media(max-width:600px){.unified-routes-toolbar{grid-template-columns:1fr}.visible-lines-panel{bottom:10px}.kml-route-main small{white-space:normal}}

/* V11.4 — panneaux escamotables de la carte */
.layout { transition: grid-template-columns .22s ease; }
.search-tools,.results-panel,.route-panel { transition: opacity .18s ease, transform .22s ease; }
body.search-panel-collapsed .layout { grid-template-columns: 0 minmax(0,1fr) 370px; }
body.search-panel-collapsed .search-tools,
body.search-panel-collapsed .results-panel { opacity:0; pointer-events:none; overflow:hidden; padding-left:0; padding-right:0; border:0; }
body.route-panel-collapsed .layout { grid-template-columns: 380px minmax(0,1fr) 0; }
body.route-panel-collapsed .route-panel { opacity:0; pointer-events:none; overflow:hidden; padding-left:0; padding-right:0; border:0; }
body.search-panel-collapsed.route-panel-collapsed .layout { grid-template-columns: 0 minmax(0,1fr) 0; }

.map-panel-tabs { position:fixed; inset:0; pointer-events:none; z-index:920; }
.map-panel-tab { pointer-events:auto; position:absolute; border:1px solid rgba(255,255,255,.45); background:rgba(8,20,12,.94); color:#fff; box-shadow:0 5px 20px rgba(0,0,0,.28); font-weight:800; padding:9px 12px; margin:0; }
.map-panel-tab:hover,.map-panel-tab.active { background:#173d24; }
.map-panel-tab-left { left:0; top:50%; transform:translateY(-50%); border-radius:0 12px 12px 0; writing-mode:vertical-rl; rotate:180deg; }
.map-panel-tab-right { right:0; top:50%; transform:translateY(-50%); border-radius:12px 0 0 12px; writing-mode:vertical-rl; }
.map-panel-tab-lines { left:50%; bottom:12px; transform:translateX(-50%); border-radius:12px; }
.visible-lines-panel.panel-hidden { display:none !important; }

/* Lisibilité de Mes itinéraires */
#routesLibrary .kml-route-row { background:#f4faf5; border-color:#c9dccd; color:#132318; }
#routesLibrary .kml-route-main strong { color:#102b18; }
#routesLibrary .kml-route-main small { color:#52675a; }
#routesLibrary .kml-route-actions button { background:#132318; color:#fff; }
#routesLibrary .unified-routes-toolbar { background:#edf6ef; border-color:#c9dccd; color:#132318; }
#routesLibrary .unified-routes-toolbar label { color:#132318; }
#routesLibrary .routes-selection-summary { color:#17364a; }

@media (max-width:1000px) {
  body.search-panel-collapsed .layout,
  body.route-panel-collapsed .layout,
  body.search-panel-collapsed.route-panel-collapsed .layout { grid-template-columns:1fr; }
  body.search-panel-collapsed .search-tools,
  body.search-panel-collapsed .results-panel,
  body.route-panel-collapsed .route-panel { display:none; }
  .map-panel-tab-left,.map-panel-tab-right { writing-mode:horizontal-tb; rotate:0deg; transform:none; top:auto; bottom:12px; }
  .map-panel-tab-left { left:10px; border-radius:12px; }
  .map-panel-tab-right { right:10px; border-radius:12px; }
  .map-panel-tab-lines { bottom:58px; }
}

/* V11.5 — noms complets et bibliothèque My Maps lisible */
#routesLibrary .kml-route-row,
#kmlRoutesList .kml-route-row { align-items:flex-start; }
#routesLibrary .kml-route-main,
#kmlRoutesList .kml-route-main { flex:1 1 auto; min-width:0; align-items:flex-start; }
#routesLibrary .kml-route-text,
#kmlRoutesList .kml-route-text { display:flex; flex-direction:column; min-width:0; flex:1 1 auto; }
#routesLibrary .kml-route-main strong,
#routesLibrary .kml-route-main small,
#kmlRoutesList .kml-route-main strong,
#kmlRoutesList .kml-route-main small {
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  overflow-wrap:anywhere;
  line-height:1.25;
}
#routesLibrary .kml-route-main strong,
#kmlRoutesList .kml-route-main strong { font-size:1rem; }
#routesLibrary .kml-route-main small,
#kmlRoutesList .kml-route-main small { margin-top:4px; }
#routesLibrary .kml-route-actions,
#kmlRoutesList .kml-route-actions { flex:0 0 auto; align-self:center; }
@media (min-width: 760px) {
  #routesLibraryDialog { width:min(940px, 94vw); }
  #routesLibrary .kml-route-row { padding:12px 14px; }
}

/* V11.6 — optimisation iPhone et petits écrans */
@media (max-width: 700px) {
  html, body { width:100%; overflow-x:hidden; }
  body { padding-bottom: env(safe-area-inset-bottom); }

  .app-header {
    min-height:auto;
    padding:calc(8px + env(safe-area-inset-top)) 10px 9px;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:8px;
  }
  .app-header h1 { font-size:20px; line-height:1.1; }
  .header-actions {
    max-width:none;
    width:100%;
    display:flex;
    flex-wrap:nowrap;
    gap:6px;
    overflow-x:auto;
    padding-bottom:3px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .header-actions::-webkit-scrollbar { display:none; }
  .header-button { flex:0 0 auto; font-size:13px; padding:8px 10px; white-space:nowrap; }
  #status { width:auto; flex:0 0 auto; align-self:center; font-size:12px; }

  .layout { grid-template-rows:auto minmax(58vh, 480px) auto auto; }
  .map-panel { height:min(68dvh, 650px); min-height:480px; }
  #map { min-height:480px; }
  .search-tools,.route-panel,.results-panel { padding:12px; }

  .map-toolbar {
    top:54px;
    left:12px;
    right:12px;
    gap:7px;
  }
  .map-toolbar button { min-height:44px; font-size:13px; border-radius:12px; }

  .map-panel-tabs { z-index:1200; }
  .map-panel-tab {
    font-size:13px;
    padding:10px 12px;
    min-height:44px;
    max-width:42vw;
    white-space:nowrap;
  }
  .map-panel-tab-left { left:8px; bottom:calc(10px + env(safe-area-inset-bottom)); }
  .map-panel-tab-right { right:8px; bottom:calc(10px + env(safe-area-inset-bottom)); }
  .map-panel-tab-lines { bottom:calc(62px + env(safe-area-inset-bottom)); }

  .visible-lines-panel {
    left:10px;
    right:10px;
    bottom:10px;
    width:auto;
    max-height:46%;
    overflow:auto;
  }
  .visible-lines-title { min-height:48px; }
  .visible-line-chips { max-height:110px; overflow:auto; }

  dialog.modal {
    width:calc(100vw - 12px);
    max-width:none;
    max-height:calc(100dvh - 12px);
    margin:auto;
    border-radius:16px;
  }
  .modal-card,
  .modal-card.large,
  .kml-library-card {
    width:100%;
    max-width:none;
    padding:14px;
    max-height:calc(100dvh - 12px);
    overflow:auto;
    overscroll-behavior:contain;
  }
  .modal-header { position:sticky; top:-14px; z-index:5; background:#fff; padding:14px 0 10px; margin-bottom:8px; }
  .modal-header h2 { font-size:1.35rem; }
  .modal-header .meta { font-size:.9rem; line-height:1.3; }
  .icon-button { min-width:44px; min-height:44px; }

  .kml-drop-zone { min-height:108px; margin:8px 0 12px; padding:14px; }
  .kml-drop-zone strong { font-size:1rem; }
  .kml-drop-zone span { font-size:.92rem; }

  .kml-toolbar {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    align-items:stretch;
  }
  .kml-toolbar label {
    grid-column:1 / -1;
    margin:0;
    min-height:44px;
    padding:7px 10px;
    border:1px solid #d7e1da;
    border-radius:10px;
    background:#f6faf7;
    color:#132318;
  }
  .kml-toolbar button { width:100%; min-height:46px; margin:0; font-size:.9rem; padding:9px 8px; }
  #syncAllKml { grid-column:1 / -1; }
  #kmlImportStatus { font-size:.9rem; line-height:1.35; }

  .kml-routes-list { max-height:50dvh; gap:9px; padding-right:0; overflow:auto; }
  .kml-route-row,
  #routesLibrary .kml-route-row,
  #kmlRoutesList .kml-route-row {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    width:100%;
    min-width:0;
    padding:11px;
    gap:10px;
    background:#f4faf5;
    color:#132318;
    border-color:#c9dccd;
  }
  .kml-route-main,
  #routesLibrary .kml-route-main,
  #kmlRoutesList .kml-route-main {
    width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:28px 20px minmax(0,1fr);
    align-items:start;
    gap:8px;
  }
  .kml-route-main input { width:22px; height:22px; margin:0; }
  .kml-route-text,
  #routesLibrary .kml-route-text,
  #kmlRoutesList .kml-route-text { min-width:0; width:100%; }
  .kml-route-main strong,
  .kml-route-main small,
  #routesLibrary .kml-route-main strong,
  #routesLibrary .kml-route-main small,
  #kmlRoutesList .kml-route-main strong,
  #kmlRoutesList .kml-route-main small {
    display:block;
    width:100%;
    white-space:normal;
    overflow:visible;
    overflow-wrap:break-word;
    word-break:normal;
    writing-mode:horizontal-tb;
  }
  .kml-route-main strong { font-size:1rem; line-height:1.28; }
  .kml-route-main small { font-size:.84rem; line-height:1.28; }
  .kml-route-actions,
  #routesLibrary .kml-route-actions,
  #kmlRoutesList .kml-route-actions {
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .kml-route-actions button { width:100%; min-height:42px; margin:0; }

  .unified-routes-toolbar {
    grid-template-columns:minmax(0,1fr);
    padding:10px;
    gap:9px;
  }
  .unified-routes-toolbar label,
  .unified-routes-toolbar button { width:100%; min-width:0; }
  .unified-routes-toolbar select,
  .unified-routes-toolbar input { width:100%; min-width:0; }
  .routes-selection-summary { font-size:.9rem; }

  #routesLibraryDialog .modal-card,
  #kmlLibraryDialog .modal-card { padding-bottom:calc(18px + env(safe-area-inset-bottom)); }
}

/* ========================================================================== */
/* V12.0 — Centre d'exploitation                                              */
/* ========================================================================== */
.operations-button { border-color: #f7b32b !important; }
.operations-dialog { width: min(1180px, calc(100vw - 24px)); }
.operations-card { width: 100%; max-width: none; max-height: min(90vh, 900px); overflow: auto; }
.operations-kpis { display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr)); gap: 10px; margin: 14px 0; }
.operations-kpis article { background: linear-gradient(145deg, #0b2818, #113c24); color: #fff; border: 1px solid #2f7047; border-radius: 14px; padding: 14px; min-height: 92px; display: flex; flex-direction: column; justify-content: center; }
.operations-kpis strong { color: #78f125; font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1; }
.operations-kpis span { margin-top: 8px; font-size: .88rem; color: #d8eadf; }
.operations-map-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px 14px; margin-bottom: 14px; background: #eef8f1; border: 1px solid #bddcc7; border-radius: 14px; }
.operations-map-controls h3 { margin: 0 8px 0 0; }
.operations-map-controls label { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; }
.operations-map-controls input { width: 20px; height: 20px; }
.operations-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.operations-section { min-width: 0; border: 1px solid #d3e2d8; border-radius: 14px; background: #f9fcfa; overflow: hidden; }
.operations-section-title { padding: 12px 14px; background: #e8f4ec; border-bottom: 1px solid #d3e2d8; }
.operations-section-title h3 { margin: 0; font-size: 1rem; }
.operations-list { max-height: 340px; overflow: auto; padding: 8px; }
.ops-list-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; border-radius: 10px; background: #fff; border: 1px solid #d9e6dd; margin-bottom: 7px; }
.ops-list-item > div:first-child { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ops-list-item strong { overflow-wrap: anywhere; }
.ops-list-item small { color: #5c6b62; }
.ops-badge { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; font-weight: 800; font-size: .72rem; }
.ops-badge-workshop { color: #5f3b00; background: #ffe7a8; }
.ops-badge-immobilized { color: #fff; background: #7b2cbf; }
.ops-badge-alert { color: #fff; background: #d62828; }
.ops-badge-soon { color: #5f3b00; background: #ffd166; }
.ops-item-actions { display: flex; align-items: center; gap: 6px; }
.ops-focus-city { padding: 6px 9px; border-radius: 8px; }
.ops-empty { margin: 12px; color: #68756d; font-style: italic; }
.operations-footer { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #d6e1d9; }
.operations-footer span { margin-right: auto; color: #647168; }

@media (max-width: 900px) {
  .operations-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .operations-columns { grid-template-columns: 1fr; }
  .operations-list { max-height: 260px; }
}

@media (max-width: 600px) {
  .operations-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .operations-card { width: 100%; height: 100%; max-height: none; border-radius: 0; padding: calc(14px + env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom)); }
  .operations-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .operations-kpis article { min-height: 82px; padding: 11px; }
  .operations-map-controls { align-items: stretch; }
  .operations-map-controls h3 { flex: 0 0 100%; }
  .operations-map-controls label { flex: 0 0 100%; }
  .operations-map-controls button { flex: 1 1 45%; min-height: 44px; }
  .operations-footer { position: sticky; bottom: 0; background: #fff; padding-bottom: env(safe-area-inset-bottom); }
}


/* V12.1 — Mode Exploitant par ligne */
.line-operations-button { border-color:#78f125 !important; }
.line-operations-dialog { width:min(1120px,calc(100vw - 24px)); }
.line-operations-card { width:100%; max-width:none; max-height:92vh; overflow:auto; }
.line-operations-picker { display:grid; grid-template-columns:220px minmax(280px,1fr) auto; gap:12px; align-items:end; padding:14px; border:1px solid #c9ddcf; background:#f2f9f4; border-radius:14px; }
.line-operations-picker label { display:grid; gap:6px; font-weight:800; color:#17311f; }
.line-operations-picker select { width:100%; min-height:44px; }
.line-operations-content { margin-top:14px; }
.line-operations-hero { display:flex; align-items:center; gap:14px; padding:15px; border:1px solid #cbded0; border-radius:14px; background:#fff; }
.line-operations-color { width:14px; min-height:62px; border-radius:999px; flex:0 0 auto; }
.line-operations-hero h3 { margin:0; font-size:1.35rem; color:#102b18; }
.line-operations-hero p { margin:5px 0 0; color:#5b6d61; }
.line-operations-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:12px 0; }
.line-operations-kpis article { display:flex; flex-direction:column; padding:14px; border-radius:13px; background:linear-gradient(145deg,#0c2d1a,#154527); color:#fff; }
.line-operations-kpis strong { color:#78f125; font-size:1.75rem; }
.line-operations-kpis span { margin-top:5px; color:#d9eade; font-size:.85rem; }
.line-operations-actions { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:12px; }
.line-operations-columns { display:grid; grid-template-columns:1.25fr .75fr; gap:12px; }
.line-operations-columns > section { border:1px solid #d1e1d6; border-radius:14px; background:#fafdfb; overflow:hidden; }
.line-operations-section-title { padding:12px 14px; background:#eaf5ed; border-bottom:1px solid #d1e1d6; }
.line-operations-section-title h3 { margin:0; }
.line-operations-section-title small { display:block; margin-top:3px; color:#66766b; }
.line-operations-list { max-height:360px; overflow:auto; padding:8px; }
.line-stop-row { width:100%; display:flex; align-items:center; gap:10px; text-align:left; border:0; border-bottom:1px solid #e0ebe3; background:#fff; color:#132419; padding:10px; border-radius:8px; }
.line-stop-row:hover { background:#eef8f1; }
.line-stop-row > span { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#173c25; color:#fff; flex:0 0 auto; font-size:.78rem; }
.line-stop-row div { min-width:0; display:flex; flex-direction:column; }
.line-stop-row strong,.line-stop-row small { white-space:normal; overflow-wrap:anywhere; }
.line-stop-row small,.line-work-row small { color:#657269; margin-top:3px; }
.line-work-row { display:flex; flex-direction:column; padding:11px; border-bottom:1px solid #e0ebe3; }
.line-operations-footer { position:sticky; bottom:0; background:#fff; padding-top:12px; }
@media(max-width:760px){
  .line-operations-dialog { width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; margin:0; border:0; border-radius:0; }
  .line-operations-card { height:100%; max-height:none; border-radius:0; padding:calc(14px + env(safe-area-inset-top)) 12px calc(14px + env(safe-area-inset-bottom)); }
  .line-operations-picker { grid-template-columns:1fr; }
  .line-operations-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .line-operations-columns { grid-template-columns:1fr; }
  .line-operations-list { max-height:42dvh; }
  .line-operations-actions button { flex:1 1 46%; min-height:46px; }
}

/* V12.2 — Gestionnaire des lignes affichées */
.visible-lines-panel{width:min(390px,calc(100% - 24px));max-height:min(72vh,680px)}
#visibleLinesBody{min-height:0}
.floating-lines-summary{padding:7px 9px;border-radius:9px;background:#183321;color:#dff4e5;font-size:.88rem}
.floating-lines-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.floating-lines-actions button{width:100%;margin:0;padding:9px 8px}
.floating-lines-search{width:100%;margin:0;padding:9px 11px;border:1px solid #44644d;border-radius:9px;background:#f7fbf8;color:#142118}
.floating-routes-list{display:grid;gap:4px;max-height:330px;overflow:auto;padding:3px 2px 3px 0;overscroll-behavior:contain;scrollbar-width:thin}
.floating-route-row{display:grid;grid-template-columns:auto 6px minmax(0,1fr);align-items:center;gap:8px;padding:7px 8px;border-radius:8px;background:#f2f8f3;color:#142118;cursor:pointer}
.floating-route-row:hover{background:#dff0e3}
.floating-route-row input{width:18px;height:18px;margin:0;accent-color:#1f8b4c}
.floating-route-swatch{width:6px;height:30px;border-radius:5px;background:var(--route-color)}
.floating-route-name{display:grid;min-width:0;line-height:1.15}
.floating-route-name strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.91rem}
.floating-route-name small{margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#526158;font-size:.74rem}
.floating-routes-empty{margin:4px 0;color:#d5e5d9;text-align:center}
.floating-stops-mode{display:grid;gap:5px;font-weight:800;font-size:.82rem}
@media(max-width:700px){.visible-lines-panel{left:8px;bottom:8px;width:calc(100% - 16px);max-height:65dvh}.floating-routes-list{max-height:260px}.floating-route-row{padding:9px 8px}.floating-lines-actions button{min-height:42px}}

/* V12.4 — Itinéraires travaux */
.works-create-button { background:#ef6c00 !important; border-color:#ff9800 !important; color:#fff !important; }
.works-drawing-mode { cursor: crosshair !important; }
.roadworks-map-icon { background:transparent; border:0; }
.roadworks-map-icon span { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#fff; border:3px solid var(--route-color, #f57c00); box-shadow:0 2px 8px rgba(0,0,0,.35); font-size:17px; }
.floating-works-layer { margin-bottom:10px; padding:9px 10px; border:1px solid rgba(255,152,0,.55); border-radius:10px; background:rgba(245,124,0,.15); }
.floating-works-layer label { display:flex; align-items:center; gap:8px; cursor:pointer; font-weight:800; }
.floating-works-layer label span { flex:1; }
.floating-works-layer label strong { min-width:25px; text-align:center; padding:2px 7px; border-radius:999px; background:#ef6c00; color:#fff; }
.works-route-card { width:min(620px, calc(100vw - 28px)); }
.works-route-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:18px 0; }
.works-route-form-grid label { display:grid; gap:6px; font-weight:800; }
.works-route-form-grid input,.works-route-form-grid textarea { width:100%; box-sizing:border-box; }
.works-route-form-grid label:first-child,.works-route-comment { grid-column:1/-1; }
.works-popup p { margin:8px 0; white-space:pre-wrap; }
.works-popup-actions { display:flex; gap:8px; margin-top:10px; }
.works-popup-actions button { padding:7px 10px; border-radius:8px; border:0; cursor:pointer; }
.works-popup-actions .danger { background:#b71c1c; color:#fff; }
@media (max-width:700px) {
  .works-route-form-grid { grid-template-columns:1fr; }
  .works-route-form-grid label:first-child,.works-route-comment { grid-column:auto; }
  #createWorksRoute { font-size:13px; }
}

/* V12.4 — routage des travaux sur la voirie */
.works-routing-tools { grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:12px; border-radius:10px; background:rgba(245,124,0,.10); border:1px solid rgba(245,124,0,.35); }
.works-routing-tools button { min-height:40px; }
#worksRoutingStatus { flex:1 1 220px; font-size:.9rem; font-weight:700; }
#worksRoutingStatus.error { color:#b71c1c; }
@media (max-width:700px) { .works-routing-tools { grid-column:auto; } .works-routing-tools button { width:100%; } }

.works-route-form-grid select { width:100%; box-sizing:border-box; }
.deviation-map-icon span { font-weight:900; }


/* V12.6.1 — Lisibilité des couches travaux/déviations et choix des arrêts */
.floating-works-layer{display:grid;gap:8px;margin-bottom:10px;padding:10px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(4,25,13,.72)}
.floating-special-layers-title{font-size:.82rem;font-weight:900;letter-spacing:.02em;color:#d9eee0;padding:0 2px 2px}
.floating-layer-choice{display:grid!important;grid-template-columns:auto 34px minmax(0,1fr) auto;align-items:center;gap:9px;min-height:54px;padding:8px 10px;border-radius:10px;cursor:pointer;font-weight:800!important;border:1px solid transparent}
.floating-layer-choice.works-choice{background:rgba(245,124,0,.18);border-color:rgba(255,152,0,.55)}
.floating-layer-choice.deviations-choice{background:rgba(22,163,74,.17);border-color:rgba(34,197,94,.48)}
.floating-layer-choice input{width:20px;height:20px;margin:0;accent-color:#fff}
.floating-layer-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#fff;font-size:18px;box-shadow:0 1px 5px rgba(0,0,0,.25)}
.floating-layer-text{display:grid;min-width:0;line-height:1.15}
.floating-layer-text strong{font-size:.96rem;color:#fff}
.floating-layer-text small{margin-top:3px;font-size:.74rem;color:#d7e6db;font-weight:700}
.floating-layer-count{min-width:28px;text-align:center;padding:4px 8px;border-radius:999px;color:#fff;font-size:.82rem}
.works-choice .floating-layer-count{background:#ef6c00}
.deviations-choice .floating-layer-count{background:#16a34a}
.floating-stops-card{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:10px 0;padding:10px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15)}
.floating-stops-card-title{grid-column:1/-1;font-size:.84rem;font-weight:900;color:#e4f3e9}
.floating-stop-choice{display:flex;align-items:center;gap:7px;min-height:42px;padding:7px 9px;border-radius:9px;background:rgba(255,255,255,.08);color:#fff;font-size:.82rem;font-weight:800;cursor:pointer}
.floating-stop-choice:has(input:checked){background:#e9f6ed;color:#12301d;box-shadow:inset 0 0 0 2px #42a568}
.floating-stop-choice input{width:18px;height:18px;margin:0;accent-color:#25894a}
#floatingStopsMode{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
@media(max-width:700px){.floating-stops-card{grid-template-columns:1fr}.floating-stops-card-title{grid-column:auto}.floating-layer-choice{grid-template-columns:auto 32px minmax(0,1fr) auto}.floating-routes-list{max-height:230px}}


/* V12.8 — Arrêts hors service */
.stop-marker-wrapper {
  background: transparent;
  border: 0;
}

.stop-marker--out-of-service {
  position: relative;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: #747b84;
  border: 3px solid #f5f7f8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .42);
  color: #fff;
  font-size: 14px;
  box-sizing: border-box;
}

.stop-marker--out-of-service span {
  transform: rotate(45deg);
  line-height: 1;
  filter: grayscale(1);
}

.stop-out-of-service-badge,
.popup-stop-status--out {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-left: .4rem;
  padding: .18rem .48rem;
  border-radius: 999px;
  background: #69717a;
  color: #fff;
  border: 1px solid #8d949b;
  font-size: .75rem;
  font-weight: 800;
}

.popup-stop-status--out {
  margin: .35rem 0 .45rem;
}