/* 3D jewelry configurator — resources/views/templates/basic/personaliser_bijoux.blade.php
 * Layout: brand bar, then a large 3D stage + step accordion (desktop: side panel with
 * its own scroll and a pinned action area; mobile: sticky stage on top, accordion
 * below, fixed action bar). Descriptive copy follows the configurator.
 * Identity: Groupe Lahlou GLK — shop typeface (Space Grotesk), warm ivory, dark
 * contrasted text, GLK gold #f0c962 as a sparing accent (fills and marks, never text).
 */

:root {
    --jc-bg: #fbf9f5;
    --jc-stage: #f5f1e9;          /* = viewer.js STAGE_BACKGROUND */
    --jc-paper: #ffffff;
    --jc-ink: #16140f;
    --jc-ink-soft: #3d382f;
    --jc-muted: #6a6356;          /* 5.7:1 on --jc-bg */
    --jc-line: #e7e0d3;
    --jc-line-strong: #cbbfa9;
    --jc-gold: #f0c962;           /* GLK gold: accent only */
    --jc-gold-press: #e3b543;
    --jc-font: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --jc-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --jc-radius: 4px;
    --jc-brand-h: 76px;
    --jc-panel-width: clamp(380px, 31vw, 460px);
    /* Mobile: the stage stays generous but always leaves room for the first steps. */
    --jc-stage-h: clamp(220px, 42svh, 380px);
    /* Real height of the action bar, measured by ui/layout.js (fallback before JS). */
    --jc-bar-h: 76px;
    --jc-gutter: 16px;
}

.jc-page {
    margin: 0;
    background: var(--jc-bg);
    color: var(--jc-ink);
    font: 400 15px/1.5 var(--jc-font);
    -webkit-font-smoothing: antialiased;
}

/* `hidden` must win over component display rules (buttons, tiles…). */
.jc-page [hidden] { display: none !important; }

.jc-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------- Brand bar ---------- */
.jc-brandbar {
    height: var(--jc-brand-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 max(clamp(16px, 2.4vw, 32px), env(safe-area-inset-right, 0px)) 0 max(clamp(16px, 2.4vw, 32px), env(safe-area-inset-left, 0px));
    border-bottom: 1px solid var(--jc-line);
    background: var(--jc-bg);
}
.jc-brandbar__logo { display: block; line-height: 0; border-radius: var(--jc-radius); }
.jc-brandbar__logo img { width: 64px; height: 64px; object-fit: contain; }
.jc-brandbar__nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); font-size: 0.875rem; font-weight: 500; }
.jc-brandbar__nav a,
.jc-about a {
    color: var(--jc-ink);
    text-decoration: underline;
    text-decoration-color: var(--jc-gold);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
    transition: text-decoration-color 200ms ease;
}
.jc-brandbar__nav a:hover,
.jc-about a:hover { text-decoration-color: var(--jc-ink); }
.jc-brandbar a:focus-visible,
.jc-about a:focus-visible { outline: 2px solid var(--jc-ink); outline-offset: 3px; }

/* ---------- Layout ---------- */
.jc-layout {
    height: calc(100dvh - var(--jc-brand-h));
    min-height: 520px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--jc-panel-width);
}

/* ---------- Stage ---------- */
.jc-stage {
    position: relative;
    min-height: 0;
    overflow: hidden;
    background: var(--jc-stage);
}
.jc-stage:fullscreen { width: 100%; height: 100%; }
.jc-canvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none; /* OrbitControls handles rotate / pinch-zoom */
    cursor: grab;
}
.jc-canvas:active { cursor: grabbing; }

.jc-stage__hint {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    margin: 0;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgb(22 20 15 / 0.72);
    color: #fff;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    max-width: calc(100% - 32px);
    width: max-content;
    text-align: center;
    pointer-events: none;
    transition: opacity 400ms ease;
}
/* Gone once used, or after a few seconds on its own. */
.has-interacted .jc-stage__hint { opacity: 0; }
.is-ready .jc-stage__hint { animation: jc-hint-out 600ms ease 6s forwards; }
@keyframes jc-hint-out { to { opacity: 0; } }

