# Ombrora -- Refonte UI minimaliste
**Date :** 2026-08-10
**Statut :** Approuve
## Contexte
L'application est fonctionnelle mais entierement non stylee (inline styles uniquement). Objectifs : interface minimaliste, SEO-optimisee, light/dark mode, language switcher avec drapeaux images.
## Stack technique ajoutee
| Package | Role | Compatibilite o2switch |
|---|---|---|
| `tailwindcss` + `@tailwindcss/postcss` | Styles utility-first, compile en CSS statique | OK (build-time) |
| `next-themes` | Dark/light mode via class sur `` | OK (pure JS) |
| Flag SVGs locaux dans `/public/flags/` | Drapeaux langue | OK (assets statiques) |
Aucun package avec bindings natifs.
## Fichiers touches
### Nouveaux
- `tailwind.config.ts`
- `src/app/globals.css`
- `src/components/Header.tsx`
- `src/components/ThemeToggle.tsx`
- `src/components/ReassuranceSection.tsx`
- `public/flags/en.svg`
- `public/flags/fr.svg`
- `public/flags/es.svg`
- `public/flags/it.svg`
### Modifies
- `src/app/[locale]/layout.tsx` -- ThemeProvider, Inter font, JSON-LD, metadata complete
- `src/app/[locale]/page.tsx` -- hero + form + reassurance
- `src/app/[locale]/status/[uuid]/page.tsx` -- layout status restylee
- `src/components/SubmitForm.tsx` -- Tailwind, UI refaite
- `src/components/StatusView.tsx` -- Tailwind, UI refaite
- `src/components/LanguageSwitcher.tsx` -- `![]()
` drapeaux SVG
- `messages/en.json`, `fr.json`, `es.json`, `it.json` -- cles SEO + reassurance
## Design
### Palette
```
Light : bg-white / text-gray-900 / accent violet-600
Dark : bg-slate-950 / text-gray-50 / accent violet-400
Input : border-gray-200 / dark:border-slate-700
Card : bg-gray-50 / dark:bg-slate-900
```
Tailwind strategy : `darkMode: 'class'` dans `tailwind.config.ts`.
### Typographie
`next/font/google` avec **Inter** (subsets `latin`, `latin-ext`). Latin-ext couvre les accents FR/ES/IT. Preload automatique par Next.js, zero CDN runtime.
### Layout -- Page home
```
Logo | ThemeToggle | LanguageSwitcher
Telechargez vos videos gratuitement
Sous-titre
```
### Layout -- Page status
```
```
### Composant SubmitForm
- Input URL : pleine largeur, `rounded-xl`, bouton violet inline a droite (`rounded-r-xl`)
- Glow : `div` absolue violet `blur-3xl opacity-15` positionnee derriere l'input, visible en both modes
- Options : ligne flex sous l'input -- Format (select), Qualite (select), Sous-titres (checkbox styled), Options avancees (collapse/details)
- Bouton submit : `bg-violet-600 hover:bg-violet-700 dark:bg-violet-500` + spinner animate-spin quand loading
- Erreur : texte rouge sous les options
### Composant StatusView
- Card `max-w-md mx-auto rounded-2xl border bg-gray-50 dark:bg-slate-900 p-6`
- PENDING/PROCESSING : spinner `animate-spin` violet + texte statut
- DONE : bouton telechargement violet, nom fichier, taille, expiration en `text-sm text-gray-500`
- FAILED : bloc `bg-red-50 dark:bg-red-950 border-red-200` avec `` pour le message d'erreur
- FILE_DELETED : message informatif gris
### Composant Header
- ``
- Logo : "Ombrora" texte, "O" en `text-violet-600`
- Droite : ThemeToggle + LanguageSwitcher
- Padding `px-6 py-3`, flex justify-between
### Composant ThemeToggle
- Bouton icon-only, SVG lune (dark) ou soleil (light) inline
- Pas de librairie d'icones -- SVG paths hardcodes (moon : `M 12 3 a 6 6 0 0 0 9 9 ...`, sun : rayons simples)
- `aria-label="Basculer le theme"`
### Composant LanguageSwitcher
- Flex row, gap-2
- Chaque locale : `