@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 '../../assets-commun/css/login-block.css';
@import '../../assets-commun/css/bs3-to-bs5-colors.css';
@import'../../assets-commun/css/bs3-to-bs5-compat.css';



:root {

    --color-site-1: #002552;
    --color-site-2: #00cfe4;
    --color-site-3: #032e5a;
    --font: 'Poppins', sans-serif;
    --border-radius: 4px;
    --color-border: #C7DBEB;
    --text-color: #232323;
    --container-max-width:1420px;
}
.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;
}

/* 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);
}