/*
 * Theme "petale" (spec file 14) — soft / refined / reassuring.
 * Authored entirely from scratch: it shares no tokens, class vocabulary or
 * structure with elegance / studio / onyx.
 *
 * The tell: a cool-pastel, delicate world — blush-ivory and lilac washes,
 * organic rounded forms, a floating capsule header, soft pastel panels with
 * generous radii, circular portraits, gentle SVG curve separators, faint
 * primary-tinted blobs and the calmest motion of the set. The driver colour is
 * always softened through a scale so even a loud hue stays tasteful; the CTA
 * fill falls back to a contrast-safe strong variant so "Réserver" always meets
 * AA. No JS beyond the shared islands.
 */

/* ================================================================== */
/* Tokens                                                             */
/* ================================================================== */

body
{
    /* Driver-picked primary (any hue); falls back to a calm rosé */
    --primary: var(--primary-color, #d9879f);

    /* A full scale derived from the raw primary via oklch + color-mix.
       --strong is lightness-capped so white text on it always passes AA;
       --light is a gentle dark-mode glow tone. */
    --primary-strong: oklch(from var(--primary) min(l, 0.52) max(c, 0.1) h);
    --primary-light: oklch(from var(--primary) max(l, 0.8) min(c, 0.11) h);
    --on-primary: oklch(from var(--primary-strong) clamp(0, (0.64 - l) * 1000, 1) 0 h);

    /* Text-sized primary, readable in the current mode (kickers, links, stars) */
    --accent: var(--primary-strong);

    /* Pastel washes: the primary heavily mixed toward the base (8–12%) */
    --wash-blush: color-mix(in oklab, var(--primary) 9%, var(--page));
    --wash-lilac: color-mix(in oklab, var(--primary) 5%, var(--lilac));
    --wash-card: color-mix(in oklab, var(--primary) 6%, var(--panel));
    --glow: color-mix(in oklab, var(--primary), transparent 80%);

    /* ---- LIGHT (the default appearance) — cool-soft rosé/lilac off-whites ---- */
    --page: #fcf8f8;
    --panel: #ffffff;
    --lilac: #f5f1f8;
    --ink: #2e2730;       /* soft plum-charcoal, never pure black */
    --muted: #897e88;
    --hair: #efe6ec;
    --hair-strong: #e2d4de;

    --shadow-soft:
        0 30px 60px -34px color-mix(in oklab, var(--primary), transparent 50%),
        0 10px 26px -18px rgb(46 39 48 / 0.14);
    /* Gentler lift for the big homepage pastel panels — they sit close together,
       so a softer, more transparent shadow keeps them from looking heavy. */
    --shadow-panel:
        0 22px 48px -40px color-mix(in oklab, var(--primary), transparent 62%),
        0 6px 16px -16px rgb(46 39 48 / 0.08);
    --shadow-card:
        0 18px 40px -26px color-mix(in oklab, var(--primary), transparent 55%),
        0 4px 12px -8px rgb(46 39 48 / 0.1);

    /* Type */
    --font-serif: "DM Serif Display", Georgia, "Times New Roman", serif;
    --font-rounded: "Quicksand Variable", "Quicksand", ui-rounded, "Segoe UI", system-ui, sans-serif;
    --font-body: "Nunito Variable", Nunito, ui-sans-serif, system-ui, sans-serif;
    --font-display: var(--font-serif);

    /* Geometry */
    --shell: 71rem;            /* reading / content column ~1140px */
    --shell-wide: 80rem;       /* header capsule + wide panels */
    --gutter: clamp(1.25rem, 5vw, 3.5rem);
    --zone-space: clamp(72px, 9vw, 150px);
    --radius-card: clamp(20px, 2.2vw, 30px);
    --radius-panel: clamp(36px, 5vw, 72px);

    /* Photo framing — switched by the photo_shape setting */
    --radius-photo: clamp(22px, 2.6vw, 34px);
    --radius-portrait: clamp(28px, 4vw, 44px);

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- DARK: a soft dusk, not harsh black (plum-tinted ramps) ---- */
body[data-dark-mode="true"]
{
    --accent: var(--primary-light);

    --page: #1c181e;
    --panel: #241f27;
    --lilac: #221c28;
    --ink: #f4eef2;
    --muted: #b6aab6;
    --hair: rgb(255 235 245 / 0.12);
    --hair-strong: rgb(255 235 245 / 0.2);

    --shadow-soft: 0 32px 70px -36px rgb(0 0 0 / 0.66), 0 10px 26px -18px rgb(0 0 0 / 0.5);
    --shadow-panel: 0 24px 54px -42px rgb(0 0 0 / 0.6), 0 6px 16px -16px rgb(0 0 0 / 0.4);
    --shadow-card: 0 20px 46px -28px rgb(0 0 0 / 0.6), 0 4px 12px -8px rgb(0 0 0 / 0.45);
}

/* Circular / squircle photo framing */
body[data-photo-shape="circular"]
{
    --radius-photo: clamp(34px, 5vw, 56px);   /* generous squircle on cards */
    --radius-portrait: 50%;                   /* true circles on portraits */
}

/* Rounded heading variant (Quicksand) */
body[data-heading="rounded"] { --font-display: var(--font-rounded); }

/* ================================================================== */
/* Base                                                               */
/* ================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* Chromium ignores var() inside ::-webkit-scrollbar pseudo-elements (falls back
   to a default grey bar), so thumb colors are LITERAL. color-scheme pins the
   native fallback to the site's own mode. Soft rounded pill to match the theme. */
:root { color-scheme: light; }
:root:has(body[data-dark-mode="true"]) { color-scheme: dark; }

html
{
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgb(46 39 48 / 0.3) transparent;
}
html:has(body[data-dark-mode="true"]) { scrollbar-color: rgb(255 235 245 / 0.26) transparent; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb
{
    background-color: rgb(46 39 48 / 0.3);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgb(46 39 48 / 0.5); }

:root:has(body[data-dark-mode="true"])::-webkit-scrollbar-thumb,
:root:has(body[data-dark-mode="true"]) ::-webkit-scrollbar-thumb
{
    background-color: rgb(255 235 245 / 0.26);
}
:root:has(body[data-dark-mode="true"])::-webkit-scrollbar-thumb:hover,
:root:has(body[data-dark-mode="true"]) ::-webkit-scrollbar-thumb:hover
{
    background-color: rgb(255 235 245 / 0.42);
}

body
{
    margin: 0;
    background-color: var(--page);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1.02rem;
    font-weight: 400;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

h1, h2, h3
{
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: 0.005em;
    text-wrap: balance;
    margin: 0;
    color: var(--ink);
    overflow-wrap: break-word;
}

/* Quicksand is a variable sans — give it real weight when chosen */
body[data-heading="rounded"] h1,
body[data-heading="rounded"] h2,
body[data-heading="rounded"] h3 { font-weight: 700; letter-spacing: -0.01em; }

h1 { font-size: clamp(2.7rem, 7vw, 5.2rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }

p { margin: 0; max-width: 68ch; }

a { color: inherit; text-decoration: none; }

ul, ol { padding: 0; margin: 0; list-style: none; }

img { display: block; max-width: 100%; }

strong { font-weight: 700; }

::selection { background-color: var(--glow); color: var(--ink); }

:focus-visible
{
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ================================================================== */
/* Layout primitives                                                  */
/* ================================================================== */

.inner
{
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.inner-wide
{
    width: 100%;
    max-width: var(--shell-wide);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* A page section. Quiet and airy by default. */
.zone
{
    position: relative;
    padding-block: var(--zone-space);
}

/* Soft alternating pastel panel: a wide rounded band that rises from the
   page base with gentle shoulders and a faint primary-tinted glow. */
.zone--soft
{
    --tint: var(--wash-blush);
    margin-block: clamp(2.5rem, 5vw, 5rem);
    padding-block: clamp(56px, 7.5vw, 120px);
    background-color: var(--tint);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-panel);
}

.zone--soft[data-tint="b"] { --tint: var(--wash-lilac); }

/* Faint organic blob floating behind a section (transform-only float) */
.blob
{
    position: absolute;
    z-index: 0;
    width: clamp(16rem, 38vw, 34rem);
    aspect-ratio: 1.1 / 1;
    background: radial-gradient(closest-side, var(--glow), transparent 72%);
    border-radius: 56% 44% 62% 38% / 48% 56% 44% 52%;
    pointer-events: none;
    filter: blur(8px);
}

.blob--a { top: -6%; right: -8%; }
.blob--b { bottom: -10%; left: -10%; }

.zone > .inner,
.zone > .inner-wide { position: relative; z-index: 1; }

@media (prefers-reduced-motion: no-preference)
{
    .blob { animation: petale-float 22s ease-in-out infinite alternate; }
    @keyframes petale-float
    {
        from { transform: translate3d(0, 0, 0) rotate(0deg); }
        to { transform: translate3d(0, -22px, 0) rotate(6deg); }
    }
}

/* A gentle, static SVG-class curve separator (a soft wave) */
.curve
{
    display: block;
    width: 100%;
    height: clamp(34px, 5vw, 70px);
    color: var(--page);
}
.curve svg { display: block; width: 100%; height: 100%; }

/* ================================================================== */
/* Type pieces                                                        */
/* ================================================================== */

/* Delicate small-caps label preceded by a tiny petal mark */
.label
{
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
}

.label::before
{
    content: "";
    width: 0.6rem;
    height: 0.6rem;
    flex: none;
    background-color: var(--accent);
    border-radius: 0 50% 50% 50%;
    transform: rotate(45deg);
    opacity: 0.85;
}

.zone-title { margin: 0; }
.zone-head { max-width: 44ch; margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.zone-head .label { margin-bottom: 1.1rem; }
.zone-lead { color: var(--muted); margin-top: 1.2rem; font-size: 1.08rem; }

.overline
{
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Soft underline that grows from the centre on hover */
.grow
{
    background-image: linear-gradient(var(--accent), var(--accent));
    background-size: 0% 2px;
    background-position: 50% 100%;
    background-repeat: no-repeat;
    border-radius: 2px;
    transition: background-size 0.45s var(--ease);
    padding-bottom: 2px;
}
.grow:hover, .grow[aria-current] { background-size: 100% 2px; }

/* ================================================================== */
/* Buttons (full pills)                                               */
/* ================================================================== */

.pill
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.9rem 1.7rem;
    background-color: var(--primary-strong);
    color: var(--on-primary);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.96rem;
    letter-spacing: 0.01em;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 12px 26px -14px color-mix(in oklab, var(--primary), transparent 35%);
    transition: transform 0.25s var(--ease), box-shadow 0.3s var(--ease), filter 0.25s var(--ease);
}
.pill:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -14px color-mix(in oklab, var(--primary), transparent 28%); filter: brightness(1.03); }
.pill:active { transform: translateY(0) scale(0.98); }

.pill-ghost
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.9rem 1.6rem;
    background-color: transparent;
    color: var(--ink);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.96rem;
    border: 1px solid var(--hair-strong);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 0.25s var(--ease), color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.pill-ghost:hover { border-color: var(--accent); color: var(--accent); background-color: var(--wash-card); }

/* ================================================================== */
/* Photo framing: rounded / circular, soft pastel wash, fallbacks      */
/* ================================================================== */

.frame
{
    position: relative;
    overflow: hidden;
    background-color: var(--wash-card);
    border-radius: var(--radius-photo);
    isolation: isolate;
}

.frame img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.frame--portrait { border-radius: var(--radius-portrait); aspect-ratio: 1 / 1; }

/* Unifying pastel light wash over mismatched photos (soft_photo_wash) */
body[data-photo-wash="true"] .frame--wash::after
{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: soft-light;
    background: linear-gradient(150deg,
        color-mix(in oklab, var(--primary), transparent 70%),
        transparent 55%,
        color-mix(in oklab, var(--primary), transparent 84%));
}

/* Gentle pastel scrim for text laid over a photo (never a hard darken) */
.scrim::after
{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top,
        color-mix(in oklab, #2a2230, transparent 28%),
        color-mix(in oklab, #2a2230, transparent 62%) 42%,
        transparent 78%);
}

/* Slow Ken Burns drift on hero imagery */
@media (prefers-reduced-motion: no-preference)
{
    .kenburns img { animation: petale-kenburns 24s ease-out both; transform-origin: 55% 45%; }
    @keyframes petale-kenburns { from { transform: scale(1.08); } to { transform: scale(1); } }
}

/* Photoless fallback: a soft pastel tile with a rounded display-face initial */
.initial
{
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(120% 120% at 30% 20%, var(--wash-blush), var(--wash-lilac));
    color: var(--accent);
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 7vw, 5rem);
    line-height: 1;
    opacity: 0.9;
}

/* ================================================================== */
/* Soft chips & tags                                                  */
/* ================================================================== */

.soft-chip
{
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.9rem;
    background-color: var(--wash-card);
    color: var(--ink);
    font-weight: 600;
    font-size: 0.82rem;
    border-radius: 999px;
    border: 1px solid var(--hair);
}

.price-pill
{
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.95rem;
    background-color: color-mix(in oklab, var(--primary) 16%, var(--panel));
    color: var(--accent);
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 999px;
}

/* ================================================================== */
/* Reveal motion (shared RevealObserver contract) — gentlest in set    */
/* ================================================================== */

@media (prefers-reduced-motion: no-preference)
{
    html.js .reveal
    {
        opacity: 0;
        transform: translateY(14px);
    }
    html.js .reveal.is-visible
    {
        opacity: 1;
        transform: none;
        transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
        transition-delay: calc(var(--reveal-index, 0) * 90ms);
    }
}

@media (prefers-reduced-motion: reduce)
{
    html { scroll-behavior: auto; }
}

/* ================================================================== */
/* Shared island skins (soft, rounded, pastel)                        */
/* ================================================================== */

/* ---- Contact form ---- */
.contact-form p { margin-bottom: 1.1rem; }

.contact-form label
{
    display: block;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.contact-form input,
.contact-form textarea
{
    display: block;
    width: 100%;
    margin-top: 0.45rem;
    padding: 0.85rem 1.05rem;
    font: inherit;
    color: var(--ink);
    background-color: var(--panel);
    border: 1px solid var(--hair-strong);
    border-radius: 16px;
    transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.contact-form textarea { min-height: 9.5rem; resize: vertical; }

.contact-form input:focus,
.contact-form textarea:focus
{
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--glow);
}

.contact-form button[type="submit"]
{
    padding: 0.95rem 2rem;
    background-color: var(--primary-strong);
    color: var(--on-primary);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.96rem;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 12px 26px -14px color-mix(in oklab, var(--primary), transparent 35%);
    transition: transform 0.25s var(--ease), filter 0.25s var(--ease);
}
.contact-form button[type="submit"]:hover { transform: translateY(-2px); filter: brightness(1.03); }
.contact-form button[type="submit"]:disabled { opacity: 0.55; cursor: default; transform: none; }

.contact-form-status:not(:empty)
{
    padding: 0.85rem 1.05rem;
    background-color: var(--wash-card);
    border-radius: 14px;
    border-left: 3px solid var(--accent);
    font-size: 0.92rem;
}

/* ---- Map island ---- */
.map-island { border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--hair); box-shadow: var(--shadow-card); }
.map-island-placeholder { background: linear-gradient(140deg, var(--wash-blush), var(--wash-lilac)); }
.map-island-container { height: 460px; }

/* ---- Gallery + lightbox ---- */
.gallery-grid
{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
    gap: clamp(0.6rem, 1.2vw, 1.1rem);
}

.gallery-item
{
    position: relative;
    padding: 0;
    border: 0;
    border-radius: var(--radius-photo);
    background-color: var(--wash-card);
    cursor: zoom-in;
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--shadow-card);
}

.gallery-item img
{
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 0.6s var(--ease);
}
.gallery-item:hover img { transform: scale(1.05); }

body[data-photo-wash="true"] .gallery-item::after
{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: soft-light;
    background: linear-gradient(150deg, color-mix(in oklab, var(--primary), transparent 74%), transparent 60%);
}

.gallery-lightbox
{
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border: 0;
    padding: 0;
    background: transparent;
}
.gallery-lightbox[open] { display: flex; align-items: center; justify-content: center; }
.gallery-lightbox::backdrop { background: color-mix(in oklab, #2a2230, transparent 8%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.gallery-lightbox img { max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: 18px; }

.gallery-lightbox button
{
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    border: 0;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.9);
    color: #2e2730;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 22px -10px rgb(0 0 0 / 0.5);
    transition: transform 0.2s var(--ease);
}
.gallery-lightbox button:hover { transform: translateY(-50%) scale(1.08); }
.gallery-lightbox .gallery-lightbox-previous { left: 1.2rem; }
.gallery-lightbox .gallery-lightbox-next { right: 1.2rem; }
.gallery-lightbox .gallery-lightbox-close { top: 1.4rem; right: 1.2rem; transform: none; }
.gallery-lightbox .gallery-lightbox-close:hover { transform: scale(1.08); }

/* ---- Booking iframe ---- */
/* Transparent in both modes: the embedded booking module renders transparent and
   carries its own component backgrounds, so an opaque panel fill clashes (esp. dark). */
.booking-iframe { border-radius: var(--radius-card); background-color: transparent; border: 1px solid var(--hair); }

/* ---- Consent banner ---- */
.consent-banner
{
    position: fixed;
    inset-inline: 1rem;
    bottom: 1rem;
    z-index: 80;
    max-width: 32rem;
    margin-inline: auto;
    padding: 1.3rem 1.5rem;
    background-color: var(--panel);
    color: var(--ink);
    border: 1px solid var(--hair);
    border-radius: 22px;
    font-size: 0.94rem;
    box-shadow: var(--shadow-soft);
}
.consent-banner p { margin: 0 0 1rem; }
.consent-banner a { color: var(--accent); text-decoration: underline; }
.consent-banner-actions { display: flex; gap: 0.7rem; }

.consent-banner-actions button
{
    flex: 1;
    padding: 0.7rem 1rem;
    font: inherit;
    font-weight: 700;
    border-radius: 999px;
    border: 1px solid var(--hair-strong);
    background-color: var(--panel);
    color: var(--ink);
    cursor: pointer;
    transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.consent-banner-actions button[data-consent-action="accept"]
{
    background-color: var(--primary-strong);
    color: var(--on-primary);
    border-color: transparent;
}
.consent-banner-actions button:hover { border-color: var(--accent); }
.consent-banner-actions button[data-consent-action="accept"]:hover { filter: brightness(1.04); border-color: transparent; }

/* ================================================================== */
/* Generic sub-page scaffolding                                       */
/* ================================================================== */

.sheet { padding-block: clamp(3rem, 7vw, 6rem) var(--zone-space); }

.sheet-head { max-width: 46ch; margin-bottom: clamp(2.4rem, 5vw, 3.8rem); }
.sheet-head .label { margin-bottom: 1.3rem; }
.sheet-head h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); }
.sheet-lead { color: var(--muted); font-size: clamp(1.05rem, 1.6vw, 1.25rem); margin-top: 1.3rem; }