/* Écrans étroits : le traitement mobile de chaque écran, puis les derniers réglages de la carte de réservation.
   Feuille 02 sur 08 : les pages les chargent dans l’ordre des numéros, qui est celui
   de la cascade. Une règle peut corriger une feuille précédente, jamais une suivante. */

/* Mobile-first app treatment: the form becomes a short vertical task and results favour one-thumb scanning. */
@media (max-width: 600px) {
  body.home-page .site-header {
    width: 100%;
    height: 64px;
    padding: 0 16px;
    background: var(--ink);
  }
  body.home-page .brand {
    color: #fff;
  }
  body.home-page .site-header .account-entry {
    display: grid;
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
  }
  main {
    width: 100%;
    padding-bottom: 40px;
    display: flex;
    flex-direction: column;
  }
  .search-card {
    order: 1;
  }
  .hero {
    order: 2;
    padding: 32px 16px 18px;
  }
  .results {
    order: 3;
  }
  h1 {
    font-size: clamp(39px, 12vw, 52px);
    line-height: 0.98;
  }
  .hero-copy {
    margin-top: 14px;
    font-size: 15px;
    max-width: 34ch;
  }
  .search-card {
    padding: 22px 16px 24px;
    border: 0;
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    background: var(--ink);
    box-shadow: 0 10px 28px rgba(16, 42, 67, 0.18);
  }
  .search-card h2 {
    color: #fff;
  }
  .search-heading {
    margin-bottom: 20px;
  }
  h2 {
    font-size: 24px;
  }
  .search-toolbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 12px;
  }
  .toolbar-select select {
    width: 100%;
    min-height: 42px;
    padding: 8px 10px;
    border-color: rgba(255, 255, 255, 0.7);
    background: #fff;
    color: var(--ink);
    font-size: 12px;
    white-space: nowrap;
  }
  .comparator-bar {
    display: flex;
    flex-direction: column;
    gap: 9px;
  }
  .bar-origins {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .bar-origins.three {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 6px;
  }
  .bar-origins .field,
  .bar-origins .field + .field,
  .bar-field {
    min-height: 70px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--paper);
  }
  .bar-origins .field + .field {
    border-top: 1px solid var(--line);
  }
  .bar-origins.three .field {
    padding: 10px 8px;
  }
  .bar-origins.three select {
    font-size: 13px;
  }
  .bar-field {
    width: 100%;
  }
  .bar-field input,
  .bar-origins select {
    font-size: 16px;
  }
  .bar-origins .field > span,
  .bar-field .field span {
    margin-bottom: 6px;
  }
  .destination-field {
    order: 0;
  }
  .search-button {
    order: 3;
    width: 100%;
    min-height: 56px;
    margin: 2px 0 0;
    border-radius: var(--r-md);
    font-size: 16px;
  }
  .search-options {
    gap: 18px;
    padding-top: 15px;
  }
  .add-origin {
    min-height: 40px;
  }
  .suggestions {
    position: fixed;
    z-index: 120;
    top: var(--suggestions-top, 80px);
    left: 16px;
    right: 16px;
    width: auto;
    max-height: var(--suggestions-max-height, min(520px, calc(100dvh - var(--suggestions-top, 80px) - 12px)));
  }
  .results {
    margin: 42px 16px 0;
  }
  .results-topline {
    gap: 18px;
    margin-bottom: 18px;
  }
  .sort-control select {
    min-height: 48px;
    border-radius: var(--r-sm);
  }
  .destination-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .destination-card {
    border-radius: var(--r-md);
    box-shadow: 0 5px 18px rgba(16, 42, 67, 0.07);
  }
  .destination-photo {
    min-height: 158px;
  }
  .fare-price {
    font-size: 19px;
  }
  .data-note {
    line-height: 1.45;
  }
  .filters-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .origin-budget-filters {
    display: grid;
    gap: 12px;
  }
  .clear-filters {
    width: 100%;
  }
  .details-main {
    width: 100%;
    margin-bottom: 36px;
  }
  .details-main .back-link {
    margin: 16px;
    min-height: 40px;
  }
  .detail-page-header {
    min-height: 190px;
    padding: 22px 16px;
  }
  .detail-page-header h1 {
    font-size: 40px;
  }
  .detail-summary {
    padding: 16px;
    gap: 7px;
  }
  .detail-summary strong {
    font-size: 22px;
  }
  .detail-summary span {
    font-size: 12px;
  }
  .detail-page .flight-list {
    padding: 16px;
    gap: 12px;
  }
  .detail-page .flight-person {
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(16, 42, 67, 0.045);
  }
  .detail-page .flight-person-header {
    padding: 16px;
  }
  .detail-page .flight-leg {
    padding: 14px 16px;
  }
  .flight-time {
    font-size: 22px;
  }
  .detail-page .flight-meta {
    min-height: 42px;
    padding: 12px 16px;
    align-items: center;
    background: #f8fbfd;
  }
  .detail-page .flight-price {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    padding: 14px 16px 16px;
    align-items: center;
  }
  .detail-page .flight-price .booking-link {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 44px;
    margin-top: 8px;
    border-radius: var(--r-sm);
  }
  .flight-note {
    padding: 0 16px 12px;
  }
}

