* { box-sizing: border-box; margin: 0; padding: 0; }
body, html { height: 100%; font-family: 'Inter', system-ui, -apple-system, sans-serif; background: var(--bg-app); color: var(--text-primary); }
#app { display: flex; height: 100vh; width: 100vw; overflow: hidden; }

/* ═══════════════════════════════════════════
   THEME VARIABLES
   ═══════════════════════════════════════════ */
:root {
  --fs-xs: 0.65rem;
  --fs-sm: 0.75rem;
  --fs-md: 0.85rem;
  --fs-base: 1rem;
  --fs-lg: 1.2rem;
  --fs-xl: 1.6rem;
  --green: #22c55e;
  --green-hover: #16a34a;
  --purple: #a855f7;
  --purple-light: #d8b4fe;

  /* Dark (default) */
  --bg-app: #0f1419;
  --bg-sidebar: #151b23;
  --bg-card: #1a2129;
  --bg-input: #1e2733;
  --bg-button: #202933;
  --bg-hover: #253040;
  --bg-popup: #1a2129;
  --bg-map: #1b2330;
  --bg-highlight: #162018;
  --bg-terrain-pill: #182830;
  --bg-skeleton: #252525;
  --bg-empty-tip: #1a1a1a;
  --bg-toolbar-grad: linear-gradient(180deg, rgba(22,22,22,0.98) 0%, rgba(22,22,22,0.94) 78%, rgba(22,22,22,0) 100%);
  --bg-help-panel-grad: linear-gradient(180deg, rgba(29,29,29,0.98) 0%, rgba(22,22,22,0.98) 100%);
  --bg-selection-grad: linear-gradient(135deg, rgba(168,85,247,0.2) 0%, rgba(126,34,206,0.3) 100%);
  --bg-selected-card-grad: linear-gradient(135deg, rgba(168,85,247,0.18) 0%, rgba(36,18,58,0.95) 45%, rgba(26,16,38,1) 100%);
  --bg-selected-timeline: linear-gradient(180deg, rgba(78,31,110,0.68) 0%, rgba(26,16,38,0.95) 100%);
  --bg-clear-icon: rgba(216,180,254,0.16);
  --border-main: #2a3544;
  --border-subtle: #232e3c;
  --border-panel: #2d3a4a;
  --border-input: #364558;
  --border-terrain: #1e3a42;
  --text-primary: #eeeeee;
  --text-secondary: #dddddd;
  --text-body: #cfcfcf;
  --text-heading: #f3f3f3;
  --text-muted: #888888;
  --text-label: #999999;
  --text-dim: #666666;
  --text-hover: #cccccc;
  --text-on-accent: #0a0a0a;
  --text-on-dark: #ffffff;
  --text-error: #fca5a5;
  --scrollbar-thumb: #364558;
  --skeleton-shimmer: rgba(255,255,255,0.03);
  --focus-ring: rgba(34,197,94,0.15);
  --shadow-card: 0 2px 12px rgba(0,0,0,0.4);
  --shadow-elevated: 0 10px 28px rgba(0,0,0,0.42);
  --shadow-popup: 0 2px 8px rgba(0,0,0,0.3);
}

