/*
 * Titi Art skin for Amelia 9.8 / Step-by-step Booking v3.
 * Everything is scoped to the booking mount so Amelia admin screens and
 * customer/employee panels remain untouched.
 */
:root {
    --ta-amelia-navy: #0d1b2e;
    --ta-amelia-ink: #080f1c;
    --ta-amelia-red: #c8102e;
    --ta-amelia-cream: #f5f0e8;
    --ta-amelia-line: rgba(255, 255, 255, 0.09);
}

.titi-art-amelia-source {
    display: none;
}

.titi-art-amelia-mount {
    display: block;
    width: 100%;
    margin-top: 0;
    scroll-margin-top: 24px;
    color: var(--ta-amelia-cream);
    font-family: 'Lato', sans-serif;
}

.barber-card[role='button'] {
    position: relative;
    cursor: pointer;
    outline: none;
}

.barber-card[role='button']:focus-visible {
    box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.55) !important;
}

.barber-card.titi-art-barber-selected {
    border-color: var(--ta-amelia-red) !important;
    box-shadow: 0 0 0 1px var(--ta-amelia-red), 0 18px 48px rgba(0, 0, 0, 0.35) !important;
}

.barber-card.titi-art-barber-selected::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    box-shadow: inset 0 0 0 2px var(--ta-amelia-red);
}

.titi-art-selected-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 4;
    padding: 7px 10px;
    background: var(--ta-amelia-red);
    color: #fff;
    font: 600 0.68rem 'Oswald', sans-serif;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.titi-art-selected-barber-notice {
    display: grid;
    grid-template-columns: auto 1fr repeat(2, auto);
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    padding: 16px 20px;
    border-left: 3px solid var(--ta-amelia-red);
    background: rgba(200, 16, 46, 0.10);
    color: var(--ta-amelia-cream);
}

