# 🎨 DRIVECO — Identité Visuelle

*Extrait de driveco.com — Mai 2026*

---

## 1. Polices (Fonts)

| Élément | Police | Graisse | Taille Desktop | Interlignage | Style |
|---------|--------|---------|----------------|--------------|-------|
| Body | **Work Sans** | `400` | `16px` | `26px` | normal |
| Bold / Strong | Work Sans | `600` | — | — | normal |
| H1 (général) | Work Sans | `700` | `60px` | `66px` | normal |
| H1 (page-header) | Work Sans | `600` | `35px` | `45px` | UPPERCASE |
| H2 | **Barlow Condensed** | `300` | `35px` | `45px` | UPPERCASE |
| H3 | Work Sans | `500` | `26px` | `32px` | normal |
| H4 | Work Sans | `600` | `15px` | `28px` | normal |
| H5 | Work Sans | `700` | `18px` | `28px` | normal |
| Navigation | Work Sans | `500` | `15px` | `25px` | normal |
| Sous-menus | Work Sans | `500` | `14px` | `20px` | normal |

### Google Fonts à charger

```
Work Sans: 400, 500, 600, 700
Barlow Condensed: 300
```

---

## 2. Couleurs

### Primaires / Brand

| Rôle | Hex | Description |
|------|-----|-------------|
| **Primaire (Accent)** | `#0d1137` | Bleu marine foncé — liens, nav active, boutons principaux |
| **Secondaire 1** | `#6fc2bc` | Vert d'eau / Teal / Menthe |
| **Secondaire 2** | `#f4b64e` | Jaune doré — CTA, carrousels, progress bars |
| **Secondaire 3** | `#2e2e2e` | Gris foncé |
| **Gradient** | `#32d6ff` → `#2ac4ea` | Dégradé cyan pour boutons |

### Titres & Texte

| Rôle | Hex |
|------|-----|
| Couleur H1-H6 | `#0B2441` |
| Texte body | hérité (noir) |

### Fonds de sections

| Rôle | Hex |
|------|-----|
| Blanc | `#ffffff` |
| Gris très clair | `#fafafa` |
| Section sombre | `#0d1137` |
| Section dark navy | `#041f3f` |
| Footer | `#252525` |
| Footer copyright | `#1c1c1c` |
| Texte footer | `#777` (titres), `#ccc` (body) |

---

## 3. Style des boutons

- **Style global** : `rounded_shadow`
- **Border-radius** : `200px` (pill-shaped / complètement arrondis)
- **Effet hover** : `box-shadow: 0 20px 38px rgba(0,0,0,0.16)` + `translateY(-3px)`
- **Types** : `regular-button`, `see-through` (ghost), `accent-color`, `extra-color-2`

---

## 4. Header & Navigation

| Propriété | Valeur |
|-----------|--------|
| Format | `default` |
| Breakpoint responsive | `1300px` |
| Couleur de fond | `#ffffff` |
| Link hover effect | `animated_underline` |
| Hauteur du logo | `60px` |
| Dropdown style | `minimal` |
| Mobile off-canvas | `slide-out-from-right` |

---

## 5. Logo & Slogan

| Élément | Valeur |
|---------|--------|
| **Logo** | `Driveco_logo-bleu_RVB-1-e1688652803800.png` |
| **Dimensions** | 2723 × 653 px |
| **Slogan** | *"We are the electric future"* |
| **H1 Hero** | *"Electric mobility at your fingertips"* |

---

## 6. Design System

| Propriété | Valeur |
|-----------|--------|
| CMS | WordPress |
| Thème | Salient v16.2.2 |
| Skin | Material |
| Page builder | WPBakery Page Builder |
| Style formulaires | `default` / inputs `minimal` |

---

## 7. Résumé — Design Tokens

```
BRAND COLORS
  Primary / Accent:    #0d1137  (dark navy)
  Secondary 1:         #6fc2bc  (teal/mint)
  Secondary 2:         #f4b64e  (golden yellow)
  Secondary 3:         #2e2e2e  (dark gray)
  Gradient:            #32d6ff → #2ac4ea (cyan)

TYPOGRAPHY
  Body:                Work Sans 400 — 16px/26px
  Headings H1:         Work Sans 700 — 60px/66px
  Headings H2:         Barlow Condensed 300 — 35px/45px UPPERCASE
  Headings H3:         Work Sans 500 — 26px/32px
  Headings H4:         Work Sans 600 — 15px/28px
  Heading Color:       #0B2441

SURFACE COLORS
  White:               #ffffff
  Off-white:           #fafafa
  Light gray:          #f6f6f6
  Dark section bg:     #0d1137, #041f3f
  Footer bg:           #252525

COMPONENTS
  Buttons:             pill-shaped, border-radius 200px, shadow on hover
  Header:              white (#ffffff), animated underline
  Theme:               Salient Material Skin v16.2.2
```

---

## 8. Recommandations pour la présentation

- **Fond slides** : `#ffffff` ou `#fafafa`
- **Slides de rupture** : fond `#0d1137` avec texte `#ffffff`
- **Titres** : Work Sans Bold (700) ou Barlow Condensed Light (300, uppercase)
- **Corps** : Work Sans Regular (400)
- **Accents / highlights** : `#f4b64e` (jaune doré)
- **Icônes** : `#6fc2bc` (teal)
- **Boutons CTA** : fond `#0d1137` ou gradient `#32d6ff` → `#2ac4ea`, pill-shaped (`border-radius: 200px`)
- **Barres de progression / pastilles** : `#f4b64e`