/* Densité — les espacements suivent la taille d'affichage.

   MudBlazor fige ses utilitaires d'espacement en pixels (`.pa-4 { padding: 16px }`) : à 80 %
   le texte rétrécissait mais les cartes gardaient leurs 16 px de padding, et rien ne devenait
   plus dense. Ce fichier réécrit la grille d'espacement (`ma-*`, `pa-*`, `gap-*`), les gouttières
   MudGrid et les paddings des conteneurs MudBlazor en `calc(… * var(--g-scale))`.

   --g-scale vaut 1 en « confortable » : à cette taille le rendu est au pixel près celui de
   MudBlazor, ce fichier ne change rien. Il n'agit qu'en « standard » (0,9) et « compact » (0,8).

   Contrainte de cascade : à charger APRÈS MudBlazor.min.css, et les déclarations doivent porter
   `!important` puisque celles de MudBlazor le portent déjà.

   Ce que ce fichier ne touche pas, volontairement : les hauteurs déclarées en pixels (barre
   d'app, champs de saisie, tuiles) et les paddings de contrôles. Réduire une hauteur de champ
   demande de suivre la typographie interne du composant — c'est le rôle de `Dense` côté
   MudBlazor, pas d'une règle globale.

   GÉNÉRÉ — voir la note en fin de fichier avant d'éditer à la main. */

/* ── Marges ── */

.mt-1, .my-1 { margin-top: calc(4px * var(--g-scale)) !important; }
.mr-1, .mx-1 { margin-right: calc(4px * var(--g-scale)) !important; }
.ml-1, .mx-1 { margin-left: calc(4px * var(--g-scale)) !important; }
.mb-1, .my-1 { margin-bottom: calc(4px * var(--g-scale)) !important; }
.ms-1 { margin-inline-start: calc(4px * var(--g-scale)) !important; }
.me-1 { margin-inline-end: calc(4px * var(--g-scale)) !important; }
.ma-1 { margin: calc(4px * var(--g-scale)) !important; }

.mt-2, .my-2 { margin-top: calc(8px * var(--g-scale)) !important; }
.mr-2, .mx-2 { margin-right: calc(8px * var(--g-scale)) !important; }
.ml-2, .mx-2 { margin-left: calc(8px * var(--g-scale)) !important; }
.mb-2, .my-2 { margin-bottom: calc(8px * var(--g-scale)) !important; }
.ms-2 { margin-inline-start: calc(8px * var(--g-scale)) !important; }
.me-2 { margin-inline-end: calc(8px * var(--g-scale)) !important; }
.ma-2 { margin: calc(8px * var(--g-scale)) !important; }

.mt-3, .my-3 { margin-top: calc(12px * var(--g-scale)) !important; }
.mr-3, .mx-3 { margin-right: calc(12px * var(--g-scale)) !important; }
.ml-3, .mx-3 { margin-left: calc(12px * var(--g-scale)) !important; }
.mb-3, .my-3 { margin-bottom: calc(12px * var(--g-scale)) !important; }
.ms-3 { margin-inline-start: calc(12px * var(--g-scale)) !important; }
.me-3 { margin-inline-end: calc(12px * var(--g-scale)) !important; }
.ma-3 { margin: calc(12px * var(--g-scale)) !important; }

.mt-4, .my-4 { margin-top: calc(16px * var(--g-scale)) !important; }
.mr-4, .mx-4 { margin-right: calc(16px * var(--g-scale)) !important; }
.ml-4, .mx-4 { margin-left: calc(16px * var(--g-scale)) !important; }
.mb-4, .my-4 { margin-bottom: calc(16px * var(--g-scale)) !important; }
.ms-4 { margin-inline-start: calc(16px * var(--g-scale)) !important; }
.me-4 { margin-inline-end: calc(16px * var(--g-scale)) !important; }
.ma-4 { margin: calc(16px * var(--g-scale)) !important; }

.mt-5, .my-5 { margin-top: calc(20px * var(--g-scale)) !important; }
.mr-5, .mx-5 { margin-right: calc(20px * var(--g-scale)) !important; }
.ml-5, .mx-5 { margin-left: calc(20px * var(--g-scale)) !important; }
.mb-5, .my-5 { margin-bottom: calc(20px * var(--g-scale)) !important; }
.ms-5 { margin-inline-start: calc(20px * var(--g-scale)) !important; }
.me-5 { margin-inline-end: calc(20px * var(--g-scale)) !important; }
.ma-5 { margin: calc(20px * var(--g-scale)) !important; }

.mt-6, .my-6 { margin-top: calc(24px * var(--g-scale)) !important; }
.mr-6, .mx-6 { margin-right: calc(24px * var(--g-scale)) !important; }
.ml-6, .mx-6 { margin-left: calc(24px * var(--g-scale)) !important; }
.mb-6, .my-6 { margin-bottom: calc(24px * var(--g-scale)) !important; }
.ms-6 { margin-inline-start: calc(24px * var(--g-scale)) !important; }
.me-6 { margin-inline-end: calc(24px * var(--g-scale)) !important; }
.ma-6 { margin: calc(24px * var(--g-scale)) !important; }

.mt-7, .my-7 { margin-top: calc(28px * var(--g-scale)) !important; }
.mr-7, .mx-7 { margin-right: calc(28px * var(--g-scale)) !important; }
.ml-7, .mx-7 { margin-left: calc(28px * var(--g-scale)) !important; }
.mb-7, .my-7 { margin-bottom: calc(28px * var(--g-scale)) !important; }
.ms-7 { margin-inline-start: calc(28px * var(--g-scale)) !important; }
.me-7 { margin-inline-end: calc(28px * var(--g-scale)) !important; }
.ma-7 { margin: calc(28px * var(--g-scale)) !important; }

.mt-8, .my-8 { margin-top: calc(32px * var(--g-scale)) !important; }
.mr-8, .mx-8 { margin-right: calc(32px * var(--g-scale)) !important; }
.ml-8, .mx-8 { margin-left: calc(32px * var(--g-scale)) !important; }
.mb-8, .my-8 { margin-bottom: calc(32px * var(--g-scale)) !important; }
.ms-8 { margin-inline-start: calc(32px * var(--g-scale)) !important; }
.me-8 { margin-inline-end: calc(32px * var(--g-scale)) !important; }
.ma-8 { margin: calc(32px * var(--g-scale)) !important; }

.mt-9, .my-9 { margin-top: calc(36px * var(--g-scale)) !important; }
.mr-9, .mx-9 { margin-right: calc(36px * var(--g-scale)) !important; }
.ml-9, .mx-9 { margin-left: calc(36px * var(--g-scale)) !important; }
.mb-9, .my-9 { margin-bottom: calc(36px * var(--g-scale)) !important; }
.ms-9 { margin-inline-start: calc(36px * var(--g-scale)) !important; }
.me-9 { margin-inline-end: calc(36px * var(--g-scale)) !important; }
.ma-9 { margin: calc(36px * var(--g-scale)) !important; }

