/* À propos : portrait dans la rue, étendu à toute la section. */
.page-hero.about-street {
  display: flex;
  min-height: clamp(740px, 54vw, 840px);
  padding: clamp(32px, 5vw, 76px);
  background: var(--paper);
}
.about-street::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(250, 248, 245, .93), rgba(250, 248, 245, .82) 33%, rgba(250, 248, 245, .08) 63%, transparent 72%);
}
.page-hero.about-street > .page-hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}
.about-street .page-hero-photo img { object-position: center; }
.page-hero.about-street > .page-hero-copy { max-width: 54%; z-index: 2; }
.about-street .hero-copy { max-width: 30em; }
.about-street .pill-line { background: var(--paper); }
@media (min-width: 761px) and (max-width: 1100px) {
  .about-street .page-hero-photo img { object-position: 62% center; }
}
/* Sur téléphone, la photo reste entière en haut et le texte sort du portrait. */
@media (max-width: 760px) {
  .page-hero.about-street { display: flex; flex-direction: column-reverse; min-height: 0; gap: 0; padding: 0; background: var(--wall); }
  .about-street::before { display: none; }
  .page-hero.about-street > .page-hero-photo { position: relative; inset: auto; width: 100%; max-width: none; height: clamp(320px, 100vw, 440px); flex: none; border-radius: var(--r-card); }
  .about-street .page-hero-photo img { object-position: 76% 20%; }
  .page-hero.about-street > .page-hero-copy { width: 100%; max-width: none; padding: 28px 24px 32px; }
  .about-street .hero-copy { margin-top: 22px; }
}