/**
 * 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 {
    letter-spacing: 1px;
    font-size: 0.75rem;
}

/* 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);
}

/* Material thumbnail image — cover fit */
.material-img {
    object-fit: cover;
}

/* Price cell — right-aligned with fixed minimum width so totals align */
.price-align {
    min-width: 80px;
    text-align: right;
}

/* 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
    );
}

/* Step 4 conditional accent (client type / TVA row icon when selected) */
.icon-when-selected--accent {
    color: var(--color-icon-default);
}

/* ==========================================================================
   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: 0.85rem;
    font-weight: 600;
    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: 0.72rem;
    font-weight: 700;
}

.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: 700;
    padding: 8px 16px;
}

.stepper__item--confirmation {
    background-color: var(--color-success);
    color: var(--color-neutral-000);
    font-weight: 700;
    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: 0.875rem;
    font-weight: 700;
}

.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: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

.stepper-mobile__name {
    font-size: 0.875rem;
    font-weight: 700;
    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: 0.875rem;
    color: var(--color-text-muted);
}

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

.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: 500;
}

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

/* ==========================================================================
   Offer Card Component
   ========================================================================== */

button.offer-card {
    padding: 0;
    font: inherit;
    color: inherit;
    appearance: none;
}

.offer-card {
    cursor: pointer;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: var(--shadow-card);
    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;
}

.offer-card:hover {
    box-shadow: var(--shadow-card-hover);
    border-color: color-mix(
        in oklab,
        var(--color-primary-500) 25%,
        transparent
    ) !important;
    transform: translateY(-2px);
}

.offer-card:focus-visible {
    box-shadow: 0 0 0 0.25rem var(--color-primary-focus-ring);
}

.offer-card.selected {
    border-color: var(--color-border-selected) !important;
    background-color: var(--color-bg-selected);
    box-shadow:
        0 0 0 1.5px var(--color-border-selected),
        0 6px 20px color-mix(in oklab, var(--color-neutral-900) 6%, transparent);
}

.offer-card .card-body {
    padding: 1.75rem;
}

/* Selected ribbon — straddles the top border of the chosen card */
.offer-ribbon {
    position: absolute;
    top: -0.7rem;
    right: 1.5rem;
    z-index: 3;
    padding: 0.3rem 0.85rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-action-text);
    background-color: var(--color-action-bg);
    border-radius: var(--radius-pill);
    box-shadow: 0 2px 8px var(--color-primary-soft);
}

/* Header: title + thick accent bar */
.offer-card .offer-header {
    margin-bottom: 1.25rem;
}

.offer-card .offer-title {
    margin: 0;
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1.2;
    color: var(--color-text-main);
    transition: color 0.2s ease;
}

.offer-card .offer-accent-bar {
    display: block;
    width: 2.75rem;
    height: 0.3rem;
    margin-top: 1rem;
    border-radius: var(--radius-pill);
    background-color: var(--color-neutral-200);
    transition: background-color 0.25s ease;
}

.offer-card.selected .offer-accent-bar {
    background-color: var(--color-primary-500);
}

.offer-card:not(.selected):hover .offer-title {
    color: var(--color-primary-500);
}

.offer-card:not(.selected):hover .offer-accent-bar {
    background-color: color-mix(
        in oklab,
        var(--color-primary-500) 60%,
        transparent
    );
}

/* Price block: small label + large light amount + suffix */
.offer-card .offer-price {
    margin-bottom: 1.5rem;
}

.offer-price-label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

.offer-price-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.offer-price-amount {
    font-size: clamp(2rem, 8vw, 2.9rem);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--color-text-main);
}

.offer-card.selected .offer-price-amount {
    color: var(--color-primary-500);
}

.offer-price-amount--muted {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

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

.offer-price-suffix {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

/* Inclusions preview with green check marks */
.offer-card .offer-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.3rem 0;
    font-size: 0.92rem;
    color: var(--color-text-muted);
}

.offer-card .offer-check {
    flex-shrink: 0;
    margin-top: 0.1rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-success);
}

/* "+ d'autres prestations" hint chip */
.offer-more-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.85rem;
    padding: 0.35rem 0.7rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    background-color: color-mix(
        in oklab,
        var(--color-neutral-100) 50%,
        transparent
    );

    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-weight: 300;
}