.mt-10, .my-10 { margin-top: calc(40px * var(--g-scale)) !important; }
.mr-10, .mx-10 { margin-right: calc(40px * var(--g-scale)) !important; }
.ml-10, .mx-10 { margin-left: calc(40px * var(--g-scale)) !important; }
.mb-10, .my-10 { margin-bottom: calc(40px * var(--g-scale)) !important; }
.ms-10 { margin-inline-start: calc(40px * var(--g-scale)) !important; }
.me-10 { margin-inline-end: calc(40px * var(--g-scale)) !important; }
.ma-10 { margin: calc(40px * var(--g-scale)) !important; }

.mt-11, .my-11 { margin-top: calc(44px * var(--g-scale)) !important; }
.mr-11, .mx-11 { margin-right: calc(44px * var(--g-scale)) !important; }
.ml-11, .mx-11 { margin-left: calc(44px * var(--g-scale)) !important; }
.mb-11, .my-11 { margin-bottom: calc(44px * var(--g-scale)) !important; }
.ms-11 { margin-inline-start: calc(44px * var(--g-scale)) !important; }
.me-11 { margin-inline-end: calc(44px * var(--g-scale)) !important; }
.ma-11 { margin: calc(44px * var(--g-scale)) !important; }

.mt-12, .my-12 { margin-top: calc(48px * var(--g-scale)) !important; }
.mr-12, .mx-12 { margin-right: calc(48px * var(--g-scale)) !important; }
.ml-12, .mx-12 { margin-left: calc(48px * var(--g-scale)) !important; }
.mb-12, .my-12 { margin-bottom: calc(48px * var(--g-scale)) !important; }
.ms-12 { margin-inline-start: calc(48px * var(--g-scale)) !important; }
.me-12 { margin-inline-end: calc(48px * var(--g-scale)) !important; }
.ma-12 { margin: calc(48px * var(--g-scale)) !important; }

.mt-13, .my-13 { margin-top: calc(52px * var(--g-scale)) !important; }
.mr-13, .mx-13 { margin-right: calc(52px * var(--g-scale)) !important; }
.ml-13, .mx-13 { margin-left: calc(52px * var(--g-scale)) !important; }
.mb-13, .my-13 { margin-bottom: calc(52px * var(--g-scale)) !important; }
.ms-13 { margin-inline-start: calc(52px * var(--g-scale)) !important; }
.me-13 { margin-inline-end: calc(52px * var(--g-scale)) !important; }
.ma-13 { margin: calc(52px * var(--g-scale)) !important; }

.mt-14, .my-14 { margin-top: calc(56px * var(--g-scale)) !important; }
.mr-14, .mx-14 { margin-right: calc(56px * var(--g-scale)) !important; }
.ml-14, .mx-14 { margin-left: calc(56px * var(--g-scale)) !important; }
.mb-14, .my-14 { margin-bottom: calc(56px * var(--g-scale)) !important; }
.ms-14 { margin-inline-start: calc(56px * var(--g-scale)) !important; }
.me-14 { margin-inline-end: calc(56px * var(--g-scale)) !important; }
.ma-14 { margin: calc(56px * var(--g-scale)) !important; }

.mt-15, .my-15 { margin-top: calc(60px * var(--g-scale)) !important; }
.mr-15, .mx-15 { margin-right: calc(60px * var(--g-scale)) !important; }
.ml-15, .mx-15 { margin-left: calc(60px * var(--g-scale)) !important; }
.mb-15, .my-15 { margin-bottom: calc(60px * var(--g-scale)) !important; }
.ms-15 { margin-inline-start: calc(60px * var(--g-scale)) !important; }
.me-15 { margin-inline-end: calc(60px * var(--g-scale)) !important; }
.ma-15 { margin: calc(60px * var(--g-scale)) !important; }

.mt-16, .my-16 { margin-top: calc(64px * var(--g-scale)) !important; }
.mr-16, .mx-16 { margin-right: calc(64px * var(--g-scale)) !important; }
.ml-16, .mx-16 { margin-left: calc(64px * var(--g-scale)) !important; }
.mb-16, .my-16 { margin-bottom: calc(64px * var(--g-scale)) !important; }
.ms-16 { margin-inline-start: calc(64px * var(--g-scale)) !important; }
.me-16 { margin-inline-end: calc(64px * var(--g-scale)) !important; }
.ma-16 { margin: calc(64px * var(--g-scale)) !important; }

.mt-17, .my-17 { margin-top: calc(68px * var(--g-scale)) !important; }
.mr-17, .mx-17 { margin-right: calc(68px * var(--g-scale)) !important; }
.ml-17, .mx-17 { margin-left: calc(68px * var(--g-scale)) !important; }
.mb-17, .my-17 { margin-bottom: calc(68px * var(--g-scale)) !important; }
.ms-17 { margin-inline-start: calc(68px * var(--g-scale)) !important; }
.me-17 { margin-inline-end: calc(68px * var(--g-scale)) !important; }
.ma-17 { margin: calc(68px * var(--g-scale)) !important; }

.mt-18, .my-18 { margin-top: calc(72px * var(--g-scale)) !important; }
.mr-18, .mx-18 { margin-right: calc(72px * var(--g-scale)) !important; }
.ml-18, .mx-18 { margin-left: calc(72px * var(--g-scale)) !important; }
.mb-18, .my-18 { margin-bottom: calc(72px * var(--g-scale)) !important; }
.ms-18 { margin-inline-start: calc(72px * var(--g-scale)) !important; }
.me-18 { margin-inline-end: calc(72px * var(--g-scale)) !important; }
.ma-18 { margin: calc(72px * var(--g-scale)) !important; }

.mt-19, .my-19 { margin-top: calc(76px * var(--g-scale)) !important; }
.mr-19, .mx-19 { margin-right: calc(76px * var(--g-scale)) !important; }
.ml-19, .mx-19 { margin-left: calc(76px * var(--g-scale)) !important; }
.mb-19, .my-19 { margin-bottom: calc(76px * var(--g-scale)) !important; }
.ms-19 { margin-inline-start: calc(76px * var(--g-scale)) !important; }
.me-19 { margin-inline-end: calc(76px * var(--g-scale)) !important; }
.ma-19 { margin: calc(76px * var(--g-scale)) !important; }

.mt-20, .my-20 { margin-top: calc(80px * var(--g-scale)) !important; }
.mr-20, .mx-20 { margin-right: calc(80px * var(--g-scale)) !important; }
.ml-20, .mx-20 { margin-left: calc(80px * var(--g-scale)) !important; }
.mb-20, .my-20 { margin-bottom: calc(80px * var(--g-scale)) !important; }
.ms-20 { margin-inline-start: calc(80px * var(--g-scale)) !important; }
.me-20 { margin-inline-end: calc(80px * var(--g-scale)) !important; }
.ma-20 { margin: calc(80px * var(--g-scale)) !important; }

