/* EM · Animation des pages de cours (prototype 18/08/2026)
   Inspiration : le vocabulaire du motion design (apparitions, construction séquentielle,
   compteurs) appliqué au support de cours lui-même, dans la charte ExpertMalin.
   Les classes em-* sont posées à la volée par em-anim.js : le contenu en base n'est PAS modifié.
   Charte : orange #E4610F · encre #16223E · texte #2A3550. */

/* ---------- barre de progression de lecture ---------- */
.em-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, #E4610F 0%, #F59331 100%);
  box-shadow: 0 0 12px rgba(228, 97, 15, .55);
  z-index: 9999; transition: width .12s linear; pointer-events: none;
}

/* ---------- réparation de mise en page ----------
   Le nettoyeur HTML de Moodle supprime display:flex, flex-wrap, gap et flex: des styles
   inline écrits par la Forge : les rangées de schéma et de chiffres clés s'empilent sur
   toute la largeur au lieu de se placer côte à côte. On les restaure ici. */
body.em-anim .em-flexrow { display: flex !important; flex-wrap: wrap; gap: 10px; align-items: stretch; }
body.em-anim .em-flexrow .em-step { flex: 1 1 160px; min-width: 150px; }
body.em-anim .em-flexrow .em-stat { flex: 1 1 140px; display: flex; flex-direction: column; justify-content: center; }

/* ---------- illustrations : hauteur plafonnée ----------
   Moodle supprime la balise <figure> ET le width:100%/display:block de l'image : celle-ci
   s'affichait donc à sa taille naturelle, occupant presque tout l'écran. */
/* Le cadre porte la hauteur FIXE (la place est réservée avant le chargement de l'image,
   sinon elle naît à 0 px et n'est jamais détectée) et le rognage. C'est LUI qu'observe le
   script : un élément masqué par clip-path est invisible pour l'observateur d'intersection. */
body.em-anim .em-illu-box {
  display: block; width: 100%; height: 300px;
  border-radius: 12px; overflow: hidden; margin: 0 0 1.5em; background: #F2F5FA;
}
@media (min-width: 1200px) { body.em-anim .em-illu-box { height: 340px; } }
@media (max-width: 640px) { body.em-anim .em-illu-box { height: 200px; } }
body.em-anim .em-illu-box .em-illu {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center 38%;
  border-radius: 0; margin: 0;
}

/* ---------- socle : tout élément animé part masqué ---------- */
body.em-anim .em-a {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .62s cubic-bezier(.22, .8, .26, 1), transform .62s cubic-bezier(.22, .8, .26, 1);
  will-change: opacity, transform;
}
body.em-anim .em-a.em-in { opacity: 1; transform: none; }

/* ---------- surtitre : la lettre se resserre en entrant ---------- */
body.em-anim .em-kicker { letter-spacing: .34em !important; transition: opacity .6s ease, transform .6s ease, letter-spacing .9s cubic-bezier(.22, .8, .26, 1); }
body.em-anim .em-kicker.em-in { letter-spacing: .14em !important; }

/* ---------- titres : montée + trait orange qui se trace ---------- */
body.em-anim .em-h2 { position: relative; }
body.em-anim .em-h2::after {
  content: ""; position: absolute; left: 0; bottom: -.28em;
  height: 3px; width: 0; border-radius: 2px;
  background: linear-gradient(90deg, #E4610F, #F59331);
  transition: width .85s cubic-bezier(.22, .8, .26, 1) .18s;
}
body.em-anim .em-h2.em-in::after { width: 68px; }
body.em-anim .em-h3 { transform: translateY(14px); }

/* ---------- illustrations : dévoilement en fondu et léger dézoom ---------- */
body.em-anim .em-illu-box .em-illu {
  opacity: 0; transform: scale(1.09);
  transition: opacity .85s ease, transform 1.35s cubic-bezier(.22, .8, .26, 1);
}
body.em-anim .em-illu-box.em-in .em-illu { opacity: 1; transform: scale(1); }

/* ---------- schéma d'étapes : construction séquentielle ---------- */
body.em-anim .em-step {
  opacity: 0; transform: translateY(22px) scale(.96);
  transition: opacity .5s cubic-bezier(.22, .8, .26, 1), transform .5s cubic-bezier(.34, 1.3, .5, 1), box-shadow .25s ease;
}
body.em-anim .em-step.em-in { opacity: 1; transform: none; }
body.em-anim .em-step:hover { box-shadow: 0 10px 26px rgba(16, 34, 62, .12); }

/* ---------- chiffres clés : la tuile surgit, le nombre s'incrémente ---------- */
body.em-anim .em-stat {
  opacity: 0; transform: translateY(18px) scale(.94);
  transition: opacity .5s ease, transform .55s cubic-bezier(.34, 1.3, .5, 1), box-shadow .3s ease;
}
body.em-anim .em-stat.em-in { opacity: 1; transform: none; }
body.em-anim .em-stat.em-in { box-shadow: 0 12px 30px rgba(16, 34, 62, .22); }
body.em-anim .em-stat b { font-size: 1.55em; letter-spacing: -.02em; display: inline-block; }

/* ---------- encadrés : glissée latérale + liseré qui se déploie ---------- */
body.em-anim .em-box { transform: translateX(-16px); }
body.em-anim .em-box.em-in { transform: none; }
body.em-anim .em-box-key.em-in { box-shadow: 0 8px 24px rgba(42, 92, 170, .12); }
body.em-anim .em-box-warn.em-in { box-shadow: 0 8px 24px rgba(234, 106, 34, .14); }
body.em-anim .em-box-good.em-in { box-shadow: 0 8px 24px rgba(46, 125, 50, .12); }
body.em-anim .em-box, body.em-anim .em-step, body.em-anim .em-stat { transition-property: opacity, transform, box-shadow; }

/* ---------- citation ---------- */
body.em-anim .em-quote { transform: translateY(14px) scale(.985); }
body.em-anim .em-quote.em-in { transform: none; }

/* ---------- tableaux : les lignes se posent l'une après l'autre ---------- */
body.em-anim .em-row { opacity: 0; transform: translateY(10px); transition: opacity .42s ease, transform .42s ease; }
body.em-anim .em-row.em-in { opacity: 1; transform: none; }

/* ---------- accessibilité : mouvement coupé si l'utilisateur le demande ---------- */
@media (prefers-reduced-motion: reduce) {
  body.em-anim .em-a,
  body.em-anim .em-step,
  body.em-anim .em-stat,
  body.em-anim .em-row,
  body.em-anim .em-illu-box .em-illu {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
    transition: none !important;
  }
  body.em-anim .em-h2::after { transition: none; width: 68px; }
  .em-progress { transition: none; }
}