/* ==========================================================================
   Appskillia — la couche de mouvement du site marchand
   Une seule idée : le site montre ce que fait le produit, des preuves qui
   s'accumulent. Le mouvement suit cette idée, il ne la décore pas.

   Règles tenues ici :
   · tout est visible sans JavaScript ; les états « avant » n'existent que
     lorsque motion.js a posé `html.motion`, jamais dans le HTML ;
   · transform, opacity, clip-path : jamais une propriété de mise en page ;
   · une seule courbe de sortie (expo), pas de rebond ;
   · `prefers-reduced-motion` : tout est immédiat, rien ne bouge.
   ========================================================================== */

:root{
  --ease-out:cubic-bezier(.16,1,.3,1);      /* expo : décidé, sans rebond */
  --ease-io:cubic-bezier(.65,0,.35,1);
  --d-fast:160ms; --d-mid:380ms; --d-reveal:900ms; --d-hero:1100ms;
}

/* ---------------------------------------------------------------- micro-interactions
   Le retour immédiat : sous 150 ms, on sent, on ne voit pas. */
.btn{transition:transform var(--d-fast) var(--ease-out),box-shadow var(--d-mid) var(--ease-out),background-color var(--d-fast) linear,border-color var(--d-fast) linear,color var(--d-fast) linear}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985);transition-duration:80ms}
.btn-act:hover{box-shadow:0 2px 4px rgba(12,43,46,.16),0 18px 32px -12px rgba(240,86,58,.62)}

.card,.plan{transition:transform var(--d-mid) var(--ease-out),box-shadow var(--d-mid) var(--ease-out),border-color var(--d-mid) linear}
.plan:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.plan.hi:hover{box-shadow:var(--shadow-3)}
.grid>.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}

/* Le lien de navigation : le souligné se trace depuis la gauche. */
.top nav a{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-size:0 1.5px;background-position:12px calc(100% - 8px);transition:background-size var(--d-mid) var(--ease-out),background-color var(--d-fast) linear,color var(--d-fast) linear}
.top nav a:hover,.top nav a[aria-current="page"]{background-size:calc(100% - 24px) 1.5px}

.switch button{transition:background-color var(--d-mid) var(--ease-out),color var(--d-fast) linear,box-shadow var(--d-mid) var(--ease-out),transform var(--d-fast) var(--ease-out)}
.switch button:active{transform:scale(.97)}

.faq summary::after{transition:transform var(--d-mid) var(--ease-out)}
html.motion .faq details[open] p{animation:mo-fade-up var(--d-mid) var(--ease-out) both}

/* ---------------------------------------------------------------- en-tête
   Au défilement : l'ombre arrive, et une ligne corail mesure la lecture. */
.top{transition:box-shadow var(--d-mid) var(--ease-out),border-color var(--d-mid) linear}
.top.is-scrolled{box-shadow:0 1px 0 var(--line),0 10px 30px -18px rgba(12,43,46,.35)}
.mo-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--corail);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}

/* ---------------------------------------------------------------- révélations
   États « avant », posés par motion.js seulement (html.motion + classe .rv).
   Sans JavaScript, sans IntersectionObserver, en impression : tout est là. */
html.motion .rv{opacity:0;transform:translate3d(0,18px,0);transition:opacity var(--d-reveal) var(--ease-out),transform var(--d-reveal) var(--ease-out);transition-delay:calc(var(--i,0) * 70ms)}
html.motion .rv.in{opacity:1;transform:none}

/* Les titres de section : un balayage depuis la ligne de base, pas un fondu.
   L'état « avant » n'est qu'une opacité : un clip-path à 100 % posé avant l'observation fait
   considérer l'élément comme invisible par IntersectionObserver une fois la page composée, et
   le titre ne se révèle jamais. Le balayage est donc une animation lancée à l'entrée. */
html.motion .rv-h{opacity:0}
html.motion .rv-h.in{opacity:1;animation:mo-wipe var(--d-reveal) var(--ease-out) both}
@keyframes mo-wipe{from{clip-path:inset(0 0 100% 0);transform:translate3d(0,12px,0)}to{clip-path:inset(-2px 0 -6px 0);transform:none}}

/* ---------------------------------------------------------------- l'ouverture (hero)
   Une seule chorégraphie : le titre, puis l'argument, puis l'action. À droite, le
   dossier d'audit se remplit ligne à ligne ; c'est le produit qui se présente. */
