# Mise en page, polices et marges

Choisissez le format de papier, la typographie, les marges et les arrière-plans pour donner à votre document la mise en page souhaitée.

Lors de la modification d'un modèle, certaines modifications s'appliquent à l'ensemble du document, comme une nouvelle police ou des marges partagées. D'autres parties peuvent nécessiter leur propre traitement, comme une couverture avec un fond coloré suivie de pages de contenu blanches.

Tembuilder vous permet de faire les deux : définir les paramètres par défaut partagés dans **Global**, puis attribuer aux pages individuelles leurs propres marges et arrière-plans dans **Structure**. Ce guide vous montre où choisir le format de papier et ajuster la typographie, les marges et les arrière-plans.

## 1. Choisissez le format du papier

Utilisez le contrôle du format de papier dans la zone d'aperçu, affiché sous la forme **A4** ci-dessous. Le format du papier s'applique à **l'ensemble du modèle** ; les pages individuelles n'ont pas de paramètre de format de papier distinct dans Config.

Tembuilder prend en charge 9 formats de papier :

| Format du papier | Dimensions (largeur × hauteur, mm) |
| --- | --- |
| A0 | 841 × 1189 |
| A1 | 594 × 841 |
| A2 | 420 × 594 |
| A3 | 297 × 420 |
| A4 | 210 × 297 |
| A5 | 148 × 210 |
| A6 | 105 × 148 |
| Lettre américaine | 215.9 × 279.4 |
| Mentions légales | 215.9 × 355.6 |

<figure class="doc-sim layout-illustration" aria-label="Aperçu → choisir le format du papier">
<div class="sim-stage"><div class="sim-panel"><div class="ls-preview-bar"><div class="sim-tabs"><span>Disposition</span><span class="sim-active">PDF</span></div><span class="sim-control sim-focus">A4 <svg class="sim-chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="m4 6 4 4 4-4" /></svg></span></div><div class="ls-paper-sizes"><div><div class="ls-sheet "><b>Tembuilder</b><strong>FACTURE</strong><div class="ls-lines"><i></i><i></i><i></i></div><div class="ls-lines"><i></i><i></i></div><small>01</small></div><small>A4 · 210 × 297 mm</small></div><div><div class="ls-sheet ls-letter"><b>Tembuilder</b><strong>FACTURE</strong><div class="ls-lines"><i></i><i></i><i></i></div><div class="ls-lines"><i></i><i></i></div><small>01</small></div><small>Lettre américaine</small></div></div></div></div>
<figcaption>Aperçu → choisir le format du papier</figcaption>
</figure>

## 2. Définir la typographie partagée dans Global

Ouvrez **Structure → Global → Config → Typographie**.

| Réglage | Valeur et unités |
| --- | --- |
| Taille de la police | Taille en **pt**, tel que `12`. |
| Hauteur de la ligne | Un multiplicateur de la taille de la police, tel que `1.4` ; n’entrez pas `px` ou `pt`. |
| Espacement des lettres | Espacement des caractères en **em**, tel que `0.02`. |
| Alignement du texte | Gauche, Centre, Droite ou Justifier. |
| Couleur du texte | La couleur du texte partagé. |

Ce sont des valeurs par défaut. Si une section définit son propre `font-size`, `color` ou `line-height` dans CSS, la modification de ce paramètre dans Global ne remplace pas le CSS de la section. Si une partie du contenu ne répond pas à une modification Global, vérifiez l'onglet **CSS** de cette section.

<figure class="doc-sim layout-illustration" aria-label="Global → Config → Typographie">
<div class="sim-stage"><div class="ls-path">Structure <span>→</span> Global <span>→</span> Config</div><div class="ls-editor sim-panel"><div class="ls-structure"><div class="sim-panel-title">STRUCTURE</div><div class="sim-tree-row sim-selected">⌄ Global</div><div class="sim-tree-row sim-muted">⌄ Facture</div><div class="sim-tree-child sim-muted">Parties de facturation</div></div><div class="ls-config"><div class="sim-tabs"><span>Props</span><span class="sim-active">Config</span></div><div class="ls-card"><div class="ls-card-title">Typographie</div><div class="ls-setting"><span>Taille de la police</span><span class="sim-input sim-focus">12 <small>pt
quantité de</small></span></div><div class="ls-setting"><span>Hauteur de la ligne</span><span class="sim-input">1.4</span></div><div class="ls-setting"><span>Alignement du texte</span><span class="sim-input">Gauche <svg class="sim-chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="m4 6 4 4 4-4" /></svg></span></div><div class="ls-setting"><span>Couleur du texte</span><span class="ls-color" aria-label="#111111"></span></div></div></div></div></div>
<figcaption>Global → Config → Typographie</figcaption>
</figure>

