# Référence Typographie et Espacement

**Auteur** : Équipe 4NK
**Date** : 2025-01-27

## Système de tailles de texte

### Hiérarchie typographique

| Usage | Classe Tailwind | Taille | Exemple |
|-------|----------------|--------|---------|
| Métadonnées, labels | `text-xs` | 12px | Dates, catégories, badges |
| Texte secondaire | `text-sm` | 14px | Descriptions, helper text |
| Corps de texte | `text-base` | 16px | Contenu principal (défaut) |
| Sous-titres | `text-lg` | 18px | Titres de sections |
| Titres de sections | `text-xl` | 20px | Titres de modals |
| Titres principaux | `text-2xl` | 24px | Titres d'articles, pages |
| Titres hero | `text-3xl+` | 30px+ | Titres de landing |

### Poids de police

| Usage | Classe | Poids |
|-------|--------|-------|
| Texte courant | `font-normal` | 400 |
| Emphase légère | `font-medium` | 500 |
| Emphase moyenne | `font-semibold` | 600 |
| Titres, CTA | `font-bold` | 700 |

## Espacement

### Échelle Tailwind (4px base)

- `gap-2` : 8px - Espacement serré (icônes, badges)
- `gap-4` : 16px - Espacement standard (éléments de liste)
- `gap-6` : 24px - Espacement large (sections)
- `gap-8` : 32px - Espacement très large (sections principales)

### Padding

- Cards : `p-4` (compact) ou `p-6` (standard)
- Containers : `px-4 py-8` (mobile) ou `px-6 py-12` (desktop)
- Sections : `mb-8` ou `mb-12` entre sections

### Marges verticales

- Entre éléments liés : `mb-2` à `mb-4`
- Entre sections : `mb-8` à `mb-12`
- Espacement de page : `py-8` (mobile) ou `py-12` (desktop)

## Largeur de ligne optimale

Pour le contenu de lecture :
- Utiliser `max-w-prose` pour le contenu texte
- Largeur max ~65-75 caractères
- Padding horizontal : `px-4` (mobile) ou `px-6` (desktop)

## Exemples d'utilisation

### Titre de page
```tsx
<h1 className="text-2xl font-bold text-neon-cyan mb-4">Titre de page</h1>
```

### Titre de section
```tsx
<h2 className="text-lg font-semibold text-neon-cyan mb-2">Section</h2>
```

### Corps de texte
```tsx
<p className="text-base text-cyber-accent">Contenu principal</p>
```

### Texte secondaire
```tsx
<p className="text-sm text-cyber-accent/70">Description ou helper text</p>
```

### Métadonnées
```tsx
<span className="text-xs text-cyber-accent/50">Date, catégorie</span>
```