/* Hotonomie — module de réservation. S'appuie sur les variables du thème, avec valeurs de repli. */
.cqb, .cqb-cal, .cqb-dialog, .cqb-confirm {
	--c-ink: var(--ink, #1C2730);
	--c-muted: var(--muted, #5A6670);
	--c-cream: var(--cream, #FBF6F0);
	--c-sand: var(--sand, #F1E6D6);
	--c-ochre: var(--ochre, #E8A838);
	--c-ochre-l: var(--ochre-l, #F4C46A);
	--c-sea: var(--sea, #1D5F86);
	--c-line: var(--line, rgba(28, 39, 48, .1));
	--c-line-strong: var(--line-strong, rgba(28, 39, 48, .2));
	--c-display: var(--f-display, Georgia, serif);
	--c-ease: var(--ease, cubic-bezier(.2, .7, .2, 1));
}
.cqb svg, .cqb-cal svg, .cqb-dialog svg { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cqb-loading { display: flex; justify-content: center; align-items: center; gap: .7rem; min-height: 320px; color: var(--c-muted); }
.cqb-spinner { width: 20px; height: 20px; border: 2.5px solid var(--c-line-strong); border-top-color: var(--c-ochre); border-radius: 50%; animation: cqb-spin .8s linear infinite; }
@keyframes cqb-spin { to { transform: rotate(360deg); } }

.cqb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: clamp(20px, 3vw, 40px); align-items: start; }
.cqb-main { display: grid; gap: 1.25rem; }
.cqb-step { display: grid; gap: 1.25rem; scroll-margin-top: 100px; }
.cqb-step.is-collapsed, .cqb-step[hidden] { display: none; }
.cqb-step-title { display: flex; align-items: center; gap: .7rem; margin: 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.cqb-step-title span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--c-ochre); font: 700 1rem/1 var(--f-body, system-ui); }
.cqb-card { padding: clamp(1rem, 2.5vw, 1.6rem); border-radius: 24px; background: #fff; box-shadow: 0 1px 0 var(--c-line), 0 18px 40px -28px rgba(15, 42, 58, .45); }
.book .cqb-card { box-shadow: 0 0 0 1px var(--c-line), 0 18px 40px -28px rgba(15, 42, 58, .45); }
.cqb-btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; padding: .95em 1.6em; border: 0; border-radius: 999px; background: var(--c-ochre); color: var(--c-ink); font-weight: 700; font-size: 1rem; line-height: 1.1; text-decoration: none; cursor: pointer; transition: transform .25s var(--c-ease), background-color .25s, opacity .25s; }
.cqb-btn:hover:not(:disabled) { background: var(--c-ochre-l); transform: translateY(-2px); }
.cqb-btn:disabled { opacity: .45; cursor: not-allowed; }
.cqb-btn-ghost { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c-line-strong); }
.cqb-btn-block { width: 100%; }
.cqb-link { padding: 0; border: 0; background: none; color: var(--c-sea); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.cqb-notice { margin: 0 0 1.2rem; padding: .9rem 1.1rem; border-radius: 14px; background: #FFF4DC; border-left: 4px solid var(--c-ochre); }
.cqb-error { margin: .4rem 0; padding: .8rem 1rem; border-radius: 12px; background: #FDECEC; color: #8A1F1F; font-weight: 500; }
.cqb-muted { color: var(--c-muted); }

/* Calendrier */
.cqb-cal { user-select: none; }
.cqb-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.cqb-cal-hint { flex: 1; margin: 0; text-align: center; font-size: .92rem; font-weight: 600; color: var(--c-sea); }
.cqb-cal-nav { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--c-cream); color: var(--c-ink); cursor: pointer; transition: background-color .2s; }
.cqb-cal-nav:hover:not(:disabled) { background: var(--c-sand); }
.cqb-cal-nav:disabled { opacity: .3; cursor: default; }
.cqb-cal-months { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.8rem; }
.cqb-month-title { margin: 0 0 .6rem; text-align: center; font: 500 1.15rem/1.2 var(--c-display); text-transform: capitalize; }
.cqb-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px 0; }
.cqb-wd { padding-bottom: .3rem; text-align: center; font-size: .72rem; font-weight: 700; letter-spacing: .06em; color: var(--c-muted); }
.cqb-day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; aspect-ratio: 1 / 1.02; min-width: 0; padding: 0; border: 0; border-radius: 12px; background: none; color: var(--c-ink); font: inherit; cursor: pointer; transition: background-color .15s, color .15s; }
.cqb-day span { font-weight: 650; font-size: .95rem; line-height: 1; }
.cqb-day small { font-size: .64rem; line-height: 1; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.cqb-day:hover:not(:disabled) { background: var(--c-sand); }
.cqb-day:disabled { cursor: default; }
.cqb-day.is-off { color: rgba(28, 39, 48, .28); }
.cqb-day.is-off span { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.cqb-day.is-noarrive span { color: var(--c-muted); font-weight: 500; }
.cqb-day.is-muted { opacity: .35; }
.cqb-day.is-range { border-radius: 0; background: var(--c-sand); }
.cqb-day.is-start, .cqb-day.is-end, .cqb-day.is-start:hover:not(:disabled), .cqb-day.is-end:hover:not(:disabled) { background: var(--c-ink); color: #fff; opacity: 1; }
.cqb-day.is-start small, .cqb-day.is-end small { color: var(--c-ochre-l); }
.cqb-day.is-start span, .cqb-day.is-end span { color: #fff; text-decoration: none; }
.cqb-cal-foot { margin: .6rem 0 0; text-align: right; font-size: .88rem; }

/* Voyageurs & options */
.cqb-guests-card { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2.4rem; }
.cqb-stepper { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--c-line); }
.cqb-stepper strong { display: block; font-size: .98rem; }
.cqb-stepper small { color: var(--c-muted); font-size: .8rem; }
.cqb-stepper-ctrl { display: flex; align-items: center; gap: .6rem; }
.cqb-stepper-ctrl button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; box-shadow: inset 0 0 0 1.5px var(--c-line-strong); font-size: 1.15rem; line-height: 1; cursor: pointer; transition: box-shadow .2s; }
.cqb-stepper-ctrl button:hover:not(:disabled) { box-shadow: inset 0 0 0 1.5px var(--c-ink); }
.cqb-stepper-ctrl button:disabled { opacity: .3; cursor: default; }
.cqb-stepper-ctrl output { min-width: 1.4em; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.cqb-options-title { margin: .6rem 0 .3rem; font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-sea); }
.cqb-switch { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .8rem; align-items: center; padding: .65rem 0; cursor: pointer; }
.cqb-switch input { position: absolute; opacity: 0; pointer-events: none; }
.cqb-switch-ui { grid-row: 1 / 3; position: relative; width: 44px; height: 26px; border-radius: 26px; background: var(--c-line-strong); transition: background-color .25s; }
.cqb-switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: transform .25s var(--c-ease); }
.cqb-switch input:checked + .cqb-switch-ui { background: var(--c-sea); }
.cqb-switch input:checked + .cqb-switch-ui::after { transform: translateX(18px); }
.cqb-switch input:focus-visible + .cqb-switch-ui { outline: 2.5px solid var(--c-ochre); outline-offset: 2px; }
.cqb-switch span:not(.cqb-switch-ui) { font-weight: 600; font-size: .95rem; }
.cqb-switch em { font-style: normal; font-size: .82rem; color: var(--c-muted); }
.cqb-options-title small { display: block; margin-top: .15rem; font-size: .78rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--c-muted); }
.cqb-qty { cursor: default; }
.cqb-qty-ctrl { grid-row: 1 / 3; display: flex; align-items: center; gap: .3rem; }
.cqb-qty-ctrl button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: none; box-shadow: inset 0 0 0 1.5px var(--c-line-strong); font-size: 1rem; line-height: 1; cursor: pointer; }
.cqb-qty-ctrl button:hover:not(:disabled) { box-shadow: inset 0 0 0 1.5px var(--c-ink); }
.cqb-qty-ctrl button:disabled { opacity: .3; cursor: default; }
.cqb-qty-ctrl output { min-width: 1.1em; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.cqb-options-note { margin: .5rem 0 0; font-size: .78rem; line-height: 1.45; color: var(--c-muted); }
@media (pointer: coarse) {
	.cqb-qty-ctrl button { width: 34px; height: 34px; }
	.cqb-link { padding: .4em 0; }
	.cqb-check input { width: 22px; height: 22px; }
}
.cqb-lines-onsite { margin-top: .5rem; }
.cqb-lines-onsite caption { padding: .5rem 0 .25rem; text-align: left; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-sea); }
.cqb-lines-onsite td { font-size: .9rem; }
.cqb-onsite-total td { padding-top: .45rem; border-top: 1px solid var(--c-line-strong); font-weight: 700; }

/* Récapitulatif */
.cqb-summary { position: sticky; top: calc(var(--header-h, 76px) + 20px); }
.cqb-sum-card { display: grid; gap: .3rem; }
.cqb-sum-title { margin: 0 0 .4rem; font: 500 1.4rem/1.2 var(--c-display); }
.cqb-sum-dates { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; margin: 0; border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--c-line-strong); }
.cqb-sum-dates span { display: grid; padding: .6rem .9rem; font-weight: 650; }
.cqb-sum-dates span + span { box-shadow: inset 1.5px 0 0 var(--c-line-strong); }
.cqb-sum-dates small { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); }
.cqb-sum-meta { margin: .4rem 0 .6rem; font-size: .9rem; color: var(--c-muted); }
.cqb-sum-empty { margin: .4rem 0; font-weight: 600; color: var(--c-sea); }
.cqb-sum-from { margin: 0 0 .4rem; color: var(--c-muted); }
.cqb-sum-from strong { font: 500 1.6rem/1 var(--c-display); color: var(--c-ink); }
.cqb-sum-loading { display: flex; align-items: center; gap: .6rem; margin: .8rem 0; color: var(--c-muted); }
.cqb-lines { width: 100%; margin: .2rem 0 .4rem; border-collapse: collapse; font-size: .93rem; }
.cqb-lines td { padding: .45rem 0; vertical-align: top; }
.cqb-lines td:last-child { padding-left: 1rem; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cqb-line-discount td:last-child { color: #12805C; font-weight: 600; }
.cqb-line-tax td { color: var(--c-muted); font-size: .86rem; }
.cqb-total td { padding-top: .8rem; border-top: 1.5px solid var(--c-ink); font: 500 1.3rem/1.2 var(--c-display); }
.cqb-schedule { display: grid; gap: .35rem; margin: .4rem 0 1rem; padding: .9rem 1rem; border-radius: 14px; background: var(--c-cream); font-size: .86rem; }
.cqb-schedule p { display: flex; gap: .45rem; align-items: flex-start; justify-content: space-between; margin: 0; }
.cqb-schedule p span { font-weight: 600; }
.cqb-schedule strong { font-size: 1.05rem; }
.cqb-schedule .cqb-muted { justify-content: flex-start; }
.cqb-schedule svg { margin-top: .1em; color: var(--c-sea); }
.cqb-trust { display: flex; gap: .6rem; align-items: flex-start; margin: .6rem 0 0; padding: .7rem .85rem; border-radius: 12px; background: #EEF5FA; color: #16405A; }
.cqb-trust svg { margin-top: .15em; color: var(--c-sea); }
.cqb-trust span { display: grid; gap: .15rem; }
.cqb-trust strong { font-size: .86rem; }
.cqb-trust small { font-size: .76rem; line-height: 1.4; color: var(--c-muted); }
.cqb-cards { display: flex; flex-wrap: wrap; gap: .35rem; margin: .55rem 0 0; }
.cqb-cards span { padding: .2em .6em; border: 1px solid var(--c-line-strong); border-radius: 6px; background: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .03em; color: var(--c-muted); }
.cqb-best { display: flex; align-items: center; gap: .45rem; margin: .8rem 0 0; padding: .55rem .8rem; border-radius: 12px; background: #E8F6EF; font-size: .82rem; font-weight: 700; color: #0E6B4C; }
.cqb-saving { display: flex; gap: .6rem; align-items: flex-start; margin: .2rem 0 .9rem; padding: .8rem 1rem; border-radius: 14px; background: linear-gradient(120deg, #E8F6EF, #F3FBF7); color: #0E6B4C; }
.cqb-saving svg { margin-top: .15em; }
.cqb-saving span { display: grid; gap: .15rem; }
.cqb-saving small { color: var(--c-muted); font-size: .78rem; }

/* Voyageurs (liste nominative + fiche de police) */
.cqb-travellers { display: grid; gap: .9rem; margin: 1.6rem 0 0; padding: 0; border: 0; min-width: 0; }
.cqb-travellers legend { display: grid; gap: .2rem; margin: 0 0 .9rem; padding: 0; font: 500 1.2rem/1.2 var(--c-display); }
.cqb-travellers legend small { font: 400 .82rem/1.4 var(--f-body, system-ui); color: var(--c-muted); }
.cqb-traveller { padding: .9rem 1rem 1rem; border-radius: 16px; background: var(--c-cream); }
.cqb-traveller .cqb-input input, .cqb-traveller .cqb-input select { background: #fff; }
.cqb-traveller-head { display: flex; align-items: center; gap: .55rem; margin: 0 0 .7rem; font-weight: 700; font-size: .9rem; }
.cqb-traveller-head span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--c-ochre); font-size: .78rem; }
.cqb-traveller-head small { font-weight: 400; color: var(--c-muted); }
.cqb-police-note { display: flex; gap: .55rem; align-items: flex-start; margin: 0; padding: .8rem 1rem; border-radius: 14px; background: #EEF5FA; font-size: .82rem; line-height: 1.5; color: #234; }
.cqb-police-note svg { margin-top: .15em; color: var(--c-sea); }

/* Formulaire */
.cqb-input-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; }
.cqb-input { display: grid; gap: .35rem; }
.cqb-input-full { grid-column: 1 / -1; }
.cqb-input > span { font-size: .82rem; font-weight: 700; }
.cqb-input small { font-weight: 400; color: var(--c-muted); }
.cqb-input input, .cqb-input select, .cqb-input textarea { width: 100%; padding: .85em 1em; border: 0; border-radius: 12px; background: var(--c-cream); box-shadow: inset 0 0 0 1.5px var(--c-line); font: inherit; font-size: 1rem; transition: box-shadow .2s, background-color .2s; }
.cqb-input input:focus, .cqb-input select:focus, .cqb-input textarea:focus { outline: 0; background: #fff; box-shadow: inset 0 0 0 2px var(--c-sea); }
.cqb-input .is-invalid { box-shadow: inset 0 0 0 2px #C62828; }
.cqb-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cqb-accept { display: grid; gap: .7rem; margin: 1.4rem 0 1rem; }
.cqb-check { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; font-size: .93rem; cursor: pointer; }
.cqb-check input { width: 20px; height: 20px; margin: .1rem 0 0; accent-color: var(--c-sea); }
.cqb-check a { color: var(--c-sea); }
.cqb-form-error { margin: 0 0 1rem; padding: .8rem 1rem; border-radius: 12px; background: #FDECEC; color: #8A1F1F; font-weight: 600; }
.cqb-btn-pay { width: 100%; padding-block: 1.15em; font-size: 1.08rem; }
.cqb-btn-pay.is-loading svg { animation: cqb-spin 1s linear infinite; }
.cqb-secure { display: flex; gap: .5rem; align-items: flex-start; margin: .9rem 0 0; font-size: .82rem; color: var(--c-muted); }
.cqb-secure svg { margin-top: .15em; color: var(--c-sea); }

/* Aperçu du contrat */
.cqb-dialog { width: min(880px, calc(100vw - 24px)); max-height: min(88vh, 1000px); padding: 0; border: 0; border-radius: 22px; background: #fff; color: var(--c-ink); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .5); }
.cqb-dialog::backdrop { background: rgba(15, 42, 58, .55); backdrop-filter: blur(4px); }
.cqb-dialog[open] { animation: cqb-pop .3s var(--c-ease); }
@keyframes cqb-pop { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.cqb-dialog-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.4rem; background: #fff; border-bottom: 1px solid var(--c-line); }
.cqb-icon-btn { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--c-cream); cursor: pointer; }
.cqb-dialog-body { padding: 0 clamp(1rem, 4vw, 2.6rem) 2rem; font-size: .94rem; line-height: 1.6; }
.cqb-contract-head { padding: 1.6rem 0 .6rem; border-bottom: 2px solid var(--c-ochre); margin-bottom: 1rem; }
.cqb-contract-kicker { margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-sea); }
.cqb-contract h2 { margin: .3rem 0 .1rem; font: 500 1.8rem/1.15 var(--c-display); }
.cqb-contract-sub { margin: 0 0 .8rem; color: var(--c-muted); font-size: .85rem; }
.cqb-contract h3 { margin: 1.4rem 0 .4rem; font-size: 1rem; color: var(--c-sea); font-family: inherit; }
.cqb-contract p { margin: 0 0 .5rem; }
.cqb-contract-table { width: 100%; margin: .4rem 0 .7rem; border-collapse: collapse; }
.cqb-contract-table td { padding: .45rem .2rem; border-bottom: 1px solid var(--c-line); }
.cqb-contract-table td:last-child { text-align: right; white-space: nowrap; }
.cqb-contract-table .is-total td { font-weight: 700; background: var(--c-cream); }
.cqb-contract-sign { margin-top: 1.4rem; padding: 1rem 1.2rem; border: 1px solid var(--c-ochre); border-radius: 12px; background: var(--c-cream); font-size: .85rem; }
.cqb-contract-sign p { margin: .3rem 0 0; }

/* Confirmation */
.cqb-confirm { max-width: 760px; margin-inline: auto; text-align: center; }
.cqb-confirm h2 { margin: .6rem 0 .3rem; font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); }
.cqb-confirm-icon { display: grid; place-items: center; width: 84px; height: 84px; margin: .5rem auto 0; border-radius: 50%; background: #E3F5EC; }
.cqb-confirm-icon svg { width: 52px; height: 52px; stroke: #12805C; stroke-width: 3; }
.cqb-confirm-icon circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: cqb-draw .8s var(--c-ease) forwards; }
.cqb-confirm-icon path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: cqb-draw .5s .6s var(--c-ease) forwards; }
.cqb-confirm-pending, .cqb-confirm-request { background: #FFF4DC; }
.cqb-confirm-pending svg, .cqb-confirm-request svg { stroke: var(--c-ochre); }
.cqb-confirm-expired, .cqb-confirm-cancelled { background: #FDECEC; }
.cqb-confirm-expired svg, .cqb-confirm-cancelled svg { stroke: #C62828; }
@keyframes cqb-draw { to { stroke-dashoffset: 0; } }
.cqb-confirm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin: 1.6rem 0; text-align: left; }
.cqb-confirm-grid div { padding: .8rem 1rem; border-radius: 14px; background: var(--c-cream); }
.cqb-confirm-grid dt { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); }
.cqb-confirm-grid dd { display: grid; margin: .2rem 0 0; font-weight: 650; }
.cqb-confirm-grid small { font-weight: 400; color: var(--c-muted); }
.cqb-next { display: grid; gap: .5rem; max-width: 560px; margin: 0 auto 1.4rem; padding: 0; list-style: none; text-align: left; }
.cqb-next li { padding: .7rem 1rem; border-left: 3px solid var(--c-ochre); background: var(--c-cream); border-radius: 0 12px 12px 0; }
.cqb-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }

.cqb-only-mobile { display: none; }
@media (max-width: 960px) {
	.cqb-layout { grid-template-columns: 1fr; }
	.cqb-summary { position: static; }
	.cqb-only-desktop { display: none !important; }
	.cqb-only-mobile { display: block; }
	.cqb-confirm-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
	.cqb-guests-card, .cqb-input-grid { grid-template-columns: 1fr; }
	.cqb-card { border-radius: 18px; }
	.cqb-day small { font-size: .58rem; }
}