/* MAWAY V2.1 — langage motion partagé. Aucun contenu ne dépend de ces effets. */

@view-transition { navigation: auto; }

::view-transition-old(root) { animation: maway-root-out 240ms var(--ease-in-out) both; }
::view-transition-new(root) { animation: maway-root-in 420ms var(--ease-out) both; }
::view-transition-group(maway-universe) { animation-duration: 520ms; animation-timing-function: var(--ease-premium); }
::view-transition-old(maway-universe) { animation: maway-shared-old 520ms var(--ease-premium) both; }
::view-transition-new(maway-universe) { animation: maway-shared-new 520ms var(--ease-premium) both; }

.universe-tile.is-transition-source { view-transition-name: maway-universe; }
.universe-hero { view-transition-name: maway-universe; }
.universe-page { background: var(--hero-bg); }

@keyframes maway-root-out { to { opacity: .35; } }
@keyframes maway-root-in { from { opacity: 0; } }
@keyframes maway-shared-old { to { opacity: 0; filter: brightness(1.08); } }
@keyframes maway-shared-new { from { opacity: 0; filter: brightness(1.08); } }

/* Accès direct à un univers : signature courte puis raccord au header. */
html.motion-universe-intro-pending body.universe-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10900;
  pointer-events: none;
  background: #0d0e10;
}
html.motion-universe-intro-pending .universe-header .universe-brand,
html.motion-universe-intro-playing .universe-header .universe-brand {
  visibility: hidden;
  pointer-events: none;
}
html.motion-universe-intro-playing.motion-enabled:not(.motion-ready) .universe-header__inner { transform: none; }
.universe-entry {
  --universe-entry-x: 0px;
  --universe-entry-y: 0px;
  --universe-entry-scale: .7;
  position: fixed;
  inset: 0;
  z-index: 11000;
  overflow: hidden;
  pointer-events: none;
  color: #f7f7f3;
}
.universe-entry__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 38%),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    #0d0e10;
  background-size: auto, 4rem 4rem, 4rem 4rem, auto;
  transition: opacity 380ms var(--ease-in-out);
}
.universe-entry__brand-track {
  position: fixed;
  top: 45svh;
  left: 50%;
  width: max-content;
  transform: translate3d(-50%, -50%, 0);
  transform-origin: center;
  transition: transform 380ms var(--ease-premium);
  will-change: transform;
}
.universe-entry__brand {
  display: inline-flex;
  align-items: center;
  gap: clamp(.75rem, 2vw, 1.2rem);
}
.universe-entry__brand .universe-brand__logo {
  width: clamp(9rem, 22vw, 13rem);
  opacity: 0;
  transform: scale(.94);
  transition: opacity 140ms ease, transform 240ms var(--ease-out);
}
.universe-entry__brand .universe-brand__divider {
  height: clamp(1.7rem, 4vw, 2.4rem);
  transform: scaleY(0);
  transition: transform 220ms 70ms var(--ease-premium);
}
.universe-entry__brand .universe-brand__name {
  max-width: none;
  overflow: hidden;
  color: #f7f7f3;
  font-size: clamp(.72rem, 1.8vw, 1rem);
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transform: translateX(.45rem);
  transition: opacity 150ms 80ms ease, clip-path 260ms 80ms var(--ease-premium), transform 260ms 80ms var(--ease-premium);
}
.universe-entry.is-active .universe-brand__logo { opacity: 1; transform: none; }
.universe-entry.is-active .universe-brand__divider { transform: scaleY(1); }
.universe-entry.is-active .universe-brand__name { opacity: 1; clip-path: inset(0); transform: none; }
.universe-entry.is-handoff .universe-entry__backdrop { opacity: 0; }
.universe-entry.is-handoff .universe-entry__brand-track {
  transform: translate3d(calc(-50% + var(--universe-entry-x)), calc(-50% + var(--universe-entry-y)), 0) scale(var(--universe-entry-scale));
}

