/**** CSS TAG ****/
.grid25{
	width:25%;
}
.grid50{
	width:50%;
}
.grid33{
	width:33%;
}
.grid66{
	width:66%;
}
.grid25,.grid50,.grid33,.grid66{
	display: inline-block;
}
.center{
	margin:auto;
	text-align:center;
}
.margin1 {
	margin:10px;
}
.padding1 {
	padding:10px;
}
.hiddenPhone{
	display:none;
}
/********************* ADD TO HOME ************************/
div#addToHome {
	display: none;
	position: fixed;
    bottom: 20px;
    font-size: inherit;
    line-height: 20px;
    left: 50%;
    margin-left: calc( -50% + 10px );
    width: calc( 100% - 20px);
    padding: 10px 0;
    text-align: center;
    z-index: 999999;
    background: white;
    border: 1px solid;
    border-radius: 10px;
}
div#addToHome img {
	margin:8%;
	width:50%;
}

div#addToHome span.fa-caret-down {
	position: absolute;
    bottom: -24px;
    margin-left: 0;
    text-shadow: 0 1px 0px #333;
    color: white;
}
div#addToHome span.fa-remove{
	position:absolute;
	top:5px;
	right:5px;
}
div#addToHome span.fa-minus{
	position:absolute;
	top:5px;
	left:5px;
}

/********************* DESKTOP ************************/
/* Grille de rendez-vous - Global */
h1 {
	font-size:16pt;
}
body {
	width:99%;
	font-family:Arial, Helvetica, sans-serif;
	margin: 10px 0;
}
#ui-datepicker-div{
	z-index:99 !important;
}
button,.retour_choix {
	cursor:pointer;
	font-size:inherit;
	font-family:inherit;
	text-decoration:none;
	border: 1px solid #ffffff;
	padding: 10px;
	border-radius:5px;
	background:#093662;
	color:#fffeff;
}
button:hover,.retour_choix:hover {
	background:#ffffff;
	color:#000000;
}
div#fullRDV {
	text-align:center;
	margin:auto;
}
/* Messages d'erreur */
.erreur {
	text-align:center;
	color:red;
	margin:10px;
}
.suppr, .confirm {
	text-align: center;border: 1px solid;
	width: 50%;
	margin: auto;
	padding: 10px;
	border-radius: 5px;
}

/* SERVICES / EQUIPES */
.service,.equipe {
    border: 1px solid;
    max-width: 600px;
    margin: auto;
    border-radius: 5px;
}
.service > div,.equipe > div {
	margin:10px 0;
}
.service > button,.equipe > button {
	width:100%;
}
.retour_choix {
	margin-left: 5px;
	margin-top:-5px;
	display: block;
	width: 70px;
}
.retour_choix.fixed {
	position:fixed;
}

/* Grille */
div.titre {
	font-weight:bold;
	text-align:center;
	font-size:1.4em;
	background:#fefdff;
	color:#000000;
}
div.descr {
	background:#ffffff;
	color:#000000;
	border-radius:2px;
	padding:10px 20px;
	margin:10px 0px 5px;
}
div.book {
	visibility:hidden;
	display:inline-block;
	vertical-align: top;
	background:white;
	max-width: 100%;
}
div.date {
	padding: 10px 15px;
	background:#fefdff;
	color:#fefdff;
}
div.busy {
	text-decoration: line-through;
	background:#f1f1f1;
	color:#aaaaaa;
	padding: 10px 0;
}
div.free {
	background:#fefdff;
	color:#333333;
	font-weight: bold;
}
form#form_rdv div {
	padding: 10px 0;
}
div.free:hover,div.hover_multi{
	background:#ffffff;
	color:#000000;
	text-decoration: none;
}
#form_rdv {
    margin: 0;
}
#submit {
	cursor:pointer;
}
button[type="submit"]:not(div#formulaire button){
	font-size: inherit;
	background: transparent none repeat scroll 0% 0%;
	cursor: pointer;
	color: inherit;
	font-family:inherit;
	font-weight: inherit;
	width: 100%;
	padding: 0;
}
.plageSpe span{
	display:none;
	color:#fff;
	font-weight: normal;
	background:rgba(51,51,51,0.95);
	padding:10px;
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	width: -moz-max-content;
	width: max-content;
	text-align:center;
	position: absolute;
	z-index:10;
	margin: -14px -5px;
}
.plageSpe {
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 100%;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	cursor: help;
	margin: 14px 5px;
}
div.busy .plageSpe{
	margin: 5px 5px;
}
.plageSpe:hover span{
	display:block;
}