.mt-n1, .my-n1 { margin-top: calc(-4px * var(--g-scale)) !important; }
.mr-n1, .mx-n1 { margin-right: calc(-4px * var(--g-scale)) !important; }
.ml-n1, .mx-n1 { margin-left: calc(-4px * var(--g-scale)) !important; }
.mb-n1, .my-n1 { margin-bottom: calc(-4px * var(--g-scale)) !important; }
.ms-n1 { margin-inline-start: calc(-4px * var(--g-scale)) !important; }
.me-n1 { margin-inline-end: calc(-4px * var(--g-scale)) !important; }
.ma-n1 { margin: calc(-4px * var(--g-scale)) !important; }

.mt-n2, .my-n2 { margin-top: calc(-8px * var(--g-scale)) !important; }
.mr-n2, .mx-n2 { margin-right: calc(-8px * var(--g-scale)) !important; }
.ml-n2, .mx-n2 { margin-left: calc(-8px * var(--g-scale)) !important; }
.mb-n2, .my-n2 { margin-bottom: calc(-8px * var(--g-scale)) !important; }
.ms-n2 { margin-inline-start: calc(-8px * var(--g-scale)) !important; }
.me-n2 { margin-inline-end: calc(-8px * var(--g-scale)) !important; }
.ma-n2 { margin: calc(-8px * var(--g-scale)) !important; }

.mt-n3, .my-n3 { margin-top: calc(-12px * var(--g-scale)) !important; }
.mr-n3, .mx-n3 { margin-right: calc(-12px * var(--g-scale)) !important; }
.ml-n3, .mx-n3 { margin-left: calc(-12px * var(--g-scale)) !important; }
.mb-n3, .my-n3 { margin-bottom: calc(-12px * var(--g-scale)) !important; }
.ms-n3 { margin-inline-start: calc(-12px * var(--g-scale)) !important; }
.me-n3 { margin-inline-end: calc(-12px * var(--g-scale)) !important; }
.ma-n3 { margin: calc(-12px * var(--g-scale)) !important; }

.mt-n4, .my-n4 { margin-top: calc(-16px * var(--g-scale)) !important; }
.mr-n4, .mx-n4 { margin-right: calc(-16px * var(--g-scale)) !important; }
.ml-n4, .mx-n4 { margin-left: calc(-16px * var(--g-scale)) !important; }
.mb-n4, .my-n4 { margin-bottom: calc(-16px * var(--g-scale)) !important; }
.ms-n4 { margin-inline-start: calc(-16px * var(--g-scale)) !important; }
.me-n4 { margin-inline-end: calc(-16px * var(--g-scale)) !important; }
.ma-n4 { margin: calc(-16px * var(--g-scale)) !important; }

.mt-n5, .my-n5 { margin-top: calc(-20px * var(--g-scale)) !important; }
.mr-n5, .mx-n5 { margin-right: calc(-20px * var(--g-scale)) !important; }
.ml-n5, .mx-n5 { margin-left: calc(-20px * var(--g-scale)) !important; }
.mb-n5, .my-n5 { margin-bottom: calc(-20px * var(--g-scale)) !important; }
.ms-n5 { margin-inline-start: calc(-20px * var(--g-scale)) !important; }
.me-n5 { margin-inline-end: calc(-20px * var(--g-scale)) !important; }
.ma-n5 { margin: calc(-20px * var(--g-scale)) !important; }

.mt-n6, .my-n6 { margin-top: calc(-24px * var(--g-scale)) !important; }
.mr-n6, .mx-n6 { margin-right: calc(-24px * var(--g-scale)) !important; }
.ml-n6, .mx-n6 { margin-left: calc(-24px * var(--g-scale)) !important; }
.mb-n6, .my-n6 { margin-bottom: calc(-24px * var(--g-scale)) !important; }
.ms-n6 { margin-inline-start: calc(-24px * var(--g-scale)) !important; }
.me-n6 { margin-inline-end: calc(-24px * var(--g-scale)) !important; }
.ma-n6 { margin: calc(-24px * var(--g-scale)) !important; }

.mt-n7, .my-n7 { margin-top: calc(-28px * var(--g-scale)) !important; }
.mr-n7, .mx-n7 { margin-right: calc(-28px * var(--g-scale)) !important; }
.ml-n7, .mx-n7 { margin-left: calc(-28px * var(--g-scale)) !important; }
.mb-n7, .my-n7 { margin-bottom: calc(-28px * var(--g-scale)) !important; }
.ms-n7 { margin-inline-start: calc(-28px * var(--g-scale)) !important; }
.me-n7 { margin-inline-end: calc(-28px * var(--g-scale)) !important; }
.ma-n7 { margin: calc(-28px * var(--g-scale)) !important; }

.mt-n8, .my-n8 { margin-top: calc(-32px * var(--g-scale)) !important; }
.mr-n8, .mx-n8 { margin-right: calc(-32px * var(--g-scale)) !important; }
.ml-n8, .mx-n8 { margin-left: calc(-32px * var(--g-scale)) !important; }
.mb-n8, .my-n8 { margin-bottom: calc(-32px * var(--g-scale)) !important; }
.ms-n8 { margin-inline-start: calc(-32px * var(--g-scale)) !important; }
.me-n8 { margin-inline-end: calc(-32px * var(--g-scale)) !important; }
.ma-n8 { margin: calc(-32px * var(--g-scale)) !important; }

.mt-n9, .my-n9 { margin-top: calc(-36px * var(--g-scale)) !important; }
.mr-n9, .mx-n9 { margin-right: calc(-36px * var(--g-scale)) !important; }
.ml-n9, .mx-n9 { margin-left: calc(-36px * var(--g-scale)) !important; }
.mb-n9, .my-n9 { margin-bottom: calc(-36px * var(--g-scale)) !important; }
.ms-n9 { margin-inline-start: calc(-36px * var(--g-scale)) !important; }
.me-n9 { margin-inline-end: calc(-36px * var(--g-scale)) !important; }
.ma-n9 { margin: calc(-36px * var(--g-scale)) !important; }

.mt-n10, .my-n10 { margin-top: calc(-40px * var(--g-scale)) !important; }
.mr-n10, .mx-n10 { margin-right: calc(-40px * var(--g-scale)) !important; }
.ml-n10, .mx-n10 { margin-left: calc(-40px * var(--g-scale)) !important; }
.mb-n10, .my-n10 { margin-bottom: calc(-40px * var(--g-scale)) !important; }
.ms-n10 { margin-inline-start: calc(-40px * var(--g-scale)) !important; }
.me-n10 { margin-inline-end: calc(-40px * var(--g-scale)) !important; }
.ma-n10 { margin: calc(-40px * var(--g-scale)) !important; }

