/* Calendrier de sélection de plage (départ + retour), un seul popup partagé —
   chantier recherche gratuite du 8 sept 2026. Style calé sur aviasales.com :
   plage surlignée en vert clair, bornes en vert plein. */

.hero-carousel__champ--type-voyage,
.hero-carousel__champ--dates {
  min-width: 0;
}

.type-voyage-toggle {
  display: flex;
  gap: 4px;
}

.type-voyage-option {
  border: none;
  background: transparent;
  color: var(--noir);
  font-size: 12.5px;
  font-family: inherit;
  padding: 4px 8px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

.type-voyage-option.actif {
  background: var(--noir);
  color: var(--blanc);
  font-weight: 600;
}

/* Niveau 1 — les 3 vrais modes SniperAir (10 sept 2026, architecture à 2
   niveaux). Restylé le 10 sept (nuit) après retour utilisateur : la 1ère
   version (gros pilulier translucide plein de padding) était jugée "trop
   chargée" et créait un hero surchargé. Nouvelle version calée sur l'étude
   concrète de kayak.fr et govoyages.com (Chrome, desktop ET mobile réel) :
   onglets texte fins, soulignement au lieu d'un fond, posés à même le fond du
   hero — jamais de grosse boîte translucide autour du groupe d'onglets. */
.mode-principal-toggle {
  display: flex;
  gap: 18px;
  margin-bottom: 10px;
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(255,255,255,0.25);
}

.mode-principal-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.75);
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  padding: 0 0 8px;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.mode-principal-option__icone {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.mode-principal-option:hover {
  color: var(--blanc);
}

.mode-principal-option.actif {
  color: var(--blanc);
  border-bottom-color: var(--blanc);
}

/* Sélecteur d'aéroports en "chips", partagé par "Explorer les bons plans" et
   "Mode Surprise" — jusqu'à 5 aéroports (voir Palier::LIMITES). */
.chips-aeroports {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.chip-aeroport {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--vert-sniperair);
  color: var(--blanc);
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 8px 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.chip-aeroport__retirer {
  border: none;
  background: rgba(255,255,255,0.25);
  color: var(--blanc);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
  font-size: 13px;
}

.hero-carousel__champ--chips {
  min-width: 260px;
  flex: 3 1 480px;
}

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

.champ-dates {
  position: relative;
  display: flex;
  gap: 10px;
}

.champ-date-declencheur {
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: var(--noir);
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
}

.champ-date-declencheur__icone {
  width: 15px;
  height: 15px;
  color: #8A8A8A;
  flex-shrink: 0;
}

.champ-date-declencheur__effacer {
  color: #B4B4B4;
  font-size: 12px;
  margin-left: 2px;
}

.calendrier-plage {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  z-index: 30;
  background: var(--blanc);
  border-radius: var(--rayon-carte);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  padding: 18px;
  width: 300px;
  text-align: left;
}

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

.calendrier-plage__titre {
  font-weight: 600;
  font-size: 14px;
  color: var(--noir);
}

.calendrier-plage__nav {
  border: none;
  background: var(--gris-clair);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--noir);
}

.calendrier-plage__nav svg {
  width: 12px;
  height: 12px;
  transform: rotate(90deg);
}

.calendrier-plage__nav--suivant svg {
  transform: rotate(-90deg);
}

.calendrier-plage__jours-entete {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}

.calendrier-plage__jours-entete span {
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
  color: #9A9A9A;
}

.calendrier-plage__grille {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 2px;
}

.calendrier-plage__jour {
  aspect-ratio: 1;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  color: var(--noir);
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calendrier-plage__jour:hover:not(:disabled) {
  background: var(--gris-clair);
}

.calendrier-plage__jour--vide {
  cursor: default;
}

.calendrier-plage__jour--passe {
  color: #D8D8D8;
  cursor: not-allowed;
}

.calendrier-plage__jour--dans-plage {
  background: color-mix(in srgb, var(--vert-sniperair) 15%, transparent);
  border-radius: 0;
}

.calendrier-plage__jour--borne {
  background: var(--vert-sniperair);
  color: var(--blanc);
  font-weight: 600;
}

@media (max-width: 640px) {
  .calendrier-plage { width: 100%; left: 0; right: 0; }
  .champ-dates { flex-direction: column; gap: 4px; }
}