:root {
	
	--color-noce:#FF00A4;
	--color-mariage:#00A9D5;
	--color-poker:#ffdc01;
	--color-general:#FF00A4;
}

pre {white-space: inherit;}
.infoDevis { margin: 10px 0;}
.footerInfoPaiement { display: flex; justify-content: space-evenly; font-size: 14px; font-weight: bold; margin: 10px; }
.cadreAgence { color: var(--color-blue-60); border: 1px solid var(--color-orange); text-align: center; background-color: var(--color-orange-10); width: 100%; padding: 20px 0; border-radius: 4px;}
.required {color: var(--color-blue-50);}
.errorMessage { color: #CC0000; font-weight: bolder; }
.img-footer { background: var(--color-blue-60);}


/* ---- pop-up verif choix gds ---- */
.choixvolclasse  {	padding-top: 5px; border-top: 1px solid var(--color-blue-50);}
.separator { padding-bottom: 5px; border-bottom: 1px solid var(--color-blue-50);}
.choixvolclasse td { padding: 0px 5px 0px 5px;}
.numvol { width: 10% !important;}
.dateVol {	width: 30% !important;}
.classeResaContainer {	width: 60% !important;	position: relative;}

.pvType1 {	border-bottom: 3px solid green;}
.pvType2 {	border-bottom: 3px solid orange;}
.pvType3 {	border-bottom: 3px solid red;}

.pvNonDispo {	color: red;}
.pvPasAssezDispo {	color: orange;}
.pvUnDef {	color: purple;}
.pvPasDansContrat {	color: red;}
.pvIncompatible { color: red; }
.volNonCompatibleConnexion { color: red; }
.raisonNonVendable { display: none; }
.raisonNonVendable { display: none;	position: absolute;	background-color: white;	font-weight: bold;}
.legendTypeClasse {	padding-left: 25px;	text-align: left; }
.classeSelectionnee { background-color: var(--color-blue-50); color: white; }
.divlisteLimit {  width: 100%;}
.popupContentGDS {display: flex; gap: 10px; flex-direction: column; justify-content: center; align-items: center; text-align: center; vertical-align: middle;  margin: 10px; }
.popupContentGDS table { display: inline;}
.popupContentColumn{	display: flex;	gap : 10px; flex-direction: column;}
.imageThumbnailWrapper {width: 100%}

/* ---- fin verif choix gds ---- */

/* ---- PopUp recadrer hotel ---- */

.popupContent{	display: flex;	gap : 10px;}
.popup_left, #floatform, .hebergementItem{ display: flex; flex-direction: column;}
.popup_full { border: 1px solid var(--color-orange); border-radius: 10px; padding: 20px; margin: 20px; width: 100%;}
.popup_left, .popup_right{	border: 1px solid var(--color-orange); border-radius: 10px; padding: 20px; margin: 20px; width: 50%;}

.popup_full .infoHotel { width: 100%; }
.infoHotel { display: flex; width: 90%; gap: 5px;}
.rowAligneCenter { display: flex; align-items: center; width: 100%; justify-content: space-between;}
.sortable { cursor: grab;}

.divRecherche { display: flex; width: 100%; align-items: center; justify-content: space-between; margin: 5px 0;}
.divRecherche input, .divRecherche select, .cardFormContent select, .cardFormContent input { border: 1px solid var(--color-blue-50); border-radius: 5px; width: 75%; color: var(--color-blue-50);}

.lstProduitCp{ overflow: auto; display: flex; height: 350px; font-size: 12px; color: #e84d0e; flex-direction: column; gap:5px;}
.lstProduitCp li { text-align: justify;  list-style-type: none;}
.lstProduitCp li .item-desc {}
.lstProduitCp li div {display: flex;}
.lstProduitCp tr td, .lstProduitCp tr { display: flex;flex-direction: column;}
.lstProduitCp tr {text-align: justify;}
.lstProduitCp .plusMoinsWrapper .moinsLink, .lstProduitCp .plusMoinsWrapper .plusLink {   width: 20px;  height: 20px;  font-size: 14px;}
.lstProduitCp .plusMoins .number {   font-size: 14px; }

.descriptionText {font-size: smaller; color: var(--color-grey);}
.ui-state-highlight { border: 1px solid var(--color-orange-50); background: var(--color-orange-20); color: var(--color-orange);}
#loading{ display:none; color:var(--color-orange);  font-style:italic;}

/* ---- Fin PopUp recadrer hotel ---- */

/* -- Composant -- */
.squareCheckbox { display: none; }

.squareCheckboxLabel::before {content: ""; display: inline-block;	width: 20px; height: 20px;	border: 2px solid var(--color-blue-20);	background-color: var(--color-blue-20);	vertical-align: middle !important; margin-right: 10px !important; transition: background-color 0.3s, border-color 0.3s !important; border-radius: 4px !important; }

.squareCheckbox:checked + .squareCheckboxLabel::before { background-color: var(--color-blue-50);	border-color: var(--color-blue-50);	content: "\2713"; color: white;	font-weight: bold;	text-align: center;	line-height: 20px; }

/* -- End -- */

/* ---- Composant transport ---- */

/* WarningBox transport changement aeroport */
@media (min-width: 768px) {
	.warningChangeAirport { align-items: center !important; padding: 5px 20px 5px 20px !important;}
	.iconWarningChangeAirport { width: 30px !important;	}
	.txtWarningChangeAirport { font-size: 12px !important;}	
}

@media (max-width: 950px) {
  .btnDesktopChambre { display: none !important; }
  .reversePanierMobile { display: flex; flex-direction: column-reverse; }
}

/* +1 jour apres le depart */
.oneMoreDayDepart {display: inline-block; position: relative; border-radius: 25%; background-color: var(--color-blue-10); font-size: 10px; color: var(--color-blue); width: 18px; height: 18px; text-align: center; line-height: 18px; font-weight: bold; border: 1px solid var(--color-blue); margin-left: 4px;}
.cadreOneMoreDayDepart { color: var(--color-blue); border: 1px solid var(--color-blue); text-align: center; background-color: var(--color-blue-10); padding: 2px 5px; border-radius: 4px; }
.nbBagageWrapper { margin-top: 10px;}
.wrapperBagage { flex-direction: column;}

/* -- End Composant transport -- */

/* ---- Page participant ---- */

/* Box cordonnee */
.boxCheckboxParticipant { display: flex; }

.labelCheckboxCoordonne { margin-left: 5px;	font-size: 16px !important;}
.squareCheckboxLabel { padding: 0px !important;	margin-bottom: 0px !important;}

/* Box participant | information */
.titlePersonTravel { margin-bottom: 10px !important; }
.warningPersonTravel { padding: 10px 20px 10px 20px !important; margin: 10px 0px !important; }

@media (min-width: 992px) {
	.formPassager{ width: 85%; display: flex; gap: 20px; }
	.formPassager .passengersFormCivilite {width: 11.76%}
	.formPassager .passengersFormNom {width: 29.41%}
	.formPassager .passengersFormPrenom {width: 29.41%}
	.formPassager .passengersFormDate {width: 29.41%}
	
	.formBagage {width: 15%; display: flex; gap: 20px;}
	.formBagage .passengersFormBagages {width: 100%}
	.footerRight { display: flex; align-items: center; }
}

/* Assurance */
.blockFormAssurance {display: flex; flex-direction: column; gap: 20px}
.assuranceBlockWrapper { border: 1px solid var(--color-blue-20); padding: 10px 25px 10px 10px; border-radius: 12px; margin-bottom: 10px; transition: background-color 0.3s ease; display: flex; gap: 10px; position: relative; cursor: default; }
.assuranceBlockWrapper:hover { background-color: var(--color-blue-10); } 
.assuranceBlockWrapper.selected { background-color: var(--color-orange-10); border-color: var(--color-orange); } 
.assuranceBlockWrapper .imgChoix { border-radius: 4px; aspect-ratio: 16/9; max-width: 90px; margin: 0 auto; width: 100%; }
.assuranceBlockWrapper input[type="radio"] { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); z-index: 2; }
.assuranceBlockWrapper input[type="radio"]+label{ display: none;}
.assuranceBlockWrapper .infosChoixWrapperAssurance, .infosChoixWrapperAssurance { display: flex; gap: 10px; width: 100%; justify-content: space-between; flex-direction: column;}
.infosChoixAssurance {width: 75%;}
.prixAssuranceChoix {width: 25%;}
.assuranceBlockWrapper.selected { display: flex;}
.prixAssuranceChoix { color: var(--color-blue-50);  }

.AssuranceListeWrapper {position: relative;}
.assuranceLoader { display: flex; pointer-events: none; align-items: center; justify-content: center;  background: var(--color-white) url(/images/loader-chambres.png) no-repeat 0px 0px; background-size: 100% auto; border-radius: 4px; position: absolute; left: 0; right: 0; top: 0; height: 100%; z-index: 20;   }
.loaded .assuranceLoader { display: none; }

/* Carnet */
.carnetVoyageInfos {font-size: 12px;}

/* ---- End Page participant ---- */

/* ---- Page chambre ---- */


.TypeChambreListe input[type="radio"]:not(:disabled):not(:checked)+label+label:hover { background-color: var(--color-blue-10); }
.TypeChambreListe input[type="radio"]:checked+label+label , .excursion.checked, .traverseeBateau.checked {background-color: var(--color-orange-10);border-color: var(--color-orange);}
.TypeChambreListe input[type="radio"]:disabled+label+label { opacity: 0.4;}

.pensionsListe input[type="radio"] + label , .TypeChambreListe input[type="radio"]+label, .transfertChoix input[type="radio"]+label { display: none;}
.pensionsListe input[type="radio"]:disabled+label+label { opacity: 0.4;}

.pensionsListe input[type="radio"]:not(:disabled):not(:checked)+label+label:hover { background-color: var(--color-blue-10); }
.pensionsListe input[type="radio"]:checked+label+label { background-color: var(--color-orange-30);border-color: var(--color-orange);}

.transfertChoix input[type="radio"]+label+label { display: flex; align-items: center; gap: 10px; position: relative; cursor: default; width: 100%;}

.titreChambre {display: flex; align-items: center; gap: 10px;}
.typeChambreTitleBox, .typeVoitureTitleBox { display: flex; justify-content: space-between; }

.viewMoreChambreToggleWrapper, .viewMoreVoitureToggleWrapper { font-size: 12px; color: var(--color-blue); }
.viewMoreChambreToggleWrapper > a, .viewMoreVoitureToggleWrapper > a { display: none; cursor: pointer; }
.viewMoreChambreToggleWrapper > a.selectedDetailChambre, .viewMoreVoitureToggleWrapper > a.selectedDetailVoiture  { display: block; }

.chambreBlockDetail, .voitureBlockDetail { position: relative; }
.chambreBlockDetail.smaller, .voitureBlockDetail.smaller { height: 350px; overflow: hidden; }
.chambreBlockDetail.smaller:before , .voitureBlockDetail.smaller:before { 
 content: ''; position: absolute; z-index: 10; left: 0; right: 0; bottom: 0; height: 120px;   border-radius: 4px;
 background: linear-gradient(0deg, rgba(191,201,207,1) 0%, rgba(191,201,207,0) 100%); 
 background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); 
}

