.hero{position:relative;isolation:isolate;overflow:clip}
.hero__inner{width:100%}
.hero-to-audit{position:relative;display:grid;place-items:center;height:clamp(2.75rem,5.5vw,4.5rem);overflow:hidden}
.hero-to-audit__line{display:block;width:min(42vw,27rem);height:1px;background:color-mix(in srgb,var(--accent) 45%,transparent)}
.hero-to-audit__pulse{position:absolute;width:.5rem;height:.5rem;border-radius:50%;background:var(--accent);box-shadow:0 0 0 .38rem color-mix(in srgb,var(--accent) 10%,transparent)}
@supports (animation-timeline:view()){
 .hero-to-audit__line{opacity:.15;transform:scaleX(.22);transform-origin:left center;animation:hero-bridge-draw linear both;animation-timeline:view();animation-range:entry 10% cover 36%}
 .hero-to-audit__pulse{opacity:0;transform:scale(.45);animation:hero-bridge-pulse linear both;animation-timeline:view();animation-range:entry 18% cover 42%}
}
@keyframes hero-bridge-draw{to{opacity:1;transform:scaleX(1)}}
@keyframes hero-bridge-pulse{to{opacity:1;transform:scale(1)}}
.hero__title{position:relative;z-index:2;isolation:isolate}
.hero h1{font-size:clamp(2.3rem,5.2vw,6.6rem)}
.hero__line{display:block;white-space:nowrap}
.hero__lead{position:relative;left:50%;width:max-content;transform:translateX(-50%)}
.hero__delivery{position:relative;white-space:nowrap}
.hero__consequence{position:relative;margin-top:0}
.hero__exister{position:relative;display:inline-block}
.hero__exister::after{content:"";position:absolute;left:.02em;right:.02em;bottom:-.07em;height:.07em;border-radius:999px;background:var(--accent);transform:scaleX(0);transform-origin:left center;animation:hero-underline-draw .9s cubic-bezier(.22,1,.36,1) .3s forwards}
@keyframes hero-underline-draw{to{transform:scaleX(1)}}
.hero__word{position:relative;display:inline-block;width:3.84em;height:.65em;vertical-align:baseline}
/* Centre avant le premier calcul JS (= etat initial de l'animation) : aucun saut. */
.hero__delivered-clients{position:absolute;top:0;left:50%;translate:-50% 0;font-size:1em;line-height:inherit;white-space:nowrap;will-change:transform}
/* Film source : rendu (pas display:none, que Safari peut refuser de decoder)
   mais invisible, superpose au canvas qui en affiche la version recomposee. */
.hero__source{position:absolute;left:0;top:0;opacity:0;pointer-events:none;z-index:0}
.hero__canvas,.hero__poster{position:absolute;left:0;top:0;display:block;width:44%;aspect-ratio:1280/720;max-width:none;height:auto;pointer-events:none;z-index:1;filter:saturate(1.2) contrast(1.02)}
/* Le film (canvas WebGL, voir js/hero-video.js) n'apparait qu'a sa premiere
   image dessinee. Avant ca, rien : la tentacule arrive hors cadre et apporte
   le mot. Le poster (mot deja depose) ne sert que de repli : reduced-motion,
   economie de donnees, lecture refusee ou film qui ne demarre pas en 4 s. */
.hero__canvas,.hero__poster{visibility:hidden}
.hero--ready .hero__canvas{visibility:visible}
.hero--static .hero__poster{visibility:visible}
.hero__inner>p,.hero__actions,.hero .rating{position:relative;z-index:2}
.hero__motion-toggle{display:block;margin:1rem auto 0;padding:.35rem .6rem;border:0;background:none;color:var(--muted);font:inherit;font-size:.75rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer;position:relative;z-index:2}
/* Place reservee meme masque : son apparition au demarrage du film ne doit
   pas decaler le hero (saut visible, et mot desaligne du texte). */
.hero__motion-toggle[hidden]{display:block;visibility:hidden}
.hero__motion-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
@media(max-width:767px){
 .hero h1{font-size:clamp(1.4rem,6.6vw,2.55rem)}
 /* Trois lignes de meme taille : meme interligne partout. Le mot incruste
    n'a ni hampe ni jambage (que des minuscules courtes) : il tient dans la
    ligne, aucune marge supplementaire n'est necessaire. */
 .hero__line{line-height:1.12}
 /* Meme mecanique que desktop (video incrustee + texte anime en overlay) :
    seule la largeur reservee pour le mot change, l'echelle video mobile
    (.615 dans measure()) etant plus large en proportion que desktop (.44). */
 .hero__word{width:4.6em}
 /* "pas juste" passe sur la ligne de "exister." : la ligne du mot ne porte
    plus que "ramener des clients," et peut etre centree d'un bloc, sans
    rogner le mot ni laisser de trou. Contenu CSS (lu par les lecteurs
    d'ecran) plutot qu'un doublon HTML, pour garder le texte source intact. */
 .hero__tail{display:none}
 .hero__consequence::before{content:"pas juste "}
 .hero__delivered-clients{text-align:left}
 .hero{padding-bottom:2.25rem}
}
@media(min-width:768px) and (max-width:1350px){
 .hero__consequence{font-size:.84em;white-space:nowrap}
}
@media(min-width:768px){
 .hero{--hero-optical-shift:0px}
 /* Interlignes egaux (1,45 x la taille de la ligne du milieu) malgre les
    lignes a .87em : meme hauteur de boite pour les trois, puis la ligne du
    milieu remonte de (ascendante - descendante) / 2 x .13em = .05em
    (General Sans : 1.01 - 0.24), sinon l'ecart du haut serait plus grand. */
 .hero__lead,.hero__consequence{line-height:calc(1.45em / .87)}
 .hero__delivery{line-height:1.45;top:-.05em}
 .hero__lead{left:calc(50% - var(--hero-optical-shift));font-size:.87em}
 .hero__consequence{font-size:.87em;transform:translateX(calc(var(--hero-optical-shift) * -1))}
}
@media(prefers-reduced-motion:reduce){
 .hero__canvas{visibility:hidden!important}
 .hero__poster{visibility:visible!important}
 .hero__motion-toggle,.hero__motion-toggle[hidden]{display:none}
 .hero__exister::after{animation:none;transform:scaleX(1)}
 .hero-to-audit__line{opacity:.7;transform:none;animation:none}
 .hero-to-audit__pulse{opacity:1;transform:none;animation:none}
}