html.motion .hero .rv-hero{opacity:0;transform:translate3d(0,22px,0);animation:mo-hero var(--d-hero) var(--ease-out) forwards;animation-delay:calc(120ms + var(--i,0) * 110ms)}
html.motion .hero h1.rv-hero{clip-path:inset(0 0 100% 0);animation-name:mo-hero-title;animation-duration:900ms}
html.motion .hero .rv-row{opacity:0;transform:translate3d(0,10px,0);animation:mo-hero 700ms var(--ease-out) forwards;animation-delay:calc(700ms + var(--i,0) * 180ms)}
html.motion .hero .rv-row .pill{opacity:0;transform:scale(1.18);filter:blur(2px);animation:mo-stamp 480ms var(--ease-out) forwards;animation-delay:calc(1000ms + var(--i,0) * 180ms)}
html.motion .hero .rv-card{opacity:0;transform:translate3d(0,26px,0);animation:mo-hero var(--d-hero) var(--ease-out) forwards;animation-delay:320ms}

@keyframes mo-hero{to{opacity:1;transform:none}}
@keyframes mo-hero-title{0%{clip-path:inset(0 0 100% 0);opacity:1;transform:translate3d(0,22px,0)}100%{clip-path:inset(-4px 0 -8px 0);opacity:1;transform:none}}
@keyframes mo-stamp{to{opacity:1;transform:none;filter:blur(0)}}
@keyframes mo-fade-up{from{opacity:0;transform:translate3d(0,6px,0)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------- données qui bougent
   Les barres de prix poussent depuis la gauche quand on arrive dessus : on voit
   l'écart se creuser. Les montants comptent jusqu'à leur valeur. */
html.motion .anchor-row .bar i{transform:scaleX(0);transform-origin:0 50%;transition:transform 2200ms var(--ease-out);transition-delay:calc(var(--i,0) * 320ms)}
html.motion .anchor-bar.in .anchor-row .bar i{transform:none}
html.motion .anchor-row .val{opacity:0;transition:opacity var(--d-mid) linear;transition-delay:calc(1100ms + var(--i,0) * 320ms)}
html.motion .anchor-bar.in .anchor-row .val{opacity:1}

/* Les étapes : la pastille se remplit, le fil se déroule vers la suivante. */
html.motion .steps li::before{transform:scale(.6);opacity:0;transition:transform var(--d-mid) var(--ease-out),opacity var(--d-mid) linear;transition-delay:calc(var(--i,0) * 110ms)}
html.motion .steps li::after{transform:scaleY(0);transform-origin:50% 0;transition:transform 520ms var(--ease-out);transition-delay:calc(160ms + var(--i,0) * 110ms)}
html.motion .steps li.in::before{transform:none;opacity:1}
html.motion .steps li.in::after{transform:none}

/* Les coches des listes : elles apparaissent l'une après l'autre. */
html.motion ul.check li::after{opacity:0;transform:scale(.5) rotate(45deg);transition:opacity var(--d-fast) linear,transform var(--d-mid) var(--ease-out);transition-delay:calc(140ms + var(--i,0) * 70ms)}
html.motion ul.check li.in::after{opacity:1;transform:rotate(45deg)}

/* ---------------------------------------------------------------- montants qui changent
   Un prix qui change glisse (motion.js), et marque le coup d'un léger relief. */
.price .amt,.sim-vs b,.sim-gain .big,.sim-gain b,[data-prix-sub]{font-variant-numeric:tabular-nums}
.mo-bump{animation:mo-bump 1300ms var(--ease-out)}
.sim-gain .big.mo-bump{animation:mo-bump-fort 1400ms var(--ease-out)}
@keyframes mo-bump{0%{transform:scale(1)}30%{transform:scale(1.045)}100%{transform:scale(1)}}
@keyframes mo-bump-fort{0%{transform:scale(1);color:inherit}30%{transform:scale(1.08);color:var(--corail-texte)}100%{transform:scale(1);color:inherit}}
.price .amt,.sim-gain .big{display:inline-block;transform-origin:0 80%}
/* Les curseurs du simulateur : le champ répond sous le doigt. */
.sim input,.sim select{transition:border-color var(--d-fast) linear,box-shadow var(--d-mid) var(--ease-out)}
.sim input:focus,.sim select:focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 18%,transparent)}

