/* Résultats de la recherche de vols de l'accueil — chantier recherche gratuite +
   affiliation (7 sept 2026). Le formulaire lui-même vit désormais dans le hero
   (hero-formulaire-recherche.css) ; ce fichier ne couvre que l'état d'attente,
   la disposition filtres + liste, et la mention légale d'affiliation.
   Refonte du 8 sept 2026 (comparaison avec un vrai comparateur type Kayak/
   Ulysse) : filtres en colonne latérale (pas une barre au-dessus), résultats
   en lignes compactes façon tableau plutôt qu'en grille de cartes carrées. */

.section-resultats-recherche {
  padding: 0 var(--espace-section);
  max-width: 1100px;
  margin-inline: auto;
}

.recherche-etat {
  text-align: center;
  color: #6B6B6B;
  font-size: 14px;
  margin: 28px 0;
}

.recherche-etat--erreur {
  color: #C0392B;
}

.recherche-corps {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  margin-top: 28px;
  align-items: start;
}

@media (max-width: 800px) {
  .recherche-corps { grid-template-columns: 1fr; }
}

/* --- Colonne filtres --- */

.recherche-filtres {
  background: var(--blanc);
  border: 1px solid #ECECEC;
  border-radius: var(--rayon-carte);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 16px;
}

.recherche-filtres__groupe {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.recherche-filtres__label {
  font-weight: 700;
  color: var(--noir);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.recherche-filtres__groupe label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #4A4A4A;
  cursor: pointer;
  font-size: 13px;
}

.recherche-filtres select {
  border: 1px solid #ECECEC;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
}

/* --- Colonne résultats --- */

.recherche-liste-conteneur {
  min-width: 0;
}

.recherche-liste-compteur {
  font-size: 13px;
  color: #6B6B6B;
  margin: 0 0 12px;
}

.recherche-liste-resultats {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ligne-vol {
  display: grid;
  grid-template-columns: 130px 1fr auto auto;
  align-items: center;
  gap: 16px;
  background: var(--blanc);
  border: 1px solid #ECECEC;
  border-radius: var(--rayon-carte);
  padding: 14px 18px;
  box-shadow: 0 2px 10px rgba(20, 30, 25, 0.05);
}

@media (max-width: 700px) {
  .ligne-vol {
    grid-template-columns: 1fr;
    text-align: left;
  }
}

.ligne-vol__compagnie {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ligne-vol__logo {
  width: 26px;
  height: 26px;
  object-fit: contain;
  border-radius: 4px;
  flex-shrink: 0;
}

.ligne-vol__compagnie-nom {
  font-size: 12.5px;
  color: #6B6B6B;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ligne-vol__trajet {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.ligne-vol__segment {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13.5px;
}

.ligne-vol__heure {
  font-weight: 700;
  color: var(--noir);
  min-width: 42px;
}

.ligne-vol__aeroport {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #4A4A4A;
  font-weight: 600;
}

.ligne-vol__fleche {
  width: 12px;
  height: 12px;
  color: var(--vert-sniperair);
  flex-shrink: 0;
}

.ligne-vol__date {
  color: #9A9A9A;
  font-size: 12px;
}

.ligne-vol__escales {
  font-size: 12.5px;
  color: #6B6B6B;
  white-space: nowrap;
}

.ligne-vol__prix-bloc {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

@media (max-width: 700px) {
  .ligne-vol__prix-bloc { align-items: flex-start; }
}

.ligne-vol__prix {
  font-family: var(--police-titres);
  font-weight: 700;
  font-size: 22px;
  color: var(--noir);
}

.ligne-vol__reserver {
  display: block;
  text-align: center;
  padding: 8px 18px;
  border-radius: var(--rayon-pilule);
  background: var(--vert-sniperair);
  color: var(--blanc);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}

.ligne-vol__reserver:hover {
  filter: brightness(0.92);
}

.recherche-disclosure {
  text-align: center;
  font-size: 11.5px;
  color: #9A9A9A;
  max-width: 560px;
  margin: 0 auto 32px;
  line-height: 1.6;
}

/* Résultats "Explorer les bons plans" (10 sept 2026) — cartes distinctes des
   lignes de recherche live ci-dessus : ce ne sont pas des résultats de
   recherche à la demande mais des opportunités déjà détectées par le moteur
   (voir BonsPlansService côté backend). */
.section-bons-plans-resultats {
  padding: 0 var(--espace-section);
  max-width: 1100px;
  margin-inline: auto;
}

.bons-plans-entete__texte {
  text-align: center;
  color: #6B6B6B;
  font-size: 14px;
  margin: 20px 0;
}

.bons-plans-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 40px;
}

.carte-opportunite {
  border: 1px solid #EAEAEA;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.carte-opportunite--exceptional {
  border-color: var(--vert-sniperair);
  background: rgba(0, 168, 107, 0.04);
}

.carte-opportunite__badge {
  align-self: flex-start;
  background: var(--vert-sniperair);
  color: var(--blanc);
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}

.carte-opportunite--good .carte-opportunite__badge,
.carte-opportunite--observed .carte-opportunite__badge,
.carte-opportunite--cold .carte-opportunite__badge {
  background: var(--noir);
}

.carte-opportunite__trajet {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
}

.carte-opportunite__fleche {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.carte-opportunite__dates {
  font-size: 13px;
  color: #6B6B6B;
}

.carte-opportunite__prix-bloc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 8px;
}

.carte-opportunite__prix {
  font-size: 22px;
  font-weight: 700;
}

.carte-opportunite__reserver {
  background: var(--noir);
  color: var(--blanc);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  text-decoration: none;
}