/* Portrait de référence intégré dans une scène de bureau créée pour le site.
   Les épaules restent entières ; seul le bord du décor est fondu. */
.hero { background: #0a0f11; }
.hero::before { content: none; }
.hero::after {
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(8,13,15,.96), rgba(8,13,15,.86) 30%, rgba(8,13,15,.25) 52%, transparent 68%), linear-gradient(0deg, #0a0f11, transparent 9%);
}
.hero-lines { opacity: .035; }
.hero-copy { width: 54%; }
.hero h1 { font-size: clamp(44px, 5vw, 71px); }
.hero-lead { max-width: 470px; }
.hero-portrait {
  position: absolute;
  inset: 0 -70px;
  width: calc(100% + 140px);
  height: 100%;
  margin: 0;
  z-index: 0;
  pointer-events: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 95%, transparent);
}
.hero-portrait::before, .hero-portrait::after { content: none; }
.hero-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 64% 45%;
  filter: none;
  -webkit-mask-image: none;
  mask-image: none;
}
.hero-portrait>figcaption {
  position: absolute;
  z-index: 2;
  right: 80px;
  bottom: 18px;
  margin: 0;
  max-width: 320px;
  color: #c5bda8;
  font-size: 8px;
  line-height: 1.7;
  text-align: right;
}
.portrait-caption { display: none; }
.about-portrait-frame {
  position: relative;
  margin: 0;
  background: radial-gradient(ellipse at 50% 42%, rgba(180,151,94,.15), transparent 69%);
}
.about-portrait-frame .about-portrait {
  height: auto;
  max-height: 650px;
  object-fit: contain;
  object-position: center top;
  border: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent);
  mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent);
}
@media (min-width: 1600px) {
  .hero-portrait { inset-inline: -90px; width: calc(100% + 180px); }
  .hero-portrait>figcaption { right: 100px; }
}
@media (max-width: 1150px) and (min-width: 601px) {
  .hero h1 { font-size: clamp(39px, 5.2vw, 58px); }
  .hero-copy { width: 55%; }
  .hero-lead { max-width: 400px; }
  .hero-portrait { inset-inline: -45px; width: calc(100% + 90px); }
  .hero-portrait img { object-position: 63% 40%; }
  .hero-portrait>figcaption { right: 55px; max-width: 260px; font-size: 7px; }
}
@media (max-width: 600px) {
  .hero h1 { font-size: clamp(31px, 10vw, 54px); }
  .hero-copy { width: 100%; }
  .hero::after { background: linear-gradient(0deg, #0a0f11, transparent 5%); }
  .hero-portrait {
    position: relative;
    inset: auto;
    width: calc(100% + 40px);
    height: clamp(350px, 106vw, 500px);
    margin: 24px -20px 0;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 5%, #000 94%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 5%, #000 94%, transparent);
  }
  .hero-portrait img { object-position: 83% 42%; }
  .hero-portrait>figcaption { right: 20px; bottom: 18px; max-width: 260px; }
  .about-portrait-frame { width: min(100%, 350px); margin-inline: auto; }
}