/*
 * Home page V2 (approved mockup 2026-10-09). Tokens only; colour tints through color-mix() of the brand palette.
 * Mobile first: 320 px is a designed layout, not a shrunk desktop.
 */

/* ---------- Designed fallback art (no licensed photography yet: home/_art.html.twig) ---------- */
.sj-art {
    --art-sky-1: color-mix(in srgb, var(--sj-ocean) 22%, var(--sj-bg));
    --art-sky-2: var(--sj-bg);
    --art-sun: var(--sj-sun);
    --art-land: color-mix(in srgb, var(--sj-teal) 45%, var(--sj-bg));
    --art-wave-1: color-mix(in srgb, var(--sj-ocean) 55%, var(--sj-bg));
    --art-wave-2: color-mix(in srgb, var(--sj-ocean) 85%, var(--sj-navy));
    --art-wave-3: var(--sj-navy);
    --art-peak-back: color-mix(in srgb, var(--sj-navy) 35%, var(--sj-bg));
    --art-peak: color-mix(in srgb, var(--sj-navy) 80%, var(--sj-ocean));
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, var(--art-sky-1), var(--art-sky-2));
}
.sj-art svg { display: block; width: 100%; height: 100%; }
.sj-art__sun { fill: var(--art-sun); opacity: 0.9; }
.sj-art__glow-in { stop-color: var(--art-sun); stop-opacity: 0.28; }
.sj-art__glow-out { stop-color: var(--art-sun); stop-opacity: 0; }
/* Hero fallback: pale tints only, so text keeps its contrast wherever it lands. */
.sj-art--hero {
    --art-sky-1: color-mix(in srgb, var(--sj-ocean) 16%, var(--sj-bg));
    --art-land: color-mix(in srgb, var(--sj-teal) 22%, var(--sj-bg));
    --art-wave-1: color-mix(in srgb, var(--sj-ocean) 18%, var(--sj-bg));
    --art-wave-2: color-mix(in srgb, var(--sj-ocean) 30%, var(--sj-bg));
    --art-wave-3: color-mix(in srgb, var(--sj-ocean) 45%, var(--sj-bg));
}
.sj-art--hero .sj-art__wave--2, .sj-art--hero .sj-art__wave--3 { opacity: 1; }
.sj-art__land { fill: var(--art-land); }
.sj-art__wave--1 { fill: var(--art-wave-1); }
.sj-art__wave--2 { fill: var(--art-wave-2); opacity: 0.85; }
.sj-art__wave--3 { fill: var(--art-wave-3); opacity: 0.9; }
.sj-art__peak--back { fill: var(--art-peak-back); }
.sj-art__peak { fill: var(--art-peak); }
.sj-art__snow, .sj-art__ground { fill: var(--sj-bg); }
.sj-art--tone-2 { --art-sky-1: color-mix(in srgb, var(--sj-sun) 26%, var(--sj-bg)); --art-land: color-mix(in srgb, var(--sj-sun) 35%, var(--sj-bg)); }
.sj-art--tone-3 { --art-sky-1: color-mix(in srgb, var(--sj-ocean) 32%, var(--sj-bg)); }
.sj-art--tone-4 { --art-sky-1: color-mix(in srgb, var(--sj-navy) 22%, var(--sj-bg)); --art-peak: color-mix(in srgb, var(--sj-navy) 60%, var(--sj-ocean)); }
.sj-art--tone-5 { --art-sky-1: color-mix(in srgb, var(--sj-teal) 28%, var(--sj-bg)); --art-wave-1: color-mix(in srgb, var(--sj-teal) 60%, var(--sj-bg)); }
.sj-art--tone-6 { --art-sky-1: color-mix(in srgb, var(--sj-sun) 40%, var(--sj-bg)); --art-sun: color-mix(in srgb, var(--sj-sun) 80%, var(--sj-navy)); }

/* ---------- Hero ---------- */
.sj-hh {
    position: relative;
    z-index: 2; /* above the next sections: the search bar's suggestions and travellers panel overflow the hero */
    isolation: isolate;
    padding: var(--sj-space-6) 0 var(--sj-space-5);
    background: var(--sj-surface-light);
}
.sj-hh__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.sj-hh__media picture, .sj-hh__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A photograph (owner choice 2026-10-10): the photo keeps its full colours; white text sits on a brand-navy gradient
   on the text side (left on desktop, top and bottom on phones), with a light shadow. */
