/* =Responsive Structure / mobile first
----------------------------------------------- */



@media (min-width: 370px) {
    
    
    
    
}

@media (min-width: 520px) {
    
    .calendarWrapper { margin-left: 0px; margin-right: 0px; }
    .volsListeWrapper { margin-left: 0px; margin-right: 0px; }
}



@media (min-width: 768px) {
   .headerRight .phoneWrapper { display: block; }
   .volDetailsItem { border-bottom: 1px solid var(--color-blue-20); display: flex; width: 100%; gap: 20px; }
   .volDetailsItem:last-child { border-bottom: 0; }
   .trajetInListeDetails:not(:first-child) { border-top: 1px solid var(--color-blue-20); }
   .departureWrapper { width: 50%; padding-bottom: 0; }
   .arrivalWrapper { width: 50%; border: 0; padding: 0;  }
   .excursion, .traverseeBateau { flex-direction: row; }
   .excursionInfos, .traverseeBateauInfos { width: 75%; }
   .tunnelTitleWrapper { flex-direction: row; align-items: center; gap: 20px; }
   .imageThumbnailWrapper .noteWrapper { display: block; }
   .SejourVignette { flex-direction: column; gap: 0; }
   .imageThumbnailWrapper { width: 100%; }
   .sejourVignetteHead { width: 100%; }
   .lightBoxContent { padding: 35px 50px; }
   .whiteBlock { padding: 50px 50px; }
   .assuranceBlockWrapper { padding: 20px 50px; }
   .itemBigDetail { flex-direction: row; gap: 50px; }
   .itemBigDetailLeft { width: 50%; }
   .itemBigDetailRight { width: 50%; }
   .warningBoxWrapper .inconWraning { width: 50px; }
   .clientsFormLine { flex-direction: row; gap: 20px; }
   .clientsFormField { flex-basis: 25%; }
   .clientsFormField select { width: 100%; }
   h2 .smallPart { display: inline; }
   .tunnelMainParticipantsBottom .tunnelLeft { flex-direction: row; justify-content: space-between;  }
}




