/* The home page since 9 Nov. 2026: the travel band (home/_voyage) and « Par où commencer » in two families.
   The band is a rounded navy panel like the header of « Trouver mon voyage », with the globe of its results
   (trip_globe.css); the departure field is the explorer's. */

.home-voyage { padding: 44px 0 0; background: #f6f8fc; scroll-margin-top: 88px; }
.home-voyage + .home-paths { padding-top: 44px; }

.home-voyage__panel { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-navy); color: #fff; }
.home-voyage__copy { padding: 40px 40px 30px; }
.home-voyage__copy h2 { margin: 0 0 12px; color: #fff; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.15rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.035em; text-wrap: balance; }
.home-voyage__description { margin: 0; max-width: 34rem; color: #dae3f3; font-size: 1rem; line-height: 1.6; }

.home-voyage__form { display: flex; gap: 10px; margin: 22px 0 0; }
.home-voyage__field { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: 10px; min-height: 48px; padding: 0 6px 0 16px; border: 1px solid #fff; border-radius: 14px; background: #fff; color: var(--color-navy); cursor: pointer; }
.home-voyage__field:focus-within { outline: 3px solid var(--color-cyan); outline-offset: 2px; }
.home-voyage__field-label { flex: 0 0 auto; color: #52617a; font-size: .875rem; font-weight: 500; }
.home-voyage__field select { flex: 1 1 auto; min-width: 0; min-height: 46px; border: 0; background: transparent; color: var(--color-navy); font: inherit; font-weight: 700; cursor: pointer; outline: none; }
.home-voyage__form .home-voyage__submit { flex: 0 0 auto; min-height: 48px; padding: 0 22px; border-radius: 14px; }

.home-voyage__alt { margin: 14px 0 0; color: #a9b6cc; font-size: .875rem; }
.home-voyage__alt a { color: #93c5fd; font-weight: 700; text-underline-offset: 3px; white-space: nowrap; }
.home-voyage__alt a:hover { color: #fff; }

.home-voyage__fares { padding: 16px 40px 18px; border-top: 1px solid rgb(255 255 255 / 12%); background: rgb(11 23 48 / 86%); }
.home-voyage__fares-title { margin: 0 0 10px; color: #a9b6cc; font-size: .8125rem; font-weight: 600; }
.home-voyage__fare-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 12px; margin: 0; padding: 0; list-style: none; }
.home-voyage__fare-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 8px 10px 8px 8px; border-radius: 12px; scroll-margin-top: 96px; transition: background-color 160ms cubic-bezier(0.16, 1, 0.3, 1); }
.home-voyage__fare-list li:hover, .home-voyage__fare-list li:target { background: rgb(255 255 255 / 9%); }
.home-voyage__pin { display: grid; grid-row: span 2; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: #fff; color: var(--color-navy); font-size: .75rem; font-weight: 800; line-height: 1; }
.home-voyage__city { font-size: .9375rem; font-weight: 700; line-height: 1.3; }
.home-voyage__points { color: #dae3f3; font-size: .8125rem; font-variant-numeric: tabular-nums; line-height: 1.35; }
.home-voyage__fares-note { margin: 10px 0 0; max-width: none; color: #a9b6cc; font-size: .75rem; line-height: 1.45; }

@media (min-width: 44.01rem) {
  .home-voyage__copy { max-width: 44%; }
  .home-voyage__globe { position: absolute; inset: 0; z-index: -2; }
  .home-voyage__globe .trip-globe { position: absolute; inset: 0; }
  /* The presenter keeps every point between 170 and 690 of its 760 units: framed here on the right of the panel, clear
     of the text (44 %) and of the price list, with room for a city name right of the easternmost point. */
  .home-voyage__globe .trip-globe .trip-globe__svg { position: absolute; top: 0; left: 28%; width: 71%; height: auto; margin-top: -3%; aspect-ratio: 760 / 400; overflow: visible; }
  .home-voyage__panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--color-navy) 0, var(--color-navy) 32%, rgb(11 23 48 / 0) 50%); pointer-events: none; }
}

@media (max-width: 44rem) {
  .home-voyage { padding-top: 28px; }
  .home-voyage + .home-paths { padding-top: 32px; }
  .home-voyage__copy { padding: 18px 18px 20px; }
  .home-voyage__form { flex-wrap: wrap; }
  .home-voyage__field { flex-basis: 100%; }
  .home-voyage__form .home-voyage__submit { flex: 1 1 100%; }
  .home-voyage__fares { padding: 14px 18px 16px; }
  .home-voyage__fare-list { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .home-voyage__fare-list li { grid-template-columns: auto minmax(0, 1fr) auto; padding: 7px 4px; }
  .home-voyage__pin { grid-row: auto; }
  .home-voyage__points { text-align: right; }
}

/* The routes draw themselves once the band is on screen (home_voyage_controller.js sets the attribute while it waits). */
.home-voyage__panel[data-home-voyage-waiting] .trip-globe * { animation-play-state: paused !important; }

/* « Par où commencer » in two families of three choices. */
.home-paths__family + .home-paths__family { margin-top: 30px; }
.home-paths__family-title { margin: 0 0 12px; color: var(--color-navy); font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; }
@media (min-width: 62rem) {
  .home-paths__grid.home-paths__grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Three columns: the bonus ribbon keeps its whole amount, without « , 12 premiers mois ». */
  .home-paths__grid--three .home-path__offer-period { display: none; }
}

/* Phones: a shortcut to the travel band, which comes after the strategy example. */
.home-intro__jump { display: none; }
@media (max-width: 44rem) {
  .home-intro__jump { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; color: #93c5fd; font-size: .875rem; font-weight: 700; text-underline-offset: 3px; }
}