/**Fonts**/
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0-3/css/all.min.css');


@import url("../../assets-commun/css/bootstrap3-modal.css") screen and (min-width: 768px);

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



@import "./fonts-web.css";
:root {
    --color-site-1: #f6690c;
    --color-site-2:  #2764ae;
    --color-site-3:#2A9ED1;
     --danger-500: #FF0000;
    --font : 'Helvetica Neue' !important;
    --color-border: #C7DBEB;
    --border-radius:4px;
    --container-max-width:1420px;
}


.container {
position: relative;
  max-width: var(--container-max-width) !important;
  width: 100%;
  margin: 0px auto;

  padding: 0px 20px;
}


*, :after, :before {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}
body {
    overflow-x: hidden;
    font-family: var(--font) !important;
    font-weight: normal;

     
}

a:hover {

    text-decoration: none !important;
}




.bg-orange, .btn.btn-liste, .btn.btn-orange,.btn-orange  {
    background-color:var( --color-site-1) !important;
    
    color: #fff
}
.bg-orange:hover, 
.btn.btn-liste:hover, 
.btn.btn-orange:hover, 
.btn-orange:hover {
    background-color: var(--color-site-1) !important;
    color: #fff !important;
    opacity: 0.85;
    transition: opacity 0.2s ease-in-out;
}
.bg-blue-bloc, .bg-dark-blue, .promoheader .topheader ,.btn-dark-blue{
    background-color:var( --color-site-2) !important;
}

.bg-half-blue{
    background: linear-gradient(to top, var(--bs-body-bg) 50%, var( --color-site-2) 0%);
    border:none

}
.bg-gary{
    background-color:#F7F8F9 !important;
}

.bg-half-gary{
    background: linear-gradient(to top, var(--bs-body-bg) 50%, #F7F8F9 0%);
    border:none

}
.text-orange {
    color:var(--color-site-1) !important;
}
.text-color-2{
    color:var(--color-site-2) !important;
}
.text-color-3{
    color:var(--color-site-3) !important;
}


.btn-outline-orange{
    color:var(--color-site-1) !important;
}

.bg-outline-orange{

     color:var(--color-site-1) !important;
    background: #FFF8CA
}


.border-orange{
    border-right-color: var(--color-site-1) !important;
}

label {
font-size:14px;
font-weight:500 ;
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .jdropdown-header {
        border: none;
        background: transparent;
    }
}
.jdropdown-header {
    padding-right: 30px !important;
    padding-top: 0;
    padding-left: 0;
}
.jdropdown-searchbar .jdropdown-container {
    left: 0;
    margin-top: 0;
}
.jdropdown-image-small {
    filter: invert(48%) sepia(38%) saturate(4587%) hue-rotate(358deg) brightness(99%) contrast(95%) !important;
}

.ps-4 {
    padding-left: 2rem !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: 15px;
}

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

.hotel-info span {
    display: block;
    font-size: 0.9em;
    color: #666;
}
 .fa-map-marker-alt::before {
  content: "\f3c5";
}

.fa-hotel::before {
  content: "\f594";
}

.fa-plane-departure::before {
    content: ""; /* Indispensable pour afficher le pseudo-élément */
    display: inline-block;
    width: 20px;  /* Ajustez la taille */
    height: 20px;
    
    /* 2. On applique la couleur souhaitée */
    background-color: var(--color-site-1); 

    /* 3. On définit le SVG comme un masque */
 -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2.5 19h19v2h-19v-2zm19.57-9.36c-.21-.8-1.04-1.28-1.84-1.06L14.92 10l-6.9-6.43-1.93.51 4.14 7.17-4.97 1.33-1.97-1.54-1.45.39 1.82 3.16.77 1.33 1.6-.43 15.31-4.1c.8-.22 1.28-1.05 1.07-1.85z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2.5 19h19v2h-19v-2zm19.57-9.36c-.21-.8-1.04-1.28-1.84-1.06L14.92 10l-6.9-6.43-1.93.51 4.14 7.17-4.97 1.33-1.97-1.54-1.45.39 1.82 3.16.77 1.33 1.6-.43 15.31-4.1c.8-.22 1.28-1.05 1.07-1.85z'/></svg>");
    /* 4. Options de rendu */
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    
    /* Alignement vertical par rapport au texte */
    vertical-align: middle;
    margin-right: 8px;
}

.FAQ .accordion a:after{
    position: absolute;
    top: calc(50% - 7px);
 right: 0;
    display: block;
    transition: all 0.3s;
}
.FAQ .accordion a[aria-expanded="true"]:after{
    font-family: "Font Awesome 5 Free";
    content: "\f068"
}
.FAQ .accordion a[aria-expanded="false"]:after{
    font-family: "Font Awesome 5 Free";
    content: "\f067"
}
/* État ouvert (Moins / Minus) */
.FAQ .accordion a[aria-expanded="true"]:after {
    content: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px; /* Ajustez selon votre design */
}

/* État fermé (Plus) */
.FAQ .accordion a[aria-expanded="false"]:after {
    content: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Cline x1='12' y1='5' x2='12' y2='19'%3E%3C/line%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
}
.FAQ .card {

--bs-card-border-color: none;
}

/* Chrome, Safari, Edge (WebKit) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

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

.input-spinner:before {
    content: "\f110";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    -webkit-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear;
    color: var(--color-site-1);
    top: 25px;
    position: absolute;
    left: 50%;
}

.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {

background: var(--color-site-1) !important;
border-color: var(--color-site-1) !important;
}



.btn.btn-secondary{

   color:#fff
}
 
.modal-header h6{
    font-size: 16px;
}


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