/* Accommodation page (P4): gallery, content, booking box, costs, sticky CTA, favourites, lightbox. Tokens only. */

.sj-acc { padding-bottom: var(--sj-space-8); }

.sj-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sj-space-1) var(--sj-space-2);
    margin: var(--sj-space-4) 0;
    padding: 0;
    list-style: none;
    font-size: var(--sj-fs-sm);
    color: var(--sj-text-muted);
}

.sj-breadcrumb li + li::before { content: "›"; margin-right: var(--sj-space-2); }
.sj-breadcrumb a { color: var(--sj-text-muted); }

.sj-acc__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sj-space-4);
    margin-bottom: var(--sj-space-4);
}

.sj-acc__kicker { margin: 0 0 var(--sj-space-1); color: var(--sj-text-muted); }
.sj-acc__title { margin: 0 0 var(--sj-space-3); font-size: var(--sj-fs-2xl); }

.sj-acc__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sj-space-2) var(--sj-space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sj-acc__facts li { display: inline-flex; align-items: center; gap: var(--sj-space-2); }
.sj-acc__facts .sj-icon { color: var(--sj-text-muted); }
.sj-acc__rating .sj-icon { color: var(--sj-text); }

/* ---------- Gallery ---------- */
.sj-gallery { position: relative; margin-bottom: var(--sj-space-6); }
.sj-gallery__empty { display: grid; place-items: center; gap: var(--sj-space-2); color: var(--sj-text-muted); font-size: 2rem; }
.sj-gallery__empty span { font-size: var(--sj-fs-sm); }

.sj-gallery__grid { display: none; }
.sj-gallery__tile { display: block; color: inherit; }
.sj-gallery__tile .sj-media { height: 100%; aspect-ratio: auto; border-radius: 0; }
.sj-gallery__tile img { transition: transform 500ms var(--sj-ease), filter var(--sj-duration) var(--sj-ease); }
.sj-gallery__tile:hover img { transform: scale(1.03); filter: brightness(0.92); }

@media (min-width: 992px) {
    .sj-gallery__grid {
        position: relative;
        display: grid;
        grid-template-columns: 2fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: var(--sj-space-2);
        height: min(520px, 46vw);
        border-radius: var(--sj-radius-lg);
        overflow: hidden;
    }

    .sj-gallery__tile--lead { grid-row: 1 / span 2; }
    .sj-gallery__grid--few { grid-template-columns: 2fr 1fr; }
    .sj-gallery__all { position: absolute; right: var(--sj-space-4); bottom: var(--sj-space-4); box-shadow: var(--sj-shadow); }
    .sj-gallery__strip { display: none; }
}

/* Mobile strip: native scroll-snap (touch swipe without any library), counter updated by gallery.js. */
.sj-gallery__strip { position: relative; margin-inline: calc(-1 * var(--sj-gutter)); }
.sj-gallery__track {
    display: flex;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    list-style: none;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}
.sj-gallery__track::-webkit-scrollbar { display: none; }
.sj-gallery__slide { flex: 0 0 100%; scroll-snap-align: start; }
.sj-gallery__slide > a { display: block; }
.sj-gallery__slide .sj-media { border-radius: 0; }
.sj-gallery__more {
    display: grid !important;
    place-content: center;
    gap: var(--sj-space-2);
    aspect-ratio: 4 / 3;
    font-weight: var(--sj-fw-semibold);
    color: var(--sj-text);
    text-align: center;
    text-decoration: none;
    background: var(--sj-bg-subtle);
}
.sj-gallery__more svg { justify-self: center; font-size: 1.5rem; }

.sj-gallery__counter {
    position: absolute;
    right: var(--sj-space-3);
    bottom: var(--sj-space-3);
    z-index: 2;
    margin: 0;
    padding: 0.125rem var(--sj-space-2);
    font-size: var(--sj-fs-xs);
    font-weight: var(--sj-fw-semibold);
    color: var(--sj-text-inverse);
    background: rgba(11, 18, 34, 0.82); /* solid enough for contrast over any photo */
    border-radius: var(--sj-radius-pill);
}

/* Swiper core rules (instead of the vendor stylesheet, whose data: icon font the strict CSP refuses). */
.swiper { position: relative; z-index: 1; overflow: hidden; }
.swiper-wrapper { position: relative; z-index: 1; display: flex; box-sizing: content-box; width: 100%; height: 100%; transition-property: transform; transform: translate3d(0, 0, 0); }
.swiper-horizontal { touch-action: pan-y; }
.swiper-slide { position: relative; flex-shrink: 0; width: 100%; height: 100%; transition-property: transform; }
.swiper .swiper-notification { position: absolute; top: 0; left: 0; z-index: -1000; opacity: 0; pointer-events: none; }

/* Fullscreen gallery */
.sj-lightbox {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    padding: 0;
    color: var(--sj-text-inverse);
    background: #0b1222;
    border: 0;
}

.sj-lightbox::backdrop { background: #0b1222; }
.sj-lightbox[open] { display: flex; flex-direction: column; }

.sj-lightbox__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sj-space-3) var(--sj-space-4);
}

