/* RoboFun — one stylesheet for both pages (design 2, reviewed 7 October 2026).
   Light, calm and photo-led. Colours and sizes are set once at the top. */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --ink: #1d1d1f;          /* main text */
  --grey: #5c5c61;         /* secondary text (dark enough to read on the coloured washes) */
  --line: #e3e3e8;         /* hairlines */
  --edge: #d2d2d7;         /* borders of fields and round buttons */
  --mist: #f5f5f7;         /* pale section background */
  --panel: #ececf0;        /* table and switch tint */
  --paper: #ffffff;
  --charcoal: #2b2b2e;     /* dark bands, table headers */
  --night: #1f2023;        /* footer */
  --stage: #0d0d10;        /* the dark the video melts into */
  --stage-rgb: 13, 13, 16;
  --sky-text: #085f97;     /* blue accent, dark enough for small text */
  --sky-pale: #e9f5fd;
  --indigo: #4a41b0;
  --button: linear-gradient(90deg, #1b72c8 0%, #4a41b0 100%);
  --error: #c2264b;
  --green: #1e7f4f;        /* the check mark once a form is sent (white on it: 5 to 1) */
  --green-pale: #e8f4ed;

  --font: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --wrap: 1180px;
  --gutter: clamp(20px, 4vw, 48px);
  /* Spacing between the big parts of a page. Change these four and every section follows.
     --section      from the edge of the light page to the first and after the last section
     --section-gap  between one section and the next (always 1.4 times --section)
     --head-gap     from a section title to what it introduces
     --column-gap   between two columns side by side, or the same two blocks stacked on a phone */
  --section: clamp(64px, 9vw, 120px);
  --section-gap: calc(var(--section) * 1.4);
  --head-gap: clamp(28px, 4vw, 48px);
  --column-gap: clamp(28px, 5vw, 72px);
  --round-big: 20px;       /* tiles, cards */
  --round-mid: 14px;       /* small cards, tables */
  --round-small: 10px;     /* fields */
  --cap: 24px;             /* rounded top edge of the page where it meets the dark picture */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);  /* one shared, soft way of moving */
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(20, 20, 40, 0.07);
}

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

/* Links inside a page glide to their section. This switches on a moment after the page has
   loaded, so that arriving from the other page on a section link lands there at once. */
html.is-ready { scroll-behavior: smooth; }
html { scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }

h1, h2, h3 { margin: 0; font-weight: 400; letter-spacing: -0.022em; text-wrap: balance; }
h1 { font-size: clamp(2rem, min(4.1vw, 7.4vh), 3.75rem); font-weight: 500; line-height: 1.06; letter-spacing: -0.032em; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.15; }
h3 { font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.015em; }

p { margin: 0; text-wrap: pretty; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--sky-text); outline-offset: 3px; border-radius: 6px; }
.hero :focus-visible, .page-top :focus-visible, .header.is-clear :focus-visible, .header.is-dark :focus-visible, .footer :focus-visible { outline-color: #fff; }

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

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Private / Corporate: the page shows one or the other.
   Without JavaScript both stay visible. */
html[data-type="private"] [data-for="corporate"],
html[data-type="corporate"] [data-for="private"] { display: none; }

/* After the visitor flips the Private / Corporate switch, the new figures ease in. */
html.type-changed [data-for] { animation: swap-in 0.35s var(--ease) both; }
@keyframes swap-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Going from one page to the other: a short cross-fade instead of a hard cut
   (in browsers that offer it; the others change page as usual). */
@view-transition { navigation: auto; }

/* Sections ease in once as they come into view. */
html.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
html.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background: var(--button);
  color: #fff;
  font: 500 1rem/1 var(--font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}
.button:hover { filter: brightness(1.1); transform: translateY(-1px); }
.button:active { transform: none; filter: brightness(0.96); }
.button-small { min-height: 40px; padding: 0 20px; font-size: 0.9rem; }
.button-wide { width: 100%; }
.button-ghost {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8);
  color: inherit;
}
.button-ghost:hover { background: rgba(255, 255, 255, 0.16); filter: none; }

/* ---------- Header ---------- */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px);
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  transition: background-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
  view-transition-name: site-header;   /* stays in place while the page behind it cross-fades */
}
/* The header has three looks, and eases from one to the next:
   1. clear, at the very top of a page, over the dark picture;
   2. dark glass, while the dark picture or the video is still behind it;
   3. white glass (the look above), once the light part of the page is behind it. */
html.js .header.is-clear {
  background-color: rgba(var(--stage-rgb), 0);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: #fff;
  box-shadow: none;
}
html.js .header.is-dark {
  background-color: rgba(var(--stage-rgb), 0.62);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}
.header-row { display: flex; align-items: center; gap: clamp(12px, 3vw, 32px); min-height: 64px; }
/* The logo: the robot's face, the name, and a small line under the name. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  margin-right: auto;
  text-decoration: none;
  color: inherit;
}
.logo svg { flex: none; width: 36px; height: 36px; }
.logo-words { display: grid; gap: 3px; }
.logo-name { font-size: 1.45rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1; }
.logo-line { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.01em; line-height: 1.2; white-space: nowrap; opacity: 0.82; }
/* On phones the small line may take two lines, so that the language link and the button still fit. */
@media (max-width: 519px) {
  .logo { gap: 9px; }
  .logo svg { width: 32px; height: 32px; }
  .logo-name { font-size: 1.3rem; }
  .logo-line { font-size: 0.625rem; white-space: normal; max-width: 12em; line-height: 1.15; text-wrap: balance; }
}
/* The link to the same page in the other language: FR on English pages, EN on French pages. */
.lang-switch {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  min-height: 40px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 28%, transparent);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.lang-switch:hover { background: color-mix(in srgb, currentColor 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 55%, transparent); }
.nav { display: none; gap: 30px; font-size: 0.9rem; }
.nav a { padding-block: 10px; text-decoration: none; opacity: 0.8; transition: opacity 0.2s ease; }
.nav a:hover, .header.is-clear .nav a, .header.is-dark .nav a { opacity: 1; }
.header .button { transition: filter 0.2s ease, transform 0.2s ease, opacity 0.3s ease, visibility 0.3s; }
/* The menu shows when there is room for it beside the logo, the language link and the button
   (the French words are longer, so this is set for French). */
@media (min-width: 1080px) { .nav { display: flex; } }
/* Phones: the button says "Reserve" / "Réserver" to leave room for the logo's small line and the
   language link. On the narrowest phones the small line under the name is left out. */
.label-short { display: none; }
@media (max-width: 519px) {
  .header-row { gap: 10px; }
  .header .label-long { display: none; }
  .header .label-short { display: inline; }
}
/* Small phones (360 to 379 wide): a little less space between the header items, and the small line
   under the name a little narrower, so the menu button fits beside "Réserver". */
@media (max-width: 379px) {
  .header-row { gap: 8px; }
  .logo-line { max-width: 10.5em; }
}
@media (max-width: 349px) {
  .header-row { gap: 6px; }
  .logo { gap: 7px; }
  .logo svg { width: 28px; height: 28px; }
  .logo-name { font-size: 1.2rem; }
  .logo-line { display: none; }
  .lang-switch { min-width: 36px; min-height: 36px; }
  .header .button-small { padding-inline: 12px; font-size: 0.85rem; }
  .menu-button { width: 40px; margin-right: -6px; }
}
@media (max-width: 819px) {
  .button-small { min-height: 44px; }
  /* On phones the top of each page already says "Reserve my date" in large,
     so the small button in the header waits until the visitor scrolls. */
  html.js .header.is-clear .button { opacity: 0; visibility: hidden; }
}

/* Phones and tablets: a menu button at the right of the header opens the links under it.
   Its two lines turn into a cross while the menu is open. Without the script there is no button. */
