# Charte graphique Corelia

> Direction « Atelier français » validée le 29 avril 2026. Référence unique des couleurs, typographies, composants, logos et bannières du projet.

## Sommaire

1. [Palette](./palette.md)
2. [Typographie](./typographie.md)
3. [Logos](#logos)
4. [Bannières](#bannières)
5. [Composants signatures](#composants-signatures)
6. [Anti-patterns](#anti-patterns)

---

## Esprit

**Atelier français.** L'identité Corelia s'inspire des codes de l'artisanat numérique français : sobriété, sérieux, chaleur. On évite délibérément :

- Le bleu/violet froid des SaaS B2B américains.
- Les gradients arc-en-ciel et le glassmorphism.
- Le ton commercial racoleur ou les textes auto-générés.

On préfère :

- Une palette **stone chaude** (au lieu du zinc froid usuel).
- Un accent **amber** signature, sobre et premium.
- Une typographie mixte : **Inter** pour l'interface, **Fraunces** pour les titres et chiffres affichés en grand.
- Des animations sobres, jamais sur les outils internes (portail / admin).

---

## Logos

Tous les logos vivent dans [`./logos/`](./logos/). Ce sont des SVG, donc redimensionnables sans perte. Les variations couvrent les contextes courants.

| Fichier | Usage |
|---|---|
| `logo-corelia.svg` | Logo complet (mark + wordmark) sur fond sombre, version par défaut |
| `logo-corelia-light.svg` | Même chose sur fond clair |
| `logo-corelia-extended.svg` | Logo + wordmark étendu « Corelia Digital » |
| `mark.svg` | Symbole seul, versions `light` et standard |
| `mark-light.svg` | Symbole seul pour fond clair |
| `wordmark-corelia.svg` | Le mot « Corelia » seul (sans symbole) |
| `wordmark-corelia-digital.svg` | « Corelia Digital » seul |
| `logo-corelia-mono-white.svg` | Version monochrome blanche (impression noir & blanc, fond complexe) |
| `logo-corelia-mono-black.svg` | Version monochrome noire |

### Espace de protection

Garder autour du logo une marge équivalente à la **hauteur du symbole carré**. Ne pas placer de texte ou d'élément graphique dans cette zone.

### Tailles minimales

- Logo complet : **120 px** de large minimum à l'écran.
- Symbole seul : **24 px** de côté minimum.
- En dessous, basculer sur la version la plus simple disponible.

---

## Bannières

Les bannières vivent dans [`./banners/`](./banners/). Elles sont prêtes à l'emploi pour réseaux sociaux, en-têtes d'e-mail, ou présentation.

| Fichier | Format | Usage |
|---|---|---|
| `banner-corelia.svg` | 1600×400 | Bannière horizontale large « Corelia » + tagline |
| `banner-corelia-digital.svg` | 1600×400 | Variante « Corelia Digital » |
| `banner-corelia-square.svg` | 1200×1200 | Carré pour Instagram, LinkedIn |
| `banner-corelia-narrow.svg` | 1200×630 | Format Open Graph / partage social standard |

Toutes utilisent la palette stone + amber et la police Fraunces pour le wordmark.

---

## Composants signatures

Les composants suivants sont définis dans le code (`components/ui/`) et utilisent les tokens charte. Cette doc résume leur identité visuelle.

### `Panel`
Carte contenant du contenu structuré : bordure 1px warm-white à 8 % d'opacité, fond `surface`, radius 0.75rem.

```css
border: 1px solid rgba(231, 215, 196, 0.08);
background: #1c1917;
border-radius: 0.75rem;
```

### `Button` (primary)
Bouton accent amber avec soulèvement subtil au hover et glow.

- Fond : `--color-accent` (amber-400)
- Texte : `--color-accent-fg` (stone-900)
- Hover : `-translate-y-0.5` + glow accent renforcé
- Active : `scale-0.98`
- Cursor : pointer (explicite, Tailwind v4 ne l'applique plus par défaut)

### `Badge`
Pastille rectangle arrondie pour statuts. 5 tons sémantiques : neutral, accent, success, warning, danger, muted. Avec ou sans dot animé.

### `StatCard`
Carte de KPI : label uppercase tracking-wider, chiffre en `font-editorial` (Fraunces), unit, delta avec flèche directionnelle.

### Charts (Recharts)
- Couleurs harmoniques : amber pour la métrique principale, purple-300 / blue-400 en complément.
- Grille : `rgba(255,255,255,0.05)` horizontal seulement.
- Tooltips : panel charte, fond `surface-2`, bordure `border`.

---

## Anti-patterns

À ne **jamais** faire dans le projet, peu importe le contexte :

- ❌ Gradients colorés multi-stops (sauf le gradient amber du logo).
- ❌ Glassmorphism `backdrop-blur` excessif (déjà testé, daté).
- ❌ Gradient text sur les titres (lisibilité dégradée).
- ❌ Cards 3D, ombres lourdes, drop-shadows portées.
- ❌ Carousels auto-rotatifs.
- ❌ Stock photos de « diverse smiling team in front of laptop ».
- ❌ Cookie banner monstrueux (un dialog discret en bas suffit).
- ❌ Emojis dans le code, le copy ou les commits.
- ❌ Cadratins (em-dash `—`) dans les textes : c'est un marqueur IA. Utiliser virgule, point, deux-points, ou middle-dot `·`.
- ❌ Mention de noms de techno (Next.js, React, Tailwind) dans le copy public.
- ❌ Animations sur portail/admin (outils du quotidien, ne doivent pas faire attendre).

---

## Conventions techniques

- **Couleurs** : utiliser exclusivement les tokens CSS définis dans `app/globals.css`. Si vous avez besoin d'une couleur qui n'existe pas, ajoutez-la d'abord au token.
- **Typographie display** : appliquer la classe `.font-editorial` aux titres ≥ text-3xl et aux chiffres KPI. Pas en dessous.
- **Icônes** : Lucide uniquement (`lucide-react`), `size-4` ou `size-5` selon contexte. Pas d'autres jeux d'icônes.
- **Espacements** : utiliser l'échelle Tailwind par défaut. Pas de valeurs arbitraires (`px-[37px]` interdit).
- **Animations** : composant `<Reveal>` (intersection observer + fade + translateY 12px) pour les pages marketing seulement. Respecte `prefers-reduced-motion`.