/* ═══════════════════════════════════════════════
   BOOK PAGE — Full-viewport booking experience
   ═══════════════════════════════════════════════ */

.book-wrapper {
    position: relative;
    /* Pin the booking experience to exactly one viewport. Use dvh so iOS
       Safari measures the *visible* area (excluding the address bar) — vh
       on iOS includes the address bar zone, which left a gap below the
       Prev/Next buttons whenever the bar was visible. */
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Cale le contenu exactement sous la navbar. La variable est posée par
       syncBookTopOffset() depuis le bas réel de la navbar : 82 px sur
       ordinateur, 64 px sur téléphone, +38 px si une bande d'annonce est
       affichée. Les 80 px en dur laissaient un vide sous l'en-tête, variable
       selon l'écran. Le repli sert avant l'exécution du script. */
    padding-top: var(--navbar-bottom, 80px);
}

/* ── Hero background — mirrors the anniversaire hero (dark gradient +
   red/cyan radial glows), replaces the previous per-space photo
   crossfade. The .book-hero-bg layers are kept in the DOM for JS
   compatibility but hidden. ── */
.book-hero-bgs {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: linear-gradient(135deg, #08080c 0%, #0e0e14 60%, rgba(230,57,70,0.12) 100%);
    overflow: hidden;
}
.book-hero-bgs::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(230,57,70,0.18) 0%, transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(0,212,255,0.08) 0%, transparent 50%);
    pointer-events: none;
    z-index: 2;
}
.book-hero-bg { display: none; }

/* ── Space selection (inline inside the booking form) ── */
.book-space-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

/* ── Destination step: real Google Maps in an iframe.
   The iframe src updates when the user switches cities so the map
   re-centers and shows a pin on the selected location. ── */
/* The destination step becomes a flex column so the map can stretch to
   fill whatever vertical room is left under the title + city tabs. */
.book-form .form-step[data-step="1"] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.book-form .form-step[data-step="1"] > .reservation-group { flex-shrink: 0; }
.book-dest-map-wrap {
    margin-top: 1rem;
    flex: 1;
    min-height: 220px;   /* desktop floor */
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    background: #0a0a12;
    position: relative;
}
.book-dest-map {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    /* Static visual — disable iframe interactions so page-scroll touches
       don't get hijacked by the map's pan/zoom. */
    pointer-events: none;
}
/* Transparent click layer over the iframe — tap anywhere on the map to
   open the listing in Google Maps externally, without re-enabling the
   iframe's pan/zoom (which would hijack page scroll on phone). */
.book-dest-map-link {
    position: absolute;
    inset: 0;
    z-index: 2;
    text-decoration: none;
    display: block;
}

/* Loading overlay shown between an iframe src swap and the iframe's
   `load` event firing — bridges the gap where the old map would
   otherwise stay visible while the new tile fetches. */
.book-dest-map-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 18, 0.78);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 2;
}
.book-dest-map-wrap.is-loading .book-dest-map-loading {
    opacity: 1;
}
.bdml-spinner {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2.5px solid rgba(255, 255, 255, 0.18);
    border-top-color: #fff;
    animation: bdml-spin 0.7s linear infinite;
}
@keyframes bdml-spin {
    to { transform: rotate(360deg); }
}
@media (max-width: 768px) {
    /* Phone: keep flex:1 from desktop so the map stretches into whatever
       vertical room is left under the city tabs (otherwise tall phones
       get a big empty gap below the map). 160px floor protects short
       viewports like iPhone mini. */
    .book-dest-map-wrap {
        min-height: 160px;
        margin-top: 0.5rem;
    }
}