/*.offer-card.selected .offer-more-chip {
    background-color: color-mix(
        in oklab,
        var(--color-primary-100) 110%,
        transparent
    );
}*/

.offer-more-chip .ph-dots-three-circle {
    font-size: 1.1rem;
    color: var(--color-primary-500);
}

.offer-card:not(.selected) .offer-more-chip .ph-dots-three-circle {
    color: var(--color-placeholder);
    transition: color 0.2s ease;
}

.offer-card:not(.selected):hover .offer-more-chip .ph-dots-three-circle {
    color: var(--color-primary-500);
}

/* Full-width primary CTA (ghost → filled on hover, filled when selected) */
.offer-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    margin-top: 1.75rem;
    padding: 0.85rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    color: var(--color-text-main);
    background-color: var(--color-surface);
    border: 2px solid var(--color-field-border);
    border-radius: var(--radius-input);
    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease;
}

.offer-cta .ph-check-circle {
    font-size: 1.25rem;
}

.offer-cta--selected,
.offer-card:hover .offer-cta:not(.offer-cta--selected) {
    color: var(--color-action-text);
    background-color: var(--color-action-bg);
    border-color: var(--color-action-bg);
    box-shadow: 0 4px 14px var(--color-primary-soft);
}

/* Discrete detail link below the CTA */
.offer-detail-link {
    display: inline-block;
    padding: 0.35rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 0.2s ease;
}

.offer-detail-link:hover {
    color: var(--color-primary-500);
    text-decoration: underline;
}

.offer-detail-link:focus-visible {
    color: var(--color-primary-500);
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Primary CTA "Sélectionner" — shared between offer card and offer modal */
.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;
}

.offer-card.selected .offer-select-btn {
    background-color: var(--color-action-bg);
    border-color: var(--color-action-bg);
    color: var(--color-action-text);
}

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

/* 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: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    padding: 4px 10px;
    color: rgb(194, 113, 12) !important;
    background-color: rgb(255, 243, 230) !important;
    border: none;
    border-radius: 6px;
}

.badge.badge-obligatoire i {
    font-size: 0.85rem;
    color: rgb(194, 113, 12);
}

.badge.badge-obligatoire--corner {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    cursor: help;
}

/* Push card content below the absolutely-positioned corner badge.
   `!important` is required: Bootstrap's `p-4` utility (padding: 1.5rem !important)
   on .card-body would otherwise win and the badge would overlap the icon. */
.category-card:has(.badge-obligatoire--corner) .card-body,
.offer-card:has(.badge-obligatoire--corner) .card-body {
    padding-top: 2.75rem !important;
}

.offer-price {
    line-height: 1.2;
}

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

/* ==========================================================================
   Reservation Header
   ========================================================================== */

.reservation-header {
    margin-bottom: 30px;
}

/* ==========================================================================
   Category Header Component (Phase B)
   ========================================================================== */

.category-header {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 16px 20px;
    font-weight: 300;
}

.category-header a {
    color: var(--color-text-link);
}

.category-header a:hover {
    text-decoration: underline !important;
}

/* Category header icon — accent (the picked category stands out) */
.category-header__icon {
    color: var(--color-icon-default);
}

/* ==========================================================================
   Category Card Component
   ========================================================================== */

.category-card {
    cursor: pointer;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0);
    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;
}

.category-card:hover {
    border-color: color-mix(
        in oklab,
        var(--color-primary-500) 25%,
        transparent
    ) !important;
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}

.category-card:focus {
    outline: none;
    border-color: var(--color-border-selected) !important;
    box-shadow: 0 0 0 0.25rem var(--color-primary-focus-ring) !important;
}

.category-card.selected {
    border-color: var(--color-border-selected) !important;
    background-color: var(--color-bg-selected);
    box-shadow:
        0 0 0 1.5px var(--color-border-selected),
        0 6px 20px color-mix(in oklab, var(--color-neutral-900) 6%, transparent);
}

/* Service icon — neutral by default, turns primary when the card is selected */
.category-card__icon-wrapper {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgb(241, 244, 251);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    transition: background 0.2s ease;
}

.category-card.selected .category-card__icon-wrapper {
    background: color-mix(in srgb, var(--color-border-selected) 15%, white);
}