.sj-lightbox__counter { margin: 0; font-weight: var(--sj-fw-semibold); }
.sj-lightbox .sj-iconbtn { color: var(--sj-text-inverse); background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.35); }
.sj-lightbox__swiper { flex: 1; width: 100%; min-height: 0; }
.sj-lightbox .swiper-slide { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 var(--sj-space-4) var(--sj-space-4); }
.sj-lightbox .sj-media { width: min(100%, calc((100vh - 140px) * 4 / 3)); background: transparent; }
.sj-lightbox .sj-media img { object-fit: contain; }
.sj-lightbox__caption { margin: var(--sj-space-2) 0 0; font-size: var(--sj-fs-sm); opacity: 0.85; }
.sj-lightbox__nav { position: absolute; top: 50%; z-index: 3; transform: translateY(-50%); }
.sj-lightbox__nav--prev { left: var(--sj-space-4); }
.sj-lightbox__nav--next { right: var(--sj-space-4); }
.sj-lightbox__nav.swiper-button-disabled { opacity: 0.3; }

@media (max-width: 767.98px) {
    .sj-lightbox__nav { display: none; }
}

.sj-noscroll { overflow: hidden; }

.sj-photolist { display: grid; gap: var(--sj-space-5); padding: 0; list-style: none; }

/* ---------- Layout ---------- */
.sj-acc__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sj-space-6); }

@media (min-width: 992px) {
    .sj-acc__layout { grid-template-columns: minmax(0, 1fr) 24rem; gap: var(--sj-space-7); align-items: start; }
    .sj-acc__side { position: sticky; top: calc(var(--sj-header-h) + var(--sj-space-4)); }
}

.sj-acc__toc {
    display: flex;
    gap: var(--sj-space-5);
    overflow-x: auto;
    margin-bottom: var(--sj-space-5);
    padding-bottom: var(--sj-space-2);
    border-bottom: 1px solid var(--sj-border);
    font-size: var(--sj-fs-sm);
    font-weight: var(--sj-fw-semibold);
    white-space: nowrap;
}

.sj-acc__toc a { color: var(--sj-text); text-decoration: none; }
.sj-acc__toc a:hover { color: var(--sj-brand); }

.sj-acc__highlights {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sj-space-2);
    margin: 0 0 var(--sj-space-5);
    padding: 0;
    list-style: none;
}

.sj-acc__highlights li {
    display: inline-flex;
    align-items: center;
    gap: var(--sj-space-2);
    padding: var(--sj-space-1) var(--sj-space-3);
    font-size: var(--sj-fs-sm);
    background: var(--sj-bg-subtle);
    border-radius: var(--sj-radius-pill);
}

.sj-acc__highlights .sj-icon { color: var(--sj-success); }

.sj-acc__section { padding: var(--sj-space-5) 0; border-bottom: 1px solid var(--sj-border); scroll-margin-top: calc(var(--sj-header-h) + var(--sj-space-4)); }
.sj-acc__section:last-child { border-bottom: 0; }
.sj-acc__section h2 { font-size: var(--sj-fs-xl); }
.sj-acc__h3 { margin: var(--sj-space-5) 0 var(--sj-space-2); font-size: var(--sj-fs-md); }
.sj-acc__lead { font-size: var(--sj-fs-lg); }
.sj-acc__small { font-size: var(--sj-fs-sm); }

/* Same residence (Q38): a compact comparison list, one line per unit on wide screens. */
.sj-siblings { display: grid; gap: var(--sj-space-2); margin: 0 0 var(--sj-space-3); padding: 0; list-style: none; }
.sj-siblings__item { display: grid; gap: var(--sj-space-1); padding: var(--sj-space-3) 0; border-bottom: 1px solid var(--sj-border); }
.sj-siblings__item:last-child { border-bottom: 0; }
.sj-siblings__link { font-weight: var(--sj-fw-semibold); }
.sj-siblings__facts { color: var(--sj-text-muted); font-size: var(--sj-fs-sm); }
.sj-siblings__same { color: var(--sj-success); font-weight: var(--sj-fw-medium); }
@media (min-width: 768px) {
    .sj-siblings__item { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--sj-space-4); }
}

.sj-acc__textlist { display: grid; gap: var(--sj-space-2); margin: 0; padding-left: 1.1rem; }
.sj-acc__textlist li::marker { color: var(--sj-border-strong); }