[data-theme="light"] {
  --bg-app: #f5f5f5;
  --bg-sidebar: #ffffff;
  --bg-card: #ffffff;
  --bg-input: #f9f9f9;
  --bg-button: #f0f0f0;
  --bg-hover: #f5f5f5;
  --bg-popup: #ffffff;
  --bg-map: #f2efe9;
  --bg-highlight: #f0fdf4;
  --bg-terrain-pill: #ecfeff;
  --bg-skeleton: #e5e5e5;
  --bg-empty-tip: #f5f5f5;
  --bg-toolbar-grad: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.94) 78%, rgba(255,255,255,0) 100%);
  --bg-help-panel-grad: linear-gradient(180deg, #fafafa 0%, #ffffff 100%);
  --bg-selection-grad: linear-gradient(135deg, rgba(168,85,247,0.1) 0%, rgba(126,34,206,0.15) 100%);
  --bg-selected-card-grad: linear-gradient(135deg, rgba(168,85,247,0.08) 0%, rgba(245,243,255,1) 100%);
  --bg-selected-timeline: linear-gradient(180deg, rgba(243,232,255,0.5) 0%, rgba(245,243,255,0.95) 100%);
  --bg-clear-icon: rgba(168,85,247,0.12);
  --border-main: #e0e0e0;
  --border-subtle: #e8e8e8;
  --border-panel: #e5e5e5;
  --border-input: #d0d0d0;
  --border-terrain: #bae6fd;
  --text-primary: #111111;
  --text-secondary: #333333;
  --text-body: #444444;
  --text-heading: #111111;
  --text-muted: #666666;
  --text-label: #888888;
  --text-dim: #999999;
  --text-hover: #333333;
  --text-on-accent: #ffffff;
  --text-on-dark: #111111;
  --text-error: #dc2626;
  --scrollbar-thumb: #c0c0c0;
  --skeleton-shimmer: rgba(0,0,0,0.04);
  --focus-ring: rgba(34,197,94,0.2);
  --shadow-card: 0 2px 12px rgba(0,0,0,0.08);
  --shadow-elevated: 0 10px 28px rgba(0,0,0,0.12);
  --shadow-popup: 0 2px 8px rgba(0,0,0,0.15);
}

/* ═══════════════════════════════════════════
   SIDEBAR LAYOUT (3 zones fixes)
   ═══════════════════════════════════════════ */
#sidebar {
  width: 420px;
  flex-shrink: 0;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-main);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#sidebar-header {
  padding: 1.2rem 1.2rem 0.6rem;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-sidebar);
  z-index: 2;
}

#sidebar-header h1 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--green);
  letter-spacing: -0.02em;
  margin-bottom: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.sidebar-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.8rem;
}

/* ── Help toggle ── */
#help-toggle {
  border: 1px solid rgba(255,255,255,0.08);
  background: var(--bg-button);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 0.45rem 0.85rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  transition: background 0.15s, border-color 0.15s;
}
#help-toggle:hover { background: var(--bg-hover); border-color: rgba(255,255,255,0.15); }
[data-theme="light"] #help-toggle { border-color: var(--border-input); }
[data-theme="light"] #help-toggle:hover { border-color: #c0c0c0; }

/* ── Help panel ── */
#help-panel {
  margin-bottom: 0.8rem;
  padding: 0.8rem 0.9rem;
  background: var(--bg-help-panel-grad);
  border: 1px solid var(--border-panel);
  border-radius: 0.8rem;
  color: var(--text-body);
  font-size: var(--fs-sm);
  line-height: 1.45;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease, margin 0.35s ease;
  padding: 0 0.9rem;
  margin-bottom: 0;
}
#help-panel:not([hidden]) {
  max-height: 300px;
  opacity: 1;
  padding: 0.8rem 0.9rem;
  margin-bottom: 0.8rem;
}
#help-panel h3 {
  margin-bottom: 0.45rem;
  font-size: var(--fs-md);
  color: var(--text-heading);
}
#help-panel ul {
  padding-left: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

/* ═══════════════════════════════════════════
   ERROR BANNER
   ═══════════════════════════════════════════ */
.error-banner {
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.3);
  border-left: 3px solid #ef4444;
  padding: 0.7rem 0.9rem;
  border-radius: 0.5rem;
  margin-bottom: 0.6rem;
  font-size: var(--fs-sm);
  color: var(--text-error);
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  animation: errorSlideIn 0.3s ease-out;
}
@keyframes errorSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
[data-theme="light"] .error-banner { background: rgba(239,68,68,0.08); }
.error-icon { color: #ef4444; flex-shrink: 0; margin-top: 1px; }
.error-message { flex: 1; }
.error-dismiss, #error-dismiss {
  background: none;
  border: none;
  color: var(--text-error);
  cursor: pointer;
  padding: 2px;
  touch-action: manipulation;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.error-dismiss:hover, #error-dismiss:hover { opacity: 1; }
#error-retry {
  background: rgba(239,68,68,0.2);
  border: 1px solid rgba(239,68,68,0.4);
  color: var(--text-error);
  padding: 0.3rem 0.6rem;
  border-radius: 0.35rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  white-space: nowrap;
}
#error-retry:hover { background: rgba(239,68,68,0.3); }

