/* Ce CSS est à inclure dans WEBResa*/


.etape3 .participant .login .btn-loginDialog,
.etape3 .participant .login .btn-dialog,
.etape3 .billet .login .btn-loginDialog,
.etape3 .billet .login .btn-dialog,
.etape3 .infos .login .btn-loginDialog,
.etape3 .infos .login .btn-dialog {
  height: 2em;
  padding: 0 1em;
  font-size: 1em;
  font-weight: 400;
  color: #fff;
  line-height: 1;
  background-color: #9dc10b;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}

:root {
  --color-green-light: #b3d80e;
  --color-green-med: #799340;
  --color-green-dark: #65723a;
  --color-green-very-dark: #404531;
  --color-dark: #242424;
  --color-beige: #FBF8F0;
  --color-beige-dark: #EAE4D4;
  --color-lime: #EBF9C5;
  --color-violet: #A26CAF;
  --color-violet-light: #FCEEFF;
  --color-violet-dark: #5C5681;
  --color-grey: #c5c5c5;
  --color-grey-light: #EEE;
  --color-yellow: #C6982B;
  --color-yellow-light: #fffdd9;
  --color-blue: #579DCF;
  --color-red: #df5232;
  --color-pink: #C45C7F;
  --color-brown: #CDC6B6;
  --color-brown-light: #EEEAE0;
  --color-white: #fff;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;

  --h-btn: 52px;
}


html,
body {
  background-color: var(--color-beige);
  color: var(--color-dark);
}


/*Text*/
h1,
h2,
h3,
h4 {
  color: var(--color-dark);
}


select {
  color: var(--color-dark);
}

.sstotal,
.sstotal .prix,
.devis.total,
.devis.total .prix,
.resume .recap .total .row-total {
  color: var(--color-dark) !important;
  font-weight: 700 !important;
}

.color-row0 .dates {
  margin: 8px 0;
}

.step h3 {
  color: var(--color-grey) !important;
}

.etape2 .voyage h4 {
  font-weight: 700;
  margin-bottom: 4px;
}

.step .h3-actif {
  color: var(--color-dark) !important;
}

.text-primary {
  color: var(--color-dark) !important;
}

.etape3 .resume {
  font-size: 1rem !important;
}


/*Boutons*/
.btn-primary {
  position: relative;
  background: var(--color-green-light) !important;
  border: 1px solid var(--color-green-very-dark) !important;
  transition-duration: 0.2s;
  transition: all;
  color: var(--color-dark) !important;
  height: var(--h-btn);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
}

.form-group:has(input.btn-primary)::after,
.bnt-inscription::after,
.bnt-reserver::after {

  content: '';
  display: block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg width='19' height='12' viewBox='0 0 19 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.39828 7.84448L16.5586 4.68341M16.5586 4.68341L10.4998 1.38733M16.5586 4.68341L12.6986 10.2507' stroke='%23242424' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;

}

.btn-primary:hover {
  background: var(--color-lime) !important;
}

.bnt-inscription,
.bnt-info-options, 
.bnt-reserver {
  position:relative;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border: 1px solid var(--color-dark) !important;
  border-radius: var(--radius-md) !important;
  color: var(--color-dark) !important;
  transition: all 200ms !important;
}

.bnt-inscription,
.bnt-actif {
  background: var(--color-green-light) !important;
}

.bnt-inscription:hover,
.bnt-actif:hover {
  background: var(--color-lime) !important;
}

.bnt-info-options {
  background: var(--color-white) !important;
  height: 100% !important;
}

.bnt-info-options:hover {
  background: var(--color-grey-light) !important;
}

.bnt-reserver:disabled {
  background:var(--color-beige) !important;
}

.bnt-inscription {
  margin-left:auto !important;
  margin-right:0 !important;
}

.bnt-reserver {
  	position:relative;
    margin-left:auto !important;
    margin-right:auto !important;
}

.bnt-reserver::before {
  content:'';
  position: absolute;
  border-radius:8px;
  top:2px;
  left:2px;
  right:2px;
  bottom:2px;
  display: hidden;
  align-items: center;
  justify-content:center;

}

.bnt-reserver:disabled::before {
  content:'Complet';
  display: flex;
  background:var(--color-beige);
  z-index:1;
}

.color-row0 {
  background: var(--color-beige-dark) !important;
}
.color-row1 {
  background: var(--color-beige) !important;
}

.bnt-inscription::after,
.bnt-actif::after,
.bnt-reserver::after {
  margin-left: 8px !important;
  transform: translateX(0px) translateZ(0);
  transition: all 200ms !important;
}

.bnt-inscription:hover::after,
.bnt-actif:hover::after {
  transform: translateX(4px) translateZ(0);
}

.ui-datepicker-next {
  background-color:var(--color-green-light) !important;
}
.ui-datepicker-prev {
  background-color:var(--color-green-light) !important;
}

/*Steps */
.step-off {
  background: var(--color-brown);
  color: var(--color-beige) !important;
  font-size: 1.2rem !important;
}

.step-actif {
  background-color: var(--color-green-light) !important;
  border: 1px solid var(--color-dark);
  color: var(--color-dark) !important;
  font-size: 1.2rem !important;
}

/*Formulaire*/
.form-control {
  border: 1px solid var(--color-dark);
}

.form-group label {
  color: var(--color-dar);
}

/* Blocs */

.criteres,
.devis:not(.bnts):not(.total) {
  background: var(--color-white) !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--color-dark) !important;
}

