/* ==========================================================================
   Hero : logo animé (accueil) / photo aléatoire (autres pages)
   ========================================================================== */

/* --papco-hero-height = partie visible sous le header. Le hero remonte sous le header fixe. */
.papco-hero {
  --papco-hero-height: clamp(16rem, 23.6vw, 36rem);
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: calc(var(--papco-hero-height) + var(--papco-header-height, 4.75rem));
  margin-top: calc(var(--papco-header-height, 4.75rem) * -1);
  overflow: hidden;
  background: #fff;
}

/* --- Accueil : logo animé --- */
.papco-hero--logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--papco-header-height, 4.75rem);
}

.papco-hero-logo {
  display: block;
  width: min(62.5rem, 90%);
  height: auto;
  max-height: 80%;
}

/* Accueil, grand écran : le hero s'adapte pour que tout tienne dans la première fenêtre
   (chiffres, expertises, certifications, footer). --papco-below-hero = hauteur de tout ce qui
   est sous le hero ; la valeur ci-dessous est une estimation, affinée par assets/js/footer-scroll.js.
   Plafond : 23,6 vw (proportions du mockup). Plancher : 10 rem. */
@media (min-width: 64rem) and (min-height: 40rem) {
  .papco-home .papco-hero--logo {
    --papco-hero-height: clamp(10rem, calc(100vh - var(--papco-below-hero, 35rem) - var(--papco-header-height, 4.75rem)), 23.6vw);
  }
}

/* --- Autres pages : photo --- */
.papco-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% var(--papco-hero-pos-y, 62%);
}

@media (max-width: 48rem) {
  .papco-hero {
    --papco-hero-height: 14rem;
  }
}