/* ═══════════════════════════════════════════
   FORM
   ═══════════════════════════════════════════ */
#route-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.form-label-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--text-label);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.form-label-wrap > span {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.form-label-wrap small {
  color: var(--text-muted);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}
.label-icon { color: var(--text-muted); flex-shrink: 0; }
.label-icon-start { color: var(--green); }
.label-icon-end { color: var(--purple-light); }
.label-icon-via { color: #f59e0b; }
.label-icon-detour { color: #67e8f9; }

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.input-wrapper input { width: 100%; padding-right: 2.2rem; }

.input-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  border-radius: 4px;
  transition: color 0.15s;
  min-width: 44px;
  min-height: 44px;
}
.input-clear:hover { color: var(--text-hover); }

#route-form input,
#route-form textarea {
  padding: 0.55rem 0.7rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border-input);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: var(--fs-md);
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  resize: vertical;
  min-height: 2.5rem;
}
#route-form textarea { min-height: 3rem; }
#route-form input:focus,
#route-form textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 2px var(--focus-ring);
}
.field-hint, .input-hint {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  padding-left: 2px;
  margin-top: -0.15rem;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}

/* ── Submit button ── */
#route-form button[type="submit"],
#submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.2rem;
  border-radius: 0.5rem;
  border: none;
  background: var(--green);
  color: var(--text-on-accent);
  font-weight: 700;
  cursor: pointer;
  font-size: var(--fs-md);
  font-family: inherit;
  margin-top: 0.2rem;
  width: 100%;
  transition: background 0.15s, transform 0.05s, box-shadow 0.15s;
  touch-action: manipulation;
  min-height: 44px;
}
#route-form button[type="submit"]:hover,
#submit-btn:hover {
  background: var(--green-hover);
  box-shadow: 0 2px 8px rgba(34,197,94,0.3);
}
#route-form button[type="submit"]:active,
#submit-btn:active { transform: scale(0.98); }
#route-form button[type="submit"]:disabled,
#submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ── Spinner ── */
.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0,0,0,0.2);
  border-top-color: var(--text-on-accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════
   SKELETON LOADING
   ═══════════════════════════════════════════ */
.skeleton-card {
  background: var(--bg-card);
  border-radius: 0.55rem;
  padding: 0.8rem;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--border-main);
  min-height: 72px;
}
.skeleton-card::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, var(--skeleton-shimmer), transparent);
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer { to { left: 100%; } }
.skeleton-line {
  height: 10px;
  border-radius: 4px;
  background: var(--bg-skeleton);
  margin-bottom: 0.5rem;
}
.skeleton-line:last-child { margin-bottom: 0; }
.skeleton-line.short { width: 40%; }
.skeleton-line.medium { width: 65%; }
.skeleton-line.long { width: 85%; }
.skeleton-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-skeleton);
  margin-bottom: 0.4rem;
}

/* ═══════════════════════════════════════════
   ZONE RÉSULTATS (scrollable)
   ═══════════════════════════════════════════ */
#sidebar-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.8rem 1rem 0.6rem;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

/* ── Empty state ── */
#empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1.5rem;
  color: var(--text-dim);
}
#empty-state svg.empty-icon { margin-bottom: 1.2rem; opacity: 0.4; width: 64px; height: 64px; }
#empty-state h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--fs-lg);
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
#empty-state p {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  line-height: 1.5;
  max-width: 300px;
  margin-bottom: 0.8rem;
}
.empty-tip {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  background: var(--bg-empty-tip);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border-main);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.empty-tip svg { color: var(--text-muted); flex-shrink: 0; }

#results { display: none; }
#results.active { display: block; }
/* Show results container when empty state is visible */
#results:has(#empty-state:not([hidden])) { display: block; }
#results:has(#empty-state:not([hidden])) .results-toolbar { display: none; }
/* JS fallback for browsers without :has() support */
#results.show-empty { display: block; }
#results.show-empty .results-toolbar { display: none; }

