/* Mouvement homepage · tokens Motion du DS v2 (spec v1.1).
   Le header mobile n'est pas animé ici.
   Le zoom du hero part de l'image déjà peinte : pas d'opacité 0. */

.fl-reveal--kicker {
  --fl-dur: var(--motion-duration-base);
  --fl-delay: calc(var(--motion-stagger-desktop) * 0);
  --fl-y: calc(var(--motion-distance-small) * -1);
  --fl-ease-use: var(--motion-easing-standard);
}
.fl-reveal--title {
  --fl-dur: var(--motion-duration-title);
  --fl-delay: calc(var(--motion-stagger-desktop) * 2);
  --fl-y: calc(var(--motion-distance-title) * -1);
  --fl-ease-use: var(--motion-easing-standard);
}
.fl-reveal--text {
  --fl-dur: var(--motion-duration-text);
  --fl-delay: calc(var(--motion-stagger-desktop) * 4);
  --fl-y: calc(var(--motion-distance-small) * 0);
  --fl-ease-use: var(--motion-easing-standard);
}
.fl-reveal--btn {
  --fl-dur: var(--motion-duration-text);
  --fl-delay: calc(var(--motion-stagger-desktop) * 5);
  --fl-y: calc(var(--motion-distance-small) * 0);
  --fl-ease-use: var(--motion-easing-standard);
}
.fl-reveal--card {
  --fl-dur: var(--motion-duration-base);
  --fl-delay: calc(var(--motion-stagger-desktop) * 0);
  --fl-y: calc(var(--motion-distance-title) * -1);
  --fl-ease-use: var(--motion-easing-list);
}
.fl-reveal--figure {
  --fl-dur: var(--motion-duration-stat);
  --fl-delay: calc(var(--motion-stagger-desktop) * 0);
  --fl-y: var(--motion-distance-small);
  --fl-ease-use: var(--motion-easing-ease);
}
.fl-reveal--meta {
  --fl-dur: var(--motion-duration-stat);
  --fl-delay: calc(var(--motion-stagger-mobile) * 2);
  --fl-y: var(--motion-distance-small);
  --fl-ease-use: var(--motion-easing-ease);
}
.fl-reveal--media {
  --fl-dur: var(--motion-duration-base);
  --fl-delay: calc(var(--motion-stagger-desktop) * 0);
  --fl-y: calc(var(--motion-distance-title) * -1);
  --fl-ease-use: var(--motion-easing-standard);
}
.fl-reveal--hero {
  --fl-dur: var(--motion-duration-text);
  --fl-delay: calc(var(--motion-stagger-desktop) * 2);
  --fl-y: calc(var(--motion-distance-small) * 0);
  --fl-ease-use: var(--motion-easing-standard);
}

html.fl-motion .fl-reveal:not(.is-shown) {
  opacity: 0;
  filter: blur(var(--motion-blur-enter));
  transform: translate3d(0, var(--fl-y), 0);
}
html.fl-motion .fl-reveal--text:not(.is-shown),
html.fl-motion .fl-reveal--btn:not(.is-shown),
html.fl-motion .fl-reveal--hero:not(.is-shown) {
  transform: none;
}
html.fl-motion .fl-reveal--media:not(.is-shown),
html.fl-motion .fl-reveal--figure:not(.is-shown),
html.fl-motion .fl-reveal--meta:not(.is-shown),
html.fl-motion .fl-reveal.fl-noblur:not(.is-shown) {
  filter: none;
}
html.fl-motion .fl-reveal.is-animating {
  will-change: transform, opacity, filter;
}
html.fl-motion .fl-reveal.is-shown {
  opacity: 1;
  filter: none;
  transform: translate3d(0, 0, 0);
  transition:
    opacity var(--fl-dur) var(--fl-ease-use) var(--fl-delay),
    filter var(--fl-dur) var(--fl-ease-use) var(--fl-delay),
    transform var(--fl-dur) var(--fl-ease-use) var(--fl-delay);
}
html.fl-motion .fl-reveal.is-shown:not(.is-animating) {
  will-change: auto;
  filter: none;
}