.menu-button {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px; height: 44px;
  margin-right: -8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.menu-button:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.menu-button svg { width: 24px; height: 24px; overflow: visible; }
.menu-button path { transform-origin: 12px 12px; transition: transform 0.25s var(--ease); }
.menu-button[aria-expanded="true"] .menu-line-1 { transform: rotate(45deg) translateY(3.5px); }
.menu-button[aria-expanded="true"] .menu-line-2 { transform: rotate(-45deg) translateY(-3.5px); }
html:not(.js) .menu-button { display: none; }
@media (min-width: 1080px) { .menu-button { display: none; } }
@media (max-width: 1079px) {
  /* While the menu is open the header is white, whatever is behind it, and the "Reserve" button shows. */
  html.js .header.menu-open {
    background-color: rgba(255, 255, 255, 0.97);
    -webkit-backdrop-filter: saturate(1.6) blur(16px);
    backdrop-filter: saturate(1.6) blur(16px);
    color: var(--ink);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  }
  html.js .header.menu-open .button { opacity: 1; visibility: visible; }
  .header.menu-open :focus-visible { outline-color: var(--sky-text); }
  .nav.is-open {
    position: absolute;
    top: 100%; left: 0; right: 0;
    display: grid;
    gap: 0;
    padding: 4px var(--gutter) 18px;
    border-top: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 24px 40px rgba(20, 20, 40, 0.14);
    font-size: 1.125rem;
    animation: menu-in 0.22s var(--ease) both;
  }
  .nav.is-open a { padding-block: 15px; border-bottom: 1px solid var(--line); opacity: 1; }
  .nav.is-open a:last-child { border-bottom: 0; }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- First screen (home): the dance video fills the background ----------
   The video melts into a dark area on the side where the words are:
   on the left on wide screens, at the bottom on upright phones and tablets. */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: 112px calc(72px + var(--cap));
  color: #fff;
  background: var(--stage);
}
.hero-stage { position: absolute; inset: 0; z-index: -1; }
.hero-video {
  position: absolute;
  top: 0;
  left: 12%;               /* moved right so the dancers stand clear of the words */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
}
/* The dark veil. The numbers were measured so that the white words keep
   a contrast of at least 4.5 to 1 over the lightest colours in the video. */
.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgb(var(--stage-rgb)) 0%, rgb(var(--stage-rgb)) 12%,
      rgba(var(--stage-rgb), 0.86) 18%, rgba(var(--stage-rgb), 0.7) 28%,
      rgba(var(--stage-rgb), 0.6) 40%, rgba(var(--stage-rgb), 0.52) 51%,
      rgba(var(--stage-rgb), 0.26) 62%, rgba(var(--stage-rgb), 0.08) 72%,
      rgba(var(--stage-rgb), 0) 80%),
    linear-gradient(180deg,
      rgba(var(--stage-rgb), 0.66) 0%, rgba(var(--stage-rgb), 0.52) 48px,
      rgba(var(--stage-rgb), 0.14) 110px, rgba(var(--stage-rgb), 0) 160px),
    linear-gradient(0deg, rgba(var(--stage-rgb), 0.5) 0%, rgba(var(--stage-rgb), 0) 26%);
}
.hero-copy { max-width: min(600px, 46vw); }
/* The small line above the headline. It carries the words people search for
   ("Robot entertainment for events in Montreal"), so it stays plain white text. */
.hero-copy .hero-kicker {
  margin: 0 0 16px;
  max-width: none;
  font-size: clamp(0.875rem, 1.15vw, 1rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.005em;
  text-wrap: balance;      /* if it must take two lines, they are of even length */
}
@media (max-width: 520px) {
  .hero-copy .hero-kicker { margin-bottom: 12px; font-size: 0.8125rem; }
}
/* The words arrive one after the other when the page opens. */
.hero-copy > *, .page-top h1 { animation: rise 0.7s var(--ease) both; }
.hero-copy > :nth-child(2) { animation-delay: 0.06s; }
.hero-copy > :nth-child(3) { animation-delay: 0.12s; }
.hero-copy > :nth-child(4) { animation-delay: 0.18s; }
.hero-copy > .hero-actions { animation-name: appear; animation-delay: 0.24s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }

/* The word "unforgettable" is alive: it takes the colour of the backdrop in the video as it
   changes, glows softly in that colour, and a line of light passes over it now and then.
   The colour is always a pale tint, so the word stays as easy to read as the rest. */
@property --live { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
.live-word {
  --live: oklch(0.86 0.15 302);           /* the tint before the video starts (its first colour) */
  color: var(--live);
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0) 58%) 200% 0 / 250% 100% no-repeat,
    linear-gradient(var(--live), var(--live));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 0.32em color-mix(in oklab, var(--live) 55%, transparent));
  transition: --live 0.25s ease;
  animation: shine 6s ease-in-out 1.4s infinite;
}
.live-word::selection { -webkit-text-fill-color: #fff; }
@keyframes shine {
  0% { background-position: 200% 0, 0 0; }
  30%, 100% { background-position: -100% 0, 0 0; }
}
@media (forced-colors: active) {
  .live-word { background: none; -webkit-text-fill-color: currentColor; filter: none; }
}
.hero-copy p {
  margin-top: 22px;
  max-width: 30em;
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.55;
}
.hero-tags {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 26px 0 0;
  padding: 6px 16px;
  list-style: none;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
}
.hero-tags li { display: flex; align-items: center; }
.hero-tags li + li::before {
  content: "";
  width: 1px; height: 12px;
  margin-inline: 12px;
  background: rgba(255, 255, 255, 0.5);
}
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }

/* Pause / play for the video: bottom right corner on wide screens. */
.hero-pause {
  position: absolute;
  right: var(--gutter);
  bottom: calc(28px + var(--cap));
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(var(--stage-rgb), 0.5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}
.hero-pause:hover { background: rgba(var(--stage-rgb), 0.75); }
.hero-pause svg { width: 16px; height: 16px; }
.hero-pause[aria-pressed="false"] .icon-play,
.hero-pause[aria-pressed="true"] .icon-pause { display: none; }
/* Without JavaScript the video does not start, so the button has nothing to do. */
html:not(.js) .hero-pause { display: none; }

/* Upright screens (phones, tablets held upright): the video takes the space above
   the words, wide enough to show both dancers, and fades into the dark below. */
@media (orientation: portrait), (max-width: 600px) {
  .hero {
    grid-template-rows: minmax(200px, 1fr) auto;
    align-items: stretch;
    padding-block: 0 calc(28px + var(--cap));
  }
  .hero-stage { position: relative; inset: auto; }
  .hero-video { left: 0; object-position: 65% 50%; }
  .hero-shade {
    background:
      linear-gradient(180deg,
        rgba(var(--stage-rgb), 0.66) 0%, rgba(var(--stage-rgb), 0.48) 44px,
        rgba(var(--stage-rgb), 0.12) 96px, rgba(var(--stage-rgb), 0) 130px),
      linear-gradient(0deg,
        rgb(var(--stage-rgb)) 0%, rgba(var(--stage-rgb), 0.86) 18px,
        rgba(var(--stage-rgb), 0.5) 48px, rgba(var(--stage-rgb), 0.16) 84px,
        rgba(var(--stage-rgb), 0) 120px);
  }
  h1 { font-size: clamp(2.125rem, 6vw, 3.5rem); }
  .hero-copy { max-width: none; }
  .hero-copy h1 { max-width: 640px; }
  .hero-copy p { font-size: 1.0625rem; }
  .hero-pause { position: static; margin-left: auto; background: none; }
  .hero-pause:hover { background: rgba(255, 255, 255, 0.14); }
}

/* Phones */
@media (max-width: 520px) {
  h1 { font-size: clamp(1.75rem, 8.2vw, 2.125rem); line-height: 1.08; }
  .hero { padding-bottom: calc(24px + var(--cap)); }
  .hero-copy p { margin-top: 14px; font-size: 0.9375rem; line-height: 1.5; }
  .hero-tags { margin-top: 16px; padding-inline: 14px; }
  .hero-tags li + li::before { margin-inline: 10px; }
  .hero-actions { gap: 10px; margin-top: 18px; }
  .hero-actions .button { padding-inline: 24px; }
}
/* The three French labels are longer: on phones they are set a little smaller so they stay on one line. */
@media (max-width: 519px) {
  :lang(fr) .hero-tags { padding-inline: 12px; font-size: clamp(0.66rem, 3.15vw, 0.8125rem); white-space: nowrap; }
  :lang(fr) .hero-tags li + li::before { margin-inline: clamp(6px, 2vw, 9px); }
}
@media (max-width: 379px) {
  .hero-actions { gap: 8px; }
  .hero-actions .button { padding-inline: 17px; font-size: 0.9375rem; }
}
@media (max-width: 339px) {
  .hero-actions .button { padding-inline: 12px; }
}
/* On short phone screens the three labels (which repeat the sentence above them)
   step aside so the dancers keep their room. */
@media (max-width: 520px) and (max-height: 760px) {
  .hero-tags { display: none; }
}

/* Wide but low windows: a little less air above and below the words. */
@media (orientation: landscape) and (max-height: 700px) and (min-width: 601px) {
  .hero { padding-block: 88px calc(40px + var(--cap)); }
  .hero-pause { bottom: calc(20px + var(--cap)); }
}

/* A phone held sideways: everything a little smaller so the first screen still fits. */
@media (orientation: landscape) and (max-height: 520px) and (min-width: 601px) {
  h1 { font-size: clamp(1.5rem, 3.6vw, 2.25rem); }
  .hero { padding-block: 76px calc(20px + var(--cap)); }
  .hero-copy p { margin-top: 12px; font-size: 0.875rem; }
  .hero-tags { display: none; }
  .hero-actions { margin-top: 16px; }
  .hero-actions .button { min-height: 44px; }
  .hero-pause { bottom: calc(20px + var(--cap)); }
}

/* ---------- Sections ---------- */

/* Each section carries half of the gap above and half below, so two neighbours add up to one gap.
   The first and the last section on the light page keep the edge distance instead. */
.section { position: relative; padding-block: calc(var(--section-gap) / 2); }
.page-light > .section:first-of-type { padding-top: var(--section); }
/* A menu link to any section lands with its title the same short distance under the menu bar
   (for "Prices" this keeps the switch, the occasions and the first price in one screen). */
.section { scroll-margin-top: calc(8px - var(--section-gap) / 2); }
.page-light > .section:first-of-type { scroll-margin-top: calc(8px - var(--section)); }
.page-light > .section:last-of-type { padding-bottom: var(--section); }

/* Everything after the dark picture or the video sits on one light sheet.
   Behind its sections, soft patches of the video's colours drift and fade slowly,
   so the page keeps some of the video's life without getting in the way of reading. */
/* Its bottom corners are rounded too, and overlap the dark footer a little. */
.page-light { position: relative; z-index: 1; isolation: isolate; background: var(--paper); border-radius: 0 0 var(--cap) var(--cap); }
.glow { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; }
.glow i {
  position: absolute;
  top: var(--top); left: var(--left);
  width: clamp(420px, 62vmax, 980px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--tint) 0%, color-mix(in oklab, var(--tint) 60%, transparent) 42%, transparent 100%);
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
  animation:
    drift var(--drift-time, 22s) ease-in-out infinite alternate,
    breathe var(--breathe-time, 9s) ease-in-out infinite alternate;
}
/* The six tints are pale versions of the colours in the dance video. */
.glow i:nth-child(1) { --tint: #e6d2ff; --top: 3%;  --left: 12%; --dx: 16vw;  --dy: 6vh;  --drift-time: 20s; --breathe-time: 9s; }  /* violet */
.glow i:nth-child(2) { --tint: #aaeff7; --top: 14%; --left: 88%; --dx: -18vw; --dy: 9vh;  --drift-time: 25s; --breathe-time: 12s; }  /* cyan */
.glow i:nth-child(3) { --tint: #ffc8eb; --top: 27%; --left: 20%; --dx: 20vw;  --dy: -7vh; --drift-time: 22s; --breathe-time: 7s; }  /* pink */
.glow i:nth-child(4) { --tint: #ffdda5; --top: 39%; --left: 84%; --dx: -16vw; --dy: 8vh;  --drift-time: 28s; --breathe-time: 13s; }  /* amber */
.glow i:nth-child(5) { --tint: #d4f5b5; --top: 52%; --left: 14%; --dx: 18vw;  --dy: 7vh;  --drift-time: 18s; --breathe-time: 10s; }  /* lime */
.glow i:nth-child(6) { --tint: #c5dfff; --top: 64%; --left: 86%; --dx: -20vw; --dy: -8vh; --drift-time: 24s; --breathe-time: 11s; }  /* blue */
.glow i:nth-child(7) { --tint: #e6d2ff; --top: 77%; --left: 24%; --dx: 17vw;  --dy: 8vh;  --drift-time: 27s; --breathe-time: 8s; }  /* violet */
.glow i:nth-child(8) { --tint: #ffc8eb; --top: 91%; --left: 78%; --dx: -15vw; --dy: -6vh; --drift-time: 21s; --breathe-time: 12s; }  /* pink */
@keyframes drift {
  from { transform: translate(-50%, -50%) scale(1); }
  to   { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.18); }
}
@keyframes breathe { from { opacity: 0.5; } to { opacity: 1; } }
/* The patches rest while that part of the page is off screen. */
html.js .glow:not(.is-live) i { animation-play-state: paused; }

/* Where the light page meets the dark picture or the video, its top edge is rounded
   and overlaps the picture a little, like a sheet of paper sliding over it. */
.hero + .page-light::before, .page-top + .page-light::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--cap)) 0 auto 0;
  height: var(--cap);
  border-radius: var(--cap) var(--cap) 0 0;
  background: var(--paper);
}
/* On computers the video stays in place and the page slides up over it. */
@media (min-width: 900px) and (orientation: landscape) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.js .hero { position: sticky; top: var(--pin-top, 0px); z-index: 0; }
}
/* (The pale grey bands are gone: the colours now flow from one section to the next.) */
.section-head { max-width: 44em; margin-bottom: var(--head-gap); }
.section-head-center { margin-inline: auto; text-align: center; }

/* ---------- What the robot does (pictures scroll by themselves) ---------- */

.strip-top {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: calc(var(--head-gap) - 4px);   /* the strip below adds 4px of its own */
}
.strip-controls { display: flex; gap: 8px; flex: none; }
.round {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--edge);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.round:hover { background: var(--mist); border-color: #b9b9c0; }
.round svg { width: 16px; height: 16px; }
.round[aria-pressed="false"] .icon-play,
.round[aria-pressed="true"] .icon-pause { display: none; }

.strip {
  position: relative;
  display: flex;
  gap: 20px;
  margin: 0 0 -8px;                    /* cancels the 8px of room kept under the pictures */
  padding: 4px var(--gutter) 8px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.strip::-webkit-scrollbar { display: none; }
/* With a mouse the strip can be pulled left and right: an open hand shows it, a closed hand while
   pulling. While it is pulled it follows the pointer exactly, so the snapping is paused. */
@media (hover: hover) and (pointer: fine) {
  html.js .strip { cursor: grab; }
}
html.js .strip.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; -webkit-user-select: none; }
html.js .strip.is-dragging * { cursor: grabbing; }
.strip img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
/* Going from the last picture back to the first: a quick fade instead of a long rewind. */
html.js .strip.is-swapping { opacity: 0; transition: opacity 0.24s ease; }
@media (min-width: 1276px) {
  .strip {
    padding-inline: calc((100vw - var(--wrap)) / 2);
    scroll-padding-inline: calc((100vw - var(--wrap)) / 2);
  }
}
.feature { flex: 0 0 min(82vw, 440px); scroll-snap-align: start; }

/* Each tile holds a photo. While the photo loads, the tile shows a pale tint
   in one of the colours of the dance video. */
.feature-picture {
  --wall: #e8e1fa;
  --floor: #f6f3fd;
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--round-big);
  overflow: hidden;
  background: linear-gradient(180deg, var(--wall) 0%, var(--wall) 58%, var(--floor) 100%);
}
.feature:nth-child(5n + 2) .feature-picture { --wall: #d9eff7; --floor: #f1f9fc; }  /* cyan */
.feature:nth-child(5n + 3) .feature-picture { --wall: #e3f1d2; --floor: #f5faee; }  /* lime */
.feature:nth-child(5n + 4) .feature-picture { --wall: #fbe7cf; --floor: #fdf6ec; }  /* amber */
.feature:nth-child(5n + 5) .feature-picture { --wall: #f8dfee; --floor: #fdf2f8; }  /* pink */
.feature-picture img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.feature h3 { margin-top: 20px; font-weight: 600; }
.feature p { margin-top: 4px; max-width: 26em; color: var(--grey); }

/* --- How the tiles move ---
   1. Arrival: the first time the strip comes into view, the tiles arrive one after the other.
   2. Focus: a tile grows to full size and full colour as it slides into the strip, and steps back
      as it leaves, so the eye rests on the tiles that are fully in view. (Recent Chrome, Edge and
      Safari; other browsers simply show the tiles at full size.)
   3. Pointer over a photo: it zooms in slowly and a line of light passes over it, the same
      line of light as on the word "unforgettable".
   All three are switched off for visitors who ask their device for less motion. */

/* 1. Arrival */
html.js .strip.reveal:not(.is-swapping) { opacity: 1; transform: none; }   /* the strip itself stays; its tiles arrive */
html.js .strip.reveal > .feature {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: calc(var(--order, 0) * 90ms);
}
html.js .strip.reveal.is-in > .feature { opacity: 1; transform: none; }
.feature:nth-child(2) { --order: 1; }
.feature:nth-child(3) { --order: 2; }
.feature:nth-child(4) { --order: 3; }
.feature:nth-child(n + 5) { --order: 4; }

/* 2. Focus */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .feature { view-timeline: --tile inline; }
    .feature-picture {
      transform-origin: 50% 100%;
      animation: tile-focus linear both;
      animation-timeline: --tile;
    }
    .feature h3, .feature p {
      animation: tile-words linear both;
      animation-timeline: --tile;
    }
  }
}
@keyframes tile-focus {
  entry 0%   { transform: scale(0.9); opacity: 0.4; }
  entry 100% { transform: none; opacity: 1; }
  exit 0%    { transform: none; opacity: 1; }
  exit 100%  { transform: scale(0.9); opacity: 0.4; }
}
@keyframes tile-words {
  entry 0%   { opacity: 0; transform: translateY(10px); }
  entry 40%  { opacity: 0; transform: translateY(10px); }
  entry 100% { opacity: 1; transform: none; }
  exit 0%    { opacity: 1; transform: none; }
  exit 60%   { opacity: 0; transform: translateY(10px); }
  exit 100%  { opacity: 0; transform: translateY(10px); }
}

/* 3. Pointer over a photo */
.feature-picture img { transition: transform 1.1s var(--ease); }
.feature-picture::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.38) 50%, rgba(255, 255, 255, 0) 60%) 220% 0 / 250% 100% no-repeat;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .feature:hover .feature-picture img { transform: scale(1.06); }
  .feature:hover .feature-picture::after { background-position: -120% 0; transition: background-position 0.9s ease; }
}

/* --- The last tile: "And much more." ---
   No photo. A wash of the video's colours drifts slowly, and five small signs of other
   activities (music, balloon, gift, microphone, game) float on it around a plus sign. */
.more-art {
  background:
    radial-gradient(58% 68% at 12% 16%, #d9c4ff 0%, rgba(217, 196, 255, 0) 72%),
    radial-gradient(54% 64% at 90% 20%, #a9ecf6 0%, rgba(169, 236, 246, 0) 72%),
    radial-gradient(60% 70% at 82% 94%, #ffc4e8 0%, rgba(255, 196, 232, 0) 72%),
    radial-gradient(54% 62% at 14% 96%, #ffdba0 0%, rgba(255, 219, 160, 0) 72%),
    #f4effe;
  background-size: 135% 135%;
  animation: more-wash 16s ease-in-out infinite alternate;
}
@keyframes more-wash {
  from { background-position: 0% 0%; }
  to   { background-position: 100% 100%; }
}
/* This tile also takes part in the "focus" effect, next to its own drifting colours. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .more-art {
      animation: more-wash 16s ease-in-out infinite alternate, tile-focus linear both;
      animation-timeline: auto, --tile;
    }
  }
}
.more-chip, .more-plus {
  position: absolute;
  display: grid; place-items: center;
  border-radius: 50%;
  translate: -50% -50%;              /* placed by their centre */
}
.more-chip {
  width: clamp(44px, 12.5%, 56px);
  aspect-ratio: 1;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 24px rgba(60, 40, 120, 0.14);
  animation: more-float 6s ease-in-out infinite alternate;
}
.more-chip svg { width: 46%; height: 46%; }
.more-chip:nth-child(1) { left: 17%; top: 26%; animation-duration: 5.4s; animation-delay: -1.2s; }
.more-chip:nth-child(2) { left: 80%; top: 22%; animation-duration: 6.6s; animation-delay: -3.1s; }
.more-chip:nth-child(3) { left: 86%; top: 68%; animation-duration: 5.9s; animation-delay: -0.4s; }
.more-chip:nth-child(4) { left: 13%; top: 72%; animation-duration: 7.2s; animation-delay: -4.5s; }
.more-chip:nth-child(5) { left: 50%; top: 84%; animation-duration: 6.1s; animation-delay: -2.3s; }
@keyframes more-float {
  from { transform: translateY(-7px) rotate(-5deg); }
  to   { transform: translateY(7px) rotate(5deg); }
}
.more-plus {
  left: 50%; top: 44%;
  width: clamp(60px, 18%, 80px);
  aspect-ratio: 1;
  background: var(--charcoal);
  color: #fff;
  box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.4), 0 16px 34px rgba(40, 30, 90, 0.22);
  transition: box-shadow 0.5s var(--ease);
}
.more-plus svg { width: 42%; height: 42%; }
/* Pointer over the tile: the ring around the plus sign widens a little. Nothing more, because
   the tile is not a button. */
@media (hover: hover) and (pointer: fine) {
  .feature-more:hover .more-plus { box-shadow: 0 0 0 15px rgba(255, 255, 255, 0.45), 0 16px 34px rgba(40, 30, 90, 0.22); }
}
@media (forced-colors: active) {
  .more-chip, .more-plus { border: 1px solid; }
}

/* ---------- Private / Corporate switch ---------- */

.switch {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  margin: 0;
  padding: 4px;
  border: 0;
  border-radius: 999px;
  background: var(--panel);
}
.switch label { position: relative; cursor: pointer; }
.switch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.switch span {
  display: block;
  padding: 10px 24px;
  border-radius: 999px;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--grey);
  transition: background 0.2s ease, color 0.2s ease;
}
.switch label:hover span { color: var(--ink); }
.switch input:checked + span { background: var(--charcoal); color: #fff; }
/* In current browsers the dark pill slides from one side to the other. */
@supports selector(:has(*)) {
  .switch { position: relative; isolation: isolate; }
  .switch::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 4px; bottom: 4px; left: 4px;
    width: calc(50% - 4px);
    border-radius: 999px;
    background: var(--charcoal);
    transition: transform 0.32s var(--ease);
  }
  .switch:has(label:last-child input:checked)::before { transform: translateX(100%); }
  .switch input:checked + span { background: none; }
}
.switch input:focus-visible + span { outline: 2px solid var(--sky-text); outline-offset: 3px; }

/* On the home page the switch is as wide as the two groups of occasions under it,
   so each side sits right above its own occasions. */
.switch-wide { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.switch-wide span { padding-block: 12px; font-size: 1rem; }

/* ---------- For every occasion, with its price (home) ----------
   Two sides. Left: the title, the switch, and two groups of occasions (Private under the left
   half of the switch, Corporate under the right half). Right: "Prices" with the price card of
   the group that is chosen, the note and the button. On a computer the two sides stand side by
   side; on tablets and phones the prices come under the occasions.
   The chosen group is lit: white cards with a soft shadow. The other stays readable, as outlines. */

.price-box {
  --group-gap: 12px;                 /* space between the Private and the Corporate group */
  display: grid;
  max-width: 900px;
  margin-inline: auto;
}
.occasion-side h2 { margin-bottom: var(--head-gap); text-align: center; }
.occasion-side .switch { width: 100%; }
.occasion-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--group-gap);
  margin-top: 12px;
}

.occasions {
  display: grid;
  grid-auto-rows: 1fr;               /* cards of one height */
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.occasions li { display: grid; }
.occasions label {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 10px;
  padding: 18px 10px 16px;
  border: 1px solid var(--edge);
  border-radius: var(--round-mid);
  text-align: center;
  font-size: 0.9375rem;
  line-height: 1.35;
  text-wrap: balance;
  cursor: pointer;                   /* pressing an occasion flips the switch to its side */
  -webkit-tap-highlight-color: transparent;   /* on phones the card lights up instead of flashing blue */
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.occasions label:hover { border-color: #a9a9b2; background: rgba(255, 255, 255, 0.6); }
.occasions svg { width: 30px; height: 30px; }
/* The lit group (both groups when there is no JavaScript, as both prices are then shown). */
html:not(.js) .occasions label,
html[data-type="private"] [data-plan="private"] label,
html[data-type="corporate"] [data-plan="corporate"] label {
  border-color: transparent;
  background: var(--paper);
  box-shadow: var(--shadow);
  cursor: default;
}
/* Without JavaScript: no switch; both price cards are shown, one under the other. */
html:not(.js) .price-box .switch { display: none; }
html:not(.js) .occasion-groups { margin-top: 0; }
html:not(.js) .price-card + .price-card { margin-top: 18px; }

.price-side { display: grid; grid-template-columns: minmax(0, 1fr); }
.price-side h3 {
  margin: clamp(32px, 5vw, 52px) 0 clamp(14px, 2vw, 18px);
  text-align: center;
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
}
/* When the switch is flipped, the title stays still and only the card eases in. */
html.type-changed .price-card { animation: swap-in 0.35s var(--ease) both; }

/* The price card: the table, with the deposit as its last line. */
.price-card {
  border-radius: var(--round-mid);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shadow);
}
.price-table { width: 100%; border-collapse: collapse; text-align: left; }
.price-table th, .price-table td { padding: 18px 22px; font-weight: 400; vertical-align: middle; }
.price-table thead th { background: var(--charcoal); color: #fff; font-size: 0.95rem; }
.price-table tbody th { font-weight: 500; }
.price-table tbody tr + tr { border-top: 1px solid var(--line); }
.price-table .amount { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.price-table tbody .amount { font-size: clamp(1.375rem, 2.6vw, 1.6rem); font-weight: 600; letter-spacing: -0.02em; }
.price-table .amount small { font-size: 0.9rem; font-weight: 400; letter-spacing: 0; color: var(--grey); }
.price-card .note-strong { padding: 14px 22px; background: var(--sky-pale); }

.price-side > .note { margin-top: 18px; }
.price-side > .button { justify-self: center; margin-top: 28px; }

/* Computers: occasions and prices side by side, two columns of the same width.
   Both titles are the same size and start on the same line; the switch and the price card
   start on the same line under them. */
@media (min-width: 1000px) {
  .price-box {
    --group-gap: 12px;
    max-width: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--column-gap);
    align-items: start;
  }
  .occasion-side h2, .price-side h3 { text-align: left; }
  .price-side h3 {
    margin: 0 0 var(--head-gap);
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);   /* same as a section title */
    line-height: 1.15;
    letter-spacing: -0.022em;
  }
  .occasions { gap: 12px; }
  .occasions label { gap: 14px; padding: 24px 12px 22px; }
  .occasions svg { width: 36px; height: 36px; }
  .price-side > .button { justify-self: start; }
}

/* A small note with a blue dot, used for the deposit and other asides. */
.note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--grey);
}
.note::before {
  content: "i";
  flex: none;
  width: 18px; height: 18px;
  margin-top: 2px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--sky-text);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}
.note-strong { font-size: 1rem; font-weight: 500; color: var(--ink); }
.note-strong::before { margin-top: 4px; }

/* ---------- Forms ---------- */

/* minmax(0, 1fr): a column never grows wider than the card because of a long word or date. */
.form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.form-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 560px) { .form-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; min-width: 0; align-content: start; }
.field label, .field-label { font-size: 0.9rem; font-weight: 500; }
.field input, .field select, .field textarea {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  border: 1px solid var(--edge);
  border-radius: var(--round-small);
  background-color: var(--paper);
  color: var(--ink);
  font: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* The drop-down lists get the same quiet arrow in every browser. */
.field select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231d1d1f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
  cursor: pointer;
}
.field textarea { height: auto; min-height: 130px; padding-block: 12px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #a9a9b2; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--sky-text);
  box-shadow: 0 0 0 4px rgba(31, 155, 224, 0.2);
}
.hint { font-size: 0.875rem; color: var(--grey); }
/* A list that still needs a choice after "send" was pressed: red edge and a short line under it. */
.field [aria-invalid="true"] { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }
.field input[aria-invalid="true"]:focus, .field textarea[aria-invalid="true"]:focus,
.picker-button[aria-invalid="true"]:focus-visible { border-color: var(--error); box-shadow: 0 0 0 4px rgba(194, 38, 75, 0.18); }
.field-error { font-size: 0.875rem; font-weight: 500; color: var(--error); }
.field-error[hidden] { display: none; }
.form-status { font-size: 0.95rem; font-weight: 500; }
.form-status.is-error { color: var(--error); }
.form-send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.form-send .form-status { flex: 1 1 14em; }
.field label .optional { font-weight: 400; color: var(--grey); }

