# Composants de mise en page

Les composants de mise en page organisent la page. Ils définissent le squelette visuel — bandeaux pleine largeur, conteneurs centrés, pistes flex et grid, cartes, barres latérales et fenêtres modales — et hébergent d'autres composants en tant que `children`. Chaque composant de mise en page accepte l'ensemble partagé `props` (rendu comme attributs HTML tels que `className`), ainsi que les modules `responsive`, `visibility` et `i18n`. Les composants de type conteneur acceptent en plus `children`.

```yaml
components:
  - type: hero
    content: Ship internal tools from config
    props: { className: 'bg-primary text-white py-24' }
  - type: container
    props: { className: 'max-w-4xl mx-auto px-6' }
    children:
      - type: grid
        props: { className: 'grid-cols-3 gap-6' }
        children:
          - { type: card, children: [{ type: text, content: 'Fast' }] }
```

## `hero`

Une section de bandeau pleine largeur, généralement le premier bloc d'une page d'accueil. Rend `content` comme titre principal et accepte `children` pour les appels à l'action et le contenu de support.

| Propriété      | Description                                                                                    |
| -------------- | ---------------------------------------------------------------------------------------------- |
| `content`      | Texte du titre principal (prend en charge la substitution `$record.*`, `$vars.*`, `$t:key`).   |
| `children`     | Composants imbriqués rendus à l'intérieur du hero (sous-titres, boutons, médias).              |
| `props`        | Attributs HTML — généralement `className` pour l'arrière-plan, le rembourrage et l'alignement. |
| `interactions` | Comportements de clic/survol/entrée (p. ex. une animation d'entrée au chargement).             |
| `responsive`   | Surcharges par point de rupture.                                                               |
| `visibility`   | Affichage conditionnel basé sur l'état d'authentification.                                     |

## `container`

Un encadreur générique de niveau bloc. Utilisez-le pour contraindre la largeur, appliquer du rembourrage et regrouper les enfants.

| Propriété  | Description                                                                    |
| ---------- | ------------------------------------------------------------------------------ |
| `element`  | Élément HTML à rendre. Par défaut `div` (p. ex. `section`, `main`, `article`). |
| `children` | Définitions de composants imbriqués.                                           |
| `content`  | Contenu inline optionnel rendu lorsqu'aucun `children` n'est présent.          |
| `props`    | Attributs HTML (p. ex. `className`).                                           |

## `flex`

Un conteneur flexbox. Disposez les enfants en ligne ou en colonne avec espacement, alignement et retour à la ligne contrôlés via les classes Tailwind dans `props.className`.

| Propriété    | Description                                                                                              |
| ------------ | -------------------------------------------------------------------------------------------------------- |
| `children`   | Composants imbriqués disposés le long de l'axe flex.                                                     |
| `props`      | Attributs HTML — définissez `className` sur `flex flex-row`/`flex-col`, `gap-*`, `items-*`, `justify-*`. |
| `responsive` | Surcharges de direction/alignement par point de rupture.                                                 |

## `grid`

Un conteneur CSS grid avec des pistes de colonnes fixes. Les enfants s'écoulent dans les cellules de la grille.

| Propriété  | Description                                                                             |
| ---------- | --------------------------------------------------------------------------------------- |
| `children` | Composants imbriqués placés dans les cellules de la grille.                             |
| `props`    | Attributs HTML — définissez `className` sur `grid grid-cols-*`, `gap-*`, `auto-rows-*`. |

## `responsiveGrid`

Une grille dont le nombre de colonnes s'adapte par point de rupture. Préférez celle-ci à `grid` lorsque vous souhaitez des colonnes responsives déclaratives sans écrire à la main les classes de point de rupture.

| Propriété    | Description                                                       |
| ------------ | ----------------------------------------------------------------- |
| `children`   | Composants imbriqués placés dans la grille responsive.            |
| `responsive` | Nombre de colonnes par point de rupture (mobile, sm, md, lg, xl). |
| `props`      | Attributs HTML (p. ex. `gap-*`).                                  |

## `card`

Une surface bordée et rembourrée pour regrouper du contenu connexe. Couramment utilisée dans les grilles et les galeries.

| Propriété      | Description                                                                |
| -------------- | -------------------------------------------------------------------------- |
| `children`     | Composants imbriqués rendus à l'intérieur du corps de la carte.            |
| `content`      | Contenu inline optionnel lorsqu'aucun `children` n'est fourni.             |
| `props`        | Attributs HTML — `className` pour l'élévation, le rayon et le rembourrage. |
| `interactions` | Effets de clic/survol (p. ex. élévation au survol, navigation au clic).    |

## `sidebar`

Un panneau de navigation vertical, généralement associé à une région principale `container` pour former une mise en page de type app-shell. Peut être composée statiquement à partir de `children` ou liée à des données via la config `layout.sidebar` de la page (voir [Présentation des pages → Mises en page et barres latérales](/fr/docs/pages-overview#mises-en-page-et-barres-latérales)).

| Propriété    | Description                                                                                 |
| ------------ | ------------------------------------------------------------------------------------------- |
| `children`   | Éléments et sections de navigation rendus comme menu vertical.                              |
| `props`      | Attributs HTML — `className` pour la largeur et le positionnement (panneau à largeur fixe). |
| `visibility` | Affichage conditionnel (p. ex. masquer pour les utilisateurs non authentifiés).             |

## `modal`

Une superposition de dialogue ouverte par un déclencheur d'interaction. Le composant de mise en page `modal` contient le corps du dialogue ; ouvrez-le via `interactions.onClick` d'un bouton avec `modalId`. (Pour les superpositions de type confirmation, voir [`dialog`/`alert-dialog`](/fr/docs/overlay-components).)

| Propriété  | Description                                                             |
| ---------- | ----------------------------------------------------------------------- |
| `id`       | Identifiant ciblé par un déclencheur d'ouverture (`onClick.modalId`).   |
| `children` | Composants imbriqués rendus à l'intérieur du panneau modal.             |
| `props`    | Attributs HTML (p. ex. `className` pour le dimensionnement du panneau). |

Cliquer sur l'arrière-plan ou appuyer sur Échap ferme la fenêtre modale ; le focus est piégé dans la fenêtre modale tant qu'elle est ouverte.

## `tab-panel`

Un panneau unique au sein d'un conteneur `tabs`. Chaque panneau a un libellé de déclencheur et son propre contenu/enfants. Voir [`tabs`](/fr/docs/navigation-components#tabs) pour le conteneur.

| Propriété  | Description                                                                         |
| ---------- | ----------------------------------------------------------------------------------- |
| `label`    | Texte affiché sur le bouton déclencheur de l'onglet.                                |
| `content`  | Contenu textuel inline du panneau (omettre lorsque le panneau rend des `children`). |
| `children` | Composants imbriqués rendus à l'intérieur du panneau.                               |

## `divider`

Un trait horizontal séparant des sections de contenu.

| Propriété     | Description                                          |
| ------------- | ---------------------------------------------------- |
| `props.style` | Style de ligne : `solid`, `dashed`, ou `dotted`.     |
| `props.label` | Texte centré rendu dans la ligne du séparateur.      |
| `props`       | Attributs HTML supplémentaires (p. ex. `className`). |

## `spacer`

Espace blanc vertical entre les blocs.

| Propriété    | Description                                          |
| ------------ | ---------------------------------------------------- |
| `props.size` | Préréglage d'espacement : `sm`, `md`, `lg`, ou `xl`. |
| `props`      | Attributs HTML supplémentaires (p. ex. `className`). |

```yaml
components:
  - { type: text, tag: h2, content: 'Section A' }
  - { type: spacer, props: { size: lg } }
  - { type: divider, props: { style: dashed, label: 'or' } }
  - { type: text, tag: h2, content: 'Section B' }
```

## Pages connexes

- [Présentation des pages](/fr/docs/pages-overview) — structure de page, routage et modèle de composants.
- [Composants de contenu](/fr/docs/content-components) — texte, code, encarts, accordéons.
- [Composants de navigation](/fr/docs/navigation-components) — onglets, fils d'Ariane, menus.
- [Composants de superposition](/fr/docs/overlay-components) — dialogues, tiroirs, popovers.
- [Thème](/fr/docs/theme) — jetons de design consommés par le style `className`.