/* Punchline au centre de la scène du H. Réserve de 300vh au début de la scène (pilotée par --pq, posé par punch.js) ;
   la convergence du H garde sa distance d'origine (280svh − 100 = 180vh ; mobile 240svh − 100 = 140vh). */
.relie { --reserve-punch: 300; height: 580svh; }
@media (max-width: 760px) { .relie { height: 540svh; } }
.punch { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: calc(var(--barre) + 16px) var(--gouttiere) clamp(140px, 22vh, 220px); pointer-events: none; text-align: center; }
.punch__titre { margin: 0; display: grid; font-size: clamp(2.5rem, 8.4vw, 9rem); letter-spacing: -0.046em; line-height: 0.95; text-wrap: balance; color: var(--texte); text-shadow: 0 0 28px var(--fond), 0 0 6px var(--fond); }
.punch__ligne { display: block; grid-area: 1 / 1; align-self: center; transition: none; }
.punch__hub { color: inherit; letter-spacing: -0.01em; }
/* Pendant la punchline, « Aujourd'hui, dispersé. » attend */
.js-mouvement .relie__avant { opacity: calc((1 - var(--q, 0) * 2.2) * clamp(0, (var(--pq, 0) - 0.97) / 0.03, 1)); }
.js-mouvement .relie__sources span { opacity: calc((1 - var(--q, 0) * 1.6) * clamp(0, (var(--pq, 0) - 0.97) / 0.03, 1)); }
/* Mouvement réduit ou sans JS : L2 seule, statique, centrée ; pas de réserve */
.no-mouvement .relie, html:not(.js) .relie { --reserve-punch: 0; }
.no-mouvement .punch, html:not(.js) .punch { position: relative; inset: auto; padding: clamp(72px, 12vh, 140px) var(--gouttiere) var(--e-6); }
.no-mouvement .punch__l2, html:not(.js) .punch__l2 { transform: none; }
html:not(.js) .punch__l2 { opacity: 1; }
.no-mouvement .punch__l1, html:not(.js) .punch__l1 { display: none; }

/* Transition pilotée par punch.js : les lignes restent visibles, ce sont les mots et les lettres qui bougent */
.js-mouvement .punch__l1, .js-mouvement .punch__l2 { opacity: 1; }
.punch__mot, .punch__lettre { display: inline-block; will-change: transform, opacity, filter; }
.punch__lettre { transform-origin: 50% 60%; }
.punch__hub { display: inline-block; transform-origin: 30% 60%; --lueur: 0; }
.punch__hub svg { filter: drop-shadow(0 0 calc(var(--lueur) * 0.28em) color-mix(in srgb, var(--accent) calc(var(--lueur) * 85%), transparent)); }
.punch__hub > span { text-shadow: 0 0 28px var(--fond), 0 0 calc(var(--lueur) * 0.35em) color-mix(in srgb, var(--accent) calc(var(--lueur) * 60%), transparent); }
/* Mouvement réduit : fondu simple de L2 */
.punch--fondu .punch__l2 { opacity: 0; transition: opacity .9s ease; }
.punch--fondu.punch--vu .punch__l2 { opacity: 1; }
.punch__hub circle { transform-box: fill-box; transform-origin: center; }
.punch__toile { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }