@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 '../../assets-commun/css/bootstrap3-modal.css';

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

:root {

   --color-site-1: #1a326e; /* Bleu principal */
  --color-site-2: #9fbd31; /* Vert accent */
  --color-site-3: #1A2F68; /* Bleu foncé */

  /* Typographie */
  --font: "Poppins", sans-serif;

  /* UI */
  --border-radius: 10px;

  /* Couleurs système */
  --color-border: #C7DBEB;
  --text-color: #232323;

  /* Layout */
  --container-max-width: 1420px;

}

* {
    font-family: var(--font);
    font-size: 14px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    outline: none;
    border: none;
    transition: all .2s linear;
}

body {
    background-color: #fff;
    margin: 0;
    padding: 0;
    overflow-x: hidden !important;
}
.container {
position: relative;
  max-width: var(--container-max-width) !important;
  width: 100%;
  margin: 0px auto;

  padding: 0px 20px;
}

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


/* 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 var(--color-site-1);
    /* 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;
}



/* --- Bouton Principal --- */
.btn.btn-primary {
  background-color: var(--color-site-2);
  transition: background-color 0.3s ease; /* Pour un effet fluide */
}

.btn.btn-primary:hover {
  /* Option 1 : Utiliser un filtre pour assombrir automatiquement */
  filter: brightness(0.9); 
  
  
}


/* --- Bouton Secondaire --- */
.btn.btn-secondary {
  background-color: var(--color-site-1);
  color: #fff;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn.btn-secondary:hover {
  filter: brightness(0.9);
  

}

.border-radius-10{
  border-radius:var(--border-radius);
}

.btn-info {

background: var(--color-site-3);
}