.category-card__icon {
    font-size: 2rem;
    color: var(--color-icon-default);
    transition: color 0.2s ease;
}

.category-card.selected .category-card__icon {
    color: var(--color-border-selected);
}

.category-card__title {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--color-text-main);
    margin-bottom: 6px;
}

.category-card__price {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.category-card__price strong {
    font-weight: 600;
}

/* ==========================================================================
   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: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.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: 600 !important;
    color: var(--color-text-main);
    font-size: 1.05rem;
}

.sidebar-recap__total-value {
    font-weight: 600 !important;
    color: var(--color-text-main) !important;
    font-size: 1.5rem;
    line-height: 1.2;
}

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

.sidebar-recap__modify-link {
    color: var(--color-text-link) !important;
    font-size: 0.8rem;
    font-weight: 400;
    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: 0.8em;
    color: var(--color-text-muted);
}

.sidebar-recap .detail_value {
    font-size: 0.9em;
    font-weight: 400 !important;
}

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

.sidebar-recap .section-label {
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}

.sidebar-recap .card-body,
.sidebar-recap .card-body span,
.sidebar-recap .card-body div {
    font-weight: 300;
}

.sidebar-recap .card-body .fw-semibold,
.sidebar-recap .card-body .fw-bold,
.sidebar-recap .card-body strong {
    font-weight: 500 !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: 0.875rem;
}

.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);
}

/* ==========================================================================
   Phase Transitions
   ========================================================================== */

[data-reservation-step1-target="phaseCategories"],
[data-reservation-step1-target="phaseOffers"] {
    transition: opacity 0.2s ease-in-out;
}

[data-reservation-step1-target="phaseCategories"].d-none,
[data-reservation-step1-target="phaseOffers"].d-none {
    opacity: 0;
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 575.98px) {
    .category-card .card-body {
        padding: 1rem;
    }

    .category-card__icon-wrapper {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        margin-bottom: 8px;
    }

    .category-card__icon {
        font-size: 1.5rem;
    }

    .category-card__title {
        font-size: 0.9rem;
    }

    .category-card__price {
        font-size: 0.75rem;
    }

    .badge-obligatoire {
        font-size: 0.55rem;
        padding: 0.25em 0.45em;
    }
}

@media (max-width: 767.98px) {
    .offer-card .card-body {
        padding: 1.25rem;
    }

    .offer-card .offer-title {
        font-size: 1.25rem;
    }

    .offer-ribbon {
        right: 1rem;
        font-size: 0.62rem;
    }
}

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

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

@media (prefers-reduced-motion: reduce) {
    .category-card,
    .offer-card,
    .stepper__item,
    .stepper-mobile__header,
    .stepper-mobile__caret,
    [data-reservation-step1-target="phaseCategories"],
    [data-reservation-step1-target="phaseOffers"] {
        transition: none !important;
    }
}

/* ==========================================================================
   Offer Details Modal
   ========================================================================== */

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

/* Modal content — rounded-2xl = 24px, soft shadow */
#offerModal .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 */
#offerModal .modal-header {
    padding: 24px 24px 16px;
}

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

/* Modal footer: pt-4 sm:pt-6 */
#offerModal .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 */
#offerModal .modal-body > div {
    margin-bottom: 32px;
}
/* Last child (warning) has no bottom margin */
#offerModal .modal-body > div:last-child {
    margin-bottom: 0;
}

/* Title: 28px bold (desktop), text-brand-dark = neutral-900 */
#offerModal .modal-title {
    font-size: 28px;
    line-height: 1.1;
    font-weight: 700;
    color: var(--color-neutral-900);
}

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

/* Section headers: 11px bold uppercase, tracking-widest, text-gray-400 (neutral-500) */
#offerModal .offer-modal-section-header {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-neutral-500);
    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);
}

/* Description text: 15px, text-gray-600 (neutral-700), leading-relaxed (~1.625) */
#offerModal .modal-body > div:nth-of-type(1) > p,
#offerModal .list-unstyled li {
    font-size: 15px;
    line-height: 1.625;
    color: var(--color-neutral-700);
}

/* Inclusion list: medium weight, spacing between items */
#offerModal .list-unstyled {
    margin-bottom: 0;
}
#offerModal .list-unstyled li {
    font-weight: 500;
    margin-bottom: 12px;
}
/* Check icon: text-xl = 20px, brand-green */
#offerModal .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 */
#offerModal .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: 500;
    font-size: 14px;
}
#offerModal .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;
}

