@tsiky/components-r19 1.1.0 → 1.3.0

package/src/components/Grid/grid.css

@@ -1,285 +1,285 @@
-/* Conteneur flex qui wrap */
-.grid-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--gap, 0px);
-  align-items: flex-start;
-  box-sizing: border-box;
-}
-
-/* Chaque item */
-.grid-item {
-  box-sizing: border-box;
-  cursor: grab;
-  transition:
-    transform 0.2s ease,
-    box-shadow 0.2s ease,
-    opacity 0.2s ease;
-  user-select: none;
-  padding: 0;
-}
-
-.grid-item-grabbing:active {
-  cursor: grabbing;
-  opacity: 0.6;
-  transform: scale(1.02);
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
-}
-
-/* ===== XS (mobile par défaut) ===== */
-.grid-xs-1 {
-  flex: 0 0 calc(8.3333% - (var(--gap) * 11 / 12));
-  max-width: calc(8.3333% - (var(--gap) * 11 / 12));
-}
-.grid-xs-2 {
-  flex: 0 0 calc(16.6666% - (var(--gap) * 10 / 12));
-  max-width: calc(16.6666% - (var(--gap) * 10 / 12));
-}
-.grid-xs-3 {
-  flex: 0 0 calc(25% - (var(--gap) * 9 / 12));
-  max-width: calc(25% - (var(--gap) * 9 / 12));
-}
-.grid-xs-4 {
-  flex: 0 0 calc(33.3333% - (var(--gap) * 8 / 12));
-  max-width: calc(33.3333% - (var(--gap) * 8 / 12));
-}
-.grid-xs-5 {
-  flex: 0 0 calc(41.6666% - (var(--gap) * 7 / 12));
-  max-width: calc(41.6666% - (var(--gap) * 7 / 12));
-}
-.grid-xs-6 {
-  flex: 0 0 calc(50% - (var(--gap) * 6 / 12));
-  max-width: calc(50% - (var(--gap) * 6 / 12));
-}
-.grid-xs-7 {
-  flex: 0 0 calc(58.3333% - (var(--gap) * 5 / 12));
-  max-width: calc(58.3333% - (var(--gap) * 5 / 12));
-}
-.grid-xs-8 {
-  flex: 0 0 calc(66.6666% - (var(--gap) * 4 / 12));
-  max-width: calc(66.6666% - (var(--gap) * 4 / 12));
-}
-.grid-xs-9 {
-  flex: 0 0 calc(75% - (var(--gap) * 3 / 12));
-  max-width: calc(75% - (var(--gap) * 3 / 12));
-}
-.grid-xs-10 {
-  flex: 0 0 calc(83.3333% - (var(--gap) * 2 / 12));
-  max-width: calc(83.3333% - (var(--gap) * 2 / 12));
-}
-.grid-xs-11 {
-  flex: 0 0 calc(91.6666% - (var(--gap) * 1 / 12));
-  max-width: calc(91.6666% - (var(--gap) * 1 / 12));
-}
-.grid-xs-12 {
-  flex: 0 0 100%;
-  max-width: 100%;
-}
-
-/* ===== SM ≥ 600px ===== */
-@media (min-width: 600px) {
-  .grid-sm-1 {
-    flex: 0 0 calc(8.3333% - (var(--gap) * 11 / 12));
-    max-width: calc(8.3333% - (var(--gap) * 11 / 12));
-  }
-  .grid-sm-2 {
-    flex: 0 0 calc(16.6666% - (var(--gap) * 10 / 12));
-    max-width: calc(16.6666% - (var(--gap) * 10 / 12));
-  }
-  .grid-sm-3 {
-    flex: 0 0 calc(25% - (var(--gap) * 9 / 12));
-    max-width: calc(25% - (var(--gap) * 9 / 12));
-  }
-  .grid-sm-4 {
-    flex: 0 0 calc(33.3333% - (var(--gap) * 8 / 12));
-    max-width: calc(33.3333% - (var(--gap) * 8 / 12));
-  }
-  .grid-sm-5 {
-    flex: 0 0 calc(41.6666% - (var(--gap) * 7 / 12));
-    max-width: calc(41.6666% - (var(--gap) * 7 / 12));
-  }
-  .grid-sm-6 {
-    flex: 0 0 calc(50% - (var(--gap) * 6 / 12));
-    max-width: calc(50% - (var(--gap) * 6 / 12));
-  }
-  .grid-sm-7 {
-    flex: 0 0 calc(58.3333% - (var(--gap) * 5 / 12));
-    max-width: calc(58.3333% - (var(--gap) * 5 / 12));
-  }
-  .grid-sm-8 {
-    flex: 0 0 calc(66.6666% - (var(--gap) * 4 / 12));
-    max-width: calc(66.6666% - (var(--gap) * 4 / 12));
-  }
-  .grid-sm-9 {
-    flex: 0 0 calc(75% - (var(--gap) * 3 / 12));
-    max-width: calc(75% - (var(--gap) * 3 / 12));
-  }
-  .grid-sm-10 {
-    flex: 0 0 calc(83.3333% - (var(--gap) * 2 / 12));
-    max-width: calc(83.3333% - (var(--gap) * 2 / 12));
-  }
-  .grid-sm-11 {
-    flex: 0 0 calc(91.6666% - (var(--gap) * 1 / 12));
-    max-width: calc(91.6666% - (var(--gap) * 1 / 12));
-  }
-  .grid-sm-12 {
-    flex: 0 0 100%;
-    max-width: 100%;
-  }
-}
-
-/* ===== MD ≥ 900px ===== */
-@media (min-width: 900px) {
-  .grid-md-1 {
-    flex: 0 0 calc(8.3333% - (var(--gap) * 11 / 12));
-    max-width: calc(8.3333% - (var(--gap) * 11 / 12));
-  }
-  .grid-md-2 {
-    flex: 0 0 calc(16.6666% - (var(--gap) * 10 / 12));
-    max-width: calc(16.6666% - (var(--gap) * 10 / 12));
-  }
-  .grid-md-3 {
-    flex: 0 0 calc(25% - (var(--gap) * 9 / 12));
-    max-width: calc(25% - (var(--gap) * 9 / 12));
-  }
-  .grid-md-4 {
-    flex: 0 0 calc(33.3333% - (var(--gap) * 8 / 12));
-    max-width: calc(33.3333% - (var(--gap) * 8 / 12));
-  }
-  .grid-md-5 {
-    flex: 0 0 calc(41.6666% - (var(--gap) * 7 / 12));
-    max-width: calc(41.6666% - (var(--gap) * 7 / 12));
-  }
-  .grid-md-6 {
-    flex: 0 0 calc(50% - (var(--gap) * 6 / 12));
-    max-width: calc(50% - (var(--gap) * 6 / 12));
-  }
-  .grid-md-7 {
-    flex: 0 0 calc(58.3333% - (var(--gap) * 5 / 12));
-    max-width: calc(58.3333% - (var(--gap) * 5 / 12));
-  }
-  .grid-md-8 {
-    flex: 0 0 calc(66.6666% - (var(--gap) * 4 / 12));
-    max-width: calc(66.6666% - (var(--gap) * 4 / 12));
-  }
-  .grid-md-9 {
-    flex: 0 0 calc(75% - (var(--gap) * 3 / 12));
-    max-width: calc(75% - (var(--gap) * 3 / 12));
-  }
-  .grid-md-10 {
-    flex: 0 0 calc(83.3333% - (var(--gap) * 2 / 12));
-    max-width: calc(83.3333% - (var(--gap) * 2 / 12));
-  }
-  .grid-md-11 {
-    flex: 0 0 calc(91.6666% - (var(--gap) * 1 / 12));
-    max-width: calc(91.6666% - (var(--gap) * 1 / 12));
-  }
-  .grid-md-12 {
-    flex: 0 0 100%;
-    max-width: 100%;
-  }
-}
-
-/* ===== LG ≥ 1200px ===== */
-@media (min-width: 1200px) {
-  .grid-lg-1 {
-    flex: 0 0 calc(8.3333% - (var(--gap) * 11 / 12));
-    max-width: calc(8.3333% - (var(--gap) * 11 / 12));
-  }
-  .grid-lg-2 {
-    flex: 0 0 calc(16.6666% - (var(--gap) * 10 / 12));
-    max-width: calc(16.6666% - (var(--gap) * 10 / 12));
-  }
-  .grid-lg-3 {
-    flex: 0 0 calc(25% - (var(--gap) * 9 / 12));
-    max-width: calc(25% - (var(--gap) * 9 / 12));
-  }
-  .grid-lg-4 {
-    flex: 0 0 calc(33.3333% - (var(--gap) * 8 / 12));
-    max-width: calc(33.3333% - (var(--gap) * 8 / 12));
-  }
-  .grid-lg-5 {
-    flex: 0 0 calc(41.6666% - (var(--gap) * 7 / 12));
-    max-width: calc(41.6666% - (var(--gap) * 7 / 12));
-  }
-  .grid-lg-6 {
-    flex: 0 0 calc(50% - (var(--gap) * 6 / 12));
-    max-width: calc(50% - (var(--gap) * 6 / 12));
-  }
-  .grid-lg-7 {
-    flex: 0 0 calc(58.3333% - (var(--gap) * 5 / 12));
-    max-width: calc(58.3333% - (var(--gap) * 5 / 12));
-  }
-  .grid-lg-8 {
-    flex: 0 0 calc(66.6666% - (var(--gap) * 4 / 12));
-    max-width: calc(66.6666% - (var(--gap) * 4 / 12));
-  }
-  .grid-lg-9 {
-    flex: 0 0 calc(75% - (var(--gap) * 3 / 12));
-    max-width: calc(75% - (var(--gap) * 3 / 12));
-  }
-  .grid-lg-10 {
-    flex: 0 0 calc(83.3333% - (var(--gap) * 2 / 12));
-    max-width: calc(83.3333% - (var(--gap) * 2 / 12));
-  }
-  .grid-lg-11 {
-    flex: 0 0 calc(91.6666% - (var(--gap) * 1 / 12));
-    max-width: calc(91.6666% - (var(--gap) * 1 / 12));
-  }
-  .grid-lg-12 {
-    flex: 0 0 100%;
-    max-width: 100%;
-  }
-}
-
-/* ===== XL ≥ 1536px ===== */
-@media (min-width: 1536px) {
-  .grid-xl-1 {
-    flex: 0 0 calc(8.3333% - (var(--gap) * 11 / 12));
-    max-width: calc(8.3333% - (var(--gap) * 11 / 12));
-  }
-  .grid-xl-2 {
-    flex: 0 0 calc(16.6666% - (var(--gap) * 10 / 12));
-    max-width: calc(16.6666% - (var(--gap) * 10 / 12));
-  }
-  .grid-xl-3 {
-    flex: 0 0 calc(25% - (var(--gap) * 9 / 12));
-    max-width: calc(25% - (var(--gap) * 9 / 12));
-  }
-  .grid-xl-4 {
-    flex: 0 0 calc(33.3333% - (var(--gap) * 8 / 12));
-    max-width: calc(33.3333% - (var(--gap) * 8 / 12));
-  }
-  .grid-xl-5 {
-    flex: 0 0 calc(41.6666% - (var(--gap) * 7 / 12));
-    max-width: calc(41.6666% - (var(--gap) * 7 / 12));
-  }
-  .grid-xl-6 {
-    flex: 0 0 calc(50% - (var(--gap) * 6 / 12));
-    max-width: calc(50% - (var(--gap) * 6 / 12));
-  }
-  .grid-xl-7 {
-    flex: 0 0 calc(58.3333% - (var(--gap) * 5 / 12));
-    max-width: calc(58.3333% - (var(--gap) * 5 / 12));
-  }
-  .grid-xl-8 {
-    flex: 0 0 calc(66.6666% - (var(--gap) * 4 / 12));
-    max-width: calc(66.6666% - (var(--gap) * 4 / 12));
-  }
-  .grid-xl-9 {
-    flex: 0 0 calc(75% - (var(--gap) * 3 / 12));
-    max-width: calc(75% - (var(--gap) * 3 / 12));
-  }
-  .grid-xl-10 {
-    flex: 0 0 calc(83.3333% - (var(--gap) * 2 / 12));
-    max-width: calc(83.3333% - (var(--gap) * 2 / 12));
-  }
-  .grid-xl-11 {
-    flex: 0 0 calc(91.6666% - (var(--gap) * 1 / 12));
-    max-width: calc(91.6666% - (var(--gap) * 1 / 12));
-  }
-  .grid-xl-12 {
-    flex: 0 0 100%;
-    max-width: 100%;
-  }
-}
+/* Conteneur flex qui wrap */
+.grid-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gap, 0px);
+  align-items: flex-start;
+  box-sizing: border-box;
+}
+
+/* Chaque item */
+.grid-item {
+  box-sizing: border-box;
+  cursor: grab;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease,
+    opacity 0.2s ease;
+  user-select: none;
+  padding: 0;
+}
+
+.grid-item-grabbing:active {
+  cursor: grabbing;
+  opacity: 0.6;
+  transform: scale(1.02);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
+}
+
+/* ===== XS (mobile par défaut) ===== */
+.grid-xs-1 {
+  flex: 0 0 calc(8.3333% - (var(--gap) * 11 / 12));
+  max-width: calc(8.3333% - (var(--gap) * 11 / 12));
+}
+.grid-xs-2 {
+  flex: 0 0 calc(16.6666% - (var(--gap) * 10 / 12));
+  max-width: calc(16.6666% - (var(--gap) * 10 / 12));
+}
+.grid-xs-3 {
+  flex: 0 0 calc(25% - (var(--gap) * 9 / 12));
+  max-width: calc(25% - (var(--gap) * 9 / 12));
+}
+.grid-xs-4 {
+  flex: 0 0 calc(33.3333% - (var(--gap) * 8 / 12));
+  max-width: calc(33.3333% - (var(--gap) * 8 / 12));
+}
+.grid-xs-5 {
+  flex: 0 0 calc(41.6666% - (var(--gap) * 7 / 12));
+  max-width: calc(41.6666% - (var(--gap) * 7 / 12));
+}
+.grid-xs-6 {
+  flex: 0 0 calc(50% - (var(--gap) * 6 / 12));
+  max-width: calc(50% - (var(--gap) * 6 / 12));
+}
+.grid-xs-7 {
+  flex: 0 0 calc(58.3333% - (var(--gap) * 5 / 12));
+  max-width: calc(58.3333% - (var(--gap) * 5 / 12));
+}
+.grid-xs-8 {
+  flex: 0 0 calc(66.6666% - (var(--gap) * 4 / 12));
+  max-width: calc(66.6666% - (var(--gap) * 4 / 12));
+}
+.grid-xs-9 {
+  flex: 0 0 calc(75% - (var(--gap) * 3 / 12));
+  max-width: calc(75% - (var(--gap) * 3 / 12));
+}
+.grid-xs-10 {
+  flex: 0 0 calc(83.3333% - (var(--gap) * 2 / 12));
+  max-width: calc(83.3333% - (var(--gap) * 2 / 12));
+}
+.grid-xs-11 {
+  flex: 0 0 calc(91.6666% - (var(--gap) * 1 / 12));
+  max-width: calc(91.6666% - (var(--gap) * 1 / 12));
+}
+.grid-xs-12 {
+  flex: 0 0 100%;
+  max-width: 100%;
+}
+
+/* ===== SM ≥ 600px ===== */
+@media (min-width: 600px) {
+  .grid-sm-1 {
+    flex: 0 0 calc(8.3333% - (var(--gap) * 11 / 12));
+    max-width: calc(8.3333% - (var(--gap) * 11 / 12));
+  }
+  .grid-sm-2 {
+    flex: 0 0 calc(16.6666% - (var(--gap) * 10 / 12));
+    max-width: calc(16.6666% - (var(--gap) * 10 / 12));
+  }
+  .grid-sm-3 {
+    flex: 0 0 calc(25% - (var(--gap) * 9 / 12));
+    max-width: calc(25% - (var(--gap) * 9 / 12));
+  }
+  .grid-sm-4 {
+    flex: 0 0 calc(33.3333% - (var(--gap) * 8 / 12));
+    max-width: calc(33.3333% - (var(--gap) * 8 / 12));
+  }
+  .grid-sm-5 {
+    flex: 0 0 calc(41.6666% - (var(--gap) * 7 / 12));
+    max-width: calc(41.6666% - (var(--gap) * 7 / 12));
+  }
+  .grid-sm-6 {
+    flex: 0 0 calc(50% - (var(--gap) * 6 / 12));
+    max-width: calc(50% - (var(--gap) * 6 / 12));
+  }
+  .grid-sm-7 {
+    flex: 0 0 calc(58.3333% - (var(--gap) * 5 / 12));
+    max-width: calc(58.3333% - (var(--gap) * 5 / 12));
+  }
+  .grid-sm-8 {
+    flex: 0 0 calc(66.6666% - (var(--gap) * 4 / 12));
+    max-width: calc(66.6666% - (var(--gap) * 4 / 12));
+  }
+  .grid-sm-9 {
+    flex: 0 0 calc(75% - (var(--gap) * 3 / 12));
+    max-width: calc(75% - (var(--gap) * 3 / 12));
+  }
+  .grid-sm-10 {
+    flex: 0 0 calc(83.3333% - (var(--gap) * 2 / 12));
+    max-width: calc(83.3333% - (var(--gap) * 2 / 12));
+  }
+  .grid-sm-11 {
+    flex: 0 0 calc(91.6666% - (var(--gap) * 1 / 12));
+    max-width: calc(91.6666% - (var(--gap) * 1 / 12));
+  }
+  .grid-sm-12 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}
+
+/* ===== MD ≥ 900px ===== */
+@media (min-width: 900px) {
+  .grid-md-1 {
+    flex: 0 0 calc(8.3333% - (var(--gap) * 11 / 12));
+    max-width: calc(8.3333% - (var(--gap) * 11 / 12));
+  }
+  .grid-md-2 {
+    flex: 0 0 calc(16.6666% - (var(--gap) * 10 / 12));
+    max-width: calc(16.6666% - (var(--gap) * 10 / 12));
+  }
+  .grid-md-3 {
+    flex: 0 0 calc(25% - (var(--gap) * 9 / 12));
+    max-width: calc(25% - (var(--gap) * 9 / 12));
+  }
+  .grid-md-4 {
+    flex: 0 0 calc(33.3333% - (var(--gap) * 8 / 12));
+    max-width: calc(33.3333% - (var(--gap) * 8 / 12));
+  }
+  .grid-md-5 {
+    flex: 0 0 calc(41.6666% - (var(--gap) * 7 / 12));
+    max-width: calc(41.6666% - (var(--gap) * 7 / 12));
+  }
+  .grid-md-6 {
+    flex: 0 0 calc(50% - (var(--gap) * 6 / 12));
+    max-width: calc(50% - (var(--gap) * 6 / 12));
+  }
+  .grid-md-7 {
+    flex: 0 0 calc(58.3333% - (var(--gap) * 5 / 12));
+    max-width: calc(58.3333% - (var(--gap) * 5 / 12));
+  }
+  .grid-md-8 {
+    flex: 0 0 calc(66.6666% - (var(--gap) * 4 / 12));
+    max-width: calc(66.6666% - (var(--gap) * 4 / 12));
+  }
+  .grid-md-9 {
+    flex: 0 0 calc(75% - (var(--gap) * 3 / 12));
+    max-width: calc(75% - (var(--gap) * 3 / 12));
+  }
+  .grid-md-10 {
+    flex: 0 0 calc(83.3333% - (var(--gap) * 2 / 12));
+    max-width: calc(83.3333% - (var(--gap) * 2 / 12));
+  }
+  .grid-md-11 {
+    flex: 0 0 calc(91.6666% - (var(--gap) * 1 / 12));
+    max-width: calc(91.6666% - (var(--gap) * 1 / 12));
+  }
+  .grid-md-12 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}
+
+/* ===== LG ≥ 1200px ===== */
+@media (min-width: 1200px) {
+  .grid-lg-1 {
+    flex: 0 0 calc(8.3333% - (var(--gap) * 11 / 12));
+    max-width: calc(8.3333% - (var(--gap) * 11 / 12));
+  }
+  .grid-lg-2 {
+    flex: 0 0 calc(16.6666% - (var(--gap) * 10 / 12));
+    max-width: calc(16.6666% - (var(--gap) * 10 / 12));
+  }
+  .grid-lg-3 {
+    flex: 0 0 calc(25% - (var(--gap) * 9 / 12));
+    max-width: calc(25% - (var(--gap) * 9 / 12));
+  }
+  .grid-lg-4 {
+    flex: 0 0 calc(33.3333% - (var(--gap) * 8 / 12));
+    max-width: calc(33.3333% - (var(--gap) * 8 / 12));
+  }
+  .grid-lg-5 {
+    flex: 0 0 calc(41.6666% - (var(--gap) * 7 / 12));
+    max-width: calc(41.6666% - (var(--gap) * 7 / 12));
+  }
+  .grid-lg-6 {
+    flex: 0 0 calc(50% - (var(--gap) * 6 / 12));
+    max-width: calc(50% - (var(--gap) * 6 / 12));
+  }
+  .grid-lg-7 {
+    flex: 0 0 calc(58.3333% - (var(--gap) * 5 / 12));
+    max-width: calc(58.3333% - (var(--gap) * 5 / 12));
+  }
+  .grid-lg-8 {
+    flex: 0 0 calc(66.6666% - (var(--gap) * 4 / 12));
+    max-width: calc(66.6666% - (var(--gap) * 4 / 12));
+  }
+  .grid-lg-9 {
+    flex: 0 0 calc(75% - (var(--gap) * 3 / 12));
+    max-width: calc(75% - (var(--gap) * 3 / 12));
+  }
+  .grid-lg-10 {
+    flex: 0 0 calc(83.3333% - (var(--gap) * 2 / 12));
+    max-width: calc(83.3333% - (var(--gap) * 2 / 12));
+  }
+  .grid-lg-11 {
+    flex: 0 0 calc(91.6666% - (var(--gap) * 1 / 12));
+    max-width: calc(91.6666% - (var(--gap) * 1 / 12));
+  }
+  .grid-lg-12 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}
+
+/* ===== XL ≥ 1536px ===== */
+@media (min-width: 1536px) {
+  .grid-xl-1 {
+    flex: 0 0 calc(8.3333% - (var(--gap) * 11 / 12));
+    max-width: calc(8.3333% - (var(--gap) * 11 / 12));
+  }
+  .grid-xl-2 {
+    flex: 0 0 calc(16.6666% - (var(--gap) * 10 / 12));
+    max-width: calc(16.6666% - (var(--gap) * 10 / 12));
+  }
+  .grid-xl-3 {
+    flex: 0 0 calc(25% - (var(--gap) * 9 / 12));
+    max-width: calc(25% - (var(--gap) * 9 / 12));
+  }
+  .grid-xl-4 {
+    flex: 0 0 calc(33.3333% - (var(--gap) * 8 / 12));
+    max-width: calc(33.3333% - (var(--gap) * 8 / 12));
+  }
+  .grid-xl-5 {
+    flex: 0 0 calc(41.6666% - (var(--gap) * 7 / 12));
+    max-width: calc(41.6666% - (var(--gap) * 7 / 12));
+  }
+  .grid-xl-6 {
+    flex: 0 0 calc(50% - (var(--gap) * 6 / 12));
+    max-width: calc(50% - (var(--gap) * 6 / 12));
+  }
+  .grid-xl-7 {
+    flex: 0 0 calc(58.3333% - (var(--gap) * 5 / 12));
+    max-width: calc(58.3333% - (var(--gap) * 5 / 12));
+  }
+  .grid-xl-8 {
+    flex: 0 0 calc(66.6666% - (var(--gap) * 4 / 12));
+    max-width: calc(66.6666% - (var(--gap) * 4 / 12));
+  }
+  .grid-xl-9 {
+    flex: 0 0 calc(75% - (var(--gap) * 3 / 12));
+    max-width: calc(75% - (var(--gap) * 3 / 12));
+  }
+  .grid-xl-10 {
+    flex: 0 0 calc(83.3333% - (var(--gap) * 2 / 12));
+    max-width: calc(83.3333% - (var(--gap) * 2 / 12));
+  }
+  .grid-xl-11 {
+    flex: 0 0 calc(91.6666% - (var(--gap) * 1 / 12));
+    max-width: calc(91.6666% - (var(--gap) * 1 / 12));
+  }
+  .grid-xl-12 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}