/* Continuité d’arrivée pour les navigateurs sans transition inter-document. */
html.motion-arrival body::before {
  content: "";
  position: fixed;
  inset: -2px;
  z-index: 10000;
  pointer-events: none;
  background: var(--transition-accent, #318ce7);
  clip-path: circle(150vmax at var(--transition-x, 50%) var(--transition-y, 50%));
  animation: maway-arrival 760ms 60ms var(--ease-premium) both;
}

@keyframes maway-arrival {
  0%, 10% { clip-path: circle(150vmax at var(--transition-x, 50%) var(--transition-y, 50%)); }
  100% { clip-path: circle(0 at var(--transition-x, 50%) var(--transition-y, 50%)); }
}

html.is-transitioning { overflow: hidden; }
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 10500;
  display: grid;
  place-items: center;
  pointer-events: all;
  color: #071019;
  background: var(--transition-accent, #318ce7);
  clip-path: circle(0 at var(--transition-x, 50%) var(--transition-y, 50%));
  transition: clip-path 520ms var(--ease-premium);
}
.page-transition.is-active { clip-path: circle(150vmax at var(--transition-x, 50%) var(--transition-y, 50%)); }
.page-transition span {
  font: 760 clamp(1.8rem, 6vw, 5.8rem)/1 var(--font-display);
  letter-spacing: -.055em;
  opacity: 0;
  transform: translateY(.7rem);
  transition: opacity 220ms 130ms ease, transform 380ms 100ms var(--ease-out);
}
.page-transition.is-active span { opacity: .72; transform: none; }

/* Introduction signature : le vrai logo se construit puis devient l’interface. */
.motion-intro {
  --intro-target-x: 0px;
  --intro-target-y: 0px;
  --intro-target-scale: .34;
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: none;
  overflow: hidden;
  color: #f7f7f3;
  contain: layout paint style;
  touch-action: pan-y;
}
html.motion-intro-pending .motion-intro,
html.motion-intro-playing .motion-intro,
.motion-intro.is-active { display: block; }

/* Le header garde sa mise en page, mais son vrai logo attend le handoff final. */
html.motion-intro-pending .portal__header img,
html.motion-intro-playing .portal__header img {
  opacity: 0;
  visibility: hidden;
}
.motion-intro__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 44%, rgba(49,140,231,.2), transparent 35%),
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px),
    #0d0e10;
  background-size: auto, 4rem 4rem, 4rem 4rem, auto;
  opacity: 1;
  transform: scale(1.025);
  transition: opacity 620ms var(--ease-in-out), transform 850ms var(--ease-premium);
  will-change: opacity, transform;
}
.motion-intro__backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(108deg, transparent 25%, rgba(255,255,255,.035) 49.8%, transparent 50.2%);
  opacity: 0;
  transform: translateX(-18%);
  transition: opacity 300ms 160ms ease, transform 840ms 80ms var(--ease-premium);
}
html.motion-intro-pending .motion-intro__backdrop::after,
.motion-intro.is-active .motion-intro__backdrop::after { opacity: 1; transform: translateX(18%); }

