/* Accueil : uniquement le haut de page (animation en direct + marque + accroche + bouton vidéo). */
.hero{position:relative;overflow:hidden;background:#fff;height:calc(100vh - var(--nav));height:calc(100svh - var(--nav));min-height:480px;display:grid;place-items:center}
.hero-anim{position:absolute;inset:0;pointer-events:none;animation:ha-in 1.4s .3s var(--ease) both}
@keyframes ha-in{from{opacity:0}to{opacity:1}}
.hero-anim .ha{position:absolute;left:0;top:0}
.ha-m{transform-origin:0 0}
.ha-m svg{position:absolute;left:0;top:0}
.ha-sq{border:3px solid rgba(127,53,198,.6)}
.ha-sq.f{border:0;background:var(--grad)}
.ha-flow{height:5px;background:var(--grad)}
.ha-ln{position:absolute;left:0;height:14px;background:var(--grad);transform-origin:left center}
.ha-cl{position:absolute;height:12px;transform-origin:left center}
.ha-cur{position:absolute;left:0;top:0;width:10px;height:16px;background:var(--t)}
.ha-cal{display:grid;grid-template-columns:repeat(5,58px);gap:10px}
.ha-cal i{display:block;width:58px;height:42px;border:2px solid rgba(26,14,46,.18)}
.ha-cal i.on{border-color:transparent;background:var(--grad)}
.ha-bars{width:330px;height:230px;display:flex;justify-content:space-between;align-items:flex-end;border-bottom:3px solid var(--t)}
.ha-bars i{display:block;width:44px;height:100%;background:linear-gradient(0deg,#7f35c6,#e0702a);transform-origin:center bottom}

.hero-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 var(--pad)}
.brandmark{display:flex;align-items:center;gap:.18em;margin:0;font:800 clamp(44px,8vw,150px)/1 var(--font);letter-spacing:-.02em;color:var(--t)}
.bm-sq{display:grid;place-items:center;width:1.12em;height:1.12em;background:var(--grad);animation:bm-pop .9s .15s cubic-bezier(.34,1.56,.64,1) both}
.bm-sq span{color:#fff;font-size:.84em;line-height:1}
.bm-word{animation:bm-rev 1s .55s var(--ease) both}
@keyframes bm-pop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes bm-rev{from{clip-path:inset(-15% 100% -15% 0)}to{clip-path:inset(-15% 0 -15% 0)}}
.hero-p{max-width:30em;margin-top:clamp(18px,3vh,30px);font:500 clamp(18px,1.6vw,23px)/1.45 var(--font);color:var(--t2);animation:r-up .8s 1.1s var(--ease) both}
.hero-p b{color:var(--t);font-weight:700}
@keyframes r-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

/* Bouton vidéo */
.film-cta{display:inline-flex;align-items:center;gap:18px;margin-top:clamp(22px,3.6vh,38px);padding:10px 30px 10px 10px;background:var(--t);color:#fff;border-radius:var(--r);text-align:left;transition:background-color .2s;animation:r-up .8s 1.35s var(--ease) both}
.film-cta:hover{background:#2a1a45}
.fc-ic{display:grid;place-items:center;width:64px;height:64px;background:var(--grad);border-radius:var(--r)}
.fc-ic svg{width:26px;height:26px;margin-left:3px}
.fc-t b{display:block;font:800 21px/1.1 var(--font);letter-spacing:-.01em}
.fc-t small{display:flex;align-items:center;gap:7px;margin-top:5px;font:600 14px/1 var(--font);color:rgba(255,255,255,.7)}
.fc-t small svg{width:16px;height:16px}
@media(max-width:700px){
  .film-cta{padding-right:20px;gap:14px}
  .fc-ic{width:54px;height:54px}
  .fc-t b{font-size:18px}
}