# Mission: Premium Redesign + Trilingual Translation

## Fichier cible
/root/dl/assembleias/presentation.html

## Ce que le fichier contient DÉJÀ
Le fichier a 89 éléments avec des attributs data-fr/data-pt/data-en. Le JavaScript setLang() fonctionne et traduit le contenu en cliquant sur FR/PT/EN. NE PAS casser ce système. L'ameliorer si besoin.

## Objectif
Transformer cette présentation en une page web PREMIUM au design exceptionnel. Le but : quand quelqu'un ouvre cette page, il dit "wow, c'est pro".

## 1. Effets de mouvement (Scroll)
- **Scroll reveal** : les sections apparaissent avec un fondu + slide-up au défilement (IntersectionObserver, threshold 0.15)
- **Parallax subtil** : le SVG hero bouge légèrement plus lentement que le scroll
- **Counter animation** : les chiffres (308, 36000, 100K, 4, 12) s'incrémentent de 0 à la valeur finale quand ils deviennent visibles
- **Staggered entrance** : les cartes features apparaissent une par une avec un délai de 100ms entre chacune

## 2. Réactions souris (Hover)
- **Feature cards** : scale(1.03) + box-shadow violette + bordure gradient animée au survol
- **Nav links** : underline animée qui s'étend depuis la gauche
- **CTA buttons** : glow pulse + légère élévation au hover
- **SVG Assembly** : au survol du bloc, les tablettes dans le SVG changent de couleur (vert actif)
- **Tablet illustration** : effet de brillance (light sweep) qui traverse l'écran au survol
- **Timeline phases** : chaque phase s'éclaire et se translate de 4px vers la droite au survol
- **Comparison table rows** : highlight violet subtil + scale(1.01)

## 3. Animations continues
- **Hero badge** : float up/down en boucle (3s, ease-in-out infinite)
- **Gradient animé** : background du hero a un conic-gradient qui tourne doucement (20s)
- **Timeline pulse** : la ligne verticale a un point lumineux qui descend en boucle
- **Floating particles** : 15-20 petits cercles violets semi-transparents qui flottent dans le hero (CSS-only, pas JS)

## 4. Transitions fluides
- **Language switch** : crossfade 0.3s sur tous les textes (pas de swap brutal)
- **Page load** : fade-in progressif du contenu (opacity 0→1, 0.5s)
- **Section transitions** : alternating subtle background shades pour créer du contraste au scroll

## 5. Polish visuel
- **Glass morphism** : backdrop-filter: blur(12px) + background semi-transparent sur les cartes hero et tablet
- **Gradient borders** : border avec conic-gradient animé sur la carte tablet biométrique
- **Custom scrollbar** : barre de défilement fine, violette, arrondie
- **Smooth scroll** : scroll-behavior: smooth + scroll-padding-top pour la nav
- **Typography** : gradients sur les titres principaux (text-linear-gradient violet→bleu)
- **Badge glow** : le hero badge a un léger glow pulsant

## 6. Responsive
- Mobile-first, testé à 375px et 768px
- Les animations sont réduites sur mobile (prefers-reduced-motion)
- Les grilles passent de 3 colonnes à 1 sur mobile

## Contraintes OBLIGATOIRES
1. Garder TOUS les contenus (89 éléments data-fr/data-pt/data-en)
2. Garder le SVG assembly et l'illustration tablette
3. Garder le dark theme et les fonts Sora + Inter
4. Tout dans UN fichier HTML (CSS + JS inline, zéro CDN)
5. Pas de bibliothèques externes
6. Performance : requestAnimationFrame, pas de layout thrashing
7. Le setLang() JS doit toujours fonctionner après les modifications

## Stack technique
- CSS : @keyframes, transitions, transform, backdrop-filter, conic-gradient, clip-path
- JS vanilla : IntersectionObserver, requestAnimationFrame, CSS custom properties