.motion-intro__brand-track {
  position: fixed;
  top: 45svh;
  left: 50%;
  z-index: 2;
  width: min(76vw, 32rem);
  aspect-ratio: 700 / 174;
  transform: translate3d(-50%, -50%, 0);
  transform-origin: center;
  transition: transform 680ms var(--ease-premium);
  will-change: transform;
}
.motion-intro__brand { position: relative; width: 100%; height: 100%; isolation: isolate; }
.motion-intro__symbol,
.motion-intro__symbol-seal {
  position: absolute;
  top: 0;
  left: 0;
  width: 24.8572%;
  height: 100%;
}
.motion-intro__symbol { opacity: 0; will-change: opacity, transform; }
.motion-intro__symbol img { width: 100%; height: 100%; object-fit: contain; }
.motion-intro__symbol-seal { object-fit: contain; }
.motion-intro__symbol--a {
  clip-path: polygon(0 0, 58% 0, 50% 52%, 0 58%);
  transform: translate3d(-1.1rem, -.7rem, 0) rotate(-7deg) scale(.88);
  transition: opacity 150ms 30ms ease, transform 480ms 30ms var(--ease-premium);
}
.motion-intro__symbol--b {
  clip-path: polygon(52% 0, 100% 0, 100% 58%, 50% 52%);
  transform: translate3d(1rem, -.65rem, 0) rotate(6deg) scale(.9);
  transition: opacity 150ms 90ms ease, transform 500ms 90ms var(--ease-premium);
}
.motion-intro__symbol--c {
  clip-path: polygon(50% 48%, 100% 42%, 100% 100%, 42% 100%);
  transform: translate3d(.95rem, .75rem, 0) rotate(-5deg) scale(.9);
  transition: opacity 150ms 150ms ease, transform 520ms 150ms var(--ease-premium);
}
.motion-intro__symbol--d {
  clip-path: polygon(0 42%, 50% 48%, 48% 100%, 0 100%);
  transform: translate3d(-.85rem, .8rem, 0) rotate(6deg) scale(.88);
  transition: opacity 150ms 210ms ease, transform 520ms 210ms var(--ease-premium);
}
html.motion-intro-pending .motion-intro__symbol,
.motion-intro.is-active .motion-intro__symbol { opacity: 1; transform: none; }
.motion-intro__symbol-seal {
  z-index: 2;
  opacity: 0;
  transform: scale(.965);
  transition: opacity 180ms 430ms ease, transform 300ms 400ms var(--ease-out);
}
html.motion-intro-pending .motion-intro__symbol-seal,
.motion-intro.is-active .motion-intro__symbol-seal { opacity: 1; transform: none; }
.motion-intro__wordmark {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  opacity: 0;
  clip-path: inset(0 68% 0 31%);
  transform: translate3d(.8rem, 0, 0);
  transition: opacity 150ms 300ms ease, clip-path 560ms 300ms var(--ease-premium), transform 560ms 300ms var(--ease-premium);
  will-change: opacity, clip-path, transform;
}
.motion-intro__wordmark img { width: 100%; height: 100%; object-fit: contain; }
html.motion-intro-pending .motion-intro__wordmark,
.motion-intro.is-active .motion-intro__wordmark { opacity: 1; clip-path: inset(0 0 0 31%); transform: none; }
.motion-intro__orbit {
  position: absolute;
  top: -10%;
  left: -2.5%;
  z-index: 3;
  width: 29.5%;
  aspect-ratio: 1;
  border: 1px solid rgba(66,183,255,.42);
  border-right-color: transparent;
  border-bottom-color: rgba(66,183,255,.08);
  border-radius: 50%;
  opacity: 0;
  transform: rotate(-120deg) scale(.72);
  transition: opacity 180ms 40ms ease, transform 650ms 30ms var(--ease-premium);
}
html.motion-intro-pending .motion-intro__orbit,
.motion-intro.is-active .motion-intro__orbit { opacity: .72; transform: rotate(12deg) scale(1); }
.motion-intro__caption {
  position: absolute;
  top: calc(100% + .9rem);
  left: 31%;
  color: #8e929b;
  font: 690 .62rem/1.3 var(--font-display);
  letter-spacing: .17em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transform: translateY(.35rem);
  transition: opacity 260ms 510ms ease, clip-path 440ms 500ms var(--ease-premium), transform 440ms 500ms var(--ease-premium);
}
.motion-intro__caption b { color: #318ce7; font-weight: 800; }
html.motion-intro-pending .motion-intro__caption,
.motion-intro.is-active .motion-intro__caption { opacity: 1; clip-path: inset(0); transform: none; }

.motion-intro__routes { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.motion-intro__routes i {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--route-length, 0px);
  height: 1.5px;
  color: var(--route-color);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--route-color) 45%, transparent) 22%, var(--route-color));
  opacity: 0;
  transform: translate3d(var(--route-x, 50vw), var(--route-y, 45vh), 0) rotate(var(--route-angle, 0deg)) scaleX(0);
  transform-origin: left center;
  transition: opacity 160ms var(--route-delay, 540ms) ease, transform 520ms var(--route-delay, 540ms) var(--ease-premium);
  will-change: opacity, transform;
}
.motion-intro__routes i::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: .28rem;
  height: .28rem;
  border-radius: 50%;
  background: currentColor;
  transform: translate(50%, -50%);
}
.motion-intro.is-active .motion-intro__routes i {
  opacity: .9;
  transform: translate3d(var(--route-x), var(--route-y), 0) rotate(var(--route-angle)) scaleX(1);
}
.motion-intro.is-converging .motion-intro__backdrop {
  animation: maway-intro-backdrop-home 620ms var(--ease-in-out) both;
}
.motion-intro.is-converging .motion-intro__brand-track {
  animation: maway-intro-brand-home 680ms var(--ease-premium) both;
}
.motion-intro.is-converging .motion-intro__routes i { animation: maway-intro-route-home 520ms ease both; }
.motion-intro.is-converging .motion-intro__caption,
.motion-intro.is-converging .motion-intro__orbit { animation: maway-intro-detail-home 220ms ease both; }
.motion-intro.is-exiting { pointer-events: none; }
.motion-intro.is-exiting .motion-intro__routes i,
.motion-intro.is-exiting .motion-intro__skip { opacity: 0; transition: opacity 100ms ease; }
.motion-intro.is-skipped .motion-intro__backdrop { animation-duration: 280ms; }
.motion-intro.is-skipped .motion-intro__brand-track { animation-duration: 360ms; }
.motion-intro.is-skipped .motion-intro__routes i,
.motion-intro.is-skipped .motion-intro__caption,
.motion-intro.is-skipped .motion-intro__orbit { animation-duration: 180ms; }

