@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0-3/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap');


@import'./bootstrap3-modal.css';

@import url(./login-block.css);
@import url(bs3-to-bs5-colors.css);
@import url(bs3-to-bs5-compat.css);

:root {

  --color-site-1: #ff6e00;
  --color-site-2: #287dfa;
  --color-site-3: #00a4e3;
  --font: 'Poppins', sans-serif;
  --border-radius: 4px;
  --color-border: #C7DBEB;
  --text-color: #232323
}

.border-color-site-2 {
  border: 1px solid var(--color-site-2) !important
}

/* Contenu personnalisé pour l'icône et le texte */
.suggestion-content {
  display: flex;
  align-items: center;
}

.icon-hotel,
.icon-vol {
  font-size: 1.5em;
  color: var(--color-site-1);
  /* Orange de l'icône */
  margin-right: 14px;
}

.hotel-info strong {
  display: block;
  font-weight: bold;
}

.vol-info .strong-info {
  font-weight: 500;
  display: block;

}

.hotel-info span {
  display: block;
  font-size: 14px;
  color: #666;
}

.typeahead__list>li {
  position: relative;
  border-top: solid 1px transparent;
}

/* 1. Sécurité : Force le conteneur du carrousel à servir de repère spatial */
.owl-carousel {
  position: relative;
}

/* 2. Positionnement des contrôles au milieu vertical */
.owl-nav {
  position: absolute;
  bottom: 50%;
  /* Place le haut du bloc au milieu exact de la hauteur */
  transform: translateY(-50%);
  /* Recentre parfaitement l'élément sur son propre axe vertical */
  left: 0;
  right: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  /* Envoie une flèche à l'extrême gauche, l'autre à l'extrême droite */
  pointer-events: none;
  /* Empêche ce bloc invisible de bloquer les clics sur tes cartes d'hôtels */
  padding: 0;
  margin: 0;
}

/* 3. Style uniforme des boutons de flèches (Prev et Next) */
.owl-prev,
.owl-next {
  position: absolute;
  pointer-events: auto;
  /* Réactive le clic uniquement sur le bouton physique */
  width: 44px;
  height: 44px;
  background-color: #ffffff;
  border: 1px solid #e1e8ed;
  border-radius: var(--border-radius);
  /* Cohérence avec ton arrondi de 4px */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  top: 50%;
  transform: translateY(-50%);
  /* Sécurité d'alignement */
}

/* 4. Placement précis à gauche et à droite */
/* Astuce : une valeur négative (ex: -22px) permet de faire dépasser la flèche à moitié sur le bord */
.owl-prev {
  left: -22px;
}

.owl-next {
  right: -22px;
}

/* 5. Style des icônes FontAwesome */
.owl-prev i,
.owl-next i {
  font-size: 22px;
  color: #2c3e50;
  transition: color 0.2s ease;
}

/* 6. Effet au survol (Hover) uniforme */
.owl-prev:hover,
.owl-next:hover {
  background-color: var(--color-site-1);
  /* Devient Orange au survol */
  border-color: var(--color-site-1);
  box-shadow: 0 6px 12px rgba(255, 110, 0, 0.25);
}

.owl-prev:hover i,
.owl-next:hover i {
  color: #ffffff;
  /* L'icône passe en blanc */
}

.owl-nav {
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-top: 20px !important;
}

.owl-prev,
.owl-next {
  width: 40px !important;
  height: 40px !important;
  background-color: #ffffff !important;
  border: 1px solid #e1e8ed !important;
  border-radius: var(--border-radius) !important;
  /* Carré aux angles adoucis (4px) */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease;
}

.owl-prev i,
.owl-next i {
  font-size: 20px;
  color: #2c3e50 !important;
}

.owl-prev:hover,
.owl-next:hover {
  background-color: var(--color-site-1) !important;
  /* Flèches interactives en Orange */
  border-color: var(--color-site-1) !important;
}

.owl-prev:hover i,
.owl-next:hover i {
  color: #ffffff !important;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* Pour Firefox */
input[type="number"] {
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}

@media (max-width: 768px) {
  .filtreTrain {

    position: inherit !important;
  }

  #passenger-display {
    display: none;
  }

  /* 1. Conteneur principal en plein écran */
  .typeahead__container.result {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    padding: 10px;
  }

  /* 2. Champ de saisie (Input) */
  .typeahead__container.result .typeahead__field {

    border-bottom: 2px solid #ff6600;
    /* Rappel couleur orange de l'image */
  }

  .typeahead__list,
  .typeahead__dropdown {

    top: 0 !important;
  }

  .typeahead__list,
  .typeahead__dropdown {

    border: transparent !important;
  }


  /* 3. Liste des résultats */
  .typeahead__result {
    position: relative !important;
    /* Annule le flottement */
    width: 100% !important;
    height: 100%;
    overflow-y: auto;
    /* Scroll fluide sur mobile */
    border: none !important;
    box-shadow: none !important;
  }

  .typeahead__list {
    padding: 0;
    margin: 0;
    list-style: none;
    min-height: 100% !important;
  }

  /* 4. Chaque item (Station) */
  .typeahead__item {
    border-bottom: 1px solid #f0f0f0;
  }

  .typeahead__item a {
    display: block;
    padding: 15px 10px;
    text-decoration: none;
    background: transparent;
  }

  /* Feedback tactile au clic */
  .typeahead__item a:active {
    background-color: #f9f9f9;
  }

  /* 5. Structure interne de la suggestion */
  .suggestion-content {
    display: flex;
    align-items: center;
  }

  .suggestion-icon {
    width: 45px;
    height: 45px;
    background: #fdf2e9;
    /* Orange très clair */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
  }

  .suggestion-icon i {
    color: var(--color-site-1);
    /* Icône orange */
    font-size: 18px;
  }

  /* 6. Textes (Détails) */
  .suggestion-details {
    display: flex;
    flex-direction: column;
  }

  .suggestion-name {
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 2px;
  }

  .suggestion-code {
    font-size: 12px;
    color: #95a5a6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  /* 7. Mise en évidence de la recherche (Mark) */
  .typeahead-highlight {
    background: transparent;
    color:var(--color-site-1);
    /* Orange vif pour le 'w' */
    font-weight: 700;
    padding: 0;
  }

  /* Masquer le hint (le texte gris auto-complété en fond) pour éviter les chevauchements */
  .typeahead__hint {
    display: none !important;
  }
}

/* --- OPTIONNEL : Bouton de fermeture --- 
Si vous ajoutez un bouton pour quitter la recherche en haut à droite */
.close-search {
  position: absolute;
  right: 15px;
  top: 15px;
  font-size: 24px !important;
  color: #000 !important;
  z-index: 9999999;
}



.btn.btn-primary{
  background-color: var(--color-site-2);
}
.btn.btn-secondary{
  background-color: var(--color-site-1);
}