/* Shared top-header motion for the public site, private gallery and Studio. */
html body .site-header {
  transition: transform .34s cubic-bezier(.2, 0, 0, 1), color .48s cubic-bezier(.2, 0, 0, 1), height .38s cubic-bezier(.2, 0, 0, 1), min-height .38s cubic-bezier(.2, 0, 0, 1), padding .38s cubic-bezier(.2, 0, 0, 1);
}
html.header-scroll-hidden body .site-header {
  transform: translate3d(0, -100%, 0);
  pointer-events: none;
}
@media (max-width: 600px) {
  /* The public iPhone header stays in the viewport, including at page top. */
  html.public-iphone-fixed-header body #accueil > .site-header {
    position: fixed;
    transform: none;
    pointer-events: auto;
  }
}
@media (min-width: 1101px) {
  /* Only the private horizontal header belongs to the page. */
  html body .site-header.client-private-header { position: absolute; top: 0; }
  html.header-scroll-hidden body .site-header.client-private-header { transform: none; pointer-events: auto; }
  html {
    --header-quick-surface: rgba(22, 22, 22, .9);
    --header-quick-border: rgba(255, 255, 255, .18);
    --header-quick-ink: #fff;
  }
  html[data-header-quick-tone="dark"] {
    --header-quick-surface: rgba(248, 248, 246, .94);
    --header-quick-border: rgba(16, 16, 16, .18);
    --header-quick-ink: #101010;
  }
  html body .header-quick-toggle {
    position: fixed;
    z-index: 1201;
    bottom: max(24px, env(safe-area-inset-bottom));
    right: max(24px, env(safe-area-inset-right));
    box-sizing: border-box;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 1px solid var(--header-quick-border);
    border-radius: 50%;
    background: var(--header-quick-surface);
    box-shadow: 0 8px 26px rgba(0, 0, 0, .22);
    color: var(--header-quick-ink);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 80px, 0);
    transition: transform .42s cubic-bezier(.2, 0, 0, 1), opacity .3s ease, visibility 0s linear .42s, background-color .35s ease, color .35s ease, border-color .35s ease;
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    backdrop-filter: blur(18px) saturate(135%);
  }
  html.header-scroll-hidden body .header-quick-toggle,
  html body.header-quick-menu-open .header-quick-toggle {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    transition-delay: 0s;
  }
  html body .header-quick-toggle > span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 21px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: transform .32s cubic-bezier(.2, 0, 0, 1);
  }
  html body .header-quick-toggle > span + span { transform: translate(-50%, -50%) rotate(90deg); }
  html body.header-quick-menu-open .header-quick-toggle > span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
  html body.header-quick-menu-open .header-quick-toggle > span + span { transform: translate(-50%, -50%) rotate(-45deg); }
  html body .header-quick-toggle:focus-visible { outline: 2px solid var(--header-quick-ink); outline-offset: 3px; }
  html body .header-quick-overlay {
    position: fixed;
    z-index: 1200;
    inset: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 88px 6vw 42px;
    overflow-y: auto;
  }
  html body .header-quick-overlay[hidden] { display: none; }
  html body .header-quick-overlay nav > :is(a,button):focus-visible,
  html body .header-quick-overlay .language-switch button:focus-visible { outline: 2px solid #f4f4f4; outline-offset: 4px; }
}
/* One visual rule for the existing iPhone menu and its desktop overlay. */
html body :is(.site-header:not(#site-header) .mobile-menu, .header-quick-overlay) {
  background: rgba(0, 0, 0, .75);
  color: #f1f1f1;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
html body :is(.site-header:not(#site-header) .mobile-menu, .header-quick-overlay) nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}
html body :is(.site-header:not(#site-header) .mobile-menu, .header-quick-overlay) nav > :is(a, button) {
  width: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: #f1f1f1;
  font: inherit;
  font-size: clamp(27px, 8.2vw, 38px);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -.03em;
  text-align: left;
  text-decoration: none;
  opacity: var(--menu-item-opacity, .28);
  cursor: pointer;
}
html body :is(.site-header:not(#site-header) .mobile-menu, .header-quick-overlay) nav > :is(a, button).active,
html body :is(.site-header:not(#site-header) .mobile-menu, .header-quick-overlay) nav > :is(a, button):is(:hover, :focus-visible) {
  opacity: 1;
}
html body :is(.site-header:not(#site-header) .mobile-menu, .header-quick-overlay) .language-switch {
  --header-text: #f1f1f1;
  display: flex !important;
  flex-wrap: wrap;
  gap: 7px;
  margin: 28px 0 0;
  color: #f1f1f1;
  font-size: 14px;
}
html body :is(.site-header:not(#site-header) .mobile-menu, .header-quick-overlay) .language-switch button {
  color: #f1f1f1;
  opacity: .28;
  font-size: 14px;
  font-weight: 500;
}
html body :is(.site-header:not(#site-header) .mobile-menu, .header-quick-overlay) .language-switch button.is-active { opacity: 1; }
@media (max-width: 1100px) {
  html body .header-quick-toggle,
  html body .header-quick-overlay { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  html body .site-header { transition: none; }
  html body .header-quick-toggle,
  html body .header-quick-toggle > span { transition: none; }
}
