/* Geometry and controls are shared; each symbol keeps its own motion profile. */
.ef-motion { display: inline-grid; width: 100%; max-width: 100%; color: inherit; vertical-align: middle; }
.ef-motion__svg { display: block; width: 100%; height: auto; aspect-ratio: 1; overflow: visible; }
.ef-motion__controls { display: flex; justify-content: center; min-height: 2.75rem; align-items: center; }
.ef-motion__controls button { font: inherit; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; text-decoration: underline; text-underline-offset: .25em; min-height: 44px; padding: .5rem 1rem; }
.ef-motion__controls button[hidden] { display: none; }
.ef-motion [data-ef-rotor], .ef-motion [data-ef-sway], .ef-motion [data-ef-bloom], .ef-motion [data-ef-rise], .ef-motion [data-ef-cue] { transform-box: view-box; }
.ef-motion.symbole__img { width: min(100%, 360px); }
.ef-motion.symbole-bande__img { width: min(100%, 320px); }
.ef-motion.symbole__img, .ef-motion.symbole-bande__img { aspect-ratio: auto; }
.symbole-carte__visuel .ef-motion { width: 100%; height: 100%; }
.symbole-carte__visuel .ef-motion__svg { width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) {
  .ef-motion__controls button { display: none; }
}