/* ==========================================================================
   Jeanne Arte — site.css · the La Carte design system (shared by every page)
   Born as design concept 02 (« La Carte », the printed spa menu), chosen by the
   client on 2026-11-03. One centred reading column on paper; Spectral sets almost
   everything, Manrope appears only inside form controls; ornament is typographic:
   hairline rules, dotted leaders, one fleuron drawn from the logo's leaves.

   This file holds the tokens and every component shared by two pages or more.
   Page-specific rules live in css/<page>.css. Hand-written, no build step.
   See DESIGN-SYSTEM.md for the tokens, components and motion rules.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts
   Copied verbatim from css/tailwind.src.css (self-hosted, OFL). */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/spectral-400.latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/spectral-400.cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/spectral-700.latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/spectral-700.cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/spectral-italic.latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/spectral-italic.cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/manrope-var.latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/manrope-var.cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ---------------------------------------------------------------- tokens
   Light = the fixed olive ramp + white. Dark = ink & parchment. */
:root {
  --bg: #f4f7f2;            /* olive-100 — the paper */
  --surface: #fcfdfb;       /* olive-50  — the printed card */
  --surface-2: #ffffff;     /* white     — footnote box, fields */
  --raised: #ffffff;        /* white     — dropdowns, menu panel */
  --line: #d1dec4;          /* olive-300 — hairline */
  --line-2: #b6cb9f;        /* olive-400 — card frame, rules */
  --field: #7a9260;         /* olive-600 — field borders (3.4:1) */
  --text: #414d35;          /* olive-900 — body */
  --text-strong: #22291b;   /* olive-950 — titles */
  --text-muted: #61754c;    /* olive-700 — asides, durations */
  --accent: #61754c;        /* olive-700 — labels, links */
  --ornament: #99b37c;      /* olive-500 — fleuron (decorative only) */
  --leader: #99b37c;        /* olive-500 — dotted leaders (decorative) */
  --btn-bg: #61754c;        /* olive-700 */
  --btn-bg-hover: #4e5d3e;  /* olive-800 */
  --btn-text: #ffffff;
  --btn-line: #61754c;      /* outlined buttons */
  --tint: #f4f7f2;          /* hover / selected row on the card */
  --selected: #4e5d3e;      /* chosen day / hour */
  --selected-text: #ffffff;
  --focus: #4e5d3e;
  --shadow: 0 18px 40px -18px rgb(34 41 27 / .28);

  --serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* type scale (rem = 16px) */
  --fs-label: .875rem;                                   /* 14  caps, tracked */
  --fs-small: 1.0625rem;                                 /* 17  footnotes, form help */
  --fs-body: 1.1875rem;                                  /* 19 → 20 */
  --fs-h3: clamp(1.3125rem, 1.2rem + .35vw, 1.5rem);     /* 21 → 24 dish names */
  --fs-lead: clamp(1.25rem, 1.12rem + .5vw, 1.5rem);     /* 20 → 24 italic sub-copy */
  --fs-h2: clamp(2rem, 1.55rem + 1.5vw, 2.75rem);        /* 32 → 44 */
  --fs-door: clamp(2.125rem, 1.5rem + 2vw, 3.25rem);     /* 34 → 52 */
  --fs-h1: clamp(2.5rem, 1.7rem + 2.8vw, 4.25rem);       /* 40 → 68 */
  --fs-quote: clamp(1.625rem, 1.3rem + 1.1vw, 2.25rem);  /* 26 → 36 */

  /* 8-pt spacing */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;
  --gutter: 24px;
  --col: 720px;
  --r: 2px;
  --ease: cubic-bezier(.22, .7, .2, 1);

  --mask: var(--bg);         /* what sits behind a dotted leader */

  color-scheme: light;
  interpolate-size: allow-keywords;
}

html.dark {
  --bg: #15110d;            /* ink — warm brown-black page */
  --surface: #1e1913;       /* the card, by candlelight */
  --surface-2: #28221a;     /* footnote box, fields */
  --raised: #322a20;        /* dropdowns, menu panel */
  --line: #3b3228;
  --line-2: #574b3b;
  --field: #8a7b62;         /* 3.8:1 on surface-2 */
  --text: #e6dcc6;          /* parchment */
  --text-strong: #f1e8d6;
  --text-muted: #b8aa90;
  --accent: #c0b97f;        /* olive-gold */
  --ornament: #a9a265;
  --leader: #6e624d;
  --btn-bg: #bdb67c;
  --btn-bg-hover: #cec78f;
  --btn-text: #15110d;
  --btn-line: #a59e68;
  --tint: #28221a;
  --selected: #bdb67c;
  --selected-text: #15110d;
  --focus: #d9d19a;
  --shadow: 0 22px 48px -18px rgb(0 0 0 / .7);
  color-scheme: dark;
}

