/* The Residence's chrome, crest-voland issues #67 (desktop), #68 (phone), #69 (tablet), 2026-10-23.
   residence-shell.js sets <html data-layout="desktop|rail|sheet">, <html data-card="reduced|summary|
   detailed">, <html data-nav="open|closed"> and <html data-section>; main.js sets <html data-scale>.
   What is the Residence's alone (the scene, the camera toolbar, the gesture hint, a panorama) is scoped
   under html[data-current-scale="residence"]; the sections, the card and its sheet serve every scale
   (html[data-current-scale]) since 2026-10-23, when the maps took the same chrome. The HEADER is
   restyled at every scale, since it is the same element. Loaded last (index.html): it restates rules the shared sheets set.
   Colours are the --warm-* roles with the old greys as fallback (CLAUDE.md, Explorer branding), so a
   residence without the warm palette keeps its own look. */

:root {
  --nav-w-open: 244px;
  --nav-w-closed: 76px;
  --rs-paper: var(--warm-paper, #ffffff);
  --rs-bg: var(--warm-bg, #f1f1f1);
  --rs-sand: var(--warm-sand, #e6e6e6);
  --rs-line: var(--warm-line, rgba(0,0,0,.12));
  --rs-ink: var(--warm-ink, #111111);
  --rs-muted: var(--warm-muted, #5e5e5e);
  --rs-taupe: var(--warm-taupe, #8d8d8d);
  --rs-title: var(--brand-title-font, inherit);
}

/* ================================================================ header (every scale) */

header {
  background: var(--rs-paper); border-bottom: 1px solid var(--rs-line);
  backdrop-filter: none; gap: 18px;
}
.brand-mark {
  flex: 0 0 auto; display: flex; align-items: center; min-width: 0;
  font-family: var(--rs-title); font-weight: 700; font-size: 30px; letter-spacing: .14em;
  line-height: 1; color: var(--rs-ink); user-select: none;
}
.brand-mark[hidden] { display: none; }
.brand-mark img { display: block; height: 34px; width: auto; }
/* The scale nav: words, not pills. The active one is darker, with a short red line under it. */
header nav button, header nav button.active {
  position: relative; background: transparent; color: var(--rs-muted); border-radius: 6px;
  font-size: 15px; padding: 10px 16px;
}
header nav button:hover { color: var(--rs-ink); }
header nav button.active { color: var(--rs-ink); font-weight: 600; }
header nav button.active::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 2px; height: 2px;
  border-radius: 2px; background: var(--accent);
}
header nav button:focus-visible { outline: 2px solid var(--rs-ink); outline-offset: 2px; }
/* The season: two icons in one soft segment, the chosen one on white. Labels for a screen reader. */
header .season {
  order: 3; margin: 0 0 0 auto; padding: 3px; gap: 2px; border: 0; border-radius: 10px; background: var(--rs-sand);
}
header .season button, header .season button.active {
  width: 40px; height: 36px; padding: 0; justify-content: center; border-radius: 8px;
  background: transparent; color: var(--rs-muted);
}
header .season button.active { background: var(--rs-paper); color: var(--rs-ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
header .season button:focus-visible { outline: 2px solid var(--rs-ink); outline-offset: 1px; }
.season-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
header .lang { order: 4; }
/* The language: one segment of short codes in the season's style, the chosen one on white (crest-voland issue #98, « the
   language selector is the basic one, make sure it is in line with the charte graphique »). main.js draws it from the
   offered locales and keeps the hidden #locale select as the value the page reads. */
.lang-switch { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--rs-sand); }
.lang-switch button, #residenceNav .lang-switch button {
  display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 40px; height: 34px; min-height: 0;
  margin: 0; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--rs-muted);
  font-family: var(--rs-title); font-size: 13px; font-weight: 600; letter-spacing: .08em; cursor: pointer;
}
.lang-switch button:hover, #residenceNav .lang-switch button:hover { background: transparent; color: var(--rs-ink); }
.lang-switch button[aria-pressed="true"], #residenceNav .lang-switch button[aria-pressed="true"] {
  background: var(--rs-paper); color: var(--rs-ink); box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.lang-switch button:focus-visible { outline: 2px solid var(--rs-ink); outline-offset: 1px; }
#contactBtn { order: 5; border: 0; background: transparent; color: var(--rs-ink); padding: 8px 10px; }
#contactBtn:hover { border: 0; background: var(--rs-bg); }
.header-menu .menu-contact { display: none; }
/* « Rejouer le billet » (#81): an icon beside Contact in a wide header; its label names it for a screen reader. */
.menu-ticket[hidden] { display: none !important; }
.header-menu .menu-ticket {
  order: 5; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 10px; background: transparent; color: var(--rs-ink); cursor: pointer;
}
.header-menu .menu-ticket:hover { background: var(--rs-bg); }
.header-menu .menu-ticket:focus-visible { outline: 2px solid var(--rs-ink); outline-offset: 1px; }
.menu-ticket-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
header nav { order: 2; }
.brand-mark { order: 0; }
#menuToggle { order: 6; }

/* The phone, and a tablet held upright (#68, #69): the mark, the season, and a menu button that
   opens the scales, the language and Contact. */
html[data-layout="sheet"] header {
  height: var(--header-h); padding: 8px max(12px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
  align-items: center; gap: 10px;
}
html[data-layout="sheet"] { --header-h: 64px; }
html[data-layout="sheet"] .brand-mark { font-size: 26px; }
/* No menu button up there since #101: its menu is the dock at the bottom of the screen (below). */
html[data-layout="sheet"] #menuToggle { display: none; }
html[data-layout="sheet"] header[data-menu="open"] #menuToggle { background: var(--rs-sand); color: var(--rs-ink); }
html[data-layout="sheet"] #menuToggle .chevron, html[data-layout="sheet"] #menuMeta { display: none; }
html[data-layout="sheet"] #contactBtn { display: none; }
html[data-layout="sheet"] .header-menu {
  display: none; position: absolute; top: calc(100% + 6px); left: auto; right: 10px; width: min(340px, calc(100vw - 20px));
  flex-direction: column; gap: 12px; padding: 14px; z-index: 61;
  background: var(--rs-paper); border: 1px solid var(--rs-line); border-radius: 18px; box-shadow: 0 18px 50px rgba(0,0,0,.18);
}
html[data-layout="sheet"] header[data-menu="open"] { z-index: 60; }
html[data-layout="sheet"] header[data-menu="open"] .header-menu { display: flex; }
html[data-layout="sheet"] .header-menu nav { position: static; margin: 0; display: flex; flex-direction: column; gap: 2px; }
html[data-layout="sheet"] .header-menu nav button, html[data-layout="sheet"] .header-menu nav button.active {
  min-height: 46px; text-align: left; padding: 10px 12px; border: 0; background: transparent; font-size: 16px;
}
html[data-layout="sheet"] .header-menu nav button.active { background: var(--rs-bg); }
html[data-layout="sheet"] .header-menu nav button.active::after { left: 12px; right: auto; width: 28px; bottom: 6px; }
html[data-layout="sheet"] .header-menu .lang-switch { display: flex; width: 100%; }
html[data-layout="sheet"] .header-menu .lang-switch button { flex: 1 1 0; height: 40px; }
html[data-layout="sheet"] .header-menu .menu-ticket {
  width: auto; height: auto; justify-content: flex-start; gap: 10px; min-height: 46px; padding: 10px 12px;
  border: 1px solid var(--rs-line); border-radius: 12px; background: var(--rs-paper); font: inherit; font-size: 15px;
}
html[data-layout="sheet"] .menu-ticket-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
html[data-layout="sheet"] .header-menu .menu-contact {
  display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 10px 12px;
  border: 1px solid var(--rs-line); border-radius: 12px; background: var(--rs-paper); color: var(--rs-ink); font: inherit; font-size: 15px; cursor: pointer;
}
html[data-layout="sheet"] header .season { margin-left: auto; }

/* ---------------------------------------------------------------- the phone's dock (crest-voland issue #101)

   « On phones, accessing the top menu is very hard, let's regroup everything down for easy access and make the selected
   page more visible, currently it's very grey. » On a sheet the header's menu is a bar at the bottom: the three scales as
   tabs, the open one in ink on a dark pill with the red dash, the others muted; « menu » opens the language, the ticket
   and Contact above the bar (residence-shell.js moves them there). The page above stops at the bar: .shell and the sheet
   end at --dock-h, so everything placed against the sheet (the camera toolbar, the compare bar, the maps' padding) keeps
   its arithmetic. */
#phoneDock { display: none; }
html[data-layout="sheet"] { --dock-h: calc(64px + env(safe-area-inset-bottom)); }
html[data-layout="sheet"] .shell { bottom: var(--dock-h); }
html[data-layout="sheet"] #phoneDock {
  display: block; position: fixed; z-index: 21; left: 0; right: 0; bottom: 0; height: var(--dock-h);
  padding: 0 max(6px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(6px, env(safe-area-inset-left));
  background: var(--rs-paper); border-top: 1px solid var(--rs-line); box-shadow: 0 -4px 18px rgba(35,31,30,.08);
}
#phoneDock .dock-tabs { display: flex; align-items: stretch; height: 64px; max-width: 640px; margin: 0 auto; }
#phoneDock .dock-tab {
  /* Sized by their names first (« crest-voland » is the longest), then the rest shared out: no name is cut at 320px. */
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  margin: 0; padding: 6px 2px 5px; border: 0; border-radius: 0; background: transparent; color: var(--rs-muted);
  font: inherit; font-family: var(--rs-title); font-size: 12.5px; font-weight: 500; line-height: 1.1; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#phoneDock .dock-ico { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 30px; border-radius: 15px; transition: background-color .2s, color .2s; }
#phoneDock .dock-ico svg { stroke-width: 1.8; }
#phoneDock .dock-label { position: relative; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-bottom: 3px; }
#phoneDock .dock-tab.active { color: var(--rs-ink); font-weight: 700; }
#phoneDock .dock-tab.active .dock-ico { background: var(--rs-ink); color: var(--rs-paper); }
#phoneDock .dock-tab.active .dock-label::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 18px; height: 2px; margin-left: -9px; border-radius: 2px; background: var(--accent);
}
#phoneDock .dock-more[aria-expanded="true"] { color: var(--rs-ink); }
#phoneDock .dock-more[aria-expanded="true"] .dock-ico { background: var(--rs-sand); }
#phoneDock .dock-tab:focus-visible { outline: 2px solid var(--rs-ink); outline-offset: -4px; border-radius: 12px; }
/* The menu: above the bar, on the right, the thumb's side. */
#phoneDock .dock-menu {
  position: absolute; right: max(10px, env(safe-area-inset-right)); bottom: calc(100% + 8px); width: min(340px, calc(100vw - 20px));
  display: flex; flex-direction: column; gap: 10px; padding: 14px;
  background: var(--rs-paper); border: 1px solid var(--rs-line); border-radius: 18px; box-shadow: 0 -12px 40px rgba(0,0,0,.18);
}
#phoneDock .dock-menu[hidden] { display: none; }
#phoneDock .lang { order: 1; display: block; }
#phoneDock .lang-switch { display: flex; width: 100%; }
#phoneDock .lang-switch button { flex: 1 1 0; height: 44px; }
#phoneDock .menu-ticket, #phoneDock .menu-contact {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; height: auto; min-height: 48px;
  margin: 0; padding: 10px 12px; border: 1px solid var(--rs-line); border-radius: 12px; background: var(--rs-paper); color: var(--rs-ink);
  font: inherit; font-size: 15px; text-align: left; cursor: pointer;
}
#phoneDock .menu-ticket { order: 2; }
#phoneDock .menu-ticket[hidden] { display: none; }
#phoneDock .menu-contact { order: 3; background: var(--rs-ink); border-color: var(--rs-ink); color: var(--rs-paper); font-weight: 600; }
#phoneDock .menu-ticket-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
html[data-features-off~="languages"] #phoneDock .lang { display: none !important; }
/* The audience notice rises above the bar instead of covering it. */
html[data-layout="sheet"] .link-notice { bottom: calc(var(--dock-h) + 8px); }
html[data-layout="sheet"] header .season button { width: 44px; height: 38px; }

/* ================================================================ the Residence */

/* The sections and the card serve every scale since 2026-10-23 (the maps' themes and modes): only the
   camera toolbar and the gesture hint are the Residence's alone. */
html:not([data-current-scale]) #residenceNav,
html:not([data-current-scale]) #sectionChooser,
html:not([data-current-scale="residence"]) #sceneTools,
html:not([data-current-scale="residence"]) #gestureHint { display: none !important; }

/* The sections replace the panel-size buttons, on the maps too: the card's own states do their job. */
html[data-current-scale] #panelSize,
html[data-current-scale] #panelShow { display: none !important; }

html[data-current-scale] { --nav-w: var(--nav-w-open); }
/* --panel-w / --panel-gap make --panel-edge (responsive.css), which the plan viewer stops at when the
   card is shown beside it: the card's own width and margin here. */
html[data-current-scale] { --panel-w: 400px; --panel-gap: 18px; }
html[data-current-scale][data-layout="rail"] { --panel-w: 340px; --panel-gap: 14px; }
html[data-current-scale][data-layout="rail"][data-card="detailed"] { --panel-w: 390px; }
@media (min-width: 1680px) { html[data-current-scale][data-layout="desktop"] { --panel-w: 440px; } }
html[data-current-scale][data-nav="closed"] { --nav-w: var(--nav-w-closed); }
html[data-current-scale][data-layout="sheet"] { --nav-w: 0px; }

/* ---------------------------------------------------------------- sidebar / rail */

#residenceNav {
  position: absolute; z-index: 14; left: 0; top: 0; bottom: 0; width: var(--nav-w);
  display: flex; flex-direction: column; justify-content: space-between; gap: 8px;
  padding: 18px 12px 14px; background: var(--rs-paper); border-right: 1px solid var(--rs-line);
  overflow: hidden auto; transition: width .25s ease;
}
html[data-layout="sheet"] #residenceNav { display: none; }
#residenceNav .sec-list { display: flex; flex-direction: column; gap: 6px; }
#residenceNav button {
  position: relative; display: flex; align-items: center; gap: 16px; min-height: 56px; width: 100%;
  padding: 8px 14px; border: 0; border-radius: 12px; background: transparent; color: var(--rs-ink);
  font: inherit; font-size: 16px; text-align: left; cursor: pointer; white-space: nowrap;
}
#residenceNav button:hover { background: var(--rs-bg); }
#residenceNav button.active { background: var(--rs-sand); font-weight: 600; }
#residenceNav button.active::before {
  content: ""; position: absolute; left: -12px; top: 22%; bottom: 22%; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent);
}
#residenceNav button:focus-visible { outline: 2px solid var(--rs-ink); outline-offset: -2px; }
#residenceNav .sec-ico { display: inline-flex; flex: 0 0 auto; width: 24px; justify-content: center; }
#residenceNav .sec-ico svg { stroke-width: 1.6; }
html[data-nav="closed"] #residenceNav .sec-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
html[data-nav="closed"] #residenceNav button { justify-content: center; padding: 8px 0; gap: 0; }
#residenceNav .sec-fold { color: var(--rs-muted); font-size: 14px; min-height: 48px; }
#residenceNav .sec-fold .when-closed, html[data-nav="closed"] #residenceNav .sec-fold .when-open { display: none; }
html[data-nav="closed"] #residenceNav .sec-fold .when-closed { display: inline; }

