/* Hero « bloc ouvert » (02.11.2026) : remplace les vitrines. Des blocs noirs, un seul ouvert sur un intérieur crème
   avec le carré rouge du logo. Titre : « Votre différence se voit. ». Image : ChatGPT, bords fondus dans le fond. */
.bloc-hero.journey{height:auto;min-height:0}
.bloc-hero .hero{height:auto;min-height:100svh;position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(28px,4vw,76px);padding:118px 6% 72px}
.bloc-hero .hero-copy{position:relative;top:auto;left:auto;opacity:1;transform:none}
.bloc-hero .hero-copy .price strong{white-space:nowrap}
.hero-sub{font-size:clamp(20px,1.9vw,28px);font-weight:380;letter-spacing:-.02em;line-height:1.2;margin:.7em 0 0}
.hero-sub strong{font-weight:620}

.bloc{position:relative;height:min(80svh,860px);aspect-ratio:4/5;margin:0}
.bloc img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity 1.6s ease,transform 2.4s cubic-bezier(.22,1,.36,1);
  /* le fond de l'image n'a pas tout à fait le noir du site : ses bords se perdent dans la page */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(transparent,#000 14%,#000 86%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(transparent,#000 14%,#000 86%,transparent);
  mask-composite:intersect}
/* pendant l'intro du logo, l'image attend dans le noir, puis apparaît */
html[data-logo-intro] .bloc img{opacity:0;transform:scale(1.03)}

@media(max-width:900px){
  .bloc-hero .hero{grid-template-columns:1fr;padding:104px 16px 64px;gap:44px;min-height:0}
  /* sur téléphone, le haut de l'image est vide : on cadre sur les blocs */
  .bloc{height:auto;width:100%;max-width:520px;justify-self:center;aspect-ratio:1/1;margin-top:-24px}
  .bloc img{object-position:50% 72%}
}
@media(prefers-reduced-motion:reduce){.bloc img{transition:none}}