.sj-hh--photo .sj-hh__media img { filter: saturate(1.1); }
.sj-hh--photo .sj-hh__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, color-mix(in srgb, var(--sj-navy) 66%, transparent) 0%, color-mix(in srgb, var(--sj-navy) 28%, transparent) 48%, color-mix(in srgb, var(--sj-navy) 50%, transparent) 100%);
}
.sj-hh--photo .sj-hh__title,
.sj-hh--photo .sj-hh__lead,
.sj-hh--photo .sj-hh__trust,
.sj-hh--photo .sj-hh__credit { color: var(--sj-text-inverse); text-shadow: 0 1px 12px color-mix(in srgb, var(--sj-navy) 40%, transparent); }
.sj-hh--photo .sj-hh__trust .sj-icon { color: var(--sj-text-inverse); }
@media (min-width: 992px) {
    .sj-hh--photo .sj-hh__media::after {
        background: linear-gradient(90deg, color-mix(in srgb, var(--sj-navy) 78%, transparent) 0%, color-mix(in srgb, var(--sj-navy) 45%, transparent) 38%, transparent 66%);
    }
    .sj-hh--photo .sj-hh__media::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(0deg, color-mix(in srgb, var(--sj-navy) 55%, transparent) 0%, transparent 22%);
    }
}
.sj-hh__art svg { height: 100%; }
.sj-hh__copy { max-width: 40rem; }
.sj-hh__title {
    margin: 0 0 var(--sj-space-3);
    font-size: clamp(1.875rem, 1.25rem + 3vw, 3.5rem);
    font-weight: var(--sj-fw-bold);
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: var(--sj-navy);
}
.sj-hh__lead { margin: 0; font-size: clamp(1rem, 0.95rem + 0.35vw, 1.1875rem); line-height: 1.5; color: var(--sj-text); max-width: 34rem; }
.sj-hh .sj-searchbar { margin-top: var(--sj-space-5); border: 0; box-shadow: var(--sj-shadow-lg); }
.sj-hh__trust {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sj-space-2) var(--sj-space-4);
    margin: var(--sj-space-4) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--sj-fs-sm);
    font-weight: var(--sj-fw-medium);
    color: var(--sj-text);
}
.sj-hh__trust li { display: flex; align-items: flex-start; gap: var(--sj-space-2); }
.sj-hh__trust .sj-icon { flex: none; margin-top: 0.2em; color: var(--sj-success); }
.sj-hh__credit { margin: var(--sj-space-3) 0 0; font-size: var(--sj-fs-xs); color: var(--sj-text-muted); }

/* Smallest phones (< 375 px): tighter spacing so the search button sits in the first screen (320×568), without
   reducing input text (16 px, no iOS zoom) or touch targets (fields ≥ 55 px, button 52 px). */
@media (max-width: 374.98px) {
    .sj-hh { padding: var(--sj-space-5) 0 var(--sj-space-4); }
    .sj-hh__title { margin-bottom: var(--sj-space-2); font-size: 1.75rem; }
    .sj-hh__lead { line-height: 1.45; }
    .sj-hh .sj-searchbar { gap: var(--sj-space-1); margin-top: var(--sj-space-4); }
    .sj-hh .sj-searchbar__field { padding-block: 6px; }
    .sj-hh__trust { grid-template-columns: 1fr; gap: var(--sj-space-1); margin-top: var(--sj-space-3); }
}