/* ---------------------------------------------------------------- the desktop: no header (2026-10-28)

   crest-voland issues #84-#86: the scales are the sidebar's titles (région, the resort, the residence's name),
   the open scale's sections under its title and a little smaller; the header's mark at the top, its tools
   (season, language, the ticket, contact) at the bottom (residence-shell.js dock() moves them); the header
   is not drawn. Only on the desktop layout: the rail and the sheet keep their header. The page's header is
   `#app > header`: a bare `header` also matches the guide's `<header class="guide-hero">`. */
html[data-layout="desktop"] #app > header { display: none; }
html[data-layout="desktop"] { --header-h: 0px; }
/* Before residence-shell.js has set the layout: the same test as layoutOf()'s desktop, so the header does not
   show for a moment and then go. */
@media (min-width: 1280px) and (min-height: 501px) {
  html:not([data-layout]) #app > header { display: none; }
  html:not([data-layout]) { --header-h: 0px; }
}
#residenceNav .nav-tree { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
#residenceNav .nav-brand:empty, #residenceNav .nav-tools:empty { display: none; }
html:not([data-layout="desktop"]) #residenceNav .nav-scale { display: none; }

html[data-layout="desktop"] #residenceNav .nav-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 4px 14px 14px; }
html[data-layout="desktop"] #residenceNav .nav-brand .link-logo { height: 22px; }
html[data-layout="desktop"][data-nav="closed"] #residenceNav .nav-brand { align-items: center; padding: 4px 0 12px; }
html[data-layout="desktop"][data-nav="closed"] #residenceNav .brand-mark { font-size: 13px; letter-spacing: .06em; }
html[data-layout="desktop"][data-nav="closed"] #residenceNav .brand-mark img { height: 18px; }
html[data-layout="desktop"][data-nav="closed"] #residenceNav .link-logo-box { display: none; }
html[data-layout="desktop"] #residenceNav .nav-tree { gap: 2px; overflow: hidden auto; margin: 0 -12px; padding: 0 12px; }