/* ---------------------------------------------------------------- respect
   Rien ne bouge pour qui l'a demandé ; le contenu est là, tout de suite. */
@media(prefers-reduced-motion:reduce){
  html.motion .rv,html.motion .rv-h,html.motion .rv-h.in,html.motion .hero .rv-hero,html.motion .hero h1.rv-hero,html.motion .hero .rv-row,html.motion .hero .rv-row .pill,html.motion .hero .rv-card{opacity:1;transform:none;clip-path:none;filter:none;animation:none;transition:none}
  html.motion .anchor-row .bar i,html.motion .anchor-row .val,html.motion .steps li::before,html.motion .steps li::after,html.motion ul.check li::after{opacity:1;transform:none;transition:none}
  html.motion ul.check li::after{transform:rotate(45deg)}
  .mo-progress{display:none}
}
@media print{
  html.motion .rv,html.motion .rv-h,html.motion .hero .rv-hero,html.motion .hero h1.rv-hero,html.motion .hero .rv-row,html.motion .hero .rv-row .pill,html.motion .hero .rv-card{opacity:1;transform:none;clip-path:none;filter:none;animation:none}
}

/* ---------------------------------------------------------------- la démonstration du studio
   Un avatar généré par l'outil, muet. Le mouvement raconte le scénario : la réplique, le choix,
   la jauge qui encaisse. Boucle de 9 s en CSS ; la vidéo tourne dessous en boucle. */
