@charset "utf-8";
/* CSS Document */

:root {
	--bgTransition: #001b48; /* Couleur d'arrière-plan pour les transitions */
	--colorTransition: #FFF; /* Couleur du texte en transition */
	--mainColor: #018abe; /* Couleur principale du thème */
	--secondColor: #001b48; /* Couleur secondaire du thème */
	--mainLH: 20pt; /* Hauteur de ligne du thème */
	--mainRadius: 15px; /* Border radius du thème */
	--colorSubmitButton: #FFF; /* Couleur du texte du bouton d'envoi */
	--colorTitle: #003049; /* Couleur du titre (mois, jour et informations) */
	/*--fontTitle: ;*/ /* Police des titres du thème */
	/*--mainFont: ;*/ /* Police principale du thème */
	/*--fontSizeTitle: ;*/ /* Taille de police des titres */
	/*--mainFontSize: ;*/ /* Taille de police principale */
	--fontWeightTitle: 600; /* Graisse des titres */
	--fontSizeTitle: 18pt; /* Graisse des titres */
	--mainFontWeight: 300; /* Graisse de la police principale */
	--fontTitle: "Gabarito", sans-serif;
	--mainFont: "Hind", sans-serif;
	--mainBold: 600;/* Graisse bold de la police principale */
	--mainFontSize: 12pt; /* Taille de police principale */
	--mainTextColor: #001b48; /* Couleur de texte classique, hors bouton et titres (p, label strong)
	/*--comfortaa: 'Comfortaa', cursive;*/
	--maxWidthScreen: 1200px; /* Largeur maximale de l'écran */
}

#shadow {
	padding-left: 10px;
	padding-right: 10px;
	/* RAJOUT */
	background: rgba(0, 0, 0, .5);
	backdrop-filter: blur(3px);
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	display: none;
	z-index: 10000;
}

.wrapper.calendar {
	display: none;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 100%;
	max-width: 760px;
	max-height: calc(100vh - 80px);
	overflow-y: auto;
	margin: auto;
	border-radius: 15px;
	padding: 15px;
	box-sizing: border-box;
	background: #FFF;
	box-shadow: 0 3px 35px -10px rgba(0, 0, 0, .25);
	font-family: var(--mainFont);
	font-weight: var(--mainFontWeight);
	position: relative;
}

.closeCalendar {
	box-sizing: border-box;
	position: absolute;
	width: 30px;
	height: 30px;
	color: #DEDEDE;
	background: #FFF;
	border-radius: 50%;
	top: 15px;
	right: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 18pt;
	text-decoration: none;
	border: 1px solid #DEDEDE;
	font-weight: var(--mainBold);
	padding-top: 5px;
	transition: all .5s ease;
}

.closeCalendar:hover, .closeCalendar:focus {
	background: #ac1b42;
	border-color: #ac1b42;
	color: #FFF;
}

.wrapper.calendar h3 {
	font-weight: var(--fontWeightTitle);
	color: var(--colorTitle);
	margin: 0;
	margin-top: 10px;
	width: 100%;
	text-align: center;
	font-size: var(--fontSizeTitle);
}

