/* MARZEL — le parcours d'un dossier en haut de l'accueil (« La ligne », 2026-10-17) : le mouvement. Fichier produit par
   09-outils/parcours-minutage.mjs (ne pas le modifier à la main : changer le minutage là-bas, puis
   « node 09-outils/parcours-minutage.mjs »). Mise en page et image fixe : accueil.css.
   Une boucle de 14 s : 2 dossiers de 7 s. Seules transform et opacity bougent (rien ne recalcule la mise
   en page). La boucle ne joue que lorsque le schéma est à l'écran (.ld-joue, posée par /js/accueil.js) et s'arrête avec le
   bouton Pause (.ld-arret). Sans JavaScript ou en mouvement réduit : aucune animation, l'image fixe d'accueil.css. Toutes
   les animations partent et s'arrêtent ensemble : elles restent accordées. */

.ld { --ld-p: 7000ms; --ld-boucle: 14000ms; }
html.js:not(.rm) .ld .ld-voyage { animation: ld-voyage var(--ld-p) linear infinite both; }
html.js:not(.rm) .ld .ld-etape[data-pas="1"] .ld-fait { animation: ld-coche-1 var(--ld-p) linear infinite both; }
html.js:not(.rm) .ld .ld-etape[data-pas="2"] .ld-fait { animation: ld-coche-2 var(--ld-p) linear infinite both; }
html.js:not(.rm) .ld .ld-etape[data-pas="3"] .ld-fait { animation: ld-coche-3 var(--ld-p) linear infinite both; }
html.js:not(.rm) .ld .ld-etape[data-pas="4"] .ld-fait { animation: ld-coche-4 var(--ld-p) linear infinite both; }
html.js:not(.rm) .ld .ld-etape[data-pas="5"] .ld-fait { animation: ld-coche-5 var(--ld-p) linear infinite both; }
html.js:not(.rm) .ld .ld-etape[data-pas="1"] .ld-nom-encre { animation: ld-nom-1 var(--ld-p) linear infinite both; }
html.js:not(.rm) .ld .ld-etape[data-pas="2"] .ld-nom-encre { animation: ld-nom-2 var(--ld-p) linear infinite both; }
html.js:not(.rm) .ld .ld-etape[data-pas="3"] .ld-nom-encre { animation: ld-nom-3 var(--ld-p) linear infinite both; }
html.js:not(.rm) .ld .ld-etape[data-pas="4"] .ld-nom-encre { animation: ld-nom-4 var(--ld-p) linear infinite both; }
html.js:not(.rm) .ld .ld-etape[data-pas="5"] .ld-nom-encre { animation: ld-nom-5 var(--ld-p) linear infinite both; }
html.js:not(.rm) .ld .ld-nom-bleu { animation: ld-nom-bleu var(--ld-p) linear infinite both; }
html.js:not(.rm) .ld .ld-trait[data-seg="1"] { animation: ld-trait-1 var(--ld-p) linear infinite both; }
html.js:not(.rm) .ld .ld-trait[data-seg="2"] { animation: ld-trait-2 var(--ld-p) linear infinite both; }
html.js:not(.rm) .ld .ld-trait[data-seg="3"] { animation: ld-trait-3 var(--ld-p) linear infinite both; }
html.js:not(.rm) .ld .ld-trait[data-seg="4"] { animation: ld-trait-4 var(--ld-p) linear infinite both; }
html.js:not(.rm) .ld .ld-decide { animation: ld-decide var(--ld-p) linear infinite both; }
html.js:not(.rm) .ld .ld-oui { animation: ld-oui var(--ld-p) linear infinite both; }
html.js:not(.rm) .ld .ld-oui-plein { animation: ld-oui-plein var(--ld-p) linear infinite both; }
html.js:not(.rm) .ld .ld-touche { animation: ld-touche var(--ld-p) linear infinite both; }
html.js:not(.rm) .ld .ld-fin { animation: ld-fin var(--ld-p) linear infinite both; }
html.js:not(.rm) .ld .ld-dossier[data-n="1"] { animation: ld-dossier-1 var(--ld-boucle) linear infinite both; }
html.js:not(.rm) .ld .ld-dossier[data-n="2"] { animation: ld-dossier-2 var(--ld-boucle) linear infinite both; }
.ld:not(.ld-joue) *, .ld.ld-arret * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .ld * { animation: none !important; } }