/* ── Results toolbar ── */
.results-toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin: 0 -1rem 0.6rem;
  padding: 0.55rem 1rem 0.65rem;
  background: var(--bg-toolbar-grad);
  backdrop-filter: blur(8px);
}
.results-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
#results h2 {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
#result-count {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  font-weight: 500;
  background: var(--bg-input);
  padding: 0.25rem 0.55rem;
  border-radius: 1rem;
}
#selection-count {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--fs-sm);
  color: #f3e8ff;
  font-weight: 700;
  background: var(--bg-selection-grad);
  border: 1px solid rgba(216,180,254,0.35);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 4px 12px rgba(0,0,0,0.14);
  white-space: nowrap;
  min-height: 30px;
}
#selection-count::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--purple-light);
  box-shadow: 0 0 8px rgba(216,180,254,0.5);
}
#selection-count[hidden] { display: none !important; }

#clear-selection {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  border: 1px solid rgba(216,180,254,0.28);
  background: rgba(168,85,247,0.12);
  color: #eadcff;
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
  white-space: nowrap;
  touch-action: manipulation;
  min-height: 44px;
}
#clear-selection::before {
  content: '';
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-clear-icon);
}
#clear-selection:hover {
  background: rgba(168,85,247,0.18);
  border-color: rgba(216,180,254,0.5);
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}
#clear-selection:active { transform: scale(0.98); }
#clear-selection[hidden] { display: none !important; }

/* ═══════════════════════════════════════════
   LISTE / CARTES
   ═══════════════════════════════════════════ */
