/* =============================================================
   Les Cerises — Mise en page (utilitaire partagé)
   -------------------------------------------------------------
   .site-container : LA zone de travail standard (DESIGN_SYSTEM.md §5).
   Plafonnée à --content-max, centrée, gouttière --content-pad.

   Chaque section structurante (en-tête, bandeaux de fond, contenu, pied de
   page) s'enveloppe dans SA PROPRE instance de .site-container, pour que
   tous les éléments — y compris les fonds de couleur — s'alignent au pixel
   près. Piège évité : si un bandeau de fond (ex. un hero) gère lui-même son
   max-width/padding au lieu d'être enveloppé, son FOND peint jusqu'à son
   propre bord (le padding ne fait qu'écarter son contenu), alors qu'une
   carte enveloppée dans .site-container (ex. l'en-tête) a son bord même
   inset par la gouttière — d'où un désalignement visible entre les deux.
   La règle : TOUJOURS envelopper, jamais gérer max-width/gouttière en interne.

   Ne consomme QUE des tokens (tokens.css doit être chargé avant).
   Source unique : packages/ui/ — copie dans chaque app via `make sync`.
   ============================================================= */
.site-container {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--content-pad);
}