@keyframes ld-voyage {
  0% { opacity: 0; transform: translate(calc(var(--hx) * (var(--d0) + -18px)), calc(var(--hy) * (var(--d0) + -18px))); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  5.429% { opacity: 1; transform: translate(calc(var(--hx) * (var(--d0) + 0px)), calc(var(--hy) * (var(--d0) + 0px))); }
  8.857% { opacity: 1; transform: translate(calc(var(--hx) * (var(--d0) + 0px)), calc(var(--hy) * (var(--d0) + 0px))); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  14.286% { opacity: 1; transform: translate(calc(var(--hx) * (var(--d1) + 0px)), calc(var(--hy) * (var(--d1) + 0px))); }
  17.714% { opacity: 1; transform: translate(calc(var(--hx) * (var(--d1) + 0px)), calc(var(--hy) * (var(--d1) + 0px))); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  23.143% { opacity: 1; transform: translate(calc(var(--hx) * (var(--d2) + 0px)), calc(var(--hy) * (var(--d2) + 0px))); }
  26.571% { opacity: 1; transform: translate(calc(var(--hx) * (var(--d2) + 0px)), calc(var(--hy) * (var(--d2) + 0px))); animation-timing-function: cubic-bezier(0.5, 0, 0.1, 1); }
  33.429% { opacity: 1; transform: translate(calc(var(--hx) * (var(--d3) + 0px)), calc(var(--hy) * (var(--d3) + 0px))); }
  69.429% { opacity: 1; transform: translate(calc(var(--hx) * (var(--d3) + 0px)), calc(var(--hy) * (var(--d3) + 0px))); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  74.286% { opacity: 1; transform: translate(calc(var(--hx) * (var(--d4) + 0px)), calc(var(--hy) * (var(--d4) + 0px))); }
  94.286% { opacity: 1; transform: translate(calc(var(--hx) * (var(--d4) + 0px)), calc(var(--hy) * (var(--d4) + 0px))); animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.5); }
  97.143% { opacity: 0; transform: translate(calc(var(--hx) * (var(--d4) + 18px)), calc(var(--hy) * (var(--d4) + 18px))); }
  100% { opacity: 0; transform: translate(calc(var(--hx) * (var(--d4) + 18px)), calc(var(--hy) * (var(--d4) + 18px))); }
}

@keyframes ld-coche-1 {
  0% { opacity: 0; transform: scale(0.4); }
  5.429% { opacity: 0; transform: scale(0.4); animation-timing-function: cubic-bezier(0.3, 1.35, 0.6, 1); }
  7.429% { opacity: 1; transform: scale(1); }
  97.143% { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  100% { opacity: 0; transform: scale(1); }
}

@keyframes ld-coche-2 {
  0% { opacity: 0; transform: scale(0.4); }
  14.286% { opacity: 0; transform: scale(0.4); animation-timing-function: cubic-bezier(0.3, 1.35, 0.6, 1); }
  16.286% { opacity: 1; transform: scale(1); }
  97.143% { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  100% { opacity: 0; transform: scale(1); }
}

@keyframes ld-coche-3 {
  0% { opacity: 0; transform: scale(0.4); }
  23.143% { opacity: 0; transform: scale(0.4); animation-timing-function: cubic-bezier(0.3, 1.35, 0.6, 1); }
  25.143% { opacity: 1; transform: scale(1); }
  97.143% { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  100% { opacity: 0; transform: scale(1); }
}

@keyframes ld-coche-5 {
  0% { opacity: 0; transform: scale(0.4); }
  74.286% { opacity: 0; transform: scale(0.4); animation-timing-function: cubic-bezier(0.3, 1.35, 0.6, 1); }
  76.286% { opacity: 1; transform: scale(1); }
  97.143% { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  100% { opacity: 0; transform: scale(1); }
}

@keyframes ld-coche-4 {
  0% { opacity: 0; transform: scale(0.6); }
  66% { opacity: 0; transform: scale(0.6); animation-timing-function: cubic-bezier(0.3, 1.35, 0.6, 1); }
  68.857% { opacity: 1; transform: scale(1); }
  97.143% { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  100% { opacity: 0; transform: scale(1); }
}

@keyframes ld-nom-1 {
  0% { opacity: 0.62; }
  5.429% { opacity: 0.62; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  7.429% { opacity: 1; }
  97.143% { opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  100% { opacity: 0.62; }
}

@keyframes ld-nom-2 {
  0% { opacity: 0.62; }
  14.286% { opacity: 0.62; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  16.286% { opacity: 1; }
  97.143% { opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  100% { opacity: 0.62; }
}

@keyframes ld-nom-3 {
  0% { opacity: 0.62; }
  23.143% { opacity: 0.62; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  25.143% { opacity: 1; }
  97.143% { opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  100% { opacity: 0.62; }
}

@keyframes ld-nom-5 {
  0% { opacity: 0.62; }
  74.286% { opacity: 0.62; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  76.286% { opacity: 1; }
  97.143% { opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  100% { opacity: 0.62; }
}

@keyframes ld-trait-1 {
  0% { opacity: 0; }
  14.286% { opacity: 0; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  16.286% { opacity: 1; }
  97.143% { opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  100% { opacity: 0; }
}

@keyframes ld-trait-2 {
  0% { opacity: 0; }
  23.143% { opacity: 0; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  25.143% { opacity: 1; }
  97.143% { opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  100% { opacity: 0; }
}

@keyframes ld-trait-3 {
  0% { opacity: 0; }
  33.429% { opacity: 0; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  36.571% { opacity: 1; }
  97.143% { opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  100% { opacity: 0; }
}

@keyframes ld-trait-4 {
  0% { opacity: 0; }
  74.286% { opacity: 0; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  76.286% { opacity: 1; }
  97.143% { opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  100% { opacity: 0; }
}

@keyframes ld-decide {
  0% { opacity: 0; transform: scale(0.5); }
  33.429% { opacity: 0; transform: scale(0.5); animation-timing-function: cubic-bezier(0.3, 1.35, 0.6, 1); }
  36.571% { opacity: 1; transform: scale(1); }
  66% { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  68.857% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 0; transform: scale(0.8); }
}

@keyframes ld-nom-4 {
  0% { opacity: 0.62; }
  33.429% { opacity: 0.62; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  36.571% { opacity: 0; }
  66% { opacity: 0; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  68.857% { opacity: 1; }
  97.143% { opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  100% { opacity: 0.62; }
}

@keyframes ld-nom-bleu {
  0% { opacity: 0; }
  33.429% { opacity: 0; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  36.571% { opacity: 1; }
  66% { opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  68.857% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes ld-oui {
  0% { opacity: 0; transform: translateY(6px) scale(1); }
  36.571% { opacity: 0; transform: translateY(6px) scale(1); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  40% { opacity: 1; transform: translateY(0) scale(1); }
  61.429% { opacity: 1; transform: translateY(0) scale(1); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  62.857% { opacity: 1; transform: translateY(0) scale(0.92); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  65% { opacity: 1; transform: translateY(0) scale(1); }
  66% { opacity: 1; transform: translateY(0) scale(1); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  68.857% { opacity: 0; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(0) scale(1); }
}

@keyframes ld-oui-plein {
  0% { opacity: 0; }
  61.429% { opacity: 0; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  62.857% { opacity: 1; }
  97.143% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes ld-touche {
  0% { opacity: 0; transform: scale(0.85); }
  59.286% { opacity: 0; transform: scale(0.85); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  61.429% { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  62.857% { opacity: 1; transform: scale(0.94); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  65.714% { opacity: 0; transform: scale(1.12); }
  100% { opacity: 0; transform: scale(1.12); }
}

@keyframes ld-fin {
  0% { opacity: 0; transform: scale(0.4); }
  76.286% { opacity: 0; transform: scale(0.4); animation-timing-function: cubic-bezier(0.3, 1.35, 0.6, 1); }
  79.143% { opacity: 1; transform: scale(1); }
  97.143% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.4); }
}

@keyframes ld-dossier-1 {
  0% { opacity: 1; animation-timing-function: step-end; }
  50% { opacity: 0; animation-timing-function: step-end; }
  100% { opacity: 0; }
}

@keyframes ld-dossier-2 {
  0% { opacity: 0; animation-timing-function: step-end; }
  50% { opacity: 1; animation-timing-function: step-end; }
  100% { opacity: 1; }
}