/* Hero search bar: field icons (decorative) and, with JavaScript, dates and travellers side by side on phones. */
.sj-searchbar__ficon { display: none; }
@media (min-width: 360px) {
    .js .sj-hh .sj-searchbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .js .sj-hh .sj-searchbar__field--where, .js .sj-hh .sj-searchbar__submit { grid-column: 1 / -1; }
}
@media (min-width: 992px) {
    .sj-hh { padding: var(--sj-space-7) 0 var(--sj-space-6); min-height: 30rem; display: flex; align-items: center; }
    .sj-hh__inner { width: 100%; }
    .sj-hh .sj-searchbar,
    .js .sj-hh .sj-searchbar { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.25fr) minmax(0, 1fr) auto; margin-top: var(--sj-space-6); padding: var(--sj-space-2); }
    .js .sj-hh .sj-searchbar__field--where, .js .sj-hh .sj-searchbar__submit { grid-column: auto; }
    .sj-hh .sj-searchbar__field { padding-left: calc(var(--sj-space-5) + 1.75rem); }
    .sj-searchbar__ficon {
        position: absolute;
        top: 50%;
        left: var(--sj-space-5);
        display: block;
        font-size: 1.25rem;
        line-height: 0;
        color: var(--sj-text-muted);
        transform: translateY(-50%);
        pointer-events: none;
    }
    .sj-hh .sj-searchbar__submit { min-height: 56px; padding-inline: var(--sj-space-6); }
    .sj-hh__trust { display: flex; flex-wrap: wrap; gap: var(--sj-space-2) var(--sj-space-6); margin-top: var(--sj-space-5); }
    .sj-hh--art .sj-hh__art svg { margin-left: auto; width: 100%; }
}
@media (min-width: 1200px) {
    .sj-hh { min-height: 31rem; }
}

/* ---------- Section heads ---------- */
.sj-home-section { padding-block: var(--sj-space-6) var(--sj-space-2); }
.sj-home-section--tight { padding-top: var(--sj-space-5); }
.sj-home-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sj-space-2) var(--sj-space-5); margin-bottom: var(--sj-space-4); }
.sj-home-head h2 { margin: 0 0 var(--sj-space-1); font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem); letter-spacing: -0.015em; color: var(--sj-navy); }
.sj-home-head p { margin: 0; }
.sj-home-head__more { display: inline-flex; align-items: center; gap: var(--sj-space-2); min-height: var(--sj-tap); font-weight: var(--sj-fw-semibold); text-decoration: none; }
.sj-home-head__more:hover { text-decoration: underline; }

/* ---------- Destination and stay-type cards ---------- */
.sj-pcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sj-space-3); margin: 0; padding: 0; list-style: none; }
.sj-pcard {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    color: var(--sj-text);
    text-decoration: none;
    background: var(--sj-surface);
    border: 1px solid var(--sj-border);
    border-radius: var(--sj-radius-lg);
    box-shadow: var(--sj-shadow-sm);
    transition: box-shadow var(--sj-duration) var(--sj-ease), transform var(--sj-duration) var(--sj-ease);
}
.sj-pcard:hover { color: var(--sj-text); box-shadow: var(--sj-shadow); transform: translateY(-2px); }
.sj-pcard:focus-visible { outline: var(--sj-focus-outline); outline-offset: 2px; }
.sj-pcard__media { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--sj-bg-subtle); }
.sj-pcard__media--short { aspect-ratio: 16 / 9; }
.sj-pcard__media picture, .sj-pcard__media img, .sj-pcard__media .sj-art { display: block; width: 100%; height: 100%; object-fit: cover; }
.sj-pcard__badge {
    position: absolute;
    top: var(--sj-space-2);
    left: var(--sj-space-2);
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1.1rem;
    color: var(--sj-navy);
    background: color-mix(in srgb, var(--sj-bg) 92%, transparent);
    border-radius: var(--sj-radius-pill);
    box-shadow: var(--sj-shadow-sm);
}
.sj-pcard__body { display: flex; flex-direction: column; gap: 2px; padding: var(--sj-space-3); }
.sj-pcard__title { margin: 0; font-size: var(--sj-fs-md); font-weight: var(--sj-fw-semibold); line-height: 1.3; color: var(--sj-navy); }
.sj-pcard__context { font-size: var(--sj-fs-sm); color: var(--sj-text-muted); }
.sj-pcard__meta { display: inline-flex; align-items: center; gap: var(--sj-space-1); font-size: var(--sj-fs-sm); color: var(--sj-text-muted); }
.sj-pcard__context + .sj-pcard__meta { margin-top: var(--sj-space-1); font-weight: var(--sj-fw-medium); color: var(--sj-brand); }
.sj-pcard__meta .sj-icon { font-size: 0.85em; color: var(--sj-brand); }