@media (max-width: 359px) {
  :root { --gutter: 20px; }
}
@media (min-width: 760px) {
  :root { --fs-body: 1.25rem; --gutter: 40px; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
}

/* Anchors and keyboard focus stop below the sticky masthead. On the targets, not as
   scroll-padding on html: that also applies to the bar's own links, which are always in view,
   and tabbing into the bar or out of its menus then threw the page up by hundreds of pixels. */
main *, footer * { scroll-margin-top: 104px; }

a, summary, button, label { -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-kerning: normal;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; color: var(--text-strong); text-wrap: balance; }
p, li, blockquote { text-wrap: pretty; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
:where(ul[role="list"], ol[role="list"]) { list-style: none; margin: 0; padding: 0; }

::selection { background: var(--accent); color: var(--bg); }

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

.sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: var(--s2); top: -100px;
  z-index: 100;
  padding: 12px 20px;
  background: var(--btn-bg);
  color: var(--btn-text);
  font-size: var(--fs-small);
  text-decoration: none;
}
.skip:focus { top: var(--s2); }

.num { font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.nw { white-space: nowrap; }

/* icons: one sprite, currentColor */
.i {
  width: 20px; height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------------- type helpers */
.label {
  font-size: var(--fs-label);
  line-height: 1.45;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 400;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  font-style: italic;
  color: var(--text);
}

.aside {
  font-style: italic;
  color: var(--text-muted);
}

.link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--accent);
  font-size: var(--fs-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition: text-underline-offset .2s var(--ease), color .2s;
}
.link:hover { text-underline-offset: 9px; color: var(--text-strong); }

/* ---------------------------------------------------------------- layout */
.wrap {
  width: min(100% - 2 * var(--gutter), var(--col));
  margin-inline: auto;
}

.sec {
  padding-block: var(--s6);
  text-align: center;
}
@media (min-width: 760px) {
  .sec { padding-block: 80px; }
}

.sec__title {
  font-size: var(--fs-h2);
  line-height: 1.12;
  letter-spacing: -.005em;
  overflow-wrap: break-word;   /* no single long word, in any language, can widen the page at 320 px */
}

.sec__sub {
  margin: var(--s2) auto 0;
  max-width: 30em;
}

/* ---------------------------------------------------------------- the fleuron
   Two leaves and the droplet from the logo, flanked by hairlines that draw
   outwards from the centre. */
.orn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  width: min(100%, 360px);
  margin-inline: auto;
  color: var(--ornament);
}
.orn__rule {
  flex: 1;
  height: 1px;
  background: var(--line-2);
}
.orn__rule:first-child { transform-origin: 100% 50%; }
.orn__rule:last-child { transform-origin: 0 50%; }
.orn__mark {
  width: 60px;
  height: 26px;
  flex: none;
  fill: currentColor;
}
.orn--sm { width: min(100%, 240px); }

/* ---------------------------------------------------------------- buttons
   Understated: hairline, tracked capitals. Only « Réserver » is filled. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid var(--btn-line);
  border-radius: var(--r);
  background: transparent;
  color: var(--text-strong);
  font-family: var(--serif);
  font-size: .9375rem;
  line-height: 1.2;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .12s var(--ease);
}
.btn:hover { background: var(--tint); }
.btn:active { transform: translateY(1px); }
.btn .i { width: 18px; height: 18px; }

.btn--fill {
  background: var(--btn-bg);
  border-color: var(--btn-bg);
  color: var(--btn-text);
  font-weight: 700;
  letter-spacing: .14em;
}
.btn--fill:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); }

.btn--lg { min-height: 56px; padding: 0 32px; font-size: 1rem; }
.btn--sm { min-height: 44px; padding: 0 16px; font-size: .875rem; }

/* ---------------------------------------------------------------- masthead */
.mast {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  view-transition-name: mast;
}
.mast::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--line);
  opacity: 0;
  transition: opacity .3s;
}
.mast.is-compact::after { opacity: 1; }

.mast__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s1);
  max-width: 1360px;
  margin-inline: auto;
  padding: 12px var(--gutter);
  transition: padding .3s var(--ease);
}
.mast.is-compact .mast__bar { padding-block: 6px; }

