/* Chaque séquence conserve sa place : aucun déplacement du texte de la page. */
.method-section [data-motion-demo]{--demo-duration:12s}
.method-section .video-visual{padding-bottom:68px}
.lesson-motion-progress{display:flex;gap:5px;margin-top:17px}
.lesson-motion-progress>i{height:2px;flex:1;background:#ffffff19;overflow:hidden;border-radius:2px}
.lesson-motion-progress>i:after{content:"";display:block;width:100%;height:100%;background:#c7d4ae;transform-origin:left}

/* Cours : la carte se pose, puis les trois étapes se dessinent. */
[data-motion-demo="lesson"].is-playing .feature-lesson{animation:lesson-settle var(--demo-duration) ease-in-out infinite both}
[data-motion-demo="lesson"].is-playing .lesson-motion-progress>i:after{animation:lesson-progress var(--demo-duration) ease-in-out infinite both;animation-delay:.6s}
[data-motion-demo="lesson"].is-playing .lesson-motion-progress>i:nth-child(2):after{animation-delay:1.2s}
[data-motion-demo="lesson"].is-playing .lesson-motion-progress>i:nth-child(3):after{animation-delay:1.8s}
@keyframes lesson-settle{0%,100%{opacity:.7;transform:translateY(9px) rotate(-4deg)}12%,88%{opacity:1;transform:translateY(0) rotate(-3deg)}}
@keyframes lesson-progress{0%{transform:scaleX(0)}16%,70%{transform:scaleX(1);opacity:1}85%,100%{transform:scaleX(1);opacity:0}}

/* Ressources : les feuilles s’ouvrent, les lignes arrivent, la coche se trace. */
[data-motion-demo="resources"].is-playing .sheet-back{animation:resource-back var(--demo-duration) ease-in-out infinite both}
[data-motion-demo="resources"].is-playing .sheet-front{animation:resource-front var(--demo-duration) ease-in-out infinite both}
[data-motion-demo="resources"].is-playing .file-lines i{transform-origin:left;animation:resource-line var(--demo-duration) ease-in-out infinite both;animation-delay:.8s}
[data-motion-demo="resources"].is-playing .file-lines i:nth-child(2){animation-delay:1.1s}
[data-motion-demo="resources"].is-playing .file-lines i:nth-child(3){animation-delay:1.4s}
[data-motion-demo="resources"].is-playing .file-chip{animation:resource-chip var(--demo-duration) ease-in-out infinite both}
[data-motion-demo="resources"].is-playing .file-chip .icon path{stroke-dasharray:30;animation:resource-check var(--demo-duration) ease-in-out infinite both}
@keyframes resource-back{0%,100%{transform:translate(12px,12px) rotate(-7deg)}14%,88%{transform:translate(0,0) rotate(-12deg)}}
@keyframes resource-front{0%,100%{transform:translate(-7px,14px) rotate(3deg)}18%,88%{transform:translate(0,0) rotate(7deg)}}
@keyframes resource-line{0%{transform:scaleX(0);opacity:0}12%,75%{transform:scaleX(1);opacity:1}88%,100%{transform:scaleX(1);opacity:0}}
@keyframes resource-chip{0%,24%{opacity:0;transform:translateY(12px) rotate(-4deg) scale(.95)}31%,86%{opacity:1;transform:translateY(0) rotate(-4deg) scale(1)}96%,100%{opacity:0;transform:translateY(-3px) rotate(-4deg)}}
@keyframes resource-check{0%,29%{stroke-dashoffset:30}35%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:30}}

@media(prefers-reduced-motion:reduce){
  .method-section [data-motion-demo] *,.method-section [data-motion-demo] :after{animation:none!important}
}