@keyframes maway-intro-backdrop-home {
  from { opacity: 1; transform: scale(1.025); }
  to { opacity: 0; transform: scale(1); }
}
@keyframes maway-intro-brand-home {
  from { transform: translate3d(-50%, -50%, 0) scale(1); }
  to { transform: translate3d(calc(-50% + var(--intro-target-x)), calc(-50% + var(--intro-target-y)), 0) scale(var(--intro-target-scale)); }
}
@keyframes maway-intro-route-home { from { opacity: .9; } to { opacity: .18; } }
@keyframes maway-intro-detail-home { to { opacity: 0; } }
.motion-intro__skip {
  position: absolute;
  z-index: 4;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  min-width: 3.5rem;
  min-height: 2.75rem;
  padding: .5rem .75rem;
  border: 0;
  background: transparent;
  color: #777b84;
  font: 680 .62rem/1 var(--font-display);
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: 0;
  transition: color 180ms ease, opacity 220ms 220ms ease;
}
html.motion-intro-pending .motion-intro__skip,
.motion-intro.is-active .motion-intro__skip { opacity: .7; }
.motion-intro__skip:hover, .motion-intro__skip:focus-visible { color: #fff; }

/* Système de révélation : quatre familles, un seul rythme. */
.motion-enabled .reveal {
  --reveal-y: 0px;
  --reveal-scale: 1;
  --card-lift: 0px;
  opacity: 0;
  transform: translate3d(0, calc(var(--reveal-y) + var(--card-lift)), 0) scale(var(--reveal-scale));
  transition:
    opacity var(--motion-slow) var(--ease-out),
    transform var(--motion-slow) var(--ease-premium),
    clip-path var(--motion-slow) var(--ease-premium);
  transition-delay: calc(var(--reveal-order, 0) * 55ms);
  will-change: opacity, transform;
}
.motion-enabled .reveal--fade { --reveal-y: 1.05rem; }
.motion-enabled .reveal--card { --reveal-y: 1.25rem; --reveal-scale: .988; }
.motion-enabled .reveal--line { --reveal-y: .65rem; }
.motion-enabled .reveal--clip { --reveal-y: .8rem; clip-path: inset(0 0 100%); }
.motion-enabled .reveal.is-visible { --reveal-y: 0px; --reveal-scale: 1; opacity: 1; clip-path: inset(0); }

/* Portail maître : environnement sensible, contenu toujours explicite. */
.portal { --portal-accent: #318ce7; --portal-shift-x: 50vw; --portal-shift-y: 20vh; position: relative; isolation: isolate; }
.portal::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: min(70vw, 58rem);
  aspect-ratio: 1;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--portal-accent) 22%, transparent), transparent 62%);
  opacity: .28;
  transform: translate3d(var(--portal-shift-x), var(--portal-shift-y), 0) translate(-50%, -50%);
  transition: background 520ms var(--ease-standard), opacity 420ms ease;
  will-change: transform;
}
.portal::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, color-mix(in srgb, var(--portal-accent) 4%, transparent), transparent 72%);
  transform: translateX(-16%);
  transition: transform 900ms var(--ease-premium), background 520ms ease;
}
.portal[data-active-universe]::before { opacity: .9; }
.portal[data-active-universe]::after { transform: translateX(8%); }

.motion-enabled:not(.motion-ready) .portal__header,
.motion-enabled:not(.motion-ready) .portal__intro,
.motion-enabled:not(.motion-ready) .portal__footer { opacity: 0; transform: translateY(.7rem); }
.motion-enabled .portal__header,
.motion-enabled .portal__intro,
.motion-enabled .portal__footer { transition: opacity 700ms var(--ease-out), transform 800ms var(--ease-premium); }
.motion-enabled .portal__intro { transition-delay: 100ms; }
.motion-enabled .portal__footer { transition-delay: 340ms; }
.motion-enabled.motion-ready .portal__header,
.motion-enabled.motion-ready .portal__intro,
.motion-enabled.motion-ready .portal__footer { opacity: 1; transform: none; }
.motion-enabled:not(.motion-ready) .portal__intro h1 { clip-path: inset(0 0 100%); transform: translateY(1.25rem); }
.motion-enabled .portal__intro h1 { transition: clip-path 900ms 120ms var(--ease-premium), transform 900ms 120ms var(--ease-premium); }
.motion-enabled.motion-ready .portal__intro h1 { clip-path: inset(0); transform: none; }

