# Mission: Premium Design Overhaul — Assembleias Online Presentation

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

## Contexte
C'est une présentation HTML d'un projet de plateforme d'assemblées municipales digitales. Le fichier fait ~600 lignes, tout inline (CSS+JS), dark theme, multilingue (FR/PT/EN via data-fr/data-pt/data-en + fonction setLang()).

## Objectif
Transformer cette page en une expérience visuelle PREMIUM. Le client qui ouvre cette page doit être impressionné. Design Apple-like, épuré, animations fluides, effets de survol réactifs.

## Améliorations demandées

### 1. Scroll Animations (IntersectionObserver)
- Toutes les sections fade-in + slide-up au scroll (threshold 0.15)
- Les 16 feature cards : staggered entrance (100ms delay entre chaque)
- Les chiffres dans les stats s'incrémentent de 0 à la valeur (counter animation)
- Les timeline items apparaissent un par un

### 2. Hover Effects
- Feature cards : scale(1.03) + box-shadow violette + border-color accent au survol
- Nav links : underline animée qui s'étend depuis la gauche (width 0→100%)
- CTA buttons : glow pulse + translateY(-2px)
- SVG assembly : au survol du bloc parent, les tablettes dans le SVG changent de couleur (opacity ou fill)
- Tablet card : light sweep effect (une ligne de brillance qui traverse l'écran au survol)
- Timeline items : translateX(6px) + border glow
- Comparison table rows : background subtle highlight au hover

### 3. Animations continues
- Hero badge : float up/down en boucle (translateY oscillant, 3-4s infinite)
- Hero background : gradient rotation lente (conic-gradient ou radial animated)
- Timeline vertical line : un point lumineux qui descend en boucle (like a pulse traveling down)
- Particles : 15-20 petits cercles violets semi-transparents qui flottent dans le hero (CSS-only, position:absolute, animation translateY de bottom à top)

### 4. Transitions
- Language switch : crossfade 0.3s (opacity transition sur les éléments traduits)
- Nav : backdrop-filter:blur(16px) + background semi-transparent au scroll
- Page load : body opacity 0→1 avec animation

### 5. Polish
- Glass morphism sur certaines cartes (backdrop-filter:blur + background rgba)
- Gradient borders animés sur la tablet card (conic-gradient avec @property --angle)
- Custom scrollbar fine et violette
- Scroll-padding-top pour la nav fixe
- Typography : gradient text sur les titres principaux (background-clip:text)
- prefers-reduced-motion : désactiver toutes les animations

### 6. Responsive
- Mobile : grilles passent à 1 colonne sous 600px, 2 colonnes sous 900px
- Nav links cachées sur mobile (sauf dernier)
- Hero h1 plus petit sur mobile

## Contraintes
- Garder TOUS les contenus existants (setLang, data-fr/data-pt/data-en, SVG, etc.)
- Tout dans 1 fichier HTML (CSS+JS inline)
- Zero CDN, zero dépendances externes
- Garder le dark theme, Sora+Inter fonts
- Performance : requestAnimationFrame pour compteurs, IntersectionObserver pour scroll
- Le JS setLang() doit continuer de fonctionner

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