.book-space-tab {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    background: var(--v2-bg-card, #12121a);
    cursor: pointer;
    transition: all 0.3s ease;
    color: #fff;
    text-align: left;
    position: relative;
    overflow: hidden;
}
.book-space-tab:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
}
.book-space-tab.active {
    border-color: var(--primary-color, #e63946);
    background: rgba(230,57,70,0.12);
    box-shadow: 0 0 20px rgba(230,57,70,0.15), inset 0 0 20px rgba(230,57,70,0.05);
}
.book-space-tab.coming-soon {
    opacity: 0.45;
    cursor: not-allowed;
}
.bst-logo {
    width: 90px;
    height: 62px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bst-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    opacity: 0.75;
    transition: opacity 0.3s;
}
.book-space-tab:hover .bst-logo img,
.book-space-tab.active .bst-logo img {
    opacity: 1;
}
.bst-info { flex: 1; min-width: 0; }
.bst-city {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.02em;
}
.bst-city i {
    font-size: 0.6rem;
    color: var(--primary-color, #e63946);
}
.bst-desc {
    display: -webkit-box;
    font-size: 0.68rem;
    color: rgba(255,255,255,0.38);
    line-height: 1.4;
    margin-top: 3px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.book-space-tab.active .bst-desc {
    color: rgba(255,255,255,0.5);
}
.bst-badge {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.45);
    padding: 4px 10px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}
.bst-badge i { font-size: 0.5rem; }
.book-space-tab.coming-soon .bst-info { opacity: 0.5; }

/* ── Main content area ── */
.book-content {
    position: relative;
    z-index: 5;
    flex: 1;
    display: flex;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 1rem;
    /* Le dégagement sous la navbar est porté par .book-wrapper : ce
       rembourrage haut s'y ajoutait et rouvrait le vide qu'on vient de fermer. */
    padding-top: 0;
    gap: 1rem;
    min-height: 0;
}

/* ── Reservation form: fixed-viewport layout.
   Header + step nav + Prev/Next buttons are pinned; only the active
   form-step's content scrolls when its content overflows. ── */
.book-form {
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.book-form-header {
    padding: 0 0 0.75rem;
    flex-shrink: 0;
}
.book-form-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
.book-form-subtitle {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.7);
    margin: 4px 0 0;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.book-form-scroll {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
}
.book-form-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }

/* The form is the flex column that holds: nav (top) → active step (fills) → buttons (bottom). */
.book-form .reservation-form {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.book-form .form-steps-navigation {
    flex-shrink: 0;
    /* Sit directly above the section title so the step number and the
       "Choisissez votre …" label read as one unit. */
    margin-top: 0.25rem !important;
    margin-bottom: 0.8rem !important;
    padding-bottom: 0.5rem !important;
    /* Anchor children at the top so the connector line can be aligned
       to the circles' vertical center (regardless of label height). */
    align-items: flex-start !important;
    --book-step-radius: 20px;     /* desktop circle = 40px wide */
    --book-step-count: 6;
    --book-step-progress: 0;       /* 0..1, set by showStep() in JS */
}
/* Recolor + reposition the connector line: */
.book-form .form-steps-navigation::before {
    /* gray rail — runs from first circle's center to last circle's center */
    left: calc(50% / var(--book-step-count)) !important;
    right: calc(50% / var(--book-step-count)) !important;
    top: var(--book-step-radius) !important;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.12) !important;
    height: 2px !important;
}
/* Animated fill that grows up to the current step */
.book-form .form-steps-navigation::after {
    content: '';
    position: absolute;
    left: calc(50% / var(--book-step-count));
    top: var(--book-step-radius);
    transform: translateY(-50%);
    height: 2px;
    width: calc((100% - 100% / var(--book-step-count)) * var(--book-step-progress));
    background: var(--primary-color, #e63946);
    box-shadow: 0 0 8px rgba(230,57,70,0.45);
    transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
    pointer-events: none;
}
@media (max-width: 768px) {
    .book-form .form-steps-navigation { --book-step-radius: 13px; }
}

/* Inactive step circles need to be opaque so the connector line doesn't
   show through them — the rail/fill should visually start/end at the
   circle's edge, not pass behind it. */
.book-form .step-nav-item .step-number {
    background: #0a0a0f !important;
    border-color: rgba(255,255,255,0.25) !important;
}
.book-form .step-nav-item.completed .step-number {
    background: rgba(230,57,70,0.95) !important;
    border-color: var(--primary-color, #e63946) !important;
    color: #fff !important;
}
.book-form .step-nav-item.active .step-number {
    background: var(--primary-color, #e63946) !important;
    border-color: var(--primary-color, #e63946) !important;
    color: #fff !important;
}
.book-form .form-steps-buttons {
    flex-shrink: 0;
    padding-top: 0.75rem;
    margin-top: auto;
}
/* The row is justify-content: space-between, so on the first step — where
   Précédent is hidden — a lone Suivant would slide to the left. The auto
   margin eats the free space instead and keeps Suivant pinned right, whether
   it has a sibling or not. On mobile .btn-primary is flex: 1, so there is no
   free space left to absorb and this is a no-op. */
.form-steps-buttons #btnStepNext {
    margin-left: auto;
}
/* Only the active step is visible — and it owns the scrollable area. */
.book-form .form-step {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px; /* room for the scrollbar */
    padding-top: 0.25rem;
}
/* Active step's first label is the section title — anchor it tight to the nav above. */
.book-form .form-step > .reservation-group:first-child > .reservation-label:first-child {
    margin-top: 0;
    margin-bottom: 0.6rem;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}
.book-form .form-step::-webkit-scrollbar { width: 8px; }
.book-form .form-step::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12);
    border-radius: 4px;
}
.book-form .form-step::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }

/* ── Form compact overrides ── */
.book-form .reservation-form { padding: 0; background: transparent !important; border-radius: 0; box-shadow: none; }
.book-form .reservation-group { margin-bottom: 1.2rem; }
.book-form .reservation-label {
    font-size: 0.88rem;
    margin-bottom: 0.6rem;
}
.book-form .reservation-label i { font-size: 0.8rem; }
.book-form .format-intro-text { display: none; }
.book-form .format-count-label { display: none; }
.book-form .format-tabs-nav {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
}
@media (max-width: 1024px) {
    .book-form .format-tabs-nav {
        grid-template-columns: repeat(3, 1fr);
    }
}
.book-form .format-tab {
    padding: 10px 8px;
    font-size: 0.72rem;
}
.book-form .format-tab i { font-size: 1rem; margin-bottom: 4px; }
.book-form .ftab-label { font-size: 0.72rem; }
.book-form .ftab-sub { font-size: 0.62rem; }

/* Segmented variant: two tabs swapping formula groups on step 0.
   Only one group (sessions OR anniversaires) is shown at a time — the
   tab label replaces the h4 group heading on every viewport. */
.book-form .format-tabs-nav--segmented {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4px;
    padding: 4px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    margin: 0 0 1rem;
}
.book-form .formula-group-title { display: none !important; }
.book-form .format-tabs-nav--segmented .format-tab {
    padding: 11px 16px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.book-form .format-tabs-nav--segmented .format-tab i {
    font-size: 0.95rem;
    opacity: 0.8;
    transition: opacity 0.2s ease, color 0.2s ease;
}
.book-form .format-tabs-nav--segmented .format-tab.active i {
    opacity: 1;
    color: var(--v2-red, #ff0040);
}
.book-form .format-tabs-nav--segmented .format-tab:hover {
    color: rgba(255,255,255,0.9);
}
.book-form .format-tabs-nav--segmented .format-tab.active {
    background: var(--v2-bg-card, #12121a);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,0,64,0.35), 0 2px 8px rgba(0,0,0,0.25);
}
.book-form .format-panel { padding: 0.5rem 0; }
.book-form .fp-desc {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    color: rgba(255,255,255,0.85);
}
.book-form .formula-selector { gap: 8px; }
.book-form .formula-option {
    padding: 16px 14px;
    gap: 0;
    border-color: rgba(255,255,255,0.08);
    background: var(--v2-bg-card, #12121a);
}
.book-form .formula-option:hover {
    border-color: rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.08);
    box-shadow: none;
    transform: none;
}
.book-form .formula-option.active {
    border-color: var(--primary-color, #e63946);
    box-shadow: none;
}
.book-form .formula-name {
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.01em;
    margin-bottom: 0;
    line-height: 1.2;
}
.book-form .formula-desc {
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    margin-top: 2px;
    margin-bottom: 8px;
    line-height: 1.3;
}
.book-form .formula-price { font-size: 1.1rem; color: #fff; }
.book-form .formula-option.active .formula-price { color: #fff; }
.book-form .formula-per-player { font-size: 0.78rem; color: rgba(255,255,255,0.55); font-weight: 400; }
.formula-tarifs-link {
    text-align: center;
    margin-top: 0.5rem;
}
.formula-tarifs-link a {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font-size: 0.78rem;
    color: #e63946;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    transition: color 0.15s ease;
}
.formula-tarifs-link a:hover { color: #fff; }
.formula-tarifs-link a i { transition: transform 0.15s ease; }
.formula-tarifs-link a:hover i { transform: translateX(2px); }
.book-form .formula-extra { font-size: 0.78rem; color: rgba(255,255,255,0.5); font-weight: 400; }
.book-form .formula-note { display: none !important; }
.book-form .min-pricing-notice { display: none !important; }
/* Card-inline description is replaced by the details panel below the cards. */
.book-form .formula-option--standard .formula-desc,
.book-form .formula-option--birthday .formula-desc { display: none !important; }

/* Details panel — shows the description, inclusions, and notes for the
   currently selected formula below the card grid. Hidden until a card
   is selected (JS sets data-active="1"). */
.book-form .formula-details-mobile { display: none; }
.book-form .formula-details-mobile[data-active] {
    display: block;
    margin-top: 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    font-size: 0.92rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.78);
}
.book-form .formula-details-mobile .fdm-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: #fff;
    margin-bottom: 4px;
}
.book-form .formula-details-mobile .fdm-desc {
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 6px;
}
.book-form .formula-details-mobile .fdm-list {
    list-style: none;
    padding: 0;
    margin: 6px 0 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
}
.book-form .formula-details-mobile .fdm-list li {
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.75);
}
.book-form .formula-details-mobile .fdm-note {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
    margin-top: 4px;
}
.book-form .formula-details-mobile .fdm-list:empty,
.book-form .formula-details-mobile .fdm-note:empty,
.book-form .formula-details-mobile .fdm-desc:empty { display: none; }
.book-form .players-counter { gap: 0.8rem; }
.book-form .players-display { font-size: 2rem; }

/* Players visual */
.players-visual {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin-top: 10px;
    min-height: 28px;
}
.players-visual-icon {
    color: var(--primary-color, #e63946);
    font-size: 1.1rem;
    opacity: 0;
    transform: translateY(6px) scale(0.7);
    animation: playerPop 0.25s ease forwards;
}
@keyframes playerPop {
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.book-form .form-row { gap: 0.5rem; margin-bottom: 0.5rem; }
.book-form .form-row--inline-mobile { grid-template-columns: 1fr 1fr; }
.book-form .form-input {
    padding: 10px 14px;
    font-size: 0.85rem;
}
.book-form .price-summary {
    padding: 1rem;
    margin-top: 0.5rem;
}
.book-form .guest-invitations-description { font-size: 0.75rem; }
.book-form .checkbox-text { font-size: 0.78rem; }
.book-form .btn-reserve {
    width: 100%;
    padding: 14px;
    font-size: 0.95rem;
}
.book-form .players-infobox { margin-top: 0.6rem; }

/* ── Players-step Matchmaking / Privatize switch ─────────────────────
   2-pill segmented control on the right of the player counter (only
   in standard mode). Auto-defaults to matchmaking <10 / privatize 10+
   on threshold crossings; user choice persists within a band. The
   actual price computation reuses the existing #privatizeSpace
   checkbox so calculatePrice() doesn't change. */
.players-mode {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0;
}
.players-mode-switch {
    display: flex;
    width: 100%;
    max-width: 320px;
    background: rgba(255,255,255,0.04);
    border: 2px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 0;
    gap: 0;
    overflow: hidden;
}
.pms-btn {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.6rem 1rem;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,0.7);
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 0;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}
.pms-btn + .pms-btn { border-left: 1px solid rgba(255,255,255,0.1); }
.pms-btn i { font-size: 0.85rem; }
.pms-btn:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}
.pms-btn.is-active {
    background: var(--gradient-primary);
    color: #fff;
}
.players-mode-switch:has(.pms-btn.is-active) .pms-btn + .pms-btn {
    border-left-color: transparent;
}
.players-mode-desc {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.35;
    margin: 0;
    text-align: center;
}
@media (max-width: 600px) {
    .pms-btn { padding: 0.45rem 0.7rem; font-size: 0.78rem; }

    /* Age categories — three pills on one row on phones. */
    .book-form .age-categories-checkboxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
    .book-form .age-category-checkbox { padding: 0.5rem 0.4rem; gap: 0.35rem; justify-content: center; }
    .book-form .age-category-input { width: 14px; height: 14px; }
    .book-form .age-category-label { font-size: 0.78rem; }

    /* Calendar — fit a 7-col grid inside narrow viewports without overflow. */
    .book-form .custom-calendar { padding: 0.85rem; max-width: 100%; box-sizing: border-box; }
    .book-form .calendar-header { margin-bottom: 0.85rem; }
    .book-form .calendar-month { font-size: 0.95rem; letter-spacing: 0.5px; }
    .book-form .calendar-year { font-size: 0.75rem; }
    .book-form .calendar-nav { width: 30px; height: 30px; }
    .book-form .calendar-weekdays,
    .book-form .calendar-days { gap: 0.25rem; }
    .book-form .calendar-weekdays { margin-bottom: 0.5rem; }
    .book-form .calendar-weekday { font-size: 0.7rem; padding: 0.25rem 0; }
    .book-form .calendar-day { font-size: 0.8rem; border-radius: 6px; }
    .book-form .calendar-footer { gap: 0.5rem; margin-top: 0.6rem; padding-top: 0.6rem; }
}
.book-form .pib-text { font-size: 0.78rem; }
.book-form .datetime-selector { gap: 0.8rem; }
.book-form .custom-calendar { font-size: 0.85rem; }

/* Time picker — compact 5×5 grid, every slot visible at once. */
.time-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.35rem;
    margin-top: 0.4rem;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}
.time-strip-card {
    width: 100%;
    padding: 0.45rem 0.25rem;
    border: 2px solid transparent;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    color: #fff;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s ease, border-color 0.15s ease;
    user-select: none;
    font-family: 'Orbitron', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.time-strip-card:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.18);
}
.time-strip-card.is-active {
    background: var(--gradient-primary);
    border-color: var(--primary-color);
    box-shadow: 0 0 12px rgba(255,0,64,0.45);
}
.time-strip-card.is-disabled,
.time-strip-card[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
.time-strip-loading,
.time-strip-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: rgba(255,255,255,0.6);
    font-size: 0.9rem;
    padding: 0.5rem;
}
@media (max-width: 600px) {
    .time-strip { gap: 0.3rem; max-width: 320px; }
    .time-strip-card { font-size: 0.8rem; padding: 0.4rem 0.2rem; }
}

/* ── Day strip (Date step) ────────────────────────────────────────────
   Horizontal scrollable row of the next 14 days. The full month
   calendar lives behind the "Voir plus de dates" toggle for users
   who book further out. */
.day-strip {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding: 0.25rem 0.1rem 0.6rem;
    margin: 0 -0.1rem 0.25rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.18) transparent;
}
.day-strip::-webkit-scrollbar { height: 6px; }
.day-strip::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 3px; }
.day-strip-card {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: 64px;
    padding: 0.65rem 0.4rem 0.55rem;
    border: 2px solid transparent;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    color: #fff;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    user-select: none;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    align-items: center;
}
.day-strip-card:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.18);
}
.day-strip-card.is-today { border-color: rgba(255,0,64,0.45); }
.day-strip-card.is-active {
    background: var(--gradient-primary);
    border-color: var(--primary-color);
    box-shadow: 0 0 12px rgba(255,0,64,0.45);
}
.day-strip-card.is-disabled,
.day-strip-card[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
    background: rgba(255,255,255,0.02);
    border-color: transparent;
    box-shadow: none;
}
.day-strip-card.is-disabled:hover,
.day-strip-card[disabled]:hover {
    background: rgba(255,255,255,0.02);
    border-color: transparent;
}
.day-strip-card .dsc-dow {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.6);
    font-weight: 600;
}
.day-strip-card.is-active .dsc-dow { color: rgba(255,255,255,0.95); }
.day-strip-card .dsc-day {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
}
.day-strip-card .dsc-month {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: rgba(255,255,255,0.45);
    font-weight: 600;
}
.day-strip-card.is-active .dsc-month { color: rgba(255,255,255,0.85); }
/* The base styles.min.css makes .date-input-wrapper display:flex which
   would put the strip-wrap and the "Glissez" hint side by side. Override
   to a block stack so the hint actually sits BELOW the strip. */