@media (min-width: 768px) {
    .sj-pcards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sj-space-4); }
    .sj-pcard__media { aspect-ratio: 4 / 3; }
    .sj-pcard__media--short { aspect-ratio: 16 / 10; }
}
@media (min-width: 1200px) {
    .sj-pcards--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* "Des vacances pour toutes vos envies" (P3.6): eight envies, 2 columns on phones, 4 × 2 from tablets. */
@media (min-width: 768px) {
    .sj-pcards--8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.sj-pcards--8 .sj-pcard__body { padding-block: var(--sj-space-3); }

/* ---------- Featured accommodations ---------- */
/* Carousel (D-88): native scroll-snap, every card in the HTML. Cards per view: 1 with a peek of the next on phones,
   2 from 640 px, 3 from 992 px, 4 from 1200 px (the previous grid's breakpoint). Rows keep equal card heights. */
.sj-carousel__track {
    --gap: var(--sj-space-4);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    gap: var(--gap);
    /* The row clips its overflow: 4px of padding keep the cards' 3px focus ring visible, cancelled by the negative
       margin so the cards stay aligned with the heading. */
    margin: -4px -4px 0;
    padding: 4px 4px var(--sj-space-3);
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 4px;
}
.sj-carousel__item { display: flex; min-width: 0; scroll-snap-align: start; }
.sj-carousel__item > .sj-acard { flex: 1; }
/* Mouse drag (carousel.js, fine pointers only; touch keeps native scrolling): "grab" over the row, the cards keep
   their link cursor; while dragging, snapping and smooth scrolling pause, nothing is selected and links show
   "grabbing" too (the release settles on a card). */
@media (hover: hover) and (pointer: fine) {
    .sj-carousel__track[data-draggable] { cursor: grab; }
}
.sj-carousel__track.is-dragging, .sj-carousel__track.is-settling { scroll-snap-type: none; }
.sj-carousel__track.is-dragging { scroll-behavior: auto; cursor: grabbing; user-select: none; }
.sj-carousel__track.is-dragging * { cursor: grabbing; }
.sj-carousel__track.is-dragging a { pointer-events: none; }
/* With JavaScript the buttons scroll the row: the scrollbar is hidden (swipe, trackpad and keyboard still scroll). */
.js .sj-carousel__track { scrollbar-width: none; }
.js .sj-carousel__track::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: no-preference) {
    .sj-carousel__track { scroll-behavior: smooth; }
}
.sj-home-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sj-space-2) var(--sj-space-4); }
.sj-carousel__nav { display: flex; gap: var(--sj-space-2); }
/* Space kept while the module has not decided (no layout shift); visibility:hidden keeps the buttons unfocusable. */
.js .sj-carousel__nav[hidden] { display: flex; visibility: hidden; }
.sj-carousel__btn {
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    font-size: 1rem;
    color: var(--sj-navy);
    background: var(--sj-surface);
    border: 1px solid var(--sj-border);
    border-radius: var(--sj-radius);
    cursor: pointer;
    transition: background-color var(--sj-duration) var(--sj-ease), border-color var(--sj-duration) var(--sj-ease);
}
.sj-carousel__btn:hover:not([aria-disabled="true"]) { background: var(--sj-brand-subtle); border-color: var(--sj-border-strong); }
.sj-carousel__btn:focus-visible { outline: var(--sj-focus-outline); outline-offset: 2px; }
.sj-carousel__btn[aria-disabled="true"] { color: var(--sj-border-strong); cursor: default; }
.sj-acard--feature { overflow: hidden; background: var(--sj-surface); border: 1px solid var(--sj-border); border-radius: var(--sj-radius-lg); box-shadow: var(--sj-shadow-sm); }
.sj-acard--feature .sj-acard__media .sj-media { border-radius: 0; aspect-ratio: 4 / 3; }
.sj-acard--feature .sj-acard__body { padding: var(--sj-space-3) var(--sj-space-4) var(--sj-space-4); }
.sj-acard--feature .sj-acard__title { font-size: var(--sj-fs-lg); color: var(--sj-navy); }
/* Footer (home polish 2026-10-10): always two rows, rating then price, so the price sits on the card's bottom line in
   every card of a row — with or without a rating, whatever the title or amenities length. Amount in brand navy,
   slightly larger than the title, with "à partir de" and "/ N nuits" kept secondary. */
