# Espacements, rayons et ombres

Trois catégories de jetons décrivent la place que prennent les choses et la façon dont elles reposent sur la page, plus une quatrième qui met en forme les blocs de code. Les quatre sont de simples tables nom-valeur, et toutes les quatre sont optionnelles.

## `spacing`

Des jetons de mise en page nommés. Contrairement aux autres catégories, une valeur d'espacement est une **chaîne de classes Tailwind** plutôt qu'une valeur CSS unique — ce qui permet à un seul jeton de porter toute une décision de mise en page, variantes responsives comprises.

```yaml
theme:
  spacing:
    container: 'max-w-7xl mx-auto px-4'
    section: 'py-16 sm:py-20'
    card: 'p-6'
    gap: 'gap-8'
```

Les noms de jetons sont en kebab-case minuscule. Référencez un jeton là où vous auriez écrit les classes à la main, et une évolution ultérieure du rythme des pages devient une modification de configuration d'une ligne au lieu d'un rechercher-remplacer sur chaque page.

## `borderRadius`

Des jetons de rayon nommés, en valeurs CSS. Chacun devient un utilitaire `rounded-{name}`.

```yaml
theme:
  borderRadius:
    card: '0.75rem'
    button: '0.5rem'
    pill: '9999px'
```

## `shadows`

Des jetons d'ombre nommés, en valeurs CSS `box-shadow`. Chacun devient un utilitaire `shadow-{name}`.

```yaml
theme:
  shadows:
    card: '0 4px 6px rgba(0, 0, 0, 0.1)'
    elevated: '0 10px 30px rgba(0, 0, 0, 0.2)'
```

:::callout
**Nommez les jetons d'après leur rôle, pas leur apparence.** `shadow-card` et `rounded-card` survivent à une refonte qui change l'aspect d'une carte ; `shadow-subtle` et `rounded-8` non, et obligent à réauditer chaque site d'utilisation à la main.
:::

## `codeBlock`

Sélectionne le thème de coloration syntaxique appliqué aux blocs de code markdown — sur les [pages markdown](/fr/docs/pages-collections#markdown), dans les répertoires de contenu, et dans tout composant `text` rendant du markdown.

| Propriété | Description                                                       |
| --------- | ----------------------------------------------------------------- |
| `theme`   | Nom du thème de coloration, p. ex. `github-dark`, `github-light`. |

```yaml
theme:
  codeBlock:
    theme: github-dark
```

C'est un choix global unique plutôt qu'un choix par bloc : les exemples de code d'un site de documentation restent donc visuellement cohérents quelle que soit la page où ils apparaissent.

## Les assembler

Les jetons se composent comme des classes écrites à la main — l'intérêt est que les décisions soient nommées et centralisées :

```yaml
theme:
  spacing:
    section: 'py-20'
  borderRadius:
    card: '1rem'
  shadows:
    card: '0 1px 3px rgba(0, 0, 0, 0.08)'
```

```yaml
- type: container
  props: { className: 'py-20' }
  children:
    - { type: card, props: { className: 'rounded-card shadow-card' } }
```

## Pages connexes

- [Aperçu du thème et couleurs](/fr/docs/theme) — le bloc theme et les jetons de couleur.
- [Typographie](/fr/docs/theme-typography) — le bloc `fonts`.
- [Baseline et mode sombre](/fr/docs/theme-dark-mode) — la seconde palette.
- [Design responsive](/fr/docs/responsive-design) — `breakpoints` et surcharges par point de rupture.
- [Composants de mise en page](/fr/docs/layout-components) — les surfaces que ces jetons habillent.