/* A scale: a title. The open one in ink with the short red line under its name; the others muted. */
html[data-layout="desktop"] #residenceNav .nav-scale, html[data-layout="desktop"] #residenceNav .nav-scale.active {
  min-height: 50px; gap: 14px; font-size: 19px; font-weight: 500; color: var(--rs-muted); background: transparent;
}
html[data-layout="desktop"] #residenceNav .nav-scale:hover { color: var(--rs-ink); background: var(--rs-bg); }
html[data-layout="desktop"] #residenceNav .nav-scale.active { color: var(--rs-ink); font-weight: 600; }
html[data-layout="desktop"] #residenceNav .nav-scale.active::before { content: none; }
html[data-layout="desktop"] #residenceNav .nav-scale.active .nav-scale-label { position: relative; }
html[data-layout="desktop"] #residenceNav .nav-scale.active .nav-scale-label::after {
  content: ""; position: absolute; left: 0; bottom: -5px; width: 26px; height: 2px; border-radius: 2px; background: var(--accent);
}
html[data-layout="desktop"] #residenceNav .nav-scale + .nav-scale { margin-top: 2px; }
html[data-layout="desktop"] #residenceNav .sec-list + .nav-scale { margin-top: 10px; }
/* Its sections: smaller, set in under the title. */
html[data-layout="desktop"] #residenceNav .sec-list { gap: 2px; margin: 4px 0 2px; }
html[data-layout="desktop"] #residenceNav .sec-list button {
  min-height: 42px; gap: 12px; padding: 6px 12px 6px 26px; font-size: 15px;
}
html[data-layout="desktop"] #residenceNav .sec-list .sec-ico { width: 20px; }
html[data-layout="desktop"] #residenceNav .sec-list .sec-ico svg { width: 19px; height: 19px; }
html[data-layout="desktop"][data-nav="closed"] #residenceNav .sec-list button { padding: 6px 0; }
html[data-layout="desktop"][data-nav="closed"] #residenceNav .nav-scale.active .nav-scale-label::after { content: none; }
/* Folded to the icon rail: a scale's icon over its sections', a line between the scales. */
html[data-layout="desktop"][data-nav="closed"] #residenceNav .nav-scale { border-top: 1px solid var(--rs-line); border-radius: 0; }
html[data-layout="desktop"][data-nav="closed"] #residenceNav .nav-scale:first-child { border-top: 0; }
/* The open scale's icon is in ink, the others muted: no red (crest-voland issue #99, « why having this red icon
   there? »). The red stays the lit section's bar. */
html[data-layout="desktop"][data-nav="closed"] #residenceNav .nav-scale:not(.active) { color: var(--rs-muted); }

/* The gallery's sub-menu (crest-voland issue #89): extérieurs and intérieurs under « galerie », shown in the sidebar
   only while the gallery is open, always in the chooser's list. The rail (icons) leaves them to the chooser. */
#residenceNav .sec-sublist { display: none; flex-direction: column; gap: 2px; }
html[data-current-scale="residence"]:is([data-section="exterior"], [data-section="media"]) #residenceNav .sec-sublist { display: contents; }
html[data-layout]:not([data-layout="desktop"]) #residenceNav .sec-sublist { display: none; }
html[data-layout="desktop"][data-nav="closed"] #residenceNav .sec-sublist { display: none; }
#residenceNav .sec-sublist button { min-height: 38px; padding: 4px 12px 4px 58px; font-size: 14px; gap: 10px; }
#residenceNav .sec-sublist button.active { background: transparent; color: var(--rs-ink); }
#residenceNav .sec-sublist button.active::before { content: none; }
#residenceNav .sec-sublist .sec-ico { width: 18px; color: var(--rs-muted); }
#residenceNav .sec-parent.active ~ .sec-sublist button:not(.active) { color: var(--rs-muted); }
#sectionChooser .chooser-menu .sec-sublist { display: flex; flex-direction: column; gap: 2px; }
#sectionChooser .chooser-menu .sec-sublist button { min-height: 44px; padding-left: 44px; font-size: 15px; }

/* « Emplacement » (crest-voland issue #93, residence-config.js `placesGroup`): after the residence's sections, a heading
   and the two maps as a choice of two, the open map's sections under its name. Desktop only (residence-shell.js). */
/* The group lays out as its rows (the menu fits the screen, below): the line above it is its heading's, or on the
   folded rail its first map's. */
#residenceNav .nav-places-head {
  display: flex; align-items: center; gap: 16px; min-height: 44px; margin: 0; padding: 4px 14px;
  color: var(--rs-muted); font-size: 16px; white-space: nowrap;
}
html[data-layout="desktop"] #residenceNav .nav-places-head,
html[data-layout="desktop"][data-nav="closed"] #residenceNav .nav-places > .nav-place:first-of-type {
  margin-top: 10px; border-top: 1px solid var(--rs-line); border-radius: 0;
}
html[data-layout="desktop"] #residenceNav .nav-place, html[data-layout="desktop"] #residenceNav .nav-place.active {
  min-height: 42px; gap: 12px; padding: 6px 12px 6px 26px; font-size: 15px; font-weight: 400; color: var(--rs-ink);
}
/* The chosen map: the filled radio and the weight say it; the light and the red bar are its open section's. */
html[data-layout="desktop"] #residenceNav .nav-place.active { font-weight: 600; background: transparent; }
html[data-layout="desktop"] #residenceNav .nav-place.active::before { content: none; }
html[data-layout="desktop"] #residenceNav .nav-place .sec-ico { display: none; }
#residenceNav .nav-radio {
  flex: 0 0 auto; width: 18px; height: 18px; margin: 0 1px; border-radius: 50%; border: 1.5px solid var(--rs-muted); background: transparent;
}
#residenceNav .nav-place.active .nav-radio { border-color: var(--accent); box-shadow: inset 0 0 0 3.5px var(--rs-sand); background: var(--accent); }
html[data-layout="desktop"] #residenceNav .nav-places .sec-list button { padding-left: 36px; padding-right: 6px; }
/* Folded to the icon rail: the maps' icons, no heading, no radio. */
html[data-layout="desktop"][data-nav="closed"] #residenceNav .nav-places-head { display: none; }
html[data-layout="desktop"][data-nav="closed"] #residenceNav .nav-place { padding: 6px 0; border-top: 0; }
html[data-layout="desktop"][data-nav="closed"] #residenceNav .nav-place .sec-ico { display: inline-flex; }
html[data-layout="desktop"][data-nav="closed"] #residenceNav .nav-place .nav-radio { display: none; }
html[data-layout="desktop"][data-nav="closed"] #residenceNav .nav-places .sec-list button { padding: 6px 0; }

