``` `RevealRoot` fait `document.querySelectorAll("[data-reveal]")`, les observe avec **un** `IntersectionObserver` partagé, et ajoute `.reveal-in` puis `unobserve`. Bilan : 25 composants → 1, 25 observers → 1, 0 `useState`. Le failsafe devient un simple garde `if (!("IntersectionObserver" in window))`. ### Cible B — reveal CSS pur, 0 JS (recommandée) `animation-timeline: view()` en **enrichissement progressif**, contenu visible par défaut : ```css @keyframes reveal-in { from { opacity: 0; transform: translateY(24px) } to { opacity: 1; transform: none } } /* .reveal n'est PAS masqué par défaut : pas de failsafe nécessaire, pas de FOUC, pas de contenu piégé */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .reveal { animation: reveal-in linear both; animation-timeline: view(); animation-range: entry 10% cover 32% } /* stagger : avec une timeline de scroll, `animation-delay` s'exprime en unités de progression, PAS en ms — le décalage se fait donc sur animation-range */ .reveal-grid > :nth-child(2) { animation-range: entry 16% cover 38% } .reveal-grid > :nth-child(3) { animation-range: entry 22% cover 44% } .reveal-grid > :nth-child(4) { animation-range: entry 28% cover 50% } } } ``` Deux précisions qui comptent : - **`@starting-style` n'est pas le bon outil ici.** Il ne se déclenche qu'au premier rendu / à l'apparition d'un élément, pas en fonction de la position de scroll. Il pourrait animer le hero at-fold, pas les sections basses. - **Support de `animation-timeline: view()`** : Chrome/Edge 115+, Safari 26+, **Firefox non livré par défaut**. D'où le `@supports` avec état par défaut *visible* : les utilisateurs Firefox n'ont simplement pas d'animation — ce qui est **déjà le comportement réel aujourd'hui** à cause du failsafe de 2,5 s. On ne perd donc rien et on supprime 25 composants client. Le composant `Reveal.tsx` disparaît, `globals.css` porte tout, et le bloc `@media (prefers-reduced-motion: reduce)` existant (déjà présent, correct) n'a même plus besoin d'inverser quoi que ce soit. --- ## 4. Inventaire images / alt du périmètre | Composant:ligne | Fichier | Dimensions | Poids | Chargement | `sizes` | Rôle | alt EN (clé) | alt FR | Verdict | |---|---|---|---|---|---|---|---|---|---| | `MaterialsSection.tsx:15-22` | `public/production/metal-xray-clean.webp` | 800 × 618 | 30 308 o | `fill`, lazy (pas de `priority`) ✅ — 6ᵉ section, correct | `100vw` (srcSet plafonné à `800w` par l'import statique → 0 octet gaspillé, mais upscale ~1,8× à 1440 px) | **Décorative** (masquée par un overlay 0,72–0,82) | `IndexPage.materials.imageAlt` : « Raw gold and precious metals prepared for jewelry production » | « Or brut et métaux précieux préparés pour la fabrication de bijoux » | ❌ **alt factuellement faux** (l'image montre un spectromètre XRF en labo QC, échantillon « AgCuZn925 », zéro or brut) **+ rôle décoratif non déclaré** → `alt="" aria-hidden="true"` et suppression de la clé | `ValuePropSection.tsx` et `Overline.tsx` ne contiennent aucune image. Les deux marqueurs décoratifs non textuels du périmètre (`MaterialsSection.tsx:43` filet or, `Overline.tsx:40/44` filets) sont correctement `aria-hidden="true"` ✅. --- ## 5. Top 5 des actions 1. **Corriger le failsafe de `Reveal.tsx:39`** (2 lignes) — c'est le seul constat *bloquant* : aujourd'hui l'animation de scroll ne se déclenche sur aucune des sections basses de la Home, et on paie 25 observers pour rien. Enchaîner ensuite sur la cible B (§3) pour supprimer 25 composants client d'un coup. 2. **Assombrir `--color-gold` en `#8a6f34`** (1 ligne dans `globals.css`) — fait passer `` de 3,26:1 à 4,52:1 et met **~20 sections du site** en conformité WCAG 2.2 AA 1.4.3. Traiter dans la foulée le numéral `text-burnished-gold` de `ValuePropSection.tsx:30` (2,33:1, le pire ratio du périmètre) et lui ajouter `aria-hidden="true"`. 3. **Réparer `IndexPage.materials.imageAlt`** — un alt qui décrit une image inexistante est le pire cas possible pour un lecteur d'écran. Passer en `alt="" aria-hidden="true"` (aligné sur `StatsSection.tsx:25`) et supprimer la clé EN/FR. Retirer aussi `placeholder="blur"`, invisible sous l'overlay. 4. **Remplacer les deux `auto-fit minmax` par `grid-cols-1 sm:grid-cols-2 lg:grid-cols-4`** et **supprimer l'ombre + le `-translate-y-1`** de `ValuePropSection.tsx:29`. Ça règle d'un coup la carte orpheline entre 1024 et 1160 px et la seule violation frontale de `docs/brand.md` du périmètre. 5. **Poser les tokens `@theme` manquants et extraire `FeatureCard`** — c'est le chantier de fond : `py-[76px]` × 28, `max-w-[1440px]` × 35, `text-[11px]` × 36, deux échelles h2 concurrentes, quatre tokens `--spacing-*` morts. Extraire `FeatureCard`/`FeatureGrid` (composant serveur, pas `Card` shadcn qui apporte `rounded-xl` + `shadow-sm`, tous deux contraires à la charte) supprime la duplication et donne un seul endroit où appliquer les corrections 2 à 4. Passer `knip` dans le même mouvement pour évacuer `src/components/ui/And.tsx`, importé nulle part.