#result-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cache-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-main);
  border-radius: 0.55rem;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  opacity: 0;
  transform: translateY(12px);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.cache-card.card-entered {
  opacity: 1;
  transform: translateY(0);
}
.cache-card:hover {
  background: var(--bg-input);
  border-color: var(--border-input);
  box-shadow: var(--shadow-card);
}
.cache-card.selected {
  border-left: 3px solid var(--purple);
  background: var(--bg-selected-card-grad);
  border-color: rgba(168,85,247,0.65);
  box-shadow: 0 0 0 1px rgba(168,85,247,0.42), var(--shadow-elevated), inset 0 1px 0 rgba(255,255,255,0.04);
  transform: translateX(4px);
  opacity: 1;
}
.cache-card.selected::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--purple-light) 0%, var(--purple) 55%, #7e22ce 100%);
  box-shadow: 0 0 14px rgba(168,85,247,0.65);
}
.cache-card.selected::after {
  content: 'Sélectionné';
  position: absolute;
  top: 0.55rem; right: 0.7rem;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f3e8ff;
  background: rgba(168,85,247,0.18);
  border: 1px solid rgba(216,180,254,0.45);
  border-radius: 999px;
  padding: 0.16rem 0.4rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
[data-theme="light"] .cache-card.selected::after {
  color: #7e22ce;
  background: rgba(168,85,247,0.12);
  border-color: rgba(168,85,247,0.3);
}
.cache-card.selected .cache-name,
.cache-card.selected .cache-total { color: #f5ecff; }
.cache-card.selected .cache-sub,
.cache-card.selected .cache-pos,
.cache-card.selected .timeline-pos { color: #d8c4ef; }
.cache-card.selected .cache-timeline { background: var(--bg-selected-timeline); }
.cache-card.selected .timeline-track { background: rgba(216,180,254,0.22); }
.cache-card.selected .timeline-dot {
  box-shadow: 0 0 0 3px rgba(216,180,254,0.16), 0 0 18px rgba(168,85,247,0.45);
}
.cache-card.selected .cpill { border-color: rgba(216,180,254,0.32); }
.cache-card.selected .cache-surch { box-shadow: 0 0 0 1px rgba(255,255,255,0.06); }
.cache-card.highlight {
  background: var(--bg-highlight);
  border-color: var(--green);
}

/* ── Timeline strip ── */
.cache-timeline {
  position: relative;
  height: 2.6rem;
  background: linear-gradient(180deg, var(--bg-sidebar) 0%, var(--bg-card) 100%);
  border-bottom: 1px solid var(--border-main);
  border-radius: 0.55rem 0.55rem 0 0;
  overflow: visible;
}
.timeline-track {
  position: absolute;
  top: 50%;
  left: 1rem; right: 1rem;
  height: 2px;
  background: var(--border-input);
  border-radius: 2px;
  transform: translateY(-50%);
}
[data-theme="light"] .timeline-track { background: #d0d0d0; }
.timeline-fill {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--green) 0%, var(--purple) 100%);
  opacity: 0.6;
}
.timeline-dot-wrap {
  position: relative;
  height: 100%;
  margin: 0 1rem;
}
.timeline-dot {
  position: absolute;
  top: 50%;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--bg-card);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 900;
  color: var(--text-on-accent);
  z-index: 3;
}
[data-theme="light"] .timeline-dot { border-color: #ffffff; }
.timeline-pos {
  position: absolute;
  bottom: 2px;
  transform: translateX(-50%);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap;
}

/* ── Main content row ── */
.cache-main {
  display: flex;
  gap: 0.75rem;
  padding: 0.65rem 0.8rem;
}
.cache-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 2.2rem;
  gap: 0.15rem;
}
.cache-rank {
  width: 1.9rem; height: 1.9rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--text-on-accent);
  line-height: 1;
}
.cache-pos {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap;
}
.cache-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.cache-name {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--text-heading);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.cache-name:hover { color: var(--text-on-dark); }
.cache-sub {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cache-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0.2rem;
  min-width: 4.5rem;
}
.cache-total {
  font-size: var(--fs-md);
  font-weight: 700;
  color: #4ade80;
  white-space: nowrap;
}
.cache-surch {
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border-radius: 0.35rem;
  white-space: nowrap;
}
.cache-surch.zero { background: #14532d; color: #4ade80; }
.cache-surch.low  { background: #064e3b; color: #6ee7b7; }
.cache-surch.mid  { background: #4c1d95; color: #c4b5fd; }
.cache-surch.high { background: #7f1d1d; color: #fca5a5; }
[data-theme="light"] .cache-surch.zero { background: #dcfce7; color: #15803d; }
[data-theme="light"] .cache-surch.low  { background: #d1fae5; color: #065f46; }
[data-theme="light"] .cache-surch.mid  { background: #ede9fe; color: #7c3aed; }
[data-theme="light"] .cache-surch.high { background: #fee2e2; color: #dc2626; }

.cache-microbar {
  width: 100%;
  height: 3px;
  background: var(--border-main);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 0.15rem;
}
.cache-microbar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.35s ease;
}
.cache-pills {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.15rem;
  flex-wrap: wrap;
}
.cpill {
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 0.08rem 0.3rem;
  border-radius: 0.25rem;
  border: 1px solid;
  white-space: nowrap;
}
.cpill-d { background: rgba(255,255,255,0.05); }
[data-theme="light"] .cpill-d { background: rgba(0,0,0,0.04); }
.cpill-t { background: var(--bg-terrain-pill); color: #67e8f9; border-color: var(--border-terrain); }
[data-theme="light"] .cpill-t { background: #ecfeff; color: #0891b2; border-color: #bae6fd; }
.cpill-th { background: var(--border-subtle); color: var(--text-secondary); border-color: var(--border-input); }

/* ── Classification ── */
#result-list li.sur-la-route { border-left: 3px solid #4ade80; }
#result-list li.detour-item  { border-left: 3px solid var(--purple); }
#result-list li.category-sep {
  display: flex; align-items: center; justify-content: center;
  padding: 0.3rem 0; background: transparent; border: none; pointer-events: none;
}
#result-list li.category-sep span {
  font-size: var(--fs-sm); color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 0.08em; background: var(--bg-card); padding: 2px 10px;
  border-radius: 10px; font-weight: 600;
}
#result-list div.result-hint {
  font-size: var(--fs-sm); color: var(--text-dim); padding: 0.3rem 0;
  text-align: center; letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════════
   AUTOCOMPLETE
   ═══════════════════════════════════════════ */
ul.autocomplete-list {
  display: none;
  list-style: none;
  background: var(--bg-card);
  border: 1px solid var(--border-input);
  border-radius: 0.35rem;
  margin-top: 0.15rem;
  max-height: 10rem;
  overflow-y: auto;
  z-index: 10;
}
[data-theme="light"] ul.autocomplete-list {
  background: #ffffff;
  border-color: #d0d0d0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
ul.autocomplete-list.active { display: block; }
ul.autocomplete-list li.suggestion {
  padding: 0.55rem 0.7rem;
  cursor: pointer;
  font-size: var(--fs-md);
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  transition: background 0.1s;
  min-height: 44px;
}
ul.autocomplete-list li.suggestion:hover { background: var(--bg-hover); }
ul.autocomplete-list li.suggestion.focused {
  background: var(--bg-hover);
  outline: 1px solid rgba(34,197,94,0.3);
}
ul.autocomplete-list li.suggestion { position: relative; }
ul.autocomplete-list li.suggestion::after {
  content: '';
  display: block;
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--text-dim);
  border-bottom: 1.5px solid var(--text-dim);
  transform: rotate(-45deg);
  position: absolute;
  right: 12px;
  top: 50%;
  margin-top: -4px;
  opacity: 0;
  transition: opacity 0.15s;
}
ul.autocomplete-list li.suggestion.focused::after,
ul.autocomplete-list li.suggestion:hover::after { opacity: 1; }

/* ═══════════════════════════════════════════
   FLOATING TRIP SUMMARY PANEL
   ═══════════════════════════════════════════ */
.trip-summary-panel {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  right: auto;
  z-index: 1000;
  width: 340px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border-main);
  border-radius: 1rem;
  padding: 1rem 1.1rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(168,85,247,0.15);
  backdrop-filter: blur(12px);
  animation: panelSlideIn 0.3s ease-out;
  touch-action: manipulation;
}
@keyframes panelSlideIn {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
[data-theme="light"] .trip-summary-panel {
  box-shadow: 0 8px 32px rgba(0,0,0,0.15), 0 0 0 1px rgba(168,85,247,0.1);
  border-color: #e0e0e0;
}
.trip-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
}
.trip-panel-title {
  font-size: var(--fs-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--purple-light);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.trip-panel-stats {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.stat-pill {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--purple-light);
  background: rgba(168,85,247,0.12);
  padding: 0.15rem 0.5rem;
  border-radius: 0.35rem;
  border: 1px solid rgba(168,85,247,0.2);
  white-space: nowrap;
}
[data-theme="light"] .stat-pill {
  color: #7e22ce;
  background: rgba(168,85,247,0.08);
}
#trip-panel-close {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
  min-width: 32px;
  min-height: 32px;
}
#trip-panel-close:hover { color: var(--text-primary); background: var(--bg-hover); }

.trip-panel-stats-row {
  display: flex;
  gap: 0.8rem;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-bottom: 0.6rem;
}

.trip-panel-actions {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.7rem;
  flex-wrap: wrap;
}
.trip-panel-actions button,
.trip-panel-actions a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid rgba(216,180,254,0.25);
  background: rgba(168,85,247,0.12);
  color: #f3e8ff;
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  touch-action: manipulation;
  min-height: 36px;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.trip-panel-actions button:hover,
.trip-panel-actions a:hover {
  background: rgba(168,85,247,0.18);
  border-color: rgba(216,180,254,0.42);
}
.trip-panel-actions svg { flex-shrink: 0; }

#trip-panel-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 16rem;
  overflow-y: auto;
  padding-right: 0.2rem;
  padding-left: 0.4rem;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}
#trip-panel-steps li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: var(--fs-md);
  padding: 0.45rem 0;
  position: relative;
  color: var(--text-primary);
}
#trip-panel-steps li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 13px;
  top: 2.2rem;
  bottom: -0.15rem;
  width: 2px;
  background: rgba(168,85,247,0.2);
  border-radius: 1px;
}
.trip-panel-step-index {
  width: 1.4rem; height: 1.4rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(168,85,247,0.22);
  color: #f3e8ff;
  font-weight: 800;
  font-size: var(--fs-xs);
  flex-shrink: 0;
}
[data-theme="light"] .trip-panel-step-index { background: rgba(168,85,247,0.12); }

/* ═══════════════════════════════════════════
   FOOTER / STATS
   ═══════════════════════════════════════════ */
#sidebar-footer {
  flex-shrink: 0;
  padding: 0.7rem 1.2rem;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-sidebar);
  font-size: var(--fs-base);
  color: var(--text-dim);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: stretch;
}
#sidebar-footer strong { color: var(--text-label); }

/* Remove old trip summary styles */
#trip-summary, .trip-summary-header, .trip-summary-title,
.trip-summary-stats-inline, .trip-summary-actions,
#trip-summary-stats, #trip-summary-steps, .trip-step-index {
  display: none;
}

