/* based on https://codepen.io/suez/pen/RpNXOR & https://bootsnipp.com/snippets/3522X */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background: #aad989; /* #603 (bordeaux profond) -- #767873 -- #603 -- #6d071a; */
    font-family: "Elms Sans", sans-serif;
	font-size: 1rem;
}

/*-- verts -- #aad989 -- #63a498 -- #87e5ba -- #1cac78 */

main {
    margin: 25px auto ;
    padding: 0;
}

input, button {
  border: none;
  outline: none;
  background: none;
}

.tip {
  font-size: 20px;
  margin: 40px auto 50px;
  text-align: center;
}

/*-----CALENDRIER-----*/

  /* Style global pour moderniser la grille du calendrier */

  .ui-datepicker {
    background-color: #feeebd !important;
    padding: 5px !important;
  }

  .ui-datepicker-header { 
    font-family: "Dongle", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.75rem;
    padding: 0 !important;
  }

  .ui-state-default {
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 0.95rem !important;
  }

  .ui-datepicker .ui-datepicker-header .ui-datepicker-prev span {
    font-size: 2em !important;
  }


.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled {
    opacity: .35;
    filter: Alpha(Opacity=35);
    background-image: none;
}

/* TARGETER STRICTEMENT LES JOURS BLOQUÉS (Forçage CSS) */

/* --- STYLE 1 : UNIQUEMENT LES DATES RÉSERVÉES (en rouge et barré) --- */

td.jour-reserve, 
td.jour-reserve a, 
td.jour-reserve span {
  background-color: #f8d7da !important;    /* Rouge clair Bootstrap */
  color: #b02a37 !important;               /* Texte rouge foncé */
  text-decoration: line-through !important;/* Chiffre barré */
  opacity: 0.8 !important;
  cursor: not-allowed !important;
}

td.jour-reserve a:hover {
  background-color: #f8d7da !important;
  color: #b02a37 !important;
}

/* --- STYLE 2 : UNIQUEMENT LES DATES PASSÉES (opacifiées, non barrées) --- */

td.jour-passe, 
td.jour-passe a, 
td.jour-passe span {
  
    opacity: 0.7 !important;
    filter: Alpha(Opacity=70) !important;
    background-image: none;
}

/*------- prev / next -------*/

.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
    position: absolute;
    top: 2px;
    width: 1.8em;
    height: 1.8em;
}

.ui-datepicker-prev span,
.ui-datepicker-next span {
  background-image: none !important;
}

.ui-datepicker-prev:before,
.ui-datepicker-next:before {
  position: absolute;
  top: 15px;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ui-datepicker-prev:before {
  content: url('../img/icons/icon-double-left-1.png');
}

.ui-datepicker-next:before {
  content: url('../img/icons/icon-double-right-1.png');
}

/*--- custom styles ---*/

/* ==========================================
   STYLE UNIFIÉ ET CORRIGÉ POUR LA SÉLECTION
   ========================================== */

/* 1. TOUTE LA PLAGE (jours du milieu, début et fin inclus par défaut) */
td.jour-selectionne, 
td.jour-selectionne a.ui-state-default, 
td.jour-selectionne span.ui-state-default {
  background: rgba(13, 110, 253, 0.25) !important; /* Bleu translucide sur le fond crème */
  color: #fff !important;                       /* Texte bleu foncé */
  font-weight: normal !important;
  opacity: 1 !important;
}

/* au survol des jours de la plage */
td.jour-selectionne a.ui-state-default:hover {
  background: rgba(13, 110, 253, 0.4) !important;  /* Bleu un peu plus sombre au survol */
}

/* 2. EXTRÉMITÉ : LE JOUR DE DÉBUT STRICT */
td.date-debut, 
td.date-debut a.ui-state-default {
  background: #0d6efd !important;                   /* Bleu Bootstrap plein */
  color: #fff !important;                        /* Chiffre écrit en blanc */
  border-radius: 4px 0 0 4px !important;            /* Arrondi à gauche */
  font-weight: bold !important;
}

/* 3. EXTRÉMITÉ : LE JOUR DE FIN STRICT */
td.date-fin, 
td.date-fin a.ui-state-default {
  background: #0d6efd !important;                   /* Bleu Bootstrap plein (règle le problème du blanc sur blanc) */
  color: #fff !important;                        /* Chiffre écrit en blanc */
  border-radius: 0 4px 4px 0 !important;            /* Arrondi à gauche */
  font-weight: bold !important;
}

/*-----sliding doors-----*/

.main-container {
  overflow: hidden;
  position: relative;
  width: 900px;
  height: 675px;
  margin: 0 auto 25px;
  background: #fff;
  border-color: #6d071a;
  border-radius: 15px;
}

.form {
  position: relative;
  width: 640px;
  height: 100%;
  transition: transform 1.2s ease-in-out;
  padding: 50px 30px 0;
}

.sub-cont {
  overflow: hidden;
  position: absolute;
  left: 640px;
  top: 0;
  width: 900px;
  height: 100%;
  padding-left: 260px;
  background: #fff;
  transition: transform 1.2s ease-in-out;
}

.main-container.s--signup .sub-cont {
  transform: translate3d(-640px, 0, 0);
}

button {
  display: block;
  margin: 0 auto;
  width: 260px;
  height: 36px;
  border-radius: 30px;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}

.img {
  overflow: hidden;
  z-index: 2;
  position: absolute;
  left: 0;
  top: 0;
  width: 260px;
  height: 100%;
  padding-top: 360px;
}

.img:before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 900px;
  height: 100%;
  background: #1cac78;
  transition: transform 1.2s ease-in-out;
}

