/* A restrained choreography: scroll owns depth, the pointer owns reflections. */
@property --rim-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.motion-toggle {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: none;
  border: 1px solid #9db3ba40;
  border-radius: 50%;
  background: #cfeaff08;
  transition:
    background 0.3s,
    border-color 0.3s;
}
.motion-toggle:hover {
  background: #d8f3ff18;
  border-color: #d2ecf199;
}
.motion-toggle > span {
  width: 10px;
  height: 12px;
  border-left: 2px solid #d8e8eb;
  border-right: 2px solid #d8e8eb;
}
.motion-toggle[aria-pressed='true'] > span {
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-right: 0;
  border-left: 9px solid #d8e8eb;
  margin-left: 2px;
}
.topbar {
  gap: 22px;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at var(--hx, 50%) var(--hy, 48%), #c7e4ed0f, transparent 58%);
}
.liquid-orbit {
  transform: translate3d(var(--orbit-x, 0px), var(--hero-shift, 0px), 0)
    scale(var(--hero-scale, 1.09)) rotate(var(--orbit-r, 0deg));
  transform-origin: 50% 55%;
}
.hero-copy {
  transform: translateY(var(--copy-y, 0px));
}
.hero-bottom a span {
  display: inline-block;
  animation: descend-cue 2.6s ease-in-out infinite;
}
.hero-copy > .hero-eyebrow {
  animation: hero-arrive 1.3s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hero-copy > .hero-lede {
  animation: hero-arrive 1.3s 0.12s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hero-copy > .cta {
  animation: hero-arrive 1.3s 0.24s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hero-platform {
  animation: hero-arrive 1.3s 0.34s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transform: translate(var(--mx, 0px), var(--my, 0px));
  transition:
    transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.3s;
}
.cta::before {
  content: '';
  position: absolute;
  inset: -40% -80%;
  z-index: -1;
  background: linear-gradient(
    115deg,
    transparent 35%,
    #fff0 44%,
    #fff9 49%,
    #fff0 54%,
    transparent 65%
  );
  transform: translateX(-50%);
  pointer-events: none;
}
.cta:hover {
  transform: translate(var(--mx, 0px), calc(var(--my, 0px) - 2px));
}
.cta:hover::before {
  animation: button-glint 0.85s ease forwards;
}
.cta:active {
  transform: translate(0, 1px) scale(0.985);
}
.motion-ready [data-words] .motion-word {
  display: inline-block;
  opacity: var(--word-opacity, 1);
  transform: translateY(var(--word-y, 0px));
  will-change: opacity;
}
.statement > .motion-word {
  color: var(--ink);
}
.section-index {
  position: relative;
  border-top-color: #d3efff0a;
}
.section-index::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, #c6e4ee80, #c6e4ee20);
  transition: transform 1.6s cubic-bezier(0.2, 0.75, 0.2, 1);
}
.section-index.seen::before {
  transform: scaleX(1);
}
.intro-tags span {
  transition:
    background 0.4s,
    border-color 0.4s,
    transform 0.4s;
}
.intro-tags span:hover {
  transform: translateY(-4px);
  background: #d8f1ff0d;
  border-color: #bcdce680;
}
.product-device {
  --rim-angle: 0deg;
  isolation: isolate;
}
.product-device > * {
  position: relative;
  z-index: 1;
}
.product-device::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(ellipse at 50% var(--device-light, 25%), #d7efff19, transparent 65%);
  transition: background 0.6s;
}
.product-device[data-gesture='voice'] {
  --device-light: 65%;
  background-color: #9bc5c90b;
}
.product-device[data-gesture='photo'] {
  --device-light: 85%;
  background-color: #d6cba00a;
}
@supports (mask-composite: exclude) {
  .product-device::before,
  #prix .z5::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    padding: 1px;
    z-index: 2;
    background: conic-gradient(
      from var(--rim-angle),
      transparent 0% 57%,
      #b4d1df30 66%,
      #eefaffeb 73%,
      #b4d1df35 80%,
      transparent 89%
    );
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask-composite: exclude;
    animation: rim-orbit 13s linear infinite;
  }
}
.gesture-tabs {
  position: relative;
}
.gesture-tabs button {
  position: relative;
  transition:
    background 0.4s,
    color 0.3s,
    box-shadow 0.4s,
    transform 0.4s;
}
.gesture-tabs button:hover {
  transform: translateY(-3px);
}
.gesture-tabs button[aria-selected='true'] svg {
  animation: icon-settle 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.gesture-tabs button[aria-selected='true']::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 30%;
  right: 30%;
  height: 1px;
  background: #e6faff;
  box-shadow: 0 0 14px 2px #d2f3ff55;
}
.view-switch {
  position: relative;
  isolation: isolate;
}
.view-switch button {
  position: relative;
  z-index: 1;
  transition: color 0.3s;
}
.view-switch.has-indicator::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  height: calc(100% - 10px);
  width: var(--indicator-width, 50%);
  transform: translateX(var(--indicator-x, 0px));
  border-radius: 999px;
  background: linear-gradient(130deg, #e5f4fa, #aebfc6);
  box-shadow:
    inset 0 1px 0 white,
    0 3px 12px #0005;
  transition:
    transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.view-switch.has-indicator button[aria-selected='true'] {
  background: transparent;
  box-shadow: none;
}
.memory-view:not([hidden]) .memory-note {
  animation: note-arrive 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.memory-view:not([hidden]) .memory-note:nth-child(2) {
  animation-delay: 0.06s;
}
.memory-view:not([hidden]) .memory-note:nth-child(3) {
  animation-delay: 0.12s;
}
.memory-view:not([hidden]) .memory-note:nth-child(4) {
  animation-delay: 0.18s;
}
.memory-note {
  transition:
    transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    background 0.5s;
}
.memory-console {
  transform-style: preserve-3d;
  transition: box-shadow 0.6s;
}
.memory-console:hover {
  box-shadow:
    inset 0 1px 0 #f9fdff70,
    inset 0 -1px 0 #def0f840,
    inset 1px 0 0 #dceedf30,
    0 30px 80px -25px #000b;
}
.privacy-word {
  background-size: 100% 180%;
  background-position: 50% var(--privacy-light, 0%);
  transform: translateY(var(--privacy-y, 0px));
}
.privacy-card {
  position: relative;
  transition: border-color 0.45s;
}
.privacy-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 55px;
  height: 1px;
  background: #e0f7ff;
  box-shadow: 0 0 14px #cdeeff66;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s;
}
.privacy-card:hover::before {
  transform: scaleX(1);
}
.widget-card {
  transition: box-shadow 0.5s;
}
.widget-card:hover {
  box-shadow:
    inset 0 1px 0 #f9fdff88,
    inset 0 -1px 0 #cfeef555,
    0 28px 60px -25px #000b;
}
.widget-card .widget-image {
  transition: transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.widget-card:hover .widget-image {
  transform: translateY(-7px);
}
.qa[open] .feat-p {
  animation: answer-open 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.qa summary {
  transition: color 0.3s;
}
.qa summary:hover {
  color: #d3f0fa;
}
.champ input,
.champ textarea {
  transition:
    border-color 0.3s,
    box-shadow 0.3s,
    background 0.3s;
}
.champ input:focus,
.champ textarea:focus {
  border-color: #b3dbe38c;
  box-shadow: 0 0 0 3px #caecff0b;
  background: #c9f3ff04;
}
.top-link {
  transition:
    transform 0.45s,
    background 0.3s;
}
.top-link:hover {
  transform: translateY(-5px);
  background: #d9f0ff12;
}
.footer-word {
  background-size: 100% 160%;
  background-position: 50% var(--footer-light, 0%);
  letter-spacing: calc(-0.06em + var(--footer-spread, 0) * 0.07em);
  transition: letter-spacing 0.2s linear;
}
.nav-cta > span {
  transition: transform 0.35s;
}
.nav-cta:hover > span {
  transform: translate(3px, -3px);
}
.scene-scroll {
  position: relative;
}
.scene-word {
  transform: translate(calc(-50% + var(--scene-word-x, 0px)), 0);
}
@media (min-width: 1000px) and (min-height: 650px) and (prefers-reduced-motion: no-preference) {
  .motion-ready .scene-scroll {
    min-height: 165svh;
    margin-top: 85px;
  }
  .motion-ready .phone-scene {
    position: sticky;
    top: 100px;
    min-height: 0;
    height: calc(100svh - 115px);
    max-height: 820px;
    margin-top: 0;
    padding-block: 16px;
  }
  .motion-ready .main-phone img {
    width: auto;
    height: min(65svh, 590px);
  }
  .motion-ready .main-phone.seen {
    transform: translateY(var(--phone-y, 0px)) scale(var(--phone-scale, 1));
    transition: none;
  }
  .motion-ready .floating-note {
    animation: none;
    transition: none;
    transform: translate(var(--note-x, 0px), var(--note-y, 0px)) rotate(var(--note-r, var(--angle)));
  }
  .motion-ready .note-a {
    --note-x: var(--a-x, -45px);
    --note-y: var(--a-y, 25px);
    --note-r: var(--a-r, -12deg);
  }
  .motion-ready .note-b {
    --note-x: var(--b-x, 45px);
    --note-y: var(--b-y, 30px);
    --note-r: var(--b-r, 12deg);
  }
  .motion-ready .note-c {
    --note-x: var(--c-x, -25px);
    --note-y: var(--c-y, 40px);
    --note-r: var(--c-r, -7deg);
  }
}
@keyframes hero-arrive {
  from {
    opacity: 0;
    translate: 0 15px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes descend-cue {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}
@keyframes button-glint {
  to {
    transform: translateX(50%);
  }
}
@keyframes rim-orbit {
  to {
    --rim-angle: 360deg;
  }
}
@keyframes icon-settle {
  from {
    transform: translateY(3px) scale(0.88);
  }
  to {
    transform: none;
  }
}
@keyframes note-arrive {
  from {
    opacity: 0;
    translate: 0 22px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes answer-open {
  from {
    opacity: 0.2;
    translate: 0 -7px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@media (max-width: 760px) {
  .topbar {
    gap: 12px;
  }
  .nav-cta {
    display: none;
  }
  .motion-toggle {
    margin-left: auto;
    width: 34px;
    height: 34px;
  }
  .hero-copy {
    transform: none;
  }
  .product-device::before,
  #prix .z5::before {
    animation-duration: 18s;
  }
}
@media (hover: none) {
  .cta:hover,
  .gesture-tabs button:hover {
    transform: none;
  }
  .widget-card:hover .widget-image {
    transform: none;
  }
}
/* One preference controls CSS motion and both original canvas loops. */
[data-motion='paused'] *,
[data-motion='paused'] *::before,
[data-motion='paused'] *::after {
  animation: none !important;
  transition: none !important;
}
[data-motion='paused'] .rise {
  opacity: 1;
  transform: none;
}
[data-motion='paused'] .liquid-orbit {
  transform: scale(1.09);
}
[data-motion='paused'] .hero-copy,
[data-motion='paused'] .motion-word,
[data-motion='paused'] .privacy-word {
  transform: none;
  opacity: 1;
}
[data-motion='paused'] .cta {
  transform: none;
}
[data-motion='paused'] .floating-note {
  transform: rotate(var(--angle, 0deg));
}
[data-motion='paused'] .section-index::before {
  transform: scaleX(1);
}
.page-hidden *,
.page-hidden *::before,
.page-hidden *::after {
  animation-play-state: paused !important;
}
.motion-ready main > section:not(.motion-inview) *,
.motion-ready main > section:not(.motion-inview) *::before,
.motion-ready main > section:not(.motion-inview) *::after {
  animation-play-state: paused;
}
.motion-toggle:disabled {
  opacity: 0.65;
  cursor: default;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .hero-copy,
  .motion-word,
  .privacy-word {
    transform: none !important;
    opacity: 1 !important;
  }
  .liquid-orbit {
    transform: scale(1.09) !important;
  }
  .section-index::before {
    transform: scaleX(1);
  }
}

/* ── LE TÉLÉPHONE DU HÉROS : IL ARRIVE, PUIS IL REPART ──────────────────
 *
 * Deux mouvements, sur DEUX éléments, et c'est la seule façon de ne pas les
 * faire se marcher dessus : une animation `@keyframes` et une transformation
 * pilotée par le défilement posées sur la même boîte, l'une écrase l'autre
 * dès la première image. Le conteneur porte l'ARRIVÉE (une fois, au
 * chargement), la figure intérieure porte le DÉPART (continu, indexé sur
 * `--device-p` que `experience.js` calcule sur la hauteur du héros).
 *
 * Le départ est une vraie profondeur, pas un fondu : `translateZ` négatif
 * éloigne l'objet dans la perspective du parent pendant qu'il bascule, donc
 * il s'en va DANS l'écran. C'est le même geste que la descente de l'app.
 */
@keyframes device-arrive {
  from {
    opacity: 0;
    transform: translateY(120px) scale(0.93);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.motion-ready .hero-device {
  animation: device-arrive 1.6s 0.42s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.motion-ready .hero-device-inner {
  transform: translate3d(0, calc(var(--device-p, 0) * 54px), calc(var(--device-p, 0) * -460px))
    rotateX(calc(9deg + var(--device-p, 0) * 24deg))
    rotateY(calc(-11deg + var(--device-p, 0) * 17deg)) rotateZ(0.6deg);
  opacity: calc(1 - var(--device-p, 0) * 0.8);
}
[data-motion='paused'] .hero-device,
[data-motion='paused'] .hero-device-inner {
  transform: none;
  opacity: 1;
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .hero-device,
  .hero-device-inner {
    transform: none !important;
    opacity: 1 !important;
  }
}