/* Couche de mouvement progressive. Le document reste visible sans html.mv. */
:root { --mv-ease: cubic-bezier(.2, .7, .2, 1); }
html { scroll-behavior: auto; }

/* Les entrées de couverture, le flottement des personnages et la lumière des stores
   (accueil.css, composants.css, stores.css) restent en place : la couche s'y ajoute. */

/* Ces contenants conservent la place et la typographie du contenu source. */
.mv-portrait { display: block; overflow: hidden; border-radius: var(--mv-radius, var(--r-card)); }
.mv-counting { position: relative; }
.mv-count-source { display: block; }
.mv-count-value { display: none; position: absolute; inset: 0; pointer-events: none; }
.mv-bubble { position: relative; }
.mv-dots {
  display: none;
  position: absolute;
  left: 14px;
  top: 50%;
  align-items: center;
  gap: 5px;
  height: 8px;
  margin-top: -4px;
  pointer-events: none;
}
.mv-dots > span { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.mv-calculator .range-field { position: relative; }
.mv-thumb-halo {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  border: 2px solid #FF6B5C;
  border-radius: 50%;
  pointer-events: none;
  translate: var(--mv-thumb-x, 0px) var(--mv-thumb-y, 0px);
}

@media (prefers-reduced-motion: no-preference) {
  html.mv { scroll-behavior: smooth; }

  html.mv .mv-reveal { opacity: 1; translate: 0 0; }
  html.mv .mv-reveal:not(.mv-seen) { opacity: 0; translate: 0 16px; }
  html.mv.mv-ready .mv-reveal {
    transition: opacity .85s var(--mv-ease) var(--mv-delay, 0ms),
      translate .85s var(--mv-ease) var(--mv-delay, 0ms),
      filter .85s var(--mv-ease) var(--mv-delay, 0ms);
  }
  html.mv .mv-title { filter: blur(0); }
  html.mv .mv-title:not(.mv-seen) { filter: blur(6px); }
  /* Le span reste inline : le titre porte la montée, les mots gardent leurs lignes. */
  html.mv .mv-beat, html.mv .mv-beat:not(.mv-seen) { translate: none; }

  html.mv .mv-image {
    opacity: 1;
    translate: none;
    clip-path: inset(0 0 0 0 round var(--mv-radius, var(--r-card)));
  }
  html.mv .mv-image:not(.mv-seen) {
    opacity: 1;
    translate: none;
    clip-path: inset(100% 0 0 0 round var(--mv-radius, var(--r-card)));
  }
  html.mv.mv-ready .mv-image {
    transition: clip-path 1s var(--mv-ease) var(--mv-delay, 0ms);
  }
  html.mv .mv-image-content { scale: 1; transform-origin: center; }
  html.mv .mv-image:not(.mv-seen) .mv-image-content { scale: 1.08; }
  html.mv.mv-ready .mv-image-content {
    transition: scale 1.4s var(--mv-ease) var(--mv-delay, 0ms);
  }

  html.mv .tache .tache-fil { transform: scaleX(1); transform-origin: left center; }
  html.mv .tache:not(.mv-seen) .tache-fil { transform: scaleX(0); }
  html.mv .tache .tache-apps > * { opacity: 1; scale: 1; }
  html.mv .tache:not(.mv-seen) .tache-apps > * { opacity: 0; scale: .7; }
  html.mv.mv-ready .tache .tache-fil {
    transition: transform .7s var(--mv-ease) calc(var(--mv-delay, 0ms) + 400ms);
  }
  html.mv.mv-ready .tache .tache-apps > * {
    transition: opacity .7s var(--mv-ease) calc(var(--mv-delay, 0ms) + var(--mv-app-delay, 1100ms)),
      scale .7s var(--mv-ease) calc(var(--mv-delay, 0ms) + var(--mv-app-delay, 1100ms));
  }

  html.mv .mv-person { scale: 1; transform: translateY(var(--mv-person-y, 0px)) rotate(0deg); }
  html.mv .mv-person:not(.mv-seen) { scale: .85; transform: translateY(var(--mv-person-y, 0px)) rotate(-6deg); }
  html.mv .mv-person:nth-child(even):not(.mv-seen) { transform: translateY(var(--mv-person-y, 0px)) rotate(6deg); }
  @media (max-width: 900px) {
    html.mv .equipe-libre .perso:nth-child(2n+3) { --mv-person-y: 30px; }
  }
  html.mv.mv-ready .mv-person {
    transition: opacity .9s var(--mv-ease) var(--mv-delay, 0ms),
      translate .9s var(--mv-ease) var(--mv-delay, 0ms),
      scale .9s var(--mv-ease) var(--mv-delay, 0ms),
      transform .9s var(--mv-ease) var(--mv-delay, 0ms);
  }
  @media (pointer: fine) {
    html.mv .equipe-libre .forme::before, html.mv .equipe-libre .forme::after {
      translate: var(--mv-eye-x, 0px) var(--mv-eye-y, 0px);
      transition: translate 180ms var(--mv-ease);
    }
  }

  html.mv .mv-suite > span { display: inline-block; }
  html.mv .mv-suite > .mv-fleche, html.mv .mv-suite > .mv-apres { opacity: 1; translate: 0 0; }
  html.mv :not(.mv-seen) > .mv-suite > .mv-fleche, html.mv .mv-suite:not(.mv-seen) > .mv-fleche { opacity: 0; translate: -6px 0; }
  html.mv :not(.mv-seen) > .mv-suite > .mv-apres, html.mv .mv-suite:not(.mv-seen) > .mv-apres { opacity: 0; translate: 10px 0; }
  html.mv.mv-ready .mv-suite > .mv-fleche { transition: opacity .5s var(--mv-ease) calc(var(--mv-delay, 0ms) + 650ms), translate .5s var(--mv-ease) calc(var(--mv-delay, 0ms) + 650ms); }
  html.mv.mv-ready .mv-suite > .mv-apres { transition: opacity .7s var(--mv-ease) calc(var(--mv-delay, 0ms) + 950ms), translate .7s var(--mv-ease) calc(var(--mv-delay, 0ms) + 950ms); }
  html.mv .mv-skip .mv-suite > span, html.mv .mv-suite.mv-skip > span { transition: none; }

  html.mv .mv-counting > .mv-count-source { opacity: 0; }
  html.mv .mv-counting > .mv-count-value { display: block; }
  html.mv .mv-dots { display: flex; opacity: 0; }
  html.mv .mv-typing > .mv-bubble-text { opacity: 0; }
  html.mv .mv-typing > .mv-dots { opacity: 1; }
  html.mv .mv-typing > .mv-dots > span { animation: mv-dot 600ms var(--mv-ease) both; }
  html.mv .mv-typing > .mv-dots > span:nth-child(2) { animation-delay: 80ms; }
  html.mv .mv-typing > .mv-dots > span:nth-child(3) { animation-delay: 160ms; }
  html.mv .week-bar { transform-origin: left center; transition: transform 160ms var(--mv-ease); }
  html.mv .mv-thumb-halo.mv-halo-active { display: block; animation: mv-halo 2.8s ease-in-out infinite; }
  html.mv [data-onglet][aria-selected="false"].mv-tab-invitation { animation: mv-tab-pulse 700ms ease-in-out 2; }

  /* Ombres fixes révélées par opacité : aucun flou ni ombre interpolés. */
  html.mv .nav { isolation: isolate; }
  html.mv .nav::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    background: var(--card);
    box-shadow: 0 6px 22px rgb(18 18 18 / .08);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms var(--mv-ease);
  }
  html.mv .nav-shell.defile .nav::before { opacity: .86; }
  html.mv :is(.card, .metier, .rassure-grid > *, .exemples > *, .tuto, .funding-grid > *) {
    position: relative;
    isolation: isolate;
  }
  html.mv :is(.card, .metier, .rassure-grid > *, .exemples > *, .tuto, .funding-grid > *)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    box-shadow: 0 10px 28px rgb(18 18 18 / .075);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms var(--mv-ease);
  }
  html.mv.mv-ready :is(.card, .metier, .rassure-grid > *, .exemples > *, .tuto, .funding-grid > *) {
    transition: opacity .85s var(--mv-ease) var(--mv-delay, 0ms),
      translate .85s var(--mv-ease) var(--mv-delay, 0ms),
      transform 200ms var(--mv-ease);
  }
  html.mv .pill { transition: transform 200ms var(--mv-ease); }
  html.mv .pill .arrow { transition: translate 200ms var(--mv-ease); }
  html.mv .logos img { transition: scale 200ms var(--mv-ease); }
  html.mv .pill:focus-visible { transform: translateY(-2px); }
  html.mv .pill:focus-visible .arrow { translate: 3px 0; }
  html.mv :is(.card, .metier, .rassure-grid > *, .exemples > *, .tuto, .funding-grid > *):is(:focus-visible, :has(:focus-visible)) { transform: translateY(-2px); }
  html.mv :is(.card, .metier, .rassure-grid > *, .exemples > *, .tuto, .funding-grid > *):is(:focus-visible, :has(:focus-visible))::after { opacity: 1; }
  html.mv .logos > :is(:focus-visible, :has(:focus-visible)) img { scale: 1.06; }
  @media (hover: hover) and (pointer: fine) {
    html.mv .pill:hover { transform: translateY(-2px); }
    html.mv .pill:hover .arrow { translate: 3px 0; }
    html.mv :is(.card, .metier, .rassure-grid > *, .exemples > *, .tuto, .funding-grid > *):hover { transform: translateY(-2px); }
    html.mv :is(.card, .metier, .rassure-grid > *, .exemples > *, .tuto, .funding-grid > *):hover::after { opacity: 1; }
    html.mv .logos > :hover img { scale: 1.06; }
  }

  html.mv .faq .plus { transition: transform 200ms var(--mv-ease); }
  html.mv .faq .plus::after { transition: none; }
  html.mv .faq details[open] .plus { transform: rotate(45deg); }
  html.mv .faq details[open] .plus::after { transform: translate(-50%, -50%) rotate(90deg); }
  /* L'ouverture demandée est l'unique interpolation de taille, après un geste. */
  @supports (interpolate-size: allow-keywords) and selector(details::details-content) {
    html.mv .faq details { interpolate-size: allow-keywords; }
    html.mv .faq details::details-content {
      block-size: 0;
      overflow: clip;
      opacity: 0;
      transition: block-size .24s var(--mv-ease), opacity .24s var(--mv-ease), content-visibility .24s allow-discrete;
    }
    html.mv .faq details[open]::details-content { block-size: auto; opacity: 1; }
  }

  @supports (animation-timeline: view()) {
    html.mv :is(.porte-image, .concept).mv-image {
      animation: mv-parallax 1s linear both;
      animation-timeline: view(block);
      animation-range: entry 0% exit 100%;
    }
    /* L'entrée « settle » garde sa minuterie ; la descente suit le défilement (propriété translate, sans conflit). */
    html.mv .cover-photo img {
      animation: settle 1.8s var(--mv-ease) both, mv-cover 1s linear both;
      animation-timeline: auto, scroll(root block);
      animation-range: normal, 0px var(--mv-hero-range, 100vh);
    }
  }

  html.mv .mv-skip .mv-image-content,
  html.mv .tache.mv-skip .tache-fil,
  html.mv .tache.mv-skip .tache-apps > * { transition: none; }
}

@keyframes mv-parallax { from { translate: 0 -4%; } to { translate: 0 4%; } }
@keyframes mv-cover { from { translate: 0 0; } to { translate: 0 5%; } }
@keyframes mv-dot { 0%, 100% { opacity: .4; translate: 0 0; } 45% { opacity: 1; translate: 0 -2px; } }
@keyframes mv-halo { 0%, 100% { opacity: .14; scale: 1.15; } 50% { opacity: .45; scale: 1.65; } }
@keyframes mv-tab-pulse { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: .65; scale: 1.025; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .mv-thumb-halo, .mv-dots, .mv-count-value { display: none !important; }
}

@media print {
  html.mv .mv-reveal { opacity: 1 !important; translate: none !important; scale: 1 !important; rotate: 0deg !important; filter: none !important; clip-path: none !important; }
  html.mv .mv-count-source, html.mv .mv-bubble-text { opacity: 1 !important; }
  .mv-count-value, .mv-dots, .mv-thumb-halo { display: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}