/**
 * Reservation Tunnel Styles
 *
 * All colors, shadows, and radii come from the global design-token layer
 * (see assets/styles/tokens/{primitives,semantic,bootstrap-bridge}.css —
 * loaded via app.css).
 *
 * Semantic intent:
 * - Selection states (cards, TVA, slots) → primary tokens (--color-border-selected,
 *   --color-bg-selected). Selection is an informational "you picked this" signal.
 * - CTA / action buttons (Continuer, Sélectionner, Payer) → accent tokens
 *   (--color-action-bg / --color-action-text). Accent draws the eye.
 * - Default service icons (thermomètre, clé, soleil, lune) → --color-icon-default
 *   (neutral gray). The brief explicitly calls out replacing the aggressive red.
 * - Navigation links ("Modifier") → --color-text-link (primary).
 *
 * Responsive breakpoints (unchanged):
 * - Mobile: <576px
 * - Tablet: 576px – 991px
 * - Desktop: >=992px
 */

/* ==========================================================================
   Utility classes used by reservation templates
   ========================================================================== */

/* Recap section labels — uppercase tracking, used across all _recap_*.html.twig */
.recap-label {
    font-size: var(--font-size-xs);
    letter-spacing: var(--letter-spacing-caps);
}

/* Recap total highlight — accent colored numeric emphasis */
.recap-total-accent {
    color: var(--color-icon-default);
}

/* Recap line icon — accent colored Phosphor icon */
.recap-icon {
    color: var(--color-icon-default);
}

/* Modal backdrop overlay (used by custom modals that don't use Bootstrap Modal JS) */
.modal-backdrop-overlay {
    background-color: color-mix(
        in oklab,
        var(--color-neutral-900) 50%,
        transparent
    );
}

/* ==========================================================================
   Field surface — fond clair pour inputs / textareas / selects.
   À appliquer soit directement sur le champ, soit sur un conteneur parent
   (descend sur les champs enfants).
   ========================================================================== */

.field-surface,
.field-surface input,
.field-surface textarea,
.field-surface select {
    background-color: var(--color-field-bg);
    border-color: var(--color-field-border);
}

/* ==========================================================================
   Global placeholder color (tunnel-wide)
   ========================================================================== */

.reservation-step1 textarea::placeholder,
.reservation-step2 textarea::placeholder,
.reservation-step3 textarea::placeholder,
.reservation-step4 textarea::placeholder,
.reservation-step1 input::placeholder,
.reservation-step2 input::placeholder,
.reservation-step3 input::placeholder,
.reservation-step4 input::placeholder {
    color: var(--color-placeholder);
    opacity: 1;
}

/* ==========================================================================
   Stepper Component (Desktop)
   ========================================================================== */

.stepper {
    /* display comes from the .d-md-inline-flex utility (w-fit pill, doesn't stretch) */
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 40px;
    padding: 6px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-card);
}

.stepper__item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: color-mix(in oklab, var(--color-neutral-900) 20%, transparent);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    padding: 8px 12px;
    border-radius: var(--radius-pill);
    transition: color 0.2s ease;
}

/* Numbered badge inside the active (or confirmation) pill — white-on-dark disc */
.stepper__badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;

    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
}

.stepper__item .stepper__number,
.stepper__item .stepper__name {
    color: inherit;
    font-weight: inherit;
}

.stepper__item--completed {
    color: color-mix(in oklab, var(--color-neutral-900) 60%, transparent);
}

.stepper__item--active {
    background-color: color-mix(
        in oklab,
        var(--color-neutral-900) 5%,
        transparent
    );
    color: color-mix(in oklab, var(--color-neutral-900) 80%, transparent);
    font-weight: var(--font-weight-bold);
    padding: 8px 16px;
}

.stepper__item--confirmation {
    background-color: var(--color-success);
    color: var(--color-neutral-000);
    font-weight: var(--font-weight-bold);
    padding: 8px 16px;
}

.stepper__item--clickable {
    text-decoration: none;
    cursor: pointer;
}

.stepper__item--clickable:hover {
    color: var(--color-text-link-hover);
}

.stepper__separator {
    color: var(--color-placeholder);
    font-size: 1rem;
    display: flex;
    align-items: center;
}

/* ==========================================================================
   Stepper Mobile Component
   ========================================================================== */

.stepper-mobile {
    display: block;
    margin-top: -1.5rem; /* cancel main.container mt-4 */
    margin-left: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
    margin-right: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
    margin-bottom: 24px;
}

.stepper-mobile__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    background-color: var(--color-surface);
    border: none;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    cursor: pointer;
    transition: box-shadow 0.2s ease;
}

.stepper-mobile__header:hover {
    box-shadow: var(--shadow-card-hover);
}

.stepper-mobile__current {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* Round numbered badge — premium-dark disc (green on the confirmation step) */
.stepper-mobile__badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--color-action-bg);
    color: var(--color-progression-active);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

.stepper-mobile__badge--success {
    background-color: var(--color-success);
    color: var(--color-neutral-000);
}

.stepper-mobile__labels {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.stepper-mobile__eyebrow {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.stepper-mobile__name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
}

.stepper-mobile__caret {
    flex-shrink: 0;
    color: var(--color-text-muted);
    transition: transform 0.2s ease;
}

.stepper-mobile__header[aria-expanded="true"] .stepper-mobile__caret {
    transform: rotate(180deg);
}

.stepper-mobile__list {
    margin-top: 8px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--color-neutral-200);
}

.stepper-mobile__list-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.stepper-mobile__list-item--active {
    background-color: var(--color-bg-selected);
    color: var(--color-progression-passed);
    font-weight: var(--font-weight-semibold);
}

.stepper-mobile__list-item--completed {
    color: var(--color-progression-passed);
}

.stepper-mobile__list-item--clickable {
    text-decoration: none;
    cursor: pointer;
}

.stepper-mobile__list-item--clickable:hover {
    background-color: color-mix(
        in oklab,
        var(--color-primary-500) 6%,
        transparent
    );
}

.stepper-mobile__step-number {
    margin-right: 6px;
    font-weight: var(--font-weight-semibold);
}

.stepper-mobile__check {
    color: var(--color-progression-passed);
    font-size: 1rem;
}

/* ==========================================================================
   Step 1 — promo banner, section titles, equipment grid
   ========================================================================== */

.promo-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 20px;
    margin-bottom: 32px;
    padding: 20px 24px;
    color: var(--color-neutral-000);
    background: linear-gradient(90deg, var(--color-surface-dark), var(--color-primary-900));
    border-radius: 16px;
    box-shadow: 0 12px 30px color-mix(in oklab, var(--color-neutral-900) 18%, transparent);
}

.promo-banner__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.promo-banner__eyebrow {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--color-warning);
}

.promo-banner__title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
}

.promo-banner__note {
    margin: 0;
    font-size: var(--font-size-sm);
    opacity: 0.75;
}

.promo-countdown {
    display: flex;
    align-items: center;
    gap: 14px;
}

.promo-countdown__label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    opacity: 0.7;
}

.promo-countdown__units {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-variant-numeric: tabular-nums;
}

.promo-countdown__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 56px;
    padding: 8px 10px;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    background-color: color-mix(in oklab, var(--color-neutral-000) 8%, transparent);
    border-radius: var(--radius-sm);
}

.promo-countdown__unit small {
    margin-top: 4px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    opacity: 0.6;
}

.promo-countdown__sep {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    opacity: 0.5;
}

.promo-code-chip {
    display: inline-block;
    padding: 1px 12px;
    font-family: var(--bs-font-monospace);
    font-size: var(--font-size-md);
    letter-spacing: var(--letter-spacing-caps);
    white-space: nowrap;
    color: var(--color-text-main);
    background-color: var(--color-surface);
    border: 1.5px dashed var(--color-warning);
    border-radius: var(--radius-sm);
}

.step1-section {
    margin-bottom: 40px;
}

/* Doubled class: beats the tunnel-wide `.reservation-step1 h2` weight rule. */
.step1-section-title.step1-section-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin-bottom: 16px;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-text-main);
}

.step1-section-title__meta {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-muted);
}

.step1-section-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-000);
    background-color: var(--color-primary-500);
    border-radius: 50%;
}

/* Mobile first: 2 columns of vertical cards, rows from md up. */
.equipment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.equipment-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 34px 12px 12px;
    font: inherit;
    text-align: left;
    color: var(--color-text-main);
    background-color: var(--color-surface);
    border: 2px solid var(--color-field-border);
    border-radius: 12px;
    cursor: pointer;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease;
}

.equipment-card:hover {
    border-color: var(--color-primary-500);
    box-shadow: 0 6px 18px var(--color-primary-soft);
}

.equipment-card:focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
}

.equipment-card.is-active {
    background-color: var(--color-bg-selected);
    border-color: var(--color-primary-500);
    box-shadow: 0 6px 20px var(--color-primary-soft);
}

.equipment-card__thumb {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    overflow: hidden;
    font-size: 1.75rem;
    color: var(--color-icon-default);
    background-color: var(--color-surface);
    border: 1px solid var(--color-field-border);
    border-radius: 10px;
}

.equipment-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.equipment-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}

.equipment-card__name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
}

.equipment-card__check {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 0.7rem;
    color: var(--color-neutral-000);
    background-color: var(--color-surface);
    border: 1.5px solid var(--color-neutral-300);
    border-radius: 50%;
}