/* A trap for robots: off the screen, never reached with the keyboard, hidden from screen readers. */
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* The check against robots: empty and invisible unless it needs the visitor to tick a box. */
.bot-check { display: flex; justify-content: center; }
.summary .bot-check:has(iframe) { margin-top: 12px; }
.summary .send-by-email { width: 100%; margin-top: 12px; }

/* A text button that looks like a link: "Did you mean …?", "Make another request". */
.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--sky-text);
  font: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.link-button:hover { color: var(--indigo); }
.email-hint { font-size: 0.875rem; color: var(--grey); overflow-wrap: anywhere; }
.email-hint[hidden] { display: none; }

/* A plain button on a light background: "Send by email instead". */
.button-quiet { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--edge); }
.button-quiet:hover { filter: none; box-shadow: inset 0 0 0 1px #a9a9b2; }
.send-by-email[hidden] { display: none; }

/* ---------- "Request received" / "Message received" ----------
   Once a form is sent, it closes and this card takes its place: a green check, the reference, what
   happens next, the email shown back, and (for a booking) the summary as the visitor saw it. */
.card.done {
  max-width: 640px;
  margin-inline: auto;
  padding: 0;
  overflow: hidden;
  scroll-margin-top: 96px;
}
.done-head {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: clamp(28px, 4vw, 40px) clamp(20px, 3vw, 32px) 24px;
  background: var(--green-pale);
  text-align: center;
}
.done-check { width: 64px; height: 64px; }
.done-check-circle { fill: var(--green); }
.done-check-tick { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; }
/* Drawn in once: the circle grows, then the tick is drawn. Still for people who turn motion off. */
.done:not(.is-restored) .done-check-circle { transform-box: fill-box; transform-origin: center; animation: done-pop 0.45s var(--ease) both; }
.done:not(.is-restored) .done-check-tick { animation: done-tick 0.35s 0.3s ease-out both; }
@keyframes done-pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes done-tick { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .done .done-check-circle, .done .done-check-tick { animation: none !important; }
}
.done-title { font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: 600; letter-spacing: -0.02em; }
.done-title:focus:not(:focus-visible) { outline: none; }
.done-ref { color: var(--grey); }
.done-ref strong { color: var(--ink); font-size: 1.125rem; letter-spacing: 0.08em; }
.done-body { display: grid; gap: 16px; padding: 24px clamp(20px, 3vw, 32px) clamp(24px, 3vw, 32px); }
.done-contact { color: var(--grey); }
.done-contact strong { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.done-contact .done-phone { white-space: nowrap; }
.done-body a { color: var(--sky-text); text-underline-offset: 3px; }
.done .terms { margin-top: 0; }
.done-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
}
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--sky-text); }
.check input[aria-invalid="true"] { outline: 2px solid var(--error); outline-offset: 2px; border-radius: 4px; }
.check + .field-error { display: block; margin-top: 6px; }

