@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap);

@import url(all.min.css);
@import'../../assets-commun/css/bootstrap3-modal.css';

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



:root{
    --color-site-1:#003B95;
   --color-site-2:#007fad;
    --color-site-3:#f48f00;
 
  --font: 'Poppins', sans-serif;
  --border-radius: 4px;
  --color-border: #c8c8d0;
  --text-color: #232323
}
  
.container {
    position: relative;
    margin: 0 auto;
    max-width: 1500px;
    width: 100%;
    padding: 0 20px;
}

.container::after {
    content: '';
    display: table;
    clear: both;
}
.bg-white {
    background: #fff !important
}

/* Change autocomplete styles in WebKit */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    border: 1px solid green;
    -webkit-text-fill-color: var(--color-site-1);
    /*-webkit-box-shadow: 0 0 0px 1000px #000 inset;
    transition: background-color 5000s ease-in-out 0s;*/
}


dialog::backdrop {
    background-color: #0093E9;
    background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}

.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;
}



















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) {




  /* 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-secondary {
    background-color: var(--color-site-3) !important;
    border: 1px solid var(--color-site-3) !important;
    color:#fff;
}
.btn.focus, .btn:focus, .btn:hover {

color: #fff;
}
.btn-secondary:hover {
    color: var(--color-site-3);
    background-color: #fff !important
}
.mt-2{
  margin-top:20px
}
.mb-3{
  margin-bottom:15px;
}.typeahead__list, .typeahead__dropdown {

top: auto !important;
}