.equipment-card.is-active .equipment-card__check {
    background-color: var(--color-primary-500);
    border-color: var(--color-primary-500);
}

@media (min-width: 768px) {
    .equipment-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 12px;
    }

    .equipment-card {
        flex-direction: row;
        align-items: center;
        gap: 14px;
        min-height: 76px;
        padding-right: 40px;
    }
}

/* ==========================================================================
   Step 1 — mobile render (< md): category strip, current selection
   (offers = the stacked .offer-card grid)
   ========================================================================== */

.promo-banner--compact {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 24px;
    padding: 14px 16px;
    border-radius: 14px;
}

.promo-banner__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 10px;
}

.promo-banner--compact .promo-banner__title {
    font-size: var(--font-size-md);
    line-height: 1.2;
}

.promo-banner__code {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-xs);
    white-space: nowrap;
}

.promo-banner__expire {
    font-size: var(--font-size-xs);
    opacity: 0.85;
}

.promo-banner__expire strong {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
}

.step1-section--mobile {
    margin-bottom: 24px;
    /* Breathing room when a category pick scrolls it to the top. */
    scroll-margin-top: 12px;
}

.step1-m-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.step1-m-head .step1-section-title {
    margin-bottom: 10px;
}

.step1-m-legend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 10px;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.equipment-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: var(--color-warning);
    border-radius: 50%;
}

/* Bleeds to the screen edges so the cards scroll under the page gutter. */
.equipment-strip {
    display: flex;
    gap: 8px;
    margin: 0 calc(-1 * var(--bs-gutter-x, 1.5rem) / 2);
    padding: 2px calc(var(--bs-gutter-x, 1.5rem) / 2) 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Snap cards to the page gutter, not to the screen edge. */
    scroll-padding-inline: calc(var(--bs-gutter-x, 1.5rem) / 2);
    scrollbar-width: none;
}

.equipment-strip::-webkit-scrollbar {
    display: none;
}

.equipment-chip {
    position: relative;
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    /* 3.4 cards per screen: the cut 4th card signals the strip scrolls. */
    width: calc((100vw - var(--bs-gutter-x, 1.5rem) / 2 - 3 * 8px) / 3.4);
    min-height: 112px;
    padding: 10px 6px;
    font: inherit;
    color: var(--color-text-main);
    background-color: var(--color-surface);
    border: 2px solid var(--color-field-border);
    border-radius: 12px;
    scroll-snap-align: start;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

/* Very narrow screens: 2.4 cards, so names stay readable. */
@media (max-width: 359.98px) {
    .equipment-chip {
        width: calc((100vw - var(--bs-gutter-x, 1.5rem) / 2 - 2 * 8px) / 2.4);
    }
}

.equipment-chip.is-active {
    background-color: var(--color-bg-selected);
    border-color: var(--color-primary-500);
}

.equipment-chip:focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
}

.equipment-chip > .equipment-dot {
    position: absolute;
    top: 8px;
    left: 8px;
}

.equipment-chip .equipment-card__check {
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
}

.equipment-chip.is-active .equipment-card__check {
    background-color: var(--color-primary-500);
    border-color: var(--color-primary-500);
}

.equipment-chip__thumb,
.step1-current__thumb {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    overflow: hidden;
    font-size: 1.5rem;
    color: var(--color-icon-default);
    background-color: var(--color-surface);
    border: 1px solid var(--color-field-border);
    border-radius: 10px;
}

.equipment-chip__thumb img,
.step1-current__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.equipment-chip__name {
    display: -webkit-box;
    overflow: hidden;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    text-align: center;
    text-wrap: balance;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.step1-current {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 12px 14px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
}

.step1-current__thumb {
    width: 56px;
    height: 56px;
    background-color: var(--color-surface-muted);
    border: 0;
}

.step1-current__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    line-height: 1.25;
}

.step1-current__body strong,
.step1-avis__card figcaption strong {
    font-weight: var(--font-weight-semibold);
}

.step1-current__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* ==========================================================================
   Step 1 content sections (reassurance, why maintain, reviews + FAQ)
   ========================================================================== */

/* Set apart from the offer cards above: a rule, then the three commitments
   grouped in one tinted panel (no white cards that could pass for offers). */
.step1-reassurance {
    margin: 0 0 56px;
    padding-top: 32px;
    border-top: 1px solid color-mix(in oklab, var(--color-neutral-900) 12%, transparent);
}

/* Doubled class: beats the tunnel-wide `.reservation-step1 h2` weight rule. */
.step1-reassurance .step1-eyebrow.step1-eyebrow {
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-caps);
}

.step1-reassurance__list {
    display: grid;
    padding: 4px 18px;
    background-color: var(--color-primary-soft);
    border-radius: 16px;
}

.step1-reassurance__item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 0;
}

.step1-reassurance__item + .step1-reassurance__item {
    border-top: 1px solid var(--color-border);
}

@media (min-width: 992px) {
    .step1-reassurance__list {
        grid-template-columns: repeat(3, 1fr);
        padding: 4px 0;
    }

    .step1-reassurance__item {
        padding: 18px 22px;
    }

    .step1-reassurance__item + .step1-reassurance__item {
        border-top: 0;
        border-left: 1px solid var(--color-border);
    }
}

.step1-reassurance__item strong {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
}

.step1-reassurance__item p,
.step1-why__card p,
.step1-faq__item p {
    margin: 2px 0 0;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
    color: var(--color-text-muted);
}

.step1-reassurance__icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 1.25rem;
    color: var(--color-primary-500);
    background-color: var(--color-surface);
    border-radius: 50%;
}

.step1-eyebrow {
    display: block;
    margin-bottom: 8px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* Doubled class: beats the tunnel-wide `.reservation-step1 h2` weight rule. */
.step1-content-title.step1-content-title {
    margin: 0 0 12px;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-main);
    text-wrap: pretty;
}

.step1-why {
    margin-bottom: 56px;
    padding: 24px 16px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 20px;
}

.step1-why__head {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 8px 48px;
    align-items: end;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--color-border);
}

.step1-why__head p {
    max-width: 52ch;
    margin: 0;
    color: var(--color-text-muted);
}

.step1-why__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 16px;
}

.step1-why__card {
    --why-tone: var(--color-primary-500);
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px;
    background-color: var(--color-surface-muted);
    border-top: 3px solid var(--why-tone);
    border-radius: 12px;
}

.step1-why__card--warning {
    --why-tone: var(--color-warning-ink);
}

.step1-why__card--success {
    --why-tone: var(--color-success-ink);
}

.step1-why__tag {
    align-self: flex-start;
    padding: 2px 10px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--why-tone);
    background-color: color-mix(in oklab, var(--why-tone) 10%, transparent);
    border-radius: var(--radius-pill);
}

.step1-why__card strong {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
}

.step1-avis-faq {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 40px;
    align-items: start;
    margin-bottom: 24px;
}

.step1-avis__summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    margin-bottom: 8px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-link);
    text-decoration: none;
}

.step1-avis__summary .ph-star,
.step1-avis__stars {
    color: rgb(245, 166, 35);
}

@media (max-width: 767.98px) {
    .step1-avis__list {
        display: flex;
        gap: 10px;
        margin: 0 calc(-1 * var(--bs-gutter-x, 1.5rem) / 2);
        padding: 4px calc(var(--bs-gutter-x, 1.5rem) / 2) 8px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: calc(var(--bs-gutter-x, 1.5rem) / 2);
        scrollbar-width: none;
    }

    .step1-avis__list::-webkit-scrollbar {
        display: none;
    }

    .step1-avis__list .step1-avis__card {
        flex: none;
        width: min(290px, 85vw);
        margin: 0;
        scroll-snap-align: start;
    }

    .step1-avis__list figcaption {
        margin-top: auto;
    }

    /* Long Google reviews: equal, compact cards in the carousel. */
    .step1-avis__list blockquote {
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 6;
        -webkit-box-orient: vertical;
    }
}

.step1-avis__card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 14px;
    padding: 18px 20px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
}

.step1-avis__card blockquote {
    margin: 0;
    font-size: var(--font-size-md);
    line-height: var(--line-height-base);
}

.step1-avis__card figcaption {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--font-size-sm);
}

.step1-avis__card figcaption small {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.step1-avis__avatar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary-500);
    background-color: var(--color-primary-soft);
    border-radius: 50%;
}

.step1-faq__intro {
    color: var(--color-text-muted);
}

.step1-faq a {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-link);
    text-decoration: none;
}

.step1-faq__list {
    border-top: 1px solid var(--color-border);
}

.step1-faq__item {
    border-bottom: 1px solid var(--color-border);
}

.step1-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 44px;
    padding: 14px 4px;
    font-weight: var(--font-weight-semibold);
    list-style: none;
    cursor: pointer;
}

.step1-faq__item summary::-webkit-details-marker {
    display: none;
}

.step1-faq__item summary::after {
    flex: none;
    font-size: 1.25rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-text-muted);
    content: "+";
}

.step1-faq__item[open] summary::after {
    content: "−";
}

.step1-faq__item summary:hover {
    color: var(--color-text-link);
}

.step1-faq__item p {
    padding: 0 4px 16px;
    font-size: var(--font-size-md);
}

@media (min-width: 768px) {
    .step1-why {
        padding: 36px;
    }
}

/* ==========================================================================
   Offer Card Component (step 1)
   ========================================================================== */