/* Annulation */
div#annul_content{
	text-align:center;
}

/* Affichage de plusieurs semaines */
/* Popup Premier rendez-vous disponible */
#premierRDV {
    position: absolute;
    left: 50%;
    margin-left: -15%;
    width: 30%;
    background: white none repeat scroll 0% 0%;
    border: 1px solid;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
	z-index: 99;
}
#voir_dispos{
	display:none;
}
#fermerPremierRDV {
	position: absolute;
	top: 0px;
	right: 0;
	font-size: 20pt;
	cursor: pointer;
	padding: 0px 2px;
}
/* Division de la grille, Choisir un jour de la semaine (sur mobile) */
.divisergrille div {
	display:inline-block;
	margin:10px 5px;
}
.divisermatin,.diviseraprem,.divisersoir {
	border-radius:5px;
	background:#fffeff;
	color:#000000;
	padding:5px 10px;
	border-width:1px;
	border-style:solid;
	border-color:#333;
	margin-top:10px;
	cursor:pointer;
}
.divisermatin.active,.diviseraprem.active,.divisersoir.active {
	background:#093662;
	color:#fffeff;
}
#select_jour {
	display:none;
	cursor:pointer;
	position:fixed;
	bottom:0px;
	left:0;
	width:100%;
	height: 60px;
	padding: 20px 0;
	background:red;
	text-align:center;
	color:white;
	font-weight:bold;
	font-size:inherit;
}

/* Bouton Changer de date */
#spinnerDatepicker{
	display:none;
}
div#divdatechange,#fulldatechange,.datechange {
	display: inline-block;
	margin:auto;
	text-align:center;
	border-radius:5px;
	background:#093662;
	color:#fffeff;
    padding: 5px 10px;
    border-width: 1px;
    border-style: solid;
    border-color: #ffffff;
    cursor: pointer;
}
#fulldatechange {
	border:0;
}
input#datechange.datechange.visible:not([type="date"]){
	height:auto;
	width:auto;
	border-radius:5px;
	background:#093662;
	color:#fffeff;
  padding: 5px 10px;
  border-width: 1px;
  border-style: solid;
  border-color: #ffffff;
	padding: 5px 10px;
	opacity:1;
}
#datechange::placeholder {
	color:#fffeff;
	font-size: 1rem;
	opacity: 1;
	overflow:visible;
}
div#divdatechange:hover,input#datechange.datechange.visible:not([type="date"]):hover,input#datechange.datechange.visible:not([type="date"]):hover::placeholder {
	background:#ffffff;
	color:#000000;
}
input#datechange,#jour_de_la_semaine {
	height: 1px;
    width: 300px;
	border: none;
	padding: 0;
	opacity: 0;
}
input#datechange[type="date"],#jour_de_la_semaine {
	height: 1px;
  width: 300px;
	border: none;
	padding: 0;
	opacity: 0;
}

/* Bouton semaine (texte) précédente - semaine suivante */
div.bouton_semaine_texte {
	margin: 20px auto;
	text-align: center;
}
div.bouton_semaine_texte button.submit,div.button,button[type="submit"]:not(div#formulaire button) {
	cursor: pointer;
	border:1px solid #ffffff;
	border-radius:5px;
	background:#093662;
	color:#fffeff;
	padding:5px 10px;
	width:auto;
	font-size: inherit;
}
div.bouton_semaine_texte form.prev {
	margin:0 5px;
	display: inline;
}
div.bouton_semaine_texte form.next {
	display: inline;
}
div.bouton_semaine_texte button.submit:hover,button[type="submit"]:not(div#formulaire button):hover {
	background:#ffffff;
	color:#000000;
}

/* Bouton semaine (fleche) précédente - semaine suivante */
div.bouton_semaine_fleches {
    text-align: center;
	margin: 10px 0;
}

div.bouton_semaine_fleches form.next {
  background: #f07e3a url("admin/css/arrownext2.png");
	background-repeat: no-repeat;
	min-height: auto;
	width: 45px;
	margin:auto;
	display: inline-block;
}
div.bouton_semaine_fleches form.prev {
    background: #f07e3a url("admin/css/arrowprev2.png");
	background-repeat: no-repeat;
	min-height: auto;
	width: 45px;
	margin:auto;
	display: inline-block;
}

div.bouton_semaine_fleches button.submit {
	opacity: 0;
	cursor: pointer;
	width: 45px;
	height: 45px;
}