.sj-acard--feature .sj-acard__foot { display: grid; gap: var(--sj-space-1); margin-top: auto; padding-top: var(--sj-space-3); }
.sj-acard--feature .sj-acard__price { margin: 0; text-align: left; font-size: var(--sj-fs-sm); line-height: 1.3; }
.sj-acard--feature .sj-acard__price strong { font-size: 1.25rem; font-weight: var(--sj-fw-bold); color: var(--sj-navy); letter-spacing: -0.01em; }
/* --per full cards, then --peek of the next one clipped by the row's edge (a visible "there is more"): every card is
   (row - per gaps) / (per + peek) wide, so the cards stay aligned with the heading and the gaps constant. */
@media (min-width: 640px) {
    .sj-carousel__track { --per: 2; --peek: 0.15; grid-auto-columns: calc((100% - var(--per) * var(--gap)) / (var(--per) + var(--peek))); }
}
@media (min-width: 992px) {
    .sj-carousel__track { --per: 3; }
}
@media (min-width: 1200px) {
    .sj-carousel__track { --per: 4; --peek: 0.2; }
}

/* ---------- Why Sejourning (trust cards, P2B) ---------- */
/* Pale blue band, heading as the other home sections (.sj-home-head); four quiet white information cards (no link,
   no hover effect): navy outline icon, semibold navy title, muted text. One column on phones, 2 × 2 from 640 px with
   the icon beside the text (compact), four columns from 1200 px with the icon above the title (four columns at
   1024 px would leave ~230 px cards with five-line texts). */
.sj-why { margin-top: var(--sj-space-7); padding-block: var(--sj-space-6); background: color-mix(in srgb, var(--sj-ocean) 9%, var(--sj-bg)); }
.sj-why__list { display: grid; gap: var(--sj-space-3); margin: 0; padding: 0; list-style: none; }
.sj-why__card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-content: start;
    gap: var(--sj-space-1) var(--sj-space-3);
    padding: var(--sj-space-4);
    background: var(--sj-surface);
    border: 1px solid var(--sj-border);
    border-radius: var(--sj-radius);
}
.sj-why__icon { grid-row: span 2; width: 1.5rem; height: 1.5rem; color: var(--sj-navy); }
.sj-why__card h3 { margin: 0; font-size: var(--sj-fs-md); font-weight: var(--sj-fw-semibold); line-height: 1.35; color: var(--sj-navy); }
.sj-why__card p { margin: 0; font-size: var(--sj-fs-sm); line-height: 1.55; color: var(--sj-text-muted); }
@media (min-width: 640px) {
    .sj-why { padding-block: var(--sj-space-6) var(--sj-space-7); }
    .sj-why__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sj-space-4); }
    .sj-why__card { column-gap: var(--sj-space-4); padding: var(--sj-space-5); }
}
@media (min-width: 1200px) {
    .sj-why__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sj-why__card { grid-template-columns: minmax(0, 1fr); gap: var(--sj-space-2); }
    .sj-why__icon { grid-row: auto; margin-bottom: var(--sj-space-1); }
}

/* ---------- Inspiration (only with published guides) ---------- */
.sj-inspiration { display: grid; background: var(--sj-surface-light); }
.sj-inspiration__media { min-height: 14rem; }
.sj-inspiration__media picture, .sj-inspiration__media img, .sj-inspiration__media .sj-art { display: block; width: 100%; height: 100%; object-fit: cover; }
.sj-inspiration__content { padding: var(--sj-space-6) var(--sj-gutter); }
.sj-inspiration__kicker { margin: 0 0 var(--sj-space-1); font-size: var(--sj-fs-xs); font-weight: var(--sj-fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sj-text-muted); }
.sj-inspiration h2 { color: var(--sj-navy); }
.sj-inspiration__list { display: grid; gap: var(--sj-space-2); margin: var(--sj-space-4) 0 0; padding: 0; list-style: none; }
.sj-inspiration__list a { display: inline-flex; align-items: center; gap: var(--sj-space-2); min-height: var(--sj-tap); font-weight: var(--sj-fw-semibold); }
@media (min-width: 768px) {
    .sj-inspiration { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .sj-inspiration__content { align-self: center; padding: var(--sj-space-7) var(--sj-space-7); }
}

/* The home page ends on a full-bleed section: the footer follows it directly (every sheet is linked by the layout). */
body:has(.sj-hh) .sj-footer { margin-top: 0; }