app.kluk.fr/charte-graphique.md

# Charte graphique Kluk

Charte extraite du site kluk.fr (`assets/css/style.scss`, `_layouts/`, `_includes/`).
Tout ce qu'il faut pour la réutiliser ailleurs se trouve dans le dossier [`charte/`](charte/) :

```
charte/
├── css/kluk.css          Feuille de style complète, en CSS pur (sans Sass)
├── fonts/                Young Serif, Atkinson Hyperlegible Next (woff2) + licence OFL
├── img/
│   ├── favicon.svg              Icône du site (tasse verte)
│   ├── illustration-tasses.svg  Illustration « table et tasses », autonome (styles intégrés)
│   ├── tasse-{gris,orange,vert,rouge}.svg  Une tasse seule, dans chaque couleur d'humeur
│   └── photo-attente.svg        Pictogramme de l'emplacement de photo
└── exemple.html          Page de démonstration de tous les composants
```

Pour démarrer : copier `charte/` dans le projet, puis dans le `<head>` :

```html
<meta name="theme-color" content="#F5F6F0">
<link rel="preload" href="charte/fonts/young-serif-400.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="charte/fonts/atkinson-hyperlegible-next-400.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="charte/css/kluk.css">
<link rel="icon" href="charte/img/favicon.svg" type="image/svg+xml">
```

Les chemins des polices dans `kluk.css` sont relatifs (`../fonts/`) : garder la structure `css/` + `fonts/` côte à côte.

---

## 1. Esprit

Un univers de petit-déjeuner, calme et chaleureux : **la porcelaine du matin** (fond), **l'encre du thé** (texte), **le chêne de la table** (pied de page, illustration), et **les quatre couleurs des tasses** (gris, orange, vert, rouge) comme accents, qui sont aussi les quatre « humeurs ».

Principes :

- une seule colonne de lecture étroite (36 rem), beaucoup d'air ;
- des titres en serif ronde et amicale, un texte courant très lisible ;
- des formes arrondies (boutons en pilule, cartes arrondies), des traits d'encre épais façon dessin ;
- l'accessibilité d'abord : contrastes élevés, focus très visible, lien d'évitement, animations coupées si l'utilisateur le demande.

---

## 2. Couleurs

Toutes les couleurs sont des variables CSS déclarées sur `:root`.

### Fonds et texte

| Variable | Valeur | Rôle |
|---|---|---|
| `--porcelaine` | `#F5F6F0` | Fond de page, texte sur fond encre, `theme-color` |
| `--porcelaine-fonce` | `#E9ECE2` | Fond de `code`, emplacement de photo, liseré des cartes |
| `--encre` | `#2E2A26` | Texte, bordures, fond des boutons |
| `--encre-douce` | `#5A534C` | Texte secondaire : chapeau, notes, légendes, précisions |
| `--chene` | `#D9BC94` | Pied de page, plateau de la table (illustration) |
| `--chene-fonce` | `#B48D5F` | Socle de la Kluk, pointillés et picto de l'emplacement photo |

### Humeurs (accents)

| Variable | Valeur | Rôle |
|---|---|---|
| `--gris` | `#8D97A8` | Humeur grise |
| `--orange` | `#EDA33D` | Humeur orange, trait de l'exergue |
| `--vert` | `#5F9B59` | Humeur verte, soulignement des liens, focus des champs, favicon |
| `--rouge` | `#D8573F` | Humeur rouge, trait des messages d'erreur |
| `--vert-lien` | `#3F7A3B` | Vert foncé pour les cases à cocher (`accent-color`) |

### Teintes utilitaires

Écrites en dur dans le site d'origine ; `kluk.css` les expose en variables, avec les mêmes valeurs.

| Variable | Valeur | Rôle |
|---|---|---|
| `--encre-survol` | `#45403A` | Fond des boutons au survol |
| `--surface` | `#FBFCF8` | Fond des cartes (formulaire, calendrier) |
| `--bordure-champ` | `#8A8279` | Bordure des champs de saisie |
| `--erreur-fond` | `#FBE9E5` | Fond des messages d'erreur |
| `--blanc` | `#fff` | Fond des champs, reflet des tasses, fond à l'impression |

### Contrastes (WCAG)