/* The header's tools, at the bottom: one per row, a label beside each icon. */
html[data-layout="desktop"] #residenceNav .nav-tools {
  display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding-top: 10px; border-top: 1px solid var(--rs-line);
}
html[data-layout="desktop"] #residenceNav .nav-tools > button,
html[data-layout="desktop"] #residenceNav .nav-tools #contactBtn {
  display: flex; align-items: center; justify-content: flex-start; gap: 14px; width: 100%; height: auto; min-height: 44px; margin: 0;
  padding: 8px 14px; border: 0; border-radius: 12px; background: transparent; color: var(--rs-ink); font: inherit; font-size: 15px; font-weight: 400;
}
html[data-layout="desktop"] #residenceNav .nav-tools > button:hover { background: var(--rs-bg); }
html[data-layout="desktop"] #residenceNav .nav-tools > button::before { content: none; }
html[data-layout="desktop"] #residenceNav .nav-tools > button svg { width: 19px; height: 19px; flex: 0 0 auto; margin: 0 1px; }
html[data-layout="desktop"] #residenceNav .nav-tools .menu-ticket-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
html[data-layout="desktop"] #residenceNav .nav-tools .lang { padding: 4px 4px 6px; }
html[data-layout="desktop"] #residenceNav .nav-tools .lang select { width: 100%; min-height: 40px; padding: 6px 10px; font-size: 14px; }
html[data-layout="desktop"] #residenceNav .nav-tools .season { align-self: flex-start; margin: 2px 4px 6px; }
html[data-layout="desktop"] #residenceNav .nav-tools .season button,
html[data-layout="desktop"] #residenceNav .nav-tools .season button.active {
  width: 40px; min-height: 0; height: 34px; padding: 0; justify-content: center; border-radius: 8px; gap: 0;
}
html[data-layout="desktop"] #residenceNav .nav-tools .season button { background: transparent; color: var(--rs-muted); }
html[data-layout="desktop"] #residenceNav .nav-tools .season button.active { background: var(--rs-paper); color: var(--rs-ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
html[data-layout="desktop"] #residenceNav .nav-tools .season button.active::before { content: none; }
/* Folded: the icons alone (their names stay for a screen reader); the language list needs the room, so it
   waits for the menu to open. */
html[data-layout="desktop"][data-nav="closed"] #residenceNav .nav-tools > button { justify-content: center; padding: 8px 0; }
html[data-layout="desktop"][data-nav="closed"] #residenceNav .nav-tools #contactBtn .label,
html[data-layout="desktop"][data-nav="closed"] #residenceNav .nav-tools .menu-ticket-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
html[data-layout="desktop"][data-nav="closed"] #residenceNav .nav-tools .lang { display: none; }
html[data-layout="desktop"][data-nav="closed"] #residenceNav .nav-tools .season { flex-direction: column; align-self: center; margin: 2px 0 6px; }

/* ---------------------------------------------------------------- the menu fits the screen (crest-voland issues #96, #97, #100)

   Nothing in the sidebar scrolls. Its list did, at 1280x631: the box clipped the lit row and its red bar at its edges
   (#96), it drew a scrollbar (#97), and on Windows that bar took 15px of the 76px rail on the maps, where the list was
   longer, and none on the residence (#100: « the left pane should stay the same size »). Now the lists' wrappers lay out
   as their rows (display: contents), so every row of the tree is one flex item that gives up height, down to a floor,
   when the screen is short, and below 820px the tools fold to one row of icons. Past the floors (a screen barely 500
   tall) the list still moves with the wheel, with no bar drawn, so the rail keeps its width. */
#residenceNav { overflow: hidden; }
#residenceNav .nav-tree { overflow: hidden auto; scrollbar-width: none; }
#residenceNav .nav-tree :is(.sec-list, .nav-places) { display: contents; }
#residenceNav .nav-tree button, #residenceNav .nav-places-head { flex: 0 1 56px; min-height: 36px; }
html[data-layout="desktop"] #residenceNav .nav-tree .nav-scale { flex-basis: 50px; min-height: 32px; }
html[data-layout="desktop"] #residenceNav .nav-tree :is(.sec-list button, .nav-place, .nav-places-head) { flex-basis: 42px; min-height: 28px; padding-block: 4px; }
html[data-layout="desktop"] #residenceNav .nav-tree .sec-sublist button { flex-basis: 38px; min-height: 26px; padding-block: 2px; }
html[data-layout="desktop"] #residenceNav .nav-tree .nav-scale + .sec-list > :first-child { margin-top: 4px; }
/* A name longer than the row wraps inside it, never past the row's light (#96: « résidence le ravel » at 1280 wide). */
html[data-layout="desktop"][data-nav="open"] #residenceNav button { white-space: normal; }
html[data-layout="desktop"][data-nav="open"] #residenceNav .sec-label { min-width: 0; overflow-wrap: anywhere; line-height: 1.15; }
/* Open, a row gives up height only down to its own content, so a name on two lines keeps both inside its light (the
   other rows give up more); the fixed floors below are the folded rail's, where a row is an icon. */
html[data-layout="desktop"][data-nav="open"] #residenceNav .nav-tree :is(button, .nav-places-head) { min-height: auto; }
@media (max-height: 820px) {
  html[data-layout="desktop"] #residenceNav { gap: 6px; padding-block: 14px 10px; }
  html[data-layout="desktop"] #residenceNav .nav-brand { padding-bottom: 6px; }
  html[data-layout="desktop"] #residenceNav .sec-fold { min-height: 40px; }
  html[data-layout="desktop"] #residenceNav .nav-tools > button,
  html[data-layout="desktop"] #residenceNav .nav-tools #contactBtn { min-height: 40px; }
  html[data-layout="desktop"][data-nav="open"] #residenceNav .nav-tools { flex-flow: row wrap; align-items: center; gap: 2px; }
  html[data-layout="desktop"][data-nav="open"] #residenceNav .nav-tools .lang { flex: 1 1 auto; padding: 0 4px 0 0; }
  html[data-layout="desktop"][data-nav="open"] #residenceNav .nav-tools .season { margin: 0 4px 0 0; }
  html[data-layout="desktop"][data-nav="open"] #residenceNav .nav-tools > button,
  html[data-layout="desktop"][data-nav="open"] #residenceNav .nav-tools #contactBtn { flex: 0 0 40px; width: 40px; justify-content: center; padding: 0; }
  html[data-layout="desktop"][data-nav="open"] #residenceNav .nav-tools #contactBtn .label,
  html[data-layout="desktop"][data-nav="open"] #residenceNav .nav-tools .menu-ticket-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  html[data-layout="desktop"] #residenceNav .nav-tree :is(.sec-list button, .nav-place, .nav-places-head) { min-height: 26px; }
  html[data-layout="desktop"] #residenceNav .nav-places-head { margin-top: 6px; }
}
/* The shortest desktop (501 to 600 tall): smaller names and mark, rows down to 22px. */
@media (max-height: 600px) {
  html[data-layout="desktop"] #residenceNav { gap: 4px; padding-block: 10px 6px; }
  html[data-layout="desktop"] #residenceNav .brand-mark { font-size: 22px; }
  html[data-layout="desktop"] #residenceNav .nav-tree { gap: 1px; }
  html[data-layout="desktop"] #residenceNav .nav-tree :is(.sec-list button, .nav-place, .nav-places-head) { min-height: 22px; padding-block: 2px; font-size: 14px; }
  html[data-layout="desktop"] #residenceNav .nav-tree .sec-sublist button { min-height: 22px; font-size: 13px; }
  html[data-layout="desktop"] #residenceNav .sec-fold { min-height: 34px; }
}
/* The rail on a phone held sideways (500 tall or less): closer rows, down to 30px. */
@media (max-height: 500px) {
  html[data-layout="rail"] #residenceNav { gap: 4px; padding-block: 10px 8px; }
  html[data-layout="rail"] #residenceNav .nav-tree { gap: 2px; }
  html[data-layout="rail"] #residenceNav .nav-tree button { min-height: 30px; }
  html[data-layout="rail"] #residenceNav .sec-fold { min-height: 40px; }
}