.mt-n11, .my-n11 { margin-top: calc(-44px * var(--g-scale)) !important; }
.mr-n11, .mx-n11 { margin-right: calc(-44px * var(--g-scale)) !important; }
.ml-n11, .mx-n11 { margin-left: calc(-44px * var(--g-scale)) !important; }
.mb-n11, .my-n11 { margin-bottom: calc(-44px * var(--g-scale)) !important; }
.ms-n11 { margin-inline-start: calc(-44px * var(--g-scale)) !important; }
.me-n11 { margin-inline-end: calc(-44px * var(--g-scale)) !important; }
.ma-n11 { margin: calc(-44px * var(--g-scale)) !important; }

.mt-n12, .my-n12 { margin-top: calc(-48px * var(--g-scale)) !important; }
.mr-n12, .mx-n12 { margin-right: calc(-48px * var(--g-scale)) !important; }
.ml-n12, .mx-n12 { margin-left: calc(-48px * var(--g-scale)) !important; }
.mb-n12, .my-n12 { margin-bottom: calc(-48px * var(--g-scale)) !important; }
.ms-n12 { margin-inline-start: calc(-48px * var(--g-scale)) !important; }
.me-n12 { margin-inline-end: calc(-48px * var(--g-scale)) !important; }
.ma-n12 { margin: calc(-48px * var(--g-scale)) !important; }

.mt-n13, .my-n13 { margin-top: calc(-52px * var(--g-scale)) !important; }
.mr-n13, .mx-n13 { margin-right: calc(-52px * var(--g-scale)) !important; }
.ml-n13, .mx-n13 { margin-left: calc(-52px * var(--g-scale)) !important; }
.mb-n13, .my-n13 { margin-bottom: calc(-52px * var(--g-scale)) !important; }
.ms-n13 { margin-inline-start: calc(-52px * var(--g-scale)) !important; }
.me-n13 { margin-inline-end: calc(-52px * var(--g-scale)) !important; }
.ma-n13 { margin: calc(-52px * var(--g-scale)) !important; }

.mt-n14, .my-n14 { margin-top: calc(-56px * var(--g-scale)) !important; }
.mr-n14, .mx-n14 { margin-right: calc(-56px * var(--g-scale)) !important; }
.ml-n14, .mx-n14 { margin-left: calc(-56px * var(--g-scale)) !important; }
.mb-n14, .my-n14 { margin-bottom: calc(-56px * var(--g-scale)) !important; }
.ms-n14 { margin-inline-start: calc(-56px * var(--g-scale)) !important; }
.me-n14 { margin-inline-end: calc(-56px * var(--g-scale)) !important; }
.ma-n14 { margin: calc(-56px * var(--g-scale)) !important; }

.mt-n15, .my-n15 { margin-top: calc(-60px * var(--g-scale)) !important; }
.mr-n15, .mx-n15 { margin-right: calc(-60px * var(--g-scale)) !important; }
.ml-n15, .mx-n15 { margin-left: calc(-60px * var(--g-scale)) !important; }
.mb-n15, .my-n15 { margin-bottom: calc(-60px * var(--g-scale)) !important; }
.ms-n15 { margin-inline-start: calc(-60px * var(--g-scale)) !important; }
.me-n15 { margin-inline-end: calc(-60px * var(--g-scale)) !important; }
.ma-n15 { margin: calc(-60px * var(--g-scale)) !important; }

.mt-n16, .my-n16 { margin-top: calc(-64px * var(--g-scale)) !important; }
.mr-n16, .mx-n16 { margin-right: calc(-64px * var(--g-scale)) !important; }
.ml-n16, .mx-n16 { margin-left: calc(-64px * var(--g-scale)) !important; }
.mb-n16, .my-n16 { margin-bottom: calc(-64px * var(--g-scale)) !important; }
.ms-n16 { margin-inline-start: calc(-64px * var(--g-scale)) !important; }
.me-n16 { margin-inline-end: calc(-64px * var(--g-scale)) !important; }
.ma-n16 { margin: calc(-64px * var(--g-scale)) !important; }

.mt-n17, .my-n17 { margin-top: calc(-68px * var(--g-scale)) !important; }
.mr-n17, .mx-n17 { margin-right: calc(-68px * var(--g-scale)) !important; }
.ml-n17, .mx-n17 { margin-left: calc(-68px * var(--g-scale)) !important; }
.mb-n17, .my-n17 { margin-bottom: calc(-68px * var(--g-scale)) !important; }
.ms-n17 { margin-inline-start: calc(-68px * var(--g-scale)) !important; }
.me-n17 { margin-inline-end: calc(-68px * var(--g-scale)) !important; }
.ma-n17 { margin: calc(-68px * var(--g-scale)) !important; }

.mt-n18, .my-n18 { margin-top: calc(-72px * var(--g-scale)) !important; }
.mr-n18, .mx-n18 { margin-right: calc(-72px * var(--g-scale)) !important; }
.ml-n18, .mx-n18 { margin-left: calc(-72px * var(--g-scale)) !important; }
.mb-n18, .my-n18 { margin-bottom: calc(-72px * var(--g-scale)) !important; }
.ms-n18 { margin-inline-start: calc(-72px * var(--g-scale)) !important; }
.me-n18 { margin-inline-end: calc(-72px * var(--g-scale)) !important; }
.ma-n18 { margin: calc(-72px * var(--g-scale)) !important; }

.mt-n19, .my-n19 { margin-top: calc(-76px * var(--g-scale)) !important; }
.mr-n19, .mx-n19 { margin-right: calc(-76px * var(--g-scale)) !important; }
.ml-n19, .mx-n19 { margin-left: calc(-76px * var(--g-scale)) !important; }
.mb-n19, .my-n19 { margin-bottom: calc(-76px * var(--g-scale)) !important; }
.ms-n19 { margin-inline-start: calc(-76px * var(--g-scale)) !important; }
.me-n19 { margin-inline-end: calc(-76px * var(--g-scale)) !important; }
.ma-n19 { margin: calc(-76px * var(--g-scale)) !important; }

.mt-n20, .my-n20 { margin-top: calc(-80px * var(--g-scale)) !important; }
.mr-n20, .mx-n20 { margin-right: calc(-80px * var(--g-scale)) !important; }
.ml-n20, .mx-n20 { margin-left: calc(-80px * var(--g-scale)) !important; }
.mb-n20, .my-n20 { margin-bottom: calc(-80px * var(--g-scale)) !important; }
.ms-n20 { margin-inline-start: calc(-80px * var(--g-scale)) !important; }
.me-n20 { margin-inline-end: calc(-80px * var(--g-scale)) !important; }
.ma-n20 { margin: calc(-80px * var(--g-scale)) !important; }