.img:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.main-container.s--signup .img:before {
  transform: translate3d(640px, 0, 0);
}

.img__text {
  z-index: 2;
  position: absolute;
  left: 0;
  top: 50px;
  width: 100%;
  padding: 0 20px;
  text-align: center;
  color: #fff;
  transition: transform 1.2s ease-in-out;
}

.img__text h2 {
  margin-bottom: 10px;
  font-weight: normal;
}

.img__text p.text-standard {
  font-size: 1rem;
  line-height: 1.5;
  text-align: justify;
}

.main-container.s--signup .img__text.m--up {
  transform: translateX(520px);
}

.img__text.m--in {
  transform: translateX(-520px);
}

.main-container.s--signup .img__text.m--in {
  transform: translateX(0);
}

.img__btn {
    overflow: hidden;
    z-index: 2;
    position: relative;
    width: 200px;
    height: 40px;
    margin: 0 auto;
    border-radius: 30px;
    background: transparent;
    color: #fff;
    text-transform: uppercase;
    font-size: 1rem;
    cursor: pointer;
}

.img__btn:after {
  content: "";
  z-index: 2;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 2px solid #fff;
  border-radius: 30px;
}

.img__btn span {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: transform 1.2s;
}

.img__btn span.m--in {
  transform: translateY(-72px);
}

.main-container.s--signup .img__btn span.m--in {
  transform: translateY(0);
}

.main-container.s--signup .img__btn span.m--up {
  transform: translateY(72px);
}

h2 {
  width: 100%;
  font-size: 26px;
  text-align: center;
}

label {
  display: block;
  width: 260px;
  margin: 25px auto 0;
  text-align: center;
}

label span {
  font-size: 12px;
  color: #cfcfcf;
  text-transform: uppercase;
}

.forgot-pass {
  margin-top: 15px;
  text-align: center;
  font-size: 12px;
  color: #cfcfcf;
}

.submit {
  margin-top: 40px;
  margin-bottom: 20px;
  background: #d4af7a;
  text-transform: uppercase;
}

.fb-btn {
  border: 2px solid #d3dae9;
  color: #8fa1c7;
}

.fb-btn span {
  font-weight: bold;
  color: #455a81;
}

.sign-in {
  transition-timing-function: ease-out;
}

.main-container.s--signup .sign-in {
  transition-timing-function: ease-in-out;
  transition-duration: 1.2s;
  transform: translate3d(640px, 0, 0);
}

.sign-up {
  transform: translate3d(-900px, 0, 0);
}

.main-container.s--signup .sign-up {
  transform: translate3d(0, 0, 0);
}

/*----- log-in form -----*/
/*-- verts -- #aad989 -- #63a498 -- #87e5ba -- #1cac78 */

.user_card { /* formulaire inscription */
	height: 400px;
	margin-top: auto;
	margin-bottom: auto;
	background: #87e5ba;
	position: relative;
	display: flex;
	justify-content: center;
	flex-direction: column;
	padding: 10px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius: 5px;
}

.brand_logo_container {
	position: absolute;
	height: 180px;
	width: 180px;
	top: -75px;
	border-radius: 50%;
	background: #fff;
	padding: 0px;
	text-align: center;
}

.brand_logo {
	height: 165px;
	width: 165px;
	border-radius: 50%;
	border: 1px solid white;
	margin-top: 8px;
}

.form_container {
	margin-top: 150px;
}

.login_btn {
    width: 100%;
    background: #1cac78 !important;
    color: white !important;
    font-size: 1rem;
    padding: 0;
}

.login_btn:focus {
	box-shadow: none !important;
	outline: 0px !important;
}