.motion-enabled .universe-tile {
  --tile-shift-name: 0px;
  --tile-shift-copy: 0px;
  opacity: 0;
  transform: translateY(1.4rem);
  transition:
    opacity 650ms var(--ease-out),
    transform 760ms var(--ease-premium),
    color 360ms ease,
    background 360ms ease,
    filter 420ms ease;
}
.motion-enabled.motion-ready .universe-tile { opacity: 1; transform: none; }
.motion-enabled.motion-ready .universe-tile:nth-child(1) { transition-delay: 120ms, 120ms, 0ms, 0ms, 0ms; }
.motion-enabled.motion-ready .universe-tile:nth-child(2) { transition-delay: 200ms, 200ms, 0ms, 0ms, 0ms; }
.motion-enabled.motion-ready .universe-tile:nth-child(3) { transition-delay: 280ms, 280ms, 0ms, 0ms, 0ms; }
.motion-enabled.motion-ready .universe-tile:nth-child(4) { transition-delay: 360ms, 360ms, 0ms, 0ms, 0ms; }
.motion-enabled.motion-ready .universe-tile:nth-child(5) { transition-delay: 440ms, 440ms, 0ms, 0ms, 0ms; }
.portal[data-active-universe] .universe-tile:not(.is-context-active) { opacity: .64; filter: saturate(.7); }
.universe-tile::before { transition: height 460ms var(--ease-premium); }
.universe-tile::after { transition: color 360ms ease, transform 520ms var(--ease-premium); }
.universe-tile:hover::after, .universe-tile:focus-visible::after { color: rgba(8,9,10,.055); transform: translateY(-.7rem); }
.universe-tile__number,
.universe-tile__line,
.universe-tile__action { transition: color 300ms ease, opacity 300ms ease, transform 420ms var(--ease-premium); }
.universe-tile__name { transition: transform 420ms var(--ease-premium); }
.universe-tile:hover .universe-tile__name,
.universe-tile:focus-visible .universe-tile__name { transform: translate3d(var(--tile-shift-name), -.12rem, 0); }
.universe-tile:hover .universe-tile__line,
.universe-tile:focus-visible .universe-tile__line { transform: translate3d(var(--tile-shift-copy), -.08rem, 0); }
.universe-tile__action i { font-style: normal; transition: transform 360ms var(--ease-out); }
.universe-tile:hover .universe-tile__action i,
.universe-tile:focus-visible .universe-tile__action i { transform: translate(.2rem, -.2rem); }
.universe-tile:hover, .universe-tile:focus-visible { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tile-accent) 65%, transparent); }

/* Héros : séquence d’entrée puis profondeur minimale au pointeur et au scroll. */
.motion-hero { --hero-shift-x: 0px; --hero-shift-y: 0px; --hero-scroll-shift: 0px; --hero-rotate-x: 0deg; --hero-rotate-y: 0deg; }
.motion-enabled .universe-hero .reveal { opacity: 1; transform: none; clip-path: none; transition: none; }
.motion-enabled:not(.motion-ready) .universe-header__inner { opacity: 0; transform: translateY(-.65rem); }
.motion-enabled .universe-header__inner { transition: opacity 520ms 70ms var(--ease-out), transform 620ms 70ms var(--ease-premium); }
.motion-enabled.motion-ready .universe-header__inner { opacity: 1; transform: none; }

.motion-enabled:not(.motion-ready) .universe-hero .eyebrow,
.motion-enabled:not(.motion-ready) .universe-hero__lead,
.motion-enabled:not(.motion-ready) .universe-hero .button-row,
.motion-enabled:not(.motion-ready) .hero-meta span { opacity: 0; transform: translateY(.8rem); }
.motion-enabled:not(.motion-ready) .universe-hero .display-title { opacity: 0; clip-path: inset(0 0 100%); transform: translateY(1.4rem); }
.motion-enabled .universe-hero .eyebrow { transition: opacity 480ms 130ms var(--ease-out), transform 560ms 130ms var(--ease-premium); }
.motion-enabled .universe-hero .display-title { transition: opacity 520ms 180ms ease, clip-path 920ms 180ms var(--ease-premium), transform 920ms 180ms var(--ease-premium); }
.motion-enabled .universe-hero__lead { transition: opacity 620ms 340ms var(--ease-out), transform 720ms 340ms var(--ease-premium); }
.motion-enabled .universe-hero .button-row { transition: opacity 620ms 430ms var(--ease-out), transform 720ms 430ms var(--ease-premium); }
.motion-enabled .hero-meta span { transition: opacity 520ms var(--ease-out), transform 650ms var(--ease-premium); }
.motion-enabled .hero-meta span:nth-child(1) { transition-delay: 520ms; }
.motion-enabled .hero-meta span:nth-child(2) { transition-delay: 590ms; }
.motion-enabled .hero-meta span:nth-child(3) { transition-delay: 660ms; }
.motion-enabled.motion-ready .universe-hero .eyebrow,
.motion-enabled.motion-ready .universe-hero .display-title,
.motion-enabled.motion-ready .universe-hero__lead,
.motion-enabled.motion-ready .universe-hero .button-row,
.motion-enabled.motion-ready .hero-meta span { opacity: 1; clip-path: inset(0); transform: none; }

