/**
 * Calendriers flatpickr aux couleurs du site.
 *
 * flatpickr arrive avec sa feuille par défaut (bleu #569FF7, coins carrés,
 * police système) : sur les champs date — naissance, séjour, disponibilités —
 * le calendrier tranchait avec le reste de l'interface. On reprend ici les
 * jetons de marque (rose, ambre, crème, rayons, ombres) sans toucher à sa
 * mécanique.
 *
 * `.li-bd-cal` : variante « date de naissance », où le champ année numérique
 * cède la place à un menu déroulant (cf. assets/js/birthdate-ux.js).
 */

.flatpickr-calendar {
	font-family: var(--sans, inherit);
	border: 1px solid var(--border, #EEE3DB);
	border-radius: 16px;
	box-shadow: 0 18px 44px -16px rgba(36, 23, 38, .28), 0 2px 8px rgba(36, 23, 38, .06);
	background: var(--card, #fff);
	padding-bottom: 4px;
}

.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after { border-bottom-color: var(--card, #fff); border-top-color: var(--card, #fff); }

.flatpickr-months { padding: 6px 4px 2px; }

.flatpickr-months .flatpickr-month,
.flatpickr-current-month,
.flatpickr-current-month input.cur-year,
.flatpickr-monthDropdown-months {
	color: var(--ink, #241726);
	font-weight: 600;
}

/* ---- En-tête : MOIS et ANNÉE, deux pastilles identiques ----------------
 * Corrigé le 29/07/2026 (« le champ pour l'année n'a pas un affichage
 * parfait »). Les deux commandes sont des `<select>` : celui du mois vient de
 * flatpickr, celui de l'année est construit par assets/js/birthdate-ux.js.
 * Tous deux restaient en `appearance: menulist`, donc le NAVIGATEUR y dessinait
 * sa propre flèche — sur iOS un « ⇅ » qui, faute de pastille autour du mois,
 * flottait tout seul entre « mai » et l'année, et qui se serrait contre le
 * texte dans la pastille de l'année (padding de 2px 6px).
 * On supprime l'indicateur natif et on dessine UN chevron maison, identique à
 * celui des menus du site, avec la place qu'il lui faut. Les deux commandes
 * partagent désormais exactement le même habillage.
 * ---------------------------------------------------------------------- */
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-calendar .li-bd-year {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font-family: var(--sans, inherit);
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ink, #241726);
	background-color: rgba(238, 61, 111, .07);
	border: 1px solid rgba(238, 61, 111, .28);
	border-radius: 10px;
	/* La réserve à droite loge le chevron sans jamais mordre sur le libellé. */
	padding: 4px 26px 4px 10px;
	height: auto;
	max-height: none;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23EE3D6F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 12px 12px;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.flatpickr-calendar .li-bd-year:hover { background-color: rgba(238, 61, 111, .13); }
.flatpickr-current-month .flatpickr-monthDropdown-months:focus-visible,
.flatpickr-calendar .li-bd-year:focus-visible {
	outline: 2px solid rgba(238, 61, 111, .35);
	outline-offset: 1px;
}
/* Un peu d'air entre les deux pastilles. */
.flatpickr-current-month { display: flex; align-items: center; justify-content: center; gap: 8px; }

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month { fill: var(--ink-2, #7E6E80); border-radius: 999px; }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--rasp, #EE3D6F); }

span.flatpickr-weekday { color: var(--ink-2, #7E6E80); font-weight: 600; font-size: .78rem; }

.flatpickr-day {
	color: var(--ink, #241726);
	border-radius: 12px;
	border-color: transparent;
}
.flatpickr-day:hover,
.flatpickr-day:focus { background: rgba(238, 61, 111, .10); border-color: transparent; }

/* Aujourd'hui : repère discret en ambre, pas une sélection. */
.flatpickr-day.today { border-color: var(--gold, #D0861E); }
.flatpickr-day.today:hover { background: rgba(208, 134, 30, .14); color: var(--ink, #241726); }

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
	background: linear-gradient(150deg, var(--rasp, #EE3D6F), var(--rasp-deep, #C91E52));
	border-color: transparent;
	color: #fff;
	box-shadow: 0 6px 16px -6px rgba(238, 61, 111, .55);
}

/* Séjours : les jours entre les deux bornes restent lisibles. */
.flatpickr-day.inRange,
.flatpickr-day.inRange:hover {
	background: rgba(238, 61, 111, .12);
	border-color: transparent;
	box-shadow: -5px 0 0 rgba(238, 61, 111, .12), 5px 0 0 rgba(238, 61, 111, .12);
	color: var(--ink, #241726);
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { color: rgba(126, 110, 128, .45); }

/* ---- Variante « date de naissance » : année en menu déroulant ---- */
.flatpickr-calendar.li-bd-cal .numInputWrapper { position: relative; }
.flatpickr-calendar.li-bd-cal .numInputWrapper .numInput.cur-year,
.flatpickr-calendar.li-bd-cal .numInputWrapper .arrowUp,
.flatpickr-calendar.li-bd-cal .numInputWrapper .arrowDown { display: none !important; }

/* Habillage commun mois/année : voir la règle plus haut. Ce bloc ne garde que
   ce qui est propre au menu de l'année (rien de dimensionnel, sinon la pastille
   du mois et celle de l'année n'auraient pas la même hauteur). */
.li-bd-year {
	font-family: var(--sans, inherit);
	font-weight: 600;
	color: var(--ink, #241726);
	cursor: pointer;
}
.li-bd-year:focus { outline: 2px solid rgba(238, 61, 111, .35); outline-offset: 1px; }