/* Iron Dash — styles. Thème choisi via [data-theme] sur <html>. */
:root {
  --accent: #ff5a00;
  --ok: #1a9e4b;
  --warn: #d48a00;
  --bad: #d92d20;
  --tap: 48px;
}
[data-theme="day"] {
  --bg: #f2f2ef; --fg: #0b0c0e; --muted: #5d6168; --line: #c8cacd; --panel: #ffffff; --btn: #e7e8ea;
  color-scheme: light;
}
[data-theme="night"] {
  --bg: #0b0c0e; --fg: #f0f0ee; --muted: #959ba3; --line: #2b2e34; --panel: #15171b; --btn: #1f2227;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); }
body {
  font: 16px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  user-select: none;
}
button { font: inherit; color: inherit; cursor: pointer; border-radius: 0; }

#app {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: minmax(0, 1fr);
  height: 100vh; /* anciens navigateurs */
  height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}

/* Barre du haut */
.topbar {
  display: flex; align-items: center; gap: 12px;
  height: 44px; padding: 0 8px 0 14px;
  border-bottom: 1px solid var(--line);
  font-size: 14px; font-weight: 600; white-space: nowrap;
  min-width: 0; overflow: hidden;
}
.tb-clock { font-size: 17px; font-variant-numeric: tabular-nums; }
.tb-item[data-state="ok"] { color: var(--ok); }
.tb-item[data-state="search"] { color: var(--warn); }
.tb-item[data-state="error"], .tb-item[data-state="offline"] { color: var(--bad); }
#gps-status[data-state="error"] { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.tb-spacer { flex: 1; }
.tb-btn {
  height: 36px; min-width: 44px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line); font-weight: 600;
}
.tb-btn svg { width: 20px; height: 20px; }

