/* ------------------------------------------------------------------
   i-avion — couche responsive (n'altère pas le design desktop >1024px)
   Préserve l'identité : illustration d'origine, palette olive/vert, typo.
   ------------------------------------------------------------------ */

/* ===== Tablette et en dessous : bannière fluide + texte dessous ===== */
@media screen and (max-width: 1024px) {
  html, body { overflow-x: hidden; }

  /* Le header devient une bannière pleine largeur qui se met à l'échelle */
  #liquid, .home #liquid, .results #liquid { background: none; }

  #header {
    background: none;
    width: 100%;
    max-width: 1024px;
    height: auto;
    margin: 0 auto;
  }
  #header::before {
    content: "";
    display: block;
    width: 100%;
    padding-top: 31.05%;            /* ratio de header.jpg (318/1024) */
    background: url('../header.jpg') no-repeat top center;
    background-size: contain;
  }
  /* Texte d'intro : sous l'illustration, lisible et centré */
  #header p.sidetext {
    position: static;
    width: auto;
    max-width: 680px;
    margin: 12px auto 4px;
    padding: 0 16px;
    font-size: 11pt;
    line-height: 1.45;
    color: #5e6925;
    text-align: center;
  }

  /* Bandeau récapitulatif (masqué de toute façon sur le site statique) */
  #subheader { display: none; }

  /* Zone de contenu / formulaire : fluide et centrée */
  #content, #simphistory {
    width: auto;
    max-width: 640px;
    margin: 0 auto 24px;
    padding: 0 12px;
    box-sizing: border-box;
  }
  .home #content { position: static; top: 0; margin-top: 4px; }
  /* credits.html : suite de <br> qui compensait le décalage -125px du
     desktop ; inutile (et disgracieux) une fois #content remis à plat */
  #content > br { display: none; }

  #content .body { width: auto; box-sizing: border-box; }
  #content h2.results {
    width: auto;
    max-width: 100%;
    height: auto;
    min-height: 30px;
    background-size: 100% 100%;
    box-sizing: border-box;
  }

  #footer p { width: auto; max-width: 640px; padding: 0 16px; box-sizing: border-box; }

  /* Table de résultats du moteur : scroll horizontal plutôt que débordement */
  #content table.results {
    display: block;
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }
}

/* ===== Tablette & mobile : formulaire empilé en une colonne =====
   On empile dès 1024px : le formulaire d'origine est une image figée de
   640px, fragile dans un conteneur fluide. La pile (max 640px, centrée)
   est robuste et conserve la palette/typo de l'identité. */
@media screen and (max-width: 1024px) {
  /* On abandonne l'image de fond du formulaire (3 colonnes figées) */
  form#nsearch { height: auto; background: none; padding: 0 0 16px; }

  form#nsearch fieldset,
  form#nsearch fieldset.passagers {
    float: none;
    width: auto;
    margin: 0 0 16px;
    padding: 14px;
    background: #ecf6ce;
    border: 1px solid #cdd9a3;
    border-radius: 8px;
    box-sizing: border-box;
  }

  /* Les titres DESTINATION / DATES / PASSAGERS (jadis dans l'image du
     formulaire) redeviennent du vrai texte. On n'utilise PAS le <legend>
     (son rendu natif le place à cheval sur la bordure du fieldset) : on
     génère le titre en ::before, dans le flux du panneau, couleur olive. */
  form#nsearch legend { display: none; }
  form#nsearch fieldset::before {
    display: block;
    font-weight: 700;
    text-transform: uppercase;
    color: #808948;
    font-size: 13pt;
    letter-spacing: -1px;
    margin-bottom: 12px;
  }
  form#nsearch fieldset:nth-of-type(1)::before { content: "Destination"; }
  form#nsearch fieldset:nth-of-type(2)::before { content: "Dates"; }
  form#nsearch fieldset:nth-of-type(3)::before { content: "Passagers"; }

  form#nsearch label { display: block; margin: 8px 0 2px; }
  form#nsearch fieldset input { width: 100%; box-sizing: border-box; }
  /* les cases à cocher / champs inline ne s'étirent pas */
  form#nsearch fieldset label input,
  #direct { width: auto; }
  #ddepart,
  form#nsearch input.date-pick { width: 100%; float: none; margin: 0 0 10px; }
  form#nsearch input#type {
    width: 100%;
    box-sizing: border-box;
    background-position: right 10px center;
  }
  form#nsearch input.go { float: none; display: block; margin: 8px auto 0; }

  /* Icônes calendrier flottantes du datepicker : superflues et disgracieuses
     en pile mobile (le champ date reste éditable). On les masque. */
  a.dp-choose-date { display: none; }

  /* Menu d'autocomplétion : dans le flux, sous le champ, pleine largeur */
  .suggestionsBox {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    max-width: 100%;
    margin: 4px 0 0;
  }
}