.validate_btn {
    width: 100%;
    background: #1cac78 !important;
    color: white !important;
    font-size: 1rem !important;
    font-weight: normal !important;
    padding: 0 15px;
}

.login_container {
	padding: 2rem;
}
/*
.input-group-text {
	background: #63a498 !important;
	color: white !important;
	border: 0 !important;
	border-radius: 0.25rem 0 0 0.25rem !important;
	font-weight: 400;
}
*/

/* aligne l'ensemble du groupe vers le haut */
.input-group {
  align-items: flex-start; 
}

/* aligne le texte et l'icône à l'intérieur du badge vers le haut */
.input-group-text {
  align-self: stretch;     /* Permet au fond gris de s'adapter si besoin */
  display: flex;
  align-items: flex-start; /* Aligne l'icône en haut */
  padding-top: 0.75rem;    /* Ajustez cette valeur pour aligner l'icône parfaitement avec la première ligne du textarea */
}

/* optionnel : s'assurer que le textarea prend bien le reste de l'espace */
.input_message {
  flex: 1;
}

textarea {
    width: 100%;           /* Occupe toute la largeur du conteneur parent */
	field-sizing: content; /* S'étire automatiquement selon le texte saisi */
	min-height: 3lh;       /* Fixe une hauteur minimale équivalente à 3 lignes de texte */
	max-height: 10lh;      /* Fixe une hauteur maximale de 10 lignes avant l'apparition d'un défilement */
	resize: none;          /* Désactive le redimensionnement manuel pour laisser l'automatique gérer */
}

.input-group-text {
    display: flex;
    align-items: center;
    padding: .75rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
    background: #63a498 !important;
	color: white !important;
	border: 0 !important;
	border-radius: 0.25rem 0 0 0.25rem !important;
}

.input_email,
.input_pass,
.input_name,
.input_surname,
.input_address,
.input_zipcode,
.input_city,
.input_phone,
.input_message,

.input_email:focus,
.input_pass:focus,
.input_name:focus,
.input_surname:focus,
.input_address:focus,
.input_zipcode:focus,
.input_city:focus,
.input_phone:focus,
.input_message:focus {
	box-shadow: none !important;
	outline: 0px !important;
	font-family: "Elms Sans", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.1rem;
}

/*-----flags-----*/

.dates-reminder-container {
  position: relative;
  width: 900px;
  margin: 0 auto;
}

/* force l'alignement de gauche à droite sur une seule ligne */
.image-radio-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 28px !important;
  flex-wrap: nowrap !important;
  width: 75px;
}

/* force le bouton et l'image à rester côte à côte */
.image-radio-wrapper {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 !important;
}

.image-radio-wrapper input[type="radio"] {
  margin: 0;
  flex-shrink: 0;
}

.image-radio-wrapper img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  display: block;
}

/* style du message textuel d'erreur */
label.error {
  color: #dc3545;
  font-size: 0.85em;
  margin-top: 5px;
  display: block;
}

/* style appliqué directement sur le champ de saisie incorrect */
input.error {
  border: 1px solid #dc3545;
  background-color: #fdf2f2;
}

.recover-pwd_btn {
    width: 100%;
    background: #1cac78 !important;
    color: white !important;
    font-size: 1rem !important;
    font-weight: normal !important;
    padding: 0;
}

.recover-pwd_btn:focus {
	box-shadow: none !important;
	outline: 0px !important;
}

/*----- sign-up form -- based on https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=simple-registration-form -----*/

.form-control {
	height: 40px;
	box-shadow: none;
	color: #969fa4;
}

.form-control:focus {
	border-color: #5cb85c;
}

.form-control, .btn {        
	border-radius: 3px;
}

.signup-form {
	width: 575px;
	margin: 25px auto;
	padding: 10px 10px 0 10px;
  	font-size: 1rem;
}

.signup-form form {
	color: #999;
	border-radius: 5px;
	margin-bottom: 10px;
	background: #87e5ba;
	padding: 25px 50px 10px 50px;
}

.signup-form h2 {
	color: #fff;
	margin: 0 0 15px;
	position: relative;
	text-align: center;
}

.signup-form h2:before, .signup-form h2:after {
	content: "";
	height: 2px;
	width: 25%;
	background: #fff;
	position: absolute;
	top: 50%;
	z-index: 2;
}

.signup-form h2:before {
	left: 0;
}

.signup-form h2:after {
	right: 0;
}

.signup-form .form-group {
	margin-bottom: 20px;
}

.signup-form .btn {        
	font-size: 1rem;
	min-width: 140px;
	outline: none !important;
}

