@font-face {
  font-family: 'HB Label';
  src: url('../fonts/herbier/work-sans-v18-latin-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Le papier est un premier plan ajouré ; le film existant reste dessous. */
.label-intro { display: none; }
html.label-intro-pending { overflow: hidden; }
html.label-intro-pending .label-intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  isolation: isolate;
  cursor: pointer;
}
.label-intro__paper,
.label-intro__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .85; }
.label-intro__paper {
  background: #eee5d7 url('../img/etiquette-parchemin-v2.jpg') center / cover no-repeat;
  /* Keep the film visible at the sides while the detailed canvas is loading. */
  clip-path: polygon(3.8% 0, 96.2% 0, 96% 7%, 96.3% 16%, 96.1% 28%, 96.4% 37%, 96% 46%, 96.3% 57%, 96.1% 68%, 96.4% 78%, 96.2% 88%, 96.3% 100%, 3.7% 100%, 3.9% 91%, 3.6% 81%, 3.9% 70%, 3.7% 61%, 4% 50%, 3.6% 39%, 3.9% 30%, 3.7% 20%, 4% 9%);
}
.label-intro__canvas { display: block; visibility: hidden; pointer-events: none; }
.label-intro[data-phase='ready'] .label-intro__canvas,
.label-intro[data-phase='ink'] .label-intro__canvas { visibility: visible; }
.label-intro[data-phase='ready'] .label-intro__paper,
.label-intro[data-phase='ink'] .label-intro__paper { visibility: hidden; }
.label-intro__name {
  position: absolute;
  width: 82%;
  top: 24%;
  left: 9%;
  height: auto;
  opacity: .13;
  filter: drop-shadow(1px 1px 0 #fff);
}
.label-intro__enter {
  position: absolute;
  left: clamp(24px, 8vw, 128px);
  bottom: max(38px, calc(5.5vh + env(safe-area-inset-bottom)));
  padding: 12px 0;
  color: #6e6659;
  font: 300 12px/1.5 'HB Label', sans-serif;
  letter-spacing: .03em;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #a9a18e;
  cursor: pointer;
  transition: opacity .35s ease;
}
.label-intro__enter:focus-visible { outline: 1px solid #665f51; outline-offset: 7px; }
.label-intro[data-phase='ink'] .label-intro__enter { opacity: 0; pointer-events: none; }
html.label-intro-pending .home .header,
html.label-intro-pending .hb-hero__content { visibility: hidden; }
html.label-intro-pending #section_1::after { opacity: 0; }
html.label-intro-pending .home .banner,
html.label-intro-pending .home .hb-hero__content { min-height: 100dvh; }
html.label-intro-pending .banner.video-fallback .banner__poster { animation-play-state: paused; }
@media (max-width: 700px) {
  .label-intro__enter { font-size: 11px; bottom: max(28px, calc(4vh + env(safe-area-inset-bottom))); }
}
@media (max-width: 700px) and (orientation: portrait) {
  .label-intro__paper {
    clip-path: polygon(0 3.8%, 9% 4%, 20% 3.7%, 30% 3.9%, 39% 3.6%, 50% 4%, 61% 3.7%, 70% 3.9%, 81% 3.6%, 91% 3.9%, 100% 3.7%, 100% 96.3%, 88% 96.2%, 78% 96.4%, 68% 96.1%, 57% 96.3%, 46% 96%, 37% 96.4%, 28% 96.1%, 16% 96.3%, 7% 96%, 0 96.2%);
  }
  .label-intro__enter { bottom: max(48px, calc(6.5vh + env(safe-area-inset-bottom))); }
}
@media (prefers-reduced-motion: reduce) {
  .label-intro__enter { transition: none; }
}