.offer-grid {
    display: grid;
    /* auto-fill: a lone offer keeps a card width instead of spanning the row. */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: 16px;
}

.offer-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 30px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 24px;
    box-shadow: var(--shadow-card);
}

.offer-card.selected {
    border-color: var(--color-border-selected);
    box-shadow:
        0 0 0 1.5px var(--color-border-selected),
        var(--shadow-card);
}

/* "Votre choix actuel" ribbon — straddles the top border of the chosen card */
.offer-ribbon {
    position: absolute;
    top: -0.7rem;
    right: 1.5rem;
    padding: 0.3rem 0.85rem;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-action-text);
    background-color: var(--color-action-bg);
    border-radius: var(--radius-pill);
}

.offer-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.offer-eyebrow {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.offer-title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-text-main);
}

/* Maintenance contract banner (Offre.prixContratMensuelTtc set) */
.offer-contract {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background-color: var(--color-primary-100);
    border: 1.5px solid var(--color-primary-400);
    border-radius: 16px;
}

.offer-contract__icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
    color: var(--color-neutral-000);
    background-color: var(--color-primary-500);
    border-radius: 50%;
}

.offer-contract__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.offer-contract__label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--color-primary-500);
}

.offer-contract__text {
    font-size: var(--font-size-sm);
    color: var(--color-text-main);
}

.offer-contract__price {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
    color: var(--color-primary-500);
}

.offer-price {
    display: flex;
    flex-direction: column;
    gap: 6px;
    line-height: 1.2;
}

.offer-price-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.offer-price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
}

.offer-price-amount {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    letter-spacing: var(--letter-spacing-tight);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--color-primary-500);
}

.offer-price-amount--muted {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
}

/* A code applies: the discounted price (green pill) leads, the full price steps back. */
.offer-price:has(.offer-price-promo) .offer-price-amount {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
}

.offer-price-amount--free {
    color: var(--color-success);
}

.offer-price-meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Discounted price with the applied code: green pill under the full price */
.offer-price-promo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    width: fit-content;
    max-width: 100%;
    padding: 8px 14px;
    background-color: color-mix(in oklab, var(--color-success-500) 12%, var(--color-neutral-000));
    border-radius: 12px;
}

.offer-price-promo__amount {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    letter-spacing: var(--letter-spacing-tight);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: color-mix(in oklab, var(--color-success-500), var(--color-success-ink));
}

.offer-price-promo__code {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-success-ink);
}

.offer-price-promo__name {
    font-family: var(--bs-font-monospace);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.04em;
}

.offer-features {
    display: flex;
    flex-direction: column;
    gap: 9px;
    font-size: var(--font-size-sm);
    color: var(--color-text-main);
}

.offer-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.offer-check {
    flex-shrink: 0;
    margin-top: 0.15rem;
    color: var(--color-primary-500);
}

.offer-actions {
    display: flex;
    flex-direction: column;
    margin-top: auto;
}

.offer-cta.offer-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 52px;
    padding: 12px 20px;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    border-width: 2px;
    border-radius: var(--radius-pill);
}

/* Single detail entry point, aligned on the inclusions text (check icon + gap). */
.offer-detail-link {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    padding: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-decoration: none;
}

.offer-features + .offer-detail-link {
    margin-top: -12px;
    padding-left: 24px;
}

.offer-detail-link:hover,
.offer-detail-link:focus-visible {
    color: var(--color-text-link);
    text-decoration: underline;
}

@media (max-width: 575.98px) {
    .offer-card {
        padding: 22px 20px;
        border-radius: 20px;
    }

    .offer-ribbon {
        right: 1rem;
    }
}

/* Promo tag « −15 % | code XXX · N € économisés » (recap + offer modal) */
.promo-tag {
    display: inline-flex;
    align-items: stretch;
    max-width: 100%;
    overflow: hidden;
    font-size: var(--font-size-sm);
    line-height: 1.3;
    border: 1.5px dashed var(--color-success);
    border-radius: var(--radius-sm);
}

.promo-tag__pct {
    display: inline-flex;
    flex: none;
    align-items: center;
    padding: 6px 10px;
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
    color: var(--color-neutral-000);
    background-color: var(--color-success-ink);
}

.promo-tag__detail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex: 1;
    gap: 2px 6px;
    min-width: 0;
    padding: 6px 10px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-success-ink);
    background-color: var(--color-success-soft);
}

.promo-tag__code {
    font-family: var(--bs-font-monospace);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.04em;
    color: var(--color-text-main);
}

.promo-tag__saving {
    font-weight: var(--font-weight-regular);
    color: var(--color-text-muted);
}

/* Croix « Retirer le code » (récap, étapes 2 à 4). Le tag repasse en overflow
   visible pour laisser sortir la bulle : le segment % arrondit lui-même ses coins. */
.promo-tag--removable {
    overflow: visible;
}

.promo-tag--removable .promo-tag__pct {
    border-radius: calc(var(--radius-sm) - 1.5px) 0 0 calc(var(--radius-sm) - 1.5px);
}

.promo-tag__remove {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    padding: 0 8px;
    color: var(--color-text-muted);
    background: none;
    border: 0;
    border-left: 1.5px dashed var(--color-success);
    transition: color 0.15s ease;
}

.promo-tag__remove i {
    transition: transform 0.2s ease;
}

.promo-tag__remove:hover,
.promo-tag__remove:focus-visible {
    color: var(--color-error);
}

.promo-tag__remove:hover i {
    transform: rotate(90deg);
}

/* Cible tactile ≥ 44 px sans grossir le tag. */
.promo-tag__remove::before {
    content: "";
    position: absolute;
    inset: -10px -6px;
}

/* Bulle CSS (pas de tooltip Bootstrap : le bouton disparaît au re-render Live
   et laisserait une bulle orpheline). Même « carte claire » que .tooltip-front. */
.promo-tag__remove::after {
    content: attr(data-tooltip);
    position: absolute;
    right: -6px;
    bottom: calc(100% + 8px);
    z-index: 2;
    padding: 0.375rem 0.625rem;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    color: var(--color-neutral-700);
    pointer-events: none;
    background-color: var(--color-neutral-000);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 16px color-mix(in oklab, var(--color-neutral-900) 14%, transparent);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

@media (hover: hover) {
    .promo-tag__remove:hover::after {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.1s;
    }
}

.promo-tag__remove:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .promo-tag__remove i,
    .promo-tag__remove::after {
        transition: none;
    }
}

/* Offer modal CTA + THPE help modal "J'ai compris" */
.offer-select-btn {
    transition: all 0.15s ease-in-out;
    border-color: var(--color-action-bg);
    color: var(--color-action-bg);
    background-color: transparent;
}

.offer-select-btn:hover,
.offer-select-btn:focus-visible,
.offer-select-btn:active {
    border-color: var(--color-action-bg-hover);
    color: var(--color-action-bg-hover);
    background-color: transparent;
}

/* aria-disabled: Live Components manages `disabled`, we express static disabled via aria */
.btn[aria-disabled="true"] {
    pointer-events: none;
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

/* Badge "OBLIGATOIRE" — warm amber */
.badge.badge-obligatoire {
    display: inline-flex;
    align-items: center;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: none;
    padding: 4px 10px;
    color: var(--color-warning-ink) !important;
    background-color: color-mix(in oklab, var(--color-warning) 12%, var(--color-neutral-000)) !important;
    border: none;
    border-radius: 6px;
}

.badge.badge-obligatoire i {
    font-size: 0.85rem;
    color: var(--color-warning-ink);
}

/* Price highlight — accent color for emphasis on offer cards / modals / recaps */
.offer-price-value {
    color: var(--color-primary-500);
}

/* ==========================================================================
   Sidebar Recap Component (Desktop)
   ========================================================================== */

.sidebar-recap {
    z-index: 10;
}

.sidebar-recap .card,
.sidebar-recap__card {
    border-radius: var(--radius-card);
    border: 1px solid var(--color-border) !important;
    background-color: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.sidebar-recap__header {
    background-color: transparent !important;
    color: var(--color-text-main) !important;
    border-bottom: 1px solid
        color-mix(in oklab, var(--color-neutral-900) 6%, transparent) !important;
    padding: 20px 24px !important;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.sidebar-recap hr {
    border-top: 1px solid
        color-mix(in oklab, var(--color-neutral-900) 6%, transparent) !important;
    opacity: 1 !important;
    margin: 20px 0 !important;
    background-color: transparent !important;
}

.sidebar-recap__total-label {
    font-weight: var(--font-weight-semibold) !important;
    color: var(--color-text-main);
    font-size: var(--font-size-md);
}

.sidebar-recap__total-value {
    font-weight: var(--font-weight-bold) !important;
    color: var(--color-text-main) !important;
    font-size: var(--font-size-xl);
    line-height: var(--line-height-tight);
}

.sidebar-recap__frais {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: 14px;
}

.sidebar-recap__modify-link {
    color: var(--color-text-link) !important;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    text-decoration: none;
}

.sidebar-recap__modify-link:hover {
    color: var(--color-text-link-hover) !important;
    text-decoration: underline;
}

.sidebar-recap .card-body {
    padding: 24px;
}

.sidebar-recap .detail_label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.sidebar-recap .detail_value {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular) !important;
}

.sidebar-recap .card-footer {
    padding: 0px 24px 24px;
    background-color: transparent;
    border-top: none !important;
}

.sidebar-recap .section-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}

.sidebar-recap .card-body .fw-semibold,
.sidebar-recap .card-body .fw-bold,
.sidebar-recap .card-body strong {
    font-weight: var(--font-weight-semibold) !important;
}

/* ==========================================================================
   Bottom Navigation Component (Mobile)
   ========================================================================== */

.bottom-nav {
    z-index: 1030;
    background-color: color-mix(
        in oklab,
        var(--color-neutral-000) 85%,
        transparent
    );
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--color-border) !important;
    box-shadow: 0 -10px 30px
        color-mix(in oklab, var(--color-neutral-900) 5%, transparent) !important;
}