.jc-toolbar {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.jc-tool {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--jc-line);
    border-radius: 50%;
    background: rgb(255 255 255 / 0.82);
    color: var(--jc-ink);
    cursor: pointer;
    box-shadow: 0 2px 8px rgb(22 20 15 / 0.06);
    transition: border-color 200ms ease, background-color 200ms ease;
}
.jc-tool svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.jc-tool:hover { border-color: var(--jc-line-strong); background: #fff; }
.jc-tool:focus-visible { outline: 2px solid var(--jc-ink); outline-offset: 2px; }
.jc-modes { display: flex; gap: 6px; }
.jc-mode {
    border: 1px solid var(--jc-line);
    border-radius: 999px;
    background: rgb(255 255 255 / 0.82);
    color: var(--jc-ink);
    font: 500 0.75rem/1 var(--jc-font);
    padding: 8px 12px;
    cursor: pointer;
}
.jc-mode[aria-pressed="true"] { border-color: var(--jc-ink); }

/* ---------- Panel ---------- */
.jc-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-left: 1px solid var(--jc-line);
    background: var(--jc-bg);
}
.jc-panel__scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 28px clamp(20px, 2.2vw, 32px) 16px;
}
.jc-panel__intro { display: grid; gap: 6px; margin-bottom: 22px; }
.jc-panel__eyebrow {
    margin: 0;
    color: var(--jc-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.jc-panel__title { margin: 0; font-size: 1.875rem; font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
.jc-panel__actions { border-top: 1px solid var(--jc-line); background: var(--jc-paper); }

/* ---------- Steps (accordion) ---------- */
.jc-steps__list { border-top: 1px solid var(--jc-line); }
.jc-step { border-bottom: 1px solid var(--jc-line); }
.jc-step__heading { margin: 0; font: inherit; }
.jc-step__header {
    width: 100%;
    min-height: 56px;
    display: grid;
    grid-template-columns: 26px minmax(0, auto) minmax(0, 1fr) 12px;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border: 0;
    background: transparent;
    color: var(--jc-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.jc-step__number {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 1px solid var(--jc-line-strong);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--jc-ink-soft);
    transition: background-color 200ms ease, border-color 200ms ease;
}
.jc-step.is-open .jc-step__number { background: var(--jc-gold); border-color: var(--jc-gold); color: var(--jc-ink); }
.jc-step__title { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.jc-step__value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--jc-ink-soft);
    font-size: 0.875rem;
    text-align: right;
}
.jc-step[data-state="unavailable"] .jc-step__value { color: var(--jc-muted); }
.jc-step__chevron {
    width: 8px;
    height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 280ms var(--jc-ease);
    justify-self: end;
}
.jc-step.is-open .jc-step__chevron { transform: translateY(2px) rotate(-135deg); }
.jc-step__header:hover .jc-step__number { border-color: var(--jc-ink-soft); }
.jc-step__header:focus-visible { outline: 2px solid var(--jc-ink); outline-offset: 2px; border-radius: var(--jc-radius); }

/* No height animation: the layout is final at once (the opened step can be
   scrolled into view reliably), only the content fades in. */
.jc-step__panel { display: none; }
.jc-step.is-open .jc-step__panel { display: block; }
.jc-step.is-open .jc-step__inner { animation: jc-fade-in 260ms var(--jc-ease); }
@keyframes jc-fade-in { from { opacity: 0; transform: translateY(-4px); } }
.jc-step__inner > * { margin: 2px 0 22px; }
.jc-step__text { color: var(--jc-ink-soft); font-size: 0.875rem; max-width: 60ch; }
.jc-step__text--unavailable { color: var(--jc-muted); }

/* ---------- Option tiles ---------- */
.jc-options { margin: 0; padding: 0; border: 0; min-width: 0; }
.jc-tiles {
    --jc-cols: 4;
    display: grid;
    grid-template-columns: repeat(var(--jc-cols), minmax(0, 1fr));
    gap: 10px;
}
.jc-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 6px 12px;
    border: 1px solid var(--jc-line);
    border-radius: var(--jc-radius);
    background: var(--jc-paper);
    color: var(--jc-ink);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms var(--jc-ease);
}
.jc-tile__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.jc-tile__name { font-size: 0.8125rem; font-weight: 500; line-height: 1.25; }
.jc-tile__meta { font-size: 0.75rem; color: var(--jc-muted); }
.jc-tile:hover { border-color: var(--jc-line-strong); box-shadow: 0 6px 16px rgb(22 20 15 / 0.06); transform: translateY(-1px); }
/* Selected: dark double border + gold check (state never carried by colour alone). */
.jc-tile:has(.jc-tile__input:checked),
.jc-tile.is-current { border-color: var(--jc-ink); box-shadow: inset 0 0 0 1px var(--jc-ink); }
.jc-tile__input:checked ~ .jc-tile__name { font-weight: 600; }
.jc-tile__check {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--jc-gold);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 200ms ease, transform 200ms var(--jc-ease);
}
.jc-tile__check::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 3.5px;
    width: 4px;
    height: 8px;
    border-right: 1.75px solid var(--jc-ink);
    border-bottom: 1.75px solid var(--jc-ink);
    transform: rotate(45deg);
}
.jc-tile__input:checked ~ .jc-tile__check { opacity: 1; transform: none; }
.jc-tile:has(.jc-tile__input:focus-visible),
.jc-tile--model:focus-visible { outline: 2px solid var(--jc-ink); outline-offset: 3px; }
.jc-tile:active { transform: scale(0.98); }
.jc-options:disabled .jc-tile { cursor: default; }

