animation rendu plus responsif pour s'assurer qu'une image ne soit jamais trop grand par rapport à .gallery-animation

test_anim__archive1/CLAUDE.md

@@ -0,0 +1,53 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+This is a **prototype for an animated image gallery component** intended for integration into a Kirby CMS project. The animation displays images in a continuous scrolling pattern across multiple columns/rows.
+
+## Running the Project
+
+This is a PHP project with no build system. To run locally:
+```bash
+php -S localhost:8000
+```
+Then open `http://localhost:8000` in a browser.
+
+## Architecture
+
+### Configuration (index.php:1-28)
+
+The animation is configured via PHP variables at the top of `index.php`:
+- `$mode`: `'vertical'` or `'horizontal'` - scroll direction
+- `$set`: Image set name (e.g., `'LEGACY'`, `'OLLY'`)
+- `$secondsPerImage`: Controls animation speed
+- `$imagesSets`: Associative array defining image paths per set
+
+### Animation System
+
+**CSS-based infinite scroll** using duplicated images:
+- Images are rendered twice in each track (`index.php:63-68`) to create seamless looping
+- Animation translates from 0 to -50% (or vice versa), jumping back invisibly when the duplicate starts
+- Odd columns scroll down/right; even columns scroll up/left
+- Column offsets and delays are calculated based on image count to stagger the animation
+
+**Key CSS classes** (BEM notation):
+- `.gallery-animation--vertical` / `.gallery-animation--horizontal`: Mode modifiers
+- `.gallery-animation__wrapper`: Flex container for columns
+- `.gallery-animation__column`: Individual scrolling lane
+- `.gallery-animation__track`: Animated element containing images
+- `.gallery-animation__image`: Individual image styling
+
+**CSS custom properties**:
+- `--animation-duration`: Total cycle duration (set via PHP)
+- `--gap`: Spacing between columns/rows
+- `--vertical-wrapper-width`: Container width in vertical mode
+
+### Accessibility
+
+Respects `prefers-reduced-motion` by disabling animations (`style.css:149-153`).
+
+## Language
+
+Code comments and documentation are in French.