.calendarDates {
	max-width: 322px; /* 340px */
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.backLine {
	width: 100%;
	height: 40px;
}

.backLine .back {
	margin-top: 0 !important;
}

.firstLineCalendar {
	width: 100%;
	max-width: 322px; /* 340px */
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.firstLineCalendar p {
	/*font-family: var(--mainFontTitle);*/
	/*font-weight: bold;*/
	/*font-weight: var(--fontWeightTitle); */
	/*color: var(--colorTitle);*/
	/*text-transform: uppercase;*/
	font-weight: var(--mainBold);
	padding-left: 15px;
	padding-right: 15px;
}
/*
 * Paragraphe seul (sans boutons) de part et/ou d'autre => Date sélectionnée sur l'écran des créneaux
 */
.alone {
	text-align: center;
	width: 100%;
}

.firstLineCalendar button, .wrapper.calendar .back {
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	outline: 0;
	background: #F0F0F0;
	border-radius: 50%;
	font-family: 'Material Icons';
	font-size: 18px;
	margin-bottom: 0;
	color: var(--mainColor);
	transition: all .5s ease;
}

.firstLineCalendar button.prevMonth, button.nextMonth {
	background: none;
}

.firstLineCalendar .hidden {
	visibility: hidden;
}

.firstLineCalendar button:hover, .firstLineCalendar button:focus, .wrapper.calendar .back:hover, .wrapper.calendar .back:focus {
	background: var(--bgTransition);
	color: var(--colorSubmitButton);
}

.days {
	width: 100%;
	max-width: 322px; /* 340px */
	display: flex;
	justify-content: center;
	gap: 7px; /* 10px */
	margin-bottom: 10px;
}

.dayName {
	width: 40px;
	text-align: center;
	font-size: 10pt;
}

.day {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	cursor: pointer;
	font-size: 12pt;
	line-height: 20pt;
	padding-top: 2px;
	/*background: #F0F0F0;*/
	font-weight: var(--mainBold);
	color: var(--mainColor);
	transition: all .5s ease;
}

.day:not(.disabled):not(.today):not(.hidden):hover, .day:not(.disabled):not(.today):not(.hidden):focus {
	background: var(--bgTransition);
	color: var(--colorTransition);
	/*transform: scale(1.1);*/
}

.day.today, .day.today.disabled, .day.disabled {
	/*background: rgba(171, 5, 30, .5);*/
	font-weight: var(--mainFontWeight) !important;
	/*color: #FFF;*/
	color: #CCC;
	/*font-weight: normal;*/
	background: none;
	cursor: not-allowed;
}

.day.today {
	background: #F0F0F0;
}

.day.today.disabled {
	/*font-weight: var(--mainFontWeight);*/
	/*font-weight: bold;*/
	background: none;
	position: relative;
	box-sizing: border-box;
	border: 1px solid rgba(0, 0, 0, .1);
}

/*.day.today.disabled::after {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #CCC;
	position: absolute;
	bottom: 2px;
	left: 50%;
	display: block;
	margin-left: -3px;
}*/

.hours, .bookingCalendar, .reasons {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-direction: column;
	gap: 15px;
	overflow-y: auto;
}

.hours p, .reasons p {
	text-align: center;
	margin: 0;
	line-height: var(--mainLH);
}

.hour {
	border-radius: 5px;
	width: 150px;
	height: 50px;
	min-height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all .5s ease;
}

.hour:not(.disabled) {
	background: #F0F0F0;
}

.hour:not(.disabled):hover, .hour:not(.disabled):focus {
	background: var(--mainColor);
	color: #FFF;
}

.day.disabled, .day.hidden {
	background: none;
	cursor: not-allowed;
}

.hour.disabled {
	background: rgba(171, 5, 30, .15);
	color: rgba(171, 5, 30, .5);
	cursor: not-allowed;
	opacity: .75;
}

.bookingCalendar p, #bookingCalendarForm label p {
	line-height: var(--mainLH);
	text-align: center;
	margin: 0;
	color: var(--mainTextColor);
}

.bookingCalendar p strong {
	font-weight: var(--mainBold);
	color: var(--mainTextColor);
}

/*.bookingCalendar p strong {
	color: var(--mainColor);
}*/

.bookingCalendar .informationCalendar {
	box-sizing: border-box;
	width: 100%;
	max-width: 625px;
	padding: 10px;
	border-radius: var(--mainRadius);
	text-align: center;
	background: #F0F0F0;
	margin-bottom: 10px;
}

.bookingCalendar .informationCalendar span {
	color: var(--mainColor);
	vertical-align: middle;
}

#bookingCalendarForm label {
	text-align: left;
	display: inline;
}

#bookingCalendarForm, #reasonsForm {
	display: flex;
	justify-content: center;
	width: 100%;
	max-width: 625px;
	margin: auto;
	flex-wrap: wrap;
	gap: 25px;
}

#reasonsForm {
	flex-direction: column;
	align-items: center;
}

#bookingCalendarForm *, #reasonsForm * {
	outline: 0;
	/*font-family: var(--mainFont);*/
	box-sizing: border-box;
	font-family: var(--mainFont);
	font-size: var(--mainFontSize);
	font-weight: var(--mainFontWeight);
}

#bookingCalendarForm input, #bookingCalendarForm select, #reasonsForm select {
	width: 100%;
	max-width: 300px;
	height: 50px;
	padding-left: 15px;
	padding-right: 15px;
	border: 1px solid #E9E9E9;
	border-radius: var(--mainRadius);
	transition: all .5s ease;
}

select {
	cursor: pointer;
}

#bookingCalendarForm select {
	max-width: 100%;
}

#bookingCalendarForm input:hover, #bookingCalendarForm select:hover, #bookingCalendarForm input:focus, #bookingCalendarForm select:focus, #reasonsForm select:hover, #reasonsForm select:focus {
	border-color: var(--mainColor);
}


#bookingCalendarForm label {
	width: 100%;
}

#bookingCalendarForm input[type="checkbox"] {
	width: auto;
	height: auto;
	vertical-align: middle;
	display: inline;
}

#bookingCalendarForm a {
	color: var(--mainColor);
}

#bookingCalendarForm a:hover, #bookingCalendarForm a:focus {
	color: var(--secondColor);
}

#boutonFormCalendar {
	width: 100%;
	text-align: center;
}

#bookingCalendarForm input[type="submit"], button.submit {
	height: 50px;
	border-radius: 25px;
	max-width: 200px;
	color: var(--colorSubmitButton);
	/*font-size: 12pt;*/
	border: 0;
	margin: auto !important;
	display: block !important;
	background: var(--mainColor);
	cursor: pointer;
	transition: all .5s ease;
}

button.submit {
	min-width: 200px;
}

#bookingCalendarForm input[type="submit"]:hover, #bookingCalendarForm input[type="submit"]:focus, button.submit:hover, button.submit:focus {
	background: var(--secondColor);
}

.finalIcon {
	width: 60px;
	height: 60px;
	color: var(--mainColor);
	border: 2px solid var(--mainColor);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto;
	margin-bottom: 0;
}

.finalIcon + h3 {
	margin-top: -5px !important;
}

@media only screen and (max-width: 1200px) {
	.wrapper.calendar {
		max-width: 400px;
	}

	#bookingCalendarForm input, #bookingCalendarForm select, #reasonsForm select {
		max-width: none;
	}
}