/* Small, finite gestures. Content is readable before enhancement. */
.home-video { --motion-ease: cubic-bezier(.22, 1, .36, 1); }
/* A solid purple wave grows under stable, white text. */
.home-video .button { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); transition: border-color 260ms ease, transform 130ms var(--motion-ease); }
.home-video .button::before { content: ''; position: absolute; z-index: -1; left: var(--fill-x, 50%); top: var(--fill-y, 100%); width: 250%; aspect-ratio: 1; border-radius: 50%; background: var(--purple); transform: translate(-50%, -50%) scale(0); pointer-events: none; transition: transform 260ms cubic-bezier(.4, 0, .2, 1); }
.home-video .button:focus-visible { background: var(--purple); border-color: var(--purple); }
.home-video .button:focus-visible::before { transform: translate(-50%, -50%) scale(1); transition: none; }
.home-video .button:disabled::before { transform: translate(-50%, -50%) scale(0); transition: none; }
/* Two phrases, one heading: natural wrapping and no change in layout. */
.hero-scene .hero-title-part { display: block; animation: title-unburden 850ms var(--motion-ease) 80ms backwards; }
.hero-scene .hero-title-part + .hero-title-part { animation-delay: 340ms; }
@keyframes title-unburden {
  from { clip-path: inset(0 -.12em 100% -.12em); transform: translateY(.28em); }
  to { clip-path: inset(-.12em -.12em -.16em -.12em); transform: translateY(0); }
}
.home-video .button:active { transform: scale(.985); }
.home-video .button-arrow { transition: transform 180ms var(--motion-ease); }
.hero-scene .film-open-icon { position: relative; }
.home-video .hero-scene .film-open-icon svg { margin-left: 0; transform: none; transition: none; }
.hero-scene .film-open-icon::after { content: ''; position: absolute; inset: -6px; border: 1.5px solid var(--purple); border-radius: 50%; opacity: 0; transform: scale(.86); transition: transform 220ms var(--motion-ease), opacity 220ms ease; }
.hero-scene .hero-illustration { position: relative; width: min(85%, 252px); margin-inline: auto; transform-origin: 50% 80%; }
.hero-scene .hero-illustration img { width: 100%; max-width: none; }
.hero-scene .film-panel { overflow: clip; }
.home-video :is(a, button, summary, input, select):focus-visible { outline: 2px solid var(--purple); outline-offset: 5px; }
.home-video input { caret-color: var(--purple); }
.home-video [data-keyboard] { transition: none; }

#resultat .relief-art { position: relative; }
.relief-clock { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.relief-clock-hand { transform-origin: 320px 118px; }

.home-video .example-tabs.motion-tabs { position: relative; isolation: isolate; gap: 8px; border-bottom: 0; width: max-content; }
.home-video .motion-tabs button { position: relative; z-index: 1; padding: 12px 16px; margin: 0; border: 0; border-radius: 5px; font-weight: 600; transition: color 120ms ease; }
.home-video .motion-tabs [aria-selected="true"] { background: transparent; color: var(--ink); }
.tab-selection { position: absolute; z-index: 0; top: 0; left: 0; background: var(--lilac); border: 1px solid var(--lilac); border-radius: 5px; transform-origin: top left; pointer-events: none; }

.home-video .faq-list details { overflow: clip; }
.home-video .faq-list summary { cursor: pointer; }
.home-video .faq-list summary > span { position: relative; width: 20px; height: 20px; font-size: 0; transform: none; }
.home-video .faq-list details[open] summary > span:last-child { transform: none; }
.home-video .faq-list summary > span::before,
.home-video .faq-list summary > span::after { content: ''; position: absolute; background: currentColor; border-radius: 1px; top: 9px; left: 4px; width: 12px; height: 1.5px; }
.home-video .faq-list summary > span::after { transform: rotate(90deg); transition: transform 180ms var(--motion-ease); }
.home-video .faq-list details[data-expanded="true"] summary > span::after,
.home-video .faq-list details[open]:not([data-expanded]) summary > span::after { transform: rotate(0); }
.home-video .faq-list details[data-keyboard] summary > span::after { transition: none; }

.home-video .step-number { position: relative; font-variant-numeric: tabular-nums; }
.home-video .steps li { position: relative; }
.home-video .steps li[data-motion-played] .step-number { background: var(--mint); color: var(--ink); }
.step-thread { position: absolute; top: 18px; left: 51px; right: -18px; height: 2px; background: var(--lilac); transform: scaleX(0); transform-origin: left; }
.steps li[data-motion-played] .step-thread { transform: scaleX(1); }
.steps li:last-child .step-thread { display: none; }
.step-ring { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); pointer-events: none; color: var(--purple); opacity: 0; }
.steps li[data-motion-played] .step-ring { opacity: 1; }
.home-video .expertise-reassurance .reassurance-check { width: 28px; height: 28px; flex: 0 0 28px; background: var(--mint); color: var(--ink); border-radius: 50%; }
.home-video .join-card { overflow-anchor: none; }
.home-video .join-card[data-confirmed] { position: relative; }
.home-video .join-card[data-confirmed] .form-success { position: absolute; left: 24px; right: 24px; padding-block: 16px; }
.home-video .form-submit { min-height: 52px; }
.home-video .form-submit:disabled { cursor: wait; opacity: .75; }
.success-check svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