.motion-enabled .hero-signal {
  transform:
    translate3d(var(--hero-shift-x), calc(var(--hero-shift-y) - var(--hero-scroll-shift)), 0)
    perspective(900px)
    rotateX(var(--hero-rotate-x))
    rotateY(var(--hero-rotate-y));
  transform-origin: center;
  transition: transform 320ms var(--ease-out), border-color 300ms ease;
}
.motion-enabled:not(.motion-ready) .hero-signal { opacity: 0; clip-path: inset(12% 12% 12% 12%); }
.motion-enabled .hero-signal { transition: opacity 700ms 280ms var(--ease-out), clip-path 900ms 250ms var(--ease-premium), transform 320ms var(--ease-out); }
.motion-enabled.motion-ready .hero-signal { opacity: 1; clip-path: inset(0); }
.motion-enabled .hero-signal__line--a { transform: rotate(-18deg) scaleX(0); transform-origin: left; transition: transform 900ms 520ms var(--ease-premium); }
.motion-enabled .hero-signal__line--b { transform: rotate(12deg) scaleY(0); transform-origin: top; transition: transform 900ms 580ms var(--ease-premium); }
.motion-enabled.motion-ready .hero-signal__line--a { transform: rotate(-18deg) scaleX(1.3); }
.motion-enabled.motion-ready .hero-signal__line--b { transform: rotate(12deg) scaleY(1.2); }
.motion-enabled .hero-signal__dot { opacity: 0; transform: scale(0); transition: opacity 260ms 760ms ease, transform 480ms 700ms var(--ease-out); }
.motion-enabled.motion-ready .hero-signal__dot { opacity: 1; transform: scale(1); }
.motion-enabled .hero-signal__index { transition: transform 700ms var(--ease-premium), color 300ms ease; }
.motion-enabled .hero-signal:hover .hero-signal__index { transform: translate(.18rem, -.18rem); }

/* Signatures par univers : même grammaire, nuances propres. */
html.motion-enabled:not(.motion-lite) body.theme-digital .universe-hero::before { animation: digital-drift 28s linear infinite; }
html.motion-enabled:not(.motion-lite) body.theme-lab .universe-hero::before { animation: lab-orbit 34s linear infinite; }
html.motion-enabled:not(.motion-lite) body.theme-lab .universe-hero::after { animation: lab-scan 22s linear infinite; }
html.motion-enabled:not(.motion-lite) body.theme-events .universe-hero::before { animation: events-light 16s var(--ease-in-out) infinite alternate; }
html.motion-enabled:not(.motion-lite) body.theme-events .universe-hero::after { animation: events-pulse 12s var(--ease-in-out) infinite alternate; }
html.motion-enabled:not(.motion-lite) body.theme-workshop .universe-hero::before { animation: workshop-grain 30s linear infinite; }
html.motion-enabled:not(.motion-lite) body.theme-rent .universe-hero::before { animation: rent-flow 26s linear infinite; }

@keyframes digital-drift { to { background-position: 3.25rem 1.6rem, 1.6rem 3.25rem; } }
@keyframes lab-orbit { to { transform: rotate(360deg); } }
@keyframes lab-scan { to { background-position: 0 3.78rem; } }
@keyframes events-light { to { opacity: .82; transform: translate3d(-1.2rem, 1rem, 0) scale(1.035); } }
@keyframes events-pulse { to { opacity: .62; transform: translate3d(1rem, -1rem, 0) scale(1.04); } }
@keyframes workshop-grain { to { background-position: 8rem 0; } }
@keyframes rent-flow { to { background-position: 0 4rem; } }