/* The languages switched off (features.js): the list is hidden in the sidebar too (styles.css hides it in the header). */
html[data-features-off~="languages"] #residenceNav .lang { display: none !important; }
/* The gallery's two parts (residence-config.js `gallery`, #88). */
#panel .gallery-head { margin: 18px 0 10px; font-size: 17px; }
#panel .gallery-head:first-child { margin-top: 2px; }

/* No season switch (residence-config.js `seasonSwitch`, crest-voland issue #83). */
html[data-season-switch="off"] .season { display: none !important; }

/* The scene beside it, and the map at the other scales (MapLibre follows its container's size). */
html[data-current-scale="residence"] #scene { left: var(--nav-w); transition: left .25s ease; }
html[data-current-scale]:not([data-current-scale="residence"]) #map { left: var(--nav-w); transition: left .25s ease; }
/* The village guide (guide.js) covers the whole shell and frames its own map: the map is its full width then. */
html[data-guide] #map { left: 0; transition: none; }
/* The map's zoom buttons rise above the Feedback button, which takes the bottom-left corner beside the sidebar. */
html[data-current-scale]:not([data-current-scale="residence"]):not([data-layout="sheet"]) .maplibregl-ctrl-bottom-left { bottom: 56px; }

/* ---------------------------------------------------------------- the section chooser */

#sectionChooser { position: absolute; z-index: 16; top: 14px; left: calc(var(--nav-w) + 16px); display: none; }
html[data-current-scale][data-layout="rail"] #sectionChooser,
html[data-current-scale][data-layout="sheet"] #sectionChooser { display: block; }
html[data-layout="sheet"] #sectionChooser { left: max(12px, env(safe-area-inset-left)); top: 12px; }
#sectionChooser .chooser-btn {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 14px 6px 16px;
  border: 0; border-radius: 12px; background: var(--rs-paper); color: var(--rs-ink); font: inherit; font-size: 15px;
  box-shadow: 0 6px 22px rgba(0,0,0,.16); cursor: pointer;
}
#sectionChooser .chooser-btn::before {
  content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent);
}
#sectionChooser .chooser-btn .sec-label { min-width: 104px; text-align: left; }
#sectionChooser .chooser-btn .chev { transition: transform .2s; }
#sectionChooser .chooser-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
#sectionChooser .chooser-btn:focus-visible { outline: 2px solid var(--rs-ink); outline-offset: 2px; }
#sectionChooser .chooser-menu {
  position: absolute; top: calc(100% + 8px); left: 0; width: min(300px, calc(100vw - 24px)); max-height: calc(100dvh - var(--header-h) - 90px);
  overflow: auto; padding: 8px; display: flex; flex-direction: column; gap: 2px;
  background: var(--rs-paper); border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.22);
}
#sectionChooser .chooser-menu[hidden] { display: none; }
#sectionChooser .chooser-menu button {
  position: relative; display: flex; align-items: center; gap: 14px; min-height: 50px; padding: 8px 14px;
  border: 0; border-radius: 10px; background: transparent; color: var(--rs-ink); font: inherit; font-size: 16px; text-align: left; cursor: pointer;
}
#sectionChooser .chooser-menu button:hover { background: var(--rs-bg); }
#sectionChooser .chooser-menu button.active { background: var(--rs-sand); font-weight: 600; }
#sectionChooser .chooser-menu button.active::before {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent);
}
#sectionChooser .sec-ico { display: inline-flex; }

/* ---------------------------------------------------------------- the card */

html[data-current-scale] #panel {
  /* The wrapper casts the shadow; the card inside it is clipped to the brand's shape, and a clip
     would cut a shadow drawn on itself. */
  position: absolute; z-index: 15; left: auto; right: 18px; top: 18px; bottom: auto;
  width: 400px; max-height: calc(100% - 36px); padding: 0 !important; overflow: visible;
  background: transparent; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none;
  clip-path: none; filter: drop-shadow(0 10px 28px rgba(35,31,30,.20)); display: flex; flex-direction: column;
}
html[data-current-scale][data-panel="hidden"] #panel { display: none; }
html[data-current-scale][data-layout="rail"] #panel { width: 340px; right: 14px; top: 14px; max-height: calc(100% - 28px); }
html[data-current-scale][data-layout="rail"][data-card="detailed"] #panel { width: 390px; }
html[data-current-scale][data-card="reduced"]:not([data-layout="sheet"]) #panel { width: 300px; }
/* The model's detailed card is the one tall panel of the reference; any other section's card is as
   tall as its content, up to the scene's height (the apartments reach it, two photos do not). */
html[data-current-scale="residence"][data-section="overview"][data-card="detailed"]:not([data-layout="sheet"]) #panel { height: calc(100% - 36px); }
html[data-current-scale="residence"][data-section="overview"][data-layout="rail"][data-card="detailed"] #panel { height: calc(100% - 28px); }
/* Above 1680px, a little more room. */
@media (min-width: 1680px) { html[data-current-scale][data-layout="desktop"]:not([data-card="reduced"]) #panel { width: 440px; } }

.res-card {
  position: relative; display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; max-height: 100%;
  background: var(--rs-paper); color: var(--rs-ink); border-radius: 24px;
}
.res-card .card-grip { display: none; }
.res-card .card-head {
  position: relative; display: grid; grid-template-columns: 1fr auto; align-items: start; column-gap: 12px;
  padding: 24px 22px 0 28px;
}
.res-card .card-kicker { grid-column: 1 / -1; margin: 0 0 6px; font-size: 12px !important; }
.res-card .card-title {
  grid-column: 1; margin: 0 !important; font-size: 34px !important; line-height: 1.1; font-weight: 500;
  color: var(--rs-ink); overflow-wrap: anywhere;
}
.res-card .card-dash { grid-column: 1; display: block; width: 40px; height: 3px; margin: 10px 0 0; border-radius: 3px; background: var(--accent); }
.res-card .card-ctrl { grid-column: 2; grid-row: 1 / span 3; display: flex; gap: 2px; margin-top: -4px; }
.res-card .card-kicker ~ .card-ctrl { grid-row: 2 / span 2; }
.card-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 10px; background: transparent; color: var(--rs-ink); cursor: pointer;
}
.card-btn:hover { background: var(--rs-bg); }
.card-btn:focus-visible { outline: 2px solid var(--rs-ink); outline-offset: -2px; }
/* Which state controls show: those for this state, and for a floating card or a sheet. */
html[data-card="reduced"] .card-btn:not([data-show-in~="reduced"]),
html[data-card="summary"] .card-btn:not([data-show-in~="summary"]),
html[data-card="detailed"] .card-btn:not([data-show-in~="detailed"]),
html[data-layout="sheet"] .card-btn.float,
html:not([data-layout="sheet"]) .card-btn.sheet { display: none; }