/* ── Paddings ── */

.pt-1, .py-1 { padding-top: calc(4px * var(--g-scale)) !important; }
.pr-1, .px-1 { padding-right: calc(4px * var(--g-scale)) !important; }
.pl-1, .px-1 { padding-left: calc(4px * var(--g-scale)) !important; }
.pb-1, .py-1 { padding-bottom: calc(4px * var(--g-scale)) !important; }
.ps-1 { padding-inline-start: calc(4px * var(--g-scale)) !important; }
.pe-1 { padding-inline-end: calc(4px * var(--g-scale)) !important; }
.pa-1 { padding: calc(4px * var(--g-scale)) !important; }

.pt-2, .py-2 { padding-top: calc(8px * var(--g-scale)) !important; }
.pr-2, .px-2 { padding-right: calc(8px * var(--g-scale)) !important; }
.pl-2, .px-2 { padding-left: calc(8px * var(--g-scale)) !important; }
.pb-2, .py-2 { padding-bottom: calc(8px * var(--g-scale)) !important; }
.ps-2 { padding-inline-start: calc(8px * var(--g-scale)) !important; }
.pe-2 { padding-inline-end: calc(8px * var(--g-scale)) !important; }
.pa-2 { padding: calc(8px * var(--g-scale)) !important; }

.pt-3, .py-3 { padding-top: calc(12px * var(--g-scale)) !important; }
.pr-3, .px-3 { padding-right: calc(12px * var(--g-scale)) !important; }
.pl-3, .px-3 { padding-left: calc(12px * var(--g-scale)) !important; }
.pb-3, .py-3 { padding-bottom: calc(12px * var(--g-scale)) !important; }
.ps-3 { padding-inline-start: calc(12px * var(--g-scale)) !important; }
.pe-3 { padding-inline-end: calc(12px * var(--g-scale)) !important; }
.pa-3 { padding: calc(12px * var(--g-scale)) !important; }

.pt-4, .py-4 { padding-top: calc(16px * var(--g-scale)) !important; }
.pr-4, .px-4 { padding-right: calc(16px * var(--g-scale)) !important; }
.pl-4, .px-4 { padding-left: calc(16px * var(--g-scale)) !important; }
.pb-4, .py-4 { padding-bottom: calc(16px * var(--g-scale)) !important; }
.ps-4 { padding-inline-start: calc(16px * var(--g-scale)) !important; }
.pe-4 { padding-inline-end: calc(16px * var(--g-scale)) !important; }
.pa-4 { padding: calc(16px * var(--g-scale)) !important; }

.pt-5, .py-5 { padding-top: calc(20px * var(--g-scale)) !important; }
.pr-5, .px-5 { padding-right: calc(20px * var(--g-scale)) !important; }
.pl-5, .px-5 { padding-left: calc(20px * var(--g-scale)) !important; }
.pb-5, .py-5 { padding-bottom: calc(20px * var(--g-scale)) !important; }
.ps-5 { padding-inline-start: calc(20px * var(--g-scale)) !important; }
.pe-5 { padding-inline-end: calc(20px * var(--g-scale)) !important; }
.pa-5 { padding: calc(20px * var(--g-scale)) !important; }

.pt-6, .py-6 { padding-top: calc(24px * var(--g-scale)) !important; }
.pr-6, .px-6 { padding-right: calc(24px * var(--g-scale)) !important; }
.pl-6, .px-6 { padding-left: calc(24px * var(--g-scale)) !important; }
.pb-6, .py-6 { padding-bottom: calc(24px * var(--g-scale)) !important; }
.ps-6 { padding-inline-start: calc(24px * var(--g-scale)) !important; }
.pe-6 { padding-inline-end: calc(24px * var(--g-scale)) !important; }
.pa-6 { padding: calc(24px * var(--g-scale)) !important; }

.pt-7, .py-7 { padding-top: calc(28px * var(--g-scale)) !important; }
.pr-7, .px-7 { padding-right: calc(28px * var(--g-scale)) !important; }
.pl-7, .px-7 { padding-left: calc(28px * var(--g-scale)) !important; }
.pb-7, .py-7 { padding-bottom: calc(28px * var(--g-scale)) !important; }
.ps-7 { padding-inline-start: calc(28px * var(--g-scale)) !important; }
.pe-7 { padding-inline-end: calc(28px * var(--g-scale)) !important; }
.pa-7 { padding: calc(28px * var(--g-scale)) !important; }

.pt-8, .py-8 { padding-top: calc(32px * var(--g-scale)) !important; }
.pr-8, .px-8 { padding-right: calc(32px * var(--g-scale)) !important; }
.pl-8, .px-8 { padding-left: calc(32px * var(--g-scale)) !important; }
.pb-8, .py-8 { padding-bottom: calc(32px * var(--g-scale)) !important; }
.ps-8 { padding-inline-start: calc(32px * var(--g-scale)) !important; }
.pe-8 { padding-inline-end: calc(32px * var(--g-scale)) !important; }
.pa-8 { padding: calc(32px * var(--g-scale)) !important; }

.pt-9, .py-9 { padding-top: calc(36px * var(--g-scale)) !important; }
.pr-9, .px-9 { padding-right: calc(36px * var(--g-scale)) !important; }
.pl-9, .px-9 { padding-left: calc(36px * var(--g-scale)) !important; }
.pb-9, .py-9 { padding-bottom: calc(36px * var(--g-scale)) !important; }
.ps-9 { padding-inline-start: calc(36px * var(--g-scale)) !important; }
.pe-9 { padding-inline-end: calc(36px * var(--g-scale)) !important; }
.pa-9 { padding: calc(36px * var(--g-scale)) !important; }

.pt-10, .py-10 { padding-top: calc(40px * var(--g-scale)) !important; }
.pr-10, .px-10 { padding-right: calc(40px * var(--g-scale)) !important; }
.pl-10, .px-10 { padding-left: calc(40px * var(--g-scale)) !important; }
.pb-10, .py-10 { padding-bottom: calc(40px * var(--g-scale)) !important; }
.ps-10 { padding-inline-start: calc(40px * var(--g-scale)) !important; }
.pe-10 { padding-inline-end: calc(40px * var(--g-scale)) !important; }
.pa-10 { padding: calc(40px * var(--g-scale)) !important; }

.pt-11, .py-11 { padding-top: calc(44px * var(--g-scale)) !important; }
.pr-11, .px-11 { padding-right: calc(44px * var(--g-scale)) !important; }
.pl-11, .px-11 { padding-left: calc(44px * var(--g-scale)) !important; }
.pb-11, .py-11 { padding-bottom: calc(44px * var(--g-scale)) !important; }
.ps-11 { padding-inline-start: calc(44px * var(--g-scale)) !important; }
.pe-11 { padding-inline-end: calc(44px * var(--g-scale)) !important; }
.pa-11 { padding: calc(44px * var(--g-scale)) !important; }