/* Aucun rendez-vous & Liste d'attente */
div.aucun_rdv {
	text-align: center;
	border: 1px solid #333;
	padding: 10px;
	background-color: white;
	margin: 5px auto;
	width: 30%;
	min-width: fit-content;
}

/* Liste d'attente - Container */
.liste-attente-container {
	max-width: 600px;
	margin: 0 auto;
}

/* Bouton liste d'attente */
.btn-liste-attente {
	width: 100%;
	padding: 16px 24px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border: none;
	border-radius: 12px;
	color: white;
	font-size: 16px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
	position: relative;
	overflow: hidden;
}

.btn-liste-attente::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
	transition: left 0.5s ease;
}

.btn-liste-attente:hover::before {
	left: 100%;
}

.btn-liste-attente:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.btn-liste-attente .btn-icon {
	font-size: 20px;
	animation: bell-ring 2s ease-in-out infinite;
}

@keyframes bell-ring {
	0%, 100% { transform: rotate(0deg); }
	10% { transform: rotate(15deg); }
	20% { transform: rotate(-15deg); }
	30% { transform: rotate(10deg); }
	40% { transform: rotate(-10deg); }
	50% { transform: rotate(5deg); }
	60% { transform: rotate(-5deg); }
	70% { transform: rotate(0deg); }
}

.btn-liste-attente .btn-text {
	flex: 1;
	text-align: center;
}

.btn-liste-attente .btn-arrow {
	transition: transform 0.3s ease;
}

.btn-liste-attente .btn-arrow.rotated {
	transform: rotate(180deg);
}

#form_liste_attente {
	position: absolute;
	left: calc(50% - 250px);
	width: 500px;
	max-width: 100%;
	margin-top: -1rem;
}

/* Card liste d'attente */
.liste-attente-card {
	background: white;
	border-radius: 16px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	margin-top: 16px;
	border: 1px solid rgba(0, 0, 0, 0.05);
}

.liste-attente-header {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 24px;
	color: white;
	text-align: center;
}

.liste-attente-header h3 {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
}

.liste-attente-header p {
	margin: 8px 0 0 0;
	font-size: 14px;
	opacity: 0.9;
}

.liste-attente-body {
	padding: 32px 24px;
}

/* Form group floating labels */
.form-group-floating {
	position: relative;
	margin-bottom: 24px;
}

.form-group-floating .form-control {
	padding: 16px;
	border: 2px solid #e2e8f0;
	border-radius: 10px;
	font-size: 16px;
	transition: all 0.3s ease;
	background: #f8fafc;
}

.form-group-floating .form-control:focus {
	border-color: #667eea;
	background: white;
	box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-group-floating label {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: #94a3b8;
	font-size: 16px;
	pointer-events: none;
	transition: all 0.3s ease;
	background: transparent;
	padding: 0 4px;
}

.form-group-floating .form-control:focus + label,
.form-group-floating .form-control:not(:placeholder-shown) + label {
	top: 0;
	left: 12px;
	font-size: 12px;
	color: #667eea;
	background: white;
	font-weight: 600;
}

.form-group-floating .field-icon {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: #94a3b8;
	font-size: 18px;
	transition: color 0.3s ease;
}

.form-group-floating .form-control:focus + .field-icon {
	color: #667eea;
}

/* Bouton submit */
.btn-submit {
	width: 100%;
	padding: 16px 32px;
	background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
	border: none;
	border-radius: 10px;
	color: white;
	font-size: 18px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	box-shadow: 0 4px 15px rgba(17, 153, 142, 0.4);
	margin-top: 8px;
}

.btn-submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(17, 153, 142, 0.6);
}

.btn-submit:active {
	transform: translateY(0);
}

.btn-submit i {
	transition: transform 0.3s ease;
}

.btn-submit:hover i {
	transform: translateX(4px);
}

/* Responsive */
@media (max-width: 768px) {
	.liste-attente-container {
		padding: 0 16px;
	}
	
	.liste-attente-header {
		padding: 20px 16px;
	}
	
	.liste-attente-header h3 {
		font-size: 18px;
	}
	
	.liste-attente-body {
		padding: 24px 16px;
	}
	
	.btn-liste-attente {
		padding: 14px 20px;
		font-size: 15px;
	}
	
	.btn-submit {
		padding: 14px 24px;
		font-size: 16px;
	}
}


