Z-index

La hiérarchie z-index TDS est verrouillée et non négociable. Les valeurs arbitraires hors de l’échelle sont interdites.

---

Échelle

Token	Variable CSS	Valeur	Usage
base	--tds-z-base	0	Contenu de base, layout normal
dropdown	--tds-z-dropdown	100	Menus déroulants, popovers
sticky	--tds-z-sticky	200	Navigation fixe, barres collantes
overlay	--tds-z-overlay	300	Backdrops masquants
modal	--tds-z-modal	400	Fenêtres modales
toast	--tds-z-toast	500	Notifications, toasts
tooltip	--tds-z-tooltip	600	Tooltips, info-bulles

Ordre de priorité absolue : tooltip (600) > toast (500) > modal (400) > overlay (300) > sticky (200) > dropdown (100) > base (0)

---

Règles strictes

• Les z-index arbitraires (ex: z-index: 9999) sont interdits
• sticky ne recouvre jamais une modale ou un overlay
• overlay bloque toujours l’interaction avec la page sous-jacente
• Ne pas créer de stacking contexts inutiles (transform, opacity < 1, filter, will-change)

Stacking contexts

Les propriétés CSS transform, opacity < 1, filter et will-change créent un nouveau stacking context. Cela peut rendre un z-index élevé inopérant si l’élément parent a un contexte d’empilement avec une valeur plus basse. Vérifiez toujours la hiérarchie de contextes avant de déboguer les z-index.

---

Variables CSS

--tds-z-base:     0;
--tds-z-dropdown: 100;
--tds-z-sticky:   200;
--tds-z-overlay:  300;
--tds-z-modal:    400;
--tds-z-toast:    500;
--tds-z-tooltip:  600;

/* Exemple d'usage */
.ma-modale {
  z-index: var(--tds-z-modal);    /* 400 */
  position: fixed;
}

.mon-backdrop {
  z-index: var(--tds-z-overlay);  /* 300 */
  position: fixed;
  inset: 0;
}