/* Keep all operational labels in the same sans-serif family. */
.flight-person-header span,
.flight-leg-label {
  font-family: 'DM Sans', Arial, sans-serif;
  font-weight: 600;
}

/* Final booking-card layout overrides, after desktop and mobile variants. */
.detail-page .flight-price {
  grid-column: 4;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 16px;
  color: var(--ink);
  text-align: center;
  text-decoration: none;
}
.detail-page .flight-person.one-way .flight-price {
  grid-column: 3;
  grid-row: 1;
}
.detail-page .flight-price .booking-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  min-height: 36px;
  padding: 8px 12px;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.detail-page .flight-price:hover {
  background: var(--mint);
}
@media (max-width: 760px) {
  .detail-page .flight-price,
  .detail-page .flight-person.one-way .flight-price {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

/* Booking action: uses the same warm-to-orange transition as the search action. */
.detail-page .flight-price {
  background: #fff6e8;
  color: var(--ink);
  cursor: pointer;
  transition:
    background-color 0.24s ease,
    color 0.24s ease,
    box-shadow 0.24s ease,
    transform 0.24s ease;
}
.detail-page .flight-price span,
.detail-page .flight-price strong {
  color: inherit;
}
.detail-page .flight-price .booking-label {
  min-width: 0;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--coral);
  font-size: 12px;
  transition:
    color 0.24s ease,
    transform 0.24s ease;
}
.detail-page .flight-price:hover {
  background: var(--coral);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.detail-page .flight-price:hover .booking-label {
  background: transparent;
  color: #fff;
  transform: translateX(4px);
}
.detail-page .flight-price .detail-page .flight-price:hover .detail-page .flight-price:active {
  transform: scale(0.98);
}
.detail-page .flight-price:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: -3px;
}
@media (prefers-reduced-motion: reduce) {
  .detail-page .flight-price,
  .detail-page .flight-price .booking-label {
    transition: none;
  }
}

/* Preserve the price as the visual centre of the booking area. */
.detail-page .flight-price {
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  align-items: center;
}
.detail-page .flight-price > span:first-child {
  align-self: end;
}
.detail-page .flight-price > strong {
  align-self: center;
}
.detail-page .flight-price .booking-label {
  align-self: start;
}
@media (max-width: 760px) {
  .detail-page .flight-price {
    grid-template-columns: 1fr;
    width: 100%;
    justify-items: center;
  }
}

/* Compact price panel on phones. */
@media (max-width: 760px) {
  .detail-page .flight-price {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 4px;
    min-height: 94px;
    padding: 12px 16px;
  }
}