@media (min-width: 1025px) {
     
    .tunnelMain:not(.tunnelMainVolsListe) { display: flex; gap: 20px; }
    .tunnelMain .hebergementWrapper { width: 25%; }
    .tunnelMain .volsWrapper { width: 50%; }
    .tunnelMain .devisWrapper { width: 25%; }
    
    .tunnelBreadcrumb { display: flex; }
    
    .tunnelMain .tunnelLeft { width: 75%; }
    .footer .main {flex-direction: row-reverse; justify-content: flex-end; }
    .footerRight { width: 25%; }
    .footer .main .footerTxt { width: 50%; border-top: 1px solid var(--color-blue-20); padding-top: 25px; }
    .footer .main .footerLinksList { width: 25%; border-top: 1px solid var(--color-blue-20); padding-top: 25px; }
    .tunnelMainVolsListe + .footer .main .footerLinksList { width: 20%; }
  
    .calendarWrapper { padding-left: 7%; padding-right: 7%; }
    .calendarLine .day .prix { font-size: 12px; }
    .tunnelTitleWrapper h1 { font-size: 24px; }
    .tunnelTitleWrapper .retourPrecedent { right: 20px; }
    
    .patienceCard { padding: 45px 90px; }
    .patienceWrapper { padding-top: 135px; padding-bottom: 135px; background-position-y: 20px; background-size: 180px auto; }
    .patienceWrapper .loaderIcons { max-width: 80px; }
    
    .calendarBottom { flex-direction: row; align-items: flex-start; justify-content: space-between; }
    .calendarBottomLegende { text-align: right; }
    .widgetTitle { flex-direction: row; align-items: center; justify-content: space-between; }
	
    .prevMonthArrow, .nextMonthArrow { display: block; }
	
    .trajetInListe { flex-direction: row; transition: background 0.2s ease; }
    
    .trajetActionBlock { width: 140px; text-align: center; flex-direction: column; gap: 10px; align-self: center; }
    .trajetInListeDetailsWrapper { width: calc(100% - 160px); }
    .trajetInListeDetails { display: flex; gap: 20px; width: 100%; }
    .trajetInListeDetails .titleAR { min-width: 100px; }
    .trajetInListe .volsDetailsListe { width: calc(100% - 120px); }
    .arrivalWrapper { flex-direction: row; justify-content: space-between;  }
    .arrivalDetails {text-align: right; display: block; }
    .arrivalDetails .transfertInfos { display: block; margin-top: 3px; }
    .arrivalDetails .transfertCompagnie { margin-right: 10px; float: left; position: relative; top: 4px; }
    .trajetBagageWrapper { flex-direction: column;  }
    .trajetBagageWrapper .iconbagageTrajet { width: auto; height: 40px; }
    
    .filtersToggle { text-decoration: none; cursor: default; }
    .hiddenContentOnMobile .filtersContent  { display: block; }
    
    .tunnelMainVolsListeInner { display: flex; gap: 20px; width: 100%; }
    .tunnelMainVolsListeInner .filtresWrapper { width: 20%; }
    .tunnelMainVolsListeInner .volsListeWrapper { width: 80%; }
    
    .calendarLoader { background-size: 509px auto; }
    
    .precalendar { display: flex; gap: 20px; justify-content: space-between; }
    .calendarMonthWrapper > label { display: block; margin-bottom: 5px; }
    .calendarMonthWrapper { display: block; }
	

    .pensionsListe { flex-direction: row; }
    .pensionsListe > li { width: 20%; }
    .pensionsListe > li > label { height: 100%; padding: 50px 10px; text-align: center; display: flex; align-items: center; flex-direction: column; justify-content: center; }
    .pensionsListe li > input[type="radio"] { top: 10px;  transform: none;  }
    .pensionTitre { display: block; margin-bottom: 4px}
    
    .typeChambreInfos, .excursionInfos, .traverseeBateauInfos, .transfertChoix .infosChoixWrapper, .locationVehicule .infosChoixWrapper { flex-direction: row; gap: 50px; align-items: center; }
    .locationVehicule .infosChoixWrapper { justify-content: space-between; }
    
    .typeChambrePrixWrapper, .transfertChoix .prixChoix { width: 25%; }
    .typeChambreDetails, .transfertChoix .infosChoix { width: 75%; padding: 10px 0; }
    .typeChambrePrixComments, .commentPrixChoix { display: block; }
    .TypeChambreListe li > .radioTypeChambre, .excursion, .traverseeBateau, .transfertChoix, .locationVehicule { gap: max(30px, 3%); }
    
    .locationVehicule .infosChoix { width: calc(100% - 340px); }
    .locationVehicule .prixChoix { width: 100px; }
    .locationVehicule .plusMoinsWrapper { max-width: 140px; }
    


    .devisWrapper .btnWrapper.reserveVolsWrapperBottom { display: none; }
    
    .passengersSectionTitle { margin-bottom: 0; }
    .passengersFormLine, .passengersFormLineHead { display: flex; gap: 20px;  }
    .passengersFormLineHead { border-top: 0;  }
    .passengersFormLineTitle { display: none; }
    .passengersFormLine:not(.passengersFormLineHead) label { display: none; }
    
    .passengersFormLine .passengersFormCivilite { width: 10%; }
    .passengersFormLine .passengersFormNom { width: 25%; }
    .passengersFormLine .passengersFormPrenom { width: 25%; }
    .passengersFormLine .passengersFormDate { width: 25%; }
    .passengersFormLine .passengersFormBagages { width: 15%; padding-top: 4px; margin-bottom: 0; }
    
    .carnetsVoyageWrapper { display: flex; }
    .carnetVoyage { border-bottom: 0; border-right: 1px solid var(--color-blue-50); width: 50%; display: flex; align-items: center; gap: 20px; }
    .carnetVoyage:last-child { border-right: 0; } 
    
    .btnMainWrapperParticipants { flex-direction: row; justify-content: space-between; }
    
    .assuranceBlockWrapper { flex-direction: row; align-items: center; gap: 50px; }
    .assuranceBlockWrapper .assuranceBlockInfos { width: 80%; }
    .assuranceBlockWrapper .assurancePrixInfos { width: 20%; }
  
    .btnMainWrapperConfirmation { flex-direction: row; justify-content: space-between; align-items: center; }
    .btnMainWrapperConfirmation .btnWrapper { margin-top: 0; }
    
    .lightBoxContent.bigLightbox { max-width: 80%; flex-basis: 80%; }
    
}


@media (min-width: 1080px) {
    
    .whiteBlockHalf { width: 60%; }
    .editBtnWrapper { margin-top: 0; position: absolute; z-index: 1; right: 50px; bottom: 50px; transform: translateY(10px); }
    
    
}

@media (min-width: 1225px) {
    .volsWrapperHead { position: relative; }
    .volsWrapperHead .prixParPersonneWrapper { position: absolute; z-index: 1; right: 20px; top: -9px; }
    
}

@media (min-width: 1440px) {
    .chambresLoader { background-size: 920px auto; }
    .pensionsLoader { background-size: 920px auto; }
    
}