/* HT/TVA lines: 15px, text-gray-500 (muted), medium weight on values */
.modal-tarif .d-flex > span {
    font-size: 15px;
    color: var(--color-text-muted);
}
.modal-tarif .d-flex > span:last-child {
    font-weight: 500;
    color: var(--color-neutral-700);
}

/* Total TTC separator: 1px gray-200 */
.modal-tarif .total-row {
    border-top: 1px solid var(--color-neutral-200);
    padding-top: 20px;
    margin-top: 20px;
}
/* Total label: base (16px), bold */
.modal-tarif .total-row > span:first-child {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-neutral-900);
}
/* Total price: 3xl (30px), bold, brand-coral, tight tracking */
#offerModal .offer-price-value {
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--color-action-bg);
}

/* TVA note: 13px, text-gray-400 (neutral-500) */
#offerModal small {
    font-size: 13px;
    color: var(--color-neutral-500);
}

/* Warning alert: bg-orange-50 tint, border-l-4 orange-400, rounded-r-xl, 14px */
#offerModal .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;
}
#offerModal .alert-warning small {
    font-size: 14px;
    color: #92400e;
    font-weight: 500;
}
#offerModal .alert-warning i {
    color: var(--color-warning);
    font-size: 20px;
}

/* Footer CTA: filled coral, py-4 (16px), rounded-xl (12px), bold 16px, shadow-button */
#offerModal .offer-select-btn {
    padding: 16px;
    font-size: 16px;
    font-weight: 700;
    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);
}
#offerModal .offer-select-btn:hover,
#offerModal .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);
}
#offerModal .offer-select-btn:active {
    transform: scale(0.98);
}
#offerModal .offer-select-btn i {
    font-size: 20px;
}

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

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

/* Mobile adjustments */
@media (max-width: 575.98px) {
    #offerModal .modal-title {
        font-size: 24px;
    }
    #offerModal .modal-content {
        border-radius: 16px;
    }
    #offerModal .modal-header {
        padding: 24px 24px 16px;
    }
    #offerModal .modal-body {
        padding: 8px 24px 24px;
    }
    #offerModal .modal-footer {
        padding: 16px 24px 24px;
    }
    .modal-tarif {
        padding: 16px 20px;
    }
    #offerModal .offer-price-value {
        font-size: 24px;
    }
    #offerModal .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 1→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));
    }

    /* 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: 0.78rem;
        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: 0.72rem;
    }
}

/* ==========================================================================
   STEP 2: Installation Details — Section cards, material rows
   ========================================================================== */

.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: 600;
    text-transform: none;
    letter-spacing: -0.015em;
    font-size: 1.25rem;
    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);
}

.material-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background-color: var(--color-surface-muted);
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
    transition: background-color 0.15s ease;
}

.material-row:last-of-type {
    margin-bottom: 0;
}

.material-row:hover {
    background-color: color-mix(
        in oklab,
        var(--color-neutral-900) 5%,
        transparent
    );
}

.material-row__icon {
    width: 48px;
    height: 48px;
    background-color: var(--color-accent-soft);
    color: var(--color-icon-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

.material-name {
    font-weight: 500;
}

.quantity-select {
    width: 80px;
    padding: 0.25rem 2rem 0.25rem 0.5rem;
    font-size: 0.9rem;
}

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

@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: 0.825rem;
    }

    .section-body {
        padding: 16px;
    }

    .material-row {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px;
    }

    .material-row .d-flex.flex-grow-1 {
        width: 100%;
    }

    .quantity-select {
        width: 72px;
    }
}

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

@media (prefers-reduced-motion: reduce) {
    .material-row {
        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);
}

.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: 600;
    margin-bottom: 4px;
}

.slot-btn .slot-time {
    font-size: 0.9rem;
    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;
    }
}

/* 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 4: Payment Form
   ========================================================================== */

/* Option card — selection state uses primary (same as other .selected patterns) */
.option-card {
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-sm);
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: none;
    font: inherit;
    color: inherit;
}

.option-card:hover {
    border-color: color-mix(
        in oklab,
        var(--color-primary-500) 35%,
        transparent
    );
}