/* The whole price block is the collapse trigger; "Détails" is just a cue. */
.bottom-nav__recap-toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
}

.bottom-nav__details-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text-link);
    cursor: pointer;
    text-decoration: none;
}

.bottom-nav__details-link:hover {
    color: var(--color-text-link-hover);
}

.bottom-nav__recap-toggle[aria-expanded="true"] .bottom-nav__details-label {
    font-size: 0;
}

.bottom-nav__recap-toggle[aria-expanded="true"]
    .bottom-nav__details-label::after {
    content: "Masquer";
    font-size: var(--font-size-sm);
}

.bottom-nav__caret {
    color: var(--color-text-link);
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.bottom-nav__recap-toggle[aria-expanded="true"] .bottom-nav__caret {
    transform: rotate(180deg);
}

.bottom-nav .collapse,
.bottom-nav .collapsing {
    max-height: 60vh;
    overflow-y: auto;
}

/* Apple-style grabber handle at the top of the open recap sheet. Tapping it
   collapses the panel (it is a second Bootstrap collapse trigger, see markup).
   The button gives a generous touch target; ::after is the visible gray bar. */
.bottom-nav__grabber {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 12px 0 8px;
    border: 0;
    background: none;
    cursor: pointer;
}

.bottom-nav__grabber::after {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background-color: var(--color-neutral-300);
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.stepper__item--clickable:focus-visible,
.stepper-mobile__list-item--clickable:focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .equipment-card,
    .stepper__item,
    .stepper-mobile__header,
    .stepper-mobile__caret {
        transition: none !important;
    }
}

/* ==========================================================================
   Reservation detail modals (.reservation-detail-modal)
   Shared shell — offer details (step 1, #offerModal) + THPE help (step 2, #thpeHelpModal)
   ========================================================================== */

/* Modal container — max-w-xl = 576px */
.reservation-detail-modal .modal-dialog {
    max-width: 576px;
}

/* Modal content — rounded-2xl = 24px, soft shadow */
.reservation-detail-modal .modal-content {
    background-color: var(--color-neutral-000);
    border: 0;
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Modal header: p-6 sm:p-8 pb-4 */
.reservation-detail-modal .modal-header {
    padding: 24px 24px 16px;
}

/* Modal body: p-6 sm:p-8 pt-2 */
.reservation-detail-modal .modal-body {
    padding: 8px 24px 24px;
}

/* Modal footer: pt-4 sm:pt-6 */
.reservation-detail-modal .modal-footer {
    padding: 16px 24px 24px;
    border-top: 1px solid var(--color-neutral-200);
}

/* Section spacing: space-y-8 = 32px between all body child divs */
.reservation-detail-modal .modal-body > div {
    margin-bottom: 32px;
}
/* Last child (warning) has no bottom margin */
.reservation-detail-modal .modal-body > div:last-child {
    margin-bottom: 0;
}

.reservation-detail-modal .modal-title {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-tight);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-main);
}

/* Accent bar under title: w-12 (48px) × h-1.5 (6px), rounded-full */
.reservation-detail-modal .offer-modal-accent {
    display: block;
    width: 48px;
    height: 6px;
    margin-top: 16px;
    border-radius: 9999px;
    background-color: var(--color-action-bg);
}

.reservation-detail-modal .offer-modal-section-header {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 12px;
}

/* TVA tooltip icon: muted, coral on hover, cursor-help, 18px */
.modal-tarif .ph-question {
    color: var(--color-text-muted);
    font-size: 18px;
    cursor: help;
    transition: color 0.15s ease;
}
.modal-tarif .ph-question:hover {
    color: var(--color-action-bg);
}

.reservation-detail-modal .modal-body > div:nth-of-type(1) > p,
.reservation-detail-modal .list-unstyled li {
    font-size: var(--font-size-md);
    line-height: var(--line-height-base);
    color: var(--color-text-muted);
}

/* Inclusion list: medium weight, spacing between items */
.reservation-detail-modal .list-unstyled {
    margin-bottom: 0;
}
.reservation-detail-modal .list-unstyled li {
    font-weight: var(--font-weight-regular);
    margin-bottom: 12px;
}
/* Check icon: text-xl = 20px, brand-green */
.reservation-detail-modal .list-unstyled li i {
    font-size: 20px;
    color: var(--color-success);
}

/* "Informations" bonus badge: green-50/80 bg, border green-100, rounded-xl, text-sm (14px) green-700 */
.reservation-detail-modal .offer-modal-info-badge {
    display: inline-flex;
    align-items: center;
    padding: 12px 16px;
    border-radius: 12px;
    background-color: color-mix(in oklab, var(--color-success) 8%, transparent);
    border: 1px solid color-mix(in oklab, var(--color-success) 15%, transparent);
    color: var(--color-success-ink);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
}
.reservation-detail-modal .offer-modal-info-badge i {
    color: var(--color-success);
    font-size: 18px;
}

/* Tarif box: bg-gray-50, border-gray-200, rounded-2xl (24px), p-5/p-6 */
.modal-tarif {
    background-color: var(--color-neutral-100);
    border: 1px solid var(--color-neutral-200);
    border-radius: 24px;
    padding: 20px 24px;
}

.modal-tarif .d-flex > span {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
.modal-tarif .d-flex > span:last-child {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
}

/* Total TTC separator: 1px gray-200 */
.modal-tarif .total-row {
    border-top: 1px solid var(--color-neutral-200);
    padding-top: 20px;
    margin-top: 20px;
}
.modal-tarif .total-row > span:first-child {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
}
.reservation-detail-modal .offer-price-value {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-action-bg);
}

.reservation-detail-modal small {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Warning alert: bg-orange-50 tint, border-l-4 orange-400, rounded-r-xl, 14px */
.reservation-detail-modal .alert-warning {
    background-color: color-mix(in oklab, var(--color-warning) 8%, transparent);
    border: 0;
    border-left: 4px solid var(--color-warning);
    border-radius: 0 12px 12px 0;
    padding: 16px;
}
.reservation-detail-modal .alert-warning small {
    font-size: var(--font-size-sm);
    color: var(--color-warning-ink);
    font-weight: var(--font-weight-semibold);
}
.reservation-detail-modal .alert-warning i {
    color: var(--color-warning);
    font-size: 20px;
}

/* Footer CTA: filled coral, py-4 (16px), rounded-xl (12px), bold 16px, shadow-button */
.reservation-detail-modal .offer-select-btn {
    padding: 16px;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    border-radius: 12px;
    color: var(--color-action-text);
    background-color: var(--color-action-bg);
    border-color: var(--color-action-bg);
    box-shadow: 0 4px 14px 0 rgba(236, 102, 84, 0.39);
}
.reservation-detail-modal .offer-select-btn:hover,
.reservation-detail-modal .offer-select-btn:focus-visible {
    color: var(--color-action-text);
    background-color: var(--color-action-bg-hover);
    border-color: var(--color-action-bg-hover);
    box-shadow: 0 4px 14px 0 rgba(236, 102, 84, 0.39);
}
.reservation-detail-modal .offer-select-btn:active {
    transform: scale(0.98);
}
.reservation-detail-modal .offer-select-btn i {
    font-size: 20px;
}

/* Close button: absolute top-right, hover bg-gray-100 */
.reservation-detail-modal .btn-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: transparent;
    opacity: 1;
}
.reservation-detail-modal .btn-close:hover {
    background-color: var(--color-neutral-100);
}

/* Desktop (sm breakpoint = 576px) */
@media (min-width: 576px) {
    .reservation-detail-modal .modal-header {
        padding: 32px 32px 16px;
    }
    .reservation-detail-modal .modal-body {
        padding: 8px 32px 32px;
    }
    .reservation-detail-modal .modal-footer {
        padding: 24px 32px 32px;
    }
}

/* Mobile adjustments */
@media (max-width: 575.98px) {
    .reservation-detail-modal .modal-content {
        border-radius: 16px;
    }
    .reservation-detail-modal .modal-header {
        padding: 24px 24px 16px;
    }
    .reservation-detail-modal .modal-body {
        padding: 8px 24px 24px;
    }
    .reservation-detail-modal .modal-footer {
        padding: 16px 24px 24px;
    }
    .modal-tarif {
        padding: 16px 20px;
    }
    .reservation-detail-modal .btn-close {
        top: 16px;
        right: 16px;
    }
}

/* ==========================================================================
   Mobile Layout Adjustments
   ========================================================================== */