.res-card .card-body { min-height: 0; overflow: auto; padding: 16px 28px 8px; overscroll-behavior: contain; }
.res-card .card-foot { display: flex; flex-direction: column; gap: 10px; padding: 12px 28px 24px; }

/* The states. Reduced: the head alone. Summary: the parts marked for it. Detailed: all of it. */
html[data-card="reduced"] .res-card .card-body,
html[data-card="reduced"] .res-card .card-foot,
html[data-card="reduced"] .res-card .card-kicker { display: none; }
html[data-card="reduced"] .res-card .card-head { padding-bottom: 20px; }
html[data-card="reduced"] .res-card .card-title { font-size: 30px !important; }
/* The kicker is hidden when reduced, so the control rises to the title's row (it fell below it, #78). */
html[data-card="reduced"] .res-card .card-kicker ~ .card-ctrl { grid-row: 1 / span 2; }
html:not([data-card="detailed"]) .res-card .only-detailed { display: none !important; }
html:not([data-card="summary"]) .res-card .only-summary { display: none !important; }
html[data-card="detailed"] .res-card { flex: 1 1 auto; }
html[data-card="detailed"] .res-card .card-body { flex: 1 1 auto; }

/* The model card's content. */
.card-place { margin: 0 0 10px; font-size: 17px; color: var(--rs-ink-2, var(--warm-ink-2, #333)); }
.card-tagline { margin: 0 0 14px; font-size: 16px; line-height: 1.45; }
.card-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 0; padding: 6px 0 16px; border-bottom: 1px solid var(--rs-line); }
.card-figures .figure { display: flex; align-items: flex-start; gap: 12px; padding: 6px 12px 6px 0; }
.card-figures .figure + .figure { border-left: 1px solid var(--rs-line); padding-left: 16px; }
.card-figures .figure-ico { flex: 0 0 auto; stroke-width: 1.4; margin-top: 2px; }
.card-figures strong { display: block; font-size: 22px; font-weight: 700; line-height: 1.1; }
.card-figures .figure-label { display: block; font-size: 15px; }
.card-figures small { display: block; font-size: 12px; color: var(--rs-muted); }
.card-more {
  display: inline-flex; align-items: center; gap: 6px; margin: 14px 0 2px; padding: 8px 0; border: 0; background: none;
  color: var(--rs-ink); font: inherit; font-size: 16px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; cursor: pointer;
  text-transform: lowercase;
}
.res-card .aud-link { display: block; margin: 14px 0 4px auto; }
html[data-layout="rail"] .res-card .card-title { font-size: 28px !important; }
html[data-layout="rail"] .res-card .card-head { padding-top: 20px; }
.card-more:focus-visible { outline: 2px solid var(--rs-ink); outline-offset: 2px; }
.card-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 54px;
  padding: 12px 22px; border: 0; border-radius: 12px; background: var(--rs-sand); color: var(--rs-ink);
  font-family: var(--rs-title); font-size: 18px; font-weight: 500; text-transform: lowercase; cursor: pointer;
}
.card-cta:hover { background: color-mix(in srgb, var(--rs-sand), var(--rs-ink) 8%); }
.card-cta:focus-visible, .card-contact:focus-visible { outline: 2px solid var(--rs-ink); outline-offset: 2px; }
.card-contact {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; padding: 10px 18px;
  border: 1px solid var(--rs-ink); border-radius: 12px; background: #fff; color: var(--rs-ink);
  font-family: var(--rs-title); font-size: 17px; font-weight: 500; text-transform: lowercase; cursor: pointer;
}
.card-parts { margin-top: 4px; }
.card-part { border-bottom: 1px solid var(--rs-line); }
.card-part summary {
  display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 6px 2px; list-style: none; cursor: pointer;
  font-family: var(--rs-title); font-size: 17px; font-weight: 500; text-transform: lowercase;
}
.card-part summary::-webkit-details-marker { display: none; }
.card-part summary span { flex: 1; }
.card-part summary:focus-visible { outline: 2px solid var(--rs-ink); outline-offset: -2px; border-radius: 6px; }
.card-part .part-ico { flex: 0 0 auto; stroke-width: 1.5; }
.card-part .part-chev { transition: transform .2s; }
.card-part[open] summary { font-weight: 700; }
.card-part[open] .part-ico { color: var(--accent); }
.card-part[open] .part-chev { transform: rotate(180deg); }
.card-part .part-body { padding: 0 0 14px 34px; font-size: 15px; line-height: 1.5; }
.card-part .part-body p { margin: 0 0 8px; }
.card-part .part-note { display: block; margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--rs-bg); }
.card-part .part-note small { display: block; color: var(--rs-muted); }
.card-part .highlights { margin: 0; padding-left: 18px; }

/* A mountain path's difficulty: a filled Lucide circle in its colour (main.js resort()). */
#panel .path-dot { display: inline-flex; }
#panel .path-dot svg { fill: currentColor; }

/* A section's card: its existing content, at the card's width. */
.res-card[data-kind="section"] .tab-body > p:first-child { margin-top: 0; }
html[data-current-scale="residence"] #panel .res-card .tabs { margin-top: 4px; }

/* The brand's shape, where the browser draws shape() (residence-theme.css holds the shape itself
   for its own selector list; the card takes the same drawing): the free edge leans, every corner
   is round. On a sheet the top edge rises instead. */
@supports (clip-path: shape(from 0 0, line to 100% 0, line to 0 100%, close)) {
  html[data-current-scale]:not([data-layout="sheet"]) .res-card {
    --q-r: 26px; --q-tlx: 0px; --q-tly: 0px; --q-trx: 0px; --q-try: 0px; --q-brx: 0px; --q-bry: 0px; --q-blx: 16px; --q-bly: 0px;
    clip-path: shape(from calc(var(--q-tlx) + var(--q-r)) var(--q-tly),
      line to calc(100% - var(--q-trx) - var(--q-r)) var(--q-try),
      curve to calc(100% - var(--q-trx)) calc(var(--q-try) + var(--q-r)) with calc(100% - var(--q-trx)) var(--q-try),
      line to calc(100% - var(--q-brx)) calc(100% - var(--q-bry) - var(--q-r)),
      curve to calc(100% - var(--q-brx) - var(--q-r)) calc(100% - var(--q-bry)) with calc(100% - var(--q-brx)) calc(100% - var(--q-bry)),
      line to calc(var(--q-blx) + var(--q-r)) calc(100% - var(--q-bly)),
      curve to var(--q-blx) calc(100% - var(--q-bly) - var(--q-r)) with var(--q-blx) calc(100% - var(--q-bly)),
      line to var(--q-tlx) calc(var(--q-tly) + var(--q-r)),
      curve to calc(var(--q-tlx) + var(--q-r)) var(--q-tly) with var(--q-tlx) var(--q-tly),
      close);
    border-radius: 0;
  }
  html[data-current-scale]:not([data-layout="sheet"]) .res-card .card-head,
  html[data-current-scale]:not([data-layout="sheet"]) .res-card .card-body,
  html[data-current-scale]:not([data-layout="sheet"]) .res-card .card-foot { padding-left: 34px; }
  /* Reduced, the card is ~90px tall: the same 16px lean over that height was a wedge with a pointed top
     corner (#78). The lean keeps the tall card's angle (16px over ~400px), the corners a smaller radius. */
  html[data-current-scale][data-card="reduced"]:not([data-layout="sheet"]) .res-card { --q-r: 20px; --q-blx: 4px; }
  html[data-current-scale][data-card="reduced"]:not([data-layout="sheet"]) .res-card .card-head { padding-left: 26px; }
}

/* ---------------------------------------------------------------- the sheet */