.pt-12, .py-12 { padding-top: calc(48px * var(--g-scale)) !important; }
.pr-12, .px-12 { padding-right: calc(48px * var(--g-scale)) !important; }
.pl-12, .px-12 { padding-left: calc(48px * var(--g-scale)) !important; }
.pb-12, .py-12 { padding-bottom: calc(48px * var(--g-scale)) !important; }
.ps-12 { padding-inline-start: calc(48px * var(--g-scale)) !important; }
.pe-12 { padding-inline-end: calc(48px * var(--g-scale)) !important; }
.pa-12 { padding: calc(48px * var(--g-scale)) !important; }

.pt-13, .py-13 { padding-top: calc(52px * var(--g-scale)) !important; }
.pr-13, .px-13 { padding-right: calc(52px * var(--g-scale)) !important; }
.pl-13, .px-13 { padding-left: calc(52px * var(--g-scale)) !important; }
.pb-13, .py-13 { padding-bottom: calc(52px * var(--g-scale)) !important; }
.ps-13 { padding-inline-start: calc(52px * var(--g-scale)) !important; }
.pe-13 { padding-inline-end: calc(52px * var(--g-scale)) !important; }
.pa-13 { padding: calc(52px * var(--g-scale)) !important; }

.pt-14, .py-14 { padding-top: calc(56px * var(--g-scale)) !important; }
.pr-14, .px-14 { padding-right: calc(56px * var(--g-scale)) !important; }
.pl-14, .px-14 { padding-left: calc(56px * var(--g-scale)) !important; }
.pb-14, .py-14 { padding-bottom: calc(56px * var(--g-scale)) !important; }
.ps-14 { padding-inline-start: calc(56px * var(--g-scale)) !important; }
.pe-14 { padding-inline-end: calc(56px * var(--g-scale)) !important; }
.pa-14 { padding: calc(56px * var(--g-scale)) !important; }

.pt-15, .py-15 { padding-top: calc(60px * var(--g-scale)) !important; }
.pr-15, .px-15 { padding-right: calc(60px * var(--g-scale)) !important; }
.pl-15, .px-15 { padding-left: calc(60px * var(--g-scale)) !important; }
.pb-15, .py-15 { padding-bottom: calc(60px * var(--g-scale)) !important; }
.ps-15 { padding-inline-start: calc(60px * var(--g-scale)) !important; }
.pe-15 { padding-inline-end: calc(60px * var(--g-scale)) !important; }
.pa-15 { padding: calc(60px * var(--g-scale)) !important; }

.pt-16, .py-16 { padding-top: calc(64px * var(--g-scale)) !important; }
.pr-16, .px-16 { padding-right: calc(64px * var(--g-scale)) !important; }
.pl-16, .px-16 { padding-left: calc(64px * var(--g-scale)) !important; }
.pb-16, .py-16 { padding-bottom: calc(64px * var(--g-scale)) !important; }
.ps-16 { padding-inline-start: calc(64px * var(--g-scale)) !important; }
.pe-16 { padding-inline-end: calc(64px * var(--g-scale)) !important; }
.pa-16 { padding: calc(64px * var(--g-scale)) !important; }

.pt-17, .py-17 { padding-top: calc(68px * var(--g-scale)) !important; }
.pr-17, .px-17 { padding-right: calc(68px * var(--g-scale)) !important; }
.pl-17, .px-17 { padding-left: calc(68px * var(--g-scale)) !important; }
.pb-17, .py-17 { padding-bottom: calc(68px * var(--g-scale)) !important; }
.ps-17 { padding-inline-start: calc(68px * var(--g-scale)) !important; }
.pe-17 { padding-inline-end: calc(68px * var(--g-scale)) !important; }
.pa-17 { padding: calc(68px * var(--g-scale)) !important; }

.pt-18, .py-18 { padding-top: calc(72px * var(--g-scale)) !important; }
.pr-18, .px-18 { padding-right: calc(72px * var(--g-scale)) !important; }
.pl-18, .px-18 { padding-left: calc(72px * var(--g-scale)) !important; }
.pb-18, .py-18 { padding-bottom: calc(72px * var(--g-scale)) !important; }
.ps-18 { padding-inline-start: calc(72px * var(--g-scale)) !important; }
.pe-18 { padding-inline-end: calc(72px * var(--g-scale)) !important; }
.pa-18 { padding: calc(72px * var(--g-scale)) !important; }

.pt-19, .py-19 { padding-top: calc(76px * var(--g-scale)) !important; }
.pr-19, .px-19 { padding-right: calc(76px * var(--g-scale)) !important; }
.pl-19, .px-19 { padding-left: calc(76px * var(--g-scale)) !important; }
.pb-19, .py-19 { padding-bottom: calc(76px * var(--g-scale)) !important; }
.ps-19 { padding-inline-start: calc(76px * var(--g-scale)) !important; }
.pe-19 { padding-inline-end: calc(76px * var(--g-scale)) !important; }
.pa-19 { padding: calc(76px * var(--g-scale)) !important; }

.pt-20, .py-20 { padding-top: calc(80px * var(--g-scale)) !important; }
.pr-20, .px-20 { padding-right: calc(80px * var(--g-scale)) !important; }
.pl-20, .px-20 { padding-left: calc(80px * var(--g-scale)) !important; }
.pb-20, .py-20 { padding-bottom: calc(80px * var(--g-scale)) !important; }
.ps-20 { padding-inline-start: calc(80px * var(--g-scale)) !important; }
.pe-20 { padding-inline-end: calc(80px * var(--g-scale)) !important; }
.pa-20 { padding: calc(80px * var(--g-scale)) !important; }

/* ── Gouttières flex/grid ── */

.gap-1 { gap: calc(4px * var(--g-scale)); }
.gap-x-1 { column-gap: calc(4px * var(--g-scale)); }
.gap-y-1 { row-gap: calc(4px * var(--g-scale)); }

.gap-2 { gap: calc(8px * var(--g-scale)); }
.gap-x-2 { column-gap: calc(8px * var(--g-scale)); }
.gap-y-2 { row-gap: calc(8px * var(--g-scale)); }

.gap-3 { gap: calc(12px * var(--g-scale)); }
.gap-x-3 { column-gap: calc(12px * var(--g-scale)); }
.gap-y-3 { row-gap: calc(12px * var(--g-scale)); }

.gap-4 { gap: calc(16px * var(--g-scale)); }
.gap-x-4 { column-gap: calc(16px * var(--g-scale)); }
.gap-y-4 { row-gap: calc(16px * var(--g-scale)); }

.gap-5 { gap: calc(20px * var(--g-scale)); }
.gap-x-5 { column-gap: calc(20px * var(--g-scale)); }
.gap-y-5 { row-gap: calc(20px * var(--g-scale)); }

