---
url: https://brand.okrado.com/fr/patterns/overlays/
title: Surcouches
description: "Un seul contrat pour toute couche qui flotte : niveaux, tailles, empilement, fermeture, focus et mouvement."
kind: reference
owner: hmdmsd
updated: 2026-11-03
review_by: 2027-02-28
audience:
  - designer
  - developer
  - agent
---

# Surcouches

> Un seul contrat pour toute couche qui flotte : niveaux, tailles, empilement, fermeture, focus et mouvement.

Chaque surcouche suit un seul contrat (ADR-0108), donc un menu dans une boîte de dialogue et une notification au-dessus d’un tiroir se comportent partout de la même façon.

## Niveaux et tailles

Les niveaux viennent de tokens, pas de l’ordre du DOM. Les boîtes de dialogue font 440, 560 et 720 px, plein écran sous 640 px. Les tiroirs font 340, 480 et 640 px, depuis la fin de la ligne (en miroir de droite à gauche).

| Token | Variable CSS | Valeur |
| ----- | ------------ | ------ |

| Token | Variable CSS | Valeur |
| ----- | ------------ | ------ |

## Profondeur de pile

Deux au maximum. Une boîte de dialogue peut s’ouvrir sur un tiroir ; une boîte d’alerte peut s’ouvrir sur l’un ou l’autre pour une suppression ou un abandon ; jamais un troisième niveau. Une notification n’ouvre jamais de modale. Une infobulle ne vit jamais dans le piège de focus d’une modale.

## Fermeture

| Surcouche                          | Échap        | Clic à l’extérieur           | Bouton de fermeture |
| ---------------------------------- | ------------ | ---------------------------- | ------------------- |
| Dialogue informatif, popover, menu | oui          | oui                          | oui                 |
| Dialogue avec champs               | oui, protégé | non                          | oui, protégé        |
| Boîte d’alerte                     | oui (annule) | non                          | facultatif          |
| Tiroir et feuille                  | oui          | oui, sauf formulaire modifié | oui                 |

Un formulaire modifié empêche la fermeture et demande « Abandonner les modifications ? », avec « Continuer à modifier » au focus.

## Focus

Le focus initial va au premier élément atteignable, au titre pour un contenu long, et au bouton le moins destructeur pour une action irréversible. Le focus revient au déclencheur à la fermeture. Une modale montre toujours un contrôle de fermeture ; l’anneau de focus fait 2 px.

## Mouvement

L’infobulle utilise `micro` ; le menu, le popover et la notification utilisent `standard` ; la boîte de dialogue, le tiroir et la feuille utilisent `panel`. Les sorties durent 0,8 fois l’entrée. Le mouvement réduit ne garde qu’un fondu.

## Pages

[Dialogue](https://brand.okrado.com/fr/patterns/dialog/), [Boîte d’alerte](https://brand.okrado.com/fr/patterns/alert-dialog/), [Tiroir](https://brand.okrado.com/fr/patterns/drawer/), [Popover](https://brand.okrado.com/fr/patterns/popover/), [Menu](https://brand.okrado.com/fr/patterns/menu/), [Infobulle](https://brand.okrado.com/fr/patterns/tooltip/), [Notification](https://brand.okrado.com/fr/patterns/toast/), [Raccourcis clavier](https://brand.okrado.com/fr/patterns/shortcuts/).