@media (max-width: 991.98px) {
    /* The public footer reappears on mobile in the tunnel. When the fixed
       .bottom-nav bar is present (steps 2→4), pad the footer so its copyright
       clears the bar; :has() keeps this inert on the confirmation page and on
       step 1 phase A (no .bottom-nav rendered → no stray padding). */
    body:has(.bottom-nav) .site-footer {
        padding-bottom: calc(88px + env(safe-area-inset-bottom));
    }

    /* Taller bar when the code promo tag / link sits under the price. */
    body:has(.bottom-nav__promo, .bottom-nav__promo-link) .site-footer {
        padding-bottom: calc(120px + env(safe-area-inset-bottom));
    }

    /* The bottom recap bar is the persistent mobile CTA — un-stick the top
       navbar in the tunnel so we don't pin two bars at once. */
    .navbar.sticky-top {
        position: static;
    }

    /* Slim legal footer in the tunnel: keep only the legal links (inline,
       centered) + copyright so the footer stays out of the way of the booking
       focus. Brand, description, certifications and contact are dropped. The
       full footer remains on desktop and on the vitrine (no reservation.css).
       It blends into the page background (no dark surface) with just a hairline
       above to delimit it. */
    .site-footer {
        padding-top: 24px;
        background-color: transparent;
        color: var(--color-text-muted);
        border-top: 1px solid
            color-mix(in oklab, var(--color-neutral-900) 10%, transparent);
    }

    .site-footer__cols {
        margin-bottom: 12px;
    }

    /* Hide brand/description/certifs (col 1) and contact (col 2). */
    .site-footer__cols > div:nth-child(1),
    .site-footer__cols > div:nth-child(2) {
        display: none;
    }

    /* Remaining legal column: drop the stacked nudge, render links inline. */
    .site-footer__cols > div:nth-child(3) {
        margin-top: 0;
    }

    .site-footer__list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        row-gap: 2px;
        font-size: var(--font-size-xs);
        line-height: 1.4;
    }

    .site-footer__list li {
        margin-bottom: 0;
        display: inline-flex;
        align-items: center;
        padding: 3px 0;
    }

    /* Muted links/separators legible on the light page background. */
    .site-footer__link {
        color: var(--color-text-muted);
    }

    .site-footer__link:hover {
        color: var(--color-text-main);
    }

    /* Dot separators between the inline legal links. */
    .site-footer__list li:not(:last-child)::after {
        content: "·";
        margin: 0 8px;
        color: var(--color-neutral-700);
    }

    /* A one-line legal bar needs no divider. */
    .site-footer__divider {
        display: none;
    }

    .site-footer__copyright {
        font-size: var(--font-size-xs);
    }
}

/* ==========================================================================
   STEP 2: Installation Details — Section cards, address summary,
   TVA tiles + THPE switch, equipment table
   ========================================================================== */

.section-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    margin-bottom: 24px;
}

.section-header {
    background-color: transparent;
    padding: 24px 24px 12px;
    border-bottom: none;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Section icon — neutral by default (brief: thermomètre rouge → gris) */
.section-header i {
    font-size: 1.5rem;
    color: var(--color-icon-default);
}

.section-header span {
    font-weight: var(--font-weight-semibold);
    text-transform: none;
    font-size: var(--font-size-lg);
    color: var(--color-text-main);
}

.section-body {
    padding: 0 24px 24px;
}

.saved-address-card {
    background-color: var(--bs-light) !important;
    border-color: var(--color-neutral-300) !important;
    color: var(--color-text-main) !important;
    transition:
        border-color 0.15s ease,
        background-color 0.15s ease,
        box-shadow 0.15s ease;
}

.saved-address-card__check {
    font-size: 1.4rem;
    color: var(--color-neutral-300);
    transition: color 0.15s ease;
}

.saved-address-card.active .saved-address-card__check {
    color: var(--color-border-selected);
}

.saved-address-card:hover {
    border-color: color-mix(
        in oklab,
        var(--color-primary-500) 25%,
        transparent
    ) !important;
}

.saved-address-card.active {
    background-color: var(--color-bg-selected) !important;
    border-color: var(--color-border-selected) !important;
    box-shadow: 0 0 0 1.5px var(--color-border-selected);
}

.alert-zone {
    margin-top: 16px;
    border-radius: var(--radius-sm);
}

/* Step 2 — title + grey subtitle headers.
   Scoped: .section-card / .section-header are shared with step 4. */
.reservation-step2 .section-header {
    display: block;
    padding: 20px 24px 14px;
}

.reservation-step2 .section-header__title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-text-main);
}

/* Neutralise the shared .section-header span styling (e.g. the required "*") */
.reservation-step2 .section-card .section-header span {
    font: inherit;
    letter-spacing: inherit;
}

.reservation-step2 .section-header__subtitle {
    margin: 2px 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* .section-card prefix: outranks the shared step-4 mobile .section-card .section-body rule */
.reservation-step2 .section-card .section-body {
    padding: 0 24px 20px;
}

.reservation-step2 .section-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0;
    text-align: left;
    text-decoration: none;
}

.zone-ok {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-success-ink);
}

.zone-ok i {
    font-size: 1.1rem;
    color: var(--color-success);
}

/* "Vous avez un compte ?" — standalone pill above the first card (steps 2 & 4) */
.login-prompt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 14px;
    margin: 0 0 12px auto;
    padding: 8px 8px 8px 16px;
    width: fit-content;
    max-width: 100%;
    background: var(--color-surface);
    border: 1px solid var(--color-field-border);
    border-radius: 12px;
}

.login-prompt__text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.login-prompt__text i {
    font-size: 1.25rem;
    color: var(--color-primary-500);
}

/* Collapsed address summary (✓ + address + "Modifier") */
.address-summary {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 12px 16px 20px;
}

.address-summary__check {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-top: 2px;
    font-size: 0.875rem;
    color: var(--color-neutral-000);
    background-color: var(--color-success);
    border-radius: 50%;
}

.address-summary__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.reservation-step2 .address-summary__label {
    margin: 0;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.address-summary__value {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    overflow-wrap: anywhere;
}

.address-summary__edit {
    flex: none;
    min-height: 44px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}

/* Choice tile — radio tile (TVA situation): icon square, label + hint, radio ring.
   Mobile first: one row per tile; 3 columns from md up. */
.choice-tile-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

.choice-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 60px;
    padding: 12px 14px;
    font: inherit;
    text-align: left;
    color: var(--color-text-main);
    background-color: var(--color-surface);
    border: 1px solid var(--color-field-border);
    border-radius: 12px;
    cursor: pointer;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease;
}

.choice-tile:hover {
    border-color: var(--color-primary-400);
}

.choice-tile:focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
}

.choice-tile.is-active {
    background-color: var(--color-bg-selected);
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 1px var(--color-primary-500);
}

.choice-tile__icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 1.125rem;
    color: var(--color-primary-500);
    background-color: var(--color-surface);
    border: 1px solid var(--color-field-border);
    border-radius: 9px;
}

.choice-tile__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.choice-tile__label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
}

.choice-tile__hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.choice-tile__radio {
    flex: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-neutral-300);
    border-radius: 50%;
}

.choice-tile.is-active .choice-tile__radio {
    border-color: var(--color-primary-500);
    background: radial-gradient(circle, var(--color-primary-500) 0 4px, transparent 4.5px);
}

@media (min-width: 768px) {
    .choice-tile-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* THPE switch row — nested under "Votre situation", green once opted in */
.thpe-switch {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    padding: 12px 14px;
    background-color: var(--color-surface-muted);
    border: 1px solid var(--color-field-border);
    border-radius: 12px;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease;
}

.thpe-switch.is-on {
    background-color: color-mix(in oklab, var(--color-success-soft) 55%, transparent);
    border-color: var(--color-success-soft);
}

.thpe-switch__icon {
    flex: none;
    font-size: 1.375rem;
    color: var(--color-success);
}

.thpe-switch__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.thpe-switch__label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
}

.thpe-switch__hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* Above the label's stretched-link overlay so it opens the modal, not the switch */
.reservation-step2 .thpe-switch__more {
    position: relative;
    z-index: 2;
    font-size: inherit;
    font-weight: var(--font-weight-semibold);
    vertical-align: baseline;
}

/* Bigger native Bootstrap switch (≥ 44px touch target via the padding box) */
.thpe-switch .form-check-input {
    width: 2.75rem;
    height: 1.625rem;
    margin: 0;
    cursor: pointer;
}

.thpe-switch .form-check-input:checked {
    background-color: var(--color-success);
    border-color: var(--color-success);
}

/* Equipment table — mobile: photo + info, then stepper + total;
   4-column grid from md up, aligned with .material-head. */
.material-head,
.material-row {
    --material-cols: minmax(0, 1fr) 110px 128px 90px;
}

.material-head {
    grid-template-columns: var(--material-cols);
    gap: 12px;
    padding-bottom: 8px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.material-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "main main"
        "qty total";
    align-items: center;
    gap: 10px 12px;
    padding: 14px 0;
    border-top: 1px solid var(--color-surface-muted);
}

.material-row__main {
    grid-area: main;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.material-row__photo {
    flex: none;
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 10px;
}

.material-row__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--color-icon-accent);
    background-color: var(--color-accent-soft);
}

.material-row__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.material-row__name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.material-row__badge {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
}

.material-row__badge.is-required {
    color: var(--color-primary-500);
}