.brand {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  color: var(--text-strong);
  text-decoration: none;
}
.brand__mark {
  flex: none;
  height: 44px;
  width: auto;
  max-width: none;
  transition: height .3s var(--ease);
}
.mast.is-compact .brand__mark { height: 36px; }
.brand__name {
  font-size: .9375rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 599px) {
  /* the mark alone in the bar; the name stays for screen readers. 599, not 479: with the
     menu button as wide as « Закрыть », the spaced name pushed the ru/ua « Réserver »
     off the bar until ~575 px */
  .brand__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

.mast__nav { display: none; }
.mast__nav ul { display: flex; gap: var(--s1); }
.mast__nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 12px;
  font-size: 1.0625rem;
  color: var(--text-strong);
  text-decoration: none;
  white-space: nowrap;
}
.mast__nav a::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: 8px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform .35s var(--ease);
}
.mast__nav a:hover::after { transform: scaleX(1); }
.mast__nav a[aria-current="page"]::after {
  transform: scaleX(1);
  height: 2px;
  background: var(--accent);
}

.mast__tools {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--s1);
}
.mast__tools .btn--fill { padding: 0 20px; }
/* Below 440 px the bar is tight: Menu (as wide as « Закрыть », see .menu-btn), the mark
   and « Записатися » / « Reserveren » must sit side by side in every language, menu open
   or closed. The .menu-btn half of these rules is next to .menu-btn (cascade order). */
@media (max-width: 439px) {
  .mast__bar { column-gap: 6px; }
  .mast__tools .btn--fill { padding: 0 14px; letter-spacing: .1em; }
}
@media (max-width: 389px) {
  .mast__bar { padding-inline: 16px; }
}
@media (max-width: 379px) {
  .btn { letter-spacing: .08em; padding-inline: 16px; white-space: normal; text-align: center; }
  .mast__bar { padding-inline: 12px; }
  .brand__mark,
  .mast.is-compact .brand__mark { height: 36px; }
  /* « Reserveren », « Записаться », « Записатися » must still fit beside Menu + mark at 320 px */
  .mast__tools .btn--fill { padding: 0 8px; font-size: .8125rem; letter-spacing: .04em; }
}
.mast__tools .btn--fill[aria-current="page"] { position: relative; }
.mast__tools .btn--fill[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: -8px;
  height: 2px;
  background: var(--accent);
  transition: bottom .3s var(--ease);
}
/* compact masthead: the button ends 6 px above the bar's edge; the mark stays inside it */
.mast.is-compact .mast__tools .btn--fill[aria-current="page"]::after { bottom: -6px; }
.mast__tools .lang,
.mast__tools .theme-btn { display: none; }

/* summary reset (details used for the language picker, mobile menu, "En savoir plus") */
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

/* plain text-button used in the bar (language, theme) */
.tbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  color: var(--text-strong);
  font-family: var(--serif);
  font-size: 1.0625rem;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s;
}
.tbtn:hover { background: var(--surface); }
.tbtn .i { width: 18px; height: 18px; }

.lang { position: relative; }
.lang .i--chev { transition: transform .25s var(--ease); }
.lang[open] .i--chev { transform: rotate(180deg); }
.lang__list {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 210px;
  padding: var(--s1) 0;
  background: var(--raised);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow);
}
.lang__list a,
.panel__langs a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 var(--s3);
  color: var(--text-strong);
  text-decoration: none;
}
.lang__list a:hover { background: var(--tint); }
.lang__list a[aria-current="true"]::before,
.panel__langs a[aria-current="true"]::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--accent);
  transform: rotate(45deg);
}
.lang__list a:not([aria-current])::before { content: ''; width: 6px; }

.theme-btn .i--sun,
html.dark .theme-btn .i--moon,
.theme-btn .t-light,
html.dark .theme-btn .t-dark { display: none; }
html.dark .theme-btn .i--sun,
html.dark .theme-btn .t-light { display: inline; }
/* its handler lives in site.js: no script (or the head script gave up on it), no button */
html:not(.js) [data-theme-toggle] { display: none; }

/* mobile menu (a <details>, so it works without JS).
   The two icons share one grid cell and so do the two labels (« Menu » / « Fermer »,
   « Меню » / « Закрыть »); the hidden one keeps its room (visibility, not display), so
   the button is as wide as its longer label in both states and opening the menu never
   re-flows the bar: the brand and « Réserver » used to jump 20 px and push past the
   right edge in ru/ua. */
.mast__menu { grid-column: 1; grid-row: 1; justify-self: start; }
.menu-btn {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 8px;
  min-height: 48px;
  padding: 0 14px 0 10px;
  border: 1px solid var(--btn-line);
  border-radius: var(--r);
  font-size: 1.0625rem;
  color: var(--text-strong);
  user-select: none;
}
.menu-btn > * { grid-row: 1; }
.menu-btn > svg { grid-column: 1; }
.menu-btn > span { grid-column: 2; text-align: center; }
.menu-btn .when-open,
.mast__menu[open] .menu-btn .when-closed { visibility: hidden; }
.mast__menu[open] .menu-btn .when-open { visibility: visible; }
/* after the rule above, or it would win (same specificity, later in the file) */
@media (max-width: 439px) {
  .menu-btn { padding: 0 10px 0 8px; column-gap: 6px; }
}

