/* lecteur-animations.css : habillage des animations pédagogiques du lecteur (lot 7, 07/09/2026).
   Jetons du hub seulement (--surface, --surface2, --border, --gold, --gold-deep, --text,
   --muted, --bg, --glow) : les trois thèmes suivent. Tout est préfixé .anim pour ne toucher
   aucun autre onglet. Mes paragraphes sont ciblés par .anim .anim-x (0,2,0) : la règle du hub
   .lecteur-article p{margin:0 0 14px} (0,1,1) ne les écrase pas. Chargée par index.html (lot 8 : <link rel="stylesheet" href="/lecteur-animations.css">). */
.anim{margin:22px 0 28px;padding:14px 14px 12px;border:1px solid var(--border);border-radius:14px;background:var(--surface);position:relative}
.anim:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.anim-scene{position:relative}
.anim-scene svg,.anim > svg{display:block;width:100%;height:auto}
/* Deux images de repos par animation (corrections tour 1, RA-02 / R4) : le constructeur embarque la variante
   large (anim--large, gabarit 800) et la variante étroite (anim--etroit, gabarit 420) ; une seule s'affiche,
   selon la largeur de la fenêtre, tant que le moteur n'a pas redessiné la scène. */
.anim > svg.anim--etroit{display:none}
@media (max-width:640px){.anim > svg.anim--large{display:none}.anim > svg.anim--etroit{display:block}}
.anim .anim-legende{margin:12px 0 0;font-size:.94rem;line-height:1.55;color:var(--text);min-height:2.6em}
.anim-compteur{display:inline-block;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-right:8px;white-space:nowrap}
.anim-commandes{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.anim-btn{min-height:44px;min-width:44px;padding:0 14px;border-radius:999px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font:inherit;font-weight:700;font-size:.86rem;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;-webkit-user-select:none;user-select:none}
.anim-btn:hover{border-color:var(--gold-deep);background:var(--glow)}
.anim-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.anim-btn[disabled]{opacity:.42;cursor:default;border-color:var(--border);background:var(--surface2)}
.anim-btn svg{width:16px;height:16px;fill:currentColor;flex:none}
.anim-btn--lecture{background:var(--gold);border-color:var(--gold);color:var(--bg)}
.anim-btn--lecture:hover{background:var(--gold);border-color:var(--gold-deep)}
.anim-btn--lecture[hidden]{display:none}
.anim .anim-note{margin:10px 0 0;font-size:.82rem;color:var(--muted);line-height:1.5}
.anim .anim-note[hidden]{display:none}
.anim .anim-aide{margin:6px 0 0;font-size:.74rem;color:var(--muted);line-height:1.5}
.anim > figcaption{font-size:.8rem;color:var(--muted);line-height:1.5;margin-top:10px}
/* Révélation des bougies et des éléments (classes posées par lecteur-animations.js) */
.anim-scene .anim-bougie{transition:opacity .18s ease,transform .18s ease;transform-box:fill-box;transform-origin:center}
.anim-scene .anim-el{transition:opacity .35s ease}
.anim-scene .anim-cache{opacity:0;pointer-events:none}
.anim-scene .anim-bougie.anim-cache{transform:scaleY(.35)}
@media (prefers-reduced-motion:reduce){
  .anim-scene .anim-bougie,.anim-scene .anim-el{transition:none}
  .anim-scene .anim-bougie.anim-cache{transform:none}
}
/* Téléphone : commandes sur une ligne, icônes seules (le libellé reste dans aria-label et title) */
@media (max-width:480px){
  .anim{padding:10px 8px 10px}
  .anim-btn{padding:0 12px}
  .anim-btn .anim-btn__txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .anim-btn--lecture{padding:0 18px}
  .anim .anim-aide{display:none}
}
@media print{.anim-commandes,.anim-aide{display:none}}