/* Les Hautes Belles — gravures de Brion.
   Deux dessins originaux : tuffeau d'extraction et sarment de vigne.
   Placés dans le fond, ils restent indépendants des photos et du texte.
   Les textes, titres et compositions existants gardent leur rôle. */

.brion-section {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

.brion-section > :not(.brion-motif) {
  position: relative;
  z-index: 1;
}

.brion-motif {
  position: absolute;
  z-index: 0;
  top: 40px;
  width: clamp(340px, 43vw, 660px);
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
  opacity: .14;
  mix-blend-mode: multiply;
}

.brion-motif--left { left: -160px; }
.brion-motif--right { right: -120px; }
.brion-motif--mirror { transform: scaleX(-1); }

/* L'accueil laisse le dessin minéral entrer depuis le bord du papier. */
.home #section_2 .brion-motif {
  top: -160px;
  width: min(52vw, 720px);
  opacity: .18;
}

/* Fondre le fragment dans le papier avant la fin du court bloc d'accroche. */
.home #section_2::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100px;
  background: linear-gradient(to bottom, transparent, var(--c-paper));
  pointer-events: none;
}

.home #section_6 .brion-motif {
  top: 100px;
  right: -180px;
  width: min(48vw, 680px);
}

/* Le tuffeau accompagne les récits des sols, la vigne le chapitre vivant. */
.page-valeurs #section_2 .brion-motif,
.page-terroir .brion-motif,
.wine .brion-motif {
  top: 160px;
  left: -220px;
  opacity: .12;
}

.page-valeurs #section_3 .brion-motif {
  top: -40px;
  right: -140px;
  width: min(52vw, 740px);
}

.intro-histoire .brion-motif {
  top: -220px;
  right: -180px;
  opacity: .14;
}

/* Décor atténué sur petit écran, avec une zone de lecture dégagée. */
@media (max-width: 768px) {
  .brion-motif {
    width: 380px;
    top: 80px;
    opacity: .08;
  }
  .brion-motif--left { left: -240px; }
  .brion-motif--right { right: -260px; }
  .home #section_2 .brion-motif {
    top: -80px;
    left: -210px;
    width: 440px;
    opacity: .11;
  }
  .home #section_6 .brion-motif,
  .page-valeurs #section_3 .brion-motif {
    top: 100px;
    right: -260px;
    width: 430px;
    opacity: .10;
  }
  .page-valeurs #section_2 .brion-motif,
  .page-terroir .brion-motif,
  .wine .brion-motif {
    left: -270px;
    opacity: .08;
  }
  .intro-histoire .brion-motif {
    top: -60px;
    right: -260px;
    opacity: .09;
  }
}

@media (prefers-contrast: more), (forced-colors: active), print {
  .brion-motif { display: none; }
}