/* Jeanne Arte — carte.css · the carte des massages (massage.html) only.
   Tokens and shared components (.card, .line, .orn, .btn, .footnote, .prose,
   motion) are in site.css; this file sets the menu itself: courses, dishes,
   « En savoir plus », the tipped-in photo prints, « Sur demande », benefits. */

/* ---------------------------------------------------------------- the card head */
.carte-head .page-title { margin-top: var(--s2); }
/* as wide as the words: the morph scales the door's title by the ratio of the two boxes */
.carte-title { width: fit-content; margin-inline: auto; }
.carte-intro {
  display: grid;
  gap: var(--s2);
  max-width: 31em;
  margin: var(--s4) auto 0;
}
/* a footnote call, as on a printed menu: « * Comment se préparer… » → the note */
.carte-ref { margin-top: var(--s2); }
.carte-ref a {
  display: inline-block;
  padding: 10px 0;
  color: var(--accent);
  font-size: 1.125rem;
  font-style: italic;
  text-decoration: none;
  text-wrap: balance;
  transition: color .2s;
}
.carte-ref__text {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: var(--line-2);
  transition: text-decoration-color .2s;
}
.carte-ref a:hover { color: var(--text-strong); }
.carte-ref a:hover .carte-ref__text { text-decoration-color: currentColor; }
.carte-ref__mark { margin-right: .35em; font-style: normal; }

/* arriving from the home page's door, the title is morphed by the view
   transition (vt-carte): it must not ink in a second time underneath */
html:active-view-transition .carte-title { transition: none !important; }

/* ---------------------------------------------------------------- courses */
.course { margin-top: var(--s5); }
@media (min-width: 760px) { .course { margin-top: var(--s6); } }
.course__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  margin-bottom: var(--s1);
}
.course__title .orn__rule { flex: 0 1 72px; min-width: 16px; }
/* the rules give way first; the label wraps only when it must (long Russian titles) */
.course__title .label { flex: none; max-width: calc(100% - 64px); text-align: center; text-wrap: balance; }
@media (max-width: 379px) {
  .course__title { gap: 12px; }
  .course__title .orn__rule { min-width: 12px; }
  .course__title .label { max-width: calc(100% - 48px); letter-spacing: .14em; }
}

/* ---------------------------------------------------------------- dishes */
.dish { padding-block: var(--s3); }
/* landing on /massage#<id>: the dish's top rule sits just under the compact
   masthead (60 px), not the 104 px of everything else (site.css) */
.dish { scroll-margin-top: 68px; }
.dish + .dish { border-top: 1px solid var(--line); }
.dish__name { font-size: var(--fs-h3); line-height: 1.35; }
.dish__sub {
  margin-top: 2px;
  font-size: 1.125rem;
  font-style: italic;
  color: var(--text-muted);
  text-wrap: balance;
}
.dish__dur {
  font-style: normal;
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}
.dish__dur::before { content: '·'; margin: 0 .55em; }
.dish__sub--dur .dish__dur::before { content: none; }

.dish__vars { margin-top: 4px; font-size: var(--fs-h3); line-height: 1.5; }
.dish__vars .line__l > span { font-size: 1.125rem; font-style: italic; color: var(--text-muted); }

/* « Réserver » floats right of « En savoir plus » (it comes first in the markup):
   when both do not fit on one line — Ukrainian at 320 px — the summary simply
   moves below the button instead of running under it; the opened text starts
   under both. */
.dish__actions {
  display: flow-root;
  margin-top: var(--s1);
}
.dish__actions .dish__book { float: right; margin-left: var(--s2); }
@media (max-width: 379px) {
  .dish__actions .dish__book { margin-left: 12px; padding-inline: 12px; letter-spacing: .06em; }
  .dish__actions .more summary { gap: 8px; }
}

/* the signature: centred, its two durations as menu lines, opened */
.dish--sig { padding-top: var(--s1); text-align: center; }
.dish--sig .dish__name {
  font-size: clamp(1.875rem, 1.45rem + 1.3vw, 2.5rem);
  line-height: 1.15;
}
.dish--sig .dish__sub { margin-top: var(--s1); font-size: var(--fs-lead); }
.dish__prices {
  width: min(100%, 360px);
  margin: var(--s3) auto 0;
  font-size: var(--fs-h3);
  line-height: 1.5;
}
.dish__prices .line__l > span { font-size: 1.125rem; font-style: italic; color: var(--text-muted); }
.dish--sig .more { margin-top: var(--s2); }
.dish--sig .carte-desc { margin-inline: auto; text-align: center; }
.dish--sig .carte-desc ul { display: inline-block; text-align: left; }
.dish__book-row { margin-top: var(--s2); }

/* the home visit: a supplement, its text always visible; only its photo is folded */
.dish--supp .dish__text { margin-top: var(--s2); }
.dish--supp .more { margin-top: var(--s1); }

/* ---------------------------------------------------------------- « En savoir plus »
   A <details>: the height transition and its fade are in site.css (motion). */