| Couple | Ratio | Usage autorisé |
|---|---|---|
| encre / porcelaine | 13,1 : 1 | tout texte |
| encre-douce / porcelaine | 7,0 : 1 | tout texte |
| encre / chêne | 7,8 : 1 | tout texte (pied de page) |
| porcelaine / encre-survol | 9,4 : 1 | texte des boutons au survol |
| vert-lien / porcelaine | 4,8 : 1 | texte possible |
| vert / porcelaine | 3,1 : 1 | éléments graphiques seulement (soulignés, contours) |
| rouge / porcelaine | 3,6 : 1 | éléments graphiques seulement |
| gris / porcelaine | 2,7 : 1 | décoratif seulement |
| orange / porcelaine | 2,0 : 1 | décoratif seulement |

Règle : **le texte est toujours en encre ou encre douce**. Les couleurs d'humeur ne servent qu'aux traits, soulignés, pastilles et illustrations, jamais au texte.

---

## 3. Typographies

| Variable | Pile | Usage |
|---|---|---|
| `--serif` | `"Young Serif", Georgia, serif` | Titres `h1`–`h3`, exergue, phrase du pied de page |
| `--sans` | `"Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif` | Tout le reste, y compris le logo |

Fichiers fournis (`charte/fonts/`, licence SIL OFL 1.1 dans `OFL.txt`) :

- `young-serif-400.woff2` : Young Serif, une seule graisse (400) ;
- `atkinson-hyperlegible-next-400.woff2` : Atkinson Hyperlegible Next **variable**, graisses 200 à 800 ;
- `atkinson-hyperlegible-next-400-italic.woff2` : italique 400.

Graisses utilisées : 400 (texte), 700 (boutons, libellés, `strong`), 800 (logo). Les titres restent en 400 : c'est la serif qui porte le caractère.

### Échelle

| Élément | Taille | Interlignage | Remarques |
|---|---|---|---|
| Corps (`body`) | `1.1875rem` (19 px) | 1.65 | `font-kerning: normal` |
| `h1` | `clamp(2.35rem, 1.6rem + 3.6vw, 3.75rem)` | 1.15 | serif, `text-wrap: balance` |
| `h2` | `clamp(1.6rem, 1.35rem + 1vw, 2rem)` | 1.15 | serif |
| Chapeau | `1.3rem` | 1.55 | italique, encre douce |
| Exergue | `1.45rem` | 1.4 | serif |
| Logo | `1.35rem` | 1.2 | sans 800, `letter-spacing: 0.01em` |
| Phrase du pied | `1.15rem` | — | serif |
| Note | `1.0625rem` | — | encre douce |
| Navigation, petit bouton, pied, formulaire (erreur, secours), emplacement photo | `1rem` | — | |
| Légende de photo | `0.95rem` | — | encre douce |
| `code` | `0.9em` | — | |

Titres : `letter-spacing: -0.005em`.

### Typographie française

Le site applique automatiquement (plugin Jekyll `_plugins/typographie.rb`) une espace fine insécable avant `; ! ?` et une espace insécable avant `:` et `»` et après `«`. Dans un autre projet, taper ces espaces directement (`&#8239;` fine, `&nbsp;` insécable) ou reprendre ce plugin. Apostrophe typographique `’` et guillemets `« »`.

---

## 4. Espacements et mise en page

| Variable | Valeur | Rôle |
|---|---|---|
| `--colonne` | `36rem` | Largeur de la colonne de texte (~ 65 caractères) |
| `--gouttiere` | `1.25rem` | Marge latérale sur mobile, padding horizontal des conteneurs |
| `--largeur-entete` | `64rem` | Largeur maximale de l'en-tête |
| `--arrondi-petit` | `0.5rem` | Logo, champs de saisie |
| `--arrondi` | `0.75rem` | Photos, cartes (formulaire, calendrier, emplacement photo) |
| `--arrondi-pilule` | `999px` | Boutons |

Rythme vertical (marges) :

| Élément | Marge |
|---|---|
| Paragraphe | `0 0 1.15rem` |
| `h1` | `1.5rem 0` |
| `h2` | `4.5rem 0 1.25rem` (grande respiration avant chaque section) |
| Paragraphe contenant seulement un bouton | `2rem 0` |
| Photo | `2rem 0` |
| Exergue, calendrier | `2.25rem 0` (calendrier : `2.25rem 0 1rem`) |
| Formulaire | `2.5rem 0 1rem` |
| Note | `margin-top: 2.5rem` |
| Colonne `.texte` | padding `2rem` en haut, `5rem` en bas |

