/* Ticket dialog shared with horaire-planetarium-decembre. */
@font-face {
    font-family: 'Sloke';
    src: url('font/Sloke-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Preserve the existing ticket CTA appearance inside Bootstrap film modals. */
.modal button.btn-buy-tickets[data-ticket-modal-open] {
    font-size: var(--bs-btn-font-size, 1rem) !important;
    border: var(--bs-btn-border-width, 1px) solid transparent;
}

body.ticket-modal-open { overflow: hidden !important; }
body.ticket-modal-open .back-to-top { visibility: hidden; pointer-events: none; }

.ticket-purchase-modal {
    --font-body: 'Figtree', sans-serif;
    box-sizing: border-box;
    width: min(840px, calc(100vw - 32px));
    max-width: none;
    max-height: calc(100dvh - 48px);
    margin: auto;
    padding: 56px 40px 46px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0;
    border-radius: 18px;
    background: #fff;
    color: #10083e;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.4;
}

.ticket-purchase-modal::backdrop { background: rgba(8, 12, 21, .72); }
.ticket-purchase-modal:not([open]) { display: none; }
.ticket-purchase-modal h2 {
    margin: 0 0 20px;
    color: #10083e !important;
    font-family: 'Gotham Rounded', sans-serif !important;
    font-size: 32px !important;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-transform: none;
}

.ticket-purchase-close {
    position: absolute;
    top: 24px;
    right: 20px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: #fff;
    color: #10083e;
}

.ticket-fares {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 30px 20px;
    border-radius: 9px;
    background: #201e56;
    color: #fff;
}

.ticket-fare-group { padding: 0 22px; text-align: center; }
.ticket-fare-group + .ticket-fare-group { border-left: 1px dotted #a4a9ff; }
.ticket-purchase-modal .ticket-fare-group h3 {
    margin: 0 0 28px;
    color: #fff !important;
    font-family: var(--font-body) !important;
    font-size: 22px !important;
    font-weight: 500;
    line-height: 1.25;
    text-transform: none;
}
.ticket-fare-buttons { display: flex; justify-content: center; gap: 18px; }
.ticket-purchase-modal a { color: #10083e; }
.ticket-purchase-modal a.ticket-purchase-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 22px;
    border-radius: 999px;
    background: #a4a9ff;
    color: #10083e;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}
.ticket-purchase-modal .ticket-fare-buttons a.ticket-purchase-pill {
    font-size: 18px;
}
.ticket-purchase-modal a.ticket-purchase-pill:hover { background: #bec2ff; }
.ticket-purchase-modal a:focus-visible,
.ticket-purchase-close:focus-visible { outline: 2px solid #5047be; outline-offset: 4px; }
.ticket-fare-notes { margin-top: 14px; font-size: 13px; }
.ticket-fare-notes p { margin: 0 0 10px; }
.ticket-purchase-modal .ticket-fare-notes a,
.ticket-purchase-modal .ticket-passport-holder a { color: #10083e; font-weight: 700; text-decoration: underline; }
.ticket-passport { margin-top: 58px; }
.ticket-purchase-modal .ticket-passport h2 { margin-bottom: 14px; }
.ticket-passport-intro { margin: 0 0 18px; text-align: center; }
.ticket-passport-layout { display: grid; grid-template-columns: 44% minmax(0, 1fr); align-items: center; gap: 30px; }
.ticket-passport-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    min-height: 186px;
    padding: 28px 18px 22px;
    border-radius: 9px;
    background: #302d87 url('../img/1passeport-5musees.png') center / cover;
    color: #fff;
}
.ticket-passport-card .ticket-purchase-pill { max-width: 100%; white-space: normal; }
.ticket-passport-card p { margin: 0; font-size: 22px; line-height: 1.2; }
.ticket-passport-card strong { display: block; font-family: var(--font-body); font-size: 32px; line-height: 1.1; }
.ticket-passport-museums {
    font-family: 'Sloke', Georgia, serif;
    font-weight: 400;
    position: relative;
    top: 2px;
}
.ticket-purchase-modal .ticket-passport-holder h3 {
    margin: 0 0 12px;
    color: #10083e !important;
    font-family: var(--font-body) !important;
    font-size: 18px !important;
    font-weight: 700;
    line-height: 1.3;
    text-transform: none;
}
.ticket-passport-holder p { margin: 0; }

@media (max-width: 780px) {
    .ticket-purchase-modal { padding: 54px 24px 30px; max-height: calc(100dvh - 24px); }
    .ticket-purchase-modal h2 { font-size: 26px !important; }
    .ticket-purchase-close { top: 16px; right: 16px; }
    .ticket-fares { grid-template-columns: minmax(0, 1fr); padding: 24px 16px; gap: 24px; }
    .ticket-fare-group { padding: 0; }
    .ticket-fare-group + .ticket-fare-group { border-left: 0; border-top: 1px dotted #a4a9ff; padding-top: 24px; }
    .ticket-purchase-modal .ticket-fare-group h3 { margin-bottom: 18px; font-size: 20px !important; }
    .ticket-fare-buttons { gap: 12px; flex-wrap: wrap; }
    .ticket-purchase-modal a.ticket-purchase-pill { padding-inline: 18px; }
    .ticket-passport { margin-top: 36px; }
    .ticket-passport-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .ticket-passport-intro { font-size: 15px; }
}

@media (prefers-reduced-motion: no-preference) {
    .ticket-purchase-modal[open] { animation: ticket-dialog-in 220ms ease-out; }
    @keyframes ticket-dialog-in {
        from { opacity: 0; transform: translateY(12px); }
        to { opacity: 1; transform: translateY(0); }
    }
}