.bloc-dates-accompagne .row .dates-tarifs .tarifs .row-tarifs-header {
  height: auto !important;
}

.bloc-dates-accompagne .row-header {
  padding:1.2rem 0 !important;
}


.bloc-dates-accompagne .row-header .reservation, 
.bloc-dates-accompagne .row-header .dates-tarifs,
.bloc-dates-accompagne .row-header .dates,
.bloc-dates-accompagne .row-header .tarif,
.bloc-dates-accompagne .row-header .row-reservation-header{
  padding:0 !important;
  color:var(--color-dark) !important;
}

.row-header .tarifs{
  padding:0 !important;
}

.row-reservation-header .color-titre {
  padding:0 !important;
}

.bloc-dates-accompagne .row .dates-tarifs .tarifs .row-tarifs-header {
  align-items:center !important;
}

.devis.total,
.participant,
.infos {
  background-color: var(--color-white) !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--color-green-dark) !important;
}

.etape3 .resume {
  position: sticky;
  top: 0;
  background-color: var(--color-beige) !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--color-green-dark) !important;
}

.etape4 .resume {
  background-color: var(--color-white) !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--color-green-dark) !important;
}

.reduction {
  background-color: var(--color-lime) !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--color-green-dark) !important;
}

.requis {
  margin-left: 0.15rem !important;
}

.etape4 .resume .reduction .wrapper input[type=text],
.etape5 .resume .reduction .wrapper input[type=text],
.etape6 .resume .reduction .wrapper input[type=text],
.etape4-confirmation .resume .reduction .wrapper input[type=text],
.etape5-confirmation .resume .reduction .wrapper input[type=text] {
  border: 1px solid var(--color-dark);
}

/*Message d'erreurs  et d'alerte */
.erreur-valid {
  border: 1px solid var(--color-red);
  /* color:var(--color-red); */
  font-weight: 700 !important;
  box-shadow: var(--shadow-md);
}

.message-agence {
  border: 1px solid #f1dd83;
  background-color: var(--color-yellow-light) !important;
  color: var(--color-white) !important;
  border-radius: var(--radius-lg);
}

.conditions input {
  height: 20px !important;
  width: 20px !important;
  background-color: var(--color-green-light) !important;
  cursor: pointer !important;
  border: 1px solid #242424 !important;
  color: var(--color-dark) !important;
}

.etat2,
.etape3 {
  color: var(--color-dark) !important;
}

.etat2::before {
  background-color: var(--color-green-light) !important;
  border: 1px solid var(--color-dark) !important;
  box-shadow: var(--shadow-md) !important;
}

.etat3::before {
  background-color: var(--color-red) !important;
  border: 1px solid var(--color-dark) !important;
  box-shadow: var(--shadow-md) !important;
}


/* Widget booking */
/* 
html:has(#ContentPlaceHolder1_pnlDatesAccompagne),
body:has(#ContentPlaceHolder1_pnlDatesAccompagne),
html:has(#ContentPlaceHolder1_pnlDatesLiberte),
body:has(#ContentPlaceHolder1_pnlDatesLiberte) {
  background-color: var(--color-white) !important;
} */

/* */

#webresaBookingWidgetIframe .bnt {
  color: var(--color-dark) !important;
}

.bloc-dates-accompagne .row .dates-tarifs,
.bloc-dates-accompagne .row .reservation {
  max-width: 100% !important;
}

.bloc-dates-accompagne .tarif {
  font-weight: 700;
  margin: 0 8px !important;
}

.row-tarifs .tarif {
  margin: 0 !important;
}


.bloc-dates-accompagne .row .dates-tarifs .commentaire .row-commentaire span {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem;
  background: var(--color-beige-dark) !important;
  border: 1px solid var(--color-green-brown) !important;
  border-radius: 4px;
  text-align: left !important;
  font-size: 0.8rem !important;
  line-height: 1rem;
}

.bloc-dates-accompagne .row .dates-tarifs .commentaire .row-commentaire span::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z' stroke='%23242424' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
  margin-right: 4px;
}

.bloc-dates-accompagne .row .dates-tarifs .tarifs .row-tarifs-header {
  position: relative !important;
  top:unset !important;
}

@media screen and (max-width: 830px) {
  .bloc-dates-accompagne .row .dates-tarifs .commentaire .row-commentaire span {
    width: max-content !important;
  }

  .row-dates {
    width: max-content !important;
  }

  .bloc-dates-accompagne .tarif {
    width: max-content !important;
  }

  .bloc-dates-accompagne .row-reservation {
    height: 100% !important;
    flex-direction: column !important;
  }

  .bloc-dates-accompagne .row .reservation .row-reservation .etat {
    width: max-content !important;
    margin-left: auto !important;
    margin-right: 0;

  }

  .bloc-dates-accompagne .row-reservation {
    height: 100% !important;
  }

  .bloc-dates-accompagne .row .reservation .row-reservation .bnt .bnt-info-options {
    padding: 0.2rem 0.8rem !important;
    width: max-content !important;
    margin-left:auto !important;
    margin-right:8px !important;
  }

  .bloc-dates-accompagne .row .reservation .row-reservation .bnt {
    width: 100% !important;
  }

  .bloc-dates-accompagne .row-reservation {
    justify-content: space-between !important;
  }
}

@media screen and (max-width: 570px) {
  .bloc-dates-accompagne .row .reservation .row-reservation .etat {
    margin-left: 0 !important;
    margin-right:0px !important;
  }
}


/* POP UP*/

.info-options {
  background-color: var(--color-white) !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--color-green-dark) !important;
}