.sj-beds, .sj-distances, .sj-acc__times, .sj-acc__legal, .sj-cancel { margin: 0; padding: 0; list-style: none; }
.sj-beds { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--sj-space-3); }
.sj-beds__room { display: grid; gap: var(--sj-space-1); padding: var(--sj-space-3) var(--sj-space-4); border: 1px solid var(--sj-border); border-radius: var(--sj-radius); font-size: var(--sj-fs-sm); }

.sj-facilities { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--sj-space-2) var(--sj-space-6); }
.sj-facilities__group ul { display: grid; gap: var(--sj-space-2); margin: 0; padding: 0; list-style: none; }
.sj-facilities__group li { display: flex; align-items: center; gap: var(--sj-space-3); }
.sj-facilities__group .sj-icon { color: var(--sj-text-muted); }

.sj-distances { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--sj-space-2) var(--sj-space-6); margin-top: var(--sj-space-3); }
.sj-distances li { display: flex; align-items: center; gap: var(--sj-space-3); padding: var(--sj-space-2) 0; border-bottom: 1px solid var(--sj-border); }
.sj-distances li strong { margin-left: auto; font-variant-numeric: tabular-nums; }
.sj-distances .sj-icon { color: var(--sj-text-muted); }

.sj-acc__times { display: flex; flex-wrap: wrap; gap: var(--sj-space-2) var(--sj-space-6); margin-bottom: var(--sj-space-3); }
.sj-acc__times li { display: inline-flex; align-items: center; gap: var(--sj-space-2); }

.sj-cancel { display: grid; gap: var(--sj-space-1); margin: var(--sj-space-3) 0; }
.sj-cancel li { display: flex; justify-content: space-between; gap: var(--sj-space-4); padding: var(--sj-space-2) 0; border-bottom: 1px solid var(--sj-border); font-size: var(--sj-fs-sm); }

/* ---------- Booking box and quote ---------- */
.sj-bookbox {
    display: grid;
    gap: var(--sj-space-4);
    padding: var(--sj-space-5);
    background: var(--sj-surface);
    border: 1px solid var(--sj-border);
    border-radius: var(--sj-radius-lg);
    box-shadow: var(--sj-shadow);
    scroll-margin-top: calc(var(--sj-header-h) + var(--sj-space-4));
}

.sj-bookbox__title { margin: 0; font-size: var(--sj-fs-lg); font-weight: var(--sj-fw-semibold); }
.sj-bookbox__title strong { font-size: var(--sj-fs-xl); }
.sj-bookbox__form { display: grid; gap: var(--sj-space-3); }
.sj-bookbox__field { position: relative; margin: 0; padding: var(--sj-space-2) var(--sj-space-3); border: 1px solid var(--sj-border-strong); border-radius: var(--sj-radius); }
.sj-bookbox__field .sj-popover__panel { left: 0; right: 0; width: auto; max-width: 22rem; }
.sj-bookbox__result:empty { display: none; }
.sj-bookbox__indicative { margin: 0; font-size: var(--sj-fs-sm); color: var(--sj-text-muted); }
.sj-bookbox__cta { display: grid; gap: var(--sj-space-2); }
.sj-bookbox__book { width: 100%; min-height: 52px; font-size: var(--sj-fs-lg); }
.sj-bookbox__reassure { margin: 0; text-align: center; font-size: var(--sj-fs-sm); }

.sj-quote { display: grid; gap: var(--sj-space-3); }
.sj-quote__loading { margin: 0; padding: var(--sj-space-3); color: var(--sj-text-muted); background: var(--sj-bg-subtle); border-radius: var(--sj-radius); }
.sj-quote__status { display: flex; align-items: center; gap: var(--sj-space-2); margin: 0; font-size: var(--sj-fs-sm); font-weight: var(--sj-fw-semibold); color: var(--sj-success); }
.sj-quote__lines { display: grid; gap: var(--sj-space-2); margin: 0; }
.sj-quote__line { display: flex; justify-content: space-between; gap: var(--sj-space-4); }
.sj-quote__line dt { font-weight: var(--sj-fw-regular); }
.sj-quote__line dd { margin: 0; white-space: nowrap; }
.sj-quote__total { padding-top: var(--sj-space-2); border-top: 1px solid var(--sj-border); font-size: var(--sj-fs-lg); font-weight: var(--sj-fw-bold); }
.sj-quote__total dt { font-weight: var(--sj-fw-bold); }
.sj-quote__offer, .sj-quote__schedule, .sj-quote__checked { margin: 0; font-size: var(--sj-fs-sm); }
.sj-quote__offer { color: var(--sj-accent); }