.book-form .date-input-wrapper {
    display: block;
}
.day-strip-wrap {
    display: flex;
    align-items: stretch;
    gap: 0.4rem;
    margin: 0 0 0.25rem;
}
.day-strip-wrap > .day-strip { flex: 1 1 auto; min-width: 0; margin: 0; }
.day-strip-arrow {
    flex: 0 0 auto;
    width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    align-self: stretch;
}
.day-strip-arrow:hover {
    background: rgba(255,0,64,0.15);
    border-color: var(--primary-color);
    color: #fff;
}
/* Desktop: arrows visible, swipe hint hidden. Strip shrinks to its
   natural width so the next chevron sits next to the last card instead
   of leaving an empty gap when the row is wider than the cards. */
@media (min-width: 769px) {
    .day-strip-hint { display: none; }
    .day-strip-wrap { justify-content: center; }
    .day-strip-wrap > .day-strip { flex: 0 0 auto; }
}
/* Phone: drop the arrows, keep the strip full-width, show the hint
   below the line and fade it on first interaction. */
@media (max-width: 768px) {
    .day-strip-arrow { display: none; }
    .day-strip-hint {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin-top: 0.25rem;
        color: rgba(255,255,255,0.55);
        font-family: 'Inter', sans-serif;
        font-size: 0.78rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        transition: opacity 0.3s ease;
    }
    .day-strip-hint .chev {
        display: inline-block;
        animation: dayStripChev 1.6s ease-in-out infinite;
    }
    .day-strip-hint .chev--right { animation-delay: 0.8s; }
    .day-strip.is-swiped + .day-strip-hint { opacity: 0; pointer-events: none; }
}
@keyframes dayStripChev {
    0%, 100% { transform: translateX(0); opacity: 0.55; }
    50%      { transform: translateX(-3px); opacity: 1; }
}
@media (max-width: 600px) {
    .day-strip-card { width: 56px; padding: 0.55rem 0.3rem 0.45rem; }
    .day-strip-card .dsc-day { font-size: 1.1rem; }
    .day-strip-wrap { gap: 0.3rem; }
}
.book-form .age-categories-checkboxes { gap: 8px; }