Points de rupture : `30rem` (calendrier resserré), `40rem` (formulaire plus aéré), `48rem` (l'illustration déborde de 4 rem de chaque côté de la colonne).

Structure de page : `body` en flex colonne avec `min-height: 100vh`, `main` en `flex: 1`, pour que le pied de page reste en bas.

Traits : encre, 2 à 3 px (boutons actifs 2 px, logo 2,5 px, pied de page 3 px, illustration 3 px, anses 6 px). Trait latéral de 4 px pour l'exergue (orange) et les erreurs (rouge).

---

## 5. Composants

La page [`charte/exemple.html`](charte/exemple.html) les montre tous.

### Squelette de page

```html
<body>
  <a class="evitement" href="#contenu">Aller au contenu</a>
  <header class="entete">…</header>
  <main id="contenu" tabindex="-1">
    <article class="texte">
      …contenu…
    </article>
  </main>
  <footer class="pied">…</footer>
</body>
```

`.evitement` est caché au-dessus de l'écran et n'apparaît qu'au focus clavier.

### En-tête, logo et navigation

```html
<header class="entete">
  <a class="logo" href="/" aria-label="Kluk, retour à l'accueil">kluk</a>
  <nav class="nav" aria-label="Navigation principale">
    <ul>
      <li><a href="/" aria-current="page">Accueil</a></li>
      <li><a href="/histoire/">Comment est née l'idée</a></li>
      <li><a href="/je-veux-ma-kluk/" class="bouton bouton-petit">Je veux ma Kluk</a></li>
    </ul>
  </nav>
</header>
```

- Le logo est un mot-symbole en minuscules, en Atkinson Hyperlegible Next graisse 800, encadré d'un trait d'encre arrondi.
- Les liens de navigation ne sont pas soulignés ; le soulignement vert apparaît au survol et sur la page courante (`aria-current="page"`).
- Une seule entrée de navigation est mise en valeur en bouton. Quand c'est la page courante, le bouton s'inverse (fond porcelaine, contour encre).

### Liens

Texte en encre, soulignement vert épais (`0.12em`, décalé de `0.2em`) qui passe à l'encre au survol. Dans le pied de page, soulignement encre fin (1 px, 2 px au survol).

### Focus

Contour encre de 3 px, décalé de 3 px, coins arrondis à 4 px, sur tous les éléments (`:focus-visible`). Les champs de formulaire utilisent un contour vert.

### Bouton

```html
<p><a class="bouton" href="/je-veux-ma-kluk/">Je veux ma Kluk</a></p>

<a class="bouton bouton-petit" href="…">Petit bouton</a>

<button class="bouton" type="submit">Envoyer</button>
```

Pilule encre, texte porcelaine en 700. Un bouton seul dans son paragraphe prend une marge de 2 rem. Dans un `.formulaire`, un `<button class="bouton">` perd sa bordure native et passe à `opacity: 0.6` quand il est `disabled`.

### Titres, chapeau, texte

```html
<h1>Titre de la page</h1>
<p><em>Le chapeau : une phrase d'accroche en italique.</em></p>
<p>Texte courant…</p>
<h2>Intertitre</h2>
```

Le chapeau n'a pas de classe : c'est **le paragraphe qui suit directement le `h1` et ne contient qu'un `<em>`** (sélecteur `h1 + p:has(> em:only-child)`).

### Exergue

```html
<p class="exergue">Une phrase à mettre en valeur.</p>
```

### Note

```html
<p class="note">Une précision discrète, en fin de page.</p>
```

### Code en ligne

```html
<code>exemple</code>
```

### Photo

```html
<figure class="photo">
  <img src="photo.jpg" alt="Description de la photo" width="1200" height="900" loading="lazy" decoding="async">
  <figcaption>Légende facultative.</figcaption>
</figure>
```

Toujours un `alt` descriptif, et `width`/`height` pour éviter les sauts de mise en page. Format des photos du site : 1200 × 900 (4:3) ; image de partage : 1200 × 630.

### Emplacement de photo (en attendant l'image)

```html
<figure class="photo">
  <div class="photo-attente">
    <svg viewBox="0 0 40 32" aria-hidden="true" focusable="false"><path d="M3 3 L6 25 Q6.5 29 10.5 29 L24.5 29 Q28.5 29 29 25 L32 3 Z M31.5 8 C39 8 39.5 21 30 22" /></svg>
    <p><strong>Photo à venir</strong><br>Description de la photo attendue.</p>
  </div>
</figure>
```

Cadre 3:2 en pointillés chêne foncé. Le pictogramme est aussi fourni seul : `img/photo-attente.svg`.

### Illustration « table et tasses »

Deux façons de l'utiliser :

1. **En image**, le plus simple (couleurs et animation intégrées au fichier) :

   ```html
   <figure class="tasses">
     <img src="charte/img/illustration-tasses.svg" alt="Trois tasses de couleur alignées sur la table, et une quatrième posée sur la Kluk, fumante.">
   </figure>
   ```

2. **En SVG dans la page**, pour qu'elle suive les variables CSS : copier le bloc `<figure class="tasses">` de `charte/exemple.html`. La couleur de chaque tasse vient de sa classe d'humeur (`humeur-gris`, `humeur-orange`, `humeur-rouge`, `humeur-vert`) via `currentColor`. On peut donc réutiliser le symbole `#tasse` :

   ```html
   <use href="#tasse" x="34" y="114" class="humeur-orange" />
   ```

La vapeur ondule doucement (5 s, deux volutes décalées de 2,5 s), seulement si `prefers-reduced-motion` ne le refuse pas. À partir de 48 rem, la figure déborde de 4 rem de part et d'autre de la colonne.

Tasses seules : `img/tasse-gris.svg`, `tasse-orange.svg`, `tasse-vert.svg`, `tasse-rouge.svg`.

### Calendrier d'humeurs (décoratif)

```html
<div class="calendrier" aria-hidden="true">
  <span class="jour jour-v"></span>
  <span class="jour jour-o"></span>
  <span class="jour jour-g"></span>
  <span class="jour jour-r"></span>
  <!-- … une case par jour ; la grille remplit des colonnes de 7 jours (une semaine par colonne) -->
</div>
```

`jour-g` gris, `jour-o` orange, `jour-v` vert, `jour-r` rouge. Carte de fond `--surface` avec liseré intérieur `--porcelaine-fonce`.

### Formulaire

```html
<form class="formulaire">
  <div class="champ">
    <label for="champ-email">Votre adresse mail <span class="precision">(obligatoire)</span></label>
    <input id="champ-email" name="Email" type="email" required autocomplete="email">
  </div>

  <fieldset class="champ">
    <legend>Ce que vous aimeriez faire <span class="precision">(cochez tout ce qui vous ressemble)</span></legend>
    <ul class="choix">
      <li>
        <input id="choix-1" type="checkbox" name="choix[]" value="1">
        <label for="choix-1">Premier choix</label>
      </li>
    </ul>
  </fieldset>

  <div class="champ">
    <label for="champ-message">Un mot, une idée, une question ? <span class="precision">(facultatif)</span></label>
    <textarea id="champ-message" name="Message" rows="5"></textarea>
  </div>

  <!-- Champ piège anti-robots : invisible, laissé vide par les humains -->
  <div class="piege" aria-hidden="true">
    <label for="champ-site">Ne pas remplir</label>
    <input id="champ-site" name="_site" type="text" tabindex="-1" autocomplete="off">
  </div>

  <p class="formulaire-erreur" role="alert" hidden></p>

  <button class="bouton" type="submit">Envoyer</button>

  <noscript><p class="formulaire-secours">Ce formulaire a besoin de JavaScript.</p></noscript>
</form>
```

- Libellés en 700 au-dessus des champs, précisions en 400 encre douce entre parenthèses.
- Champs : fond blanc, bordure 2 px `--bordure-champ`, arrondi 0,5 rem ; au focus, contour vert 3 px et bordure encre.
- Les styles ne visent que `input[type="email"]` et `textarea` : ajouter les autres types au sélecteur si besoin.
- Cases à cocher agrandies (1,35 rem), teintées `--vert-lien`.
- Message d'erreur : trait rouge à gauche sur fond rosé.

### Pied de page

```html
<footer class="pied">
  <div class="pied-interieur">
    <p class="pied-phrase">Une petite phrase facultative.</p>
    <ul class="pied-liens">
      <li><a href="/je-veux-ma-kluk/">Je veux ma Kluk</a></li>
      <li><a href="/mentions-legales/">Mentions légales</a></li>
    </ul>
  </div>
</footer>
```

C'est « la table en bois » : fond chêne, trait d'encre de 3 px en haut, comme le plateau de l'illustration.

---

## 6. Impression

La navigation, le pied de page, l'illustration et le calendrier sont masqués ; le fond devient blanc.

## 7. Icône

`img/favicon.svg` : une tasse verte (`--vert`) cernée d'encre. `theme-color` : `#F5F6F0`.