/* Le personnage provient du poulpe transmis par le client. Le décor a été
   nettoyé pour que l'ancienne mascotte ne soit jamais visible derrière lui. */
.page-accueil .mockup-home-continuum {
  background-image: url('assets/poulpe-fourni-lunettes-tablette.png'), url('assets/hero-sans-poulpe.png');
  background-size: clamp(270px, 21vw, 320px) auto, 100% auto;
  background-position: right 10% top 85px, center -60px;
  background-repeat: no-repeat;
}

.page-accueil .mockup-home-continuum > .about-band {
  background-image: linear-gradient(90deg,rgba(255,255,255,.94),rgba(255,255,255,.79) 42%,rgba(255,255,255,.03) 74%), url('assets/hero-sans-poulpe.png');
}

.page-expertises .hero.compact,
.page-equipe .hero.compact,
.page-references .hero.compact,
.page-contact .hero.compact {
  background-image: linear-gradient(90deg,rgba(255,255,255,.76),rgba(255,255,255,.3) 45%,transparent 72%), url('assets/poulpe-fourni-lunettes-tablette.png'), url('assets/hero-sans-poulpe.png');
  background-size: auto, clamp(260px, 21vw, 320px) auto, cover;
  background-position: center, right 10% top 0, center 48%;
  background-repeat: no-repeat;
}

@media (max-width: 700px) {
  .page-accueil .mockup-home-continuum { background: none; }

  .page-accueil .mockup-home-continuum > .hero {
    background-image: linear-gradient(90deg,rgba(255,255,255,.91),rgba(255,255,255,.58) 53%,rgba(255,255,255,.03)), url('assets/poulpe-fourni-lunettes-tablette.png'), url('assets/hero-sans-poulpe.png');
    background-size: auto, 155px auto, auto 290px;
    background-position: center, right -19px bottom -18px, center top;
    background-repeat: no-repeat;
  }

  .page-accueil .mockup-home-continuum > .about-band {
    background-image: linear-gradient(90deg,rgba(255,255,255,.97),rgba(255,255,255,.78) 49%,rgba(255,255,255,.05)), url('assets/hero-sans-poulpe.png');
  }

  .page-expertises .hero.compact,
  .page-equipe .hero.compact,
  .page-references .hero.compact,
  .page-contact .hero.compact {
    background-image: linear-gradient(90deg,rgba(255,255,255,.92),rgba(255,255,255,.62) 57%,rgba(255,255,255,.05)), url('assets/poulpe-fourni-lunettes-tablette.png'), url('assets/hero-sans-poulpe.png');
    background-size: auto, 165px auto, auto 300px;
    background-position: center, right -20px bottom -12px, 66% center;
  }
}