@maboussoleaidant/design-system 0.1.3 → 0.1.4

package/dist/mba-design-system.css

@@ -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,204 +1087,533 @@ a:hover {
 }
 
 /* ===========================================
-   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 BUTTON
+   TERTIARY BUTTON (Large/Default)
+   height: 38px, padding: 8px 16px, gap: 8px
    =========================================== */
 
-.mba-btn-icon {
+.mba-btn-tertiary {
   display: inline-flex;
-  align-items: center;
+  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: 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-tertiary:hover:not(:disabled):not(.is-disabled) {
+  background-color: var(--mba-color-primary-50);
+  color: var(--mba-color-primary-500);
 }
 
-/* Arrow forward icon alignment */
+.mba-btn-tertiary:focus {
+  outline: none;
+  box-shadow: var(--mba-focus-ring);
+}
 
-.mba-btn .arrow-forward,
-.mba-btn-secondary .arrow-forward {
-  vertical-align: middle;
+.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;
 }
 
 /* ===========================================
-   MODIFIERS
+   INLINE BUTTON
+   height: 24px, padding: 8px 16px, gap: 4px
    =========================================== */
 
-/* Full width */
+.mba-btn-inline {
+  display: inline-flex;
+  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;
 
-.mba-btn-block {
-  display: block;
-  width: 100%;
-  text-align: center;
+  background-color: var(--mba-color-white);
+  color: var(--mba-color-primary-500);
 }
 
-/* ===========================================
-   RESPONSIVE (full width on mobile)
-   =========================================== */
+.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;
+}
 
-@media (max-width: 767px) {
-  .mba-btn,
-  .mba-btn-secondary {
-    display: flex;
-    width: 100%;
-    max-width: 100%;
-  }
+.mba-btn-inline: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-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;
+}
 
 /* ===========================================
-   BASE CARD (Large / Default)
-   padding: 24px (MD), border-radius: 16px (SM)
+   LIGHT BUTTON (Large/Default)
+   height: 30px, padding: 4px 12px, gap: 4px
    =========================================== */
 
-.mba-card {
-  display: flex;
-  flex-direction: column;
-  padding: var(--mba-space-md);
+.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);
-  background-color: var(--mba-color-beige);
-  border: 2px solid transparent;
-  transition: border-color 0.25s ease-in-out;
   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-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;
 }
 
-/* ===========================================
-   SMALL CARD
-   =========================================== */
+.mba-btn-light:focus {
+  outline: none;
+  box-shadow: var(--mba-focus-ring);
+}
 
-.mba-card--sm {
-  padding: var(--mba-space-sm);
+.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;
 }
 
 /* ===========================================
-   CARD PARTS
+   ANNUAIRE BUTTON (Large/Default)
+   height: 38px, padding: 8px 16px, gap: 8px
    =========================================== */
 
-.mba-card__header {
-  display: flex;
-  justify-content: space-between;
+.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-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 {
+  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-regular);
-  color: var(--mba-color-text);
+  font-weight: var(--mba-font-weight-semibold);
   line-height: var(--mba-leading-snug);
-  margin: 0;
+  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__icon {
-  flex-shrink: 0;
-  color: var(--mba-color-primary-500);
-  font-size: 24px;
-  transition: transform 0.2s ease;
+.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-card__icon svg {
-  width: 24px;
-  height: 24px;
+.mba-btn-annuaire:focus {
+  outline: none;
+  box-shadow: var(--mba-focus-ring);
 }
 
-.mba-card:hover .mba-card__icon {
-  transform: translateX(4px);
+.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;
 }
 
 /* ===========================================
-   CARD GRID
+   PIN BUTTON
+   width: 40px, height: 40px, icon: 20px
    =========================================== */
 
-.mba-card-grid {
-  display: grid;
-  gap: var(--mba-space-md);
-  grid-template-columns: 1fr;
-  width: 100%;
-}
+.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;
 
-@media (min-width: 600px) {
-  .mba-card-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
+  background-color: var(--mba-color-white);
+  color: var(--mba-color-primary-500);
 }
 
-@media (min-width: 900px) {
-  .mba-card-grid {
-    grid-template-columns: repeat(3, 1fr);
-  }
+.mba-btn-pin .mba-icon {
+  font-size: 20px;
+  width: 20px;
+  height: 20px;
 }
 
-/* ===========================================
-   CARD VARIANTS
-   =========================================== */
+.mba-btn-pin:focus {
+  outline: none;
+  box-shadow: var(--mba-focus-ring);
+}
 
-/* White background */
+/* Deja-vu state */
 
-.mba-card--white {
-  background-color: var(--mba-color-white);
+.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);
 }
 
-/* Non-interactive (no hover) */
+/* Activated state */
 
-.mba-card--static {
-  cursor: default;
+.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-card--static:hover {
-  border-color: transparent;
+.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;
 }
 
 /* ===========================================
-   CAROUSEL CARD (Testimonial)
-   Bordure gradient sunset
+   ICON BUTTON
+   width: 24px, height: 24px, icon: 16px
    =========================================== */
 
-.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;
+.mba-btn-icon-only {
+  display: inline-flex;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  justify-content: center;
+  align-items: center;
+  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-btn-icon-only .mba-icon {
+  font-size: 16px;
+  width: 16px;
+  height: 16px;
+}
+
+.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-btn-icon-only:focus {
+  outline: none;
+  box-shadow: var(--mba-focus-ring);
+}
+
+/* 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);
+}
+
+.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;
@@ -1472,6 +1802,912 @@ a:hover {
   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);
+}
+
+/* Chevron icon */
+
+.mba-dropdown__chevron {
+  font-size: 20px;
+  color: var(--mba-color-grey-400);
+  transition: transform 0.2s ease;
+}
+
+.mba-dropdown--open .mba-dropdown__chevron {
+  transform: rotate(180deg);
+}
+
+/* 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);
+}
+
+.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);
+}
+
+/* Valid state */
+
+.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-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);
+}
+
+/* Panel */
+
+.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-dropdown--open .mba-dropdown__panel {
+  display: flex;
+}
+
+/* Custom scrollbar */
+
+.mba-dropdown__panel::-webkit-scrollbar {
+  width: 6px;
+}
+
+.mba-dropdown__panel::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.mba-dropdown__panel::-webkit-scrollbar-thumb {
+  background-color: var(--mba-color-primary-pro-800);
+  border-radius: 3px;
+}
+
+/* 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-black);
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.mba-dropdown__option:hover {
+  background-color: var(--mba-color-grey-50);
+}
+
+.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);
+}
+
+/* ===========================================
+   TOGGLE SWITCH
+   width: 42px, height: 24px, cercle: 20px
+   =========================================== */
+
+.mba-toggle {
+  position: relative;
+  display: inline-block;
+  width: 42px;
+  height: 24px;
+}
+
+.mba-toggle input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.mba-toggle__slider {
+  position: absolute;
+  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-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-toggle input:checked + .mba-toggle__slider {
+  background-color: var(--mba-color-secondary-500);
+}
+
+.mba-toggle input:checked + .mba-toggle__slider::before {
+  transform: translateX(18px);
+}
+
+.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;
+}
+
+/* ===========================================
+   INPUT WITH ICON
+   =========================================== */
+
+.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;
+}
+
+.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;
+}
+
+.mba-input-icon input::placeholder {
+  color: var(--mba-color-grey-400);
+}
+
+.mba-input-icon__icon {
+  font-size: 16px;
+  color: var(--mba-color-grey-400);
+  margin-left: var(--mba-space-xs);
+}
+
+/* Icon clickable (button) */
+
+button.mba-input-icon__icon {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+
+button.mba-input-icon__icon:hover {
+  color: var(--mba-color-primary-500);
+}
+
+/* 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-input-icon--disabled {
+  background-color: var(--mba-color-grey-50);
+  cursor: not-allowed;
+}
+
+.mba-input-icon--disabled input {
+  cursor: not-allowed;
+  color: var(--mba-color-grey-400);
+}
+
+/* Error state */
+
+.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"; */
 
 /* @import "./_alerts.css"; */