/*
 * Spa Privatif — grand calendrier sur ordinateur (flatpickr), aux couleurs du site.
 * Sur téléphone, ce fichier n'a pas d'effet : le calendrier du téléphone reste.
 */

/* Champ affiché à la place du champ date : icône calendrier rose */
input.fp-alt {
	cursor: pointer;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ff4d94' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='5' width='17' height='15.5' rx='2.5'/><path d='M3.5 10h17M8 3v4M16 3v4'/></svg>") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 18px 18px !important;
	padding-right: 42px !important;
	text-overflow: ellipsis;
}
input.fp-alt.active {
	border-color: #ff4d94 !important;
}

/* Fenêtre du calendrier */
.flatpickr-calendar.sp-cal {
	width: 356px;
	padding: 14px 16px 12px;
	border-radius: 18px;
	background: #1f1521;
	border: 1px solid rgba(255, 77, 148, .32);
	box-shadow: 0 28px 70px rgba(0, 0, 0, .55);
	font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
	color: #f7eef4;
}
.flatpickr-calendar.sp-cal.arrowTop { margin-top: 8px; }
.flatpickr-calendar.sp-cal.arrowBottom { margin-top: -8px; }
.flatpickr-calendar.sp-cal::before,
.flatpickr-calendar.sp-cal::after { display: none; }

/* Mois + flèches */
.sp-cal .flatpickr-months { position: relative; height: 48px; margin-bottom: 6px; }
.sp-cal .flatpickr-months .flatpickr-month { height: 48px; color: #f7eef4; fill: #f7eef4; background: transparent; }
.sp-cal .flatpickr-current-month {
	left: 50px; width: calc(100% - 100px); height: 48px; padding: 0;
	display: flex; align-items: center; justify-content: center; gap: 8px;
	font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.55rem; font-weight: 500; line-height: 1;
}
.sp-cal .flatpickr-current-month span.cur-month { font-weight: 500; margin: 0; color: #f7eef4; }
.sp-cal .flatpickr-current-month span.cur-month:first-letter { text-transform: uppercase; }
.sp-cal .flatpickr-current-month span.cur-month:hover { background: transparent; }
.sp-cal .flatpickr-current-month .numInputWrapper { width: 4.2ch; }
.sp-cal .flatpickr-current-month .numInputWrapper:hover { background: transparent; }
.sp-cal .flatpickr-current-month input.cur-year {
	font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.55rem; font-weight: 500;
	color: #f0a8cd; padding: 0; height: auto; line-height: 1; cursor: default;
}
.sp-cal .numInputWrapper span { display: none; }
.sp-cal .flatpickr-prev-month,
.sp-cal .flatpickr-next-month {
	top: 4px; width: 40px; height: 40px; padding: 0;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%; border: 1px solid rgba(247, 238, 244, .16);
	color: #f7eef4; fill: none; transition: background .2s, border-color .2s, color .2s;
}
.sp-cal .flatpickr-prev-month { left: 4px; }
.sp-cal .flatpickr-next-month { right: 4px; }
.sp-cal .flatpickr-prev-month:hover,
.sp-cal .flatpickr-next-month:hover { background: rgba(255, 77, 148, .14); border-color: rgba(255, 77, 148, .55); color: #ff4d94; }
.sp-cal .flatpickr-prev-month:hover svg,
.sp-cal .flatpickr-next-month:hover svg { fill: none; }
.sp-cal .flatpickr-prev-month svg,
.sp-cal .flatpickr-next-month svg { width: 16px; height: 16px; }
.sp-cal .flatpickr-prev-month.flatpickr-disabled,
.sp-cal .flatpickr-next-month.flatpickr-disabled { display: flex; opacity: .25; pointer-events: none; }

/* Jours de la semaine */
.sp-cal .flatpickr-weekdays { height: 32px; background: transparent; }
.sp-cal span.flatpickr-weekday {
	background: transparent; color: #b9a8b4;
	font-size: .68rem; font-weight: 400; letter-spacing: .14em; text-transform: uppercase;
}

/* Grille des jours : 7 × 46 px */
.sp-cal .flatpickr-innerContainer,
.sp-cal .flatpickr-rContainer { width: 322px; }
.sp-cal .flatpickr-days { width: 322px !important; border: none; }
.sp-cal .dayContainer { width: 322px; min-width: 322px; max-width: 322px; padding: 0; }
.sp-cal .flatpickr-day {
	width: 46px; max-width: 46px; flex-basis: 46px; height: 46px; line-height: 40px; margin: 0;
	border: 3px solid #1f1521; border-radius: 14px;
	color: #f7eef4; font-size: .98rem; font-weight: 400;
	transition: background .15s, color .15s;
}
.sp-cal .flatpickr-day:hover,
.sp-cal .flatpickr-day:focus {
	background: rgba(255, 77, 148, .16); border-color: #1f1521; color: #fff; outline: none;
}
.sp-cal .flatpickr-day.prevMonthDay,
.sp-cal .flatpickr-day.nextMonthDay { color: rgba(247, 238, 244, .3); }
.sp-cal .flatpickr-day.flatpickr-disabled,
.sp-cal .flatpickr-day.flatpickr-disabled:hover {
	color: rgba(247, 238, 244, .2); background: transparent; border-color: #1f1521; cursor: default;
}

/* Aujourd'hui : petit point rose sous le chiffre */
.sp-cal .flatpickr-day.today { border-color: #1f1521; }
.sp-cal .flatpickr-day.today::after {
	content: ''; position: absolute; left: 50%; bottom: 5px;
	width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #ff4d94;
}
.sp-cal .flatpickr-day.today:hover { background: rgba(255, 77, 148, .16); color: #fff; }

/* Séjour : arrivée, nuits, départ */
.sp-cal .flatpickr-day.sp-nuit { background: rgba(255, 77, 148, .12); }
.sp-cal .flatpickr-day.sp-arrivee,
.sp-cal .flatpickr-day.sp-depart { box-shadow: inset 0 0 0 1px rgba(255, 77, 148, .85); color: #fff; }
.sp-cal .flatpickr-day.sp-arrivee.flatpickr-disabled { background: rgba(255, 77, 148, .22); color: #fff; }

/* Date choisie */
.sp-cal .flatpickr-day.selected,
.sp-cal .flatpickr-day.selected:hover,
.sp-cal .flatpickr-day.selected:focus,
.sp-cal .flatpickr-day.selected.prevMonthDay,
.sp-cal .flatpickr-day.selected.nextMonthDay {
	background: linear-gradient(120deg, #ff4d94, #c249ff); border-color: #1f1521;
	color: #fff; font-weight: 500; box-shadow: none;
}
.sp-cal .flatpickr-day.selected.today::after { background: #fff; }

/* Ligne d'aide sous la grille */
.sp-cal .sp-cal-pied {
	margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(247, 238, 244, .08);
	text-align: center; font-size: .8rem; letter-spacing: .02em; color: #f0a8cd;
}
.sp-cal .sp-cal-pied:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
	.flatpickr-calendar.sp-cal.animate.open { animation: none; }
	.sp-cal .flatpickr-day { transition: none; }
}