html[data-current-scale][data-layout="sheet"] #panel {
  position: fixed; left: max(0px, env(safe-area-inset-left)); right: max(0px, env(safe-area-inset-right)); top: auto; bottom: var(--dock-h, 0px);
  width: auto; max-height: none; filter: drop-shadow(0 -6px 22px rgba(35,31,30,.18));
  height: var(--card-drag, auto); max-height: min(64dvh, var(--card-h-detailed, 80dvh));
  interpolate-size: allow-keywords; transition: height .28s cubic-bezier(.2,.8,.2,1);
}
html[data-current-scale][data-layout="sheet"][data-card="reduced"] #panel { height: var(--card-drag, auto); }
html[data-current-scale][data-layout="sheet"] #panel.dragging,
html[data-current-scale][data-layout="sheet"][data-card="detailed"] #panel { max-height: none; }
html[data-current-scale][data-layout="sheet"][data-card="summary"] .res-card .card-body { flex: 0 1 auto; }
html[data-current-scale][data-layout="sheet"][data-card="detailed"] #panel { height: var(--card-drag, var(--card-h-detailed, 80dvh)); }
html[data-current-scale][data-layout="sheet"] #panel.dragging { transition: none; }
/* A tablet held upright: the same sheet with margins and more generous type. */
@media (min-width: 721px) {
  html[data-current-scale][data-layout="sheet"] #panel { left: 16px; right: 16px; bottom: calc(var(--dock-h, 0px) + 14px); }
}
html[data-layout="sheet"] .res-card { height: 100%; max-height: none; border-radius: 26px 26px 0 0; }
@media (min-width: 721px) { html[data-layout="sheet"] .res-card { border-radius: 26px; } }
html[data-layout="sheet"] .res-card .card-grip { display: flex; justify-content: center; padding: 10px 0 0; cursor: grab; touch-action: none; }
html[data-layout="sheet"] .res-card .card-grip span { width: 44px; height: 5px; border-radius: 5px; background: var(--rs-line); }
html[data-layout="sheet"] .res-card .card-head { padding: 10px 14px 0 22px; touch-action: none; }
html[data-layout="sheet"] .res-card .card-title { font-size: 30px !important; }
html[data-layout="sheet"][data-card="reduced"] .res-card .card-head { padding-bottom: 12px; cursor: pointer; }
html[data-layout="sheet"] .res-card .card-body { padding: 12px 22px 6px; flex: 1 1 auto; }
html[data-layout="sheet"] .res-card .card-foot { padding: 10px 22px 14px; border-top: 1px solid transparent; }
html[data-layout="sheet"][data-card="detailed"] .res-card .card-foot { border-top-color: var(--rs-line); }
html[data-layout="sheet"] .card-figures .figure { padding-right: 8px; }
@supports (clip-path: shape(from 0 0, line to 100% 0, line to 0 100%, close)) {
  html[data-current-scale][data-layout="sheet"] .res-card { clip-path: none; }
}

/* The scene behind the sheet runs to the reduced card's top, so the viewer's own bottom bar (an
   export that takes no command keeps its own) is never under the strip. */
html[data-current-scale="residence"][data-layout="sheet"] #scene { bottom: calc(var(--card-h-reduced, 88px) - 18px); }
html[data-current-scale="residence"][data-layout="sheet"][data-tools="on"] #scene { bottom: 0; }

/* ---------------------------------------------------------------- the camera toolbar */

#sceneTools {
  position: absolute; z-index: 12; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px; padding: 8px 10px; max-width: calc(100% - 24px);
  background: var(--rs-paper); border-radius: 18px; box-shadow: 0 10px 30px rgba(35,31,30,.22);
}
#sceneTools[hidden] { display: none; }
/* Centred in the part of the scene the card leaves free. */
html[data-current-scale="residence"]:not([data-layout="sheet"]):not([data-card="reduced"]) #sceneTools { left: calc(50% - 200px); }
html[data-current-scale="residence"][data-layout="desktop"]:not([data-card="reduced"]) #sceneTools { left: calc(50% - 210px); }
#sceneTools .tool-presets, #sceneTools .tool-more { display: flex; align-items: center; gap: 2px; }
#sceneTools button {
  position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
  padding: 4px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--rs-ink); font: inherit; cursor: pointer;
}
#sceneTools button:hover { background: var(--rs-bg); }
#sceneTools button:focus-visible { outline: 2px solid var(--rs-ink); outline-offset: -2px; }
#sceneTools .tool-preset { flex-direction: column; gap: 2px; min-width: 76px; padding: 6px 12px; font-size: 14px; }
#sceneTools .tool-preset svg { stroke-width: 1.5; }
#sceneTools .tool-preset.active { font-weight: 700; }
#sceneTools .tool-preset.active span::after {
  content: ""; display: block; height: 3px; margin: 2px auto 0; width: 100%; border-radius: 3px; background: var(--accent);
}
#sceneTools .tool[aria-pressed="true"] { color: var(--rs-ink); background: var(--rs-bg); }
#sceneTools .tool-sep { width: 1px; height: 34px; margin: 0 8px; background: var(--rs-line); }
#sceneTools .tool-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#sceneTools .tool-overflow { display: none; }

/* A phone, a tablet held upright, or a narrow rail: the presets and « … », the rest in a pop-over. */
html[data-layout="sheet"] #sceneTools,
html[data-layout="rail"] #sceneTools { padding: 6px 8px; }
html[data-layout="sheet"] #sceneTools .tool-overflow { display: inline-flex; }
html[data-layout="sheet"] #sceneTools .tool-more {
  display: none; position: absolute; right: 0; bottom: calc(100% + 10px); flex-direction: column; align-items: stretch; gap: 2px;
  min-width: 240px; padding: 8px; background: var(--rs-paper); border-radius: 16px; box-shadow: 0 14px 40px rgba(35,31,30,.24);
}
html[data-layout="sheet"] #sceneTools[data-more="open"] .tool-more { display: flex; }
html[data-layout="sheet"] #sceneTools .tool-more .tool { justify-content: flex-start; gap: 12px; padding: 8px 12px; }
html[data-layout="sheet"] #sceneTools .tool-more .tool-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
@media (max-width: 1100px) {
  html[data-layout="rail"] #sceneTools .tool-overflow { display: inline-flex; }
  html[data-layout="rail"] #sceneTools .tool-more .tool[data-tool="zoom-in"],
  html[data-layout="rail"] #sceneTools .tool-more .tool[data-tool="zoom-out"] { display: none; }
  html[data-layout="rail"] #sceneTools[data-more="open"] .tool-more .tool { display: inline-flex; }
}
html[data-layout="sheet"] #sceneTools { width: calc(100% - 24px); max-width: 560px; justify-content: space-between; }
/* Above the sheet, whatever its height (the drag included). */
html[data-current-scale="residence"][data-layout="sheet"][data-card="reduced"] #sceneTools { bottom: calc(var(--card-drag, var(--card-h-reduced, 88px)) + 12px); }
html[data-current-scale="residence"][data-layout="sheet"][data-card="summary"] #sceneTools { bottom: calc(var(--card-drag, var(--card-h-summary, 40dvh)) + 12px); }

/* ---------------------------------------------------------------- the gesture hint */

#gestureHint {
  position: absolute; z-index: 11; left: 50%; top: 42%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; gap: 8px; padding: 14px 18px; border-radius: 16px;
  background: rgba(35,31,30,.78); color: #fff; font-size: 15px; pointer-events: none;
}
#gestureHint[hidden] { display: none; }
#gestureHint p { display: flex; align-items: center; gap: 10px; margin: 0; }

/* ---------------------------------------------------------------- the feedback button */

html[data-current-scale]:not([data-layout="sheet"]) #feedbackBtn {
  right: auto; left: calc(var(--nav-w) + 16px); top: auto; bottom: 16px;
}
html[data-current-scale][data-layout="sheet"] #feedbackBtn {
  left: auto; right: 12px; top: calc(var(--header-h) + 16px); bottom: auto;
}