@media (max-width: 767px) {
  html.fl-motion .fl-reveal--title,
  html.fl-motion .fl-reveal--card,
  html.fl-motion .fl-reveal--media {
    --fl-y: calc(var(--motion-distance-small) * -1);
  }
  html.fl-motion .fl-reveal--text:not(.is-shown),
  html.fl-motion .fl-reveal--btn:not(.is-shown),
  html.fl-motion .fl-reveal--hero:not(.is-shown),
  html.fl-motion .fl-reveal--media:not(.is-shown),
  html.fl-motion .fl-reveal--figure:not(.is-shown),
  html.fl-motion .fl-reveal--meta:not(.is-shown),
  html.fl-motion .fl-reveal--kicker:not(.is-shown) {
    filter: none;
  }
}

/* Zoom photo : scale du token, image déjà affichée. Le texte du hero est hors du visuel. */
@media (prefers-reduced-motion: no-preference) {
  .hd-hero-visual,
  .hm-hero-visual {
    transform-origin: center center;
    animation: fl-hero-zoom var(--motion-duration-zoom) var(--motion-easing-standard) both;
  }
}
@keyframes fl-hero-zoom {
  from { transform: scale(var(--motion-scale-hero)); }
  to { transform: scale(1); }
}

.fl-reveal--tab {
  --fl-dur: var(--motion-duration-base);
  --fl-delay: 0ms;
  --fl-y: calc(var(--motion-distance-title) * -1);
  --fl-ease-use: var(--motion-easing-standard);
}

/* Scènes des cartes · note 636:949. Sans script, l'état final reste affiché. */

.fl-swap{display:grid}
.fl-swap > .fl-set{grid-area:1 / 1}
.fl-set--out{opacity:0}
.fl-switch{position:relative}
.fl-switch > span{position:relative;z-index:1}
.hd-switch.fl-switch > span{padding:6px 0}
.hm-switch.fl-switch > span{padding:6px 0}
.fl-knob{
  position:absolute;z-index:0;border-radius:var(--radius-full);
  background:var(--color-neutral-white);box-shadow:var(--shadow-sm);
  transform:translateX(100%);
}
.hd-switch .fl-knob{top:4px;left:4px;width:calc(50% - 4px);height:calc(100% - 8px)}
.hm-switch .fl-knob{top:2px;left:2px;width:calc(50% - 2px);height:calc(100% - 4px)}
.hd-card .fl-price,
.hm-card .fl-price{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;
  margin:6px 0 0;color:var(--color-text-primary);
}
.hd-card .fl-price b,
.hm-card .fl-price b{
  font-family:var(--font-family-display);font-weight:var(--type-h2-weight);
  font-size:var(--type-h2-size);line-height:var(--type-h2-leading);
  letter-spacing:var(--type-h2-tracking);font-style:normal;color:var(--color-text-primary);
}
.fl-price span{
  font-family:var(--font-family-mock);color:var(--color-text-muted);
  font-size:var(--type-mock-body-s-size);font-weight:var(--type-mock-body-s-weight);
}
.fl-badges{display:grid;justify-items:end}
.fl-badges > .hd-pill,
.fl-badges > .hm-pill{grid-area:1 / 1}
.fl-step.is-past .fl-badges{opacity:0}
.fl-step.is-future,
.fl-step.is-future strong{color:var(--color-text-muted)}
.fl-step.is-now strong,
.fl-step.is-past strong{color:var(--color-text-primary)}
.fl-step.is-now .fl-soon,
.fl-step.is-future .fl-now{opacity:0}
.fl-step.is-now .hd-pill.fl-now,
.fl-step.is-now .hm-pill.fl-now{
  background:var(--color-pastille-yellow-bg);color:var(--color-pastille-yellow-text);border-color:transparent;
}
.hm-track .fl-step.is-now .hm-pill.fl-now{background:var(--color-accent-gold)}