.gap-6 { gap: calc(24px * var(--g-scale)); }
.gap-x-6 { column-gap: calc(24px * var(--g-scale)); }
.gap-y-6 { row-gap: calc(24px * var(--g-scale)); }

.gap-7 { gap: calc(28px * var(--g-scale)); }
.gap-x-7 { column-gap: calc(28px * var(--g-scale)); }
.gap-y-7 { row-gap: calc(28px * var(--g-scale)); }

.gap-8 { gap: calc(32px * var(--g-scale)); }
.gap-x-8 { column-gap: calc(32px * var(--g-scale)); }
.gap-y-8 { row-gap: calc(32px * var(--g-scale)); }

.gap-9 { gap: calc(36px * var(--g-scale)); }
.gap-x-9 { column-gap: calc(36px * var(--g-scale)); }
.gap-y-9 { row-gap: calc(36px * var(--g-scale)); }

.gap-10 { gap: calc(40px * var(--g-scale)); }
.gap-x-10 { column-gap: calc(40px * var(--g-scale)); }
.gap-y-10 { row-gap: calc(40px * var(--g-scale)); }

.gap-11 { gap: calc(44px * var(--g-scale)); }
.gap-x-11 { column-gap: calc(44px * var(--g-scale)); }
.gap-y-11 { row-gap: calc(44px * var(--g-scale)); }

.gap-12 { gap: calc(48px * var(--g-scale)); }
.gap-x-12 { column-gap: calc(48px * var(--g-scale)); }
.gap-y-12 { row-gap: calc(48px * var(--g-scale)); }

.gap-13 { gap: calc(52px * var(--g-scale)); }
.gap-x-13 { column-gap: calc(52px * var(--g-scale)); }
.gap-y-13 { row-gap: calc(52px * var(--g-scale)); }

.gap-14 { gap: calc(56px * var(--g-scale)); }
.gap-x-14 { column-gap: calc(56px * var(--g-scale)); }
.gap-y-14 { row-gap: calc(56px * var(--g-scale)); }

.gap-15 { gap: calc(60px * var(--g-scale)); }
.gap-x-15 { column-gap: calc(60px * var(--g-scale)); }
.gap-y-15 { row-gap: calc(60px * var(--g-scale)); }

.gap-16 { gap: calc(64px * var(--g-scale)); }
.gap-x-16 { column-gap: calc(64px * var(--g-scale)); }
.gap-y-16 { row-gap: calc(64px * var(--g-scale)); }

.gap-17 { gap: calc(68px * var(--g-scale)); }
.gap-x-17 { column-gap: calc(68px * var(--g-scale)); }
.gap-y-17 { row-gap: calc(68px * var(--g-scale)); }

.gap-18 { gap: calc(72px * var(--g-scale)); }
.gap-x-18 { column-gap: calc(72px * var(--g-scale)); }
.gap-y-18 { row-gap: calc(72px * var(--g-scale)); }

.gap-19 { gap: calc(76px * var(--g-scale)); }
.gap-x-19 { column-gap: calc(76px * var(--g-scale)); }
.gap-y-19 { row-gap: calc(76px * var(--g-scale)); }

.gap-20 { gap: calc(80px * var(--g-scale)); }
.gap-x-20 { column-gap: calc(80px * var(--g-scale)); }
.gap-y-20 { row-gap: calc(80px * var(--g-scale)); }

/* ── Conteneurs MudBlazor ──
   Les paddings de structure, en dur dans MudBlazor.min.css. Les dialogues `.dlg` du projet
   redéfinissent les leurs dans css/dialogs.css (déjà en --g-space-*) et passent donc devant. */

.mud-container--gutters {
  padding-left: calc(16px * var(--g-scale));
  padding-right: calc(16px * var(--g-scale));
}

.mud-card-header.mud-card-header-padding,
.mud-card-content.mud-card-content-padding {
  padding: calc(16px * var(--g-scale));
}

.mud-card-actions.mud-card-actions-padding {
  padding: calc(8px * var(--g-scale));
}

.mud-dialog .mud-dialog-title {
  padding: calc(16px * var(--g-scale)) calc(24px * var(--g-scale));
}

.mud-dialog .mud-dialog-content {
  padding: calc(8px * var(--g-scale)) calc(24px * var(--g-scale));
}

.mud-dialog .mud-dialog-actions {
  gap: calc(8px * var(--g-scale));
  padding: calc(8px * var(--g-scale));
}

/* Gouttières MudGrid : marge négative du conteneur et padding des cellules doivent rester
   exactement opposées, les deux suivent donc le même facteur. */
.mud-grid-spacing-xs-1 {
  width: calc(100% + 4px * var(--g-scale));
  margin-left: calc(-4px * var(--g-scale));
  margin-top: calc(-4px * var(--g-scale));
}

.mud-grid-spacing-xs-1 > .mud-grid-item {
  padding-left: calc(4px * var(--g-scale));
  padding-top: calc(4px * var(--g-scale));
}

.mud-grid-spacing-xs-2 {
  width: calc(100% + 8px * var(--g-scale));
  margin-left: calc(-8px * var(--g-scale));
  margin-top: calc(-8px * var(--g-scale));
}

.mud-grid-spacing-xs-2 > .mud-grid-item {
  padding-left: calc(8px * var(--g-scale));
  padding-top: calc(8px * var(--g-scale));
}

.mud-grid-spacing-xs-3 {
  width: calc(100% + 12px * var(--g-scale));
  margin-left: calc(-12px * var(--g-scale));
  margin-top: calc(-12px * var(--g-scale));
}

.mud-grid-spacing-xs-3 > .mud-grid-item {
  padding-left: calc(12px * var(--g-scale));
  padding-top: calc(12px * var(--g-scale));
}

.mud-grid-spacing-xs-4 {
  width: calc(100% + 16px * var(--g-scale));
  margin-left: calc(-16px * var(--g-scale));
  margin-top: calc(-16px * var(--g-scale));
}

.mud-grid-spacing-xs-4 > .mud-grid-item {
  padding-left: calc(16px * var(--g-scale));
  padding-top: calc(16px * var(--g-scale));
}

.mud-grid-spacing-xs-5 {
  width: calc(100% + 20px * var(--g-scale));
  margin-left: calc(-20px * var(--g-scale));
  margin-top: calc(-20px * var(--g-scale));
}

.mud-grid-spacing-xs-5 > .mud-grid-item {
  padding-left: calc(20px * var(--g-scale));
  padding-top: calc(20px * var(--g-scale));
}

.mud-grid-spacing-xs-6 {
  width: calc(100% + 24px * var(--g-scale));
  margin-left: calc(-24px * var(--g-scale));
  margin-top: calc(-24px * var(--g-scale));
}