/* ---------- Choices shown as cards and buttons (booking form) ----------
   A group of round choices (radio buttons) without the round dots: each choice is a card or a button
   that lights up when chosen. The real choice sits invisibly over the card, so it still works with a
   finger, a mouse, the keyboard (arrows move between choices) and a screen reader. */

.choice-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.choice-field > legend { float: left; width: 100%; margin-bottom: 9px; padding: 0; }
.choice-field > legend + * { clear: both; }
.event-card input, .hour-pill input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

/* The kinds of event: one row of small pills (two rows on phones). The chosen one is filled in. */
.event-cards { display: flex; flex-wrap: wrap; gap: 6px; }
.event-card {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--paper);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.event-card:hover { border-color: #a9a9b2; }
.event-card:has(input:checked) { border-color: transparent; background: var(--button); color: #fff; font-weight: 600; }
.event-card input:checked ~ span { font-weight: 600; }         /* still shows the choice in older browsers */
@media (max-width: 379px) { .event-card { padding: 0 10px; font-size: 0.78rem; } }

/* Activities (optional): the short list for the chosen kind of event, and a box for the visitor's own
   idea. Only the list of the chosen kind of event shows (this works even without the script). */
.activities, .activity-list { display: none; }
.booking-form:has(input[name="event"]:checked) .activities { display: grid; }
.booking-form:has(input[data-key="birthday"]:checked) [data-activities-for="birthday"],
.booking-form:has(input[data-key="wedding"]:checked) [data-activities-for="wedding"],
.booking-form:has(input[data-key="company"]:checked) [data-activities-for="company"],
.booking-form:has(input[data-key="school"]:checked) [data-activities-for="school"],
.booking-form:has(input[data-key="other"]:checked) [data-activities-for="other"] { display: flex; }
.activity-list { flex-wrap: wrap; gap: 6px; }
.field-label .optional { font-weight: 400; color: var(--grey); }
.activity-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px 0 10px;
  border: 1px dashed var(--edge);
  border-radius: 999px;
  background: var(--paper);
  font-size: 0.8125rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
/* A small "+" that turns into a tick when the activity is chosen. */
.activity-pill::before {
  content: "+";
  width: 12px;
  font-weight: 600;
  text-align: center;
  color: var(--grey);
}
.activity-pill:hover { border-color: #a9a9b2; }
.activity-pill input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.activity-pill:has(input:checked) { border-style: solid; border-color: var(--indigo); background: #f3f2fd; color: var(--indigo); font-weight: 600; }
.activity-pill:has(input:checked)::before { content: "\2713"; color: var(--indigo); }
.activity-pill input:checked + span { font-weight: 600; }      /* still shows the choice in older browsers */
.activity-pill:has(input:focus-visible) { outline: 2px solid var(--sky-text); outline-offset: 2px; }
.activities #b-idea { height: 42px; margin-top: 4px; font-size: 0.9rem; }.event-card:has(input:focus-visible), .hour-pill:has(input:focus-visible) { outline: 2px solid var(--sky-text); outline-offset: 3px; }
.choice-field[aria-invalid="true"] .event-card,
.choice-field[aria-invalid="true"] .hour-pill:not(:has(input:disabled)) { border-color: var(--error); }
.choice-field .field-error { display: block; margin-top: 8px; }
.choice-field .hint, .choice-field .price-peek { margin-top: 8px; }
.choice-field .hint { display: block; }
html[data-type="private"] .choice-field .hint[data-for="corporate"],
html[data-type="corporate"] .choice-field .hint[data-for="private"] { display: none; }

/* The lengths: one row of buttons (two rows on narrow phones). */
.hour-pills { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 439px) { .hour-pills { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hour-pill {
  position: relative;
  display: grid;
  place-items: center;
  height: 48px;
  border: 1px solid var(--edge);
  border-radius: var(--round-small);
  background: var(--paper);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.hour-pill:hover { border-color: #a9a9b2; }
.hour-pill:has(input:checked) { border-color: transparent; background: var(--button); color: #fff; font-weight: 600; }
.hour-pill input:checked + span { font-weight: 600; }
/* Under the minimum for this kind of event (2 hours for a corporate event): shown, but off. */
.hour-pill:has(input:disabled) { border-style: dashed; background: var(--mist); color: #a2a2aa; cursor: not-allowed; }
.hour-pill input:disabled { cursor: not-allowed; }

/* ---------- Pop-up choosers: the date and the start time ----------
   The button looks like the other fields. The panel opens under it on wider screens, and slides up
   from the bottom of the screen on phones. */

.picker-button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 50px;
  padding: 0 14px;
  border: 1px solid var(--edge);
  border-radius: var(--round-small);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.picker-button:hover { border-color: #a9a9b2; }
.picker-button:focus-visible, .picker-button[aria-expanded="true"] {
  outline: none;
  border-color: var(--sky-text);
  box-shadow: 0 0 0 4px rgba(31, 155, 224, 0.2);
}
.picker-button[aria-invalid="true"] { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }
.picker-icon { flex: none; width: 20px; height: 20px; color: var(--sky-text); }
.picker-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-button.is-empty .picker-text { color: var(--grey); }
.picker-chevron { flex: none; width: 16px; height: 16px; transition: transform 0.2s var(--ease); }
.picker-button[aria-expanded="true"] .picker-chevron { transform: rotate(180deg); }

.picker-backdrop { position: fixed; inset: 0; z-index: 40; }
.picker-panel {
  position: absolute;
  z-index: 41;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05), 0 24px 56px rgba(20, 20, 40, 0.18);
  animation: picker-in 0.18s var(--ease) both;
}
@keyframes picker-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }
.picker-panel.is-above { animation-name: picker-in-above; }
@keyframes picker-in-above { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } }
.picker-sheet-head { display: none; }
.picker-close {
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--sky-text);
  font: 600 1rem var(--font);
  cursor: pointer;
}

/* The calendar */
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cal-month { font-weight: 600; font-size: 1rem; }
.cal-nav { width: 38px; height: 38px; }
.cal-nav:disabled { opacity: 0.35; cursor: default; }
.cal-weekdays, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.cal-weekdays span {
  padding: 6px 0;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--grey);
  text-align: center;
  text-transform: capitalize;
}
.cal-day {
  aspect-ratio: 1;
  min-height: 38px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink);
  font: 500 0.9375rem var(--font);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.cal-day:hover:not(:disabled) { background: var(--sky-pale); color: var(--sky-text); }
.cal-day:focus-visible { outline: 2px solid var(--sky-text); outline-offset: 1px; }
.cal-day[aria-pressed="true"] { background: var(--button); color: #fff; font-weight: 600; }
.cal-day:disabled { color: #c4c4cc; font-weight: 400; cursor: default; }
.cal-day.is-today { box-shadow: inset 0 0 0 1px var(--edge); }

/* The start times: one simple list, one time per line, about six in view (owner's choice, 8 October 2026).
   It scrolls to the chosen time when it opens. */
.picker-time { padding: 6px; }
.time-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  max-height: 252px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--edge) transparent;
}
.time-slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink);
  font: 500 0.9375rem var(--font);
  font-variant-numeric: tabular-nums;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.time-slot:hover { background: var(--mist); }
.time-slot:focus-visible { outline: 2px solid var(--sky-text); outline-offset: -2px; }
.time-slot[aria-pressed="true"] { background: var(--sky-pale); color: var(--sky-text); font-weight: 600; }
.time-slot[aria-pressed="true"]::after { content: "\2713"; }

/* Phones: the panel is a sheet that slides up from the bottom, over a dimmed page. */
@media (max-width: 559px) {
  html.picker-locked { overflow: hidden; }
  .picker-backdrop { background: rgba(var(--stage-rgb), 0.45); animation: appear 0.2s ease both; }
  .picker-panel {
    position: fixed;
    inset: auto 0 0 0;
    max-height: 88vh;
    max-height: 88dvh;
    overflow-y: auto;
    padding: 6px 20px calc(20px + env(safe-area-inset-bottom));
    border: 0;
    border-radius: 22px 22px 0 0;
    animation: sheet-up 0.28s var(--ease) both;
  }
  .picker-panel::before {          /* the small handle at the top of the sheet */
    content: "";
    display: block;
    width: 40px; height: 4px;
    margin: 4px auto 2px;
    border-radius: 2px;
    background: var(--edge);
  }
  .picker-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--line);
  }
  .picker-title { font-weight: 600; font-size: 1.0625rem; }
  .cal-day { font-size: 1rem; }
  .time-grid { max-height: 56vh; }
  .time-slot { height: 48px; font-size: 1rem; }
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }

/* ---------- Contact ---------- */

/* White, so that it stands apart from the pale grey section just above it. */
.contact-grid { display: grid; gap: var(--column-gap); }
@media (min-width: 880px) { .contact-grid { grid-template-columns: 0.8fr 1.2fr; } }
.contact-lines { margin-top: 24px; display: grid; gap: 14px; justify-items: start; }
.contact-line { display: flex; align-items: center; gap: 14px; font-size: 1.05rem; text-decoration: none; }
.contact-line span.badge {
  flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: var(--shadow);
}
.contact-line svg { width: 20px; height: 20px; }
a.contact-line:hover { color: var(--sky-text); }
.card {
  padding: clamp(22px, 3vw, 36px);
  border-radius: var(--round-big);
  background: var(--paper);
  box-shadow: var(--shadow);
}

/* ---------- Booking page ---------- */

/* The top band shows the first picture of the dance video, melting into the same dark
   as the first screen of the home page. */
.page-top {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(132px, 15vw, 176px) calc(clamp(36px, 5vw, 56px) + var(--cap));
  color: #fff;
  background: var(--stage);
}
.page-top::before {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  z-index: -1;
  width: clamp(270px, 52%, 760px);
  background:
    linear-gradient(90deg,
      rgb(var(--stage-rgb)) 0%, rgba(var(--stage-rgb), 0.96) 6%,
      rgba(var(--stage-rgb), 0.84) 14%, rgba(var(--stage-rgb), 0.64) 27%,
      rgba(var(--stage-rgb), 0.3) 56%, rgba(var(--stage-rgb), 0.16) 100%),
    linear-gradient(180deg, rgba(var(--stage-rgb), 0.62) 0%, rgba(var(--stage-rgb), 0.3) 64px, rgba(var(--stage-rgb), 0) 130px),
    url("../media/robot-dance-poster.jpg") 70% 0% / cover no-repeat;
}

/* "Page not found" (404.html): the title in French with the English under it,
   then the same short message and links in each language, side by side on wider screens. */
.page-top-line {
  margin-top: 12px;
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  color: rgba(255, 255, 255, 0.86);
  animation: rise 0.7s var(--ease) 0.06s both;
}
.lost { display: grid; gap: var(--column-gap); }
@media (min-width: 760px) { .lost { grid-template-columns: 1fr 1fr; } }
.lost-text { font-size: clamp(1.125rem, 1.8vw, 1.375rem); line-height: 1.4; letter-spacing: -0.01em; }
.lost-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 24px; }
.lost-actions a:not(.button) { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 4px; }

/* Five steps joined by a dotted line. */
.steps {
  display: grid;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li {
  counter-increment: step;
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 2px 18px;
  align-items: start;
}
.steps li::before {
  content: counter(step);
  grid-row: span 2;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #eef1fa;
  color: var(--indigo);
  font-size: 1.25rem;
  font-weight: 500;
}
.steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 27px; top: 62px; bottom: -20px;
  border-left: 2px dotted #c3c8dd;
}
.steps h3 { padding-top: 4px; font-size: 1.1rem; font-weight: 600; letter-spacing: -0.01em; }
.steps p { grid-column: 2; font-size: 0.95rem; color: var(--grey); }
@media (min-width: 980px) {
  /* Side by side. The three rows (circle, title, text) are shared by all five steps,
     so the texts start on the same line even when one title needs two lines. */
  .steps { grid-template-columns: repeat(5, 1fr); grid-template-rows: auto auto auto; gap: 0 24px; }
  .steps li {
    grid-row: span 3;
    grid-template-columns: 1fr;
    grid-template-rows: subgrid;
    gap: 0;
    justify-items: center;
    text-align: center;
  }
  .steps li::before { grid-row: auto; margin-bottom: 18px; }
  .steps li:not(:last-child)::after {
    left: calc(50% + 40px); right: calc(-50% + 16px); top: 27px; bottom: auto;
    border-left: 0;
    border-top: 2px dotted #c3c8dd;
  }
  .steps h3 { padding-top: 0; }
  .steps p { grid-column: 1; margin-top: 8px; max-width: 16em; }
}

.booking-grid { display: grid; gap: var(--column-gap); align-items: start; }
@media (min-width: 960px) { .booking-grid { grid-template-columns: 1fr 430px; } }
.booking-form h2 { margin-bottom: 4px; font-size: 1.5rem; font-weight: 500; }
.booking-form .switch { width: 100%; }   /* as wide as the cards under it: each half sits over its own kinds of event */

.summary {
  border-radius: var(--round-big);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shadow);
}
@media (min-width: 960px) { .summary { position: sticky; top: 88px; } }
.summary-head { padding: 20px clamp(20px, 3vw, 28px); background: var(--charcoal); color: #fff; }
.summary-head h2 { font-size: 1.5rem; font-weight: 500; }
.summary-head p { margin-top: 6px; font-size: 0.875rem; line-height: 1.5; color: rgba(255, 255, 255, 0.76); }
.summary-body { padding: 10px clamp(20px, 3vw, 28px) clamp(20px, 3vw, 28px); }
.summary-list { margin: 0; font-variant-numeric: tabular-nums; }
.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}
.summary-row dt { color: var(--grey); }
.summary-row dd { margin: 0; text-align: right; font-weight: 500; }
/* A small second line under a label: how the price is made up, what the deposit is a share of. */
.summary-row small { display: block; margin-top: 2px; font-size: 0.8125rem; font-weight: 400; color: var(--grey); }
.summary-row dd.is-waiting { font-weight: 400; color: var(--grey); }
/* The total is the main figure of the list. */
.summary-row.is-total { align-items: baseline; padding-top: 14px; border-bottom: 0; }
.summary-row.is-total dt { color: var(--ink); font-weight: 600; }
.summary-row.is-total dd { color: var(--ink); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; }
/* Deposit and balance share one tinted box, because the two add up to the total. */
.summary-pay {
  margin-top: 4px;
  padding: 4px 16px;
  border-radius: var(--round-small);
  background: var(--sky-pale);
}
.summary-pay .summary-row { border-bottom-color: rgba(8, 95, 151, 0.16); }
.summary-pay .summary-row:last-child { border-bottom: 0; }
.summary-row.is-deposit { align-items: baseline; padding-block: 12px; }
.summary-row.is-deposit dt { color: var(--ink); font-weight: 500; }
.summary-row.is-deposit dd { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
.summary-row.is-balance dt { max-width: 15em; }

/* Before the type of event and the length are chosen, the summary shows this line and no prices. */
.summary-empty {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 10px;
  padding: 16px;
  border-radius: var(--round-small);
  background: var(--sky-pale);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
}
.summary-empty::before {
  content: "i";
  flex: none;
  width: 18px; height: 18px;
  margin-top: 3px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--sky-text);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}
.summary-empty[hidden] { display: none; }
[data-sum="filled"] { animation: swap-in 0.35s var(--ease) both; }   /* the amounts ease in when they appear */

/* Under "Length", on phones and tablets only: the two main amounts and a link down to the summary. */
.price-peek {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: var(--round-small);
  background: var(--sky-pale);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.price-peek-link { color: var(--sky-text); text-decoration: underline; text-underline-offset: 3px; }
.price-peek[hidden] { display: none; }
@media (min-width: 960px) { .price-peek { display: none; } }
.summary { scroll-margin-top: -8px; }   /* the link under Length lands with the summary just under the menu bar */
.terms { margin-top: 18px; font-size: 0.9rem; }
.terms h3 { font-size: 0.95rem; font-weight: 600; letter-spacing: 0; margin-bottom: 6px; }
.terms p { color: var(--grey); }
.summary .check { margin-top: 20px; }
.summary .button { margin-top: 18px; }
.summary .note { margin-top: 14px; font-size: 0.875rem; }
.summary .form-status { margin-top: 12px; }
.summary .form-status:empty { margin-top: 0; }
.legal { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--grey); }
.fill-in { border-bottom: 2px dashed #e0a100; }

/* ---------- Questions and answers ---------- */

/* The questions take one side, kept compact; the robot's solo dance plays beside them.
   On a phone the video comes after the questions. */
.faq-layout { display: grid; gap: var(--column-gap); align-items: start; }
/* The video's halo is wider than its card; this stops it from making the page scroll sideways. */
.section-faq { overflow-x: clip; }
@supports not (overflow: clip) { .section-faq { overflow: hidden; } }
.faq-side .section-head { margin-bottom: clamp(18px, 2.5vw, 28px); }
.faq { border-top: 1px solid var(--line); }

/* The video card. Behind it, a soft halo takes the colour of the video's backdrop as it changes,
   so the video melts into the coloured page instead of sitting on it like a box. */
.side-video {
  --live: oklch(0.86 0.15 307);          /* the violet of the video's first picture, before it plays */
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 520px;
  justify-self: center;
  aspect-ratio: 1;
  border-radius: var(--round-big);
  background: var(--stage);
  box-shadow: 0 24px 60px -18px color-mix(in oklab, var(--live) 70%, rgba(20, 20, 40, 0.35));
  transition: --live 0.4s ease;
}
.side-video::before {
  content: "";
  position: absolute;
  inset: -22%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--live) 0%, color-mix(in oklab, var(--live) 55%, transparent) 55%, transparent 100%);
  pointer-events: none;
}
.side-video video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.side-video .hero-pause { position: absolute; right: 16px; bottom: 16px; }
@media (min-width: 900px) {
  .faq-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  /* The video stays in view while the questions scroll past and open. */
  .side-video { position: sticky; top: 96px; }
}
@media (max-width: 899px) {
  .side-video { max-width: 440px; }
  .side-video::before { inset: -14%; }
}
html:not(.js) .side-video .hero-pause { display: none; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 0;
  cursor: pointer;
  list-style: none;
  font-size: clamp(1rem, 1.5vw, 1.0625rem);
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}
.faq summary:hover { color: var(--sky-text); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 10px; height: 10px;
  margin-right: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.25s ease;
}
.faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq-answer { padding: 0 40px 18px 0; max-width: 44em; font-size: 0.95rem; color: var(--grey); }
/* Answers ease open. In browsers that can, the row also grows and shrinks smoothly. */
.faq details[open] .faq-answer { animation: rise 0.35s var(--ease) both; }
@supports (interpolate-size: allow-keywords) {
  .faq details { interpolate-size: allow-keywords; }
  .faq details::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 0.32s var(--ease), content-visibility 0.32s allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; }
}
.faq-answer p + p { margin-top: 12px; }