.material-row__unit-mobile,
.material-row__unit {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.material-row__qty {
    grid-area: qty;
    display: flex;
}

.material-row__qty.is-loading {
    pointer-events: none;
}

.material-row__total {
    grid-area: total;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.material-row__total.is-empty {
    color: var(--color-neutral-300);
}

.reservation-step2 .material-row__add {
    --bs-btn-padding-y: 6px;
    --bs-btn-padding-x: 16px;
    --bs-btn-border-radius: var(--radius-pill);
    --bs-btn-font-size: var(--font-size-sm);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
}

.qty-stepper {
    display: inline-flex;
    align-items: center;
    height: 44px;
    background: var(--color-surface);
    border: 1px solid var(--color-field-border);
    border-radius: 10px;
}

.qty-stepper__btn {
    width: 44px;
    height: 100%;
    padding: 0;
    color: var(--color-primary-500);
    background: none;
    border: 0;
    cursor: pointer;
}

.qty-stepper__btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.qty-stepper__btn:focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: -2px;
    border-radius: 10px;
}

.qty-stepper__value {
    min-width: 26px;
    font-weight: var(--font-weight-bold);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
    .material-row {
        grid-template-columns: var(--material-cols);
        grid-template-areas: "main unit qty total";
    }

    .material-row__photo {
        width: 64px;
        height: 64px;
    }

    .material-row__unit {
        grid-area: unit;
    }

    .material-row__qty {
        justify-content: center;
    }

    .qty-stepper,
    .reservation-step2 .material-row__add {
        height: 36px;
        min-height: 36px;
    }

    .qty-stepper__btn {
        width: 36px;
    }
}

/* Live "pick at least one optional" notice (amber, non-blocking tone) */
.material-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 12px 14px;
    font-size: var(--font-size-sm);
    color: var(--color-warning-ink);
    background-color: color-mix(in oklab, var(--color-warning) 12%, transparent);
    border-radius: 10px;
}

.material-notice i {
    flex: none;
    font-size: 1.125rem;
    color: var(--color-warning-ink);
}

@media (max-width: 575.98px) {
    .section-card .section-header {
        padding: 12px 16px;
    }

    .section-card .section-header i {
        font-size: 1.1rem;
    }

    .section-card .section-header span {
        font-size: var(--font-size-md);
    }

    .section-body {
        padding: 16px;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .section-body {
        padding: 20px 16px;
    }
}

@media (max-width: 575.98px) {
    .reservation-step2 .section-card .section-header {
        padding: 16px 16px 12px;
    }

    .reservation-step2 .section-card .section-body {
        padding: 0 16px 16px;
    }

    .address-summary {
        padding: 14px 8px 14px 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .choice-tile,
    .thpe-switch {
        transition: none !important;
    }
}

/* ==========================================================================
   STEP 3: Slot Selection
   ========================================================================== */

.day-card {
    border-radius: var(--radius-card) !important;
    border: 1px solid var(--color-border) !important;
    background-color: var(--color-surface);
    box-shadow: var(--shadow-card);
}

/* "Continuer" clicked without a slot → flag the créneau card red. */
.day-card--error {
    border-color: var(--color-error) !important;
}

.slot-error-msg {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: -0.5rem 0 1rem;
    color: var(--color-error);
    font-size: var(--font-size-sm);
}

.slot-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 24px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    background: var(--color-surface);
    cursor: pointer;
    transition:
        transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1),
        box-shadow 0.25s cubic-bezier(0.25, 0.8, 0.25, 1),
        border-color 0.2s ease;
    min-width: 140px;
    width: 100%;
    font: inherit;
    color: inherit;
    text-align: center;
    box-shadow: 0 2px 8px
        color-mix(in oklab, var(--color-neutral-900) 2%, transparent);
}

.slot-btn:hover:not(.disabled):not(.selected) {
    box-shadow: var(--shadow-card-hover);
    border-color: color-mix(
        in oklab,
        var(--color-primary-500) 25%,
        transparent
    );
    transform: translateY(-2px);
}

.slot-btn.selected {
    background-color: var(--color-bg-selected);
    border-color: var(--color-border-selected);
    box-shadow: 0 0 0 1.5px var(--color-border-selected);
}

.slot-btn.disabled {
    background-color: var(--color-disabled-bg);
    border-color: transparent;
    cursor: not-allowed;
    opacity: 0.5;
    box-shadow: none;
}

/* Morning/afternoon icons — neutral by default (brief: icônes Soleil/Lune rouges → gris) */
.slot-btn .slot-icon {
    font-size: 24px;
    color: var(--color-icon-default);
    margin-bottom: 8px;
}

.slot-btn.selected .slot-icon {
    color: var(--color-border-selected);
}

.slot-btn.disabled .slot-icon {
    color: var(--color-placeholder);
}

.slot-btn .slot-title {
    font-weight: var(--font-weight-semibold);
    margin-bottom: 4px;
}

.slot-btn .slot-time {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.slot-btn .slot-check {
    color: var(--color-border-selected);
    margin-top: 8px;
}

@media (max-width: 575.98px) {
    .slot-btn {
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        padding: 12px 16px;
        width: 100%;
    }

    .slot-btn .slot-icon {
        margin-bottom: 0;
        font-size: 20px;
    }

    .slot-btn .slot-info {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .slot-btn .slot-title {
        margin-bottom: 0;
    }

    .slot-btn .slot-time {
        margin-bottom: 0;
    }

    .slot-btn .slot-check {
        margin-top: 0;
        margin-left: auto;
    }
}

.slot-btn:focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .slot-btn {
        transition: none !important;
    }
}

/* ============================================
   Monthly calendar (step 3 day picker) — mobile-first
   ============================================ */
.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.calendar-month {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-md);
    text-align: center;
    flex: 1;
}

.calendar-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    background: var(--color-surface);
    color: inherit;
    font-size: 20px;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.calendar-nav:hover:not(:disabled) {
    border-color: color-mix(
        in oklab,
        var(--color-primary-500) 25%,
        transparent
    );
}

.calendar-nav:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.calendar-weekdays,
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.calendar-weekdays {
    margin-bottom: 6px;
}

.calendar-weekdays span {
    text-align: center;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
}

.calendar-day {
    display: flex;
    align-items: center;
    justify-content: center;
    /*aspect-ratio: 1;*/
    min-height: 50px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    background: var(--color-surface);
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.calendar-day:hover:not(.unavailable):not(.selected) {
    border-color: color-mix(
        in oklab,
        var(--color-primary-500) 25%,
        transparent
    );
}

.calendar-day.selected {
    background-color: var(--color-bg-selected);
    border-color: var(--color-border-selected);
    box-shadow: 0 0 0 1.5px var(--color-border-selected);
    font-weight: var(--font-weight-semibold);
}

.calendar-day.unavailable {
    background-color: var(--color-disabled-bg);
    border-color: transparent;
    color: var(--color-placeholder);
    opacity: 0.5;
    cursor: not-allowed;
}

.calendar-day.is-empty {
    border: none;
    background: transparent;
    cursor: default;
}

.calendar-day:focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .calendar-day,
    .calendar-nav {
        transition: none !important;
    }
}

/* Duration-info alert — neutral informational block, primary-tinted */
.reservation-step3 .alert-info {
    background-color: var(--color-primary-100);
    border: none;
    color: var(--color-primary-400);
}

/* Step 3 — bloc compact « durée + confirmation » (carte claire, liseré info).
   Fusionne l'ancien encart durée + la note pour réduire la hauteur sur mobile. */
.reservation-notice {
    background-color: var(--color-neutral-000);
    border: 1px solid var(--color-neutral-200);
    border-left: 4px solid var(--color-action-bg);
    border-radius: 12px;
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.12);
    padding: 0.75rem 0.875rem;
}

.reservation-notice__duration {
    color: var(--color-text-main);
}

.reservation-notice strong {
    font-weight: var(--font-weight-semibold);
}

.reservation-notice__duration i {
    color: var(--color-action-bg);
    margin-right: 0.375rem;
}

.reservation-notice__hint {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
}

/* Picked day heading of the slot card ("Mercredi 30 septembre") */
.day-card__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
}

/* ==========================================================================
   STEP 4: Payment Form
   ========================================================================== */

/* Pay button — accent CTA (large, prominent) */
.btn-pay {
    padding: 16px 32px;
    font-size: 1.1rem;
}

.btn-pay:hover:not(:disabled) {
    box-shadow: 0 4px 12px
        color-mix(in oklab, var(--color-primary-500) 30%, transparent);
}

/* Pay button stays visually primary even when disabled during payment processing */
.btn-pay:disabled,
.reservation-step4 .btn-pay.btn-primary:disabled {
    cursor: wait;
    background-color: var(--color-primary-500);
    border-color: var(--color-primary-500);
    color: var(--color-neutral-000);
    opacity: 1;
}

.legal-item {
    padding: 12px 0;
    border-bottom: 1px solid
        color-mix(in oklab, var(--color-neutral-900) 7%, transparent);
}

.legal-item:last-child {
    border-bottom: none;
}

.stripe-element-container {
    background: var(--color-surface-muted);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-sm);
    padding: 24px;
    min-height: 120px;
}

/* Stripe error icon (Step 4 — large warning) */
.stripe-error-icon {
    font-size: 4rem;
    color: var(--color-warning);
}

/* "Paiement sécurisé" icon block — neutral (brief: icône rouge → gris/primaire) */
.payment-secure-icon {
    color: var(--color-icon-default);
}

.reservation-step4 .form-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
}

.required-asterisk {
    color: var(--color-error);
}

@media (max-width: 575.98px) {
    .stripe-element-container {
        padding: 16px;
    }

    .section-card .section-body {
        padding: 16px;
    }

    .btn-pay {
        padding: 14px 24px;
        font-size: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn-pay {
        transition: none !important;
    }
}

.reservation-step4 .alert-tva {
    color: var(--color-text-muted);
}

/* ==========================================================================
   STEP 5: Confirmation Page
   ========================================================================== */

.reservation-success-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 48px;
}

