Update README.md to enhance project description and component architecture details. Added information on auto-contained UI components, scoped styles, and modular architecture. Improved clarity on usage and development guidelines for new components.

README.md

@@ -1,14 +1,16 @@
 # 🎬 Nixi - Plateforme de Streaming
 
-Une plateforme de streaming moderne pour films et séries, construite avec **Astro** et un système de composants UI réutilisables.
+Une plateforme de streaming moderne pour films et séries, construite avec **Astro** et un système de composants UI réutilisables auto-contenus.
 
 ## ✨ Fonctionnalités
 
 - 🎨 **Design System complet** avec thème sombre et couleurs violet pastel
-- 📱 **Responsive** avec système de grille flexbox (Bootstrap-like)
+- 📱 **Responsive** avec système de grille flexbox (Bootstrap-like) 
-- 🧩 **Composants UI modulaires** et réutilisables
+- 🧩 **Composants UI auto-contenus** avec styles scoped
-- ⚡ **Performance optimisée** avec Astro
+- ⚡ **Performance optimisée** avec styles scoped par composant
 - 🎭 **Composants spécialisés** pour le streaming (MovieCard, SearchBar)
+- 🔄 **Architecture modulaire** avec réutilisation et composition
+- 🛠️ **Classes utilitaires** Bootstrap-like pour styling rapide
 
 ## 🏗️ Architecture du Projet
 
@@ -18,28 +20,23 @@ Une plateforme de streaming moderne pour films et séries, construite avec **Ast
 │   └── favicon.svg
 ├── src/
 │   ├── components/
-│   │   └── ui/              # Composants UI réutilisables
+│   │   └── ui/              # Composants UI auto-contenus
-│   │       ├── Button.astro
+│   │       ├── Button.astro        # Avec styles intégrés
-│   │       ├── Card.astro
+│   │       ├── Card.astro          # Avec styles intégrés
-│   │       ├── Input.astro
+│   │       ├── Input.astro         # Avec styles intégrés
-│   │       ├── Modal.astro
+│   │       ├── Modal.astro         # Avec styles + JS intégrés
-│   │       ├── MovieCard.astro
+│   │       ├── MovieCard.astro     # Compose avec Card.astro
-│   │       ├── Navbar.astro
+│   │       ├── SearchBar.astro     # Compose avec Input.astro
-│   │       ├── Row.astro
+│   │       ├── Row.astro           # Avec support style prop
-│   │       ├── Col.astro
+│   │       ├── Col.astro           # Responsive breakpoints
 │   │       └── ...
 │   ├── layouts/
-│   │   └── Layout.astro     # Layout principal
+│   │   └── Layout.astro     # Variables + Grid seulement
 │   ├── pages/
-│   │   └── index.astro      # Page d'accueil
+│   │   └── index.astro      # Page de démo complète
 │   └── styles/
-│       ├── variables.css    # Variables CSS (couleurs, espacements)
+│       ├── variables.css    # Variables + Form base + Utilitaires globales
-│       ├── grid.css         # Système de grille flexbox
+│       └── grid.css         # Grille + Classes utilitaires responsive
-│       └── components/      # Styles par composant
-│           ├── button.css
-│           ├── card.css
-│           ├── input.css
-│           └── ...
 └── package.json
 ```
 
@@ -79,6 +76,21 @@ Une plateforme de streaming moderne pour films et séries, construite avec **Ast
 - **MovieCard** - Cartes pour films/séries avec poster, titre, rating
 - **SearchBar** - Barre de recherche avec icône
 
+## 🏗️ Architecture des Composants
+
+### Composition et réutilisation
+Les composants sont conçus pour être composés ensemble :
+- **SearchBar** utilise le composant **Input** avec des styles personnalisés
+- **MovieCard** compose avec le composant **Card** de base
+- **ModalHeader** utilise le composant **Button** pour la fermeture
+- Classes `.form-control-base` partagées entre Input, Select et Textarea
+
+### Styles scoped
+Chaque composant contient ses propres styles avec `<style>` scoped :
+- Isolation CSS automatique par Astro
+- Utilisation de `:global()` pour styler les composants importés
+- Variables CSS globales disponibles dans tous les composants
+
 ## 🚀 Utilisation des Composants
 
 ### Exemple basique
@@ -150,9 +162,10 @@ Toutes les commandes sont exécutées depuis la racine du projet :
 ## 🎯 Développement
 
 ### Ajouter un nouveau composant
-1. Créer le fichier CSS dans `src/styles/components/`
+1. Créer le composant Astro dans `src/components/ui/`
-2. Créer le composant Astro dans `src/components/ui/`
+2. Intégrer les styles directement dans le composant avec `<style>`
-3. Importer le CSS dans `src/layouts/Layout.astro`
+3. Utiliser les variables CSS globales et classes utilitaires disponibles
+4. Composer avec les composants existants quand possible
 
 ### Variables CSS disponibles
 - `--primary-*` : Couleurs principales (violet pastel)