/* Titre du hero : les premiers mots basculent tour à tour et la balançoire de l’illustration bascule avec eux. */
.hero{--muted:#6c6475;--shade:#a9a4ad}
.hero h1 .hero-line{display:block;white-space:nowrap}
.hero-rotator{position:relative}
.hero-rotator .slot{position:relative;display:inline-block;height:1.25em;vertical-align:top;perspective:700px;cursor:pointer;transition:width .55s cubic-bezier(.65,0,.35,1)}
.hero-rotator .word{position:absolute;left:0;top:0;white-space:nowrap;backface-visibility:hidden;will-change:transform,opacity}
.hero-rotator .measure{position:absolute;left:0;top:0;visibility:hidden;white-space:nowrap;pointer-events:none}
.hero h1:not(.is-ready) .hero-rotator .word{position:static}
.hero-tipping{white-space:nowrap}
.hero-dot{color:var(--coral)}

/* Bouton pause : l’animation tourne en boucle, il faut pouvoir l’arrêter. */
.hero-pause{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1px solid var(--line);border-radius:50%;background:none;color:var(--ink);cursor:pointer;transition:background-color .2s}
.hero-pause[hidden]{display:none}
.hero-pause:hover{background:#30233c0d}
.hero-pause:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
.hero-pause svg{width:15px;height:15px}
.hero-pause .icon-play,.hero-pause.is-paused .icon-pause{display:none}
.hero-pause.is-paused .icon-play{display:block}

/* La barre noire bascule à chaque changement de mot et la sphère corail rebondit. */
.hero-art .bar-one{animation:none;transition:rotate 1s cubic-bezier(.34,1.56,.64,1)}
.hero-art .sphere{transition:translate .9s cubic-bezier(.34,1.56,.64,1)}
.hero-art[data-tilt="b"] .bar-one{rotate:24deg}
.hero-art[data-tilt="b"] .sphere{translate:8px -30px}

/* L’illustration garde ses proportions : chaque forme est relative à sa largeur, pour ne pas paraître trop épaisse sur petit écran. */
@supports(width:1cqi){
.hero .hero-art{container-type:inline-size;min-height:0;aspect-ratio:41/40}
.hero-art .sphere{width:24.8cqi;height:24.8cqi;animation-name:float-scaled}
.hero-art .bar-one{height:8.1cqi;border-radius:999px}
.hero-art .bar-two{border-left-width:13cqi;border-right-width:13cqi;border-bottom-width:23.6cqi}
.hero-art .spark{font-size:18.3cqi;top:-8.5cqi}
.hero-art[data-tilt="b"] .sphere{translate:1.6cqi -6.1cqi}
@keyframes float-scaled{50%{transform:translateY(-3.5cqi)}}
}

@media(prefers-reduced-motion:reduce){.hero-rotator .slot,.hero-art .bar-one,.hero-art .sphere{transition:none}}