/* Carte */
.stage { position: relative; min-height: 0; }
#map { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.map-tools { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 8px; }
.tool {
  width: 52px; height: 52px; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: var(--panel); border: 1px solid var(--line);
}
.tool svg { width: 26px; height: 26px; }
.tool small { font-size: 11px; font-weight: 700; line-height: 1; }
.tool[data-active="true"] { color: var(--accent); border-color: var(--accent); }
#compass { width: 22px; height: 22px; transition: transform .3s; }
body.editing .maplibregl-canvas { cursor: crosshair; }
.pos svg { display: block; }
.pos path { fill: #1478ff; stroke: #fff; stroke-width: 2.5; stroke-linejoin: round; }
[data-theme="night"] .maplibregl-ctrl-attrib { background: rgba(21, 23, 27, .85); color: #9aa0a8; }
[data-theme="night"] .maplibregl-ctrl-attrib a { color: #c9ccd1; }

/* Écrans qui glissent */
.pager {
  display: flex; min-height: 0;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.pager::-webkit-scrollbar { display: none; }
body.editing .pager { overflow-x: hidden; }
.page { flex: 0 0 100%; min-width: 0; height: 100%; overflow-y: auto; scroll-snap-align: start; scroll-snap-stop: always; }
.page-route { display: grid; grid-template-rows: 1fr auto; grid-template-columns: minmax(0, 1fr); overflow: hidden; }

.tabs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom);
}
.tabs button {
  height: 46px; background: none; border: 0; border-top: 3px solid transparent;
  border-right: 1px solid var(--line); font-weight: 650; color: var(--muted);
}
.tabs button:last-child { border-right: 0; }
.tabs button[aria-current="true"] { color: var(--fg); border-top-color: var(--accent); }

/* Écran Route : tableau de bord sous la carte */
.dash {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px 16px;
  padding: 10px 16px; border-top: 1px solid var(--line);
}
.dash > * { min-width: 0; }
.speed { display: flex; align-items: baseline; gap: 6px; }
.speed b {
  font-size: clamp(76px, 25vw, 168px); font-weight: 800; line-height: .82;
  letter-spacing: -0.045em; font-variant-numeric: tabular-nums;
}
.speed small { font-size: 16px; font-weight: 700; color: var(--muted); }
.bat { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.bat b { font-size: clamp(40px, 13vw, 88px); font-weight: 800; line-height: .9; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bat small { max-width: 100%; font-size: 14px; font-weight: 650; color: var(--muted); text-align: right; }
.speed .avg { margin-left: auto; font-size: 15px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.eco { grid-column: 1 / -1; display: grid; gap: 3px; }
.eco-bar { height: 8px; background: var(--btn); border: 1px solid var(--line); }
.eco-bar i { display: block; width: 0; height: 100%; background: var(--ok); transition: width .5s; }
.eco-bar i[data-status="juste"] { background: var(--warn); }
.eco-bar i[data-status="back"] { background: var(--bad); }
.eco small { font-size: 12px; font-weight: 650; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 10px; margin: 0; }
.mini > div { min-width: 0; }
.mini dt { font-size: 12px; font-weight: 650; color: var(--muted); white-space: nowrap; }
.mini dd { margin: 0; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Sur la carte : prochain virage, hors tracé, bandeau d'arrivée */
.turn {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px;
  background: var(--fg); color: var(--bg);
}
.turn svg { width: 46px; height: 46px; fill: currentColor; transition: transform .3s; }
.turn b { display: block; font-size: 30px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.turn span { font-size: 14px; font-weight: 650; }
.offroute { position: absolute; top: 10px; left: 10px; z-index: 3; padding: 12px 16px; background: var(--bad); color: #fff; font-size: 22px; font-weight: 800; }
.eta {
  position: absolute; left: 10px; right: 74px; bottom: 26px; z-index: 3;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 8px 12px;
  background: var(--panel); border: 1px solid var(--line); font-size: 15px; font-weight: 650;
}
.eta b { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.eta span:empty { display: none; }
body.editing .eta, body.editing .turn, body.editing .offroute { display: none; }
@media (max-width: 480px) { #weather { display: none; } }
/* Petits téléphones en portrait : la barre du haut doit tenir sur la largeur */
@media (max-width: 400px) {
  .topbar { gap: 8px; padding-left: 10px; }
  #net-status[data-state="ok"] { display: none; } /* « Hors ligne » reste affiché */
}
.mode-bar, .mode-big { display: grid; grid-template-columns: repeat(5, 1fr); }
.mode-bar { grid-column: 1 / -1; }
.mode-bar button, .mode-big button {
  height: 48px; margin-left: -1px; border: 1px solid var(--line);
  background: var(--btn); font-size: 20px; font-weight: 800;
}
.mode-bar button:first-child, .mode-big button:first-child { margin-left: 0; }
.mode-bar button[aria-pressed="true"], .mode-big button[aria-pressed="true"] {
  position: relative; background: var(--accent); border-color: var(--accent); color: #fff;
}
.mode-big { margin: 16px 0; }
.mode-big button { height: 72px; font-size: 28px; }
.track-line {
  grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px;
  padding-top: 8px; border-top: 1px solid var(--line); font-size: 15px; font-weight: 600;
}
#track-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Écran Données */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
@media (min-width: 600px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
@media (orientation: landscape) and (min-width: 700px) { .tiles { grid-template-columns: repeat(4, 1fr); } }
.tile { min-width: 0; padding: 10px 14px 12px; background: var(--bg); }
.tile span { display: block; margin-bottom: 2px; font-size: 13px; font-weight: 650; color: var(--muted); }
.tile b { font-size: clamp(28px, 8.5vw, 46px); font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tile.big b { font-size: clamp(34px, 10vw, 72px); }
#t-volt { display: block; margin-left: 0; }
.tile small { margin-left: 4px; font-size: 14px; font-weight: 650; color: var(--muted); }
[data-status="ok"] { color: var(--ok); }
[data-status="juste"] { color: var(--warn); }
[data-status="back"] { color: var(--bad); }

/* Écran Batterie */
.page-battery { padding: 14px 16px 24px; }
.bat-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.bat-head b { font-size: clamp(64px, 20vw, 120px); font-weight: 800; line-height: .9; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.bat-head span { font-size: 14px; font-weight: 600; color: var(--muted); }
.b-pred { margin: 0; border-top: 1px solid var(--line); }
.b-pred div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.b-pred dt { font-weight: 600; }
.b-pred dd { margin: 0; font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.page-battery h3 { margin: 22px 0 6px; font-size: 15px; }
.b-range { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.b-range td { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 17px; }
.b-range td:not(:first-child) { text-align: right; }
.b-range td:last-child { font-weight: 750; }
.b-range tr.head td { font-size: 13px; font-weight: 650; color: var(--muted); }
.b-range tr.cur td { color: var(--accent); font-weight: 750; }
.page-battery .btn, .page-battery .btn-primary { width: 100%; }
.b-settings label { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 52px; border-bottom: 1px solid var(--line); font-weight: 600; }
.b-settings input {
  width: 96px; height: 40px; padding: 0 8px; margin-right: 6px;
  border: 1px solid var(--line); border-radius: 0; background: var(--panel); color: var(--fg);
  font: inherit; font-weight: 700; text-align: right;
}
.b-settings .btn { margin-top: 12px; }

.stepper { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; margin: 8px 0 12px; }
.stepper button { height: 56px; border: 1px solid var(--line); background: var(--btn); font-size: 26px; font-weight: 800; }
.stepper output, .stepper .setup-volt {
  height: 56px; text-align: center; font-size: 36px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: none; border: 0; border-bottom: 1px dashed var(--line);
}
.setup-pct { margin: -4px 0 10px; text-align: center; font-weight: 650; color: var(--muted); }
.b-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Aller à : recherche d'adresse et itinéraires proposés */
.sheet {
  position: fixed; z-index: 15; top: 0; right: 0; bottom: 0; width: min(420px, 100%);
  display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  background: var(--bg); border-left: 1px solid var(--line); user-select: text;
}
@media (orientation: portrait) {
  .sheet { top: auto; width: 100%; height: 62vh; height: 62dvh; border-left: 0; border-top: 1px solid var(--line); }
}
.sheet-head { flex: none; display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--line); }
.sheet-head h2 { margin: 0; font-size: 18px; }
.sheet-body { flex: 1; overflow-y: auto; padding: 12px 16px; display: grid; gap: 10px; align-content: start; }
.search {
  width: 100%; height: 48px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 0; background: var(--panel); color: var(--fg);
  font: inherit; font-size: 17px;
}
.go-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.go-row .btn { padding: 0 12px; }
.results, .routes { list-style: none; margin: 0; padding: 0; }
.results:empty, .routes:empty { display: none; }
.results li { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--line); }
.results li.muted { padding: 10px 4px; }
/* bouton principal d'une ligne : l'adresse ou le tracé, prend toute la place restante */
.results li > button:first-child {
  flex: 1; min-width: 0; padding: 10px 4px; border: 0; background: none;
  text-align: left; font-weight: 650; overflow-wrap: anywhere;
}
.results .mini-btn { flex: none; height: 36px; padding: 0 10px; border: 1px solid var(--line); background: var(--btn); font-size: 14px; font-weight: 650; }
.results .star { flex: none; width: 40px; height: 40px; font-size: 20px; }
.results small { display: block; font-size: 13px; font-weight: 500; color: var(--muted); }
#go-favs h3 { margin: 4px 0 2px; font-size: 14px; color: var(--muted); }
.routes { border-top: 1px solid var(--line); }
.routes button {
  display: grid; gap: 2px; width: 100%; padding: 10px 10px;
  border: 0; border-bottom: 1px solid var(--line); border-left: 4px solid transparent;
  background: none; text-align: left;
}
.routes button[aria-pressed="true"] { border-left-color: #7c3aed; background: var(--panel); }
.routes strong { font-size: 17px; }
.routes span { font-size: 14px; color: var(--muted); }
.routes em { font-style: normal; font-size: 15px; font-weight: 700; }
.sheet-acts { flex: none; padding: 10px 16px; border-top: 1px solid var(--line); }
.sheet-acts .btn-primary { width: 100%; }

/* Boutons */
.btn, .btn-primary {
  min-height: var(--tap); padding: 0 16px;
  border: 1px solid var(--line); background: var(--btn); font-weight: 650;
}
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn:disabled, .btn-primary:disabled { opacity: .45; cursor: default; }

/* Édition de tracé */
.edit-bar {
  position: absolute; left: 8px; right: 8px; bottom: 8px;
  display: grid; gap: 10px; padding: 10px;
  background: var(--panel); border: 1px solid var(--line);
}
.edit-top { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; }
.chips { display: flex; gap: 6px; overflow-x: auto; }
.chips button {
  flex: none; height: 38px; padding: 0 12px;
  border: 1px solid var(--line); background: var(--btn); font-size: 14px; font-weight: 600;
}
.chips button[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.edit-acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.edit-acts button { padding: 0 4px; font-size: 14px; }

.toast {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 5;
  max-width: calc(100% - 96px); padding: 10px 14px;
  background: var(--fg); color: var(--bg); font-size: 15px; font-weight: 600;
}

/* Panneau des tracés */
.panel {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 20; overflow-y: auto;
  padding: env(safe-area-inset-top) 16px calc(24px + env(safe-area-inset-bottom));
  background: var(--bg); user-select: text;
}
@media (min-width: 760px) { .panel { left: auto; width: 420px; border-left: 1px solid var(--line); } }
.panel-head {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; margin: 0 -16px 12px; padding: 0 16px;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.panel h2 { margin: 0; font-size: 20px; }
.panel h3 { margin: 24px 0 8px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 15px; }
.panel-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.panel-actions > * { flex: 1 1 auto; }
.track-list { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--line); }
.track-list li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.track-list li.active .tr-main strong { color: var(--accent); }
.track-list .empty { color: var(--muted); }
.tr-row { display: flex; align-items: flex-start; gap: 8px; }
.star {
  flex: none; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line); background: none; font-size: 22px; line-height: 1; color: var(--muted);
}
.star[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.tr-main {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; padding: 4px 0; background: none; border: 0; text-align: left;
}
.tr-main strong { font-size: 17px; }
.tr-main span { font-size: 14px; color: var(--muted); }
.tr-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tr-acts button { height: 36px; padding: 0 10px; border: 1px solid var(--line); background: var(--btn); font-size: 14px; font-weight: 600; }
.muted { margin: 6px 0; color: var(--muted); font-size: 14px; }
.qr { width: 200px; padding: 8px; background: #fff; }
.qr svg { display: block; width: 100%; height: auto; }
progress { width: 100%; height: 8px; accent-color: var(--accent); }
.check { display: flex; align-items: center; gap: 10px; min-height: var(--tap); font-weight: 600; }
.check input { width: 22px; height: 22px; accent-color: var(--accent); }

/* Écran de démarrage */
.start { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 30; display: grid; place-items: center; padding: 24px; background: var(--bg); }
.start-box { display: grid; gap: 12px; width: 100%; max-width: 360px; }
.start h1 { margin: 0 0 12px; font-size: 34px; letter-spacing: -0.02em; }
.start h2 { margin: 8px 0 0; font-size: 18px; }
.start .old-browser { margin: 8px 0 0; color: var(--bad); font-size: 16px; font-weight: 700; }
.start .mode-big { margin: 4px 0 8px; }
.setup > div { display: grid; gap: 8px; align-content: start; }
.start p { margin: -4px 0 8px; color: var(--muted); font-size: 14px; }
.start .btn-primary { min-height: 64px; font-size: 20px; }

/* Téléphone couché sur le guidon : c'est l'usage principal */
@media (orientation: landscape) {
  #app { grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; padding-bottom: env(safe-area-inset-bottom); }
  .topbar { grid-column: 1; grid-row: 1; }
  .tabs { grid-column: 2; grid-row: 1; border-top: 0; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); padding-bottom: 0; }
  .tabs button { height: 43px; padding: 0 14px; border-top: 0; border-bottom: 3px solid transparent; }
  .tabs button[aria-current="true"] { border-bottom-color: var(--accent); }
  .pager { grid-column: 1 / -1; grid-row: 2; }

  .page-route { grid-template-columns: 1fr minmax(260px, 36vw); grid-template-rows: 1fr; }
  .dash {
    grid-template-columns: 1fr; grid-template-rows: auto auto auto 1fr auto; align-items: start; gap: 8px;
    border-top: 0; border-left: 1px solid var(--line); overflow: auto;
  }
  .speed b { font-size: clamp(60px, 9.5vw, 150px); }
  .track-line { display: none; } /* le bandeau d'arrivée sur la carte le remplace */
  .bat { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
  .bat b { font-size: clamp(34px, 5.4vw, 66px); }
  .bat small { text-align: left; }
  .mode-bar { align-self: end; }
  .mode-bar button { height: 52px; }

  .tiles { grid-template-columns: repeat(4, 1fr); }
  .tile { padding: 5px 12px 7px; }
  .tile span { font-size: 12px; }
  .tile b { font-size: clamp(22px, 3.8vw, 44px); }
  .tile.big b { font-size: clamp(28px, 4.8vw, 56px); }

  .page-battery { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 0 24px; }
  .page-battery .b-col > h3:first-child { margin-top: 4px; }
  .bat-head b { font-size: clamp(48px, 9vw, 110px); }
  .mode-big { margin: 10px 0; }
  .mode-big button { height: 60px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .start { place-items: start center; overflow-y: auto; padding: 12px 24px; }
  .start-box { max-width: 520px; gap: 8px; }
  .start .btn-primary { min-height: 52px; }
  .setup { max-width: 760px; grid-template-columns: 1fr 1fr; gap: 0 28px; align-items: start; }
}

/* Diagnostic et erreurs (visibles sur le téléphone) */
.diag { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.diag.bad { color: var(--bad); font-size: 16px; font-weight: 700; }
#errors {
  position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 100; max-height: 40vh; overflow: auto;
  padding: 8px 12px; background: var(--bad); color: #fff; font-size: 14px; font-weight: 600;
}
#errors p { margin: 4px 0; }

/* Anciens Chrome (avant 2021) : pas d'espacement « gap » en flex. On l'imite avec des marges.
   aspect-ratio est apparu juste après, il sert à reconnaître ces navigateurs. */
@supports not (aspect-ratio: 1 / 1) {
  .topbar > * + *, .chips > * + *, .panel-actions > * + *, .tr-acts > * + *, .results li > * + *,
  .eta > * + *, .turn > * + *, .speed > * + *, .bat > * + *, .edit-top > * + *, .tr-row > * + * { margin-left: 8px; }
  .map-tools > * + * { margin-top: 8px; }
  .panel-actions > *, .tr-acts > * { margin-bottom: 6px; }
}