/* ---------- Footer ----------
   The page ends the way it starts: dark, with the colours of the video. Three parts:
   a last invitation in the words of the headline, then the brand with the links and the contact
   details, then the legal line with a way back to the top.
   The light page ends in rounded corners that sit over the top of the footer. */

.footer {
  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
  margin-top: calc(-1 * var(--cap));
  padding-block: calc(var(--section) * 0.75 + var(--cap)) 28px;
  background: linear-gradient(180deg, var(--night) 0%, #141418 100%);
  color: #b0b0b6;                   /* light enough to stay readable over the glows */
  font-size: 0.9375rem;
}
/* Two soft glows rise from the bottom edge and slowly take turns: violet and blue, then pink and cyan. */
.footer::before, .footer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.footer::before {
  background:
    radial-gradient(55% 80% at 12% 112%, rgba(126, 72, 232, 0.42) 0%, rgba(126, 72, 232, 0) 68%),
    radial-gradient(46% 72% at 88% 116%, rgba(38, 118, 222, 0.36) 0%, rgba(38, 118, 222, 0) 68%);
  animation: footer-glow 11s ease-in-out infinite alternate;
}
.footer::after {
  background:
    radial-gradient(50% 76% at 30% 116%, rgba(226, 72, 170, 0.3) 0%, rgba(226, 72, 170, 0) 68%),
    radial-gradient(48% 72% at 74% 112%, rgba(60, 176, 222, 0.3) 0%, rgba(60, 176, 222, 0) 68%);
  animation: footer-glow 11s ease-in-out infinite alternate-reverse;
}
@keyframes footer-glow { from { opacity: 1; } to { opacity: 0.15; } }

/* 1. The last invitation */
.footer-call {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  padding-bottom: clamp(32px, 5vw, 56px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-call-text {
  margin: 0;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);     /* the size of a section title */
  line-height: 1.15;
  letter-spacing: -0.022em;
  color: #fff;
  text-wrap: balance;
}
/* Here no video is in view, so the word moves through the video's colours by itself. */
.footer .live-word { animation: shine 6s ease-in-out 1.4s infinite, live-cycle 20s linear infinite; }
@keyframes live-cycle {
  0%, 100% { --live: oklch(0.86 0.15 302); }   /* violet */
  25%      { --live: oklch(0.86 0.13 258); }   /* blue */
  50%      { --live: oklch(0.86 0.09 215); }   /* cyan */
  75%      { --live: oklch(0.86 0.15 346); }   /* pink */
}

/* 2. Brand, links, contact */
.footer-main {
  display: grid;
  gap: 36px var(--column-gap);
  padding-block: clamp(32px, 5vw, 56px);
}
@media (min-width: 620px) {
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  .footer-main { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); }
  .footer-brand { grid-column: auto; }
}
.footer .logo { color: #fff; margin-right: 0; }
.footer-brand p { margin-top: 10px; max-width: 24em; }
.footer-title {
  margin-bottom: 10px;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  color: #b0b0b6;
}
.footer-links { display: grid; margin: 0; padding: 0; list-style: none; }
.footer-links a, .footer-line {
  display: inline-flex;
  align-items: center;
  min-height: 44px;                 /* easy to press on a phone */
  color: #e8e8ed;
  text-decoration: none;
  text-underline-offset: 4px;
  transition: color 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .footer-links a { min-height: 36px; }
}
.footer-links a:hover, a.footer-line:hover, .footer-top:hover { color: #fff; }
.footer-links a:hover { text-decoration: underline; }
.footer-contact { display: grid; justify-items: start; align-content: start; }
.footer-line { gap: 12px; margin: 0; }
.footer-line + .footer-line { margin-top: 8px; }
.footer-line .badge, .footer-top-arrow {
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  color: #fff;
  transition: background-color 0.2s ease, transform 0.3s var(--ease);
}
.footer-line .badge svg { width: 18px; height: 18px; }
a.footer-line:hover .badge, .footer-top:hover .footer-top-arrow { background: rgba(255, 255, 255, 0.16); }

/* 3. Legal line and the way back up */
.footer-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;   /* the other language at the left, "Back to top" at the right */
  gap: 12px 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.85rem;
}
.footer-lang { margin-right: auto; display: inline-flex; align-items: center; min-height: 44px; color: #e8e8ed; text-underline-offset: 4px; }
.footer-lang:hover { color: #fff; }
.footer-legal { margin: 0 auto 0 0; }   /* not used for now: for the legal line when it returns */
.footer-top {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  color: #e8e8ed;
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-top-arrow svg { width: 16px; height: 16px; }
.footer-top:hover .footer-top-arrow { transform: translateY(-3px); }
@media (max-width: 520px) {
  .footer-call .button { width: 100%; }
}

/* ---------- Calmer for visitors who ask for less motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html, html.is-ready { scroll-behavior: auto; }
  @view-transition { navigation: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js .reveal { opacity: 1; transform: none; }
  html.js .strip.reveal > .feature { opacity: 1; transform: none; }
}

/* ---------- Small phones ---------- */

/* The price table, stacked: what is booked with its length underneath on the left,
   the price on the right. Nothing has to squeeze into three columns. Used on small phones,
   and on small computer screens where the table only has half of the width. */
@media (max-width: 520px), (min-width: 1000px) and (max-width: 1179px) {
  .price-table, .price-table thead, .price-table tbody { display: block; }
  .price-table tr { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; padding: 14px 18px; }
  .price-table thead tr { background: var(--charcoal); }
  .price-table th, .price-table td { padding: 0; }
  .price-table .amount { grid-column: 2; grid-row: 1 / span 2; }
  .price-table td:not(.amount) { font-size: 0.9rem; color: var(--grey); }
  .price-table thead th:nth-child(2) { font-size: 0.875rem; color: rgba(255, 255, 255, 0.76); }
  .price-card .note-strong { padding-inline: 18px; }
}
/* French words are longer ("Chaque heure supplémentaire"), so the French pages keep the stacked
   table on every computer screen, where the table has half of the width. */
@media (min-width: 1180px) {
  :lang(fr) .price-table, :lang(fr) .price-table thead, :lang(fr) .price-table tbody { display: block; }
  :lang(fr) .price-table tr { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; padding: 14px 22px; }
  :lang(fr) .price-table thead tr { background: var(--charcoal); }
  :lang(fr) .price-table th, :lang(fr) .price-table td { padding: 0; }
  :lang(fr) .price-table .amount { grid-column: 2; grid-row: 1 / span 2; }
  :lang(fr) .price-table td:not(.amount) { font-size: 0.9rem; color: var(--grey); }
  :lang(fr) .price-table thead th:nth-child(2) { font-size: 0.875rem; color: rgba(255, 255, 255, 0.76); }
}
@media (max-width: 520px) {
  .price-side > .button { justify-self: stretch; }
}
@media (max-width: 359px) {
  .button-small { padding-inline: 16px; }
  .strip-top { flex-wrap: wrap; }
  .strip-top h2 { flex-basis: 100%; }
  .price-box { --group-gap: 10px; }
  .occasions label { padding-inline: 6px; font-size: 0.875rem; }
}

/* Printing once a booking request is sent ("Print or save"): only the "Request received" card,
   with its green band and check, and without its buttons. */
@media print {
  html.has-request-card body *:not(.done):not(.done *):not(:has(.done)) { display: none !important; }
  html.has-request-card :has(> .done), html.has-request-card :has(.done) {
    margin: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important;
    min-height: 0 !important; position: static !important; overflow: visible !important;
  }
  html.has-request-card .done { max-width: none; box-shadow: none; border: 1px solid var(--line); }
  html.has-request-card .done-actions { display: none; }
  .done-head, .done-check { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}