/* ADR 033 — Dedicated Savoir-faire page. */
.savoir-faire-page .site-header {
  --site-header-color: #24221f;
  --site-header-muted: #625c54;
  --site-header-panel: #f1ede5;
  background: rgba(241, 237, 229, .97);
}
.savoir-faire-skip { position: fixed; top: -5rem; left: 1rem; z-index: 1000; padding: 1rem; background: #24221f; color: #fff; }
.savoir-faire-skip:focus { top: 1rem; }
.savoir-faire-page a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.savoir-faire-hero { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; }
.savoir-faire-hero__visual { margin: 0; padding-right: var(--material-gutter); }
.savoir-faire-hero__visual img, .savoir-faire-hero__visual video { display: block; width: 100%; height: auto; }
.savoir-faire-hero__visual figcaption { margin-top: .8rem; color: #625c54; font-size: .8125rem; }
.savoir-faire-detail { display: grid; grid-template-columns: 1fr 1fr; }
.savoir-faire-detail__visual { margin: 0; min-width: 0; }
.savoir-faire-detail__visual img { display: block; width: 100%; height: 100%; max-height: 48rem; object-fit: cover; }
.savoir-faire-detail__copy { align-self: center; padding: clamp(3rem, 6vw, 6rem) var(--material-gutter); }
.savoir-faire-detail__copy > p:not([class]) { max-width: 30rem; color: #625c54; font-size: 1rem; line-height: 1.75; margin: 1.5rem 0; }
.savoir-faire-page .material-footer { flex-wrap: wrap; }
@media (max-width: 800px) {
  .savoir-faire-hero, .savoir-faire-detail { grid-template-columns: 1fr; }
  .savoir-faire-hero__visual { padding: 0 var(--material-gutter) 3rem; }
  .savoir-faire-detail__visual img { aspect-ratio: 4 / 3; max-height: none; }
  .savoir-faire-page h1 { font-size: clamp(2.7rem, 10vw, 4.5rem); }
}