/* ── scrollbar ── */
#sidebar-body::-webkit-scrollbar { width: 5px; }
#sidebar-body::-webkit-scrollbar-track { background: transparent; }
#sidebar-body::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }

/* ═══════════════════════════════════════════
   MAP
   ═══════════════════════════════════════════ */
#map { flex: 1; background: var(--bg-map); position: relative; }

.leaflet-popup-content-wrapper { background: var(--bg-popup); color: var(--text-primary); border-radius: 0.5rem; }
.leaflet-popup-content { margin: 0.8rem 1rem; font-size: var(--fs-md); }
.leaflet-popup-tip { background: var(--bg-popup); }
[data-theme="light"] .leaflet-popup-content-wrapper { box-shadow: 0 2px 12px rgba(0,0,0,0.15); }

/* marqueurs Poi'z */
.cache-poiz-marker-wrap { background: transparent; border: none; }
.poiz-shell {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; box-shadow: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  overflow: visible;
}
.poiz-shell img {
  display: block; object-fit: contain;
  filter: drop-shadow(var(--shadow-popup));
}
.poiz-shell:hover { transform: scale(1.08); }
.poiz-shell.is-selected {
  transform: scale(1.08);
  border-radius: 50%;
  border-color: rgba(216,180,254,0.92);
  background: radial-gradient(circle at 30% 30%, rgba(243,232,255,0.3), rgba(88,28,135,0.95));
  box-shadow: 0 0 0 4px rgba(168,85,247,0.18), 0 0 22px rgba(168,85,247,0.55), var(--shadow-elevated);
  overflow: hidden;
}
[data-theme="light"] .poiz-shell.is-selected {
  background: radial-gradient(circle at 30% 30%, rgba(243,232,255,0.5), rgba(168,85,247,0.15));
  border-color: rgba(168,85,247,0.6);
  box-shadow: 0 0 0 3px rgba(168,85,247,0.15), 0 0 16px rgba(168,85,247,0.25);
}
.poiz-shell.is-selected img {
  filter: drop-shadow(0 0 10px rgba(243,232,255,0.42));
}