@media (min-width: 992px) {
    .reservation-success-header {
        margin-bottom: 80px;
        margin-top: 20px;
    }
}

.reservation-success-icon {
    position: relative;
    width: 96px;
    height: 96px;
    /* background-color: var(--color-success-soft); */
    background-color: color-mix(
        in oklab,
        var(--color-success-soft) 40%,
        transparent
    );
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.reservation-success-icon i {
    position: relative;
    z-index: 1;
    font-size: 48px;
    color: var(--color-success);
}

.reservation-success-icon-ping {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-color: var(--color-success);
    opacity: 0.2;
    animation: reservation-success-ping 3s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes reservation-success-ping {
    75%,
    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reservation-success-icon-ping {
        animation: none;
    }
}

.reservation-success-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-main);
    margin: 0 0 16px;
}

.reservation-success-subtitle {
    font-size: var(--font-size-md);
    line-height: var(--line-height-base);
    color: var(--color-text-muted);
    max-width: 32rem;
    margin: 0 auto;
}

.reservation-success-subtitle strong {
    color: var(--color-text-main);
    font-weight: var(--font-weight-semibold);
    word-break: break-word;
}

/* ----- Confirmation page: scoped overrides for the main column ----- */
.reservation-confirmation .section-card {
    border-radius: 32px;
    border: 1px solid var(--color-neutral-100);
    box-shadow: 0 4px 24px
        color-mix(in oklab, var(--color-neutral-900) 4%, transparent);
    padding: 28px;
    margin-bottom: 24px;
    overflow: visible;
    transition: box-shadow 0.25s ease;
}

.reservation-confirmation .section-card:hover {
    box-shadow: 0 8px 32px
        color-mix(in oklab, var(--color-neutral-900) 8%, transparent);
}

@media (min-width: 576px) {
    .reservation-confirmation .section-card {
        padding: 36px;
    }
}

.reservation-confirmation .section-header {
    padding: 0;
    margin-bottom: 24px;
    gap: 8px;
    border-bottom: none;
}

.reservation-confirmation .section-header i {
    color: var(--color-primary-500);
    font-size: 1.375rem;
}

.reservation-confirmation .section-header span {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.reservation-confirmation .section-body {
    padding: 0;
}

/* Reservation number ("billet") */
.reservation-confirmation .reservation-number-box {
    background-color: var(--color-surface-muted);
    border: 1px solid var(--color-neutral-200);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
}

@media (min-width: 576px) {
    .reservation-confirmation .reservation-number-box {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 24px;
    }
}

.reservation-number-box__info {
    text-align: center;
}

@media (min-width: 576px) {
    .reservation-number-box__info {
        text-align: left;
    }
}

.reservation-number-box__label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0 0 4px;
}

.reservation-confirmation .reservation-number {
    display: block;
    font-family:
        ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-caps);
    color: var(--color-text-main);
}

.reservation-confirmation .btn-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-neutral-200);
    border-radius: 12px;
    color: var(--color-text-main);
    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    box-shadow: 0 1px 2px
        color-mix(in oklab, var(--color-neutral-900) 4%, transparent);
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.reservation-confirmation .btn-copy:hover {
    background-color: var(--color-surface-muted);
    border-color: color-mix(
        in oklab,
        var(--color-neutral-900) 12%,
        transparent
    );
}

.reservation-confirmation .btn-copy i {
    font-size: 1.125rem;
}

/* Artisan card */
.artisan-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

@media (min-width: 576px) {
    .artisan-card {
        flex-direction: row;
        align-items: flex-start;
    }
}

.artisan-card__logo {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    object-fit: contain;
    padding: 8px;
    background: var(--color-surface);
    border: 1px solid var(--color-neutral-100);
    box-shadow: 0 1px 2px
        color-mix(in oklab, var(--color-neutral-900) 4%, transparent);
    flex-shrink: 0;
}

.artisan-card__logo--placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-text-main);
    color: var(--color-neutral-000);
    font-weight: var(--font-weight-bold);
    font-size: 2rem;
}

.artisan-card__body {
    flex: 1;
    min-width: 0;
}

.artisan-card__name {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text-main);
    margin: 0 0 16px;
    letter-spacing: var(--letter-spacing-tight);
}

.artisan-contacts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

@media (min-width: 576px) {
    .artisan-contacts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.artisan-contact {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background-color: var(--color-surface-muted);
    border: 1px solid var(--color-neutral-100);
    border-radius: 14px;
    text-decoration: none;
    color: var(--color-text-main);
    transition: background-color 0.15s ease;
}

.artisan-contact:hover {
    background-color: color-mix(
        in oklab,
        var(--color-neutral-900) 6%,
        transparent
    );
    color: var(--color-text-main);
}

.artisan-contact__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: var(--color-surface);
    color: var(--color-text-main);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px
        color-mix(in oklab, var(--color-neutral-900) 4%, transparent);
    transition: transform 0.15s ease;
}

.artisan-contact:hover .artisan-contact__icon {
    transform: scale(1.05);
}

.artisan-contact__label {
    font-weight: var(--font-weight-regular);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.artisan-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 4px 0 0;
    color: var(--color-text-muted);
}

.artisan-notice i {
    flex-shrink: 0;
    font-size: 1.125rem;
    color: var(--color-primary-400);
    margin-top: 2px;
}

.artisan-notice p {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
}

/* Document list */
.document-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.reservation-confirmation .document-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    margin: 0;
    background: transparent;
    border: 1px solid var(--color-neutral-100);
    border-radius: 14px;
    transition: background-color 0.15s ease;
}

@media (min-width: 576px) {
    .reservation-confirmation .document-item {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.reservation-confirmation .document-item:hover:not(.document-item--pending) {
    background-color: var(--color-surface-muted);
}

.reservation-confirmation .document-item--pending {
    background-color: var(--color-surface-muted);
    opacity: 0.85;
}

.document-item__main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.document-item__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.document-item__icon--pdf {
    background-color: var(--color-primary-soft);
    color: var(--color-primary-500);
}

.document-item__icon--pending {
    background-color: var(--color-neutral-200);
    color: var(--color-text-muted);
}

.document-item__name {
    margin: 0;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
}

.document-item--pending .document-item__name {
    color: var(--color-text-muted);
}

.document-item__sub {
    margin: 2px 0 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.document-item__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--color-surface);
    border: 1px solid var(--color-neutral-200);
    border-radius: 10px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 1px 2px
        color-mix(in oklab, var(--color-neutral-900) 4%, transparent);
    transition:
        background-color 0.15s ease,
        box-shadow 0.15s ease;
}

.document-item__action:hover {
    background: var(--color-surface-muted);
    color: var(--color-text-main);
    box-shadow: 0 2px 6px
        color-mix(in oklab, var(--color-neutral-900) 6%, transparent);
}

.document-item__action--disabled {
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--color-text-muted);
    cursor: default;
    pointer-events: none;
    font-weight: var(--font-weight-regular);
}

@media (max-width: 575.98px) {
    .document-item__action {
        width: 100%;
    }
}

/* CTAs */
.reservation-actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 8px;
}

@media (min-width: 576px) {
    .reservation-actions {
        flex-direction: row;
    }
}

.reservation-action {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 24px;
    border-radius: 14px;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        color 0.2s ease;
}

.reservation-action--primary {
    background-color: var(--color-action-bg);
    color: var(--color-action-text, var(--color-neutral-000));
    box-shadow: 0 4px 12px
        color-mix(in oklab, var(--color-primary-500) 24%, transparent);
}

.reservation-action--primary:hover {
    background-color: var(--color-action-bg-hover);
    color: var(--color-action-text, var(--color-neutral-000));
    box-shadow: 0 8px 24px
        color-mix(in oklab, var(--color-primary-500) 32%, transparent);
}

.reservation-action--secondary {
    background-color: var(--color-surface);
    color: var(--color-text-main);
    border: 1px solid var(--color-neutral-200);
    box-shadow: 0 1px 2px
        color-mix(in oklab, var(--color-neutral-900) 4%, transparent);
}

.reservation-action--secondary:hover {
    background-color: var(--color-surface-muted);
    color: var(--color-text-main);
}

