# Mission: Redesign Assembleias Online Presentation

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

## Objectif
Transformer cette présentation en une page web PREMIUM au design exceptionnel avec des effets de mouvement, animations au scroll, réactions au survol de la souris, et une expérience visuelle au top du top.

## Ce qui doit être amélioré

### 1. Effets de mouvement
- **Scroll animations** : les sections apparaissent avec un fondu + slide-up au défilement (IntersectionObserver)
- **Parallax subtil** : le hero SVG bouge légèrement au scroll
- **Counter animation** : les chiffres (308, 36000, 100K, 4, 12) s'incrémentent dynamiquement quand visibles
- **Staggered entrance** : les cartes features apparaissent une par une avec un délai

### 2. Réactions souris (hover)
- **Cards** : scale(1.02) + ombre portée + bordure qui s'allume au survol
- **Navigation** : underline animée au survol des liens
- **Boutons** : effet glow + pulse subtil au hover
- **SVG Assembly** : les tablettes dans le SVG s'allument (changent de couleur) au survol du bloc
- **Tablet illustration** : effet de brillance qui traverse l'écran au survol
- **Timeline** : chaque phase s'éclaire et se décale légèrement au survol

### 3. Animations continues
- **Hero badge** : léger float up/down en boucle
- **Gradient animé** : le background du hero a un gradient qui tourne doucement
- ** particles** : quelques particules violettes subtiles qui flottent dans le hero
- **Timeline** : line pulse subtil qui parcourt la ligne verticale

### 4. Transitions fluides
- **Page load** : fade-in progressif de tout le contenu
- **Language switch** : transition fluide (pas un swap brutal) — crossfade 0.3s
- **Section transitions** : chaque section a un background légèrement différent qui crée un contraste au scroll

### 5. Polish visuel
- **Glass morphism** : certaines cartes ont un effet verre dépoli (backdrop-blur)
- **Gradient borders** : bordures avec gradient animé sur les cartes importantes
- **Micro-interactions** : petit bounce sur les icônes, subtle rotation sur les badges
- **Custom scrollbar** : barre de défilement stylisée violette
- **Smooth scroll** : navigation ancre avec scroll-behavior: smooth

## Contraintes OBLIGATOIRES
1. Garder TOUS les contenus existants (FR/PT/EN, toutes les sections, le tableau comparatif, la roadmap)
2. Garder le système de traduction data-fr/data-pt/data-en qui fonctionne
3. Garder le SVG de l'assemblée et l'illustration tablette biométrique
4. Garder le dark theme
5. Garder les fonts Sora + Inter
6. Tout dans UN fichier HTML autonome (CSS + JS inline)
7. Pas de dépendances externes (pas de CDN) — tout inline
8. Responsive (mobile-friendly)
9. Performance : utiliser requestAnimationFrame pour les animations, pas de layout thrashing

## Stack technique
- CSS : animations @keyframes, transitions, transform, backdrop-filter, clip-path
- JS vanilla : IntersectionObserver, requestAnimationFrame, CSS custom properties
- Pas de bibliothèques externes

## Résultat attendu
Un fichier HTML qui impressionne visuellement. Quand quelqu'un ouvre cette page, il doit se dire "wow, c'est pro". Les animations doivent être fluides (60fps), pas agressives, et servir l'expérience utilisateur (guider l'œil, pas distraire).