.scrollArrowGradient {position: absolute; bottom: 0; left: 0; right: 0; height: 120px; background: none; display: flex; justify-content: center; align-items: flex-end; pointer-events: none; z-index: 11;}
.scrollToggle { pointer-events: auto; background: white; border-radius: 50%; font-size: 24px; width: 40px; height: 40px; line-height: 36px; text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,0.2); text-decoration: none; color: black; margin-bottom: 10px;}
.scrollArrowGradient .scrollToggle.close {margin-bottom: -40px;}
.chambrePersonneBlock, .chambrePensionBlock{  padding: 0 15px;}

.texte_sur_button_afficher{	position: absolute; font-size: 12px; transform: translate(-25%, 75%);}
.texte_sur_button_afficher.newChambre{	transform: translate(0%, 250%);}

@media (max-width: 950px) {
	.chambreBlockDetail.smaller, .voitureBlockDetail.smaller { height: 350px; overflow: hidden; margin-bottom: 50px; }
  	.filtersContent.collapsed {max-height: 60px; overflow: hidden; position: relative;}
}

@media (max-width: 990px) {
	.filtreBlockVol { display: flex; align-items: center; justify-content: space-between;}
	.filtreViewMoreVol {display: block !important;}
	.toggleMoreLess { display: block; margin-top: 10px; font-weight: bold; cursor: pointer; }
	.hiddenContentOnMobile .filtersContent {display: block !important;}
	.chambrePersonneBlock {margin-top: 20px;}
}

