@maboussoleaidant/design-system 0.1.3 → 0.1.5

package/dist/mba-design-system.css

@@ -584,7 +584,7 @@
   font-style: normal;
   font-weight: 100 700;
   font-display: block;
-  src: url('/fonts/MaterialSymbolsRounded.woff2') format('woff2');
+  src: url('../assets/fonts/MaterialSymbolsRounded.woff2') format('woff2');
 }
 
 /* ===========================================
@@ -1031,7 +1031,7 @@ a:hover {
 
 .mba-btn:disabled,
 .mba-btn.is-disabled {
-  background-color: var(--mba-color-grey-100);
+  background-color: var(--mba-color-grey-50);
   color: var(--mba-color-grey-400);
   border-color: transparent;
   cursor: not-allowed;
@@ -1040,6 +1040,7 @@ a:hover {
 
 /* ===========================================
    SECONDARY BUTTON (Large/Default)
+   height: 38px, padding: 8px 16px, gap: 8px
    =========================================== */
 
 .mba-btn-secondary {
@@ -1078,7 +1079,7 @@ a:hover {
 
 .mba-btn-secondary:disabled,
 .mba-btn-secondary.is-disabled {
-  background-color: var(--mba-color-grey-100);
+  background-color: var(--mba-color-grey-50);
   color: var(--mba-color-grey-400);
   border-color: var(--mba-color-grey-100);
   cursor: not-allowed;
@@ -1086,390 +1087,1625 @@ a:hover {
 }
 
 /* ===========================================
-   SMALL BUTTON
-   padding: 4px 8px, gap: 8px
+   TERTIARY BUTTON (Large/Default)
+   height: 38px, padding: 8px 16px, gap: 8px
    =========================================== */
 
-.mba-btn-sm {
-  height: auto;
-  padding: var(--mba-space-xxs) var(--mba-space-xs);
+.mba-btn-tertiary {
+  display: inline-flex;
+  height: 38px;
+  padding: var(--mba-space-xs) var(--mba-space-sm);
+  justify-content: center;
+  align-items: center;
   gap: var(--mba-space-xs);
-  font-size: var(--mba-font-size-xxs);
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xs);
+  font-weight: var(--mba-font-weight-semibold);
+  line-height: var(--mba-leading-snug);
+  text-decoration: none;
+  border: none;
+  border-radius: var(--mba-radius-xs);
+  cursor: pointer;
+  transition: all 0.25s ease-in-out;
+  user-select: none;
+  white-space: nowrap;
+
+  background-color: var(--mba-color-white);
+  color: var(--mba-color-primary-500);
+}
+
+.mba-btn-tertiary:hover:not(:disabled):not(.is-disabled) {
+  background-color: var(--mba-color-primary-50);
+  color: var(--mba-color-primary-500);
+}
+
+.mba-btn-tertiary:focus {
+  outline: none;
+  box-shadow: var(--mba-focus-ring);
+}
+
+.mba-btn-tertiary:disabled,
+.mba-btn-tertiary.is-disabled {
+  background-color: var(--mba-color-grey-50);
+  color: var(--mba-color-grey-400);
+  cursor: not-allowed;
+  pointer-events: none;
 }
 
 /* ===========================================
-   ICON BUTTON
+   INLINE BUTTON
+   height: 24px, padding: 8px 16px, gap: 4px
    =========================================== */
 
-.mba-btn-icon {
+.mba-btn-inline {
   display: inline-flex;
-  align-items: center;
+  height: 24px;
+  padding: var(--mba-space-xs) var(--mba-space-sm);
   justify-content: center;
+  align-items: center;
+  gap: var(--mba-space-xxs);
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xs);
+  font-weight: var(--mba-font-weight-semibold);
+  line-height: var(--mba-leading-snug);
+  text-decoration: underline;
+  border: none;
+  border-radius: var(--mba-radius-xs);
+  cursor: pointer;
+  transition: all 0.25s ease-in-out;
+  user-select: none;
+  white-space: nowrap;
+
+  background-color: var(--mba-color-white);
+  color: var(--mba-color-primary-500);
 }
 
-.mba-btn-icon i,
-.mba-btn-icon svg {
-  font-size: 1rem;
-  width: 1rem;
-  height: 1rem;
+.mba-btn-inline:hover:not(:disabled):not(.is-disabled):not(.is-error) {
+  background-color: var(--mba-color-white);
+  color: var(--mba-color-primary-800);
+  text-decoration: underline;
 }
 
-/* Arrow forward icon alignment */
+.mba-btn-inline:focus {
+  outline: none;
+  box-shadow: var(--mba-focus-ring);
+}
 
-.mba-btn .arrow-forward,
-.mba-btn-secondary .arrow-forward {
-  vertical-align: middle;
+.mba-btn-inline:disabled,
+.mba-btn-inline.is-disabled {
+  background-color: var(--mba-color-white);
+  color: var(--mba-color-grey-400);
+  text-decoration: underline;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Alert-Error state */
+
+.mba-btn-inline.is-error {
+  background-color: var(--mba-color-white);
+  color: var(--mba-color-error-500);
+  text-decoration: underline;
 }
 
 /* ===========================================
-   MODIFIERS
+   LIGHT BUTTON (Large/Default)
+   height: 30px, padding: 4px 12px, gap: 4px
    =========================================== */
 
-/* Full width */
+.mba-btn-light {
+  display: inline-flex;
+  height: 30px;
+  padding: var(--mba-space-xxs) 12px;
+  justify-content: center;
+  align-items: center;
+  gap: var(--mba-space-xxs);
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xs);
+  font-weight: var(--mba-font-weight-semibold);
+  line-height: var(--mba-leading-snug);
+  text-decoration: none;
+  border: 1.5px solid var(--mba-color-primary-400);
+  border-radius: var(--mba-radius-sm);
+  cursor: pointer;
+  transition: all 0.25s ease-in-out;
+  user-select: none;
+  white-space: nowrap;
 
-.mba-btn-block {
-  display: block;
-  width: 100%;
-  text-align: center;
+  background-color: var(--mba-color-white);
+  color: var(--mba-color-primary-900);
 }
 
-/* ===========================================
-   RESPONSIVE (full width on mobile)
-   =========================================== */
+.mba-btn-light:hover:not(:disabled):not(.is-disabled) {
+  background-color: var(--mba-color-white);
+  color: var(--mba-color-primary-900);
+  border-color: var(--mba-color-primary-500);
+  text-decoration: underline;
+}
 
-@media (max-width: 767px) {
-  .mba-btn,
-  .mba-btn-secondary {
-    display: flex;
-    width: 100%;
-    max-width: 100%;
-  }
+.mba-btn-light:focus {
+  outline: none;
+  box-shadow: var(--mba-focus-ring);
 }
 
-/**
- * MBA Design System - Cards
- *
- * Classes: .mba-card, .mba-card--sm, .mba-card-grid
- * Source: Design System Figma
- */
+.mba-btn-light:disabled,
+.mba-btn-light.is-disabled {
+  background-color: var(--mba-color-white);
+  color: var(--mba-color-grey-400);
+  border-color: var(--mba-color-grey-100);
+  cursor: not-allowed;
+  pointer-events: none;
+}
 
 /* ===========================================
-   BASE CARD (Large / Default)
-   padding: 24px (MD), border-radius: 16px (SM)
+   ANNUAIRE BUTTON (Large/Default)
+   height: 38px, padding: 8px 16px, gap: 8px
    =========================================== */
 
-.mba-card {
-  display: flex;
-  flex-direction: column;
-  padding: var(--mba-space-md);
-  border-radius: var(--mba-radius-sm);
-  background-color: var(--mba-color-beige);
-  border: 2px solid transparent;
-  transition: border-color 0.25s ease-in-out;
+.mba-btn-annuaire {
+  display: inline-flex;
+  height: 38px;
+  padding: var(--mba-space-xs) var(--mba-space-sm);
+  justify-content: center;
+  align-items: center;
+  gap: var(--mba-space-xs);
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xs);
+  font-weight: var(--mba-font-weight-semibold);
+  line-height: var(--mba-leading-snug);
+  text-decoration: none;
+  border: 1px solid var(--mba-color-grey-100);
+  border-radius: var(--mba-radius-xs);
   cursor: pointer;
+  transition: all 0.25s ease-in-out;
+  user-select: none;
+  white-space: nowrap;
+
+  background-color: var(--mba-color-white);
+  color: var(--mba-color-primary-900);
 }
 
-.mba-card:hover {
+.mba-btn-annuaire:hover:not(:disabled):not(.is-disabled) {
+  background-color: var(--mba-color-white);
+  color: var(--mba-color-primary-900);
   border-color: var(--mba-color-primary-500);
 }
 
+.mba-btn-annuaire:focus {
+  outline: none;
+  box-shadow: var(--mba-focus-ring);
+}
+
+.mba-btn-annuaire:disabled,
+.mba-btn-annuaire.is-disabled {
+  background-color: var(--mba-color-white);
+  color: var(--mba-color-grey-400);
+  border-color: var(--mba-color-grey-100);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
 /* ===========================================
-   SMALL CARD
+   PIN BUTTON
+   width: 40px, height: 40px, icon: 20px
    =========================================== */
 
-.mba-card--sm {
-  padding: var(--mba-space-sm);
+.mba-btn-pin {
+  display: inline-flex;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid var(--mba-color-primary-500);
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.25s ease-in-out;
+  user-select: none;
+
+  background-color: var(--mba-color-white);
+  color: var(--mba-color-primary-500);
+}
+
+.mba-btn-pin .mba-icon {
+  font-size: 20px;
+  width: 20px;
+  height: 20px;
+}
+
+.mba-btn-pin:focus {
+  outline: none;
+  box-shadow: var(--mba-focus-ring);
+}
+
+/* Deja-vu state */
+
+.mba-btn-pin.is-deja-vu {
+  border-color: var(--mba-color-grey-300);
+  background-color: var(--mba-color-grey-50);
+  color: var(--mba-color-grey-300);
+}
+
+/* Activated state */
+
+.mba-btn-pin.is-activated {
+  border-color: var(--mba-color-primary-500);
+  background-color: var(--mba-color-primary-500);
+  color: var(--mba-color-white);
+}
+
+.mba-btn-pin.is-activated .mba-icon {
+  color: var(--mba-color-white);
+}
+
+.mba-btn-pin:disabled,
+.mba-btn-pin.is-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
 }
 
 /* ===========================================
-   CARD PARTS
+   ICON BUTTON
+   width: 24px, height: 24px, icon: 16px
    =========================================== */
 
-.mba-card__header {
-  display: flex;
-  justify-content: space-between;
+.mba-btn-icon-only {
+  display: inline-flex;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  justify-content: center;
   align-items: center;
-  gap: var(--mba-space-sm);
+  border-radius: var(--mba-radius-xs);
+  cursor: pointer;
+  transition: all 0.25s ease-in-out;
+  user-select: none;
+  border: 1px solid var(--mba-color-black);
+  background-color: var(--mba-color-white);
+  color: var(--mba-color-black);
 }
 
-.mba-card__content {
-  flex: 1;
+.mba-btn-icon-only .mba-icon {
+  font-size: 16px;
+  width: 16px;
+  height: 16px;
 }
 
-.mba-card__title {
-  font-family: var(--mba-font-family-text);
-  font-size: var(--mba-font-size-sm);
-  font-weight: var(--mba-font-weight-bold);
-  color: var(--mba-color-primary-800);
-  margin: 0 0 var(--mba-space-xs);
+.mba-btn-icon-only:hover:not(:disabled):not(.is-disabled):not(.is-activated):not(.is-alert) {
+  border-color: var(--mba-color-primary-500);
+  color: var(--mba-color-primary-500);
 }
 
-.mba-card__text {
-  font-family: var(--mba-font-family-text);
-  font-size: var(--mba-font-size-xs);
-  font-weight: var(--mba-font-weight-regular);
-  color: var(--mba-color-text);
-  line-height: var(--mba-leading-snug);
-  margin: 0;
+.mba-btn-icon-only:focus {
+  outline: none;
+  box-shadow: var(--mba-focus-ring);
 }
 
-.mba-card__icon {
-  flex-shrink: 0;
+/* Activated state */
+
+.mba-btn-icon-only.is-activated {
+  border-color: var(--mba-color-primary-500);
+  background-color: var(--mba-color-white);
   color: var(--mba-color-primary-500);
-  font-size: 24px;
-  transition: transform 0.2s ease;
 }
 
-.mba-card__icon svg {
-  width: 24px;
-  height: 24px;
+.mba-btn-icon-only.is-activated:hover:not(:disabled):not(.is-disabled) {
+  border-color: var(--mba-color-primary-500);
+  color: var(--mba-color-primary-500);
+}
+
+/* Disabled state */
+
+.mba-btn-icon-only:disabled,
+.mba-btn-icon-only.is-disabled {
+  border-color: var(--mba-color-grey-300);
+  background-color: var(--mba-color-white);
+  color: var(--mba-color-grey-300);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Alert state */
+
+.mba-btn-icon-only.is-alert {
+  border-color: var(--mba-color-error-500);
+  background-color: var(--mba-color-white);
+  color: var(--mba-color-error-500);
+}
+
+.mba-btn-icon-only.is-alert:hover:not(:disabled):not(.is-disabled) {
+  border-color: var(--mba-color-error-500);
+  color: var(--mba-color-error-500);
+}
+
+/* ===========================================
+   SMALL BUTTON
+   padding: 4px 8px, gap: 8px
+   =========================================== */
+
+.mba-btn-sm {
+  height: auto;
+  padding: var(--mba-space-xxs) var(--mba-space-xs);
+  gap: var(--mba-space-xs);
+  font-size: var(--mba-font-size-xxs);
+}
+
+/* ===========================================
+   ICON ALIGNMENT
+   =========================================== */
+
+.mba-btn-icon-only i,
+.mba-btn-icon-only svg,
+.mba-btn i,
+.mba-btn svg {
+  font-size: 1rem;
+  width: 1rem;
+  height: 1rem;
+}
+
+/* Arrow forward icon alignment */
+
+.mba-btn .arrow-forward,
+.mba-btn-secondary .arrow-forward {
+  vertical-align: middle;
+}
+
+/* ===========================================
+   MODIFIERS
+   =========================================== */
+
+/* Full width */
+
+.mba-btn-block {
+  display: block;
+  width: 100%;
+  text-align: center;
+}
+
+/* ===========================================
+   RESPONSIVE (full width on mobile)
+   =========================================== */
+
+@media (max-width: 767px) {
+  .mba-btn,
+  .mba-btn-secondary {
+    display: flex;
+    width: 100%;
+    max-width: 100%;
+  }
+}
+
+/**
+ * MBA Design System - Cards
+ *
+ * Classes: .mba-card, .mba-card--sm, .mba-card-grid
+ * Source: Design System Figma
+ */
+
+/* ===========================================
+   BASE CARD (Large / Default)
+   padding: 24px (MD), border-radius: 16px (SM)
+   =========================================== */
+
+.mba-card {
+  display: flex;
+  flex-direction: column;
+  padding: var(--mba-space-md);
+  border-radius: var(--mba-radius-sm);
+  background-color: var(--mba-color-beige);
+  border: 2px solid transparent;
+  transition: border-color 0.25s ease-in-out;
+  cursor: pointer;
+}
+
+.mba-card:hover {
+  border-color: var(--mba-color-primary-500);
+}
+
+/* ===========================================
+   SMALL CARD
+   =========================================== */
+
+.mba-card--sm {
+  padding: var(--mba-space-sm);
+}
+
+/* ===========================================
+   CARD PARTS
+   =========================================== */
+
+.mba-card__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--mba-space-sm);
+}
+
+.mba-card__content {
+  flex: 1;
+}
+
+.mba-card__title {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-sm);
+  font-weight: var(--mba-font-weight-bold);
+  color: var(--mba-color-primary-800);
+  margin: 0 0 var(--mba-space-xs);
+}
+
+.mba-card__text {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xs);
+  font-weight: var(--mba-font-weight-regular);
+  color: var(--mba-color-text);
+  line-height: var(--mba-leading-snug);
+  margin: 0;
+}
+
+.mba-card__icon {
+  flex-shrink: 0;
+  color: var(--mba-color-primary-500);
+  font-size: 24px;
+  transition: transform 0.2s ease;
+}
+
+.mba-card__icon svg {
+  width: 24px;
+  height: 24px;
+}
+
+.mba-card:hover .mba-card__icon {
+  transform: translateX(4px);
+}
+
+/* ===========================================
+   CARD GRID
+   =========================================== */
+
+.mba-card-grid {
+  display: grid;
+  gap: var(--mba-space-md);
+  grid-template-columns: 1fr;
+  width: 100%;
+}
+
+@media (min-width: 600px) {
+  .mba-card-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 900px) {
+  .mba-card-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+/* ===========================================
+   CARD VARIANTS
+   =========================================== */
+
+/* White background */
+
+.mba-card--white {
+  background-color: var(--mba-color-white);
+}
+
+/* Non-interactive (no hover) */
+
+.mba-card--static {
+  cursor: default;
+}
+
+.mba-card--static:hover {
+  border-color: transparent;
+}
+
+/* ===========================================
+   CAROUSEL CARD (Testimonial)
+   Bordure gradient sunset
+   =========================================== */
+
+.mba-carousel-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding: var(--mba-space-md);
+  background-color: var(--mba-color-white);
+  border-radius: 24px 24px 8px 24px;
+  width: 453px;
+  height: 278px;
+  box-sizing: border-box;
+}
+
+.mba-carousel-card::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  padding: 1px;
+  background: var(--mba-gradient-sunset);
+  border-radius: 24px 24px 8px 24px;
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  -webkit-mask-composite: xor;
+  pointer-events: none;
+}
+
+.mba-carousel-card__title {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-sm);
+  font-weight: var(--mba-font-weight-bold);
+  color: var(--mba-color-primary-800);
+  margin: 0;
+}
+
+.mba-carousel-card__quote {
+  flex: 1;
+  margin-top: var(--mba-space-sm);
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xs);
+  font-weight: var(--mba-font-weight-regular);
+  color: var(--mba-color-primary-800);
+}
+
+.mba-carousel-card__author {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xxs);
+  font-weight: var(--mba-font-weight-bold);
+  color: var(--mba-color-primary-500);
+  margin: 0;
+}
+
+@media (max-width: 767px) {
+  .mba-carousel-card {
+    width: 286px;
+    height: 360px;
+  }
+}
+
+/* ===========================================
+   STATS CARD
+   Bordure gradient sunset
+   =========================================== */
+
+.mba-stats-card {
+  position: relative;
+  padding: var(--mba-space-md);
+  background-color: var(--mba-color-white);
+  border-radius: var(--mba-radius-md);
+  box-shadow: var(--mba-shadow-xs);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.mba-stats-card::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  padding: 1px;
+  background: var(--mba-gradient-sunset);
+  border-radius: var(--mba-radius-md);
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  -webkit-mask-composite: xor;
+  pointer-events: none;
+}
+
+.mba-stats-card:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--mba-shadow-sm);
+}
+
+.mba-stats-card__value {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xxl);
+  font-weight: var(--mba-font-weight-extrabold);
+  color: var(--mba-color-primary-500);
+  line-height: 1;
+  margin: 0;
+}
+
+.mba-stats-card__title {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xs);
+  font-weight: var(--mba-font-weight-bold);
+  margin-top: var(--mba-space-sm);
+  margin-bottom: 0;
+  color: var(--mba-color-text);
+}
+
+.mba-stats-card__description {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xs);
+  font-weight: var(--mba-font-weight-regular);
+  color: var(--mba-color-text);
+  margin: 0;
+}
+
+/* ===========================================
+   STATS GRID
+   =========================================== */
+
+.mba-stats-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--mba-space-lg);
+  width: 100%;
+}
+
+@media (max-width: 900px) {
+  .mba-stats-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 600px) {
+  .mba-stats-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/**
+ * MBA Design System - Arrow Buttons
+ *
+ * Boutons circulaires de navigation (carousels, sliders)
+ *
+ * Specs Figma:
+ * - padding: 4px (XXS)
+ * - border-radius: 64px (XXL) → cercle
+ * - background: Primary-500
+ * - disabled: Grey-300
+ */
+
+.mba-arrow {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--mba-space-xxs);
+  border-radius: var(--mba-radius-xxl);
+  background-color: var(--mba-color-primary-500);
+  color: var(--mba-color-white);
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.mba-arrow:hover {
+  background-color: var(--mba-color-primary-800);
+}
+
+.mba-arrow:focus-visible {
+  outline: none;
+  box-shadow: var(--mba-focus-ring);
+}
+
+/* Disabled state */
+
+.mba-arrow:disabled,
+.mba-arrow.is-disabled {
+  background-color: var(--mba-color-grey-300);
+  cursor: not-allowed;
+}
+
+.mba-arrow:disabled:hover,
+.mba-arrow.is-disabled:hover {
+  background-color: var(--mba-color-grey-300);
+}
+
+/* Icon sizing */
+
+.mba-arrow .material-symbols-rounded {
+  font-size: 24px;
+}
+
+/**
+ * MBA Design System - Radio & Checkbox
+ *
+ * Classes: .mba-radio, .mba-radio--pro, .mba-checkbox, .mba-checkbox--pro
+ * Source: Design System Figma
+ */
+
+/* ===========================================
+   RADIO BUTTON - Aidants (Primary)
+   =========================================== */
+
+.mba-radio {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+
+.mba-radio input {
+  position: absolute;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  cursor: pointer;
+}
+
+.mba-radio .mba-radio__control {
+  position: relative;
+  width: 16px;
+  height: 16px;
+  border-radius: 8px;
+  border: 1px solid var(--mba-color-primary-900);
+  background-color: var(--mba-color-white);
+  transition: all 0.2s ease;
+}
+
+.mba-radio .mba-radio__control::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0);
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background-color: var(--mba-color-primary-400);
+  transition: transform 0.2s ease;
+}
+
+/* Hover state (pas sur disabled) */
+
+.mba-radio:hover:not(:has(input:disabled)) .mba-radio__control::after {
+  transform: translate(-50%, -50%) scale(1);
+  width: 10px;
+  height: 10px;
+}
+
+/* Selected state */
+
+.mba-radio input:checked + .mba-radio__control::after {
+  transform: translate(-50%, -50%) scale(1);
+  width: 12px;
+  height: 12px;
+}
+
+/* Focus state */
+
+.mba-radio input:focus + .mba-radio__control {
+  box-shadow: var(--mba-focus-ring);
+}
+
+/* Disabled state */
+
+.mba-radio input:disabled + .mba-radio__control {
+  border-color: var(--mba-color-grey-300);
+  background-color: var(--mba-color-grey-50);
+  cursor: not-allowed;
+}
+
+.mba-radio input:disabled + .mba-radio__control::after {
+  background-color: var(--mba-color-grey-300);
+}
+
+.mba-radio:has(input:disabled) {
+  cursor: not-allowed;
+}
+
+/* ===========================================
+   RADIO BUTTON - Partenaire (PrimaryPro)
+   =========================================== */
+
+.mba-radio--pro .mba-radio__control {
+  border-color: var(--mba-color-primary-pro-800);
+}
+
+.mba-radio--pro .mba-radio__control::after {
+  background-color: var(--mba-color-primary-pro-400);
+}
+
+/* ===========================================
+   CHECKBOX - Aidants (Primary)
+   =========================================== */
+
+.mba-checkbox {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+
+.mba-checkbox input {
+  position: absolute;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  cursor: pointer;
+}
+
+.mba-checkbox .mba-checkbox__control {
+  position: relative;
+  width: 16px;
+  height: 16px;
+  border-radius: var(--mba-radius-2xs);
+  border: 1px solid var(--mba-color-primary-900);
+  background-color: var(--mba-color-white);
+  transition: all 0.2s ease;
+}
+
+.mba-checkbox .mba-checkbox__control::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0);
+  width: 12px;
+  height: 12px;
+  border-radius: 2px;
+  background-color: var(--mba-color-primary-400);
+  transition: transform 0.2s ease;
+}
+
+/* Hover state (pas sur disabled) */
+
+.mba-checkbox:hover:not(:has(input:disabled)) .mba-checkbox__control::after {
+  transform: translate(-50%, -50%) scale(1);
+  width: 10px;
+  height: 10px;
+}
+
+/* Selected state */
+
+.mba-checkbox input:checked + .mba-checkbox__control::after {
+  transform: translate(-50%, -50%) scale(1);
+  width: 12px;
+  height: 12px;
+}
+
+/* Focus state */
+
+.mba-checkbox input:focus + .mba-checkbox__control {
+  box-shadow: var(--mba-focus-ring);
+}
+
+/* Disabled state */
+
+.mba-checkbox input:disabled + .mba-checkbox__control {
+  border-color: var(--mba-color-grey-300);
+  background-color: var(--mba-color-grey-50);
+  cursor: not-allowed;
+}
+
+.mba-checkbox input:disabled + .mba-checkbox__control::after {
+  background-color: var(--mba-color-grey-300);
+}
+
+.mba-checkbox:has(input:disabled) {
+  cursor: not-allowed;
+}
+
+/* ===========================================
+   CHECKBOX - Partenaire (PrimaryPro)
+   =========================================== */
+
+.mba-checkbox--pro .mba-checkbox__control {
+  border-color: var(--mba-color-primary-pro-800);
+}
+
+.mba-checkbox--pro .mba-checkbox__control::after {
+  background-color: var(--mba-color-primary-pro-400);
+}
+
+/* ===========================================
+   WITH LABEL
+   =========================================== */
+
+.mba-radio-label,
+.mba-checkbox-label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mba-space-xs);
+  cursor: pointer;
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xs);
+  color: var(--mba-color-black);
+}
+
+.mba-radio-label:has(input:disabled),
+.mba-checkbox-label:has(input:disabled) {
+  cursor: not-allowed;
+  color: var(--mba-color-grey-400);
+}
+
+/**
+ * MBA Design System - Pagination
+ *
+ * Composant de pagination pour la navigation entre pages
+ * Source: Design System Figma
+ */
+
+/* ===========================================
+   PAGINATION CONTAINER
+   height: hug (32px), gap: 16px (SM)
+   =========================================== */
+
+.mba-pagination {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mba-space-sm); /* 16px */
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+/* ===========================================
+   PAGINATION ITEM
+   width: 32px, height: 32px
+   =========================================== */
+
+.mba-pagination-item {
+  display: inline-flex;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  justify-content: center;
+  align-items: center;
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xs);
+  font-weight: var(--mba-font-weight-semibold);
+  font-size: 18px;
+  line-height: var(--mba-leading-snug);
+  text-decoration: none;
+  border: none;
+  border-radius: var(--mba-radius-xs);
+  cursor: pointer;
+  transition: all 0.25s ease-in-out;
+  user-select: none;
+  background-color: var(--mba-color-white);
+  color: var(--mba-color-black);
+}
+
+.mba-pagination-item:hover:not(:disabled):not(.is-disabled):not(.is-active) {
+  background-color: var(--mba-color-grey-50);
+  color: var(--mba-color-black);
+}
+
+.mba-pagination-item:focus {
+  outline: none;
+  box-shadow: var(--mba-focus-ring);
+}
+
+/* Active state */
+
+.mba-pagination-item.is-active {
+  background-color: var(--mba-color-secondary-500);
+  border-radius: 50%;
+  color: var(--mba-color-black);
+  cursor: default;
+}
+
+/* Disabled state */
+
+.mba-pagination-item:disabled,
+.mba-pagination-item.is-disabled {
+  background-color: var(--mba-color-white);
+  color: var(--mba-color-grey-300);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ===========================================
+   PAGINATION ELLIPSIS
+   =========================================== */
+
+.mba-pagination-ellipsis {
+  display: inline-flex;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  justify-content: center;
+  align-items: center;
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xs);
+  font-weight: var(--mba-font-weight-semibold);
+  line-height: var(--mba-leading-snug);
+  color: var(--mba-color-grey-400);
+  user-select: none;
+  pointer-events: none;
+}
+
+/* ===========================================
+   PAGINATION ARROW BUTTON
+   width: 32px, height: 32px
+   =========================================== */
+
+.mba-pagination-arrow {
+  display: inline-flex;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  border-radius: var(--mba-radius-xs);
+  cursor: pointer;
+  transition: all 0.25s ease-in-out;
+  user-select: none;
+  background-color: var(--mba-color-white);
+  color: var(--mba-color-black);
+}
+
+.mba-pagination-arrow .mba-icon {
+  font-size: 20px;
+  width: 20px;
+  height: 20px;
+}
+
+.mba-pagination-arrow:hover:not(:disabled):not(.is-disabled) {
+  background-color: var(--mba-color-grey-50);
+  color: var(--mba-color-black);
+}
+
+.mba-pagination-arrow:focus {
+  outline: none;
+  box-shadow: var(--mba-focus-ring);
+}
+
+.mba-pagination-arrow:disabled,
+.mba-pagination-arrow.is-disabled {
+  background-color: var(--mba-color-white);
+  color: var(--mba-color-grey-300);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/**
+ * MBA Design System - Inputs
+ *
+ * Classes: .mba-textarea, .mba-input, .mba-label
+ * Source: Design System Figma
+ */
+
+/* ===========================================
+   LABEL
+   =========================================== */
+
+.mba-label {
+  display: flex;
+  align-items: center;
+  gap: var(--mba-space-xxs);
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xxs);
+  font-weight: var(--mba-font-weight-regular);
+  line-height: normal;
+  color: var(--mba-color-grey-800);
+}
+
+/* Asterisque required */
+
+.mba-label__required {
+  color: var(--mba-color-error-500);
+  font-size: var(--mba-font-size-xxs);
+}
+
+/* Icone info */
+
+.mba-label__icon {
+  font-size: 16px;
+  color: var(--mba-color-grey-400);
+}
+
+/* ===========================================
+   TEXTAREA - Base
+   =========================================== */
+
+.mba-textarea {
+  display: block;
+  width: 100%;
+  padding: var(--mba-space-xs);
+  border-radius: var(--mba-radius-xs);
+  border: 1px solid var(--mba-color-grey-100);
+  background-color: var(--mba-color-white);
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xxs);
+  font-weight: var(--mba-font-weight-regular);
+  color: var(--mba-color-black);
+  resize: vertical;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+/* Placeholder */
+
+.mba-textarea::placeholder {
+  color: var(--mba-color-grey-400);
+}
+
+/* Focus state */
+
+.mba-textarea:focus {
+  outline: none;
+  border-color: var(--mba-color-info-400);
+  box-shadow: 0 0 0 1.5px var(--mba-color-info-300);
+}
+
+/* Active state (typing) - placeholder devient noir si visible */
+
+.mba-textarea:focus::placeholder {
+  color: var(--mba-color-black);
+}
+
+/* Disabled state */
+
+.mba-textarea:disabled {
+  background-color: var(--mba-color-grey-50);
+  border-color: var(--mba-color-grey-100);
+  cursor: not-allowed;
+}
+
+.mba-textarea:disabled::placeholder {
+  color: var(--mba-color-grey-400);
+}
+
+/* Hover state */
+
+.mba-textarea:hover:not(:focus):not(:disabled):not(.mba-textarea--error):not(.mba-textarea--valid) {
+  border-color: var(--mba-color-info-400);
+  box-shadow: 0 0 0 1.5px var(--mba-color-info-100);
+}
+
+/* Error state */
+
+.mba-textarea--error {
+  border-color: var(--mba-color-error-500);
+  box-shadow: 0 0 0 1.5px var(--mba-color-error-100);
+}
+
+.mba-textarea--error:focus {
+  border-color: var(--mba-color-error-500);
+  box-shadow: 0 0 0 1.5px var(--mba-color-error-300);
+}
+
+/* Valid state */
+
+.mba-textarea--valid {
+  border-color: var(--mba-color-success-500);
+  box-shadow: 0 0 0 1.5px var(--mba-color-success-100);
+}
+
+.mba-textarea--valid:focus {
+  border-color: var(--mba-color-success-500);
+  box-shadow: 0 0 0 1.5px var(--mba-color-success-300);
+}
+
+/* ===========================================
+   INPUT - Base
+   =========================================== */
+
+.mba-input {
+  display: block;
+  width: 100%;
+  padding: var(--mba-space-xs) var(--mba-space-sm);
+  border-radius: var(--mba-radius-xs);
+  border: 1px solid var(--mba-color-grey-100);
+  background-color: var(--mba-color-white);
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xxs);
+  font-weight: var(--mba-font-weight-regular);
+  color: var(--mba-color-black);
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+/* Placeholder */
+
+.mba-input::placeholder {
+  color: var(--mba-color-grey-400);
+}
+
+/* Hover state */
+
+.mba-input:hover:not(:focus):not(:disabled):not(.mba-input--error):not(.mba-input--valid) {
+  border-color: var(--mba-color-info-400);
+  box-shadow: 0 0 0 1.5px var(--mba-color-info-100);
+}
+
+/* Focus state */
+
+.mba-input:focus {
+  outline: none;
+  border-color: var(--mba-color-info-400);
+  box-shadow: 0 0 0 1.5px var(--mba-color-info-300);
+}
+
+/* Disabled state */
+
+.mba-input:disabled {
+  background-color: var(--mba-color-grey-50);
+  border-color: var(--mba-color-grey-100);
+  cursor: not-allowed;
+}
+
+.mba-input:disabled::placeholder {
+  color: var(--mba-color-grey-400);
+}
+
+/* ===========================================
+   INPUT - Error state
+   =========================================== */
+
+.mba-input--error {
+  border-color: var(--mba-color-error-500);
+  box-shadow: 0 0 0 1.5px var(--mba-color-error-100);
+}
+
+.mba-input--error:focus {
+  border-color: var(--mba-color-error-500);
+  box-shadow: 0 0 0 1.5px var(--mba-color-error-300);
+}
+
+/* ===========================================
+   INPUT - Validate state
+   =========================================== */
+
+.mba-input--valid {
+  border-color: var(--mba-color-success-500);
+  box-shadow: 0 0 0 1.5px var(--mba-color-success-100);
+}
+
+.mba-input--valid:focus {
+  border-color: var(--mba-color-success-500);
+  box-shadow: 0 0 0 1.5px var(--mba-color-success-300);
+}
+
+/* ===========================================
+   FEEDBACK MESSAGE (error / success)
+   =========================================== */
+
+.mba-feedback {
+  font-family: var(--mba-font-family-text);
+  font-size: 12px;
+  font-weight: var(--mba-font-weight-regular);
+}
+
+.mba-feedback--error {
+  color: var(--mba-color-error-500);
+}
+
+.mba-feedback--valid {
+  color: var(--mba-color-success-500);
+}
+
+/* ===========================================
+   DROPDOWN
+   =========================================== */
+
+.mba-dropdown {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+/* Trigger (select-like button) */
+
+.mba-dropdown__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: var(--mba-space-xs) var(--mba-space-sm);
+  border-radius: var(--mba-radius-xs);
+  border: 1px solid var(--mba-color-grey-100);
+  background-color: var(--mba-color-white);
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xs);
+  font-weight: var(--mba-font-weight-regular);
+  color: var(--mba-color-black);
+  cursor: pointer;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.mba-dropdown__trigger--placeholder {
+  color: var(--mba-color-grey-400);
+}
+
+.mba-dropdown:not(.mba-dropdown--error):not(.mba-dropdown--valid) .mba-dropdown__trigger:hover {
+  border-color: var(--mba-color-info-400);
+  box-shadow: 0 0 0 1.5px var(--mba-color-info-100);
+}
+
+.mba-dropdown__trigger:focus {
+  outline: none;
+  border-color: var(--mba-color-info-400);
+  box-shadow: 0 0 0 1.5px var(--mba-color-info-300);
+}
+
+.mba-dropdown__trigger:disabled {
+  background-color: var(--mba-color-grey-50);
+  border-color: var(--mba-color-grey-100);
+  cursor: not-allowed;
+  color: var(--mba-color-grey-400);
 }
 
