/* Se déplacer — planificateur (maquette 11e) + sections mobilité */
.wpm-plan { display: flex; flex-direction: column; gap: 18px; padding-top: 22px; padding-bottom: 28px; }
.wpm-h1 { font-size: 38px; font-weight: 900; letter-spacing: -.03em; line-height: 1.05; }
.wpm-lead { font-size: 16px; line-height: 1.5; color: var(--wp-ink-2); max-width: 64ch; margin-top: -8px; }

.wpm-form {
  background: var(--wp-paper); border-radius: 14px; padding: 10px; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: stretch; scroll-margin-top: 90px;
}
.wpm-form .wpv-search__go { background: var(--wp-dark); padding: 0 28px; }
.wpm-form .wpv-search__go:hover { background: var(--wp-ink); }

.wpm-modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.wpm-mode {
  border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit;
  background: var(--wp-paper); border: 1px solid var(--wp-line); transition: transform .15s ease, box-shadow .15s ease;
}
.wpm-mode:hover { transform: translateY(-2px); box-shadow: var(--wp-shadow-pop); }
.wpm-mode--dark { background: var(--wp-dark); color: var(--wp-on-dark); border-color: transparent; }
.wpm-mode--acc { background: var(--wp-acc); color: #fff; border-color: transparent; }
.wpm-mode__k { font: 500 10px/1.3 var(--wp-mono); text-transform: uppercase; letter-spacing: .08em; opacity: .75; }
.wpm-mode__t { font-size: 18px; font-weight: 900; line-height: 1.2; }
.wpm-mode__d { font-size: 24px; font-weight: 900; letter-spacing: -.02em; line-height: 1.1; margin-top: 6px; }
.wpm-mode__s { font-size: 12px; line-height: 1.4; opacity: .8; }
.wpm-mode--paper .wpm-mode__k { color: var(--wp-muted); opacity: 1; }
.wpm-mode--paper .wpm-mode__s { color: var(--wp-ink-2); opacity: 1; }

.wpm-gares { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.wpm-gare {
  background: var(--wp-paper); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 3px;
  text-decoration: none; color: inherit; border: 1px solid transparent;
}
.wpm-gare:hover { border-color: var(--wp-line-2); }
.wpm-gare strong { font-size: 15px; font-weight: 800; }
.wpm-gare span { font-size: 12px; color: var(--wp-muted); line-height: 1.4; }
.wpm-note { font-size: 13px; color: var(--wp-muted); line-height: 1.5; }
.wpm-note a { color: var(--wp-ink-2); }
.wpm-note .wpm-note__a { color: var(--wp-acc-2); font-weight: 700; }

/* Navigation des sections */
.wpm-nav { position: sticky; top: 0; z-index: 20; background: var(--wp-bg); border-top: 1px solid var(--wp-line); border-bottom: 1px solid var(--wp-line); }
.wpm-nav .wp-chips { padding-top: 10px; padding-bottom: 10px; }
.wpm-nav .wp-chip { font-size: 13px; padding: 7px 14px; white-space: nowrap; }
.wpm-nav .wp-chip.is-current { background: var(--wp-ink); color: var(--wp-paper); border-color: var(--wp-ink); }

.wpm-body { display: flex; flex-direction: column; gap: 44px; padding-top: 32px; padding-bottom: 56px; }
.wpm-sec { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 70px; }
.wpm-sec__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.wpm-sec__head > div:first-child { display: flex; flex-direction: column; gap: 6px; }
.wpm-h2 { font-size: 28px; font-weight: 900; letter-spacing: -.02em; line-height: 1.1; }
.wpm-sec__lead { font-size: 15px; line-height: 1.55; color: var(--wp-ink-2); max-width: 70ch; }

.wpm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.wpm-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wpm-tool { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; }
.wpm-tool:hover { box-shadow: var(--wp-shadow-pop); }
.wpm-tool__t { font-size: 17px; font-weight: 900; line-height: 1.2; }
.wpm-tool__p { font-size: 13.5px; line-height: 1.5; color: var(--wp-ink-2); flex: 1; }
.wpm-tool__a { font-size: 13px; font-weight: 700; color: var(--wp-acc-2); }

.wpm-tips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wpm-tip { display: flex; flex-direction: column; gap: 8px; }
.wpm-tip.is-first { grid-column: 1 / -1; background: var(--wp-dark); color: var(--wp-on-dark); }
.wpm-tip.is-first .wpm-tip__p { color: inherit; opacity: .85; }
.wpm-tip.is-first .wp-btn--line { color: var(--wp-on-dark); border-color: rgba(255, 255, 255, .35); }
.wpm-tip__t { font-size: 18px; font-weight: 900; line-height: 1.2; }
.wpm-tip__p { font-size: 14px; line-height: 1.55; color: var(--wp-ink-2); }
.wpm-zone { display: flex; flex-direction: column; gap: 8px; }
.wpm-tipline { font-size: 14px; line-height: 1.5; background: var(--wp-paper); border-left: 4px solid var(--wp-acc); border-radius: 10px; padding: 12px 16px; }

/* Gares : carte + liste */
.wpm-stations { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
.wpm-stations__map { height: 440px; border-radius: 14px; overflow: hidden; background: var(--wp-paper); }
.wpm-stations__list { display: flex; flex-direction: column; gap: 6px; max-height: 440px; overflow-y: auto; padding-right: 2px; }
.wpm-st {
  display: flex; gap: 12px; align-items: center; text-align: left; background: var(--wp-paper); border: 1px solid transparent;
  border-radius: 12px; padding: 8px; cursor: pointer; font: inherit; color: inherit;
}
.wpm-st:hover, .wpm-st.is-active { border-color: var(--wp-ink); }
.wpm-st.is-active { box-shadow: inset 4px 0 0 var(--wp-acc); }
.wpm-st__ph { width: 56px; height: 56px; border-radius: 9px; overflow: hidden; flex-shrink: 0; background: var(--wp-bg); }
.wpm-st__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wpm-st__b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wpm-st__k { font: 500 10px/1.3 var(--wp-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--wp-acc-2); }
.wpm-st__n { font-size: 15px; font-weight: 800; line-height: 1.2; }
.wpm-st__m { font-size: 12px; color: var(--wp-muted); line-height: 1.35; }

.wpm-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wpm-detail { display: grid; grid-template-columns: 150px minmax(0, 1fr); overflow: hidden; scroll-margin-top: 70px; }
.wpm-detail:target { outline: 2px solid var(--wp-acc); outline-offset: 2px; }
.wpm-detail__ph { background: var(--wp-bg); }
.wpm-detail__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wpm-detail__b { padding: 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wpm-detail__t { font-size: 18px; font-weight: 900; line-height: 1.2; }
.wpm-detail__p { font-size: 13.5px; line-height: 1.5; color: var(--wp-ink-2); }
.wpm-detail__dl { margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.wpm-detail__dl div { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 8px; }
.wpm-detail__dl dt { font: 500 10px/1.8 var(--wp-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--wp-muted); }
.wpm-detail__dl dd { margin: 0; line-height: 1.45; }
.wpm-memo { font-size: 13px; color: var(--wp-muted); line-height: 1.5; }
.wpm-memo a { color: var(--wp-ink-2); font-weight: 600; }

.wpm-trails { height: 380px; border-radius: 14px; overflow: hidden; }
.wpm-prose { display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.6; color: var(--wp-ink-2); max-width: 72ch; }
.wpm-prose a { color: var(--wp-ink); font-weight: 600; }

.trails-map.is-failed::after { content: 'Carte indisponible pour le moment.'; display: flex; height: 100%; align-items: center; justify-content: center; font-size: 13px; color: var(--wp-muted); }

@media (max-width: 1100px) {
  .wpm-modes, .wpm-gares { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wpm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wpm-details { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .wpm-plan { gap: 14px; padding-top: 14px; padding-bottom: 20px; }
  .wpm-h1 { font-size: 28px; }
  .wpm-lead { font-size: 14.5px; margin-top: -4px; }
  .wpm-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .wpm-form .wpv-search__go { grid-column: 1 / -1; padding: 14px; }
  .wpm-modes { gap: 8px; }
  .wpm-mode { padding: 14px; gap: 4px; }
  .wpm-mode__t { font-size: 15px; }
  .wpm-mode__d { font-size: 20px; margin-top: 2px; }
  .wpm-mode__s { font-size: 11.5px; }
  .wpm-gares { gap: 8px; }
  .wpm-gare { padding: 12px; }
  .wpm-body { gap: 32px; padding-top: 22px; }
  .wpm-h2 { font-size: 22px; }
  .wpm-sec__lead { font-size: 14px; }
  .wpm-grid, .wpm-tips { grid-template-columns: minmax(0, 1fr); }
  .wpm-stations { grid-template-columns: minmax(0, 1fr); }
  .wpm-stations__map { height: 280px; }
  .wpm-stations__list { flex-direction: row; overflow-x: auto; max-height: none; padding-bottom: 4px; scroll-snap-type: x mandatory; }
  .wpm-st { flex: 0 0 78%; scroll-snap-align: start; }
  .wpm-detail { grid-template-columns: minmax(0, 1fr); }
  .wpm-detail__ph { aspect-ratio: 16 / 7; }
  .wpm-trails { height: 280px; }
}