/* Académie animée : leçon pas à pas, points d'expérience, série de jours, confettis, schémas qui s'animent.
   Amélioration progressive : sans JavaScript, la leçon s'affiche en entier comme avant. */
@keyframes acUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes acPop { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
@keyframes acToast { 0% { opacity: 0; transform: translateY(10px) scale(.9); } 15% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-26px); } }
@keyframes acKen { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.06) translate3d(-1.2%, -1%, 0); } }
@keyframes acPulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--algo-accent) 55%, transparent); } 50% { box-shadow: 0 0 0 10px transparent; } }
@keyframes acShine { from { background-position: -200% 0; } to { background-position: 200% 0; } }

/* bandeau de progression */
.ac-story-top { position: sticky; top: 64px; z-index: 5; margin: 0 0 18px; padding: 10px 14px; border: 1px solid var(--algo-border); border-radius: 14px;
  background: color-mix(in srgb, var(--algo-bg, #0b0d12) 88%, transparent); backdrop-filter: blur(8px); display: grid; gap: 8px; }
.ac-story-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; font-size: .85rem; }
.ac-chip { display: inline-flex; gap: 6px; align-items: center; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--algo-border); font-weight: 700; white-space: nowrap; }
.ac-chip--xp { border-color: color-mix(in srgb, #f59e0b 55%, transparent); color: #f59e0b; }
.ac-chip--fire { border-color: color-mix(in srgb, #ef4444 50%, transparent); color: #ef4444; }
.ac-chip--lvl { border-color: color-mix(in srgb, var(--algo-accent) 55%, transparent); color: var(--algo-accent); }
.ac-bar { height: 8px; border-radius: 6px; background: var(--algo-border); overflow: hidden; }
.ac-bar > i { display: block; height: 100%; width: 0; border-radius: 6px; transition: width .5s cubic-bezier(.2, .8, .2, 1);
  background: linear-gradient(90deg, var(--algo-accent), #22d3ee, var(--algo-accent)); background-size: 200% 100%; animation: acShine 3s linear infinite; }
.ac-linkbtn { background: none; border: 0; color: var(--algo-accent); cursor: pointer; font: inherit; font-size: .82rem; text-decoration: underline; padding: 0; }

/* étapes */
.ac-story .ac-step { display: none; }
.ac-story .ac-step.is-on { display: block; }
.ac-story .ac-step.is-on > * { animation: acUp .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 90ms); }
.ac-story .ac-step h2:first-child { margin-top: 6px; }
.ac-steps-nav { display: flex; gap: 12px; justify-content: space-between; align-items: center; margin: 22px 0 4px; }
.ac-steps-nav .algo-btn { min-width: 140px; justify-content: center; }
.ac-steps-nav .is-pulse { animation: acPulse 1.8s infinite; }
.ac-dots { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.ac-dots b { width: 9px; height: 9px; border-radius: 50%; background: var(--algo-border); transition: all .3s; }
.ac-dots b.is-done { background: color-mix(in srgb, var(--algo-accent) 55%, transparent); }
.ac-dots b.is-cur { background: var(--algo-accent); transform: scale(1.45); }
[dir="rtl"] .ac-arrow { display: inline-block; transform: scaleX(-1); }

/* XP flottant */
.ac-toast { position: fixed; inset-inline-end: 18px; bottom: 90px; z-index: 50; padding: 8px 14px; border-radius: 999px; font-weight: 800;
  background: #f59e0b; color: #1a1202; box-shadow: 0 8px 24px rgba(245, 158, 11, .4); animation: acToast 1.8s ease both; pointer-events: none; }
.ac-confetti { position: fixed; inset: 0; z-index: 60; pointer-events: none; }

/* images et schémas qui bougent */
.ac-hero { animation: acKen 16s ease-in-out infinite alternate; transform-origin: 50% 50%; }
.ac-heroframe { overflow: hidden; border-radius: 16px; }
.ac-heroframe .ac-hero { border-radius: 0; }
.ac-svg.is-in svg * { animation: acPop .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--k, 0) * 28ms); transform-box: fill-box; transform-origin: center; }
.ac-fig img { transition: transform .4s ease; }
.ac-fig img:hover { transform: scale(1.015); }

/* test : une question à la fois */
.ac-quiz.is-stepper .ac-q { display: none; }
.ac-quiz.is-stepper .ac-q.is-cur { display: block; animation: acUp .45s cubic-bezier(.2, .8, .2, 1) both; }
.ac-quiz.is-stepper.is-reveal .ac-q { display: block; animation: none; }
.ac-quiz.is-stepper:not(.is-reveal) #ac-quiz-go { display: none; }
.ac-quiz.is-stepper.is-last-ready:not(.is-reveal) #ac-quiz-go { display: inline-flex; animation: acPop .4s both; }
.ac-qprog { display: flex; align-items: center; gap: 10px; font-size: .85rem; color: var(--algo-muted); margin: 0 0 10px; }
.ac-qprog .ac-bar { flex: 1; }

/* accueil : cartes qui apparaissent une à une */
.ac-card { animation: acUp .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--n, 0) * 70ms); }
.ac-game-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

@media (max-width: 600px) {
  .ac-story-top { top: 56px; padding: 8px 10px; }
  .ac-steps-nav { position: sticky; bottom: 10px; z-index: 4; padding: 8px; border-radius: 14px; background: color-mix(in srgb, var(--algo-bg, #0b0d12) 90%, transparent); border: 1px solid var(--algo-border); backdrop-filter: blur(8px); }
  .ac-steps-nav .algo-btn { min-width: 0; flex: 1; padding-inline: 10px; }
  .ac-dots { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ac-story .ac-step.is-on > *, .ac-hero, .ac-card, .ac-svg.is-in svg *, .ac-quiz.is-stepper .ac-q.is-cur, .ac-bar > i, .ac-steps-nav .is-pulse { animation: none !important; }
  .ac-toast { animation: none; }
}