.more summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--accent);
  font-size: 1.125rem;
  font-style: italic;
  transition: color .2s;
}
.more summary span {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: var(--line-2);
  transition: text-decoration-color .2s;
}
.more summary:hover { color: var(--text-strong); }
.more summary:hover span { text-decoration-color: currentColor; }
.more .i--pm {
  width: 22px; height: 22px;
  padding: 3px;
  border: 1px solid currentColor;
  border-radius: 50%;
  stroke-width: 1.8;
}
.more .i--pm .v { transform-origin: 12px 12px; transition: transform .3s var(--ease); }
.more[open] .i--pm .v { transform: scaleY(0); }
.more__body { padding: 4px 0 var(--s1); }

.carte-desc { max-width: 34em; font-style: italic; }
.carte-desc > * + * { margin-top: .8em; }
.carte-desc h4 {
  margin-top: 1.4em;
  font-size: var(--fs-label);
  font-style: normal;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}
.carte-desc > h4:first-child { margin-top: 0; }

/* ---------------------------------------------------------------- the photo print
   An optional photo per treatment (massages.json `image`), set like a print
   tipped into the menu: a white mount inside a hairline double frame. Phones:
   above the text, 4:3. Wide screens: beside the text, 4:5, the text wrapping
   round it; the centred signature dish carries it centred, like a frontispiece;
   the home visit's print has no text beside it (its text stays open above), so it
   keeps 4:3 under its « En savoir plus ».
   Each format fits a photo of any shape (object-fit), and the box is reserved before
   the file arrives (no layout shift). A dish without a photo is simply text —
   nothing is left empty. */
.carte-print {
  position: relative;
  margin: var(--s1) 0 var(--s3);
  padding: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
}
.carte-print::after {          /* the inner hairline of the double frame */
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid var(--line);
  pointer-events: none;
}
.carte-print img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 25%;   /* people's faces sit in the upper third */
  background: var(--tint);
  filter: grayscale(0) sepia(0) brightness(1);
}
html.dark .carte-print img { filter: grayscale(0) sepia(0) brightness(.88); }

@media (min-width: 760px) {
  .more__body:has(.carte-print) { display: flow-root; }
  .carte-print img { aspect-ratio: 4 / 5; }
  .dish:not(.dish--sig) .carte-print {
    float: right;
    width: 208px;
    margin: 6px 0 var(--s2) var(--s4);
  }
  .dish--sig .carte-print { width: 248px; margin: var(--s2) auto var(--s3); }
  .dish.dish--supp .carte-print { float: none; width: 360px; margin: var(--s1) 0 var(--s2); }
  .dish--supp .carte-print img { aspect-ratio: 4 / 3; }
}

/* ---------------------------------------------------------------- sur demande */
.ondemand { margin-top: var(--s1); }
.ondemand li {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text-strong);
}
.ondemand__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s2);
  margin-top: var(--s3);
}

/* ---------------------------------------------------------------- the preparation note
   The footnote of the card (site.css .footnote); the call in the head links here. */
.carte-card .footnote { margin-top: var(--s6); }

/* ---------------------------------------------------------------- benefits */
.carte-benefits { padding-bottom: 0; }
.carte-benefits__title {
  margin-top: var(--s4);
  font-size: var(--fs-lead);
  font-style: italic;
}
.carte-benefits__list {
  max-width: 34em;
  margin: var(--s3) auto 0;
}
.carte-benefits__list li { padding: 5px 0; line-height: 1.45; text-wrap: balance; }
.carte-benefits__list li + li::before {
  content: '';
  display: block;
  width: 5px; height: 5px;
  margin: 0 auto 10px;
  background: var(--ornament);
  transform: rotate(45deg);
}

/* ---------------------------------------------------------------- motion
   The print develops as it comes into view (scroll-linked, where supported): from
   a pale, almost grey proof to its full colour, done the moment its last edge is on
   screen, so a photo in full view is never left washed out. Static elsewhere. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .carte-print img {
      animation: carte-develop linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
  }
}
@keyframes carte-develop {
  from { opacity: .45; filter: grayscale(.8) sepia(.25) brightness(1.08); }
}

/* ---------------------------------------------------------------- print
   The carte prints as a menu card: every « En savoir plus » open (site.js),
   text only — no photos, no buttons, no footnote call. */
@media print {
  /* site.js adds .in on beforeprint; a transition started then would outrank even
     !important (transitions sit above it in the cascade) and print the prices and
     leaders mid-fade. In print nothing moves. */
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .carte-print, .carte-ref, .ondemand__foot .btn, .dish--supp .more { display: none !important; }
  .more::details-content { block-size: auto !important; }
  .carte-intro { margin-top: 12pt; }
  .course { margin-top: 22pt; }
  .dish { padding-block: 9pt; }
  .dish__actions { margin-top: 2pt; }
  .course__title { break-after: avoid; }
  .carte-card .footnote { margin-top: 22pt; break-inside: avoid; }
}