/* ── Geolocate button ── */
.geolocate-btn {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 1000;
  width: 44px; height: 44px;
  border-radius: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-input);
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
  touch-action: manipulation;
  transition: background 0.15s, border-color 0.15s;
}
.geolocate-btn:hover { background: var(--bg-hover); border-color: var(--border-input); }
.geolocate-btn:active { transform: scale(0.95); }
.geolocate-btn.active {
  background: rgba(34,197,94,0.15);
  border-color: var(--green);
  color: var(--green);
}
[data-theme="light"] .geolocate-btn {
  background: #ffffff;
  border-color: #d0d0d0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
[data-theme="light"] .geolocate-btn:hover { background: #f5f5f5; border-color: #c0c0c0; }
[data-theme="light"] .geolocate-btn.active { background: rgba(34,197,94,0.1); }

/* ── User position pulse dot ── */
.user-position-marker { position: relative; }
.user-position-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--green);
  border: 3px solid var(--text-on-dark);
  box-shadow: 0 0 8px rgba(34,197,94,0.4);
}
.user-position-pulse {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(34,197,94,0.2);
  animation: posPulse 2s ease-out infinite;
}
@keyframes posPulse {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

/* ── marqueurs d'etape "Via" ── */
.via-marker { z-index: 800 !important; }

/* ═══════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .cache-card { opacity: 1 !important; transform: none !important; }
  .user-position-pulse { display: none; }
}

/* ═══════════════════════════════════════════
   THEME TOGGLE BUTTON
   ═══════════════════════════════════════════ */
.sidebar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
#theme-toggle {
  border: 1px solid rgba(255,255,255,0.08);
  background: var(--bg-button);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 0.45rem 0.65rem;
  font-size: var(--fs-sm);
  cursor: pointer;
  touch-action: manipulation;
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  transition: background 0.15s, border-color 0.15s;
}
#theme-toggle:hover { background: var(--bg-hover); border-color: rgba(255,255,255,0.15); }
/* Show moon in dark mode, hide sun */
#theme-toggle .icon-sun { display: none; }
#theme-toggle .icon-moon { display: block; }
/* In light mode: show sun, hide moon */
[data-theme="light"] #theme-toggle .icon-sun { display: block; }
[data-theme="light"] #theme-toggle .icon-moon { display: none; }
[data-theme="light"] #theme-toggle { border-color: var(--border-input); }
[data-theme="light"] #theme-toggle:hover { border-color: #c0c0c0; }