/********************* FORMULAIRE DE RENDEZ-VOUS ************************/
div#formulaire {
	margin: auto;
	width: 600px;
	max-width: 100%;
}
div#formulaire,div#formulaire h1 {
	text-align:center;
    padding: 0 20px;
}
div#formulaire h1 {
	font-size: 20px;
}
span#email_confirm{
	color:red;
	margin: 10px 0 0;
	display: block;
}
div.itemLabel {
	margin-top:10px;
	font-weight:bold;
}
div#formulaire input:not([type="radio"]):not([type="checkbox"]),div#formulaire select,div#formulaire textarea {
	min-height: 25px;
    height: auto;
	font-size: inherit;
	border-radius:5px;
	border:1px solid #bbb;
	max-width: 100%;
	min-width:170px;
	font-family: inherit;
}

div#formulaire textarea{
	min-height:50px;
}
#waitingRDV {
	border: 1px solid darkred;
	border-radius: 2px;
	padding: 10px;
	margin: 10px;
}
div.mentions_legales {
	text-align:center;
	width:60%;
	margin:40px auto 0;
	font-size:9pt;
	padding: 10px;
	border: solid 1px #333;
}
div.formSubmit {
	text-align:center;
}

/********************* Page de demande de récapitulatif ************************/
#form_mesRDV input{
	display: inline-block;
	height: 25px;
	padding: 8px 6px;
	margin: 10px;
	font-size: 14px;
	line-height: 20px;
	color: #555;
	vertical-align: middle;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	text-align: center;
}
#form_mesRDV input[type="submit"]{
	background: white;
	padding: 0px 20px;
	cursor: pointer;
}
/********************* MOBILES ************************/
@media all and (orientation: portrait) and (max-width: 768px) and (max-device-width:768px){
	body {
		font-size:10pt;
		padding:0;
	}
	.hiddenPhone{
		display:initial;
	}
	.hiddenPhone{
		display:none !important;
	}
	.ui-datepicker-inline {
		width: auto !important;
	}
	div#fullRDV {
		margin:0;
    margin-right: auto;
    width: 100%;
	}
	div.book {
		width:calc(99% - 20px);
	}
	div.book > div {
		margin:3px;
	}
	div.book div.date {
		padding:20px 0;
	}
	div.grille form {
		margin:0;
	}
	form#form_rdv div {
		padding: 10px 0;
	}
	.divisergrille {
		margin-top:10px;
	}
	.divisergrille div {
		display: block;
	}
	div.sem2 div.free form#form_rdv div, div.sem3 div.free form#form_rdv div, div.sem4plus div.free form#form_rdv div {
		padding:0;
	}
	div.aucun_rdv {
		position: static;
		left: 0;
		width: calc(100% - 24px);
    margin: 0 auto !important;
	}
	div#divdatechange,div#fulldatechange,div.bouton_semaine_texte button.submit,div.button,div.button, button[type="submit"]:not(div#formulaire button),input#datechange.datechange.visible:not([type="date"]) {
		width:calc(100% - 12px);
	  padding: 20px 0;
		margin: 5px auto;
		display:block;
	}
	div.bouton_semaine_fleches {
		margin: 0 0 15px;
	}
	div.bouton_semaine_texte form.prev {
	    margin: 0;
	}
	div.sem2 *, div.sem3 *, div.sem4plus * {
		font-size: inherit;
	}
	#select_jour {
		display:block;
	}
	#jour_de_la_semaine{
		height:100px;
	}
	input#datechange.datechange.visible{
		height:auto;
		border-radius:5px;
		background:#093662;
		color:#fffeff;
		border-width: 1px;
		border-style: solid;
		border-color: #ffffff;
		padding: 5px 10px;
		opacity:1;
	}
	/***** FORMULAIRE DE PRISE DE RENDEZ-VOUS *****/
	div#formulaire {
		width: calc(100% - 42px);
		border-radius:0;
		max-width: 100%;
	}
	div#formulaire, div#formulaire h1{
		padding:0;
	}
	div.itemContent:nth-of-type(n+7),div.itemLabel:nth-of-type(n+7) {
		text-align: left;
		margin-bottom:5px;
	}
	div#formulaire input:not([type="radio"]):not([type="checkbox"]),div#formulaire select,div#formulaire textarea {
		width:100%;
		max-width:100%;
		min-height: 30px;
	}
	div.mentions_legales {
		font-size:inherit;
		width: calc(100% - 10px);
    padding: 4% 5px;
	}
	/* SERVICES / EQUIPES */
	.service {

	}
}
@media only all and (max-width: 30rem) {
	div.book {
		width:calc(99% - 20px);
	}
}