/* Un décor vectoriel, dans la même encre que les motifs de la maison. */
.hero:has(.hero-pan) .hero-content { padding-bottom: 100px; }
.hero:has(.hero-pan) .hero-bottom { margin-top: 72px; position: relative; z-index: 2; }
.hero:has(.hero-pan) .hero-leaves { width: 100px; height: 130px; top: 235px; opacity: .7; }
.hero-pan {
  position: absolute;
  z-index: 1;
  right: max(var(--gutter), calc(50% - 580px));
  bottom: 62px;
  width: clamp(400px, 42vw, 550px);
  aspect-ratio: 31 / 18;
  color: var(--accent);
  pointer-events: none;
  user-select: none;
}
.hero-pan-scene { width: 100%; height: auto; overflow: visible; }
.hero-pan-rig { transform-origin: 390px 246px; }
.hero-pan-food { transform-box: fill-box; transform-origin: center; }
.hero-pan-steam { opacity: 0; }
.hero-pan-steam path { opacity: 0; transform-box: fill-box; transform-origin: center bottom; }
@media (min-width: 1001px) and (max-height: 800px) {
  .hero:has(.hero-pan) { padding-top: 34px; }
  .hero:has(.hero-pan) .hero-content { padding-top: 36px; padding-bottom: 76px; }
  .hero:has(.hero-pan) h1 { font-size: clamp(48px, 4.6vw, 68px); }
  .hero:has(.hero-pan) .hero-eyebrow { margin-bottom: 20px; }
  .hero:has(.hero-pan) .hero-copy { margin-block: 22px; line-height: 1.75; }
  .hero:has(.hero-pan) .hero-bottom { margin-top: 44px; padding-block: 20px; }
}
@media (min-width: 1600px) {
  .hero-pan { right: calc(50% - 620px); }
}
@media (max-width: 1000px) {
  .hero:has(.hero-pan) .hero-content { padding-bottom: 180px; }
  .hero:has(.hero-pan) .hero-bottom { margin-top: 40px; }
  .hero-pan { width: 430px; right: calc(50% - 255px); bottom: 75px; }
}
@media (max-width: 700px) {
  .hero:has(.hero-pan) .hero-content { padding-bottom: 172px; }
  .hero:has(.hero-pan) .hero-bottom { margin-top: 30px; }
  .hero:has(.hero-pan) .hero-leaves { width: 65px; height: 90px; top: 290px; }
  .hero-pan { width: min(390px, 96%); right: -1%; bottom: 74px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-pan-rig, .hero-pan-food, .hero-pan-steam path { transform: none !important; }
  .hero-pan-food { opacity: 1 !important; }
  .hero-pan-steam { opacity: 0 !important; }
}
@media print {
  .hero-pan { display: none; }
  .hero:has(.hero-pan) .hero-content { padding-bottom: 30px; }
}