/* ── Per-player tariff display (Players step) ── */
.players-tariffs-group { margin-top: 0.25rem; }
.players-tariffs {
    padding: 1rem 1.1rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
}
.pt-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.75);
    margin-bottom: 0.75rem;
}
.pt-header i {
    color: var(--primary-color, #e63946);
    font-size: 0.95rem;
}
.pt-header b { color: #fff; font-weight: 700; }
.pt-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.88rem;
}
.pt-table th,
.pt-table td {
    padding: 0.55rem 0.7rem;
    text-align: left;
}
.pt-table th {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.45);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.pt-table td { color: rgba(255,255,255,0.85); border-bottom: 1px solid rgba(255,255,255,0.04); }
.pt-table tbody tr:last-child td { border-bottom: none; }
.pt-table td + td { text-align: right; }
.pt-table .pt-pp {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    color: #fff;
    font-size: 0.95rem;
}
.pt-remaining {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.65rem 0.75rem;
    margin-top: 0.75rem;
    background: rgba(230,57,70,0.1);
    border: 1px solid rgba(230,57,70,0.25);
    border-radius: 8px;
    color: rgba(255,255,255,0.85);
    font-size: 0.82rem;
    line-height: 1.45;
}
.pt-remaining i { color: var(--primary-color, #e63946); margin-top: 2px; }
.pt-remaining b { color: #fff; }
.pt-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    margin-top: 0.75rem;
    font-size: 0.78rem;
    color: var(--primary-color, #e63946);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    transition: color 0.15s ease;
}
.pt-link:hover { color: #fff; }
.pt-link i { transition: transform 0.15s ease; }
.pt-link:hover i { transform: translateX(2px); }

/* ── Coming soon overlay ── */
.book-coming-soon {
    position: absolute;
    inset: 0;
    z-index: 15;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(12px);
}
.book-coming-soon i {
    font-size: 2.5rem;
    color: var(--primary-color, #e63946);
}
.book-coming-soon span {
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0.08em;
}

/* ═══════════════════════════════
   RESPONSIVE
   ═══════════════════════════════ */

@media (max-width: 1200px) {
    .book-space-tab { min-width: 170px; padding: 10px 12px; gap: 11px; }
    .bst-logo { width: 75px; height: 52px; }
}

@media (max-width: 1024px) {
    /* Tablet keeps the fixed-viewport contract from desktop. */
    .book-hero-bgs { position: fixed; }
    .book-content {
        flex-direction: column;
        padding: 0.8rem;
        padding-top: 0;
        gap: 0.8rem;
    }
    .bst-logo { width: 80px; height: 55px; }
}

@media (max-width: 768px) {
    .book-space-tab {
        min-width: 0 !important;
        height: 120px !important;
        padding: 0 !important;
        gap: 0 !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .bst-logo { width: 80% !important; height: auto !important; display: block !important; flex-shrink: 0 !important; margin: 0 auto; }
    .bst-logo img { width: 100% !important; height: auto !important; display: block !important; max-width: 100% !important; max-height: none !important; object-fit: unset !important; }
    .bst-info { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; flex: none !important; margin: 0 !important; text-align: center; padding: 4px 4px 6px; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%); }
    .bst-city { justify-content: center; font-size: 0.82rem; color: #fff; }
    .bst-desc { font-size: 0.58rem; -webkit-line-clamp: 1; text-align: center; }
    .book-content { padding: 0.5rem; padding-top: 0; }
    .book-form .format-tabs-nav {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ── Phone formula step: fit all 6 cards in one viewport ── */
    .book-form-header { padding-bottom: 0.4rem; }
    .book-form-title { font-size: 1.05rem; }
    .book-form-subtitle { display: none; }

    .book-form .reservation-group { margin-bottom: 0.6rem; }

    /* One group shows at a time now (via the Sessions/Anniversaires tabs)
       so 3 cards share the row and can grow taller vertically without
       needing to fit 6 at once. */
    .book-form .formula-selector--6col {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px;
    }
    .formula-group-title {
        font-size: 0.58rem;
        margin: 0.15rem 0 0.3rem;
        letter-spacing: 0.05em;
    }
    .formula-group-title:first-of-type { margin-top: 0; }

    /* 3-per-row on phone with taller cards now that only one tab's
       group shows at a time — vertical room is no longer shared. */
    .book-form .formula-option--standard,
    .book-form .formula-option--birthday {
        padding: 14px 8px 12px !important;
    }
    .book-form .formula-option--standard .formula-name,
    .book-form .formula-option--birthday .formula-name {
        font-size: 0.82rem !important;
        margin-bottom: 2px !important;
        line-height: 1.2 !important;
    }
    .book-form .formula-option--standard .formula-desc,
    .book-form .formula-option--birthday .formula-desc {
        display: none !important;
    }
    .formula-price-grid {
        padding-top: 6px;
        gap: 5px;
    }

    /* Keep price rows stacked (amount above bracket) — readable at narrow widths. */
    .book-form .formula-option--standard .formula-price-row,
    .book-form .formula-option--birthday .formula-price-row {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 0;
        padding: 2px 0;
    }
    .book-form .formula-option--standard .fpr-amount,
    .book-form .formula-option--birthday .fpr-amount {
        font-size: 0.86rem;
        font-weight: 700;
        line-height: 1.1;
    }
    .book-form .formula-option--standard .formula-price-row--best .fpr-amount,
    .book-form .formula-option--birthday .formula-price-row--best .fpr-amount {
        font-size: 0.94rem;
    }
    .book-form .formula-option--standard .fpr-unit {
        display: inline;
        font-size: 0.58rem;
        margin-left: 1px;
        font-weight: 400;
    }
    .book-form .formula-option--standard .fpr-bracket,
    .book-form .formula-option--birthday .fpr-bracket {
        font-size: 0.56rem;
        line-height: 1.15;
        opacity: 0.7;
    }
    .book-form .formula-option--birthday .fpr-unit { display: none; }

    /* Hide non-essential helper bits on the formula step (notes, link) */
    .book-form .formula-note,
    .book-form .min-pricing-notice,
    .book-form .formula-tarifs-link,
    .book-form .format-tabs-section .format-intro-text,
    .book-form .format-tabs-section .format-count-label { display: none !important; }

    /* Mobile-only details panel — recovers the info hidden above for the
       currently selected formula (per-card desc + global note + bday inclusions).
       Only rendered when a card is active (JS sets data-active="1"). */
    .book-form .formula-details-mobile[data-active] {
        display: block;
        margin-top: 10px;
        padding: 10px 12px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 8px;
        font-size: 0.78rem;
        line-height: 1.4;
        color: rgba(255, 255, 255, 0.75);
    }
    .book-form .formula-details-mobile .fdm-title {
        font-weight: 700;
        font-size: 0.86rem;
        color: #fff;
        margin-bottom: 2px;
    }
    .book-form .formula-details-mobile .fdm-desc {
        color: rgba(255, 255, 255, 0.78);
        margin-bottom: 4px;
    }
    .book-form .formula-details-mobile .fdm-list {
        list-style: none;
        padding: 0;
        margin: 4px 0 6px;
        display: flex;
        flex-wrap: wrap;
        gap: 2px 10px;
    }
    .book-form .formula-details-mobile .fdm-list li {
        font-size: 0.74rem;
        color: rgba(255, 255, 255, 0.72);
    }
    .book-form .formula-details-mobile .fdm-note {
        font-size: 0.72rem;
        color: rgba(255, 255, 255, 0.55);
        font-style: italic;
        margin-top: 2px;
    }
    .book-form .formula-details-mobile .fdm-list:empty,
    .book-form .formula-details-mobile .fdm-note:empty,
    .book-form .formula-details-mobile .fdm-desc:empty { display: none; }

    /* Step nav: re-enable on phone (styles.min.css hides it under 768px) and
       compact it horizontally so it doesn't eat too much height.
       Padding-top must stay 0 so the connector line at top:radius aligns
       with the circle's actual center. */
    .book-form .form-steps-navigation {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        padding: 0 0 0.5rem !important;
        margin-top: 0.7rem !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .book-form .step-nav-item {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        gap: 4px !important;
    }
    .book-form .step-nav-item .step-label { display: none !important; }
    .book-form .step-nav-item .step-number {
        width: 26px !important;
        height: 26px !important;
        font-size: 0.78rem !important;
    }

    .btn-step-prev, .btn-step-next { padding: 10px 14px !important; font-size: 0.85rem !important; }
}

@media (max-width: 480px) {
    .book-space-tabs { gap: 4px; }
    .book-space-tab { height: 105px !important; }
    .bst-logo img { width: 100% !important; height: auto !important; }
    .bst-city { font-size: 0.76rem; }
    .bst-desc { display: none; }
}

/* Help widget — pin to bottom-right instead of bottom-left */
#helpWidget { left: auto !important; right: 20px !important; }

/* ── Formula step (data-step=0): 6 cards with pricing brackets visible ── */
.formula-group-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    margin: 1.25rem 0 0.6rem;
}
.formula-group-title:first-of-type { margin-top: 0.5rem; }
.formula-group-title i {
    margin-right: 0.5em;
    opacity: 0.8;
}

/* The grid wins over any inline display:block JS sets on #birthdayFormulas. */
.book-form .formula-selector--6col {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.book-form .formula-option--standard,
.book-form .formula-option--birthday {
    /* Override the global .formula-option min-width:150px / width:100% rules
       that otherwise force each card past 1/3 of the row. */
    min-width: 0 !important;
    width: auto !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    padding: 14px 14px 12px;
    gap: 0;
}

.book-form .formula-option--standard .formula-name,
.book-form .formula-option--birthday .formula-name {
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 2px;
}
.book-form .formula-option--standard .formula-desc,
.book-form .formula-option--birthday .formula-desc {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255,255,255,0.6);
    line-height: 1.35;
    margin-bottom: 10px;
    min-height: 2.4em;
}

.formula-price-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: auto;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 8px;
}
.formula-price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 0;
}
.formula-price-row .fpr-bracket {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.55);
    font-weight: 500;
}
.formula-price-row .fpr-amount {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    white-space: nowrap;
}
.formula-price-row .fpr-unit {
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    font-weight: 400;
    color: rgba(255,255,255,0.45);
    margin-left: 2px;
}
.formula-price-row--best .fpr-bracket { color: #fff; }
.formula-price-row--best .fpr-amount { color: #fff; font-size: 1rem; }
.formula-price-row--best .fpr-unit { color: rgba(255,255,255,0.7); }

.book-form .formula-option--standard.active .fpr-amount,
.book-form .formula-option--birthday.active .fpr-amount { color: #fff; }
.book-form .formula-option--standard.active .formula-price-row--best .fpr-amount,
.book-form .formula-option--birthday.active .formula-price-row--best .fpr-amount { color: #fff; }

/* Players step — counter, pictograms, mode switch (when in standard
   mode), and live total all stacked centered in a single column. */
.players-row {
    display: flex;
    justify-content: center;
    margin: 0 0 1rem;
}
.players-counter-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.players-counter-col > .players-mode { width: 100%; max-width: 360px; }
.players-total {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    line-height: 1.2;
    margin-top: 0.2rem;
}
.players-total-label {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.75);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
}
.precap-price-amount {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--primary);
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 0.5px;
    transition: transform 0.18s ease;
    line-height: 1.05;
}
.precap-price-amount.bump { transform: scale(1.08); }
@media (max-width: 600px) {
    .players-total-label { font-size: 0.95rem; }
    .precap-price-amount { font-size: 2rem; }
}

/* ── Step 5 + thank-you "Total" display — mirrors the Players-step
   recap card. Shows the full game total in CHF + a "for N players"
   detail underneath. ── */
.price-summary--total { text-align: center; padding: 1.1rem 1rem; }
.price-total {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    line-height: 1.2;
}
.price-total-label {
    font-size: 1rem;
    color: rgba(255,255,255,0.75);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
}
.price-total-amount {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 0.5px;
    line-height: 1.05;
    transition: transform 0.18s ease;
}
.price-total-amount.bump { transform: scale(1.08); }
.price-total-detail {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.65);
    margin-top: 0.15rem;
}
@media (max-width: 600px) {
    .price-summary--total { padding: 0.85rem 0.75rem; }
    .price-total-label { font-size: 0.9rem; }
    .price-total-amount { font-size: 2rem; }
    .price-total-detail { font-size: 0.82rem; }
}

/* ── Step 5 venue line — compact "where you'll play" address + Maps link,
   sitting inside the price card just under the total. The whole row is the
   link to Google Maps. Address text stays in sync with the chosen city via
   updateBookVenueRecap() when the destination tabs switch. ── */
.price-venue-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.12rem;
    max-width: 100%;
    margin: 0.55rem auto 0;
    padding: 0.45rem 0.8rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.82rem;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.8);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.price-venue-link:hover { border-color: rgba(230, 57, 70, 0.5); background: rgba(230, 57, 70, 0.08); }
.price-venue-link .pvl-name {
    display: inline-flex; align-items: center; gap: 0.3rem;
    color: #fff; font-weight: 700;
}
.price-venue-link .pvl-name svg { width: 13px; height: 13px; flex: 0 0 auto; color: var(--primary); }
.price-venue-link .pvl-addr { color: rgba(255, 255, 255, 0.72); }

/* ── Post-submit thank-you page — fit inside the height-clamped wrapper
   and scroll its own overflow on small viewports. Without this, the
   ~100dvh wrapper crops the bottom of the recap card (incl. the action
   buttons) on any screen too short for the full content. ── */
.book-wrapper .thank-you-page {
    padding: 1rem 0.75rem;
    min-height: 0;
    flex: 1 1 auto;
    width: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* When content overflows, align-items: center would clip the top
       and block scroll-up; using margin:auto on the child centers when
       there's room and resolves to 0 otherwise, keeping scroll intact. */
    align-items: stretch;
}
.book-wrapper .thank-you-content {
    padding: 1.5rem 1.25rem;
    margin: auto;
    max-width: 620px;
    width: 100%;
    box-sizing: border-box;
}
.book-wrapper .thank-you-icon { font-size: 3rem; margin-bottom: 0.6rem; }
.book-wrapper .thank-you-title { font-size: 1.55rem; margin-bottom: 0.4rem; }
.book-wrapper .thank-you-message { font-size: 0.92rem; margin-bottom: 1rem; line-height: 1.45; }
.book-wrapper .reservation-summary {
    padding: 0.9rem 1rem;
    margin-bottom: 1.1rem;
    border-radius: 12px;
}
.book-wrapper .summary-title {
    font-size: 1.05rem;
    margin-bottom: 0.6rem;
    padding-bottom: 0.5rem;
}
.book-wrapper .summary-item {
    padding: 0.45rem 0;
    font-size: 0.9rem;
    gap: 0.6rem;
}
.book-wrapper .summary-label { font-size: 0.88rem; }
.book-wrapper .summary-value { font-size: 0.92rem; text-align: right; }
.book-wrapper .summary-price-block {
    border-top: 2px solid rgba(255, 0, 64, 0.3);
    margin-top: 0.6rem;
    padding-top: 0.9rem;
    text-align: center;
}
.book-wrapper .summary-price-block .price-total-amount { font-size: 1.9rem; }
.book-wrapper .thank-you-actions { gap: 0.65rem; }
.book-wrapper .thank-you-actions .btn-primary,
.book-wrapper .thank-you-actions .btn-secondary {
    padding: 0.75rem 1.25rem;
    font-size: 0.95rem;
    min-width: 160px;
}

@media (max-width: 600px) {
    .book-wrapper .thank-you-page { padding: 0.6rem 0.4rem; }
    .book-wrapper .thank-you-content { padding: 1rem 0.85rem; border-radius: 14px; }
    .book-wrapper .thank-you-icon { font-size: 2.4rem; margin-bottom: 0.35rem; }
    .book-wrapper .thank-you-title { font-size: 1.25rem; }
    .book-wrapper .thank-you-message { font-size: 0.82rem; margin-bottom: 0.7rem; }
    .book-wrapper .reservation-summary { padding: 0.7rem 0.85rem; margin-bottom: 0.85rem; }
    .book-wrapper .summary-title { font-size: 0.98rem; margin-bottom: 0.45rem; padding-bottom: 0.4rem; }
    /* Keep rows on a single line — stacking each item doubles vertical space
       and the recap is already tight on phones. */
    .book-wrapper .summary-item {
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.6rem !important;
        padding: 0.35rem 0 !important;
    }
    .book-wrapper .summary-label,
    .book-wrapper .summary-value { font-size: 0.8rem; }
    .book-wrapper .summary-value { text-align: right; max-width: 60%; word-break: break-word; }
    .book-wrapper .summary-price-block { padding-top: 0.7rem; margin-top: 0.45rem; }
    .book-wrapper .summary-price-block .price-total-amount { font-size: 1.6rem; }
    .book-wrapper .summary-price-block .price-total-label { font-size: 0.85rem; }
    .book-wrapper .summary-price-block .price-total-detail { font-size: 0.78rem; }
    /* Keep the two action buttons side-by-side on phones too — stacking
       them vertically is what pushed the secondary off-screen. */
    .book-wrapper .thank-you-actions {
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .book-wrapper .thank-you-actions .btn-primary,
    .book-wrapper .thank-you-actions .btn-secondary {
        flex: 1 1 0;
        width: auto !important;
        padding: 0.7rem 0.6rem;
        font-size: 0.82rem;
        min-width: 0 !important;
    }
}

/* ── Thank-you v2: hero + key stats + action buttons. Mirrors the
   confirmation email layout (big date+time, compact stats strip,
   Modifier / Annuler row + full-width "Ajouter au calendrier"). ── */
.thank-you-page.ty-v2 .thank-you-content {
    text-align: center;
    background: rgba(20, 20, 30, 0.85);
    border: 1px solid rgba(255, 0, 64, 0.25);
    border-radius: 18px;
    padding: 2rem 1.75rem;
}
.ty-v2 .ty-tag {
    font-size: 0.78rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.ty-v2 .ty-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.9rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.6rem 0;
    line-height: 1.15;
}
.ty-v2 .ty-subtitle {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.78);
    line-height: 1.55;
    margin: 0 0 1.4rem 0;
}
.ty-v2 .ty-subtitle strong { color: #fff; }
/* L'adresse se lit comme le bas de cette carte, pas comme une carte à part :
   le héros n'arrondit donc que ses coins hauts, ne porte plus de bordure basse,
   et laisse zéro écart avant l'adresse qui prend le relais. */
.ty-v2 .ty-hero {
    background: linear-gradient(135deg, rgba(255,0,64,0.20) 0%, rgba(255,0,64,0.06) 100%);
    border: 1px solid rgba(255,0,64,0.4);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    padding: 1.1rem 1rem;
    margin-bottom: 0;
}
.ty-v2 .ty-hero-date {
    font-size: 0.85rem;
    color: #ffd0db;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
}
.ty-v2 .ty-hero-time {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.6rem;
    color: #fff;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 1px;
    margin-top: 0.25rem;
}
.ty-v2 .ty-hero-space {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.85);
    font-weight: 600;
    margin-top: 0.35rem;
}
/* Venue address + open-in-Google-Maps card on the confirmation page. */
/* Prolongement bas du héros : mêmes bordures rouges, coins arrondis seulement
   en bas, et un fond plus sombre pour rester un élément cliquable distinct
   sans redevenir une carte séparée. */
.ty-v2 .ty-venue {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    text-decoration: none;
    background: rgba(255, 0, 64, 0.04);
    border: 1px solid rgba(255,0,64,0.4);
    border-top: 1px solid rgba(255,0,64,0.25);
    border-radius: 0 0 12px 12px;
    padding: 0.7rem 0.9rem;
    margin-bottom: 1.2rem;
    transition: background 0.15s ease;
}
.ty-v2 .ty-venue:hover { background: rgba(255, 0, 64, 0.12); }
.ty-v2 .ty-venue-icon { display: inline-flex; }
.ty-v2 .ty-venue-icon svg { width: 18px; height: 18px; color: var(--primary-color); flex: 0 0 auto; }
.ty-v2 .ty-venue-text { display: flex; flex-direction: column; text-align: left; line-height: 1.3; min-width: 0; }
.ty-v2 .ty-venue-addr { font-size: 0.9rem; color: #fff; font-weight: 600; }
.ty-v2 .ty-venue-cta { font-size: 0.78rem; color: var(--primary-color); font-weight: 600; }
/* Le total tient sur une ligne, sans carte ni bordure : une seule valeur ne
   justifiait plus un encadré fait pour en aligner trois. */
.ty-v2 .ty-total {
    /* Texte agrandi à encombrement constant : la place occupée reste celle
       d'avant (24,3 px de boîte + 19,2 px de marge = 43,5 px), reprise sur
       l'interligne et la marge basse. Sans ça, grossir la police repousserait
       tout le bas de l'écran. */
    font-size: 1.5rem;
    line-height: 1.1;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 1.05rem;
}
.ty-v2 .ty-total strong {
    color: #fff;
    font-weight: 700;
}

.ty-v2 .ty-stats {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 1.2rem;
}
.ty-v2 .ty-stat {
    flex: 1 1 0;
    min-width: 0;
    background: rgba(26, 26, 26, 0.7);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 0.8rem 0.5rem;
}
.ty-v2 .ty-stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.55);
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.ty-v2 .ty-stat-value {
    font-size: 1rem;
    color: #fff;
    font-weight: 700;
}
.ty-v2 .ty-actions { margin-bottom: 1rem; }
.ty-v2 .ty-actions-row {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}
.ty-v2 .ty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    padding: 0.85rem 1rem;
    border-radius: 8px;
    text-align: center;
    letter-spacing: 0.4px;
    box-sizing: border-box;
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.ty-v2 .ty-btn:hover { transform: translateY(-1px); }
.ty-v2 .ty-btn-outline-red {
    flex: 1 1 0;
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}
.ty-v2 .ty-btn-outline-red:hover {
    background: rgba(255, 0, 64, 0.1);
}
.ty-v2 .ty-btn-outline-white {
    flex: 1 1 0;
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,0.25);
}
.ty-v2 .ty-btn-outline-white:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.4);
}
/* Standalone download button under the calendar CTA (outside the flex row) */
.ty-v2 .ty-btn-download {
    display: flex;
    width: 100%;
    margin-top: 0.6rem;
}

/* Calendrier et PDF partagent une ligne. Les deux boutons sont pleine largeur
   par défaut, ce qui les empilerait malgré le conteneur flex : on neutralise
   donc la largeur et la marge héritées quand ils sont dans une rangée. */
.ty-v2 .ty-actions-row .ty-btn-primary,
.ty-v2 .ty-actions-row .ty-btn-download {
    flex: 1 1 0;
    width: auto;
    margin-top: 0;
}

/* Icône en SVG inline, et non en police d'icônes : le site public a laissé
   tomber FontAwesome, un <i class="fas ..."> n'y affiche plus rien. Le tracé
   suit currentColor et la taille du texte, donc il reste juste sur les deux
   variantes de bouton. */
.ty-v2 .ty-btn-icon {
    flex: none;
    margin-right: 0.45rem;
}

/* Modifier et Annuler : actions secondaires, posées juste au-dessus de la
   ligne qui les explique. Plus discrètes que le reste, pour ne pas concurrencer
   le paiement ni l'ajout au calendrier. */
.ty-v2 .ty-actions-row--small .ty-btn {
    font-size: 0.82rem;
    padding: 0.55rem 0.8rem;
    border-width: 1px;
    font-weight: 600;
    letter-spacing: 0.2px;
}
.ty-v2 .ty-btn-primary {
    display: block;
    width: 100%;
    background: var(--primary-color);
    color: #fff;
    border: 2px solid var(--primary-color);
}
.ty-v2 .ty-btn-primary:hover {
    background: #d6002f;
    border-color: #d6002f;
}
.ty-v2 .ty-actions-help {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.5);
    margin-top: 0.7rem;
    line-height: 1.5;
}
/* Le lien de paiement vit à l'intérieur de ce texte gris : il doit rester
   repérable comme un lien, sans redevenir un bouton. */
.ty-v2 .ty-actions-help a {
    color: var(--primary-color);
    font-weight: 700;
    text-decoration: underline;
}
.ty-v2 .ty-actions-help a:hover { color: #fff; }
.ty-v2 .ty-home-link {
    display: inline-block;
    margin-top: 0.4rem;
    color: rgba(255,255,255,0.65);
    font-size: 0.88rem;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding-bottom: 1px;
}
.ty-v2 .ty-home-link:hover { color: #fff; border-color: #fff; }

@media (max-width: 600px) {
    .thank-you-page.ty-v2 .thank-you-content { padding: 1.3rem 1rem; border-radius: 14px; }
    .ty-v2 .ty-title { font-size: 1.4rem; }
    .ty-v2 .ty-subtitle { font-size: 0.85rem; margin-bottom: 1rem; }
    /* margin-bottom reste à zéro : l'adresse est collée au héros, la rouvrir
       ici recréerait la coupure sur téléphone. */
    .ty-v2 .ty-hero { padding: 0.9rem 0.75rem; margin-bottom: 0; }
    .ty-v2 .ty-hero-date { font-size: 0.75rem; letter-spacing: 1.5px; }
    .ty-v2 .ty-hero-time { font-size: 2.1rem; }
    .ty-v2 .ty-hero-space { font-size: 0.85rem; }
    .ty-v2 .ty-stats { gap: 0.4rem; margin-bottom: 0.9rem; }
    .ty-v2 .ty-stat { padding: 0.6rem 0.3rem; }
    .ty-v2 .ty-stat-label { font-size: 0.62rem; letter-spacing: 0.8px; }
    .ty-v2 .ty-stat-value { font-size: 0.88rem; }
    .ty-v2 .ty-btn { font-size: 0.85rem; padding: 0.7rem 0.6rem; }
    .ty-v2 .ty-actions-help { font-size: 0.72rem; }
}