/* Même papier et même encre que l'ouverture. Le mot se trace, puis se surligne. */
.opening-sequence { position: relative; background: var(--papier); }
.billing-reveal { position: relative; display: grid; place-items: center; min-height: 100svh; padding: 5rem var(--gutter); background: var(--papier); color: var(--encre); }
.billing-title { max-width: 16em; margin: 0; font-size: clamp(2.5rem, calc(1.25rem + 3.5vw), 5.5rem); line-height: 1.22; letter-spacing: -.045em; text-align: center; }
.billing-line { display: block; }
.billing-word { display: inline-block; position: relative; width: 3.1em; height: 1.36em; vertical-align: -.24em; letter-spacing: normal; isolation: isolate; }
.billing-word-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.billing-handwriting { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; color: var(--papier); stroke: currentColor; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.billing-word::before { content: ''; position: absolute; inset: .02em -.03em 0; z-index: -1; background: var(--turquoise-profond); transform: rotate(-1deg); transform-origin: left center; border-radius: .03em .06em .02em .04em; }
/* Séquence épinglée : le hero passe devant le message et se replie jusqu'au surlignage, par
   transform seulement (timeline et courbes dans billing-transition.js). Le message est posé
   d'emblée sous lui ; repos à .56 écran, libéré à .7 (170svh). */
.opening-sequence.has-billing-transition { height: 170svh; }
/* Écran tactile : le repli suit le doigt sur une piste plus longue (billing-transition.js, PISTE_DOIGT). */
.opening-sequence.has-billing-transition.repli-au-doigt { height: 250svh; }
.has-billing-transition .home-arrival.is-consumed { display: contents; }
.has-billing-transition .home-arrival.is-consumed .arrival-stage { position: sticky; top: 0; z-index: 2; height: 100svh; overflow: hidden; pointer-events: none; }
.has-billing-transition .home-arrival.is-consumed .scene-panel { height: 100%; min-height: 0; pointer-events: auto; transform-origin: 0 50%; backface-visibility: hidden; }
.has-billing-transition .home-arrival.is-consumed .scene-panel::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--turquoise-profond); opacity: var(--repli-teinte, 0); }
.has-billing-transition.repli-en-cours .scene-panel, .has-billing-transition.repli-en-cours .scene-content, .has-billing-transition.repli-en-cours .scene-panel::after { will-change: transform, opacity; }
.has-billing-transition .scene-content { opacity: var(--repli-contenu, 1); transform: translateY(var(--repli-contenu-y, 0px)); }
.has-billing-transition.repli-pose .home-arrival.is-consumed .scene-panel { visibility: hidden; }
.has-billing-transition .billing-reveal { position: sticky; top: 0; z-index: 1; min-height: 0; height: 100svh; margin-top: -100svh; pointer-events: none; }
.billing-reveal.will-write .billing-handwriting path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.billing-reveal.will-write .billing-handwriting { color: color-mix(in srgb, var(--papier) var(--billing-white, 0%), var(--encre)); }
.billing-reveal.will-write .billing-word::before { transform: rotate(-1deg) scaleX(var(--billing-mark, 0)); }
.has-billing-transition .billing-reveal.will-write .billing-handwriting { color: var(--papier); }
.has-billing-transition .billing-reveal.will-write .billing-word::before { transform: rotate(-1deg); visibility: hidden; }
.has-billing-transition.repli-pose .billing-reveal.will-write .billing-word::before { visibility: visible; }
@media (max-width: 760px) {
  .billing-title { font-size: clamp(1.875rem, 8vw, 3rem); line-height: 1.3; }
  .billing-title .billing-line:last-child { margin-top: .15em; }
}
@media (prefers-reduced-motion: reduce) {
  .billing-reveal .billing-handwriting path { stroke-dashoffset: 0 !important; }
  .billing-reveal .billing-word::before { transform: rotate(-1deg) !important; }
  .billing-reveal .billing-handwriting { color: var(--papier) !important; }
}

/* Audit F-40 : l'indice de suite, entre la phrase et la bulle (jamais dessous). Posé par
   billing-transition.js une fois « facile » écrit, effacé au premier défilement. */
.billing-suite { position: absolute; left: 50%; bottom: calc(var(--dock-reserve, 116px) + 8px); width: 28px; height: 28px; margin-left: -14px; color: var(--encre); opacity: 0; pointer-events: none; transition: opacity .4s ease-out; }
.billing-suite svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.billing-reveal.suite-visible .billing-suite { opacity: .6; transition-duration: .6s; transition-delay: .3s; }
@media (prefers-reduced-motion: no-preference) {
  .billing-reveal.suite-visible .billing-suite svg { animation: billing-suite 1.8s ease-in-out .9s infinite; }
}
@keyframes billing-suite { 0%, 100% { transform: none; } 50% { transform: translateY(5px); } }