/* ═══════════════════════════════════════════
   TOAST NOTIFICATION
   ═══════════════════════════════════════════ */
.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(1rem);
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-main);
  border-radius: 0.75rem;
  padding: 0.75rem 1.2rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.toast svg { color: var(--green); flex-shrink: 0; }

/* ═══════════════════════════════════════════
   FOCUS VISIBLE (keyboard navigation)
   ═══════════════════════════════════════════ */
#route-form button[type="submit"]:focus-visible,
#help-toggle:focus-visible,
#theme-toggle:focus-visible,
#focus-trip:focus-visible,
#export-gmaps:focus-visible,
#copy-itinerary:focus-visible,
#clear-selection:focus-visible,
.geolocate-btn:focus-visible,
#geolocate-btn:focus-visible,
.input-clear:focus-visible,
#error-dismiss:focus-visible,
.error-dismiss:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  box-shadow: none;
}
.cache-card:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
.cache-name:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ═══════════════════════════════════════════
   Mobile
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
  #app { flex-direction: column; }
  #sidebar {
    width: 100%;
    height: 55vh;
    border-right: none;
    border-bottom: 1px solid var(--border-main);
  }
  #sidebar-header { padding: 0.8rem 1rem 0.4rem; }
  #sidebar-body { padding: 0.6rem 1rem; }
  .cache-card { padding: 0.55rem 0.65rem; gap: 0.55rem; }
  .cache-rank { width: 1.7rem; height: 1.7rem; font-size: var(--fs-sm); }
  .cache-total { font-size: 0.75rem; }

  /* Touch targets >= 44px on mobile */
  #route-form input,
  #route-form textarea {
    min-height: 44px;
    padding: 0.65rem 0.7rem;
    font-size: 1rem;
  }
  #route-form button[type="submit"] {
    min-height: 48px;
    font-size: var(--fs-md);
  }
  #help-toggle, #theme-toggle { min-height: 48px; }
  .results-toolbar-actions button { min-height: 44px; }
  ul.autocomplete-list li.suggestion { min-height: 44px; }
  .geolocate-btn { width: 48px; height: 48px; }
  .trip-panel-actions button,
  .trip-panel-actions a { min-height: 44px; }

  /* Floating panel full-width on mobile */
  .trip-summary-panel {
    left: 0.75rem;
    right: 0.75rem;
    width: auto;
    bottom: 0.75rem;
    max-height: 50vh;
  }

  #empty-state { padding: 1.5rem 1rem; }
  #empty-state svg.empty-icon { width: 60px; height: 60px; }
}