package/src/components/MetricsPanel/MetricsPanel.tsx

@@ -176,44 +176,44 @@ export const MetricsPanel: React.FC<MetricsPanelProps & LocalProps> = (props) =>
   return (
     <div className={panelClasses} style={rootStyle} aria-busy={loading}>
       {title && <PanelHeader title={title} />}
-        <div className={styles.mpList} style={itemsContainerStyle}>
-          {loading ? (
-            <div className={styles.mpEmpty}>Chargement…</div>
-          ) : items.length === 0 ? (
-            <div className={styles.mpEmpty}>{emptyMessage}</div>
-          ) : (
-            items.map((item: ItemType) => {
-              const wrapperStyle: React.CSSProperties | undefined = compact
-                ? {
-                    width: compactItemWidth ?? undefined,
-                    height: compactItemHeight ?? undefined,
-                    boxSizing: 'border-box',
-                    ...(compactItemStyle ?? {}),
+      <div className={styles.mpList} style={itemsContainerStyle}>
+        {loading ? (
+          <div className={styles.mpEmpty}>Chargement…</div>
+        ) : items.length === 0 ? (
+          <div className={styles.mpEmpty}>{emptyMessage}</div>
+        ) : (
+          items.map((item: ItemType) => {
+            const wrapperStyle: React.CSSProperties | undefined = compact
+              ? {
+                  width: compactItemWidth ?? undefined,
+                  height: compactItemHeight ?? undefined,
+                  boxSizing: 'border-box',
+                  ...(compactItemStyle ?? {}),
+                }
+              : undefined;
+
+            return (
+              <div
+                key={item.id}
+                className={compact ? styles.compactItemWrapper : undefined}
+                style={wrapperStyle}
+              >
+                <MetricsItem
+                  item={item}
+                  shape={shape}
+                  onItemClick={onItemClick}
+                  color={color}
+                  renderItem={
+                    effectiveRenderItem
+                      ? (it) => effectiveRenderItem(it, items.indexOf(it))
+                      : undefined
                   }
-                : undefined;
-
-              return (
-                <div
-                  key={item.id}
-                  className={compact ? styles.compactItemWrapper : undefined}
-                  style={wrapperStyle}
-                >
-                  <MetricsItem
-                    item={item}
-                    shape={shape}
-                    onItemClick={onItemClick}
-                    color={color}
-                    renderItem={
-                      effectiveRenderItem
-                        ? (it) => effectiveRenderItem(it, items.indexOf(it))
-                        : undefined
-                    }
-                  />
-                </div>
-              );
-            })
-          )}
-        </div>
+                />
+              </div>
+            );
+          })
+        )}
+      </div>
     </div>
   );
 };

package/src/components/MetricsPanel/renderers/CompactRenderer.tsx

@@ -69,7 +69,7 @@ const CompactRenderer = (item: ItemType) => (
       <div
         style={{
           fontWeight: 900,
-          fontSize: 'clamp(22px, 2.5vw, 26px)',
+          fontSize: 'clamp(16px, 1.6vw, 20px)',
           color: (item as any).valueColor,
           lineHeight: 1,
           minWidth: 0,