@media (min-width: 991px) {
	.filtreViewMoreVol {display: none;}
	.assuranceBlockWrapper .infosChoixWrapperAssurance, .infosChoixWrapperAssurance {align-items: center; flex-direction: row;}
	.plusMoinsWrapper .moinsLink.miniatrue, .plusMoinsWrapper .plusLink.miniatrue {width: 25px; height: 25px;}
}

.radioTypeChambreParent { display: flex; gap: max(30px, 3%);}
.TypeChambreListe li > .radioTypeChambre {display: flex;flex-direction: column; align-items: normal;}
.plusLinkAdd { width: 40px; height: 40px; display: flex; justify-content: center; align-items: center;  background: transparent; border: 1.5px solid var(--color-blue-50); cursor: pointer; border-radius: 30px; text-decoration: none; font-size: 20px; color: var(--color-blue-50); }
.plusLinkAdd:hover { background: var(--color-blue-20); color: var(--color-blue-50);}
.separator-with-plus {display: flex; align-items: center; justify-content: center; width: 100%; margin: 20px 0;}
.separator-with-plus::before,
.separator-with-plus::after {content: '';flex: 1;height: 1px;background: var(--color-blue-50);margin: 0 15px;}
.plusMoinsWrapper .moinsLink.disabled-link, .plusMoinsWrapper .plusLink.disabled-link { pointer-events: none; color: #A4A4A4; text-decoration: none; border-color: #A4A4A4; background-color: var(--color-light); }	

.TypeTransfertListeWrapper {position: relative;}
.transfertLoader { display: flex; pointer-events: none; align-items: center; justify-content: center;  background: var(--color-white) url(/images/loader-chambres.png) no-repeat 0px 0px; background-size: 100% auto; border-radius: 4px; position: absolute; left: 0; right: 0; top: 0; height: 100%; z-index: 20;   }
.loaded .transfertLoader { display: none; }
.blockInfoVoiture { display: flex; flex-direction: column; gap: 10px; }
.absoHautDroit{position: absolute; top: 5px; right: 5px;}


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

@media (min-width: 991px) {
	.blockInfoVoiture { flex-direction: row; }
	.infoVoitureCourt { width: 20%;}
	.infoVoitureLong { width: 30%;}
}


.editionALaCarte{ display: flex; margin: 5px 0; gap: 5px; align-items: center;}

/* ---- End Page chambre ---- */

/* ---- Card Panier ---- */
.veepeeReferenceProduit, .descriptifHotel {	font-size: 12px; font-weight: normal; }
li.surTitre { color: var(--color-orange); font-weight: bold; }
li.interneInfo, sup.interneInfo { font-size: 10px; font-style: italic; color: var(--color-blue-70); }

.btn.btnInlineMain { background: transparent; color: var(--color-orange);   border-color: var(--color-orange); border-radius:10px;}
.btn.btnInlineMain:hover { background: transparent; color: var(--color-grey);  border-color: var(--color-grey);}

.lienWrapper {display: flex; flex-direction: column; align-items: flex-end;}
.ligneDevisWrapper { font-size: 12px; text-align: right;}

.priceTable .ligne-tarif td.changeProduit { border-top: dashed var(--color-orange) 2px;}
.ligne-tarif .ligneDevisNomHotelAbsolute { position: absolute; color: var(--color-orange); top: -20px; text-align: right; background: white; padding: 1px; width: auto; right: auto;}
.ligne-tarif .ligneDevisNomHotelAbsolute a { color: var(--color-orange);}


/* composant budget */ 
.detailTarif {border-bottom: 1px solid var(--color-blue-50); padding-bottom: 15px;}
.devisWrapper .priceWrapper { border-bottom: 1px solid var(--color-blue-50); display: inherit }
.lignePrix {display: flex; justify-content: space-between; align-items: center;}
.devisWrapper .priceWrapper .lignePrix { margin: 10px 0;}
.devisWrapper .priceWrapper .lignePrix .total { font-size: 28px; font-weight: bold;}
.tunnelColonnePrixLoader { display: flex; pointer-events: none; align-items: center; justify-content: center; background: var(--color-white) url(/images/bg-colonne.png) no-repeat 0px 0px; background-size: 100%  auto; position: absolute; left: 0; right: 0; top: 0; height: 100%; z-index: 5; }
.loaded .tunnelColonnePrixLoader { display: none; }

.wrapper { background: white; display: flex;  flex-direction: column;}
.info_budget { background: white; padding: 20px; border-radius: 4px 4px 0 0; }
.budgetWrapper.info_budget { padding: 0px;}

@media (min-width: 992px) { 
	.info_budget { position: sticky; top: 0px; background: white; z-index: 2;padding: 20px; border-radius: 4px;}
	.wrapper { background:none; height:100%}
}



/* ---- End Card Panier ---- */

/* ---- Fil d Ariane ---- */

.tunnelBreadcrumb ul li:not(.backLink) span { display: block; border: 1px solid var(--color-blue-50); border-radius: 4px; padding: 5px 10px; color: var(--color-blue-50);  }
.mobileHeaderAriane { display: none;}
.mobileHeaderAriane a {text-decoration: none;}
.mobileHeaderAriane ul li:not(.backLink) span { display: block; border: 1px solid var(--color-blue-50); border-radius: 4px; padding: 5px; color: var(--color-blue-50);  }
.mobileHeaderAriane, .headerRight .phoneWrapper, .proLink { position: relative; min-height: 50px; padding-left: 10px; }
.mobileHeaderAriane:before, .headerRight .phoneWrapper:before, .proLink:before { content: ''; background: var(--color-blue-50); position: absolute; top: 0; bottom: 0; width: 1px; z-index: 2; left: -10px;  }
.mobileHeaderAriane { display: none; }
.mobileHeaderAriane ul {display: flex; flex-wrap: wrap; gap: 10px; align-items: center; max-width: 100%;}
.mobileHeaderAriane ul li:not(.backLink) a { display: block; border: 1px solid var(--color-blue-50); border-radius: 4px; padding: 5px; color: var(--color-blue-50);  }
.mobileHeaderAriane ul li.past a { color: var(--color-blue); text-decoration: none; }
.mobileHeaderAriane ul li.past a:hover { background: var(--color-blue-50); }
.mobileHeaderAriane ul li.active a { color: var(--color-white); background: var(--color-blue-50); text-decoration: none; }
.mobileHeaderAriane ul li.backLink a { color: var(--color-white); display: flex; gap: 8px; }
.mobileHeaderAriane ul li.backLink a:hover { text-decoration: underline; }
.mobileHeaderAriane ul li { margin: 0; padding: 0;line-height: 1;}
.retourArianeMobile {color: var(--color-blue-50) !important;}

@media (max-width: 992px) { 
	.mobileHeaderAriane {padding-top: 8px; padding-bottom: 8px; background-color: var(--color-white);}
	.mobileHeaderAriane {display: flex !important;}
}
/* ---- End Fil d Ariane ---- */

/* ---- Page vols ---- */
.arrivalInfosWrapper , .departureInfosWrapper {display: flex; flex-direction: column; align-items: flex-start;}
.gestionClasseAllerRetour{display: flex; justify-content: space-between;}
.radioClasseVol tr { display: flex; flex-direction: column;}
.nbBagageWrapper .iconbagageTrajet { height: 20px;}


/* ---- End Page vols ---- */

/* --- Page Grille --- */
.selectVille {width: 100%;}
.bonusRowStyle { margin-top: 5px; font-style: italic;}
.existeEnVolDirect { width: 100%; height: 5px; background-color: var(--color-orange-50); position: absolute; bottom: 0; }
.existeEnVolDirectLegende { width: 15px; height: 5px; background-color: var(--color-orange-50); }
.existeEnVolDirectLegendeTexte { display: flex;align-items: center; gap: 5px;}
.calendarLine .day .dayLink.selected { border-color: var(--color-orange);}
@media (min-width: 992px) {
	.selectVille {width: auto;}
}
.hebergementWrapper .blockWrapper { background: var(--color-white); border-radius: 4px; padding: 20px; display: flex; flex-direction: column; position: relative; margin-bottom: 20px;}
a.nbPersonnesTrigger { background-color: var(--color-white); color: var(--color-blue-50); border: 1px solid var(--color-blue-50); padding: 7px 5px; font-size: 14px;  line-height: 1.2; border-radius: 4px; margin-bottom: 5px; outline: 0; text-decoration: none; position: relative; display: inline-block;}
.blockWrapper p { margin-bottom: 10px; margin-top:0;}
form .villeDepartWrapper label,form .hebergementWrapper label  { color: var(--color-blue-70); }
.annimationLoader{ display: flex; pointer-events: none; align-items: center; justify-content: center; background-size: 100% auto; height: 100%;}
.annimationLoader .loader { z-index:7;}

.utilsProd { display:flex; align-items: center;}

.badgesWrapper .supplementsLinknoces a.badgeCode,
.badgesWrapper .supplementsLinkDouceur a.badgeCode,
.badgesWrapper .supplementsLinkannivmariage a.badgeCode  { cursor: pointer; border: 2px solid var(--color-blue-70); background: var(--color-blue-10);}
.badgesWrapper .supplementsLinkPoker a.badgeCode { cursor: pointer; border: 2px solid var(--color-blue-70);}

.supplementsLinknoces a, .surTitre .noces {  color: var(--color-noce);}
.supplementsLinkannivmariage a, .surTitre .anniv  {  color: var(--color-mariage);}
.supplementsLinkDouceur a {  color: var(--color-orange);}
.supplementsLinkPoker a {  color: var(--color-orange); background-color: var(--color-poker);}


/* ---- End Page Grille ---- */

/* ---- Page Confirmation ---- */
.confirmationParticipantsColumns {display: flex;gap: 10px;flex-direction: column;}
.confirmationParticipantColumn {padding: 15px 0;width: 100%;}

@media (min-width: 992px) {
	.confirmationParticipantsColumns {display: flex;gap: 50px;flex-direction: row;}
	.confirmationParticipantColumn {padding: 15px 0;width: 50%;}
}

.whiteBlockHalf .widgetTitle { display: none;}
.whiteBlock.collapsed { display: none;}

.accordion-section { display: block;	margin: 10px 0;}
.accordion-section.collapsed {	background: var(--color-white);}
.accordion-section h2 {	display: flex; justify-content: space-between; align-items: center;	padding: 0px 10px;}
.toggle-btn { font-size: 0.8em; margin-left: 10px; background: none; border: none; color: var(--color-blue-50); cursor: pointer;}

@media (min-width: 992px) {
 .tunnelMainConfirmation .tunnelLeft {  display: flex;  flex-direction: column;  justify-content: space-between; }
}

.confirmationThumbnail { border-radius: 4px; width: 68px; object-fit: contain;	height:auto;}
.transfertTrajetConfirmation {	padding: 10px 0;}
.transfertTrajetConfirmation .transfertTopLineLeft { flex-wrap: wrap;}
.cadreOneMoreDayDepart,
.transfertTrajetConfirmation .transfertNumber,
.transfertTrajetConfirmation .transfertHeure,
.transfertTrajetConfirmation .transfertLieu,
.transfertTrajetConfirmation .transfertLieuDetail{	font-size: 14px;}
.transfertTrajetConfirmation .transfertTopLineLeft, .transfertTrajetConfirmation .transfertLieu{	font-size: unset;}
.sectionVol {	padding: 15px 0; margin: 5px 0; border-bottom: 1px solid var(--color-blue-10);}
.whiteBlockHalf .txtWarningChangeAirport {  font-size: 16px !important;  }

/* ---- End Page Confirmation ---- */