.jc-tile.is-unavailable { cursor: not-allowed; opacity: 0.45; }
.jc-tile.is-unavailable:hover { border-color: var(--jc-line); box-shadow: none; transform: none; }
.jc-tile.is-unavailable .jc-tile__name { text-decoration: line-through; }
.jc-options__note { margin: 10px 0 0; color: var(--jc-muted); font-size: 0.8125rem; }

/* Swatches: renders from our engine (tools/3d/swatches), CSS chip as fallback. */
.jc-tile__swatch { width: 52px; height: 52px; display: grid; place-items: center; }
.jc-tile__image { width: 52px; height: 52px; object-fit: contain; }
.jc-tile__chip {
    --swatch: #cccccc;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, rgb(255 255 255 / 0.9) 0 10%, transparent 40%), var(--swatch);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1);
}

/* "Same as the centre stone": full row, before the stones it summarises. */
.jc-tile--follows {
    grid-column: 1 / -1;
    order: -1;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 8px 40px 8px 10px;
    text-align: left;
}
.jc-tile--follows .jc-tile__swatch,
.jc-tile--follows .jc-tile__image { width: 40px; height: 40px; }
.jc-tile--follows .jc-tile__check { top: 50%; right: 12px; margin-top: -9px; }

.jc-tiles--models { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.jc-tile--model { align-items: flex-start; gap: 4px; padding: 14px 16px; text-align: left; }
.jc-tile--model .jc-tile__name { font-size: 1rem; font-weight: 500; }

/* ---------- Ring size ---------- */
.jc-sizes { display: grid; gap: 12px; }
.jc-sizes__set { display: grid; gap: 10px; }
.jc-sizes__notice {
    margin: 0;
    padding: 10px 12px;
    border-left: 3px solid var(--jc-gold);
    background: var(--jc-paper);
    color: var(--jc-ink-soft);
    font-size: 0.8125rem;
}
.jc-sizes__grid { --jc-size-cols: 7; --jc-size-cols-narrow: 5; display: grid; grid-template-columns: repeat(var(--jc-size-cols), minmax(0, 1fr)); gap: 8px; }
@media (max-width: 399px) { .jc-sizes__grid { grid-template-columns: repeat(var(--jc-size-cols-narrow), minmax(0, 1fr)); gap: 6px; } }
.jc-size {
    position: relative;
    min-height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid var(--jc-line);
    border-radius: var(--jc-radius);
    background: var(--jc-paper);
    cursor: pointer;
    transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}
.jc-size__value { font-size: 1rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.jc-size:hover { border-color: var(--jc-line-strong); }
/* Selected: dark double border + gold fill (state never carried by colour alone). */
.jc-size:has(.jc-tile__input:checked) { border-color: var(--jc-ink); box-shadow: inset 0 0 0 1px var(--jc-ink); background: var(--jc-gold); }
.jc-size:has(.jc-tile__input:checked) .jc-size__value { font-weight: 600; }
.jc-size:has(.jc-tile__input:focus-visible) { outline: 2px solid var(--jc-ink); outline-offset: 3px; }
.jc-tile--unknown {
    flex-direction: row;
    justify-content: flex-start;
    padding: 12px 40px 12px 14px;
    text-align: left;
}
.jc-tile__text { display: grid; gap: 2px; }
.jc-tile--unknown .jc-tile__check { top: 50%; right: 12px; margin-top: -9px; }
.jc-sizes__status { margin: 0; font-size: 0.8125rem; font-weight: 500; color: var(--jc-ink-soft); }
.jc-sizes__status.is-pending { color: var(--jc-muted); font-weight: 400; }
.jc-sizes__help { font-size: 0.8125rem; color: var(--jc-ink-soft); }
.jc-sizes__help summary {
    cursor: pointer;
    font-weight: 500;
    color: var(--jc-ink);
    text-decoration: underline;
    text-decoration-color: var(--jc-gold);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
.jc-sizes__help summary:focus-visible { outline: 2px solid var(--jc-ink); outline-offset: 2px; }
.jc-sizes__help ol { margin: 10px 0 8px; padding-left: 1.2em; display: grid; gap: 4px; }
.jc-sizes__help p { margin: 0; color: var(--jc-muted); }

/* ---------- Summary ---------- */
.jc-summary { display: grid; gap: 14px; }
.jc-summary__list { margin: 0; border: 1px solid var(--jc-line); border-radius: var(--jc-radius); background: var(--jc-paper); }
.jc-summary__row { display: grid; gap: 2px; padding: 12px 14px; }
.jc-summary__row + .jc-summary__row { border-top: 1px solid var(--jc-line); }
.jc-summary__term { color: var(--jc-muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.jc-summary__value { margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 0.9375rem; font-weight: 500; }
.jc-summary__row.is-muted .jc-summary__value { color: var(--jc-muted); font-weight: 400; }
.jc-summary__edit {
    flex: none;
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--jc-ink);
    font: 500 0.8125rem/1.2 var(--jc-font);
    text-decoration: underline;
    text-decoration-color: var(--jc-gold);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    cursor: pointer;
}
.jc-summary__edit:hover { text-decoration-color: var(--jc-ink); }
.jc-summary__edit:focus-visible { outline: 2px solid var(--jc-ink); outline-offset: 2px; }
.jc-summary__link { width: 100%; padding: 8px 10px; border: 1px solid var(--jc-line); border-radius: var(--jc-radius); font: 0.8125rem/1.3 var(--jc-font); }
.jc-summary__status { min-height: 1.2em; margin: 0; color: var(--jc-ink-soft); font-size: 0.8125rem; }
.jc-summary__status:empty { min-height: 0; }
.jc-summary__note { margin: 0; color: var(--jc-muted); font-size: 0.8125rem; }

/* ---------- Buttons & action bar ---------- */
.jc-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid var(--jc-ink);
    border-radius: 999px;
    font: 600 0.875rem/1.1 var(--jc-font);
    letter-spacing: 0.01em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
/* The one strong gold surface of the page: GLK gold with dark text (12:1). */
.jc-button--primary { background: var(--jc-gold); border-color: var(--jc-gold); color: var(--jc-ink); }
.jc-button--primary:hover { background: var(--jc-gold-press); border-color: var(--jc-gold-press); box-shadow: 0 6px 16px rgb(201 154 46 / 0.25); }
.jc-button--ghost { background: transparent; color: var(--jc-ink); border-color: var(--jc-line-strong); }
.jc-button--ghost:hover { border-color: var(--jc-ink); }
.jc-button:focus-visible { outline: 2px solid var(--jc-ink); outline-offset: 3px; }
.jc-button:disabled { opacity: 0.5; cursor: default; }
.jc-summary .jc-button { width: 100%; }

.jc-actionbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px clamp(20px, 2.2vw, 32px);
}
.jc-actionbar__price { display: grid; gap: 2px; margin: 0; min-width: 0; }
.jc-actionbar__label { color: var(--jc-muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.jc-actionbar__value { font-size: 1rem; font-weight: 500; white-space: nowrap; }
.jc-actionbar__action { flex: none; max-width: 62%; white-space: nowrap; }
.jc-actionbar__detail { white-space: pre; }
/* Narrow bars: "Continuer" alone on screen, the step name kept for screen readers. */
@media (max-width: 480px) {
    .jc-actionbar__detail { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* ---------- Loader (over the stage only) ---------- */
.jc-loader {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: var(--jc-stage);
    color: var(--jc-ink);
    text-align: center;
    padding: 16px;
    transition: opacity 600ms ease;
}
.jc-loader.is-hidden { opacity: 0; pointer-events: none; }
.jc-loader__spinner {
    width: 44px;
    height: 44px;
    border: 3px solid var(--jc-line);
    border-top-color: var(--jc-gold-press);
    border-radius: 50%;
    animation: jc-spin 1s linear infinite;
}
.jc-loader__text { margin: 0; font-size: 0.9375rem; }
@keyframes jc-spin { to { transform: rotate(360deg); } }

/* ---------- About (descriptive copy) ---------- */
.jc-about {
    max-width: 720px;
    margin: 0 auto;
    padding: 56px var(--jc-gutter) 64px;
    display: grid;
    gap: 12px;
}
.jc-about h2 { margin: 0; font-size: 1.375rem; font-weight: 500; letter-spacing: -0.01em; }
.jc-about p { margin: 0; color: var(--jc-ink-soft); }
.jc-about__links { display: flex; flex-wrap: wrap; gap: 8px 24px; font-weight: 500; }

/* ---------- Tablet & mobile ---------- */
@media (max-width: 900px) {
    :root { --jc-brand-h: 60px; }
    .jc-page {
        /* room for the fixed action bar (its real height): the last content is never hidden */
        padding-bottom: var(--jc-bar-h);
    }
    /* Anything scrolled into view (an opened step, keyboard focus) stays clear of the
       sticky stage above and the fixed bar below (WCAG 2.4.11). */
    html {
        scroll-padding-top: calc(var(--jc-stage-h) + env(safe-area-inset-top, 0px) + 8px);
        scroll-padding-bottom: calc(var(--jc-bar-h) + 8px);
    }
    .jc-brandbar__logo img { width: 52px; height: 52px; }
    .jc-brandbar__nav { font-size: 0.8125rem; }

    .jc-layout { display: block; height: auto; min-height: 0; }
    .jc-stage {
        position: sticky;
        top: 0;
        z-index: 3;
        height: calc(var(--jc-stage-h) + env(safe-area-inset-top, 0px));
        /* the stage colour covers the status bar area once the page scrolls under it */
        border-top: env(safe-area-inset-top, 0px) solid var(--jc-stage);
        box-sizing: border-box;
        box-shadow: 0 1px 0 var(--jc-line);
    }
    .jc-tool { width: 44px; height: 44px; }

    .jc-panel { border-left: 0; }
    .jc-panel__scroll {
        overflow: visible;
        padding: 18px max(var(--jc-gutter), env(safe-area-inset-right, 0px)) 8px max(var(--jc-gutter), env(safe-area-inset-left, 0px));
    }
    .jc-panel__intro { gap: 2px; margin-bottom: 14px; }
    .jc-panel__title { font-size: 1.5rem; }
    .jc-step__header { min-height: 52px; padding: 12px 0; }

    .jc-tiles { gap: 8px; }
    .jc-tile { padding: 12px 4px 10px; min-height: 44px; }

    .jc-panel__actions {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 5;
        box-shadow: 0 -8px 24px rgb(22 20 15 / 0.08);
    }
    .jc-actionbar {
        padding: 12px max(var(--jc-gutter), env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(var(--jc-gutter), env(safe-area-inset-left, 0px));
    }
    .jc-about { padding-top: 40px; }
}

/* Short screens (e.g. 320 x 640, landscape phones): a smaller stage keeps the steps reachable. */
@media (max-width: 900px) and (max-height: 700px) {
    :root { --jc-stage-h: clamp(190px, 36svh, 300px); }
    .jc-panel__scroll { padding-top: 14px; }
    .jc-panel__intro { margin-bottom: 10px; }
    .jc-panel__title { font-size: 1.3rem; }
}

/* Phones in landscape wider than 900 px keep the side-by-side layout, sized to the
   screen so the action bar stays visible without a page scroll. */
@media (min-width: 901px) and (max-height: 600px) {
    :root { --jc-brand-h: 52px; }
    .jc-brandbar__logo img { width: 44px; height: 44px; }
    .jc-layout { min-height: 0; }
    .jc-panel__scroll { padding-top: 16px; }
    .jc-panel__intro { margin-bottom: 12px; }
    .jc-panel__title { font-size: 1.4rem; }
}

@media (max-width: 380px) {
    .jc-brandbar__nav { gap: 12px; }
    .jc-brandbar__nav a:first-child { display: none; } /* "Nos bagues" stays in the about section */
    .jc-actionbar { gap: 10px; }
    .jc-actionbar__value { font-size: 0.9375rem; }
    .jc-actionbar__action { padding: 0 16px; font-size: 0.8125rem; }
    .jc-tiles { gap: 6px; }
    .jc-tile { padding: 10px 2px 9px; gap: 6px; }
    .jc-tile__swatch, .jc-tile__image { width: 44px; height: 44px; }
    .jc-tile__name { font-size: 0.75rem; }
    .jc-tile__check { top: 4px; right: 4px; }
    .jc-step__title { letter-spacing: 0.06em; }
    /* The gesture hint would cover the jewel on very small screens. */
    .jc-stage__hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .jc-step__chevron, .jc-tile, .jc-tile__check, .jc-size, .jc-loader, .jc-stage__hint, .jc-step__number { transition: none; }
    .jc-step.is-open .jc-step__inner, .is-ready .jc-stage__hint { animation: none; }
    .jc-loader__spinner { animation-duration: 3s; }
}

/* Size set aside on another model, offered back (phase 4 fix). */
.jc-sizes__restore { margin: 0; font-size: 0.8125rem; color: var(--jc-ink-soft); }
.jc-sizes__restore-button {
    padding: 2px 0;
    border: 0;
    background: none;
    color: var(--jc-ink);
    font: 600 0.8125rem/1.3 var(--jc-font);
    text-decoration: underline;
    text-decoration-color: var(--jc-gold);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    cursor: pointer;
}
.jc-sizes__restore-button:hover { text-decoration-color: var(--jc-ink); }
.jc-sizes__restore-button:focus-visible { outline: 2px solid var(--jc-ink); outline-offset: 2px; }

/* ---------- Model switch (phase 5A) ---------- */
/* The previous model stays visible, dimmed, while the next one loads; it comes back
   with a CSS transition (no WebGL render loop). */
.jc-canvas { transition: opacity 250ms ease; }
.is-switching .jc-canvas { opacity: 0.45; }
.jc-switching {
    position: absolute;
    left: 50%;
    bottom: 64px;
    z-index: 2;
    width: min(260px, calc(100% - 32px));
    transform: translateX(-50%);
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    border-radius: var(--jc-radius);
    background: rgb(255 255 255 / 0.92);
    box-shadow: 0 6px 20px rgb(22 20 15 / 0.08);
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 500;
}
.jc-switching__bar { --progress: 0; position: relative; height: 3px; border-radius: 2px; background: var(--jc-line); overflow: hidden; }
.jc-switching__bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--jc-gold-press);
    transform-origin: left;
    transform: scaleX(var(--progress));
    transition: transform 200ms ease;
}
.jc-switch-error {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 64px;
    z-index: 3;
    max-width: 420px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 14px 16px;
    border-left: 3px solid var(--jc-gold);
    border-radius: var(--jc-radius);
    background: var(--jc-paper);
    box-shadow: 0 8px 24px rgb(22 20 15 / 0.12);
    font-size: 0.875rem;
}
.jc-switch-error p { margin: 0; flex: 1 1 100%; }
.jc-switch-error .jc-button { min-height: 44px; }
.jc-switch-error__close {
    min-height: 44px;
    padding: 0 6px;
    border: 0;
    background: none;
    color: var(--jc-ink-soft);
    font: 500 0.8125rem/1 var(--jc-font);
    text-decoration: underline;
    cursor: pointer;
}
.jc-steps.is-busy { opacity: 0.6; transition: opacity 200ms ease; }
.jc-adjustments {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-left: 3px solid var(--jc-gold);
    background: var(--jc-paper);
    color: var(--jc-ink-soft);
    font-size: 0.8125rem;
    display: grid;
    gap: 4px;
}
.jc-adjustments p { margin: 0; }
@media (prefers-reduced-motion: reduce) {
    .jc-canvas, .jc-switching__bar::after, .jc-steps.is-busy { transition: none; }
}

/* No commercial model can be served (a GLB is missing): the page says so, with no viewer. */
.jc-unavailable {
    max-width: 44rem;
    margin: 0 auto;
    padding: clamp(3rem, 10vh, 7rem) var(--jc-gutter, 1.25rem);
    display: grid;
    gap: 1.25rem;
    justify-items: start;
}

.jc-unavailable__title { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); margin: 0; }

.jc-unavailable__message { margin: 0; color: var(--jc-ink-soft); font-size: 1.0625rem; }

.jc-unavailable__links { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0.5rem 0 0; }