# Logo

Trois questions suffisent à choisir le bon fichier.

## 1. Quelle composition ?

| Dossier `svg/` | Quand la prendre |
|---|---|
| `clicjo-logo-full-*` | **Le choix par défaut.** Symbole, mot et baseline « Un clic. Un déclic. » |
| `clicjo-logo-*` | Sans la baseline. Pour les usages courants, quand la marque est déjà identifiée. |
| `clicjo-logo-stacked-*` | Composition verticale, pour les formats étroits ou carrés. |
| `clicjo-symbol-*` | Le symbole seul. La seule forme lisible sous 40 pixels : favicon, avatar, pastille. |
| `clicjo-wordmark-*` | Le mot seul, sans le symbole. Usage rare. |

En dessous de 40 mm de large à l'impression, ou de 120 pixels à l'écran,
passez à la version sans baseline : elle devient illisible.

## 2. Sur quel fond ?

| Suffixe | Fond visé |
|---|---|
| *(aucun)* | Fond clair, crème ou blanc. Le cas courant. |
| `-on-cream`, `-on-navy` | Le logo vient **avec sa plaque de fond**, utile sur une image ou un fond dont vous n'êtes pas maître. |
| `-inverse` | Fond sombre déjà présent dans votre mise en page : réserve crème, traits sauge conservés, sans plaque. |
| `-mono-navy`, `-mono-cream`, `-mono-black`, `-mono-white` | Une seule couleur : gravure, tampon, fax, sérigraphie une passe. |
| `-primary` | Tracé au plus juste, sans marge intégrée. Pour un calage précis, quand vous gérez vous-même la marge. |

## 3. SVG ou PNG ?

**Le SVG, dans tous les cas où c'est possible** : il reste net à toute taille,
du favicon au kakémono, et pèse quelques kilo-octets. Le dossier `png/` n'est là
que pour les outils qui ne lisent pas le vectoriel — certains clients de
messagerie, quelques plateformes de publication.

Ne réagrandissez jamais un PNG : repartez du SVG.

## `favicon/`

Prêt à poser sur un site. Les petites tailles portent le symbole bleu sur crème,
plus lisible à 16 pixels qu'une réserve claire ; les icônes d'application
inversent le rapport.

```html
<link rel="icon" href="favicon/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32.png">
<link rel="apple-touch-icon" href="favicon/apple-touch-icon.png">
```

`icon-512-maskable.png` est destinée à Android, qui rogne jusqu'à 20 % de chaque
côté : le symbole y est plus petit exprès. Ne l'utilisez pas à la place de
`icon-512.png`, elle paraîtrait minuscule.

## Ce qu'il ne faut pas faire

- Redessiner, recolorer, déformer, faire pivoter le logo.
- Séparer le symbole du mot, ou changer leur écart.
- Ajouter une ombre portée, un contour, un biseau, un reflet.
- Composer « clicjo » dans une police : le logotype est un dessin, pas du texte.
- Poser le logo sur un fond chargé sans aplat ni zone calme.