## 3. Ajouter et trier les polices

Ouvrez **Global → Config → Polices → Ajouter une police**, recherchez une police Google et ajoutez-la à la liste.

**L'ordre de la liste définit la priorité des polices.** Faites glisser une police vers le haut ou utilisez les commandes haut/bas pour en faire le premier choix. Les polices ultérieures sont des solutions de secours lorsqu'une police antérieure n'est pas disponible ou ne comporte pas de caractère.

Une section avec son propre CSS `font-family` utilise cette déclaration de police au lieu de l'ordre par défaut de Global.

<figure class="doc-sim layout-illustration" aria-label="Global → Config → Polices → Ajouter une police">
<div class="sim-stage"><div class="ls-path">Structure <span>→</span> Global <span>→</span> Config</div><div class="sim-panel"><div class="ls-fonts-head"><strong>Polices</strong><span class="sim-control sim-focus">＋ Ajouter une police</span></div><div class="ls-font-row"><span class="ls-font-index">1</span><div><strong>Espace Grotesk</strong><small>Polices Google</small></div><span class="ls-font-sample">Aa</span></div><div class="ls-font-example">Échantillon de type · Aa Bb Cc · 0123456789</div></div></div>
<figcaption>Global → Config → Polices → Ajouter une police</figcaption>
</figure>

## 4. Définir les marges du contenu

Ouvrez **Global → Config → Marge de contenu**, activez les marges et saisissez **Haut**, **Droite**, **Bas** et **Gauche** en **mm**.

Par exemple, A4 a une largeur `210 mm`. Avec des marges gauche et droite de `14 mm` chacune, la zone de contenu est large de `182 mm`. C'est la largeur disponible pour les tableaux et les sections.

Utilisez les marges de page pour l'encart à partir des bords du papier. Utilisez `padding` et `margin` dans le CSS d'une section pour l'espacement à l'intérieur ou entre les blocs de contenu.

**Marge miroir** échange les marges gauche et droite sur les feuilles paires pour les documents reliés recto-verso. Avec `24` gauche et `12` droite, les feuilles impaires ont une marge gauche `24 mm` et les feuilles paires ont une marge droite `24 mm`.

<figure class="doc-sim layout-illustration" aria-label="Marges utilisées en mm · La marge miroir permute gauche/droite sur les feuilles paires">
<div class="sim-stage"><div class="ls-path">Global <span>→</span> Config <span>→</span> Marge de contenu</div><div class="ls-margin-scene"><div class="sim-panel ls-margin-panel"><div class="sim-panel-title">Marge de contenu <small>mm</small></div><div class="ls-margin-diagram"><div class="ls-m-top"><small>Haut</small><span class="sim-input">14</span></div><div class="ls-m-left"><small>Gauche</small><span class="sim-input sim-focus">24</span></div><div class="ls-m-page" aria-hidden="true">▤</div><div class="ls-m-right"><small>C'est vrai</small><span class="sim-input">12</span></div><div class="ls-m-bottom"><small>Bas</small><span class="sim-input">20</span></div></div><div class="ls-mirror-row"><span>Marge miroir</span><span class="ls-toggle" aria-label="Activé"></span></div></div><div class="ls-mirror-pages"><div><span>1</span><div class="ls-margin-paper"><div class="ls-margin-area"><i></i><i></i><i></i></div></div></div><div><span>2</span><div class="ls-margin-paper ls-margin-even"><div class="ls-margin-area"><i></i><i></i><i></i></div></div></div></div></div></div>
<figcaption>Marges utilisées en mm · La marge miroir permute gauche/droite sur les feuilles paires</figcaption>
</figure>

## 5. Remplacer les marges et l'arrière-plan d'une page

Sélectionnez une page dans **Structure → Config** pour remplacer Global :