@media (hover: hover) and (pointer: fine) {
  .home-video .button:hover:not(:disabled) { background: var(--ink); border-color: var(--purple); }
  .home-video .button:hover:not(:disabled)::before { transform: translate(-50%, -50%) scale(1); transition-duration: 520ms; transition-timing-function: cubic-bezier(.22, 1, .36, 1); }
  .hero-scene .film-open:hover .film-open-icon svg { transform: none; }
  .hero-scene .film-open:hover .film-open-icon::after { opacity: 1; transform: scale(1); }
  .home-video .text-link { transition: text-decoration-color 160ms ease, color 160ms ease; }
  .home-video .text-link:hover { color: var(--purple); }
}
@media (hover: none) {
  .home-video .button:hover { background: var(--ink); }
  .home-video .button:active { background: var(--purple); border-color: var(--purple); }
}
@media (min-width: 601px) {
  .hero-scene .hero-illustration { width: min(85%, 320px); }
}
@media (min-width: 801px) {
  .hero-scene .hero-illustration { width: 100%; max-width: 420px; }
}
@media (max-width: 760px) {
  .steps li:nth-child(2) .step-thread { display: none; }
  .step-thread { right: -12px; }
}
@media (max-width: 600px) {
  .step-thread { top: 15px; left: 44px; }
}
@media (max-width: 600px) {
  .home-video .example-tabs.motion-tabs { width: 100%; gap: 2px; }
  .home-video .motion-tabs button { flex: 1; min-width: 0; padding: 11px 6px; font-size: 12px; line-height: 1.45; }
}
@media (prefers-reduced-motion: reduce) {
  .home-video .button:active, .home-video .button:hover .button-arrow,
  .hero-scene .film-open:hover .film-open-icon svg { transform: none; }
  .home-video *, .home-video *::before, .home-video *::after { transition: none !important; animation: none !important; }
}

/* Low-contrast square modules stay clear of the final message. */
.home-video .closing-section { position: relative; isolation: isolate; overflow: clip; }
.home-video .closing-content { position: relative; z-index: 1; }
.closing-grid { position: absolute; top: 50%; width: clamp(180px, 24vw, 310px); color: var(--purple); fill: currentColor; pointer-events: none; }
.closing-grid-left { left: -7vw; transform: translateY(-50%); }
.closing-grid-right { right: -7vw; transform: translateY(-50%) scaleX(-1); }
@media (max-width: 1000px) {
  .closing-grid { width: 220px; }
  .closing-grid-left { left: -120px; }
  .closing-grid-right { right: -120px; }
}
@media (max-width: 600px) {
  .closing-grid { width: 145px; opacity: .8; }
  .closing-grid-left { left: -76px; top: -45px; transform: none; }
  .closing-grid-right { right: -76px; top: auto; bottom: -60px; transform: scaleX(-1); }
}

/* Small logo staircases occupy only the quiet corners of the pain section. */
.home-video .pain-section { position: relative; isolation: isolate; overflow: clip; }
.home-video .pain-section > .container { position: relative; z-index: 1; }
.pain-stairs { position: absolute; width: clamp(130px, 15vw, 200px); color: var(--purple); fill: currentColor; pointer-events: none; }
.pain-stairs-top { top: 28px; right: 28px; }
.pain-stairs-bottom { bottom: -90px; left: -32px; }
@media (max-width: 1100px) {
  .pain-stairs { width: 130px; }
  .pain-stairs-top { top: 12px; right: -44px; }
  .pain-stairs-bottom { bottom: -56px; left: -36px; }
}
@media (max-width: 600px) {
  .pain-stairs { width: 104px; }
  .pain-stairs-top { top: -8px; right: -58px; }
  .pain-stairs-bottom { bottom: -57px; left: -38px; }
}