/* MaBorne — design system « Cockpit nuit ».
   Référence : maquettes « Design system — Cockpit nuit » et « Téléphone paysage — support voiture » (844 × 390).
   Les tailles suivent la maquette téléphone à 390 px de petit côté, puis grandissent avec l'écran (vmin). */

:root {
  color-scheme: dark;

  /* Couleurs */
  --laque: #05080F;          /* fond */
  --cadran: #0C1422;         /* surface */
  --cadran-plus: #15213A;    /* surélevé */
  --carbone: #0B111C;
  --carrosserie: #1A62E0;    /* action principale uniquement */
  --ambiance: #4FD8FF;       /* donnée vive */
  --ambiance-bg: #0E2A3A;
  --charge: #C8F03C;         /* OK, libre */
  --charge-bg: #24300A;
  --vigilance: #FFB020;      /* estimé, marge juste */
  --vigilance-text: #FFD27A;
  --vigilance-bg: #33260A;
  --alerte: #FF4D5E;         /* critique */
  --alerte-text: #FF8A95;
  --alerte-bg: #3A0F18;
  --texte: #EAF2FF;
  --texte-2: #9FB2CC;
  --texte-3: #7D90AD;
  --filet: #1E2B42;

  /* Typographie : maquette téléphone (px) ÷ 3,9 = vmin */
  --font: Barlow, system-ui, sans-serif;
  --font-num: 'Barlow Semi Condensed', Barlow, sans-serif;
  --fs-label: clamp(13px, 4.1vmin, 20px);     /* 16 */
  --fs-battery: clamp(56px, 20.5vmin, 112px); /* 80 */
  --fs-metric: clamp(24px, 8.2vmin, 44px);    /* 32 */
  --fs-title: clamp(22px, 7.7vmin, 44px);     /* 30 */
  --fs-km: clamp(28px, 9.7vmin, 56px);        /* 38 */
  --fs-body: clamp(16px, 5.1vmin, 28px);      /* 20 */
  --fs-road: clamp(15px, 4.6vmin, 24px);      /* 18 */
  --fs-button: clamp(18px, 5.6vmin, 30px);    /* 22 */

  /* Espacement, rayons, cibles */
  --gap: clamp(8px, 2.6vmin, 16px);           /* 10 */
  --pad-y: clamp(12px, 5.1vmin, 28px);        /* 20 */
  --pad-x: clamp(16px, 10.3vmin, 48px);       /* 40 */
  --pad-in: clamp(16px, 6.2vmin, 32px);       /* 24 */
  --r-chip: 10px;
  --r-button: 16px;
  --r-card: 20px;
  --h-button: clamp(52px, 16.4vmin, 84px);    /* 64 */
  --h-footer: clamp(60px, 18.5vmin, 96px);    /* 72 */
  --mic: clamp(48px, 14.4vmin, 76px);         /* 56 */
  --glow: 0 0 12px 2px rgba(79, 216, 255, .55);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--laque);
  color: var(--texte);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
button, input, output { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--ambiance); outline-offset: 2px; }
[hidden] { display: none !important; }

.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.ico { width: 1em; height: 1em; flex-shrink: 0; }
.label { font-size: var(--fs-label); font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--texte-2); }
.carbon {
  background-color: var(--carbone);
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .35) 0 2px, transparent 2px 5px);
}

.level-ok { color: var(--charge); }
.level-tight { color: var(--vigilance); }
.level-critical { color: var(--alerte-text); }

/* ---------- Cockpit ---------- */

.cockpit {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.degraded-banner {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: clamp(36px, 10.3vmin, 56px);
  padding: 4px var(--pad-x);
  background: var(--vigilance-bg);
  border-bottom: 2px solid var(--vigilance);
  color: var(--vigilance-text);
  font-size: var(--fs-label);
  font-weight: 600;
}
.degraded-banner .ico { color: var(--vigilance); font-size: 1.3em; }

.cockpit-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(240px, 34%) minmax(0, 1fr);
}

/* Panneau véhicule */
.vehicle {
  min-height: 0;
  padding: var(--pad-y) var(--pad-in) calc(var(--pad-y) * .8) var(--pad-x);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  border-right: 1px solid var(--filet);
}
.panel-head { display: flex; align-items: center; justify-content: space-between; }
.source-real { color: var(--charge); }
.source-estimated { color: var(--vigilance); }
.source-manual { color: var(--texte-2); }

.battery-value { font-size: var(--fs-battery); font-weight: 700; line-height: .9; white-space: nowrap; }
.battery-value.is-estimated { color: var(--vigilance-text); }
.battery-value.is-alert { color: var(--alerte-text); }

.gauge { height: clamp(8px, 2.6vmin, 12px); border-radius: 6px; background: var(--cadran-plus); overflow: hidden; }
.gauge-fill { height: 100%; border-radius: inherit; background: var(--ambiance); box-shadow: var(--glow); transition: width .3s ease; }
.gauge-fill.is-estimated { background: repeating-linear-gradient(90deg, var(--vigilance) 0 10px, #8A5D0A 10px 14px); box-shadow: none; }
.gauge-fill.is-alert { background: var(--alerte); box-shadow: 0 0 12px 2px rgba(255, 77, 94, .5); }

.metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.metrics > div { display: flex; flex-direction: column; min-width: 0; }
.metric-label { font-size: var(--fs-label); color: var(--texte-2); }
.metric-value { display: flex; align-items: center; gap: .15em; font-size: var(--fs-metric); font-weight: 600; white-space: nowrap; }
.metric-value .ico { width: .62em; height: .62em; }

.vehicle-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.road-pill {
  border: 0;
  border-radius: 8px;
  padding: 6px 12px;
  background: var(--carrosserie);
  color: #FFFFFF;
  font-size: var(--fs-road);
  font-weight: 600;
}
.park-button {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--filet);
  border-radius: var(--r-chip);
  background: transparent;
  color: var(--texte-3);
  font-size: var(--fs-label);
  font-weight: 600;
}
.park-button:hover { color: var(--texte); border-color: var(--texte-3); }

/* Borne recommandée */
.borne {
  min-width: 0;
  min-height: 0;
  padding: var(--pad-y) var(--pad-x) calc(var(--pad-y) * .8) var(--pad-in);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  background: var(--cadran);
}
.borne-kicker { display: flex; align-items: center; gap: 10px; color: var(--ambiance); }
.borne-kicker.is-muted { color: var(--texte-2); }
.pipe { width: 28px; height: 4px; flex-shrink: 0; border-radius: 2px; background: currentColor; box-shadow: 0 0 12px 1px currentColor; }
.borne h1 {
  margin: 0;
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: 1.1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.borne-distance { display: flex; align-items: baseline; gap: 14px; }
.km { font-size: var(--fs-km); font-weight: 600; line-height: 1; }
.detour { font-size: var(--fs-body); color: var(--texte-2); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--r-chip);
  font-size: var(--fs-body);
  font-weight: 600;
}
.chip-ok { background: var(--charge-bg); color: var(--charge); }
.chip-tight { background: var(--vigilance-bg); color: var(--vigilance); }
.chip-unknown { background: var(--cadran-plus); color: var(--texte-2); }
.chip-power { background: var(--ambiance-bg); color: var(--ambiance); }

/* Boutons de guidage : l'application préférée en plein, l'autre en contour */
.guidance { display: flex; gap: 12px; margin-top: auto; }
.guide-button {
  flex: 1;
  height: var(--h-button);
  border-radius: var(--r-button);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: var(--fs-button);
  font-weight: 700;
  white-space: nowrap;
  transition: transform .1s ease;
}
.guide-button.primary { border: 0; background: var(--carrosserie); color: #FFFFFF; }
.guide-button.secondary { border: 2px solid var(--ambiance); background: transparent; color: var(--texte); }
.guide-button.secondary .ico { color: var(--ambiance); }
.guide-button:active { transform: scale(.98); }

/* Barre vocale */
.voice-bar {
  height: var(--h-footer);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px var(--pad-x) 6px calc(var(--pad-x) * .8);
  border-top: 1px solid var(--filet);
}
.mic-button {
  width: var(--mic);
  height: var(--mic);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--carrosserie);
  color: #FFFFFF;
}
.mic-button .ico { width: 46%; height: 46%; }
.voice-prompt { min-width: 0; font-size: var(--fs-body); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sources { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; font-size: var(--fs-label); color: var(--texte-2); white-space: nowrap; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--charge); }
.source-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--r-chip); background: var(--vigilance-bg); color: var(--vigilance-text); }
.is-stale { color: var(--vigilance-text); }
.demo-chip { padding: 3px 7px; border: 1px solid var(--vigilance); border-radius: 6px; color: var(--vigilance); font-size: .8em; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }

/* ---------- Feuille « À l'arrêt » ---------- */

.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 12px;
  background: rgba(5, 8, 15, .82);
}
.sheet {
  width: min(960px, 100%);
  max-height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 24px;
  border: 1px solid var(--filet);
  border-radius: var(--r-card);
}
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sheet h2 { margin: 4px 0 0; font-size: clamp(20px, 6.2vmin, 32px); font-weight: 700; }
.close-button { width: 48px; height: 48px; flex-shrink: 0; border: 1px solid var(--filet); border-radius: 50%; background: var(--cadran-plus); font-size: 28px; line-height: 1; }
.sheet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.sheet-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.field { display: flex; flex-direction: column; gap: 8px; color: var(--texte-2); font-size: 16px; }
.field-head { display: flex; justify-content: space-between; align-items: baseline; }
.field-head output { color: var(--ambiance); font-size: 22px; font-weight: 600; }
.hint { color: var(--texte-3); font-size: 14px; }
input[type=range] { width: 100%; height: 28px; margin: 0; accent-color: var(--ambiance); }
.segmented { display: flex; gap: 6px; padding: 5px; border-radius: 14px; background: var(--laque); }
.segmented button {
  flex: 1;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--texte-2);
  font-size: 16px;
  font-weight: 500;
}
.segmented button.active { background: var(--carrosserie); color: #FFFFFF; font-weight: 600; }
.trip-form input[type=text] {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--filet);
  border-radius: 12px;
  background: var(--laque);
  color: var(--texte);
  font: inherit;
  font-size: 16px;
}
.trip-form input[type=text]::placeholder { color: var(--texte-3); }
.trip-form input[type=text]:focus { outline: 2px solid var(--ambiance); outline-offset: 1px; }
.trip-actions { display: flex; gap: 8px; }
.action-button {
  flex: 1;
  min-height: 48px;
  border: 1px solid var(--filet);
  border-radius: 12px;
  background: var(--cadran-plus);
  color: var(--texte);
  font-size: 16px;
  font-weight: 600;
}
.action-button.primary { flex: 2; border-color: var(--carrosserie); background: var(--carrosserie); color: #FFFFFF; }
.action-button:disabled { opacity: 0.55; }
.hint.is-error { color: var(--alerte-text); }
.trip { padding-top: 12px; border-top: 1px solid var(--filet); color: var(--texte-2); font-size: 16px; }

.station-list { display: flex; flex-direction: column; gap: 8px; }
.station-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: center;
  padding: 12px 16px;
  border: 2px solid transparent;
  border-radius: 12px;
  background: var(--cadran-plus);
  text-align: left;
}
.station-row:hover { border-color: var(--filet); }
.station-row.is-current { border-color: var(--ambiance); }
.station-row strong { font-size: 18px; font-weight: 600; }
.station-row .meta { color: var(--texte-2); font-size: 14px; }
.row-margin { grid-row: span 2; display: flex; align-items: center; gap: 6px; font-size: 24px; font-weight: 700; }
.empty-state { margin: 0; padding: 14px; border: 2px solid var(--alerte); border-radius: 12px; background: var(--alerte-bg); color: var(--alerte-text); font-size: 16px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--h-footer) + 12px);
  z-index: 40;
  max-width: calc(100vw - 32px);
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--texte);
  color: var(--laque);
  font-size: 16px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 16px);
  transition: .25s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Adaptations ---------- */

/* Portrait : le téléphone n'est pas posé, on empile. */
@media (orientation: portrait) {
  .cockpit { overflow: auto; }
  .cockpit-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .vehicle { padding: var(--pad-y) var(--pad-in); border-right: 0; border-bottom: 1px solid var(--filet); }
  .borne { padding: var(--pad-y) var(--pad-in); }
  .voice-bar { padding: 6px var(--pad-in); }
  .voice-prompt { display: none; }
}

/* Écrans étroits ou très bas : on allège la barre vocale. */
@media (max-width: 700px) {
  .sheet-grid { grid-template-columns: 1fr; }
  .voice-prompt, .source-text { display: none; }
  .guide-button { gap: 6px; }
}
@media (max-height: 360px) {
  .degraded-banner span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .chips .chip-power { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}