@media (max-width: 575.98px) {
    .reservation-success-header {
        margin-bottom: 32px;
    }

    .reservation-success-icon {
        width: 80px;
        height: 80px;
        margin-bottom: 20px;
    }

    .reservation-success-icon i {
        font-size: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reservation-confirmation .btn-copy,
    .reservation-confirmation .document-item,
    .reservation-confirmation .document-item__action,
    .reservation-action,
    .reservation-confirmation .section-card,
    .artisan-contact,
    .artisan-contact__icon {
        transition: none !important;
    }
}

/* ==========================================================================
   Tunnel buttons (scoped): rectangular 10px, bold — native Bootstrap 5.3
   button variables, so size modifiers (.btn-sm) keep working.
   ========================================================================== */

.reservation-step1 .btn-primary,
.reservation-step1 .btn-outline-primary,
.reservation-step2 .btn-primary,
.reservation-step2 .btn-outline-primary,
.reservation-step3 .btn-primary,
.reservation-step3 .btn-outline-primary,
.reservation-step4 .btn-primary,
.reservation-step4 .btn-outline-primary,
.bottom-nav .btn-primary,
.bottom-nav .btn-outline-primary,
.sidebar-recap .btn-primary,
.sidebar-recap .btn-outline-primary {
    --bs-btn-border-radius: 10px;
    --bs-btn-font-weight: 700;
    --bs-btn-padding-y: 12px;
    --bs-btn-padding-x: 20px;
    transition:
        box-shadow 0.15s ease,
        background-color 0.15s ease,
        border-color 0.15s ease;
}

.reservation-step1 .btn-primary,
.reservation-step2 .btn-primary,
.reservation-step3 .btn-primary,
.reservation-step4 .btn-primary,
.bottom-nav .btn-primary,
.sidebar-recap .btn-primary {
    --bs-btn-bg: var(--color-primary-500);
    --bs-btn-border-color: var(--color-primary-500);
    --bs-btn-color: var(--color-neutral-000);
    --bs-btn-hover-bg: var(--color-primary-700);
    --bs-btn-hover-border-color: var(--color-primary-700);
    --bs-btn-hover-color: var(--color-neutral-000);
    --bs-btn-active-bg: var(--color-primary-700);
    --bs-btn-active-border-color: var(--color-primary-700);
    --bs-btn-active-color: var(--color-neutral-000);
    --bs-btn-disabled-bg: var(--color-disabled-bg);
    --bs-btn-disabled-border-color: var(--color-disabled-bg);
    --bs-btn-disabled-color: var(--color-text-muted);
    --bs-btn-disabled-opacity: 1;
}

.reservation-step1 .btn-outline-primary,
.reservation-step2 .btn-outline-primary,
.reservation-step3 .btn-outline-primary,
.reservation-step4 .btn-outline-primary,
.bottom-nav .btn-outline-primary,
.sidebar-recap .btn-outline-primary {
    --bs-btn-color: var(--color-primary-500);
    --bs-btn-border-color: var(--color-primary-500);
    --bs-btn-hover-bg: var(--color-primary-500);
    --bs-btn-hover-border-color: var(--color-primary-500);
    --bs-btn-hover-color: var(--color-neutral-000);
    --bs-btn-active-bg: var(--color-primary-700);
    --bs-btn-active-border-color: var(--color-primary-700);
    --bs-btn-active-color: var(--color-neutral-000);
    --bs-btn-disabled-color: var(--color-text-muted);
    --bs-btn-disabled-border-color: var(--color-field-border);
}

.reservation-step1 .btn-primary:hover:not(:disabled),
.reservation-step2 .btn-primary:hover:not(:disabled),
.reservation-step3 .btn-primary:hover:not(:disabled),
.reservation-step4 .btn-primary:hover:not(:disabled),
.bottom-nav .btn-primary:hover:not(:disabled),
.sidebar-recap .btn-primary:hover:not(:disabled) {
    box-shadow: 0 8px 20px
        color-mix(in oklab, var(--color-primary-500) 30%, transparent);
}

.sidebar-recap .btn-primary[aria-disabled="true"] {
    background-color: var(--color-disabled-bg);
    border-color: var(--color-disabled-bg);
    color: var(--color-text-muted);
    opacity: 1;
}

.reservation-step1 .btn-sm,
.reservation-step2 .btn-sm,
.reservation-step3 .btn-sm,
.reservation-step4 .btn-sm {
    --bs-btn-padding-y: 6px;
    --bs-btn-padding-x: 14px;
    --bs-btn-font-size: var(--font-size-sm);
    --bs-btn-border-radius: var(--radius-sm);
}

/* ==========================================================================
   Body background — light gray so cards float visually via shadow.
   Scoped via :has() to only affect the reservation tunnel.
   ========================================================================== */

body:has(.reservation-step1),
body:has(.reservation-step2),
body:has(.reservation-step3),
body:has(.reservation-step4) {
    background-color: var(--color-surface-muted);
}

.reservation-step1 .text-muted,
.reservation-step2 .text-muted,
.reservation-step3 .text-muted,
.reservation-step4 .text-muted,
.reservation-confirmation .text-muted {
    color: var(--color-text-muted) !important;
}

.reservation-step1 .text-muted-sm,
.reservation-step2 .text-muted-sm,
.reservation-step3 .text-muted-sm,
.reservation-step4 .text-muted-sm {
    color: var(--color-text-muted) !important;
    font-size: var(--font-size-sm);
}

.reservation-step1 h1 + p.text-muted,
.reservation-step2 h1 + p.text-muted,
.reservation-step3 h1 + p.text-muted,
.reservation-step4 h1 + p.text-muted {
    max-width: 60ch;
}

.reservation-step1 h1,
.reservation-step2 h1,
.reservation-step3 h1,
.reservation-step4 h1,
.reservation-step1 h2,
.reservation-step2 h2,
.reservation-step3 h2,
.reservation-step4 h2 {
    font-weight: var(--font-weight-semibold);
}

.reservation-step1 h1,
.reservation-step2 h1,
.reservation-step3 h1,
.reservation-step4 h1 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-main);
}

/* Red border on the ville <select> when the field errors. The select is
   data-live-ignore inside the Step2 Live Component (its own attributes are
   frozen across re-renders to protect the autocomplete's dynamic options), so
   it can't receive Bootstrap's is-invalid class via Twig. The wrapper carries
   .field-invalid (re-rendered) and the rule below mirrors is-invalid onto the
   descendant select — matches adresse/code-postal which get is-invalid directly. */
.reservation-step2 .field-invalid .form-select {
    border-color: var(--bs-danger, #dc3545);
}
.reservation-step2 .field-invalid .form-select:focus {
    border-color: var(--bs-danger, #dc3545);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb, 220, 53, 69), 0.25);
}

/* Same data-live-ignore problem on the Step4 phone input (intl-tel-input freezes
   its wrapper), so it can't receive is-invalid via Twig either. The .field-invalid
   wrapper (re-rendered) mirrors the red border onto the descendant tel input. */
.reservation-step4 .field-invalid .form-control {
    border-color: var(--bs-danger, #dc3545);
}
.reservation-step4 .field-invalid .form-control:focus {
    border-color: var(--bs-danger, #dc3545);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb, 220, 53, 69), 0.25);
}

/* ==========================================================================
   Code promo (récap sidebar + bottom-nav mobile)
   ========================================================================== */
/* « Code promo · Ajouter + » : native disclosure laid out as a price line;
   the + turns into a × once open. */
.recap-code-promo__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 28px;
    cursor: pointer;
    list-style: none;
}

.recap-code-promo__summary::-webkit-details-marker {
    display: none;
}

.recap-code-promo__add {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-link);
}

.recap-code-promo__summary:hover .recap-code-promo__add {
    color: var(--color-text-link-hover);
}

.recap-code-promo__add i {
    transition: transform 0.2s ease;
}

.recap-code-promo__toggle[open] .recap-code-promo__add i {
    transform: rotate(45deg);
}

.recap-code-promo__toggle[open] .recap-code-promo__add span {
    display: none;
}

/* Field + button in one white frame (44 px touch target). */
.recap-code-promo__field {
    display: flex;
    gap: 4px;
    min-height: 44px;
    margin: 4px 0 6px;
    padding: 4px;
    background-color: var(--color-surface);
    border: 1px solid color-mix(in oklab, var(--color-neutral-900) 18%, transparent);
    border-radius: 10px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.recap-code-promo__field:focus-within {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary-500) 15%, transparent);
}

.recap-code-promo__field:has(.is-invalid) {
    border-color: var(--color-error);
}

.recap-code-promo__input {
    flex: 1;
    min-width: 0;
    padding: 0 8px;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--color-text-main);
    background: transparent;
    border: 0;
    outline: 0;
}

.recap-code-promo__input::placeholder {
    font-weight: var(--font-weight-regular);
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
}

.recap-code-promo__field .btn {
    --bs-btn-border-radius: 7px;
    white-space: nowrap;
}

/* Barre sticky mobile repliée : prix avant remise (gris) au-dessus du total TTC
   remisé (vert) + étiquette du code appliqué à sa droite (ou lien dessous), dans
   la zone « Détails » qui déplie le récap (saisie / retrait). Tout tient sur une
   ligne : un code long est tronqué (…) plutôt que d'écraser « Continuer ». */
.bottom-nav__summary,
.bottom-nav__recap-toggle {
    min-width: 0;
    max-width: 100%;
    margin-right: 10px;
}

.bottom-nav__price-old {
    font-size: var(--font-size-md);
    line-height: 1.2;
    color: var(--color-text-muted);
}

.bottom-nav__price-new {
    color: color-mix(in oklab, var(--color-success-500), var(--color-success-ink));
}

.bottom-nav__price {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
}

.bottom-nav__promo {
    display: flex;
    min-width: 0;
}

/* Barre repliée : le code seul (sans « code »), tronqué si besoin. */
.bottom-nav__promo .promo-tag__label {
    display: none;
}

.bottom-nav__promo .promo-tag__detail {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bottom-nav__promo-link {
    display: flex;
    margin: 4px 0 2px;
}

.bottom-nav__promo .promo-tag {
    font-size: var(--font-size-xs);
    white-space: nowrap;
}

.bottom-nav__cta {
    flex-shrink: 0;
    white-space: nowrap;
}

.bottom-nav__promo .promo-tag__pct,
.bottom-nav__promo .promo-tag__detail {
    padding: 3px 6px;
}

.bottom-nav__promo-link {
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-link);
}