-.mba-card:hover .mba-card__icon {
-  transform: translateX(4px);
-}
+/* Chevron icon */
 
-/* ===========================================
-   CARD GRID
-   =========================================== */
+.mba-dropdown__chevron {
+  font-size: 20px;
+  color: var(--mba-color-grey-400);
+  transition: transform 0.2s ease;
+}
 
-.mba-card-grid {
-  display: grid;
-  gap: var(--mba-space-md);
-  grid-template-columns: 1fr;
-  width: 100%;
+.mba-dropdown--open .mba-dropdown__chevron {
+  transform: rotate(180deg);
 }
 
-@media (min-width: 600px) {
-  .mba-card-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
+/* Error state */
+
+.mba-dropdown--error .mba-dropdown__trigger {
+  border-color: var(--mba-color-error-500);
+  box-shadow: 0 0 0 1.5px var(--mba-color-error-100);
 }
 
-@media (min-width: 900px) {
-  .mba-card-grid {
-    grid-template-columns: repeat(3, 1fr);
-  }
+.mba-dropdown--error .mba-dropdown__trigger:focus {
+  border-color: var(--mba-color-error-500);
+  box-shadow: 0 0 0 1.5px var(--mba-color-error-300);
 }
 
-/* ===========================================
-   CARD VARIANTS
-   =========================================== */
+/* Valid state */
 
-/* White background */
+.mba-dropdown--valid .mba-dropdown__trigger {
+  border-color: var(--mba-color-success-500);
+  box-shadow: 0 0 0 1.5px var(--mba-color-success-100);
+}
 
-.mba-card--white {
-  background-color: var(--mba-color-white);
+.mba-dropdown--valid .mba-dropdown__trigger:focus {
+  border-color: var(--mba-color-success-500);
+  box-shadow: 0 0 0 1.5px var(--mba-color-success-300);
 }
 
-/* Non-interactive (no hover) */
+/* Panel */
 
-.mba-card--static {
-  cursor: default;
+.mba-dropdown__panel {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  display: none;
+  flex-direction: column;
+  gap: 10px;
+  padding: var(--mba-space-xs);
+  border-radius: var(--mba-radius-2xs);
+  background-color: var(--mba-color-white);
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.04), 1px 2px 16px 0 rgba(28, 28, 29, 0.06);
+  max-height: 200px;
+  overflow-y: auto;
+  z-index: 10;
 }
 
-.mba-card--static:hover {
-  border-color: transparent;
+.mba-dropdown--open .mba-dropdown__panel {
+  display: flex;
 }
 
-/* ===========================================
-   CAROUSEL CARD (Testimonial)
-   Bordure gradient sunset
-   =========================================== */
+/* Custom scrollbar */
 
-.mba-carousel-card {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  padding: var(--mba-space-md);
-  background-color: var(--mba-color-white);
-  border-radius: 24px 24px 8px 24px;
-  width: 453px;
-  height: 278px;
-  box-sizing: border-box;
+.mba-dropdown__panel::-webkit-scrollbar {
+  width: 6px;
 }
 
-.mba-carousel-card::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  padding: 1px;
-  background: var(--mba-gradient-sunset);
-  border-radius: 24px 24px 8px 24px;
-  mask:
-    linear-gradient(#fff 0 0) content-box,
-    linear-gradient(#fff 0 0);
-  mask-composite: exclude;
-  -webkit-mask-composite: xor;
-  pointer-events: none;
+.mba-dropdown__panel::-webkit-scrollbar-track {
+  background: transparent;
 }
 
-.mba-carousel-card__title {
-  font-family: var(--mba-font-family-text);
-  font-size: var(--mba-font-size-sm);
-  font-weight: var(--mba-font-weight-bold);
-  color: var(--mba-color-primary-800);
-  margin: 0;
+.mba-dropdown__panel::-webkit-scrollbar-thumb {
+  background-color: var(--mba-color-primary-pro-800);
+  border-radius: 3px;
 }
 
-.mba-carousel-card__quote {
-  flex: 1;
-  margin-top: var(--mba-space-sm);
+/* Option */
+
+.mba-dropdown__option {
+  padding: var(--mba-space-xs);
+  border-radius: var(--mba-radius-xs);
   font-family: var(--mba-font-family-text);
   font-size: var(--mba-font-size-xs);
   font-weight: var(--mba-font-weight-regular);
-  color: var(--mba-color-primary-800);
+  color: var(--mba-color-black);
+  cursor: pointer;
+  transition: background-color 0.15s ease;
 }
 
-.mba-carousel-card__author {
-  font-family: var(--mba-font-family-text);
-  font-size: var(--mba-font-size-xxs);
-  font-weight: var(--mba-font-weight-bold);
-  color: var(--mba-color-primary-500);
-  margin: 0;
+.mba-dropdown__option:hover {
+  background-color: var(--mba-color-grey-50);
 }
 
-@media (max-width: 767px) {
-  .mba-carousel-card {
-    width: 286px;
-    height: 360px;
-  }
+.mba-dropdown__option--selected {
+  border: 1px solid var(--mba-color-primary-400);
+  background-color: var(--mba-color-white);
+}
+
+/* Option selected - Pro variant */
+
+.mba-dropdown--pro .mba-dropdown__option--selected {
+  border-color: var(--mba-color-primary-pro-400);
 }
 
 /* ===========================================
-   STATS CARD
-   Bordure gradient sunset
+   TOGGLE SWITCH
+   width: 42px, height: 24px, cercle: 20px
    =========================================== */
 
-.mba-stats-card {
+.mba-toggle {
   position: relative;
-  padding: var(--mba-space-md);
-  background-color: var(--mba-color-white);
-  border-radius: var(--mba-radius-md);
-  box-shadow: var(--mba-shadow-xs);
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  display: inline-block;
+  width: 42px;
+  height: 24px;
 }
 
-.mba-stats-card::before {
-  content: "";
+.mba-toggle input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.mba-toggle__slider {
   position: absolute;
-  inset: 0;
-  padding: 1px;
-  background: var(--mba-gradient-sunset);
-  border-radius: var(--mba-radius-md);
-  mask:
-    linear-gradient(#fff 0 0) content-box,
-    linear-gradient(#fff 0 0);
-  mask-composite: exclude;
-  -webkit-mask-composite: xor;
-  pointer-events: none;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--mba-color-grey-300);
+  transition: all 0.3s ease;
+  border-radius: 32px;
 }
 
-.mba-stats-card:hover {
-  transform: translateY(-4px);
-  box-shadow: var(--mba-shadow-sm);
+.mba-toggle__slider::before {
+  position: absolute;
+  content: "";
+  height: 20px;
+  width: 20px;
+  left: 2px;
+  top: 2px;
+  background-color: var(--mba-color-white);
+  transition: all 0.3s ease;
+  border-radius: 50%;
 }
 
-.mba-stats-card__value {
-  font-family: var(--mba-font-family-text);
-  font-size: var(--mba-font-size-xxl);
-  font-weight: var(--mba-font-weight-extrabold);
-  color: var(--mba-color-primary-500);
-  line-height: 1;
-  margin: 0;
+.mba-toggle input:checked + .mba-toggle__slider {
+  background-color: var(--mba-color-secondary-500);
 }
 
-.mba-stats-card__title {
-  font-family: var(--mba-font-family-text);
-  font-size: var(--mba-font-size-xs);
-  font-weight: var(--mba-font-weight-bold);
-  margin-top: var(--mba-space-sm);
-  margin-bottom: 0;
-  color: var(--mba-color-text);
+.mba-toggle input:checked + .mba-toggle__slider::before {
+  transform: translateX(18px);
 }
 
-.mba-stats-card__description {
-  font-family: var(--mba-font-family-text);
-  font-size: var(--mba-font-size-xs);
-  font-weight: var(--mba-font-weight-regular);
-  color: var(--mba-color-text);
-  margin: 0;
+.mba-toggle input:focus + .mba-toggle__slider {
+  box-shadow: var(--mba-focus-ring);
+}
+
+.mba-toggle input:disabled + .mba-toggle__slider {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
 /* ===========================================
-   STATS GRID
+   INPUT WITH ICON
    =========================================== */
 
-.mba-stats-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: var(--mba-space-lg);
+.mba-input-icon {
+  display: flex;
+  align-items: center;
   width: 100%;
+  padding: var(--mba-space-xs) var(--mba-space-sm);
+  border-radius: var(--mba-radius-xs);
+  border: 1px solid var(--mba-color-grey-100);
+  background-color: var(--mba-color-white);
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
 }
 
-@media (max-width: 900px) {
-  .mba-stats-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
+.mba-input-icon input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xxs);
+  font-weight: var(--mba-font-weight-regular);
+  color: var(--mba-color-black);
+  outline: none;
 }
 
-@media (max-width: 600px) {
-  .mba-stats-grid {
-    grid-template-columns: 1fr;
-  }
+.mba-input-icon input::placeholder {
+  color: var(--mba-color-grey-400);
 }
 
-/**
- * MBA Design System - Arrow Buttons
- *
- * Boutons circulaires de navigation (carousels, sliders)
- *
- * Specs Figma:
- * - padding: 4px (XXS)
- * - border-radius: 64px (XXL) → cercle
- * - background: Primary-500
- * - disabled: Grey-300
- */
+.mba-input-icon__icon {
+  font-size: 16px;
+  color: var(--mba-color-grey-400);
+  margin-left: var(--mba-space-xs);
+}
 
-.mba-arrow {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--mba-space-xxs);
-  border-radius: var(--mba-radius-xxl);
-  background-color: var(--mba-color-primary-500);
-  color: var(--mba-color-white);
+/* Icon clickable (button) */
+
+button.mba-input-icon__icon {
+  background: none;
   border: none;
+  padding: 0;
   cursor: pointer;
-  transition: background-color 0.2s ease;
+  transition: color 0.2s ease;
 }
 
-.mba-arrow:hover {
-  background-color: var(--mba-color-primary-800);
+button.mba-input-icon__icon:hover {
+  color: var(--mba-color-primary-500);
 }
 
-.mba-arrow:focus-visible {
-  outline: none;
-  box-shadow: var(--mba-focus-ring);
+/* Hover state */
+
+.mba-input-icon:hover:not(:focus-within):not(.mba-input-icon--disabled):not(.mba-input-icon--error) {
+  border-color: var(--mba-color-info-400);
+  box-shadow: 0 0 0 1.5px var(--mba-color-info-100);
+}
+
+/* Focus state */
+
+.mba-input-icon:focus-within {
+  border-color: var(--mba-color-info-400);
+  box-shadow: 0 0 0 1.5px var(--mba-color-info-300);
 }
 
 /* Disabled state */
 
-.mba-arrow:disabled,
-.mba-arrow.is-disabled {
-  background-color: var(--mba-color-grey-300);
+.mba-input-icon--disabled {
+  background-color: var(--mba-color-grey-50);
   cursor: not-allowed;
 }
 
-.mba-arrow:disabled:hover,
-.mba-arrow.is-disabled:hover {
-  background-color: var(--mba-color-grey-300);
+.mba-input-icon--disabled input {
+  cursor: not-allowed;
+  color: var(--mba-color-grey-400);
 }
 
-/* Icon sizing */
+/* Error state */
 
-.mba-arrow .material-symbols-rounded {
-  font-size: 24px;
+.mba-input-icon--error {
+  border-color: var(--mba-color-error-500);
+  box-shadow: 0 0 0 1.5px var(--mba-color-error-100);
+}
+
+.mba-input-icon--error:focus-within {
+  border-color: var(--mba-color-error-500);
+  box-shadow: 0 0 0 1.5px var(--mba-color-error-300);
+}
+
+.mba-input-icon--error .mba-input-icon__icon {
+  color: var(--mba-color-error-500);
+}
+
+/* ===========================================
+   INPUT GROUP (input + button)
+   =========================================== */
+
+.mba-input-group {
+  display: flex;
+  align-items: stretch;
+  gap: var(--mba-space-xxs);
+}
+
+.mba-input-group > .mba-input,
+.mba-input-group > .mba-input-icon {
+  flex: 1;
+}
+
+/* ===========================================
+   FORM GROUP (label + input)
+   =========================================== */
+
+.mba-form-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mba-space-xxs);
 }
 
 /* @import "./_forms.css"; */
@@ -1536,3 +2772,27 @@ a:hover {
   clip: auto;
   white-space: normal;
 }
+
+/* ===========================================
+   VISIBILITY UTILITIES
+   Override pour garantir le masquage même avec
+   les composants MBA (display: inline-flex, etc.)
+   =========================================== */
+
+/* Hidden - force display: none sur tous les composants */
+
+.hidden {
+  display: none !important;
+}
+
+/* Visible utilities */
+
+.visible {
+  visibility: visible;
+}
+
+.invisible {
+  visibility: hidden;
+}
+
+/*# sourceMappingURL=mba-design-system.css.map */