.option-card.selected {
    border: 2px solid var(--color-border-selected);
    background-color: var(--color-bg-selected);
}

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

.option-card .option-label {
    font-weight: 600;
    margin-bottom: 4px;
}

.option-card .option-desc {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 0;
}

/* Option card icon — accent color for emphasis (selected) */
.option-card__icon--selected {
    color: var(--color-icon-accent);
}

/* Pay button — accent CTA (large, prominent) */
.btn-pay {
    padding: 16px 32px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.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) {
    .option-card {
        padding: 12px;
    }

    .option-card .option-label {
        font-size: 0.9rem;
    }

    .option-card .option-desc {
        font-size: 0.8rem;
    }

    .stripe-element-container {
        padding: 16px;
    }

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

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

@media (prefers-reduced-motion: reduce) {
    .option-card,
    .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: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--color-text-main);
    margin: 0 0 16px;
}

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

.reservation-success-subtitle strong {
    color: var(--color-text-main);
    font-weight: 600;
    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: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.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: 0.875rem;
    font-weight: 500;
    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: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--color-text-main);
}

@media (min-width: 576px) {
    .reservation-confirmation .reservation-number {
        font-size: 1.875rem;
    }
}

.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: 0.875rem;
    font-weight: 600;
    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: 700;
    font-size: 2rem;
}

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

.artisan-card__name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin: 0 0 16px;
    letter-spacing: -0.015em;
}

.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: 500;
    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-primary-400);
}

.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: 0.875rem;
    font-weight: 500;
    line-height: 1.6;
}

/* 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: 600;
    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: 0.75rem;
    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: 0.875rem;
    font-weight: 600;
    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: 500;
}

@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: 1.125rem;
    font-weight: 700;
    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;
    }
}

/* ==========================================================================
   Pill Buttons (scoped to reservation tunnel)
   ========================================================================== */

.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 {
    border-radius: var(--radius-pill) !important;
    padding: 12px 24px;
    font-weight: 400;
    transition:
        transform 0.1s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s 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 {
    background-color: var(--color-primary-500);
    border-color: var(--color-primary-500);
    color: #fff;
    box-shadow: 0 4px 14px
        color-mix(in oklab, var(--color-primary-500) 20%, transparent);
}

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

.reservation-step1 .btn-primary.btn-sm,
.reservation-step1 .btn-outline-primary.btn-sm,
.reservation-step2 .btn-primary.btn-sm,
.reservation-step2 .btn-outline-primary.btn-sm,
.reservation-step3 .btn-primary.btn-sm,
.reservation-step3 .btn-outline-primary.btn-sm,
.reservation-step4 .btn-primary.btn-sm,
.reservation-step4 .btn-outline-primary.btn-sm {
    padding: 6px 16px;
    font-size: 0.85rem;
    font-weight: 500;
}

.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) {
    transform: scale(0.98);
    background-color: var(--color-primary-700);
    border-color: var(--color-primary-700);
    color: #fff;
    box-shadow: 0 2px 8px
        color-mix(in oklab, var(--color-primary-500) 30%, transparent);
}

.reservation-step1 .btn-primary:disabled,
.reservation-step2 .btn-primary:disabled,
.reservation-step3 .btn-primary:disabled,
.reservation-step4 .btn-primary:disabled,
.bottom-nav .btn-primary:disabled,
.sidebar-recap .btn-primary:disabled {
    background-color: var(--color-disabled-bg);
    border-color: var(--color-disabled-bg);
    color: var(--color-text-muted);
    box-shadow: none;
    opacity: 1;
    transform: none;
}

/* ==========================================================================
   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 {
    color: var(--color-text-muted) !important;
    font-weight: 300;
    font-size: 0.95em;
}

.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-weight: 300;
    font-size: 0.85em;
}

.reservation-step1 h1 + p,
.reservation-step2 h1 + p,
.reservation-step3 h1 + p,
.reservation-step4 h1 + p {
    font-weight: 400;
}

.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: 500;
    letter-spacing: -0.02em;
}

.reservation-step1 h1,
.reservation-step2 h1,
.reservation-step3 h1,
.reservation-step4 h1 {
    /* color: var(--color-accent-500); */
    color: var(--color-neutral-800);
    font-weight: 700;
}

/* 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);
}