/**
 * Infinity Face — Agenda : widget de réservation (front-end).
 * Design moderne, premium et accessible. Autonome et thème-agnostique
 * (tout est préfixé .ift-booking). v1.2.1
 */

.ift-booking {
	--ift-bk-primary: #2563eb;
	/* Tons dérivés de la couleur principale (surchargée par le réglage) : tout
	   le widget suit donc la couleur configurée, sans teinte codée en dur. */
	--ift-bk-primary-2: color-mix(in srgb, var(--ift-bk-primary) 68%, #fff);
	--ift-bk-primary-dark: color-mix(in srgb, var(--ift-bk-primary) 78%, #000);
	--ift-bk-ink: #1b1d2a;
	--ift-bk-muted: #767c8c;
	--ift-bk-line: #ececf3;
	--ift-bk-soft: color-mix(in srgb, var(--ift-bk-primary) 9%, #fff);
	--ift-bk-soft-2: color-mix(in srgb, var(--ift-bk-primary) 16%, #fff);
	--ift-bk-radius: 16px;
	--ift-bk-grad: linear-gradient(135deg, var(--ift-bk-primary), var(--ift-bk-primary-2));
	--ift-bk-shadow: 0 1px 2px rgba(20,18,45,.04), 0 14px 40px rgba(60,40,120,.10);

	max-width: 760px;
	margin: 28px auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--ift-bk-ink);
	background: #fff;
	border: 1px solid var(--ift-bk-line);
	border-radius: 24px;
	box-shadow: var(--ift-bk-shadow);
	overflow: hidden;
	position: relative;
}
.ift-booking::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 5px;
	background: var(--ift-bk-grad);
}
.ift-booking *, .ift-booking *::before, .ift-booking *::after { box-sizing: border-box; }
.ift-booking__heading { margin: 0; padding: 28px 30px 0; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.ift-booking__inner { padding: 26px 30px 30px; }
.ift-booking__loading { display: flex; justify-content: center; padding: 60px; }

.ift-bk-spinner {
	width: 30px; height: 30px; border-radius: 50%;
	border: 3px solid var(--ift-bk-soft-2); border-top-color: var(--ift-bk-primary);
	display: inline-block; animation: ift-bk-spin .7s linear infinite;
}
@keyframes ift-bk-spin { to { transform: rotate(360deg); } }

/* Panneau : animation d'entrée. */
.ift-bk-panel { animation: ift-bk-in .35s cubic-bezier(.2,.7,.3,1); }
@keyframes ift-bk-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ----- Stepper avec barre de progression animée ----- */
.ift-bk-steps { position: relative; display: flex; margin: 4px 0 28px; }
.ift-bk-steps::before, .ift-bk-steps::after {
	content: ""; position: absolute; top: 18px; left: 12.5%; height: 3px; border-radius: 3px; z-index: 0;
}
.ift-bk-steps::before { right: 12.5%; background: var(--ift-bk-line); }
.ift-bk-steps::after { width: calc(75% * var(--ift-progress, 0)); background: var(--ift-bk-grad); transition: width .45s cubic-bezier(.4,0,.2,1); }
.ift-bk-step { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; opacity: .6; transition: opacity .25s; }
.ift-bk-step__num {
	width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; display: grid; place-items: center;
	background: #fff; border: 2px solid var(--ift-bk-line); color: var(--ift-bk-muted);
	font-weight: 700; font-size: 14px; transition: all .25s;
}
.ift-bk-step__label { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.ift-bk-step.is-active { opacity: 1; }
.ift-bk-step.is-active .ift-bk-step__num { background: var(--ift-bk-grad); border-color: transparent; color: #fff; transform: scale(1.06); box-shadow: 0 6px 18px color-mix(in srgb, var(--ift-bk-primary) 45%, transparent); }
.ift-bk-step.is-done { opacity: 1; }
.ift-bk-step.is-done .ift-bk-step__num { background: #1fae5f; border-color: transparent; color: #fff; }

.ift-bk-title { font-size: 19px; font-weight: 800; margin: 0 0 18px; letter-spacing: -.01em; }
.ift-bk-subtitle { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ift-bk-muted); margin: 22px 0 11px; }
.ift-bk-muted { color: var(--ift-bk-muted); font-size: 14px; }
.ift-bk-rowhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.ift-bk-chip { background: var(--ift-bk-soft); color: var(--ift-bk-primary-dark); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 700; }

/* ----- Prestations ----- */
.ift-bk-services { display: flex; flex-direction: column; gap: 12px; }
.ift-bk-service {
	display: flex; align-items: stretch; width: 100%; text-align: left; cursor: pointer; padding: 0;
	background: #fff; border: 1.5px solid var(--ift-bk-line); border-radius: var(--ift-bk-radius); overflow: hidden;
	transition: transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s, border-color .16s; font: inherit; color: inherit;
}
.ift-bk-service:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--ift-svc-color, var(--ift-bk-primary)) 55%, var(--ift-bk-line)); box-shadow: 0 14px 30px rgba(60,40,120,.13); }
.ift-bk-service:focus-visible { outline: 3px solid var(--ift-bk-soft-2); outline-offset: 2px; }
.ift-bk-service__bar { width: 6px; flex: 0 0 6px; background: linear-gradient(var(--ift-svc-color, var(--ift-bk-primary)), color-mix(in srgb, var(--ift-svc-color, var(--ift-bk-primary)) 60%, #fff)); }
.ift-bk-service__body { display: flex; flex-direction: column; gap: 7px; padding: 16px 18px; flex: 1; min-width: 0; }
.ift-bk-service__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ift-bk-service__head strong { font-size: 16.5px; font-weight: 700; line-height: 1.3; }
.ift-bk-service__price { flex: 0 0 auto; font-size: 15px; font-weight: 700; color: var(--ift-bk-primary-dark); background: var(--ift-bk-soft); padding: 5px 13px; border-radius: 999px; white-space: nowrap; }
.ift-bk-service__body small { color: var(--ift-bk-muted); font-size: 13.5px; line-height: 1.45; }
.ift-bk-service__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.ift-bk-service__dur { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #5a6072; }
.ift-bk-service__dur svg { opacity: .65; }
.ift-bk-service__cta { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 700; color: var(--ift-bk-primary-dark); }
.ift-bk-service__cta span { transition: transform .18s; }
.ift-bk-service:hover .ift-bk-service__cta span { transform: translateX(4px); }

/* ----- Praticien (segment) ----- */
.ift-bk-segment { display: flex; flex-wrap: wrap; gap: 8px; }
.ift-bk-seg { padding: 9px 16px; border: 1.5px solid var(--ift-bk-line); border-radius: 999px; background: #fff; cursor: pointer; font-size: 14px; font-weight: 700; transition: all .14s; }
.ift-bk-seg:hover { border-color: var(--ift-bk-primary); color: var(--ift-bk-primary-dark); }
.ift-bk-seg.is-active { background: var(--ift-bk-grad); color: #fff; border-color: transparent; box-shadow: 0 6px 16px color-mix(in srgb, var(--ift-bk-primary) 35%, transparent); }

/* ----- Dates ----- */
.ift-bk-dates { display: flex; gap: 9px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.ift-bk-dates::-webkit-scrollbar { height: 6px; }
.ift-bk-dates::-webkit-scrollbar-thumb { background: var(--ift-bk-line); border-radius: 6px; }
.ift-bk-date {
	flex: 0 0 auto; scroll-snap-align: start; padding: 11px 15px; border: 1.5px solid var(--ift-bk-line); border-radius: 14px; background: #fff;
	cursor: pointer; font-size: 13px; font-weight: 700; text-transform: capitalize; transition: all .14s; min-width: 82px; text-align: center; line-height: 1.3;
}
.ift-bk-date:hover:not(.is-disabled) { border-color: var(--ift-bk-primary); transform: translateY(-2px); }
.ift-bk-date.is-active { background: var(--ift-bk-grad); color: #fff; border-color: transparent; box-shadow: 0 8px 18px color-mix(in srgb, var(--ift-bk-primary) 30%, transparent); }
.ift-bk-date.is-disabled { opacity: .4; cursor: not-allowed; }

/* ----- Créneaux groupés ----- */
.ift-bk-slotsbox { min-height: 10px; }
.ift-bk-slotgroup { margin-bottom: 18px; }
.ift-bk-slotgroup:last-child { margin-bottom: 0; }
.ift-bk-slotgroup__title { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; color: var(--ift-bk-ink); margin: 0 0 10px; }
.ift-bk-slotgroup__title em { color: var(--ift-bk-muted); font-style: normal; font-weight: 600; }
.ift-bk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 9px; }
.ift-bk-slot {
	padding: 11px 8px; border: 1.5px solid var(--ift-bk-line); border-radius: 12px; background: #fff; cursor: pointer;
	font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; transition: all .13s; color: var(--ift-bk-ink);
}
.ift-bk-slot:hover { border-color: var(--ift-bk-primary); color: var(--ift-bk-primary-dark); transform: translateY(-2px); }
.ift-bk-slot.is-active { background: var(--ift-bk-grad); color: #fff; border-color: transparent; box-shadow: 0 8px 18px color-mix(in srgb, var(--ift-bk-primary) 35%, transparent); }
.ift-bk-noslot { padding: 26px 18px; text-align: center; color: var(--ift-bk-muted); font-size: 14px; background: #fafafc; border: 1px dashed var(--ift-bk-line); border-radius: 14px; }

/* ----- Navigation ----- */
.ift-bk-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; }
.ift-bk-btn { padding: 13px 24px; border-radius: 13px; border: 1.5px solid transparent; cursor: pointer; font-size: 15px; font-weight: 700; font-family: inherit; transition: transform .14s, box-shadow .14s, background .14s; }
.ift-bk-btn:disabled { opacity: .5; cursor: default; }
.ift-bk-btn--primary { background: var(--ift-bk-grad); color: #fff; box-shadow: 0 8px 20px color-mix(in srgb, var(--ift-bk-primary) 38%, transparent); }
.ift-bk-btn--primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 12px 26px color-mix(in srgb, var(--ift-bk-primary) 45%, transparent); }
.ift-bk-btn--ghost { background: #fff; border-color: var(--ift-bk-line); color: var(--ift-bk-ink); }
.ift-bk-btn--ghost:hover { background: #fafafe; border-color: #d3d5e0; }
.ift-bk-btn:focus-visible { outline: 3px solid var(--ift-bk-soft-2); outline-offset: 2px; }

/* ----- Formulaire ----- */
.ift-bk-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ift-bk-field { display: flex; flex-direction: column; gap: 6px; }
.ift-bk-field__label { font-size: 13px; font-weight: 700; color: #3a4050; }
.ift-bk-input { width: 100%; padding: 12px 14px; border: 1.5px solid var(--ift-bk-line); border-radius: 12px; font-size: 15px; font-family: inherit; background: #fbfbfd; color: var(--ift-bk-ink); transition: border-color .15s, box-shadow .15s, background .15s; }
.ift-bk-input:focus { outline: none; border-color: var(--ift-bk-primary); background: #fff; box-shadow: 0 0 0 4px var(--ift-bk-soft); }
.ift-bk-consent { display: flex; align-items: flex-start; gap: 11px; margin-top: 18px; padding: 13px 15px; background: #fafafc; border: 1px solid var(--ift-bk-line); border-radius: 12px; font-size: 13.5px; line-height: 1.5; color: #4a4f5e; cursor: pointer; }
.ift-bk-consent input { margin-top: 2px; width: 18px; height: 18px; flex: 0 0 18px; accent-color: var(--ift-bk-primary); }
.ift-bk-consent a { color: var(--ift-bk-primary-dark); text-decoration: underline; font-weight: 600; }

/* ----- Récapitulatif ----- */
.ift-bk-recap { border: 1px solid var(--ift-bk-line); border-radius: var(--ift-bk-radius); overflow: hidden; margin-top: 6px; background: #fbfbfd; }
.ift-bk-recap__row { display: flex; justify-content: space-between; gap: 14px; padding: 13px 17px; font-size: 14px; border-bottom: 1px solid var(--ift-bk-line); }
.ift-bk-recap__row:last-child { border-bottom: 0; }
.ift-bk-recap__row span { color: var(--ift-bk-muted); }
.ift-bk-recap__row strong { text-align: right; font-weight: 700; }
.ift-bk-paynote { margin: 18px 0 0; padding: 13px 16px; background: var(--ift-bk-soft); color: var(--ift-bk-primary-dark); border-radius: 12px; font-size: 13.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; }

/* ----- Succès ----- */
.ift-bk-success { text-align: center; padding: 18px 0; }
.ift-bk-success__icon { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, #21c275, #15a45f); color: #fff; display: grid; place-items: center; font-size: 38px; margin: 0 auto 18px; box-shadow: 0 12px 30px rgba(33,194,117,.35); animation: ift-bk-pop .5s cubic-bezier(.2,1.3,.4,1); }
@keyframes ift-bk-pop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
.ift-bk-success h3 { margin: 0 0 8px; font-size: 23px; font-weight: 800; }
.ift-bk-success > p { color: var(--ift-bk-muted); margin: 0 auto 20px; max-width: 440px; line-height: 1.6; }
.ift-bk-success .ift-bk-recap { text-align: left; max-width: 460px; margin: 0 auto; }

/* ----- États ----- */
.ift-bk-error { background: #fdecec; color: #b3262b; border: 1px solid #f4c4c6; border-radius: 12px; padding: 12px 15px; font-size: 14px; margin-top: 14px; }
.ift-bk-hidden { display: none; }

@media (max-width: 600px) {
	.ift-booking { margin: 16px 10px; border-radius: 20px; }
	.ift-booking__inner { padding: 20px; }
	.ift-bk-grid2 { grid-template-columns: 1fr; }
	.ift-bk-step__label { display: none; }
	.ift-bk-steps { margin-bottom: 22px; }
	.ift-bk-steps::before, .ift-bk-steps::after { top: 18px; }
	.ift-bk-slots { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
	.ift-bk-nav .ift-bk-btn { padding: 12px 18px; font-size: 14px; }
}

/* Préférence de mouvement réduit. */
@media (prefers-reduced-motion: reduce) {
	.ift-booking * { animation: none !important; transition: none !important; }
}

/* Aperçu dans l'éditeur de blocs. */
.ift-block-card { display: flex; align-items: center; gap: 14px; padding: 20px; border: 1px dashed #c9b8ff; border-radius: 14px; background: #f7f4ff; }
.ift-block-card__mark { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(135deg, #2563eb, #60a5fa); color: #fff; font-size: 24px; font-weight: 700; }
.ift-block-card strong { font-size: 15px; }
.ift-block-card p { margin: 2px 0 0; color: #6b7280; font-size: 13px; }

/* Page autonome « gérer mon rendez-vous » (lien sécurisé de l'e-mail). */
body.ift-manage-standalone { margin: 0; background: #eef1f7; min-height: 100vh; }
.ift-manage-wrap { max-width: 640px; margin: 0 auto; padding: 32px 18px 48px; }
.ift-manage-foot { text-align: center; margin: 22px 0 0; font-size: 13px; }
.ift-manage-foot a { color: #6b7280; text-decoration: none; }
.ift-manage-foot a:hover { text-decoration: underline; }