.studio-demo{margin:0}
.sd-ecran{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--encre);box-shadow:var(--shadow-3);aspect-ratio:16/10}
.sd-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.12)}
.sd-hud{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:14px;pointer-events:none}
.sd-jauge{display:flex;align-items:center;gap:10px;align-self:flex-start;background:rgba(12,43,46,.78);color:#fff;border-radius:999px;padding:7px 14px;font-size:12.5px;backdrop-filter:blur(6px)}
.sd-jlab{font-family:var(--display);font-weight:600;letter-spacing:.02em}
.sd-jbar{width:120px;height:6px;border-radius:999px;background:rgba(255,255,255,.22);overflow:hidden}
.sd-jbar i{display:block;height:100%;width:62%;border-radius:999px;background:#7FD1A6}
.sd-bulles{display:grid;gap:8px;justify-items:start;max-width:78%}
.sd-bulle{background:#fff;color:var(--ink);border-radius:14px 14px 14px 4px;padding:9px 13px;font-size:14px;line-height:1.35;box-shadow:var(--shadow-2);opacity:0;transform:translate3d(0,10px,0)}
.sd-bulle.sd-choix{background:var(--encre);color:#fff;border-radius:14px 14px 4px 14px;justify-self:end;font-weight:600}
.sd-bulle.sd-perte{background:var(--warn-soft);color:#855310;border:1px solid #E8D9B6;font-weight:700;font-size:13px}
.sd-legende{font-size:13px;color:var(--ink-2);margin:12px 4px 0;line-height:1.5}
html.motion .sd-b1{animation:sd-bulle 9s var(--ease-out) infinite}
html.motion .sd-b2{animation:sd-bulle 9s var(--ease-out) infinite;animation-delay:2.2s}
html.motion .sd-b3{animation:sd-bulle 9s var(--ease-out) infinite;animation-delay:4.1s}
html.motion .sd-jbar i{animation:sd-jauge 9s var(--ease-out) infinite}
@keyframes sd-bulle{0%,4%{opacity:0;transform:translate3d(0,10px,0)}9%,58%{opacity:1;transform:none}64%,100%{opacity:0;transform:translate3d(0,-6px,0)}}
@keyframes sd-jauge{0%,44%{width:62%;background:#7FD1A6}52%,66%{width:47%;background:#F0B15A}74%,100%{width:62%;background:#7FD1A6}}
@media(prefers-reduced-motion:reduce){
  html.motion .sd-b1,html.motion .sd-b2,html.motion .sd-b3{animation:none;opacity:1;transform:none}
  html.motion .sd-jbar i{animation:none}
}

/* ---------------------------------------------------------------- la même cliente, deux suites
   Deux états générés du même avatar ; la boucle de 12 s montre l'un puis l'autre, avec
   l'étiquette de la suite qui l'a produit. Le scénario écrit est à côté : c'est lui qui décide. */
.suite-grid{display:grid;gap:22px;align-items:start}
@media(min-width:900px){.suite-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}}
.scenario-ecrit li{margin-bottom:9px}
.studio-duo{margin:0}
.duo-cadre{position:relative;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;background:var(--encre);box-shadow:var(--shadow-3)}
.duo-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.duo-b{opacity:0}
.duo-etiq{position:absolute;left:12px;right:12px;bottom:12px;background:rgba(255,255,255,.94);color:var(--ink);border-radius:12px;padding:8px 11px;font-size:13px;line-height:1.35;display:flex;align-items:center;gap:8px;flex-wrap:wrap;box-shadow:var(--shadow-2)}
.duo-eb{opacity:0}
html.motion .duo-b{animation:duo-b 12s var(--ease-io) infinite}
html.motion .duo-eb{animation:duo-b 12s var(--ease-io) infinite}
html.motion .duo-ea{animation:duo-a 12s var(--ease-io) infinite}
@keyframes duo-b{0%,46%{opacity:0}54%,96%{opacity:1}100%{opacity:0}}
@keyframes duo-a{0%,46%{opacity:1}54%,96%{opacity:0}100%{opacity:1}}
@media(prefers-reduced-motion:reduce){
  html.motion .duo-b,html.motion .duo-eb,html.motion .duo-ea{animation:none}
  .duo-b{opacity:0}.duo-eb{opacity:0}
}

/* ---------------------------------------------------------------- l'escalier du comparatif
   Les quatre barres défilent en boucle, l'une après l'autre (10 s) : on voit la marche que
   fait la facture du leader quand on passe de un à trois, et la nôtre qui ne bouge presque pas. */
html.motion .anchor-bar.escalier .anchor-row .bar i{transition:none;transform:scaleX(0);transform-origin:0 50%;animation:18s var(--ease-out) infinite}
html.motion .anchor-bar.escalier .anchor-row .val{transition:none;opacity:0;animation:18s linear infinite}
html.motion .anchor-bar.escalier .anchor-row:nth-child(1) .bar i{animation-name:esc-b1}
html.motion .anchor-bar.escalier .anchor-row:nth-child(2) .bar i{animation-name:esc-b2}
html.motion .anchor-bar.escalier .anchor-row:nth-child(3) .bar i{animation-name:esc-b3}
html.motion .anchor-bar.escalier .anchor-row:nth-child(4) .bar i{animation-name:esc-b4}
html.motion .anchor-bar.escalier .anchor-row:nth-child(1) .val{animation-name:esc-v1}
html.motion .anchor-bar.escalier .anchor-row:nth-child(2) .val{animation-name:esc-v2}
html.motion .anchor-bar.escalier .anchor-row:nth-child(3) .val{animation-name:esc-v3}
html.motion .anchor-bar.escalier .anchor-row:nth-child(4) .val{animation-name:esc-v4}
@keyframes esc-b1{0%{transform:scaleX(0)}14%,84%{transform:scaleX(1)}92%,100%{transform:scaleX(0)}}
@keyframes esc-b2{0%,16%{transform:scaleX(0)}30%,84%{transform:scaleX(1)}92%,100%{transform:scaleX(0)}}
@keyframes esc-b3{0%,32%{transform:scaleX(0)}46%,84%{transform:scaleX(1)}92%,100%{transform:scaleX(0)}}
@keyframes esc-b4{0%,48%{transform:scaleX(0)}62%,84%{transform:scaleX(1)}92%,100%{transform:scaleX(0)}}
@keyframes esc-v1{0%,11%{opacity:0}15%,82%{opacity:1}86%,100%{opacity:0}}
@keyframes esc-v2{0%,27%{opacity:0}31%,82%{opacity:1}86%,100%{opacity:0}}
@keyframes esc-v3{0%,43%{opacity:0}47%,82%{opacity:1}86%,100%{opacity:0}}
@keyframes esc-v4{0%,59%{opacity:0}63%,82%{opacity:1}86%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
  html.motion .anchor-bar.escalier .anchor-row .bar i,html.motion .anchor-bar.escalier .anchor-row .val{animation:none;transform:none;opacity:1}
}