.panel {
  position: absolute;
  left: 0; right: 0; top: 100%;
  max-height: calc(100dvh - 72px);
  overflow-y: auto;
  padding: var(--s1) var(--gutter) var(--s4);
  background: var(--raised);
  border-block: 1px solid var(--line-2);
  box-shadow: var(--shadow);
}
.panel__tel {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  border-bottom: 1px solid var(--line);
  color: var(--text-strong);
  text-decoration: none;
  font-size: 1.25rem;
}
.panel__tel .i { width: 22px; height: 22px; color: var(--accent); }
.panel__tel .num { margin-left: auto; font-size: 1.125rem; }
/* « Зателефонувати +32 472 92 47 01 » is wider than a 320 px menu: the number wraps under it */
.panel__tel { flex-wrap: wrap; column-gap: 12px; padding-block: 8px; }
.panel__nav a {
  display: flex;
  align-items: center;
  min-height: 56px;
  border-bottom: 1px solid var(--line);
  color: var(--text-strong);
  font-size: 1.375rem;
  text-decoration: none;
}
.panel__nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent);
  text-underline-offset: 8px;
}
.panel__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  margin-top: var(--s3);
}
.panel__langs { display: flex; flex-wrap: wrap; margin: 0 calc(var(--s2) * -1); }
.panel__langs a { padding: 0 var(--s2); font-size: 1.0625rem; }
.panel .theme-btn { display: inline-flex; border: 1px solid var(--btn-line); }

/* the full bar (nav + centred name + Réserver, language, theme) from 1120 px: at
   1040 the nl/ru/ua « Réserver » came within 8 px of « JEANNE ARTE »; from 1120 the
   gap is 40 px or more in every language */
@media (min-width: 1120px) {
  .mast__bar { padding-block: 16px; }
  .mast__nav { display: block; grid-column: 1; justify-self: start; }
  .mast__menu { display: none; }
  .mast__tools .lang,
  .mast__tools .theme-btn { display: inline-flex; }
  .mast__tools .lang { display: block; }
}

/* ---------------------------------------------------------------- the printed card */
.card {
  --mask: var(--surface);
  position: relative;
  margin-inline: calc(var(--gutter) * -1);
  padding: var(--s5) var(--gutter);
  background: var(--surface);
  border-block: 1px solid var(--line-2);
  text-align: left;
}
.card::before {
  content: '';
  position: absolute;
  inset: 6px 0;
  border-block: 1px solid var(--line);
  pointer-events: none;
}
@media (min-width: 760px) {
  .card {
    margin-inline: 0;
    padding: var(--s6) 72px;
    border: 1px solid var(--line-2);
  }
  .card::before { inset: 7px; border: 1px solid var(--line); }
}
.card__head { text-align: center; }
.card__head .orn { margin-top: var(--s3); }

/* ---------------------------------------------------------------- dotted leaders
   name ……… price. The dots live on the name cell's last line only; the name's
   own background masks them under the words (--mask = whatever is behind). */
.line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: last baseline;
  text-align: left;
}
.line__l { position: relative; min-width: 0; }
.line__l::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: .38em;
  height: 2px;
  background-image: radial-gradient(circle at 1px 1px, var(--leader) .9px, transparent 1.2px);
  background-size: 7px 2px;
  background-repeat: repeat-x;
  background-position: right bottom;
}
.line__l > span {
  position: relative;
  z-index: 1;
  padding-right: .45em;
  background: var(--mask);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.line__r {
  padding-left: .45em;
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--text-strong);
}

/* ---------------------------------------------------------------- contact */
.contact__tel {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  margin-top: var(--s3);
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  color: var(--text-strong);
  text-decoration: none;
  letter-spacing: .02em;
}
.contact__tel:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; }
.contact__btns {
  display: grid;
  gap: 12px;
  margin-top: var(--s2);
}
@media (min-width: 560px) {
  .contact__btns { display: flex; flex-wrap: wrap; justify-content: center; }
}
.contact__mail {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-top: var(--s2);
  color: var(--text-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.contact__langs { margin-top: var(--s1); font-size: var(--fs-small); }

/* ---------------------------------------------------------------- forms (Manrope lives here) */
.form {
  display: grid;
  gap: var(--s3);
  margin-top: var(--s5);
  text-align: left;
}
.form__row { display: grid; gap: var(--s3); }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }

.field label,
.fl {
  display: block;
  margin-bottom: var(--s1);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-strong);
}
.fl .opt-note,
.field label .opt-note { font-weight: 400; color: var(--text-muted); }