.signup-form .row .col:first-child {
	padding-right: 5px;
}

.signup-form .row .col:last-child {
	padding-left: 5px;
}

.signup-form a {
	color: #fff;
	text-decoration: underline;
}

.signup-form a:hover {
	text-decoration: none;
}

.signup-form form a {
	color: #5cb85c;
	text-decoration: none;
}

.signup-form form a:hover {
	text-decoration: underline;
}

.register_btn {
    width: 100%;
    background: #1cac78 !important;
    color: white !important;
    font-size: 1rem !important;
    font-weight: normal !important;
    padding: 0;
}

.register_btn:focus {
	box-shadow: none !important;
	outline: 0px !important;
}

/*-----liens-----*/

.link-standard-1, a.link-standard-1:visited, a.link-standard-1:active {
  color: #444;
  text-decoration: none;
  border-bottom: 0.05rem black dashed;
  font-style: italic;
}

a.link-standard-1:hover {
  color: red;
  text-decoration: none;
  border-color: white !important;
  border-bottom: 0.05rem white dashed;
}

.link-standard-2, a.link-standard-2:visited, a.link-standard-2:active {
  color: #fff;
  text-decoration: none;
  border-bottom: 0.05rem black dashed;
  font-style: italic;
}

a.link-standard-2:hover {
  color: yellow;
  text-decoration: none;
  border-color: white !important;
  border-bottom: 0.05rem white dashed;
}

/*-----dates selectionnées-----*/

.h2-dates {
	margin: 30px auto 30px;
	color: #444;
	font-family: "Dongle", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2rem;
}

/*-----alert messages modal a.k.a toast-----*/
.toast-alert {
  /*position: absolute;*/
  position: fixed;
  top: 25px;
  right: 25px;
  z-index: 10000001;
  border-radius: 15px;
  border: 1px solid #999;
  background: #eee;
  padding: 20px 35px 20px 25px;
  box-shadow: 0 6px 20px -5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transform: translateX(calc(100% + 25px));
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35);
  
  display: none;
}

.toast-alert.active {
  display: block;
  transform: translateX(0%);
}

.toast-alert .toast-alert-content {
  display: flex;
  align-items: center;
}

.toast-alert-content .check {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  min-width: 35px;
  background-color: rgb(99, 164, 152);
  color: #fff;
  font-size: 20px;
  border-radius: 50%;
}

.toast-alert-content .error {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  min-width: 35px;
  background-color: rgb(192, 0, 0);
  color: #fff;
  font-size: 20px;
  border-radius: 50%;
}

.toast-alert-content .message {
  display: flex;
  flex-direction: column;
  margin: 0 20px;
}

.message .text {
  font-size: 1rem;
  font-weight: 400;
  color: #666;
}

.message .text.text-1 {
  font-weight: 600;
  color: #333;
}

.toast-alert .close-toast-success, .toast-alert .close-toast-error {
  position: absolute;
  top: 10px;
  right: 15px;
  padding: 5px;
  cursor: pointer;
  opacity: 0.7;
}

.toast-alert .close-toast-success:hover, .toast-alert .close-toast-error:hover {
  opacity: 1;
}

.toast-alert .progress-success, .toast-alert .progress-error {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;

}

.toast-alert.toast-success .progress-success:before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-color: #aad989; /* success = light green */
}

.toast-alert.toast-error .progress-error:before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-color: #f60000; /* error = light red */
}

.progress-success.active:before, .progress-error.active:before {
  animation: progress 5s linear forwards;
}

@keyframes progress {
  100% {
    right: 100%;
  }
}

/* Fix for Smaller Screens */

@media (max-height: 300px) {
	body {
		justify-content: flex-start;
	}
}

/* Adjust for Reduced Motion */

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		animation-duration: 0.001s !important;
	}
}

/*-----heading style #3-----*/

.three h4 {
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2em;
  padding-bottom: 15px;
  position: relative;
  margin-bottom: 25px;
}

.three h4:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 5px;
  width: 55px;
  background-color: #197; /* #5bf */
}

.three h4:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  height: 1px;
  width: 95%;
  max-width: 425px;
  background-color: #197;
}

/*-----back home-----*/

.back-home-btn {
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 999;
  width: 95px;
  height: 95px;
  background-color: #63a498;
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  text-decoration: none;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

/* effet au survol */
.back-home-btn:hover {
  transform: scale(1.1);
  opacity: 0.8;
}
	.border-start-warning {		
	border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    --bs-border-opacity: 1;
    border-color: rgba(var(--bs-warning-rgb), var(--bs-border-opacity)) !important;
	border-width: 5px !important;
}