/*
 * Shared shell styles: header/nav, hero + booking card, buttons and footer.
 * Used by the homepage and by the legal pages. The homepage content sections
 * live in home-scrapbook.css (all classes prefixed `vo3-`).
 *
 * Desktop-first: no @media queries here — breakpoints live in shell-responsive.css.
 */

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.vo-container {
    max-width: var(--vo-container);
    margin-inline: auto;
    padding-inline: var(--vo-gutter);
}

section[id] {
    scroll-margin-top: 24px;
}

/* ==========================================================================
   Entrance keyframes (pure CSS, used on the hero on load).
   Scroll-triggered entrances are handled by the "enter" Stimulus controller and
   home-scrapbook.css — elements stay visible by default so content is never
   hidden without JS or under reduced motion.
   ========================================================================== */

@keyframes voFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes voUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: none; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.vo-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: 14px;
    padding: 16px 26px;
    font-family: var(--vo-font-sans);
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.vo-btn--primary {
    background: var(--vo-terracotta-deep);
    color: var(--vo-cream);
}

.vo-btn--primary:hover {
    background: var(--vo-terracotta-deep-hover);
}

.vo-btn--ghost {
    background: transparent;
    color: var(--vo-cream);
    border: 1px solid rgba(250, 246, 238, .5);
    padding: 11px 22px;
    font-size: 14px;
}

.vo-btn--ghost:hover {
    background: var(--vo-cream);
    color: var(--vo-ink);
    border-color: var(--vo-cream);
}

.vo-btn--evenement {
    background: var(--vo-plum);
    color: var(--vo-cream);
    padding: 13px 22px;
    font-size: 13.5px;
}

.vo-btn--evenement:hover {
    background: color-mix(in srgb, var(--vo-plum) 82%, black);
}

.vo-btn--entreprise {
    background: var(--vo-cream);
    color: var(--vo-slate);
    border: 1px solid var(--vo-slate);
    padding: 13px 22px;
    font-size: 13.5px;
}

.vo-btn--entreprise:hover {
    background: var(--vo-slate);
    color: var(--vo-cream);
}

/* Feature not built yet: rendered but disabled, with a small "coming soon" badge. */
.vo-btn.is-soon {
    opacity: .88;
    cursor: not-allowed;
}

.vo-soon {
    display: inline-block;
    background: rgba(0, 0, 0, .15);
    border-radius: 999px;
    padding: 2px 7px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ==========================================================================
   Header (overlaid on the hero image)
   ========================================================================== */

.vo-header {
    position: relative;
    /* Above .vo-hero__center (z-index 2), which follows it in the DOM: the
       mobile panel lives inside this header, and at an equal z-index the hero
       title would paint over it and swallow every tap on the nav links. */
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    animation: voFade 1s .1s both;
}

.vo-header__brand {
    display: flex;
    align-items: center;
    gap: 11px;
    /* It is a link home on every page, including the homepage itself. */
    color: inherit;
    text-decoration: none;
}

.vo-header__logo {
    height: 46px;
    width: auto;
}

.vo-header__name {
    font-family: var(--vo-font-serif);
    font-size: 22px;
}

.vo-header__nav {
    display: flex;
    gap: 30px;
    font-size: 14px;
    font-weight: 500;
}

.vo-header__nav a {
    text-decoration: none;
    transition: opacity .2s ease;
}

.vo-header__nav a:hover {
    opacity: .7;
}

/* The page you are on. A cream underline rather than a colour change: the nav sits
   over a photograph, where the universe accents (plum, slate) have no contrast. */
.vo-header__nav a.is-current {
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}

.vo-header__actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Burger + mobile nav panel: hidden on desktop, the responsive executor
   toggles their display below the desktop breakpoint. */
.vo-burger {
    display: none;
    flex-direction: column;
    /* Both axes: the bars are narrower than the (round) button. */
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
}

.vo-burger__bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--vo-cream);
    border-radius: 2px;
    transition: transform .3s ease, opacity .3s ease;
}

.vo-mobile-panel {
    display: none;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.vo-hero {
    position: relative;
    min-height: 100vh;
    /* Small-viewport units keep the bottom booking card above the collapsed
       mobile browser UI; the plain 100vh line above is the fallback. */
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    color: var(--vo-cream);
    padding: 24px var(--vo-gutter) 40px;
    overflow: hidden;
}

.vo-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center;
    will-change: transform;
}

.vo-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Slightly stronger mid-section than the mockup: the video loop contains
       bright frames (white villa roof) that the cream title must stay readable on. */
    background: linear-gradient(180deg, rgba(20, 16, 12, .5) 0%, rgba(20, 16, 12, .26) 26%, rgba(20, 16, 12, .3) 58%, rgba(16, 12, 8, .72) 100%);
}