.input {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid var(--field);
  border-radius: var(--r);
  background: var(--surface-2);
  color: var(--text-strong);
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.45;
  transition: border-color .2s, box-shadow .2s;
}
.input::placeholder { color: var(--text-muted); opacity: 1; }
.input:hover { border-color: var(--text-muted); }
.input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
textarea.input { min-height: 144px; resize: vertical; }

.form__send { width: 100%; }
@media (min-width: 560px) { .form__send { justify-self: center; width: auto; min-width: 240px; } }

.hp {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* ---------------------------------------------------------------- footer */
.foot {
  padding: var(--s6) 0 var(--s5);
  text-align: center;
}
.foot__contact { padding-bottom: var(--s6); }
.foot__rule {
  display: block;
  width: 96px;
  height: 1px;
  margin: 0 auto;
  background: var(--line-2);
}
.foot__brand {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: var(--s5);
  color: var(--text-strong);
  text-decoration: none;
}
.foot__brand img { height: 56px; width: auto; }
.foot__brand span {
  font-size: .9375rem;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.foot address {
  margin-top: var(--s3);
  font-style: normal;
}
.foot__line {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (min-width: 560px) {
  .foot__line { flex-direction: row; flex-wrap: wrap; justify-content: center; column-gap: var(--s3); }
}
.foot__langs { flex-direction: row; flex-wrap: wrap; justify-content: center; column-gap: var(--s3); }
.foot__line a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.foot__line a[aria-current] { text-decoration-thickness: 2px; text-decoration-color: var(--accent); }
.foot__nav { margin-top: var(--s3); }
.foot__nav a { text-decoration: none; }
.foot__nav a:hover,
.foot__nav a[aria-current] { text-decoration: underline; }
.foot__langs { margin-top: var(--s1); font-size: var(--fs-small); }
.foot__langs a { color: var(--text-muted); text-decoration: none; }
.foot__langs a[aria-current] { color: var(--text-strong); text-decoration: underline; }
.foot__copy {
  margin-top: var(--s4);
  font-size: .9375rem;
  color: var(--text-muted);
}

/* ---------------------------------------------------------------- motion
   Still → gentle. Rules draw outward from the centre, menu lines fade in one
   after another, the hero settles once. Nothing moves on its own.
   The morph between pages is switched on in the <head> (admin/partials/head.html). */
/* The overlay would take the pointer for the length of the morph: the button just clicked
   loses :hover and gets it back at the end, a flash right where the visitor is looking. */
::view-transition { pointer-events: none; }
/* Both pages are opaque, so the old one simply fades out on top of the new one: the same
   crossfade with one animation instead of two. The default adds two images with plus-lighter;
   when they fall a frame out of step (a title in flight, a busy page) the sum passes 100 %
   and one pure white frame flashes in the middle of the morph. */
::view-transition-image-pair(root),
::view-transition-image-pair(mast) { isolation: auto; }
::view-transition-old(root),
::view-transition-old(mast) { animation: vt-fade-out .32s ease both; mix-blend-mode: normal; z-index: 1; }
::view-transition-new(root),
::view-transition-new(mast) { animation: none; mix-blend-mode: normal; opacity: 1; }
/* Between pages the bar can change height (compact on a scrolled page, full at the top): two
   bars 10 px apart must not show for long. Theme and language switches keep the page's pace. */
html:active-view-transition-type(page)::view-transition-old(mast) { animation-duration: .12s; }
@keyframes vt-fade-out { to { opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
  html.js .reveal {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  html.js .reveal.in { opacity: 1; transform: none; }

  /* groups whose children appear one after another */
  html.js .stagger > * {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .5s var(--ease), transform .5s var(--ease);
    transition-delay: calc(var(--i, 0) * 75ms + 80ms);
  }
  html.js .stagger.in > * { opacity: 1; transform: none; }

  /* hairlines draw from the centre */
  html.js .draw .orn__rule {
    transform: scale(0, 1);
    transition: transform .6s var(--ease) .05s;
  }
  html.js .draw.in .orn__rule { transform: none; }

  /* the hero settles once, on load — pure CSS, no JS needed */
  html.js .settle {
    animation: settle .6s var(--ease) both;
    animation-delay: calc(var(--i, 0) * 90ms);
  }
  html.js .hero__mark.settle { animation-name: settle-mark; }
  html.js .doors__orn .orn__rule { animation: draw-y .6s var(--ease) .38s both; }
  html.js .doors__orn .orn__mark { animation: fade .5s var(--ease) .3s both; }

  .more::details-content {
    block-size: 0;
    overflow-y: clip;
    transition: block-size .45s var(--ease), content-visibility .45s allow-discrete;
  }
  .more[open]::details-content { block-size: auto; }
  /* when the visitor opens it (js/site.js), not whenever a page renders one already open */
  .more.is-toggled[open] .more__body { animation: fade .45s var(--ease) both; }

  .mast__menu[open] .panel { animation: drop .3s var(--ease) both; }
  .lang[open] .lang__list { animation: drop .22s var(--ease) both; }
}

@keyframes settle { from { opacity: 0; transform: translateY(10px); } }
@keyframes settle-mark { from { opacity: 0; transform: scale(.94); } }
@keyframes fade { from { opacity: 0; } }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }
@keyframes draw-y { from { transform: scale(1, 0); } }
@media (max-width: 759px) {
  @keyframes draw-y { from { transform: scale(0, 1); } }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .reveal, .stagger > *, .draw .orn__rule, .draw .orn__mark, .settle {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------------------------------------------------------------- print
   The carte prints as what it imitates: a menu card. */
@media print {
  :root, html.dark {
    --bg: #fff; --surface: #fff; --surface-2: #fff; --raised: #fff; --mask: #fff; --tint: #fff;
    --line: #d1dec4; --line-2: #b6cb9f;
    --text: #22291b; --text-strong: #22291b; --text-muted: #4e5d3e; --accent: #4e5d3e;
    --ornament: #99b37c; --leader: #7a9260;
  }
  body { font-size: 11pt; }
  .mast, .skip, .btn, .dish__book-row, .more summary, .contact__btns, .form, .doors .btn, .foot__nav, .foot__langs { display: none !important; }
  .reveal, .stagger > *, .settle, .draw .orn__rule, .draw .orn__mark { opacity: 1 !important; transform: none !important; animation: none !important; }
  .card { margin: 0; border: 1px solid var(--line-2); padding: 32pt 40pt; }
  .dish, .footnote, .review { break-inside: avoid; }
  .sec { padding-block: 24pt; }
  a { text-decoration: none; }
}

/* ---------------------------------------------------------------- production additions
   Everything below was added when concept 02 became the real site. */

[hidden] { display: none !important; }

:root { --error: #a23b2a; }
html.dark { --error: #e59a86; }

/* First paint in a language other than French: the static HTML is French, so the
   page stays transparent until site.js has applied the translations — no flash of
   the wrong language — and shows anyway after 2.5 s if anything failed. */
html.i18n-wait body { opacity: 0; animation: show-anyway 0s linear 2.5s forwards; }
/* Only a body really painted transparent fades in. When the translations beat the first
   frame there is nothing to fade, and inside a view transition it would dim the page mid-morph. */
html.painted body { transition: opacity .18s ease; }
@keyframes show-anyway { to { opacity: 1; visibility: visible; } }

/* Regions rendered from data/*.json keep their static French fallback for crawlers
   and no-JS readers, but are hidden until site.js has re-rendered them, so a
   price edited in the panel never flashes its stale value first. */
html.js [data-live]:not(.is-live) { visibility: hidden; animation: show-anyway 0s linear 2.5s forwards; }

/* site.js came later than 3 s: the head script had removed html.js so that nothing stayed
   hidden, and site.js has just put it back. The hero, already on screen, must not play its
   entrance a second time.
   Nor does a page brought in by a view transition play one at all: the morph is its entrance.
   A door's title would land, vanish inside its still-faded door and fade in again. */
html.js-late .settle,
html.js-late .hero__mark.settle,
html.js-late .doors__orn .orn__rule,
html.js-late .doors__orn .orn__mark,
html.arrived .settle,
html.arrived .hero__mark.settle,
html.arrived .doors__orn .orn__rule,
html.arrived .doors__orn .orn__mark { animation: none; }

.wrap--wide { width: min(100% - 2 * var(--gutter), 1180px); margin-inline: auto; }
.center { text-align: center; }

/* ---------------------------------------------------------------- page head
   The title block of every page that is not the home page (carte, réserver,
   journal, boutique, 404): small tracked label, big Spectral title, italic lead. */
/* Every inner page ends the same distance above the footer's « Contactez Jeanne »:
   this padding + .foot's own s6 = 128 px. Page CSS adds no bottom padding or margin to
   <main> or to its last block (it used to vary from 69 to 144 px between pages). */
.page { padding-top: var(--s3); padding-bottom: var(--s6); }
@media (min-width: 760px) { .page { padding-top: var(--s5); } }
.page-head { text-align: center; }
.page-title {
  margin-top: var(--s2);
  font-size: var(--fs-h1);
  line-height: 1.04;
  letter-spacing: -.015em;
  overflow-wrap: break-word;   /* as .sec__title */
}
.page-sub { max-width: 28em; margin: var(--s2) auto 0; }
.page-head .link { margin-top: var(--s1); }

/* ---------------------------------------------------------------- prose
   Long text from the JSON (article bodies, product text, treatment descriptions). */
.prose { text-align: left; }
.prose > * + * { margin-top: 1em; }
.prose h2,
.prose h3 { margin-top: 1.6em; color: var(--text-strong); }
.prose h2 { font-size: clamp(1.625rem, 1.35rem + 1vw, 2.125rem); line-height: 1.2; }
.prose h3 { font-size: var(--fs-h3); line-height: 1.3; }
.prose > :first-child { margin-top: 0; }
.prose ul,
.prose ol { padding-left: 1.4em; }
.prose ul { list-style: none; padding-left: 1.3em; }
.prose ul > li { position: relative; }
.prose ul > li::before {
  content: '';
  position: absolute;
  left: -1.05em; top: .68em;
  width: 5px; height: 5px;
  background: var(--ornament);
  transform: rotate(45deg);
}
.prose li + li { margin-top: .35em; }
.prose a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
.prose a:hover { color: var(--text-strong); }
.prose strong { font-weight: 700; color: var(--text-strong); }
.prose blockquote {
  margin: 1.4em 0;
  padding-left: var(--s3);
  border-left: 1px solid var(--line-2);
  font-size: var(--fs-lead);
  font-style: italic;
  line-height: 1.45;
  color: var(--text-strong);
}
.prose img { width: 100%; height: auto; }

/* ---------------------------------------------------------------- notes
   .footnote: the framed aside of the printed card (« Comment se préparer… »).
   .notice: a quiet italic aside with a hairline on its left (season notice). */
.footnote {
  margin-top: var(--s6);
  padding: var(--s4) var(--s3);
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  text-align: left;
}
@media (min-width: 760px) { .footnote { padding: var(--s4) var(--s5); } }
.footnote__title {
  margin-bottom: var(--s1);
  font-size: 1.375rem;
  font-style: italic;
  line-height: 1.3;
}
.footnote__mark { margin-right: .35em; font-style: normal; color: var(--accent); }
.footnote p { font-size: 1.125rem; }
/* The client's own conduct notice (2026-11-03), set under the preparation note on
   the carte and the booking slip, after a hairline: plain words, no alarm. */
.footnote__conduct { margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--line); }
.footnote__conduct + .footnote__conduct { margin-top: var(--s1); padding-top: 0; border-top: 0; }

.notice {
  padding: 2px 0 2px var(--s3);
  border-left: 1px solid var(--line-2);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-style: italic;
  color: var(--text-muted);
  text-align: left;
}

/* ---------------------------------------------------------------- shared bits that began in page files
   (.card__actions on the home menu card, .check + .form__status on the booking slip)
   — used by several pages, so they live here. Page files may refine them. */
.card__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-top: var(--s5);
}
@media (min-width: 560px) {
  .card__actions { flex-direction: row; justify-content: center; }
}
.check {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 48px;
  margin-top: var(--s4);
  padding: 4px 0;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--text-strong);
  text-align: left;
  cursor: pointer;
}
.check input {
  flex: none;
  width: 24px; height: 24px;
  margin: 1px 0 0;
  accent-color: var(--btn-bg);
  cursor: pointer;
}
/* The consent boxes, drawn like the other controls: the browser's own is a cold grey in
   dark, with its own radius. Size and margin: above, and in book.css / reviews.css. */
.check input,
.rv-check input {
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--field);
  border-radius: var(--r);
  background: var(--surface-2);
  transition: background-color .2s, border-color .2s;
}
.check input::before,
.rv-check input::before {
  content: '';
  width: 12px; height: 7px;
  margin-top: -3px;
  border: solid var(--selected-text);
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg) scale(0);
  transition: transform .15s var(--ease);
}
.check input:checked,
.rv-check input:checked { background: var(--selected); border-color: var(--selected); }
.check input:checked::before,
.rv-check input:checked::before { transform: rotate(-45deg); }
/* empty, it takes no room — but stays rendered, so screen readers still announce what is written into it */
.form__status:empty { margin: 0; }
.form__status { margin-top: var(--s2); font-style: italic; color: var(--accent); }

/* ---------------------------------------------------------------- « En savoir plus »
   <details class="more"> with the ⊕/⊖ mark: the carte's dishes, block FAQs, the shop.
   Base look only; pages refine it. Its open/close height transition is in the motion section. */
.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); }
.more__body p { max-width: 34em; font-style: italic; }

/* ---------------------------------------------------------------- form states */
.form__status.is-error,
.field__error { color: var(--error); font-style: normal; }
.field__error { display: block; margin-top: 6px; font-family: var(--sans); font-size: .9375rem; }
.input[aria-invalid="true"] { border-color: var(--error); }
.btn:disabled,
.btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.btn.is-busy { cursor: progress; }

/* ---------------------------------------------------------------- dialog sheet */
dialog.sheet {
  width: min(640px, 100% - 2 * var(--gutter));
  max-height: calc(100dvh - 48px);
  padding: var(--s5) var(--s3) var(--s4);
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}
@media (min-width: 760px) { dialog.sheet { padding: var(--s5); } }
dialog.sheet::backdrop { background: rgb(21 17 13 / .45); }
.sheet__close { position: absolute; top: 8px; right: 8px; }

/* ---------------------------------------------------------------- footer legal line */
.foot__legal {
  margin-top: var(--s1);
  font-size: .9375rem;
  color: var(--text-muted);
}
.foot__legal .num { white-space: nowrap; }

/* ---------------------------------------------------------------- reading progress
   A 2px hairline under the masthead that fills as you read (journal articles).
   Scroll-driven where supported; absent elsewhere. */
.read-progress { display: none; }

/* ---------------------------------------------------------------- production motion
   The concept's still → gentle language, extended:
   - the fleuron draws its own outline, then fills (.draw);
   - dotted leaders run from the name to the price, and the price inks in after;
   - .ink: a heading that comes into focus (fade + unblur + rise);
   - scroll-linked .sv-in / .sv-out, and the reading hairline, only where
     animation-timeline exists. Nothing loops, nothing is hover-only. */
@media (prefers-reduced-motion: no-preference) {
  /* Only once the page has loaded (site.js): the browser would animate its own restoring of
     the scroll position too, on a reload or going back, with the page racing past the reader. */
  html.smooth { scroll-behavior: smooth; }

  html.js .draw .orn__mark {
    opacity: 1;
    stroke: currentColor;
    stroke-width: .7;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    fill-opacity: 0;
    transition: stroke-dashoffset 1.2s var(--ease) .2s, fill-opacity .7s var(--ease) 1.05s;
  }
  html.js .draw.in .orn__mark { stroke-dashoffset: 0; fill-opacity: 1; }

  html.js :is(.reveal, .stagger) .line__l::after {
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 1s var(--ease);
    transition-delay: calc(var(--i, 0) * 75ms + 200ms);
  }
  html.js :is(.reveal.in, .stagger.in) .line__l::after { transform: none; }
  html.js :is(.reveal, .stagger) .line__r {
    opacity: 0;
    transition: opacity .6s var(--ease);
    transition-delay: calc(var(--i, 0) * 75ms + 650ms);
  }
  html.js :is(.reveal.in, .stagger.in) .line__r { opacity: 1; }

  html.js .ink {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(6px);
    transition: opacity .9s var(--ease), filter .9s var(--ease), transform .9s var(--ease);
    transition-delay: calc(var(--i, 0) * 80ms);
  }
  html.js .ink.in { opacity: 1; filter: none; transform: none; }

  dialog.sheet[open] { animation: drop .3s var(--ease) both; }
  dialog.sheet[open]::backdrop { animation: fade .3s var(--ease) both; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sv-in {
      animation: sv-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 240px;
    }
    .sv-out {
      animation: sv-out linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
    [data-progress] .read-progress {
      display: block;
      position: absolute;
      left: 0; right: 0; bottom: 0;
      height: 2px;
      background: var(--accent);
      transform-origin: 0 50%;
      animation: read-progress linear both;
      animation-timeline: scroll(root);
    }
  }
}
@keyframes sv-in { from { opacity: 0; transform: translateY(36px) scale(.985); } }
@keyframes sv-out { to { opacity: 0; transform: translateY(-20px) scale(.97); } }
@keyframes read-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .ink, .draw .orn__mark, .line__r, .line__l::after {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    fill-opacity: 1 !important;
    stroke-dashoffset: 0 !important;
  }
}
@media print {
  .ink, .line__r, .line__l::after { opacity: 1 !important; filter: none !important; transform: none !important; }
  .read-progress { display: none !important; }
}

/* A language switch re-renders the page; what is already on screen must not
   animate in a second time (site.js sets this for two frames). Same under the
   morph of a page brought in by a view transition, for as long as it lasts. */
html.no-anim { scroll-behavior: auto !important; }
html.no-anim *,
html.no-anim *::before,
html.no-anim *::after { transition: none !important; }

/* Printing: beforeprint adds .in to every reveal, which STARTS their transitions —
   and a running transition beats !important, so prices and leaders would print
   half-faded. Nothing animates on paper. */
@media print {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Under reduced motion the rule above zeroes every animation-delay — which would fire
   the 2.5 s "show anyway" fallbacks at once, so a non-French page would flash French
   and a [data-live] region its stale static copy. They are not motion: keep them. */
@media (prefers-reduced-motion: reduce) {
  html.i18n-wait body,
  html.js [data-live]:not(.is-live) { animation-delay: 2.5s !important; animation-duration: 0s !important; }
}