@media (prefers-reduced-motion: no-preference) {
  .tx-pill{
    animation:tx-pill-in var(--motion-duration-text) var(--motion-easing-standard) both;
  }
  html[data-pills] .tx-pill{animation:none;opacity:0;filter:none}
  html[data-pills="1"] .tx > .tx-pill:nth-child(5),
  html[data-pills="2"] .tx > .tx-pill:nth-child(5),
  html[data-pills="2"] .tx > .tx-pill:nth-child(6),
  html[data-pills="4"] .tx-pill{opacity:1}
  html.fl-motion .fl-scene.is-start-mid .hd-steps li:nth-child(-n+2),
  html.fl-motion .fl-scene.is-start-mid .hm-steps li:nth-child(-n+2){opacity:1}
  .tx > .tx-pill:nth-child(5){animation-delay:250ms}
  .tx > .tx-pill:nth-child(6){animation-delay:300ms}
  .tx > .tx-pill:nth-child(7){animation-delay:350ms}
  .tx > .tx-pill:nth-child(8){animation-delay:400ms}

  html.fl-motion .hd-track::after,
  html.fl-motion .hm-track::after{
    transition:
      transform var(--motion-duration-title) var(--motion-easing-standard),
      opacity var(--motion-duration-text) var(--motion-easing-standard);
  }
  html.fl-motion .fl-now,
  html.fl-motion .fl-soon,
  html.fl-motion .fl-badges,
  html.fl-motion .hd-dot,
  html.fl-motion .hm-dot{
    transition:
      opacity var(--motion-duration-text) var(--motion-easing-standard),
      box-shadow var(--motion-duration-text) var(--motion-easing-standard),
      background-color var(--motion-duration-text) var(--motion-easing-standard);
  }

  html.fl-motion .fl-scene[data-scene="compare"][data-step="0"] .fl-knob,
  html.fl-motion .fl-scene[data-scene="compare"][data-step="0"] .fl-set--out,
  html.fl-motion .fl-scene[data-scene="compare"][data-step="0"] .fl-set--in .fl-line{
    transition:none;
  }
  html.fl-motion .fl-scene[data-scene="compare"][data-step="0"] .fl-knob{transform:none}
  html.fl-motion .fl-scene[data-scene="compare"][data-step="0"] .fl-set--out,
  html.fl-motion .fl-scene[data-scene="compare"][data-step="1"] .fl-set--out{opacity:1}
  html.fl-motion .fl-scene[data-scene="compare"][data-step="0"] .fl-set--in .fl-line,
  html.fl-motion .fl-scene[data-scene="compare"][data-step="1"] .fl-set--in .fl-line,
  html.fl-motion .fl-scene[data-scene="compare"][data-step="2"] .fl-set--in .fl-line{
    opacity:0;filter:blur(var(--motion-blur-enter));
  }
  html.fl-motion .fl-scene[data-scene="compare"][data-step="1"] .fl-knob,
  html.fl-motion .fl-scene[data-scene="compare"][data-step="2"] .fl-knob,
  html.fl-motion .fl-scene[data-scene="compare"][data-step="3"] .fl-knob{
    transform:translateX(100%);
    transition:transform var(--motion-duration-base) var(--motion-easing-standard);
  }
  html.fl-motion .fl-scene[data-scene="compare"][data-step="2"] .fl-set--out,
  html.fl-motion .fl-scene[data-scene="compare"][data-step="3"] .fl-set--out{
    opacity:0;
    transition:opacity var(--motion-duration-exit) var(--motion-easing-exit);
  }
  html.fl-motion .fl-scene[data-scene="compare"][data-step="3"] .fl-set--in .fl-line{
    opacity:1;filter:none;
    transition:
      opacity var(--motion-duration-text) var(--motion-easing-standard),
      filter var(--motion-duration-text) var(--motion-easing-standard);
    transition-delay:calc(var(--i, 0) * var(--motion-stagger-desktop));
  }

  html.fl-motion .fl-scene[data-scene="message"][data-step="0"] .fl-sent,
  html.fl-motion .fl-scene[data-scene="message"][data-step="0"] .hd-chat > *,
  html.fl-motion .fl-scene[data-scene="message"][data-step="0"] .hm-chat > *,
  html.fl-motion .fl-scene[data-scene="message"][data-step="1"] .fl-sent,
  html.fl-motion .fl-scene[data-scene="message"][data-step="1"] .hd-typing,
  html.fl-motion .fl-scene[data-scene="message"][data-step="1"] .hm-typing,
  html.fl-motion .fl-scene[data-scene="message"][data-step="1"] .hd-wait,
  html.fl-motion .fl-scene[data-scene="message"][data-step="1"] .hm-wait,
  html.fl-motion .fl-scene[data-scene="message"][data-step="2"] .hd-typing,
  html.fl-motion .fl-scene[data-scene="message"][data-step="2"] .hm-typing,
  html.fl-motion .fl-scene[data-scene="message"][data-step="2"] .fl-writing{display:none}
  html.fl-motion .fl-scene[data-scene="message"][data-step="0"] .hd-chat,
  html.fl-motion .fl-scene[data-scene="message"][data-step="0"] .hm-chat{min-height:168px}
  html.fl-motion .fl-scene[data-scene="message"][data-step="1"] .hd-bubble-me,
  html.fl-motion .fl-scene[data-scene="message"][data-step="1"] .hm-bubble-me{
    animation:fl-rise var(--motion-duration-text) var(--motion-easing-standard) both;
  }
  html.fl-motion .fl-scene[data-scene="message"][data-step="2"] .fl-sent,
  html.fl-motion .fl-scene[data-scene="message"][data-step="2"] .hd-wait,
  html.fl-motion .fl-scene[data-scene="message"][data-step="2"] .hm-wait,
  html.fl-motion .fl-scene[data-scene="message"][data-step="3"] .hd-typing,
  html.fl-motion .fl-scene[data-scene="message"][data-step="3"] .hm-typing,
  html.fl-motion .fl-scene[data-scene="message"][data-step="3"] .fl-writing{
    animation:fl-fade var(--motion-duration-text) var(--motion-easing-standard) both;
  }
  html.fl-motion .fl-scene[data-scene="message"][data-step="3"] .hd-typing i,
  html.fl-motion .fl-scene[data-scene="message"][data-step="3"] .hm-typing i{
    animation:fl-dot 1.2s var(--motion-easing-standard) infinite;
  }
  html.fl-motion .fl-scene[data-scene="message"][data-step="3"] .hd-typing i:nth-child(1),
  html.fl-motion .fl-scene[data-scene="message"][data-step="3"] .hm-typing i:nth-child(1){animation-delay:325ms}
  html.fl-motion .fl-scene[data-scene="message"][data-step="3"] .hd-typing i:nth-child(2),
  html.fl-motion .fl-scene[data-scene="message"][data-step="3"] .hm-typing i:nth-child(2){animation-delay:425ms}
  html.fl-motion .fl-scene[data-scene="message"][data-step="3"] .hd-typing i:nth-child(3),
  html.fl-motion .fl-scene[data-scene="message"][data-step="3"] .hm-typing i:nth-child(3){animation-delay:525ms}

  html.fl-motion .fl-scene[data-scene="start"]:not(.is-scene-play) .hd-steps li,
  html.fl-motion .fl-scene[data-scene="start"]:not(.is-scene-play) .hm-steps li{opacity:.38}
  html.fl-motion .fl-scene[data-scene="start"]:not(.is-scene-play) .hd-float,
  html.fl-motion .fl-scene[data-scene="start"]:not(.is-scene-play) .hm-float{
    opacity:0;filter:blur(var(--motion-blur-enter));transform:translate3d(0, calc(var(--motion-distance-title) * -1), 0);
  }
  html.fl-motion .fl-scene[data-scene="start"].is-scene-play .hd-steps li,
  html.fl-motion .fl-scene[data-scene="start"].is-scene-play .hm-steps li{
    animation:fl-step-on var(--motion-duration-text) var(--motion-easing-standard) both;
  }
  html.fl-motion .fl-scene[data-scene="start"].is-scene-play .hd-steps li:nth-child(1),
  html.fl-motion .fl-scene[data-scene="start"].is-scene-play .hm-steps li:nth-child(1){animation-delay:0ms}
  html.fl-motion .fl-scene[data-scene="start"].is-scene-play .hd-steps li:nth-child(2),
  html.fl-motion .fl-scene[data-scene="start"].is-scene-play .hm-steps li:nth-child(2){animation-delay:400ms}
  html.fl-motion .fl-scene[data-scene="start"].is-scene-play .hd-steps li:nth-child(3),
  html.fl-motion .fl-scene[data-scene="start"].is-scene-play .hm-steps li:nth-child(3){animation-delay:800ms}
  html.fl-motion .fl-scene[data-scene="start"].is-scene-play .hd-steps li:nth-child(4),
  html.fl-motion .fl-scene[data-scene="start"].is-scene-play .hm-steps li:nth-child(4){animation-delay:1200ms}
  html.fl-motion .fl-scene[data-scene="start"].is-scene-play .hd-float,
  html.fl-motion .fl-scene[data-scene="start"].is-scene-play .hm-float{
    animation:fl-float-in var(--motion-duration-base) var(--motion-easing-standard) 1600ms both;
  }
}
@keyframes tx-pill-in{
  from{opacity:0;filter:blur(var(--motion-blur-enter))}
  to{opacity:1;filter:none}
}
@keyframes fl-rise{
  from{opacity:0;transform:translate3d(0, var(--motion-distance-small), 0)}
  to{opacity:1;transform:none}
}
@keyframes fl-fade{from{opacity:0}to{opacity:1}}
@keyframes fl-dot{
  0%, 80%, 100%{opacity:.35}
  40%{opacity:1}
}
@keyframes fl-step-on{from{opacity:.38}to{opacity:1}}
@keyframes fl-float-in{
  from{opacity:0;filter:blur(var(--motion-blur-enter));transform:translate3d(0, calc(var(--motion-distance-title) * -1), 0)}
  to{opacity:1;filter:none;transform:none}
}

