feat: add CSS float and alignment support for images and figures (#1174)

Resolves: #1172

## Summary

- Add missing `float: left`/`float: right` CSS properties to
`img.float-left`/`img.float-right` rules (Bootstrap 5 removed these)
- Add figure float rules (`figure.float-left`, `figure.float-right`)
with `max-width: 50%` and responsive breakpoint (<576px disables float)
- Add `img.align-center` / `figure.align-center` CSS for centered
alignment
- Replace deprecated HTML `align` attribute in `image.html.twig` with
CSS class mapping (`:align: left` → `float-left`, `:align: right` →
`float-right`, `:align: center` → `align-center`)
- Add `:align:` CSS class support in `figure.html.twig`
- Preserve `:align:` option on FigureNode (was being stripped) so `..
figure:: :align: left` works
- Strip `float-left`/`float-right` from inner `<img>` inside `<figure>`
to prevent caption wrapping issues
- Add `.clear-both` CSS utility alias (alongside existing `.cc`)
- Split `ImagesAndFigures` rendertest into separate pages: Index
(styling), Zoom, FloatAndAlignment

## Files changed

| File | Change |
|------|--------|
| `assets/sass/components/_rst.scss` | Add `float` property +
`align-center` to img rules |
| `assets/sass/components/_images.scss` | Add figure float/align rules +
responsive |
| `assets/sass/_utilities.scss` | Add `.clear-both` alias |
| `resources/template/body/image.html.twig` | Replace HTML `align` attr
with CSS classes |
| `resources/template/body/figure.html.twig` | Add `:align:` CSS class
support |
| `src/Directives/FigureDirective.php` | Keep `:align:` on FigureNode,
strip float from inner img |
| `resources/public/css/theme.css` | Regenerated |
| `Documentation-rendertest/ImagesAndFigures/` | Split into Index + Zoom
+ FloatAndAlignment |

## Test plan

- [x] All 195 PHPUnit tests pass
- [x] PHPStan reports 0 errors
- [x] Rendered docs verified: image/figure float left/right with text
wrapping
- [x] `:align: left`/`:align: right` on figures works correctly
- [x] `.clear-both` clears floats as expected
- [x] Responsive: floats disable on small screens (<576px)
- [x] Visual review of rendered ImagesAndFigures pages

### Related

- Follow-up PR: #1179 (modernize to `float-start`/`float-end`)
- Upstream issue:
[phpDocumentor/guides#1303](phpDocumentor/guides#1303)
— proposes removing `final` from upstream directives to avoid forking

Author: CybotTM

Documentation-rendertest/ImagesAndFigures/FloatAndAlignment.rst

@@ -0,0 +1,147 @@
+.. include:: /Includes.rst.txt
+
+.. _images-float-and-alignment:
+
+===================
+Float and alignment
+===================
+
+.. contents:: This page
+   :backlinks: top
+   :class: compact-list
+   :depth: 99
+   :local:
+
+
+.. _images-float-image-left:
+
+Image float left
+================
+
+.. |example-teaser-left| image:: ../images/q150_cccccc.png
+   :alt: Left floating image
+   :class: float-left with-shadow
+
+|example-teaser-left|
+Typesetting is the composition of text by means of arranging physical
+types[1] or the digital equivalents. Stored letters and other symbols
+(called sorts in mechanical systems and glyphs in digital systems)
+are retrieved and ordered according to a language's orthography for
+visual display.
+
+.. rst-class:: clear-both
+
+Floating cleared. Below the image.
+
+
+.. _images-float-image-right:
+
+Image float right
+=================
+
+.. |example-teaser-right| image:: ../images/q150_cccccc.png
+   :alt: Right floating image
+   :class: float-right with-shadow
+
+|example-teaser-right|
+Typesetting is the composition of text by means of arranging physical
+types[1] or the digital equivalents. Stored letters and other symbols
+(called sorts in mechanical systems and glyphs in digital systems)
+are retrieved and ordered according to a language's orthography for
+visual display.
+
+.. rst-class:: clear-both
+
+Floating cleared. Below the image.
+
+
+.. _images-float-figure-left:
+
+Figure float left
+=================
+
+.. figure:: ../images/q150_cccccc.png
+   :alt: Left floating figure
+   :class: float-left with-shadow
+
+   A figure floated to the left
+
+Typesetting is the composition of text by means of arranging physical
+types[1] or the digital equivalents. Stored letters and other symbols
+(called sorts in mechanical systems and glyphs in digital systems)
+are retrieved and ordered according to a language's orthography for
+visual display. Typesetting requires one or more fonts. The source
+could be a manuscript, a previously composed version, or a plain text.
+
+.. rst-class:: clear-both
+
+Floating cleared. Below the figure.
+
+
+.. _images-float-figure-right:
+
+Figure float right
+==================
+
+.. figure:: ../images/q150_cccccc.png
+   :alt: Right floating figure
+   :class: float-right with-shadow
+
+   A figure floated to the right
+
+Typesetting is the composition of text by means of arranging physical
+types[1] or the digital equivalents. Stored letters and other symbols
+(called sorts in mechanical systems and glyphs in digital systems)
+are retrieved and ordered according to a language's orthography for
+visual display. Typesetting requires one or more fonts. The source
+could be a manuscript, a previously composed version, or a plain text.
+
+.. rst-class:: clear-both
+
+Floating cleared. Below the figure.
+
+
+.. _images-float-align-left:
+
+Figure align left
+=================
+
+.. figure:: ../images/q150_cccccc.png
+   :alt: Left aligned figure
+   :align: left
+
+   A figure aligned left via :align:
+
+Typesetting is the composition of text by means of arranging physical
+types[1] or the digital equivalents. Stored letters and other symbols
+(called sorts in mechanical systems and glyphs in digital systems)
+are retrieved and ordered according to a language's orthography for
+visual display. Typesetting requires one or more fonts. The source
+could be a manuscript, a previously composed version, or a plain text.
+
+.. rst-class:: clear-both
+
+Floating cleared. Below the figure.
+
+
+.. _images-float-align-right:
+
+Figure align right
+==================
+
+.. figure:: ../images/q150_cccccc.png
+   :alt: Right aligned figure
+   :align: right
+
+   A figure aligned right via :align:
+
+Typesetting is the composition of text by means of arranging physical
+types[1] or the digital equivalents. Stored letters and other symbols
+(called sorts in mechanical systems and glyphs in digital systems)
+are retrieved and ordered according to a language's orthography for
+visual display. Typesetting requires one or more fonts. The source
+could be a manuscript, a previously composed version, or a plain text.
+
+.. rst-class:: clear-both
+
+Floating cleared. Below the figure.