/* Ajustements pour le formulaire de recherche de vols dans le hero de
   l'accueil — chantier recherche gratuite + affiliation (7 sept 2026).
   Remplace l'ancien formulaire de création d'alerte (Départ/Budget/
   Destination) : même design (barre blanche arrondie sur le carousel).
   Refonte du 8 sept 2026 (comparaison Air France/Tunisair) : le toggle
   Aller-retour/Aller simple sort de la barre de recherche (rangée séparée
   au-dessus), un bouton d'inversion apparaît entre Origine et Destination,
   un champ Voyageurs est ajouté. */

.recherche-groupe {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 180px;
}

/* Barre compacte collée en haut au scroll (desktop >900px), façon kayak.fr.
   Historique des corrections (10 sept 2026, voir feedback_ux_formulaire_3modes.md) :
   1. Seuil basé sur le BAS de .hero-carousel (photo comprise), pas sur la
      position du formulaire — sinon la photo restait visible sous la barre
      fixe, effet jugé "flottant mal par-dessus l'image".
   2. Formulaire impossible à cliquer une fois fixe : .recherche-groupe est un
      descendant de .hero-carousel__contenu (z-index:2, son propre contexte
      d'empilement) — un z-index local, même élevé, ne peut jamais dépasser
      .entete (z-index:10) qui est un contexte d'empilement voisin au niveau
      racine. Corrigé côté JS par un vrai déplacement de nœud DOM (portail)
      juste après .entete au moment du passage en fixe — ici, `left`/`right`
      ne sont donc PLUS 0 (pleine largeur) mais posés dynamiquement par JS
      pour caler la barre entre le logo et les boutons du header, jamais par
      dessus.
   3. Les 3 onglets de mode ne sont PAS affichés dans cette barre compacte
      (demande explicite de l'utilisateur, pas nécessaire une fois qu'on a
      déjà choisi un mode) — seul le formulaire du mode actif y apparaît.
   `.recherche-groupe--espace` réserve la hauteur normale pour éviter un saut
   de contenu au moment du passage en fixed. */
