/* Le trajet de porte à porte, page « Bangkok to Chiang Mai » seulement.
   Chargée par la clé "assets" de data/page-bangkok-to-chiang-mai.json : les
   autres pages ne la téléchargent pas. Trois barres sur une même échelle
   d'heures. Sans cette feuille, il reste le titre, la légende et les phrases
   d'hypothèse, qui disent déjà tout. */
.journey {
  margin: var(--sp-2) 0;
  padding: var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
}
.journey__title {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.25;
  color: var(--c-primary);
}
.journey__legend {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  margin: 0 0 var(--sp-5); padding: 0; list-style: none;
  font-size: 14px; color: var(--c-muted);
}
.journey__legend li { display: flex; align-items: center; gap: var(--sp-2); }
.journey__key { display: inline-block; width: 22px; height: 12px; border-radius: 3px; }
.journey__modes { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-5); }
/* .prose p fixe 17 px : les paragraphes du bloc reprennent leur taille par une
   règle plus spécifique, sans !important. */
.journey .journey__head {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3);
  margin: 0 0 var(--sp-2); font-size: 16px;
}
.journey__head strong { color: var(--c-text); font-size: 16px; }
.journey__head span {
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  color: var(--c-primary); white-space: nowrap;
}
/* La barre : des étapes collées bout à bout, sur la largeur de l'échelle. */
.journey__bar { display: flex; height: 18px; }
.journey__seg { display: block; height: 100%; min-width: 3px; }
.journey__seg + .journey__seg { box-shadow: inset 2px 0 0 var(--c-surface); }
.journey__seg:first-child { border-radius: 4px 0 0 4px; }
.journey__seg:last-child  { border-radius: 0 4px 4px 0; }
/* Trois étapes, trois valeurs : le voyage lui-même en vert Doi plein, l'attente
   en hachures, les trajets de part et d'autre en vert clair. L'œil compare
   d'abord les longueurs totales, ensuite la part de chaque étape. */
.journey__seg--to   { background: var(--c-primary-soft); outline: 1px solid #c6d6ca; outline-offset: -1px; }
.journey__seg--wait { background: repeating-linear-gradient(135deg, #c6d6ca 0 3px, var(--c-surface) 3px 7px);
                      outline: 1px solid #c6d6ca; outline-offset: -1px; }
.journey__seg--ride { background: var(--c-primary); }
.journey .journey__note { margin: var(--sp-2) 0 0; font-size: 14.5px; line-height: 1.5; color: var(--c-muted); }
.journey__scale {
  position: relative; height: 22px; margin-top: var(--sp-5);
  border-top: 1px solid var(--c-border);
  font-size: 12.5px; color: var(--c-muted);
}
.journey__scale span { position: absolute; top: 4px; transform: translateX(-50%); white-space: nowrap; }
.journey__scale span:first-child { transform: none; }
.journey__scale span:last-child  { transform: translateX(-100%); }
@media (max-width: 639px) {
  .journey { padding: var(--sp-4); }
  .journey .journey__head { flex-wrap: wrap; }
}
@media (forced-colors: active) {
  .journey__seg--ride { background: CanvasText; }
  .journey__seg--to, .journey__seg--wait { outline-color: CanvasText; }
}

/* La photo du hero, composée pour cette page : l'avion vole dans le haut du
   cadre. Sur grand écran le hero est trois fois et demie plus large que haut,
   et le recadrage centré lui coupait la carlingue ; on remonte le cadre vers
   le ciel. Sur téléphone l'image ne déborde qu'en largeur, la règle n'y change
   rien. Feuille propre à la page : aucun autre hero n'est touché. */
.hero--shot .hero__media img { object-position: center 15%; }