/**
 * Habillage du formulaire de réservation : choix de la prestation en cartes,
 * boutons de la charte, calendrier et créneaux JetAppointments.
 *
 * Portée : uniquement les descendants de .jet-form-builder — jamais de sélecteur
 * global, pour ne pas déteindre sur le formulaire de contact.
 */

.jet-form-builder {
	--al-primary: #1A3042;
	--al-secondary: #50623D;
	--al-text: #324A6D;
	--al-accent: #6DDAFB;
	--al-accent-fonce: #37C4EE;
	--al-trait: #C8D5DC;
	--al-blanc: #FFFFFF;
	--al-fond: #F9FAFD;
	/* Gris ardoise du survol des boutons de /bapteme-parapente-ete/. */
	--al-survol: #545E66;
}

/* ═══ 0. Barre de progression ════════════════════════════════════════════ */

/* Par défaut les libellés débordent de leur colonne et se chevauchent
   (« Date et créneauVos coordonnées »). Chaque étape reçoit ici une largeur
   propre, son libellé se centre sous la pastille et passe à la ligne au lieu
   de mordre sur la suivante. Le trait de liaison s'aligne sur le centre des
   pastilles, pas sur la hauteur totale de l'étape. */

.jet-form-builder .jet-form-builder-progress-pages {
	--al-pastille: 2.5rem;

	display: flex;
	align-items: flex-start;
	margin-bottom: 1.75rem;
}

/* JetFormBuilder rend aussi un conteneur pour le type non retenu, sans aucune
   étape dedans : il ajouterait une espace fantôme. `:empty` ne suffit pas — le
   conteneur contient un retour à la ligne, donc un nœud texte. */
.jet-form-builder .jet-form-builder-progress-pages:not( :has( .jet-form-builder-progress-pages__item--wrapper ) ) {
	display: none;
}

.jet-form-builder .jet-form-builder-progress-pages__item--wrapper {
	display: flex;
	align-items: flex-start;
	flex: 1 1 0;
	min-width: 0;
}

.jet-form-builder .jet-form-builder-progress-pages__item--wrapper:last-child {
	flex: 0 0 auto;
}

.jet-form-builder .jet-form-builder-progress-pages__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.45rem;
	flex: 0 0 auto;
	width: 6.5rem;
	max-width: 100%;
}