- **Marges personnalisées → Contenu** : activez une marge de contenu distincte pour la page.
- **Arrière-plan → Arrière-plan de la page** : activez une couleur ou une image d'arrière-plan distincte.

Ces paramètres sont indépendants. Une couverture peut avoir son propre fond tout en gardant des marges partagées, ou une page contenant un large tableau peut avoir ses propres marges.

Désactivez un remplacement pour utiliser à nouveau la **valeur Global actuelle**. Lorsqu'un remplacement est activé, les modifications apportées à ce paramètre Global ne s'appliquent pas à la page.

Les en-têtes et pieds de page ont leurs propres paramètres de marge et d'arrière-plan lorsqu'ils sont activés. Voir [En-têtes et pieds de page](/docs/fr/editor/header-footer/) ou [Utilisation d'images](/docs/fr/assets/images/) pour les détails pertinents.

<figure class="doc-sim layout-illustration" aria-label="Sélectionnez une page → Config → activer les marges ou l'arrière-plan personnalisés">
<div class="sim-stage"><div class="ls-path">Structure <span>→</span> Facture <span>→</span> Config</div><div class="ls-page-scene"><div class="sim-panel ls-page-config"><div class="sim-tabs"><span class="sim-active">Config</span></div><div class="ls-card"><div class="ls-card-title">Marges personnalisées</div><div class="ls-setting"><span>Contenu</span><span class="ls-toggle"></span></div><div class="ls-setting"><span>Gauche</span><span class="sim-input">24 <small>mm</small></span></div></div><div class="ls-card"><div class="ls-setting"><strong>Fond de page</strong><span class="ls-toggle sim-focus"></span></div><div class="ls-setting"><span>Couleur</span><span class="ls-color ls-color-page"></span></div></div></div><div class="ls-page-comparison"><div><small>Page 1 · Personnalisé</small><div class="ls-sheet ls-custom-paper"><b>Tembuilder</b><strong>FACTURE</strong><div class="ls-lines"><i></i><i></i><i></i></div><div class="ls-lines"><i></i><i></i></div><small>01</small></div></div><div><small>Page 2 · Global</small><div class="ls-sheet "><b>Tembuilder</b><strong>FACTURE</strong><div class="ls-lines"><i></i><i></i><i></i></div><div class="ls-lines"><i></i><i></i></div><small>01</small></div></div></div></div></div>
<figcaption>Sélectionnez une page → Config → activer les marges ou l'arrière-plan personnalisés</figcaption>
</figure>

## 6. Pages Structure et feuilles PDF

Une **page dans les sections des groupes Structure** ; cela ne se limite pas à une seule feuille de papier. Un contenu plus long peut produire plusieurs feuilles PDF de ce groupe, et la configuration de la page continue de s'appliquer à ces feuilles.

Pour donner à une couverture des marges différentes ou un fond, faites-en une page distincte dans Structure. Pour contrôler où le contenu se déplace sur la feuille suivante, utilisez les [paramètres de saut de page](/docs/fr/editor/pagination/).

<figure class="doc-sim layout-illustration" aria-label="Une page Structure peut produire plusieurs feuilles PDF">
<div class="sim-stage"><div class="sim-panel"><div class="ls-review-bar"><span class="sim-control">Disposition</span><span class="sim-control sim-focus">PDF</span><small>A4 · 3 pages</small></div><div class="ls-review-pages"><div><small>Page 1</small><div class="ls-sheet "><b>Tembuilder</b><strong>FACTURE</strong><div class="ls-lines"><i></i><i></i><i></i></div><div class="ls-lines"><i></i><i></i></div><small>01</small></div></div><div><small>Page 2</small><div class="ls-sheet "><b>Tembuilder</b><strong>CONTENU</strong><div class="ls-lines"><i></i><i></i><i></i></div><div class="ls-lines"><i></i><i></i></div><small>01</small></div></div><div><small>Page 3</small><div class="ls-sheet "><b>Tembuilder</b><strong>CONTENU</strong><div class="ls-lines"><i></i><i></i><i></i></div><div class="ls-lines"><i></i><i></i></div><small>01</small></div></div></div><div class="ls-review-footer">1 / 3 <span>‹   ›</span></div></div></div>
<figcaption>Une page Structure peut produire plusieurs feuilles PDF</figcaption>
</figure>