.sj-costs { display: grid; gap: var(--sj-space-3); }
.sj-costs__group { padding: var(--sj-space-3) var(--sj-space-4); background: var(--sj-bg-subtle); border-radius: var(--sj-radius); }
.sj-costs__group--onsite { background: var(--sj-warning-subtle); }
.sj-costs__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sj-space-2); margin: 0; font-size: var(--sj-fs-md); }
.sj-costs__badge { padding: 0 var(--sj-space-2); font-size: var(--sj-fs-xs); font-weight: var(--sj-fw-semibold); color: var(--sj-warning); background: var(--sj-surface); border-radius: var(--sj-radius-sm); }
.sj-costs__subtitle { margin: var(--sj-space-3) 0 var(--sj-space-1); font-size: var(--sj-fs-sm); }
.sj-costs__note { margin: var(--sj-space-1) 0 var(--sj-space-2); font-size: var(--sj-fs-sm); color: var(--sj-text-muted); }
.sj-costs__lines { display: grid; gap: var(--sj-space-2); margin: var(--sj-space-2) 0 0; padding: 0; list-style: none; }
.sj-costs__line { display: flex; justify-content: space-between; gap: var(--sj-space-4); font-size: var(--sj-fs-sm); }
.sj-costs__label { display: grid; }
.sj-costs__info { font-size: var(--sj-fs-xs); color: var(--sj-text-muted); }
.sj-costs__amount { white-space: nowrap; font-weight: var(--sj-fw-semibold); }
.sj-costs__more > summary { cursor: pointer; font-weight: var(--sj-fw-semibold); }

.sj-day-hint { display: block; font-size: 9px; line-height: 1; color: var(--sj-text-muted); }
.sj-datesheet .flatpickr-day { line-height: 1.2; padding-top: 6px; }

/* ---------- Mobile sticky CTA ---------- */
.sj-stickycta {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sj-space-3);
    padding: var(--sj-space-3) var(--sj-gutter) calc(var(--sj-space-3) + env(safe-area-inset-bottom));
    background: var(--sj-surface);
    border-top: 1px solid var(--sj-border);
    box-shadow: 0 -6px 20px rgba(20, 33, 61, 0.08);
    transition: transform var(--sj-duration) var(--sj-ease);
}

.sj-stickycta[data-hidden] { transform: translateY(110%); }
.sj-stickycta__info { min-width: 0; overflow: hidden; font-size: var(--sj-fs-sm); line-height: 1.3; }
.sj-stickycta__info > * { white-space: nowrap; }
/* A message alone ("Prix non confirmé pour ces dates", "Calcul du prix…") wraps instead of running under the button. */
.sj-stickycta__info > :only-child { white-space: normal; }
.sj-stickycta .sj-btn { flex-shrink: 0; }

@media (max-width: 991.98px) {
    /* The bar never hides the end of the page (footer links, legal). */
    body:has(.sj-stickycta) { padding-bottom: 76px; }
}

@media (min-width: 992px) {
    .sj-stickycta { display: none; }
}

/* ---------- Favourites ---------- */
/* The list is filled by JavaScript: room for the empty state from the first paint (no footer jump, CLS 0.22 → 0). */
.sj-favlist { min-height: 21rem; }
.sj-favbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sj-space-2);
    min-width: var(--sj-tap);
    min-height: var(--sj-tap);
    padding: 0 var(--sj-space-2);
    font: inherit;
    font-size: var(--sj-fs-sm);
    font-weight: var(--sj-fw-semibold);
    color: var(--sj-text);
    background: var(--sj-surface);
    border: 1px solid var(--sj-border-strong);
    border-radius: var(--sj-radius-pill);
    cursor: pointer;
}

.sj-favbtn[hidden] { display: none; }
.sj-favbtn[data-pending] { visibility: hidden; }
.sj-favbtn--labelled { flex-shrink: 0; padding: 0 var(--sj-space-4); white-space: nowrap; }
@media (max-width: 767.98px) {
    /* Icon only on phones; the label stays the accessible name. */
    .sj-favbtn--labelled { padding: 0 var(--sj-space-2); }
    .sj-favbtn--labelled [data-role="label"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.sj-favbtn .sj-favbtn__on { display: none; color: var(--sj-danger); }
.sj-favbtn[aria-pressed="true"] .sj-favbtn__on { display: inline; }
.sj-favbtn[aria-pressed="true"] .sj-favbtn__off { display: none; }
.sj-favbtn:focus-visible { outline: none; box-shadow: var(--sj-focus-ring); }

.sj-acard__fav {
    position: absolute;
    top: var(--sj-space-3);
    right: var(--sj-space-3);
    z-index: 2; /* above the card's stretched link */
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border: 0;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--sj-shadow-sm);
}

.sj-prepare, .sj-pricepage { max-width: 48rem; }