# Charte Graphique & Convention Technique (V1.0)
> **Projet :** Écosystème Portail & Apps (Penny-Wise, Time-Tracking, etc.)  
> **Style Visuel :** Modern Glassmorphism (Transparence, Flou, Profondeur)  
> **Architecture :** CSS Natif (Variables) + BEM

---

## 1. Philosophie Design : "Glassmorphism Unifié"

L'interface repose sur le principe du verre dépoli posé sur un arrière-plan abstrait et coloré.
*   **Profondeur** : L'interface est construite en couches (Z-Index).
*   **Transparence** : Les conteneurs ne sont jamais blancs à 100% (`background: rgba(255, 255, 255, 0.x)`).
*   **Flou** : L'effet de verre est assuré par `backdrop-filter: blur()`.
*   **Bordures** : Chaque carte vitrée possède une bordure subtile blanche semi-transparente pour marquer l'arête (effet de lumière).

---

## 2. Palettes & Thèmes (5 Applications)

Chaque application possède une **Couleur Primaire** (Identité) et une **Couleur Secondaire** (Accent).
Le fond (`body`) est un dégradé global utilisant ces couleurs.

### 🎨 Thème 1 : Portail (Hub Central)
*Ambiance : Neutre, Technologique, Sérieux.*
*   **Primaire** : `224, 231, 255` (Blanc bleuté très froid - Ice)
*   **Accent** : `79, 70, 229` (Indigo vibrant)
*   **Dégradé de fond** : Bleu nuit profond vers Indigo sombre.

### 💰 Thème 2 : Penny-Wise (Finance)
*Ambiance : Confiance, Croissance, Argent.*
*   **Primaire** : `16, 185, 129` (Emerald Green)
*   **Accent** : `245, 158, 11` (Amber/Gold)
*   **Dégradé de fond** : Vert forêt sombre vers Noir.

### ⏱️ Thème 3 : Time-Tracking (Productivité)
*Ambiance : Focus, Temps, Futuriste.*
*   **Primaire** : `139, 92, 246` (Violet électrique)
*   **Accent** : `236, 72, 153` (Pink Neon)
*   **Dégradé de fond** : Violet sombre vers Bleu marine.

### 🚀 Thème 4 : Project-Manager (Futur App)
*Ambiance : Organisation, Structure, Kanban.*
*   **Primaire** : `6, 182, 212` (Cyan / Ocean)
*   **Accent** : `249, 115, 22` (Orange vif)
*   **Dégradé de fond** : Bleu pétrole vers Cyan sombre.

### ❤️ Thème 5 : Health-Life (Futur App)
*Ambiance : Vitalité, Santé, Sport.*
*   **Primaire** : `239, 68, 68` (Rouge/Corail)
*   **Accent** : `16, 185, 129` (Vert menthe pour le contraste positif)
*   **Dégradé de fond** : Bordeaux sombre vers Rouge brique.

---

## 3. Convention Technique CSS

### 3.1 Déclaration des Variables (`:root`)
Nous utilisons le format **RGB** décomposé pour permettre l'opacité dynamique dans les fonctions `rgba()`.

```css
:root {
/* === TYPOGRAPHIE === */
--font-main: 'Inter', 'Segoe UI', sans-serif;
--font-heading: 'Poppins', sans-serif;

/* === COULEURS (Surchargées par App) === */
/* Format RGB pur pour usage: rgba(var(--primary-rgb), 0.5) */
--primary-rgb: 79, 70, 229;   
--accent-rgb: 236, 72, 153;   

/* === GLASSMORPHISM === */
--glass-bg: rgba(255, 255, 255, 0.1);
--glass-border: rgba(255, 255, 255, 0.2);
--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
--glass-blur: 12px;

/* === ESPACEMENT === */
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;

/* === UI === */
--radius-sm: 8px;
--radius-md: 16px;
--radius-lg: 24px;
}
```

### 3.2 La Classe "Glass" Standard
Tout conteneur (Sidebar, Card, Header) doit étendre cette logique.
```css
.glass-panel {
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur)); /* Safari */
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
border-radius: var(--radius-md);
color: white; /* Par défaut sur fond sombre */
}
```

### 3.3 Convention de Nommage (BEM Strict)
*   **Block** : `.component`
*   **Element** : `.component__part` (Double underscore)
*   **Modifier** : `.component--variant` (Double tiret)

**Exemple :**
```html 
<!-- Carte de Statistique --> 
<div class="stat-card glass-panel">
    <div class="stat-card__icon stat-card__icon--success">...</div> 
    <h3 class="stat-card__title">Revenus</h3> 
    <p class="stat-card__value">1 200 €</p> 
</div> 
```
## 4. Stratégie Responsive
L'interface doit être "Mobile First". La Sidebar devient un menu burger/off-canvas sur mobile.

Breakpoints
*   Mobile : < 768px

*   Tablet : 768px - 1024px

*   Desktop : > 1024px

Comportement Structurel
1.Layout : Grid CSS.

*   Desktop : Sidebar (280px) + Main Content (Auto).

*   Mobile : Sidebar (Hidden/Overlay) + Main Content (100%).

2.Typography : Utilisation de clamp() pour des tailles fluides.

*   Ex: font-size: clamp(1rem, 2vw, 1.2rem);

## 5. Composants UI Communs
### 5.1 Boutons
Les boutons ne doivent pas être plats, ils doivent flotter ou luire.

*   Primaire : Fond semi-transparent coloré + Bordure lumineuse.

*   Hover : Augmentation de l'opacité et transform: translateY(-2px).
```css
.btn {
    padding: 0.8rem 1.5rem;
    border-radius: var(--radius-sm);
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid transparent;
}

.btn--primary {
    background: rgba(var(--primary-rgb), 0.6);
    border-color: rgba(var(--primary-rgb), 0.8);
    color: white;
}
.btn--primary:hover {
    background: rgba(var(--primary-rgb), 0.9);
    box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.5); /* Glow effect */
}
```
### 5.2 Formulaires (Inputs)
Les champs de saisie doivent ressembler à des creux dans le verre.

Fond : ```css rgba(0, 0, 0, 0.2)``` (plus sombre que la carte).

Bordure : ```css rgba(255, 255, 255, 0.1)``` .

Focus : Bordure devient la couleur Accent.

### 5.3 Tableaux (Data Grids)
Header : Fond légèrement plus opaque.

Lignes : border-bottom: 1px solid rgba(255,255,255, 0.05).

Hover ligne : background: rgba(255,255,255, 0.05).

## 6. Liste de contrôle pour l'intégration
Avant de valider un fichier CSS, vérifier :

 Les couleurs sont-elles appelées via var(--...) et jamais en dur (hex) ?

 Le backdrop-filter est-il présent sur les conteneurs principaux ?

 Le texte est-il lisible (contraste WCAG) sur le fond dégradé ?

 La Sidebar disparaît-elle proprement sous 768px ?

 Les Z-index sont-ils gérés (ex: Modal > Sidebar > Content > Background) ?

text

## Prochaines étapes
Maintenant que ce document est établi, je suis prêt à recevoir les 3 fichiers CSS (ou à utiliser ceux que j'ai extraits précédemment s'ils sont valides) pour appliquer cette transformation "Glassmorphism" rigoureuse.