.jet-form-builder .jet-form-builder-progress-pages__item--circle {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var( --al-pastille );
	height: var( --al-pastille );
	border: 2px solid var( --al-trait );
	border-radius: 50%;
	background: var( --al-blanc );
	color: var( --al-text );
	font-weight: 600;
	line-height: 1;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.jet-form-builder .jet-form-builder-progress-pages__item--label {
	text-align: center;
	font-size: 0.78rem;
	line-height: 1.25;
	color: var( --al-text );
	overflow-wrap: anywhere;  /* un mot trop long se coupe au lieu de déborder */
	hyphens: auto;
}

.jet-form-builder .jet-form-builder-progress-pages__separator {
	flex: 1 1 auto;
	min-width: 0.75rem;
	height: 2px;
	margin: calc( var( --al-pastille ) / 2 - 1px ) 0.4rem 0;
	background: var( --al-trait );
	border-radius: 2px;
}

/* Étape franchie */
.jet-form-builder .passed-page .jet-form-builder-progress-pages__item--circle {
	background: var( --al-secondary );
	border-color: var( --al-secondary );
	color: var( --al-blanc );
}

.jet-form-builder .passed-page .jet-form-builder-progress-pages__item--label {
	color: var( --al-secondary );
}

.jet-form-builder .passed-page .jet-form-builder-progress-pages__separator {
	background: var( --al-secondary );
}

/* Étape en cours */
.jet-form-builder .active-page .jet-form-builder-progress-pages__item--circle {
	background: var( --al-accent );
	border-color: var( --al-accent-fonce );
	color: var( --al-primary );
	box-shadow: 0 0 0 4px rgba( 109, 218, 251, 0.25 );
}

.jet-form-builder .active-page .jet-form-builder-progress-pages__item--label {
	color: var( --al-primary );
	font-weight: 600;
}

/* Sous 420 px, trois libellés côte à côte ne tiennent plus : on garde les
   pastilles alignées et on n'affiche que le libellé de l'étape en cours. */
@media ( max-width: 420px ) {

	.jet-form-builder .jet-form-builder-progress-pages {
		--al-pastille: 2.1rem;

		align-items: center;
	}

	.jet-form-builder .jet-form-builder-progress-pages__item {
		width: auto;
	}

	.jet-form-builder .jet-form-builder-progress-pages__item--label {
		display: none;
	}

	.jet-form-builder .active-page .jet-form-builder-progress-pages__item--label {
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		margin-top: 3.1rem;
	}

	.jet-form-builder .active-page .jet-form-builder-progress-pages__item {
		position: relative;
	}

	.jet-form-builder .jet-form-builder-progress-pages__separator {
		margin-top: 0;
	}

	.jet-form-builder .jet-form-builder-progress-pages {
		margin-bottom: 2.75rem;
	}
}

/* ═══ 1. Choix de la prestation : des cartes, pas une liste dans un cadre ═══ */

/* Le <fieldset> de JetFormBuilder porte la bordure par défaut du navigateur :
   c'est le « cadre » disgracieux autour du groupe de boutons radio. On la
   retire sans renoncer au fieldset, qui reste le bon balisage pour un groupe
   de choix (les lecteurs d'écran annoncent la légende avec chaque option). */
.jet-form-builder fieldset.jet-form-builder-row {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.jet-form-builder fieldset.jet-form-builder-row > legend.jet-form-builder__label {
	padding: 0;
	margin-bottom: 0.6rem;
	float: left;  /* rend la largeur au groupe sous la légende */
	width: 100%;
}

.jet-form-builder fieldset.jet-form-builder-row > legend + * {
	clear: both;
}

.jet-form-builder .field-type-radio-field .jet-form-builder__fields-group {
	display: grid;
	gap: 0.6rem;
}

.jet-form-builder .field-type-radio-field .radio-wrap {
	margin: 0;
}

.jet-form-builder .field-type-radio-field .jet-form-builder__field-label.for-radio {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	margin: 0;
	padding: 0.85rem 1rem;
	background: var( --al-blanc );
	border: 1px solid var( --al-trait );
	border-radius: 10px;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.jet-form-builder .field-type-radio-field .jet-form-builder__field-label.for-radio:hover {
	border-color: var( --al-accent-fonce );
	background: var( --al-fond );
}

.jet-form-builder .field-type-radio-field .jet-form-builder__field-label.for-radio:focus-within {
	outline: 2px solid var( --al-accent-fonce );
	outline-offset: 2px;
}

/* La carte cochée. `:has()` est pris en charge par tous les navigateurs
   courants ; à défaut, la carte reste simplement dans son état normal et le
   bouton radio natif indique seul la sélection — dégradation sans casse. */
.jet-form-builder .field-type-radio-field .jet-form-builder__field-label.for-radio:has( input:checked ) {
	border-color: var( --al-accent-fonce );
	border-width: 2px;
	padding: calc( 0.85rem - 1px ) calc( 1rem - 1px );
	background: rgba( 109, 218, 251, 0.10 );
	box-shadow: 0 2px 10px rgba( 26, 48, 66, 0.06 );
}

.jet-form-builder .field-type-radio-field input[type="radio"] {
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	margin: 0;
	accent-color: var( --al-accent-fonce );
}

.jet-form-builder .field-type-radio-field .for-radio > span {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 0.6rem;
	width: 100%;
	font-weight: 600;
	color: var( --al-primary );
}

/* Prix et durée poussés à droite de la carte. */
.jet-form-builder .airlibre-choix__meta {
	display: inline-flex;
	align-items: baseline;
	gap: 0.6rem;
	margin-left: auto;
}

.jet-form-builder .airlibre-choix__prix {
	font-weight: 700;
	color: var( --al-secondary );
	font-size: 1.05em;
}

.jet-form-builder .airlibre-choix__duree {
	font-size: 0.85em;
	font-weight: 400;
	color: var( --al-text );
	opacity: 0.8;
}

@media ( max-width: 480px ) {

	.jet-form-builder .airlibre-choix__meta {
		margin-left: 0;
		width: 100%;
	}
}

/* ═══ 2. Boutons ═════════════════════════════════════════════════════════ */

/* Boutons repris à l'identique du bouton de /bapteme-parapente-ete/ :
   cyan, texte blanc, bordure 1 px sur le bleu très clair, pilule 60 px,
   ombre portée, et au survol le fond passe au gris ardoise avec un léger
   déplacement vers le bas. Le liseré rouge hérité du thème est neutralisé par
   la bordure explicite. */
.jet-form-builder .jet-form-builder__next-page,
.jet-form-builder .jet-form-builder__prev-page,
.jet-form-builder .jet-form-builder__submit,
.jet-form-builder button[type="submit"] {
	border: 1px solid var( --al-fond );
	border-radius: 60px;
	padding: 1rem 2.125rem;
	font-family: Poppins, sans-serif;
	font-weight: 500;
	font-size: 1.5rem;
	text-transform: uppercase;
	letter-spacing: -0.2px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease, transform 0.5s ease, box-shadow 0.5s ease;
}

@media ( max-width: 1024px ) {

	.jet-form-builder .jet-form-builder__next-page,
	.jet-form-builder .jet-form-builder__prev-page,
	.jet-form-builder .jet-form-builder__submit,
	.jet-form-builder button[type="submit"] {
		font-size: 0.875rem;
		padding: 0.75rem 1.5rem;
	}
}

.jet-form-builder .jet-form-builder__next-page,
.jet-form-builder .jet-form-builder__submit,
.jet-form-builder button[type="submit"] {
	background: var( --al-accent );
	color: var( --al-blanc );
	box-shadow: 0 7px 25px -4px rgba( 15, 28, 37, 0.24 );
}

.jet-form-builder .jet-form-builder__next-page:hover,
.jet-form-builder .jet-form-builder__submit:hover,
.jet-form-builder button[type="submit"]:hover {
	background: var( --al-survol );
	color: var( --al-blanc );
	transform: translateY( 3px );
	box-shadow: 0 5px 19px -2px rgba( 0, 0, 0, 0.18 );
}

/* Le bouton de retour est secondaire : même forme, en contour. */
.jet-form-builder .jet-form-builder__prev-page {
	background: transparent;
	color: var( --al-primary );
	border-color: var( --al-trait );
	box-shadow: none;
}

.jet-form-builder .jet-form-builder__prev-page:hover {
	background: var( --al-survol );
	border-color: var( --al-survol );
	color: var( --al-blanc );
	transform: translateY( 3px );
}

.jet-form-builder .jet-form-builder__next-page:focus-visible,
.jet-form-builder .jet-form-builder__prev-page:focus-visible,
.jet-form-builder .jet-form-builder__submit:focus-visible {
	outline: 3px solid var( --al-accent-fonce );
	outline-offset: 2px;
}

/* ═══ 3. Calendrier ══════════════════════════════════════════════════════ */

.jet-form-builder .jet-apb-calendar-wrapper {
	width: 100%;
}

.jet-form-builder .appointment-calendar.jet-apb-calendar {
	width: 100%;
	border: 1px solid var( --al-trait );
	border-radius: 12px;
	overflow: hidden;
	background: var( --al-blanc );
	box-shadow: 0 2px 20px rgba( 26, 48, 66, 0.07 );
}

/* Le conteneur interne est bridé en largeur par les réglages du bloc :
   on le laisse occuper toute la place disponible. */
.jet-form-builder .jet-apb-calendar .jet-apb-calendar-content {
	width: 100%;
	min-width: 0;
	flex: 1 1 auto;
}

/* — En-tête (mois + flèches) — */
.jet-form-builder .jet-apb-calendar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	background: var( --al-accent );
	color: var( --al-primary );
}

.jet-form-builder .jet-apb-calendar-header__label {
	font-family: Poppins, sans-serif;
	font-size: 1.1rem;
	font-weight: 600;
	text-transform: capitalize;
}

.jet-form-builder .jet-apb-calendar-header .jet-apb-calendar-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.45 );
	color: var( --al-primary );
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.jet-form-builder .jet-apb-calendar-header .jet-apb-calendar-btn:hover {
	background: var( --al-blanc );
}

.jet-form-builder .jet-apb-calendar-header .jet-apb-calendar-btn svg {
	width: 1.15rem;
	height: 1.15rem;
	fill: currentColor;
}

/* — Jours de la semaine — */
.jet-form-builder .jet-apb-calendar-week {
	padding: 0.5rem 0.75rem;
	background: rgba( 109, 218, 251, 0.22 );
	color: var( --al-primary );
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* — Grille des jours — */
/* La disposition reste celle du plugin (flex + retour à la ligne, largeurs en
   pourcentage) : la première case porte un margin-left en ligne qui décale le
   1er du mois. Passer en CSS grid casserait ce décalage. */
.jet-form-builder .jet-apb-calendar-body {
	padding: 0.5rem 0.75rem 0.75rem;
}

.jet-form-builder .jet-apb-calendar-date-body {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.35rem;
	height: 2.35rem;
	margin: 0 auto;
	border-radius: 50%;
	color: var( --al-text );
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.jet-form-builder .jet-apb-calendar-date:not( .jet-apb-calendar-date--disabled ) .jet-apb-calendar-date-body:hover {
	background: rgba( 109, 218, 251, 0.30 );
	color: var( --al-primary );
}

.jet-form-builder .jet-apb-calendar-date--today .jet-apb-calendar-date-body {
	box-shadow: inset 0 0 0 2px var( --al-secondary );
	color: var( --al-secondary );
	font-weight: 700;
}

.jet-form-builder .jet-apb-calendar-date--selected .jet-apb-calendar-date-body {
	background: var( --al-primary );
	color: var( --al-blanc );
	font-weight: 700;
}

.jet-form-builder .jet-apb-calendar-date--disabled .jet-apb-calendar-date-body {
	opacity: 0.35;
	cursor: not-allowed;
}

/* — Créneaux : des cartes cliquables — */
/* ⚠️ L'endpoint REST enveloppe les créneaux dans un
   `.jet-apb-calendar-slots-container` absent du gabarit statique du plugin :
   c'est LUI qui porte la grille, pas `.jet-apb-calendar-slots--active`. */
.jet-form-builder .jet-apb-calendar-slots--active {
	position: relative;
	margin: 0.6rem 0;
	padding: 1.25rem 1rem;
	background: var( --al-fond );
	border-top: 1px solid var( --al-trait );
	border-bottom: 1px solid var( --al-trait );
}

.jet-form-builder .jet-apb-calendar-slots-container {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 9.5rem, 1fr ) );
	gap: 0.6rem;
}

.jet-form-builder .jet-apb-slot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	padding: 0.7rem 0.5rem;
	background: var( --al-blanc );
	border: 1px solid var( --al-trait );
	border-radius: 10px;
	color: var( --al-primary );
	font-weight: 600;
	font-size: 0.95rem;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.jet-form-builder .jet-apb-slot:hover {
	border-color: var( --al-accent-fonce );
	box-shadow: 0 3px 12px rgba( 26, 48, 66, 0.10 );
	transform: translateY( -1px );
}

.jet-form-builder .jet-apb-slot small {
	font-size: 0.75rem;
	font-weight: 400;
	color: var( --al-secondary );
}

.jet-form-builder .jet-apb-slot--selected {
	background: var( --al-primary );
	border-color: var( --al-primary );
	color: var( --al-blanc );
}

.jet-form-builder .jet-apb-slot--selected small {
	color: rgba( 255, 255, 255, 0.85 );
}

.jet-form-builder .jet-apb-slot:focus-visible {
	outline: 3px solid var( --al-accent-fonce );
	outline-offset: 2px;
}

/* Croix de fermeture de la rangée de créneaux. */
.jet-form-builder .jet-apb-calendar-slots__close {
	position: absolute;
	top: 0.4rem;
	right: 0.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	padding: 0;
	border-radius: 50%;
	background: transparent;
	color: var( --al-text );
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.jet-form-builder .jet-apb-calendar-slots__close:hover {
	background: var( --al-trait );
	color: var( --al-primary );
}

/* Message de blocage « choisissez un créneau ». Classe propre au site : les
   classes d'erreur de JetFormBuilder sont positionnées par la CSS de la page
   et n'atterriraient pas au bon endroit. */
.jet-form-builder .airlibre-erreur {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.75rem;
	padding: 0.7rem 1rem;
	background: #FDF3F3;
	border: 1px solid #E4B4B4;
	border-left: 4px solid #C0392B;
	border-radius: 8px;
	color: #8E2A20;
	font-size: 0.95rem;
	font-weight: 500;
}

.jet-form-builder .airlibre-erreur::before {
	content: "!";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: #C0392B;
	color: #FFFFFF;
	font-weight: 700;
	font-size: 0.8rem;
	line-height: 1;
}

/* ═══ 4. Récapitulatif des créneaux retenus ══════════════════════════════ */

.jet-form-builder .jet-apb-calendar-appointments-list-wrapper {
	margin-top: 1rem;
	flex-direction: column;
	gap: 0.5rem;
}

.jet-form-builder .jet-apb-calendar-appointments-list {
	display: grid;
	gap: 0.5rem;
	width: 100%;
}

.jet-form-builder .jet-apb-appointments-item {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.75rem 1rem;
	background: var( --al-blanc );
	border: 1px solid var( --al-trait );
	border-left: 4px solid var( --al-accent );
	border-radius: 10px;
}

.jet-form-builder .jet-apb-appointments-item-content {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.9rem;
	width: 100%;
}

.jet-form-builder .jet-apb-item-service-provider {
	font-weight: 700;
	color: var( --al-primary );
}

.jet-form-builder .jet-apb-item-time,
.jet-form-builder .jet-apb-item-date {
	color: var( --al-text );
}

.jet-form-builder .jet-apb-item-date {
	font-weight: 600;
}

/* Compteur + / − du nombre de passagers. */
.jet-form-builder .jet-apb-appointments-item-count {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.1rem;
	flex: 0 0 auto;
	padding: 0.25rem 0.4rem;
	background: var( --al-fond );
	border: 1px solid var( --al-trait );
	border-radius: 8px;
}

.jet-form-builder .jet-apb-appointments-item-count-controls-increase,
.jet-form-builder .jet-apb-appointments-item-count-controls-decrease {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	color: var( --al-primary );
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	user-select: none;
	transition: background-color 0.15s ease;
}

.jet-form-builder .jet-apb-appointments-item-count-controls-increase:hover,
.jet-form-builder .jet-apb-appointments-item-count-controls-decrease:hover {
	background: var( --al-accent );
}

.jet-form-builder .jet-apb-appointments-item-count-num {
	font-weight: 700;
	color: var( --al-primary );
	font-size: 0.9rem;
}

.jet-form-builder .jet-apb-calendar-slot__delete {
	margin-left: auto;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.15s ease;
}

.jet-form-builder .jet-apb-calendar-slot__delete:hover {
	opacity: 1;
}