/* ══════════════════════════════════════════════════════════════════════════
   HelloJet — telephone : le widget de reservation, et la barre du haut.

   Trois constats, mesures a l'appui sur un iPhone de 390 px de large :

   1. Le hero est en `height: 100dvh; overflow: hidden`, et le widget est le
      dernier element d'une colonne flex. Quand la place manque, c'est lui qui
      se fait ecraser : les cellules tombaient a 25 px de haut pour 30 px de
      contenu, et `overflow: hidden` rognait la difference. Le libelle « De »
      chevauchait la valeur de la ligne precedente. Un formulaire illisible
      au premier ecran, sur l'appareil qui apporte la majorite du trafic.

   2. Les cibles tactiles faisaient 25 px. Le minimum tenable est 48 px, et
      pour un formulaire ou l'on entre une destination a 30 000 EUR, viser
      plus large n'est pas du luxe.

   3. La barre du haut empilait trois marges : le logo commencait a 66 px du
      bord, le bouton menu s'arretait a 66 px de l'autre. Sur un ecran de
      375 px utiles, un tiers de la largeur partait en marges.

   Le parti pris : sur telephone, le premier ecran n'a pas a tenir dans la
   hauteur exacte de la fenetre. Mieux vaut un widget lisible qu'on fait
   defiler de trois centimetres qu'un widget entier et illisible.

   Charge apres la feuille de la page, et apres `champs-tactile.css`, pour
   passer devant les regles `!important` du hero.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* ---- 1. Barre du haut : le logo au bord, le menu a l'autre bord -------- */
  .nav {
    padding: 0 10px !important;
  }
  .nav-inner {
    padding: 0 6px !important;
    max-width: none !important;
  }
  /* La cible du menu reste a 48 px, mais son dessin se colle au bord droit :
     c'est le pouce qui y va, et le pouce vise le coin. */
  .nav-cta {
    margin-right: -4px;
  }

  /* ---- 2. Le hero cesse d'ecraser ce qu'il contient ---------------------- */
  /* `height` devient `min-height` : la fenetre reste la hauteur de reference,
     mais un contenu plus grand la depasse au lieu d'etre comprime. */
  .hero-video-section {
    height: auto !important;
    min-height: 100dvh;
    overflow: visible !important;
  }
  .hero-content {
    height: auto !important;
    min-height: 0 !important;
  }
  /* Rien, dans cette colonne, ne doit rendre de la place au voisin. */
  .hero-bottom,
  .hero-content .config-shell,
  .hero-content .config-card {
    flex-shrink: 0 !important;
  }
  /* Le rogneur : c'est lui qui coupait les libelles. */
  .config-grid,
  .hero-content .config-grid {
    overflow: visible !important;
  }

  /* ---- 3. Le widget, en pleine largeur ---------------------------------- */
  .hero-content .hero-bottom .config-shell,
  .hero-content .config-shell {
    margin: 20px 12px 0 !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
  }
  .hero-content .hero-bottom .config-card,
  .hero-content .config-card {
    /* Plus opaque que le verre du bureau : sur une photo d'avion en plein
       soleil, un fond a 54 % rend le texte gris illisible. */
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(20px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 20px !important;
    padding: 14px 14px 16px !important;
    box-shadow:
      0 20px 50px rgba(0, 0, 0, 0.30),
      0 4px 14px rgba(0, 0, 0, 0.14) !important;
    display: block !important;
  }

  /* Aller simple / aller-retour : deux vraies cibles, pas deux mots. */
  .hero-content .config-top,
  .config-top {
    margin-bottom: 12px !important;
    flex-direction: row !important;
    align-items: center !important;
  }
  .trip-types {
    display: flex !important;
    gap: 8px !important;
    width: 100%;
  }
  .trip-types .radio {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 0 10px;
    /* L'option non retenue reste lisible : posee sur une carte deja blanche,
       un fond a 50 % d'opacite la faisait disparaitre. */
    border: 1px solid rgba(28, 31, 32, 0.14);
    border-radius: 12px;
    background: rgba(28, 31, 32, 0.045);
    transition: background 0.18s ease, border-color 0.18s ease;
  }
  .trip-types .radio:has(input:checked) {
    background: var(--ink, #1c1f20);
    border-color: var(--ink, #1c1f20);
  }
  .trip-types .radio:has(input:checked) .radio-label {
    color: #fff;
  }
  .trip-types .radio:has(input:checked) .radio-circle {
    border-color: rgba(255, 255, 255, 0.85);
  }
  .hero-content .radio-label,
  .radio-label {
    font-size: 13.5px !important;
    font-weight: 600;
    white-space: nowrap;
  }

  /* ---- 4. Les cellules : une par ligne, hautes, lisibles ---------------- */
  /* Un bloc de style tardif repasse la grille en `display: flex` (rangee) pour
     le bureau. On empile explicitement plutot que de compter sur la grille :
     la regle vaut quel que soit le mode d'affichage retenu en amont. */
  .config-grid,
  .config-grid.oneway,
  .hero-content .config-grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    background: #fff !important;
    border: 1px solid rgba(28, 31, 32, 0.10) !important;
    border-radius: 14px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .cfg-cell,
  .cfg-cell:nth-child(odd),
  .hero-content .cfg-cell {
    /* 60 px : la ligne se vise sans regarder, et le libelle respire au-dessus
       de la valeur au lieu de lui rentrer dedans. */
    min-height: 60px !important;
    padding: 11px 16px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(28, 31, 32, 0.08) !important;
    border-radius: 0 !important;
    background: transparent !important;
    justify-content: center !important;
    /* Le hero centre tout son texte. Un formulaire, non : l'oeil descend une
       colonne de valeurs, il lui faut un bord gauche commun. */
    text-align: left !important;
    align-items: flex-start !important;
  }
  .cfg-input,
  .cfg-value,
  .cfg-label {
    text-align: left !important;
  }
  .cfg-cell:first-child,
  .hero-content .cfg-cell:first-child {
    border-top-left-radius: 14px !important;
    border-top-right-radius: 14px !important;
  }
  /* Le bouton est le dernier enfant de la grille : la derniere cellule est
     donc l'avant-derniere, quel que soit l'affichage du champ retour. */
  .config-grid > .cfg-cell:nth-last-child(2),
  .hero-content .config-grid > .cfg-cell:nth-last-child(2) {
    border-bottom: none !important;
    border-bottom-left-radius: 14px !important;
    border-bottom-right-radius: 14px !important;
  }
  .config-grid:not(.show-return) > .cfg-cell:nth-last-child(3),
  .hero-content .config-grid:not(.show-return) > .cfg-cell:nth-last-child(3) {
    border-bottom: none !important;
    border-bottom-left-radius: 14px !important;
    border-bottom-right-radius: 14px !important;
  }

  .cfg-label,
  .hero-content .cfg-label {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    color: rgba(28, 31, 32, 0.45) !important;
    margin-bottom: 3px !important;
    line-height: 1.1 !important;
  }
  .cfg-input,
  .cfg-value,
  .hero-content .cfg-input,
  .hero-content .cfg-value {
    /* 16 px, jamais moins : c'est aussi le seuil sous lequel Safari iOS
       agrandit la page a la saisie. Voir `champs-tactile.css`. */
    font-size: 16px !important;
    line-height: 1.3 !important;
    font-weight: 650 !important;
  }
  .cfg-input::placeholder {
    font-weight: 500;
    color: rgba(28, 31, 32, 0.38);
  }

  /* ---- 5. Le bouton : pleine largeur, dans la carte --------------------- */
  .config-cta,
  .config-cta-inline,
  .hero-content .config-cta {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    min-height: 54px !important;
    margin-top: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    border-radius: 14px !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
  }
  .config-cta:hover {
    transform: none !important;
  }
  .config-cta:active {
    transform: scale(0.985) !important;
  }
  .config-cta-wrap {
    position: static !important;
    height: auto !important;
    margin-top: 12px !important;
  }

  /* ---- 6. Ce qui s'ouvre par-dessus ------------------------------------- */
  /* Suggestions, calendrier, compteur de passagers : plein cadre, marges
     egales, et une hauteur bornee pour que le clavier ne les recouvre pas. */
  .suggestions,
  .cal-popover,
  .pax-popover {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    border-radius: 16px !important;
  }
  .suggestions {
    max-height: 46vh !important;
    overflow-y: auto !important;
  }
  .cal-popover {
    max-height: 76vh;
    overflow-y: auto;
  }
  .suggestion {
    min-height: 48px;
    align-content: center;
  }
  .pax-btn {
    min-width: 40px;
    min-height: 40px;
  }
  .pax-confirm,
  .cal-confirm {
    min-height: 46px !important;
    font-size: 14px !important;
  }

  /* ---- 7. Les preuves, sous le widget ----------------------------------- */
  /* Elles rassurent au moment ou l'on hesite a taper sa destination : on les
     garde visibles, mais elles ne doivent pas voler la place au formulaire. */
  .hero-content .hero-bottom .trust-signals,
  .hero-content .trust-signals {
    margin: 12px 12px 0 !important;
    gap: 6px !important;
  }
}

/* ---- Le separateur fantome de la cellule Depart --------------------------
   « Date aller · » : le point mediant separe la date de l'heure, et le script
   pose `hidden` dessus tant qu'aucune heure n'est choisie. Une regle plus
   ancienne force `display: inline !important` sur les trois morceaux de la
   cellule, ce qui ecrase `hidden` : le point restait la, suspendu apres un
   champ vide. Vrai a toutes les largeurs, corrige ici pour tout le monde. */
.cfg-date .dt-date[hidden],
.cfg-date .dt-time[hidden],
.cfg-date .dt-sep[hidden] {
  display: none !important;
}

@media (max-width: 767px) {
  /* La valeur de date suit le meme bord gauche que les autres cellules. */
  .cfg-date .cfg-date-value,
  .hero-content .cfg-date .cfg-date-value {
    justify-content: flex-start !important;
    font-size: 16px !important;
  }
}

/* Ecrans courts : le hero ne cherche meme plus a remplir la fenetre. */
@media (max-width: 767px) and (max-height: 720px) {
  .hero-video-section {
    min-height: 0 !important;
  }
  .hero-content {
    padding-top: 92px !important;
    padding-bottom: 24px !important;
  }
}