/* The audience / buyer-link notice (tracker.css) starts beside the sidebar, above the Feedback button, and on
   a map right of its zoom column. */
html[data-current-scale]:not([data-layout="sheet"]) .link-notice {
  left: calc(var(--nav-w) + 16px); max-width: min(640px, calc(100vw - var(--nav-w) - var(--panel-edge) - 48px));
}
html[data-current-scale]:not([data-current-scale="residence"]):not([data-layout="sheet"]) .link-notice { left: calc(var(--nav-w) + 52px); }

@media (prefers-reduced-motion: reduce) {
  #residenceNav, html[data-current-scale="residence"] #scene, html[data-current-scale] #map, html[data-current-scale][data-layout="sheet"] #panel { transition: none; }
}

/* A tablet held upright: the sheet floats 14px above the bottom, so does the toolbar on it. */
@media (min-width: 721px) { html[data-current-scale="residence"][data-layout="sheet"] #sceneTools { margin-bottom: 14px; } }

/* Another section on a sheet (a panorama above all): the scene ends where the sheet starts, so the
   viewer drawn in it (panorama.js: its mini-map, its buttons) is never under the card. */
html[data-current-scale="residence"][data-layout="sheet"]:not([data-section="overview"])[data-card="summary"] #scene { bottom: var(--card-h-summary, 40dvh); }
html[data-current-scale="residence"][data-layout="sheet"]:not([data-section="overview"])[data-card="detailed"] #scene { bottom: var(--card-h-detailed, 80dvh); }

/* ---------------------------------------------------------------- a panorama in the shell (#79) */

/* Panorama.js was laid out for the old side panel; in the shell the Feedback button covered its
   mini-map, the hint ran under the mini-map, and the section chooser covered its title. Top left:
   what one looks at (title, views, the annotations switch, which annotations.js keeps under the
   head). Bottom right of the free area: how one moves, the mini-map above one row of zoom, reset and
   full screen. Bottom left stays the Feedback button's. The hint is centred in the free area, like
   the 3D scene's gesture hint. Full screen (no card, --pano-right 16px) is laid out the same way. */
html[data-current-scale="residence"]:not([data-layout="sheet"]) .panorama .panorama-controls {
  top: auto; bottom: 16px; transform: none; grid-auto-flow: column;
}
html[data-current-scale="residence"]:not([data-layout="sheet"]) .panorama .panorama-map {
  left: auto; right: var(--pano-right); bottom: 66px; width: min(220px, calc(100% - var(--pano-right) - 150px));
}
html[data-current-scale="residence"] .panorama .panorama-hint {
  top: 50%; bottom: auto; transform: translate(-50%, -50%); max-width: min(420px, calc(100% - var(--panel-edge) - 32px));
}
/* On a sheet (a tablet held upright too) the card is below the scene, not beside it. */
html[data-current-scale="residence"][data-layout="sheet"] .panorama { --pano-right: 12px; --pano-mid: 50%; }
html[data-current-scale="residence"][data-layout="sheet"] .panorama .panorama-hint,
html[data-current-scale="residence"] .panorama.expanded .panorama-hint { max-width: min(420px, calc(100% - 32px)); }
/* The top-left stack stays in the free area: on a narrow window the annotations switch ran under the card. */
html[data-current-scale="residence"]:not([data-layout="sheet"]) .panorama:not(.expanded) .panorama-head { max-width: min(420px, calc(100% - var(--panel-edge) - 32px)); }
html[data-current-scale="residence"]:not([data-layout="sheet"]) .panorama:not(.expanded) .ann-tools { max-width: calc(100% - var(--panel-edge) - 32px); overflow-x: auto; scrollbar-width: none; }
html[data-current-scale="residence"]:not([data-layout="sheet"]) .panorama:not(.expanded) .ann-tools button { flex: 0 0 auto; white-space: nowrap; }
/* The annotations list opens from the bottom left: above the Feedback button, below the switch,
   left of the mini-map. */
html[data-current-scale="residence"]:not([data-layout="sheet"]) .panorama:not(.expanded) .ann-panel:not(.at-top) {
  bottom: 64px; width: min(340px, calc(100% - var(--panel-edge) - 250px));
  max-height: calc(100% - 64px - var(--pano-head-top, 16px) - var(--ann-below-h, 96px) - 64px);
}
/* The chooser (rail and sheet) sits in the scene's top left: the head starts under it. */
html[data-current-scale="residence"][data-layout="rail"] .panorama:not(.expanded) { --pano-head-top: 74px; }
html[data-current-scale="residence"][data-layout="sheet"] .panorama:not(.expanded) { --pano-head-top: 70px; }
html[data-current-scale="residence"][data-layout="sheet"] .panorama:not(.expanded) .panorama-head { max-width: calc(100% - 84px); }
/* On a sheet the sheet itself names the view and its place; the switch shows which one is on. A
   switch wider than the screen scrolls on one line instead of wrapping into a blob. */
html[data-current-scale="residence"][data-layout="sheet"] .panorama-head:has(.panorama-views:not([hidden])) .panorama-title { display: none; }
html[data-current-scale="residence"] .panorama-views { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
html[data-current-scale="residence"] .panorama-views button { flex: 0 0 auto; white-space: nowrap; }

/* ---------------------------------------------------------------- the season switch (#80) */

/* season-theme.js: while the class is on, the page's chrome fades to the new palette (colour only; nothing
   here takes input, unlike a View Transition, M-111). The card is rebuilt by the render and takes the
   new palette at once. */
html.season-switching :is(body, header, header *, #residenceNav, #residenceNav *, #sectionChooser .chooser-btn, .shell) {
  transition: background-color .45s ease, color .45s ease, border-color .45s ease, fill .45s ease;
}
/* The weather after a switch: over everything, never in the way of a click, gone by itself. */
.season-weather { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.season-snow { width: 100vw; height: 100vh; }
.season-glow {
  background: radial-gradient(circle at 85% 0%, rgba(255,196,110,.38), rgba(255,214,150,.16) 35%, transparent 65%);
  opacity: 0; animation: season-glow 2.2s ease-in-out forwards;
}
@keyframes season-glow { 30% { opacity: 1; } 100% { opacity: 0; } }
/* The winter welcome (season-theme.js winterWelcome, crest-voland issue #92): a cold light from the top that fades
   in under the snow and out again, then the element is removed. */
.season-frost {
  background: radial-gradient(ellipse 120% 70% at 50% -10%, rgba(232,242,255,.62), rgba(200,220,245,.28) 45%, transparent 75%),
    linear-gradient(rgba(214,230,250,.22), rgba(214,230,250,0) 60%);
  opacity: 0; animation: season-frost 8s ease-in-out forwards;
}
@keyframes season-frost { 15% { opacity: 1; } 70% { opacity: .85; } 100% { opacity: 0; } }

/* The 3D at rest (scene-rest.js, crest-voland issue #94): the viewer off the screen, where the browser stops drawing
   it (a transform, so nothing re-lays out), and a still picture of the residence in its place. */
html[data-scene-rest="on"] #playcanvas { transform: translateX(-300vw); }
/* The camera toolbar drives a viewer that is not on the screen: it waits with it. */
html[data-scene-rest="on"] #sceneTools { display: none; }
#sceneRest { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center;
  background: var(--rs-bg, #e8e8e8); }
#sceneRest[hidden] { display: none; }
#sceneRest img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#sceneRest .rest-resume { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px;
  border: 0; border-radius: 999px; background: rgba(20,20,20,.72); color: #fff; font: 600 15px var(--brand-font, system-ui), sans-serif;
  cursor: pointer; backdrop-filter: blur(8px); }
#sceneRest .rest-resume:hover { background: rgba(20,20,20,.86); }