/* Navigation : état actif, menu tactile séquencé et fermeture robuste. */
.universe-nav__link::after { transition: transform var(--motion-fast) var(--ease-out), background 220ms ease; }
.universe-nav__link.is-active::after { transform: scaleX(1); }
.universe-nav__link.is-active { color: var(--accent); }
.menu-toggle { overflow: hidden; transition: border-color 260ms ease, background 260ms ease, transform 320ms var(--ease-out); }
.menu-toggle:hover { border-color: var(--accent); transform: rotate(3deg); }
.menu-toggle__lines::before, .menu-toggle__lines::after { transition: transform 360ms var(--ease-premium), top 300ms var(--ease-premium), width 260ms ease; }
.menu-toggle:not([aria-expanded="true"]):hover .menu-toggle__lines::after { width: 70%; }
.menu-toggle[aria-expanded="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }

@media (max-width: 62rem) {
  .motion-enabled .universe-nav {
    display: grid;
    opacity: 1;
    transform: none;
    clip-path: circle(0 at calc(100% - var(--gutter) - 1.5rem) 2.4rem);
    transition: clip-path 460ms var(--ease-premium), visibility 0s linear 460ms;
  }
  .motion-enabled .universe-nav::before {
    content: "";
    position: absolute;
    right: -8rem;
    bottom: -9rem;
    width: 24rem;
    aspect-ratio: 1;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
    border-radius: 50%;
    box-shadow: inset 0 0 0 4rem color-mix(in srgb, var(--accent) 2%, transparent), inset 0 0 0 8rem color-mix(in srgb, var(--accent) 2%, transparent);
    pointer-events: none;
  }
  .motion-enabled .universe-nav.is-open {
    visibility: visible;
    clip-path: circle(150vmax at calc(100% - var(--gutter) - 1.5rem) 2.4rem);
    transition-delay: 0s;
  }
  .motion-enabled .universe-nav__list li { opacity: 0; transform: translateY(.8rem); transition: opacity 320ms ease, transform 500ms var(--ease-out); }
  .motion-enabled .universe-nav.is-open .universe-nav__list li { opacity: 1; transform: none; }
  .motion-enabled .universe-nav.is-open .universe-nav__list li:nth-child(1) { transition-delay: 150ms; }
  .motion-enabled .universe-nav.is-open .universe-nav__list li:nth-child(2) { transition-delay: 195ms; }
  .motion-enabled .universe-nav.is-open .universe-nav__list li:nth-child(3) { transition-delay: 240ms; }
  .motion-enabled .universe-nav.is-open .universe-nav__list li:nth-child(4) { transition-delay: 285ms; }
  .motion-enabled .universe-nav.is-open .universe-nav__list li:nth-child(5) { transition-delay: 330ms; }

  /* Sans JavaScript, la navigation reste directement accessible. */
  .no-js .universe-header { position: relative; height: auto; background: var(--hero-bg); color: var(--hero-fg); }
  .no-js .universe-header__inner { min-height: 4.75rem; flex-wrap: wrap; }
  .no-js .menu-toggle { display: none; }
  .no-js .universe-nav {
    position: static;
    width: 100%;
    display: block;
    padding: 0 0 1rem;
    background: transparent;
    color: inherit;
    opacity: 1;
    visibility: visible;
    transform: none;
    clip-path: none;
  }
  .no-js .universe-nav__list { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .no-js .universe-nav__list li { border-bottom: 1px solid color-mix(in srgb, var(--hero-fg) 16%, transparent); }
  .no-js .universe-nav__list li:last-child { grid-column: 1 / -1; border-bottom: 0; }
  .no-js .universe-nav__link { min-height: 3.25rem; padding: .5rem 0; font-size: .72rem; }
  .no-js .universe-nav .button { width: 100%; margin-top: .75rem; }
  .no-js .universe-hero { padding-top: 4.5rem; }
}

/* Boutons : magnétisme très court, flèche contextuelle, feedback tactile. */
.button {
  --magnet-x: 0px;
  --magnet-y: 0px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transform: translate3d(var(--magnet-x), var(--magnet-y), 0);
  transition:
    transform var(--motion-fast) var(--ease-out),
    background var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    color var(--motion-fast) ease;
}
.button::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 8rem;
  aspect-ratio: 1;
  left: calc(var(--press-x, 50%) - 4rem);
  top: calc(var(--press-y, 50%) - 4rem);
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 16%, transparent);
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
}
.button.is-pressed::before { animation: button-feedback 440ms var(--ease-out); }
.button:hover { transform: translate3d(var(--magnet-x), calc(var(--magnet-y) - 2px), 0); }
.button:active { transform: translate3d(var(--magnet-x), var(--magnet-y), 0) scale(.985); }
.button__arrow { display: inline-block; font-size: 1rem; line-height: .6; transition: transform 320ms var(--ease-out); }
.button:hover .button__arrow, .button:focus-visible .button__arrow { transform: translate(.15rem, -.12rem); }
@keyframes button-feedback { 0% { opacity: .8; transform: scale(0); } 100% { opacity: 0; transform: scale(1.4); } }

/* Cartes : profondeur inférieure à un degré, lumière de bord sans blur lourd. */
.motion-card {
  --card-x: 50%;
  --card-y: 50%;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  transform-style: preserve-3d;
  background-image: radial-gradient(circle at var(--card-x) var(--card-y), color-mix(in srgb, var(--accent) 8%, transparent), transparent 38%);
}
.motion-enabled .motion-card.reveal {
  transform:
    translate3d(0, calc(var(--reveal-y) + var(--card-lift)), 0)
    scale(var(--reveal-scale))
    perspective(900px)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y));
}
.motion-card:hover { --card-lift: -4px; }
.service-card.motion-card:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.use-card.motion-card:hover { border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); }
.contact-choice-grid a.motion-card { transition: color 260ms ease, border-color 260ms ease, background-color 260ms ease, transform 520ms var(--ease-premium), opacity 520ms ease; }
.contact-choice-grid a.motion-card:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }

