# Charte graphique Dativo — v3.0 « Pantone-first »
**Source unique de vérité** pour l'identité visuelle de tous les produits Dativo SAS.
---
## Les fichiers à connaître
| Fichier | Pour quoi | Pour qui |
|---|---|---|
| **`CHARTE_GRAPHIQUE.html`** | Document de référence navigable, imprimable en PDF. Couleurs Pantone-first, logo, typo, composants, applications, voix & ton, règles d'or. | Tout le monde |
| **`dativo-design-tokens.css`** | Variables CSS officielles à inclure dans chaque projet. **Toute couleur en dehors de ce fichier est interdite.** | Dev |
| **`signature_email_dativo.html`** | Gabarit signature email HTML (logo embarqué en base64). | Tout le monde |
| **`_regen_images.py`** | Script Python qui régénère tous les PNG/favicon/social depuis les SVG sources. À relancer après tout changement de logo. | Dev |
| **`_audit_wcag.py`** | Audit automatique des contrastes WCAG dans la charte HTML. | Dev |
---
## Logo — système final v3.0
5 versions officielles depuis le 23 mai 2026 :
| # | Nom | Couleurs | Fichier | Usage |
|---|---|---|---|---|
| 01 | **Inversé** *(primaire)* | Forest + White | `logo-dativo-icon.svg` / `logo-dativo-horizontal.svg` | Par défaut — site, signature, factures, papier blanc |
| 02 | **Blanc pur** | White + Forest | `logo-dativo-icon-light.svg` / `logo-dativo-horizontal-light.svg` | Variante quand Inversé contraste mal (fond Cream/Dew) |
| 03 | **Transparent** | arc/point White sans carré de fond | `logo-dativo-icon-transparent.svg` | À poser sur fond foncé custom (photo, vidéo) |
| 04 | **Blanc sur foncé** | monochrome blanc | `logo-dativo-icon-white.svg` / `logo-dativo-horizontal-white.svg` | Photo, vidéo, fond foncé custom |
| 05 | **Noir** | monochrome noir | `logo-dativo-icon-black.svg` / `logo-dativo-horizontal-black.svg` | Fax, photocopie, impression N&B |
Le couple **Forest + Emerald** (anciens fichiers v1/v2) est désormais OBSOLÈTE et a été remplacé partout. Emerald reste valide ailleurs (liens, hover, sous-titres).
---
## Palette Pantone-first
| Nom | PMS Solid C | HEX officiel | RGB | Texte officiel | Ratio WCAG |
|---|---|---|---|---|---|
| **Forest** | 5535 C | `#1F3D33` | 31, 61, 51 | White | 11.5:1 AAA |
| **Emerald** | 5615 C | `#4E7F65` | 78, 127, 101 | White | 4.6:1 AA |
| **Mint** | 565 C | `#B7DDD2` | 183, 221, 210 | Forest | 7.8:1 AAA |
| **Tender** | 562 C | `#157F77` | 21, 127, 119 | White | 4.8:1 AA |
| **Dew** | 9520 C | `#DCF1E0` | 220, 241, 224 | Forest | 9.7:1 AAA |
| **Cream** | hors gamut | `#FFFFFF` | 255, 248, 240 | Forest | 10.9:1 AAA |
| **Terra** | 158 C | `#E37222` | 227, 114, 34 | White (≥19px bold) | 3.1:1 AA Large |
---
## Comment utiliser la charte
### Côté web (PHP / HTML)
Inclure les tokens CSS avant tout autre stylesheet :
```html
```
Utiliser les variables CSS, jamais des hex en dur :
```css
/* OK */
.btn { background: var(--forest); color: var(--white); }
/* INTERDIT */
.btn { background: #1F3D33; color: #FFFFFF; }
```
### Côté Office (Word / PowerPoint / Excel)
Charger les 7 couleurs du tableau ci-dessus dans le thème personnalisé du document.
### Côté Canva / Figma
Créer une palette de marque avec les 7 couleurs + l'échelle de gris. Importer les polices Bricolage Grotesque + DM Sans + Fraunces depuis Google Fonts.
---
## Règles d'or (rappel)
1. Une seule source de couleurs : `dativo-design-tokens.css`. Aucun hex « inventé ».
2. Un seul bouton primaire par vue. Terra rare et précieux.
3. Bricolage Grotesque (titres) + DM Sans (corps) + Fraunces italic (accent).
4. Logo : SVG officiel uniquement, version Inversé par défaut.
5. Zéro emoji en produit. Lucide ou rien.
6. Ombres teintées Forest, jamais noires.
7. Texte sur Terra : White en gras ≥ 19px (AA Large).
8. Pas de comparatif nominatif avec un concurrent (Code conso L122-1).
9. Si c'est vendu, ça marche. Pas de placeholder.
10. La charte elle-même respecte WCAG 2.1 AA — vérifié par `_audit_wcag.py` à chaque modification.
---
## Historique
- **23 mai 2026 — v1.0** — Première version consolidée. Charte HTML navigable créée. Tokens CSS extraits.
- **23 mai 2026 — v1.1** — Alignement de la charte sur les logos en production. `--emerald` passe de `#2D7A5F` à `#3B826F`. Ajout `--mint #A8D8CA`.
- **23 mai 2026 — v2.0 « Pantone-first »** — Ancrage de toute la palette sur des PMS officiels. Forest → PMS 5535 C `#1F3D33`. Emerald → PMS 5615 C `#4E7F65`. Mint → PMS 565 C `#B7DDD2`. Tender → PMS 562 C `#157F77`. Dew → PMS 9520 C `#DCF1E0`. Terra → PMS 158 C `#E37222`. Régénération complète des 47 PNG/favicon/social. Charte WCAG 2.1 AA conforme à 100 %.
- **23 mai 2026 — v3.0 « Logo Inversé canonique »** — Le couple **Forest + Emerald** du picto est remplacé par **Forest + White** (variante Inversé, blanc pur pour l'arc et le point central). Nouveau système à 5 versions : Inversé (primaire), Blanc pur, Transparent, Blanc monochrome, Noir monochrome. Régénération des images. Données légales DATIVO SAS intégrées dans la section Applications.
---
## Évolutions à venir
- [ ] Décliner la charte sur MonAuditPA (variante "expéditive", couleurs identiques mais densité différente).
- [ ] Ajouter un gabarit slide deck (Google Slides + Canva).
- [ ] Documenter la version Cockpit (palette inversée fond foncé par défaut ?).
- [ ] Audit WCAG des emails templates de prod (`_support/emails/templates/*.html`).
---
*Pour toute question ou ajout, modifier `CHARTE_GRAPHIQUE.html`