@media (min-width: 901px) {
  .recherche-groupe--fixe {
    position: fixed;
    top: var(--hauteur-banniere-lancement, 0px);
    z-index: 15;
    margin-top: 0;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding-block: 10px;
    background: var(--blanc);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    animation: rechercheGroupeApparition 0.2s ease;
  }

  @keyframes rechercheGroupeApparition {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .recherche-groupe--fixe .mode-principal-toggle {
    display: none;
  }

  .recherche-groupe--fixe .recherche-controles {
    display: none;
  }

  .recherche-groupe--fixe .hero-carousel__formulaire--recherche {
    width: auto;
    min-height: 0;
    transform: scale(0.86);
    margin-inline: 0;
  }

  .recherche-groupe--espace {
    display: none;
  }

  .recherche-groupe--espace.recherche-groupe--espace-active {
    display: block;
  }
}

.recherche-controles {
  display: flex;
  margin-bottom: 10px;
  padding-left: 14px;
}

/* .hero-carousel__formulaire (classe de base, partagée avec les formulaires
   email simples des pages EN/DE/ES) a un margin-top:150px pensé pour se
   décaler du titre. Ici le toggle Aller-retour prend cette place au-dessus
   du formulaire — sans cette correction, les 150px s'appliquaient entre le
   toggle et le formulaire au lieu d'entre le titre et le formulaire. */
.hero-carousel__formulaire--recherche {
  margin-top: 0;
}

.recherche-controles .type-voyage-toggle {
  background: var(--blanc);
  border-radius: 999px;
  padding: 3px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

.hero-carousel__formulaire--recherche {
  flex-wrap: wrap;
  row-gap: 10px;
  gap: clamp(4px, 1vw, 16px);
  min-height: 64px;
  margin-inline: auto;
  position: relative;
  transition: opacity 0.18s ease;
}

/* Empêche le "saut" de largeur/hauteur signalé par l'utilisateur (10 sept
   2026) quand on bascule entre les 3 modes : "Explorer les bons plans" et
   "Mode Surprise" ont beaucoup moins de champs que "Rechercher un vol", donc
   sans le min-width fixe ci-dessous la barre blanche se rétrécissait
   visiblement à chaque changement de mode au lieu de rester un cadre stable
   dont seul le contenu change — comportement de kayak.fr/govoyages.com étudié
   en référence.
   ⚠️ Pièges rencontrés et corrigés, dans l'ordre :
   1. `min-width: min(600px, 100%)` ne fonctionnait PAS — le `100%` s'y résout
      par rapport à .recherche-groupe, qui est en `column` +
      `align-items:flex-start` donc SANS largeur propre : il rétrécit
      lui-même à son contenu le plus large. Résultat circulaire :
      min(600px, 445px-en-mode-chips) = 445px, le clamp ne servait à rien.
   2. Un `min-width` fixe en px (sans %) réglait bien le rétrécissement en
      dessous de 600px, MAIS le mode "Rechercher un vol" (5-6 champs) restait
      naturellement plus large que 600px (~920px mesuré) — l'utilisateur a
      explicitement demandé la MÊME taille dans les 3 modes, pas juste un
      plancher commun. Un simple min-width n'imposait qu'une borne basse.
   3. Solution retenue : un `width` fixe (pas juste min-width) commun aux 3
      modes, calculé en `vw` (jamais en `%`, qui resterait circulaire vis-à-
      vis du parent qui rétrécit) — `vw` se base uniquement sur la largeur du
      viewport, jamais sur un ancêtre. Vérifié par mesure réelle
      (getBoundingClientRect) dans Chrome sur les 3 modes après ce correctif
      final : largeurs identiques à l'écran près. */
.hero-carousel__formulaire--recherche {
  width: min(940px, 92vw);
}

.hero-carousel__formulaire--recherche.formulaire--transition {
  opacity: 0;
}

/* Rétrécissement fluide plutôt qu'un seuil fixe qui bascule brutalement en
   mode empilé — comparaison directe avec VoyagesPirates le 8 sept 2026 (leur
   formulaire reste sur une seule ligne bien plus étroit que le nôtre en
   rétrécissant chaque champ en continu). Origine/Destination avaient une
   largeur d'input fixe (160px, jamais négociable) et Voyageurs avait
   flex-shrink:0 — aucun des deux ne pouvait jamais céder de place, donc tout
   le poids retombait sur un seul point de rupture brutal. */
.hero-carousel__formulaire--recherche .hero-carousel__champ {
  min-width: 60px;
  padding-inline: clamp(4px, 0.8vw, 12px);
}

.hero-carousel__formulaire--recherche .hero-carousel__champ:not(.hero-carousel__champ--voyageurs):not(.hero-carousel__champ--dates) {
  flex: 1 1 90px;
}

.hero-carousel__formulaire--recherche .hero-carousel__champ input {
  width: 100%;
  min-width: 0;
}

.bouton-inversion {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #E2E2E2;
  background: var(--blanc);
  color: #6B6B6B;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.bouton-inversion:hover {
  color: var(--vert-sniperair);
  border-color: var(--vert-sniperair);
}

.bouton-inversion svg {
  width: 15px;
  height: 15px;
}

.hero-carousel__champ--voyageurs {
  position: relative;
}

.hero-carousel__champ--voyageurs {
  flex: 0 1 90px;
  min-width: 70px;
  max-width: 130px;
}

.voyageurs-declencheur {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  border: none;
  background: transparent;
  font-size: 14px;
  font-family: var(--police-texte);
  color: var(--noir);
  cursor: pointer;
  padding: 0;
}

/* Le nombre de voyageurs et la classe peuvent produire un texte long
   ("9 voyageurs" / "Économique premium") qui, sans contrainte, forçait toute
   la barre de recherche à s'élargir et à casser sur plusieurs lignes (bug
   réel constaté en testant "Économique premium" + 9 voyageurs le 8 sept
   2026). Troncature avec "..." plutôt que de laisser le texte pousser la mise
   en page — le détail complet reste visible dans le panneau déroulant. */
.voyageurs-declencheur span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voyageurs-declencheur__classe {
  font-size: 11px;
  color: #9A9A9A;
}

.panneau-voyageurs {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 280px;
  background: var(--blanc);
  border: 1px solid #ECECEC;
  border-radius: var(--rayon-carte);
  box-shadow: 0 10px 30px rgba(20, 30, 25, 0.15);
  padding: 18px;
  z-index: 20;
  text-align: left;
}

.panneau-voyageurs__titre {
  font-size: 13px;
  font-weight: 700;
  color: var(--noir);
  margin: 0 0 12px;
}

.panneau-voyageurs__titre--classe {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #ECECEC;
}

.panneau-voyageurs__ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.panneau-voyageurs__type {
  font-size: 13.5px;
  color: var(--noir);
  margin: 0;
}

.panneau-voyageurs__sous {
  font-size: 11.5px;
  color: #9A9A9A;
  margin: 0;
}

.panneau-voyageurs__compteur {
  display: flex;
  align-items: center;
  gap: 10px;
}

.panneau-voyageurs__compteur button {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid #E2E2E2;
  background: var(--blanc);
  color: var(--noir);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.panneau-voyageurs__compteur button:hover {
  border-color: var(--vert-sniperair);
  color: var(--vert-sniperair);
}

.panneau-voyageurs__compteur span {
  min-width: 14px;
  text-align: center;
  font-size: 14px;
  color: var(--noir);
}

/* Surcharge nécessaire : la règle générale ".hero-carousel__champ label"
   (majuscules, gris, 11px — pensée pour les libellés ORIGINE/DESTINATION/...)
   s'applique sinon aussi à ces <label> puisque le panneau est imbriqué dans
   .hero-carousel__champ--voyageurs (bug réel trouvé le 8 sept 2026 : texte
   tout en majuscules et collé à droite au lieu d'être à côté du bouton radio). */
.hero-carousel__champ .panneau-voyageurs__classe-option {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 7px 0;
  font-size: 13.5px;
  font-weight: 400;
  text-transform: none;
  color: var(--noir);
  cursor: pointer;
}

.hero-carousel__champ .panneau-voyageurs__classe-option input {
  width: auto;
}

.panneau-voyageurs__note {
  font-size: 11px;
  color: #9A9A9A;
  line-height: 1.4;
  margin: 10px 0 0;
}

.panneau-voyageurs__valider {
  width: 100%;
  margin-top: 16px;
  justify-content: center;
}

/* Ce seuil correspondait à l'ancien point de bascule du formulaire (1300px).
   Depuis le passage en largeurs flexibles (8 sept 2026), le champ Voyageurs
   peut descendre à ~90px de large bien avant 1300px — hériter de width:100%
   à ce stade donnait un panneau de 90px de large, texte empilé sur plusieurs
   lignes, hauteur de 416px qui débordait largement sur la section suivante
   (mesuré en direct dans le navigateur). Ce comportement "pleine largeur" n'a
   de sens que dans le vrai mode empilé mobile (≤640px), où le champ
   Voyageurs occupe déjà toute la largeur de la ligne. */
@media (max-width: 640px) {
  .panneau-voyageurs { right: auto; left: 0; width: 100%; box-sizing: border-box; }
}

.hero-carousel__formulaire--recherche .hero-carousel__champ input[type="date"] {
  width: 130px;
  color: var(--noir);
  font-family: var(--police-texte);
}

/* Seuil abaissé à 640px le 8 sept 2026 : comparaison directe avec
   VoyagesPirates/Air France/Tunisair/Lufthansa qui restent tous en une seule
   ligne jusqu'à des fenêtres bien plus étroites que ce que le seuil précédent
   (1150px, avant ça 1300px) autorisait. Le vrai problème n'était pas le
   seuil mais des largeurs figées (input Origine/Destination à 160px fixe,
   Voyageurs en flex-shrink:0) qui empêchaient tout rétrécissement progressif
   — corrigé juste au-dessus (flex-basis + min-width au lieu de largeurs
   fixes). Ce seuil ne sert plus qu'à basculer sur un vrai petit écran/mobile,
   pas à compenser un manque de flexibilité. */
@media (max-width: 640px) {
  .hero-carousel__formulaire--recherche {
    max-width: 600px;
    flex-direction: column;
    align-items: stretch;
    border-radius: 20px;
    padding: 16px;
  }
  .hero-carousel__formulaire--recherche .hero-carousel__separateur { display: none; }
  /* flex:1 1 90px et flex:0 1 90px sont pensés pour une ligne horizontale —
     en colonne (mobile), flex-basis agirait sur la hauteur et non la largeur,
     donc on repasse en flex:1 1 auto pour laisser chaque champ prendre sa
     hauteur naturelle. */
  .hero-carousel__formulaire--recherche .hero-carousel__champ {
    flex: 1 1 auto;
    padding-block: 8px;
  }
  .hero-carousel__formulaire--recherche .hero-carousel__champ input,
  .hero-carousel__formulaire--recherche .hero-carousel__champ input[type="date"] { width: 100%; }
  .hero-carousel__formulaire--recherche .hero-carousel__champ--voyageurs { flex: 1 1 auto; max-width: 100%; }
  .hero-carousel__formulaire--recherche .bouton-inversion { align-self: center; transform: rotate(90deg); margin-block: 4px; }
}

/* Mode Surprise (8 sept 2026) — 3e option du toggle Aller-retour/Aller
   simple : au clic, le toggle disparaît et laisse place à ce bouton
   "Revenir" au même endroit, le formulaire de recherche se transforme pour
   ne garder que Départ + Budget (voir recherche-accueil.js). */
.type-voyage-option--surprise {
  background: var(--vert-sniperair);
  color: var(--blanc);
  font-weight: 600;
}

.type-voyage-option--surprise:hover {
  opacity: 0.9;
}

.bouton-revenir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: var(--blanc);
  color: var(--noir);
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  padding: 4px 12px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

.bouton-revenir__icone {
  width: 14px;
  height: 14px;
}

.hero-carousel__champ--budget input {
  color: var(--noir);
  font-family: var(--police-texte);
}