@media (prefers-reduced-motion: no-preference) {
  html.fl-motion .hd-situation.is-scrub,
  html.fl-motion .hm-situation.is-scrub{position:relative}
  html.fl-motion .hd-situation.is-scrub{padding:0}
  html.fl-motion .hm-situation.is-scrub{padding-top:0;padding-bottom:0}
  html.fl-motion .is-scrub .fl-sit-pin{
    position:sticky;z-index:2;background:var(--color-neutral-blush-50);box-sizing:border-box;
  }
  html.fl-motion .hd-situation.is-scrub .fl-sit-pin{
    top:72px;max-height:calc(100vh - 72px);padding:var(--space-40) 0 var(--space-24);overflow:hidden;
  }
  html.fl-motion .hm-situation.is-scrub .fl-sit-pin{
    top:0;height:100vh;max-height:100vh;display:flex;flex-direction:column;
    padding:var(--space-24) 20px var(--space-16);overflow:hidden;
  }
  html.fl-motion .hd-situation.is-scrub .hd-sit{min-height:0;margin-top:var(--space-24)}
  html.fl-motion .hd-situation.is-scrub .hd-shot{
    width:min(100%, calc((100vh - 420px) * 470 / 633));
    justify-self:center;
  }
  html.fl-motion .hm-situation.is-scrub .hm-h2{
    font-size:var(--type-h3-size);line-height:var(--type-h3-leading);letter-spacing:var(--type-h3-tracking);
  }
  html.fl-motion .hm-situation.is-scrub .hm-tabs{margin-top:var(--space-16);gap:var(--space-8)}
  html.fl-motion .hm-situation.is-scrub .hm-tabs button{
    font-size:var(--type-h6-size);line-height:var(--type-h6-leading);letter-spacing:var(--type-h6-tracking);
  }
  html.fl-motion .hm-situation.is-scrub .hm-shot{
    flex:1 1 auto;min-height:0;width:100%;aspect-ratio:auto;
    margin-top:var(--space-12);
  }
  html.fl-motion .hm-situation.is-scrub .hm-sit-copy{margin-top:var(--space-12)}
  html.fl-motion .hd-shot .fl-sit-img,
  html.fl-motion .hm-shot .fl-sit-img{
    transition:opacity var(--motion-duration-text) var(--motion-easing-standard);
  }
  html.fl-motion .is-scrub .hd-tabs button,
  html.fl-motion .is-scrub .hm-tabs button{
    transition:color var(--motion-duration-text) var(--motion-easing-standard);
  }
  html.fl-motion .is-scrub .hd-sit-copy.is-swap > *,
  html.fl-motion .is-scrub .hm-sit-copy.is-swap > *{
    animation:fl-fade var(--motion-duration-text) var(--motion-easing-standard);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hd-hero-visual,
  .hm-hero-visual {
    animation: none;
    transform: none;
  }
  html.fl-motion .fl-reveal:not(.is-shown) {
    filter: none;
    transform: none;
  }
  html.fl-motion .fl-reveal.is-shown {
    filter: none;
    transform: none;
    transition: opacity var(--motion-duration-fade-reduced) var(--motion-easing-standard);
  }
}