.vo-hero__center {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px 0;
    will-change: transform, opacity;
    animation: voUp 1.1s .15s both;
}

.vo-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin: 0 0 24px;
}

.vo-hero__rule {
    width: 26px;
    height: 1px;
    background: rgba(250, 246, 238, .6);
}

.vo-hero__title {
    font-family: var(--vo-font-serif);
    font-weight: 500;
    font-size: clamp(50px, 9vw, 128px);
    line-height: .92;
    margin: 0;
    letter-spacing: -1px;
    text-shadow: 0 4px 40px rgba(0, 0, 0, .3);
}

.vo-hero__title em {
    font-style: italic;
}

.vo-hero__subtitle {
    max-width: 540px;
    margin: 28px 0 0;
    font-size: 17px;
    line-height: 1.6;
    opacity: .92;
}

.vo-hero__book {
    position: relative;
    z-index: 2;
    align-self: center;
    width: 100%;
    max-width: 880px;
    animation: voUp 1.1s .35s both;
}

.vo-hero__note {
    text-align: center;
    margin-top: 16px;
    font-size: 13.5px;
    opacity: .92;
}

.vo-hero__note a {
    color: var(--vo-cream);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Glass booking card */
.vo-book {
    background: rgba(250, 246, 238, .14);
    border: 1px solid rgba(250, 246, 238, .28);
    /* Safari needs the prefix until 18. */
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border-radius: 22px;
    padding: 14px 14px 14px 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    box-shadow: var(--vo-shadow-card);
}

.vo-book__field {
    flex: 1;
    min-width: 120px;
}

.vo-book__field--dates {
    min-width: 130px;
    position: relative;
    padding-right: 16px;
}

/* The homepage hero's date field: a native <details> whose panel is the same
   card, floated over the video.
   It opens UPWARD, which is not a stylistic choice: .vo-hero clips its overflow
   and the booking widget sits at its bottom edge, so a panel opening downward
   would be cut in half.
   The panel is anchored on the date field itself, so it reads as belonging to
   it rather than floating over the middle of the card. Its width is therefore
   absolute, not a percentage of that 130px field. */
.vo-book__dates-trigger {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-height: 44px;
    cursor: pointer;
    list-style: none;
}

.vo-book__dates-trigger::-webkit-details-marker {
    display: none;
}

.vo-book__dates-chevron {
    position: absolute;
    top: 50%;
    right: 0;
    opacity: .75;
    transform: translateY(-50%);
    transition: transform .25s ease;
}

/* Smaller than the calendar's own steps: this one is a disclosure hint beside a
   label, not a control of its own. */
.vo-book__dates-chevron .vo-chevron {
    width: 12px;
    height: 12px;
}

.vo-book__dates[open] .vo-book__dates-chevron {
    transform: translateY(-50%) rotate(180deg);
}

.vo-book__dates-panel {
    position: absolute;
    z-index: 3;
    bottom: calc(100% + 14px);
    left: 50%;
    width: min(400px, calc(100vw - 2 * var(--vo-gutter)));
    max-height: min(460px, 60vh);
    overflow-y: auto;
    padding: 16px;
    border-radius: 18px;
    background: var(--vo-cream);
    box-shadow: var(--vo-shadow-card);
    transform: translateX(-50%);
    /* No `both`: an entrance animation is decoration, and a fill mode that
       parks the panel in its `from` state whenever the animation has not run
       (a backgrounded tab, a throttled frame) leaves it opaque-less over the
       video. Unfilled, the rule above is what the panel looks like at rest. */
    animation: voAvailPanel .3s ease;
}

/* Its own keyframes rather than the shared voUp: that one animates `transform`
   wholesale and would drop the translateX centring for the length of the
   animation. */
@keyframes voAvailPanel {
    from { opacity: 0; transform: translate(-50%, 10px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

.vo-book__dates-panel .vo-avail {
    padding: 0;
    border: none;
    background: none;
}

.vo-book__date-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.vo-book__date-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--vo-ink);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* Overrides only: the base recipe (height, border, font) is .vo3-input
   (scrapbook.css); this field sits inside an uppercase, letter-spaced label
   and has to opt back out of both. */
.vo-book__date-input {
    text-transform: none;
    letter-spacing: normal;
}

.vo-book__label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    opacity: .8;
}

.vo-book__price {
    display: block;
    font-family: var(--vo-font-serif);
    font-size: 26px;
    margin-top: 1px;
}

.vo-book__price small {
    font-size: 14px;
    font-family: var(--vo-font-sans);
    opacity: .85;
}

.vo-book__value {
    display: block;
    font-size: 15px;
    font-weight: 600;
    margin-top: 3px;
}

.vo-book__divider {
    width: 1px;
    height: 38px;
    background: rgba(250, 246, 238, .3);
}

.vo-book__field--guests {
    min-width: 140px;
}

.vo-book__guests {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 2px;
}

.vo-book__guest-btn {
    /* 40px minimum touch target at every size (CLAUDE.md). */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(250, 246, 238, .5);
    background: transparent;
    color: var(--vo-cream);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease;
}

.vo-book__guest-btn:hover {
    background: rgba(250, 246, 238, .18);
}

/* Bound reached (min/max guests): the counter button is disabled by JS. */
.vo-book__guest-btn:disabled {
    opacity: .4;
    cursor: default;
}

.vo-book__guest-btn:disabled:hover {
    background: transparent;
}

/*
 * The number the guest-counter buttons increment/decrement. A real <input>
 * (its value is what a surrounding form submits), styled to read as plain
 * text: the custom +/- buttons replace the native spinner, which would
 * otherwise sit right next to them as a second, redundant control.
 */
.vo-book__count {
    width: 3ch;
    /* A tappable control, not a caption: it keeps the 40px floor of its siblings. */
    min-height: 40px;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    min-width: 16px;
    text-align: center;
    -moz-appearance: textfield;
}

.vo-book__count::-webkit-inner-spin-button,
.vo-book__count::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.vo-hero__book .vo-btn--primary {
    white-space: nowrap;
}

/* ==========================================================================
   Misc
   ========================================================================== */

.vo-star {
    color: var(--vo-gold);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.vo-footer {
    border-top: 1px solid rgba(33, 28, 23, .12);
}

.vo-footer__inner {
    padding-block: 34px 70px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
    flex-wrap: wrap;
}

.vo-footer__brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vo-footer__logo {
    height: 54px;
    width: auto;
}

.vo-footer__name {
    font-family: var(--vo-font-serif);
    font-size: 22px;
}

.vo-footer__place {
    font-size: 13px;
    color: var(--vo-muted);
    margin-top: 2px;
}

.vo-footer__contact {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-style: normal;
    font-size: 13.5px;
    color: var(--vo-muted);
}

.vo-footer__contact a {
    text-decoration: none;
}

.vo-footer__contact a:hover {
    color: var(--vo-terracotta);
}

.vo-footer__social {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.vo-footer__social svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* Trust badges: discreet, same muted tone as the rest of the footer, wraps on
   narrow viewports rather than forcing a scrollbar. */
.vo-footer__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vo-footer__badge {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(33, 28, 23, .14);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12.5px;
    color: var(--vo-muted);
    white-space: nowrap;
}

.vo-footer__links {
    display: flex;
    gap: 26px;
    font-size: 13.5px;
    color: var(--vo-muted);
    flex-wrap: wrap;
    align-items: center;
}

.vo-footer__links a {
    text-decoration: none;
}

.vo-footer__links a:hover {
    color: var(--vo-terracotta);
}

/* ==========================================================================
   Back to top

   Lives in the shell, not in the scrapbook layer: the legal pages carry neither,
   and they are the pages where a reader is most likely to be far from the top.
   ========================================================================== */

.vo-to-top {
    position: fixed;
    right: clamp(16px, 3vw, 32px);
    bottom: clamp(16px, 3vw, 32px);
    /* Under the cursor blob (90), and a modal <dialog> is in the top layer, so
       neither ever has to be fought with. */
    z-index: 60;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    /* The accent lives in the scrapbook layer, which the legal pages do not load:
       there the fallback is the site's default terracotta. */
    background: var(--vo3-accent, var(--vo-terracotta));
    color: var(--vo-cream);
    box-shadow: 0 12px 28px -10px rgba(33, 28, 23, .55);

    /* Hidden until the controller says there is a top to go back to. Not
       `display: none`: the arrow has to be able to animate its way in. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity .35s ease, transform .45s cubic-bezier(.22, .61, .36, 1),
                visibility 0s linear .35s, background .3s ease;
}

.vo-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    /* Visibility must flip immediately on the way in, and only after the fade on
       the way out — hence the delay above and its removal here. */
    transition-delay: 0s;
}

.vo-to-top:hover {
    background: var(--vo-ink);
    transform: translateY(-3px);
}

.vo-to-top svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* The custom cursor hides the native one wherever it applies; the arrow is a
   control, so it keeps a pointer of its own. */
body:has(.vo3-cursor) .vo-to-top {
    cursor: pointer;
}