@tsiky/components-r19 1.0.0 → 1.2.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/Header/Header.tsx

@@ -46,8 +46,10 @@ export const Header: React.FC<HeaderProps> = ({
 
         {/* Droite : menu */}
         <div className='header-right'>
-          <DraggableSwitcherButton />
-          <ThemeSwitcherButton />
+          <div className='switcher'>
+            <DraggableSwitcherButton />
+            <ThemeSwitcherButton />
+          </div>
           <DropdownMenu
             categories={dropdownItems?.categories}
             buttonContent={dropdownItems?.buttonContent}

package/src/components/Header/header.css

@@ -1,31 +1,61 @@
-.header {
-  background: var(--headerBg);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
-  max-width: 100vw;
-  font-size: var(--text-small);
-}
-
-/* container centré */
-.header-container {
-  margin: 0 auto;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 15px 17px;
-  gap: 20px;
-}
-
-/* gauche : logo + nav */
-.header-left {
-  display: flex;
-  align-items: center;
-  gap: 22px;
-}
-
-/* droite : menu bouton */
-.header-right {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
+.header {
+  background: var(--headerBg);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
+  max-width: 100vw;
+  font-size: var(--text-small);
+}
+
+/* container centré */
+.header-container {
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 15px 17px;
+  gap: 20px;
+}
+
+/* gauche : logo + nav */
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 22px;
+}
+
+/* droite : menu bouton */
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.switcher {
+  display: flex;
+  align-items: center;
+}
+
+@media (max-width: 500px) {
+  .switcher {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.2025rem;
+  }
+
+  .switcher {
+    animation: slideDown 0.4s ease;
+  }
+
+  @keyframes slideDown {
+    from {
+      transform: translateY(-15px);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+}