:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --nav-height: 80px;
}

/* clip preserves the viewport as the sticky scene's scroll container. */
body { overflow-x: clip; }
[id] { scroll-margin-top: calc(var(--nav-height) + 24px); }

nav {
  transition: background-color .35s, box-shadow .35s, padding .35s var(--motion-ease);
}
nav.is-scrolled {
  background: #f7f5f1;
  box-shadow: 0 1px 0 rgba(38, 35, 33, .12);
}
.nav-hamburger span { transition: transform .28s, opacity .2s; }
.nav-hamburger[aria-expanded="true"] span:first-child { transform: translateY(7px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-hamburger[aria-expanded="true"] span:last-child { transform: translateY(-7px) rotate(-45deg); }
.nav-links a { position: relative; }
.nav-links a::after {
  content: "";
  position: absolute;
  inset: auto 0 -6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--motion-ease);
}
.nav-links a:is(:hover, :focus-visible, .active)::after { transform: scaleX(1); }
a:focus-visible, button:focus-visible { outline: 2px solid #5c6554; outline-offset: 5px; }

@media (min-width: 1121px) {
  nav.is-scrolled { padding-block: .65rem; }
}
@media (max-width: 1120px) {
  nav .nav-links.open {
    top: var(--nav-height);
    max-height: calc(100dvh - var(--nav-height));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #f7f5f1;
    animation: menu-enter .28s var(--motion-ease) both;
  }
  .nav-links.open a { display: block; padding: .3rem 0; }
}
@media (max-width: 640px) {
  .hero-tag { max-width: 100%; white-space: normal; letter-spacing: 0; }
}

/* Pending states are added only after the observer has been created. */
.motion-pending {
  opacity: 0;
  translate: 0 18px;
}
.motion-visible {
  animation: reveal-enter .7s var(--motion-ease) both;
  animation-delay: var(--reveal-delay, 0ms);
}
.motion-media.motion-visible {
  animation-name: media-enter;
  animation-duration: .9s;
}
.motion-hero-enter {
  animation: reveal-enter .75s var(--motion-ease) both;
  animation-delay: var(--reveal-delay, 0ms);
}
.spec-arrow { display: inline-block; transition: translate .3s var(--motion-ease); }
@media (hover: hover) and (pointer: fine) {
  .spec-card:hover .spec-arrow { translate: 4px 0; }
  .gal-item:hover img { transform: scale(1.025); }
}

.intro3d {
  position: fixed;
  inset: 0;
  z-index: 120;
  pointer-events: none;
  overflow: hidden;
}
.intro3d-visual { position: absolute; inset: 0; }
.intro3d-layer {
  position: absolute;
  inset: 0;
  background: #eae4da;
  transition: transform .85s cubic-bezier(.76, 0, .24, 1);
}
.intro3d-layer:nth-of-type(1) { opacity: .3; transition-delay: .15s; }
.intro3d-layer:nth-of-type(2) { opacity: .6; transition-delay: .08s; }
.intro3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.intro3d-fallback {
  position: absolute;
  width: min(370px, 78vw, 55svh);
  height: auto;
  left: 50%;
  top: 43.5%;
  transform: translate(-50%, -50%);
  filter: brightness(0);
  opacity: 0;
}
.intro3d.is-fallback .intro3d-fallback { opacity: 1; }
.intro3d-wordmark {
  position: absolute;
  z-index: 2;
  top: calc(50% + min(12svh, 105px));
  left: 20px;
  right: 20px;
  text-align: center;
  color: #262321;
  pointer-events: none;
}
.intro3d-wordmark p {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  clip-path: inset(0 100% 0 0);
  opacity: 0;
  transition: clip-path .7s var(--motion-ease), opacity .35s;
}
.intro3d-wordmark p + p {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 12px;
  margin-top: 16px;
  color: #6b5d50;
  transition-delay: .12s;
}
.intro3d.show-word .intro3d-wordmark p { opacity: 1; clip-path: inset(0); }
.intro3d.is-retracting .intro3d-layer { transform: translateY(-102%); }
.intro3d.is-retracting .intro3d-wordmark,
.intro3d.is-retracting .intro3d-fallback { opacity: 0; }
.intro3d-skip {
  position: absolute;
  z-index: 3;
  top: max(24px, env(safe-area-inset-top));
  right: max(24px, env(safe-area-inset-right));
  padding: 10px;
  border: 0;
  background: transparent;
  color: #6b5d50;
  font: 500 12px 'Montserrat', system-ui, sans-serif;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  pointer-events: auto;
}
.intro3d.is-retracting .intro3d-skip { visibility: hidden; }
@media (max-width: 480px) {
  .intro3d-wordmark p { font-size: 26px; }
  .intro3d-wordmark p + p { font-size: 11px; }
}

/* Static grid is the default for no-JS, small screens and reduced motion. */
.motion-gallery {
  margin: 0;
  background: #edf0ec;
  color: #33443d;
}
.motion-stage { padding: 2.5rem 1.5rem; }
.motion-caption { margin: 0 auto 1.5rem; text-align: center; font-size: .82rem; line-height: 1.5; }
.motion-mosaic {
  max-width: 1280px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.motion-tile { min-width: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.motion-tile:first-child { grid-column: 1 / -1; max-height: 520px; }
.motion-tile img { display: block; width: 100%; height: 100%; object-fit: contain; }

@media (min-width: 901px) and (min-height: 601px) and (prefers-reduced-motion: no-preference) {
  .motion-gallery.is-enhanced { height: 180svh; }
  .is-enhanced .motion-stage {
    position: sticky;
    top: var(--nav-height);
    height: calc(100svh - var(--nav-height));
    min-height: 0;
    overflow: clip;
    padding: 2rem;
  }
  .is-enhanced .motion-caption { position: relative; z-index: 1; }
  .is-enhanced .motion-mosaic {
    --center-width: min(34vw, 460px);
    --side-width: min(26vw, 350px);
    position: absolute;
    inset: 70px 0 30px;
    display: block;
    max-width: none;
    transform: scale(var(--scene-scale, 1));
    transform-origin: center;
  }
  .is-enhanced .motion-tile {
    position: absolute;
    width: var(--side-width);
    height: auto;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    transform: translate(var(--tile-x, 0px), var(--tile-y, 0px));
    opacity: var(--satellite-opacity, 1);
  }
  .is-enhanced .motion-tile:first-child {
    z-index: 1;
    width: var(--center-width);
    max-height: none;
    opacity: 1;
  }
  .is-enhanced .motion-tile:nth-child(2),
  .is-enhanced .motion-tile:nth-child(3) { --tile-x: calc((var(--center-width) + var(--side-width)) / -2 - 18px); }
  .is-enhanced .motion-tile:nth-child(4),
  .is-enhanced .motion-tile:nth-child(5) { --tile-x: calc((var(--center-width) + var(--side-width)) / 2 + 18px); }
  .is-enhanced .motion-tile:nth-child(2),
  .is-enhanced .motion-tile:nth-child(4) { --tile-y: calc(var(--side-width) * -.375 - 9px); }
  .is-enhanced .motion-tile:nth-child(3),
  .is-enhanced .motion-tile:nth-child(5) { --tile-y: calc(var(--side-width) * .375 + 9px); }
}

@keyframes reveal-enter {
  from { opacity: 0; translate: 0 18px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes media-enter {
  from { opacity: 0; clip-path: circle(0% at 0 100%); }
  to { opacity: 1; clip-path: circle(150% at 0 100%); }
}
@keyframes menu-enter {
  from { transform: translateY(-8px); }
  to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .motion-pending, .motion-visible, .motion-hero-enter {
    opacity: 1;
    translate: none;
    clip-path: none;
  }
  .intro3d { display: none; }
  .gal-item:hover img, .gallery-item:hover img, .spec-card:hover, .btn-primary:hover { transform: none; }
}
@media print {
  .motion-pending, .motion-visible, .motion-hero-enter { opacity: 1; translate: none; animation: none; clip-path: none; }
  .intro3d { display: none; }
  .motion-gallery.is-enhanced { height: auto; }
  .is-enhanced .motion-stage { position: static; height: auto; }
  .is-enhanced .motion-mosaic { position: static; display: grid; transform: none; }
  .is-enhanced .motion-tile { position: static; width: auto; opacity: 1; transform: none; translate: none; }
}

/* 22 octobre : l'intro ne porte plus qu'une ligne sous le logo, le lieu. Elle
   garde le petit style qui etait reserve a la seconde ligne. */
.intro3d-wordmark p:only-child {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #6b5d50;
  margin-top: 0;
}
@media (max-width: 480px) {
  .intro3d-wordmark p:only-child { font-size: 11px; }
}