.mud-grid-spacing-xs-6 > .mud-grid-item {
  padding-left: calc(24px * var(--g-scale));
  padding-top: calc(24px * var(--g-scale));
}

.mud-grid-spacing-xs-7 {
  width: calc(100% + 28px * var(--g-scale));
  margin-left: calc(-28px * var(--g-scale));
  margin-top: calc(-28px * var(--g-scale));
}

.mud-grid-spacing-xs-7 > .mud-grid-item {
  padding-left: calc(28px * var(--g-scale));
  padding-top: calc(28px * var(--g-scale));
}

.mud-grid-spacing-xs-8 {
  width: calc(100% + 32px * var(--g-scale));
  margin-left: calc(-32px * var(--g-scale));
  margin-top: calc(-32px * var(--g-scale));
}

.mud-grid-spacing-xs-8 > .mud-grid-item {
  padding-left: calc(32px * var(--g-scale));
  padding-top: calc(32px * var(--g-scale));
}

.mud-grid-spacing-xs-9 {
  width: calc(100% + 36px * var(--g-scale));
  margin-left: calc(-36px * var(--g-scale));
  margin-top: calc(-36px * var(--g-scale));
}

.mud-grid-spacing-xs-9 > .mud-grid-item {
  padding-left: calc(36px * var(--g-scale));
  padding-top: calc(36px * var(--g-scale));
}

.mud-grid-spacing-xs-10 {
  width: calc(100% + 40px * var(--g-scale));
  margin-left: calc(-40px * var(--g-scale));
  margin-top: calc(-40px * var(--g-scale));
}

.mud-grid-spacing-xs-10 > .mud-grid-item {
  padding-left: calc(40px * var(--g-scale));
  padding-top: calc(40px * var(--g-scale));
}

.mud-grid-spacing-xs-11 {
  width: calc(100% + 44px * var(--g-scale));
  margin-left: calc(-44px * var(--g-scale));
  margin-top: calc(-44px * var(--g-scale));
}

.mud-grid-spacing-xs-11 > .mud-grid-item {
  padding-left: calc(44px * var(--g-scale));
  padding-top: calc(44px * var(--g-scale));
}

.mud-grid-spacing-xs-12 {
  width: calc(100% + 48px * var(--g-scale));
  margin-left: calc(-48px * var(--g-scale));
  margin-top: calc(-48px * var(--g-scale));
}

.mud-grid-spacing-xs-12 > .mud-grid-item {
  padding-left: calc(48px * var(--g-scale));
  padding-top: calc(48px * var(--g-scale));
}

.mud-grid-spacing-xs-13 {
  width: calc(100% + 52px * var(--g-scale));
  margin-left: calc(-52px * var(--g-scale));
  margin-top: calc(-52px * var(--g-scale));
}

.mud-grid-spacing-xs-13 > .mud-grid-item {
  padding-left: calc(52px * var(--g-scale));
  padding-top: calc(52px * var(--g-scale));
}

.mud-grid-spacing-xs-14 {
  width: calc(100% + 56px * var(--g-scale));
  margin-left: calc(-56px * var(--g-scale));
  margin-top: calc(-56px * var(--g-scale));
}

.mud-grid-spacing-xs-14 > .mud-grid-item {
  padding-left: calc(56px * var(--g-scale));
  padding-top: calc(56px * var(--g-scale));
}

.mud-grid-spacing-xs-15 {
  width: calc(100% + 60px * var(--g-scale));
  margin-left: calc(-60px * var(--g-scale));
  margin-top: calc(-60px * var(--g-scale));
}

.mud-grid-spacing-xs-15 > .mud-grid-item {
  padding-left: calc(60px * var(--g-scale));
  padding-top: calc(60px * var(--g-scale));
}

.mud-grid-spacing-xs-16 {
  width: calc(100% + 64px * var(--g-scale));
  margin-left: calc(-64px * var(--g-scale));
  margin-top: calc(-64px * var(--g-scale));
}

.mud-grid-spacing-xs-16 > .mud-grid-item {
  padding-left: calc(64px * var(--g-scale));
  padding-top: calc(64px * var(--g-scale));
}

.mud-grid-spacing-xs-17 {
  width: calc(100% + 68px * var(--g-scale));
  margin-left: calc(-68px * var(--g-scale));
  margin-top: calc(-68px * var(--g-scale));
}

.mud-grid-spacing-xs-17 > .mud-grid-item {
  padding-left: calc(68px * var(--g-scale));
  padding-top: calc(68px * var(--g-scale));
}

.mud-grid-spacing-xs-18 {
  width: calc(100% + 72px * var(--g-scale));
  margin-left: calc(-72px * var(--g-scale));
  margin-top: calc(-72px * var(--g-scale));
}

.mud-grid-spacing-xs-18 > .mud-grid-item {
  padding-left: calc(72px * var(--g-scale));
  padding-top: calc(72px * var(--g-scale));
}

.mud-grid-spacing-xs-19 {
  width: calc(100% + 76px * var(--g-scale));
  margin-left: calc(-76px * var(--g-scale));
  margin-top: calc(-76px * var(--g-scale));
}

.mud-grid-spacing-xs-19 > .mud-grid-item {
  padding-left: calc(76px * var(--g-scale));
  padding-top: calc(76px * var(--g-scale));
}

.mud-grid-spacing-xs-20 {
  width: calc(100% + 80px * var(--g-scale));
  margin-left: calc(-80px * var(--g-scale));
  margin-top: calc(-80px * var(--g-scale));
}

.mud-grid-spacing-xs-20 > .mud-grid-item {
  padding-left: calc(80px * var(--g-scale));
  padding-top: calc(80px * var(--g-scale));
}

/* Cellules de table : le padding seul — la hauteur de ligne suit le contenu. Le mode `Dense`
   de MudBlazor garde sa règle propre, plus spécifique, et est repris ici pour qu'une table
   dense se densifie aussi. */

.mud-table-cell {
  padding: calc(16px * var(--g-scale));
}

.mud-table-dense * .mud-table-row .mud-table-cell {
  padding: calc(6px * var(--g-scale)) calc(24px * var(--g-scale)) calc(6px * var(--g-scale)) calc(16px * var(--g-scale));
  padding-inline-start: calc(16px * var(--g-scale));
  padding-inline-end: calc(24px * var(--g-scale));
}

.mud-table-dense * .mud-table-row .mud-table-cell:last-child {
  padding-right: calc(16px * var(--g-scale));
  padding-inline-end: calc(16px * var(--g-scale));
}

/* ── Régénérer ──
   Ce fichier reprend la grille d'espacement de MudBlazor 9.8 (crans 0 à 20 et -1 à -20, pas de
   4 px). Après une montée de version, vérifier que la grille n'a pas bougé :
   `grep -oE '\.pa-4\{[^}]*\}' MudBlazor.min.css` doit toujours donner 16 px. */