/* Logo et dernier moment de page. */
.motion-logo { transition: opacity 220ms ease, transform 420ms var(--ease-premium); }
.motion-logo:hover { transform: translateX(.16rem); }
.site-footer { position: relative; overflow: hidden; }
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: .18rem;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1000ms var(--ease-premium);
}
.site-footer.is-footer-visible::before { transform: scaleX(1); }
.site-footer__other a { position: relative; transition: color 260ms ease, transform 320ms var(--ease-out); }
.site-footer__other a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -.35rem;
  left: 0;
  height: .12rem;
  background: var(--link-accent, var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--ease-out);
}
.site-footer__other a:hover { color: var(--link-accent, #fff); transform: translateY(-1px); }
.site-footer__other a:hover::after, .site-footer__other a:focus-visible::after { transform: scaleX(1); }

/* Mobile : rythme raccourci, pas de dépendance au hover. */
@media (max-width: 35.99rem) {
  .universe-entry__brand-track { top: 42svh; }
  .universe-entry__brand .universe-brand__logo { width: min(38vw, 10.5rem); }
  .motion-intro__brand-track { top: 42svh; width: min(84vw, 22rem); }
  .motion-intro__caption { font-size: .57rem; letter-spacing: .13em; }
  .motion-enabled .universe-tile { transform: translateY(.8rem); }
  .motion-enabled.motion-ready .universe-tile:nth-child(1) { transition-delay: 120ms, 120ms, 0ms, 0ms, 0ms; }
  .motion-enabled.motion-ready .universe-tile:nth-child(2) { transition-delay: 200ms, 200ms, 0ms, 0ms, 0ms; }
  .motion-enabled.motion-ready .universe-tile:nth-child(3) { transition-delay: 280ms, 280ms, 0ms, 0ms, 0ms; }
  .motion-enabled.motion-ready .universe-tile:nth-child(4) { transition-delay: 360ms, 360ms, 0ms, 0ms, 0ms; }
  .motion-enabled.motion-ready .universe-tile:nth-child(5) { transition-delay: 440ms, 440ms, 0ms, 0ms, 0ms; }
  .motion-enabled .hero-signal { transform: translateY(calc(0px - var(--hero-scroll-shift))); }
  .motion-enabled .universe-hero .display-title { transition-duration: 460ms, 720ms, 720ms; }
  .motion-enabled .hero-meta span:nth-child(n) { transition-delay: 460ms; }
}

@media (hover: none), (pointer: coarse) {
  .portal[data-active-universe] .universe-tile:not(.is-context-active) { opacity: 1; filter: none; }
  .universe-tile:hover .universe-tile__name,
  .universe-tile:hover .universe-tile__line,
  .motion-logo:hover,
  .button:hover { transform: none; }
  .motion-card:hover { --card-lift: 0px; }
  html.motion-enabled body.theme-digital .universe-hero::before,
  html.motion-enabled body.theme-lab .universe-hero::before,
  html.motion-enabled body.theme-lab .universe-hero::after,
  html.motion-enabled body.theme-events .universe-hero::before,
  html.motion-enabled body.theme-events .universe-hero::after,
  html.motion-enabled body.theme-workshop .universe-hero::before,
  html.motion-enabled body.theme-rent .universe-hero::before { animation: none; }
}

/* Appareils contraints : la hiérarchie demeure, les effets continus disparaissent. */
html.motion-lite .reveal { transition-duration: 360ms; transition-delay: 0ms; }
html.motion-lite .hero-signal { transform: none; }
html.motion-lite .portal::before, html.motion-lite .portal::after { display: none; }
html.motion-lite .motion-card { background-image: none; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html.motion-arrival body::before,
  .motion-intro,
  .universe-entry,
  .page-transition { display: none !important; }
  html.motion-universe-intro-pending body.universe-page::after { display: none !important; }
  html.motion-universe-intro-pending .universe-header .universe-brand,
  html.motion-universe-intro-playing .universe-header .universe-brand { visibility: visible !important; }
  .motion-enabled .reveal,
  .motion-enabled .universe-tile,
  .motion-enabled .portal__header,
  .motion-enabled .portal__intro,
  .motion-enabled .portal__footer,
  .motion-enabled .universe-header__inner,
  .motion-enabled .universe-hero .eyebrow,
  .motion-enabled .universe-hero .display-title,
  .motion-enabled .universe-hero__lead,
  .motion-enabled .universe-hero .button-row,
  .motion-enabled .hero-meta span,
  .motion-enabled .hero-signal,
  .motion-enabled .hero-signal__line,
  .motion-enabled .hero-signal__dot {
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .portal::before, .portal::after, .universe-nav::before { display: none !important; }
  .universe-nav { clip-path: none !important; }
  .universe-nav__list li { opacity: 1 !important; transform: none !important; transition: none !important; }
  .site-footer::before { transform: scaleX(1); transition: none; }
  .universe-tile, .universe-hero { view-transition-name: none !important; }
}