.titi-art-selected-barber-notice span {
    color: rgba(245, 240, 232, 0.55);
    font: 400 0.72rem 'Oswald', sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.titi-art-selected-barber-notice strong {
    font: 700 1.15rem 'Playfair Display', serif;
}

.titi-art-selected-barber-notice a {
    color: var(--ta-amelia-red);
    font: 600 0.72rem 'Oswald', sans-serif;
    letter-spacing: 0.1em;
    text-decoration: none;
    text-transform: uppercase;
}

.titi-art-amelia-mount .amelia-v2-booking {
    --am-c-primary: var(--ta-amelia-red);
    --am-c-success: var(--ta-amelia-red);
    --am-c-error: #df3853;
    --am-c-main-bgr: transparent;
    --am-c-card-bgr: rgba(255, 255, 255, 0.025);
    --am-c-inp-bgr: rgba(255, 255, 255, 0.04);
    --am-c-main-text: var(--ta-amelia-cream);
    --am-c-sub-text: rgba(245, 240, 232, 0.62);
    --am-c-border: rgba(255, 255, 255, 0.10);
    width: 100% !important;
    max-width: 1120px !important;
    margin: 0 auto !important;
    background: transparent !important;
    font-family: 'Lato', sans-serif !important;
}

.titi-art-amelia-mount :is(.am-fs__wrapper, .am-fs__main, .am-fs__main-inner, .am-fs__main-content) {
    background: transparent !important;
    color: var(--ta-amelia-cream) !important;
    box-shadow: none !important;
}

.titi-art-amelia-mount .am-fs__wrapper {
    overflow: hidden !important;
    border: 1px solid var(--ta-amelia-line) !important;
    border-radius: 2px !important;
    background: rgba(255, 255, 255, 0.025) !important;
}

.titi-art-amelia-mount .am-fs-sb {
    background: var(--ta-amelia-ink) !important;
    border-color: var(--ta-amelia-line) !important;
}

.titi-art-amelia-mount :is(.am-fs__main-heading, .am-fs__main-heading-inner-title, .am-fs-sb__page-heading, .am-fs__congrats-main-heading) {
    color: #fff !important;
    font-family: 'Playfair Display', serif !important;
    font-weight: 700 !important;
}

.titi-art-amelia-mount :is(.am-fs-sb__step-heading, .am-fs__init-form__label, .am-fs__info-form__label) {
    color: rgba(245, 240, 232, 0.62) !important;
    font-family: 'Oswald', sans-serif !important;
    letter-spacing: 0.08em !important;
}

.titi-art-amelia-mount :is(.am-fs-sb__step-checker-selected, .am-fs-sb__step-icon, .am-fs-sb__page-indicator) {
    border-color: var(--ta-amelia-red) !important;
    background: var(--ta-amelia-red) !important;
    color: #fff !important;
}

.titi-art-amelia-mount :is(.am-fs__init-item, .am-fs-iipu__employee, .am-fs-iipu__location, .am-fs__extras-card__header, .am-fs__payments-method) {
    background: rgba(255, 255, 255, 0.025) !important;
    border-color: var(--ta-amelia-line) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
}

.titi-art-amelia-mount :is(.am-fs__init-item:hover, .am-fs-iipu__employee:hover, .am-fs-iipu__location:hover) {
    border-color: rgba(200, 16, 46, 0.65) !important;
    background: rgba(200, 16, 46, 0.08) !important;
}

.titi-art-amelia-mount :is(.am-fs__init-item.am--selected, .am-fs-iipu__employee.am--selected, .am-fs-iipu__location.am--selected) {
    border-color: var(--ta-amelia-red) !important;
    background: rgba(200, 16, 46, 0.12) !important;
    box-shadow: inset 3px 0 0 var(--ta-amelia-red) !important;
}

.titi-art-amelia-mount :is(.am-fs__init-item__name, .am-fs-iipu__name, .am-fs-iipu__employee-display-name) {
    color: rgba(245, 240, 232, 0.92) !important;
    font-family: 'Lato', sans-serif !important;
}

.titi-art-amelia-mount :is(.am-fs__init-item__price, .am-fs__init-item__cost, .am-fs-iipu__employee-display-price, .am-amount) {
    color: var(--ta-amelia-red) !important;
    font-family: 'Oswald', sans-serif !important;
    font-weight: 600 !important;
}

.titi-art-amelia-mount :is(.am-input, input, textarea, .el-input__wrapper, .el-textarea__inner, .am-adv-select__wrapper) {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: var(--ta-amelia-cream) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
}

.titi-art-amelia-mount :is(input, textarea):focus {
    border-color: var(--ta-amelia-red) !important;
    outline: none !important;
}

.titi-art-amelia-mount :is(.am-button--primary, .am-button--filled) {
    background: var(--ta-amelia-red) !important;
    border-color: var(--ta-amelia-red) !important;
    border-radius: 1px !important;
    color: #fff !important;
    font-family: 'Oswald', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
    box-shadow: none !important;
}

.titi-art-amelia-mount :is(.am-button--secondary, .am-button--default, .am-button--plain) {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    border-radius: 1px !important;
    color: rgba(255, 255, 255, 0.72) !important;
}

.titi-art-amelia-mount :is(.am-fs-dt__calendar, .am-advsc__wrapper, .am-advsc__slots) {
    background: transparent !important;
    color: var(--ta-amelia-cream) !important;
}

.titi-art-amelia-mount :is(.am-advsc__dayGridMonth-cell, .am-advsc__slots-item) {
    border-color: var(--ta-amelia-line) !important;
    background: rgba(255, 255, 255, 0.035) !important;
    color: rgba(255, 255, 255, 0.76) !important;
    border-radius: 2px !important;
}

.titi-art-amelia-mount :is(.am-advsc__dayGridMonth-selected, .am-advsc__slots-item__selected) {
    border-color: var(--ta-amelia-red) !important;
    background: var(--ta-amelia-red) !important;
    color: #fff !important;
}

.titi-art-amelia-mount :is(.am-fs__main-footer, .am-fs-sb__footer) {
    background: rgba(8, 15, 28, 0.92) !important;
    border-color: var(--ta-amelia-line) !important;
}

.titi-art-amelia-mount .titi-art-amelia-warning {
    padding: 24px;
    border: 1px solid rgba(200, 16, 46, 0.5);
    color: var(--ta-amelia-cream);
    text-align: center;
}

/* The on-site gateway stays configured in Amelia so priced services remain
   valid, but customers never see the temporary payment/summary step. */
.titi-art-amelia-mount .am-fs__payments {
    min-height: 260px !important;
    display: grid !important;
    place-items: center !important;
    text-align: center !important;
}

.titi-art-amelia-mount .am-fs__payments > * {
    display: none !important;
}

.titi-art-amelia-mount .am-fs__payments::after {
    content: 'Votre rendez-vous est prêt à être confirmé.';
    color: rgba(245, 240, 232, 0.72);
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
}

/* Payment remains an internal Amelia record but is not presented as part of
   the customer-facing confirmation. */
.titi-art-amelia-mount :is(.am-fs__congrats-info-payment, [class*='congrats'] [class*='payment']) {
    display: none !important;
}

@media (max-width: 767px) {
    .titi-art-amelia-mount .am-fs__wrapper {
        width: 100% !important;
        min-width: 0 !important;
        border-inline: 0 !important;
    }

    .titi-art-amelia-mount :is(.am-fs__main, .am-fs-sb) {
        min-width: 0 !important;
    }
}

/* Month and year controls need the light treatment used in the original
   Titi Art calendar, independently from the dark service selector. */
.titi-art-amelia-mount .am-advsc__header :is(
    .el-select,
    .el-cascader,
    .am-select,
    .am-input
) {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.titi-art-amelia-mount .am-advsc__header :is(.el-input__wrapper, .el-select__wrapper) {
    min-height: 56px !important;
    border: 1px solid rgba(13, 27, 46, 0.18) !important;
    background: var(--ta-amelia-cream) !important;
    box-shadow: none !important;
}

.titi-art-amelia-mount .am-advsc__header :is(
    .el-input__inner,
    .el-select__selected-item,
    .el-select__placeholder,
    .el-input__suffix,
    .el-select__suffix,
    .el-icon
) {
    color: var(--ta-amelia-navy) !important;
    opacity: 1 !important;
}

/* Amelia constrains the selected month/year label internally. Let the short
   localized values (for example "août" and "2026") use the available space. */
.titi-art-amelia-mount .am-advsc__header :is(.el-select__selected-item, .el-select__placeholder) {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}

.titi-art-amelia-mount .am-advsc__header :is(.el-input__inner, .el-select__selected-item) {
    font-size: clamp(1rem, 3vw, 1.25rem) !important;
}

.titi-art-amelia-mount .am-advsc__header :is(.el-input__wrapper, .el-select__wrapper):hover,
.titi-art-amelia-mount .am-advsc__header :is(.el-input__wrapper, .el-select__wrapper).is-focus,
.titi-art-amelia-mount .am-advsc__header :is(.el-input__wrapper, .el-select__wrapper).is-focused {
    border-color: var(--ta-amelia-red) !important;
    background: #fff !important;
}

/* Month and year remain clickable; their decorative dropdown chevrons are
   removed to keep the calendar header visually quiet. */
.titi-art-amelia-mount .am-advsc__header .el-select__suffix {
    display: none !important;
}

.titi-art-amelia-mount .am-advsc__header :is(.el-input__wrapper, .el-select__wrapper) {
    padding-inline: 18px !important;
}

@media (max-width: 600px) {
    .titi-art-amelia-mount .am-advsc__header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    .titi-art-amelia-mount .am-advsc__header > * {
        min-width: 0 !important;
        width: 100% !important;
        max-width: none !important;
    }

    .titi-art-amelia-mount .am-advsc__header > :last-child {
        grid-column: 1 / -1 !important;
        justify-self: end !important;
        width: auto !important;
    }

    .titi-art-amelia-mount .am-advsc__header :is(.el-input__wrapper, .el-select__wrapper) {
        min-height: 52px !important;
        padding-inline: 14px !important;
    }
}

.titi-art-amelia-mount .titi-art-field-error {
    width: 100%;
    margin: 7px 0 0 !important;
    color: #ff6078 !important;
    font: 400 0.78rem/1.4 var(--ta-font-body) !important;
}

.titi-art-amelia-mount input[aria-invalid='true'] {
    border-color: var(--ta-amelia-red) !important;
}

/* The initial Amelia selector wraps its real input in am-ff__item-content. */
.titi-art-amelia-mount .am-fs__init-form__item .am-ff__item-content {
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.titi-art-amelia-mount .am-fs__init-form__item .am-ff__item-content > * {
    width: 100% !important;
    min-width: 0 !important;
}

/* The inner control provides the only visible field boundary. */
.titi-art-amelia-mount :is(
    .am-fs__init-form__item,
    .am-fs__init-form__item .am-ff__item,
    .am-fs__init-form__item .am-ff__item-content,
    .am-fs__init-form__item [class*='form-item']
) {
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.titi-art-amelia-mount .am-fs__init-form__item :is(.el-input__wrapper, .el-select__wrapper) {
    border: 1px solid rgba(245, 240, 232, 0.18) !important;
}

/* Bring the select arrow and its selected-state X closer to the right edge. */
.titi-art-amelia-mount .am-fs__init-form__item .el-select__wrapper {
    padding-right: 22px !important;
}

.titi-art-amelia-mount .am-fs__init-form__item :is(
    .el-select__selected-item,
    .el-select__placeholder,
    .el-input__inner,
    .el-select__suffix,
    .el-icon
) {
    color: var(--ta-amelia-cream) !important;
    -webkit-text-fill-color: var(--ta-amelia-cream) !important;
    opacity: 1 !important;
}

/* Element Plus keeps a searchable input inside the select. Its inherited
   background looked like a second, smaller field inside the real control. */
.titi-art-amelia-mount .am-fs__init-form__item :is(
    .el-select__selection,
    .el-select__selected-item,
    .el-select__input-wrapper,
    .el-select__input
) {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Titi Art step progression: red for completed/current, muted red ahead. */
.titi-art-amelia-mount .am-progress-bar .am-step {
    background: rgba(200, 16, 46, 0.22) !important;
}

.titi-art-amelia-mount .am-progress-bar :is(.am-passed-step, .am-current-step) {
    background: var(--ta-amelia-red) !important;
}

.titi-art-selected-choice {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.titi-art-selected-choice strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.titi-art-selected-choice:nth-child(2) {
    padding-left: clamp(24px, 3vw, 52px);
}

.titi-art-selected-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}

@media (max-width: 767px) {
    .titi-art-selected-barber-notice {
        grid-template-columns: 1fr;
    }

    .titi-art-selected-barber-notice span {
        grid-column: auto;
    }

    .titi-art-selected-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 12px 20px;
    }

    .titi-art-selected-choice:nth-child(2) {
        padding-left: 0;
    }

    .titi-art-amelia-mount .am-fs__info-form {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 22px !important;
    }

    .titi-art-amelia-mount .am-fs__info-form__item {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        flex: 0 0 100% !important;
    }

    .titi-art-amelia-mount .am-fs__info-form__item :is(
        .el-form-item,
        .el-form-item__content,
        .am-input-wrapper,
        .am-input-phone-wrapper,
        .m-input-phone-number,
        input
    ) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

/* Give every customer detail the full form width on all screen sizes. */
.titi-art-amelia-mount .am-fs__info-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: max-content !important;
    align-content: start !important;
    gap: 22px !important;
}

.titi-art-amelia-mount .am-fs__info-form__item {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    flex: 0 0 100% !important;
}

.titi-art-amelia-mount .am-fs__info-form__item :is(
    .el-form-item,
    .el-form-item__content,
    .am-input-wrapper,
    .am-input-phone-wrapper,
    .m-input-phone-number,
    input
) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
}

/* The information step is taller now that its fields are stacked. Reserve
   room inside its scroll area so the telephone field clears the fixed footer. */
.titi-art-amelia-mount .am-fs__info.am-fs__main-content {
    padding-bottom: 176px !important;
    scroll-padding-bottom: 176px !important;
}

/* Amelia keeps the telephone input's inner row shorter than the visible
   field. Match both layers on every viewport so the number is vertically
   centred like the other customer fields. */
.titi-art-amelia-mount .am-input-phone.m-input-phone-number .m-input-wrapper,
.titi-art-amelia-mount .am-input-phone.m-input-phone-number
    .m-phone-input .m-input-wrapper-input {
    height: 58px !important;
    min-height: 58px !important;
    align-items: center !important;
}

.titi-art-amelia-mount .am-input-phone.m-input-phone-number
    .m-phone-input input {
    height: 58px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 58px !important;
}

/* On desktop the taller information-step shell already contains all four
   stacked fields. Remove Amelia's 444px scrolling viewport there so its
   scrollbar does not appear beside the telephone row. Mobile keeps Amelia's
   scrollable viewport and the extra footer clearance above. */
@media (min-width: 768px) {
    .titi-art-amelia-mount .am-fs__info.am-fs__main-content {
        height: calc(100% - 198px) !important;
        padding-bottom: 32px !important;
        overflow-y: hidden !important;
        scroll-padding-bottom: 0 !important;
    }

}

.titi-art-amelia-mount .titi-art-required-field:not(.is-required) > .el-form-item__label::before {
    content: '*';
    margin-right: 6px;
    color: var(--ta-amelia-red);
}

/* Four full-width rows need more vertical room than Amelia's original
   two-column information step. Keep the other booking steps unchanged. */
.titi-art-amelia-mount .am-fs__wrapper:has(.am-fs__info),
.titi-art-amelia-mount .am-fs__main:has(.am-fs__info),
.titi-art-amelia-mount .am-fs__main-inner:has(.am-fs__info) {
    height: 760px !important;
    min-height: 760px !important;
}

@media (max-width: 767px) {
    .titi-art-amelia-mount .am-fs__wrapper:has(.am-fs__info),
    .titi-art-amelia-mount .am-fs__main:has(.am-fs__info),
    .titi-art-amelia-mount .am-fs__main-inner:has(.am-fs__info) {
        height: min(760px, calc(100dvh - 24px)) !important;
        min-height: min(760px, calc(100dvh - 24px)) !important;
    }
}

/* Advanced Titi Art treatment ------------------------------------------------
   Amelia keeps ownership of the fields and transitions; this layer makes the
   native flow feel like part of the editorial page rather than an embed. */
.titi-art-amelia-mount {
    --ta-panel: #111f33;
    --ta-panel-deep: #07111f;
    --ta-soft-white: rgba(245, 240, 232, 0.68);
    --ta-font-display: 'Playfair Display', Georgia, serif;
    --ta-font-label: 'Oswald', sans-serif;
    --ta-font-body: 'Lato', sans-serif;
}

/* Lock Amelia to the same three-family type system as the original site. */
.titi-art-amelia-mount :is(.amelia-v2-booking, .am-fs__wrapper, .am-fs__wrapper *) {
    font-family: var(--ta-font-body) !important;
}

.titi-art-amelia-mount :is(
    .am-fs__main-heading,
    .am-fs__main-heading-inner,
    .am-fs__main-heading-inner-title,
    .am-fs-sb__page-heading,
    .am-fs__congrats-main-heading,
    [class*='congrats'][class*='heading']
) {
    font-family: var(--ta-font-display) !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
}

.titi-art-amelia-mount :is(
    label,
    button,
    .am-button,
    .am-ff__item-label,
    .am-fs__init-form__label,
    .am-fs__info-form__label,
    .am-fs-sb__step-heading
) {
    font-family: var(--ta-font-label) !important;
}

.titi-art-amelia-mount :is(button, .am-button) {
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

.titi-art-amelia-mount :is(
    input,
    textarea,
    .el-input__inner,
    .am-advsc__dayGridMonth-cell,
    .am-advsc__slots-item,
    [class*='time-slot']
) {
    font-family: var(--ta-font-body) !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
}

.titi-art-amelia-active :is(.el-select-dropdown__item, [role='option'], .el-popper *) {
    font-family: 'Lato', sans-serif !important;
}

/* Amelia nests an input, a select and an advanced-select wrapper. Only the
   innermost control should look like a field; the others stay invisible. */
.titi-art-amelia-mount :is(
    .am-adv-select__wrapper,
    .am-adv-select,
    .am-input,
    .el-select,
    .el-cascader
) {
    width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.titi-art-amelia-mount :is(
    .am-adv-select__wrapper,
    .am-adv-select,
    .am-input,
    .el-select,
    .el-cascader
)::before,
.titi-art-amelia-mount :is(
    .am-adv-select__wrapper,
    .am-adv-select,
    .am-input,
    .el-select,
    .el-cascader
)::after {
    display: none !important;
}

.titi-art-amelia-mount :is(.am-adv-select, .am-input, .el-select, .el-cascader) .el-input__wrapper,
.titi-art-amelia-mount .el-select__wrapper {
    width: 100% !important;
    min-height: 60px !important;
    padding: 0 54px 0 18px !important;
    border: 1px solid rgba(245, 240, 232, 0.18) !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.045) !important;
    box-shadow: none !important;
}

.titi-art-amelia-mount :is(.am-adv-select, .am-input, .el-select, .el-cascader) .el-input__wrapper:hover,
.titi-art-amelia-mount :is(.am-adv-select, .am-input, .el-select, .el-cascader) .el-input__wrapper.is-focus,
.titi-art-amelia-mount .el-select__wrapper:hover,
.titi-art-amelia-mount .el-select__wrapper.is-focused {
    border-color: var(--ta-amelia-red) !important;
    background: rgba(255, 255, 255, 0.055) !important;
    box-shadow: none !important;
}

.titi-art-amelia-mount :is(.am-adv-select, .am-input, .el-select, .el-cascader) .el-input__inner {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.titi-art-amelia-mount :is(.el-input__prefix, .el-input__suffix) {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Keep Amelia's pictograms on their dedicated icon font. */
.titi-art-amelia-mount :is(
    [class^='am-icon-'],
    [class*=' am-icon-'],
    .el-icon,
    .el-input__icon
),
.titi-art-amelia-mount :is(
    [class^='am-icon-'],
    [class*=' am-icon-'],
    .el-icon,
    .el-input__icon
)::before {
    font-family: 'amelia-icons' !important;
    font-style: normal !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* Custom service catalogue -------------------------------------------------- */
.titi-art-amelia-mount.titi-art-awaiting-service .amelia-v2-booking {
    position: absolute !important;
    overflow: hidden !important;
    width: 1px !important;
    height: 1px !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

.titi-art-service-picker {
    padding: clamp(34px, 6vw, 72px);
    border-block: 1px solid rgba(255, 255, 255, 0.1);
    background:
        radial-gradient(circle at 100% 0, rgba(200, 16, 46, 0.09), transparent 34%),
        #111f33;
}

.titi-art-service-picker-kicker {
    margin: 0 0 8px;
    color: var(--ta-amelia-red);
    font: 600 0.72rem var(--ta-font-label);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.titi-art-service-picker > h3 {
    margin: 0 0 clamp(32px, 5vw, 54px);
    color: #fff;
    font: 700 clamp(2rem, 4.5vw, 3.6rem)/1.05 var(--ta-font-display);
    letter-spacing: -0.025em;
}

.titi-art-service-groups {
    display: grid;
    gap: 28px;
    counter-reset: titi-art-service-category;
}

.titi-art-service-group {
    position: relative;
    padding: clamp(24px, 4vw, 38px);
    border-left: 3px solid var(--ta-amelia-red);
    background: linear-gradient(100deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
    counter-increment: titi-art-service-category;
}

.titi-art-service-group:nth-child(even) {
    background: linear-gradient(100deg, rgba(200, 16, 46, 0.055), rgba(255, 255, 255, 0.012));
}

.titi-art-service-group > h4 {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 24px;
    color: #fff;
    font: 700 clamp(1.45rem, 2.5vw, 2rem)/1.15 var(--ta-font-display);
    letter-spacing: -0.015em;
}

.titi-art-service-group > h4::before {
    content: counter(titi-art-service-category, decimal-leading-zero);
    color: var(--ta-amelia-red);
    font: 600 0.72rem var(--ta-font-label);
    letter-spacing: 0.16em;
}

.titi-art-service-group > h4::after {
    content: '';
    height: 1px;
    flex: 1;
    background: rgba(255, 255, 255, 0.1);
}

.titi-art-service-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.titi-art-service-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 12px 20px;
    min-height: 142px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.025);
    color: var(--ta-amelia-cream);
    text-decoration: none;
    transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.titi-art-service-card::before {
    content: '';
    position: absolute;
    inset: -1px auto -1px -1px;
    width: 3px;
    background: var(--ta-amelia-red);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 180ms ease;
}

.titi-art-service-card:hover,
.titi-art-service-card:focus-visible {
    border-color: rgba(200, 16, 46, 0.7);
    background: rgba(200, 16, 46, 0.075);
    transform: translateY(-2px);
    outline: none;
}

.titi-art-service-card:hover::before,
.titi-art-service-card:focus-visible::before {
    transform: scaleY(1);
}

.titi-art-service-card-name {
    color: #fff;
    font: 700 1.2rem/1.3 var(--ta-font-display);
}

.titi-art-service-card-meta {
    display: flex;
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    align-items: baseline;
    justify-content: flex-end;
    gap: 10px;
    color: rgba(245, 240, 232, 0.48);
    font: 400 0.8rem var(--ta-font-body);
    white-space: nowrap;
}

.titi-art-service-card-meta strong {
    color: var(--ta-amelia-red);
    font: 600 0.88rem var(--ta-font-label);
}

.titi-art-service-card-action {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    color: var(--ta-amelia-red);
    font: 600 0.72rem var(--ta-font-label);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.titi-art-services-empty {
    padding: 42px;
    border: 1px solid rgba(200, 16, 46, 0.4);
    text-align: center;
}

@media (max-width: 767px) {
    .titi-art-service-picker {
        padding: 30px 18px;
    }

    .titi-art-service-groups {
        gap: 20px;
    }

    .titi-art-service-group {
        padding: 24px 18px;
    }

    .titi-art-service-grid {
        grid-template-columns: 1fr;
    }

    .titi-art-service-card {
        min-height: 124px;
        padding: 20px;
    }

}

.titi-art-amelia-mount .am-fs__wrapper {
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: var(--ta-panel) !important;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.2) !important;
}

.titi-art-amelia-mount .am-fs__main {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.018), transparent 46%),
        var(--ta-panel) !important;
}

.titi-art-amelia-mount :is(.am-fs__main-header, .am-fs__main-content) {
    padding-inline: clamp(24px, 5vw, 64px) !important;
}

.titi-art-amelia-mount .am-fs__main-header {
    min-height: 118px !important;
    padding-top: 28px !important;
    border-bottom: 0 !important;
}

.titi-art-amelia-mount .am-fs__main-header::after {
    content: '';
    position: absolute;
    right: clamp(24px, 5vw, 64px);
    bottom: 0;
    left: clamp(24px, 5vw, 64px);
    height: 2px;
    background: linear-gradient(90deg, var(--ta-amelia-red) 0 25%, rgba(255, 255, 255, 0.16) 25% 100%);
}

.titi-art-amelia-mount :is(.am-fs__main-heading, .am-fs__main-heading-inner-title) {
    font-size: clamp(1.7rem, 3vw, 2.45rem) !important;
    line-height: 1.05 !important;
}

.titi-art-amelia-mount :is(.am-fs__init-form__label, .am-fs__info-form__label, .am-ff__item-label) {
    margin-bottom: 10px !important;
    color: var(--ta-soft-white) !important;
    font-family: 'Oswald', sans-serif !important;
    font-size: 0.83rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.11em !important;
    text-transform: uppercase !important;
}

.titi-art-amelia-mount :is(.el-input__wrapper, .el-textarea__inner, .am-adv-select__wrapper) {
    min-height: 58px !important;
    padding-inline: 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.13) !important;
    background: rgba(255, 255, 255, 0.045) !important;
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease !important;
}

.titi-art-amelia-mount :is(.el-input__wrapper, .am-adv-select__wrapper):hover,
.titi-art-amelia-mount :is(.el-input__wrapper, .am-adv-select__wrapper).is-focus {
    border-color: rgba(200, 16, 46, 0.85) !important;
    background: rgba(200, 16, 46, 0.06) !important;
    box-shadow: 0 0 0 1px rgba(200, 16, 46, 0.22) !important;
}

.titi-art-amelia-mount :is(input, textarea, .el-input__inner) {
    color: #fff !important;
    font-size: 1rem !important;
}

.titi-art-amelia-mount :is(input, textarea, .el-input__inner)::placeholder {
    color: rgba(245, 240, 232, 0.38) !important;
}

/* Amelia teleports its dropdown outside the booking wrapper. */
.titi-art-amelia-active :is(.el-select__popper, .el-popper[role='tooltip']) {
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 0 !important;
    background: #f5f0e8 !important;
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.34) !important;
}

.titi-art-amelia-active :is(.el-select-dropdown__item, [role='option']) {
    min-height: 58px !important;
    padding: 12px 18px !important;
    color: #101b2a !important;
    font-family: 'Lato', sans-serif !important;
    transition: background 150ms ease, color 150ms ease !important;
}

.titi-art-amelia-active :is(.el-select-dropdown__item, [role='option']):hover,
.titi-art-amelia-active :is(.el-select-dropdown__item.is-hovering, [role='option'][aria-selected='true']) {
    background: rgba(200, 16, 46, 0.1) !important;
    color: #9f0c25 !important;
}

.titi-art-amelia-active :is(.el-select-dropdown__item.selected, [role='option'][aria-selected='true']) {
    box-shadow: inset 4px 0 0 var(--ta-amelia-red) !important;
    font-weight: 700 !important;
}

.titi-art-amelia-mount :is(.am-fs-iipu__employee, .am-fs__init-item) {
    min-height: 76px !important;
    padding: 14px 18px !important;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease !important;
}

.titi-art-amelia-mount :is(.am-fs-iipu__employee, .am-fs__init-item):hover {
    transform: translateY(-2px);
}

.titi-art-amelia-mount :is(.am-fs-iipu__employee.am--selected, .am-fs__init-item.am--selected, [aria-selected='true']) {
    position: relative;
    border-color: var(--ta-amelia-red) !important;
    background: linear-gradient(90deg, rgba(200, 16, 46, 0.16), rgba(200, 16, 46, 0.04)) !important;
}

.titi-art-amelia-mount :is(.am-button--primary, .am-button--filled) {
    min-height: 54px !important;
    padding-inline: 30px !important;
    background: var(--ta-amelia-red) !important;
    border: 1px solid var(--ta-amelia-red) !important;
    color: #fff !important;
    transition: background 160ms ease, transform 160ms ease !important;
}

.titi-art-amelia-mount :is(.am-button--primary, .am-button--filled):hover {
    background: #e01839 !important;
    transform: translateY(-1px);
}

.titi-art-amelia-mount .am-fs__main-footer {
    min-height: 92px !important;
    padding-inline: clamp(24px, 5vw, 64px) !important;
    background: var(--ta-panel-deep) !important;
}

.titi-art-amelia-mount :is(.am-advsc__dayGridMonth-cell, .am-advsc__slots-item) {
    min-height: 58px !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    background: rgba(255, 255, 255, 0.035) !important;
    transition: border-color 150ms ease, background 150ms ease, transform 150ms ease !important;
}

.titi-art-amelia-mount :is(.am-advsc__dayGridMonth-cell, .am-advsc__slots-item):hover {
    border-color: rgba(200, 16, 46, 0.7) !important;
    background: rgba(200, 16, 46, 0.09) !important;
    transform: translateY(-1px);
}

.titi-art-amelia-mount :is(.am-advsc__dayGridMonth-selected, .am-advsc__slots-item__selected) {
    box-shadow: 0 7px 20px rgba(200, 16, 46, 0.24) !important;
}

.titi-art-amelia-mount :is(.am-fs__congrats-info, .am-fs__congrats-info-wrapper) {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.035) !important;
    color: var(--ta-amelia-cream) !important;
}

.titi-art-amelia-mount :is(.am-fs__congrats-info *, .am-fs__congrats-info-wrapper *) {
    color: inherit !important;
}

.titi-art-amelia-mount :is(.am-fs__congrats-calendar, [class*='congrats-calendar']) > * {
    border-color: rgba(255, 255, 255, 0.12) !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.045) !important;
}

@media (max-width: 767px) {
    .titi-art-amelia-mount :is(.am-fs__main-header, .am-fs__main-content, .am-fs__main-footer) {
        padding-inline: 18px !important;
    }

    .titi-art-amelia-mount .am-fs__main-header::after {
        right: 18px;
        left: 18px;
    }

    .titi-art-amelia-mount .am-fs__main-header {
        min-height: 94px !important;
    }

    .titi-art-amelia-mount :is(.am-button--primary, .am-button--filled) {
        width: 100% !important;
    }

    .titi-art-selected-barber-notice {
        margin-inline: 0;
        padding: 14px 16px;
    }
}

/* Final slot specificity: Amelia uses a wrapper and an inner button. */
.titi-art-amelia-mount .am-advsc__slots-item {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

.titi-art-amelia-mount .am-advsc__slots-item__inner {
    display: grid !important;
    min-height: 58px !important;
    place-items: center !important;
    padding: 14px 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.035) !important;
    color: rgba(245, 240, 232, 0.74) !important;
}

.titi-art-amelia-mount .am-advsc__slots-item:hover .am-advsc__slots-item__inner,
.titi-art-amelia-mount .am-advsc__slots-item:focus-visible .am-advsc__slots-item__inner {
    border-color: rgba(200, 16, 46, 0.72) !important;
    background: rgba(200, 16, 46, 0.08) !important;
    color: #fff !important;
}

.titi-art-amelia-mount .am-advsc__slots-item__selected .am-advsc__slots-item__inner {
    border-color: var(--ta-amelia-red) !important;
    background: var(--ta-amelia-red) !important;
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(200, 16, 46, 0.24) !important;
}

/* Keep the final appointment option above Amelia's fixed action footer. */
.titi-art-amelia-mount .am-advsc__slots {
    padding-bottom: 118px !important;
    scroll-padding-bottom: 118px !important;
}

/* Phone input aligned with the other contact fields. */
.titi-art-amelia-mount :is(.am-input-phone-wrapper, .m-input-phone-number) {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 58px !important;
    border: 1px solid rgba(255, 255, 255, 0.13) !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.045) !important;
    box-shadow: none !important;
    color: #fff !important;
}

.titi-art-amelia-mount :is(.am-input-phone-wrapper, .m-input-phone-number) * {
    background-color: transparent !important;
    box-shadow: none !important;
}

.titi-art-amelia-mount .m-input-phone-number {
    display: flex !important;
    align-items: stretch !important;
    border: 0 !important;
}

.titi-art-amelia-mount .m-input-phone-number .m-input-wrapper {
    min-height: 58px !important;
    border: 0 !important;
    border-radius: 0 !important;
}

.titi-art-amelia-mount .m-input-phone-number__country-select {
    display: none !important;
}

.titi-art-amelia-mount .m-input-phone-number .m-phone-input {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
}

.titi-art-amelia-mount :is(.am-input-phone-wrapper, .m-input-phone-number) :is(
    .el-input__wrapper,
    .el-select__wrapper,
    .m-input-phone-number__country-select,
    [class*='country']
) {
    border-color: rgba(255, 255, 255, 0.13) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.titi-art-amelia-mount :is(.am-input-phone-wrapper, .m-input-phone-number) input,
.titi-art-amelia-mount input[type='tel'] {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    color: #fff !important;
    caret-color: var(--ta-amelia-red) !important;
    -webkit-text-fill-color: #fff !important;
    background: transparent !important;
}

.titi-art-amelia-mount :is(.am-input-phone-wrapper, .m-input-phone-number) input::placeholder,
.titi-art-amelia-mount input[type='tel']::placeholder {
    color: rgba(245, 240, 232, 0.38) !important;
    -webkit-text-fill-color: rgba(245, 240, 232, 0.38) !important;
    opacity: 1 !important;
}

.titi-art-amelia-mount :is(.am-input-phone-wrapper, .m-input-phone-number) :is(
    svg,
    .el-icon,
    [class^='am-icon-'],
    [class*=' am-icon-']
) {
    color: var(--ta-amelia-cream) !important;
}

/* Calendar cleanup. */
.titi-art-amelia-mount .titi-art-hide-timezone {
    display: none !important;
}

.titi-art-amelia-mount :is(
    .am-advsc__dayGridMonth-weekDay,
    .am-advsc__dayGridMonth-weekday,
    .fc-col-header-cell,
    .fc-col-header-cell-cushion,
    [class*='weekDay'],
    [class*='weekday']
) {
    color: #fff !important;
    opacity: 1 !important;
}

.titi-art-amelia-mount .titi-art-selected-datetime {
    color: #fff !important;
    font-family: var(--ta-font-body) !important;
    font-size: clamp(1.05rem, 2.2vw, 1.3rem) !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    opacity: 1 !important;
}
.titi-art-services-loading .titi-art-service-picker {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 120ms ease;
}

.titi-art-services-loading .titi-art-service-picker::before {
    content: "Chargement des services…";
    display: block;
    margin: 0 0 1rem;
    color: #fff;
    font-family: "Lato", sans-serif;
    text-align: center;
}